::-webkit-scrollbar, html::-webkit-scrollbar {
    width: .6em;
    height: .6em;
}
::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb {
    background: #333;
    border: .2rem solid #fff;
    cursor: pointer;
    border-radius: .5rem;
    display: block;
}
::-webkit-scrollbar-track, html::-webkit-scrollbar-track {
    background: #fff;
}
::selection {
    background-color: #266bf5;
    color: white;
}



#files-pop-up h3{
    font-size: 1.1rem;
}


:root,html{
    height: 100%;
    scroll-behavior: smooth;
}

body{
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "inter ui", -apple-system, BlinkMacSystemFont, roboto, "segoe ui", Helvetica, Arial, sans-serif !important;
    font-weight: 100;
}

*{
    font-weight: 100;
    font-family: "inter ui", -apple-system, BlinkMacSystemFont, roboto, "segoe ui", Helvetica, Arial, sans-serif !important;
}

footer{
    color: #5a5a5a;
    font-size: .9rem;
    text-align: center;
    max-width: 1000px;
}

main{
    flex: 1 1 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#files-pop-up{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    margin: auto;
/*            display: none !important;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#file-welcomer{
    margin: auto;
    display: flex;
    flex-direction: column;
}

#file-dialog{
    user-select: none;
    position: relative;
    border-radius: .47rem;
    padding: .47rem;
    display: flex;
    display:flex;
    justify-content:center;
    align-items: center;
    outline: 2px solid white;
    box-shadow: 0 0 0 .18rem #24a7e8;
}

#file-dialog-overlay{
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: inherit;
    border-radius: .47rem;
    box-sizing: content-box;
}

main h3{
    font-weight: 100;
}

#file-dialog-overlay h3{
    font-weight: 100;
    margin-bottom: .2rem;
}

#file-dialog-overlay p{
    margin: 0;
    font-size: .8rem;
}

#file-dialog-overlay img{
    height: 1.5rem;
}


button.modern{
    cursor: pointer;
    font-family: inherit;
    font-weight: 100;
    border: none;
    color: #fff;
    font-size: .95rem;
    margin: .7rem;
    padding: .4rem 1.3rem;
    border-radius: 1.1rem/50%;
/*            background: linear-gradient(to bottom right,#37C0F4,#108DDB);*/
}

#file-dialog input[type=file]{
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    width: 20rem;
    max-width: 75vw;
    min-height: 10rem;
}

#file-dialog::after{
    content: "";
    position: absolute;
    bottom: -1.4rem;
    height: 1px;
    width: 90%;
    background: inherit;

}

#file-create{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 2.82rem;
    border: none;
    padding: .7rem .47rem;
    border-radius: .47rem;
}

.bgstyle{
    background: linear-gradient(to bottom right,#37C0F4,#108DDB);
    color: white !important;
}

#nav-tab{
    align-items: flex-end;
}

#files nav .bgstyle{
    padding: .2rem .41rem;
    position: relative;
    border-radius: .4rem;
}

#files nav .elements{
    padding: .3rem;
}

#file-create h3{
    margin: 0;
    margin-left: .3rem;
}



header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items:baseline;
/*            margin-left:auto;*/
/*            position: absolute;*/
/*            right: 0;*/
    user-select: none;
    padding-bottom: 1rem;
}

header h3{
    color: #777;
    font-weight: 100;
    margin: 0;
    margin-left: .4rem;
    padding: .3rem 0;
}

header nav{
    padding-right: .3rem;
    margin-left: auto;
    display: flex;
}

.small-button{
    cursor: pointer;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 11%;
    margin: .2rem;
    width: 1.5rem;
    height: 1.5rem;
    outline: 1px solid white;
    box-shadow: 0 0 0 .1rem #37C0F4,0 .1rem .1rem #bbf;
}

.small-button img{
    height: 1rem;
}


#main-part{
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#main-part{
    max-width: 100%;
    display: flex;
    flex-direction: column;
    resize: horizontal;
/*            margin: 0 1rem;*/
    padding: .5rem;
    margin-right: auto;
}

#files{
    display: flex;
    flex-direction: column;
    flex: 1;
}


#main-part .tab-pane{
    width:100%;
/*            display: flex;*/
}

/*        #main-part textarea,#main-part .nav-link.active{
    border-color: #30b6ef !important;
}
*/

.delete-tab{
    
}

#nav-tabContent{
    flex: 1;
    width: 100%;
    display: flex;
}

#main-part textarea{
    border: 1px solid #999;
    flex: 1;
    height: 100%;
    width: 100%;
/*            resize: none;*/
/*            margin: .5rem;*/
    margin-top: 0;
    border-radius: .1rem;
}


#files-list h5,#insert-before button{
    appearance: none;
    cursor: pointer;
    color: #5a5a5a;
    background: white;
/*            position: relative !important;*/
    top: 1px;
    margin: 0;
    padding: .1rem .5rem;
    border: 1px solid #777;
    border-bottom: 1px solid white;
    border-radius: .25rem;
}

#insert-before button{
    appearance: none !important;
}



.dropdown{
    top: 1px;
}