.edit-notes:hover {
    cursor: pointer;
}

.edit-notes span {
    border-bottom: 1px dashed;
}

.edit-notes span:hover {
    border-bottom: 1px solid;
}

body table.table-striped > tbody > tr.table-danger:nth-of-type(odd) {
    --bs-table-striped-bg: #edd1d6;
    color: var(--bs-gray-dark);
}

.note-component {

}

.note-component:hover {
    border-bottom: 1px dashed;
    cursor: pointer;
}

body table.table-striped tbody td, body .table-striped tbody th {
    vertical-align: middle !important;
    color: var(--bs-body-color) !important;
}

.table-success {
    --bs-table-striped-bg: #d1f2eb !important;
}
.table-danger {
    --bs-table-striped-bg: #fcdde2 !important;
}

.selectize-input {
    height: auto !important;
}

#horizon_iframe {
    width: 1170px;
    min-height: 1300px;
}

.color-border {
    color: #adb5bd;
}

.form-date-range {
    width: 280px;
}

.pointer {
    cursor: pointer;
}

.details-control {
    cursor: pointer;
}

#page-email-addresses .select2-container .select2-selection--single,
#page-emails .select2-container .select2-selection--single,
#page-unsubscribers .select2-container .select2-selection--single,
#page-logs .select2-container .select2-selection--single,
#page-messages .select2-container .select2-selection--single,
#page-clicks .select2-container .select2-selection--single {
    height: auto;
    min-height: calc(1.5em + 0.554rem);
}

#page-email-addresses .select2-container .select2-selection--single .select2-selection__rendered,
#page-emails .select2-container .select2-selection--single .select2-selection__rendered,
#page-unsubscribers .select2-container .select2-selection--single .select2-selection__rendered,
#page-logs .select2-container .select2-selection--single .select2-selection__rendered,
#page-clicks .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 0.7875rem;
}

#page-email-addresses .select2-container .select2-selection--single .select2-selection__rendered,
#page-emails .select2-container .select2-selection--single .select2-selection__rendered,
#page-unsubscribers .select2-container .select2-selection--single .select2-selection__rendered,
#page-logs .select2-container .select2-selection--single .select2-selection__rendered,
#page-messages .select2-container .select2-selection--single .select2-selection__rendered,
#page-clicks .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding: 0.283rem 0.8rem;
}

#page-email-addresses .select2-container .select2-selection--single .select2-selection__arrow,
#page-emails .select2-container .select2-selection--single .select2-selection__arrow,
#page-unsubscribers .select2-container .select2-selection--single .select2-selection__arrow,
#page-logs .select2-container .select2-selection--single .select2-selection__arrow,
#page-messages .select2-container .select2-selection--single .select2-selection__arrow,
#page-clicks .select2-container .select2-selection--single .select2-selection__arrow {
    height: 28px;
    width: 28px;
}

.expand-row > *,
.expand-row {
    background: #fff;
    --bs-table-accent-bg: #fff !important;
}

.expand-row:hover {
    --bs-table-accent-bg: #fff !important;
}

.expand-row > td {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
}

table.dataTable.table-striped > tbody > tr.odd > *,
table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.message-events {
    width: 75px;
}

.message-events i {
    line-height: 17px;
    font-size: 17px;
}

.messages-table td {
    padding: 10px !important;
}

.messages-table .expand-row > td {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ribbon__env {
    position: relative;
    left: -20px;
    padding: 5px 12px;
    box-shadow: 2px 5px 10px rgb(50 58 70 / 15%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    border-radius: 0 3px 3px 0;
    text-transform: capitalize;
}

.device__phone, .device__desktop, .device__popup {
    margin: 0 auto;
    position: relative;
}

.phone__ios {
    width: 300px;
    height: 602px;
    background-image: url('../images/devices/iphone13.png');
    background-size: 100% 100%;
    margin-bottom: 3px;
    font-family: "Helvetica Neue", 'Open Sans', 'Roboto', 'Proxima Nova', Arial, sans-serif;
    color: black;
}

.phone__ios a {
    color: #006dcc;
}

.device__border {
    position: absolute;
    overflow: hidden;
    margin-top: 20px;
}

.phone__ios .device__border {
    top: -4px;
    right: 6%;
    left: 6%;
    bottom: 12%;
}

.phone__ios .device__sender {
    background: #f2f5f7;
    border-bottom: 1px solid #b2b2b2;
    height: 75px;
    border-radius: 30px 33px 0 0;
    padding-top: 10px;
    margin-bottom: 20px;
    font-weight: normal;
    font-size: smaller;
}

.phone__ios .device__phone_chat {
    background: #e9e9eb;
    position: relative;
    padding: 6px 9px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 400;
    margin: 0 51px 0 11px;
}

.phone__ios .device__phone_chat::before {
    content: '';
    position: absolute;
    background-image: url('../images/devices/arrow.png');
    bottom: 0;
    left: -6px;
    height: 10px;
    width: 15px;
    background-size: contain;
}

.phone__android {
    width: 300px;
    height: 605px;
    background-image: url('../images/devices/samsungs7.png');
    background-size: 100% 100%;
    font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
}

.phone__android .device__border {
    top: 9.4%;
    right: 3.4%;
    left: 3.4%;
    bottom: 9.4%;
    margin-top: 7px;
}

.phone__android .device__sender {
    margin-bottom: 7px;
}

.phone__android .device__phone_chat {
    background: #e9e9eb;
    position: relative;
    padding: 7px;
    color: #212121;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 400;
    margin: 0 32px 0 8px;
    line-height: 1.2;
}

.dialog-desktop {
    max-width: 1000px !important;
}

.desktop__desktop {
    width: 899px;
    height: 516px;
    background-image: url('../images/devices/desktop.png');
    background-size: 100% 100%;
    font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
}

.desktop__desktop .device__border {
    top: 15px;
    right: 0;
    left: 0;
    bottom: 0;
}

.desktop__desktop .device__sender {
    border-bottom: 1px solid #e6e6e6;
    height: 60px;
    border-radius: 0;
    margin: 5px 115px 0 121px;
    font-weight: normal;
    font-size: smaller;
    display: flex;
    flex-wrap: wrap;
}

.desktop__desktop .device__sender>* {
    margin: 0;
    padding: 0;
}

.desktop__desktop .device__sender .img {
    width: 35px;
    max-width: 35px;
    padding-top: 3px;
    flex: 0 0 auto;
}
.desktop__desktop .device__sender .data {
    flex: 0 0 auto;
}

.desktop__desktop .device__sender .email-from {
    font-weight: bold;
    color: #000;
    font-size: 12px;
}
.desktop__desktop .device__sender .email-subject {
    color: #212121;
    font-size: 11px;
}
.desktop__desktop .device__sender .email-to {
    color: #212121;
    font-size: 11px;
}
.desktop__desktop .device__sender .email-to span {
    color: #999;
    font-size: 11px;
}

.desktop__desktop .device__desktop_chat {
    background: #ffffff;
    position: relative;
    padding: 7px;
    color: #212121;
    border-radius: 0px;
    font-size: 11px;
    font-weight: 400;
    margin: 0 115px;
    line-height: 1.2;
    overflow: auto;
    max-height: 355px;
    max-width: 669px;
}

.desktop__popup {
    width: 920px;
    height: 516px;
    font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
}

.desktop__popup .device__border {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin-top: 0;
}
.desktop__popup .popup {
    background: #ffffff;
    position: relative;
    padding: 7px;
    color: #212121;
    border-radius: 0px;
    font-size: 11px;
    font-weight: 400;
    margin: 0 auto;
    line-height: 1.2;
    overflow: auto;
    max-height: 516px;
}
.popup textarea {
    width: 910px;
    max-width: 910px;
    height: 500px;
    max-height: 500px;
}

.apex-charts .apexcharts-datalabel,
.apex-charts .apexcharts-pie-label {
    fill: #fff !important;
}

.apex-charts .apexcharts-datalabel-label,
.apex-charts .apexcharts-datalabel-value {
    fill: #777 !important;
}

.dark-green {
    color: #107e3d !important
}

.dark-indigo {
    color: #1a5abc !important
}

.bg-dark-green {
    background-color: #107e3d !important
}

.bg-dark-indigo {
    background-color: #1a5abc !important
}

.btn-google {
    box-shadow: 0 3px 2px -1px rgb(30, 30, 30, .1);
    border: 1px solid rgb(30, 30, 30, .1) !important;
    position: relative;
}

.btn-google:hover {
    background-color: #f9f9f9;
}

.icon-mail,
.icon-google {
    max-width: 28px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    flex-basis: 40%;
}

.text-login {
    width: 180px;
    margin-left: 23%;
}

.mdi-clock-outline.text-clock {
    color: #b1a382 !important;
}


/* Use display: grid so we can position the range menu to the left of the existing calendar elements */
.flatpickr-calendar.flatpickr-has-predefined-ranges {
    width: auto;
    display: grid;
}

.flatpickr-calendar.flatpickr-has-predefined-ranges .flatpickr-predefined-ranges {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.flatpickr-calendar.flatpickr-has-predefined-ranges:not(.flatpickr-predefined-ranges-only) .flatpickr-predefined-ranges {
    border-right: 1px solid #e6e6e6;
}

.flatpickr-calendar.flatpickr-has-predefined-ranges .flatpickr-months {
    position: relative; /* needed for prev/next month arrows to position correctly */
    grid-column: 2;
    grid-row: 1;
}

.flatpickr-calendar.flatpickr-has-predefined-ranges .flatpickr-innerContainer {
    overflow: visible;
    grid-column: 2;
    grid-row: 2;
}

/* hide the calendar when .flatpickr-predefined-ranges-only is added to the container */
.flatpickr-calendar.flatpickr-has-predefined-ranges.flatpickr-predefined-ranges-only .flatpickr-months {
    display: none;
}

.flatpickr-calendar.flatpickr-has-predefined-ranges.flatpickr-predefined-ranges-only .flatpickr-innerContainer {
    display: none;
}

/* style the button nav items to match the calendar */
.flatpickr-calendar.flatpickr-has-predefined-ranges .flatpickr-predefined-ranges .nav-link.btn-link {
    padding: 0.25rem 0.75rem;
    color: inherit;
    border-radius: 0;
    text-align: left;
}

.flatpickr-calendar.flatpickr-has-predefined-ranges .flatpickr-predefined-ranges .nav-link.btn-link.active {
    background: #569ff7;
    color: #fff;
}

.flatpickr-calendar.flatpickr-has-predefined-ranges .flatpickr-predefined-ranges .nav-link.btn-link:hover:not(.active) {
    background: #eee;
}

/* needed so the hover/active background on the buttons don't overlap the container's border radius */
.flatpickr-calendar.flatpickr-has-predefined-ranges .flatpickr-predefined-ranges :first-child .nav-link.btn-link {
    border-radius: 5px 0 0 0;
}

.flatpickr-calendar.flatpickr-has-predefined-ranges .flatpickr-predefined-ranges :last-child .nav-link.btn-link {
    margin-bottom: .5rem;
}

.flatpickr-calendar.flatpickr-has-predefined-ranges.flatpickr-predefined-ranges-only .flatpickr-predefined-ranges :first-child .nav-link.btn-link {
    border-radius: 5px 5px 0 0;
}

.flatpickr-calendar.flatpickr-has-predefined-ranges.flatpickr-predefined-ranges-only .flatpickr-predefined-ranges :last-child .nav-link.btn-link {
    margin-bottom: 0;
    border-radius: 0 0 5px 5px;
}

#sidebar-menu > ul > li > a {
    font-weight: 400;
}

.form-control {
    margin-bottom: inherit;
}

@media (max-width: 425px) {
    .form-date-range {
        margin-top: 0 !important;
        margin-bottom: 22px;
        float: none !important;
    }
}

/* choices plugin set - here we disable it */
html, body {
    width: auto;
    height: auto;
}