:root {
  --srs-color-primary: #034c53;
  --srs-color-primary-active: #166d75;
  --srs-color-secondary: #F5ECD5;
  --srs-color-terciary: #DDA853;
  --srs-color-terciary-active: #e9bc74;
  --srs-color-red: #C1121F;
  --srs-color-red-focus: #C1121F60;
  --srs-color-disabled: #F4EFE6;
  --srs-color-text-disabled: #2c2c2c;
  --srs-color-border: #e2e3e5;
  --srs-color-white: #ffffff;
  --srs-color-black: #000000;
  --srs-color-gray: #131313;
  --srs-color-gray-light: #f4f4f4;
  /* font-size: 14px; */
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

table {
  border: none;

  thead {
    background-color: var(--srs-color-secondary);
    color: var(--srs-color-gray);
    text-align: center;

    th {
      padding: .3rem;
      border: none;
    }
  }

  .td-sub-border {
    padding: .4rem;
    border: none;
    border-bottom: 1px solid var(--srs-color-border);
  }

  .td-x-border {
    /* padding: .4rem; */
    border: none;
    border-left: 2px solid var(--srs-color-white);
    border-right: 2px solid var(--srs-color-white);
  }

  tbody {
    background-color: var(--srs-color-white);
    color: var(--srs-color-gray);
    border-collapse: collapse;

  }
}

body {
  min-height: 20vh;
}

a {
  cursor: pointer;
}

.color-white {
  color: var(--srs-color-white);
}

.btn-standard {
  background-color: var(--srs-color-primary);
  color: var(--srs-color-white);

  &:hover {
    background-color: var(--srs-color-primary-active);
    color: var(--srs-color-white);
  }

  &:focus {
    border: var(--srs-color-primary-active);
  }

  &:disabled {
    background-color: var(--srs-color-disabled);
    color: var(--srs-color-text-disabled);
  }
}

.c-pointer {
  cursor: pointer;
}

.input-standard {
  height: 100%;
  font-size: 0.95rem;
  border: 1px solid var(--srs-color-border);
  border-radius: 0.5rem;
  background-color: var(--srs-color-white);
  color: var(--srs-color-gray);
  padding: 0.5rem 0.75rem;
  min-width: 0rem;
  text-decoration: none;
  outline: none;
  transition: all 150ms ease-in-out;

  &:focus {
    outline: none;
    border: 1px solid var(--srs-color-primary-active);
  }

  &:disabled {
    background-color: var(--srs-color-gray-light);
    color: var(--srs-color-text-disabled);
  }
}

.btn-standard,
.btn-cuadrado {
  border: transparent;
  border-radius: 0.5rem;
  padding: 0.4rem 1rem;
  overflow: hidden;
  transition: all 150ms ease-in-out;
}

.btn-cuadrado {
  padding: 1rem;
}

.btn-width-content {
  max-width: min-content;
}

.btn-green {
  background-color: var(--srs-color-primary);
  color: var(--srs-color-white);

  &:hover {
    background-color: var(--srs-color-primary-active);
    color: var(--srs-color-white);
  }

  &:disabled {
    background-color: var(--srs-color-disabled);
    color: var(--srs-color-text-disabled);
  }
}

.btn-yellow {
  background-color: var(--srs-color-terciary);
  color: var(--srs-color-gray);

  &:hover {
    background-color: var(--srs-color-terciary-active);
    color: var(--srs-color-gray);
  }

  &:disabled {
    background-color: var(--srs-color-disabled);
    color: var(--srs-color-text-disabled);
  }
}

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

  &:hover {
    background-color: var(--srs-color-red-focus);
    color: var(--srs-color-white);
  }

  &:disabled {
    background-color: var(--srs-color-disabled);
    color: var(--srs-color-text-disabled);
  }
}

.bg-navbar {
  background-color: var(--srs-color-primary);

  .nav-link {
    color: var(--srs-color-secondary);
    padding: 12px 0;
  }

  .nav-item:hover {
    background-color: var(--srs-color-primary-active);
  }

  .dropdown-item {
    text-wrap: wrap;
  }
}

.icon {
  margin: 0;
  padding: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.separador-menu {
  width: 100%;
  margin-bottom: .25rem;
  color: var(--srs-color-white);
  visibility: hidden;
}

.form-container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
}

.form-content {
  width: 500px;
  max-width: 500px;
  padding: 0 1.8rem;
}

.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.2rem;
}

.form-item label {
  font-weight: bold;
  color: var(--srs-color-gray);
}

@media (min-width:768px) {
  .btn-exit {
    width: 100%;
  }

  .separador-menu {
    visibility: visible;
  }
}