/*IMPORT CSS*/
@import url("bootstrap.min.css");
@import url("lineicons.css");
@import url("materialdesignicons.min.css");
@import url("fullcalendar.css");
@import url("fullcalendar.min.css");
@import url("select2.min.css");
@import url("tailwind.min.css");
/*@import url("datepicker.css");*/
 /* @import url("datepicker-2.css");  */
@import url("loading-bar.min.css");
@import url("morris.css");
@import url("custom.css");
@import url("streamer-dashboard.css");
@import url("streaming-room.css");
@import url("loopple.css");

/* Article Comments Specific */
@import url("article-comments/nucleo-svg.css");
@import url("article-comments/loopple.css");
@import url("article-comments/datepicker.css");

/* Broadcast Schedule Specific */
@import url("broadcast-schedule.css");
@import url("broadcast-schedule-filter.css");
@import url("broadcast-schedule-events.css");
@import url("broadcast-schedule-modal.css");

/* Communication Tools */
/* @import url("communication-tools/comm-tools.css"); */

/* CRM Specific */
@import url("crm-assignee-management.css");
@import url("crm-chat.css");
@import url("crm-ticket.css");
@import url("crm-user-chat.css");

/* Chat Area */
@import url("chat-area/chat-area.css");

/*Article*/
@import url("article.css");

/*Stream Video*/
@import url("video.css");



/*IMPORT CSS*/
@import url("bootstrap.min.css");
@import url("lineicons.css");
@import url("materialdesignicons.min.css");
@import url("fullcalendar.css");
@import url("fullcalendar.min.css");
@import url("select2.min.css");
@import url("tailwind.min.css");
/*@import url("datepicker.css");*/
/* @import url("datepicker-2.css");  */
@import url("loading-bar.min.css");
@import url("morris.css");
@import url("custom.css");
@import url("streamer-dashboard.css");
@import url("streaming-room.css");
@import url("loopple.css");

/* Article Comments Specific */
@import url("article-comments/nucleo-svg.css");
@import url("article-comments/loopple.css");
@import url("article-comments/datepicker.css");

/* Broadcast Schedule Specific */
@import url("broadcast-schedule.css");
@import url("broadcast-schedule-filter.css");
@import url("broadcast-schedule-events.css");
@import url("broadcast-schedule-modal.css");

/* Communication Tools */
/* @import url("communication-tools/comm-tools.css"); */

/* CRM Specific */
@import url("crm-assignee-management.css");
@import url("crm-chat.css");
@import url("crm-ticket.css");
@import url("crm-user-chat.css");

/* Chat Area */
@import url("chat-area/chat-area.css");

/*Article*/
@import url("article.css");

/*=========================== COMMON CSS ===========================*/
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

* {
  box-sizing: border-box;
  outline: none;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #ccc;
}

::-webkit-scrollbar-track:horizontal {
  margin: 1rem;
}

::-webkit-scrollbar-thumb {
  background: #007aff;
  border-radius: 100px;
}

* {
  outline: none;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

:root {
  --bs-blue: #63b3ed;
  --bs-indigo: #596cff;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #f56565;
  --bs-orange: #fd7e14;
  --bs-yellow: #fbd38d;
  --bs-active: #fbdfcb;
  --bs-green: #81e6d9;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-body-color: #67748e;
  --bs-primary: #2152ff;
  --bs-secondary: #8392ab;
  --bs-success: #82d616;
  --bs-info: #17c1e8;
  --bs-warning: #fbcf33;
  --bs-danger: #ea0606;
  --bs-light: #e9ecef;
  --bs-dark: #344767;
  --bs-white: #fff;
  --bs-gradient-primary-right: #7928ca;
  --bs-gradient-primary-left: #ff0080;
  --bs-gradient-info-right: #2152ff;
  --bs-gradient-info-left: #21d4fd;
  --bs-gradient-danger-right: #ea0606;
  --bs-gradient-danger-left: #ff667c;
  --bs-gradient-warning-right: #f53939;
  --bs-gradient-warning-left: #fbcf33;
  --bs-gradient-success-right: #17ad37;
  --bs-gradient-success-left: #98ec2d;
  --bs-gradient-secondary-right: #627594;
  --bs-gradient-secondary-left: #a8b8d8;
  --bs-gradient-dark-right: #141727;
  --bs-gradient-dark-left: #3a416f;
  --bs-gradient-light-right: #ced4da;
  --bs-gradient-light-left: #ebeff4;
  --bs-font-sans-serif: Open Sans;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0));
  --bs-gradient2: linear-gradient(180deg, hsla(197, 100%, 93%, 0.705), hsla(195, 100%, 99%, 0.295));
  --bs-border-color:#ccc;
  /* Schedule Card */
  --primary-color: #007aff;
  --primary-dark: #0056b3;
  --background-color: #f5f7fa;
  --card-bg: #ffffff;
  --text-primary: #333333;
  --text-secondary: #666666;
  --border-color: rgb(148 138 138 / 59%);
  --shadow-color: rgba(0, 0, 0, 0.05);
  --success-color: #34c759;
  --warning-color: #ff9500;
  --danger-color: #ff3b30;
  --default-color: #a3a3a3;
  --football-color: #007aff;
  --onlinegaming-color: #ff3b30;
  --livestreaming-color: #34c759;
  --livechat-color: #ff9500;
  --transition-speed: 0.3s;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --clr-white: rgb(255, 255, 255);
  --clr-black: rgb(0, 0, 0);
  --clr-light: rgb(245, 248, 255);
  --clr-light-gray: rgb(179 179 179);
  --clr-blue: rgb(63, 134, 255);
  --clr-light-blue: rgb(171, 202, 255);
  /* Chat Area */
  --bs-form-control-bg: #fff;
  --body-bg-color: #e5ecef;
  --theme-bg-color: #fff;
  --theme-bg-light-blue: #eff6ff;
  --settings-icon-hover: #9fa7ac;
  --developer-color: #f9fafb;
  --input-bg: #f8f8fa;
  --input-chat-color: #a2a2a2;
  --border-color: #eef2f4;
  --body-font: "Manrope", sans-serif;
  --body-color: #273346;
  --settings-icon-color: #c1c7cd;
  --msg-message: #969eaa;
  --chat-text-bg: #f1f2f6;
  --theme-color: #0086ff;
  --msg-date: #6d6d6d;
  --button-bg-color: #f0f7ff;
  --button-color: var(--theme-color);
  --detail-font-color: #919ca2;
  --msg-hover-bg: rgba(238, 242, 244, 0.4);
  --active-conversation-bg: linear-gradient(to right, rgba(238, 242, 244, 0.4) 0%, rgba(238, 242, 244, 0) 100%);
  --overlay-bg: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 65%, rgba(255, 255, 255, 1) 100%);
  --chat-header-bg: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 78%, rgba(255, 255, 255, 0) 100%);
  --text-color: #333;
  --background-light: #f5f5f5;
}

.dark-theme {
  --primary-color: #004c9a;
  --primary-dark: #4ca6ff;
  --background-color: none;
  --card-bg: rgb(118 126 159 / 60%);
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-tertiary: #000;
  --border-color: rgb(165 191 255 / 59%);
  --shadow-color: rgba(0, 0, 0, 0.2);
  --success-color: #30d158;
  --warning-color: #ff9f0a;
  --danger-color: #ff453a;
  --football-color: #0a84ff;
  --onlinegaming-color: #ff453a;
  --livestreaming-color: #30d158;
  --livechat-color: #ff9f0a;
}

/* Chat Area */
.dark-mode {
  --body-bg-color: #1d1d1d;
  --theme-bg-color: #F4F9FF;
  --border-color: #a2b5ed;
  --body-color: #d1d1d2;
  --active-conversation-bg: linear-gradient(to right, rgb(208 219 241), rgb(255 255 255 / 90%) 100%);
  --msg-hover-bg: rgba(47, 50, 56, 0.54);
  --chat-text-bg: #fdfdfd;
  --chat-text-color: #000000;
  --msg-date: #6d6d6d;
  --msg-message: var(--msg-date);
  --overlay-bg: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #27292d 65%, #27292d 100%);
  --input-bg: #f9f9f9;
  --chat-header-bg: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 78%, rgb(233 237 243 / 0%) 100%);
  --settings-icon-color: #7c7e80;
  --developer-color: var(--border-color);
  --button-bg-color: #393b40;
  --button-color: var(--body-color);
  --input-chat-color: #6f7073;
  --detail-font-color: var(--input-chat-color);
}

[data-theme=purple] {
  --theme-color: #9f7aea;
  --button-color: #9f7aea;
  --button-bg-color: rgba(159, 122, 234, 0.12);
}

[data-theme=green] {
  --theme-color: #38b2ac;
  --button-color: #38b2ac;
  --button-bg-color: rgba(56, 178, 171, 0.15);
}

[data-theme=orange] {
  --theme-color: #ed8936;
  --button-color: #ed8936;
  --button-bg-color: rgba(237, 137, 54, 0.12);
}

.blue {
  background-color: #0086ff;
}

.purple {
  background-color: #9f7aea;
}

.green {
  background-color: #38b2ac;
}

.orange {
  background-color: #ed8936;
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  /* font-family: "Plus Jakarta Sans", sans-serif !important; */
  font-family: "Helvetica", sans-serif !important;
  font-weight: normal;
  font-style: normal;
  color: #5d657b;
  overflow-x: hidden;
  background: #f1f5f9 !important;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a:focus,
input:focus,
textarea:focus,
button:focus,
.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

a:hover {
  color: #365CF5;
}

button,
a {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a,
a:focus,
a:hover {
  text-decoration: none
}

i,
span,
a {
  display: inline-block;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

ul,
ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  margin: 0px;
}

.img-bg {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.para-width-500 {
  max-width: 500px;
  width: 100%;
}

@media (max-width: 767px) {
  .container {
    padding: 0 30px;
  }
}

/* Desktop View Prompt Message */
.desktop {
  display: block;
  position: fixed;
  height: 90px;
  margin: 0;
  background: url(../images/logo/flat-desktop-icon.png) no-repeat;
  -ms-transform: translate(-50%, -50%);
  background-position: center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 99999999999;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* background-color: white; */
  padding: 40px;
  border-radius: 15px;
  /* width: 320px; */
  width: fit-content;
}

.message {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  position: fixed;
  display: table-cell;
  vertical-align: middle;
  z-index: 9999;
  background-image: url(../images/logo/bg-mobile-prompt.jpg);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  overflow: hidden;
}

.message a {
  color: #000 !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  top: 50%;
  text-align: center;
  position: absolute;
  display: block;
  left: 0;
  right: 0;
}

.message p {
  color: #979394 !important;
  font-size: 10px;
  font-weight: 400;
  top: 55%;
  line-height: 1.5;
  text-align: center;
  position: absolute;
  display: block;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
}

/* @media only screen and (min-device-width: 812px) and (orientation: landscape) {
  .desktop, .message {
    display: block;
  }
} */
@media only screen and (min-device-width: 1200px) and (orientation: landscape) {

  .desktop,
  .message {
    display: none;
  }
}

@media only screen and (min-width: 300px) and (max-width: 1500px) {
  body {
    overflow: hidden !important;
  }

  .desktop,
  .message {
    display: block;
  }
}

/* Back-to-Top */
#to-top-button {
  display: inline-block;
  background: linear-gradient(135deg, #80b0ff94, #0089ffc4);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  border: 2px solid #ffffff;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 40px;
  right: 30px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  transform: scale(0.8);
  visibility: hidden;
  z-index: 1000;
}

#to-top-button:hover {
  cursor: pointer;
  background-color: #7dc4ff;
}

#to-top-button:active {
  background-color: rgb(0, 120, 201);
}

#to-top-button.show {
  opacity: 1;
  visibility: visible;
}

/* ========== Cart Style ========== */
.card-style {
  background: #fff;
  box-sizing: border-box;
  /* padding: 25px 30px; */
  padding: 10px 5px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  border-radius: 10px;
}

.card-style-shadowless {
  background: #fff;
  box-sizing: border-box;
  /* padding: 25px 30px; */
  padding: 10px 5px;
  position: relative;
  border-radius: 10px;
}

.card-style-wider {
  padding: 25px 25px;
}

.card-style h1 {
  font-size: 21px;
  font-weight: 600;
}

.card-style h3 {
  font-size: 23px;
  font-weight: 600;
}

.card-style h6 {
  font-size: 17px;
  font-weight: 700;
}

.gradienttext {
  background: -webkit-linear-gradient(#4796f7, #00408f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 767px) {
  .card-style {
    padding: 20px;
  }
}

.card-style .jvm-zoom-btn {
  position: absolute;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  right: 30px;
  bottom: 30px;
  cursor: pointer;
}

.card-style .jvm-zoom-btn.jvm-zoomin {
  bottom: 70px;
}

.card-style .dropdown-toggle {
  border: none;
  background: none;
}

.card-style .dropdown-toggle::after {
  display: none;
}

.card-style .dropdown-menu {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
}

.card-style .dropdown-menu li:hover a {
  color: #365CF5 !important;
}

.card-style .dropdown-menu li a {
  display: block;
  font-size: 14px;
}

.error-box {
  max-width: 330px;
  margin: 65px auto;
}

@media (max-width: 767px) {
  .error-box {
    margin: 25px auto;
  }

  .error-box img {
    max-width: 180px;
  }

  .error-box h1 {
    font-size: 28px;
  }
}

.error-box a {
  border-radius: 7px;
  padding: 7px 25px;
}

.max-w-350 {
  max-width: 350px;
}

.more-btn-wrapper .dropdown-menu {
  border: 0.5px solid #efefef;
  box-shadow: 0px 5px 10px rgba(26, 25, 85, 0.08);
  border-radius: 5px;
}

.more-btn-wrapper .dropdown-menu .dropdown-item:active,
.more-btn-wrapper .dropdown-menu .dropdown-item:focus {
  background: none;
}

.more-btn-wrapper .dropdown-menu .dropdown-item a {
  width: 100%;
  border-radius: 4px;
  color: #1A2142;
}

.more-btn-wrapper .dropdown-menu .dropdown-item i {
  font-weight: 700;
}

/* ======= Border Radius ========= */
.radius-4 {
  border-radius: 4px;
}

.radius-10 {
  border-radius: 10px;
}

.radius-30 {
  border-radius: 30px;
}

.radius-50 {
  border-radius: 50px;
}

.radius-full {
  border-radius: 50%;
}

.scroll-top {
  width: 45px;
  height: 45px;
  background: #365CF5;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.scroll-top:hover {
  color: #fff;
  background: rgba(54, 92, 245, 0.8);
}

.form-control:focus {
  box-shadow: none;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.form-check-input.is-valid:focus,
.was-validated .form-check-input:valid:focus,
.form-check-input.is-invalid:focus,
.was-validated .form-check-input:invalid:focus,
.form-check-input:focus,
.radio-style.radio-success .form-check-input:focus,
.radio-style.radio-warning .form-check-input:focus,
.radio-style.radio-danger .form-check-input:focus {
  box-shadow: none;
}

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

/* ============= typography css ============= */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: #1A2142;
  margin: 0;
}

h1,
.h1 {
  font-size: 32px;
  font-weight: 700;
}

h2,
.h2 {
  font-size: 28px;
  font-weight: 600;
}

h3,
.h3 {
  font-size: 24px;
  font-weight: 500;
}

h4,
.h4 {
  font-size: 20px;
  font-weight: 600;
}

h5,
.h5 {
  font-size: 16px;
  font-weight: 700;
}

h6,
.h6 {
  font-size: 16px;
  font-weight: 600;
}

.text-bold {
  font-weight: 700;
}

.text-semi-bold {
  font-weight: 600;
}

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

.text-regular {
  font-weight: 400;
}

.text-light {
  font-weight: 300;
}

.text-m {
  font-size: 16px;
  line-height: 22px;
}

.text-sm {
  color: #000;
  font-size: 14px;
  line-height: 22px;
}

.text-xs {
  font-size: 12px;
  line-height: 1.2;
}

.text-s {
  font-size: 10px;
  line-height: 0;
}

/* ========== Breadcrumb ============ */
.title-wrapper .breadcrumb-wrapper,
.title-wrapper .title {
  margin-bottom: 30px;
}

@media (max-width: 767px) {

  .title-wrapper .breadcrumb-wrapper,
  .title-wrapper .title {
    margin-bottom: 10px;
  }
}

.breadcrumb-wrapper {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .breadcrumb-wrapper {
    justify-content: flex-start;
  }
}

.breadcrumb-wrapper .breadcrumb li {
  font-size: 14px;
  color: #365CF5;
  background-color: #f5f5f5 !important;
}

.breadcrumb-wrapper .breadcrumb li a {
  color: #5d657b;
  background-color: #f5f5f5 !important;
}

.breadcrumb-wrapper .breadcrumb li a.active {
  color: #365CF5;
}

.breadcrumb-wrapper .breadcrumb li a:hover {
  color: #365CF5;
}

.breadcrumb .bg-gray-100 {
  background-color: #f5f5f5 !important;
}

/* ========== Buttons css ========== */
/* buttons base styles */
.main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 15px 45px;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  border-radius: 10px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.4s ease-in-out;
  border: 1px solid transparent;
  overflow: hidden;
}

.main-btn i {
  font-size: 17px;
  opacity: 1;
}

.main-btn svg {
  fill: currentColor;
}

.main-btn:hover {
  color: inherit;
}

.main-btn-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* top: -45px; */
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 15px;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  border-radius: 10px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.4s ease-in-out;
  border: 1px solid transparent;
  overflow: hidden;
}

.main-btn-search i {
  font-size: 17px;
}

.main-btnsearch svg {
  fill: currentColor;
}

.main-btn-search:hover {
  color: inherit;
}

.group-btn {
  display: inline-flex;
  border: 1px solid #DFE5EF;
  border-radius: 3px;
}

.group-btn.square-btn .main-btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.group-btn.square-btn .main-btn:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.group-btn.rounded-full .main-btn:first-child {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.group-btn.rounded-full .main-btn:last-child {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.group-btn .main-btn {
  border-radius: 0;
}

.group-btn .main-btn:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.group-btn .main-btn:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.group-btn .main-btn:not(.group-btn .main-btn:last-child) {
  border-right: 1px solid #DFE5EF;
}

.btn-sm {
  padding: 10px 20px;
  font-weight: 400;
}

/* Buttons Hover Effect */
.btn-hover {
  position: relative;
  overflow: hidden;
}

.btn-hover::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 0%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  top: 50%;
  left: 50%;
  padding: 50%;
  z-index: -1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
  -moz-transform: translate3d(-50%, -50%, 0) scale(0);
  -ms-transform: translate3d(-50%, -50%, 0) scale(0);
  -o-transform: translate3d(-50%, -50%, 0) scale(0);
  transform: translate3d(-50%, -50%, 0) scale(0);
}

.btn-hover:hover::after {
  -webkit-transform: translate3d(-50%, -50%, 0) scale(1.3);
  -moz-transform: translate3d(-50%, -50%, 0) scale(1.3);
  -ms-transform: translate3d(-50%, -50%, 0) scale(1.3);
  -o-transform: translate3d(-50%, -50%, 0) scale(1.3);
  transform: translate3d(-50%, -50%, 0) scale(1.3);
}

/* Dropdown Buttons */
.base-dropdown-btn .main-btn {
  padding: 8px 15px;
}

.base-dropdown-btn .main-btn svg {
  fill: currentColor;
}

.base-dropdown-btn .dropdown-menu {
  box-shadow: 0px 12px 24px -4px rgba(145, 158, 171, 0.12), 0px 0px 2px 0px rgba(145, 158, 171, 0.2);
  border-radius: 3px;
  border: none;
}

.base-dropdown-btn .dropdown-item {
  padding: 8px 15px;
  color: #5d657b;
  font-weight: 500;
}

.base-dropdown-btn .dropdown-item:hover {
  color: #5d657b !important;
  background: #f5f8fc;
}

.primary-color {
  color: #0ea5e9;
}

/* primary buttons */
.primary-btn {
  background: linear-gradient(135deg, #69a3ff, #006983);
  box-shadow: 0 0.25rem 0.375rem -0.0625rem hsla(0, 0%, 8%, 0.12), 0 0.125rem 0.25rem -0.0625rem hsla(0, 0%, 8%, 0.07);
  color: #fff;
  transition: all 0.2s
}

.primary-btn:hover {
  box-shadow: 0 -100px 0px rgba(8, 176, 253, 0.95) inset;
  color: #fff
}

.primary-btn-outline {
  background: transparent;
  color: #365CF5;
  border-color: #365CF5;
}

.primary-btn-outline:hover {
  color: #fff;
  background: #365CF5;
}

.primary-btn-light {
  background: rgba(54, 92, 245, 0.12);
  color: #365CF5;
}

.primary-btn-light:hover {
  color: #365CF5;
}

.primary-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #365CF5;
}

.primary-btn-group.active,
.primary-btn-group:hover {
  color: #fff;
  background: #365CF5;
  border-color: #365CF5 !important;
}

/* secondary buttons */
.secondary-btn {
  background: #00c1f8;
  color: #fff;
}

.secondary-btn:hover {
  color: #fff;
}

.secondary-btn-outline {
  background: transparent;
  color: #00c1f8;
  border-color: #00c1f8;
}

.secondary-btn-outline:hover {
  color: #fff;
  background: #00c1f8;
}

.secondary-btn-light {
  background: rgba(0, 193, 248, 0.12);
  color: #00c1f8;
}

.secondary-btn-light:hover {
  color: #00c1f8;
}

.secondary-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #00c1f8;
}

.secondary-btn-group.active,
.secondary-btn-group:hover {
  color: #fff;
  background: #00c1f8;
  border-color: #00c1f8 !important;
}

/* success buttons */
.success-btn {
  background: #219653;
  color: #fff;
}

.success-btn:hover {
  color: #fff;
}

.success-btn-outline {
  background: transparent;
  color: #219653;
  border-color: #219653;
}

.success-btn-outline:hover {
  color: #fff;
  background: #219653;
}

.success-btn-light {
  background: rgba(33, 150, 83, 0.12);
  color: #219653;
}

.success-btn-light:hover {
  color: #219653;
}

.success-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #219653;
}

.success-btn-group.active,
.success-btn-group:hover {
  color: #fff;
  background: #219653;
  border-color: #219653 !important;
}

/* danger buttons */
.danger-btn {
  background: #d50100;
  color: #fff;
}

.danger-btn:hover {
  color: #fff;
}

.danger-btn-outline {
  background: transparent;
  color: #d50100;
  border-color: #d50100;
}

.danger-btn-outline:hover {
  color: #fff;
  background: #d50100;
}

.danger-btn-light {
  background: rgba(213, 1, 0, 0.12);
  color: #d50100;
}

.danger-btn-light:hover {
  color: #d50100;
}

.danger-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #d50100;
}

.danger-btn-group.active,
.danger-btn-group:hover {
  color: #fff;
  background: #d50100;
  border-color: #d50100 !important;
}

/* warning buttons */
.warning-btn {
  background: #f7c800;
  color: #fff;
}

.warning-btn:hover {
  color: #fff;
}

.warning-btn-outline {
  background: transparent;
  color: #f7c800;
  border-color: #f7c800;
}

.warning-btn-outline:hover {
  color: #fff;
  background: #f7c800;
}

.warning-btn-light {
  background: rgba(247, 200, 0, 0.12);
  color: #f7c800;
}

.warning-btn-light:hover {
  color: #f7c800;
}

.warning-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #f7c800;
}

.warning-btn-group.active,
.warning-btn-group:hover {
  color: #fff;
  background: #f7c800;
  border-color: #f7c800 !important;
}

/* info buttons */
.info-btn {
  background: #97ca31;
  color: #fff;
}

.info-btn:hover {
  color: #fff;
}

.info-btn-outline {
  background: transparent;
  color: #97ca31;
  border-color: #97ca31;
}

.info-btn-outline:hover {
  color: #fff;
  background: #97ca31;
}

.info-btn-light {
  background: rgba(151, 202, 49, 0.12);
  color: #97ca31;
}

.info-btn-light:hover {
  color: #97ca31;
}

.info-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #97ca31;
}

.info-btn-group.active,
.info-btn-group:hover {
  color: #fff;
  background: #97ca31;
  border-color: #97ca31 !important;
}

/* dark buttons */
.dark-btn {
  background: #1A2142;
  color: #fff;
}

.dark-btn:hover {
  color: #fff;
}

.dark-btn-outline {
  background: transparent;
  color: #1A2142;
  border-color: #1A2142;
}

.dark-btn-outline:hover {
  color: #fff;
  background: #1A2142;
}

.dark-btn-light {
  background: rgba(26, 33, 66, 0.12);
  color: #1A2142;
}

.dark-btn-light:hover {
  color: #1A2142;
}

.dark-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #1A2142;
}

.dark-btn-group.active,
.dark-btn-group:hover {
  color: #fff;
  background: #1A2142;
  border-color: #1A2142 !important;
}

/* light buttons */
.light-btn {
  background: #DFE5EF;
  color: #1A2142;
}

.light-btn:hover {
  color: #1A2142;
}

.light-btn-outline {
  background: transparent;
  color: #1A2142;
  border-color: #DFE5EF;
}

.light-btn-outline:hover {
  color: #1A2142;
  background: #DFE5EF;
}

.light-btn-light {
  background: rgba(223, 229, 239, 0.5);
  color: #1A2142;
}

.light-btn-light:hover {
  color: #1A2142;
}

.light-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #000;
}

.light-btn-group.active,
.light-btn-group:hover {
  color: #000;
  background: #DFE5EF;
  border-color: #DFE5EF !important;
}

/* active buttons */
.active-btn {
  background: #365CF5;
  color: #fff;
}

.active-btn:hover {
  color: #fff;
}

.active-btn-outline {
  background: transparent;
  color: #365CF5;
  border-color: #365CF5;
}

.active-btn-outline:hover {
  color: #fff;
  background: #365CF5;
}

.active-btn-light {
  background: rgba(54, 92, 245, 0.12);
  color: #365CF5;
}

.active-btn-light:hover {
  color: #365CF5;
}

.active-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #365CF5;
}

.active-btn-group.active,
.active-btn-group:hover {
  color: #fff;
  background: #365CF5;
  border-color: #365CF5 !important;
}

/* deactive buttons */
.deactive-btn {
  background: #E9E9E9;
  color: #8F9AAD;
}

.deactive-btn:hover {
  color: #8F9AAD;
}

.deactive-btn-outline {
  background: transparent;
  color: #8F9AAD;
  border-color: #E9E9E9;
}

.deactive-btn-outline:hover {
  color: #8F9AAD;
  background: #E9E9E9;
}

.deactive-btn-light {
  background: #e9e9e9;
  color: #8F9AAD;
}

.deactive-btn-light:hover {
  color: #8F9AAD;
}

.deactive-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #636363;
}

.deactive-btn-group.active,
.deactive-btn-group:hover {
  color: #636363;
  background: #CBE1FF;
  border-color: #CBE1FF !important;
}

/* =========  square-btn ========= */
.square-btn {
  border-radius: 0px;
}

/* =========  rounded-md ========= */
.rounded-md {
  border-radius: 10px;
}

/* =========  rounded-full ========= */
.rounded-full {
  border-radius: 30px;
}

/* ========== buttons group css ========= */
.buttons-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.buttons-group li {
  margin: 10px;
}

/* ====== Status Button ====== */
.status-btn {
  padding: 7px 15px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 400;
}

.status-btn.primary-btn {
  color: #fff;
  background: #365cf5;
}

.status-btn.active-btn {
  color: #365CF5;
  background: rgba(54, 92, 245, 0.1);
}

.status-btn.close-btn {
  color: #d50100;
  background: rgba(213, 1, 0, 0.1);
}

.status-btn.warning-btn {
  color: #f7c800;
  background: rgba(247, 200, 0, 0.1);
}

.status-btn.info-btn {
  color: #97ca31;
  background: rgba(151, 202, 49, 0.1);
}

.status-btn.success-btn {
  color: #219653;
  background: rgba(33, 150, 83, 0.1);
}

.status-btn.secondary-btn {
  color: #00c1f8;
  background: rgba(0, 193, 248, 0.1);
}

.status-btn.dark-btn {
  color: #1A2142;
  background: rgba(26, 33, 66, 0.1);
}

.status-btn.orange-btn {
  color: #f2994a;
  background: rgba(242, 153, 74, 0.1);
}

/* ============ alerts css ============ */
.alert-box {
  display: flex;
  position: relative;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .alert-box {
    padding-left: 0px !important;
  }
}

.alert-box .left {
  max-width: 75px;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #d50100;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  .alert-box .left {
    display: none;
  }
}

.alert-box .left h5 {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  color: #fff;
}

.alert-box .alert {
  margin-bottom: 0px;
  padding: 25px 40px;
}

@media (max-width: 767px) {
  .alert-box .alert {
    padding: 20px;
  }
}

/* Alert Primary */
.primary-alert .left {
  background: #365CF5;
}

.primary-alert .alert {
  color: #365CF5;
  border: 1px solid #365CF5;
  background: rgba(54, 92, 245, 0.2);
  width: 100%;
}

.primary-alert .alert .alert-heading {
  color: #365CF5;
  margin-bottom: 15px;
}

/* Alert Danger */
.danger-alert .left {
  background: #d50100;
}

.danger-alert .alert {
  color: #d50100;
  border: 1px solid #d50100;
  background: rgba(213, 1, 0, 0.2);
  width: 100%;
}

.danger-alert .alert .alert-heading {
  color: #d50100;
  margin-bottom: 15px;
}

/* Alert warning */
.warning-alert .left {
  background: #f7c800;
}

.warning-alert .alert {
  color: #f7c800;
  border: 1px solid #f7c800;
  background: rgba(247, 200, 0, 0.2);
  width: 100%;
}

.warning-alert .alert .alert-heading {
  color: #f7c800;
  margin-bottom: 15px;
}

/* Alert warning */
.warning-alert .left {
  background: #f7c800;
}

.warning-alert .alert {
  color: #f7c800;
  border: 1px solid #f7c800;
  background: rgba(247, 200, 0, 0.2);
  width: 100%;
}

.warning-alert .alert .alert-heading {
  color: #f7c800;
  margin-bottom: 15px;
}

/* Alert info */
.info-alert .left {
  background: #97ca31;
}

.info-alert .alert {
  color: #97ca31;
  border: 1px solid #97ca31;
  background: rgba(151, 202, 49, 0.2);
  width: 100%;
}

.info-alert .alert .alert-heading {
  color: #97ca31;
  margin-bottom: 15px;
}

/* Alert success */
.success-alert .left {
  background: #219653;
}

.success-alert .alert {
  color: #219653;
  border: 1px solid #219653;
  background: rgba(33, 150, 83, 0.2);
  width: 100%;
}

.success-alert .alert .alert-heading {
  color: #219653;
  margin-bottom: 15px;
}

/* Alert secondary */
.secondary-alert .left {
  background: #00c1f8;
}

.secondary-alert .alert {
  color: #00c1f8;
  border: 1px solid #00c1f8;
  background: rgba(0, 193, 248, 0.2);
  width: 100%;
}

.secondary-alert .alert .alert-heading {
  color: #00c1f8;
  margin-bottom: 15px;
}

/* Alert gray */
.gray-alert .left {
  background: #5d657b;
}

.gray-alert .alert {
  color: #5d657b;
  border: 1px solid #5d657b;
  background: rgba(93, 101, 123, 0.2);
  width: 100%;
}

.gray-alert .alert .alert-heading {
  color: #5d657b;
  margin-bottom: 15px;
}

/* Alert black */
.black-alert .left {
  background: #000;
}

.black-alert .alert {
  color: #000;
  border: 1px solid #000;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
}

.black-alert .alert .alert-heading {
  color: #000;
  margin-bottom: 15px;
}

/* Alert orange */
.orange-alert .left {
  background: #f2994a;
}

.orange-alert .alert {
  color: #f2994a;
  border: 1px solid #f2994a;
  background: rgba(242, 153, 74, 0.2);
  width: 100%;
}

.orange-alert .alert .alert-heading {
  color: #f2994a;
  margin-bottom: 15px;
}

/* ========== cards css =========== */
/* card-style-1 */
.card-style-1 {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 10px;
  padding: 25px 0;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.card-style-1:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.card-style-1 .card-meta {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 30px;
}

@media (max-width: 767px) {
  .card-style-1 .card-meta {
    padding: 0 20px;
  }
}

.card-style-1 .card-meta .image {
  max-width: 40px;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}

.card-style-1 .card-meta .image img {
  width: 100%;
}

.card-style-1 .card-meta .text p {
  color: #1A2142;
}

.card-style-1 .card-meta .text p a {
  color: inherit;
}

.card-style-1 .card-meta .text p a:hover {
  color: #365CF5;
}

.card-style-1 .card-image {
  border-radius: 10px;
  margin-bottom: 25px;
  overflow: hidden;
}

.card-style-1 .card-image a {
  display: block;
}

.card-style-1 .card-image img {
  width: 100%;
}

.card-style-1 .card-content {
  padding: 0px 30px;
}

@media (max-width: 767px) {
  .card-style-1 .card-content {
    padding: 0px 20px;
  }
}

.card-style-1 .card-content h4 a {
  color: inherit;
  margin-bottom: 15px;
  display: block;
}

.card-style-1 .card-content h4 a:hover {
  color: #365CF5;
}

/* card-style-2 */
.card-style-2 {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 4px;
  padding: 20px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.card-style-2:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.card-style-2 .card-image {
  border-radius: 4px;
  margin-bottom: 30px;
  overflow: hidden;
}

.card-style-2 .card-image a {
  display: block;
}

.card-style-2 .card-image img {
  width: 100%;
}

.card-style-2 .card-content {
  padding: 0px 10px;
}

@media (max-width: 767px) {
  .card-style-2 .card-content {
    padding: 0px;
  }
}

.card-style-2 .card-content h4 a {
  color: inherit;
  margin-bottom: 15px;
  display: block;
}

.card-style-2 .card-content h4 a:hover {
  color: #365CF5;
}

/* card-style-3 */
.card-style-3 {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 4px;
  padding: 25px 30px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.card-style-3:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.card-style-3 .card-content h4 a {
  color: inherit;
  margin-bottom: 15px;
  display: block;
}

.card-style-3 .card-content h4 a:hover {
  color: #365CF5;
}

.card-style-3 .card-content a.read-more {
  font-weight: 500;
  color: #1A2142;
  margin-top: 20px;
}

.card-style-3 .card-content a.read-more:hover {
  color: #365CF5;
  letter-spacing: 2px;
}

/* card-style-4 */
.card-style-4 {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 4px;
  padding: 20px 30px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.card-style-4:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.card-style-4 .card-image {
  border-radius: 50%;
  margin: auto;
  margin-bottom: 30px;
  max-width: 250px;
  width: 100%;
  overflow: hidden;
}

.card-style-4 .card-image a {
  display: block;
}

.card-style-4 .card-image img {
  width: 100%;
}

.card-style-4 .card-content {
  margin-bottom: 10px;
}

.card-style-4 .card-content h4 a {
  color: inherit;
  margin-bottom: 15px;
  display: block;
}

.card-style-4 .card-content h4 a:hover {
  color: #365CF5;
}

.card-style-4 .card-content a.read-more {
  font-weight: 500;
  color: #1A2142;
  margin-top: 20px;
}

.card-style-4 .card-content a.read-more:hover {
  color: #365CF5;
  letter-spacing: 2px;
}

/* card-style-5 */
.card-style-5 {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 4px;
  padding: 20px;
  display: flex;
  align-items: center;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.card-style-5:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
  .card-style-5 {
    display: block;
  }
}

@media only screen and (min-width: 550px) and (max-width: 767px) {
  .card-style-5 {
    display: flex;
  }
}

.card-style-5 .card-image {
  margin: auto;
  margin-right: 20px;
  border-radius: 4px;
  max-width: 180px;
  width: 100%;
  overflow: hidden;
}

@media (max-width: 767px) {
  .card-style-5 .card-image {
    margin-right: auto;
    margin-bottom: 20px;
    max-width: 100%;
  }
}

@media only screen and (min-width: 550px) and (max-width: 767px) {
  .card-style-5 .card-image {
    margin-right: 20px;
    margin-bottom: 0px;
    max-width: 180px;
  }
}

.card-style-5 .card-image a {
  display: block;
}

.card-style-5 .card-image img {
  width: 100%;
}

@media (max-width: 767px) {
  .card-style-5 .card-image img {
    width: 100%;
  }
}

.card-style-5 .card-content {
  margin-bottom: 10px;
}

.card-style-5 .card-content h4 a {
  color: inherit;
  margin-bottom: 15px;
  display: block;
}

.card-style-5 .card-content h4 a:hover {
  color: #365CF5;
}

.card-style-5 .card-content .main-btn {
  margin-top: 20px;
}

/* ======= card-style-6 ======== */
.card-style-6 {
  padding: 25px 30px;
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.card-style-6:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
(max-width: 767px) {
  .card-style-6 {
    padding: 20px;
  }
}

.card-style-6 .card-image {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
}

.card-style-6 .card-image a {
  display: block;
}

.card-style-6 .card-image a img {
  width: 100%;
}

.card-style-6 .card-action {
  display: flex;
}

.card-style-6 .card-action .action {
  display: flex;
  align-items: center;
}

.card-style-6 .card-action .action a {
  color: #5d657b;
  font-size: 14px;
}

.card-style-6 .card-action .action a:hover {
  text-decoration: underline;
}

.card-style-6 .card-action .action button {
  border: none;
  background: none;
  display: flex;
  color: #1A2142;
  margin-right: 10px;
  font-size: 16px;
}

.card-style-6 .card-action .action button:hover {
  color: #365CF5;
}

/* ======= icon-card ======== */
hr.horizontal {
  background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4), transparent);
  height: 1px;
  border: 0;
  opacity: 0.25;
}

.icon-card {
  display: flex;
  align-items: center;
  background: #fff;
  /* background-image: radial-gradient(227.71% 180.23% at 90.64% 130.38%, #dcdcdcdb 0%, #ffffff 100%), url(https://www.simplilearn.com/ice9/free_resources_article_thumb/How_To_Become_A_Content_Writer.jpg) !important;
  background-size: cover !important; */
  padding: 30px 20px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
  /* box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.3), inset -2px -2px 8px 0 rgba(0, 0, 0, 0.1), inset 5px 5px 2px 0 rgba(255, 255, 255, 0.2); */
  border-radius: 7px;
}

.icon-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  /* box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.3), inset -2px -2px 8px 0 rgba(0, 0, 0, 0.1), inset 5px 5px 2px 0 rgba(255, 255, 255, 0.2); */
  transition: all 0.7s;
}

.icon-card.icon-card-3 {
  display: block;
  padding: 0px;
}

.icon-card.icon-card-3 .card-content {
  display: flex;
  padding: 20px;
  padding-bottom: 0;
}

.icon-card.icon-card-4 {
  display: block;
  padding: 30px;
}

.icon-card.icon-card-4 .icon {
  max-width: 50px;
  height: 50px;
  border-radius: 5px;
  background: rgba(54, 92, 245, 0.08);
}

.icon-card.icon-card-4 .text-danger-2 i {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.icon-card.icon-card-4 .card-content {
  margin-top: 18px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .icon-card h6 {
    font-size: 15px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .icon-card h3 {
    font-size: 20px;
  }
}

.icon-card.icon-card-2 {
  display: block;
}

.icon-card.icon-card-2 .progress {
  height: 7px;
}

.icon-card.icon-card-2 .progress .progress-bar {
  border-radius: 4px;
}

.icon-card .icon {
  max-width: 46px;
  width: 100%;
  height: 46px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  margin-right: 20px;
  background: rgba(54, 92, 245, 0.1);
  color: #365CF5;
  font-weight: 700;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .icon-card .icon {
    margin-right: 10px;
  }
}

.icon-card .icon.purple {
  background: linear-gradient(135deg, #5b23ac 0%, #a747e6 100%);
  color: #dbb4ff;
  box-shadow: 0 4px 10px rgba(227, 133, 255, 0.3);
}

.icon-card .icon.success {
  background: linear-gradient(135deg, #23ac90 0%, #86e647 100%);
  color: #b4ffeb;
  box-shadow: 0 4px 10px rgba(120, 236, 135, 0.3);
}

.icon-card .icon.primary {
  background: linear-gradient(135deg, #234cac 0%, #4776E6 100%);
  color: #6786ff;
  box-shadow: 0 4px 10px rgba(71, 118, 230, 0.3);
}

.icon-card .icon.orange {
  background: linear-gradient(135deg, #ffdc12 0%, #e6b347 100%);
  color: #ff9537;
  box-shadow: 0 4px 10px rgba(255, 179, 71, 0.3);
}

.icon-card .icon.blue-light {
  background: rgba(73, 190, 255, 0.08);
  color: #49BEFF;
}

.icon-card .icon.opacity-100.purple {
  background: #9b51e0;
  color: #fff;
}

.icon-card .icon.opacity-100.success {
  background: #219653;
  color: #fff;
}

.icon-card .icon.opacity-100.primary {
  background: #365CF5;
  color: #fff;
}

.icon-card .icon.opacity-100.orange {
  background: #f2994a;
  color: #fff;
}

.icon-card .icon.opacity-100.deep-blue {
  background: #345d9d;
  color: #fff;
}

.card-wrapper {
  display: flex;
  width: 100%;
  overflow-x: auto;
  padding: 25px 15px;
}

.card-wrapper .single-card-wrapper {
  padding: 0px 15px;
}

.card-wrapper .single-card {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 30px;
  max-width: 330px;
  min-width: 330px;
  width: 100%;
}

.card-wrapper .single-card .bg-shape {
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  z-index: -1;
}

.card-wrapper .single-card h3 {
  font-weight: bold;
  font-size: 24px;
  color: #fff;
  margin-bottom: 36px;
}

.card-wrapper .single-card .card-info {
  display: flex;
  align-items: center;
}

.card-wrapper .single-card .card-info span {
  font-weight: 500;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.card-wrapper .single-card .card-info p {
  font-weight: 500;
  font-size: 12px;
  color: #fff;
}

/* =========== tables css =========== */
.table {
  border-collapse: inherit;
  border-spacing: 0px;
}

.table> :not(caption)>*>* {
  padding: 15px 0;
  border-bottom-color: #efefef;
  vertical-align: middle;
}

.table> :not(:last-child)> :last-child>* {
  border-bottom-color: #efefef;
}

.table tbody tr:first-child>* {
  padding-top: 10px;
}

.table tbody tr:last-child>* {
  border-bottom-color: transparent;
  padding-bottom: 0px;
}

.table th h6 {
  font-weight: 500;
  color: #1A2142;
  font-size: 15px;
}

.table td.min-width {
  padding: 5px;
}

.table-width-120px {
  width: 120px;
}

.table tbody tr:nth-of-type(odd) {
  background-color: rgb(226 239 249 / 44%);
}

@media (max-width: 767px) {
  .table td.min-width {
    /* min-width: 150px; */
    min-width: 53px;
  }
}

.table td p {
  font-weight: 500;
  line-height: 1.5;
  color: #5d657b;
}

.table td p a {
  color: inherit;
}

.table td p a:hover {
  color: #365CF5;
}

.table .lead-info {
  min-width: 200px;
}

.table .lead-info-numbers {
  min-width: 50px;
}

.table .lead-email {
  min-width: 150px;
  white-space: nowrap;
}

.table .lead-phone {
  min-width: 160px;
}

.table .lead-company {
  min-width: 180px;
}

.table .referrals-image {
  min-width: 150px;
}

.table .referrals-image .image {
  width: 55px;
  max-width: 100%;
  height: 55px;
  border-radius: 4px;
  overflow: hidden;
}

.table .referrals-image .image img {
  width: 100%;
}

.table .lead {
  display: flex;
  align-items: center;
}

.table .lead .lead-image {
  max-width: 50px;
  width: 100%;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.table .lead .lead-image img {
  width: 100%;
}

.table .lead .lead-text {
  width: 100%;
}

.table .employee-image {
  width: 50px;
  max-width: 100%;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.table .employee-image img {
  width: 100%;
}

.table .action {
  display: flex;
  align-items: center;
}

.table .action button {
  border: none;
  background: transparent;
  padding: 0px 6px;
  font-size: 18px;
}

.table .action button.edit:hover {
  color: #365CF5;
}

.table .action button::after {
  display: none;
}

.table .action .dropdown-menu {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
}

.table .action .dropdown-menu li:hover a {
  color: #365CF5 !important;
}

.table .action .dropdown-menu li a {
  display: block;
}

.top-selling-table tr th,
.top-selling-table tr td {
  vertical-align: middle;
  padding: 10px 5px;
}

.top-selling-table tr .min-width {
  min-width: 80px;
  white-space: nowrap;
}

.top-selling-table .form-check-input[type=checkbox] {
  margin-left: 5px;
}

.top-selling-table .form-check-input[type=checkbox]:checked {
  background-color: #365CF5;
  border-color: #365CF5;
}

.top-selling-table .product {
  display: flex;
  align-items: center;
  min-width: 150px;
}

.top-selling-table .product .image {
  border-radius: 4px;
  overflow: hidden;
  margin-right: 15px;
  max-width: 50px;
  width: 100%;
  height: 50px;
}

.top-selling-table .product .image img {
  width: 100%;
}

.top-selling-table .product p {
  width: 100%;
}

@media (max-width: 767px) {
  .referrals-table-card .title .right {
    width: 100%;
  }
}

@media only screen and (min-width: 550px) and (max-width: 767px) {
  .referrals-table-card .title .right {
    width: auto;
  }
}

.referrals-table-card .referrals-table td {
  padding: 10px;
}

/* ===== lead-table ===== */
.lead-table th,
.lead-table td {
  padding: 10px 5px;
}

.lead-table .name {
  min-width: 120px;
}

.lead-table .email {
  min-width: 130px;
}

.lead-table .project {
  min-width: 150px;
}

.lead-table .status {
  min-width: 120px;
  text-align: center;
}

.lead-table .action {
  min-width: 60px;
}

.clients-table-card .table .employee-info {
  min-width: 150px;
}

.clients-table th,
.clients-table td {
  padding: 5px;
}

.clients-table th.min-width,
.clients-table td.min-width {
  min-width: 150px;
}

.clients-table .employee-image {
  margin-right: 0px;
}

.table-pagination ul li a {
  width: 32px;
  height: 32px;
  background: #e5e5e5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
}

.table-pagination ul li a:hover,
.table-pagination ul li a.active {
  background: #365CF5;
  color: #fff;
}

.navbar-form-popover {
  transform: translate(0%, 0%);
  float: left;
  display: block;
  margin: 0 0 20px 0px;
  width: 100%;
}

.navbar-form-popover-search {
  background: #ffffff;
  box-shadow: inset 5px 5px 7px #ffffff, inset -5px -5px 7px #f5f5f5;
  width: 100%;
  padding: 12px 20px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  border-radius: 9px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #bdbdbd;
  padding-inline-start: 1rem;
  padding-inline-end: 2.5rem;
}

.navbar-form-popover-search input {
  width: 100%;
  border: 1px solid #efefef;
  background: #fff;
  box-shadow: 0 0px 2px rgba(0, 0, 0, .15);
  border-radius: 8px;
  padding: 10px 10px 10px 44px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.navbar-form-popover-search:focus {
  border-color: #365CF5;
  background: #fff;
  transition: all 0.3s ease-out 0s;
}

.navbar-form-popover-search-button {
  float: right;
  top: 14px;
  right: 16px;
  position: absolute;
  border: none;
  background: none;
}

.navbar-form-blockedwords {
  position: relative;
  /* top: 23px; */
  transform: translate(0%, 0%);
  float: right;
  display: block;
  width: 210px;
}

.navbar-form {
  /* position: absolute; */
  /* top: 23px; */
  transform: translate(0%, 0%);
  float: right;
  display: block;
  width: 210px;
}

.navbar-form-right-90 {
  right: 90px;
}

.navbar-form button {
  position: absolute;
  display: inline-flex;
  background: transparent;
  color: #000;
  border: none;
  top: 17px;
  right: 20px;
}

.navbar-form-search {
  background: #ffffff;
  box-shadow: inset 5px 5px 7px #ffffff, inset -5px -5px 7px #f5f5f5;
  width: 100%;
  padding: 12px 20px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  border-radius: 9px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  padding-inline-start: 1rem;
  padding-inline-end: 2.5rem;
  border: 1px solid #bdbdbd;
}

.navbar-form-search input {
  width: 100%;
  border: 1px solid #efefef;
  background: #fff;
  box-shadow: 0 0px 2px rgba(0, 0, 0, .15);
  border-radius: 8px;
  padding: 10px 10px 10px 44px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.navbar-form-search:focus {
  border-color: #365CF5;
  background: #fff;
  transition: all 0.3s ease-out 0s;
}

.table-search form {
  max-width: 270px;
  position: relative;
}

.table-search form input {
  width: 100%;
  border: 1px solid #efefef;
  background: rgba(239, 239, 239, 0.5);
  border-radius: 4px;
  height: 46px;
  padding-left: 44px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.table-search form input:focus {
  border-color: #365CF5;
}

.table-search form button {
  position: absolute;
  border: none;
  background: transparent;
  left: 16px;
  top: 0;
  height: 46px;
  color: #5d657b;
}

.striped-table td,
.striped-table th {
  padding-left: 5px;
  padding-right: 5px;
}

.dataTable-pagination li:hover a,
.dataTable-pagination .active a,
.dataTable-pagination .active a:focus,
.dataTable-pagination .active a:hover {
  background: #365CF5;
  color: #fff;
  border-radius: 3px;
}

.dataTable-pagination .ellipsis:hover a {
  background: transparent;
  color: #333;
}

.dataTable-selector {
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.dataTable-input {
  width: 100%;
  border: 1px solid #efefef;
  background: rgba(239, 239, 239, 0.5);
  border-radius: 4px;
  height: 46px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.dataTable-input:focus {
  border-color: #365CF5;
}

.dataTable-input:focus {
  border-color: #365CF5;
}

.dataTable-table>tbody>tr>td,
.dataTable-table>tbody>tr>th,
.dataTable-table>tfoot>tr>td,
.dataTable-table>tfoot>tr>th,
.dataTable-table>thead>tr>td,
.dataTable-table>thead>tr>th {
  padding: 15px 10px;
}

@media (max-width: 767px) {
  .dataTable-top>div:last-child.dataTable-search {
    margin-top: 12px;
    float: left;
  }
}

@media (max-width: 767px) {
  .dataTable-pagination ul li {
    margin: 5px 0;
  }
}

.activity-card .button-group {
  display: flex;
  align-items: center;
  border-radius: 50px;
  border: 1px solid #efefef;
}

.activity-card .button-group a {
  font-weight: 500;
  font-size: 12px;
  padding: 4px 16px;
  display: inline-block;
  color: #2f3546;
  border-radius: 50px;
  margin: 3px;
}

.activity-card .button-group a.active,
.activity-card .button-group a:hover {
  background: #365CF5;
  color: #fff;
}

.button-group i span,
a {
  display: inline-block;
}

.button-group1 a {
  display: inline-block !important;
  width: 100%;
}

/* .button-group2 span, a {
  display: inline-block!important;
  width: 100%;
} */
.activity-table td {
  min-width: 90px;
  padding: 10px;
  border: none;
}

.activity-table td.time {
  min-width: 110px;
}

.activity-table .icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.activity-table .icon .status {
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: -1px;
  right: -1px;
}

.activity-table .status-btn {
  font-size: 12px;
  border-radius: 50px;
  border: 1px solid #efefef;
  padding: 4px 14px;
  color: #5d657b;
  min-width: 90px;
  text-align: center;
}

.sell-order-table th,
.sell-order-table td {
  min-width: 60px;
  padding: 10px 5px;
  border: none;
}

/* =========== form elements css ========== */
/* ===== input style ===== */
.input-style-1 {
  position: relative;
  margin-bottom: 30px;
}

.input-style-1 label {
  font-size: 14px;
  font-weight: 500;
  color: #1A2142;
  display: block;
  margin-bottom: 10px;
}

.input-style-1 input,
.input-style-1 textarea {
  width: 100%;
  background: rgba(239, 239, 239, 0.5);
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 16px;
  color: #5d657b;
  resize: none;
  transition: all 0.3s;
}

@media (max-width: 767px) {

  .input-style-1 input,
  .input-style-1 textarea {
    font-size: 14px;
  }
}

.input-style-1 input:focus,
.input-style-1 textarea:focus {
  border-color: #365CF5;
  background: #fff;
}

.input-style-1 input[type=date],
.input-style-1 input[type=time],
.input-style-1 textarea[type=date],
.input-style-1 textarea[type=time] {
  background: transparent;
}

.input-style-1 input.light-bg[type=date],
.input-style-1 input.light-bg[type=time],
.input-style-1 textarea.light-bg[type=date],
.input-style-1 textarea.light-bg[type=time] {
  background: rgba(239, 239, 239, 0.5);
}

.input-style-1 input.light-bg[type=date]:focus,
.input-style-1 input.light-bg[type=time]:focus,
.input-style-1 textarea.light-bg[type=date]:focus,
.input-style-1 textarea.light-bg[type=time]:focus {
  background: #fff;
}

.input-style-2 {
  position: relative;
  margin-bottom: 30px;
  z-index: 1;
}

.input-style-2 label {
  font-size: 14px;
  font-weight: 500;
  color: #1A2142;
  display: block;
  margin-bottom: 10px;
}

.input-style-2 input,
.input-style-2 textarea {
  width: 100%;
  background: rgba(239, 239, 239, 0.5);
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 16px;
  color: #5d657b;
  resize: none;
  transition: all 0.3s;
}

.input-style-2 input:focus,
.input-style-2 textarea:focus {
  border-color: #365CF5;
  background: #fff;
}

.input-style-2 input[type=date],
.input-style-2 input[type=time],
.input-style-2 textarea[type=date],
.input-style-2 textarea[type=time] {
  background: transparent;
}

.input-style-2 input[type=date]::-webkit-inner-spin-button,
.input-style-2 input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.input-style-2 input[type=date]~.icon {
  z-index: -1;
}

.input-style-2 .icon {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 17px;
}

.input-style-3 {
  position: relative;
  margin-bottom: 30px;
}

.input-style-3 label {
  font-size: 14px;
  font-weight: 500;
  color: #1A2142;
  display: block;
  margin-bottom: 10px;
}

.input-style-3 input,
.input-style-3 textarea {
  width: 100%;
  background: rgba(239, 239, 239, 0.5);
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 16px;
  padding-left: 45px;
  color: #5d657b;
  resize: none;
  transition: all 0.3s;
}

.input-style-3 input:focus,
.input-style-3 textarea:focus {
  border-color: #365CF5;
  background: #fff;
}

.input-style-3 .icon {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  padding: 16px;
}

/* ========= select style ========== */
.select-style-1 {
  margin-bottom: 30px;
}

.select-style-1 label {
  font-size: 11px;
  font-weight: 500;
  color: #1A2142;
  display: block;
  margin-bottom: 3px;
}

.select-style-1 .select-position {
  position: relative;
}

.select-style-1 .select-position::after {
  border-bottom: 2px solid #5d657b;
  border-right: 2px solid #5d657b;
  content: "";
  display: block;
  height: 5px;
  width: 5px;
  margin-top: -5px;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.select-style-1 .select-position.select-sm::after {
  margin-top: 4px;
}

.select-style-1 .select-position.select-sm select {
  padding-top: 0;
  padding-bottom: 8px;
  font-size: 14px;
}

.select-style-1 .select-position select {
  width: 100%;
  background: transparent;
  border: 1px solid #e5e5e5;
  border-radius: 5px 5px 0 0;
  padding: 16px;
  padding-right: 28px;
  color: #5d657b;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.select-style-1 .select-position select:focus {
  border-color: #365CF5;
  outline: none;
}

.select-style-1 .select-position select.light-bg {
  background: rgba(239, 239, 239, 0.5);
}

.select-style-1 .select-position select.light-bg:focus {
  background: #fff;
}

.select-style-1 .select-position select.radius-30 {
  border-radius: 30px;
}

.select-style-2 {
  margin-bottom: 30px;
}

.select-style-2 .select-position {
  position: relative;
}

.select-style-2 .select-position.select-sm::after {
  margin-top: -8px;
}

.select-style-2 .select-position.select-sm::before {
  margin-top: 0;
}

.select-style-2 .select-position.select-sm select {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
}

.select-style-2 .select-position::before,
.select-style-2 .select-position::after {
  content: "";
  display: block;
  height: 8px;
  width: 8px;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.select-style-2 .select-position::before {
  margin-top: 0px;
  border-bottom: 1px solid #5d657b;
  border-right: 1px solid #5d657b;
}

.select-style-2 .select-position::after {
  margin-top: -8px;
  border-top: 1px solid #5d657b;
  border-left: 1px solid #5d657b;
}

.select-style-2 .select-position select {
  width: 100%;
  background: transparent;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 16px;
  padding-right: 38px;
  color: #5d657b;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.select-style-2 .select-position select:focus {
  border-color: #365CF5;
  outline: none;
}

.select-style-2 .select-position select.light-bg {
  background: rgba(239, 239, 239, 0.5);
}

.select-style-2 .select-position select.light-bg:focus {
  background: #fff;
}

.select-style-2 .select-position select.select-sm {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
}

.select-style-3 {
  margin-bottom: 30px;
}

.select-style-3 .select-position {
  position: relative;
}

.select-style-3 .select-position::after {
  border-bottom: 2px solid #5d657b;
  border-right: 2px solid #5d657b;
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  margin-top: -7px;
  pointer-events: none;
  position: absolute;
  right: 0px;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.select-style-3 .select-position.select-sm::after {
  margin-top: -8px;
}

.select-style-3 .select-position.select-sm select {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
}

.select-style-3 .select-position select {
  width: 100%;
  background: transparent;
  border: transparent;
  border-radius: 10px;
  padding-right: 38px;
  color: #000;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.select-style-3 .select-position select:focus {
  border-color: #365CF5;
  outline: none;
}

.select-style-3 .select-position select.light-bg {
  background: rgba(239, 239, 239, 0.5);
}

.toggle-switch {
  padding-left: 60px;
  min-height: 30px;
}

.toggle-switch .form-check-input {
  width: 50px;
  height: 28px;
  margin-left: -60px;
  cursor: pointer;
}

.toggle-switch label {
  margin-top: 6px;
  font-size: 14px;
  color: #1A2142;
  cursor: pointer;
  user-select: none;
}

.checkbox-style {
  padding-left: 40px;
  min-height: 22px;
}

.checkbox-style .form-check-input {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  margin-left: -40px;
  cursor: pointer;
  margin-top: 6px;
}

.checkbox-style .form-check-input:checked {
  background-color: #365CF5;
  border-color: #365CF5;
}

.checkbox-style .form-check-input:disabled {
  cursor: auto;
}

.checkbox-style .form-check-input:disabled~label {
  cursor: auto;
}

.checkbox-style label {
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
  left: -10px;
}

.checkbox-style.checkbox-success .form-check-input:checked {
  background-color: #219653;
  border-color: #219653;
}

.checkbox-style.checkbox-warning .form-check-input:checked {
  background-color: #f7c800;
  border-color: #f7c800;
}

.checkbox-style.checkbox-danger .form-check-input:checked {
  background-color: #d50100;
  border-color: #d50100;
}

.radio-style {
  padding-left: 40px;
  min-height: 22px;
}

.radio-style .form-check-input {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-left: -40px;
  cursor: pointer;
  margin-top: 7px;
}

.radio-style .form-check-input:disabled {
  cursor: auto;
}

.radio-style .form-check-input:disabled~label {
  cursor: auto;
}

.radio-style label {
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
}

.radio-style.radio-success .form-check-input:checked {
  background-color: #219653;
  border-color: #219653;
}

.radio-style.radio-warning .form-check-input:checked {
  background-color: #f7c800;
  border-color: #f7c800;
}

.radio-style.radio-danger .form-check-input:checked {
  background-color: #d50100;
  border-color: #d50100;
}

@media (max-width: 767px) {
  .button-group .main-btn {
    width: 100%;
  }
}

.buy-sell-form .input-group {
  display: flex;
}

.buy-sell-form .input-group input {
  width: 60%;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  color: #5d657b;
}

.buy-sell-form .input-group input:focus {
  border-color: #365CF5;
}

.buy-sell-form .input-group .select-style-1 {
  width: 40%;
}

.buy-sell-form .input-group .select-style-1 .select-position::after {
  width: 8px;
  height: 8px;
}

.buy-sell-form .input-group select {
  border: 1px solid #e2e8f0;
  border-radius: 0px 4px 4px 0px;
  padding: 8px 16px;
  padding-right: 24px;
  font-size: 14px;
  color: #5d657b;
}

.buy-sell-form .buy-sell-btn .main-btn {
  display: block;
  width: 100%;
  font-weight: 500;
}

.buy-sell-form .buy-sell-btn .main-btn:hover {
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
}

.buy-sell-form .buy-sell-btn .main-btn.success-btn {
  background: #08c18d;
}

.buy-sell-form .buy-sell-btn .main-btn.danger-btn {
  background: #eb5757;
}

.buy-sell-form .field-group-2 label {
  font-size: 12px;
}

.buy-sell-form .field-group-2 .input-group input {
  font-size: 12px;
  width: 70%;
}

.buy-sell-form .field-group-2 .input-group span {
  font-size: 12px;
  padding: 8px 16px;
  width: 30%;
  background: #e2e8f0;
  text-align: center;
  border-radius: 0px 4px 4px 0px;
  border: 1px solid #e2e8f0;
}

.buy-sell-form .input-group-2 label {
  font-size: 12px;
  color: #5d657b;
  margin-bottom: 8px;
  display: block;
}

.buy-sell-form .input-group-2 .select-position::after {
  width: 8px;
  height: 8px;
}

.buy-sell-form .input-group-2 select {
  padding: 8px 12px;
  font-size: 12px;
  color: #5d657b;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  width: 100%;
}

/* ============= notification css ============= */
.single-notification {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #efefef;
}

.single-notification.readed {
  opacity: 0.7;
}

.single-notification:first-child {
  padding-top: 0px;
}

.single-notification:last-child {
  padding-bottom: 0px;
  border-bottom: 0px;
}

.single-notification .checkbox {
  max-width: 50px;
  width: 100%;
  padding-top: 10px;
}

@media (max-width: 767px) {
  .single-notification .checkbox {
    display: none;
  }
}

.single-notification .checkbox input {
  background-color: #efefef;
  border-color: #e5e5e5;
}

.single-notification .checkbox input:checked {
  background-color: #365CF5;
  border-color: #365CF5;
}

.single-notification .notification {
  display: flex;
  width: 100%;
}

@media (max-width: 767px) {
  .single-notification .notification {
    flex-direction: column;
  }
}

.single-notification .notification .image {
  max-width: 50px;
  width: 100%;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  margin-right: 15px;
}

@media (max-width: 767px) {
  .single-notification .notification .image {
    margin-bottom: 15px;
  }
}

.single-notification .notification .image img {
  width: 100%;
}

.single-notification .notification .content {
  display: block;
  max-width: 800px;
}

.single-notification .notification .content h6 {
  margin-bottom: 15px;
}

.single-notification .notification .content p {
  margin-bottom: 10px;
}

.single-notification .action {
  display: inline-flex;
  justify-content: flex-end;
  padding-top: 10px;
}

@media (max-width: 767px) {
  .single-notification .action {
    display: none;
  }
}

.single-notification .action button {
  border: none;
  background: transparent;
  color: #5d657b;
  margin-left: 20px;
  font-size: 18px;
}

.single-notification .action button.delete-btn:hover {
  color: #d50100;
}

.single-notification .action .dropdown-toggle::after {
  display: none;
}

/* ========== Theme Change Css ============== */
.darkTheme .single-notification {
  border-color: #2f3546;
}

/* ========== header css ========== */
.header {
  padding: 22px 0;
  /* background: #fff; */
  position: sticky;
  top: 0;
  z-index: 99;
  box-shadow: none;
  background: center center / cover rgba(244, 247, 254, 0.2);
  border-color: transparent;
  filter: none;
  backdrop-filter: blur(20px);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-width: 1.5px;
  border-style: solid;
  transition-delay: 0s, 0s, 0s, 0s;
  transition-duration: 0.25s, 0.25s, 0.25s, 0s;
  transition-timing-function: linear, linear, linear, linear;
}

.header .header-left .menu-toggle-btn .main-btn {
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header .header-left .header-search form {
  /* max-width: 270px;
  position: relative; */
  /* max-width: 270px;
  right: 350px; */
  top: 0px;
  align-self: flex-end;
  position: absolute;
  display: block;
  width: 100%;
}

.header .header-left .header-search form input {
  width: 100%;
  border: 1px solid #efefef;
  background: #fff;
  box-shadow: 0 0px 2px rgba(0, 0, 0, .15);
  border-radius: 8px;
  padding: 10px 10px 10px 44px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.header .header-left .header-search form input:focus {
  border-color: #365CF5;
  background: #fff;
}

.header .header-left .header-search form button {
  position: absolute;
  border: none;
  background: transparent;
  left: 16px;
  top: 0;
  height: 46px;
  color: #5d657b;
  font-weight: 700;
}

.header .header-left .header-search form button i {
  color: #000;
  margin-top: 7px;
}

.header .header-right {
  display: flex;
  justify-content: flex-end;
  width: fit-content;
  z-index: 9;
}
/* 
.header .header-right button {
  border: 1px solid #dddddd;
  background: #FFF;
  border-radius: 50%;
  margin-top: -3px;
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #1A2142;
} */

.header .header-right button.search-field {
  display: block;
  position: relative;
  border: none;
  background: transparent;
  margin-top: auto;
  height: auto;
  width: auto;
}

.header .header-right button svg {
  fill: currentColor;
}

.bell-svg-shakes {
  -moz-animation: shake 5s infinite;
  -webkit-animation: shake 5s infinite;
  animation: shake 5s infinite;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@keyframes shake {
  0% {
    transform: translate(0px, 6px);
  }

  1% {
    transform: translate(0px, 0px);
  }

  2% {
    transform: translate(0px, 7px);
  }

  3% {
    transform: translate(0px, 0px);
  }

  4% {
    transform: translate(0px, 5px);
  }

  5% {
    transform: translate(0px, 0px);
  }

  6% {
    transform: translate(0px, 4px);
  }

  7% {
    transform: translate(0px, 0px);
  }

  8% {
    transform: translate(0px, 6px);
  }

  9% {
    transform: translate(0px, 0px);
  }

  10% {
    transform: translate(0px, 2px);
  }

  11% {
    transform: translate(0px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.header .header-right button::after {
  display: none;
}

.header .header-right button span {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #FF737E;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  right: -3px;
  top: 3px;
}

.top-right-profile {
  float: right;
  right: 40px;
  position: absolute;
}

.css-hht1n {
  display: flex;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  flex-wrap: unset;
  background: #FFFFFF;
  padding: 10px;
  border-radius: 30px;
  box-shadow: rgba(112, 144, 176, 0.18) 14px 17px 40px 4px;
}

.css-1kdwve8 {
  width: 100%;
  display: flex;
  position: relative;
  margin-bottom: unset;
  margin-inline-end: 10px;
}

@media screen and (min-width: 768px) {
  .css-1kdwve8 {
    width: 230px;
  }
}

.css-1hx7vxy {
  left: 3px;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: absolute;
  top: -4px;
  z-index: 2;
}

.css-1gnceg5 {
  display: inline-flex;
  appearance: none;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  user-select: none;
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  outline: transparent solid 2px;
  outline-offset: 2px;
  width: auto;
  line-height: 1.2;
  border-radius: inherit;
  font-weight: 600;
  box-shadow: rgba(112, 144, 176, 0.08) 45px 76px 113px 7px;
  transition: 0.25s;
  box-sizing: border-box;
  height: 2.5rem !important;
  min-width: 2.5rem;
  font-size: 1rem;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  background: inherit;
  padding: 0px;
}

.css-1wkz2h6 {
  width: 15px;
  height: 15px;
  display: inline-block;
  line-height: 1em;
  flex-shrink: 0;
  color: #2D3748;
  vertical-align: middle;
}

.css-5rf251 {
  width: 100%;
  right: -11px;
  min-width: 30px;
  outline: #0044b124 solid 1px;
  outline-offset: 2px;
  position: relative;
  appearance: none;
  transition-property: var(--chakra-transition-property-common);
  transition-duration: 200ms;
  font-weight: 500;
  border-radius: 30px;
  font-size: 0.875rem;
  padding-inline-start: 1rem;
  padding-inline-end: 2.5rem;
  height: 2rem;
  border: 0;
  padding-top: 11px;
  padding-bottom: 11px;
  background: #edf3ff;
  color: #2D3748;
}

/* .header .header-right button span .badge-numbers {
  position: absolute;
  top: 0;
  right: 0;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  font-size: 0.625rem;
  display: grid;
  place-items: center;
  font-weight: 600;
} */
.badge-number {
  display: flex !important;
  width: 12px !important;
  height: 20px !important;
  padding: 0.55em 0.9em;
  font-size: 0.55em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  justify-content: center !important;
  align-items: center !important;
  right: -6px !important;
  top: -2px !important;
  border-radius: 50% !important;
}

.text-danger-glow {
  color: #ff4141;
  text-shadow: 0 0 20px #f00, 0 0 30px #f00, 0 0 40px #f00, 0 0 50px #f00, 0 0 60px #f00, 0 0 70px #f00, 0 0 80px #f00;
}

.blink {
  animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

@keyframes blinker {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.header .header-right .dropdown-menu {
  width: 350px;
  border: 1px solid #e7e7e7;
  padding: 10px 10px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  top: 11px !important;
  right: 0;
  position: absolute;
  transform: translate3d(0px, 60px, 0px);
  border-radius: 10px;
}

.header .header-right .dropdown-menu:before {
  content: '';
  position: absolute;
  top: -5px;
  right: 20px;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: rotate(45deg);
  border-left: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
  transition: top 0.35s ease;
}

.header .header-right .dropdown-menu li {
  padding: 3px 0px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border-bottom: 1px solid #efefef;
  position: relative;
  z-index: 2;
}

.header .header-right .dropdown-menu li:hover a {
  color: #365CF5;
  background: rgb(220 237 255);
  transition: all 0.3s ease-out 0s;
}

.header .header-right .dropdown-menu li:last-child {
  border-bottom: none;
}

.header .header-right .dropdown-menu li a {
  padding: 8px 12px;
  display: flex;
  color: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  text-decoration: unset;
}

.header .header-right .dropdown-menu li a .image {
  max-width: 35px;
  width: 100%;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}

.header .header-right .dropdown-menu li a .image img {
  width: 100%;
}

.header .header-right .dropdown-menu li a .image i {
  color: #ff7800;
  position: relative;
  top: 3px;
}

.header .header-right .dropdown-menu li a .content {
  width: 100%;
}

.header .header-right .dropdown-menu li a .content h6 {
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 600;
  line-height: 1;
}

.header .header-right .dropdown-menu li a .content p {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 0px;
  line-height: 1.4;
}

.header .header-right .dropdown-menu li a .content span {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

.header .header-right .dropdown-box {
  position: relative;
}

.header .header-right .notification-box,
.header .header-right .header-message-box {
  position: relative;
}

.header .header-right .notification-box .dropdown-menu.dropdown-menu-end {
  transform: translate3d(0px, 60px, 0px);
}

.header .header-right .header-message-box .dropdown-menu.dropdown-menu-end {
  transform: translate3d(0px, 60px, 0px);
}

.header .header-right .profile-box {
  display: flex;
  position: relative;
}

.header .header-right .profile-box button {
  width: auto;
}

.header .header-right .profile-box .dropdown-menu {
  width: 10rem;
  min-width: 190px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 0 16px rgba(0, 0, 0, 0.1);
  padding: 8px;
}

.header .header-right .profile-box .dropdown-menu.dropdown-menu-end {
  transform: translate3d(0px, 60px, 0px);
}

.header .header-right .profile-box .dropdown-menu li {
  border-bottom: none;
  padding: 0;
}

.header .header-right .profile-box .dropdown-menu li a {
  font-size: 14px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  padding: 10px 8px;
  color: rgb(26 33 66 / 83%);
}

.header .header-right .profile-box .dropdown-menu li a i {
  /* margin-right: 8px; */
  font-weight: 700;
}

.header .header-right .profile-box .dropdown-menu li a:hover {
  color: #1a2142;
  background: rgb(220 237 255);
}

.header .header-right .profile-box .dropdown-menu li.divider {
  margin: 4px 0;
  height: 1px;
  display: block;
  background: rgb(28 28 28 / 14%);
}

.header .header-right .profile-box .dropdown-menu .author-info {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}

.header .header-right .profile-box .dropdown-menu .author-info .image {
  flex: none;
}

.header .header-right .profile-box .dropdown-menu .author-info .image img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.header .header-right .profile-box .dropdown-menu .author-info .content {
  padding-left: 8px;
}

.header .header-right .profile-box .dropdown-menu .author-info .content h4 {
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.header .header-right .profile-box .dropdown-menu .author-info .content a {
  font-size: 12px;
  line-height: 1rem;
  color: rgba(26, 33, 66, 83%);
  padding: 0;
  display: inline;
  background-color: initial;
}

.header .header-right .profile-box .dropdown-menu .author-info .content a:hover {
  background: initial;
}

.header .header-right .profile-box .dropdown-menu .author-info:hover {
  background: rgb(220 237 255);
}

.header .header-right .profile-box .dropdown-menu .author-info:hover a {
  color: #1a2142;
}

.header .header-right .profile-box .profile-info {
  margin: 0 5px;
}

.header .header-right .profile-box .profile-info .info {
  display: flex;
  align-items: center;
}

.header .header-right .profile-box .profile-info .info .image {
  border: 1px solid #DFE5EF;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-right: 14px;
  position: relative;
}

.header .header-right .profile-box .profile-info .info span.active-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #00c386;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: unset;
  bottom: 0;
  right: 0;
}

.header .header-right .profile-box .profile-info .info .image img {
  width: 100%;
  height:100%;
  border-radius: 50%;
  object-fit: cover;
}

.header .header-right .profile-box .profile-info .info p {
  /* font-size: 12px; */
  color: #00c386;
  text-align: left;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0.5rem 0 0;
}

/* ========== Dashboards css ================= */
@media (max-width: 767px) {
  #doughnutChart1 {
    height: 250px !important;
  }
}

.legend3 li {
  margin-right: 25px;
}

.legend3 li div {
  white-space: nowrap;
}

.legend3 li .bg-color {
  position: relative;
  margin-left: 12px;
  border-radius: 50%;
}

.legend3 li .bg-color::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: inherit;
  left: -12px;
  top: 5px;
}

.legend3 li .text {
  margin-left: 10px;
}

.legend3 li .text p {
  display: flex;
  align-items: center;
  width: 100%;
}

@media (max-width: 767px) {
  .legend3 h2 {
    font-size: 22px;
  }
}

.legend-marketing .icon {
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: #ECF2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.legend-marketing .bg-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 8px;
}

.legend-marketing .text h5 {
  font-size: 18px;
  margin-top: 5px;
}

.todo-list-wrapper ul li.todo-list-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  margin-bottom: 25px;
}

.todo-list-wrapper ul li.todo-list-item:last-child {
  margin-bottom: 0px;
}

.todo-list-wrapper ul li.todo-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
}

@media (max-width: 767px) {
  .todo-list-wrapper ul li.todo-list-item {
    display: block;
  }

  .todo-list-wrapper ul li.todo-list-item .todo-status {
    margin-top: 20px;
  }
}

.todo-list-wrapper ul li.todo-list-item.success::before {
  background: #219653;
}

.todo-list-wrapper ul li.todo-list-item.primary::before {
  background: #365CF5;
}

.todo-list-wrapper ul li.todo-list-item.orange::before {
  background: #f2994a;
}

.todo-list-wrapper ul li.todo-list-item.danger::before {
  background: #d50100;
}

.cards-title {
  font-size: 18px;
  line-height: 22px;
}

.external-link {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.external-link .link-item {
  padding: 10px 15px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.external-link .link-item:hover {
  background: rgba(223, 229, 239, 0.2);
}

.external-link .link-name {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #1A2142;
}

.card-top-chanels .top-chanels-item {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 11px 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .card-top-chanels .top-chanels-item {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.featured-tab .nav {
  gap: 12px;
}

.featured-tab .nav button {
  background: transparent;
  border: none;
  font-weight: 500;
  font-size: 14px;
  color: #64748B;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.featured-tab .nav button:hover,
.featured-tab .nav button.active {
  color: #1A2142;
  background: rgba(223, 229, 239, 0.3);
}

.featured-tab .status-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 30px;
}

.featured-tab .status-badge.queue {
  background: rgba(240, 149, 12, 0.08);
  color: #F0950C;
}

.featured-tab .status-badge.sent {
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
}

.featured-tab .tab-item-title:hover {
  color: #365CF5;
  cursor: pointer;
}

.card-click-rate .device-list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-click-rate .device-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.card-click-rate .device-list li span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.card-click-rate .device-list li:nth-child(1n) span {
  background: #365CF5;
}

.card-click-rate .device-list li:nth-child(2n) span {
  background: #ECF2FF;
}

.card-click-rate .device-list li:nth-child(3n) span {
  background: #F9F9FD;
}

.card-click-rate .apexcharts-tooltip-series-group {
  padding-top: 4px;
}

.card-click-rate .apexcharts-tooltip-z-group,
.card-click-rate .apexcharts-tooltip-goals-group {
  display: none;
}

/* ============ signin css ============= */
.auth-row {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.auth-cover-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px;
  position: relative;
  z-index: 1;
  height: 100%;
}

@media (max-width: 767px) {
  .auth-cover-wrapper {
    padding: 30px 20px;
  }
}

.auth-cover-wrapper .auth-cover .title {
  text-align: cover;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .auth-cover-wrapper .auth-cover .title h1 {
    font-size: 24px;
  }
}

.title h2 {
  font-size: 28px;
  font-weight: 600;
}

.title h2 a {
  font-size: 18px;
  font-weight: 600;
}

.auth-cover-wrapper .auth-cover .cover-image {
  max-width: 100%;
  margin: auto;
}

.auth-cover-wrapper .auth-cover .cover-image img {
  width: 100%;
}

.auth-cover-wrapper .auth-cover .shape-image {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 5%;
}

.signin-wrapper {
  background: #fff;
  padding: 60px;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .signin-wrapper {
    padding: 40px;
  }
}

@media (max-width: 767px) {
  .signin-wrapper {
    padding: 30px;
  }
}

.signin-wrapper .form-wrapper {
  width: 100%;
}

.signin-wrapper .singin-option button {
  font-size: 16px;
  font-weight: 600;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .signin-wrapper .singin-option button {
    padding-left: 25px;
    padding-right: 25px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .signin-wrapper .singin-option button {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 767px) {
  .signin-wrapper .singin-option button {
    width: 100%;
  }
}

@media only screen and (min-width: 550px) and (max-width: 767px) {
  .signin-wrapper .singin-option button {
    width: auto;
  }
}

.signin-wrapper .singin-option a:hover {
  text-decoration: underline;
}

/* ============ signup css ============= */
.auth-row {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.auth-cover-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px;
  position: relative;
  z-index: 1;
  height: 100%;
}

@media (max-width: 767px) {
  .auth-cover-wrapper {
    padding: 30px 20px;
  }
}

.auth-cover-wrapper .auth-cover .title {
  text-align: cover;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .auth-cover-wrapper .auth-cover .title h1 {
    font-size: 24px;
  }
}

.auth-cover-wrapper .auth-cover .cover-image {
  max-width: 100%;
  margin: auto;
}

.auth-cover-wrapper .auth-cover .cover-image img {
  width: 70%;
  left: 115px;
  position: relative;
}

@media (max-width: 767px) {
  .auth-cover-wrapper .auth-cover .cover-image img {
    left: 45px;
  }

  .auth-cover-wrapper .auth-cover .cover-image-signup img {
    width: 105% !important;
    left: -2px !important;
  }
}

.auth-cover-wrapper .auth-cover .cover-image-signup img {
  width: 85%;
  left: 70px;
  position: relative;
}

.auth-cover-wrapper .auth-cover .shape-image-left {
  position: absolute;
  z-index: -1;
  left: -20px;
  transform: rotateZ(180deg);
  top: 5%;
}

.auth-cover-wrapper .auth-cover .shape-image-right {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 5%;
}

.mx-auto {
  width: 100%;
}

@media (max-width: 767px) {
  .section {
    overflow-x: hidden;
  }
}

.signup-wrapper {
  background: #fff;
  padding: 60px;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .signup-wrapper {
    padding: 40px;
  }
}

@media (max-width: 767px) {
  .signup-wrapper {
    padding: 30px;
  }
}

.signup-wrapper .form-wrapper {
  width: 100%;
}

.signup-wrapper .singup-option button {
  font-size: 16px;
  font-weight: 600;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .signup-wrapper .singup-option button {
    padding-left: 25px;
    padding-right: 25px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .signup-wrapper .singup-option button {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 767px) {
  .signup-wrapper .singup-option button {
    width: 100%;
  }
}

@media only screen and (min-width: 550px) and (max-width: 767px) {
  .signup-wrapper .singup-option button {
    width: auto;
  }
}

.signup-wrapper .singup-option a:hover {
  text-decoration: underline;
}

/* =========== settings css ============== */
.settings-card-1 .profile-info .profile-image {
  max-width: 75px;
  width: 100%;
  height: 75px;
  border-radius: 50%;
  margin-right: 20px;
  position: relative;
  z-index: 1;
}

.settings-card-1 .profile-info .profile-image img {
  width: 100%;
  border-radius: 50%;
}

.settings-card-1 .profile-info .profile-image .update-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: #efefef;
  border: 2px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99;
}

.settings-card-1 .profile-info .profile-image .update-image:hover {
  opacity: 0.9;
}

.settings-card-1 .profile-info .profile-image .update-image input {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 99;
}

.settings-card-1 .profile-info .profile-image .update-image label {
  cursor: pointer;
  z-index: 99;
}

/* =========== Invoice Css ============= */
.invoice-card .invoice-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex: 1;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
  .invoice-card .invoice-header {
    flex-direction: column;
  }
}

.invoice-card .invoice-header .invoice-logo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
}

@media (max-width: 767px) {
  .invoice-card .invoice-header .invoice-logo {
    order: -1;
    margin-bottom: 30px;
  }
}

.invoice-card .invoice-header .invoice-logo img {
  width: 100%;
}

@media (max-width: 767px) {
  .invoice-card .invoice-header .invoice-date {
    margin-top: 30px;
  }
}

.invoice-card .invoice-header .invoice-date p {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px;
}

.invoice-card .invoice-header .invoice-date p span {
  font-weight: 500;
}

.invoice-card .invoice-address {
  padding-top: 30px;
  display: flex;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .invoice-card .invoice-address {
    display: block;
  }
}

.invoice-card .invoice-address .address-item {
  margin-right: 30px;
  min-width: 250px;
}

.invoice-card .invoice-address .address-item h5 {
  margin-bottom: 15px;
}

.invoice-card .invoice-address .address-item h1 {
  margin-bottom: 10px;
  font-size: 24px;
}

.invoice-card .invoice-address .address-item p {
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .invoice-card .invoice-action ul li {
    flex: 1;
  }
}

@media (max-width: 767px) {
  .invoice-card .invoice-action ul li a {
    width: 100%;
  }
}

.invoice-table th,
.invoice-table td {
  padding: 10px 8px;
}

.invoice-table .service {
  min-width: 150px;
}

.invoice-table .desc {
  min-width: 150px;
}

.invoice-table .qty {
  min-width: 150px;
}

.invoice-table .amount {
  min-width: 100px;
}

/* ============== Icons Css ===========*/
.icons-wrapper .icons,
.icons-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.icons-wrapper .icons>div,
.icons-wrapper .icons li,
.icons-wrapper ul>div,
.icons-wrapper ul li {
  display: flex;
  align-items: center;
  margin: 10px;
  flex-basis: 215px;
}

@media (max-width: 400px) {

  .icons-wrapper .icons>div,
  .icons-wrapper .icons li,
  .icons-wrapper ul>div,
  .icons-wrapper ul li {
    flex-basis: 100%;
  }
}

.icons-wrapper .icons>div i,
.icons-wrapper .icons li i,
.icons-wrapper ul>div i,
.icons-wrapper ul li i {
  max-width: 45px;
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #efefef;
  border-radius: 4px;
  background: transparent;
  color: #1A2142;
  font-size: 20px;
  margin-right: 10px;
}

.icons-wrapper .icons>div span,
.icons-wrapper .icons li span,
.icons-wrapper ul>div span,
.icons-wrapper ul li span {
  color: #1A2142;
  user-select: all;
}

/* ============ Calendar Css ============= */
.calendar-card .fc {
  height: 450px;
}

.calendar-card .fc#calendar-full {
  height: 600px;
}

.calendar-card .fc table {
  border: none;
}

.calendar-card .fc .fc-toolbar-title {
  font-size: 16px;
  font-weight: 500;
}

.calendar-card .fc .fc-button {
  background: transparent;
  border: none;
  color: #5d657b;
  text-transform: capitalize;
}

.calendar-card .fc .fc-button:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #365CF5;
}

.calendar-card .fc th {
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-right: 0px;
}

.calendar-card .fc th a {
  color: #5d657b;
  font-weight: 400;
}

.calendar-card .fc .fc-day {
  border-width: 4px;
  background: #fff;
}

.calendar-card .fc .fc-day.fc-day-today .fc-daygrid-day-frame {
  background: #365cf5;
}

.calendar-card .fc .fc-day.fc-day-today .fc-daygrid-day-frame a {
  color: #fff;
}

.calendar-card .fc .fc-day .fc-daygrid-day-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: #f9f9f9;
  border-radius: 6px;
}

.calendar-card .fc .fc-day .fc-daygrid-day-frame a {
  color: #5d657b;
}

.calendar-card .fc-theme-standard td,
.calendar-card .fc-theme-standard th {
  border-color: transparent;
}

.fc-header-toolbar.fc-toolbar {
    display: flex;
}

/* =========== Sidebar css =========== */
.sidebar-nav-wrapper {
  /* background: #fff; */
  background-image: radial-gradient(227.71% 180.23% at 90.64% 130.38%, #ffffff1f 0%, #ffffff 100%), url(https://img.freepik.com/premium-vector/abstract-geometric-pattern-design_260839-594.jpg?semt=ais_hybrid&w=740&q=80);
  background-position: center;
  background-size: contain;
  background-repeat: repeat;
  width: 250px;
  padding: 20px 0px;
  /* height: 100vh; */
  height: auto;
  position: fixed;
  /* overflow-y: hidden; */
  overflow-x: hidden;
  top: 15px;
  left: 1px;
  border-radius: 15px;
  z-index: 999;
  box-shadow: 0px 12px 8px -8px rgb(145 158 171 / 42%), 0px 0px 2px 0px rgb(145 158 171 / 57%);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .sidebar-nav-wrapper {
    -webkit-transform: translateX(-260px);
    -moz-transform: translateX(-260px);
    -ms-transform: translateX(-260px);
    -o-transform: translateX(-260px);
    transform: translateX(-260px);
  }
}

.sidebar-nav-wrapper.active {
  -webkit-transform: translateX(-260px);
  -moz-transform: translateX(-260px);
  -ms-transform: translateX(-260px);
  -o-transform: translateX(-260px);
  transform: translateX(-260px);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .sidebar-nav-wrapper.active {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
}

.sidebar-nav-wrapper .navbar-logo {
  padding: 0 25px;
  margin-bottom: 30px;
  /* margin-top: 11px; */
}

.sidebar-nav-wrapper .navbar-logo a img {
  width: 35%;
}

.sidebar-nav-wrapper .navbar-logo h3 {
  position: absolute;
  display: inline-block;
  font-size: 27px;
  left: 75px;
  top: -3px;
  font-weight: 800;
  font-family: 'Helvetica', sans-serif;
  color: #0866ff;
}

.top-7 {
  top: 7px;
}

.top-15 {
  top: 15px;
}

.navbar-logo-signout {
  position: absolute;
  /* top: -40%; */
  left: 50%;
  transform: translate(-50%, 360%);
}

.navbar-logo-signout a img {
  width: 35%;
}

.navbar-logo-signout h3 {
  position: absolute;
  display: inline-block;
  color: #365CF5;
  font-size: 27px;
  top: 35px;
  left: 128px;
  font-weight: 800;
  font-family: 'Helvetica', sans-serif;
}

@media (max-width: 767px) {
  .navbar-logo-signout {
    padding: 0 57px;
  }

  .navbar-logo-signout h3 {
    position: absolute;
    display: inline-block;
    color: #365CF5;
    font-size: 27px;
    top: 35px;
    left: 110px;
    font-weight: 800;
    font-family: 'Helvetica', sans-serif;
  }
}

.sidebar-nav-wrapper .sidebar-nav .divider {
  padding: 5px 25px;
  width: 100%;
}

.sidebar-nav-wrapper .sidebar-nav .divider hr {
  height: 1px;
  background: #E9EEF1;
}

.sidebar-nav-wrapper .sidebar-nav ul.collapsing {
  transition: none;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item {
  position: relative;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children>a {
  color: #365CF5;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children>a:not(.collapsed) .icon {
  color: #365CF5;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children>a::after {
  content: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.34306 7.76387L9.02356 3.8071C9.32923 3.47851 9.11273 2.91666 8.68048 2.91666L1.31947 2.91666C0.887218 2.91666 0.670743 3.47851 0.976393 3.8071L4.6569 7.76387C4.8464 7.96758 5.15356 7.96758 5.34306 7.76387Z' fill='%239AA4CA'/%3E%3C/svg%3E%0A");
  position: absolute;
  right: 25px;
  top: 11px;
  font-size: 12px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children>a.collapsed {
  color: #636363;
  cursor: pointer;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children>a.collapsed::before {
  opacity: 0;
  visibility: hidden;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children>a.collapsed::after {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul {
  padding: 10px 24px 18px 73px;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li {
  margin-bottom: 12px;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li:last-child {
  margin-bottom: 0px;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  display: flex;
  align-items: center;
}

.active-badge {
  background: #09b300;
  color: #fff;
  padding: 2.5px 7px;
  border-radius: 30px;
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  margin-left: 10px;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a.active,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover {
  color: #365CF5;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a i {
  font-size: 16px;
  margin-right: 15px;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a span.text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a span.pro-badge {
  background: #365CF5;
  color: #fff;
  padding: 2.5px 7px;
  border-radius: 30px;
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  margin-left: 10px;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a {
  display: flex;
  align-items: center;
  color: #636363;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: unset;
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 5px 25px 10px;
}

.sidebar-padding-commtools {
  padding: 5px 25px 5px !important;
}

.nav-item-a {
  padding: 0px 25px 0px !important;
  margin: 0 0 10px;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a span.text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: 800;
  letter-spacing: unset;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a span.text.active {
  color: #3052d9;
  font-weight: 700;
  background-color: rgba(8, 102, 255, 0.1);
  padding: 5px 5px 5px;
  width: auto;
  border-radius: 5px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a span.text.active::after {
  content: '';
  height: 26px;
  width: 4px;
  background: #365CF5;
  position: absolute;
  display: block;
  border-radius: 5px;
  float: left;
  left: 0;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a span:hover {
  color: #007aff;
  background-color: rgb(121 148 255 / 10%);
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a span.pro-badge {
  background: #365CF5;
  color: #fff;
  padding: 2.5px 7px;
  border-radius: 30px;
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  margin-left: 10px;
}

.pro-badge {
  display: inline-flex;
  position: relative;
  background: #365CF5;
  color: #fff;
  padding: 2.5px 7px;
  border-radius: 30px;
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  margin-left: 10px;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon {
  margin-right: 12px;
  margin-top: -4px;
  font-size: 18px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon svg {
  fill: currentColor;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active>a,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active>a.collapsed,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover>a,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover>a.collapsed {
  color: #1A2142;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active>a .icon,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active>a.collapsed .icon,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover>a .icon,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover>a.collapsed .icon {
  color: #365CF5;
}

.sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a.active,
.sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover {
  color: #fff;
  border-color: #365CF5;
  background: #365CF5;
}

.sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a.active span.pro-badge,
.sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover span.pro-badge {
  background: #fff;
  color: #365CF5;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
}

#overlay p,
i {
  opacity: 1 !important;
}

@media only screen and (min-width: 1400px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  .overlay {
    display: none;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .overlay.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

.main-wrapper-signin {
  margin-left: auto !important;
}

.main-wrapper {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  margin-left: 250px;
  min-height: 100vh;
  padding-bottom: 85px;
  position: relative;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .main-wrapper {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .main-wrapper {
    padding-bottom: 110px;
  }
}

.main-wrapper.active {
  margin-left: 0;
}

.main-wrapper .container-fluid {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 767px) {
  .main-wrapper .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.main-wrapper .footer {
  padding: 25px 0;
  justify-items: flex-end;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.main-wrapper .footer .copyright p a {
  color: inherit;
}

.main-wrapper .footer .copyright p a:hover {
  color: #365CF5;
}

@media (max-width: 767px) {
  .main-wrapper .footer .terms {
    margin-bottom: 10px;
    text-align: center;
  }
}

.main-wrapper .footer .terms a {
  color: #5478db;
}

.main-wrapper .footer .terms a:hover {
  color: #365CF5;
}

.promo-box {
  background: rgb(228 241 255);
  box-shadow: 0 0px 2px rgba(0, 0, 0, .15);
  padding: 15px 18px;
  text-align: center;
  max-width: 210px;
  margin: 0 auto;
  margin-top: 80px;
  border-radius: 14px;
}

.promo-box .promo-icon {
  max-width: 82px;
  width: 100%;
  height: 82px;
  border-radius: 50%;
  margin: -58px auto 12px;
  border: 5px solid #e1f3ff;
  background: #fff;
}

.promo-box h3 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  margin-bottom: 7px;
}

.promo-box p {
  color: #000;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 15px;
}

.promo-box .main-btn {
  border-radius: 43px;
  padding: 7px 12px;
  width: 100%;
  justify-content: center;
}

/* ========== DEFAULT CSS ======== */
/* ======= Margin Top ======= */
.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-55 {
  margin-top: 55px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-65 {
  margin-top: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-75 {
  margin-top: 75px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-85 {
  margin-top: 85px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-95 {
  margin-top: 95px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-105 {
  margin-top: 105px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-115 {
  margin-top: 115px;
}

.mt-120 {
  margin-top: 120px;
}

.mt-125 {
  margin-top: 125px;
}

.mt-130 {
  margin-top: 130px;
}

.mt-135 {
  margin-top: 135px;
}

.mt-140 {
  margin-top: 140px;
}

.mt-145 {
  margin-top: 145px;
}

.mt-150 {
  margin-top: 150px;
}

.mt-155 {
  margin-top: 155px;
}

.mt-160 {
  margin-top: 160px;
}

.mt-165 {
  margin-top: 165px;
}

.mt-170 {
  margin-top: 170px;
}

.mt-175 {
  margin-top: 175px;
}

.mt-180 {
  margin-top: 180px;
}

.mt-185 {
  margin-top: 185px;
}

.mt-190 {
  margin-top: 190px;
}

.mt-195 {
  margin-top: 195px;
}

.mt-200 {
  margin-top: 200px;
}

.mt-205 {
  margin-top: 205px;
}

.mt-210 {
  margin-top: 210px;
}

.mt-215 {
  margin-top: 215px;
}

.mt-220 {
  margin-top: 220px;
}

.mt-225 {
  margin-top: 225px;
}

.mt-minus-10 {
  margin-top: -10px !important;
}

.mt-minus-75 {
  margin-top: -75px !important;
}

/* ======= Margin Bottom ======= */
.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-minus-1 {
  margin-bottom: -1px !important;
}

.mb-minus-7-5 {
  margin-bottom: -7.5px !important;
}

.mb-minus-10 {
  margin-bottom: -10px !important;
}

.mb-minus-30 {
  margin-bottom: -30px !important;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-65 {
  margin-bottom: 65px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-75 {
  margin-bottom: 75px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-85 {
  margin-bottom: 85px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-95 {
  margin-bottom: 95px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-105 {
  margin-bottom: 105px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-115 {
  margin-bottom: 115px;
}

.mb-120 {
  margin-bottom: 120px;
}

.mb-125 {
  margin-bottom: 125px;
}

.mb-130 {
  margin-bottom: 130px;
}

.mb-135 {
  margin-bottom: 135px;
}

.mb-140 {
  margin-bottom: 140px;
}

.mb-145 {
  margin-bottom: 145px;
}

.mb-150 {
  margin-bottom: 150px;
}

.mb-155 {
  margin-bottom: 155px;
}

.mb-160 {
  margin-bottom: 160px;
}

.mb-165 {
  margin-bottom: 165px;
}

.mb-170 {
  margin-bottom: 170px;
}

.mb-175 {
  margin-bottom: 175px;
}

.mb-180 {
  margin-bottom: 180px;
}

.mb-185 {
  margin-bottom: 185px;
}

.mb-190 {
  margin-bottom: 190px;
}

.mb-195 {
  margin-bottom: 195px;
}

.mb-200 {
  margin-bottom: 200px;
}

.mb-205 {
  margin-bottom: 205px;
}

.mb-210 {
  margin-bottom: 210px;
}

.mb-215 {
  margin-bottom: 215px;
}

.mb-220 {
  margin-bottom: 220px;
}

.mb-225 {
  margin-bottom: 225px;
}

/* ======= Margin Left ======= */
.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-minus-20 {
  margin-left: -20px;
}

.ml-25 {
  margin-left: 25px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-35 {
  margin-left: 35px;
}

.ml-40 {
  margin-left: 40px;
}

.ml-45 {
  margin-left: 45px;
}

.ml-50 {
  margin-left: 50px;
}

.ml-55 {
  margin-left: 55px;
}

.ml-60 {
  margin-left: 60px;
}

.ml-65 {
  margin-left: 65px;
}

.ml-70 {
  margin-left: 70px;
}

.ml-75 {
  margin-left: 75px;
}

.ml-80 {
  margin-left: 80px;
}

.ml-85 {
  margin-left: 85px;
}

.ml-90 {
  margin-left: 90px;
}

.ml-95 {
  margin-left: 95px;
}

.ml-100 {
  margin-left: 100px;
}

.ml-105 {
  margin-left: 105px;
}

.ml-110 {
  margin-left: 110px;
}

.ml-115 {
  margin-left: 115px;
}

.ml-120 {
  margin-left: 120px;
}

.ml-125 {
  margin-left: 125px;
}

.ml-130 {
  margin-left: 130px;
}

.ml-135 {
  margin-left: 135px;
}

.ml-140 {
  margin-left: 140px;
}

.ml-145 {
  margin-left: 145px;
}

.ml-150 {
  margin-left: 150px;
}

.ml-155 {
  margin-left: 155px;
}

.ml-160 {
  margin-left: 160px;
}

.ml-165 {
  margin-left: 165px;
}

.ml-170 {
  margin-left: 170px;
}

.ml-175 {
  margin-left: 175px;
}

.ml-180 {
  margin-left: 180px;
}

.ml-185 {
  margin-left: 185px;
}

.ml-190 {
  margin-left: 190px;
}

.ml-195 {
  margin-left: 195px;
}

.ml-200 {
  margin-left: 200px;
}

.ml-205 {
  margin-left: 205px;
}

.ml-210 {
  margin-left: 210px;
}

.ml-215 {
  margin-left: 215px;
}

.ml-220 {
  margin-left: 220px;
}

.ml-225 {
  margin-left: 225px;
}

/* ======= Margin Right ======= */
.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-15 {
  margin-right: 15px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-25 {
  margin-right: 25px;
}

.mr-30 {
  margin-right: 30px !important;
}

.mr-35 {
  margin-right: 35px;
}

.mr-40 {
  margin-right: 40px;
}

.mr-45 {
  margin-right: 45px;
}

.mr-50 {
  margin-right: 50px;
}

.mr-55 {
  margin-right: 55px;
}

.mr-60 {
  margin-right: 60px;
}

.mr-65 {
  margin-right: 65px;
}

.mr-70 {
  margin-right: 70px;
}

.mr-75 {
  margin-right: 75px;
}

.mr-80 {
  margin-right: 80px;
}

.mr-85 {
  margin-right: 85px;
}

.mr-90 {
  margin-right: 90px;
}

.mr-95 {
  margin-right: 95px;
}

.mr-100 {
  margin-right: 100px;
}

.mr-105 {
  margin-right: 105px;
}

.mr-110 {
  margin-right: 110px;
}

.mr-115 {
  margin-right: 115px;
}

.mr-120 {
  margin-right: 120px;
}

.mr-125 {
  margin-right: 125px;
}

.mr-130 {
  margin-right: 130px;
}

.mr-135 {
  margin-right: 135px;
}

.mr-140 {
  margin-right: 140px;
}

.mr-145 {
  margin-right: 145px;
}

.mr-150 {
  margin-right: 150px;
}

.mr-155 {
  margin-right: 155px;
}

.mr-160 {
  margin-right: 160px;
}

.mr-165 {
  margin-right: 165px;
}

.mr-170 {
  margin-right: 170px;
}

.mr-175 {
  margin-right: 175px;
}

.mr-180 {
  margin-right: 180px;
}

.mr-185 {
  margin-right: 185px;
}

.mr-190 {
  margin-right: 190px;
}

.mr-195 {
  margin-right: 195px;
}

.mr-200 {
  margin-right: 200px;
}

.mr-205 {
  margin-right: 205px;
}

.mr-210 {
  margin-right: 210px;
}

.mr-215 {
  margin-right: 215px;
}

.mr-220 {
  margin-right: 220px;
}

.mr-225 {
  margin-right: 225px;
}

/* ======= Padding Top ======= */
.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-75 {
  padding-top: 75px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-85 {
  padding-top: 85px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-95 {
  padding-top: 95px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-105 {
  padding-top: 105px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-115 {
  padding-top: 115px;
}

.pt-120 {
  padding-top: 120px;
}

.pt-125 {
  padding-top: 125px;
}

.pt-130 {
  padding-top: 130px;
}

.pt-135 {
  padding-top: 135px;
}

.pt-140 {
  padding-top: 140px;
}

.pt-145 {
  padding-top: 145px;
}

.pt-150 {
  padding-top: 150px;
}

.pt-155 {
  padding-top: 155px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-165 {
  padding-top: 165px;
}

.pt-170 {
  padding-top: 170px;
}

.pt-175 {
  padding-top: 175px;
}

.pt-180 {
  padding-top: 180px;
}

.pt-185 {
  padding-top: 185px;
}

.pt-190 {
  padding-top: 190px;
}

.pt-195 {
  padding-top: 195px;
}

.pt-200 {
  padding-top: 200px;
}

.pt-205 {
  padding-top: 205px;
}

.pt-210 {
  padding-top: 210px;
}

.pt-215 {
  padding-top: 215px;
}

.pt-220 {
  padding-top: 220px;
}

.pt-225 {
  padding-top: 225px;
}

/* ======= Padding Bottom ======= */
.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-55 {
  padding-bottom: 55px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-65 {
  padding-bottom: 65px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-75 {
  padding-bottom: 75px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-85 {
  padding-bottom: 85px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-95 {
  padding-bottom: 95px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-105 {
  padding-bottom: 105px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-115 {
  padding-bottom: 115px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pb-125 {
  padding-bottom: 125px;
}

.pb-130 {
  padding-bottom: 130px;
}

.pb-135 {
  padding-bottom: 135px;
}

.pb-140 {
  padding-bottom: 140px;
}

.pb-145 {
  padding-bottom: 145px;
}

.pb-150 {
  padding-bottom: 150px;
}

.pb-155 {
  padding-bottom: 155px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pb-165 {
  padding-bottom: 165px;
}

.pb-170 {
  padding-bottom: 170px;
}

.pb-175 {
  padding-bottom: 175px;
}

.pb-180 {
  padding-bottom: 180px;
}

.pb-185 {
  padding-bottom: 185px;
}

.pb-190 {
  padding-bottom: 190px;
}

.pb-195 {
  padding-bottom: 195px;
}

.pb-200 {
  padding-bottom: 200px;
}

.pb-205 {
  padding-bottom: 205px;
}

.pb-210 {
  padding-bottom: 210px;
}

.pb-215 {
  padding-bottom: 215px;
}

.pb-220 {
  padding-bottom: 220px;
}

.pb-225 {
  padding-bottom: 225px;
}

/* ======= Padding Left ======= */
.pl-5 {
  padding-left: 5px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-25 {
  padding-left: 25px;
}

.pl-30 {
  padding-left: 30px;
}

.pl-35 {
  padding-left: 35px;
}

.pl-40 {
  padding-left: 40px;
}

.pl-45 {
  padding-left: 45px;
}

.pl-50 {
  padding-left: 50px;
}

.pl-55 {
  padding-left: 55px;
}

.pl-60 {
  padding-left: 60px;
}

.pl-65 {
  padding-left: 65px;
}

.pl-70 {
  padding-left: 70px;
}

.pl-75 {
  padding-left: 75px;
}

.pl-80 {
  padding-left: 80px;
}

.pl-85 {
  padding-left: 85px;
}

.pl-90 {
  padding-left: 90px;
}

.pl-95 {
  padding-left: 95px;
}

.pl-100 {
  padding-left: 100px;
}

.pl-105 {
  padding-left: 105px;
}

.pl-110 {
  padding-left: 110px;
}

.pl-115 {
  padding-left: 115px;
}

.pl-120 {
  padding-left: 120px;
}

.pl-125 {
  padding-left: 125px;
}

.pl-130 {
  padding-left: 130px;
}

.pl-135 {
  padding-left: 135px;
}

.pl-140 {
  padding-left: 140px;
}

.pl-145 {
  padding-left: 145px;
}

.pl-150 {
  padding-left: 150px;
}

.pl-155 {
  padding-left: 155px;
}

.pl-160 {
  padding-left: 160px;
}

.pl-165 {
  padding-left: 165px;
}

.pl-170 {
  padding-left: 170px;
}

.pl-175 {
  padding-left: 175px;
}

.pl-180 {
  padding-left: 180px;
}

.pl-185 {
  padding-left: 185px;
}

.pl-190 {
  padding-left: 190px;
}

.pl-195 {
  padding-left: 195px;
}

.pl-200 {
  padding-left: 200px;
}

.pl-205 {
  padding-left: 205px;
}

.pl-210 {
  padding-left: 210px;
}

.pl-215 {
  padding-left: 215px;
}

.pl-220 {
  padding-left: 220px;
}

.pl-225 {
  padding-left: 225px;
}

/* ======= Padding Right ======= */
.pr-5 {
  padding-right: 5px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-15 {
  padding-right: 15px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-25 {
  padding-right: 25px;
}

.pr-30 {
  padding-right: 30px;
}

.pr-35 {
  padding-right: 35px;
}

.pr-40 {
  padding-right: 40px;
}

.pr-45 {
  padding-right: 45px;
}

.pr-50 {
  padding-right: 50px;
}

.pr-55 {
  padding-right: 55px;
}

.pr-60 {
  padding-right: 60px;
}

.pr-65 {
  padding-right: 65px;
}

.pr-70 {
  padding-right: 70px;
}

.pr-75 {
  padding-right: 75px;
}

.pr-80 {
  padding-right: 80px;
}

.pr-85 {
  padding-right: 85px;
}

.pr-90 {
  padding-right: 90px;
}

.pr-95 {
  padding-right: 95px;
}

.pr-100 {
  padding-right: 100px;
}

.pr-105 {
  padding-right: 105px;
}

.pr-110 {
  padding-right: 110px;
}

.pr-115 {
  padding-right: 115px;
}

.pr-120 {
  padding-right: 120px;
}

.pr-125 {
  padding-right: 125px;
}

.pr-130 {
  padding-right: 130px;
}

.pr-135 {
  padding-right: 135px;
}

.pr-140 {
  padding-right: 140px;
}

.pr-145 {
  padding-right: 145px;
}

.pr-150 {
  padding-right: 150px;
}

.pr-155 {
  padding-right: 155px;
}

.pr-160 {
  padding-right: 160px;
}

.pr-165 {
  padding-right: 165px;
}

.pr-170 {
  padding-right: 170px;
}

.pr-175 {
  padding-right: 175px;
}

.pr-180 {
  padding-right: 180px;
}

.pr-185 {
  padding-right: 185px;
}

.pr-190 {
  padding-right: 190px;
}

.pr-195 {
  padding-right: 195px;
}

.pr-200 {
  padding-right: 200px;
}

.pr-205 {
  padding-right: 205px;
}

.pr-210 {
  padding-right: 210px;
}

.pr-215 {
  padding-right: 215px;
}

.pr-220 {
  padding-right: 220px;
}

.pr-225 {
  padding-right: 225px;
}

/* ======= bg-primary shades ========= */
.bg-primary-100 {
  background: rgb(231 235 253 / 10%);
}

.bg-primary-200 {
  background: rgba(54, 92, 245, 0.2);
}

.bg-primary-300 {
  background: rgba(54, 92, 245, 0.3);
}

.bg-primary-400 {
  background: rgba(54, 92, 245, 0.4);
}

.bg-primary-500 {
  background: rgba(54, 92, 245, 0.5);
}

.bg-primary-600 {
  background: rgba(54, 92, 245, 0.6);
}

.bg-primary-700 {
  background: rgba(54, 92, 245, 0.7);
}

.bg-primary-800 {
  background: rgba(54, 92, 245, 0.8);
}

.bg-primary-900 {
  background: rgba(54, 92, 245, 0.9);
}

/* ======= bg-secondary shades ========= */
.bg-secondary-100 {
  background: rgba(0, 193, 248, 0.1);
}

.bg-secondary-200 {
  background: rgba(0, 193, 248, 0.2);
}

.bg-secondary-300 {
  background: rgba(0, 193, 248, 0.3);
}

.bg-secondary-400 {
  background: rgba(0, 193, 248, 0.4);
}

.bg-secondary-500 {
  background: rgba(0, 193, 248, 0.5);
}

.bg-secondary-600 {
  background: rgba(0, 193, 248, 0.6);
}

.bg-secondary-700 {
  background: rgba(0, 193, 248, 0.7);
}

.bg-secondary-800 {
  background: rgba(0, 193, 248, 0.8);
}

.bg-secondary-900 {
  background: rgba(0, 193, 248, 0.9);
}

/* ======= bg-success shades ========= */
.bg-success-100 {
  background: rgba(33, 150, 83, 0.1);
}

.bg-success-200 {
  background: rgba(33, 150, 83, 0.2);
}

.bg-success-300 {
  background: rgba(33, 150, 83, 0.3);
}

.bg-success-400 {
  background: rgba(33, 150, 83, 0.4);
}

.bg-success-500 {
  background: rgba(33, 150, 83, 0.5);
}

.bg-success-600 {
  background: rgba(33, 150, 83, 0.6);
}

.bg-success-700 {
  background: rgba(33, 150, 83, 0.7);
}

.bg-success-800 {
  background: rgba(33, 150, 83, 0.8);
}

.bg-success-900 {
  background: rgba(33, 150, 83, 0.9);
}

/* ======= bg-danger shades ========= */
.bg-danger-100 {
  background: rgba(213, 1, 0, 0.1);
}

.bg-danger-200 {
  background: rgba(213, 1, 0, 0.2);
}

.bg-danger-300 {
  background: rgba(213, 1, 0, 0.3);
}

.bg-danger-400 {
  background: rgba(213, 1, 0, 0.4);
}

.bg-danger-500 {
  background: rgba(213, 1, 0, 0.5);
}

.bg-danger-600 {
  background: rgba(213, 1, 0, 0.6);
}

.bg-danger-700 {
  background: rgba(213, 1, 0, 0.7);
}

.bg-danger-800 {
  background: rgba(213, 1, 0, 0.8);
}

.bg-danger-900 {
  background: rgba(213, 1, 0, 0.9);
}

/* ======= bg-warning shades ========= */
.bg-warning-default {
  --bs-bg-opacity: 1;
  background-color: rgb(253 214 95) !important;
}

.bg-warning-100 {
  background: rgba(247, 200, 0, 0.1);
}

.bg-warning-200 {
  background: rgba(247, 200, 0, 0.2);
}

.bg-warning-300 {
  background: rgba(247, 200, 0, 0.3);
}

.bg-warning-400 {
  background: rgba(247, 200, 0, 0.4);
}

.bg-warning-500 {
  background: rgba(247, 200, 0, 0.5);
}

.bg-warning-600 {
  background: rgba(247, 200, 0, 0.6);
}

.bg-warning-700 {
  background: rgba(247, 200, 0, 0.7);
}

.bg-warning-800 {
  background: rgba(247, 200, 0, 0.8);
}

.bg-warning-900 {
  background: rgba(247, 200, 0, 0.9);
}

/* ======= bg-info shades ========= */
.bg-info-100 {
  background: rgba(151, 202, 49, 0.1);
}

.bg-info-200 {
  background: rgba(151, 202, 49, 0.2);
}

.bg-info-300 {
  background: rgba(151, 202, 49, 0.3);
}

.bg-info-400 {
  background: rgba(151, 202, 49, 0.4);
}

.bg-info-500 {
  background: rgba(151, 202, 49, 0.5);
}

.bg-info-600 {
  background: rgba(151, 202, 49, 0.6);
}

.bg-info-700 {
  background: rgba(151, 202, 49, 0.7);
}

.bg-info-800 {
  background: rgba(151, 202, 49, 0.8);
}

.bg-info-900 {
  background: rgba(151, 202, 49, 0.9);
}

/* ======= bg-dark shades ========= */
.bg-dark-100 {
  background: rgba(26, 33, 66, 0.1);
}

.bg-dark-200 {
  background: rgba(26, 33, 66, 0.2);
}

.bg-dark-300 {
  background: rgba(26, 33, 66, 0.3);
}

.bg-dark-400 {
  background: rgba(26, 33, 66, 0.4);
}

.bg-dark-500 {
  background: rgba(26, 33, 66, 0.5);
}

.bg-dark-600 {
  background: rgba(26, 33, 66, 0.6);
}

.bg-dark-700 {
  background: rgba(26, 33, 66, 0.7);
}

.bg-dark-800 {
  background: rgba(26, 33, 66, 0.8);
}

.bg-dark-900 {
  background: rgba(26, 33, 66, 0.9);
}

/* ======= bg-purple shades ========= */
.bg-purple-100 {
  background: rgba(155, 81, 224, 0.1);
}

.bg-purple-200 {
  background: rgba(155, 81, 224, 0.2);
}

.bg-purple-300 {
  background: rgba(155, 81, 224, 0.3);
}

.bg-purple-400 {
  background: rgba(155, 81, 224, 0.4);
}

.bg-purple-500 {
  background: rgba(155, 81, 224, 0.5);
}

.bg-purple-600 {
  background: rgba(155, 81, 224, 0.6);
}

.bg-purple-700 {
  background: rgba(155, 81, 224, 0.7);
}

.bg-purple-800 {
  background: rgba(155, 81, 224, 0.8);
}

.bg-purple-900 {
  background: rgba(155, 81, 224, 0.9);
}

/* ======= bg-orange shades ========= */
.bg-orange-100 {
  background: rgba(242, 153, 74, 0.1);
}

.bg-orange-200 {
  background: rgba(242, 153, 74, 0.2);
}

.bg-orange-300 {
  background: rgba(242, 153, 74, 0.3);
}

.bg-orange-400 {
  background: rgba(242, 153, 74, 0.4);
}

.bg-orange-500 {
  background: rgba(242, 153, 74, 0.5);
}

.bg-orange-600 {
  background: rgba(242, 153, 74, 0.6);
}

.bg-orange-700 {
  background: rgba(242, 153, 74, 0.7);
}

.bg-orange-800 {
  background: rgba(242, 153, 74, 0.8);
}

.bg-orange-900 {
  background: rgba(242, 153, 74, 0.9);
}

/* ======== Background Colors ========== */
.primary-bg {
  background-color: #365CF5;
}

.secondary-bg {
  background-color: #00c1f8;
}

.success-bg {
  background-color: #219653;
}

.danger-bg {
  background-color: #d50100;
}

.warning-bg {
  background-color: #f7c800;
}

.info-bg {
  background-color: #97ca31;
}

.dark-bg {
  background-color: #1A2142;
}

.light-bg {
  background-color: #efefef;
}

.blue-light-bg {
  background-color: #49BEFF;
}

.active-bg {
  background-color: #365CF5;
}

.deactive-bg {
  background-color: #E9E9E9;
}

.deactive-bg {
  background-color: #E9E9E9;
}

.gray-bg {
  background-color: #5d657b;
}

.purple-bg {
  background-color: #9b51e0;
}

.orange-bg {
  background-color: #f2994a;
}

.deep-blue-bg {
  background-color: #345d9d;
}

.doc-bg {
  background-color: #f98db4;
}

.photo-bg {
  background-color: #93cfe2;
}

/* ======== Text Colors ========== */
.text-primary {
  color: #365CF5 !important;
}

.text-secondary {
  color: #0095bf !important;
  font-size: 11px;
}

.text-success {
  color: #219653 !important;
}

.text-success-2 {
  color: #10B981 !important;
}

.text-danger {
  color: #d50100 !important;
  font-size: 12px;
  text-decoration: unset;
}

.text-danger-2 {
  color: #FB5454 !important;
}

.text-danger-light {
  color: #fa5a78 !important;
}

.text-warning {
  color: #f7ad00 !important;
}

.text-info {
  color: #97ca31 !important;
}

.text-dark {
  color: #1A2142 !important;
  font-size: 12px;
  text-decoration: unset;
}

.text-light {
  color: #efefef !important;
}

.text-active {
  color: #365CF5 !important;
}

.text-deactive {
  color: #E9E9E9 !important;
}

.text-deactive {
  color: #E9E9E9 !important;
}

.text-gray {
  color: #5d657b !important;
}

.text-orange {
  color: #f2994a !important;
}

.text-purple {
  color: #9b51e0 !important;
}

.text-doc {
  color: #f98db4 !important;
}

.text-photo {
  color: #93cfe2 !important;
}

/* ========= Font Weight =========== */
.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

#preloader .loader {
  animation: rotate 1s infinite;
  height: 50px;
  width: 50px;
}

.loader {
  animation: rotate 1s infinite;
  height: 50px;
  width: 50px;
}

.loader:before,
.loader:after {
  border-radius: 50%;
  content: '';
  display: block;
  height: 20px;
  width: 20px;
}

.loader:before,
.loader:after {
  border-radius: 50%;
  content: '';
  display: block;
  height: 20px;
  width: 20px;
}

.loader:before {
  animation: ball1 1s infinite;
  background-color: #4576f8;
  box-shadow: 30px 0 0 #34bcf8;
  margin-bottom: 10px;
}

.loader:after {
  animation: ball2 1s infinite;
  background-color: #6745f8;
  box-shadow: 30px 0 0 #896adc;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(0.8);
    -moz-transform: rotate(0deg) scale(0.8);
  }

  50% {
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
  }

  100% {
    -webkit-transform: rotate(720deg) scale(0.8);
    -moz-transform: rotate(720deg) scale(0.8);
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 #6745f8;
  }

  50% {
    box-shadow: 0 0 0 #34bcf8;
    margin-bottom: 0;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
  }

  100% {
    box-shadow: 30px 0 0 #4576f8;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #6745f8;
  }

  50% {
    box-shadow: 0 0 0 #896adc;
    margin-top: -20px;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
  }

  100% {
    box-shadow: 30px 0 0 #896adc;
    margin-top: 0;
  }
}

/* =========== End - Loader =========== */
/* =========== Sidebar css =========== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 999999;
}

#preloader .spinner {
  width: 80px;
  height: 80px;
  border: 5px solid #365CF5;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner 0.9s linear infinite;
}

@keyframes spinner {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* =========== Other css =========== */
.css-navyblue-table {
  padding: 24px;
  margin-bottom: 8px;
  margin-top: 16px;
  opacity: 1;
  /* background: rgb(239 247 255); */
  border-radius: 0.75rem;
}

.css-lightblue-table {
  padding: 24px;
  margin-bottom: 8px;
  margin-top: 16px;
  opacity: 1;
  background: rgb(242 251 255);
  border-radius: 0.75rem;
}

.css-lightblue-table-inactive {
  padding: 24px;
  margin-bottom: 8px;
  margin-top: 16px;
  opacity: 0.35;
  border-radius: 0.75rem;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 0 solid rgba(0, 0, 0, 0.125);
  border-radius: 1rem;
}

.card .card-body {
  font-family: Open Sans;
  padding: 1.5rem;
}

.form-margin-top {
  margin-top: 0;
}

.form-label,
label {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--bs-dark);
  margin-left: 0.25rem;
}

.form-label input {
  display: inline-flex;
  padding: 10px;
  font-size: 1.1em;
}

@media (max-width: 767px) {

  .form-label,
  label {
    font-size: 0.63rem;
  }
}

.col-form-label,
.form-label {
  font-weight: 700;
  color: var(--bs-dark);
}

.form-label {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

label {
  display: inline-block;
  font-size: 12px;
  margin-bottom: 0px;
}

.form-control2 {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4rem;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d2d6da;
  appearance: none;
  border-radius: 0.5rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.css-viexu0 {
  padding-right: 0;
  display: flex;
  -webkit-box-pack: end;
  justify-content: right;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 20px;
  opacity: 1;
  background: transparent;
  color: rgb(52, 71, 103);
}

.css-viexu1 {
  padding-right: 0;
  display: flex;
  -webkit-box-pack: end;
  justify-content: right;
  -webkit-box-align: center;
  align-items: center;
  /* margin-top: -50px; */
  opacity: 1;
  background: transparent;
  color: rgb(52, 71, 103);
}

.css-exssr5 {
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0px;
  border: 0px;
  margin-right: 10px;
  cursor: pointer;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.02857em;
  min-width: 64px;
  display: inline-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 0.5rem;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  user-select: none;
  transition: all 150ms ease-in 0s;
  min-height: 2.5rem;
  box-shadow: rgba(0, 0, 0, 0.11) 0rem 0.25rem 0.4375rem -0.0625rem, rgba(0, 0, 0, 0.07) 0rem 0.125rem 0.25rem -0.0625rem;
  padding: 0.75rem 1.5rem;
  background-image: linear-gradient(310deg, rgb(20, 23, 39), rgb(58, 65, 111)) !important;
  background-position-y: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  color: rgb(255, 255, 255);
  background-size: 150% !important;
  background-position-x: 25% !important;
  overflow: hidden;
}

.css-exssr5:before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, #ffffff8a, rgba(255, 255, 255, 0) 60%);
  top: 0;
  left: -100px;
  animation: shine 4s infinite linear;
}

.css-exssr5:hover {
  transform: scale(1.02);
  border: 1px solid #365CF5;
  box-shadow: 0 -2px -2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.css-blue-gradient-btn {
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0px;
  border: 0px;
  margin-right: 10px;
  cursor: pointer;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.02857em;
  min-width: 64px;
  display: inline-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  user-select: none;
  transition: all 150ms ease-in 0s;
  min-height: 2.5rem;
  box-shadow: rgba(0, 0, 0, 0.11) 0rem 0.25rem 0.4375rem -0.0625rem, rgba(0, 0, 0, 0.07) 0rem 0.125rem 0.25rem -0.0625rem;
  padding: 0.75rem 1.5rem;
  background-image: linear-gradient(90deg, #0095ff, #7c3aed) !important;
  /* background-image: linear-gradient(310deg, rgb(20, 23, 39), rgb(58, 65, 111))!important; */
  background-position-y: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  color: rgb(255, 255, 255);
  background-size: 150% !important;
  background-position-x: 25% !important;
  overflow: hidden;
}

.css-blue-gradient-btn:before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, #ffffff8a, rgba(255, 255, 255, 0) 60%);
  top: 0;
  left: -100px;
  animation: shine 4s infinite linear;
}

.css-blue-gradient-btn:hover {
  transition: .3s ease-in-out;
  transform: scale(1.03);
  border: 1px solid #fff;
}

@keyframes shine {
  0% {
    left: -100px
  }

  20% {
    left: 100%
  }

  100% {
    left: 100%
  }
}

.css-exssr6-success {
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0px;
  border: 0px;
  margin-right: 10px;
  cursor: pointer;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.02857em;
  min-width: 64px;
  display: inline-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.4rem;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  user-select: none;
  transition: all 150ms ease-in 0s;
  min-height: 2.5rem;
  box-shadow: rgba(0, 0, 0, 0.11) 0rem 0.25rem 0.4375rem -0.0625rem, rgba(0, 0, 0, 0.07) 0rem 0.125rem 0.25rem -0.0625rem;
  padding: 0.75rem 1.5rem;
  background-image: linear-gradient(310deg, rgb(0 107 239), rgb(5 227 227)) !important;
  background-position-y: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  color: rgb(255, 255, 255);
  background-size: 150% !important;
  background-position-x: 25% !important;
  overflow: hidden;
}

.css-exssr6-success:before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, #ffffff8a, rgba(255, 255, 255, 0) 60%);
  top: 0;
  left: -100px;
  animation: shine 4s infinite linear;
}

.css-exssr7-add {
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0px;
  border: 0px;
  cursor: pointer;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  min-width: 2rem;
  display: inline-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  line-height: 0.5;
  text-align: center;
  text-transform: uppercase;
  user-select: none;
  transition: all 150ms ease-in 0s;
  min-height: 2rem;
  box-shadow: rgba(0, 0, 0, 0.11) 0rem 0.25rem 0.4375rem -0.0625rem, rgba(0, 0, 0, 0.07) 0rem 0.125rem 0.25rem -0.0625rem;
  padding: 0.75rem 1.5rem;
  background-image: linear-gradient(310deg, rgb(20, 23, 39), rgb(58, 65, 111)) !important;
  background-position-y: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  color: rgb(255, 255, 255);
  background-size: 150% !important;
  background-position-x: 25% !important;
  overflow: hidden;
}

.css-exssr7-add:before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, #ffffff8a, rgba(255, 255, 255, 0) 60%);
  top: 0;
  left: -100px;
}

/* .css-exssr7-add:hover {
  transition: .3s ease-in-out;
  transform: scale(1.08);
} */
.logo-shine {
  position: relative;
}

.logo-shine:before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, #ffffff8a, rgba(255, 255, 255, 0) 60%);
  top: 0;
  left: -100px;
  animation: shine 4s infinite linear;
}

.d-flex2 {
  display: inline-flex !important;
}

.ms-md-auto2 {
  margin-left: -30px;
}

.subsubsub {
  list-style: none;
  margin: 8px 0 0;
  padding: 5px 0 35px;
  font-size: 13px;
  font-weight: 800;
  float: left;
  color: #646970;
}

.subsubsub span {
  display: inline-grid;
  width: auto;
  padding: 0.05rem 0.65rem;
  margin-right: 5px;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.4rem;
  color: #ff0000;
  background-color: transparent;
  background-clip: padding-box;
  appearance: none;
  border-radius: 0.5rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  z-index: 2;
}

.subsubsub li {
  display: inline-block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.subsubsub a {
  line-height: 2;
  text-decoration: none;
}

.subsubsub ul li p {
  display: inline-block;
  color: #50575e;
  text-decoration: none;
}

.subsubsub ul li.active {
  color: #00c1f8;
}

.subsubsub ul li span.active {
  color: #00c1f8;
}

.subsubsub a .count,
.subsubsub a.current .count {
  color: #50575e;
  font-weight: 400;
}

.align-items-center {
  align-items: center !important;
  font-family: sans-serif;
}

@media (min-width: 768px) {
  .pe-md-3 {
    padding-right: 1rem !important;
  }
}

.input-group2 {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: auto;
  right: 30px;
}

@media (max-width: 768px) {
  .input-group2 {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: max-content;
    right: 0;
    float: right;
    top: 40px;
  }

  .main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 5px 5px;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    border-radius: 3px;
    cursor: pointer;
    z-index: 5;
    transition: all 0.4s ease-in-out;
    border: 1px solid transparent;
    overflow: hidden;
  }

  .input-group2>.form-control,
  .input-group2>.form-select {
    margin-right: -25px !important;
  }
}

.input-group-text2 {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4rem;
  color: var(--bs-dark);
  text-align: center;
  white-space: nowrap;
  background-color: #fff;
  /* border: 1px solid #d2d6da; */
  border-radius: 0.5rem 0 0 0.5rem;
}

.input-group2> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  /* border-top-left-radius: 0;
  border-bottom-left-radius: 0; */
}

.input-group2>.form-control,
.input-group2>.form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  margin-right: 10px;
  min-width: 0;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4rem;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d2d6da;
  appearance: none;
  border-radius: 0.5rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.input-group2 .btn {
  position: relative;
  z-index: 2;
}

.table-responsive {
  /* overflow-x: auto; */
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.mb-0 {
  margin-bottom: 0 !important;
}

.px-2 {
  padding-right: .5rem !important;
  padding-left: .5rem !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.font-weight-bold {
  font-weight: 600 !important;
  font-size: 13px;
}

.table> :not(caption)>*>* {
  padding: 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.bg-gradient-success {
  background-image: linear-gradient(310deg, var(--bs-gradient-success-right), #42ab00);
}

.badge,
.btn {
  text-transform: uppercase;
}

.badge {
  display: inline-block;
  padding: 0.55em 0.9em;
  margin: 2px;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.45rem;
}

.badge-sm {
  padding: .45em .775em;
  font-size: .65em;
  border-radius: .25rem;
}

/* .bg-gradient-success {
  background-image: linear-gradient(310deg, #009f3b, #62af00);
} */
.bg-gradient-faded-info {
  background-image: radial-gradient(370px circle at 80% 50%, rgb(0 105 205 / 60%) 0, #0082a1 100%);
}

.bg-gradient-secondary {
  background-image: linear-gradient(310deg, var(--bs-gradient-secondary-right), var(--bs-gradient-secondary-left));
}

.tablenav-pages {
  float: right;
  margin: 0 20px 9px;
}

.displaying-num,
.tablenav-paging-text {
  font-size: 11px;
}

.next-page,
.tablenav-pages-navspan {
  margin: 7px;
}

.screen-reader-text {
  color: #2271b1;
  border-color: #2271b1;
  background: #f6f7f7;
  vertical-align: top;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  -webkit-appearance: none;
  border-radius: 3px;
  white-space: nowrap;
  box-sizing: border-box;
  text-decoration: none;
  display: inline-block;
  vertical-align: baseline;
  min-width: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0 4px;
  font-size: 16px;
  line-height: 1.625;
  text-align: center;
}

.screen-reader-text,
.screen-reader-text span,
.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.tablenav-pages .current-page {
  margin: 0 8px 0 0;
  font-size: 13px;
  text-align: center;
  position: relative;
  bottom: -7px;
}

.displaying-num,
.tablenav-paging-text {
  font-size: 11px;
  font-family: sans-serif;
  bottom: -12px;
  position: relative;
}

.w-100z {
  width: 100% !important;
  padding: 15px;
}

.justify-content-between {
  justify-content: space-between !important;
}

.avatar {
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 0.75rem;
  height: 48px;
  width: 48px;
  transition: all 0.2s ease-in-out;
}

.avatar-sm {
  width: 36px !important;
  height: 36px !important;
  font-size: 0.875rem;
}

.me-3 {
  margin-right: 1rem !important;
}

.text-edit {
  /* background: #fff6d3; */
  padding: 3px;
  font-family: inherit;
}

.text-xs2 {
  font-size: .75rem !important;
}

.text-xss {
  line-height: 1.25;
  font-size: 12px;
}

.me-2 {
  font-style: normal;
}

.bg-gradient-primary2 {
  background-image: linear-gradient(310deg, var(--bs-gradient-primary-right), var(--bs-gradient-primary-left));
}

.bg-gradient-secondary {
  background-image: linear-gradient(195deg, #747b8a 0%, #495361 100%);
}

.bg-gradient-green {
  background-image: linear-gradient(310deg, var(--bs-gradient-success-right), var(--bs-gradient-success-left));
  color: #FFFFFF !important;
}

.bg-gradient-primary-blue {
  background-image: linear-gradient(310deg, var(--bs-gradient-info-right), var(--bs-gradient-info-left));
  color: #FFFFFF !important;
}

.bg-gradient-primary-red {
  background-image: linear-gradient(310deg, #bb0900, #ef2c00) !important;
  color: #FFFFFF !important;
}

/* .btn {
  display: inline-block;
  font-weight: 700;
  line-height: 1.4;
  color: unset;
  text-align: center;
  vertical-align: middle;
  width: auto;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.75rem 1.5rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  transition: all 0.15s ease-in;
} */
.btn-group-sm>.btn,
.btn-sm {
  font-size: 0.75rem;
  color: #fff;
  border-radius: 0.5rem;
}

.form-switch-set-width .form-check-input-set-width {
  width: 3em;
}

.form-check-input-set-width {
  height: 1.5em;
}

.details-content {
  order: 1;
  /* padding: 1rem; */
  width: 100%;
}

.movies-section {
  padding: 20px;
}
/* 
.movies-section img {
  display: inline-block;
  position: relative;
  width: 2.5%;
} */

.movies-section h2 {
  font-size: 1.5em;
  font-weight: 800;
  margin-bottom: 20px;
  position: relative;
  display: inline-flex;
  top: 3px;
}

.movie-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(350px, 1fr));
  gap: 20px;
}

@media screen and (max-width: 1024px) {
  .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 20px;
  }
}

.movie-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 20px;
}

@media screen and (max-width: 1024px) {
  .movie-grid-5 {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 20px;
  }
}

.movie-item {
  text-align: center;
  margin-bottom: 10px;
}

.movie-item:hover {
  transition: .3s ease-in-out;
  transform: scale(1.02);
  background: #fff;
}

/* .movie-item:hover > :not(:hover) {
  filter: blur(5px);
  opacity: .5;
} */
.movie-item h3 {
  font-size: 1.2em;
  font-weight: 800;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  display: block;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

.movie-item p {
  font-size: 1em;
  font-weight: 500;
  text-align: left;
  overflow: hidden;
  display: block;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

.movie-item video {
  width: 100%;
}

.center-div2 {
  position: relative;
  display: block;
  margin: auto;
  /* top: 70px;
  right: 0;
  bottom: 0;
  left: -20px; */
}

@media screen and (max-width: 1024px) {
  .center-div2 {
    top: 18px !important;
    left: 72px !important;
  }
}

.center-div2 em,
span {
  display: inline-block;
  vertical-align: top;
}

.movie-info {
  padding: 15px;
  display: grid;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
}

.movie-year1 {
  margin: 5px 0;
  color: white;
  font-size: 11px;
  position: relative;
  display: inline-flex;
  top: -362px;
}

@media screen and (max-width: 1024px) {
  .movie-year1 {
    font-size: 5px !important;
    top: -248px !important;
  }
}

.movie-stats {
  display: inline-flex;
  position: relative;
  justify-content: space-between;
  font-size: 12px;
  color: white;
  width: 350px;
  bottom: -147px;
  z-index: 1;
}

@media screen and (max-width: 1024px) {
  .movie-stats {
    font-size: 7px !important;
    width: 153px !important;
    bottom: -50px !important;
  }
}

.movie-stats:before {
  content: "";
  display: block;
  position: absolute;
  top: -16px;
  left: 0;
  width: 372px;
  height: 44px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: url(images/influencer_bottom_mask.png) no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: -1;
}

@media screen and (max-width: 1024px) {
  .movie-stats:before {
    content: "";
    display: block;
    position: absolute;
    top: -26px !important;
    left: -14px !important;
    width: 183px !important;
    height: 44px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
  }
}

figure {
  overflow: hidden;
  position: relative;
}

.movie-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/* 
.movies-section img {
  display: inline-block;
  position: relative;
} */

.movie-item p {
  font-size: 1em;
  font-weight: 500;
  text-align: left;
  overflow: hidden;
  display: block;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

.details-tabs {
  position: relative;
  justify-content: flex-start;
  display: flex;
  flex-wrap: wrap;
}

.card-main-user-pro {
  margin: 0 auto;
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  padding: 20px 10px;
  flex-direction: column;
}

.card-main-user-pro h1 {
  position: absolute;
  display: block;
  font-size: 22px;
  font-weight: 600;
  left: 0;
  top: 9px;
}

@media screen and (max-width: 1920px) {
  .card-main-user-pro {
    width: 100%;
    /* max-width: max-content; */
    flex-direction: row !important;
    position: relative !important;
    /* top: -50px !important;
      padding: 10px 30px !important; */
  }
}

@media screen and (max-width: 1024px) {
  .card-main-user-pro {
    max-width: 900px !important;
  }
}

.details-item {
  /* display: contents; */
  display: block;
  position: relative;
  top: 23px;
  left: 0;
  width: 100%;
  cursor: pointer;
}

.details-item[open]>.details-tab {
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
}

@media screen and (max-width: 1024px) {
  .bg-gray-outline {
    outline: unset !important;
  }
}

.applications-footer-card-para {
  border-radius: 0 0 10px 1 0px;
  padding: 30px 20px;
  box-shadow: 0px 3px 3px -1px rgba(10, 22, 70, .1), 0px 0px 1px 0px rgba(10, 22, 70, .06) !important;
}

.applications-tabel-card-heading,
.applications-footer-card-para {
  padding: 14px 20px;
  border-radius: 10px 10px 0 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--soft-lavender);
}

.ctm-align-items-center {
  align-items: center;
}

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

.ctm-flex-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  background-color: #fff;
}

.ctm-flex-row p {
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  margin: 0px;
}

@media screen and (max-width: 768px) {
  .ctm-flex-row p {
    display: none !important;
  }
}

.applications-footer-card-para p {
  font-size: 15px;
  font-weight: 400;
}

#pagination-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  float: right;
  margin-top: -30px;
  position: absolute;
}

.pagination-ctrl-right-10 {
  right: 10px;
}

.pagination-ctrl-right-25 {
  right: 25px;
  margin-top: 0px !important;
}

.pagination-ctrl-right-40 {
  right: 40px;
}

@media screen and (max-width: 767px) {
  #pagination-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    float: unset;
    right: 60px;
    position: static;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.5rem;
    text-align: center;
    transform: translate(20%, 0%);
  }
}

#pagination-controls button {
  font-family: "Montserrat", sans-serif;
  min-width: 38px;
  margin: 0 !important;
}

#pagination-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#pagination-controls-popover {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  float: right;
}

#pagination-controls-popover button {
  font-family: "Montserrat", sans-serif;
  min-width: 38px;
  margin: 0 !important;
}

#pagination-controls-popover button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.table> :not(caption)>*>* {
  padding: 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.table td,
.table th {
  white-space: nowrap;
}

.table.align-items-center td,
.table.align-items-center th {
  vertical-align: middle;
}

.table.align-items-center td,
.table.align-items-center th {
  vertical-align: middle;
  vertical-align: top;
}

.table>:not(caption)>*>* {
  padding: .5rem;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
  background-color: var(--bs-table-bg);
  border-bottom: 1px solid #c1e0ff;
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

.form-check {
  display: inline-block;
}

.ps-0 {
  padding-left: 0 !important;
}

.form-check {
  display: inline-block;
  min-height: 1.5rem;
  /* padding-left: 1.73em;
  margin-bottom: 0.125rem; */
}

.form-switch {
  padding-left: 4rem;
}

.form-switch .form-check-input {
  border: 1px solid var(--bs-light);
  position: relative;
  background-color: rgba(58, 65, 111, 0.1);
  height: 1.25em;
}

.form-check-input[type="checkbox"],
.form-check-label {
  cursor: pointer;
}

.form-switch .form-check-input {
  width: 3rem;
  margin-left: -3rem;
  background-image: none;
  background-position: 0;
  border-radius: 2.5rem;
  transition: background-color 0.25s ease, border-color 0.25s ease, background-position 0.15s ease-in-out, opacity 0.15s ease-out, box-shadow 0.15s ease-in-out;
}

.form-check-input[type=checkbox],
.form-check-label {
  cursor: pointer;
}

.form-switch .form-check-input:after {
  transition: transform 0.25s ease-in-out, background-color 0.25s ease-in-out;
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  position: absolute;
  background-color: #fff;
  transform: translateX(1px);
  box-shadow: 0 0.25rem 0.375rem -0.0625rem hsla(0, 0%, 8%, 0.12), 0 0.125rem 0.25rem -0.0625rem hsla(0, 0%, 8%, 0.07);
  top: .5px;
  left: 0;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-check-label {
  font-size: 0.875rem;
  font-weight: 400;
}

.form-switch .form-check-input:checked {
  border-color: #65c98a;
}

.form-switch .form-check-input:checked {
  border-color: var(--bs-white);
  background-image: linear-gradient(310deg, var(--bs-gradient-success-right), var(--bs-gradient-success-left)) !important;
}

.form-switch .form-check-input:checked {
  background-position: 100%;
  background-image: none;
}

/* .form-check-input:checked[type="checkbox"], .form-check-input:checked[type="radio"] {
  background-image: linear-gradient(310deg, var(--bs-gradient-success-right), var(--bs-gradient-success-left));
} */
.form-switch .form-check-input:checked:after {
  transform: translateX(28px);
}

#scales label {
  display: inline-block;
  margin-top: 0px;
  position: relative;
  top: -5px;
}

/* Article-Comments-Start */
@media (min-width: 48em) {
  .row [class*="col-"].reset-s {
    margin-left: 0 !important;
    clear: both;
  }
}

@media (min-width: 48em) {
  .col-s-4 {
    width: 32%;
  }
}

[class*="col-"] {
  /* position: relative;
  display: block;
  min-height: 1px; */
  /* float: left; */
  /* width: 100%; */
}

.col-width100 {
  width: 100%;
}

.card-style-blog {
  background: #fff;
  box-sizing: border-box;
  /* padding: 25px 30px; */
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  border-radius: 7px;
}

.comments button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"] {
  -webkit-appearance: none;
  border-radius: 0;
  display: inline-block;
  padding: .5em 1em;
  margin-bottom: 0;
  line-height: normal;
  border: solid 1px #c0c0c0;
  background-color: #dadada;
  color: inherit;
  cursor: pointer;
  -ms-touch-action: none;
  touch-action: none;
  width: auto !important;
}

.topbar {
  background: #5c60f5;
  color: white;
  width: 100%;
  z-index: 9999;
  padding: 5px 20px;
}

.topbar h1 {
  cursor: pointer;
}

.topbar nav {
  margin-top: 25px;
}

.topbar nav ul {
  padding: 0;
  margin: 0;
}

.topbar nav ul li {
  display: inline-block;
  padding: 10px;
}

.topbar nav ul li a {
  color: white;
  text-decoration: none;
}

ul.post-grid {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.post-grid li {
  padding: 20px;
  cursor: pointer;
  transition: background linear 0.5s;
  border-bottom: 1px solid #5c60f5;
}

ul.post-grid li:hover {
  background: #5c60f5;
  color: white;
}

ul.post-grid li:hover h3 {
  color: white;
}

.content-blog {
  width: 100%;
  position: relative;
  padding: 20px 40px 20px;
}

.cotent-blog h2,
h3 {
  color: #5c60f5;
}

.post {
  transition: 0.5s linear all;
  opacity: 1;
  padding-bottom: 30px;
}

.post cite {
  display: inline-block;
  padding: 10px 0;
}

.comments ul {
  margin: 0;
  padding: 0;
}

.comments ul li {
  list-style-type: none;
  padding: 20px 5px;
  border-bottom: 1px #5c60f5 solid;
}

.post.ng-hide {
  opacity: 0;
}

.post.ng-hide-add,
.post.ng-hide-remove {
  display: block !important;
}

form {
  width: 100%;
}

input,
textarea {
  display: inline-flex;
  width: -webkit-fill-available;
  padding: 10px;
  font-size: 1.1em;
}

.ng-invalid.ng-dirty {
  border-color: red;
}

.ng-valid.ng-dirty {
  border-color: green;
}

img {
  max-width: 100%;
}

/* Article-Comments-End */
.widget {
  display: inline-block;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}

.widget-lg .btn,
.widget-lg .social-count {
  height: 16px !important;
  padding: 5px 5px !important;
  font-size: 12px;
  line-height: 16px;
}

.widget .btn {
  color: #25292e;
  background-color: #ffca00;
  border-color: #d1d9e0;
  /* background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f6f8fa'/%3e%3cstop offset='90%25' stop-color='%23ebf0f4'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e);
  background-image: -moz-linear-gradient(top, #f6f8fa, #ebf0f4 90%);
  background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%); */
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF6F8FA', endColorstr='#FFEAEFF3');
}

.widget .btn {
  position: relative;
  display: inline-block;
  display: inline-flex;
  height: 14px;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  vertical-align: bottom;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-repeat: repeat-x;
  background-position: -1px -1px;
  background-size: 110% 110%;
  border: 1px solid;
  width: 27px;
  margin-right: 2px;
}

.widget .social-count {
  position: relative;
  display: inline-block;
  display: inline-flex;
  height: 14px;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 5px;
  vertical-align: bottom;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-repeat: repeat-x;
  background-position: -1px -1px;
  background-size: 110% 110%;
  border: 1px solid;
  border-radius: 5px;
}

.widget svg {
  display: inline-block;
  vertical-align: text-top;
  fill: currentColor;
  overflow: visible;
  margin-top: -5px;
}

.octicon {
  display: inline-block;
  vertical-align: text-top;
  fill: currentColor;
  overflow: visible;
}

.social-count {
  color: #25292e;
  fill: currentColor;
  background-color: #fff;
  border-color: #d1d9e0;
}

.social-count {
  border-left: 0;
  border-radius: 0 .25em .25em 0;
}

/* Start - Included Chart Row-3 Columns */
.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: 0;
  --bs-card-border-color: #e5e5e5;
  --bs-card-border-radius: 1rem;
  --bs-card-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bs-card-inner-border-radius: 0.5rem;
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: #fff;
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: #fff;
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}

.card {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e5e5;
  /* padding: 20px; */
}

.card .card-body {
  font-family: Inter, Helvetica, Arial, sans-serif;
  padding: 1rem;
}

.card-list {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  padding: 15px;
}

.card-list .card-body {
  font-family: Inter, Helvetica, Arial, sans-serif;
  padding: 1rem;
}

.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
}

.pe-2 {
  padding-right: 0.5rem !important;
}

hr.horizontal.dark {
  background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4), transparent);
}

hr.horizontal {
  background-color: transparent;
}

.chart hr {
  border-top: none;
  height: 1px;
}

.chart hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: 0.25;
}

.d-flex {
  display: flex !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

/* End - Included Chart Row-3 Columns */

/* Start - Included Chart Row-2 Columns */
.timeline-block:first-child {
  margin-top: 0;
}

.timeline-block {
  position: relative;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.timeline-one-side .timeline-step {
  left: 1rem;
}

.timeline-step svg,
.timeline-step i {
  line-height: 1.4;
}

.timeline-step {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e5ebf7;
  text-align: center;
  transform: translateX(-50%);
  font-size: 1rem;
  font-weight: 600;
  z-index: 1;
}

.timeline-step::after {
  content: "";
  display: table;
  height: 10px;
  width: 1px;
  color: #333;
}

@media (min-width: 992px) {
  .timeline-step {
    left: 50%;
  }
}

.text-gradient.text-success {
  background-image: linear-gradient(195deg, #66BB6A, #43A047);
}

.text-gradient.text-danger {
  background-image: linear-gradient(195deg, #EF5350, #E53935);
}

.text-gradient.text-info {
  background-image: linear-gradient(195deg, #49a3f1, #1A73E8);
}

.text-gradient.text-warning {
  background-image: linear-gradient(195deg, #FFA726, #FB8C00);
}

.text-gradient.text-primary {
  background-image: linear-gradient(195deg, #EC407A, #D81B60);
}

.text-gradient.text-dark {
  background-image: linear-gradient(195deg, #42424a, #191919);
}

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
}

.material-symbols-rounded3 {
  font-size: 20px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
}

.text-success3 {
  color: #4CAF50 !important;
}

.timeline-content {
  position: relative;
  margin-left: 45px;
  padding-top: 0.35rem;
  position: relative;
  top: -6px;
}

.timeline-one-side .timeline-content {
  width: auto;
}

@media (min-width: 992px) {
  .timeline-content {
    width: 38%;
  }
}

@media (min-width: 992px) {
  .timeline-one-side .timeline-content {
    max-width: 30rem;
  }
}

.timeline-content:after {
  content: "";
  display: table;
  clear: both;
}

.timeline-block:after {
  content: "";
  display: table;
  clear: both;
}

.avatar img {
  width: 100%;
}

.avatar img svg {
  vertical-align: middle;
}

.avatar-group .avatar {
  position: relative;
  z-index: 2;
  border: 2px solid #fff;
}

.avatar-xs {
  width: 24px !important;
  height: 24px !important;
  font-size: 0.75rem;
}

.avatar {
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 50rem;
  height: 48px;
  width: 48px;
  transition: all 0.2s ease-in-out;
}

.avatar-group .avatar+.avatar {
  margin-left: -1rem;
}

.rounded-circle,
.avatar.rounded-circle img {
  border-radius: 50% !important;
}

/* End - Included Chart Row-2 Columns */

/* Start - Top Notification Bar-SlideDown */
/* .main-notification-del {
  padding: 1em;
} */
.action-notification-del {
  display: flex;
  padding: 0 0 0 0.1em;
  /* border: 1px solid #ff3333; */
}

.notification-del {
  position: fixed;
  top: -30em;
  margin-top: 0;
  height: 6%;
  width: 90% !important;
  left: 80px;
  border-radius: 10px;
  width: 100%;
  padding: 1em;
  overflow: hidden;
  /* background-color: #FFF8E1; */
  /* background: rgb(253 228 149);
  border: solid 1px #d9a700; */
  background: rgb(255 208 195);
  border: solid 1px #d93c00;
  z-index: 999;
  transition: all 0.2s ease-in-out;
}

.notification-del.anim {
  -webkit-transition: bottom 0.6s ease-out;
  -moz-transition: bottom 0.6s ease-out;
  -ms-transition: bottom 0.6s ease-out;
  -o-transition: bottom 0.6s ease-out;
  transition: bottom 0.6s ease-out;
  animation: 2s autoplay1 ease-in-out;
}

@keyframes autoplay1 {
  0% {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.notification-del.active {
  top: 0;
}

.notification-del .actions-notification-del {
  margin-top: 0.5em;
}

.notification-del .btn {
  border: 1px solid #ef2c00;
  background: #f97a5e;
  color: #7f0202;
  display: inline-block;
  padding: 0.5em;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  line-height: 1.2;
  margin-top: 3px;
  border-radius: 8px !important;
}

.notification-del .btn:hover {
  color: #000;
  background: #fff5f5;
  border: 1px solid #ffe;
  transform: scale(0.95);
  opacity: 0.5;
}

.notification-del .dismiss-btn {
  color: #9f3900;
  display: inline-block;
  padding: 0.5em;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  line-height: 1.2;
  margin-top: 3px;
  border-radius: 8px !important;
}

.notification-del .dismiss-btn:hover {
  color: #f97a5e;
  transform: scale(0.95);
  opacity: 0.5;
}

@media all and (min-width: 50em) {
  .notification-del .msg i {
    float: left;
    width: auto;
    font-size: 17px;
    font-weight: 600;
    color: #9f3900;
  }

  .notification-del .actions-notification-del {
    float: right;
    text-align: right;
    width: 30%;
    margin-top: -1.5em;
  }
}

/* End - Top Notification Bar-SlideDown */

/* Start - Top Notification Bar-Confirm SlideDown */
.main-notification-confirm {
  display: block;
}

.action-notification-confirm {
  display: inline-block;
  padding: 0 0 0 0.3em;
  line-height: 1.2;
  /* border: 1px solid #ff3333; */
}

.notification-confirm {
  position: fixed;
  top: -20em;
  left: 0;
  width: 100%;
  padding: 1em;
  overflow: hidden;
  /* background-color: #FFF8E1; */
  background: #b6eaff;
  border: solid 1px #006dd9;
  z-index: 9999;
}

.notification-confirm.anim {
  -webkit-transition: top 0.6s ease-out;
  -moz-transition: top 0.6s ease-out;
  -ms-transition: top 0.6s ease-out;
  -o-transition: top 0.6s ease-out;
  transition: top 0.6s ease-out;
}

.notification-confirm.active {
  top: 0;
}

/* .notification-confirm .actions-notification-confirm {
  margin-top: 0.5em;
} */
/* .notification-confirm .btn {
  border: 1px solid #ef2c00;
  background-image: linear-gradient(310deg, #ff0c00, #ef2c00);
  color: #fff;
  display: inline-block;
  padding: 0.5em;
} */
.notification-confirm .dismiss-btn {
  display: inline-block;
  margin-left: 1em;
  font-weight: 800;
  color: #006dd9;
}

@media all and (min-width: 50em) {
  .notification-confirm .msg i {
    float: left;
    width: auto;
    font-size: 18px;
    font-weight: 800;
    color: #006dd9;
    text-transform: none;
  }

  .notification-confirm .action-notification-confirm {
    float: right;
    text-align: right;
    width: 30%;
    margin-top: -1.5em;
  }
}

/* End - Top Notification Bar-Confirm SlideDown */

/* Start - Button-Loader */
.button.loading {
  background-color: #CCC;
  padding-right: 40px;
}

.button.loading:after {
  content: "";
  position: absolute;
  border-radius: 100%;
  right: 6px;
  top: 50%;
  width: 0px;
  height: 0px;
  margin-top: -2px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-left-color: #FFF;
  border-top-color: #FFF;
  animation: spin .6s infinite linear, grow .3s forwards ease-out;
}

@keyframes spin {
  to {
    transform: rotate(359deg);
  }
}

@keyframes grow {
  to {
    width: 14px;
    height: 14px;
    margin-top: -8px;
    right: 13px;
  }
}

/* End - Button_Loader */

/* Start - Feedback-Form */
#feedback-form-wrapper #floating-icon>button {
  position: fixed;
  float: right;
  right: 0;
  top: 50%;
  transform: rotate(-90deg) translate(50%, -50%);
  transform-origin: right;
  z-index: 999;
  visibility: unset;
  background: #0058ff;
}

#feedback-form-wrapper .rating-input-wrapper input[type="radio"] {
  display: none;
}

#feedback-form-wrapper .rating-input-wrapper input[type="radio"]~span {
  cursor: pointer;
}

#feedback-form-wrapper .rating-input-wrapper input[type="radio"]:checked~span {
  background-color: #4261dc;
  color: #fff;
}

#feedback-form-wrapper .rating-labels>label {
  font-size: 14px;
  color: #777;
}

/* Bootstrap-Copy */
.modal-feed {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: ;
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(var(--bs-body-color-rgb), 0.075);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-open .modal-feed {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-feed {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 1;
  display: grid;
  place-items: center;
  align-content: center;
}

.fade {
  transition: opacity .15s linear;
}

.modal-feed.show .modal-dialog {
  -webkit-transform: none;
  transform: none;
}

.modal-feed.fade .modal-dialog {
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out;
  -webkit-transform: translate(550px, 150px);
  transform: translate(550px, 150px);
}

.modal-feed.show .modal-dialog {
  transform: none;
}

.modal-feed.fade .modal-dialog {
  transition: transform .3s ease-out;
  transform: translate(0, 0);
}
/* 
.modal-dialog {
  position: relative;
  width: auto;
  margin: .5rem;
  pointer-events: none;
} 

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none;
}*/

.modal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  outline: 0;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
  padding: 10px;
}

.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(.3rem - 1px);
  border-top-right-radius: calc(.3rem - 1px);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.modal-header h3 {
  font-size: 19px;
  font-weight: 800;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}

.modal-header .close {
  padding: 0.1rem 0.1rem;
  /* margin: -1rem -1rem -1rem auto; */
  border: none;
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}

.modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

/* End - Feedback-Form */

/* Start - Blocked-List */
.blocked-list-tablet {
  margin-bottom: 0px;
  /* padding: 0 25px 25px; */
}

.blocked-list-tablet span {
  position: relative;
  top: 30px;
  left: 10px;
  z-index: 10;
  font-size: 28px;
}

.blocked-list-tablet dl {
  padding: 0;
}

.blocked-list-tablet dl dd {
  display: inline-table;
  width: auto;
  font-size: 12px;
  padding: 10px;
  margin-bottom: 5px;
  text-align: center;
  background-image: #F05F6E;
  color: #F3F5F4;
  cursor: pointer;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

.blocked-list-tablet dl dd:hover {
  transition: .2s ease-in-out;
  transform: scale(1.2);
  box-shadow: 0 0px 6px 2px #8bbaf36b;
}

.EventList {
  display: flex;
}

.EventItem {
  display: flex;
}

.TagList {
  display: block;
}

.table-column-grid {
  display: grid;
  grid-template-columns: .2fr .2fr .2fr .2fr .2fr .2fr .2fr .2fr .2fr .2fr .2fr;
  width: max-content;
}

.tag-list {
  display: contents;
}

@media (min-width: 992px) {
  .col-lg-1-taglist {
    flex: 0 0 auto;
    width: auto;
    display: inline-block !important;
  }
}

.tag {
  padding: 5px 10px;
  border-radius: 10px;
  color: white;
  background: #bf0013;
  border: 1px solid #ff6a79;
  margin: 5px 5px;
  display: inline-block;
  line-height: 1.1;
}

.tag:hover {
  transition: 0.2s ease-in-out;
  transform: scale(1.2);
  box-shadow: 0 0px 6px 1px #ff818e;
}

.tag:after {
  content: "x";
  display: inline-block;
  background-color: rgb(255 255 255 / 70%);
  height: 20px;
  width: 0;
  text-align: center;
  border-radius: 50px;
  color: #bf0013;
  transform: rotate(-270deg);
  position: relative;
  left: -20px;
  top: 0;
  opacity: 0;
  transition: all linear 0.3s;
  margin-left: 8px;
}

.tag:hover {
  cursor: pointer;
}

.tag:hover:after {
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  width: 20px;
  height: 20px;
}

.Title {
  color: #f05f6e;
}

/* End - Blocked-List */

/* Start - Hover-FX */
/* .css-navyblue-table:hover {
  box-shadow: 0 0px 6px 2px #8bbaf36b;
  transition:  .4s ease-in-out;
} */
/* End - Hover-FX */

/* Start - Card-Info */
.card__content {
  display: flex;
  flex-direction: column;
  padding: 0 0.8rem;
}

/* .card > * :not(last-child) {
  margin-bottom: 1rem;
} */
.card__data {
  display: flex;
  justify-content: space-between;
}

.data {
  gap: 0.3rem;
  font-size: 1.3rem;
}

.data p {
  font-size: 0.8rem;
}

:where(div.data, a.more__link) {
  display: flex;
  align-items: center;
}

/* End - Card-Info */

/* Start - QR */
.tooltiptext {
  visibility: visible;
  width: 150px;
  background-color: white;
  color: black;
  font-size: 0.9em;
  text-align: left;
  border-radius: 5px;
  padding: 15px;
  position: absolute;
  text-align: center;
  z-index: 1;
  top: 100%;
  left: 0;
  box-shadow: 0px 4px 12px 0px rgba(97, 82, 244, 0.1);
}

.tooltiptext::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px;
  border-color: white transparent transparent white;
  transform: rotate(45deg);
  top: -10px;
  left: 40px;
  border-radius: 6px 0px 0px 0px;
}

.tooltiptext img {
  width: 100% !important;
}

.tooltiptext a {
  color: #1100a8;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  display: inline-flex;
}

/* End - QR */

/* Start - Profile Pg */
.page-header {
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: 50%;
}

.mask {
  position: absolute;
  background-size: cover;
  background-position: center center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

@media (min-width: 768px) {
  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
}

.border-radius-xl {
  border-radius: 0.75rem;
}

.min-height-300 {
  min-height: 300px !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.bg-gradient-dark {
  background-image: linear-gradient(195deg, #42424a 0%, #191919 100%);
}

.bg-gradient-grey {
  color: #757575;
  background-image: linear-gradient(195deg, #9b9b9b7a 0%, #8f8f8f47 100%);
  gap: 0.5em;
  background: hsl(222deg 18.8% 89.51%);
  box-shadow: inset 0 0 0 1px transparent;
  transition: all 0.3s ease;
}

.bg-gradient-grey:hover {
  transform: scale(0.95);
  opacity: 0.8;
  border: 1px solid #79bdff;
  box-shadow: 0 -2px -2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.bg-gradient-fade-blue {
  background-image: linear-gradient(195deg, #42424a00 0%, #021b77 100%);
}

.opacity-6 {
  opacity: 0.6 !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

@media (min-width: 768px) {
  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
}

.mt-n6 {
  margin-top: -4rem !important;
}

.card-profile {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: 0;
  --bs-card-border-color: #e5e5e5;
  --bs-card-border-radius: 0.5rem;
  --bs-card-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bs-card-inner-border-radius: 0.5rem;
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: #fff;
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: #fff;
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}

.card-profile {
  box-shadow: 0px 12px 8px -8px rgb(145 158 171 / 42%), 0px 0px 2px 0px rgb(145 158 171 / 57%);
  background-image: radial-gradient(227.71% 180.23% at 90.64% 130.38%, #ffffff1f 0%, #ffffff 100%), url(https://img.freepik.com/premium-vector/abstract-geometric-pattern-design_260839-594.jpg?semt=ais_hybrid&w=740&q=80);
  background-position: center;
  background-size: contain;
  background-repeat: repeat;
}

.card-profile .card-body {
  font-family: Inter, Helvetica, Arial, sans-serif;
  padding: 1rem;
}

.card-profile h5 {
  margin-left: 25px;
}

.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
}

.card-profile>* :not(last-child) {
  margin-bottom: 0.2rem;
}

.card-profile .btn {
  text-decoration: none;
}

.card-profile p {
  font-weight: 400;
}

.card-profile-bg {
  background: #f3e3a74a;
  padding: 10px;
}

.text-truncate {
  overflow: hidden;
  display: block;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

.form-check-label {
  font-size: 0.875rem;
  font-weight: 400;
  margin-top: 7px;
  left: 12px;
  position: relative;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

@media (min-width: 768px) and (max-width: 2600px) {
  .row-profile {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
  }
}

@media (min-width: 200px) and (max-width: 767px) {
  .row-profile {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
  }
}

.row-profile>* {
  flex-shrink: 0;
  /* width: 100%; */
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media (min-width: 992px) {
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}

@media (min-width: 992px) {
  .col-lg-4a {
    flex: 0 0 auto;
    width: 29.99999999%;
  }
}

@media (min-width: 992px) {
  .col-lg-6a {
    flex: 0 0 auto;
    width: 58%;
  }
}

/* @media (min-width: 992px) {
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
} */
/* @media screen and (max-width 767px) {
  .col-lg-8z {
    flex: 0 0 auto;
    width: 53.66666667% !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 2800px) {
.col-lg-8z {
    flex: 0 0 auto;
    width: 54.44444445% !important;
}
} */
@media (min-width: 576px) {
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}

@media (min-width: 576px) {
  .me-sm-0 {
    margin-right: 0 !important;
  }
}

@media (min-width: 576px) {
  .ms-sm-auto {
    margin-left: auto !important;
  }
}


/* @media screen and (min-width: 1024px) {
  .col-lg-8 {
      flex: 0 0 auto;
      width: 55.66666667%!important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .col-lg-8 {
      flex: 0 0 auto;
      width: 78.66666667%!important;
  }
}
@media (min-width: 992px) {
  .col-lg-4 {
      flex: 0 0 auto;
      width: 21.33333333%;
  }
  .content-wrapper {
    width: 1820px;
  }
} */


.end-0 {
  right: 0 !important;
}

.position-relative {
  position: relative !important;
}

.nav.nav-pills {
  background: #f5f5f5;
  border-radius: 0.75rem;
  position: relative;
}

.p-1 {
  padding: 0.25rem !important;
}

.flex-row {
  flex-direction: row !important;
}

.nav-pills {
  --bs-nav-pills-border-radius: 0.75rem;
  --bs-nav-pills-link-active-color: #262626;
  --bs-nav-pills-link-active-bg: #fff;
}

.nav.nav-pills .nav-item {
  z-index: 3;
}

.nav-fill>.nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav.nav-pills .nav-link {
  z-index: 3;
  color: #262626;
  border-radius: 0.5rem;
  background-color: inherit;
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}

.nav-pills .nav-link {
  border-radius: var(--bs-nav-pills-border-radius);
}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--bs-nav-link-color);
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.nav.nav-pills .nav-link .material-symbols-rounded {
  top: 3px;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: var(--bs-nav-pills-link-active-bg);
}

.text-lg {
  font-size: 1.125rem !important;
}

.material-symbols-rounded {
  font-size: 20px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.avatar-xl {
  width: 74px !important;
  height: 74px !important;
}

.avatar-xl:hover {
  border: 2px solid #021b77;
  transform: scale(1.05);
  transition: 0.3s cubic-bezier(0.52, -0.3, 0.42, 1.39);
}

.border-radius-lg {
  /* border-radius: 0.5rem; */
  border-radius: 50%;
}

.shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.shadow-sm {
  box-shadow: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #79bdff;
  transition: border 0.3s;
}

/* End- Profile Pg */

/* Start - Badges */
.icon-star {
  margin: -30px 0px 0;
  padding-left: 30px;
  background: url(../images/icon/icon-star.png) no-repeat left center;
  background-size: 20px;
  height: 30px;
  display: block;
  border-radius: 50%;
  left: 0;
  position: relative;
}

/* End - Badges */

/* Start - Gift Icon Anime */
/* Animation-Present */
.gift {
  --dur: 1.5s;
  position: absolute;
  width: 25px;
  height: 25px;
  transform: scale(0.12);
  left: 78px;
  top: 20px;
}

.gift__bow,
.gift__bow-center,
.gift__bow-left,
.gift__bow-right,
.gift__box,
.gift__lid,
.gift__lid-shadow,
.gift__star {
  position: absolute;
}

.gift__bow-center,
.gift__bow-left,
.gift__bow-right {
  background-color: var(--red2);
}

.gift__bow {
  animation: bowBounce var(--dur) ease-in-out infinite;
  bottom: 11em;
  left: 7.5em;
  width: 3em;
  height: 2em;
  transform-origin: 50% 230%;
}

.gift__bow-center {
  border-radius: 1em;
  width: 100%;
  height: 100%;
}

.gift__bow-left,
.gift__bow-right {
  box-shadow: 0 0 0 0.7em var(--red1) inset;
  top: 0.3em;
  width: 4em;
  height: 5em;
  z-index: -1;
}

.gift__bow-left:before,
.gift__bow-right:before {
  background-color: var(--red1);
  border-radius: inherit;
  content: "";
  display: block;
  position: absolute;
  inset: 0;
}

.gift__bow-left {
  animation: bowLeftPivot var(--dur) ease-in-out infinite;
  border-radius: 1.5em 0 3em 1em / 1.5em 0 3em 3.5em;
  right: calc(100% - 0.75em);
  transform: rotate(35deg);
  transform-origin: 100% 15%;
}

.gift__bow-left:before {
  clip-path: polygon(0 42%, 100% 12%, 100% 100%, 0 100%);
}

.gift__bow-right {
  animation: bowRightPivot var(--dur) ease-in-out infinite;
  border-radius: 0 1.5em 1em 3em / 0 1.5em 3.5em 3em;
  left: calc(100% - 0.75em);
  transform: rotate(-35deg);
  transform-origin: 0% 15%;
}

.gift__bow-right:before {
  clip-path: polygon(0 12%, 100% 42%, 100% 100%, 0 100%);
}

.gift__box,
.gift__lid,
.gift__lid-shadow {
  transform-origin: 50% 100%;
}

.gift__box {
  animation: boxBounce var(--dur) ease-in-out infinite;
  background: linear-gradient(var(--red2), var(--red2)) 50% 50% / 3.3em 100% no-repeat, var(--white2);
  border-radius: 1.5em;
  bottom: 0.5em;
  left: 3.3em;
  overflow: hidden;
  width: 11.4em;
  height: 9em;
}

.gift__lid,
.gift__lid-shadow {
  border-radius: 1em;
  width: 13em;
  height: 3.3em;
}

.gift__lid {
  animation: lidBounce var(--dur) ease-in-out infinite;
  background: linear-gradient(var(--red1), var(--red1)) 50% 50% / 3.3em 100% no-repeat, var(--white1);
  bottom: 8.7em;
  left: 2.5em;
}

.gift__lid-shadow {
  animation: lidShadowBounce var(--dur) ease-in-out infinite;
  background-color: hsla(0, 0%, 0%, 0.1);
  top: -1.5em;
  left: -1em;
}

.gift__star {
  animation: starRotateCW var(--dur) ease-in infinite;
  background-color: var(--white1);
  clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
  transform: scale(0);
}

.gift__star--2,
.gift__star--4,
.gift__star--5 {
  animation-name: starRotateCCW;
}

.gift__star--1 {
  animation-delay: calc(var(--dur) * 0.5);
  top: 0;
  left: 12.5em;
  width: 1.5em;
  height: 1.5em;
}

.gift__star--2 {
  animation-delay: calc(var(--dur) * 0.125);
  top: 2em;
  left: 10em;
  width: 1.75em;
  height: 1.75em;
}

.gift__star--3 {
  animation-delay: calc(var(--dur) * 0.25);
  top: 8em;
  left: 0;
  width: 1.25em;
  height: 1.25em;
}

.gift__star--4 {
  top: 10.5em;
  right: 0;
  width: 1.75em;
  height: 1.75em;
}

.gift__star--5 {
  animation-delay: calc(var(--dur) * 0.375);
  top: 12em;
  left: 1.8em;
  width: 2.5em;
  height: 2.5em;
}

/* Animations */
@keyframes bowBounce {

  from,
  50% {
    transform: translateY(0) rotate(0);
  }

  62.5% {
    animation-timing-function: ease-in;
    transform: translateY(75%) rotate(0);
  }

  68.75% {
    animation-timing-function: ease-out;
    transform: translateY(-37.5%) rotate(15deg);
  }

  75% {
    animation-timing-function: ease-in-out;
    transform: translateY(-150%) rotate(5deg);
  }

  87.5% {
    transform: translateY(65%) rotate(-3deg);
  }

  to {
    transform: translateY(0) rotate(0);
  }
}

@keyframes bowLeftPivot {

  from,
  50% {
    transform: rotate(35deg);
  }

  62.5% {
    transform: rotate(45deg);
  }

  75% {
    transform: rotate(30deg);
  }

  87.5% {
    transform: rotate(45deg);
  }

  to {
    transform: rotate(35deg);
  }
}

@keyframes bowRightPivot {

  from,
  50% {
    transform: rotate(-35deg);
  }

  62.5% {
    transform: rotate(-45deg);
  }

  75% {
    transform: rotate(-34deg);
  }

  87.5% {
    transform: rotate(-45deg);
  }

  to {
    transform: rotate(-35deg);
  }
}

@keyframes boxBounce {

  from,
  50% {
    transform: translateY(0) scale(1, 1);
  }

  62.5% {
    transform: translateY(4%) scale(1.12, 0.89);
  }

  75% {
    transform: translateY(-11%) scale(0.92, 1.1);
  }

  87.5% {
    transform: translateY(0) scale(1.05, 0.9);
  }

  to {
    transform: translateY(0) scale(1, 1);
  }
}

@keyframes lidBounce {

  from,
  50% {
    transform: translateY(0) scale(1, 1) rotate(0);
  }

  62.5% {
    animation-timing-function: ease-in;
    transform: translateY(45%) scale(1.14, 0.95) rotate(0);
  }

  68.75% {
    animation-timing-function: ease-out;
    transform: translateY(-22.5%) scale(1.05, 1.03) rotate(15deg);
  }

  75% {
    animation-timing-function: ease-in-out;
    transform: translateY(-90%) scale(0.96, 1.1) rotate(5deg);
  }

  87.5% {
    transform: translateY(30%) scale(1.12, 0.93) rotate(-3deg);
  }

  to {
    transform: translateY(0) scale(1, 1) rotate(0);
  }
}

@keyframes lidShadowBounce {

  from,
  50% {
    transform: translateY(0) scale(1, 1) rotate(0);
  }

  62.5% {
    animation-timing-function: ease-in;
    transform: translateY(10%) scale(1.14, 0.95) rotate(0);
  }

  68.75% {
    animation-timing-function: ease-out;
    transform: translateY(-10%) scale(1.05, 1.03) rotate(15deg);
  }

  75% {
    animation-timing-function: ease-in-out;
    transform: translateY(-30%) scale(0.96, 1.1) rotate(5deg);
  }

  87.5% {
    transform: translateY(10%) scale(1.12, 0.93) rotate(-3deg);
  }

  to {
    transform: translateY(0) scale(1, 1) rotate(0);
  }
}

@keyframes starRotateCW {
  from {
    transform: scale(0) rotate(0);
  }

  25% {
    animation-timing-function: ease-out;
    transform: scale(1) rotate(0.25turn);
  }

  50%,
  to {
    transform: scale(0) rotate(0.5turn);
  }
}

@keyframes starRotateCCW {
  from {
    transform: scale(0) rotate(0);
  }

  25% {
    animation-timing-function: ease-out;
    transform: scale(1) rotate(-0.25turn);
  }

  50%,
  to {
    transform: scale(0) rotate(-0.5turn);
  }
}

/* End - Gift Icon Anime */

/* Start - Schedule Card */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.main-interface {
  overflow-y: scroll;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  padding: 5px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xl);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(var(--card-bg), 0.8);
  position: relative;
  z-index: 10;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.logo-container h1 {
  font-size: 24px;
  font-weight: 700;
}

.logo-icon {
  width: 32px;
  height: 32px;
  color: var(--primary-color);
}

.sidebar-section h1 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-controls {
  display: flex;
  gap: var(--spacing-md);
}

.header-button {
  display: flex;
  align-items: center;
  color: #000;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-weight: 500;
  transition: all var(--transition-speed);
}

.header-button:hover {
  background-color: rgba(var(--primary-color), 0.1);
}

.header-button svg {
  width: 16px;
  height: 16px;
}

.dark-theme .header-button {
  color: var(--primary-color);
  background-color: #53a2d729;
}

.content-schedule-card {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar-schedule-card {
  width: 250px;
  padding: var(--spacing-md);
  border-right: 1px solid var(--border-color);
  background-color: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
  transition: width var(--transition-speed);
}

.dark-theme .sidebar-schedule-card {
  width: 250px;
  padding: var(--spacing-md);
  border-right: 1px solid rgb(77 128 251 / 23%);
  background-color: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
  transition: width var(--transition-speed);
}

.sidebar-section {
  margin-bottom: var(--spacing-xl);
}

.sidebar-section h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-md);
  background: #4f74ff2e;
  border-radius: 8px;
  padding: 5px;
}

.primary-button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  border: none;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 10px rgba(0, 122, 255, 0.2);
  width: auto;
  text-align: center;
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
}

.secondary-button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.secondary-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dark-theme .secondary-button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: transparent;
  color: #000000;
  border: 1px solid rgb(76 104 183 / 39%);
  border-radius: var(--border-radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.danger-button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--danger-color);
  color: white;
  border: none;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.danger-button:hover {
  background-color: rgba(255, 59, 48, 0.9);
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  color: #333;
  background-color: #dddddd;
  cursor: pointer;
  transition: background-color var(--transition-speed);
  color: var(--text-primary);
}

.icon-button:hover {
  color: #000;
  background-color: rgba(0, 0, 0, 0.08);
}

.icon-button svg {
  width: 18px;
  height: 18px;
}

.dark-theme .icon-button:hover {
  color: #000;
  background-color: rgba(255, 255, 255, 0.1);
}

.cards-container {
  flex: 1;
  padding: var(--spacing-lg);
  overflow-x: hidden;
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  align-content: start;
}

.changelog-card {
  background-color: var(--card-bg);
  border: 1px solid #c8ebff;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 10px rgb(71 134 255 / 29%);
  padding: var(--spacing-lg);
  position: relative;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  cursor: pointer;
  overflow: hidden;
}

.changelog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px var(--shadow-color);
}

.changelog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--football-color);
  transition: height 0.3s ease;
}

.changelog-card[data-type="onlinegaming"]::before {
  background: var(--onlinegaming-color);
}

.changelog-card[data-type="livestreaming"]::before {
  background: var(--livestreaming-color);
}

.changelog-card[data-type="livechat"]::before {
  background: var(--livechat-color);
}

.dark-theme .changelog-color {
  background-color: #e3e3e39c;
}

.card-title {
  color: #000;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

.card-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-lg);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-md);
}

.card-type {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.card-type.football {
  background-color: rgba(0, 122, 255, 0.1);
  color: var(--football-color);
}

.card-type.onlinegaming {
  background-color: rgba(255, 59, 48, 0.1);
  color: var(--onlinegaming-color);
}

.card-type.livestreaming {
  background-color: rgb(52 199 89 / 22%);
  color: #007d22;
}

.card-type.livechat {
  background-color: rgb(52 199 89 / 22%);
  color: #007d22;
}

.card-type.custom {
  background-color: rgba(175, 82, 222, 0.1);
  color: #af52de;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
}

.card-tag {
  padding: 2px 8px;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.07);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 500;
}

.dark-theme .card-tag {
  color: #000000;
  background-color: rgb(45 0 81 / 19%);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  grid-column: 1 / -1;
  height: 100%;
  min-height: 400px;
}

.empty-icon {
  width: 64px;
  height: 64px;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

.empty-state h2 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.empty-state p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  max-width: 400px;
}

.card-editor {
  position: fixed;
  top: 0;
  right: -450px;
  width: 450px;
  height: 100%;
  background-color: var(--card-bg);
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
  z-index: 100;
  transition: right var(--transition-speed);
  overflow-y: auto;
}

.card-editor.active {
  right: 0;
}

.dark-theme .card-editor {
  background-color: #ebeff3;
}

/* .dark-theme input[type="text"],
textarea,
select {
  color: #000000 !important;
  background: #fff !important;
} */

.dark-theme .icon-button {
  color: #333;
  background-color: #dddddd;
}

.dark-theme .icon-button:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.editor-content {
  padding: var(--spacing-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.form-group {
  margin-bottom: var(--spacing-sm);
  display: flex;
  flex-direction: column;
}

.button-group {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--spacing-md);
}

.form-row {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input[type="text"],
textarea,
select {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: rgba(0, 0, 0, 0.02);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.dark-theme input[type="text"],
.dark-theme textarea,
.dark-theme select {
  background-color: rgba(255, 255, 255, 0.05);
}

.form-group input[type="text"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
  height: 100%;
}

.form-group input[type="color"] {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.form-group input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.form-group input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.color-presets {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.color-preset {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.color-preset:hover {
  transform: scale(1.1);
}

.preset-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.preset-item {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  background-color: rgba(0, 0, 0, 0.02);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-weight: 500;
  transition: all var(--transition-speed);
  text-align: left;
}

.dark-theme .preset-item {
  background-color: rgb(27 44 115 / 60%);
}

.dark-theme .card-description {
  color: var(--text-tertiary);
}

.preset-item:hover {
  background-color: rgba(var(--primary-color), 0.1);
  border-color: var(--primary-color);
}

.dark-theme .preset-item {
  background-color: rgba(var(--primary-color), 0.5);
  border-color: var(--primary-color);
  color: #000;
}

.dark-theme .preset-item:hover {
  background-color: rgba(var(--primary-color), 0.1);
  border-color: var(--primary-color);
  color: #000;
}

.preset-item[data-preset="football"] {
  border-left: 3px solid var(--football-color);
}

.preset-item[data-preset="onlinegaming"] {
  border-left: 3px solid var(--onlinegaming-color);
}

.preset-item[data-preset="livestreaming"] {
  border-left: 3px solid var(--livestreaming-color);
}

.preset-item[data-preset="livechat"] {
  border-left: 3px solid var(--livechat-color);
}

.custom-type-group {
  display: none;
}

.export-overlay,
.import-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-speed), visibility var(--transition-speed);
}

.export-overlay.active,
.import-overlay.active {
  opacity: 1;
  visibility: visible;
}

.export-panel,
.import-panel {
  width: 600px;
  max-width: 90%;
  background-color: #fff;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--transition-speed), opacity var(--transition-speed);
}

.export-overlay.active .export-panel,
.import-overlay.active .import-panel {
  transform: translateY(0);
  opacity: 1;
}

.export-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.export-content,
.import-panel {
  padding: var(--spacing-lg);
}

#export-code,
#import-code {
  width: 100%;
  min-height: 150px;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: rgba(0, 0, 0, 0.02);
  color: var(--text-primary);
  font-family: monospace;
  font-size: 0.875rem;
  margin: var(--spacing-md) 0;
  resize: vertical;
}

.dark-theme #export-code,
.dark-theme #import-code {
  background-color: rgba(255, 255, 255, 0.05);
}

.shared-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  display: none;
}

.shared-changelog {
  max-width: 800px;
  width: 100%;
  margin-bottom: var(--spacing-xl);
}

.shared-footer {
  text-align: center;
}

.fade-in {
  animation: fadeIn 0.5s forwards;
}

.slide-up {
  animation: slideUp 0.5s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .sidebar-schedule-card {
    width: 200px;
  }

  .card-editor {
    width: 100%;
    right: -100%;
  }

  .form-row {
    flex-direction: column;
  }

  .editor-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .content-schedule-card {
    flex-direction: column;
  }

  .sidebar-schedule-card {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  header {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .header-controls {
    width: 100%;
    justify-content: space-between;
  }
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(103 103 103 / 20%);
}

.dark-theme .glass-card {
  background: rgb(234 246 255 / 70%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-theme .card-content h3.card-title {
  color: #000;
}

.neumorph {
  box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(255, 255, 255, 0.1);
}

.dark-theme .neumorph {
  box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(255, 255, 255, 0.1);
  background: #e6efff;
}

/* Start - Daily Event Schedule */
.daily-event-sch h4 {
  color: #9b5de5;
  font-size: 21px;
  font-weight: 700;
  margin: 20px 0;
}

@media (min-width: 576px) {

  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }
}

@media (min-width: 576px) {

  .mt-sm-3,
  .my-sm-3 {
    /* margin-top: 1rem !important; */
  }
}

/* Style for the popup */
.overlaypop {
  position: fixed;
  top: 0;
  left: 0;
  width: 2500px;
  height: 1080px;
  background: rgba(0, 0, 0, 0.55);
  z-index: -1;
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
}

@media only screen and (min-width: 1400px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  .overlaypop {
    display: block;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .overlaypop.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

.popup h2 {
  color: #fff;
  text-align: center;
}

.popup button {
  background-color: #fff;
  margin-top: 10px;
  width: 100%;
  padding: 5px;
  border: 2px solid #416eaf;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Popup-MSG */
/* Popup notification */
.popupmsg {
  position: fixed;
  right: 15px;
  bottom: 65px;
  background: rgb(4 42 187 / 77%);
  color: #e6eef6;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  max-width: 260px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: flex;
  align-items: flex-start;
  gap: initial;
  backdrop-filter: blur(6px);
  z-index: 99999;
}

.popupmsg.show {
  opacity: 1;
  transform: translateY(0);
}

.popupmsg button {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  margin-left: auto;
  position: relative;
  top: -10px;
  right: -20px;
  border: 0;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  /* transition: color 0.2s; */
}

.popupmsg button:hover {
  color: #fff;
}

/* End - Schedule Card */

/* Start - All Animations */
/* animation Button css End */
.btn-running {
  display: inline-block;
  place-items: center;
  background: #9cd8ff;
  color: #6f6f6f;
  text-decoration: none;
  padding: 10px 0px;
  border-radius: 10px;
  text-transform: uppercase;
  font-size: 15px;
  line-height: unset;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  text-align: left;
  text-indent: 19px;
  z-index: 0;
}

.btn-running::before {
  content: "";
  position: absolute;
  margin: auto;
  inset: 0;
  width: 130%;
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
  height: 60px;
  animation: rotBGimg 4s linear infinite;
  transition: all 0.2s linear;
  z-index: -1;
}

.btn-running::after {
  content: "";
  position: absolute;
  background: #ffffff;
  inset: 1px;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.btn-running span {
  position: relative;
  z-index: 1;
}

.btn-running:hover {
  color: #1b1e20;
  background: #ffffff;
}

.btn-running:hover:after {
  background: #ffffff;
}

@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* animation Button css End */
/* End - All Animations */

/* Start - Draggable-List */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

#columns-draglist {
  list-style-type: none;
}

.column-draglist {
  width: 162px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: left;
  cursor: move;
}

/* .column-draglist header {
  height: 20px;
  width: 150px;
  color: black;
  background-color: #ccc;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  border-radius: 10px;
  border: 2px solid #666666;
} */
.column-draglist.dragElem {
  opacity: 0.4;
}

.column-draglist.overdrag {
  border: 2px dashed #000;
  border-top: 2px solid blue;
}

.column-draglist:after {
  content: "drag me";
  color: #0072ff;
  right: 7px;
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  cursor: pointer;
  line-height: 5;
  transition: all 200ms;
  transition-timing-function: cubic-bezier(0.48, 0.72, 0.62, 1.5);
  transform: translateX(120%);
  opacity: 0;
}

.column-draglist:hover:after {
  opacity: 1;
  transform: translate(-30px);
}

.overdrag {
  transform: scale(1.1, 1.1);
}

.cursor-pointer {
  cursor: pointer;
}

/* End - Draggable List */

/* Upload Area */
.upload-area {
  width: 100%;
  /* max-width: 25rem; */
  background-color: var(--clr-white);
  box-shadow: 0 10px 60px rgb(218 229 255 / 35%);
  border: 2px solid rgb(237 244 255);
  border-radius: 24px;
  padding: 2rem 1.875rem 5rem 1.875rem;
  margin: 0.625rem;
  text-align: center;
}

.upload-area--open {
  /* Slid Down Animation */
  animation: slidDown 500ms ease-in-out;
}

@keyframes slidDown {
  from {
    height: 28.125rem;
    /* 450px */
  }

  to {
    height: 35rem;
    /* 560px */
  }
}

/* Header */
.upload-area__header {}

.upload-area__title {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
  font-size: 0.9375rem;
  color: var(--clr-light-gray);
  margin-top: 0;
}

.upload-area__tooltip {
  position: relative;
  color: var(--clr-light-blue);
  cursor: pointer;
  transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
  color: var(--clr-blue);
}

.upload-area__tooltip-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -125%);
  min-width: max-content;
  background-color: var(--clr-white);
  color: var(--clr-blue);
  border: 1px solid var(--clr-light-blue);
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: none 300ms ease-in-out;
  transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
  opacity: 1;
  visibility: visible;
}

/* Drop Zoon */
.upload-area__drop-zoon {
  position: relative;
  height: 11.25rem;
  /* 180px */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 2px dashed var(--clr-light-blue);
  border-radius: 15px;
  margin-top: 2.1875rem;
  cursor: pointer;
  transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
  border-color: var(--clr-blue);
}

.drop-zoon__icon {
  display: flex;
  font-size: 3.75rem;
  color: var(--clr-blue);
  transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
  font-size: 0.9375rem;
  color: var(--clr-light-gray);
  margin: 0;
  margin-top: 0.625rem;
  transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
  opacity: 0.7;
}

.drop-zoon__loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  color: var(--clr-light-blue);
  z-index: 10;
}

.drop-zoon__preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3125rem;
  border-radius: 10px;
  display: none;
  z-index: 1000;
  transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
  opacity: 0.8;
}

.drop-zoon__file-input {
  display: none;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
  border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
  opacity: 0.7;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--Uploaded {}

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
  display: none;
}

/* File Details Area */
.upload-area__file-details {
  height: 0;
  visibility: hidden;
  opacity: 0;
  text-align: left;
  transition: none 500ms ease-in-out;
  transition-property: opacity, visibility;
  transition-delay: 500ms;
}

/* (duploaded-file--open) Modifier Class */
.file-details--open {
  height: auto;
  visibility: visible;
  opacity: 1;
}

.file-details__title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-light-gray);
  margin-top: 10px;
}

/* Uploaded File */
.uploaded-file {
  display: flex;
  align-items: center;
  padding: 0.625rem 0;
  visibility: hidden;
  opacity: 0;
  transition: none 500ms ease-in-out;
  transition-property: visibility, opacity;
}

/* (duploaded-file--open) Modifier Class */
.uploaded-file--open {
  visibility: visible;
  opacity: 1;
}

.uploaded-file__icon-container {
  position: relative;
  margin-right: 0.3125rem;
}

.uploaded-file__icon {
  font-size: 3.4375rem;
  color: var(--clr-blue);
}

.uploaded-file__icon-text {
  position: absolute;
  top: 1.5625rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--clr-white);
}

.uploaded-file__info {
  position: relative;
  top: -0.3125rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.uploaded-file__info::before,
.uploaded-file__info::after {
  content: '';
  position: absolute;
  bottom: -0.9375rem;
  width: 0;
  height: 0.5rem;
  background-color: #ebf2ff;
  border-radius: 0.625rem;
}

.uploaded-file__info::before {
  width: 100%;
}

.uploaded-file__info::after {
  width: 100%;
  background-color: var(--clr-blue);
}

/* Progress Animation */
.uploaded-file__info--active::after {
  animation: progressMove 800ms ease-in-out;
  animation-delay: 300ms;
}

@keyframes progressMove {
  from {
    width: 0%;
    background-color: transparent;
  }

  to {
    width: 100%;
    background-color: var(--clr-blue);
  }
}

.uploaded-file__name {
  width: 100%;
  max-width: 6.25rem;
  /* 100px */
  display: inline-block;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uploaded-file__counter {
  font-size: 1rem;
  color: var(--clr-light-gray);
}

@media (min-width: 576px) {
  .mb-sm-0 {
    margin-bottom: 0 !important;
    width: 100%;
  }
}

.form-group2 {
  margin-bottom: 1rem;
  padding: 0px 20px 0px 40px;
}

.form-group2 label {
  display: inline-block;
  font-size: 16px;
  margin-bottom: 5px;
}

.card-article-com {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-border-width: 0;
  --bs-card-border-color: rgba(0, 0, 0, .125);
  --bs-card-border-radius: 0.75rem;
  --bs-card-box-shadow: 0 20px 27px 0 rgba(0, 0, 0, .05);
  --bs-card-inner-border-radius: 0.75rem;
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: #fff;
  --bs-card-bg: #fff;
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}

.card-article-com {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 0 solid rgba(0, 0, 0, 0.125);
  border-radius: 1rem;
}

.card-article-com {
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05);
  border: 0.0625rem solid rgb(222, 226, 230);
}

.card-article-com .card-header {
  padding: 1.5rem;
  min-width: 95%;
}

.card-header:first-child {
  border-radius: 1rem 1rem 0 0;
}

.card-article-com .card-body,
.card-article-com .card-header {
  padding: 1.5rem;
}

.card-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  background-color: #fff;
  border-bottom: 0 solid rgba(0, 0, 0, 0.125);
}

.card-article-com .card-body {
    padding: 1.5rem;
}

/* Start - RichText-Editor */
#document {
  margin: 25px 0;
  padding: 10px;
  font-size: 15px;
  line-height: 1.4;
  border-radius: 5px;
  border: 2px solid transparent;
  outline: none;
}

#document:hover,
#document:focus {
  border-color: rgba(0, 0, 255, 0.4);
}

#document li {
  margin-bottom: 10px;
}

#document p img {
  float: left;
  max-width: 250px;
  width: 100%;
  height: auto;
  margin: 5px 5px 5px 0;
}

#document p img.right {
  float: right;
  margin: 5px 0 5px 5px;
}

font[size='1'] {
  font-size: 10px;
}

font[size='2'] {
  font-size: 12px;
}

font[size='3'] {
  font-size: 14px;
}

font[size='4'] {
  font-size: 16px;
}

font[size='5'] {
  font-size: 18px;
}

font[size='6'] {
  font-size: 21px;
}

font[size='7'] {
  font-size: 26px;
}

.editor {
  border: 1px solid #999;
  border-radius: 5px;
  padding: 10px;
  background: #eee;
}

.editor .hide {
  display: none;
}

.editor .divider {
  margin: 0 4px;
  display: inline-block;
}

.editor .divider:after {
  content: "|";
  color: #666;
}

.editor button {
  width: 25px;
  text-transform: uppercase;
  font-weight: 700;
}

.editor button[data-action='italic'] {
  font-style: italic;
}

.editor button[data-action='underline'] {
  text-decoration: underline;
}

.editor button:hover {
  background: #ccc;
  color: #fff;
}

.editor button,
.editor select {
  background: #fff;
  border: 1px solid #666;
  border-radius: 5px;
  height: 25px;
  margin: 5px 2px;
}

.editor button:hover,
.editor select:hover {
  cursor: pointer;
}

.context-menu {
  background: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  padding: 15px;
  border: 1px solid #333;
}

.editor .form-group input[type="text"], .editor
textarea, .editor
select {
  width: auto;
  padding: unset;
  font-size: 14px !important;
  font-family: inherit;
  color: #000 !important;
  background: #f7f7f7 !important;
  border: 1px solid #666;
  border-radius: 5px;
  /* height: 25px; */
  margin: 5px 2px;
}

/* End - RichText-Editor */

/* Start - Save Post */
.saveButton {
  background-color: #1596ff;
  /* padding: 15px 30px; */
  text-decoration: none;
  color: #EEE;
  /* text-shadow: 0 -1px #222; */
  border-radius: 4px;
  text-transform: uppercase;
  font-family: "Helvetica Neu", Arial, san-serif;
  font-size: 14px;
}

.saveButton:hover {
  background-color: #777;
  color: #DDD;
  text-shadow: 0 -1px #555;
}

.successfully-saved {
  display: none;
  color: #1B7C18;
  border-radius: 5px;
  border: 2px solid #10bd0a;
  padding: 0.5em 0.75em;
  background: #9affaf;
  width: 25%;
  margin-top: -50px;
  float: right;
  right: 125px;
  position: absolute;
}

.successfully-saved.show {
  display: block;
}

.successfully-saved i {
  padding-right: 5px;
  line-height: 1.2;
}

/* End - Save Post */
select#no-appearance {
  height: 45px;
  width: 110px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Start - Language Switch */
.switch {
  position: relative;
  display: flex;
  margin: 5px 5px;
}

.switch>span {
  position: absolute;
  top: 10px;
  pointer-events: none;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  width: 50%;
  text-align: center;
}

input.check-toggle-round-flat:checked~.off {
  color: #FF737E;
}

input.check-toggle-round-flat:checked~.on {
  color: #fff;
}

.switch>span.on {
  left: 0;
  padding-left: 11px;
  color: #FF737E;
}

.switch>span.off {
  right: 0;
  padding-right: 4px;
  color: #fff;
}

.check-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.check-toggle+label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.check-toggle-round-flat+label {
  padding: 2px;
  width: 97px;
  height: 35px;
  background-color: #e5e5e5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

input.check-toggle-round-flat+label:before,
input.check-toggle-round-flat+label:after {
  display: block;
  position: absolute;
  content: "";
}

input.check-toggle-round-flat+label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #5c60f5;
  -webkit- -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

input.check-toggle-round-flat+label:after {
  top: 4px;
  left: 4.5px;
  bottom: 4px;
  width: 43px;
  background-color: #fff;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  -webkit-transition: margin 0.2s;
  -moz-transition: margin 0.2s;
  -o-transition: margin 0.2s;
  transition: margin 0.2s;
}

input.check-toggle-round-flat:checked+label {}

input.check-toggle-round-flat:checked+label:after {
  margin-left: 44px;
}

.header-right-lang {
  position: absolute;
  display: block;
  float: right;
  right: 67px;
}

/* End - Language Switch */

/* Start - Error-404 */
.body-error-404 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Poppins", sans-serif;
  background: #fff;
  overflow: hidden;
}

.box-info-404 {
  display: flex;
  flex-flow: column;
  justify-content: center;
  max-width: 253px;
  gap: 5px;
}

.title-error {
  color: #1a1d1f;
  font-size: 52px;
  font-weight: 600;
}

.box-info-404 p.description-error {
  color: #a7acb0;
  font-size: 17px;
}

.go-home {
  color: white;
  font-size: 0.86rem;
  line-height: 1.7;
}

svg.arrow-btn-error-404 {
  height: 24px;
  top: 40px;
  margin-left: 70px;
  position: relative;
  z-index: 9;
}

@media (max-width: 767px) {
  svg.arrow-btn-error-404 {
    height: 24px;
    width: 165px;
    top: 30px;
    margin-left: -3px;
    position: relative;
    display: block;
    z-index: 9;
  }
}

.box-btn-404 {
  display: flex;
  background-color: #1a1d1f;
  height: 41px;
  width: 131px;
  border-radius: 100px;
  padding: 0 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 2px;
  margin-top: 20px;
}

.container-error404 {
  display: flex;
  width: fit-content;
  height: fit-content;
  gap: 50px;
}

.img-error {
  width: 300px;
  height: fit-content;
}

.img-error-anime {
  width: fit-content;
  height: fit-content;
}

.box-info-404 a {
  text-decoration: none;
  display: block;
  width: 100%;
}


@media screen and (max-width: 741px) {
  .container-error404 {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 10px;
  }

  .box-info-404 {
    align-items: center;
  }

  .box-info-404 p.description-error {
    text-align: center;
  }

  .img-error {
    width: 223px;
  }

  .img-error-anime {
    width: 353px;
  }

  .box-info-404 p.description-error {
    font-size: 15px;
  }

  .title-error {
    font-size: 49px;
  }

  .box-btn-404 {
    height: 36px;
    width: 128px;
  }
}

/* End - Error-404 */

/* Start - Sign Out Page */
.text-dark-blue {
  color: #2a5298;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.text-underline {
  cursor: pointer;
}

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

/* Spacing ----------------------------------------- */
.margin-top {
  margin-top: 1rem;
}

.margin-top-1 {
  margin-top: 1.4rem;
}

.margin-top-2 {
  margin-top: 2.4rem;
}

.margin-bottom-1 {
  color: #2a5298;
  font-size: 29px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.4rem;
}

.margin-inline {
  margin-inline: auto;
}

/* Logo ------------------------------------------ */
.logo {
  margin-top: 0.4rem;
  width: 8rem;
}

/* Nav ------------------------------------------- */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  /* padding: 1.4rem 3.2rem; */
  /* border: 1px solid #ddd; */
  z-index: 2;
}

.nav-1 {
  justify-content: space-between;
}

/* Container ------------------------------------ */
.redirected {
  display: grid;
  min-height: 69vh;
  place-content: center;
}

.logout-container {
  padding: 3rem;
  max-width: 30rem;
  border-radius: 1rem;
  background: white;
  box-shadow: 0px 12px 8px -8px rgb(145 158 171 / 42%), 0px 0px 2px 0px rgb(145 158 171 / 57%);
}

.logout-container a {
  text-decoration: unset;
}

/* Footer ----------------------------------------- */
.footer-signout {
  position: relative;
  padding: 3.5rem;
  bottom: -150px;
}

.footer-signout a {
  text-decoration: unset;
}

.footer-container {
  display: grid;
  max-width: 50rem;
  gap: 1.6rem;
  color: gray;
}

/* .footer-transparent {
  background-color: var(--color-footer);
} */
.links {
  display: flex;
  line-height: 1.7;
  justify-content: space-between;
  gap: 2rem;
}

/* Media Query ------------------------------------ */
/* Nav Media Query */
@media (320px <=width <=640px) {
  .nav {
    padding-inline: 2rem;
    border-bottom: 1px solid var(--color-flag);
  }

  .logo {
    width: 6rem;
  }
}

/* Container */
@media (320px <=width <=800px) {
  body {
    background: white;
  }

  /* .redirected {
    min-height: 100%;
  } */
}

@media (320px <=width <=450px) {
  .logout-container {
    padding-inline: 2rem;
  }
}

/* End - Sign Out Page */

/* Start - Language Switcher */
#en {
  display: none;
}

.button_lang {
  background-color: #ededed;
  color: #000000;
  padding: 8px 20px;
  border-radius: 5px;
  -webkit-transition: background-color .3s ease-in-out;
  -moz-transition: background-color .3s ease-in-out;
  -o-transition: background-color .3s ease-in-out;
  -ms-transition: background-color .3s ease-in-out;
  transition: background-color .3s ease-in-out;
  cursor: pointer;
}

.button_lang:hover,
.current_lang {
  background-color: #5c60f5;
  color: #FFF;
  -webkit-transition: background-color .3s ease-in-out;
  -moz-transition: background-color .3s ease-in-out;
  -o-transition: background-color .3s ease-in-out;
  -ms-transition: background-color .3s ease-in-out;
  transition: background-color .3s ease-in-out;
  cursor: pointer;
}

.switch ul li {
  width: auto;
  display: inline;
}

/* End - Language Switcher */

/* Start - Video Upload */
#custom-uploadbutton {
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0px;
  border: 0px;
  margin-right: 10px;
  cursor: pointer;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.02857em;
  min-width: 64px;
  display: inline-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  user-select: none;
  transition: all 150ms ease-in 0s;
  min-height: 2.5rem;
  box-shadow: rgba(0, 0, 0, 0.11) 0rem 0.25rem 0.4375rem -0.0625rem, rgba(0, 0, 0, 0.07) 0rem 0.125rem 0.25rem -0.0625rem;
  padding: 0.75rem 1.5rem;
  background-image: linear-gradient(310deg, rgb(104 247 228), rgb(0 97 74));
  background-position-y: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  color: rgb(255, 255, 255);
  background-size: 150% !important;
  background-position-x: 25% !important;
  overflow: hidden;
}

#custom-uploadbutton:hover {
  background-color: #00b28f;
}

#custom-uploadtext {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
  position: absolute;
  display: block;
  /* float: left; */
  left: 27px;
}

.drop-zone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}

.drop-zone.highlight {
  background-color: #eaf6ff;
}

#preview {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.preview-item {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-item img,
.preview-item video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* End - Video Upload */
.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn-upload {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type="file"] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.preview-video {
  margin-top: 5px;
  width: 170px;
  height: 140px;
  border-radius: 10px;
}

/* Start - Article-Dropdown-Menu */
.ds_select,
.ds_select * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.ds_placeholder {
  padding: 12px 10px;
  position: relative;
  height: 50px;
  z-index: 2;
}

.ds_select {
  display: inline-block;
  position: relative;
  line-height: 1;
  width: 150px;
  max-height: 40px;
  padding: 0px;
  border: 2px solid #337fed;
  background: #ffffff;
  color: #444444;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  outline: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.ds_select:before,
.ds_select:after {
  content: "\25B2";
  position: absolute;
  right: 10px;
  top: 12px;
  font-size: 7px;
}

.ds_select:after {
  content: "\25BC";
  top: 20px;
}

.ds_select:hover,
.ds_select.open {
  border-color: #337fed;
  rgb(0, 86, 207)
}

.ds_select.open {
  max-height: 600px;
}

.ds_select .ds_label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ds_select .ds_list {
  margin-top: -30px;
  opacity: 0;
  width: inherit;
  z-index: 1;
  padding: 0;
  transition: all 0.2s;
}

.ds_select.open .ds_list {
  opacity: 1;
  margin-top: 0px;
}

.ds_select .ds_list li a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  position: relative;
  padding: 10px 10px;
  list-style-type: none;
  color: #999;
  text-decoration: none;
}

.ds_select li a:hover {
  background: #eee;
  color: #000;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
}

.grid-item {
  width: auto;
  height: auto;
}

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

/* End - Article-Dropdown-Menu */

/* Start - Video-Listing-Filter */
.uol-section {
  margin-bottom: 50px;
}

.uol-input-cnt {
  display: block;
  margin-bottom: 30px;
}

.uol-input-cnt:last-child {
  margin-right: 0;
}

.uol-section--primary {
  padding: 50px 0;
  background-color: #002147;
  color: #fff;
}

.p-lr-20 {
  padding: 0 20px;
}

.uol-label {
  display: flex;
  font-size: 15px;
  line-height: normal;
  font-family: 'Helvetica', sans-serif;
  margin: 10px 10px 0;
}

.visually-hidden {
  width: 0;
  height: 0;
  clip: rect(0, 0, 0, 0);
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.uol-input {
  width: 100%;
  max-width: 100%;
  font-size: 16px;
  line-height: 20px;
  font-family: 'Helvetica', sans-serif;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #000;
  padding: 8px 10px;
  pointer-events: all;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: inline-block;
}

.uol-h1 {
  font-size: 44px;
  line-height: 48px;
  font-family: Georgia, serif;
  font-weight: normal;
  margin-bottom: 20px;
}

.uol-t1 {
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 10px;
  font-family: 'Helvetica', sans-serif;
}

.uol-h1,
.uol-t1 {
  margin-top: 0;
}

.grid {
  grid-auto-flow: dense;
  list-style: none;
  max-width: unset;
  margin: 50px auto;
  display: grid;
  grid-gap: 30px;
  justify-items: center;
}

.tile {
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.video_cnt {
  overflow: hidden;
  max-height: 385px;
  padding-bottom: 56.25%;
  background-color: #000;
}

.tile .video_cnt {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tile-half .video_cnt {
  background-size: cover;
}

.tile {
  cursor: pointer;
}

[data-videoCategory="live lounge"] .video_cnt {
  background-size: cover;
}

.video_cnt:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 33, 71, 60%);
  z-index: 1;
  transition: background-color 0.3s ease;
}

@media (min-width: 504px) {
  select.uol-input {
    width: auto;
  }

  .uol-input {
    width: 250px;
  }
}

@media (min-width: 756px) {
  .uol-input-cnt {
    margin-bottom: 0;
    margin-right: 30px;
    display: inline-block;
  }

  .grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, 370px);
  }

  .tile {
    max-width: 100%;
  }

  .tile.tile-half {
    grid-column: span 2;
  }

  .video_cnt {
    height: 100%;
    padding-bottom: 0;
  }
}

@media (min-width: 1280px) {
  .grid {
    grid-auto-fill: dense;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(4, 300px);
  }

  /*   .tile:nth-child(7n) {
    grid-column: 2 / span 2;
  }
  .tile:nth-child(6n) {
    grid-column: 1;
  } */
}

.video_img {
  object-fit: contain;
  object-position: center;
  height: 100%;
  width: 100%;
  display: block;
}

.video_title {
  margin: 0;
  max-width: 180px;
  font-size: 13px !important;
  line-height: 20px;
  color: #fff;
  font-family: inherit;
  font-weight: normal;
}

.video_caption {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 20px;
  max-width: 330px;
}

.video_cat {
  font-family: inherit;
  margin: 0 0 5px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0px;
  font-size: 18px;
  line-height: 20px;
  color: #fff;
}

.video_btn {
  border: 0;
  -moz-appearance: none;
  background: none;
  fill: #fff;
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;

  cursor: pointer;
  transition: opacity 0.3s ease;
}

.tile:hover .video_cnt:after {
  background-color: rgba(0, 33, 71, 0.1);
  transition: background-color 0.6s ease;
}

.tile:hover .video_btn {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.tile:hover .video_caption {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video_iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

.video.-js-fadeOutRemove::after,
.tile.-js-fadeOutRemove,
[class^="video_"].-js-fadeOutRemove {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.6s, opacity 0.6s ease-out;
}

.video.-js-fadeOutAdd::after,
.tile.-js-fadeOutAdd,
[class^="video_"].-js-fadeOutAdd {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0.6s, opacity 0.6s ease-out;
}

.filter-listing {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

/* End - Video-Listing-Filter */

/* Start - Add Tags */
.css-hht1n {
  display: flex;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  flex-wrap: unset;
  background: #FFFFFF;
  padding: 10px;
  border-radius: 30px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}

.btn-edit {
  color: #fff;
  background: linear-gradient(135deg, #76aaff, #a6d2ff) !important;
  border-color: #288bf5 !important;
}

.btn-edit:hover {
  color: #000;
  background-color: #add5ff;
  border-color: #007bff;
}

.btn-list {
  display: inline-block;
  font-weight: 700;
  color: unset;
  text-align: center;
  vertical-align: middle;
  width: auto;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.15rem 0.55rem;
  font-size: 1.05rem;
  border-radius: 0.3rem;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 10px !important;
}

.btn-danger {
  color: #fff;
  background-color: #f37874;
  border-color: #d43f3a;
}

.bg-primary-list-head {
  --bs-bg-opacity: 1;
  background-color: #c4dbf3 !important;
}

.bg-primary-list {
  --bs-bg-opacity: 1;
  background-color: #5c60f5 !important;
}

.bg-primary-list h3 {
  color: #fff;
}

.bg-primary-list span {
  color: #fff;
}

.bg-primary-list .table>:not(caption)>*>* {
  color: #9f9f9f;
}

/* Modal */
.modal-content-list {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 15px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

@media (min-width: 768px) {
  .modal-content-list {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
}

.modal-header-list {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  border-radius: 10px 10px 0 0;
}

.modal-header-list:before {
  display: table;
  content: " ";
}

.modal-header-list:after {
  clear: both;
}

.modal-header-list .close {
  margin-top: -2px;
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}

.modal-body-list {
  position: relative;
  display: block;
  padding: 15px;
  max-height: 80vh;
  overflow-y: auto;
}

@media (max-width: 767px) {
  .modal-body-list {
    max-height: 75vh;
  }
}

.modal-body-list button {
  float: right;
  position: relative;
  display: inline-block;
}

.form-group-list {
  margin-bottom: 15px;
}

.input-group-list {
  position: relative;
  display: table;
  border-collapse: separate;
}

button.close {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
}

/*overwrite bootstrap*/
.btn-list:focus {
  outline: none;
}

.input-group-addon:first-child {
  border-right: 0;
}

.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.input-group .form-control,
.input-group-addon,
.input-group-btn {
  display: table-cell;
}

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}

.has-success .input-group-addon {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #3c763d;
}

.has-success .form-control {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

[v-cloak] {
  display: none;
}

/*modal component style*/
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: flex;
align-items: center;
justify-content: center;
  transition: opacity .3s ease;
overflow-y: auto;
}

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-dialog-list {
  position: relative;
  width: auto;
  margin: 20px;
  max-width: 650px;
  width: 100%;
}

@media (min-width: 768px) {
  .modal-dialog-list {
    width: 600px;
    margin: 30px auto;
  }
}

/* #header {}
#main {}
#footer {} */
.pull-right {
  float: right !important;
  right: 30px;
  top: 30px;
  position: absolute;
}

.multiple-action {
  margin-left: 15px;
}

.filterbox {
  display: ruby;
  vertical-align: top;
  position: relative;
  zoom: 1;
}

.filterbox .dropdown-menu-list {
  padding: 0;
  left: auto;
  right: 0;
}

.dropdown-menu-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.search-list {
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  /* Fix for IE7 */
  *display: inline;
  /* Fix for IE7 */
  max-width: 260px;
}

.tables-bordered {
  border: 1px solid #ddd;
  margin-top: 60px;
}

@media (max-width: 480px) {
  .tables-xs-block tr th {
    display: none;
  }

  .tables-xs-block tr {
    display: block;
    position: relative;
  }

  .tables-xs-block tr td {
    display: block;
    text-align: left;
    overflow: hidden;
    margin-left: 30px;
    margin-right: 60px;
  }

  .tables-xs-block tr td[data-label]:before {
    content: attr(data-label);
    display: inline-block;
    font-weight: 700;
    min-width: 50px;
  }

  .tables-xs-block tr td:first-child,
  .tables-xs-block tr td:last-child {
    width: 30px;
    margin-left: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 0;
  }

  .tables-xs-block tr td:last-child {
    left: auto;
    right: 0;
    width: 60px;
  }
}

.list-group-item+.list-group-item input,
textarea {
  display: inline-flex;
  width: auto;
  padding: 10px;
  font-size: 1.1em;
}

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}

.input-group .form-control,
.input-group-addon,
.input-group-btn {
  display: table-cell;
}

.input-group .form-control:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* End - Add Tags */

/* Start - Chat Area */
.app-chat {
  display: flex;
  flex-direction: column;
  background-color: var(--theme-bg-light-blue);
  max-width: 1600px;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

.header-chat {
  height: 80px;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.wrapper-chat {
  width: 100%;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.conversation-area,
.detail-area {
  width: 340px;
  flex-shrink: 0;
}

.detail-area {
  border-left: 1px solid var(--border-color);
  margin-left: auto;
  padding: 30px 30px 0 30px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.chat-area {
  flex-grow: 1;
}

.search-bar {
  height: 50px;
  z-index: 3;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  border-radius: 15px;
}

.search-bar input {
  height: 100%;
  width: 100%;
  display: block;
  background-color: #ffffff;
  border: 1px solid #ddd;
  color: #000000;
  padding: 0 54px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 25px 48%;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 15px;
}

.search-bar input::placeholder {
  color: var(--input-chat-color);
}

.logo-chat {
  color: var(--theme-color);
  width: 38px;
  flex-shrink: 0;
}

.logo-chat svg {
  width: 100%;
}

.logo-thunder {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.25rem;
}

.logo-thunder-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0866ff, #00cdff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 10px 15px -3px rgb(137 190 255 / 60%), 0 4px 6px -2px rgb(161 189 239 / 73%);
  border: 1px solid #fff;
}

.logo-thunder span {
  font-family: 'Helvetica', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #0866ff;
  position: relative;
  display: inline-block;
}

.user-settings {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}

.user-settings>*+* {
  margin-left: 14px;
}

.dark-light {
  width: 22px;
  height: 22px;
  color: var(--settings-icon-color);
  flex-shrink: 0;
}

.dark-light svg {
  width: 100%;
  fill: transparent;
  transition: 0.5s;
}

.user-profile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.settings {
  color: var(--settings-icon-color);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.conversation-area {
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.msg-profile {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

.msg-profile.group {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--border-color);
}

.msg-profile.group svg {
  width: 60%;
}

.msg {
  display: flex;
  align-items: center;
  padding: initial;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}

/* .msg:hover {
  background-color: #8fbfff65;
}
.msg.active {
  background: var(--active-conversation-bg);
  border-left: 4px solid var(--theme-color);
} */
.msg.online:before {
  content: "";
  position: absolute;
  background-color: #23be7e;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--theme-bg-color);
  left: 50px;
  bottom: 19px;
}

.msg-username {
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 15px;
}

.msg-detail {
  overflow: hidden;
}

.msg-content {
  font-weight: 500;
  font-size: 13px;
  display: flex;
}

.msg-message {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--msg-message);
}

.msg-date {
  font-size: 10px;
  color: var(--msg-date);
  margin-left: 3px;
  display: flex;
  position: relative;
}

.msg-date:before {
  content: "•";
  margin-right: 2px;
}

.add {
  position: sticky;
  bottom: 25px;
  background-color: var(--theme-color);
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus'%3e%3cpath d='M12 5v14M5 12h14'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 28px;
  box-shadow: 0 0 16px var(--theme-color);
  margin: auto auto -55px;
  flex-shrink: 0;
  z-index: 1;
  cursor: pointer;
}

.overlay {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 340px;
  flex-shrink: 0;
  background: var(--overlay-bg);
  height: 80px;
}

.overlay-chat-area {
  position: fixed;
  bottom: 0px;
  right: 0;
  width: 100%;
  flex-shrink: 0;
  background: var(--overlay-bg);
  height: 15%;
}

.chat-area {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.chat-area-header {
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: var(--chat-header-bg);
}

.chat-area-profile {
  width: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-area-title {
  color: #000;
  font-size: 18px;
  font-weight: 600;
}

.chat-area-main {
  flex-grow: 1;
}

.chat-msg-img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-msg-profile {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: -20px;
  position: relative;
}

.chat-msg-date {
  position: absolute;
  left: calc(100% + 12px);
  bottom: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--msg-date);
  white-space: nowrap;
}

.chat-msg {
  display: flex;
  padding: 0 20px 45px;
}

.chat-msg-content {
  margin-left: 12px;
  max-width: 70%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat-msg-text {
  background-color: var(--chat-text-bg);
  padding: 15px;
  border-radius: 20px 20px 20px 0;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 500;
}

.dark-mode .chat-msg-text {
  background-color: #ebebeb;
}

.chat-msg-text+.chat-msg-text {
  margin-top: 10px;
}

.chat-msg-text {
  color: var(--chat-text-color);
}

.owner {
  flex-direction: row-reverse;
}

.owner .chat-msg-content {
  margin-left: 0;
  margin-right: 12px;
  align-items: flex-end;
}

.owner .chat-msg-text {
  background-color: var(--theme-color);
  color: #fff;
  border-radius: 20px 20px 0 20px;
}

.owner .chat-msg-date {
  left: auto;
  right: calc(100% + 12px);
}

.chat-msg-text img {
  max-width: 300px;
  width: 100%;
}

.chat-area-footer {
  display: flex;
  border: 1px solid #d1cece;
  width: 100%;
  padding: 10px 20px;
  align-items: center;
  background-color: var(--theme-bg-color);
  position: sticky;
  bottom: -1px;
  left: 0;
}

.chat-area-footer svg {
  color: var(--settings-icon-color);
  width: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.chat-area-footer svg:hover {
  color: var(--settings-icon-hover);
}

.chat-area-footer svg+svg {
  margin-left: 12px;
}

.chat-area-footer input {
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 6px;
  font-size: 15px;
  margin: 0 12px;
  width: 100%;
}

.chat-area-footer input::placeholder {
  color: var(--input-chat-color);
}

.detail-area-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-area-header .msg-profile {
  margin-right: 0;
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.detail-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--msg-date);
}

.detail-button {
  border: 0;
  background-color: var(--button-bg-color);
  padding: 10px 14px;
  border-radius: 5px;
  color: var(--button-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-grow: 1;
  font-weight: 500;
}

.detail-button svg {
  width: 18px;
  margin-right: 10px;
}

.detail-button:last-child {
  margin-left: 8px;
}

.detail-buttons {
  margin-top: 20px;
  display: flex;
  width: 100%;
}

.detail-area input {
  background-color: transparent;
  border: none;
  width: 100%;
  color: var(--body-color);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 100%;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
  padding: 14px 0;
}

.detail-area input::placeholder {
  color: var(--detail-font-color);
}

.detail-changes {
  margin-top: 40px;
}

.detail-change {
  color: var(--detail-font-color);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
  padding: 14px 0;
  display: flex;
}

.detail-change svg {
  width: 16px;
  margin-left: auto;
}

.colors {
  display: flex;
  margin-left: auto;
}

.color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
}

.color.selected {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

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

.detail-photo-title {
  display: flex;
  align-items: center;
}

.detail-photo-title svg {
  width: 16px;
}

.detail-photos {
  margin-top: 30px;
  text-align: center;
}

.detail-photo-title {
  color: var(--detail-font-color);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 20px;
}

.detail-photo-title svg {
  margin-right: 8px;
}

.detail-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-rows: repeat(3, 60px);
}

.detail-photo-grid img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  object-position: center;
}

.view-more {
  color: var(--theme-color);
  font-weight: 600;
  font-size: 15px;
  margin: 25px 0;
}

.follow-me {
  text-decoration: none;
  font-size: 14px;
  width: calc(100% + 60px);
  margin-left: -30px;
  display: flex;
  align-items: center;
  margin-top: auto;
  overflow: hidden;
  color: #9c9cab;
  padding: 0 20px;
  height: 52px;
  flex-shrink: 0;
  position: relative;
  justify-content: center;
}

.follow-me svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.follow-text {
  display: flex;
  align-items: center;
  transition: 0.3s;
}

.follow-me:hover .follow-text {
  transform: translateY(100%);
}

.follow-me:hover .developer {
  top: 0;
}

.developer {
  position: absolute;
  color: var(--detail-font-color);
  font-weight: 600;
  left: 0;
  top: -100%;
  display: flex;
  transition: 0.3s;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  background-color: var(--developer-color);
  width: 100%;
  height: 100%;
}

.developer img {
  border-radius: 50%;
  width: 26px;
  height: 26px;
  object-fit: cover;
  margin-right: 10px;
}

.dark-mode .search-bar input,
.dark-mode .detail-area input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%236f7073'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
}

.dark-mode .dark-light svg {
  fill: #ffce45;
  stroke: #ffce45;
}

.dark-mode .chat-area-group span {
  color: #d1d1d2;
}

.chat-area-group {
  flex-shrink: 0;
  display: flex;
}

.chat-area-group * {
  border: 2px solid var(--theme-bg-color);
}

.chat-area-group *+* {
  margin-left: -5px;
}

.chat-area-group span {
  width: 32px;
  height: 32px;
  background-color: var(--button-bg-color);
  color: var(--theme-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 1120px) {
  .detail-area {
    display: none;
  }
}

@media (max-width: 780px) {
  .conversation-area {
    display: none;
  }

  .search-bar {
    margin-left: 0;
    flex-grow: 1;
  }

  .search-bar input {
    padding-right: 10px;
  }
}

/* Start - Loader - In Progress */
.chatApp__loader,
.chatApp__loader::before,
.chatApp__loader::after {
  border-radius: 1em;
  width: 1em;
  height: 1em;
  animation-fill-mode: both;
  animation: loading 1.8s infinite ease-in-out;
}

.chatApp__loader {
  margin: auto;
  color: #0d6efd;
  font-size: 10px;
  display: block;
  position: absolute;
  top: 30px;
  left: 130px;
  animation-delay: -0.16s;
}

.chatApp__loader::before,
.chatApp__loader::after {
  content: '';
  position: absolute;
  top: 0;
}

.chatApp__loader::before {
  left: -1.5em;
  animation-delay: -0.32s;
}

.chatApp__loader::after {
  left: 1.5em;
}

.chatApp__loader2,
.chatApp__loader2::before,
.chatApp__loader2::after {
  border-radius: 1em;
  width: 1em;
  height: 1em;
  animation-fill-mode: both;
  animation: loading 1.8s infinite ease-in-out;
}

.chatApp__loader2 {
  margin: auto;
  padding-top: 10px;
  color: #a7bdf9;
  font-size: 12px;
  display: inline-flex;
  position: relative;
  bottom: -63px;
  right: 0px;
  float: right;
  animation-delay: -0.16s;
}

.chatApp__loader2::before,
.chatApp__loader2::after {
  content: '';
  position: absolute;
  top: 0;
}

.chatApp__loader2::before {
  left: -1.5em;
  animation-delay: -0.32s;
}

.chatApp__loader2::after {
  left: 1.5em;
}

@keyframes loading {

  0%,
  80%,
  100% {
    box-shadow: 0 1em 0 -1.3em;
  }

  40% {
    box-shadow: 0 1em 0 0;
  }
}

/* End - Loader - In Progress */

/* *******************************
message-area
******************************** */

.message-area {
  height: 100vh;
  overflow: hidden;
  padding: 30px 0;
  background: #f5f5f5;
}

.chat-area {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-radius: 0.3rem;
  height: 90vh;
  overflow: hidden;
  min-height: calc(100% - 1rem);
}

.chatlist {
  outline: 0;
  height: 100%;
  overflow: hidden;
  width: 300px;
  float: left;
  padding: 15px;
}

.chat-area .modal-content {
  border: none;
  border-radius: 0;
  outline: 0;
  height: 100%;
}

.chat-area .modal-dialog-scrollable {
  height: 100% !important;
}

.chatbox {
  width: auto;
  overflow: hidden;
  height: 100%;
  border-left: 1px solid #ccc;
}

.chatbox .modal-dialog,
.chatlist .modal-dialog {
  max-width: 100%;
  margin: 0;
}

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

.chat-area .form-control {
  display: block;
  width: 80%;
  padding: 0.375rem 0.75rem;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #222;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.chat-area .form-control:focus {
  outline: 0;
  box-shadow: inherit;
}

a.add img {
  height: 36px;
}

.chat-area .nav-tabs {
  border-bottom: 1px solid #dee2e6;
  align-items: center;
  justify-content: space-between;
  flex-wrap: inherit;
}

.chat-area .nav-tabs .nav-item {
  width: 100%;
}

.chat-area .nav-tabs .nav-link {
  width: 100%;
  color: #180660;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: capitalize;
  margin-top: 5px;
  margin-bottom: -1px;
  background: 0 0;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.chat-area .nav-tabs .nav-item.show .nav-link,
.chat-area .nav-tabs .nav-link.active {
  color: #222;
  background-color: #fff;
  border-color: transparent transparent #000;
}

.chat-area .nav-tabs .nav-link:focus,
.chat-area .nav-tabs .nav-link:hover {
  border-color: transparent transparent #000;
  isolation: isolate;
}

.chat-list h3 {
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: capitalize;
  margin-bottom: 0;
}

.chat-list p {
  color: #343434;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: capitalize;
  margin-bottom: 0;
}

.chat-list a.d-flex {
  margin-bottom: 15px;
  position: relative;
  text-decoration: none;
}

.chat-list .active {
  display: block;
  content: '';
  clear: both;
  position: absolute;
  bottom: 3px;
  left: 34px;
  height: 12px;
  width: 12px;
  background: #00DB75;
  border-radius: 50%;
  border: 2px solid #fff;
}

.msg-head h3 {
  color: #222;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0;
}

.msg-head p {
  color: #343434;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: capitalize;
  margin-bottom: 0;
}

.msg-head {
  padding: 15px;
  border-bottom: 1px solid #ccc;
}

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

.moreoption .navbar {
  padding: 0;
}

.moreoption li .nav-link {
  color: #222;
  font-size: 16px;
}

.moreoption .dropdown-toggle::after {
  display: none;
}

.moreoption .dropdown-menu[data-bs-popper] {
  top: 100%;
  left: auto;
  right: 0;
  margin-top: 0.125rem;
}

.msg-body ul {
  overflow: hidden;
}

.msg-body ul li {
  list-style: none;
  margin: 15px 0;
}

.msg-body ul li.sender {
  display: block;
  width: 100%;
  position: relative;
}

.msg-body ul li.sender:before {
  display: block;
  clear: both;
  content: '';
  position: absolute;
  top: -6px;
  left: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 15px 12px;
  border-color: transparent transparent #f5f5f5 transparent;
  -webkit-transform: rotate(-37deg);
  -ms-transform: rotate(-37deg);
  transform: rotate(-37deg);
}

.msg-body ul li.sender p {
  color: #000;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  padding: 15px;
  background: #f5f5f5;
  display: inline-block;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-bottom: 0;
}

.msg-body ul li.sender p b {
  display: block;
  color: #180660;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.msg-body ul li.repaly {
  display: block;
  width: 100%;
  text-align: right;
  position: relative;
}

.msg-body ul li.repaly:before {
  display: block;
  clear: both;
  content: '';
  position: absolute;
  bottom: 15px;
  right: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 15px 12px;
  border-color: transparent transparent #4b7bec transparent;
  -webkit-transform: rotate(37deg);
  -ms-transform: rotate(37deg);
  transform: rotate(37deg);
}

.msg-body ul li.repaly p {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  padding: 15px;
  background: #4b7bec;
  display: inline-block;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-bottom: 0;
}

.msg-body ul li.repaly p b {
  display: block;
  color: #061061;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.msg-body ul li.repaly:after {
  display: block;
  content: '';
  clear: both;
}

.time {
  display: block;
  color: #ff5050;
  font-size: 18px;
  line-height: unset;
  font-weight: 400;
}

li.repaly .time {
  margin-right: 20px;
}

.divider {
  position: relative;
  z-index: 1;
  text-align: center;
}

.msg-body h6 {
  text-align: center;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.5;
  color: #222;
  background: #fff;
  display: inline-block;
  padding: 0 5px;
  margin-bottom: 0;
}

.divider:after {
  display: block;
  content: '';
  clear: both;
  position: absolute;
  top: 4px;
  left: 0;
  /* border-top: 1px solid #EBEBEB; */
  width: 100%;
  height: 100%;
  z-index: -1;
}

.send-box {
  padding: 15px;
  border-top: 1px solid #ccc;
}

.send-box form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.send-box .form-control {
  display: block;
  width: 85%;
  padding: 0.375rem 0.75rem;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #222;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.send-box button {
  border: none;
  background: #3867d6;
  padding: 0.375rem 5px;
  color: #fff;
  border-radius: 0.25rem;
  font-size: 14px;
  font-weight: 400;
  width: 24%;
  margin-left: 1%;
}

.send-box button i {
  margin-right: 5px;
}

.send-btns .button-wrapper {
  position: relative;
  width: 125px;
  height: auto;
  text-align: left;
  margin: 0 auto;
  display: block;
  background: #F6F7FA;
  border-radius: 3px;
  padding: 5px 15px;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}

.send-btns .button-wrapper span.label {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
  color: #343945;
  font-weight: 400;
  text-transform: capitalize;
  font-size: 13px;
}

#upload {
  display: inline-block;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.send-btns .attach .form-control {
  display: inline-block;
  width: 120px;
  height: auto;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #343945;
  background-color: #F6F7FA;
  background-clip: padding-box;
  border: 1px solid #F6F7FA;
  border-radius: 3px;
  margin-bottom: 5px;
}

.send-btns .button-wrapper span.label img {
  margin-right: 5px;
}

.button-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  text-align: center;
  margin: 0 auto;
}

button:focus {
  outline: 0;
}

.add-apoint {
  display: inline-block;
  margin-left: 5px;
}

.add-apoint a {
  text-decoration: none;
  background: #F6F7FA;
  border-radius: 8px;
  padding: 8px 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: #343945;
}

.add-apoint a svg {
  margin-right: 5px;
}

.chat-icon {
  display: none;
}

.closess i {
  display: none;
}

@media (max-width: 767px) {
  .chat-icon {
    display: block;
    margin-right: 5px;
  }

  .chatlist {
    width: 100%;
  }

  .chatbox {
    width: 100%;
    position: absolute;
    left: 1000px;
    right: 0;
    background: #fff;
    transition: all 0.5s ease;
    border-left: none;
  }

  .showbox {
    left: 0 !important;
    transition: all 0.5s ease;
  }

  .msg-head h3 {
    font-size: 14px;
  }

  .msg-head p {
    font-size: 12px;
  }

  .msg-head .flex-shrink-0 img {
    height: 30px;
  }

  .send-box button {
    width: 28%;
  }

  .send-box .form-control {
    width: 70%;
  }

  .chat-list h3 {
    font-size: 14px;
  }

  .chat-list p {
    font-size: 12px;
  }

  .msg-body ul li.sender p {
    font-size: 13px;
    padding: 8px;
    border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  .msg-body ul li.repaly p {
    font-size: 13px;
    padding: 8px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
  }
}

/* End - Chat Area */

/* Start - Communication Tools */
#container-multichat {
  /* background: #eef0f8; */
  position: relative;
  display: flex;
  /* float: left; */
  /* left: -220px; */
  z-index: 0;
}

.jqstooltip {
  position: absolute;
  left: 0px;
  top: 0px;
  visibility: hidden;
  background: rgb(0, 0, 0) transparent;
  background-color: rgba(0, 0, 0, 0.6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
  color: white;
  font: 10px arial, san serif;
  text-align: left;
  white-space: nowrap;
  padding: 5px;
  border: 1px solid white;
  box-sizing: content-box;
  z-index: 10000;
}

.jqsfield {
  color: white;
  font: 10px arial, san serif;
  text-align: left;
}

.content-wrapper {
  margin-left: auto;
}

ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: unset;
}

.text {
  letter-spacing: unset;
  text-align: unset;
}

.app-chat3 {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  /* background-color: #ffffff; */
  max-width: 1820px;
  height: 100vh;
  left: -220px;
  /* margin: 0 -260px auto; */
  /* overflow: hidden; */
}

@media (min-width: 1400px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1820px !important;
  }
}

.container-multichat {
  padding: initial;
}

.content-wrapper {
  z-index: 0;
}

.text-color-white {
  color: #fff !important;
}

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

.media-body strong {
  color: #000;
}

.box-header {
  background: #5c60f5;
  box-shadow: 0 0.25rem 0.375rem -0.0625rem hsla(0, 0%, 8%, 0.12), 0 0.125rem 0.25rem -0.0625rem hsla(0, 0%, 8%, 0.07);
  color: #fff;
  display: block;
  padding: 1.5rem;
  position: relative;
  border-bottom: 1px solid rgba(72, 94, 144, 0.16) !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.box-header a {
  color: #fff;
}

.box-header .box-title {
  display: inline-block;
  margin: 0;
  font-weight: 700 !important;
  color: #fff;
}

.box-header>i {
  display: inline-block;
  margin: 0 5px 0 0;
  font-weight: 500;
  font-size: 21px;
  color: #fff;
  margin-right: 10px !important;
}

.media a:not(.btn):not(.avatar) {
  color: #ffffff;
}

.media-body>p:last-child {
  color: unset;
}

.media-body p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0px;
}

.bg-light {
  background-color: #f4f8fd !important;
}

/* .bg-primary {
    background-color: #44a2ff !important;
} */
.bg-primary2 {
  background: linear-gradient(135deg, #3b86ff, #0dbce7) !important;
}

.btn-primary {
  color: #ffffff;
  background-color: #3e9fff;
  border-color: #0080ff;
}

/* .btn-primary:hover {
  color: #000;
  background-color: #dee2e6;
  border-color: #0080ff;
} */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #fff;
  background: #5c60f5;
  box-shadow: 0 0.25rem 0.375rem -0.0625rem hsla(0, 0%, 8%, 0.12), 0 0.125rem 0.25rem -0.0625rem hsla(0, 0%, 8%, 0.07);
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-link img {
  width: 21px;
  position: relative;
  display: inline-flex;
  margin-right: 5px;
}

/* .content {
    min-height: auto;
    padding: unset;
    margin-right: auto;
    margin-left: auto;
} */
.content {
  min-height: auto !important;
  padding: unset !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.content-profile-multichat {
  min-height: auto !important;
  padding: 0.5rem 0.5rem 0px 0.5rem !important;
  margin-right: auto !important;
  margin-left: 12px !important;
}

.content-profile-multichat a {
  font-size: 12px !important;
  padding: 0 !important;
}

.icon i {
  width: auto !important;
  height: auto !important;
  text-align: center;
  color: #ffffff;
  line-height: unset !important;
  border-radius: 100%;
}

.nav-comm {
  position: relative;
  display: flex;
  padding: unset !important;
  border: 1px solid #ddd;
  background: #e8e9ea;
}

.box {
  height: 100%;
}

.waves-circle {
  line-height: 0em;
}

.form-control-chat {
  display: block;
  width: 58%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  /* color: var(--bs-body-color); */
  /* background-color: var(--bs-form-control-bg); */
  border-radius: 5px;
  box-shadow: none;
  border: 1px solid #ced6e0 !important;
  transition: all 0.3s ease-in-out;
  /* font-size: 18px; */
  padding: 5px 15px;
  /* background: none; */
  color: #1a3b5d;
  background-clip: padding-box;
  /* border: var(--bs-border-width) solid var(--bs-border-color); */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .375rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control-chat:focus {
  border: 1px solid #3d9cff !important;
  box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35);
}

.bg-lighter {
  background-color: #f5faff !important;
}

.highlight {
  background-color: #e0e7ff;
}

/* .btn:hover {
	background-color: #e0e7ff !important;
} */
.line-height-2 {
  line-height: 2;
}

.btn--send {
  border-radius: 3px;
}

.btn__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #fff;
  vertical-align: middle;
}

.chat-history-area {
  position: relative;
  display: inline-block;
  background-image: url(https://js.intercomcdn.com/images/background-1.1829ebd9.png);
  background-size: 417px 417px;
  background-repeat: repeat;
}

.box-body {
  padding: 0.3rem !important;
}

.box-footer {
  background: #fff;
  z-index: 9;
}

.box-body .box-title {
  margin: 1rem !important;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.btn.btn-flat {
  background: #0064ff;
}

.search-binoculars {
  position: absolute;
  display: inline-block;
  margin-left: -30px;
  margin-top: 7px;
}

.lookup-sm input {
  border-radius: 10px;
  height: 29px;
  border: 1px solid #c1c1c1;
}

.lookup input:focus {
  background-color: rgb(249 249 249);
}

.media-list>.media:not(.media-list-header):not(.media-list-footer),
.media-list .media-list-body>.media {
  margin-bottom: 0;
  border-bottom: 1px solid #ddd;
}

.avatar {
  border-radius: 50% !important;
}

.avatar[class*='status-']::after {
  content: '';
  position: absolute;
  right: 0px;
  bottom: 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: 2px solid #00c386;
  background: #00c386;
}

.card-chatbox-left {
  border-radius: 10px !important;
  box-shadow: 0 3px 5px 1px rgb(0 0 0 / 17%) !important;
  margin-bottom: 1.5rem !important;
  border-radius: 0 16px 16px 16px !important;
}

.card-chatbox-right {
  border-radius: 10px;
  box-shadow: 0 3px 5px 1px rgb(0 0 0 / 17%);
  margin-bottom: 1.5rem !important;
  border-radius: 16px 0px 16px 16px;
}

.card-body {
  padding: 1rem;
}

/* .card:before {
	content: '';
    position: absolute;
    top: -5px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: #44a2ff;
    transform: rotate(45deg);
    border-left: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
    transition: top 0.35s ease;
} */
.top-68 {
  top: 68% !important;
}

.my-minus-25 {
  margin-top: -25px !important;
}

.my-minus-50 {
  margin-top: -50px !important;
}

.ms-minus-55 {
  margin-left: 55px !important;
}

.mt-minus-10 {
  margin-top: -10px !important;
}

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

.mt-minus-40 {
  margin-top: -40px !important;
}

.sticky-toolbar {
  border: 1px solid #ddd;
  z-index: 99;
}

.content-multichat {
  min-height: auto;
  height: auto;
  /* padding: 1.5rem 1.5rem 0px 1.5rem; */
  margin-right: auto;
  margin-left: auto;
}

/* .hover-primary:hover {
	background: #DFE5EF;
	border-color: #DFE5EF !important;
} */
.list-inline-item a {
  color: #fff !important;
}

.list-inline-item a:hover {
  color: #DFE5EF !important;
}

/* Start - Search-modal */
.searchbox {
  height: 60px;
  width: 450px;
  max-width: 100%;
  background: #dbe8fd;
  border-radius: 10px;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -5px;
  display: flex;
}

.searchbox>.btn-menu {
  padding: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.searchbox>.search {
  border: none;
  width: 100%;
}

.searchbox>.btn-search {
  padding: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.searchbox input {
  color: #000;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: unset;
  border-radius: 10px;
  height: 38px;
  padding-left: 0;
  max-width: 100%;
  margin-top: 11px;
  border: 1px solid #bfbfbf !important;
}

.searchbox input:focus {
  border: 1px solid #3d9cff !important;
  box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35);
}

.search-modal {
  height: 350px;
  width: 450px;
  max-width: 100%;
  background: #dbe8fd;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 4px rgb(0 0 0 / 29%);
  box-shadow: 0 0 4px rgb(0 0 0 / 29%);
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 70px;
  animation: slideInUp 0.5s;
  display: none;
  z-index: 9;
}

.search-modal:before {
  content: '';
  position: absolute;
  top: -5px;
  right: 20px;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: rotate(45deg);
  border-left: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
  transition: top 0.35s ease;
}

.search-modal-header {
  display: flex;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #00000017;
}

.search-modal-header h3 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 500;
  float: left;
  margin-left: 15px;
}

.search-modal-header span img {
  float: right;
  position: absolute;
  right: 16px;
  top: 17px;
  margin: 0 auto;
  cursor: pointer;
  transition: 0.5s all;
}

.search-modal-header span img:hover {
  transform: scale(1.1);
}

.search-modal-body {
  padding: 20px;
  height: 285px;
  overflow-y: scroll;
}

.search-modal-body .message {
  display: flex;
  cursor: pointer;
  background: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
}

.search-modal-body .message-avatar {
  margin-right: 16px;
  margin-top: 10px;
}

.search-modal-body .message-avatar img {
  height: 60px;
  width: 60px;
  border-radius: 30px;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);
}

.search-modal-body .message-body {
  margin-left: 0;
  margin-top: 8px;
}

.search-modal-body .message-body p {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  color: #444;
}

.search-modal-body .message-body small {
  font-weight: 400;
  font-family: Dosis;
  color: #777;
}

.search-modal-body .message:hover {
  background-color: #2F94D817;
}

.search-modal-body::-webkit-scrollbar {
  width: 5px;
}

.search-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.search-modal-body::-webkit-scrollbar-thumb {
  background: #2F94D8;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: -1px 0 5px rgba(0, 0, 0, 0.15);
}

.search-modal-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* End - Search-Modal */
/* Start - Emoji */
.test-emoji {
  /* position: relative; */
  display: inline-block;
  font-size: 1.1rem;
  line-height: 1.8;
  left: 4%;
  width: 520px;
  height: 40px;
  overflow: hidden;
}

.intercom-composer-popover-input {
  font-size-adjust: none;
  font-size: 100%;
  font-style: normal;
  letter-spacing: normal;
  font-stretch: normal;
  font-variant: normal;
  font-weight: 400;
  font: normal normal 100% "intercom-font", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: left;
  text-align-last: auto;
  text-decoration: none;
  -webkit-text-emphasis: none;
  text-emphasis: none;
  text-height: auto;
  text-indent: 0;
  text-justify: auto;
  text-outline: none;
  text-shadow: none;
  text-transform: none;
  text-wrap: normal;
  alignment-adjust: auto;
  alignment-baseline: baseline;
  -webkit-animation: none 0 ease 0 1 normal;
  animation: none 0 ease 0 1 normal;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
  azimuth: center;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  background: none 0 0 auto repeat scroll padding-box transparent;
  background-color: transparent;
  background-image: none;
  baseline-shift: baseline;
  binding: none;
  bleed: 6pt;
  bookmark-label: content();
  bookmark-level: none;
  bookmark-state: open;
  bookmark-target: none;
  border: 0 none transparent;
  border-radius: 0;
  bottom: auto;
  box-align: stretch;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  box-direction: normal;
  box-flex: 0.0;
  box-flex-group: 1;
  box-lines: single;
  box-ordinal-group: 1;
  box-orient: inline-axis;
  box-pack: start;
  box-shadow: none;
  box-sizing: content-box;
  -webkit-column-break-after: auto;
  break-after: auto;
  -webkit-column-break-before: auto;
  break-before: auto;
  -webkit-column-break-inside: auto;
  break-inside: auto;
  caption-side: top;
  clear: none;
  clip: auto;
  color: inherit;
  color-profile: auto;
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: auto;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  -webkit-column-gap: normal;
  -moz-column-gap: normal;
  column-gap: normal;
  -webkit-column-rule: medium medium #1f1f1f;
  -moz-column-rule: medium medium #1f1f1f;
  column-rule: medium medium #1f1f1f;
  -webkit-column-span: 1;
  -moz-column-span: 1;
  column-span: 1;
  -webkit-column-width: auto;
  -moz-column-width: auto;
  column-width: auto;
  -webkit-columns: auto auto;
  -moz-columns: auto auto;
  columns: auto auto;
  content: normal;
  counter-increment: none;
  counter-reset: none;
  crop: auto;
  cursor: auto;
  direction: ltr;
  display: inline;
  dominant-baseline: auto;
  drop-initial-after-adjust: text-after-edge;
  drop-initial-after-align: baseline;
  drop-initial-before-adjust: text-before-edge;
  drop-initial-before-align: caps-height;
  drop-initial-size: auto;
  drop-initial-value: initial;
  elevation: level;
  empty-cells: show;
  fit: fill;
  fit-position: 0 0;
  float: none;
  float-offset: 0 0;
  grid-columns: none;
  grid-rows: none;
  hanging-punctuation: none;
  height: auto;
  hyphenate-after: auto;
  hyphenate-before: auto;
  hyphenate-character: auto;
  hyphenate-lines: no-limit;
  hyphenate-resource: none;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
  icon: auto;
  image-orientation: auto;
  image-rendering: auto;
  image-resolution: normal;
  inline-box-align: last;
  left: auto;
  line-height: inherit;
  line-stacking: inline-line-height exclude-ruby consider-shifts;
  list-style: disc outside none;
  margin: 0;
  marks: none;
  marquee-direction: forward;
  marquee-loop: 1;
  marquee-play-count: 1;
  marquee-speed: normal;
  marquee-style: scroll;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  move-to: normal;
  nav-down: auto;
  nav-index: auto;
  nav-left: auto;
  nav-right: auto;
  nav-up: auto;
  opacity: 1;
  orphans: 2;
  outline: medium none invert;
  outline-offset: 0;
  overflow: visible;
  overflow-style: auto;
  padding: 0;
  page: auto;
  page-break-after: auto;
  page-break-before: auto;
  page-break-inside: auto;
  page-policy: start;
  -webkit-perspective: none;
  perspective: none;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  pointer-events: auto;
  position: static;
  presentation-level: 0;
  punctuation-trim: none;
  quotes: none;
  rendering-intent: auto;
  resize: none;
  right: auto;
  rotation: 0;
  rotation-point: 50% 50%;
  ruby-align: auto;
  ruby-overhang: none;
  ruby-position: before;
  ruby-span: none;
  size: auto;
  string-set: none;
  table-layout: auto;
  top: auto;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  -webkit-transform-origin: 50% 50% 0;
  -ms-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
  -webkit-transform-style: flat;
  transform-style: flat;
  transition: all 0 ease 0;
  unicode-bidi: normal;
  vertical-align: baseline;
  white-space: normal;
  white-space-collapse: collapse;
  widows: 2;
  width: auto;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  z-index: auto;
  text-align: start;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.intercom-composer-popover {
  z-index: 2147483003;
  position: absolute;
  bottom: 50px;
  right: calc(50% - 380px);
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, .08);
  background-color: #fff;
  border-radius: 6px;
  transition-duration: 200ms;
  transition-delay: 0ms;
  transform-style: flat;
  transform-origin: 50% 50% 0;
  opacity: 0;
  transition: all 0.2s linear;
  visibility: hidden;
}

.intercom-composer-popover.active {
  visibility: visible;
  opacity: 1;
  bottom: 90px;
}

.intercom-emoji-picker {
  width: 330px;
  height: 260px;
}

.intercom-composer-popover-header {
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 40px;
  border-bottom: 1px solid #edeff1;
}

.intercom-composer-popover-input {
  background-image: url(https://js.intercomcdn.com/images/search.7ae40c25.png);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 0 12px;
  font-weight: 400;
  font-size: 14px;
  color: #6e7a89;
  padding-left: 25px;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  background-image: url(https://js.intercomcdn.com/images/search@2x.9f02b9f3.png);
  border: none;
  outline: none;
}

.intercom-composer-popover-body {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 5px;
  padding: 0 20px;
  overflow-y: scroll;
}

.intercom-emoji-picker-group {
  margin: 10px -5px;
}

.intercom-emoji-picker-group {
  margin: 10px -5px;
}

.intercom-emoji-picker-group-title {
  color: #b8c3ca;
  font-weight: 400;
  font-size: 13px;
  margin: 5px;
}

.intercom-emoji-picker-emoji {
  padding: 5px;
  width: 30px;
  line-height: 30px;
  display: inline-table;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  font-size: 28px;
  transition: -webkit-transform 60ms ease-out;
  transition: transform 60ms ease-out;
  transition: transform 60ms ease-out, -webkit-transform 60ms ease-out;
  transition-delay: 60ms;
  font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
}

.intercom-emoji-picker-emoji:hover {
  transition-delay: 0ms;
  -webkit-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4);
}

.intercom-composer-popover-caret {
  position: absolute;
  bottom: -8px;
  right: 0;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
  right: 75px;
}

.chat-input-tool {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 50%;
  position: relative;
  outline: none;
}

/* End - Emoji */

/* Delete-Chat */
.delete {
  font-size: 18px;
  color: #f95656;
  position: relative;
  align-items: flex-end;
  top: 11px;
  left: 80px;
  float: right;
  height: 25px;
  width: auto;
  border-radius: 5px;
  cursor: pointer;
  margin-top: -5px;
  z-index: 1;
  -webkit-transition: all 0.2s;
}

.delete2 {
  margin-top: -47px !important;
  margin-right: -38px !important;
}

/* .delete p {
    font-size: 0.7em;
    padding: 8px 7px;
} */
.delete:hover {
  color: #f95656;
  -webkit-transition: all 0.2s;
}

.message-chat-content {
  position: relative;
  display: inline-block;
  top: -30px;
  left: 42px;
}

.btn-blocked {
  display: inline-block;
  position: absolute;
  left: 0;
}

.btn.btn-sm.btn-icon-only-btn-blocked {
  width: 1.2875rem;
  height: 1.2875rem;
  padding: 0.3rem;
  margin-left: 8px;
  margin-top: 5px;
}

.chat-member__wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.chat-member__avatar {
  position: relative;
  width: 2.2rem;
}

.chat-member__avatar img {
  border-radius: 50%;
  width: 100%;
}

/* End - Communication Tools */

/* Start - Modal-Pop */
.hasImage:hover section {
  background-color: rgba(5, 5, 5, 0.4);
}

.hasImage:hover button:hover {
  background: rgba(5, 5, 5, 0.45);
}

#overlay p,
i {
  opacity: 0;
}

#overlay.draggedover {
  background-color: rgba(255, 255, 255, 0.7);
}

#overlay.draggedover p,
#overlay.draggedover i {
  opacity: 1;
}

.group:hover .group-hover\:text-blue-800 {
  color: #2b6cb0;
}

.bg-gray-500 {
  background-color: #a0aec0;
}

.inline-block {
  display: inline-block;
}

.max-w-screen-lg {
  max-width: 100%;
}

.icon-file {
  color: #2c5282;
  position: relative;
  display: inline-flex;
  left: -20px;
  top: -3px;
}

.icon-file-text {
  text-align: left;
  position: absolute;
  left: 30px;
}

.img-preview {
  align-items: baseline;
  color: inherit;
  text-align: start !important;
  text-overflow: ellipsis !important;
  padding: initial;
  border: initial;
  white-space: pre;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.help {
  font-family: sans-serif;
  color: #8c96a8;
}

.button-container {
  display: flex;
}

.popover-trigger {
  padding: 0.75rem 1.5rem;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.stat-item a {
  background: rgb(87 142 247);
  border-radius: 50%;
  padding: 4px 0px;
  width: 32px;
  margin-left: 15px;
  position: relative;
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.popover-trigger:hover {
  background-color: var(--primary-hover);
}

.popover-trigger:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

dialog[popover] {
  padding: 1.5rem;
  border: none;
  border-radius: 0.55rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: -webkit-fill-available;
  width: fit-content;
  margin: auto;
  background: white;
  overflow: hidden;
  animation: slide-in 0.3s ease;
}

.close-button {
  position: relative;
  display: grid;
  top: -11px;
  float: right;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: #4b4b4b;
  background: transparent;
  border: none;
  font-size: 40px;
  line-height: .1;
  font-weight: 700;
  place-items: center;
}

.close-button:hover {
  color: #c3c3c3;
}

.close-button:focus-visible {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3);
}

.popover-content {
  margin-top: 0.5rem;
}

.popover-content p {
  margin: 1rem 0;
  line-height: 1.5;
  color: var(--text-color);
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-1.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  animation: fade-in 0.2s ease;
}

/* End - Modal-Pop */

/* Start - Error404-Page */
.body-error-404 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

.box-info-404 {
  display: flex;
  flex-flow: column;
  justify-content: center;
  max-width: 253px;
  gap: 5px;
}

.title-error {
  color: #1a1d1f;
  font-size: 52px;
  font-weight: 600;
}

.box-info-404 p.description-error {
  color: #a7acb0;
  font-size: 17px;
}

.go-home {
  color: white;
  font-size: 0.86rem;
  line-height: 1.7;
}

svg.arrow-btn-error-404 {
  height: 24px;
  top: 40px;
  margin-left: 70px;
  position: relative;
  z-index: 9;
}

@media (max-width: 767px) {
  svg.arrow-btn-error-404 {
    height: 24px;
    width: 165px;
    top: 30px;
    margin-left: -3px;
    position: relative;
    display: block;
    z-index: 9;
  }
}

.box-btn-404 {
  display: flex;
  background-color: #1a1d1f;
  height: 41px;
  width: 131px;
  border-radius: 100px;
  padding: 0 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 2px;
  margin-top: 20px;
}

.container-error404 {
  display: flex;
  width: fit-content;
  height: fit-content;
  gap: 50px;
}

.img-error {
  width: 300px;
  height: fit-content;
}

.box-info-404 a {
  text-decoration: none;
  display: block;
  width: 100%;
}


@media screen and (max-width: 741px) {
  .container-error404 {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 10px;
  }

  .box-info-404 {
    align-items: center;
  }

  .box-info-404 p.description-error {
    text-align: center;
  }

  .img-error {
    width: 223px;
  }

  .box-info-404 p.description-error {
    font-size: 15px;
  }

  .title-error {
    font-size: 49px;
  }

  .box-btn-404 {
    height: 36px;
    width: 128px;
  }
}

/* End - Error404-Page */

/* Start - Extra-Added-Feat */
.right-select {
  position: relative;
  display: inline-flex;
}

.stats-quick-left-border {
  border-left: 2px solid #75a7ff;
}

.featured-note {
  text-align: center;
  background: linear-gradient(135deg, #6bc8ff, #0087c7);
  color: white;
  padding: 5px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  margin: 0 auto 1rem;
  display: block;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#editBasicInfoBtn {
  font-size: 14px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid #a7a7a7;
}

/* End - Extra-Added-Feat */

/* Start - Alert - Pop-Up */
.myAlert-top {
  position: fixed;
  top: 5px;
  left: 2%;
  width: 96%;
  z-index: 9999;
}

.myAlert-bottom,
.myAlert-bottom-apply,
.myAlert-bottom-hot-vid,
.myAlert-bottom-cat-vid,
.myAlert-bottom-carousel-vid,
.myAlert-bottom-live-vid,
.myAlert-bottom-reckon-vid,
.myAlert-bottom-broadcaster-vid,
.myAlert-bottom-action-del,
.myAlert-bottom-b-schedule {
  position: fixed;
  bottom: 5px;
  left: 2%;
  width: 96%;
  z-index: 9999;
}

.myAlert-action-del {
  position: absolute;
  display: inline-block;
  right: 70px;
  float: right;
}

.myAlert-action-confirm-del {
  font-size: 12px;
  color: #000;
  background: #ffb3b3d4;
  border: 1px solid #ff9090;
  position: relative;
  display: inline-block;
  margin: -5px 13px;
}

.myAlert-action-confirm-del:hover {
  color: #000;
  background: #fff5f5;
  transform: scale(0.95);
  opacity: 0.5;
}

.myAlert-action-confirm-cancel {
  font-size: 14px;
  color: #7f0202;
  position: relative;
  display: inline-block;
  margin: 0px 3px;
}

.myAlert-action-confirm-cancel:hover {
  color: #000;
  transform: scale(0.95);
  opacity: 0.5;
}

.alert {
  display: none;
}

.close-myAlert {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #7f0202;
  right: 20px;
  position: absolute;
  text-shadow: 0 1px 0 #ff9191;
  opacity: .5;
}

/* End - Alert - Pop-Up */

/* Start - Error404 */
.screen {
  width: clamp(165px, 225px, 30.5dvw);
  height: 169px;
  /* aspect-ratio: 3.2 / 2.1; */
  position: fixed;
  top: 32.2%;
  left: 20.8%;
  translate: 144% 35%;
  transform-style: preserve-3d;
  overflow: hidden;
  border-radius: 11px;
  transform: rotate3d(-0.9, 6, 2.6, -46.4deg);
  transition: all .5s;
  background: url(../../assets/images/auth/noise.gif);
  --size: 1.5em;
  --radius: 0.3em;
  color: #aaa;
}

.screen a {
  position: absolute;
  color: #00000021 !important;
  font-size: 118px;
  font-weight: bold;
  text-shadow: 3px 3px 10px rgba(255, 255, 255, 0.8);
  top: 0;
  left: 7%;
}

/* End - Error404 */

/* Start - Action_Refresh */
.headbar button {
  position: absolute;
  display: flex;
  top: -66px;
  right: 8px;
  float: right;
  background: transparent;
  outline: none;
  font-size: 30px;
  color: #3052d9;
  cursor: pointer;
  background: #edefef;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  padding: 8px;
  border: 0;
  border-radius: 4px;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.headbar button:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-out 0s;
}

.headbar a {
  font-size: 7px;
  font-weight: 700;
  color: #3052d9 !important;
  position: absolute;
  display: inline-flex;
  top: -30px;
  float: right;
  right: 13px;
  z-index: 1;
}

.wrap {
  position: relative;
  display: block;
}

/* @keyframes rotate {
  0% {
            transform: rotate(0);
  }
  100% {
            transform: rotate(360deg);
  }
} */
.rotate {
  -moz-transition: all .5s linear;
  -webkit-transition: all .5s linear;
  transition: all .5s linear;
  /* animation: rotate .8s linear infinite; */
}

.rotate.down {
  -webkit-transform: rotate(-360deg);
  -moz-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  -o-transform: rotate(-360deg);
  transform: rotate(-360deg);
  -webkit-transition: all .5s linear;
  transition: all .5s linear;
  animation: .5s spinner linear;
}

/* End - Action_Refresh */

/* Start - Date-Picker_From-To */
.form {
  max-width: 50rem;
  display: block;
  margin: auto;
  /* padding: 1.5rem; */
  /* box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); */
  display: grid;
  gap: 1.5rem;
  border-radius: 1rem;
}

.form__row {
  display: grid;
  gap: 1.5rem;
}

.form__field {
  flex: 1;
  display: inline-block;
}

.form__box {
  position: relative;
  border: #9ee5ff 1px solid;
  border-radius: 10px;
  background-color: #F3F7F9;
  padding: 10px;
}

.form__box--pearl-chain {
  padding-left: 10px;
}

.form__box--flex {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.form__box--column {
  flex-direction: column;
}

.pearl-chain {
  position: absolute;
  background: #d91313;
  width: 104px;
  height: 1px;
  left: 53px;
  top: -3px;
  bottom: 0;
  margin: 1.5rem 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.pearl-chain:before {
  content: "";
  aspect-ratio: 1;
  position: relative;
  width: 7px;
  left: -50px;
  top: -3px;
  background: #d91313;
  /* border: #e7e7e7 0.5rem solid; */
  display: flex;
  border-radius: 50%;
}

.pearl-chain:after {
  content: "";
  aspect-ratio: 1;
  position: relative;
  width: 7px;
  left: 49px;
  top: -10px;
  background: #d91313;
  /* border: #e7e7e7 0.5rem solid; */
  display: flex;
  border-radius: 50%;
}

/* End - Date-Picker_From-To */

/* Start - Datetime_Flat-Picker */
.flatpickr-input[readonly] {
  cursor: pointer;
  font-size: 14px;
  width: 185px;
  height: 25px;
  position: relative;
  display: block;
  bottom: 0;
  border-radius: 5px;
  border: 1px solid #9bd2ff;
}

.flatpickr-calendar.open {
  top: 242px !important;
}

.flatpickr-current-month input.cur-year {
  background: #ffffff9e !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #8f8e8e !important;
  cursor: text;
  padding: 0 0 0 1.5ch;
  margin: 0 5px !important;
  display: inline-block;
  font-size: 13px !important;
  font-family: "Helvetica", sans-serif !important;
  font-weight: 500 !important;
  line-height: inherit;
  height: 20px !important;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-current-month span.cur-month {
  font-size: 14px !important;
  font-family: "Helvetica", sans-serif !important;
  font-weight: 700;
  font-size: 16px !important;
  color: #8f8e8e;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
  position: relative;
  bottom: -3px;
}

span.flatpickr-weekday {
  color: rgb(255 167 54) !important;
}

.flatpickr-calendar.open {
  display: inline-block;
  width: 496px;
  top: 230.797px !important;
  left: auto;
  right: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 99999;
}

.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: -5px !important;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
}

.flatpickr-months .flatpickr-month {
  background: #add5ff4a !important;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  /* height: 34px; */
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flatpickr-current-month {
  font-size: 235% !important;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 90% !important;
  left: 30px !important;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.flatpickr-current-month span.cur-month {
  font-family: "Helvetica", sans-serif !important;
  font-weight: 700;
  font-size: 13px !important;
  color: #8f8e8e;
  display: inline-block;
  margin-left: -12.5ch !important;
  padding: 0px 0 0 15px !important;
  position: relative;
  bottom: -3px;
}

.flatpickr-current-month .numInputWrapper {
  width: 4ch !important;
  width: 7ch\0;
  display: inline-flex !important;
  position: absolute !important;
  left: 90px !important;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  right: 0px;
}

.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 510px;
}

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 96%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 15px 0px 8px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 82% !important;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: bolder;
}

.flatpickr-calendar {
  font-size: 13px !important;
  line-height: 24px;
  width: 433px !important;
}

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 434px !important;
}

.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 214.875px !important;
  min-width: 214.875px !important;
  max-width: 214.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
  -ms-flex-preferred-size: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 33px !important;
  height: 29px !important;
  line-height: 26px !important;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.flatpickr-day.today {
  color: #fff;
  border-color: #137dff;
  background: #9775ff;
}

.dayContainer {
  padding: 10px !important;
}

.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 260px !important;
  visibility: visible;
}

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 5px 0 0 5px !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange {
  background: #f8ceec !important;
  border-color: #d756f7 !important;
}

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

.flatpickr-day.inRange {
  background: #f8ceec !important;
  border-color: #f8ceec !important;
}

.flatpickr-day.endRange {
  background: #f8ceec !important;
  border-color: #d756f7 !important;
  border-radius: 0 5px 5px 0 !important;
}

.flatpickr-day.selected,
.flatpickr-day.endRange {
  color: #000 !important;
}

.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #f8ceec !important;
  box-shadow: -10px 0 0 #f8ceec !important;
}

/* End - Datetime_Flat-Picker */


/* Tags Page Specific Styles */
.add-new-tag-btn {
  background-color: #28a745 !important;
}

.pagination-btn {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgb(204, 204, 204);
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}

.pagination-btn:disabled {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgb(204, 204, 204);
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}

.pagination-btn.active {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgb(204, 204, 204);
  background-color: var(--electric-indigo);
  color: rgb(88, 146, 255);
}

.pagination-separator {
  margin: 0px 4px;
}

.video-card-hidden {
  display: none;
}

.video-card-visible {
  display: block;
}

.video-category-height {
  min-height: 20px;
}

.video-title-height {
  min-height: 90px;
}


/* =====================
   Stream List Section
====================== */
.stream-list-section {
    margin: 40px 0;
    position: relative;
}

.stream-list-header {
    display: flex;
    justify-content: flex-start;
    /* Remove space for arrows */
    align-items: center;
    margin-bottom: 1rem;
}

.stream-list-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
}

/* Remove/hide arrows */
.stream-list-arrows,
.stream-list-arrow {
    display: none !important;
}

.stream-list-swiper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stream-list-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    flex-wrap: wrap;
    position: relative;
    transition: height 0.3s;
    gap: 10px;
}

.stream-list-row .stream-card {
    width: 100%;
    transition: transform 0.4s cubic-bezier(.25, .8, .25, 1);
    will-change: transform;
}

.stream-list-row.search-result-grid {
    grid-template-columns: repeat(3, 1fr);
}

.stream-card {
    width: 25%;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(44, 62, 80, 0.08);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.stream-preview {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #2d206e;
    overflow: hidden;
}

.preview-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
}

/* Add hover effect */
.stream-card:hover .preview-img {
    transform: scale(1.05);
}

.badge-live {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff3b30;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 8px;
    letter-spacing: 1px;
    z-index: 2;
    /* Add animation */
    animation: pulseBadge 2s infinite ease-in-out;
    transform-origin: center;
    will-change: transform, box-shadow;
}

.badge-live::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
    border-radius: 8px;
}

@keyframes pulseBadge {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 3px rgba(255, 59, 48, 0.5);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

[data-theme="dark"] .badge-live {
    box-shadow: 0 0 10px rgba(255, 59, 48, 0.3);
}



.badge-viewers {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    z-index: 2;
}

.icon-eye {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 3c-4 0-7 4.5-7 5s3 5 7 5 7-4.5 7-5-3-5-7-5zm0 8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3zm0-5a2 2 0 100 4 2 2 0 000-4z"/></svg>') no-repeat center center;
    background-size: 16px 16px;
    margin-right: 4px;
}

.play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    cursor: pointer;
    transition: all ease 0.2s;
}

.stream-card:hover .play-btn-overlay {
    opacity: 1;
}

.play-btn-overlay .play-btn {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(2);
    transition: all ease 0.2s;
}

.stream-card:hover .play-btn-overlay .play-btn {
    transform: scale(1);
}

.stream-info {
    padding: 8px;
}

.streamer-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
    border: 1px solid #e6e6e6;
}

.stream-title {
    font-size: 14px;
    font-weight: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.button-row {
    display: flex;
    gap: 8px;
}

.btn-tag {
    background: #ACAFCA1C;
    color: #656565;
    border: none;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-tag:hover {
    background: #333;
}

.stream-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.stream-menu-dropdown {
    position: relative;
    display: inline-block;
}

.stream-menu-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    transition: background 0.2s;
    outline: none;
}

.stream-menu-btn:focus,
.stream-menu-btn:hover {
    background: var(--hover-bg);
    color: var(--primary);
}

.stream-menu-list {
    display: none;
    position: absolute;
    right: 0;
    top: 120%;
    min-width: 140px;
    background: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(44, 62, 80, 0.12);
    z-index: 20;
    list-style: none;
    padding: 8px 0;
}

.stream-menu-dropdown.open .stream-menu-list {
    display: block;
}

.stream-menu-list li {
    padding: 8px 20px;
}

.stream-menu-list button {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 0;
}

.stream-menu-list button:hover {
    color: var(--error);
}

/* Streamer Overlay */
.streamer-overlay {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 18px;
    padding: 3px 10px 3px 3px;
    z-index: 2;
}

.streamer-overlay .streamer-avatar-container {
    display: flex;
    align-items: center;
}

.streamer-overlay .avatar {
    width: 28px;
    height: 28px;
    margin-right: 6px;
    border: 1px solid #fff;
}

.streamer-overlay .streamer-name {
    color: #656565;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.streamer-overlay .streamer-hot-points {
    font-size: 13px;
    display: flex;
    align-items: normal;
}

.icon-hot-points {
    width: 16px;
    height: 16px;
    background: url(../img/icon-fire.svg);
    background-size: 16px 16px;
    margin-right: 4px;
}

/* Moderation page specific styles */
.moderation-modal-overlay {
    display: none;
}

.moderation-container-static {
    position: static;
    min-height: 50px;
}

.moderation-pagination-btn {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid rgb(204, 204, 204);
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

.moderation-pagination-btn.active {
    background-color: var(--electric-indigo);
    color: rgb(88, 146, 255);
}

.moderation-pagination-btn:disabled {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid rgb(204, 204, 204);
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

.moderation-pagination-ellipsis {
    margin: 0px 4px;
}

/* ============================================================
   Tag / Category input component
   Used in: genre.html, categories.html
   ============================================================ */
.tag-input__relative {
  position: relative;
}
.tag-input__wrap {
  
  align-items: center;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 6px 10px;
  min-height: 42px;
  cursor: text;
}
.tag-input__wrap:focus-within {
  border-color: #4f46e5;
  box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, .15);
}
.tag-input__field {
  border: none;
  outline: none;
  flex: 1;
  min-width: 160px;
  font-size: 13px;
  padding: 2px 0;
  background: transparent;
}
.tag-input__tag {
  display: inline-flex;
  align-items: center;
  background: var(--electric-indigo, #6c63ff);
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  gap: 4px;
  margin: 2px 3px;
}
.tag-input__remove {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 14px;
}
.tag-input__dropdown {
  /* display: none; */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 180px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
}
.tag-input__option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.tag-input__option:hover {
  background: #f0f0ff;
}