html, body{
margin: 0px;
padding: 0px;
font-size: 1vw;
height: 100%;
width: 100%;
overflow: hidden;
}


.topline{
background: #444444;
color:white;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 3vw;
overflow: hidden;
z-index: 888;
padding: 0px;
margin: 0px;
overflow-x: auto;
}

.topline::-webkit-scrollbar {
  width: 0px;
}



.menu{
background: #444444;
color:white;
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 45px;
overflow: hidden;
z-index: 999;
display: flex;
align-items: center;
}

.menuimage{
width: 3vh; 
height: 3vh; 
filter:invert(100%);
}


.menuimage2{
padding: 0px;
margin: 0px;
margin-top: 5px;
position: absolute;
top: 0px;
right: 0px;
width: 35px; 
height: 35px;
z-index: 999;
}




.submenu{
background: #444444;
color:white;
position: absolute;
left: 0px;
bottom: -80vh;
width: 60vw;
height: 70vh;
overflow: hidden;
border-top: 1px solid #333333;
border-right: 1px solid #333333;

}

.submenuitemcont{
position: absolute;
top: 0.5%;
width: 30%;
height: 99%;
border-right: 1px solid #333333;
background: #444444;
}


.submenufav{
position: absolute;
width: 70%;
height: 99%;
overflow-y: auto;
}


.submenufav::-webkit-scrollbar {
  width: 0px;
}


.favico{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 10vw;
height: 9vw;
background: rgb(50,83,126); 
border: 1px solid rgb(64,97,140);
border-radius: 5px;
cursor:pointer;
}



.favico:hover{
border: 0.5px solid white;
}

.submenuitemcontr{
position: absolute;
top: 0.5%;
width: 38%;
height: 99%;
background: #444444;
}


.submenuitem{
cursor:pointer;
width:100%;
}

.submenuitem2{
cursor:pointer;
width:100%;
}


.submenuitem:hover{
background: gray;
}

.submenuitem2:hover{
background: gray;
}



.submenuitem >td{
padding-bottom: 1vw;
padding-left: 1vw;
border-bottom: 1px dotted #444444;
}

.submenuitem2 >td{
padding-top: 0.5vw;
padding-bottom: 0.5vw;
padding-left: 1vw;
border-bottom: 1px dotted #444444;
}


.arrow{
padding-top: 1vw;
width: 1vw;
filter: invert(100);
}

.favor{
width: 1.5vw;
filter: invert(100);
opacity: 0.7;
}

.favor2{
width: 1.4vw;
opacity: 0.7;
}


.main{
overflow: hidden;
position: absolute;
top: 3vw;
left: 0px;
width: 100%;
height: calc(100% - 45px);
}

.insdiv{
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
top: 3vw;
left: 0px;
width: 50%;
height: calc(100% - 6vw);

}


.tabldiv{
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
top: 3vw;
left: 50%;
width: 50%;
height: calc(100% - 6vw);
}


.bigbtn{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 15vw;
height: 10vw;
border: 0px solid rgb(64,97,140);
border-radius: 12px;
background: rgb(64,97,140);
cursor: pointer;
color: white;

}


.bigbtn2{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 12vw;
height: 12vw;
border: 1px solid rgb(64,97,140);
border-radius: 12px;
background: rgb(64,97,140);
cursor: pointer;
color: white;

}


.bigbtnb{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 32vw;
height: 9vw;
border: 1px solid rgb(64,97,140);
border-radius: 12px;
background: rgb(64,97,140);
cursor: pointer;
color: white;

}


.bigbtn:hover{
background: rgb(50,83,126);
}

.bigbtn2:hover{
background: rgb(50,83,126);
}

.bigbtnb:hover{
background: rgb(50,83,126);
}


.bigbtimage{
filter: invert(100%);
width: 5vw;
}

.favbtimage{
filter: invert(100%);
width: 2vw;
}

.auth{
position: absolute;
top: 2vw;
left: 35vw;
width: 45vw;
height: 30vw;
}

.aurhimage{
width: 10vw;
height: 10vw;
opacity: 0.7;
}

.authtext{
width: 35vw;
height: 2vw;
border: 1px solid gray;
background: transparent;
outline: none;
}

.authbtn{
width: 4vw;
height: 2.8vw;
border: 1px solid rgb(50,83,126);
font-size: 1vw;
background: rgb(50,83,126);
color:white;
border-radius: 5px;
cursor: pointer;
}


.authbtn:hover{
background: rgb(64,97,140);
}

.textbox{
width: 100%;
height: 4vh;
border: 1px solid #444444;
outline: none;
}


.textareabox{
width: 100%;
height: 15vh;
border: 1px solid #444444;
outline: none;
}

.button{
width: 20%;
height: 6vh;
background: white;
color: #444444;
border: 1px solid #555555;
cursor: pointer;
outline: none;
}

.button:hover{
background: #2c2695;
color: white;
}


.bland{
pointer-events: none;
opacity: 0.2;
}


.loader{
width: 3vw;
height: 5.3vh;
position: absolute;
top: 35vh;
left: 45vw;
display:none;

}

.hombut{
display: flex;
justify-content: center;
align-items: center;
width: 2.5vw;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
filter: invert(100);

cursor: pointer;
}



.navbut{
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
margin: 0px;
height: 90%;
width: 13vw;
border-radius: 5px 5px 0px 0px;
background: gray;
color: white;
cursor: default;
font-size: 0.9vw;
position: absolute;
bottom: 0px;
}




.navactive{
background: white;
color: black;
cursor: default;
}

.navbut:hover{
background: #dddddd;
color: black;
}

.closetab{
width: 0.8vw;
height: 0.8vw;

position: absolute;
top:0.3vw;
right: 0.3vw;
cursor: pointer;
}



.infoarea{
position: absolute;
top: 0px;
left: 0px;
display: none;
margin: 0px;
padding: 15px; 
width: 100%;
height: calc(100% - 48px);
}


.inputarea{
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
width:50%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden; 
}






.resultarea{
position: absolute;
top: 0px;
right: 0px;
margin: 0px;
padding: 0px;
width:50%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}



.inputarea::-webkit-scrollbar {
  width: 1px;
  background: rgb(64,97,140);
}

.resultarea::-webkit-scrollbar {
  width: 1px;
  background: rgb(64,97,140);
}


.formtable{
width: 90%;
}


.textfild{
width: 100%;
height: 25px;
border: 1px solid gray;
}