:root {
  --color-mass-1: #2b2b2b;
  --color-mass-2: #2a2a2a;
  --color-details-1: #d57a19;
  --color-details-2: #c7b9ae;
  --color-details-3: #424242;
}

:root {
  --color-logo-a: var(--color-details-1);
  --color-logo-b: var(--color-details-2);
  --hover: 0 0 0 9999px rgba(0, 0, 0, 0.2) inset;
  --shadow-95: rgba(0, 0, 0, 0.95);
  --shadow-85: rgba(0, 0, 0, 0.85);
  --shadow-75: rgba(0, 0, 0, 0.75);
  --shadow-55: rgba(0, 0, 0, 0.55);
  --shadow-25: rgba(0, 0, 0, 0.25);
  --blue: #255368;
  --orange: #ad5e08;
  --red: #8d0d08;
  --green: #066430;

  --x-poly-1: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  --x-poly-2: polygon(20% 0%, 50% 30%, 80% 0%, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0% 80%, 30% 50%, 0% 20%);
  --o-poly-1: polygon(0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0, 100% 0, 100% 0);
  --o-poly-2: polygon(0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%);

  --global-min-width: 320px;
  --ui-height: 5vh;
}

body, html {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-size: 100%;
  color: var(--color-details-1);
  margin: 0;
  padding: 0;
  min-width: var(--global-min-width);
  width: 100vw;
  height: 100vh;
  background-color: var(--color-mass-1);
  overflow-y: auto !important;
}

main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.body__main {
  box-sizing: border-box;
  min-width: var(--global-min-width);
  flex: 1 0 auto;
  overflow-y: auto;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  gap: 2rem;
}

*::-webkit-scrollbar {
  display: none;
}
  
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.loader {
  height: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-details-1);
  clip-path: var(--o-poly-1);
  animation: load_anim 3s infinite cubic-bezier(0.5, 1, 0.5, 1);
}

@keyframes load_anim {
  25.00% {border-radius: 0;   background: var(--color-details-1) ;clip-path: var(--x-poly-1);}
  25.01% {border-radius: 0;   background: var(--color-details-1) ;clip-path: var(--x-poly-2);}
  50.00% {border-radius: 50%; background: var(--color-details-1) ;clip-path: var(--o-poly-2);}
  50.01% {border-radius: 50%; background: var(--color-details-1) ;clip-path: var(--o-poly-1);}
  75.00% {border-radius: 0;   background: var(--color-details-1) ;clip-path: var(--x-poly-1);}
}

.body_bg {
  background-color: var(--color-mass-1);
  background-size: cover;
  background-blend-mode: multiply;
  background-attachment: fixed;
  background-position: 50% 50%;
  background-image: url("bg.png");
}

input[type], button {
  filter: none !important;
  border: none !important;
  box-sizing: border-box !important;
  -ms-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 9999px var(--color-mass-2) inset !important;
  -webkit-text-fill-color: var(--color-details-2) !important;
}

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 9999px color-mix(in lab, var(--color-mass-2) 100%, rgb(0, 0, 0) 20%) inset !important;
  -webkit-text-fill-color: var(--color-details-1) !important;
}

input[type], button {
  color: var(--color-details-2);
  border-radius: 0px !important;
  border: 1px solid var(--color-details-3) !important;
  background-color: var(--color-mass-2);
}

input[type]::placeholder {
  color: color-mix(in lab, var(--color-details-2) 100%, rgb(0, 0, 0) 20%);
}

input[type]:focus, button:focus, input[type]:active, button:active {
  outline: none !important;
  color: var(--color-details-1);
  border: 1px solid var(--color-details-3) !important;
  background-color: color-mix(in lab, var(--color-mass-2) 100%, rgb(0, 0, 0) 20%);
  caret-color: var(--color-details-1);
}

input[type=submit]:focus {
  caret-color: transparent;
}

input[type=submit]:hover, input[type=button]:hover, button:hover {
  cursor: pointer;
  color: var(--color-details-1);
  box-shadow: var(--hover);
}

input[type=checkbox]:focus {
  outline: 1px solid var(--color-details-1);
  caret-color: transparent;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

body.custom-swal__body-protection:not(.swal2-no-backdrop, .swal2-toast-shown) {
  height: 100vh !important;
  overflow: visible !important;
}

@media only screen and (min-width : 0px) and (max-width: 768px) {
  :root {
    --ui-height: 7.5vh;
  }
}