@font-face {
    font-family: 'Poppins';
    src: url(../font-family/Poppins-Light.ttf);
}

@font-face {
    font-family: 'Poppins-bold';
    src: url(../font-family/Poppins-Bold.ttf);
}

body {
    padding: 0%;
    margin: 0%;

}


.logo-bg {
    background: #004AAD;
    position: relative;
}

.logo-bg img {
    height: 100dvh;
}

.form {
    position: relative;
}

form {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 100px 50px;
    border-radius: 30px;
    font-family: 'Poppins';
    z-index: +10;
    background: #fff;
}


form label {
    font-size: 18px;
    font-weight: 600;
}

form input {
    min-width: 400px;
    border: none;
    border-bottom: 1px solid black !important;
    outline: none;
    height: 40px;
    margin: 10px 0px 20px;
}

form input:active,
form input:focus {
    border-bottom: 2px solid #004AAD !important;
}

form select {
    margin: 10px 0px 20px;
    height: 40px;
    border: none;
    border-bottom: 1px solid black;
    outline: none;
}

form input::-webkit-outer-spin-button,
form input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

form select:focus,
form select:active {
    border-bottom: 2px solid #004AAD !important;
}

form button {
    text-align: center;
    align-items: center;
    background: transparent;
    color: #ffffff;
    margin: auto;
    margin-top: 40px;
    width: 150px;
    border: none;
    outline: none;
    height: 45px;
    border-radius: 15px;
    box-shadow: #004bad9d 0px -23px 25px 0px inset, #004bad81 0px -36px 30px 0px inset, #004AAD 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.display .display1 {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background: #004AAD;
    height: 100dvh;
    padding: unset;

}


.display .display2 {
    padding: 20px 20px 10px 40px !important;
    background: #fff;
    height: 100dvh;
    padding: unset"

}

.display .display1 ul {
    margin: unset;
    padding: unset;
}

.display .display1 ul li {
    list-style: none;
    font-size: 20px;

    margin: 5px 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;

}

.display .display1 ul li:hover {
    background: #002e6a;
}

.display .display1 ul li a {
    display: flex;
    justify-content: baseline;
    align-items: center;

}

.display .display1 ul li a span {
    margin-right: 20px;
}

.display .display1 ul li a span img {
    width: 30px;
    height: 25px;
}

.display .display1 ul li a {
    text-decoration: none;
    color: #fff;
    margin-left: 10px;
    padding: 15px 70px 15px 10px;
    width: 100%;
    /* background: #002e6a; */
}

.display .display1 ul li .arrow {

    margin: auto;
    font-size: 23px;
    font-weight: 100;

}

.profile {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 5px 20px;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
}

.profile img {
    width: 50px;
    height: 50px;
    border: 1px solid white;
    border-radius: 50%;
}

.profile a {
    font-size: 22px;
    text-decoration: none;
    color: #fff;
    padding: 5px 15px;
    margin-left: 5px;
    border-radius: 10px;
    width: 100%;
    position: relative;
}

.profile a:hover{
    background: #002e6a;

}

.profile a:hover {
    color: #fff;
}

.profile a:hover button {
    display: block;
    
}

.profile button {
    position: absolute;
    top: -50%;
    right: 5%;
    color: #fff;
    padding: 10px 25px;
    outline: none;
    border: 1px solid red;
    border-radius: 10px;
    z-index: +10;
    background: rgb(250, 27, 27);
    display: none;
}

table tbody tr td {
    vertical-align: middle;
}

table tbody tr td img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #004AAD;
}

.action svg {
    margin: 0px 10px;
    padding: 12px;
}

.action svg:hover {
    background: #88888860;
    border-radius: 5px;
}

tr td a {
    list-style: none;
    color: black;
    text-decoration: none;
    
}

tr td a:hover {
    color: black
}


form img{
    width: 35px;
    position: absolute;
    top: 3%;
    right: 5%;
    padding: 5px;

}
form img:hover{
    background: rgba(128, 128, 128, 0.288);
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#myDiv {

    max-height: 99vh; /* Set the maximum height to 90vh */
    overflow: auto; /* Enable scrolling when the content overflows */
  }