body {
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    /*background-image: linear-gradient(45deg, #00bdff, #00a9e6) !important;*/
    /*background-image: url(../images/login_left.png);
    background-size: contain;*/

}

/*body:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
    opacity: .8;
}*/

.wrapper {
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
}

.box_header img {
    width: 140px;
}

.boxxouter {
    /*position: absolute;*/
    /* left: 0; */
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    background: #fff;
    background-image: url(../images/login_right.png);
    background-size: cover;
}

.boxx {
    width: 470px;
}

.boxx .form-control {
    border-radius: 10px;
    border: 1px solid #ababab;
    height: 60px;
    width: 100%;
    padding: 10px 25px !important;
    line-height: 26px;
    font-size: 16px;
    color: #E5E5E5 !important;
    transition: all .4s;
    /* font-size: 16px; */
    text-transform: capitalize;
    position: relative;
}

.boxx input:-webkit-autofill,
.boxx input:-webkit-autofill:hover,
.boxx input:-webkit-autofill:focus,
.boxx input:-webkit-autofill:active {
    -webkit-text-fill-color: #E5E5E5;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

.input-group>.form-control:not(:first-child),
.input-group>.custom-select:not(:first-child) {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-right-left-radius: 6px;
    border-left-left-radius: 6px;
}

.boxx .form-control {
    color: #415076 !important;
    position: relative;
}

.boxx h2 {
    color: #ffffff;
    padding-bottom: 6px;
    text-transform: uppercase;
    font-size: 2rem;
}

.boxx p {
    color: #ffffff;
    padding-bottom: 20px;
    font-size: 1.6rem;
    opacity: .7;
}

.form-group {
    margin-bottom: 1.5rem;
}

.boxx a {
    color: #1d2544;
}

.boxx button.btn-danger {
    white-space: nowrap;
    text-align: center;
    background-color: #1ede8b;
    border-color: #1ede8b;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 26px;
    letter-spacing: 1px;
    padding: 0 20px;
    color: rgb(0 0 0);
    display: inline-block;
    box-shadow: 3px 3px 6px #00000026;
    font-weight: bold;
    height: 60px;
}

.boxx button.btn-danger:focus,
.boxx button.btn-danger.active,
.boxx button.btn-danger:hover {
    background-color: #15ff9a !important;
    border-color: #15ff9a !important;
    /* color: #fff; */
    outline: none !important;
}

[type="checkbox"]+label:before,
[type="checkbox"]:not(.filled-in)+label:after {
    border: 2px solid #5d5ae5;
}

.input-group-text i {
    color: #efeded;
}

.login_btn p {
    text-align: center;
    margin-bottom: 3px;
}

.login_btn p a {
    color: #5d5ae5;
}

.nk-df-bg,
.nk-ovm,
.nk-ovm:before,
.nk-ovm:after,
.has-bg,
[class*='bg-'],
.bg-image,
.bg-video,
.bg-video-cover {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

.nk-ovm {
    z-index: -1;
}

.nk-ovm:before,
.nk-ovm:after {
    bottom: -1px;
    left: -1px;
}

.nk-ovm:before {
    z-index: 1;
}


.nk-ovm-repeat:after {
    background-repeat: repeat;
    background-size: contain;
}

.nk-ovm-fixed:after {
    background-attachment: fixed;
}

.ovm-line {
    position: relative;
    width: 64%;
    max-width: 1280px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.nk-df-shape-i,
.shape-i:after,
.shape-i-bg {
    background-image: url(https://www.fiper.me/assets/images/shape-a2.png);
    content: '';
}

.ovm-line:before,
.ovm-line:after {
    position: absolute;
    content: '';
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ovm-line:before {
    width: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.ovm-line:after {
    width: 50%;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.carouselSilder {
    position: absolute;
    inset: 0;
    background: #000;
    overflow: hidden;
}

.carouselSilder .carousel-item img.w-100 {
    width: 100% !important;
    max-width: 100% !important;
}


.customContainer {
    max-width: 960px;
    padding: 0;
    position: relative;
    z-index: 9;
}

.customGrid {
    display: grid;
    grid-template-columns: 380px 460px;
    justify-content: space-between;
    height: 100vh;
}

.leftContent {
    margin: auto 0 0 0;
    padding: 0 0 100px;
}

.leftContent img {
    max-width: 300px;
}

.leftContentInner {
    margin: 80px 0 0;
}

.leftContentInner h3 {
    color: #fff;
    font-size: 44px;
    font-family: 'Tusker Grotesk 5500';
    text-transform: uppercase;
    margin: 0;
}

.leftContentInner p {
    color: #fff;
    font-size: 16px;
    margin: 24px 0 0;
    width: 270px;
}

.rightContent {
    background: #FAFAFA;
    border-radius: 24px 24px 0 0;
    padding: 40px 40px 20px;
    margin: auto 0 0 0;
    min-height: 581px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rightContent .welcomeback {
    font-size: 13px;
    color: #000;
    text-transform: uppercase;
}

.rightContent h2 {
    font-size: 25px;
    color: #000;
    margin: 10px 0 0;
    font-weight: 500;
}

.rightContent form {
    margin: 24px 0 0;
}

.form-group-grid {
    display: grid;
    grid-template-columns: 183px 183px;
    justify-content: space-between;
    gap: 14px;
}

.rightContent .form-group {
    margin: 0;
}

.rightContent .input-group {
    margin: 0;
}

.rightContent .input-group>.form-control,
.rightContent .select2-container--default .select2-selection--single {
    border-radius: 8px !important;
    border: 1px solid #BDBDBD;
    height: 50px !important;
    padding: 15px !important;
}

.rightContent .checkbox {}

.rightContent .checkbox a {
    color: #424242;
    font-size: 13px;
    font-weight: 400;
}

.rightContent .checkbox [type="checkbox"]+label {
    padding-left: 23px;
    height: 15px;
    line-height: 15px;
    margin: 0;
}

.rightContent .checkbox [type="checkbox"]+label:before,
.rightContent .checkbox [type="checkbox"]:not(.filled-in)+label:after {
    width: 15px;
    height: 15px;
    border: 2px solid #424242;
    border-radius: 1px;
    margin-top: 0;
}


.rightContent .checkbox [type="checkbox"]:checked+label:before {
    top: -2px;
    left: -2px;
    width: 8px;
    height: 15px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #424242;
    border-bottom: 2px solid #424242;
}

.rightContent button[type="submit"] {
    margin: 14px 0 0;
    background: #212121;
    width: 100%;
    color: #fff;
    border-radius: 8px;
    height: 50px;
    text-transform: uppercase;
    font-size: 15px;
}

.or {
    display: flex;
    justify-content: center;
    margin: 20px 0 0;
    position: relative;
}

.or:before {
    content: '';
    width: 100%;
    height: 1px;
    background: #E0E0E0;
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
}

.or span {
    color: #212121;
    background: #FAFAFA;
    padding: 0 15px;
    font-size: 13px;
    position: relative;
    z-index: 1;
}

.alreadyAccount {
    margin: 20px 0 0;
    display: flex;
    justify-content: center;
}

.alreadyAccount span {
    font-size: 13px;
    color: #212121;
    font-weight: 400;
}

.alreadyAccount a {
    font-size: 13px;
    color: #212121;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: underline;
    margin: 0 0 0 5px;
}

.forgetPass {
    font-size: 13px;
}

.loginpage {}

.loginpage .input-group {
    margin: 0 0 20px;
}

.loginpage .rightContent button[type="submit"] {
    margin: 20px 0 0;
}

.g-recaptcha {
    margin-bottom: 14px;
}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 768px) and (max-width: 991px) {

    .customGrid {
        display: grid;
        grid-template-columns: auto;
        justify-content: space-between;
        height: 100%;
        justify-content: center;
    }

    .carouselSilder {
        height: max-content;
    }

    .carouselSilder .carousel-item img.w-100 {

        height: 922px;
        object-fit: cover;
    }

    .leftContent img {
        max-width: 230px;
        /* padding: 11px 15px; */
        margin: 31px 0 7px;
    }

    .leftContentInner {
        margin: 15px 0 0;
    }

    .rightContent {
        padding: 40px 53px 20px;
        min-height: auto;
    }

    .leftContent {
        padding: 0 0 70px;
    }
}

@media (min-width:320px) and (max-width:767px) {
    .customGrid {
        grid-template-columns: auto;
    }

    [type="checkbox"]+label:before,
    [type="checkbox"]:not(.filled-in)+label:after {
        top: -2px;
        left: -2px;
    }

    [type="checkbox"]:not(.filled-in)+label:after {
        transform: none;
    }

    .rightContent .checkbox [type="checkbox"]+label {
        height: 20px;
        line-height: 17px;        padding-left: 30px;

        font-size: 16px;
    }

    .rightContent .checkbox [type="checkbox"]+label:before,
    .rightContent .checkbox [type="checkbox"]:not(.filled-in)+label:after {
        width: 20px;
        height: 20px;

    }

    .rightContent .checkbox a {
        font-size: 16px;
    }

    .leftContent {
        padding: 0 0 50px;
    }

    .forgetPass {
        font-size: 15px;
    }

    .or span {
        font-size: 15px;
    }

    .alreadyAccount span {
        font-size: 15px;
    }

    .rightContent h2 {
        font-size: 25px;
    }

    .alreadyAccount a {
        font-size: 14px;
        margin: 0 0 0 10px;
    }

    .rightContent button[type="submit"] {
        margin: 22px 0 0;
    }

    .rightContent .welcomeback {
        font-size: 16px;
    }

    .carouselSilder .carousel-item img.w-100 {

        height: 800px;
        object-fit: cover;
    }

    .form-group-grid {
        display: flex;
        grid-template-columns: auto;
        justify-content: center;
        gap: 14px;
        width: 100%;
        align-items: center;
        justify-items: end;
        flex-direction: column;
    }

    .rightContent form {
        margin: 24px 0 0;
        width: 100%;
    }

    .leftContent img {
        max-width: 200px;
        /* padding: 11px 15px; */
        margin: 31px 34px 7px;
    }

    .leftContentInner {
        margin: 15px 40px 0;
    }

    .rightContent {
        padding: 47px 20px 20px;
        min-height: auto;
    }

    .leftContentInner h3 {
        font-size: 38px;
    }

    #account_type_html {
        width: 100%;
    }

    .select2-container {
        width: 100% !important;
    }
}

@media only screen and (min-width: 1800px) {}

@media only screen and (min-width: 2400px) {}