@import url("320-480.css") (max-width:480px);
@import url("481-767.css") (min-width:481px) and (max-width:767px);
@import url("768-1199.css") (min-width:768px) and (max-width:1199px);
@import url("1200.css") (min-width:1200px);

* {
    margin: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

::selection {
    background: rgb(192, 192, 192, 0.3);
    /* Safari */
}

::-ms-selection {
    background: rgb(192, 192, 192, 0.3);
    /* Bad browser */
}

::-moz-selection {
    background: rgb(192, 192, 192, 0.3);
    /* Firefox */
}

html,
body {
    /* TODO: Need find interesting font */
    font-family: Menlo, Consolas, DejaVu Sans Mono, monospace;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    /* TOOD: 16px font-size */
    font-size: 14px;
    line-height: 1.4;

    /* TODO: 100vh tested later */
    height: 100%;

    /* background-color: #313131; */
    /* color: #C0C0C0; */
    color: #989898;
}

.maintile {
    /* border: solid 1px #665888; */

    min-height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;

    /* background-color: #313131; */
    background-color: #282c34;


    /* TODO: Need used font color in blocks. */
    /* color: #C0C0C0; */
    color: #989898;
}


@media screen and (orientation:landscape) {
    .application {
        max-height: 95vh;
    }
}

.application {
    margin: auto;

    /* TODO: 90 or 95 vh? */
    /* min-height: 95vh; */

    overflow: hidden;
    background-color: #2D2D2D;

    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: column;

    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    -webkit-box-shadow: 0px 0px 10px 1px rgb(27, 27, 27, 1);
    -moz-box-shadow: 0px 0px 10px 1px rgb(27, 27, 27, 1);
    box-shadow: 0px 0px 10px 1px rgb(27, 27, 27, 1);
}

/* *********** HEADER *********** */

.headerbar {
    /* border: solid 1px #665888; */

    min-height: 47px;

    display: flex;
    /* flex-direction: row-reverse; */
    justify-content: space-between;
    align-items: center;

    background: linear-gradient(180deg, rgb(43, 43, 43), rgb(38, 38, 38));
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    -webkit-box-shadow: 0px 1px 0px 1px rgb(192, 192, 192, 0.03) inset;
    -moz-box-shadow: 0px 1px 0px 1px rgb(192, 192, 192, 0.03) inset;
    box-shadow: 0px 1px 0px 0px rgb(192, 192, 192, 0.08) inset;

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

.header-panel-left {
    /* border: solid 1px #e06c75; */
    /* max-height: 47px; */
    display: flex;
    flex: 1 0 auto;
    padding-top: 2px;
    /* padding: 0px 4px 0px 4px; */
    /* border: #262626 2px solid; */
    /* border-radius: 5px; */
}

#btn-invisible {
    display: none;
}

#btn-invisible:checked~*.stack {
    display: none;
}

#btn-invisible:checked~*.sidebar {
    display: none;
}

#btn-invisible:checked~*.page {
    display: block;
}

#btn-menu-hide {
    margin: 0px 3px 0px 8px;
    align-self: center;
    border: #1B1B1B 1px solid;
    /* background-color: #313131; */
    background: linear-gradient(to top, rgb(38, 38, 38), rgb(39, 39, 39), rgb(40, 40, 40), rgb(41, 41, 41), rgb(42, 42, 42), rgb(43, 43, 43));
    border-radius: 5px;
    color: #C0C0C0;
    /* padding: 6px 8px 6px 8px; */
    padding: 6px 10px 6px 10px;
    /* text-align: center; */
    text-decoration: none;
    outline: none;
    box-shadow: 0px 0px 0px 1px rgb(192, 192, 192, 0.03) inset;
}

#btn-menu-hide:hover {
    /* background-color: #665888; */
    text-decoration: none;
    -webkit-box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
    -moz-box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
    box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
}

.btn-hide-icon {
    display: block;
    text-align: center;
    opacity: 0.7;
    padding: 2px 0px 2px 0px;
}

.btn:link,
.btn:visited {
    /* margin: 0px 3px 0px 3px; */
    align-self: center;
    border: #1B1B1B 1px solid;
    /* background-color: #313131; */
    background: linear-gradient(to top, rgb(38, 38, 38), rgb(39, 39, 39), rgb(40, 40, 40), rgb(41, 41, 41), rgb(42, 42, 42), rgb(43, 43, 43));
    border-radius: 5px;
    color: #C0C0C0;
    /* padding: 6px 8px 6px 14px */
    text-align: center;
    text-decoration: none;
    outline: none;
    box-shadow: 0px 0px 0px 1px rgb(192, 192, 192, 0.03) inset;
}


.btn:hover,
.btn:active {
    /* background-color: #665888; */
    text-decoration: none;
    -webkit-box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
    -moz-box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
    box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
}

.btn2:link,
.btn2:visited {
    /* margin: 0px 3px 0px 3px; */
    align-self: center;
    border: #1B1B1B 1px solid;
    /* background-color: #313131; */
    /* background: linear-gradient(to top, rgb(38, 38, 38), rgb(39, 39, 39), rgb(40, 40, 40), rgb(41, 41, 41), rgb(42, 42, 42), rgb(43, 43, 43)); */
    background: rgb(192, 192, 192, 0.02);

    border-radius: 5px;
    color: #C0C0C0;
    padding: 6px 14px;
    text-align: center;
    text-decoration: none;
    /* display: inline-block; */
    /* box-shadow: 0px 0px 0px 1px rgb(192, 192, 192, 0.03) inset; */
    box-shadow: 0px 0px 0px 1px rgb(192, 192, 192, 0.03) inset;
    outline: none;
}

.btn2:hover,
.btn2:active {
    /* background-color: #665888; */
    background: rgb(192, 192, 192, 0.05);
    text-decoration: none;
    -webkit-box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
    -moz-box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
    box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
}

.btn3:link,
.btn3:visited {
    margin: 0px 3px 0px 6px;

    align-self: center;
    padding: 6px 10px 6px 10px;

    border: #1B1B1B 1px solid;

    /* background: linear-gradient(to top, rgb(38, 38, 38), rgb(39, 39, 39), rgb(40, 40, 40), rgb(41, 41, 41), rgb(42, 42, 42), rgb(43, 43, 43)); */

    border-radius: 5px;
    color: #C0C0C0;

    /* text-align: center; */
    text-decoration: none;
    outline: none;
    /* display: inline-block; */
    box-shadow: 0px 0px 0px 1px rgb(192, 192, 192, 0.03) inset;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e570e7+0,c85ec7+47,a849a3+100;Pink+3D+%233 */
    background: rgb(103, 90, 137);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgb(103, 90, 137) 40%, rgb(109, 95, 144) 47%, red 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgb(103, 90, 137) 4%, rgb(109, 95, 144) 47%, red 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgb(103, 90, 137, 0.5), rgb(103, 90, 137, 0.3));
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e570e7', endColorstr='#a849a3', GradientType=0);
    /* IE6-9 */

    background: linear-gradient(to top, rgb(38, 38, 38), rgb(39, 39, 39), rgb(40, 40, 40), rgb(41, 41, 41), rgb(42, 42, 42), rgb(43, 43, 43));
    /* background: #21252B; */

    /*

   background-image: -webkit-linear-gradient(top, #665888, #665888);
   background-image: -moz-linear-gradient(top, #665888, #665888);
   background-image: -ms-linear-gradient(top, #665888, #665888);
   background-image: -o-linear-gradient(top, #665888, #665888);
   background-image: linear-gradient(to bottom, #665888, #665888);
*/
}

.btn3:hover,
.btn3:active {
    /* background-color: #665888; */
    text-decoration: none;
    -webkit-box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
    -moz-box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
    box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
}

.btn-vala:link,
.btn-vala:visited {
    margin: 0px 3px 0px 6px;

    align-self: center;
    padding: 6px 10px 6px 10px;

    border: #1B1B1B 1px solid;
    /* background-color: #313131; */
    background: linear-gradient(to top, rgb(38, 38, 38), rgb(39, 39, 39), rgb(40, 40, 40), rgb(41, 41, 41), rgb(42, 42, 42), rgb(43, 43, 43));
    border-radius: 5px;
    color: #C0C0C0;

    /* text-align: center; */
    text-decoration: none;
    outline: none;
    /* display: inline-block; */
    box-shadow: 0px 0px 0px 1px rgb(192, 192, 192, 0.03) inset;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e570e7+0,c85ec7+47,a849a3+100;Pink+3D+%233 */
    background: rgb(103, 90, 137);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgb(103, 90, 137) 40%, rgb(109, 95, 144) 47%, red 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgb(103, 90, 137) 4%, rgb(109, 95, 144) 47%, red 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgb(103, 90, 137, 0.5), rgb(103, 90, 137, 0.3));
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e570e7', endColorstr='#a849a3', GradientType=0);
    /* IE6-9 */

    /* background: linear-gradient(to top, rgb(38, 38, 38), rgb(39, 39, 39), rgb(40, 40, 40), rgb(41, 41, 41), rgb(42, 42, 42), rgb(43, 43, 43)); */

    /* 

   background-image: -webkit-linear-gradient(top, #665888, #665888);
   background-image: -moz-linear-gradient(top, #665888, #665888);
   background-image: -ms-linear-gradient(top, #665888, #665888);
   background-image: -o-linear-gradient(top, #665888, #665888);
   background-image: linear-gradient(to bottom, #665888, #665888); */

}

.btn-vala:hover,
.btn-vala:active {
    /* background-color: #665888; */
    text-decoration: none;
    -webkit-box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
    -moz-box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
    box-shadow: 0px 0px 0px 1px rgb(21, 83, 158) inset;
}

/* ============== TITLE ===============*/

.vala-title {
    /* border: solid 1px #e06c75; */
    display: flex;
    justify-content: center;
    max-height: 47px;
    /* flex-grow: 1; */
    flex: 1 0 auto;
    padding: 3px;
    text-align: center;
}

.header-panel-right {
    /* border: solid 1px #e06c75; */
    /* max-height: 47px; */
    display: flex;
    flex: 1 0 auto;
    padding: 2px 6px 0px 6px;
    justify-content: flex-end;
}


.container {
    background-color: #2D2D2D;

    max-height: 80vh;
    height: calc(100vh - 150px);
    display: flex;
    /* justify-content: space-between; */
    align-items: stretch;
    /* flex-wrap: nowrap; */
    /* flex-direction: column; */
    /* flex-grow: 1; */
    /* Scale box auto */
    flex: 1 0 auto;
    /* align-self: auto; */

    border-left: rgb(30, 30, 30) 1px solid;
    border-right: rgb(30, 30, 30) 1px solid;

}

.stack {
    /* border: solid 1px #665888; */
    margin: 0 auto;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* float: left; */
    flex-grow: 0;


    background-color: #2D2D2D;
}

.stack-top {
    /* border: #665888 1px solid; */
    /* align-self: flex-start; */
    /* opacity: 50%; */

}

.stack-top:hover {
    /* opacity: 100%; */
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.stack-bottom {
    /* border: #665888 1px solid; */
    /* align-self: flex-end; */
}


.stackicon {
    margin: 8px auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* background: #60a839; */
    border: #665888 0px solid;
    /*  text-align: center; */

    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.stackicon:hover {
    background: rgb(192, 192, 192, 0.1);
    border-radius: 3px;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.stackiconhover {
    margin: 12px auto;
    width: 48px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* background: #60a839; */
    border: #665888 0px solid;
    /*  text-align: center; */
    /* background: rgb(192, 192, 192, 0.1); */
    border-radius: 3px;
}

.stackiconhover:hover {
    background: rgb(192, 192, 192, 0.1);
    border-radius: 3px;
}

/* *********** SIDEBAR *********** */

.sidebar {
    margin: 0 auto;
    /* border: #73c990 2px solid; */
    float: left;

    min-width: 248px;
    border-left: rgb(30, 30, 30) 1px solid;
    border-right: rgb(30, 30, 30) 1px solid;
    background-color: #313131;


    /* width: 24.05%; */
    /* min-width: 240px; */
    /* height: 100%; */
    /* box-sizing: border-box; */
    /* border-right: rgb(27, 27, 27, 0.5) 1px solid; */
    align-content: space-between;
    padding: 0px 0px 0px 0px;
}

.sidebar-menu {
    margin: 0 auto;
    /* overflow: scroll; */
    overflow-y: auto;
    width: 100%;
    height: 100%;
    padding: 10px 10px 10px 10px;
    scrollbar-color: #525251 #313131 !important;
    scrollbar-width: thin !important;
    /* background-color: #665888; */
}

.sidebar-menu::-webkit-scrollbar {
    width: 6px;
    background-color: #313131;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: #525251;
}

.sidebar-menu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background-color: #313131;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

/* *********** SIDEBAR END *********** */

.page {
    /* border: solid 1px #665888; */
    /* min-width: 40%; */
    /* Заполняет ширину, увеличивая контейнер */
    flex-grow: 1;
    background-color: #2D2D2D;
}

.page-content {
    /* margin:0 auto; */
    /* border: #73c990 1px solid; */
    /* float: left; */
    /* box-sizing: border-box; */
    width: 100%;
    height: 100%;
    padding: 10px 10px 10px 10px;
    /* background-color: #665888; */
    overflow-y: auto;
    scrollbar-color: #525251 #313131 !important;
    scrollbar-width: thin !important;
}

.page-content::-webkit-scrollbar {
    width: 6px;
    background-color: #313131;
}

.page-content::-webkit-scrollbar-thumb {
    border-radius: 6px;
    /* background-color: #525251; */
    background-color: #242424;
}

.page-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background-color: #313131;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

/* *********** FOOTER *********** */

.footerbar {
    /* border: 1px solid #e06c75; */
    /* background-color: #313131; */
    /* color: rgb(178, 22, 29); */
    /* color: rgb(133, 16, 21); */
    /* color: rgb(21, 83, 158); */
    /* color: #675A89; */
    color: rgb(152, 152, 152, 0.3);
    /* text-shadow: 1px 0px 0px rgb(21, 83, 158, 0.5); */

    min-height: 38px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 12px;
    letter-spacing: 0.3px;

    /* 262626 */
    background-color: #262626;

    border-top: rgb(27, 27, 27, 0.5) 1px solid;
    border-left: rgb(30, 30, 30) 1px solid;
    border-right: rgb(30, 30, 30) 1px solid;
    border-bottom: rgb(30, 30, 30) 1px solid;
}

/* *********** FOOTER END *********** */