/* ================================================================================ */
/* Font family  */
/* ================================================================================ */

/* RAJDHANI FONTS */
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/rajdhani/Rajdhani-Light.ttf');
    font-weight: 200;
}
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/rajdhani/Rajdhani-Regular.ttf');
    font-weight: var(--fw-regular);
}
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/rajdhani/Rajdhani-Medium.ttf');
    font-weight: var(--fw-medium);
}
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/rajdhani/Rajdhani-SemiBold.ttf') ;
    font-weight: var(--fw-semibold);
}
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/rajdhani/Rajdhani-Bold.ttf');
    font-weight: var(--fw-bold);
}

/* ROBOTO FONTS */

@font-face {
    font-family: 'Roboto-Thin';
    src: url('../fonts/roboto/Roboto-Thin.ttf');
}
@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/roboto/Roboto-Light.ttf');
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/roboto/Roboto-Regular.ttf');
}
@font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/roboto/Roboto-Medium.ttf');
}
@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/roboto/Roboto-Bold.ttf');
}
@font-face {
    font-family: 'Roboto-Black';
    src: url('../fonts/roboto/Roboto-Black.ttf');
}



/* ================================================================================ */
/* Root Variables  */
/* ================================================================================ */

:root{

    /* COLORS */
    --primary_black_262626: #231F52;
    --light_blue_topbar:#F1F4F7;
    --input_bg_F8F8F8:#F8F8F8;
    --input_border_E5E5E5:#E5E5E5;
    --light_blue_E3E9EF:#E3E9EF;
    --black_4A4A4A:#4A4A4A;
    --black_3D3D3D:#3D3D3D;
    --dark_gray_52575D:#52575D;
    --gray_9B9B9B:#9B9B9B;
    --white_ffffff: #ffffff;
    --c8c8c8:#c8c8c8;
    --box-shadow_clr: #52575d15;


    --ff-rajdhani: "Rajdhani", sans-serif;
    --ff-roboto: "Roboto", sans-serif;

    --fw-light: 200;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --fs-50: 50px;
    --fs-33: 33px;
    --fs-24: 24px;
    --fs-18: 18px;
    --fs-16: 16px;
    --fs-14: 14px;
    --fs-12: 12px;

    --fs-table: var(--fs-12);
    --fs-title: var(--fs-24);
    --fs-button: var(--fs-18);
    --fs-links: var(--fs-24);

    --p-10: 10px;
    --p-20: 20px;
    --p-30: 30px;
    --p-40: 40px;
    --p-50: 50px;
    --p-60: 60px;

    --m-10: 10px;
    --m-20: 20px;
    --m-30: 30px;
    --m-40: 40px;
    --m-50: 50px;
    --m-60: 60px;

    --br-10: 10px;
    --br-20: 20px;
    --white_block_br: var(--br-20);

    --height-60: 60px;
    --width-50percent: 50%;

}
/* ================================================================================ */
/* General Styling  */
/* ================================================================================ */
.text_white{
    color: var(--white_ffffff);
}
.text_dark_gray{
    color: var(--dark_gray_52575D);
}
.text_black{
    color: var(--black_3D3D3D) !important;
}
.input_bg_clr{
    background-color: var(--input_bg_F8F8F8) !important;
}



.padding_inline-10{
    padding-inline: var(--p-10);
}
.padding_inline-20{
    padding-inline: var(--p-20);
}
.padding_inline-30{
    padding-inline: var(--p-30);
}
.padding_inline-40{
    padding-inline: var(--p-40);
}
.padding_inline-50{
    padding-inline: var(--p-50);
}
.padding_inline-60{
    padding-inline: var(--p-60);
}
.padding_block-10{
    padding-block: var(--p-10);
}
.padding_block-20{
    padding-block: var(--p-20);
}
.padding_block-30{
    padding-block: var(--p-30);
}
.padding_block-40{
    padding-block: var(--p-40);
}
.padding_block-50{
    padding-block: var(--p-50);
}
.padding_block-60{
    padding-block: var(--p-60);
}

.margin_inline-10{
    margin-inline: var(--p-10);
}
.margin_inline-20{
    margin-inline: var(--p-20);
}
.margin_inline-30{
    margin-inline: var(--p-30);
}
.margin_inline-40{
    margin-inline: var(--p-40);
}
.margin_inline-50{
    margin-inline: var(--p-50);
}
.margin_inline-60{
    margin-inline: var(--p-60);
}
.margin_block-10{
    margin-block: var(--p-10);
}
.margin_block-20{
    margin-block: var(--p-20);
}
.margin_block-30{
    margin-block: var(--p-30);
}
.margin_block-40{
    margin-block: var(--p-40);
}
.margin_block-50{
    margin-block: var(--p-50);
}
.margin_block-60{
    margin-block: var(--p-60);
}

.title{
    font-size: var(--fs-title) !important;
    font-family: var(--ff-rajdhani);
    font-weight: var(--fw-bold) !important;
}

.white_block{
    /*border-radius: var(--white_block_br) !important;*/
    /*box-shadow: 0px 5px 25px var(--box-shadow_clr);*/
    border-radius: 10px  !important;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);
    border: none !important;
}

.fs-50{
    font-size: var(--fs-50);
}
.fs-33{
    font-size: var(--fs-33);
}
.fs-24{
    font-size: var(--fs-24);
}
.fs-18{
    font-size: var(--fs-18);
}
.fs-16{
    font-size: var(--fs-16);
}
.fs-14{
    font-size: var(--fs-14);
}
.fs-12{
    font-size: var(--fs-12);
}

h1{
    font-size: var(--fs-33) ;
    font-family: var(--ff-rajdhani) !important;
    font-weight: var(--fw-bold) !important;
}
h2{
    font-size: var(--fs-24);
    font-family: var(--ff-rajdhani) !important;
    font-weight: var(--fw-bold) !important;
}
h3{
    font-size: var(--fs-18) ;
    font-family: var(--ff-rajdhani) !important;
    font-weight: var(--fw-bold) !important;
}
h4{
    font-size: var(--fs-16) ;
    font-family: var(--ff-rajdhani) !important;
    font-weight: var(--fw-bold) !important;
}
h5{
    font-size: var(--fs-14) ;
    font-family: var(--ff-rajdhani) !important;
    font-weight: var(--fw-bold) !important;
}
h6{
    font-size: var(--fs-12) ;
    font-family: var(--ff-rajdhani) !important;
    font-weight: var(--fw-bold) !important;
}

.ff-rajdhani{
    font-family: var(--ff-rajdhani) !important;
}
.ff-roboto{
    font-family: var(--ff-roboto) !important;
}

.fw-bold{
    font-weight: var(--fw-bold) !important;
}
.fw-semibold{
    font-weight: var(--fw-semibold) !important;
}
.fw-medium{
    font-weight: var(--fw-medium) !important;
}
.fw-regular{
    font-weight: var(--fw-regular) !important;
}
.fw-light{
    font-weight: var(--fw-light) !important;
}

.black_clr{
    color: var(--primary_black_262626);
}

.margin-top-10{
    margin-top: var(--m-10);
}
.margin-top-20{
    margin-top: var(--m-20);
}
.margin-top-30{
    margin-top: var(--m-30);
}
.margin-top-40{
    margin-top: var(--m-40);
}
.margin-top-50{
    margin-top: var(--m-50);
}
.margin-top-60{
    margin-top: var(--m-60);
}
.margin-bottom-10{
    margin-bottom: var(--m-10);
}
.margin-bottom-20{
    margin-bottom: var(--m-20);
}
.margin-bottom-30{
    margin-bottom: var(--m-30);
}
.margin-bottom-40{
    margin-bottom: var(--m-40);
}
.margin-bottom-50{
    margin-bottom: var(--m-50);
}
.margin-bottom-60{
    margin-bottom: var(--m-60);
}
th{
    font-weight: var(--fw-semibold) !important;
}

.height-60{
    height: var(--height-60) !important;
}
.width-50percent{
    width: var(--width-50percent) !important;
}

/* ================================================================================ */
/* Global Size  */
/* ================================================================================ */

/* 83,36,28,26,24,22,21,20,18,17,16,15,14,12 */

/* h1 {
  font-size: 83px !important;
  line-height: 1.3;
  font-family: "Rajdhani-Bold" !important;
}

h2 {
  font-size: 36px !important;
  line-height: 1.3;
  font-family: "Rajdhani-Bold" !important;
}

h3 {
  font-size: 28px !important;
  line-height: 1.3;
  font-family: "Rajdhani-Bold" !important;
}

h4 {
  font-size: 26px !important;
  line-height: 1.3;
  font-family: "Rajdhani-Bold" !important;
}

h5 {
  font-size: 24px !important;
  line-height: 1.3;
  font-family: "Rajdhani-Bold" !important;
} */
p{
    font-family: var(--ff-roboto) !important;
    margin: 0;
}
p,
span,
a {
    font-size: 18px;
    line-height: 1.6;
}
.font-24{
    font-size: 24px;
}
.p-60{
    font-size: 60px !important;
}
.p-22{
    font-size: 22px;
}
.p-21{
    font-size: 21px;
}
body .p-20{
    font-size: 20px;
    padding: 0px !important;
}
.p-22{
    font-size: 22px;
}
.p-18{
    font-size: var(--fs-18);
}
.p-17{
    font-size: 17px;
}
.p-16{
    font-size: 16px;
}
.p-15{
    font-size: 15px;
}
.p-14{
    font-size: 14px;
}
.p-12{
    font-size: 12px;
}

.flex-row-custom{
    display:flex;
    flex-wrap:wrap;
    row-gap: 1rem
}

.borderRadius{
    border-radius: 10px !important;
}
.borderRadius20{
    border-radius: 20px !important;
}
.box-shadow-card{
    box-shadow: 0px 5px 25px var(--box-shadow_clr);
}

a{
    text-decoration: none;
}
ul{
    list-style: none;
}
.green_btn{
    background-color: var(--green_74C911);
    color: var(--white_ffffff);
    padding: 15px 32px;
}
.large_green_btn{
    padding-block: 15px !important;
    border: none !important;
}
.rajdhani-bold{
    font-family: "Rajdhani-Bold" !important;
}
button , .btn{
    font-size: 16px;
    font-family: var(--ff-rajdhani);
    font-weight: var(--fw-semibold);
    border: 1px solid var(--black_4A4A4A) !important;
    line-height: 1.6;
    background: var(--white_ffffff);
    color: var(--black_3D3D3D);
    border-radius: 10px;
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    border: 1px solid var(--input_border_E5E5E5) !important;
    padding: 7px 25px;
    font-family: var(--ff-rajdhani);
}

button:hover,a:hover{
    cursor: pointer !important;
}
.black_button{
    font-size: var(--fs-button);
    color: var(--white_ffffff);
    background-color: var(--primary_black_262626) !important;
}
.black_button:hover{
    color: var(--white_ffffff);
    background-color: var(--black_4A4A4A);
}
.black_button:focus{
    color:var(--white_ffffff);
}
.page-wrapper {
    background:var(--white_ffffff) !important;
}
.container-fluid{
    padding: 30px;
}
i{
    color: var(--primary_black_262626);
}
i.fa {
    font-size: 16px;
}
.card{
    padding: 20px !important;
}
body .modal-backdrop {
    z-index: 999 !important;
}
.modal-content {
    border-radius: 20px !important;
    border: none;
}
.header {
    display: flex;
    align-items: center;
}
.right_buttons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.filter_btn{
    border: 1px solid var(--input_border_E5E5E5);
    padding: 6px 25px;
    border-radius: 10px;
    font-family: var(--ff-rajdhani);
    font-weight: var(--fw-semibold);
}
.filter_btn a{
    color: var(--black_3D3D3D);
}
.right_buttons a , .right_buttons button  {

    background: var(--white_ffffff);
    color: var(--black_3D3D3D);
    border-radius: 10px;
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    border: 1px solid var(--input_border_E5E5E5) !important;
    padding: 7px 25px;
    font-family: var(--ff-rajdhani);

}
.right_buttons  a:hover , .right_buttons button:hover {
    background: var(--primary_black_262626) !important;
    color: white;
    border: none;
    opacity: 1;
}
.right_buttons  a:hover i , .right_buttons button:hover i{
    color: white;
}

.add_btn {
    display: flex;
    align-items:center;
}
.pdf_icon .fa-file-pdf-o{
    color: #231F52;font-weight: 900;
}
.form-control {
    background-color: #fff;
    border: 1px solid #e5ebec !important;
    /* border-radius: 0;
    box-shadow: none;
    color: #565656;
    height: 38px;
    max-width: 100%; */
    padding: 7px 12px !important;
    transition: all 300ms linear 0s;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: var(--c8c8c8) !important;
    opacity: 1;
    cursor: unset;
}
.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    float: none;
}



/* ================================================================================ */
/* Header Css */
/* ================================================================================ */



/* ================================================================================ */
/* Footer Css */
/* ================================================================================ */


#footer {
    padding: 60px 0 30px;
}

#footer .section-title {
    text-align: center;
    color: #007b5e;
    margin-bottom: 50px;
    text-transform: uppercase;
}

#footer {
    background: #007b5e !important;
}

#footer h5 {
    padding-left: 10px;
    border-left: 3px solid #eeeeee;
    padding-bottom: 6px;
    margin-bottom: 20px;
    color: #ffffff;
}

#footer a {
    color: #ffffff;
    text-decoration: none !important;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

#footer ul.social li {
    padding: 3px 0;
}

#footer ul.social li a i {
    margin-right: 5px;
    font-size: 25px;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
}

#footer ul.social li:hover a i {
    font-size: 30px;
    margin-top: -10px;
}

#footer ul.social li a,
#footer ul.quick-links li a {
    color: #ffffff;
}

#footer ul.social li a:hover {
    color: #eeeeee;
}

#footer ul.quick-links li {
    padding: 3px 0;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
}

#footer ul.quick-links li:hover {
    padding: 3px 0;
    margin-left: 5px;
    font-weight: 700;
}

#footer ul.quick-links li a i {
    margin-right: 5px;
}

#footer ul.quick-links li:hover a i {
    font-weight: 700;
}

/* ================================================================================ */
/* TOPBAR Css */
/* ================================================================================ */
.topnavbar { height: 110px; }
.topnavbar .navbar-header{
    background:#231F52 ;
}
.sidebartoggler i.icon-arrow-left-circle {color: #fff;}
.search_bar_div{
    border: 1px solid var(--input_border_E5E5E5);
    height: 55px;
    margin-top: 7px;
    display: flex;
    align-items: center;
    width: 500px;
    border-radius: 10px;
    background: var(--white_ffffff);
}
.search_bar_div i{
    color: var(--dark_gray_52575D) !important;
    font-weight: var(--fw-bold);
}
.search_bar_div form{
    width: 100%;
}
.search_bar_div form input{
    color: var(--black_3D3D3D) !important;
    width: 100% !important;
}
.search_bar_div form{
    display: flex;
    align-items: center;
    gap: 10px;
}
.topnavbar .navbar-header{
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
}
.topnavbar .navbar-header .navbar-right{
    margin-left: auto;
}
.user-profile .dropdown{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 15px;
}
.user-profile .profile-image{
    width: 50px;
    height: 50px;
    padding: 0 !important;
}
.user-profile .profile-image img{
    width: 50px !important;
    height: 50px !important;
}
.user-profile {
    margin-right: 20px;
}
.navbar-right{
    display:flex;
    align-items: center;
}

.page-wrapper{
    /*margin-top: 0;*/
    /*padding-top: 3%;*/
}


/* ================================================================================ */
/* TOPBAR Css END */
/* ================================================================================ */


/* ================================================================================ */
/* SIDEBAR Css */
/* ================================================================================ */
aside.sidebar {
    background: var(--primary_black_262626);
    border-right: none;
    height: 100%;
    position: fixed;
    padding-top: 110px;
}
/*.sidebar-nav {*/
/*margin-top: 60%;*/
/*}*/
.sidebar-nav li a span{
    font-family: var(--ff-rajdhani);
    font-size: var(--fs-24);
    font-weight: var(--fw-semibold);
    color: var(--white_ffffff);
}
.top-left-part {
    background: var(--primary_black_262626) !important;
    padding-block: var(--p-20);
}

#sidebar {
    min-width: 340px;
    max-width: 350px;
    background: var(--primary_black_262626) !important;
    color: var(--white_ffffff);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    height: 100vh;
    /* overflow-y: scroll; */
    position: fixed;
}

#side-menu li.active{
    background: var(--green_74C911);
    /*width: 90%;*/
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* #side-menu li a{
    color: white !important;
} */
.sidebar-nav ul#side-menu li a {
    color: var(--white_ffffff);
    padding: 12px 20px 12px 20px;
}
.sidebar-nav ul#side-menu li ul li a{
    padding: 12px 20px ;
}
.sidebar-nav{
    background: transparent !important;
    /*height: 83% !important;*/
}

#sidebar li a{
    color: var(--white_ffffff);
    padding: 14px 60px 14px 40px !important;
    transition: all ease 0.3s;
}
/* #sidebar li a span{
  font-family: "Rajdhani-Semibold" !important;
} */
#sidebar li{
    margin: 5px 0px;
}
#sidebar li.active-link {
    background-color: var(--green_74C911);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 90%;
}
#sidebar li i {
    display: none;
}
#sidebar h1 {
    font-size: 0;
    text-align: center;
    margin-bottom: 80px;
}
#sidebar hr.line {
    background: white;
    opacity: 1;
}
#sidebar .submenu {
    background: var(--primary_black_262626) !important;
    margin: 0 !important;
    border: none;
}
#sidebar .submenu li a {
    margin-left: 15px;
}
#sidebar .submenu li a {
    color: var(--c8c8c8);
}
#sidebar li a:hover {
    transform: translate(10px, 0px);
    transition: all ease 0.3s;
}
ul.submenu li.active a{
    background: var(--white_ffffff) !important;
    border-radius: 10px;
}
ul.submenu li a{
    font-family: var(--ff-rajdhani) !important;
    font-weight: var(--fw-semibold) !important;
    font-size: var(--fs-18) !important;
}
#side-menu li.active a{
    /* background: var(--white_ffffff) !important; */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* #side-menu li.active a span{
  color: var(--black_3D3D3D);
} */
#side-menu li.active .submenu li a{
    background: transparent !important;
    margin-top: 10px;
}
.sidebar-nav #side-menu li.active .submenu li.active{background: #fff;}
#side-menu li.active .submenu li.active{
    /*  background: white !important;*/
}
/*.sidebar-nav li:has(.submenu) a{*/
/*position: relative;*/
/*}*/
/*.sidebar-nav li:has(.submenu) a:after{*/
/*position: absolute;*/
  /*content: "▼";*/
/*right: 10%;*/
/*top: 32%;*/
/*color: white;*/
/*font-size: 12px;*/
/*}*/

.sidebar-nav #side-menu .sub_menu_link>a:after {
  content: "▼";
    position: absolute;
    right: 20px;
    top: 0;
    color: white;
    font-size: 12px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-nav #side-menu .sub_menu_link a {
    position:relative;
}
.sidebar-nav #side-menu li ul li a span {
    font-size: 20px ;
}
/*.submenu li a:after {*/
/*display: none;*/
/*}*/
.sidebar-nav ul#side-menu li ul {
    padding-left: 0px !important;
}
/*.submenu li{*/
/*padding-left: 20px;*/
/*}*/
ul#side-menu {
    height: 100%;
    display: flex;
    flex-direction: column;
}
li.logout {
    margin-top: auto;
    /*border-top: 2px solid white;*/
}

.with_text_logo {
    width: 80% !important;
    display: block;
    margin: 0 auto;
    height: 70px;
}
.with_text_logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;

}


/* ================================================================================ */
/* DASHBOARD Css */
/* ================================================================================ */

.page-wrapper {
    /* margin-left: 340px !important; */
    /*margin-top: -15px;*/
}

.content{
    height: 200vh;
    width: auto;
    margin-left: 340px !important;
    overflow: auto;
}
.search{
    position: relative;
    /* box-shadow: 0 0 40px rgba(51, 51, 51, .1); */
    width: 60%;
}

.search input {
    height: 50px;
    text-indent: 25px;
    border: 1px solid var(--input_border_E5E5E5);
    font-size: 18px;
    font-family: var(--ff-rajdhani);
}


.search input:focus{

    box-shadow: none;
    border: 2px solid var(--gray_9B9B9B);


}

.search .fa-search{

    position: absolute;
    top: 17px;
    left: 16px;

}

.search button{

    position: absolute;
    top: 5px;
    right: 5px;
    height: 50px;
    width: 110px;
    background: blue;

}

.top_navbar{
    background-color: var(--light_blue_F1F4F7);
    /* height: 70px; */
    padding: 3px 0px;
}
.name_image{
    display: flex;
    align-items: center;
    margin-left: 20px;
    justify-content: space-around;
}
.right_column{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.avatar {
    width: 60px;
    height: 60px;
}
.avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-profile .name_image .profile-image{
    padding: 0;
}
.user-profile .name_image .avatar img{
    width: 100% !important;
    height: 100% !important;
}
.user-profile .name_image {
    flex-direction: row-reverse;
}
.user-profile{
    width: 23%;
}
.msg_bell_icon{
    padding: 0 20px;
    justify-content: space-around;
    width: 100px;
    display: flex;
}
/*.number_cards_announcement{*/
/*    padding: 25px;*/
/*}*/
.number_cards_section {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2%;
    row-gap:15px;
}
/*.number_card{*/
/*    flex-basis: 32%;*/
/*    padding: 15px ;*/
/*    box-shadow: 0px 5px 25px var(--box-shadow_clr);*/
/*    border-radius: 20px;*/
/*    min-height: 170px;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*}*/
/* .card1{
  background-image: url(../images/card1.png);
}
.card2{
  background-image: url(../images/card2.png);
}
.card3{
  background-image: url(../images/card3.png);
}
.card4{
  background-image: url(../images/card4.png);
}
.card5{
  background-image: url(../images/card5.png);
}
.card6{
  background-image: url(../images/card6.png);
} */
.card_bg_img{
    background-repeat: no-repeat;
    /* background-position: center right; */
    background-position: 105% 50%;
}
.card-headerr {
    display: flex;
    align-items: center;
}
.card-headerr h5{
    margin: 0;
}
.card-headerr i{
    margin-left: 20px;
}
.checkbox_line {
    padding: 10px 0px;
}
.announcement_box {
    padding: 20px 35px;
    box-shadow: 0px 5px 25px var(--box-shadow_clr);
    border-radius: 20px;
}
.create_btn {
    margin-left: auto;
}
a.button {
    color: black;
    border: 1px solid var(--black_3D3D3D);
    padding: 10px 30px;
    font-family: var(--ff-rajdhani);
}

thead th{
    font-size: 12px;
    font-family: "Roboto";
    font-weight: var(--fw-regular);
}
thead{
    background-color: var(--light_blue_E3E9EF);
    padding: 10px 20px;
    border-radius: 10px;
    border-bottom: 2px solid transparent;
}
td,th{
    font-size: 14px !important;
    font-family: "Roboto";
    font-weight: var(--fw-regular);
}
td{
    height: 50px;
}
.recent_invoice{
    margin-top: 50px;
}
.top_users {
    margin-top: 50px;
    padding: 20px;
}
.number_card .number {
    font-family: var(--ff-rajdhani);
    font-weight: var(--fw-bold);
}


/* CHANGE PASSWORD PAGE */
.passowrd_fields{
    margin-top: 50px;
}
.input_fields{
    height: 60px !important;
    border-color: var(--input_border_E5E5E5) !important;
}
.input_labels{
    font-family: "Rajdhani";
    font-weight: var(--fw-semibold);
    font-size: 18px;
}
.submit_btn{
    font-family: "Rajdhani";
    font-weight: var(--fw-semibold);
}

/* CREATE STAFF PAGE */

.clr_input_fields{
    height: 50px !important;
    background-color: var(--input_bg_F8F8F8) !important;
}
.clr_textarea_fields{
    background-color: var(--input_bg_F8F8F8) !important;
}
.single_checkbox_btn {
    display: flex;
    align-items: center;
    border: 1px solid black;
}
.single_checkbox_btn .input_labels{
    margin: 0;
    position: relative;
}
.single_checkbox_btn input{
    opacity: 0;
}
.green_circle{
    width: 15px;
    height: 15px;
    border: 1px solid var(--black_3D3D3D);
    border-radius: 50%;
}
.checkbox_btn_box {
    display: flex;
    gap: 20px;
}
.single_checkbox_btn{
    padding: 10px 20px;
}
/* .form-check-input:checked + .green_circle{
  background: var(--green_74C911);
  border-color: transparent;
} */
::placeholder{
    font-family: "Rajdhani";
    font-size: 16px;
    color: gray !important;
    font-weight: var(--fw-semibold);
}

/* CREATE LEADS PAGE */
.residential_commercial {
    display: flex;
    gap: 20px;
}

/* PROFILE PAGE */
.upload_btn button{
    border: 1px solid var(--input_border_E5E5E5);
    font-family: "Rajdhani";
    font-weight: var(--fw-semibold);
    color: var(--gray_9B9B9B);
}
.profile_pic_box {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

/* EMAIL PAGE */
.email_links{
    padding: 30px 15px;
}
.message_btn a{
    color: var(--white_ffffff);
    background-color: var(--green_74C911);
}

.email_links .nav-link{
    color: var(--black_4A4A4A);
    font-family: "Roboto";
    font-weight: var(--fw-medium);
}
.inbox_with_icon{
    display: flex;
    align-items: center;
    gap: 10px;
}
.inbox_with_icon .fa-home{
    font-size: 22px;
}

.hr-line {
    width: 100%;
    height: 1px;
    background-color: var(--input_border_E5E5E5) !important;
}
.single_msg p{
    font-family: "Roboto";
    font-weight: var(--fw-regular);
}
.single_msg .msg_title{
    font-family: "Roboto";
    font-weight: var(--fw-medium);
}
.single_msg {
    padding: 20px 0px;
    border-bottom: 1px solid var(--input_border_E5E5E5);
}
:is(#pills-primary,#pills-general) div:last-child {
    border-bottom: none;
}
.primary_general_tabs ul li{
    width: 48%;
}
.primary_general_tabs ul li button{
    width: 100%;
    color: var(--c8c8c8);
    font-size: 16px;
    font-family: "Rajdhani";
    font-weight: var(--fw-semibold);
}

.primary_general_tabs .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--primary_black_262626);
    background-color: transparent;
    border-bottom: 2px solid var(--primary_black_262626);
    border-radius: 0;
}
.primary_general_tabs .nav-link:hover {
    color: var(--green_74C911);
}

.user-profile-box {
    display: flex;
    gap: 10px;
}
.right_icon_box i{
    margin: 0;
    color: var(--primary_black_262626);
    font-size: 22px;
}
.right_icon_box {
    display: flex;
    gap: 15px;
    margin-left: auto;
}
.image_box {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.image_box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.fontweight-bold{
    font-weight: 700;
}
.email_links li{
    width: 100%;
    transition: all ease-in-out .3s;
}
.email_links li:hover{
    box-shadow: 0px 1px 0px #e1e1e1;
    transition: all ease-in-out .3s;
}


/* COMPANY PERFORMANCE REPORT PAGE */
.button {
    padding: 10px 30px;
}
.border_btns{
    padding: 10px 30px;
    border: 1px solid var(--gray_9B9B9B);
    font-size: 16px;
}
.button:hover {
    background: var(--green_74C911);
    color: white;
    border: 1px solid var(--green_74C911) !important;
}

/* JOBS WON PAGE */
.table_div p{
    font-family: "Rajdhani";
    font-weight: var(--fw-medium);
}
.main_table thead tr{
    width: 100%;
}
.main_table thead th {
    width: 50px;
    /* border: 1px solid black; */
}
.nested_table {
    width: 100%;
}
.nested_table td{
    width: 50%;
    text-align: center;
}
table td,th{
    text-align: center;
}
.report_tabs ul{
    display: flex;
    justify-content: flex-start;
    padding-left: 0;
}
.report_tabs ul li{
    border: 1px solid var(--input_border_E5E5E5);
    padding: 10px 15px;
    margin-right: 10px;
}
.report_tabs ul li a{
    color: var(--black_4A4A4A);
    font-family: "Rajdhani";
    font-weight: var(--fw-bold);
}
.green_text{
    color: var(--green_74C911);
}
.report_tabs {
    display: flex;
    align-items: center;
}

/* MESSAGE PAGE */
.message_options_box{
    display: flex;
    gap: 15px;
    justify-content: space-around;
    padding: 10px 0px;
    box-shadow: 0px 0px 5px #f4f4f4;
    border-radius: 10px;
}

.message_option{
    display: flex;
    gap: 5px;
    align-items: center;
}
.notification_number{
    font-family: "Roboto";
    font-weight: var(--fw-regular);
    font-size: 12px;
}
.notification_number {
    background: var(--light_blue_E3E9EF);
    padding: 2px 12px;
    border-radius: 30px;
}

.msg_info .msg_title{
    font-family: "Rajdhani";
}
/* .msg_info{
  display: flex;
  align-items: center;
} */
.single_msg_box {
    display: flex;
    gap: 15px;
    /* border: 1px solid red; */
    padding: 10px 0px;
    position: relative;
}

.single_msg_box .time{
    font-size: 11px;
    position: absolute;
    right: 0;
    top: 15px;
    font-family: "Roboto";
    font-weight: var(--fw-bold) ;
}
.single_msg_box  .profile_img {
    border-radius: 50%;
    overflow: hidden;
}
.message_chat_column{
    padding: 30px 5px;
}

.user_top_info p{
    margin-left: auto;
}
.user_img_name {
    display: flex;
    align-items: center;
}
.single_contact_info{
    display: flex;
    gap: 20px;
}
.single_contact_info .info_title{
    font-family: "Roboto";
    font-weight: var(--fw-bold) ;
}
.single_contact_info .info_detail{
    font-family: "Roboto";
    font-weight: var(--fw-semibold);
}
.info_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--input_border_E5E5E5);
    width: 63px;
    height: 63px;
    border-radius: 50%;
    flex-shrink: 0;
}
.info_icon .fas{
    color: var(--green_74C911);
}
.message_box_header {
    margin: 0 auto;
    text-align: center;
}
.view_more_btn a{
    font-family: "Roboto";
    font-weight: var(--fw-semibold);
    font-size: 16px !important;
}

/* CHAT SECTION CSS */
.chat {
    width: 100%;
}

.header-chat {
    background-color: #FFF;
    height: 90px;
    box-shadow: 0px 3px 2px rgba(0,0,0,0.100);
    display:flex;
    align-items: center;
}

.chat .header-chat .icon {
    margin-left: 30px;
    color:#515151;
    font-size: 14pt;
}

.chat .header-chat .name {
    margin: 0 0 0 20px;
    text-transform: uppercase;
    font-family:'Montserrat', sans-serif;
    font-size: 13pt;
    color:#515151;
}

.chat .header-chat .right {
    position: absolute;
    right: 40px;
}

.chat .messages-chat {
    padding: 25px 0px;
}

.chat .messages-chat .message {
    display:flex;
    align-items: center;
    margin-bottom: 8px;
}

.chat .messages-chat .message .photo {
    display: block;
    width: 45px;
    height: 45px;
    background: #E6E7ED;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.chat .messages-chat .text {
    margin: 0 35px;
    background-color: #f6f6f6;
    padding: 15px;
    border-radius: 12px;
}

.text-only {
    margin-left: 45px;
}

.time {
    font-size: 10px;
    color:lightgrey;
    margin-bottom:10px;
    margin-left: 85px;
}

.response-time {
    float: right;
    margin-right: 40px !important;
}

.response {
    float: right;
    margin-right: 0px !important;
    margin-left:auto; /* flexbox alignment rule */
}

.response .text {
    /* background-color: #e3effd !important; */
    background-color: #76c01d17 !important;
}

.footer-chat {
    width: 100%;
    height: 80px;
    display:flex;
    align-items: center;
    /* position:absolute; */
    /* bottom: 0; */
    background-color: transparent;
    border-top: 2px solid #EEE;
    /* left: 0; */
    justify-content: center;
}

.chat .footer-chat .icon {
    margin-left: 30px;
    color:#C0C0C0;
    font-size: 14pt;
}

.chat .footer-chat .send {
    color:#fff;
    background-color: var(--green_74C911);
    position: absolute;
    right: 50px;
    padding: 12px 12px 12px 12px;
    border-radius: 50px;
    font-size: 14pt;
}

.chat .footer-chat .name {
    margin: 0 0 0 20px;
    text-transform: uppercase;
    font-family:'Montserrat', sans-serif;
    font-size: 13pt;
    color:#515151;
}

.chat .footer-chat .right {
    position: absolute;
    right: 40px;
}

.write-message {
    border:none !important;
    width:75%;
    height: 50px;
    margin-left: 20px;
    padding: 10px;
}

.footer-chat *::-webkit-input-placeholder {
    color: #C0C0C0;
    font-size: 13pt;
}
.footer-chat input *:-moz-placeholder {
    color: #C0C0C0;
    font-size: 13pt;
}
.footer-chat input *::-moz-placeholder {
    color: #C0C0C0;
    font-size: 13pt;
    margin-left:5px;
}
.footer-chat input *:-ms-input-placeholder {
    color: #C0C0C0;
    font-size: 13pt;
}

.clickable {
    cursor: pointer;
}
/* CHAT SECTION CSS END */


/* BY-SALESMAN PAGE */
.by-salesman .number_card {
    flex-basis: 31%;
}
.follow_up_boxes {
    display: flex;
    gap: 15px;
}
.follow_box {
    flex-basis: 32%;
}
/* BY SALESMAN PAGE END */

/* PROFIT LOSS ANALYSIS */
table p{
    font-size: 14px;
}
/* PROFIT LOSS ANALYSIS END */

/* EMAIL TEMPLATING CSS */
.email_temp_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 15px;
    border-bottom: 1px solid var(--input_border_E5E5E5);
}
.email_temp_box p{
    color: var(--primary_black_262626);
    font-family: "Rajdhani" !important;
    font-weight: var(--fw-bold);
}
.email_template_view_header {
    display: flex;
    align-items: center
}

.email_template_view_header .msg_icon{
    margin-right: 8px;
}
.email_template_view_header .time_box{
    margin-left: 8px;
}
.email_template_view_header .time_box{
    height: 40px;
    width: 140px;
    padding: 10px;
    font-size: 16px;
    font-family: "Roboto";
    color: var(--gray_9B9B9B);
    border-radius: 10px;
    border: 1px solid #ececec;
}
.email_template_view_header .time_box:hover{
    cursor: pointer;
}
/* EMAIL TEMPLATING CSS END */

/* CUSTOMER DETAILS CSS */
.single_box {
    width: 100%;
    height: 60px;
    border: 1px solid limegreen;
    background: limegreen;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
}
.single_box:before {
    position: absolute;
    content: "";
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    transform: translateY(22px);
    border-top: 30px solid limegreen;
    bottom: 0;
    height: 0;
    width: 0;
}
.progress-line {
    border-bottom: 2px solid var(--c8c8c8);
    margin-top: 30px;
    width: 100%;
}
.steps {
    display: flex;
    justify-content: start;;
}
.steps .progress_box{
    width: 150px;
    margin-right: 10px;
}
.top_section {
    display: flex;
    align-items: center;
    justify-content: start;
}
.appointment_input{
    margin-left: 20px;
}
.single_box p{
    font-size: 12px;
    width: 100%;
}
.single_box {
    width: 100%;
    padding: 0 10px;
}
.dot {
    width: 15px;
    height: 15px;
    background:var(--input_bg_F8F8F8);
    border: 3px solid var(--green_74C911);
    border-radius: 50%;
    position: absolute;
    bottom: -40px;
}
:is(.recent_photo,.announcement) .card-headerr a{
    margin-left: auto;
    color: white;
}
/* CUSTOMER DETAILS CSS END */


.customer_manager_table table:has(.fa) .fa{
    color: var(--green_74C911);
}
.action button#dropdownMenuButton {
    border: none !important;
    background: transparent;
}
td .open>.dropdown-menu {
    display: block;
    border-radius: 10px;
    text-align: center;
    padding: 6px 10px;
}
td .open>.dropdown-menu a{
    font-size: 14px;
    margin-block: 5px;
}
.email_links ul:has(.fa) .fa{
    margin-right: 10px;
    color: var(--green_74C911);
}
.email_links .card-body {
    padding-inline: 0;
}
.message_btn span:has(.fa) .fa{
    color: white;
}
.right_menu {
    display: flex;
}

.inbox_section .card-headerr{
    display: flex;
    justify-content: space-between;
}
.inbox_with_icon i{
    margin-left: 0;
}
.inbox_with_icon h4{
    margin: 0;
}
.right_menu > a{
    width: 30px;
    border: 1px solid var(--input_border_E5E5E5);
    text-align: center;
    border-radius: 50%;
}
.right_menu i{
    margin: 0;
}
.right_menu .dropdown{
    width: 30px;
    border: 1px solid var(--input_border_E5E5E5);
    text-align: center;
    border-radius: 50%;
}
.right_menu .dropdown button{
    background: transparent;
    border: none !important;
}
.right_menu .dropdown button i{
    padding-top: 6px;
}
section .card-headerr:has(:not(a)) i{
    margin-left: auto;
}
section .card-headerr:has(.button) a.button{
    margin-left: auto !important;
}

section  .card-headerr:has(.button) i{
    margin-left: 20px !important;
}
.report_tabs .advance_btn{
    margin-left: auto;
}
.passowrd_fields:has(button) button{
    font-size: 20px;
}
.create_btn{
    font-size: 20px;
}
.create_staff_table form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.single_checkbox_btn {
    position: relative;
}
.single_checkbox_btn input{
    position: absolute;
    width: 100%;
    height: 100%;
}
.single_checkbox_btn label{
    margin-left: 10px !important;
}
.single_checkbox_btn input:checked + .green_circle{
    background: var(--green_74C911) !important;
    border: none;
}
/*section:has(:not(.card)) .card-headerr{*/
/*    padding-inline: 20px;*/
/*    padding-top: 20px;*/
/*}*/

/* a:target{
  display: block;
}
.buttonContent:first-child{
  display: block;
}
.buttonContent:not(:target){
  display: none;
} */

.buttonContent{
    display: none;
}
.primary_general_tabs li{
    text-align: center;
}
.primary_general_tabs li a{
    font-family: "Rajdhani";
    font-weight: var(--fw-semibold);
}
.top_navbar {
    padding-inline: 20px;
}

.top_navbar .user-profile{
    padding-block: 10px;
}
input,textarea {
    font-size: 18px !important;
    font-family: "Rajdhani";
    font-weight: var(--fw-semibold);
}
.primary_general_tabs .nav-item.active a{
    background: transparent;
    color: var(--primary_black_262626);
    border-bottom: 2px solid var(--primary_black_262626);
    border-radius: 0;
}
.nav-pills>li.active>a:hover {
    background: #eee !important;
    color: var(--green_74C911) !important;
}

.calendar_content p>span{
    font-size: 36px;
    font-family: "Rajdhani";
    font-weight: var(--fw-semibold);
    color: var(--primary_black_262626);
}
.calendar_content{
    border: 1px solid lightgray;
    text-align: center;
    border-radius: 20px;
    padding-top: 20%;
    padding-bottom: 5%;
    position: relative;
}

.calendar_month img{
    position: absolute;
    top: -30px;
    left: 31.5%;
}
.calendar_wrapper .row .col-md-2:nth-child(n+7){
    margin-top: 50px;
}
.green-text{
    color:var(--green_74C911)!important
}

.upload_btn button:hover {
    background-color: var(--black_3D3D3D) !important;
    color: white !important;
    border: none !important;
}
.upload_btn {
    position: relative;
}
.upload_btn .upload_file_btn{
    position: absolute;
    width: 160px;
    height: 100%;
    opacity: 0;
}
.upload_file_btn:hover + button{
    background-color: var(--black_3D3D3D) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
}

.nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
}
#sidebar li a{
    font-family: "Rajdhani-Semibold" !important;
    font-size: 18px !important;
}
section:is(.terms_and_condition_section,.change_password_section,.user_profile_section,.summary_section) {
    padding-inline: 20px;
    padding-top: 30px !important;
}
.hr-line {
    margin-top: 20px !important;
    height: 1px !important;
}
table th:first-child{
    border-radius:10px 0 0 10px;
}

table th:last-child{
    border-radius:0 10px 10px 0;
}
.customer_job_report,.job_listings_section{
    padding-inline: 20px;
    padding-top: 20px !important;
}
:is(.jobs_won,.performance_section) .col-md-6:nth-child(1) .card{
    margin-left: 20px;
    margin-top: 20px;
}
:is(.jobs_won,.performance_section) .col-md-6:nth-child(2) .card{
    margin-right: 20px;
    margin-top: 20px;
}

.top_left_margin{
    margin-top: 20px;
    margin-left: 20px;
}
.top_right_margin{
    margin-top: 20px;
    margin-right: 20px;
}

.top_left_right_padding{
    padding-inline: 20px;
    padding-top: 20px !important;
}

.statistics_cards:has(.number_card) .number_card {
    flex-basis: 26%;
}
.single_line {
    display: flex;
    justify-content: space-between;
}

.cargo_info,.bill_info,.invoice,.erythreaen_logistics_head,.bank_account_head {
    margin-bottom: 10px;
    background: var(--light_blue_E3E9EF);
    padding-block: 10px;
    border-radius: 10px;
}
:is(.bank_account,.erythreaen_logistics,.invoice_div) p{
    padding-left: 15px;
    font-family: var(--ff-rajdhani) !important;
    font-weight: var(--fw-medium);
}
:is(.bill_information,.cargo_left_col,.cargo_right_col) p{
    padding-left: 15px;
    font-family: var(--ff-rajdhani) !important;
    font-weight: var(--fw-medium);
}
.img_div {
    display: flex;
    justify-content: center;
}




/* CHAT MESSAGES */
/*****************CHAT BODY *******************/
.chat-body h6 {
    font-size: 20px;
    margin: 0 0 20px;
}
.chat-body .answer.left {
    padding: 0 0 0 58px;
    text-align: left;
    float: left;
}
.chat-body .answer {
    position: relative;
    max-width: 600px;
    overflow: hidden;
    clear: both;
}
.chat-body .answer.left .avatar {
    left: 0;
}
.chat-body .answer .avatar {
    bottom: 36px;
}
.chat .avatar {
    width: 40px;
    height: 40px;
    position: absolute;
}
.chat .avatar img {
    display: block;
    border-radius: 20px;
    height: 100%;
}
.chat-body .answer .name {
    font-size: 14px;
    line-height: 36px;
}
.chat-body .answer.left .avatar .status {
    right: 4px;
}
.chat-body .answer .avatar .status {
    bottom: 0;
}
.chat-body .answer.left .text {
    background: #ebebeb;
    color: #333333;
    border-radius: 8px 8px 8px 0;
}
.chat-body .answer .text {
    padding: 12px;
    font-size: 16px;
    line-height: 26px;
    position: relative;
}
.chat-body .answer.left .text:before {
    left: -30px;
    border-right-color: #ebebeb;
    border-right-width: 12px;
}
.chat-body .answer .text:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    border: 18px solid transparent;
    border-bottom-width: 0;
}
.chat-body .answer.left .time {
    padding-left: 12px;
    color: #333333;
}
.chat-body .answer .time {
    font-size: 16px;
    line-height: 36px;
    position: relative;
    padding-bottom: 1px;
}
/*RIGHT*/
.chat-body .answer.right {
    padding: 0 58px 0 0;
    text-align: right;
    float: right;
}

.chat-body .answer.right .avatar {
    right: 0;
}
.chat-body .answer.right .avatar .status {
    left: 4px;
}
.chat-body .answer.right .text {
    background: var(--primary_black_262626);
    color: #ffffff;
    border-radius: 8px 8px 0 8px;
}
.chat-body .answer.right .text:before {
    right: -30px;
    border-left-color: var(--primary_black_262626);
    border-left-width: 12px;
}
.chat-body .answer.right .time {
    padding-right: 12px;
    color: #333333;
}

/**************ADD FORM ***************/
.chat-body .answer-add {
    clear: both;
    position: relative;
    margin: 20px -20px -20px;
    padding: 20px;
    background: #46be8a;
}
.chat-body .answer-add input {
    border: none;
    background: none;
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    padding: 0;
    color: #ffffff;
}
.chat input {
    -webkit-appearance: none;
    border-radius: 0;
}
.chat-body .answer-add .answer-btn-1 {
    background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-40.png") 50% 50% no-repeat;
    right: 56px;
}
.chat-body .answer-add .answer-btn {
    display: block;
    cursor: pointer;
    width: 36px;
    height: 36px;
    position: absolute;
    top: 50%;
    margin-top: -18px;
}
.chat-body .answer-add .answer-btn-2 {
    background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-41.png") 50% 50% no-repeat;
    right: 20px;
}
.chat input::-webkit-input-placeholder {
    color: #fff;
}

.chat input:-moz-placeholder { /* Firefox 18- */
    color: #fff;
}

.chat input::-moz-placeholder {  /* Firefox 19+ */
    color: #fff;
}

.chat input:-ms-input-placeholder {
    color: #fff;
}
.chat input {
    -webkit-appearance: none;
    border-radius: 0;
}


.chat-body .answer.left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.chat-body .avatar {
    display: flex;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}
.chat-body .answer.left .time {
    margin-left: 0;
}
.chat-body .answer.right {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px;
}
.chat_box {
    padding: 40px;
}
td .open>.dropdown-menu {
    display: flex;
    flex-direction: column;
    min-width: 100%;
    position: relative;
}



/* +++++++++++++++++++
CUSTOMER DASHBOARD STYLING
++++++++++++++++++++++
*/
.customer_dashboard .number_card {
    flex-basis: 24%;
}

/*.customer_dashboard.customer_dashboard_new .number_card {*/
/*    flex-basis: 32%;*/
/*}*/

.warehouse_cards .card_content p{
    display: flex;
    justify-content: space-between;
}

/* CHANGE PASSWORD STYLING */
.password_btn button{
    width: 100%;
}

/* REQUEST NEW ORDER PAGE */
.uplaod_pdf_box {
    position: relative;
}
.upload_pdf {
    position: absolute;
    width: 120px;
    height: 100%;
    opacity: 0;
}

/* DASHBOARD AUTOS STYLING */
.autos .number_card {
    flex-basis: 49%;
}
.btn-group button{
    padding: 8px 25px;
    border-radius: 10px;
    font-family: var(--ff-rajdhani);
    font-weight: var(--fw-semibold);
}

/* SIGNUP STYLING */
.signup_block {
    width: 60%;
    margin: 0 auto;
    border: 1px solid lightgray;
    padding: 50px 80px;
    margin-top: 20px;
    border-radius: 10px;
}
.uplaod_file {
    position: relative;
}
.uplaod_file input{
    position: absolute;
    opacity: 0;
}
.uploadfile_label {
    border: 1px solid #e5ebec;
    display: block;
    padding: 15px 15px;
    height: 100%;
    vertical-align: middle;
    font-family: var(--ff-rajdhani);
    font-size: 18px;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.signup_icons a i{
    margin: 0px 5px;
    width: 35px !important;
    height: 35px;
    padding: 10px;
    border-radius: 50%;
    color: white;
    background: black;
}
.signup_icons a i:hover{
    box-shadow: 0px 0px 0px 0.2rem #0000008c;
}


.login-register {
    background-image: url(../images/bg.png) !important;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
}
.app-search .form-control{
    border:none !important;
}

.view_form .white-box .table>tbody>tr>th, .view_form .white-box .table>tbody>tr>td {
    text-align: left;
    border: 1px solid #e5ebec;

}

.form-horizontal  .form-group .cus_checkbox label { padding-left: 35px; }
.form-horizontal  .form-group .cus_checkbox label::before { margin: 0; }
.form-horizontal  .form-group .cus_checkbox input[type=checkbox]:checked+label::before { background-color: var(--primary_black_262626); }
.form-horizontal  .form-group .cus_checkbox label::before { left: 0; } .checkbox label::before { border-color: var(--primary_black_262626); }
.form-horizontal  .form-group .cus_checkbox input[type=checkbox]:checked+label::after { margin: 0; margin-left: 5px; font-size: 12px; }
.form-horizontal  .form-group .cus_checkbox { padding-left: 0px; }
.form-horizontal  .form-group .checkboxes_box {  display: flex;  column-gap: 20px;}
.msg_feild>span {color: red;font-weight: bold;margin-bottom: 15px;display: inline-block;font-size: 12px;  }
.status_more_Fields .add_field_button { margin-bottom: 10px; }
.status_more_Fields .Custom_upload {
    display: flex;
    align-items: center;
    column-gap: 10px;
    flex-direction: column;
}
.status_more_Fields .upload_input_box { flex: 1; position: relative; }
.status_more_Fields .upload_input_box input[type=file] { position: absolute; width: 100%; height: 100% !important; top: 0; opacity: 0; z-index: q; font-size: 0px; cursor: pointer; }
.form-group.status_more_Fields {   margin-bottom: 10px;}

.terminal_panel_custom .tab-content {margin-top: 85px;}
.terminal_panel_custom .tab-content .tab-pane .inner_section_image {width: 100%; margin-bottom: 25px;}
.terminal_panel_custom .tab-content .tab-pane .inner_section_image img {width: 100%; min-height: 410px; object-fit: cover; object-position: center;}

.terminal_panel_custom table th {
    width: 25%;
}

.terminal_panel_custom table th, .terminal_panel_custom table td {
    font-size: 20px !important;
}

table tbody tr td:last-child .dropdown .dropdown-menu {position: absolute; right: 0; width: 180px; min-width: 180px; left: 0;}
table tbody tr:last-child td:last-child .dropdown .dropdown-menu{bottom: 0; top: unset;}
table tbody tr:first-child td:last-child .dropdown .dropdown-menu {bottom: unset;overflow: visible;}
table tbody tr:first-child td:last-child .dropdown{ width: 180px;}

.Custom_upload { flex-direction: column;     align-items: flex-start !important;}
.Custom_upload label { background: black; color: white;  padding: 10px 30px; border-radius: 10px;}
.Custom_upload #image-container { width: 100%; display: flex; flex-wrap: wrap;  gap: 1rem;}
.Custom_upload #image-container>div { position: relative; width: 49%; height: 230px; justify-content: center;}
.Custom_upload #image-container>div button { position: absolute; top: 20px; right: 20px; background: white; color: black; border-radius: 50%; border: 0 !important; opacity: 0; transition: ease 500ms;}
.Custom_upload #image-container>div:hover:before { content: ''; background: #0000005e; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0;}
.Custom_upload #image-container>div:hover>button { opacity: 1; transition: ease 500ms;}






/*Zaffer*/
div#image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.modal-header .close {
    margin-top: -2px;
    border: 0!important;
    padding: 10px;
    color: black!important;
    background: none!important;
}
.modal-header .close > span {
    font-size: 27px;
    line-height: 0;
}
.Custom_upload #image-container>div>img {
    object-position: center;
    object-fit: contain;
    height: 100%;
    width: 80%;
}
.Custom_upload .z.upload_text_input {
    width: 40%;
    height: 50px;
    border-radius: 10px;
    background: #727578;
    padding: 10px 16px;
    border: 1px solid #b8b8b8;
    box-shadow: 6px 7px 10px -4px;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.status_more_Fields .Custom_upload {
    display: flex;
    align-items: center!important;
    column-gap: 10px;
    flex-direction: column;
    justify-content: center;
}
.checkbox_wapper  , .radiokbox_wapper {
    display: flex;
    column-gap: 20px;
    justify-content: start;
    flex-wrap: wrap;
}


.form_sec .container-fluid {
    padding: 25px !important;
}
.form_sec  .form-horizontal .form-group {
    margin: 0;
    margin-bottom: 15px;
}

.form_sec  .form-horizontal .form-group label {
    margin-bottom: 10px;
}

input[type=submit]:hover {background: #231F52;color: #fff;}
input[type=submit] {background: #fff;}
a.btn.btn-success.pull-right:hover {background: #231F52 !important;opacity:1;}
.custom_filter {position: relative;}
.custom_filter .custom_filter_box { padding: 20px; border-radius: 10px; margin-top: 10px; }
/*.custom_filter .custom_filter_box .form-group:last-child { margin-bottom: 0px; }*/
.custom_filter .custom_filter_box .form-group .btn.btn_black { padding: 13px 20px; font-size: 15px; }
.custom_filter .custom_filter_box .form-group .form-control { box-shadow: 0 8px 33px rgb(0 0 0 / 4%); border: none; border-radius: 10px; color: #9B9B9B; font-size: 18px; line-height: 24px; padding: 10px 20px; padding: 13px; height: unset; font-size: 15px; }
.custom_filter .custom_filter_box {display: flex;flex-direction: column;row-gap: 10px;padding: 20px;box-shadow: 0 8px 14px rgb(0 0 0 / 8%) !important;border-radius: 10px;/* left: -82px; */margin-top: 10px;width: 300px;position: absolute;right: 0;z-index: 1;background-color: white;/* border: 1px solid #333333; */}


.page-wrapper .btn.btn-success.pull-right:hover i {
    color: white;
}

.page-wrapper .btn.btn-success.pull-right i {
    margin-right: 5px;
    font-size: 12px;
}
.announcement_box .card-body {width: 100%;}
.btn_duplicate i {color: white;font-size: 14px;}
.btn_duplicate {line-height: 0px;padding: 10px;margin-top:30px ;}
.shipping_rates_sec .table>tbody>tr>td.main_text{width: 250px;vertical-align: top;text-align: left;}
.shipping_rates_sec .table>tbody>tr>td.no_edit {width: 200px;}
.shipping_rates_sec .select2-container-multi { margin: 0 auto;display: block; height: fit-content; padding: 0px !important;margin-top: 5px; }
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice{background-color: #231F52;}
.shipping_rates_sec form>.row {display: flex;align-items: end;}


.table>tbody>tr>td.customer_notes_content { width: 200px; word-break: break-all; max-width: 200px; white-space: normal; }


.page-wrapper .table-responsive {overflow:  scroll;}
.page-wrapper .table-responsive {scrollbar-width: auto;scrollbar-color: #262626 #ffffff;}
.page-wrapper .table-responsive::-webkit-scrollbar {width: 8px;height:8px;}
.page-wrapper .table-responsive::-webkit-scrollbar-thumb {background-color: var(--light_blue_topbar);border-radius: 10px;}
/*.shipping_rates_sec .table>tbody>tr th {width: 200px;}*/
.shipping_rates_sec .table>tbody>tr>th.no_edit {width: 75px;}

.product_detail_sec {padding: 25px;}
.product_detail_sec .table>tbody>tr>th , .product_detail_sec .table>tbody>tr>td {text-align: left;border: 1px solid #e5ebec;}
.product_detail_sec .form-horizontal .form-group {margin-left: 0px;margin-right: 0px;}
.product_detail_sec .form-horizontal .form-group .form-control { background-color: var(--input_bg_F8F8F8); border-radius: 10px; padding: 25px 18px; }
.product_detail_sec .form-horizontal .form-group input.form-control { height: 45px; }
.product_detail_sec .gallery_boxs .gallery_box{width: 100%;height: 100px;margin-bottom: 10px;display: block;}
.product_detail_sec .gallery_boxs .gallery_box img {width: 100%;height: 100%;object-fit: contain;padding: 10px;}
.product_detail_sec .table>tbody>tr>th {width: fit-content;white-space: nowrap;}
/*.product_detail_sec .table>tbody>tr>td {width: 100%;}*/
.product_detail_sec .table>tbody>tr>td.calendar_wrapper  { vertical-align: text-bottom; width: 40%;}
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar .fc-toolbar .fc-left { display: none;}
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar .fc-toolbar .fc-right { display: none;}
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar .fc-scroller {height: auto !important;}
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar .fc-toolbar  td.fc-day-number {border: 1px solid #0000;}
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar .fc-toolbar  td.fc-day-number.fc-mon.fc-future {  border: 1px solid #0000;}
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar .fc-toolbar .fc-row.fc-widget-header {    margin: 0px !important;   }
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar .fc-view-container   th, .product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar .fc-view-container   td {   border: 1px solid #000; background:white;     color: #000;height: unset;}
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar  thead {padding: 0px;border: none;background-color: unset;border-radius: unset;}
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar .fc-basic-view .fc-body .fc-row {min-height: unset;    height: unset !important;}
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar  .fc-row .fc-content-skeleton {padding: 0px;}
.fc-basic-view td.fc-week-number span, .fc-basic-view td.fc-day-number {padding: 5px;}
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar  .fc-day-header {padding: 5px;}
.product_detail_sec .table>tbody>tr>td.calendar_lable div{display:block;background:#F1F1F1;border:#F1F1F1 1px solid;padding: 5px;border-radius: 4px;margin:0 0 5px 0;font-size: 13px;line-height: 1;}
.product_detail_sec .table>tbody>tr>td.calendar_lable .active{ border:red 1px solid !important; cursor:pointer; }
.product_detail_sec .table>tbody>tr>td.calendar_lable .purchased{ background:#666; border:#666 1px solid; color:#fff; cursor:pointer; }
.product_detail_sec .table>tbody>tr>td.calendar_lable .paid{ border:#080 1px solid; background:#080; color:#fff; cursor:pointer; }
.product_detail_sec .table>tbody>tr>td.calendar_lable .leftAuction{ border:#00f 1px solid; background:#00f; color:#fff; cursor:pointer; }
.product_detail_sec .table>tbody>tr>td p {margin-bottom: 15px;}
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar .fc-view-container td.fc-state-highlight {background-color: #080;color: white;}
/*#status_label{padding: 4px 18px 6px !important; font-size: 12px;}*/
.product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar  thead td.fc-widget-header {padding: 0PX;}


body .sidebar-nav ul#side-menu li a i {color: white;font-size: 18px;}
body .sidebar-nav ul#side-menu li a {padding: 14px 20px;font-weight: var(--fw-semibold);}


.navbar-top-links.navbar-left { display: flex; align-items: center; column-gap: 20px; justify-content: start; }
.navbar-top-links.navbar-left .search_bar_div { margin: 0px; }

.custom_filter .custom_filter_btn {background: var(--white_ffffff); color: var(--black_3D3D3D); border-radius: 10px; font-size: var(--fs-18); font-weight: var(--fw-semibold); border: 1px solid var(--input_border_E5E5E5) !important; padding: 7px 25px; font-family: var(--ff-rajdhani);}
/*.custom_filter.order_filter .custom_filter_box .close-btn {position: absolute;width: 30px;height: 30px;padding: 0px;top: -10px;right: -10px;border-radius: 5px;border: 1px solid #B9B9B9 !important;}*/
/*.custom_filter.order_filter .custom_filter_box .close-btn i { font-size: 13px; }*/

.custom_filter .custom_filter_box {border: 1px solid #B9B9B9;background-color: #F7F7F7;box-shadow: none !important;margin-top: 0px;box-shadow: 0px 0px 0px black;right: 0px;}
.custom_filter .custom_filter_box .form-group .form-control {height: 45px;padding: 10px 0px;border-radius: 5px;box-shadow: none;}
.custom_filter .custom_filter_box .form-group .form-control {border: 1px solid #959595 !important;color: #4A4A4A;font-size: 14px;}
.custom_filter.order_filter .custom_filter_box {width:550px;}
.custom_filter.order_filter .custom_filter_box .form-group.date_input { display: flex; align-items:center; column-gap:10px; }
.custom_filter.order_filter .custom_filter_box .form-group.date_input input { flex: 1; }
.custom_filter.order_filter .custom_filter_box .form-group.date_input label { font-family: var(--ff-rajdhani); font-size: var(--fs-16); color: var(--black_3D3D3D); font-weight: var(--fw-semibold); margin: 0px; }


body {zoom: 80%;min-height: 125vh;position: relative;color: var(--primary_black_262626)}
#wrapper {min-height: 125vh;}
.navbar .logo b {display: none;}
.mini-sidebar .logo b {display: block;}
.mini-sidebar .logo b img {width: 100%;height: 100%;object-fit: contain;object-position: center;}
.mini-sidebar .topnavbar {height: 100px;}


.mini-sidebar .sidebar-nav #side-menu>li:hover>a {   border-radius: 0px;}
.mini-sidebar .sidebar-nav #side-menu .sub_menu_link>a:after {display: none;}
.mini-sidebar .sidebar-nav #side-menu>li:hover>a i{ color: var(--primary_black_262626);}
.mini-sidebar .sidebar-nav #side-menu>li:hover>a .hide-menu {color: var(--primary_black_262626);}
.mini-sidebar .sidebar {padding-top: 100px;}
.top_users .table>tbody>tr>td .user_img {width: 60px;height: 60px;object-fit: cover;object-position: center;border-radius: 50%;}

.navbar-default .navbar-header .navbar-top-links .profile .dropdown-menu { border-radius: 10px; background-color:var(--white_ffffff); padding: 10px 15px; box-shadow: 0px 5px 25px var(--box-shadow_clr); }
.navbar-default .navbar-header .navbar-top-links .dropdown-menu li i { margin-top: 0px; color: var(--primary_black_262626); }
.navbar-default .navbar-header .navbar-top-links .dropdown-menu li a { color: var(--primary_black_262626); }
.navbar-default .navbar-header .navbar-top-links .dropdown-menu li a:hover { background-color: transparent; }
.navbar-default .navbar-header .profile .profile-image { border-radius: 50%; overflow: hidden; width: 60px; height: 60px; border: 2px solid var(--primary_black_262626); }
.navbar-default .navbar-header .profile .profile-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.navbar-default .navbar-header .profile .profile-image span { background: unset; display: block; width: 100%; height: 100%; right: 0; padding: 0; }
.navbar-default .navbar-header .profile .profile-image span i { display: none; }
.navbar-default .navbar-header .profile .dropdown.user-pro-body { display: flex; align-items: center; justify-content: center; column-gap: 20px; }
.navbar-default .navbar-header .profile .profile-text { font-size: 22px; margin: 0; color:#fff; font-weight: var(--fw-medium); }
.navbar-default .navbar-header .profile .profile-text a { color: var(--primary_black_262626); }
#side-menu ul>li>a:hover, .mini-sidebar .sidebar-nav #side-menu>li:hover>a i, .sidebar-nav ul#side-menu li a.active i{color: var(--primary_black_262626);}


body #side-menu ul>li>a:hover, body.mini-sidebar .sidebar-nav #side-menu>li:hover>a i, body .sidebar-nav ul#side-menu li a.active i{color: var(--primary_black_262626);  }
.sidebar-nav ul#side-menu li.active {background-color: #fff;color: var(--primary_black_262626);border-radius: 0px;}
.sidebar-nav ul#side-menu li.active span , .sidebar-nav ul#side-menu li.active i{color: #fff;}
.sidebar {padding-top: 100px;}
.mini-sidebar .sidebar-nav #side-menu li:hover a.active .hide-menu {display: inline;}
.sidebar-nav ul#side-menu li.active>a>span {color: #231F52;}
.sidebar-nav ul#side-menu li.sub_menu_link.active {background: #231F52;}
.sidebar-nav ul#side-menu li.sub_menu_link.active a>span {color: #fff;}
.sidebar-nav ul#side-menu li.sub_menu_link.active a>.link_icon img {filter: brightness(0) invert(1);}
body .sidebar-nav ul#side-menu li a {color: #fff;}
body .sidebar-nav ul#side-menu li a.active{color: var(--primary_black_262626);}
body .sidebar-nav ul#side-menu li.active  a::after {color: var(--primary_black_262626);}
body .sidebar-nav #side-menu .sub_menu_link.active>a:after {color: #fff;}
.table>tbody>tr>td .user_img {width: 60px;height: 60px;object-fit: cover;object-position: center;border-radius: 50%;}
.custom_filter .custom_filter_box .close-btn {background-color: var(--primary_black_262626);color: var(--white_ffffff);}
.dataTables_wrapper .dataTables_filter label { border: 1px solid var(--input_border_E5E5E5); height: 55px; display: flex; align-items: center; width: 400px; border-radius: 10px; background: var(--white_ffffff); padding: 0 15px; font-family: "Rajdhani"; font-size: 16px; color: var(--primary_black_262626); font-weight: var(--fw-semibold); }
.dataTables_wrapper .dataTables_filter input { border: none; background: 0 0; box-shadow: none; width: 180px; padding: 6px 7px; display: inline-block; flex: 1; font-family: "Rajdhani"; color: var(--primary_black_262626) ; font-weight: var(--fw-semibold); height: 100%; }
table tbody tr:last-child td:last-child .dropdown .dropdown-menu .btn {border: none !important;background-color: transparent;font-size: 14px;}
.page-wrapper .btn.active {background: #231F52;}
.page-wrapper .table>tbody>tr>td span.label {line-height: 1.4;font-size: 13px;padding: 5px 10px;}
.page-wrapper .table>tbody>tr>td .dropdown .dropdown-menu .btn {border: none !important;background-color: transparent;font-size: 14px;}
.page-wrapper .table>tbody>tr>td .dropdown .dropdown-menu .btn:hover{text-decoration:none;}
.page-wrapper .table>thead>tr>th , .page-wrapper table>thead>tr>td ,  .page-wrapper  .table>tbody>tr>td  ,   .page-wrapper  .table>tbody>tr>th {border: none;padding: 18px 10px;line-height: 1.6;text-align: left;color: black;}
.table>thead {background-color:#231F52;padding: 10px 20px;border-radius: 10px;border: none;}
.table>tbody>tr:nth-of-type(odd){background-color: rgba(35, 31, 82, 0.10);border-radius: 10px;}
.table>thead>tr>th:first-child ,  .table>thead>tr>td:first-child {border-radius: 10px 0 0 10px;}
.table>thead>tr>th:last-child ,  .table>thead>tr>td:last-child {border-radius: 0 10px 10px 0;}
.table>tbody>tr>td:first-child ,  .table>tbody>tr>td:first-child  {border-radius: 10px 0 0 10px;}
.table>tbody>tr>td:last-child , .table>tbody>tr>td:last-child {border-radius: 0 10px 10px 0;}
.page-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current,.page-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover ,.page-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:hover{background: #231F52 !important;border-color: #231F52 !important;color: #fff !important;}
.page-wrapper .white-box  .dataTables_wrapper table.dataTable , .page-wrapper  .table{border: none;}
.sidebar-nav ul#side-menu li.sub_menu_link.active li.sub_menu_link.active {background: #231F52;}
.sidebar-nav ul#side-menu li.sub_menu_link.active li.sub_menu_link>a::after {color: #fff;}
.sidebar-nav ul#side-menu li.sub_menu_link.active li.active a.waves-effect.active span {color: #231F52;}
.modal .modal-dialog {width: 1000px;}
.announcement_box marquee {display: flex;align-items: center;justify-content: center;}
.announcement_box marquee .marque_text {display: flex;gap: 30px; align-items: center;justify-content: space-between;}


.dataTables_wrapper .dataTables_length { margin: 0px; height: 55px; display: flex; align-items: center; }
.dataTables_wrapper .dataTables_length label select { border: 1px solid var(--input_border_E5E5E5); border-radius: 10px; background: var(--white_ffffff); font-family: "Rajdhani"; font-size: 16px; color: gray; font-weight: var(--fw-semibold); padding: 10px 15px; margin: 0px 5px; }
.dataTables_wrapper .dataTables_length label { margin: 0px; font-family: "Rajdhani"; font-size: 16px; color: var(--primary_black_262626); font-weight: var(--fw-semibold); }

.form_sec   .pdf_type_box{display:flex;column-gap:30px;align-items:center;}
.form_sec  .pdf_type_box .Custom_upload .upload_text_input {margin: 0px;vertical-align: baseline;display: inline;}
.form-horizontal .form-group label  { color: var(--primary_black_262626);margin-bottom: 10px;font-size: var(--fs-16);font-weight: var(--fw-semibold);}
.form-horizontal label.col-sm-2.control-label  , .form-horizontal .form-group label.col-md-4.control-label { width: 100%; text-align: left; }
.form-horizontal .form-group .col-sm-10 { width: 100%; }
.form-horizontal .form-group .col-sm-10 .form-control {border-radius: 10px;height: 45px;background-color: var(--input_bg_F8F8F8);}
.page-wrapper .white-box #rootwizard  .pager.wizard { text-align: left; padding-left: 5px; padding-right: 5px; }
.page-wrapper .white-box #rootwizard .nav.nav-tabs { display: none; }
.form-horizontal .form-group span {font-size: 14px;}
.form-horizontal .form-group   .help-block {font-size: 14px;color: red;}

.form-horizontal button[type="submit"] { border-radius: 10px ; font-weight: var(--fw-semibold) ; font-family: var(--ff-rajdhani) ; padding-inline: var(--p-60); font-size: var(--fs-button); color: var(--white_ffffff); background-color: var(--primary_black_262626) ; }
.form-horizontal .form-group  label { color: var(--primary_black_262626);    margin-bottom: 8px; }
.form-horizontal .form-group .fileinput .thumbnail  { width: 200px; height: 200px; border-radius: 10px; background-color: var(--input_bg_F8F8F8); margin-bottom: 20px; }
.form-horizontal .form-group .fileinput .thumbnail img { width: 200px; height: 200px; object-fit:contain; }
.page-wrapper .box-title.pull-left { font-size: var(--fs-title) ; font-family: var(--ff-rajdhani); font-weight: var(--fw-bold) ; }

.form-horizontal .form-group .select2 .select2-choices { min-height: unset; border-radius: 10px !IMPORTANT; background-color: var(--input_bg_F8F8F8); height: 45px !important; border: 1px solid #e5ebec !important; }
.form-horizontal .form-group .select2 .select2-choices input { height: 100%; padding: 7px 12px; font-family: "Rajdhani"; font-weight: var(--fw-semibold); }
.form-horizontal .form-group  .select2-container-multi .select2-choices li { line-height: unset; height: 100%; }

.form-horizontal .form-group .fileinput span.btn.btn-default.btn-file { background: var(--white_ffffff); color: var(--black_3D3D3D); border-radius: 10px; font-size: var(--fs-18); font-weight: var(--fw-semibold); border: 1px solid var(--input_border_E5E5E5) !important; padding: 7px 25px; font-family: var(--ff-rajdhani); }
.form-horizontal .form-group .fileinput .btn { border-radius: 10px; font-size: var(--fs-18); font-weight: var(--fw-semibold); border: 1px solid var(--input_border_E5E5E5) !important; padding: 7px 25px; font-family: var(--ff-rajdhani); }
.form-horizontal .form-group textarea {
    border-radius: 10px;
    background-color: var(--input_bg_F8F8F8);
    box-shadow: none;
    color: #565656;
    max-width: 100%;
    transition: all 300ms linear 0s;
}
.form-horizontal .form-group select.form-control  , .form-horizontal .form-group input.form-control {
    height: 50px ;
    background-color: var(--input_bg_F8F8F8) ;
    border-radius: 10px
}


body .ui-datepicker { background-color: var(--light_blue_topbar); border-radius: 0px; padding: 10px; }
body .ui-datepicker .ui-datepicker-header { background: transparent; border: none; }
body .ui-datepicker td { padding: 0px; margin: 0px; height: unset; background: var(--light_blue_topbar); color: var(--primary_black_262626); }
body .ui-datepicker td span, body  .ui-datepicker td a {background: var(--light_blue_topbar);}
body .ui-datepicker  table thead th:first-child  , body .ui-datepicker  table thead td:first-child { border-radius: 0px; }
body .ui-datepicker  table thead th:last-child  , body .ui-datepicker  table thead td:last-child { border-radius: 0px; }
body .ui-widget-header a { color: var(--primary_black_262626); }
body .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { filter: brightness(0.1); }


body .ui-datepicker .ui-state-default.ui-state-highlight , body .ui-datepicker  .ui-state-highligh , body   .ui-datepicker .ui-state-highlight, body .ui-datepicker .ui-state-default:hover{ background: var(--primary_black_262626); color: var(--white_ffffff); border-color: var(--primary_black_262626); }
body .ui-datepicker.ui-state-default,  body .ui-datepicker .ui-state-default { background: var(--light_blue_topbar); color: var(--primary_black_262626); }
body .ui-datepicker .ui-datepicker-title select { padding: 5px; }

.form-horizontal .form-group .info_msg {margin: 10px  0px; color: red;}
.form-horizontal .form-group .info_msg i {margin-right: 5px;}

.calendar_table.table>tbody>tr , .calendar_table.table>tbody>tr:nth-of-type(odd) {
    background-color: #ffffff;
    border-radius: 10px;
}

.product_detail_sec .fc-basic-view td.fc-week-number span,  .product_detail_sec .fc-basic-view td.fc-day-number , .product_detail_sec .table>tbody>tr>td.calendar_wrapper #product_calendar .fc-day-header {
    padding: 10px;
    font-size:16px !important;
}
/*.custom_table_scroll {overflow-y: hidden;overflow-x: auto;width: 100%;margin-bottom: 10px;}*/


.modal { padding: 0px !important; }
.modal .modal-body .form-horizontal  .form-group { margin-left: 0px; margin-right: 0px; }
.modal .modal-header .close { opacity: 1; display: inline-block; margin: 0px;}
.modal .modal-body, .modal .modal-header, .modal .modal-footer{ padding: 25px; }
.modal .modal-footer{text-align: center;border: 0px;}
.modal  .modal-content { border-radius: 10px; }
.modal .modal-header .modal-title { line-height: 1.6; font-size: var(--fs-24); vertical-align: middle; display: inline-block; }
.modal-header .close  span { line-height: 0; vertical-align:middle; }
.modal-open:before { content: ''; width: 100%; height: 100%; background-color: black; position: absolute;top: 0;left: 0; opacity: 0.5;     z-index: 1002;}
.modal .modal-content {box-shadow: 10px 10px 30px 10px rgb(0 0 0 / 30%);width: 100%;}
.mini-sidebar .sidebar-nav ul#side-menu li.active {background-color: var(--light_blue_topbar);width: 60px;}
.mini-sidebar .sidebar-nav ul#side-menu li.active:hover {    width: 265px;}
.mini-sidebar .sidebar-nav ul#side-menu li.active:hover a {width: 265px;}


.navbar-default .navbar-header .profile .dropdown.user-pro-body .dropdown-toggle {display: flex;align-items: center;column-gap: 10px;}
.navbar-default .navbar-header .profile .profile-text i {font-size: 20px;color:#fff;margin: 0px 10px;}
.navbar-default .navbar-header .profile .dropdown.user-pro-body.open>a, .navbar-default .navbar-header .profile .dropdown.user-pro-body .open>a:focus, .navbar-default .navbar-header .profile .dropdown.user-pro-body>a:hover {background-color: transparent;}

.page-wrapper .table>tbody>tr>td .dropdown .dropdown-menu .btn , .page-wrapper .table>tbody>tr>td .dropdown .dropdown-menu a {color: black;}

.modal .modal-dialog { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-height: calc(100% - (0.5rem * 2)); margin: 0 auto; padding: 50px 0px; }

.sidebar-nav ul#side-menu li.active>span, .sidebar-nav ul#side-menu li.active>i {color: var(--primary_black_262626);}
/*.sidebar-nav li a span {color: #8d9498;}*/
/*body .sidebar-nav ul#side-menu li a i {color: #8d9498;}*/

.form-horizontal .form-group .dropzone {margin-bottom: 15px;}
.sidebar-nav #side-menu .sub_menu_link li  a span {color: #8d9498;}
/*.sidebar-nav ul#side-menu li.active a>span, .sidebar-nav ul#side-menu li.active a>i{color: black;}*/
.sidebar .sidebar-nav ul#side-menu li a{height: 60px;}
.sidebar .sidebar-nav ul#side-menu li a{display: flex;column-gap: 8px;align-items: center;height: 100%;}
.sidebar .sidebar-nav ul#side-menu li a .link_icon { width: 18px; height: 18px; display: inherit; }
.sidebar .sidebar-nav ul#side-menu li a .link_icon img { width: 100%; height: 100%; object-fit: contain; object-position: top;vertical-align: unset;filter: brightness(0) invert(1);}
body .sidebar-nav ul#side-menu li.active>a  .link_icon img {filter: unset;}
.mini-sidebar .sidebar-nav #side-menu>li:hover a span.hide-menu {display: block;}
.mini-sidebar .sidebar-nav ul#side-menu li.active:hover  ul.collapse.submenu.in li {width: 100%;}
.mini-sidebar .sidebar-nav #side-menu>li:hover>a .link_icon img {filter: unset;}
#wrapper .warehouse_cards .owl-item {padding: 20px 0px;}
#wrapper .warehouse_cards .panel-heading {font-size: var(--fs-title) ;font-family: var(--ff-rajdhani);font-weight: var(--fw-bold) ;padding: 0px;}
.page-wrapper .table-responsive {
    /*max-height: 770px;*/
    overflow: auto;
    touch-action: pan-x;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {font-family: "Rajdhani";font-size: 16px;color: var(--primary_black_262626);font-weight: var(--fw-semibold);}
#wrapper .warehouse_cards .owl-nav div { text-transform: capitalize; color: var(--white_ffffff); background-color: var(--primary_black_262626) ; padding: 10px 25px; margin-bottom: 16px; border-radius: 10px; font-weight: var(--fw-semibold); font-family: var(--ff-rajdhani); }



.custom_table_scroll {
    overflow-y: hidden;
    overflow-x: auto;
    height: 550px;
    overflow: auto;
    width: 100%;
    margin-bottom: 10px;
}
.custom_table_scroll::-webkit-scrollbar {width: 8px;height:8px;}
.custom_table_scroll:-webkit-scrollbar-thumb {background-color: var(--light_blue_topbar);border-radius: 10px;}

.folder_sec .inner_section_folder_box {padding: 30px 20px; box-shadow: 0 8px 21px rgba(0,0,0,0.06); border-radius: 10px; margin-bottom: 30px;position: relative;}
.folder_sec .inner_section_folder_box .folder_dropdown { text-align: right; position: absolute; right: 20px; top: 20px; }
.folder_sec .inner_section_folder_box .folder_dropdown button { background: unset; padding: 0; border: none !important; line-height: unset; }
.folder_sec .inner_section_folder_box .folder_dropdown button:focus{box-shadow: none;}
.folder_sec .inner_section_folder_box .folder_dropdown button i {color: var(--primary_black_262626)  ; font-size: 18px;}
.folder_sec .inner_section_folder_box .folder_title h4 {margin-bottom: 0; margin-left: 8px;}
.folder_sec .inner_section_folder_box .folder_dropdown .dropdown.open .dropdown-menu {display: flex;flex-direction: column;justify-content: center;text-align: center;padding: 10px;border-radius: 10px;left: unset;right: 0;min-width: 130px;}
.folder_sec .inner_section_folder_box .folder_dropdown .dropdown-menu .dropdown-item {padding: 4px 0;font-family: var(--ff-rajdhani);font-weight: var(--fw-medium);border: none !important;color: var(--primary_black_262626) !important;font-size: 16px;}
.folder_sec .inner_section_folder_box .folder_icon { width: 100px; margin-bottom: 15px; }
.folder_sec .inner_section_folder_box .folder_icon img { width: 100%; ob: inherit; height: 100%; object-fit: contain;    filter: brightness(0) }
.counter{
    border-radius: 50px;
    padding: 3px 8px;
}

.sidebar-nav li a  span.bg-danger {
    width: 25px;
    height: 25px;
    font-size: 13px;
    padding: 0px;
    display: inline-block;

    top: 1px;
    text-align: center;
    line-height: 25px;
}

.sidebar .sidebar-nav ul#side-menu li a {
    padding: 14px;
}

.sidebar-nav li a span {
    flex: 1;
}
.panel {box-shadow: unset !important;}
.detail_form_bar{ display: flex;justify-content: space-between;}
.detail_form_bar span {border: 1px solid black;padding: 10px;color: var(--primary_black_262626);font-size: 15px;font-weight: bold;}

.timelines .single_timeline { display: flex; gap: 20px; position: relative; }
.timelines .single_timeline:not(:last-child) { margin-bottom: 50px; }
.timelines .single_timeline:not(:last-child):before { content: ""; display: block; position: absolute; right: 0; top: 57px; left: 29px; width: 7px; height: 100%; background-image: url(../images/timeline_single_dot.png); background-size: contain; background-position: center; background-repeat-y: repeat; background-repeat-x: no-repeat; z-index: 10;}
.timelines .single_timeline .timeline_icon { background-color: var(--light_blue_topbar); width: 65px; height: 65px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; position: relative; z-index: 20; }
.timelines .single_timeline .title_date_wrapper { display: flex; justify-content: space-between; }
.timelines .timeline_content { width: 100%; }
.top_balancing{margin-right: 15px;}

.form_sec .form-horizontal .form-group label.upload_text_input.pdf {width: 50%;background: #231F52;color: #fff;}
.top_users .table-responsive {margin-top: 20px;}
/*recent_invoice*/
.recent_invoice hr.hr-line {display:none;}
.recent_invoice .table-responsive {width: 100%;margin-top: 30px;}
/*number-card*/
.number_cards_section .number_card {display:flex;flex-direction: row;align-items: center;flex: 1;justify-content: space-between;padding: 20px;border-radius: 10px;background: #231F52;box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);}
.number_cards_section .number_card hr.hr-line {display: none;}
.number_cards_section {justify-content: space-between;}
.number_cards_section .number_card p ,.number_cards_section .number_card h1.number {color: #fff;}
/*announcement_box*/
.announcement_box {margin-top: 20px;}
.announcement_box {display: flex;padding: 20px;align-items: center;gap: 40px;border-radius: 10px;background: #FFF;box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);}
.announcement_box hr {display: none;}
.announcement_box .card-headerr {gap: 10px;padding: 0;}
.announcement_box .card-headerr h5.title {color: #231F52;}
.add_btn a {background: #231F52;color: #fff;}
.table-responsive .table>thead>tr>th {color: #fff;}

/*owl-item*/
.number_cards_announcement .owl-item .item .number_card {border-radius: 10px;background: #FFF;box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);}
.number_cards_announcement .owl-item .item .number_card .card_content {padding: 10px;}
.number_cards_announcement .owl-item .item .number_card hr.hr-line {display: none;}
.number_cards_announcement .owl-item .item .number_card >p {border-bottom: 0.5px solid #999FA2;background: #231F52;display: flex;padding: 10px;flex-direction: column;justify-content: center;align-items: flex-start;gap: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;color: #fff;}

/*order-page*/
.container-fluid.show_container {padding: 30px !important;}
.owl-stage .number_card {border-radius: 10px;background: #FFF;    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);}
.owl-stage .number_card>p {background: #231F52;padding: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;color: #fff;}
.owl-stage .number_card hr.hr-line {display: none;}
.owl-stage .number_card .card_content {padding: 10px 0;display: flex;flex-direction: column;gap: 5px;}
p:has(.filter_value.active_filter) {background: #231F52;color: #fff;}
p.filter_value.active_filter {background: #231F52;color: #fff;}
.owl-stage .number_card .card_content p {padding: 0 10px;}
.order_box {border-radius: 10px;background: #FFF;box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);padding: 20px;}
.order_box hr {display: none;}
.order_box .table-responsive {margin-top: 25px;}
.order_box .header {justify-content: space-between;}
.custom_filter_box_fields {flex:1;display: flex;align-items: center;justify-content: flex-end;gap: 10px;width: 100%;}
.custom_filter_box_fields .select_item_fields {display: flex;align-items: center;justify-content: space-between;gap: 10px;}
.custom_filter_box_fields .select_item_fields .form-group { margin: 0;}
.custom_filter_box_fields .select_item_fields select {padding: 10px;border-radius: 4px;border: 0.5px solid #231F52 !important;color: #231F52;font-family: Rajdhani;font-size: 18px;font-weight: 600;line-height: normal;}
.custom_filter_box_fields .add_btn {display: flex;gap: 10px;align-items: center;}
.custom_filter_box_fields .add_btn button, .custom_filter_box_fields .add_btn a {text-transform: capitalize;color: #fff;background-color: #231F52;padding: 8px 20px;border-radius: 10px;font-weight: var(--fw-semibold);font-family: var(--ff-rajdhani);border: 0 !important;}
.custom_filter_box_fields .select_item_fields input {border-radius: 4px;border: 0.5px solid #231F52 !important;color: #231F52;font-family: Rajdhani;font-weight: 600;line-height: normal;}
.custom_filter_box_fields .select_item_fields input::placeholder {color: #231F52 !important;font-family: Rajdhani;font-size: 18px;font-weight: 600;line-height: normal;}

/*order-container*/
.order-container .pdf_icon {display: flex;align-items: center;justify-content: flex-start;gap: 15px;}
.order-container .pdf_icon .order-checkbox {appearance: none;-webkit-appearance: none;width: 20px;height: 20px;border-radius: 50%;border:3px solid #231F52;background-color: #FFF;position: relative;cursor: pointer;margin: 0 !important;}
.order-container .pdf_icon .order-checkbox:checked {background-color: #231F52; border-color: #231F52;}
.order-container .pdf_icon .order-checkbox:checked::after {content: '';display: block;width: 6px;height: 10px;border: solid white;border-width: 0 2px 2px 0;transform: rotate(45deg);position: absolute;top: 1px;left: 4px;}
.order-container .accordion-content input {border: 0.5px solid #BDBDBD;background: #FFF;box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.02);padding: 8px;color: #4A4A4A;font-style: normal;font-weight: 500;line-height: 1.2;width: 100%;}
.order-container .accordion-content input:first-child {border-radius: 4px 4px 0px 0px;}
.order-container .accordion-content input:last-child{    border-radius: 0px 0px 4px 4px;background: #231F52;color: #fff;border: 0;}
.customer_img img {background: #D9D9D9;width: 76px;height: 76px;object-fit: contain;}
.customer_img {display: flex;align-items: center;justify-content: center;}
.form-group.customer_info.row .customer-btn a.btn i.icon-plus {color: #fff;}
.form-group.customer_info.row .customer-btn a.btn {display: flex;padding: 10px 20px;justify-content: center;align-items: center;gap: 10px;border-radius: 4px;background: #231F52;box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.05);color: #FFF;font-size: 14px;font-weight: 600;line-height: 1.2;}
.form-group.customer_info.row .form-group.balance_value{display: flex;flex-direction: column;}
.form-group.customer_info.row {border-radius: 10px;border: 0.5px solid #DBDBDB; margin: 0;padding: 20px 0 0 0;margin-bottom: 20px;}
.form-group.customer_info .add_customers_fields,.form-group.customer_info .history_table {display: none;}
.form-group.customer_info .add_customers_fields.show, .form-group.customer_info .history_table.show {display: block;}
.form-group.customer_info h5.customer_names{font-size: 15px;}
.box_white .table-responsive ,.box_whites {border-radius: 10px;background: #FFF;box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);padding: 15px;}
.box_whites .gallery_boxs ,.box_whites .timelines{height: 260px;overflow-y: scroll;overflow-x: hidden;width: 100%;margin-top: 20px;}
.add_customers_fields , .history_table ,.customer_info{display: none;}
body:has(.credit_plus.show) .add_customers_fields {display: block;}
body:has(.history_icon.show) .history_table {display: block;}


.dashboard-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    flex: 1;
    min-width: 450px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-content {
    z-index: 2;
}

.card-header {
    margin-bottom: 10px;
}

.card-title {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin: 5px 0;
}

.card-icon {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: inherit;
    z-index: 1;
    transition: all 0.3s ease;
}

.card-icon i{
    opacity: 0.1;
    font-size: 50px;
}


.stat-card:hover .card-icon {
    opacity: 0.3;
    transform: scale(1.1);
}

/* Individual Card Colors */
.pol-card {
    border-left: 4px solid #231F52;
    color: #3498db;
}

.ports-card {
    border-left: 4px solid #231F52;
    color: #2ecc71;
}

.users-card {
    border-left: 4px solid #231F52;
    color: #9b59b6;
}

.dispatched-card {
    border-left: 4px solid #231F52;
    color: #e74c3c;
}

.loaded-card {
    border-left: 4px solid #231F52;
    color: #f39c12;
}

@media (max-width: 768px) {
    .stat-card {
        min-width: 100%;
    }
}

.activities-feed {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    height: 395px;
    overflow-y: scroll;
}

.activities-header h3 {
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.activities-header h3 i {
    margin-right: 10px;
    color: #3498db;
}

.activity-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    align-items: flex-start;
}

.activity-icon {
    margin-right: 15px;
    font-size: 10px;
    color: #7f8c8d;
}

.activity-icon i{
    font-size: 24px !important;
}

.activity-details {
    flex: 1;
}


.activity-time {
    font-size: 12px;
    color: #7f8c8d;
    margin-bottom: 5px;
    font-style: italic;
}

.activity-content {
    font-size: 14px;
    color: #34495e;
    margin-bottom: 5px;
    line-height: 1.4;
}

.activity-user {
    font-size: 16px;
    color: #3498db;
    font-style: italic;
    text-align: right;
}

/* Responsive adjustment */
@media (max-width: 992px) {
    .activities-feed {
        margin-top: 30px;
    }
}


.custom-sticky-btn{
    margin-right: 20px;
}

/*.custom-sticky-btn {*/
/*    position: fixed;*/
/*    right: 0;*/
/*    top: 30%;*/
/*    transform: translateY(-50%);*/
/*    z-index: 1050;*/
/*    border-top-right-radius: 0;*/
/*    border-bottom-right-radius: 0;*/
/*    padding: 12px 15px;*/
/*    box-shadow: -2px 0 8px rgba(0,0,0,0.15);*/
/*    transition: all 0.3s ease;*/
/*}*/

/*.custom-sticky-btn:hover {*/
/*    right: 3px;*/
/*}*/

.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1051;
    display: none;
}

.custom-side-modal {
    position: fixed;
    top: 0;
    right: -100%;
    width: 400px;
    height: 100vh;
    background-color: white;
    z-index: 1052;
    transition: right 0.3s ease-out;
    overflow-y: auto;
}
.custom-side-modal.show {
    right: 0;
}

.custom-modal-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.custom-modal-body {
    padding: 1.5rem;
}

.est_cus{
    margin-left: 20px !important;
}
.est_hybrid{
    margin-left: 20px !important;
}
.pac-container {
    z-index: 9999;
}
/* Responsive adjustments */
@media (max-width: 576px) {
    .custom-side-modal {
        width: 100%;
    }
}