/* -------------------------------  RESET  ------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl,
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio,
video {margin: 0; padding: 0; border: 0; vertical-align: baseline;}

html {line-height: 1.15; -webkit-text-size-adjust: 100%;}
body {margin: 0;}
main {display: block;}
h1 {font-size: 2em; margin: 0.67em 0;}
hr {box-sizing: content-box; height: 0; overflow: visible;}
pre {font-family: monospace, monospace; font-size: 1em;}
a {background-color: transparent;}
b, strong {font-weight: bolder;}
code, kbd, samp {font-family: monospace, monospace; font-size: 1em;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none;}
button, input, optgroup, select, textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner,  [type="button"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none; padding: 0;}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em;}
legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}
progress {vertical-align: baseline;}
textarea {overflow: auto;}

[type="checkbox"], [type="radio"] {box-sizing: border-box; padding: 0;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield; outline-offset: -2px;}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;}

::-webkit-input-placeholder {color: #8F97A6;}
:-moz-placeholder {color: #8F97A6; opacity: 1;}
::-moz-placeholder {color: #8F97A6; opacity: 1;}
:-ms-input-placeholder {color: #8F97A6;}
::-ms-input-placeholder {color: #8F97A6;}
::placeholder {color: #8F97A6;}

input {outline:none;}
* {-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type=text], input[type=submit], textarea {-webkit-appearance: none;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out; -webkit-transition-delay: 9999s;
}
select {outline: 0;}
img {width: 100%;}
:focus {outline: none;}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type=number] {-moz-appearance:textfield;}

/* ------------------------------- UI ELEMENTS ------------------------------- */

/* common */

body {
    font-family: 'Roboto', sans-serif; font-weight: 400; background: #fff; font-size: 14px;
    line-height: 1.2; color: #160F0F; width: 100%; min-width: 900px; overflow-y: scroll;
}

.wrap {max-width: 1600px; padding: 0 30px; margin: 0 auto;}
#table {margin-top: 20px; margin-bottom: 150px;}

@media only screen and (max-width: 800px) {
    .wrap {padding: 0 20px;}
}

/* icons */

i {
    display: inline-block; font-family: 'glyphicons', sans-serif; font-size: 13px; font-style: normal;
    text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.icon_close:before {content: '\E807';}
.icon_ellipsis:before {content: '\E899';}
.icon_search:before {content: '\E826';}

/* buttons */

.btn_basic {
    width: 100%; font-size: 14px; color: #FFFFFF; background-color: #16145A; display: block; border: none;
    border-radius: 20px; padding: 10px 35px; cursor: pointer; text-align: center; transition: all 0.35s ease-out;
}
.btn_basic:hover {background-color: #273171;}

.btn_sub {
    display: inline-flex; width: auto; font-size: 14px; color: #FFFFFF; background-color: #16145A; border: none; margin-right: 10px;
    border-radius: 18px; height: 36px; line-height: 36px; padding: 0 35px; cursor: pointer; transition: all 0.35s ease-out;
}
.btn_sub:hover {background-color: #273171;}

.btn_modal {
    width: 100%; font-size: 14px; color: #FFFFFF; background-color: #16145A; border: none; text-align: center; border-radius: 8px;
    height: 36px; line-height: 36px; padding: 0 35px; cursor: pointer; transition: all 0.35s ease-out;
}
.btn_modal:hover {background-color: #273171;}
.btn_modal.disabled {background-color: #e0e0e0; color: #53565E; cursor: default;}

.btn_modal.light {color: #53565E; background: #F1F1F1;}
.btn_modal.light:hover {background: #e0e0e0;}

/* inputs */

.input_basic {
    width: 100%; border: none; border-radius: 20px; background-color: #F7F7F7; padding: 10px 12px; font-size: 16px; text-align: center;
}

.input_group {
    display: inline-flex; position: relative; background: #F7F7F7; height: 36px; border-radius: 18px; width: 100%; max-width: 240px;
}
.input_group > input {border: 0; background: none; width: 100%; height: 36px; line-height: 36px; padding: 0 20px 0 44px;}
.input_group > input:focus {color: #111418;}
.input_group > i {position: absolute; top: 1px; left: 15px; font-size: 16px; line-height: 36px; padding-right: 20px; color: #8F97A6;}

.input_group_modal {padding-top: 20px;}
.input_group_modal:first-child {padding: 0;}
.input_group_modal > div {font-size: 12px; font-weight: 500; color: #53565E; padding-bottom: 10px; padding-left: 10px;}
.input_group_modal input {
    border: 0; background: #F7F7F7; height: 36px; line-height: 36px; width: 100%; border-radius: 8px; padding: 0 10px;
}
.input_group_modal input.error {background: #ffcbcb;}
.input_group_modal select {border: 1px solid #ccc; height: 36px; line-height: 36px; width: 100%; border-radius: 8px; padding: 0 10px;}

/* main menu */

.main_menu {display: flex; justify-content: space-between; padding: 20px 0 30px 0;}
.main_menu > div > a {
    color: #53565E; font-weight: 500; font-size: 14px; line-height: 140%; margin-right: 24px; padding-top: 4px;
    padding-bottom: 4px; border-bottom: 2px solid #fff; cursor: pointer; transition: all 0.2s ease-in-out;
    text-decoration: none;
}
.main_menu > div > a:hover, .main_menu > div > a.active {
    color: #111418; border-color: #0052CC;
}
.main_menu > div > a:last-child {margin-right: 0;}

/* menu popup */

.menu_popup {
    width: 140px; text-align: left; background: #fff; pointer-events: none; opacity: 0; transform: translateY(10px);
    filter: drop-shadow(0px 4px 14px rgba(98, 113, 126, 0.24)); border-radius: 6px; cursor: default; z-index: 999; position: absolute;
    top: 42px; right: -5px; -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.menu_popup.active {pointer-events: auto; opacity: 1; transform: translateY(0px);}
.menu_popup:after {
    content: ''; position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; transform: rotate(45deg); background: #fff;
    z-index: 1;
}

.menu_popup > div {
    line-height: 38px; padding: 0 15px; border-radius: 6px; font-size: 13px; color: #515764; position: relative; z-index: 10;
    cursor: pointer;
}
.menu_popup > div:hover {background: #F7F7F7;}

/* sub header */

.sub_header {display: flex; width: 100%; align-items: center;}
.sub_header > div:nth-child(1) {width: auto; min-width: 310px;}
.sub_header > div:nth-child(2) {width: 100%; text-align: right;}

/* tables */

table {width: 100%; border-collapse: collapse; margin: auto;}
table th {font-weight: 400; font-size: 12px; color: #929BAD; padding: 12px 10px 12px 0; text-align: left;}
table th:first-child {padding-left: 10px;}
table td {font-weight: 400; font-size: 14px; color: #1B1F26; padding: 12px 10px 12px 0; text-align: left; vertical-align: top;}
table td:first-child {font-weight: 500; padding-left: 10px;}
table tr {position: relative; vertical-align: top;}
table tr:before {
    content: ''; width: 100%; position: absolute; bottom: 0; left: 50%; height: 1px; background-color: #DFE1EB;
    transform: translate(-50%, 0); z-index: 3;
}
table tr:hover td {background-color: #F7F7F7;}
table .right_column {position: relative; text-align: right;}
table .right_column > i {padding: 0 5px; cursor: pointer; font-size: 15px;}

table .green {color: #0B732A;}
table .gray {color: #777;}

/* paginator */

#paginator {display: inline-flex; margin-right: 20px; align-items: center;}
#paginator a {
    color: #313132; text-decoration: none; padding: 0; width: 34px; height: 34px; border-radius: 18px; line-height: 32px;
    display: inline-block; border: 1px solid #bbb; text-align: center; margin-right: 4px;
}
#paginator a:hover {color: #fff; background: #16145a; border: 1px solid #16145a;}
#paginator a:last-child {margin: 0;}
#paginator a.active {color: #fff; background: #16145a; border: 1px solid #16145a;}

/* ------------------------------- MODAL ------------------------------- */

#modal {
    position: fixed; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
    display: none; opacity: 0; filter: alpha(opacity=0); background: rgba(0, 0, 0, 0.8); z-index: 1000;
}
#modal.active {display: block; opacity: 1; filter: alpha(opacity=100);}

#modal_container {
    overflow-y: scroll; z-index: 1001; top: 0; bottom: 0; left: 0; width: 100%; height: 100%;
    text-align: left; direction: ltr; position: fixed;
}
#modal_overlay {position: absolute; width: 100%; min-height: 100%; left: 0; top: 0;}

.modal_head {width: 100%; height: 50px; background: #fff; padding-top: 0; border-radius: 8px 8px 0 0;}
.modal_head i {color: #0E2C40; font-size: 16px; cursor: pointer; position: absolute; top: 16px; right: 16px; z-index: 50;}
.modal_head span {
    font-size: 22px; font-weight: 400; color: #18181C; padding: 0 0 0 20px; letter-spacing: 0; overflow: hidden;
    height: 50px; line-height: 50px; text-overflow: ellipsis; white-space: nowrap;
}

.modal_body {background-color: #FFFFFF; padding: 0 30px 30px 30px; border-radius: 0 0 8px 8px;}

.modal_controls {padding-top: 40px; display: flex;}
.modal_controls > div {width: 50%;}
.modal_controls > div:nth-of-type(1) {padding-right: 10px;}
.modal_controls > div:nth-of-type(2) {padding-left: 10px;}

#modal_content {
    position: relative; height: auto; margin: 55px auto 20px; padding: 0; border-radius: 3px;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#modal_errors {
    display: none; margin-bottom: 20px; border-radius: 5px; border: 1px solid #b87b7b; background: #ffd4d4; color: #851313;
    padding: 20px;
    margin-top: 20px;
}
#modal_errors.active {display: block;}

/* ------------------------------- LOGIN ------------------------------- */

.login_wrap {width: 280px; margin: 25vh auto 15px;}

#login_note {
    color: #d90000; min-height: 30px; padding-bottom: 20px; text-align: center; -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
}
#login_note.fade {opacity: 0;}

.login_controls > div {margin-top: 25px;}