#load_screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: 10000;
            transition: opacity 0.5s ease-out;
        }

        #load_screen.hidden {
            opacity: 0;
            pointer-events: none;
        }

        #loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    body{
        
        font-family: serif;
        background-color: lightgray;
        font-size: 12px;
        text-transform: uppercase;

    }
    .card-header{
        text-transform: capitalize;
    }
    table tr {
      margin: 10px;

    }

    .valid {
        border: 2px solid #4CAF50; /* Green border for valid input */
    }
    .invalid {
            border: 2px solid #ee0000;
            background-color: lightgray; /* Red border for invalid input */
     }
     .bg{
            background-color: lightgoldenrodyellow;
        }
     thead{
            background-color: black;
            color: gold;
            border: 1px white;
            text-align: center;


        }
        .card-header p{
            font-size: 20px;
    }