@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
:root{
        --theme-color:#5664d2;
        --theme-color-dark:#414da5;
}

 body {
     font-family: 'Poppins', sans-serif;
     font-weight: 300;
     font-size: 15px;
     line-height: 1.7;
     color: #c4c3ca;
     background-color: var(--theme-color);
     overflow-x: hidden;
 }

 a {
     cursor: pointer;
     transition: all 200ms linear;
 }

 a:hover {
     text-decoration: none;
 }

 .link {
     color: #c4c3ca;
 }

 .link:hover {
     color: var(--theme-color)!important;
 }

 p {
     font-weight: 500;
     font-size: 10px;
     line-height: 1.7;
 }

 h4 {
     font-weight: 600;
 }

 h6 span {
     padding: 0 20px;
     text-transform: uppercase;
     font-weight: 700;
 }

 .section {
     position: relative;
     width: 100%;
     display: block;
 }

 .full-height {
     min-height: 90vh;
 }

 [type="checkbox"]:checked,
 [type="checkbox"]:not(:checked) {
     position: absolute;
     left: -9999px;
 }
  [data-toggle="tooltip"]{
     cursor: pointer;
 }

 .checkbox:checked + label,
 .checkbox:not(:checked) + label {
     position: relative;
     display: block;
     text-align: center;
     width: 60px;
     height: 16px;
     border-radius: 8px;
     padding: 0;
     margin: 10px auto;
     cursor: pointer;
     background-color: #000;
 }

 .checkbox:checked + label:before,
 .checkbox:not(:checked) + label:before {
     position: absolute;
     display: block;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     color: var(--theme-color);
     background-color: #ffffff;
     font: normal normal normal 14px/1 FontAwesome;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     content: "\f060";
         transform: rotate(37deg);
     z-index: 20;
     top: -10px;
     left: -10px;
     line-height: 36px;
     text-align: center;
     font-size: 24px;
     transition: all 0.5s ease;
 }

 .checkbox:checked + label:before {
     transform: translateX(44px) rotate(-229deg);
 }

 .card-3d-wrap {
     position: relative;
     width: 395px;
     max-width: 100%;
     height: 350px;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     perspective: 750px;
     margin-top: 35px;
 }

 .card-3d-wrapper {
     width: 100%;
     height: 95%;
     position: absolute;
     top: 0;
     left: 0;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     transition: all 600ms ease-out;
 }

 .card-front,
 .card-back {
     width: 100%;
     height: 100%;
     background-color: #fff;
     background-position: bottom center;
     background-repeat: no-repeat;
     background-size: 300%;
     position: absolute;
     border-radius: 6px;
     left: 0;
     top: 0;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;
     backface-visibility: hidden;
     -webkit-box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
     box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
 }

 .card-back {
     transform: rotateY(180deg);
 }

 .checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
     transform: rotateY(180deg);
 }

 .center-wrap {
     position: absolute;
     width: 100%;
     padding: 0 35px;
     top: 50%;
     left: 0;
     transform: translate3d(0, -50%, 35px) perspective(100px);
     z-index: 20;
     display: block;
 }

 .checkbox:not(:checked) + .success_msg {
     display: none;
 }

 .form-group {
     position: relative;
     display: block;
     margin: 0;
     padding: 0;
 }

 #loginButton{
     background-color: var(--theme-color);
     border: none;
     color: white;
     padding: 10px 60px;
     font-size: 10px;
     -webkit-box-shadow: 0 10px 30px 0 rgb(144 157 255);
     /*box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);*/
     -webkit-border-radius: 5px 5px 5px 5px;
     border-radius: 28px;
     margin: auto;
     width: 61%;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .forgot {
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 /* Firefox */
 input[type=number] {
     -moz-appearance: textfield;
 }

 #loginButton:hover {
     background-color: var(--theme-color-dark);
 }

 #loginButton:active,
 .forgot:active {
     -moz-transform: scale(0.95);
     -webkit-transform: scale(0.95);
     -o-transform: scale(0.95);
     -ms-transform: scale(0.95);
     transform: scale(0.95);
 }

 .form-style {
     /*background-color: #f6f6f6;*/
     background-color: #e6e6ee;
     border: none;
     color: #0d0d0d;
     /*    padding: 10px 88px;*/
     padding: 10px 60px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 10px;
     width: 80%;
     border: 2px solid #f6f6f6;
     border: 2px solid #e6e6ee;
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
     -webkit-border-radius: 5px 5px 5px 5px;
     border-radius: 5px 5px 5px 5px;
 }

 .form-style:focus {
     background-color: #fff;
     border-bottom: 2px solid var(--theme-color);
 }


 .form-style:placeholder {
     color: #cccccc;
 }

 .input-icon {
     position: absolute;
     top: 12px;
     left: 60px;
     height: 48px;
     font-size: 20px !important;
     line-height: 48px;
     text-align: left;
     color: var(--theme-color);
     -webkit-transition: all 200ms linear;
     transition: all 200ms linear;
     font-weight: 800 !important;
 }


 .card-back input[type=submit] {
     margin: 0;
     margin-bottom: 25px;
 }

 .card-back .form-style {
     padding: 7px 60px;
 }

 .card-back .input-icon {
     top: 8px;
 }




 .logo {
     position: absolute;
     top: 30px;
     right: 30px;
     display: block;
     z-index: 100;
     transition: all 250ms linear;
 }

 .logo img {
     height: 26px;
     width: auto;
     display: block;
 }

 *:focus {
     outline: none;
 }

 .section span {
     color: #fff;
 }

 .section h5 {
     color: #000;
     font-weight: 600;
 }

 .logo {
     border-radius: 7px;
 }

 ::-webkit-scrollbar {
     width: 0px;
 }

 h6 {
     font-size: 0.9rem;
 }

 /*icons*/
 .uil-user:before {
     content: '\ea0d';
 }

 [class^=uil-]:before,
 [class*=" uil-"]:before {
     font-family: unicons;
     font-style: normal;
     font-weight: 400;
     speak: none;
     display: inline-block;
     text-decoration: inherit;
     width: 1em;
     margin-right: .2em;
     text-align: center;
     font-variant: normal;
     text-transform: none;
     line-height: 1em;
     margin-left: .2em;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }


 /* ANIMATIONS */

 /* Simple CSS3 Fade-in-down Animation */
 .fadeInDown {
     -webkit-animation-name: fadeInDown;
     animation-name: fadeInDown;
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
 }

 @-webkit-keyframes fadeInDown {
     0% {
         opacity: 0;
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
     }

     100% {
         opacity: 1;
         -webkit-transform: none;
         transform: none;
     }
 }

 @keyframes fadeInDown {
     0% {
         opacity: 0;
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
     }

     100% {
         opacity: 1;
         -webkit-transform: none;
         transform: none;
     }
 }

 /* Simple CSS3 Fade-in Animation */
 @-webkit-keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @-moz-keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .fadeIn {
     opacity: 0;
     -webkit-animation: fadeIn ease-in 1;
     -moz-animation: fadeIn ease-in 1;
     animation: fadeIn ease-in 1;

     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;

     -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
     animation-duration: 1s;
 }

 .fadeIn.first {
     -webkit-animation-delay: 0.4s;
     -moz-animation-delay: 0.4s;
     animation-delay: 0.4s;
 }

 .fadeIn.second {
     -webkit-animation-delay: 0.6s;
     -moz-animation-delay: 0.6s;
     animation-delay: 0.6s;
 }

 .fadeIn.third {
     -webkit-animation-delay: 0.8s;
     -moz-animation-delay: 0.8s;
     animation-delay: 0.8s;
 }

 .fadeIn.fourth {
     -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
     animation-delay: 1s;
 }

 /* Simple CSS3 Fade-in Animation */
 .underlineHover:after {
     display: block;
     position: absolute;
     left: 102px;

     width: 0;
     height: 1.5px;
     background-color: #0d0d0d;
     content: "";
     transition: width 0.2s;
 }



 .underlineHover:hover:after {
     width: 38%;
 }