body {
    font-family: "Roboto", serif;
}
.signin .main-wrapper {
    background: url(../images/main-img01.png) center center no-repeat;
    background-size: cover;
    width:100vw;
    min-height: 100vh;
    padding:3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signin .main-wrapper > div:first-child {
    width:40%;
    position: relative;
}

.signin .main-wrapper > div:last-child {
    width:60%;
    background-color: #0033a7;
    min-height:100%;
    padding:4rem 8rem;
    border-radius: 20px;
    color:#FFF !important;
}

.signin .main-wrapper > div:last-child h2 {
    color:#FFF !important;
    font-size: 46px;
}

.sign-in-box {
    max-width: 580px;
    padding: 2.5rem 4rem;
    background-color: #FFF;
    border-radius: 20px;
    position: relative;
    right: -60px;
}

.btn.btn-primary {
    background-color: #0033a7;
    border-radius: 30px;
    color:#FFF;
}
.hr-custom {
    text-align: center;
}
ul[role="list"] {
    padding: 0;
    margin:0;
}
ul.social-register {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 1rem;
}

.app-sidebar {
    background-color: #3a1486;
    border-top-left-radius: 0;
}

.app-sidebar .menu-item .menu-link .menu-title {
    color: #FFF;
}
.profile-wrapper {
    margin-top: 10px;
}
.profile-wrapper p {
    color:#FFF !important;
    text-align: center;
    margin-bottom: 0;
}

.profile-wrapper .avatar {
    width:80px;
    height:80px;
    border-radius: 50%;
    background-color: #979797;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
}

.app-sidebar .menu-item .menu-link.active {
    border-radius: 40px;
    background-color: #adcfff;
    color:#000;
    margin-right: 10px;
}
.app-sidebar .menu-item .menu-link.active .icon, .app-sidebar .menu-item .menu-link .icon  {
    width:24px;
    height:24px;
    background-size: contain;
    position: relative;
    margin-right: 8px;
    top: -1px;
}

.app-sidebar .menu-item .menu-link.active .icon-graph {
    background: url(../images/icons/graph-selected.svg) center center no-repeat;
}
.app-sidebar .menu-item .menu-link .icon-briefcase {
    background: url(../images/icons/briefcase.svg) center center no-repeat;
}

.app-sidebar .menu-item .menu-link .icon-community {
    background: url(../images/icons/community.svg) center center no-repeat;
}

.app-sidebar .menu-item .menu-link .icon-person {
    background: url(../images/icons/person.svg) center center no-repeat;
}


.app-sidebar .menu-item .menu-link .icon-wallet {
    background: url(../images/icons/wallet.svg) center center no-repeat;
}


.app-sidebar .menu-item .menu-link .icon-calendar {
    background: url(../images/icons/calendar.svg) center center no-repeat;
}

.menu-item .menu-link .menu-arrow {
    margin-right: 10px;
}
.app-wrapper, .app-header  {
    padding-left: 2rem;
}

.upgrade-wrapper {
    border-radius: 20px;
    background-color: rgba(255,255,255,0.1);
    color:#FFF;
    margin-right: 10px;
    margin-top: 40px;
    padding:20px;
    margin-bottom: 80px;
    text-align: center;
   
}

.upgrade-wrapper h3 {
    color:#FFF;
    text-align: center;
}

.upgrade-wrapper img {
    margin:0 auto;
    position: relative;
    display: block;
    margin-top:-30%;
    margin-bottom: 10px;
}

.upgrade-wrapper a {
    background-color: #adcfff;
    border-radius: 20px;
    display: flex;
    color:#23272c !important;
    width:135px;
    height:40px;
    margin:0 auto;
    align-items: center;
    justify-content: center;
}

.box33 {
    width:30%;
    margin: 1.5%;
    float: left;
    height:400px;
    border:1px solid #CCC;
    padding:20px;
    border-radius: 10px;
}

.box66 {
    width:63%;
    margin: 1.5%;
    float: left;
    height:400px;

    border:1px solid #CCC;
    padding:20px;
    border-radius: 10px;
}
.notif-wrapper {
    width: 100%;
    padding-right: 30px;
}
.notif-wrapper > div {
    margin-top: 20px;
    display: block;
    padding:10px;
    border:1px solid #CCC;
    border-radius: 10px;
    width:100%;
}