@import url('header.css');
@import url('footer.css');
@import url('sectors.css');

* {margin: 0; padding: 0;}
p {font-family: "Lora"; font-size: 16px}
a {text-decoration: none; color: black;}
body {height: 100%;}
body::-webkit-scrollbar {width: 15px; height: 7px; background-color: #CFD4E8; border-radius: 10px;}
body::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #00c6fb, #005bea);}
body::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); background-color: #f4f4f2;}

#osnovnoy_block {width: 1500px; min-height: calc(100vh - 67px); margin: 0 auto 0 auto; padding: 41px 0 51px 0; box-shadow: 0 0 5px; background-color: #FDFFF5;
    display: grid; grid-template-columns: 300px 1200px; grid-column-gap: 0px; grid-row-gap: 0px; z-index: 2}

#leviy_block {z-index: 3; position: relative;}
#praviy_block {z-index: 3;}

#content_levogo_blocka {height: calc(100vh - 77px); width: 300px; position: fixed; padding: 5px 0 5px 0; display: grid; grid-template-rows: 41px 1fr 31px; grid-row-gap: 5px; background-image: url(../../../../resource/img/fonlev.jpg); background-size: cover;}
.levie_blocki {margin: 0 5px 0 5px; background-color: rgba(255, 252, 246, 0.91); border-style: solid; border-color: #ffffff; border-width: 1px;}
.levie_blocki:hover {backdrop-filter: blur(3px); background-color: rgba(255, 252, 246, 0.95);}

#higher_taxon {display:flex; justify-content: center; align-items: center}
#link_higher {font-size: 21px; font-weight: bold}
#higher_taxon:hover #link_higher {transform: scale(1.1); transition: 0.5s; text-shadow: 4px 4px 3px #a2d4df;}

#related_taxons {padding: 5px 5px 5px 11px; overflow-y: auto; white-space: nowrap;}
#related_taxons::-webkit-scrollbar {width: 8px; height: 7px; background-color: #CFD4E8;}
#related_taxons::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #00c6fb, #005bea);}
#related_taxons::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); background-color: #f4f4f2;}

.subgenus {color: #7e0f12; font-size: 15px;}
.related_species {color: #c33124; font-size: 15px;}
.link_species:hover {display: inline-block; transform: scale(1.05); transition: 0.15s; text-shadow: 4px 4px 3px #a2d4df; border-bottom: dashed; border-width: 1px;}

#schetchik {display:flex; justify-content: center; align-items: center}

#content_pravogo_blocka {width: 1190px; padding: 5px 5px 5px 5px;}
.pravie_blocki {margin: 0 5px 0 5px; padding: 5px 5px 5px 5px; border-bottom-style: solid; border-color: #cd975b; border-width: 1px;}

#systematika {text-align: justify; font-size: 15px; border-top-style: solid;}

#taxon_info {width: 1160px; box-shadow: 0 0 2px; margin: 10px 0 3px 10px; padding: 5px 5px 5px 5px; background-color: #ffffff;}
#taxon_info_blok {position: relative;}

#taxon {display: inline; font-weight: bold; font-size: 21px}
#name {display: inline; font-size: 22px; color: #f80039}
#rusname {font-size: 19px; margin: 4px 0 0 0;}
#text_identifikatorov {padding-top: 7px}
.link_identifikatorov {color: #fe9001;}
.link_identifikatorov:hover {font-weight: bold;}

#stat {position: absolute; right: 0px; top: 0px; margin-top: 2px; margin-right: 3px; width: 21px; height: 21px; border-radius: 50%; box-shadow: 0px 0px 3px }
#stat:hover {box-shadow: 0px 0px 4px;}
#stat:hover #tooltip {display: block;}
#tooltip {width: 120px; height: 17px; position: absolute; top: 25px; right: 10px; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 5px; border-radius: 3px; display: none; font-family: "Lora"; font-size: 12px; text-align: center;}

#redactorsslk1 {position: absolute; right: 30px; top: 0px; margin-top: 2px; margin-right: 3px; width: 21px; height: 21px; border-radius: 50%; box-shadow: 0px 0px 3px; background-color: #a4bbbf; display: flex; justify-content: center; align-items: center;}
#redactorsslk2 {position: absolute; right: 60px; top: 0px; margin-top: 2px; margin-right: 3px; width: 21px; height: 21px; border-radius: 50%; box-shadow: 0px 0px 3px; background-color: #a59ea8; display: flex; justify-content: center; align-items: center;}
#redactorsslk3 {position: absolute; right: 90px; top: 0px; margin-top: 2px; margin-right: 3px; width: 21px; height: 21px; border-radius: 50%; box-shadow: 0px 0px 3px; background-color: #FCE8F8; display: flex; justify-content: center; align-items: center;}

#redactorsslk1:hover {box-shadow: 0px 0px 4px;}
#redactorsslk2:hover {box-shadow: 0px 0px 4px;}
#redactorsslk3:hover {box-shadow: 0px 0px 4px;}
#tooltip1 {display: none; width: 120px; height: 17px; position: absolute; top: 25px; right: 10px; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 5px; border-radius: 3px;  font-family: "Lora"; font-size: 12px; text-align: center;}
#tooltip2 {display: none; width: 120px; height: 17px; position: absolute; top: 25px; right: 10px; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 5px; border-radius: 3px;  font-family: "Lora"; font-size: 12px; text-align: center;}
#tooltip3 {display: none; width: 120px; height: 17px; position: absolute; top: 25px; right: 10px; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 5px; border-radius: 3px;  font-family: "Lora"; font-size: 12px; text-align: center;}
#redactorsslk1:hover #tooltip1 {display: block;}
#redactorsslk2:hover #tooltip2 {display: block;}
#redactorsslk3:hover #tooltip3 {display: block;}

#species_info {display: grid; grid-template-columns: auto; justify-content: center; padding-bottom: 10px;}
#species_info1 {display: grid; grid-template-columns: auto 400px; gap: 10px; padding-bottom: 10px;}

#info {text-align: justify; height: 456px; font-size: 17px; font-family: "Lora"; line-height: 1.5; padding: 7px 12px 7px 7px; overflow-y: auto; box-shadow: 0 0 2px; background-color: #ffffff;}
#info::-webkit-scrollbar {width: 10px; height: 7px; background-color: #CFD4E8;}
#info::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #00c6fb, #005bea);}
#info::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);background-color: #f4f4f2;}

#info1 {text-align: justify; width: 1151px; max-height: 456px; font-size: 17px; font-family: "Lora"; line-height: 1.5; padding: 7px 12px 7px 7px; overflow-y: auto; box-shadow: 0 0 2px; background-color: #ffffff;}
#info1::-webkit-scrollbar {width: 10px; height: 7px; background-color: #CFD4E8;}
#info1::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #00c6fb, #005bea);}
#info1::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); background-color: #f4f4f2;}

#passport_photo {width: 400px; height: 470px; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 2px; background-color: #ffffff;}
#photo_vida {width: 96%; margin: 5px 1px 5px 0;}
#photo_vida:hover {transform: scale(1.2); transition-duration: 1s; z-index: 150;}

.zagolovki {text-align: center; font-size: 21px; margin: 0 0 5px 0;}

#referense {width: 1160px; box-shadow: 0 0 2px; margin: 10px 10px 3px 0px; padding: 5px 5px 5px 5px; background-color: #ffffff; font-size: 19px; text-align: justify}

#gallery_block {padding: 10px 5px 10px 5px; z-index: 4}

#gallery {height: auto; display: flex; flex-wrap: wrap; box-shadow: 0 0 2px; max-height: 590px; overflow-y: auto; margin: 10px 0 0 0; background-color: #E7EAEF;}
#gallery::-webkit-scrollbar {width: 10px; height: 7px; background-color: #CFD4E8;}
#gallery::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #00c6fb, #005bea);}
#gallery::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); background-color: #f4f4f2;}

.yacheyka_gallery {width: 25%; height: 270px; display: flex; justify-content: center; align-items: center;}
.images_gallery {width: 90%; max-height: 90%; object-fit: contain; z-index: 6;}
.images_gallery:hover {transform: scale(1.05); transition-duration: 1s;}
.photosslk { display: flex; justify-content: center; align-items: center; width: 100%; height: 270px;}

#specimen {padding: 10px 5px 10px 5px; max-height: 700px; overflow-y: auto; z-index: 4}

#finds {height: auto; display: flex; flex-wrap: wrap; gap: 15px; box-shadow: 0 0 2px; max-height: 590px; overflow-y: auto; margin: 10px 0 0 0; padding: 15px 15px 15px 15px; background-color: #ffffff;}
#finds::-webkit-scrollbar {width: 10px; height: 7px; background-color: #CFD4E8;}
#finds::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #00c6fb, #005bea);}
#finds::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); background-color: #f4f4f2;}

.find {width: 25%; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 0 3px; }
.find:hover {box-shadow: 0 0 7px;}
.slk {text-decoration: none; color: black;}

.foto_find {height: 250px; display: flex; justify-content: center; align-items: center;}
.foto_vida {width: 95%; max-height: 240px; object-fit: contain;}
.info_find {height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.findtext {font-size: 19px}
#pagination {text-align: center}
.knopka {width: 120px; height: 30px; padding-left: 10px; border: 1px solid #353e52; border-radius: 5px; font-weight: bold;  outline: none; font-size: 21px; margin-top: 15px; margin-bottom: 30px; font-family: "Lora";}
.knopka:hover {cursor: pointer; background-color: #528e86; color: white; border: 1px solid #353e52;}

/* сектора */
#rasprostranenie  {display: flex; flex-direction: column; align-items: center;}
#map {width: 620px; height: 693px; position: relative; margin: 5px 0 0 0; background-image: url("../img/mapnew.png"); background-size: 620px; box-shadow: 0 0 3px; background-repeat: no-repeat; background-position: top center;}
.ds:hover {background-color: blue}