@media (max-width: 1024px)
{
    .no-resp {display: none !important;}
    .only-resp {display: block !important;}
    .tb-item-no-resp {display: none !important;}
}

@media (max-width: 820px)
{
    body {font-size: 12px;}
    table.dataTable td {font-size: 12px;}
}

@media (max-width: 500px)
{
    .tb-item-no-mobile {display: none !important;}
    h5 {font-size: 14px;}
    .admin-section .dashboard {width: 300px;height: 300px;}
    .form-element {min-height: 50px;}
    .form-element label span {top: 4px;}
    .form-element input,.form-element select {height: 30px;font-size: 12px;}
    .form-element button {font-size: 12px;}
    .form-element .eye {top: 28px;}
    .form-btn {font-size: 12px;margin-top: 10px;}
    .dt-buttons button {margin: 10px;font-size: 12px;}
    div.dataTables_wrapper div.dataTables_filter {float: unset;}
    div.dataTables_wrapper div.dataTables_filter input {font-size: 12px;}
    table.dataTable {margin: 20px 0 !important;}
    table.dataTable th,
    table.dataTable td{padding: 5px;}
    div.dataTables_wrapper div.dataTables_paginate ul.pagination li a {font-size: 10px !important;}
    div.dataTables_wrapper div.dataTables_length label select {font-size: 12px !important;margin-bottom: 20px;}
}


/*-------------------- LOGIN PAGE ----------------------------------------------------------------------*/

@media (max-width: 1200px)
{
    .login-container .logo {margin-left: 25%;}
    .login-container .login-form {margin-left: 25%;}
}

@media (max-width: 820px)
{
    .login-container .logo {width: 70%;margin-left: 15%;}
    .login-container .login-form {width: 70%;margin-left: 15%;}
}

@media (max-width: 500px)
{
    .login-container .logo {width: 100%;margin-left: 0%;}
    .login-container .logo img {width: 50%;}
    .login-container .login-form {width: 90%;margin-left: 5%;padding: 50px 20px;text-align: center}
}





/*-------------------- SIDE BAR ----------------------------------------------------------------------*/

@media (max-width: 1024px)
{
    .side-bar {left: -280px;box-shadow: 2px 2px 8px rgba(0,0,0,.1);z-index:12;}
}

@media (max-width: 500px)
{
    .side-bar {width: 200px;}
    .side-bar .user-area .user-avatar {width: 40px;height: 40px;border-radius: 20px;}
    .side-bar .user-area img {width: 40px;height: 40px;}
    .side-bar .user-area h2 {font-size: 12px;margin: 0;}
    .side-bar .user-area button {font-size: 12px;}
    .side-bar .user-area .dropdown-menu {top: 5px !important;left: 0px !important;padding: 20px 10px;min-width: 120px;}
    .side-bar .user-area .dropdown-menu a {padding: 5px 0px;font-size: 12px;}
    .side-bar .user-area .dropdown-menu a i {margin-right: 5px;}
    .side-bar .menu-area .menu-title {height: 30px;}
    .side-bar .menu-area .menu-title h2 {font-size: 12px;}
    .side-bar .menu-area .menu-items ul .menu-item {width: 100%;min-height: 40px;margin-bottom: 10px;}
    .side-bar .menu-area .menu-items ul .menu-item span {right: 10px;font-size: 10px;top: 12px;}
    .side-bar .menu-area .menu-items ul .menu-item a {height: 40px;padding: 10px 5px;font-size: 12px;}
    .side-bar .menu-area .menu-items ul .menu-item a i {font-size: 14px}
    .side-bar .menu-area .menu-items ul .menu-item a span {font-size: 12px;margin-left: 5px;}
    .side-bar .menu-area .menu-items ul li .sub-menu {padding: 40px 0 0 10px;height: 40px;}
    .side-bar .menu-area .menu-items .sub-menu .sub-menu-item {width: 150px;margin-bottom: 0px;}
    .side-bar .menu-area .menu-items .sub-menu .sub-menu-item a {font-size: 10px;padding: 0;line-height: 20px;}
    .side-bar .menu-area .menu-items ul li a i {margin-right: 2px;}
}





/*-------------------- TOP BAR ----------------------------------------------------------------------*/

@media (max-width: 1024px)
{
    .top-bar {padding: 0 35px;}
}

@media (max-width: 500px)
{
    .top-bar {padding: 0 20px;}
    .top-bar h2 {font-size:12px;}
}





/*-------------------- ADMIN SECTION ----------------------------------------------------------------------*/


@media(max-width: 1024px)
{
    .admin-section, .dashboard.participant {padding: 75px 35px;}
    .admin-section .main-content .edit-img {margin-bottom: 50px;}
}

@media(max-width: 820px)
{
    .admin-section .alert {padding: 75px;}
    .admin-section .alert:after {opacity: 1;}
    .admin-section .section-title h2 {font-size: 16px;}
    .admin-section .main-content {margin-top: 20px;}
    .admin-section .main-content .edit-img img {width: 80%;margin-left: 10%;}
    .admin-section .main-content .content-title h2 {font-size: 16px;}
    .admin-section .main-content .content-button a {font-size: 12px;}
    .admin-section .main-content .content-button a:hover {background: var(--primary-color);color: var(--white-color);border-color: var(--primary-color);}
    .admin-section .main-content .content-title p {font-size: 12px;}
    .admin-section .main-content .content .nav-tabs button {font-size: 14px;}
    .admin-section .main-content .content .tab-content {padding: 20px 10px;}
}

@media(max-width: 500px)
{
    .dashboard.participant {padding: 70px 10px}
    .dashboard.participant .status .data {font-size: 16px;}
    .dashboard.participant .info {padding: 20px;}
    .dashboard.participant .info .text {font-size: 15px;}
    .dashboard.participant .info .data {font-size: 18px;}
    .admin-section {padding: 70px 20px}
    .admin-section .error-text {bottom: -12px;font-size: 8px;}
    .admin-section .alert {width: 300px; padding: 75px 20px;text-align: center;}
    .admin-section .alert:after {opacity: 1;}
    .admin-section .section-title h2 {font-size: 16px;}
    .admin-section .main-content {margin-top: 20px;}
    .admin-section .main-content .edit-img {margin-bottom: 30px;}
    .admin-section .main-content .edit-img img {width: 100%;margin-left: 0%;}
    .admin-section .main-content .content-title {padding: 10px}
    .admin-section .main-content .content-title h2 {font-size: 12px;}
    .admin-section .main-content .content-button {padding: 10px;}
    .admin-section .main-content .content-button a {font-size: 12px;}
    .admin-section .main-content .content-title p {font-size: 12px;margin: 0;}
    .admin-section .main-content .content {padding: 10px;}
    .admin-section .main-content .content .nav-tabs button {font-size: 10px;}
    .admin-section .main-content .content .nav-tabs.tb-2 button {width: 50%;font-size: 12px;}
    .admin-section .main-content .content .nav-tabs.tb-3 button {width: 33%;font-size: 12px;}
    .admin-section .main-content .content .tab-content {padding: 10px;}
    .admin-section .main-content .content .sub-content {margin: 20px 0;padding: 20px;}
    .admin-section .payment-details .data .dt-1 {width: 230px;font-size: 10px}
    .side-bar.participants .menu-area .menu-items ul .menu-item span {top: 6px;}
    .note-editor.note-airframe
    .note-editing-area
    .note-editable,
    .note-editor.note-frame
    .note-editing-area .note-editable {padding: 10px !important;}
    .note-editor button {font-size: 10px !important;}
    .send-application-button p,
    .send-application-button a {font-size: 10px;}
    .side-bar .menu-area .menu-items ul .menu-item .part-error {top: 12px;}
}