/* =================================================================
*  Reset some user-agent CSS values
==================================================================*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  font-size: 1rem;
}

body {
  margin: 0;
  line-height: 1.5;
  background-color: #2f4454;
  font-family: 'Roboto', sans-serif;
}

ul {
  list-style: none;
  margin-top: 0;
}

ol {
  margin: 0;
  padding-left: 0;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}

/*============================================================================
* Navbar and Sidenav bar
*===========================================================================*/

.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1rem;
  margin-bottom: 30px;
  z-index: 8;
}

.navbar__nav,
.sidenav__nav,
.dropdown {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.sidenav__nav {
  padding-top: 3.5rem;
}

.sidenav__item .nav__link,
.dropdown__link {
  padding: 1rem;
}

.dropdown {
  margin: 0 1rem;
}

.dropdown .dropdown__link {
  padding: 0.25rem 1.5rem;
}

.nav__link {
  display: block;
  padding: .5rem 0;
}

.navbar__collapse {
  display: none;
}

.navbar__collapse--show {
  display: flex;
  flex-basis: 100%;
}

.navbar--fixed {
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar--default {
  background-color: #2f4454;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.sidenav {
  height: 100%;
  width: 3rem;
  position: fixed;
  z-index: 7;
  top: 0;
  left: 0;
  overflow-x: hidden;
  box-shadow: 4px 0 5px 0 rgba(0, 0, 0, 0.2), 2px 0 10px 0 rgba(0, 0, 0, 0.1);
}

/*
* Theme navbar
*/
.navbar--brand {
  color: #da7b93;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  line-height: inherit;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 700;
  margin-right: 1rem;
}

.nav__link,
.nav__link--toggler,
.dropdown__link {
  color: #fff;
}

.dropdown__link:hover,
.nav__link:hover {
  color: #da7b93;
}

.nav__link--toggler {
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid #ffffff;
  outline: none;
  border-radius: .25rem;
  cursor: pointer;
}

.nav__link--toggler:hover,
.nav__link--toggler:focus {
  text-decoration: none;
  border: 1px solid #da7b93;
  color: #da7b93;
}

/*=============================================================================
* CARDS
*============================================================================*/

.card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border-radius: .5rem;
  background-color: #fff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

.card--title {
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  color: #da7b93;
}

.card ol {
  padding-left: 1.5rem;
}

.card--actions {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card--actions-btn {
  margin-right: .5rem;
  margin-left: 0;
}

/*============================================================================
* Forms, Buttons and labels
*===========================================================================*/

.form__component {
  margin-bottom: 1rem;
}

.form__component-input {
  width: 100%;
  padding: .625rem;
  line-height: 1.2;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
  color: #2f4454;
  border: 1px solid #2e151b;
  border-radius: .5rem;
  outline: none;
}

.form__component-input:focus {
  border: 1px solid #da7b98;
}

.form__label--radio {
  position: relative;
  cursor: pointer;
  display: block;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  user-select: none;
}

.form__label--radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.option-grp--title {
  font-weight: 600;
  color: #da7b93;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.5rem;
  width: 1.5rem;
  background-color: #eee;
  border-radius: 50%;
}

.form__label--radio:hover input~.checkmark {
  background-color: #ccc;
}

.form__label--radio input:checked~.checkmark {
  background-color: #2f4454;
}

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

.form__label--radio input:checked~.checkmark:after {
  display: block;
}

.form__label--radio .checkmark:after {
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
}

td .form__label--radio:last-child {
  margin-bottom: 0;
}

.btn {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  padding: .625rem;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  font-weight: 400;
  border-radius: .5rem;
  cursor: pointer;
  transition: background-color .15s ease-in-out,
    box-shadow .15s ease-in-out;
}

.btn--basic,
.label--basic {
  background-color: #2e151b;
  color: #fff;
}

.btn--danger {
  background-color: #D8001F;
  color: #fff;
}

.btn--primary,
.label--primary {
  background-color: #2f4454;
  color: #fff;
}

.btn:hover,
.btn:focus {
  outline: 0;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

.btn--block {
  flex: 0 0 100%;
}

.btn--basic:hover,
.btn--basic:focus {
  background-color: #5f343e;
}

.btn--danger:hover,
.btn--danger:focus {
  background-color: #9F0000;
}

.btn--primary:hover,
.btn--primary:focus {
  background-color: #2F446E;
}

.hide {
  display: none;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgb(209, 173, 183);
}

.label {
  padding: .3rem;
}

/*============================================================================
* Layout and positioning (Flexbox)
* ===========================================================================*/

.container {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.container__flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.flex__justify--between {
  justify-content: space-between;
}

[class*=flex--col] {
  width: 100%;
  /* fill available width */
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Countdown styling */
.countdown h1 {
  text-align: center;
}

.time--lapse {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  color: #fff;
  font-family: 'Niconne', cursive;
}

.what__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3rem;
}

.time,
.time--separator {
  font-size: 2rem;
}

.time__text {
  font-size: 1rem;
}

.position--rv {
  position: relative;
}

.pwd--toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #2e151b;
  cursor: pointer;
}

.pwd--toggle:hover {
  color: #5f343e;
}

.main {
  margin-top: 60px;
  margin-left: 3.5rem;
}

.main .container {
  margin-top: 4.5rem;
}


/*============================================================================
* Tables and Modals
*============================================================================*/
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  text-align: left;
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid #ddd;
}

thead>tr>td,
th {
  color: #2f4454;
  font-weight: bold;
}

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

.show {
  display: block;
}

/*===========================================================================
* Snackbar and toast notifications
* credits: w3schools https://www.w3schools.com/HOWTO/howto_js_snackbar.asp
*===========================================================================*/
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden;
  min-width: 250px;
  background-color: #2e151b;
  color: #fff;
  text-align: center;
  border-radius: 1.25rem;
  padding: 1rem;
  position: fixed;
  left: 50%;
  bottom: 30px;
}

#snackbar.appear {
  visibility: visible;
  /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  r, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

/*============================================================================
*  Loaders
* ==========================================================================*/
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0
  }

  to {
    bottom: 0px;
    opacity: 1
  }
}

@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0
  }

  to {
    bottom: 0;
    opacity: 1
  }
}


/*=============================================================================
* Media Queries for different
*============================================================================*/

/*
* Css for mobile only
*/
@media (max-width: 48rem) {
  .navbar {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  }

  #snackbar {
    margin-left: -100px;
  }
}

/* CSS to use on tablet or larger */
@media (min-width: 48rem) {
  .container {
    max-width: 46rem;
  }

  .navbar__nav {
    flex-direction: row;
  }

  .navbar__nav .nav__link {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .nav__link--toggler {
    display: none;
  }

  .navbar__collapse {
    display: initial;
  }

  .sidenav {
    width: 14rem;
  }

  .main {
    margin-top: 60px;
    margin-left: 15rem;
  }

  /* flex widths:
  * 1. Items should not grow
  * 2. item should not shrink
  * 3. Limit the flex-basis to a max-width
  */
  .flex--col-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }

  .flex--col-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }

  .flex--col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .flex--col-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }

  .flex--col-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }

  .flex--col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .flex--col-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
  }

  .flex--col-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }

  .flex--col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .flex--col-10 {
    flex: 0 0 83.33%;
    max-width: 83.33;
  }

  .flex--col-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }

  .flex--col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .container--center {
    padding-top: 1.5rem;
  }

  #snackbar {
    margin-left: 0px;
  }
}

/* CSS to use for netbooks and larger */
@media (min-width: 64rem) {
  .container {
    max-width: 62rem;
  }

  .container--center {
    padding-top: 3.5rem;
  }
}

/* CSS to use for notebooks and desktops */
@media (min-width: 75rem) {
  .container {
    max-width: 73rem;
  }
}