@media only screen and (max-width: 400px) {
    #template > .header .information-test .top-section .info-tag > .tag{
        font-size: 13px;
    }
}
@media only screen and (max-width: 768px) {
    #template html,
    #template body,
    #template H1,
    #template h2,
    #template h3,
    #template h4,
    #template h5,
    #template h6,
    #template span,
    #template label,
    #template button,
    #template input,
    #template p,
    #template small,
    #template strong,
    #template table,
    #template th,
    #template td,
    #template div,
    #template textarea,
    #template select,
    #template option ,
    #template div ,
    #template section ,
    #template aside,
    #template footer {
        font-size: 16px;
    }
    #template h2{
        font-size: 24px;
        font-weight: 900;
        color: #334155;
        border-bottom:2px solid #D7D7D7 ;
        margin: 10px 0 20px 0;
        line-height: 48px;
    }
    #template h3{
        font-size: 22px;
        font-weight: 900;
        color: #334155;
        margin: 10px 0 20px 0;
        line-height: 44px;
    }
    #template h4{
        font-size: 20px;
        font-weight: 900;
        color: #334155;
        border-right: 4px solid #FF8917;
        padding-right: 5px;
        margin: 10px 0 20px 0;
        line-height: 40px;
    }
    #template h5{
        font-size: 18px;
        font-weight: 900;
        color: #334155;
        margin: 10px 0 20px 0;
        line-height: 36px;
    }
    #template p{
        font-size: 16px;
        line-height: 32px;
        font-weight: 500;
        color: #505050 ;
        margin: 10px 0;
    }

    #template {
        padding: 5px;
    }
    #template > .header {
        flex-direction: column;
        padding: 15px 30px !important;
    }
    #template > .header .information-test{
        height: unset !important;
    }
    #template > .header .information-test .top-section {
        flex-direction: column;
        text-align: center;
    }
    #template > .header .information-test .top-section .title {
        margin: 10px 0;
    }
    #template > .header .information-test .bottom-section {
        flex-direction: column;
    }
    #template > .header .information-test .bottom-section .advance-box {
        width: 100%;
        margin: 10px 0;
    }
    #template > .header .information-test .bottom-section div#tools {
        width: 100%;
        margin: 5px 0;
    }

    #template .toggle-catalog {
       display: none;
    }

    #template .tools-box-mobile {
        display: flex;
        position: fixed;
        top: -100%;
        right: 0px;
        width: 100%;
        flex-direction: row-reverse;
        background: #334155;
        color: white;
        z-index: 10;
        border-bottom: 1px solid #fff;
    }
    #template .tools-box-mobile.active{
        top: 0;
    }
    #template .tools-box-mobile > div {
        width: 100%;
        text-align: center;
        padding: 5px 0;
        cursor: pointer;
    }
    #template .tools-box-mobile > div {
        border-right: 1px solid #ccc;
    }
    #template .tools-box-mobile > div:last-child {
        border-right: none;
    }

    #template .advance-box-mobile {
        position: fixed;
        bottom: -100%;
        background: white;
        right: 0;
        width: 100%;
        display: block;
    }
    #template .advance-box-mobile .header {
        border-bottom: 1px solid #ccc;
        padding: 10px;
        position: relative;
    }
    #template .advance-box-mobile .header .title{
        font-size:18px
    }
    #template .advance-box-mobile .header .close {
        position: absolute;
        left: 10px;
        top: 10px;
        cursor: pointer;
    }
    #template .advance-box-mobile > .content {
        list-style: none;
        padding: 0 10px;
        margin: 0;
    }
    #template .advance-box-mobile > .content li {
        border-bottom: 1px solid #e4e4e4;
        padding: 10px 0;
        position: relative;
    }
    #template .advance-box-mobile > .content li div{
        font-size: 16px;
    }
    #template .advance-box-mobile.active{
        bottom: 0;
    }

    #template .advance-box-background {
        position: fixed;
        width: 100%;
        height: calc(100% - 141px);
        top: -100%;
        backdrop-filter: blur(6px);
        background: #3a3a3a3b;
        z-index: 999;
        left: 0;
    }
    #template .advance-box-background.active{
        top: 0;
    }
    #template .advance-box-mobile > .content li.active{
        color: green;
    }
    #template .advance-box-mobile > .content li.active:before {
        content: url(../icons/checked-g.svg);
        width: 20px;
        height: 20px;
        position: absolute;
        left: 7px;
    }


    #template div#sec_2 .category-4-group img {
        width: 40px;
    }
    #template div#sec_2 .category-4-group span{
        font-size: 14px;
    }
    #template .tags-weaknesses .weaknesses {
        width: 46%;
    }
    #template .card-green h3 {
        font-size: 26px;
    }
    #template .card-green h5 {
        font-size: 25px;
    }
    #template .box-tags-gray .tag-gray {
        width: 48%;
        font-size: 18px !important;
    }
    #template .box-danger h4 {
        font-size: 28px;
    }

    #template .tag-gray {
        padding: 5px 10px;
        font-size: 16px;
        margin-left: 5px !important;
    }

    #template .books .book{
        flex-direction: column;
    }
    #template .books .book img{
        margin: 0 auto;
    }
    #template .types {
        background: #EAF8F5;
        padding: 10px 10px;
    }
    #template .types .types-button.d-flex.flex-wrap > div {
        width: 22.5%;
    }
    #sec_1 > div .p-5.card.card-shadow {
        padding: 10px !important;
    }
    #template #my-code {
        display: flex;
        flex-direction: column;
    }
    #template #my-code .code .copy-text {
        margin-right: 10px;
    }
    #template #my-code .code #code, #template #my-code .title {
        font-size: 17px !important;
    }
    #template #my-code {
        display: flex;
        flex-direction: column;
        padding: 10px 10px;
    }
    #template #my-code .code .copy-text img {
        width: 20px;
    }
    .chart-one-custom > .labels .label-bottom {
        padding: 3px 3px 0;
        min-width: 40px !important;
    }


    #template .boxes-green > .header.boxes-green .box {
        font-size: 14px;
    }
    #template  .boxes-green * {
        font-size: 15px !important;
    }

    main#template .chart-two-custom .main > div.box-green {
        font-size: 14px !important;
    }
    #template .chart-two-custom  .col-6 , #template  .boxes-green .col-4 , #template  .boxes-gray .col-4 , #template  .boxes-green .col-5 {
        padding: 1px;
    }
    #template .chart-two-custom > .col-5.side-box{
        width: 35%;
    }
    #template .chart-two-custom > .col-7.main-box{
        width: 65%;
    }
    #template .chart-two-custom {
    width: calc(100% + 50px);
    right: -10px;
    position: relative;
}


    #template .boxes-gray > .header.boxes-gray .box {
        font-size: 14px;
    }
    #template  .boxes-gray * {
        font-size: 15px !important;
    }


    #template .progress-bar-two .label * {
        font-size: 12px !important;
    }
    #template .progress-bar-two .label > div{
        width: 25%;
    }
    main#template .suggest-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
    }


    .box-123 .number {
        width: 70px !important;
        font-size: 20px !important;
    }

    #template .card-green-light {
        background: rgba(42, 187, 156, 0.08);
        padding: 5px 5px;
        border-radius: 10px;
        font-size: 13px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #template .card-green-light *{
        font-size: 13px !important;
    }
    #template .card-title-icon {
        padding: 5px !important;
        margin: 30px 0;
    }
    #template .card-gray.card-title-icon .warning p , #template .card-warning p{
        font-size: 14px !important;
        margin: 0;
    }

    #template .DSM5-box .head .icon {
        min-width: 70px;
        width: 70px;
        height: 70px;
        background: #2ABB9C;
        border-radius: 50px;
    }
    #template .DSM5-box {
        padding: 30px !important;
    }

    #template  .time-box-m {
        flex-direction: column;
    }
    #template .time-box-m > div {
        width: 100%;
        min-width: 100%;
    }
    #template .time-box-m > div .time-box {
        background: #2ABB9C;
        padding: 15px 40px;
        border-radius: 10px;
        color: white;
        width: 250px;
    }
    #template .card-title-icon .title::before {
        top: 5px;
    }
    #template  .en-font {
        font-family: arial !important;
        height: 32px;
    }
    #template  .dv-attachment-content {
        justify-content: center;
    }
    #template .percent-label {
        font-size: 10px !important;
    }
}