@keyframes spin {
    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }
}
/* Title */
.downloadHeader { display: flex; flex-direction: column; align-items: center; }
.downloadHeader h1 { margin-bottom: 45px; font-size: 40px; line-height: 60px; }

/* Application Selection */
.applicationSelect { margin: 0; font-size: 0px; }
.applicationSelect label.applicationTypeLabel { width: 190px; font-size: 24px; margin-right: 15px; margin-bottom: 0; }
.applicationSelect .d-radio-group { width: calc(100% - 220px); vertical-align: top; padding-top: 10px; }
.applicationSelect .d-radio-group .d-radio { width: 394px; margin-bottom: 20px; }
.applicationSelect, .productSelect, #errorLoad { width: 1360px; background: #F5F5F5; padding: 15px 30px; }

.searchBtn { width: 1360px; margin-bottom: 30px; background: #ECECEC; padding: 15px 0; text-align: center }
.searchBtn a { display: inline-block; height: 46px; line-height: 46px; background: #FE8E14; color: #ffffff; padding: 0 70px; font-size: 20px; cursor: pointer; transition: ease-in 0.2s all; }
.searchBtn a:hover { box-shadow: -8px 8px 0 0 #000; transform: translate(8px,-8px); }
.searchBtn a.loading { position: relative; pointer-events: none; opacity: 0.7; }
.searchBtn a.loading:after { content: ""; position: absolute; top: 12px; right: 10px; display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(transparent 15%, #ffffff 85%); animation: spin 2s linear infinite; }
.searchBtn a.loading:before { content: ""; position: absolute; top: 14px; right: 12px; width: 22px; height: 22px; background: #fe8e14; border-radius: 50%; z-index: 1; }
.productSelect .productTypeLabel { width: 190px; font-size: 24px; margin-right: 15px; margin-bottom: 0; }
.productSelect .productCheckList { display: inline-block; vertical-align: top; }
.productSelect .productCheckList .productItem { margin-bottom: 15px; }
.productSelect .productCheckList .productItem:last-child {
    margin-bottom: 0;
}
.productSelect .productCheckList .productItem select { height: 44px; border: 1px solid #323234; width: 300px; font-size: 16px; vertical-align: top; padding-left: 10px; outline: none; }

.productSelect .productCheckList .productItem select option { font-size: 16px; padding: 10px;}

/* Panels */
#dbrPanel { 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 .item.notLoad { display: none; }
#dbrPanel .greyBorderTop { border-top: 8px solid #aaa; }
    #dbrPanel > .item:first-child { margin-bottom: 30px; }
    #dbrPanel > .item:nth-child(4) { margin-bottom: 30px; }
    /*#dbrPanel > .item:last-child { margin-top: 30px; 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:first-child { 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 .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 .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 { 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 { color: #FEA543; border: 2px solid #FEA543; }

#dbrPanel .item .bluelink { font-size: 20px; 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; }

/* 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 { 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 pre { position: relative; }
#dbrPanel pre i.fa-copy { position: absolute; right: 15px; top: 20px; font-size: 18px; cursor: pointer; }
#dbrPanel pre i.fa-copy:hover { color: #34717F; }
#dbrPanel pre code { font-size: 14px; padding: 0; background: #E5E5E5; padding: 20px 35px 20px 15px; }

#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; }

#errorLoad { width: 1360px; background: #F5F5F5; padding: 40px; font-size: 18px; }

/* radio */
.d-radio-group { display: inline-block; font-family: 'OpenSans-Regular'; font-size: 18px; line-height: 24px; margin-left: 8px; }
.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 #323234; margin-right: 12px; 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; }
.d-radio input[type=radio]:disabled {  }
.d-radio input[type=radio]:disabled + span { border-color: #c1c1c1; }
.d-radio input[type=radio]:disabled + span + i { color: #c1c1c1; }
.d-radio:hover input[type=radio]:disabled + span { border-color: #c1c1c1; }


/* Dymansoft Checkbox And Select */
.d-checkbox { display: inline-block; margin-right: 60px; }
.d-checkbox input[type=checkbox] { position: relative; appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; outline: none; }
.d-checkbox input[type=checkbox]:active, input[type=checkbox]:focus { box-shadow: 0; border: 0; }
.d-checkbox input[type=checkbox]:before { display: inline-block; content: ""; color: #323234; font-size: 14px; width: 23px; height: 23px; line-height: 21px; text-align: center; border-radius: 0px; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; vertical-align: middle; border: 1px solid #323234; }
.d-checkbox input[type=checkbox]:hover:before { border-color: #FE8E14; }
.d-checkbox input[type=checkbox]:checked:after { position: absolute; top: 11px; left: 5px; display: table; border: 2px solid #FE8E14; border-top: 0; border-left: 0; transform: rotate(45deg) scale(1) translate(-50%, -50%); opacity: 1; transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; content: ' '; width: 8px; height: 14px; }
.d-checkbox span { display: inline-block; margin-bottom: 0; height: 23px; line-height: 23px; font-size: 18px; vertical-align: middle; margin-left: 10px; height: 46px; line-height: 44px; border: 1px solid #323234; width: 340px; padding: 0 20px; background: #FFFFFF; }

.d-select { display: inline-block; margin-left: 100px; position: relative; }
.d-select .d-select-main { cursor: pointer; }
.d-select .d-select-main label { cursor: pointer; margin-bottom: 0; height: 23px; line-height: 23px; font-size: 18px; vertical-align: middle; margin-right: 10px; }
.d-select .d-select-main i { color: #FE8E14; font-size: 20px; vertical-align: middle; }
.d-select .d-select-options { position: absolute; top: 30px; right: 0; background: #f5f5f5; z-index: 12; display: none; }


#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; }


/* media query */
@media (max-width: 1679px) { /* Title */ .downloadHeader { padding-left: 30px; }
    .downloadHeader h1 { margin-bottom: 15px; font-size: 32px; line-height: 36px; }

    .applicationSelect, .productSelect, .searchBtn, #errorLoad { width: 1140px; }
    /* Application Selection */
    .applicationSelect { font-size: 0px; }
    .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 { display: flex; 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 { display: flex; 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 { 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 { 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) {
    /* 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 { display: flex; 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; }


        #dbrPanel .items { display: flex; 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 { 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 { 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; }
}

@media (max-width: 991.98px) {
    /* 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; }

    #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 { 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: 18px; color: #34717F !important; font-family: 'Oswald-Regular'; /*margin-left: 15px;*/ }
    #dbrPanel .item .bluelink:hover { color: #6AC4BB !important; }

    /* other */
    #dbrPanel div.code { 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; }
}

@media (max-width: 767.98px) {
    #dbrPanel { padding-left: 15px; }
    #dbrPanel .item .title { font-size: 18px; }
    #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 { display: flex; 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;}

    #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; }
}

@media (max-width: 575.98px) {
    #dbrPanel .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; }

}