@media only screen and (max-width: 768px) {
    .d-mobile {
        display: unset !important;
    }

    .d-mobile.f {
        display: flex !important;
    }

    .d-desktop {
        display: none !important;
    }

    #Template h2 {
        font-size: 20px;
    }

    #Template h3 {
        font-size: 19px;
        font-weight: 800;
    }

    #Template h3::before {
        transform: scale(.8);
        top: -20%;
    }

    #Template h4 {
        font-size: 18px;
        font-weight: 700;
    }

    #Template h4::before {
        transform: scale(.8);
        top: -20%;
    }

    #Template h5 {
        font-size: 17px;
        font-weight: 700;
    }

    #Template h5::before {
        transform: scale(.8);
        top: -20%;
    }

    #Template h6 {
        font-size: 16px;
        font-weight: 700;
    }

    #Template h6::before {
        transform: scale(.8);
        top: -20%;
    }

    #Template p , #Template p span {
        color: #3A3A3A;
        font-size: 16px;
        line-height: 32px;
        text-align: justify;

    }

    #Template header {
        flex-direction: column;
        align-items: center;
        padding: 20px 10px;
    }

    #Template header .information .details {
        flex-direction: column;
        margin-top: 10px;
    }

    #Template header .information .details h1 {
        margin-bottom: 12px;
    }

    #Template header .information #tools {
        overflow: scroll;
        padding-bottom: 15px;
        margin: 0 -15px;
    }
    #Template header .information .main-tools{
        position: relative;
    }
    #Template header .information .main-tools .arrow {
        position: absolute;
        left: 0;
        z-index: 1;
    }
    #Template header .information .main-tools > .arrow::before {
        content: url("data:image/svg+xml,%3Csvg width='58' height='40' viewBox='0 0 58 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_b_5802_1478)'%3E%3Crect width='58' height='45' fill='white' fill-opacity='0.6'/%3E%3C/g%3E%3Cpath d='M24.3536 28.7376L19 23.3688L24.3536 18' stroke='%233A3A3A' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M35 28.7376L29.6464 23.3688L35 18' stroke='%233A3A3A' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3Cfilter id='filter0_b_5802_1478' x='-2' y='-2' width='62' height='49' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='1'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_5802_1478'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_5802_1478' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
        position: absolute;
        left: -23px;
        top: -4px;
    }

    #Template header .information #tools .tool {
        border-color: #F8F9FC !important;
        border-radius: 50px !important;
        min-width: 100px;
        min-height: 35px;
        display: flex !important;
        align-items: center;
    }

    #Template header .information .details .information-user > .info {
        background: transparent;
        padding: 5px 0px;
        position: relative;
        font-size: 12px;
        text-align: center;
        color: rgba(51, 65, 85, 0.6);
    }

    #Template header .information .details .information-user > .info:nth-child(1) {
        width: 15%;
    }

    #Template header .information .details .information-user > .info:nth-child(2) {
        width: 15%;
    }

    #Template header .information .details .information-user > .info:nth-child(3) {
        width: 70%;
    }

    #Template header .information .details .information-user > .info:before {
        content: '';
        width: 1px;
        height: 65%;
        background: rgba(51, 65, 85, 0.4);
        position: absolute;
        left: -4px;
    }

    #Template header .information .details .information-user > .info:last-child:before {
        display: block;
    }

    #Template header .information .details .information-user > .info:first-child:before {
        display: none;
    }

    #Template header .information #tools .tool .label {
        text-align: center;
        font-weight: 400;
        margin-top:0;
    }

    #Template header .information .details .information-user {
        display: flex;
        width: 100%;
        justify-content: space-around;
    }

    #Template header .information #tools .tool.Index {
        margin: unset;
        background: #3A3A3A;
        color: white;
        border: 4px double #3a3a3a;
    }

    #Template header .information #tools .tool.Index .icon {
        background: #3A3A3A;
    }

    #Template header .information #tools .tool .icon {

        background: unset !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;

    }

    #Template header .information #tools .tool.Share {
        min-width: 185px;
    }


    #Template header .information #tools .tool.Index {
        min-width: 160px;
    }

    #Template header .information #tools .tool.PDF {
        min-width: 160px;
    }

    #Template header .information #tools .tool.Comment {
        min-width: 120px;
    }

    #Template header .information #tools .tool.Pro {
        min-width: 200px;
    }

    #Template header .information #tools .tool.ReTest {
        min-width: 170px;
    }

    #Template header .information #tools .tool.PDF .icon svg * {
        stroke: #3A3A3A !important;
    }

    #Template header .information #tools .tool.Share .icon svg * {
        stroke: #3A3A3A !important;
    }

    #Template header .information #tools .tool.Comment .icon svg * {
        stroke: #3A3A3A !important;
    }

    #Template header .information #tools .tool.ReTest .icon svg * {
        stroke: #3A3A3A !important;
    }

    #Template header.sticky {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9;
        padding: 10px;
        right: 0;
        border-bottom: 1px solid #D7E4EE;
    }

    #Template header.sticky img, #Template header.sticky .information .details, #Template header.sticky .information hr {
        display: none;
    }

    #Template header.sticky .information #tools {
        padding-bottom: 0 !important;
    }

    #Template > main {
        padding: 0;
    }

    #Template main li::before {
        content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.94266 2.08333C3.991 2.08333 2.0835 4.10516 2.0835 7.23533V16.7647C2.0835 19.8948 3.991 21.9167 6.94266 21.9167H17.0553C20.0082 21.9167 21.9168 19.8948 21.9168 16.7647V7.23533C21.9168 4.10516 20.0082 2.08333 17.0565 2.08333H6.94266ZM17.0553 23.6667H6.94266C2.98883 23.6667 0.333496 20.8923 0.333496 16.7647V7.23533C0.333496 3.10766 2.98883 0.333328 6.94266 0.333328H17.0565C21.0103 0.333328 23.6668 3.10766 23.6668 7.23533V16.7647C23.6668 20.8923 21.0103 23.6667 17.0553 23.6667V23.6667Z' fill='%232ABB9C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.6161 15.6435C10.3932 15.6435 10.1681 15.5583 9.99772 15.3868L7.22805 12.6183C6.88622 12.2765 6.88622 11.7235 7.22805 11.3817C7.56989 11.0398 8.12289 11.0398 8.46472 11.3817L10.6161 13.5307L15.5347 8.61316C15.8766 8.27132 16.4296 8.27132 16.7714 8.61316C17.1132 8.95499 17.1132 9.50799 16.7714 9.84982L11.2344 15.3868C11.0641 15.5583 10.8401 15.6435 10.6161 15.6435' fill='%232ABB9C'/%3E%3C/svg%3E%0A");
        top: 2px;
    }

    .w-100-mobile {
        width: 100%;
    }

    #Template #ShareModal .main .socials .items a {
        width: 55px;
        height: 55px;
        margin: 4px;
    }

    #Template #ShareModal .main {
        max-width: 350px;
    }
    #Template #ShareModal .main h4 {
        font-size: 14px !important;
        text-align: right;
        color: #3A3A3A;
        margin-bottom: 8px;
        font-weight: 300;
        right: 0 !important;
        padding: 0;
    }

    /*     Custom In Interpretation */
    .e-selected-item-one.mt-3.mb-6.me-auto.ms-auto {
        margin: 0 !important;
        margin-bottom: 0px;
        width: 100%;
    }
    .e-progress-box-one.mt-6.mb-3 {
        padding: 15px;
    }
    .e-progress-box-one .progress-box .value-symbol{
        /*left:unset !important;*/
    }

}