/*   ===============   START GENERAL STYLING   ===============   */

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  /* font-family: -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica,
  Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif; */
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-weight: 400;
  overflow-x: hidden;
}

#home {
  display: flex;
  flex-direction: column;
  height: 100%;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

.t-a-l {
  text-align: left;
}

.t-a-c {
  text-align: center;
}

.t-a-r {
  text-align: right;
}

.c-position {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-ransform: translate(-50%, -50%);
  -moz-ransform: translate(-50%, -50%);
  -ms-ransform: translate(-50%, -50%);
  -o-ransform: translate(-50%, -50%);
}

.l-position {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  -webkit-ransform: translate(0, -50%);
  -moz-ransform: translate(0, -50%);
  -ms-ransform: translate(0, -50%);
  -o-ransform: translate(0, -50%);
}

.r-position {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  -webkit-ransform: translate(0, -50%);
  -moz-ransform: translate(0, -50%);
  -ms-ransform: translate(0, -50%);
  -o-ransform: translate(0, -50%);
}

.row {
  margin: 0 !important;
}

.clearfix {
  clear: both;
}

.d-n {
  display: none;
}

.cursor {
  cursor: pointer;
}

:root {
  --red: #EA5253;
  --green: #65BB38;
  --darkRed: #469276;
  --darkBlue: #0c2625;
}

.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 99999999999999;
	background-color: #F1F7EB;
}

.lds-dual-ring {
  display: inline-block;
  width: 60px;
  height: 60px;
}

.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 60px;
  height: 60px;
  margin: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  border-color: var(--green) #E5EBDF #E5EBDF #E5EBDF;
  animation: lds-dual-ring 1s linear infinite;
  -webkit-animation: lds-dual-ring 1s linear infinite;
  -moz-animation: lds-dual-ring 1s linear infinite;
  -ms-animation: lds-dual-ring 1s linear infinite;
  -o-animation: lds-dual-ring 1s linear infinite;
}

.lds-dual-ring img {
  width: 40px;
  position: absolute;
  top: 22px;
  left: 18px;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes lds-dual-ring {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loading {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

.empty-box {
  width: 380px;
  margin: 3em auto 0;
  text-align: center;
}

.empty-box .mso {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background-color: #e1e8da;
  color: var(--darkBlue);
  font-size: 1.75em;
  font-weight: 300;
  border-radius: 50%;
  margin: 1.35em auto .65em;
}

.empty-box .eb-heading {
  color: var(--darkBlue);
  font-size: .85em;
  font-weight: 500;
}

.empty-box .eb-par {
  color: #506566;
  font-size: .85em;
  font-weight: 400;
  margin-top: .7em;
}

.empty-box .btn {
  width: 192px;
  font-size: .65em;
  font-weight: 600;
  color: #FFF;
  padding: 0 1em;
  height: 33px;
  line-height: 33px;
  background: var(--red);
  margin-top: .5em;
  border-radius: 0;
  box-shadow: none;
}

.sls-btn {
   padding: 0 1.65em;
   height: 32px;
   line-height: 31px;
   border-radius: 0;
   background: #FFF;
   border: 1px solid var(--green);
   color: var(--darkBlue);
   font-size: .65em;
   font-weight: 600;
   box-shadow: none;
   margin: 2.5em auto 0;
   display: block;
   position: relative;
}

button:disabled,
button[disabled]{
  border: 1px solid #E5EBDF !important;
  background-color: #E5EBDF !important;
}

.sls-btn .moreDataSpinWrapper {
  width: 18px;
  height: 18px;
  border-radius: 100%;
}

.sls-btn .moreDataSpinWrapper .spin {
  width: 18px;
  height: 18px;
}

.sls-btn .moreDataSpinWrapper .spin:after {
  content: " ";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #edf0f5;
  border-color: var(--darkBlue) transparent var(--darkBlue) transparent;
  animation: loading 1s linear infinite;
  -webkit-animation: loading 1s linear infinite;
  -moz-animation: loading 1s linear infinite;
  -ms-animation: loading 1s linear infinite;
  -o-animation: loading 1s linear infinite;
}

.loadingDataWrapper {
  width: 100%;
  padding: 6em 0;
  position: relative;
  z-index: 10;
}

.loadingDataWrapper .spin {
  width: 50px;
  height: 50px;
  border: 2px solid #D9FAE7;
  border-radius: 50%;
  border-color: var(--darkBlue) transparent var(--darkBlue) transparent;
  margin: auto;
  -webkit-animation: loading 1s linear infinite;
  animation: loading 1s linear infinite;
}

/*   ===============   END GENERAL STYLING   ===============   */

/*   ===============   START LOGIN NAV STYLING   ===============   */

.nav {
  width: 100%;
  padding: 0 1em;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 999999;
  background-color: #F1F7EB;
  border-bottom: 1px solid #c5ccbe;
}

.nav .logo {
  color: var(--darkBlue);
  font-size: 1.25em;
  font-weight: 600;
  left: 1em;
  padding: .64em 0;
  cursor: pointer;
}

.nav img {
  width: 100px;
  display: block;
  padding: .92em 0;
  cursor: pointer;
}

.nav .mso {
  font-size: 1.65em;
  font-weight: 300;
  display: block;
  padding: .42em 0;
  color: var(--darkBlue);
  cursor: pointer;
}

.nav .add-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--darkBlue);
}

.nav .add-btn .mso2 {
  color: #FFF;
  font-size: 1.3em;
  font-weight: 400;
}

#login {
  width: 768px;
  margin: 50px auto 0;
  padding-bottom: 2rem;
  flex: 1;
}

#login .login-body {
  width: 100%;
  padding: 3em 1.5em;
}

#login .login-body .lb-heading {
  color: var(--darkBlue);
  font-size: 1.6em;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 1em;
}

#login .login-body .lb-par {
  color: #455250;
  font-size: .88em;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 1em;
}

#login .login-body .features {
  margin-top: 1.5em;
  padding-left: 1em;
}

#login .login-body .features .feature {
  padding: .85em 1em .85em 2.25em;
  position: relative;
}

#login .login-body .features .feature .f-circle {
  width: 30px;
  height: 30px;
  border-radius: 0 20px 0 20px;
  background-color: var(--green);
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
}

#login .login-body .features .feature .f-circle .mso {
  color: #FFF;
  font-size: 1.1em;
  font-weight: 500;
}

#login .login-body .features .feature .f-heading {
  color: var(--darkBlue);
  font-size: .88em;
  font-weight: 500;
  margin-bottom: .45em;
}

#login .login-body .features .feature .f-par {
  color: #455250;
  font-size: .82em;
  font-weight: 400;
}

#login .login-body .registration {
  margin-top: 1.5em;
}

#login .login-body .registration .col {
  padding: 0 .2em;
}

#login .login-body .registration .btn {
  width: 100%;
  font-size: .65em;
  font-weight: 500;
  box-shadow: none;
  height: 40px;
  line-height: 38px;
  border-radius: 12px;
  border: 1px solid var(--darkBlue);
  margin-top: .5em;
  padding: 0;
}

#login .login-body .registration .btn1 {
  color: #FFF;
  background-color: var(--darkBlue);
}

#login .login-body .registration .btn2 {
  color: var(--darkBlue);
  background-color: #F1F7EB;
}

/*   ===============   END LOGIN NAV STYLING   ===============   */

/*   ===============   START TERMS STYLING   ===============   */

#terms {
  width: 768px;
  margin: 54px auto 0;
  padding: 3rem 0 3rem;
  flex: 1;
}

#terms .terms-heading {
   color: var(--darkBlue);
   font-size: 1.15em;
   font-weight: 500;
   margin-bottom: .35em;
}

#terms .terms-par {
   color: var(--darkBlue);
   font-size: .88em;
   font-weight: 400;
   margin: 1em 0;
   line-height: 1.5;
}

#terms .bold {
   font-weight: 500;
}

#terms .terms-heading2 {
   color: var(--darkBlue);
   font-size: 1em;
   font-weight: 500;
   margin-top: 2em;
}

#terms ul li {
  color: var(--darkBlue);
  font-size: .88em;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: .85em;
}

/*   ===============   END TERMS STYLING   ===============   */

/*   ===============   START FOOTER STYLING   ===============   */

footer {
  background-color: #e4e8df;
  margin-top: 0;
}

footer .col {
  padding: 0;
}

footer .footer-ls,
footer .footer-rs {
  overflow: hidden;
  padding: 1em 0;
}

footer span {
  color: var(--darkBlue);
  cursor: pointer;
  font-size: .8em;
  font-weight: 400;
  padding: 0 1.25em;
}

footer .footer-ls span {
  float: left;
}

footer .footer-rs span {
  float: right;
}

/*   ===============   END FOOTER STYLING   ===============   */

/*   ===============   START SHOWCASE STYLING   ===============   */

#showcase {
  width: 100%;
  padding: 2.5rem .5rem;
  background-color: var(--darkBlue);
  margin-top: 50px;
}

#showcase .showcase-heading {
  color: #FFF;
  font-size: 1.65em;
  font-weight: 500;
  margin-bottom: .65em;
}

#showcase .showcase-par {
  color: #98a6a5;
  font-size: .85em;
  font-weight: 400;
  line-height: 1.5;
}

#showcase .blocks {
  margin-top: 2em;
  padding-bottom: .35em;
}

#showcase .blocks .col {
  padding: .35em;
}

#showcase .blocks .block {
  background-color: #F1F7EB;
  border-radius: 20px;
  padding: 1.25em;
  cursor: pointer;
  position: relative;
}

#showcase .blocks .block .mso {
  color: var(--green);
  font-size: 2.25em;
  font-weight: 300;
  margin-bottom: .65em;
}

#showcase .blocks .block .block-circle {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background-color: var(--darkBlue);
  position: absolute;
  top: 1em;
  right: 1em;
}

#showcase .blocks .block .block-circle .mso2 {
  color: #FFF;
  font-size: 1em;
  font-weight: 400;
  cursor: pointer;
}

#showcase .blocks .block .block-heading {
  color: var(--darkBlue);
  font-size: .9em;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: .5em;
}

#showcase .blocks .block .block-par {
  color: #607370;
  font-size: .85em;
  font-weight: 400;
}

#showcase .blocks .bl4 {
  background-color: rgba(255, 255, 255, .05);
}

#showcase .blocks .bl4 .block-circle {
  background-color: #FFF;
}

#showcase .blocks .bl4 .block-circle .mso2 {
  color: var(--darkBlue);
}

#showcase .blocks .bl4 .block-heading {
  color: #FFF;
}

#showcase .blocks .bl4 .block-par {
  color: #98a6a5;
}

/*   ===============   END SHOWCASE STYLING   ===============   */

/*   ===============   START REMINDER STYLING   ===============   */

#reminder {
  width: 100%;
  padding: .65em;
  text-align: center;
  background-color: #ff636c;
}

#reminder .reminder-par {
  color: #FFF;
  font-size: .83em;
  font-weight: 400;
}

/*   ===============   END REMINDER STYLING   ===============   */

/*   ===============   START RECENT REPORTS STYLING   ===============   */

#reports {
  width: 100%;
  padding: 2rem .5rem 5rem .5rem;
}

.reports {
  margin-top: 50px;
}

#reports .reports-heading {
  color: var(--darkBlue);
  font-size: 1.35em;
  font-weight: 500;
  margin-bottom: .65em;
}

#reports .reports-par {
  color: #455250;
  font-size: .86em;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 1.25em;
}

#reports .filter-input-wrapper {
  padding-right: 2.8em;
  position: relative;
}

#reports .filter-input-wrapper .fiw-icon {
  width: 37px;
  height: 37px;
  background-color: var(--darkBlue);
  border-radius: 12px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

#reports .filter-input-wrapper .fiw-icon .fiMso {
  color: #FFF;
  font-size: 1.25em;
  font-weight: 400;
}

#reports .input-wrapper {
  width: 100%;
  background-color: #e1e8da;
  position: relative;
  margin: 0 auto .5em;
  border-radius: 12px;
  padding: 0 1em;
  border: 1px solid #e1e8da;
  transition: .5s;
}

#reports .active-iw {
  background-color: #FFF;
  border: 1px solid var(--darkBlue);
  transition: .5s;
}

#reports .input-wrapper input {
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  height: 35px !important;
  line-height: 35px;
  font-size: 16px !important;
  box-shadow: none;
  color: var(--darkBlue);
  font-weight: 400;
  outline: none !important;
  z-index: 30;
  position: relative;
  border: none !important;
  border-radius: 0 !important;
}

#reports .input-wrapper input:focus {
  box-shadow: none !important;
}

#reports .input-wrapper .fk-placeholder {
  left: 1.25em;
  color: #455250;
  font-weight: 400;
  font-size: .83em;
  text-transform: unset;
}

#reports .rtabs {
  width: 100%;
  background-color: #F1F7EB;
  border-bottom: 1px solid #dae0d3;
  margin-bottom: 1.5em;
}

#reports .rtabs .col {
  padding: 0 !important;
}

#reports .rtabs .rttab {
  width: 100%;
  color: var(--darkBlue);
  font-size: .87em;
  font-weight: 500;
  padding: 1em 0 1.25em;
  text-align: center;
  cursor: pointer;
  border-bottom: 2px solid #F1F7EB;
}

#reports .rtabs .active-rttab {
  border-bottom: 2px solid var(--darkBlue);
}

.reports2 .report {
  margin-left: 0 !important;
  border-left: none !important;
  padding: 1em 1.5em !important;
  background-color: #E5EBDF;
  border-radius: 15px;
  margin-bottom: .5em;
}

#reports .report {
  width: 100%;
  padding: 1em 0 1em 2.25em;
  margin-left: .75em;
  position: relative;
  border-left: 1px solid var(--darkBlue);
}

#reports .report .report-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  background-color: #F1F7EB;
  border: 1px solid var(--darkBlue);
}

#reports .report .report-circle .mso {
  color: var(--darkBlue);
  font-size: 1.25em;
  font-weight: 400;
}

#reports .report .report-header {
  width: 100%;
  height: 24px;
  position: relative;
}

#reports .report .report-header .mso {
  color: var(--darkBlue);
  font-size: 1.35em;
  font-weight: 300;
  margin-top: 2px;
  margin-left: -5px;
}

#reports .report .report-header .num {
  width: 35px;
  height: 24px;
  line-height: 24px;
  color: #FFF;
  font-size: .73em;
  font-weight: 500;
  text-align: center;
  border-radius: 6px;
  left: 2.04em;
}

#reports .report .report-header .lnr1 {
  background-color: #FFF;
  color: var(--darkBlue);
}

#reports .report .report-header .lnr2 {
  background-color: #FFDD00;
  color: var(--darkBlue);
}

#reports .report .report-header .lnr3 {
  background-color: #0071C1;
}

#reports .report .report-header .lnr4 {
  background-color: #027446;
}

#reports .report .report-header .lnr5 {
  background-color: #C63539;
}

#reports .report .report-header .lnr6 {
  background-color: #F89828;
  color: var(--darkBlue);
}

#reports .report .report-header .lnr7 {
  background-color: #764712;
}

#reports .report .report-header .lnr8 {
  background-color: #A5449A;
}

#reports .report .report-header .lnr9 {
  background-color: #D0EDFB;
  color: var(--darkBlue);
}

#reports .report .report-header .lnr10 {
  background-color: #D8E8B0;
  color: var(--darkBlue);
}

#reports .report .report-header .lnr11 {
  background-color: #000000;
}

#reports .report .report-header .lnr12 {
  background-color: var(--darkBlue);
}

#reports .report .report-header .lnr13 {
  background-color: #FDCC99;
  color: var(--darkBlue);
}

#reports .report .report-header .lnr25 {
  background-color: #006FDE;
}

#reports .report .report-header .tram {
  color: var(--darkBlue);
  font-size: .87em;
  font-weight: 500;
  left: 5em;
}

#reports .report .report-header .station {
  color: var(--darkBlue);
  font-size: .87em;
  font-weight: 500;
  left: 1.8em;
}

#reports .report .report-header .rh-circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--darkBlue);
}

#reports .report .report-body {
  padding: 1em 1.5em 1em 0;
}

.reports2 .report .report-body {
  padding-bottom: 0 !important;
}

#reports .report .report-body .rb-par {
  color: #455250;
  font-size: .85em;
  font-weight: 400;
  line-height: 1.5;
}

#reports .report .report-footer {
  overflow: hidden;
}

#reports .report .report-footer .rf-par {
  color: #455250;
  font-size: .82em;
  font-weight: 400;
}

#reports .report .report-footer .thums-wrapper {
  margin-left: 2em;
}

#reports .report .report-footer .thums-wrapper .cursor {
  margin-left: 1em;
  display: inline-block;
}

#reports .report .report-footer .thums-wrapper .mso2 {
  color: #455250;
  font-size: 1em;
  font-weight: 400;
}

#reports .report .report-footer .thums-wrapper .shift-down {
  transform: rotate(180deg);
}

#reports .report .report-footer .thums-wrapper .vote {
  color: var(--darkBlue);
  font-size: .75em;
  font-weight: 500;
  position: relative;
  top: -.25em;
  padding-left: .35em;
}

#reports .more-data {
  width: 170px;
  height: 32px;
  line-height: 31px;
  text-align: center;
  color: #FFF;
  font-size: .7em;
  font-weight: 500;
  text-transform: uppercase;
  background-color: var(--darkBlue);
  border-radius: 3px;
  display: block;
  margin: 3.5em auto 0;
  cursor: pointer;
  border: none;
  position: relative;
}

#reports .more-data .spin {
  width: 18px;
  height: 18px;
}

#reports .more-data .spin:after {
  content: " ";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #edf0f5;
  border-color: #FFF transparent transparent transparent;
  animation: loading 1s linear infinite;
  -webkit-animation: loading 1s linear infinite;
  -moz-animation: loading 1s linear infinite;
  -ms-animation: loading 1s linear infinite;
  -o-animation: loading 1s linear infinite;
}

/*   ===============   END RECENT REPORTS STYLING   ===============   */

/*   ===============   START TABLE STYLING   ===============   */

table thead {
   border-bottom: 0;
}

table thead th {
   color: #546175;
   padding: 1.75em .65em;
   font-size: .65em;
   font-weight: 500;
   border-radius: 0;
   text-transform: uppercase;
}

table thead tr {
   border-radius: 0;
   border-bottom: none;
}

table tbody tr {
   position: relative;
   border-left: none;
   border-bottom: none;
}

table tbody tr:nth-child(odd) {
   background: #e1e8da;
}

table tbody tr:nth-child(even) {
   background: #F1F7EB;
}

table tbody tr:last-child {
   border-bottom: none;
}

table tbody td {
   font-weight: 500;
   padding: 1em .65em;
   color: var(--darkBlue);
   font-size: .82em;
   border-radius: 0;
   border: none;
   position: relative;
}

table tbody td .circle {
  width: 30px;
  height: 30px;
  color: #FFF;
  font-size: .92em;
  font-weight: 400;
  text-align: center;
  position: relative;
  background: #FFF;
  box-shadow: 0 2px 4px rgba(92, 176, 214, .65);
  -webkit-box-shadow: 0 2px 4px rgba(92, 176, 214, .65);
}

table tbody td .span {
  color: #455250;
  font-size: .87em;
  font-weight: 400;
  display: block;
  margin-top: .3em;
}

table tbody td .status {
  padding: 0 .65em;
  height: 20px;
  line-height: 20px;
  font-size: .72em;
  font-weight: 600;
  position: relative;
  top: -1px;
  color: #fff;
  border-radius: 0;
  text-transform: uppercase;
}

table tbody td .Active {
  background: var(--green);
}

table tbody td .Inactive {
  background: var(--red);
}

table tbody td .inStock {
  background: var(--green);
}

table tbody td .lowStock {
  background: var(--orange);
}

table tbody td .outStock {
  background: var(--red);
}

table tbody tr .circle .mso {
  color: var(--green);
  font-size: 1.5em;
  font-weight: 300;
}

table tbody tr .circle img {
  width: 22px;
}

table tbody tr .sp-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  overflow: hidden;
}

table tbody tr:nth-child(odd) .sp-circle {
   background: var(--mainColor);
}

table tbody tr:nth-child(even) .sp-circle {
   background: var(--darkBlue);
}

table tbody td .tbtn {
   width: 30px;
   height: 30px;
   box-shadow: none;
   border-radius: 100%;
   font-size: .75em;
   font-weight: 600;
   border: none;
   float: right;
   cursor: pointer;
   position: relative;
   background: var(--darkBlue);
}

table tbody td .tbtn .mso {
   font-size: 2em;
   font-weight: 500;
   color: #FFF;
}

table tbody td .btn:hover,
table tbody td .btn:focus {
   box-shadow: none;
}

table tbody td .mso3 {
   font-size: 1.75em;
   font-weight: 400;
   cursor: pointer;
}

table tbody td .b-btn {
   background: var(--darkBlue);
}

table tbody .sp-td {
   padding-left: 1.8em;
}

table tbody .sp-td .mso {
   color: var(--darkBlue);
   font-size: 1.35em;
}

table tbody td .num-wrapper {
   min-width: 45px;
   max-width: 45px;
   padding: 0 .25em;
   height: 32px;
   line-height: 30px;
   text-align: center;
   border-radius: 0;
   font-size: 1em;
   font-weight: 600;
   background: #FFF;
   border: 1px solid var(--green);
   color: var(--darkBlue);
   text-transform: uppercase;
   position: relative;
   top: -1px;
}

table tbody td .num-zero {
   background: var(--red);
   border: 1px solid var(--red);
   color: #FFF;
}

table tbody td .almost-zero {
   background: var(--orange);
   border: 1px solid var(--orange);
   color: #FFF;
}

table tbody td .mso2 {
  color: var(--darkBlue);
  font-size: 1.55em;
}

/*   ===============   END TABLE STYLING   ===============   */

/*   ===============   START MODAL STYLING   ===============   */

.custom-modal {
   width: 100%;
   height: 100%;
   max-height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   padding-bottom: 5rem;
   overflow-x: hidden;
   overflow-y: scroll;
   scrollbar-width: none;
   -webkit-scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
   scroll-behavior: smooth;
   z-index: 999999999;
   background-color: #F1F7EB;
}

.custom-modal::-webkit-scrollbar {
   width: 0;
   height: 0;
}

.custom-modal .cmcs {
   width: 30px;
   height: 30px;
   position: absolute;
   top: 0;
   background-color: #E5EBDF;
}

.custom-modal .cmc-ls {
   left: 0;
}

.custom-modal .cmc-rs {
   right: 0;
}

.custom-modal .cmcs .mso {
   color: var(--darkBlue);
   font-size: 1.2em;
   font-weight: 500;
}

.custom-modal .cm-heading {
   width: 100%;
   height: 30px;
   line-height: 35px;
   text-align: center;
   color: var(--darkBlue);
   font-size: .72em;
   font-weight: 500;
   text-transform: uppercase;
}

.custom-modal .close-btn {
   width: 60px;
   height: 30px;
   line-height: 30px;
   color: var(--darkBlue);
   font-size: .82em;
   font-weight: 400;
   text-align: center;
   border-radius: 100px;
   background-color: #e1e8da;
   position: absolute;
   top: .85em;
   cursor: pointer;
}

.custom-modal .cb1 {
   left: .85em;
}

.custom-modal .cb2 {
   right: .85em;
}

.custom-modal .custom-modal-content {
   width: 370px;
   background-color: #F1F7EB;
   margin: 4em auto;
   border-radius: 15px;
   position: relative;
}

.custom-modal .cmc2 {
   width: 325px !important;
}

.custom-modal .custom-modal-content .col {
   padding: 0;
}

.custom-modal .custom-modal-content .col2 {
   padding: 0 .25em;
}

.custom-modal .custom-modal-content .failed-msg {
  position: relative;
  padding: .25em 0 .25em 1.85em;
}

.custom-modal .custom-modal-content .failed-msg .failed-par {
  color: #ba1a27;
  font-size: .82em;
  font-weight: 400;
}

.custom-modal .custom-modal-content .failed-msg .failed-mso {
  color: #ba1a27;
  font-size: 1.25em;
  font-weight: 500;
}

.custom-modal .custom-modal-content .cmc-heading {
   color: var(--darkBlue);
   font-size: 1.3em;
   font-weight: 500;
   margin-bottom: .45em;
}

.custom-modal .custom-modal-content .cmc-par {
  color: #455250;
  font-size: .85em;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 1.5em;
}

.custom-modal .custom-modal-content .spCMCP {
  width: 250px;
  margin: auto;
}

.custom-modal .custom-modal-content .cmc-par2 {
  color: var(--darkBlue);
  font-size: .88em;
  font-weight: 400;
  line-height: 1.4;
  margin: 1em 0;
  background-color: #E5EBDF;
  padding: .65em 1em;
  border-left: 3px solid var(--red);
}

.custom-modal .custom-modal-content .cmc-par3 {
  color: #455250;
  font-size: .86em;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 1.15em;
}

.custom-modal .custom-modal-content .cmc-span {
  color: var(--darkBlue);
  font-size: .72em;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1em;
}

.custom-modal .custom-modal-content .types {
  width: 100%;
  padding: .25em;
  overflow: hidden;
  border-radius: 12px;
  margin: 0 0 1em;
  cursor: pointer;
  background-color: #e1e8da;
}

.custom-modal .custom-modal-content .types .type {
  width: 50%;
  float: left;
  height: 32px;
  line-height: 32px;
  border-radius: 10px;
  text-align: center;
  font-size: .72em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--darkBlue);
}

.custom-modal .custom-modal-content .types .active-type {
  background-color: var(--darkBlue);
  color: #FFF;
}

.custom-modal .custom-modal-content .fbtn {
  width: 35px;
  height: 35px;
  display: block;
  margin: 2.5em auto 0;
  background-color: #F1F7EB;
  border: 1px solid var(--darkBlue);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

.custom-modal .custom-modal-content .fbtn .fMso {
  color: var(--darkBlue);
  font-size: 1.5em;
  font-weight: 300;
}

.custom-modal .custom-modal-content .cmBtn {
  width: 100%;
  height: 42px;
  line-height: 42px;
  background-color: var(--darkBlue);
  border-radius: 12px;
  box-shadow: none;
  text-align: left;
  font-size: .83em;
  font-weight: 400;
  text-transform: unset;
  margin-bottom: .4em;
  padding: 0 1.5em;
  position: relative;
}

.custom-modal .custom-modal-content .cmBtn .mso {
  font-size: 1.8em;
  right: .35em;
}

.custom-modal .custom-modal-content .input-wrapper {
  width: 100%;
  background-color: #e1e8da;
  position: relative;
  margin: 0 auto .5em;
  border-radius: 12px;
  padding: 0 1em;
  border: 1px solid #e1e8da;
  transition: .5s;
}

.custom-modal .custom-modal-content .active-iw {
  background-color: #FFF;
  border: 1px solid var(--darkBlue);
  transition: .5s;
}

.custom-modal .custom-modal-content .sp-iw {
  background-color: #DFE3E8;
  border: 1px solid #DFE3E8;
  transition: .5s;
}

.custom-modal .custom-modal-content .input-wrapper input {
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  height: 35px !important;
  line-height: 35px;
  font-size: 16px !important;
  box-shadow: none;
  color: var(--darkBlue);
  font-weight: 400;
  outline: none !important;
  z-index: 30;
  position: relative;
  border: none !important;
  border-radius: 0 !important;
}

.custom-modal .SPCMC .input-wrapper input {
  font-weight: 500;
  height: 43px !important;
  line-height: 43px !important;
}

.custom-modal .custom-modal-content .input-wrapper input:focus {
  box-shadow: none !important;
}

.custom-modal .custom-modal-content .input-wrapper .fk-placeholder {
  left: 1.25em;
  color: var(--darkBlue);
  font-weight: 400;
  font-size: .83em;
  text-transform: unset;
}

.custom-modal .custom-modal-content .input-wrapper .mso {
  font-size: 1.2em;
  color: var(--darkBlue);
  font-weight: 300;
  left: .62em;
}

.custom-modal .custom-modal-content .subMenu {
  width: 100%;
  max-height: 132px;
  border-radius: 12px;
  background-color: #FFF;
  position: absolute;
  top: 37px;
  left: 0;
  padding: 0 .5em;
  z-index: 99;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -webkit-scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  box-shadow: 1px 1px 8px rgba(92, 176, 214, .35);
  -webkit-box-shadow: 1px 1px 8px rgba(92, 176, 214, .35);
}

.custom-modal .custom-modal-content .subMenu2 {
  max-height: 100% !important;
  padding: 0 !important;
  position: relative;
  top: 0 !important;
  left: 0 !important;
  background-color: #F1F7EB;
  box-shadow: none;
}

.custom-modal .custom-modal-content .subMenu::-webkit-scrollbar {
   width: 0;
   height: 0;
}

.custom-modal .custom-modal-content .subMenu .smLi {
  width: 100%;
  height: 35px;
  line-height: 35px;
  margin: .5em 0;
  position: relative;
}

.custom-modal .custom-modal-content .subMenu .smLi .smlCircle {
  width: 35px;
  height: 35px;
  background-color: #F1F7EB;
  border-radius: 50%;
}

.custom-modal .custom-modal-content .subMenu .smLi .smlCircle .mso2 {
  color: var(--darkBlue);
  font-size: 1.25em;
  font-weight: 300;
}

.custom-modal .custom-modal-content .subMenu .smLi .smlText {
  color: var(--darkBlue);
  font-size: .9em;
  font-weight: 400;
  left: 3.25em;
}

.custom-modal .custom-modal-content .subMenu .smLi .lMso {
  color: var(--darkBlue);
  font-size: 1.35em;
  font-weight: 300;
  left: 0;
}

.custom-modal .custom-modal-content .subMenu .smLi .num {
  width: 35px;
  height: 24px;
  line-height: 24px;
  color: #FFF;
  font-size: .73em;
  font-weight: 500;
  text-align: center;
  border-radius: 6px;
  left: 2.35em;
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr1 {
  background-color: #FFF;
  color: var(--darkBlue);
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr2 {
  background-color: #FFDD00;
  color: var(--darkBlue);
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr3 {
  background-color: #0071C1;
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr4 {
  background-color: #027446;
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr5 {
  background-color: #C63539;
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr6 {
  background-color: #F89828;
  color: var(--darkBlue);
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr7 {
  background-color: #764712;
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr8 {
  background-color: #A5449A;
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr9 {
  background-color: #D0EDFB;
  color: var(--darkBlue);
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr10 {
  background-color: #D8E8B0;
  color: var(--darkBlue);
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr11 {
  background-color: #000000;
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr12 {
  background-color: var(--darkBlue);
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr13 {
  background-color: #FDCC99;
  color: var(--darkBlue);
}

.custom-modal .custom-modal-content .subMenu .smLi .lnr25 {
  background-color: #006FDE;
}

.custom-modal .custom-modal-content .subMenu .smLi .tram {
  color: var(--darkBlue);
  font-size: .87em;
  font-weight: 500;
  line-height: 1.25;
  left: 5.25em;
}

.custom-modal .custom-modal-content .subMenu .smLi .tram .in-span {
  font-weight: 400;
  display: block;
  font-size: .84em;
}

.custom-modal .custom-modal-content .subMenu .smLi .station {
  color: var(--darkBlue);
  font-size: .87em;
  font-weight: 500;
  line-height: 1.25;
  left: 2.25em;
}

.custom-modal .custom-modal-content .subMenu .smLi .station .in-span {
  font-weight: 400;
  display: block;
  font-size: .84em;
}

.custom-modal .custom-modal-content .form-btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-weight: 400;
  font-size: .82em;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
  text-transform: unset;
  position: relative;
  color: #FFF;
  background-color: var(--darkBlue);
}

.custom-modal .custom-modal-content .reset-btn {
  color: var(--darkBlue);
  background-color: #E5EBDF;
}

.custom-modal .custom-modal-content .form-btn .mso {
  font-size: 2em;
  color: var(--darkBlue);
}

.custom-modal .custom-modal-content .policy-par {
  color: #72808D;
  font-size: .8em;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 1.25em;
}

.custom-modal .custom-modal-content .policy-par a {
  color: var(--darkBlue);
  font-weight: 500;
}

.custom-modal .custom-modal-content .show-password {
  color: var(--darkBlue);
  font-size: .75em;
  font-weight: 400;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  padding-left: 2em;
}

.custom-modal .custom-modal-content .show-password .mso {
  color: var(--darkBlue);
  font-size: 1.35em;
  font-weight: 400;
}

.custom-modal .custom-modal-content .account-success {
  width: 300px;
  margin: 4em auto 2em;
  text-align: center;
}

.custom-modal .custom-modal-content .ac2 {
  margin: 6em auto 2em;
}

.custom-modal .custom-modal-content .account-success .mso {
  font-size: 3em;
  font-weight: 500;
  color: var(--teal);
}

.custom-modal .custom-modal-content .account-success .as-heading {
  font-size: 1em;
  color: var(--darkBlue);
  font-weight: 500;
  margin: .5em 0 .35em;
}

.custom-modal .custom-modal-content .account-success .as-par {
  color: #344242;
  font-size: .8em;
  font-weight: 400;
  line-height: 1.4;
}

/*   ===============   END MODAL STYLING   ===============   */

/*   ===============   MEDIA QURIES   ===============   */

@media only screen and (max-width: 600px) {

  .container {
    width: 100% !important;
    padding: 0 1rem;
  }

  .h-o-xs {
    display: none !important;
  }

  .empty-box {
    width: 100%;
  }

  #login {
    width: 100%;
  }

  #login .login-body {
    padding: 1.75em 1.5em;
  }

  #terms {
    width: 100%;
    padding: 1.75rem 1.5em 3rem;
  }

  #showcase {
    padding: 1.25rem 0 .65rem;
  }

  #showcase .showcase-heading {
    font-size: 1.35em;
  }

  #showcase .showcase-par {
    font-size: .8em;
  }

  #showcase .blocks .col {
    padding: .25em;
  }

  #showcase .blocks .block .mso {
    font-size: 1.85em;
  }

  #showcase .blocks .block {
    padding: 1em;
  }

  #showcase .blocks .block .block-circle {
    width: 28px;
    height: 28px;
    top: .85em;
    right: .85em;
  }

  #showcase .blocks .block .block-circle .mso2 {
    font-size: 1.15em;
  }

  #showcase .blocks .block .block-heading {
    font-size: .92em;
  }

  #showcase .blocks .block .block-par {
    font-size: .8em;
  }

  #reports {
    width: 100%;
    padding: 1.25rem 0 4rem 0;
  }

  #reports .reports-heading {
    font-size: 1.15em;
  }

  #reports .reports-par {
    font-size: .8em;
  }

  #reminder .reminder-par {
    font-size: .8em;
    line-height: 1.5;
  }

  .custom-modal .custom-modal-content {
     width: 100%;
     padding: 0 .5em;
  }

  .custom-modal .cmc2 {
     width: 100% !important;
  }

  .custom-modal .custom-modal-content .spCMCP {
    width: 100%;
    padding: 0 1.5em;
  }

  .custom-modal .custom-modal-content .account-success {
    width: 100%;
  }

}

@media only screen and (min-width: 601px) and (max-width: 767px) {

  .container {
    width: 100% !important;
    padding: 0 1rem;
  }

  .h-o-s {
    display: none !important;
  }

  #login {
    width: 100%;
  }

  #login .login-body {
    padding: 1.75em 1.5em;
  }

  #reports .reports-heading {
    font-size: 1.15em;
  }

  #reports .reports-par {
    font-size: .8em;
  }

  #reminder .reminder-par {
    font-size: .8em;
    line-height: 1.5;
  }

  #terms {
    width: 100%;
    padding: 1.75rem 1.5em 3rem;
  }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .container {
    width: 768px;
    padding: 0 1rem;
  }

  .h-o-m {
    display: none !important;
  }

  #login {
    width: 100%;
  }

  #login .login-body {
    padding: 1.75em 1.5em;
  }

  #terms {
    width: 100%;
    padding: 1.75rem 1.5em 3rem;
  }

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

  .container {
    width: 992px;
    padding: 0 1rem;
  }

  .h-o-l {
    display: none !important;
  }

}

@media only screen and (min-width: 1200px) {

  .container {
    width: 1200px;
    padding: 0 1rem;
  }

  .h-o-xl {
    display: none !important;
  }

}