@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+MX:wght@100..400&family=Playwrite+RO:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    /* user-select: none; */
}
:root{
    /* Font Family */
    --family-playwrite: "Playwrite RO", cursive;
    --family-Gabarito : "Gabarito", sans-serif; 
    /*  */
    --body-bg-1 : #F6F6F6;
    /* Font Size */
    --font-10:10px;
    --font-11:11px;
    --font-12:12px;
    --font-13:13px;
    --font-14:14px;
    --font-15:15px;
    --font-16:16px;
    --font-18:18px;
    --font-22:22px;
    --font-24:24px;
    --font-28:28px;
    --font-32:32px;
    --font-34:34px;
    --font-36:36px;
    /*  Font Weight*/
    --fw-500:500;
    --fw-600:600;
    --fw-700:700;
    --fw-800:800;
    --fw-900:900;
    /* Primary Colors */
    --dark-red: #d41c1c;
    --text-black: #2C2C2C;
    --text-light-black : #3F403F;
    --text-color-grey: #f6f6f6;
    --text-red:#ff0000;
    --text-s-red : #ff010194;
    --text-dark-blue : #251A69;
    --text-s-light-black:#9b9999;
    /*  */
    --bg-light-blue : #8DE9D5;
    --bg-dark-blue : #251A69;
    --bg-m-light-blue : #4333A4;
    --bg-blue:#3204C0;
    --bg-green : #1CB787;
    --bg-dark-green : #027002;
    --bg-dark-yellow : #F0AD4E;
    --bg-orange-brown : #c22424;
    --bg-white: #ffffff;
    --bg-color-grey: #f6f6f6;
    --bg-red:#ff0000;
    --bg-s-red : #ff010194;
    --bg-light-red:#ff0000aa;
    --bg-dark:#000000;
    --bg-s-light-black:#9b9999;
    --bg-dark-grey:#6b6969;
    --bg-grey:#c4c4c4;
    --bg-s-grey:#dddddd;
    /*  */
    --m-left : 15px;
    --m-right : 15px;
    /*  */
}
a{
    text-decoration: none;
    font-size: var(--font-13);
}
.action_icon{
    width:16px;
}
.fw__400{
    font-weight: var(--fw-400)!important;
}
.fw__500{
    font-weight: var(--fw-500)!important;
}
.fw__600{
    font-weight: var(--fw-600)!important;
}
.fw__700{
    font-weight: var(--fw-700)!important;
}
.mt-0{
    margin-top:0!important;
}
.mt-1{
    margin-top:5px!important;
}
.mt-2{
    margin-top:10px!important;
}
.mt-3{
    margin-top:15px!important;
}
.mt-4{
    margin-top:20px!important;
}
.mt-5{
    margin-top:25px!important;
}
.mb-0{
    margin-bottom:0!important;
}
.mb-1{
    margin-bottom:5px!important;
}
.mb-2{
    margin-bottom:10px!important;
}
.mb-3{
    margin-bottom:15px!important;
}
.mb-4{
    margin-bottom:20px!important;
}
.mb-5{
    margin-bottom:25px!important;
}
.my-0{
    margin-top:0!important;
    margin-bottom:0!important;
}
.p-0{
    padding:0!important;
}
.py-0{
    padding-top:0!important;
    padding-bottom:0!important
}
.py-1{
    padding-top:5px!important;
    padding-bottom:5px!important
}
.py-2{
    padding-top:10px!important;
    padding-bottom:10px!important
}
.py-3{
    padding-top:15px!important;
    padding-bottom:15px!important
}
.py-4{
    padding-top:20px!important;
    padding-bottom:20px!important
}
.py-5{
    padding-top:25px!important;
    padding-bottom:25px!important
}
.px-0{
    padding-left:0!important;
    padding-right:0!important
}
.px-1{
    padding-left:5px!important;
    padding-right:5px!important
}
.px-2{
    padding-left:10px!important;
    padding-right:10px!important
}
.px-3{
    padding-left:15px!important;
    padding-right:15px!important
}
.px-4{
    padding-left:20px!important;
    padding-right:20px!important
}
.px-5{
    padding-left:25px!important;
    padding-right:25px!important
}
.p-1{
    padding:5px!important;
}
.p-2{
    padding:10px!important;
}
.p-3{
    padding:15px!important;
}
.p-4{
    padding:20px!important;
}
.p-5{
    padding:25px!important;
}
/* --- TEXT--- */
.text_10{
    font-size: var(--font-10)!important;
}
.text_11{
    font-size: var(--font-11)!important;
}
.text_12{
    font-size: var(--font-12)!important;
}
.text_13{
    font-size: var(--font-13)!important;
}
.text_14{
    font-size: var(--font-14)!important;
}
.text_16{
    font-size: var(--font-16)!important;
}
.text_18{
    font-size: var(--font-18)!important;
}
.text_22{
    font-size: var(--font-22)!important;
}
.text_start{
    text-align:left!important;
}
.text_center{
    text-align:center!important;
}
.text_end{
    text-align:right!important;
}
.text_muted{
    color: var(--text-s-light-black);
}
/* ---- */
.text_black{
    color:#000000!important;
}
.text_red{
    color:#ff0000!important;
}
.text_dark_red{
    color:#b10808!important;
}
.text_green{
    color:#0b995c!important;
}
.text_orange{
    color:#ff7b00!important;
}
.text_blue{
    color:#3204C0!important;
}
.text_white{
    color:#fff!important;
}
.text_yellow{
    color:rgb(215, 215, 17);
}
/* --- */
.d-flex{
    display: flex;
}
.align-items-center{
    align-items: center!important;
}
.align-items-start{
    align-items: baseline!important;
}
.justify-content-between{
    justify-content: space-between!important;
}
.justify-content-center{
    justify-content: center!important;
}
.justify-content-end{
    justify-content: end!important;
}
.justify-content-start{
    justify-content: start!important;
}
.flex-column{
    flex-direction: column!important;
}
.gap-1{
    gap:5px!important;
}
.gap-2{
    gap:10px!important;
}
.gap-3{
    gap:15px!important;
}
.gap-4{
    gap:20px!important;
}
.gap-5{
    gap:25px!important;
}
.white_space_nowrap{
    white-space:nowrap!important;
}
.white_space_normal{
    white-space:normal!important;
}
/* ----Buttons--- */
.info-btn{
    color:var(--bg-light-red)!important;
}
.btn{
    border:1px solid var(--bg-color-grey);
    background-color:var(--bg-color-grey);
    padding:6px 12px;
    font-weight: var(--fw-500);
    border-radius:4px;
    cursor: pointer;
}
.btn_sm{
    font-size: 11px;
    padding:7px 3px;
    width:100%;
    max-width:90px;
    border-radius:50px;
    text-transform: capitalize;
    font-weight: 600;
}
.btn_success{
    background-color:var(--bg-dark-green);
    color:var(--bg-color-grey);
    font-weight: var(--fw-400);
}
.btn_light_success{
    background-color: var(--bg-green);
    color:var(--bg-color-grey);
    font-weight: var(--fw-400);
}
.btn_danger{
    background-color: var(--bg-red);
    color:var(--bg-color-grey);
    font-weight: var(--fw-400);
}
.btn_warning{
    background-color: var(--bg-orange-brown);
    color:var(--bg-color-grey);
    font-weight: var(--fw-400);
}
.btn_primary{
    background-color: var(--text-dark-blue);
    color:var(--bg-color-grey);
    font-weight: var(--fw-400);
}
.btn_grey{
    background-color: var(--bg-color-grey);
    border:1px solid var(--bg-color-grey);
    box-shadow: 0 0 8px 0px #b5b2b2;
}
.btn_grey:hover{
    background-color: var(--bg-s-grey);
}
.btn:hover{
    opacity: 0.7;
}
.btn img{
    width:18px;
}
.icon_img{
    width:20px;
}
/* ----------------- */
.error_popup{
    position:fixed;
    max-width:320px;
    right:0;
    z-index: 111;
    background-color: var(--bg-red);
    padding:12px;
    color:var(--text-color-grey);
    border-radius:4px;
    margin:5px;
    font-size:var(--font-14);
    transition: 0.5s ease-in-out;
}
.error_popup .heading{
    font-weight: var(--fw-600);
}
.error_popup p{
    font-weight: var(--fw-400);
}
/* ---------------- */
.main_container_bg_white{
    background-color: var(--bg-white);
}
.bottom_grey_shadow{
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.11);
}
.bottom_grey_line{
    border-bottom:1px solid var(--bg-grey);
    padding:5px 0;
}
.box_shadow{
    box-shadow: 4px 0 4px -4px rgba(0, 0, 0, 0.11), -4px 0 4px -4px rgba(0, 0, 0, 0.11);
}
.submit_btn{
    color:var(--bg-color-grey);
    background-color: var(--bg-dark-blue);
}
.card{
    position: relative;
    background-color: var(--bg-white);
    box-shadow: 0 0 5px 0 #c0bfbf;
    padding:15px;
    border-radius: 8px;
    overflow: auto;
    width:100%;
}
.card > .heading{
    font-weight: 700;
    font-size:16px;
    text-transform: uppercase;
    margin:0 0 15px;
}
.page__loader__container{
    position: fixed;
    width: 100%;
    height:100%;
    z-index: 99;
    background-color: #0000004b;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
}
.page__loader__container .page__loader{
    width:120px;
    height:80px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 0 5px #ccc;
    border-radius: 8px;
    gap:5px;
}
.page__loader__container .page__loader img{
    width:35px;
}
.page__loader__container .page__loader .loading__content{
    font-weight: var(--fw-600);
    font-size: var(--font-12);
}
.note_info{
    font-size: var(--font-12);
    font-weight: var(--fw-500);
    color: var(--text-s-light-black);
}
.lead__status{
    padding:2px 5px;
    border-radius:4px;
    text-transform: uppercase;
    font-size: var(--font-11);
    color:#fff;
}
.status__pending{
    background-color:var(--bg-dark-yellow);
}
.status__reverted{
    background-color:var(--bg-dark-blue);
}
.status__about_to_confirm{
    background-color:#0cb5b5;
}
.status__confirm{
    background-color:var(--bg-green);
}
.status__completed{
    background-color:var(--bg-dark-green);
}
.status__lost{
    background-color:var(--bg-orange-brown);
}
.status__cancel{
    background-color:var(--bg-red);
}
.status__follow_ups{
    background-color:#ff6600;
}
.status__strong{
    background-color:#2752d6;
}
.status__hot{
    background-color: #ff0202;
}
.status__refunded{
    background-color: #9b9999;
}
.status__default{
    background-color:var(--bg-dark-grey)
}

/* =========== ToolTip =========== */


/* ======== SCROLLBAR DESIGN ========== */
::-webkit-scrollbar {
    width: 6px;
    height:8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

/* =========================== Login Section ======================== */
body.login__container{
    background: linear-gradient(-90deg, var(--bg-light-blue), var(--bg-blue));
    background: -webkit-linear-gradient(-90deg, var(--bg-light-blue), var(--bg-blue));
    height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
}

.login__fields{
    max-width:100%;
    width:450px;
    background:#fff;
    padding:30px 50px;
    box-shadow: 0 0 15px 0 rgba(115, 115, 115, 0.6);
    border-radius:12px;
    border:1px solid #ccc;
}
.logo .logo-sm{
    width:115px;
}
.logo, .login_heading{
    text-align:center;
}
.login_heading{
    font-size:var(--font-28);
    font-weight: var(--fw-600);
    margin:0 0 22px;
}
.form{
    display: block;
    position: relative;
}
.form .form_group{
    margin:0 0 30px;
}
.form .form_group,
.form .input_sec{
    position: relative;
}
.form .form_group .form_control{
    width:100%;
    outline:none;
    border-radius:4px;
}
.form .form_group .login_form_control{
    height:50px;
    padding:10px 20px 10px 70px;
    font-weight:var(--fw-600);
    border:none;
}
.form .form_group .input_sec{
    border:1px solid #a5a3a3;
    border-radius:4px;
    /* box-shadow: 0 0 10px 0 #00000021; */
}
.form .form_group .input_sec img{
    width:25px;
    position: absolute;
    left:15px;
    top:50%;
    transform: translateY(-50%);
}
.form .form_group .input_sec .right_border{
    border-right:1px solid #a5a3a3;
    position: absolute;
    height: 80%;
    left: 55px;
    top: 50%;
    transform: translateY(-50%);
}
.form .form_group .login_btn{
    border:none;
}
.form .form_group .login_btn .btn{
    width:100%;
    border:none;
    outline:none;
    background:var(--bg-dark-blue);
    color:#fff;
    height:50px;
    border-radius:4px;
    text-transform:uppercase;
    font-size:var(--font-16);
    cursor: pointer;
    margin:15px 0 0;
}
.form .form_group .password_attribute{
    position: absolute;
    display: flex;
    justify-content: space-between;
    width:100%;
    font-size: var(--font-12);
    font-weight: var(--fw-600);
    bottom:-23px;
}
.form .form_group .remember_password{
    display:flex;
    align-items: center;
    gap:2px;
}
.form .form_group .password_visible{
    position: absolute;
    right:30px;
    top:50%;
    cursor: pointer;
}
.form .form_group .password_visible img{
    position: relative;
    width:22px;
}
.form .form_group #hide_password{
    display:none;
}
.form .form_group .form__error{
    color:var(--text-red);
    font-size: var(--font-12);
    font-weight: var(--fw-500);
}
/* ================ End Login Section ================ */
/* ================= FOOTER SEC ================ */
.footer__container{
    background-color: var(--bg-color-grey);
    padding:20px 35px;
    border-top:1px solid #ccc;
    margin:10px 0 0;
}
.footer__container p{
    font-weight: var(--fw-600);
    font-size: var(--font-13);
    text-align: center;
}
/* ============== // END FOOTER SEC ================ */