html, body{
    height: 100vh;
    margin:0;
}

.tabs{
    display: flex;
    flex-flow: column;
    height: 100%;
    overflow:hidden;
}

.tabs div[data-type='tab-bar']{
    height:30px;
    flex: 0 1 auto;

    line-height: 30px;

    background-color: rgb(53, 56, 61);

    overflow-x: auto;
    overflow-y: hidden;

} 
.tabs div[data-type='tab-bar']::-webkit-scrollbar{
    height:1px;
}
.tabs div[data-type='tab-bar']::-webkit-scrollbar:hover{
    height:2px;
}
.tabs div[data-type='tab-bar']::-webkit-scrollbar-thumb {
    background:rgb(124, 75, 28);
}
.tabs div[data-type='tab-bar']::-webkit-scrollbar-thumb:hover {
    background:rgb(166, 104, 46);
}
.tabs div[data-type='tab-bar']::-webkit-scrollbar-track{
    background: transparent;
}
.tabs div[data-type='tab-bar'] ul{
    
    list-style: none;
    margin-top:0;
    margin-bottom:0;
    height:100%;
    width:max-content;

    padding-left:0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.tabs div[data-type='tab-bar'] ul li{
    display: inline-block;

    padding-left:15px;
    padding-right:5px;
    margin-right:1px;

    position:relative;
    top:-2px;

    background-color: #4b4c50;
    height:100%;


    cursor: pointer;
    user-select: none;

    color:rgb(230, 230, 230);
    font-size: 12px;
}
.tabs div[data-type='tab-bar'] ul li.active{
    background-color: #282a2c;
    margin-right:0;
    left:-1px;
}
.tabs div[data-type='tab-bar'] ul li[status='unsaved-changes']{
    font-style: italic;
}
.tabs div[data-type='tab-bar'] ul li div{
    display:inline-block;
    margin-left:15px;
    margin-right:5px;
    opacity: 0.5;
    font-size:12px;
}
.tabs div[data-type='tab-bar'] ul li div:hover{
    opacity: 1;
}

.tabs div[data-type='tab-content']{
    flex: 1 1 auto;
    overflow:hidden;
    background-color: #282a2c;
}

.tabs div[data-type='tab-content'] .tab-section{
    height:100%;
}

.modal-dlg{
    position: absolute;
    top:0px;
    left:0px;
    height:100vh;
    width:100vw;

    background-color: #4c5762;
    opacity: 0.5;
}

.modal-dlg .dlg{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    min-width:300px;

    opacity: 1;

    background-color: #4b4c50;
    color:rgb(239, 241, 255);
    border-radius: 12px;
    padding-bottom: 12px;

    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.modal-dlg .dlg .dlg-header{
    padding:12px;
    padding-top:5px;
    padding-bottom:5px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: #282a2c;

    border-bottom: 1px solid rgb(27, 27, 29);
}

.modal-dlg .dlg .dlg-main{
    padding:12px;
    padding-right:20px;
}
.modal-dlg .dlg .dlg-main h1{
    font-size: 20px;
    margin-bottom:16px;
}
.modal-dlg .dlg .dlg-main p{
    margin-top:0;
}
.modal-dlg .dlg .dlg-main .saves{
    text-align: center;
}
.modal-dlg .dlg .dlg-main .saves .save-btn{
    margin:15px;
    display: inline-block;
    user-select: none;
    cursor: pointer;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    border-radius: 5px;
    border:1px solid rgb(27, 27, 29);
    background-color: #616168;
}
.modal-dlg .dlg .dlg-main .saves .save-btn:hover{
    background-color: #6b6b70;
}
.modal-dlg .dlg .dlg-buttons{
    font-size: 20px;
    padding:12px;
}
.modal-dlg .dlg .dlg-buttons button{
    float: right;
    margin-left:5px;
    background-color: rgb(53, 56, 61);
    border:1px solid rgb(27, 27, 29);
    color:rgb(239, 241, 255);

    border-radius: 5px;
    padding:4px;
    padding-left:14px;
    padding-right:14px;
    cursor: pointer;
}

.modal-dlg .dlg .dlg-buttons button:hover{
    background-color: rgb(91, 95, 101);
}
.modal-dlg .dlg .dlg-buttons button:active{
    background-color: rgb(106, 110, 118);
}