body {font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; font-size: 14px; font-weight: 300; color: #000000;}

a {color: inherit; text-decoration: none;}

:root {
  --color-red: red
}

img {max-width: 100%; max-height: 100%;}

/* Overlay */
#loaderOverlay {width: 100%; height: 100%; float: left; background-color: rgba(0,0,0,0.3); position: fixed; top: 0px; left: 0px; display: none; z-index: 1000;}
#loaderOverlay .inner {width: 100%; height: 100%; float: left; display: flex; justify-content: space-around; align-items: center;}
#loaderOverlay P {color: #FFF; font-size: 18px !important; font-weight: 500;}

.box {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.hidden {display: none;}
.line {width: 100%; float: left;}
.flexbox {display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex;}
.mainFrame {width: 1400px; margin: 0 auto;}
.burger {display: none;}

h1 {font-weight: 300; font-size: 32px;}


#page {min-height: 100vh; display: flex; flex-direction: column;}
#page .mainContentWrapper {flex: 1;}


#topLine {width: 100%; background-color: #f1d5a6; font-size: 13px;}
#topLine .inner {width: 100%; height: 36px; display: flex; justify-content: flex-end;}
#topLine .inner .loginReg {position: relative; display: flex;}
#topLine .inner .loginReg a {display: flex; align-items: center; padding: 5px 10px; color: #58595b; text-decoration: none;}
#topLine .inner .loginReg a:hover {background-color: #f1c57a;}
#topLine .inner .loginReg a svg {width: 26px; max-height: 26px; margin-left: 10px; fill: #f7941e;}
#topLine .inner .loginReg .subLinks {display: none; position: absolute; left: 0; top: 100%; width: 100%; background-color: #f7941e;}
#topLine .inner .loginReg .subLinks.show {display: block;}
#topLine .inner .loginReg .subLinks a {padding: 8px 10px; color: #ffffff; border-bottom: 1px solid #f1d5a6; font-size: 14px;}
#topLine .inner .loginReg .subLinks a:last-child {border: 0;}


#logo {width: 100%;}
#logo .inner {width: 100%; display: flex; justify-content: space-between; align-items: center;}
#logo .inner a {display: inline-block; padding: 20px 0;}
#logo .inner a img {display: block;}


#menu {width: 100%; background-color: #f7941e;}
#menu .inner {width: 100%; height: auto; min-height: 50px; display: flex;}
#menu .inner ul {margin: 0; padding: 0; list-style: none; display: flex;}
#menu .inner ul li {margin: 0; padding: 0; display: flex;}
#menu .inner ul li a {margin: 0; padding: 0 13px; display: flex; align-items: center; color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 14px; font-weight: 200;}
#menu .inner ul li a:hover {background-color: #d37e19;}
#menu .inner ul li.active a {background-color: #d37e19;}


#mainContent {width: 100%; padding: 20px 0;}
#mainContent .inner {width: 100%;}
#mainContent .inner .btnBack {width: 100%; float: left; margin: 20px 0 0 0;}
#mainContent .inner .btnBack a {font-weight: 600; color: #f7941e; text-decoration: underline;}
#mainContent .inner .btnBack a:hover {text-decoration: none;}
#mainContent .inner a {font-weight: 700; text-decoration: underline;}
#mainContent .inner a:hover {text-decoration: none;}



#nasiStudenti input[type="text"] {width: 100%; border: solid #aaaaaa 1px; border-radius: 4px; outline: 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
#nasiStudenti input[type="text"]:focus {border-color: black;}
#nasiStudenti select {width: 100%; border: solid #aaaaaa 1px; border-radius: 4px; outline: 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
#nasiStudenti select:focus {border-color: black;}


#nasiStudenti {width: 100%;}
#nasiStudenti .filtersBlock {width: 100%; margin: 0 0 20px 0;}
#nasiStudenti .filtersBlock.withOr {}
#nasiStudenti .text {width: 100%; display: inline-block; margin: 0 0 10px 0;}


#news {width: 100%; margin: 20px 0 0 0;}
#news .item {width: calc(25% - 15px); padding: 10px; color: #7d7f7e; background-color: #FFF; border: 1px #ccc solid; margin: 10px 20px 10px 0px; font-size: 14px; display: flex; flex-direction: column; justify-content: space-between; transition: all 200ms;}
#news .item .name {margin: 10px 0 0 0; font-weight: 600; color: #f7941e;}
#news .item .btn a {color: #f7941e; font-weight: 600;}


#banner {width: 100%; display: flex; justify-content: center;}


#footer {width: 100%; padding: 10px 0; margin: 20px 0 0 0; background-color: #f1d5a6; font-size: 13px; text-align: center; color: #58595b;}


#schoolSelection {width: 100%;}
#schoolSelection .item {width: 100%; margin: 10px 0; font-size: 19px; font-weight: 500;}
#schoolSelection .item input {width: 30px;}


.filtersBlock {width: 100%; display: flex; flex-wrap: wrap; gap: 20px;}
.filtersBlock .filter {width: calc(50% - 10px);}
.filtersBlock.withOr .filter {width: calc(50% - 10px - 30px);}
.filtersBlock.withOr .or {display: flex; width: 40px; font-size: 18px; font-weight: 600; background-color: #f1d5a6; align-items: center; justify-content: center; text-align: center;}

.filtersBlock .filter.moreInRow {display: flex; gap: 20px;}

.filtersBlock .resetForm {background-color: var(--color-red); color: white; padding: 4px 10px; display: inline-block; border-radius: 4px;}

.selectBlock {width: 100%; display: flex; flex-direction: column;}
.selectBlock .title {}
.selectBlock .data {position: relative;}
.selectBlock .data a.clear {position: absolute; right: 5px; top: 6px; background-color: #e4e4e4; border-radius: 4px; display: flex; align-items: center;}
.selectBlock .data a.clear span {height: auto; padding: 0 5px 2px 5px; color: #999999; font-size: 1em; font-weight: bold; line-height: 1; display: flex; align-items: center;}


.table-1 {width: 100%; border-collapse: collapse; border: 1px solid #f1d5a6;}
.table-1 thead tr th {text-align: left; padding: 8px 10px; background-color: #f1d5a6;}
.table-1 tbody tr:nth-child(even) {background: #eaeaea;}
.table-1 tbody tr td {font-size: 12px; padding: 8px 10px;}


.select2-container--default .select2-selection--single .select2-selection__rendered {color: black !important;}
.select2-container .select2-selection--single {height: 32px !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 30px !important;}


.mb-20 {margin-bottom: 20px;}



.color-red {color: var(--color-red);}

.bg-red {background-color: var(--color-red);}