.logo {
    background-image: url("modernfold-logo-dormakaba.svg");
    position: absolute;
    left: 23px;
    top: 30px;
    width: 200px;
    height: 60px;
    background-color: white;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Override Bootstrap --bs-primary color variable globally */
:root {
    --bs-primary: #004b8d !important;
    --bs-primary-rgb: 0, 75, 141 !important;
}

.DesignPlanner {
    font-size: 18px;
    font-family: "Raleway";
    color: rgb(85, 84, 82);
    line-height: 2.222;
    text-align: left;
    position: relative;
    top: 35.502px;
    text-decoration: none !important;
}

.Contact_Us {
    font-size: 14px;
    font-family: "Raleway";
    color: rgb(85, 84, 82);
    line-height: 2.222;
    text-align: right;
    position: relative;
    top: 35.502px;
    margin-right: 175px;
    text-decoration: none !important;
}

.align-justify {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
}

.grid-container {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    /*max-width: 87.5rem;*/
    max-width: 100%;
    margin: 0 auto;
}

.grid-y {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
}

    .grid-y > .cell {
        width: auto;
        max-width: none;
    }

.grid-x > .cell {
    width: auto;
    max-width: none;
}

p {
    margin-bottom: 1rem;
    font-size: inherit;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

.company .inner p:first-child {
    margin-top: 0;
    font-size: 16px;
}

.company .inner.phone {
    margin-top: 5px;
    margin-left: 0;
    font-weight: 500;
    margin-bottom: 0px;
}

.flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0px;
}

/*Footer*/

.footer {
    clear: both;
    background-color: #f2f2f2;
    bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    width: auto;
}

    .footer .grid-x .cell {
        margin-top: 2px;
    }

    .footer .grid-y {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

.company {
    margin-bottom: 0px;
}

.footer .company .inner.name strong {
    font-weight: bold;
    font-size: 16px;
}

.footer .company .stretch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.footer .company .inner p {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 13px;
    margin-bottom: 0;
}

    .footer .company .inner p > span {
        margin-top: 0;
        margin-left: 5px;
        position: relative;
    }

    .footer .company .inner p span {
        display: block;
    }

.footer .company .inner:first-child {
    margin-top: 5px;
    margin-left: 0px;
    margin-bottom: 0px;
}

.social {
    margin-bottom: 0px;
}

.cellSocial {
    margin-bottom: 0px;
}

.footer .social li:first-child {
    margin-left: 0;
}

.footer .social li {
    margin-left: 2px;
}

.footer .social img {
    width: 25px;
    height: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    min-width: 0px;
    min-height: 0px;
}

img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    min-width: 95px;
    height: auto;
    -ms-interpolation-mode: bicubic;
}

.footer .brands {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .footer .brands .inner:first-child {
        margin-left: 0;
        margin-top: 0px;
    }

    .footer .brands .inner {
        width: 200px;
        margin-left: 20px;
        margin-top: 0;
    }

        .footer .brands .inner.skyfold {
            width: 145px;
        }

ul {
    margin-left: 0;
    list-style-type: none;
    margin-bottom: 0;
    list-style-position: outside;
    line-height: 1.6;
}

.cell {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: 100%;
    box-sizing: border-box;
}

body.finishviewer {
    font-size: 10pt;
    background-color: #FFFFFF;
    text-align: center;
}

.bold {
    font-weight: bold;
}

.boldSmall {
    font-weight: bold;
    /*font-size: 10px;*/
}

.wallinfo {
    clear: both;
    font-weight: bold;
    font-size: 7pt;
    color: White;
    text-decoration: none;
}

.main {
    background-color: #FFFFFF;
    text-align: left;
    border-color: Black;
    border-width: 1px;
    border-style: solid;
}

a {
    text-decoration: none;
    color: #000000;
}

    a img {
        border: medium none;
        margin: 0pt 10px 0pt 0pt;
    }

    a:hover {
        text-decoration: none;
        color: #004A8D;
    }

a {
    line-height: inherit;
    color: #004b8d;
    text-decoration: none;
    cursor: pointer;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

    a:visited {
        font-weight: bold;
        color: Black;
        border-color: Black;
    }

div.optionIndent {
    margin-left: 20px;
}

div.optionIndentGridViewer {
    margin-left: 40px;
}

.headerText {
    font-family: Raleway;
    color: black;
    font-weight: 900;
    font-size: 2rem;
    margin-left: 7px;
}

.subheaderText {
    font-family: Raleway;
    color: black;
    font-weight: 900;
    font-size: 14px;
}

.paragraphText {
    font-family: Raleway;
    font-size: 14px;
    color: black;
    margin-left: 150px;
    padding: 10px;
}

.button {
    font-family: Raleway;
    color: #fefefe;
    background-color: #004b8d;
    border: hidden;
    border-radius: 50px;
    border-color: white;
    box-shadow: none;
    height: 50px;
    width: 300px;
    font-size: 16px;
    cursor: pointer;
}

.lineSpace {
    clear: both;
    line-height: 3px;
    margin-bottom: 3px;
}

.smallbutton {
    font-family: Raleway;
    color: #fefefe;
    background-color: #004b8d;
    border-radius: 50px;
    height: 50px;
    width: 150px;
    font-size: 16px;
    border: solid;
    border-color: #fefefe;
}

.prevNextbutton {
    clear: both;
    font-family: Raleway;
    color: #fefefe;
    background-color: #004b8d;
    border-radius: 50px;
    border-width: 0px;
    height: 20px;
    width: 80px;
    font-size: 12px
}

.dimensionsbutton {
    clear: both;
    font-family: Raleway;
    color: #fefefe;
    background-color: #004b8d;
    border-radius: 50px;
    height: 35px;
    width: 95px;
    font-size: 12px;
    border: none;
    border-color: #fefefe;
}

.table {
    width: 100%;
    cellpadding: 10px;
    cellspacing: 0;
    border: 0pt none;
    font-family: Raleway;
    font-style: inherit;
    font-weight: inherit;
    margin: 0pt;
    margin-bottom: 10px;
    outline: 0pt none;
    padding: 0pt;
    text-rendering: optimizeLegibility;
}

.table2 {
    cellpadding: 0;
    cellspacing: 0;
    border: 0;
    font-size: 10px;
}

.tablepopup {
    width: 300px;
    cellpadding: 0;
    cellspacing: 0;
    border: 0;
}

.sidebarTable {
    width: 196px;
    /*cellpadding: 0;
    cellspacing: 4px;
    border: 0;
    text-align: left;
    background-color: #004b8d;*/
}

.homeTable {
    width: 100%;
    cellpadding: 10px;
    cellspacing: 10px;
    vertical-align: middle;
}

.LoadingUpdateProgress {
    background-color: #ffffff;
    color: #000000;
    width: 150px;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    bottom: 50%;
    left: 45%;
    font-weight: bold;
}

.partition {
    font-weight: bold;
    color: White;
}

.lblwallinfo {
    font-family: Raleway;
    font-size: 7pt;
    color: White;
}

.fonts {
    font-family: Raleway;
}

span.red {
    color: Red;
    font-weight: bold;
}

div#products {
    float: left;
    width: 132px;
}

div#series {
    float: left;
    width: 132px;
}

div#model {
    float: left;
    width: 132px;
}

div#inform {
    float: left;
    width: 132px;
}

div#details {
    float: left;
    width: 71px;
}

div#file {
    float: left;
    width: 35px;
}

td.ff {
    width: 20%;
}

div, span, object, h1, h2, h3, h4, p, pre, a, address, big, cite, code, del, dfn, em, ins, q, s, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, label, tr, th, td {
    border: 0pt none;
    font-family: Raleway;
    font-style: inherit;
    font-weight: inherit;
    margin: 0pt;
    margin-bottom: 10px;
    outline: 0pt none;
    padding: 0pt;
    text-rendering: optimizeLegibility;
}

body {
    font-family: Raleway;
    font-size: 12px;
    font-weight: normal;
    color: #494949;
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

#mdn_container {
    margin: 0pt auto;
    width: 870px;
}

#mdn_sidebar {
    background-color: #004b8d;
    height: auto;
    position: absolute;
    width: 200px;
    min-height: 460px;
    margin-bottom: 5em;
}

#mnd_menu_1 {
    color: #FFFFFF;
    list-style: none outside none;
    margin: 10px 0pt 0pt;
    position: absolute;
    text-transform: uppercase;
    background-color: #004b8d;
}

    #mnd_menu_1 a:hover, #mnd_menu_1 a:active {
        color: #ABCED0;
        text-decoration: none;
    }

li.mdn_current a {
    color: #ABCED0 !important;
}

#mnd_menu_1 a {
    color: #FFFFFF;
}

#mnd_menu_1 li {
    height: 17px;
    padding: 10px 0pt 10px 32px;
    width: 430px;
    font-size: 14px;
    cursor: default;
}

    #mnd_menu_1 li li {
        display: block;
        position: absolute;
        text-transform: none;
        height: auto;
        border: medium none;
        padding: 0pt;
        margin: 0pt;
        width: 862px;
    }

        #mnd_menu_1 li li a:hover {
            text-decoration: underline;
        }

        #mnd_menu_1 li li a:hover, #mnd_menu_1 li li a:active {
            color: #000000;
        }

        #mnd_menu_1 li li .mdn_12, #mnd_menu_1 li li a {
            clear: both;
            color: #000000;
            display: block;
            float: right;
            font-size: 14px;
            font-weight: 700;
            line-height: 14px;
            margin: 0pt 27px 9px 0pt;
            text-align: center;
            width: 116px;
        }

        #mnd_menu_1 li li li {
            width: 120px;
            padding: 0pt;
            margin: 0pt;
            position: relative;
            border: medium none;
            display: inline;
            line-height: 14px;
            float: left;
            list-style: none outside none;
        }

            #mnd_menu_1 li li li a:hover, #mnd_menu_1 li li li a:active {
                color: #004A8D !important;
                text-decoration: underline;
            }

            #mnd_menu_1 li li li a {
                color: #494949 !important;
                font-weight: 400;
                line-height: 14px;
                height: auto;
                margin: 0pt;
                text-align: left;
                font-size: 12px;
                vertical-align: top;
                display: block;
                padding: 0pt 0pt 9px 15px;
                width: 105px;
                cursor: pointer;
            }

    #mnd_menu_1 li ul {
        left: 0pt;
        list-style: none outside none;
        margin: 0pt;
        position: absolute;
        top: 56px;
        clip: rect(-20px, 1000px, 1000px, 162px);
    }

    #mnd_menu_1 li li ul {
        display: block;
        list-style: none outside none;
        padding: 0pt;
        clip: rect(auto, auto, auto, auto);
        margin: 0pt;
        top: 46px;
        float: right;
        position: relative;
        width: 140px;
        left: 154px;
    }

h1 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px
}

div#mdn_content p {
    padding: 10px 0pt;
}

#mdn_content .mdn_full_width {
    width: 900px;
}

#mdn_content {
    background: none repeat scroll 0pt 0pt #FFFFFF;
    border: 1px solid #D2D3D5;
    float: right;
    min-height: 398px;
    padding: 30px 30px 30px 36px;
    width: 601px;
    margin-bottom: 5em;
}

ul {
    margin-left: 16px;
}

td {
    vertical-align: top;
    padding: 0pt;
    margin: 0pt;
    border: medium none;
}

h2 {
    font-weight: bold;
}

#mdn_content h2 a:hover {
    text-decoration: underline;
}

#mdn_content h2 a {
    color: #004A8D;
}

#mdn_content h2 {
    color: #004A8D;
}

table, tr, td {
    border: medium none;
    margin: 0pt;
    padding: 0pt;
    vertical-align: top;
}

.active {
    background: none repeat scroll 0pt 0pt #111111;
    display: block;
    float: left;
    outline: medium none;
    padding: 6px;
}

.clear {
    clear: both;
}

a {
    text-decoration: none;
    color: #000000;
}

    a:hover {
        text-decoration: none;
        color: #004A8D;
    }

form {
    width: 100%;
    flex: 1 1 auto;
}

html {
    font-family: Raleway;
    font-size: 12px;
    font-weight: normal;
    color: #494949;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Bootstrap Grid Layout Enhancements */
@media (max-width: 767px) {
    .paragraphText {
        padding: 0.5rem;
    }
    .social img {
        width: 90px;
        height: 90px;
    }
    .social .gap-4 {
        gap: 2rem !important;
    }
}

@media (min-width: 768px) {
    .paragraphText {
        padding-right: 2rem;
    }
}

/* Compact footer styling */
.footer {
    padding: 0.5rem 0;
}

.footer .company {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.footer .company span {
    line-height: 1;
}

.footer .brands img {
    height: 32px;  /* Made logo smaller for better alignment */
    width: auto;
}

.social img {
    width: 75px;
    height: 75px;
    transition: opacity 0.2s ease;
}

.social img:hover {
    opacity: 0.8;
}

/* Make social icons responsive */
@media (max-width: 991px) {
    .social img {
        width: 60px;
        height: 60px;
    }
    .social .d-flex {
        gap: 2rem !important;
    }
}

@media (max-width: 767px) {
    .social img {
        width: 45px;
        height: 45px;
    }
    .social .d-flex {
        gap: 1.5rem !important;
    }
}

/* Override Bootstrap text-primary color */
.text-primary {
    color: #004b8d !important;
}

/* Test class for verification */
.text-modernfold-blue {
    color: #004b8d;
}

/* Maintain existing paragraph text style */
.paragraphText {
    font-family: 'Raleway', sans-serif;
    color: #494949;
    line-height: 1.6;
}

/* Responsive spacing improvements */
@media (max-width: 767px) {
    .btn {
        margin-bottom: 0.5rem !important;
    }
}

/* Legacy header compatibility */
header {
    background-color: white;
}

.Contact_Us {
    font-size: 14px;
    font-family: "Raleway";
    color: rgb(85, 84, 82);
    line-height: 2.222;
}

.Contact_Us a {
    color: rgb(85, 84, 82);
    text-decoration: none;
}

.Contact_Us a:hover {
    color: rgb(85, 84, 82);
    text-decoration: underline;
}

/* Grid layout line space adjustments */
.w-100 {
    margin-bottom: 8px;
}

.lineSpace {
    clear: both;
    line-height: 3px;
    margin-bottom: 3px;
}

/* Compact footer styling */
.footer {
    padding: 0.5rem 0;
}

.footer .company {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.footer .company span {
    line-height: 1;
}

.footer .brands img {
    height: 32px;  /* Made logo smaller for better alignment */
    width: auto;
}