/* ===========================================================================
   Author: Daniel Martinez - www.dosdoce.com.ve
   ========================================================================== */
* {padding: 0;margin: 0;color: #1a1f36;box-sizing: border-box;word-wrap: break-word;font-family: GOTHAM;}
body {min-height: 100%;background-color: #ffffff;}
h1 {letter-spacing: -1px;}
a {color: #5469d4;text-decoration: unset;}
.login-root {background: #fff;display: flex;width: 100%;min-height: 100vh;overflow: hidden;}
.loginbackground {min-height: 692px;position: fixed;bottom: 0;left: 0;right: 0;top: 0;z-index: 0;overflow: hidden;}
.flex-flex {display: flex;}
.align-center {align-items: center; }
.center-center {align-items: center;justify-content: center;}
.box-root {box-sizing: border-box;}
.flex-direction--column {-ms-flex-direction: column;flex-direction: column;}
.loginbackground-gridContainer {display: -ms-grid;display: grid;-ms-grid-columns: [start] 1fr [left-gutter] (86.6px)[16] [left-gutter] 1fr [end];grid-template-columns: [start] 1fr [left-gutter] repeat(16,86.6px) [left-gutter] 1fr [end];-ms-grid-rows: [top] 1fr [top-gutter] (64px)[8] [bottom-gutter] 1fr [bottom];grid-template-rows: [top] 1fr [top-gutter] repeat(8,64px) [bottom-gutter] 1fr [bottom];justify-content: center;margin: 0 -2%;transform: rotate(-12deg) skew(-12deg);}
.box-divider--light-all-2 {box-shadow: inset 0 0 0 2px #e3e8ee;}
.box-background--blue {background-color: #6a3f8c;}
.box-background--white {background-color: #ffffff; }
.box-background--blue800 {background-color: #dcaa28;}
.box-background--gray100 {background-color: #64a03c;}
.box-background--cyan200 {background-color: #6a3f8c;}
.padding-top--64 {padding-top: 64px;}
.padding-top--24 {padding-top: 24px;}
.padding-top--48 {padding-top: 48px;}
.padding-bottom--24 {padding-bottom: 24px;}
.padding-horizontal--48 {padding: 48px;}
.padding-bottom--15 {padding-bottom: 15px;}
.flex-justifyContent--center {-ms-flex-pack: center;justify-content: center;}
.formbg {margin: 0px auto;width: 100%;max-width: 448px;background: white;border-radius: 4px;box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;}
.formbg.formbg-registro {margin: 0px auto;width: 100%;max-width: 740px;background: white;border-radius: 4px;box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;}
span {display: block;font-size: 20px;line-height: 28px;color: #1a1f36;}
label {margin-bottom: 10px;}
.reset-pass a,label {font-size: 14px;font-weight: 600;display: block;}
.reset-pass > a {text-align: right;margin-bottom: 10px;}
.grid--50-50 {display: grid;grid-template-columns: 50% 50%;align-items: center;}
.field input {font-size: 16px;line-height: 28px;padding: 8px 16px;width: 100%;min-height: 44px;border: unset;border-radius: 4px;outline-color: rgb(84 105 212 / 0.5);background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

input[type="submit"] {background-color: rgb(84, 105, 212);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, 
                rgb(84, 105, 212) 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
    color: #fff;font-weight: 600;cursor: pointer;
}
.field-checkbox input {width: 20px;height: 15px;margin-right: 5px; box-shadow: unset;min-height: unset;}
.field-checkbox label {display: flex;align-items: center;margin: 0;}
a.ssolink {display: block;text-align: center;font-weight: 600;}
.footer-link span {font-size: 14px;text-align: center;}
.listing a {color: #697386;font-weight: 600;margin: 0 10px;}
.animationRightLeft {animation: animationRightLeft 120s ease-in-out infinite;}
.animationLeftRight {animation: animationLeftRight 80s ease-in-out infinite;}
.tans3s {animation: animationLeftRight 60s ease-in-out infinite;}
.tans4s {animation: animationLeftRight 70s ease-in-out infinite;}

@keyframes animationLeftRight {
  0% {transform: translateX(0px);}
  50% {transform: translateX(1000px);}
  100% {transform: translateX(0px);}
} 

@keyframes animationRightLeft {
  0% {transform: translateX(0px);}
  50% {transform: translateX(-1000px);}
  100% {transform: translateX(0px);}
} 

/** Logo Login **/
.cint-header-login {background-color: #009bdb;width: 450px;margin: 0 auto 50px;}

/**Custon Form**/
form button {margin-top: 35px;background-color: #6a3f8c;line-height: 0;font-size: 22px;padding: 25px 50px;border-radius: 60px;color: #fff;font-weight: bold;letter-spacing: 0.2em;text-transform: uppercase;}
form button:hover, form button:focus {color: white;background-color: #006e96;text-shadow: 3px 3px 5px rgba(0,0,0,0.5) }
.form-login {width: 250px;position: relative;overflow: hidden;height: 55px;}
#step1 .form-login {width: 250px;position: relative;overflow: hidden;height: 60px;}
#step2 .form-login {position: relative;overflow: hidden;height: 60px;}
.form-login-2{width: 350px;position: relative;overflow: hidden;height: 55px;margin-left:10px;}
.form-login input, .form-login-2 input {width: 100%;height: 50px;color: #444444;padding-top: 20px;border: none;}
.form-login label, .form-login-2 label {position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;pointer-events: none;border-bottom: 1px solid white;}

.form-login label::after{content: "";position: absolute;bottom: -1px;left: 0px;width: 100%;height: 100%;border-bottom: 2px solid #444444;transform: translateX(-50%);transition: all 0.3s ease;width:570px;}
.form-login-2 label::after{content: "";position: absolute;bottom: -1px;left: 0px;width: 100%;height: 100%;border-bottom: 2px solid #444444;transform: translateX(-50%);transition: all 0.3s ease;width:660px;}
.content-name {position: absolute;bottom: 0px;left: 0px;padding-bottom: 5px;font-weight:normal; transition: all 0.3s ease;font-size:16px; color: #444444}
.form-login input:focus {outline: none;}
.form-login input:focus + .label-name .content-name,
.form-login input:valid + .label-name .content-name {transform: translateY(-35%);font-size: 12px;left: 0px;color: #444444;font-weight: normal}
.form-login input:focus + .label-name::after,
.form-login input:valid + .label-name::after {transform: translateX(0%);}

.form-login-2 input:focus {outline: none;}
.form-login-2 input:focus + .label-name .content-name,
.form-login-2 input:valid + .label-name .content-name {transform: translateY(-35%);font-size: 12px;left: 0px;color: #444444;font-weight: normal}
.form-login-2 input:focus + .label-name::after,
.form-login-2 input:valid + .label-name::after {transform: translateX(%);}

/**Custon Select**/
/* ===== Select Box ===== */
.sel {font-size: 16px;display: inline-block;margin: 10px;width: 70px;background-color: transparent;position: relative;cursor: pointer;float: left;}
.sel.sel-big {font-size: 16px;display: inline-block;margin: 10px;width: 330px;background-color: transparent;position: relative;cursor: pointer;float: left;}
.sel::before {position: absolute;content: '\f063';font-family: 'FontAwesome';font-size: 1em;color: #444444;right: 10px;top: calc(40% - 0.5em);}
.sel.active::before {transform: rotateX(-180deg);}
.sel__placeholder {display: block;font-size: 16px;color: #444444;padding: 0.2em 0.5em;text-align: left;pointer-events: none;user-select: none;visibility: visible;}
.sel.active .sel__placeholder {visibility: hidden;}
.sel__placeholder::before {position: absolute;top: 0;bottom: 0;left: 0;right: 0;padding: 0.2em 0.5em;content: attr(data-placeholder);visibility: hidden;}
.sel.active .sel__placeholder::before {visibility: visible;}
.sel__box {position: absolute;top: calc(100% + 4px);left: -4px;display: none;list-style-type: none;text-align: left;font-size: 15px !important;background-color: #FFF;width: calc(100% + 8px);box-sizing: border-box;}
.sel.active .sel__box {display: block;animation: fadeInUp 500ms;}
.sel__box__options {display: list-item;font-size: 16px;color: #838e95;padding: 0.5em 1em;user-select: none;}
.sel__box__options::after {content: '\f00c';font-family: 'FontAwesome';font-size: 16px;margin-left: 10px;display: none;}
.sel__box__options.selected::after {display: inline;}
.sel__box__options:hover {background-color: #ebedef;}
.tab-content .sel.sel--black-panther {width: 150px;}
/* ----- Select Box Black Panther ----- */
.sel {border-bottom: 2px solid #444444;}
.sel--black-panther {z-index: 999999;}
.sel--black-panther.sel-big {z-index: 99999;}
.sel--black-panther.sel-big-1 {z-index: 9999;}
.sel--black-panther.sel-big-2 {z-index: 999;}
.sel--black-panther.sel-big-3 {z-index: 99;}


.colum-2.colum-2-select .sel.sel--black-panther {
    z-index: 999 !important;
}
.colum-2.colum-2-select-2 .sel.sel--black-panther {
    z-index: 999 !important;
}
/* ----- Select Box Superman ----- */
.sel--superman {
/*   display: none; */
z-index: 2;
}

/* ===== Keyframes ===== */
@keyframes fadeInUp {
  from {opacity: 0;transform: translate3d(0, 20px, 0);}
  to {opacity: 1;transform: none;}
}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

button {border-width: 0px;}
.float-custom-left {float:left;width:260px}
.float-custom-left-2 {float:left;width:100%;margin-top: 10px}

.set-button {height:70px;margin-top:20px}
.set-button button{width: 40%;float: left;display: block}

.set-button button {margin-top: 10px;background-color: #6a3f8c;line-height: 0;font-size: 14px;padding: 25px 10px;border-radius: 60px;color: #fff;font-weight: bold;letter-spacing: 0.2em;text-transform: uppercase; margin-left:5%}
.set-button button:hover, .set-button button:focus {color: white;background-color: #006e96;text-shadow: 3px 3px 5px rgba(0,0,0,0.5) }

.set-button .btn-back {margin-top: 10px;background-color: #ff002f;line-height: 0;font-size: 14px;padding: 25px 10px;border-radius: 60px;color: #fff;font-weight: bold;letter-spacing: 0.2em;text-transform: uppercase; margin-left:5%}
.set-button .btn-back:hover, .set-button .btn-back:focus {color: white;background-color: #dcaa28; text-shadow: 3px 3px 5px rgba(0,0,0,0.5) }


.set-button-single {height:70px;margin-top:20px; width: 100%; float:left;}
.set-button-single button{width: 50%;display: block; position: relative; margin: 0 auto;background-color: #006e96 ;font-size: 14px;padding: 25px 10px;border-radius: 60px;color: #fff;font-weight: bold;letter-spacing: 0.3em;text-transform: uppercase;}
.set-button-single button:hover{ background-color: #6a3f8c;}


/** Custon scroll **/
.formbg-inner{overflow: auto !important}
.scrollbar{min-height: 300px;overflow-y: scroll;margin-bottom: 25px;}
.force-overflow{min-height: 450px;}
/**  STYLE 6 **/
#style-6::-webkit-scrollbar-track
{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}
#style-6::-webkit-scrollbar
{width: 10px;background-color: #F5F5F5;}
#style-6::-webkit-scrollbar-thumb{background-color: #F90; border-radius:50px;background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)}



@media (max-width: 820px) {
  .cint-header-login {width: 79%;margin: 0 auto 50px;}
  .cint-header-login img{width:250px;padding:0}
  .cint-header-login h1{margin:0 !important;;padding: 0 !important;}
  .formbg-outer{width:79%; margin: 0 auto !important}
  .formbg-inner.padding-horizontal--48 {padding: 20px}
  .sel {width: 20% !important;}
  .sel-big {width: 90% !important;}
  .form-login {width: 90% !important;}
  .form-login-2 {width: 550px !important;}
  .tab-content .sel.sel--black-panther {width: 90% !important;margin: 10px !important;}
}
@media (max-width: 480px) {
  .formbg-inner.padding-horizontal--48 {padding: 10px}
  .sel {width: 90% !important;}
  .sel-big {width: 90% !important;}
  .form-login {width: 90% !important;margin: 10px;}
  .form-login-2 {width: 93% !important;}
}}
  
  

form#registration .tipofolder {
    background: rgba(0,0,0,0.01);
    margin-top: 0;
    border: solid 1px rgba(0,0,0,0.2);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #6a3f8c !important;
    border-top-left-radius:10px !important;
    border-top-right-radius:10px !important;
    border-bottom-left-radius:0px !important;;
    border-bottom-right-radius:0px !important; ;
}
.nav-link{
    color: rgba(0,0,0,0.2)
}

a#step2-tab {
      pointer-events: none; 
    cursor: default;
}