:root {
    --color-primary: #255a7a;
    --color-primary-half-opacity: #255a7acc;
    --color-primary-darker: #1d4a66;
    --color-primary-darker-half-opacity: #1d4a66cc;
}



/* Overwrite Bootstrap */
.bg-primary {
    background-color: var(--color-primary) !important;
}
.text-primary {
    color: var(--color-primary) !important;
}
.border-primary {
    border-color: var(--color-primary) !important;
}
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary) !important;
    border-color: var
}


.nav-link, .nav-link:hover { color:var(--color-primary); }





a:hover, a:focus { color: var(--color-primary); }



/* Custom Hover Content */
.custom-hover {
    overflow:visible; position:relative;
    .custom-hover-content {
        visibility:hidden; opacity:0; transition: all 0.1s ease-in-out; z-index: -100; position:absolute; top:100%; left:0; width:100%;
        .list-group-item { border-bottom:0; 
            a { line-height:1.3rem; }
        }
    }
    &:hover {
        .custom-hover-content {
            visibility:visible; opacity:1; z-index:10;
        }
    }
}


/* Datepicker Calendar Icon */
.datepicker-wrapper { 
    position:relative; display:inline-block; width:100%; margin-bottom:25px;
    input { 
        padding-right: 2.5rem;
    }
    .margin-25px-bottom {
        margin-bottom:0;
    }
}

.calendar-icon {
    position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#555; pointer-events:none; opacity:.5;
}



/* Fix Doctor Index Hover Card */
.custom-hover-blue {
    .bg-transparent-gradient-fast-blue-purple {
        background-image:linear-gradient(to right top, var(--color-primary-darker-half-opacity),  var(--color-primary-half-opacity));
    }
}


.ani-blinking,
.cart-count.active {
    animation: boink 2s infinite alternate cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

    @keyframes boink {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
        55% {
            transform: scale(1);
        }
        60% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
}


.cst-item { transition: all 0.5s ease-in-out; opacity:0; height:0; overflow:hidden; 
    &.active { opacity:1; height:unset; }
}

.whatsapp-circle { position:fixed; bottom:100px; width:40px; height:40px; right:42px; & i { display:block; }}

footer { line-height:1.4; font-size:.9em; a:focus { color:#fff; } }
.footer-submenu { transition: all 0.1s ease-in-out; opacity:0;
    li { padding-left:1em; position:relative;
        a { font-size:.87em; display:inline-block; }
        &::before { content:"-"; position:absolute; left:0; opacity:.5; }
    }
    li:first-child { padding-top:1em; }
}


form:not(.original-style) {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}


input[type="checkbox" i] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 3px 3px 3px 4px;
    padding: initial;
    border: initial;
}

input[type="radio" i] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 3px 3px 3px 4px;
    padding: initial;
    border: initial;
}



/* Pindahkan ke style.css */
.accordion {
    .accordion-header { line-height:unset; font-weight:bold; }
}
input[type="radio"].form-check-input { width:1em; margin-top:.5rem; }
.form-check-label { line-height:unset; font-size:1rem; }

.pagination {
    .page-item { 
        .page-link {color:#255a7a; }
        &.active .page-link { background-color:#255a7a; border-color:#255a7a; color:#fff; }
    }
}
.btn-outline-primary { border-color:#255a7a; color:#255a7a; &:hover { background-color:#255a7a; color:#fff; } }


#promo-content {
    min-height: 1150px;
    
}