/* Colors */

 :root {
     --gray-text: rgb(137, 137, 137);
 }

 /* icons */
 .bi-geo-alt-fill {
     color: var(--main-color);
 }

 .bi-list {
     height: 30px;
     width: 30px;
 }

 .swal2-cancel {
     border: none;
     border-radius: 30px !important;
     padding: 10px 50px;
     font-size: 1.3rem;
     color: white;
     margin-right: 15px;
 }

 .swal2-modal {
     border-radius: 30px !important;
     padding: 30px 30px;
     padding-top: 10px;
 }

 @media (max-width: 768px) {

     .swal2-modal {
         padding: 10px;
     }

     .swal2-textarea {
         margin: 10px;
     }
 }


 .swal2-popup.swal2-modal {
     background-color: var(--main-color);
 }

 .swal2-cancel {
     display: none !important;
 }

 .swal2-confirm {
     background-color: white;
     color: var(--main-color);
     padding: 10px 50px;
     border-radius: 30px;
     border: none;
 }

 .swal2-textarea {
     background-color: white;
     color: var(--gray-text);
     border-radius: 15px;
     outline: none;
     resize: none;
     border: none;
 }

 .swal2-textarea:focus {
     outline: none;
     border: none;
     box-shadow: none;
 }

 .swal2-close {
     color: white;
 }

 .swal2-title {
     color: white;
 }

 /* headings */

 h1 {
     font-size: 3.75rem;
     font-weight: 600;
     color: var(--dark-color);
 }

 h2 {
     font-size: 2.5rem;
     font-weight: 600;
     color: var(--dark-color);
 }

 h3 {
     font-size: 2rem;
     font-weight: 600;
     color: var(--dark-color);
 }


 h5 {
     font-size: 2rem;
     font-weight: 600;
     color: var(--dark-color);
 }

 a:hover {
     color: var(--main-color) !important;
 }

 /* Navigation styles are now in partials/nav.ejs */

 .more {
     font-size: 1.25rem;
     font-weight: normal;
     color: var(--main-color);
     text-decoration: none;
 }

 /* Entity Card */

 .entityCard {
     flex: 0 0 23%;

     position: relative;
     overflow-x: hidden;
     text-decoration: none;
     height: 350px;
 }

 .entityCard .preview {
     width: 100%;
     height: 60%;
     position: relative;
     overflow: hidden;
     border-radius: 20px;
     margin-bottom: 16px;
 }

 .entityCard .preview .date {
     position: absolute;
     top: 15px;
     right: 15px;
     background-color: white;
     color: var(--main-color);
     font-size: 0.9rem;
     white-space: nowrap;
     padding: 3px 8px;
     border-radius: 15px;
 }

 .entityCard .preview img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .entityCard h6 {
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--dark-color);
 }

 .entityCard .organization {
     /* margin-bottom: 8px; */
     font-size: 0.875rem;
     color: var(--main-color);
     display: block;
     font-weight: bold;
 }

 .entityCard .address {
     font-size: 0.875rem;
     color: var(--gray-text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 /* pills */
 .entityCard .preview .categories {
     display: flex;
     flex-wrap: wrap;
     margin-top: 10px;
     position: absolute;
     bottom: 0;
     left: 15px;
 }

 .entityCard .preview .categories .badge {
     background-color: var(--main-color);
     color: white;
     font-size: 0.9rem;
     margin-right: 5px;
     padding: 5px 10px;
     border-radius: 15px;
     font-weight: normal;
 }

 #actionButtons, #categories {
     transition: all 0.3s ease;
     /* height: 0; */
 }

 #actionButtons.open, #categories.open {
     height: auto;
 }

 #chevronIcon {
     height: 20px;
     transition: all 0.3s ease;
 }

 #chevronIcon.rotate {
     transform: rotate(180deg);
 }

 footer {
     margin-top: 5%;
     background-color: rgba(37, 37, 46, 1);
     min-height: 15%;
     padding: 50px 0;
 }

 footer a svg {
     width: 20px;
 }

 footer a:hover{
        color: var(--main-color) !important;
 }

 footer p {
     font-size: 0.813rem;
     color: white !important;
 }

 footer {
     color: white;
 }

 footer h5 {
     font-weight: bolder;
     font-size: 1rem;
     color: white;
 }

 footer span {
     color: white;
 }

 footer a {
     color: white;
     text-decoration: none;
     font-size: 0.813rem;
 }

 footer a.underlined {
     text-decoration: underline;
     color: rgba(255, 255, 255, 0.6);
 }


 @media (max-width: 992px) {
     .entityCard {
         flex: 0 0 40%;
     }
 }

 /* Mobile */

@media screen and (max-width: 768px) {
    .entityCard {
        flex: 0 0 60%;
        margin-right: 20px;
    }

    h1 {
        margin-top: 50px;
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.75rem !important;
    }

    p {
        font-size: 1rem !important;
    }

    #mainDescription {
        font-size: 1rem;
    }

    header .container {
        padding: 0;
    }

    .usabilityHolder {
        max-height: 500px;
    }

    footer p, footer a {
        font-size: 0.813rem !important;
    }
}