/* sign in FORM */

#AmazonExchange {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/amazon.svg);
  }
  
  #AmazonExchange:hover {
        background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/white/amazon.svg);
  }
  
  #FacebookExchange {
      background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/facebook.svg);
        padding: 10px 0 10px 20px;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: 42%;
        width: 100%;
        height: 50px;
        color: #3d3d3d;
        border: none;
        background-size: 15px;
        border-radius: 4px;
        text-align: center;
  }
  
  #FacebookExchange:hover {
      background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/white/facebook.svg);
      color: #fff;
  
  }
  
  #GitHubExchange {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/github.svg);
  }
  
  #GitHubExchange:hover {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/white/github.svg);
  }
  
  #AppleExchange,#AppleManagedExchange {
      background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/apple.svg);
      padding: 10px 55px 10px 65px;
      background-color: #fff;
      background-repeat: no-repeat;
      background-position: 10%;
      width: 100%;
      height: 50px;
      color: #3d3d3d;
      border: none;
      background-size: 25px;
      border-radius: 4px;
      text-align: center;
      background-position: 42% 10px;
  }
  
  #AppleExchange:hover,#AppleManagedExchange:hover {
      background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/white/apple.svg);
      color: #fff;
  
  }
  
  #GoogleExchange {
      background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/google.svg);
      padding: 10px 0 10px 20px;
      background-color: #fff;
      background-repeat: no-repeat;
      background-position: 42%;
        width: 100%;
      height: 50px;
      color: #3d3d3d;
      border: none;
      background-size: 25px;
      border-radius: 4px;
      text-align: center;
  }
  
  #GoogleExchange:hover {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/white/google.svg);
      color: #fff;
  }
  #LinkedInExchange {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/linkedin.svg);
  }
  #LinkedInExchange:hover {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/white/linkedin.svg);
  
  }
  #MicrosoftAccountExchange {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/microsoft.svg);
  }
  #MicrosoftAccountExchange:hover {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/white/microsoft.svg);
  }
  #QQExchange {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/qq.svg);
  }
  #QQExchange:hover {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/white/qq.svg);
  }
  #TwitterExchange {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/twitter.svg);
  }
  #TwitterExchange:hover {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/white/twitter.svg);
  }
  #WeChatExchange {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/wechat.svg);
  }
  #WeChatExchange:hover {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/white/wechat.svg);
  }
  #WeiboExchange {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/colored/weibo.svg);
  }
  #WeiboExchange:hover {
    background-image: url(https://login.microsoftonline.com/static/tenant/templates/idp_logos/white/weibo.svg);
  }
  
  
  body{
      background-image: url("../img/1920x1080.jpg");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-position: 10% center;
  }
  
  body::before{
      content: ''; 
      width: 100%;
      height: 100vh;
      background: radial-gradient(76.56% 76.56% at 50% 9.75%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.49) 100%);
      mix-blend-mode: multiply;
      position: fixed;
      left: 0;
      top:0;
      z-index: 0;
  }
  .contentForm .closeContent{
      position: relative;
      left: 93%;
      top: 50px;
      }
  
  .contentForm .close {
      height: 25px;
      width: 25px;
      padding: 10px;
      display: inline-block;
  }
  
  .contentForm .close:after {
      font-size: 25px;
      color: #51675c;
      text-align: center;
  }
  
  .contentForm .close:hover:after {
      color: #000;
  }
  
  img.companyLogo{
      display:block;
      margin-top:1rem;
      height: 70px;
  }
  
  img{
      margin-left: auto;
      margin-right: auto;
  }
  
  .small-x:after {
    content: "\d7";
  }
  
  h3{
      font-family: 'Avenir Next LT Pro';
      color:#fff;
      font-size: 22px;
      line-height: 24px;
      text-align: left;
      margin-top: 0;
      margin-bottom: 15px;
  }
  
  h2{
      font-family: 'Avenir Next LT Pro';
      color:#fff;
      font-size: 22px;
      line-height: 24px;
      text-align: left;
      margin-top: 0;
      margin-bottom: 15px;
  }
  
  h1{
      display: none;
  }
  
  hr{border-top: 1px solid #deeae4;
      border-bottom: 0;
      border-left: 0;
      margin:30px 0 20px 0;}
  
  .contentForm{
      width:996px;
      margin:100px auto 0;
      position: relative;
      z-index: 1;
  }
  
  #AmazonExchange:hover{background-color:#36474f!important}
  #FacebookExchange:hover{background-color:#3b5595!important}
  #GitHubExchange:hover{background-color:#0f0f0f!important}
  #AppleExchange:hover,#AppleManagedExchange:hover{background-color:#0f0f0f!important}
  #GoogleExchange:hover{background-color:#c64a29!important}
  #LinkedInExchange:hover{background-color:#0274b3!important}
  #MicrosoftAccountExchange:hover{background-color:#01a4ef!important}
  #QQExchange:hover{background-color:#1a97df!important}
  #TwitterExchange:hover{background-color:#1da1f2!important}
  #WeChatExchange:hover{background-color:#4cc522!important}
  #WeiboExchange:hover{background-color:#e81123!important}
          #attributeList ul{padding:0}
          #attributeList ul li{list-style:none;margin:1rem 0}
          legend{font-weight:600}
          #attributeList ul li legend{display:block;text-align:left;float:none;border:none;font-size:14px;margin-bottom:0}
          #attributeList ul li fieldset{border:none}
          label{font-weight:600}
          #attributeList ul li label{float:left}
          #attributeList ul li.EmailBox label,#attributeList ul li.Password label,#attributeList ul li.TextBox label{display:none!important}
          #attributeList ul li label[for=country]{float:left;display:inline-block!important}
          #attributeList ul li label[for=cpiminternal_legalCountry]{float:none;text-align:left;display:block!important}
          #attributeList ul li label[for=cpiminternal_dateOfBirth]{float:none;text-align:left;display:block!important}
          #attributeList ul li input{outline:0;height:30px;width:70%;border-radius:unset;border:none;border-bottom:1px solid #ccc;box-shadow:none}
          #attributeList ul li input:focus{border:none;border-bottom:1px solid #1662c7}
          #attributeList ul li input::-webkit-input-placeholder{text-indent:20px}
          #attributeList ul li .attrEntry.validate input:invalid{border-color:#b00}
          #attributeList ul li .attrEntry .verify{margin-top:15px;padding-bottom:10px;position:relative;text-align:right}
          #attributeList ul li .attrEntry .verify #email_ver_but_send{width:50%;height:40px;background-color:#0067b8;color:#50685c;float:right}
          #attributeList ul li .attrEntry .verify #email_ver_but_send:hover{background-color:#0058ad}
          @media screen and (-ms-high-contrast:active){#attributeList ul li .attrEntry .verify button,.buttons #continue{border:1px dashed #50685c!important}
          #attributeList ul li .attrEntry .verify button:hover,.buttons #continue:hover{border:1px solid #50685c!important}
          }
          #attributeList ul li .attrEntry .verify #email_ver_but_verify{width:inherit;padding:0 20px;height:40px;background-color:#0067b8;color:#50685c;margin-left:148px}
          #attributeList ul li .attrEntry .verify #email_ver_but_verify:hover{background-color:#0058ad}
          #attributeList ul li .attrEntry .verify #email_ver_but_resend{padding:0 20px;border:0;font-size:1em;height:40px;right:0;bottom:-38px;background-color:#0067b8;color:#50685c;width:inherit;float:right;margin-left:5px}
          #attributeList ul li .attrEntry .verify #email_ver_but_resend:hover{background-color:#0058ad}
          #attributeList ul li .attrEntry .verify #email_ver_but_edit{margin-bottom:15px;border:none;color:#50685c;background-color:#0067b8;width:50%;height:40px;float:right}
          #attributeList ul li .attrEntry .verify #email_ver_but_edit:hover{background-color:#0058ad}
          #attributeList ul li .attrEntry .verify #email_ver_input_label{display:none!important}
          .self_asserted_container .row .panel-default{background-color: #f9f9f9;;padding:20px 30px;margin:auto;min-width:400px}
          .self_asserted_container .row .panel-default .panel-body{background-color:#50685c;margin:0 auto;margin-top:20px;margin-bottom:20px;max-width:380px;width:auto;padding:0}
          .self_asserted_container .row .panel-default .panel-body img.companyLogo{display:block;height:70px;margin-top:1rem}
          .self_asserted_container .row .panel-default .panel-body .branding h1{font-size:1.5em;color:#f5f5f5}
          .self_asserted_container .row .panel-default .panel-body h3{font-size:1.5em;color:#f5f5f5;margin-top:5px;margin-bottom:30px}
          .self_asserted_container .row .panel-default .panel-body .intro{display:none;text-align:left}
          .self_asserted_container .row .panel-default .panel-body .intro p{padding-top:9rem}
          .self_asserted_container .row .panel-default .panel-body #api #attributeVerification .pageLevel{color:#b00;text-align:left;margin-bottom:-10px}
          .self_asserted_container .row .panel-default .panel-body #api #attributeVerification .error{color:#b00;text-align:left;margin-top:10px}
          .errorText{border:none;padding:0;background:0 0;color:#a61e0c}
          .self_asserted_container .row .panel-default .panel-body #api .verifying-modal{display:none;margin-top:10px}
          .buttons button#email_ver_but_edit{visibility:hidden}
          .buttons button:hover#email_ver_but_edit{visibility:hidden}
          .buttons button:hover{background-color:#9c7713;border-color:#9c7713}
  
  #api{display: flex; flex-direction: column-reverse; flex-wrap: wrap; gap: 15px; padding-right: 88px;}
          
  #logreg-forms{
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }
  
  .mainContainer{display: flex; flex-direction: row; margin-top: 65px; margin: 65px auto 100px!important;}
  
  #logreg-forms .left{
      width: 50%;
      min-width: 498px;
      
  }
  
  #logreg-forms .right{
      width: 50%;
      min-width: 497px;
      border-left: 1px solid #deeae4;
      padding:0 98px 0 88px;; 
  }
  
  #logreg-forms .form-control, #logreg-forms select  {
      position: relative;
      box-sizing: border-box;
      height: auto;
      padding: 10px;
      font-size: 16px;
      width: 48%;
      max-width: 200px;
      float: left;
      margin: 1%;
      border: 1px solid #e2e2e2;
      border-radius: 0;
      background: #fff;
      color: #999;
      opacity: 1;
      font-family: 'Avenir LT Std', sans-serif;
  }
  
  #logreg-forms .form-control-x2{
      position: relative;
      box-sizing: border-box;
      height: auto;
      padding: 10px;
      font-size: 16px;
      width: 98%;
      max-width: 400px;
      float: left;
      margin: 1%;
      border: 1px solid #e2e2e2;
      border-radius: 0;
      background: #fff;
      color: #999;
      opacity: 1;
      font-family: 'Avenir LT Std', sans-serif;
  }
  
  #logreg-forms .form-control-x75{
      position: relative;
      box-sizing: border-box;
      height: auto;
      padding: 10px;
      font-size: 16px;
      width: 69%;
      max-width: 400px;
      float: left;
      margin: 1%;
      border: 1px solid #e2e2e2;
      border-radius: 0;
      background: #fff;
      color: #999;
      opacity: 1;
      font-family: 'Avenir LT Std', sans-serif;
  }
  
  
  
  #logreg-forms .btnx2{
      background: #50685c;
      width: 98%;
      margin: 1%;
      color: #fff;
      padding: 15px 0;
      font-size: 14px;
      border: 0;
      font-family: 'futurabook';
      text-transform: uppercase;
  }
  
  
  
  #logreg-forms .btn{
      background: #50685c;
      width: 49%;
      margin: 1%;
      color: #fff;
      padding: 15px 0;
      font-size: 14px;
      border: 0;
      font-family: 'futurabook';
      text-transform: uppercase;
  }
  
  #logreg-forms .btnx25{position: relative;
      box-sizing: border-box;
      height: auto;
      padding: 10px;
      font-size: 15px;
      width: 29%;
      max-width: 400px;
      float: left;
      border: 1px solid #e2e2e2;
      border-radius: 0;
      background: #50685c;
      color: #fff;
      opacity: 1;
      font-family: 'futurabook';
      text-transform: uppercase;
      margin-top: 2px!important;
  }
  
  
  #logreg-forms .btn:hover, #logreg-forms .btnx25:hover, #logreg-forms .btnx2:hover{
      background-color:#9c7713;
      border-color:#9c7713;
  }
  
  #logreg-forms button:hover{
      background-color:#9c7713;
      border-color:#9c7713;
  }
  
  #logreg-forms button[type="submit"]:hover{
      background-color:#9c7713;
      border-color:#9c7713;
  }
  
  #logreg-forms .social-login{
      margin:1 auto;
      min-height: 60px;
      font-family: 'Avenir LT Std', sans-serif;
  
  }
  
  #logreg-forms .or{
      font-size:15px;
      color:#999;
      text-align:center;
      font-family: 'Avenir LT Std', sans-serif;
      margin: 10px auto 5px;
      width: 100%;
      float: left;
  }
  #logreg-forms .social-login .social-btn.btn{
      font-weight: 100;
      color:white;
      width: 48%;
      margin: 1%;
      float: left;
      font-size: 12px;
      font-family: 'Avenir LT Std', sans-serif;
  
  }
  
  #logreg-forms a{
      padding-top:10px;
      color:#fff;
      font-family: 'Avenir LT Std', sans-serif;
  }
  
  #logreg-forms a.forget{
      font-family: 'Avenir LT Std', sans-serif;
      font-size: 10px;
  }
  
  #logreg-forms a:hover{
      padding-top:10px;
      color:#fff;
      text-decoration: none
  }
  
  
  #logreg-form .lines{
      width:200px;
      border:1px solid red;
  }
  
  select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;       /* Remove default arrow */
    background: url(../img/arrow.png) no-repeat right !important;
      background-size: 18px!important;
      background-position-x: 95%!important; /* Add custom arrow */
  }
  
  select:focus, select:active, select:empty{
      opacity: 1 !important;
      background: #fff !important;
  }
  
  #logreg-forms label {
      font-weight: 600;
      visibility: hidden;
      display: none;
  }
  
  #logreg-forms button[type="submit"]{
      margin-top: 10px;
      margin-bottom: 10px;
      display: block;
      width: 100%;
      height: 50px;
      background-color: #AEA780;
      border-radius: 0;
      color: #f5f5f5;
      font-size: 14px;
      border: none;
      line-height: 16px;
      font-family: 'Avenir LT Std', sans-serif;
      text-transform: uppercase;
  }
  
  #logreg-forms input[type="text" i] {
      position: relative;
      box-sizing: border-box;
      font-size: 16px;
      width: 100%;
      max-width: 100%;
      float: left;
      margin-bottom: 20px;
      border: 1px solid #AEA780;
      border-radius: 0;
      background: #fff;
      color: #3d3d3d;
      opacity: 1;
      font-family: 'Avenir LT Std', sans-serif;
      font-weight: 300;
      line-height: 18px;
      padding: 8px 12px;
      height: 50px;
  }
  
  #logreg-forms input[type="password" i] {
      -webkit-text-security: disc !important;
      position: relative;
      box-sizing: border-box;
      font-size: 16px;
      width: 100%;
      max-width: 100%;
      float: left;
      margin-bottom: 20px;
      border: 1px solid #AEA780;
      border-radius: 0;
      background: #fff;
      color: #3d3d3d;
      opacity: 1;
      font-family: 'Avenir LT Std', sans-serif;
      font-weight: 300;
      line-height: 18px;
      padding: 8px 12px;
      height: 50px;
  }
  
  #logreg-forms .form-reset, #logreg-forms .form-signup{ display: none; }
  
  #logreg-forms .form-signup input { margin-bottom: 2px;padding: 1px 2px; }
  
  #logreg-forms p{
      font-family: 'Avenir LT Std', sans-serif;
      font-size: 16px;
      text-align: justify;
      margin-top: 15px;
      color: #fff;
      font-weight: 500;
      margin-bottom: 5px;
  }
  
  #logreg-forms .p1{
      font-family: 'Avenir LT Std';
      font-weight: 300;
      font-style: normal;
      font-size: 15px;
      line-height: 18px;
      color: #fff;
      width: 350px;
      text-align: left;
  }
  
  #logreg-forms .p1 a{
      font-family: 'Avenir LT Std';
      font-weight: 300;
      font-style: normal;
      font-size: 15px;
      line-height: 18px;
      color: #fff;
      text-decoration: underline;
  }
  
  #logreg-forms .p1 a:hover{
      text-decoration: none;
  }
  
  #logreg-forms .form-check-label{
      font-family: 'Avenir LT Std', sans-serif;
      font-size: 11px;
      display: block;
      float: left;
      max-width: 90%;
      padding: 3px;
  }
  
  #logreg-forms .form-check{
      display: block;
      float: left;
  }
  
  
  #logreg-forms .form-check-contanier{
      width: 100%;
      clear: both;
      margin-top:15px;
  }
  
  #logreg-forms .form-legal-contanier{
      width: 100%;
      clear: both;
      padding-top:5px;
  }
  
  
  
  .form-signup .social-login{
      width:210px !important;
      margin: 0 auto;
  }
  
  
  #logreg-forms .left .benefitItem{
      width: 95%;
      margin: 18px 5% 18px;
      float: left;
  }
  
  #logreg-forms .left .benefitItem .benefitItemIcon{
      width: 20%;
  }
  
  #logreg-forms .left .benefitItem .benefitItemIcon img{
      width: 100%;
  }
  
  #logreg-forms .left .benefitItem .benefitItemIcon, #logreg-forms .left .benefitItem .benefitItemText{
      float:left;
  }
  
  #logreg-forms .left .benefitItem .benefitItemText{padding-left:20px;}
  
  #logreg-forms .left .benefitItem .benefitItemText .textHigh{
      font-family: 'futurabook';
      color:#50685c;
      font-size:20px;
      font-weight: 600;
  }
  
  #logreg-forms .left .benefitItem .benefitItemText .textLow{
      font-family: 'futurabook';
      color:#6F6D6D;
      font-size: 16px;
  }
  
  #logreg-forms .left .benefitLegal{
      font-family: 'Avenir LT Std', sans-serif;
      font-size: 12px;
      text-align: left;
      padding: 20px 20px 0 20px;
  }
  
  .benefitItem{
      display: flex;
      flex-direction: row;
      gap: 20px;
      justify-content: flex-start;
      align-content: center;
      flex-wrap: wrap;
      margin-bottom: 15px;
  }
  
  .benefitItemIcon{
      width: 80px;
      height: auto;
  }
  
  .benefitItemText{height: 80px;
      align-items: flex-start;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  
  .textHigh{
      font-family: 'Avenir Next LT Pro';
      font-style: normal;
      font-size: 20px;
      line-height: 20px;
      color: #fff;
  }
  
  .textLow{
      font-family: 'Avenir LT Std';
      font-weight: 300;
      font-style: normal;
      font-size: 16px;
      line-height: 20px;
      color: #fff;
  }
  
  
  .claims-provider-list-buttons.social .options{
      display: flex;
      flex-direction: column;
      gap:10px;
  }
  
  .claims-provider-list-buttons.social .options > div{width: 100%;}
  
  
  
  /* Mobile */
  
  @media screen and (max-width:790px){
      
      #logreg-forms{
          width:350px;
      }
      
      #logreg-forms form{
          max-width: 100%;
      }
      
      #logreg-forms .form-control, #logreg-forms select, #logreg-forms .social-btn, #logreg-forms .social-login .social-btn.btn{
          width: 98%;
          margin: 1%;
          max-width: 400px;
      }
      
      #logreg-forms .social-login{
          min-height: 120px;
      }
      
      #logreg-forms .left {
      width: 90%
      }
      
      #logreg-forms .right {
      width: 90%
      }
      
      #logreg-forms .form-control-x75{
          width: 98%;
      }
      
      
      #logreg-forms .btnx25{
          width: 99%;
      }
      .contentForm{
          width: 320px;
          margin: 0 auto;
      }
      #logreg-forms .left .benefitItem {
      margin: 18px 5% 18px;
  }
      #GoogleExchange{background-position: 39%;}
      
      #FacebookExchange {background-position: 38%;}
  }
  
  #brands{position: initial!important;}