:root {
   --red: #ec1f26;
}

body {
   min-height: 100vh;
}

body .btn-primary {
   background-color: var(--red);
   border-color: var(--red);
}

body .btn-primary:hover {
   background-color: var(--red);
   border-color: var(--red);
}

.text-primary {
   color: var(--red) !important;
}

body .btn-primary:active, body .btn-primary:focus {
   background-color: var(--red) !important;
   border-color: var(--red) !important;
}


.nav-link:not(.active) {
   color: var(--red) !important;
}

body .btn-outline-primary {
   color: var(--red);
   border-color: var(--red) !important;
}

body .btn.btn-outline-primary:hover {
   background-color: var(--red);
   color: #FFF;
}

body .btn.btn-outline-primary:active, body .btn.btn-outline-primary:focus {
   background-color: var(--red) !important;
   color: #FFF !important;
}

.box {
   padding: 40px;
   background-color: #FFF;
   border-radius: 8px;
   box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
}

.box:not(:last-child) {
   margin-bottom: 50px;
}

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

@media (max-width: 768px) {
   .tamas-main {
      padding: 20px;
   }

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

   .tamas-main .d-flex {
      flex-direction: column;
      align-items: flex-start !important;
   }

   .box {
      padding: 20px;
   }
}
  /************/
 /** HEADER **/
/***********/
.tamas-header {
   background-color: #FFF;
   padding: 15px 0;
}

.tamas-header-logo {
   width: 150px;
}

.active-dot {
   display: inline-block;
   width: 10px;
   height: 10px;
   background-color: #28a745; /* Green color for active status */
   border-radius: 50%;
   margin-left: 2px;
}

 .logout-btn {
   font-size: 14px;
}

@media (max-width: 768px) {
   .tamas-header {
      margin-bottom: 10px !important;
   }

   .tamas-footer {
      margin-top: 0px !important;
   }

   header .container {
      flex-direction: column;
      gap: 15px;
   }

   .tamas-header-logo {
      width: 120px;
   }
}

  /************/
 /** TABLE **/
/**********/

.active>.page-link, .page-link.active {
   background-color: var(--red);
   border-color: var(--red);
}

.table.dataTable {
   margin-top: 15px !important;
   margin-bottom: 15px !important;
}

#users-table .btn {
   font-size: 14px;
}

#list-view tr{
   border-bottom: 1px solid #ddd;
}

@media (max-width: 768px) {
   .dataTable .flex-wrap {
      flex-direction: row;
   }

   .admin-head-row, .admin-head-row > div {
      flex-direction: column;
      align-items: flex-start !important;
      margin-bottom: 15px;
   }

   .admin-head-row .btn-primary {
      margin-bottom: 15px;
   }

   .admin-head-row, .admin-head-row > div > div {
      margin: 0 !important;
   }

   .dataTables_length, .dataTables_filter, .dataTables_info {
      text-align: left !important;
      margin: 5px 0;
   }

   body div.dataTables_wrapper div.dataTables_paginate ul.pagination {
      justify-content: flex-start !important;
   }

   .table ul {
      width: 100%;
   }

   .datatable-controls {
      flex-direction: column-reverse;
      align-items: flex-start !important;
   }
}

@media (max-width: 500px) {
   #list-view {
      width: 100% !important;
   }
   #list-view thead th:nth-child(2), #list-view tbody td:nth-child(2) {
      display: none;
   }
}

  /*************/
 /** FOOTER **/
/***********/

footer .text-muted {
   font-size: 14px;
}

@media (max-width: 768px) {
   .tamas-footer .container {
      flex-direction: column;
      align-items: flex-start;
      text-align: flex-start;
   }

   .tamas-footer .col-6 {
      width: 100%;
   }
}