/* font awesome cdn link  */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');

/* google fonts cdn link  */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
   --main-color:hsl(72, 100%, 50%);
   --main-color:cyan;
   --second-color:darkcyan;
   --green-bg:hsla(100,100%,40%,.2);
   --red:hsl(0,100%,60%);
   --red-bg:hsla(0,100%,40%,.2);
   --blue:hsl(255, 100%, 55%);
   --blue-bg:hsla(255, 100%, 40%,.2);
   --white:hsl(0,0%,95%);
   --light:hsl(0,0%,60%);
   --black:hsl(222,30%,14%);
   --bg:hsl(223,26%,17%);
   --border:.1rem solid hsla(0,0%,60%,.2);
   --red-border:.1rem solid var(--red);
   --blue-border:.1rem solid var(--blue);
   --green-border:.1rem solid var(--main-color);

}

*{
   box-sizing: border-box;
   margin: 0; padding: 0;
   outline: none; border: none;
   text-decoration: none;
   transition: all .2s linear;
   /* text-transform: capitalize; */
   font-family: "Montserrat", sans-serif;
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
}

body{
   background-color: var(--black);
   /* padding-left: 30rem; */

}

section{
   padding: 2rem;
   margin: 0 auto;
   max-width: 1200px;
}
h1,h2,h3{
   font-weight: 500;
}
.btn,
.del-btn,
.info-btn{
   display: inline-block;
   margin-top: 1rem;
   width: 100%;
   padding: 1rem 2.5rem;
   border-radius: .5rem;
   cursor: pointer;
   font-size: 1.8rem;
   text-align: center;
   color: var(--white);
}

.btn{
   background-color: var(--second-color);
   border: var(--main-color);
}

.btn:hover{
   background-color: var(--main-color);
   color: var(--black);
}

.del-btn{
   background-color: var(--second-color);
   border: 1px solid var(--main-color);
}

.del-btn:hover{
   background-color: var(--main-color);
   color:var(--second-color);
   border-color:var(--second-color);
   font-weight: 600;
}

.info-btn{
   background-color: var(--bg);
   border:1px solid var(--second-color);
}

.info-btn:hover{
   background-color: var(--second-color);
}

.empty{
   width: 100%;
   border-radius: .5rem;
   border: var(--border);
   background-color: var(--bg);
   font-size: 1.8rem;
   color: var(--light);
   padding:1rem;
   text-align: center;
}

.header{
   position: fixed;
   top: 0; left: 0;
   height: 100vh;
   width: 30rem;
   background: var(--bg);
}

.header .flex{
   height: 100%;
   display: flex;
   flex-flow: column;
   gap: 2rem;
}

.header .logo{
   font-size: 2rem;
   color: var(--main-color);
   text-align: center;
   border-bottom: var(--border);
   padding-bottom: 2rem;
}

.header .navbar a{
   display: block;
   font-size: 1.6rem;
   color: var(--light);
   margin: 1rem 0;
   padding: 0.5rem;
   border-radius: .5rem;
}

.header .navbar a i{
   margin-right: 0.5rem;
}

.header .navbar a:hover{
   background-color: var(--black);
}

.header .del-btn{
   margin-top: auto;
}

#menu-btn{
   position: fixed;
   bottom: 1.5rem; right: 1.5rem;
   z-index: 9999;
   height: 5rem;
   width: 5.5rem;
   font-size: 2.5rem;
   border-radius: .5rem;
   display: none;
   align-items: center;
   justify-content: center;
   color: var(--white);
   background-color: hsla(0,0%,100%,.2);
}

.overlay{
   position: fixed;
   inset: 0;
   background: hsla(0,0%,0%,.5);
   backdrop-filter: blur(5px);
   pointer-events: none;
   z-index: 1000;
   display: none;
}

.form-container{
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2rem;
}

.form-container form{
   width: 40rem;
   background-color: var(--bg);
   border-radius: .5rem;
   border: var(--border);
   padding: 2rem;
}

.form-container form h3{
   font-size: 2.5rem;
   color: var(--white);
   margin-bottom: 2rem;
   text-align: center;
}

.form-container form p{
   color: var(--light);
   font-size: 1.6rem;
   margin-top: 1rem;
}

.form-container form .input{
   width: 100%;
   margin: 1rem 0;
   padding: 1.4rem;
   font-size: 1.8rem;
   border-radius: .5rem;
   border: var(--border);
   background-color: var(--black);
   color: var(--white);
   text-transform: none;
}

.form-container form .pass-wrapper{
   position: relative;
}

.form-container form .pass-wrapper .toggle-eye{
   position: absolute;
   top: 50%; right: 1.5rem;
   transform: translateY(-50%);
   font-size: 2rem;
   color: var(--light);
   cursor: pointer;
}

.form-container form .pass-wrapper .toggle-eye:hover{
   color:var(--white);
}

.form-container form .default{
   padding: .5rem 1.5rem;
   margin-top: 2rem;
   background-color: var(--black);
   border: var(--border);
   border-radius: .5rem;
}

.form-container form .default p{
   margin-top: 0;
   line-height: 1.6;
}

.form-container form .default p span{
   color: var(--main-color);
   text-transform: none;
   font-weight: 500;
}

.dashboard .greetings{
   text-align: center;
   margin-bottom: 2rem;
   font-size: 3rem;
   color: var(--white);
   font-weight: 500;
  
   
}

.dashboard .greetings span{
   color: var(--main-color);
  
}

.dashboard .box-container{
    margin-left: 30rem;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(25rem, 30rem));
   gap: 2rem;
   justify-content: center;
}

.dashboard .box-container .box{
   display: flex;
   gap: 1.5rem;
   border: .1rem solid transparent;
   padding: 2rem;
   border-radius: .5rem;
   background-color: var(--bg);
}

.dashboard .box-container .box:hover{
   border: var(--border);
}

.dashboard .box-container .box i{
   font-size: 2.5rem;
   height: 5rem;
   width: 5.5rem;
   line-height: 5rem;
   background-color: var(--main-color);
   color: var(--black);
   border-radius: .5rem;
}

.dashboard .box-container .box h3{
   font-size: 2rem;
   color: var(--white);
   margin-bottom: .7rem;
}

.dashboard .box-container .box p{
   font-size: 1.6rem;
   color: var(--light);
}
.all-admins{
   margin-left: 30rem;

}
.all-admins .title{
   font-size: 2.5rem;
   color: var(--white);
   margin-bottom: 2rem;
}

.all-admins .title span{
   color: var(--main-color);
}

.all-admins .current-admin{
   max-width: 40rem;
   border-radius: .5rem;
   padding: 2rem;
   background-color: var(--bg);
}

.all-admins .current-admin .name{
   font-size: 2rem;
   border-radius: .5rem;
   border: var(--border);
   background-color: var(--black);
   color: var(--white);
   margin-bottom: 1rem;
   padding: .5rem 1rem;
   line-height: 1.6;
   text-align: center;
}

.all-admins .current-admin .flex{
   display: flex;
   gap: 1rem;
}

.all-admins .current-admin .flex > *{
   flex: 1;
}

.all-admins .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 35rem));
   align-items: flex-start;
   gap: 2rem;
   margin-top: 2rem;
}

.all-admins .box-container .box{
   padding: 1rem 1.5rem;
   border-radius: .5rem;
   background-color: var(--bg);
}

.all-admins .box-container .box .name{
   text-align: center;
   color: var(--white);
   font-size: 2rem;
   line-height: 1.6;
}
.messages{
   margin-left: 30rem;
}
.messages .title-flex{
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
   justify-content: space-between;
   align-items: center;
}

.messages .title-flex h3{
   font-size: 2.5rem;
   color: var(--white);
}

.messages .title-flex h3 span{
   color: var(--main-color);
}

.messages .title-flex .multi-del-btn{
   margin-top: 0;
   width: auto;
}

.messages .box-container{
   display: grid;
   row-gap: 2rem;
   margin-top: 2rem;
}

.messages .box-container .box{
   padding: 2rem;
   border-radius: .5rem;
   border: var(--border);
   background-color: var(--bg);
}

.messages .box-container .box .date-flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1rem;
}

.messages .box-container .box .date-flex .msg-checkbox{
   appearance: none;
   height: 2rem;
   width: 2rem;
   border-radius: 50%;
   cursor: pointer;
   background-color: var(--red-bg);
   border: var(--red-border);
}

.messages .box-container .box .date-flex .msg-checkbox:checked{
   background-color: var(--red);
}

.messages .box-container .box .date-flex .date i{
   margin-right: 1rem;
   font-size: 1.8rem;
   color: var(--light);
}

.messages .box-container .box .date-flex .date span{
   font-size: 1.8rem;
   color: var(--white);
}

.messages .box-container .box .contact{
   margin: .5rem 0;
}

.messages .box-container .box .contact p{
   margin: 1rem 0;
}

.messages .box-container .box .contact p i{
   margin-right: 1rem;
   font-size: 1.8rem;
   color: var(--light);
}

.messages .box-container .box .contact p a{
   display: inline-block;
   border-radius: .5rem;
   padding: .5rem 1rem;
   font-size: 1.8rem;
   color: var(--white);
   background-color: var(--bg);
   border: var(--main-color);
   text-transform: none;
}

.messages .box-container .box .contact p a:hover{
   background-color: var(--main-color);
}

.messages .box-container .box .user{
   margin: 1.5rem 0;
   padding: 1rem 0;
   border-top: var(--border);
   border-bottom: var(--border);
   display: flex;
   align-items: center;
   gap: 1rem;
}

.messages .box-container .box .user i{
   height: 4rem;
   width: 4rem;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.5rem;
   background-color: var(--light);
   color: var(--black);
   border-radius: .5rem;
}

.messages .box-container .box .user h3{
   font-size: 2rem;
   color: var(--white);
   margin-bottom: .5rem;
}

.messages .box-container .box .user p{
   font-size: 1.6rem;
   color: var(--light);
}

.messages .box-container .box .msg-box{
   background-color: var(--black);
   border-radius: .5rem;
   padding: .5rem 1rem;
   font-size: 1.6rem;
   line-height: 1.6;
   color: var(--light);
}

.messages .box-container .box .msg-box > *{
   text-transform: none;
}

.messages .box-container .box .msg-box .read-more{
   background: none;
   color: var(--main-color);
   cursor: pointer;
   font-size: 1.8rem;
}

/* media queries  */

@media (max-width:1200px) {
   
   html{
      font-size: 55%;
   }
   
}

@media (max-width:991px) {
   
   body{
      padding-left: 0;
   }
   .dashboard .box-container{
    margin-left: 0;
   }
   .all-admins{
   margin-left: 0;
   }
   .messages{
      margin-left: 0;
   }

   #menu-btn{
      display: flex;
   }

   body.active .overlay{
      display: block;
      pointer-events: auto;
   }

   .header{
      transform: translateX(-30rem);
      z-index: 1500;
   }

   body.active .header{
      transform: translateX(0rem);
   }
   
}

@media (max-width:768px) {
   
   .dashboard .greetings{
      font-size: 2.5rem;
   }
   
}

@media (max-width:450px) {
   
   html{
      font-size: 50%;
   }

   .form-container form{
      max-width: 100%;
   }

   .all-admins .title{
      text-align: center;
   }

   .all-admins .current-admin{
      max-width: 100%;
   }

   .all-admins .box-container{
      justify-content: center;
   }

   .messages .title-flex{
      justify-content: center;
   }
   
}