html,
body {
    height: 100%;
}

body {
    --border-radius        : 4px;
    --font-family          : 'Rooster Regular', Verdana, sans-serif;
    --primary-color        : #28343D;
    --primary-color-hover  : #000000;
    --primary-color-active : #900;
    --primary-color-inverse: #FFFFFF;
    --default-color        : #FFFFFF;
    --default-color-inverse: #000000;
    --default-color-dark   : #E3E3E3;
    --danger-color         : #ca4545;
    --background-color-dark: #eff0f5;
    --hwd-blue-color       : #28343c;
    --hwd-red-color        : #ff1500;
    --hwd-grey-color       : #cccccc;
    --hwd-border-color     : #C20016;
    height                 : 100%;
}

body.mobile-device.mobile-ux {
    --btn-size: 30px;
}

@font-face {
    font-family: 'Rooster Regular';
    src        : local('Rooster-Regular.woff2'), url("assets/fonts/Rooster-Regular.woff2") format("woff2"),
        local('Rooster-Regular.woff'), url("assets/fonts/Rooster-Regular.woff") format("woff");
}

@font-face {
    font-family: 'Rooster Bold';
    src        : local('Rooster-Bold.woff2'), url("assets/fonts/Rooster-Bold.woff2") format("woff2"),
        local('Rooster-Bold.woff'), url("assets/fonts/Rooster-Bold.woff") format("woff");
}

@font-face {
    font-family: 'Rooster Light';
    src        : local('Rooster-Light.woff2'), url("assets/fonts/Rooster-Light.woff2") format("woff2"),
        local('Rooster-Light.woff'), url("assets/fonts/Rooster-Light.woff") format("woff");
}

.tw-btn {
    font-family   : 'Rooster Bold';
    text-transform: uppercase;
    border-radius : 50px !important;
}

#reset {
    border: 1px solid #C8C8C8 !important;
}



#reset::before {
    margin-right: 10px;
    content     : "\f01e";
    font        : normal normal normal 14px/1 FontAwesome;
}

.accordion-nav-menu-view .ui-accordion-header {
    font-size   : 15px !important;
    font-family : "Rooster Regular" !important;
    line-height : 25px !important;
    background  : var(--primary-color-inverse) !important;
    border-color: var(--primary-color) !important;
    color       : var(--primary-color) !important;
    padding-top : 0px !important;
}

.accordion-nav-menu-view .ui-state-active,
.accordion-nav-menu-view .ui-accordion-header:hover {
    background: var(--primary-color) !important;
    color     : var(--primary-color-inverse) !important;
}

.tw-btn__label {
    margin-left : 4px !important;
    margin-right: 0px !important;
}

.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;
}

#header-container {
    display: none !important;
}

#hamburger-btn {
    display: none;
}

.custom-view-container #guide-nav-next,
#guide-nav-next {
    display: none !important;
}

.top-progress-bar-view {
    display: none !important;
}

@media (min-width: 320px) and (max-width: 480px) {
    .rotate-device-view div.message {
        font-size: 25px !important;
    }
}

/*email pdf popup start*/
.row,
.notification-content>div {
    height: 100%;
}

.notification-content {
    margin: 0 !important;
}

.ui-dialog.ui-widget-content .ui-widget-header {
    background-color: var(--default-color) !important;
    height          : 30px !important;
    display         : none !important;
}

.notification-popup-view.ui-dialog-content.ui-widget-content {
    background-color: var(--hwd-blue-color) !important;
}

.ui-button-icon-primary.ui-icon.ui-icon-closethick {
    color     : var(--hwd-red-color) !important;
    margin-top: 0 !important;
}

.row {
    display: flex;
}

.col {
    flex: 1;
}

.col2 {
    color           : var(--hwd-blue-color);
    background-color: var(--default-color);
    border-top      : 1px solid var(--hwd-grey-color);
}

.mobile-device.mobile-ux .col2 {
    border-top: 1px solid var(--default-color);
}

.email-pdf-slide-div {
    margin: 0 10% 0 10%;
}

.email-pdf-popup-view .tw-btn.tw-btn--secondary {
    margin-top: 20px;
}

.expand-me {
    float       : right;
    margin-right: 5px;
}

.none {
    display: none;
}

.email-header {
    font-size     : 16px;
    width         : 95%;
    margin        : 40px 0 10px;
    padding-bottom: 10px;
}

.email-input {
    width  : 100%;
    height : 30px;
    display: block;
    margin : 10px 0;
}

.email-error,
.email-check-error {
    font-size: 12px;
    color    : var(--hwd-red-color);
    margin   : 5px 0;
}

.header-thank-you {
    font-size     : 21px;
    border-bottom : 2px solid var(--hwd-grey-color);
    width         : 95%;
    margin-top    : 40px;
    margin-bottom : 20px;
    padding-bottom: 15px;
    font-weight   : bold;
}

.email-checkbox {
    margin-left: 5px !important;
}

input[type=checkbox]::after {
    height       : 12px !important;
    width        : 12px !important;
    border-radius: 0 !important;
}

.email-onway {
    margin-bottom: 15px !important;
}

.terms-and-conditions {
    margin-left: 10px !important;
}

.terms-and-conditions a {
    color          : var(--hwd-grey-color) !important;
    text-decoration: underline;
    margin-right   : 10px;
}

.email-submit {
    background-color: var(--default-color-inverse);
    color           : var(--default-color);
    margin-top      : 20px;
    cursor          : pointer;
}

.activeBtn {
    background-color: var(--default-color-inverse);
}

.email-example,
.terms-and-conditions {
    color: var(--hwd-grey-color);
}

.email-checkbox:checked::after {
    background-color: var(--hwd-blue-color) !important;
    border-color    : var(--hwd-blue-color) !important;
}

.email-me,
.pdf-create,
.cancel-btn,
.email-find-localdepot,
.go-to-site,
#logo-img {
    cursor: pointer;
}

.main-app-bar-view .custom-view-container .custButton {
    margin-right: 15px;
    text-align  : center !important;
}

.custom-view-container .tw-btn__label span {
    margin-left: 10px !important;
    /*parent is already having 4px margin on left*/
}

/*email pdf popup end*/


/*Mobile email pdf popup start*/
.menu-manager-view .call-button i,
.menu-manager-view .project-links-view .activity i,
.menu-manager-view .tw-btn:not(.login) i {
    position: relative !important;
    left    : 0 !important;
}

.mobile-device #hamburger-btn {
    display: flex;
}

@media (max-width: 768px) and (orientation: portrait) {
    .mobile-device #hamburger-btn {
        display: none;
    }
}

.mobile-device.mobile-ux .menu-manager-view .custButton {
    width : 95% !important;
    margin: 5px auto !important;
}

.mobile-device.mobile-ux .preset-slider-view #owl-container .owl-stage-outer .owl-stage .owl-item .item .img-container #edit {
    background-color: var(--primary-color);
    color           : var(--primary-color-inverse);
    opacity         : 1;
    position        : fixed;
    top             : 30px;
}

.mobile-device.mobile-ux .preset-slider-view #owl-container .owl-stage-outer .owl-stage .owl-item .item .img-container #edit .edit-label {
    margin-left: 0px;
}

.mobile-device.mobile-ux .custButton {
    margin        : 0 5px -9px 0;
    pointer-events: auto;
    padding       : 0 5px 0 8px !important;
}

.custom-view-container .custButton.disabled {
    pointer-events: none;
}

.mobile-device.mobile-ux .menu-manager-view .menu-wrapper#quickLinksView,
.mobile-device.mobile-ux .menu-manager-view .headerView {
    display: none !important;
}

@media (min-width: 768px) {
    .preset-slider-view #owl-container .owl-stage-outer .owl-stage .owl-item .item .img-container #edit {
        margin-right: 450px !important;
        top         : 7px !important;
    }

    .mobile-device.mobile-ux .custButton {
        margin-bottom: 17px;
    }
}

.email-pdf-popup-view .cancel-btn {
    display: block !important;
}

.mobile-device.mobile-ux .email-pdf-popup-view .cancel-btn {
    display: block !important;
}

/*Mobile email pdf popup end*/

.guide-view #page-container {
    background-color: #FFFFFF !important;
}


.mobile-ux #app-bar-container {
    z-index: 110 !important;
}

@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    .fullscreen-view #close-fullscreen-btn {
        top  : 12px !important;
        right: 15px !important;
    }
}

.mobile-device .ids-footer-view {
    position      : absolute;
    pointer-events: auto;
}

.ui-dialog.ui-widget-content .ui-widget-header .ui-dialog-title {
    color: var(--primary-color) !important;
}

.mobile-device.mobile-ux .main-app-bar-view .app-header {
    padding: 0 !important;
}


.mobile-device.mobile-ux .main-app-bar-view .custButton {
    padding: 0 20px 0 20px !important;
}

.mobile-device.mobile-ux .main-app-bar-view .center {
    display: none;
}

/*End mobile css*/

/*common css start*/
.custom-view-container .tw-btn,
#edit,
#reset,
#close-fullscreen-btn {
    font-size     : 13px !important;
    font-family   : 'Rooster Bold' !important;
    height        : 48px !important;
    line-height   : 45px !important;
    width         : 280px;
    border        : none;
    text-align    : center !important;
    letter-spacing: 2.36px;
    text-transform: uppercase !important;
}

.fullscreen-view #close-fullscreen-btn {
    width: auto;
}

#preset-room-container .tips {
    color      : var(--primary-color);
    font-size  : 24px;
    line-height: 25px;
    font-family: "Rooster Light";
}

.preset-image-view.selected img {
    border-width: 1px !important;
    border-color: var(--hwd-border-color) !important;
}

.preset-image-view.selected::before {
    border-left: 10px solid var(--hwd-border-color) !important;
}

#bubbles .tw-btn--help {
    color     : var(--hwd-border-color);
    background: white;
}

#bubbles .tw-btn--help:hover {
    color     : white;
    background: var(--hwd-border-color);
}

#presets-styles-selector .fo-browser-view section.options .features-summary-view .option-view:hover:not(.numerical-option-view),
#presets-styles-selector .fo-browser-view section.features-summary .features-summary-view .option-view:hover:not(.numerical-option-view),
#presets-styles-selector .fo-browser-view section.options .features-summary-view .numerical-option-view:hover:not(.numerical-option-view),
#presets-styles-selector .fo-browser-view section.features-summary .features-summary-view .numerical-option-view:hover:not(.numerical-option-view),
#presets-styles-selector .fo-browser-view section.options .features-summary-view .feature-summary-view:hover:not(.numerical-option-view),
#presets-styles-selector .fo-browser-view section.features-summary .features-summary-view .feature-summary-view:hover:not(.numerical-option-view),
#presets-styles-selector #styles .fo-browser-view section.options .options-view .option-view.selected,
#presets-styles-selector #styles .fo-browser-view section.features-summary .options-view .option-view.selected,
#presets-styles-selector #styles .fo-browser-view section.options .options-view .numerical-option-view.selected,
#presets-styles-selector #styles .fo-browser-view section.features-summary .options-view .numerical-option-view.selected,
#presets-styles-selector #styles .fo-browser-view section.options .options-view .feature-summary-view.selected,
#presets-styles-selector #styles .fo-browser-view section.features-summary .options-view .feature-summary-view.selected,
#presets-styles-selector .fo-browser-view section.options .options-view .option-view:hover:not(.numerical-option-view),
#presets-styles-selector .fo-browser-view section.features-summary .options-view .option-view:hover:not(.numerical-option-view),
#presets-styles-selector .fo-browser-view section.options .options-view .numerical-option-view:hover:not(.numerical-option-view),
#presets-styles-selector .fo-browser-view section.features-summary .options-view .numerical-option-view:hover:not(.numerical-option-view),
#presets-styles-selector .fo-browser-view section.options .options-view .feature-summary-view:hover:not(.numerical-option-view),
#presets-styles-selector .fo-browser-view section.features-summary .options-view .feature-summary-view:hover:not(.numerical-option-view) {
    border: 1px solid var(--hwd-border-color) !important;
}

.preset-slider-view #owl-container .owl-stage-outer .owl-stage .active .item .img-container img,
.mobile-ux .fo-browser-view .options .option-view.selected .img-bg,
.mobile-ux .fo-browser-view .feature-summary-view.selected .img-bg {
    border-color: var(--hwd-border-color) !important;
}

.fo-browser-view section.options .options-view .option-view,
.fo-browser-view section.features-summary .options-view .option-view,
.fo-browser-view section.options .options-view .numerical-option-view,
.fo-browser-view section.features-summary .options-view .numerical-option-view,
.fo-browser-view section.options .options-view .feature-summary-view,
.fo-browser-view section.features-summary .options-view .feature-summary-view,
.fo-browser-view section.features-summary .features-summary-view .feature-summary-view {
    border-width: 1px !important;
}

.presets-style-view.vertical .fo-browser-view .options .option-view .img-bg {
    background-size: contain !important;
}

.info-bubble-collection-view button.tw-btn.tw-btn--circle.tw-btn--shadow.tw-btn--secondary.tw-btn--selected {
    background-color: var(--hwd-border-color);
}

.preset-images-view .preset-image-view.tw-card.selected {
    border-color: var(--hwd-border-color);
}

.presets-style-view .ui-accordion-header-active.ui-state-active {
    background-color: var(--hwd-blue-color) !important;
}

.presets-style-view .ui-accordion-header-active.ui-state-active:hover {
    background-color: var(--primary-color-hover) !important;
}