:root {
    --purple: #5C4FDD;
    --pink: #9747FF;
    --dark-red: #F44336;
    --light-red: rgba(244, 67, 54, 0.08);
    --dark-green: #43C991;
    --light-green: #43C99115;
    --light-dark: #283046;
    --light-dark0: #343D55;
    --flag-color-light: #e78b37;
    --flag-color-dark: #8A4E18;
    --nav-links-color: #A5A5A5;
    --label-color: #ABABAB;
    --border-color: #888888;
    --tableHeader-color-active-class-bg: #ffffffff;
    --tableHeader-color-active-class-color: #000000;
    --bg-color-lead-modal-content: #0000001A;
    --report-span-bg-green: #00BA341A;
    --report-span-text-green: #00BA34;
    --report-span-text-red: #E92C2C;
    --report-span-bg-red: #E92C2C1A;
    --report-span-text-yellow: #FF961B;
    --report-span-bg-yellow: #FF961B1A;
    --report-span-text-purple: #9EA2FF;
    --report-span-bg-purple: #9EA2FF1A;
    --report-span-text-gray: #585757;
    --report-span-bg-gray: #E8E8E8;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

::-webkit-scrollbar-thumb {
    background: var(--pink);
    border-radius: 10px;
}

::-webkit-scrollbar {
    height: 4px;
    width: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/*::-webkit-scrollbar-thumb {*/
/*    background-color: transparent;*/
/*    border: 1px solid transparent;*/
/*}*/

a {
    text-decoration: none;
}

.dark-theme {
    --bg-color-body: #161D31;
    --text-color: #d0d2d6;
    --bg-color-table-header: #283046;
    --placeholder-color: #c5c5c5;
    --hover: #030818B2;
    --bg-color: #DDDDDD;
    --svg-color: #747A89;
    --table-header-bg-color: #CBCBCB;
    --table-body-bg-color: #E1E1E1;
    --card-text-color: #283046CC;
    --card-bg-color: #FFFFFF;
    --tableHeader-color-active-class-bg: #FFFFFF;
    --tableHeader-color-active-class-color: #000000;

}

.light-theme {
    --bg-color-body: #C4C3CD;
    --text-color: #000000;
    --bg-color-table-header: #E1E1E1;
    --placeholder-color: #343D55;
    --hover: #67676730;
    --text-color-dark: #0D0F24;
    --text-color-main: #283046;
    --svg-color: #747A89;
    --table-header-bg-color: #343D55;
    --table-body-bg-color: #283046;
    --bg-color: #DDDDDD;
    --card-text-color: #FFFFFF;
    --card-bg-color: #283046CC;
    --tableHeader-color-active-class-bg: #ffffff;
    --tableHeader-color-active-class-color: #000000;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color-body) !important;
    color: var(--text-color);
}

label, input, h6, svg, span, legend {
    color: var(--text-color) !important;
}

.dark-theme input {
    color-scheme: dark;
}

.light-theme input {
    color-scheme: light;
}

table tr, table tr td, table tr th {
    border-bottom: 2px solid var(--bg-color-body) !important;
}

/*::-webkit-scrollbar {*/
/*  display: none;*/
/*}*/
.rs-picker {
    width: 100%
}

.rs-picker-toggle-active {
    background-color: var(--bg-color-table-header) !important;
    color: var(--text-color) !important;
}

.rs-picker:focus-visible {
    outline: none !important;
}

.rs-picker-toggle.rs-btn {
    border: 1px solid var(--pink) !important;
    border-radius: 5px;
    background-color: var(--bg-color-table-header) !important;
    color: var(--text-color) !important;
}

.rs-picker-toggle-textbox {
    background-color: var(--bg-color-table-header) !important;
}

.rs-picker-toggle-textbox:focus-visible {
    outline: none !important;
}

.rs-btn {
    background: var(--pink) !important;
    color: var(--text-color) !important;
}

.rs-btn:hover {
    background: var(--pink) !important;
}

.rs-btn:focus-visible {
    outline: none !important;
}

.rs-picker-menu {
    z-index: 5555 !important;
    color: var(--text-color) !important;
    background-color: var(--bg-color-table-header) !important;
}

.tableHeader-color {
    background-color: var(--bg-color-table-header) !important;
    color: var(--text-color) !important;
    font-weight: 600
}

.tableHeader-color.box-shadow {
    box-shadow: 1px 1px 15px 1px var(--bg-color-body);
}

.tableHeader-color > td, .tableHeader-color > td > div {
    color: var(--text-color) !important;
    font-weight: 500
}

.tableHeader-color-active-class {
    background-color: var(--tableHeader-color-active-class-bg) !important;
    color: var(--tableHeader-color-active-class-color) !important;
}

.tableHeader-color-active-class > td, .tableHeader-color-active-class > td > div {
    color: var(--tableHeader-color-active-class-color) !important;
    font-weight: 500
}

.tablebody-color {
    background-color: var(--bg-color-table-header) !important;
    color: var(--text-color) !important;
}

.tablebody-color > td, .tablebody-color > td > div {
    color: var(--text-color) !important;
    font-weight: 500
}

.text-color {
    color: var(--text-color) !important;
}

.tableContainer-color {
    background-color: var(--bg-color);
}

.tebleRowIocnStyle {
    color: var(--text-color-main);
    border: 1px solid var(--purple);
    background: transparent;
    font-size: 10px;
    border-radius: 5px;
    height: 22px;
}

.tebleRowImgStyle {
    width: 30px;
}

.tebleRowImgStyle img {
    width: 100%;
    border-radius: 50%;
}

.tableFooter {
    position: fixed;
    bottom: 13%;
    width: 98%;
    background-color: var(--bg-color-table-header);
    color: var(--text-color-main) !important;
}

.tableFooter p {
    margin-top: 12px;
}

.purple {
    color: var(--purple);
}


.dark input {
    background: transparent;
}

/* login page style start */

.loginformParent {
    background-color: var(--bg-color-body);
    height: 100%;
}

.loginformimg {
    width: 80%;
    padding: 30px;
}

.loginform {
    color: var(--text-color);
    background-color: var(--bg-color-table-header);
    /*box-shadow: -1px -1px 20px 1px var(--bg-color-table-header);*/
}

.loginformchild {
    padding: 77px;
    padding-top: 29px;
    font-size: 14px;
}

.loginformchild input {
    background-color: transparent;
}

/* login page style end  */

/* lead form style start  */


.divider {
    background-color: var(--text-color-main);
    width: 98%;
    margin-left: 10px;
}

.leadForm {
    background-color: var(--bg-color-table-header);
    color: var(--text-color);
    height: 100vh;
    width: 70vw;
}

.leadForm label, .leadForm input {
    color: var(--text-color) !important;
}

.leadForm input::placeholder {

}

.leadformItem {
    position: absolute;
    right: 0;
    top: 0;
    /* margin-top: -15px; */
    font-size: 14px;
    color: var(--text-color-main);
    height: 100vh;
    width: 80%;
    background-color: var(--bg-color);
    z-index: 50;
}

.leadformdivider {
    background-color: var(--text-color-main);
    width: 97.5%;
    margin-left: 0px;
}

.backtransparent {
    background: transparent;
    color: var(--text-color-main);
}

.leadformHeader {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--bg-color);
    /* z-index: 50; */
}

.leadformbody {
    width: 100%;
    overflow: auto;
    position: fixed;
    top: 18%;
    bottom: 12%;
    background-color: var(--bg-color);
    /* z-index: 50; */
}

.leadformFooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--bg-color);
    /* z-index: 50; */

}

select option {
    background-color: var(--bg-color-table-header);
    color: var(--text-color)
}

.form-control {
    border-radius: 0px;
    border-color: var(--text-color) !important;
    color: var(--text-color-main) !important;
    background: transparent !important;
}

.form-control::placeholder {
    color: var(--placeholder-color) !important;
}

.assignImg {
    height: 58px;
    width: 75px;
    border: 1px solid var(--purple);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: none !important;
    /* margin-top:15px; */
}

.assignImg img {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.form-control:focus,
.form-select:focus {
    box-shadow: none !important;
    background-color: transparent !important;
    color: whitesmoke;
}

.form-select-top {
    border-radius: 0px !important;
    border-color: var(--purple) !important;
    background-image: url("../icons/dropdown.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 30px 20px !important;
}

.form-floating {
    width: 100%;
}

.form-select-top-left {
    border-radius: 5px !important;
    border-color: var(--pink) !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    background-image: url("../icons/dropdown.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 30px 20px !important;
}

.form-select {
    color: var(--text-color) !important;
    background-color: var(--bg-color-table-header) !important;
    border-color: var(--pink) !important;
}

.selectBox2 {
    border-radius: 0px !important;
    border-color: #8888 !important;
    background: transparent;
    color: var(--text-color-main);
    background-image: url("../icons/dropdown.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 30px 20px !important;

}

.mybtn {
    width: 13%;
    color: #b6c2cc;
    border-color: var(--purple);
    background-color: var(--purple);
}

.form-check-input {
    border: 1px solid var(--purple) !important;
}

.form-check-input:checked {
    background-color: #4CAF50 !important;
    border-color: #4CAF50 !important;
}

.form-check-input:focus {
    box-shadow: none !important;
}

.react-tagsinput {
    background-color: transparent !important;
    border: 1px solid #8888 !important;
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    padding-top: 0px !important;
    color: var(--text-color-main) !important;
}

.react-tagsinput-tag {
    background-color: transparent !important;
    border-radius: 0px !important;
    border: 1px solid var(--text-color-main) !important;
    color: #b3b3b3 !important;
    display: inline-block;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
    margin-right: 10px !important;
    padding: 0px !important;
    height: 36px !important;
}

.react-tagsinput-tag a {
    text-decoration: none !important;
    columns: var(--text-color-main) !important;
}

.react-tagsinput-tag a::before {
    content: " ×";
    font-size: 20px !important;
}

/* lead form style end  */


/* students lead style start  */
.top-navbar {
    position: fixed;
    top: 0%;
    left: 0;
    overflow: hidden;
}

.actionButton {
    font-size: 14px;
    padding: 7px 14px;
    margin-right: 8px;
    height: 38px;
    border: none;
    border-radius: 5px;
    background-color: var(--pink);
    color: var(--text-color);
}

.actionButton a {
    text-decoration: none;
    color: #ffffff;
}


.TopNavBardivider {
    height: 30px !important;
    background-color: var(--text-color-main) !important;
    margin-top: 5px !important;
    margin-left: 38px !important;
    margin-right: 10px !important;
}

.selectBox {
    width: 100% !important;
    /*height: 38px !important;*/
    background: rgba(255, 255, 255, 0.05) !important;
    /* border: 1px solid var(--purple) !important; */
    /* border-radius: 5px !important; */
    border-radius: 0px;
    border-color: #8888;
    color: #888888 !important;
    background-image: url("../icons/dropdown.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 30px 20px !important;

}

.InputBox {
    width: 100% !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--pink) !important;
    border-radius: 5px !important;
    background-image: url("../icons/searchicon.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 30px 20px !important;
    color: var(--text-color) !important;
}


/* students lead style end  */

/* Side bar style start  */

.hideSidebarDiv {
    width: 10px;
    /*height: 100vh;*/
}

.sidebar {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: -279px;
    width: 280px;
    height: 100vh;
    background-color: var(--bg-color-table-header);
    color: var(--text-color);
    transition: 0.3s ease-in-out;
    z-index: 55555;
    /*box-shadow:0.5px 0.5px 10px var(--bg-color-table-header);*/

}

.setting-sidebar {
    background: var(--bg-color-table-header);
    /*max-width: 230px;*/
    height: 100%;
    overflow:auto;
    /*margin-top: 15px;*/
}

.setting-sidebar p.nav-links {
    color: var(--text-color) !important;
}

.setting-sidebar-heading {
    padding: 12px 20px;
    color: var(--text-color)
}

.hideSidebarDiv:hover .sidebar {
    left: 0px;
}

.sidebar > .logo {
    /*font-style: 'Itim';*/
    font-weight: 400;
    font-size: 30px;
    line-height: 36px;
    padding: 15px 10px 15px 35px;
    color: var(--purple);
}

.sidebar p {
    padding-left: 20px;
    color: var(--text-color);
}

.sidebar ul {
    height: calc(100vh - 120px);
    overflow-Y: scroll;
    list-style: none;
    /*font-style: "Montserrat";*/
    font-weight: 400;
    font-size: 16px;
    line-height: 17px;
    padding: 0px;

}

.sidebar > ul > li {
    padding: 11px 22px;
    position: relative;
    cursor: pointer;
    color: var(--text-color-main);

}

.sidebar > ul > li a {
    text-decoration: none;
    color: var(--text-color-main);

}

/*.sidebar > ul > li a svg, .sidebar > ul > li svg, .setting-sidebar svg {*/
/*    fill: var(--svg-color);*/

/*}*/

.sidebar .arrow-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.active {
    background-color: var(--bg-color-body);
    /* border-right: 3px solid var(--purple); */

}

.active1 {
    background-color: var(--bg-color);
    border-right: 3px solid var(--purple);

}

.sidebar svg {
    fill: var(--svg-color);
    margin-right: 8px;
}

/* slide bar style end */

.table-container {
    background-color: var(--bg-color);
}


/* nav Footer style start  */

body .navfooter {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-color-table-header);
    color: var(--text-color);
}

.navfooter a {
    color: var(--text-color);
}

.footerManu {
    width: 40px;
}

.footerManu img {
    width: 100%;
    border-radius: 50%;
}

/*body .bg-img {*/
/*    background-image: url('../img/Moon.svg');*/
/*    color: var(--text-color);*/
/*    width: 100%;*/
/*    height: 40px;*/
/*    margin-top: -8px;*/
/*    border-radius: 2px;*/
/*}*/

/*.bg-img img {*/
/*    border-radius: 50%;*/
/*    width: 20%;*/
/*    margin-left: 20px !important;*/
/*    margin-top: 20px !important;*/
/*}*/

.footermanuItems p {
    margin-top: -35px;
    margin-left: 80px;
}

body .footerManuDropdown {
    background-color: var(--bg-color-table-header) !important;
    color: var(--text-color) !important;
    width: 350px !important;
    height: 400px;
}

body .footermanuButtons {
    width: 42px;
    height: 42px;
    border-radius: 5px;
    border: 1px solid var(--purple);
    color: var(--text-color);
    background: transparent;
}

body .footermanuSignOut {
    color: var(--text-color) !important;
}

hr:not([size]) {
    height: 2px;
}

body .divider3 {
    height: 30px !important;
    background-color: var(--text-color) !important;
    margin-top: 12px !important;
    margin-left: 8px !important;
    margin-right: 10px !important;
}

.navfooter h6 {
    /* margin-left: 5px !important; */
    margin-top: 10px !important;
    font-weight: 300;
}

.navfooter span {
    color: var(--purple);
}

.leadformFooterButtons {
    margin-top: -5px;
    margin-bottom: 10px;
}


/* nav Footer style end  */


/* students lead style end  */

/* lead modal styling start  :header*/


.lead-type {
    padding: 5px 12px;
    border: 1px solid #5C4FDD;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-color-main);
    width: 100%;
}

.lead-type span {
    font-size: 10px;
    font-weight: 300;
}

.select-box {
    padding: 5px 12px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color-main);
    cursor: pointer;

}


.dark-red {
    color: var(--dark-red);
}

.dark-green {
    color: var(--dark-green);
}

.purple {
    color: var(--purple)
}

.option-title {
    display: flex;
    flex-direction: column;
}

.option-title span {
    font-size: 10px;
    font-weight: 300;
    /* transform: translateY(-5px); */
}

.options-container {
    position: absolute;
    top: 100%;
    left: 0;
    width: 230px;
    background: #5C4FDD;
    color: var(--text-color);
    z-index: 50000;
}

.options-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.options-container ul li {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.options-container ul li img {
    width: 30px;
}

.options-container ul li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.options-container a {
    color: white;
    text-decoration: none;

}

.status-select-box, .status-select-box:focus, .status-select-box:focus-visible {
    background: var(--light-red);
    border: 1px solid var(--dark-red);
    border-radius: 0;
    outline: none;

}

.select-box.asignee, .select-box:focus, .select-box:focus-visible {
    /* background: var(--light-red); */
    height: 100%;
    padding: 0;
    border: 1px solid var(--purple);
    border-radius: 0;
    outline: none;
    display: flex;
    justify-content: space-between;
    position: relative;
    cursor: pointer;

}

.select-box.asignee .asignee-img {
    height: 100%;
    aspect-ratio: 1;

}

.select-box.asignee .option-title {
    padding: 5px 0px;
}

.select-box .asignee-img img {
    height: 100%;
}

.leadConvert-select-box, .leadConvert-select-box:focus, .leadConvert-select-box:focus-visible {
    background: var(--light-green);
    border: 1px solid var(--dark-green);
    border-radius: 0;
    outline: none;
}

.setting-toggler {
    border: none;
    background-color: var(--purple);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 10px;
}

.setting-toggler .setting-icon {
    font-size: 24px;
    font-weight: 800;
}

.flag {
    position: absolute;
    top: 15px;
    left: -112px;
    width: 300px;
    height: 50px;;
    background-color: var(--flag-color-light);
    color: #000 !important;
}

.flag > p {
    width: 100%;
    height: 100%;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 20px;
}

.flag::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0px;
    height: 0px;
    border-top: 25px solid var(--bg-color-table-header);
    border-right: 25px solid var(--bg-color-table-header);
    border-left: 25px solid transparent;
    border-bottom: 25px solid transparent;
}

.flag::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0px;
    height: 0px;
    border-bottom: 25px solid var(--bg-color-table-header);
    border-right: 25px solid var(--bg-color-table-header);
    border-left: 25px solid transparent;
    border-top: 25px solid transparent;
}

.flag span {
    position: absolute;
    top: 100%;
    left: 0;
    width: 0px;
    height: 0px;
    border-top: 16px solid var(--flag-color-dark);
    border-right: 56.5px solid var(--flag-color-dark);
    border-left: 56.5px solid transparent;
    border-bottom: 16px solid transparent;
    /* background-color: red; */
    z-index: -1;
}

/* :header ends  */
.lead-modal {
    margin: 0;
    background-color: var(--bg-color-table-header);
    color: var(--text-color);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.lead-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.422);
    z-index: 12;
}


.lead-modal hr {
    margin: 0;
}

.lead-modal-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 20px;
    z-index: 55;

}

.navigation-links {
    width: 100%;

}

.navigation-links > ul {
    width: 100%;
    justify-content: space-around;
    list-style: none;
    font-size: 14px;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--bg-color-table-header);
}

.navigation-links > ul > li {
    padding: 15px 10px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: var(--text-color);
    font-weight: 600;
    text-decoration: none;

}

.navigation-links > ul > li:hover {

    color: var(--purple);

}

.navigation-links > ul > li.active {
    background-color: var(--flag-color-light);
    color: #000 !important;
}

.lead-modal-footer {
    /* position:fixed; */
    position: relative;
    bottom: 0;
    width: 100%;

}

.detail-field-title {
    color: var(--text-color);
    font-weight: 600;
}

.detail-field-desc {
    color: var(--placeholder-color);
    max-height: 60px;
    overflow-y: auto;
}

.main-content {
    position: absolute;
    height: calc(100vh - 140px);
    top: 140px;
    bottom: 140px;
    left: 0;
    right: 0;
    overflow-y: auto;
    padding: 20px;
    color: var(--text-color);
}

.heading {
    color: var(--text-color);
}

.heading span {
    color: var(--purple);
    margin-left: 40px;
}

.lead-count {
    color: var(--purple);

}

.border-box {
    border: 1px solid var(--text-color-main);
    padding: 2px 5px;
    font-size: smaller;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* lead value style  */
.lead-value-container {
    width: 100%;
    height: calc(100vh - 270px);
    background-color: var(--bg-color-lead-modal-content);
    padding: 20px;
}

.inner-container {
    overflow-y: scroll;
    height: 100%;
    padding: 20px;
}

/*::-webkit-scrollbar-track {*/
/*    border: 3px solid rgb(55, 60, 71);*/
/*    background-color: #9747FF80;*/
/*  }*/

/*  ::-webkit-scrollbar {*/
/*    width: 8px;*/

/*  }*/

/*  ::-webkit-scrollbar-thumb {*/
/*    background-color: var(--pink);*/
/*    border-radius: 10px;*/
/*  }*/
/* .inner-container::-webkit-scrollbar,.main-content::-webkit-scrollbar{
    width:5px;
    background-color:var(--purple);
    border-radius:5px;
}
.innre-container::-webkit-scrollbar-track,.main-content::-webkit-scrollbar-track {
    border-radius: 5px;
}
.inner-container::-webkit-scrollbar-thumb,.main-content::-webkit-scrollbar-thumb {
    background-color: red;
    border: 3px solid var(--purple);
    border-radius: 5px;
    background-clip: content-box;
} */
/* .lead-value-container::-webkit-scrollbar-thumb:hover {
    background: #009eb3;
} */
.timeline {
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;

}

.timeline .lead-value {
    color: var(--dark-green)
}

.timeline .date {
    /*color*/
}


.timeline .reason {
    color: var(--text-color);
}

.timeline-image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--dark-green);
}

.timeline-image img {
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}


.last-response-container {
    border: 1px solid var(--pink);
    padding: 10px;
}

.last-response-btn {
    padding: 4px 8px;
    font-size: 12px;
    border: none;
    background-color: var(--pink);
    border-radius: 4px;
    color: var(--toastify-text-color-dark);
}

.remainder .title {
    font-size: 15px;
}

.remainder-options input[type="radio"] {
    display: none;
}

.remainder-options label {
    display: inline-block;
    padding: 5px 0px;
    margin-right: 30px;
    cursor: pointer;
}

.remainder-options label span {
    position: relative;
    font-size: 14px;
    /* line-height: 5px; */
}

.remainder-options label span:before,
label span:after {
    content: '';
}

.remainder-options label span:before {
    border: 1px solid var(--pink);
    width: 16px;
    height: 16px;
    margin-top: 5px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: top;
}

.remainder-options label span:after {
    background: var(--pink);
    width: 12px;
    height: 12px;
    position: absolute;
    top: 3px;
    left: 2px;
    transition: 300ms;
    opacity: 0;
}

.remainder-options label input:checked + span:after {
    opacity: 1;
}

.next-schedule-shortcut-btns {
    display: flex;
    flex-wrap: wrap;
}

.shortcut-btn {
    padding: 8px 15px;
    background-color: #FFFFFF1A;
    color: var(--text-color);
    border-radius: 45px;
    margin-bottom: 8px;
    margin-right: 10px;
    border: none;
    font-size: 14px;
    font-weight: 500;
}

.date-time {
    padding: 12px 6px;
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--border-color);
}

.date-time .response-date,
.date-time .response-time {
    display: flex;
    align-items: center;
    color: var(--purple);
    margin-left: 10px;
}

.date-time .response-date {
    border-right: 1px solid var(--border-color);
}

.date-time span {
    font-size: 14px;
    margin-left: 8px;
}

.response-message textarea {
    color: var(--text-color-main);
    font-size: 14px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    width: 100%;
}

.response-message textarea:focus {
    /* border:none; */
    outline: none;
}

.previous-chats-container {
    padding: 20px;
    width: 100%;
    height: calc(100vh - 450px);
    background-color: var(--bg-color-lead-modal-content);
    overflow-y: auto;
}
.previous-chats-container2 {
    padding: 20px;
    width: 100%;
    height: calc(100vh - 370px);
    background-color: var(--bg-color-lead-modal-content);
    overflow-y: auto;
}

.chat-date {
    width: auto;
    padding: 2px 8px;
    font-size:12px;
    border-radius: 4px;
    background-color: var(--pink);
    color: var(--toastify-text-color-dark)
}

.chat-bubble {
    width: 100%;
    background-color: #FFFFFF1A;
    padding: 5px 20px;
    position: relative;
    color: var(--text-color-main);
    border-radius: 0px 5px 5px 5px;
    margin: 5px 0px;

}

.chat-bubble::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 5px solid #FFFFFF1A;
    border-right: 5px solid #FFFFFF1A;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
}

.chat-bubble .message {
    width: 100%;
}

.chat-bubble .time {
    width: 100%;
    font-size: 10px;
    text-align: end;
}

.log-container {
    width: 100%;
    background-color: var(--bg-color-lead-modal-content);
    color: var(--text-color);
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 300;
}

.log-container span {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    background-color: var(--flag-color-light);
    color: #000;
}

.lead-modal-sidebar {
    width: 100%;
    height: calc(100vh - 300px);
    overflow-y: auto;
}

.lead-modal-sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.lead-modal-sidebar ul li {
    padding: 7px 20px;
    background-color: #FFFFFF1A;
    margin-bottom: 2px;
    position: relative;
    cursor: pointer;
}

.lead-modal-sidebar ul li .arrow-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.lead-modal-message-container {
    height: calc(100vh - 300px);
    overflow-y: auto;
}

.message-box {
    padding: 17px 20px 12px 20px;
    background-color: #FFFFFF1A;
    color:var(--text-color);
    margin-bottom: 2px;
}

.message-box .message-title {
    font-size: 10px;
    color: var(--flag-color-light)
}

.message-box .message-title svg {
    fill: var(--flag-color-light);
    cursor: pointer;
}

.message-box .message-description {
    font-size: 12px;
    color: var(--text-color-main);
}

.custom-message-container {
    /* margin-top:20px; */
    position: absolute;
    padding: 0px 20px;
    bottom: 10px;
    left: 0;
}

.sms-input {
    width: 100%;
    margin-right: 5px;
}

.sms-input input {
    background-color: transparent;
    width: 100%;
    border-radius: 50px;
    padding: 12px;
    border: 1px solid var(--bg-color);
    color: var(--text-color-main);
    font-size: 12px;
}

.sms-input input:focus {
    outline: none;
}

.attachments-toggler {
    padding: 12px;
    /* width:40px; */
    width: 100%;
    /* height:40px; */
    height: 100%;
    background-color: #E78B371A;
    border: 1px solid var(--flag-color-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 5px;

}

.attachments-toggler svg {
    fill: var(--flag-color-light);
}

.msg-send-btn {
    padding: 12px;
    width: 40px;
    height: 40px;
    background-color: var(--flag-color-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.whatsapp-content-container {
    width: 100%;
    padding: 15px;
    height: calc(100vh - 260px);
    overflow-y: auto;
}

.whatsapp-account-container {
    width: 100%;
}

.bank-card {
    color: var(--card-text-color);
    background: var(--card-bg-color);
    padding: 10px;
}

.bank-card-header {
    margin-bottom: 5px;
}

.bank-card-body > div {
    margin-bottom: 5px;
}

.bank-card-body .title {
    font-weight: 600;
    color: #000000;
}

.bank-card-footer .payment-method-icon {
    margin-right: 10px;
}

.contact-card {
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    background-color: #FFFFFF1A;

}

.contact-card-header {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}

.contact-card-header .contact-profile-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--purple);
    margin-right: 20px;
}

.contact-card-header .contact-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-card-header .contact-title {
    line-height: 15px;
}

.contact-card-header .contact-title p {
    font-size: 18px;
}

.contact-card-header .contact-title span {
    font-size: 10px;
    margin-top: -5px
}

.contact-card-body p {
    margin: 0;
    padding: 0;
}

.contact-card-body p.label {
    font-size: 10px;
    color: #69697C;
    margin-top: 10px;
}

.contact-card-body p.value {
    font-size: 12px;
    background: linear-gradient(180deg, #FFFFFF 0%, #EBEBEB 100%);;
}

/* lead modal styling end  */


/* WhatsApp Form style start */

.whatsAppForm {
    background-color: var(--bg-color-table-header);
    color: var(--text-color);
    padding: 20px
}

.whatsAppForm2 {
    background-color: var(--bg-color-table-header);
    color: var(--text-color);
    margin-top: 50px;
    padding: 20px
}

.whatsAppForm3 {
    background-color: var(--bg-color-table-header);
    color: var(--text-color);
    margin-top: 50px;
    padding: 20px
}

.whatsAppFileInput {
    font-size: 14px;
}

.whatsAppFileInput input {
    border-bottom: 1px solid var(--text-color-main);
    padding-bottom: 5px;
    padding-top: 5px;
    background: transparent;
    color: var(--text-color-main);
}

.whatsApptexterea {
    background: transparent;
    color: var(--text-color-main);
    outline: none;
    resize: none;
    height: 85px !important;
}

.attachments-toggler {
    /* margin-top: 5px; */
    padding: 12px;
    /* / width:40px; / */
    width: 100%;
    /* / height:40px; / */
    height: 100%;
    background-color: #E78B371A;
    border: 1px solid var(--flag-color-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 5px;

}

.attachments-toggler svg {
    fill: var(--flag-color-light);
}

.msg-send-btn {
    /*margin-top: 5px;*/
    margin-left: 3px;
    padding: 12px;
    width: 40px;
    height: 40px;
    background-color: var(--flag-color-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* WhatsApp Form style end */

/* WhatsApp QR Modal style Start  */

.whatsAppQR {
    background-color: var(--table-body-bg-color);
    color: var(--text-color-main);
}

.whatsAppQRTextField {
    padding: 10px 5px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: var(--bg-color-body);
}

.whatsAppQRbtn1 {
    border: none;
    outline: none;
    padding: 5px 26px;
    width: 100%;
    height: 38px;
    border-radius: 5px;
    background: #3DEA21;
    color: var(--text-color-main);
}

.whatsAppQRbtn2 {
    border: none;
    outline: none;
    padding: 5px 26px;
    width: 100%;
    height: 38px;
    border-radius: 5px;
    background: #DD2025;
    color: var(--text-color-main);
}


/* WhatsApp QR Modal style end  */

/* SMS Form style start */

.smsForm {
    position: fixed;
    bottom: 51%;
    width: 98%;
    background-color: var(--table-body-bg-color);
    color: var(--text-color-main);
    margin-top: 10px;
    padding-left: 18px;
    padding-right: 18px;
}

.smsForm2 {
    position: fixed;
    bottom: 42%;
    width: 98%;
    background-color: var(--table-body-bg-color);
    color: var(--text-color-main);
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    height: 50px;
}

.smsForm3 {
    position: fixed;
    bottom: 12%;
    width: 98%;
    background-color: var(--table-body-bg-color);
    color: var(--text-color-main);
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    height: 180px;
}

.smstexterea {
    background: transparent;
    color: var(--text-color-main);
    outline: none;
    resize: none;
    height: 85px !important;
}

.attachments-toggler {
    /* margin-top: 5px; */
    padding: 12px;
    /* / width:40px; / */
    width: 100%;
    /* / height:40px; / */
    height: 100%;
    background-color: #E78B371A;
    border: 1px solid var(--flag-color-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 5px;

}

.attachments-toggler svg {
    fill: var(--flag-color-light);
}

.msg-send-btn {
    /*margin-top: 5px;*/
    margin-left: 3px;
    padding: 12px;
    width: 40px;
    height: 40px;
    background-color: var(--flag-color-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.navfooter {
    position: fixed;
    bottom: 2%;
    /*width: calc(100% - 1.5rem);*/
    background-color: var(--table-body-bg-color);
    color: var(--text-color-main);
    /*border-radius: 10px;*/
    margin-top: 20px;
}

.header {
    background-color: var(--bg-color-table-header);
    /*width: 100%;*/
    position: fixed;
    top: 0;
    left: 0
}

.navfooter a {
    text-decoration: none;
    color: var(--text-color-main);
}

.footerManu {
    width: 40px;
}

.footerManu img {
    width: 100%;
    border-radius: 50%;
}

.timer-container {
    background-color: var(--bg-color-table-header);
    color: var(--text-color);
    box-shadow: 1px 1px 10px 1px var(--bg-color-body);
}

.timer-container h6 {
    margin-top: 0 !important;
}

/*.bg-img {*/
/*    background-image: url('../img/Moon.svg');*/
/*    color: var(--text-color-main);*/
/*    width: 100%;*/
/*    height: 40px;*/
/*    margin-top: -8px;*/
/*    border-radius: 2px;*/
/*}*/

/*.bg-img img {*/
/*    border-radius: 50%;*/
/*    width: 20%;*/
/*    margin-left: 20px !important;*/
/*    margin-top: 20px !important;*/
/*}*/

.footermanuItems p {
    margin-top: -35px;
    margin-left: 80px;
}

.footerManuDropdown {
    background-color: var(--bg-color) !important;
    color: var(--text-color-main) !important;
    width: 274px !important;
    height: 200px;
}

.footermanuButtons {
    width: 42px;
    height: 42px;
    border-radius: 5px;
    border: 1px solid var(--purple);
    color: var(--text-color-main);
    background: transparent;

}

.footermanuSignOut {
    color: var(--text-color-main) !important;
}

hr:not([size]) {
    height: 2px;
}

.divider3 {
    height: 30px !important;
    background-color: var(--text-color-main) !important;
    margin-top: 12px !important;
    margin-left: 8px !important;
    margin-right: 10px !important;
}

.navfooter h6 {
/ margin-left: 5 px !important;
/ margin-top: 10 px !important;
    font-weight: 300;
}

.navfooter span {
    color: var(--purple);
}

.leadformFooterButtons {
    margin-top: -5px;
    margin-bottom: 10px;
}

.footerLogo {
    font-weight: 600;
    background: linear-gradient(90deg, #9747FF 0%, #E78B37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.footerActiveStatus {
    border-radius: 10px;
    padding: 5px 5px;
    background: #ffffff1f;
}

.fdot {
    width: 6px;
    height: 6px;
    background-color: #3DEA21;
    border-radius: 50%;
}

/* SMS Form style end */

/* SubManuSlideBar style start */

.subManuSideBar {
    background-color: var(--table-body-bg-color);
    color: var(--text-color-main);
    width: 220px;
}

.subManuSideBar ul {
    margin-top: 20px;
    list-style: none;
    padding-left: 16px;
    width: 220px;
    height: 300px;
}

.subManuSideBar ul li {
    height: 40px;
}

.subManuSideBar ul li .arrow-icon {
    position: absolute;
    left: 14%;
    transform: translateY(35%);
}


/* SubManuSlideBar style end */

@media screen and (max-width: 1200px) {
    .loginformchild {
        padding: 40px;
        padding-top: 29px;
    }

    .actionButton {
        padding: 5px 10px;
        /* font-size: 11px; */

    }

    .TopNavBardivider {
        margin-left: 28px !important;
    }
}

@media (max-width: 1024px) {
    .actionButton {
        padding: 5px 8px;
        font-size: 11px;

    }

    .TopNavBardivider {
        margin-left: 21px;
    }

    .smsForm {
        font-size: 11px;
    }

    .whatsAppForm {
        font-size: 11px;
    }
}

@media screen and (max-width: 992px) {
    .loginformchild {
        padding: 20px;
        padding-top: 29px;
    }

    .actionButton {
        padding: 5px 10px;
        font-size: 11px;

    }

    .TopNavBardivider {
        margin-left: 16px !important;
    }

    .smsForm {
        font-size: 11px;
    }

    .whatsAppForm {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .actionButton {
        padding: 4px 8px;
        font-size: 11px;

    }

    .TopNavBardivider {
        margin-left: 7px !important;
    }

    .smsForm {
        font-size: 10px;
    }

    .whatsAppForm {
        font-size: 10px;
    }
}

.tox-notification--warning {
    display: none !important;
}

/*employee dialog*/
.employee-dialog {
    background-color: var(--bg-color-table-header);
}

/*filter modal*/

.filter-container span {
    /*color:var(--pink) !important;*/
}


/* rs suite */
.calendar-container {
    background-color: rgba(247, 247, 247, 0.1);
    height: calc(100vh - 200px);
    width: 100%;
    overflow: auto;
    padding: 20px;
}

.report-container {
    background-color: var(--bg-color-table-header);
    height: calc(100vh - 180px);
    width: 100%;
    margin-top: 50px;
    overflow: auto;
    padding: 20px
}

.rs-calendar-month-dropdown-row-wrapper {
    background-color: var(--bg-color-table-header);
}

.rs-calendar-table-cell-content {
    height: auto !important;
}

.rs-calendar-table-cell-content:hover {
    background-color: var(--bg-color-body) !important;
}

.rs-calendar-body div.login {
    background-color: var(--report-span-bg-green) !important;
    border-radius: 5px;
    margin-top: 2px
}

.rs-calendar-body div.login span {
    color: var(--report-span-text-green) !important;

}

.rs-calendar-body div.logout {
    background-color: var(--report-span-bg-red) !important;
    border-radius: 5px;
    margin-top: 2px
}

.rs-calendar-body div.logout span {
    color: var(--report-span-text-red) !important;

}

.rs-calendar-body div.followups {
    background-color: var(--report-span-bg-purple) !important;
    border-radius: 5px;
    margin-top: 2px
}

.rs-calendar-body div.followups span {
    color: var(--report-span-text-purple) !important;

}

.rs-calendar-body div.talktime {
    background-color: var(--report-span-bg-yellow) !important;
    border-radius: 5px;
    margin-top: 2px
}

.rs-calendar-body div.talktime span {
    color: var(--report-span-text-yellow) !important;

}

.rs-calendar-body div.totalcalls {
    background-color: var(--report-span-bg-gray) !important;
    border-radius: 5px;
    margin-top: 2px
}

.rs-calendar-body div.totalcalls span {
    color: var(--report-span-text-gray) !important;

}

.rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content {
    background-color: var(--pink) !important;
}

.rs-calendar-table-cell-un-same-month {
    backdrop-filter: contrast(0.8);
}

.rs-calendar-table-cell-un-same-month .rs-calendar-table-cell-content:hover {
    background: none !important;
}

.calendar-todo-list {
    text-align: left;
    padding: 0;
    list-style: none;
}

.calendar-todo-list li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-todo-item-badge {
    vertical-align: top;
    margin-top: 8px;
    width: 6px;
    height: 6px;
}


/*file upload*/

.file-drop {
    /* relatively position the container bc the contents are absolute */
    position: relative;
    border: 1px solid var(--text-color);

    height: 100px;
    width: 100%;
}

.file-drop > .file-drop-target {
    /* basic styles */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 2px;

    /* horizontally and vertically center all content */
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;

    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;

    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;

    justify-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;

    align-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;

    text-align: center;
}

.file-drop > .file-drop-target.file-drop-dragging-over-frame {
    /* overlay a black mask when dragging over the frame */
    border: none;
    /*background-color: rgba(0, 0, 0, 0.65);*/
    box-shadow: none;
    z-index: 50;
    opacity: 1;

    /* typography */
    color: white;
}

.file-drop > .file-drop-target.file-drop-dragging-over-target {
    /* turn stuff orange when we are dragging over the target */
    color: #ff6e40;
    box-shadow: 0 0 13px 3px var(--pink);
}


/*scheduler*/

#alertWindow {
    --smart-window-default-height: 200px;
}

#alertWindow .smart-content-container > .smart-content {
    justify-content: center;
}

/*.smart-element.smart-scheduler {*/
/*    background:var(--bg-color-table-header);*/
/*}*/
.smart-scheduler {
    width: 100%;
    height: 100%;
    --smart-scheduler-timeline-cell-width: 100%;
    --smart-scheduler-timeline-header-vertical-group-size: 150px;
    --smart-font-size: 13px;
    --smart-scheduler-timeline-nonworking-color: rgba(0, 0, 0, 0.05);
    /*--smart-scheduler-timeline-group-separator-background: var(--smart-border);*/
    --smart-scheduler-timeline-group-separator-background: var(--bg-color-body);
    border-color: var(--bg-color-body);
    /*box-shadow:1px 1px 15px 1px var(--bg-color-body) !important;*/
    /*box-shadow:0px 0px 10px 0.5px rgba(68, 68, 68, 0.67) !important;*/

    /*background-color:var(--bg-color-table-header);*/
}

.smart-element {
    color: var(--text-color) !important;
}

.smart-scheduler .smart-scheduler-header, .smart-scheduler .smart-scheduler-date-nav {
    background: var(--bg-color-table-header) !important;
}

.smart-scheduler .smart-scheduler-view-header-vertical .smart-scheduler-cell {
    align-items: center;
}

.smart-scheduler .smart-scheduler-event-content,
.smart-scheduler-drag-feedback .smart-scheduler-event-content {
    grid-row-gap: 0;
}

.smart-scheduler .smart-scheduler-groups-container .smart-scheduler-cell {
    justify-content: flex-start;
    display: grid;
    grid-template-columns: repeat(4, calc(100% / 3));
    padding: initial;
    border-color: var(--bg-color-body) !important;

}

.smart-scheduler .smart-scheduler-cell {
    background: var(--bg-color-table-header) !important;
    color: var(--text-color) !important;
    border-color: var(--bg-color-body) !important;
}

.smart-scheduler .smart-scheduler-groups-container .smart-scheduler-cell .col {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: var(--smart-scheduler-timeline-header-cell-padding);
    line-height: 5em;
}

.smart-scheduler .smart-scheduler-groups-container .smart-scheduler-cell .col:not(:first-of-type) {
    border-left: var(--smart-border-width) solid var(--smart-border);
}

@media (max-width: 750px) {
    .smart-scheduler {
        --smart-scheduler-timeline-header-vertical-group-size: 100px;
    }

    .smart-scheduler .smart-scheduler-groups-container .smart-scheduler-cell {
        grid-template-columns: 100% repeat(2, 0);
    }
}

.smart-scheduler .smart-scheduler-view-header-horizontal .smart-scheduler-view-time-container {
    border-color: var(--bg-color-body) !important;
}

.smart-scheduler-window.smart-element.smart-window {
    color: var(--text-color) !important;

}

.smart-window .smart-content-container > .smart-content {
    background: var(--bg-color-table-header) !important;
}

.smart-window .smart-content-container > .smart-content input {
    background-color: inherit !important;

}

.smart-header-section {
    background: var(--pink) !important;
}

.smart-footer {
    background: var(--bg-color-table-header) !important;
}

.smart-input {
    background: var(--bg-color-table-header) !important;
}

.smart-input:focus {
    border-color: var(--pink) !important;
}

.smart-button {
    border: none !important;
}

.smart-scheduler .smart-scheduler-header, smart-scheduler .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-cell[group-separator]:not(:last-of-type),
.smart-scheduler[view-type^=timeline] .smart-scheduler-cells-container .smart-scheduler-cell-container:not(:last-of-type),
.smart-scheduler[view-type^=timeline] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-label-container {
    border-color: var(--bg-color-body) !important;
}
.smart-scheduler-window-button edit-series smart-element smart-button{
    background-color:var(--pink) !important;
}
.smart-date-time-picker .smart-drop-down-button.smart-calendar-button:after {
    color: var(--text-color) !important;
}

/*textarea.smart-input{*/
/*    */
/*}*/
.smart-scheduler .smart-scheduler-footer {
    background: none;
    border-color: var(--bg-color-body) !important;
}

.smart-container {
    background: var(--bg-color-table-header) !important;
}

.smart-drop-down-button {
    background: transparent !important;
    color: var(--tex-color) !important;
}


.MuiFormHelperText-root {
    color: var(--text-color) ;
}