@CHARSET "UTF-8";

/********** FONT IMPORT **********/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700&display=swap');

/********** SET DEFAULT GLOBAL PROPERTIES **********/

* { font-family: 'Roboto', sans-serif; font-size: 100%; } /* Set default font and font size on all elements */
*:focus { outline: none; } /* Eliminate browsers' default outline on focus */
p { margin: 0px; } /* Eliminate browsers' default margin on p elements */
a { text-decoration: none; color: inherit; } /* Eliminate browsers' link stuff by default */
img { border: none; } /* Eliminate image borders by default */

/********** GENERIC PROPERTIES **********/

.font-slab { font-family: 'Roboto Slab', serif; } /* Serif font */

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.click { cursor: pointer; }
.semi-bold { font-weight: 500; }
.bold { font-weight: 700; }
.hidden { display: none; }
.break-text { word-break: break-all; }

/********** COLORS **********/

:root {
  --blue: #3C79F5;
  --blue-royal: #003399;
  --blue-dark: #0f172d;
  --blue-darker: #090E1C;
  --blue-grey: #39435e;
  
  --black: #050505;
  --grey: #090909;
  --grey-light: #E6E6E6;
  --white: #FAFAFA;
  --green: #019900;
  --red: #CC0000;
  --teal: #2DCDDF;
  
  --blue-20: rgba(60,121,245, 0.2);
  --green-20: rgba(1,153,0, 0.2);
  --red-20: rgba(204,0,0, 0.2);
  --white-10: rgba(250,250,250, 0.08);
}

/********** BODY **********/

#body { 
	display: block; width: 100%; min-width: 360px; min-height: 640px; margin: 0; 
	color: var(--white); background-color: var(--blue-darker); 
}

/********** INPUT **********/

input { 
	font-size: 108%; color: var(--white); background-color: var(--blue-darker); border: 1px solid var(--blue-royal);
	transition: box-shadow .12s ease-in-out;
}

input:hover, input:focus { 
	box-shadow: var(--blue-royal) 0 0 4px; 
}

/********** CUSTOM SCROLL BAR **********/

::-webkit-scrollbar { width: 6px; height: 6px; } /* Container */
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--blue-darker); border-radius: 4px; } /* Tracking bar (background) */
::-webkit-scrollbar-thumb {  background:var(--blue); border-radius: 4px; } /* Handle */
::-webkit-scrollbar-thumb:hover { background: var(--blue); cursor: pointer; } /* Handle on hover */

/********** LOADING CIRCLE ANIMATION  **********/

/* GOLD STYLE */

.loading-animation-gold-large, .loading-animation-gold-large:after {
  border-radius: 50%; width: 50px; height: 50px;
}

.loading-animation-gold-small, .loading-animation-gold-small:after {
  border-radius: 50%; width: 25px; height: 25px;
}

.loading-animation-gold-mini, .loading-animation-gold-mini:after {
  border-radius: 50%; width: 16px; height: 16px;
}

/* SHARED STYLE */

.loading-animation-gold-large, .loading-animation-gold-small, .loading-animation-gold-mini {
  display: inline-block; font-size: 10px; text-indent: -9999em;
  border-top: 0.5em solid rgba(190,144,102,0.2); border-right: 0.5em solid rgba(190,144,102,0.2);
  border-bottom: 0.5em solid rgba(190,144,102,0.2); border-left: 0.5em solid #be9066;
  transform: translateZ(0); -webkit-transform: translateZ(0); -ms-transform: translateZ(0);
  animation: load8 0.7s infinite linear; -webkit-animation: load8 0.7s infinite linear;
}

/* ANIMATION CODE */

@-webkit-keyframes load8 {
  0% {
    transform: rotate(0deg); -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg); -webkit-transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    transform: rotate(0deg); -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg); -webkit-transform: rotate(360deg);
  }
}