:root {
    --primary: #0f673e;
    --secondary: #d58c3f;
    --tertiary: rgba(25, 135, 84, 0.85);
}

button.btn {
    background: #43B27F !important;
    color: #fff !important;
    border-radius: 1.2rem !important;
}

a.forgot {
    color: white !important;
    text-align: right !important;
    width: 100% !important;
}

.row.frow {
    width: 100vw !important;
}

.frow .loginbg {
    height: 42rem !important;
    width: 42rem !important;
    margin: 0 !important;
    background: #0000006b !important;
    padding: 3rem !important;
    border-radius: 4rem !important;
    backdrop-filter: blur(6px) !important;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loginbg {
    height: 52rem !important;
    width: 42rem !important;
    margin: 0 !important;
    background: #0000006b !important;
    padding: 3rem !important;
    border-radius: 4rem !important;
    backdrop-filter: blur(6px) !important;
}

button.btn:hover {
    background: white !important;
    color: var(--primary) !important;
    transition: 0.5s ease-in;
}


.frow .bgoffsetbg {
    height: 42rem !important;
    width: 42rem !important;
    margin: 1rem 0 0 0 !important;
    background: url("../bg.jpeg") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border-radius: 3.5rem !important;
}

.checkbox-inline, .radio-inline {
    color: white;
}

.bgoffsetbgno {
    margin: 1rem 0 0 0 !important;
    width: 100% !important;
    background: url("../bg.jpeg") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border-radius: 3.5rem !important;
}

.form-bottom {
    padding: 10px !important;
}


input[type="text"], input[type="password"], textarea, textarea.form-control {
    border: 1px solid white !important;
    border-radius: 2vw !important;
    background: white !important;
    padding: 0 1vw !important;
}

.form-top {
    border: none !important;
}

.logowidth img {
    width: 15rem !important;
    margin: 1rem auto !important;
    height: auto !important;
}

.form-top-left {
    display: flex !important;
    padding: 0 !important;
}

.font-white {
    color: white !important;
    font-size: 2.6rem !important;
    text-align: center !important;
}

.loginbg span p {
    color: orange !important;
}

@media (min-width: 300px) and (max-width: 530px) {
    .loginbg {
        height: 52rem !important;
        width: 34rem !important;
        padding: 1.2rem !important;
    }

    input[type="text"], input[type="password"], textarea, textarea.form-control {
        border: 1px solid white !important;
        border-radius: 2rem !important;
        background: white !important;
        padding: 0 1rem !important;
    }

    .frow .bgoffsetbg {
        height: 42rem !important;
        width: 34rem !important;
        margin: 1rem auto !important;
    }
    .frow .loginbg {
        height: 42rem !important;
        width: 34rem !important;}

}

@media (min-width: 531px) and (max-width: 767px) {
    .frow .bgoffsetbg {
        height: 42rem !important;
        width: 42rem !important;
        margin: 1rem auto !important;
    }
    .frow .loginbg {
        height: 42rem !important;
        width: 42rem !important;}

}

@media (min-width: 768px) and (max-width: 992px) {
    .frow .bgoffsetbg {
        height: 42rem !important;
        width: 42rem !important;
        margin: 1rem auto !important;
    }
    .frow .loginbg {
        height: 42rem !important;
        width: 42rem !important;}
}

@media (min-width: 993px) and (max-width: 1199px) {
    .frow .bgoffsetbg {
        height: 42rem !important;
        width: 42rem !important;
        margin: 1rem auto !important;
    }
    .frow .loginbg {
        height: 42rem !important;
        width: 42rem !important;}
}