/*--------------------------------------------

    Template Name: srtdash - Bootstrap 4 Admin and Ui Kit
    Template URI: http://tf.itech-theme.com/srtdash-preview
    Description: This is Bootstrap 4 Admin Template and Ui Kit
    Author: cdibrandstudio
    Author https://themeforest.net/user/cdibrandstudio
    Version: 1.0

----------------------------------------------
    
    CSS INDEX
    ===================
  
    1. Core Css
    2. Dashboard One
        2.1 Sidebar Menu
            2.1.1 Horizontal Menu
        2.2 Header Area
        2.3 Page Title Area
        2.4 Fact Area
        2.5 Overview
        2.6 Market value
        2.7 Live Crypto Price
        2.8 Trading History
        2.9 Letest Post
    3. Dashboard Two
    4. Dashboard Three
    5. Bar Chart
    6. Line Chart
    7. Pie Chart
    8. Accroding
    9. Alert
   10. Badge
   11. Button
   12. Cards
   13. Dropdown Button
   14. List Group
   15. Modal
   16. Pagination
   17. Form
   18. Icons
   19. Table Basic
   20. Datatable
   21. Map
   22. Invoice
   23. Login
   24. Pricing
   25. 404 Page
   26. Offset Sidebar

-----------------------------------------------------------------------------------*/
/*------------------------- 1. Core Css -------------------*/

/* Button ----*/
 * {
    color: black; 
   }
   
.btn-default {
   background-color: #f4f4f4;
   color: #444;
   border-color: #ddd;
}
.btn-default:hover {
   background-color: #e5e5e5;
 }
 
 .btn-primary {
   background-color: #3c8dbc;
   border-color: #367fa9;
}
   /* Popup Overlay */
.popup {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

/* Popup Box */
.popup-content {
    background: #fff;
    width: 60%;
    max-width: 700px;
    margin: 5% auto;
    border-radius: 6px;
    animation: popupFade 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Header */
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Body */
.modal-body {
    padding: 20px;
}


/* Close Button */
.close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* Animation */
@keyframes popupFade {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .popup-content {
        width: 90%;
        margin-top: 15%;
    }
}

/* Additinol css */

.modal-header h4 {
  margin: 0;
  font-size: 18px;
}
 
.box-header{
    color: #444;
    display: block;
    padding: 20px;
    position: relative;
    margin-right:-5px;
	margin-left:0px;
}
/* Footer */
.modal-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-align: right;
   border-top: 1px solid #e5e5e5;
   padding-bottom: 10px;
   margin-bottom: 0px;
  
}

  a:hover {
   color: #ef7f4d;
   text-decoration: none;
  }
   
  /* Nav-buttun  */

/* Nav-buttun adjustment *
.nav-btn {
        position: fixed;
        z-index: 99;
        left: 363px;
        background: #303641;
        padding: 14px;
        top: 0;
        margin: 0;
    }

 .nav-btn span {
        background: #fffbfb;
    }
       
    /*-------------------- 2.2 Header Area -------------------*/
    /*.header-area {
    padding: 15px 30px;
    background: #fff;
    border-bottom: 1px solid #d8e3e7;
    }*/
   .nav-btn {
    position: initial;
    background: none;
    padding: 0;
    margin: 0px 30px 0 0;
    }
    /* Admin title */
   .admin-title h2 {
    margin: 0;
    color:blue;
    font-style:italic;
     }
    .openbtn {
      background-color: var(--color-primary);
      border: none;
      border-radius: var(--radius);
      padding: 0.5rem 0.9rem;
      cursor: pointer;
      box-shadow: 0 2px 6px var(--color-shadow);
      transition: background-color 0.3s ease, transform 0.15s ease;
      user-select: none;
      z-index: 0;
    }
    .side-bar .closebtn {
      position: absolute;
      top: 0;
      right: 0px;
      font-size: 36px;
      color: rgba(224, 228, 233, 0.75);
      margin-left: 50px;
    }
     /* The sidebar Meny */
    .side-bar {
      height: 100vh; /* Full height */
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color:rgb(29, 78, 158);
      overflow-x: hidden;
      transition: 0.5s;
    }
      /* Sidebar header */
    .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 18px 20px ;
    background-color:rgb(29, 78, 158);
    }
     /* Sidebar header Logo*/
    .logo2 {
      width: 150px;
      height: 40px;
      object-fit: contain;
    }

     .side-bar a {
      padding: 8px 20px;
      text-decoration: none;
      font-size: 18px;
      color: rgba(224, 228, 233, 0.75);
      display: block;
      transition: 0.3s;
    }
      /* Side-bar Footer Hover */
    .side-bar a:hover {
      color: #f1f1f1;
    }

    /*Side-bar Icon color*/
    .nav-link .icon{
    margin-right: 10px;
    font-size: 20px;
    color: rgba(224, 228, 233, 0.75);
    }
    .nav-link .pull-right{
    padding-top:4px;
    margin-right: 4px;
    font-size: 25px;
    color: rgba(224, 228, 233, 0.75);
    }
     .nav-link .link {
    font-size: 16px;
    color: rgba(224, 228, 233, 0.75);
    font-weight: 400;
    }
.nav-btn .menu-icon {
    font-size: 24px;         /* Size of the icon */
    color: #b3aaaa;            /* Icon color */
    cursor: pointer;         /* Cursor changes to pointer on hover */
     transition: color 0.3s;  /* Smooth color transition */
    }
   /* Footer styles */
   .footer-content {
   position: absolute;
   bottom: 0;
   width: 100%;
   padding: 11px 20px 11px 1px;
   background-color: rgb(29, 78, 158);
   color: #818181;
   border-top: 1px solid #343e50;
   }

   .footer-content a:hover .icon {
    color: #f1f1f1;
    }
     .lists .nav-link:hover {
     background: rgba(255, 255, 255, 0.2);
     }

     /*collapse Icon Rotate Css Start*/
    .collapse-toggle .caret{
      transition: transform 0.3s ease;
    }
    .collapse-toggle[aria-expanded="true"] .caret {
      transform: rotate(180deg);
    }
      /*collapse Icon Rotate Css Start*/
    .nav-link.collapse-toggle:hover .caret {
    color: #f1f1f1;
    }
    /* Navbar and Dropdown Css */
 .navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}
.navbar .dropdown ul {
  display: block;
  position: absolute;
  right: 1px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 15px;
  font-size: 15px;
  text-transform: none;
}

.navbar .dropdown ul a i {
  font-size: 15px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: #eb5d1e;
}
.navbar .dropdown ul a {
  color:rgb(52, 48, 47);
}
.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
  
}
 .navbar a, .navbar a:focus {
  align-items: center;
  padding-top: 9px;padding-right: 0px;
  padding-bottom: 9px;padding-left: 8px;font-size: 15px;
  white-space: nowrap;transition: 0.3s;display: block;}

/* Dropdown Css End */
    /* Add New  ---*/
    .box-header{
     padding-top:20px;  /* Optional: spacing inside the header */
     padding-right:15px;  /* Optional: spacing inside the header */
     padding-left:15px;  /* Optional: spacing inside the header */
     padding-bottom:10px;  /* Optional: spacing inside the header */
     margin-right:0px;
     border-bottom: 1px solid #ccc; /* Light gray bottom border */
     background-color: #fff;      /* Optional: header background */
    }