body {
    font-family: 'Gill Sans', sans-serif;
    margin: 0;
    padding: 0px;
}

* {
    box-sizing: border-box;
}

.center {
    text-align: center;
}

.header {
    background-color: #e5e5e5;
    padding: 15px;
    text-align: center;
    padding: 12vh 0;
    background: url('./DALL·E Create an abstract Aboriginal artwork that symbolizes a journey of a man and a woman who receive two children, a boy and a girl finetuned manually_1600.....jpg') no-repeat center center fixed;
    background-size: cover;
    background-position: center -50px;
}

.padding-input {
}

.main {
    display: table;
    float: left;
    height: 400px;
    padding: 55px 20px;
    max-width: calc(100% - 200px);
}

/* .right {
    float: left;
    width: 50%;
    padding: 15px;
    margin-top: 7px;
    text-align: center;
} */

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #e5e5e5; /* Consider using a gradient here for a more dynamic look */
    background-image: linear-gradient(to right, #f8f9fa, #e5e5e5); /* Gentle gradient from left to right */
    text-align: center;
    padding: 10px 5px; /* Adjusted padding for better visual balance */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for visual separation from the content */
    border-radius: 15px 15px 0 0; /* Rounded corners at the top to match the modern theme */
    font-size: 16px; /* Adjust font size for better readability */
    color: #333; /* A slightly darker color for better contrast and readability */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    opacity: 0; /* Initially low opacity or 0 if you want it hidden */
}

.footer:hover {
    background-image: linear-gradient(to right, #e5e5e5, #d4d4d4); /* Slightly change the gradient on hover for a dynamic effect */
    padding: 15px 5px; /* Increase padding to give a subtle lift effect */
    opacity: 1; /* Fully visible when hovered over */
}

/* Class to be toggled by JavaScript for touch devices */
.footer-visible {
    opacity: 1 !important; /* Ensure visibility on touch devices */
}

.playlist {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.playlist img {
    width: 100px; /* Adjust according to your preference */
    height: auto;
    margin-right: 20px; /* Adjust according to your preference */
}

.youtube-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.form-label {
    margin-bottom: 10px;
}

.form-input {
    width: 40vw;
    padding: 5px;
    margin-bottom: 10px;
}

#timeDisplay {
    float: right;
    margin-right: 10px;
    font-size: 50px;
}

/* .form-button {
    margin-top: 40px;
    padding: 8px 12px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.form-button:hover {
    background-color: #0056b3; 
} */

img.thatimage {
    max-height: 10vh; /* Set maximum height to 10vh */
    max-width: 100%; /* Maintain image aspect ratio */
    object-fit: contain; /* Maintain aspect ratio and fit within the box */
}

img.posters {
    height: auto;
    max-width: 80%; /* Maintain image aspect ratio */
    object-fit: contain; /* Maintain aspect ratio and fit within the box */
}

.normal {
    font-weight: 100;
}
.bold {
    font-weight: bold;
}

.size-default {
    font-size: 2vw;
}
.size-biggest {
    font-size: 8vw;
}
.size-bigger {
    font-size: 4vw;
}
.size-big {
    font-size: 3vw;
}

.shadow {
    box-sizing: border-box;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), 0px 0px 6px black;
}

a {
    color: rgb(35, 35, 35);
}

.default-color {
    color: white;
}
.default-blue {
    color: rgb(35, 35, 35);
}

#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

#notification-qr-container {
    display: block;
    width: 100%;
    height: 20px;
}

.notification {
    background-color: #f44336; /* Red */
    color: white;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 2px;
}

.myForm {
    background-color: #f1f1f1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 30px;
    border-radius: 8px;
    min-width: 300px; /* Adjust based on your preference */
    margin: auto; /* Centers the form in the parent element */
}

.myForm {
    /* padding-bottom: 20px; */
    height: 100%;
}

.labelForm {
    display: block; /* Makes the label display as a block */
    margin-bottom: 5px; /* Space between the label and the input */
    color: #333; /* Text color for the label */
}

.myForm input[type='password'],
.myForm input[type='text'],
.myForm input[type='email'],
.myForm input[type='birthday'],
.myForm input[type='file'] {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside the inputs */
    margin-bottom: 16px; /* Space between each field */
    border-radius: 4px; /* Slightly rounded corners for the inputs */
    border: 1px solid #ccc; /* Light border for the inputs */
    box-sizing: border-box; /* Ensures padding does not add to the total width */
}

.myForm button.form-button {
    background-color: #fff; /* Inherits the form background color */
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: all 0.3s ease;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Matches the form shadow */
    width: 100%; /* Full width for the button */
    color: var(--yellow-5); /* Button text color */
}

.myForm button.form-button:hover {
    background-color: #878787;
}

/* .myForm button.form-button:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background-color: var(--yellow-5);
    transition: width 0.2s ease;
} */

.myForm input[type='file'] {
    border: none; /* Removes the default file input border */
    padding: 0; /* Removes default padding */
    background-color: transparent; /* Removes default background */
}

/* Add additional custom styles as needed */

/* .myFormAdmin .form-button,
.myForm .form-button {
    float: right;
} */

/* Base Style for the tab container */
.tab {
    overflow: hidden;
    background-color: #f1f1f1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    border-radius: 8px; /* Rounded corners for a softer look */
}

/* Enhanced button styling for a more dynamic appearance */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: all 0.3s ease; /* Smooth transition for all properties */
    position: relative; /* Prepare for pseudo-elements for added effects */
    border-radius: 8px; /* Match the container's border-radius */
}

/* Adding a pseudo-element for a subtle underline effect on hover */
.tab button:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background-color: var(--yellow-5); /* A touch of color */
    transition: width 0.2s ease;
}

.tab button:hover {
    background-color: #ddd; /* Retain the hover effect */
}

/* Enhanced active tab styling for a more pronounced effect */
.tab button.active {
    background-color: #ffffff;
    box-shadow: inset 0 -4px 0 0 var(--yellow-5); /* Instead of changing color, add a shadow for a "pressed" effect */
}

/* Modern styling for tab content with smooth transitions */
.tabcontent {
    display: none;
    padding: 6px 12px;
    background-color: white; /* A clean look */
    border-radius: 8px 8px 0 0; /* Rounded corners at the top */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    min-height: 80vh;
    animation: fadeIn 0.5s; /* Add a fade-in animation for when content changes */
}

.tab button,
.tab a {
    color: #333 !important; /* Forces the color, overriding default browser styles */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.instruction-text {
    background-color: #f1f1f1; /* Light background color */
    display: block;
    width: 90%;
    margin: 0 auto; /* Center the text block if needed */
    text-align: center;
    padding: 14px 16px; /* Consistent with the button padding */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    cursor: default; /* Default cursor to indicate non-interactivity */
}

/* Inner content styling for center alignment and improved spacing */
.tabcontent-inner {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 20px;
    box-sizing: border-box; /* Ensure padding doesn't affect the total width */
}

.mapContent,
#cameraFeed {
    width: 100%; /* Ensure it fills the container's width */
    height: auto; /* Maintain aspect ratio */
    max-height: 50vh; /* Limit height to 50% of viewport height */
}

.hide-button {
    display: none;
}

#notification-container {
    position: fixed;
    left: 50%; /* Center horizontally */
    top: 50%; /* Center vertically */
    transform: translate(-50%, -50%); /* Adjust for the translation */
    width: 100%; /* Adjust based on content or specify a max-width */
    z-index: 1000;
    box-sizing: border-box; /* Include padding and borders in the element's total width and height */
}

.profile {
    margin: 0;
    left: 20px;
    top: 10px;
    height: 35px;
    width: 35px;
    position: fixed;
    display: block;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
}

.profile-pic {
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.notification {
    color: white;
    padding: 10px;
    border-radius: 2px;
    text-align: center;
    box-sizing: border-box; /* Include padding and borders in the element's total width */
}

ul {
    padding: 0;
    list-style-type: none;
}
.carousel_container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 284px;
    overflow: hidden;
}

.carousel_items {
    position: relative;
    cursor: default !important;
}

.carousel_item {
    float: left;
    border: 0px solid #cc0000;
}

.item_arrows {
    position: absolute;
    top: 200px;
    width: 100%;
    height: 1px;
    z-index: 5000;
    border: 0px solid green;
}

.item_arrow {
    position: absolute;
    width: 45px;
    height: 65px;
    /*
  background-color: #2d96cd;
	*/
    margin-bottom: 1px;
    float: left;
}

.nav_dot:hover,
.item_arrow:hover {
    cursor: pointer;
}

.item_next {
    left: 900px;
    top: 0px;
    background-color: #2d96cd;
}

.item_prev {
    display: none;
    left: 900px;
    top: 66px;
    background-color: #000;
}

.fa {
    color: #fff;
    font-size: 3em;
    margin-left: 14px;
    margin-top: 10px;
}

.nav_dots {
    position: relative;
    bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    z-index: 50001;
    border: 1px solid #cc0000;
}

.nav_dot {
    width: 6px;
    height: 6px;
    float: left;
    border: 1px solid #fff;
    background-color: #fff;
    margin-left: 15px;
    border-radius: 50%;
}

.grab {
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

.grabbing {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
}

@media only screen and (max-width: 620px) {
    /* For mobile phones: */
    .menu,
    .main,
    .right {
        width: 100%;
    }

    .form-input {
        width: 80vw;
    }

    .padding-input {
        padding: 0;
    }

    .myForm label {
        display: inline-block;
        width: 150px;
        text-align: left;
        margin-right: 10px; /* Adjusts space between the label and input */
        vertical-align: middle; /* Aligns items at the top, useful for aligning the label with textareas or checkboxes */
        padding: 15px 0px;
    }
    .myForm input {
        width: 150px;
        text-align: left;
        height: 40px;
        margin-right: 10px; /* Adjusts space between the label and input */
        vertical-align: middle; /* Aligns items at the top, useful for aligning the label with textareas or checkboxes */
        padding: 15px 0px;
    }

    .myForm {
        /* padding-bottom: 20px; */
        height: 100vh;
    }

    .main {
        display: table;
        float: left;
        height: 400px;
        padding: 0 20px;
        max-width: 100%;
    }
}

/* Landscape orientation */
@media (orientation: landscape) {
    #cameraFeed {
        max-height: 75vh; /* You might want a larger portion of the screen in landscape */
    }
}

/* Portrait orientation */
@media (orientation: portrait) {
    #cameraFeed {
        max-height: 50vh; /* Keep the original 50vh height in portrait */
    }
}

.uploadPhoto input[type='file'] {
    display: none;
}

.uploadPhoto input[type='submit'] {
    display: none;
}

.uploadPhoto .picture {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

.uploadPhoto .custom-file-submit {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

.uploadPhoto .custom-file-filename {
    border: 1px solid #ccc;
    margin-top: 10px;
    display: block;
    padding: 6px 12px;
    cursor: pointer;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}