/*
Theme Name: Flatsome SBM
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
Colors: #3d52a0, #7091e6, #8697c4, #adbbda, #ede8f5
*/

/*************** Modify bootstrap colors.   ***************/
.bg-primary {
  background-color: var(--primary-color) !important;
}
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.btn-outline-primary {
  /* background-color: var(--primary-color) !important; */
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}
.btn-outline-primary.active,
.btn-outline-primary:hover{
    background-color: var(--primary-color) !important;
    color: #fff !important;
}
.text-primary {
  color: var(--primary-color) !important;
}


/*************** ADD CUSTOM CSS HERE.   ***************/
.digit-btn {
    padding: 10px 20px;
    font-size: 20px;
    margin: 0;
}

.digit-btn:disabled{
    color: #ccc;
    border-color: #ccc;
}
.digit-btn.btn-outline-success:not(.active):active,
.digit-btn.btn-outline-success:not(.active):hover{
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.digit-btn.btn-outline-danger:not(.active):active,
.digit-btn.btn-outline-danger:not(.active):hover{
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.digit-input {
    width: 40px;
    max-width: 40px!important;
    height: 40px;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 1.5rem;
    border-radius: 5px;
    border: 1px solid #ced4da;
}
.digit-input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.digit-input[disabled],
.digit-input[readonly]{
    background-color: rgba(var(--bs-secondary-bg-rgb)) !important;
    border: 0!important;
    box-shadow: none!important;
}

.day-btn{
    width: 60px;
    height: 60px;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex: none!important;
    font-size: 1.2em;
}

.flex-none{
    flex: none!important;
}

.btn-group-with-check-icon > .btn{
    padding-left: 2em;
    padding-right: 2em;
}
.btn-group-with-check-icon > .btn-check:checked+.btn:before{
    content: "\2713";
    width: 10px;
    height: 10px;
    color:#fff;
    position: absolute;
    left: 1em;
}

.min-w-md{
    min-width: 55px;
}

.rating-label{
    min-width: 145px;
}

.line-add-friend{
    max-width: 180px;
}

.grade-badge{
    max-width: 300px;
}

.number-detail dl dt,
.number-detail dl dd{
    margin: 0;
}
.modal-open {
    padding-right: 0 !important;
}
#sbm-search-modal .modal-dialog{
    max-width: 960px;
}

.number-badge{
    width: 60px;
    height: 60px;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex: none!important;
    font-size: 1.2em;
}

.circle{
    width: 50px;
    height: 50px;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex: none!important;
}
.size-sm{
    width: 30px;
    height: 30px;
}
.size-md{
    width: 45px;
    height: 45px;
}
.size-lg{
    width: 80px;
    height: 80px;
}

.circle-job{
    width: 90px;
    height: 90px;
    white-space: normal;
    display: inline-flex !important;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex: none!important;
    overflow: hidden;
    border-radius: 50%;
}

.accordion-button{
    margin-bottom: 0;
}

.rating-money{
    color: rgba(var(--bs-success-rgb));
}
.rating-bu{
    color: rgba(var(--bs-primary-rgb));
}
.rating-love{
    color: rgba(var(--bs-danger-rgb));
}

.oper-logo{
    height: 40px;
}

.label-avatar-wrapper{
    width: 100px;
    display: flex !important;
    gap: .5rem !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    cursor: pointer;
}
.label-avatar-wrapper > .label-avatar{
    width: 90px;
    height: 90px;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid #fff;
}

.label-avatar-sm{
    width: 80px;
}

.label-avatar-sm > .label-avatar{
    width: 60px;
    height: 60px;
}

.btn-group-with-check-icon > .btn-check:checked+.label-avatar-wrapper > .label-avatar{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-group-with-check-icon > .btn-check:checked+.label-avatar-wrapper span{
    color: var(--primary-color);
}
.btn-group-with-check-icon > .btn-check:checked+.label-avatar-wrapper [class^="fa"]{
    color: #fff;
}

.btn-group-day-icon > .label-avatar-wrapper > .label-avatar {
    border: 0;
}



.btn-group-day-icon > .btn-check+.day-0 > .label-avatar{
    color: oklch(0.637 0.237 25.331);
}
.btn-group-day-icon > .btn-check+.day-1 > .label-avatar{
    color: oklch(0.795 0.184 86.047);
}
.btn-group-day-icon > .btn-check+.day-2 > .label-avatar{
    color: oklch(0.656 0.241 354.308);
}
.btn-group-day-icon > .btn-check+.day-3 > .label-avatar{
    color: oklch(0.723 0.219 149.579);
}
.btn-group-day-icon > .btn-check+.day-4 > .label-avatar{
    color: oklch(0.705 0.213 47.604);
}
.btn-group-day-icon > .btn-check+.day-5 > .label-avatar{
    color: oklch(0.623 0.214 259.815);
}
.btn-group-day-icon > .btn-check+.day-6 > .label-avatar{
    color: oklch(0.627 0.265 303.9);
}

.btn-group-day-icon .day-name{
    color: #fff;
}


.btn-group-day-icon > .btn-check:checked+.day-0 > .label-avatar{
    background-color: oklch(0.637 0.237 25.331);
    color: oklch(0.637 0.237 25.331);
}
.btn-group-day-icon > .btn-check:checked+.day-1 > .label-avatar{
    background-color: oklch(0.795 0.184 86.047);
    color: oklch(0.795 0.184 86.047);
}
.btn-group-day-icon > .btn-check:checked+.day-2 > .label-avatar{
    background-color: oklch(0.656 0.241 354.308);
    color: oklch(0.656 0.241 354.308);
}
.btn-group-day-icon > .btn-check:checked+.day-3 > .label-avatar{
    background-color: oklch(0.723 0.219 149.579);
    color: oklch(0.723 0.219 149.579);
}
.btn-group-day-icon > .btn-check:checked+.day-4 > .label-avatar{
    background-color: oklch(0.705 0.213 47.604);
    color: oklch(0.705 0.213 47.604);
}
.btn-group-day-icon > .btn-check:checked+.day-5 > .label-avatar{
    background-color: oklch(0.623 0.214 259.815);
    color: oklch(0.623 0.214 259.815);
}
.btn-group-day-icon > .btn-check:checked+.day-6 > .label-avatar{
    background-color: oklch(0.627 0.265 303.9);
    color: oklch(0.627 0.265 303.9);
}

.btn-group-day-icon > .btn-check:checked+.day-0 > .label-avatar .day-name{
    color: oklch(0.637 0.237 25.331);
}
.btn-group-day-icon > .btn-check:checked+.day-1 > .label-avatar .day-name{
    color: oklch(0.795 0.184 86.047);
}
.btn-group-day-icon > .btn-check:checked+.day-2 > .label-avatar .day-name{
    color: oklch(0.656 0.241 354.308);
}
.btn-group-day-icon > .btn-check:checked+.day-3 > .label-avatar .day-name{
    color: oklch(0.723 0.219 149.579);
}
.btn-group-day-icon > .btn-check:checked+.day-4 > .label-avatar .day-name{
    color: oklch(0.705 0.213 47.604);
}
.btn-group-day-icon > .btn-check:checked+.day-5 > .label-avatar .day-name{
    color: oklch(0.623 0.214 259.815);
}
.btn-group-day-icon > .btn-check:checked+.day-6 > .label-avatar .day-name{
    color: oklch(0.627 0.265 303.9);
}
.btn-group-day-icon > .btn-check:checked+.label-avatar-wrapper [class^="fa"]{
    color: #fff;
}

.social-icons .tooltip{
    display: inline-block;
    opacity: 1;
}

.watermark{
    opacity: 0.25;
    top: 65px;
}

.pagination .page-item{
    margin-left: 0;
}

.card-number{
    transition: box-shadow 200ms ease-in;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}
.card-number:hover,
.card-number:active,
.card-number:focus{
    box-shadow: var(--bs-box-shadow-lg) !important;
}

.sbm-search-layout-2 .digit-btn {
    padding: 0;
    margin: 0;
    font-size: 1rem;
    width: 40px;
}
.sbm-search-layout-2 .digit-input {
    padding: 0;
    width: 40px;
    max-width: 40px!important;
    height: 40px;
    text-align: center;
    font-size: 1rem;
    margin: 0px;
    border-radius: 5px;
    border: 1px solid #ced4da;
}

.input-dob{
    max-width: 180px!important;
}

.card-number .text-sum{
    line-height: 32px;
}

.card-number .text-grade{
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(var(--bs-dark-rgb));
    color: #efbe39;
    border-radius: 50%;
    filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.12));
}

.bg-analysis{
    background: url(images/blue_gradient_horoscope_1200x630.png) no-repeat center center;
    background-size: cover;
}

.input-group-analysis{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}
.input-group-analysis input{
    background: none!important;
    border: none!important;
    outline: none!important;
    box-shadow: none!important;
    margin: 0;
    height: auto;
    padding: .75em 1.25em;
    text-align: center;
    font-size: 1.1rem;
}

.input-group-analysis button{
    margin: 0;
}

@media only screen and (max-width: 768px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .sbm-search-layout-2 .digit-btn{
        width: 30px;
        min-height: 30px;
    }

}

@media only screen and (max-width: 576px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .digit-input{
        width: 30px!important;
        max-width: 30px!important;
        height: 30px!important;
        font-size: 1rem;
    }

    .sbm-search-layout-2 .digit-btn{
        width: 28px;
        min-height: 28px;
        font-size: .9rem;
    }

}