/** default-content-block in home page **/
.default-content-block {
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
        grid-template-areas: "text img";
    gap: 24px;
}

.default-content-block__image {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: img;
}

.default-content-block__image img {
    display: block;
    max-width: 100%;
    border-radius: 12px;
    margin-left: auto;
}

.default-content-block__decription {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: text;
}

@media only screen and (min-width: 1025px) {
    .default-content-block {
        -ms-grid-columns: minmax(auto, 461px) minmax(auto, 655px);
        grid-template-columns: minmax(auto, 461px) minmax(auto, 655px);
    }
}

@media only screen and (min-width: 1201px) {
    .default-content-block {
        -ms-grid-columns: minmax(auto, 540px) minmax(auto, 896px);
        grid-template-columns: minmax(auto, 540px) minmax(auto, 896px);
    }
}

@media only screen and (max-width: 1024px) {
    .default-content-block {
        -ms-grid-columns: 100%;
        grid-template-columns: 100%;
            grid-template-areas:
            "text"
            "img";
    }

    .default-content-block__image img {
        margin-left: auto;
        margin-right: auto;
    }
    .default-content-block__image {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }
    .default-content-block__decription {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
}

/** modifications **/
@media only screen and (min-width: 1025px) {
    #main-home-page-widget a.default-button {
        max-width: 55%;
    }
}

@media only screen and (max-width: 1024px) {
    #main-home-page-widget .default-content-block__decription {
        text-align: center;
    }
}

@media only screen and (max-width: 770px) {
    #main-home-page-widget.default-content-block {
        gap: 0;
    }

    #main-home-page-widget .default-content-block__image {
        display: none;
    }
}

@media only screen and (max-width: 400px) {
    #main-home-page-widget .default-content-block__decription a {
        width: 100%;
    }
}
/** end default-content-block **/

/* cards-container block in home page */
#cards-home-page-widget .cards-container {
    display: -ms-grid;
    display: grid;
    gap: 24px;
}

@media only screen and (min-width: 771px) {
    #cards-home-page-widget .cards-container {
        -ms-grid-columns: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr);
    }
}

#cards-home-page-widget .card-item {
    display: inherit;
    -ms-grid-rows: 62px 1fr;
    grid-template-rows: 62px 1fr;
}

#cards-home-page-widget .card-item .ui-card div {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

#cards-home-page-widget .card-item a {
    margin-top: auto;
}
/* end cards-container block */


/* related articles widget in single */
@media screen and (min-width: 1181px) {
    .related-articles__block {
        margin-bottom: 40px;
    }
}

.related-articles__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 14px;
}

@media only screen and (min-width: 577px) and (max-width: 1180px) {
    .related-articles__container {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    .related-articles__container > div {
       -webkit-box-flex: 1;
           -ms-flex: 1 1 50%;
               flex: 1 1 50%;
    }
    .related-articles__container > div a {
        margin-top: auto;
    }
}
/* related articles */

/* socials widget in single */
.socials__icons {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 20px;
    background: var(--white-color);
    border-radius: 8px;
    padding: 16px;
}

@media only screen and (max-width: 1180px) {
    .socials__block {
        display: none;
    }
}
/* end socials */

/* banner widget in single */
#banner-widget {
    border-radius: 8px;
    margin-top: 49px;
}

#content-widget + #banner-widget {
    margin-top: 24px;
}
/* end banner widget */

/* content_widget in single */
#content-widget {
    display: inline-block;
    font-size: var(--medium-font-size);
    line-height: var(--small-line-height);
    font-weight: var(--semibold-font-weight);
    color: var(--primary-text-color);
}

#content-widget > ul {
    max-height: 55vh;
    overflow: overlay;
    background: var(--white-color);
    border-radius: 12px;
    border-right: 8px solid var(--white-color);
    border-bottom: 24px solid var(--white-color);
    border-top: 18px solid var(--white-color);
    padding-right: 8px;
    padding-left: 18px!important;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    margin-top: 24px;
}

@media (-webkit-min-device-pixel-ratio: 1.5),
(-webkit-min-device-pixel-ratio: 1.5625),
(-o-min-device-pixel-ratio: 25/16),
(min-resolution: 150dpi) {
    #content-widget > ul {
        max-height: 44vh;
    }
}

#content-widget > ul::-webkit-scrollbar {
    width: 6px;
    background: var(--white-color);
    border-radius: 12px;
}

#content-widget > ul::-webkit-scrollbar-thumb {
    background-color: var(--additionl-blue-color);
    border-radius: 12px;
}

#content-widget ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 8px;
}

#content-widget ul li a {
    display: block;
    font-size: var(--smallest-font-size);
    line-height: var(--medium-line-height);
    color: var(--primary-text-color);
    font-weight: var(--regular-font-weight);
    border-radius: 4px;
    padding: 4px 8px;
    -webkit-transition: .1s linear;
    -o-transition: .1s linear;
    transition: .1s linear;
}

#content-widget ul li a:hover {
    background: var(--extra-light-blue-color);
}

#content-widget ul li a + ul {
    margin-top: 6px;
}
/* end content_widget */

/* search widget */
#search-widget {
    width: 100%;
    max-width: 718px;
}

@media screen and (min-width: 771px){
    .search-widget--small #search-widget {
        max-width: 426px;
        margin-left: auto;
    }
}

#ajaxsearchlite1 .probox, div.asl_w .probox {
    height: unset !important;
    -webkit-box-shadow: unset !important;
            box-shadow: unset !important;
    padding: 14px 18px !important;
}

.search-widget--small #ajaxsearchlite1 .probox, div.asl_w .probox {
    padding: 9px 12px !important;
}

@media screen and (max-width: 770px) {
    #ajaxsearchlite1 .probox, div.asl_w .probox {
        padding: 9px 12px !important;
    }
}

div.asl_w .probox .promagnifier {
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
}

#ajaxsearchlite1 .probox .proinput, div.asl_w .probox .proinput {
    color: var(--primary-text-color) !important;
    font-size: var(--small-font-size) !important;
    line-height: var(--medium-line-height) !important;
    text-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

div.asl_w .probox .proinput input.autocomplete {
    display: none;
}

div.asl_w .probox .proinput input.orig {
    color: var(--primary-text-color) !important;
    font-size: var(--small-font-size) !important;
    line-height: var(--medium-line-height) !important;
    text-shadow: none !important;
}

.search-widget--small #search-widget div.asl_w .probox .proinput input.orig {
    font-size: var(--smallest-font-size) !important;
}

div.asl_w .probox div.asl_simple-circle {
    border: 2px solid var(--primary-cyan-color) !important;
}

div.asl_r {
    margin: 8px 0 0 !important;
}

div.asl_r.asl_w {
    -webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 16px 46px 0px !important;
            box-shadow: rgba(0, 0, 0, 0.16) 0px 16px 46px 0px !important;
}

div.asl_r.vertical {
    padding: 0 !important;
}

div.asl_r .results {
    border-left: 4px solid white !important;
    border-right: 4px solid white !important;
    border-top: 6px solid white !important;
    border-bottom: 6px solid white !important;
    -ms-scroll-chaining: none !important;
        overscroll-behavior: contain !important;
    padding-right: 6px !important;
}

div.asl_r.vertical .results, div.asl_s.searchsettings .asl_sett_scroll {
    scrollbar-width: auto !important;
    scrollbar-color: initial !important;
}


div.asl_r.vertical .results::-webkit-scrollbar, div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar {
    width: 8px !important;
    background: transparent !important;
    border-radius: 12px !important;
}

div.asl_r.vertical .results::-webkit-scrollbar-thumb, div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-thumb {
    background-color: rgba(224, 224, 224, 1) !important;
    border-radius: 12px !important;
}


div.asl_r.vertical:hover .results::-webkit-scrollbar-thumb, div.asl_s.searchsettings:hover .asl_sett_scroll::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
}


div.asl_r .results .item {
    padding: 0 !important;
    border: none !important;
}

div.asl_r.asl_w.vertical .results .item::after, 
div.asl_r.asl_w.vertical .results .etc {
    display: none !important;
}

.asl_content {
    padding: 10px 18px !important;
    -webkit-transition: all .1s linear !important;
    -o-transition: all .1s linear !important;
    transition: all .1s linear !important;
    border-radius: 6px !important;
}

.asl_content:hover {
    background: var(--light-blue-color) !important;
}

.asl_res_url {
    width: 100% !important;
    display: inline-block !important;

    color: var(--primary-text-color) !important;
    line-height: var(--small-line-height) !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;
    -webkit-transition: all .15s linear !important;
    -o-transition: all .15s linear !important;
    transition: all .15s linear !important;
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body:not(.single) .asl_res_url {
    font-size: var(--medium-font-size) !important;
}

@media screen and (max-width: 770px) {
    body:not(.single) .asl_res_url {
        font-size: var(--smallest-font-size) !important;
    }
}

body.single .asl_res_url {
    font-size: var(--smallest-font-size) !important;
}

.asl_res_url:hover {
    color: var(--secondary-cyan-color) !important;
}

div.asl_r p.showmore {
    margin-top: 0 !important;
    text-align: left !important;
    border-top: 1px solid #e4e4e4;
}

div.asl_r p.showmore span {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    color: var(--secondary-cyan-color) !important;
    font-size: var(--smallest-font-size) !important;
    line-height: var(--smallest-line-height) !important;
    text-align: left !important;
    text-shadow: none !important;
    padding: 12px 18px !important;
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    border: none !important;
}

div.asl_r p.showmore span::after {
    content: '' !important;
    height: 18px !important;
    width: 18px !important;
    -webkit-mask-size: cover  !important;
            mask-size: cover  !important;
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    vertical-align: bottom !important;
    margin-left: 2px !important;
    -webkit-transition: .2s ease-in-out !important;
    -o-transition: .2s ease-in-out !important;
    transition: .2s ease-in-out !important;
    background-color: var(--secondary-cyan-color);
    -webkit-mask: url(/blog/wp-content/themes/dragon24/assets/img/icon/t1-forward-rarr.svg) 50% 50% / cover no-repeat;
    mask: url(/blog/wp-content/themes/dragon24/assets/img/icon/t1-forward-rarr.svg) 50% 50% / cover no-repeat;
}

div.asl_r p.showmore span:hover::after {
    -webkit-transform: translateX(8px);
        -ms-transform: translateX(8px);
            transform: translateX(8px);
}

div.asl_m .probox .proclose svg {
    background: transparent !important;
    width: 28px !important;
    height: 28px !important;
    margin-left: -14px !important;
    margin-top: -14px !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    padding: 3px !important;
}

div.asl_w .probox div.prosettings {
    box-shadow: none !important;
}

div.asl_s.searchsettings {
    padding: 8px !important;
    border-radius: 8px !important;
}

div.asl_s.searchsettings .asl_sett_scroll,
div.asl_s.searchsettings .fieldset {
    margin: 0 !important;
}

div.asl_s.searchsettings form fieldset legend {
    padding: 5px 0 12px 10px !important;
}

div.asl_s.searchsettings .asl_option_label {
    color: var(--primary-text-color) !important;
    font-weight: var(--semibold-font-weight) !important;
}

div.asl_s.searchsettings .asl_option_inner .asl_option_checkbox {
    border-radius: 4px !important;
    background: #0097A7 !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
}
/* end search widget */