@import url('font-inter.css');
:root {
 --primarycolor: #0A76D8;
 --primarycolorhover: #006dd3;
 --btnice:#D8EBFA;
 --btnnicetext:#1b62b3;
}


body {
   margin: 0;
   padding: 0;
   font-family: 'Inter', sans-serif;
}


*, ::after, ::before {
   box-sizing: border-box;
}


/* Custom Scrollbar */
::-webkit-scrollbar {
   width: 5px;
}
::-webkit-scrollbar-track {
   background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 12px;
}
::-webkit-scrollbar-thumb:hover {
   background: #555;
}


/* Input Fields */
.input-text {
   border-radius: 4px;
   border: 1px solid #e9ecef;
   font-size: 14px;
   line-height: 26px;
   background-color: #fff;
   display: block;
   width: 100%;
   padding: .375rem .75rem;
   font-weight: 300;
   color: #212529;
   transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.input-text:focus {
   border: 1px solid var(--primarycolor);
}


/* Buttons */
.btn {
   cursor: pointer;
   padding: 8px 20px;
   font-size: 15px;
   letter-spacing: 0.5px;
   transition: all 0.3s;
   border-radius: 5px;
   font-family: 'Inter', sans-serif;
}
.btn:hover {
   background-color: var(--primarycolorhover);
   transition: all 0.5s;
}
.btn-primary {
   background-color: var(--primarycolor);
   border: 1px solid var(--primarycolor);
   color: #fff;
}
.btn-primary-soft {
   background-color: var(--btnice);
   color: var(--btnnicetext);
   font-weight: 500;
   font-size: 16px;
   border: none;
}


/* Layout */
.container {
   display: flex;
   flex-wrap: wrap;
   height: 100vh;
}
.menu {
   border-right: 1.5px solid rgb(235, 235, 235);
   width: 21%;
   height: 100vh;
   box-shadow: 0 0px 0px 2px rgba(240, 240, 240, 0.3);
}
.dash-body {
   width: 79%;
   height: 100vh;
}


.menu-container {
   width: 100%;
   border-spacing: 0;
}


.profile-title {
   font-weight: 500;
   color: #161c2d;
   font-size: 22px;
   margin: 0;
   text-align: left;
   padding-left: 8%;
}


.profile-subtitle {
   font-weight: 300;
   color: #8492a6;
   font-size: 15px;
   margin: 0;
   text-align: left;
   padding-left: 8%;
}


.logout-btn {
   margin-top: 30px;
   width: 85%;
}


.profile-container {
   border-bottom: 1.5px solid rgb(235, 235, 235);
   padding-top: 18%;
   padding-bottom: 12%;
   text-align: center;
}


.heading-main12 {
   font-weight: 500;
   font-size: 25px;
}


.heading-sub12 {
   font-weight: 500;
   font-size: 20px;
   text-align: right;
}


.header-search {
   display: flex;
   justify-content: center;
}


.header-searchbar {
   width: 75%;
   background-color: rgba(255, 255, 255, 0.705);
   border: 0.5px solid rgba(190, 190, 190, 0.884);
}


.add-doc-form-container {
   padding: 25px;
   margin-top: 30px;
}


.profile-img {
   width: 40px !important;
   height: 40px !important;
   border-radius: 50%;
}


/* Responsive Design */
@media screen and (max-width: 1024px) {
   .menu {
       width: 25%;
   }
   .dash-body {
       width: 75%;
   }
}


@media screen and (max-width: 768px) {
   .container {
       flex-direction: column;
       height: auto;
       position: relative;
   }
  
   .menu {
       width: 100%;
       height: 100vh;
       position: fixed;
       left: -100%;
       top: 0;
       z-index: 1000;
       background: white;
       transition: left 0.3s ease-in-out;
       overflow-y: auto;
       animation: transitionIn-X 0.7s ease-out;
   }


   .menu.active {
       left: 0;
   }


   .dash-body {
       width: 100%;
       min-height: 100vh;
       padding-bottom: 60px;
       animation: transitionIn-Y-bottom 0.7s ease-out;
   }


   .profile-container {
       padding: 5% 0;
       animation: transitionIn-Y-over 0.7s ease-out;
   }


   .header-searchbar {
       width: 90%;
   }


   .heading-main12 {
       font-size: 22px;
       text-align: center;
       margin: 15px 0;
   }


   .heading-sub12 {
       font-size: 18px;
       text-align: center;
   }


   .btn {
       animation: transitionIn-X 0.4s ease-out;
   }


   .popup {
       width: 90%;
       padding: 15px;
   }


   .input-text {
       font-size: 13px;
   }


   .dashboard-icons,
   .dashboard-icons-setting {
       margin-left: 10px;
       padding: 20px;
   }


   .search-items {
       flex-direction: column;
       padding: 10px;
       width: 100%;
   }


   .menu-btn {
       padding: 10px;
   }


   .menu-text {
       font-size: 14px;
   }
}


@media screen and (max-width: 480px) {
   .profile-title {
       font-size: 18px;
   }


   .profile-subtitle {
       font-size: 14px;
   }


   .heading-main12 {
       font-size: 20px;
   }


   .heading-sub12 {
       font-size: 16px;
   }


   .btn {
       padding: 6px 15px;
       font-size: 14px;
   }


   .header-searchbar {
       width: 95%;
   }


   .popup {
       width: 95%;
       padding: 10px;
   }


   .dashboard-icons,
   .dashboard-icons-setting {
       padding: 15px;
   }


   .menu-btn {
       padding: 8px;
   }


   .menu-text {
       font-size: 13px;
   }
}