/* This stylesheet is being shared across all templates */

/* The rest of the custom fonts are google fonts */
html{height:100%;}
body{padding:0px;margin:0px;font-family:'Open Sans', sans-serif;background:#e6eaea;color:#000;font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
input{font-family:'Open Sans', sans-serif;}
a{font-size:14px;color:#00a3e0;text-decoration:none;}
a{text-decoration:underline;}
ul{margin:0px;padding:0px;}
li{list-style: none;}
textarea,
button,
select{font-family:'Open Sans', sans-serif;;outline:none;cursor:pointer;}
strong,b{font-weight:700;}
button,
input[type="button"],
input[type="submit"]:not(:disabled){-webkit-appearance:none;cursor:pointer;}
input[type="radio"],
input[type="checkbox"]{cursor:pointer;}
img{border:0px;}
:focus,
:active{outline:none!important;}

/****** HEADER.begin ******/
.header{transition:top 0.8s;position:fixed;left:0;right:0;width:100%;background:#100b0c;top:-100%;z-index:20;}
.header >.inner{padding:10px;position:relative;}

.header .logo{text-align:center;}
.header .text{padding:0 0 0 0;font-size:26px;color:#fff;font-weight:600;transition:font-size 0.4s;}
.header .text span{color:#86bd24;font-weight:700;}
/****** HEADER.end ******/


/****** LOGIN PAGE.begin ******/
.loginPg{background:#000;height:100%;}
.login{color:#fff;display:table;table-layout:fixed;width:100%;height:100%;}

.login .header{position:static;background:#000;}
.login .header >.inner{padding:20px 20px 0px 20px;}
.login .logo_1{padding: 0 0 40px; display:block;}
.login .header .logo_2{padding:0px 0px 46px 0px;}
.sub_title{padding:0px 0px 20px 0px;font-size:28px;}

.login .title{font-size:14px;font-weight:400;margin:0px;}

.login .form_welcome{position:static;padding:0px 20px;}
.login .form_welcome .error { background: #ffffff; display: flex; flex-direction: row; border-radius: 8px; align-items: center; justify-content: flex-start; padding:2px 0; border:1px solid #D0D0D0; color: #000000;}
.login .form_welcome .error::before{content:"\e002"; font-family: 'Material Symbols Outlined'; display:block; margin: 0 12px; padding: 7px 0; font-size:18.5px; line-height:19px; color: rgb(238,143,0);}
.login .form_welcome .error span{font-weight: bold}
.login .side{display:table-cell;vertical-align:top;position:relative;height:auto;width:500px;}
.login .side .line_1{padding:0px;width:auto;}
.login .img{display:table-cell;vertical-align:middle;color:#fff;width:100%;text-align:center;}
.login .img img{max-width:100%;}

.login .forms{padding:0px 0px 20px 0px;}
.login .forms input:not(.button):not([type="button"]) {border:0px;padding:11px;box-sizing:border-box;font-size:14px;width:100%;}
.login .forms .form .label{padding:0px 0px 10px 0px;}
.login .forms .form .label label{font-size:14px;font-weight:700;}
.login .forms .form .entry{padding:0px 0px 20px 0px;}
.login .forms .form .errorMessage{color:#bbbcbc;font-size:11px;padding:4px 0px 0px 0px;}
.login .forms .form .btn_1 input{display:inline-block;font-size:16px;font-weight:700;min-width:104px}
.login .forms .form .btn_1 input:active{background:#0076a8;}
.login .forms .form .btn_1 input:hover{background:#62b5e5;}
.login .forms .form .radio-entry{display:flex; align-items: center; justify-content: flex-start; padding:0;}
.login .forms .form .radio-entry .field input{display:none;}
.login .forms .form .radio-entry .field span{cursor:pointer; padding:10px;}
.login .forms .form .radio-entry .field span::before{display:block; content:"\e836"; font-family: "Material Symbols Outlined"; font-size:24px;}
.login .forms .form .radio-entry .field:has(input[checked]) span::before{content:"\e837";}
.login .forms .form .radio-entry .label {margin-left:10px;}
.login .forms .form .radio-entry .label label, .login .forms .form .radio-entry .label span {display:block; cursor:pointer;}
.login .forms .form .radio-entry .label span{font-size:12px;}


.login .forms .form.open,
.login .forms .form.close{overflow:hidden;height:0px;padding:0px;transition:height 0.3s;}
.login .forms .form.open{height:auto;padding:10px 0px 20px;}

.login .forms .contact form textarea{width:100%;border:0px;}

.login .forms .qr_code {margin:25px 0 10px;text-align:center;}

.register{padding-bottom:20px;}

.landing { width:100%; }
.qrcode_column {float:left; width:48%; text-align:left; margin: 0 2% 0 2%; padding:0;}
.mfa_left_column{float:left; width:48%; margin:2%;}
.mfa_column {float:left; width:48%; text-align:left; padding:85px 0 0; margin:0;}
a.whiteLinks{font-weight:700; text-decoration:none;}

/****** LOGIN PAGE.end ******/


/****** SIDE COLUMN.begin ******/
.side.no_children{background:#000;}
.side >.inner{width:285px;height:100%;background:#000;}

/* COLLAPSE-EXPAND */
.side .x{color:#fff;padding:7px;width:16px;line-height:10px;text-align:center;float:right;font-size:14px;cursor:pointer;position:relative;z-index:3;top:5px;right:-10px;}
.side .x:before{content:"\24";font-family:'icons2';display:block;font-size:24px;position:relative;left:-9px;}
.side .x.tab{display:none;}



/* LOGO */
.side .line_1{padding:20px 20px 20px 20px;transition:padding 0.4s;background:#000;z-index:2;position:relative;width:260px;}
.side .line_1 .logo{padding:0px 0px 5px 0px;}
.side .line_1 .img{padding:20px 0px;}
.side .line_1 .img1{display:none;}
.side .line_1 .text{padding:20px 0px 0px 0px;font-size:26px;color:#fff;font-weight:600;}
.side .line_1 .text span{color:#86bd24;font-weight:700;}
/****** SIDE COLUMN.end ******/


/****** CONTENT.begin ******/
#login-copyright {
    font-size: 14px;
    font-weight: bold;
}
/****** FOOTER.end ******/

/****** BUTTONS.begin ******/

.btn_1, .black_btn, .white_btn {padding:15px 0px;}

.btn_1.green { background-color:#86BC25; }
.btn_1 > .green { background-color:#86BC25 !important; }

.btn_1 input[type="button"],
.btn_1 input[type="submit"],
.btn_1 a,
.black_btn input[type="button"]:not(.button-outlined),
.black_btn input[type="submit"]:not(.button-outlined),
.black_btn a:not(.button-outlined),
.white_btn input[type="button"],
.white_btn input[type="submit"],
.white_btn a{transition: all 0.2s;padding:13px 30px !important;text-align:center;margin-left:10px;font-weight:700 !important;font-size:16px !important;text-decoration:none;border-radius:8px;border:0;}
.black_btn input[disabled]{opacity: 0.5; cursor: not-allowed;}

.black_btn .button-outlined { color:#000; background-color:rgba(255,255,255,0.32);padding:13px 30px;text-align:center;margin-left:10px;font-weight:700;font-size:16px;text-decoration:none;border-radius:8px;border:1px solid #000 !important;}
.black_btn .button-outlined:first-child, .black_btn {margin-left:0px;}

.black_btn input[type="button"]:not(.button-outlined),
.black_btn input[type="submit"]:not(.button-outlined),
.black_btn a:not(.button-outlined),
.white_btn input[type="button"],
.white_btn input[type="submit"],
.white_btn a { border:1px solid #000 !important;}

.black_btn input[type="button"]:not(.button-outlined),
.black_btn input[type="submit"]:not(.button-outlined),
.black_btn a:not(.button-outlined){background:#000; color: #fff}

.white_btn input[type="button"],
.white_btn input[type="submit"],
.white_btn a{background:#fff; color: #000;}

.black_btn input[type="button"]:not(:disabled):not(.button-outlined):hover,
.black_btn input[type="submit"]:not(:disabled):not(.button-outlined):hover,
.black_btn a:not(.button-outlined):not(:disabled):hover{background:rgba(0,0,0,0.64);}

.black_btn .button-outlined:not([disabled]):hover{background:rgba(0,0,0,0.04);}


.white_btn input[type="button"]:hover,
.white_btn input[type="submit"]:hover,
.white_btn a:hover{background:rgba(255,255,255,0.64);}


.btn_1 input[type="button"],
.btn_1 input[type="submit"],
.btn_1 a{background:#00a3e0; color: #fff; border:1px solid;}

.btn_1 input[type="button"]:hover,
.btn_1 input[type="submit"]:hover,
.btn_1 a:hover{background:#62b5e5;text-decoration:none;}

.btn_1 input[type="button"]:active,
.btn_1 input[type="submit"]:active,
.btn_1 a:active{background:#0076a8;}

.btn_1 input[type="button"]:first-child,
.btn_1 input[type="submit"]:first-child,
.btn_1 a:first-child,
.black_btn input[type="button"]:first-child,
.black_btn input[type="submit"]:first-child,
.black_btn a:first-child,
.white_btn input[type="button"]:first-child,
.white_btn input[type="submit"]:first-child,
.white_btn a:first-child{margin-left:0!important;}

/****** BUTTONS.end ******/

/****** COMMON.begin ******/
.inp_1 {background:#fff none repeat scroll 0 0;border:1px solid #bebebe;padding:0 6px;}
.inp_1 input[type="text"]{border:0 none;padding:6px 0;}
.form{width:auto;padding:5px 0px;font-size:14px;}
.form .entry {padding:0px 0px 5px 0px; clear: both;}
.form .entry .label{padding-bottom:3px;font-size:14px;min-width:120px;float:none;color:#7f7f74;}
.hasDatepicker,
.form .entry .input{border:1px solid #D0D0D0; background:#fff;}
.form .entry .input.password {position:relative}
.form .entry .input.password .icon{color:#000;}
.form .entry .input.password .icon::before{content:"\e8f4"; font-family: 'Material Icons'; font-size:24px; position:absolute; top:0; right:0; height:100%; cursor:pointer; padding:0 10px; display: flex; justify-content: center; align-items: center; transition: all 0.2s}
.form .entry .input.password .icon:hover {color:rgba(0, 0, 0, 0.64);}
.form .entry .input.password.revealed .icon::before {content:"\e8f5"; }
.form .entry .input input{width:100%;font-size:18px;border:0px;width:100%;font-size:14px;color:#666;padding:10px 0px;outline:0px;font-weight:normal;}
.form .entry .input textarea{width:100%;max-width:100%;border:0px;margin:10px 0px;font-size:14px;color:#666;}
.form .entry .input select{border:0px;width:100%;max-width:100%;padding:10px 0px; color:#666;font-size: 14px;}
.form .entry .input select[multiple="multiple"]{padding:10px;}
.form .entry .date .input{border:0px;padding:0px;}
.form .entry .date .input input{display:inline;width:auto;border:1px solid #333;margin-right:10px;padding:10px;}
.ie7 .form .entry .input.select {border:0px;padding:0px;background:inherit;}
.form .entry div .tmpl_item {float:left;width:216px;height:130px;text-align:center;padding:8px;}
.form .entry div .tmpl_item img {display:block;margin:0 auto;}
.form .entry div .tmpl_item.selected {background-color: #696969;color: #ffffff;}
.form .entry .radio {border:0px solid #333;padding:5px 0px;}
.form .entry .radio .label{display:inline;}
.form .entry .radio .input{display:inline;border:0px;padding:0px;}
.form .entry .radio .input input{width:auto;margin:0px;padding:0px;}

#password_requirements {background:#fff; padding:2px; border-radius:8px; }
#password_requirements ul li{color:#000;display:flex;align-items:center;font-size:14px;font-weight: 600; transition:all 0.2s; border-radius: 8px; padding:2px 5px;}
#password_requirements ul li::before {font-family:"Material Symbols Outlined";content:"\e5c9";margin-right:8px;color:#D2202F;font-size:18px; font-weight:400;transition:all 0.2s;}
#password_requirements ul li.valid::before {content:"\e86c"; color:rgb(0, 125, 52); font-weight: 400;}

.hidden{display:none;}
.fc{max-width:947px;margin:0 auto;}
.clear{display:block;clear:both;float:none!important;}
/****** COMMON.end ******/

/****** MFA.begin ******/
.form.mfa input.button{width: auto}
.form.mfa .input{padding-bottom: 20px}
.mc.login>.inner{padding:24px 24px;}
#mfa-step-1{display: none}
#mfa-step-2{display: none}
.spacer{height: 40px}
.spacer-sm{height: 16px}
.button, input[type="submit"]{text-transform: capitalize;}
.no_padding{padding: 0;}
input#_code{border: 1px solid #D0D0D0}
/******* MFA.end *******/


/**** FLUID / RESPONSIVE.begin ****/

@media all and (max-width:1024px){
  .side {width:100%; margin:0; position:static !important;}
  .img {display: none !important;}
  .whiteLinks, #login-copyright { font-size: 11px;}
  .login .side { width:100%;}


  /* Side menu and header */
  .header{top:0%;}
  .side{left:-300px;}

  .side .x{display:none;}
  .side .x.tab{display:block;}

  .mob .cont,
  .cont{padding:80px 20px 0px 20px;}
  .footer{padding:10px 20px 40px 20px;}


  .tab .header{top:-100%;}
  .tab .side{left:0px;}
  .tab .side .over{background:#000;position:fixed;width:100%;height:100%;top:0px;left:0px;z-index:-1;opacity:0.25;visibility:visible;transition:opacity 0.4s;}
  .tab .cont{padding-left:25px;}

  /* The page title */
  .cont h1,
  .cont .main_title{font-size:52px;}
}

.signin-button {
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
    text-decoration: none;
    box-sizing: border-box;
    background: #fff;
    color: #000;
    transition: all 0.2s;
    border-radius: 8px;
    border:1px solid #000;
}

.signin-button:hover {
    background: rgba(255, 255, 255, 0.64);
}

.signin-logo {
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

.signin-button-text {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

/**** PRINT ONLY.begin ****/
@media print{
    .header,
    .side{display:none;}
}
/**** PRINT ONLY.end ****/

/**** snackbar.begin ****/
#snackbar {padding: 10px; overflow:hidden; position:absolute; bottom: 10px; left:10px; right:10px; transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);}
#snackbar ul{min-height: 0px; width:100%; list-style: none; margin-bottom: 20px;}
#snackbar ul li { border-radius: 8px; padding: 6px 16px; color: #fff;display: none; flex-direction: row; align-items: center; justify-content: flex-start;box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);transform: translateX(-120%); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);}
#snackbar ul li:before {font-size:17.5px; line-height:18px; font-family: 'Material Icons'; display:block; margin-right: 12px; padding: 7px 0;}
#snackbar ul li span {display: block; font-weight: 600; font-size:14px;}
#snackbar ul.alert-success li {background:rgb(0, 125, 52);}
#snackbar ul.alert-success li::before {content:"\e2e6";}
#snackbar ul.alert-error li {background: #D2202F;}
#snackbar ul.alert-error li:before {content: "\e000";font-family: 'Material Symbols Outlined';}
/**** Alerts.end ****/

#mfa_countdown{font-size:12px; opacity:0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease;}
#mfa_countdown.visible{opacity:1; visibility: visible;}

#send_password_reset_request_mfa{text-transform: none; border:2px solid !important; padding:6px 18px;}