* { margin: 0; padding: 0; outline: none; box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: 'main_light'; font-size: 13px; display: flex; flex-direction: column; }
main { background: var(--bg-main); flex: 1; padding: 20px; }

.transition { transition: all .3s ease-in-out; }
.flex { display: flex; align-items: flex-start; gap: 10px; }
.flex-stretch { align-items: stretch; }
.flex-center { align-items: center; }
.flex-bottom { align-items: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex1 { flex: 1; }
.flex2 { flex: 2; }
.flex-column { display: flex; flex-direction: column; height: 100%; }
.red { color: #ef4141; }
.green { color: #4ac301; }
.gray { color: #888; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.nowrap-container { display: table; table-layout: fixed; width: 100%; }
.center { text-align: center; }
.right { text-align: right; }
.center-items { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
.center-div { margin: 0 auto; }
.m5 { margin: 5px 0; }
.m10 { margin: 10px 0; }
.m20 { margin: 20px 0; }
.m40 { margin: 40px 0; }
.w100 { width: 100%; }
.h100 { height: 100%; }
.overflow { overflow: auto; }
.relative { position: relative; }
.coming-soon { font-size: 50px; font-weight: bold; color: #d6d6d6; }
.dashed-underline { text-decoration: underline; text-decoration-style: dashed; }
.close { width: 20px; height: 20px; background: url('../../img/close.svg') no-repeat; }

a { text-decoration: none; color: var(--link); }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
table { border: none; box-shadow: var(--box-shadow); border-collapse: collapse; }
th, td { padding: 4px 10px; font-size: 12px; position: relative; }
th { background: var(--table-th); text-align: left; border-right: 1px solid var(--th-border); color: var(--table-th-color) }
td { border: none; text-align: left; border-right: 1px solid var(--td-border); }
tr { background: transparent; cursor: default; }
tr:nth-child(2n) { background: var(--td-bg-1); }
tr:nth-child(2n+1) { background: var(--td-bg-2); }
input[type="text"], input[type="password"], input[type="number"], textarea, select { 
    margin: 5px 0; border: 1px solid var(--input-border); border-radius: 3px; padding: 5px 10px; flex: 1; width: 100%;
    color: var(--input-color); background: var(--input-bg); font-family: 'main', sans-serif; }
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus {
    border-color: var(--input-focus); }
input[type="checkbox"], input[type="radio"] { top: 2px; position: relative; }
textarea { height: 100px; resize: none; }
.btn, button { cursor: pointer; padding: 4px 12px; text-align: center; border: none; color: #aaa;
       background: linear-gradient(to bottom, #2f3133, #161819); border-radius: 5px;
       box-shadow: 0px 1px 4px -2px #333; margin: 5px 0; font-family: 'main_light', sans-serif;
       position: relative; transition: all .3s ease-in-out; display: inline-block; line-height: 20px; }
.btn:hover, button:hover { background: linear-gradient(to bottom, #393c3e, #222526); }
.btn-green, .btn-green:disabled:hover { background: linear-gradient(to bottom, #0dc500, #076d00); color: #fff !important; }
.btn-green:hover { background: linear-gradient(to bottom, #12df03, #0b8d02); }
.btn-red, .btn-red:disabled:hover { background: linear-gradient(to bottom, #ab0000, #890000); color: #fff !important; }
.btn-red:hover { background: linear-gradient(to bottom, #d10202, #a30101); }
.btn-blue, .btn-blue:disabled:hover { background: linear-gradient(to bottom, #39c1ea, #2095b9); color: #fff !important; font-weight: bold; text-shadow: none; }
.btn-blue:hover { background: linear-gradient(to bottom, #3bc2eb, #1984a5); }
.btn-white, .btn-white:disabled:hover { background: linear-gradient(to bottom, #f0f0f0, #d6d6d6); color: #000 !important; }
.btn-white:hover { background: linear-gradient(to bottom, #e0e0e0, #c6c6c6); }
.btn:disabled { cursor: default; }
table .btn, table button, .btn-small, table textarea, table input[type="text"], table input[type="number"], select { zoom: 0.8; margin: 0; }
.btn-margin { margin: 5px; }

::placeholder { color: var(--placeholder); font-style: italic; }
::-webkit-scrollbar { width: 5px; height: 7px; }
::-webkit-scrollbar-track { background-color: transparent; display: none; }
::-webkit-scrollbar-thumb { border-radius: 4px; background-color: var(--scroll); }
::-webkit-scrollbar-button { background-color: transparent; display: none; }
::-webkit-scrollbar-corner { background-color: transparent; display: none; }

.panel { background: var(--panel-bg); margin: 20px; border-radius: 5px; padding: 10px 20px; position: relative; border: 1px solid #e0e0e0; }
.panel > h1 { font-size: 20px; color: var(--panel-header); margin-bottom: 10px; text-align: center; }
.panel ul { list-style: disc; }
.flex1 > .panel { margin: 20px 0; }
.grid-form { display: grid; grid-template-columns: 30% 70%; width: 100%; }
.grid-form > div { display: contents; }
.grid-form > div > div { display: flex; align-items: center; }
.grid-form input[type="text"], .grid-form input[type="password"], .grid-form input[type="number"], .grid-form textarea, .grid-form select { width: 100%; }
.grid-form input[type="checkbox"] { margin: 5px; }
.modal { display: none; }
.fade { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); z-index: 99999; }
.fade .panel { min-width: 250px; overflow: auto; }
.close { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; display: block;
         background: url(../img/close.svg) 0/100% no-repeat; cursor: pointer; }

.tabs { display: inline-block; width: 100%; }
.tabs > div { padding: 10px 20px; }
.tabs > ul:after { content: ""; display: block; clear: both; height: 1px; background: var(--tabs-bg); }
.tabs > ul li { cursor: pointer; display: block; float: left; padding: 7px 15px; color: var(--tabs-text); transition: all .3s ease-in-out; }
.tabs > ul li.active, .tabs ul li.active:hover { background: var(--tabs-bg); color: var(--tabs-text-active); border-radius: 5px 5px 0 0; }
.tabs > ul li:hover { color: var(--tabs-text-hover); }

header { height: 40px; color: var(--text); flex: none; display: flex; align-items: center; padding: 0 20px; border-bottom: var(--border); background: #fff; }
header a { color: var(--text); }
nav * { transition: all .3s ease-in-out; }
nav li { display: block; }
header nav li a { display: block; padding: 0 20px; color: var(--text); }
header nav li a:hover { color: var(--text); }
nav li a { display: block; padding: 0 20px; color: var(--nav-color); }
nav li a:hover { color: var(--nav-hover-color); }
nav li a img { height: 20px; }
nav a.drop { padding-right: 27px; background: url(../../img/dropdown.svg) no-repeat right 10px center; }
nav ul ul { visibility: hidden; opacity: 0; z-index: 9999; position: absolute; width: 160px; }
nav li li { width: 100%; margin: 0; }
nav li li a { background: #212427; border-bottom: 1px solid rgba(52, 52, 52, 0.8); display: block; margin: 0; padding: 10px 15px; color: #ddd; }
nav li li a.drop { padding-left: 15px; background: #212427 url(../../img/dropdown-right.svg) no-repeat right 12px; }
nav ul li:hover > ul { visibility: visible; opacity: 1; }
nav ul ul ul { left: 140px; top: 0; }
header > nav > ul { display: flex; align-items: center; }
.nav-vertical > nav { position: absolute; left: 0; top: 40px; width: 200px; z-index: 1000; }
.nav-vertical > nav a:hover { background: var(--nav-hover-bg); }
.nav-vertical > main { margin-left: 200px; }
nav li { border-top: 1px solid var(--nav-border); }
header li { border-top: none; }
nav li a { padding: 10px 20px; }
.menu-icon { display: none; }
.menu-icon a { font-size: 2.5em; margin: 0 10px; color: #999; }
.avatar { height: 20px; border-radius: 20px; }
footer { padding: 10px; background: #222; text-align: center; color: #ddd; }

.pagination a { display: inline-block; color: var(--pag-text); padding: 12px; font-size: 14px; font-weight: 400; position: relative; }
.pagination a:before { background: var(--pag-bg); border-radius: 50%; content: ""; cursor: pointer; left: 50%; position: absolute;
                       transform: translate(-50%, -50%); transition: all 170ms linear; top: 50%; width: 0; height: 0; }
.pagination a.active:before, .pagination a:hover:before { width: 30px; height: 30px; }

.editable-select { position: relative; display: inline-block; }
.select-input { width: 200px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background: var(--input-bg) url(../../img/dropdown.svg) no-repeat right / 10% 50% !important; }
.options-container { display: none; position: absolute; width: 100%; max-height: 150px; overflow-y: auto; border-radius: 0 0 4px 4px;
                     background-color: var(--edit-select-bg); z-index: 10; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); }
.option { padding: 8px; cursor: pointer; transition: all .3s ease-in-out; }
.option:hover { background-color: var(--edit-select-hover); }

.accordion-item { margin-bottom: 10px; }
.accordion-header { padding: 10px; cursor: pointer; border: 1px solid var(--input-border); font-weight: bold;
                    background: var(--input-bg) url(../../img/dropdown.svg) no-repeat right / 15% 50% !important; }
.accordion-content { padding: 10px; display: none; border: 1px solid var(--td-border); border-top: none; border-radius: 0 0 5px 5px; }
.accordion-item.active .accordion-header { background: var(--input-bg) url(../../img/dropdown-up.svg) no-repeat right / 15% 50% !important; }