/* GLOBAL STYLING */
@font-face {
  font-family: SoleilSb;
  src:  url('./fonts/typetogether_-_soleilsb-webfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('./fonts/typetogether_-_soleilsb-webfont.woff') format('woff'), /* Pretty Modern Browsers */
        url('./fonts/TypeTogether - SoleilSb.ttf') format('truetype'),  
        url('TypeTogether - SoleilSb.otf');
  font-display: swap!important;
  text-rendering: optimizeLegibility;
  font-weight: 400;
}

@font-face {
  font-family: SoleilLight;
  src:  url('./fonts/soleillight-webfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('./fonts/soleillight-webfont.woff') format('woff'), /* Pretty Modern Browsers */
        url('./fonts/SoleilLight.ttf') format('truetype'),
        url('SoleilLight.otf');
  font-display: swap!important;
  text-rendering:optimizeLegibility;
}

@font-face {
  font-family: SoleilRegular;
  src:  url('./fonts/soleilregular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('./fonts/soleilregular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
        url('./fonts/SoleilRegular.ttf') format('truetype'),
        url('SoleilRegular.otf');
  font-display: swap!important;
  text-rendering:optimizeLegibility;
}

@font-face {
  font-family: SoleilBook;
  src:  url('./fonts/soleilbook-webfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('./fonts/soleilbook-webfont.woff') format('woff'), /* Pretty Modern Browsers */
        url('./fonts/SoleilBook.ttf') format('truetype'), 
        url('SoleilBook.otf');
  font-display: swap!important;
  text-rendering:optimizeLegibility;
}


span.magenta {
  color: #f40f80;
}


h1 {
  font-family: SoleilRegular!important;
  font-weight: 400;
}

h2 {
  font-family: SoleilRegular!important;
  font-weight: 400;
}

h3 {
  font-family: SoleilRegular!important;
  font-weight: 400;
}

span.accent {
  text-decoration: underline;
  text-decoration-line: underline;
  text-underline-offset: 20px;
  text-decoration-color: #f40f80;
}


.accentHeader {
  position : relative;
  display : inline-block;
  padding-left: 0px!important;
}

.accentHeader:after {
  content : "";
  position : absolute;
  width : 60%;
  height : 4px;
  bottom: -4px;
  left: 0;
  background: #f40f80;
}

.ui.button {
  font-family: SoleilLight!important;
  font-weight: 400;
}

div {
  font-family: SoleilLight!important;
  font-weight: 400;
}

.app-content {
  width: 100vw!important;
  overflow-x:hidden;
}

.leftLabel {
  margin-left: -150px!important;
}

.white {
  color: #ffffff!important;
}

tspan {
  text-decoration: none!important;
  font-weight: 400;
}

#unit_frame {
  max-height: 90vh!important;
}

.material-icons.menuIcon {
  height: 1em;
  display: block!important;
  font-size: 1.71428571em!important;
  margin: 0 auto 0.5rem!important;
}

.magenta.outline {
  border-color: #f40f80!important;
  border-style: solid!important;
  background-color: rgba(0,0,0,0)!important;
  border-radius: 10px!important;
  color: #f40f80!important;
  font-size: 24px!important;
}

.magenta.outline:hover {
  background-color: #f40f80!important;
  color: #ffffff!important;
}

.ui.transparent.buttons .button,
.ui.transparent.button {
  background-color: rgba(0,0,0,0.0);
  color: #ffffff;
  text-shadow: none;
  background-image: none;
}

.ui.transparent.buttons .button,
.ui.transparent.button.loading {
  background-color: rgba(0,0,0,0.4);
  color: #ffffff;
  text-shadow: none;
  background-image: none;
}

.ui.transparent.buttons .button:hover,
.ui.transparent.button:hover {
  background-color: rgba(0,0,0,0.0);
  color: #ffffff7a;
  text-shadow: none;
  -webkit-box-shadow: 0px 0px 60px 0px rgb(74 78 80 / 29%);
  -moz-box-shadow: 0px 0px 60px 0px rgb(74 78 80 / 29%);
  box-shadow: 0px 0px 60px 0px rgb(74 78 80 / 29%);
  border-radius: 5px;
}

.ui.magenta.buttons .button,
.ui.magenta.button {
  background-color: #f40f80;
  color: #fff;
  text-shadow: none;
  background-image: none;
}

.ui.magenta.buttons .button:hover,
.ui.magenta.button:hover {
  background-color: #dd0f76;
  color: #fff;
  text-shadow: none;
}

.fancy.button {
  padding-left: 25px!important;
  padding-right: 25px!important;
  padding-top: 10px!important;
  padding-bottom: 10px!important;
  box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 20%);
  border-radius: 50px;
}

/* .fancy.button p {
  margin-top: 3px;
} */

.ui.darkBlue.buttons .button,
.ui.darkBlue.button {
  background-color: #005cff;
  color: #fff;
  text-shadow: none;
  background-image: none;
}

.ui.darkBlue.buttons .button:hover,
.ui.darkBlue.button:hover {
  background-color: #004ccf;
  color: #fff;
  text-shadow: none;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #919191;
  cursor: pointer;
}

.ui.card {
  margin: 0;
}

.noselect {
  -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, Edge, Opera and Firefox */
  
}

.profilePhoto {
  margin-left: auto;
  margin-right: auto;
  object-fit: cover;
}

/* .ui.card, .ui.cards>.card {
  max-width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 290px;
  min-height: 0;
  background: #fff;
  padding: 0;
  border: none;
  border-radius: 0.28571429rem;
  
  -webkit-box-shadow: none;
  box-shadow: none;
  
  -webkit-transition: -webkit-box-shadow .1s ease,-webkit-transform .1s ease;
  transition: -webkit-box-shadow .1s ease,-webkit-transform .1s ease;
  transition: box-shadow .1s ease,transform .1s ease;
  transition: box-shadow .1s ease,transform .1s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;
  z-index: '';
} */

.cards.units::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.cards.units {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

div[role="progressbar"] {
  --size: 6rem;
  --fg: #005cff;
  --bg: #dddddd;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: 
    radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
    ;
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 5);
  color: #a1a1a1;
  margin-left: auto;
  margin-right: auto;
}

div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
}

/* --------------- */