:root{
        --dark-color: #2a2743;
        --dark-dark-color: #0c0925;
    }
    
    .user-item-icon{
        position: relative;
        overflow: hidden;
    }

    .user-item-icon img{
        width: 100%;
        height: auto;
        display: block;
    }

    .item-focused{
        border-color: var(--primary-color)!important;
    }

    .tvc-navigation ul{
        padding-left:var(--padding-medium)!important;
        padding-right:var(--padding-medium)!important;
        margin-top:-8px;
        margin-bottom: -8px;
    }

    .box-constraint-center{
        max-width: 680px!important;
    }

    #data-app-slides{
        max-height: 800px;
    }

    .data-app-pop-over{
        --safe-area-inset-top:0px!important;
    }


    

    @media screen and (max-width: 767px) and (orientation: portrait),screen and (max-height: 500px) and (orientation: landscape) {
        .with-scrollbar.box-fill-height{
            margin:0;
            width:100%;
            height:100%;
        }
    }

    @media screen and (min-width: 768px) and (min-height:500px) and (orientation: landscape){

        ::-webkit-scrollbar
        {
            width: 8px;
            margin-right:5px;
        }

        /* TRACK */
        ::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.05); 
            -webkit-border-radius: 0;
            border-radius: 0;
        }
        

        
        /* THUMB */
        ::-webkit-scrollbar-thumb
        {
            /* This is the EXACT color of Mac OS scrollbars. 
                Yes, I pulled out digital color meter */
            background: rgba(0,0,0,0.1)!important;
            -webkit-border-radius: 100px;
            
        }
        ::-webkit-scrollbar-thumb:vertical:active
        
        {
            background: rgba(0,0,0,0.61); /* Some darker color when you click it */
            -webkit-border-radius: 100px;
        }

        
        .skeleton-screen .box-fill-height{
            background:rgba(255,255,255,0.05);
            border-radius: 10px;
            height: 90vh;
            max-height: 800px;
        }
        
    }
    
    @media screen and (prefers-color-scheme: dark){

        h1,
        h2,
        h3,
        h4,
        .tab-navigation li a,
        h4{
            color:#b7bfc5
        }

        body,p,a,
        .inputs{
            color:#9da7af
        }

        .tab-navigation,
        .border,
        .border-top,
        .border-left,
        .border-bottom{
            border-color: rgba(0, 0, 0, .3)
        }

        .border{
            border-color:rgba(255,255,255,0.1);
        }

        body{
            background:var(--dark-dark-color)!important
        }
    }

    @media 
        screen and (max-width: 767px) and (orientation: portrait) and (prefers-color-scheme: dark),
        screen and (max-height: 500px) and (orientation: landscape) and (prefers-color-scheme: dark) {
        body.bg-white{background:var(--dark-color)!important}
        
    }