@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



/* font-family: 'Roboto', sans-serif; */



/* body,

html {

  overflow-x: hidden;

} */

/* body,html{

    width: 100%;

} */

body {

  margin: 0;

  padding: 0;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  width: 100%;

  font-family: "Outfit", sans-serif;

  font-style: normal;

  font-weight: normal;

  color: var(--text-clr);

  font-size: 18px;

  line-height: 1.2;

  background-color: #fff;

  /* scroll-behavior: smooth; */

}



body::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



body::-webkit-scrollbar-track {

  background: #eee;

}



body::-webkit-scrollbar-thumb {

  background: var(--primary-clr);

  border: none;

  border-radius: 10px;

}



:root {

  scroll-behavior: inherit;

  --primary-clr: #56C1FF;

  --white: #fff;

  --black: #000;

  --secondary-clr: #FFA723;

  --text-clr: #375472;

}



b,

strong {

  font-weight: 700;

}



ul,

ol {

  margin: 0;

  padding: 0;

  list-style: none;

}



p {

  margin: 0 0 15px 0;

  color: var(--text-clr);

}



p:last-child {

  margin-bottom: 0;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  margin: 0 0 25px 0;

  padding: 0;

  color: var(--white);

  font-weight: 700;

}



h1:last-child,

h2:last-child,

h3:last-child,

h4:last-child,

h5:last-child,

h6:last-child {

  margin-bottom: 0;

}



h1,

.h1-title {

  font-weight: 700;

  font-size: 50px;

  line-height: 1.4;

  text-align: center;

  color: var(--white);

  margin: 0 0 25px 0;

}



h1 .scnd-txt,

.h1-title .scnd-txt,

.scnd-txt {

  color: var(--secondary-clr);

}



.inr-bnr-sec h1,

.inr-bnr-sec .h1-title {

  color: var(--secondary-clr);

}



h2,

.h2-title {

  font-weight: 700;

  font-size: 34px;

  line-height: 1.4;

  text-align: center;

  color: var(--primary-clr);

}



h3,

.h3-title {

  font-weight: 500;

  font-size: 30px;

  line-height: 1.2;

}



h4,

.h4-title {

  font-size: 18px;

  line-height: 1.2;

}



h5,

.h5-title {

  font-size: 20px;

  line-height: 1.2;

}



a {

  display: inline-block;

  margin: 0;

  padding: 0;

  text-decoration: none !important;

  outline: none !important;

  color: var(--primary-clr);

  -webkit-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}



a:hover {

  color: rgba(175, 35, 35, 1);

}



img {

  max-width: 100%;

}



input[type="text"],

input[type="tel"],

input[type="password"],

input[type="email"],

select {

  background-color: #EBEBEB;

  width: 100%;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  border-radius: 10px;

  color: var(--primary-clr);

  /* border: 1px solid rgba(255, 255, 255, 0.7); */

  height: 60px;

  padding: 0 20px;

  outline: none !important;

  font-size: 18px;

  /* -webkit-box-shadow: 0 4px 22px rgba(0, 0, 0, 0.25);

  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.25); */

  border: none;

  background: #EBEBEB;

}



textarea {

  background-color: #EBEBEB;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  border-radius: 10px;

  /* border: 1px solid rgba(255, 255, 255, 0.7); */

  padding: 12px 20px;

  width: 100%;

  color: var(--primary-clr);

  height: 128px;

  resize: none;

  /* -webkit-box-shadow: 0 4px 22px rgba(0, 0, 0, 0.25);

  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.25); */

  outline: none !important;

  border: none;

}



select {

  /* border: 1px solid rgba(255, 255, 255, 0.7); */

  width: 100%;

  padding: 0 20px;

  background: url(../images/sort-down.svg) no-repeat calc(100% - 34px) center #EBEBEB;

  background-size: 10px;

  padding-right: 50px;

  /* -webkit-box-shadow: 0 4px 22px rgba(0, 0, 0, 0.25);

  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.25); */

  outline: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  -ms-appearance: none;

  -o-appearance: none;

  appearance: none;

  color: #B5B5B5;

  cursor: pointer;

}



select::-ms-expand {

  display: none;

}



input[type="submit"],

input[type="button"] {

  background: var(--primary-clr);

  color: var(--white);

  height: 50px;

  border: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  width: 100%;

  border-radius: 11px;

  padding-left: 34px;

  padding-right: 34px;

  cursor: pointer;

  font-size: 18px;

  font-weight: 400;

  outline: none !important;

  -webkit-transition: all 0.3sease-in-out;

  -o-transition: all 0.3s ease-in-out;

  transition: all 0.3sease-in-out;

}



input[type="submit"]:hover,

input[type="button"]:hover {

  background: var(--primary-clr);

  color: var(--white);

}



::-webkit-input-placeholder {

  opacity: 1;

  color: #B5B5B5;

}



:-ms-input-placeholder {

  opacity: 1;

  color: #B5B5B5;

}



select:disabled,

select option:disabled {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  color: #B5B5B5 !important;

  opacity: 1 !important;

}



::-moz-placeholder {

  opacity: 1;

  color: #B5B5B5;

}



:-moz-placeholder {

  opacity: 1;

  color: #B5B5B5;

}



/* images alignment for wordpress content pages */

.alignright {

  float: right;

  margin: 0 0 20px 20px;

}



.alignleft {

  float: left;

  margin: 0 20px 20px 0;

}



.aligncenter {

  display: block;

  margin-left: auto;

  margin-right: auto;

  margin-bottom: 20px;

  float: none;

  clear: both;

}



/* custom checkbox */



.form_input_check label {

  position: relative;

  margin: 0;

  padding-left: 40px;

  display: inline-block;

}



.form_input_check label span {

  margin: 0;

  padding: 0;

}



.form_input_check label input[type="checkbox"] {

  visibility: hidden;

  display: none;

}



.form_input_check label input[type="checkbox"]+span::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0px;

  width: 22px;

  height: 22px;

  border: 1px solid #3e3e42;

  background: transparent;

}



.form_input_check label input[type="checkbox"]+span::after {

  content: "";

  position: absolute;

  left: 0;

  top: 0px;

  width: 22px;

  height: 22px;

  -webkit-transition: all 0.2s ease;

  -o-transition: all 0.2s ease;

  transition: all 0.2s ease;

  background: url(images/tick.svg) no-repeat center center;

  background-size: 15px;

}



.form_input_check label input[type="checkbox"]:not(:checked)+span::after {

  opacity: 0;

  -webkit-transform: scale(0);

  -ms-transform: scale(0);

  transform: scale(0);

}



/* .form_input_check input[type="checkbox"]:checked + span::before {

      

    } */

.form_input_check label input[type="checkbox"]:checked+span:after {

  opacity: 1;

  -webkit-transform: scale(1);

  -ms-transform: scale(1);

  transform: scale(1);

}



/* custom radio */



.form_input_radio label {

  position: relative;

  margin: 0;

  padding-left: 30px;

  display: inline-block;

}



.form_input_radio label span {

  margin: 0;

  padding: 0;

}



.form_input_radio label input[type="radio"] {

  visibility: hidden;

  display: none;

}



.form_input_radio label input[type="radio"]+span::before {

  content: "";

  position: absolute;

  left: 0;

  top: 1px;

  width: 22px;

  height: 22px;

  border: 2px solid #000000;

  border-radius: 100%;

  background: #fff;

}



.form_input_radio label input[type="radio"]+span::after {

  content: "";

  width: 12px;

  height: 12px;

  background: #4b0049;

  position: absolute;

  top: 6px;

  left: 5px;

  border-radius: 100%;

  -webkit-transition: all 0.2s ease;

  -o-transition: all 0.2s ease;

  transition: all 0.2s ease;

}



.form_input_radio label input[type="radio"]:not(:checked)+span::after {

  opacity: 0;

  -webkit-transform: scale(0);

  -ms-transform: scale(0);

  transform: scale(0);

}



.form_input_radio label input[type="radio"]:checked+span:after {

  opacity: 1;

  -webkit-transform: scale(1);

  -ms-transform: scale(1);

  transform: scale(1);

}



/* custom radio end */



/* ================== DIGEST AI CSS ================= */



/* digestAI LOGIN FLOW -PAGE */



.mainsec-digestAI-inner {

  padding: 25px;

  background: #000;

}



section.digestAI-login-wrap {

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: space-between;

  /* align-items: center; */

  padding: 0;

  gap: 20px;

}



.digestAI-left {

  width: 50%;

  height: auto;

  display: flex;

  overflow: auto;

  scrollbar-width: none;

  align-items: baseline;

  background: #000;

  padding: 1rem 0;

  border-radius: 30px;



  a.back-icon {

    font-size: 2rem;

    position: absolute;

    top: 20px;

    left: 20px;

  }



  form {

    width: 100%;

    height: auto;

    display: flex;

    justify-content: center;

    padding: 0px 90px;

    /* align-items: flex-start; */

    gap: 20px;

    flex-direction: column;

    margin: auto 0;



    h1 {

      font-size: 30px;

      color: #FF968D;

      text-align: start;

      margin-bottom: 0px;

    }



    img.logo-img-login {

      width: 45%;

    }



    h2 {

      font-size: 16px;

      font-weight: 400;

      color: #E2E2E2;

      text-align: start;

      margin-bottom: 13px;

      width: 100%;

    }



    p {

      font-size: 16px;

      font-weight: 500;

      color: #3C3C3C;

    }



    h3 {

      font-size: 18px;

      width: 100%;

      margin-bottom: 0px;

      font-weight: 500;

      color: #333333;

      line-height: 30px;

    }



  }





  .forgotpass-wrap {

    display: flex;

    justify-content: flex-start;



    .remeber-me {

      display: flex;

      align-items: center;

      gap: 10px;



      input[type="checkbox"] {

        width: 20px;

        height: 20px;

        cursor: pointer;

        appearance: none;

        outline: 2px solid #b3b3b3;

        border-radius: 2px;

        outline-offset: -2px;

        background-color: transparent;

      }





      input[type="checkbox"]:checked {

        accent-color: var(--primary-clr);

        appearance: auto;

        border-radius: 5px;

        outline: none;

      }



      span {

        color: var(--primary-clr);

        font-size: 18px;

        font-weight: 500;

      }



    }









  }





}



.otp-verification-input {

  width: 100%;

  display: flex;

  justify-content: flex-start;

  gap: 15px;

  margin-bottom: 15px;

}



.otp-verification-input .inputs {

  width: 50px;

  height: 50px;

  padding: 0;

  border-radius: 6px;

  border: 1px solid #8E8E8E;

  background: #FFF;

  color: #8E8E8E;

  font-size: 16px;

  font-weight: 600;

  text-align: center;

}



.otp-verification-input .inputs::-webkit-outer-spin-button,

.otp-verification-input .inputs::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}





.digestAI-left-field {

  width: 100%;

  height: 50px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  margin-bottom: 0px;

  flex-wrap: wrap;

}



.digestAI-left-field input[type="text"],

.digestAI-left-field input[type="email"],

.digestAI-left-field input[type="password"] {

  width: 100%;

  height: 100%;

  border: 1px solid #B0B0B0;

  /* outline: none; */

  background: transparent;

  border-radius: 28px;

  font-size: 14px;

  font-weight: 400;

  color: var(--primary-clr);

  padding: 0px 40px 0 51px;



  &::placeholder {

    color: #B0B0B0;

  }

}



.digestAI-left-field img {

  width: 40px;

  position: absolute;

  padding: 0px;

  border-radius: 6px 6px 6px 6px;

  left: 5px;

  top: 4px;

}







.digestAI-left-field select {

  width: 100%;

  height: 100%;

  box-shadow: none;

  border: 1px solid #8E8E8E;

  outline: none;

  background-color: var(--white);

  background-size: 15px;

  background-position: calc(100% - 20px);

  border-radius: 10px;

  font-size: 14px;

  font-weight: 600;

  color: #8E8E8E;

  padding: 0px 20px;

  cursor: pointer;



  & option {

    font-weight: 600;

    color: #333333;

  }

}





.password-eye {

  position: absolute;

  width: 20px;

  height: 20px;

  display: flex;

  top: auto;

  right: 15px;

  border: none;

  align-items: center;

  background: none;

  justify-content: center;

  cursor: pointer;

  transition: .5s;

}



.password-eye .eye-close {

  background-image: url(../images/Digest-AI-images/eye-close.svg);

  width: 30px;

  height: 30px;

  background-repeat: no-repeat;

  background-position: center;

  background-size: 25px;

}



.password-eye .eye-open {

  background-image: url(../images/Digest-AI-images/eye-open.svg);

  width: 30px;

  height: 30px;

  background-repeat: no-repeat;

  background-position: center;

  background-size: 25px;

}



/* digestAI LOGIN FLOW -PAGE */







/* ============== DASHBOARD PAGES CSS =========== */



/* SIDEBAR */

#sidebar {

  position: fixed;

  top: 0;

  left: 0;

  width: 270px;

  height: 100%;

  z-index: 999;

  /* box-shadow: 0px 5.44px 5.44px 0px #00000040; */



  transition: .3s ease;

  overflow-x: hidden;

  background: var(--primary-clr);

  scrollbar-width: none;

  padding-top: 0px;

}



#sidebar2 {

  position: fixed;

  top: 0;

  left: 0;

  width: 270px;

  height: 100%;

  z-index: 999;

  /* box-shadow: 0px 5.44px 5.44px 0px #00000040; */



  transition: .3s ease;

  overflow-x: hidden;

  background: var(--primary-clr);

  scrollbar-width: none;

  padding-top: 0px;

}



#sidebar::-webkit-scrollbar {

  display: none;

}



#sidebar2::-webkit-scrollbar {

  display: none;

}



#sidebar.hide {

  width: 0;

}



#sidebar2.hide {

  width: 0;

}



#sidebar .brand {

  height: 50px;

  width: 232px;

  display: flex;

  align-items: center;

  font-size: 25px;

  font-weight: 500;

  background: var(--primary-clr);

  padding-top: 9px;

  padding-left: 18px;

  box-sizing: content-box;

  transition: .5s;

  justify-content: flex-start;

}



#sidebar2 .brand {

  height: 60px;

  width: 178px;

  display: flex;

  align-items: center;

  font-size: 25px;

  font-weight: 500;

  background: var(--primary-clr);

  padding-top: 9px;

  padding-left: 18px;

  box-sizing: content-box;

  transition: .5s;

  justify-content: flex-start;

}



#sidebar .brand img {

  width: 100%;

  height: 58px;

  display: flex;

  justify-content: center;

  margin-right: 0px;

}



#sidebar2 .brand img {

  width: 135px;

  display: flex;

  justify-content: center;

  margin-right: 0px;

}



#sidebar .brand .bx {

  min-width: 60px;

  display: flex;

  justify-content: center;

}



#sidebar2 .brand .bx {

  min-width: 60px;

  display: flex;

  justify-content: center;

}



#sidebar .side-menu {

  width: 100%;

  padding: 8px;

  padding-right: 0;

  margin: 0;

  margin-top: 30px;

}



#sidebar2 .side-menu {

  width: 100%;

  padding: 8px;

  padding-right: 0;

  margin: 0;

  margin-top: 30px;

}



#sidebar .side-menu li {

  height: auto;

  background: transparent;

  border-radius: 48px 0 0 48px;

  margin-bottom: 10px;

  list-style: none;

  position: relative;

  margin-right: 9px;

  transition: .5s;

  display: flex;

  align-items: center;

}



#sidebar2 .side-menu li {

  height: auto;

  background: transparent;

  border-radius: 48px 0 0 48px;

  margin-bottom: 10px;

  list-style: none;

  position: relative;

  margin-right: 9px;

  transition: .5s;

  display: flex;

  align-items: center;

}



li.inactive.logout-bottom {

  position: relative;

  bottom: 0;

  padding: 10px 10px 10px 10px;

  width: 100%;

  top: 0;

  list-style-type: none;



  a {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    border-radius: 8px;

    font-size: 14px;

    gap: 14px;

    padding: 12px 10px;

    font-weight: 500;

    color: #fff;

    position: relative;

    cursor: pointer;

    z-index: 9999;

    white-space: nowrap;

    overflow-x: hidden;

  }



  a:hover {

    background: linear-gradient(96.44deg, #56C1FF -1.62%, #347499 102.91%);

    color: #fff;

    border-radius: 30px;

  }



}



#sidebar .side-menu li p {

  position: fixed;

  margin: 0;

  background: #000;

  padding: 10px 20px;

  border-radius: 5px;

  font-size: 12px;

  color: #fff;

  font-weight: 400;

  display: none;

  transition: .5s;

  left: 80px;

}



#sidebar2 .side-menu li p {

  position: fixed;

  margin: 0;

  background: #000;

  padding: 10px 20px;

  border-radius: 5px;

  font-size: 12px;

  color: #fff;

  font-weight: 400;

  display: none;

  transition: .5s;

  left: 80px;

}



#sidebar .side-menu li p:before {

  position: absolute;

  content: '';

  width: 10px;

  height: 10px;

  background: #000;

  transition: .5s;

  left: -5px;

  top: 15px;

  border-radius: 0px;

  transform: rotate(45deg);

}



#sidebar2 .side-menu li p:before {

  position: absolute;

  content: '';

  width: 10px;

  height: 10px;

  background: #000;

  transition: .5s;

  left: -5px;

  top: 15px;

  border-radius: 0px;

  transform: rotate(45deg);

}



#sidebar.hide .side-menu li:hover p {

  display: block;

  transition: .5s;

}



#sidebar2.hide .side-menu li:hover p {

  display: block;

  transition: .5s;

}



#sidebar .side-menu li a {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  border-radius: 8px;

  font-size: 14px;

  padding: 9px 15px;

  font-weight: 500;

  color: #fff;

  position: relative;

  cursor: pointer;

  z-index: 9999;

  white-space: nowrap;

  overflow-x: hidden;

}



#sidebar2 .side-menu li a {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  border-radius: 8px;

  font-size: 14px;

  padding: 9px 15px;

  font-weight: 500;

  color: #fff;

  position: relative;

  cursor: pointer;

  z-index: 9999;

  white-space: nowrap;

  overflow-x: hidden;

}



#sidebar .side-menu li a img {

  width: 24px;

  height: 28px;

  filter: brightness(1) invert(0);

  margin-right: 16px;

  object-fit: contain;

}



#sidebar2 .side-menu li a img {

  width: 24px;

  height: 28px;

  filter: brightness(1) invert(0);

  margin-right: 16px;

  object-fit: contain;

}



#sidebar .side-menu li.active a {

  background: linear-gradient(96.44deg, #56C1FF -1.62%, #347499 102.91%);

  color: #fff;

  border-radius: 30px;

  border: 1px solid #fff;

}



#sidebar2 .side-menu li.active a {

  background: linear-gradient(96.44deg, #56C1FF -1.62%, #347499 102.91%);

  color: #fff;

  border-radius: 30px;

  border: 1px solid #fff;

}



#sidebar .side-menu li:hover a {

  background: linear-gradient(96.44deg, #56C1FF -1.62%, #347499 102.91%);

  color: #fff;

  border-radius: 30px;



}



#sidebar2 .side-menu li:hover a {

  background: linear-gradient(96.44deg, #56C1FF -1.62%, #347499 102.91%);

  color: #fff;

  border-radius: 30px;

}



#sidebar .side-menu li.active a img {

  filter: brightness(1) invert(0);

  max-width: 42px;

  margin-left: -4px;

}



#sidebar2 .side-menu li.active a img {

  filter: brightness(1) invert(0);

  max-width: 42px;

  margin-left: -4px;

}



#sidebar .side-menu li.inactive a img {

  filter: brightness(1) invert(0);

  max-width: 42px;

  margin-left: -4px;

}



#sidebar2 .side-menu li.inactive a img {

  filter: brightness(1) invert(0);

  max-width: 42px;

  margin-left: -4px;

}



#sidebar .side-menu li:hover a img {

  filter: brightness(1) invert(0);

  max-width: 42px;

  margin-left: -4px;

}



#sidebar2 .side-menu li:hover a img {

  filter: brightness(1) invert(0);

  max-width: 42px;

  margin-left: -4px;

}



.primary-contact-personnap img.rotated {

  transform: rotate(180deg);

  transition: transform 0.3s ease;

}



/* CONTENT */

#content {

  position: relative;

  width: calc(100% - 270px);

  left: 270px;

  /* transition: .1s ease; */

}



#sidebar.hide~#content {

  width: calc(100% - 0px);

  left: 0;

}



#sidebar2.hide~nav.mobile-nav {

  width: calc(100% - 0px);

  left: 0;

}





.mobile-toogle {

  position: absolute;

  right: 0;



  img {

    width: 64%;

  }

}







/* NAVBAR */

#content nav {

  height: 60px;

  padding: 0 24px;

  background: #202020;

  display: flex;

  justify-content: space-between;

  align-items: center;

  grid-gap: 24px;

  position: sticky;

  top: 0;

  left: 0;

  z-index: 9;

}



nav.mobile-nav {

  height: 60px;

  padding: 0 24px;

  background: #202020;

  display: none;

  justify-content: space-between;

  align-items: center;

  grid-gap: 24px;

  position: sticky;

  top: 0;

  left: 0;

  z-index: 9;

}



.bx.bx-menu img {

  width: 41px;

}



.admin-icon {

  flex-basis: auto;

  height: auto;

  width: auto;

  margin-left: auto;

  font-size: 13px;

  border: 2px solid #95AEC7;

  padding: 1px 2px;

  color: #fff;

  font-weight: 500;

  border-radius: 36px;

  display: flex;

  align-items: center;

}



.admin-icon img {

  width: 37px;

}



#content nav .bx.bx-menu {

  cursor: pointer;

  color: #fff;

  font-size: 25px;

}



.bx-menu:before {

  content: "\edc2";

  display: none;

}



.toggle-button-wrap {

  display: flex;

  align-items: center;

  gap: 8px;



  h3 {

    font-size: 24px;

    font-weight: 600;

    color: #4A6782;

  }

}



/* NAVBAR */



/* MAIN */

#content main {

  width: 100%;

  height: 100%;

  padding: 25px;

  /* background: #f5f5f5; */

  max-height: 100%;

}



/* MAIN */



/* SIDEBAR */



/* ===============   SIDEBAR & NAV CSS FOR MOBILE VIEW AND DESKTOP ============= */



#sidebar2 {

  display: none;

}



.nav-desktop {

  display: block;

}



.nav-mobile {

  display: none !important;

}



.cross-icon {

  position: absolute;

  top: 21px;

  right: -50px;



  img {

    width: 30%;

  }

}



/* ===============   SIDEBAR & NAV CSS FOR MOBILE VIEW AND DESKTOP ============= */







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



.dashboard-content-second {

  position: relative;

  width: calc(100% - 0px);

  height: auto;

  left: 0px;

  transition: .3s ease;

  background: #202020;

  padding-bottom: 18px;

  border-radius: 20px;

}



/* ===== INNER DASHBOARD BAND ===== */



.manual-project-fromband {

  padding: 16px;





  /* INNER BAND DASHBOARD */



  & .innerproject-band-inn {

    padding: 14px 15px;

    border-radius: 10px;

    /* background: #4A6782; */

    background: linear-gradient(90deg, #56C1FF 0%, #347499 100%);

    display: flex;

    align-items: center;

    justify-content: space-between;



    .left-sec {

      display: flex;

      flex-direction: column;

      gap: 15px;



      h3 {

        color: #fff;

        font-size: 16px;

        font-weight: 500;

        margin-bottom: 0;

      }



    }



    .right-sec {}



  }



  /* INNER BAND DASHBORD */





  /* ====== FILTER BAND ======= */





  & .filter-band-inn {

    padding: 8px 0px;

    border-radius: 10px;

    background: transparent;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;



    .left-sec {

      display: flex;

      flex-direction: column;

      gap: 15px;

      width: 25%;



      form {

        width: 95%;

        height: auto;



        input[type="text"] {

          height: auto;

          padding: 12px 48px 12px 10px;

          border-radius: 26px;

          background-color: transparent;

          border: 1px solid #B0B0B0;

          color: #B0B0B0;

          font-size: 14px;

          font-weight: 400;

          background-image: url(../images/Digest-AI-images/serach-icon.svg);

          background-repeat: no-repeat;

          background-position: center right -1px;

          background-size: 42px;



          &::placeholder {

            color: #B0B0B0;

          }

        }

      }



    }



    .right-sec {

      width: auto;

      display: flex;

      gap: 10px;

      flex-wrap: wrap;

      justify-content: flex-end;



      .daterange-btn {

        width: auto;

        height: auto;

        background: transparent;

        border-radius: 25px;

        display: flex;

        align-items: center;

        border: 2px solid var(--primary-clr);

        gap: 5px;

        position: relative;

      }



      .daterange-btn img {

        width: 24px;

        height: auto;

        position: absolute;

        left: 15px;

      }



      .daterange-btn input[type="text"] {

        padding: 0px 10px 0px 50px;

        font-size: 14px;

        height: 39px;

        font-weight: 600;

        outline: none;

        color: var(--primary-clr);

        border: none;

        border-radius: 52px;

        background-color: transparent;

        width: 145px;

        cursor: pointer;

      }



      .daterange-btn input[type="text"]::placeholder {

        color: var(--primary-clr);

      }





      /* --- add a ne customer btn----- */



      a {

        height: 43px;

        width: max-content;

        color: #fff !important;

        border-radius: 50px;

        align-items: center;

        border: none;

        text-align: center;

        padding: 8px 18px 8px 18px;

        display: flex;

        gap: 10px;

        align-items: center;

        background: var(--primary-clr);

        font-size: 14px;

        text-transform: capitalize;

        font-weight: 500;

        margin: 0;



        img {

          width: 26px;

        }

      }



      /* --- add a ne customer btn----- */





    }



  }



  button.export-csv {

    background: transparent;

    color: var(--primary-clr);

    font-weight: 600;

    border: 2px solid var(--primary-clr);

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    height: 43px;

    padding: 10px 13px;

    border-radius: 26px;

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    font-size: 14px;

    outline: none !important;

    -webkit-transition: all 0.3sease -in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3sease -in-out;



    img {

      width: 24px;

    }

  }



  button.suspend-user-btn {

    background: transparent;

    color: #AF2323;

    font-weight: 600;

    border: 2px solid #AF2323;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    height: 43px;

    padding: 10px 13px;

    border-radius: 26px;

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    font-size: 14px;

    outline: none !important;

    -webkit-transition: all 0.3sease -in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3sease -in-out;



    img {

      width: 24px;

    }

  }



  button.activated-user-btn {

    background: transparent;

    color: var(--primary-clr);

    font-weight: 600;

    border: 2px solid var(--primary-clr);

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    height: 43px;

    padding: 10px 13px;

    border-radius: 26px;

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    font-size: 14px;

    outline: none !important;

    -webkit-transition: all 0.3sease -in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3sease -in-out;



    img {

      width: 24px;

    }

  }



  /* ------------------  NORMAL TOP FILTER BTN CSS -------- */



  .quotes {

    width: auto;

    min-width: 100px;

    max-width: 100%;

    position: relative;

    border-radius: 30px;

    margin-left: 0px;

  }



  .dropdown-btn {

    height: 100%;

    padding: 9px 15px;

    position: relative;

    font-size: 14px;

    border-radius: 26px;

    color: var(--primary-clr);

    font-weight: 600;

    height: 43px;

    border: 2px solid var(--primary-clr);

    cursor: pointer;

    background: transparent;

    max-width: 205px;

    text-align: left;

    display: flex;

    align-items: center;

    justify-content: space-around;

  }



  .dropdown-btn.status {

    max-width: max-content;

  }



  .dropdown-btn i {

    margin-left: 10px;

    color: var(--primary-clr);

    font-size: 13px;

    font-weight: 600;

  }



  .dropdown {

    padding: 10px;

    background-color: #202020;

    border-radius: 10px;

    margin-top: 5px;

    position: absolute !important;

    display: none;

    right: 0 !important;

    border: 1px solid var(--primary-clr);

    width: max-content;

    text-align: left !important;

    /* border: 1px solid #E8E8E8; */

    z-index: 1;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;



  }







  .quotes-list {

    width: auto;

  }



  .influ-btns-label {

    position: relative;

    z-index: 1;

    color: #fff;

    margin-right: 5px;

    font-weight: 300;

    padding: 4px;

    gap: 11px;

    width: 100%;

    margin-bottom: 0px;

    cursor: pointer;

    font-size: 14px;

    display: flex;

    flex-direction: row-reverse;

    justify-content: flex-end;

  }



  .influ-btns form label input[type=checkbox] {

    /* margin-left: auto; */

    color: #fff;

    accent-color: #1d7a74;

  }



  .submit-btn-dropdwn {

    padding: 8px 5px 0px 5px;

    background: #202020;

    justify-content: center;

    display: flex;

    width: 100%;



    button {

      width: 80%;

      height: 35.428px;

      border-radius: 23px;

      background: var(--primary-clr);

      color: #fff !important;

      font-size: 14px;

      border: none;

      display: flex;

      font-weight: 600;

      text-align: center;

      align-items: center;

      justify-content: center;

    }



  }



  .influ-btns-label input[type="checkbox"] {

    width: 14px;

    height: 14px;

    cursor: pointer;

    appearance: none;

    outline: 2px solid #fff;

    border-radius: 2px;

    outline-offset: -2px;

    background-color: transparent;

  }





  .influ-btns-label input[type="checkbox"]:checked {

    accent-color: var(--primary-clr);

    appearance: auto;

    border-radius: 2px;

    outline: none;

  }



  /* ------------------  NORMAL TOP FILTER BTN CSS -------- */





  /* ====== FILTER BAND ======= */







}



/* ===== INNER DASHBOARD BAND ===== */



/* ===== DATEPIKER CSS ======== */



.daterangepicker td.active, .daterangepicker td.active:hover {

  background-color: var(--primary-clr) !important;

  border-color: transparent;

  color: #fff;

}





button.applyBtn.btn-primary {

  background-color: var(--primary-clr) !important;

  outline: none !important;

}



.daterangepicker .drp-selected {

  display: inline-block;

  font-size: 12px;

  font-weight: 700;

  padding-right: 8px;

  border: 1px solid var(--primary-clr);

  padding: 12px;

  border-radius: 26px;

}



/* ===== DATEPIKER CSS ======== */





/* ===================== TABLE CSS =================== */



.page-table {

  width: 100%;

  padding: 15px;



  .table-responsive::-webkit-scrollbar {

    width: 8px;

    height: 8px;

  }



  .table-responsive::-webkit-scrollbar-track {

    background: #eee;

  }



  .table-responsive::-webkit-scrollbar-thumb {

    background: var(--primary-clr);

    border: none;

    border-radius: 10px;

  }



  table {

    width: 100%;

    min-width: max-content;

    border: none;

    border-collapse: separate;

    border-spacing: 0;



    th {

      font-weight: 500;

      font-size: 14px;

      background-color: var(--primary-clr);

      text-transform: capitalize;

      color: var(--white);

      text-align: center;

      padding: 12px 15px;

      border: none;

    }



    tr:first-child th:first-child {

      border-radius: 6px 0 0 0;

    }



    tr:first-child th:last-child {

      border-radius: 0px 6px 0px 0px;

    }



    .company-filter-align {

      display: flex;

      gap: 6px;

    }



    .filter-button {

      button {

        border: none;

        background: transparent;

      }

    }











    td {

      font-weight: 500;

      font-size: 14px;

      color: #fff;

      text-align: center;

      padding: 10px 15px;

      border: 1px solid var(--primary-clr);

    }



    tr:nth-child(odd) {

      background-color: transparent;

    }



    tr:nth-child(even) {

      background-color: transparent;

    }

  }





  input[type="checkbox"] {

    width: 20px;

    height: 20px;

    cursor: pointer;

    appearance: none;

    outline: 1px solid #fff;

    border-radius: 2px;

    outline-offset: -2px;

    background-color: transparent;

  }





  input[type="checkbox"]:checked {

    accent-color: #fff;

    appearance: auto;

    outline: none;

    border-radius: 5px;

  }



  a.active-status {

    height: 35px;

    color: #238C04 !important;

    border-radius: 9px;

    align-items: center;

    border: none;

    text-align: center;

    padding: 8px 18px 8px 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #ACFF93;

    font-size: 14px;

    text-transform: capitalize;

    font-weight: 500;

    margin: 0px 5px;

  }



  a.waiting-status {

    height: 35px;

    color: #8D5700 !important;

    border-radius: 9px;

    align-items: center;

    border: none;

    text-align: center;

    padding: 8px 18px 8px 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #FFCB78;

    font-size: 14px;

    text-transform: capitalize;

    font-weight: 500;

    margin: 0px 5px;

  }



  a.failed-status {

    height: 35px;

    color: #DC3131 !important;

    border-radius: 9px;

    align-items: center;

    border: none;

    text-align: center;

    padding: 8px 18px 8px 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #FFB4B4;

    font-size: 14px;

    text-transform: capitalize;

    font-weight: 500;

    margin: 0px 5px;

  }





}



/* ===================== TABLE CSS =================== */



img.profile-imgss {

  width: 41px;

}



/* -======== OPEN PROJCTS ACTION WRAP ========= */





.open-project-actions {

  display: flex;

  justify-content: center;



  a:nth-child(1) {

    height: 35px;

    color: #fff !important;

    border-radius: 9px;

    align-items: center;

    border: none;

    text-align: center;

    padding: 8px 18px 8px 18px;

    display: flex;

    align-items: center;

    background: #29A603;

    font-size: 14px;

    text-transform: capitalize;

    font-weight: 500;

    margin: 0px 5px;

  }



  a.edit-group {

    background: #54A4EE !important;

  }



  a:nth-child(2) {

    height: 35px;

    color: #fff !important;

    border-radius: 9px;

    align-items: center;

    border: none;

    text-align: center;

    padding: 8px 18px 8px 18px;

    background: #AF2323;

    font-size: 14px;

    text-transform: capitalize;

    font-weight: 500;

    margin: 0px 5px;

  }



}





/* -======== OPEN PROJCTS ACTION WRAP ========= */



/* PAGINATION CSS */



.influ-pagi {

  width: 100%;

  height: auto;

  text-align: center;

  padding: 35px 0;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: flex-end;

}



.influ-pagi ul {

  padding: 0px;

  margin: 0;

  display: inline-block;

}



.influ-pagi ul li {

  list-style: none;

  display: inline-block;

  margin: 0 4px;

}



.influ-pagi ul li a {

  font-size: 15px;

  font-weight: 500;

  transition: .5s;

  color: #626262;

  border: 1px solid #626262;

  width: 33px;

  border-radius: 42px;

  height: 33px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.influ-pagi ul li:first-child a {

  font-size: 15px;

  font-weight: 500;

  transition: .5s;

  color: var(--primary-clr);

  border: 1px solid var(--primary-clr);

  width: 33px;

  border-radius: 42px;

  height: 33px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.influ-pagi ul li:last-child a {

  font-size: 15px;

  font-weight: 500;

  transition: .5s;

  color: var(--primary-clr);

  border: 1px solid var(--primary-clr);

  width: 33px;

  border-radius: 42px;

  height: 33px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.influ-pagi ul li:first-child a:hover {

  color: #fff;

  background: var(--primary-clr);

  border: none;

  transition: .5s;

}



.influ-pagi ul li:last-child a:hover {

  color: #fff;

  background: var(--primary-clr);

  border: none;

  transition: .5s;

}



.influ-pagi ul li.active a {

  color: #000;

  background: var(--primary-clr);

  border: none;

  transition: .5s;

}



.influ-pagi ul li a:hover {

  color: #000;

  background: var(--primary-clr);

  border: none;

  transition: .5s;

}



.influ-pagi form {

  position: absolute;

  right: 0;

}







/* PAGINATION CSS */





/* ADMIN PROFILE PIC CSS */







.dashboard-dev-profile {

  display: flex;

  align-items: center;

  color: #2A2A2A;

  font-size: 16px;

  font-weight: 600;

  gap: 10px;

  margin-left: 15px;

  padding-left: 15px;





}



.dashboard-dev-profile-image {

  width: 40px;

  height: 40px;

  position: absolute;

  right: 35px;



  img {

    width: 100%;

    height: 100%;

    border-radius: 10px;

    border: 1px solid var(--primary-clr);

    cursor: pointer;

  }



}



/* ADMIN PROFILE PIC CSS */





/* ======= ALL POPUP CSS ======= */



.second-common-popup .modal-content {

  background-color: #000;



  h2 {

    font-size: 16px;

    font-weight: 600;

    color: var(--white);

    margin-bottom: 8px;

    margin-top: 0px;

    text-align: left;

    padding: 12px 18px;

    border-radius: 7px;

    background: linear-gradient(180deg, #56C1FF 0%, #347499 100%);

  }



  .align-create-btns {

    display: flex;

    justify-content: end;

    width: 100%;

  }



  .create-manual-bns {

    display: flex;

    gap: 30px;

    justify-content: center;



    a:nth-child(1) {

      background: transparent;

      color: var(--primary-clr);

      font-weight: 400;

      border: 2px solid var(--primary-clr);

      -webkit-appearance: none;

      -moz-appearance: none;

      appearance: none;

      border-radius: 30px;

      padding: 12px 40px;

      cursor: pointer;

      font-size: 16px;

      outline: none !important;

      -webkit-transition: all 0.3sease -in-out;

      -o-transition: all 0.3s ease-in-out;

      transition: all 0.3sease -in-out;

    }



    a:nth-child(2) {

      background: var(--primary-clr);

      color: #fff;

      font-weight: 400;

      /* border: 2px solid #4A6782; */

      -webkit-appearance: none;

      -moz-appearance: none;

      appearance: none;

      border-radius: 30px;

      padding: 12px 40px;

      display: flex;

      align-items: center;

      font-size: 16px;

      outline: none !important;

      -webkit-transition: all 0.3sease -in-out;

      -o-transition: all 0.3s ease-in-out;

      transition: all 0.3sease -in-out;

    }



  }





}



.second-common-popup .modal-dialog {

  max-width: 800px;

}



.second-common-popup .modal-content {

  border-radius: 10px;

  padding: 10px;

}



.create-manualprojectform {

  width: 100%;

  height: auto;

}



.create-manualprojectform>form {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;

  justify-content: flex-start;

}



.new-manual-project {

  width: 100%;

  height: 45px;

  position: relative;

  display: flex;

  align-items: center;



  h3 {

    font-size: 16px;

    font-weight: 500;

    color: #fff;

    margin-bottom: 0;

    width: 50%;

  }





  input.filledd {

    background: rgba(232, 232, 232, 1) !important;

  }



  input[type="text"] {

    width: 100%;

    height: 100%;

    border: 1px solid #fff;

    outline: none;

    background: transparent;

    border-radius: 35px;

    font-size: 14px;

    font-weight: 400;

    color: #fff;

    padding: 0px 15px;



    &::placeholder {

      color: #fff;

    }

  }



  input[type="number"] {

    width: 100%;

    height: 100%;

    border: 1px solid #fff;

    outline: none;

    background: transparent;

    border-radius: 35px;

    font-size: 14px;

    font-weight: 400;

    color: #fff;

    padding: 0px 15px;



    &::placeholder {

      color: #fff;

    }

  }



  input[type="password"] {

    width: 100%;

    height: 100%;

    border: 1px solid #fff;

    outline: none;

    background: transparent;

    border-radius: 35px;

    font-size: 14px;

    font-weight: 600;

    color: #fff;

    padding: 0px 15px;



    &::placeholder {

      color: #fff;

    }

  }



  select {

    width: 100%;

    height: 100%;

    border: 1px solid #000;

    outline: none;

    background: var(--white);

    border-radius: 10px;

    font-size: 14px;

    font-weight: 600;

    color: #000;

    padding: 0px 15px;

    appearance: none;

    background: url(../images/Eromac-images/Dev-dashboard-imgs/icons/select-dropdown.svg);

    background-position: center right 14px;

    background-size: 26px;

    background-repeat: no-repeat;



    &::placeholder {

      color: #000;

    }



    option {

      color: #000;

      font-weight: 600;

    }



  }



}





#reset-password-popup .modal-dialog {

  max-width: 574px;

}



/* EDIT PROFILE POPUP CSS */



.edit-profile-popup .modal-content {

  border-radius: 10px;

  padding: 0;

  background-color: #000;

}



#edit-profile-popup .modal-dialog {

  max-width: 886px;

}



#view-profile-popup .modal-dialog {

  max-width: 886px;

}





.edit-profile-heading {

  padding: 14px 14px;

  display: flex;

  align-items: center;

  border-bottom: 1px solid var(--primary-clr);



  h4 {

    font-size: 18px;

    font-weight: 600;

    color: var(--primary-clr);

    text-align: left;

    margin-bottom: 0px;

    width: fit-content;

    background-color: transparent;

  }



  button.close {

    padding: 0;

  }



  .close-btn-front {

    border: 2px solid #EC1C24;

    border-radius: 30%;

    /* top: 0; */

    position: absolute;

    right: 13px;

    width: 25px;

    height: 25px;

    box-shadow: none;

    color: #EC1C24;

    background: transparent;

    margin-left: auto;

    text-shadow: none;

    font-size: 26px;

    font-weight: 400;

    opacity: 1;

    line-height: 20px;

    z-index: 9;

  }



  .close-btn-front:hover {

    color: #EC1C24;

    background: transparent;

    opacity: 1 !important;

    border: 2px solid #EC1C24;

  }



}





.my-profile-main {

  padding: 24px 18px 24px 18px;



  .profile-sec-inner {

    display: flex;

    gap: 14px;

    justify-content: flex-start;

    align-items: flex-end;



    img {}



    .content-inner {

      display: flex;

      flex-direction: column;

      gap: 10px;

      align-items: flex-start;



      /* ------------- UPLOAD CSV CSS ---------------- */



      .upload-imge-wrap {

        position: relative;

        width: 100%;

      }



      .upload-imge-wrap .add-blog-image {

        overflow: inherit !important;

        border: 2px solid var(--primary-clr);

        font-size: 14px;

        font-weight: 400;

        width: 100%;

        /* height: 186px; */

        color: var(--primary-clr);

        display: flex;

        margin: 0;

        padding: 11px 20px 11px 35px;

        text-align: center;

        border-radius: 30px !important;

        cursor: pointer;

        align-items: center;

      }



      .upload-icon-wrap {

        display: flex;

        justify-content: space-between;

        /* margin-top: 26px; */

      }



      .upload-imge-wrap img {

        position: absolute;

        top: 11px;

        width: 19px;

        left: 12px;

        display: flex;

        margin: auto;

        justify-content: center;

      }



      .sample-csv-nap {

        h3 {

          font-weight: 600;

          font-size: 15px;

          color: #00152B;

          margin-bottom: 16px;

          margin-top: 16px;

          text-align: center;

        }

      }



      /* ------------- UPLOAD CSV CSS ---------------- */



      a {

        background: #202020;

        color: #fff;

        font-weight: 400;

        -webkit-appearance: none;

        -moz-appearance: none;

        appearance: none;

        border-radius: 30px;

        display: flex;

        align-items: center;

        gap: 10px;

        padding: 12px 20px;

        cursor: pointer;

        font-size: 14px;

        outline: none !important;

        -webkit-transition: all 0.3sease -in-out;

        -o-transition: all 0.3s ease-in-out;

        transition: all 0.3sease -in-out;

      }





    }



  }



  .profile-form-inner {

    border: 1px solid var(--primary-clr);

    padding: 10px 10px;

    border-radius: 10px;

    margin-top: 34px;



    h2 {

      font-size: 16px;

      font-weight: 400;

      color: var(--white);

      margin-bottom: 8px;

      margin-top: 0px;

      text-align: left;

      padding: 12px 18px;

      border-radius: 7px;

      background: linear-gradient(90deg, #56C1FF 0%, #347499 100%);

    }



    .new-manual-project {

      width: 100%;

      height: 45px;

      position: relative;

      display: flex;

      align-items: center;



      h3 {

        font-size: 16px;

        font-weight: 500;

        color: var(--primary-clr);

        margin-bottom: 0;

        width: 50%;

      }



      input[type="text"],

      input[type="email"],

      input[type="number"] {

        width: 100%;

        height: 100%;

        outline: none;

        border: none;

        background: #202020;

        border-radius: 35px;

        font-size: 14px;

        font-weight: 400;

        color: #fff;

        padding: 0px 15px;



        &::placeholder {

          color: #fff;

        }

      }



    }



    .edit-profile-btn {

      margin-bottom: 15px;

      display: flex;

      justify-content: space-between;



      .left-side {

        display: flex;

        gap: 10px;

      }



      .right-side {}



      img {

        width: 20px;

      }



      button.suspend-user-btn {

        background: transparent;

        color: #AF2323;

        font-weight: 600;

        border: 2px solid #AF2323;

        -webkit-appearance: none;

        -moz-appearance: none;

        appearance: none;

        height: 43px;

        padding: 10px 13px;

        border-radius: 26px;

        display: flex;

        align-items: center;

        gap: 10px;

        cursor: pointer;

        font-size: 14px;

        outline: none !important;

        -webkit-transition: all 0.3sease -in-out;

        -o-transition: all 0.3s ease-in-out;

        transition: all 0.3sease -in-out;



        img {

          width: 24px;

        }

      }



      button.activated-user-btn {

        background: transparent;

        color: var(--primary-clr);

        font-weight: 600;

        border: 2px solid var(--primary-clr);

        -webkit-appearance: none;

        -moz-appearance: none;

        appearance: none;

        height: 43px;

        padding: 10px 13px;

        border-radius: 26px;

        display: flex;

        align-items: center;

        gap: 10px;

        cursor: pointer;

        font-size: 14px;

        outline: none !important;

        -webkit-transition: all 0.3sease -in-out;

        -o-transition: all 0.3s ease-in-out;

        transition: all 0.3sease -in-out;



        img {

          width: 24px;

        }

      }



      a {

        height: 43px;

        width: max-content;

        color: #fff !important;

        border-radius: 50px;

        align-items: center;

        border: none;

        text-align: center;

        padding: 8px 18px 8px 18px;

        display: flex;

        gap: 10px;

        align-items: center;

        background: var(--primary-clr);

        font-size: 14px;

        text-transform: capitalize;

        font-weight: 500;

        margin: 0;

      }



    }



    .basic-plan-band {

      background: linear-gradient(90deg, #56C1FF 0%, #347499 100%);

      padding: 12px 18px;

      border-radius: 7px;



      h4 {

        font-size: 20px;

        font-weight: 600;

        color: var(--white);

        margin-bottom: 8px;

        margin-top: 0px;

        text-align: left;

      }



      span {

        font-size: 16px;

        font-weight: 400;

        color: var(--white);

        margin-bottom: 0px;

        margin-top: 0px;

        text-align: left;

      }



    }



    .content-basic-plan {

      display: flex;

      width: 100%;

      justify-content: space-between;

      padding-top: 22px;

      padding-bottom: 15px;



      .left-side {

        display: flex;

        align-items: center;

        gap: 10px;



        h3 {

          font-size: 20px;

          font-weight: 600;

          color: var(--primary-clr);

          margin-bottom: 0;

          text-align: left;

        }



        p {

          font-size: 16px;

          font-weight: 400;

          color: var(--white);

          margin-bottom: 0px;

          margin-top: 0px;

          text-align: left;

        }



      }



      .right-side {

        display: flex;

        align-items: center;

        gap: 10px;



        a:nth-child(1) {

          height: 40px;

          width: max-content;

          color: var(--primary-clr) !important;

          border-radius: 50px;

          align-items: center;

          border: 2px solid var(--primary-clr);

          text-align: center;

          padding: 8px 18px 8px 18px;

          display: flex;

          gap: 10px;

          align-items: center;

          background: transparent;

          font-size: 14px;

          text-transform: capitalize;

          font-weight: 500;

          margin: 0;

        }



        a:nth-child(2) {

          height: 40px;

          width: max-content;

          color: #fff !important;

          border-radius: 50px;

          align-items: center;

          border: none;

          text-align: center;

          padding: 8px 18px 8px 18px;

          display: flex;

          gap: 10px;

          align-items: center;

          background: var(--primary-clr);

          font-size: 14px;

          text-transform: capitalize;

          font-weight: 500;

          margin: 0;

        }





      }



    }





  }



}



/* EDIT PROFILE POPUP CSS */





.small-common-popup .modal-dialog {

  max-width: 389px;

}



.small-common-popup .modal-body {

  padding: 27px;

}



.small-common-popup .modal-content {

  border-radius: 10px;

  padding: 10px;

  background-color: #000;



  h2 {

    font-size: 16px;

    font-weight: 600;

    color: var(--white);

    margin-bottom: 8px;

    margin-top: 0px;

    text-align: left;

    padding: 12px 18px;

    border-radius: 7px;

    background: linear-gradient(180deg, #56C1FF 0%, #347499 100%);

  }



}



.small-alerts-popup-nap {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 15px;



  span {

    font-size: 16px;

    font-weight: 500;

    text-align: center;

    color: #3C3C3C;

  }



  .view-profile-image img {

    width: 150px;

    height: 150px;

    object-fit: cover;

    margin-bottom: 21px;

  }



  img {

    width: 43px;

  }



  p {

    font-size: 16px;

    color: #fff;

    font-weight: 500;

    text-align: center;

    margin-bottom: 5px;

  }



  .create-manual-bns {

    display: flex;

    gap: 30px;

    justify-content: center;

    margin-right: 0px;



    a {

      background: var(--primary-clr);

      color: #fff;

      font-weight: 400;

      -webkit-appearance: none;

      -moz-appearance: none;

      appearance: none;

      border-radius: 30px;

      padding: 13px 23px;

      display: flex;

      align-items: center;

      font-size: 16px;

      outline: none !important;

      -webkit-transition: all 0.3sease -in-out;

      -o-transition: all 0.3s ease-in-out;

      transition: all 0.3sease -in-out;

    }



  }



  .suspend-alluser-bns {

    display: flex;

    gap: 30px;

    justify-content: center;

    margin-right: 0px;

    margin-top: 20px;



    a:nth-child(1) {

      background: transparent;

      color: var(--primary-clr);

      font-weight: 400;

      border: 2px solid var(--primary-clr);

      -webkit-appearance: none;

      -moz-appearance: none;

      appearance: none;

      border-radius: 30px;

      padding: 12px 40px;

      cursor: pointer;

      font-size: 16px;

      outline: none !important;

      -webkit-transition: all 0.3sease -in-out;

      -o-transition: all 0.3s ease-in-out;

      transition: all 0.3sease -in-out;

    }



    a:nth-child(2) {

      background: #EC1C24;

      color: #fff;

      font-weight: 400;

      /* border: 2px solid #4A6782; */

      -webkit-appearance: none;

      -moz-appearance: none;

      appearance: none;

      border-radius: 30px;

      padding: 12px 40px;

      display: flex;

      align-items: center;

      font-size: 16px;

      outline: none !important;

      -webkit-transition: all 0.3sease -in-out;

      -o-transition: all 0.3s ease-in-out;

      transition: all 0.3sease -in-out;

    }



  }







}







#delete-user .modal-dialog {

  max-width: 500px;

}



a.cancel-delete-link {

  border: 2px solid #56c1ff;

  background: transparent !important;

  color: #56c1ff !important;

  font-weight: 400 !important;

}







/* ======= ALL POPUP CSS ======= */













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



#chatbot-plan-popup .modal-dialog {

  height: auto;

}



.chatbot-paln-wrap {

  width: 100%;

  height: auto;

  padding: 3.5rem 1rem 2rem 1rem;

}

.chatbot-paln-wrap .row{

    --bs-gutter-y: 24px;

}

.chatbot-paln-top {

  width: 100%;

  height: auto;

  margin-bottom: 1.5rem;



  h1 {

    font-size: 28px;

    font-weight: 600;

    color: #fff;

    margin-bottom: 10px;

    text-align: center;



    span {

      color: #56C1FF;

    }

  }



  p {

    font-size: 15px;

    font-weight: 400;

    color: #fff;

    margin-bottom: 20px;

    text-align: center;

  }

}





.chatlogin-flow .modal-dialog {

  max-width: 95%;

  padding: 10px 0;

  margin: 0px auto;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.chatlogin-flow .modal-dialog .modal-content {

  height: 100%;

  border: none;

  border-radius: 8px;

  background-color: #000;

}



.chatlogin-flow .modal-dialog .modal-content .modal-body {

  height: 100%;

}



.chatlogin-flow button.btn-close {

  width: 30px;

  height: 30px;

  background-image: url(https://digestai.tgastaging.com/user/images/login-flow/back.svg);

  background-size: contain;

  outline: none;

  opacity: 1;

  box-shadow: none;

  position: absolute;

  left: 10px;

  top: 10px;

  z-index: 9;

}





.chatlogin-wrap {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.chatlogin-in {

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  position: relative;



  & img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 5px;

    object-position: bottom;

  }

}



.chatbot-paln-in {

  width: 100%;

  height: auto;

  border: 1px solid #56C1FF;

  border-radius: 20px;

  padding: 1rem;

  text-align: center;

  position: relative;



  img.tag {

    width: 40px;

    position: absolute;

    right: 10px;

    top: 10px;

    margin: 0;

  }



  img {

    width: 48px;

    margin-bottom: 15px;

  }



  h2 {

    font-weight: 500;

    font-size: 20px;

    color: #fff;

    margin-bottom: 15px;

  }



  h3 {

    font-weight: 600;

    font-size: 30px;

    color: #fff;

    margin-bottom: 15px;



    span {

      font-size: 16px;

      font-weight: 400;

    }

  }



  p {

    font-weight: 500;

    font-size: 16px;

    color: #fff;

    margin-bottom: 25px;

  }



  ul {

    padding: 0;

    margin: 0;

    margin-bottom: 30px;



    li {

      list-style: none;

      display: flex;

      align-items: center;

      font-size: 16px;

      color: #fff;

      gap: 5px;

      margin-bottom: 10px;



      &:last-child {

        margin-bottom: 0;

      }



      img {

        margin: 0;

        width: 20px;

      }

    }

  }



  a {

    width: 100%;

    display: block;

    color: #fff !important;

    border: 1px solid #56C1FF;

    padding: 0.8rem 0;

    border-radius: 30px;

    font-size: 17px;

    font-weight: 400;

  }

}



.chatbot-paln-in.best-value {

  background-image: url(../images/plan/plan-bg.svg);

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center right;



  a {

    background-color: #56C1FF;

  }

}











/* ============== DASHBOARD PAGES CSS =========== */





/* ================== DIGEST AI CSS ================= */