@import url("reset.css");

html { height: 100%; position: relative; }

body { font-family: 'Roboto Condensed', sans-serif; height: 100%; position: relative; background-color: #EEEDDD; overflow: hidden; }

.menuli { font-size: 18px; margin: 2px 15px; padding: 2px;}
.menuli:hover { background-color: #E39048; cursor: pointer; }
.menuhd { font-size: 18px; margin: 5px 25px 2px 10px; font-weight: 700;}

.log { font-size: 18px; margin: 2px 25px; }

h1 { margin: 15px; }
h2 { margin: 15px; }
a, a:hover, a:focus, a:active { text-decoration: none; color: inherit; }

.tspan { display: inline-block; }
.t1 { display: inline-block; width: 60px; font-size: 18px; margin: 2px 10px 2px 20px; vertical-align: top; padding-top: 8px; }
.t2 { display: inline-block; width: 330px; font-size: 18px; margin: 2px 10px 2px 20px; }
.t3 { display: inline-block; width: 220px; font-size: 18px; margin: 2px 10px 2px 20px;  vertical-align: top; padding-top: 8px; }
.t4 { display: inline-block; width: 150px; font-size: 18px; margin: 2px 10px 2px 20px; }
.t5 { display: inline-block; width: 290px; font-size: 18px; margin: 2px 10px 2px 20px; }
.t6 { display: inline-block; width: 180px; font-size: 18px; margin: 2px 10px 2px 20px; }
.t7 { display: inline-block; width: 70px; font-size: 18px; }
.t8 { display: inline-block; width: 110px; font-size: 18px; text-align:right; }
.t9 { display: inline-block; width: 40px; font-size: 18px; }
.t10 { margin-top: 5px; }

.s1 { display: inline-block; width: 50px; font-size: 16px; overflow:hidden; }
.s2 { display: inline-block; width: 130px; font-size: 16px; overflow:hidden; }
.s3 { display: inline-block; width: 80px; font-size: 16px; overflow:hidden; }
.s4 { display: inline-block; width: 40px; font-size: 16px; overflow:hidden; }
.s5 { display: inline-block; width: 250px; font-size: 16px; overflow:hidden; }

.r1 { display: inline-block; font-size: 18px; overflow: hidden; margin: 2px 10px 2px 10px; vertical-align: top; padding-top: 8px; }
.r2 { display: inline-block; font-size: 18px; overflow: hidden; margin: 2px 10px 2px 10px; }
.r3 { display: inline-block; font-size: 15px; overflow: hidden; }
.r4 { display: inline-block; font-size: 13px; overflow: hidden; }
.r5 { display: inline-block; font-size: 20px; font-weight: 700; overflow: hidden; }
.r6 { display: inline-block; font-size: 26px; font-weight: 700; overflow: hidden; }
.r7 { display: inline-block; font-size: 18px; overflow: hidden; }

.ml10 { margin-left: 10px; }
.pl10 { padding-left: 10px; }

.l1:hover { background-color: #E39048; cursor: pointer; }

.w1 { width: 10px; }
.w2 { width: 20px; }
.w3 { width: 30px; }
.w4 { width: 40px; }
.w5 { width: 50px; }
.w6 { width: 60px; }
.w7 { width: 70px; }
.w8 { width: 80px; }
.w9 { width: 90px; }
.w10 { width: 100px; }
.w11 { width: 110px; }
.w12 { width: 120px; }
.w13 { width: 130px; }
.w14 { width: 140px; }
.w15 { width: 150px; }
.w16 { width: 160px; }
.w17 { width: 170px; }
.w18 { width: 180px; }
.w19 { width: 190px; }
.w20 { width: 200px; }
.w21 { width: 210px; }
.w22 { width: 220px; }
.w23 { width: 230px; }
.w24 { width: 240px; }
.w25 { width: 250px; }
.w26 { width: 260px; }
.w27 { width: 270px; }
.w28 { width: 280px; }
.w29 { width: 290px; }
.w30 { width: 300px; }
.w31 { width: 310px; }
.w32 { width: 320px; }
.w33 { width: 330px; }
.w34 { width: 340px; }
.w35 { width: 350px; }
.w36 { width: 360px; }
.w37 { width: 370px; }
.w38 { width: 380px; }
.w39 { width: 390px; }
.w40 { width: 400px; }
.w50 { width: 500px; }
.w60 { width: 600px; }
.w70 { width: 700px; }
.w80 { width: 800px; }


.tbutton { border-radius: 5px; background-color: #E39048; color: #041848; cursor: pointer; padding: 6px 16px; margin: 4px; font-size: 14px; }
.tinput { border-radius: 5px; background-color: #E0E0E0; color: #041848; width: calc(100% - 14px); margin: 6px; border: 1px solid #444444; height: 30px; padding: 7px; }
.ttextarea { border-radius: 5px; background-color: #E0E0E0; color: #041848; width: calc(100% - 14px); margin: 6px; border: 1px solid #444444; height: 120px; padding: 7px; }
.tselect { background-color: #E0E0E0; color: #041848; }

.tbutton:disabled { background-color: #CCCCCC; }

.bcr { background-color: #FFCCCB; }

.btn-pink { color: #212529; background-color: #ffcccb; border-color: #eeeeee; }


.level1 {
display: grid;
grid-template-columns: 15px 250px 3px 1fr 15px;
grid-template-rows: 15px 1fr 15px;
grid-column-gap: 0px;
grid-row-gap: 0px;

position: relative;
height: 100vh;
width: 100vw;
}

.menu { grid-area: 2 / 2 / 3 / 3; background-color: #EEEEEE; height: 100%; position: relative;}
.col { grid-area: 2 / 3 / 3 / 4; background-color: black; height: 100%; position: relative;}
.content { grid-area: 2 / 4 / 3 / 5; background-color: #DDDDDD; height: 100%; position: relative;}

.c { text-align: center; }

.msg { color: red; margin: 5px; }
.red { color: red; }
.q { width: 15%; display: inline-block; }
.q1 { width: 34%; display: inline-block; }
.q2 { width: 33%; display: inline-block; }
.q3 { width: 22%; display: inline-block; }
.q4 { width: 42%; display: inline-block; }
.q5 { width: 11%; display: inline-block; }

.lg { font-size: 24px; margin:10px 15px 10px 15px; font-weight: 700; }
.reg { font-size: 18px; }






@media (max-width: 1500px) { 

  .creategrid {
  grid-template-columns: 1fr 20fr 1fr 20fr 1fr;
  grid-template-rows: 3fr repeat(3, 12fr) 1fr;
  }
  
  .level1 {
  grid-template-columns: 1px 5fr 3px 39fr 1px;
  grid-template-rows: 1px 35fr 1px;
  }
}