:root {
  --bgcolor: #35393C;
  --red: #EE6352;
  --green: #59CD90;
  --blue: #3FA7D6;
  --yellow: #FAC05E;
}

* {
  font-family: Fira Sans, sans-serif!important;
}

.uk-background-secondary, .uk-card-secondary {
  background-color: var(--bgcolor);
}

.uk-card-title {
  text-shadow: 0 0 3px rgba(0,0,0,128);
}

.text-blue {
  color: var(--blue)!important;
}
.text-red {
  color: var(--red)!important;
}
.text-green {
  color: var(--green)!important;
}
.text-yellow {
  color: var(--yellow)!important;
}

.color-indicator-small {
    display: inline-block;
    margin-bottom: -2px;
    border: 1px solid #333;
    transition: border-color .5s, box-shadow 0.5s;
    width:12px;
    height:12px;
}

.color-indicator-smallest {
    display: inline-block;
    margin-bottom: -2px;
    border: 1px solid #333;
    transition: border-color .5s, box-shadow 0.5s;
    width:8px;
    height:8px;
}

.color-indicator-small:hover, .color-indicator-smallest:hover {
    box-shadow: 0 0 4px #FFF;
    border-color: #FFF;
}

.color-indicator-smallest {
    display: inline-block;
    margin-bottom: -2px;
    border: 1px solid #333;
    transition: border-color .5s, box-shadow 0.5s;
    width:8px;
    height:8px;
}


.color-indicator-large {
    display: inline-block;
    border: 1px solid #333;
    width:24px;
    height:24px;
}

.poster-img {
  border: 5px solid #FFF;
}
.poster-img-small {
  border: 3px solid #FFF;
}

.poster-img {
  box-shadow: 0 6px 16px 4px #000;
}
.poster-img-small {
  box-shadow: 0 3px 8px 2px #000;
}

.uk-alert-danger, .uk-alert-success, .uk-alert-warning {
  color: #FFF;
}

.uk-alert-danger {
  background-color: var(--red);
}
.uk-alert-warning {
  background-color: var(--yellow);
}
.uk-alert-success {
  background-color: var(--green);

}

.uk-icon-button.uk-button-success {
  color: var(--green)!important;
}

.uk-icon-button.uk-button-danger {
  color: var(--red)!important;
  /*#d32f2f*/
}
.uk-icon-button.uk-button-primary {
  color: var(--blue)!important;
}

.uk-icon-button.uk-button-primary.uk-disabled, .uk-icon-button.uk-button-danger.uk-disabled, .uk-icon-button.uk-button-success.uk-disabled {
  color: #CCC!important;
}

.uk-button-success.button-highlighted:not(.uk-button-success.uk-disabled){
  box-shadow: 0 0 2px 2px var(--green);
}

.uk-button-danger.button-highlighted:not(.uk-button-danger.uk-disabled){
  box-shadow: 0 0 2px 2px var(--red);
}

.uk-button-primary.button-highlighted:not(.uk-button-primary.uk-disabled){
  box-shadow: 0 0 2px 2px var(--blue);
}

.uk-icon-button.uk-button-success:hover {
  background-color: var(--green)!important;
  color: #FFF!important;
}
.uk-icon-button.uk-button-danger:hover {
  background-color: var(--red)!important;
  color: #FFF!important;
}
.uk-icon-button.uk-button-primary:hover {
  background-color: var(--blue)!important;
  color: #FFF!important;
}

.uk-divider-icon.uk-divider-blue::before {
  border-bottom-color: var(--blue);
  color: var(--blue);
}
.uk-divider-icon.uk-divider-blue::after {
  border-bottom-color: var(--blue);
  color: var(--blue);
}
.uk-divider-icon.uk-divider-red::before {
  border-bottom-color: var(--red);
  color: var(--red);
}
.uk-divider-icon.uk-divider-red::after {
  border-bottom-color: var(--red);
  color: var(--red);
}
.uk-divider-icon.uk-divider-green::before {
  border-bottom-color: var(--green);
  color: var(--green);
}
.uk-divider-icon.uk-divider-green::after {
  border-bottom-color: var(--green);
  color: var(--green);
}
.uk-divider-icon.uk-divider-yellow::before, .uk-divider.uk-divider-yellow::before {
  border-bottom-color: var(--yellow);
  color: var(--yellow);
}
.uk-divider-icon.uk-divider-yellow::after, .uk-divider.uk-divider-yellow::after {
  border-bottom-color: var(--yellow);
  color: var(--yellow);
}

.main-menu a {
    text-decoration: none;
}
.main-menu-item {
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
}


.main-menu h1 {
    color: rgba(255, 255, 255, .5);
	font-size: 1.5rem;
	position: relative;
	text-transform: uppercase;
	transition: all 200ms ease-out;
	width: fit-content;
	cursor: pointer;
}

.main-menu > .uk-active h1 {
  color: var(--green);
  text-shadow: 0 0 2px var(--blue);
}

.main-menu h1:hover {
	transform: skew(10deg);
}
.main-menu h1::before {
	content: attr(data-name);
	position: absolute;
	top: 0;
	left: -8px;
	background: var(--bgcolor);
	height: 1rem;
	overflow: hidden;
	transition: all 300ms ease;
	padding-left: 8px;
}
.main-menu h1:hover::before {
	top: -3px;
	left: 0px;
	color: var(--yellow);
}
.main-menu .uk-active h1:hover::before{
    text-shadow: 0 0 2px var(--yellow);

}

.main-menu h1::after {
	content: "";
	height: 2px;
	width: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--yellow);
	transition: all 300ms ease;
}
.main-menu h1:hover::after {
	width: 110%;
	outline: 3px solid var(--bgcolor);
}

/*.round-icon-btn {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  border-radius: 10px;*/
/*  cursor: pointer;*/
/*  border: none;*/
/*  background-color: transparent;*/
/*  position: relative;*/
/*}*/

/*.round-icon {*/
/*  width: 30px;*/
/*  height: 30px;*/
/*  transition: 0.2s linear;*/
/*}*/

/*.round-icon path {*/
/*  fill: white;*/
/*  transition: 0.2s linear;*/
/*}*/

/*.round-icon-btn:hover > .round-icon {*/
/*  transform: scale(1.2);*/
/*}*/

/*.round-icon-btn:hover > .round-icon path {*/
/*  fill: rgb(177, 139, 189);*/
/*}*/


/* BUTTON
-------------------------------------------------------------- */
.uk-button-default {
  color: #ffffff;
  background-color: #9e9e9e;
  border: 1px solid transparent;
}
.uk-button-default:hover,
.uk-button-default:focus {
  color: #ffffff;
  background-color: #757575;
  border: 1px solid transparent;
}
.uk-button-default:active,
.uk-button-default.uk-active {
  color: #ffffff;
  background-color: #616161;
  border: 1px solid transparent;
}

.uk-button-primary {
  color: #ffffff;
  background-color: #2196f3;
  border: 1px solid transparent;
}
.uk-button-primary:hover,
.uk-button-primary:focus {
  color: #ffffff;
  background-color: #1976d2;
  border: 1px solid transparent;
}
.uk-button-primary:active,
.uk-button-primary.uk-active {
  color: #ffffff;
  background-color: #0d47a1;
  border: 1px solid transparent;
}

.uk-button-secondary {
  color: #ffffff;
  background-color: #673ab7;
  border: 1px solid transparent;
}
.uk-button-secondary:hover,
.uk-button-secondary:focus {
  color: #ffffff;
  background-color: #512da8;
  border: 1px solid transparent;
}
.uk-button-secondary:active,
.uk-button-secondary.uk-active {
  color: #ffffff;
  background-color: #311b92;
  border: 1px solid transparent;
}

.uk-button-danger {
  color: #ffffff;
  background-color: #f44336;
  border: 1px solid transparent;
}
.uk-button-danger:hover,
.uk-button-danger:focus {
  color: #ffffff;
  background-color: #d32f2f;
  border: 1px solid transparent;
}
.uk-button-danger:active,
.uk-button-danger.uk-active {
  color: #ffffff;
  background-color: #b71c1c;
  border: 1px solid transparent;
}

.uk-button-success {
  color: #ffffff;
  background-color: var(--green);
  border: 1px solid transparent;
}
.uk-button-success:hover,
.uk-button-success:focus {
  color: #ffffff;
  background-color: var(--green);
  border: 1px solid transparent;
}
.uk-button-success:active,
.uk-button-success.uk-active {
  color: #ffffff;
  background-color: var(--green);
  border: 1px solid transparent;
}

.uk-button-warning {
  color: #ffffff;
  background-color: #ff9800;
  border: 1px solid transparent;
}
.uk-button-warning:hover,
.uk-button-warning:focus {
  color: #ffffff;
  background-color: #f57c00;
  border: 1px solid transparent;
}
.uk-button-warning:active,
.uk-button-warning.uk-active {
  color: #ffffff;
  background-color: #e65100;
  border: 1px solid transparent;
}

.uk-button-default-outline {
  background-color: transparent !important;
  color: #9e9e9e;
  border: 1px solid #9e9e9e;
}
.uk-button-default-outline:hover,
.uk-button-default-outline:focus {
  color: #757575;
  border: 1px solid #757575;
}
.uk-button-default-outline:active,
.uk-button-default-outline.uk-active {
  color: #616161;
  border: 1px solid #616161;
}

.uk-button-primary-outline {
  background-color: transparent !important;
  color: #2196f3;
  border: 1px solid #2196f3;
}
.uk-button-primary-outline:hover,
.uk-button-primary-outline:focus {
  color: #1976d2;
  border: 1px solid #1976d2;
}
.uk-button-primary-outline:active,
.uk-button-primary-outline.uk-active {
  color: #0d47a1;
  border: 1px solid #0d47a1;
}

.uk-button-secondary-outline {
  background-color: transparent !important;
  color: #673ab7;
  border: 1px solid #673ab7;
}
.uk-button-secondary-outline:hover,
.uk-button-secondary-outline:focus {
  color: #512da8;
  border: 1px solid #512da8;
}
.uk-button-secondary-outline:active,
.uk-button-secondary-outline.uk-active {
  color: #311b92;
  border: 1px solid #311b92;
}

.uk-button-danger-outline {
  background-color: transparent !important;
  color: #f44336;
  border: 1px solid #f44336;
}
.uk-button-danger-outline:hover,
.uk-button-danger-outline:focus {
  color: #d32f2f;
  border: 1px solid #d32f2f;
}
.uk-button-danger-outline:active,
.uk-button-danger-outline.uk-active {
  color: #b71c1c;
  border: 1px solid #b71c1c;
}

.uk-button-success-outline {
  background-color: transparent !important;
  color: #4caf50;
  border: 1px solid var(--green);
}
.uk-button-success-outline:hover,
.uk-button-success-outline:focus {
  color: #388e3c;
  border: 1px solid #388e3c;
}
.uk-button-success-outline:active,
.uk-button-success-outline.uk-active {
  color: #1b5e20;
  border: 1px solid #1b5e20;
}

.uk-button-warning-outline {
  background-color: transparent !important;
  color: #ff9800;
  border: 1px solid #ff9800;
}
.uk-button-warning-outline:hover,
.uk-button-warning-outline:focus {
  color: #f57c00;
  border: 1px solid #f57c00;
}
.uk-button-warning-outline:active,
.uk-button-warning-outline.uk-active {
  color: #e65100;
  border: 1px solid #e65100;
}