body {
    width: 80%;
    margin: auto;
    font-family: "Roboto Condensed", sans-serif;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-5-28 16:7:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */

@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }

}

@keyframes button-animate {
  0% {
    
    opacity: 0;
  }

  100% {
    
    opacity: 1;
  }
}

.slide-in-top {
	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


.dashboard {
    width: 95%;
}

h1, h2 {
    text-align: center;
}

a {
    text-decoration: none;
}

th {
    cursor: pointer;
    user-select: none;
}


.login-form {
    text-align: center;
    max-width: 300px;
    margin: auto;
}

.login-form input {
    width: 100%;
    margin: 10px 0;
    padding:5px 0;
    transition: all ease .3s;
    border: 2px solid #eff3ff;
    border-radius: 5px;
}

.login-form input:hover {
    width: 100%;
    margin: 10px 0;
    padding:5px 0;
    border: 2px solid #000  ;
}

.login-form button, .disconnect {
    font-family: "Roboto Condensed";
    width: 100%;
    margin: auto;
    padding: 5px;
    display: block;
    font-size: 18px;
    background-color: #08519C;
    color:#fff;
    border-radius: 5px;
    border:0px;
    padding: 10px;
    transition: all ease .3s;
}

.login-form button:hover, .disconnect:hover {
    background-color: #eff3ff;
    color:#08519C;
    
}

.error-message {
    text-align: center;
    color: red;
    animation: forwards;
    font-weight: 800;
}


.dashboard .menu {
    max-width: 90%;
    margin: auto;
    display: block;
}


.field {
    width: 100%;
    margin: 10px 0;
    padding:5px 0;
    transition: all ease .3s;
    border: 2px solid #eff3ff;
    border-radius: 5px;
}

.field:hover {
    width: 100%;
    margin: 10px 0;
    padding:5px 0;
    border: 2px solid #000  ;
}


.submission-form select {
        width: 100%;
    background: #fff;
    border: 2px solid #eff3ff;
    padding: 5px;
    border-radius: 5px;
}


.green-button {
    background-color: #8efa7d;
    color: #08519C;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    font-family: "Roboto condensed";
    font-size: 20px;
    border: 0px;
    border-radius: 5px;
    margin: 20px 0;
    transition: ease .3s;
    cursor: pointer;
    text-decoration: none;
    display: block;
    -webkit-animation: button-animate 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: button-animate 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.green-button:hover {
    background-color: #31542b;
    color: #eff3ff;
}


@media (max-width:760px) {
    .green-button {
        font-size:16px;
        padding: 15px;
    }
}

.menu {
	display: flex;
	justify-content:space-between;
}

.logo {
	width:200px;float:left;margin-top:10px;
}

.menu ul {
    display: flex;
    text-align: center;
    list-style-type: none;
    gap: 2em;
    padding: 0;
    justify-content: right;
	-webkit-animation: button-animate 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: button-animate 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.menu a {
     text-decoration: none;
     color: #08519C;
}



.table {
    overflow-x: auto;
}


.data-table {
    border: 1px solid #eff3ff;
    border-radius: 5px;
    table-layout: fixed;
    background: #c1cee3;
}

.table td, .table th {
    border: 1px solid #eff3ff;
    background: #fff;
}

th.sorted {
    background-color: #d1e7dd; 
    color: #0f5132;            
}


.delete-admin {
    color: red; 
    background:transparent; 
    border:0;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    text-align: right;
    cursor: pointer;
}