html {
  font-family: 'Manrope', sans-serif;
}

body {
  margin: 0;
  background-color: #1f222c;
  color: var(--main-white-color);
  height: 100%;
}

:root {
  --main-blue-color: hsl(208, 87%, 35%);
  --main-blue-color-hover: hsl(208, 87%, 31%);
  --main-blue-color-active: hsl(208 87% 45%);
  --main-white-color : #d2d2d2;
  --light-white-color : white;
  --light-pink-color: #cb4c89;
  --light-green-color: #158f8d;
  --green-color: hsl(137, 51%, 35%);
  --green-color-hover: hsl(137, 51%, 31%);
  /* --red-color: hsl(344, 86%, 40%); */
  /* --red-color-hover: hsl(344, 86%, 36%); */
  --red-color: hsl(0 60% 48%);
  --red-color-hover: hsl(0, 60%, 44%);
  --dark-blue: hsl(208 40% 18%);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #1c3040;
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-blue-color);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--main-blue-color-hover);
}

.centered-container {
  /* height: calc(100% - 42px); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 40px 30px;
}

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

textarea {
  cursor: auto;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Manrope';
  color: var(--light-white-color);
  border: 0;
  border-radius: 4px;
  background-color: var(--main-blue-color);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}

.btn:hover {
  background-color: var(--main-blue-color-hover);
}

.btn.green {
  background-color: var(--green-color);
}

.btn.green:hover {
  background-color: var(--green-color-hover);
}

.btn.red {
  background-color: var(--red-color);
}

.btn.red:hover {
  background-color: var(--red-color-hover);
}

.btn .icon {
  color: var(--light-white-color);
  height: 14px;
  width: 14px;
}

input[type='text'],
input[type='number'],
textarea {
  background-color: #484f64;
  border: 1px solid #999797;
  border-radius: 4px;
  padding: 6px;
  color: inherit;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

input[type='text']:focus,
input[type='number']:focus,
textarea:focus {
  border: 1px solid var(--light-white-color);
  color: var(--light-white-color);
}

input[type='text']:hover,
input[type='number']:hover,
textarea:hover {
  border: 1px solid var(--light-white-color);
}

input::placeholder {
  color: darkgrey;
}

.input-group {
  display: flex;
  border: 1px solid #999797;
  border-radius: 4px;
}

.input-group > * {
  font-size: 14px;
}

.input-group .input-group-title {
  display: flex;
  align-items: center;
  padding: 0px 8px;
  background-color: #1c3040;
  border-radius: 4px 0px 0px 4px;
  border: 1px solid transparent;
}

.input-group .input-group-value {
  border: 1px solid transparent;
  border-radius: 0px 4px 4px 0px;
  outline: none;
}

.card {
  border: 1px solid #999797;
  padding: 6px;
  border-radius: 4px;
  background-color: var(--dark-blue);
}

.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

button[disabled] {
  background-color: rgb(12 96 169 / 40%);
}

button[disabled]:hover {
  cursor: default;
}

@media screen and (max-width: 400px) {
  .centered-container {
    margin: 30px 14px;
  }
}