:root {
 --transparent: rgba(0, 0, 0, 0);
 --black-transparent-100: rgba(0, 0, 0, 0.1);
 --black-transparent-200: rgba(0, 0, 0, 0.2);
 --black-transparent-350: rgba(0, 0, 0, 0.35);
 --black-transparent-500: rgba(0, 0, 0, 0.5);
}
noscript {
  z-index: 100;
  background: transparent;
  width: 100vw;
  height: 80vh;
  margin: 10vh 0;
  padding: 0 4vw;
}
body {
  overflow: hidden;
}
/* scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(255, 255, 255) rgba(0, 0, 0, 0);
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}
*::-webkit-scrollbar-thumb {
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  border: 3px solid rgb(255, 255, 255);
}
/* hr */
hr {
  color: var(--bs-white);
  margin-left: var(--bs-modal-padding);
  margin-right: var(--bs-modal-padding);
}
/* alert */
.alert {
  --bs-alert-margin-bottom: 0;
  --bs-alert-padding-x: 0.5rem;
  --bs-alert-padding-y: 0.5rem;
  font-size: 0.8rem;
}
.alert:not(:first-child) {
  margin-top: 1rem;
}
.alert .time {
  font-weight: 100;
}
/* form */
.form-control {
  text-transform: capitalize;
}
.form-control:focus {
  text-transform: none;
}
.form-control:not(:active) {
  text-transform: none;
}
.form-control,
.form-control:focus {
  color: var(--bs-white) !important;
  background-color: var(--black-transparent-200) !important;
  box-shadow: inset 0px 1px 0px var(--bs-black), inset -1px -1px 0px rgba(171, 166, 166) !important;
  border: none !important;
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover, 
.form-control:-webkit-autofill:focus, 
.form-control:-webkit-autofill:active {
  -webkit-box-shadow:0 0 0 50px var(--transparent) inset !important;
  -webkit-text-fill-color: var(--bs-white) !important;
  transition: background-color 5000s ease-in-out 0s;
}
.form-control:-webkit-autofill:not(:hover),
.form-control:-webkit-autofill:not(:focus),
.form-control:-webkit-autofill:not(:active),
.form-control:-webkit-autofill:not(:target) {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-background-clip: text;
  background-color: var(--black-transparent-500) !important;
  box-shadow: 0 0 0 50px var(--black-transparent-100) inset, inset 1px 1px 0px var(--bs-black), inset 0px -1px 0px rgba(171, 166, 166) !important;
  border: none !important;
  filter: drop-shadow(0px 0px 0px var(--bs-black));
}
.input-group-text {
  font-weight: 400;
  color: var(--bs-gray-500);
  background-color: var(--black-transparent-500);
  box-shadow: inset 1px 1px 0px var(--bs-black), inset 0px -1px 0px rgba(171, 166, 166) !important;
  border: none;
}
::-webkit-input-placeholder {
  color: var(--bs-gray-500) !important;
  text-transform: capitalize;
}
:-ms-input-placeholder {
  color: var(--bs-gray-500) !important;
  text-transform: capitalize;
}
::placeholder {
  color: var(--bs-gray-500) !important;
  text-transform: capitalize;
}
:focus::-webkit-input-placeholder {
  color: var(--bs-gray-300) !important;
  text-transform: capitalize;
}
:focus:-ms-input-placeholder {
  color: var(--bs-gray-300) !important;
  text-transform: capitalize;
}
:focus::placeholder {
  color: var(--bs-gray-300) !important;
  text-transform: capitalize;
}
#vip-username1,
#vip-username2 {
  display: none;
}
/* button */
.btn {
  background: var(--black-transparent-350);
}
.btn-outline-orange {
  --bs-btn-color: var(--bs-orange);
  --bs-btn-border-color: var(--bs-orange);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--bs-orange);
  --bs-btn-hover-border-color: var(--bs-orange);
  --bs-btn-focus-shadow-rgb: 13,202,240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--bs-orange);
  --bs-btn-active-border-color: var(--bs-orange);
  --bs-btn-active-shadow: inset 0 3px 5pxrgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-orange);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-orange);
  --bs-gradient: none;
}
/* switch checkbox*/
.designed-checkbox {
  width: 20px;
  position: relative;
  margin: 0;
  white-space: nowrap;
}
.designed-checkbox label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  background-color: var(--black-transparent-500) !important;
  box-shadow: inset 1px 1px 0px var(--bs-black), inset -1px -1px 0px rgba(171, 166, 166) !important;
  border: none !important;
}
.designed-checkbox label:after {
  content: '';
  width: 10px;
  height: 5px;
  position: absolute;
  top: 6px;
  left: 5px;
  border: 2px solid var(--bs-teal);
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  transform: rotate(-45deg);
}
.designed-checkbox label:hover::after {
  opacity: 0.3;
}
.designed-checkbox input[type=checkbox] {
  visibility: hidden;
}
.designed-checkbox input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* link */
a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}
/* cursor */
.cursor-pointer {
  cursor: pointer;
}
/* text */
.text-hyphens {
  hyphens: auto;
}
/* popover */
.popover {
  --bs-popover-border-color: var(--transparent);
  --bs-popover-header-bg: var(--bs-info);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-bg: var(--black-transparent-500);
  --bs-popover-body-color: var(--bs-white);
  font-weight: 100;
  text-align: center;
}
.popover-header {
  font-weight: 100;
}
.popover-body {
  text-align: start;
  hyphens: auto;
}
/* modal */
.modal-backdrop.show {
  opacity: 0;
}
.modal {
  --bs-modal-margin: 15vh;
}
.modal-dialog {
  margin: var(--bs-modal-margin) 0.5rem;
}
.modal-content {
  background-color: var(--black-transparent-200);
  border: none;
  backdrop-filter: blur(2px);
}
.modal-content * {
  font-weight: 100;
}
.modal-header {
  padding: 0;
  border-bottom: 0;
}
.modal-title {
  color: var(--bs-white);
  width: calc(100% - 1rem * 2);
  white-space: nowrap;
}
.modal-body {
  padding: 0 var(--bs-modal-padding) var(--bs-modal-padding) var(--bs-modal-padding);
  color: var(--bs-gray-200);
}
.modal-footer {
  padding: 0;
  border-top: none;
}
.modal-footer > * {
  margin: 0;
}
/* videos */
.videos {
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}
.video-overlay-bg,
.bg-video {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}/*
.video-overlay-bg div:not(.container) {
  z-index: 1;
}*/
audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}
/* header */
#header-section #header {
  height: 10vh;
  background: var(--bs-black);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100vw;
}
/* video */
#video-home {
  width: 100vw;
  height: 100vh;
}
/* content */
#video-home .container#content-wrap .row #main-col {
  margin-top: 10vh;
  margin-bottom: 10vh;
  height: 80vh;
}
body .card {
  height: 50%;
  position: relative;
  background-color: var(--transparent);
  border: 0px solid var(--transparent);
  border-radius: 0px;
}
body .nano > .nano-content {
  right: 0 !important;
}
body .card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  word-wrap: break-word;
  background-color: var(--transparent);
  background-clip: border-box;
  border: 0px solid var(--transparent);
  border-radius: 0px;
  color: var(--bs-white);
  padding: 0;
}
body .card-body * {
  font-weight: 100;
}
body .card-title {
  font-size: 3rem;
}
/* footer */
#footer-section #footer {
  height: 10vh;
  background: var(--bs-black);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99999;
  width: 100vw;
  font-size: 0.5rem;
  color: var(--bs-gray-400);
  font-weight: 100;
  letter-spacing: 2px;
}