@font-face {
    font-family: Montserrat;
    src: url(../fonts/montserrat/Montserrat-Regular.otf)
}

@font-face {
    font-family: MontserratLight;
    src: url(../fonts/montserrat/Montserrat-Light.otf)
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto/Roboto-Regular.ttf)
}

body {
    font-family: Roboto;
    padding-top: 58px;
    background: #f7f8f9;
    font-size: .9rem;
    zoom: 95%
}

::-webkit-scrollbar {
    width: 5px !important
}

::-webkit-scrollbar {
    width: 10px !important
}

::-webkit-scrollbar-track {
    border-radius: 0;
    background: #57B4BF
}

::-webkit-scrollbar-thumb {
    background: #0F6C84;
    border-radius: 0
}

.modal ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .5)
}

.page-item.disabled .page-link {
    color: #999 !important
}

.page-item.active .page-link {
    color: #fff !important
}

.page-link {
    color: #0F6C84 !important
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Montserrat;
    font-weight: 500
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: #535353
}

.only-distributed {
    display: none
}

.row-dynamic:first-child {
    margin-top: 0 !important
}

.row-dynamic {
    margin-top: 10px
}

.text-primary {
    color: #0F6C84 !important
}

a.text-primary:focus,
a.text-primary:hover {
    color: #57B4BF !important
}

.text-secondary {
    color: #098 !important
}

.text-danger {
    color: #dd2747 !important
}

.btn {
    border-radius: 3px;
    padding: 8px 20px;
    font-size: .8rem !important;
    white-space: normal;
    word-wrap: break-word
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: #999;
    border-color: #999
}

.role-group {
    background-color: #fff;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .1);
    border-radius: 5px !important;
    padding: 0 !important;
    margin: 0 !important
}

.carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%
}

.carousel-indicators li.active {
    width: 30px;
    border-radius: 10px
}

.carousel-control-next,
.carousel-control-prev {
    width: 3.75%
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    padding: 2rem;
    background-color: #0099d6 !important;
    background-size: 30% 30%
}

.carousel-control-next-icon {
    border-radius: 100% 0 0 100%
}

.carousel-control-prev-icon {
    border-radius: 0 100% 100% 0
}

.control.control--checkbox.control-sm {
    font-size: 12px !important;
    padding-top: 3px
}

.role-group .role-group-left {
    padding: 5px 20px
}

.role-group .role-group-left .control {
    margin-bottom: 5px !important;
    font-size: 14px !important;
    padding-left: 32px
}

.role-group .role-group-right {
    padding: 0 !important
}

.role-group-right input {
    border-radius: 0 !important;
    border: none !important;
    background-color: #f4f5f6 !important
}

.modal {
    background: linear-gradient(to right, rgba(75, 175, 127, .9), rgba(0, 105, 94, .9));
    background: -webkit-linear-gradient(to right, rgba(75, 175, 127, .9), rgba(0, 105, 94, .9));
    padding: 2vw 0
}

.modal.admin {
    background: linear-gradient(to right, rgba(88, 99, 167, .9), rgba(87, 40, 159, .9));
    background: -webkit-linear-gradient(to right, rgba(88, 99, 167, .9), rgba(87, 40, 159, .9));
    padding: 2vw 0
}

.modal.login-other-apps {
    background: linear-gradient(to bottom, #57B4BF, #0F6C84);
    background-image: url(../img/hero.webp);
    background-size: cover;
    background-position: bottom;
    padding: 2vw 0
}

#successModal .modal-content {
    padding: 30px
}

.modal-content {
    border-radius: 10px !important
}

.modal-md .modal-content {
    width: 80% !important
}

.modal-content {
    padding: 30px;
    border: none !important
}

.avatar {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px auto;
    display: block;
    object-fit: cover;
    border-radius: 100px;
    border: 1px solid #ddd;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, .025)
}

.avatar.avatar-xs {
    width: 24px;
    height: 24px
}

.avatar.inline {
    display: inline;
    margin: 0 0 0 -10px !important;
    border: 1px solid #fff !important
}

.thumbnail {
    width: 60px;
    height: 60px;
    object-fit: contain
}

.more-option {
    padding: 0;
    border-radius: 5px;
    width: 240px;
    top: 10% !important;
    right: 0 !important
}

.more-option li {
    padding: 10px 20px !important;
    font-size: .8rem
}

.more-option li:first-child {
    border-radius: 5px 5px 0 0
}

.more-option li:last-child {
    border-radius: 0 0 5px 5px
}

.more-option li:hover {
    background-color: #f7f8f9
}

.table tr td .more-option li:hover>a {
    color: #57B4BF !important
}

.table tr td .more-option li>a {
    color: #666 !important
}

.table tr td .more-option li>a:hover {
    text-decoration: none
}

.table tr td .more-option li>a>i {
    margin-right: 10px
}

.icon-more-option,
.table tr td a.icon-more-option {
    font-size: 20px;
    color: #999 !important;
    border-radius: 5px;
    padding: 2px 10px;
    text-align: center
}

.dropdown.show .icon-more-option,
.icon-more-option:hover,
.table tr td a.icon-more-option:hover {
    background: #ddd
}

.modal-image {
    height: 60px;
    margin: 1.5vw auto 2vw auto;
    display: block
}

.modal-title {
    font-size: 1.1rem
}

#successModal .modal-title.block {
    text-align: left !important
}

.modal-title.block {
    text-align: center !important;
    display: block;
    width: 100%
}

.block {
    width: 100%;
    display: block
}

.modal-header {
    border-bottom: none !important
}

.modal-footer {
    border-top: none !important;
    display: block;
    text-align: center
}

p {
    font-family: Roboto
}

.mega-menu {
    overflow: hidden;
    width: 640px;
    margin-top: 20px !important;
    border: none;
    box-shadow: 0 0 9px 3px rgba(0, 0, 0, .1);
    padding: 0;
    border-radius: 10px;
    left: 50%;
    margin-left: -320px
}

.mega-menu-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0;
    max-height: 200px;
    overflow-y: scroll
}

.mega-menu-list {
    padding: 1.25rem !important;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    width: 100%
}

.mega-menu-link {
    display: block;
    font-size: .925rem;
    padding: 1rem 1.5rem;
    color: #535353 !important;
    text-transform: none;
    font-family: Roboto;
    border-radius: 4px
}

.mega-menu-link:hover {
    color: #fff !important;
    background: #0F6C84;
    background-color: #0F6C84;
}

.mega-menu-logo {
    max-height: 160px;
    max-width: 40%;
    margin: 0 auto 2rem auto
}

.mega-menu-desc {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    text-transform: none;
    font-family: Roboto;
    font-size: .85rem;
    padding: 2rem 3rem 2rem 2rem;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%
}

.timeline.timeline-horizontal {
    position: relative;
    display: flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.timeline.timeline-horizontal .timeline-line {
    position: relative;
    border-top: 2px solid #57B4BF;
    display: flex;
    flex-direction: row;
    margin: 80px 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 0 padding-right:0
}

.timeline-item.bottom {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: -95px
}

.timeline-item.top {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: -150px
}

.timeline-content {
    font-size: .85rem
}

.timeline-icon {
    background: linear-gradient(to top, #57B4BF, #0F6C84);
    background: -webkit-linear-gradient(to top, #57B4BF, #0F6C84);
    border-radius: 100%;
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    color: #fff !important
}

.timeline-item.bottom .timeline-date {
    margin-top: .5rem
}

.timeline-item.top .timeline-date {
    margin-top: 0
}

.timeline-item.top .timeline-content {
    margin-top: 0;
    margin-bottom: .5rem !important
}

.timeline-date {
    font-size: .8rem;
    margin-bottom: 0 !important;
    color: #707070
}

.accordion {
    background-color: #f7f8f9;
    border-radius: 10px
}

.accordion-body .form-row {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.accordion-header p {
    font-size: 1rem !important;
    margin-bottom: 0 !important;
    font-weight: 600
}

.accordion-body>.row>.col-md-12>p {
    font-size: 1rem !important;
    margin: .75rem 0 !important;
    padding: 0 .5rem !important;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.transparent {
    background-color: transparent !important
}

.accordion-body .accordion-card:first-child {
    border-top: 1px solid rgba(0, 0, 0, .15);
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important
}

.accordion-body .accordion-card:last-child {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important
}

.accordion-body .accordion-card {
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: 0 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .15) !important;
    border-right: 1px solid rgba(0, 0, 0, .15) !important;
    border-left: 1px solid rgba(0, 0, 0, .15) !important
}

.accordion-card,
.accordion.accordion-card {
    border-radius: 10px !important;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, .1) !important;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, .1) !important;
    background: #fff;
    margin-bottom: 1rem
}

.accordion-header {
    padding: 1.25rem 1.75rem
}

.accordion h6 {
    line-height: 1.5rem !important
}

.accordion-header .card .badge-success i {
    color: #57B4BF
}

.accordion-header .card .badge-danger i {
    color: #dd2747 !important
}

.accordion-header .card .badge-secondary i {
    color: #ff8700 !important
}

.accordion-header .card i {
    float: none;
    margin-top: 0 !important
}

.accordion-header i {
    color: #999;
    float: right;
    margin-top: .325rem
}

.accordion-header a>i {
    color: #f7f8f9
}

.accordion-header a {
    color: #535353 !important
}

.accordion-header a {
    margin-top: -.2rem !important
}

.input-group-append a {
    color: #999 !important
}

.accordion-header a:hover {
    color: #0F6C84 !important
}

.toggle-accordion>i.fa-chevron-down,
.toggle-accordion>i.fa-chevron-right {
    color: #999;
    float: right;
    padding: .75rem;
    background-color: #f1f2f3;
    border-radius: 10px;
    margin-top: -.5rem !important
}

.input-group-append a:hover {
    color: #0F6C84 !important
}

.file-upload {
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.file-upload-icon {
    font-size: 18px;
    margin-right: 10px;
    color: #067b98
}

.file-upload-text {
    display: inline-block;
    font-size: .9rem;
    font-family: roboto;
    color: #535353
}

.file-upload-left {
    max-width: 70%
}

.accordion-body {
    padding: .625rem 1.75rem 1.75rem 1.75rem;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

#loginModal .modal-content {
    width: 400px;
    margin: 0 auto;
    padding: 50px 30px;
    border: none !important;
    background: #efeff0
}

.alert {
    padding: 1.5rem;
    border-radius: 10px !important
}

.modal-content .alert {
    font-size: .8rem;
    padding: .5rem 1.25rem;
    border-radius: 2px;
    margin-top: .5rem
}

.modal-content.theme-dark .alert {
    background-color: #212121;
    color: #f7f8f9;
    border: 1px solid #212121
}

.alert.alert-with-icon {
    padding-left: 2.625rem;
    position: relative
}

.alert.alert-with-icon>i {
    position: absolute;
    left: 1.25rem;
    top: .7rem
}

.alert.alert-danger.alert-centrum.alert-with-icon>i {
    color: #dd2747
}

.modal-content.theme-dark {
    background: #333 !important;
    color: #fff !important
}

.modal-content.theme-dark .captcha-container {
    color: #fff !important
}

.modal-content.theme-dark .modal-title {
    color: #fff !important
}

.modal-content.theme-dark .form-control {
    background: #121212 !important;
    color: #999 !important
}

.modal-content.theme-dark .input-with-arrow>i {
    color: #333 !important
}

#forwardModal .modal-content {
    width: 80%;
    padding: 0;
    margin: 5vw auto;
    border: none !important;
    background: #fefefe
}

.modal-edit .modal-dialog {
    max-width: 90% !important
}

.modal-edit#editEduModal .modal-dialog {
    margin-top: 0 !important
}

.modal-edit#editLangModal .modal-content {
    margin: 8vw auto !important
}

.modal-edit .modal-content {
    width: 100%;
    padding: 0 !important;
    margin: 2vw auto !important;
    border: none !important;
    background: #fefefe
}

.modal-edit .modal-title {
    text-align: left !important;
    font-size: 1.2rem;
    color: #484848 !important
}

.modal-edit .modal-header {
    padding: 2rem 3rem 1.5rem 3rem
}

.modal-edit .form-row {
    padding: 10px 3rem
}

.modal-edit .card-footer {
    padding: 1.5rem 3rem 2rem 3rem
}

.modal-header .close {
    padding: 0 !important;
    font-size: 2.25rem;
    color: #999
}

.modal-header {
    padding-top: 0;
    padding-bottom: 24px
}

.modal-footer {
    padding-top: 0;
    padding-bottom: 0
}

#loginModal .modal-content .btn {
    padding: 12px 30px !important;
    border-radius: 2px;
    font-size: 14px !important;
    background: #0F6C84
}

#forwardModal .modal-content .btn:hover,
#loginModal .modal-content .btn:hover {
    background: #57B4BF
}

.captcha-container {
    text-align: left;
    font-size: 33px;
    font-family: Roboto;
    font-weight: 700;
    margin: 0;
    line-height: 1em;
    color: #666;
    padding: 0
}

ul.navbar-nav>.nav-item {
    margin-left: 5px;
    margin-right: 5px
}

.nav-item {
    margin-right: 45px;
    font-size: .75rem;
    text-transform: uppercase;
    font-family: MontserratLight !important
}

.nav-tabs {
    border: none !important;
    padding: 0 2.5rem;
    margin-bottom: .01237rem !important;
    margin-top: 2rem
}

.nav-tabs.nav-card .nav-item .nav-link.active:hover,
.nav-tabs.nav-card .nav-item .nav-link:hover {
    background-color: #008c7d !important
}

.nav-tabs.nav-card .nav-item .nav-link.active,
.nav-tabs.nav-card .nav-item .nav-link.active:hover,
.nav-tabs.nav-card .nav-item .nav-link:hover {
    background-color: #007b6c;
    color: #fff !important;
    font-weight: 700;
    border-bottom: none !important;
    border-radius: 0 !important
}

.nav-tabs .nav-item .nav-link.active,
.nav-tabs.nav-card .nav-item .nav-link {
    background-color: transparent;
    color: #535353;
    border-bottom: none !important
}

.nav-tabs.nav-card .nav-item .nav-link {
    padding: 16px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: 0 !important
}

.nav-tabs.nav-card {
    padding: 0;
    margin-top: 0
}

.nav-tabs.nav-flat {
    padding: 0 2.5rem;
    margin-top: 0
}

.nav-tabs.nav-flat .nav-item {
    text-transform: capitalize;
    font-size: .9rem
}

.nav-tabs.nav-flat .nav-item .nav-link {
    padding: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

.nav-tabs .nav-item .nav-link.active,
.nav-tabs.nav-flat .nav-item .nav-link {
    background-color: transparent;
    color: #535353;
    border-bottom: 4px solid transparent !important
}

.nav-tabs.nav-flat .nav-item .nav-link {
    margin-top: 4px
}

.nav-tabs.nav-flat .nav-item .nav-link.active,
.nav-tabs.nav-flat .nav-item .nav-link.active:hover,
.nav-tabs.nav-flat .nav-item .nav-link:hover {
    background-color: transparent;
    color: #0F6C84 !important;
    font-weight: 700;
    border-bottom: 4px solid #0F6C84 !important
}

.nav-tabs.nav-flat .nav-item .nav-link.active .badge.badge-outline.badge-secondary,
.nav-tabs.nav-flat .nav-item .nav-link.active:hover .badge.badge-outline.badge-secondary,
.nav-tabs.nav-flat .nav-item .nav-link:hover .badge.badge-outline.badge-secondary {
    background-color: #ff8700 !important;
    color: #fff !important
}

.nav-tabs+.card-body-content,
.tab-content>.card-body-content {
    box-shadow: 0 -3px 6px 1px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 -3px 6px 1px rgba(0, 0, 0, .1)
}

.nav-tabs.nav-flat+.card-body-content,
.tab-content>.card-body-content {
    box-shadow: none !important;
    -webkit-box-shadow: none !important
}

.card-template {
    display: flex;
    flex-direction: row;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
    border-radius: 5px;
    overflow: hidden;
    margin-right: 20px
}

.card-template-left {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: #57B4BF;
    background: linear-gradient(to top, #57B4BF, #0F6C84);
    background: -webkit-linear-gradient(to top, #57B4BF, #0F6C84);
    padding: 10px
}

.card-template-left i {
    font-size: 30px;
    color: #fff
}

.card-template-right {
    flex: 4;
    padding: 20px;
    background-color: #fff;
    font-family: Roboto !important;
    font-size: 14px;
    color: #666
}

.nav-tabs .nav-item {
    margin-right: 0;
    margin-bottom: 0
}

.nav-tabs .nav-item .nav-link {
    margin-right: 5px;
    margin-bottom: 0;
    background-color: #f1f2f3;
    color: #535353 !important;
    padding: 16px 24px;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    border: none !important;
    font-size: .95em;
    font-weight: 600
}

.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-item .nav-link:hover {
    background-color: #0F6C84;
    color: #fff !important;
    border: none !important
}

.nav-tabs .nav-item .nav-link.active:hover {
    color: #fff !important
}

.navbar-nav.navbar-secondary {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%
}

.navbar-secondary .nav-item {
    padding: 0;
    border-radius: 3px
}

.navbar-secondary .nav-item>a {
    padding: 12px 20px
}

.navbar-secondary .nav-item:hover>a,
.navbar-secondary .nav-item>a:hover {
    color: #eee !important
}

.navbar.transparent {
    padding-top: 40px;
    padding-bottom: 40px
}

.nav-item:last-child {
    margin-right: 0
}

.breadcrumb a:hover,
.nav-item:hover>a,
.nav-item>a:hover {
    text-decoration: none !important;
    color: #57B4BF !important
}

.nav-item.active>a,
.nav-item>a.active,
.navbar-secondary .nav-item:hover>a,
.navbar-secondary .nav-item>a:hover {
    background: rgba(0, 0, 0, .3)
}

a.navbar-brand:hover {
    background-color: transparent !important
}

.navbar-brand img {
    height: 30px
}

.wizard {
    display: flex;
    background: #fcfdff;
    flex-direction: row;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
    overflow: hidden;
    margin-bottom: 30px
}

.step-number {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -15px;
    margin-top: -15px;
    top: 50%;
    background-color: #57B4BF;
    color: #fff;
    border-radius: 100%
}

.wizard-step {
    padding: 15px 2.75rem 15px 3.25rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    font-family: montserrat
}

.wizard-step.active {
    background-color: #0d764c
}

.wizard-step-number {
    height: 24px;
    width: 24px;
    background-color: #0d764c;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 15px;
    font-size: .8rem
}

.wizard-step-text {
    padding: 0;
    font-size: .9rem;
    color: #535353
}

.wizard-step-chevron {
    background-color: #fcfdff;
    width: 48px;
    height: 48px;
    border-right: 2px solid rgba(0, 0, 0, .075);
    border-bottom: 2px solid rgba(0, 0, 0, .075);
    transform: rotate(-45deg);
    position: absolute;
    right: -20px;
    z-index: 999
}

.wizard-step.active .wizard-step-number {
    color: #0d764c;
    background-color: #fff
}

.wizard-step.active .wizard-step-text {
    color: #fff;
    background-color: transparent
}

.wizard-step:last-child .wizard-step-chevron {
    display: none
}

.wizard-step.active .wizard-step-chevron {
    background-color: #0d764c
}

.btn.btn-switcher {
    color: #0F6C84 !important;
    background: 0 0 !important;
    border: 2px solid #0F6C84 !important;
    padding-top: 8px;
    padding-bottom: 8px
}

.btn.btn-switcher:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.btn.btn-switcher:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important
}

.bg-dark .btn.btn-switcher {
    color: #fff !important;
    border: 2px solid #f7f8f9 !important
}

.btn.btn-switcher.active,
.btn.btn-switcher:hover {
    color: #fff !important;
    background: #0F6C84 !important;
    border: 2px solid #0F6C84 !important
}

.bg-dark .btn.btn-switcher.active,
.bg-dark .btn.btn-switcher:hover {
    color: #232323 !important;
    background: #f7f8f9 !important;
    border: 2px solid #f7f8f9 !important
}

.uppercase {
    text-transform: uppercase
}

nav.navbar {
    font-family: Montserrat;
    font-weight: 300 !important;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1)
}

nav.bg-light {
    background: #fff !important
}

nav.bg-dark.bg-helpdesk {
    background: #06405c !important
}

nav.bg-dark {
    background: #232323 !important
}

nav .breadcrumb .breadcrumb-item a {
    color: #535353 !important;
    font-weight: 500
}

nav .breadcrumb .breadcrumb-item a:hover {
    color: #0F6C84 !important;
    font-weight: 600
}

nav li>a {
    color: #0F6C84 !important;
    font-weight: 600;
    padding: 10px;
    border-radius: 5px !important
}

.card nav a:hover {
    background-color: transparent
}

nav.navbar-user .navbar-nav li.nav-item.active>a,
nav.navbar-user .navbar-nav li.nav-item:hover>a,
nav.navbar-user .navbar-nav li.nav-item>a.active,
nav.navbar-user .navbar-nav li.nav-item>a:hover {
    background-color: #0F6C84 !important;
    color: #fff !important
}

nav.bg-dark a {
    color: #f7f8f9 !important
}

nav.bg-dark a:hover {
    color: #fff !important
}

nav a.btn.btn-primary {
    color: #fff !important;
    background: #0F6C84;
    background-color: #0F6C84;
    border: none !important;
    border-radius: 2px;
    padding: 10px 30px;
    text-transform: uppercase
}

.narrow-h-padding {
    padding-left: 15px !important;
    padding-right: 15px !important
}

.btn-block {
    width: 100%
}

.btn-lg {
    padding: 15px;
    font-size: 14px !important
}

.btn.btn-primary.gradient {
    background: #57B4BF;
    background: linear-gradient(to top, #57B4BF, #0F6C84);
    background: -webkit-linear-gradient(to top, #57B4BF, #0F6C84)
}

.bg-primary.gradient {
    background: #57B4BF;
    background: linear-gradient(to top, #57B4BF, #0F6C84);
    background: -webkit-linear-gradient(to top, #57B4BF, #0F6C84)
}

.bg-success.gradient {
    background: #39b28b !important;
    background: linear-gradient(to top, #399680, #39b28b) !important;
    background: -webkit-linear-gradient(to top, #399680, #39b28b) !important
}

.bg-danger.gradient {
    background: #dd2747 !important;
    background: linear-gradient(to top, #990447, #dd2747) !important;
    background: -webkit-linear-gradient(to top, #990447, #dd2747) !important
}

.bg-disabled {
    background: #666 !important;
    background: linear-gradient(to top, #666, #999) !important;
    background: -webkit-linear-gradient(to top, #666, #999) !important
}

.dropdown-account {
    width: 250px;
    margin-top: 10px;
    border: none;
    box-shadow: 0 0 9px 3px rgba(0, 0, 0, .1);
    padding: 0;
    border-radius: 3px
}

.dropdown-divider {
    margin: 0 !important
}

.dropdown-menu {
    background-color: #fff !important;
    margin-top: .5rem
}

.alert.alert-centrum .badge.badge-outline {
    border: 1px solid #fff !important;
    color: #fff !important;
    margin: 5px 3px
}

.dropdown-list-item,
.more-option li.dropdown-list-item {
    padding: 0 !important
}

.dropdown-list-item a,
.more-option li.dropdown-list-item a {
    padding: 10px 20px !important;
    font-size: .8rem !important;
    display: block !important
}

.bg-dark.dropdown-menu {
    background-color: #333 !important;
    margin-top: .5rem
}

.bg-dark.dropdown-menu .dropdown-item {
    color: #fff !important;
    padding: 10px 12px;
    font-size: .8rem !important
}

.bg-dark.dropdown-menu .dropdown-divider {
    border-color: #484848 !important
}

.bg-dark.dropdown-menu .dropdown-item:hover {
    color: #fff !important;
    background-color: #57B4BF !important;
    border-radius: 0 !important
}

.bg-dark.bg-helpdesk .dropdown-account {
    background-color: #06405c !important
}

.bg-dark .dropdown-account {
    background-color: #242424 !important;
    color: #fff !important
}

.bg-dark .dropdown-account .account-info {
    color: #f7f8f9 !important
}

.dropdown-account .account-info {
    padding: 24px 30px;
    text-align: center;
    text-transform: capitalize;
    font-family: roboto;
    border-radius: 3px 3px 0 0;
    font-size: 1rem;
    color: #535353;
    background-color: #333 !important
}

.account-info .account-info-username {
    font-size: 1.2rem;
    font-weight: 700
}

.header-account {
    padding: 1.75rem;
    background-color: rgba(87, 0, 159, .175);
    background-color: rgba(0, 0, 0, .175);
    font-family: montserrat;
    font-size: 1.4rem;
    color: #fff !important;
    width: 55vw;
    border-radius: 15px 15px 0 0;
    margin: 1rem auto -80px auto
}

.header-account span.badge {
    color: #fff !important;
    border: 2px solid #fff !important;
    text-transform: initial !important;
    font-family: roboto !important;
    font-size: .8rem;
    margin-left: .5rem;
    width: auto;
    margin: 1rem auto .5rem auto !important
}

.bg-dark .dropdown-menu.dropdown-account li:last-child,
.bg-dark.bg-helpdesk .dropdown-menu.dropdown-account li:last-child,
.bg-dark.bg-helpdesk.dropdown-menu.dropdown-account li:last-child,
.bg-dark.dropdown-menu.dropdown-account li:last-child {
    border-bottom: none !important
}

.bg-dark.dropdown-menu.dropdown-account li:first-child {
    border-radius: 3px 3px 0 0 !important
}

.bg-dark.dropdown-menu.dropdown-account li:last-child {
    border-radius: 0 0 3px 3px !important;
    border-bottom: none !important
}

.bg-dark.dropdown-menu.dropdown-account li {
    border-radius: 0 !important;
    border-bottom: 1px solid #999
}

.bg-dark.dropdown-menu.dropdown-account li:first-child>a {
    border-radius: 3px 3px 0 0 !important
}

.bg-dark.dropdown-menu.dropdown-account li:last-child>a {
    border-radius: 0 0 3px 3px !important
}

.bg-dark.dropdown-menu.dropdown-account li>a {
    border-radius: 0 !important
}

.bg-dark.bg-helpdesk .dropdown-menu.dropdown-account li,
.bg-dark.bg-helpdesk.dropdown-menu.dropdown-account li {
    border-bottom: 1px solid #00556f !important;
    color: #f7f8f9 !important
}

.bg-dark .dropdown-menu.dropdown-account li,
.bg-dark.dropdown-menu.dropdown-account li {
    border-bottom: 1px solid #444 !important;
    color: #f7f8f9 !important
}

.bg-dark .dropdown-menu.dropdown-account li>a,
.bg-dark .dropdown-menu.dropdown-account li>a i,
.bg-dark.dropdown-menu.dropdown-account li>a,
.bg-dark.dropdown-menu.dropdown-account li>a i {
    color: #f7f8f9 !important
}

.bg-dark .dropdown-menu.dropdown-account li>a:hover,
.bg-dark .dropdown-menu.dropdown-account li>a:hover i,
.bg-dark.dropdown-menu.dropdown-account li>a:hover,
.bg-dark.dropdown-menu.dropdown-account li>a:hover i {
    color: #fff !important
}

.btn {
    font-family: montserrat !important
}

.btn-primary {
    background-color: #0F6C84
}

.btn-primary:hover {
    background-color: #48af7f !important
}

.btn-primary.gradient {
    background: linear-gradient(to bottom, #57B4BF, #0F6C84) !important;
    background: -webkit-linear-gradient(to bottom, #57B4BF, #0F6C84) !important;
    border: none !important;
    border-radius: 3px
}

.btn-primary.gradient:hover {
    background: linear-gradient(to bottom, #48af7f, #00695e) !important;
    background: -webkit-linear-gradient(to bottom, #48af7f, #00695e) !important;
    border: none !important;
    border-radius: 3px
}

.btn-warning {
    background: linear-gradient(to bottom, #42c699, #008c7d) !important;
    background: -webkit-linear-gradient(to bottom, #42c699, #008c7d) !important;
    border: none !important;
    border-radius: 3px
}

.btn-warning:hover {
    background: linear-gradient(to top, #42c699, #008c7d) !important;
    background: -webkit-linear-gradient(to top, #42c699, #008c7d) !important
}

.btn-remove {
    font-size: 1rem !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important
}

.btn-primary:hover,
nav li>a.btn.btn-primary:hover {
    background: #00695e
}

nav.transparent li>a {
    color: #fff !important
}

header.masthead {
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 0;
    padding-bottom: 8rem;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 30%
}

header.masthead.home {
    background: url(../img/illustration.png) no-repeat center center
}

header.masthead .overlay {
    position: absolute;
    background-color: #212529;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: .3
}

.transparent.text-center {
    background-color: transparent;
    text-align: center !important
}

.card.card-stat {
    transition: all 1s ease;
    border-radius: 10px !important;
    background: #fff;
    margin-bottom: 0;
    margin-top: 1rem
}

.card.card-stat:hover {
    background: linear-gradient(to top, #0F6C84, #57B4BF);
    background: -webkit-linear-gradient(to top, #0F6C84, #57B4BF)
}

.card.card-stat:hover .right-card h2,
.card.card-stat:hover .right-card p {
    color: #fff !important
}

.card-stat .left-card {
    border-radius: 5px 0 0 5px;
    background: linear-gradient(to top, #0F6C84, #57B4BF);
    background: -webkit-linear-gradient(to top, #0F6C84, #57B4BF)
}

.card-stat .left-card img {
    height: 68px;
    display: block;
    text-align: center;
    margin: 2.5rem auto
}

.card-stat .right-card p {
    min-height: 3rem;
    font-size: 1.1rem;
    color: #535353;
    font-weight: 500
}

.card-stat .right-card {
    padding: 1.5rem 2rem 1rem 1rem;
    text-align: right
}

.card.card-small-round {
    border-radius: 10px !important;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, .1) !important;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, .1) !important
}

.card.card-news.large {
    height: 318px
}

.card.card-news.medium {
    height: 200px
}

.card.card-news {
    height: 150px;
    background: url(../img/bg/news-bg.png) center center/cover no-repeat;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start
}

.card.card-video {
    height: 200px;
    background: url(../img/bg/news-bg.png) center center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center
}

.card.card-video.large {
    height: 400px
}

.card.card-news.large .card-title {
    font-size: 1.25rem !important;
    padding: 5rem 1.5rem 1.5rem 1.5rem
}

.card.card-news .card-title {
    margin-bottom: 0;
    padding: 4rem 1rem 1rem 1rem;
    font-size: 1rem;
    width: 100%;
    color: #fff;
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(to top, #000, rgba(0, 0, 0, 0))
}

.card.card-news+.card-title,
.card.card-video+.card-title {
    font-size: 1.25rem !important;
    color: #535353 !important;
    font-weight: 600
}

.card.card-category {
    border-radius: 10px !important;
    position: relative
}

.card.card-category .step-number {
    left: 20px !important
}

.card.card-category.without-step p {
    padding-left: 0 !important
}

.card.card-category p {
    font-size: 1rem;
    font-weight: 500;
    padding-left: 32px;
    margin-top: .5rem !important;
    margin-bottom: .5rem !important
}

.card.card-category.active,
.card.card-category:hover {
    background: #0073d6 !important;
    background: linear-gradient(to top, #0073d6, #0099d6) !important;
    background: -webkit-linear-gradient(to top, #0073d6, #0099d6) !important
}

.card.card-category.active .step-number,
.card.card-category:hover .step-number {
    color: #57B4BF;
    background: #fff
}

.card.card-category.active p,
.card.card-category:hover p {
    color: #fff;
    font-weight: 600
}

.content-table {
    padding: 0
}

.content-table li {
    list-style-type: none !important;
    position: relative
}

.content-table li>a+i {
    color: #999;
    padding-right: 1rem;
    position: absolute;
    right: .5rem;
    top: 30px;
    margin-top: -6px
}

.content-table ul {
    padding: 0 !important
}

.content-table ul li>a {
    padding-left: 3rem !important
}

.content-table ul li ul li>a {
    padding-left: 4.5rem !important
}

.content-table ul li ul li>a>i {
    margin-right: .5rem;
    color: #999 !important
}

.content-table li>a {
    border-bottom: 1px solid rgba(0, 0, 0, .05) !important;
    padding: 1rem 2rem !important;
    display: block;
    color: #535353 !important
}

.content-table li.active>a,
.content-table li>a:hover {
    color: #0F6C84 !important;
    font-weight: 600 !important
}

.guide {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0
}

.guide-table {
    border-right: 1px solid rgba(0, 0, 0, .05);
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
    text-transform: none;
    font-family: Roboto;
    font-size: .85rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%
}

.guide-table li.active>a,
.guide-table li.active>a i,
.guide-table li:hover>a,
.guide-table li:hover>a i {
    color: #464995 !important
}

.guide-table .menu-dropdown {
    display: none
}

.guide-table li.active>.menu-dropdown {
    display: block
}

.guide-content {
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%;
    text-transform: none;
    font-family: Roboto;
    font-size: .85rem;
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%
}

.guide-content p {
    font-size: .9rem !important
}

.guide-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    bottom: 0 !important
}

.guide-nav .next,
.guide-nav .prev {
    font-size: 1rem;
    font-weight: 600;
    color: #535353 !important
}

.guide-nav .next:hover,
.guide-nav .next:hover i,
.guide-nav .prev:hover,
.guide-nav .prev:hover i {
    color: #0F6C84 !important
}

.guide-nav .next i,
.guide-nav .prev i {
    font-size: 1.2rem !important;
    color: #999
}

.guide-nav .prev i {
    padding-right: .5rem
}

.guide-nav .next i {
    padding-left: .5rem
}

.card.card-guide {
    background: #f7f8f9 !important;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .075);
    -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, .075);
    border-radius: 15px !important
}

.card.card-guide .card-guide-icon {
    font-size: 64px;
    margin-bottom: 2rem;
    color: #0F6C84 !important
}

.card.card-guide.secondary:hover {
    background: #0073d6 !important;
    background: linear-gradient(to top, #0073d6, #0099d6) !important;
    background: -webkit-linear-gradient(to top, #0073d6, #0099d6) !important
}

.card.card-guide:hover {
    background: linear-gradient(to top, #0F6C84, #57B4BF) !important;
    background: -webkit-linear-gradient(to top, #0F6C84, #57B4BF) !important
}

.card.card-guide:hover .card-guide-icon {
    color: #eee !important
}

.card.card-guide:hover .card-guide-title {
    color: #fff !important
}

.card.card-guide:hover .card-guide-content {
    color: #f7f8f9 !important
}

.card.card-user-guide img {
    width: 8vw;
    height: 10vw;
    display: block;
    object-fit: contain;
    margin: auto
}

.card.card-user-guide p {
    font-weight: 600;
    color: #535353
}

.card {
    box-shadow: 0 0 9px 3px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 9px 3px rgba(0, 0, 0, .1);
    border: none !important;
    border-radius: 15px !important;
    position: relative;
    margin-bottom: 2rem;
    overflow: hidden
}

.card-title {
    font-size: 1.125rem !important;
    margin-bottom: .25rem;
    line-height: 1.5
}

.card-title>a {
    color: #535353 !important
}

.card-feature-left {
    background: linear-gradient(to top, #0F6C84, #57B4BF) !important;
    background: -webkit-linear-gradient(to top, #0F6C84, #57B4BF) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex: 0 0 12%;
    flex: 0 0 12%;
    max-width: 12%
}

.card-feature-icon {
    color: #eee;
    font-size: 1.75rem;
    display: block;
    text-align: center
}

.card-feature-content {
    padding-left: 1rem !important;
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
    -ms-flex: 0 0 62%;
    flex: 0 0 62%;
    max-width: 62%
}

.card-feature-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: .75rem !important;
    padding-right: 1.25rem !important;
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
    -ms-flex: 0 0 26%;
    flex: 0 0 26%;
    max-width: 26%
}

a.card:hover p {
    color: #0F6C84
}

a.card .row {
    margin: 0 !important
}

.card-spse {
    -webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, .1);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, .1);
    border-radius: 10px;
    padding: 2rem 3rem !important;
    border: none !important;
    background: #fff !important;
    color: #535353 !important;
    font-family: roboto;
    vertical-align: middle !important;
    margin-bottom: 1.5rem
}

.card-spse-title {
    font-weight: 600;
    font-size: 1.1rem !important;
    margin-bottom: .75rem
}

.card-spse-institution {
    font-weight: 500;
    color: #484848
}

.card-spse-institution i {
    color: #666 !important
}

.card-spse-time {
    color: #666 !important;
    font-size: .9rem;
    margin-bottom: 1.5rem;
    display: inline
}

.card-spse-content {
    margin-bottom: 0 !important;
    margin-top: 1.2rem
}

.card-spse-time i {
    color: #999 !important
}

.text-white .item-content,
.text-white .item-icon,
.text-white .item-icon-label {
    color: #fff
}

.schedule-item {
    justify-content: flex-start;
    padding-top: 0;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    padding: .5rem 1.5rem;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem
}

.item-container.inline {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center
}

.item {
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.alert .item .item-title {
    color: #eee
}

.item.small .item-title {
    font-size: .6rem !important;
    font-weight: 400 !important;
    color: #999
}

.item.small .item-content-container {
    padding-left: 5px !important
}

.item.small .item-content {
    font-size: .625rem !important
}

.alert .item .item-icon {
    color: #ddd
}

.item.small .item-icon {
    font-size: 1rem !important
}

.item-icon-label {
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    line-height: 1.5;
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

.item-icon {
    font-size: 18px;
    color: #999
}

.item-content-container.full-width {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%
}

.item-content-container {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 12px
}

.item-content.inline,
.item-title.inline {
    display: inline !important
}

.item-title {
    line-height: 1.5;
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 0;
    padding-top: calc(.375rem + 1px);
    margin-bottom: 0;
    font-family: Montserrat;
    color: #535353;
    font-size: .7rem !important;
    text-transform: uppercase
}

.item-content {
    margin: 0 !important;
    font-size: .8rem !important;
    font-family: Roboto;
    color: #535353
}

.card-form {
    padding: 20px 24px !important;
    border-right: 15px solid #399680 !important;
    position: relative;
    overflow: hidden;
    background-color: #fafbfc;
    border-radius: 5px !important
}

.card-form-checklist {
    border-bottom-right-radius: 100%;
    width: 40px;
    height: 40px;
    background-color: #399680;
    left: 0;
    top: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 5px;
    padding-bottom: 5px
}

.label-large.black {
    color: #535353 !important;
    margin-bottom: 1rem
}

.label-large {
    color: #007490;
    font-size: .9rem !important;
    padding-bottom: 0;
    line-height: 1rem !important
}

.form-group.form-group-narrow .col-form-label {
    line-height: 1 !important
}

.form-group.form-group-narrow p.form-row-content {
    margin: 0 !important
}

.form-group p.form-row-content {
    margin: 0 !important
}

.form-row .form-group {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.card-form .form-group label {
    line-height: 1rem !important;
    padding: 0
}

.card-form .form-group p {
    margin-bottom: 0;
    margin-top: 0 !important
}

.query-input:focus {
    border-color: #55aa78 !important;
    box-shadow: 0 0 0 .1rem rgba(85, 170, 120, .5) !important;
    -webkit-box-shadow: 0 0 0 .1rem rgba(85, 170, 120, .5) !important
}

.query-input {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em
}

textarea.query-input {
    height: auto !important;
    border: 1px solid #55aa78
}

.form-control.input-sm,
.form-control.input-sm+.select2.select2-container .select2-selection {
    padding: 8px 12px !important;
    font-size: .8rem !important
}

.select2-container--default .select2-selection--single {
    border-radius: 5px !important
}

.select2-container--open .select2-dropdown--below {
    border-radius: 7px !important;
    overflow: hidden
}

.form-group .input-sm+.select2.select2-container .select2-selection span {
    font-size: .8rem !important;
    padding-left: 0 !important
}

.form-group span {
    font-size: 14px
}

.card-form .dropdown-menu.dropdown-account,
.dropdown-menu.dropdown-account {
    right: 0;
    left: auto
}

.dropdown-menu.dropdown-account li {
    padding: 0;
    border-bottom: 1px solid #eee;
    margin: 0
}

.dropdown-menu.dropdown-account li:hover {
    border-left: 5px solid #0F6C84
}

.dropdown-menu.dropdown-account li:last-child:hover {
    border-bottom-left-radius: 3px !important
}

.dropdown-menu.dropdown-account li:hover>a {
    color: #0F6C84 !important;
    font-weight: 500
}

.dropdown-menu.dropdown-account li a {
    display: block;
    padding: 20px 30px !important;
    color: #666 !important;
    text-transform: capitalize;
    font-family: roboto;
    font-weight: 500;
    font-size: .9rem
}

.dropdown-menu.dropdown-account li i {
    font-size: 1.25em;
    margin-right: 10px;
    color: #999 !important
}

.dropdown-menu.dropdown-account li:last-child {
    border-bottom: none
}

.card.content {
    margin-bottom: 3vw;
    background: #fff;
    margin-top: -12vw;
    display: block;
    width: 100%;
    overflow: hidden
}

.card.content.admin {
    margin-top: -28vw
}

.profil-penyedia .form-row {
    padding-left: 2rem;
    padding-right: 2rem
}

.profil-penyedia .card-header {
    padding: 1.5rem 2rem
}

.card-header {
    border: none !important;
    background: #f6f6f8;
    padding: 1.5rem 1.75rem;
    border-radius: 15px 15px 0 0 !important
}

.card-body {
    padding: 2rem 0;
    overflow: hidden
}

.card-body.p30 {
    padding: 30px
}

.card-body-content {
    padding: 1.75rem 0
}

.card-body-content>.row {
    padding: 0 1.25rem
}

.card .col-md-12>.alert {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.card .alert {
    margin-left: 1.75rem;
    margin-right: 1.75rem
}

.alert {
    font-size: .8rem !important
}

.alert-primary {
    color: #0F6C84;
    background-color: #00695e !important;
    border-color: #00695e !important
}

.alert-rounded {
    border-radius: 5px !important
}

.alert .alert-heading {
    font-family: montserrat;
    color: #f1f2f3
}

.alert.alert-primary.alert-centrum {
    background: #007490;
    border: none !important;
    border-radius: 3px
}

.alert.alert-danger.alert-centrum,
.alert.alert-success.alert-centrum {
    background-color: #39b28b;
    border: none !important;
    border-radius: 3px;
    color: #fff !important
}

.alert.alert-info.alert-centrum {
    background-color: #179d94 !important
}

.alert.alert-primary.alert-centrum.alert-outline,
.alert.alert-primary.alert-centrum.alert-outline .alert-heading,
.alert.alert-primary.alert-centrum.alert-outline .alert-heading i,
.alert.alert-primary.alert-centrum.alert-outline ol li,
.alert.alert-primary.alert-centrum.alert-outline p {
    color: #2b727c !important
}

.alert.alert-primary.alert-centrum.alert-outline {
    border: 2px solid #2b727c !important;
    background-color: #eefffa !important;
    padding: 1.5rem 1.25rem .5rem 1.25rem
}

.alert.alert-success.alert-centrum {
    background-color: #39b28b
}

.alert.alert-danger.alert-centrum {
    background-color: #e0005b
}

.alert-danger li {
    color: #721c24 !important;
    font-size: .8rem !important
}

.alert ol,
.alert ul {
    color: #fff;
    padding-left: 15px;
    font-family: Roboto;
    font-size: .9rem
}

.alert li,
.alert p {
    font-size: .9rem;
    color: #fff
}

.card-footer {
    padding: 1.75rem 1.5rem;
    background: 0 0
}

.btn {
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important
}

.btn-light {
    color: #484848 !important;
    background: #cdcdcd !important
}

.bg-dark .btn.btn-outline-primary {
    color: #f7f8f9 !important;
    border: 2px solid #f7f8f9 !important
}

.btn.btn-outline-primary {
    color: #0F6C84 !important;
    border: 2px solid #0F6C84 !important
}

.bg-dark .btn.btn-outline-primary:hover {
    color: #232323 !important;
    background-color: #f7f8f9 !important
}

.btn.btn-outline-primary:hover {
    background: #0F6C84 !important;
    color: #fff !important
}

.btn.btn-icon-only i {
    margin-right: 0
}

.btn i {
    margin-right: 10px
}

.btn.icon-right i {
    margin-left: 10px;
    margin-right: 0 !important
}

.btn.btn-no-text {
    padding: 8px !important
}

.btn-secondary:hover {
    background: #ea8411 !important
}

.btn-danger:hover {
    background: #f55 !important
}

.btn-secondary {
    background: #ff8700 !important
}

.btn-danger {
    background: #dd2747 !important
}

.btn-danger.gradient {
    background: #dd2747 !important;
    background: linear-gradient(to top, #990447, #dd2747) !important;
    background: -webkit-linear-gradient(to top, #990447, #dd2747) !important
}

.btn.btn-no-text i {
    margin: 0 !important
}

.btn-success {
    background: #48af7f;
    background: linear-gradient(to bottom, #48af7f, #00695e) !important;
    background: -webkit-linear-gradient(to bottom, #48af7f, #00695e) !important
}

.btn-success:hover {
    background: #00695e !important;
    background: linear-gradient(to bottom, #097, #00695e) !important;
    background: -webkit-linear-gradient(to bottom, #097, #00695e) !important
}

.dataTables_wrapper>div>div {
    display: flex;
    align-items: center
}

.dataTables_wrapper>div>div:first-child {
    justify-content: flex-start
}

.dataTables_wrapper>div>div.col-md-12:last-child {
    justify-content: flex-start !important
}

.dataTables_wrapper>div>div:last-child {
    justify-content: flex-end
}

.badge.badge-outline {
    color: #535353;
    border: 1px solid #535353
}

.badge.badge-outline.badge-main {
    color: #0F6C84 !important;
    border: 1px solid #0F6C84 !important
}

.badge.badge-outline.badge-primary {
    color: #57B4BF !important;
    border: 1px solid #57B4BF !important
}

.badge.badge-outline.badge-secondary {
    color: #ff8700 !important;
    border: 1px solid #ff8700 !important
}

.badge.badge-outline.badge-success {
    color: #57B4BF !important;
    border: 1px solid #57B4BF !important
}

.badge.badge-sm {
    padding: 2px 5px !important;
    font-size: .5rem
}

.badge-right {
    margin-left: 8px
}

.badge,
a.badge {
    color: #fff !important;
    border-radius: 7px
}

a.badge:hover {
    color: #eee !important;
    background-color: #57B4BF !important
}

.badge-lg {
    padding: .5em 1em;
    font-size: .8rem !important
}

.badge-xl {
    padding: .75em 1em;
    font-size: .9rem !important
}

.badge-primary {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    background-color: #0F6C84 !important
}

.badge-secondary {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    background-color: #57B4BF !important
}

.badge-yellow {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    background-color: #ff9b31 !important
}

.badge-narrow {
    padding-left: .5rem !important;
    padding-right: .5rem !important
}

.badge-grey {
    color: #fff;
    background-color: #6c757d
}

.badge {
    border-radius: 100px !important
}

.badge-outline.GAGAL_LOGIN,
.badge-outline.badge-danger {
    color: #dd2747 !important;
    border: 1px solid #dd2747 !important
}

.badge-outline.SUKSES_LOGIN,
.badge-outline.SUKSES_LOGOUT,
.badge-outline.badge-success {
    color: #39b28b !important;
    border: 1px solid #39b28b !important
}

.badge-outline.SUKSES_LOGOUT {
    color: #404040 !important;
    border: 1px solid #404040 !important
}

.badge-outline.APPLICATION_STOP,
.badge-outline.HAPUS_ROLE,
.badge-outline.badge-failed {
    color: #999 !important;
    border: 1px solid #999 !important
}

.badge-pill {
    border: none !important;
    border-radius: 100px;
    font-size: .7rem;
    color: #fff;
    background-color: #0F6C84 !important;
    text-transform: uppercase;
    font-weight: 400
}

.badge-outline {
    color: #0F6C84 !important;
    border: 1px solid #0F6C84 !important;
    background: 0 0 !important;
    text-transform: uppercase !important;
    padding: 7px 15px;
    border-radius: 100px;
    font-size: .7rem
}

td .badge-outline {
    min-width: 112px
}

.progress-bar-danger {
    background-color: #dc3545 !important
}

.progress-bar-warning {
    background-color: #ffc107 !important
}

.progress-bar-success {
    background-color: #399680 !important
}

.log .badge-outline,
.sistem .badge-outline {
    min-width: 112px
}

td.cell-flex {
    text-align: left !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center
}

.bg-logan {
    background: linear-gradient(to bottom, #af6331, #703449);
    background: -webkit-linear-gradient(to bottom, #af6331, #703449)
}

.bg-lpse {
    background: linear-gradient(to bottom, #0093dd, #29166f);
    background: -webkit-linear-gradient(to bottom, #0093dd, #29166f)
}

.bg-sikap {
    background: linear-gradient(to bottom, #5854a5, #5737a1);
    background: -webkit-linear-gradient(to bottom, #5854a5, #5737a1)
}

.bg-jaim {
    background: linear-gradient(to bottom, #6f2c1d, #903922);
    background: -webkit-linear-gradient(to bottom, #6f2c1d, #903922)
}

.bg-eproc {
    background: linear-gradient(to bottom, #2c368f, #67c3e9);
    background: -webkit-linear-gradient(to bottom, #2c368f, #67c3e9)
}

.bg-adp {
    background: linear-gradient(to bottom, #5b5b5e, #a54425);
    background: -webkit-linear-gradient(to bottom, #5b5b5e, #a54425)
}

.bg-ecatalog {
    background: linear-gradient(to bottom, #c90000, #d5244e);
    background: -webkit-linear-gradient(to bottom, #c90000, #d5244e)
}

.bg-centrum {
    background: linear-gradient(to bottom, #0F6C84, #57B4BF);
    background: -webkit-linear-gradient(to bottom, #0F6C84, #57B4BF)
}

.bg-inaproc {
    background: linear-gradient(to bottom, #d12f47, #df7e4b);
    background: -webkit-linear-gradient(to bottom, #d12f47, #df7e4b)
}

.bg-dce {
    background: linear-gradient(to bottom, #5a3f8f, #605ca8);
    background: -webkit-linear-gradient(to bottom, #5a3f8f, #605ca8)
}

.bg-sirup {
    background: linear-gradient(to bottom, #000, #a54525);
    background: -webkit-linear-gradient(to bottom, #000, #a54525)
}

.card-footer .btn {
    text-transform: uppercase
}

.breadcrumb {
    margin-bottom: 0;
    padding: 0;
    background: 0 0
}

.breadcrumb-item {
    font-size: 1.1rem
}

nav .breadcrumb-item:first-child a {
    padding-left: 0 !important
}

.breadcrumb-item.active {
    color: #535353;
    font-weight: 600
}

.breadcrumb-item+.breadcrumb-item::before {
    font-family: FontAwesome;
    content: "\f054";
    font-size: .75rem;
    margin: 0 5px
}

[name=datatable_length] {
    height: auto !important;
    margin-left: .5em !important;
    margin-right: .5em !important
}

.dataTables_wrapper .form-control+.select2.select2-container {
    width: auto !important;
    margin: 0 10px
}

.select2-container--default .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid rgba(0, 0, 0, .1)
}

.table-container {
    margin-top: 1.5rem
}

.table {
    border: none !important
}

.table {
    border-collapse: separate !important;
    border-spacing: 0 1em !important
}

.table .mb-0 {
    margin-bottom: 0 !important
}

.table thead {
    padding: 20px;
    text-transform: uppercase;
    margin-bottom: 1rem !important
}

.table thead tr {
    box-shadow: none !important;
    -webkit-box-shadow: none !important
}

.table thead th {
    border: none !important;
    text-align: center;
    background: #f7f8f9;
    font-size: .75em;
    color: #0F6C84 !important;
    font-weight: 500;
    vertical-align: middle !important
}

.table thead th:first-child {
    text-align: left;
    border-radius: 5px 0 0 5px !important;
    padding-left: 30px !important
}

.table thead th:nth-child(2) {
    text-align: left
}

.table thead th:last-child {
    text-align: right;
    border-radius: 0 5px 5px 0 !important;
    padding-right: 30px !important
}

.table thead>tr>td.sorting:first-child,
.table thead>tr>td.sorting_asc:first-child,
.table thead>tr>td.sorting_desc:first-child,
.table thead>tr>th.sorting:first-child,
.table thead>tr>th.sorting_asc:first-child,
.table thead>tr>th.sorting_desc:first-child {
    padding-left: 30px !important
}

.table thead>tr>td.sorting:last-child,
.table thead>tr>td.sorting_asc:last-child,
.table thead>tr>td.sorting_desc:last-child,
.table thead>tr>th.sorting:last-child,
.table thead>tr>th.sorting_asc:last-child,
.table thead>tr>th.sorting_desc:last-child {
    padding-right: 30px !important
}

.table thead>tr>td.sorting,
.table thead>tr>td.sorting_asc,
.table thead>tr>td.sorting_desc,
.table thead>tr>th.sorting,
.table thead>tr>th.sorting_asc,
.table thead>tr>th.sorting_desc {
    padding-left: 10px !important;
    padding-right: 10px !important
}

.table tr {
    -webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, .1);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, .1);
    border-radius: 10px
}

.table tr.read td {
    background: #f7f8f9 !important
}

.table tr td.pt-5 {
    padding-top: 3.25rem !important
}

.table tr td {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    border: none !important;
    background: #fff !important;
    color: #535353 !important;
    font-family: roboto;
    vertical-align: middle !important;
    font-size: .8rem
}

.table tr td .form-group {
    margin-bottom: .325rem
}

.table tr td .select2 {
    text-align: left !important
}

.table tr td .select2 .select2-selection {
    padding: 10px 12px !important
}

.table tr td p {
    margin-bottom: .5rem !important;
    font-size: .875rem
}

.table tr.unread td p {
    font-weight: 700 !important
}

.table tr td label {
    margin-bottom: .3rem !important;
    font-family: montserratLight !important;
    display: block;
    font-size: 12px;
    color: #888 !important
}

.table tr td p:last-child {
    margin-bottom: 0 !important
}

.table tr td p.with-icon,
.with-icon,
p.with-icon {
    position: relative;
    padding-left: 1.5rem
}

.table tr td p i.content-icon,
.with-icon i.content-icon,
p.with-icon i.content-icon {
    position: relative !important;
    font-size: .85rem
}

.table tr td p i.icon-success,
.with-icon i.icon-success,
p.with-icon i.icon-success {
    color: #28a745 !important
}

.table tr td p i.icon-danger,
.with-icon i.icon-danger,
p.with-icon i.icon-danger {
    color: #dc3545 !important
}

.table tr td p i,
.with-icon i,
p.with-icon i {
    color: #898989 !important;
    position: absolute;
    left: 0;
    top: 10%
}

h5.with-icon {
    padding-left: 2rem
}

h5.with-icon i {
    font-size: 1.2rem
}

.contact p {
    font-size: .9rem
}

.contact .card-body>.row {
    overflow: hidden
}

.contact p.with-icon {
    padding-left: 1.75rem;
    font-size: .8rem;
    font-family: montserrat
}

.contact p.with-icon:last-child {
    margin-bottom: 0 !important
}

.contact .card-body .left-column {
    padding: 3rem 2.5rem;
    border-radius: 0 0 0 10px !important
}

.contact .card-body .right-column {
    padding: 0;
    overflow: hidden !important;
    border-radius: 0 0 10px 0;
    box-shadow: -3px 0 10px 3px rgba(0, 0, 0, .1)
}

.contact p.with-icon i {
    top: .25rem !important
}

.table tr td a.btn {
    color: #fff !important
}

.table tr td a.btn:hover {
    color: #eee !important
}

.table tr td a {
    color: #0F6C84 !important
}

.table tr td a.btn:hover {
    color: #fff !important;
    text-decoration: none !important
}

.table tr td a:hover {
    color: #0F6C84 !important;
    text-decoration: underline !important
}

.table tr td:first-child {
    border-radius: 10px 0 0 10px;
    padding-left: 30px;
    text-align: left
}

.table tr td:nth-child(2) {
    text-align: left
}

.table tr td:last-child {
    border-radius: 0 10px 10px 0;
    padding-right: 30px
}

.table .control.control--checkbox {
    margin-top: -10px !important
}

.dataTables_filter,
.dataTables_info,
.dataTables_length {
    font-size: .8rem
}

.dataTables_filter label {
    color: #363636 !important;
    font-weight: 400
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    font-size: .8rem
}

.pagination {
    justify-content: flex-end
}

.datepicker {
    padding: 1rem
}

.datepicker.datepicker-dropdown {
    z-index: 9999999
}

.datepicker td,
.datepicker th {
    padding: .1rem .2rem;
    font-size: .8rem
}

.datepicker th {
    font-family: Montserrat !important;
    color: #0F6C84
}

.datepicker thead>tr:last-child {
    margin: 1rem 0
}

.datepicker thead>tr:last-child>th:first-child {
    border-radius: 5px 0 0 5px !important
}

.datepicker thead>tr:last-child>th:last-child {
    border-radius: 0 5px 5px 0 !important
}

.datepicker thead>tr:last-child>th {
    color: #fff;
    background-color: #0F6C84;
    margin: .2rem !important;
    border-radius: 0 !important
}

.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
    background: #57B4BF !important;
    color: #fff !important
}

.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover {
    background: linear-gradient(to top, #57B4BF, #0F6C84);
    background: -webkit-linear-gradient(to top, #57B4BF, #0F6C84)
}

.table tr td a.sticky-label {
    color: #fff !important
}

.sticky-label {
    background: #0d764c;
    color: #fff;
    padding: 10px 15px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px 0 10px 0
}

.sticky-label.centered {
    background: #57B4BF;
    color: #fff;
    padding: 10px 15px;
    position: absolute;
    left: -35%;
    margin-left: 50%;
    width: 70%;
    border-radius: 0 0 10px 10px;
    text-align: center
}

.datepicker td {
    font-family: Roboto !important
}

.dataTables_filter [type=search] {
    margin-left: 1rem !important
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: -5px !important
}

.select2-container--default .select2-selection--single {
    border: 1px solid rgba(0, 0, 0, .1) !important
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    position: absolute;
    top: 1px;
    right: 10px;
    width: 20px
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.1625rem !important
}

nav .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.1rem !important
}

nav .form-control.input-sm+.select2.select2-container .select2-selection {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background-color: #f1f2f3 !important
}

.select2-dropdown {
    background-color: #f7f8f9;
    border: none !important;
    border-radius: 2px;
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .1)
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 3px !important;
    padding: 6px 15px !important;
    border: none !important;
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, .1) !important;
    -webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, .1) !important;
    font-size: .8rem !important
}

.select2-container--default .select2-results>.select2-results__options {
    font-size: .8rem
}

.select2-container--default .select2-results>.select2-results__options>.select2-results__option {
    padding: 6px 15px
}

#btnDeleteSelected,
#btnDeleteSelected2,
#btnDeleteSelected3 {
    display: none
}

.page-item.active .page-link {
    background-color: #0F6C84;
    border-color: #0F6C84
}

.list-verification {
    list-style-type: none;
    padding-left: 0
}

.list-verification li {
    padding: 3px 0
}

.list-verification li i {
    color: #898989 !important;
    margin-right: 5px
}

.alert .alert-heading {
    font-size: 1rem;
    padding-left: 24px;
    position: relative;
    margin-bottom: .75rem
}

.light-grey {
    color: #ccc !important
}

.bold {
    font-weight: 600;
    font-family: montserrat
}

.alert .alert-heading i {
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 0
}

.alert {
    position: relative;
    background-image: url(../img/bg-alert.png) !important;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: contain
}

.alert.alert-danger.alert-centrum,
.alert.alert-primary.alert-centrum,
.alert.alert-success.alert-centrum {
    padding: 1.5rem 30% .5rem 1.25rem;
    color: #fff !important;
    overflow: hidden
}

.alert.alert-primary.alert-centrum.alert-flex {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.alert-flex>div {
    text-align: left
}

.alert-flex>div:first-child {
    text-align: left
}

.alert-flex>div:last-child {
    text-align: right
}

.alert ol,
.alert ul {
    margin-bottom: 0 !important
}

.alert.alert-danger.alert-centrum ol,
.alert.alert-danger.alert-centrum p,
.alert.alert-danger.alert-centrum ul,
.alert.alert-primary.alert-centrum ol,
.alert.alert-primary.alert-centrum p,
.alert.alert-primary.alert-centrum ul,
.alert.alert-success.alert-centrum ol,
.alert.alert-success.alert-centrum p,
.alert.alert-success.alert-centrum ul {
    color: #fff;
    font-family: Roboto;
    font-size: 14px
}

.alert .alert-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30%;
    height: 100%;
    object-fit: cover;
    object-position: left
}

header.masthead h1 {
    font-size: 2rem
}

.transparent {
    background: 0 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important
}

.verification-header {
    font-weight: 700 !important;
    background-color: transparent !important;
    border-bottom: 1px solid #ddd !important
}

form .col-form-label {
    line-height: 2.75
}

label.col-form-label {
    line-height: 1.5;
    display: flex !important;
    justify-content: flex-start;
    align-items: center
}

.col-form-label.light {
    color: #888;
    font-weight: 500
}

.col-form-label i {
    font-size: 18px;
    color: #999
}

.card.content.admin {
    margin-top: -16vw
}

.display-none {
    display: none
}

.img-logo-light {
    display: block;
    max-width: 300px;
    max-height: 81px;
    width: auto;
    height: auto
}

@media (min-width:768px) {
    .modal-dialog {
        max-width: 720px !important
    }

    #caritenagaahli .modal-dialog,
    #importmodal .modal-dialog {
        max-width: 70% !important
    }

    .admin.dashboard-title {
        padding-top: 30px
    }

    .dashboard-title {
        color: #fff;
        padding-top: 80px;
        font-size: 1.75rem
    }

    section.content>.container.container-fluid {
        max-width: 1200px !important;
        margin-top: 60px
    }

    section.content>.container {
        max-width: 1120px !important;
        margin-top: 60px
    }

    header.masthead {
        padding-top: 0;
        padding-bottom: 16vw
    }

    header.masthead h1 {
        font-size: 3rem
    }

    .fullwidth-input-container {
        padding-left: 1.4vw
    }
}

@media (min-width:1440px) {
    header.masthead {
        padding-bottom: 23vw
    }

    .fullwidth-input-container {
        padding-left: .925vw
    }
}

.showcase .showcase-text {
    padding: 3rem
}

.showcase .showcase-img {
    min-height: 30rem;
    background-size: cover
}

@media(min-width:992px) {
    #successModal .modal-dialog {
        max-width: 900px !important
    }
}

@media (min-width:768px) {
    .showcase .showcase-text {
        padding: 7rem
    }
}

.icon-lg {
    font-size: 1.2rem
}

.icon-success {
    color: #28a745
}

.icon-danger {
    color: #dc3545
}

.features-icons {
    padding-top: 7rem;
    padding-bottom: 7rem
}

.features-icons .features-icons-item {
    max-width: 20rem
}

.features-icons .features-icons-item .features-icons-icon {
    height: 7rem
}

.features-icons .features-icons-item .features-icons-icon i {
    font-size: 4.5rem
}

.features-icons .features-icons-item:hover .features-icons-icon i {
    font-size: 5rem
}

.testimonials {
    padding-top: 7rem;
    padding-bottom: 7rem
}

.testimonials .testimonial-item {
    max-width: 18rem
}

.testimonials .testimonial-item img {
    max-width: 12rem;
    box-shadow: 0 5px 5px 0 #adb5bd
}

.call-to-action {
    position: relative;
    background-color: #343a40;
    background: url(../img/bg-masthead.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 7rem;
    padding-bottom: 7rem
}

.call-to-action .overlay {
    position: absolute;
    background-color: #212529;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: .3
}

label {
    font-family: Montserrat;
    color: #535353;
    font-size: .7rem !important
}

.form-row {
    border-top: 1px solid rgba(0, 0, 0, .1);
    padding: 10px 1.5rem;
    margin-left: 0 !important;
    margin-right: 0 !important
}

.form-row.no-border-top,
.form-row.simple,
.no-border-top {
    border-top: none !important
}

.form-row .form-group {
    margin-bottom: 0
}

.form-group>div.pr-0.px-3 {
    display: flex;
    align-items: center
}

.full-width {
    width: 100% !important
}

.form-row-content {
    margin-top: .3rem;
    font-size: .8rem !important
}

.input-with-arrow {
    position: relative
}

.input-with-arrow>i {
    position: absolute;
    right: 1em;
    top: 1.375em;
    color: #57B4BF
}

a {
    cursor: pointer !important;
    color: #0F6C84 !important
}

a:hover {
    text-decoration: none !important;
    color: #57B4BF !important
}

textarea.form-control {
    height: auto !important
}

.rate-group {
    display: inline-block
}

.rate-group .rate {
    margin: 3px
}

.rate-group .rate.active {
    margin: 3px
}

.rate-group .rate i {
    font-size: 1rem;
    color: #999 !important
}

.rate-group .rate.active i {
    color: #ff9b31 !important
}

.rating-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.rating-group .rating.active .check {
    position: absolute;
    display: inline-block;
    color: #2e954b
}

.icon-reference-container {
    border-radius: 100%;
    background-color: #fff;
    display: inline-block;
    padding: 0 !important;
    width: 64px;
    height: 64px;
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, .05);
    -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, .05)
}

.with-bg {
    background-image: url(../img/bg-transparent.webp);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat
}

.icon-reference {
    width: 100%;
    height: 100%;
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat
}

.icon-reference-container.active,
.icon-reference-container:hover {
    background: #57B4BF;
    background: linear-gradient(to bottom, #57B4BF, #0F6C84);
    background: -webkit-linear-gradient(to bottom, #57B4BF, #0F6C84)
}

.icon-reference-container.active>i,
.icon-reference-container:hover>i {
    color: #fff !important
}

.icon-reference-container:hover .icon-sbu {
    background-image: url(../img/icons/icon_sbu_white.png) !important
}

.icon-reference-container:hover .icon-kbli {
    background-image: url(../img/icons/icon_kbli_white.png) !important
}

.icon-reference-container:hover .icon-table {
    background-image: url(../img/icons/icon_table_white.png) !important
}

.icon-reference-container:hover .icon-instruction {
    background-image: url(../img/icons/icon_instruction_white.png) !important
}

.icon-reference-container:hover .icon-instruction {
    background-image: url(../img/icons/icon_instruction_white.png) !important
}

.icon-reference-container:hover .icon-video {
    background-image: url(../img/icons/icon_video_white.png) !important
}

.icon-reference-container:hover .icon-publication {
    background-image: url(../img/icons/icon_publication_white.png) !important
}

.icon-reference img {
    width: 80%;
    margin: 0
}

.icon-reference i {
    color: #0F6C84 !important
}

.rating-group .rating .check {
    position: absolute;
    left: -8px;
    top: -5px;
    display: none
}

.rating-group .rating [name="rate[]"] {
    display: none
}

.sidebar-filter .rating-group .rating i {
    color: #999;
    margin: 0 4px
}

.rating.rating-xl i {
    font-size: 1.25rem !important;
    margin-left: .25rem
}

.rating-group.rating-sm .rating i {
    margin: 0 2px
}

.rating-group.rating-sm .rating:last-child {
    margin-right: 0 !important
}

.rating-group.rating-sm .rating {
    margin-right: 2px;
    padding: 10px !important
}

.sidebar-filter .card-body {
    padding: 1.5rem 0
}

.rating-group .rating.active i,
.rating-group .rating:hover i,
.rating.active i {
    color: #ff9b31
}

.rating-group.rating-group-small .rating i {
    margin: 0 2px
}

.rating-group .rating i {
    color: #999;
    margin: 0 4px
}

.rating-group .rating:last-child {
    margin-right: 0 !important
}

.rating-group .rating {
    margin-right: 10px;
    position: relative;
    display: inline-block;
    background-color: #fff;
    border-radius: 6px;
    padding: 13px 15px;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, .1)
}

.rating-group.rating-group-small .rating {
    padding: 8px
}

.input-group .input-group-text {
    padding: .375rem .5rem;
    font-size: .75rem !important
}

.input-group .form-control+.select2.select2-container {
    width: 72% !important;
    border-radius: 5px 0 0 5px
}

.input-group .form-control+.select2-container--default .select2-selection--single {
    border-radius: 5px 0 0 5px !important
}

.form-control+.select2.select2-container {
    width: 100% !important
}

.select-action {
    cursor: pointer
}

.select-action .control__indicator {
    border-color: #399680 !important
}

.select-action.active,
.select-action:hover {
    background-color: #399680 !important;
    color: #fff !important
}

.select-action.active p,
.select-action:hover p {
    color: #fff !important
}

.select-action.active .control__indicator,
.select-action:hover .control__indicator {
    border-color: #fff !important
}

.select-action.active .control--radio .control__indicator:after {
    background-color: #fff !important;
    border-color: #399680 !important
}

.select2-selection {
    height: auto !important
}

.main-filter .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 0 !important
}

.main-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.25rem !important
}

.main-filter .btn {
    border-radius: 6px !important
}

.main-filter .form-control,
.main-filter .select2-selection {
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 15px !important;
    border-radius: 6px;
    height: 3.2rem !important;
    font-size: 1rem !important
}

.sidebar-filter .form-row {
    padding: 0 1.5rem
}

.card-result a:hover h5 {
    color: #0d764c !important
}

.card-result .form-row {
    padding-left: 2rem;
    padding-right: 2rem
}

.form-control,
.select2-selection {
    border: 1px solid rgba(0, 0, 0, .075);
    padding: 10px 15px !important;
    border-radius: 5px;
    font-size: .825rem !important
}

.input-login {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-bottom: .5rem;
    border-radius: 5px !important;
    height: 3rem !important;
    font-size: 13px !important
}

.form-group .alert {
    margin: .5rem 0 !important;
    font-size: .8rem !important;
    font-family: Roboto !important;
    padding: .4rem .75rem;
    border-radius: 2px !important
}

.input-group .input-group-append i {
    font-size: .8rem !important
}

.error {
    background-image: url(../img/atentionred.png);
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: 1.8rem 1.8rem
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #efefef
}

.form-control:focus {
    border-color: transparent !important;
    box-shadow: 0 0 0 .1rem rgba(0, 60, 88, .25);
    -webkit-box-shadow: 0 0 0 .1rem rgba(0, 60, 88, .25)
}

.form-control.input-sm+.input-group-append .input-group-text {
    padding: .375rem .75rem
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem 1.125rem;
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #999;
    text-align: center;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, .075);
    border: none !important;
    border-radius: 5px
}

footer.footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #242424;
    color: #f6f6f8;
    box-shadow: 0 0 9px 3px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 9px 3px rgba(0, 0, 0, .1)
}

footer.footer p {
    color: #f6f6f8;
    font-size: .9rem
}

footer.footer i {
    background: linear-gradient(to top, #57B4BF, #0F6C84);
    background: -webkit-linear-gradient(to top, #57B4BF, #0F6C84);
    font-size: .5em;
    width: 1rem;
    height: 1rem;
    border-radius: 5px;
    margin-right: 1.25em;
    margin-top: .5em;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center
}

.comment-header {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important
}

.comment-block {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    margin-top: 1rem
}

.comment-triangle {
    border-radius: 5px;
    background: #dde3ef;
    width: 50px;
    height: 50px;
    display: inline-block;
    transform: rotate(45deg);
    position: absolute;
    right: 10px;
    top: -20px
}

.comment-block.inverted .comment-content-container {
    padding-left: 1.5rem !important;
    padding-right: 15px !important
}

.comment-block.inverted .comment-triangle {
    padding-left: 1.5rem !important;
    padding-right: 15px !important;
    background-color: #f1f2f3;
    left: 10px
}

.comment-block.inverted .comment-content {
    background-color: #f1f2f3
}

.comment-content-container {
    overflow: hidden;
    padding-right: 1.5rem !important;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px
}

.comment-content {
    border-radius: 5px;
    background: #dde3ef;
    padding: 1rem 1.5rem !important
}

.comment-author {
    text-align: center !important;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

.card .comment-photo+.step-number {
    left: 20px;
    font-size: 10px;
    width: auto;
    height: 15px;
    bottom: 10px !important;
    position: absolute;
    top: auto;
    padding-left: 5px;
    padding-right: 5px;
    left: 35px;
    border-radius: 50px
}

.comment-photo {
    display: inline;
    width: 50px;
    height: 50px;
    object-fit: fill;
    object-position: center;
    border-radius: 100%
}

.comment-photo.small {
    width: 30px;
    height: 30px
}

.comment-name {
    font-size: .8rem;
    line-height: 1.25rem;
    margin-top: .5rem
}

.card ul {
    font-size: .8rem;
    color: #535353
}

.code-block {
    padding: 1rem;
    background-color: #f7f8f9;
    border: 1px solid #eee;
    border-radius: 5px;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word
}

.profpic-container {
    position: relative;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .075);
    border-radius: 10px;
    width: 172px;
    margin: 0 auto 30px auto
}

.profpic-header {
    background: #fff;
    width: 100%;
    color: #535353;
    top: 0;
    text-align: center;
    padding: 10px;
    font-family: montserrat;
    font-size: 13px;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

#uploadedProfpic {
    width: 100%;
    height: 180px;
    border-radius: 0 0 10px 10px
}

#btnUploadProfpic>div {
    position: absolute;
    bottom: 0;
    padding: 10px;
    width: 100%;
    text-align: center;
    background-color: rgba(0, 105, 76, .8);
    border-radius: 0 0 10px 10px
}

#btnUploadProfpic>div>i {
    color: #fff;
    font-size: 20px
}

#btnUploadProfpic:hover>div {
    background-color: #00b993 !important
}

.btn.btn-basic.active,
.btn.btn-basic.active:hover {
    background-color: #00b993 !important;
    color: #fff !important
}

.btn.btn-basic.active i {
    color: #f1f2f3 !important
}

.btn.btn-basic {
    color: #535353 !important;
    background-color: #eee;
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .1)
}

.btn.btn-basic:hover {
    background-color: #f7f8f9 !important;
    color: #303030 !important
}

.btn.btn-basic i {
    color: #999 !important
}

.btn-group-lg>.btn,
.btn-lg {
    font-size: 1.1875rem
}

.btn.btn-lg.btn-danger,
.btn.btn-lg.btn-secondary {
    font-size: 17px !important
}

.home-info {
    padding: 10px;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 3px;
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .1);
    padding: 2rem;
    font-size: .9em
}

.btn:hover {
    color: #f1f2f3 !important
}

.btn.home-action-btn p {
    margin: 10px 0 0 0;
    color: #535353;
    font-size: 1em
}

.btn.home-action-btn:hover {
    background: linear-gradient(to top, #57B4BF, #0F6C84) !important;
    background: -webkit-linear-gradient(to top, #57B4BF, #0F6C84) !important
}

.btn.home-action-btn {
    box-shadow: 0 0 9px 3px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 9px 3px rgba(0, 0, 0, .1);
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    margin: 0 5px 0 0;
    width: 130px;
    height: 130px
}

.btn.home-action-btn .image {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.btn-primary.gradient:not(:disabled):not(.disabled).active,
.btn-primary.gradient:not(:disabled):not(.disabled):active,
.show>.btn-primary.gradient.dropdown-toggle {
    background: linear-gradient(to bottom, #57B4BF, #0F6C84) !important;
    background: -webkit-linear-gradient(to bottom, #57B4BF, #0F6C84) !important
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    background-color: #0F6C84 !important
}

.btn.home-action-btn:hover p {
    color: #fff
}

.btn.home-action-btn:hover .image.icon-sbu {
    background-image: url(../img/icons/icon_sbu_white.png) !important
}

.btn.home-action-btn:hover .image.icon-kbli {
    background-image: url(../img/icons/icon_kbli_white.png) !important
}

.btn.home-action-btn:hover .image.icon-table {
    background-image: url(../img/icons/icon_table_white.png) !important
}

.btn.home-action-btn:hover .image.icon-instruction {
    background-image: url(../img/icons/icon_instruction_white.png) !important
}

.btn.home-action-btn:hover .image.icon-video {
    background-image: url(../img/icons/icon_video_white.png) !important
}

.btn.home-action-btn:hover .image.icon-publication {
    background-image: url(../img/icons/icon_publication_white.png) !important
}

.user-item {
    border-bottom: 4px solid rgba(0, 0, 0, .1);
    margin-bottom: 10px
}

.user-item:last-child {
    border-bottom: none !important
}

.btn-rounded {
    border-radius: 100px !important
}

.btn-sm {
    font-size: .75rem !important;
    padding: 8px 13px !important
}

.btn-xs {
    font-size: .625rem !important;
    padding: 3px 7px !important
}

#giver {
    padding-left: 46px
}

.loader {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin: 2vw auto !important
}

.profile-container {
    padding: 0 20px
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0F6C84 !important
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #57B4BF !important;
    color: #ddd !important
}

.filledBar {
    height: 20px;
    border-radius: 100px;
    background: linear-gradient(to left, #0F6C84, #57B4BF);
    background: -webkit-linear-gradient(to left, #0F6C84, #57B4BF)
}

.tooltip[x-placement=bottom] {
    margin-bottom: 0;
    margin-top: 10px;
    margin-left: 0
}

.tooltip[x-placement=right] {
    margin-bottom: 0;
    margin-top: 7%;
    margin-left: -10px
}

.tooltip[x-placement=top] {
    margin-bottom: -120px;
    margin-left: -20px
}

.tooltip[x-placement=top]>* {
    margin-left: 20px
}

.card.content .tooltip {
    margin-bottom: 0 !important;
    margin-left: 0 !important
}

.reaction-icon {
    position: absolute;
    font-size: 48px;
    left: -24px;
    top: 20%;
    margin-top: -28px
}

.reaction-icon i {
    color: #999 !important
}

.reaction-number {
    padding-left: 2rem
}

.reaction-number.active {
    color: #ff9b28 !important;
    font-weight: 600
}

.reaction-icon:hover i {
    color: #ff9b28 !important
}

.reaction-icon.active i {
    color: #ff9b28 !important
}

.section-subtitle {
    font-size: 1.125rem;
    color: #999
}

section.content>.container {
    min-height: 28vw
}

.logo-row:first-child .logo-cell:first-child {
    border-top-left-radius: 10px
}

.logo-row:first-child .logo-cell:last-child {
    border-top-right-radius: 10px
}

.logo-row:last-child .logo-cell:first-child {
    border-bottom-left-radius: 10px
}

.logo-row:last-child .logo-cell:last-child {
    border-bottom-right-radius: 10px
}

.logo-cell-container {
    position: relative;
    padding: 0 140px;
    margin-top: 60px !important
}

.logo-row {
    margin: 0
}

.logo-cell {
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 20px
}

.logo-cell:last-child {
    border-right: none
}

.logo-cell img {
    width: 8vw;
    height: 10vw;
    display: block;
    object-fit: contain;
    margin: auto
}

.logo-row:last-child .logo-cell {
    border-bottom: none
}

.card.content {
    margin-top: -28vw;
    border-radius: 1.125rem
}

@media(max-width:997px) {
    .logo-cell-container {
        padding: 0 30px
    }
}

@media(min-width:1440px) {
    .card.content {
        margin-top: -24vw
    }

    .card.content.admin {
        margin-top: -22vw
    }

    .logo-cell img {
        width: 6vw;
        height: 7vw
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

#searchBar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55%
}

@media (max-width:767px) {
    .navbar-collapse {
        height: 90vh;
        overflow: scroll
    }

    .navbar-brand {
        width: 100%;
        display: flex;
        justify-content: center
    }

    .container {
        max-width: 95% !important
    }

    #searchBar {
        display: none
    }

    .block-sm {
        width: 100%;
        padding: 0;
        margin: 0 !important
    }

    .block-sm>.btn {
        margin: 1rem 0 !important;
        width: 100% !important
    }

    .btn-block {
        border-radius: 5px !important
    }

    .form-control {
        border-radius: 5px !important;
        width: 100%
    }

    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9 {
        padding: 0 !important;
        margin-bottom: 2rem
    }

    .card-feature .form-row.simple {
        padding: 0 !important
    }
}

@media (min-width:576px) {
    #forwardModal .modal-dialog {
        width: 80% !important;
        min-width: 80% !important;
        max-width: 80% !important
    }

    #ratingModal .modal-dialog {
        width: 60% !important;
        min-width: 60% !important;
        max-width: 60% !important
    }

    #ratingModal .modal-content {
        padding: 0 0 30px 0 !important
    }

    #ratingModal .modal-header {
        padding: 20px !important
    }

    #ratingModal .modal-body {
        padding: 0 !important
    }

    #infoModal .modal-dialog {
        max-width: 600px !important
    }

    .modal-dialog {
        max-width: 500px;
        margin: 2.5rem auto 0 auto
    }
}

@media (min-width:600px) {
    #forwardModal .modal-dialog {
        width: 80% !important;
        min-width: 80% !important;
        max-width: 80% !important
    }

    #ratingModal .modal-dialog {
        width: 60% !important;
        min-width: 60% !important;
        max-width: 60% !important
    }

    #ratingModal .modal-content {
        padding: 0 0 30px 0 !important
    }

    #ratingModal .modal-header {
        padding: 20px !important
    }

    #ratingModal .modal-body {
        padding: 0 !important
    }

    #infoModal .modal-dialog {
        max-width: 600px !important
    }

    .modal-dialog {
        max-width: 500px;
        margin: 2.5rem auto 0 auto
    }
}

@media (max-width:767px) {
    .mega-menu {
        overflow: hidden;
        width: 100%;
        margin-top: 20px !important;
        border: none;
        box-shadow: 0 0 9px 3px rgba(0, 0, 0, .1);
        padding: 0;
        border-radius: 10px;
        left: 50%;
        margin-left: 0
    }

    .mega-menu-list {
        padding: 1.25rem !important;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 100%;
        position: relative;
        width: 100%
    }

    .wizard {
        margin-left: -1rem;
        margin-right: -1rem
    }

    .wizard-step {
        padding: 10px
    }

    .wizard-step-text {
        font-size: .5rem
    }

    .wizard-step-chevron {
        display: none
    }

    .container>.card {
        margin-top: -20px !important
    }

    header.masthead {
        margin-top: 30px
    }

    header.masthead h2 {
        font-size: 1.25rem !important
    }

    header.masthead p {
        padding: 20px;
        color: #fff;
        font-size: .9rem
    }

    .profile-container {
        padding: 0
    }

    .header-account .container {
        text-align: center !important
    }

    .header-account span.badge {
        width: 75%
    }

    .card-body {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .alert {
        margin-left: 0;
        margin-right: 0
    }

    .header-account {
        margin-top: 60px
    }

    .form-control {
        margin-bottom: 1rem
    }

    label {
        margin-bottom: .5rem !important
    }

    .form-control+.select2.select2-container {
        margin-bottom: 1rem
    }

    .navbar-toggler {
        display: block;
        text-align: center;
        width: 100%;
        padding: .75rem;
        margin-top: 1rem;
        border-radius: 2px
    }

    .navbar-toggler i {
        margin-left: 1rem
    }

    .bg-dark .navbar-toggler {
        color: #fff !important
    }

    .nav-item.d-md-none {
        width: 100%;
        margin: 0 !important;
        padding: 1rem;
        border-bottom: 1px solid #eee;
        color: #484848 !important
    }

    .nav-item.d-md-none a {
        color: #484848 !important
    }

    .bg-dark .nav-item.d-md-none a {
        color: #fff !important
    }

    .nav-item.btn-switcher-container {
        margin: .5rem 0 !important
    }

    .btn-switcher-group {
        margin-left: auto;
        margin-top: .5rem;
        margin-bottom: .5rem;
        width: 100%;
        margin-right: auto;
        text-align: center
    }

    .btn-switcher {
        width: 50% !important
    }

    .nav-item.dropdown .btn {
        width: 100% !important
    }

    .nav-item.dropdown .dropdown-menu.dropdown-account {
        width: 100% !important
    }

    .alert {
        margin-left: .75rem;
        margin-right: .75rem
    }

    .form-row {
        padding: 10px .75rem !important
    }

    .card-body-content,
    .card-footer,
    .card-header {
        padding: 1rem .75rem
    }

    .row-dynamic:first-child {
        margin-top: 0 !important
    }

    .row-dynamic {
        padding-bottom: 1rem;
        border-bottom: 1px solid #eee;
        padding: 1rem .75rem !important;
        margin-top: 10px
    }

    .row-dynamic:last-child {
        border-bottom: none !important
    }

    .row-dynamic>div:first-child {
        padding-left: .25rem !important
    }

    .row-dynamic>div:last-child {
        padding-right: 0 !important
    }

    .row-dynamic .form-control {
        margin-bottom: .5rem
    }

    .footer .text-right {
        margin-top: 2rem !important;
        text-align: left !important
    }

    h6 .btn.btn-primary.uppercase.float-right {
        margin-top: 2rem
    }

    .btn.btn-primary.uppercase.float-right,
    .btn.btn-secondary.float-right {
        width: 100%;
        margin-top: .5rem
    }

    .btn.btn-danger.btn-no-text,
    .btn.btn-secondary.btn-no-text {
        width: auto !important;
        margin-top: auto !important
    }

    #giver {
        padding-left: .75rem
    }

    .card-spse {
        padding: 1.5rem !important
    }

    .card-spse-title {
        max-width: 60% !important
    }
}

.modal p::-webkit-scrollbar {
    width: 5px !important
}

.modal ::-webkit-scrollbar {
    width: 20px
}

.modal ::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, .25)
}

.modal ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .25);
    border-radius: 0
}

.modal ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .5)
}

.float-bottom {
    padding: 1rem 6rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 5px 0 30px 10px rgba(0, 0, 0, .1);
    z-index: 99999999999999999999999999999999999;
    justify-content: center;
    align-items: center
}

.float-bottom>div>div:last-child {
    align-items: flex-end
}

.float-bottom>div>div {
    justify-content: center;
    align-items: space-between;
    flex-direction: column;
    display: flex
}

.bg-level-1 {
    background: #3579bd !important
}

.bg-level-2 {
    background: #3579bd !important
}

.bg-level-2:hover {
    background: #479aaa !important
}

.bg-level-3 {
    background: #f2468a !important
}

.bg-level-3:hover {
    background: #f7589a !important
}

.bg-level-4 {
    background: #3b4f88 !important
}

.bg-level-4:hover {
    background: #4b5f98 !important
}

.bg-level-5 {
    background: #001357 !important
}

.bg-level-5:hover {
    background: #112468 !important
}

.bg-level-6 {
    background: #9979bd !important
}

.bg-level-6:hover {
    background: #669aaa !important
}

.bg-level-7 {
    background: #33468a !important
}

.bg-level-7:hover {
    background: #22589a !important
}

.opsional {
    position: absolute;
    transform: translate(0, -50%);
    font-family: montserrat;
    font-size: 7pt !important;
    color: #535353
}

.divopsional {
    transform: translate(0, -25%)
}

.notifikasi {
    position: relative;
    text-align: center;
    color: #fff
}

.exit {
    position: absolute;
    right: 4%;
    top: 30%
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10pt
}

.leftposition {
    position: absolute;
    top: 50%;
    left: 12%;
    transform: translate(-50%, -50%);
    font-size: 13pt;
    font-family: Montserrat
}

.loading {
    background: url(../img/loading.gif) no-repeat center center;
    position: absolute;
    top: 60px;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999
}

.plane {
    width: 50%;
    border-radius: 5%
}

.link_info {
    width: 100%;
    border: 1px solid #ddf;
    border-radius: 5px;
    padding: 2em;
    text-align: justify
}

.link_info li a:link {
    color: #fff
}

.link_info li a:hover {
    color: #fff
}

.link_info li a:visited {
    color: #fff
}

.link_info>li>a:active {
    color: #fff
}

.bg-editor-1 {
    background: url(../img/hero.webp) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: auto
}

.dropdown-item-custom {
    white-space: nowrap;
    text-transform: capitalize;
    font-size: 12px
}

.dropdown-item-custom:focus {
    white-space: nowrap;
    background-color: none
}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 5px 5px #0F6C84;
    border: none
}

ul.dropdown-menu-custom>li>a:hover {
    color: #0F6C84 !important;
    background: #ecf5ec;
    background: radial-gradient(circle, #ecf5ec 0, #ecf5ec 100%)
}

.tglAkta_44 {
    clear: both;
    color: red;
    margin-left: 44%
}

.tglAkta_0 {
    clear: both;
    color: red;
    margin-left: 0;
    margin-top: -1.5em
}

a.link-more,
a.link-more-toggle {
    font-size: 12px;
    padding-left: 3.5em;
    text-transform: capitalize;
    margin-bottom: 1em
}

a.link-more-toggle>.badge-pill,
a.link-more>.badge-pill {
    text-transform: capitalize;
    padding: .5em
}

a.link-more-toggle:hover,
a.link-more:hover {
    color: #00f;
    transform: scale(1.3)
}

.icon-do-verified {
    float: right;
    background-image: url(../img/do-verify.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 30px 30px;
    padding: 1em;
    height: 30px;
    cursor: pointer;
    margin-top: -.3em;
    margin-right: 30%
}

.modal-dialog-login {
    max-width: 400px;
    margin: 2.5rem auto 0 auto
}

#wajibIsi {
    font-size: 13px;
    color: red
}

.disabled {
    color: #fff;
    background-color: #999;
    border-color: #999
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 70px;
    z-index: 999999999999999999999999999999999999;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s ease-out;
    display: none;
    text-align: center;
    border: medium none !important;
    background: #f6f6f8 none repeat scroll 0 0;
    border-radius: 15px 15px 0 0 !important;
    height: 70px
}