﻿.tooltip { font-size: 14px; text-align: left; }
.tooltipIcon { display: inline-block; width: 18px; height: 18px; vertical-align: middle; background: url(../../images/icons/download-info.svg) right center no-repeat; margin-top: -1px; background-size: 100%; margin-left: 8px; }
.tooltip .tooltip-inner { max-width: 280px; margin-top: 30px; padding: 10px 15px; color: #fff; text-align: left; line-height: 20px; background-color: #323234; border-radius: 0; }
.tooltip .arrow { border-color: #323234; }
.tooltip.show { opacity: 1; }
.icon-out-link { display: inline-block; width: 14px; height: 14px; vertical-align: middle; background: url(../../images/icons/out-link.svg) right center no-repeat; }
/* Title */
.downloadHeader { padding-left: 50px; display: flex; flex-direction: column; align-items: center; }
    .downloadHeader h1 { margin-bottom: 30px; font-size: 40px; line-height: 60px; }

/* Application Selection */
.applicationSelect { margin: 25px 0; font-size: 0px; margin-bottom: 57px; }
    .applicationSelect label.applicationTypeLabel { font-size: 24px; margin-right: 15px; margin-bottom: 0; }
.new-download-style .applicationSelect { width: 100%; max-width: 980px; padding: 15px 43px; margin: 0 auto 20px auto; }
    .new-download-style .applicationSelect label.applicationTypeLabel { font-size: 18px; }
    .new-download-style .applicationSelect .d-radio-group .d-radio { margin-right: 40px; }
        .new-download-style .applicationSelect .d-radio-group .d-radio:last-child { margin-right: 0px; }


/* Panels */
#dbrPanel { padding-left: 50px; display: flex; flex-direction: column; align-items: center; }
    #dbrPanel a { color: #34717F; }
        #dbrPanel a:hover { color: #6AC4BB; }

    #dbrPanel .item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; width: 1360px; /*margin-bottom: 15px;*/ background: #F5F5F5; padding: 20px 43px; }
    #dbrPanel .greyBorderTop { border-top: 8px solid #aaa; }
    #dbrPanel > .item.mb30 { margin-bottom: 30px; }
    /*    #dbrPanel > .item:first-child { margin-bottom: 30px; }
    #dbrPanel > .item:nth-child(5) { margin-bottom: 30px; }
    #dbrPanel > .item:nth-child(11) { margin-bottom: 30px; }*/
    #dbrPanel > .item:last-child { text-align: center; }
    #dbrPanel .item > p { margin-bottom: 0; display: inline-block; margin-top: 0; vertical-align: top; line-height: 40px; overflow: hidden; }
        #dbrPanel .item > p.title { width: 270px; }
        #dbrPanel .item > p:nth-child(2) { width: auto; flex: 1; }
        #dbrPanel .item > p.flutter { width: 662px; }
        #dbrPanel .item > p.xamarin { width: 678px; }
    #dbrPanel .item .title { font-size: 28px; }
    #dbrPanel .item .text { font-size: 18px; }

    /* 2002/08/22 Frank */
    #dbrPanel .item div:nth-child(3) { display: inline-flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
        #dbrPanel .item div:nth-child(3) p { margin: 0 0; font-size: 16px; }

    #dbrPanel .item .dbrDownloadBtn { font-size: 20px; color: #FE8E14; font-family: 'Oswald-Regular'; }
        #dbrPanel .item .dbrDownloadBtn > i { position: relative; top: 2px; margin-left: 10px; }
        #dbrPanel .item .dbrDownloadBtn:hover { color: #FEA543; }
            #dbrPanel .item .dbrDownloadBtn:hover > i { background: url(../../images/icons/download_arrow_hover_20.png) no-repeat; background-size: cover; }

    #dbrPanel.new-item-line { border: 1px solid #DDDDDD; width: 100%; max-width: 980px; margin: 0 auto; padding: 0; }
        #dbrPanel.new-item-line .item { width: 100%; background: #FFFFFF; padding: 10px 43px; }
            #dbrPanel.new-item-line .item.greyBorderBottom { border-bottom: 1px solid #dddddd; padding-bottom: 15px; }
                #dbrPanel.new-item-line .item.greyBorderBottom + .item { padding-top: 15px; }
        #dbrPanel.new-item-line > .item:first-child { margin-bottom: 0px; padding-top: 15px; }
        #dbrPanel.new-item-line > .item:nth-child(5) { margin-bottom: 0px; }
        #dbrPanel.new-item-line > .item:nth-child(11) { margin-bottom: 0px; padding-bottom: 15px; }
        #dbrPanel.new-item-line > .item:last-child { text-align: left; }
        #dbrPanel.new-item-line .item > p.title { width: 240px; font-size: 18px; }
        #dbrPanel.new-item-line .item > p.text { font-size: 16px; margin-right: 0px; width: 180px; flex: unset; }
            #dbrPanel.new-item-line .item > p.text.flex-1 { flex: 1; }
        #dbrPanel.new-item-line .item.java > p:nth-child(3) { width: 200px; }
        /*#dbrPanel.new-item-line .item.ios > p:nth-child(3) { width: 110px; }*/
        #dbrPanel.new-item-line .item.ios > p:nth-child(4) { width: 180px; }
        #dbrPanel.new-item-line .item div.download, #dbrPanel.new-item-line .item p.download { flex: 1; text-align: right; display: inline-flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
        #dbrPanel.new-item-line .item .grayLink { color: #606060; text-decoration: underline !important; }
            #dbrPanel.new-item-line .item .grayLink i { margin-left: 10px; }
            #dbrPanel.new-item-line .item .grayLink:hover { color: #fe8e14; }
/*                #dbrPanel.new-item-line .item .grayLink:hover i { filter: brightness(0); }*/
        #dbrPanel.new-item-line .item .dbrDownloadBtn { font-size: 16px; padding: 4px 15px; border: 2px solid #FE8E14; color: #FE8E14; transition: ease-in-out .2s all; }
            #dbrPanel.new-item-line .item .dbrDownloadBtn > i { background: url(../../images/icons/download_arrow_nomal_20.png) no-repeat; background-size: cover; }
            #dbrPanel.new-item-line .item .dbrDownloadBtn:hover { color: #FE8E14; box-shadow: -4px 4px 0 0 #000; transform: translate(4px, -4px); }
                #dbrPanel.new-item-line .item .dbrDownloadBtn:hover > i { background: url(../../images/icons/download_arrow_nomal_20.png) no-repeat; background-size: cover; }
.afterPanel { width: 100%; max-width: 980px; margin: 0 auto; margin-top: 20px; padding: 0px 43px; }


#dbrPanel .items { display: flex; justify-content: space-between; width: 1400px; margin-top: 5px; }
    #dbrPanel .items .item { width: 463px; }
        #dbrPanel .items .item p { width: fit-content; }
            #dbrPanel .items .item p:first-child { width: 145px; }
            #dbrPanel .items .item p:last-child { width: fit-content; }

#dbrPanel .item.oneOne > p:nth-child(2) { width: 605px; }
#dbrPanel .oneOneBtn, .afterPanel .oneOneBtn { border: 2px solid #FE8E14; color: #FE8E14; width: 295px; height: 45px; display: inline-block; font-size: 20px; line-height: 41px; text-align: center; }
    #dbrPanel .oneOneBtn:hover, .afterPanel .oneOneBtn:hover { color: #FEA543; border: 2px solid #FEA543; }
.afterPanel .oneOneBtn { margin-top: 40px; }

#dbrPanel .item .bluelink { font-size: 18px; color: #34717F !important; font-family: 'Oswald-Regular'; /* margin-left: 20px;*/ }
    #dbrPanel .item .bluelink:nth-of-type(2) { margin-left: 15px; }
    #dbrPanel .item .bluelink:hover { color: #6AC4BB !important; }
#dbrPanel.new-item-line .item .bluelink { font-family: OpenSans-Regular; font-size: 16px; color: #606060 !important; }
    #dbrPanel.new-item-line .item .bluelink .icon-arrow-down { display: inline-block; width: 10px; height: 10px; border: 1px solid #606060; border-top: 0; border-right: 0; transform: rotate(-45deg); position: relative; left: 3px; top: -2px; transition: all ease-in-out .3s; }
    #dbrPanel.new-item-line .item .bluelink.showNow .icon-arrow-down { transform: rotate(135deg); top: 3px; }
    #dbrPanel.new-item-line .item .bluelink:hover { color: #323234 !important; }
        #dbrPanel.new-item-line .item .bluelink:hover .icon-arrow-down { border-color: #323234; }
/* icons */
/*#dbrPanel .item .product-icon { height: 36px; display: inline-block; position: absolute; right: 0px; background-color: #AAAAAA; color: white; font-family: 'Oswald-Regular'; font-size: 18px; text-align: center; padding: 0px 12px; line-height: 36px; }
#dbrPanel .item.empty-item { border: none; }*/
/* other */
#dbrPanel div.code { display: none; position: relative; background: #F5F5F5; width: 100%; padding: 8px 0px 0; border-top: none; overflow: hidden; transition: max-height ease-out 0.4s; }
#dbrPanel pre code { font-size: 14px; }
#dbrPanel.new-code-style div.code { display: none; position: relative; background: #F5F5F5; width: 100%; padding: 8px 0px 0; border-top: none; overflow: hidden; transition: max-height ease-out 0.4s; text-align: left; }
#dbrPanel.new-code-style pre { position: relative; }
    #dbrPanel.new-code-style pre i.fa-copy { position: absolute; right: 15px; top: 20px; font-size: 18px; cursor: pointer; }
        #dbrPanel.new-code-style pre i.fa-copy:hover { color: #34717F; }
    #dbrPanel.new-code-style pre code { font-size: 14px; padding: 0; background: #E5E5E5; padding: 20px 35px 20px 15px; }
#dbrPanel.new-code-style.new-item-line div.code { background: #FFFFFF; }

#dbrPanel div.code .arrow-down { position: absolute; cursor: pointer; height: 60px; width: 60px; top: 25px; right: 30px; display: inline-block !important; font-size: 20px; border: none; transform: rotate(180deg); z-index: 30; transition: opacity .2s ease-in-out; }
    #dbrPanel div.code .arrow-down:hover { opacity: 0.7; }

.dbr-download .arrow-down i { height: 100%; width: 100%; background: url(../../images/icons/arrow-down.png) no-repeat; background-position: center; display: inline-block; }

/*#dbrPanel .item.python .copied { display: none; color: #323234; font-family: 'Oswald-Regular'; width: 253px; height: 50px; padding: 0 15px; font-size: 20px; line-height: 50px; position: absolute; top: 15px; right: -210px; background: #E5E5E5; z-index: 11; }
#dbrPanel .item.python .copied:before { content: ''; position: absolute; top: 16px; left: -20px; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent #E5E5E5 transparent transparent; } 
#dbrPanel .item.python .copied .fontOrange { color: #FE8E14; margin-left: 20px; }*/

/* radio */
.d-radio-group { display: inline-block; font-family: 'OpenSans-Regular'; font-size: 18px; line-height: 24px; margin-left: 25px; }
.d-radio { margin-right: 30px; font-weight: normal; vertical-align: top; cursor: pointer; }
    .d-radio input { opacity: 0; z-index: 2; }
    .d-radio span { position: relative; display: inline-block; vertical-align: top; margin-left: -20px; width: 20px; height: 20px; border-radius: 500px; border: 1px solid #707070; margin-right: 5px; text-align: center; vertical-align: top; margin-top: 2px; }
    .d-radio i { font-style: normal; }
    .d-radio:hover span { border-color: #FE8E14; }
    .d-radio input[type=radio]:checked + span:before { position: absolute; content: ""; width: 12px; height: 12px; top: 50%; left: 50%; margin-top: -6px; margin-left: -6px; border-radius: 500px; opacity: 1; transition: color 0.3s ease-out; background-color: #FE8E14; }
    .d-radio input[type=radio]:checked + span { border-color: #FE8E14; }
/*.d-radio input[type=radio]:checked + span + i { color: #FE8E14; }*/


#jsDownloadModal { display: none }
    #jsDownloadModal .modal-mask { position: fixed; top: 0; bottom: 0; left: 0; width: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.5); z-index: 1000; }
    #jsDownloadModal .modal-content { position: fixed; width: 80%; max-width: 750px; height: auto; padding: 40px; background: #ffffff; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; border: 0; border-radius: 0; }
        #jsDownloadModal .modal-content p.title { font-size: 24px; }
        #jsDownloadModal .modal-content .note { background: #f5f5f5; padding: 30px 40px; margin-top: 20px; font-size: 18px; }
        #jsDownloadModal .modal-content .modal-close { position: absolute; top: -39px; right: 0; cursor: pointer; }
            #jsDownloadModal .modal-content .modal-close .fa-close { font-size: 28px; color: #ffffff; }

#dbrPanel .forDS, #dbrPanel .forMobile { display: none; }

/* next step*/
@keyframes rotation {
    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }
}

#next-step { max-width: calc(100% - 86px); width: 100%; margin-left: auto; margin-right: auto; border-top: 1px solid #AAAAAA; padding-bottom: 20px; }
    #next-step > p { margin-top: 20px; }
    #next-step .request-form { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px 18px; }
        #next-step .request-form .iti { width: 100%; height: 100%; font-size: 16px; }
        #next-step .request-form .fullname { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 19px; }
        #next-step .request-form .input { position: relative; height: 55px; width: 100%; border: 1px solid #999999; font-size: 16px; }
            #next-step .request-form .input label { position: absolute; font-size: 13px; pointer-events: none; color: #999999; left: 20px; transition: all ease-in .2s; transform: unset; top: 3px; }
            #next-step .request-form .input input { outline: none; border: none; width: 100%; height: 100%; padding: 20px 0 0 20px; }
                #next-step .request-form .input input[name=phone] { padding-left: 100px !important; }
                    #next-step .request-form .input input[name=phone] + label { left: 100px !important; }
                #next-step .request-form .input input:not(:focus):placeholder-shown + label { top: 50%; transform: translateY(-50%); }
    #next-step .generate-btn { margin-top: 25px; display: flex; align-items: center; }
        #next-step .generate-btn p { margin: 0; }
        #next-step .generate-btn a { display: flex; align-items: center; justify-content: center; border: 2px solid #fe8e14; font-size: 18px; font-family: Oswald-Regular; color: #fe8e14; height: 48px; line-height: 52px; width: 265px; margin-right: 30px; }
            #next-step .generate-btn a:link,
            #next-step .generate-btna:visited,
            #next-step .generate-btna:hover,
            #next-step .generate-btna:active,
            #next-step .generate-btna:focus { color: #fe8e14; }
            #next-step .generate-btn a .loader { margin-left: 15px; width: 20px; height: 20px; border: 2px solid #fe8e14; border-bottom-color: transparent; border-radius: 50%; display: none; box-sizing: border-box; animation: rotation 1s linear infinite; }
            #next-step .generate-btn a.on .loader { display: inline-block; }
    #next-step .feedback { width: 100%; min-height: 90px; display: none; align-items: center; justify-content: center; }
        #next-step .feedback img { margin-right: 22px; }
        #next-step .feedback p { flex: 1; }
    #next-step .overLimit { display: none; }
    #next-step .trialLicesne .afterRequestLicense .extensionSurvey { margin: 0; padding: 0; background-color: transparent; }
        #next-step .trialLicesne .afterRequestLicense .extensionSurvey .submitSurvyLine .submit-btn { color: white; }
/* media query */
@media (max-width: 1679px) { /* Title */
    .downloadHeader { padding-left: 30px; }
        .downloadHeader h1 { margin-bottom: 45px; font-size: 32px; line-height: 36px; }

    /* Application Selection */
    .applicationSelect { margin: 25px 0px; font-size: 0px; margin-bottom: 30px; }
        .applicationSelect select { font-size: 18px; height: 60px; width: 385px; -webkit-appearance: none; -moz-appearance: none; background: transparent; border: 1px solid #606060; padding: 10px; outline: none; padding-right: 60px; padding-left: 15px; color: #AAAAAA; }
        .applicationSelect label.applicationTypeLabel { font-size: 20px; margin-right: 15px; margin-bottom: 0; }
    .d-radio-group { font-size: 16px; }
    /* Panels */
    #dbrPanel { padding-left: 30px; }
        #dbrPanel a { color: #34717F; }
            #dbrPanel a:hover { color: #6AC4BB; }

        #dbrPanel .item { flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; width: 1140px; /*margin-bottom: 15px;*/ background: #F5F5F5; padding: 15px 20px; }
            #dbrPanel .item > p { margin-bottom: 0; display: inline-block; margin-top: 0; vertical-align: top; line-height: 40px; }
                #dbrPanel .item > p:first-child { width: 300px; }
                #dbrPanel .item > p:nth-child(2) { width: 515px; }
                #dbrPanel .item > p.flutter { width: 491px; }
                #dbrPanel .item > p.xamarin { width: 503px; }
            #dbrPanel .item .title { font-size: 22px; }
            #dbrPanel .item .text { font-size: 14px; }

        #dbrPanel .items { justify-content: space-between; width: 965px; }
            #dbrPanel .items .item { width: 317px; }

        #dbrPanel .item .dbrDownloadBtn { font-size: 16px; color: #FE8E14; font-family: 'Oswald-Regular'; }
            #dbrPanel .item .dbrDownloadBtn > i { position: relative; top: 2px; margin-left: 10px; }
            #dbrPanel .item .dbrDownloadBtn:hover { color: #FEA543; }
                #dbrPanel .item .dbrDownloadBtn:hover > i { background: url(../../images/icons/download_arrow_hover_20.png) no-repeat; background-size: cover; }

        #dbrPanel .item.oneOne > p:nth-child(2) { width: 370px; }
        #dbrPanel .oneOneBtn, .afterPanel .oneOneBtn { border: 2px solid #FE8E14; color: #FE8E14; width: 245px; height: 40px; display: inline-block; font-size: 16px; line-height: 36px; text-align: center; }

        #dbrPanel .item .bluelink { font-size: 16px; color: #34717F !important; font-family: 'Oswald-Regular'; /* margin-left: 15px;*/ }
            #dbrPanel .item .bluelink:hover { color: #6AC4BB !important; }

        /* other */
        #dbrPanel div.code { display: none; position: relative; background: #F5F5F5; width: 100%; padding: 8px 0px 0; border-top: none; overflow: hidden; transition: max-height ease-out 0.4s; }
        #dbrPanel pre code { font-size: 14px; }

        #dbrPanel div.code .arrow-down { position: absolute; cursor: pointer; height: 60px; width: 60px; top: 25px; right: 30px; display: inline-block !important; font-size: 20px; border: none; transform: rotate(180deg); z-index: 30; transition: opacity .2s ease-in-out; }
            #dbrPanel div.code .arrow-down:hover { opacity: 0.7; }

    /*#dbrPanel .item.python .copied { width: 187px; height: 40px; padding: 0 15px; font-size: 15px; line-height: 40px; top: 15px; right: -170px; }
    #dbrPanel .item.python .copied:before { top: 11px; left: -20px; }
    #dbrPanel .item.python .copied .fontOrange { margin-left: 10px; }*/

    /*#dbrDownload { padding-top: 40px; }*/
}

@media (max-width: 1199.98px) {
    /* next step */
    #next-step .generate-btn a { width: 180px; }

    /* Title */
    .downloadHeader { padding-left: 30px; }
    .downloadHeader { align-items: flex-start; }

    /* Panels */
    #dbrPanel { padding-left: 30px; }
        #dbrPanel a { color: #34717F; }
            #dbrPanel a:hover { color: #6AC4BB; }

        #dbrPanel .item { flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; width: 100%; /*margin-bottom: 15px;*/ background: #F5F5F5; padding: 15px 20px; }
            #dbrPanel .item > p { margin-bottom: 0; display: inline-block; margin-top: 0; vertical-align: top; line-height: 40px; }
                #dbrPanel .item > p:first-child { width: 170px; }
                #dbrPanel .item > p:nth-child(2) { width: 515px; }
                #dbrPanel .item > p.flutter { width: 495px; }
                #dbrPanel .item > p.xamarin { width: 503px; }
            #dbrPanel .item .title { font-size: 22px; }
            #dbrPanel .item .text { font-size: 14px; }

            /* 2022/08/22 Frank*/
            #dbrPanel .item div:nth-child(3) p { font-size: 14px; }

        #dbrPanel .items { justify-content: space-between; width: 100%; }
            #dbrPanel .items .item { width: 301px; }

        #dbrPanel .item .dbrDownloadBtn { font-size: 16px; color: #FE8E14; font-family: 'Oswald-Regular'; }
            #dbrPanel .item .dbrDownloadBtn > i { position: relative; top: 2px; margin-left: 10px; }
            #dbrPanel .item .dbrDownloadBtn:hover { color: #FEA543; }
                #dbrPanel .item .dbrDownloadBtn:hover > i { background: url(../../images/icons/download_arrow_hover_20.png) no-repeat; background-size: cover; }

        #dbrPanel .item.oneOne > p:nth-child(2) { width: 370px; }
        #dbrPanel .oneOneBtn, .afterPanel .oneOneBtn { border: 2px solid #FE8E14; color: #FE8E14; width: 245px; height: 40px; display: inline-block; font-size: 16px; line-height: 36px; text-align: center; }

        #dbrPanel .item.xamarin > p:first-child { line-height: 20px; }

        #dbrPanel .item .bluelink { font-size: 16px; color: #34717F !important; font-family: 'Oswald-Regular'; /*margin-left: 15px;*/ }
            #dbrPanel .item .bluelink:hover { color: #6AC4BB !important; }

        /* other */
        #dbrPanel div.code { display: none; position: relative; background: #F5F5F5; width: 100%; padding: 8px 0px 0; border-top: none; overflow: hidden; transition: max-height ease-out 0.4s; }
        #dbrPanel pre code { font-size: 14px; }

        #dbrPanel div.code .arrow-down { position: absolute; cursor: pointer; height: 60px; width: 60px; top: 25px; right: 30px; display: inline-block !important; font-size: 20px; border: none; transform: rotate(180deg); z-index: 30; transition: opacity .2s ease-in-out; }
            #dbrPanel div.code .arrow-down:hover { opacity: 0.7; }

    /*#dbrPanel .item.python .copied { width: 187px; height: 40px; padding: 0 15px; font-size: 15px; line-height: 40px; top: 56px; right: 0px; z-index: 11; }
    #dbrPanel .item.python .copied:before { top: -19px; left: 83px; border-color: transparent transparent #E5E5E5 transparent; }
    #dbrPanel .item.python .copied .fontOrange { margin-left: 10px; }*/

    #jsDownloadModal .modal-content p.title { font-size: 20px; }
    #jsDownloadModal .modal-content .note { font-size: 16px; padding: 20px 30px; margin-top: 10px; }

    #dbrPanel.new-item-line .item > p.title { width: 220px; font-size: 18px; }
    #dbrPanel.new-item-line .item > p.text { width: 130px; flex: unset; font-size: 14px }
        #dbrPanel.new-item-line .item > p.text.github { width: 160px; }
    #dbrPanel.new-item-line .item.ios > p:nth-child(3) { width: auto; margin-right: 0; }
    #dbrPanel.new-item-line .item.ios > p:nth-child(4) { width: 160px; margin-right: 0; }
    #dbrPanel.new-item-line .item div.download, #dbrPanel.new-item-line .item p.download { flex: 1; text-align: right; }
}

@media (max-width: 991.98px) {
    /* next step */
    #next-step { max-width: calc(100% - 50px); }
        #next-step .request-form { grid-template-columns: 1fr; }
        #next-step .generate-btn { flex-direction: column; align-items: flex-start; }
            #next-step .generate-btn > p { margin-top: 15px; }
    /* Title */
    .downloadHeader { padding-left: 30px; }

    .d-radio { margin-right: 15px; }
        .d-radio:last-child { margin-right: 0; }

    /* Panels */
    #dbrPanel { padding-left: 30px; }
        #dbrPanel a { color: #34717F; }
            #dbrPanel a:hover { color: #6AC4BB; }

        #dbrPanel .item { display: block; position: relative; width: 100%; /*margin-bottom: 15px;*/ background: #F5F5F5; padding: 15px 20px; }
            #dbrPanel .item > p { margin-bottom: 0; display: block; margin-top: 0; vertical-align: top; line-height: 40px; }
                #dbrPanel .item > p:first-child { width: auto; }
                #dbrPanel .item > p:nth-child(2) { width: auto; }
                #dbrPanel .item > p.flutter { width: auto; }
                #dbrPanel .item > p.xamarin { width: auto; }
            #dbrPanel .item .title { font-size: 22px; }
            #dbrPanel .item .text { font-size: 14px; }

    .new-download-style .applicationSelect { padding: 15px 25px }
    .afterPanel { padding: 0 25px; }
    #dbrPanel.new-item-line .item { display: flex; padding: 10px 25px; }
        #dbrPanel.new-item-line .item > p.title { font-size: 16px; }
        #dbrPanel.new-item-line .item > p.text { margin-right: 0; width: 110px; line-height: 20px; }
        #dbrPanel.new-item-line .item.dotnet > p.text:nth-child(3) { width: 130px; }
        #dbrPanel.new-item-line .item.java > p:nth-child(3) { width: 170px; }
        #dbrPanel.new-item-line .item.ios > p:nth-child(4) { width: 95px; margin-right: 0; line-height: 20px; }
        #dbrPanel.new-item-line .item .bluelink { font-size: 14px; }
        #dbrPanel.new-item-line .item div.download, #dbrPanel.new-item-line .item p.download { text-align: right; align-items: flex-end; }
    /* 2022/08/22 Frank */
    #dbrPanel .item div:nth-child(3) { align-items: flex-start; margin: 0; }

    #dbrPanel .items .item { width: 220px; }


    #dbrPanel .item .dbrDownloadBtn { font-size: 16px; color: #FE8E14; font-family: 'Oswald-Regular'; }
        #dbrPanel .item .dbrDownloadBtn > i { position: relative; top: 2px; margin-left: 10px; }
        #dbrPanel .item .dbrDownloadBtn:hover { color: #FEA543; }
            #dbrPanel .item .dbrDownloadBtn:hover > i { background: url(../../images/icons/download_arrow_hover_20.png) no-repeat; background-size: cover; }

    #dbrPanel .item.oneOne > p:nth-child(2) { width: auto; }
    #dbrPanel .oneOneBtn, .afterPanel .oneOneBtn { border: 2px solid #FE8E14; color: #FE8E14; width: 245px; height: 40px; display: inline-block; font-size: 16px; line-height: 36px; text-align: center; }

    #dbrPanel .item.xamarin > p:first-child { line-height: 20px; }

    #dbrPanel .item .bluelink { font-size: 16px; color: #34717F !important; font-family: 'Oswald-Regular'; /*margin-left: 15px;*/ }
        #dbrPanel .item .bluelink:hover { color: #6AC4BB !important; }
    #dbrPanel.new-item-line .item .bluelink { font-family: OpenSans-Regular; }
    /* other */
    #dbrPanel div.code { display: none; position: relative; background: #F5F5F5; width: 100%; padding: 8px 0px 0; border-top: none; overflow: hidden; transition: max-height ease-out 0.4s; }
    #dbrPanel pre code { font-size: 14px; }

    #dbrPanel div.code .arrow-down { position: absolute; cursor: pointer; height: 60px; width: 60px; top: 25px; right: 30px; display: inline-block !important; font-size: 20px; border: none; transform: rotate(180deg); z-index: 30; transition: opacity .2s ease-in-out; }
        #dbrPanel div.code .arrow-down:hover { opacity: 0.7; }

    /*#dbrPanel .item.python .copied { width: 187px; height: 40px; padding: 0 15px; font-size: 15px; line-height: 40px; top: unset; right: 0px; bottom: -26px; left: 0; z-index: 11; }
    #dbrPanel .item.python .copied:before { top: -19px; left: 83px; border-color: transparent transparent #E5E5E5 transparent; }
    #dbrPanel .item.python .copied .fontOrange { margin-left: 10px; }*/

    .applicationSelect { padding: 0; width: auto; }
    .new-download-style .applicationSelect label.applicationTypeLabel { font-size: 14px; }
    .new-download-style .applicationSelect .d-radio-group { font-size: 14px; margin-left: 0; }
        .new-download-style .applicationSelect .d-radio-group .d-radio { margin-right: 15px; }
            .new-download-style .applicationSelect .d-radio-group .d-radio:last-child { margin-right: 0; }

    #dbrPanel.new-item-line .forDS, #dbrPanel.new-item-line .forMobile { display: none; }
}

@media (max-width: 767.98px) {
    /* next step */
    #next-step .feedback { padding: 20px; }

    #dbrPanel.new-item-line .item > p.text.flex-1 { flex: unset; }
    #dbrPanel { padding-left: 15px; }
        #dbrPanel .item .title { font-size: 18px; }
        #dbrPanel.new-item-line .item > p.title { width: 100%; }
        #dbrPanel .item .bluelink { display: block; margin-left: 0; }
            #dbrPanel .item .bluelink:nth-of-type(2) { margin: 0 0; }
    .applicationSelect label.applicationTypeLabel { margin: auto; margin-bottom: 20px; }
    .d-radio-group { margin-left: 0; }


    #dbrPanel .items { flex-direction: column; width: 100%; }
        #dbrPanel .items .item { width: 100%; display: flex; justify-content: space-between; }
            #dbrPanel .items .item p { width: fit-content; display: inline-block; }
                #dbrPanel .items .item p:first-child { width: fit-content; }
            #dbrPanel .items .item .bluelink { display: inline-block; margin-left: 20px; }

    #dbrPanel.new-item-line .item { display: block; }
        #dbrPanel.new-item-line .item div.download, #dbrPanel.new-item-line .item p.download { text-align: left; margin-top: 15px; }
        #dbrPanel.new-item-line .item > p.text { width: 100% !important; line-height: 26px; }

    #jsDownloadModal .modal-content { padding: 20px; }
        #jsDownloadModal .modal-content p.title { font-size: 18px; }
        #jsDownloadModal .modal-content .note { font-size: 14px; padding: 15px 20px; margin-top: 10px; }

    #dbrPanel.new-item-line .forDS, #dbrPanel.new-item-line .forMobile { display: none; }
}

@media (max-width: 575.98px) {
    #dbrPanel .oneOneBtn, .afterPanel .oneOneBtn { width: 100%; font-size: 14px; }
    /*#dbrPanel .oneOne { border: none !important; }
    #dbrPanel .item { border: none; width: 100%; margin: 0px; margin-bottom: 48px; }
    #dbrPanel .item .title { font-size: 26px; margin-bottom: 21px; }

    #dbrPanel .item .text { font-size: 14px; line-height: 16px; }
    #dbrPanel .item .dbrDownloadBtn { bottom: 15px; }

    #dbrPanel div.code { width: 100%; border-right: 0px; border-left: 0px; left: 0px; padding: 10px; }
    #dbrPanel pre code { width: 100%; word-break: break-all; }
    .item.python .copied { bottom: 138px; width: 100%; text-align: center; font-size: 16px; padding-right: 0px; }*/
}

@media (max-width: 358px) {
    #dbrPanel .items .item { flex-direction: column; }
}
