@import url("reset.css");

body { text-align: center; font-family: sans-serif; overflow: hidden; }

a:link { color: #7523C7 }
a:visited { color: #A866ea }
a:active { color: #FF9900 }
a:hover { background-color: #FFFFFF; }
a { text-decoration: none; }

h2 { text-align: center; margin: 10px; }

.container {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-columns: 170px minmax(0, 1fr); 
  grid-template-rows: 92px 35px minmax(0, 1fr); 
  gap: 0px 0px; 
  grid-template-areas: 
    "logo banner"
    "menu user"
    "menu content";
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  height: 100vh;
  
  position: relative;  
}
.logo { grid-area: logo; background: #FFFFFF; }
.content { grid-area: content; background: #EEEEEE; overflow-y: auto; max-height: 100%; }
.banner { display: grid; grid-area: banner; background: #7413DC; font-size: 55px; font-family: 'Nunito Sans'; font-weight: 800; place-items: center; color: black; }
.user { grid-area: user; background: #DDDDDD; text-align: center; }
.menu { grid-area: menu; background: #CCCCCC; }

td.a { width: 155px; text-indent: 8px; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0px; font-size: 14px; }
td.b { width: 155px; font-weight: bold; height: 30px; vertical-align: bottom; border-width: 0px; font-size: 14px; }
td.c { width: 155px; height: 30px; vertical-align: bottom; border-width: 0px; font-size: 14px; }

.sb { color: #7523C7; cursor: pointer; }
.sb:hover { background-color: #FFFFFF; }

#auth { display: none; border-radius: 10px; border: 5px solid #7523C7; position: absolute; width: 600px; max-width: calc(100% - 30px); height: 300px; top: 95px; left: 80px; background-color: #E0E0E0; padding: 10px; }

p.a { margin: 10px 5px 5px 5px; font-size: 14px; }
p.ar { margin:10px 1px 1px 1px; color:red; font-size: 14px; }

.a1 { width: 90%; float: left; margin-top: 60px; }
.a2 { width: 100%; display: table; height: 60px; position: absolute; top: 0px; }
.a3 { width: 100%; clear: both; height: 80px; position: absolute; bottom: 0px; }

.h1 { display: table-cell; vertical-align: middle; font-size: 30px; padding-left: 20px; }
.h2 { display: table-cell; vertical-align: middle; text-align: right; margin-right: 50px; }
.t1 { display: inline-block; width: 100px; }
.t2 { display: inline-block; width: 400px; }
.t3 { display: inline-block; width: 600px; }

.s1 { font-size: 30px; text-align: center; }
.s2 { text-align: center; }

.msg { display: inline-block; font-size: 16px; color: red; margin: 10px 10px 10px 10px; }

.l1 { font-size: 16px; margin: 5px 0px 5px 10px; }

button { border-radius: 5px; background-color: #7523C7; color: #FFFFFF; cursor: pointer; padding: 10px 20px; margin: 6px; }
input { border-radius: 5px; background-color: #E0E0E0; color: #041848; width: calc(100% - 14px); margin: 6px; border: 1px solid #444444; height: 20px; padding: 2px; font-size: 14px; }
textarea { border-radius: 5px; background-color: #E0E0E0; color: #041848; width: calc(100% - 14px); margin: 6px; border: 1px solid #444444; height: 120px; padding: 7px; }
select { background-color: #E0E0E0; color: #041848; }

ul.docs { list-style: none; text-align: left; margin-left: 20px; font-size: 14px; }

p.a { margin: 10px 5px 5px 5px; font-size: 14px; }
p.ar { margin:10px 5px 5px 5px; color:red; font-size: 14px; }
p.b { font-size: 24px; text-align: center; margin-top: 50px; margin-bottom: 20px; }
p.c { margin:10px 10px 10px 10px; text-align: left; font-size: 14px; }

table { border-width: 0px; border-spacing: 0px; border-style: none; border-collapse: collapse; margin-left: auto; margin-right: auto; }
th { border-width: 1px; padding: 3px; border-style: solid; border-color: black; background-color: #57BCD9; text-align: center; }
td { border-width: 1px;	padding: 3px;	border-style: solid; border-color: black; }