:root {
  --font: Arial;

  --button-radius: .5em;
  
  --primary-color: #3EBA7B;
  --primary-hover-color: #29A36C;
  --secondary-color: #447BD1;
  --secondary-hover-color: #3864AC;
  --palette-color-1: red;
  --palette-color-2: #547BD1;
}



/* ---------- CUSTOM ---------- */
* {
  font-family: var(--font);
}

.wrapper{
  margin-top: 5vh;
}

.wrapper .ui.container{
  padding-top: 2em;
}

/* .ui.fixed.menu {
  border-bottom-color: rgba(255, 255, 255, .15);
  border-bottom-style: solid;
  border-bottom-width: thin;
}

.ui.footer {
  border-top-color: rgba(255, 255, 255, .15) !important;
  border-top-style: solid !important;
  border-top-width: thin !important;
} */

.ui.middle.aligned.center.aligned.grid {
  background-image: url('/static/img_TMXWebPortal/login-img-gradient.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 90vh;
}

/* Login */
.ui.middle.aligned.center.aligned.grid .column {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: .5em;
  border: solid;
  border-color: rgba(255, 255, 255, .5);
}

.ui.middle.aligned.center.aligned.grid .column .basic.segment {
  color: white;
}

.ui.inverted.link.list>a{
  color: rgba(255,255,255,.5);
}

/* Home */
.ui.inverted.raised.segment {
  border: solid;
  border-color: rgba(255, 255, 255, .5);
}


.ui.raised.segment:hover {
  /* background-color: whitesmoke; */
  transform: scale(1.1);
}


/* Primary button*/
.ui.button {  
  border-radius: var(--button-radius) !important;
  /* border-color: rgba(255, 255, 255, .15);
  border: solid;
  border-width: thin; */
}

.ui.green.button {
  background-color: var(--primary-color);
}

.ui.green.button:hover {
  background-color: var(--primary-hover-color);
}

.ui.green.button:focus {
  background-color: var(--primary-hover-color);
}

/* Secondary button */
.ui.blue.button {
  background-color: var(--secondary-color);
  /* border-color: rgba(255, 255, 255, .15);
  border: solid;
  border-width: thin; */
}

.ui.blue.button:hover {
  background-color: var(--secondary-hover-color);
}

.ui.blue.button:focus {
  background-color: var(--secondary-hover-color);
}


/* Inputs */

input[type="submit"] {
  background-color: var(--primary-color);
  color: white;
}

input[type="submit"]:hover {
  background-color: var(--primary-hover-color);
}

input {
  border-radius: var(--button-radius) !important;
}

#update_submit {
  background-color: var(--secondary-color);
}

#update_submit:hover {
  background-color: var(--secondary-hover-color);
}

select {
  border-radius: var(--button-radius) !important;
}


/* Labels */

.ui.olive.circular.label {
  background-color: var(--primary-color) !important;
}

.ui.red.circular.label {
  background-color: var(--palette-color-1) !important;
}

.ui.blue.circular.label {
  background-color: var(--secondary-color) !important;
}

.ui.yellow.circular.label {
  background-color: var(--palette-color-2) !important;
}