#sidebar-menu {
background:#fff;
}
@media print {
   @page { margin: 0; }
      body { margin: 1cm; font-size: 8pt !important;}
   }

@media only screen and (min-width: 600px) { 
    .slideshow-div {
        margin-top:85px;
    }
    .banner-bg {
        margin-top: 85px;
    }
    .logo-menu {
        height:30px;
    }
    .logo-menu img {
        position:absolute;
        top:-20px;
        height:150px;
    }
    .box-number {
        padding:0px 30px 0px 30px;
    }
    .modal-request .modal-dialog {
        max-width:100%;
        width:55%;
    }
    .modal-50 .modal-dialog {
        max-width:100%;
        width:50%;
    }
    .modal-55 .modal-dialog {
        max-width:100%;
        width:55%;
    }
    .modal-60 .modal-dialog {
        max-width:100%;
        width:60%;
    }
    .modal-65 .modal-dialog {
        max-width:100%;
        width:65%;
    }
    .modal-70 .modal-dialog {
        max-width:100%;
        width:70%;
    }
    .modal-fullwidth .modal-dialog {
        max-width:100%;
        width:100%;
    }
    .modal .div-loader {
        position:absolute;
        padding:15% 38%; 
    }
    .modal-70 .div-loader {
        position:absolute;
        padding: 15% 45%;
    }

}
/*ini untuk tampilan android */
@media only screen and (max-width: 600px) { 
    .slideshow-div {
        margin-top:60px;
    }
    .banner-bg {
        margin-top:60px;
    }
    .div-static .box-number h5{
        font-size:30px;
    }
    .div-static .box-number p{
        font-size:15px;
    }
    .div-static .box-white-link h5 {
        font-size:12px;
    }
    .div-static .box-white {
        height:100px !important;
        width:100%;
        padding:20px 5px;
        margin:0px;
    }
    .div-static .ikon-big {
        height:30px;
        width:30px;
    }
    .overlay-info-banner h5{
        color:#fff; 
    }
    .overlay-mini {
        margin-top: 10% !important;
    }
    .overlay-big {
        margin-top: 10px !important;
    }
    .testimonial-text {
        text-align:justify;
    }
    .banner-static {
        min-height:200px !important;
    }
    .testimonial-img {
        max-height: 100px !important;
    }
    #footer-bottom {
        height: 100px !important;
    }
    .box-white {
        border-radius:0px !important;
    }
    .modal .div-loader {
        position:absolute;
        padding:20% 25%; 
    }

    .form{
        width:90% !important;
    }

    #notif-level{
        display: none !important;
    }
    .ntf-level {
        padding-right: inherit !important;
    }

}
@media (min-width: 1200px){
    .banner-bg .container {
        max-width: 1350px !important;
        width: 100%;
    }
}
.pointer {
    cursor: pointer;
}
#header {
    background:#ed008c !important;
    padding: 0px 0px 10px 0px !important;
}
#footer-bottom {
    padding: 10px 30px;
    background:url('../../aset/img/grey-bar.png') !important;
    background-position: bottom;
    background-size: 100% 10% !important;
    height: 44px;
}
.main-menu {
    padding-top:10px !important;
}
.nav-menu a {
    color:#fff;
}
.header-top {
    background:url('../../aset/img/orange-bar.png') !important;
    background-size: 100% 100% !important;
}
.nav-menu ul {
    padding:0px;
    background:#5d5d5ddb !important;
}
.nav-menu ul a{
   color:#fff !important;
}
.nav-menu ul li:hover{
   background:#ed008c !important;
}
.nav-menu ul {
    margin: 12px 0 0 0;
}

.alert-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}

.ikon {
    background-size: cover !important;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
    margin-right: 5px;
}
.ikon-medium {
    background-size: cover !important;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
    margin-right: 5px;
}
.ikon-big {
    background-size: cover !important;
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
    margin-right: 5px;
}

.ikon-facebook-white {
    background: url(../../aset/icon/facebook-logo.svg);
}
.ikon-whatsapp-white {
    background: url(../../aset/icon/whatsapp-logo.svg);
}
.ikon-message-white {
    background: url(../../aset/icon/message-logo.svg);
}

.ikon-home-white {
    background: url(../../aset/icon/home-white.png);
}
.ikon-aboutus-white {
    background: url(../../aset/icon/aboutus-white.png);
}
.ikon-service-white {
    background: url(../../aset/icon/service-white.png);
}
.ikon-news-event-white {
    background: url(../../aset/icon/news-event-white.png);
}
.ikon-contactus-white {
    background: url(../../aset/icon/contactus-white.png);
}
.ikon-vlog-white {
    background: url(../../aset/icon/vlog-white.png);
}

.ikon-medical-white {
    background: url(../../aset/icon/medical-white.png);
}
.ikon-accomodation-white {
    background: url(../../aset/icon/accomodation-white.png);
}
.ikon-business-white {
    background: url(../../aset/icon/business-white.png);
}
.ikon-permanent-residency-white {
    background: url(../../aset/icon/permanent-residency-white.png);
}
.ikon-insurance-white {
    background: url(../../aset/icon/insurance-white.png);
}
.ikon-request-appo-white {
    background: url(../../aset/icon/request-appo-white.png);
}
.ikon-concierge-white {
    background: url(../../aset/icon/concierge-white.png);
}
.ikon-evacuation-white {
    background: url(../../aset/icon/evacuation-white.png);
}
.ikon-helpline-white {
    background: url(../../aset/icon/helpline-white.png);
}


.ikon-request-appo-grey {
    background: url(../../aset/icon/request-appo-grey.png);
}
.ikon-concierge-grey {
    background: url(../../aset/icon/concierge-grey.png);
}
.ikon-evacuation-grey {
    background: url(../../aset/icon/evacuation-grey.png);
}

.ikon-hover-white:hover .ikon-request-appo-grey{
    background: url(../../aset/icon/request-appo-white.png);
}
.ikon-hover-white:hover .ikon-concierge-grey{
    background: url(../../aset/icon/concierge-white.png);
}
.ikon-hover-white:hover .ikon-evacuation-grey{
    background: url(../../aset/icon/evacuation-white.png);
}


.bg-orange-city {
    background: url(../../aset/img/bg-orange-city.png) center;
    background-size: cover;
}

.pull-right {
    float: right;
}
.pull-left {
    float: left;
}
.site-footer-legal {
    float: left;
}
.site-footer-right {
    float: right;
}
#footer-bottom {
    color:#fff;
}
#footer-bottom a{
    color:#fff;
}
#footer-bottom a:hover{
    color:#f9ae15;
}

.sample-text-area {
    padding: 50px 0 50px 0 !important;
}
.div-testimonial {
    min-height: 500px;
    margin-bottom: 10px;
}
.testimonial-text {
   color:#fff;
   /*padding: 30px;*/
}
.testimonial-img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    margin-bottom: 20px;
    /*padding: 30px;*/
} 
.banner-testimonial h3 {
    color:#fff;
    padding-top: 50px;
}

.div-news {
    margin: 20px 0px;
}
.title-div {
    margin:20px 0px;
    font-size:40px;
}
.swiper-slide:hover .news-text {
    background: #ed008c;

}
.news-box {
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 40px;
}
.news-box img{
    width: 100%;
    height: 150px;
}
.news-text {
    padding: 15px;
    height: 80px;
    background: #000;
    color: #fff;
    width: 100%;
}
.video-list-thumbs .news-text {
    padding: 10px;
    height: 40px;
    background: #464646;
    color: #fff;
    width: 100%;
}
.news-text .title {
    display: block;
    font-size: 20px;
}
.news-banner-grey  {
    padding-right: 20px;
    padding-left: 20px;
    padding-top:20px;
    background: #b8b8b8;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #000;
}
.modal label, form label {
    font-weight: 400 !important;
}
.banner-text-bottom {
    position:absolute;
    bottom:0px;
}
.slideshow-div .carousel-inner .item img {
    height: 600px;
    object-fit: cover;
}
.full-width {
    width: 100%;
}
.width-30 {
    width: 30%;
}
.width-50 {
    width: 50%;
}
.form-control {
  border-radius: 2px;
}
.modal-content {
    border-radius:2px;
}
.btn-baru {
    color: #fff;
    background-color: #f9ae15;
    border-color: #f9ae15;
}
.btn-baru:hover {
    color: #fff;
    background-color: #ffd403;
    border-color: #f9ae15;
}
.btn-pink {
    color: #fff;
    background-color: #ed008c;
    border-color: #ed008c;
}
.btn-pink:hover {
    color: #fff;
    background-color: #ef6ab8;
    border-color: #ef6ab8;
}
.btn-grey {
    color:#fff;
    background-color: #565656;
    border-color: #565656;
}
.btn-grey:hover {
    color:#fff;
    background-color: #656464;
    border-color: #656464;
}
.btn-red{
    border: 1px #750d1f solid !important;
}
.btn {
    border-radius: 4px;
}
.overlay-info-banner {
    background:#000000a8;
    color:#fff;
    text-align:left;
    padding:20px;
    border-radius:5px;
    /*max-height: 300px;*/
}
.overlay-info-banner.bg-white {
    background: #f2f2f273 !important;
    color:#000;
}

.overlay-info-banner h5{
    color:#fff; 
}
.overlay-mini {
    margin-top: 250px;
}
.overlay-mini-2 {
    margin-top: 350px;
}
.overlay-big {
    margin-top: 50px;
}
.title-banner {
    margin-bottom:15px
}
.container2 {
    margin-right:10px;
    margin-left:10px;
    width:100%;
}
.form-group .help-block {
    text-transform:lowercase;
}
.panel-heading {
    /* border-bottom:1px solid #eaeaea !important; */
}
.div-btn {
    margin-bottom:20px;
}
.page-title {
    margin-bottom: 15px;
}




.info-green {
    background:#009688;
    color:#fff;
    padding:2px 5px;
    border-radius:3px;
    text-transform:lowercase;
}

.item-testimoni .title {
    text-align:center;
    margin-bottom:15px;
}


.video-list-thumbs{}
.video-list-thumbs > li{
    margin-bottom:12px;
}
.video-list-thumbs > li:last-child{}
.video-list-thumbs > li > a, .video-list-thumbs > li > div{
    display:block;
    position:relative;
    background-color: #464646;
    color: #fff;
    border-radius:3px
    transition:all 500ms ease-in-out;
    border-radius:4px;
}
.video-list-thumbs > li > a:hover, .video-list-thumbs > li > div:hover{
    box-shadow:0 2px 5px rgba(0,0,0,.3);
    text-decoration:none
}
.video-list-thumbs h2{
    bottom: 0;
    font-size: 14px;
    height: 33px;
    margin: 8px 0 0;
    color: #fff;
}
.video-list-thumbs .glyphicon-play-circle{
    font-size: 60px;
    opacity: 0.6;
    position: absolute;
    right: 39%;
    top: 31%;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    transition:all 500ms ease-in-out;
}
.video-list-thumbs > li > a:hover .glyphicon-play-circle, .video-list-thumbs > li > div:hover .glyphicon-play-circle{
    color:#fff;
    opacity:1;
    text-shadow:0 1px 3px rgba(0,0,0,.8);
}

@media (min-width:320px) and (max-width: 480px) { 
    .video-list-thumbs .glyphicon-play-circle{
    font-size: 35px;
    right: 36%;
    top: 27%;
    }
    .video-list-thumbs h2{
        bottom: 0;
        font-size: 12px;
        height: 22px;
        margin: 8px 0 0;
    }
}
.modal{
    overflow-y: auto !important;
}
.modal-full {
    height:100% !important;
    width:100% !important;
    max-width:100% !important;
    padding-right:0px !important;
}
.modal-full .modal-dialog{
    margin:0px !important;
    padding:0px !important;
    height:100% !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:0px !important;
}
.modal-full .modal-content{
    height:100% !important;
}
.modal-full .panel {
    margin-bottom:0px !important;
}
.modal-full .row, .row-full {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.modal .form-group {
    margin-bottom: 0px;
}


#sidebar-menu .subdrop {
    background: #f4f8fb !important;
    border-left: 3px solid #7c3330;
    color: #7c3330 !important;
}
a:hover, #sidebar-menu ul ul li.active a {
    color:#7c3330 !important;
}
.btn-default {
    background: #fff!important;
    color: #777777 !important;
}
.btn-default:hover, .btn-default:focus {
    background:#f9f9f9f9 !important;
    color:#777777 !important;
}


@media (min-width: 768px){
    .form-horizontal .control-label {
        text-align: left !important;
    }
}


.control-label.label-title {
    margin-bottom: 10px;
}


/*color*/
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #750d1f !important;
    border-color: #750d1f !important;
}
.panel-custom > .panel-heading {
    background-color: #750d1f !important;
}
.navbar-default {
/*     background-color: #36404a; */
    background-color: #fff;
    border-bottom:1px solid #eaeaea;
}
.navbar-default i{
    color:#000;
}
#wrapper.enlarged .left.side-menu #sidebar-menu a.subdrop {
    color: #7c3330 !important;
}
#sidebar-menu > ul > li > a.active {
    /*background: #7c3330 !important;*/
    border-left: 3px solid #7c3330;
    color: #7c3330 !important;
}
/*.tabs li.tab a.active {
    color: #7c3330 !important;
}*/






.ui-helper-hidden-accessible { position: absolute; left:-999em; }
.modal .close {
    color:#fff;
}

.div-form {
    display: none;
}

.div-form .form-group {
    margin-bottom: 0px;
}

.div-form .form-horizontal .form-group {
    margin-left: -10px;
    margin-right: -10px;
}

.div-form form .row{
    margin-right:0px !important;
    margin-left:0px !important;
}
.div-form #table-transaksi tbody td{
    padding: 5px;
}
.div-form #table-transaksi tbody td [readonly]{
    background:#eee;
    cursor:not-allowed;
}
input {
    border: 1px solid #E3E3E3;
}
.div-form #table-transaksi input, .div-form #table-transaksi textarea {
    width:100%;
}
.div-form #table-transaksi select{
    width: 100%;
    border: 1px solid #E3E3E3;
    padding: 9px;
}
.panel-title {
    text-transform: capitalize !important; 
}
.page-title {
    /*text-transform: uppercase;*/
}
.breadcrumb {
    /*text-transform: uppercase;*/
}

.label.label-abu {
    background-color:#9E9E9E;
}
.label.label-merah{
    background-color: #750d1f;
}
.badge.badge-merah{
    background-color: #750d1f;
}
.noti-merah{
    color: #750d1f;
    border: 2px solid #750d1f;
}
.dataTables_processing {
    position: absolute;
    top: 50%;
    left: unset !important;
    right: 50% !important;
    width: 100px !important;
    height: 100px !important;
    text-align: center !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: -25px;
    margin-left: -50%;
    font-size: 1.2em;

}
.loader, .dataTables_processing {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #750d1f; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 1.5s linear infinite;
    background:transparent;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.radio-custom.radio-inline {
    margin-top: 0;
    display: inline-block;
    margin-bottom: 8px;
}
.radio-inline label {
    font-weight:normal !important;
}
.has-error .select2-container--default .select2-selection--single, .has-error input {
    border: 1px solid #a94442 !important;
}

.has-error select {
    border: 1px solid #a94442 !important;
}

#modal2 .panel-heading {
    border-bottom: none !important;
}
.line-status {
    text-align:center;
    background:#ebeff2;
    line-height:30px;
    color:#000;
    font-weight:bold;
    text-transform:uppercase;
}
.line-status.success {
    color:#fff !important;
    background:#81c868 !important;
    height:30px
}
.line-status.danger {
    color:#fff;
    background:#f05050;
    height:30px
}
.line-status.primary {
    color:#fff;
    background:#5d9cec;
    height:30px
}
.line-remark {
    padding:5px 10px;
    text-align:left;
    background:#ebeff2;
    min-height: 30px;
    color:#000;
}
.radio-custom label, .radio-custom [type=radio]{
    cursor:pointer !important;
}
.pointer {
    cursor:pointer !important;
}
li.has-error {
    color:#a94442;
}
tr.has-error td {
    border:1px solid red !important;
}


#table-transaksi td input {
    padding: 8px;
}
.dataTable {
    width:100% !important;
}


.padding-10 {
    padding: 10px !important;
}
.padding-25 {
    padding: 25px !important;
}


.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover, .tabs-vertical > li.active > a, .tabs-vertical > li.active > a:focus, .tabs-vertical > li.active > a:hover {
    color: #7c3330 !important;
}
.loader-center .loader {
    position:absolute;
    right:50%;
    left:50%;
}
.loader-center {
    height:100px;
}
.padding-bottom-10 td{
    padding-bottom:10px !important;
}

.img-gallery-list {
    width:100%;
    height:180px;
    margin-bottom:5px;
    border-radius:3px;
    object-fit: cover;
}
.img-remove {
    position:absolute;
    background:#e4eaec;
    padding:10px 13px;

    right:15px;
    height: 40px;
    color:#484848;
    width: 40px;
}
.img-primary {
    position:absolute;
    background:#e4eaec;
    right: 55px;
    padding:10px 13px;
    z-index:2;
    height: 40px;
    color:#484848;
    width: 40px;
    cursor:  pointer;
}
.img-view {
    position:absolute;
    background:#e4eaec;
    right: 95px;
    padding:10px 13px;
    z-index:2;
    height: 40px;
    color:#484848;
    width: 40px;
}
#gallery-list input[type=radio]:checked + .img-primary {
  background: #1367af;
  color:#fff;
}

#gallery-list input[type=radio] + .img-primary {
  object-fit:cover;
  transition: 500ms all;
}
.input-hidden {
    position: absolute;
    left: -9999px;
}

.div-image {
    border:1px solid #eaeaea;
    margin-bottom: 20px;
}
.div-image img {
    padding:10px;
    object-fit:contain;
}
.wajib {
    color:#960505;
}
.tab-gallery .tab-content {
    margin-bottom:0px !important;
}
.tab-gallery .nav li{
   border-bottom:1px solid #eaeaea; 
}
.tab-gallery .nav li a:hover{
    color:#960505 !important;
    background:#f6f6f6;
}
.tab-gallery .nav-tabs > li.active > a{
    background:#f6f6f6 !important;;
}
.div-page-header .title {
    font-size:12pt;
    font-weight:bold;
    padding:10px;
    text-align:center;
    color:#777777 !important;
    border:1px solid #eaeaea;
    border-bottom:transparent;
}
.div-page-header > .col-sm-3 {
    margin-bottom:20px;
}


#modal2 .panel-body {
    /*padding:0px;*/
    /*padding-bottom:20px;*/
}

.modal .panel {
    /* border: 1px solid #eaeaea; */
    margin-bottom: 0px !important;
}


#div-report tbody tr:hover, .table-hovered tbody tr:hover{
    background:#fff;
    border:1px solid #eaeaea;
    cursor:pointer;
    -webkit-box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
    box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
}
.table {
    margin-top:10px !important;
    border-left:1px solid #eaeaea;
    border-right:1px solid #eaeaea;
    border-bottom:1px solid #eaeaea;
    border-top:1px solid #eaeaea;
}
.table .dataTables_empty {
    text-align:center;
    padding:10px;
}
.table > thead > tr > th {
    vertical-align: middle;
    border-bottom: 1px solid #eaeaea !important;
}
.thead-border thead th{
  border:1px solid #eaeaea !important;
}

.pagination > li:first-child > a, .pagination > li:first-child > span {
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child, .btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
.btn-group>.btn:first-child {
    border-radius:50px;
}

.input-group-addon {
    border-radius: 2px;
    border: 1px solid #E3E3E3;
    background: #ebeff2;
}

.btn-kotak .btn, .btn-kotak {
    border-radius: 0px !important;
}
.table {
    background:#fff;
}

.starrating > input {display: none;}  /* Remove radio buttons */

.starrating > label:before { 
  content: "\f005"; /* Star */
  margin: 2px;
  font-size: 40px;
  font-family: FontAwesome;
  display: inline-block;
}

.starrating > label
{
  color: #222222; /* Start color when not clicked */
}

.starrating > input:checked ~ label
{ color: #ffca08 ; } /* Set yellow color when star checked */

.starrating > input:hover ~ label
{ color: #ffca08 ;  } /* Set yellow color when star hover */
.d-flex {
    display: -webkit-box!important;
    display: -webkit-flex!important;
    display: -ms-flexbox!important;
    display: flex!important;
}
.flex-row-reverse {
    -webkit-box-orient: horizontal!important;
    -webkit-box-direction: reverse!important;
    -webkit-flex-direction: row-reverse!important;
    -ms-flex-direction: row-reverse!important;
    flex-direction: row-reverse!important;
    float: left;
}
#table-pemasaran td label{
    width:100%;
}
#table-pemasaran tr{
    background:#fff;
}
#table-pemasaran tr:hover{
}

.tr-checked {
    background: #843c49fa !important;
    color:#fff;
}

.select2-results__option[aria-disabled=true] { 
    display: none;
}

.mt-12{
    margin-top: 12px !important;
}
.mt-20{
    margin-top: 20px !important;
}

.content-hide{
    display: none;
}

.ntf-listing{
    padding: 15px 20px !important;
    margin-bottom: 0px !important;
    border-radius: 4px 4px 0px 0px!important;
}
.ntf-listing-review{
    padding: 1px 20px !important;
    border-radius: 0px 0px 4px 4px!important;
}

.m-3{
    margin: 3px 0px;
}

.no-pointer{
    cursor: no-drop!important;
    background: #f5f5f5;
}

/* PLYR */
.plyr__control--overlaid{
    background: #750d1f !important;
}
.plyr--full-ui input[type=range]{
    color: #750d1f !important;
}
.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true]{
    background: #750d1f !important;
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before{
    background: #750d1f !important;
}
/* END PLYR */

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.progress-circle {
    width: 150px;
    height: 150px;
    background: none;
    position: relative;
  }
  
  .progress-circle::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .progress-circle>span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
  }
  
  .progress-circle .progress-left {
    left: 0;
  }
  
  .progress-circle .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 6px;
    border-style: solid;
    position: absolute;
    top: 0;
  }
  
  .progress-circle .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
  }
  
  .progress-circle .progress-right {
    right: 0;
  }
  
  .progress-circle .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
  }
  
  .progress-circle .progress-value {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .rounded-lg {
    border-radius: 1rem;
  }
  
  .text-gray {
    color: #aaa;
  }
  
  #progressvideo div.h4 {
    line-height: 1rem;
  }

/* Background colors */
.br-custom {
    border-color: #5fbeaa !important;
  }
  .br-primary {
    border-color: #5d9cec !important;
  }
  .br-success {
    border-color: #81c868 !important;
  }
  .br-info {
    border-color: #34d3eb !important;
  }
  .br-warning {
    border-color: #ffbd4a !important;
  }
  .br-danger {
    border-color: #f05050 !important;
  }
  .br-muted {
    border-color: #f4f8fb !important;
  }
  .br-inverse {
    border-color: #4c5667 !important;
  }
  .br-purple {
    border-color: #7266ba !important;
  }
  .br-pink {
    border-color: #fb6d9d !important;
  }
  .br-white {
    border-color: #ffffff !important;
  }
  .br-lightdark {
    border-color: #f4f8fb !important;
  }