:root {
    --fontBEPRO:'BeVietnamPro-Regular';
    --fontBEPROB:'BeVietnamPro-Bold';
    --colormain: #e4b65a;
    --colormainhv: #007BFF;
    --bgmain1: #0692c7;
    --bgmain2: #D6F6F9;
    --bgmain3: #F6F7D8;
    --bgbtntienich: #E00303;
    --bgrgright:linear-gradient(to right,#008ea7, #1130ba);
    --bgrgleft:linear-gradient(to left, #008ea7, #1130ba);
    --bgrgtop: linear-gradient(to top, #008ea7, #3B28BD);
    --bgrgbottom: linear-gradient(to bottom, #008ea7, #1130ba);
    --bgrg1 :linear-gradient(to right, #1854A3,#1490E0 , #1854A3);
    --bgrg2: radial-gradient(circle at center, #74ebd5, #C0EBED);
}
.navbar-light{
    background-color: var(--bgmain1);
    background: var(--bgrgtop);
}
.wrapper, body, html {
    background: url(../images/bg_admin.jpg) top center no-repeat;
    background-size: cover;
}
.content-wrapper {
    background: transparent;
}
.my-info-box{
    box-shadow: 3px 5px 2px #9FE2ED;
    border: 1px solid var(--bgmain2);
}
.navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-size: 16px;
}
.main-header .nav-link>i {
    font-size: 20px !important;
    color: #fff;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #F6F7D8;
}
.img-upload, .main-header .navbar-nav .nav-item .dropdown-menu {
    max-width: 300px;
    width: 250px;
}
.main-header .navbar-nav .nav-item .dropdown-menu .dropdown-item {
    padding: .85rem .75rem;
}
.dropdown-item i{
    color:#0C6F97;
}
[class*=sidebar-dark] .brand-link{
    background: var(--bgrgtop);
}
.main-sidebar{
    box-shadow: 0 14px 28px rgb(255 255 255 / 25%), 0 10px 10px #C0EBED !important;
}
*{
    border-color: #9ccee2 !important;
}
.card {
    box-shadow: 0 0 1px var(--bgmain2), 0px 2px 3px var(--bgmain1);
    margin-bottom: 1rem;
}
.card-primary.card-outline{
    border-top: 3px solid var(--bgmain1) !important;
    color: #000;
}
.card-primary.card-outline-tabs>.card-header a.active {
    border-top: 3px solid var(--bgmain1) !important;
    color: #000;
    background: var(--bgmain1);
    color: #fff;
}
.text-sm .content-header .breadcrumb{
    font-size: 15px;
}
.card-footer.sticky-top{
     box-shadow: 0 0 1px var(--bgmain2), 0px 2px 3px var(--bgmain1);
    background:#fff;
    opacity:1;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
        padding: .6rem .8rem;
}
.btn{
    border-radius: 5px;
}
.preview-photo{
    background: radial-gradient(circle at center, #ffffff, #d3f3f4);
    border-radius: 10px;
    padding: 10px;
}
.preview-photo img{
    max-width: 110px;
}
.login-page,.register-page{
 background: transparent;
}
.login100-pic{
    padding: 0;
}
.img-logo-login{
    margin:0;
}
.img-logo-login img{
    max-width: 100%;
}
.navbar{
    padding: 15px 10px 14px;
}


#cris_circle {
    position: relative;
    width: 505px;
    height: 505px;
  }

  #cris_sun1 {
    height: 400px;
    width: 400px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    align-items: center;
    margin: 0px auto;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#cris_sun1 form{
    position:relative;
    z-index:10;
}
#cris_sun2 {
    width: 404px;
    height: 404px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, rgb(255 0 0 / 50%) 0%, rgb(255 0 0 / 50%) 100%);
    border-radius: 50%;
}
#cris_sun3 {
    width: 447px;
    height: 447px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(255 0 0 / 50%);
    border-radius: 50%;
}
#cris_sun4 {
    width: 505px;
    height: 505px;
    position: absolute;
    background: #ffffff0a;
    border-radius: 50%;
    border: 3px solid rgb(253 65 65 / 10%) !important;
    animation-name: spin;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#cris_sun4 #sun_spin1 {
    width: 12px;
    height: 12px;
    background: #ff0000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translate(0px, -50%);
}
#cris_sun4 #sun_spin2 {
    width: 12px;
    height: 12px;
    background: #ffd400;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: -2px;
    transform: translate(-50%, 0px);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#cris_circle .input-login-news .form-control{
    border: 0;
    border-bottom: 2px solid #ffb2ab !important;
    border-radius: 0;
    padding: 0;
    height: 40px;
    font-size: 15px !important;
    background: transparent;
    color:#000;
}

#cris_circle .input-login-news .form-control::placeholder{
    color:#000;
}
#cris_circle .input-login-news > span{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding-right: 8px;
    color: #ff6969;
    font-size: 25px;
}
#cris_circle .input-login-news .show-password{
    background: transparent;
    border: 0;
}
#cris_circle .checkbox-user{
    
}
#cris_circle .checkbox-user .label-nhodangnhap{
    color: var(--bgmain1);
}
#cris_circle .input-login-news-user {

}

#cris_circle .input-login-news-email {

}

#cris_circle .btn-login {height: 50px;border-radius: 25px;/* background: var(--bgrgbottom); */}
#cris_circle .my-alert.alert-danger{

box-shadow: none;

background: transparent;

border: 0;

font-weight: 600;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color: var(--bgmain1) transparent transparent !important;
    border-width: 6px 5px 0;
}
.btn-tool{
        background: var(--bgmain2);
    color: var(--bgmain1);
}

.container-login100 {
    background: url(../images/bg_admin.jpg) center center;
    background-size: 100% 100%;
}
.bg-login-logo{
        height: 100%;
        width: 100%;
        border-radius: 50%;
        margin: 0px auto;
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url(../images/logo_admin.jpg) center center no-repeat;
        opacity: 0.1;
    }