.card{
    max-width: 250px;
}

.container-fluid-2 {
    display: flex !important;
    /*flex-direction: column !important; */
    /*flex-direction: column;*/
    justify-content: flex-end;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100%; /* Take up full width of its parent */
    padding: 10px; /* Keep your padding if needed */
    position: relative;
}

#input-container {
    /*    flex-direction: column;
    align-items: center !important;
    justify-content: flex-end; 
    height: 100%;*/
    display: flex;
    justify-content: flex-end; /* Center the input container */
    align-items: center; /* Vertically align items in the container */
    flex-direction: column;
    height: 175px;
    width: 100%;
}

.input-group {
    display: flex;
    align-items: center; /* Aligns the label and input next to each other */
    flex-direction: row;
    justify-content: start; /* Aligns items to the start of the flex container */
    gap: 10px; /* Adjust based on your preference */
    width: fit-content;
}

.form-control {
    /* Your existing styles */
    /* Ensure it doesn't fill the entire width if you want it centered */
    width: auto; /* Adjust as needed */
}

#tracking-container {
    height: 250px;
    width: 500px;
    border-radius: 65px;
    box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    transition: 0.5s ease;
    z-index: 1;
    /* Removed positioning styles for simplicity with flexbox */
}
    #tracking-container.expand {
        width: 900px;
    }

    #tracking-container:hover {
        box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
    }

    #tracking-container:before {
        filter: blur(10px);
    }

.btnCD {
    width: 150px;
    font-size: 12px;
    margin-left: 300px;
    background-color: darkorange;
    border-color: gainsboro;
}

    .btnCD::before {
        content: '';
        border-radius: 50%;
        display: block;
        width: 150px;
        line-height: 150px;
        left: -150px;
        text-align: center;
        transition: box-shadow 0.5s ease-out;
        z-index: -1;
    }

    .btnCD:hover {
        color: #fff;
        box-shadow: inset 0 0 0 150px rgba(#EE3769,1);
    }

        .btnCD:hover::before {
            box-shadow: inset 0 0 0 150px rgba(#EE3769,1);
        }

.card-img-alt {
    width: 120px;
    height: 80px;
    position: absolute;
    top: 25px;
    left: 0;
}

#alt-tracking-text {
    position: absolute;
    top: 25px;
    left: 175px;
    font-weight: bold;
}

/*#input-container {
    display: flex;
    justify-content: flex-start;*/ /* Align items to the start */
    /*gap: 10px;*/ /* Creates space between flex items, adjust as needed */
/*}*/

#refNumber {
    width: 200px;
}

#resultsFrame {
    position: relative;
    visibility: hidden;
}

    #resultsFrame.show {
        visibility: visible;
    }

#fetchBox {
    margin: auto;
    width: 150px;
    height: 150px;
    position: relative;
    top: 0;
    bottom: 100px;
    left: 25px;
    right: 0;
    visibility: hidden;
}

    #fetchBox.show {
        visibility: visible;
    }

#loadingSpinner {
    margin: auto;
    position: absolute;
    top: 0px;
    bottom: 10px;
    left: 0px;
    right: 0px;
}

#fetchMsg {
    margin: auto;
    position: absolute;
    width: 100px;
    height: 20px;
    top: 50px;
    bottom: 0;
    left: 0px;
    right: 0px;
}

#divTrackingResponse {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
}

    #divTrackingResponse.show {
        visibility: visible;
    }

#msgResponse {
    width: 260px;
    height: 125px;
    top: 0px;
    left: 60px;
    border: solid;
    border-radius: 10px;
    border-color: ghostwhite;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.02);
}

#resultsStatus {
    position: relative;
    top: 10px;
    bottom: 0;
    left: 33px;
    right: 0px;
}