@media screen and (max-width: 1040px) {

    #side-bar.active {
        width: 220px;
    }

    #side-bar.active ~ #content {
        width: calc(100% - 220px);
        left: 220px;
    }

    .c label {
        font-size: 12px;
        font-weight: bold;
        text-align: center;
    }

    .chart-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100%));
        grid-template-rows: none;
        grid-template-areas:
            "c1 c1 c2 c2"
            "c3 c3 c4 c4";
        max-height: 100%;
        width: 100%;
    }

    .dataTables_info {
        font-size: 10px;
    }

    .dataTables_length label{
        font-size: 11px;
    }
    
    .dataTables_length select{
        max-height: 22px;
        font-size: 10px;
    }
    
    .dataTables_filter label{
        font-size: 11px;
    }
    
    .dataTables_filter input{
        max-height: 20px;
        font-size: 11px;
    }

    .c td {
        font-size: 10px;
    }

    .c th {
        font-size: 11px;
        width: 30%;
    }

    .paginate_button {
        font-size: 10px;
    }

    .cite {
        font-size: 14px;
    }

}

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

    #side-bar .icon {
        width: 60px;
        height: 70px;
        background-color: var(--background-color3);
    }

    #side-bar .sidebar-header h4 {
        font-size: 12px;
        width: 200px;
        color: #ffffff;
        font-weight: 500;
    }

    #side-bar h5 {
        font-size: 13px;
    }

    #side-bar ul li label {
        font-size: 13px;
    }

    .main_content .dash-head h3 {
        font-size: 15px;
    }

    .cite {
        font-size: 12px;
    }

    #content .main_content .card-score .box-scorecard {
        width: 100%;
    }

    .chart-grid {
        width: 90%;
        /* height: 100vb; */
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        grid-template-rows: none;
        grid-template-areas:
            "c1"
            "c2"
            "c3"
            "c4";
        gap: 25px;
        margin-bottom: 15px;
    }

    .c {
        width: 100%;
        /* height: 210px; */
    }

    .c canvas {
        height: auto !important;
    }

    .c label {
        font-size: 12px;
    }

    .c .chart-wrapper {
        padding: 3px 0;
    }

    .c th{
        font-size: 8px;
    }

    .c td{
        font-size: 8px;
    }

    .title-menu h3 {
        font-size: 15px;
    }

    .container {
        display: flex;
        flex-direction: column;
    }
    

    .analytics-box p {
        font-size: 12px;
    }

    .dataTables_wrapper .dataTables_filter {
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .dataTables_info {
        font-size: 10px;
    }

    td {
        font-size: 10px;
    }

    th {
        font-size: 15px;
        width: 30%;
    }

    .paginate_button {
        font-size: 12px;
    }

    .conc-recom li {
        font-size: 15px;
    }

    .conc-recom2 li {
        font-size: 15px;
    }

    .socialIcn {
        font-size: 13px;
    }

}

@media screen and (max-width: 576px) {

    #side-bar.active {
        width: 100%;
    }

    #side-bar{
        width: 55px;
        padding: 15px 9px;
        display: flex; 
        flex-direction: column;
    }

    #side-bar .sidebar-header .toogle-btn {
        font-size: 22px;
    }

    li .list-item .icon2{
        width: 20px;
        height: 20px;
    }

    #content{
        width: calc(100% - 55px);
        left: 55px;
    }

    #side-bar.active ~ #content {
        width: calc(100% - 55px);
        left: 100%;
    }

    #content .head-main form .searchbar input {
        display: none;
    }

    #content .head-main form .searchbar .searchbtn {
        width: auto;
        height: auto;
        background: transparent;
        border-radius: none;
    }

    #content .head-main form.show .searchbar input {
        display: block;
        width: 100%;
    }

    #content .head-main form.show .searchbar .searchbtn {
        width: 36px;
        height: 100%;
        border-radius: 0 35px 35px 0px;
        background-color: red;
    }

    #content .head-main form .searchbar .searchbtn {
        color: #3375F4;
    }

    #content .head-main form.show~.profile {
        display: none;
    }

    #content .main_content{
        padding: 10px;
    }

    #content .main_content .dash-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    #content .main_content .card-score .box-scorecard {
        width: 90%;
        height: 70px;
    }

    .value span{
        font-size: 15px;
    }

    .value label{
        font-size: 9px;
    }

    .chart-grid {
        width: 100%;
        height: auto;
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        grid-template-rows: none;
        justify-items: center;
        grid-template-areas:
            "c1"
            "c2"
            "c3"
            "c4";
        gap: 15px;
        margin-bottom: 0%;
    }

    .c {
        width: 100%;
        /* height: 100%; */
    }

    .c label {
        font-size: 10px;
    }

    .c table{
        margin-top: 5px;
    }

    .cite {
        font-size: 10px;
    }

    .dataTables_info {
        font-size: 7px;
    }

    .dataTables_filter input{
        max-width: 110px;
    }

    .paginate_button {
        font-size: 7px;
    }

    .title-menu h3 {
        font-size: 15px;
        ;
    }

    .analytics-box h4 {
        font-size: 9px;
    }

    .analytics-box p {
        font-size: 6px;
    }

    table td {
        font-size: 6px;
    }

    table th {
        font-size: 9px;
        width: 30%;
    }

    .C-R h4 {
        font-size: 12px;
    }

    .C-R .judul-cr {
        font-size: 13px;
    }

    .conc-recom li {
        font-size: 7px;
    }

    .conc-recom2 li {
        font-size: 7px;
    }

    .socialIcn {
        font-size: 10px;
    }

}