@import url('basic.css');

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

#levblock {position: fixed; display: grid; grid-template-rows: 45px 250px auto 55px; width: 350px; height: 100vh; z-index: 1; padding: 0px 0px 50px 0px; box-shadow: 0 0 2px;}
#pravblock {display: grid; grid-template-rows: 110px auto 35px; margin-left: 350px; min-width: 300px; padding: 50px 10px 30px 10px;}

#lb2 {width: 330px; margin:5px 10px 0 10px}
.bukvy {display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 5px;}
.bukva {width: 25px; height: 30px; display: flex; justify-content: center; align-items: center; font-family: "STIXTwoText"; font-size: 19px}
.bukva:hover {font-weight: 900;}

#lb3 {width: 330px; margin:5px 10px 0 10px; overflow-y: auto;}
#gody {display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin: 5px 5px 5px 5px;}
.god {width: 65px; height: 30px; display: flex; justify-content: center; align-items: center; font-family: "STIXTwoText"; font-size: 21px}
.god:hover {font-weight: 900;}

#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;}

#pb1 {padding: 0 30px 0 30px; text-align: center}
#pb5 {border-top: dashed #99a8bf; border-bottom: dashed #99a8bf; border-width: 2px; margin: 0px 0 5px 0;}

.sslk_source {margin: 7px 15px 5px 15px; text-align: justify; font-size: 21px}
.sslk_source:hover {text-shadow: 0 0 1px;}
.sslk_authors {margin: 7px 15px 5px 15px; font-size: 23px; width: 330px; height: 45px;}
.sslk_authors:hover {text-shadow: 0 0 1px;}

.knopkasprava {position: absolute; height: 26px; width:30px; border-radius: 15px 0px 0px 15px; box-shadow: 0 0 2px; right: 0px; text-align: left}
#knopka_add_source {top: 53px;}
#knopka_add_author {top: 88px;}
.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;}
#knopka_add_source:hover #icon__add_source {transition: 0.7s; transform: translate(110px);}
#knopka_add_source:hover #text_knopka_add_source {visibility: visible; left: 45px; top: -1px; transition: 1s;}
#knopka_add_author:hover #icon__add_author {transition: 0.7s; transform: translate(115px);}
#knopka_add_author:hover #text_knopka_add_author {visibility: visible; left: 55px; top: -1px; transition: 1s;}

.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;}
#knopkainsert {top: 88px;}
#knopkanazad {top: 53px;}
#knopkamap {top: 88px;}
.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;}
#knopkainsert:hover #icon_insert {transition: 0.7s; transform: translate(110px);}
#knopkainsert:hover #text_knopkainsert {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;}