* {box-sizing: border-box;}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.w-100{width: 100%;}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.input-field.suffix i {
  position: absolute;
  width: 0rem;
  font-size: 2rem;
  transition: color .2s;
  top: 0px;
  right: 0px;
}

.text-left{text-align: left!important;}
.text-center{text-align: center!important;}
.text-white{color: #fff !important;}
.text-orange{color: #E56F47!important}

.title{color:#fff; font-size: 40px;}
.subtitle{color:#fff; font-size: 25px!important;}


th, td{text-align: center!important; vertical-align: middle!important; border-radius:0!important}

.p0{padding: 0 !important;}
.p1{padding: 0.25rem !important;}
.p2{padding: 0.5rem !important;}

.m-0{margin: 0!important;}
.m-1{margin: 0.25rem!important;}
.m-2{margin: 0.5rem!important;}
.m-4{margin: 1rem!important;}
.mb0{margin-bottom: 0!important}
.mb2{margin-bottom: 16px!important}
.mt0{margin-top: 0!important;}
.mt4{margin-top: 32px!important}
.my-auto{margin-top:auto!important; margin-bottom: auto!important;}
.m-auto{margin: auto;}
.my2{margin-top: 0.5rem!important; margin-bottom: 0.5rem!important;}

.d-flex{
  display: flex;
}
.align-items-center{
  align-items: center;
}

.btn-logout{background-color: #E56F47!important}
.btn-logout:hover{background-color: #b75737!important}

@media only screen and (max-width: 768px){
  .title{font-size: 30px!important;}
  .subtitle{font-size: 20px!important;}
}

@media only screen and (max-width: 557px){
  .title{font-size: 20px!important;}
  .subtitle{font-size: 15px!important;}
}