@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --main-color: #0a3e7c;
    --second-color: #0582bb;
    --white-color: #ffffff;
    --dark-color: #1d1f2c;
    --light-color: #f4ecfb;
    --light-dark-color: #667085;
    --gray-color: #4a4c56;
    --green-color: #11b14b;
    --red-color: #eb3d4d;
    --orange-color: #f86624;
    --light-aqua: #22caad;
    --main-font: "Inter", sans-serif;
}

body {
    font-family: var(--main-font) !important;
}

.main_content_wrap {
    background-color: #f2f3f8;
}

/* Comman css start here */
.bg_green {
    background-color: var(--green-color);
}

.ctm_btn_wrap {
    padding: 10px 14px;
    background-color: var(--main-color) !important;
    color: var(--white-color);
    border-radius: 8px;
}

.ctm_btn_wrap span {
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    color: var(--white-color);
    width: max-content;
    display: inline-block;
}

.ctm_button {
    padding: 10px 14px;
    background-color: var(--main-color) !important;
    color: var(--white-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    display: inline-block;
}

.ctm_button:focus,
.cancel_button:focus {
    box-shadow: none;
    outline: none;
}

.cancel_button {
    padding: 10px 14px;
    background-color: transparent;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    display: inline-block;
    border-width: 1px;
    /* color: var(--main-color);
    border-color: var(--main-color); */
    color: #8a3fcfa6;
    border-color: #8a3fcfa6;
    transition: all 200ms ease-in-out;
}

.main_heading {
    font-size: 2rem;
    font-family: var(--main-font);
    font-weight: bold;
    line-height: normal;
    color: #0f1016;
}

.ic_status_paused {
    color: #f86624 !important;
    font-weight: 600 !important;
}

.ic_status_initiated {
    color: #0582bb !important;
    font-weight: 600 !important;
}

.ic_status_in_progress {
    color: #f86624 !important;
    font-weight: 600 !important;
}

.ic_status_completed {
    color: var(--gray-color) !important;
    font-weight: 600 !important;
}

.ic_status_aborted {
    color: #eeb888 !important;
    font-weight: 600 !important;
}

/* Disabled Functionality */
.ic_disabled {
    pointer-events: none;
}

.ctm_btn_wrap.ic_disabled {
    background-color: var(--light-dark-color) !important;
}

.email_control_item.ic_disabled svg path {
    fill: var(--light-dark-color) !important;
}

.new_message.ic_disabled span {
    color: var(--light-dark-color) !important;
}

.new_message.ic_disabled svg path {
    fill: var(--light-dark-color) !important;
}

/* Comman css end here */

/* Login Page Start here */
.login_page_form_heading {
    color: var(--main-color);
    font-size: 24px;
    font-weight: bolder;
    font-family: var(--main-font);
    line-height: 32px;
}

.login_page_form_heading span {
    color: var(--green-color);
}

.login_page_image img {
    height: 100vh;
}

.forgot_page_form,
.login_page_form {
    background-color: #ffffff;
    padding: 45px 30px;
    box-shadow: 0px 0px 6px #e0e2e7;
    border-radius: 12px;
}

.forgot_form .form-label,
.login_form .form-label {
    margin: 0;
    font-size: 0.875rem;
    color: #777980;
    letter-spacing: 0.5px;
    line-height: 1.25rem;
    font-weight: 500;
    font-family: var(--main-font);
}

.forgot_form .login_form_control,
.login_form .login_form_control {
    padding: 8px 12px;
    background-color: #f9f9fc !important;
    border: 1px solid #e0e2e7 !important;
    border-radius: 8px;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0.875rem;
    font-family: var(--main-font);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--light-dark-color);
    font-weight: 500;
}

.forgot_form .login_form_control::placeholder,
.login_form .login_form_control::placeholder {
    font-size: 0.875rem;
    font-family: var(--main-font);
    color: #abafb1;
    line-height: 20px;
    line-height: 0.5px;
    font-weight: 400;
}

.forgot_form .login_form_control:focus,
.login_form .login_form_control:focus {
    border-color: var(--green-color) !important;
}

.login_form .login_forgot_btn {
    font-size: 0.8rem;
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 20px;
}

.login_icon_control_wrap svg {
    position: absolute;
    inset: 12px;
    z-index: 1;
}

.login_icon_control_wrap .login_form_control {
    padding-left: 36px;
}

.login_icon_control_wrap:has(.login_form_control:focus) svg path {
    fill: var(--green-color) !important;
}

.forgot_form:has(.login_error_message) .login_form_control,
.forgot_form:has(.login_error_message) .form-label,
.login_form:has(.login_error_message) .login_form_control,
.login_form:has(.login_error_message) .form-label {
    color: #cc3946;
}

.forgot_form:has(.login_error_message) .login_form_control:focus,
.forgot_form:has(.login_error_message) .login_form_control,
.login_form:has(.login_error_message) .login_form_control:focus,
.login_form:has(.login_error_message) .login_form_control {
    border-color: #cc3946 !important;
}

.forgot_form:has(.login_error_message)
    .login_icon_control_wrap:has(.login_form_control:focus)
    svg
    path,
.login_form:has(.login_error_message)
    .login_icon_control_wrap:has(.login_form_control:focus)
    svg
    path {
    fill: #cc3946 !important;
}

.login_page_form .forgot_title {
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 400;
    line-height: 20px;
    color: #777980;
}

.forgot_back_to_login {
    padding: 10px 14px;
    background-color: transparent !important;
    color: var(--main-color);
    border-radius: 8px;
    border: 1px solid var(--main-color);
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 600;
    line-height: 1.125rem;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Login Page End here */
/* Sidebar Start Here */
.sidebar_main_wrap {
    background-color: var(--white-color);
}

.sidebar_logo {
    background-color: var(--main-color);
    height: 70px;
}

.sidebar_logo a {
    font-size: 1.2rem;
    font-family: var(--main-font);
    font-weight: bold;
    line-height: 32px;
    color: var(--white-color);
    display: flex;
    align-items: center;
    letter-spacing: 0.7px;
}

.sidebar_logo #sidebar_close {
    position: absolute;
    right: 8px;
    top: 42%;
    line-height: 0;
}

.sidebar_user_info_wrap .sidebar_user {
    width: 4rem;
    height: 4rem;
}

.sidebar_user_info_wrap .sidebar_user img {
    border-radius: 50%;
}

.sidebar_user_info p {
    color: var(--main-color);
    font-size: 1rem;
    font-family: var(--main-font);
    line-height: normal;
    font-weight: 400;
}

.sidebar_user_info .user_name {
    color: var(--main-color);
    font-size: 1.125rem;
    font-family: var(--main-font);
    line-height: normal;
    font-weight: bold;
}

.sidebar_info_wrap ul .nav_link {
    color: var(--gray-color);
    font-size: 1rem;
    font-family: var(--main-font);
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    transition: all 350ms ease-in-out;
}

.sidebar_msg_child_list a {
    padding-left: 3.125rem !important;
}

.sidebar_msg_child_list a,
.sidebar_info_wrap ul li {
    border-left: 4px solid transparent;
}

.sidebar_info_wrap ul li a.active .nav_link {
    color: var(--main-color);
}

.sidebar_msg_child_list :is(a:hover, a.active),
.sidebar_info_wrap ul :is(li:has(a.active), li:has(a:hover)) {
    background-color: var(--light-color);
    border-left: 4px solid var(--main-color);
}

.sidebar_info_wrap .dropdown-toggle {
    white-space: normal;
}

/* Sidebar End Here */
/* Header Start Here */
/* .sidebar_logo, */
.header_main_wrap {
    /* position: sticky;
    top: 0; */
    z-index: 999;
}

.header_main_wrap .header_wrap {
    background-color: var(--white-color);
    height: 70px;
}

.header_user_profile_wrap figure {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header_user_profile_wrap figure img {
    max-width: 3rem;
    max-height: 3rem;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.sidebar_msg_dropdown_wrap .dropdown-toggle::after,
.header_user_profile_wrap .dropdown button::after {
    content: url("../images/dropdown_icon.svg");
    margin: 0;
    border: 0;
    vertical-align: 0;
    height: 1.25rem;
    display: grid;
    place-content: center;
}

.header_user_profile {
    position: relative;
}

.header_user_profile::before {
    position: absolute;
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--white-color);
    background-color: var(--green-color);
    border-radius: 50%;
    z-index: 98;
    bottom: 0;
    right: 0;
}

.header_user_profile_wrap figure figcaption {
    color: var(--main-color);
    font-size: 1rem;
    font-family: var(--main-font);
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.header_add_msg_wrap .new_user_icon {
    background-color: var(--second-color);
    border-radius: 50%;
}

.header_add_msg_wrap :is(.header_add_role_img, .header_msg_wrap) {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
}

.header_add_msg_wrap img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.sidebar_msg_dropdown_wrap .badge,
.header_msg_wrap span {
    width: 1.2rem;
    height: 1.2rem;
    display: grid;
    place-items: center;
    padding: 0;
    top: 6px !important;
    right: -10px;
}

.sidebar_msg_dropdown_wrap .dropdown_btn.active svg path {
    fill: var(--main-color);
}

.sidebar_msg_dropdown_wrap .dropdown_btn.active svg {
    transform: rotate(-180deg);
}

.header_profile_dropdown_ul {
    position: absolute;
    left: -80px;
    width: max-content;
    background-color: var(--white-color);
    border-radius: 12px;
    filter: drop-shadow(0 4px 30px #2e2d741a);
    z-index: 99;
}

.header_add_role_dropdown_ul {
    position: absolute;
    left: -80px;
    width: max-content;
    background-color: var(--white-color);
    border-radius: 12px;
    filter: drop-shadow(0 4px 30px #2e2d741a);
    display: none !important;
    z-index: 99;
}

.header_profile_dropdown_ul li a,
.header_add_role_dropdown_ul .drop_link,
.btn-logoff {
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    color: var(--second-color) !important;
    font-weight: 500;
}

.btn-logoff::after {
    content: unset !important;
}

.header_add_role_dropdown {
    display: none;
}

.header_add_role_wrap:hover .header_add_role_dropdown {
    display: block;
}

.header_wrap .middel_line {
    border: 1px solid #f0f1f3;
    margin: 0 1rem;
}

/* Header End Here */

/* Home page start here */
.searchbar_wrap input[type="search"] {
    background-color: var(--white-color);
    border: 1px solid #e0e2e7;
    padding: 8px 12px 8px 34px;
    border-radius: 8px;
    position: relative;
    color: #858d9d;
    font-size: 0.875rem;
}

.searchbar_wrap input[type="search"]::placeholder {
    font-size: 0.875rem;
    color: #858d9d;
    line-height: 1.25rem;
    font-weight: 400;
    font-family: var(--main-font);
    letter-spacing: 0.5px;
}

.searchbar_wrap input[type="search"]:focus {
    box-shadow: none;
    outline: none;
    border: 1px solid var(--main-color);
}

.searchbar_wrap svg {
    position: absolute;
    z-index: 99;
    top: 12px;
    left: 12px;
}

.filter_btn_wrap {
    background-color: var(--white-color) !important;
    border: 1px solid #e0e2e7;
    padding: 10px 14px;
    border-radius: 8px;
    transition: all 300ms ease-in-out;
    color: var(--light-dark-color);
}

.filter_btn_wrap span {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    font-family: var(--main-font);
    letter-spacing: 0.5px;
}

.filter_btn_wrap.active,
.filter_btn_wrap.active svg path,
.filter_btn_wrap:hover svg path,
.filter_btn_wrap:hover {
    background-color: var(--second-color);
    fill: #fff;
}

.filter_btn_wrap:hover span,
.filter_btn_wrap.active span {
    color: var(--white-color);
}

.simulation_card_wrap {
    height: 80vh;
    overflow: overlay;
}

.simulation_card {
    padding: 30px 22px;
    background-color: var(--white-color);
    border-radius: 6px;
    border: 1px solid;
    border-left: 6px solid;
    transition: all 200ms ease-in-out;
}

.simulation_card:hover {
    padding: 42px 22px;
}

.simulation_card.running:hover {
    border-right: 6px solid #eeb888;
    background-color: #f8f4ef;
}

.simulation_card.paused:hover {
    border-right: 6px solid #d3787f;
    background-color: #d378801a;
}

.simulation_card.completed:hover {
    border-right: 6px solid #e5e5ec;
    /* background-color: #e5e5ec1a; */
}

.simulation_card:hover .simulation_card_date {
    font-size: 16px;
    line-height: 20px;
}

.simulation_card:hover .simulation_card_heding {
    font-size: 20px;
}

.simulation_card:hover
    :is(
        .status-name,
        .simulation_running_step span,
        .simulation_paused_step span
    ) {
    font-size: 14px;
    font-weight: 600;
}

.simulation_card:hover .simulation_card_user {
    font-weight: 500;
}

.simulation_card.completed {
    border-color: #e5e5ec;
}

.simulation_card.running {
    border-color: #eeb888;
}

.simulation_card.paused {
    border-color: #d3787f;
}

.simulation_completed {
    padding: 4px 10px;
    background-color: #e5e5ec;
    border-radius: 8px;
}

.simulation_completed span {
    font-size: 0.75rem;
    font-family: var(--main-font);
    font-weight: 500;
    line-height: 1.25rem;
    color: #8a8b8d;
}

.simulation_running {
    padding: 4px 10px;
    background-color: #eeb888;
    border-radius: 8px;
}

.simulation_running span {
    font-size: 0.75rem;
    font-family: var(--main-font);
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--white-color);
    transition: all 0.2s ease-in-out;
}

.simulation_running_step {
    border-radius: 8px;
    padding: 4px 10px;
    border: 1px solid #eeb888;
    transition: all 0.2s ease-in-out;
}

.simulation_running_step span {
    font-size: 0.75rem;
    font-family: var(--main-font);
    font-weight: 500;
    line-height: 1.25rem;
    color: #eeb888;
}

.simulation_paused {
    padding: 4px 10px;
    background-color: #d3787f;
    border-radius: 8px;
}

.simulation_paused span {
    font-size: 0.75rem;
    font-family: var(--main-font);
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--white-color);
}

.simulation_paused_step {
    border-radius: 8px;
    padding: 4px 10px;
    border: 1px solid #d3787f;
}

.simulation_paused_step span {
    font-size: 0.75rem;
    font-family: var(--main-font);
    font-weight: 500;
    line-height: 1.25rem;
    color: #d3787f;
}

.simulation_card .simulation_card_date {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-family: var(--main-font);
    color: var(--light-dark-color);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.simulation_card .simulation_card_heding {
    font-size: 1.125rem;
    line-height: 1.25rem;
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.simulation_card_user_wrap .simulation_card_user {
    font-size: 1rem;
    font-family: var(--main-font);
    color: var(--light-dark-color);
    font-weight: 400;
    line-height: 1.25rem;
}

.simulations_filter_popup {
    position: absolute;
    top: 2.6rem;
    right: 0;
    background-color: var(--white-color);
    border-radius: 12px;
    padding: 24px;
    filter: drop-shadow(0 4px 30px #2e2d741a);
    width: max-content;
}

.simulations_filter_popup .filter_popup_heading {
    font-size: 1.125rem;
    color: var(--second-color);
    font-family: var(--main-font);
    line-height: 28px;
    font-weight: 600;
}

.simulations_filter_popup .form-check-input[type="checkbox"] {
    border-width: 2px;
    border-color: #858d9d !important;
    border-radius: 6px !important;
    width: 1.25rem;
    height: 1.25rem;
    outline: none !important;
    box-shadow: none !important;
}

.simulations_filter_popup .form-check-label {
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 500;
    color: #777980;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
}

.simulations_filter_popup
    .form-check:has(.form-check-input[type="checkbox"]:checked)
    .form-check-label {
    color: var(--second-color);
}

.simulations_filter_popup .form-check-input[type="checkbox"]:checked:hover,
.simulations_filter_popup .form-check-input[type="checkbox"]:checked:focus,
.simulations_filter_popup .form-check-input[type="checkbox"]:checked {
    background-color: var(--second-color);
    border-color: var(--second-color) !important;
    outline: none !important;
    box-shadow: none !important;
}

.simulations_filter_popup {
    display: none !important;
}

.filter_btn_wrap:hover .simulations_filter_popup {
    display: grid !important;
}

/* Home page end here */
/* Message page Start here */
.message_main_heading {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--main-font);
    line-height: 30px;
    color: var(--dark-color);
}

.message_main_des {
    font-size: 0.875rem;
    font-weight: 400;
    font-family: var(--main-font);
    line-height: 1.25rem;
    color: #777980;
}

.message_details,
.message_status_wrap {
    background-color: var(--white-color);
    filter: drop-shadow(0 4px 30px #2e2d741a);
    border-radius: 12px;
    padding: 1.25rem 24px !important;
    gap: 0.875rem;
    display: grid;
}

.message_status_wrap .message_status_title {
    font-size: 1.125rem;
    font-weight: 600;
    font-family: var(--main-font);
    line-height: 28px;
    letter-spacing: 1px;
    color: var(--dark-color);
}

.message_status_wrap .form-label {
    margin: 0;
    font-size: 0.875rem;
    color: #777980;
    letter-spacing: 0.5px;
    line-height: 1.25rem;
    font-weight: 500;
    font-family: var(--main-font);
}

.simulation_status_btn {
    display: flex !important;
    gap: 6px;
    align-items: center;
}

.simulation_status_btn:after {
    content: none !important;
}

.message_details :is(input[type="text"], select),
.message_status_wrap
    :is(input[type="text"], input[type="datetime-local"], select),
.simulation_status_btn {
    padding: 8px 12px !important;
    background-color: #f9f9fc !important;
    border: 1px solid #e0e2e7 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0.875rem !important;
    font-family: var(--main-font) !important;
    line-height: 24px !important;
    letter-spacing: 0.5px !important;
    color: var(--light-dark-color);
    font-weight: 500 !important;
    height: 42px;
}

.message_status_wrap input[type="text"]:focus,
.message_status_wrap input[type="datetime-local"]:focus,
.message_status_wrap select:focus,
.simulation_status_btn:focus {
    box-shadow: none !important;
    outline: none !important;
}

.flatpickr-calendar .flatpickr-current-month select:focus,
.flatpickr-calendar .flatpickr-current-month select {
    outline: none;
    box-shadow: none;
}

.simulation_status_dropdown li {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 0.875rem !important;
    font-family: var(--main-font) !important;
    line-height: 24px !important;
    letter-spacing: 0.5px !important;
    color: var(--light-dark-color) !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    cursor: pointer !important;
    padding: 0.1rem 0.5rem;
    transition: all 200ms ease-in-out;
}

.simulation_status_dropdown li.active,
.simulation_status_dropdown li:hover {
    background-color: #0a3d7bcc;
    color: var(--white-color) !important;
}

.simulation_status_dropdown li.ic_disabled {
    opacity: 0.6;
}

.simulation_status_dropdown li:last-child {
    margin: 0 !important;
}

.message_status_wrap :is(select, input[type="text"]::placeholder) {
    color: var(--light-dark-color);
    font-size: 0.875rem;
    font-family: var(--main-font);
    line-height: 24px;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.form-select {
    background-image: url("../images/dropdown_icon.svg") !important;
    background-size: 0.625rem !important;
}

.message_info_card {
    background-color: var(--white-color);
    filter: drop-shadow(0 4px 30px #2e2d741a);
    border-radius: 12px;
    padding: 24px 1.25rem !important;
    gap: 0.875rem;
    display: flex;
    align-items: baseline;
    border: 1px solid var(--white-color);
    transition: all 300ms ease-in-out;
}

.message_info_card .message_info_card_title {
    font-size: 1rem;
    font-family: var(--main-font);
    line-height: 24px;
    letter-spacing: 0.5px;
    font-weight: 500;
    color: #777980;
}

.message_info_card .message_info_card_count {
    font-size: 1.5rem;
    font-family: var(--main-font);
    line-height: 32px;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--dark-color);
}

.message_info_card .badge {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-content: center;
    border-radius: 8px;
}

.message_info_card.home .badge,
.message_info_card.message .badge {
    background-color: #e9faf7;
}

.message_info_card.roles .badge {
    background-color: #fff0ea;
}

/* simulation status svg in option start*/
#simulationStatus {
    width: 100% !important;
}

#simulationStatus .dd-select {
    padding: 11px 12px !important;
    background-color: #f9f9fc !important;
    border: 1px solid #e0e2e7 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0.875rem;
    font-family: var(--main-font);
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--light-dark-color) !important;
    font-weight: 500;
    width: 100% !important;
}

#simulationStatus .dd-selected {
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    padding: 0px !important;
    font-weight: 500 !important;
}

#simulationStatus .dd-selected-text {
    color: #667085;
    line-height: 0px !important;
}

#simulationStatus .dd-pointer-down {
    border: solid 5px transparent !important;
    border-top: #858d9d !important;
}

#simulationStatus .dd-pointer-up {
    border: solid 5px transparent !important;
    border-bottom: solid 5px #858d9d !important;
    margin-top: -8px;
}

#simulationStatus .dd-option {
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
}

#simulationStatus .dd-option.dd-option-selected:hover,
#simulationStatus .dd-option:hover {
    background-color: #1967d2 !important;
    color: var(--white-color) !important;
}

#simulationStatus .dd-option.dd-option-selected {
    background-color: transparent !important;
}

#simulationStatus .dd-options {
    width: 100% !important;
    border: 1px solid --light-dark-color;
    box-shadow: none;
    border-radius: 8px;
}

#simulationStatus .dd-options .dd-option label {
    line-height: 20px !important;
    font-size: 0.875rem !important;
    font-family: var(--main-font) !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    word-spacing: 1px !important;
}

/* simulation status svg in option end*/

/* .message_info_container {
    overflow-x: overlay;
} */

/* hover effect on card start*/
.message_info_container .message_info_card.home:hover {
    border: 1px solid var(--red-color);
    box-shadow: 0px 0px 30px -10px var(--red-color);
}

.message_info_container
    .message_info_card.home:hover
    :is(.message_info_card_title, .message_info_card_count) {
    color: var(--red-color);
}

.message_info_container .message_info_card.home:hover .badge {
    background-color: var(--red-color);
}

.message_info_container
    :is(
        .message:hover .badge svg path,
        .roles:hover .badge svg path,
        .home:hover .badge svg path
    ) {
    fill: var(--white-color);
}

.message_info_container .message_info_card.roles:hover {
    border: 1px solid var(--orange-color);
    box-shadow: 0px 0px 30px -10px var(--orange-color);
}

.message_info_container
    .message_info_card.roles:hover
    :is(.message_info_card_title, .message_info_card_count) {
    color: var(--orange-color);
}

.message_info_container .message_info_card.roles:hover .badge {
    background-color: var(--orange-color);
}

.message_info_container .message_info_card.message:hover {
    border: 1px solid var(--light-aqua);
    box-shadow: 0px 0px 30px -10px var(--light-aqua);
}

.message_info_container
    .message_info_card.message:hover
    :is(.message_info_card_title, .message_info_card_count) {
    color: var(--light-aqua);
}

.message_info_container .message_info_card.message:hover .badge {
    background-color: var(--light-aqua);
}

/* hover effect on card start end*/
.messages_table_wrap_main {
    background-color: var(--white-color);
    filter: drop-shadow(0 4px 30px #2e2d741a);
    border-radius: 8px;
}

.messages_table_heading .messages_table_title {
    font-family: var(--main-font);
    color: var(--dark-color);
    line-height: 30px;
    font-size: 1.25rem;
    font-weight: 600;
}

.messages_table_wrap thead tr th {
    background-color: #f9f9fc;
    color: var(--dark-color);
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-family: var(--main-font);
}

.messages_table_wrap tbody tr td {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-family: var(--main-font);
    border: none;
    vertical-align: middle;
}

.messages_table_wrap tbody tr :is(.messages_table_from, .messages_table_to) {
    color: var(--light-dark-color);
    width: max-content;
}

.messages_table_wrap tbody tr .messages_table_msg {
    color: var(--main-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.messages_table_wrap tbody td:has(.messages_table_msg) {
    width: 55%;
}

.messages_table_wrap tbody tr .messages_table_date {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-family: var(--main-font);
    color: var(--light-dark-color);
    display: inline-block;
    width: max-content;
}

.messages_table_wrap tbody tr .messages_badge {
    padding: 5px 8px;
    background: var(--green-color);
    border-radius: 0.875rem;
    line-height: 1.25rem;
    color: var(--light-color);
}

.messages_table_wrap tr {
    border-color: #f0f1f3;
    border-bottom: 1px solid #f0f1f3;
}

.messages_table_wrap table :is(th, td) {
    padding: 18px 22px;
}

.messages_table_pagination_wrap {
    justify-content: space-between;
}

.messages_table_pagination_wrap .msg_table_pagination_title {
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 500;
    color: var(--light-dark-color);
    line-height: 1.25rem;
    letter-spacing: 0.5px;
}

.messages_table_pagination .page-item .page-link {
    border-radius: 8px;
    background-color: #f4ecfb;
    border: none;
    color: var(--main-color);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 250ms ease-in-out;
    outline: none !important;
    box-shadow: none !important;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-content: center;
}

.messages_table_pagination
    :is(.page-item.active .page-link, .page-item .page-link:hover) {
    background-color: var(--main-color);
    color: var(--white-color);
}

.messages_table_pagination
    :is(.page-item.disabled a, .page-item.disabled a svg path) {
    fill: #858d9dcc;
    color: #858d9dcc;
}

/* Message page End here */
/* Strems page Start here */
.strems_breadcrumb_wrap a {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    color: #883dcf;
    font-family: var(--main-font);
}

.strems_breadcrumb_wrap p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    color: var(--light-dark-color);
    font-family: var(--main-font);
}

.streams_table_wrap {
    background-color: var(--white-color);
    filter: drop-shadow(0 4px 30px #2e2d741a);
    border-radius: 8px;
    padding-top: 0.625rem;
}

.streams_table_wrap:has(.strems_role_popup:not(.strems_role_popup .d-none)),
.userlist_table_wrap:has(
        .userlist_strems_role_popup:not(.userlist_strems_role_popup.d-none)
    ) {
    filter: none !important;
}

.streams_table_wrap :is(tbody tr, thead tr) {
    border-bottom: 1px solid;
    border-color: #f0f1f3;
}

.streams_table_wrap thead tr th {
    color: var(--dark-color);
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-family: var(--main-font);
    padding: 0.5rem 1.375rem 1.125rem 1.375rem;
    text-wrap: nowrap;
    border: none;
}

.streams_table_wrap table td {
    padding: 16px 22px;
}

table td:has(.streams_child_table) {
    padding: 0;
}

.main_dropdown_wrap {
    max-height: 50vh;
    overflow-x: overlay;
}

.streams_table_wrap tbody tr td {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-family: var(--main-font);
    border: none;
}

.streams_table_wrap tbody tr .streams_table_desc {
    color: var(--main-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.streams_table_wrap tbody tr .streams_table_name {
    color: var(--dark-color);
    font-weight: bold;
    position: relative;
}

.streams_table_wrap .streams_table_name.active svg,
.userlist_table_wrap .userlist_table_name.active svg {
    transform: rotate(-180deg);
}

.streams_table_wrap .streams_table_name.active svg path,
.userlist_table_wrap .userlist_table_name.active svg path {
    fill: var(--main-color);
}

.streams_table_wrap tbody tr .streams_table_roles {
    text-align: center;
    color: var(--light-dark-color);
}

.streams_child_table thead tr th {
    background-color: #f2f2ff;
}

.streams_child_table tbody tr:last-child {
    border: none;
}

.streams_child_table thead tr th {
    padding: 10px 30px;
    color: var(--main-color);
    font-family: var(--main-font);
    font-size: 0.813rem;
}

.streams_child_table tbody tr td {
    padding: 10px 30px;
    color: var(--light-dark-color);
    font-size: 0.813rem;
}

.streams_table_wrap thead tr th:last-child,
.streams_child_table
    :is(tbody tr td:nth-last-child(-n + 2), thead th:nth-last-child(-n + 2)) {
    text-align: center;
}

.streams_child_table .streams_child_action:hover svg path {
    fill: rgba(246, 20, 20);
}

.streams_child_table thead tr th:first-child {
    width: 55%;
}

.streams_child_add_Role a {
    color: var(--main-color);
    font-family: var(--main-font);
    font-size: 0.813rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
}

.add_strems_popup_wrap {
    position: fixed;
    inset: 0;
    background-color: #00000026;
    z-index: 99;
    backdrop-filter: blur(2px);
}

.add_strems_popup_wrap .add_strems_popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    background-color: var(--white-color);
    display: grid;
    gap: 0.875rem;
    margin: 15px 0;
    max-height: 90vh;
    overflow: overlay;
}

.add_strems_popup_wrap .add_strems_popup form {
    display: grid;
    gap: 0.875rem;
    /* max-height: 90vh;
    overflow: overlay; */
}

.add_strems_role_left_con .userlist_roles_data_wrap,
.add_strems_role_left_con .userinfo_roles_data_wrap,
.add_strems_role_left_con .add_roles_data_wrap {
    max-height: 60vh;
    overflow: overlay;
}

.add_strems_popup form .form-label {
    margin: 0;
    font-size: 0.875rem;
    color: #777980;
    letter-spacing: 0.5px;
    line-height: 1.25rem;
    font-weight: 500;
    font-family: var(--main-font);
}

.add_strems_popup .add_strems_popup_title {
    font-size: 1.125rem;
    color: var(--dark-color);
    line-height: 28px;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: var(--main-font);
}

.add_strems_popup input[type="text"]:not(.compose_subject_wrap input),
.add_strems_popup
    :is(
        input[type="date"],
        input[type="email"],
        input[type="password"],
        textarea,
        select
    ) {
    padding: 8px 12px;
    background-color: #f9f9fc !important;
    border: 1px solid #e0e2e7 !important;
    border-radius: 8px;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0.875rem;
    font-family: var(--main-font);
    line-height: 24px;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.add_strems_popup_btn_wrap .cancel_button {
    color: #8a3fcfa6;
    border-color: #8a3fcfa6;
}

.add_strems_popup_btn_wrap .ctm_button {
    background-color: #8a3fcfa6;
}

.add_strems_role_wrap
    :is(.add_strems_role_left_con, .add_strems_role_right_con) {
    background-color: var(--white-color);
    filter: drop-shadow(0 4px 30px #2e2d741a);
    border-radius: 12px;
}

.add_strems_role_left_con .form-check-input[type="checkbox"] {
    border-width: 2px;
    border-color: #858d9d !important;
    border-radius: 6px !important;
    width: 1.25rem;
    height: 1.25rem;
    outline: none !important;
    box-shadow: none !important;
}

.add_strems_role_left_con .form-check-label {
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 500;
    color: var(--dark-color);
    line-height: 1.25rem;
    letter-spacing: 0.5px;
}

.add_strems_role_left_con
    .form-check:has(.form-check-input[type="checkbox"]:checked)
    .form-check-label {
    color: var(--main-color);
}

.add_strems_role_left_con .form-check-input[type="checkbox"]:checked:hover,
.add_strems_role_left_con .form-check-input[type="checkbox"]:checked:focus,
.add_strems_role_left_con .form-check-input[type="checkbox"]:checked {
    background-color: var(--main-color);
    border-color: var(--main-color) !important;
    outline: none !important;
    box-shadow: none !important;
}

.add_strems_role_right_con ol {
    list-style: auto !important;
}

.add_strems_role_right_con .main_dropdown > li {
    margin-left: 21px;
    list-style: decimal;
    transform: translateY(-5px);
    line-height: normal;
    color: var(--main-color);
}

.add_strems_role_left_con .compose_user_dropdown ul .form-check-label {
    font-size: 0.875rem;
}

.add_strems_role_right_con .compose_user_dropdown ul li span {
    font-size: 0.875rem;
    font-family: var(--main-font);
    line-height: normal;
    letter-spacing: 0.5px;
    font-weight: 500;
    color: var(--main-color);
    display: inline;
}

.add_strems_role_left_con .form-select {
    color: var(--dark-color);
    font-size: 0.875rem;
    font-family: var(--main-font);
    line-height: 24px;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.add_roles_success_status {
    border-radius: 8px;
    border: 1px solid var(--green-color);
    background-color: #f5fbf7;
}

.add_roles_error_status {
    border-radius: 8px;
    border: 1px solid #e71f24;
    background-color: #fef4f3;
}

.add_roles_status_wrap {
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 0.875rem;
}

.add_roles_status_wrap .add_roles_status_title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--green-color);
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-family: var(--main-font);
}

.add_roles_status_wrap .add_roles_status_desc {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--dark-color);
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-family: var(--main-font);
}

.add_roles_error_status .add_roles_status_title {
    color: #e71f24;
}

/* date picker css start */
.xdsoft_noselect {
    /* display: block !important; */
    margin-top: 4px;
}

.xdsoft_datetimepicker {
    box-shadow: none !important;
    border: 1px solid #e0e2e7 !important;
    border-radius: 4px;
    background-color: #f9f9fc !important;
}

.xdsoft_calendar th {
    color: #000 !important;
}

.xdsoft_calendar table,
.xdsoft_calendar th,
.xdsoft_calendar td {
    border: none !important;
    background-color: #fff !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: normal !important;
}

.xdsoft_datetimepicker .xdsoft_label {
    font-weight: normal !important;
    font-size: 14px !important;
}

.xdsoft_datetimepicker .xdsoft_month {
    text-align: center !important;
}

.xdsoft_calendar table tr th:first-child,
.xdsoft_calendar table tr th:last-child {
    color: #f36a6a !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current {
    color: #fff;
    box-shadow: unset !important;
    background-color: #0a3e7c !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td > div {
    padding-right: 0px !important;
}

.xdsoft_current,
.xdsoft_option:hover {
    margin-bottom: 0.5px;
    font-weight: normal !important;
}

.xdsoft_time_box {
    border: none !important;
}

.xdsoft_other_month {
    color: #f36a6a !important;
    opacity: 1 !important;
}

.xdsoft_time {
    border: 1px solid #0a3e7c !important;
    border-radius: 4px !important;
    color: #0a3e7c !important;
    background-color: none !important;
    margin: 2px 0px !important;
    font-weight: 500;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    background-color: #fff !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_calendar td.xdsoft_current,
.xdsoft_today,
.xdsoft_current,
.xdsoft_option:hover,
.xdsoft_datetimepicker.xdsoft_noselect .xdsoft_calendar td:hover,
.xdsoft_datetimepicker.xdsoft_noselect
    .xdsoft_timepicker
    .xdsoft_time_box
    > div
    > div:hover {
    color: var(--white-color) !important;
    background: var(--main-color) !important;
    box-shadow: none !important;
    border-radius: 10% !important;
}

.xdsoft_current,
.xdsoft_option:hover {
    margin-bottom: 0.5px;
    font-weight: normal !important;
    border-radius: 0% !important;
}

.xdsoft_current {
    border-radius: 10% !important;
}

/* date picker css end */

/* Strems page End here */
/* Userlist page Start here */
.userlist_table_wrap thead tr th {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-family: var(--main-font);
    text-wrap: nowrap;
    border: none;
}

.userlist_table_wrap tbody tr td {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 400;
    font-family: var(--main-font);
    border: none;
    color: var(--light-dark-color);
}

.userlist_table_wrap .userlist_table_status {
    display: inline-block;
    width: max-content;
}

.userlist_table_wrap .userlist_table_name span {
    width: max-content;
}

.userlist_table_wrap .userlist_table_email {
    color: var(--main-color);
}

.userlist_table_wrap .userlist_table_detail {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.userlist_table_wrap .userlist_table_detail a {
    padding: 8px 14px;
    border-radius: 8px;
    background-color: #f4ecfb;
    color: var(--main-color) !important;
    cursor: pointer;
    font-weight: 600;
}

.userlist_filter.active,
.userlist_filter.active svg path,
.userlist_filter:hover svg path,
.userlist_filter:hover {
    background-color: var(--main-color) !important;
    fill: #fff;
}

.userlist_filter .filter_popup_heading,
.userlist_filter
    .form-check:has(.form-check-input[type="checkbox"]:checked)
    .form-check-label {
    color: var(--main-color);
}

.userlist_filter .form-check-input[type="checkbox"]:checked:hover,
.userlist_filter .form-check-input[type="checkbox"]:checked:focus,
.userlist_filter .form-check-input[type="checkbox"]:checked {
    background-color: var(--main-color);
    border-color: var(--main-color) !important;
    outline: none !important;
    box-shadow: none !important;
}

.messages_table_pagination_wrap .pagination .pagination_button {
    border-radius: 8px !important;
    background-color: #f4ecfb !important;
    border: none !important;
    color: var(--main-color) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    transition: all 250ms ease-in-out !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-content: center;
}

.messages_table_pagination_wrap
    .pagination
    .pagination_button:hover:not(span.pagination_button) {
    background-color: var(--main-color) !important;
    color: var(--white-color) !important;
}

.messages_table_pagination_wrap .pagination span.pagination_button {
    fill: #858d9dcc !important;
    color: #858d9dcc !important;
}

/* Userlist page End here */
/* User Info page Start here */
.user_info_main_heading {
    font-size: 2rem;
    color: var(--dark-color);
    font-weight: 600;
    line-height: normal;
    font-family: var(--main-font);
}

.user_info_main_desc {
    font-size: 1.125rem;
    color: #777980;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 1px;
}

.user_info_profile img {
    max-width: 100px;
    max-height: 100px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.user_info_names .user_info_name_label {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    font-family: var(--main-font);
    color: var(--light-dark-color);
    font-weight: 500;
}

.user_info_names .user_info_name {
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    font-family: var(--main-font);
    color: var(--dark-color);
    font-weight: 600;
}

.user_info_wrap hr {
    border-color: #e0e2e7;
    opacity: 1;
}

.user_info_details_wrap {
    gap: 1.125rem;
}

.user_info_details_wrap .user_info_social_icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f1f3;
    border-radius: 50%;
}

.user_info_social_title p {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--light-dark-color);
    font-family: var(--main-font);
    font-weight: 500;
    line-height: 1.25rem;
    text-transform: capitalize;
}

.user_info_social_title h5 {
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    color: var(--dark-color);
    font-family: var(--main-font);
    font-weight: 600;
    line-height: 1.25rem;
    word-break: break-all;
}

.change_profile_btn,
.profile_update_wrap a,
.user_info_btn_wrap a {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--main-font);
    letter-spacing: 0.5px;
    line-height: 1.25rem;
    text-align: center;
}

.change_profile_btn,
.profile_update_wrap .profile_update,
.user_info_btn_wrap .user_reset_password {
    color: #883dcf;
    background-color: #f4ecfb;
}

.user_info_btn_wrap .user_disable_user {
    color: var(--white-color);
    background-color: #cd3a45;
}

.user_table_heading_wrap .remove_roles {
    background-color: #f4ecfb;
}

.user_table_heading_wrap .remove_roles span {
    color: #883dcf;
}

.user_info_table_wrap thead tr th {
    font-size: 0.875rem;
    color: var(--main-color);
}

.user_info_table_wrap .user_info_table_Simulations {
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    color: var(--main-color);
    font-family: var(--main-font);
    font-weight: 400;
    line-height: 1.25rem;
    width: max-content;
}

.user_info_table_wrap :is(.user_info_table_Streams, .user_info_table_Roles) {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--light-dark-color);
    font-family: var(--main-font);
    font-weight: 600;
    line-height: 1.25rem;
}

.user_info_table_wrap .user_info_table_Roles {
    display: inline-block;
    width: max-content;
}

.user_info_table_Simulations input[type="checkbox"] {
    border-width: 2px;
    border-color: #858d9d !important;
    border-radius: 6px !important;
    width: 1.25rem;
    height: 1.25rem;
    outline: none !important;
    box-shadow: none !important;
    margin: 0;
}

.user_info_table_Simulations .form-check-input[type="checkbox"]:checked:hover,
.user_info_table_Simulations .form-check-input[type="checkbox"]:checked:focus,
.user_info_table_Simulations .form-check-input[type="checkbox"]:checked {
    background-color: var(--main-color);
    border-color: var(--main-color) !important;
    outline: none !important;
    box-shadow: none !important;
}

.user_info_table_pagination .page-item .page-link {
    background-color: #f4ecfb;
    color: #883dcf;
}

.user_info_table_pagination
    .page-item
    :is(.page-link.active, .page-link:hover) {
    background-color: #883dcf;
    color: var(--white-color);
}

/* User Info page End here */
/* User Profile page Start here */
.user_profile_table_wrap tbody .user_profile_table_roles {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--light-dark-color);
    font-family: var(--main-font);
    font-weight: 400;
    line-height: 1.25rem;
}

.user_profile_table_wrap tbody .user_profile_table_roles span {
    width: max-content;
}

.user_profile_table_wrap tbody .user_profile_table_Stream {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--light-dark-color);
    font-family: var(--main-font);
    font-weight: 600;
    line-height: 1.25rem;
}

.user_profile_table_wrap tbody .user_profile_table_simulations {
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    color: var(--main-color);
    font-family: var(--main-font);
    font-weight: 400;
    line-height: 1.25rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.user_profile_table_wrap thead tr th {
    font-size: 0.875rem;
    color: var(--main-color);
    font-family: var(--main-font);
    font-weight: 500;
    line-height: 1.25rem;
}

.update_profile_wrap form input {
    color: #777980 !important;
}

.change_profile_wrap {
    border: 1px dashed #e0e2e7;
    border-radius: 8px;
    background-color: #f9f9fc;
}

.change_profile_wrap .change_profile_img img {
    border-radius: 8px;
    position: relative;
    max-width: 100px;
    max-height: 100px;
    width: 100%;
    height: 100%;
}

.change_profile_wrap .change_profile_img::before {
    position: absolute;
    content: "";
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    z-index: 999;
    background: url("../images/right.svg"), #d3f4ef;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: center;
}

.change_profile_wrap p {
    font-size: 0.75rem;
    color: #858d9d;
    font-family: var(--main-font);
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.25rem;
}

.update_profile_wrap .profile_photo_title {
    font-size: 0.875rem;
    color: #777980;
    font-family: var(--main-font);
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.25rem;
}

.update_profile_wrap .profile_section_title {
    font-size: 1rem;
    color: var(--dark-color);
    font-family: var(--main-font);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.25rem;
}

.change_profile_wrap input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* User Profile page End here */
/* List Preset Message page Start here */
.list_message_table_wrap {
    background-color: var(--white-color);
    filter: drop-shadow(0 4px 30px #2e2d741a);
    border-radius: 8px;
    padding-top: 0.625rem;
}

.list_message_table_wrap tbody tr,
.list_message_table_wrap thead tr {
    border-bottom: 1px solid;
    border-color: #f0f1f3;
}

.list_message_table_wrap thead tr th {
    color: var(--dark-color);
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-family: var(--main-font);
    text-wrap: nowrap;
    border: none;
}

.list_message_table_wrap :is(thead tr th, table td) {
    padding: 16px 22px;
}

.list_message_table_wrap tbody tr td {
    font-size: 0.75rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-family: var(--main-font);
    border: none;
    text-wrap: nowrap;
    color: var(--light-dark-color);
}

.list_message_table_wrap .ctm_present_message_to {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 18rem;
}

.list_message_table_wrap tbody .list_message_subject {
    font-size: 0.875rem;
    font-weight: 400;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 17.5rem;
}

.list_message_table_wrap tbody .list_message_simulation {
    font-size: 0.875rem;
    font-weight: 400;
}

.enable_disable_btn_wrap {
    font-size: 0.75rem;
    color: var(--white-color);
    font-family: var(--main-font);
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 8px;
}

.enable_disable_btn_wrap.enable_btn {
    background-color: var(--second-color);
    color: var(--white-color);
}

.enable_disable_btn_wrap.disable_btn {
    background-color: #d3787f;
    color: var(--white-color);
}

.trigger_popup_container {
    border-radius: 12px;
    filter: drop-shadow(0 4px 30px #2e2d741a);
    background-color: var(--white-color);
    row-gap: 0.875rem;
    display: flex;
    flex-direction: column;
}

.trigger_popup_heading {
    font-size: 1.125rem;
    color: var(--dark-color);
    font-family: var(--main-font);
    line-height: 28px;
    font-weight: 600;
}

.trigger_popup_container .trigger_popup_title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-family: var(--main-font);
    color: #858d9d;
    font-weight: 500;
}

.trigger_popup_radio_wrap .trigger_popup_radio {
    background-color: #f9f9fc;
    border: 1px solid #e0e2e7;
    border-radius: 8px;
}

.trigger_popup_radio .form-check-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-family: var(--main-font);
    color: var(--dark-color);
    font-weight: 400;
}

.trigger_popup_radio input[type="radio"] {
    border-color: #858d9d;
    border-width: 2px;
}

.trigger_popup_radio input[type="radio"]:checked,
.trigger_popup_radio input[type="radio"]:focus {
    outline: none;
    background-color: var(--main-color);
    border-color: var(--main-color);
    box-shadow: none;
}

.trigger_popup_radio .form-check-input[disabled] ~ .form-check-label {
    color: #858d9d;
}

.trigger_popup_container .choose_simulations_select select {
    color: var(--main-color);
}

.popup_pagination a span {
    width: 0.65rem;
    height: 0.65rem;
    display: inline-block;
    border: 1px solid var(--main-color);
    border-radius: 50%;
}

.popup_pagination a span.active {
    background-color: var(--main-color);
}

.add_strems_popup .tox-tinymce {
    border: none;
    height: 350px !important;
}

.add_strems_popup .tox-editor-header,
.add_strems_popup .tox .tox-toolbar__group {
    padding: unset;
}

.add_strems_popup .tox .tox-statusbar {
    display: none !important;
}

.add_strems_popup .tox-editor-header {
    box-shadow: unset !important;
}

.add_strems_popup .tox .tox-edit-area__iframe {
    background-color: #f9f9fc;
    border: 1px solid #eee;
    border-radius: 8px;
}

.add_strems_popup .tox .tox-tbtn svg {
    fill: #858d9d !important;
}

.add_strems_popup .tox .tox-edit-area::before {
    content: unset;
}

.add_strems_popup .cancel_button,
.trigger_popup_btn_wrap .cancel_button {
    border-color: var(--main-color);
    color: var(--main-color);
}

.stage_triggered_wrap select.form-select {
    background-image: url("../images/dark_dropdown.svg");
    background-size: 0.625rem;
}

#time_triggered,
#stage_triggered {
    padding: 36px 18px;
}

.popup_date_picker input[type="date"] {
    padding-left: 2.25rem;
    color: var(--main-color);
    font-weight: 600;
}

.popup_date_picker::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 8px;
    cursor: pointer;
    background-image: url("../images/calendar.svg");
    width: 1.125rem;
    height: 1.125rem;
}

/* List Preset Message page End here */
/* Message Details Start here */
.message_details :is(input[type="text"], select) {
    color: var(--dark-color);
}

.message_details .massage_heading {
    font-size: 1.125rem;
    font-family: var(--main-font);
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 1px;
    color: var(--dark-color);
}

.message_details .massage_input_label {
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    color: #777980;
}

.message_details #simulation_status.success {
    color: var(--green-color);
}

.message_details #simulation_status.error {
    color: #cd3a45;
}

.message_email_main_wrap {
    background-color: var(--white-color);
    border-radius: 12px;
    border: 1px solid #e0e2e7;
}

.message_email_heading_wrap {
    padding: 30px 24px;
    border-bottom: 1px solid;
    border-color: #e0e2e7;
}

.message_email_heading_wrap .message_email_heading {
    font-size: 1.5rem;
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 600;
    line-height: 1.875rem;
}

.message_email_heading_wrap .message_email_desc {
    font-size: 0.875rem;
    font-family: var(--main-font);
    color: #777980;
    font-weight: 400;
    line-height: 1.25rem;
}

.email_section_main_wrap .email_day_name {
    font-size: 1.25rem;
    font-family: var(--main-font);
    color: var(--dark-color);
    font-weight: 600;
    line-height: 1.875rem;
    letter-spacing: 1px;
}

.email_template_wrap {
    border-radius: 8px;
    background-color: #f9f9fc;
    border: 1px solid #e0e2e7;
    padding: 1.125rem;
    gap: 1.875rem;
    position: relative;
}

.email_template_wrap:has(.email_controls .message-unread) :is(.email_desc_main_wrap p) {
    font-weight: 600;
}

.email_template_wrap:has(.email_controls .message-read) :is(.email_subject_wrap p, .email_from_wrap span, .email_desc_main_wrap p) {
    font-weight: 400;
}

.email_template_wrap .svg_wrap::before {
    content: "";
    width: 26px;
    height: 26px;
    position: absolute;
    background: #f4ecfb;
    border-radius: 100%;
    left: -3rem;
    transform: translateY(-50%);
    z-index: 9;
    top: 12px;
}

.email_template_wrap .svg_wrap {
    position: absolute;
    top: 0;
    left: 0;
}

.email_template_line {
    position: relative;
}

.email_hide_msg::after,
.email_template_line::after {
    content: "";
    width: 1px;
    height: 100%;
    background: #e0e2e7;
    position: absolute;
    top: 25px;
    left: -2.25rem;
    z-index: 1;
}

form.email_template_line::after {
    top: 7px;
    left: -2.2rem;
    height: calc(100% + 5px);
}

.email_template_child_wrap.email_template_line::after {
    content: "";
    width: 1px;
    height: calc(100% + 25px);
    background: #e0e2e7;
    position: absolute;
    top: 0px;
    left: -2.2rem;
    z-index: 1;
}

.email_hide_msg.hide_msg::after {
    position: relative;
    content: none;
}

.email_hide_msg svg,
.email_template_wrap #message_svg {
    position: absolute;
    left: -2.65rem;
    top: 5px;
    z-index: 9;
}

.email_template_wrap #message_svg path {
    fill: var(--main-color);
}

.email_template_line:last-child::after {
    position: relative;
    content: none;
}

.email_template_wrap .email_title {
    font-size: 0.875rem;
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 700;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
}

.email_template_wrap .email_from_user {
    border-radius: 4px;
    background-color: #e1f0f8;
    padding: 4px 8px;
    color: var(--main-color);
    font-size: 0.75rem;
    font-family: var(--main-font);
    line-height: 1.25rem;
    font-weight: 500;
}

.email_controls {
    gap: 12px;
}

.email_controls .email_control_item {
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-content: center;
}

.email_timing_wrap .email_timing {
    font-size: 0.75rem;
    font-family: var(--main-font);
    color: #777980;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.25rem;
}

.email_dropdown {
    width: 20px;
    height: 20px;
    display: grid;
    place-content: center;
}

.email_dropdown.active svg {
    transform: rotate(-180deg);
}

.email_cc_wrap,
.email_to_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
}

.email_cc_wrap .email_cc_user,
.email_to_wrap .email_to_user {
    border-radius: 6.25rem;
    background-color: #e1f0f8;
    font-family: var(--main-font);
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
    padding: 4px 8px;
    color: var(--main-color);
    display: inline-block;
}

.email_subject_wrap p {
    font-size: 0.875rem;
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 800;
    letter-spacing: 0.5px;
    word-spacing: 1px;
    line-height: 1rem;
}

.email_desc_main_wrap {
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 400;
    color: #4a4c56;
    line-height: 20px;
    letter-spacing: 0.5px;
}

.email_desc_main_wrap.short_dec {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.email_desc_main_wrap table td {
    border-width: 1px;
    padding: 4px 6px;
}

.email_desc_main_wrap a {
    color: #0d6efd;
    text-decoration: underline;
}

.email_desc_main_wrap :is(ol, ul) {
    padding-left: 18px;
}

.email_desc_main_wrap ul {
    list-style: disc;
}

.email_desc_main_wrap p:not(:last-child) {
    margin-bottom: 1rem;
}

.email_desc_main_wrap :is(h1, h2, h3, h4, h5, h6):not(:last-child) {
    margin-bottom: 0.5rem;
}

.email_desc_main_wrap h1 {
    font-size: 22px;
    font-weight: 900;
}

.email_desc_main_wrap h2 {
    font-size: 20px;
    font-weight: 800;
}

.email_desc_main_wrap h3 {
    font-size: 18px;
    font-weight: 700;
}

.email_desc_main_wrap h4 {
    font-size: 16px;
    font-weight: 600;
}

.email_desc_main_wrap h5 {
    font-size: 14px;
    font-weight: 500;
}

.email_desc_main_wrap h6 {
    font-size: 12px;
    font-weight: 400;
}

.email_desc_main_wrap p br {
    display: block;
    margin-bottom: 16px;
    content: "";
}

.email_file_atteched_wrap .email_file_atteched {
    border-radius: 6.25rem;
    border: 1px solid var(--main-color);
    align-items: center;
}

.email_file_atteched_wrap .email_file_atteched span {
    font-size: 0.75rem;
    font-family: var(--main-font);
    font-weight: 500;
    color: var(--main-color);
    line-height: 20px;
    letter-spacing: 0.5px;
}

.email_file_atteched_wrap .email_file_atteched.blue svg path {
    fill: var(--main-color);
}

.email_file_atteched_wrap .email_file_atteched.green svg path {
    fill: #2c954c;
}

.email_file_atteched_wrap .email_file_atteched.red svg path {
    fill: #c40024;
}

.email_hide_msg .email_hide_button {
    font-size: 0.825rem;
    font-family: var(--main-font);
    color: var(--white-color);
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    background-color: var(--green-color);
    border-radius: 100px;
}

.email_hide_msg svg::before {
    position: absolute;
    content: "";
    border-left: 1px solid #000;
}

.compose_form_wrap .compose_form_title {
    font-size: 1rem;
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 1px;
}

.compose_form_wrap .compose_border_bottom {
    border-bottom: 1px solid #e0e2e7;
}

.compose_from_wrap .from-selected-role,
.compose_from_wrap .compose_from_user {
    font-size: 0.875rem;
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.5px;
    border-radius: 4px;
    background-color: #f9f9fc;
    border: 1px solid #e0e2e7;
    cursor: pointer;
}

.preset-to-user-wrap .to-selected-role,
.preset-cc-user-wrap .cc-selected-role,
.compose_cc_user_wrap .compose_cc_user,
.compose_to_user_wrap .compose_to_user {
    font-size: 0.725rem;
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.5px;
    border-radius: 4px;
    background-color: #f4ecfb;
    cursor: pointer;
}

.compose_form_cc_bcc_control .compose_from_title {
    font-size: 0.875rem;
    font-family: var(--main-font);
    color: #858d9d;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.5px;
    cursor: pointer;
    height: fit-content;
}

.compose_subject_wrap input[type="text"] {
    font-size: 0.875rem;
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}

.compose_message_wrap textarea::placeholder {
    font-size: 0.875rem;
    font-family: var(--main-font);
    color: #858d9d;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.5px;
}

.compose_message_wrap #message_body_ifr {
    padding-left: 8px;
    padding-right: 8px;
}

.compose_attched_img p {
    font-size: 0.875rem;
    font-family: var(--main-font);
    color: #858d9d;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.compose_attched_img {
    border: 2px dashed #e0e2e7;
    border-radius: 8px;
    background-color: #f9f9fc;
}

.file-preview svg {
    width: 60px;
    height: 60px;
}

.file-preview svg path {
    fill: var(--main-color);
}

.file-preview .file-item {
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.file-preview .file-item img {
    max-width: 60px;
    max-height: 60px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.file-preview .file-item span {
    line-break: anywhere;
    text-wrap: wrap;
    word-wrap: break-word;
    font-size: 12px;
    line-height: normal;
    color: var(--dark-color);
    font-family: var(--main-font);
    text-align: center;
}

.add_strems_role_wrap .compose_user_dropdown {
    max-height: 60vh;
    overflow-y: overlay;
}

.compose_user_dropdown {
    background-color: var(--white-color);
    border-radius: 12px;
    border: 1px solid #e0e2e7;
    filter: drop-shadow(0 4px 30px #2e2d741a);
    position: absolute;
    top: 36px;
    left: 60px;
    max-height: 70vh;
    overflow: overlay;
}

.compose_user_dropdown ul input[type="checkbox"] {
    outline: none !important;
    box-shadow: none !important;
    border-color: #858d9d;
    border-width: 2px !important;
    margin: 0;
}

.compose_user_dropdown ul input[type="checkbox"]:checked:focus,
.compose_user_dropdown ul input[type="checkbox"]:checked {
    border-color: var(--main-color);
    background-color: var(--main-color);
}

.compose_user_dropdown
    li:has(.form-check-input[type="checkbox"]:checked)
    .form-check-label {
    color: var(--main-color);
}

.compose_user_dropdown ul .form-check-label {
    font-size: 0.75rem;
    font-family: var(--main-font);
    line-height: normal;
    letter-spacing: 0.5px;
    font-weight: 500;
    color: #777980;
    display: inline;
}

.compose_user_dropdown .main_dropdown {
    position: relative;
}

.compose_user_dropdown .main_dropdown::before {
    content: "";
    display: block;
    width: 0px;
    position: absolute;
    top: 16px;
    bottom: 10px;
    left: 7px;
    border-left: 1px solid var(--main-color);
    z-index: -1;
}

.compose_user_dropdown .main_dropdown ul {
    padding-left: 40px;
}

.compose_user_dropdown .main_dropdown ul li {
    list-style: disc;
    position: relative;
}

.compose_user_dropdown .main_dropdown ul li::marker {
    color: var(--main-color);
}

.compose_user_dropdown .main_dropdown ul li::before {
    border-top: 1px solid var(--main-color);
    content: "";
    display: block;
    left: -32px;
    position: absolute;
    top: 13px;
    width: 18px;
}

.add_strems_role_right_con .main_dropdown {
    list-style: decimal;
    margin-left: 21px;
}

.add_strems_role_right_con .compose_user_dropdown .main_dropdown::before {
    content: "";
    display: block;
    width: 0px;
    position: absolute;
    top: 20px;
    bottom: 10px;
    left: -13px;
    border-left: 1px solid var(--main-color);
    z-index: -1;
}

.add_strems_role_right_con .compose_user_dropdown .main_dropdown ul {
    padding-left: 20px;
    margin-top: 12px;
}

.add_strems_role_right_con.compose_user_dropdown .main_dropdown ul li::before {
    border-top: 1px solid var(--main-color);
    content: "";
    display: block;
    left: -33px;
    position: absolute;
    top: 13px;
    width: 18px;
}

.email_child_horizontal_line::before {
    content: "";
    width: 50px;
    height: 20px;
    border-color: #e0e2e7 !important;
    position: absolute;
    top: -5px;
    left: -84px;
    z-index: 1;
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-bottom-left-radius: 12px;
}

.email_child_horizontal_line:has(.email_template_wrap)::before,
.email_hide_msg.email_child_horizontal_line::before {
    left: -83px;
}

/* Message Details End here */

/*--- message inbox start ----*/
.select_role {
    box-shadow: 0px 0px 6px #e0e2e7;
    border: 2px solid #ffffff;
    background: #f4ecfb !important;
    align-items: center;
    padding: 8px 12px 8px 8px;
}

.select_role button {
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.25rem;
    color: #883dcf;
}

.select_role:hover,
.select_role:active {
    outline: none;
    border: 2px solid #ffffff;
    color: #883dcf;
    background: #f4ecfb;
}

.select_role.show,
.select_role:focus-visible,
.select_role:first-child:active {
    color: #883dcf !important;
    background-color: #f4ecfb !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    outline: 2px solid #e0e2e7;
}

.inbox_datatable_table_wrap {
    background-color: var(--white-color);
    filter: drop-shadow(0 4px 30px #2e2d741a);
    border-radius: 8px;
    /* padding-top: 0.625rem; */
}

.inbox_datatable_table_wrap tbody tr,
.inbox_datatable_table_wrap thead tr {
    border-bottom: 1px solid;
    border-color: #f0f1f3;
}

.inbox_datatable_table_wrap thead tr th {
    color: var(--dark-color);
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-family: var(--main-font);
    text-wrap: nowrap;
    border: none;
}

.inbox_datatable_table_wrap thead tr th:hover {
    outline: none !important;
}

/* .inbox_datatable_table_wrap thead  .sent_title{
    min-width: 11.5rem;
    width: 100%;
} */
/* .inbox_datatable_table_wrap thead .sub_title {
    min-width: 28.5rem;
    width: 100%;
} */

.inbox_datatable_table_wrap :is(thead tr th, table td) {
    padding: 16px 22px;
}

.inbox_datatable_table_wrap tbody tr td {
    font-size: 0.75rem;
    line-height: 1.25rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-family: var(--main-font);
    border: none;
    text-wrap: nowrap;
    color: var(--light-dark-color);
    vertical-align: middle;
}

.inbox_datatable_sent .inbox_datatable_date {
    color: #1d1f2c;
    font-size: 12px;
    line-height: 1.25rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.inbox_datatable_table_wrap .inbox_datatable_sent .inbox_datatable_time {
    line-height: 1.2rem;
    font-size: 12px;
}

.inbox_datatable_table_wrap tbody .inbox_datatable_subject {
    font-size: 0.875rem;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.inbox_datatable_table_wrap tbody .inbox_datatable_subject p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 18rem;
    font-size: 0.8rem;
}

.inbox_datatable_subject .msg_received {
    background: #eaf8ff;
    padding: 6px 8px;
    border-radius: 3px;
}

.inbox_datatable_subject .msg_received svg path {
    fill: #2bb2fe;
}

.inbox_datatable_subject .Number_of_msg {
    color: #2bb2fe;
    font-size: 0.8rem;
}

.inbox_datatable_table_wrap .inbox_datatable_role p {
    color: #1a9882;
    background: #f4ecfb;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    text-overflow: ellipsis;
}

.inbox_datatable_table_wrap .inbox_datatable_from {
    font-size: 0.8rem;
    font-weight: 400;
}

.inbox_datatable_responded {
    display: grid;
    place-content: center;
}

.filter_btn_wrap.dropdown-toggle.show svg path,
.filter_btn_wrap.dropdown-toggle.show {
    background-color: var(--main-color) !important;
    fill: var(--white-color) !important;
    color: var(--white-color);
}

.inbox_filter_main_wrap .dropdown-toggle::after {
    display: none;
}

/* unread mail css */
.unread_mail td {
    background-color: #f9f9fc !important;
}

.unread_mail .inbox_datatable_sent .inbox_datatable_date {
    color: var(--main-color) !important;
}

.unread_mail .inbox_datatable_subject p {
    color: var(--main-color) !important;
    font-weight: bold;
}

.unread_mail .msg_received {
    background: #fff0ea;
}

.unread_mail .inbox_datatable_subject .msg_received svg path {
    fill: var(--orange-color);
}

.unread_mail .inbox_datatable_subject span {
    color: var(--orange-color);
}

.unread_mail .inbox_datatable_from {
    font-weight: 600;
}

.inbox_filter_dropdown {
    max-height: 70vh;
    overflow-y: overlay;
}

#custom-paging svg {
    height: 1.125rem;
}

.inbox_datatable_table_wrap div.dt-container div.dt-info {
    padding-top: 0px !important;
}

#ic_in_previous_page,
#ic_in_next_page {
    color: #0063b8 !important;
}

#msg_prev .email_desc_main_wrap ol{
    list-style: auto !important;
}
/*--- message inbox end -----*/

/* Media Query start here */
@media screen and (min-width: 1199px) {
    .massage_details_control_wrap .massage_details_control:nth-child(2) {
        padding-right: 12px !important;
    }

    .inbox_datatable_role {
        min-width: 34rem;
    }
}

@media screen and (max-width: 991px) {
    .user_table_heading_wrap .ctm_btn_wrap {
        flex: 1;
    }
}

@media screen and (max-width: 767px) {
    .main_heading,
    .user_info_main_heading {
        font-size: 1.5rem;
    }

    .strems_breadcrumb_wrap :is(a, p),
    .user_info_main_desc {
        font-size: 0.875rem;
        line-height: 20px;
        letter-spacing: 0.5px;
    }

    .messages_table_heading .messages_table_title {
        line-height: 20px;
        font-size: 1.125rem;
    }

    .inbox_datatable_table_wrap :is(thead tr th, table td),
    .list_message_table_wrap :is(thead tr th, table td) {
        padding: 16px;
        vertical-align: middle;
    }

    .strems_data_transfer a svg {
        transform: rotate(90deg);
    }

    .svg_wrap {
        display: none;
    }

    .email_template_line::after,
    .email_template_child_wrap.email_template_line::after,
    .email_child_horizontal_line::before {
        content: unset;
    }

    .compose_form_cc_bcc_control .compose_from_title,
    .compose_from_wrap .from-selected-role,
    .compose_from_wrap .compose_from_user {
        font-size: 0.75rem;
    }

    .message_details .massage_heading {
        font-size: 1rem;
        line-height: 20px;
    }

    .message_email_heading_wrap .message_email_heading {
        font-size: 1.125rem;
        line-height: 22px;
    }

    .messages_table_wrap table :is(th, td) {
        padding: 16px;
    }

    .massage_details_control_wrap .massage_details_control {
        padding: 0 !important;
    }

    .email_template_wrap {
        gap: 1rem;
    }

    .email_desc_main_wrap {
        font-size: 0.8rem;
    }

    .simulations_filter_popup .filter_popup_heading {
        font-size: 0.875rem;
        line-height: 20px;
    }

    .simulations_filter_popup .form-check-label {
        font-size: 0.8rem;
        line-height: normal;
    }

    .simulations_filter_popup .form-check-input[type="checkbox"] {
        width: 1.125rem;
        height: 1.125rem;
    }
}

@media screen and (max-width: 575px) {
    .simulation_card_wrap {
        height: 100%;
        overflow: overlay;
    }

    .simulation_card:hover {
        padding: 28px 18px;
    }

    .simulation_card:hover .simulation_card_date {
        font-size: 0.875rem;
    }

    .simulation_card:hover :is(.status-name, .simulation_running_step span) {
        font-size: 12px;
    }

    .simulation_card:hover .simulation_card_heding {
        font-size: 1.125rem;
    }

    .simulation_card {
        padding: 20px 16px;
        overflow-x: scroll;
    }

    .simulation_card .row {
        width: max-content;
        min-width: 100%;
    }

    .simulation_card_progress {
        align-items: center;
        display: flex;
        justify-content: center;
        margin-top: 8px !important;
        flex-direction: column;
    }

    .simulation_card .simulation_card_heding {
        font-size: 1rem;
        line-height: 1.125rem;
    }

    .simulation_card .simulation_card_date {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .simulation_card_user_wrap .simulation_card_user {
        font-size: 0.875rem;
    }

    .userlist_header_control .searchbar_wrap {
        width: 100%;
    }

    .userlist_header_control :where(.filter_btn_wrap, .ctm_btn_wrap) {
        flex: 1;
    }

    #time_triggered,
    #stage_triggered {
        padding: 16px;
    }

    .popup_date_picker input[type="date"] {
        padding-left: 12px;
    }

    .streams_table_wrap tbody tr .streams_table_desc {
        width: max-content;
        display: inline-block;
        overflow: visible;
    }

    .strems_control_wrap .searchbar_wrap {
        flex: 1;
    }

    .header_add_role_dropdown_ul {
        left: 0;
    }

    .compose_user_dropdown {
        left: unset;
    }

    .email_cc_wrap .email_cc_user,
    .email_to_wrap .email_to_user {
        padding: 4px 12px;
    }

    .compose_to_wrap {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .filter_btn_wrap,
    .ctm_btn_wrap {
        padding: 7px 10px;
    }

    .searchbar_wrap input[type="search"] {
        padding: 5px 10px 5px 34px;
    }

    .searchbar_wrap svg {
        top: 10px;
    }

    .filter_btn_wrap svg,
    .ctm_btn_wrap svg {
        width: 12px;
        height: 12px;
    }

    .filter_btn_wrap span,
    .ctm_btn_wrap span {
        font-size: 0.75rem;
    }

    .message_details,
    .message_status_wrap {
        padding: 16px !important;
        gap: 0.675rem;
    }

    .message_email_heading_wrap {
        padding: 16px !important;
    }

    .messages_table_wrap tbody tr .messages_table_msg {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .messages_table_heading .messages_table_title {
        line-height: 1.125rem;
        font-size: 1rem;
    }

    .email_section_main_wrap .email_day_name {
        font-size: 1.125rem;
    }

    .streams_table_wrap thead tr th {
        font-size: 0.875rem;
        line-height: 1.125rem;
        padding: 8px 16px 18px 16px;
    }

    .streams_child_table :is(thead tr th, tbody tr td),
    .streams_table_wrap table td {
        padding: 16px;
    }

    .messages_table_wrap thead tr th {
        font-size: 0.875rem;
        line-height: 1.125rem;
    }

    .compose_form_wrap .compose_form_title,
    .userlist_table_wrap tbody tr td,
    .streams_table_wrap table td,
    .streams_child_table tbody tr td,
    .messages_table_wrap tbody tr :is(.messages_table_date, td) {
        font-size: 0.8rem !important;
        line-height: 1rem !important;
    }

    .cancel_button,
    .ctm_button {
        padding: 7px 10px;
        font-size: 0.75rem;
    }

    .email_desc_main_wrap.short_dec {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .select_role {
        padding: 7px 10px;
    }

    .select_role button {
        font-size: 0.8rem;
        line-height: normal;
    }
}

@media screen and (max-width: 480px) {
    .messages_table_pagination_wrap {
        justify-content: center;
    }

    #ic_in_previous_page p {
        display: none;
    }

    #ic_in_next_page p {
        display: none;
    }

    .messages_table_pagination_wrap .dt-length label {
        font-size: small !important;
    }

    .messages_table_pagination_wrap #custom-paging {
        gap: 6px !important;
    }
}

@media (max-width: 346px) {
    .ctm_msg_txt {
        justify-content: center !important;
    }

    .ctm_compose_btn {
        justify-content: center !important;
    }
}