* {
  box-sizing: border-box;
  --primary-500: #0094bd;
  --gray-000: #fff;
  --gray-100: #d1d1d1;
  --gray-200: #bcbcbc;
  --gray-300: #a8a8a8;
  --gray-400: #949494;
  --gray-500: #818181;
  --gray-600: #6e6e6e;
  --gray-700: #595959;
  --gray-800: #424242;
  --gray-900: #1b1b1b;
  --green-500: #35d908;
  --warning-500: #fec800;
  --danger-500: #fe3500;
}

html {
  --background-color: var(--gray-000);
  --label-color: var(--gray-600);
  --header-color: var(--gray-900);
  --input-border-color: var(--gray-100);
  --input-bg-color: #fff;
  --input-color: #1b1b1b;
  --alert-bg-color: #fff;
  --alert-color: #1b1b1b;
  --alert-bg-url: url("../assets/exclamation-circle-solid.svg");
  --danger-bg-url: url("../assets/exclamation-circle-solid-danger.svg");
  --confirmation-bg-url: url("../assets/exclamation-circle-solid-confirmation.svg");

  color: var(--gray-900);
}

html[data-theme="lightWithDarkSidebar"] {
  --gray-000: #000;
  --gray-100: #424242;
  --gray-200: #595959;
  --gray-300: #6e6e6e;
  --gray-400: #818181;
  --gray-500: #8c8c8c;
  --gray-600: #949494;
  --gray-700: #adadad;
  --gray-800: #d1d1d1;
  --gray-900: #e6e6e6;
  --green-500: #35d908;
  --warning-500: #fec800;
  --danger-500: #fe3500;

  --background-color: #1b1b1b;
  --label-color: var(--gray-600);
  --header-color: var(--gray-900);
}

body {
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  background-color: var(--background-color);
}

.wrapper {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr 2fr;
  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.left-col {
  background-image: url("../assets/bg-image.jpg");
  background-size: cover;
  background-position: center;
  @media screen and (max-width: 768px) {
    display: none;
  }
}

.right-col {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.content-wrapper {
  padding: 1.5rem 0;
  width: 384px;
}

/* FORMS */

label {
  color: var(--label-color);
  font-size: 0.75rem;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

input {
  width: 100%;
  padding: 0.75rem;
  border-radius: 3px;
  border: 1px solid var(--input-border-color, #d1d1d1);
  background-color: var(--input-bg-color);
  color: var(--input-color);
  outline: none;
}

.form-group {
  margin-bottom: 1.5rem;
}

.btn {
  text-transform: uppercase;
  padding: 14px 21px;
  border-radius: 3px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  border-width: 1px;
  outline: none;
  box-shadow: none;
  border-style: solid;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--primary-500);
  color: white;
  border-color: var(--primary-500);
}

.btn-icon {
    background: transparent;
    outline: none;
    border: none;
    cursor: pointer;
}

/* TYPOGRAPHY */

p {
  font-size: 14px;
  font-weight: 400;
}

h1 {
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  color: var(--header-color);
}

a {
  color: var(--primary-500);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.small {
  font-size: 0.75rem;
  color: var(--gray-300);
}

/* ALERT */

.alert {
  padding: 0.875rem;
  border-radius: 3px;
  border: 1px solid var(--gray-100, #d1d1d1);
  border-left-width: 0.5rem;
  font-size: 14px;
  background-color: var(--alert-bg-color);
  display: grid;
  align-items: center;
  color: var(--alert-color);
}

.alert-warning {
  border-left-color: var(--warning-500);
}

.alert-danger {
  border-left-color: var(--danger-500);
}

.alert-confirmation {
  border-left-color: var(--green-500);
}

/* ICONS */
.feedback-icon {
  background-repeat: no-repeat;
  min-width: 14px;
  min-height: 14px;
  margin-right: 6px;
}
.feedback-icon--warning {
  background-image: var(--alert-bg-url);
}

.feedback-icon--danger {
  background-image: var(--danger-bg-url);
}

.feedback-icon--confirmation {
  background-image: var(--confirmation-bg-url);
}

.icon-close {
    display: flex;
    min-width: 14px;
    min-height: 14px;
    background-image: url(../assets/times-solid.svg);
    background-repeat: no-repeat;
}

/* UTILITIES */
.mb-6 {
  margin-bottom: 1.5rem;
}

.text-center {
    text-align: center;
}

.block {
    display: block;
}

.none {
    display: none;
}

.flex {
    display: flex;
}

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

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