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

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

:root {
  --primary-color: #161c24;
  --secondary-color: #212b36;
  --loading: rgba(33, 43, 54, 0.5);
  --text-color: #fff;
  --text-color-secondary: #919eab;
  --blur-color: rgba(22, 28, 36, 0.8);
  --component-color: #2065d1;
  --component-color-secondary: #214170;
  --component-shadow: #2065d13d 0px 8px 16px 0px;
  --component-hover: rgba(52, 64, 78, 0.8);
  --component-hover-opaque: rgb(52, 64, 78);
  --scroll: rgba(52, 64, 78, 0.8);
  --secondary-bg: #333d48;
  --bg-rgba: rgba(33, 43, 54, 0.92);
  --bg-box-shadow: rgb(0 0 0 / 16%) -24px 12px 32px -4px;
  --secondary-bg-hover: rgba(51, 61, 72, 0.3);
  --secondary-bg-rgba: rgba(22, 28, 36, 0.64);
  --box-shadow: rgb(0 0 0 / 20%) 0px 0px 2px 0px,
    rgb(0 0 0 / 12%) 0px 12px 24px -4px;
  --box-shadow-dark: rgb(0 0 0 / 36%) -12px 12px 32px -4px;
  --box-shadow-dark-right: rgb(0 0 0 / 36%) 12px 12px 32px -4px;
  --border-color-light: #45505c;
  --sidebar-hover: rgba(22, 28, 36, 0.8);
  --sidebar-toggle-color: #ccc;
  /* --component-shadow: #045dec 0px 8px 16px 0px; */
  --xs-screen: 300px;
  --sm-screen: 480px;
  --md-screen: 768px;
  --lg-screen: 1024px;
  --xl-screen: 1280px;
  --xl2-screen: 1536px;
}
body {
  font-family: "Public sans", sans-serif;
  background: var(--primary-color);
  color: var(--text-color);
  overflow-x: hidden;
}

body.light {
  --primary-color: #fff;
  --secondary-color: #fff;
  --loading: #fff;
  --text-color: #333;
  --text-color-secondary: #888;
  --blur-color: rgba(255, 255, 255, 0.8);
  --component-color: #2065d1;
  --component-color-secondary: #acc5ed;
  --component-shadow: #2065d13d 0px 8px 16px 0px;
  --component-hover: rgb(246, 247, 248);
  --scroll: #b4bcc3;
  --secondary-bg: #f2f3f5;
  --bg-rgba: rgba(255, 255, 255, 0.92);
  --bg-box-shadow: rgb(145 158 171 / 16%) -24px 12px 32px -4px;
  --secondary-bg-hover: #f2f3f5;
  --secondary-bg-rgba: rgba(255, 255, 255, 0.64);
  --box-shadow: rgb(145 158 171 / 20%) 0px 0px 2px 0px,
    rgb(145 158 171 / 12%) 0px 12px 24px -4px;
  --box-shadow-dark: rgb(99 115 129 / 36%) -12px 12px 32px -4px;
  --box-shadow-dark-right: rgb(99 115 129 / 36%) 12px 12px 32px -4px;
  --border-color-light: #9da0a3;
  --sidebar-hover: rgba(255, 255, 255, 0.3);
  --sidebar-toggle-color: #888;
  /* --component-shadow: #045dec 0px 8px 16px 0px; */
  --xs-screen: 300px;
  --sm-screen: 480px;
  --md-screen: 768px;
  --lg-screen: 1024px;
  --xl-screen: 1280px;
  --xl2-screen: 1536px;
}

/* Quill Rich Text Editor */
.quill {
}
.ql-toolbar {
  border: 1px solid rgba(145, 158, 171, 0.32) !important;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.ql-container {
  border: 1px solid rgba(145, 158, 171, 0.32) !important;
  min-height: 200px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}
.ql-editor {
  min-height: 200px;
  font-size: 16px !important;
  color: var(--text-color);
}
.ql-header {
  color: var(--text-color) !important;
  font-weight: 600 !important;
}
.quill polygon {
  stroke: #fff !important;
}
.ql-header:hover span {
  color: var(--text-color) !important;
}
.ql-picker-options {
  background: var(--primary-color) !important;
  border: none !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 30px var(--primary-color) !important;
}
.ql-formats button svg path,
.ql-formats button svg line,
.ql-formats button svg rect {
  stroke: var(--text-color) !important;
}
.ql-formats button.ql-active svg path,
.ql-formats button.ql-active svg line,
.ql-formats button.ql-active svg rect {
  stroke: #06c !important;
}

.ql-editor.ql-blank::before {
  color: var(--text-color-secondary) !important;
  font-style: normal !important;
  font-weight: 500;
  font-size: 16px !important;
}
/* End Quill Rich Text Editor */

.MuiPaper-root {
  background: var(--secondary-color) !important;
  color: var(--text-color) !important;
}
ul[role="listbox"] {
  background: var(--secondary-color);
  color: var(--text-color);
}

.cta-button {
  box-shadow: rgb(32 101 209 / 24%) 0px 8px 16px 0px;
}
.cta-button:hover {
  box-shadow: rgb(32 101 209 / 24%) 0px 8px 16px 0px;
}

/* Swal */

.swal-modal {
  background: var(--secondary-color) !important;
  color: #fff !important;
}
.swal-icon {
  background: var(--secondary-color) !important;
}
.swal-icon--success:before {
  /* background: none; */
  background: inherit;
}
.swal-icon--success:after {
  /* background: none; */
  background: inherit;
}
.swal-icon--success__hide-corners {
  /* background: none; */
  background: inherit;
  width: 7px;
}
.swal-title {
  color: #fff !important;
  font-size: 24px !important;
  line-height: 2rem !important;
}
.swal-text {
  margin-top: 10px !important;
  text-align: center;
  color: #fff !important;
}
.swal-button {
  background: var(--component-color) !important;
  outline: none !important;
  border: none !important;
}
/* End Swal */

.MuiPaper-root svg {
  color: var(--text-color);
}
.MuiPaper-root span {
  color: var(--text-color);
}
button.MuiButtonBase-root.MuiPickersDay-root:hover {
  background-color: var(--text-color);
  opacity: 0.9;
}
button.MuiButtonBase-root.MuiPickersDay-root.Mui-selected:hover {
  background-color: var(--component-color);
  opacity: 0.9;
}

/* Video JS Styles Start */
.vjs-big-play-centered .vjs-big-play-button {
  /* display: none !important; */
}
.video-js .vjs-control-bar {
  display: flex !important;
  visibility: visible !important;
}
/* Video JS Styles End */

/* Video JS Seek Buttons */
.video-js .vjs-seek-button {
  font-family: "VideoJS";
  cursor: pointer;
  font-weight: 400;
  font-style: normal;
  padding: 0px !important;
  width: 23px;
  transform: scale(0.65);
}
.video-js .vjs-seek-button.skip-back::before,
.video-js.vjs-v6 .vjs-seek-button.skip-back .vjs-icon-placeholder::before,
.video-js.vjs-v7 .vjs-seek-button.skip-back .vjs-icon-placeholder::before {
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  content: "\f116";
}
.video-js .vjs-seek-button.skip-forward::before {
  transform: rotateY(180deg) rotate(-45deg);
  -ms-transform: rotateY(180deg) rotate(-45deg);
  -webkit-transform: rotateY(180deg) rotate(-45deg);
  content: "\f116";
}
.video-js.vjs-v6 .vjs-seek-button.skip-back::before,
.video-js.vjs-v6 .vjs-seek-button.skip-forward::before,
.video-js.vjs-v7 .vjs-seek-button.skip-back::before,
.video-js.vjs-v7 .vjs-seek-button.skip-forward::before {
  content: none;
}
.video-js.vjs-v6 .vjs-seek-button.skip-forward .vjs-icon-placeholder::before,
.video-js.vjs-v7 .vjs-seek-button.skip-forward .vjs-icon-placeholder::before {
  transform: scale(-1, 1) rotate(-45deg);
  -ms-transform: scale(-1, 1) rotate(-45deg);
  -webkit-transform: scale(-1, 1) rotate(-45deg);
  content: "\f116";
}
.video-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before,
.video-js .vjs-control:focus {
  text-shadow: none !important;
}
/* End Video JS Seek Buttons */

/* MUI */
.MuiTypography-root {
  color: var(--text-color) !important;
}
/* End MUI */

/* ApexCharts */
.donut-chart-tooltip {
  transform: scale(0.8) translate(-50%, 0%);
}
.donut-chart-tooltip .apexcharts-active {
  background: none !important;
}
/* End ApexCharts */

/* Batch Filter */
#batch-filter .MuiInput-root::before {
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
}
#batch-filter .MuiInput-root:hover::before {
  border-bottom: 1px solid rgba(255, 255, 255, 1);
}
/* End Batch Filter */

.calendar-input {
  width: 100%;
}
.calendar-input input {
  color: #fff;
}
.calendar-input svg {
  color: #fff;
}
.calendar-input label {
  color: #fff;
}
.calendar-input div {
  width: 100%;
}
.calendar-input input ~ div {
  width: 40px;
}

@media screen and (max-width: 400px) {
  .cta-button {
    padding: 5px 10px;
    font-size: 12px;
  }
}