@charset "UTF-8";

:root{
	--ct-blue: #00529e;
	--white: #ffffff;
	--ct-red: #d40019;
    --ct-option-hover: #69d7f3;
}

/* Start Global rules */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* End Global rules */

/* Start body rules */
body {
	background-attachment: fixed;
 	background-repeat: no-repeat;
    font-family: 'Vibur', cursive;
	/*   the main font */
	    font-family: 'Abel', sans-serif;
	opacity: .95;
}

/* End body rules */

/* Start form  attributes */
form {
    width: 450px;
    height: auto;
    border-radius: 5px;
    margin: 2% auto;
    box-shadow: 0 0 12px 5px hsl(209deg 28% 31%);
    padding: 2%;
}
/* form Container */
form .con {
    display: -webkit-flex;
    display: flex;
  
    -webkit-justify-content: space-around;
    justify-content: space-around;
  
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  
      margin: 0 auto;
}

/* the header form form */
header {
    margin: 10px;
    text-align: center;
    width: 100%;
}

header .logo{
	background: #ffffff url(../images/ct-logo.png) no-repeat center center/200px 134px;
    padding: 50px 0;
}

/* Login title form form */
header h2 {
    font-size: 250%;
    font-family: 'Playfair Display', serif;
    color: #3e403f;
}
/*  A welcome message or an explanation of the login form */
header p {letter-spacing: 0.05em;}

#login-grid{
	margin-left: 10px;/* position cheat..*/
}

.input-item {
    background: #fff;
    color: #333;
    padding: 14.5px 10px 15px 10px;
    margin-right: 5px;
}

/* Show/hide password Font Icon */
#eye {
    background: #fff url('../images/eye-icon-16.png') no-repeat;
    color: #333;
    margin: 22px 0 0 10px;
    padding: 15px 30px 0 0;
    float: right;
    position: relative;
    right: 1%;
    top: -.2%;
    z-index: 5;
    cursor: pointer;
}
/* inputs form  */
input[class="form-input"],
select.form-input
{
    width: 250px;
    height: 50px;
  
    margin-top: 2%;
    padding: 15px;
    
    font-size: 16px;
    font-family: 'Abel', sans-serif;
    color: #5E6472;
  
    outline: none;
    border: 1px solid var(--ct-blue);
  
    border-radius: 5px;
    transition: 0.2s linear;
    
}
input[id="loginName"] {width: 250px;}
/* focus  */
input:focus {
    transform: translateX(-2px);
    border-radius: 5px;
}

/* buttons  */
button {
	background-color: var(--ct-blue);
	border: none;
    border-radius: 2px;
	color: var(--white);
	cursor: pointer;
	display: inline-block;
    letter-spacing: 0.05em;
    margin: 10px 10px;
	overflow: hidden;
    padding: 10px 10px;
	position: relative;
    text-align: center;
	text-decoration: none;
    width: 280px;
}

button:focus-visible {
    outline-width: 3px;
    outline-color: var(--ct-option-hover);
    outline-style: solid;
}

/* Submits */
.submits {
    display: inline-block;
    float: left;
    margin-left: 2%;
}

/*       Forgot Password button FAF3DD  */
.frgt-pass {background: transparent;margin-left: 5px;}

/*     Sign Up button  */
.sign-up, .frgt-pass {
	background-color: var(--ct-blue);
    color: var(--white);
    float: left;
    margin-left: 5px;
    width: 150px;
}

.other{
	display: inline-flex;
}

.other.centered{
	padding: 15px 0 0 0;
	display: flow-root;
	text-align: center;
}

.login-error{
	width:100%;
	text-align: center;
	color: var(--ct-red);
}

button:after {
	content: "";
	background: #2073e3;
	display: block;
	position: absolute;
	padding-top: 300%;
	padding-left: 350%;
	margin-left: -20px !important;
	margin-top: -120%;
	opacity: 0;
	transition: all 0.8s
}

button:hover {
	background: #1c81c9;
	transition: all 0.3s
}

button:active:after {
	padding: 0;
	margin: 0;
	opacity: 1;
	transition: 0s
}

.field-set .user-item{
	background: #ffffff url("../images/user-icon-16.png") no-repeat center right/16px 16px;
}

.field-set .password-item{
	background: #ffffff url("../images/key-icon-16.png") no-repeat center right/16px 16px;
}

.remembercbx{
	margin: 0 10px 0 0;
}

@keyframes ani9 {
    0% {
        transform: translateY(3px);
    }
    100% {
        transform: translateY(5px);
    }
}

.progressbar {	
	margin-left:calc(50% - 50.4px);
	opacity: 0.0;
}

.progress {
   width: 100.8px;
   height: 16.8px;
   background: linear-gradient(var(--ct-blue) 50%,#0000 0),
        linear-gradient(#0000 50%,var(--ct-blue) 0),
        linear-gradient(var(--ct-blue) 50%,#0000 0),
        linear-gradient(#0000 50%,var(--ct-blue) 0),
        linear-gradient(var(--ct-blue) 50%,#0000 0),
        linear-gradient(#0000 50%,var(--ct-blue) 0)
        #dbdcef;
   background-size: calc(100%/6 - 1px) 200%;
   background-repeat: no-repeat;
   animation: progress-qh65fe 2s infinite;
}

@keyframes progress-qh65fe {
   0% {
      background-position: 0% 100%, 20%   0%, 40% 100%, 60%   0%, 80% 100%, 100%   0%;
   }

   16.67% {
      background-position: 0%   0%, 20%   0%, 40% 100%, 60%   0%, 80% 100%, 100%   0%;
   }

   33.33% {
      background-position: 0%   0%, 20% 100%, 40% 100%, 60%   0%, 80% 100%, 100%   0%;
   }

   50% {
      background-position: 0%   0%, 20% 100%, 40%   0%, 60%   0%, 80% 100%, 100%   0%;
   }

   66.67% {
      background-position: 0%   0%, 20% 100%, 40%   0%, 60% 100%, 80% 100%, 100%   0%;
   }

   83.33% {
      background-position: 0%   0%, 20% 100%, 40%   0%, 60% 100%, 80%   0%, 100%   0%;
   }

   100% {
      background-position: 0%   0%, 20% 100%, 40%   0%, 60% 100%, 80%   0%, 100% 100%;
   }
}

.fadein {
	transition: 0.8s;
	opacity: 1.0;
}

.hidden {
	opacity: 0.0;	
}

.none-inline{
	display: none !important;
}

button:disabled {
	cursor: default;
	transition: all 0s;
	background: #c0c0c0;
}

button:disabled:hover {
	animation: none;
	transform: none;
}

.LoadWaitMessage{
	position: absolute;
	top: 0;
    width: 100%;
    text-align: center;
    background: rgba(0, 201, 147, 0.85);
    color: #fff;
    padding: 10px 0;
}

.downarrow {
	width: 20px;
	height: 20px;
	background: transparent center no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8l256 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z"/></svg>');
}

.editable-dropdown-container {
	display: flex;
	align-items: center;

    width: 250px;
    height: 50px;
  
    margin-top: 2%;
    padding: 15px;
    
    font-size: 16px;
    font-family: 'Abel', sans-serif;
    color: #5E6472;
  
    outline: none;
    border: 1px solid var(--ct-blue);
  
    border-radius: 5px;
    transition: 0.2s linear;

	margin-left: 25px;
	cursor: pointer;
}

.editable-dropdown-container input {
	border: none;
	outline: none;
	font-size: 16px;
	cursor: pointer;
}

.editable-dropdown-component {
	position: relative
}

.editable-dropdown-container .input-container {
	width: 100%;
}

.dropdown-items {
	border: 1px solid var(--ct-blue);
	position: absolute;
    top: 50px;
    left: 20px;
    min-width: 250px;
    height: 200px;
    background-color: white;
    z-index: 999;
    padding: 10px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.dropdown-items ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.dropdown-items ul li {
	padding-bottom: 5px;
	padding-top: 5px;
	cursor: pointer;
}

.dropdown-items ul li:hover {
	background-color: var(--ct-option-hover);
	color: white;
}

.dropdown-items ul li.selected {
	background-color: var(--ct-blue);
	color: white;
}

.backdropQr {
	display: none;
	position: fixed;
	width: 100vw;
	height: 100vh;
	cursor: pointer;
	background: #00000088;
	top: 0;
	z-index: 1000;
}

.backdropQr.active {
	display: flex;
	align-items: center;
    text-align: center;
}

.modalQr {
    border-radius: 5px;
    margin: 2% auto;
    box-shadow: 0 0 12px 5px hsl(209deg 28% 31%);
    padding: 2%;
	background: #ffffff;
	cursor: initial;
	width: 450px;
}