@font-face {
  font-family: 'Walsheim';
  src: local('Walsheim'), url(./GT-Walsheim-Regular.woff) format('woff');
}

body {
  background-color: #f9f9f9;
  font-family: "DM Sans", "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
}

/* 'Quicksand' */

.flex-container {
  display: flex;
}

.flex-container-column {
  display: flex;
  flex-direction: column;
}

.flex-container-row {
  display: flex;
  flex-direction: row;
}

.flex-center-align {
  align-items: center;
}

.flex-center-justify {
  justify-content: center;
}

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

.flex-space-around {
  justify-content: space-around;
}

.flex-one {
  flex: 1;
}

.basic-container {
  flex: 1;
  max-width: 600px;
  min-width: 500px;
  flex-basis: 450px;
  background-color: white;
  margin: 15px;
  margin-top: 0px;
  padding: 20px;
  box-shadow: 1px 5px 30px 0px #e7e7e7;
}

.standard-container {
  flex: 1;
  max-width: 600px;
  min-width: 500px;
  flex-basis: 450px;
  background-color: white;
  margin: 15px;
  margin-top: 0px;
  border-radius: 8px;
  box-shadow: 1px 5px 30px 0px #e7e7e7;
}

.header-button {
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  padding: 4px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: 5px;
  border-color: #E7E7E7;
  color: #575757;
  font-weight: bold;
  font-size: 13px;
  box-shadow: 0px 0px 2px 0px #e7e7e7;
}

.header-button:hover {
  cursor: pointer;
  background-color: #f7f7f7;
}

.header-second-button {
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  padding: 4px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: 5px;
  color: white;
  border-color: #1dc2ff;
  background-color: #1dc2ff;
  font-weight: bold;
  font-size: 13px;
  box-shadow: 0px 0px 2px 0px #e7e7e7;
}

.header-second-button:hover {
  cursor: pointer;
  background-color: #4aceff;
  border-color: #4aceff;
}

.standard-selection-row {

}

.standard-selection-row:hover {
  background-color: #f7f7f7;
  cursor: pointer;
}

.screen-main-container {
  flex: 1;
  width: 100%;
}

.screen-main-content {
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  flex: 1;
}

.screen-container-column {
  flex: 1;
  flex-direction: column;
  margin: 5px;
  margin-top: 0;
  padding-top: 20px;
  max-width: 600px;
  min-width: 450px;
  flex-basis: 500px;
}

.side-menu-container {
  width: 200px;
  background-color: pink;
  height: 500px;
}

.button-default {
  background-color: #1dc2ff;
  border-width: 0px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 15px;
  padding-left: 15px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  border-radius: 5px;
}

.button-default:hover {
  background-color: #4aceff;
  cursor: pointer;
}

.button-clear {
  border-width: 0px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 15px;
  padding-left: 15px;
  color: grey;
  font-weight: bold;
  font-size: 14px;
  border-radius: 5px;
  background-color: white;
}

.button-clear:hover {
  background-color: #E7E7E7;
  cursor: pointer;
}

.button-clear-blue {
  border-width: 0px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 15px;
  padding-left: 15px;
  color: #1dc2ff;
  font-weight: bold;
  font-size: 14px;
  border-radius: 5px;
  background-color: white;
}

.button-clear-blue:hover {
  background-color: #e8f8ff;
  cursor: pointer;
}

.button-default:focus {
  outline: 0;
}

.button-clear:focus {
  outline: 0;
}

.button-clear-blue:focus {
  outline: 0;
}

.button-clear-selected {
  background-color: #e8f8ff;
  color: #1dc2ff;
}

.button-outline {
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 4px;
  padding-right: 15px;
  padding-left: 15px;
  color: #1dc2ff;
  border-color: #1dc2ff;
  border-style: solid;
  border-width: 2px;
  font-weight: bold;
  font-size: 12px;
  box-shadow: 0px 0px 2px 0px #e7e7e7;
}

.button-outline:hover {
  cursor: pointer;
  text-decoration: none;
  color: #4aceff;
  border-color: #4aceff;
}

.input-default {
  border-width: 0px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: grey;
}

.input-default:focus {
  outline: 0;
  border-bottom-color: #1dc2ff;
}

.image-default {
  object-fit: cover;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  border-color: #e7e7e7;
  overflow: hidden;
  width: 80px;
  height: 80px;
  border-radius: 40px;
}

.input-file-default {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.input-default-border {
  border-width: 0px;
  border-width: 2px;
  border-style: solid;
  border-color: #e7e7e7;
  border-radius: 5px;
}

.input-default-border:focus {
  outline: 0;
  border-color: #1dc2ff;
}

.icon-button {
  color: #1dc2ff;
}

.icon-button:hover {
  color: #4aceff;
  cursor: pointer;
}

.universal-button {

}

.universal-button:hover {
  cursor: pointer;
}

.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}