.todo-list-wrapper .todo-indicator, .todo-list-wrapper .todo-indicator-sch {
    position: absolute;
    width: 4px;
    height: 80%;
    border-radius: .3rem;
    left: .625rem;
    top: 10%;
    opacity: .9;
    transition: opacity .2s
}

.todo-list-wrapper .list-group-item:hover .todo-indicator, .todo-list-wrapper .list-group-item:hover .todo-indicator-sch {
    opacity: .9
}

.todo-list-wrapper .widget-check-container, .todo-list-wrapper .widget-check-container-sch {
    position: absolute;
    width: 4px;
    height: 60%;
    border-radius: .3rem;
    left: .1rem;
    top: 20%;
    opacity: .6;
    transition: opacity .2s;
    display: none;
}

.li-log-widget, .li-sch-widget {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
    padding-left: 0px;
}

.todo-list-wrapper input[type="checkbox"] {
    width: 2rem;
    height: 2rem;
}

.todo-list-wrapper .custom-control,.todo-list-wrapper input[checkbox] {
    margin-left: .2rem
}

.badge-danger {
    color: #fff;
    background-color: #dc3545
}

a.badge-danger:hover,a.badge-danger:focus {
    color: #fff;
    background-color: #dc3545
}

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

a.badge-secondary:hover,a.badge-secondary:focus {
    color: #fff;
    background-color: #6c757d
}

.badge-primary {
    color: #fff;
    background-color: #2235a1
}

a.badge-primary:hover,a.badge-primary:focus {
    color: #fff;
    background-color: #2235a1
}

.badge-success {
    color: #fff;
    background-color: #198754
}

a.badge-success:hover,a.badge-success:focus {
    color: #fff;
    background-color: #198754
}

.badge-warning {
    color: #fff;
    background-color: #eb6315
}

a.badge-warning:hover,a.badge-warning:focus {
    color: #fff;
    background-color: #eb6315
}

.badge-dark {
    color: #fff;
    background-color: #212529
}

a.badge-dark:hover,a.badge-dark:focus {
    color: #fff;
    background-color: #212529
}

.badge-info {
    color: #fff;
    background-color: #2596ad
}

a.badge-info:hover,a.badge-info:focus {
    color: #fff;
    background-color: #2596ad
}

li.list-group-item:hover {
    background-color: #EFEFEF;
}

li.list-group-item:focus, li.list-group-item:active {
    background-color: #F3F4F5;
}

li.li-on-session {
    background-color: #FEEEEE;
}

li.li-on-cancelled {
    background-color: #F1F1F1;
}

.li-item-cloning {
    font-size: 2rem;
}

.widget-content {
    /* padding: 1rem; */
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.widget-content .widget-content-wrapper {
    display: flex;
    flex: 1;
    position: relative;
    align-items: center
}

.widget-content .widget-content-left {
    width: 100%;
    display: flex;
}

.widget-content .widget-content-left .widget-heading {
    opacity: 1;
    font-weight: 600;
    font-size: 2rem;
}

.widget-content .widget-content-left .widget-caption {
    opacity: .8;
    font-weight: 400
}

.widget-content .widget-content-left .widget-subheading {
    opacity: .7;
    display: flex;
}
.widget-content .widget-content-left .widget-subheading > span:last-child {
    display: inline-block;
    font-style: italic;
    width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-content .widget-content-right {
    margin-left: auto
}

.widget-content .widget-numbers {
    font-weight: 700;
    font-size: 1.8rem;
    display: block
}

.widget-content .widget-content-outer {
    display: flex;
    flex: 1;
    flex-direction: column
}

.widget-content .widget-progress-wrapper {
    margin-top: 1rem
}

.widget-content .widget-progress-wrapper .progress-sub-label {
    margin-top: .33333rem;
    opacity: .5;
    display: flex;
    align-content: center;
    align-items: center
}

.widget-content .widget-progress-wrapper .progress-sub-label .sub-label-right {
    margin-left: auto
}

.widget-content .widget-content-right.widget-content-actions {
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s
}

.widget-content:hover .widget-content-right.widget-content-actions {
    visibility: visible;
    opacity: 1
}

.m-2 {
    margin: .5rem!important
}

.mt-2,.my-2 {
    margin-top: .5rem!important
}

.mr-2,.mx-2 {
    margin-right: .5rem!important
}

.mb-2,.my-2 {
    margin-bottom: .5rem!important
}

.ml-2,.mx-2 {
    margin-left: .5rem!important
}

.scrollbar-container {
    overflow-y: auto;
    height: 500px;
}

.font-size-lg {
    font-size: 1.1rem!important
}

.font-size-xlg {
    font-size: 1.5rem!important
}

.font-weight-normal {
    font-weight: 400!important
}

span.span-elapsed {
    margin-left: 3px;
}

span.span-issue-title {
    font-weight: 600;
    margin-right: 10px;
}

span.span-badge-cloned {
    font-size: 1rem;
    border-radius: 5px;
    padding: 1px 3px;
    color: white;
    background: #1b5c95;
}

span.span-badge-pinned {
    margin-left: 5px;
    font-size: 1rem;
    border-radius: 5px;
    padding: 1px 3px;
    color: white;
    background: #007bff;
}

div.action-item-widget {
    display: none;
    align-items: flex-end;
    margin-top: 5px;
}

#btn_redo_onnew {
    display: none;
}

.card-header-title {
    display: flex;
    flex-flow: nowrap;
    height: 30px;
    align-items: center;
    font-size: 1.3rem;
}
.card-header-title > *:first-child {
    float:left;
}
.card-header-title > *:not(:first-child) {
    float: right;
    position: absolute;
    cursor: pointer;
}
.card-header-title > *:not(:first-child):active {
    color: #6c757d;
}

/* .card-header-title > i:nth-child(2) {
    right: 170px;
    display: none;
    color: #0d6efd;
} */
.card-header-title > *:nth-child(2) {
    right: 205px;
    display: none;
    color: #DFDFDF;
}
.card-header-title > *:nth-child(3) {
    right: 170px;
    display: none;
}
.card-header-title > i:nth-child(4) {
    right: 135px;
    /* color: #0d6efd; */
}
.card-header-title > i:nth-child(5) {
    /* import button */
    right: 100px;
}
.card-header-title > *:nth-child(6) {
    right: 65px;
    color: #8d593a;
}
.card-header-title > *:nth-child(7) {
    right: 65px;
    color: #8d593a;
}
.card-header-title > *:nth-child(8) {
    right: 30px;
}
.card-header-title2 .icon-badge-icon {
    font-size: 1.3rem;
    position: relative;
}
.card-header-title2 .icon-badge {
    background-color: #18a1df;
    font-size: 1rem;
    color: white;
    text-align: center;
    /* width: 1.1rem; */
    /* height: 1.1rem; */
    border-radius: 35%;
    /* position: absolute; */
    padding: 0px 5px;
    top: -5px;
    /* left: 1rem; */
}

.blur-all {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

.flickering {
    animation: flicker 0.7s infinite;
}

@keyframes flicker {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.8;
    }
}

#div_consult_container, #div_bioscan_container {
    display: none;
}

#div_bioscan_container > div {
    width: 100%;
}
#div_bioscan_container div {
    text-align: center;
    color: white !important;
}
#div_bioscan_container h4 {
    margin-top: 50px;
}
#btn_start_bioscan {
    margin-top: 30px !important;
}
#div_biosteps {
    display: none;
    margin-top: 20px;
}
#div_biosteps div.div-bio-step {
    text-align: left !important;
    width: 100%;
    padding: 30px 20px 10px 20px;
    opacity: 0;
}
div.div-bio-step > span {
    margin-left: 15px;
}

#a_session_info {
    color: #3e7fa7;
    font-size: 1rem;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-weight: 600;
    text-shadow: 1px 1px #002a69;
}
#sessionInfoWidget {
    z-index: 1150 !important;
}
#sessionInfoWidget .modal-content {
    color: white;
    background: #398eabd9;
}
#div_remain_session_info {
    display: none;
}
#a_remain_session_info {
    color: #dd6e2b;
    font-size: 1rem;
    padding-bottom: 10px;
}

#manageSessionWidget ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0) !important;
    width: 100%;
}
#manageSessionWidget li a {
    display: block;
    color: #db6f1f;
    padding: 8px 16px;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.4rem;
    border-bottom: 1px dashed #9b4118;
}
#manageSessionWidget li:last-child a {
    border-bottom: none;
}
#manageSessionWidget li a.active {
    background-color: #04AA6D;
    color: white;
}
#manageSessionWidget li a:hover:not(.active) {
    background-color: #e76a2f;
    color: white;
}
a.disabled-link {
    pointer-events: none;
    opacity: 0.4;
    color: gray;
    cursor: default;
}
#manageSessionWidget .modal-content {
    background: rgba(255, 255, 255, 0.7) !important;
    text-align: center;
}
#numbersWidget .modal-content {
    text-align: center;
}
#boostWidget .modal-content {
    text-align: center;
}
#div_numbers_consult {
    display: none;
}

/* Sessions clock (replaces combo_repeat_numbers in #div_numbers_consult) */
.consult-sessions-clock-wrap {
    display: inline-block;
    margin: 10px 0;
}
.consult-sessions-clock {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(0,0,0,0.25);
    border: 3px solid #5bfeff;
    cursor: pointer;
    overflow: hidden;
}
.consult-sessions-clock-pie {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* 0deg = top (12 o'clock), fill clockwise; JS sets --clock-pie-deg (e.g. 150deg for 5) */
    background: conic-gradient(#5bfeff 0deg, #5bfeff var(--clock-pie-deg, 360deg), transparent var(--clock-pie-deg, 360deg));
    pointer-events: none;
}
.consult-sessions-clock-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    border: 2px solid #5bfeff;
    color: #5bfeff;
    font-size: 40px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Session Clock - Slider */

#div_select_hour .circle {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto;
}
#div_select_hour .circle svg {
    position: relative;
    width: 150px;
    height: 150px;
    transform: rotate(270deg);
}
#div_select_hour .circle svg circle {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: #425657;
    stroke-width: 4;
    transform: translate(5px, 5px);
}
#div_select_hour .circle svg circle:nth-child(2) {
    stroke: var(--clr);
    stroke-dasharray: 440;
}
#div_select_hour div {
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
}
#div_select_hour .ap {
    font-size: 1.5em;
    position: relative;
}
#div_select_hour .consult-hour-dial {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    line-height: 0;
}

#div_select_hour .consult-hour-dial #svg {
    display: block;
    width: 200px;
    height: 200px;
}

#div_select_hour .consult-hour-value {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110px;
    height: 72px;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

#hour_value_label {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.consult-sessions-clock-wrap #hour_select {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    opacity: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: 16px;
    line-height: 72px;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.consult-sessions-clock-wrap #hour_select:focus {
    box-shadow: none !important;
    outline: none;
    border: none;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: transparent !important;
}

#div_select_hour #svg {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
  
#hour_select option {
    background: #374e63;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.consult-sessions-clock-wrap div#lbl_hours {
    text-align: center !important;
    width: 100%;
    position: relative !important;
    color: white;
    font-size: 1.7rem;
    font-weight: 500;
    margin-top: 0;
    line-height: 1.2;
}

#combo_numbers_10, #combo_duplication_numbers, #combo_boost_number {
    width: 110px;
    margin: 10px 0px;
    display: inline;
    text-align: center;
    text-align: -webkit-center;
}

.li-by-state-0 {
    background-color: #FFF;
}
.li-by-state-1 {
    background-color: #F6F0EB;
}
.li-by-state-1 .widget-heading {
    color: #9F6F33;
}
.li-by-state-2 {
    background-color: #F0F0F0;
}
.li-by-state-2 .widget-heading {
    color: #999;
}
.li-by-state-3 {
    background-color: #F5F5F5;
}
.li-by-state-3 .widget-heading {
    color: #666;
}
.li-need-to-rate {
    background-color: #ddeefd;
}
.li-need-to-rate:hover {
    background-color: #c8dff5 !important;
}

.btn-item-session > span {
    margin-left: 5px;
}

@media (min-width: 1024px) {
    .btn-item-session > span {
        margin-left: 10px;
    }
}

@media (max-width: 991px) {
    .btn-item-session {
        padding: 5px 10px;
    }
    .btn-item-session > span {
        display: none;
    }
}

@media (max-width: 480px) {
    .div-buttons-in-rating {
        gap: 10px;
        display: flex;
        flex-direction: column;
    }
}

#historyWindow .modal-header {
    color: white;
    background: linear-gradient(0deg, #0e5aab, #1b317d);
    font-size: 22px;
    display: block;
}

.history-modal-header-title {
    margin-bottom: 1rem;
    align-items: center;
    display: flex;
    justify-content: center;
    padding-bottom: 4px;
    border-bottom: solid 1px rgb(255, 255, 255, 0.2);
}

.session-history-search {
    padding: 1em 1em 0em 1em;
}

.session-history-search .input-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    font-size: 14px;
    z-index: 10;
    padding: 4px 6px;
    transition: color 0.2s;
}

.session-history-search .input-clear-btn:hover {
    color: #dc3545;
}

.session-history-search #input_history_search {
    padding-right: 35px;
}

@media (max-width: 767.98px) {
    .session-history-search label {
      display: none !important;
    }
}

.spinner-border {
    display: inline-block !important;
}

#div_saying_contents {
    display: none;
}

#div_saying_contents div:first-child {
    text-align: center;
}
        
#div_saying_contents div:first-child span:first-child {
    color: #71ff71;
    font-weight: bold;
    font-size: 24px;
}

#div_saying_contents div:first-child span:last-child {
    color: #1ecaff;
    font-weight: 600;
    font-size: 24px;
}

#div_saying_contents div#p_saying_contents {
    word-wrap: break-word;
    /* white-space: normal; */
    max-width: 1000px;
    max-height: 50vh;
    min-height: 150px;
    overflow: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
    color: #f9ffc9;
}
.div_dot_flashing {
    display: none;
}
.avatar-serenity {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border-color: #84b547;
    border-style: solid;
    border-width: 2px;
}
#btn_open_serenity_claimer {
    letter-spacing: 2px;
    font-size: 20px;
    font-family: sans-serif;
}

#btn_close_serenity_desc {
    /* display: none; */
    /* width: 100%; */
    letter-spacing: 5px;
    font-size: 20px;
    font-family: sans-serif;
}

.bi-sine-canvas.consulting {
    background: rgb(153 198 211 / 20%) !important
}

/* Smart Session Window */
#smartSessionWindow .modal-header {
    justify-content: start;
    gap: 20px;
    color: #207ab7;
}
#smartSessionWindow .avatar-serenity {
    width: 80px;
    height: 80px;
}
#smartSessionWindow .textarea-chat {
    vertical-align: middle;
    resize: none;
    min-height: 47px;
    max-height: 137px;
    width: 100%;
    /* margin-right: -18px; */
    overflow-y: auto;
    height: 120px;
    color: white;
    background: transparent;
    border: solid 2px #207ab7;
    border-radius: 10px;
    padding: 1rem;
}
#div_slide_input_issue > div:first-child {
    padding: 10px 10px 20px 10px;
    font-size: 18px;
}
.div-user-chat {
    margin-bottom: 1rem;
    padding: 5px;
}
.div-serenity-subtitle {
    text-align: center;
}
.div-serenity-subtitle img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border-color: #84b547;
    border-style: solid;
    border-width: 2px;
    margin-right: 10px;
}
.div-serenity-subtitle span {
    text-align: center;
    font-size: 1.5rem;
    color: #20227d !important
}
  
.div-serenity-subtitle2 span {
    font-size: 1rem;
    color: #0a8d70 !important;
    margin-top: 0.5rem;
}

/*
* Microphone
******************************************************************************/

.mic {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background-color: #266c71;
    color: #fff;
    font-size: 2.6rem;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.25s;
}
  
.mic::before {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}
  
.listening {
    background-color: #20cbff;
    z-index: 1;
}
.listening::before {
    animation: listening 1.3s infinite;
    /* z-index: 99; */
}
  
@keyframes listening {
    from {
      opacity: 0.8;
    }
    to {
      transform: scale(2);
      opacity: 0;
    }
}

/** New Consultation Choose Window */

#consultsWindow .modal-content, #consultWindowChoice .modal-content, #analysingWidget .modal-content, #interChooseWindow .modal-content, #modalitiesWindow .modal-content, #smartSessionWindow .modal-content, #settingsWindow .modal-content {
    /* background: rgb(0 58 109 / 65%) !important;
    box-shadow: 2px 2px #002a69; */
    /* background: rgb(0 58 109 / 65%) !important; */

    /* background: #032a54d6 !important; */
    
    /* background: linear-gradient(180deg, #14265C, #081943); */

    background: linear-gradient(180deg, rgba(28, 48, 108, 0.42) 0%, rgba(10, 22, 64, 0.55) 52%, rgba(8, 16, 48, 0.62) 100%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgb(198 212 255 / 30%);
    border-radius: 12px;
}

#consultsWindow .modal-header, #consultWindowChoice .modal-header, #interChooseWindow .modal-header, #modalitiesWindow .modal-header, #smartSessionWindow .modal-header {
    border-bottom: none;
    justify-content: start;
    gap: 20px;
}

#consultsWindow .modal-body, #consultWindowChoice .modal-body, #interChooseWindow .modal-body, #modalitiesWindow .modal-body, #smartSessionWindow .modal-body {
    padding: 20px;
}

#consultsWindow .modal-header h3, #consultWindowChoice .modal-header h3, #interChooseWindow .modal-header h3, #modalitiesWindow .modal-header h3, #smartSessionWindow .modal-header h3 {
    color: white;
    font-size: 2rem;
}

#consultsWindow span, #consultWindowChoice span, #interChooseWindow span, #modalitiesWindow span, #smartSessionWindow span {
    color: #dcf2ff;
}

#consultsWindow button, #consultWindowChoice button, #interChooseWindow button, #modalitiesWindow button, #smartSessionWindow button {
    margin-top: 0.5rem;
    letter-spacing: 1px;
}

#connsultsWindow button, #consultWindowChoice button, #interChooseWindow button, #modalitiesWindow button {
    /* border: 1.3px solid #e28aff;
    background: linear-gradient(165deg, #af22f6, #820be5 48%, #6b0bd7 77%, #8b22f0); */
    background: linear-gradient(180deg, #5669B5, #35478E);
    border: 1px solid rgba(121, 154, 255, 0.55);
    border-radius: 10px;
}

button.btn-bright-purple-gradient {
    background: linear-gradient(180deg, #8456b5, #53358e) !important;
    border: 1px solid rgb(187 121 255 / 55%) !important;
    border-radius: 10px;
}

button.btn-crystal-blue-gradient {
    background: linear-gradient(180deg, #5669B5, #35478E) !important;
    border: 1px solid rgba(121, 154, 255, 0.55) !important;
    border-radius: 10px;
}

.div-serenity-subtitle > span, #h3_consult_desc, #h1_analyze_desc {
    text-align: center;
    font-size: 1.5rem;
    color: #feffc9 !important;
}

/* Consult components: mobile = full-width list; non-mobile = grid with icon over text */
.div-component-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-height: 70vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
        display: none;
    }
    overflow-y: auto;
}

/* consultsWindow, interChooseWindow & modalitiesWindow: visible vertical scroll with UI-matching scrollbar */
#consultsWindow .div-component-container,
#interChooseWindow .div-component-container,
#modalitiesWindow .div-component-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(147, 197, 253, 0.6) rgba(0, 58, 109, 0.35);
    -ms-overflow-style: auto;
    overflow-y: auto;
    padding-right: 6px;
    margin-right: 2px;
}
#consultsWindow .div-component-container::-webkit-scrollbar,
#interChooseWindow .div-component-container::-webkit-scrollbar,
#modalitiesWindow .div-component-container::-webkit-scrollbar {
    width: 8px;
    display: block;
}
#consultsWindow .div-component-container::-webkit-scrollbar-track,
#interChooseWindow .div-component-container::-webkit-scrollbar-track,
#modalitiesWindow .div-component-container::-webkit-scrollbar-track {
    background: rgba(0, 58, 109, 0.35);
    border-radius: 10px;
    margin: 6px 0;
}
#consultsWindow .div-component-container::-webkit-scrollbar-thumb,
#interChooseWindow .div-component-container::-webkit-scrollbar-thumb,
#modalitiesWindow .div-component-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(147, 197, 253, 0.55) 0%, rgba(96, 165, 250, 0.5) 100%);
    border-radius: 10px;
    border: 1px solid rgba(198, 212, 255, 0.25);
    min-height: 40px;
}
#consultsWindow .div-component-container::-webkit-scrollbar-thumb:hover,
#interChooseWindow .div-component-container::-webkit-scrollbar-thumb:hover,
#modalitiesWindow .div-component-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(147, 197, 253, 0.75) 0%, rgba(96, 165, 250, 0.7) 100%);
}
#consultsWindow .div-component-container::-webkit-scrollbar-thumb:active,
#interChooseWindow .div-component-container::-webkit-scrollbar-thumb:active,
#modalitiesWindow .div-component-container::-webkit-scrollbar-thumb:active {
    background: rgba(147, 197, 253, 0.85);
}

/* iOS Safari: backdrop-filter on a ::before inside overflow:hidden blurs
   the card's own icons. Drop the filter on iOS for every card, not just first. */
@supports (-webkit-touch-callout: none) {
    #consultsWindow .div-component::before,
    #interChooseWindow .div-component::before,
    #modalitiesWindow .div-component::before {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.div-component {
    position: relative;
    overflow: hidden;
    cursor: default;
    width: 100%;
    padding: 32px 20px 20px 20px;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
    opacity: 0.8;
    background: transparent;
    margin-top: 10px;
    border: none;
    border-radius: 20px;
    font-size: 1.3rem;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    /* Fix Safari iOS: isolate stacking so backdrop-filter on ::before doesn't blur card content */
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.div-component::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    /* background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.35) 0%,
      rgba(29, 78, 216, 0.28) 50%,
      rgba(30, 64, 175, 0.4) 100%
    ); */
    background: linear-gradient(
        180deg, #233870, #112658);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* border: 1px solid rgba(96, 165, 250, 0.55); */
    border: 1px solid rgba(121, 154, 255, 0.55);
    box-shadow:
      inset 0 1px 0 rgba(147, 197, 253, 0.4),
      inset 1px 0 0 rgba(147, 197, 253, 0.25),
      inset -1px -1px 0 rgba(59, 130, 246, 0.2),
      0 0 0 1px rgba(96, 165, 250, 0.2),
      0 8px 32px rgba(37, 99, 235, 0.25);
}

.div-component:hover {
    cursor: pointer;
    opacity: 1;
    border: 1px solid rgba(158, 188, 255, 0.88);
}

.div-component span {
    position: relative;
    z-index: 1;
    height: 65px;
    align-content: center;
    /* Safari iOS: force own layer so first card content isn't blurred by ::before backdrop-filter */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.div-component .i-ass-img {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.div-component-2::before {
    background: linear-gradient(180deg, #233870, #112658);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.div-component-2 .session-icon-wrap {
    z-index: 99;
}

.div-component-2 .session-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.div-component-2 .session-name {
    font-size: 1.5rem;
}

.div-component-2 .session-name {
    font-size: 1.1rem;
}

.div-component-2 .session-chevron {
    font-size: 1.1rem;
}

/* Non-mobile: grid 3×4 or 4×3, icon over text */
@media (min-width: 768px) {
    #consultsWindow .modal-body, #interChooseWindow .modal-body, #modalitiesWindow .modal-body {
        padding: 40px;
    }
    
    #consultsWindow .div-component-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px 16px;
        justify-items: stretch;
    }

    #interChooseWindow .div-component-container, #modalitiesWindow .div-component-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 16px;
        justify-items: stretch;
    }

    #consultsWindow .div-component, #interChooseWindow .div-component, #modalitiesWindow .div-component {
        width: 100%;
        margin-top: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }

    #consultsWindow .div-component .i-ass-img, #interChooseWindow .div-component .i-ass-img, #modalitiesWindow .div-component .i-ass-img {
        margin: 0;
    }
}

@media (min-width: 992px) {
    #consultsWindow .div-component-container {
        grid-template-columns: repeat(3, 1fr);
    }

    #interChooseWindow .div-component-container {
        grid-template-columns: repeat(4, 1fr);
    }

    #modalitiesWindow .div-component-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    #modalitiesWindow .div-component-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

#div_input_consult_write_icon > i,
#div_input_consult_write_icon > img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

#ta_consult_issue {
    background: transparent;
    color: white;
    border-radius: 10px;
}

/* Power level list: buttons in one row, first selected by default, neon blue focus */
#ul_power_levels {
    list-style: none;
    padding: 10px 20px;
    margin: 0 0 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

#ul_power_levels .li-power-level {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 12px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-size: 1.1rem;
}

#ul_power_levels .li-power-level > div span {
    font-size: inherit;
}

#ul_power_levels .li-power-level:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
}

#ul_power_levels .li-power-level.selected {
    border-color: #0ff;
    box-shadow: 0 0 12px rgba(0, 200, 255, 0.6), 0 0 24px rgba(0, 200, 255, 0.4), inset 0 0 12px rgba(0, 200, 255, 0.1);
    background: rgba(0, 200, 255, 0.08);
}

#ul_power_levels .li-power-level:focus {
    outline: none;
}

#ul_power_levels .li-power-level:focus-visible.selected {
    box-shadow: 0 0 16px rgba(0, 200, 255, 0.8), 0 0 32px rgba(0, 200, 255, 0.5), inset 0 0 12px rgba(0, 200, 255, 0.15);
}

/* Mobile: 2×2 grid when power levels exceed row width */
@media (max-width: 767px) {
    #ul_power_levels {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    #ul_power_levels .li-power-level {
        flex: none;
        min-width: 0;
        font-size: 1.15rem;
    }
}

#close_inter_window {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1002;
    color: white;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
#close_inter_window:hover {
    background: rgb(26 20 69 / 30%);
}

@media (max-width: 767px) {
    #close_inter_window {
        top: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
    }
}

#span_chatwidget_title {
    white-space: normal !important;
    text-shadow: 1px 2px #000;
}

#span_chatwidget_subtitle {
    white-space: normal !important;
    font-size: 22px;
    color: white;
    text-shadow: 2px 1px #07F;
    text-transform: uppercase;
}

/* Session settings: both glass panels inside #div_numbers_consult */
#div_numbers_consult {
    --modal-width: 376px;
    --dial-size: 244px;
    --text: #f3f4ff;
    --frame: #9cc2ff;
    --selected: #ffedb3;
    --font-ui: "Trebuchet MS", "Avenir Next", "Segoe UI", sans-serif;
    color: var(--text);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
}
#div_numbers_consult .sc-svg-definitions {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
#div_numbers_consult .session-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(var(--modal-width), 100%);
    min-width: 0;
    margin: 0 auto;
}
#div_numbers_consult .modal-panel {
    position: relative;
    width: 100%;
    margin: 0;
    flex-shrink: 0;
    overflow: visible;
    border: 1.25px solid var(--frame);
    border-radius: 23px;
    background:
        radial-gradient(ellipse at 7% 0%, #68a2ff30, transparent 52%),
        radial-gradient(ellipse at 99% 99%, #3f7fff25, transparent 48%),
        linear-gradient(135deg, #112e74c2, #0c235aad 52%, #123277bb);
    box-shadow:
        0 0 0 1px #567cf690,
        inset 0 0 3px 1px #a3d2ffb3,
        inset 0 0 24px #3471ff7a,
        0 0 23px #2567fd45,
        0 18px 64px #01082259;
    isolation: isolate;
}
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    #div_numbers_consult .modal-panel {
        background:
            radial-gradient(ellipse at 7% 0%, #6ea8ff25, transparent 50%),
            radial-gradient(ellipse at 98% 100%, #517dff28, transparent 45%),
            linear-gradient(132deg, #153b8b80, #0d23675c 53%, #1a42937a);
        backdrop-filter: blur(4px) saturate(130%);
        -webkit-backdrop-filter: blur(4px) saturate(130%);
    }
}
#div_numbers_consult .modal-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(ellipse 34px 5px at 12% 0%, #d8eeffad, transparent),
        radial-gradient(ellipse 29px 5px at 84% 100%, #98aeff9c, transparent),
        linear-gradient(125deg, #c8dcff0e, transparent 35%, transparent 75%, #a4bcff0c);
}
#div_numbers_consult .panel-title {
    padding: 0;
    margin: 0;
    color: #f4f2ff;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -.4px;
    text-shadow: 0 1px 2px #04112f55, 0 0 12px #c6d7ff14;
    outline: none;
}
#div_numbers_consult .power-panel { padding: 24px 32px 23px; }
#div_numbers_consult .power-panel .panel-title { margin-bottom: 15px; }
#div_numbers_consult #ul_power_levels.power-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
#div_numbers_consult .power-option {
    position: relative;
    display: flex;
    min-width: 0;
    height: 78px;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    margin-top: 0;
    border: 1.5px solid #718bf0a1;
    border-radius: 11px;
    background: linear-gradient(155deg, #7294d62b, #2a499c38 55%, #305cbd38);
    box-shadow: inset 0 1px 4px #a7c4ff26, inset 0 0 13px #2b5cef24, 0 0 0 1px #4568ce26;
    color: var(--text);
    font-family: var(--font-ui);
    letter-spacing: normal;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
#div_numbers_consult .option-title {
    color: #f6f1ff;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -.2px;
}
#div_numbers_consult .bolts {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: 24px;
}
#div_numbers_consult .bolts svg {
    display: block;
    width: 20px;
    height: 24px;
    filter: drop-shadow(0 0 3px #f7c87f4a);
}
#div_numbers_consult .power-option.selected,
#div_numbers_consult .power-option[aria-pressed="true"] {
    border-color: var(--selected);
    background: linear-gradient(140deg, #b9c5dd32, #526ba840 54%, #93a6c138);
    box-shadow:
        0 0 0 1px #fff2c963,
        0 0 12px #ffe2a269,
        inset 0 0 12px #fff1c728,
        inset 0 0 2px 1px #fff0c763;
}
#div_numbers_consult .duration-panel {
    width: calc(100% - 10px);
    padding: 20px 25px 18px;
    text-align: center;
}
#div_numbers_consult .duration-panel .panel-title {
    white-space: nowrap;
    font-size: 21.5px;
}
#div_numbers_consult .dial-wrap {
    position: relative;
    width: min(var(--dial-size), 100%);
    aspect-ratio: 1;
    margin: 0 auto;
}
#div_numbers_consult .session-dial {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 50%;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}
#div_numbers_consult .session-dial:focus-visible {
    outline: 2px solid #c0edff;
    outline-offset: 1px;
}
#div_numbers_consult .session-dial.is-dragging { cursor: grabbing; }
#div_numbers_consult .dial-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
#div_numbers_consult .dial-readout {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-top: 3px;
    pointer-events: none;
    text-shadow: 0 0 14px #c8e1ff1c;
}
#div_numbers_consult .hours-number {
    font-size: 50px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -1.5px;
    font-variant-numeric: tabular-nums;
    color: #f3f4ff;
}
#div_numbers_consult .hours-picker {
    position: relative;
    display: grid;
    place-items: center;
    width: 94px;
    height: 80px;
    border-radius: 18px;
    pointer-events: auto;
    touch-action: manipulation;
}
#div_numbers_consult #hour_select.hours-select {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    cursor: pointer;
    touch-action: manipulation;
    font-family: var(--font-ui);
    font-size: 18px;
    color: #f3f4ff;
    background: #102b68 !important;
    box-shadow: none !important;
    color-scheme: dark;
    -webkit-appearance: menulist;
    appearance: auto;
}
#div_numbers_consult #hour_select option {
    font-family: var(--font-ui);
    font-size: 18px;
    color: #f3f4ff;
    background: #102b68;
}
#div_numbers_consult .hours-picker:focus-within {
    outline: 2px solid #c0edff;
    outline-offset: 3px;
    background: #528cff0b;
}
#div_numbers_consult .hours-chevron {
    position: absolute;
    left: calc(50% - 6px);
    bottom: 0;
    width: 12px;
    height: 8px;
    fill: none;
    stroke: #bce4ff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .7;
    pointer-events: none;
}
#div_numbers_consult .hours-unit {
    position: relative;
    margin: 0;
    font-size: 20px;
    line-height: 26px;
    pointer-events: none;
    color: #f3f4ff;
}
#div_numbers_consult .modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(260px, 100%);
    gap: 12px;
    margin: 16px auto 0;
}
#div_numbers_consult .action-button {
    position: relative;
    min-width: 0;
    height: 44px;
    margin-top: 0;
    padding: 0 12px;
    overflow: hidden;
    border-radius: 22px;
    color: #faf5ff;
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
    text-shadow: 0 1px 4px #1238665e;
    cursor: pointer;
    transition: filter 150ms ease, transform 150ms ease;
}
#div_numbers_consult .action-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(#ffffff16, transparent 45%);
    pointer-events: none;
}
#div_numbers_consult .submit-button {
    border: 1.3px solid #e28aff;
    background: linear-gradient(165deg, #af22f6, #820be5 48%, #6b0bd7 77%, #8b22f0);
    box-shadow: inset 0 1px 3px #f0abffa6, inset 0 -1px 5px #a638ffaa, 0 0 12px #8915ff6b;
}
#div_numbers_consult .close-button {
    border: 1.3px solid #5aceff;
    background: linear-gradient(165deg, #049ff7, #0074ed 50%, #0961e0 78%, #0677ef);
    box-shadow: inset 0 1px 3px #8ee4ffa6, inset 0 -1px 5px #239effaa, 0 0 12px #087eff64;
}
#div_numbers_consult .action-button:active {
    transform: translateY(1px);
    filter: brightness(.98);
}
@media (hover: hover) {
    #div_numbers_consult .hours-picker:hover { background: #528cff12; }
    #div_numbers_consult .hours-picker:hover .hours-chevron { opacity: 1; }
    #div_numbers_consult .power-option:hover {
        background-color: #739afa21;
        border-color: #aec8ff;
    }
    #div_numbers_consult .power-option.selected:hover,
    #div_numbers_consult .power-option[aria-pressed="true"]:hover { border-color: #fff8d8; }
    #div_numbers_consult .action-button:hover { filter: brightness(1.12); }
}
@media (max-width: 359px) {
    #div_numbers_consult .power-panel { padding: 24px 24px 22px; }
    #div_numbers_consult .power-panel .panel-title { font-size: 21px; }
    #div_numbers_consult .duration-panel { padding-right: 20px; padding-left: 20px; }
    #div_numbers_consult .duration-panel .panel-title { font-size: 19px; }
    #div_numbers_consult .option-title { font-size: 18px; }
}
@media (max-height: 659px) {
    #div_numbers_consult { --dial-size: 220px; }
    #div_numbers_consult .session-form { gap: 14px; }
    #div_numbers_consult .power-panel { padding-top: 20px; padding-bottom: 20px; }
    #div_numbers_consult .power-panel .panel-title { margin-bottom: 12px; }
    #div_numbers_consult .power-option { height: 70px; }
    #div_numbers_consult .duration-panel { padding-top: 18px; padding-bottom: 16px; }
    #div_numbers_consult .hours-unit { margin-top: -12px; }
    #div_numbers_consult .modal-actions { margin-top: 12px; }
}
@media (max-height: 619px) {
    #div_numbers_consult { --dial-size: 180px; }
    #div_numbers_consult .session-form { gap: 12px; }
    #div_numbers_consult .power-panel { padding-top: 18px; padding-bottom: 18px; }
    #div_numbers_consult .panel-title { line-height: 28px; }
    #div_numbers_consult .power-option { height: 62px; gap: 0; }
    #div_numbers_consult .duration-panel { padding-top: 16px; padding-bottom: 14px; }
    #div_numbers_consult .duration-panel .panel-title { font-size: 20px; }
    #div_numbers_consult .hours-number { font-size: 43px; }
    #div_numbers_consult .hours-unit { margin-top: -8px; font-size: 18px; line-height: 24px; }
    #div_numbers_consult .modal-actions { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    #div_numbers_consult .power-option,
    #div_numbers_consult .action-button {
        transition: none;
    }
}

#consultWindowChoice.session-settings-open .modal-dialog {
    max-width: 420px;
}
#consultWindowChoice.session-settings-open .modal-content {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
}
#consultWindowChoice.session-settings-open .modal-body {
    padding: 8px;
    background: transparent;
    overflow: visible;
}
body.session-settings-open .modal-backdrop.show {
    background-color: rgba(3, 16, 54, 0.42);
    opacity: 1;
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
}