.primary {var(--primary-color)}
.secondary {var(--secondary-color)}
.tertiary {var(--tertiary-color)}


/* login page styles  */

a:link {color:var(--primary-color) !important;}
a:hover {color:var(--secondary-color) !important;}

html, body {background-color: var(--primary-color) !important; color:#fff !important;}
div#content {height:100vh;}
div#content .column.masthead, div#content .column.login {height:100%;}

.column.masthead {background-color: var(--primary-color); color:#fff;padding-left:0;height:100vh;}
.column.masthead .row.inner {padding-left:3.0rem;margin-top:2.0rem;}
.column.masthead p {font-size:22px;}





.column.login {background-color: #fff; color:#000;padding:3.0rem;height:100vh;}

.button.primary {background-color: var(--primary-color) !important; color:#fff !important;}
.button.primary:hover {background-color: var(--secondary-color) !important; color:#000 !important;}

.button.secondary {background-color: var(--tertiary-color) !important; color:#8d8d8d !important;}
.button.secondary:hover {background-color: var(--secondary-color) !important; color:#000 !important;}


.button {border-radius: 22px !important;}

.login-icon {max-width: 122px;margin-top:1.0rem;margin-bottom:3.0rem;}

.login.button {
  min-width:144px;border-radius:32px !important;
  font-family: "Mokoko Bold", serif;
  font-optical-sizing: auto;
  font-weight: <500>;
  font-style: normal;}
  
.registration.button {min-width:144px;border-radius:32px !important; color:#3B3B3B !important;}


.miia_divider {
  position: relative;
  width: 100%; /* Expands across the width of the parent container */
  height: 22px; /* Fixed height for the vertical sides */
  background-color: transparent; /* Transparent background */
  border-right:3px solid currentColor;
}

.miia_divider::before,
.miia_divider::after {
  content: '';
  position: absolute;
  width: 3px; /* Fixed width for the vertical sides */
  height: 22px; /* Fixed height for the vertical sides */
  top: 0;
  background-color: currentColor; /* Color informed by the additional class */
}

.miia_divider::before {
  left: 0; /* Position the left vertical bar */
}

.miia_divider::after {
  right: 0; /* Position the right vertical bar */
}

.miia_divider::after {
  content: '';
  position: absolute;
  width: 100%; /* Horizontal line spans the full width */
  height: 3px; /* Thickness of the horizontal line */
  top: 50%; /* Center the horizontal line vertically */
  background-color: currentColor; /* Color informed by the additional class */
  transform: translateY(-50%);
}



/* Color classes */
.miia_divider.primary {
  color: var(--primary-color); 
}

.miia_divider.secondary {
  color: var(--tertiary-color); 
}

.miia_divider.success {
  color: #28a745; 
}

/* Add more colors as needed */




/* Show/hide Password */


.show-password {
  width: 90%;
}

.show-password .username,  .show-password .password{
  border-radius: 22px !important;
  background-color: var(--tertiary-color) !important;
  padding-left:1.0rem;
  color:#7D7D7D;
}

.show-password ::placeholder {
  color: #7D7D7D;
  opacity: 1; /* Firefox */
}

.show-password ::-ms-input-placeholder { /* Edge 12 -18 */
  color: #7D7D7D;
}

.show-password label {
  position: absolute;
  left: -9999px;
  text-indent: -9999px;
}

.show-password label.RememberMe {
  position: relative !important;
  left: 0 !important;
  text-indent: 0 !important;
}

.password-wrapper {
  position: relative;
}


.password + .unmask {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #aaa;
  font-size: 1.2em;
}

.password + .unmask:hover {
  color: #000; /* Optional: Change icon color on hover */
}

.password + .unmask:focus {
  outline: none; /* Remove focus outline */
}

.remember-wrapper{
  float: right;
  margin-right:22px;
}

.switch.small {float:left;}

.switch.small .switch-paddle
{border-radius:22px;}

.switch.small input:checked~.switch-paddle:after {
border-radius: 10px;
}

.switch.small .switch-paddle:after {
border-radius: 10px;
}

input:checked~.switch-paddle {
background: var(--primary-color) !important;
}

.rem_label {float:right;display:inline-block;margin-left:0.7rem;font-size:14px;margin-top:4px;}

    
    h1,h5 {
  font-family: "Mokoko Bold", serif;
  font-optical-sizing: auto;
  font-weight: <500>;
  font-style: normal;
}  

.intro-text{
  font-family: "GTAmerica Condensed Regular", serif;
  font-optical-sizing: auto;
  font-weight: <500>;
  font-style: normal;
}  
  
.intro-text a {color:#fff;text-decoration: underline;}    
.intro-text a:hover {color:var(--tertiary-color);text-decoration: none;}    

    
    
    
    
/* Tablet and smaller */
@media screen and (max-width: 63.9375em) {


div#content {height:auto;}
div#content .column.masthead, div#content .column.login {height:auto;}

.column.masthead {background-color: var(--primary-color); color:#fff;padding-left:0;height:auto;}
.column.login {background-color: #fff; color:#000;padding:3.0rem;height:auto;}


}
/* end Tablet and smaller */