:root {
    --primary-color: #004c78; /* 0, 76, 121; */
    --primary-contrast: 17, 17, 17; /* 248, 248, 248; */
    --secondary-color: 51, 51, 51;
    --secondary-contrast: 255, 255, 255;
    --tertiary-color: 249, 212, 0;
    --tertiary-contraste: #000000;
    --success-color: 96, 212, 38;
    --success-contrast: 255, 255, 255;
    --danger-color: 249, 7, 22;
    --danger-contrast: 255, 255, 255;
    --info-color: 28, 132, 230;
    --info-contrast: 255, 255, 255;
    --white: #fff;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.hidden {
    display: none;
}

/* Buttons */

.is-button {
    cursor: pointer;
    display: inline-flex;
    gap: 1rem;
    background-color: rgba(255, 255, 255, 0);
    color: var(--white);
    outline: none;
    border: none;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.6;
    min-width: 96px;
}

.is-button.is-outlined {
    border: 2px solid var(--white);
}

.is-button:not(.is-link) {
    padding: 0.5rem;
}

.is-button:hover {
    transform: scale(1.1);
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.15);
}

.button-restricted .is-button:hover {
    transform: scale(1.1);
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    background-color: rgb(185, 32, 32);
}

.is-button.is-link {
    text-decoration: none;
    gap: 0.25rem;
}

.is-button.is-link:hover {
    background-color: rgba(255, 255, 255, 0);
}

.is-button.is-primary {
    background-color: rgba(var(--primary-color, 0.95));
    color: rgba(var(--primary-contrast));
}

.is-button.is-primary:hover {
    background-color: rgba(var(--primary-color, 1));
}

.is-button.is-primary:hover {
    background-color: rgba(var(--primary-color, 1));
}

.is-button.is-primary.is-outlined {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0);
}

.is-button.is-primary.is-outlined:hover {
    background-color: rgba(var(--primary-color), 0.15);
}

.is-button.is-secondary {
    background-color: rgba(var(--secondary-color, 0.95));
    color: rgba(var(--secondary-contrast));
}

.is-button.is-secondary:hover {
    background-color: rgba(var(--secondary-color, 1));
}

.is-button.is-secondary.is-inverted {
    color: rgba(var(--secondary-color, 0.95));
    background-color: rgba(var(--secondary-contrast));
}

.is-button.is-secondary.is-inverted:hover {
    background-color: rgba(var(--secondary-contrast, 1));
}

.is-button.is-secondary.is-outlined {
    border: 2px solid var(--white);
    color: var(--white);
    background-color: rgba(255, 255, 255, 0);
}

.is-button.is-secondary.is-outlined:hover {
    background-color: rgba(var(--secondary-color), 0.15);
}

.is-button.is-tertiary {
    background-color: rgba(var(--tertiary-color, 0.95));
    color: rgba(var(--tertiary-contrast));
}

.is-button.is-tertiary:hover {
    background-color: rgba(var(--tertiary-color, 1));
}

.is-button.is-tertiary.is-inverted {
    color: rgba(var(--tertiary-color, 0.95));
    background-color: rgba(var(--tertiary-contrast));
}

.is-button.is-tertiary.is-inverted:hover {
    background-color: rgba(var(--tertiary-contrast, 1));
}

.is-button.is-tertiary.is-outlined {
    border: 2px solid var(--white);
    color: var(--white);
    background-color: rgba(255, 255, 255, 0);
}

.is-button.is-tertiary.is-outlined:hover {
    background-color: rgba(var(--tertiary-color), 0.15);
}

.is-button.is-success {
    background-color: rgba(var(--success-color, 0.95));
    color: rgb(var(--success-contrast));
}

.is-button.is-success:hover {
    background-color: rgba(var(--success-color, 1));
}

.is-button.is-success.is-outlined {
    border: 2px solid rgb(var(--success-color));
    color: rgb(var(--success-color));
    background-color: rgba(255, 255, 255, 0);
}

.is-button.is-success.is-outlined:hover {
    background-color: rgba(var(--success-color), 0.15);
}

.is-button.is-danger {
    background-color: rgba(var(--danger-color, 0.95));
    color: rgb(var(--danger-contrast));
}

.is-button.is-danger:hover {
    background-color: rgba(var(--danger-color, 1));
}

.is-button.is-danger.is-outlined {
    border: 2px solid rgb(var(--danger-color));
    color: rgb(var(--danger-color));
    background-color: rgba(255, 255, 255, 0);
}

.is-button.is-danger.is-outlined:hover {
    background-color: rgba(var(--danger-color), 0.15);
}

.is-button.is-info {
    background-color: rgba(var(--info-color, 0.9));
    color: rgb(var(--info-contrast));
}

.is-button.is-info:hover {
    background-color: rgba(var(--info-color, 1));
}

.is-button.is-info.is-outlined {
    border: 2px solid rgb(var(--info-color));
    color: rgb(var(--info-color));
    background-color: rgba(255, 255, 255, 0);
}

.is-button.is-info.is-outlined:hover {
    background-color: rgba(var(--info-color), 0.15);
}

/* Shadows utilities */

.has-shadow {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.has-shadow.is-light {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.has-shadow.is-strong {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* dividers */

.divider {
    width: 95%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.35);
}

.divider.is-full {
    width: 100%;
}

.divider.is-half {
    width: 50%;
}

.divider.is-light {
    background-color: rgba(0, 0, 0, 0.25);
}

.divider.is-lighter {
    background-color: rgba(0, 0, 0, 0.15);
}

/* Loading component */

.loading-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    display: none;
}

.loading-component.is-card {
    border-radius: 0.5rem;
    background-color: var(--white);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 2rem;
}

.loading-component.is-card.is-primary {
    background-color: var(--primary-color);
    color: rgb(var(--primary-contrast));
}

.loading-component.is-card.is-secondary {
    background-color: var(--white);
    color: rgb(var(--secondary-contrast));
}

/* Tags */

.is-tag {
    padding: 0.5rem;
    font-weight: 500;
    background-color: var(--white);
    color: rgba(51, 51, 51, 0.75);
}

.is-tag.is-rounded {
    border-radius: 0.5rem;
}

.is-tag.is-tiny {
    padding: 0.25rem;
}

.is-tag.is-primary {
    background-color: var(--primary-color);
    color: rgba(var(--primary-contrast), 0.75);
}

.is-tag.is-secondary {
    background-color: var(--primary-color);
    color: rgba(var(--primary-contrast), 0.75);
}

.is-tag.is-success {
    background-color: rgb(var(--success-color));
    color: rgba(var(--success-contrast), 0.75);
}

.is-tag.is-danger {
    background-color: rgb(var(--danger-color));
    color: rgba(var(--danger-contrast), 0.75);
}

.is-tag.is-info {
    background-color: rgb(var(--info-color));
    color: rgb(var(--info-contrast));
}

/* Forms in general */

.form-container {
    border: 1px solid #999;
    border-radius: 0.25rem;
    padding: 1.5rem;
}

@media (max-width:1023px){
    .form-container{
        width: 100% !important;
        margin: 1rem;
    }
}

/* Ocurrence form stylings */

.form-card {
    border-radius: 0.25rem;
    background-color: rgb(var(--secondary-contrast));
}

.form-card-nav {
    background-color: var(--primary-color);
    color: rgb(var(--primary-contrast));
    min-height: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-card .list-item {
    border-radius: 0.5rem;
    padding: 0.75rem 0.25rem;
}

.form-card .list-item.is-theme-item {
    color: rgb(var(--secondary-contrast));
    background-color: rgba(var(--secondary-color), 0.95);
}

.form-card .list-item.is-subject-item {
    color: rgb(var(--info-contrast));
    background-color: rgba(var(--info-color), 0.95);
}

.form-card .list-item.is-service-item {
    color: rgb(var(--primary-contrast));
    background-color: rgba(var(--primary-color), 0.95);
}

.form-card .list-item:hover {
    color: rgb(var(--secondary-contrast));
    background-color: rgba(var(--secondary-color), 0.95);
    cursor: pointer;
    transform: scale(1.05);
    transition: all 0.1s ease-in-out;
}

.form-card .label-secondary {
    color: #555;
    font-weight: 500;
    font-size: 0.875rem;
}

.formSelect select{
    background-color: rgb(var(--success-contrast));
    color: rgb(var(--primary-contrast));
    margin: 1rem;
    height: 40px;
    border-color: rgba(var(--info-color, 1));

}

.nav-button {
    font-weight: 700;
    height: 100%;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-button:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.15);
}

.custom-check-input {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* theme header */

.template-header {
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: rgb(var(--primary-contrast));
}

.template-header nav {
    display: flex;
    justify-content: space-between;
}

.template-header ul {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.template-header img {
    width: 78px;
}

/* theme footer */

.template-footer {
    padding: 2rem 1.5rem 0.25rem 1.5rem;
    background-color: var(--white);
    color: rgb(var(--secondary-contrast));
}

.template-footer .items-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.template-footer .items-wrapper >*{
    flex: 1;
    padding: 0 1rem;
}

.template-footer .footer-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.template-footer .footer-links .links-title {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--white);
}

.template-footer .footer-links .links-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gov-bg {
    background-image: url(/img/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 128px;
}

/* theme tables */

table thead {
    background-color: var(--primary-color);
    color: rgb(var(--primary-contrast));
}

table thead th {
    font-size: 0.875rem;
}

table tbody tr > td,
table tbody tr > th {
    padding: 0.75rem !important;
}

a:hover{
    text-decoration: underline !important;
    color: var(--white);
}

/* text helpers */

.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-base {
    font-size: 1rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.text-3xl {
    font-size: 2rem;
}

.text-4xl {
    font-size: 3rem;
}

/* Colors */
.is-color-white {
    color: var(--white);
}

.is-color-black {
    color: #111;
}

.is-color-dark {
    color: #333;
}

.is-color-light-grey,
.is-color-light-gray {
    color: #555;
}

.is-color-lighter-grey,
.is-color-lighter-gray {
    color: #777;
}

.is-color-primary {
    color: var(--primary-color) ;
}

.is-color-secondary {
    color: var(--white);
}

.is-color-success {
    color: rgb(var(--success-color));
}

.is-color-danger {
    color: rgb(var(--danger-color));
}

.is-color-info {
    color: rgb(var(--info-color));
}

.is-bg-white {
    background-color: var(--white);
}

.is-bg-black {
    background-color: #111;
}

.is-bg-dark {
    background-color: #333;
}

.is-bg-light-grey,
.is-bg-light-gray {
    background-color: #555;
}

.is-bg-lighter-grey,
.is-bg-lighter-gray {
    background-color: #777;
}

.is-bg-primary {
    background-color: var(--primary-color);
}

.is-bg-secondary {
    background-color: var(--white);
}

.is-bg-success {
    background-color: rgb(var(--success-color));
}

.is-bg-danger {
    background-color: rgb(var(--danger-color));
}

.is-bg-info {
    background-color: rgb(var(--info-color));
}