:root {
    --body-bkg-clr: #6851ba;
        
    --header-grad-clr: linear-gradient(0deg, rgba(73,58,152,1) 30%, rgba(109,87,186,1) 70%);
    --header-menu-button-bkg-clr: #000000;
    --header-menu-button-clr: #ffffff;
    --header-menu-button-border-clr: #fbf875;
    --header-menu-button-hover-clr: #006ca5;
    
    --main-form-body-bkg-clr: #ffffff;
    --front-img-border-clr: #fbf875;
    
    --prompt-body-bkg-clr: #66697cc0;
    --prompt-body-z-index: 9999;
    --prompt-dlg-bkg-clr: #cccccc;
    
    --modal-body-bkg-clr: #66697cc0;
    --modal-body-z-index: 5000;
    --modal-dlg-bkg-clr:  #cccccc;
    
    --menu-body-bkg-clr: #66697cc0;
    --menu-bkg-clr: #a2a2b6f0;
    --menu-items-border-clr: #fbf875;
    --menu-item-hover-clr: #c0c0d0f0;
    
    --menu-body-z-index: 8999;
    --act-spinner-clr: #3498db;
    
    --expander-bkg-clr: #999999;
    --expander-bkg-hover-clr: #bab9b9;
    --expander-bkg-active-clr: #000000;
    
    --search-result-item-bkg-clr: linear-gradient(0deg, rgba(73,58,152,1) 30%, rgba(109,87,186,1) 70%);
    /*
    ----------------------------------------------------------------------------
    generic values
    ----------------------------------------------------------------------------
    */
    --bkg-light-clr: #6851ba;
    --bkg-dark-clr: #120845;
    --bkg-white-clr: #ffffff;
    
    --modal-bkg-clr: #66697c80;
    
    --dlg-border-clr: #fbf875;
    --dlg-err-btn-clr: #ba0000;
    --dlg-err-btn-hover-clr: #f60b0b;
    --dlg-ok-btn-clr: #0e9a0a;
    --dlg-ok-btn-hover-clr: #3fd33b;
    
    --dlg-header-def-clr: linear-gradient(0deg, rgba(0,0,0,1) 21%, rgba(52,40,94,1) 67%);
    --btn-def-clr: #999999;
    --btn-def-hover-clr: #bab9b9;
    
    --txt-def-clr: #ffffff;
    --txt-def-readonly-clr: #cccccc;
    
    --font-dark-clr: #000000;
    --font-light-clr: #ffffff;
    
    --font-main: Cinzel, sans-serif;
    --font-input: FiraMono, sans-serif;
}
@font-face {
    font-family: Cinzel;
    src: url("../../font/cinzel.ttf");
}

@font-face {
    font-family: FiraMono;
    src: url("../../font/FiraMono-Regular.ttf"),
         url("../../font/FiraMono-Bold.ttf"),
         url("../../font/FiraMono-Medium.ttf");
}
.w-1 {width: 8.33%;}
.w-2 {width: 16.66%;}
.w-3 {width: 25%;}
.w-4 {width: 33.33%;}
.w-5 {width: 41.66%;}
.w-6 {width: 50%;}
.w-7 {width: 58.33%;}
.w-8 {width: 66.66%;}
.w-9 {width: 75%;}
.w-10 {width: 83.33%;}
.w-11 {width: 91.66%;}
.w-12 {width: 100%;}

.file-w {width: 25%;}

* {
    box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}


@media (max-aspect-ratio: 1/1.15)
{
    .w-1 {width: 16.66%;}
    .w-2 {width: 16.66%;}
    .w-3 {width: 33.33%;}
    .w-4 {width: 33.33%;}
    .w-5 {width: 50%;}
    .w-6 {width: 50%;}
    .w-7 {width: 66.66%;}
    .w-8 {width: 66.66%;}
    .w-9 {width: 83.33%;}
    .w-10 {width: 83.33%;}
    .w-11 {width: 100%;}
    .w-12 {width: 100%;}
    
    .file-w {width: 33.33%;}
}

@media (max-aspect-ratio: 1/1.5)
{
    [class *= "w-"] {
        width: 100%;
    }
    
    .file-w {width: 50%;}
}

body {
    position: relative;
    background-color: var(--body-bkg-clr);
    font-family: var(--font-main);
    min-width: 240px;
    min-height: 320px;
}

.f-rw {
    display: flex;
    flex-flow: row wrap;
}

.f-cw {
    display: flex;
    flex-flow: column wrap;
}

.f-cw {
    display: flex;
    flex-flow: column wrap;
}
.f-00 {
    flex: 0 0 auto;
}
.f-01 {
    flex: 0 1 auto;
}
.f-10 {
    flex: 1 0 auto;
}
.f-11 {
    flex: 1 0 auto;
}
.f-21 {
    flex: 2 1 auto;
}
.f-31 {
    flex: 3 1 auto;
}

.sm {
    margin: 2px;
}
.sm-l {
    margin-left: 2px;
}
.sm-r {
    margin-right: 2px;
}
.sm-t {
    margin-top: 2px;
}
.sm-b {
    margin-bottom: 2px;
}


.pad {
    padding: 10px;
}
.pad-l {
    padding-left: 10px;
}
.pad-r {
    padding-right: 10px;
}
.pad-t {
    padding-top: 10px;
}
.pad-b {
    padding-bottom: 10px;
}

.pdh {
    padding: 5px;
}
.pdh-l {
    padding-left: 5px;
}
.pdh-r {
    padding-right: 5px;
}
.pdh-t {
    padding-top: 5px;
}
.pdh-b {
    padding-bottom: 5px;
}

.padder {
    align-items: center;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}