#menu {
    padding-left: 20px;
}

    #menu label {
        height: 45px;
        background-color: #d1ecee; /* Default background color */
        min-width: 100px;
        color: #00796b; /* Default text color */
        font-size: 14px;
        line-height: 45px;
        text-align: center;
        float: left;
        position: relative;
        margin-left: 2px;
        display: block;
        margin-right: 20px;
        font-weight: bold;
        text-transform: capitalize;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

        #menu label:before {
            content: "";
            position: absolute;
            left: -20px;
            width: 0;
            height: 0;
            border-top: 45px solid #d1ecee;
            border-left: 20px solid transparent;
        }

        #menu label:after {
            content: "";
            position: absolute;
            right: -20px;
            width: 0;
            height: 0;
            border-bottom: 45px solid #d1ecee;
            border-right: 20px solid transparent;
        }

    /* Checked (active) state */
    #menu input:checked + label {
        background-color: #4caf50; /* Active background color (green) */
        color: white; /* Active text color */
    }

        #menu input:checked + label:before {
            border-top: 45px solid #4caf50;
        }

        #menu input:checked + label:after {
            border-bottom: 45px solid #4caf50;
        }

    /* Disabled or gray-out state for non-selected tabs */
    #menu input:not(:checked) + label {
        background-color: #e0e0e0; /* Grayed-out background color */
        color: #9e9e9e; /* Grayed-out text color */
    }

        #menu input:not(:checked) + label:before {
            border-top: 45px solid #e0e0e0; /* Grayed-out trapezoid on the left */
        }

        #menu input:not(:checked) + label:after {
            border-bottom: 45px solid #e0e0e0; /* Grayed-out trapezoid on the right */
        }

    /* Hide radio buttons */
    #menu input[type=radio] {
        display: none;
    }

.sel-pic {
    height: 150px;
    width: 150px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

.sel-pic-sm {
    height: 100px;
    width: 100px;
}


.alert-purple {
    background-color: #d8b5ff;
    border-color: #c29ffa;
}

.alert-orange {
    background-color: #fff5e6;
    border-color: #ff8c00;
    color: #ff8c00;
}

.vertical-align {
    display: flex;
    align-items: center;
    min-height: 100%;
}