@charset "utf-8";
/* CSS Document */

/* Table of Contents
-----------------------------------------------------------------------------
1. Mobile
2. Large Mobile
3. iPad
4. Desktop
5. Large Desktop
6. Other
*/


/* 6. Other media-query
------------------------------------------------------------------------------*/
@media only screen and (max-width: 1679px) {
  .chain-slider-section .item-box {padding: 15px 35px 15px 15px;}
}

/* 5. large desktop responsive css 1200px
------------------------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {
  /* category-section */
  .category-section .owl-theme .owl-nav button.owl-prev{left: -13px;}
  .category-section .owl-theme .owl-nav button.owl-next{right: -13px;}
}


/* 4. large desktop responsive css 1023px
------------------------------------------------------------------------------*/
@media only screen and (max-width: 1023px) {
  
  .sidebar {max-width: 240px;}
  .sidebar .sidebar-links-box .title-block h5{font-size: 18px;}
  /* footer */
  footer .footer-right{width: 55%;}

  .content-area {max-width: calc(100% - 270px); padding: 25px 20px 25px 0;}
  .topics-section.group-section {margin-bottom: 20px;}
  .topics-section .title-block h2 {font-size: 20px;}

  .comman-table .title-block {display: block;}
  .comman-table .title-block h2 {margin-bottom: 10px;}
  .comman-table .right-section {max-width: 100%;}
  .comman-table .table-result-section {display: inline-block; width: 100%;}
  .comman-table .entry-section {text-align: center; margin: 10px 0 15px;}
  .comman-table .pagination-section {max-width: 100%; margin: 0 auto; justify-content: center;}

  .comman-table.user-access-table-section .title-block {display: flex;}
  .comman-table.user-access-table-section .title-block h2 {margin-bottom: 0;}
  .comman-table.user-access-table-section .right-section {max-width: 50%;}

  /* edit popup */
  .edit-modal-popup .modal-dialog {max-width: 670px;}

  .dataTables_wrapper .dataTables_paginate .paginate_button {min-width: 34px; padding: 0.4em 0.6em;}

  /* upload popup */
  .upload-modal-popup .modal-dialog {max-width: 90vw;}
    .bulk-upload-modal-popup .modal-dialog {
        max-width: 90vw;
    }
}

/* 3. iPad responsive css 767px
------------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  /* hamburger */
  .hamburger{display: block;}

  /* header */
  header{height: 60px;}
  header .logo{max-width: 105px;}
  header nav {display: none;}
  header .notification-link img {max-width: 26px;}

  header .header-left {display: flex; align-items: center; }
  header .notification-link {display: none;}
  header .profile-box {padding: 0 20px 0; border-left: 0;}
  header .profile-box::after {width: 8px; height: 4px;}
  header .profile-box .img-block {width: 28px; height:  28px;}
  header .profile-box .username {display: none;}
  header .profile-box .profile-dropdown {width: 180px; top: calc(100% + 4px); right: -20px; left: unset; }

  /* footer */
  footer{padding: 40px 0 20px;}
  footer .container{grid-gap: 40px; flex-direction: column;}
  footer .footer-left{width: 100%; order: 2;}
  footer .footer-left .logo{max-width: 155px; margin-bottom: 25px;}
  footer .footer-left ul{margin-bottom: 20px;}
  footer .footer-left .copyright-block{padding-top: 15px;}
  
  footer .footer-right{width: 100%;}
  footer .footer-right .title-block{margin-bottom: 25px;}
  footer .footer-right .title-block h6{font-size: 22px;}
  footer .footer-right form .input-box-group{grid-gap: 15px; margin-bottom: 20px;}

  .sidebar{position: fixed; width: 100%; height: 100vh; background: #fff; left: -250px; top: 0; z-index: 99999; transition: 0.3s all linear;}
  .sidebar.open{left: 0;}
  .sidebar .sidebar-inner {justify-content: flex-start;}
  .sidebar .sidebar-inner .nav-header{display: block;}

  .content-area {max-width: 100%; padding: 25px 20px;}

  .topics-section .group-box .item-box {max-width: calc(100% / 3 - 10px); margin: 0 5px 10px;}

  .upload-area {padding: 30px 0;}
  .upload-area .drop-zoon {padding: 45px 20px;}
  .upload-area .drop-zoon__icon {max-width: 60px; width: 100%; margin-bottom: 10px;}
  .upload-area .drop-zoon__icon img{width: 100%;}
  .upload-area .drop-zoon__paragraph {font-size: 14px; margin-bottom: 5px;}

  .comman-table .title-block h2 {font-size: 18px;}

  .slef-bi-section {padding: 30px 0;}

  .modal .modal-dialog {max-width: 90%; margin: 1rem auto;}
  .modal .modal-content {padding: 15px;}
  .modal .modal-header {padding: 0 0 10px;}
  .modal .modal-title {font-size: 17px;}
  .modal .btn-close {width: 22px; height: 22px; font-size: 9px;}
  .modal .modal-body {padding: 15px 0 0;}

  /* edit popup */
  .edit-modal-popup input[type="date"] {max-width: 100%;}
  .edit-modal-popup .icon-calendar img {right: 15px;}  
  .edit-modal-popup .btn {max-width: 100%;}
  .edit-modal-popup .btn.btn-secondary {margin-left: 0; margin-top: 10px;}

  .dataTables_wrapper .dataTables_paginate .paginate_button {min-width: 12%; margin-left: 5px; padding: 0.3em 0.4em;}
  .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
  .dataTables_wrapper .dataTables_paginate .paginate_button.next{width: 100%; margin: 5px;}


  /* delete popup */
  .delete-modal-popup .modal-body {padding: 0;}
  .delete-modal-popup .btn {max-width: 46%;}

  /* upload popup */
  .upload-area .file-details .file-details__title {font-size: 14px;}
}

/* 2. Large Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media only screen and (max-width: 640px) {
  h5{font-size: 18px;}
  /* header */
  header{height: 55px;}
  header .logo{max-width: 98px;}

  .topics-section .title-block h2{font-size: 18px;}
  .topics-section .group-box .item-box {max-width: calc(100% / 2 - 10px); margin: 0 5px 10px;}

  .chain-slider-section .title-block h2{font-size: 17px;}
  .comman-table .title-block h2{font-size: 17px;}

  .upload-area .upload-area__title {font-size: 18px;}

  
}

/* 1. Mobile responsive css 480px
------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {

  .topics-section .group-box .item-box {max-width: 100%;}

  .chain-slider-section .item-box {max-width: 100%; min-height: 100px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column;}
  .chain-slider-section .item-box .badge {margin: 0 auto 5px 0;}
  .chain-slider-section .item-box h6 {margin: 0 auto 0 0;}

  .delete-modal-popup .action-content {max-width: 90vw;}
    .comman-table .custom-table-wrapper {
        width: 100%;
        overflow-x: auto;
    }
}