/* TODO: Переработать файл, разбить на более мелкие. Сделать основной файл в который все остальные будут подключаться. */

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito Sans', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, label, input, select{
    font-family: 'Nunito Sans', sans-serif;
    font-style: normal;
    text-decoration: none;
}

.red_bg{
    background-image: url("../Imgs/Background/bg.png");
    background-repeat: repeat;
    background-size: cover;
}


/*login page*/
.center-screen {
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.bg {
    background-image: url("../Imgs/Background/bg.png");
    background-repeat: no-repeat;
	background-size: cover;
    width: 100vw;
}
.shadow {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}

.radius {
    border-radius: 20px;
}

.div-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.logo-img {
    width: 200px;
}

.login-form {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
}
.login-form-style {
    margin-top: 20px;
    width: 100%;
}
.login-form__title {
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
}

.input{
    border: solid black 2px;
    border-radius: 5px;
    width: 5%;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14pt;
    font-weight: 400;
    margin: 0;
    padding: 0;
    cursor: text;
}
label {
    display: block;
    margin: 5px 0;
}
p{
    margin: 5px;
    padding: 5px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12pt;
    font-weight: 400;
    color: black;
}
textarea{
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12pt;
}
.auth_p{
    margin-top: 15px;
}
.error_text{
    color: #EA232A;
    margin-left: 0;
    padding-left: 0;
}
/* TODO: переделать данный класс под более универсальный(используется в addUserPage, index) */
.auth_input{
    width: 100%;
    padding: 10px 0 10px 0;
    font-size: 16px;
    border: 2px solid #000000;
    border-radius: 10px;
    text-indent: 10px;
}
.auth_input:hover{
    border: 2px solid #EA232A;
}
.auth_input:focus-visible{
    border: 2px solid #EA232A;
    outline: none;
}
.auth_submit_input{
    width: 100%;
    margin-top: 15px;
    padding: 15px;
    font-size: 18px;
    background-color: #EA232A;
    color: #fff;
    border: none;
    border-radius: 10px;
}
.auth_submit_input:hover {
    text-decoration: underline;
    cursor: pointer;
}

.container{
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container_size_large{
    flex-direction: column;
}

.map{
    margin: 2% 0 0 0;
    width: 80vw;
    height: 30vw;
    overflow: hidden;
    border: solid cornflowerblue 2px;
    border-radius: 2vw;
}

.container_map{
    margin: 2% 0;
    width: 80vw;
    height: auto;
    padding: 2%;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 25px;
}

.nav_container_map{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav_container_map_btns{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Стили для меню на главной странице */
.menu_container {
    position: relative;
}

.menu_button {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-align: center;
    font-size: 12pt;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    border: none;
    border-radius: 5px;
    padding: 10px;
    min-width: 100px;
    min-height: 42px;
    color: white;
    background-color: #EA232A;
    transition: min-width 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
}

.menu_button.open {
    min-width: 200px;
    transition: min-width 0.3s ease;
}

.menu_list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    color: black;
    display: none;
    flex-direction: column;
    align-items: center;
    border: solid #EA232A 2px;
    border-radius: 5px;
}

.menu_list.open {
    display: flex;
    animation: rollOut 0.3s forwards;
}

.menu_list.closed{
    animation: rollUp 0.3s forwards;
}

.menu_item {
    padding: 10px 0;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    color: black;
    text-decoration: none;
}
.menu_item:hover {
    background-color: #EA232A;
    color: white;
}

@keyframes rollOut {
    0% {
        opacity: 10%;
        transform: translateY(-20%);
    }
    100% {
        opacity: 100%;
        transform: translateY(2%);
    }
}

@keyframes rollUp {
    0% {
        opacity: 100%;
        transform: translateY(2%);
    }
    75%{
        opacity: 0;
    }
    100% {
        opacity: 0;
        transform: translateY(-20%);
    }
}

/*lazy load(just div that covers all screen).TO DO: place gif instead of just block*/
.lazyLoad_div{
    width: 100vw;
    background: dimgray;
    height: 100vh;
    position: absolute;
    opacity: 40%;
    top: 0;
    z-index: 9999;
    display: block;
}

/*history table styles*/
#div_table{
    width: calc(80vw + 4%);
    margin: 2% 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav_container_table{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    width: 100%;
    border-radius: 25px;
    margin-bottom: 4%;
}
.div_pages_nav_table{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}


.div_pages_btns_nav_table{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}

.div_filters_nav_table{
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    width: 40%;
    font-size: 14pt;
    font-weight: 800;
}

.ellipsis{
    font-size: 14pt;
    font-family: "Consolas", monospace;
    letter-spacing: -1pt;
}

#history_table{
    width: 100%;
    border: none;
    margin-bottom: 20px;
    border-collapse: separate;
	background: white;
	border-radius: 20px
}

#history_table thead, th{
    font-weight: bold;
    text-align: left;
    border: none;
    padding: 10px 15px;
    background: #EDEDED;
    font-size: 14px;
    border-top: 1px solid #ddd;
}

#history_table tr th:first-child, #history_table tr td:first-child{
    border-left: 1px solid #ddd;
}

#history_table tr th:last-child, #history_table tr td:last-child{
    border-right: 1px solid #ddd;
}

#history_table thead tr th:first-child{
    border-radius: 20px 0 0 0;
}

#history_table thead tr th:last-child{
    border-radius: 0 20px 0 0;
}

#history_table tbody td{
    text-align: left;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    vertical-align: top;
}

#history_table tbody tr:nth-child(even){
    background: #f8f8f8;
}

#history_table tbody tr:last-child td{
    border-bottom: 1px solid #ddd;
}

.table_first_row_td{
    border-radius: 0 0 0 20px;
}

.table_last_row_td{
    border-radius:  0 0 20px 0;
}

/*#history_table tbody tr:last-child td:first-child{*/
/*    border-radius: 0 0 0 20px;*/
/*}*/

/*#history_table tbody tr:last-child td:last-child{*/
/*    border-radius:  0 0 20px 0;*/
/*}*/

.table_base{
    width: 100%;
    margin-bottom: 20px;
    border-collapse: separate;
    background: white;
    border-radius: 20px;
    table-layout: fixed;
    border: solid lightgrey 2px;
    border-spacing: 5px;
}
.table_base thead th{
    font-weight: bold;
    text-align: center;
    border: none;
    padding: 10px;
    border-radius: 20px;
    font-size: 14pt;
    border-top: 1px solid #ddd;

}
.table_base tbody td{
    text-align: left;
    border: none;
    padding: 10px;
    border-radius: 20px;
    font-size: 14pt;
    vertical-align: middle;
}
.table_base td.inactive label span{
    border: solid lightgrey 2px;
}

/*styles for status buttons(below map, above history table)*/
.button{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
}
.status_button{
    border: none;
    border-bottom: 2px solid #ea232a;
    font-size: 14pt;
    margin-right: 25px;
    margin-top: 25px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    background: transparent;
    color: black;
    font-family: 'Nunito Sans', sans-serif;
}
.status_button:hover{
    background: #ea232a;
    color: white;
}
.status_button_active{
    background: #ea232a;
    color: white;
}
.status_button_active:hover{
    background: transparent;
    color: black;
}

.location_button{
    border: none;
    border-bottom: 2px solid #ea232a;
    font-size: 12pt;
    margin-right: 25px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    background: white;
    color: black;
}

.location_button_active{
    background: #ea232a;
    color: white;
}

.location_button:hover{
    color: white;
    background: #ea232a;
}

.signin_button{
    border: none;
    border-bottom: 2px solid #ea232a;
    font-size: 14pt;
    padding: 10px;
    margin-left: 50px;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    background: #ea232a;
}

.signin_button:hover{
    text-decoration: underline;
}

.button_nav_table{
    border: none;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    background-color: white;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 15px;
    padding: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.close_button_table{
    background-image: url("../Imgs/ExitIcon/times-circle.png");
    margin: 1.5%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-size: contain;
    border: none;
}
.close_button_table:hover{
    background-image: url("../Imgs/ExitIcon/times-circle-red-white.png");
}

.prev_button_table{
    background-image: url("../Imgs/Pagination/chevron-left-thin.png");
    margin-left: 0;
    margin-right: 15px;
}
.prev_button_table:hover{
    background-image: url("../Imgs/Pagination/chevron-left-thin-red.png");
}

.next_button_table{
    background-image: url("../Imgs/Pagination/chevron-right-thin.png");
    margin-right: 0;
    margin-left: 15px;
}
.next_button_table:hover{
    background-image: url("../Imgs/Pagination/chevron-right-thin-red.png");
}

.start_button_table{
    background-image: url("../Imgs/Pagination/chevron-double-left-thin.png");
    margin-right: 15px;
    margin-left: 0;
}
.start_button_table:hover{
    background-image: url("../Imgs/Pagination/chevron-double-left-red-thin.png");
}

.last_button_table{
    background-image: url("../Imgs/Pagination/chevron-double-right-thin.png");
    margin-left: 15px;
}
.last_button_table:hover{
    background-image: url("../Imgs/Pagination/chevron-double-right-thin-red.png");
}

.page_button_table{
    background: none;
    border: none;
    font-size: 14pt;
    color: black;
    padding: 5px;
    margin: 5px;
}

.page_button_table:hover{
    border: solid black 1px;
    border-radius: 25px;
    color: #ea232a;
    text-decoration: underline;
    text-decoration-color: #ea232a;
}

.page_button_table_active{
    border: solid black 1px;
    border-radius: 25px;
    text-decoration: underline;
    text-decoration-color: #ea232a;
}

.filter_button_table{
    border: none;
    border-bottom: 2px solid #ea232a;
    font-size: 14pt;
    padding: 10px;
    margin-left: 50px;
    border-radius: 5px;
    cursor: pointer;
    background: transparent;
    color: black;
}
.filter_button_table:hover {
    color: white;
    background-color: #ea232a;
}

.reset_filter_button{
    border: none;
    font-size: 14pt;
    margin-left: 25px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    background: #EA232A;
    color: white;
}
.reset_filter_button:hover{
    text-decoration: underline;
}

.select{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.select_oilwells{
    border: solid black 2px;
    border-radius: 5px;
    padding: 10px;
    font-size: 12pt;
    margin-left: 10px;
    margin-right: 20px;
}

/*.select_account{
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-align: center;
    font-size: 12pt;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    border: none;
    border-radius: 5px;
    padding: 10px;
    min-width: 100px;
    min-height: 42px;
    color: white;
    background-color: #EA232A;
}
.select_account:hover{
    text-decoration: underline;
}
.select_account:hover option{
    color: black;
    background-color: white;
}
.select_account:focus-visible{
    outline: none;
    background-color: #EA232A;
    color: white;
}
.select_account:focus-visible option{
    background-color: white;
    color: black;
}*/

.select_date{
    border: solid black 2px;
    border-radius: 5px;
    padding: 10px;
    font-size: 12pt;
    margin-left: 10px;
}

/* Модальное окно */

.modal_container_background{
    display: block;
    position: fixed;
    z-index: 1;
    padding: 100px 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    overflow: auto;
    box-sizing: border-box;
}

.modal_container{
    position: relative;
    background-color: white;
    margin: auto;
    border-radius: 25px;
    width: fit-content;
    min-height: 30%;
    min-width: 40%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    padding: 0;
    z-index: 100;
}

.header_modal_container{
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    border-bottom: solid lightgrey 1px;
}

.body_modal_container{
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

.footer_modal_container{
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    width: 100%;
    border-radius: 0 0 25px 25px;
}

.big_modal{
    min-height: 50%;
    min-width: 70%;
    max-width: 90%;
}

.modal_button_filter{
    border: none;
    border-bottom: 2px solid #ea232a;
    font-size: 14pt;
    padding: 10px;
    margin: 25px 25px 25px 25px;
    border-radius: 5px;
    cursor: pointer;
    background: white;
    color: black;
}
.modal_button_filter:hover{
    color: white;
    background: #ea232a;
}

.modal_button_controls{
    color: white;
    background: #ea232a;
    margin: 25px 0 25px 25px;
}
.modal_button_controls:hover{
    text-decoration: underline;
}

.period_button_filter{
    border: none;
    border-bottom: 2px solid #ea232a;
    font-size: 14pt;
    padding: 10px;
    margin-left: 15px;
    border-radius: 5px;
    cursor: pointer;
    background: white;
    color: black;
}
.period_button_filter:hover{
    color: white;
    background: #ea232a;
}
.period_button_filter active{
    color: white;
    background: #ea232a;
}
.period_button_filter active:hover{
    color: black;
    background: white;
}

.close_modal_button{
    background-image: url("../Imgs/ExitIcon/times-circle.png");
    background-color: white;
    margin: 25px;
    padding: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
}
.close_modal_button:hover{
    background-image: url("../Imgs/ExitIcon/times-circle-red-white.png");
}

.label{
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14pt;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.modal_label_filter{
    margin: 15px 0 15px 15px;
    padding: 10px;
}


.modal_input_filter{
    margin: 10px;
    width: fit-content;
    padding: 5px;
}
.modal_input_filter:focus{
    border: none;
    outline: solid #ea232a 2px;
}
.modal_input_filter:last-child{
    margin-right: 25px;
}


.modal_select_filter{
    width: 50%;
    color: black;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14pt;
    font-weight: 400;
    border: solid black 2px;
    margin: 25px;
    padding: 10px;
}

.modal_select_filter:hover{
    border: solid #ea232a 2px;
}

.modal_select_filter:focus{
    border: solid #ea232a 2px;
}

.div_modal_divider{
    border-right: solid lightgrey 1px;
}

/* Модальное окно с ошибкой */
.error_modal_h3{
    max-width: 800px;
    padding: 25px;
    text-align: center;
}



/* Выпадающее меню */
.dropdown{
    position: relative;
    display: flex;
    background-color: white;
    border: solid 2px #EA232A;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.dropdown_inner{
    position: relative;
    background-color: white;
    border-bottom: solid 1px black;
    height: 20%;
    width: 100%;
}

.dropdown_element{
    position: relative;
    color: black;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14pt;
    font-weight: 400;
    width: 100%;
    height: 100%;
}

/*Стили страницы отчетов, "report"*/
.main_container{
    width: 100vw;
    height: auto;
    background-repeat: repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: calc(100vw - 88%) 0 0 0;

}
.top_container{
    width: 80%;
    border: solid black 2px;
    border-radius: 25px;
    margin-top: 2%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.top_container h2{
    margin-top: 30px;
}
.report_main_fields{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 25px 25px 25px;
    width: 80%;
}
.report_main_fields.first_row{
    margin-top: 25px;
}
.report_main_fields.second_row{
    margin-bottom: 60px;
}
.report_main_fields.third_row{
    margin-bottom: 60px;
}
.report_field{
    margin-left: 25px;
    width: 30%;
    font-size: 1vw;
}
.report_field:first-child{
    margin: 0;
}
.report_field_header label{
}
.checkbox_container {
    display: flex;
    justify-content: left;
    align-items: center;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: left;
    margin-right: 10px;
}
.checkbox_container input{
    position: relative;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark{
    position: relative;
    display: block;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: white;
    border: solid black 2px;
    border-radius: 5px;
}
.checkbox_container:hover input ~ .checkmark {
    border: solid #EA232A 2px;
}
.checkbox_container input:checked ~ .checkmark {
    background-color: #EA232A;
    border-radius: 5px;
    border: #EA232A solid 2px;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkbox_container input:checked ~ .checkmark:after {
    display: block;
}
.checkbox_container .checkmark:after {
    left: 6px;
    top: 0px;
    width: 7px;
    height: 14px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.report_field_button{
    font-size: 1vw;
    width: 80%;
    text-align: left;
    padding: 12px;
    border: solid 2px #EA232A;
    border-radius: 5px;
    background-color: white;
}
.button.report_field_button.inactive_button{
    padding: 12px;
    background-color: white;
    border: solid 2px lightgrey;
}

.button.report_field_button.input:focus-visible{
    outline: none;
}
/* Для input[type="date"] в браузерах на базе Chrome для работы со значком календаря */
.button.report_field_button.input::-webkit-calendar-picker-indicator{
    cursor: pointer;
}
.button.report_field_button.inactive_button.input::-webkit-calendar-picker-indicator{
    background-image:
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23d3d3d3" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

.field_name{
    font-size: 12pt;
    font-weight: 600;
}
.first_row{
    order: 1;
}
.second_row{
    order: 2;
}
.third_row{
    order: 3;
}
.fourth_row{
    order: 4;
}
.measurements_container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: auto;
    margin: 0 auto;
}

.measurement_field{
    display: flex;
    justify-content: center;
    align-items: center;
}

.report_buttons_container{
    width: 80%;
    justify-content: space-evenly;
    margin-top: 30px;
}
.report_button{
    width: 18%;
    font-size: 12pt;
    padding: 15px;
    border-radius: 5px;
    border: none;
    background-color: #EA232A;
    color: white;
}
.report_button:hover{
    text-decoration: underline;
}

.employee_report_button{
    background-color: white;
    border: solid 2px black;
}
.report_modal_container{
    flex-wrap: wrap;
    width: 100%;
    padding: 2%;
    flex-direction: column;
}
.report_modal_table_tbody td{
    vertical-align: top;
    border: solid black 1px;
    padding-right: 10px;
}
.report_label_container{
    width: auto;
}
.report_label_container.flex.flex_center label{
    margin-right: 0;
}
.report_label_container.flex.flex_center p{
    font-size: 14pt;
    padding: 0;
}
.report_table_td{
    background-color: rgba(234,35,42,0.2);
}
.measurement_field.inactive .field_name{
    color: lightgrey;
}
.measurement_field.inactive label span{
    border: solid lightgrey 2px;
}

.middle_container{
    width: 80%;
    background-color: white;
    border: 2px solid black;
    border-radius: 25px;
    margin-top: 30px;
    margin-bottom: 2%;
}

.report_created_div{
    width: 100%;
}

.report_created_table{
    width: calc(100% - 50px);
    min-width: -moz-available;
    min-width: -webkit-fill-available;
    min-width: fill-available;
    table-layout: auto;
    margin: 0 25px 0 25px;
    border: none;
    border-bottom: black solid;
    border-radius: 0;
}
.report_created_table tbody td{
    border-radius: 0;
    font-size: 12pt;
}
.report_created_table tbody tr:nth-child(even){
    background-color: #f8f8f8;
}
.report_created_table thead th{
    border-radius: 0;
    text-align: left;
}
.report_pagination_footer{
    margin: 20px 0 0 0;
    border-radius: 20px 20px 0 0;
    background-color: #ededed;
}
.report_pagination_footer .page_button_table{
    border-radius: 20px;
    border: solid #ededed 1px;
}

.report_pagination_footer .button_nav_table{
    width: 30px;
    height: 30px;
    background-color: #EDEDED;
    font-size: 16pt;
}
.report_pagination_footer .last_button_table{
    margin-right: 25px;
}
.report_pagination_footer .start_button_table{
    margin-left: 25px;
}
.report_pagination_footer .page_button_table_active{
    border: solid black 1px;
}
.charts_div_container{
    width: 100%;
    height: 800px;
    margin-top: 25px;
}


/* Стили страницы заданий */
.task_menu_container{
    background-color: #EA232A;
    height: 100vh;
    width: 10%;
    top: 0;
    left: 3%;
    position: fixed;
}
.task_menu_inner_container{
    text-align: center;
    width: 60%;
    margin: 40% 0 20%;
}
.task_menu_logo{
    width: 100%;
    margin: 0 auto;
}
.task_menu_link{
    margin-bottom: 20px;
    color: white;
    text-decoration: none;
}
.task_menu_link:hover{
    text-decoration: underline;
}
.task_menu_link_selected{
    text-decoration: underline;
}
.task_inner_container{
    background-color: white;
    width: 80%;
    border-radius: 30px;
    margin-left: calc(5% + 11.5%);
    margin-top: 4%;
    margin-bottom: 4%;
}
.task_inner_container p{
    margin: 0 0 5px 0;
    padding: 0;
}
.task_inner_container p.header.padding_0{
    margin-top: 20px;
}
.task_clear_button{
    width: 18%;
    padding: 13px;
    border-radius: 5px;
    border: black 2px solid;
    background-color: white;
    color: black;
}
.task_clear_button:hover{
    text-decoration: underline;
}
.task_field_button{
    min-width: 150px;
    border: black 2px solid;
}
.task_field_button:hover{
    border: #EA232A 2px solid;
}
.task_textarea{
    padding: 15px;
    height: 150px;
    resize: none;
    width: 100%;
}
.task_textarea:hover{
    border: #EA232A 2px solid;
}
.task_textarea:focus{
    outline: none !important;
    border: #EA232A 2px solid;
}
.task_container_two{
    margin-top: 25px;
}
.task_container_three{
    margin-top: 25px;
    margin-bottom: 25px;
}
.task_container_three button{
    width: 25%;
}
.task_text_hint{
    margin: 10px 0 5px 0;
    padding: 0;
    font-style: italic;
}

.task_tab_locations_container{
    width: 40%;
}
.task_tab_location{
    width: 30%;
    background-color: white;
    color: black;
    border: #EA232A solid 2px;
    border-radius: 50px;
    margin: 0 auto;
    padding: 5px 0;
    cursor: pointer;
}
.task_tab_location:hover{
    background-color: #EA232A;
    color: white;
}
.tab_active{
    background-color: #EA232A;
    color: white;
}

.task_created_container_top{
    margin: 0 auto;
    padding: 0;
    width: 95%;
    align-items: flex-start;
}

.task_created_container_bottom{
    padding: 0;
    width: 95%;
    margin: 0 auto 50px;
}
.underline_decoration{
    height: 1px;
    background-color: black;
    margin-left: 10px;
    width: 90%;
}

.task_table_container{
    border-radius: 25px;
    height: 10vh;
    align-items: baseline;
}
.task_table_container p{
    margin: 20px;
}

.task_created_menu_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    margin: 0;
}
.task_created_menu_container:first-child{
    margin: 0 0 40px 0;
    width: 50%;
}
.task_created_menu_container:last-child{
    margin: 0 0 40px 40px;
    width: 50%;
}
.task_created_menu_button{
    width: 100%;
    margin-top: 20px;
    margin-right: 20px;
}
.container.flex.full_width button.button.report_button.task_created_menu_button{
    margin-right: 20px;
}
.container.flex.full_width button.button.report_button.task_created_menu_button:last-child{
    margin-right: 0;
}

.task_created_menu_container.task_your_menu_container:first-child{
    margin-bottom: 20px;
    width: 50%;
}
.task_created_menu_container.task_your_menu_container{
    margin: 0 0 40px 0;
    width: 80%;
}


/*#button_task_alter_record{*/
/*    margin-right: 20px;*/
/*}*/
/*#button_task_deselect_record{*/
/*    margin-right: 0;*/
/*}*/
.task_created_menu_filter{
    width: 100%;
    margin-top: 20px;
    border-radius: 50px;
    background-color: white;
    border: black solid 2px;
    color: black;
    margin-right: 15px;
    padding: 13px;

}
.task_created_menu_filter:hover{
    text-decoration: none;
    background-color: #EA232A;
    color: white;
    border: #EA232A solid 2px;
    cursor: pointer;
}
.task_created_menu_filter:last-child{
    margin-right: 0;
}
.task_created_menu_filter.inactive_button{
    color: white;
}
.table_task_all{
    width: auto;
    border: 2px solid black;
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}
.table_task_all thead th{
    border-radius: 0;
}
.table_task_all thead th:first-child{
    border-radius: 20px 0 0 0;
}
.table_task_all thead th:last-child{
    border-radius: 0 20px 0 0;
}
.table_task_all tbody td{
    border-radius: 0;
}
.table_task_td{
    background-color: #f8f8f8;
}
#div_task_pagination{
    border: 2px solid black;
    border-radius: 25px;
    width: fit-content;
    padding: 0 30px;
}
.task_edit_div{
    border-bottom: solid black 2px;
    justify-content: space-between;
}
.task_edit_div:first-child{
    border-top: solid black 2px;
    border-bottom: solid black 2px;
}
.task_edit_div *{
    margin: 15px 0 15px 15px;
}
.task_edit_div p{
    display: inline-block;
    font-weight: bold;
    padding: 0;
    margin-bottom: 0;
}
.task_edit_div div.div_task_edit_column *:last-child{
    margin-bottom: 0;
}
.task_edit_div div.div_task_edit_column{
    border-right: solid black 2px;
    margin: 15px 0 15px 0;
    padding-right: 10px;
    flex-grow: 1;
}
.task_edit_div div.div_task_edit_column:first-child{
    margin-right: 0;
    padding-right: 10px;
}
.task_edit_div div.div_task_edit_column:last-child{
    border: none;
}
.task_edit_div span{
    display: inline-block;
    margin-bottom: 0;
}
.task_switch_emp_button{
    font-size: 12pt;
    padding: 12px;
    border-radius: 5px;
    border: none;
    display: block;
    background-color: #EA232A;
    color: white;
    cursor: pointer;
    margin-bottom: 0;
}
.task_switch_status_select{
    width: 150px;
    padding: 10px;
    border: solid 2px #EA232A;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}
.task_switch_status_select.inactive{
    border: solid 2px #dcdcdc;
}
.task_add_answer_textarea{
    min-width: 220px;
    max-width: 400px;
    width: 400px;
    min-height: 100px;
    padding: 7px;
    max-height: 400px;
    border-radius: 5px;
    margin-right: 5px;
    border: solid 2px black;
    resize: vertical;
}
.task_add_answer_textarea:focus-visible{
    border: solid #EA232A 2px;
    outline: none;
}
.measurement_div{
    border: none;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 420px;
    margin-bottom: 0;
}
.measurement_div div{
    border: none;
    margin: 0;
}
.measurement_div p{
    margin: 0 5px 10px 0;
}
.measurement_div input{
    width: 40%;
    font-size: 12pt;
    margin: 0 0 10px 0 !important;
    outline: none;
    border: solid black 2px;
    border-radius: 5px;
    line-height: 18pt;
}
.measurement_div input:focus-visible{
    border: solid #EA232A 2px;
}

.task_showmore_button{
    padding: 15px 0;
}

/* Экран загрузки */
#loading_screen {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(188, 188, 188, 0.8);
    top: 0;
    left: 0;
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
#loading_screen.show {
    display: flex;
    flex-direction: column;
}
#loading_screen.loading {
    pointer-events: auto;
}
#loading_screen img{
    background-color: white;
    padding: 10px;
    border-radius: 25px;
    width: 100px;
    height: 100px;
}

/* Страница управления пользователями */

.user_management_buttons_container{
    margin: 0 0 20px 0;
}
.user_management_filter_search{
    min-width: 200px;;
    margin: 20px 20px 0 0;
    padding: 0 100px 0 0;
    border-radius: 12px;
    border: solid 2px black;
    outline: none;
    font-style: italic !important;
    text-indent: 20px;
}
.user_management_filter_search:hover{
    border: #EA232A 2px solid;
    outline: none;
}
.user_management_filter_search:focus{
    border: #EA232A 2px solid;
    outline: none;
    font-style: normal !important;
}
.user_management_container{
    margin-top: 10px;
}
.user_management_container p{
    margin: 0 20px 0 0;
}
.user_management_container span{
    margin-right: 5px;
}
.user_management_container input{
    margin: 0 auto;
}
.left_user_management_container{
    margin: 0 50px 0 0;
}
.left_user_management_container p{
    margin-bottom: 10px;
}

/* Страница добавления пользователей */
.container_center_add_user{
    background-color: white;
    width: 60%;
    border-radius: 30px;
    margin-top: 4vh;
    margin-bottom: 1vh;
    padding-bottom: 15vh;
    padding-top: 4vh;
}
.container_center_add_user h2:first-child{
    margin-bottom: 30px;
}
#form_add_user input, #form_add_user select{
    width: 20vw;
    text-indent: 10px;
}
#form_add_user{
    width: 60%;
}
#input_name{
    width: 12vw !important;
}
.form_add_user_fields_div{
    margin-bottom: 35px;
}
.form_add_user_fields_div:nth-child(5){
    margin-bottom: 25px;
}
.form_add_user_fields_div label{
    padding-left: 10px;
}

#button_generate_password, #button_generate_login{
    margin-right: 0;
    width: 12vw;
}
#button_apply_user_edit{
    margin-right: 0;
    max-width: 20vw;
}
#button_cancel_user_edit{
    max-width: 12vw;
    margin-right: 0;
}
#select_role{
    cursor: pointer;
}
#input_show_hide_password{
    width: 0 !important;
    margin: 0 auto !important;
}
.show_hide_password_container{
    margin-top: 5px;
}

/* Страница изменения пользователей */
#input_password.auth_input:focus{
    font-style: normal;
}

/* Страница важных сообщений */
#input_search_important_messages{
    padding: 15px 10px 10px 0;
    width: calc(100% - 10px);
}

#textarea_engineer_answer{
    width: calc(100% - 50px);
    margin: 25px;
}

.operator_modal_message_div{
    margin: 0 25px 0 25px;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
}

.operator_modal_message_div p{
    margin: 0;
    padding: 0;
    text-wrap: wrap;
}

.operator_data_div{
    justify-content: left;
    align-items: baseline;
    margin-top: 20px;
    width: 100%;
    max-width: 850px;
}

.operator_data_div div{
    margin-right: 10px;
}

.operator_data_div div:nth-child(2){
    width: calc(59% - 40px);
    padding: 0 20px;
    margin-left: 10px;
    border-right: solid 1px black;
    border-left: solid 1px black;
}

.operator_data_div div:last-child{
    margin-right: 0;
    margin-left: 10px;
    border: none;
}

.message_div{
    justify-content: left;
    align-items: baseline;
    flex-direction: column;
    width: 100%;
    max-width: 850px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.message_div textarea{
    border-radius: 15px;
}


/* Держим внизу чтобы не сбивать приоритет*/
.inactive_button{
    background-color: #dcdcdc;
    color: lightgrey;
    border: none;
    pointer-events: none;

}
.inactive_button:hover{
    background-color: #dcdcdc;
    color: lightgrey;
    border: none;
    cursor: not-allowed;
    text-decoration: none;
}
.inactive{
    pointer-events: none;
}
.filter_inactive{
    background-color: #FFFFFF;
    color: black;
    border: solid black 2px;
    cursor: pointer;
}
.filter_inactive:hover{
    background-color: #EA232A;
    color: white;
    border: solid #EA232A 2px;
}
.filter_active{
    background-color: #EA232A;
    color: white;
    border: solid #EA232A 2px;
    margin-right: 15px;
    padding: 13px;
}
.filter_active:hover{
    background-color: #FFFFFF;
    color: black;
    border: solid black 2px;;
}
.filter_active:last-child{
    margin-right: 0;
}
.hidden{
    visibility: hidden;
}
.flex{
    display: flex;
}
.flex_center{
    justify-content: center;
    align-items: center;
}
.flex_left{
    justify-content: left;
    align-items: center;
}
.flex_column{
    flex-direction: column;
}
.flex_column_left{
    align-items: baseline;
    justify-content: center;
}
.flex_around{
    justify-content: space-around;
}
.flex_between{
    justify-content: space-between;
}
.flex_items_top{
    align-items: flex-start;
}
.flex_items_end{
    align-items: flex-end;
}
.flex_self_end{
    align-self: flex-end;
}
.full_width{
    width: 100%;
}
.width_80{
    width: 80%;
}
.width_50{
    width: 50%;
}
.checkmark_small{
    width: 15px;
    height: 15px;
}
.checkbox_container .checkmark_small:after {
    left: 4px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.bg_color_red{
    background-color: #EA232A;
}
.bg_color_grey{
    background-color: #dddddd;
}
.overflow-y_hidden{
    overflow-y: hidden;
}
.color_white{
    color: white;
}
.color_red{
    color: #EA232A;
}
.margin_auto{
    margin: 0 auto;
}
.margin_0{
    margin: 0 !important;
}
.padding_0{
    padding: 0 !important;
}
.text{
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14pt;
    font-style: normal;
    text-decoration: none;
}
.header{
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18pt;
    font-weight: 800;
    color: black;
    margin: 0;
    padding: 0;
}
.modal_header{
    margin: 15px;
    padding: 10px;
}
.big_text{
    font-size: 18pt;
}
.medium_text{
    font-size: 14pt;
}
.normal_text{
    font-size: 12pt;
}
.small_text{
    font-size: 10pt;
}
.bold_text{
    font-weight: 800;
}
.italic_text{
    font-style: italic;
}
.no_wrap_text{
    white-space: nowrap;
}
.location_icon{
    width: 40px;
}
.display_none{
    display: none;
}
.box-sizing_border_box{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.font-awesome-icon{
    color: black;
    font-size: 14pt;
    cursor: pointer;
}

.font-awesome-icon:hover{
    color: #EA232A;
}

#chart{
    border-radius: 30px;
    overflow: hidden;
}

#well_gps_map{
    height: 100vh;
}

#top_table td{
    cursor: pointer;
}

/* Адаптация */
@media screen and (min-width: 800px){
    .report_modal_table_tbody td{
        min-width: 50px;
    }
    .table_base thead th{
        font-size: 10pt;
    }
    .report_label_container.flex.flex_center p{
        font-size: 13pt;
    }
    .header.modal_header{
        font-size: 16pt;
        font-weight: 700;
    }
    .header{
        font-size: 16pt;
    }
    .modal_button_filter{
        font-size: 14pt;
    }
    .task_field_button{
        width: 100px;
    }
    .table_base tbody td{
        font-size: 10pt;
    }
}

@media screen and (min-width: 1200px){
    .report_modal_table_tbody td{
        min-width: 80px;
    }
    .task_field_button{
        width: 150px;
    }

}
@media screen and (min-width: 1400px){
    .report_modal_table_tbody td{
        min-width: 100px;
    }
    .task_field_button{
        width: 200px;
    }
    .header{
        font-size: 18pt;
    }
    .table_base thead th{
        font-size: 12pt;
    }
    .table_base tbody td{
        font-size: 12pt;
    }
}
@media screen and (min-width: 1600px) {
    .report_modal_table_tbody td{
        min-width: 120px;
    }
    .task_field_button{
        width: 250px;
    }
}