*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Arimo', sans-serif;
}
.admin-dashboard{
    background-image: url("../img/halo.gif");
    background-repeat: no-repeat;
    background-position-y: 50px;
    background-size: cover;
    background-color: black;
    display: flex;
    align-items: center;
    height:100vh;
}
.dashboard-wrap{
    display: flex;
    width:80%;
    height: 90vh;
    margin: 0 auto;
    padding: 0.5%;
    justify-content: space-between;
    border-radius: 5px;
}
.navigation{
    background-color: rgb(0, 115, 255);
    padding: 0.8%;
    width: 25%;
    border-radius: 5px;
}
.admin-user{
    display: flex;
    align-items: center;
    margin-top: 5%;
}
.admin-user i{
    background-color: black;
    padding: 5%;
    color:#01CF15;
    font-size: 20px;
    border-radius: 50%;
}
.admin-user h3{
    background-color: black;
    margin-left: -7px;
    width:100%;
    padding: 2% 0% 2% 5% ;
    color:#01CF15;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.navigation ul{
    list-style: none;
}
.navigation ul li{
    background-color: black;
    margin: 4% 0%;
    color:white;
    padding: 5% 0% 5% 5%;
    border-radius: 5px;
    font-size: 12px;
}
.navigation ul li:hover{
    cursor: pointer;
}
.navigation img{
    width:25%;
    margin-top: -45px;
    position: relative;
    left: 95px;
    filter: drop-shadow(0px 8px 5px rgb(0, 0, 0));
}
.dashboard-page{
    background-color: rgb(0, 115, 255);
    width: 74%;
    border-radius: 5px;
    padding: 1%;
}
.logout-btn{
    margin-top: 1%;
    display: flex;
    align-items: center;
}
.logout-btn i{
    background-color: black;
    padding: 3%;
    color: red;
    font-size: 35px;
    border-radius: 50%;
}
.logout-btn p{
    background-color: black;
    margin-left: -7px;
    width:50%;
    padding: 3% 0% 3% 5% ;
    color:rgb(255, 0, 0);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
}
.dashboard-page{
    overflow-y: scroll;
}
.dashboard-page::-webkit-scrollbar {
    display: none;
  }
.user-cards-wrap{
    display: flex;
    flex-wrap: wrap;
}
.user-card{
    background-color: black;
    margin: 1% 0% 0% 1%;
    width:24%;
    height:20vh;
    padding:3px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: hidden;
    box-sizing: border-box;
}
.user-card i{
    color: rgb(0, 115, 255);
    font-size:20px;
    margin: 2% 0% 2% 0%;
    transition-duration: 0.5s;
}
.fa-trash{
    color: rgb(114, 114, 114) !important;
    font-size: 15px !important;
    display: none;
    margin-top: 20% !important;
    cursor: pointer;
}
.active-trash{
    display: block;
}
.user-card h5{
    color:white;
}
.user-card p{
    font-size: 12px;
    color: rgb(0, 115, 255);
}
.userId{
    font-size: 6px !important;
}
.card-btn{
    background-color: rgb(0, 115, 255);
    border: none;
    width: 60%;
    height: 0px;
    font-size: 9px;
    margin-top: 5px;
    padding:0px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: white;
    border-radius: 5px;
    transition-duration: 0.3s;
    cursor: pointer;
}
.fa-pen{
    position: relative;
    top:7px;
    font-size: 0px !important;
    cursor: pointer;
    transition-duration: 0.5s;
}
.active-card-btn{
    display: none !important;
}
.user-card:hover .card-btn{
    height: 70px;
    transition-duration: 1s;
}
.user-card:hover .fa-user{
    font-size: 0px;
}
.user-card:hover .fa-pen{
    font-size: 17px !important;
}
.info-dropdown{
    background-color: #fff;
    width:13%;
    border-radius: 3px;
    position: absolute;
    top:65px;
    opacity: 0;
    transition-duration: 0.5s;
    box-shadow: 0px 2px 10px rgb(0, 0, 0);
}
.user-card:hover .info-dropdown{
    top:187px;
    opacity: 1;
}
.info-dropdown li{
    list-style: none;
    font-size: 9px;
    color: rgb(80, 80, 80);
    padding: 2px;
    margin-top: 2px;
    font-weight: bold;
}
.info-dropdown li:nth-child(odd){
    background-color: rgb(212, 231, 255);
}
.admins-card{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.adminCard{
    background-color: rgb(255, 255, 255);
    padding: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    height: 40vh;
    margin-bottom: 2%;
    border-radius: 5px;
    justify-content: center;
    box-shadow: 0px 10px 15px -3px rgb(0, 0, 0);
}
.adminCard i{
    font-size: 50px;
    color:rgb(89, 89, 89);
    margin-bottom: 10px;
}
.adminCard p{
    font-size:12px;
    font-weight: bold;
}
.adminCard button{
    border:none;
    background-color: red;
    padding:2% 4%;
    color:white;
    border-radius: 5px;
    margin-top: 40%;
    font-weight: bold;
    cursor: pointer;
}
.forms{
    background-color: white;
    width:70%;
    margin:0 auto;
    padding: 2%;
    border-radius: 5px;
    box-shadow: 0px 10px 15px -3px rgb(0, 0, 0);
}
.form-title h3{
    text-align: center;
    margin-bottom: 5%;
}
.form-group{
    margin-bottom: 5%;
}
.form-group label{
    display: block;
}
.form-group input{
    width:100%;
    padding:1.3% 2%;
    margin-top: 2%;
    border:none;
    border-style: inset;
}
.btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:2% 0%;
    font-size: 15px;
    font-weight: bold;
    border: none;
    background-color: black;
    color:white;
    border-radius: 5px;
    cursor: pointer;
}
.dot-windmill{
    margin-right: 20px;
    background-color: #ffffff !important;
    display: none;
}
.update-cli-inv-form{
    display:none;
}
.edit-cli-inv-details{
    display: none;
}
.mobile-header{
    background-color: #000dff;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding:4%;
}
.mobile-header img{
    width:30px;
    filter: drop-shadow(0px 8px 5px rgb(0, 0, 0));
}
.bars i{
    color: white;
    font-size: 20px;
    cursor: pointer;
}

/* POP-UP MODAL */
.pop{
    width:400px;
    background-color: #ffffff;
    border-radius: 6px;
    position:absolute;
    top:0%;
    left:50%; 
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0px 30px 30px;
    color:#333;
    box-shadow:0 5px 5px rgba(0, 0, 0, 0.2);
    visibility: hidden;
    transition: transform 0.4s, top 0.4s;
}
.open-popup{
    visibility: visible;
    top:50%;
    transform: translate(-50%, -50%) scale(1);
}
.pop img{
    background-color: white;
    width:100px;
    margin-top: -50px;
    border-radius: 50%;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.pop h2{
    font-size: 38px;
    font-weight: 500;
    margin:30px 0 10px;
}
.pop button{
    width:100%;
    margin-top: 50px;
    padding:10px 0;
    background-color: #01CF15;
    color:#fff;
    border:0;
    outline:none;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow:0 5px 5px rgba(0, 0, 0, 0.2);
}
.error{
    color:red;
}
.success{
    color:#01CF15;
}
.btnErr{
    background-color: red !important;
}
.btnSuccess{
    background-color: #01CF15 !important;
}
.show-password{
    width:10%;
    position: absolute;
    right:13%;
    cursor: pointer;
    margin-top: 1.5%;
}
.fa-eye-slash{
    display: none;
}
.pass-err-msg{
    color:red;
    text-align: center;
    margin-top: 2%;
    font-size: 12px;
}

@media only screen and (max-width:600px){
    .admin-dashboard{
        align-items: baseline;
        /* height:100%; */
    }
    .dashboard-wrap{
        width:100%;
        height: 100vh;
        flex-direction: column;
    }
    .navigation{
        width:100%;
        margin-bottom: 10%;
        position: absolute;
        top:-600px;
        transition-duration: 2s;
    }
    .navigation img{
        left: 38%;
    }
    .navigation ul li{
        margin: 2% 0%;
        padding: 3% 0% 3% 5%;
    }
    .active-nav{
        top: 12%;
    }
    .dashboard-page{
        width: 100%;
        height: 100vh;   
        padding-top: 5%;
        padding-bottom: 5%;
    }
    .user-card{
        width:90%;
        height:30vh;
        margin: 1% auto;
    }
    .info-dropdown{
        top: -600px;
        width:85%;
    }
    .info-dropdown li{
        padding: 5px;
        margin-top: 2px;
    }
    .user-card:hover .info-dropdown{
        /* top:500px; */
    }
    .logout-btn i{
        font-size: 25px;
    }
    .logout-btn p{
        background-color: black;
        margin-left: -7px;
        width:30%;
        padding: 1.5% 0% 1.5% 5% ;
        color:rgb(255, 0, 0);
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        cursor: pointer;
    }
    .mobile-header{
        display: flex;
        margin-bottom: 3%;
    }
    .fa-times{
        display: none;
    }
    .admins-card{
        flex-direction: column;
    }
    .adminCard{
        width: 90%;
        height: 30vh;
        margin: 2% auto;
    }
    .adminCard button{
        margin-top: 5%;
    }
    .forms{
        width:95%;
        margin:0 auto;
        padding:5% 2%;
    }
    .form-group label{
        margin-top: 10%;
    }
    .form-group input{
        padding:2% 2%;
    }
    .btn{
        padding:3% 0%;
    }
    .show-password{
        margin-top: 4%;
        right:4%;
    }
    .pop{
        width:300px;
    }
}