:root {
    --mainColor: #0569C2;
    --mainColorB: #075AA6;
    --subColor: #FC9E20;
    --redColor: #E20702;
    --bgWebsite: #F0F5FC;
}
.title-forget{margin-bottom:8px;}
.login-nina a{text-decoration:none;}
.login-nina h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:'Jost',sans-serif;}
.login-nina .form-section{min-height:100vh;position:relative;    /* text-align: center; */display:flex;justify-content:center;align-items:center;padding:30px 0;background:#fff7f7;}
.login-nina .form-inner{max-width:500px;width:100%;margin:0 15px;background:#fff;padding:50px;box-shadow:0 0 10px rgb(0 0 0 / 12%);overflow:hidden;}
.login-nina .bg-img{min-height:100vh;position:relative;display:flex;justify-content:center;align-items:center;padding:15px 30px; z-index:999;background-position:center center;background-repeat:no-repeat;background-size:cover;
  background:linear-gradient(180deg, #018AD8 0%, #0369C2 62.02%); overflow:hidden;
}
.login-nina .bg-img:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;    /* background: rgb(0 0 0 / 40%); */}
.login-nina .bg-img .bg-t{width:960px;height:169px;background:url(/storage/auth/bg2.png) no-repeat top left;position:absolute;top:0;left:0;pointer-events:none;}
.login-nina .bg-img .bg-bt{width:960px;height:147px;background:url(/storage/auth/bg1.png) no-repeat bottom right;position:absolute;bottom:0;right:0;pointer-events:none;}
.login-nina .bg-img .bg-td{width:746px;height:747px;position:absolute;left:-132px;top:50%;transform:translateY(-50%);}
.login-nina .bg-img .bg-td span{width:746px;height:746px;background:url(/storage/auth/trongdong1.png) no-repeat top right;position:absolute;left:0px;top:0;-webkit-animation:spin 30s linear infinite;
    animation:spin 30s linear infinite;}
.login-nina .bg-img .logo-nn{width:200px;height:200px;border-radius:50%;background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px rgba(0,0,0,0.15);z-index:10;}
.login-nina .form-section .extra-login{position:relative;}
.login-nina .form-section .extra-login::before{position:absolute;left:0;top:10px;width:100%;height:1px;background:#e4e4e4;content:"";}
.login-nina .form-section .extra-login > span{width:auto;float:none;display:inline-block;padding:1px 20px;position:relative;font-size:14px;color:#424242;text-transform:capitalize;background:#fff;}
.login-nina .form-section p{color:#424242;margin-bottom:0;font-size:15px;}
.login-nina .form-section p a{color:#424242;}
.login-nina .form-section ul{list-style:none;padding:0;margin:0 0 20px;}
.login-nina .form-section .thembo{margin-left:4px;}
.login-nina .form-section h3{margin:0 0 30px;font-size:20px;text-transform:uppercase;font-weight:500;color:#121212;}
.login-nina .form-section .form-group{margin-bottom:15px;}
.login-nina .form-section .form-box{    /* float: left; */
width:100%;position:relative;}
.login-nina .form-section .form-check-input:checked{display:none;}
.login-nina .form-section .form-control{padding:15.5px 20px;    /* float: left; */width:100%;font-size:16px;outline:none;color:#424242;border-radius:3px;border:1px solid transparent;background:#fff;box-shadow:0 0 5px rgba(0,0,0,0.2);height:55px;}
.login-nina .form-section img{margin-bottom:5px;height:40px;}
.login-nina .form-section .form-box i{position:absolute;top:10px;right:20px;font-size:23px;color:#424242;}
.login-nina .form-section .checkbox .terms{margin-left:3px;}
.login-nina .form-section .btn-md{cursor:pointer;padding:15.5px 50px 14.5px 50px;font-size:17px;font-weight:400;font-family:'Jost',sans-serif;border-radius:3px;height:55px;}
.login-nina .form-section input[type=checkbox],input[type=radio]{margin-right:3px;}
.login-nina .form-section button:focus{outline:none;outline:0 auto -webkit-focus-ring-color;}
.login-nina .form-section .btn-theme.focus,.btn-theme:focus{box-shadow:none;}
.login-nina .form-section .btn-theme{background:#ff574d;box-shadow:0 0 5px rgba(0,0,0,0.2);border:none;color:#fff;border-radius:3px;}
.login-nina .form-section .btn-theme:hover{background:#ef4b22;}
.login-nina .form-section .form-check{float:left;margin-bottom:0;padding-left:0;}
.login-nina .form-section .form-check a{color:#424242;float:right;}
.login-nina .form-section .form-check-input{position:absolute;margin-left:0;}
.login-nina .form-section .form-check label::before{content:"";display:inline-block;position:absolute;width:18px;height:18px;top:3px;margin-left:-25px;border:1px solid #fff;border-radius:3px;background:#fff;box-shadow:0 0 5px rgb(0 0 0 / 20%);}
.login-nina .form-section .form-check-label{padding-left:25px;margin-bottom:0;font-size:15px;color:#424242;}
.login-nina .form-section .checkbox-theme input[type="checkbox"]:checked + label::before{background:#ff574d;border-color:#ff574d;}
.login-nina .form-section input[type=checkbox]:checked + label:before{font-weight:600;color:#fff;line-height:15px;font-size:12px;content:"\2713";padding-left:1px;}
.login-nina .form-section input[type=checkbox],input[type=radio]{margin-top:4px;}
.login-nina .form-section a.forgot-password{font-size:15px;color:#424242;float:right;}
.login-nina .logo img{margin-bottom:15px;height:30px;}
.login-nina .info{max-width:650px;margin:0 auto;z-index:999;}
.login-nina .name_wrap h1{position:relative;font-size:55px;font-family:"Poppins",sans-serif;text-transform:uppercase;font-weight:700;color:#fff;line-height:1.2;display:inline-block;overflow:hidden;}
.name_wrap h1 span{color:transparent;-webkit-text-stroke:1px #fff;padding-left:2px;}
.login-nina .info p{color:#fff;line-height:28px;opacity:0.8;font-size:15px;}
.login-nina .form-section ul{list-style:none;padding:0;margin:0 0 20px;}
.login-nina .social-list{padding:0;text-align:center;}
.login-nina .social-list li a{transition:all 0.8s;bottom:15px;}
.login-nina .form-inner .social-list li:hover a{transform:scale(1.1);}
.login-nina .form-inner i{transition:all 0.8s;}
.login-nina .form-inner:hover .form-box i{   /*  -webkit-transform: rotate(360deg);
        transform: rotate(360deg); */}
.login-nina .social-list li{display:inline-block;}
.login-nina .social-list li a{margin:1px;font-size:14px;width:110px;height:40px;line-height:40px;border-radius:3px;display:inline-block;text-align:center;color:#fff;}
.login-nina .social-list li a:hover{text-decoration:none;}
.login-nina .facebook-bg{background:#4867aa;}
.login-nina .facebook-bg:hover{background:#3d5996;color:#fff;}
.login-nina .twitter-bg{background:#33CCFF;}
.login-nina .twitter-bg:hover{background:#56d7fe;}
.login-nina .google-bg{background:#db4437;}
.login-nina .google-bg:hover{background:#dc4e41;}
.login-nina .boxLogoNN{display:flex;flex-wrap:wrap;position:absolute;top:50%;left:430px;transform:translateY(-50%);padding-right: 35px;}
.login-nina .boxLogoNN .itemBox{display:inline-block;margin:0px;position:relative;color:#fff;border-radius:5px;padding:15px 10px 10px;cursor:pointer;transition:transform 0.3s ease;}
.login-nina .boxLogoNN .itemBox:hover{transform:translateX(8px);}
.login-nina .boxLogoNN .itemBox .img{width:82px;height:82px;margin-right:20px;border-radius:357px;-moz-border-radius:357px;-webkit-border-radius:357px;-ms-border-radius:357px;-o-border-radius:357px;background:#fff;}
.login-nina .boxLogoNN .itemBox .img span.bg1{background:#FF9205;}
.login-nina .boxLogoNN .itemBox .img span.bg2{background:#F55925;}
.login-nina .boxLogoNN .itemBox .img span.bg3{background:#2FAE37;}
.login-nina .boxLogoNN .itemBox .img span.bg4{background:#17A9EE;}
.login-nina .boxLogoNN .itemBox .img span.bg5{background:#925CB1;}
.login-nina .boxLogoNN .itemBox .img span{font-size:26px;color:#fff;width:52px;height:52px;border-radius:357px;-moz-border-radius:357px;-webkit-border-radius:357px;-ms-border-radius:357px;-o-border-radius:357px;z-index:2;position:relative;}
.login-nina .boxLogoNN .itemBox .name{font-size:18px;font-weight:bold;text-transform:uppercase;margin-bottom:0px;transition:color 0.2s ease;}
.login-nina .boxLogoNN .itemBox .desc{font-size:15px;color:#ccc;}
.login-nina .boxLogoNN .itemBox .img ~ div{width:calc(100% - 102px);}
.login-nina .boxLogoNN .itemBox:nth-child(1){margin-left: -122px; margin-bottom: -17px;}
.login-nina .boxLogoNN .itemBox:nth-child(2){margin-left:-35px}
.login-nina .boxLogoNN .itemBox:nth-child(4){margin-left:-35px}
.login-nina .boxLogoNN .itemBox:nth-child(5){margin-left: -122px; margin-top: -6px;}
.login-nina .boxLogoNN .itemBox label > a{display:block;margin-top:8px;}
.login-nina .boxLogoNN .itemBox label .box-tbl{display:block;text-align:center;padding:16px 8px;}
.login-nina .boxLogoNN .itemBox:hover label{width:auto;height:200px;box-shadow:0px 8px 22px -6px #C02126,0px 14px 64px -4px #C02126;z-index:100;}
.login-nina .boxLogoNN .itemBox label .desc{display:none;width:148px;}
.login-nina .boxLogoNN .itemBox:hover label .img img{margin-bottom:14px;}
.login-nina .boxLogoNN .itemBox:hover label .desc{display:block;font-size:13px;color:#212121;font-weight:normal;}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        transform:rotate(360deg); 
    } 
}
.circle {
  position: relative;
  transition: transform 0.3s ease;   
}

.circle:before,
.circle:after {
  content: '';
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.itemBox:hover .circle:before {
  -webkit-animation: ripple 1.8s linear infinite;
  animation: ripple 1.8s linear infinite; 
}
.itemBox:hover .circle:after {
  -webkit-animation: ripple 1.8s linear 0.9s infinite;
  animation: ripple 1.8s linear 0.9s infinite; 
}
.itemBox:hover .circle1:before,.itemBox:hover .circle1:after { border: 2px solid #FF9205; box-shadow: 0 0 10px rgba(255, 146, 5, 0.5); }
.itemBox:hover .circle2:before,.itemBox:hover .circle2:after { border: 2px solid #F55925; box-shadow: 0 0 10px rgba(245, 89, 37, 0.5); }
.itemBox:hover .circle3:before,.itemBox:hover .circle3:after { border: 2px solid #2FAE37; box-shadow: 0 0 10px rgba(47, 174, 55, 0.5); }
.itemBox:hover .circle4:before,.itemBox:hover .circle4:after { border: 2px solid #17A9EE; box-shadow: 0 0 10px rgba(23, 169, 238, 0.5); }
.itemBox:hover .circle5:before,.itemBox:hover .circle5:after { border: 2px solid #925CB1; box-shadow: 0 0 10px rgba(146, 92, 177, 0.5); }

.itemBox:hover .circle1 ~ div .name { color: #FF9205 !important; }
.itemBox:hover .circle2 ~ div .name { color: #F55925 !important; }
.itemBox:hover .circle3 ~ div .name { color: #2FAE37 !important; }
.itemBox:hover .circle4 ~ div .name { color: #17A9EE !important; }
.itemBox:hover .circle5 ~ div .name { color: #925CB1 !important; }

@-webkit-keyframes ripple{
  0% { -webkit-transform: scale(1); opacity: 0.9; }
  75% { -webkit-transform: scale(1.6); opacity: 0.6; }
  100% { -webkit-transform: scale(1.9); opacity: 0; }
}

@keyframes ripple{
  0% { transform: scale(1); opacity: 0.9; }
  75% { transform: scale(1.6); opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (max-width:1600px){
    .login-nina .bg-img .bg-td{left:-132px;}
    .login-nina .bg-img .logo-nn{width:200px;height:200px;}
    .login-nina .bg-img .logo-nn img{height:85px!important;}
    .login-nina .boxLogoNN{left:370px;}
   /*  .login-nina .boxLogoNN .itemBox:nth-child(1){margin-left:-138px}
    .login-nina .boxLogoNN .itemBox:nth-child(4){margin-left:-138px} */
}
@media (max-width:1440px){
    .login-nina .bg-img .bg-td{left:-244px;}
    .login-nina .boxLogoNN{left:280px;}
    .login-nina .boxLogoNN .itemBox .name{margin-bottom:0px;}
}
@media (max-width:992px){
    .login-nina .form-inner{padding:40px 10px;}
    .login-nina .bg-img{display:none;}
    .a-hotro .r-ht a{float: none !important;}
}
@media (max-height:700px){
    .bg-t{display:none;}
    .bg-bt{display:none;}

}

/** Login 36 end **/
.boxLogo{display:flex;flex-wrap:wrap;}
.boxLogo .itemBox{display:inline-block;text-align:center;margin:12px;width:calc(50% - 24px);position:relative;background:#fff;border-radius:5px;padding:15px 10px 10px;}
.boxLogo .itemBox img{max-width:75px!important;height:auto;margin-bottom:15px;}
.boxLogo .itemBox .desc{font-size:14px;}
.boxLogo .itemBox label > a{display:block;margin-top:8px;}
.boxLogo .itemBox label .box-tbl{display:block;text-align:center;padding:16px 8px;}
.boxLogo .itemBox:hover label{width:auto;height:200px;box-shadow:0px 8px 22px -6px #C02126,0px 14px 64px -4px #C02126;z-index:100;}
.boxLogo .itemBox label .desc{display:none;width:148px;}
.boxLogo .itemBox:hover label .img img{margin-bottom:14px;}
.boxLogo .itemBox:hover label .desc{display:block;font-size:13px;color:#212121;font-weight:normal;}
.img-logo{height:80px!important;width:auto;}
.title-login{font-weight:bold;color:#fff;margin-top:10px;margin-bottom:0px;font-size:18px; color: var(--mainColor);
  -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=135,Color=#b26363)";text-shadow:3px 3px 5px #b26363;filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=135,Color=#b26363);
}
.text-desc-forget{font-size:16px;margin-bottom:20px;color:#777;}
.a-hotro{display:flex;justify-content:space-between;margin-top:20px;font-size:16px;color:#646262;}
.a-hotro .l-ht a{color:#E10C0D !important;}