@import url('//fonts.googleapis.com/css?family=Fredoka+One|Poppins');
/* Reset */

body, html {
  margin: 0px;
  padding: 0px;
}

/* JavaScript toggle classes */

.hidden {
  display: none !important;
}

/* 
 * everything that's not the logo or an icon will use this font
 * !important to override external bootstrap CSS files
 *
 */

* :not(.logo-font, .v-icon, .fa, i) {
  font-family: "Poppins", "sans-serif" !important;
}

.logo-font {
  font-family: "Fredoka One", "cursive";
  color: #1ecd97;
}

.logo-font:visited {
  color: #1ecd97;
}

.logo-font:active {
  color: #1ecd97;
}

/* All Buttons */

button {
  border-radius: 6px;
  transition: 0.2s ease;
  outline: none;
  position: relative;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  width: 100%;
}

button:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

button:active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  outline: none;
}

button:disabled {
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

/* Primary Buttons */

button.primary-green, button.primary-red {
  border: none;
  font-weight: 500;
  font-size: 16px;
  padding: 18px;
  color: white;
}

button.primary-green {
  background: #1ecd97;
}

button.primary-green:hover {
  background: #1BB887;
}

button.primary-green:active {
  background: #18A478;
}

button.primary-red {
  background: #DB2828;
}

button.primary-red:hover {
  background: #d01919;
}

button.primary-red:active {
  background: #b21e1e
}

/* Secondary Buttons */

button.secondary {
  color: black;
  font-weight: 500;
  font-size: 14px;
  padding: 14px;
  border: 0.5px solid #ddd;
}

button.secondary:hover {
  background-color: #e1f5fe;
}

.buttonloadicon {
  margin-left: -12px;
  margin-right: 8px;
}

/* Confirmation Popups */

.modal-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 99;
}

.modal {
  width: 500px;
  padding: 35px 25px;
  background: white;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 10px;
  z-index: 100;
  height: fit-content;
}

.modal>.header {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 20px;
  border: none;
}

.modal>.content {
  font-size: 17px;
  line-height: 27px;
  margin-bottom: 30px;
}

.modal>.actions {
  display: flex;
}

.modal>.actions>button {
  margin: 5px;
  z-index: 101;
  width: 100%;
}

i.warning {
  font-size: 40px;
  color: #DB2828;
}

i.success {
  font-size: 40px;
  color: #1ecd97;
}

a.standard {
  text-decoration: none;
  color: #0275d8;
  cursor: pointer;
}

a.standard:active {
  color: #0275d8;
}

a.standard:visited {
  color: #0275d8;
}