@import url('basic.css');

body {height: 100%; margin: 0px 0px 0px 0px; overflow-y: scroll}
#content {display: flex; min-height: 100%;}

#levblock {position: fixed; display: grid;  width: 350px; height: 100vh; z-index: 1; padding: 5px 0px 50px 0px; box-shadow: 0 0 2px;}
#lb2 {width: 330px; margin:5px 10px 0 10px}
#lb3 {width: 330px; margin:5px 10px 0 10px; overflow-y: auto;}
#sp1 {text-align: center;}
#sp2 {text-align: center;}
.zagolovok1 {margin: 5px 0 5px 0; font-family: "Lora"; font-size: 17px}
.klassifikaciya {padding: 1px 15px 1px 15px; margin: 1px 0 1px 0; font-size: 17px}
.klassifikaciyasslk {display: block;}
.klassifikaciyasslk:hover {background-color: #f5f8eb;}
.sslka {font-size: 21px}

#pravblock {display: grid; grid-template-rows: 110px auto auto auto auto auto 75px; margin-left: 350px; flex-grow: 1; min-width: 300px; padding: 50px 10px 30px 10px;}
#pb1 {padding: 0 30px 0 30px; text-align: center}
#name_species {font-size: 31px; margin: 21px 0 11px 0;}
#name_subgenus {font-size: 19px; margin: 1px 0 1px 0; display: inline}
#name_rus {font-size: 19px; margin: 1px 0 1px 0; display: inline}

.knopkasprava {position: absolute; height: 26px; width:30px; border-radius: 15px 0px 0px 15px; box-shadow: 0 0 2px; right: 0px; text-align: left}
.knopkasprava:hover {width:155px; transition: 0.7s;}
.icon {height: 22px; top: 3px; position: absolute; left: 5px; top: 2px;}
.text_knopka {margin: 0px 0px 0px 0px; visibility: hidden; position: absolute; left: -79px; top: -1px; color: #5F6368;}

.knopkasleva {position: absolute; height: 26px; width:30px; border-radius: 0 15px 15px 0; box-shadow: 0 0 2px; left: 350px; text-align: right}
#knopkaedit {top: 53px;}
#knopkanazad {top: 53px;}
#knopkamap {top: 88px;}
#knopka_attach {top: 123px;}
#knopka_edit_sp {top: 88px;}
#knopkainsert {top: 88px;}

#knopka_find {top: 53px;}
#knopka_insert {top: 88px;}
#knopka_photo {top: 123px;}

.text_knopkal {margin: 0px 0px 0px 0px; visibility: hidden; position: absolute; left: -79px; top: -1px; color: #5F6368;}
.knopkasleva:hover {width:155px; transition: 0.7s;}
#knopkaedit:hover #icon_edit {transition: 0.7s; transform: translate(110px);}
#knopkaedit:hover #text_knopkaedit {visibility: visible; left: 5px; top: -1px; transition: 1s;}
#knopkamap:hover #icon_map {transition: 0.7s; transform: translate(110px);}
#knopkamap:hover #text_knopkamap {visibility: visible; left: 5px; top: -1px; transition: 1s;}
#knopka_attach:hover #icon_insert {transition: 0.7s; transform: translate(110px);}
#knopka_attach:hover #text_knopka_attach {visibility: visible; left: 5px; top: -1px; transition: 1s;}
#knopkanazad:hover #icon_nazad {transition: 0.7s; transform: translate(110px);}
#knopkanazad:hover #text_knopkanazad {visibility: visible; left: 5px; top: -1px; transition: 1s;}
#knopka_edit_sp:hover #icon_edit_sp {transition: 0.7s; transform: translate(110px);}
#knopka_edit_sp:hover #text_edit_sp {visibility: visible; left: 5px; top: -1px; transition: 1s;}
#knopkainsert:hover #icon_insert {transition: 0.7s; transform: translate(110px);}
#knopkainsert:hover #text_knopkainsert {visibility: visible; left: 5px; top: -1px; transition: 1s;}

#knopka_find:hover #icon_find {transition: 0.7s; transform: translate(115px);}
#knopka_find:hover #text_find {visibility: visible; left: 5px; top: -1px; transition: 1s;}
#knopka_insert:hover #icon_insert {transition: 0.7s; transform: translate(115px);}
#knopka_insert:hover #text_insert {visibility: visible; left: 5px; top: -1px; transition: 1s;}
#knopka_photo:hover #icon_photo {transition: 0.7s; transform: translate(115px);}
#knopka_photo:hover #text_photo {visibility: visible; left: 5px; top: -1px; transition: 1s;}

#info {text-align: justify; padding: 1px 15px 1px 15px;}
.zagol_gall {text-align: center; font-size: 25px;}
#gallery1 {display: flex; flex-wrap: wrap; gap: 10px;}
#gallery2 {display: flex; flex-wrap: wrap; gap: 10px; height: 820px; overflow-y: auto; overflow-x: hidden; align-content: flex-start;}
.image-item {width: 19%; height: 270px; display: flex; justify-content: center; align-items: center;}
.image-item img {width: 90%; max-height: 90%; object-fit: contain;}
.image:hover {transform: scale(1.1); transition-duration: 1s;}

#pb3I {text-align: center; width: 100%; margin: 0 auto 0 auto;}

#finds1 {display: flex; width: 99%; flex-wrap: wrap; gap: 20px; margin: 0 auto 0 auto;}
#finds2 {display: flex; width: 99%; flex-wrap: wrap; gap: 20px; margin: 0 auto 0 auto; height: 955px; overflow-y: auto; overflow-x: hidden; align-content: flex-start}
.find {width: 19%; height: 315px; display: grid !important; grid-template-rows: 250px auto auto; place-items: center; margin: 3px 0 5px 0; border-style: solid; border-color: #000000; border-width: 1px; padding-top: 5px;}
.find:hover {box-shadow: 0 0 1px;}
.item_img {width: 95%; max-height: 240px; object-fit: contain;}
.findtext {font-size: 17px; margin: 1px 0 1px 0;}

#pb3 {padding-bottom: 10px;}
#pbmap {padding-bottom: 10px;}
#map {width: 80%; height: 600px; margin: 1px auto 1px auto; margin-bottom: 9px;}
#map2 {width: 90%; height: 570px; margin: 1px auto 1px auto}

#pb5 {border-top: dashed #99a8bf; border-bottom: dashed #99a8bf; border-width: 2px; margin: 0px 0 5px 0;}
#pb51 {}
#vdbd {display: block; text-align: center; padding: 3px 0 3px 0; margin: 1px 0 1px 0;}
#idsslkp {padding: 1px 15px 1px 15px; margin: 1px 0 1px 0; text-align: center;}

.forma {height: 33px; padding-left: 10px; border: 1px solid #000000; border-radius: 5px; outline: none; font-size: 18px; text-align: center; font-family: "Lora"; font-weight: 550;}
.lab {font-family: "Lora"; display: block; text-align: center; font-weight: bold; font-size: 19px}
#form1 {display: flex; justify-content: center; gap: 20px;}
#form2 {display: flex; justify-content: center; gap: 20px;}
#form3 {display: flex; justify-content: center; gap: 20px;}
#form3a {display: flex; justify-content: center; gap: 20px;}
#form4 {display: flex; justify-content: center; gap: 20px;}
#form5 {display: flex; justify-content: center; gap: 20px; margin-top: 11px}
#form_name {width: 550px;}
#form_author {width: 390px;}
#form_higher_taxon {width: 350px;}
#form_subgenus {width: 350px;}
#form_name_rus {width: 650px;}
#form_information {text-align: justify; width: 1200px; height: 130px; overflow-y: scroll; padding: 10px 15px 10px 15px;}
#form_taxonomy {text-align: justify; width: 670px; height: 100px; overflow-y: scroll; padding: 10px 15px 10px 15px; margin-top: 10px; margin-bottom: 3px; font-size: 16px;}
#form_area {text-align: justify; width: 670px; height: 100px; overflow-y: scroll; padding: 10px 15px 10px 15px; margin-top: 10px; margin-bottom: 3px; font-size: 16px;}
#form_morphology {text-align: justify; width: 670px; height: 100px; overflow-y: scroll; padding: 10px 15px 10px 15px; margin-top: 10px; margin-bottom: 12px; font-size: 16px;}
#form_biology {text-align: justify; width: 670px; height: 100px; overflow-y: scroll; padding: 10px 15px 10px 15px; margin-top: 10px; margin-bottom: 12px; font-size: 16px;}
#sectors_add {text-align: justify; width: 650px; height: 100px; overflow-y: scroll; padding: 10px 15px 10px 15px; margin-top: 10px}
#sectors_delete {text-align: justify; width: 650px; height: 100px; overflow-y: scroll; padding: 10px 15px 10px 15px; margin-top: 10px}
#pf31 {display: flex; justify-content: center; gap: 20px;}
#pf4 {display: flex; justify-content: center; gap: 20px;}
#forma_knp {width: 250px; cursor: pointer}
#form6 {font-weight: bold; font-family: "Lora"; margin: 0 0 21px 0;}
#chek {display: flex; align-items: center; justify-content: center; font-size: 19px; gap: 10px;}
#chek2 {display: flex; align-items: center; justify-content: center; font-size: 19px; margin-top: 14px; gap: 10px;}
.radio {margin: 0 15px 0 15px; position: relative; width: 40px; height: 35px; background-color: #FFFFFF; border: 1px solid #000000; border-radius: 5px; appearance: none; -webkit-appearance: none;}
.radio::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #000; border-radius: 50%; display: none;}
.radio:checked::before {display: block;}

input {border: 1px solid #000000;}

#info_item_1 {display: flex; height: 290px; justify-content: center; gap: 20px;}
#info_item_11 {width: 600px; height: 290px;}
#info_item_12 {width: 600px; height: 290px;}
#form_info_item_11 {width: 578px; height: 85px; padding: 7px 10px 7px 10px; border: 1px solid #000000; border-radius: 3px; font-size: 18px; overflow-y: scroll; margin-top: 7px}
#form_info_item_12 {width: 578px; height: 105px; padding: 7px 10px 7px 10px; border: 1px solid #000000; border-radius: 3px; font-size: 18px; overflow-y: scroll; margin-top: 7px}
#form_info_item_21 {width: 579px; height: 237px; padding: 7px 10px 7px 10px; border: 1px solid #000000; border-radius: 3px; font-size: 18px; overflow-y: scroll; margin-top: 7px}

#photo_map {display: flex; height: 410px; justify-content: center; gap: 20px;}
#map_item {width: 600px; height: 390px;}
#photo_item {display: flex; width: 600px; height: 390px; text-align: center; align-items: center; justify-content: center;}
#item_img_big {max-width: 600px; max-height: 390px; object-fit: contain;}
#qr_kod {display: flex; gap: 50px; justify-content: center;}
#qr_block {height: 300px;}
.p_qr {text-align: center;}
.qrkod {width: 170px; height: 170px; background-color: #FFF;}

#forms1 {display: flex; justify-content: center; gap: 20px; margin-bottom: 15px}
#form_taxon_name {width: 390px;}
#form_collected {width: 390px;}
#form_determined {width: 390px;}
#forms2 {display: flex; justify-content: center; gap: 25px; margin-bottom: 15px}
#year {width: 130px; padding-left: 1px;}
#month {width: 70px; padding-left: 1px;}
#day {width: 70px; padding-left: 1px;}
#form_marker {width: 390px;}
#forms3 {display: flex; justify-content: center; gap: 25px; margin-bottom: 15px}
#form_latitude {width: 290px;}
#form_longitude {width: 290px;}
#forms4 {display: flex; justify-content: center; gap: 25px; margin-bottom: 15px}
#cheks1 {display: flex; align-items: center; justify-content: center; font-size: 19px; gap: 10px;}
#cheks2 {display: flex; align-items: center; justify-content: center; font-size: 19px; margin-top: 14px; gap: 10px;}
#cheks3 {display: flex; align-items: center; justify-content: center; font-size: 19px; margin-top: 14px; gap: 10px;}

#forms6 {text-align: center; font-weight: bold;}
#image#file-upload-button {width: 310px; height: 35px; padding-left: 10px;}
#file-input {margin: 10px auto 10px auto; width: 700px; height: 40px; border: 1px solid black; position: relative;}
#file-input input[type="file"] {width: 100%; height: 35px; opacity: 0; cursor: pointer;}
#button {position: absolute; top: 0; left: 0; width: 279px; height: 35px; background-color: black; color: white; cursor: pointer; padding-top: 5px; font-size: 19px; font-family: "Lora"}
#file-name {position: absolute; top: 0; right: 0; width: 400px; height: 40px; padding: 0 10px; line-height: 40px; background-color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

#poisk {text-align: center; margin: 23px}
#form_poisk {display: flex; align-items: center; justify-content: center; gap: 10px;}
#form_poisk input {width: 450px; height: 35px; padding-left: 10px; border: 1px solid #6A7793; border-radius: 5px; outline: none; text-transform: lowercase;}
#form_poisk button {width: 130px; height: 35px; border: 1.5px solid #6A7793; border-radius: 5px; background: #F9F7FA; cursor: pointer;}
#form_poisk button:hover {border: 1.5px solid #6A7793; border-radius: 5px; background: #D0C9D0; cursor: pointer;}
#text1 {text-decoration: none; margin: 1px auto 1px auto; font-size: 15px}
#rez {padding: 1px 30px 1px 30px}
#authorization {display: flex; justify-content: center; flex-direction: column;}
.text2 {font-size: 21px; text-align: center}
.pan {text-align: center;}
#forms {text-align: center}
#vvod1 {width: 350px; height: 37px; padding-left: 10px; border: 1px solid #6A7793; border-radius: 5px; outline: none; font-size: 21px;}
#vvod2 {width: 350px; height: 37px; padding-left: 10px; border: 1px solid #6A7793; border-radius: 5px; outline: none; font-size: 21px;}
#knopka {width: 150px; height: 30px; padding-left: 10px; border: 1px solid #6A7793; border-radius: 5px; outline: none; font-size: 19px; cursor: pointer;}

.sslk_source {margin: 7px 15px 5px 15px; text-align: justify; font-size: 21px}
.sslk_source:hover {text-shadow: 0 0 1px;}