footer {
    background-color: #f0f0f0;
}


.profile-picture {
    width: 180px;
    height: 180px;
    border: 5px solid #FCFCFC; !important;
}

.modal-profile-picture {
    width: 140px;
    height: 140px;
    border: 5px solid #FCFCFC; !important;
}
.share-modal-body {
    box-shadow: 0 0px 10px 8px rgba(0, 0, 0, 0.12) inset, 0 0 50px 10px rgba(0, 0, 0, 0.08) inset;
}

.share-modal-header {
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    display: flex;
    border-bottom: 2px solid #e4e4e4;
}

.share-modal-title {
    align-items: start;
    justify-content: start;
    flex-grow: 1;
    display: flex;
}

.share-modal-close-button-container {
    position: absolute;
    right: 1rem;
}

.share-modal-close-button {
    padding: 0.5rem;
    align-self: center;
    justify-content: center;
    display: flex;
}

.right {
    right: 1rem !important;
}

.logo {
    width: 80%;
    margin-bottom: 50px;
}

.footer-image-div {
    margin-left: 35%;
    margin-right: 35%;
    padding-top: 2px
}

.align-vertical-middle {
    display: flex;
    justify-content: center;
    vertical-align: middle;
    text-align:center;
    /*width:30px;*/
}


@media (min-width: 350px) {
    .icon {
        --fa-primary-color: #282828;
        --fa-secondary-color: #f16233;
        font-size: 25px;
        width: 24px;
        height: 24px;
        margin-top: 3px;
    }
}

@media (min-width: 350px) {
    .icon-div {
        width: 24px;
        height: 24px;
        margin-right: 5px;
        margin-left: 5px;
    }
}

@media (max-width: 350px) {
    .icon {
        --fa-primary-color: #282828;
        --fa-secondary-color: #f16233;
        font-size: 23px;
        width: 22px;
        height: 22px;
        margin-top: 2px;
    }
}

@media (max-width: 350px) {
    .icon-div {
        width: 22px;
        height: 22px;
    }
}

.text-decoration-none {
    text-decoration: none;
    color: black;
}

.flip {
    animation: --flip 10s ease-in 0.5s infinite;
}

.flip-fast {
    animation: --flip-fast 3s ease-in 0.2s infinite;
}

@keyframes --flip {
    0% { transform: rotateY(0deg); }
    5% { transform: rotateY(180deg); }
    10% { transform: rotateY(0deg); }
    100% { transform: rotateY(0deg); }
}

@keyframes --flip-fast {
    0% { transform: rotateY(0deg); }
    40% { transform: rotateY(180deg); }
    80% { transform: rotateY(0deg); }
    100% { transform: rotateY(0deg); }
}

.spin {
    animation: --spin 10s ease-in-out 0.5s infinite;
}

@keyframes --spin {
    0% { transform: rotate(0deg); }
    5% { transform: rotate(360deg); }
    10% { transform: rotate(360deg); }
    15% { transform: rotate(360deg); }
    20% { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

.platform-anim {
    color: #363636;
    height: 2.5em;
    --fa-bounce-start-scale-x: 1;
    --fa-bounce-start-scale-y: 1;
    --fa-bounce-jump-scale-x: 1;
    --fa-bounce-jump-scale-y: 1;
    --fa-bounce-land-scale-x: 1;
    --fa-bounce-land-scale-y: 1;
    --fa-bounce-rebound: 0;
    --fa-animation-iteration-count: 2;
    --fa-animation-duration: 1s
}

.qrcode-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
}


@media (min-width: 350px) {
    .tile-top-text {
        font-size: 12px;
    }
}

@media (max-width: 350px) {
    .tile-top-text {
        font-size: 11px;
    }
}


@media (min-width: 350px) {
    .tile-bottom-text {
        font-size: 16px;
    }
}

@media (max-width: 350px) {
    .tile-bottom-text {
        font-size: 13px;
    }
}

@media (max-width: 300px) {
    .tile-bottom-text {
        font-size: 11px;
    }
}
/*         */

@media (min-width: 350px) {
    .tile-bottom-text-address {
        font-size: 15px;
    }
}

@media (max-width: 350px) {
    .tile-bottom-text-address {
        font-size: 12px;
    }
}
/*      */


@media (min-width: 350px) {
    .tile-top-margin-div {
        margin-bottom: -4px
    }
}

@media (max-width: 350px) {
    .tile-top-margin-div {
        margin-bottom: -2px
    }
}

@media (min-width: 350px) {
    .tile-bottom-margin-div {
        margin-top: -2px
    }
}

@media (max-width: 350px) {
    .tile-bottom-margin-div {
        margin-top: -6px
    }
}


.content {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.icon-group {
    list-style: none;
    text-align: left;
    margin: 20px;
    padding: 0px;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    flex-flow: wrap;
}

.listen:hover {
    cursor: pointer;
}


.share {
    color: white;
    background-color: rgba(255, 255, 255, 80%);
}

.field {
    width: 56px;
    height: 50px;
    text-align: center;
    border-radius: 200px;
    background: rgba(0, 0, 0, 0)
}

.share-fields-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px 10px; /* Vertical gap 20px, Horizontal gap 15px */
    max-width: 100%;
}

.share-field {
    flex: 0 0 calc(25% - 11.25px); /* 4 items per row by default, adjusted for new gap */
    max-width: calc(25% - 11.25px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2px; /* Reduced from 20px to 10px */
}

/* Adjustments for smaller screens */
@media (max-width: 330px) {
    .share-field {
        flex: 0 0 calc(33.333% - 10px); /* 3 items per row */
        max-width: calc(33.333% - 10px);
    }
}

@media (max-width: 300px) {
    .share-field {
        flex: 0 0 calc(50% - 7.5px); /* 2 items per row */
        max-width: calc(50% - 7.5px);
    }
}

@media (max-width: 160px) {
    .share-field {
        flex: 0 0 100%; /* 1 item per row */
        max-width: 100%;
    }
}

/* Additional styling for share-field contents */
.share-field a {
    margin-bottom: 5px;
}

.share-button-text {
    margin: 0;
    font-size: 14px;
}

/* Adjust font size for very small screens */
@media (max-width: 160px) {
    .share-button-text {
        font-size: 12px;
    }
}

.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.star-checkbox {
    display: none;
}

.star-label {
    font-size: 30px;
    color: #ddd;
    cursor: pointer;
}

.star-checkbox:checked ~ .star-label {
    color: #ffd700;
}

.star-label:hover,
.star-label:hover ~ .star-label {
    color: #ffd700;
}