/* ============================================
   AuthCraft – Authentication UI Kit
   File: shell.min.css
   
   Author: coders_devx
   CodeCanyon: https://codecanyon.net/user/coders_devx
   ============================================ */

:root {
    --dark-color     : #323A45;
    --color-fff      : #FFFFFF;
    --color-100      : #F0F0F0;
    --color-200      : #EEEEEE;
    --color-300      : #E0E0E0;
    --color-400      : #BDBDBD;
    --color-500      : #555353;
    --color-600      : #464545;
    --color-700      : #363535;
    --color-800      : #252525;
    --color-900      : #181818;
    --color-000      : #000000;
    --border-color   : #F0F0F0;
    --card-color     : #ffffff;
    --body-color     : #f4f7f6;
    --white-color    : #ffffff;
    --sidebar-color  : #fcfcfc;
    --hc-font-color  : #555555;
    --hc-bg-color    : #f0f0f0;
    --primary-color  : #0d6efd;
    --secondary-color: #ffd55d;
    --chart-color1   : #2794eb;
    --chart-color2   : #17b3c1;
    --chart-color3   : #64868e;
    --chart-color4   : #47d6b6;
    --chart-color5   : #4362D0;
    --sidebar-img    : none
}

[data-theme="dark"] {
    --dark-color   : #323A45;
    --color-fff    : #000000;
    --color-100    : #212121;
    --color-200    : #424242;
    --color-300    : #616161;
    --color-400    : #757575;
    --color-500    : #8f8f8f;
    --color-600    : #BDBDBD;
    --color-700    : #E0E0E0;
    --color-800    : #EEEEEE;
    --color-900    : #F0F0F0;
    --color-000    : #FFFFFF;
    --border-color : #353535;
    --card-color   : #262727;
    --body-color   : #1e1f20;
    --white-color  : #ffffff;
    --sidebar-color: #fcfcfc;
    --hc-font-color: #555555;
    --hc-bg-color  : #f0f0f0
}

[data-theme="dark"] [class="theme-cyan"] {
    --primary-color: #00bdaa
}

[data-theme="dark"] [class="theme-indigo"] {
    --border-color: #212020;
    --card-color  : #101010;
    --body-color  : #050505;
    --color-100   : #F0F0F0;
    --color-200   : #EEEEEE
}

[data-theme="dark"] [class="theme-blue"] {
    --primary-color: #2e7bec;
    --border-color : #1a1f2d;
    --card-color   : #10141f;
    --body-color   : #080b13
}

[data-theme="dark"] [class="theme-orange"] {
    --border-color: #092940;
    --card-color  : #052133;
    --body-color  : #051e2f
}

[data-theme="dark"] [class="theme-blush"] {
    --border-color: #242331;
    --card-color  : #1a1925;
    --body-color  : #15141f
}

[data-theme="dark"] [class="theme-red"] {
    --primary-color: #f73e60;
    --border-color : #222335;
    --card-color   : #161725;
    --body-color   : #11121d
}

[data-theme="high-contrast"] {
    --dark-color   : #323A45;
    --color-fff    : #000000;
    --color-100    : #000000;
    --color-200    : #ffffff;
    --color-300    : #ffffff;
    --color-400    : #000000;
    --color-500    : #ffffff;
    --color-600    : #ffffff;
    --color-700    : #ffffff;
    --color-800    : #ffffff;
    --color-900    : #ffffff;
    --color-000    : #ffffff;
    --border-color : #262727;
    --card-color   : #0e0e0e;
    --body-color   : #000000;
    --white-color  : #ffffff;
    --black-color  : #000000;
    --sidebar-color: #fcfcfc;
    --hc-font-color: #555555;
    --hc-bg-color  : #f0f0f0
}

[data-theme="high-contrast"] .avatar.no-thumbnail {
    background-color: #191818
}

[data-theme="high-contrast"] .form-control::placeholder {
    color: var(--white-color)
}

[data-theme="high-contrast"] .modal {
    color: #191818
}

[data-theme="high-contrast"] .modal .card {
    border-color    : var(--hc-bg-color);
    background-color: var(--white-color)
}

[data-theme="high-contrast"] .border-dark {
    border-color: var(--color-200) !important
}

[class="theme-indigo"] {
    --primary-color   : #484c7f;
    --secondary-color : #d8d419;
    --primary-rgb     : 72, 76, 127;
    --chart-color1    : #484c7f;
    --chart-color2    : #d8d419;
    --chart-color3    : #7394b9;
    --chart-color4    : #79b6bd;
    --chart-color5    : #a0c1b8;
    --primary-gradient: linear-gradient(145deg, var(--primary-color), var(--chart-color3))
}

[class="theme-blue"] {
    --primary-color   : #0d6efd;
    --secondary-color : #ffd55d;
    --primary-rgb     : 13, 110, 253;
    --chart-color1    : #2794eb;
    --chart-color2    : #17b3c1;
    --chart-color3    : #64868e;
    --chart-color4    : #47d6b6;
    --chart-color5    : #4362D0;
    --primary-gradient: linear-gradient(145deg, var(--primary-color), var(--chart-color3))
}

[class="theme-cyan"] {
    --primary-color   : #00bdaa;
    --secondary-color : #f1ff17;
    --primary-rgb     : 0, 189, 170;
    --chart-color1    : #00bdaa;
    --chart-color2    : #c1c0b9;
    --chart-color3    : #537791;
    --chart-color4    : #9cbf3b;
    --chart-color5    : #cdb60c;
    --primary-gradient: linear-gradient(145deg, var(--primary-color), var(--chart-color3))
}

[class="theme-green"] {
    --primary-color   : #7EB93F;
    --secondary-color : #fffb83;
    --primary-rgb     : 126, 185, 63;
    --chart-color1    : #7EB93F;
    --chart-color2    : #b9bc6d;
    --chart-color3    : #427a5b;
    --chart-color4    : #4e7376;
    --chart-color5    : #a6a6a4;
    --primary-gradient: linear-gradient(145deg, var(--primary-color), var(--chart-color3))
}

[class="theme-orange"] {
    --primary-color   : #feb019;
    --secondary-color : #35f3fd;
    --primary-rgb     : 254, 176, 25;
    --chart-color1    : #ef7e56;
    --chart-color2    : #44558f;
    --chart-color3    : #ded5c4;
    --chart-color4    : #f59292;
    --chart-color5    : #90a4ae;
    --primary-gradient: linear-gradient(145deg, var(--primary-color), var(--chart-color4))
}

[class="theme-blush"] {
    --primary-color   : #ED5782;
    --secondary-color : #ffdd95;
    --primary-rgb     : 237, 87, 130;
    --chart-color1    : #ED5782;
    --chart-color2    : #e5df88;
    --chart-color3    : #726a95;
    --chart-color4    : #a6a6a4;
    --chart-color5    : #c9b8b8;
    --primary-gradient: linear-gradient(145deg, var(--primary-color), var(--chart-color3))
}

[class="theme-red"] {
    --primary-color   : #ff4560;
    --secondary-color : #FFDF41;
    --primary-rgb     : 255, 69, 96;
    --chart-color1    : #ff5959;
    --chart-color2    : #ffad5a;
    --chart-color3    : #4f9da6;
    --chart-color4    : #c06c84;
    --chart-color5    : #f67280;
    --primary-gradient: linear-gradient(145deg, var(--primary-color), var(--chart-color4))
}

[class="theme-dynamic"] {
    --primary-gradient: linear-gradient(145deg, var(--primary-color), var(--chart-color3))
}

#auth-shell {
    display           : -moz-flex;
    display           : -webkit-flex;
    display           : -ms-flex;
    display           : flex;
    -ms-flex-direction: row;
    flex-direction    : row
}

#auth-shell .navigation {
    background-color         : var(--card-color);
    width                    : 60px;
    height                   : 100vh;
    font-size                : 1rem;
    display                  : -moz-flex;
    display                  : -webkit-flex;
    display                  : -ms-flex;
    display                  : flex;
    -ms-flex-direction       : column;
    flex-direction           : column;
    -ms-flex-wrap            : nowrap;
    flex-wrap                : nowrap;
    overflow-y               : auto;
    overflow-x               : hidden;
    text-align               : center;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order           : 0;
    order                    : 0;
    z-index                  : 99
}

@media only screen and (max-width: 991px) {
    #auth-shell .navigation {
        border-bottom : 1px solid;
        flex-direction: row;
        align-items   : center;
        position      : fixed;
        overflow      : hidden;
        z-index       : 8;
        width         : 100%;
        height        : 60px
    }

    #auth-shell .navigation .brand-icon svg {
        width       : 22px;
        margin-right: 20px
    }

    #auth-shell .navigation .navbar-nav {
        flex-direction : row !important;
        justify-content: flex-end !important;
        padding-right  : 50px
    }

    #auth-shell .navigation .navbar-nav .flex-grow-1 {
        flex-grow: unset !important
    }

    #auth-shell .navigation .navbar-nav .nav-link {
        margin-left: 5px
    }

    #auth-shell .navigation .navbar-nav .menu-toggle {
        position: fixed;
        right   : 10px
    }
}

#auth-shell .sidebar {
    -moz-transition          : ease 0.1s;
    -o-transition            : ease 0.1s;
    -webkit-transition       : ease 0.1s;
    transition               : ease 0.1s;
    overflow-y               : auto;
    scroll-behavior          : smooth;
    -ms-overflow-style       : none;
    scrollbar-width          : none;
    background               : var(--primary-color);
    position                 : relative;
    z-index                  : 9;
    height                   : 100vh;
    width                    : 230px;
    -webkit-box-flex         : 0;
    -ms-flex-positive        : 0;
    flex-grow                : 0;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order           : 1;
    order                    : 1
}

#auth-shell .sidebar::-webkit-scrollbar {
    width: 4px
}

#auth-shell .sidebar:hover::-webkit-scrollbar-thumb {
    visibility: visible
}

#auth-shell .sidebar:hover::-webkit-scrollbar-track {
    visibility: visible
}

#auth-shell .sidebar::-webkit-scrollbar-track {
    visibility: hidden;
    background: transparent
}

#auth-shell .sidebar::-webkit-scrollbar-thumb {
    visibility   : hidden;
    opacity      : 0.2;
    background   : var(--secondary-color);
    border-radius: 5px
}

#auth-shell .sidebar::-webkit-scrollbar-thumb:hover {
    opacity: 1
}

#auth-shell .sidebar .sidebar-title {
    color: var(--white-color)
}

#auth-shell .sidebar .menu-list {
    list-style: none;
    padding   : 0
}

#auth-shell .sidebar .menu-list a[aria-expanded="true"].m-link {
    color: var(--secondary-color)
}

#auth-shell .sidebar .menu-list a[aria-expanded="true"] .arrow:before {
    content: "\f068"
}

#auth-shell .sidebar .menu-list .m-link,
#auth-shell .sidebar .menu-list .ms-link {
    display: flex
}

#auth-shell .sidebar .menu-list .m-link:hover,
#auth-shell .sidebar .menu-list .m-link.active,
#auth-shell .sidebar .menu-list .ms-link:hover,
#auth-shell .sidebar .menu-list .ms-link.active {
    color: var(--secondary-color)
}

#auth-shell .sidebar .menu-list .m-link:hover::before,
#auth-shell .sidebar .menu-list .m-link.active::before,
#auth-shell .sidebar .menu-list .ms-link:hover::before,
#auth-shell .sidebar .menu-list .ms-link.active::before {
    display: block
}

#auth-shell .sidebar .menu-list .m-link {
    color      : var(--white-color);
    align-items: center;
    padding    : 10px 0
}

#auth-shell .sidebar .menu-list .ms-link {
    color   : var(--white-color);
    position: relative;
    padding : 5px 0
}

#auth-shell .sidebar .menu-list .ms-link::before {
    background-color: var(--secondary-color);
    content         : "";
    display         : none;
    position        : absolute;
    height          : 5px;
    width           : 5px;
    left            : -24px;
    top             : 13px
}

#auth-shell .sidebar .menu-list .fa {
    width: 30px
}

#auth-shell .sidebar .menu-list .arrow {
    color    : var(--white-color);
    opacity  : 0.3;
    font-size: 10px
}

#auth-shell .sidebar .menu-list .divider {
    color       : var(--white-color);
    border-color: rgba(255, 255, 255, 0.3) !important;
    opacity     : 0.5
}

#auth-shell .sidebar .menu-list .sub-menu {
    list-style  : none;
    position    : relative;
    padding-left: 30px
}

#auth-shell .sidebar .menu-list .sub-menu::before {
    background-color: var(--white-color);
    content         : "";
    position        : absolute;
    height          : 100%;
    width           : 1px;
    left            : 8px;
    top             : 0
}

#auth-shell .sidebar.gradient {
    background: var(--primary-gradient)
}

#auth-shell .sidebar.gradient.sidebar-mini .menu-list .sub-menu {
    background: var(--primary-gradient)
}

#auth-shell .sidebar.sidebar-mini {
    text-align: center;
    overflow  : visible;
    padding   : 16px 0 !important;
    width     : 60px;
    z-index   : 99
}

#auth-shell .sidebar.sidebar-mini .Language {
    display: none
}

#auth-shell .sidebar.sidebar-mini .sidebar-title span,
#auth-shell .sidebar.sidebar-mini form {
    display: none
}

#auth-shell .sidebar.sidebar-mini .menu-list>li {
    position: relative
}

#auth-shell .sidebar.sidebar-mini .menu-list>li:hover .sub-menu {
    display: block !important
}

#auth-shell .sidebar.sidebar-mini .menu-list .m-link {
    margin-bottom: 10px
}

@media only screen and (max-height: 640px) {
    #auth-shell .sidebar.sidebar-mini .menu-list .m-link {
        margin-bottom: 0;
        padding      : 9px 0
    }
}

#auth-shell .sidebar.sidebar-mini .menu-list .m-link span {
    display: none
}

#auth-shell .sidebar.sidebar-mini .menu-list .ms-link::before {
    left: -16px
}

#auth-shell .sidebar.sidebar-mini .menu-list .fa {
    width: 100%
}

#auth-shell .sidebar.sidebar-mini .menu-list .sub-menu {
    background    : var(--primary-color);
    position      : absolute;
    border-radius : .25rem;
    box-shadow    : 0 10px 40px 10px rgba(25, 24, 24, 0.2);
    width         : 200px;
    padding-top   : 10px;
    padding-bottom: 10px;
    left          : 61px;
    top           : 0
}

#auth-shell .sidebar.sidebar-mini .menu-list .sub-menu:before {
    display: none
}

#auth-shell .sidebar.sidebar-mini .menu-list .divider small {
    display: none
}

#auth-shell .sidebar.sidebar-mini .fa-arrow-left::before {
    content: "\f061"
}

#auth-shell .sidebar.sidebar-mini #menu-Components {
    top   : auto;
    bottom: -80px;
    width : 300px
}

#auth-shell .sidebar.sidebar-mini #menu-Components li {
    width: 50%;
    float: left
}

#auth-shell .sidebar.sidebar-mini .sub-menu.show {
    display: none
}

#auth-shell .sidebar.sidebar-img-bg::after {
    position               : fixed;
    background-image       : var(--sidebar-img);
    background-size        : cover;
    -o-background-size     : cover;
    -moz-background-size   : cover;
    -webkit-background-size: cover;
    background-position    : center center;
    content                : '';
    left                   : 60px;
    top                    : 0;
    z-index                : -1;
    width                  : 230px;
    opacity                : 0.1;
    height                 : 100%
}

#auth-shell .sidebar.sidebar-img-bg.sidebar-mini::after {
    width: 60px
}

#auth-shell .sidebar.open {
    left   : 60px;
    z-index: 9
}

#auth-shell .sidebar.open.sidebar-img-bg::after {
    left: 60px
}

@media only screen and (max-width: 991px) {
    #auth-shell .sidebar.open {
        left: 0
    }

    #auth-shell .sidebar.open.sidebar-img-bg::after {
        left: 0
    }
}

@media only screen and (max-width: 1279px) {
    #auth-shell .sidebar {
        position: fixed;
        left    : -400px
    }

    #auth-shell .sidebar.sidebar-img-bg::after {
        left: -400px
    }
}

#auth-shell .main {
    overflow-y               : auto;
    scroll-behavior          : smooth;
    -ms-overflow-style       : none;
    scrollbar-width          : none;
    background-color         : var(--body-color);
    height                   : 100vh;
    -webkit-box-ordinal-group: 4;
    -ms-flex-order           : 3;
    order                    : 3;
    -webkit-box-flex         : 1;
    -ms-flex                 : 1;
    flex                     : 1
}

#auth-shell .main::-webkit-scrollbar {
    width: 4px
}

#auth-shell .main:hover::-webkit-scrollbar-thumb {
    visibility: visible
}

#auth-shell .main:hover::-webkit-scrollbar-track {
    visibility: visible
}

#auth-shell .main::-webkit-scrollbar-track {
    visibility: hidden;
    background: transparent
}

#auth-shell .main::-webkit-scrollbar-thumb {
    visibility   : hidden;
    opacity      : 0.2;
    background   : var(--secondary-color);
    border-radius: 5px
}

#auth-shell .main::-webkit-scrollbar-thumb:hover {
    opacity: 1
}

@media only screen and (max-width: 991px) {
    #auth-shell .main {
        height    : calc(100vh - 60px);
        margin-top: 60px
    }
}

#auth-shell .main .body {
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow        : column;
    flex-flow            : column;
    display              : -webkit-box;
    display              : -ms-flexbox;
    -webkit-box-flex     : 1;
    -ms-flex-positive    : 1;
    flex-grow            : 1;
    min-width            : 0;
    min-height           : calc(100vh - 180px)
}

#auth-shell .auth-h100 {
    height: calc(100vh - 192px)
}

@media only screen and (max-width: 1280px) {
    #auth-shell .auth-h100 {
        height: calc(100vh - 96px)
    }
}

@media only screen and (max-width: 640px) {
    #auth-shell .auth-h100 {
        height: auto
    }
}

.modal-content .border-bottom,
.modal-content .dropdown-divider {
    border-color: rgba(25, 24, 24, 0.05) !important
}

.rtl_mode .sidebar .menu-list .sub-menu {
    padding-right: 30px;
    padding-left : 0
}

.rtl_mode .sidebar .menu-list .sub-menu::before {
    right: 8px;
    left : auto
}

.rtl_mode .sidebar .menu-list .ms-link::before {
    right: -24px;
    left : auto
}

.rtl_mode .sidebar.sidebar-mini .menu-list .sub-menu {
    right: 61px;
    left : auto
}

.rtl_mode .sidebar.open {
    right: 60px;
    left : auto
}

@media only screen and (max-width: 991px) {
    .rtl_mode .sidebar.open {
        left : auto;
        right: 0
    }
}

.rtl_mode .sidebar.open.sidebar-img-bg::after {
    left : auto;
    right: 60px
}

@media only screen and (max-width: 991px) {
    .rtl_mode .sidebar.open.sidebar-img-bg::after {
        left : auto;
        right: 0
    }
}

.rtl_mode .sidebar.sidebar-img-bg::after {
    left : auto;
    right: 60px
}

@media only screen and (max-width: 1279px) {
    .rtl_mode .sidebar {
        position: fixed;
        right   : -400px;
        left    : auto
    }

    .rtl_mode .sidebar.sidebar-img-bg::after {
        left : auto;
        right: -400px
    }
}

/* Settings trigger: keep at bottom (override app.min.css .options-trigger top) */
.options-trigger.position-fixed {
    top: auto;
    bottom: 1rem;
    right: 1rem;
}

/* Settings modal: theme color swatch visibility */
#optionsModal .palette-picker li {
    margin: 0;
}
#optionsModal .palette-picker li div {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] #optionsModal .palette-picker li div,
[data-theme="high-contrast"] #optionsModal .palette-picker li div {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
#optionsModal .palette-picker li.active::after {
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    width: auto;
    height: auto;
    border: 2px solid var(--primary-color, #0d6efd);
    border-radius: 0.5rem;
}
#optionsModal .palette-picker li.active div {
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] #optionsModal .palette-picker li.active div,
[data-theme="high-contrast"] #optionsModal .palette-picker li.active div {
    border-color: rgba(255, 255, 255, 0.6);
}
#optionsModal .palette-picker .dynamic {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: #fff;
}
#optionsModal .palette-picker li.active .dynamic {
    background: var(--primary-color, #0d6efd);
    color: #fff;
}

/* Settings modal: custom color pickers visibility */
#optionsModal #primaryColorPicker,
#optionsModal #secondaryColorPicker {
    width: 2rem;
    height: 2rem;
    border-width: 2px;
    border-color: rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[data-theme="dark"] #optionsModal #primaryColorPicker,
[data-theme="dark"] #optionsModal #secondaryColorPicker,
[data-theme="high-contrast"] #optionsModal #primaryColorPicker,
[data-theme="high-contrast"] #optionsModal #secondaryColorPicker {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}