*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

p{
    margin-bottom: unset;
}

h1,h2,h3,h4,h5,h6{
    margin-bottom: unset;
}

div h5, div h6{
    margin-bottom: unset;
}

ul, nav ul{
    margin-bottom: unset;
}

nav ol{
    margin-bottom: 0;
    padding-left: unset;
}

li{
    margin: unset;
}

ul{
    padding-left: unset!important;
}

.underline{
    text-decoration: underline;
}

th,td{
    white-space: nowrap;
}




/* common classes */
.width-unset{
    width: unset!important;
}

.w-120{
    width: 120px!important;    
}

.w-150{
    width: 150px!important;    
}

.w-170{
    width: 170px!important;    
}

.w-300{
    width: 300px!important;
}

.appmaintitle, .modalmessage{
    color: var(--type_primary);
    font-weight: 700;
}

.formsubtitle{
    color: var(--type_primary);
}

.time{
    font-size: 12px!important;
    color: var(--type_secondary);
}

.tb{
    padding: 16px 0;
}

.stroke_active{
    margin-left: -19px!important;
}

.maincontent{
    margin-left: 240px;
    padding: 0 12px;
    z-index: 1;
    position: relative;
    top: 60px;
}

.rotateonclick{
    rotate: -360deg!important;
}

.rotateonclick2{
    rotate: 90deg!important;
}

.maintitle_divider{
    position: absolute;
    left: -12px;
    width: 100%;
    color: var(--divider);
    z-index: 1;
    opacity: 1!important;
    margin: unset!important;
}


.main-title-section{
    background-color: white;
    position: sticky;
    top: 60px;
    
}



@media (max-width:576px) {

    canvas{
        display: unset!important;
    }

    
}

/* colors */
:root{

    /* theme colors */
    --theme_primary:#052F5F;
    --theme_secondary:#5386E4;
    --theme_secondary_lighter:#376ac9;

    /* Primary Button Colors */
    --primary_button_color:#5386E4;
    --primary_button_hover:#3B68BA;
    --primary_button_pressed:#30528F;
    --primary_button_focused_stroke:#B2CDFF;
    --button_disabled_bg_color:#D2D0CE;

    /* Secondary Button Colors */
    --secondary_button_color:#EDEBE9;
    --secondary_button_hover:#E1DFDD;
    --secondary_button_pressed:#D2D0CE;
    --secondary_button_focused_stroke:#E1DFDD;

    /* linkcolor */
    --link_color:#276EF1;
    --link_color_active_alternate:#2565db;
    --link_color_active:#0e43a7;
    

    /* Type Colors */
    --type_primary:#323130;
    --type_secondary:#605E5C;
    --type_disabled:#A19F9D;
    --divider:#EDEBE9;

    /* grey colors */
    --white:#fff;
    --grey10:#FAF9F8;
    --grey20:#F3F2F1;
    --grey30:#EDEBE9;
    --grey40:#E1DFDD;
    --grey50:#D2D0CE;
    --grey60:#C8C6C4;
    --grey90:#A19F9D;
    --grey130:#605E5C;
    --grey150:#3B3A39;
    --top-navbar-bg:#E0E0E0;

    /* input box color */
    --input_box_bg:#F6F6F6;
    --input_box_border:#8A8886;
    --input_box_placeholder:#8A8886;
    --input_border_hover:#052F5F;
    --validation_red_icon:#CB0303;
    --input_box_disabled_bg:#D2D0CE;
    --input_data_collected_bg:#EFF6FC;
    --input_data_collected_stroke:#5386E4;


    /* table pill colors */
    --sent_type:#046EC9;
    --sent_bg:#C4E5FE;
    --count_type:#1d5a74;
    --count_type_2 : #525e08;
    --opens_type:#C33909;
    --clicks_type:#7239EA;
    --epc_type:#F1416C;
    --cpm_type:#700548;
    --count_bg:#B3D7E7;
    --count_bg_2:#EEF3CA;
    --opens_bg:#FFDCA2;
    --openers_bg:#ffe7c2;
    --clicks_bg:#EDD9FF;
    --epc_bg:#FFD7DF;
    --cpm_bg:#FAC9E7;
    --revenue_bg:#E6F5E5;
    --revenue_type:#0F7B0F;
    --warming_type:#D64933;
    --warming_bg:#FFE7E3;
    --theme_color_pill_bg:#EFF6FC;

    --table_header_bg:#052F5F;
    --table_row_even_bg:#F8F8F8;
    --table_header_hover:#052549;
    --table_hover_bg:#F0F5FF;
    --table_total_bg:#336EDA;
    --table_row_selected:#BACFF9;


    /* group buttons */
    --group_butto_color:#CCCCCC;

    /* toggle switch colors */
    --toggle_green:#0A7E22;
    --toggle_disabled:#A19F9D;

    /* tab bar colors */
    --tab_bar_bg_color:#E1DFDD;
    --tab_bar_hover:#EBEBEB;

    /* action colors */
    --success:#107C10;   
    --error:#A80000;
    --caution:#CDA60D;
    --error_bg_fill:#FDE7E9;
    --success_bg:#E6F5E5;


    /* navigation item colors */
    --navigation_item_inactive:#D2D0CE;

    /* tooltip */
    --tooltip-box-shadow:rgba(9, 30, 66, 0.31);

    /* nav search bar colors */
    --nav_search_hoverandfocus : #1B3C63;



    /* pagination root */
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;


    /* campaign detail colors */
    --campaign_alotted_text:#503D3F;
    --campaign_alotted_bg:#DFCDCF;
    --campaign_running_text:#BEAB01;
    --campaign_running_bg:#F2F6DD;
    --campaign_completed_text:#107C10;
    --campaign_completed_bg:#DFF6DD;
    --campaign_remaining_text:#D83B01;
    --campaign_remaining_bg:#FED9CC;

    /* holiday colors */

    --holiday1:#E26D5A;
    --holiday2:#A05C7B;
    --holiday3:#CCA43B;
    --holiday4:#376996;
    

    /* grid icon colors */

    --grid-icon-bg:#C9E2FF;

    /* notification colors */
    --new-notification-text-color:#FF3939;
    --new-notification-bg-color:#FFE3E3;
    --notification-variant-bg-1:#F5FEFA;
    --notification-variant-bg-2:#F8FDFF;
    --notification-variant-bg-3:#FFFCF5;
    --notification-variant-bg-4:#FFF9FC;  
    --notification-stroke-color:#E6E6E6;


    --widget-bg:#CEDFFF;

    --login-bg:#EFF6FC;

    --datafile-bg:#FAEAF1;
    --datafile-text:#CD286A;


    --analytics-data-bg:#F6F6F6;
    --analytics-data-strole : #ECECEC;
    --contribution-color:#DB5A11;


    --profile-head-bg:#EEF3FD;

    --skill-color-1:#db025c;
    --skill-color-2:#7902db;
    --skill-color-3:#d86c07;
    --skill-color-4:#1b5acb;
    --skill-color-5:#2e5504;
    --skill-color-6:#c8fe20;
    --skill-color-7:#70ca86;
    --skill-color-8:#7e5b6c;
    --skill-color-9:#2e5504;
    --skill-color-10:#33a7b1;

    --skill-color-bg1:#db025c2d;
    --skill-color-bg2:#7902db36;
    --skill-color-bg3:#d86c0744;
    --skill-color-bg4:#1b59cb25;
    --skill-color-bg5:#2e55042f;
    --skill-color-bg6:#c6fe202d;
    --skill-color-bg7:#70ca862a;
    --skill-color-bg8:#7e5b6c28;
    --skill-color-bg9:#2e550425;
    --skill-color-bg10:#33a6b11c;


    --performer-text:#0C9321;
    --performer-bg:#E7F5E9;

    --progress-bar-bg:#E9ECEF;
    --progress-bar-progress:#11B981;

}


/* primary button starts here */

.primary_btn{
    font-size: 14px;
    font-weight: 500;
    padding: 7.5px 20px;
    line-height: 20px;
    border-radius: 6px;
    border: unset;
    background-color: var(--primary_button_color);
    color: white;
    text-align: center;
    transition: .2s;
}

.primary_btn:hover{
    background-color: var(--primary_button_hover);
    transition: .2s;
}

.primary_btn:focus-visible{
    background-color: var(--primary_button_hover);
    outline: 0;
    box-shadow: 0px 0px 0px 0.25rem #B2CDFF;
}

.primary_btn:active{
    background-color: var(--primary_button_pressed);
}

.primary_btn:disabled{
color: var(--type_disabled);
font-weight: 400;
background-color: var(--button_disabled_bg_color);
}

/* primary button ends here */

/* icon button */

.icon-button{
    border: unset;
    background-color: unset;
    opacity: 0.75;
    padding: 4px;
    transform: scale(90%);
    transition: 0.2s;
}

.icon-button:hover{
    opacity: 1;
    transform: unset;
    transition: 0.2s;
}

.icon-button:active{
    opacity: 1;
    transform: scale(95%);
    transition: 0.1s;
}



/* icon button ends here */



/* secondary button starts here */

.secondary_btn{
    font-size: 14px;
    font-weight: 500;
    padding: 7.5px 20px;
    border-radius: 6px;
    line-height: 20px;
    border: unset;
    background-color: var(--secondary_button_color);
    color: var(--type_secondary);
    text-align: center;
    transition: .2s;
}

.secondary_btn:hover{
    background-color: var(--secondary_button_hover);
    transition: .2s;
}

.secondary_btn:focus-visible{
    outline: 0;
    box-shadow: 0px 0px 0px 0.25rem #d1d1d1;
}

.secondary_btn:active{
    background-color: var(--secondary_button_pressed);
}

.secondary_btn:disabled{
color: var(--type_disabled);
font-weight: 400;
background-color: var(--button_disabled_bg_color);
}

/* secondary button ends here */



/* primary button with icon starts here */

.primary_btn_icon{
    font-size: 14px;
    font-weight: 500;
    padding: 7.5px 20px;
    line-height: 20px;
    border-radius: 6px;
    border: unset;
    background-color: var(--primary_button_color);
    color: white;
    text-align: center;
    transition: .2s;
    vertical-align: middle;
}

.primary_btn_icon:hover{
    background-color: var(--primary_button_hover);
    transition: .2s;
}

.primary_btn_icon:focus-visible{
    background-color: var(--primary_button_hover);
    outline: 0;
    box-shadow: 0px 0px 0px 0.25rem #B2CDFF;
}

.primary_btn_icon:active{
    background-color: var(--primary_button_pressed);
}

.primary_btn_icon:disabled{
color: var(--type_disabled);
font-weight: 400;
background-color: var(--button_disabled_bg_color);
}

.primary_btn_icon:disabled img{
    filter: brightness(0) saturate(100%) invert(72%) sepia(7%) saturate(91%) hue-rotate(349deg) brightness(88%) contrast(87%);
    }


.primary_btn_icon img{
    margin-right: 4px;
    vertical-align: middle;
}

/* primary button with icon ends here */



/* other button starts here */

.other_btn{
    font-size: 14px;
    font-weight: 500;
    padding: 7.5px 20px;
    line-height: 20px;
    border-radius: 6px;
    border: 1px solid var(--grey130);
    background-color: var(--white);
    color: var(--type_secondary);
    text-align: center;
    transition: .2s;
}

.other_btn:hover{
    background-color: var(--secondary_button_hover);
    transition: .2s;
}

.other_btn:focus-visible{
    background-color: var(--secondary_button_hover);
    outline: 0;
    box-shadow: 0px 0px 0px 0.25rem #d4d4d4;
}

.other_btn:active{
    background-color: var(--secondary_button_pressed);
}

.other_btn:disabled{
color: var(--type_disabled);
font-weight: 400;
background-color: var(--button_disabled_bg_color);
border: unset;
}


/* primary button ends here */

/* radio button starts here */

.radio{
    width: 20px;
    height: 20px;
}



/* radio button ends here */


/* input type text starts here */

input[type=text], input[type=number], input[type=email], input[type=password], input[type=url] {
    background-color: var(--input_box_bg);
    border: 1px solid var(--input_box_border);
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 6px;
    color: var(--type_primary);
    transition: .2s;
}

input[type=text]::placeholder, input[type=number]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder, input[type=url]::placeholder{
    color: var(--input_box_placeholder);
}



.inputgroup_default label{
    margin-right: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--type_primary);
}

.mandatory{
    color: var(--validation_red_icon);
}

input[type=text]:hover, input[type=number]:hover, input[type=email]:hover, input[type=password]:hover, input[type=url]:hover{
    border: 1px solid var(--input_border_hover);
    transition: .2s;
}



input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus{
    border: 1px solid var(--input_border_hover);
    box-shadow: 0px 0px 0.25rem rgba(5, 47, 95, 0.61);
}

input[type=text]:focus-visible, input[type=number]:focus-visible, input[type=email]:focus-visible, input[type=password]:focus-visible, input[type=url]:focus-visible{
    outline: 0;
}

input[type=text]:disabled, input[type=number]:disabled, input[type=email]:disabled, input[type=password]:disabled, input[type=url]:disabled{
    background-color: var(--input_box_disabled_bg);
    border: unset;
}

.inputgroup_stack label{
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--type_primary);
}

.inputopt{
    font-size: 12px;
    color: var(--type_secondary);
}


.inputgroup_collected input[type=text]{
    color: var(--type_primary);
    font-size: 14px;
    font-weight: 600;
    background-color: var(--input_data_collected_bg);
    border: 1px dashed var(--input_data_collected_stroke);
}

.inputgroup_collected input[type=text]:focus{
    background-color: var(--input_data_collected_bg);
    border: 1px dashed var(--input_data_collected_stroke);
    box-shadow: unset;
}

.inputgroup_collected input[type=text]:focus-visible{
    outline: unset;
}

.inputgroup_collected input[type=text]:disabled{
    background-color: var(--input_box_disabled_bg);
    border: unset;    
    font-weight: 400;
}

.inputgroup_collected label{
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--type_primary);
}




.inputgroup_collected_stack input[type=text]{
    color: var(--type_primary);
    font-size: 14px;
    font-weight: 600;
    background-color: var(--input_data_collected_bg);
    border: 1px dashed var(--input_data_collected_stroke);
}

.inputgroup_collected_stack input[type=text]:focus{
    background-color: var(--input_data_collected_bg);
    border: 1px dashed var(--input_data_collected_stroke);
    box-shadow: unset;
}

.inputgroup_collected_stack input[type=text]:focus-visible{
    outline: unset;
}

.inputgroup_collected_stack input[type=text]:disabled{
    background-color: var(--input_box_disabled_bg);
    border: unset;    
    font-weight: 400;
}

.inputgroup_collected_stack label{
    margin-right: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--type_primary);
    padding-bottom: 4px;
}

@media (max-width:576px) {
   
.inputgroup_collected_stack, .dropdowngroup_default, .inputgroup_default  {
    display: flex;
    flex-direction: column;
    text-align: left;
}
    
}



/* textarea starts here */

textarea{
    background-color: var(--input_box_bg);
    border: 1px solid var(--input_box_border);
    padding: 6px 8px;
    font-size: 14px!important;
    border-radius: 6px;
    color: var(--type_primary);
    transition: .2s;
}

textarea:hover{
    border: 1px solid var(--input_border_hover);
    transition: .2s;
}

textarea:focus{
    border: 1px solid var(--input_border_hover);
    box-shadow: 0px 0px 0.25rem rgba(5, 47, 95, 0.61);
}

textarea:focus-visible{
    outline: 0;
}

textarea:disabled{
    background-color: var(--input_box_disabled_bg);
    border: unset;
}

.textarea_collected_stack{
    display: flex;
}

.textarea_collected_stack label{
    font-size: 14px;
    color: var(--type_primary);    
    margin-right: 8px;
}

.textarea_collected{
    color: var(--type_primary);
    font-size: 14px;
    font-weight: 600;
    background-color: var(--input_data_collected_bg);
    border: 1px dashed var(--input_data_collected_stroke);
    /* width: 300px; */
}

.textarea_collected:hover{
    border: 1px dashed var(--input_data_collected_stroke);
}

.textarea_collected:focus{
    background-color: var(--input_data_collected_bg);
    border: 1px dashed var(--input_data_collected_stroke);
    box-shadow: unset;
}

.textarea_collected:focus-visible{
    outline: unset;
}

.textarea_collected:disabled{
    background-color: var(--input_box_disabled_bg);
    border: unset;    
    font-weight: 400;
}






/* input icons starts here */

.input_icon{
    margin-left: 8px;
}

.inputgroup_icon input[type=number]{
    padding-left: 28px;
}


/* card styling starts here */

.card{
    border-radius: 3px!important;
    border: unset!important;
    background: var(--white);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}

.drop-shadow-2{
    box-shadow: 0px 0px 3px rgba(9, 30, 66, 0.31)!important;
}

.card-head{
    padding: 16px;
    border-bottom: 1px solid var(--divider);
}

.card-title{
    margin-left: 8px;
    font-size: calc(1rem + 0.21vw);
    /* font-size: 20px; */
    font-weight: 600;
    color: var(--type_primary)!important;
    margin-bottom: unset!important;
}

.card-message{
    font-size: calc(1rem + 0.21vw);
    font-weight: 600;
    color: var(--type_primary)!important;
}

.card-inside-divider{
    color: var(--divider);
    opacity: 1;
    margin: unset!important;
}

/* card styling ends here */



/* btn-variant starts here */
.btn-variant-1{
    background-color: unset;
    border: unset;
    padding: 16px;
    transition: 0.2s;
    border-radius: 10px;
    width: 100%;
    height: 100%;
}

.btn-variant-1 h5{
    color: var(--type_primary);
    font-weight: 600;
    text-align: center;
    margin-bottom: 16px;
}

.btn-variant-1 span{
    color: var(--theme_primary);
    font-size: calc(2rem + 0.2vw);
    font-weight: 500;
    background-color: var(--table_row_selected);
    padding: 9px 24px;
    border-radius: 10px;
}

.btn-variant-1:hover{
    transition: 0.2s;
    background-color: var(--grey20);
}

.btn-variant-1:focus-visible{
    background-color: var(--grey20);
    outline: unset;
    transform: scale(102%);
}

.btn-variant-1:active{
    background-color: var(--theme_color_pill_bg)!important;
}


.btn-variant-1.active{
    background-color: var(--theme_color_pill_bg);
}

.btn-variant-1.active:active{
    background-color: var(--theme_color_pill_bg)!important;
}





.btn-variant-2{
    background-color: unset;
    border: unset;
    padding: 16px;
    transition: 0.2s;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}

.btn-variant-2 h6{
    color: var(--type_primary);
    margin-bottom: 16px;
    font-weight: 600;
}

.btn-variant-2 span{
    color: var(--theme_primary);
    font-size: 28px;
    font-weight: 600;
    background-color: var(--table_row_selected);
    padding: 8px 16px;
    border-radius: 10px;
}

.btn-variant-2:hover{
    transition: 0.2s;
    background-color: var(--grey20);
}

.btn-variant-2:focus-visible{
    background-color: var(--grey20);
    outline: unset;
    transform: scale(102%);
}

.btn-variant-2:active{
    background-color: var(--theme_color_pill_bg)!important;
}


.btn-variant-2.active{
    background-color: var(--theme_color_pill_bg);
}

.btn-variant-2.active:active{
    background-color: var(--theme_color_pill_bg)!important;
}


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










/* btn-variant ends here */





/* close button inside card */

.btn-close {
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding:unset!important;
    color: var(--bs-btn-close-color);
    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
}

.btn-close:hover{    
    --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D60000'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E")!important;
}


.btn-close:focus{
    box-shadow: none!important;
    --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D60000'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E")!important;
    
}

.btn-close:active{
    --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A80000'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E")!important;
}

.modal-content {
    border: unset!important;
    border-radius: 3px!important;
    outline: 0;
}

.modal{
--bs-modal-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.3)!important;
}

div.modal{
    background: rgba(0, 0, 0, 0.50)!important;
    mix-blend-mode: normal!important;
    backdrop-filter: blur(4px)!important;
}


/* close button inside card ends here */




/* datepicker */


.datepicker{
    width: max-content;
}

.date_picker_icon{
    margin-right: 8px;
    cursor: pointer;
}

.datepicker input[type="date"]:disabled{
    background-color: var(--input_box_disabled_bg);
    border: unset;
    cursor: not-allowed!important;
}



.flatpickr-months .flatpickr-month{
    background-color: var(--theme_secondary)!important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months{
    background-color: var(--theme_secondary)!important;
}

.flatpickr-weekday{
    background-color: var(--theme_secondary)!important;
    color: white!important;
}

.flatpickr-weekdays{
    background-color: var(--theme_secondary)!important;
}

.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #428ecb!important;
}

.flatpickr-calendar.arrowBottom:after {
    border-top-color: white!important;
}


.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #428ecb!important;
}

.flatpickr-monthDropdown-month{
    background-color: white!important;
    color: var(--type_secondary)!important;
}

.flatpickr-day:hover{
    background-color: var(--theme_secondary)!important;
    color: var(--white)!important;
    border: unset;
}

.flatpickr-day:focus-visible{
    background-color: var(--theme_secondary)!important;
    color: var(--white)!important;
    border: unset;
}

.flatpickr-day.selected{
    background-color: var(--theme_secondary)!important;
    color: var(--white)!important;
    border: unset;
    box-shadow: 0px 0px 3px rgba(83, 134, 228, 0.5)!important;
}



.flatpickr-day.today{
    border: unset!important;
    background-color: #D4E3FF!important;
    color: var(--type_primary)!important;
    
}


.flatpickr-day.today:hover{
    background-color: var(--theme_secondary)!important;
    color: var(--white)!important;
}

.flatpickr-day.today:focus-visible{
    border: 1px solid var(--theme_primary)!important;
    background-color: #D4E3FF!important;
}

.flatpickr-day.today.selected{
    background-color: var(--theme_secondary)!important;
    color: var(--white)!important;
    border: unset;
    box-shadow: 0px 0px 3px rgba(83, 134, 228, 0.5)!important;
}

.flatpickr-day.today.selected:hover{
    background-color: var(--theme_secondary)!important;
}

.flatpickr-next-month:hover{
    background-color: var(--primary_button_hover)!important;
    border-top-right-radius: 5px;
}

.flatpickr-next-month:active{
    background-color: var(--primary_button_pressed)!important;
    border-top-right-radius: 5px;
}

.flatpickr-prev-month:hover{
    background-color: var(--primary_button_hover)!important;
    border-top-left-radius: 5px;
}

.flatpickr-prev-month:active{
    background-color: var(--primary_button_pressed)!important;
    border-top-left-radius: 5px;
}

.flatpickr-next-month:hover svg, .flatpickr-prev-month:hover svg{
    fill: var(--white)!important;
}



.flatpickr-day.inRange {
    border-radius: 0;
    -webkit-box-shadow: -5px 0 0 #f1f1f1, 5px 0 0 #f1f1f1!important;
    box-shadow: -5px 0 0 #f1f1f1, 5px 0 0 #f1f1f1!important;
    background-color: #f1f1f1!important;
    border: unset!important;
}

.flatpickr-day.inRange:hover{
    color: unset!important;
}

.flatpickr-day.selected, .flatpickr-day.startRange{
    background-color: var(--theme_secondary)!important;
    border: unset!important;
    box-shadow: none!important;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)){
    box-shadow: unset!important;
}

.flatpickr-day.endRange, .flatpickr-day.startRange{
    background-color: var(--theme_secondary)!important;
    border: unset!important;
}

.flatpickr-day.endRange:hover{
    background-color: var(--theme_secondary)!important;
}


/* input tyle file starts here */

.choosefile-grp {
    display: flex;
}

.ChooseFile label{
    font-size: 0.875rem;
    color: var(--type_primary);
}

.choosefile-grp input[type="file"]{
    appearance: none;
    background-color: var(--input_box_bg);
    border: 1px solid var(--input_box_border);
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 6px 0 0 6px;
    color: var(--type_primary);
    transition: .2s;
}

.choosefile-grp input[type="file"]::-webkit-file-upload-button{
    display: none;
}


.choosefile-grp input[type=file]:hover{
    border: 1px solid var(--input_border_hover);
    transition: .2s;
}



.choosefile-grp input[type=file]:focus{
    border: 1px solid var(--input_border_hover);
    box-shadow: 0px 0px 0.25rem rgba(5, 47, 95, 0.61);
}

.choosefile-grp input[type=file]:focus-visible{
    outline: 0;
}

.choosefile-grp input[type=file]:disabled{
    background-color: var(--input_box_disabled_bg);
    border: unset;
}


.choosefile-grp .primary_btn_icon{
    border-radius: 0 6px 6px 0;
}


 input[type="file"]{
    background-color: var(--input_box_bg);
    border: 1px solid var(--input_box_border);
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 6px 0 0 6px;
    color: var(--type_primary);
    transition: .2s;
}


/* input type text ends here */


/* dropzone js starts here */

.dropzone{
    min-height: 92px!important;
    width: 92px;
    background-color: var(--white)!important;
    border: 1px dashed var(--input_box_border)!important;
    padding: unset!important;
    border-radius: 6px;
    display: grid;
    align-items: center;
}

.dz-default{
    color: var(--input_box_placeholder)!important;
    font-size: 0.875rem;
    padding: unset!important;
    margin: unset!important;
}

.dropzone .dz-preview{
    margin: unset!important;
    min-height: 92px!important;
}

.dropzone .dz-preview .dz-image {
    overflow: hidden;
    border-radius: 6px!important;
    width: 90px!important;
    height: 90px!important;
    position: relative;
    display: block;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

img[data-dz-thumbnail]{
    width: 90px!important;
    height: 90px!important;
}


.dropzone .dz-preview .dz-details {
    padding: 1em 1em!important;
}

.dropzone .dz-preview.dz-image-preview {
    background: unset!important;
}


.dropzone:hover{
    border: 1px dashed var(--theme_primary)!important;
    filter: drop-shadow(0px 1px 5px #00000011);
}




.dropzone:hover .dz-default{
    color: var(--theme_primary)!important;
    font-weight: 500;
}


.dz-default:focus .dropzone{
    border: 1px dashed var(--theme_primary)!important;
    filter: drop-shadow(0px 1px 5px #00000011);
}




/* dropzone js ends here */


/* Pill css starts here */

.pill{
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    padding: 1px 10px;
    width: max-content;
    margin: auto;
    border-radius: 11px;
}

.pill_sent{
    color: var(--sent_type);
    background-color: var(--sent_bg);
}

.pill_count{
    color: var(--count_type);
    background-color: var(--count_bg);
}

.pill_count_2{
    color: var(--count_type_2);
    background-color: var(--count_bg_2);
}

.pill_revenue{
    color: var(--revenue_type);
    background-color: var(--revenue_bg);
}

.pill_opens{
    color: var(--opens_type);
    background-color: var(--opens_bg);
}

.pill_clicks{
    color: var(--clicks_type);
    background-color: var(--clicks_bg);
}

.pill_epc{
    color: var(--epc_type);
    background-color: var(--epc_bg);
}

.pill_cpm{
    color: var(--cpm_type);
    background-color: var(--cpm_bg);
}

.pill_production{
    color: var(--revenue_type);
    background-color: var(--revenue_bg);
}

.pill_warming{
    color: var(--warming_type);
    background-color: var(--warming_bg);
}

.new_notification{
    color: var(--new-notification-text-color);
    background-color: var(--new-notification-bg-color);
    margin: unset;
}

.pilllarge{
    font-size: calc(1rem + .40vw);
    font-weight: bold;
    color: var(--theme_primary);
    background-color: var(--theme_color_pill_bg);
    padding: calc(0.5rem + 0.25vw) calc(1rem + 0.25vw);
    width: max-content;
    border-radius: 50px;
    margin: auto;
}


/* pill css ends here */

/* square pill css starts here */

.squarepill{
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    padding: 2px 4px;
    margin-bottom: unset;
    white-space: nowrap;
}

.squarepill_purchased{
    color: var(--success);
    background: var(--success_bg);
    font-size: 12px;
    margin-right: 24px;
}

.squarepill_expired{
    color: var(--error);
    background-color: var(--error_bg_fill);
    font-size: 12px;
}


/* square pill css ends here */

/* table css starts here */

td p{
    margin-bottom: unset;
}

td em{
    color: var(--type_secondary);
}

.total td{
    background-color: var(--table_total_bg);
    color: white;
    font-weight: 500;
    border: unset!important;
}

.data_table th{
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    background-color: var(--table_header_bg);
    color: white;
    text-align: center;
    padding: 15px 10px;
}

.data_table th:hover{
    background-color: var(--table_header_hover);
}

.data_table th:active{
    background-color: var(--table_header_bg);
}

.disable_hover_active:hover, .disable_hover_active:active{
    background-color: var(--table_header_bg)!important;
}



.data_table th:first-child{
    border-top-left-radius: 3px;
}

.data_table th:last-child{
    border-top-right-radius: 3px;
}

.data_table tr td{
    font-size: 14px;
    line-height: 20px;
    /* padding: 10px 10px; */
    text-align: center;
    border: 1px solid var(--divider);
    border-collapse: collapse !important;
}

table.data_table {
    border-collapse: collapse !important;
}

.data_table tr:nth-child(odd){
    background-color: var(--white);
}

.data_table tr:nth-child(even) {
    background-color: var(--table_row_even_bg);
  }
  
.nosearch_image{
    padding-top: 50px!important;
    padding-bottom: 50px!important;
    background-color: var(--white)!important;
}

.data_table tbody tr:hover{
    background-color:var(--table_hover_bg);
    
}

.table_row_selected_bg_color{
    background-color: var(--table_row_selected)!important;
}


.data_table_variant_2 th{
    background-color: var(--grey30)!important;
    color: var(--type_primary)!important;
    border: 1px solid var(--grey40);
}



tr.accordion-collapse.collapse:hover{
background-color: var(--table_row_even_bg)!important;
}

.data_table_variant_2 tr{
    background-color: var(--white)!important;
}



.entries p{
    font-size: 14px;
    line-height: 20px;
    color: var(--type_secondary);
}

.table_value_stacked{
    color: var(--type_secondary);
}

.table_link a{
    color: var(--link_color);
    text-decoration: none;
}

.table_link a:hover{
    text-decoration: underline;
}

.table_link a:active{
    color: var(--link_color_active);
}

.table_link a:focus-visible{
    outline: 0;
    text-decoration: underline;
}

.table_default_multiple span{
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: var(--type_secondary);
}

.table_default_triple span{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    color: var(--type_secondary);
}

.table_default_multiple_teams span{
    display: flex;
    justify-content: center;
}

.table_default_pillpercent{
    color: var(--success);
}


.subnet_expired{
    color: var(--error);
}

.subnet_expiresin7days{
    color: var(--caution);
}

.subnet_expiresin15days{
    color: var(--success);
}


.action_icon_link{
    z-index: 1050;
}

.bgs{
    background-color: var(--grey30);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    width: 32px;
    height: 32px;
    z-index: 0;
    border-radius: 50%;
    display: none;    
    z-index: 1000;
    outline: 0;
}



.action_icon_link:hover + .bgs{
    display: block;
}

.action_icon_link:active + .bgs{
    background-color: var(--grey10);
}


.action_icon_link:focus-visible + .bgs{
    display: block;
    outline: 0;
}


.action_icon_link:focus-visible{
    outline: 0;
}

.action_icon_link:focus-visible + .action_icon_link{
    outline: 0;
}


.table_action_icon_group{
    display: flex;
    align-items: center;
    justify-content: center;
}

.table_action_icon_group .table_action:not(:last-child){
    margin-right: 16px;
}


.action_accordion{
    background-image: url('../media/svg/table_accordion_icon.svg');
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    width: 24px;
    height: 24px;
    margin: auto;
}

/* .action_accordion:hover{
    background-color: var(--grey30);
    border: 2px solid var(--grey30)!important;
    border-radius: 50%;
}

.action_accordion:focus-visible{
    background-color: var(--grey30);
    border: 2px solid var(--grey30)!important;
    border-radius: 50%;
    outline: 0;
}

.action_accordion:active{
    background-color: var(--grey40);
    border: 2px solid var(--grey40)!important;
    border-radius: 50%;
} */





/* input[type=checkbox] {
    position: relative;
      cursor: pointer;
}

input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background-color:#e9e9e9;
    border: 2px solid var(--grey90);
    border-radius: 2px;
}

input[type=checkbox]:checked:before {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background-color:var(--theme_secondary);
    border: unset;
}
input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 3.5px;
    left: 7px;
} */



input[type="checkbox"], input[type="radio"] {
	 appearance: none;
	 height: 20px;
	 width: 20px;
	 background: #fff;
	 border: 2px solid var(--grey90);
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 cursor: pointer;
	 outline-offset: 5px;
	 outline-color: var(--type_disabled);
     margin: auto;
}



th input[type="checkbox"]{
    appearance: none;
    height: 20px;
    width: 20px;
    background: var(--theme_primary);
    border: 2px solid var(--grey20);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline-offset: 5px;
    outline-color: var(--type_disabled);
    margin: auto;
}

th input[type="checkbox"]:disabled{
    opacity: 0.7;
    background: var(--button_disabled_bg_color);
    cursor: not-allowed;
}

th input[type="checkbox"]:after {
    content: "";
    display: block;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
}


th input[type="checkbox"]:checked:after{
    transform: scale(1);
}
th input[type="checkbox"] {
    border-radius: 5px;
}
th input[type="checkbox"]:after {
    width: 14px;
    height: 17.5px;
}
th input[type="checkbox"]:checked {
    border: none;
    background-color: var(--grey20, #dfdfdf);
}
th input[type="checkbox"]:checked:after {
    content: url("../media/svg/tick_2.svg");
}

th input[type="checkbox"]:indeterminate {
    content: url("../media/svg/indeterminate.svg");
}


th input[type="checkbox"]:checked:focus-visible{
    box-shadow: 0 0 0 4px #3f83e949;    
    outline: 0;
}

th input[type="checkbox"]:checked:hover{
    box-shadow: 0 0 0 4px #3f83e949;    
    outline: 0;
}

th input[type="checkbox"]:checked:focus{
    box-shadow: 0 0 0 4px #3f83e949;    
    outline: 0;
}

th input[type="checkbox"]:not(:checked):hover{
    box-shadow: 0 0 0 4px #3f83e949;  
    
}

th input[type="checkbox"]:not(:checked):focus-visible{
    box-shadow: 0 0 0 4px #3f83e949;  
    outline: 0;
    
}









 input[type="checkbox"]:disabled, input[type="radio"]:disabled {
	 opacity: 0.7;
	 background: var(--button_disabled_bg_color);
	 cursor: not-allowed;
     box-shadow: none!important;
}
 input[type="checkbox"]:after, input[type="radio"]:after {
	 content: "";
	 display: block;
	 transform: scale(0);
	 transition: 120ms transform ease-in-out;
}
 input[type="checkbox"]:checked:after, input[type="radio"]:checked:after {
	 transform: scale(1);
}
 input[type="checkbox"] {
	 border-radius: 5px;
}
 input[type="checkbox"]:after {
	 width: 14px;
	 height: 17.5px;
}
 input[type="checkbox"]:checked {
	 border: none;
	 background-color: var(--theme_secondary, #dfdfdf);
}
 input[type="checkbox"]:checked:after {
	 content: url("../media/svg/checkbox_tick.svg");
}


.analytics-myreport-checkbox{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--type_primary);
}

.analytics-myreport-checkbox label{
    padding-left: 8px;
}















 input[type="radio"] {
	 border-radius: 20px;
}
 input[type="radio"]:after {
	 width: 10px;
	 height: 10px;
	 border-radius: 7px;
}


 input[type="radio"]:checked {
	 border-color: var(--theme_secondary);
}
 input[type="radio"]:checked:after {
	 background-color: var(--theme_secondary);
}
 
input[type="radio"]:checked:focus, input[type="radio"]:checked:hover, input[type="radio"]:checked:focus-visible, input[type="checkbox"]:checked:focus-visible{
    box-shadow: 0 0 0 4px #bbd6ff;    
    outline: 0;
}


input[type="radio"]:checked:active{
    box-shadow: 0 0 0 4px #99c2ff;    
}


input[type="radio"]:not(:checked):hover, input[type="checkbox"]:not(:checked):hover{
    box-shadow: 0 0 0 4px #e4e3e3;  
    
}

input[type="radio"]:not(:checked):focus-visible, input[type="checkbox"]:not(:checked):focus-visible{
    box-shadow: 0 0 0 4px #e4e3e3;  
    outline: 0;
    }


input[type="checkbox"]:checked:focus, input[type="checkbox"]:checked:hover {
    box-shadow: 0 0 0 4px #bbd6ff;    
}


.table_copy_to_clip:hover{
    filter: brightness(0) saturate(100%) invert(14%) sepia(100%) saturate(1134%) hue-rotate(192deg) brightness(90%) contrast(103%);
}

.table_copy_to_clip:focus-visible{
    filter: brightness(0) saturate(100%) invert(14%) sepia(100%) saturate(1134%) hue-rotate(192deg) brightness(90%) contrast(103%);
    outline: 0;
}





/* table type 2 starts here */


.action_table th{
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    background-color: var(--table_header_bg);
    color: white;
    text-align: center;
    padding: 15px 10px;
}

.action_table th:first-child{
    border-top-left-radius: 3px;
}

.action_table th:last-child{
    border-top-right-radius: 3px;
}

.action_table tr td{
    font-size: 14px;
    line-height: 20px;
    padding: 10px 10px;
    text-align: center;
    border: 1px solid var(--divider);
    background-color: white;
    color: var(--type_primary);
}

.action_table tbody tr{
    background-color:var(--white);
}

.action_table tbody tr:hover{
    background-color:var(--table_hover_bg)!important;
}

.action_delete{
    background-image: url('../media/svg/Delete_Icon_default.svg');
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    margin: auto;
}

.action_delete:hover{
    background-color: var(--error_bg_fill);
}

.action_delete:focus-visible{
    background-color: var(--error_bg_fill);
    outline: 0;
}

.action_delete:active{
    background-color: #FFBAC0;
}


/* table type 2 ends here */


/* table_lines starts here */

.table_lines{
    border-radius: 3px;
}

.table_lines thead tr td{
    border-radius: 3px;
}


.table_lines th{
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    background-color: var(--table_header_bg);
    padding: 12px 16px;
    text-align: left;
}

.table_lines td{
    padding: 10px;
    border-top: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
}

.table_lines thead tr{
    width: 100%;
}

.table_lines thead tr th:first-child{
border-top-left-radius: 3px;
}

.table_lines thead tr th:last-child{
    border-top-right-radius: 3px;
    }

.table_lines tbody tr:last-child td:last-child {
    border-bottom-right-radius: 3px!important;
        }

        .table_lines tbody tr:last-child td:first-child{
            border-bottom-left-radius: 3px!important;
                }



.table_lines thead tr th:not(:first-child){
    width: 40px;
    text-align: center;
    padding: unset;
}

.table_lines tbody tr td:not(:first-child){
    width: 40px;
    text-align: center;
    padding: 10px;
}

.table_lines tbody tr td:first-child{
    border-left: 1px solid var(--divider);
}

.table_lines tbody tr td:last-child{
    border-right: 1px solid var(--divider);
}

.table_lines tbody tr:nth-child(odd){
    background-color: var(--white);
}

.table_lines tbody tr:nth-child(even) {
    background-color: var(--table_row_even_bg);
  }


.table_lines tr td{
    font-size: 14px;
    line-height: 20px;
    color: var(--type_secondary);
}


.table_lines tbody tr:hover .likes_dislikes_name{
color: white;
}

.table_lines tbody tr:hover td{
    background-color: var(--theme_secondary);
    border: 1px solid var(--theme_secondary);
}

.table_lines tbody tr:hover .like_dislike{
    color: white;
}


.table_lines tbody tr:hover td span{
    visibility: visible!important;
}

.lines_action_icons a{
    margin-left: 12px;
}


.like_dislike{
    color: var(--type_secondary);
    text-decoration: none;
}

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



.likedislikedetails{
    position: absolute;  
    right: 0;
    width: 250px;
    background: #FFFFFF;
    box-shadow: 0px 0px 3px rgba(9, 30, 66, 0.31);
    border-radius: 3px;
    display: none;
    z-index: 2;
}

.likes_dislikes_head .title{
    font-weight: 600;
    color: var(--type_primary);
    padding-left: 8px;
}

.likes_dislikes_head{
    padding: 8px;
    background-color: white;
    border-bottom: 1px solid var(--divider);
    border-radius: 3px;
    z-index: 1;
}

.likes_dislikes_details{
    list-style-type: none;
    padding-left: unset;
}

.likes_dislikes_details li{
    padding: 8px;
    background-color: var(--white);
}

.likes_dislikes_details li:nth-child(even){
    padding: 8px;
    background-color: var(--table_row_even_bg);
}

.likes_dislikes_details span{
    padding-left: 8px;
}

#like-dislike{
    overflow: auto;
    height: 190px;
    display:block;
    text-overflow:ellipsis;
}

.navbar-nav{
    overflow: auto;
    height: 100%;
    display:block;
    text-overflow:ellipsis;
    padding: 0 0 calc(20px + 120px) 0;
}


.simplebar-scrollbar:before {
    background: #bdbdbd!important;
    border-radius: 2px!important;
  }

  .like-dislike-tooltip{
    position: absolute;
    right: 14px;
    top: -12px;
    z-index: 1;
  }

  .like_dislike:focus-within + .likedislikedetails{
    display: block;
  }
  

/* table_lines ends here */


/* servercard detail starts here */

.servercard{
    background: #FFFFFF;
    box-shadow: 0px 0px 3px rgba(9, 30, 66, 0.31);
    border-radius: 3px;
    padding-bottom: 16px;
}

.servercard_head{
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    border-bottom: 1px solid var(--divider);
}

.servercard_body{
    padding-top: 24px;
    padding-bottom: 24px;
}

.servercard_title{
    font-size: calc(1rem + 0.2vw);
    color: var(--type_primary);
}

.servercard_sent{
    font-size: calc(1rem + 0.1vw);
    color: var(--type_primary);
    float: right;
}

.servercard_revenue{
    font-size: calc(1rem + 0.1vw);
    color: var(--revenue_type);
    float: right;
    clear: both;
}

.purchaseandexpiry{
    font-size: 12px;
    color: var(--type_primary);
    padding-right: 4px;
    white-space: nowrap;
}

.servercard_domain, .servercard_location{
    font-size: 12px;
    color: var(--type_secondary);
    padding-top: 2px;
}

.servercard_location{
    float: right;
}

.servercard_purchase{
    padding: 8px;
    border: 1px solid var(--divider);
    margin: 0 8px;
}

/* servercard detail ends here */




/* subnet table starts here */

/* .subnet-details-card{
    overflow: scroll;
    height: 255px;
} */


.subnet_table th{
    color: var(--type_primary);
    font-size: 14px;
    text-align: center;
    background-color: white;
    padding: 12px;
    border-bottom: 1px solid var(--divider);
}

.subnet_table td{
    color: var(--type_primary);
    font-size: 14px;
    text-align: center;
    padding: 12px;
    border-bottom: 1px solid var(--divider);
}

/* .subnet_table tbody tr:hover td{
    background-color: var(--table_hover_bg);
}

.subnet_table tbody tr:nth-child(:even){
    background-color: var(--table_hover_bg);
}

.subnet_table tr:nth-child(odd){
    background-color: var(--white);
}

.subnet_table tr:nth-child(even) {
    background-color: var(--table_row_even_bg);
  } */

.table-accordion{
    cursor: pointer;
    transition: 0.2s;
}

.table-accordion:hover{
    background-color: var(--table_hover_bg);
    transition: 0.2s;
}

.table-accordion:focus-visible{
    background-color: var(--table_row_selected)!important;
    transition: 0.2s;
    border: 1px solid red;
}

.table-accordion:active{
    background-color: var(--table_row_selected)!important;
    transition: 0.2s;
}

.subnet_table canvas{
    background: #F9F9F9;
    box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.2);

}

.accordion-collapse td{
    padding: unset;
}

.action_accordion{
        transition: 0.2s;
}


.table-accordion:active .action_accordion{
    rotate: 180deg;
    transition: 0.2s;
}

.table_row_selected{
    background-color: var(--table_row_selected)!important;
    transition: 0.2s;
}
.accordion-icon-rotate{
    rotate: 180deg!important;
    transition: 0.2s;
}

tr[data-bs-toggle="collapse"]{
    cursor: pointer;
    transform: 0.2s!important;
}

/* .action_accordion:hover{
    background-color: var(--grey30);
    border: 2px solid var(--grey30)!important;
    border-radius: 50%;
}

.action_accordion:focus-visible{
    background-color: var(--grey30);
    border: 2px solid var(--grey30)!important;
    border-radius: 50%;
    outline: 0;
}

.action_accordion:active{
    background-color: var(--grey40);
    border: 2px solid var(--grey40)!important;
    border-radius: 50%;
} */



/* subnet table ends here */



/* holiday table starts here */

.holiday_table tbody tr:nth-child(even){
    background-color: var(--table_row_even_bg);
}

.holiday_table tbody tr:nth-child(odd){
    background-color: var(--white);
}

.holiday_table tbody tr:nth-child(1) .holiday_date{
    background-color: var(--holiday1);
}

.holiday_table tbody tr:nth-child(2) .holiday_date{
    background-color: var(--holiday2);
}

.holiday_table tbody tr:nth-child(3) .holiday_date{
    background-color: var(--holiday3);
}

.holiday_table tbody tr:nth-child(4) .holiday_date{
    background-color: var(--holiday4);
}



.holiday_table tbody tr:hover{
    background-color: var(--table_hover_bg);
}



.holiday_table tbody tr td{
    padding: 12px 16px;
}


.holiday_date{
    background-color: #E26D5A;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--white);
    text-align: center;
    line-height: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.holiday_name{
    color: var(--type_primary);
    font-size: 14px;
    line-height: initial;
    vertical-align: middle;
}


/* holiday table ends here */


/* campaign table starts here */

.campaign_table tr td:first-child{

    padding: 16px 8px 16px 16px!important;
}




.campaign_table tr td{
    font-size: 14px;
    padding: 16px 8px;
}




.campaign_table tbody tr:nth-child(even){
    background-color: var(--table_row_even_bg);
}

.campaign_table tbody tr:nth-child(odd){
    background-color: var(--white);
}

.campaign_table tbody tr{
border-top: 1px solid var(--divider);
border-bottom: 1px solid var(--divider);
}


.campaign_table tbody tr:hover{
    background-color: var(--table_hover_bg);
}




.top_campaign_sponsor{
    background-color: #711d81;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--white);
    text-align: center;
    line-height: initial;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top_campaign_name{
    color: var(--type_primary);
    font-size: 14px;
    font-weight: 500;
    line-height: initial;
    vertical-align: middle;
    /* max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; */
}

/* campaign table ends here */


/* table css ends here */

/* serach bar starts here */

.searchbar{
    position: relative;
    
}

.searchbar input[type=search]{
    background-color: var(--input_box_bg);
    border: 1px solid var(--input_box_border);
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 6px;
    color: var(--type_primary);
    transition: .2s;
}

.searchbar input[type=search]::placeholder{
    color: var(--input_box_placeholder);
}



.searchbar input[type=search]:hover{
    border: 1px solid var(--input_border_hover);
    transition: .2s;
}


.searchbar input[type=search]:focus{
    border: 1px solid var(--input_border_hover);
    box-shadow: 0px 0px 0.25rem rgba(5, 47, 95, 0.61);
}

.searchbar input[type=search]:focus-visible{
    outline: 0;
}

.searchbar input[type=search]:disabled{
    background-color: var(--input_box_disabled_bg);
    border: unset;
}



.search_icon{
    position: absolute;
    right: 10px;
    cursor:text;
    top: 50%;
    transform: translateY(-50%);
}

.searchbar input[type=search]::-webkit-search-cancel-button {
    /* Remove default */
    -webkit-appearance: none;
     /* Now your own custom styles */
    width: 24px;
    height: 24px;
    background-image: url("../media/svg/search_close_icon.svg");
    background-repeat: no-repeat;
    z-index: 1;
    cursor: pointer;
    }

    .searchbar input[type=search]::-webkit-search-cancel-button:hover{
        background-image: url("../media/svg/search_close_icon_hover.svg");
    }


/* searchbar type2 */

.searchbar_type2{
    position: relative;
    transition: 0.3s;
}

.searchbar_type2:hover{
    transform: scale(105%);
    transition: 0.3s;
}


.searchbar_type2 input[type=search]::placeholder{
    color: var(--input_box_placeholder);
    font-weight: 400;
}

.searchbar_type2 input[type=search]{
    background-color: unset;
    border-bottom: 1px solid var(--grey90);
    border-top: unset;
    border-right: unset;
    border-left: unset;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: unset;
    color: var(--white);
    transition: .2s;
    outline: 0;
    width: 350px /*suppose to be changed*/
}


.searchbar_type2 input[type=search]:hover{
    border-bottom: 1px solid var(--white);
    /* background: var(--nav_search_hoverandfocus); */
    transition: .2s;
}


.searchbar_type2 input[type=search]:focus{
    border-bottom: 1px solid var(--white);
    /* background: var(--nav_search_hoverandfocus); */
}

.searchbar_type2 input[type=search]:focus-visible{
    outline: 0;
}

.searchbar_type2 input[type=search]:disabled{
    background-color: var(--input_box_disabled_bg);
    border: unset;
}





.searchbar_type2 input[type=search]::-webkit-search-cancel-button {
    /* Remove default */
    -webkit-appearance: none;
     /* Now your own custom styles */
    width: 24px;
    height: 24px;
    background-image: url("../media/svg/navbar_search_close1.svg");
    background-repeat: no-repeat;
    z-index: 1;
    cursor: pointer;
    }

    .searchbar_type2 input[type=search]::-webkit-search-cancel-button:hover{
        background-image: url("../media/svg/navbar_search_close_hover1.svg");
    }

    .searchbar_type2 .search_icon{
        position: absolute;
    right: 8px;
    cursor:text;
    top: 50%;
    transform: translateY(-50%);
    }



/* search bar ends here */

/* button group starts here */


.btn-group>.btn-check:checked+.btn-sel{
    font-size: 14px;
    padding: 7.5px 20px;
    border: unset;
    background-color: var(--primary_button_color);
    color: var(--white);
    font-weight: 500;
    border-radius: 6px!important;
    cursor: pointer;
    white-space: nowrap;
}

.btn-group>.btn-check:checked+.btn-sel:hover{
    font-weight: 500;
    color: white;
    background-color: var(--primary_button_hover);  
}

.btn-group>.btn-check:checked+.btn-sel:active{
    background-color: var(--primary_button_pressed);
              
}

.btn-group>:not(.btn-check:checked)+.btn-unsel{
    font-size: 14px;
    padding: 7.5px 20px;
    background-color: unset;
    border: unset;
    color: var(--type_primary);
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
}

.btn-group>:not(.btn-check:checked)+.btn-unsel:hover{
    background-color: var(--primary_button_hover);
    color: var(--white);
    font-weight: 500;
    border-radius: 6px!important;
}

.btn-group>:not(.btn-check:checked)+.btn-unsel:active{
    background-color: var(--primary_button_pressed);
    color: var(--white);
    font-weight: 500;
}





.btn-group>.btn-check:checked+.btn-sel1{
    font-size: 14px;
    padding: 7.5px 20px;
    border: unset;
    background-color: var(--primary_button_color);
    color: var(--white);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.btn-group>.btn-check:checked+.btn-sel1:hover{
    font-weight: 500;
    color: white;
    background-color: var(--primary_button_hover);  
}

.btn-group>.btn-check:checked+.btn-sel1:active{
    background-color: var(--primary_button_pressed);
              
}

.btn-group>:not(.btn-check:checked)+.btn-unsel1{
    font-size: 14px;
    padding: 7.5px 20px;
    border: unset;
    background-color: var(--secondary_button_color);
    color: var(--type_primary);
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
}

.btn-group>:not(.btn-check:checked)+.btn-unsel1:hover{
    background-color: var(--primary_button_hover);
    color: var(--white);
    font-weight: 500;
}

.btn-group>:not(.btn-check:checked)+.btn-unsel1:active{
    background-color: var(--primary_button_pressed);
    color: var(--white);
    font-weight: 500;
}

.ctrbdr{
    border-left: 1px solid var(--white)!important;
    border-right: 1px solid var(--white)!important;
}

.rgtbdr{
    border-right: 1px solid var(--white)!important;
}
.lftbdr{
    border-left: 1px solid var(--white)!important;
}

.btn-group.btn-group-multi.font-small > label{
    font-size: 12px!important;    
}

.text-encoder-group-btn {
    overflow-wrap: break-word;
    overflow-x: auto;
    flex-wrap: nowrap !important;
}

.text-encoder-group-btn .text-encoder-check {
    display: flex;
    align-items: center;
    min-height: 1.75rem;
    margin-bottom: 0;
}

.text-encoder-group-btn .text-encoder-check .form-check-input {
    float: none;
    margin-top: 0;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.text-encoder-group-btn .text-encoder-check .form-check-label {
    padding-left: 0;
    white-space: nowrap;
}


.btn-group{
    display: inline-table!important;
}



/* button group ends here */

/* button conunter starts here */



.counter_value{
    padding-left: 16px;
    margin-left: 16px;
    border-left: 1px solid var(--white);
}

.primary_btn_counter{
    font-size: 14px;
    font-weight: 500;
    padding: 7.5px 20px;
    line-height: 20px;
    border-radius: 6px;
    border: unset;
    background-color: var(--primary_button_color);
    color: white;
    text-align: center;
    transition: .2s;
}

.primary_btn_counter:hover{
    background-color: var(--primary_button_hover);
    transition: .2s;
}

.primary_btn_counter:focus-visible{
    background-color: var(--primary_button_hover);
    outline: 0;
    box-shadow: 0px 0px 0px 0.25rem #B2CDFF;
}

.primary_btn_counter:active{
    background-color: var(--primary_button_pressed);
}

.primary_btn_counter:disabled{
color: var(--type_disabled);
font-weight: 400;
background-color: var(--button_disabled_bg_color);
}

.primary_btn_counter:disabled .counter_button li:first-child {
    border-right: 1px solid var(--type_disabled);
    }

    .primary_btn_counter:disabled .counter_value{
        border-left: 1px solid var(--grey90);
    }

/* button counter ends here */


/* dropdown css starts here */

.label_default{
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--type_primary);
}


.dropdowngroup_default label{
    margin-right: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--type_primary);
}

.dropdowngroup_stack label{
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--type_primary);
}

select::placeholder{
    color: var(--input_box_placeholder)!important;
}

.project-baby{    
    appearance: none!important;
    --moz-appearance:none!important;
    -webkit-appearance: none!important;
    background-color: var(--input_box_bg)!important;
    border: 1px solid var(--input_box_border)!important;
    padding: 6px 32px 6px 8px!important;
    font-size: 14px!important;
    border-radius: 6px!important;
    text-align: left!important;
    color: var(--type_primary)!important;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11.2812L2.14648 5.42773L2.85547 4.71875L8 9.86328L13.1445 4.71875L13.8535 5.42773L8 11.2812Z' fill='%238A8886'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat!important;
    background-position: calc(100% - 8px) center!important;
    background-size: fit!important;  
    outline: 0!important;  
}

.project-baby-small{    
    appearance: none!important;
    --moz-appearance:none!important;
    -webkit-appearance: none!important;
    background-color: var(--input_box_bg)!important;
    border: 1px solid var(--input_box_border)!important;
    padding: 6px 32px 6px 8px!important;
    font-size: 12px!important;
    border-radius: 6px!important;
    text-align: left!important;
    color: var(--type_primary)!important;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11.2812L2.14648 5.42773L2.85547 4.71875L8 9.86328L13.1445 4.71875L13.8535 5.42773L8 11.2812Z' fill='%238A8886'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat!important;
    background-position: calc(100% - 8px) center!important;
    background-size: fit!important;  
    outline: 0!important;  
}



.project-baby:hover, .project-baby-small:hover{
    border: 1px solid var(--input_border_hover)!important;
}






.bootstrap-select .dropdown-toggle:focus{
    outline: 0 auto -webkit-focus-ring-color!important;
    outline-offset: 0!important;
}





.project-baby:disabled, .project-baby-small:disabled{
    background-color: var(--input_box_disabled_bg)!important;
    border: unset!important;
}

.bootstrap-select>.dropdown-toggle:after {
    display: none!important;
}


.dropdown-menu{
    background-color: var(--input_box_bg)!important;
    border: unset!important;
    filter: drop-shadow(0px 0px 4px rgba(5, 47, 95, 0.35));
}

.dropdown-item{
    font-size: 14px!important;
    color: var(--type_primary);
    padding: 6px 8px!important;
    margin-right: 8px!important;
    margin-left: 8px!important;
    border-radius: 3px!important;
    width: unset!important;
}

.project-baby-small + .dropdown-item{
    font-size: 12px!important;
}

.dropdown-item:hover img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(46deg) brightness(100%) contrast(103%);
}

.dropdown-item:hover{
    background-color: var(--theme_secondary)!important;
    color: white!important;
}


.dropdown-item:focus-visible{
    outline: 0!important;    
    background-color: var(--theme_secondary)!important;
    color: white!important;
}

.dropdown-item:active{
    background-color: #3c77e4!important;
}


.dropdown-item.active{
    background-color: var(--theme_secondary)!important;
    color: white!important;
}

.bootstrap-select .bs-ok-default:after {
    border-width: 0 0.16em 0.16em 0!important;
    border-radius: 2px!important;
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
    right: 20px!important;
    top: 7.5px!important;
}

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


/* selectize custom css starts here */

.selectize-input {
    width: 250px!important;
    appearance: none!important;
    --moz-appearance:none!important;
    -webkit-appearance: none!important;
    background-color: var(--input_box_bg)!important;
    border: 1px solid var(--input_box_border)!important;
    padding: 6px 32px 6px 8px!important;
    font-size: 14px!important;
    border-radius: 6px!important;
    text-align: left!important;
    color: var(--type_primary)!important;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11.2812L2.14648 5.42773L2.85547 4.71875L8 9.86328L13.1445 4.71875L13.8535 5.42773L8 11.2812Z' fill='%238A8886'/%3E%3C/svg%3E%0A")!important;
    background-repeat: no-repeat!important;
    background-position: calc(100% - 8px) center!important;
    background-size: fit!important;  
    outline: 0!important;  
    cursor: pointer!important;
}

.selectize-control.single .selectize-input:after{
    display: none!important;
}


.selectize-input:hover{
    border: 1px solid var(--input_border_hover)!important;
}

.selectize-input:focus-visible{
    border: 1px solid var(--input_border_hover)!important;
    box-shadow: 0px 0px 0.25rem rgba(5, 47, 95, 0.61)!important;
    outline: 0!important;
}


.selectize-input:focus{
    border: 1px solid var(--input_border_hover)!important;
    box-shadow: 0px 0px 0.25rem rgba(5, 47, 95, 0.61)!important;
    outline: 0!important;
}




.selectize-input:disabled{
    background-color: var(--input_box_disabled_bg)!important;
    border: unset!important;
}




.selectize-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 10;
    border: unset!important;
    background: var(--input_box_bg)!important;
    margin: 2px 0 0 0!important;
    box-sizing: border-box;
    box-shadow: 0px 0px 0.25rem rgba(5, 47, 95, 0.61)!important;
    border-radius: 6px!important;
    padding: 8px!important;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup-header{
    font-size: 14px!important;
}

.selectize-dropdown .optgroup-header{
    background-color: unset!important;
    border-bottom: 1px solid var(--divider)!important;
    margin-bottom: 4px!important;
}

.selectize-dropdown [data-selectable].option:hover{
    background-color: var(--theme_secondary)!important;
    border-radius: 2px!important;
    color: white!important;
}

div.option.selected.active{
    background-color: var(--theme_secondary)!important;
    border-radius: 2px!important;
}
div.option.selected{
    background-color: var(--theme_secondary)!important;
    border-radius: 2px!important;
}

.selectize-dropdown .active:not(.selected){
    background-color: unset!important;
    color: var(--type_primary);
}

.selectize-dropdown-content {
    overflow-y: auto;
    overflow-x: visible;
    max-height: unset!important;
}



.selectize-dropdown-content:first-child()


/* dropdwon css ends here */




/* simplebar css starts here */
.simplebar-content-wrapper {
    scrollbar-width: auto;
    -ms-overflow-style: auto;
  }

  .simplebar-content-wrapper::-webkit-scrollbar,
  .simplebar-hide-scrollbar::-webkit-scrollbar {
    display: initial;
    width: initial;
    height: initial;
  }
/* simplebar css ends here */

/* toggle switch */

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    vertical-align: middle;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:var(--toggle_disabled);
    -webkit-transition: .2s;
    transition: .2s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left:4px;
    bottom: 4px;
    background-color: white;
    /* background-image: url(../media/svg/aol_mail_icon.svg); */
    -webkit-transition: .2s;
    transition: .2s;
  }
  
  input:checked + .slider {
    background-color: var(--toggle_green);
  }
  
   
  
  input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
  }

  input:checked + .slider:hover {
    box-shadow: 0px 0px 0px 3px rgba(10, 126, 34, 0.15);
  }

  input:not(:checked) + .slider:hover {
    box-shadow: 0px 0px 0px 3px rgba(75, 75, 75, 0.15);
  }

  

  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .cumulative{
    font-size: 14px;
    line-height: normal;
    color: var(--type_primary);
    cursor: pointer;
    width: max-content;
  }


  .drop{
    padding: 200px!important;
  }
/* toggle switch ends here */

/* horizontal tab bar starts here */

.tab_bar_default{
    font-size: 14px;
    line-height: 20px;
    padding: 12px 16px;
    border: unset;
    background-color: var(--tab_bar_bg_color);
    color: var(--type_secondary)!important;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.tab_bar_default:hover{
    background-color: var(--tab_bar_hover);
}

.tab_bar_default:focus-visible{
    box-shadow: 0px 0px 0.25rem rgba(5, 47, 95, 0.35);
    outline: 0;
}

.tab_bar_default:active{
    background-color: var(--grey10);
}

.nav-tabs button:not(:last-child){
    margin-right: 2px;
}

.nav-tabs>.active {
    background-color: white;
    font-weight: 600;
    color: var(--theme_primary)!important;
    border-top: 2px solid var(--theme_primary);
}

.nav-tabs>.active:hover {
    background-color: var(--grey10);
}

.nav-tabs>.active:active {
    background-color: var(--grey20);
}

.nav-tabs{
    border-bottom: unset!important;
}


.tab_bar_default2{
    font-size: 14px;
    line-height: 20px;
    padding: 8px 16px;
    border: unset;
    background-color: var(--tab_bar_bg_color);
    color: var(--type_secondary)!important;
    white-space: nowrap;
}

.tab_bar_default2:hover{
    background-color: var(--tab_bar_hover);
}

.nav-tabs2>.active{
    background-color: white;
    font-weight: 600;
    color: var(--theme_primary)!important;
    border: unset;
    background-image: url("data:image/svg+xml,%3Csvg width='23' height='2' viewBox='0 0 23 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2C0 0.895431 0.895431 0 2 0H21C22.1046 0 23 0.895431 23 2H0Z' fill='%23052F5F'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: bottom;
}

.tab_bar_default2:focus-visible{
    box-shadow: 0px 0px 0.25rem rgba(5, 47, 95, 0.35);
    outline: 0;
}

@media (max-width:576px) {
    .nav-tabs{
        flex-wrap: nowrap!important;
        overflow: scroll!important;
    }
    
}


/* tab bar type 3 starts here */

.top-nav-bar{
    background-color: var(--top-navbar-bg);
    padding: 6px;
    border-radius: 4px;
}

.tab_bar_default3{
    font-size: 14px;
    padding: 10px 16px;
    border: unset;
    margin-right: 6px;
    background-color: unset;
    border-radius: 2px;
    color: var(--type_primary);
    text-decoration: none;
}

.tab_bar_default3:hover{
    background-color: var(--grey20);
}

.tab_bar_default3:active{
    background-color: var(--grey30) !important;
}

.tab_bar_default3.active{
    background-color: white!important;
    box-shadow: 0px 0px 1px 0px rgba(175, 124, 124, 0.25)!important;
    color: var(--theme_primary)!important;
    font-weight: 500!important;
    text-decoration: none;
}

.tab_bar_default3:focus-visible{
    background-color: var(--grey30);
    border: 1.5px solid var(--theme_primary);
    outline: 0; 
}

.nav-tabs3{
    overflow: auto;
    max-width: 1200px;
}


.nav-tabs3 button.active{
    background-color: white!important;
    box-shadow: 0px 0px 1px 0px rgba(175, 124, 124, 0.25)!important;
    color: var(--theme_primary)!important;
    font-weight: 500!important;
}

@media (max-width:1400px) {
    .nav-tabs3{
        /* overflow-x: scroll!important; */
        white-space: nowrap!important;
        flex-wrap: nowrap!important;
    }

  
    
}



/* tab bar type 3 ends here */
/* horizontal tab bar ends here */


/* breadcrumb css starts here */

.breadcrumb{
    margin-bottom: unset!important;
}
.breadcrumb-item{
    vertical-align: middle;
    font-size: 14px;
}

.breadcrumb-item a{
    font-size: 14px;
    color:var(--theme_primary);
    text-decoration: unset;
    vertical-align: middle;
    font-weight: 500;
}

.breadcrumb-item a:hover{
    font-size: 14px;
    font-weight: 500;
    color:var(--theme_primary);
    vertical-align: middle;
    text-decoration: underline;
}

.breadcrumb-item a:focus-visible{
    color:var(--theme_primary);
    outline: 0;
    background-color: var(--grey10);
}


.breadcrumb-item a:active{
    color:var(--theme_primary);
    text-decoration: unset;
}

.breadcrumb>.active a{
    font-weight: 500;
    color: var(--type_secondary)!important;
    cursor: text;
}

.breadcrumb>.active a:hover{
    text-decoration: unset;    
}


.breadcrumb>.active a:active{
    text-decoration: unset;    
}


/* breadcrumb css ends here */


/* download progess css starts here */

.download_label_title{
    font-size: 14px;
    color: var(--type_primary);
}

.download_progress{
    align-items: center;
}

.progress{
    height: 20px!important;
    border-radius: 50px!important;
    background-color: var(--grey40)!important;
}

.progress-bar{
    background-color: var(--theme_secondary);
}

.completed{
    background-color: var(--success)!important;
}

.failed{
   background-color: var(--error)!important;
}

.action_icons{
    padding-left: 8px;
}

.download_completed_icon{
    cursor: pointer;
}

.failed_label{
    color: var(--error);
}


.suppresioncancel{
    cursor: pointer;
}

.suppresioncancel{
    cursor: pointer;
}

.suppresioncancel:hover{
    filter: brightness(0) saturate(100%) invert(11%) sepia(78%) saturate(4310%) hue-rotate(354deg) brightness(95%) contrast(115%);    
}

.suppresioncancel:active{
    filter: brightness(0) saturate(100%) invert(9%) sepia(88%) saturate(3942%) hue-rotate(360deg) brightness(110%) contrast(116%);
    box-shadow: 0px 0px 0px 3px rgba(168, 0, 0, 0.15);
    border-radius: 50%;
}



/* download progress css ends here */


/* sidebar navigation */


.sidebar{
    z-index: 2;
    top: 60px;
}

.navbar-menu{
    width: 240px;
    height: 100vh;
    background-color: var(--theme_primary);    
}

.navbar-menu-toggle{
    width: 81px;
}

.nav-link-toggle{
    padding: 8px;
}

.maincontent-toggle{
    margin-left: 81px;
}



.nav-item{
    background-color: var(--theme_primary);
}

.nav-item .nav-link{
    font-size: 14px;
    padding: 10px 8px;
    margin: 1px 20px;
    border-radius: 4px;
    position: relative;
}

.nav-item .nav-link.active{
    background-color: var(--theme_secondary);
}

.nav-item .nav-link.active span{
    font-weight: 500;
    color: white!important;
    vertical-align: text-top;   
}

.nav-item .nav-link span{
    color: var(--navigation_item_inactive)!important;
    vertical-align: text-top;
    padding-left: 8px;
}


.nav-item .nav-link.active img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(92%) saturate(31%) hue-rotate(127deg) brightness(106%) contrast(108%);
    }

.sidebar-caret{
    float: right;
}




.nav-link:hover{
    background-color: var(--theme_secondary);
    font-weight: 500;
}



.nav-link:hover span{
    color: white!important;
}

.nav-link:hover img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(92%) saturate(31%) hue-rotate(127deg) brightness(106%) contrast(108%);
}

.nav-link:focus{
    background-color: var(--theme_secondary);
    font-weight: 500;
    outline: 0;
}

.nav-link:focus span{
    color: white!important;
}

.nav-link:focus img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(92%) saturate(31%) hue-rotate(127deg) brightness(106%) contrast(108%);
}

.nav-link:active{
    background-color: var(--theme_secondary_lighter);
}

.nav-item .nav-link.active:active{
    background-color: var(--theme_secondary_lighter);
}

.nav-item .nav-link.active .stroke_active{
    display: block!important;
}




.nav-item-divider{
    background-color: var(--theme_primary)!important;
}


.nav-item-divider hr{
    margin: 8px 20px !important;
    color: #C8C6C4;
}


.collapse:not(.show) .nav-item .nav-link.active .sidebar-caret {
    rotate: -190deg!important;
}






.sub-nav-item-list{
    margin: 8px 0 8px 30px;
}

.sub-nav-link{
    color: var(--grey90);
    text-decoration: none;
    font-size: 14px;

}

.sub-nav-link:hover{
    color: var(--white);
    font-weight: 500;
}

.sub-nav-link:hover svg{
    fill: white!important;
}

.sub-nav-link:hover rect{
    stroke: white!important;
}


.sub-nav-link:focus{
    color: var(--white);
    font-weight: 500;
    outline: 0;
}

.sub-nav-link:focus svg{
    fill: white!important;
}

.sub-nav-link:focus rect{
    stroke: white!important;
}


.sub-nav-link:active{
    color: var(--white);
    font-weight: 500;
    outline: 0;
}




.sub-nav-link span{
    vertical-align: text-top;
}

.sub-nav-item-list .sub-nav-link.active{
    color: var(--grey90);
    text-decoration: none;
    background-color: unset;
    color: white;
    font-weight: bold;
}

.sub-nav-link.active svg{
    fill: white!important;
}

.sub-nav-link.active rect{
    stroke: white!important;
}



/* sidebar navigation ends here */


/* sidebar css starts here */

.sidenavigation{
    max-width: 240px;
}

.navigation_link{
    text-decoration: none;
    transition: 0.2s;
}

.nav_icons{
    padding: 0 8px 0 0;
}

.nav_items{
    color: var(--navigation_item_inactive);
    font-size: 14px;
}

.mmm{
    background-color: var(--theme_primary);
    margin: 0 20px;
    padding: 8px 10px;
    justify-content: space-between;
}

.kkk{
    align-items: center;
}

.side_nav_item{
    background-color: var(--theme_primary);
}

.navigation_link:hover .mmm{
    background-color: var(--theme_secondary);
    transition: 0.2s;
    border-radius: 2px;
}

.navigation_link:hover .nav_items{
    font-weight: 500;
    transition: 0.2s;
    color: white;
}


.navigation_link{
    background-image: url("data:image/svg+xml,%3Csvg width='3' height='36' viewBox='0 0 3 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 35.9503C0.161555 35.983 0.328767 36.0001 0.5 36.0001C1.88071 36.0001 3 34.8843 3 33.5079V2.49226C3 1.11582 1.88071 0 0.5 0C0.328767 0 0.161555 0.0171618 0 0.0498542V35.9503Z' fill='white'/%3E%3C/svg%3E%0A");
    
}

/* sidebar css ends here */


/* tooltip starts here */

.custom-tooltip {
    --bs-tooltip-bg: var(--grey150)!important;
    --bs-tooltip-color:var(--white)!important;
    --bs-tooltip-opacity:1!important;
  }

  .action-tooltip {
    --bs-tooltip-bg: var(--grey150)!important;
    --bs-tooltip-color:var(--white)!important;
    --bs-tooltip-opacity:1!important;
    --bs-tooltip-font-size:10px!important;     
  }

  
  .subnet-expiry-tooltip {
    --bs-tooltip-bg: var(--grey150)!important;
    --bs-tooltip-color:var(--white)!important;
    --bs-tooltip-opacity:1!important;
    --bs-tooltip-font-size:10px!important;    
  }

  .lines-tooltip{
     --bs-tooltip-bg: var(--type_primary)!important;
    --bs-tooltip-color:var(--white)!important;
    --bs-tooltip-opacity:1!important;
    --bs-tooltip-font-size:10px!important;    
  }

  body .custom-tooltip {
    margin-top: 6px!important;
  }

  body .action-tooltip{
    margin-top: 12px!important;
  }

/* tooltip ends here */

/* pagination starts here */

.rot{
    rotate: 180deg;
}

.pagination li:not(:last-child){
    margin-right: 2px;
    align-self: baseline;
}

.table-item-link-ellipsis{
    cursor: auto;    
}

.table-item-link-ellipsis:hover{
    background-color: unset!important;
    color: unset!important;
}

.table-item-link-ellipsis:focus-visible{
    background-color: unset!important;
    color: unset!important;
}

.table-item-link{
    color: var(--type_secondary);
    font-size: 12px;
    line-height: 20px;
    text-decoration: unset;
    background-color: unset;
    padding: 2px 8.65px;    
}

.table-item .table-item-link{
    position: relative;
    display: block;
}

.table-item-link:hover{
    color: white;
    background-color: var(--table_header_bg);
    border-radius: 3px;
}


.table-item-link:focus-visible{
    color: white;
    background-color: var(--table_header_bg);
    border-radius: 3px;
    outline: 0;
}

.table-item-link:active{
    color: white;
    background-color: var(--table_header_hover);
    border-radius: 3px;
}




.table-item-link-active{
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: unset;
    background-color: var(--theme_primary);
    border-radius: 3px;
}

.table-item-link-active:focus-visible{
    background-color: var(--table_header_hover);
}




.pgn_icon:hover{
    background-color: var(--grey30);  
    border-radius: 3px;  
}

.pgn_icon:focus-visible{
    background-color: var(--grey20)!important; 
    outline: 0;
    border-radius: 3px;
}




.pgn_icon:active{
    background-color: var(--grey40);    
}


.pgn_icon{
    border: unset;
    background-color: unset;
}

.pgn_icon:disabled{
    filter: brightness(0) saturate(100%) invert(70%) sepia(5%) saturate(136%) hue-rotate(349deg) brightness(90%) contrast(90%);
    opacity: 0.5;
}

.pgn_icon:disabled:hover{
    background-color: unset;
}

@media (max-width:768px) {
    .pagination{
        justify-content: center;
        margin-top: 12px;
    }
}

/* pagination entries starts here */

.pagination_entries{
    color: var(--type_primary);
    font-size: 12px;
    line-height: 20px;
    display: inline-table;
    align-items: center;
}

.project-baby-small-option{
    font-size: 12px!important;
}



/* pmta pagination starts here */

.pmta{
    padding: 5px 8px;
    background-color: #D9D9D9;
    max-width: max-content;
    border-radius: 18px;
  
}

.pmta_pgn:hover{
    z-index: 2;
}

.pmta_pgn_icon:hover{
    background-color: var(--grey60);  
    border-radius: 50%;  
}

.pmta_pgn_icon:focus-visible{
    background-color: var(--grey60)!important; 
    outline: 0;
    border-radius: 50%;
}




.pmta_pgn_icon:active{
    background-color: var(--grey90);    
}


.pmta_pgn_icon{
    border: unset;
    background-color: unset;
}

.pmta_pgn_icon:disabled{
    filter: brightness(0) saturate(100%) invert(70%) sepia(5%) saturate(136%) hue-rotate(349deg) brightness(90%) contrast(90%);
    opacity: 0.5;
}

.pmta_pgn_icon:disabled:hover{
    background-color: unset;
}




.pmta_pagination li:not(:last-child){
    margin-right: 4px;
}



.pmta-item-link-ellipsis{
    cursor: auto;    
}

.pmta-item-link-ellipsis:hover{
    background-color: unset!important;
    color: unset!important;
}

.pmta-item-link-ellipsis:focus-visible{
    background-color: unset!important;
    color: unset!important;
}

.pmta-item-link{
    color: var(--type_secondary);
    font-size: 14px;
    line-height: 20px;
    text-decoration: unset;
    background-color: unset;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);    
}

.pmta-item .pmta-item-link{
    position: relative;
    display: block;
}

.pmta-item-link:hover{
    color: white;
    background-color: var(--table_header_hover);
    border-radius: 50%;
    z-index: 1;
}

.pmta-item-link:active{
    color: white;
    background-color: var(--table_header_bg);
    border-radius: 50%;
}

.pmta-item-link:focus-visible{
    color: white;
    background-color: var(--table_header_bg);
    border-radius: 50%;
    outline: 0;
}

.pmta-item-link-active{
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: unset;
    background-color: var(--theme_primary);
    border-radius: 50%;  
    box-shadow: 0px 0px 0px 15px #D9D9D9!important; 
}


.pmta-item-link-active:focus-visible{
    background-color: var(--table_header_hover);
}






/* pagination ends here */

/* pmta starts here */
.pmta-card{
    background-color: var(--white);
    border: 1px dashed #D2D0CE;
    border-radius: 2px;
    position: relative;
    height: 400px;
}

.pmta-bottom-desc{
    background: linear-gradient(180deg, rgba(94, 94, 94, 0.5) 10.71%, rgba(56, 56, 56, 0.8) 182.14%);
    width: 100%;
    padding: 16px;
    color: white;
    font-weight: 600;
}


/* pmta ends here */



/* modal window starts here */







/* modal window ends here */


/* check status stepper starts here */

.lne{
    display: flex;
    flex-direction: column;
    align-items: center;
}




.loader_anim{
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}


/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


.progress_stepper_line_default{
    width: 2px;
    height: 50px;
    display: inline-block;
    background-color: var(--grey50)!important;
}

/* 
 update  */

 .check_status_stepper h6{
    padding-top: 9px;
    padding-left: 16px;
 }

 .check_status_stepper .status_notstarted{
    color: var(--type_disabled);
    font-weight: unset;
 }

 .check_status_stepper .status_started{
    color: var(--type_secondary);
    font-weight: 600;
 }

 .check_status_stepper .status_completed{
    color: var(--theme_primary);
    font-weight: 600;
 }

.check_status_stepper .status_error{
    color: var(--error);
    font-weight: 600;
}

.check_status_stepper .error_details{
    color: var(--type_secondary);
    font-size: 14px;
    padding-left: 16px;
    margin-top: 2px;
    margin-bottom: unset!important;    
}
 
.default img[alt="loader_default"], .default .status_notstarted{
    display: block;
}

.default img[alt="loader_progress"], .default img[alt="loader_error"], .default img[alt="loader_success"], .default .status_started, .default .status_completed, .default .status_error, .default .error_details{
    display: none;
}

.progress_state img[alt="loader_progress"]{
    display: block;
    background-color: #052F5F;
    border-radius: 50px;
}

.progress_state .status_started{
    color:var(--type_secondary);
    font-weight: 600;
    display: block;
}

.progress_state img[alt="loader_default"], .progress_state img[alt="loader_error"], .progress_state img[alt="loader_success"], .progress_state .status_notstarted, .progress_state .status_completed, .progress_state .status_error, .progress_state .error_details{
    display: none;
}


.progress_completed img[alt="loader_success"], .progress_completed .status_completed{
    display: block;
}

.progress_completed img[alt="loader_default"], .progress_completed img[alt="loader_error"], .progress_completed img[alt="loader_progress"], .progress_completed .status_notstarted, .progress_completed .status_started, .progress_completed .status_error, .progress_completed .error_details{
    display: none;
}


.progress_error img[alt="loader_error"], .progress_error .status_error, .progress_error .error_details{
    display: block;
}

.progress_error img[alt="loader_default"], .progress_error img[alt="loader_success"], .progress_error img[alt="loader_progress"], .progress_error .status_notstarted, .progress_error .status_started, .progress_error .status_completed{
    display: none;
}

.progress_completed .progress_stepper_line_default{
    background-color: var(--theme_primary)!important;
}

.progress_error .progress_stepper_line_default{
    background-color: var(--grey50)!important;
}

/* check status ends here */


/* campaign stepper progress starts here */

.steppers{
    width: max-content;
}

/* .campaign_stepper{
    float: right;
    clear: both;
} */

.campaign_stepper a{
    padding-right: 16px;
    padding-left: 16px;
}

.campaign_stepper a:hover {
    background-color: var(--grey20);
    border-radius: 4px;
    }

.campaign_stepper a:focus-visible {
    background-color: var(--grey20);
    outline: 0;
}

.campaign_stepper a:active {
    background-color: var(--grey30);
    
}


.campaign_progress{
    display: flex;
    width: max-content;
}

.campaign_focus{
    text-decoration: none;
    display: flex;
    justify-content: flex-end;
}

.campaign_progress_default_title{
    display: block;
    padding-top: 10px;
}

.campaign_count_line{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.campaign_progress_default_title h6{
    margin-bottom: unset;
    line-height: 20px;
    color: var(--type_disabled);
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    padding-right: 12px;
    
}

.current h6, .progressdone h6{
    color: var(--theme_primary);
    font-weight: 600;
}

.progressfailed h6{
    color: var(--error);
    font-weight: 600;
}




.campaign_stepper_inside_default{
    height: 40px;
    width: 40px;
    background-color: var(--grey10);
    border-radius: 50%;
    border: 2px solid var(--grey60);
    display: inline-block;
    position: relative;
}

.current .campaign_stepper_inside_default{
    border: 2px solid var(--theme_primary);
}

.campaign_stepper_inside_success{
    border: unset;
    background-color: unset;
}

.supp_success{
    margin-bottom: unset;
    font-size: 12px;
    color: var(--success);
}

.supp_failed{
    margin-bottom: unset;
    font-size: 12px;
    color: var(--error);
}

.campaign_count_default{
    color: var(--grey50);
    font-size: 20px;
    font-weight: 500;
    margin-bottom: unset;
}

.current .campaign_count_default{
    color: var(--theme_primary);
    font-weight: 600;
}

.campaign_line_default{
    width: 2px;
    height: 50px;
    background-color: var(--grey50);
    position: relative;
    right: -170px;
}


.progresscompleted, .progresscaution{
    display: none;
}

.progressfailed .progresscompleted{
    display: none!important;
}

.progressfailed .campaign_line_default{
    background-color: var(--grey50)!important;
}

.current .progresscompleted{
    display: none;
}

.progressdone .progresscompleted{
    display: block;
}

.progressfailed .progresscaution{
    display: block;
}

.progressdone .campaign_line_default{
    background-color: var(--theme_primary);
}

.campaign_focus:hover .campaign_progress_default_title h6, .campaign_focus:hover .campaign_count_default {
    color: var(--table_header_hover);
}

.progressfailed:hover .campaign_progress_default_title h6 {
    color: var(--error)!important;
}


.campaign_focus:hover .campaign_stepper_inside_default{
    border: 2px solid var(--table_header_hover);
}

.campaign_focus:hover .campaign_stepper_inside_success{
    background-color: unset;
    border: unset;
}

.progressdone .campaign_stepper_inside_default, .progressfailed .campaign_stepper_inside_default{
    display: none;
}

.progressfailed .supp_failed, .progressdone .supp_success{
    display: block!important;
}


@media (max-width: 576px) { 
    .campaign_progress_default_title{
        display: none;
    }

    .campaign_count_line{
        flex-direction: row;
    }

    .campaign_line_default{
        rotate: 90deg;
        position: relative;
        left: 72px;
        top: -57px;
        height: 35px;
    }

    .steppers{
        display: flex;
    }

 }



/* campaign stepper progress ends here */


/* campaign detail action css starts here */

.campaign_square{
    font-size: 20px;
    font-weight: 500;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    margin: auto;
    margin-top: 4px;
}

.campaign_square:hover{
    box-shadow: 0px 0px 12px rgba(105, 105, 105, 0.25);
}

.campaign_square:focus{
    box-shadow: 0px 0px 12px rgba(105, 105, 105, 0.25);
    outline: 0;
}

.campaign_square:active{
    box-shadow:none;
    outline: 0;
}




.campaign_alotted{
    background-color: var(--campaign_alotted_bg);
    color: var(--campaign_alotted_text);
}



.campaign_running{
    background-color: var(--campaign_running_bg);
    color: var(--campaign_running_text);
}

.campaign_completed{
    background-color: var(--campaign_completed_bg);
    color: var(--campaign_completed_text);
}

.campaign_remaining{
    background-color: var(--campaign_remaining_bg);
    color: var(--campaign_remaining_text);
}

.campaign_detail_title{
    font-size: 14px;
    font-weight: 600;
    color: var(--type_primary);
    line-height: 20px;
}


/* campaign detail action css ends here */


/* fetch from api starts here */
.fetch_from_api{
    font-size: 12px;
    color: var(--link_color);
    text-decoration: none;
}

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

.fetch_from_api:active{
    color: var(--link_color_active_alternate);
    text-decoration: none;
}

.fetch_from_api:focus-visible{
    background-color: lightblue;
    outline: 0;
}


/* fetch from api ends here */


/* navigation bar css starts here */

.sidebar-float-menu{
    z-index: 10;
    border: unset;
    background-color: unset;
    bottom: 10%;
}


.logo button{
    background-color: unset;
    border: unset;
    margin-right: 12px;
    border-radius: 2px;
    outline: 0;
}



.logo button:hover, .logo button:focus-visible{
    background-color: var(--theme_secondary);
}

.logo button:active{
    background-color: var(--theme_secondary_lighter);
}


.navigation{
    background-color: var(--theme_primary);
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
}


.myprofile{
    text-decoration: none;
    display: flex;
    text-align: right;
    padding: 4px;
}

.myprofile:hover{
    background-color: unset!important;
}


.myprofile:focus{
    background-color: white!important;
    border-radius: unset;
}


.initial{
    margin-left: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    background-color: var(--theme_secondary);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    overflow: hidden;
    flex-shrink: 0;
}

.initial img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.details{
    text-decoration: none;
    color: white;
    font-size: 14px;    
    line-height: initial;
    display: flex;
    flex-direction: column;
}

.details span{
    font-size: 10px;
}

.navigation_items button{
    background-color: unset;
    outline: 0;
    border: unset;
    z-index: 2;
}

.technology_stripes{
    top: -10px;
    right: -70px;
    mix-blend-mode: color-dodge;
    opacity: 0.25;
    z-index: 1;
    overflow: hidden;
}

.navigation_items button:not(:last-child){
    margin-inline-end: 4px;
}

.navigation_items button:not(:last-child):hover{
    background-color: var(--theme_secondary);
    border-radius: 50%;
}



.navigation_items button:not(:last-child):focus-visible{
    background-color: var(--theme_secondary);
    border-radius: 50%;
}

.navigation_items button:last-child:focus-visible{
    background-color: var(--nav_search_hoverandfocus);
}


.navigation_items button:not(:last-child):active{
    background-color: var(--theme_secondary_lighter);
    border-radius: 50%;
}

.navigation_items button:last-child:active{
    background-color: var(--theme_primary);
}

.navigation_items button:last-child:hover{
    background-color: var(--nav_search_hoverandfocus);
    border-radius: unset!important;
}



.myprofile:hover{
    border-radius: 4px!important;
}

.myprofile:focus{
    background-color: rgba(255, 255, 255, 0.11)!important;
}

.myprofile:focus-visible{
    border-radius: 4px!important;
}




@media (max-width: 992px) {

.details, .logo h6{
    display: none;
}

.technology_stripes{
    right: -90px;
}


}



@media (max-width: 768px) {

    .mob-searchbar{
        background-color: var(--theme_primary);
        padding: 10px 0;        
        width: 100%; 
    }

    .searchbar_type2 {
        width: max-content;
        margin: auto!important;
    }

    
.technology_stripes{
    right: -140px;
}
}

@media (max-width: 576px) {
    .navigation_items img{
        width: 32px;
    }

    .navigation_items button:not(:last-child), .initial {
        margin-inline-end: unset;
    }

    .technology_stripes{
        right: -190px;
    }

}




/* navigation bar css ends here */


/* jquery form validation css starts here */

.error{
    color:rgb(212, 0, 0)!important;
}

.error::before{
    content: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="21" height="21" fill="white"/><path d="M10.4993 13.4166C10.6355 13.4166 10.7497 13.3704 10.8421 13.2781C10.9344 13.1857 10.9806 13.0715 10.9806 12.9354C10.9806 12.7993 10.9344 12.685 10.8421 12.5927C10.7497 12.5003 10.6355 12.4541 10.4993 12.4541C10.3632 12.4541 10.249 12.5003 10.1566 12.5927C10.0643 12.685 10.0181 12.7993 10.0181 12.9354C10.0181 13.0715 10.0643 13.1857 10.1566 13.2781C10.249 13.3704 10.3632 13.4166 10.4993 13.4166ZM10.1056 11.1854H10.9806V7.49579H10.1056V11.1854ZM10.4993 16.3333C9.70213 16.3333 8.94865 16.1802 8.23893 15.8739C7.52921 15.5677 6.90942 15.1496 6.37956 14.6198C5.8497 14.0899 5.43164 13.4701 5.12539 12.7604C4.81914 12.0507 4.66602 11.2923 4.66602 10.4854C4.66602 9.68815 4.81914 8.93468 5.12539 8.22496C5.43164 7.51524 5.8497 6.89788 6.37956 6.37288C6.90942 5.84788 7.52921 5.43225 8.23893 5.126C8.94865 4.81975 9.70699 4.66663 10.5139 4.66663C11.3112 4.66663 12.0646 4.81975 12.7743 5.126C13.4841 5.43225 14.1014 5.84788 14.6264 6.37288C15.1514 6.89788 15.5671 7.51524 15.8733 8.22496C16.1796 8.93468 16.3327 9.69302 16.3327 10.5C16.3327 11.2972 16.1796 12.0507 15.8733 12.7604C15.5671 13.4701 15.1514 14.0899 14.6264 14.6198C14.1014 15.1496 13.4841 15.5677 12.7743 15.8739C12.0646 16.1802 11.3063 16.3333 10.4993 16.3333ZM10.5139 15.4583C11.8848 15.4583 13.0514 14.9746 14.0139 14.0073C14.9764 13.0399 15.4577 11.8659 15.4577 10.4854C15.4577 9.11454 14.9764 7.94788 14.0139 6.98538C13.0514 6.02288 11.8799 5.54163 10.4993 5.54163C9.12852 5.54163 7.95942 6.02288 6.99206 6.98538C6.0247 7.94788 5.54102 9.1194 5.54102 10.5C5.54102 11.8708 6.0247 13.0399 6.99206 14.0073C7.95942 14.9746 9.13338 15.4583 10.5139 15.4583Z" fill="%23A80000"/></svg>'); 
    position: relative;
    top: 6px;
}
/* jquery form validation css ends here */


/* magnify popup css starts here */

.image-link img{
    border-radius: 6px;
}

.image-link img:hover{
    cursor:zoom-in;
    filter:contrast(140%);
}


/* magnify popup css ends here */


/* tab bar body starts here */

.tab_bar_card{
    background-color: var(--white);
    box-shadow: 0px 0px 3px rgba(9, 30, 66, 0.31);
}

.tab_bar_content{
    background-color: white;
    padding: 16px;
    
}

.tab_bar_title{
    padding: 16px;
    border-bottom: 1px solid var(--divider);
    
}

.tab_bar_table{
    padding: 16px;
}


/* tab bar css ends here */


/* chart component starts here */

.chart_component h6{
    font-size: 14px;
    font-weight: 600;
    color: var(--type_primary);
}

.chart_component_lg h6{
    font-size: calc(1rem + 0.21vw)!important;
    margin-bottom: 12px;
}

.trend, .average {
    font-size: 13px;
    display: flex;
    float: right;
    clear: both;
}

.average{
    color: var(--grey90);
}

.uptrend{
    color: var(--revenue_type);
}
.uptrend::before{
    content: url('../media/svg/livechart_uptrend.svg');
    position: relative;
}

.downtrend{
    color: var(--error);
}
.downtrend::before{
    content: url('../media/svg/livechart_downtrend.svg');
    position: relative;
}


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

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

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


/* chart component ends here */


/* grid-icon component starts here */
.grid-icon{
    cursor: pointer;
    padding: unset!important;
    background-color: unset!important;
    border: unset!important;
}

.grid-icon:hover img{
    filter: brightness(0) saturate(100%) invert(14%) sepia(14%) saturate(7098%) hue-rotate(193deg) brightness(102%) contrast(102%);
    opacity: 0.9;
}

.grid-icon:active img{
    opacity: 1;
}


.grid-radio:checked +.btn{
    background-color: var(--grid-icon-bg)!important;
    
}

.grid-radio:checked + .grid-icon .grid-icon-img {
    filter: brightness(0) saturate(100%) invert(14%) sepia(14%) saturate(7098%) hue-rotate(193deg) brightness(102%) contrast(102%)!important;
}



/* grid-icon component ends here */


/* yesterday widget bottom starts here */

.yesterday-widget-bottom p{
    color: var(--type_secondary);
    margin-bottom: unset;
    text-align: center;
}

.yesterday-widget-bottom h6{
    color: var(--type_primary);
    text-align: center;
}


.yesterday-widget{
    border-top: 1px solid var(--divider);
    margin-top: 4px;
}

/* yesterday widget bottom ends here */

/* team stats widget starts here */


.team-stats-widget-bottom h6{
    color: var(--type_primary);
    font-weight: 600;
}

.team-stats-widget-bottom span{
    color: var(--type_primary);
    font-size: 14px;
}

.team-stats-widget-bottom p{
    color: var(--type_secondary);
    font-size: 14px;
    margin-bottom: unset;
}


.team-stats-widget{
    border-top: 1px solid var(--divider);
    margin-top: 4px;
}


/* team stats widget ends here */

/* Notification Component Starts here */

.notification-main.dropdown-menu{
    --bs-dropdown-min-width:350px!important;
}


.notification-modal{
    width: 350px;
    background-color: var(--white);
    box-shadow: 0px 0px 16.4px rgba(16, 16, 16, 0.35);
    border-radius: 10px;
    
}

.notification-body{
    margin-bottom: unset;
    overflow: auto;
    max-height: 400px;
}

.notification-header{
    border-bottom: 1px solid var(--grey40);
}



.notification-variant{
    display: flex;
    align-items: self-start;
    font-size: 14px;
    padding: 16px;
    border-bottom: 1px solid var(--notification-stroke-color);
    border-left: 0;
    border-right: 0;
    position: relative;
}

.notification-variant.new {
    position: relative;
  }

  .notification-variant.new::after {
    content: "";
    position: absolute;
    top: 12px; /* Adjust the top and right values as needed */
    left: 12px;
    width: 6px; /* Adjust the size of the dot as needed */
    height: 6px;
    background-color: var(--new-notification-text-color); /* Adjust the color of the dot as needed */
    border-radius: 50%;
  }

  .bell-icon.new{
    position:relative;
  }

  .bell-icon.new::after {
    content: "";
    position: absolute;
    top: 12px; /* Adjust the top and right values as needed */
    right: 11px;
    width: 6px; /* Adjust the size of the dot as needed */
    height: 6px;
    background-color: var(--new-notification-text-color); /* Adjust the color of the dot as needed */
    border-radius: 50%;
  }



.notification-variant:last-child{
    border-bottom: unset;
}

.notification-variant img{
    margin-right: 16px;
    max-width: 42px;
}

.notification-variant p{
    margin-bottom: 8px;
    color: var(--type_primary);
}

.notification-variant span{
    color: var(--type_secondary);
    font-size: 12px;
}

.variant-1{
background-color: var(--notification-variant-bg-1);
}

.variant-2{
background-color: var(--notification-variant-bg-2);
}

.variant-3{
background-color: var(--notification-variant-bg-3);    
}

.variant-4{
background-color: var(--notification-variant-bg-4);
}

.notification-header{
    padding: 16px;
}

.notification-header h6{
    color: var(--type_primary);
}

.notification-footer{
    padding: 12px;
    border-top: 1px solid var(--grey40);
}


.all-notifications .notification-variant{
    border: 1px solid var(--notification-stroke-color)!important;
    margin: 12px 0;
    border-radius: 10px;
}

.all-notifications h6{
    color: var(--type_primary);
}

.all-notifications{
    max-width: 800px;
    margin: auto;
}


.view-all-button{
    background-color: var(--grey20)!important;
    border: unset;
    padding: 10px;
    width: 100%;
    text-align: center;
    border-radius: 6px;
    font-weight: 500;
    color: var(--type_secondary)!important;
    transition: 0.2s;
}

.view-all-button:hover{
    background-color: var(--grey40)!important;
}


.view-all-button:focus{
    background-color: var(--grey40)!important;
    box-shadow: 0px 0px 0px 3px rgba(194, 194, 194, 0.25)!important;
}

.view-all-button:active{
    background-color: var(--grey60)!important;
    transition: 0.2s;
}




@media (max-width:600px) {

    .notification-main.dropdown-menu{
        --bs-dropdown-min-width:90vw!important;
    }
    
    .notification-modal{
        width: 100%;
        margin: auto;        
    }
    
    .notification-main.dropdown-menu.dropdown-menu-lg.dropdown-menu-end.p-0.show{
        transform: translate3d(0, 45px, 0px)!important;
    }

    
      .bell-icon.new::after {
        top: 10px; /* Adjust the top and right values as needed */
        right: 8px;       
      }

}

/* Notification Component ends here */


/* date selection component starts here */
.date-selection{
    border: unset;
    background-color: unset;
    margin: 0 8px;
}

.date-selection:hover{
    transform: scale(108%);
    filter: brightness(0) saturate(100%) invert(33%) sepia(8%) saturate(142%) hue-rotate(349deg) brightness(103%) contrast(87%);
}

.date-selection:active{
    transform: scale(100%);
}

/* date selection component ends here */


/* insightify-login section starts here */

#insightify-login{
    height: 100vh;
}

#insightify-login h5{
    color: var(--type_secondary);
    font-weight: 400;
    padding: 24px 0;
}


#insightify-login > div:nth-child(2){
    background-color: var(--login-bg);
}

#insightify-login > div:nth-child(2) .card{
    padding: 50px;
    width: 500px;
    border-radius: 10px!important;
}

#insightify-login > div:nth-child(2) .card h4{
    font-weight: 600;
    color: var(--theme_primary);
    text-align: center;
    padding-bottom: 20px;
}

.login-footer{
    color: var(--type_secondary);
    font-size: 12px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
}

.login-input label{
    color: var(--type_secondary);
    font-weight: 500;
}

.login-input input{
    background-color: white!important;
    padding: 12px!important;
    font-size: 16px;
    border-radius: 8px;
}

.login-submit input{
    background-color: var(--theme_secondary);
    border: unset;
    width: 100%;
    padding: 15px 0;
    color: white;
    font-weight: 500;
    border-radius: 8px;
    margin-top: 16px;
}

.login-submit input:hover{
    background-color: var(--primary_button_hover);
    transition: .2s;
}

.login-submit input:focus-visible{
    background-color: var(--primary_button_hover);
    outline: 0;
    box-shadow: 0px 0px 0px 0.25rem #B2CDFF;
}

.login-submit input:active{
    background-color: var(--primary_button_pressed);
}

.login-submit input:disabled{
color: var(--type_disabled);
font-weight: 400;
background-color: var(--button_disabled_bg_color);
}

.toggle-password {
    /* float: right!important; */
    cursor: pointer;
    position: absolute;
    margin-right: 12px;
    color: var(--input_box_placeholder);
}

@media (max-width:576px) {
    #insightify-login > div:nth-child(2) .card{
        padding: 32px;
        width: 90%;
        border-radius: 10px!important;
    }
}


/* insightify-login section ends here */


/* datatype pill starts here */

.data-type-pill{
    color: var(--type_secondary);
    font-size: 14px;    
    padding: 1px 10px;    
    width: max-content;
    margin: auto;
    border-radius: 50px;
}

.data-type-pill.clickers{
    background-color: var(--revenue_bg);
}

.data-type-pill.openers{
    background-color: var(--openers_bg);
}

.data-type-pill.normal{
    background-color: var(--sent_bg);
}

.data-type-pill::before{
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
}

.data-type-pill.clickers::before{
    background-color: var(--revenue_type);
}

.data-type-pill.openers::before{
    background-color: var(--opens_type);
}

.data-type-pill.normal::before{
    background-color: var(--sent_type);
}

/* datatype pill ends here */



/* datafile count starts here */
.data-file-count{
    text-align: center;
    background-color: grey;
    border-radius: 0 0 4px 4px;
    
}

.data-file-count h4{
    margin-bottom: 4px;
    padding-top: 16px;
    font-weight: 600;
}

.data-file-count h6{
    color: var(--type_primary);
    padding-bottom: 16px;
}

.data-file-count::before{
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    position: relative;
    border-radius: 4px 4px 0 0;
}


.data-file-count.total-count{
    background-color: var(--datafile-bg);
    color: var(--datafile-text);
}


.data-file-count.total-count::before{
    background-color: var(--datafile-text);
}

.data-file-count.clickers{
    background-color: var(--revenue_bg);
    color: var(--revenue_type);
}


.data-file-count.clickers::before{
    background-color: var(--revenue_type);
}


.data-file-count.openers{
    background-color: var(--openers_bg);
    color: var(--opens_type);
}


.data-file-count.openers::before{
    background-color: var(--opens_type);
}

.data-file-count.normal{
    background-color: var(--sent_bg);
    color: var(--sent_type);
}


.data-file-count.normal::before{
    background-color: var(--sent_type);
}




/* .data-file-count.clickers */

/* datafile count ends here */


/* text tools css starts here */
.text-encoder-label{
    width: auto;
    min-width: 0;
}
/* text tool css ends here */




/* mailing tools css */

.as{
    display: inline-block;
    padding-bottom: 1em;
    margin-right: 0.25em;
}


input.bt{
    border: unset;
    color: var(--theme_primary);
    width: 32px;
    height: 32px;
    border-radius: 0.125rem;
    background: linear-gradient(225deg, #F5F5F5 -6.25%, #CCC 98.44%);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.10);
    font-size: 14px;
    font-weight: 500;
}

input.bt:hover{    
    background: var(--theme_primary);
    color: white;
}

input.bt:active{  
    transform: scale(1.1);
}


/* mailing tools css ends here */


/* analytics target section starts here */

.target-data-main {
    background-color: var(--analytics-data-bg);
    border: 1px solid var(--analytics-data-strole);
    border-radius: 4px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.target-data {
    font-weight: 600;
    font-size: 18px;
}

.target-data.sent{
    color: var(--sent_type);
}

.target-data.revenue{
    color: var(--revenue_type);
}

.target-data.contribution{
    color: var(--contribution-color);
}

.target-data span{
    font-weight: 400;
    color: var(--type_secondary);
    font-size: 15px;
}


/* range slider custom css starts here */

.irs--big{
    height: auto!important;
}

.irs--big .irs-bar{
    border-radius: 0.75rem!important;
    background: linear-gradient(90deg, rgba(49, 144, 49, 0.60) 0%, #107C10 100%)!important;
    height: 16px!important;
    border: unset!important;    
    top: 0px!important;
}

.irs-min , .irs-max{
    display: none!important;
}

.irs--big .irs-line{
    height: 16px!important;    
    top: unset!important;
    border: unset!important;
}

.irs-handle.single{
    display: none!important;
}


.irs-single{
z-index: 1!important;
background: rgb(255, 255, 255)!important;
color: var(--revenue_type)!important;
font-size: 14px!important;
font-weight: 700!important;
border-radius: 50%!important;
height: 45px!important;
width: 45px!important;
text-align: center;
top: -15px!important;
vertical-align: middle!important;
padding: 12.5px 0!important;
outline: 5px solid rgba(255, 255, 255, 0.5)!important;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75)!important;
}


.target-marker{
    font-size: 12px!important;
    color: var(--type_disabled)!important;
    padding-top: 8px!important;
}


.target-marker span.revenue{
    color: var(--revenue_type)!important;
    font-weight: 500!important;
}


/* range slider custom css ends here */


/* analytics target section ends here */


/* error css starts here */

.page-error{
    text-align: center;
    height: 90vh;   
}

.page-error img{
    width: 100%;
}

.error-msg{
    color: var(--grey130);
    margin: 32px auto;
    max-width: 550px;
}

@media (max-width:576px) {
   
.page-error img{
    width: 75vw;
} 
}

/* error css ends here */


/* Profile css starts here */
.profile-container{
    margin-left: unset!important;
    z-index: 1;
    /* top: 85px; */
    position:relative;
    background: #fff;
}





.profile-card .card-title{    
    font-size: 16px!important;
    margin-left: unset;
}

.profile-card .card-head{
    border-bottom: unset;
    background-color: var(--profile-head-bg);
}

.profile-card {
    position: relative;
    border-radius: 0rem 0rem 0.25rem 0.25rem!important;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20)!important;
}

.profile-cover{
    border-radius: 0.25rem!important;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20)!important;
}

.profile-card:before {
    content: '';
    position: absolute;
    top: -1px;
    border-radius: 4px 4px 0 0;
    left: 0;
    right: 0;
    height: 4.5px;
    width: 100%;
    background: var(--theme_secondary);
  }

  .profile-card .card-body{
    padding: 16px;
  }

  .input-support-label{
    color: var(--type_secondary);
    font-size: 14px;
  }

  .input-group{
    flex-wrap: nowrap!important;
  }

  
.input-group span{    
    background-color: var(--input_box_bg);
    border: 1px solid var(--input_box_border)!important;
}

  .tagify {
    background-color: var(--input_box_bg);
    border: 1px solid var(--input_box_border)!important;
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 6px;
    color: var(--type_primary);
    transition: .2s;
    height: 110px;
}

.tagify::placeholder{
    color: var(--input_box_placeholder)!important;
}



.inputgroup_default label{
    margin-right: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--type_primary);
}

.mandatory{
    color: var(--validation_red_icon);
}

.tagify:hover{
    border: 1px solid var(--input_border_hover)!important;
    transition: .2s!important;
}



.tagify:focus{
    border: 1px solid var(--input_border_hover)!important;
    box-shadow: 0px 0px 0.25rem rgba(5, 47, 95, 0.61)!important;
}

.tagify:focus-visible{
    outline: 0!important;
}

.tagify:disabled{
    background-color: var(--input_box_disabled_bg)!important;
    border: unset!important;
}


.label-info{
    font-size: 14px;
    color: var(--type_secondary);
    /* width: 200px; */
}

.view-data{
    color: var(--type_primary);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.text-wrap{
    text-wrap: balance;
}

.input-data-preview-list{
    list-style-type: none;
    margin-bottom: unset;
}

@media (min-width:576px) {
    

.input-data-preview-list.column-count{
    column-count: 2;
}

}

.input-data-preview-list li{        
    padding-top: 15px;
    padding-bottom: 15px;
}

.border-unset li{
    border: unset!important;
}

/* .input-data-preview-list li:first-child{
    padding-top: unset;
} */

/* .input-data-preview-list li:last-child{
    padding-bottom: unset;
} */

.input-data-preview-list li{
    border-bottom: 1px dashed var(--grey60);
}

.input-data-preview{
    margin-right: unset!important;
    margin-left: unset!important;
}

.empty-state-text{
    color: var(--type_disabled);
    font-size: 14px;
    padding-top: 20px;
    margin-bottom: unset;
}


.profile-pill{
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    width: max-content;
}

.profile-pill.skill1{
    color: var(--skill-color-1);
    background-color: var(--skill-color-bg1);
}

.profile-pill.skill2{
    color: var(--skill-color-2);
    background-color: var(--skill-color-bg2);
}

.profile-pill.skill3{
    color: var(--skill-color-3);
    background-color: var(--skill-color-bg3);
}

.profile-pill.skill4{
    color: var(--skill-color-4);
    background-color: var(--skill-color-bg4);
}

.profile-pill.skill5{
    color: var(--skill-color-5);
    background-color: var(--skill-color-bg5);
}



.profile-cover{
    background-image: url(/assets/media/images/profile_cover_bg.jpg);
    background-repeat: no-repeat;
    padding-top: 5vw;
    background-size: contain;
    position: relative;
    overflow: visible;
}


.social-links ul{
    list-style-type: none;
    display: flex;
    gap: 12px;
}

.profile-img-src{
    border-radius: 50%;
    border: 4px solid white;
    width: 100%!important;
    height: 100%!important;
    object-fit: cover;
    display: block;
}

/* Outer hit area: do not clip the change-photo badge; wide enough so badge is not over text */
.profile-label{
    cursor: pointer;
    width: 170px;
    height: 150px;
    overflow: visible;
    z-index: 51 !important;
}

/* Only the photo is circular-clipped */
.profile-avatar-frame{
    position: absolute;
    inset: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
}

.profile-upload-input{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    pointer-events: auto !important;
}

.img-container img {
    max-width: 100%;
  }

  .profile-change-icon{
    right: 0;
    bottom: 0;
    z-index: 20;
    cursor: pointer;
    pointer-events: auto;
    line-height: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .profile-change-icon img{
    display: block;
  }

  .employee-name{
    color: var(--type_primary);
    font-size: 18px;
    font-weight: 600;
  }

  .best-performance{
    color: var(--performer-text);
    background-color: var(--performer-bg);
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    width: max-content;
  }

  @media (min-width:576px) {
    
  .profile-progress{
    width: 16.667vw;
  } 
  }

  .profile-progress label{
    color: var(--type_primary);
    font-size: 14px;
  }

  .profile-progress .progress{
    height: 5px!important;
    background-color: var(--progress-bar-bg)!important;    
  }

.profile-progress .progress-bar{
    background-color: var(--progress-bar-progress)!important;
}

.profile-pic{
    position: absolute;
    bottom: 20%;
    left: 1%;
    cursor: pointer;
    z-index: 50 !important;
    width: max-content!important;
    pointer-events: auto !important;
    overflow: visible;
}

/* Keep header text row below the avatar + change-photo badge for hit-testing */
.profile-cover > .container-fluid > .row{
    position: relative;
    z-index: 0;
}

.employee-profile-details{
    /* Avatar 150px + badge protrudes ~40px; 180px overlapped "Designation" with the icon */
    padding-left: 230px;
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.employee-profile-details-all{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: auto;
}

@media (max-width:992px) {
    .profile-pic{
        position: relative;
        transform: translateX(-50%)!important;
        left: 50%!important;
        width: max-content!important;
    }

    
.profile-cover{
    background-image: url(/assets/media/images/profile_cover_bg.jpg);
    background-repeat: no-repeat;
    padding-top: 2vw;
    background-size: auto;
}

.employee-profile-details{
    padding-left: unset!important;
}
}

@media (max-width:768px) {
        


.employee-profile-details-all{
    display: block!important;
}

.profile-progress{
    width: 80%;
    margin: 0 auto 20px auto!important;
    order: 1;
}

.social-links{
    width: max-content;
    margin: auto;
    order: 0;
}

.best-performance{
    margin: auto;
}

.employee-basic-info .input-data-preview{
    text-align: center;
}



}



/* Profile css ends here */


/* chat component button css starts here */

.chat-comp-btn.send{
    padding: 6px;
    border-radius: 4px;
    border:unset;
    background-color: var(--theme_primary);        
}

.chat-comp-btn.send:hover{
    background-color: #023a7a;  
}


.chat-comp-btn.send:focus-visible{
    background-color: #023a7a;  
    box-shadow: 0px 0px 0px 2px rgba(5, 47, 95, 0.25)!important;  
    outline: 0!important;
}

.chat-comp-btn.send:active{
    background-color: var(--theme_primary);        
}


.chat-comp-btn.attachment label{
    padding: 6px;
    border-radius: 4px;
    border:unset;
    background-color: #E3E3E3;    
    cursor:pointer;   
}

.chat-comp-btn.attachment label:hover{
    background-color: #d1d1d1;  
}


.chat-comp-btn.attachment label:focus-visible{
    background-color: #d1d1d1;  
    box-shadow: 0px 0px 0px 2px rgba(228, 228, 228, 0.55)!important;  
    outline: 0!important;
}

.chat-comp-btn.attachment label:active{
    background-color: #E3E3E3;  }



    .chat-comp-btn.img-preview{
        padding: 6px;
        border-radius: 4px;
        border:unset;
        background-color: var(--theme_secondary);        
    }
    
    .chat-comp-btn.img-preview:hover{
        background-color: #366bcc;  
    }
    
    
    .chat-comp-btn.img-preview:focus-visible{
        background-color: #366bcc;  
        box-shadow: 0px 0px 0px 2px #366bcc50!important;  
        outline: 0!important;
    }
    
    .chat-comp-btn.img-preview:active{
        background-color: var(--theme_secondary);        
    }

/* chat component button ends here */

/* my own new code starts here */

.table-responsive {
    font-size: 13px !important;
}

.pagination {
    --bs-pagination-font-size: 13px !important;
}
label { font-size: 14px !important; }

.form-select, .form-control  {
    background-color:  var(--input_box_bg)!important;
    border: 1px solid var(--input_box_border)!important;
    font-size: 14px !important;
    color: var(--type_primary)!important;
    transition: .2s;
}



.data_table th a.asc:after,
.data_table th a.desc:after {
    color: #fff !important;   /* Make text white */
    border-bottom: solid 7px #fff !important; /* Make arrow white */
}

table.data_table,
.data_table,
table.data_table.dataTable {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.summary { font-size: 12px;}

.help-block { font-size: 12px; color: red; }

div.required label:after {
    content: " *";
    color: red;
}


.chosen-single {
    height: 33px !important;
    line-height: 31px !important;
}

.reload-btn { font-size: 14px !important; }


.data_table2 th{
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    background-color: var(--table_header_bg);
    color: white;
    text-align: center;
    padding: 15px 10px;
}

.data_table2 th:hover{
    background-color: var(--table_header_hover);
}

.data_table2 th:active{
    background-color: var(--table_header_bg);
}

.data_table2 th:first-child{
    border-top-left-radius: 3px;
}

.data_table2 th:last-child{
    border-top-right-radius: 3px;
}

.data_table2 tr td{
    font-size: 14px;
    line-height: 20px;
    padding: 10px 10px;
    text-align: center;
    border: 1px solid var(--divider);
    border-collapse: collapse !important;
}

table.data_table2 {
    border-collapse: collapse !important;
}

.data_table2 tr:nth-child(odd){
    background-color: var(--white);
}

.data_table2 tr:nth-child(even) {
    background-color: var(--table_row_even_bg);
  }
  
 .data_table2 tbody tr:hover{
    background-color:var(--table_hover_bg);
    
}

.data_table2_variant_2 th{
    background-color: var(--grey30)!important;
    color: var(--type_primary)!important;
    border: 1px solid var(--grey40);
}

.readonly-like-input {
    resize: none;
    height: auto;
    min-height: 38px;
    overflow: hidden;
    color: var(--type_primary);
    font-size: 14px;
    font-weight: 600;
    background-color: var(--input_data_collected_bg);
    border: 1px dashed var(--input_data_collected_stroke);
    border-radius: 0.375rem;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
}

.readonly-like-input:focus,
.readonly-like-input:focus-visible {
    background-color: var(--input_data_collected_bg);
    border: 1px dashed var(--input_data_collected_stroke);
    box-shadow: unset;
    outline: unset;
}

@media (min-width: 992px) {
    .profile-edit-basic-col {
        border-right: 1px dashed var(--input_box_border, #c8d6e5);
        padding-right: 1.25rem;
    }
}

.profile-edit-completeness label {
    font-size: 14px;
}

/* Profile view: colourful skill tags */
.profile-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    padding-top: 2px;
}

.profile-skill-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

.profile-skill-tag--0 {
    background-color: #fde8ef;
    color: #ad1457;
}

.profile-skill-tag--1 {
    background-color: #ede7f6;
    color: #5e35b1;
}

.profile-skill-tag--2 {
    background-color: #fff3e0;
    color: #e65100;
}

.profile-skill-tag--3 {
    background-color: #e3f2fd;
    color: #1565c0;
}

.profile-skill-tag--4 {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.profile-skill-tag--5 {
    background-color: #e0f7fa;
    color: #00695c;
}

/* my own new code ends here */