/***************/
/* MAIN COLORS */
/***************/

:root {
    --primary-light-one: #5daa68;
    --primary-light-two: #4a9455;
    --primary-semidark-one: #356c3c;
    --primary-dark-one: #17311b;
    --secondary-light-one: #faf1cf;
    --secondary-light-two: #e1d7b5;
    --background-one: var(--primary-light-one);
    --background-two: var(--primary-light-two);
    --background-three: var(--secondary-light-one);
    --background-four: var(--primary-dark-one);
    --highlight-one: var(--primary-dark-one);
    --highlight-one-text: var(--secondary-light-one);
    --highlight-two: var(--primary-semidark-one);
    --text-one: var(--secondary-light-one);
    --shadow-one: var(--primary-dark-one);
    --text-two: var(--primary-dark-one);
    --text-three: var(--primary-light-one);
    --shadow-three: var(--primary-dark-one);
}

/**************************/
/* TAG SETTINGS (GENERAL) */
/**************************/
html, body {
    margin: 0;
    height: 100%;
}

body {
    background: var(--background-one);
    color: var(--text-two);
}


a {
    color: inherit;
}

h1, h2, h3 {
    margin-bottom: 5px;
    margin-top: 5px;
}

table {
    width: 100%;
}

@media screen and (max-width: 600px) {
    .responsive thead {
        visibility: hidden;
        height: 0;
        position: absolute;
    }

    .responsive tr {
        display: block;
    }

    .responsive td {
        border: 1px solid;
        border-bottom: none;
        display: block;
        font-size: .8em;
        text-align: right;
        width: 100%;
    }

    .responsive td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }

    .responsive td:last-child {
        border-bottom: 1px solid;
    }
}

table {
    border: none;
    border-collapse: collapse;
    background-color: var(--secondary-light-one);
    word-break: break-word;
}

@media screen and (max-width: 500px) {
    table {
        font-size: small;
    }
}

td {
    border: 2px solid black;
    border-collapse: collapse;
    padding: 5px;
}

thead td {
    border: 3px solid black;
    border-collapse: collapse;
    padding: 8px;
    background-color: var(--secondary-light-two);
}

h1, h2 {
    word-wrap: break-word;
    color: var(--text-one);
    text-shadow: 2px 2px var(--shadow-one);
}

* {
    box-sizing: border-box;
}

textarea {
    border-radius: 10px;
    width: 100%;
    margin: 5px;
}


/**************/
/* CONTAINERS */
/**************/

.container-cards {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.container-cards h1,
.container-cards h2 {
    width: 100%; /* Make sure heading fills complete line */
}

.card {
    flex: 1 25%;
    margin: 10px;
    border-radius: 8px;
    padding: 8px;
    background: var(--background-three);
    color: var(--text-two);
}

.container-edit-buttons {
    display: flex;
    flex-wrap: wrap;

    .btn {
        margin: 5px;
    }
}

.spaced > * {
    margin: 10px;
}

/*******************************/
/* PARTIAL SPECIFIC CONTAINERS */
/*******************************/


.detail-animal-header {
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media screen and (max-width: 800px) {
    .detail-animal-header {
        display: block;
    }
}

.profile-card {
    display: flex;
    color: var(--highlight-one-text);
    align-items: center;

    .btn2 {
        height: 40px;
    }

    .button_darken:hover {
        background-color: var(--highlight-one);
        color: var(--highlight-one-text);
    }

    button {
        background: inherit;
        color: inherit;
    }
}

.container-comment-form {
    width: 80%;
    color: var(--text-one);

    b {
        text-shadow: 2px 2px var(--shadow-one);
    }
}

/*************/
/* Modifiers */
/*************/

/* Used to enlargen cards */
.full-width {
    width: 100%;
    flex: none;
}

/***********/
/* BUTTONS */
/***********/

select, .button {
    width: 100%;
    border: none;
    border-radius: 4px;
    opacity: 1;
    background-color: var(--secondary-light-one);

}

.btn {
    background-color: var(--primary-light-one);
    color: var(--secondary-light-one);
    padding: 16px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    display: block;
}

a.btn, a.btn2, a.nav-link {
    text-decoration: none;
}

.btn2, .btn3 {
    background-color: var(--secondary-light-one);
    color: var(--primary-dark-one);
    padding: 8px;
    border-radius: 4px;
    border: none;
    margin: 5px;
}

.btn3 {
    border: 1px solid black;
}

.btn-small {
    font-size: medium;
    padding: 6px;
}

.checkmark {
    display: inline-block;
    position: relative;
    left: 0.2rem;
    bottom: 0.075rem;
    background-color: var(--primary-light-one);
    color: var(--secondary-light-one);
    border-radius: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
}

.switch {
    cursor: pointer;
    display: inline-block;
}

.toggle-switch {
    display: inline-block;
    background: #ccc;
    border-radius: 16px;
    width: 58px;
    height: 32px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}

.toggle-switch:before, .toggle-switch:after {
    content: "";
}

.toggle-switch:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    width: 24px;
    height: 24px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
}

.toggle:hover .toggle-switch:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.checked + .toggle-switch {
    background: #56c080;
}

.checked + .toggle-switch:before {
    left: 30px;
}

.toggle-checkbox {
    position: absolute;
    visibility: hidden;
}

.slider-label {
    margin-left: 5px;
    position: relative;
    top: 2px;
}

/* Refactor tooltip based on https://luigicavalieri.com/blog/css-tooltip-appearing-from-any-direction/ to allow different directions */
.tooltip {
    display: inline-flex;
    justify-content: center;
    position: relative;
}

.tooltip:hover .tooltiptext {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.tooltip .tooltiptext {
    border-radius: 4px;
    bottom: calc(100% + 0.6em + 2px);
    box-shadow: 0px 2px 4px #07172258;
    background-color: var(--primary-dark-one);
    color: var(--secondary-light-one);
    font-size: 0.68rem;
    justify-content: center;
    line-height: 1.35em;
    padding: 0.5em 0.7em;
    position: absolute;
    text-align: center;
    width: 7rem;
    z-index: 1;
    display: flex;
    opacity: 0;
    transition: all 0.3s ease-in;
    visibility: hidden;
}

.tooltip .tooltiptext::before {
    border-width: 0.6em 0.8em 0;
    border-color: transparent;
    border-top-color: var(--primary-dark-one);
    content: "";
    display: block;
    border-style: solid;
    position: absolute;
    top: 100%;
}

/* Makes the tooltip fly from above */
.tooltip.top .tooltiptext {
    margin-bottom: 8px;
}

.tooltip.top:hover .tooltiptext {
    margin-bottom: 0;
}

/* Make adjustments for bottom */
.tooltip.bottom .tooltiptext {
    top: calc(100% + 0.6em + 2px);
    margin-top: 8px;
}

.tooltip.bottom:hover .tooltiptext {
    margin-top: 0;
}

.tooltip.bottom .tooltiptext::before {
    transform: rotate(180deg);
    /* 100% of the height of .tooltip */
    bottom: 100%;
}

.tooltip:not(.top) .tooltiptext {
    bottom: auto;

}

.tooltip:not(.top) .tooltiptext::before {
    top: auto;
}


/*********************/
/* UNIQUE COMPONENTS */
/*********************/

.content-box {
    margin: 20px;
}

.header {
    overflow: hidden;
    background-color: var(--background-two);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #FFF;
    height: 50px;
    padding: 1em;
}


#main-menu {
    order: -1;
}

.menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu > li {
    margin: 0 1rem;
    overflow: hidden;
}

.menu-button-container {
    display: none;
    height: 100%;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #4ab457;
    padding: 20px;
    border-radius: 8px;
}

#menu-toggle {
    display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
    display: block;
    background-color: #fff;
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
}

.menu-button::before {
    content: '';
    margin-top: -8px;
}

.menu-button::after {
    content: '';
    margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
}

@media (max-width: 700px) {
    .menu-button-container {
        display: flex;
    }

    .menu {
        position: absolute;
        top: 0;
        margin-top: 50px;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    #menu-toggle ~ nav .menu li {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle:checked ~ nav .menu li {
        height: 3em;
        padding: 1em;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .header {
        border-radius: 0;
    }

    .menu > li {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: white;
        background-color: var(--background-two);
    }

    .menu > li:not(:last-child) {
        border-bottom: 1px solid #444;
    }

    #header-sign-out, #header-change-language {
        display: none;
    }

}


.logo img {
    height: 40px;
}

.form-button, .link-button a:link, .link-button a:visited {
    background-color: #4ba3cd;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: 10px;
    border-radius: 4px;
    border: none;
}


.form-button:hover, .link-button a:hover, .link-button a:active {
    background-color: #4090b6;
}

.delete-button, .delete-button a:link, .delete-button a:visited {
    border: none;
    margin: 10px;
    background-color: #a3380a;
    border-radius: 4px;
}

.delete-button:hover, .delete-button a:hover, .delete-button a:active {
    background-color: #8f2f06;
}

.delete-button {
    display: block;
}

.search_result {
    margin-top: 10px;
    margin-bottom: 10px;
}

.action-menu a {
    text-decoration: none;
    color: inherit;
}

.action-menu ul {
    display: flex;
    width: 100%;
    height: 80vh;
    margin: auto;
    max-width: 1000px;
    justify-content: space-between;
    text-align: center;
}

.action-menu li {
    padding: 1rem 2rem 1.15rem;
    text-transform: uppercase;
    cursor: pointer;
    color: #ebebeb;
    min-width: 80px;
    margin: 10px;
    font-weight: bold;
    list-style-type: none;
    background-color: #4ba3cd;
    border-radius: 5px;
}

.action-menu li:hover {
    background-color: #4090b6;
    animation: spring 300ms ease-out;
}

.action-menu li:active {
    transform: translateY(4px);
}

.action-button ul {
    display: flex;
    width: 100%;
    height: 80vh;
    margin: auto;
    max-width: 1000px;
    justify-content: space-between;
    text-align: center;
}

.action-button li {
    text-decoration: none;
    padding: 1rem 2rem 1.15rem;
    text-transform: uppercase;
    cursor: pointer;
    color: #ebebeb;
    min-width: 80px;
    margin: 10px;
    font-weight: bold;
    list-style-type: none;
    background-color: #4ba3cd;
    border-radius: 5px;
}

.action-button li:hover {
    background-color: #4090b6;
    animation: spring 300ms ease-out;
}

.action-button li:active {
    transform: translateY(4px);
}


@keyframes spring {
    15% {
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1.1, 1.05);
    }
    40% {
        -webkit-transform-origin: center center;
        -webkit-transform: scale(0.95, 0.95);
    }
    75% {
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1.025, 1);
    }
    100% {
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1, 1);
    }
}


.tag {
    border: black 1px solid;
    border-radius: 0.3rem;
    padding: 2px;
    margin: 4px;
}

.sex {
    background: #F0DEDE;
}

.species {
    background: #F8ECD7;
}


.photos {
    display: flex;
    flex-wrap: wrap;
}

.card-photo {
    flex: 1 16%;
    margin: 10px;
}

.card-photo img {
    max-width: 100%;
    border-radius: 10%;
}


.card h1 {
    color: var(--text-three);
    text-shadow: 1px 1px var(--shadow-three);
}

.card h2 {
    color: var(--text-three);
    text-shadow: 1px 1px var(--shadow-three);
}

.card img {
    max-width: 100%;
    border-radius: 10%;
}


.header-card-adoption-notice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}

.search-subscription-header {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    h3 {
        width: 80%;
    }
}

.table-adoption-notice-info {
    margin-top: 10px;
}


@media (max-width: 920px) {
    .card {
        flex: 1 100%;
    }
}

.adoption-notice-img img, img {
    max-width: 100%;
    border-radius: 10%;
    margin: 5px;
    max-height: 250px;
}

.img-small img {
    height: 100px;
}

.btn-notification {
    display: inline-block;
    position: relative;
}

/* Make the badge float in the top right corner of the button */
.button__badge {
    background-color: #fa3e3e;
    border-radius: 2px;
    color: white;

    padding: 1px 3px;
    font-size: 10px;

    position: absolute; /* Position the badge within the relatively positioned button */
    top: 0;
    right: 0;
}

.adoption-card-report-link, .notification-card-mark-read {
    margin-left: auto;
    font-size: 2rem;
}

.adoption-card-report-link {
    margin-right: 12px;
}


.notification-card-mark-read {
    display: inline;
}

.inline-container {
    display: inline-block;
}

.inline-container > * {
    vertical-align: middle;
}

h2.heading-card-adoption-notice {
    font-size: 2rem;
    line-height: 2rem;
    word-wrap: anywhere;
    width: 80%;
}

.tags {
    margin-right: auto;
    padding: 5px;
}

#form-adoption-notice, #form-registration {
    .form-group {
        margin: 30px;
    }
}

.detail-adoption-notice-header h1 {
    display: inline-block;
}

.detail-adoption-notice-header a {
    float: right;
}

@media (max-width: 920px) {
    .detail-adoption-notice-header .inline-container {
        width: 100%;
    }

    .detail-adoption-notice-header a {
        display: inline-block;
        float: none;
    }
}

.container-comment-headers, .container-cards {
    display: flex;
    flex-wrap: wrap;
    background: var(--background-two);
    border-radius: 8px;
    padding: 5px;
}

.comment, .notification, .search-subscription {
    flex: 1 100%;
    margin: 10px;
    border-radius: 8px;
    padding: 5px;
    background: var(--background-three);
    color: var(--text-two);
}


.form-comments {
    .btn {
        margin: 5px;
    }
}

.announcement-header {
    font-size: 1.2rem;
    margin: 0px;
    padding: 0px;
    color: var(--text-two);
    text-shadow: none;
    font-weight: bold;
}

div.announcement {
    flex: 1 100%;
    margin: 10px;
    border-radius: 8px;
    padding: 5px;
    background: var(--background-three);
    color: var(--text-two);

}


.form-search {
    select, input {
        background-color: var(--primary-light-one);
        color: var(--text-one);
        border-radius: 3px;
        border: none;
    }

}

.half {
    width: 49%;
}


#results {
    margin-top: 10px;
    list-style-type: none;
    padding: 0;
}

.result-item {
    padding: 8px;
    margin: 4px 0;
    background-color: #ddd1a5;
    cursor: pointer;
    border-radius: 8px;
}

.result-item:hover {
    background-color: #ede1b5;
}

.label {
    border-radius: 8px;
    padding: 4px;
    color: #fff;
}

.active-adoption {
    background-color: #4a9455;
}

.inactive-adoption {
    background-color: #000;
}

/************************/
/* GENERAL HIGHLIGHTING */
/************************/

.important {
    border: #e01137 4px solid;
}

.warning {
    border: #e09e11 4px solid;
}

.info {
    border: rgba(17, 58, 224, 0.51) 4px solid;
}

.error {
    color: #370707;
    font-weight: bold;
}

.error::before {
    content: "⚠️";
}

/*******/
/* MAP */
/*******/

.marker {
    background-image: url('../img/logo_transparent.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.animal-shelter-marker {
    background-image: url('../img/animal_shelter.png');
!important;
}

.maplibregl-popup {
    max-width: 600px !important;
}

.maplibregl-popup-content {
    background-color: var(--background-three) !important;
    border-radius: 8px !important;
}

.map-in-content #map {
    height: 500px;
    width: 90%;
}
