/* Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');


*{
  margin: 0;
  padding: 0;
  box-shadow: none;
  box-sizing: border-box;
}
:root {
  --body-font: "Nunito", sans-serif; 
  --heading-font: "Poppins", sans-serif;
  --nav-font: "Montserrat", sans-serif;
  --body-color:#F4F9FD;
  --input-bgcolor:#F1F6FA;
  --select-bgcolor:#E6EDF5;
  --border-color:#979798;
  --body-text-color: #555;
  --color-dark: #1d1d1d;
  --color-white: #fff;
  --gray-color:#999;
  --gray-color2:#8B8B9C;
  --crm-color:#1967D2;
  --crm-color2:#529BFF;
  --progressbar-color:#e8e8e8;
  --breadcrumb-color:#1967D2;
  --gradient-color:linear-gradient(180deg,#2d71db,#0d3d86);
   --transfer-btn:#5b18d6;
    --edit-btn:#ff9800;
    --delete-btn:#ff2020;
    --complaint-btn:#b80000;
    --assign-btn:#0b63d9;
    --active-btn:#16b600;
    --deactive-btn:#ef3b0d;
  --facebook-color: #1877f2;
  --instagram-color: #e1306c;
  --youtube-color: #ff0000;
  --whatsapp-color: #25d366;
}


*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  scroll-behavior: inherit !important;
}

html,
body {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

body {
  font-family: var(--body-font);
  font-style: normal;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.8;
  background-color: var(--body-color);
}

a {
  color:  var(--color-dark);
  display: inline-block;
}

a,
a:active,
a:focus,
a:hover {
  outline: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  text-decoration: none;
}

a:hover {
  color: var(--color-blue);
}

ul {
  margin: 0;
  padding: 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  color:  var(--color-dark);
  margin: 0px;
  font-weight: 500;
  font-family: var(--heading-font);
}

p {
  margin: 0px;
}

.img,
img {
  max-width: 100%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  height: auto;
}

*::-moz-selection {
  background: #d6b161;
  color: var(--color-white);
  text-shadow: none;
}

::-moz-selection {
  background: #555;
  color: var(--color-white);
  text-shadow: none;
}

::selection {
  background: #555;
  color: var(--color-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: #999;
  font-size: 16px;
  opacity: 1;
}


/* css start */
header{
    padding:18px 0px 18px 0px;
    position: sticky;
    top: 0px;
    z-index: 1;
    background-color: var(--body-color);
}

.main_div_header_data{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--color-white);
    border-radius:18px;
    padding:14px 22px;
}

.logo_div{
    width:200px;
    object-fit: contain;
    flex-shrink:0;
}

.logo_div img{
    height:40px;
    width:auto;
    object-fit:contain;
}

.input_box_div{
    flex:1;
    display:flex;
    justify-content:center;
    padding:0 40px;
}

.input_box_div > .input-group{
    width:420px;
    height:44px;
}

.input_box_div > .input-group > .input-group-text{
    background:var(--input-bgcolor);
    border:.5px solid var(--border-color) !important;
    border-right:none;
    border-radius:12px 0 0 12px;
    padding:0 15px;
   
}

.input_box_div > .input-group > .input-group-text > img{
    width:18px;
    height:18px;
}

.input_box_div .input-group > input{
     background:var(--input-bgcolor) !important;
    border:.5px solid var(--border-color) !important;
    border-left:none;
    border-radius:0px 12px 12px 0px;
    font-size:14px;
    color:var(--body-text-color);
    border-left: none !important;
    box-shadow:none;
}

.input_box_div .form-control::placeholder{
    color:var(--gray-color);
}

.input_box_div .form-control:focus{
    box-shadow:none;
    background:var(--input-bgcolor);
    border-color:var(--border-color);
}


.header_left_side_div{
    width:300px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
}

.user_name_div_header .d-flex{
    align-items:center;
}

.user_name_div_header .flex-shrink-0{
    width:42px;
    height:42px;
    border-radius:50%;
    overflow:hidden;
}

.user_name_div_header .flex-shrink-0 img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.user_name_div_header h6{
    margin:0;
    font-size:15px;
    font-weight:600;
    color:var(--color-dark);
    line-height:1.2;
    font-family:var(--body-font);
}

.user_name_div_header p{
    margin:2px 0 0;
    font-size:12px;
    color:var(--gray-color);
    line-height:1.2;
}

.notification_div_icon{
    width:42px;
    height:42px;
    border:.5px solid var(--border-color);
    border-radius:12px;
    background:var(--input-bgcolor);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.3s;
}

.notification_div_icon img{
    width:18px;
}

.notification_div_icon:hover{
    background:var(--input-bgcolor);
}


.hamburger_icon_div{
    width:42px;
    height:42px;
    border:.5px solid var(--border-color);
    border-radius:12px;
    background:var(--input-bgcolor);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.3s;
}

.hamburger_icon_div i{
    font-size:20px;
    color:var(--gray-color);
}

.hamburger_icon_div:hover{
    background:var(--input-bgcolor);
}

.main_layout_page_div{
    display: flex;
    gap: 20px;
    justify-content: start;
}

/* css start layout */
.main_page_section{
    display: flex;
}

.aside_navbar_div{
    width: 200px;
    position: fixed;
    top: 112px;    
    left: 0;
    height: calc(100vh - 112px);
    z-index: 99;
}

.main_content_div{
    width: calc(100% - 200px);
    margin-left: 200px;
    min-height: calc(100vh - 112px);
    padding: 20px 25px;
}

/* width */
 .aside_navbar_div ::-webkit-scrollbar {
  width: 5px;
  border-radius: 100px;
  
}

/* Track */
.aside_navbar_div ::-webkit-scrollbar-track {
    border-radius: 100px;
    background:var(--gradient-color);
    margin-top: 12px;
    margin-bottom: 3px;
}

/* Handle */
.aside_navbar_div ::-webkit-scrollbar-thumb {
    background: var(--color-white);
    
  border-radius: 100px;

}

/* css start layout end */

/* aside css start */
.crm_sidebar{
    width:100%;
    height:100%;
    background:var(--gradient-color);
    border-radius:0 16px 0 0;
    padding:12px 8px 12px 8px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow-y:auto;
}

.crm_sidebar_menu{
    list-style:none;
    margin:0;
    padding:0;
}

.crm_sidebar_item{
    margin-bottom:8px;
}

.crm_sidebar_item > a{
    display:flex;
    align-items:center;
    gap:12px;
    height:46px;
    padding:0 14px;
    border-radius:10px;
    color:var(--color-white);
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    transition:.3s;
}

.crm_sidebar_item > a > i{
    width:20px;
    text-align:center;
}


.crm_sidebar_item > a > img{
    width:20px;
    text-align:center;
}
 
.crm_sidebar_item.active > a{
    background:rgba(255,255,255,.15);
    color: var(--color-white);
}


.crm_sidebar_item > a:hover{
    background:rgba(255,255,255,.15);
    color: var(--color-white);
}

.crm_sidebar_bottom{
    padding-top:20px;
}

.crm_sidebar_bottom > a{
    display:flex;
    align-items:center;
    gap:12px;
    height:46px;
    padding:0 14px;
    border-radius:10px;
    color:var(--color-white);
    text-decoration:none;
    transition:.3s;
    font-weight: 600;
    font-size: 15px;
}

.crm_sidebar_bottom > a:hover{
    background:rgba(255,255,255,.15);
}
/* aside css end */