:root {
    --color-green-principal: #055A1C;
    --color-green-secondary: #338C36;
    --color-green-tertiary: #76B82A;
    --color-red-principal: #E60064;
    --color-gray-principal: #706f6f;
    --color-gray-secondary: #808080;
    --color-gray-tertiary: #cccccc;
}

.unit-status-available {
    color: var(--color-green-principal);
    font-weight: bold;
}
.unit-status-maintenance {
    color: #e98330; 
    font-weight: bold;
}
.unit-status-unavailable {
    color: rgb(200, 50, 50); 
    font-weight: bold;
}

.logo {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.card-login {
    border-radius: 15px;
    box-shadow: 0 4px 8px var(--color-green-principal);
    border: 10px solid var(--color-green-principal) !important;
    overflow: hidden;
    background-clip: padding-box; 
    padding: 10px;
}

.title {
    font-size: 3em;
    color: var(--color-green-principal);
    text-align: center;
    margin-bottom: 1rem;
    font-weight: bold;
}

.form-control:focus,
input.form-control:focus,
input[type="text"]:focus {
    box-shadow: 0 0 0.1rem 0.1rem var(--color-green-principal) !important;
    border-color: var(--color-green-principal) !important;
}

.btn-primary {
    background-color: var(--color-green-principal) !important;;
    border-color: var(--color-green-principal) !important;;
}

.btn-primary:hover {
    background-color: var(--color-green-secondary) !important;;
    border-color: var(--color-green-secondary) !important;;
}

.btn:active {
    background-color: var(--color-green-secondary) !important;
    color: #ffffff !important;
}

.btn-primary:focus {
    box-shadow: 0 0 0.1rem 0.1rem var(--color-green-principal) !important;
    border-color: var(--color-green-principal) !important;
}

.form-check-input:checked {
    background-color: var(--color-green-principal) !important;
    border-color: var(--color-green-secondary) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25) !important;
}

h1
{
 color: var(--color-green-principal) !important;
}

h2
{
 color: var(--color-green-secondary) !important;
}

h1.active-route-heading
{
    text-decoration: #055A1C !important;
}
h3
{
    color: var(--color-gray-secondary) !important;
}

#toggleDateFields
{
    color: white !important;
    background-color: var(--color-red-principal)!important;
}

.weeklyScheduled
{
    color: white !important;
    background-color: var(--color-green-principal)!important;
}
.TitleWeeklyScheduled
{
    color: white !important;
    background-color: var( --color-green-tertiary)!important;
}

.weeklyScheduledTh
{
    color: white !important;
    background-color: var( --color-green-secondary)!important;
}


.button_before_weeks
{
    color: white;
    background-color: var(--color-gray-principal);
    white-space: 5px;
}
.button_weeks
{
    color: white;
    background-color: var(--color-green-secondary);
    margin: 15px;
}
.button_weeks:active
{
    color: white;
    background-color: var(--color-green-secondary);
}
.button_currents_weeks
{
    color: white;
    background-color: var(--color-red-principal)!important;
}

.block {
  background: rgba(0, 0, 0, .3) url('https://thumbs.gfycat.com/LameDifferentBalloonfish-max-1mb.gif') no-repeat;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}