/* Responsive CSS */

/** ================== | DESKTOP | ================== **/
@media screen and (max-width : 1400px) {
  .text-count p { font-size: 1.2rem; }
  .menu-sidebar { padding: 40px 15px; }
}

/** ================== | LAPTOP | ================== **/
@media screen and (max-width : 1200px) {
  .filter-container { width: calc(100% - 0); padding: 5px; }
  .uk-navbar { align-items: end; }
  .filter_menu-frame { width: calc(100% - 0); }
  .filter-container, .pagination-frame { width: calc(100% - 0); padding: 5px; }
  .text-count { position: absolute; top: -30px; }
  .uk-navbar-center:not(:only-child) { padding-bottom: 20px; position: relative; left: 0; transform: none; gap: 10px; }
}

/** ================== | TABLET | ================== **/
@media screen and (max-width : 960px) {
  .break { display:inline; }
  .responsive-logo { height: auto; }
  .mobile-slideout { background: var(--neut100); padding: 60px 20px; }
  .mobile-slideout .nav-logo-container { margin-bottom: 40px;}
  .mobile-copyright { color: var(--neut300); position: absolute; bottom: 0; padding: 0 20px 0 0; display: block; box-sizing: border-box; }
}

/** ================== | MOBILE | ================== **/
@media screen and (max-width : 780px) {
  #login-container, #signup-container, .logo-container { order: unset; margin-top: 10px; margin-bottom: 10px; }
  #signup-form, #login-form { width: 100%; }
  #signup-form label, #login-form label { width: 70px; }
  #center-div { width: 60vw; margin-top: 135px; margin-left: 135px; }
  .filter_menu-frame { width: calc(100%); }
  .auth-container { margin-left: 20%; }
  .section-rt-space { padding-right: 0; }
  .news-grid { grid-template-columns: 1fr; margin: 25px 20px; width: calc(100% - 40px); }
  .filter-container, .pagination-frame { width: calc(100% - 40px); }
  .nav-logo { width: 50px; padding-right: 5px; }
  .header-content { flex-direction: column; align-items: flex-start; }
  .filter-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
  .pagination-frame { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; }
  .spinner-loading { position: absolute; top: 45%; left: 45%; width: 50px; height: 50px; border: 4px solid transparent; border-top: 4px solid #5a89f0; }
  .spinner-loading::before, .spinner-loading::after { content: ''; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  border: 4px solid transparent; border-radius: 50%; }
  .spinner-loading::before { border-top: 4px solid rgb(0, 193, 207);  transform: rotate(120deg); }
  .spinner-loading::after { border-top: 4px solid rgb(179, 47, 220); transform: rotate(240deg); }
  .uk-button { padding: 0 20px; }
}

@media screen and (max-width : 680px) {
  #center-div { width: 60vw; margin-top: 135px; margin-left: 135px; }
  .responsive-logo { max-width: 100%; height: auto; }
  .filter_menu-frame { width: calc(100%); }
  .auth-container { margin-left: 20%; }
  .uk-button { padding: 0 14px; }
  .filter-button { font-size: 1.2rem; }
  .filter-off-button span { display: none; }
}

@media screen and (max-width : 480px) {
  .top-menu { padding: 10px 20px!important; }
  .filter-sort-btns { flex-direction: column; }
  .filter-sort-btns .uk-navbar-right { margin-left:inherit; }
  .grid-content { padding: 40px 20px; }
  .news-grid { margin: 25px 0; width: 100%; }
  #content-toggle-form { display: block;}
  #content-toggle-form::before { width: 100%; display: block; }
}








/* Define breakpoints for specific screen sizes */


/*
@media screen and (max-width: 768px) {

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    max-width: 50%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-title);
    color: #7a91aa;
    text-transform: uppercase;
    font-size: 1.4rem;
  }

  td .edit-form {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  td .edit-form input,
  td .edit-form button {
    margin: 0;
    padding: 5px;
    margin-bottom: 10px;
  }

  td .edit-form button {
    color: #FFFFFF;
    background-color: #35475E;
  }
}
*/



/* Mobile view 


@media (max-width: 867px) {
  .filter-container button {
    margin-top: 10px;
    width: 50%;
  }
}

@media (max-width: 867px) {
  .date-range form {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }

  .date-range label {
    font-size: 14px;
    margin: 0 1px 0 0;
  }

  .date-range label,
  .date-range input,
  .date-range select,
  .date-range button {
    margin-bottom: 10px;
  }

  .date-range label[for="start_date"],
  .date-range label[for="end_date"],
  .date-range label[for="category"] {
    width: 20%;
  }

  .date-range #start_date,
  .date-range #end_date,
  .date-range #category {
    width: 55%;
  }

  .date-range #filters-form button {
    width: 50%;
    box-sizing: border-box;
  }
}


@media (max-width: 824px) {
  .date-range form {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }

  .date-range label {
    font-size: 14px;
    margin: 0 1px 0 0;
  }

  .date-range label,
  .date-range input,
  .date-range select,
  .date-range button {
    margin-bottom: 10px;
  }

  .date-range label[for="start_date"],
  .date-range label[for="end_date"],
  .date-range label[for="category"] {
    width: 20%;
  }

  .date-range #start_date,
  .date-range #end_date,
  .date-range #category {
    width: 55%;
  }

  .date-range #filters-form button {
    width: 50%;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .date-range form {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }

  .date-range label,
  .date-range input,
  .date-range select,
  .date-range button {
    margin-bottom: 10px;
  }

  .date-range label[for="start_date"],
  .date-range label[for="end_date"],
  .date-range label[for="category"] {
    width: 20%;
  }

  .date-range #start_date,
  .date-range #end_date,
  .date-range #category {
    width: 55%;
  }

  .date-range #filters-form button {
    width: 50%;
    box-sizing: border-box;
  }
}


/* Responsive CSS for smaller screens 

@media (max-width: 992px) {
  .button {
    font-size: 18px;
    padding: 6px 10px;
    min-width: 35px;
  }
}

@media (max-width: 768px) {
  .button {
    font-size: 12px;
    padding: 3px 5px;
    min-width: 28px;
  }
}

@media (max-width: 576px) {
  .button {
    font-size: 10px;
    padding: 2px 3px;
    min-width: 20px;
  }

  .btn {
    --bs-btn-font-size: 0.7rem;
  }
}
  */