.starter-template {
    padding: 3rem 1.5rem;
    text-align: center;
}

div#searchDiv {
    display: none;
}

table.center {
    margin-left: auto;
    margin-right: auto;
}

.subtotal-report {
    /*background-color: #99ff99;*/
    background-color: #b3ffb3;
}

.paginationNum {
    font-size: 1.01rem;
}

.text-font-subtitle {
    font-family: "Times New Roman", Serif, sans-serif;
}

.td-40s {
    width: 42%;
}

.table-700 {
    width: 700px;
}

.table-70 {
    width: 70%;
}

.table-90 {
    width: 90%;
}

.table-100 {
    width: 100%;
}

.table-custom-px {
    width: 880px;
}

.error-bg {
    background-color: lightpink;
}

.ok-bg {
    background-color: #fff;
}

.searchDiv {
    padding: 2rem 1.0rem;
}

.white-space-pre-line {
    white-space: pre-line;
}

.blue-text {
    color: blue;
}

.red-text {
    color: red;
}

.dark-red-text {
    color: darkred;
}

.pink-text {
    color: #cc0022;
}

.pink-text-2 {
    color: #be4bdb;
}

.green-text {
    color: green;
}

.white-text {
    color: #fff;
}

.badge-float {
    transform: translate(10%, -20%) !important;
    font-size: 0.6em;
}

.light-gray-bg-1 {
    background-color: #f2f2f2;
}

.light-gray-bg-2 {
    background-color: #d9d9d9;
}

.light-gray-bg-3 {
    background-color: #e8e8e8;
}


.light-blue-bg-1 {
    /*background-color: #f0f7fd;*/
    background-color: #daecfc;
}

.light-blue-bg-2 {
    background-color: #f0f7fd;
}

.light-blue-bg-3 {
    background-color: #f5f8ff;
}

.light-blue-bg-4 {
    background-color: #f0f7fd;
}

.light-blue-bg-5 {
    background-color: #f5f8ff;
}

.light-blue-bg-6 {
    background-color: #dceefa;
}

.light-blue-bg-7 {
    background-color: #f0f8fd;
}

.light-blue-bg-8 {
    background-color: #e6f2ff;
}

.light-blue-bg-9 {
    background-color: #cce6ff;
}

.light-blue-bg-10 {
    background-color: #bfe2fb;
}

.light-dark-blue-bg-1 {
    background-color: #a9cce3;
}

.light-blue-text {
    color: #80d4ff;
}

.light-green-bg-1 {
    background-color: #e9fce9;
}

.light-green-bg-2 {
    background-color: #d2f9d2;
}

.light-green-bg-3 {
    background-color: #f2f4f0;
}

.light-pink-bg-1 {
    background-color: #ffe6ff;
}


.light-pink-bg-2 {
    background-color: #ffccff;
}

.light-purple-text {
    color: #DEA4ED;
}

.light-yellow-bg-1 {
    background-color: #feffe6;
}

.light-yellow-bg-2 {
    background-color: #ffffe6;
}

.report-header {
    background-color: #146094;
    color: #f2f2f2;
}

.report-total {
    background-color: #beddf3;
}

.grand-total {
    background-color: #00e6e6;
}

.script-css {
    font-family: "Times New Roman", sans-serif;
    font-size: 1.25em;
    width: 99%;
    border: 1px solid #eee;
    padding: 15px;
    line-height: 28px;
}

.direction-css {
    font-family: "Times New Roman", sans-serif;
    font-size: 1.05em;
    width: 99%;
    padding: 15px;
    /*border: 1px solid #eee;*/
    line-height: 24px;
}

.underline-text {
    text-decoration: underline;
}

.script-header {
    font-size: 1.4em;
}

.mute-style {
    font-size: 1.4em;
}

.unmute-style {
    font-size: 1.5em;
}



.sale-text {
    font-size: 1.3em;
    color: rgb(29, 33, 41);
    font-weight: 600;
}

.errmsg {
    font-size: 1.3em;
    color: red;
}

.mrgint-right-1 {
    margin-right: 0.5em;
}

.margin-center {
    margin: 0 auto;
}

.display-office {
    padding-top: 10px;
    padding-bottom: 10px;
}

.gray-text {
    color: #5f666d;
}

.clear {
    clear: both;
}

[contenteditable="true"] {
    padding: 3px;
    outline: 1px dashed #CCC;
}

[contenteditable="true"]:hover {
    outline: 1px dashed #0090D2;
}

.paymentClass {
    width: 85%;
}

.bold-text-400 {
    font-weight: bold !important;
}

.yellow-text {
    color: yellow;
}

.editinhousepay {
    font-size: 1.4em !important;
}

.totalSaleDiv {
    width: 370px;
    display: inline-block;
    background-color: #f0f8fd;
    border: 1px solid #ddd;
    margin-left: 2px;
    padding: 5px;
    height: 200px;
    border-radius: 5px;

}

.sales-view {
    margin-bottom: 6px;
    font-size: 1.05em;
}

.messageDiv {
    width: 370px;
    display: inline-block;
    background-color: #f0f8fd;
    border: 1px solid #ddd;
    margin-left: 2px;
    padding: 5px;
    height: 150px;
    border-radius: 5px;

}

.sevenDaysSaleDiv {
    width: 500px;
    display: inline-block;
    background-color: #ffe6e9;
    border: 1px solid #ddd;
    margin-left: 5px;
    padding: 5px;
    height: 200px;
}

.calDiv {
    margin: 10px;
    border: 2px solid lightblue;
    padding: 20px;
}

input[type=text]:focus,
input[type=email]:focus {
    background-color: lightyellow;
    border: 1px solid #ddd;
    color: #800000;
    font-weight: 500;
}

.dark-red-text-2 {
    color: #800000;
}

textarea {
    padding: 5px 8px;
    box-sizing: border-box;
    border: 1px solid #daeafa;
    border-radius: 5px;
    background-color: #ebf3fa;
    resize: none;
}

textarea#sms_content {
    margin-top: 0.5em;
    width: 100%;
    background-color: #fff;
}

div#nav-email {
    margin-top: 0.5em;
    width: 100%;
    background-color: #fff;
    font-size: 1.0em;
}

.black-text {
    color: rgb(29, 33, 41);
}

.light-silver-bg {
    background-color: #f2f2f2;
}

.light-silver-bg-2 {
    background-color: #f5f5f5;
}

.white-bg {
    background-color: #ffffff;
}

.note-line-height {
    line-height: 21px;
}

.bigger-font {
    font-size: 1.1em;
}

.bigger-font-1 {
    font-size: 1.05em;
}

.bigger-font-2 {
    font-size: 1.2em;
}

.bigger-font-3 {
    font-size: 1.3em;
}

.bigger-font-4 {
    font-size: 1.5em;
}

.bigger-font-5 {
    font-size: 2.5em;
}

.bigger-font-6 {
    font-size: 1.95em;
}

#searchDiv {
    margin-bottom: 18px;
}

.td-desc {
    color: rgb(29, 33, 41);
}

.td-desc-bg {
    background-color: #e8f3fe;
}

.bold-text {
    font-weight: bold;
}

.bold-text-title {
    font-weight: 400;
    font-size: 1.45em;
    margin-bottom: 0.5em;
}

.google-chart {
    padding-left: 45px !important;
}

.bold-text-300 {
    font-weight: 300;
}

.bold-text-400 {
    font-weight: 400;
}

.bold-text-500 {
    font-weight: 500;
}

.bold-text-600 {
    font-weight: 600 !important;
}


.bold-text-700 {
    font-weight: 700;
}

.center-text {
    text-align: center;
}

.vcenter-text {
    vertical-align: middle;
}

.left-text {
    text-align: left;
}

.right-text {
    text-align: right;
}

.text-top {
    vertical-align: top
}

.today-appt {
    background-color: #fbfcfc !important;
}

.sdset-appt {
    background-color: #00FFFF !important;
}

.ponter-cursor {
    cursor: pointer;
}

.default-cursor {
    cursor: default;
}

div.officehour {
    width: 90%;
}



.slot-available {
    background-color: #aed6f1;
}

.commission-rate {
    margin-bottom: 8px;
}

.padding-btn-sm {
    padding: 0.15rem 0.40rem 0.10rem;
}

.padding-btn-default {
    padding: 0.35rem 0.54rem;
    border-radius: 5px;
}

.dark-blue {
    color: darkblue;
}

.dark-blue-2 {
    background-color: #A9CCE4 !important;
}

.dark-gray {
    color: #666666;
}

.dark-gray-1 {
    color: #333333;
}

.check-color {
    color: #6bb300;
}

.check-color-1 {
    color: #ff9966;
}

.check-color-2 {
    color: #009900;
}

.number-icon {
    color: #008ae6;
}

.sale-calendar {
    color: #d580ff;
}

.triangle-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #7acc00;
}

.triangle-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid firebrick;
}

.call-a-btn {
    background-color: #1e6b94;
    color: #f5f5f5;
    padding: 4px 6px;
    border-radius: 5px;
}

a.call-a-btn:hover {
    background-color: #1c6288;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.make-call {
    font-size: 0.94em;
    font-weight: 600;
    color: #fff5e6;
    background-color: #ffa31a;
}

a.make-call:hover {
    color: #fff5e6;
}

.inline-display {
    display: inline-block;
}

.inline-display-width {
    width: 100%;
}

.inline-display-tab {
    width: 25%;
}

.auto-height {
    height: auto;
}

.padding-left {
    padding-left: 0.95em;
}

.padding-bottom {
    padding-bottom: 10.0em;
}

.padding-bottom-2 {
    padding-bottom: 10.0px;
}

.modal-footer-margin-top {
    margin-top: 5em;
}

.plus {
    color: #239b56;
}

.minus {
    color: #e74c3c;
}

.modal-footer-margin-top-sm {
    margin-top: 2em;
}

.small-font {
    font-size: 0.95em;
}

.note-title {
    display: inline-block;
    text-align: right;
    vert-align: top;
}

.select-text {
    color: rgb(29, 33, 41);
}

.padding-1 {
    padding-top: 3px;
    padding-bottom: 3px;
}

.padding-3 {
    padding: 3px;
}

.smaller-font {
    font-size: 0.96em;
    font-weight: 500;
}

.smaller-font-1 {
    font-size: 0.98em;
    font-weight: 500;
}

.smaller-font-2 {
    font-size: 0.88em;
}

.smaller-font-3 {
    font-size: 0.8em;
}

.font-family-1 {
    font-family: Helvetica, sans-serif;
}

#second_step .TextBoxDiv {
    margin-left: 5px;
    margin-top: 15px;
}

.noteTextbox {
    width: 120px;
}

.amountTextbox {
    width: 120px;
}

#first_step input,
#first_step select {
    color: #4d4d4d;
    border: 1px solid #ccc;
    font-weight: bold;
    width: 190px;
    height: 35px;
    padding: 5px 8px;
    margin: 3px 10px 3px 0;
    float: left;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

#first_step input:focus,
#first_step select:focus {
    border: 1px solid #a90329;
    color: #a90329;
}


#second_step input.error,
#second_step select.error {
    border: 1px solid red;
}

#second_step input.valid,
#second_step select.valid {
    border: 1px solid #1FFF00;
}

#second_step input,
#second_step select {
    color: #4d4d4d;
    border: 1px solid #ccc;
    font-weight: bold;
    width: 190px;
    height: 35px;
    padding: 5px 8px;
    margin: 3px 10px 3px 0;
    float: left;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

#second_step input:focus,
#second_step select:focus {
    border: 1px solid #a90329;
    color: #a90329;
}

#third_step input.error,
#third_step select.error {
    border: 1px solid red;
}

#third_step input.valid,
#third_step select.valid {
    border: 1px solid #1FFF00;
}

#third_step input:focus,
#third_step select:focus {
    border: 1px solid #a90329;
    color: #a90329;
}

#third_step input,
#third_step select {
    color: #4d4d4d;
    border: 1px solid #ccc;
    font-weight: bold;
    font-size: 11px;
    width: 194px;
    height: 35px;
    padding: 5px 8px;
    margin: 3px 10px 3px 0;
    float: left;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

#fourth_step h4 {
    color: #666;
    font-size: 12px;
}

h2.acc_trigger {
    background: url("/app/assets/img/h2_trigger_a.gif") no-repeat scroll 0 0 transparent;
    float: left;
    font-size: 1.8em;
    font-weight: normal;

    height: 40px;
    line-height: 40px;
    margin: 0 0 5px 5px;
    padding: 0;
    width: 500px;
}

h2.acc_trigger a {
    color: #FFFFFF;
    display: block;
    padding: 0 0 0 50px;
    text-decoration: none;
}

h2.acc_trigger a:hover {
    color: #CCCCCC;
}

.acc_container {
    background: none repeat scroll 0 0 #F0F0F0;
    border: 1px solid #D6D6D6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    clear: both;
    font-size: 1.5em;
    margin: 0 0 5px 5px;
    overflow: hidden;
    padding: 0;
    width: 500px;
    /*width: 400px;*/
}

.acc_container .block {
    padding-left: 20px;
}

.block p {
    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    height: 60px;
}

.acc_container h3 {
    border-bottom: 1px dashed #CCCCCC;
    font: 1.1em normal Georgia, "Times New Roman", Times, serif;
}

.active {
    background-position: right 12px;
}

.textHeader {
    color: blueviolet;
}


#inhouse_step input.error,
#inhouse_step select.error {
    border: 1px solid red;
}

#inhouse_step input.valid,
#inhouse_step select.valid {
    border: 1px solid #1FFF00;
}

#inhouse_step input,
#inhouse_step select {
    color: #4d4d4d;
    border: 1px solid #ccc;
    font-weight: bold;
    width: 190px;
    height: 35px;
    padding: 5px 8px;
    margin: 3px 10px 3px 0;
    float: left;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

#inhouse_step input:focus,
#inhouse_step select:focus {
    border: 1px solid #a90329;
    color: #a90329;
}

.acc_container input.error,
.acc_container select.error {
    border: 1px solid red;
}

.acc_container input.valid,
.acc_container select.valid {
    border: 1px solid #1FFF00;
}

.acc_container input:focus,
.acc_container select:focus {
    border: 1px solid #a90329;
    color: #a90329;
}

.acc_container input,
.acc_container select {
    background: url('/script/images/input.png') no-repeat;
    color: #888;
    border: 1px solid #ccc;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    font-size: 11px;
    width: 300px;
    height: 35px;
    padding: 0 25px;
    margin: 3px 10px 3px 0;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.acc_container select {
    padding: 8px 0 5px 20px;
    width: 200px;
}

.acc_container option {
    padding: 0 15px;
}


h3.acc_trigger {
    background: url("/app/assets/img/h2_trigger_a.gif") no-repeat scroll 0 0 transparent;
    float: left;
    font-size: 1.5em;
    font-weight: normal;

    height: 40px;
    line-height: 40px;
    margin: 0 0 5px 5px;
    padding: 0;
    width: 500px;
}

h3.acc_trigger a {
    color: #FFFFFF;
    display: block;
    padding: 0 0 0 50px;
    text-decoration: none;
}

h3.acc_trigger a:hover {
    color: #CCCCCC;
}


.refundnotes {
    width: 260px !important;
}

.inhousepay {
    font-size: 1.4em !important;
}

.ui-draggable,
.ui-droppable {
    background-position: top;
}

div#message_log {
    color: rgb(29, 33, 41);
    font-family: 'Share Tech Mono', 'Courier New', Courier, fixed-width;
    border: 1px solid #686865;
    width: 99%;
    height: 12em;
    margin-top: 1em;
    text-align: left;
    padding: 0.6em;
    float: left;
    overflow: auto;
    border-radius: 5px;
}

div#message_log p {
    color: rgb(29, 33, 41);
    font-family: 'Share Tech Mono', 'Courier New', Courier, fixed-width;
    font-size: 1em;
    line-height: 1.1em;
    margin-left: 1.1em;
    text-indent: -1.25em;
    width: 98%;
}

.table-center {
    margin: 0 auto !important;
    float: none;
}

.required-field {
    color: red;
    font-size: 1.2em;
    font-weight: bold;
}

div#thenotes {
    margin-top: 1.0em;
}

div#thenotes #despnotes {
    font-weight: 600;
    vertical-align: top;
}

div#thenotes button#agentdisposbtn {
    margin-left: 3.5em;
}

.no-border {
    border: none;
    border-top: none;
}

div#sms_btn_section {
    display: inline-block;
    margin-top: 0.3em;
}

div#email_btn_section {
    display: inline-block;
    margin-top: 0.5em;
}

div#mail_subject_id {
    display: inline-block;
    margin-bottom: 0.5em;
}

p {
    margin-bottom: 0.5em !important;
}

.display-cal-date {
    display: inline-block;
    font-size: 1.02em;
    margin-top: 11px;
    color: rgb(29, 33, 41);
}

.initial-bg {
    background-color: #ddffcc;
}

.default-bg {
    background-color: #fdfefe;
}

.show-bg {
    background-color: #cdfed9;
}

.sale-bg {
    background-color: #33cc33;
}

.lostsale-bg {
    background-color: #ffb3bf;
}

.set-bg {
    background-color: #fdfefe !important;
}

.pre-confirm-bg {
    background-color: #fefecd;
}

.confirm-bg {
    background-color: #ffe4b3 !important;
}

.confirm-ltm-bg {
    background-color: #ffa500 !important;
}

.double-confirm-bg {
    background-color: #ffff33;
}

.noshow-bg {
    background-color: #5479ed;
}

.cancel-bg {
    background-color: #5dade2;
}

.dnc-bg {
    background-color: #ffad99;
}

.nq-bg {
    background-color: #ff8080;
}

.lm-bg {
    background-color: #ecffb3;
}

.select-option {
    padding: 5px;
    border: solid 1px #0077B0;
    outline: 0;
    font-size: 1.01em;
    line-height: 1.21em;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #C6ECFF), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #C6ECFF 1px, #FFFFFF 25px);
}

select {
    padding: 8px;

    border: none !important;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    outline: 0;
    cursor: pointer;
    font-size: 1.01em;
    line-height: 1.21em;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #C6ECFF), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #C6ECFF 1px, #FFFFFF 25px);
}

select:focus {
    line-height: 1.21em;
}

.tooltip-inner {

    padding: 2px 7px;
    color: #55AAAA;
    text-align: center;
    font-weight: 900;
    background: -webkit-gradient(linear, left top, left 25, from(#F4F4F4), color-stop(4%, #B4C8D6), to(#F4F4F4));
    background: -moz-linear-gradient(top, #F4F4F4, #B4C8D6 1px, #F4F4F4 25px);
    border: 1px solid #55AAAA;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}

.table>tbody>tr>td {
    /*vertical-align: middle;*/
}

.btn-xs {
    padding: 6px;
    border: none;
    border-radius: 4px;
}

.skill-details {
    margin-top: 5px;
    margin-bottom: 5px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.chat-status {
    font-size: 0.9em;
    font-weight: normal;
    padding: 6px;
}

.chat-button {
    padding: 4px 6px;
    font-size: 0.88em;
}

.chat-striped {
    background-color: #F9F9F9;
}

.group-chat {
    height: 350px;
    border: 1px solid #ccc;
    overflow-y: scroll;
    margin-bottom: 24px;
    padding: 16px;
}

.even {
    background: #eeeeee;
}

table.center {
    margin-left: auto;
    margin-right: auto;
}

input[type=text],
input[type=email],
input[type=password],
input[type=date] {
    padding: 6px 10px;
    margin: 3px 0;
    border: none !important;
    box-sizing: border-box;

    background-color: #ebf3fa;
    border-radius: 5px;
}

input[type=date] {
    cursor: pointer;
}

.tom-brady {
    border: #ccffcc 1px solid;
    background-color: lightyellow;
}

.emm {
    border: #bff3a8 1px solid;
    /*background-color:  #eafaf1;*/
    background-color: #d6f5e3;
}

.input-css {
    border: #dddddd 1px solid;
    padding: 3px;
}

/* the toast begins from here */
/* Toast container */
.custom-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1055;
}

/* Toast */
.custom-toast {
    min-width: 250px;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #212529;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.4s ease;
}

.custom-toast.show {
    opacity: 1;
    transform: translateX(0);
}

/* Close button */
.custom-toast .close-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #555;
    margin-left: 1rem;
}

.custom-toast .close-btn:hover {
    color: #000;
}

/* Status styles (thicker border + light background) */
.custom-toast.success {
    border-left: 6px solid #28a745;
    background: #e9f7ef;
    /* light green tint */
}

.custom-toast.error {
    border-left: 6px solid #dc3545;
    background: #fdecea;
    /* light red tint */
}

.custom-toast.info {
    border-left: 6px solid #17a2b8;
    background: #e8f6f9;
    /* light blue tint */
}

.custom-toast.warning {
    border-left: 6px solid #ffc107;
    background: #fff9e6;
    /* light yellow tint */
}

/* the toast end here */

/* updated sms section in leads */
.sms-panel-container {
    /* Ensure the panel takes up the available vertical space in its parent column */
    display: flex;
    flex-direction: column;
    height: auto;
    background-color: #fff;
    /* White background for the panel */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    /* Increased radius */
    overflow: hidden;
    /* Contains internal elements */
}

/* Apply larger border-radius to inputs, buttons, and input-groups */
.form-control,
.btn,
.input-group-text {
    border-radius: 8px;
    /* !important; */
    /* Apply a consistent, larger radius */
}

.custom-outline-light {
    border: 1px solid #ced4da;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* FIX: Select2 container styling - now it has the full width */
.select2-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Select2 Styling Overrides to match the custom height */
/* === General Fix for Select2 single === */
.select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    border-radius: 8px !important;
    border: 1px solid #ced4da !important;
    padding: 0 30px 0 12px !important;
    /* left & right spacing */
    box-sizing: border-box;
    line-height: normal !important;
}

/* Default size (Bootstrap normal input ~38px) */
.select2-container--default .select2-selection--single {
    height: 2.375rem;
    /* !important; */
    /* ~38px */
}

/* Small size (Bootstrap form-control-sm ~31px) */
.form-control-sm~.select2 .select2-selection--single,
.select2-container--default .select2-selection--single.form-control-sm {
    height: 1.9375rem !important;
    /* ~31px */
    font-size: 0.875rem !important;
    border-radius: 6px !important;
}

/* Ensure text truncation still works */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
}

/* CRITICAL FIX: Ensure the arrow is absolutely positioned so it doesn't affect rendered text width */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 0;
    right: 5px;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


.sms-editor-container {
    padding-inline: 16px;
    padding-top: 16px;
    /* background-color: #f8f9fa; */
}

/* Custom Styling for Integrated Icons */
.input-icon-wrapper {
    position: relative;
}

#search_input_wrapper .form-control {
    padding-left: 35px !important;
}

#filter_dropdown_container .form-control {
    padding-right: 35px !important;
}

.input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 1.1rem;
    z-index: 10;
}

#search_icon {
    left: 12px;
    pointer-events: none;
}

#filter_icon {
    right: 12px;
    pointer-events: auto;
    cursor: pointer;
}

/* Filter Dropdown Container */
#filter_dropdown_container {
    position: relative;
}

#filter_overlay {
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 8px;
    padding: 15px;
    z-index: 9999;
    display: none;
}

/* Style for filter options (checkboxes) */
.filter-option {
    display: flex;
    align-items: center;
    /* Ensures vertical centering */
    padding: 8px 0;
    position: relative;
}

.filter-option .form-check-input {
    /* Override default Bootstrap positioning that causes scattering */
    position: static !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    flex-shrink: 0;
    /* Prevents shrinking */
}

.filter-option+.filter-option {
    margin-top: 5px;
    padding-top: 10px;
    /* Increased padding top for border visual separation */
    border-top: 1px solid #f0f0f0;
}

.filter-option label {
    margin-left: 10px;
    margin-bottom: 0;
    flex-grow: 1;
    cursor: pointer;
}

/* Style for buttons in the overlay */
#filter_overlay .btn {
    margin-top: 10px;
    border-radius: 8px;
}

/* Custom style for the new template action buttons to match the height of send/clear */
.template-action-btn {
    font-size: 0.875rem;
    /* Match btn-sm size */
    padding: 0.5rem 0.75rem;
    /* Match btn-sm padding */
    /* Ensure the button does not grow to fill space */
    flex-grow: 0 !important;
    flex-shrink: 1;
}

/* Truncate long option text */
.select2-container .select2-selection--single .select2-selection__rendered {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    /* ensure truncation happens inside box */
}

.select2-container .select2-dropdown {
    /* max-width: 160px !important; */
    /* or whatever width works for you */
}

.select-wrapper {
    min-width: 0;
}

.select-wrapper .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}

.select-wrapper .select2-selection__rendered {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* For sms_template select only */
.select2_160 {
    max-width: 160px !important;
}

/* #sms_template .select2-dropdown {
    width: 160px !important;
    } */

/* updated sms section in leads ends here */

/* Styling for the contenteditable div to make it look like a textarea */
/* --- 1. Wrapper (the visible bordered box) --- */
.editor-wrapper {
    position: relative;
    margin-bottom: 5px;
    min-height: 120px;
    max-height: 250px;
    overflow: visible;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: white;
    padding: 0;
    /* so content-editor controls its own padding */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Hover effect */
.editor-wrapper:hover {
    border-color: #80bdff;
}

/* Focus glow when clicking inside the editor */
.editor-wrapper:focus-within {
    border-color: #66afe9;
    box-shadow: 0 0 0 3px rgba(102, 175, 233, 0.25);
}

/* --- 2. Inner contenteditable div --- */
.content-editor {
    /* Remove its own border so wrapper shows the boundary */
    border: none !important;
    border-radius: 0;
    outline: none !important;
    box-shadow: none !important;
    min-height: 100px;
    height: auto;
    padding: 0.75rem;
    /* keep inner text comfortable */
    background-color: transparent;
    overflow-y: auto;
    resize: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    /*caret-color: #000; /* make caret visible on white bg */
}

/* --- 3. Placeholder text styling --- */
.content-editor:empty:before {
    content: attr(placeholder);
    color: white;
    pointer-events: none;
}

.content-editor:focus:before {
    content: none;
}

.content-editor:empty {
    min-height: 1em;
    /* ensures there's space for the caret */
    text-align: left;
    /* force caret to left */
    vertical-align: top;
    /* prevent vertical centering */
}

/* Fix: Override external global hover rule for this specific element */
.content-editor[contenteditable="true"] {
    padding: 3px;
    outline: none !important;
}

.content-editor[contenteditable="true"]:hover {
    outline: none !important;
}

/* Style for banned words validations */
div.js-editor-wrapper.oa-error {
    border-color: rgba(255, 100, 100, 0.8);
    border-width: 1.5px;
}

/* Style for the highlighted word, now inside the editable div */
.typo-highlight {
    text-decoration: underline wavy red;
    cursor: pointer;
    position: relative;
    background-color: rgba(255, 0, 0, 0.1);
    border-radius: 2px;
    z-index: 5;
}

/* Tooltip for showing suggestions on hover (The Popup) */
.typo-highlight:hover::after {
    content: attr(data-suggestions);
    position: absolute;
    bottom: 100%;
    /* Default: places it ABOVE the word */
    left: 50%;
    transform: translateX(-50%);
    background-color: #343a40;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 9999;
    font-size: 0.8rem;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Add transition for smoother appearance */
    transition: all 0.2s ease-in-out;
    opacity: 0;
    /* Hidden by default */
    visibility: hidden;
}

/* Make tooltip visible on hover */
.typo-highlight:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Class to position tooltip BELOW the word */
.typo-highlight.tooltip-below:hover::after {
    bottom: unset;
    /* Remove the bottom property */
    top: 100%;
    /* Position it 100% from the TOP of the word */
}

/* Tooltip near the left edge: align left and push slightly right */
.typo-highlight.tooltip-edge-left:hover::after {
    left: 0;
    /* Align left edge of tooltip with left edge of highlight span */
    transform: translateX(0);
    /* Do not shift left/right */
}

/* Tooltip near the right edge: align right and push slightly left */
.typo-highlight.tooltip-edge-right:hover::after {
    left: 100%;
    /* Align left edge of tooltip with right edge of highlight span */
    transform: translateX(-100%);
    /* Shift left by 100% of tooltip width */
}

/* newly aded */
/* Styling for the highlighted word */
.typo-highlight {
    cursor: pointer;
    position: relative;
    text-decoration: underline wavy red;
}

/* Tooltip container structure */
.typo-highlight::after {
    content: attr(data-clickable-suggestions);
    /* Render the clickable suggestions HTML */
    white-space: nowrap;
    /* ... rest of your tooltip positioning and styling ... */
    display: none;
    /* Hide by default */
}

.typo-highlight:hover::after {
    display: block;
    /* Show on hover */
}

/* Styling for the clickable suggestions */
.typo-suggestion {
    cursor: pointer;
    padding: 0 5px;
    color: #fff;
    /* or your text color */
    background: #555;
    /* or your background color */
    border-radius: 3px;
    margin: 0 2px;
}

.typo-suggestion:hover {
    background: #337ab7;
    /* Highlight on hover */
}

.typo-separator {
    color: #ccc;
    padding: 0 2px;
}

/* ended */

/* --- 3. Styles for the Emoji Selector Button (Bottom Right) --- */
.emoji-selector-container {
    position: absolute;
    bottom: 3px;
    right: 3px;
    z-index: 10;
}

.emoji-selector-btn {
    background-color: #E8F3FF;
    border: 1px solid #E8F3FF;
    border-radius: 10px;
    /* More rounded */
    padding: 4px 4px;
    font-size: 0.9rem;

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #333;
    transition: background-color 0.2s, border-color 0.2s;
}

.emoji-selector-btn:hover {
    background-color: #D9E9FF;
    border-color: #D9E9FF;
}

.emoji-selector-btn span {
    font-size: 1rem;
    filter: grayscale(0%) hue-rotate(0deg) saturate(150%);
    margin-right: 2px;
}

.emoji-selector-btn i {
    font-size: 0.5rem;
    color: #333;
}

/* --- 4. Styles for the Emoji Picker Popup (Compact Look) --- */

.emoji-popup {
    position: absolute;
    /* Align the top of the popup to the bottom edge of the editor-wrapper */
    top: 100%;
    right: 0;
    /* Added 12px margin-top for separation */
    margin-top: 5px;

    /* UPDATED: Set width to 60% of the editor container */
    width: 60%;
    max-width: 100vw;
    padding: 10px;
    background-color: white;

    /* Simplified border radius since it's now below the box */
    border-radius: 8px;

    /* Figma Shadow */
    box-shadow: 0 10px 17px 0 rgba(151, 151, 151, 0.25);

    z-index: 30;
    display: none;
}

.emoji-popup.open {
    display: block;
}

.emoji-search-bar {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid #ddd;
    /* Less rounded border (6px) */
    border-radius: 6px;
    box-sizing: border-box;
    /* Icon setup */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236c757d' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.1 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.9 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 14px;
    /* Add a little more left padding so placeholder starts after icon */
    padding-left: 36px;
}

.emoji_search.emoji-search-bar {
    padding: 8px 12px 8px 34px;
    /* top right bottom left */
    background-position: 12px center;
    background-size: 14px;
    box-sizing: border-box;
}

/* .emoji-grid {
    display: grid; */
/* Increased to 8 columns for higher density */
/* grid-template-columns: repeat(8, 1fr);
    gap: 0; */
/* Removed horizontal gap completely */
/* UPDATED: Set max height to 120px for the scrollable list */
/* max-height: 120px;
    overflow-y: auto; */
/* Ensure no horizontal scroll */
/* overflow-x: hidden; */
/* Added 2px top/bottom margin for vertical separation */
/* padding: 5px 0;
    margin-top: 2px;
    margin-bottom: 2px;
} */

.emoji-grid {
    display: grid;
    /* --- STANDARD/DEFAULT: 8 columns for wider screens --- */
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    /* Removed horizontal gap completely */
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 0;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* ------------------------------------------------------------------ */
/* --- NEW: MEDIA QUERY FOR SMALLER SCREENS (e.g., Mobile/Narrow Modals) --- */
/* ------------------------------------------------------------------ */
/* This query will apply when the viewport (browser window) is 768px or smaller. */
@media (max-width: 768px) {

    /* Target the emoji grid and force it to 5 columns */
    .emoji-grid {
        grid-template-columns: repeat(5, 1fr);
        /* Forces 5 columns on small screens */
    }

    /* Optional: If 60% is too wide on very small screens, you can adjust the popup width */
    .emoji-popup {
        width: 85%;
        /* Make the popup take up more space on the screen */
    }
}

/* ------------------------------------------------------------------ */

/* Thin Scrollbar Styling (Webkit only for cross-browser simplicity) */
.emoji-grid::-webkit-scrollbar {
    width: 3px;
    /* Reduced width to 3px */
}

.emoji-grid::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.emoji-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.emoji-item {
    /* Reduced emoji size slightly */
    font-size: 1.0rem;
    cursor: pointer;
    /* Padding for vertical spacing (top/bottom) only, zero horizontal padding */
    padding: 2px 0;
    transition: background-color 0.1s;
    line-height: 1;
    border-radius: 4px;
    text-align: center;
    /* Removed margin to eliminate extra horizontal space */
    margin: 0;
}

.emoji-item:hover {
    background-color: #f0f0f0;
}

.js-editor-content,
.content-editor {
    font-size: 9pt;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* timezone color for offices in dasboard */
/* Pacific */
.tz-pacific-std,
.tz-pacific-dst {
    color: #000000;
}

/* Light Blue */

/* Mountain */
.tz-mountain-std,
.tz-mountain-dst {
    color: #000000;
}

/* Lime */

/* Arizona (Mountain no DST) */
.tz-arizona {
    color: #000000;
}

/* Dark Orange */

/* Central */
.tz-central {
    color: #000000;
}

/* Mint Green */

/* Eastern */
.tz-eastern-std,
.tz-eastern-dst {
    color: #000000;
}

/* Lavender */

/* Default/Fallback */
.tz-default {
    color: #000000;
}

/* Black */

/* disposition */
#historiesContainer {
    padding: 0;
}

#historiesContainer .history-card {
    position: relative;
    border-radius: 4px;
    /*padding-top: 10px;*/
}

.btn-xs-reduced {
    padding: 0.1rem 0.4rem;
    font-size: 0.65rem;
    border-radius: 0.2rem;
}

#historiesContainer .card-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    z-index: 10;
}

#historiesContainer .card-actions .action-buttons {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#historiesContainer .card-actions .action-button {
    border: none;
    padding: 5px 7px;
    cursor: pointer;
    border: 1px solid #ced4da;
    font-size: 0.8em;
    background-color: transparent !important;
    color: #495057;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#historiesContainer .card-actions.btn-group {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}

.edit-button {

    color: #28a745 !important;
    background-color: transparent !important;
}

.edit-button:hover {
    background-color: rgba(40, 167, 69, 0.1) !important;
}

.delete-button {
    color: #dc3545 !important;
    background-color: transparent !important;
}

.delete-button:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

@media (max-width: 600px) {
    .action-button {
        padding: 10px 15px;
        font-size: 1.5em;
    }
}

.custom-delete-modal .modal-dialog {
    max-width: 400px;
    width: 94%;
}

.custom-delete-modal .modal-content {
    border-radius: 1rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    border: none;
    background: #fff;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    transform: scale(0.98);
}

.custom-delete-modal.show .modal-content {
    transform: scale(1);
}

.custom-delete-modal .modal-body {
    background: #fff;
    border-radius: 1rem;
}

.custom-delete-modal .text-danger i {
    color: #e74c3c;
}

.custom-delete-modal h5 {
    color: #222;
}

.custom-delete-modal .btn-light {
    background: #f8f9fa;
    color: #555;
    border-radius: 6px;
    transition: background 0.2s;
}

.custom-delete-modal .btn-light:hover {
    background: #e9ecef;
}

.custom-delete-modal .btn-primary {
    background: #005ce6;
    border-color: #005ce6;
    border-radius: 6px;
    transition: background 0.2s;
}

.custom-delete-modal .btn-primary:hover {
    background: #0046b3;
}

/* --- Custom Styles for the Permission Toggles and Accordion --- */
.custom-switch.custom-switch-lg {
    /* FIX HORIZONTAL ALIGNMENT: Aggressively pull the whole control to the right */
    /* This compensates for padding (e.g., 15px) on Bootstrap columns/rows to flush the switch to the edge. */
    margin-right: -35px !important;
    margin-top: -15px !important;
}

/* Target the custom control switch container */
.custom-switch.custom-switch-lg .custom-control-label {
    padding-left: 2.15rem;
    /* Adjust padding to give space for the larger track */
}

/* Style the TRACK (.custom-control-label::before) */
.custom-switch.custom-switch-lg .custom-control-label::before {
    top: 0px;
    /* Align track to the top of the label */
    left: -2.65rem;
    /* Pull track to the left */
    width: 2.4rem;
    /* Make track wider */
    height: 1.4rem;
    /* Make track taller */
    border-radius: 0.75rem;
    /* Fully rounded track */
    pointer-events: all;
}

/* Style the THUMB (.custom-control-label::after) */
.custom-switch.custom-switch-lg .custom-control-label::after {
    top: 2.6px;
    /* Center thumb vertically */
    left: calc(-2.55rem + 2px);
    /* Initial position (2px inset from left) */
    width: 1rem;
    /* Size of the thumb */
    height: 1rem;
    /* Size of the thumb */
    border-radius: 50%;
    /* Fully round thumb */
    background-color: #fff;
    /* White thumb */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    /* Soft shadow for depth */
    transition: transform 0.15s ease-in-out;
}

/*  Toggled State (Move the THUMB) */
.custom-switch.custom-switch-lg .custom-control-input:checked~.custom-control-label::after {
    /* Move thumb from 2px to the right edge minus its width (2.5rem - 1.2rem = 1.3rem) */
    transform: translateX(0.9rem);
}

/*  Toggled State (Change the Track Color - using primary theme) */
.custom-switch.custom-switch-lg .custom-control-input:checked~.custom-control-label::before {
    background-color: #007bff;
    /* Primary Blue color when checked */
    border-color: #007bff;
}

/* Set a default style for the original Bootstrap 4 switch for comparison */
.custom-switch .custom-control-label::before {
    border: 1px solid #ced4da;
    /* Ensure default border is visible */
}
/* End of Custom Switch CSS */

/* Accordion Header (card-header) styling */
.permission-header {
    cursor: pointer;
    padding: 10px 15px;
    background-color: #f8f9fa;
    /* Ensure background color matches the card */
    /* Removed individual border-radius here to let .card handle it */
    transition: background-color 0.15s;
    border-radius: 0 !important;
}

.permission-header:hover {
    background-color: #e9ecef;
}

.permission-header-icon {
    transition: transform 0.3s;
}

.permission-header.collapsed .permission-header-icon {
    transform: rotate(0deg);
}

.permission-header:not(.collapsed) .permission-header-icon {
    transform: rotate(90deg);
}

/* Styling for individual permission items within accordion body */
.permission-body-item {
    padding: 8px 15px;
    font-size: 0.85rem;
    border-top: 1px solid #f8f9fa;
    /* Separator for items inside the body */
    background-color: #fff;
    /* Ensure white background for body items */
}

.permission-body-item:last-child {
    border-bottom: none;
}

/* 1. Apply default rounding to the main card container when collapsed (on load) */
.card {
    border-radius: 10px !important;
    /* This ensures the rounding on page load */
    overflow: hidden;
    /* Crucial to prevent content from overflowing the rounded corners */
    border: 1px solid rgba(0, 0, 0, .125);
    /* Re-adding the default Bootstrap card border */
}

/* Ensure the card-body has no extra padding that could create gaps */
.card-body.p-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: #fff;
    /* Ensure full white background for body */
}

/* Make sure the bottom corners are rounded when the accordion is collapsed */
.card:has(.collapse:not(.show)) {
    border-radius: 10px !important;
    /* Standard Bootstrap rounding */
}

/* When the accordion is open, make sure only the top of the header is rounded */
.card:has(.collapse.show) .permission-header {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* When the accordion is open, make sure only the bottom of the body is rounded */
.card:has(.collapse.show) .card-body {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* box shadow for elevated feel */
.card.open-accordion,
.card:has(.collapse.show) {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.25s ease-in-out;
}

/* 3. When the accordion is OPEN (jQuery adds .open-accordion) */
.card.open-accordion {
    /* Remove bottom rounding from the overall card */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    /* Keep top rounding */
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

/* Ensure the header retains its top rounding when the card is open */
.card.open-accordion .permission-header {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* When the accordion is open, ensure the card body gets the bottom rounding */
.card.open-accordion .card-body {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* Smooth rounded corner transition */
.card,
.permission-header,
.card-body {
    transition: border-radius 0.25s ease-in-out;
}

/* settings page agent */

/* --- Settings Layout Styling --- */
.settings-sidebar {
    background-color: #fff;
    padding: 10px 10px;
    /* Add top/bottom padding for separation */
    border-radius: 8px;
    /* Rounded corners for the container */
    border: 1px solid #dee2e6;
    width: 310px;
    height: 825px;
    margin-bottom: 30px;
    /* position: fixed !important; */
    top: 70px;
    left: 20px;
    /* Subtle border for the container */
}

/* Sidebar Link Styling */
.settings-link {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    /* FIX: Removed horizontal margin (10px) to make links span full width */
    margin: 5px 0;
    border-radius: 8px;
    /* Rounded corners for the tabs/buttons */

    /* FIX: Inactive Look (The "Teal" look in the image) */
    background-color: #F9F9F9;
    /* Light grey/off-white background */
    border: 1px solid #F9F9F9;
    /* Very subtle light border */
    color: #6c757d;
    /* Dark grey text for contrast */
}


/* CRITICAL FIX: Remove underline on hover and focus */
.settings-link:hover,
.settings-link:focus {
    text-decoration: none;
    background-color: #f0f0f0;
    /* Slight hover effect */
}

/* NEW: Sidebar Active State Styling (Perfect Match) */
.settings-link.active {
    background-color: #E8F3FE;
    /* Light blue background fill */
    color: #007BFF;
    /* Primary blue text */
    font-weight: 600;
    border-color: #E8F3FE;
    /* Match border to background */
}

.settings-content-card {
    background-color: inherit;
    border-radius: 8px;
    box-shadow: none !important;
    padding: 0px;
    margin-left: 10px;
}

/* --- MOBILE RESPONSIVENESS (BREAKPOINT: < 768px) --- */
@media (max-width: 767.98px) {
    .settings-content-card {
        margin-left: 0;
        margin-top: 20px;
        padding: 0px;
    }

    .settings-sidebar {
        border-right: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
        padding: 10px;
    }

    .settings-link {
        margin: 5px 0;
        /* Full width button on mobile sidebar */
    }
}

/* --- Custom Accordion Card Styling (Individual Rounded Boxes) */
.settings-accordion-container .card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    /* Ensure rounded corners */
    margin-bottom: 1.5rem;
    /* Space between the card groups */
    overflow: hidden;
    /* Clips children to the rounded border */
}

.settings-accordion-container .card-header {
    background-color: #fff;
    padding: 15px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
    color: #343a40;
    position: relative;
}

/* Rotates the chevron icon */
.settings-accordion-container .card-header .chevron-icon {
    transition: transform 0.3s, color 0.3s;
    /* Added color transition */
    color: #6c757d;
    /* Default color (muted grey) */
}

.settings-accordion-container .card-header[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
    color: #007bff;
    /* Blue when open */
}

/* Ensures body content flows correctly inside the rounded card */
.settings-accordion-container .card-body {
    padding: 0 20px;
}

/* --- General Item Styling (Inside Card Body) --- */
.notification-item {
    padding: 15px 0;
    border-top: 1px solid #f8f9fa;
    background-color: white;
    cursor: default;
    /* Ensures items are flush left to the card body edges */
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.notification-item:first-child {
    border-top: none;
    padding-top: 15px;
}

.notification-item:last-child {
    padding-bottom: 15px;
    border-bottom: none;
}

/* --- Schedule Content Styles (Inside Collapse) --- */
.schedule-content-wrapper {
    padding-top: 2px !important;
    padding-bottom: 5px !important;
}

/* Make Days input match applies-to-option height */
.days-input-wrapper .form-control {
    height: 28px !important;
    /* Match pills */
    padding: 2px 6px;
    /* Same as .applies-to-option */
    font-size: 0.75rem;
    line-height: 0.9;
    border-radius: 8px;
    /* Match pills */
}

/* --- Time Selector Layout and Styling --- */
.time-pickers-container {
    margin-left: -5px;
    /* margin-right: -5px; */
    margin-bottom: 15px;
}

.time-picker-group {
    padding-left: 0px;
    padding-right: 20px;
}

.time-picker-group label {
    display: block;
    font-weight: 500;
    color: #000;
    font-size: 0.8rem;
    margin-bottom: 4px;
}

/* Select2 Override Styling to match design */
/* HIDE ORIGINAL SELECTS - CRITICAL FIX */
.select2-hidden-accessible {
    display: none !important;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    height: auto;
    border-radius: 8px;
    /* Rounded corners */
    border-color: #ced4da;
    padding: .35rem .75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 0.95rem;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 1.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
}

/* CRITICAL FIX: Ensure Select2 dropdown does not overflow input width */
.select2-dropdown-full-width {
    width: auto !important;
    min-width: 100%;
    box-sizing: border-box;
}

/* Applies to checkbox group styling */
.applies-to-group {
    padding-top: 15px;
}

.applies-to-group p {
    color: #495057 !important;
    font-weight: 500;
    margin-bottom: 10px;
}

/* Fix Checkbox label spacing */
.custom-checkbox {
    margin-right: 1.5rem;
}

.custom-checkbox label {
    font-size: 0.9rem;
    font-weight: 400;
}

/* Styles for the actions row */
.actions-row {
    padding-top: 30px;
    border-top: 1px solid #f8f9fa;
    margin-top: 40px;
}

/* --- Modal Styling Overhaul --- */
.modal-content.custom-modal {
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
    border: none;
    padding: 15px;
}

/* CRITICAL FIX: Tighter max-width for both admin and approval modals */
.modal-dialog.modal-sm {
    max-width: 350px;
}

/* CRITICAL: Remove all padding/border from header/footer to match design */
.custom-modal .modal-header,
.custom-modal .modal-footer {
    border: none;
    padding: 0;
}

.custom-modal .modal-body {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    /* Increased top padding for title spacing */
}

.custom-modal .modal-title {
    font-size: 1.25rem;
    /* Larger Title */
}

/* Custom Button Styling for Modals */
.custom-modal .btn-secondary-light {
    background-color: #fff;
    border: 1px solid #dee2e6;
    /* Light grey border */
    color: #495057;
    font-weight: 500;
    padding: 8px 24px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.custom-modal .btn-primary-blue {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    font-weight: 500;
    /* CRITICAL FIX: Increased size for "Ok" button in Kindly Note modal */
    padding: 10px 40px;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 123, 255, 0.3);
}

.custom-timepicker {
    position: relative;
}

.time-input {
    cursor: pointer;
    background-color: #fff;
}

.time-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 9999;
}

.time-dropdown.show {
    display: block;
}

.am-pm-toggle {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    border-bottom: 1px solid #eee;
}

.am-pm-toggle .btn.active {
    background-color: #007bff;
    color: white;
}

.time-list {
    max-height: 180px;
    overflow-y: auto;
    padding: 5px;
}

.time-option {
    padding: 6px 10px;
    cursor: pointer;
    text-align: center;
}

.time-option:hover {
    background-color: #f0f8ff;
}

/*  */
/* Style each checkbox container */
.applies-to-group .custom-control.custom-checkbox {
    background-color: #fff7cc;
    /* semi-butter yellow */
    border: 1px solid #e5d48a;
    border-radius: 6px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
}

/* Add spacing between boxes */
.applies-to-group .custom-control.custom-checkbox:not(:last-child) {
    margin-right: 1rem;
}

/* Make labels blend nicely */
.applies-to-group .custom-control-label {
    margin-left: 4px;
    font-weight: 500;
    color: #4b4b4b;
}

/* Ensure consistent layout on mobile */
@media (max-width: 768px) {
    .applies-to-group {
        flex-direction: column;
    }

    .applies-to-group .custom-control.custom-checkbox {
        margin-bottom: 8px;
        width: 100%;
    }
}


/* Applies-to checkbox boxes */
.applies-to-option {
    display: inline-flex;
    align-items: center;
    background-color: #F9F9F9;
    /* soft neutral background */
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 4px 10px;
    /* tighter padding */
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    user-select: none;
}

/* Checkbox alignment + subtle accent */
.applies-to-option input[type="checkbox"] {
    margin-right: 6px;
    width: 14px;
    height: 14px;
    accent-color: #007BFF;
    /* modern blue check */
}

/* Text style */
.applies-to-option span {
    font-size: 0.75rem;
    color: #333;
    font-weight: 500;
}

/* Hover and active states */
.applies-to-option:hover {
    background-color: #F2F2F2;
    border-color: #DADADA;
}

/* Checked feedback (optional subtle emphasis) */
.applies-to-option input[type="checkbox"]:checked+span {
    font-weight: 600;
}

.days-input-wrapper {
    width: 80px;
    /* or 100px if you prefer */
}

/* Mobile stacking */
@media (max-width: 768px) {
    .applies-to-group {
        flex-direction: column;
    }

    .applies-to-option {
        width: 100%;
    }
}

/* --- SMS Subcards Styling --- */
.sms-subcard {
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 0px;
    margin: 15px 20px;
    transition: all 0.25s ease-in-out;
    /* transform: translateY(0); */
    overflow: visible !important;
}

/* Subtle “pop up” hover animation */
.sms-subcard:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    /* transform: translateY(-3px); */
    border-color: #eaeaea;
}

/* Inner card body spacing */
.sms-subcard-body {
    padding: 16px 20px;
}

/* Notification items inside cards */
.notification-item {
    padding: 10px 0;
    margin: 0;
    border: none;
}

/* Divider line between stacked items */
.notification-item+.notification-item {
    border-top: 1px solid #f3f3f3;
    padding-top: 12px;
}

/* Labels and small text consistency */
.notification-item strong {
    font-size: 0.85rem;
    font-weight: 500;
    color: #111;
}

.notification-item small {
    font-size: 0.7.8rem;
    color: #6c757d;
}

/* Time picker section */
.time-picker-group label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #000;
}

.sms-subcard select.form-control {
    /* ... form control styling ... */
    border-radius: 8px !important;
    height: 40px;
}

/* Override any global blue gradient/select background */
.sms-subcard select.form-control {
    background: #fff !important;
    /* Force plain white */
    background-image: none !important;
    /* Remove gradient layers */
    color: #333 !important;
    /* Text color back to dark gray */
    border: 1px solid #E4E4E4 !important;
    /* Subtle neutral border */
    border-radius: 8px !important;
    box-shadow: none !important;
    height: 40px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: border-color 0.2s ease-in-out;
}

/* On hover/focus - clean subtle highlight only */
.sms-subcard select.form-control:hover,
.sms-subcard select.form-control:focus {
    background: #fff !important;
    border-color: #007BFF !important;
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.15) !important;
    outline: none !important;
}

.settings-content-card select.form-control {
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 1px solid #E4E4E4 !important;
}

/* Margin between multiple segmented cards */
.sms-subcard+.sms-subcard {
    margin-top: 16px;
}

/* Hide the outer SMS Alerts accordion card shell */
#smsSettingsAccordion>.card.shadow-sm.mb-3 {
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Make sure the inner cards (sms-subcard) stay aligned */
#smsSettingsAccordion>.card.shadow-sm.mb-3>.collapse.show {
    display: block !important;
    padding: 0 !important;
}

/* Label styling to match screenshot */
.sms-subcard label {
    font-size: 0.85rem;
    color: #000;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Remove bottom border of the SMS Alerts card */
#smsAgentsCollapse>.card.shadow-sm.mb-3 {
    border-bottom: none !important;
}

/* Optional: if the card-body itself draws a border at the bottom */
#smsAgentsCollapse>.card.shadow-sm.mb-3 .card-body {
    border-bottom: none !important;
}

.disabled-card {
    opacity: 0.55;
    pointer-events: none;
    /* blocks clicks to inner inputs (but we re-enable form controls individually if needed) */
    transition: opacity 0.12s ease-in-out;
    filter: grayscale(0.02);
}

.disabled-card select,
.disabled-card button,
.disabled-card input {
    pointer-events: none;
}

.disabled-input {
    pointer-events: none;
}

.dropdown-menu.smart-floating {
    transition: opacity 0.15s ease, transform 0.15s ease;
    opacity: 0;
    transform: translateY(-5px);
}

.dropdown-menu.smart-floating[style*="display: block"] {
    opacity: 1;
    transform: translateY(0);
}

#smsSettingsAccordion,
.settings-content-card,
.card,
.collapse {
    transform: none !important;
}

/* --- CRITICAL FIX: Ensure Select2 inherits SMS Subcard styling --- */
/* Target the main Select2 selection area */
.sms-subcard .select2-container--default .select2-selection--single {
    /* Base matching form-control */
    background: #fff !important;
    background-image: none !important;
    color: #333 !important;
    border: 1px solid #E4E4E4 !important;
    box-shadow: none !important;

    /* Matching custom visual properties */
    border-radius: 8px !important;
    height: 40px !important;
    font-size: 0.9rem;
    font-weight: 500;

    /* Ensure text alignment is centered vertically */
    padding: 0.35rem 0.75rem !important;
}

/* Ensure the rendered text inside Select2 is vertically centered */
.sms-subcard .select2-container .select2-selection__rendered {
    line-height: 28px !important;
    /* Adjust based on 40px height */
    padding-left: 0 !important;
}

/* Fix arrow alignment if needed */
.sms-subcard .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    width: 20px !important;
    top: 1px !important;
}

.time-picker-group select.form-control {
    border-radius: 8px !important;
    border: 1px solid #E4E4E4 !important;
    height: 40px !important;
    font-size: 0.9rem;
    font-weight: 500;
    background: #fff !important;
    box-shadow: none !important;
}

#selectRole .smart-dropdown,
#selectRegion .smart-dropdown,
#selectOffice .smart-dropdown,
#selectAgent .smart-dropdown {
    width: 100% !important;
}

#selectRole.col-sm-12,
#selectRegion.col-sm-12,
#selectOffice.col-sm-12,
#selectAgent.col-sm-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#selectRole .smart-btn,
#selectRegion .smart-btn,
#selectOffice .smart-btn,
#selectAgent .smart-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    text-align: left;
}

#selectRole .dropdown-toggle::after,
#selectRegion .dropdown-toggle::after,
#selectOffice .dropdown-toggle::after,
#selectAgent .dropdown-toggle::after {
    /* position: static !important; */
    margin-left: auto !important;
    right: 7px !important;
}

/* ============================================
   MATCH GENERAL SETTINGS TIME PICKERS TO SMS UI
   ============================================ */

#general-settings .select2-container--default .select2-selection--single {
    background: #fff !important;
    background-image: none !important;
    color: #333 !important;
    border: 1px solid #E4E4E4 !important;
    box-shadow: none !important;

    border-radius: 8px !important;
    height: 40px !important;
    font-size: 0.9rem;
    font-weight: 500;

    padding: 0.35rem 0.75rem !important;
}

/* vertically center text */
#general-settings .select2-container .select2-selection__rendered {
    line-height: 28px !important;
    padding-left: 0 !important;
}

/* fix arrow icon alignment */
#general-settings .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    width: 20px !important;
    top: 1px !important;
}


/* the bell icon with notification modal*/
.notification-modal {
    width: 380px;
    transform: none !important;
    right: 0 !important;
    border-radius: 0 0 8px 8px !important;
    overflow: visible;
}

.notification-modal .card {
    border-radius: 0 0 8px 8px !important;
}

/* Header */
.noti-header-title {
    font-size: 0.76rem;
    font-weight: 500;
    margin-left: 8px;
}

.noti-tabs {
    font-size: 0.72rem;
    margin-left: 8px;
    margin-right: 8px;
}

/* LIST – no scroll */
.notification-list {
    max-height: none;
    overflow: visible;
}

/* Always show line */
.list-group-item {
    border: none !important;
    /* border-bottom: 1px solid #e5e5e5 !important; */
    background: #fff !important;
    /* stays white */
    padding: 12px 23px;
}

/* Prevent hover from hiding line */
.list-group-item:hover {
    background: #fff !important;
    /* keep same color */
}

/* Solid divider */
.noti-divider {
    border-bottom: 1px solid #e5e5e5;
    margin: 6px 0 0;
}

/* Solid divider */
.noti-divider-list {
    border-bottom: 1px solid #e5e5e5;
    margin: 6px 15px 0;
}

/* AVATAR */
.avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* TEXT */
.noti-title-text {
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1;
}

.noti-sub {
    font-size: 0.70rem;
    line-height: 1;
    color: #6c757d;
}

/* TIME + DOT */
.notif-time {
    display: flex;
    align-items: center;
    gap: 0.30rem;
    white-space: nowrap;
    font-size: 0.70rem;
    color: #6c757d;
    align-self: flex-start;
    margin-top: 0px !important;
}

.notif-dot {
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    flex-shrink: 0;
}

.hide-dots .notif-dot {
    display: none !important;
}

/* CTA BUTTON */
.noti-cta {
    background: #fff;
    border: 1px solid #d0e2ff;
    font-size: 0.56rem;
    padding: 3px 10px;
    border-radius: 7px;
    margin-top: 4px;
    margin-left: 40px;
}

.noti-cta:hover {
    background: #e9f2ff;
}

/* VIEW ALL BUTTON – NO FOOTER BAR */
.noti-view-all-container {
    text-align: center;
    padding: 12px 0 14px;
}

/* view-all button: NOT full width */
.btn-view-all {
    background: #f2f2f2;
    border: 1px solid #e6e6e6;
    font-size: 0.76rem;
    font-weight: 500;
    border-radius: 10px;
    padding: 8px 0;
    width: 90%;
    color: #000 !important;
    text-decoration: none !important;
}

.btn-view-all:hover {
    background: #f2f2f2;
    color: #000 !important;
    text-decoration: none !important;
}

.is-hidden {
    display: none !important;
}


.fs-8 {
    font-size: 6pt !important;
}

.fs-9 {
    font-size: 6.75px !important;
}

.fs-10 {
    font-size: 7.5pt !important;
}

.fs-11 {
    font-size: 8.25pt !important;
}

.fs-12 {
    font-size: 9pt !important;
}

.fs-14 {
    font-size: 10.5pt !important;
}

.fs-16 {
    font-size: 12pt !important;
}

.fs-18 {
    font-size: 13.5pt !important;
}

.fs-20 {
    font-size: 15pt !important;
}

.fs-24 {
    font-size: 18pt !important;
}

#unansweredContentCollapse {
    transition: all 0.25s ease;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

#unansweredContentCollapse.active {
    opacity: 1;
    height: auto;
    overflow: visible;
}

/* template in navigation bar modal */
 #viewTemplateModalInNavBar .view-modal-box {
     width: 350px;
     margin: auto;
     border-radius: 12px;
     padding-top: 10px;
     padding-bottom: 20px;
     box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
 }

 /* Back + Close area */
 #viewTemplateModalInNavBar .view-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 8px 14px 0 14px;
 }

 #viewTemplateModalInNavBar .view-back {
     font-size: 18px;
     cursor: pointer;
     color: #4a4a4a;
 }

 #viewTemplateModalInNavBar .view-close {
     font-size: 20px;
     cursor: pointer;
     color: #4a4a4a;
 }

 /* Title */
 #viewTemplateModalInNavBar .view-modal-title {
     text-align: left !important;
     font-size: 22px;
     font-weight: 600;
     margin-left: 26px;
     padding: 8px 0 5px;
 }

 /* Labels */
 #viewTemplateModalInNavBar label {
     font-size: 14px;
     font-weight: 600;
     margin-top: 14px;
 }

 /* Readonly field */
 #viewTemplateModalInNavBar .view-input {
     background: #f8f8f8;
     border: 1px solid #dcdcdc;
     border-radius: 8px;
     padding: 10px 12px;
     font-size: 15px;
 }

 /* Message Body box */
 #viewTemplateModalInNavBar .view-message-box {
     background: #eaf3ff;
     border-radius: 10px;
     padding: 15px;
     border: 1px solid #d5e4ff;
     font-size: 14px;
     line-height: 1.45;
     color: #444;
     white-space: pre-wrap;
 }

#viewTemplateModalInNavBar .modal-body {
     padding: 0 22px 20px;
 }
#viewTemplateModalInNavBar {
  color: #000 !important; /* Base text */
}

#viewTemplateModalInNavBar .view-modal-title {
  color: #111 !important;
}

#viewTemplateModalInNavBar .view-input,
#viewTemplateModalInNavBar .view-message-box,
#viewTemplateModalInNavBar label {
  color: #333 !important;
}