@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;700;800;900&display=swap");

/* goloble css  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root {
  --body-color: #f2f2f2;
  --sidebar-color: #202926;
  --sidebar-color2: #0b0e0d;
  --primary-color: #f4f2f2;
  --primary-color-light: #f4f2f2;
  --toggle-color: #ddd;
  --text-color: #000;
  --text-smoll: #a8a9ac;
  --text-smoll2: rgba(0, 0, 0, 0.6);
  --dark-color: #3aaa87;
  --dang-color: #3aaa87;
  --smoll-butt: #39ba6c;
  --icon-color: #fff;
  --icon-color2: #fff;
  --sidebar-text3: #fff;
  --sidebar-text: #fff;
  --sidebar-text2: rgba(255, 255, 255, 0.4);
  --background-color: #fff;
  --chat-color: #1a1a1b;
  --smart-back: #f5f8fb;
  --text-sm: #4f4f4f;
  --span-sm: #d0d0d0;
  --input-col: #828282;
  --search-col: #8592a3;
  --add-back: #f5f8fb;
  --smart-col: rgba(255, 255, 255, 0.4);
  --border-right: white;
  --header-colo: rgba(217, 217, 217, 0.1);
  --arrow-border: #3aaa87;
  --table-color: #212529;
  --table-back: rgba(0, 0, 0, 0.075);
  --caed-back: #f5f8fb;
  --progr-colo: #333;
  --icon-text3: #333;
  --noti_back: #fafafb;

  --trans-02: all 0.2s ease;
  --trans-03: all 0.3s ease;
  --trans-04: all 0.4s ease;
  --trans-04: all 0.5s ease;
}

body {
  height: 100vh;
  background-color: var(--body-color);
  transition: var(--trans-02);
}

body.dark {
  --body-color: #181914;
  --sidebar-color: #fff;
  --sidebar-color2: #0b0e0d;
  --primary-color: #34383c;
  --primary-color-light: #383a3c;
  --toggle-color: #fff;
  --text-color: #fff;
  --dark-color: #000;
  --icon-color: #000;
  --icon-color2: #fff;
  --sidebar-text3: #000;
  --sidebar-text: #fff;
  --sidebar-text2: #000;
  --text-smoll: #a8a9ac;
  --text-smoll2: #a8a9ac;
  --background-color: #000;
  --text-sm: #fff;
  --span-sm: #fff;
  --input-col: #828282;
  --search-col: #fff;
  --add-back: #414040;
  --smart-col: white;
  --border-right: white;
  --header-colo: #ccc;
  --arrow-border: #fff;
  --smoll-butt: #39ba6c;
  --dang-color: #3aaa87;
  --smart-back: #373f3d;
  --table-color: white;
  --table-back: #414040;
  --caed-back: #646363;
  --progr-colo: #fff;
  --icon-text3: #a8a9ac;
  --noti_back: #000;
  --chat-color: #fff;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: black;
  background-color: none;
}

li {
  list-style: none;
  margin-bottom: 16px;
}

ol,
ul {
  margin: 0px !important;
}

p {
  margin-top: 0;
  margin-bottom: 0px !important;
}

h3 {
  margin-bottom: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0px;
  font-weight: 500;
  line-height: 1.2;
}

.daterangepicker .ranges li.active {
  background-color: #146eb4 !important;
}

.btn-primary {
  background-color: #146eb4 !important;
  border-color: #146eb4 !important;
}

.daterangepicker td.active {
  background-color: #146eb4 !important;
  border-color: transparent;
  color: #fff;
}

/* -----------sidebar styling---------------- */

.logo {
  padding-left: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: start;
  flex-direction: column;
}

.name_2 {
  font-size: 14px;
  line-height: 16.94px;
  font-weight: 600;
  color: var(--smart-col);
  margin: 0;
}

.name_1 {
  font-size: 24px;
  line-height: 29px;
  font-weight: 600;
  color: var(--sidebar-text3);
  margin: 0;
}

.rig_001 {
  width: calc(100% - 290px);
  position: fixed;
  z-index: 2;
}

.rig_001.rightsm {
  width: calc(100% - 88px);
}

.right_0ak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.search_in {
  position: relative;
  width: 100%;
}

.search_in input {
  height: 30px;
  border: none;
  padding-left: 25px;
  color: var(--input-col);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
  width: 100%;
  outline: none;
  max-width: 400px;
  background-color: var(--background-color);
}

.search_in i {
  position: absolute;
  left: 0px;
  top: 8px;
  color: var(--search-col);
  font-size: 18px;
}

.sect_01 {
  padding-top: 90px;
}

.t-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

#box i {
  font-size: 18px;
  color: var(--search-col);
}

.mode .moon-sun .moon {
  font-size: 18px;
  color: var(--search-col);
}

/* Reusable CSS */

.sidebar .text {
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  opacity: 1;
}

.sidebar .image {
  display: flex;
  align-items: center;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0px;
  height: 100%;
  width: 290px;
  background-color: var(--sidebar-color);
  transition: var(--trans-02);
  z-index: 2;
  opacity: 90;
}

.sidebar header {
  position: relative;
  border-bottom: 1px solid var(--header-colo);
}

.sidebar .image-text img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.sidebar header .image-text {
  display: flex;
  align-items: center;
  padding: 20px;
}

.header .image-text .header-text {
  display: flex;
  flex-direction: column;
}

.header-text .main {
  font-weight: 600;
}

.header-text .sub {
  margin-top: -2px;
}

.sidebar header .toggle {
  position: absolute;
  top: 42%;
  right: -12px;
  transform: translateY(-50%) rotate(180deg);
  height: 30px;
  width: 30px;
  background-color: var(--dark-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--icon-color2);
  font-size: 22px;
  border: 1px solid var(--arrow-border);
  cursor: pointer;
}

.sidebar header i.fa-angle-right {
  font-size: 22px;
}

.sidebar li {
  height: 50px;
  list-style: none;
  display: flex;
  align-items: center;
}

.moon-sun .icons {
  /* display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px; */
  font-size: 20px;
}

.moon-sun .icons {
  color: #435971;
}

.sidebar li a {
  height: 100%;
  width: 100%;
  text-decoration: none;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: var(--trans-04);
  text-align: left;
}

.sidebar .menu-bar {
  height: 100%;
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.mode {
  position: relative;
  margin-right: 20px;
  width: 5px;
  cursor: pointer;
  display: none;
}

.mode .moon-sun {
  display: flex;
  align-items: center;
  position: relative;
}

.mode i {
  transition: var(--trans-03);
}

.right_0ak .mode i.sun {
  opacity: 0;
  position: absolute;
}

body.dark .right_0ak .mode i.sun {
  opacity: 1;
}

body.dark .right_0ak .mode i.moon {
  opacity: 0;
}

.switch::before {
  content: "";
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-color: transparent;
}

body.dark .switch::before {
  left: 0px;
}

body.dark .sidebar .image img {
  background-color: #fff;
}

.sidebar.close {
  width: 90px;
}

.sidebar.close .text {
  opacity: 0;
}

.sidebar.close .search-bar {
  background-color: var(--sidebar-color);
}

body.dark .search-bar input {
  color: white;
}

.sidebar.close .toggle {
  transform: translateY(-50%);
}

.home {
  position: relative;
  left: 290px;
  height: 100vh;
  width: calc(100% - 290px);
  transition: var(--trans-04);
}

.sidebar.close ~ .home {
  left: 92px;
  width: calc(100% - 92px);
}

.nav-link {
  padding: 0;
}

.nav-link a img {
  width: 26px;
  height: 26px;
}

.parent {
  display: flex;
  width: 100%;
}

.menu ul li {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.menu ul li a {
  font-weight: 500;
  font-size: 18px;
  line-height: normal;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--sidebar-text2);
  padding: 0px 12px;
}

.close:not(:disabled):not(.disabled):hover {
  opacity: 1;
}

.menu ul li a:hover {
  background: none;
}

.menu ul li.active {
  border-radius: 12px;
  background: #373f3d;
  color: #fff;
}

.menu ul li a:hover {
  border-radius: 12px;
  background: #373f3d;
  color: #fff;
}

.menu ul li.active a {
  color: var(--sidebar-text);
}

/* ====================== */
.menu {
  overflow: hidden;
}

.menu .menu-links {
  height: 100%;
  overflow: scroll;
  padding-bottom: 20px;
}

.menu .menu-links::-webkit-scrollbar {
  width: 0 !important;
  display: none;
}

.table-responsive::-webkit-scrollbar {
  width: 0 !important;
  display: none;
}

.btn:focus {
  outline: 0;
  box-shadow: none;
}

.drop_icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-right: -10px;
  position: relative;
}

.drop_icon:hover {
  background-color: #f2f2f2;
}

/* ---- header styling -------- */

.home {
  z-index: 2;
}

.home .left img {
  cursor: pointer;
}

.home .right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0px 6px 0px;
  background-color: var(--body-color);
}

.home .rig_ch_a {
  margin: 0px 20px;
}

.home .right_cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--background-color);
  width: 60%;
  gap: 16px;
  padding: 0px 20px 0px 10px;
  border: 1px solid var(--border-right);
  border-radius: 8px;
}

.right .school_name_icon {
  width: 58%;
  flex-wrap: nowrap;
  padding: 0px 12px;
}

.notifiction-JPflex {
  position: relative;
  cursor: pointer;
  color: var(--text-color);
}

.notification-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  display: inline-flex;
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 10px;
}

.pro_log_sm {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 16px;
}

.aut_ak {
  position: relative;
}

.profil_log9 .log_butsm {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #ff7a7a;
  color: #da0000;
  margin-top: 16px;
  background: var(--background-color);
  outline: none;
  padding: 10px;
  border-radius: 6px;
  gap: 10px;
  justify-content: center;
}

.aut_ak span {
  position: absolute;
  background: rgba(113, 221, 55, 1);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  bottom: 6px;
  right: 29px;
  border: 2px solid #fff;
}

.aut_ak .log_span0 {
  position: absolute;
  background: rgba(113, 221, 55, 1);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  bottom: 5px;
  left: 29px;
  border: 2px solid #fff;
}

.log_ou0 {
  display: flex;
  align-items: start;
  gap: 10px;
  flex-direction: column;
}

.log_ou0 .loin_text_na {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-align: left;
  color: var(--text-color);
}

.log_ou0 .loin_texsp {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  text-align: left;
  color: var(--text-color);
}

.toggle1 {
  padding: 7px 10px;
  /* margin: 10px auto; */
  position: relative;
  border-radius: 4px;
  cursor: context-menu;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.menu_321 {
  padding: 16px 8px;
  border-radius: 5px;
  display: none;
  position: absolute;
  top: 65px;
  right: 45px;
  min-width: 200px;
  background-color: var(--icon-color);
  box-shadow: 0 6px 20px #1a181e29;
}

.drop_pak1 p {
  font-size: 14px;
  color: var(--text-color);
}

/* notification------csss------ */

.active_infor {
  position: absolute;
  display: flex;
  width: 100%;
  max-width: 500px;
  z-index: 1;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  right: 118px;
  border-radius: 16px;
  border: 1px solid #e5e6ea;
  background: var(--background-color);
  box-shadow: 0px 4px 22.4px 0px rgba(0, 0, 0, 0.25);
  top: 75px;
  display: none;
}

.active_infor .live_cheat::-webkit-scrollbar {
  display: none;
}

.active_infor .live_cheat {
  width: 100%;
  overflow-x: auto;
  height: 480px;
  transition: all 0.7s;
}

.active_infor .live_cheat .author_item {
  display: flex;
  align-items: flex-start;
  width: 100%;
  justify-content: space-between;
  flex-direction: column;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 12px;
  margin-bottom: 8px;
}

.active_infor .live_cheat .author_item .follow0 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.active_infor .live_cheat .author_item .follow0 .author_icon_na {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  width: 100%;
}

.active_infor .live_cheat .author_item .follow0 .author_icon_na .icon_liv {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.active_infor
  .live_cheat
  .author_item
  .follow0
  .author_icon_na
  .icon_liv
  .name_img {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.active_infor
  .live_cheat
  .author_item
  .follow0
  .author_icon_na
  .icon_liv
  .name_img
  .start_img {
  color: #686d7d;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.active_infor
  .live_cheat
  .author_item
  .follow0
  .author_icon_na
  .icon_liv
  .folloing_i {
  color: #3aaa87;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.2px;
  cursor: pointer;
}

.active_infor
  .live_cheat
  .author_item
  .follow0
  .author_icon_na
  .icon_liv
  .img_cost {
  width: 33px;
  height: 47px;
  border-radius: 5px;
  border: 0.5px solid #fff;
  background: url(<path-to-image>) lightgray 50% / cover no-repeat, #d9d9d9;
}

.active_infor .live_cheat .author_item .follow01 {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.active_infor .live_cheat .author_item .follow01 .ago_see {
  color: #686d7d;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  padding-top: 10px;
}

.active_infor .live_cheat .author_item .follow01 .span_live_img {
  color: #131417;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.active_infor
  .live_cheat
  .author_item
  .follow01
  .span_live_img
  .social_icon_smoll {
  width: 16px;
  height: 16px;
}

.active_infor .live_cheat .popup_content {
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 12px;
  margin-bottom: 8px;
}

.active_infor .live_cheat .popup_content .social_m {
  display: flex;
  align-items: center;
}

.active_infor .live_cheat .popup_content .social_m .img_popup {
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
}

.active_infor .live_cheat .popup_content .social_m .popup_span {
  padding-left: 8px;
  color: var(--text-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
}

.active_infor .live_cheat .popup_content .social_m .popup_p {
  display: flex;
  padding: 2px 4px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  background: #3aaa871a;
  color: #3aaa87;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  margin-left: 10px;
}

.date_tab {
  margin-top: 12px;
  display: flex;
  padding: 4px 6px;
  align-items: flex-start;
  gap: 19px;
  border-radius: 4px;
  border: 1px solid #e5e6ea;
  background: var(--noti_back);
  width: 100%;
}

.date_tab .date_ch_sm {
  display: flex;
  align-items: start;
  gap: 10px;
}

.date_tab .date_tab1 {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  flex-direction: column;
}

.date_tab .date_tab1 .date_img {
  width: 16px;
  height: 16px;
}

.date_tab .date_tab1 .date_font {
  color: var(--text-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

.date_tab .date_tab1 .date_font i {
  color: var(--text-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  padding-right: 4px;
}

/* notification------csss------end */
/* registreation---form--csss--start---- */

.section-registretion {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100%; */
}

.section-registretion .container_form {
  position: relative;
  background: #fff;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  overflow: auto;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
}

.section-registretion .container_form .imag-sec0 {
  background: linear-gradient(180deg, #202926 34.88%, #000 100%);
  width: 34%;
}

.imgBx {
  width: 100%;
  max-width: 580px;
  /* background: linear-gradient(180deg, #202926 34.88%, #000 100%); */
  backdrop-filter: blur(75px);
  text-align: center;
  padding-top: 50px;
  /* height: 100vh; */
  /* overflow: hidden; */
}

.imgBx .imag-logo {
  width: 163px;
  height: 50px;
}

.imgBx .imag-img {
  width: 100%;
  height: 380px;
  padding: 0px 30px;
}

.imgBx .text-reg-h {
  color: #fff;
  font-family: Inter;
  font-size: 34px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding-top: 50px;
}

.imgBx .text--site {
  color: #dbdbdb;
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-top: 10px;
}

.formBx {
  width: 100%;
  padding: 50px 65px 20px 65px;
}

.righform_chat {
  width: 66%;
  background-color: #fff;
}

.reg-successo1 {
  padding: 50px 65px 20px 65px;
}

.formBx .title .tittle-font {
  color: #3e3e3e;
  font-family: Inter;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding-bottom: 6px;
}

.formBx .title .tittle-span {
  color: #757575;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.formBx .title .tittle-span-login {
  /* width: 100%; */
  max-width: 250px;
}

.formBx .title .tittle-span .tittle-green {
  color: #3aaa87;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

.user_details {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 50px;
}

.user_details .input-1 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.tittle-01,
.success-img {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-img .success-text-p {
  color: #000;
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding-bottom: 10px;
}

.success-img .text-succ-font {
  max-width: 370px;
}

.success-img .success-text-span {
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.57px;
  letter-spacing: -0.47px;
  text-align: center;
  color: #828282;
  display: block;
  /* padding: 0px 100px 70px 100px; */
  max-width: 380px;
}

.success-img .proceed_butt {
  font-family: Inter;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.36px;
  text-align: center;
  width: 100%;
  max-width: 427px;
  height: 50px;
  top: 681px;
  padding: 10px 8px 10px 8px;
  gap: 8px;
  border: none;
  outline: none;
  border-radius: 6px;
  opacity: 0px;
  background-color: #3aaa87;
  color: #fff;
  cursor: pointer;
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-img .thanx_img {
  margin: 30px 0px 20px 0px;
}

.input-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.conf-pass {
  align-items: flex-end !important;
}

.input-1 .input_box {
  width: 100%;
}

.input-1 .input_box input {
  width: 100%;
  margin-top: 8px;
}

.input-1 .input_box select {
  width: 100%;
  margin-top: 8px;
}

.input-1 .input_box .tradio-item input {
  margin-top: 0px;
}

.input_box label {
  color: #000;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  /* padding-bottom: 8px; */
}

.input_box .radio-item1 {
  color: #000;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-bottom: 8px;
  padding-top: 7px;
}

.input_box .tradio-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.input_box .tradio-item .text-radio-01 {
  /* width: 100%; */
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  background: #fff;
  display: flex;
  height: 40px;
  padding: 10px 12px;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  color: #292929;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.input_box .tradio-item .text-radio-dis {
  color: #d0d0d0 !important;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.input_box .tradio-item .text-radio-01 .Principal {
  width: 24px;
  height: 24px;
  accent-color: #31a17e;
}

.input_box .tradio-item .text-radio-01 .Librarian {
  width: 24px;
  height: 24px;
}

.input_box h2 {
  color: #000;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* .input_box label::after {
  content: " *";
  color: red;
} */

.input_box input {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 5px;
  transition: all 120ms ease-out 0s;
  height: 40px;
  padding: 10px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #828282;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.input_box select {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 5px;
  transition: all 120ms ease-out 0s;
  height: 40px;
  padding: 10px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #828282;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.reg_btn {
  padding-top: 25px;
}

.formBx .bottom-marg {
  margin-top: 0px;
}

.input_password_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  padding-top: 14px;
}
.confirm-wrap {
  margin-top: 16px;
}

.input_password_item .adio-item {
  width: 100%;
  /* margin-top: 20px; */
}

.input_password_item .adio-item .text-radio-label {
  width: 100%;
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  /* padding-bottom: 8px; */
  margin-bottom: 8px;
}

.input_password_item .password_log {
  margin-top: 0px;
}

.input_password_item .adio-item .password02 {
  position: relative;
  margin-top: 0px;
}

.input_password_item .adio-item .pass_03 {
  margin-top: 8px;
}

.input_password_item .adio-item .password02 input {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 5px;
  transition: all 120ms ease-out 0s;
  height: 40px;
  padding: 10px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #828282;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.input_password_item .adio-item .password02 .characters {
  color: #666;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-top: 4px;
}

.password02 span.field-icon {
  float: right;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  z-index: 2;
}

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

.reg_btn button,
.reg_btn .button021 {
  height: 45px;
  width: 100%;
  border: none;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  background: #3aaa87;
  border-radius: 5px;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.reg-succs001 {
  display: none;
}

/* .reg-success00-text {
  display: none;
} */

.reg-success012 {
  display: block;
}

.password_log .tittle-log-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.password_log .tittle-log-page .pass-lable {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
  text-align: left;
  color: #000;
}

.password_log .tittle-log-page .forgot_class {
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.94px;
  text-align: right;
  color: #3aaa87;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

/* checkbox----css */

.accented {
  accent-color: #289a53;
}

label {
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
  gap: 10px;
}

fieldset {
  display: flex;
  flex-direction: column;
  border: none;
  gap: 1rem;
}

.check-box .lable-check0 {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
  text-align: left;
}

.input_password_item .input_box .radio_log {
  padding-top: 0px !important;
}

.formBx .get_otp {
  width: 349px;
  height: 50px;
  padding: 10px;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid #3aaa87;
  opacity: 0px;
  font-family: Inter;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.36px;
  text-align: left;
  background-color: #fff;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 60px;
  cursor: pointer;
}

/* checkbox----css--end */

/* otp--start---- */

#otp {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 145px auto 20px auto;
}

.inputs {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  gap: 30px;
}

.inputOtp {
  width: 60px;
  height: 60px;
  border: 1px solid #7d7d7d;
  background: transparent;
  font-size: 18px;
  text-align: center;
  border-radius: 12px;
  outline: none;
}

.otp_gap {
  display: flex;
  align-items: center;
}

.otp_gap .font-change {
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
  line-height: 16.94px;
  color: #2070b4;
  cursor: pointer;
  margin-left: 10px;
  background-color: transparent;
  border: none;
  outline: none;
}

.otp_log_in .resend {
  text-align: start;
}

.otp_log_in .resend .resend_otp {
  font-family: Inter;
  font-size: 16px;
  width: 100%;
  font-weight: 600;
  line-height: 19px;
  display: inline-block;
  color: #000 !important;
  max-width: max-content;
  height: 39px;
  padding: 10px;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid #3aaa87;
  opacity: 0px;
  margin-top: 25px;
  background-color: transparent;
  cursor: pointer;
}

.otp_log_in .resend .resend_otp01 {
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.36px;
  color: #2070b4;
  border: none;
  background-color: transparent;
  outline: none;
  margin-top: 20px;
  margin-bottom: 100px;
  cursor: pointer;
}

.otp_log_in .resend .resend_otp .time_otp {
  color: #3aaa87;
}

.bottan {
  padding-top: 20px;
  margin-top: 0px;
}

/* forgot_password___-- */

.formBx .forgot_but {
  padding-top: 250px;
}

/* forgot_password___-end- */

/* otp--start---end- */

@media screen and (max-width: 1060px) {
  .section-registretion .container_form {
    flex-direction: column;
  }

  .section-registretion .container_form .imag-sec0 {
    width: 100%;
  }

  .righform_chat {
    width: 100%;
  }

  .section-registretion .container_form {
    overflow: auto;
  }

  .imgBx {
    width: 100%;
    padding-top: 50px;
    max-width: 100%;
    height: max-content;
    padding-bottom: 50px;
  }

  .password_log .tittle-log-page {
    padding-bottom: 8px;
  }

  .imgBx .text-reg-h {
    font-size: 22px;
    padding-top: 30px;
  }

  .imgBx .imag-img {
    width: 300px;
    height: 250px;
    padding-bottom: 0px;
  }

  .imgBx .text--site {
    font-size: 12px;
    padding: 10px 20px 0px 20px;
  }

  .formBx {
    width: 100%;
    padding: 30px 20px 30px 20px;
  }

  .formBx .title .tittle-font {
    font-size: 22px;
  }

  .formBx .title .tittle-span {
    font-size: 12px;
  }

  .user_details {
    padding-top: 20px;
    gap: 12px;
  }

  .user_details .input-1 {
    width: 100%;
    flex-wrap: wrap;
    gap: 12px;
  }

  .input_password_item {
    flex-wrap: wrap;
    gap: 12px;
  }

  .formBx .input_password_item .confirm_respon {
    margin-top: 0px;
  }

  .input_password_item .adio-item {
    margin-top: 12px;
  }

  .reg_btn {
    padding-top: 30px;
    margin-top: 0px;
  }

  .input_box .tradio-item .text-radio-01 .Principal {
    width: 20px;
    height: 20px;
  }

  .input_box .tradio-item .text-radio-01 .Librarian {
    width: 20px;
    height: 20px;
  }

  .success-img img {
    width: 150px;
    height: 150px;
  }

  .success-img .success-text-p {
    font-size: 18px;
  }

  .formBx .get_otp {
    width: 100%;
    height: auto;
    padding: 8px;
    font-size: 14px;
    margin-top: 14px;
    margin-bottom: 40px;
  }

  .input_password_item .password_log {
    margin-top: 0px;
  }

  #otp {
    margin: 100px auto 20px auto;
  }

  .inputOtp {
    width: 45px;
    height: 45px;
  }

  .otp_log_in .resend .resend_otp {
    font-size: 14px;
    max-width: 270px;
    height: auto;
    padding: 10px;
    margin-top: 14px;
  }

  .input_box input {
    height: 35px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .formBx .title .tittle-font {
    padding-bottom: 0px;
  }

  .formBx .forgot_but {
    padding-top: 40px;
  }

  .reg_btn button {
    height: 35px;
    font-size: 16px;
  }

  .input_password_item .adio-item .password02 input {
    height: 35px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .fa-fw {
    font-size: 14px;
  }

  .password02 span.field-icon {
    top: 6px;
  }

  .input_password_item .adio-item .password02 {
    margin-top: 0px;
  }

  .input_password_item .adio-item .password02 .characters {
    font-size: 10px;
  }

  .success-img .thanx_img {
    margin: 20px 0px 10px 0px;
  }
}

.reg-success {
  padding-bottom: 20px;
}

/* .registr01{
  overflow: scroll;
  height: 100vh;
} */

/* .formBx{
  overflow-y: scroll;
  height: 750px;
} */

.formBx::-webkit-scrollbar {
  display: none;
}

/* registreation---form--csss--end---- */

/* main section start  css */

.sect_01 {
  border-bottom: 1px solid #d0d0d0;
}

.bread_ak1 {
  padding: 0px 20px 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.marquee {
  width: 100%;
  background: #3aaa87;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  padding: 16px 0px;
  line-height: 6px;
  letter-spacing: 2px;
  text-transform: capitalize;
  max-width: 2243px;
  border-radius: 4px;
}

.marquee-inner {
  display: flex;
  gap: 0px;
  width: max-content;
  animation: marquee-scroll1 180s linear infinite;
}

.marqu_text {
  font-size: 20px;
  font-weight: 500;
  padding-right: 10px;
}

/* Infinite Loop Keyframes */
@keyframes marquee-scroll1 {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

.breadcr {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: wrap;
}

.breadcr li {
  margin: 0;
}

.breadcr .bread1 {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.breadcr .bread1 a {
  color: var(--text-color);
}

.breadcr .bread3 {
  color: var(--text-smoll2);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.breadcr li .fa-angle-right {
  color: var(--text-smoll);
}

.section-big {
  color: var(--text-color);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.wab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0px 20px 20px 20px;
}

.butt_001 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.button_deledt {
  flex-wrap: nowrap;
  width: 100%;
}

.butt_001 button {
  display: flex;
  height: 40px;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  outline: none;
  cursor: pointer;
}

.butt_1 i {
  width: 16px;
  height: 14px;
}

.butt_001 .butt_1 {
  border: 1px solid var(--text-color);
  background: var(--background-color);
  color: var(--text-color);
}

.butt_001 .cancel_but {
  width: 130px;
}

.butt_001 .butt_2 {
  background: #3aaa87;
  color: #fff;
  border: none;
  width: 100%;
  min-width: 130px;
  white-space: nowrap;
}

.book_tit {
  width: 115px;
  font-size: 14px;
  cursor: pointer;
}

.text_wrap {
  white-space: nowrap;
}

.butt_001 .popup-flex .save_chat {
  width: 130px;
}

.butt_001 button span {
  width: 24px;
  height: 24px;
}

.wab-head_1 {
  margin: 20px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 20px;
}

.img_01 {
  display: flex;
  padding: 20px 20px 0px 20px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-radius: 8px;
  border: 1px solid #3aaa87;
  background: #3aaa87;
}

.Reference_0 .wel_0 {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.Reference_0 .Reference_1 {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.box_04 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-evenly;
  align-items: unset;
  width: 100%;
}

.box_07 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}

.box_a01 {
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 16px;
  border-radius: 6px;
  background: var(--background-color);
  width: 100%;
}

.box_04 .smoll_a {
  color: var(--text-sm);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  align-items: center;
}

.box_04 .smoll_a span {
  color: #27ae60;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  padding-left: 3px;
}

.box_04 .small_a32 span {
  color: #ff5470;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.box_04 .big_a {
  color: var(--text-color);
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.chart_ak {
  padding: 20px;
  background-color: var(--icon-color);
  border-radius: 8px;
  min-height: 205px;
  height: 100%;
}

#myChart {
  height: 124px !important;
  width: 140px !important;
}

#myChartjs {
  height: 124px !important;
  width: 140px !important;
}

#myChartas {
  height: 124px !important;
  width: 140px !important;
}

.chart_a32 .head_ak1 {
  color: var(--text-color);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.flex_001 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 15px;
}

.col_0021 {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.col_0021 .cola_1 {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: #e74c3c;
  border-radius: 50%;
}

.col_0021 .cola_2 {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: rgb(54, 162, 235);
  border-radius: 50%;
}

.col_0021 .cola_3 {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: rgb(255, 205, 86);
  border-radius: 50%;
}

.col_0021 .cola_4 {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: #164475;
  border-radius: 50%;
}

.col_0021 .cola_5 {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: rgb(204, 209, 209);
  border-radius: 50%;
}

.colo_ak p {
  color: var(--text-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.colo_ak {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
}

.colo_ak .span_0021 {
  color: var(--text-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#myChart2 {
  height: 396px !important;
  width: 100% !important;
}

#myChartah {
  height: 333px !important;
  width: 100% !important;
}

.sect_0101 {
  display: grid;
  grid-template-columns: auto 345px;
  column-gap: 20px;
  margin: 0px 20px 20px 20px;
}

.sect_01 .chart_01 {
  color: var(--text-color);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.smoll_cart_img {
  height: 220px;
}

/* 
.smool_two_cart {
  margin-top: 20px;
} */

.chart_231 {
  background-color: var(--icon-color);
  border-radius: 8px;
  padding: 20px;
}

.chart_231 .chart_01 {
  color: var(--text-sm);
}

.canvasjs-chart-canvas {
  border-radius: 8px;
}

.canvasjs-chart-container .canvasjs-chart-credit {
  display: none;
}

/* popup---dashbord--- */

.popup-container {
  display: none;
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 50px;
}

.popup-content {
  width: 93%;
  max-width: 950px;
  margin: 0px auto;
  background: var(--background-color);
  padding: 16px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  border-radius: 6px;
  position: relative;
  padding-top: 20px;
}

.popup-content .popup_bottom_bor {
  border-bottom: 1px solid #e6e6e6;
}

.pop_in_anre {
  padding: 20px 0px !important;
}

.popup-content .dash_new_message {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 0px 20px;
  margin-bottom: 20px;
}

.popup-content .dash_new_message .dash_popup_left {
  width: 100%;
  border-right: 1px solid #cecece;
  padding-right: 20px;
  margin-right: 20px;
}

.popup-content .tittle_popup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding: 0px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.popup-content .tittle_popup .new_mass {
  font-size: 24px;
  font-weight: 500;
  line-height: 28.13px;
  text-align: center;
  color: var(--text-color);
}

.popup-content .close0 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  cursor: pointer;
}

.wab-heaan {
  background: var(--background-color);
  margin: 20px 0px 0px 0px;
}

.web_inooa {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  color: var(--text-color);
}

.cancel_but08 {
  width: 100%;
}

.save_chat08 {
  width: 100%;
}

.schsm {
  margin: 0px !important;
}

.pdf_chatsm {
  border: 0.5px solid #e3e3e3;
  border-radius: 4px;
  padding: 8px 12px;
  position: relative;
  width: 100%;
}

.uplod_exe .excup01 {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
}

.popup-contsna {
  padding: 200px 0px !important;
}

.uplod_exe .uplesms01 {
  width: 16px;
  height: 16px;
  background-color: #e6e6e6;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.line_uplosm {
  position: absolute;
  bottom: 0px;
  height: 3px;
  width: 100%;
  max-width: 385px;
  color: #3aaa87;
  background-color: #3aaa87;
  left: 0px;
}

.test_inpsm {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.test_inpsm button {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  color: #3aaa87;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.popup-conta {
  padding: 15px 0px !important;
}

.popup-content09 {
  padding: 0px !important;
  width: 93%;
  max-width: 960px !important;
}

.popup-content09ah {
  padding: 0px !important;
  width: 95%;
  max-width: 1050px !important;
}

.pop_text_an {
  height: 100vh;
  max-height: 95vh;
  overflow: scroll;
  position: relative;
}

.pop_text_an::-webkit-scrollbar {
  display: none;
}

.contsma {
  padding: 20px !important;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 24px;
}

.dropdown-menu {
  cursor: pointer;
}

.pop_up_chat {
  max-width: 500px !important;
}

.rohar_am {
  padding-bottom: 0px !important;
}

.uplod_exe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.uplod_exe .excup {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #676767;
}

.uplod_exe .uplesms {
  font-size: 14px;
  font-weight: 700;
  line-height: 16.94px;
  text-align: center;
  color: #3aaa87;
}

.popsm {
  padding: 0px !important;
  margin-bottom: 0px !important;
  width: 100%;
}

.popsm .h3_sma {
  font-size: 22px !important;
}

.popup-content span:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.detsm {
  margin: 0px !important;
}

.show {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.more-articles {
  margin: 30px 30px 50px;
  font-size: 20px;
}

.more-articles a {
  margin: 0 10px;
  text-decoration: underline;
}

.dash_popup {
  width: 100%;
  padding: 14px 0px 14px 0px;
  gap: 0px;
  border-radius: 12px;
  border: 2px;
  opacity: 0px;
  border: 2px dashed #3aaa87;
  background: #3aaa871a;
  text-align: center;
}

.dash_popup .image_file_01 {
  display: none;
}

.dash_new_message .dash_popup label {
  width: 85px;
  height: 27px;
  padding: 6px 10px 6px 10px;
  gap: 8px;
  border-radius: 6px;
  opacity: 0px;
  cursor: pointer;
  font-family: Inter;
  font-size: 12px;
  font-weight: 500;
  line-height: 14.52px;
  background-color: #3aaa87;
  color: #fff;
  margin: 6px auto;
  text-align: center;
}

#image-display {
  position: relative;
  width: 100%;
  gap: 0px;
  border-radius: 14px;
  opacity: 0px;
}

#image-display figure {
  width: 100%;
  margin: 0;
}

#image-display img {
  width: 100%;
  border-radius: 14px;
  height: 175px;
}

#image-display figcaption {
  font-size: 0.8em;
  text-align: center;
  color: #5a5861;
}

.active_image {
  border: 2px solid #3aaa87;
}

.dash_new_message .dash_popup .file_uplo {
  font-family: Roboto;
  font-size: 12px;
  font-weight: 600;
  line-height: 14.06px;
  text-align: center;
  color: var(--text-color);
  padding-top: 6px;
}

.dash_new_message .dash_popup .image_size {
  font-size: 10px;
  font-weight: 400;
  line-height: 12.1px;
  text-align: center;
  color: var(--text-sm);
  /* padding-bottom: 6px; */
}

.dash_new_message .dash_popup .image_png_font {
  font-size: 10px;
  font-weight: 400;
  line-height: 12.1px;
  text-align: center;
  color: var(--input-col);
  padding: 6px 0px;
}

.dash_new_message .text_area_massage label {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.94px;
  text-align: left;
  color: var(--text-color);
  margin: 0px !important;
  padding-bottom: 10px;
}

.dash_new_message .text_area_mass {
  margin: 20px 0px 12px 0px;
}

.dash_new_message .text_are {
  margin: 0px 0px 12px 0px;
}

.dash_new_message .text_area_massage #tittle_text,
.dash_new_message .text_area_massage #tittle_text_count {
  width: 100%;
  height: 37px;
  padding: 8px 12px 8px 12px;
  gap: 8px;
  border-radius: 6px;
  opacity: 0px;
  resize: none;
  overflow: hidden;
  outline: none;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
  text-align: left;
  color: var(--input-col);
  border: 1px solid var(--span-sm);
  background: var(--background-color);
}

.dash_new_message .text_area_massage #tittle_text_count {
  height: auto;
}

.text_area_massage #select_option {
  width: 100%;
  height: 40px;
  padding: 0px 8px 0px 8px;
  gap: 0px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0px;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
  outline: none;
  color: var(--input-col);
  border: 1px solid var(--span-sm);
  background: var(--background-color);
}

.popup-content .button_save0 {
  margin: 20px;
}

.popup-content .save_button {
  width: 100%;
  padding: 10px 8px 10px 8px;
  gap: 8px;
  border-radius: 4px;
  opacity: 0px;
  font-family: Inter;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.36px;
  text-align: center;
  color: #fff;
  background-color: #3aaa87;
  border: none;
  cursor: pointer;
}

.dash_popup_right {
  width: 100%;
}

.dash_popup_right .preview_sec .previ {
  font-size: 20px;
  font-weight: 600;
  line-height: 23.44px;
  margin-bottom: 20px;
  color: var(--text-color);
}

#bg-selector {
  border-top: 1px solid #cecece;
  margin-top: 20px;
}

#bg-selector .bg_select {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-align: left;
  padding-top: 20px;
  padding-bottom: 10px;
  color: var(--text-color);
}

.color {
  width: 32px;
  height: 32px;
  display: inline-block;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
}

.Pastel_Pink {
  background-color: #eca9a9;
}

.sunset {
  background-color: #ecd0a9;
}

.mantis {
  background-color: #7fca7f;
}

.pale_cornflower_blue {
  background-color: #a9cdec;
}

.lavender_rose {
  background-color: #eca9dd;
}

.color_left {
  margin-left: 10px;
}

/* bacground-color-change end */

.col_back .background_change_color {
  padding: 10px;
  background-color: #eca9a9;
  border-radius: 10px;
}

.col_back .background_change_color .time_back {
  font-family: Inter;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  text-align: left;
  color: #fff;
  padding-top: 10px;
}

.col_back .background_change_color .happy_change {
  font-family: Inter;
  font-size: 13.52px;
  font-weight: 500;
  line-height: 16.36px;
  text-align: left;
  color: #000;
  padding-top: 10px;
}

.col_back .background_change_color .change_massage {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
  text-align: left;
  color: #fff;
  padding-top: 10px;
}

/* popup---dashbord---end */

/* cart_dash_f--css */
.follower {
  /* gap: 20px; */
  margin: 0px 20px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 20px;
}

.follower .grow_itam {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 12px;
  background: var(--background-color);
  width: 100%;
}

.follower .grow_itam .following {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 20px;
}

.follower .grow_itam .following h3 {
  color: var(--text-color);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.2px;
}

.follower .grow_itam .following .drop_select select {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #e5e6ea;
  background: var(--caed-back);
  color: var(--text-color);
  outline: none;
}

.follower .grow_itam .grow_item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin-top: 20px;
}

.follower .grow_itam .grow_item .font_net .font_h3 {
  color: var(--text-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

.follower .grow_itam .grow_item .font_net .font_p {
  color: #686d7d;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.follower .grow_itam .grow_item .net_info {
  display: flex;
  padding: 12px;
  align-items: flex-start;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #e5e6ea;
}

.follower .grow_itam .grow_item .net_info .grow_img {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.follower .grow_itam .grow_item .net_info .grow_img .imag_smoll {
  width: 24px;
  height: 24px;
}

.follower .grow_itam .grow_item .net_info .font_span .data {
  color: #3aaa87;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.2px;
}

.follower .grow_itam .grow_item .net_info .grow_img .data_1 {
  color: var(--text-color);
}

.follower .grow_itam .grow_item .net_info .font_span {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.follower .grow_itam .grow_item .net_info .grow_img .font_h4 {
  color: var(--text-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  font-family: Inter;
}

.follower .grow_itam .grow_item .net_info .icon_img_grow {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.follower .grow_itam .grow_item .net_info .icon_img_grow .font_line {
  color: var(--text-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

.follower .grow_itam .grow_item .net_info .icon_img_grow .image_ic {
  width: 14px;
  height: 14px;
}

.follower .grow_itam .grow_item .net_info .icon_img_grow .span_parsant {
  color: #00bfff;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}

.follower .grow_itam .chart_in {
  width: 100%;
  height: 380px;
}

.follower .grow_itam .chart_in #myChart {
  width: 100% !important;
  height: 100% !important;
}

.Activities {
  display: flex;
  width: 100%;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-radius: 16px;
  background: var(--background-color);
  height: max-content;
}

.active_sec_icon {
  margin-top: 20px;
}

.Activities .Active_auther {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.Activities .Active_auther .live_span {
  color: var(--text-color);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.2px;
}

.Activities .live_cheat::-webkit-scrollbar {
  display: none;
}

.Activities .live_cheat {
  width: 100%;
  overflow-x: auto;
  height: 187px;
}

.Activities .cheat_liv2 {
  width: 100%;
  overflow-x: auto;
  height: 152px;
}

.Activities .live_cheat .author_item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  justify-content: space-between;
  flex-direction: column;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.Activities .live_cheat .author_item .follow0 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.Activities .live_cheat .author_item .follow0 .author_icon_na {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  height: auto;
  width: 100%;
}

.Activities .live_cheat .author_item .follow0 .author_icon_na .smoll1_img {
  width: 32px;
  height: 32px;
}

.Activities .live_cheat .author_item .follow0 .author_icon_na .icon_liv {
  width: 100%;
}

.Activities
  .live_cheat
  .author_item
  .follow0
  .author_icon_na
  .icon_liv
  .name_img {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  font-family: Inter;
}

.Activities
  .live_cheat
  .author_item
  .follow0
  .author_icon_na
  .icon_liv
  .start_img {
  color: #686d7d;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  padding-top: 4px;
}

.Activities
  .live_cheat
  .author_item
  .follow0
  .author_icon_na
  .icon_liv
  .img_cost {
  width: 33px;
  height: 47px;
  border-radius: 5px;
  border: 0.5px solid #fff;
  background: url(<path-to-image>) lightgray 50% / cover no-repeat, #d9d9d9;
}

.Activities .live_cheat .author_item .follow01 {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 12px;
  width: 100%;
}

.Activities .live_cheat .author_item .follow01 .text_auth {
  display: flex;
  align-items: end;
  justify-content: end;
  flex-direction: column;
}

.Activities .live_cheat .author_item .follow01 .reads {
  display: flex;
  align-items: start;
  flex-direction: column;
}

.Activities .live_cheat .author_item .space_icon {
  align-items: start;
}

.Activities .live_cheat .author_item .follow01 .ago_see {
  color: var(--text-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.Activities .live_cheat .author_item .follow01 .span_live_img {
  color: #686d7d;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.Activities
  .live_cheat
  .author_item
  .follow01
  .span_live_img
  .social_icon_smoll {
  width: 24px;
  height: 24px;
}

/* cart_dash_f--css--end */

/* event--section--csss----dash */

.event {
  display: flex;
  width: 100%;
  padding: 20px 20px;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-direction: column;
}

.wraapsm {
  margin-top: 20px !important;
}

.event .selling_item {
  /* width: 45%; */
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 12px;
  background: var(--background-color);
  width: 100%;
}

.book_detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 20px;
}

.book_detail900 {
  display: flex;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.tab_insm {
  display: flex;
  align-items: center;
  gap: 16px;
}

.book_detail009 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 20px;
}

.detbook {
  padding-top: 20px;
  border-top: 1px solid #c9c9c9;
}

.mism {
  padding-bottom: 20px;
}

.event .selling_item .book_detail h3 {
  color: var(--text-color);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.event .selling_item .book_detail span {
  color: #676767;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.event .selling_item .book_item_in {
  width: 100%;
}

.event .selling_item .book_item_in .tab-_item_list .name_book {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 10px;
}

.event .selling_item .book_item_in .tab-_item_list .name_book .image_book {
  width: 40px;
  height: 60px;
}

.event .selling_item .book_item_in .tab-_item_list .name_book .star {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.event .selling_item .book_item_in .tab-_item_list .name_book .star .td_item {
  font-size: 12px;
  font-weight: 600;
  line-height: 14.52px;
  text-align: left;
  color: var(--text-color);
}

.event
  .selling_item
  .book_item_in
  .tab-_item_list
  .name_book
  .star
  .star_icon1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.event
  .selling_item
  .book_item_in
  .tab-_item_list
  .name_book
  .star
  .star_icon1
  img {
  width: 17px;
  height: 17px;
}

.back_ak213 .table_item_text {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  color: var(--text-color);
}

.Activities .top_readers {
  height: 460px;
}

.tab-_item_list {
  background: var(--background-color);
}

.thead-dark_item {
  vertical-align: middle;
  color: var(--text-color);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  line-height: 14.52px;
  letter-spacing: 0.04em;
  padding: 8px 16px 8px 16px;
  gap: 12px;
  opacity: 0px;
  background-color: var(--caed-back);
}

.fixed-header {
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 0px;
}

.fixed-header tbody {
  display: block;
  width: 100%;
  overflow: auto;
  max-height: 421px;
}

.fixed-header tbody::-webkit-scrollbar {
  display: none;
}

.fixed-header thead tr {
  display: block;
}

.fixed-header th,
.fixed-header td {
  width: 26%;
  border: none;
}

.back_ak213 .tr_dark_itemin {
  padding-top: 20px;
}

.back_ak213 .tr_dark_itemi {
  border-top: none;
}

.thead-dark_item tr th {
  vertical-align: middle;
  white-space: nowrap;
  border: none;
}

.fixed_header tbody::-webkit-scrollbar {
  display: none;
}

/* event--section--csss----dash--end */

/* Reservation List--css */

.tab-itemJP213 .reservation th {
  font-size: 12px !important;
}

.custmer56AJP .book_item {
  padding: 4px 10px 4px 10px;
  gap: 10px;
  border-radius: 54px;
  opacity: 0px;
  background: #39ba6c1a;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  text-align: left;
  color: #39ba6c;
  outline: none;
  border: none;
}

.book_item01 {
  background-color: #280bb91a !important;
  color: #280bb9 !important;
}

.book_item00 {
  background-color: #ff00001a !important;
  color: #ff0000 !important;
}

.book_item90 {
  background-color: #8e82001a !important;
  color: #b57610 !important;
}

.slec_car {
  padding: 8px 12px;
}

.trash_del i {
  width: 30px;
  height: 30px;
  padding: 8.5px 8px 7.5px 9px;
  gap: 0px;
  border-radius: 25px;
  opacity: 0px;
  color: #d71d1d;
  background-color: #d71d1d1a;
}

/* swich----css */
@media only screen {
  .toggleSwitch {
    display: inline-block;
    height: 17px;
    position: relative;
    overflow: visible;
    padding: 0;
    cursor: pointer;
    width: 38px;
  }

  .toggleSwitch * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .toggleSwitch label,
  .toggleSwitch > span {
    line-height: 20px;
    height: 20px;
    vertical-align: middle;
  }

  .toggleSwitch input:focus ~ a,
  .toggleSwitch input:focus + label {
    outline: none;
  }

  .toggleSwitch label {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
  }

  .toggleSwitch input {
    position: absolute;
    opacity: 0;
    z-index: 5;
  }

  .toggleSwitch > span {
    position: absolute;
    left: -50px;
    width: 100%;
    margin: 0;
    padding-right: 50px;
    text-align: left;
    white-space: nowrap;
  }

  .toggleSwitch > span span {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    display: block;
    width: 50%;
    margin-left: 50px;
    text-align: left;
    font-size: 10px;
    width: 100%;
    left: 15%;
    top: -1px;
    opacity: 0;
  }

  .book_icon_uplo {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  .item_icon_chat {
    flex-direction: column;
    align-items: start !important;
    gap: 0px !important;
  }

  .icon_up_ite {
    margin: 0px !important;
  }

  .toggleSwitch a {
    position: absolute;
    right: 50%;
    z-index: 4;
    display: block;
    height: 100%;
    padding: 0;
    left: 2px;
    width: 18px;
    background: var(--background-color);
    border: 1px solid #ccc;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .toggleSwitch > span span:first-of-type {
    color: #000;
    opacity: 1;
    left: 45%;
  }

  .redio_but_item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
  }

  .radio_chat {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 0px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    justify-content: space-between;
    opacity: 0px;
    width: 100%;
    outline: none;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
  }

  .radio_chat label {
    margin: 0px;
    color: var(--text-color);
  }

  .redio_but_item .radio_chat .accent_colo {
    width: 20px;
    height: 20px;
    accent-color: #289a53;
  }

  .chat_id_item {
    opacity: 66%;
  }

  .chat_inpu_radiu {
    border-radius: 6px !important;
  }

  .toggleSwitch > span:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50px;
    top: -2px;
    background-color: #c4c4c4;
    border: 1px solid var(--span-sm);
    border-radius: 30px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }

  .toggleSwitch input:checked ~ a {
    background: var(--background-color);
    left: 100%;
    margin-left: -8px;
  }

  .toggleSwitch input:checked ~ span:before {
    border-color: #3aaa87;
    box-shadow: inset 0 0 0 30px #3aaa87;
  }

  .toggleSwitch input:checked ~ span span:first-of-type {
    opacity: 0;
  }

  .toggleSwitch input:checked ~ span span:last-of-type {
    opacity: 1;
    color: #000;
    font-weight: 500;
  }

  .toggleSwitch.large {
    width: 60px;
    height: 27px;
  }

  .toggleSwitch.large a {
    width: 24px;
    height: 24px;
  }

  .toggleSwitch.large > span {
    height: 29px;
    line-height: 28px;
  }

  .toggleSwitch.large input:checked ~ a {
    left: 41px;
  }

  .toggleSwitch.large > span span {
    font-size: 12px;
  }

  .toggleSwitch.large > span span:first-of-type {
    left: 50%;
  }
}

/* swich----css end */

.tab-itemJP213 .book_detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
}

.tab-itemJP213 .book_detail h3 {
  font-family: Inter;
  font-size: 18px;
  font-weight: 700;
  line-height: 21.78px;
  text-align: left;
  color: var(--text-color);
}

.tab-itemJP213 .book_detail span a {
  font-family: Inter;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
  color: #3aaa87;
}

/* Reservation List--css-end */
.tab-itemJP213 .table_info {
  border-radius: 0;
  padding: 0px 20px 20px 20px;
}

.tab-itemJP213 .table_info .table_info_icon {
  margin-bottom: 0px;
}

.border_tabl .dark_item_info th {
  background-color: var(--caed-back) !important;
  border: none;
}

.table_wrap td {
  border-top: none;
  border-bottom: 1px solid #d0d0d0;
}

.due_item {
  margin: 20px 20px !important;
}

.table_info .red_icon_text,
.table_wrap .red_icon_text {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  color: #e40b0b;
}

.text_color {
  color: #3aaa87;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.table_drop_down {
  padding: 0px 0px 16px 0px;
}

.center_ka .center_kaq .drop_text_ic {
  padding: 0px !important;
}

.center_ka .center_kaq .drop_text_ic .drop_item_in {
  padding: 12px !important;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.94px;
}

.center_ka .center_kaq .drop_text_ic .drop_chat_it {
  padding: 0px 12px !important;
}

.center_ka .center_kaq .drop_text_ic .drop_item_in i {
  padding-right: 8px;
}

.chat_tab_sel {
  display: flex;
  align-items: center;
  gap: 5px;
}

.select_no {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--text-color);
}

.drop_sel .no_slec {
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 14px;
}

.center_kaq .dropdown-menu li {
  margin-bottom: 0;
}

.web_search {
  justify-content: space-between;
}

.web_search .searchit {
  width: 40%;
}

.table_drop_info .dropdown-menu li span {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.94px;
  text-align: left;
  cursor: pointer;
}

.table_drop_info .dropdown-menu li span i {
  width: 16px;
  height: 16px;
}

.center_ka .table_drop_info .drop_wrap {
  padding: 12px !important;
}

/* table---scroll----css---- */

.slid_bott {
  width: 100%;
  padding-bottom: 20px;
}

.wrapper {
  background: var(--background-color);
  padding: 20px;
  overflow-x: hidden;
  margin: 0px 20px;
  border-radius: 8px;
}

.wrapper .book_detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  gap: 20px;
}

.wrapper .book_detail h3 {
  font-family: Inter;
  font-size: 22px;
  font-weight: 600;
  line-height: 26.63px;
  text-align: left;
  color: var(--text-color);
}

.wrapper .book_detail span a {
  font-family: Inter;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
  color: #3aaa87;
}

.slick-initialized .slick-slide {
  margin: 0 15px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-slider .image_slid {
  border-radius: 4px;
}

.my-slider .image_slid img {
  width: 146px;
  height: 230px;
  border-radius: 4px;
}

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

.my-slider01 .image_slid .img_slism {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.my-slider .image_slid .The_girl {
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
  padding-top: 16px;
  color: var(--text-color);
}

.my-slider .image_slid .satish_item {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  text-align: left;
  padding-top: 4px;
  color: #4d4d4d;
}

.my-slider .image_slid .imag_icon_rat {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-top: 10px;
}

.my-slider .image_slid .imag_icon_rat img {
  width: 14px;
  height: 14px;
}

.slick-next,
.slick-prev {
  z-index: 5;
}

.slick-next {
  right: 15px;
}

.slick-prev {
  left: 15px;
}

.slick-next:before,
.slick-prev:before {
  color: #000;
  font-size: 26px;
}

/* manage_school_csss------------------ */

.web_5a {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 16px;
}

.seach_5 {
  position: relative;
  width: 100%;
}

.drop_ak1 {
  background: var(--background-color);
  border-radius: 6px;
  border: 1px solid var(--text-color);
}

.paddin_top {
  padding-top: 0px;
}

.icon_selec {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
}

.date_head {
  background: var(--background-color);
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid var(--span-sm);
  border-radius: 6px;
  outline: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color);
  cursor: pointer;
}

.date_head input {
  border: none;
  background: var(--background-color);
  color: var(--text-color);
  outline: none;
  cursor: pointer;
}

.date_pixc {
  font-weight: 500;
  color: #000;
}

.slec_con {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.const {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sab_inp {
  width: 40%;
}

.drop_it00 {
  border: 1px solid var(--span-sm);
  padding: 6px 12px;
  height: 40px;
}

.gree0 {
  color: #3aaa87;
}

.seach_5 input {
  padding: 10px 12px 10px 35px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--span-sm);
  background: var(--background-color);
  outline: none;
  height: 40px;
  color: var(--input-col);
}

.seach_5 i {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 18px;
  height: 18px;
  color: var(--text-color);
}

.cars {
  border-radius: 6px;
  border: none;
  background: var(--background-color);
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  outline: none;
  cursor: pointer;
}

.selc_icon {
  height: 26px;
}

.ellip_ak {
  background: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 8px;
  margin: 0px 20px;
  gap: 16px;
}

.flip_text {
  margin: 0px;
  border-bottom: 1px solid #e2ebef;
  border-radius: 0px;
}

.tab_ico {
  background-color: transparent !important;
  color: var(--text-color) !important;
}

.book_item {
  border: none;
}

.ellip_ak32,
.book_ak {
  display: flex;
  align-items: center;
  gap: 16px;
  /* flex-wrap: wrap; */
}

.tab_seac001 {
  margin: 0px !important;
}

.ellip_ak001 .p_ak {
  color: var(--text-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding-bottom: 4px;
}

.ellip_ak001 .p2_ak1 {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.book_ak span {
  width: 1px;
  height: 28px;
  background-color: var(--span-sm);
  display: inline-block;
}

.book_ak1 .books_ka {
  color: var(--text-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.book_ak1 .books_ka32 {
  color: var(--text-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.akas_001 {
  margin-top: 20px;
}

.gyan_toq {
  margin-bottom: 20px;
}

/* action drop css */
#toggle2 {
  margin: 10px auto;
  position: relative;
  border-radius: 4px;
  cursor: context-menu;
}

#menu_301 {
  color: #212529;
  width: 155px;
  border-radius: 5px;
  display: none;
  position: absolute;
  top: 554px;
  right: 22px;
  min-width: 155px;
  background-color: var(--background-color);
  box-shadow: 0 6px 20px #1a181e29;
  padding: 12px;
}

.icon_actio2 a i {
  color: var(--text-color);
}

#toggle2 button {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  width: 110px;
  height: 35px;
  padding: 10px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 56px;
  background: #3aaa87;
  border: none;
  outline: none;
}

#menu_301 .drop_mea a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

@media screen and (max-width: 1065px) {
  .wab-head_1 {
    grid-template-columns: auto;
  }

  .sect_0101 {
    grid-template-columns: auto;
  }

  .smoll_cart_img {
    margin-top: 20px;
  }

  .follower {
    grid-template-columns: 100%;
    gap: 20px;
  }

  .my-slider .image_slid img {
    width: 120px;
    height: 185px;
  }
}

@media screen and (max-width: 982px) {
  .wab-head_1 {
    margin: 20px;
    display: grid;
    grid-template-columns: auto;
    gap: 20px;
  }

  .book_ak {
    align-items: start;
  }

  .flex_001 {
    flex-direction: row;
  }

  .ellip_ak {
    flex-wrap: wrap;
  }

  .wab-head_1 {
    grid-template-columns: auto;
  }

  .active_infor {
    right: 16px;
    top: 132px;
  }

  .menu_321 {
    top: 132px;
  }

  .rig_001 {
    width: calc(100% - 88px);
  }

  .rig_001.rightsm {
    width: calc(100% - 290px);
  }
}

@media screen and (max-width: 500px) {
  .sidebar.close {
    width: 90px;
  }

  .ellip_ak32,
  .book_ak {
    flex-wrap: wrap;
  }
}

.ellip_ak32 img {
  border-radius: 50%;
}

/* smart_library---------css------ */

.p2_ak132 {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: start;
}

.p2_ak132 span {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.p2_ak132 .fa-school {
  font-size: 13px;
  color: var(--text-color);
}

.p2_ak132 .fa-person-hiking {
  font-size: 15px;
  color: var(--text-color);
}

.menu_ak10 {
  top: 442px !important;
}

/* Add New Smart Library------------------ */

.user_ap {
  border-radius: 6px;
  background: rgba(39, 174, 96, 0.3);
  margin: 20px;
  padding: 12px;
}

.user_ap p {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.wab-header0121 {
  background-color: white;
  border-radius: 9px;
  margin: 20px 20px 0px 20px;
}

.Campaigns-DetailsJP08 h3 {
  color: var(--text-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding: 16px 20px;
  background: var(--add-back);
  border-radius: 8px 8px 0px 0px;
}

.input_ak1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px;
  background-color: var(--background-color);
  border-radius: 0px 0px 8px 8px;
  gap: 20px;
}

/* .image_pro {
  padding: 20px;
  background-color: var(--background-color);
  border-radius: 0px 0px 8px 8px;
} */

.labletypetextJP01 {
  display: block;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: normal !important;
  margin: 0;
  padding-bottom: 7px;
  color: var(--text-color);
}

/* image--uplode----input--page--apand */
.book_item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
  padding: 20px;
  background-color: var(--background-color);
  color: var(--text-color);
  outline: none;
}

@media (max-width: 960px) {
  .book_item {
    flex-wrap: wrap;
    padding: 0px;
  }
}

.book_item .profile_uplo {
  display: flex;
  align-items: center;
  gap: 20px;
}

.book_item .profile_uplo .uploader {
  position: relative;
}

.book_item .profile_uplo .uploader #start001.hidden {
  display: none;
}

.book_item .profile_uplo .uploader #start001 i.fa {
  font-size: 50px;
  margin-bottom: 1rem;
  transition: all 0.2s ease-in-out;
}

.book_item .profile_uplo .uploader #response001 {
  float: left;
  clear: both;
  width: 100%;
}

.book_item .profile_uplo .uploader #response001.hidden {
  display: none;
}

.book_item .profile_uplo .uploader #response001 #messages001 {
  margin-bottom: 0.5rem;
  display: none;
}

.book_item .profile_uplo .uploader #file-image001 {
  display: inline;
  width: 100%;
  max-width: 154px;
  height: 154px;
  object-fit: cover;
  display: flex;
  padding: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px dashed #3aaa87;
  background: linear-gradient(93deg, #fff 0.43%, #bfffebbe 103.97%);
}

.book_item .profile_uplo .uploader #file-image001.hidden {
  display: none;
}

.book_item .profile_uplo .uploader #notimage001.hidden {
  display: none;
}

.book_item .profile_uplo .uploader input[type="file"] {
  display: none;
  width: 100%;
}

.book_item .profile_uplo .uploader #start001 {
  width: 100%;
  max-width: 154px;
  height: 154px;
  padding: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px dashed #3aaa87;
  background: linear-gradient(93deg, #fff 0.43%, #bfffebbe 103.97%);
  cursor: pointer;
}

.file-upload001 {
  margin: 0px;
}

.book_item .profile_uplo .uploader #start001 .uplode_img1 {
  width: 22px;
  height: 17px;
}

.book_item .profile_uplo .uploader #start001 .drag {
  padding-top: 6px;
  color: #3aaa87;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.book_item .profile_uplo .uploader #start001 #notimage001 {
  color: #4ca6c4;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.book_item .profile_uplo .uploader .edit_but {
  display: flex;
  width: 80%;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 40%;
  background: rgba(255, 255, 255, 0.87);
  cursor: pointer;
  margin: auto;
}

#add_butt_clone {
  display: flex;
  padding: 10px 60px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  border-radius: 4px;
  border: 1px dashed #e0e0e0;
  background: linear-gradient(93deg, #fff 0.43%, #bfffebbe 103.97%);
  color: #3aaa87;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
}

.close_icon0s {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #ff3c3c;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}

/* image--uplode----input--page--apand --end*/

.inputtypetextJP01 {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px 8px;
  width: 100%;
  outline: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #000000;
}

.labletypetexta {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 6px 8px;
  width: 100%;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.labletypetexta input {
  border: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #000000;
}

.detailsjp93select {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 8px;
  width: 100%;
  outline: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #000000;
}

.input_ah1 {
  width: 100%;
  max-width: 49%;
  flex: 1 1 48%;
}

.input_ah101 {
  width: 100%;
  max-width: 48%;
}

.input_ah0011 {
  width: 100%;
  flex: 1 1 32%;
}

@media screen and (max-width: 800px) {
  .input_ah1 {
    max-width: 100%;
  }

  .input_rig {
    max-width: 100%;
    margin-right: 0px;
  }

  .input_ah101 {
    max-width: 100%;
  }

  .input_widt_a {
    flex-wrap: wrap;
  }

  .inp_0001 {
    margin-bottom: 0;
  }

  .web_5a {
    flex-wrap: wrap;
    gap: 16px;
  }

  .seach_5 input {
    width: 100%;
  }

  /* .drop_ak1 {
    width: 100%;
  } */
  .pangin_ak {
    flex-wrap: wrap;
    gap: 16px;
  }
}

.web_had_3 {
  margin-top: 20px;
  padding-bottom: 20px;
}

.input_widt {
  max-width: 100%;
}

.input_widt input {
  width: 100%;
}

.star {
  color: red;
}

.input_0324 {
  margin-bottom: 0px;
}

.input_full {
  margin-bottom: 0px;
  width: 100%;
}

.button_bott {
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: end;
}

/* smart_library_d_2 _css/////// */

.p_ak21 {
  color: var(--text-color);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.name_school_top {
  font-size: 18px;
}

.sect_04 {
  padding-top: 94px;
}

.p2_akha1,
.span_001 {
  color: var(--text-sm);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.p2_akha1 .fa-user {
  padding-left: 10px;
}

.p2_akha1 i {
  font-size: 12px;
}

.p2_akha1 .span_001 {
  font-weight: 500;
}

.book_aklic button {
  display: flex;
  padding: 4px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--smoll-butt);
  color: white;
  border: none;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* tab__css */

.tab-wrapper {
  margin-left: 20px;
}

.tabs {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.tab-link {
  list-style: none;
  color: var(--text-color);
  cursor: pointer;
  font-weight: 700;
  transition: all ease 0.5s;
  border-bottom: solid 3px rgba(255, 255, 255, 0);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  padding: 20px 0px 10px 0px;
}

.tab-link:hover {
  color: var(--dang-color);
  border-color: var(--dang-color);
}

.tab-link.active {
  color: var(--dang-color);
  border-color: var(--dang-color);
}

.tab-link:nth-of-type(1).active1 {
  color: var(--dang-color);
  border-color: var(--dang-color);
}

.tab-link:nth-of-type(2).active1 {
  color: var(--dang-color);
  border-color: var(--dang-color);
}

.tab-link:nth-of-type(3).active1 {
  color: var(--dang-color);
  border-color: var(--dang-color);
}

.tab-link:nth-of-type(4).active1 {
  color: var(--dang-color);
  border-color: var(--dang-color);
}

.tab-link:nth-of-type(5).active1 {
  color: var(--dang-color);
  border-color: var(--dang-color);
}

.content-wrapper {
  padding-bottom: 10px;
}

.tab-content {
  margin: 20px;
  border-radius: 8px;
  border: 1px solid #e2ebef;
  background: var(--background-color);
}

.tab_cn_chat {
  background-color: transparent;
  border: none;
  margin: 0px;
}

.tab-content {
  display: none;
  text-align: start;
  color: #888;
  font-weight: 300;
  font-size: 15px;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeIn 0.5s ease 1 forwards;
}

.tab-content.active1 {
  display: block;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
    transform: none;
  }
}

.tab_ak01 {
  background: var(--background-color);
  margin: 20px 20px 0px 20px;
  border-radius: 8px;
  border: 1px solid white;
}

.ellip_ak21 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 8px;
  flex-wrap: wrap;
  gap: 16px;
}

.schoo_ba {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--smart-back);
  border-bottom: 1px solid #e2ebef;
  padding: 16px 20px;
  border-radius: 8px 8px 0px 0px;
  margin: 0px 20px;
}

.book_seach {
  margin-top: 20px;
}

.schoo_ba button {
  color: #3aaa87;
  border: none;
  outline: none;
  background: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tab_search {
  margin-bottom: 20px !important;
}

.tab_book_det {
  background: var(--background-color);
  padding: 20px;
  border-radius: 0px 0px 8px 8px;
  margin: 0px 20px;
}

.book_eddit {
  display: flex;
  align-items: start;
  gap: 16px;
  width: 100%;
}

.det_chatsmg {
  padding: 0px 0px 20px 0px !important;
}

.book_eddit .img_book {
  width: 130px;
  height: 169px;
}

.book_eddit .img_book img {
  width: 100%;
  height: 100%;
}

.book_img_det {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.pop_study {
  padding: 20px 0px 20px 0px !important;
}

.custmer56AJP a {
  color: #000;
}

.web_infor {
  padding: 20px 0px 0px 0px !important;
}

.marg_t_non {
  margin-top: 0px !important;
}

.book_img_det .book_nam {
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
  text-align: left;
  color: #000;
}

.book_img_det .fivc {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: #4f4f4f;
  padding-top: 4px;
}

.book_detail .product_it {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: #000000;
  padding-top: 16px;
}

.book_detail .lorem_product {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #4f4f4f;
  padding-top: 10px;
  text-align: justify;
}

.tab_book_det .school_deta {
  display: flex;
  align-items: start;
  gap: 130px;
  padding-top: 16px;
}

.ord_prod {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  padding-bottom: 16px;
  color: #000;
}

.for-desktop {
  display: flex;
  gap: 8px;
  align-items: center;
}

.for-desktop li {
  font-size: 16px;
  line-height: 18px;
  text-align: left;
  margin: 0;
}

.for-desktop li span {
  color: #4d4d4d;
  font-weight: 400;
}

.for-desktop li strong {
  color: #4d4d4d;
  font-weight: 500;
}

.for-desktop li strong a {
  color: #3cab88;
  font-weight: 500;
}

.school_name {
  display: flex;
  gap: 150px;
  padding-top: 20px;
}

.school_name p span {
  padding-left: 20px;
}

.Author li {
  color: #4d4d4d;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  border-right: 1px #b3b3b3 solid;
}

.Author li a {
  color: #43a047;
}

.popup-content09ah {
  background: var(--background-color) !important;
}

.toggle06 {
  display: none;
}

.active4 {
  display: inline-block;
}

.lablet0 .iscn_anchat {
  padding: 10px 8px;
  gap: 8px;
  border-radius: 6px;
  opacity: 0px;
  background: #ffffff;
  border: 1px solid #000000;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  text-align: left;
  color: #000000;
}

.center_ka .center_kaq .drop_text_ic .drop_newre {
  padding-top: 0px !important;
}

.Author li strong {
  font-weight: 500;
}

.marg_akb {
  padding-bottom: 16px;
}

.smart-02 {
  color: var(--text-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.font_ak1012 {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.font_ak12 {
  color: var(--text-sm);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Librarians-------csss--------------- */
.web_ha {
  padding-bottom: 20px;
}

.web_pdf {
  margin-top: 0px;
}

/* pdf--file---uplode---css */

/*
	By Mushfiq Shishir, hello@mrshishir.me, www.mrshishir.me	
*/

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

/* a {
	outline: none;
	color: #d3394c;
	text-decoration: none;
} */
/* 
a:hover,
a:focus {
	color: #722040;
} */

/* .hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
} */

/********** File Input Style starts here ********/

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.inputfile + label {
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  padding: 10px 60px;
}

.no-js .inputfile + label {
  display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  margin-top: -0.25em;
  /* 4px */
  margin-right: 0.25em;
  /* 4px */
}

.pdf_file0 {
  color: #3aaa87;
  font-size: 14px;
  font-weight: 500;
}

.box_001 {
  position: relative;
}

/* style 1 */

.inputfile-1 + label {
  color: #f1e5e6;
  border: 1px dashed #3aaa87;
  background: linear-gradient(93deg, #fff 0.43%, #bfffebbe 103.97%);
  margin: 0;
}

.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:focus-visible {
  outline: -webkit-focus-ring-color auto 0px;
}

/* pdf--file---uplode---css end*/
.sect_51a {
  margin: 0px 20px;
}

.tab-itemJP213 {
  background: var(--background-color);
  box-shadow: 0px 4px 19px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

.border_tabl {
  border-radius: 8px;
}

.table .left_ak0 {
  padding-left: 16px;
}

.table .thead-dark th {
  background-color: var(--add-back);
  border-color: var(--add-back);
  font-size: 14px;
  vertical-align: middle;
  color: var(--text-color);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}

.fancy-checkbox input[type="checkbox"] {
  display: none;
}

.fancy-checkbox input {
  overflow: visible;
  border-radius: 40px;
  outline: none;
  border: 1px solid #ccc;
}

.fancy-checkbox input[type="checkbox"] + span:before {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 24px;
  height: 24px;
  /* margin-right: 10px; */
  content: "";
}

.thead-dark tr th label span::before {
  background-color: #ffffff;
}

.fancy-checkbox span:before {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.fancy-checkbox {
  margin: 0px;
}

.fancy-checkbox input[type="checkbox"]:checked + span:before {
  font-family: FontAwesome;
  content: "\f00c";
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 21px;
}

.fancy-checkbox input[type="checkbox"]:checked + span:before {
  background: #3aaa87;
  border-color: #3aaa87;
}

.butt_032a button {
  display: flex;
  padding: 4px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 54px;
  background: rgba(57, 186, 108, 0.1);
  color: #39ba6c;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border: none;
  outline: none;
}

.custmer56AJP {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.custmer56A {
  font-weight: 500;
}

.center_ka {
  padding-right: 15px !important;
}

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

.custme_a {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.popup-btn03 {
  cursor: pointer;
}

/* dropdown---- */

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0px;
  border-right: 0px;
  border-bottom: 0;
  border-left: 0px;
}

.fa-ellipsis-vertical {
  background: #3aaa87;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  color: white;
  width: 24px;
  height: 24px;
}

.pagination {
  color: black;
  /* padding: 8px 16px; */
  display: flex;
  align-items: center;
  gap: 20px;
}

.pagination li {
  margin: 0;
}

.close_day_open {
  padding: 20px;
  background: var(--background-color);
}

.close_day_open .close_day {
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  color: var(--text-color);
  padding-bottom: 20px;
}

.date_item_mon {
  border: none;
  width: 100%;
  outline: none;
}

.pagination li a {
  color: #4f4f4f;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.inpu_cht {
  width: 100%;
  max-width: 379px;
}

.day_cul_item {
  display: flex;
  align-items: center;
  gap: 34%;
  border-radius: 6px;
}

.date_time_item .date_tex_da {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #000;
  padding-bottom: 12px;
}

.reset_icon_but {
  border: 2px solid #000 !important;
  color: #000 !important;
}

.select_day_chat {
  display: flex;
  align-items: end;
  gap: 6px;
}

.detailsa {
  color: #000;
  font-weight: 400;
}

.pangin_ak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-bottom: 30px;
}

.detai_chitem {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* checkbox_______select)______cssss */

.checkboxes {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.checkboxes__row {
  display: flex;
}

.checkboxes__row:not(:last-child) {
  border-bottom: 1px solid #eee;
}

/* STYLE H */
.checkboxes__row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.checkbox.style-h {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0px;
}

.checkbox.style-h input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox.style-h input:checked ~ .checkbox__checkmark {
  background-color: #3aaa87;
}

.checkbox.style-h input:checked ~ .checkbox__checkmark:after {
  opacity: 1;
  top: -3px;
}

.checkbox.style-h input:checked ~ .checkbox__body {
  background-position: 0 0;
  color: #3aaa87;
  background-color: #3aaa871a;
  border: 1px solid #3aaa87;
}

.checkbox.style-h .checkbox__checkmark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
  height: 22px;
  width: 22px;
  background-color: #fff;
  transition: background-color 0.25s ease;
  border-radius: 4px;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1),
    inset -2px -2px 4px rgba(255, 255, 255, 0.4);
}

.checkbox.style-h .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 6px;
  top: -15px;
  width: 10px;
  height: 18px;
  border: solid #fff;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.25s ease, top 0.25s ease;
}

.checkbox.style-h .checkbox__body {
  color: #9d9d9d;
  line-height: 1.4;
  font-size: 16px;
  transition: font-weight 0.25s ease;
  font-weight: bold;
  color: #6a6a6a;
  /* background: linear-gradient(45deg, #3AAA871A 100%, #3AAA871A 50%, #3AAA871A 50%, #3AAA871A 100%); */
  background-size: 200% 100%;
  background-position: 100% 0;
  padding: 14px 10px;
  padding-left: 52px;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.25s ease, background 1s ease, color 0.25s ease;
  border: 1px solid #9d9d9d;
}

/* checkbox_______select)______cssss---ensd */

.detai_chitem .del_butt i {
  color: #ea1b1b;
  padding-left: 8px;
}

.detai_chitem button {
  border: 1px solid #3aaa87;
  outline: none;
  background-color: #3aaa871a;
  padding: 10px 12px;
  border-radius: 6px;
  color: #3aaa87;
}

.showing {
  color: #828282;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.dat_tim_inp {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-color);
}

.dat_tim_inp .tim_ite {
  padding: 8px;
  gap: 8px;
  border-radius: 6px;
  opacity: 0px;
  border: 1px solid #d0d0d0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.ak1_001 {
  display: flex;
  width: 30px;
  height: 30px;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  background: #3aaa87;
}

.pagination .ak1_001 a {
  color: white;
}

.right_colo12 {
  color: #4f4f4f;
}

.right_colo1 {
  color: #3aaa87;
}

.inp_01a {
  margin-bottom: 20px;
}

/* radio--button---change--item */
.radio01 label [type="radio"] {
  accent-color: #2b9f7b;
  width: 20px;
  height: 20px;
}

.radio01 label {
  margin: 0px;
  color: var(--text-color);
}

.radio_item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 20px 0px 20px;
  background: var(--background-color);
}

#red {
  display: none;
}

.issu_green {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #3aaa87;
}

.gre_boot {
  margin-bottom: 24px;
}

.inp_dat {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.inp_dat button {
  background-color: transparent;
  border: none;
  color: #3aaa87;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inp_dat button span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inp_dat button img {
  width: 16px;
  height: 16px;
}

.issu_red {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #e40b0b;
}

/* radio--button---change--item end*/

@media screen and (max-width: 523px) {
  .sect_01 {
    padding-top: 160px;
  }

  .home .right_cont {
    flex-wrap: wrap;
  }

  .sect_04 {
    padding-top: 160px;
  }

  .home .right {
    padding: 12px 20px 12px 10px;
  }
}

.cart_item {
  padding: 29px 20px !important;
}

/* Librarian Details csss--------------- */

.secti_0a1 {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.section0987 {
  display: flex;
  align-items: center;
  margin: 20px;
  gap: 12px;
}

.sect_6749 {
  width: 100%;
}

.item_ak2 {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 8px;
  border: 1px solid #e2ebef;
  background: var(--caed-back);
  padding: 38px 20px;
  white-space: nowrap;
}

.name_0021 .name543_a {
  color: var(--text-color);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.name543_a2a {
  color: var(--text-sm);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.font_school {
  width: 250px;
}

.text_detail_item {
  display: flex;
  align-items: start;
  gap: 120px;
  justify-content: space-between;
}

.imge_ak432 img {
  width: 16px;
  height: 16px;
}

.stap_id {
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  color: #000;
  padding-left: 10px;
}

.imge_ak432 .imag_span_a {
  color: var(--icon-text3);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* range----css--- */

.prog_ak21 {
  border: 1px solid #e2ebef;
  background: var(--caed-back);
  padding: 35px 20px;
  border-radius: 8px;
  width: 100%;
}

.pro_a921 .pro_pa {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-bottom: 10px;
}

.progr45761 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.progr45761 .pars_aak {
  color: var(--progr-colo);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.pro_lasta {
  color: var(--text-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-top: 10px;
}

.slider-wrapper {
  --slider-height: 8px;
  --slider-value: 0;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 40px;
  width: 233px;
}

.slider-wrapper:nth-child(1) {
  --slider-color: #3aaa87;
}

.slider-track {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: inherit;
  height: var(--slider-height);
  width: calc(100%);
  background-image: linear-gradient(to bottom, #fff, transparent),
    linear-gradient(
      to right,
      #2c8569 0% calc(var(--slider-value) * 1%),
      #e0e0e0 calc(var(--slider-value) * 1%) 100%
    );
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 0.0625em 0.125em rgba(0, 0, 0, 0.4);
}

.slider-input {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  border-radius: inherit;
  width: calc(100% + 0.875em);
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.slider-input::-webkit-slider-thumb {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.slider-input::-moz-range-thumb {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.slider-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: calc(
    var(--slider-value) / 100 * (100% - var(--slider-height)) +
      var(--slider-height) / 2
  );
  transform: translateX(-50%);
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.slider-thumb::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background-image: url(/img/mdi_check-underline-circle.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 1193px) {
  .school_name {
    gap: 100px;
  }
}

@media screen and (max-width: 700px) {
  .school_name {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 1050px) {
  .secti_0a1 {
    flex-wrap: wrap;
  }

  /* .section0987 {
    width: 100%;
  } */

  .sect_6749 {
    width: 100%;
  }

  /* .prog_ak21 {
    margin: 12px 20px 12px 20px;
  } */

  .item_ak2 {
    width: 100%;
  }

  .school_name {
    gap: 35px;
  }

  /* .section0987 .phone_1 {
    margin: 0px 20px 20px 20px;
  } */
  .section0987 {
    flex-wrap: wrap;
  }
}

.school_ak {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.phone_1 {
  border-radius: 8px;
  border: 1px solid #e2ebef;
  background: var(--caed-back);
  padding: 20px;
  width: 100%;
}

.icon_phone {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.icon_border_a {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}

.phone_ak01 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.phone_ak01 i {
  font-size: 20px;
  color: #000;
}

.top_bord {
  padding-top: 10px;
}

.phone_ak01 .no_ak span {
  color: var(--input-col);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.phone_ak01 .no_ak p {
  color: var(--text-color);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.phone_1 .icon_phone .fa-copy {
  font-size: 18px;
  color: #828282;
}

.botto_butt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  border-bottom: 1px solid #e2ebef;
  background: var(--caed-back);
  margin: 20px;
  padding: 16px 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.verfy {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  text-align: center;
  border: 1px solid #3aaa87;
  padding: 5px 10px;
  border-radius: 8px;
  background: transparent;
}

.pend_verfy {
  border: 1px solid #b57610;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  text-align: center;
  padding: 5px 10px;
  border-radius: 8px;
  background: transparent;
}

button:focus {
  outline: none;
  outline: none -webkit-focus-ring-color;
}

.botto_butt p {
  color: var(--text-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.botto_butt .deacti {
  display: flex;
  padding: 9px 30px;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid #d30000;
  background-color: transparent;
  color: #d30000;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.contac_a1 {
  padding-bottom: 0px;
}

@media screen and (max-width: 842px) {
  .school_name {
    gap: 100px;
  }
}

@media screen and (max-width: 500px) {
  .school_name {
    gap: 30px;
  }
}

/* Books  Css----------------------------------------- */

.dropdown-menu {
  border: 1px solid;
  border: none;
  background-color: var(--background-color);
  color: var(--text-color);
}

.dropdown-item {
  color: var(--text-color);
}

.web_ak0021 {
  border-radius: 0px 0px 8px 8px;
}

.Campaigns-DetailsJP08 .h_ak01 {
  border-radius: 0px;
}

.back_ak213 {
  background-color: var(--sidebar-text3);
}

.custme_a21 {
  display: flex;
  align-items: start;
  gap: 8px;
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
}

.paginpa12 {
  padding-bottom: 20px;
}

.table-hover tbody tr:hover {
  color: var(--table-color);
  background-color: var(--table-back);
}

/* add-new-books------css */

.web_001ak {
  margin-top: 20px;
}

.input_widt_a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.text_ara1 {
  width: 100%;
  background-color: var(--background-color);
}

.text_ara1 textarea {
  width: 100%;
  resize: none;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  overflow: hidden;
  height: 39px;
  outline: none;
  font-size: 14px;
}

.text_ara1 textarea#w3review {
  padding: 8px 10px;
}

.labletypet {
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0px;
  padding-bottom: 12px;
}

.text-area0 {
  padding: 0px 20px 20px 20px;
}

.text_ak3201 {
  padding-top: 10px;
}

.text_ak3201 textarea {
  display: flex;
  height: 177px;
  padding: 10px;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #fff;
}

.marg_ak001 {
  margin-bottom: 0px;
}

.input_books {
}

@media screen and (max-width: 640px) {
  .input_widt_a {
    flex-wrap: wrap;
  }

  .inp_0001 {
    margin-bottom: 0;
  }
}

/* chat---new----csss */
.main-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 178px);
  display: flex;
}

.main-container .left-container {
  position: relative;
  width: 35%;
  background: var(--background-color);
  overflow-x: auto;
  margin-left: 20px;
  height: calc(100vh - 170px);
}

.main-container .right-container {
  position: relative;
  width: 70%;
  /* height: 100%; */
  flex: 65%;
  background-color: var(--body-color);
}

.main-container .right-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://camo.githubusercontent.com/854a93c27d64274c4f8f5a0b6ec36ee1d053cfcd934eac6c63bed9eaef9764bd/68747470733a2f2f7765622e77686174736170702e636f6d2f696d672f62672d636861742d74696c652d6461726b5f61346265353132653731393562366237333364393131306234303866303735642e706e67);
  opacity: 0.5;
}

.chat-smartm {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--background-color);
  justify-content: space-between;
  opacity: 0px;
}

.user-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px 16px 20px;
  border-bottom: 1px solid #f5f8fb;
}

.dp {
  color: var(--text-color);
}

.user-text li {
  margin: 0;
  cursor: pointer;
  border: 0.5px solid #d0d0d0;
  gap: 16px;
  border-radius: 6px;
  padding: 12px;
}

.drop_item_in {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-align: left;
  color: var(--text-color);
  white-space: nowrap;
}

.three_dot {
  cursor: pointer;
  background-color: transparent;
  color: var(--text-color);
}

.search-container {
  position: relative;
  width: 100%;
  height: 40px;
  background: var(--background-color);
  display: flex;
  /*   justify-content: center; */
  align-items: center;
}

.search-container .input {
  width: 100%;
}

.search-container .input input {
  width: 100%;
  outline: none;
  border: none;
  background: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12px;
  padding-left: 60px;
}

.search-container .input i {
  position: absolute;
  left: 26px;
  top: 14px;
  color: #bbb;
  font-size: 0.8em;
}

.chat-list {
  position: relative;
  height: 100%;
  overflow-y: auto;
}

.chat-list::-webkit-scrollbar {
  display: none;
}

.chat-container::-webkit-scrollbar {
  display: none;
}

.chat-list .chat-box {
  position: relative;
  width: 100%;
  display: flex;
  /*   justify-content: center; */
  align-items: start;
  cursor: pointer;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.chat-list .chat-box .img-box {
  position: relative;
}

.chat-list .chat-box .img-box .img-cover {
  border-radius: 50%;
}

.chat-list .chat-box .chat-details {
  width: 100%;
  margin: 0px 16px;
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 10px;
}

.chat-list .chat-box .chat-details .text-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.chat-list .chat-box .chat-details .text-head h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.time_cloc_ico i {
  width: 13px;
  height: 13px;
  color: var(--text-sm);
}

.chat-list .chat-box .chat-details .text-head .time {
  font-size: 0.8em;
  color: #aaa;
}

.chat-list .chat-box .chat-details .text-message {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-list .chat-box .chat-details .text-message p {
  color: var(--text-smoll);
  font-size: 12px;
  overlay: hidden;
  font-weight: 400;
}

.img-cover {
  width: 40px;
  height: 40px;
}

.text-message_time .chat_tim {
  font-size: 11px;
  font-weight: 400;
  line-height: 13px;
  text-align: left;
  color: var(--text-sm);
}

.v {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-list .active {
  background: #ebebeb;
}

/* .chat-list .chat-box:hover {
  background: #f5f5f5;
} */

.chat-list .chat-box .chat-details .text-head .time_unread {
  width: 22px;
  height: 22px;
}

/* right-container */

.right-container .chat-smartm {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right-container .chat-smartm .user-img {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.right-container .chat-smartm .user-img .dp {
  position: relative;
  top: -2px;
  left: 0px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  object-fit: cover;
  border-radius: 50%;
}

.right-container .chat-smartm .user-img p {
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  color: var(--input-col);
}

.right-container .chat_tipe {
  padding: 16px 24px 10px;
  background-color: var(--body-color);
  border-bottom: 0.25px solid #d0d0d0;
}

.right-container .chat-smartm .nav-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.right-container .chat-smartm .nav-icons .star_back {
  background-color: #fff;
  padding: 8px;
  box-shadow: 0px 4px 16px 0px #d9d9d952;
  cursor: pointer;
  border-radius: 8px;
}

.right-container .chat-smartm .nav-icons li {
  margin: 0;
}

.right-container .chat-smartm .nav-icons li i {
  font-size: 16px;
}

.chat-container {
  position: relative;
  width: 100%;
  height: calc(100% - 120px);
  /*60+60*/
  padding: 39px 20px 39px 24px;
  overflow-y: auto;
}

.chat-container .today_chat {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 60px;
}

.chat-container .today_chat p {
  font-size: 11px;
  font-weight: 400;
  line-height: 13px;
  color: #000;
}

.message-box span {
  color: #afb8cf;
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  padding-top: 4px;
}

.my-message {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.my-message p {
  padding: 16px 24px 16px 24px;
  gap: 10px;
  border-radius: 32px 32px 0px 32px;
  opacity: 0px;
  background-color: #3aaa87;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  color: #f8f9fd;
  max-width: 280px;
}

.friend-message {
  display: flex;
  align-items: start;
  max-width: max-content;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.friend-message p {
  background: #3aaa8733;
  padding: 16px 24px 16px 24px;
  gap: 10px;
  border-radius: 32px 32px 32px 0px;
  opacity: 0px;
  color: var(--chat-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  max-width: 280px;
}

.friend-message {
  justify-content: flex-start;
}

.chat-container .my-message i {
  color: yellow;
}

.school_tabse {
  padding-top: 0px !important;
}

.tab_scsma {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.tab_scsma button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  outline: none;
  background-color: var(--background-color);
  color: #3aaa87;
  font-weight: 500;
  font-size: 14px;
}

.pop_book_p {
  width: 100%;
  height: 86vh;
  max-height: 95vh;
  overflow: scroll;
}

.pop_book_p::-webkit-scrollbar {
  display: none;
}

.chatbox-input {
  position: relative;
  width: 100%;
  height: 60px;
  background: var(--background-color);
  display: flex;
  align-items: center;
  padding: 0px 24px;
  gap: 20px;
}

.but_0oa {
  width: 100% !important;
}

.marg_bba {
  margin: 0px 0px 0px 0px;
  position: fixed;
  bottom: 10px;
  border-radius: 0px 0px 6px 6px;
  width: 95%;
  max-width: 1050px !important;
  background-color: var(--background-color);
}

.edi032 {
  width: 100% !important;
  padding: 20px 20px 20px 20px;
  border-top: 1px solid #e6e6e6;
}

.foman_chat {
  padding-bottom: 60px;
}

.edi032 button {
  width: 100% !important;
}

.web_head0ps {
  padding-bottom: 0px;
}

.popup-content .add_popINq {
  padding: 20px 20px 0px 20px !important;
  margin-bottom: 0px;
}

.chatbox-input i {
  cursor: pointer;
  font-size: 1.8em;
  color: #3aaa87;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tit_del {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.new_mass {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
  color: var(--text-color);
}

.edit_studsma021 {
  cursor: pointer;
}

.con_delet {
  max-width: 420px;
  padding: 20px;
}

.con_reject {
  max-width: 700px;
}

.popup_reject {
  padding: 200px 0px;
}

.input_text_chat {
  display: flex;
  align-items: center;
  width: 100%;
}

.item_editsma030 {
  padding: 250px 0px;
}

.butt_new_delo {
  margin: 20px 0px 0px 0px;
}

.rectan {
  margin-top: 20px;
}

.rejc_text {
  width: 100%;
  outline: none;
  resize: none;
  background: var(--background-color);
  height: 113px;
  padding: 10px;
  gap: 0px;
  border-radius: 4px;
  opacity: 0px;

  border: 1px solid #e2ebef;
}

.optdsr {
  color: #828282;
}

.plus_chat {
  background-color: #3aaa87;
  padding: 4px;
  border-radius: 50%;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 400;
}

/* .chatbox-input i:nth-child(4) {
  margin: 15px;
} */

/* .chatbox-input i:last-child {
  margin-right: 25px;
} */

.chatbox-input .input_text_chat input {
  position: relative;
  width: 75%;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 1em;
  border: none;
  outline: none;
  color: #9fa7be;
  font-size: 14px;
  font-weight: 500;
  line-height: 13px;
  text-align: left;
}

/* chat----csss---and */
/* three__dot__open--csss */

.add_chat_0 {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  gap: 2px;
}

.user-text_01 {
  justify-content: flex-start;
  gap: 10px;
}

.user-text_02 {
  gap: 16px;
}

.user-text_01 i {
  font-size: 24px;
  cursor: pointer;
  color: var(--text-color);
}

.icon_plusz span i {
  color: var(--text-color);
}

.user-text_01 p {
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
}

.image_icon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
}

.image_icon .img-cover {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.image_icon p {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-color);
}

.image_icon i {
  cursor: pointer;
  color: var(--text-color);
}

.chat_select_box {
  align-items: center !important;
}

.img-cover_01 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.white_space {
  position: fixed;
  bottom: 0;
  background: var(--background-color);
  height: 70px;
  width: 100%;
  max-width: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.white_space i {
  background-color: #3aaa87;
  font-size: 24px;
  color: #fff;
  padding: 14px;
  border-radius: 50%;
  cursor: pointer;
  width: 50px;
  height: 50px;
}

.chat_item_list {
  margin-bottom: 70px;
  height: auto;
}

.main-container .left-container::-webkit-scrollbar {
  display: none;
}

/* profile---css----- */
.profile-pic {
  color: transparent;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
}

.profile-pic input {
  display: none;
}

.profile-pic .img_profile {
  position: absolute;
  object-fit: cover;
  width: 165px;
  height: 165px;
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  z-index: 0;
}

.profile-pic .-label {
  cursor: pointer;
  height: 165px;
  width: 165px;
}

.profile-pic:hover .-label {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2;
  color: #fafafa;
  transition: background-color 0.2s ease-in-out;
  border-radius: 100px;
  margin-bottom: 0;
  flex-direction: column;
}

.profile-pic .profile_span {
  font-size: 10px;
  font-weight: 700;
  line-height: 12.1px;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
}

.input_chat {
  padding: 16px 20px;
}

/* .text_imot01 {
  padding-bottom: 80px;
} */

.chat-sm_tim11 {
  padding-bottom: 100px;
}

.members {
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.members_icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
}

.members_icon0 {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.members_p {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--text-color);
}

.toggle_swicth {
  height: 17px !important;
}

.members_swicth label {
  margin-bottom: 0px !important;
}

.chat_text_mass .name_tyape {
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  color: var(--text-color) !important;
}

.chat_text_mass .font_chat {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  color: #636363;
}

.text_remo {
  text-align: end;
}

.text_remo .remove {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  color: #d51900;
}

.chat_box_in {
  align-items: center !important;
  justify-content: space-between;
}

.text-head0 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.text-head0 .img-cover {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.text-head0 .name_font {
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  color: #000000;
}

.text-head0 .name_font0 {
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
  color: #000000;
}

.community_smart0 {
  cursor: pointer !important;
}

.remove_smart_0 {
  padding-bottom: 80px;
}

.img_tex_hove {
  position: relative;
}

.item_hov01 {
  position: absolute;
  box-shadow: 0px 0px 20.1px 0px #0000001f;
  background: #ffffff;
  width: 100%;
  max-width: 432px;
  padding: 10px;
  gap: 10px;
  border-radius: 6px;
  opacity: 0px;
  top: -20px !important;
  left: 140px !important;
  display: none;
}

.aeacti {
  padding: 9px 30px;
  gap: 8px;
  border-radius: 6px;
  opacity: 0px;
  background: #3aaa87;
  color: #fff;
  outline: none;
  border: #3aaa87;
}

.toplablehead {
  display: flex;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  background: rgba(39, 174, 96, 0.3);
  gap: 16px;
  margin: 20px 20px 0px 20px;
}

.toplablehead p {
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

@media only screen and (max-width: 1300px) {
  .wab-head_1 {
    grid: none;
  }
}

@media only screen and (max-width: 900px) {
  .follower .grow_itam .grow_item {
    flex-wrap: wrap;
  }

  .name_school_top {
    font-size: 16px;
  }

  .marg_t_non {
    padding-bottom: 75px;
  }

  .foman_chat {
    padding-bottom: 0px;
  }

  .main-container {
    height: calc(100vh - 232px);
  }

  .main-container .left-container {
    height: calc(100vh - 225px);
  }

  .web_head0ps {
    padding-bottom: 75px;
  }

  .active_infor .live_cheat {
    height: 385px;
  }
}

@media only screen and (max-width: 1065px) {
  .event {
    flex-wrap: wrap;
  }

  .home .right {
    flex-wrap: wrap;
  }

  .sect_01 {
    padding-top: 135px;
  }

  .right .school_name_icon {
    width: 100%;
  }

  .home .right_cont {
    width: 100% !important;
  }

  .drop_it00 {
    width: 36%;
  }

  #school-list {
    width: 100%;
  }

  .const {
    flex-wrap: wrap;
  }

  .web_search {
    justify-content: flex-start;
  }

  .student_info {
    justify-content: flex-start;
    /* flex-wrap: nowrap; */
  }

  .search_input_info {
    width: 70%;
  }

  .cars {
    width: 100%;
  }

  .employ_item {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }

  .text_col {
    flex: 1 1 calc(48.33% - 10px);
    max-width: 100%;
  }

  .text_col1 {
    flex: 1 1 calc(32.33% - 10px);
  }

  .smartbtn {
    padding: 8px 10px !important;
  }

  #reportrange {
    white-space: nowrap;
  }

  .button_wraper {
    width: 100%;
  }
}

.input_ak1 {
  align-items: start;
}

/* .select2-container {
  width: 100% !important;
} */

.text-danger {
  color: red;
}

.select2-selection__rendered {
  border: 1px solid #e0e0e0;
}

.select2-container--default .select2-selection--single {
  border: none !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 5px !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 37px !important;
  border-radius: 4px;
}

.input_ah1 {
  position: relative;
}

.field-icon {
  position: absolute;
  top: 34px;
  right: 16px;
}

/* tab---responsive---css */
.selec_class01 {
  overflow: hidden;
  color: #5a5d6c;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  margin-bottom: 8px !important;
}

.class_all_select {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 16px;
}

.dropdown {
  position: relative;
  /* width: 300px; */
}

.dropdown-btn0 {
  width: 100%;
  padding: 8px;
  border: 1px solid;
  cursor: pointer;
  max-width: 300px;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  background: white;
  padding: 0 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
  z-index: 2;
}

.dropdown.open .dropdown-content {
  max-height: 500px;
  padding: 16px;
  z-index: 1;
  width: 300px;
  top: 50px;
  border-radius: 8px;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #38a483;
}

.options {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 300px;
  overflow: auto;
}

.options div {
  margin-right: 20px;
}

.options::-webkit-scrollbar {
  display: none;
}

.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  gap: 16px;
  border: none;
  border-top: 1px solid #e4e2e4;
}

.search-box {
  width: 100%;
  padding: 0px 0px 8px 0px;
  margin-bottom: 10px;
  border: none;
  border-bottom: 1px solid #e4e2e4;
  outline: none;
}

.select_all {
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  color: #39ba6c;
  outline: none;
  border: none;
  background-color: transparent;
}

.select_all0 {
  color: #ff0000 !important;
}

.options label {
  overflow: hidden;
  color: #262527;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.english_select {
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border: none;
  outline: none;
}

.drop_dot_red {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.line_red_dot {
  color: #a3a3a3;
}

.status {
  display: flex;
  align-items: center;
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.status .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.present {
  background-color: green;
}

.absent {
  background-color: red;
}

.button_red {
  color: #39ba6c;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
  height: 24px;
  padding: 4px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  border-radius: 54px;
  background: rgba(57, 186, 108, 0.1);
  border: none;
  cursor: pointer;
}

.table_item_ingo {
  margin-top: 20px;
}

.button_info {
  width: 150px;
}

/* .table_info_item1 {
  display: ruby;
} */

/* attendance----detail---css
 */

.table-container {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

.table_attenn {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

.head_attend {
  color: #212121;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  border-top: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
  background: rgba(255, 255, 255, 0);
  padding: 10px 12px;
}

.status-icon {
  cursor: pointer;
  font-size: 18px;
}

.present {
  color: #0acf84;
  font-size: 21px;
}

.absent {
  color: red;
  font-size: 12px;
}

.neutral {
  color: gray;
  font-size: 20px;
}

.absent_info {
  display: flex;
  align-items: center;
  background: white;
  padding: 7px;
  border-radius: 4px;
}

.status2 {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #fff;
  margin-right: 10px;
}

.status2 span {
  margin-left: 10px;
  color: #4f4f4f;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.persant_attend {
  font-size: 16px !important;
}

.attend_senke {
  font-weight: 400 !important;
}

.attendace_text {
  text-align: center;
}

.absent_text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.search_item_info input {
  border: none !important;
}

.footer_info {
  display: flex;
  padding: 16px 20px;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  background: #fff;
  box-shadow: 0px -6px 20.5px 0px rgba(0, 0, 0, 0.12);
  position: fixed;
  bottom: 0;
  height: max-content;
}

.save_butt_info {
  display: flex;
  width: 150px;
  height: 40px;
  padding: 10px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  background: #3aaa87;
}

.save_text_info {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background-color: #3aaa87;
  border: none;
}

.option input {
  margin-right: 8px;
  accent-color: #33a380;
}

.drop_input {
  justify-content: end !important;
}

.select_info_text {
  padding: 0px !important;
  height: auto !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 10px !important;
  color: #39ba6c;
  outline: none;
  border: none;
  background-color: transparent;
}

.radio-group {
  display: flex;
  padding: 10px;
  align-items: center;
  gap: 20px;
  border-radius: 4px;
  background: #fff;
  margin-right: 20px;
}

.radio-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 0px;
  gap: 10px;
  color: #4f4f4f;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.radio-group input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.radio-group input:checked {
  border-color: #3aaa87;
}

.radio-group input:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #3aaa87;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.redio_info_text {
  justify-content: space-between !important;
}

.border_info_text {
  border: 1px solid var(--text-color) !important;
}

.video-row {
  display: flex;
  align-items: start;
  gap: 20px;
}

.video-thumbnail {
  width: 126px;
  height: 70px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.video-duration {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
}

.video-details {
  flex: 1;
  width: 200px;
}

.video-title {
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.video-address {
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.popup-faq {
  width: 30%;
  margin: 130px auto;
  padding: 0px;
}

.select_input {
  padding: 0px;
  margin: 0px;
}

/* faq-------css */
.faq-container {
  background: white;
  padding: 15px;
  border-radius: 10px;
}

.faq-item {
  border-radius: 8px;
  border: 1px solid #000;
}

.faq-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  transition: background 0.3s;
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.date_time_item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.schedul {
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-top: 8px;
}

.faq-content {
  display: none;
  padding: 16px;
  font-size: 14px;
  color: #555;
}

.faq-header span {
  font-size: 18px;
}

.faq-header.active {
  display: none;
}

.faq-item:first-child .faq-content {
  display: block;
}

input[type="date"],
input[type="time"] {
  width: 100%;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
}

.faq-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
}

.cancel-btn,
.save-btn {
  padding: 8px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  width: 150px;
}

.cancel-btn {
  border: 1px solid #000;
  background-color: transparent;
}

.save-btn {
  background: #3aaa87;
  color: white;
}

.faq_contain {
  margin-top: 16px;
}

.private_text {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
}

.save_publ {
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.redio_div_item {
  flex-direction: column;
  gap: 16px;
  align-items: start;
  padding: 16px 0px 0px 0px;
}

/* faq-------css */

/* Video Modal */
.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.video-modal-content {
  background: white;
  padding: 15px;
  border-radius: 10px;
  width: 90%;
  max-width: 900px;
  position: relative;
  margin: 50px auto;
}

.close-modal {
  position: absolute;
  top: -10px;
  right: -10px;
  color: #000;
  font-size: 18px;
  cursor: pointer;
  z-index: 9;
  background: #f3f3f3;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.marg_video {
  margin: 20px 20px;
}

video {
  width: 100%;
  border-radius: 5px;
}

.fa-sort-down:before {
  vertical-align: super;
}

/* progress--------bar-------css */

.popup-cont1 {
  width: 96% !important;
  max-width: 1100px !important;
}

.uplod_imag_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.progress-container {
  display: flex;
  align-items: center;
  width: 80%;
  position: relative;
  margin-top: 40px;
}

.prog_rating {
  padding-bottom: 50px;
}

.progress-line {
  position: absolute;
  width: 100%;
  height: 6px;
  background: #ddd;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  border-radius: 5px;
}

.progress-fill {
  position: absolute;
  width: 26%;
  height: 6px;
  background: linear-gradient(to right, #23a455, rgba(35, 164, 85, 0.1));
  border-radius: 5px;
  transition: width 0.5s ease;
}

.progress-fill01 {
  width: 50%;
}

.progress-fill2 {
  width: 90%;
  background-color: #3aaa87;
}

.progress-step {
  width: 26px;
  height: 26px;
  background: #ddd;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.progress-step.active {
  background: white;
  border: 4px solid #23a455;
}

.progress-step.active2 {
  background: rgb(175, 175, 175);
  border: 4px solid #ddd;
}

.progress-label {
  position: absolute;
  top: -30px;
  font-size: 14px;
  color: black;
  white-space: nowrap;
}

/* Positioning Steps */
.step1 {
  left: 0%;
}

.step2 {
  left: 50%;
  transform: translateX(-50%);
}

.step3 {
  right: 0%;
}

.imag_itrm_itext {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.imag_itrm_itext .imag_itrm {
  width: 200px;
  height: 200px;
}

.imag_itrm_itext .text_uplod {
  padding-top: 30px;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.imag_itrm_itext .uplod_inpt_p {
  color: #000;
  padding-top: 4px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.select_uplod_imag {
  margin-top: 30px;
  display: flex;
  width: 150px;
  height: 40px;
  padding: 10px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid #000;
  background: #fff;
}

.close_uplod {
  font-size: 20px !important;
}

.filed_form_item0 {
  width: 100%;
  margin-top: 40px;
  display: flex;
  align-items: start;
  gap: 20px;
}

.filed_form_item0 .filed_form_ite {
  width: 65%;
}

.filed_form_item0 .video_uplod_imgae {
  width: 35%;
}

.thumbnail-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

.thumbnail {
  width: 150px;
  height: 100px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: gray;
  cursor: pointer;
  border: 1px dashed #cacccd;
}

/* Form Fields */
.text_input_wrap {
  margin-bottom: 15px;
  display: flex;
  gap: 20px;
}

.form-group_wrapper {
  width: 100%;
}

.select_filed_infow {
  width: 100%;
  padding: 10px;
  border: 1px solid #e2ebef;
  border-radius: 5px;
  outline: none;
}

.prog_ratimg {
  padding: 20px !important;
  margin: 0 !important;
}

.text_input_titles {
  margin-top: 15px;
}

#description {
  resize: none;
}

.lable_uplod_vide {
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.lable_uplod_vide1 {
  color: #000;
  font-size: 16px;
  font-weight: 700;
}

/* Buttons */
.button-group1 {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.btn0 {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  width: 150px;
  height: 40px;
  padding: 10px 8px;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.button-group1 .cancel1 {
  border: 1px solid #000;
  background: #fff;
}

.button-group1 .save1 {
  background: #3aaa87;
  color: white;
}

.video-card2 {
  width: 100%;
  background: #f3f3f3;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}

.thumbnail2 {
  width: 100%;
  height: 200px;
  background: #ddd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.play-icon2 {
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-icon2::before {
  content: "▶";
  font-size: 24px;
  color: gray;
  font-weight: bold;
}

.duration2 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
}

.video-info2 {
  margin-top: 10px;
}

.video-title2 {
  font-weight: bold;
  font-size: 14px;
}

.video-description2 {
  font-size: 12px;
  color: gray;
  margin-top: 5px;
}

/* Modal Styles */
.modal2 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

.modal-content2 {
  background: white;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  width: 80%;
  max-width: 600px;
}

.close-btn2 {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
}

.uplod_faq {
  margin-top: 150px;
}

.faq_wraper_info {
  border-radius: 8px;
  border: 1px solid #e2ebef;
  background: #fff;
}

.fa-ellipsis-vertical {
  cursor: pointer;
}

.new-tab-info {
  padding-bottom: 100px;
}