/*----- Defining Root Variables -----*/
    :root{

        /*----- Sidebar Width -----*/
            --sidebar_width: 4rem;

    }

/*----- HTML & Body -----*/
    html, body{
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        font-size:14px;
    }

/*----- JTB_MD TO BOOT -----*/
    /*----- jtb-input -----*/
        /*----- If there is no icon the label and input box placement gets wrong -----*/
        /*----- Input boxes inside input element extends possible area -----*/
            jtb-input input{
                width: 100%;
            }


/* JS on table sort mech... 
    Eğer bu olmazsa 0 ya da false geldiğinde de "" şeklinde convert ediyor. bu yüzden sıralamalar şaşıyor.
=>  const content = row.sub_cellswithkeys[this._sort.key]?._content ?? "";  */










/*----- Navigation bar -----*/
    #navbar{
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        gap:2rem;
        padding: .5rem 2rem;
        padding-left: calc(var(--sidebar_width) + 2rem);
        border-bottom: 1px solid var(--jtbTheme-color-border);
        background: var(--jtbTheme-color-bg);

        width: 100%;
        min-width: 100%;
        max-width: 100%;

        height: var(--sidebar_width);
        max-height: var(--sidebar_width);
        min-height: var(--sidebar_width);
    }


/*----- Sidebar ------*/
    /*----- Self ------*/
        #sidebar{
            width: var(--sidebar_width);
            background: var(--jtbTheme-color-bg);
            border-right: 1px solid var(--jtbTheme-color-border);
        }
    /*----- Content Area -----*/
        /*----- Hide Scrollbar -----*/
            #sidebar > #sidebarContent {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            #sidebar > #sidebarContent::-webkit-scrollbar { 
                display: none;
            }
        /*----- Links ------*/
            #sidebar .sideIco{
                text-decoration: none!important;
                padding: 0.5rem;
                color: var(--jtbTheme-color-text);
                font-weight: 500;
                position: relative;
                overflow: visible!important;
            }
        /*----- Hover State ------*/
            #sidebar .sideIco:not(.sideIco-iconOnly):not(.active):hover{
                opacity: 1;
                background: var(--jtbTheme-color-bg-alt)!important;
            }
        /*----- Active State ------*/
            #sidebar .sideIco.active{
                background: var(--jtbTheme-color-text)!important;
                color: var(--jtbTheme-color-bg)!important;
            }
        /*----- Icons ------*/
            #sidebar .sideIco > i{
                font-size: 1.5rem;
            }

/*----- Dropdown Lists ------*/
    /*----- Trigger -----*/
        [jtb-dropdown='userDrop']{
            transition: border-color 300ms;
            border:1px solid transparent;
            border-radius: .5rem;
        }
        [jtb-dropdown='userDrop']:hover{
            border-color:var(--jtbTheme-color-border);
        }
        [jtb-dropdown='userDrop'].jtb-trigger-open{
            border-color:var(--jtbTheme-color-border);
        }
    /*----- Drop -----*/
        .jtbDD_list{
            padding: .5rem;
        }
        .jtbDD_list > ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
            width:100%;
        }
        .jtbDD_list > ul > li,
        .jtbDD_list > ul > a > li {
            color: var(--jtbTheme-color-text)!important;
            text-decoration: none;
            padding: 0;
            padding-top:.25rem;
            padding-bottom:.25rem;
            margin:0;
            width: 100%;
        }
        .jtbDD_list > ul li{
            padding-left: .5rem!important;
            padding-right: .5rem!important;
            -webkit-transition: 300ms;
            -moz-transition: 300ms;
            -ms-transition: 300ms;
            -o-transition: 300ms;
            transition: 300ms;
            border-radius: .25rem;
            display: inline-flex;
            width: 100%;
            align-items: center;
            flex-wrap: nowrap;
            gap: .5rem;
        }
        .jtbDD_list > ul > a:hover, 
        .jtbDD_list > ul > a:focus{
            text-decoration: none;
        } 
        .jtbDD_list > ul > a:hover > li,
        .jtbDD_list > ul > li:hover{
            background: var(--jtbTheme-color-bg-alt);
            cursor: pointer;
        }

/*------ Main Area ------*/
    #mainArea{
        z-index:1;
        
        overflow-y: auto;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        padding: 2rem;
        padding-left: calc(var(--sidebar_width) + 2rem)!important;

        width: 100vw;
        height: calc(100vh - var(--sidebar_width));

        margin-top: var(--sidebar_width);
        gap: 1rem;

        background: var(--jtbTheme-color-bg-alt);

    }
    /*----- Overflow preventation ------*/
        #mainArea > *{
            overflow: visible;
        }


/*----- Page Tabs -----*/
    /*----- Main Area -----*/
        .tabContainer{
            width:3rem;
            border: 0.0625rem solid var(--jtbTheme-color-border);
            border-radius: .75rem;
            background: var(--jtbTheme-color-bg);
            padding:0;
        }.tabContainer-withSubtab{width:6rem;}
    /*----- Tabs area -----*/
        .tabContainer > .tabArea{width: 3rem;}
    /*----- Subtab area -----*/
        .tabContainer > .tabArea + .tabArea{border-left: 0.0625rem solid var(--jtbTheme-color-border);}
    /*----- Items -----*/
        .tabContainer .tabTriggers, 
        .tabContainer .subTabTriggers{
            width: 3rem;
            padding: .75rem;
            display: inline-flex;
            flex-direction:row; 
            align-items:center;
            justify-content: center; 
            transition: background-color 300ms;
        }
        /*----- Active state -----*/
            .tabContainer .tabTriggers.active, 
            .tabContainer .subTabTriggers.active{
                background-color:var(--jtbBlue-1);
            }
            [data-theme="dark"] .tabContainer .tabTriggers.active, 
            [data-theme="dark"] .tabContainer .subTabTriggers.active{
                background-color:var(--jtbBlue-12);
            }
        /*----- Hover state -----*/
            .tabContainer .tabTriggers:hover, 
            .tabContainer .subTabTriggers:hover{
                background-color:var(--jtbBlue-2);
                cursor:pointer;
            }
            [data-theme="dark"] .tabContainer .tabTriggers:hover, 
            [data-theme="dark"] .tabContainer .subTabTriggers:hover{
                background-color:var(--jtbBlue-11);
            }
        /*----- Icon -----*/
            .tabContainer .tabTriggers > i, 
            .tabContainer .subTabTriggers > i{
                font-size: 1.4rem;
                color: var(--jtbTheme-color-text);
                line-height: 1.4rem;
            }

    /*----- Tabs -----*/
        .tabs{
            width:100%;
            height: 100%;
            display:inline-flex;
            flex-wrap: nowrap; 
            gap: 1rem; 
        }

/*----- ERP Panel -----*/
    jtb-panel{
        border-radius: .75rem;
        background: var(--jtbTheme-color-bg);
    }
    /*----- Header Area -----*/
        jtb-panel .headerArea{
            display: inline-flex;
            flex-wrap: nowrap;
            width: 100%;
        }
        jtb-panel .headerArea .contentArea{
            flex:1;
            flex-direction: column;
            display: inline-flex;
        }
        /*----- Header -----*/
            jtb-panel label.panelHeader{
                font-weight: 600;
                text-transform: uppercase;
                font-size: small;
            }
        /*----- Header -----*/
            jtb-panel span.panelExpl{
                color: var(--jtbTheme-color-text-alt);
                font-size: smaller; 
                font-weight: 400;
            }


/*----- Loading Screen -----*/
    /*----- Main Area ------*/
        #loadingScreen{
            width: 100vw;
            height: 100vh;
            position: fixed;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--jtbTheme-color-bg);
            z-index: 3000;
        }
    /*----- Spinner ------*/
        /*----- Spinner Reboot ------*/
            .atom-spinner, .atom-spinner * {
                box-sizing: border-box;
            }
        /*----- Spinner Self ------*/
            .atom-spinner {
                height: 350px;
                width: 350px;
                overflow: hidden;
            }
            .atom-spinner .spinner-inner {
                position: relative;
                display: block;
                height: 100%;
                width: 100%;
            }
        /*----- Logo ------*/
            .atom-spinner .spinner-circle {
                display: block;
                position: absolute;
                color: var(--jtbTheme-color-text);
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        /*----- Lines ------*/
            .atom-spinner .spinner-line {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                animation-duration: 1s;
                border-left-width: calc(250px / 25);
                border-top-width: calc(250px / 25);
                border-left-color: var(--jtbTheme-color-text);
                border-left-style: solid;
                border-top-style: solid;
                border-top-color: transparent;
            }
            .atom-spinner .spinner-line:nth-child(1) {
                animation: atom-spinner-animation-1 1s linear infinite;
                transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
            }
            .atom-spinner .spinner-line:nth-child(2) {
                animation: atom-spinner-animation-2 1s linear infinite;
                transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
            }
            .atom-spinner .spinner-line:nth-child(3) {
                animation: atom-spinner-animation-3 1s linear infinite;
                transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
            }
    /*----- Keyframes ------*/
        @keyframes atom-spinner-animation-1 {
            100% {
                transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
            }
        }
        @keyframes atom-spinner-animation-2 {
            100% {
                transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
            }
        }
        @keyframes atom-spinner-animation-3 {
            100% {
                transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
            }
        }