:root {
	--body-bg: #fafafa;
	--modal-header-bg: #fafafa;
	--modal-footer-bg: #fafafa;
	--modal-content-bg: #fafafa;
	--input-bg: #fafafa;
	--scroll-bg: #fafafa;
	--navbar-bg: #0066cc;
	--navbar-link-active-bg: #0059b3 !important;
	--navbar-inverse-bg: white;
	--navbar-logo-bg: #0066cc;
	--navbar-inverse-toggle-hover-bg: #0059b3;
	--text-color: #1d1b19;
	--text-white-color: #1d1b19;
	--input-color: #1d1b19;
	--dropdown-link-color: #1d1b19;
	--select-item-text-color: #1d1b19;
	--navbar-link-color: white;
	--navbar-inverse-link-color: black;
	--brand-primary: #004890;
	--btn-primary-bg: #004890;
	--btn-primary-border: #004890;
	--link-color: #004890;
	--select-item-active-bg: #004890;
	--state-primary-text: #004890;
	--panel-primary-border: #004890;
	--link-hover-color: #000000;
	--panel-primary-bg: #00152a;
	--btn-primary-hover-bg: #00152a;
	--btn-primary-hover-border: #002e5d;
	--btn-primary-active-bg: #002244;
	--btn-primary-active-border: #00152a;
	--brand-primary-5: #002449;
	--brand-primary-10: #001d39;
	--brand-primary-lighten-10: #0061c3;
	--brand-primary-lighten-30: #2a94ff;
	--brand-primary-lighten-50: #90c7ff;
	--brand-success: #4bb350;
	--btn-success-bg: #4bb350;
	--btn-success-border: #4bb350;
	--panel-success-border: #4bb350;
	--panel-success-bg: #92d296;
	--btn-success-hover-bg: #3c8f40;
	--btn-success-hover-border: #3c8f40;
	--panel-success-text: #2d6b30;
	--btn-success-active-bg: #2d6b30;
	--btn-success-active-border: #2d6b30;
	--brand-success-10: #3f9643;
	--state-success-bg: #76c57a;
	--state-success-text: #255928;
	--state-success-text-10: #163518;
	--state-success-text-10l: #3f9643;
	--state-success-bg-5: #43a148;
	--state-success-bg-10: #3c8f40;
	--brand-warning: #f39c2f;
	--btn-warning-bg: #f39c2f;
	--btn-warning-border: #f39c2f;
	--panel-warning-border: #f39c2f;
	--panel-warning-bg: #f9ca8f;
	--btn-warning-hover-bg: #e2830d;
	--btn-warning-hover-border: #e2830d;
	--panel-warning-text: #b2670a;
	--btn-warning-active-bg: #b2670a;
	--btn-warning-active-border: #b2670a;
	--brand-warning-10: #ec890e;
	--state-warning-bg: #f6b869;
	--state-warning-text: #9a5909;
	--state-warning-text-10: #693d06;
	--state-warning-text-10l: #ec890e;
	--state-warning-bg-5: #f29117;
	--state-warning-bg-10: #e2830d;
	--brand-danger: #d2184b;
	--btn-danger-bg: #d2184b;
	--btn-danger-border: #d2184b;
	--panel-danger-border: #d2184b;
	--panel-danger-bg: #ed6389;
	--btn-danger-hover-bg: #a4133b;
	--btn-danger-hover-border: #a4133b;
	--panel-danger-text: #760e2a;
	--btn-danger-active-bg: #760e2a;
	--btn-danger-active-border: #760e2a;
	--brand-danger-10: #ad143e;
	--state-danger-bg: #e93e6d;
	--state-danger-text: #600b22;
	--state-danger-text-10: #320612;
	--state-danger-text-10l: #ad143e;
	--state-danger-bg-5: #bb1543;
	--state-danger-bg-10: #a4133b;
	--brand-info: #ff6000;
	--btn-info-bg: #ff6000;
	--btn-info-border: #ff6000;
	--panel-info-border: #ff6000;
	--panel-info-bg: #ffa066;
	--btn-info-hover-bg: #cc4d00;
	--btn-info-hover-border: #cc4d00;
	--panel-info-text: #993a00;
	--btn-info-active-bg: #993a00;
	--btn-info-active-border: #993a00;
	--brand-info-10: #d65100;
	--state-info-bg: #ff863d;
	--state-info-text: #803000;
	--state-info-text-10: #4d1d00;
	--state-info-text-10l: #d65100;
	--state-info-bg-5: #e65600;
	--state-info-bg-10: #cc4d00;
	--border-radius: 8px;
	--border-radius-small: 8px;
	--dropdown-border-radius: 8px;
	--panel-border-radius: 8px;
}
:root {
	/* write -- to see the available css variables*/
	.container.content.login-wrapper > .container-centering div#login .panel-heading {
        padding: 8px;
        text-align: center;
        background: rgba(0, 102, 204, 0);
    }
    .container.content.login-wrapper > .container-centering div#login .panel-body {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .container.content.login-wrapper > .container-centering div#login {
        background: rgba(0, 102, 204, 0.9);
        width: 55%;
        max-width: 55%;
        padding: 200px 33px 33px 33px;
        height: 100%;
        margin-bottom: 0px;
    }
    .credit {
        display:none;
    }
    body .panel-primary>.panel-heading {
        color: rgba(255, 255, 255);
        background-color: rgba(0, 0, 151);
        border-color: transparent;
    }
    
    
}
/* 1. Default state: Hide scrollbar but allow the block to maintain its size */
.navbar-collapse .navbar-left-container ul.nav.tabs {
    height: calc(100vh - 60px) !important; 
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    /* Smooth transition for browsers that support scrollbar gutter transitions */
    transition: all 0.2s ease;
}

/* 2. Hover state: Show the scrollbar when mouse moves over the navigation container */
.navbar-collapse .navbar-left-container:hover ul.nav.tabs {
    overflow-y: auto !important;
}

/* 3. Optional styling: Keep the scrollbar thin so it doesn't shift menu items drastically */
.navbar-collapse .navbar-left-container ul.nav.tabs::-webkit-scrollbar {
    width: 5px;
}

.navbar-collapse .navbar-left-container ul.nav.tabs::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.navbar-collapse .navbar-left-container ul.nav.tabs::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.35);
}


.tab-divider {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #ddd; /* The horizontal line */
    margin-bottom: 15px;           /* Space below the line */
}

/* Target the main panel container by ID to remove border, background, and shadow */
#dashlet-d424525.panel.panel-default {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Hide the EspoCRM Panel Heading completely (removes title and menu button) */
#dashlet-d424525 .panel-heading {
    display: none !important;
}

/* Remove default padding from the body so your cards go edge-to-edge if needed */
#dashlet-d424525 .panel-body {
    padding: 0 !important;
    background: transparent !important;
}

/* Target the grid-stack container just in case it has background or shadow */
.dashlet-container[data-id="d424525"] {
    background: transparent !important;
    box-shadow: none !important;
}

.container.content.login-wrapper .login-side-panel .login-side-image {
    display:none;
}

.container.content.login-wrapper > .container-centering #login button#btn-login {
        background-color: #ff6000;
        width: 100%;
        padding: 10px;
    }

.container.content.login-wrapper > .container-centering #login input {
    padding: 10px;
}

.container.content.login-wrapper > .container-centering #login a[data-action="toggleShowPassword"] {
    padding-top: 5px;
}

#btn-login {
    margin-top: 20px;
    height: auto;
}

#login {
    border: none;
    border-radius: 0px;
    margin-left: 0;
}


/* mobile styling login page */
@media (max-width: 767px) {
    .container.content.login-wrapper > .container-centering div#login {
        background: rgba(0, 102, 204, 0.9) !important;
        padding: 33px 33px 33px 33px !important;
    }:root {
    /* Root variables not exposed in Color Palette (optional overrides). */
    /* --default-heading-bg-color: ; */

    /* --navbar-inverse-color: ; */
    /* --navbar-inverse-link-hover-color: ; */
    /* --navbar-inverse-link-hover-bg: ; */
    /* --navbar-inverse-link-active-bg: ; */
    /* --navbar-inverse-link-icon-color: ; */
    /* --navbar-inverse-link-icon-hover-color: ; */
    /* --navbar-inverse-border: ; */
    /* --navbar-inverse-toggle-hover-bg: ; */
    /* --navbar-link-hover-color: ; */
    /* --navbar-link-icon-color: ; */
    /* --navbar-link-active-bg: ; */

    /* --link-color: ; */
    /* --link-hover-color: ; */

    /* --input-color: ; */
    /* --input-bg: ; */
    /* --input-border: ; */
    /* --input-border-focus: ; */
    /* --input-bg-disabled: ; */
    /* --input-color-disabled: ; */

    /* --modal-backdrop-bg: ; */
    /* --modal-header-bg: ; */
    /* --modal-footer-bg: ; */
    /* --modal-content-bg: ; */

    /* --panel-default-bg: ; */
    /* --panel-default-text: ; */
    /* --panel-primary-bg: ; */
    /* --panel-primary-text: ; */
    /* --panel-success-bg: ; */
    /* --panel-success-text: ; */
    /* --panel-danger-bg: ; */
    /* --panel-danger-text: ; */
    /* --panel-warning-bg: ; */
    /* --panel-warning-text: ; */

    /* --dropdown-bg: ; */
    /* --dropdown-link-color: ; */
    /* --dropdown-link-hover-color: ; */
    /* --dropdown-link-hover-bg: ; */
    /* --dropdown-border: ; */
    /* --dropdown-divider-bg: ; */
    /* --dropdown-link-active-bg: ; */

    /* --calendar-today-bg: ; */
    /* --calendar-border: ; */
    /* --select-item-bg: ; */
    /* --select-item-border: ; */

    /* --well-bg: ; */
    /* --well-border: ; */

    /* --code-bg: ; */
    /* --code-color: ; */
    /* --code-border-color: ; */

    /* --scroll-bg: ; */
    /* --scroll-thumb-bg: ; */

    /* --site-footer-color: ; */
    /* --login-panel-heading-bg: ; */

    /* --default-box-shadow: ; */
    /* --top-bar-box-shadow: ; */
}