.arrow { border: solid #34717F; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; }
.down { transform: rotate(45deg) translateY(-50%); -webkit-transform: rotate(45deg) translateY(-50%); }
.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-left: 3px; }

* { scroll-behavior: smooth !important; }

#barcodeScannerPHP .barcodeScannerBanner h1 { margin-top: 160px; width: 680px; }
#barcodeScannerPHP .barcodeScannerBanner p { width: 600px; }
#barcodeScannerPHP h3 { font-size: 28px; }

.barcodeScannerPhpContent { margin-top: 50px 0; }
    .barcodeScannerPhpContent .php-content { position: relative; height: 500px; width: 100%; margin-top: 140px; }
        .barcodeScannerPhpContent .php-content .greyBg { position: absolute; width: 63%; height: 100%; top: 0; }
        .barcodeScannerPhpContent .php-content.php-server .greyBg { background: url(../../images/barcode-scanner-php/php-server.png) #F5F5F5 no-repeat center center; }
        .barcodeScannerPhpContent .php-content.php-client .greyBg { background: url(../../images/barcode-scanner-php/php-client.png) #F5F5F5 no-repeat 30% center; }
        .barcodeScannerPhpContent .php-content .desc { position: absolute; top: 0; height: 100%; width: 45%; z-index: 1; display: flex; flex-direction: column; justify-content: center }
            .barcodeScannerPhpContent .php-content .desc > p:first-child { font-size: 40px; font-family: Oswald-Light; }
            .barcodeScannerPhpContent .php-content .desc > p { margin-bottom: 30px; }

#barcodeScannerPHP dt:before { content: ""; display: none; }

#barcodeScannerPHP .barcodeScannerBanner .bannerImg { background: url(../../images/banner/DBR/dbr-php-hero.webp) no-repeat; }

#barcodeScannerPHP .intro { margin-top: 190px; }
#barcodeScannerPHP h2 { font-size: 30px; font-family: Oswald-Regular; text-align: center; }

#barcodeScannerPHP .intro h2 { text-align: center; font-family: Oswald-Light; font-size: 40px; }
#barcodeScannerPHP .intro p { margin: 20px auto; width: 50%; text-align: center; }
#barcodeScannerPHP .link { font-size: 18px; font-family: Oswald-Regular; color: #FE8E14; cursor: pointer; }
#barcodeScannerPHP .codeLink { font-size: 16px; font-family: Oswald-Regular; color: #34717F; cursor: pointer; }


#barcodeScannerPHP .system { margin-top: 110px; height: 360px; }
    #barcodeScannerPHP .system.container::after { display: none; }
    #barcodeScannerPHP .system.container .row::after { display: none; }
    #barcodeScannerPHP .system .row { height: 100%; display: flex; justify-content: space-between; }
    #barcodeScannerPHP .system .linux, #barcodeScannerPHP .system .windows { position: relative; background-color: #F5F5F5; padding: 75px 50px 50px 50px; }
    #barcodeScannerPHP .system .windows { width: 910px; }
    #barcodeScannerPHP .system .linux { width: 613px; }
    #barcodeScannerPHP .system .detail { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
        #barcodeScannerPHP .system .detail .system-name { font-size: 30px; font-family: Oswald-Regular; }
        #barcodeScannerPHP .system .detail .system-desc { min-height: 110px; }

#barcodeScannerPHP .php-web-intro { margin: 100px 0; background-color: #323234; color: white; text-align: center; padding: 60px 0; }
    #barcodeScannerPHP .php-web-intro p { width: 52%; margin: 0 auto; font-size: 24px; line-height: 35px; margin-bottom: 20px; }

#barcodeScannerPHP .pageMenuList { position: absolute; padding: 0 0 0 60px; border-left: 1px solid #ddd; }
    #barcodeScannerPHP .pageMenuList li { font-size: 20px; margin: 0 0 20px 0; cursor: pointer; position: relative; }
        #barcodeScannerPHP .pageMenuList li.on { color: #FE8E14; }
            #barcodeScannerPHP .pageMenuList li.on::after { content: ''; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-left: 16px solid #fe8e14; left: -30px; top: 10px; }

#barcodeScannerPHP .barcode-scanner-php-features { margin: 100px 0 120px 0; }
#barcodeScannerPHP .basicFeaturePage { padding-left: 400px; }
    #barcodeScannerPHP .basicFeaturePage .featureTechnical .technicalBox h2.technicalTitle { font-size: 20px; text-align: left; }
    #barcodeScannerPHP .basicFeaturePage .featureTechnical .technicalBox .technicalContent { padding: 50px 70px 30px 70px; }
        #barcodeScannerPHP .basicFeaturePage .featureTechnical .technicalBox .technicalContent ul.technicalDetail { width: 100%; max-width: unset; padding: unset; }
            #barcodeScannerPHP .basicFeaturePage .featureTechnical .technicalBox .technicalContent ul.technicalDetail li { font-family: Oswald-Regular; font-size: 20px; }
            #barcodeScannerPHP .basicFeaturePage .featureTechnical .technicalBox .technicalContent ul.technicalDetail span { margin-bottom: 20px; display: inline-block; }

#barcodeScannerPHP .barcode-scanner-php-features .icon { background-color: white; }
    #barcodeScannerPHP .barcode-scanner-php-features .icon.icon-barcode { background: url(../../images/icons/dbr-php/barcode.svg) white no-repeat center center; }
    #barcodeScannerPHP .barcode-scanner-php-features .icon.icon-server { background: url(../../images/icons/dbr-php/server.svg) white no-repeat center center; }

#barcodeScannerPHP .prerequisite h3 { margin: 90px 0 25px 0; }
#barcodeScannerPHP .prerequisite .row { display: block; }
#barcodeScannerPHP .prerequisite .prerequisiteBox { display: flex; justify-content: space-between; }
    #barcodeScannerPHP .prerequisite .prerequisiteBox p { font-size: 16px; line-height: 30px; }
    #barcodeScannerPHP .prerequisite .prerequisiteBox > div:last-child p { line-height: 25px; }
    #barcodeScannerPHP .prerequisite .prerequisiteBox > div { padding: 50px; width: 48%; background-color: #F5F5F5; display: flex; flex-direction: column; justify-content: space-between; word-break: break-all; }
        #barcodeScannerPHP .prerequisite .prerequisiteBox > div > p:first-child { font-size: 20px; color: #323234; font-family: Oswald-Regular; }


#barcodeScannerPHP .codeSnippet h3 { margin: 90px 0 25px 0; }
#barcodeScannerPHP .codeSnippet .row { display: block; }
#barcodeScannerPHP .codeSnippet .steps { display: flex; justify-content: space-between; height: auto; }
    #barcodeScannerPHP .codeSnippet .steps .step { height: fit-content; background-color: #F5F5F5; padding: 50px; width: 32%; }
        #barcodeScannerPHP .codeSnippet .steps .step p { font-size: 16px; margin-bottom: 20px; }
            #barcodeScannerPHP .codeSnippet .steps .step p:first-child { font-size: 24px; font-family: Oswald-Regular; }
            #barcodeScannerPHP .codeSnippet .steps .step p:nth-child(2) { min-height: 150px; }
        #barcodeScannerPHP .codeSnippet .steps .step:last-child p:last-child { min-height: 174px; }
    #barcodeScannerPHP .codeSnippet .steps pre { display: none; height: auto; border: none; margin-top: 20px; }

/*#barcodeScannerPHP .barcodeScannerFooter { margin-top: 120px; }*/


#barcodeScannerPHP .system .icon { position: absolute; width: 80px; height: 80px; left: 50px; top: 0; transform: translateY(-50%); background-color: white; border: 2px solid #323233; display: flex; justify-content: center; align-items: center; }
    #barcodeScannerPHP .system .icon i { display: inline-block; font-size: 45px; }
#barcodeScannerPHP i.fa-php { display: flex; justify-content: center; align-items: center; font-size: 45px; color: black; }

.barcode-swiper-container .swiper-slide { width: auto; }
.barcode-swiper-container .swiper-slide .barcode-img {  margin-right: 20px; }

@media screen and (max-width: 1679px) { 
    #barcodeScannerPHP .barcodeScannerBanner h1 { margin-top: 130px; width: 680px; }
    #barcodeScannerPHP .barcodeScannerBanner p { font-size: 16px; }

    .barcodeScannerPhpContent .php-content.php-server .greyBg { background: url(../../images/barcode-scanner-php/php-server.png) #F5F5F5 no-repeat 80% center; background-size: 50%; }
    .barcodeScannerPhpContent .php-content.php-client .greyBg { background: url(../../images/barcode-scanner-php/php-client.png) #F5F5F5 no-repeat 20% center; background-size: 50%; }
    .barcodeScannerPhpContent .php-content .desc { width: 57%; }
        .barcodeScannerPhpContent .php-content .desc > p:first-child { font-size: 34px; }


    #barcodeScannerPHP .system .windows { width: 60%; }
    #barcodeScannerPHP .system .linux { width: 35%; }

    #barcodeScannerPHP .php-web-intro p { width: 70%; }

    #barcodeScannerPHP .basicFeaturePage { padding-left: 300px; }
    #barcodeScannerPHP .pageMenuList li { font-size: 16px; }
    #barcodeScannerPHP .pageMenuList { padding-left: 40px; }

    #barcodeScannerPHP .codeSnippet .steps .step p:nth-child(2) { min-height: 230px; }
    #barcodeScannerPHP .codeSnippet .steps .step:last-child p:last-child { min-height: 254px; }
}

@media screen and (max-width: 1299px) {
    #barcodeScannerPHP .barcodeScannerBanner h1 { width: 500px; margin-top: 100px; }
    #barcodeScannerPHP .barcodeScannerBanner p { width: 490px; }
}

@media screen and (max-width: 1199px) {
    #barcodeScannerPHP .intro { margin-top: 100px; }

    .barcodeScannerPhpContent { margin: 0 0 50px 0; }
    .barcodeScannerPhpContent .php-content { height: auto; }
    .barcodeScannerPhpContent .php-content .desc { width: 100%; position: static; }
    .barcodeScannerPhpContent .php-content .desc > p:first-child { font-size: 28px; }
    .barcodeScannerPhpContent .php-content .greyBg { background: #f5f5f5; display: none; }
    

    #barcodeScannerPHP .codeSnippet .steps .step p { font-size: 14px; }
}

@media screen and (max-width: 991px) {
    #barcodeScannerPHP .barcodeScannerBanner h1 { margin-top: 80px; }

    #barcodeScannerPHP .system { height: auto; }
        #barcodeScannerPHP .system .row { flex-direction: column; }
        #barcodeScannerPHP .system .windows, #barcodeScannerPHP .system .linux { width: 100%; }
        #barcodeScannerPHP .system .linux { margin-top: 80px; }

    #barcodeScannerPHP .pageMenuList { display: none }
    #barcodeScannerPHP .basicFeaturePage { padding-left: 0; }
    #barcodeScannerPHP .prerequisite .prerequisiteBox > div { width: 100%; padding: 30px; }
        #barcodeScannerPHP .prerequisite .prerequisiteBox > div:last-child { margin-top: 40px; }
            #barcodeScannerPHP .prerequisite .prerequisiteBox > div:last-child p { line-height: 30px; }

    #barcodeScannerPHP .prerequisite .prerequisiteBox { flex-direction: column; align-items: center; }

    #barcodeScannerPHP .codeSnippet .steps { flex-direction: column; align-items: center; }
        #barcodeScannerPHP .codeSnippet .steps .step { width: 100%; margin-top: 40px; }

            #barcodeScannerPHP .codeSnippet .steps .step p { min-height: unset !important; }
}

@media screen and (max-width: 767px) {
    #barcodeScannerPHP .barcodeScannerBanner h1 { margin: 10px 0; }
    #barcodeScannerPHP .barcodeScannerBanner p { width: auto; }

    .barcodeScannerPhpContent .php-content { margin-top: 60px; }
    .barcodeScannerPhpContent .php-content .desc > p:first-child { font-size: 20px; }
    .barcodeScannerPhpContent .php-content.php-server .desc div:nth-child(3) { flex-direction: column; }
    .barcodeScannerPhpContent .php-content.php-server .desc div:nth-child(3) > div { width: 100% !important; margin-bottom: 20px; }
}

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

    #barcodeScannerPHP .intro { margin-top: 50px; }
        #barcodeScannerPHP .intro h2 { font-size: 22px; }
        #barcodeScannerPHP .intro p { width: 90%; }

    .barcodeScannerPhpContent .php-content .desc { padding: 0 25px; }
    #barcodeScannerPHP .icon-arrow-right { width: 18px; right: 5px; }
    #barcodeScannerPHP .icon-arrow-left { width: 18px; left: 5px; }
    #barcodeScannerPHP .dbrOverviewSymbology .barcode-swiper-wrapper { padding: 0 30px; } 

    #barcodeScannerPHP .system { margin: 50px 0 0 0; }
        #barcodeScannerPHP .system .windows, #barcodeScannerPHP .system .linux { width: 95%; margin: 0 auto; }
        #barcodeScannerPHP .system .icon { width: 60px; height: 60px; }
            #barcodeScannerPHP .system .icon i { font-size: 40px; }
        #barcodeScannerPHP .system .detail .system-name { font-size: 20px; }
        #barcodeScannerPHP .system .linux { margin-top: 50px; }

    #barcodeScannerPHP .link { font-size: 14px; }
    #barcodeScannerPHP i.fa-php { font-size: 35px; }

    #barcodeScannerPHP .php-web-intro { margin: 50px 0; }
        #barcodeScannerPHP .php-web-intro p { width: 90%; font-size: 16px; }

    #barcodeScannerPHP .barcode-scanner-php-features { margin: 50px 0; }
    #barcodeScannerPHP .basicFeaturePage .featureTechnical .technicalBox h2.technicalTitle { font-size: 16px; padding: 0 0 0 80px; }
    .basicFeaturePage .featureTechnical .technicalBox { margin-bottom: 40px; }
    #barcodeScannerPHP .codeSnippet .steps .step { margin: 0 0 20px 0; width: 95%; padding: 35px; }
        #barcodeScannerPHP .codeSnippet .steps .step p:first-child { font-size: 20px; }

    #barcodeScannerPHP .prerequisite h3, #barcodeScannerPHP .codeSnippet h3 { margin: 40px 0; }


    #barcodeScannerPHP .barcode-scanner-php-features .icon.icon-server, #barcodeScannerPHP .barcode-scanner-php-features .icon.icon-barcode { background-size: 38px; }

    #barcodeScannerPHP h2 { font-size: 22px; }


    #barcodeScannerPHP .basicFeaturePage .featureTechnical .technicalBox .technicalContent { padding: 40px; }

    #barcodeScannerPHP .prerequisite .prerequisiteBox > div { width: 95%; }
    #barcodeScannerPHP .prerequisite h3, #barcodeScannerPHP .codeSnippet h3 { padding-left: 10px; font-size: 20px; }

}


@media screen and (max-width: 443px) {
    .basicPageFooter .d-btn { width: 200px; }
}