html, body {
    height: 100%;
}

body {
    --font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.splashscreen {
    text-align: center;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-family);
}

.splashscreen-center {
    margin: auto;
}

    .splashscreen-center img {
        margin-bottom: 15px;
    }
/*
=============================
      Hamburger Menu
=============================
*/

.menu-manager-view #footerView {
    display: flex !important;
}

.menu-manager-view .ids-footer-view .link:hover, .menu-manager-view .ids-footer-view .locale-link:hover {
    color: var(--primary-color-hover) !important;
}

.summaryView .design-summary-header-text {
    font-size: 14px;
    margin-top: 5px;
}

.ui-dialog.ui-widget-content .ui-widget-header .ui-dialog-titlebar-close .ui-button-icon-primary.ui-icon.ui-icon-closethick {
    background-color: var(--primary-color) !important;
}

.active-selection-view .close:hover {
    color: var(--primary-color-inverse) !important;
}

.guide-measure-view .render-settings-view.tw-card .header i:hover, .render-settings-view.tw-card .header i:hover {
    color: var(--primary-color-inverse) !important;
}

.render-settings-view.tw-card .header {
    background: var(--primary-color) !important;
}

.sikoAppointmentBtn img {
    vertical-align: sub;
}

.print-preview .print-views-content img:not(:first-child) {
    display: none;
}

.showAllMeasurementImages > img {
    display: block !important;
}

/* Don't have any configuration to hide application footer on mobile and Tablet */
.mobile-device .ids-footer-view {
    display: none !important;
}

.mobile-device #menu-container .ids-footer-view {
    display: block !important;
}

.task-bar-view .task:hover, .task-bar-view .task.selected {
    color: white !important;
    background: var(--primary-color);
}

.mobile-device .hamburger-menu-view .links > li > a, .steps-list-view .step-list-item-view.completed {
    --primary-color: #FFFFFF;
}

.mobile-device .steps-list-view .step-list-item-view.completed .step-order-nbr {
    --primary-color-active: #FFFFFF;
}

.mobile-device .sikoAppointmentBtn {
    font-size: small;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-device .hamburger-menu-view.mobile-ux .login-container .login-btn span {
    --text-color-light: #19243f;
}

.hamburger-menu-view.mobile-ux .account-container .account-link .username {
    --text-color-light: #19243f;
}

.error-message-view {
    font-family: var(--font-family) !important;
}

.link-button, .blue-button, .moveonwall-popup-view .buttons button {
    font-family: var(--font-family) !important;
}

#login-btn > i:before {
    content: url("assets/images/Login_ico.svg") !important;
    width: 20px;
    display: inline-block;
    vertical-align: sub;
}

.mobile-device.mobile-ux .hamburger-menu-view .account-container .placeholder, .hamburger-menu-view .login-container .placeholder {
    margin: 0 auto;
}

.mobile-device .design-header-view .design-actions .arrow-btn {
    display: none !important;
}

[id^=widget-designsummary-] .summaryView.minimal .summary-min,
.x-2020-designsummary-widget .summaryView.minimal .summary-min {
    cursor: pointer;
    display: inline-block;
    overflow: visible;
}

    [id^=widget-designsummary-] .summaryView.minimal .summary-min.outdated + .outdated-hide,
    .x-2020-designsummary-widget .summaryView.minimal .summary-min.outdated + .outdated-hide {
        display: none;
    }

    [id^=widget-designsummary-] .summaryView.minimal .summary-min:hover,
    .x-2020-designsummary-widget .summaryView.minimal .summary-min:hover {
        opacity: 0.9;
    }

.tw-btn-group {
    height: 37px !important;
}

/*Following css is used to adjust too long text in tool-tip only for total price and itemlist icon*/
.item-list-total.bottom-tip::after {
    margin-left: -200%;
    white-space: pre;
    height: 45px !important;
    line-height: 13px !important;
}

.item-list-icon.bottom-tip::after {
    margin-left: -300%;
}

.camera-controls-view .bottom .player2d-modes {
    height: auto !important;
}

.mobile-device .sikoAppointmentBtn {
    font-size: small;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-device.mobile-ux .sikoAppointmentBtn {
    width: 250px;
    margin-left: 13%;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 16px;
    border-color: #E3E3E3 !important;
}

.mobile-device.mobile-ux .sidebar-panel .header .close-btn .close-icon:before, .mobile-device.mobile-ux .sidebar-panel .header .close-btn .close-icon:after {
    background-color: #19243f !important;
}

.tw-btn-group--vertical {
    height: auto !important;
}

.print-view .print-options .photos-check .photo-options {
    display: none !important;
}

.custom-preset-image-view {
    position: relative;
    text-align: center;
    overflow: visible;
    margin: 5px;
}

    .custom-preset-image-view img {
        height: auto;
        width: 100%;
        min-height: 100px;
        border: 1px solid #C7C7C7;
        cursor: pointer;
        transition: all .3s linear;
    }

    .custom-preset-image-view [data-tips].bottom-tip:after {
        left: calc(50% - 60px) !important;
        transition: none !important;
        top: calc(100% - 60px) !important;
    }

    .custom-preset-image-view [data-tips].bottom-tip:before {
        left: calc(50% - 6px) !important;
        transition: none !important;
        top: calc(100% - 60px) !important;
    }

@media only screen and (max-width: 1007px) {
    #bookAppointmentText {
        display: none !important;
    }

    .sikoAppointmentBtn {
        min-width: 50px !important;
    }

    #login-text {
        display: none !important;
    }
}

.main-app-bar-view #user-container .user-summary-view.in-header #login-btn {
    display: none !important
}

.main-app-bar-view .app-header #user-container {
    display: inherit !important;
}

#customLogin > i:before {
    content: url("assets/images/Login_ico.svg") !important;
    width: 20px;
    display: inline-block;
    vertical-align: sub;
}

.sikoHelpContainer {
    height: 275px;
}

.sikoImg {
    height: 60px;
    text-align: left;
    padding:10px 30px 10px 30px;
}
.sikoImg img {
    width: 45px;
    height: 45px;
    display:inline-block;
    margin-right:30px;
}
.sikoImg p {
    text-align: left;
    display: inline-block;
    position: absolute;
    margin-left: 30px;
}

.mobile-device.mobile-ux .hamburger-menu-view .login-container .fa-user:before {
    content: url("assets/images/Login_ico.svg") !important;
    width: 30px;
    display: block !important;
    margin-left: 4px;
}

.hamburger-menu-view .account-container .placeholder, .hamburger-menu-view .login-container .placeholder {
    background: #FFFFFF !important;
    border: 1px solid #19243f !important;
    padding: 0px !important;
}

.context-help-view .help-contents img{
    display: none !important;
}

.fo-browser-view .no-options .right {
    font-family: var(--font-family) !important;
}

#styles-top {
    display: block !important;
}

#save-style-btn, #favorite-styles {
    display: none !important;
}

.fo-browser-view section.options .options-view .option-view .infos .display-name,
.fo-browser-view section.features-summary .options-view .option-view .infos .display-name,
.fo-browser-view section.options .options-view .numerical-option-view .infos .display-name,
.fo-browser-view section.features-summary .options-view .numerical-option-view .infos .display-name,
.fo-browser-view section.options .options-view .feature-summary-view .infos .display-name,
.fo-browser-view section.features-summary .options-view .feature-summary-view .infos .display-name,
.fo-browser-view section.options .options-view .option-view .infos .feature-name,
.fo-browser-view section.features-summary .options-view .option-view .infos .feature-name,
.fo-browser-view section.options .options-view .numerical-option-view .infos .feature-name,
.fo-browser-view section.features-summary .options-view .numerical-option-view .infos .feature-name,
.fo-browser-view section.options .options-view .feature-summary-view .infos .feature-name,
.fo-browser-view section.features-summary .options-view .feature-summary-view .infos .feature-name
.fo-browser-view section.options .features-summary-view .option-view .infos .display-name,
.fo-browser-view section.features-summary .features-summary-view .option-view .infos .display-name,
.fo-browser-view section.options .features-summary-view .numerical-option-view .infos .display-name,
.fo-browser-view section.features-summary .features-summary-view .numerical-option-view .infos .display-name,
.fo-browser-view section.options .features-summary-view .feature-summary-view .infos .display-name,
.fo-browser-view section.features-summary .features-summary-view .feature-summary-view .infos .display-name,
.fo-browser-view section.options .features-summary-view .option-view .infos .feature-name,
.fo-browser-view section.features-summary .features-summary-view .option-view .infos .feature-name,
.fo-browser-view section.options .features-summary-view .numerical-option-view .infos .feature-name,
.fo-browser-view section.features-summary .features-summary-view .numerical-option-view .infos .feature-name,
.fo-browser-view section.options .features-summary-view .feature-summary-view .infos .feature-name,
.fo-browser-view section.features-summary .features-summary-view .feature-summary-view .infos .feature-name {
    text-transform: none !important;
}

.task-bar-view .task:hover img, .task-bar-view .task.selected img {
    filter: invert(1);
}

.task-bar-view .task.tw-btn--selected:hover img {
    filter: invert(1) !important;
}

.task-bar-view .task.tw-btn--selected:hover {
    background: var(--primary-color-hover) !important;
}

[id^=widget-designsummary-] .design-summary-config-menu .config-menu, .x-2020-designsummary-widget .design-summary-config-menu .config-menu {
    color: var(--text-color) !important;
    background: white !important;
}

.main-app-bar-view .app-header .tw-btn:not(#hamburger-btn):not(.tw-btn--primary):not(.tw-btn--secondary) {
    --primary-color: #19243f;
}

#menu-container .menu-manager-view #footerView .ids-footer-view {
    background: var(--text-color) !important;
}