:root {
    --vz-body-bg: #f3f3f9;
    --vz-body-color: #212529;
    --vz-body-color-rgb: 33, 37, 41;
    --vz-vertical-menu-bg: #fff;
    --vz-vertical-menu-item-color: #6d7080;
    --vz-vertical-menu-item-hover-color: #405189;
    --vz-vertical-menu-item-active-color: #405189;
    --vz-vertical-menu-sub-item-color: #7c7f90;
    --vz-vertical-menu-sub-item-hover-color: #405189;
    --vz-vertical-menu-sub-item-active-color: #405189;
    --vz-vertical-menu-title-color: #919da9;
    --vz-vertical-menu-bg-dark: #405189;
    --vz-vertical-menu-item-color-dark: #abb9e8;
    --vz-vertical-menu-item-hover-color-dark: #fff;
    --vz-vertical-menu-item-active-color-dark: #fff;
    --vz-vertical-menu-sub-item-color-dark: #abb9e8;
    --vz-vertical-menu-sub-item-hover-color-dark: #fff;
    --vz-vertical-menu-sub-item-active-color-dark: #fff;
    --vz-vertical-menu-title-color-dark: #838fb9;
    --vz-header-bg: #fff;
    --vz-header-item-color: #e9ecef;
    --vz-header-bg-dark: #405189;
    --vz-header-item-color-dark: #b0c4d9;
    --vz-topbar-search-bg: #f3f3f9;
    --vz-topbar-user-bg: #f3f3f9;
    --vz-topbar-user-bg-dark: #52639c;
    --vz-footer-bg: #fff;
    --vz-footer-color: #98a6ad;
    --vz-topnav-bg: #fff;
    --vz-topnav-item-color: #6d7080;
    --vz-topnav-item-color-active: #405189;
    --vz-twocolumn-menu-iconview-bg: #fff;
    --vz-twocolumn-menu-bg: #fff;
    --vz-twocolumn-menu-iconview-bg-dark: var(--vz-vertical-menu-bg-dark);
    --vz-twocolumn-menu-bg-dark: #435590;
    --vz-twocolumn-menu-item-color-dark: var(--vz-vertical-menu-item-color-dark);
    --vz-twocolumn-menu-item-active-color-dark: #fff;
    --vz-twocolumn-menu-item-active-bg-dark: rgba(255,  255,  255,  0.15);
    --vz-boxed-body-bg: #e5e5f2;
    --vz-heading-color: #495057;
    --vz-light: #f3f6f9;
    --vz-light-rgb: 243, 246, 249;
    --vz-dark: #212529;
    --vz-dark-rgb: 33, 37, 41;
    --vz-link-color: #405189;
    --vz-link-hover-color: #405189;
    --vz-border-color: #e9ebec;
    --vz-dropdown-bg: #fff;
    --vz-dropdown-link-color: #212529;
    --vz-dropdown-link-hover-color: #1e2125;
    --vz-dropdown-link-hover-bg: #f3f6f9;
    --vz-dropdown-border-width: 0px;
    --vz-card-bg: #fff;
    --vz-card-cap-bg: #fff;
    --vz-card-logo-dark: block;
    --vz-card-logo-light: none;
    --vz-modal-bg: #fff;
    --vz-nav-tabs-link-active-color: #495057;
    --vz-nav-tabs-link-active-bg: #f3f3f9;
    --vz-accordion-button-active-color: #3a497b;
    --vz-progress-bg: #eff2f7;
    --vz-toast-background-color: rgba(255,  255,  255,  0.85);
    --vz-toast-border-color: rgba(0,  0,  0,  0.1);
    --vz-toast-header-border-color: rgba(0,  0,  0,  0.05);
    --vz-list-group-hover-bg: #f3f6f9;
    --vz-popover-bg: #fff;
    --vz-pagination-hover-bg: #eff2f7;
    --vz-input-bg: #fff;
    --vz-input-border: #ced4da;
    --vz-input-focus-border: #a0a8c4;
    --vz-input-disabled-bg: #eff2f7;
    --vz-input-group-addon-bg: #eff2f7;
    --vz-input-check-border: var(--vz-input-border);
}
[data-layout-mode=dark] {
    --vz-gray-100: #1a1d21;
    --vz-gray-200: #212529;
    --vz-gray-300: #2a2f34;
    --vz-gray-400: #878a99;
    --vz-gray-500: #adb5bd;
    --vz-gray-600: #bfc8e2;
    --vz-gray-700: #ced4da;
    --vz-gray-800: #eff2f7;
    --vz-gray-900: #f3f6f9;
    --vz-body-bg: #1a1d21;
    --vz-body-color: #ced4da;
    --vz-body-color-rgb: 206, 212, 218;
    --vz-vertical-menu-bg: #fff;
    --vz-vertical-menu-item-color: #5f6270;
    --vz-vertical-menu-item-hover-color: #405189;
    --vz-vertical-menu-item-active-color: #405189;
    --vz-vertical-menu-sub-item-color: #686b7b;
    --vz-vertical-menu-sub-item-hover-color: #405189;
    --vz-vertical-menu-sub-item-active-color: #405189;
    --vz-vertical-menu-title-color: #878a99;
    --vz-vertical-menu-bg-dark: #212529;
    --vz-vertical-menu-item-color-dark: #878a99;
    --vz-vertical-menu-item-hover-color-dark: #fff;
    --vz-vertical-menu-item-active-color-dark: #fff;
    --vz-vertical-menu-sub-item-color-dark: #7c7f90;
    --vz-vertical-menu-sub-item-hover-color-dark: #fff;
    --vz-vertical-menu-sub-item-active-color-dark: #fff;
    --vz-vertical-menu-title-color-dark: #5f6270;
    --vz-header-bg: #292e32;
    --vz-header-item-color: #e9ecef;
    --vz-header-bg-dark: #405189;
    --vz-header-item-color-dark: #b0c4d9;
    --vz-topbar-search-bg: #202328;
    --vz-topbar-user-bg: #31373c;
    --vz-topbar-user-bg-dark: #52639c;
    --vz-footer-bg: #212529;
    --vz-footer-color: #878a99;
    --vz-topnav-bg: #272b30;
    --vz-topnav-item-color: #878a99;
    --vz-topnav-item-color-active: #fff;
    --vz-twocolumn-menu-iconview-bg: #fff;
    --vz-twocolumn-menu-bg: #fff;
    --vz-twocolumn-menu-iconview-bg-dark: var(--vz-vertical-menu-bg-dark);
    --vz-twocolumn-menu-bg-dark: #30363a;
    --vz-twocolumn-menu-item-color-dark: var(--vz-vertical-menu-item-color-dark);
    --vz-twocolumn-menu-item-active-color-dark: #fff;
    --vz-twocolumn-menu-item-active-bg-dark: rgba(255,  255,  255,  0.15);
    --vz-boxed-body-bg: #111316;
    --vz-heading-color: #ced4da;
    --vz-light: #2a2f34;
    --vz-light-rgb: 42, 47, 52;
    --vz-dark: #eff2f7;
    --vz-dark-rgb: 239, 242, 247;
    --vz-link-color: #ced4da;
    --vz-link-hover-color: #ced4da;
    --vz-border-color: #32383e;
    --vz-dropdown-bg: #292e33;
    --vz-dropdown-link-color: #adb5bd;
    --vz-dropdown-link-hover-color: #b9bfc4;
    --vz-dropdown-link-hover-bg: #2f343a;
    --vz-dropdown-border-width: 1px;
    --vz-card-bg: #212529;
    --vz-card-cap-bg: #212529;
    --vz-card-logo-dark: none;
    --vz-card-logo-light: block;
    --vz-modal-bg: #212529;
    --vz-nav-tabs-link-active-color: #f3f6f9;
    --vz-nav-tabs-link-active-bg: #2a2f34;
    --vz-accordion-button-active-color: #fff;
    --vz-progress-bg: #2a2f34;
    --vz-toast-background-color: rgba(42,  47,  52,  0.85);
    --vz-toast-border-color: rgba(255,  255,  255,  0.1);
    --vz-toast-header-border-color: rgba(255,  255,  255,  0.05);
    --vz-list-group-hover-bg: #272b30;
    --vz-popover-bg: #23282c;
    --vz-pagination-hover-bg: #2a2f34;
    --vz-input-bg: #262a2f;
    --vz-input-border: #2a2f34;
    --vz-input-focus-border: #33393f;
    --vz-input-disabled-bg: #212529;
    --vz-input-group-addon-bg: #2a2f34;
    --vz-input-check-border: #33393f;
}
.card {
    margin-bottom: 1.5rem;
    -webkit-box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    background-color: #fff;
}

.card-header {
    border-bottom: 1px solid var(--vz-border-color);
}
.card-header-dropdown .dropdown-btn {
    padding: 1rem 0;
}
.card-footer {
    border-top: 1px solid var(--vz-border-color);
}
.card-drop {
    color: #212529;
}
.card-title {
    font-size: 16px;
    margin: 0 0 7px 0;
}
.card-title-desc {
    margin-bottom: 24px;
}
.card-height-100 {
    height: calc(100% - 1.5rem);
}
.card-animate {
    -webkit-transition: all .4s;
    transition: all .4s;
}
.card-animate:hover {
    -webkit-transform: translateY(calc(-1.5rem / 5));
    transform: translateY(calc(-1.5rem / 5));
    -webkit-box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
    box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
}
.card-primary {
    color: #fff;
    background-color: #405189;
}
.card-primary .card-footer, .card-primary .card-header {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: transparent;
}
.card-primary .card-title {
    color: #fff;
}
.card-secondary {
    color: #fff;
    background-color: #3577f1;
}
.card-secondary .card-footer, .card-secondary .card-header {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: transparent;
}
.card-secondary .card-title {
    color: #fff;
}
.card-success {
    color: #fff;
    background-color: #0ab39c;
}
.card-success .card-footer, .card-success .card-header {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: transparent;
}
.card-success .card-title {
    color: #fff;
}
.card-info {
    color: #fff;
    background-color: #299cdb;
}
.card-info .card-footer, .card-info .card-header {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: transparent;
}
.card-info .card-title {
    color: #fff;
}
.card-warning {
    color: #fff;
    background-color: #f7b84b;
}
.card-warning .card-footer, .card-warning .card-header {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: transparent;
}
.card-warning .card-title {
    color: #fff;
}
.card-danger {
    color: #fff;
    background-color: #f06548;
}
.card-danger .card-footer, .card-danger .card-header {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: transparent;
}
.card-danger .card-title {
    color: #fff;
}
.card-light {
    color: #fff;
    background-color: #f3f6f9;
}
.card-light .card-footer, .card-light .card-header {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: transparent;
}
.card-light .card-title {
    color: #fff;
}
.card-dark {
    color: #fff;
    background-color: #212529;
}
.card-dark .card-footer, .card-dark .card-header {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: transparent;
}
.card-dark .card-title {
    color: #fff;
}
.card-border-primary {
    border-color: #405189!important;
}
.card-border-primary .card-footer, .card-border-primary .card-header {
    border-color: #405189;
}
.card-border-secondary {
    border-color: #3577f1!important;
}
.card-border-secondary .card-footer, .card-border-secondary .card-header {
    border-color: #3577f1;
}
.card-border-success {
    border-color: #0ab39c!important;
}
.card-border-success .card-footer, .card-border-success .card-header {
    border-color: #0ab39c;
}
.card-border-info {
    border-color: #299cdb!important;
}
.card-border-info .card-footer, .card-border-info .card-header {
    border-color: #299cdb;
}
.card-border-warning {
    border-color: #f7b84b!important;
}
.card-border-warning .card-footer, .card-border-warning .card-header {
    border-color: #f7b84b;
}
.card-border-danger {
    border-color: #f06548!important;
}
.card-border-danger .card-footer, .card-border-danger .card-header {
    border-color: #f06548;
}
.card-border-light {
    border-color: #f3f6f9!important;
}
.card-border-light .card-footer, .card-border-light .card-header {
    border-color: #f3f6f9;
}
.card-border-dark {
    border-color: #212529!important;
}
.card-border-dark .card-footer, .card-border-dark .card-header {
    border-color: #212529;
}
.card-light {
    background-color: var(--vz-light);
}
.card-light .card-footer, .card-light .card-header {
    color: var(--vz-body-color)!important;
    background-color: rgba(var(--vz-dark-rgb), .1);
}
.card-light .card-text, .card-light .card-title {
    color: var(--vz-body-color)!important;
}
.stretched-link {
    position: static;
}
.card-preloader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--vz-light-rgb), .6);
    z-index: 9999;
}
.card-status {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%)!important;
    transform: translate(-50%, -50%)!important;
}
.custom-loader {
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
    to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}@keyframes spin {
    to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}.card-overlay {
    position: relative;
    overflow: hidden;
}
.card-overlay:before {
    content: "";
    background-color: rgba(64, 81, 137, .2);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.card-overlay .card-footer, .card-overlay .card-header {
    border-color: rgba(255, 255, 255, .15)!important;
}
.card-toolbar-menu {
    line-height: .8;
}
.card-toolbar-menu a {
    font-size: 17px;
}
.card-toolbar-menu .minimize-card .plus {
    display: none;
}
.card-toolbar-menu .minimize-card .minus {
    display: block;
}
.card-toolbar-menu .minimize-card.collapsed .plus {
    display: block;
}
.card-toolbar-menu .minimize-card.collapsed .minus {
    display: none;
}

.bg-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    opacity: .7;
    background-color: #000;
}
.auth-page-wrapper .auth-page-content {
    padding-bottom: 60px;
    position: relative;
    z-index: 2;
    width: 100%}
.auth-page-wrapper .footer {
    left: 0;
    background-color: transparent;
    color: #212529;
}
.auth-one-bg-position {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 380px;
}
@media (max-width:575.98px) {
    .auth-one-bg-position {
    height: 280px;
}
}.auth-one-bg {
    background-image: url(../images/auth-one-bg.jpg);
    background-position: center;
    background-size: cover;
}
.auth-one-bg .bg-overlay {
    background: linear-gradient(#025bbf 0%, #2a84ff 100%) !important;
    opacity: .9;
}
.auth-one-bg .shape {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}
.auth-one-bg .shape>svg {
    width: 100%;
    height: auto;
    fill: var(--vz-body-bg);
}
.auth-pass-inputgroup input[type=text]+.btn .ri-eye-fill:before {
    content: "\ecb6"}
.particles-js-canvas-el {
    position: relative;
}
.signin-other-title {
    position: relative;
}
.signin-other-title:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--vz-border-color);
    top: 10px;
}
.signin-other-title .title {
    display: inline-block;
    position: relative;
    z-index: 9;
    background-color: var(--vz-card-bg);
    padding: 2px 16px;
}
.auth-bg-cover {
    background: linear-gradient(-45deg, #405189 50%, #0ab39c);
}
.auth-bg-cover>.bg-overlay {
    background-image: url(../images/cover-pattern.png);
    background-position: center;
    background-size: cover;
    opacity: 1;
    background-color: transparent;
}

.error-basic-img {
    max-width: 450px;
}
.error-500 .title {
    font-size: 250px;
}
.error-500 .error-500-img {
    position: absolute;
    top: 57px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
@media (min-width:768px) and (max-width:991.98px) {
    .error-500 .title {
    font-size: 150px;
}
.error-500 .error-500-img {
    width: 20%!important;
    top: 43px;
}
}@media (max-width:767.98px) {
    .error-500 .title {
    font-size: 68px;
    margin-top: 35px;
}
.error-500 .error-500-img {
    position: relative;
    top: 0;
}
}@-webkit-keyframes errorAnimation {
    0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
}
30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
}
45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
}
60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
}
75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
}
100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
}@keyframes errorAnimation {
    0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
}
30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
}
45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
}
60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
}
75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
}
100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
}.error-img {
    -webkit-animation: errorAnimation 20s infinite;
    animation: errorAnimation 20s infinite;
}
.error-text {
    text-shadow: 4px 4px rgba(10, 179, 156, .4);
}
@media (min-width:1200px) {
    .error-text {
    font-size: 10rem;
}
}.profile-wid-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 320px;
}
@media (max-width:575.98px) {
    .profile-wid-bg {
    height: 445px;
}
}



.move-animation {
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}
@-webkit-keyframes mover {
    0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
100% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
}
}@keyframes mover {
    0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
100% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
}

}


.footer-social-link .avatar-title {
    color: #778089;
    background-color: rgba(255, 255, 255, .05);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.footer-social-link .avatar-title:hover {
    color: #fff;
    background-color: #405189;
}


.avatar-xxs {
    height: 1.5rem;
    width: 1.5rem;
}
.avatar-xs {
    height: 2rem;
    width: 2rem;
}
.avatar-sm {
    height: 3rem;
    width: 3rem;
}
.avatar-md {
    height: 4.5rem;
    width: 4.5rem;
}
.avatar-lg {
    height: 6rem;
    width: 6rem;
}
.avatar-xl {
    height: 7.5rem;
    width: 7.5rem;
}
.avatar-title {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #405189;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 500;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%}
.avatar-group {
    padding-left: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.avatar-group .avatar-group-item {
    margin-left: -12px;
    border: 2px solid var(--vz-card-bg);
    border-radius: 50%;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.avatar-group .avatar-group-item:hover {
    position: relative;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    z-index: 1;
}


.btn-success{
background-color: #0F6FC2 !important;
border-color: #0F6FC2 !important;
}
.btn-success:hover{
background-color: #0c5fa8 !important;
border-color: #0c5fa8 !important;
}
/* @media(max-width:768px){
    .auth-page-content img{
      width: 150px;
    }
} */
.btn-watch-pass{
    width: 45px!important;
}