:root{
    --grey: #a0aec0;
    --redb: #6b0f1a;
    --redg: linear-gradient(315deg, #6b0f1a 0%, #b91372 74%);
}
.ocd{
    width: 90%;
    margin: 5px 5%;
    min-height: 320px;
}
.login-box{
    position: relative;
    width: 100%;
    height: 100vh;
    /*background: url("../images/bg1.jpg");*/
    /*background-size: cover;*/
    /*background-position: center center;*/
    /*background-repeat: no-repeat;*/
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cGF0aCBkPSJNLTIgMTBMMTAgLTJaTTEwIDZMNiAxMFpNLTIgMkwyIC0yIiBzdHJva2U9IiMyMjIiIHN0cm9rZS13aWR0aD0iNC41Ij48L3BhdGg+Cjwvc3ZnPg=="),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImciIHgyPSIxIiB5Mj0iMSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGMTkiPjwvc3RvcD4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMENGIj48L3N0b3A+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZykiPjwvcmVjdD4KPC9zdmc+");
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-form-wrapper{
    position: relative;
    width: 500px;
    min-height: 500px;
    background: rgba(0,0,0,0.5);
    padding: 40px;
}
.login-title{
    font-size: 50px;
    color: var(--brown);
    text-align: center;
    font-family: var(--great);
}
.login-label{
    font-size: 18px;
    color: var(--brown);
    font-family: var(--roboto);
}
.login-box .form-control{
    background: transparent;
    border: 1px solid var(--brown);
    color: var(--a);
}
.login-box .form-control::placeholder{
    color: #d0d0d0;
    font-size: 15px;
    font-weight: 400;
}
.login-box .form-control:focus{
    background: transparent;
    border: 1px solid var(--brown);
    box-shadow: 0 0 5px var(--brown);
    color: var(--a);
}
.login-a{
    font-size: 16px;
    font-weight: 500;
    color: var(--bg);
    float: right;
}
.login-a:hover{
    color: var(--c);
}

/*Dashboard*/
.dash-main-container{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    /*flex-wrap: wrap;*/
}
.dash-left{
    position: relative;
    width: 20%;
    min-height: 100vh;
    padding: 40px 20px;
    background: #0f0f0f;
}
.dash-right{
    position: relative;
    width: 80%;
    min-height: 100vh;
    padding: 40px 20px;
    background: #f7fafc;
}
.dash-profile{
    width: 100%;
    min-height: 70px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--grey);
}
.dash-pro-img-wr{
    width: 60px;
    height: 60px;
    border-radius: 30px;
    border: 1px solid gray;
}
.dash-pro-img{
    position: relative;
    width:  100%;
    height: 100%;
    border-radius: 50%;
}
.dash-pro-con-wr{
    padding-left: 10px;
}
.dash-pro-name{
    font-size: 18px;
    color: var(--grey);
}
.dash-pro-dash{
    font-size: 14px;
    color: #00917C;
}
.ntb{
    border-top: none;
}
.dash-sidebar{
    position: relative;
    width: 100%;
    min-height: 300px;
}
.dash-sb-ul{
    list-style: none;
    width: 100%;
}
.dash-sb-li{
    width: 100%;
    padding: 7px 10px;
    margin-top: 10px;
}
.dash-sb-li.active{
    background: var(--choco);
}
.dash-sb-li:first-child{
    margin-top: 0px;
}
.dash-sb-li:hover{
    background: var(--choco);
}
.dash-sb-a{
    width: 100%;
    font-size: 14px;
    color: var(--brown);
}
.dash-sb-a:hover{
    color: var(--brown);
}

.d-a-icon{
    color: var(--grey);
}
.cdrop-menu{
    width: 100%;
    background: rgba(0, 0, 0, 0.8) !important;
    border: none;
    padding-left: 20px;
    position: relative !important;
    transform: translate3d(0px, 0px, 0px) !important;
    top: 0px;
    left: 0px;

}
.cdrop-menu .dropdown-item{
    color: var(--grey);
    padding: .5rem 1.5rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.cdrop-menu .dropdown-item:hover{
    color: var(--grey);
    background: var(--choco);
}
.mt-15{
    margin-top: 15px;
}
.down-caret {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: var(--grey) transparent transparent transparent;
    display: inline-block;
    margin-left: 6px;
    top: -3px;
    position: relative;
    transform: rotate(90deg);
    transition: all 0.25s ease-in;
}
.open-caret {
    transform: rotate(-90deg);
    transition: all 0.25s ease-out;
}
.dropdown.show .down-caret{
    transform: rotate(0deg);
    transition: all 0.25s ease-out;
}
.dash-right{
    position: relative;
    width: 80%;
    min-height: 100vh;
    padding: 40px 20px;
    background: #f7fafc;
}
.dash-box-wr{
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: space-around;
    padding: 40px 0px;
    align-items: center;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    z-index: 10;
    transition: .5s;
}
.dash-right-bg{
   position: relative;
    background: transparent;
    width: 100%;
}
.dash-mn-box{
    width: 22%;
    min-height: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid grey;
    border-radius: 5px;
    padding-left: 20px;
}
.dash-box-in-1{
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin-top: -100px;
    /*background: linear-gradient(45deg, #472f8a, #5a45b7);*/
    background-color: #9eabe4;
    background-image: linear-gradient(315deg, #9eabe4 0%, #77eed8 74%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.dashbgp{
    background: var(--redb);
    background: var(--redg);
}
.dash-h4{
    font-size: 22px;
    color: #000;
    font-weight: 600;
    margin-bottom: 0;
}

.bpsec33
{
    width: 90%;
    margin: 0 auto;
    min-height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;

}
.bpl33{
    width: 50%;
    height: 100%;
    padding: 0;
}
.bpimg{
    position: relative;
    width: 100%;
    height: 100%;
}
.bpr33{
    width: 50%;
    height: 100%;
    background: var(--b);
    padding: 40px;
}
.bph1{
    font-size: 40px;
    color: white;
    font-family: var(--great);
}
.bpp1{
    font-size: 16px;
    color: #ccc;
}
.bpprice{
    font-size: 20px;
    color: rgb(10,255,10);
    font-family: var(--pt);
}


@media (max-width: 768px){
    .bpsec33{
        width: 100%;
    }
}
@media (max-width: 600px){
    .bpsec33{
        width: 100% ;
        flex-direction: column;
    }
    .bpl33{
        width: 100%;
        height: 200px;
    }
    .bpr33{
        width: 100%;
        min-height: 300px;
    }
    .bph1{
        font-size: 32px;
    }
}