:root {
  --primary-color: red;
}
 
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
  padding: 1rem;
}
 #container {
  width: 100%;
  aspect-ratio: 2/3;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-bottom: 20px;
}
body {background-color: lightgray;}
.contcen { 
  height: 200px;
  position: relative;
}
.square {
  height: 140px;
  width:150px;
  background-color: #555;
}
.dotok {position: absolute; Top:10px;left:-8px;height: 10px;width: 10px; background-color: firebrick;border-radius: 50%; display: inline-block;}
.dotoks {position: absolute; Top:10px;left:-8px;height: 20px;width: 20px; background-color: firebrick;border-radius: 50%; display: inline-block;}
h1   {color: blue;}
h2   {color: black; font-size: xx-large;}
h3   {color: black;font-size: x-large;}
h4   {color: blue; font-size: xx-large;}
.tooltip { position: absolute;  display: inline-block;  border-bottom: 1px  black;  cursor: pointer;}
.tooltiptext {visibility: hidden;width: 220px;background-color: blue;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: 150%;left: 83%;margin-left: -60px;}
.tooltiptext::after {content: "";position: absolute;bottom: 100%;left: 3%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent black transparent;}
.tooltip:hover .tooltiptext {visibility: visible;}
.myDivh1  {  border: 0; position: absolute; height: 20px; top: -10px; left: 120px; }
.myDivh2  {position: absolute; top: 20px; left: 120px; font-size: xx-large;}
.myDivh3  {  position: absolute; top: 60px; left: 120px; }
.myDivh4  { position: absolute; top: -20px; left: 220px; }
.myDivh5  { position: absolute; top: 20px; left: 220px; }
.myDivh6  { position: absolute; top: 80px; left: 10px; height:30px; font-size: x-large;color: blue }
.myDivh6a  { position: absolute; top: 100px; left:10px; font-size: x-large; }
.myDiv3  {  border: 3px outset gray;   position: relative;  background-color: lightsteelblue; text-align: left; width: 1250px; height: 280px; top: 10px; left: 10px}
.myDiv4 {  border: 1px outset green;   position: relative;  background-color: lightblue; text-align: center;  width: 1250px;  height: 660px;  top: 10px;  left: 10px }
.myDiv5 {  border: 1px outset green;   position: relative;  background-color: lightgreen; text-align: left; width: 1250px; height: 120px; top: 10px; left: 0px }
.myDiv6 {  position: relative;  top: -50px;  left: 10px; display: grid;  background-color: lightblue;    border: 2px outset gray;;  height:105px; width: 950px;}
.myDiv7 {  position: relative; top: -20px; left: 20px; font-size: x-large; width: 900px; height: auto; text-align: left; display: table-cell; vertical-align: text-top }
.myDiv8 { position: relative; top: 10px; left: 10px; background-color: green; height:90px;  width: 200px;}
.myDiv9 {  position: relative; top: 1px;left: 10px; height:140px; background-color: lightblue; border: 1px outset blue;}
.myDiv9a {  position: absolute; top: 40px;left: 10px; height:40px;} 
.myDivSvitra { position: relative; top: -30px;left: 9px; height:8px; width: 1250px;background-color: blue;}
.Atelef {position: absolute; left: 1140px;top: 10px;}
.Atwaze {position: absolute; left: 855px;top: 10px;}
.Geogr { position: absolute;left: 1140px;top:190px; }
.mybut { background-color: lightgrey;border: 5px grey solid;position: absolute; width: 130px; height: 145px;top: 170px;text-align: center;font-size: large ;}
.mybutNr {position: absolute;left: 10px; top: 10px;height: 100px;  width:100px;  background-color: #dcd0ff;border: 6px #8B0000 solid;font-size: xx-large;}
.mybut26 {position: absolute;left: 10px; top: 10px;height: 100px;  width:100px;  background-color: lightgray;border: 5px gray solid;font-size: xx-large;}
.mybutIn {position: absolute;left:165px;top: 2px; height: 100px;  width:240px;  background-color: lightgrey;border: 5px grey solid; font-size: large;}
.mybutSt {position: absolute;left: 2px;  top: 9px;  height: 165px;  width:130px;  background-color: lightgrey;border: 5px gray solid;font-size: x-large;}
.mybutEn1 {position: absolute;left: 852px;top: 2px; height: 100px;  width:96px;  background-color: lightgrey;border: 5px blue solid; font-size: large;}
.mybutStal {position: absolute;left: 2px;top: 170px;height: 145px;  width:130px;  background-color: lightgrey;border: 5px green solid;font-size: large;}
.button7{background: url("atpak1.jpg") no-repeat 0 0; position: absolute;left: 1150px; top: 7px; height: 96px; width: 96px; border:0;}
.button7:hover{background: url("atpak1.jpg") no-repeat 0 0 !important;}
.button7:active{background: url("atpak1.jpg") no-repeat -246px 0 !important ;}
 body {background-color: lightgray;}
.myDiv3in  {   position: absolute;   text-align: left; width: 1070px; height: 30px; top: 10px; left: 120px}
.mybutpo {position: absolute;height: 90px;  width:100px;  background-color: lightgray;border: 5px #8B0000 solid;font-size: xx-large;}
.mybutpin {position: absolute;height: 170px;  width:170px;  background-color: lightgray;border: 10px #8B0000 solid;font-size: 80px;}



.mybutpinb {position: absolute;height: 280px;  width:280px;  background-color: lightgray;border: 10px #8B0000 solid;font-size: 80px;}

.mybutpinbw {position: absolute;height: 60px;  width:60px;  background-color: lightgray;border: 5px #8B0000 solid;font-size: 26px;} 
 
 


.button8{background: url("ref3.png") no-repeat 0 0; position: absolute;left: 990px; top: 22px; height: 180px; width: 180px; border:0;}
.button8:hover{background: url("ref3.png") no-repeat 0 0 !important;}
.button8:active{background: url("ref3.png") no-repeat -246px 0 !important ;}
.button8m{background: url("ref4.png") no-repeat 0 0; position: absolute;left: 990px; top: 22px; height: 130px; width: 130px; border:0;}
.button8m:hover{background: url("ref4.png") no-repeat 0 0 !important;}
.button8m:active{background: url("ref4.png") no-repeat -246px 0 !important ;}

.buttonx{background: url("atpa15.png") no-repeat 0 0; position: absolute;left: 1050px; top: 6px; height: 70px; width: 70px; border:0;}
.buttonx:hover{background: url("atpa15.png") no-repeat 0 0 !important;}
.buttonx:active{background: url("atpa15.png") no-repeat -246px 0 !important ;}

.buttoned{background: url("edit90.png") no-repeat 0 0; position: absolute;left: 1050px; top: 6px; height: 90px; width: 90px; border:0;}
.buttoned:hover{background: url("edit90.png") no-repeat 0 0 !important;}
.buttoned:active{background: url("edit90.png") no-repeat -246px 0 !important ;}

.buttonpin{background: url("pin90.png") no-repeat 0 0; position: absolute;left: 1050px; top: 6px; height: 90px; width: 90px; border:0;}
.buttonpin:hover{background: url("pin90.png") no-repeat 0 0 !important;}
.buttonpin:active{background: url("pin90.png") no-repeat -246px 0 !important ;}

.buttondel{background: url("del55.png") no-repeat 0 0;  position: absolute;height: 55px; width: 55px; border:0;}
.buttondel:hover{background: url("del55.png") no-repeat 0 0 !important }
.buttondel:active{background: url("del55.png") no-repeat -246px 0 !important ;}

.buttonin{background: url("info55.png") no-repeat 0 0;  position: absolute;height: 60px; width: 60px; border:0;}
.buttonin:hover{background: url("info55.png") no-repeat 0 0 !important }
.buttonin:active{background: url("info55.png") no-repeat -246px 0 !important ;}

.buttclo{background: url("close.png") no-repeat 0 0;  position: absolute;height: 137px; width: 137px; border:0;}
.buttclo:hover{background: url("close.png") no-repeat 0 0 !important }
.buttclo:active{background: url("close.png") no-repeat -246px 0 !important ;}


.buttonplu{background: url("plus90.png") no-repeat 0 0;  position: absolute;height: 90px; width: 90px; border:0;}
.buttonplu:hover{background: url("plus90.png") no-repeat 0 0 !important }
.buttonplu:active{background: url("plus90.png") no-repeat -246px 0 !important ;}

.buttonx1{background: url("atpa3.png") no-repeat 0 0; position: absolute;left: 1050px; top: 6px; height: 128px; width: 128px; border:0;}
.buttonx1:hover{background: url("atpa3.png") no-repeat 0 0 !important;}
.buttonx1:active{background: url("atpa3.png") no-repeat -246px 0 !important ;}
.butlogo{background: url("logo2.jpg") no-repeat 0 0; position: absolute;left: 30px; top: 100px; height: 80px; width: 496px; border:0;}
.butlogo:hover{background: url("logo2.jpg") no-repeat 0 0 !important;}
.butlogo:active{background: url("logo2.jpg") no-repeat -246px 0 !important ;}
.butmek{background: url("mekle.png") no-repeat 0 0; position: absolute;}
.butmek:hover{background: url("mekle.png") no-repeat 0 0 !important;}
.butmek:active{background: url("mekle.png") no-repeat -246px 0 !important ;}
.mybuta {position: absolute;background-color:lightgray;height:70px; width:900px; height:100px;border:4px gray solid;font-size: xx-large}
.button9{background: url("ok.jpg") no-repeat 0 0; position: absolute;left: 890px; top: 22px; height: 70px; width: 70px; border:0;}
.button9:hover{background: url("ok.jpg") no-repeat 0 0 !important;}
.button9:active{background: url("ok.jpg") no-repeat -246px 0 !important ;}
.butinfo{background: url("info.png") no-repeat 0 0; position: absolute;left: 970px; top: 7px; height: 98px; width: 98px; border:0;}
.butinfo:hover{background: url("info.png") no-repeat 0 0 !important;}
.butinfo:active{background: url("info.png") no-repeat -246px 0 !important ;}