/* General body styling */
body {
    font-family: Arial, sans-serif;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%), url('/images/tlsbg-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    height: 100vh;
    overflow: hidden;
    background-color: #fff;
}

.container-wizard {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wizard {
    width: 60%;
}

.card-body{
    height:500px
}

.wizard h3 {
    text-align: center;
    margin-bottom: 10px;
}

.page {
    display: none;
}

.page.active {
    display: block;
}

button {
    background-color: #005423;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px 5px;
}

button:hover {
    background-color: #003e1b;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

input[type="text"] {
    width:100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}
.search-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

#map {
    height: 350px;
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: #ababab;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top:0;
}

form input[type="date"] {
    padding:10px;
}


.info-input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}


/* Add styles for the scrollable form */
/*.form-body {
    padding-right: 10px;*/ /* Add padding to avoid content cutting off near the scrollbar */
/*}*/

/* Customize scrollbar for better aesthetics */
.form-body::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.form-body::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded edges for the scrollbar thumb */
}

.form-body::-webkit-scrollbar-thumb:hover {
    background-color: #aaa; /* Change color on hover */
}

.form-body::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Background of the scrollbar track */
    border-radius: 4px; /* Match the thumb's rounded edges */
}


.info-input {
    height: 400px;
    font-size: 12px
}

.info-input::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.info-input::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded edges for the scrollbar thumb */
}

.info-input::-webkit-scrollbar-thumb:hover {
    background-color: #aaa; /* Change color on hover */
}

.info-input::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Background of the scrollbar track */
    border-radius: 4px; /* Match the thumb's rounded edges */
}

ul {
    font-size: 14px;
    text-align: start;
}

#summary {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 20px;
}

#summary-map-container, #summary-details-container {
    flex: 1;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#summary-map {
    width: 100%;
    height: 330px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

#summary-details-container {
    flex: 1.2; /* Slightly larger for personal details */
}

#summary-details h4 {
    margin-bottom: 15px;
    font-size: 16px;
    color: #005423;
    text-align: left;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

#summary-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#summary-details ul li {
    font-size: 14px;
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #f7f7f7;
    border-radius: 6px;
    border: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

#summary-details ul li span {
    font-weight: bold;
    color: #333;
}

/*----------map page------------*/
/*-----mobile responsive----*/
@media (min-width:1439px) {
    #step-1 {
        margin-top: 10%;
    }
}

@media (min-width:1025px) {

    #heading {
        font-size: 20px;
    }

    input[type="text"] {
        width: 100%;
    }

    .wizard {
        width: 60%;
    }

    #map {
        height: 280px;
    }

    #step-1 {
        margin-top: 12%;
    }
}

@media (max-width:1025px) {

    #heading {
        font-size: 20px;
    }

    input[type="text"] {
        width: 100%;
    }

    .wizard {
        width: 60%;
    }

    #map {
        height: 280px;
    }

    #step-1 {
        margin-top: 15%;
    }
}

@media (max-width:769px) {

    #heading {
        font-size: 20px;
    }

    input[type="text"] {
        width: 100%;
    }

    .wizard {
        width: 90%;
    }

    #step-1 {
        margin-top: 7%;
    }

    #map {
        height: 300px;
    }

    .search-container {
        width: 100%;
        height: 20px;
    }

    #nxtBtnMap {
        margin-top: 0px;
    }

    #locationError {
        font-size: 16px;
    }
}

@media (max-width:426px) {
    #heading {
        font-size: 15px;
    }

    #step-1 {
        margin-top: 7%;
    }

    input[type="text"] {
        width: 100%;
    }

    .wizard {
        width: 90%
    }

    #nxtBtnMap {
        padding: 6px;
        margin-top: 0px;
    }

    #searchBoxbtn {
        padding: 6px;
        width: 30%;
    }

    #searchBox {
        padding: 6px;
        width: 100%
    }

    #locationError {
        font-size: 14px;
    }

    #searchLat, #searchLng {
        font-size: 10px;
        width: 100%;
        padding: 8px;
    }

    #searchBoxbtn {
        padding: 8px;
        width: 30%;
    }

    #switchSearchBtn {
        padding: 8px;
        width: 28%;
    }

    .search-container {
        gap: 4px;
    }

    #map {
        height: 355px;
    }
}

@media (max-width:376px) {
    #heading {
        font-size: 15px;
    }

    #step-1 {
        margin-top: 7%;
    }

    #locationError {
        font-size: 13px;
    }

    #nxtBtnMap {
        padding: 6px;
        margin-top: 0px;
    }

    #searchBoxbtn {
        padding: 7px;
        width: 28%;
    }

    #searchBox {
        padding: 6px;
        width: 100%;
        font-size: 10px;
    }

    #searchLat, #searchLng {
        font-size: 10px;
        width: 100%;
        padding: 7px;
    }

    #switchSearchBtn {
        padding: 7px;
        width: 26%;
    }

    .search-container {
        gap: 3px;
    }

    #map {
        height: 340px;
    }
}

@media (max-width:321px) {
    #heading {
        font-size: 13px;
    }

    #step-1 {
        margin-top: 7%;
    }

    #locationError {
        font-size: 12px;
    }

    #searchBoxbtn {
        padding: 4px;
        width: 30%;
    }

    #searchBox {
        font-size: 10px;
        padding: 12px;
        width: 100%;
        height: 100%;
    }

    #nxtBtnMap {
        padding: 6px;
        margin-top: 0px;
    }

    #searchLat, #searchLng {
        font-size: 10px;
        width: 100%;
        padding: 5px;
    }

    #switchSearchBtn {
        padding: 4px;
        width: 28%;
    }

    .search-container {
        gap: 2px;
    }

    #map {
        height: 350px;
    }
}


/*-please fill this information--*/
/*------------page--------------*/
/*-------mobile responsive-----*/
    @media (min-width:1025px) {
        #additionalInfoForm {
            height: 380px;
        }

        #step-3 {
            margin-top: 10%;
        }

        .wizard h3 {
            margin-bottom: 0px;
            
        }

        #heading02 {
            font-size: 18px;
        }
    }

    @media (max-width:1025px) {
        #additionalInfoForm {
            height: 380px;
        }

        #step-3 {
            margin-top: 10%;
            width: 90%;
        }

        .wizard h3 {
            margin-bottom: 0px;
        }

        #heading02 {
            font-size: 18px;
        }
    }

    @media (max-width:768px) {
            #additionalInfoForm {
                flex-direction: column;
                display: flex;
                height: 380px;
                
            }

            #heading02 {
                font-size: 16px;
            }

            #step-3 {
                margin-top: 2%;
                width: 100%;
                overflow-x: hidden;
            }

            .wizard h3 {
                margin-bottom: 0px;
            }
        }

    @media (max-width:426px) {
        #step-3 {
            margin-top: 0px;
            width: 100%
        }

        #heading02 {
            font-size: 16px;
        }

        .container-wizard {
            margin-bottom: 0px;
        }

        #additionalInfoForm {
            height: 390px;
        }
    }

    @media (max-width:376px) {
        #step-3 {
            margin-top: 0px;
            width: 100%
        }

        #heading02 {
            font-size: 15px;
        }

        .wizard h3 {
            margin-bottom: 0px;
        }

        #additionalInfoForm {
            height: 430px;
        }
    }

    @media (max-width:321px) {
        #step-3 {
            margin-top: 0px;
            width:100%
        }

        #heading02{
            font-size:15px;
        }

        .wizard h3{
            margin-bottom:0px;
        }

        #additionalInfoForm{
            height:400px;
        }

        .container-wizard{
            margin-top:0px;
        }
    }


/*-------summery page-----------*/
/*----mobile responsive-----*/
#step-4 {
    color: #005423;
}

    @media (min-width:1025px) {
        .container-wizard {
            margin-top: 0px;
        }

        #summary-map {
            width: 100%;
            border-radius: 8px;
            border: 1px solid #ccc;
        }

        .form-body{
            width:100%;
            padding:10px;
        }

        #step-4{
            margin-top:60px;
        }
    }
 
    @media (max-width:1025px) {
        .container-wizard {
            margin-top: 0px;
        }

        #summary-map {
            width: 100%;
            border-radius: 8px;
            border: 1px solid #ccc;
        }
        #step-4 {
            margin-top: 60px;
        }

    }

    @media (max-width:769px) {
        #summary {
            flex-direction: column;
            width: 100%;
            margin-top:0px;
        }

        .container-wizard{
            margin-top:0px;
        }

        #summary-map {
            width: 100%;
            height: 200px;
            border-radius: 8px;
            border: 1px solid #ccc;
        }

        #overflow {
            overflow-y: auto;
            overflow-x:hidden;
            height: 500px;
            margin-top: 0px;
            width:100%;
        }

        #step-4 {
            margin-top: 10px;
        }
    }

    @media (max-width:426px) {
        #summary {
            flex-direction: column;
            width: 100%;
        }

        #summary-map {
            width: 100%;
            height: 160px;
            border-radius: 8px;
            border: 1px solid #ccc;
        }

        #overflow {
            overflow-y: auto;
            height: 550px;
            margin-top: 0px;
        }

        #step-4 {
            margin-top: 10px;
        }
    }

    @media (max-width:376px) {
        #summary {
            flex-direction: column;
            width: 100%;
        }

        #summary-map {
            width: 100%;
            height: 160px;
            border-radius: 8px;
            border: 1px solid #ccc;
        }

        #overflow {
            overflow-y: auto;
            height: 550px;
            margin-top: 0px;
        }

        #step-4 {
            margin-top: 10px;
        }
    }

    @media (max-width:320px) {
        #summary {
            flex-direction: column;
            width: 100%;
        }

        #summary-map {
            width: 100%;
            height: 160px;
            border-radius: 8px;
            border: 1px solid #ccc;
        }

        #overflow {
            overflow-y: auto;
            height:550px;
            margin-top:0px;
        }

        #step-4 {
            margin-top: 10px;
        }       
    }

/*-------✨ Great News!---------*/
/*------------page-------------*/
/*--------Adjustments-------*/
    @media (max-width:375px) {
        #card-container {
            font-size: 100%;
        }
    }


/*----------All--page----------*/
/*--------container size------*/
/*---------Responsive--------*/
@media (min-width:1024px) {
    .wizard{
        width:60%;
    }
}

@media (max-width:1024px) {
    .wizard {
        width: 60%;
    }
}

@media (max-width:769px) {
    .wizard {
        width: 80%;
    }
}

@media (max-width:426px) {
    .wizard {
        width: 90%;
    }
}

@media (max-width:376px) {
    .wizard {
        width: 90%;
    }
}

@media (max-width:321px) {
    .wizard {
        width: 90%;
    }
}