@import "./styles/spacing.css"; 
@import "./styles/display.css"; 
@import "./styles/measures.css";

* {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

:root {

  --text-color: #f2f2f2;
  --text-secondary-color: #C6C6C6;

  --error-color: #ff0000;

  --primary-color: #1592e6;
  --primary-color-light: #40a8ed;
  --primary-color-dark: #0B507E;

  --secondary-color-dark: #20222F;
  --secondary-color: #2d3041;
  --secondary-color-light: #3E4254;
  --secondary-color-light-2: #505469;
  --secondary-color-light-3: #5b6076;

  --error-primary-color: #FF3838;

  --primary-border-color: #979797;
  --secondary-border-color: #505469;



  --main-bg-color: var(--secondary-color-dark);

  --btn-color: var(--text-color);
  --btn-bg-color: var(--primary-color);
  --btn-bg-color-hover: var(--primary-color-light);
  --btn-bg-color-text-hover: var(--secondary-color-light);
  --btn-border: 2px solid var(--text-color);
  --btn-padding: 8px;
  --btn-padding-large: 12px;
  --btn-border-radius: 10px;
  --btn-icon-size: 30px;
  --btn-icon-bg-color-hover: var(--secondary-color-light);


  --card-bg-color: var(--secondary-color);
  --card-border: 2px solid var(--secondary-color-light-2);
  --card-borer-radius: 12px;
  --card-padding: 16px;

  --text-color-primary: var(--text-color);

  --list-item-bg-color-primary: var(--primary-color);
  --list-item-bg-color-secondary: var(--secondary-color-dark);

  --progress-bar-bg: var(--secondary-color-light);
  --progress-bar-color: var(--primary-color);
  --progress-bar-border: 1px solid var(--text-color);
  --progress-bar-border-radius: 24px;
  --progress-bar-height: 8px;
  --progress-bar-min-width: 60px;

  --table-align-cells: "left";
  --table-header-background-color: var(--secondary-color-light-3);
  --table-row-border-color: var(--secondary-color-light-2);
  --table-row-background-color-hover: var(--secondary-color-light-2);
  --table-row-background-color-active: var(--primary-color-dark);

  --popover-bg-color: var(--secondary-color-dark);
  --popover-border-color: var(--secondary-color-light-3);

  --date-picker-calendar-max-width: 300px;
  --date-picker-info-container-max-width: 300px;

  --input-bg-color: var(--secondary-color-dark);
  --input-text-color: var(--text-color);
  --input-borderd-color: var(--secondary-color-light-2);
  --input-placeholder-color: var(--secondary-color-light-3);

  --font-family-monospace: monospace;

  --divider-color: var(--secondary-color-light-2);
  --divider: 2px solid var(--divider-color);

  --placeholder-color: var(--secondary-color-light-3)
}









/* ************************************* */
/* TEXT GENERIC */
/* ************************************* */
.text-align-center{
  text-align: center;
}
.text-align-left{
  text-align: left;
}
.text-align-right{
  text-align: right;
}
.t-align-justify{
  text-align: justify;
}
.text-align-justify{
  text-align: justify;
}

.no-wrap{
  white-space: nowrap;
}



/* width */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 4px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--secondary-color-light); 
  border-radius: 4px;
}

/* width */
.scroll::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

/* Track */
.scroll::-webkit-scrollbar-track {
  border-radius: 4px;
}
 
/* Handle */
.scroll::-webkit-scrollbar-thumb {
  background: var(--secondary-color-light); 
  border-radius: 4px;
}

/* width */
.scroll2::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: var(--secondary-color-dark);
  border-radius: 8px;

}

/* Track */
.scroll2::-webkit-scrollbar-track {
  background: var(--secondary-color-dark);
  border-radius: 8px;

}
 
/* Handle */
.scroll2::-webkit-scrollbar-thumb {
  background: var(--secondary-color-light); 
  border-radius: 8px;
}

/* width */
.scroll-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
  border-radius: 0px;
  outline: none;
}

/* Track */
.scroll-thin::-webkit-scrollbar-track {
  background: transparent; 
  border-radius: 0px;
  outline: none;
}
 
/* Handle */
.scroll-thin::-webkit-scrollbar-thumb {
  background: var(--primary-border-color); 
  border-radius: 0px;
  outline: none;
}

p {
  color: var(--text-color);
}

body.modal-open {
  overflow: hidden;
  height: 100vh;
}

.modal-calendar {
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--secondary-color-light-3);
  -webkit-box-shadow: 0px 9px 37px -20px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 9px 37px -20px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 9px 37px -20px rgba(0, 0, 0, 0.75);
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  display: flex;
  background-color: #4c5b73;
  height: 40px;
  position: sticky;
  top: 0px;
  z-index: 8;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4caf50;
  color: white;
}

.noselect {
  -webkit-touch-callout: text; /* iOS Safari */
  -webkit-user-select: text; /* Safari */
  -khtml-user-select: text; /* Konqueror HTML */
  -moz-user-select: text; /* Old versions of Firefox */
  -ms-user-select: text; /* Internet Explorer/Edge */
  user-select: text; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.noselect-hard {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.third-block {
  grid-column: 3;
}

.first-block {
  grid-column: 1;
}
.second-block {
  grid-column: 2;
}

h2 {
  color: white;
  margin: 0;
  font-size: 1em;
}

.over-gray {
  width: 100vw;
  height: 100%;
  background-color: gray;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;
}

.flex {
  display: flex;
}

.nowrap {
  white-space: nowrap;
}

.overflow-x{
  overflow-x: auto;
}

.overflow-y{
  overflow-y: auto;
}

/* ICONS */
.close {
  position: absolute;
  height: 24px;
  opacity: 1;
}
.close:hover {
  opacity: 0.8;
}
.close:before,
.close:after {
  position: absolute;
  /* left: 15px; */
  content: " ";
  height: 100%;
  width: 4px;
  background-color: white;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 27px;
  align-self: center;
  justify-self: end;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(32, 34, 47);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: rgb(33, 150, 243);
}
input:disabled + .slider {
  background-color: grey;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
  border: solid 1px rgba(80, 84, 105, 1);
}
.slider.round:before {
  border-radius: 50%;
}
.textdisabled {
  color: grey !important;
}
.colordisabled:before {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Radio Buttons */
/* Style the indicator (dot/circle) */
.radio .radio:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* Colors */
.blue {
  background-color: rgb(21, 146, 230) !important;
}

.r1 {
  grid-row: 1;
}
.r2 {
  grid-row: 2;
}
.r3 {
  grid-row: 3;
}
.r4 {
  grid-row: 4;
}
.r5 {
  grid-row: 5;
}
.r6 {
  grid-row: 6;
}
.c1 {
  grid-column: 1;
}
.c2 {
  grid-column: 2;
}
.c3 {
  grid-column: 3;
}
.c4 {
  grid-column: 4;
}
.c5 {
  grid-column: 5;
}
.c6 {
  grid-column: 6;
}

.jend {
  justify-self: end;
}

.red-text {
  color: red;
}

/* CUSTOM CHECKBOX */
.check-container {
  display: block;
  width: fit-content;
  position: relative;
  padding-left: 25px;
  margin-top: 5px;
  cursor: pointer;
  height: 30px;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.check-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  /* position: absolute; */
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border-radius: 3px;
  background-color: rgb(25, 27, 35);
}

/* .check-container:hover input ~ .checkmark {
  background-color: #2196f3;
} */

.check-container input:checked ~ .checkmark {
  background-color: #2196f3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.check-container input:checked ~ .checkmark:after {
  display: block;
}

.check-container .checkmark:after {
  left: 6px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* TRANSITIONS */
/* Settings Transition */
.settings-enter {
  opacity: 0;
}
.settings-leave-to {
  opacity: 0;
}
.settings-enter-active {
  transition: opacity 0.2s ease-in;
}
.settings-leave-active {
  transition: opacity 0.2s ease-out;
}

/* Fade Transition */
.fade-enter {
  opacity: 0;
}
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.2s ease-in;
}
.fade-leave-active {
  transition: opacity 0.2s ease-out;
}


.modal-enter {
  opacity: 0;
}
.modal-leave-to {
  opacity: 0;
}
.modal-enter-active {
  transition: opacity .4s;
}
.modal-leave-active {
  transition: opacity .4s;
}


/* Global Select */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 50%;
  background-color: rgb(32, 34, 47) !important;
  border: none;
  padding: 0.4rem;
  padding-right: 2rem;
  color: white;
  font-size: 0.9em;
  outline: none !important;
  border-radius: 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 10px;
}

.bridge-part {
  max-width: 100%;
  object-fit: cover;
  margin: -2px;
}

.generic-wrapper {
  position: relative;
  background-color: rgb(45, 48, 65);
  -webkit-box-shadow: 0px 9px 37px -20px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 9px 37px -20px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 9px 37px -20px rgba(0, 0, 0, 0.75);
  border-radius: 10px;
  /* margin-left: 4%;
  margin-right: 4%;
  margin-top: 20px;
  margin-bottom: 20px; */
}

.std-button {
  width: fit-content;
  font-size: 0.8em;
  padding: 5px 10px;
  line-height: 100%;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: rgb(80, 84, 105);
  border: solid 2px white;
  border-radius: 7px;
  transition: transform 0.1s linear;
}
.std-button:disabled {
  background-color: grey !important;
}
.std-button:active {
  background-color: rgb(47, 112, 177);
  transform: translateY(1px);
}
.std-button:disabled {
  background-color: grey;
}
.std-button:disabled:hover {
  background-color: grey;
}
.rounded-button {
  cursor: pointer;
  background-color: rgb(80, 84, 105);
  border: none;
  color: white;
  font-weight: 600;
  border-radius: 25px;
  outline: none;
  font-size: 14px;
  white-space: nowrap;
  padding: 10px;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rounded-button:disabled {
  background-color: grey !important;
  cursor: default;
}
.rounded-button > img {
  /* height: 80%; */
  margin: 0 4px;
}
/* Vue Select */
.generic-select .vs__search::placeholder,
.generic-select .vs__dropdown-toggle,
.generic-select .vs__dropdown-menu {
  background: #dfe5fb;
  border: none;
  color: #394066;
  /* font-variant: small-caps; */
  font-size: 18px;
}

.generic-select .vs__selected {
  font-weight: 600;
  padding-right: 0 !important;
}

.transparent-select .vs__search::placeholder,
.transparent-select .vs__dropdown-toggle,
.transparent-select .vs__dropdown-menu,
.transparent-select .vs__selected,
.transparent-select .vs__dropdown-option,
.transparent-select .vs__dropdown-option--highlight,
.transparent-select .vs__search {
  text-transform: capitalize;
  background: rgb(40, 42, 59);
  color: white !important;
}

.transparent-select .vs__clear {
  visibility: hidden;
  display: none;
}

.generic-select .vs__clear,
.generic-select .vs__open-indicator {
  fill: #394066;
  cursor: pointer;
}

.transparent-select .vs__clear,
.transparent-select .vs__open-indicator {
  fill: white;
}

.rounded-select .vs__dropdown-toggle {
  border-radius: 20px !important;
}
.generic-select {
  width: fit-content;
  /* min-width: 100px; */
}
.vs__dropdown-menu {
  width: auto !important;
}
.vs--open .vs__dropdown-toggle {
  width: calc(100% + 100px) !important;
  min-width: 120px;
}
/* Overlay Info */
.infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  border-radius: 10px;
  background-color: black;
  z-index: 2;
  opacity: 0.7;
}
.infoi > h2 {
  margin: auto;
  font-weight: 700;
}

/* Upload img modal background */
.cropper-drag-box {
  background-color: rgb(29, 31, 41) !important;
  opacity: 0.6 !important;
}

/* Styled Radio */
.radio-container {
  display: grid;
  width: 100%;
  justify-items: center;
}
/* The container */
.radio-label {
  position: relative;
  display: contents;
  cursor: pointer;
  font-size: 22px;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
/* Hide the browser's default radio button */
.radio-label input {
  position: absolute;
  top: 50vh;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.radio-checkmark {
  left: 0;
  top: 0;
  height: 14px;
  position: relative;
  width: 14px;
  border-radius: 50%;
  border: solid 3px white;
  z-index: 9;
}
/* On mouse-over, add a grey background color */
.radio-label:hover input ~ .radio-checkmark {
  background-color: rgb(80, 84, 105);
}
/* When the radio button is checked, add a blue background */
/* .radio-label input:checked ~ .radio-checkmark {
  background-color: #2196F3;
} */
/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio-label input:checked ~ .radio-checkmark:after {
  display: block;
}
/* Style the indicator (dot/circle) */
.radio-label .radio-checkmark:after {
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

h1 {
  font-size: 0.8em;
}
h2 {
  font-size: 0.8em;
}
h4 {
  font-size: 0.8em;
}
input {
  font-size: 0.8em !important;
}
p {
  font-size: 0.8em;
}
a {
  font-size: 0.8em;
}
li {
  font-size: 0.8em;
}
/* label {
  font-size: 0.86em !important;
} */
select {
  font-size: 0.9em !important;
}
span {
  font-size: 0.8em;
}
button {
  font-size: 14px !important;
}

.pointer {
  cursor: pointer;
}

/* Vue-Wizard styling */
/* .wizard-gray-step > a > div {
  background-color: gray !important;
  border-color: transparent !important;
}
.wizard-red-step > a > div {
  background-color: red !important;
  border-color: transparent !important;
}
.wizard-blue-step > a > div {
  background-color: rgb(8, 133, 225) !important;
  border-color: transparent !important;
} */

/* Styled Scroll */
/* .scroll::-webkit-scrollbar {
  width: 8px;
}

.scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
} */

.break-spaces {
  white-space: break-spaces;
}