@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root{
    --main-color: #0b274b;
    --color-dark:#1d2231;
    --text-grey:#8390A4;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}
html, body{
    width: 100%;
}
body{
    display: flex;
    flex-direction: column;
    background-color: whitesmoke;
}
.content{
    
    flex: 1 0 auto;
}
.container{
    width: 90%;
    margin: 0 auto;
    padding: 10px;
    overflow: scroll;
}
.app-header{
    background-image: url("../img/top-back-image.jpg");
    background-size: cover;
    background-position: center center;
    box-shadow: 3px 3px 10px gray;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    position: relative;
    
}
.app-header .notify{
    position: absolute;
    width: 80%;
    /* background-color:tomato; */
    background-color: rgb(12, 231, 122);
    color: whitesmoke;
    font-weight: bold;
   top: 60px;
    z-index: 100;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 1px 1px 3px #707070;

}
.notify i{

    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #707070;
}
.app-header img{
    height: 40px;
}

.grid .item{
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-shadow: 1px 1px 2px #ccc;
}
.card-home{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    padding: 10px;
}
.card-home .image {
    height: 200px;
    width: 200px;
    border: 5px solid var(--main-color);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-home .image img{
    height:200px;
}


.app-footer{
    padding: 10px  ;  
    position: fixed;
    background-color: var(--main-color);
    width: 100%;
    bottom: 0;

}
.app-footer ul{
   display: flex;
   justify-content: space-around;
   

}
.app-footer ul li{
   display: flex;
   padding: 5px;
   border-radius: 50%;
   transition: .6s;

}

.app-footer ul li img{
   height: 40px;

}
main{
   padding: 0px 20px;
    
    background: #f1f5f9;
    
    overflow: hidden;
    
    
}

.cards{
    
    /* margin-bottom: 1rem; */
}
.card-single{
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 2rem;
    margin-top: 20px;
    
}
.card-header  H3 span{
    padding: 2px 5px;
    background: var(--main-color);
    color: #fff;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 200;
    margin-bottom: 10px;
    cursor: pointer;
    
}
.card-single  span:last-child {
    color: var(--text-grey);
    
}
.scroll{
    width: 100%;
    height: 100%;
    overflow: scroll;
    margin-top: 10px;
   
}
.lim{
    height: 71vh;
}
.card{
    display: flex;
    width: 100%;
    flex-direction: column;
   
    
}
table{
    width: 100%;
}

.card form{
    margin-top: 10px;
    display: flex;
    width: 100%;
    flex-direction: column;   
}
.card h3 {
    position: relative;
    display: flex;
}
.card h3 span{
    position: absolute;
    right: 0;
    color: green;
    font-size: 16px;
}
.centre-btn{
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn,.btnbtn{
    padding: 10px 10px;
    
    width: 100%;
    background: var(--main-color);
    outline: none;
    border: none;
    color: #fff;
    border-radius:2px;
    cursor: pointer;

}
.card form input{
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid var(--text-grey);
    padding: 5px;
    font-size: 20px;
    text-align: center;
    
}
.card-single span:first-child{
    font-size: 3rem;
    color: var(--main-color); 
}
.card-single:last-child {
     background: var(--main-color); 
    
}
.card-single:last-child h1,
.card-single:last-child div:last-child span {
    
   color: #fff;
}
.card-single:last-child div:first-child span {
    
   color: #fff;
}
.card-header{
    display: flex;
    justify-content: space-between;
}
.card-header span span{
    margin: 5px;
    color: var(--text-grey);
    cursor: pointer;
}
.card-header span span:last-of-type{
    
    padding: 2px 5px;
    background: var(--main-color);
    color: #fff;
    border-radius: 2px;
    
}

.projects{
    padding: 1rem;
    background-color: #fff;
    border-radius: 4px;
   
}
.customers{
    padding: 1rem;
    box-shadow: 1px 1px 2px #ccc;
    background-color: #fff;
    display: flex;
   
   
}
.recent-flex{
    margin-top: 20px;
    
} 
.customers div{
    width: 100%;
}
.customer div{
    display: flex;
    
    width: 100%;
    flex-direction: row;
    cursor: pointer;
    overflow: hidden;
    /* border: 1px solid; */
    justify-content: center;
    position: relative;
    margin-bottom: 5px;
}

.customer div div{
    display: flex;
    flex-direction: column;
    height: 40px;
   
   
}
.customer div div h4{
    font-size: 13px;
    /* border: 1px solid ; */
   
    padding-left:5px;
    
    display: flex;
    justify-content: space-between;

}
.customer div div small{
   font-size: 11px;
   height: 20px;
   overflow: hidden;
   color: var(--text-grey);
   /* position: absolute; */
   /* border: 1px solid ; */
   

}
.customer div div h4 span{
    color: green;
    font-size: 12px;
}
.image{
    min-width: 40px;
    max-height: 40px;
    color: aqua;
    background: var(--main-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
} 
.image1{
    min-width: 40px;
    max-height: 40px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 50%;
} 
.image1 img{
    width: 40px;
    height: 40px;
}