.student-login-23 {
  background-image: url(../images/bg-login-23.jpg);
  background-size: cover;
  background-position: left;
  background-blend-mode: screen;
  background-color: #1866BC;
}

.bgc-4512 {
    background-color: #feffff73;
}

.login-bg-style {
    border-width: 3px 3px 3px 3px;
    border-color: #0099ff!important;
    border-style: solid;
    top: -5px;
    right: -5px;
    bottom: -5px;
}

.box-style {
    border-width: 3px 3px 3px 3px;
    border-color: var(--swatch-var-1526)!important;
    border-style: solid;
    top: -5px !important;
    right: -5px !important;
    bottom: -5px !important;
}

.bloc-fill-screen > .container > .row {
    flex-grow: 1;
    align-self: center;
    width: 100%;
}

.full-width-bloc .row {
    margin-left: 0;
    margin-right: 0;
}

.row-full {
    bottom: 0px;
    top: 0px;
    position: absolute;
    overflow: scroll;
    display: flex;
}

.align-items-start {
    align-items: flex-start!important;
}

.no-gutters>.col, .no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

.h1-gradient {
    background: linear-gradient(90deg, #0661a2 14%, #700324 87%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h1-style {
    font-size: 80px;
    font-family: "Lato";
    font-weight: 900;
    letter-spacing: 3px;
}

.h2-style {
    font-family: "Lato";
    font-weight: 900;
    letter-spacing: 3px;
    font-size: 50px;
}

.h3-style {
    font-family: "Lato";
    font-weight: 700;
    letter-spacing: 7px;
    font-size: 20px;
}

.h4-style {
    font-size: 20px;
    font-family: "Lato";
    font-weight: 900;
}

.no-gutters>.col, .no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

.bgc-4215 {
    background-color: #121021;
}

.bgc-4512 {
    background-color: #feffff73;
}

.bg-daftar {
    background-color: #16002278;
}

.container-div-style {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tc-1121 {
    color: #131121!important;
}

.tc-1122 {
    color: #ffffff!important;
}

.h5-style {
    font-size: 16px;
    font-family: "Lato";
    font-weight: 300;
}

.divider-background-color {
    background-color: #0099CC;
}

.divider-bloc-0-background-color {
    background-color: #09f;
}

.divider-bloc-1-background-color {
    background-color: #ffffff;
}

.divider-h {
    min-height: 1px;
    margin: 20px 0;
}

.tc-2048 {
    color: #09f!important;
}

.daftar-button {
    background: linear-gradient(90deg, #09f 0%, #93f 100%);
    border-style: solid;
    border-color: #06f!important;
    border-width: 3px 3px 3px 3px;
    color: #FFFFFF!important;
}

.daftar-button:hover {
    background: linear-gradient(90deg, #93f 0%, #09f 100%);
    border-color: var(--swatch-var-1121)!important;
    border-width: 3px 3px 3px 3px;
    border-style: solid;
}

.btn-margin-bottom {
    margin-bottom: 28px;
}

.btn-rd {
    border-radius: 40px;
}

.ltc-843 {
    color: var(--swatch-var-843)!important;
}

.link-style {
    font-weight: bold;
}

.bgc-2128 {
    background-color: #16002278;
}

.form-style {
    background-color: #333333;
    color: #FFFFFF!important;
    font-style: italic;
    text-align: center;
    font-size: 14px;
    height: 45px;
    border-style: solid;
    border-color: #09f !important;
    border-width: 1px 1px 1px 1px;
    border-radius: 10px 10px 10px 10px;
}

.form-control:focus {
    color: #495057 !important;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
}


/* THEME OES 2023 */

.header-navbar .navbar-wrapper .navbar-container .nav-right li.noti-bell {
    background-color: #227fe7;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 8px 10px;
}

.header-navbar .navbar-wrapper .navbar-container .nav-left li, .header-navbar .navbar-wrapper .navbar-container .nav-right li.noti-bell {
    line-height: 3;
}

.header-navbar .navbar-wrapper .navbar-container .badge {
    border-radius: 100px;
    right: 0;
    position: absolute;
    top: 0;
    padding: 6px;
}

.header-navbar .navbar-wrapper .navbar-container .noti-bell.active:before {
    bottom: -35px !important;
    right: 10px !important;
}

.header-navbar .navbar-wrapper .navbar-container .nav-left a, .header-navbar .navbar-wrapper .navbar-container .nav-right a {
    padding: 0;
}

.pcoded .pcoded-navbar {
    display: block;
    box-shadow: 0 4px 12px 0 rgb(131 146 165 / 15%);
    border-right: 1px solid rgba(224, 225, 235, 0.85);
}

.pcoded .pcoded-navbar .pcoded-item>li>a {
    font-size: 12px;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu {
    width: 95%;
}

.pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a {
    font-size: 12px;
    font-weight: normal;
}

.pcoded .pcoded-navbar .pcoded-item>li>a>.pcoded-micon {
    font-size: 18px;
    padding: 0;
    margin-right: 5px;
    color: #fff;
    border-radius: 4px;
    width: 30px;
    display: inline-block;
    height: 30px;
    text-align: center;
}

.pcoded .pcoded-header[header-theme="themelight5"] {
    background: #fff;
    border-bottom: 2px solid #1b8bf9;
}

.pcoded .pcoded-header[header-theme="themelight5"] a, .pcoded .pcoded-header[header-theme="themelight5"] .input-group-addon {
    color: #222;
}

.header-navbar .navbar-wrapper .navbar-logo .mobile-menu {
    position: absolute;
    right: 10px;
    top: calc(50% - 12px);
    font-size: 16px;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification {
    width: 18em;
}

.pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item li:hover>a {
    color: #000000 !important;
}

.pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item li:hover>a .pcoded-micon {
    color: #2962ff !important;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-trigger>a {
    background: #1b8bf921;
    color: #000 !important;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification.pilih-role.active:before {
    content: "";
    border: 10px solid transparent;
    border-left-color: #4099ff;
    border-top-color: #4099ff;
    position: absolute;
    border-radius: 5px;
    bottom: -25px;
    right: 40px;
    box-shadow: -11px -11px 35px 0 rgb(0 0 0 / 25%);
    transform: rotate(45deg);
    z-index: 9;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification.active:before {
    content: "";
    border: 10px solid transparent;
    border-left-color: #fff;
    border-top-color: #fff;
    position: absolute;
    border-radius: 5px;
    bottom: -25px;
    right: 40px;
    box-shadow: -11px -11px 35px 0 rgb(0 0 0 / 25%);
    transform: rotate(45deg);
    z-index: 9;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification li:first-child, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification li:first-child {
    border-radius: 5px 5px 0 0;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification {
    transform: translateY(15px);
}

.dropdown-logout {
    display: block;
    width: 100%;
    padding: 0.65rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-logout span {
    padding-left: 10px;
    line-height: 25px;
    vertical-align: top;
}

.dropdown-logout svg {
    width: 10%;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification a {
    font-size: 14px;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification li:first-child label, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification li:first-child label {
    float: unset;
}

.pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li>a>.pcoded-micon, .pcoded[nav-type="st2"] .pcoded-item.pcoded-left-item>li>a>.pcoded-micon {
    color: #000;
}

.pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item .pcoded-hasmenu[subitem-icon="style7"] .pcoded-submenu {
    border-left: 0px solid #d6d6d6;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu>li:first-child a {
    padding: 10px 0;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu>a:after, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-hasmenu>a:after {
    color: unset;
}

.pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover>a:before {
    border-left-color: unset;
}

.pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover>a:before {
    border-left-style: unset;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu>a:after {
    top: 10px;
}

.pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item li .pcoded-submenu li.active>a, .pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item li .pcoded-submenu li:hover>a {
    color: #fff !important;
    background-color: #0473ee;
    padding: 10px 0 !important;
}

.pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item .pcoded-hasmenu[subitem-icon="style7"] .pcoded-submenu>li.active>a>.pcoded-mtext:after, .pcoded .pcoded-navbar[active-item-theme="theme10"] .pcoded-item .pcoded-hasmenu[subitem-icon="style7"] .pcoded-submenu>li:hover>a>.pcoded-mtext:after {
    background-color: #38a9f800;
}

.pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a .pcoded-micon {
    display: inline-block;
    padding-right: 5px;
    padding-left: 10px;
}

.pcoded[theme-layout="vertical"][vertical-nav-type="expanded"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a {
    padding-left: 5px;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a {
    text-align: left;
    padding: 8.7px 0;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu>a:after {
    top: 12px;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu>a:after {
    padding-top: 0;
}

.card {
    border-radius: 5px;
    border-color: rgba(230, 231, 239, 0.85);
    box-shadow: 2px 2px 5px 0 rgb(60 70 83 / 4%);
    transition: all 0.25s;
    border: 1px solid rgba(230, 231, 239, 0.85);
}

.card:hover, .card:focus {
    box-shadow: 0 4px 12px 0 rgb(131 146 165 / 15%), 2px 2px 5px 0 rgb(60 70 83 / 4%);
    border-color: rgba(214, 216, 229, 0.85);
}

.pcoded .pcoded-navbar .pcoded-navigation-label[menu-title-theme="theme1"] {
    color: #222;
    text-transform: capitalize;
}

.welcome-dash {
    padding-bottom: 10px;
    border-bottom: 1px solid #93bae0;
    margin-bottom: 20px;
}

.welcome-dash span {
    font-weight: 500;
}

.welcome-dash-banner {

}

.welcome-dash-banner span {
    font-weight: 500;
    font-size: 16px;
    color: #fff;
}

.welcome-dash-banner label {
    display: block;
}

.welcome-dash-banner h3 {
    color: #fff;
    padding-top: 20px;
    border-top: 1px solid #fff;
    margin-top: 20px;
}

.badge {
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 12px;
}

.text-banner {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
}

.btn {
    border-radius: 5px;
    text-transform: capitalize;
    font-size: 14px;
    padding: 5px 15px;
    cursor: pointer;
}

.btn-light-blue {
    background-color: #dbecff;
    border-color: #dbecff;
    color: #4099ff;
    cursor: pointer;
    transition: all ease-in 0.3s;
}

.btn-light-blue:hover {
    background-color: #73b4ff;
    border-color: #73b4ff;
    color: #fff;
}

.btn-light-orange {
    background-color: #ffeedb;
    border-color: #ffeedb;
    color: #FFB64D;
    cursor: pointer;
    transition: all ease-in 0.3s;
}

.btn-light-orange:hover {
    background-color: #FFB64D;
    border-color: #FFB64D;
    color: #fff;
}

.btn-light-turq {
    background-color: #c0ecf4;
    border-color: #c0ecf4;
    color: #09c3e6;
    cursor: pointer;
    transition: all ease-in 0.3s;
}

.btn-light-turq:hover {
    background-color: #09c3e6;
    border-color: #09c3e6;
    color: #fff;
}

.btn-light-green {
    background-color: #dcf1ae;
    border-color: #dcf1ae;
    color: #82bb02;
    cursor: pointer;
    transition: all ease-in 0.3s;
}

.btn-light-green:hover {
    background-color: #82bb02;
    border-color: #82bb02;
    color: #fff;
}

.btn-circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 26px;
    padding: 11px 10px;
}

.btn-info {
    background-color: #1b8bf9;
    border-color: #1b8bf9;
    color: #fff;
    cursor: pointer;
    transition: all ease-in 0.3s;
}

.btn-info:hover {
    background-color: #0c57a0;
    border-color: #0c57a0;
    color: #fff;
    cursor: pointer;
    transition: all ease-in 0.3s;
}

.btn-white {
    background-color: #ffffff;
    border-color: #1b8bf9;
    color: #1b8bf9;
    cursor: pointer;
    transition: all ease-in 0.3s;
}

.btn-white:hover {
    background-color: #c9e4fe;
    border-color: #1b8bf9;
    color: #0d57a0;
    cursor: pointer;
    transition: all ease-in 0.3s;
}

.nav-pills .nav-link.active, .show>.nav-pills .nav-link {
    color: #fff !important;
    background-color: #065dbb !important;
}

.tab-content .tab-pane {
    margin-top: 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: 5px;
}

.form-control {
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 0.3rem;
}

select.form-control:not([size]):not([multiple]) {
    height: calc(2rem + 0px);
}

.table td, .table th {
    padding: 0.55rem;
    vertical-align: middle;
    border-top: 1px solid #e9ecef;
}

.btn i {
    margin-right: 0px;
}

.btn-sm {
    padding: 5px 9px;
    line-height: 18px;
    font-size: 12px;
}

.nav-pills .nav-link {
    border-radius: 0.25rem;
    background-color: #f0f6fd;
}

.card .card-header-2023 {
    background-color: #e8edf3;
    border-bottom: 1px solid #c7cfd8;
    padding: 25px;
}

button.close {
    margin-top: 0;
    margin-bottom: 0;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 0 #0c53a3;
    opacity: .5;
}

.modal-content {
    border: 0px solid rgba(0,0,0,.2);
    border-radius: 10px;
}

.modal-header {
    border: 0px solid rgba(0,0,0,.2);
    border-radius: 10px 10px 0 0;
}

@media (min-width: 576px)
.modal-dialog {
    max-width: 400px !important;
    margin: 15% auto !important;
}


.j-pro {
    border: 0px solid rgba(0,0,0,0.15);
    background-color: #f9fafd00;
}

.j-pro .j-content {
    padding: 0;
}

.j-pro .j-row {
    margin: 0;
}

.j-pro .j-footer {
    background-color: #fff;
    border-top: 1px dashed #c0c1c2;
    padding: 20px 25px;
    position: inherit;
}

.j-pro input[type="text"] {
    background: #fff;
    border: 2px solid rgba(0, 0, 0, .12);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    color: rgba(0, 0, 0, .87);
    display: block;
    font-family: inherit;
    font-size: 14px;
    height: 32px;
    padding: 5px 10px;
    width: 100%;
    outline: none;
}

.j-pro .j-icon-right {
    color: rgba(0, 0, 0, .54);
    font-size: 18px;
    height: 32px;
    line-height: 32px !important;
    opacity: .6;
    position: absolute;
    text-align: center;
    top: 0;
    width: 40px;
    z-index: 2;
}

.j-pro .j-icon-right {
    right: 0px;
}

.j-pro input[type="email"], .j-pro input[type="search"], .j-pro input[type="url"], .j-pro textarea, .j-pro select {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    font-size: 14px;
    height: 32px;
    padding: 5px 10px;
}