/* Reset styles */
/*body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f9f9f9;
}*/

.tabs {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

    /* Tab navigation styles */
    .tabs nav {
        display: flex;
        border-bottom: 1px solid #ddd;
    }

        .tabs nav button {
            flex: 1;
            padding: 10px 20px;
            cursor: pointer;
            background: #f9f9f9;
            border: none;
            outline: none;
            color: #333;
            font-size: 16px;
            transition: background 0.3s ease, color 0.3s ease;
        }

            .tabs nav button:hover {
                background: #eee;
            }

            .tabs nav button.active {
                background: #007bff;
                color: #fff;
                font-weight: bold;
                border-radius: 10px 10px 0 0;
            }

    /* Tab content styles */
    .tabs .tab-content {
        padding: 20px;
        display: none;
       
    }

        .tabs .tab-content.active {
            display: block;
        }






.TabBody {
    background-color: white;
    border: solid 3px #dadffc;
    z-index:0;
    position:relative;
}

.TabLinkContainer {
    position: relative; /* Initially relative */
    width: 100%;
    z-index: 10;
    background-color: #dadffc; /* Optional: Background color for better visibility */
    transition: position 0.3s, top 0.3s; /* Smooth transition */
    padding-left: 30px;
    height: 50px;
    padding-top: 20px;
}



.TabLink {
    color: grey;
    padding: 15px 10px 10px 10px;
    cursor: pointer;
    margin-top: 10px;
}

    a{
        text-decoration:none;
    }

    .TabLink:hover {
        background-color: lightgrey;
        color: black;
        padding: 15px 10px 10px 10px;
        border-radius: 10px 10px 0px 0px;
        cursor: pointer;
    }


.TabLinkActive {
    background-color: white;
    color: navy;
    padding: 15px 10px 10px 10px;
    border-radius: 10px 10px 0px 0px;
    margin-top: 10px;
}

.TabContentContainer {
    padding: 20px;
}

.is-invalid {
    border-color: red !important;
}

.validation-message {
    color: red;
}