:root{
    --primary :240 5.9% 10%;
    --radius: 0.5rem;
    --sidebar-width: 15rem;
}

.hero-main-top{
    background-size: contain;
    background-repeat: repeat;
    min-height: 300px;
    background-position: center center;
    position: relative;
    z-index: 2;
}
.hero-main-top::after{
    content: "";
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background-color: #0000000d;
    z-index: 1;
    position: absolute;
}
.hero-main-top .content{z-index: 2;position: relative;width: 100%;}

.btn{
    font-size: .875rem;
    line-height: 1.25rem;

    padding-top: .5rem;
    padding-bottom: .5rem;

    padding-left: 1rem;
    padding-right: 1rem;
    /* background-color: hsl(var(--primary)); */
    color:white;
    font-weight: 500;
    border-radius: calc(var(--radius) - 2px);
    border:0px;
}
.btn.btn-dark:hover{
    background-color: hsl(var(--primary) / .9);
}

.image-villas-box img{
    border-radius: 5px;
    width: 280px;
    height: 180px;
    object-fit: cover;
}
.image-villas-bo-owner img{
    border-radius: 5px;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.image-villas-box-child img{
    border-radius: 5px;
    width: 125px;
    height: 105px;
    object-fit: cover;
}
.btn-sm{
    font-size: .775rem;
    padding: 0.3rem;
}

.logo-top-nav{
    width: var(--sidebar-width);
}
/* .control-nav{width: 100%;} */
.sidebar-layout {
    width: var(--sidebar-width);
    height: 100vh;
    z-index: 1038;
    position: fixed;
    top: 74px;
    right: 0;
    left: 0;
}
.sidebar-layout .nav .nav-link.active svg path{
    fill:white;
}
.content-layout{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    flex-grow: 1;
    min-height: calc(100vh - 3.625rem);
    margin-left: 0;
    padding-left: 15rem;
    top: 4.5rem;
}
.my-nav-style a{
    padding: 0.9em 1em;
    font-size: 15px;
    color: #2e2e2e;
    font-weight: 400;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 10px;
}
.my-nav-style a.active{
    background-color: #002a4f;
    color: white;
}
.dropdown-menu{
    padding:5px;
}
.dropdown-item{
    border-radius: 5px;
    font-size: 14px;
    padding: 8px 10px;
}
.modal-content{
    border:0px;
}
.modal-header,.modal-footer{border-bottom: 0px;border-top: 0px;}
.modal-header,.modal-body,.modal-footer{padding: 1.5em;}
.modal-content{
    min-height: 341px;
}
.form-control:focus{
    color: var(--bs-body-color);
    border-color: #dee2e6;
    box-shadow: 0px 0px 0px 0.1rem rgb(0 0 0);
}
.form-label{font-size: 14px;color: #8d8d8d;}
.nav-tabs .nav-link{
    font-size: 13px;
    color: #a0a0a0;
}

.breadcrumb-saya ol li,.breadcrumb-saya ol li a{font-size: 12px;color:#696969}
.breadcrumb-saya ol li a{text-decoration: none;color:#002a4f}
.breadcrumb-saya .breadcrumb-item.active{color:#a3a3a3}
.table-performance tr td,.table-performance tr th{padding: 15px 0px;}
.fc-unthemed td.fc-today{background-color: transparent !important;}


.bg-image-vertical {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
}
#show_hide_password a i{color:gray}

.syncron-icon1.play{
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
}
.syncron-icon.play {
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}
.paginations ul.pagination li{cursor: pointer;}
.paginations ul.pagination li.disabled{cursor: not-allowed;}
.paginations ul.pagination li a svg rect{fill: transparent !important;}
.select2-result-repository{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.select2-result-repository__avatar img{
    width: 40px;
    border-radius: 2em;
}
.menu-canvas .nav-item a{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 15px;
}
.menu-canvas .nav-item a.active{
}
.subunitImg img{
    width: 110px;
    height: 110px;
    object-fit: cover;
}

.fc-event-container .calendar_marked {
    padding: 7px !important;
    border: 0px !important;
}
.fc-event-container .calendar_marked .fc-time{display: none;}
.bg_hostfully_ui{background-color: #FFC454;}
.bg_direct_hvmi{background-color:#f79464 ;}
.bg_direct_bokingdotcom{background-color: #003681;}
.bg_hostfully_dbs{background-color: gray;}
.bg_direct_airbnb{background-color: #FF5B60;}
.bg_blocked{background-color: #48B795;}
.bg_direct_vrbo{background-color: rgba(14,33,75,255)}
.striped_my{
    background-size: 50px 50px;
}
@media (min-width: 1400px) {
    .container{
        max-width: 1100px;
    }
}
@media (max-width: 575px) {
    .parent_element_actons{width: 100% !important;}
}
@media (max-width: 990px) {
    .hero-main-top{
        min-height: 220px;
    }
    .content-layout{
        padding-left:0px;
        top: 5rem;
    }
    .subunitImg img{
        width: 80px;
        height: 80px;
    }
    .image-villas-box-child img{width: 100% !important;}
    .child_detail_action{width: 100% !important;margin-left: 0px !important;padding: .5rem!important;}
}