/* Colors */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;400;700&family=Montserrat:wght@300;400&family=MuseoModerno:wght@100;200;400;600&display=swap');
.gerald-page {
  display: block !important;
}
.gerald-page .title {
  min-height: 235px;
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: initial !important;
}
.gerald-page .title .title-content {
  flex: 1;
  z-index: 1;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gerald-page .title .title-content .writer-phrase {
  color: rgba(200, 200, 200, 0.8);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.gerald-page .title .title-content .writer-phrase .txt-title {
  margin-bottom: 10px;
  font-size: 2.5rem;
}
.gerald-page .title .title-content .writer-phrase .txt-title.name {
  color: #e62625;
  margin-left: 7px;
}
.gerald-page .title .title-content .writer-phrase .txt-info {
  font-size: 1.5rem;
  width: 100%;
}
.gerald-page .title .title-content .writer-phrase span {
  color: #e62625;
}
.gerald-page .title .title-img {
  width: 40%;
  object-fit: cover;
  opacity: 0.5;
  -webkit-mask-image: -webkit-gradient(linear, right top, left top, color-stop(0, #000000), color-stop(0.45, rgba(0, 0, 0, 0.5)), color-stop(0.65, rgba(0, 0, 0, 0.25)), color-stop(1, rgba(0, 0, 0, 0)));
}
.gerald-page .user-info-ctrl {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  margin-top: 50px;
}
.gerald-page .user-info-ctrl .ctrl {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: rgba(200, 200, 200, 0.8);
  color: #18191c;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  font-size: 15px;
}
.gerald-page .user-info-ctrl .ctrl.disable {
  cursor: initial;
  opacity: 0.1;
}
.gerald-page .user-info-ctrl .ctrl + .ctrl {
  margin-left: 20px;
}
.gerald-page .user-info-container {
  display: block;
  margin-top: 10px;
  overflow-x: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
}
.gerald-page .user-info-container .user-info {
  display: inline-flex;
  flex-direction: row;
  padding: 7px 15px;
  width: 230px;
  white-space: normal;
}
.gerald-page .user-info-container .user-info .user-silo {
  height: 100px;
  position: relative;
}
.gerald-page .user-info-container .user-info .user-silo img {
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 2;
}
.gerald-page .user-info-container .user-info .user-silo:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  z-index: 0;
  transition: 0.5s all ease-in-out;
}
.gerald-page .user-info-container .user-info .user-silo.gerald:before {
  background-color: rgba(230, 38, 37, 0.5) !important;
}
.gerald-page .user-info-container .user-info .user-silo.astro:before {
  background-color: rgba(230, 230, 230, 0.5) !important;
}
.gerald-page .user-info-container .user-info .user-silo.susie:before {
  background-color: rgba(252, 205, 4, 0.5) !important;
}
.gerald-page .user-info-container .user-info .user-silo.wakanda:before {
  background-color: rgba(169, 41, 238, 0.5) !important;
}
.gerald-page .user-info-container .user-info .user-silo.tiana:before {
  background-color: rgba(82, 158, 70, 0.5) !important;
}
.gerald-page .user-info-container .user-info .user-silo.fillmore:before {
  background-color: rgba(227, 101, 0, 0.5) !important;
}
.gerald-page .user-info-container .user-info .user-description {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.7rem;
  margin-left: 7px;
  color: #c8c8c8;
}
.gerald-page .user-info-container .user-info:hover .user-silo:before {
  width: 100px;
  height: 100px;
}
.astro-page {
  display: block !important;
  /* Other components */
}
.astro-page .btn-container {
  z-index: 10;
}
.astro-page .btn-icon {
  background: #e6e6e6 !important;
}
.astro-page .btn-icon.c2 {
  background: rgba(250, 50, 100, 0.8) !important;
  color: #fff !important;
}
.astro-page .date-selector-btn {
  z-index: 100;
}
.astro-page .tro-btn:hover .btn-txt {
  margin-right: 27px;
}
.astro-page .tro-btn.icon-btn .btn-icon {
  margin: 0;
}
.astro-page .tro-btn.btn-end {
  margin-left: auto;
}
.astro-page .input-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.astro-page .input-container .input-field {
  padding: 5px;
  display: flex;
  flex-direction: column;
}
.astro-page .input-container .input-field span {
  margin: 0px 0px 5px 5px;
  color: #18191c;
}
.astro-page .input-container .input-field input {
  border-radius: 50px;
  border: none;
  line-height: 20px;
  padding: 2px 10px;
}
.astro-page .input-container .input-field input:disabled {
  background-color: rgba(136, 136, 136, 0.5);
}
.astro-page .input-container .input-field input[type=time] {
  cursor: pointer;
}
.astro-page .input-container .input-field.sz-1 {
  width: calc(10% - 10px);
}
.astro-page .input-container .input-field.sz-2 {
  width: calc(20% - 10px);
}
.astro-page .input-container .input-field.sz-3 {
  width: calc(30% - 10px);
}
.astro-page .input-container .input-field.sz-4 {
  width: calc(40% - 10px);
}
.astro-page .input-container .input-field.sz-5 {
  width: calc(50% - 10px);
}
.astro-page .input-container .input-field.sz-6 {
  width: calc(60% - 10px);
}
.astro-page .input-container .input-field.sz-7 {
  width: calc(70% - 10px);
}
.astro-page .input-container .input-field.sz-8 {
  width: calc(80% - 10px);
}
.astro-page .input-container .input-field.sz-9 {
  width: calc(90% - 10px);
}
.astro-page .input-container .input-field.sz-10 {
  width: calc(100% - 10px);
}
.astro-page .data-chart {
  color: #fff;
  overflow: auto !important;
  position: relative;
}
.astro-page .data-chart .no-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: rgba(200, 200, 200, 0.8);
  padding: 30px 0;
}
.astro-page .data-chart .rt-thead {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom-color: #f2f2f2 !important;
}
.astro-page .data-chart .rt-th {
  font-weight: bold;
  font-size: 1.3rem;
  text-align: left;
  background-color: rgba(50, 50, 50, 0.2) !important;
}
.astro-page .data-chart .rthfc-td-fixed {
  font-weight: bold;
  font-size: 1.3rem;
  text-align: center;
  background-color: #363334 !important;
}
.astro-page .data-chart .rt-td {
  text-align: center;
  background-color: rgba(50, 50, 50, 0.2) !important;
}
.astro-page .data-chart .rt-td.rthfc-td-fixed {
  background-color: #363334 !important;
}
.astro-page .data-chart .rt-tr.-odd .rt-td {
  background-color: rgba(150, 150, 150, 0.2) !important;
}
.astro-page .data-chart .rt-tr.-odd .rt-td.rthfc-td-fixed {
  background-color: #494647 !important;
}
.astro-page .data-chart .-header .rt-th {
  text-align: center;
}
.astro-page .data-chart .data-pt-btn {
  color: #000;
  background: #c8c8c8;
  border-radius: 50%;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
  min-width: 25px;
  min-height: 25px;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}
.astro-page .data-chart .data-pt-btn:hover {
  margin-right: 7px;
  color: #ffffff;
}
.astro-page .filter-scroll-container {
  margin-top: 20px;
}
.astro-page .filter-scroll-container .selected-filter-list {
  padding: 7px 15px;
}
.astro-page .filter-scroll-container .filter-scroll-list {
  background: rgba(230, 230, 230, 0.7) !important;
  margin: 0 !important;
  display: flex;
  flex-direction: row;
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-title {
  display: flex;
  flex-direction: row;
  padding: 7px 15px;
  border-right: 1px solid #18191c;
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-title h2 {
  color: #18191c;
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-title .btn-row {
  display: flex;
  flex-direction: row;
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-title .btn-row .ctrl-icon {
  display: inline;
  border-radius: 50%;
  height: 22px;
  width: 22px;
  color: #fff;
  background: #18191c !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  margin: auto 0 auto 10px;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-title .btn-row .ctrl-icon:hover {
  opacity: 0.7;
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-list-container {
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  flex: 1;
  padding: 7px 15px;
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-list-container .filter-btn {
  border-radius: 20px;
  padding: 5px 15px 5px 5px;
  display: flex;
  flex-direction: row;
  margin: auto 10px auto 0;
  cursor: pointer;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  transition: 0.5s all ease-in-out;
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-list-container .filter-btn .filter-icon {
  width: 22px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  margin-right: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-list-container .filter-btn span {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-list-container .filter-btn:hover,
.astro-page .filter-scroll-container .filter-scroll-list .filter-list-container .filter-btn.sel {
  box-shadow: none;
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-list-container .filter-btn.sel {
  background: #18191c;
}
.astro-page .filter-scroll-container .filter-scroll-list .filter-list-container .end-btn {
  padding: 10px;
}
.astro-page .display-toggle-container {
  text-align: center;
  margin-top: 20px;
}
.astro-page .display-toggle-container .display-toggle {
  display: inline-flex;
  flex-direction: row;
  background: #fff;
  border-radius: 50px;
  padding: 3px;
}
.astro-page .display-toggle-container .display-toggle .toggle-title {
  padding: 5px 20px;
  color: #000;
  cursor: pointer;
  border-radius: 50px;
  position: relative;
}
.astro-page .display-toggle-container .display-toggle .toggle-title span {
  position: relative;
  z-index: 1;
  font-weight: bold;
}
.astro-page .display-toggle-container .display-toggle .toggle-title:before {
  content: '';
  position: absolute;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  transition: 0.4s all ease-in;
  background: #d1d1d3;
}
.astro-page .display-toggle-container .display-toggle .toggle-title.left:before {
  right: -100%;
  top: 0;
}
.astro-page .display-toggle-container .display-toggle .toggle-title.left.sel:before {
  right: 0;
  top: 0;
}
.astro-page .display-toggle-container .display-toggle .toggle-title.right:before {
  left: -100%;
  top: 0;
}
.astro-page .display-toggle-container .display-toggle .toggle-title.right.sel:before {
  left: 0;
  top: 0;
}
.astro-page .display-toggle-container .display-toggle .toggle-title + .toggle-title {
  margin-left: -1px;
}
.astro-page .chart-info {
  height: 400px;
  background: #000000;
  padding: 3px;
  overflow: hidden;
  border-radius: 7px;
  margin-top: 20px;
}
.astro-page .data-info {
  display: flex;
  flex-direction: row;
}
.astro-page .data-info .page-panel {
  min-height: 100px;
}
.astro-page .data-info .page-panel.video-panel {
  flex: 1;
  position: relative;
}
.astro-page .data-info .page-panel.video-panel .video-title-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  transform: translateY(calc(-100% + 28px));
  transition: 0.5s all ease-in-out;
}
.astro-page .data-info .page-panel.video-panel .video-title-container .close-video {
  display: flex;
  justify-content: space-between;
  padding: 7px;
  background: rgba(230, 230, 230, 0.4) !important;
  color: #ffffff;
}
.astro-page .data-info .page-panel.video-panel .video-title-container .close-video .btn-list i {
  cursor: pointer;
}
.astro-page .data-info .page-panel.video-panel .video-title-container .close-video .btn-list i + i {
  margin-left: 15px;
}
.astro-page .data-info .page-panel.video-panel .video-title-container .tag-ctrl {
  position: relative;
  padding: 10px 7px;
  background: rgba(230, 230, 230, 0.5) !important;
}
.astro-page .data-info .page-panel.video-panel .video-title-container .tag-ctrl .curTag-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 7px;
}
.astro-page .data-info .page-panel.video-panel .video-title-container .tag-ctrl .curTag-container .curTag {
  padding: 5px 15px;
  border-radius: 50px;
  background: #18191c;
  margin: 0 7px 7px 0;
  color: #fff;
}
.astro-page .data-info .page-panel.video-panel .video-title-container .tag-ctrl .curTag-container .curTag i {
  margin-left: 20px;
  cursor: pointer;
}
.astro-page .data-info .page-panel.video-panel .video-title-container .tag-ctrl .curTag-container .curTag.custom {
  background: #fcaf04;
  color: #fff;
  margin-right: 5px;
}
.astro-page .data-info .page-panel.video-panel .video-title-container.open {
  transform: translateY(0);
}
.astro-page .data-info .page-panel.video-panel .view-img {
  height: 100%;
  position: relative;
}
.astro-page .data-info .page-panel.video-panel .view-img img {
  object-fit: cover;
  opacity: 0.5;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  filter: grayscale(90%);
  -webkit-mask-image: -webkit-gradient(linear, right top, left top, color-stop(0, #000000), color-stop(0.45, rgba(0, 0, 0, 0.5)), color-stop(0.65, rgba(0, 0, 0, 0.25)), color-stop(1, rgba(0, 0, 0, 0)));
}
.astro-page .data-info .page-panel.info-panel {
  width: 65%;
  position: relative;
}
.astro-page .data-info .page-panel.info-panel .no-data {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: rgba(200, 200, 200, 0.8);
  width: 100%;
}
.astro-page .data-info .page-panel.info-panel .tag-list {
  display: block;
}
.astro-page .data-info .page-panel.info-panel .tag-list .tag {
  display: inline-flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #969696;
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.astro-page .data-info .page-panel.info-panel .tag-list .tag.object {
  background-color: #8a3cb3;
}
.astro-page .data-info .page-panel.info-panel .tag-list .tag.facial {
  background-color: #ef0d33;
}
.astro-page .data-info .page-panel.info-panel .tag-list .tag.custom {
  background-color: #fcaf04;
}
.astro-page .data-info .page-panel.info-panel .tag-list .tag + .tag {
  margin-left: -5px;
}
.astro-page .data-info .page-panel.info-panel .view-btn-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.astro-page .data-info .page-panel.info-panel .view-btn-container .view-btn {
  display: inline-flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-color: #c8c8c8;
  color: #000;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.astro-page .data-info .page-panel.info-panel .view-btn-container .view-btn.see:hover {
  color: #fff;
  background-color: rgba(50, 150, 250, 0.8);
}
.astro-page .data-info .page-panel.info-panel .view-btn-container .view-btn.remove:hover {
  color: #fff;
  background-color: rgba(250, 50, 100, 0.8);
}
.astro-page .data-info .page-panel + .page-panel {
  margin-left: 20px;
}
.astro-page .eyes-container {
  position: absolute;
  bottom: 0;
  left: 50px;
  width: calc(100% - 100px);
  padding: 15px;
  border-top-left-radius: 7px;
  z-index: 5;
  background: #e6e6e6 !important;
  transition: 0.5s all ease-in-out;
}
.astro-page .eyes-container.open {
  bottom: 0;
}
.astro-page .eyes-container .eye-btn {
  position: absolute;
  top: -30px;
  right: 0;
  background: #e6e6e6 !important;
  color: #000;
  border-bottom: 1px solid rgba(200, 200, 200, 0.6);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 30px;
  width: 30px;
  font-size: 15px;
  cursor: pointer;
}
.astro-page .eyes-container .eye-list-container {
  display: flex;
  flex-direction: column;
}
.astro-page .eyes-container .eye-list-container .eye-list {
  display: flex;
  flex-direction: row;
  padding: 5px 0 15px;
}
.astro-page .eyes-container .eye-list-container .eye-list .list-item {
  text-align: center;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.astro-page .eyes-container .eye-list-container .eye-list .list-item .item-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 30px;
  width: 30px;
  background: #18191c;
  border-radius: 50%;
  margin: 0 auto 5px;
  transition: 0.5s all ease-in-out;
}
.astro-page .eyes-container .eye-list-container .eye-list .list-item .item-icon i {
  font-size: 15px;
  color: #ffffff;
  transition: 0.5s all ease-in-out;
}
.astro-page .eyes-container .eye-list-container .eye-list .list-item span {
  display: block;
  color: #18191c;
}
.astro-page .eyes-container .eye-list-container .eye-list .list-item + .list-item {
  margin-left: 30px;
}
.astro-page .eyes-container .eye-list-container .eye-list .list-item.add {
  margin-right: 20px;
}
.astro-page .eyes-container .eye-list-container .eye-list .list-item.add:hover .item-icon {
  background: #008000;
}
.astro-page .eyes-container .eye-list-container .eye-list .list-item.add:hover .item-icon i {
  color: #c8c8c8;
}
.astro-page .eyes-container .eye-list-container .eye-list .list-item.unset .item-icon {
  background: #969696;
}
.astro-page .eyes-container .eye-list-container .eye-list .list-item:hover:not(.add) {
  margin-left: 35px;
}
.astro-page .eyes-container .eye-list-container .eye-list .list-item:hover:not(.add) i {
  color: #c8c8c8;
}
.astro-page .eyes-container .selected-eye {
  padding: 25px 0 5px;
  position: relative;
}
.astro-page .eyes-container .selected-eye .close-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 16px;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}
.astro-page .eyes-container .selected-eye .eye-status-container {
  display: flex;
  margin-right: auto;
}
.astro-page .eyes-container .selected-eye .eye-status-container .eye-status {
  display: inline;
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #323232;
  margin-right: 10px;
}
.astro-page .eyes-container .selected-eye .eye-status-container .eye-status.active {
  background: #008000;
}
.astro-page .eyes-container .selected-eye .eye-status-container .eye-status.not-active {
  background: #800000;
}
.astro-page .eyes-container .selected-eye .eye-status-container .eye-text {
  color: #000;
}
.astro-page .eyes-container .selected-eye .selected-eye-section .section-header {
  width: 100%;
  text-align: center;
  margin: 10px 0px;
}
.astro-page .eyes-container .selected-eye .selected-eye-section .section-header .header-icon {
  width: 30px;
  height: 30px;
  background: #646464;
  color: #fff;
  margin: 0 7px;
  border-radius: 50%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border: 2px solid #fff;
}
.astro-page .eyes-container .selected-eye .selected-eye-section .section-header:before,
.astro-page .eyes-container .selected-eye .selected-eye-section .section-header:after {
  content: "";
  width: calc(50% - 48px);
  border-top: 2px solid #fff;
  display: inline-block;
}
.astro-page .eyes-container .selected-eye .dynamic-field {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.astro-page .eyes-container .selected-eye .dynamic-field .icon-btn {
  background: #c8c8c8;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-top: 25px;
  transition: 0.5s all ease-in-out;
}
.astro-page .eyes-container .selected-eye .dynamic-field .icon-btn:hover {
  background: #18191c;
  color: #c8c8c8;
}
.astro-page .eyes-container .selected-eye .dynamic-field .address-section {
  display: inline-flex;
  flex: 1;
}
.astro-page .eyes-container .selected-eye .dynamic-field .address-search {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  margin-top: 10px;
}
.astro-page .eyes-container .selected-eye .dynamic-field .address-search .sel-ctrl {
  background: #c8c8c8;
  color: #000;
  border: 2px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 10px;
  border-radius: 50%;
  margin: auto 0;
  transition: 0.5s all ease-in-out;
}
.astro-page .eyes-container .selected-eye .dynamic-field .address-search .sel-ctrl.left {
  margin-right: 10px;
}
.astro-page .eyes-container .selected-eye .dynamic-field .address-search .sel-ctrl.right {
  margin-left: 10px;
}
.astro-page .eyes-container .selected-eye .dynamic-field .address-search .sel-ctrl:hover {
  background: #18191c;
  color: #c8c8c8;
}
.astro-page .eyes-container .selected-eye .dynamic-field .address-search .sel-group-container {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  flex: 1;
}
.astro-page .eyes-container .selected-eye .dynamic-field .address-search .sel-group-container .sel-item {
  display: inline-flex;
  padding: 7px 14px;
  margin-right: 10px;
  flex-direction: column;
  border: 1px solid #646464;
  border-radius: 7px;
  background: rgba(24, 25, 28, 0.7) !important;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.astro-page .eyes-container .selected-eye .dynamic-field .address-search .sel-group-container .sel-item .item-row {
  text-transform: capitalize;
}
.astro-page .eyes-container .selected-eye .dynamic-field .address-search .sel-group-container .sel-item:hover {
  background: rgba(100, 100, 100, 0.8) !important;
}
.astro-page .eyes-container .selected-eye .btn-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 20px 5px 5px;
}
.susie-page {
  display: block !important;
}
.susie-page #loader-wrapper {
  width: 300px !important;
  height: 300px !important;
}
.susie-page .susie-view {
  height: calc(100% - 46px);
  position: relative;
  background: rgba(24, 25, 28, 0) !important;
}
.susie-page .susie-view .title-btn-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex: 1;
  z-index: 3;
  padding: 10px 15px;
  position: relative;
}
.susie-page .susie-view .title-btn-container .title-btn.icon-btn {
  background: #fccd04;
  color: #18191c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 15px;
  border-radius: 50%;
  transition: 0.5s background ease-in-out;
}
.susie-page .susie-view .title-btn-container .title-btn.icon-btn.c2 {
  background: #8a3cb3;
}
.susie-page .susie-view .title-btn-container .title-btn.icon-btn.c3 {
  background: #b4b4b4;
}
.susie-page .susie-view .title-btn-container .title-btn.icon-btn:hover {
  background: rgba(180, 180, 180, 0.7);
}
.susie-page .susie-view .title-btn-container .title-btn + .title-btn {
  margin-left: 20px;
}
.susie-page .susie-view .filter-menu {
  position: absolute;
  padding: 10px 15px;
  top: 0;
  right: 0;
  height: calc(100% - 20px);
  display: inline-flex;
  flex-direction: row;
  z-index: 2;
}
.susie-page .susie-view .filter-menu .title-btn-container {
  padding-top: 0;
}
.susie-page .susie-view .filter-menu .filter-container {
  display: flex;
  flex-direction: column;
}
.susie-page .susie-view .filter-menu .filter-container .sel-ctrl {
  font-size: 30px;
  color: #fff;
  text-align: center;
  transition: 0.5s all ease-in-out;
  cursor: pointer;
  width: 154px;
  margin-left: auto;
}
.susie-page .susie-view .filter-menu .filter-container .sel-ctrl:hover {
  color: #fccd04;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list {
  flex: 1;
  overflow-y: hidden;
  scroll-behavior: smooth;
  white-space: nowrap;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .filter-item {
  height: 100px;
  width: 150px;
  border: 2px solid #fff;
  position: relative;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
  display: inline-block;
  overflow: hidden;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .filter-item h2 {
  font-size: 1.3rem;
  text-align: center;
  z-index: 3;
  position: absolute;
  top: 50%;
  margin: 0;
  width: 100%;
  transform: translateY(-50%);
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .filter-item img {
  object-fit: cover;
  height: 100%;
  min-width: 100%;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .filter-item::before {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(24, 25, 28, 0.5) !important;
  z-index: 1;
  position: absolute;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .filter-item:hover:not(.sel) {
  opacity: 0.5;
  border-color: #fccd04;
  color: #fccd04;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .filter-item.sel {
  border-color: #8a3cb3;
  color: #8a3cb3;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .sub-filter-container {
  display: inline-flex;
  flex-direction: row;
  margin-right: 10px;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .sub-filter-container .sub-filter-item {
  height: 100px;
  width: 150px;
  border: 2px solid #fff;
  background: #18191c;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .sub-filter-container .sub-filter-item h2 {
  font-size: 1.3rem;
  text-align: center;
  z-index: 3;
  position: absolute;
  top: 50%;
  margin: 0;
  width: 100%;
  transform: translateY(-50%);
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .sub-filter-container .sub-filter-item:hover:not(.sel) {
  opacity: 0.5;
  border-color: #fccd04;
  color: #fccd04;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .sub-filter-container .sub-filter-item.sel {
  border-color: #8a3cb3;
  color: #8a3cb3;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container .sub-filter-container .sub-filter-item + .sub-filter-item {
  margin-left: 10px;
}
.susie-page .susie-view .filter-menu .filter-container .filter-list .filter-item-container + .filter-item-container {
  margin-top: 10px;
}
.susie-page .susie-view .susie-view-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.susie-page .susie-view .susie-view-container #filterVideo {
  position: relative;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
  display: none;
}
.susie-page .susie-view .susie-view-container #filterVideo.active {
  display: block;
}
.susie-page .susie-view .susie-view-container #filterCanvas,
.susie-page .susie-view .susie-view-container #filter3DCanvas {
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-height: 100%;
  z-index: 1;
  display: none;
}
.susie-page .susie-view .susie-view-container #filterCanvas.active,
.susie-page .susie-view .susie-view-container #filter3DCanvas.active {
  display: block;
}
.susie-page .susie-view .susie-view-container .live-container {
  position: relative;
  z-index: 2;
}
.susie-page .susie-view .susie-view-container .live-container #viewVideo {
  width: 100%;
  min-height: 100%;
}
.susie-page .susie-view .susie-view-container .live-container #viewVideo.inactive {
  display: none;
}
.susie-page .susie-view .susie-view-container .live-container #video {
  width: 640px;
  height: 483px;
  visibility: hidden;
  position: absolute;
}
.susie-page .susie-view .susie-view-container .live-container #controlCanvas {
  width: 100%;
  min-height: 100%;
  display: none;
}
.susie-page .susie-view .susie-view-container .live-container #controlCanvas.active {
  display: block;
}
.susie-page .susie-view .susie-view-container .live-container.filter {
  width: 20%;
  height: 20%;
  position: absolute;
  overflow: hidden;
  bottom: 15px;
  right: 15px;
  border: 2px solid #ffffff;
  border-radius: 5px;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
}
.susie-page .susie-view .susie-view-container .live-container.filter.noshow {
  visibility: hidden;
}
.susie-page .susie-view .susie-view-container .filter-3d-container {
  position: absolute;
  overflow: hidden;
  bottom: 15px;
  left: 15px;
  display: flex;
  flex-direction: row;
  height: 20%;
  width: calc(80% - 46px);
}
.susie-page .susie-view .susie-view-container .filter-3d-container .filter-ctrl {
  font-size: 30px;
  color: #fccd04;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  padding: 10px;
  z-index: 1;
  border: 2px solid #fccd04;
  border-radius: 5px;
  background: rgba(24, 25, 28, 0.5) !important;
  transition: 0.5s all ease-in-out;
  cursor: pointer;
}
.susie-page .susie-view .susie-view-container .filter-3d-container .filter-ctrl:hover {
  background: rgba(252, 205, 4, 0.5) !important;
  color: #18191c;
}
.susie-page .susie-view .susie-view-container .filter-3d-container .filter-ctrl.left {
  margin-right: 10px;
}
.susie-page .susie-view .susie-view-container .filter-3d-container .filter-ctrl.right {
  margin-left: 10px;
}
.susie-page .susie-view .susie-view-container .filter-3d-container .filter-3d-list {
  flex: 1;
  z-index: 2;
  scroll-behavior: smooth;
  white-space: nowrap;
  overflow-x: hidden;
}
.susie-page .susie-view .susie-view-container .filter-3d-container .filter-3d-list .filter-item {
  width: 150px;
  height: calc(100% - 4px);
  color: #fff;
  border: 2px solid #ffffff;
  border-radius: 5px;
  font-size: 1.2rem;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  transition: 0.5s all ease-in-out;
  cursor: pointer;
}
.susie-page .susie-view .susie-view-container .filter-3d-container .filter-3d-list .filter-item + .filter-item {
  margin-left: 10px;
}
.susie-page .susie-view .susie-view-container .filter-3d-container .filter-3d-list .filter-item:hover {
  background: rgba(138, 60, 179, 0.2) !important;
  color: #8a3cb3;
  border-color: #8a3cb3;
}
.susie-page .susie-view .tag-container {
  position: absolute;
  padding: 10px 15px;
  top: 0px;
  left: 0px;
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
}
.susie-page .susie-view .tag-container .tag-block {
  list-style: none;
}
.susie-page .susie-view .tag-container .tag-block .tag {
  background: rgba(252, 205, 4, 0.7) !important;
  border-radius: 7px;
  color: #fff;
  text-align: center;
  padding: 3px 10px;
  display: inline-block;
}
.susie-page .susie-view .tag-container .tag-block:nth-child(even) {
  margin-left: 20px;
}
.susie-page .susie-view .tag-container .tag-block + .tag-block {
  margin-top: 10px;
}
.wakanda-page {
  display: block !important;
}
.wakanda-page .tro-btn {
  cursor: pointer;
}
.wakanda-page .tro-btn .btn-icon {
  color: #fff !important;
  background: #a929ee !important;
}
.wakanda-page .tro-btn.add {
  background: none;
  color: #008000 !important;
  border: 1px dashed #008000;
}
.wakanda-page .tro-btn.add .btn-txt {
  color: #008000;
}
.wakanda-page .tro-btn.add .btn-icon {
  color: #18191c !important;
  background: #008000 !important;
}
.wakanda-page .tro-btn:hover .btn-icon {
  margin-left: -20px;
}
.wakanda-page .tro-btn.inverse {
  background: #a929ee;
}
.wakanda-page .tro-btn.inverse .btn-txt {
  color: #fff !important;
}
.wakanda-page .tro-btn.inverse .btn-icon {
  color: #a929ee !important;
  background: #fff !important;
}
.wakanda-page .title {
  min-height: 220px;
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: initial !important;
  z-index: 2;
}
.wakanda-page .title .title-content {
  flex: 1;
  z-index: 1;
  padding: 10px 15px;
}
.wakanda-page .title .title-content .no-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: rgba(200, 200, 200, 0.8);
  height: 100%;
}
.wakanda-page .title .title-content .title-text {
  font-size: 30px;
  width: 100%;
  color: rgba(200, 200, 200, 0.8);
}
.wakanda-page .title .title-content .subtitle-text {
  font-size: 20px;
  width: 100%;
  color: rgba(150, 150, 150, 0.8);
}
.wakanda-page .title .title-content .add-input {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wakanda-page .title .title-content .add-input .btn-icon {
  background: #008000 !important;
}
.wakanda-page .title .title-content .add-input .tro-input {
  margin-top: 30px;
}
.wakanda-page .title .title-content .add-input .tro-input input,
.wakanda-page .title .title-content .add-input .tro-input .react-datepicker-wrapper {
  flex: 1;
}
.wakanda-page .title .title-content .add-input .tro-input.sz-1 {
  min-width: 10%;
}
.wakanda-page .title .title-content .add-input .tro-input.sz-2 {
  min-width: 20%;
}
.wakanda-page .title .title-content .add-input .tro-input.sz-3 {
  min-width: 30%;
}
.wakanda-page .title .title-content .add-input .tro-input.sz-4 {
  min-width: 40%;
}
.wakanda-page .title .title-content .add-input .tro-input.sz-5 {
  min-width: 50%;
}
.wakanda-page .title .title-content .add-input .tro-input.sz-6 {
  min-width: 60%;
}
.wakanda-page .title .title-content .add-input .tro-input.sz-7 {
  min-width: 70%;
}
.wakanda-page .title .title-content .add-input .tro-input.sz-8 {
  min-width: 80%;
}
.wakanda-page .title .title-content .add-input .tro-input.sz-9 {
  min-width: 90%;
}
.wakanda-page .title .title-content .add-input .tro-input.sz-10 {
  min-width: 100%;
}
.wakanda-page .title .title-content .add-input .tro-input + .tro-input {
  margin-left: 0;
}
.wakanda-page .title .title-content .generate {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid rgba(200, 200, 200, 0.8);
}
.wakanda-page .title .title-content .generate .btn-icon {
  background: #008000 !important;
}
.wakanda-page .title .title-content .generate .inverse {
  background: #008000;
}
.wakanda-page .title .title-content .generate .inverse .btn-txt {
  color: #fff !important;
}
.wakanda-page .title .title-content .generate .inverse .btn-icon {
  color: #008000 !important;
  background: #fff !important;
}
.wakanda-page .title .title-img {
  width: 40%;
  object-fit: cover;
  opacity: 0.5;
  -webkit-mask-image: -webkit-gradient(linear, right top, left top, color-stop(0, #000000), color-stop(0.45, rgba(0, 0, 0, 0.5)), color-stop(0.65, rgba(0, 0, 0, 0.25)), color-stop(1, rgba(0, 0, 0, 0)));
}
.wakanda-page .title .update-title {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wakanda-page .title .update-title .title-text {
  margin: 10px 0;
  font-size: 40px;
}
.wakanda-page .title .update-title .subtitle-text {
  display: flex;
  flex-direction: row;
}
.wakanda-page .title .update-title .subtitle-text .sub-icon {
  margin-left: auto;
  color: #fff;
  transition: 0.5s all ease-in-out;
  opacity: 0.2;
  cursor: pointer;
}
.wakanda-page .title .update-title .subtitle-text .sub-icon:hover {
  opacity: 1;
}
.wakanda-page .title .update-title .subtitle-text .sub-icon + .sub-icon {
  margin-left: 20px;
}
.wakanda-page .title .update-title .update-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: auto;
}
.wakanda-page .title .update-title .update-content .content-section {
  display: flex;
  flex-direction: column;
  font-size: 1.3rem;
  text-align: center;
}
.wakanda-page .title .update-title .update-content .content-section .section-title {
  font-weight: bold;
}
.wakanda-page .title .update-title .update-content .content-section .section-info {
  opacity: 0.8;
  text-transform: capitalize;
}
.wakanda-page .title:before {
  content: '';
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.wakanda-page .title.add:before {
  background: rgba(0, 128, 0, 0.2);
}
.wakanda-page .title.update:before {
  background: rgba(169, 41, 238, 0.2) !important;
}
.wakanda-page .body-panel {
  padding: 10px 0px;
}
.wakanda-page .body-panel .no-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
  color: rgba(200, 200, 200, 0.8);
  width: 100%;
}
.wakanda-page .body-panel .bill-list {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.wakanda-page .body-panel .bill-list .bill-line-item {
  display: flex;
  flex-direction: row;
  padding: 0px 20px;
  border-radius: 5px;
  background: rgba(100, 100, 100, 0.1);
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 10px;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section.date {
  font-size: 30px;
  font-weight: bold;
  min-width: 30px;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section.base .name {
  font-size: 1.2rem;
  padding-bottom: 4px;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section.base .info {
  display: flex;
  flex-direction: row;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section.img {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section.img img {
  object-fit: cover;
  width: 100%;
  position: absolute;
  opacity: 0.4;
  top: 0;
  right: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(0.25, rgba(0, 0, 0, 0.5)), color-stop(0.5, #000000), color-stop(0.75, rgba(0, 0, 0, 0.5)), color-stop(1, rgba(0, 0, 0, 0)));
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section.btn-list {
  flex-direction: row;
  margin-left: 20px;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section.btn-list .line-btn {
  display: flex;
  font-size: 1.3rem;
  flex-direction: column;
  justify-content: center;
  opacity: 0.5;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section.btn-list .line-btn + .line-btn {
  margin-left: 30px;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section.btn-list .line-btn:hover {
  opacity: 1;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section .sub-line .info-item {
  display: flex;
  justify-content: row;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section .sub-line .info-item .info-icon {
  border-radius: 50%;
  height: 1.1rem;
  width: 1.1rem;
  font-size: 0.7rem;
  background: #a929ee;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-right: 3px;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section .sub-line .info-item.info-btn {
  border-radius: 50px;
  padding: 2px 10px;
  background: #000000;
  font-size: 0.8rem;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section .sub-line .info-item + .info-item {
  margin-left: 10px;
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section .sub-line .info-text {
  color: rgba(200, 200, 200, 0.7);
}
.wakanda-page .body-panel .bill-list .bill-line-item .line-section + .line-section {
  margin-left: 15px;
}
.wakanda-page .body-panel .bill-list .bill-line-item + .bill-line-item {
  margin-top: 7px;
}
.wakanda-page .body-panel .update-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.wakanda-page .body-panel .update-body .date-path {
  margin-top: 0 !important;
  margin-right: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto !important;
  max-height: 300px;
}
.wakanda-page .body-panel .update-body .date-path .date-container {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.wakanda-page .body-panel .update-body .date-path .date-container .date-selector {
  border-left: 2px solid #a929ee;
  position: relative;
}
.wakanda-page .body-panel .update-body .date-path .date-container .date-selector:before {
  position: absolute;
  content: '';
  top: 30%;
  left: -4px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #a929ee;
}
.wakanda-page .body-panel .update-body .date-path .date-container .date-info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.wakanda-page .body-panel .update-body .date-path .date-container .date-info .cycle-id {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid #fff;
  margin: 5px 10px 0 0;
}
.wakanda-page .body-panel .update-body .date-path .date-container .date-info .cycle-date {
  padding-top: 5px;
}
.wakanda-page .body-panel .update-body .date-path .date-container .date-info:hover {
  padding-left: 15px;
  padding-right: 5px;
}
.wakanda-page .body-panel .update-body .date-path .date-container .date-info.sel {
  color: #a929ee;
}
.wakanda-page .body-panel .update-body .date-path .date-container .date-info.sel .cycle-id {
  border-color: #a929ee;
}
.wakanda-page .body-panel .update-body .free-bucket {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 20px 5px;
  margin: 0 !important;
  font-size: 30px;
  font-weight: bold;
  background: rgba(169, 41, 238, 0.3) !important;
  color: #fff;
  flex: 1;
}
.wakanda-page .body-panel .update-body .selected-bucket {
  flex: 1;
}
.wakanda-page .body-panel .update-body .selected-bucket .cycle-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 7px;
}
.wakanda-page .body-panel .update-body .selected-bucket .cycle-info .cycle-date {
  display: flex;
  flex-direction: column;
  text-align: center;
  border-radius: 5px;
  overflow: hidden;
  font-size: 1.2rem;
  font-weight: bold;
}
.wakanda-page .body-panel .update-body .selected-bucket .cycle-info .cycle-date .date-month {
  background: #a929ee;
  padding: 4px 8px;
}
.wakanda-page .body-panel .update-body .selected-bucket .cycle-info .cycle-date .date-day {
  color: #000;
  background: #fff;
  padding-bottom: 3px;
}
.wakanda-page .body-panel .update-body .selected-bucket .cycle-content {
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
}
.wakanda-page .body-panel .update-body .selected-bucket .cycle-content.bill {
  color: #a929ee;
}
.wakanda-page .body-panel .update-body .selected-bucket .cycle-content.spend {
  color: #008000;
}
.wakanda-page .body-panel .update-body .selected-bucket .btn-container {
  flex-direction: column;
}
.wakanda-page .body-panel .update-body .selected-bucket .update-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  background: rgba(169, 41, 238, 0.4) !important;
  font-size: 1.3rem;
  margin: 10px 0;
}
.wakanda-page .body-panel .update-body .selected-bucket .update-message div span {
  font-weight: bold;
  font-size: 1.5rem;
}
.access .main-access .page-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.access .main-access .page-container .accessErrorMsg {
  position: fixed;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 21px;
  background: rgba(150, 50, 50, 0.2);
  border: 1px solid #963232;
  color: #ffffff;
  text-align: center;
  border-radius: 7px;
}
.access .main-access .page-container .uv-container {
  text-align: center;
}
.access .main-access .page-container .uv-container .input-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.access .main-access .page-container .uv-container input {
  background: rgba(0, 0, 0, 0);
  border: 2px solid rgba(50, 50, 50, 0.3);
  font-size: 1.3rem;
  color: #fff;
  padding: 3px 7px;
  border-radius: 50px;
  text-align: center;
}
.access .main-access .page-container .uv-container .input-btn {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: #ffffff;
  margin-left: 20px;
  opacity: 0.5;
  cursor: pointer;
  transition: 0.7s all ease;
}
.access .main-access .page-container .uv-container .input-btn:hover {
  opacity: 1;
}
.access-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.access-container .access-pad {
  position: relative;
  width: 400px;
  height: 450px;
}
.access-container .access-pad #svg {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: default !important;
}
.access-container .access-pad #svg .node-layer .node-container .input-field .port {
  cursor: pointer;
  opacity: 0.1;
  transition: 0.5s all ease;
}
.access-container .access-pad #svg .node-layer .node-container .input-field .port .port-scrim {
  fill: transparent;
}
.access-container .access-pad #svg .node-layer .node-container .input-field .port .port-outer {
  fill: #777777;
}
.access-container .access-pad #svg .node-layer .node-container .input-field .port .port-inner {
  fill: #5F5F5F;
}
.access-container .access-pad #svg .node-layer .node-container .input-field .port:hover {
  opacity: 1;
}
.access-container .access-pad #svg .node-layer .node-container .input-field .port.sel {
  opacity: 1;
}
.access-container .access-pad #svg .node-layer .node-container .input-field .port.sel .port-outer {
  fill: #fcfcfc;
}
.access-container .access-pad #svg .node-layer .node-container .input-field .port.sel .port-inner {
  fill: #fcfcfc;
}
.access-container .access-pad #svg .connector-handle {
  fill: #fff;
}
.access-container .access-pad #svg .connector-path {
  stroke: #fff;
  stroke-width: 10;
  fill: none;
}
.access-container .access-pad #svg .connector-path-outline {
  stroke: #333;
  stroke-width: 6;
  fill: none;
}
.access-btn-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 10px;
  margin-top: 20px;
}
.access-btn-container .btn {
  background: rgba(255, 255, 255, 0.7);
  color: #000000;
  padding: 5px 25px;
  border-radius: 50px;
  font-size: 14px;
  margin-left: 10px;
  white-space: nowrap;
  opacity: 0.4;
  cursor: pointer;
  transition: 0.5s all ease;
}
.access-btn-container .btn:hover {
  opacity: 1;
}
.access-btn-container .btn.reverse {
  background: rgba(0, 0, 0, 0);
  color: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.tiana-page {
  display: block !important;
  /* All */
}
.tiana-page .ctr {
  text-align: center;
}
.tiana-page .tro-btn.btn {
  cursor: pointer;
}
.tiana-page .tro-btn.btn .btn-icon {
  color: #fff !important;
  background: #529e46 !important;
}
.tiana-page .tro-btn.btn:hover:not(.noshift) .btn-icon {
  margin-left: -20px;
}
.tiana-page .ctrl-icon {
  display: inline;
  border-radius: 50%;
  color: #000;
  height: 25px;
  width: 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  margin-left: 10px;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.tiana-page .ctrl-icon:hover {
  margin-right: 5px;
}
.tiana-page .recipes-container {
  width: 60%;
  position: relative;
}
.tiana-page .recipes-container .loadingMsg {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 10;
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  padding: 10px 0;
  border-radius: 7px;
  background: #18191c;
  color: #fff;
  font-weight: bold;
  opacity: 1;
}
.tiana-page .recipes-container .alice-carousel .alice-carousel__stage-item {
  flex: 1;
}
.tiana-page .recipes-container .alice-carousel .mini-recipe-container {
  margin: 0 7px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}
.tiana-page .recipes-container .alice-carousel .mini-recipe-container .inner-container {
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
}
.tiana-page .recipes-container .alice-carousel .mini-recipe-container .inner-container .rec-top {
  height: 100px;
}
.tiana-page .recipes-container .alice-carousel .mini-recipe-container .inner-container .rec-top img {
  object-fit: cover;
  width: 100%;
  min-height: 100%;
}
.tiana-page .recipes-container .alice-carousel .mini-recipe-container .inner-container .rec-bottom {
  font-size: 0.8rem;
  padding: 7px 5px;
  background: #529e46;
  flex: 1;
  text-align: center;
}
.tiana-page .recipes-container .alice-carousel .mini-recipe-container .inner-container.final {
  background: #1e1e1e;
  position: relative;
}
.tiana-page .recipes-container .alice-carousel .mini-recipe-container .inner-container.final:before {
  content: 'Fin!';
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  font-weight: bold;
  color: #000;
  z-index: 100;
  text-align: center;
}
.tiana-page .recipes-container .alice-carousel .mini-recipe-container .inner-container.final img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  min-height: 100%;
  filter: grayscale(100%);
}
.tiana-page .recipes-container .no-recipe {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  opacity: 0.5;
  height: 100%;
  position: relative;
}
.tiana-page .recipes-container .no-recipe div {
  background: rgba(100, 100, 100, 0.55);
  border-radius: 5px;
  flex: 1;
  margin: 5px 10px;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
}
.tiana-page .recipes-container .no-recipe:before {
  content: 'No Recipes';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  font-weight: bold;
  background-color: #000000;
  width: 100%;
  text-align: center;
  opacity: 0.55;
}
.tiana-page .recipes-container.full {
  width: 100%;
}
.tiana-page .recipes-container.full .no-recipe {
  height: 150px;
  opacity: 0.3;
}
.tiana-page .title {
  min-height: 220px;
  display: flex;
  flex-direction: row;
  position: relative;
}
.tiana-page .title .title-content {
  flex: 1;
  z-index: 1;
  padding: 10px 15px 20px;
  flex-direction: row;
  max-width: 75%;
}
.tiana-page .title .title-content .title-text {
  font-size: 30px;
  color: rgba(200, 200, 200, 0.8);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.tiana-page .title .title-content .title-text .btn-icon {
  display: inline;
  border-radius: 50%;
  background: #529e46;
  color: #fff;
  height: 25px;
  width: 25px;
  text-align: center;
  display: flex;
  font-size: 1.2rem;
  flex-direction: column;
  justify-content: center;
  margin-right: 10px;
  cursor: pointer;
}
.tiana-page .title .title-content .content-row {
  display: flex;
  overflow: hidden;
}
.tiana-page .title .title-content .content-row.col {
  flex-direction: column;
}
.tiana-page .title .title-content .content-row.row {
  flex-direction: row;
}
.tiana-page .title .title-content .content-row .daily-facts {
  flex: 1;
  padding: 20px 0 10px;
  display: flex;
  flex-direction: row;
}
.tiana-page .title .title-content .content-row .daily-facts .fact {
  display: flex;
  flex-direction: row;
  max-width: 60%;
}
.tiana-page .title .title-content .content-row .daily-facts .fact .btn-icon {
  display: inline;
  border-radius: 50%;
  background: #529e46;
  color: #fff;
  height: 25px;
  width: 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 10px;
}
.tiana-page .title .title-content .content-row .daily-facts .fact span {
  flex: 1;
  font-size: 20px;
  font-size: 1.1rem;
}
.tiana-page .title .title-content .content-row .daily-facts .fact + .fact {
  margin-left: 15px;
}
.tiana-page .title .title-content .content-row .tag-btn-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex: 1;
}
.tiana-page .title .title-content .content-row .tag-btn-container .tro-btn {
  margin: 7px 0 auto;
  cursor: pointer;
  opacity: 0.9;
  transition: 0.5s all ease-in-out;
  margin-right: 7px;
}
.tiana-page .title .title-content .content-row .tag-btn-container .tro-btn .btn-icon {
  background: #529e46;
  color: #fff;
}
.tiana-page .title .title-content .content-row .tag-btn-container .tro-btn:hover,
.tiana-page .title .title-content .content-row .tag-btn-container .tro-btn.sel {
  background: #18191c;
  opacity: 0.7;
}
.tiana-page .title .title-content .content-row .tag-btn-container .tro-btn:hover .btn-txt,
.tiana-page .title .title-content .content-row .tag-btn-container .tro-btn.sel .btn-txt {
  color: #fff !important;
}
.tiana-page .title .title-content .content-row .tag-btn-container .tro-btn:hover .btn-icon,
.tiana-page .title .title-content .content-row .tag-btn-container .tro-btn.sel .btn-icon {
  color: #18191c;
}
.tiana-page .title .title-content .content-row.btn-row {
  justify-content: flex-end;
}
.tiana-page .title .title-content .content-row.btn-row .btn-icon {
  display: inline;
  border-radius: 50%;
  color: #000;
  height: 25px;
  width: 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  margin-left: 10px;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.tiana-page .title .title-content .content-row.btn-row .btn-icon:hover {
  margin-right: 5px;
}
.tiana-page .title .title-content .content-row.btn-row.disabled {
  position: relative;
}
.tiana-page .title .title-content .content-row.btn-row.disabled:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background: rgba(0, 0, 0, 0.8);
}
.tiana-page .title .title-content .content-row + .content-row {
  margin-top: 10px;
}
.tiana-page .title .title-img {
  width: 25%;
  object-fit: cover;
  opacity: 0.5;
  -webkit-mask-image: -webkit-gradient(linear, right top, left top, color-stop(0, #000000), color-stop(0.45, rgba(0, 0, 0, 0.5)), color-stop(0.65, rgba(0, 0, 0, 0.25)), color-stop(1, rgba(0, 0, 0, 0)));
}
.tiana-page .search-panel {
  margin: 20px 7px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  z-index: 10;
}
.tiana-page .search-panel .title-text {
  font-size: 30px;
  color: rgba(200, 200, 200, 0.8);
  width: 100%;
  margin-bottom: 20px;
  padding: 0px 7px;
}
.tiana-page .search-panel .btn {
  cursor: pointer;
}
.tiana-page .search-panel .btn .btn-icon {
  background: #529e46;
  color: #fff;
}
.tiana-page .search-panel .btn:hover .btn-icon {
  margin-left: -20px;
}
.tiana-page .search-panel .tro-input {
  justify-content: flex-end;
  display: inline-flex;
}
.tiana-page .search-panel .tro-input input,
.tiana-page .search-panel .tro-input .react-datepicker-wrapper {
  flex: 1;
}
.tiana-page .search-panel .tro-input .chip {
  background: #529e46;
}
.tiana-page .search-panel .tro-input .optionContainer {
  color: #000;
}
.tiana-page .search-panel .tro-input .optionContainer li.highlight,
.tiana-page .search-panel .tro-input .optionContainer li:hover {
  background: #529e46;
}
.tiana-page .search-panel .tro-input #tro-select div:first-child {
  border-radius: 7px;
}
.tiana-page .search-panel .tro-input.sz-1 {
  width: 10%;
}
.tiana-page .search-panel .tro-input.sz-2 {
  width: 20%;
}
.tiana-page .search-panel .tro-input.sz-3 {
  width: 30%;
}
.tiana-page .search-panel .tro-input.sz-4 {
  width: 40%;
}
.tiana-page .search-panel .tro-input.sz-5 {
  width: 50%;
}
.tiana-page .search-panel .tro-input.sz-6 {
  width: 60%;
}
.tiana-page .search-panel .tro-input.sz-7 {
  width: 70%;
}
.tiana-page .search-panel .tro-input.sz-8 {
  width: 80%;
}
.tiana-page .search-panel .tro-input.sz-9 {
  width: 90%;
}
.tiana-page .search-panel .tro-input.sz-10 {
  width: 100%;
}
.tiana-page .search-panel .tro-input + .tro-input {
  margin-left: 0px;
}
.tiana-page .search-results {
  min-height: 150px;
  padding: 20px 0;
}
.tiana-page .search-results .ctrl-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  margin-right: 10px;
}
.tiana-page .search-results .ctrl-row.disabled {
  position: relative;
}
.tiana-page .search-results .ctrl-row.disabled:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 100%;
  z-index: 9;
  background: rgba(24, 25, 28, 0.7) !important;
}
.tiana-page .search-results .rec-bottom {
  font-size: 1.2rem !important;
}
.slider-miniNav {
  margin: 10px 0;
  padding: 10px;
  display: flex;
  font-weight: bold;
  border-radius: 3px;
}
.slider-miniNav .nav-item {
  display: flex;
  flex-direction: row;
  padding: 7px 15px;
  border-radius: 50px;
  cursor: pointer;
  transition: 0s all;
}
.slider-miniNav .nav-item span {
  margin-left: 10px;
  transition: 0s all;
  width: 0;
  overflow: hidden;
}
.slider-miniNav .nav-item.sel {
  background: #18191c;
  transition: 0.5s all ease-in-out;
}
.slider-miniNav .nav-item.sel span {
  width: 100%;
  transition: 0.5s all ease-in-out;
}
.slider-miniNav .nav-item + .nav-item {
  margin-left: 20px;
}
.slider-body {
  height: 450px;
  margin-bottom: 20px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  scroll-behavior: smooth;
}
.slider-body .body-col {
  position: relative;
  border-radius: 7px;
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  height: 100%;
  white-space: initial;
}
.slider-body .body-col.img-title {
  position: relative;
}
.slider-body .body-col.img-title:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: rgba(24, 25, 28, 0.5) !important;
}
.slider-body .body-col.img-title .title-content {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  padding: 10px;
}
.slider-body .body-col.img-title .title-content h1 {
  margin-top: 0 !important;
  font-size: 2.5rem;
}
.slider-body .body-col.img-title .title-content h1 input,
.slider-body .body-col.img-title .title-content h1 textarea {
  font-size: 2.5rem;
  border: none;
  background: none;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  max-width: 100%;
  resize: none;
  overflow: hidden;
}
.slider-body .body-col.img-title .title-content .title-meta {
  display: flex;
  flex-direction: row;
}
.slider-body .body-col.img-title .title-content .title-meta .meta-info {
  display: flex;
  flex-direction: row;
}
.slider-body .body-col.img-title .title-content .title-meta .meta-info input {
  border: none;
  background: none;
  color: #fff;
}
.slider-body .body-col.img-title .title-content .title-meta .meta-info i {
  margin-right: 7px;
}
.slider-body .body-col.img-title .title-content .title-meta .meta-info + .meta-info {
  margin-left: 35px;
}
.slider-body .body-col.img-title .title-content .title-meta .meta-info.fav {
  background: rgba(206, 120, 7, 0.9) !important;
  border-radius: 50px;
  padding: 5px 15px;
  cursor: pointer;
  transition: 0.5s all ease;
}
.slider-body .body-col.img-title .title-content .title-meta .meta-info.fav:hover {
  opacity: 0.7;
}
.slider-body .body-col img {
  object-fit: cover;
  min-width: 100%;
  height: 100%;
  z-index: 0;
}
.slider-body .body-col.sz-1 {
  width: 10%;
}
.slider-body .body-col.sz-2 {
  width: 20%;
}
.slider-body .body-col.sz-3 {
  width: 30%;
}
.slider-body .body-col.sz-4 {
  width: 40%;
}
.slider-body .body-col.sz-5 {
  width: 50%;
}
.slider-body .body-col.sz-6 {
  width: 60%;
}
.slider-body .body-col.sz-7 {
  width: 70%;
}
.slider-body .body-col.sz-8 {
  width: 80%;
}
.slider-body .body-col.sz-9 {
  width: 90%;
}
.slider-body .body-col.sz-10 {
  width: 100%;
}
.slider-body .body-col .col-block {
  padding: 15px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.slider-body .body-col .col-block.fill {
  padding: 0;
}
.slider-body .body-col .col-block.scroll {
  overflow-y: auto;
}
.slider-body .body-col .col-block.flow {
  overflow: initial;
}
.slider-body .body-col .col-block.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.slider-body .body-col .col-block.c0 {
  color: #fff;
}
.slider-body .body-col .col-block.c1 {
  background: #ebebeb;
  color: #000;
}
.slider-body .body-col .col-block.c2 {
  background: #ce7807;
}
.slider-body .body-col .col-block.c3 {
  background: #18191c;
  color: #fff;
}
.slider-body .body-col .col-block.wl {
  z-index: 10;
  width: calc(100% + 30px);
  margin-left: -60px;
}
.slider-body .body-col .col-block.wr {
  z-index: 10;
  width: calc(100% + 30px);
  margin-right: -60px;
}
.slider-body .body-col .col-block.lrg {
  height: 65%;
}
.slider-body .body-col .col-block.sm {
  height: 35%;
}
.slider-body .body-col .col-block.flx {
  flex: 1;
}
.slider-body .body-col .col-block .edit-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  opacity: 0.7;
  cursor: pointer;
  transition: 0.7s all ease-in-out;
  background: rgba(24, 25, 28, 0.3) !important;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.slider-body .body-col .col-block .edit-btn:hover {
  opacity: 1;
}
.slider-body .body-col .tags {
  display: flex;
  flex-direction: column;
}
.slider-body .body-col .tags .tag-block {
  flex-wrap: initial;
  margin: 0 3px 7px;
}
.slider-body .body-col .tags .tag-block .tag-title {
  font-weight: bold;
}
.slider-body .body-col .tags .tag-block #tag-select div:first-child {
  border: none !important;
  min-height: 24px;
  min-width: 100px;
}
.slider-body .body-col .tags .tag-block #tag-select .chip {
  background: #000;
  margin-top: 3px;
  margin-bottom: 3px;
}
.slider-body .body-col .tags .tag-block #tag-select .optionListContainer {
  z-index: 100;
}
.slider-body .body-col .tags .tag-block #tag-select .optionListContainer .optionContainer {
  color: #000;
}
.slider-body .body-col .tags .tag-block #tag-select .optionListContainer .optionContainer li.highlight,
.slider-body .body-col .tags .tag-block #tag-select .optionListContainer .optionContainer li:hover {
  background: #ce7807;
}
.slider-body .body-col .tags .tag-block .searchBox {
  width: 7px;
}
.slider-body .body-col .summary {
  font-size: 1rem;
  line-height: 1.5rem;
  width: 100%;
  border: none;
  background: none;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}
.slider-body .body-col .section-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 15px;
}
.slider-body .body-col .section-title span {
  font-weight: bold;
  font-size: 1.5rem;
}
.slider-body .body-col .txt-section .section-title {
  margin-right: 50px;
}
.slider-body .body-col .txt-section .section-title .tro-btn {
  background: #529e46;
}
.slider-body .body-col .txt-section .section-title .tro-btn .btn-txt {
  color: #fff;
}
.slider-body .body-col .txt-section .section-title .tro-btn .btn-icon {
  color: #529e46 !important;
  background-color: #fff !important;
}
.slider-body .body-col .txt-section .ingredient {
  display: flex;
  margin-bottom: 5px;
}
.slider-body .body-col .txt-section .ingredient .step-icon {
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 25px;
  min-height: 25px;
  background: #ce7807;
  border-radius: 50%;
  margin: 0 7px;
  transition: 0.5s all ease;
  cursor: pointer;
}
.slider-body .body-col .txt-section .ingredient .step-icon i {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.2rem;
  transition: 0.5s all ease;
}
.slider-body .body-col .txt-section .ingredient .step-icon i.hover {
  display: none;
}
.slider-body .body-col .txt-section .ingredient .step-icon:hover {
  background: #c83232;
}
.slider-body .body-col .txt-section .ingredient .step-icon:hover i.base {
  display: none;
}
.slider-body .body-col .txt-section .ingredient .step-icon:hover i.hover {
  display: initial;
}
.slider-body .body-col .txt-section .ingredient input {
  border: 1px solid rgba(50, 50, 50, 0.05);
  background: none;
}
.slider-body .body-col .txt-section .ingredient input.sm {
  width: 50px;
}
.slider-body .body-col .txt-section .ingredient input.flx {
  flex: 1;
}
.slider-body .body-col .instructions .section-title .tro-btn {
  background: #529e46;
}
.slider-body .body-col .instructions .section-title .tro-btn .btn-txt {
  color: #fff;
}
.slider-body .body-col .instructions .section-title .tro-btn .btn-icon {
  color: #529e46 !important;
  background-color: #fff !important;
}
.slider-body .body-col .instructions .instruction {
  display: flex;
  margin-bottom: 5px;
}
.slider-body .body-col .instructions .instruction .step-section textarea {
  width: 100%;
  resize: none;
  border: none;
  background: none;
}
.slider-body .body-col .instructions .instruction .step-section.flx {
  flex: 1;
}
.slider-body .body-col .instructions .instruction .step-section + .step-section {
  margin-left: 7px;
}
.slider-body .body-col .instructions .instruction .step-icon {
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 25px;
  min-height: 25px;
  background: #ce7807;
  color: #fff;
  border-radius: 50%;
}
.slider-body .body-col .instructions .instruction .step-icon .hover {
  display: none;
}
.slider-body .body-col .instructions .instruction .step-icon:hover {
  background: #fa3232;
}
.slider-body .body-col .instructions .instruction .step-icon:hover .base {
  display: none;
}
.slider-body .body-col .instructions .instruction .step-icon:hover .hover {
  display: initial;
}
.slider-body .body-col .instructions .instruction input {
  border: 1px solid rgba(50, 50, 50, 0.05);
}
.slider-body .body-col .wine-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.slider-body .body-col .wine-list .section-title {
  width: 100% ;
}
.slider-body .body-col .wine-list .wine-pill {
  border-radius: 50px;
  padding-right: 10px;
  overflow: hidden;
  margin: 7px 4px;
  display: inline-flex;
  flex-direction: row;
  background: #18191c;
}
.slider-body .body-col .wine-list .wine-pill span {
  color: #fff;
  padding: 5px 15px;
}
.slider-body .body-col .wine-list .wine-pill i {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
.slider-body .body-col .site-list-container {
  display: flex;
  flex-direction: column;
}
.slider-body .body-col .site-list-container .site-btn {
  display: inline-flex;
  border-radius: 100px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0);
  justify-content: space-between;
  z-index: 0;
  max-width: 75%;
}
.slider-body .body-col .site-list-container .site-btn .site-icon {
  border-radius: 100px;
  cursor: pointer;
  background: #ce7807;
  color: #fff;
  text-align: center;
  justify-content: center;
  margin-left: 7px;
  padding: 3px 10px;
  z-index: 50;
  text-decoration: none !important;
}
.slider-body .body-col .site-list-container .site-btn .site-icon i {
  margin-left: 7px;
}
.slider-body .body-col .site-list-container .site-btn input {
  border: 0;
  padding-left: 15px;
  flex: 1;
}
.slider-body .body-col .site-list-container .site-btn + .site-btn {
  margin-top: 7px;
}
.slider-body .body-col .slide-section {
  opacity: 0;
  height: 0;
  position: absolute;
  overflow-y: hidden;
  top: 110%;
  left: 15px;
  width: calc(100% - 30px);
  transition-property: top;
  transition-duration: 0.5s;
  transition-delay: 0.3s;
}
.slider-body .body-col .slide-section.active {
  opacity: 1;
  top: 15px;
  height: initial;
}
.fillmore-page {
  display: flex;
  flex-direction: column;
}
.fillmore-page .esri-popup {
  z-index: 101 !important;
}
.fillmore-page .title {
  max-height: 100px;
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden !important;
}
.fillmore-page .title .title-content {
  flex: 1;
  z-index: 1;
  padding: 10px 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 2.5rem;
}
.fillmore-page .title .title-content span {
  color: #e36500;
  margin: auto 0;
}
.fillmore-page .title .title-content .title-btn-container {
  margin: auto 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.fillmore-page .title .title-content .title-btn-container .title-btn {
  background: #188170;
  color: #18191c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 25px;
  height: 25px;
  cursor: pointer;
  font-size: 15px;
  border-radius: 50%;
  transition: 0.5s all ease-in-out;
}
.fillmore-page .title .title-content .title-btn-container .title-btn.alt {
  background: #ffffff;
  opacity: 0.5;
}
.fillmore-page .title .title-content .title-btn-container .title-btn:hover {
  background: #969696;
}
.fillmore-page .title .title-content .title-btn-container .title-btn + .title-btn {
  margin-left: 10px;
}
.fillmore-page .title .title-img {
  width: 45%;
  object-position: 0 25%;
  object-fit: cover;
  opacity: 0.5;
  -webkit-mask-image: -webkit-gradient(linear, right top, left top, color-stop(0, #000000), color-stop(0.45, rgba(0, 0, 0, 0.5)), color-stop(0.65, rgba(0, 0, 0, 0.25)), color-stop(1, rgba(0, 0, 0, 0)));
}
.fillmore-page .map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.fillmore-page .map-container .arcMap {
  position: relative;
  width: 100%;
  height: 100%;
}
.fillmore-page .map-container .map-btn-container {
  position: absolute;
  top: 7px;
  right: 20px;
  display: flex;
  flex-direction: row;
  padding: 5px 10px;
  background: rgba(24, 25, 28, 0.5) !important;
  border-radius: 7px;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
}
.fillmore-page .map-container .map-btn-container .map-btn {
  background: #18191c;
  color: #188170;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 25px;
  height: 25px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 50%;
  transition: 0.5s all ease-in-out;
}
.fillmore-page .map-container .map-btn-container .map-btn.sel {
  background: #188170;
  color: #fff;
}
.fillmore-page .map-container .map-btn-container .map-btn:hover {
  background: rgba(150, 150, 150, 0.5);
}
.fillmore-page .map-container .map-btn-container .map-btn + .map-btn {
  margin-left: 10px;
}
.fillmore-page .map-container .map-side {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 15px;
  background: #18191c !important;
  transition: 0.5s all ease-in-out;
}
.fillmore-page .map-container .map-side .side-slider {
  background: #18191c;
  color: #fff;
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 25px;
  height: 25px;
  font-size: 15px;
  border-radius: 50%;
  top: 55%;
  right: -12.5px;
  cursor: pointer;
}
.fillmore-page .map-container .map-side .map-side-content {
  display: none;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto;
  flex-direction: column;
  padding: 15px;
  max-height: calc(100% - 30px);
}
.fillmore-page .map-container .map-side .map-side-content .slide-nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.fillmore-page .map-container .map-side .map-side-content .slide-nav .nav-item {
  font-weight: bold;
  cursor: pointer;
}
.fillmore-page .map-container .map-side .map-side-content .slide-nav .nav-item.sel {
  color: #e36500;
}
.fillmore-page .map-container .map-side .map-side-content .slide-nav .nav-item:hover:not(.sel) {
  text-decoration: underline;
}
.fillmore-page .map-container .map-side .map-side-content .slide-nav .nav-item + .nav-item {
  margin-left: 15px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 30px 0 0;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title h2 {
  color: #e36500;
  margin: 0;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex: 1;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container .title-btn.icon-btn {
  background: rgba(150, 150, 150, 0.7);
  color: #18191c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 10px;
  border-radius: 50%;
  transition: 0.5s background ease-in-out;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container .title-btn.icon-btn:hover {
  background: rgba(227, 101, 0, 0.7) !important;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container .title-btn.icon-btn:hover.c2 {
  background: rgba(24, 129, 112, 0.7) !important;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container .title-btn.toggle-btn {
  flex: 1;
  padding-left: 15px;
  text-align: right;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container .title-btn.toggle-btn .tro-input {
  display: inline-flex;
  border-radius: 100px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0);
  z-index: 0;
  width: 100%;
  transition: 0.5s all ease-in-out;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container .title-btn.toggle-btn .tro-input .btn-icon {
  border-radius: 50%;
  cursor: pointer;
  background: #646464;
  color: #000000;
  height: 20px;
  width: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 50;
  transition: 0.5s all ease-in-out;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container .title-btn.toggle-btn .tro-input input {
  height: 100%;
  border: 0;
  padding-left: 15px;
  padding-top: 2px;
  flex: 1;
  transition: 0.5s all ease-in-out;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container .title-btn.toggle-btn .tro-input.closed {
  width: 20px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container .title-btn.toggle-btn .tro-input.closed input {
  width: 0;
  padding: 0;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container .title-btn.toggle-btn .search-countdown {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  font-size: 75px;
  font-weight: bold;
  color: rgba(200, 200, 200, 0.7);
}
.fillmore-page .map-container .map-side .map-side-content .content-section .section-title .title-btn-container .title-btn + .title-btn {
  margin-left: 10px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .sel-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .sel-group .sel-ctrl {
  background: rgba(227, 101, 0, 0.7) !important;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 10px;
  border-radius: 50%;
  margin: auto 0;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .sel-group .sel-ctrl.left {
  margin-right: 10px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .sel-group .sel-ctrl.right {
  margin-left: 10px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .sel-group .sel-group-container {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  flex: 1;
}
.fillmore-page .map-container .map-side .map-side-content .content-section .sel-group .sel-group-container .sel-item {
  display: inline-flex;
  padding: 7px 0;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .sel-group-container .sel-item {
  width: 70px;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  padding: 0 5px;
  cursor: pointer;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .sel-group-container .sel-item .user-icon {
  background: rgba(200, 200, 200, 0.7);
  color: #18191c;
  display: inline;
  text-align: center;
  width: 35px;
  height: 35px;
  font-size: 25px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin: 0 auto 5px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .sel-group-container .sel-item .user-icon i {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .sel-group-container .sel-item .user-name {
  white-space: normal;
  text-align: center;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .sel-group-container .sel-item.sel .user-icon {
  background: #e36500;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .sel-group-container .sel-item.sel .user-name {
  color: #e36500;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 10px;
  margin-top: 10px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list .schedule-item {
  padding: 10px;
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  background: #18191c;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  transition: 0.5s all ease-in-out;
  cursor: pointer;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list .schedule-item .item-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list .schedule-item .item-row .row-item {
  text-transform: capitalize;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list .schedule-item .item-row .row-item.bubble {
  padding: 3px 7px;
  border-radius: 50px;
  background: #e36500;
  color: #fff;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list .schedule-item .item-row .row-item.text i {
  margin-right: 7px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list .schedule-item .item-row .row-item.text span + span {
  margin-left: 5px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list .schedule-item .item-row .row-item.title {
  font-size: 1.5rem;
  font-weight: bold;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list .schedule-item .item-row + .item-row {
  margin-top: 7px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list .schedule-item.sel {
  background: #e36500;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list .schedule-item.sel .bubble {
  background: #18191c !important;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .schedule-list .schedule-item:hover {
  background: #323232;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .day-list {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  width: calc(100% - 20px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: rgba(227, 101, 0, 0.5) !important;
  padding: 7px 10px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .day-list .day-item {
  color: #fff;
  border-radius: 50px;
  padding: 2px 10px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0);
  transition: 0.5s all ease-in-out;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .day-list .day-item .curDay {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  margin: 1px 0;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .day-list .day-item.sel {
  background: rgba(24, 25, 28, 0.5) !important;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.schedule .day-list .day-item:hover {
  border-color: rgba(255, 255, 255, 0.5);
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .sel-group-container .sel-item {
  width: 40px;
  justify-content: center;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .sel-group-container .sel-item span {
  background: rgba(200, 200, 200, 0.7);
  color: #18191c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 25px;
  height: 25px;
  cursor: pointer;
  font-size: 15px;
  border-radius: 50%;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .sel-group-container .sel-item.disabled {
  opacity: 0.1;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .sel-group-container .sel-item.disabled span {
  cursor: initial;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-search {
  margin: 20px 0;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-search .tro-input {
  width: 100%;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-search .tro-input input {
  flex: 1;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-list {
  overflow-y: auto;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-list .address-group {
  margin-top: 20px;
  text-decoration: none;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-list .address-group .group-title {
  position: relative;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-list .address-group .group-title span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 30px;
  height: 30px;
  font-size: 15px;
  border-radius: 50%;
  border: 2px solid #e36500;
  color: #e36500;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-list .address-group .group-title:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 32px;
  width: calc(100% - 32px);
  height: 2px;
  background: #e36500;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-list .address-group .address-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  border-radius: 7px;
  padding: 10px;
  border: 1px solid rgba(100, 100, 100, 0.2);
  margin-left: 35px;
  background: #18191c;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  transition: 0.5s all ease-in-out;
  cursor: pointer;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-list .address-group .address-item .item-icon {
  background: #e36500;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transition: 0.5s all ease-in-out;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-list .address-group .address-item .item-name {
  margin-left: 20px;
  text-transform: capitalize;
  color: #fff;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-list .address-group .address-item.sel {
  background: #e36500;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-list .address-group .address-item.sel .item-icon {
  background: #fff;
}
.fillmore-page .map-container .map-side .map-side-content .content-section.address .address-list .address-group .address-item:hover {
  background: #323232;
}
.fillmore-page .map-container .map-side.open {
  width: 55%;
}
.fillmore-page .map-container .map-side.open .map-side-content {
  display: flex;
  opacity: 1;
}
.fillmore-page .map-container .edit-side {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 15px;
  background: rgba(227, 101, 0, 0.75) !important;
  transition: 0.5s all ease-in-out;
}
.fillmore-page .map-container .edit-side .side-slider {
  background: #e36500;
  color: #fff;
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 25px;
  height: 25px;
  font-size: 15px;
  border-radius: 50%;
  top: 45%;
  left: -12.5px;
  transform: translateY(-50%);
  cursor: pointer;
}
.fillmore-page .map-container .edit-side .edit-side-content {
  display: none;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 15px;
  flex-direction: column;
  max-height: calc(100% - 30px);
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input {
  padding: 15px 0 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field {
  padding: 5px;
  display: flex;
  flex-direction: column;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field span {
  margin: 0px 0px 5px 5px;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field input,
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field select {
  border-radius: 50px;
  border: none;
  line-height: 20px;
  padding: 2px 10px;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field .toggle-btn {
  padding: 3px 10px;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field.sz-1 {
  width: calc(10% - 10px);
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field.sz-2 {
  width: calc(20% - 10px);
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field.sz-3 {
  width: calc(30% - 10px);
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field.sz-4 {
  width: calc(40% - 10px);
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field.sz-5 {
  width: calc(50% - 10px);
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field.sz-6 {
  width: calc(60% - 10px);
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field.sz-7 {
  width: calc(70% - 10px);
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field.sz-8 {
  width: calc(80% - 10px);
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field.sz-9 {
  width: calc(90% - 10px);
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .input-field.sz-10 {
  width: calc(100% - 10px);
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .slider-title {
  margin: 0 5px 10px;
  font-weight: bold;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .slider-title .title-txt {
  font-size: 2rem;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .slider-title .sub-txt {
  font-size: 1.3rem;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .slider-title .sub-txt span {
  color: #000;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .slider-title .btn-container {
  flex-direction: column !important;
  margin-left: auto;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .slider-title .title-icon {
  font-size: 16px;
  padding: 5px 10px;
  margin-left: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .slider-input .slider-title.mid {
  margin-top: 15px;
  border-top: 2px solid #fff;
  padding-top: 15px;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .sel-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px 0 30px;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .sel-group .sel-ctrl {
  background: rgba(24, 25, 28, 0.7) !important;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 10px;
  border-radius: 50%;
  margin: auto 0;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .sel-group .sel-ctrl.left {
  margin-right: 10px;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .sel-group .sel-ctrl.right {
  margin-left: 10px;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .sel-group .sel-group-container {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  flex: 1;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .sel-group .sel-group-container .sel-item {
  display: inline-flex;
  padding: 7px 14px;
  margin-right: 10px;
  flex-direction: column;
  border: 1px solid #646464;
  border-radius: 7px;
  background: rgba(24, 25, 28, 0.7) !important;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .sel-group .sel-group-container .sel-item .item-row {
  text-transform: capitalize;
}
.fillmore-page .map-container .edit-side .edit-side-content .editor-section .sel-group .sel-group-container .sel-item:hover {
  background: rgba(100, 100, 100, 0.8) !important;
}
.fillmore-page .map-container .edit-side.open {
  width: 45%;
}
.fillmore-page .map-container .edit-side.open .edit-side-content {
  display: flex;
  opacity: 1;
}
.no-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: rgba(200, 200, 200, 0.8);
  padding: 30px 0;
}
.userMng-page {
  display: block !important;
}
.userMng-page .title {
  min-height: 220px;
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden;
}
.userMng-page .title .title-content {
  flex: 1;
  z-index: 1;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.userMng-page .title .title-content .title-text {
  font-size: 30px;
  width: 100%;
  color: rgba(200, 200, 200, 0.8);
}
.userMng-page .title .title-icon-img {
  position: absolute;
  bottom: -20px;
  right: 10px;
  height: 90%;
  border-radius: 7px;
  background: rgba(100, 100, 100, 0.5);
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  z-index: 10;
  transform: rotate(-20deg);
}
.userMng-page .title .title-icon-img .icon-section.img {
  text-align: center;
  width: 100%;
}
.userMng-page .title .title-icon-img .icon-section.img div {
  font-size: 75px;
  background: #fafafa;
  width: 100%;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #646464;
  width: 100px;
  height: 100px;
  position: relative;
  display: inline-block;
}
.userMng-page .title .title-icon-img .icon-section.img div i {
  color: #464646;
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
}
.userMng-page .title .title-icon-img .icon-section.split {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1;
  padding: 5px;
  margin-top: 7px;
}
.userMng-page .title .title-icon-img .icon-section.split .block {
  background: #646464;
  height: 100%;
  border-radius: 2px;
  width: 35%;
}
.userMng-page .title .title-icon-img .icon-section.split .lines {
  border-top: 5px solid #646464;
  border-bottom: 5px solid #646464;
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.userMng-page .title .title-icon-img .icon-section.split .lines:before {
  content: '';
  width: 100%;
  height: 5px;
  background: #646464;
}
.userMng-page .btn-container {
  margin-top: 20px;
}
.userMng-page .btn-container .tro-btn {
  cursor: pointer;
}
.userMng-page .btn-container .tro-btn:hover .btn-icon {
  margin-left: -20px;
}
.userMng-page .user-table {
  color: #000;
  text-align: center;
}
.userMng-page .user-table .user-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  border: 1px solid #646464;
  background: rgba(100, 100, 100, 0.5);
  color: #4b4b4b;
  cursor: pointer;
}
.userMng-page .user-table .user-icon .hover {
  display: none;
}
.userMng-page .user-table .user-icon:hover {
  background: #c83232;
  color: #fff;
  border-color: #fff;
}
.userMng-page .user-table .user-icon:hover .base {
  display: none;
}
.userMng-page .user-table .user-icon:hover .hover {
  display: initial;
}
.userMng-page .user-table input {
  border: 1px solid rgba(100, 100, 100, 0.3);
  background: none;
  text-align: center;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 50px;
}
.userMng-page .user-table .tbl-btn {
  margin: 0;
  justify-content: center;
}
.userMng-page .user-table .tbl-btn .tro-btn {
  background: #18191c;
  cursor: pointer;
}
.userMng-page .user-table .tbl-btn .tro-btn .btn-txt {
  color: #fff;
}
.userMng-page .user-table .tbl-btn .tro-btn .btn-icon {
  background: #fff;
}
.userMng-page .user-table .tbl-btn .tro-btn.save {
  background: #008000;
}
.userMng-page .user-table .tbl-btn .tro-btn.save .btn-txt {
  color: #fff;
}
.userMng-page .user-table .tbl-btn .tro-btn.save .btn-icon {
  background: #fff;
  color: #008000;
}
.userMng-page .user-table .tbl-btn .tro-btn:hover .btn-icon {
  margin-left: -20px;
}
/* Fonts */
body,
html {
  margin: 0px !important;
  background: #f0f0f0;
  color: #000000;
  height: 100%;
  font-size: 12px;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}
*:focus {
  outline: none;
}
.page-body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #323232;
  background: linear-gradient(45deg, #323232 54%, #646464 100%);
}
.page-body.gerald {
  background: linear-gradient(45deg, #323232 70%, #e62625 100%);
}
.page-body.astro {
  background: linear-gradient(45deg, #323232 70%, #c8c8c8 100%);
}
.page-body.susie {
  background: linear-gradient(45deg, #323232 70%, #fccd04 100%);
}
.page-body.wakanda {
  background: linear-gradient(45deg, #323232 70%, #a929ee 100%);
}
.page-body.tiana {
  background: linear-gradient(45deg, #323232 70%, #529e46 100%);
}
.page-body.fillmore {
  background: linear-gradient(45deg, #323232 70%, #e36500 100%);
}
.page-body .backimg {
  position: absolute;
  bottom: 0;
  right: 20px;
  z-index: 0;
  width: 300px;
}
.page-body .content-body {
  width: 90%;
  height: 90%;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  color: #fff;
  border-radius: 7px;
  display: flex;
}
.page-body .content-body .content-nav {
  display: inline-flex;
  flex-direction: column;
  z-index: 1;
  justify-content: space-evenly;
  padding: 2% 10px;
  width: 125px;
  font-family: 'MuseoModerno', cursive;
  overflow: hidden;
  transition: 0.5s all ease-in-out;
}
.page-body .content-body .content-nav .nav-btn {
  cursor: pointer;
  transition: 0.7s all ease-in-out;
  opacity: 0.2;
  white-space: nowrap;
  flex-direction: row;
  color: #fff;
  padding: 7px 15px;
  border-radius: 7px;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
}
.page-body .content-body .content-nav .nav-btn .pt {
  width: 15px;
  height: 15px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  margin-right: 10px;
  display: inline-flex;
}
.page-body .content-body .content-nav .nav-btn i {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  color: #ffffff;
}
.page-body .content-body .content-nav .nav-btn + .nav-btn {
  margin-top: 10px;
}
.page-body .content-body .content-nav .nav-btn:hover:not(.disabled),
.page-body .content-body .content-nav .nav-btn.selected {
  opacity: 0.7;
  background: rgba(150, 150, 150, 0.2);
}
.page-body .content-body .content-nav .nav-btn.disabled {
  position: relative;
  cursor: initial;
  display: none;
}
.page-body .content-body .content-nav .nav-btn.gerald .pt {
  background: #e62625;
}
.page-body .content-body .content-nav .nav-btn.astro .pt {
  background: #c8c8c8;
}
.page-body .content-body .content-nav .nav-btn.susie .pt {
  background: #fccd04;
}
.page-body .content-body .content-nav .nav-btn.wakanda .pt {
  background: #a929ee;
}
.page-body .content-body .content-nav .nav-btn.tiana .pt {
  background: #529e46;
}
.page-body .content-body .content-nav .nav-btn.fillmore .pt {
  background: #e36500;
}
.page-body .content-body .content-nav .nav-btn.out {
  margin-top: auto;
}
.page-body .content-body .content-nav.closed {
  width: 0;
  padding: 2% 0px;
  overflow: hidden;
}
.page-body .content-body .content-display {
  background: rgba(24, 25, 28, 0.9) !important;
  -moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  flex: 1;
  border-radius: 7px;
  position: relative;
  width: 100%;
  transition: 0.5s all ease-in-out;
}
.page-body .content-body .content-display .toggle-container {
  position: absolute;
  top: 20px;
  left: -1px;
  display: flex;
  flex-direction: column;
}
.page-body .content-body .content-display .toggle-container .toggle-nav-container {
  background: #323232;
  position: relative;
  width: 30px;
  height: 30px;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.page-body .content-body .content-display .toggle-container .toggle-nav-container .toggle-btn {
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #18191c;
  transition: 0.7s all ease-in-out;
  cursor: pointer;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
}
.page-body .content-body .content-display .toggle-container .toggle-nav-container .toggle-btn.notification {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  justify-content: center;
  text-align: center;
  color: #9FB1BD;
  position: relative;
}
.page-body .content-body .content-display .toggle-container .toggle-nav-container .toggle-btn.notification .noti-count {
  position: absolute;
  bottom: -5px;
  right: -5px;
  font-size: 8px;
  width: 12px;
  height: 12px;
  background: #e62625;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 50%;
}
.page-body .content-body .content-display .toggle-container .toggle-nav-container .toggle-btn:hover {
  background: #2c2d30;
}
.page-body .content-body .content-display .toggle-container .toggle-nav-container + .toggle-nav-container {
  margin-top: 30px;
}
.page-body .content-body .content-display .page-container {
  display: flex;
  flex-direction: column;
  padding: 23px 20px 23px 50px;
  height: calc(100% - 46px);
  overflow-y: auto;
}
.page-body .content-body .content-display .page-container.inner {
  padding: 15px;
}
.page-body .content-body .content-display .page-container .page-panel {
  border-radius: 7px;
  overflow: hidden;
  background: #000000;
  margin-top: 20px;
}
.page-body .content-body .content-display .page-container .body-panel {
  overflow-y: auto;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}
.page-body .content-body .content-display.open {
  width: calc(100% - 125px);
}
.menu {
  height: 24px;
  padding: 2px;
  width: 24px;
  z-index: 200;
}
.menu .menu-btn {
  background: #9FB1BD;
  content: '';
  display: block;
  height: 2px;
  position: absolute;
  transition: background ease 0.7s, top ease 0.7s 0.3s, transform ease 0.7s;
  width: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.menu .menu-btn:hover {
  background: #e62625;
}
.menu .menu-btn:hover::before,
.menu .menu-btn:hover::after {
  background: #e62625;
}
.menu .menu-btn::before,
.menu .menu-btn::after {
  background: #9FB1BD;
  content: '';
  display: block;
  height: 2px;
  position: absolute;
  transition: all ease-in-out 0.3s;
  width: 15px;
}
.menu .menu-btn::before {
  top: -5px;
}
.menu .menu-btn::after {
  top: 5px;
}
.menu .menu-btn.open {
  background: transparent;
}
.menu .menu-btn.open::before {
  transform: rotate(45deg);
  top: 0;
}
.menu .menu-btn.open::after {
  transform: rotate(-45deg);
  top: 0;
}
/* Notifications */
.notification-container {
  position: fixed;
  z-index: 100;
  top: -210px;
  left: 50%;
  color: #fff;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  min-height: 50px;
  width: 50%;
  overflow: hidden;
  transition: 0.7s all ease-in-out;
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
}
.notification-container .top-container {
  padding: 10px;
}
.notification-container .top-container .ctrl-noti-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  flex-direction: row;
}
.notification-container .top-container .ctrl-noti-container .ctrl-container {
  cursor: pointer;
  margin-left: 15px;
}
.notification-container .top-container .noti-content {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
.notification-container .top-container .noti-content .icon-container {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: rgba(250, 250, 250, 0.7);
  color: #18191c;
}
.notification-container .top-container .noti-content .info-container {
  flex: 1;
  border-left: 2px solid rgba(250, 250, 250, 0.5);
  padding: 0 10px;
  display: flex;
  font-size: 1.3rem;
  flex-direction: column;
  justify-content: center;
  text-transform: capitalize;
}
.notification-container .top-container .noti-content.empty .icon-container {
  font-size: 20px;
}
.notification-container .top-container .noti-content.empty .info-container {
  color: rgba(255, 255, 255, 0.5);
}
.notification-container .top-container .noti-content.user .icon-container img {
  width: 100%;
  object-fit: contain;
  margin-top: 15px;
}
.notification-container .top-container .noti-content.fillmore .icon-container {
  background: #e36500;
}
.notification-container .top-container .noti-content.tiana .icon-container {
  background: #529e46;
}
.notification-container .top-container .noti-content.wakanda .icon-container {
  background: #a929ee;
}
.notification-container .top-container .noti-content.astro .icon-container {
  background: #c8c8c8;
}
.notification-container .top-container .lastDt {
  color: rgba(200, 200, 200, 0.9);
  font-size: 10px;
  text-align: right;
}
.notification-container .bottom-container {
  padding: 5px 10px;
  display: flex;
  flex-direction: row;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
}
.notification-container .bottom-container .tick-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  margin: auto 0;
}
.notification-container .bottom-container .tick-container .tick {
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0);
  cursor: pointer;
}
.notification-container .bottom-container .tick-container .tick.empty {
  background: rgba(0, 0, 0, 0);
  border-color: #ffffff;
  cursor: initial;
}
.notification-container .bottom-container .tick-container .tick.dismissed {
  background: rgba(100, 100, 100, 0.7);
}
.notification-container .bottom-container .tick-container .tick.sel {
  background: rgba(0, 0, 0, 0);
  border-color: #ffffff;
}
.notification-container .bottom-container .tick-container .tick.sel.dismissed {
  border-color: rgba(100, 100, 100, 0.7);
}
.notification-container .bottom-container .tick-container .tick + .tick {
  margin-left: 7px;
}
.notification-container .bottom-container .tick-ctrl {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: rgba(200, 200, 200, 0.8);
  color: #18191c;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  font-size: 12px;
}
.notification-container .bottom-container .tick-ctrl.disabled {
  cursor: initial;
  opacity: 0.1;
}
.notification-container .bottom-container .noti-timer {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 50%;
  transition: 0.1s all ease-in-out;
}
.notification-container .bottom-container .noti-timer.fillmore {
  background: #e36500;
}
.notification-container .bottom-container .noti-timer.tiana {
  background: #529e46;
}
.notification-container .bottom-container .noti-timer.wakanda {
  background: #a929ee;
}
.notification-container .bottom-container .noti-timer.astro {
  background: #c8c8c8;
}
.notification-container .settings-container {
  padding: 5px 10px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
}
.notification-container .settings-container .section-title {
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 5px;
  font-size: 1.3rem;
}
.notification-container .settings-container .search-container {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 5px 7px;
  border-radius: 5px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.notification-container .settings-container .search-container i {
  margin-right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.notification-container .settings-container .search-container input {
  flex: 1;
  background: none;
  color: #fff;
  border: none;
}
.notification-container .settings-container .search-container .results-panel {
  position: absolute;
  top: calc(100% - 5px);
  left: -1px;
  width: calc(100% + 2px);
  background: #323232;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  padding: 5px 0;
}
.notification-container .settings-container .search-container .results-panel .panel-row {
  padding: 5px 5px 5px 27px;
  cursor: pointer;
}
.notification-container .settings-container .search-container .results-panel .panel-row:hover {
  background: #646464;
}
.notification-container .settings-container .search-container.disabled {
  opacity: 0.2;
}
.notification-container .settings-container .setting-section {
  display: flex;
  flex-direction: column;
  padding: 10px 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  transition: 0.2s all ease-in-out;
}
.notification-container .settings-container .setting-section .section-row {
  display: flex;
  flex-direction: row;
}
.notification-container .settings-container .setting-section .section-row .icon-container {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: rgba(250, 250, 250, 0.7);
  color: #18191c;
}
.notification-container .settings-container .setting-section .section-row .icon-container img {
  width: 100%;
  object-fit: contain;
  margin-top: 15px;
}
.notification-container .settings-container .setting-section .section-row .icon-container.fillmore {
  background: #e36500;
}
.notification-container .settings-container .setting-section .section-row .icon-container.tiana {
  background: #529e46;
}
.notification-container .settings-container .setting-section .section-row .icon-container.wakanda {
  background: #a929ee;
}
.notification-container .settings-container .setting-section .section-row .icon-container.astro {
  background: #c8c8c8;
}
.notification-container .settings-container .setting-section .section-row .setting-title {
  flex: 1;
  text-transform: capitalize;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.notification-container .settings-container .setting-section .section-row.tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.notification-container .settings-container .setting-section .section-row.tags .list-tag {
  padding: 3px 10px;
  border-radius: 50px;
  background: rgba(100, 100, 100, 0.7);
  margin: 0 7px 7px 0;
  color: #fff;
}
.notification-container .settings-container .setting-section .section-row.tags .list-tag i {
  margin-left: 20px;
  cursor: pointer;
}
.notification-container .settings-container .setting-section .section-row + .section-row {
  margin-top: 7px;
}
.notification-container .settings-container .setting-section.sel {
  background: #18191c;
}
.notification-container.open {
  top: calc(5% + 10px);
}
/* Button Container */
.btn-container {
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 2;
}
.btn-container .tro-btn {
  display: inline-flex;
  border-radius: 100px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0);
  z-index: 0;
}
.btn-container .tro-btn .btn-icon {
  border-radius: 50%;
  cursor: pointer;
  background: #646464;
  color: #000000;
  height: 25px;
  width: 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -25px;
  z-index: 50;
  transition: 0.5s all ease-in-out;
}
.btn-container .tro-btn .btn-icon.unshifted {
  margin-left: 0;
  cursor: default;
}
.btn-container .tro-btn .react-datepicker__input-container {
  height: 100%;
}
.btn-container .tro-btn .react-datepicker-popper {
  z-index: 100;
}
.btn-container .tro-btn input,
.btn-container .tro-btn select {
  height: 100%;
  border: 0;
  padding-left: 15px;
}
.btn-container .tro-btn .btn-txt {
  color: #000;
  font-weight: bold;
  margin: 2px 32px 2px 15px;
  line-height: 20px;
  transition: 0.5s all ease-in-out;
}
.btn-container .tro-btn.btn {
  cursor: pointer;
}
.btn-container .tro-btn + .tro-btn {
  margin-left: 25px;
}
.btn-container .tro-btn.btn-end {
  margin-left: auto;
}
.btn-container .tro-icon-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.btn-container .tro-icon-btn:hover {
  opacity: 0.7;
}
.btn-container .tro-icon-btn.add {
  background: #008000;
}
.btn-container .end-btn {
  margin-left: auto;
}
/* Toggle Button */
.toggle-btn-container {
  display: inline-flex;
  flex-direction: row;
}
.toggle-btn-container .toggle-btn {
  cursor: pointer;
  position: relative;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 5px 10px;
  border-radius: 5px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border: 1px solid #fff;
  background: #fff;
  color: #18191c;
  text-transform: capitalize;
}
.toggle-btn-container .toggle-btn.sel {
  border-color: #646464;
  background: #646464;
  color: #fff;
}
.toggle-btn-container .toggle-btn + .toggle-btn {
  margin-left: 2px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.toggle-btn-container .toggle-btn:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
/* Slider Container */
.slider-container {
  position: absolute;
  bottom: 0;
  left: 50px;
  width: calc(100% - 100px);
  padding: 15px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  transition: 0.5s all ease-in-out;
  z-index: 100;
}
.slider-container .slider-title {
  margin: 0 5px 10px;
  font-weight: bold;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.slider-container .slider-title .title-txt {
  font-size: 2rem;
}
.slider-container .slider-title .btn-container {
  flex-direction: column !important;
  margin-left: auto;
}
.slider-container .slider-title .title-icon {
  font-size: 16px;
  padding: 5px 10px;
  margin-left: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.slider-container .slider-input {
  padding: 15px 0 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.slider-container .slider-input .input-field {
  padding: 5px;
  display: flex;
  flex-direction: column;
}
.slider-container .slider-input .input-field span {
  margin: 0px 0px 5px 5px;
}
.slider-container .slider-input .input-field input {
  border-radius: 50px;
  border: none;
  line-height: 20px;
  padding: 2px 10px;
}
.slider-container .slider-input .input-field.sz-1 {
  width: calc(10% - 10px);
}
.slider-container .slider-input .input-field.sz-2 {
  width: calc(20% - 10px);
}
.slider-container .slider-input .input-field.sz-3 {
  width: calc(30% - 10px);
}
.slider-container .slider-input .input-field.sz-4 {
  width: calc(40% - 10px);
}
.slider-container .slider-input .input-field.sz-5 {
  width: calc(50% - 10px);
}
.slider-container .slider-input .input-field.sz-6 {
  width: calc(60% - 10px);
}
.slider-container .slider-input .input-field.sz-7 {
  width: calc(70% - 10px);
}
.slider-container .slider-input .input-field.sz-8 {
  width: calc(80% - 10px);
}
.slider-container .slider-input .input-field.sz-9 {
  width: calc(90% - 10px);
}
.slider-container .slider-input .input-field.sz-10 {
  width: calc(100% - 10px);
}
.slider-container.wakanda {
  background: rgba(169, 41, 238, 0.9) !important;
}
.slider-container.tiana {
  background: rgba(82, 158, 70, 0.97) !important;
}
.slider-container.userMgt {
  background: #4b4b4b;
}
.slider-container.open {
  bottom: 0;
}
/* React Table Bottom */
.pagination-bottom .-previous .-btn,
.pagination-bottom .-next .-btn {
  background: rgba(150, 150, 150, 0.7) !important;
  color: #fff !important;
}
.pagination-bottom .-pageJump input {
  padding: 2px 7px !important;
}
/* Lifted */
.lifted {
  -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
}
/* Socket Connection Display */
.sc-container {
  position: fixed;
  z-index: 100;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 21px;
  background-color: #646464;
  color: #000000;
  font-weight: bold;
  text-transform: capitalize;
  border-radius: 5px;
  display: inline;
  transition: 3s all ease-in-out;
}
.sc-container.status-0 {
  background-color: #c14b4b;
  bottom: 10px;
}
.sc-container.status-1 {
  background-color: #50c14b;
  display: none;
}
.sc-container.status-2 {
  background-color: #c1864b;
  bottom: 10px;
}
.sc-container.status-3 {
  background-color: #c1c14b;
  bottom: 10px;
}
.sc-container .sc-item {
  display: inline-block;
}
.sc-container .sc-item + .sc-item {
  margin-left: 10px;
}
.sc-container .sc-item.sc-retry-btn {
  margin-left: 15px;
  padding: 2px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.sc-container .sc-item.sc-retry-btn:hover {
  background: rgba(255, 255, 255, 0.5);
}
.sc-container .sc-item.sc-retry-btn span {
  margin-left: 7px;
}
/* End Socket Connection Display */
/* Load Spinner */
#loader-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  z-index: 1000;
}
#loader {
  display: inline-block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #4b4b4b;
  -webkit-animation: spin 2s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #646464;
  -webkit-animation: spin 3s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #c8c8c8;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader.background {
  border-top-color: #18191c;
}
#loader.gerald {
  border-top-color: #e62625;
}
#loader.astro {
  border-top-color: #c8c8c8;
}
#loader.susie {
  border-top-color: #fccd04;
}
#loader.wakanda {
  border-top-color: #a929ee;
}
#loader.tiana {
  border-top-color: #529e46;
}
#loader.fillmore {
  border-top-color: #e36500;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}
/* Page Transitions */
/* Fade */
.fade-enter {
  opacity: 0.1;
}
/* ending ENTER animation */
.fade-enter-active {
  opacity: 1;
  transition: all 1s ease-in-out;
}
/* starting EXIT animation */
.fade-exit {
  opacity: 0;
}
/* ending EXIT animation */
.fade-exit-active {
  opacity: 0;
  transition: all 1s ease-in-out;
}
/* Page Slide */
.pageslide-enter {
  left: 150% !important;
}
/* ending ENTER animation */
.pageslide-enter-active {
  left: 50% !important;
  transition: all 1s ease-in-out;
}
/* starting EXIT animation */
.pageslide-exit {
  opacity: 0;
}
/* ending EXIT animation */
.pageslide-exit-active {
  opacity: 0;
  transition: all 1s ease-in-out;
}
/* Scroll Bar */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #323232;
}
::-webkit-scrollbar-thumb {
  background-color: #18191c;
  border-radius: 20px;
  border: 3px solid #323232;
}