/* =========================================================
   DOODLE TECHNOLOGIES
   FRAPPE LOGIN PAGE
   Products: DooERP / DooHR
   ========================================================= */


:root {

    --doodle-red: #f24150;

    --doo-blue: #2581f5;
    --doo-blue-dark: #1768db;

    --navy: #171b47;

    --text: #555c78;
    --muted: #8990a7;

    --lavender: #eee9ff;
    --lavender-2: #f8f5ff;

    --pink: #fff0f5;

    --mint: #eafaf5;

    --peach: #fff3e9;

    --sky: #edf6ff;

    --white: #ffffff;

    --border: #e5e8f2;

    --shadow:
        0 30px 80px rgba(61, 49, 107, 0.10),
        0 8px 30px rgba(61, 49, 107, 0.06);

    --radius-lg: 28px;
    --radius-md: 16px;
    --radius-sm: 12px;
}


/* =========================================================
   PAGE RESET
   ========================================================= */

body.doodle-login-page {

    margin: 0 !important;

    min-height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;

    background:

        radial-gradient(
            circle at 88% 10%,
            rgba(219, 202, 255, 0.58),
            transparent 30%
        ),

        radial-gradient(
            circle at 97% 85%,
            rgba(255, 217, 230, 0.55),
            transparent 28%
        ),

        radial-gradient(
            circle at 5% 80%,
            rgba(217, 241, 255, 0.55),
            transparent 28%
        ),

        #fbfcff;

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}


/* =========================================================
   DEFAULT FRAPPE ELEMENTS
   ========================================================= */

body.doodle-login-page .web-footer,
body.doodle-login-page .page-card-head {

    display: none !important;
}


/* =========================================================
   NAVBAR
   ========================================================= */

body.doodle-login-page .navbar {

    display: flex !important;

    min-height: 52px !important;
    height: 52px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* =========================================================
   PREVENT RAW FRAPPE CARD FLASH
   ========================================================= */

body:not(.doodle-login-initialized) .page-card {

    opacity: 0;

    pointer-events: none;
}


body.doodle-login-initialized .page-card {

    opacity: 1;

    transition:
        opacity 0.25s ease;
}


/* =========================================================
   MAIN SHELL
   ========================================================= */

.doodle-login-shell {

    width: 100%;

    min-height:
        calc(100vh - 52px);

    height:
        calc(100vh - 52px);

    display: grid;

    grid-template-columns:
        minmax(500px, 1.12fr)
        minmax(390px, 0.88fr);

    position: relative;
}


/* =========================================================
   LEFT HERO
   ========================================================= */

.doodle-login-hero {

    min-height:
        calc(100vh - 52px);

    padding:
        28px 5.5% 24px;

    display: flex;

    flex-direction: column;

    position: relative;

    overflow: hidden;
}


/* =========================================================
   DECORATIVE SHAPES
   ========================================================= */

.doodle-login-hero::before {

    content: "";

    width: 420px;
    height: 420px;

    border-radius: 50%;

    position: absolute;

    top: -230px;
    right: -130px;

    background:

        linear-gradient(
            145deg,
            rgba(238, 233, 255, 0.65),
            rgba(223, 244, 255, 0.40)
        );

    pointer-events: none;
}


.doodle-login-hero::after {

    content: "";

    width: 300px;
    height: 300px;

    position: absolute;

    bottom: -170px;
    right: 4%;

    border-radius: 50%;

    background:

        linear-gradient(
            150deg,
            rgba(237, 246, 255, 0.7),
            rgba(255, 231, 242, 0.58)
        );

    pointer-events: none;
}


/* =========================================================
   COMPANY LOGO
   ========================================================= */

.doodle-company-logo {

    position: relative;

    z-index: 2;

    margin-bottom: 17px;
}


.doodle-company-logo img {

    display: block;

    width: 130px;

    height: auto;

    max-height: 44px;

    object-fit: contain;
}


/* =========================================================
   BADGE
   ========================================================= */

.doodle-badge {

    width: fit-content;

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 13px;

    padding:
        6px 11px;

    border-radius: 999px;

    background:
        rgba(237, 232, 255, 0.80);

    color: #6756d9;

    font-size: 11px;

    font-weight: 600;

    position: relative;

    z-index: 2;
}


.doodle-badge-icon {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #7b68ee;

    box-shadow:
        6px -4px 0 #b7f0dc,
        6px 4px 0 #f6bfde;
}


/* =========================================================
   HERO TYPOGRAPHY
   ========================================================= */

.doodle-login-title {

    max-width: 620px;

    margin:
        0 0 10px;

    font-size:
        clamp(34px, 3.25vw, 48px);

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -1.5px;

    color: var(--navy);

    position: relative;

    z-index: 2;
}


.doodle-login-description {

    max-width: 540px;

    margin:
        0 0 18px;

    color: var(--text);

    font-size: 13px;

    line-height: 1.5;

    position: relative;

    z-index: 2;
}


/* =========================================================
   PRODUCT CARDS
   ========================================================= */

.doodle-products {

    max-width: 560px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 18px;

    position: relative;

    z-index: 2;
}


.doodle-product {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 62px;

    padding:
        10px 14px;

    cursor: pointer;

    border:
        1.5px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.72);

    transition:

        transform 0.2s ease,

        box-shadow 0.2s ease,

        border-color 0.2s ease,

        background 0.2s ease;
}


.doodle-product:hover {

    transform:
        translateY(-2px);

    border-color:
        #bad3ff;

    box-shadow:
        0 10px 28px
        rgba(68, 95, 155, 0.08);
}


.doodle-product.active {

    border-color:
        var(--doo-blue);

    background:

        linear-gradient(
            145deg,
            rgba(237, 246, 255, 0.96),
            rgba(247, 245, 255, 0.96)
        );

    box-shadow:
        0 10px 30px
        rgba(37, 129, 245, 0.09);
}


/* =========================================================
   ACTIVE PRODUCT CHECK
   ========================================================= */

.doodle-product.active::after {

    content: "✓";

    width: 18px;
    height: 18px;

    position: absolute;

    top: 7px;
    right: 7px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--doo-blue);

    color:
        white;

    font-size: 10px;

    font-weight: 700;
}


.doodle-product img {

    max-width: 115px;

    max-height: 28px;

    object-fit: contain;
}


/* =========================================================
   FEATURES
   ========================================================= */

.doodle-features {

    display: flex;

    flex-direction: column;

    gap: 9px;

    max-width: 540px;

    position: relative;

    z-index: 2;

    /*
     * Smooth transition when ERP/HR features change.
     */
    transition:
        opacity 0.18s ease;
}


.doodle-feature {

    display: grid;

    grid-template-columns:
        34px 1fr;

    gap: 10px;

    align-items: center;
}


.doodle-feature-icon {

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 700;

    flex-shrink: 0;
}


/*
 * Feature icon colours
 */

.doodle-feature:nth-child(1)
.doodle-feature-icon {

    background:
        var(--lavender);

    color:
        #745ae7;
}


.doodle-feature:nth-child(2)
.doodle-feature-icon {

    background:
        var(--pink);

    color:
        #ed699d;
}


.doodle-feature:nth-child(3)
.doodle-feature-icon {

    background:
        var(--mint);

    color:
        #27a97d;
}


.doodle-feature:nth-child(4)
.doodle-feature-icon {

    background:
        var(--peach);

    color:
        #eb9850;
}


.doodle-feature:nth-child(5)
.doodle-feature-icon {

    background:
        var(--sky);

    color:
        #498ce8;
}


.doodle-feature-title {

    margin:
        0 0 1px;

    color:
        #272c52;

    font-size:
        12px;

    font-weight:
        700;
}


.doodle-feature-text {

    margin: 0;

    color:
        #737990;

    font-size:
        10px;

    line-height:
        1.35;
}


/* =========================================================
   DASHBOARD ART
   ========================================================= */

.doodle-dashboard-art {

    position: absolute;

    width: 300px;
    height: 300px;

    right: 0;
    top: 42%;

    opacity: 0.30;

    z-index: 1;

    pointer-events: none;
}


.doodle-art-card {

    position: absolute;

    padding:
        9px 11px;

    border:
        1px solid rgba(230, 232, 241, 0.9);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        0 15px 45px
        rgba(79, 81, 133, 0.07);

    backdrop-filter:
        blur(12px);
}


.doodle-art-orders {

    width: 145px;

    left: 0;
    top: 45px;

    transform:
        rotate(8deg);
}


.doodle-art-chart {

    width: 165px;
    height: 82px;

    right: 5px;
    top: 0;

    transform:
        rotate(6deg);
}


.doodle-art-employees {

    width: 145px;

    right: 15px;
    bottom: 40px;

    transform:
        rotate(7deg);
}


.art-label {

    display: block;

    margin-bottom: 7px;

    color:
        #969caf;

    font-size:
        10px;
}


.art-value {

    color:
        #626a90;

    font-size:
        17px;

    font-weight:
        700;
}


.art-positive {

    margin-left:
        8px;

    color:
        #55cba2;

    font-size:
        10px;
}


/* =========================================================
   SIMPLE CHART
   ========================================================= */

.doodle-chart-line {

    height:
        50px;

    margin-top:
        8px;

    position:
        relative;

    overflow:
        hidden;
}


.doodle-chart-line::before {

    content: "";

    width:
        110%;

    height:
        45px;

    position:
        absolute;

    left:
        -5%;

    bottom:
        -18px;

    border-radius:
        50%;

    border-top:
        2px solid #9186ff;

    transform:
        rotate(-8deg);
}


/* =========================================================
   FOOTER
   ========================================================= */

.doodle-login-footer {

    margin-top:
        auto;

    padding-top:
        15px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    color:
        #848aa0;

    font-size:
        9px;

    position:
        relative;

    z-index:
        2;
}


.doodle-login-footer a {

    color:
        #7163d9;

    text-decoration:
        none;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.doodle-login-right {

    min-height:
        calc(100vh - 52px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        22px 5%;

    position:
        relative;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(226, 212, 255, 0.78),
            transparent 45%
        ),

        radial-gradient(
            circle at 85% 100%,
            rgba(255, 223, 236, 0.75),
            transparent 48%
        ),

        linear-gradient(
            145deg,
            rgba(245, 241, 255, 0.46),
            rgba(237, 247, 255, 0.45)
        );
}


/* =========================================================
   LOGIN CARD
   ========================================================= */

.doodle-login-right .page-card {

    width:
        min(100%, 420px) !important;

    margin:
        0 !important;

    padding:
        36px 36px 28px !important;

    border:
        1px solid rgba(255, 255, 255, 0.7) !important;

    border-radius:
        24px !important;

    background:
        rgba(255, 255, 255, 0.92) !important;

    box-shadow:
        var(--shadow) !important;

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    position:
        relative;

    z-index:
        3;
}


/* =========================================================
   LOGIN INTRO
   ========================================================= */

.doodle-card-intro {

    margin-bottom:
        22px;

    text-align:
        center;
}


.doodle-card-avatar {

    width:
        68px;

    height:
        68px;

    margin:
        0 auto 16px;

    border-radius:
        50%;

    background:
        rgba(37, 129, 245, 0.08);

    border:
        1.5px solid
        rgba(37, 129, 245, 0.18);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.doodle-card-avatar svg {

    width:
        32px;

    height:
        32px;

    color:
        var(--doo-blue);
}


.doodle-card-intro h2 {

    margin:
        0 0 6px;

    color:
        var(--navy);

    font-size:
        28px;

    line-height:
        1.2;

    font-weight:
        800;

    letter-spacing:
        -0.5px;
}


.doodle-card-intro p {

    margin:
        0;

    color:
        #80869d;

    font-size:
        13.5px;

    line-height:
        1.4;
}


/* =========================================================
   LOGIN TABS
   =========================================================

   Intentionally hidden.

   We are NOT creating the tabs in JS anymore.
   These rules are kept as protection in case another
   Frappe/custom script creates them.
   ========================================================= */

.doodle-login-tabs,
.doodle-login-tab {

    display:
        none !important;
}


/* =========================================================
   FRAPPE FORM
   ========================================================= */

body.doodle-login-page .page-card-body {

    margin-top:
        0 !important;
}


body.doodle-login-page .form-group {

    margin-bottom:
        14px !important;
}


body.doodle-login-page label {

    color:
        #242848 !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    margin-bottom:
        6px !important;

    display:
        block !important;
}


/* =========================================================
   FORM INPUTS
   ========================================================= */

body.doodle-login-page .form-control {

    width:
        100% !important;

    height:
        48px !important;

    /*
     * NO ICON SPACE
     */
    padding:
        0 14px !important;

    border:
        1.5px solid #e1e4ed !important;

    border-radius:
        12px !important;

    background:
        rgba(255, 255, 255, 0.90) !important;

    color:
        #34384f !important;

    font-size:
        14px !important;

    box-shadow:
        none !important;

    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease,

        background 0.2s ease;
}


body.doodle-login-page .form-control:hover {

    border-color:
        #cdd5e8 !important;
}


body.doodle-login-page .form-control:focus {

    border-color:
        #87b4ff !important;

    background:
        white !important;

    box-shadow:
        0 0 0 4px
        rgba(37, 129, 245, 0.09) !important;

    outline:
        none !important;
}


body.doodle-login-page .form-control::placeholder {

    color:
        #b0b5c8 !important;
}


/* =========================================================
   INPUT WRAPPERS
   ========================================================= */

.doodle-input-wrap {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    width:
        100%;
}


/* =========================================================
   REMOVE EMAIL / PASSWORD ICONS
   ========================================================= */

body.doodle-login-page .doodle-input-icon {

    display:
        none !important;
}


/* =========================================================
   PASSWORD INPUT
   ========================================================= */

.doodle-input-wrap.doodle-input-wrap--has-suffix
.form-control {

    border-radius:
        12px !important;
}


body.doodle-login-page .input-group {

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    width:
        100% !important;
}


/* =========================================================
   REMOVE FRAPPE PASSWORD EYE / ICON
   ========================================================= */

body.doodle-login-page .toggle-password,
body.doodle-login-page .input-group-append,
body.doodle-login-page .input-group-text {

    display:
        none !important;
}


/* =========================================================
   ENSURE NO ICON PADDING
   ========================================================= */

body.doodle-login-page .doodle-input-wrap .form-control,
body.doodle-login-page .input-group .form-control {

    padding-left:
        14px !important;

    padding-right:
        14px !important;
}


/* =========================================================
   SHOW PASSWORD ROW
   ========================================================= */

.doodle-password-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        -6px;

    margin-bottom:
        6px;
}


.doodle-show-password {

    display:
        flex !important;

    align-items:
        center;

    gap:
        7px;

    cursor:
        pointer;

    color:
        #555c78;

    font-size:
        13px !important;

    font-weight:
        400 !important;

    margin-bottom:
        0 !important;

    user-select:
        none;
}


.doodle-show-pw-check {

    width:
        15px !important;

    height:
        15px !important;

    min-width:
        15px !important;

    padding:
        0 !important;

    border:
        1.5px solid #cdd0dc !important;

    border-radius:
        4px !important;

    cursor:
        pointer;

    accent-color:
        var(--doo-blue);
}


/* =========================================================
   PRIMARY LOGIN BUTTON
   ========================================================= */

body.doodle-login-page .btn-login,
body.doodle-login-page button[type="submit"].btn-primary {

    width:
        100% !important;

    min-height:
        50px !important;

    margin-top:
        8px !important;

    border:
        none !important;

    border-radius:
        12px !important;

    background:

        linear-gradient(
            110deg,
            #4775f5 0%,
            #3188f5 100%
        ) !important;

    color:
        #ffffff !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    letter-spacing:
        0.2px;

    box-shadow:
        0 10px 25px
        rgba(49, 120, 242, 0.22) !important;

    transition:

        transform 0.18s ease,

        box-shadow 0.18s ease !important;
}


body.doodle-login-page .btn-login:hover,
body.doodle-login-page button[type="submit"].btn-primary:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 14px 32px
        rgba(49, 120, 242, 0.30) !important;
}


/* =========================================================
   SECONDARY BUTTONS
   ========================================================= */

body.doodle-login-page .btn-login-with-email-link,
body.doodle-login-page .btn-forgot {

    min-height:
        46px;

    border-radius:
        12px !important;

    border:
        1.5px solid #d8d8f4 !important;

    background:
        rgba(255, 255, 255, 0.80) !important;

    color:
        #4a56d9 !important;

    font-weight:
        600 !important;

    font-size:
        13px !important;
}


body.doodle-login-page a {

    color:
        #4a56d9 !important;
}


/* =========================================================
   FORGOT PASSWORD
   ========================================================= */

body.doodle-login-page a[href*="forgot"],
body.doodle-login-page .forgot-password-link,
body.doodle-login-page a.forgot {

    font-size:
        13px !important;

    font-weight:
        600 !important;

    color:
        #4a56d9 !important;

    text-decoration:
        none !important;
}


/* =========================================================
   SOCIAL / OAUTH LOGIN
   =========================================================

   IMPORTANT:
   These are NOT replaced.

   If Frappe provides:
     - Microsoft
     - Microsoft 365
     - Google
     - OAuth
     - SSO
     - other providers

   they remain inside the original Frappe login card.
   ========================================================= */

body.doodle-login-page .social-logins {

    margin-top:
        12px !important;
}


body.doodle-login-page .page-card-actions {

    margin-top:
        12px !important;
}


body.doodle-login-page .social-logins .btn,
body.doodle-login-page .social-logins a.btn {

    min-height:
        46px !important;

    border-radius:
        12px !important;

    border:
        1.5px solid #e1e4ed !important;

    background:
        rgba(255, 255, 255, 0.90) !important;

    color:
        #34384f !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        8px !important;

    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease !important;

    margin-bottom:
        8px !important;
}


body.doodle-login-page .social-logins .btn:hover,
body.doodle-login-page .social-logins a.btn:hover {

    border-color:
        #bad3ff !important;

    box-shadow:
        0 6px 20px
        rgba(68, 95, 155, 0.08) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1050px) {

    .doodle-login-shell {

        grid-template-columns:
            1fr 430px;
    }


    .doodle-dashboard-art {

        display:
            none;
    }


    .doodle-login-title {

        font-size:
            44px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 850px) {

    .doodle-login-shell {

        display:
            block;

        height:
            auto;

        min-height:
            calc(100vh - 52px);
    }


    .doodle-login-hero {

        min-height:
            auto;

        padding:
            28px 24px 36px;
    }


    .doodle-features,
    .doodle-dashboard-art {

        display:
            none;
    }


    .doodle-login-title {

        font-size:
            36px;
    }


    .doodle-login-description {

        font-size:
            13px;
    }


    .doodle-login-footer {

        display:
            none;
    }


    .doodle-login-right {

        min-height:
            auto;

        padding:
            30px 20px 60px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .doodle-login-hero {

        padding:
            22px 18px;
    }


    .doodle-company-logo img {

        width:
            120px;
    }


    .doodle-login-title {

        font-size:
            30px;

        letter-spacing:
            -1px;
    }


    .doodle-products {

        grid-template-columns:
            1fr 1fr;

        gap:
            9px;
    }


    .doodle-product {

        min-height:
            60px;

        padding:
            10px;
    }


    .doodle-product img {

        max-width:
            100px;
    }


    .doodle-login-right {

        padding:
            16px 14px 40px;
    }


    .doodle-login-right .page-card {

        padding:
            28px 20px 24px !important;

        border-radius:
            20px !important;
    }


    .doodle-card-intro h2 {

        font-size:
            24px;
    }


    .doodle-card-avatar {

        width:
            58px;

        height:
            58px;
    }


    .doodle-card-avatar svg {

        width:
            26px;

        height:
            26px;
    }

}


/* =========================================================
   SHORT DESKTOP SCREENS
   ========================================================= */

@media (max-height: 800px) and (min-width: 851px) {

    body.doodle-login-page .doodle-login-hero {

        padding-top:
            18px;

        padding-bottom:
            14px;
    }


    body.doodle-login-page .doodle-company-logo {

        margin-bottom:
            10px;
    }


    body.doodle-login-page .doodle-company-logo img {

        width:
            110px;
    }


    body.doodle-login-page .doodle-login-title {

        font-size:
            34px;

        margin-bottom:
            8px;
    }


    body.doodle-login-page .doodle-login-description {

        margin-bottom:
            12px;

        font-size:
            12px;
    }


    body.doodle-login-page .doodle-products {

        margin-bottom:
            12px;
    }


    body.doodle-login-page .doodle-features {

        gap:
            6px;
    }


    body.doodle-login-page .doodle-feature-icon {

        width:
            26px;

        height:
            26px;

        font-size:
            11px;
    }


    body.doodle-login-page .doodle-feature {

        grid-template-columns:
            28px 1fr;

        gap:
            8px;
    }


    body.doodle-login-page .doodle-feature-title {

        font-size:
            11px;
    }


    body.doodle-login-page .doodle-feature-text {

        font-size:
            9px;
    }


    body.doodle-login-page .doodle-login-footer {

        padding-top:
            8px;
    }


    body.doodle-login-page .doodle-card-avatar {

        width:
            56px;

        height:
            56px;

        margin-bottom:
            11px;
    }


    body.doodle-login-page .doodle-card-intro h2 {

        font-size:
            24px;
    }


    body.doodle-login-page .doodle-card-intro {

        margin-bottom:
            14px;
    }


    body.doodle-login-page .doodle-login-right .page-card {

        padding:
            24px 30px 20px !important;
    }


    body.doodle-login-page .form-control {

        height:
            42px !important;
    }


    body.doodle-login-page .btn-login,
    body.doodle-login-page button[type="submit"].btn-primary {

        min-height:
            44px !important;

        font-size:
            13px !important;
    }

}


/* =========================================================
   PORTAL HOME PAGE
   ========================================================= */

body.doodle-portal-home {

    background:

        radial-gradient(
            circle at 88% 10%,
            rgba(219, 202, 255, 0.58),
            transparent 30%
        ),

        radial-gradient(
            circle at 97% 85%,
            rgba(255, 217, 230, 0.55),
            transparent 28%
        ),

        radial-gradient(
            circle at 5% 80%,
            rgba(217, 241, 255, 0.55),
            transparent 28%
        ),

        #fbfcff !important;
}


/* =========================================================
   HIDE PORTAL SIDEBAR
   ========================================================= */

body.doodle-portal-home .portal-sidebar,
body.doodle-portal-home .sidebar-section,
body.doodle-portal-home .web-sidebar,
body.doodle-portal-home [class*="sidebar"] {

    display:
        none !important;
}


/* =========================================================
   FULL WIDTH PORTAL
   ========================================================= */

body.doodle-portal-home .col-md-9,
body.doodle-portal-home .col-sm-9 {

    width:
        100% !important;

    flex:
        0 0 100% !important;

    max-width:
        100% !important;
}


/* =========================================================
   WIDE SCREEN
   ========================================================= */

@media (min-width: 1200px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {

        max-width:
            1650px !important;

        width:
            100% !important;
    }


    .page-body .page-wrapper {

        max-width:
            100% !important;
    }


    .layout-main {

        width:
            100% !important;

        margin:
            0 !important;
    }


    .layout-main-section-wrapper {

        width:
            calc(100% - 260px) !important;

        max-width:
            calc(100% - 260px) !important;

        flex:
            0 0 calc(100% - 260px) !important;
    }


    .layout-side-section {

        flex:
            0 0 260px !important;

        max-width:
            260px !important;
    }


    .layout-main-section {

        width:
            100% !important;

        max-width:
            100% !important;
    }

}