@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body{max-width:100%;background:#f3f6f9;color:#4c5968;font-family: 'Roboto', sans-serif;letter-spacing:.5px;font-size:14px;font-weight:300; margin: 0; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);position:relative;}
*, *::before, *::after { box-sizing: border-box; }
a{text-decoration:none;color:#4c5968;}
a:hover{color:rgb(30 39 47 / 74%);}
ul{list-style:none;}
::-webkit-scrollbar-track{background-color:#fff;}
::-webkit-scrollbar{width:5px;background-color:transparent;}
::-webkit-scrollbar-thumb{background-color: #cacfd8;}
.container{background:#f3f6f9;width:100%;max-width: 700px;margin-right: auto; margin-left: auto;position:relative;padding:3px 20px 17px;}
.btn_outline { border: 1px solid #aeb8c4; cursor: pointer; border-radius: 14px; font-size: 15px; padding: 10px 30px; color: #a7aaad; background: transparent; font-weight: 700; margin: 1rem auto; text-align: center; display: block; max-width: 60%; }
.dop-Convert-preloader{display: flex; align-items: center; justify-content: center;}
/*** navigation ***/
.doplogo{width: calc(100% - 80px); max-width:200px; padding:0px 20px; height: auto;margin:0 auto;}
.dop-converter-add-btn{background: #f6f7f8; border-radius: 7px; padding: 15px 20px 10px 11px; position: relative; font-size: 19px!important; line-height: 0; display: inline-block!important;margin: 0!important;}
.dop-converter-add-btn span{background: #e90606; color: #fff; border-radius: 100%; font-size: 11px; position: absolute; top: 4px; right: 4px; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center;}
.dop-converter-log-btn{border:1px solid hsl(225deg 50% 20% / 35%); border-radius: 5px; background: #fff; padding: 8px 12px; font-size: 15px!important; color: hsl(225deg 50% 20% / 66%)!important; display: inline-block!important; }
.dop-converter-mobnav { position: relative; z-index: 50; top: 0; width: 100%; max-width: 100%; background: #f3f6f9; height: 45px; padding-top: 10px; display: flex; }
/*** navigation /***/
/*** banner ***/
.dopconverter-banner{background:#fff;border-radius:20px;box-shadow:0px 9px 15px rgb(154 155 176 / 17%);padding:55px 14px 49px;text-align:center; min-height:30vh;}
.dopconverter-banner h4{font-size:1.2rem;margin:0px 0px 5px;color:#4c5968;text-transform:uppercase;}
.dopconverter-banner h2{font-size:1.74rem; line-height: 1; margin: 0px; font-weight: 900; color: #4c5968;}
.dopconverter-banner .file-input{position: relative; width: 100%;}
.dopconverter-banner .file-input{position: relative; width: 100%; max-width:180px ; display: block; margin: 1.5rem auto;}
.dopconverter-banner .file-input .file-input__input{width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute;z-index: -1;-webkit-appearance: none; -moz-appearance: none;}
.dopconverter-banner .file-input .file-input__label{cursor: pointer; display: inline-flex; align-items: center; border-radius:14px;width:100%;
font-size:15px; padding:10px 12px; justify-content:center;color:#fff;background:#18af64;font-weight:700;}
.dopconverter-banner .file-input .file-input__label span{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dopconverter-banner h6{color: #aeb8c4; font-size: 13px; margin: 3px auto 18px; max-width:90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dopconverter-banner h6 a{color: #aeb8c4; font-size:13px; margin: 3px 0px 18px;text-decoration: underline;font-weight:normal;}
.dopconverter-banner .arrow{color:#aeb8c4;font-size:30px;line-height:0;}
.dopconverter-banner p{color: #8b929b; font-size: 12px; margin: 8px auto 0;}
.dopconverter-banner p a{color: #aeb8c4; border-bottom: 1.5px solid rgb(174 184 196 / 63%);}
.dopconverter-banner h3{font-size:1.56rem;margin:0px;font-weight:900;color:#4c5968;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.dopconverter-banner .dopconverter-btnarea{display: flex; align-items: center; justify-content: center;margin:1.5rem auto;}
.dopconverter-banner .dop-Convert-dropdown{width:100%;margin:5px;}
.dopconverter-banner .dop-conversion-dropdown{color: #303030; width: 100%; text-align-last: center;border-radius: 14px; font-size: 16px;
  padding:12px 27px 12px 9px; background-color:rgb(174 184 196 / 68%); border: 0; outline: inherit; appearance: none;
  -moz-appearance: none; -webkit-appearance: none; background-image: url('../img/chevron-down.svg'); background-repeat: no-repeat;
  background-position: calc(100% - 12px) center; background-size: 12px;overflow: hidden; text-overflow: ellipsis;}
.dopconverter-banner .dop-conversion-dropdown optgroup, .dopconverter-banner .dop-conversion-dropdown option{background:#fff;font-size:14px;}
.dopconverter-banner .dop-conversion-dropdown select:checked ~ .dopconverter-banner .dop-conversion-dropdown option{text-transform: lowercase;}
.dopconverter-banner .dop-Convert-btn{position:relative;width:100%;margin:5px;}
.dopconverter-banner .dop-Convert-btn input{cursor: pointer; display: inline-flex; align-items: center; border-radius:14px;width:100%;border:0;
font-size:14px; padding:12px 6px; justify-content:center;color:#fff;background:#18af64;font-weight:600;-webkit-appearance: none; -moz-appearance: none;}
.dopconverter-banner .dop-c-dwn-btn{width: auto; max-width: 180px; margin: 5px auto 20px;}
.dopconverter-banner-p{color: #8b929b; font-size: 12px; margin: 8px auto 0; text-align: center;}
.dopconverter-banner-p a{color: #8b929b; border-bottom: 1.5px solid rgb(139 146 155 / 63%);}
.dopconverter-banner-p a:hover{color:#6b6b6b;border-bottom: 1.5px solid rgb(109 113 119 / 63%);}
/*** banner /***/
/*** slider ***/
/*** src: https://codepen.io/dennykuo/pen/XXMRvW ***/
.dop-convert-slider{background: #fff; border-radius:20px; box-shadow: 0px 9px 15px rgb(154 155 176 / 17%); padding:12px 10px 10px;}
.dop-convert-slider .dop-c-slidecontent ul{list-style: none; padding-inline-start: 0px; display: flex; margin: 0;}
.dop-convert-slider .dop-c-slidecontent li{padding:3px;width:50%;text-align:center;}
.dop-convert-slider .dop-c-slidecontent li:nth-child(1){border-right:1px solid rgb(228 232 236 / 50%);}
.dop-convert-slider .dop-c-slidecontent span{font-size:28px;}
.dop-convert-slider .dop-c-slidecontent .slider-textarea{padding-top: 5px;}
.dop-convert-slider .dop-c-slidecontent h5{margin:0;font-size:14px;color:#4c5968;}
.dop-convert-slider .dop-c-slidecontent p{margin:5px 0px;font-size:12px;color:#aeb8c4;}
/**** slider work ****/
.dop-c-slidecontent { width: 100%; min-height:50px; }
.radio {display: none;}
.dop-c-sliderarea { overflow: hidden; top: 0; bottom: 0; left: 0; right: 0; width: 100%; }
.dop-c-sliderarea-inner { width: 500%; transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  position: relative; display: flex; align-items: center;}
.dop-c-slide { width: 20%; float: left; }
.dop-c-slide { transition: all 1s ease-out; }
/* Move slides overflowed container */
#slide1:checked ~ .dop-c-sliderarea .dop-c-sliderarea-inner { margin-left: 0; }
#slide2:checked ~ .dop-c-sliderarea .dop-c-sliderarea-inner { margin-left: -100%; }
#slide3:checked ~ .dop-c-sliderarea .dop-c-sliderarea-inner { margin-left: -200%; }
/* Calculate AUTOPLAY for SLIDES */
@keyframes slide {
  0%, 25.203252032520325%	{ margin-left: 0; }
  33.333333333333336%, 58.53658536585366%	{ margin-left: -100%; }
  66.66666666666667%, 91.869918699187%	{ margin-left: -200%; }
}
.dop-convert-slider > #play1:checked ~ .dop-c-sliderarea .dop-c-sliderarea-inner { animation: slide 12300ms infinite; }
/**** slider work /****/
/*** slider /***/
/*** dop-top-converters ***/
.dop-top-converters-h5{font-size:1.2rem;margin:0px 0px 20px;color:#aeb8c4;}
.dop-top-converters{list-style:none;padding-inline-start: 0px;display:flex;flex-wrap:wrap;margin:0;}
.dop-top-converters li{width: calc(50% - 5px); padding:20px 9px; margin-bottom: 10px; display: flex; align-items: center; background: #fff; border-radius: 14px; box-shadow: 0px 9px 15px rgb(154 155 176 / 17%);}
.dop-top-converters li:nth-child(odd){margin-right:10px;}
.dop-top-converters li i{font-size: calc(2rem + 1.5vw);}
.dop-top-converters .details{padding-left: 9px;}
.dop-top-converters li h6{font-size:16px;margin:0px;color:#4c5968;text-transform: uppercase;}
.dop-top-converters li h6 span{text-transform:lowercase;}
.dop-top-converters li p{color:#aeb8c4;font-size:9.5px;margin:2px 0 0;text-transform: capitalize;}
/*** dop-top-converters /***/
/*** dop-convert-footer ***/
.dop-convert-footer{position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;padding:10px;max-width:100%;display: flex;background:#fff;min-height:50px;box-shadow:0px -9px 15px rgb(154 155 176 / 17%);}
.dop-convert-footer ul{list-style:none;padding-inline-start: 0px;display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;margin:0px;}
.dop-convert-footer li{color:#aeb8c4;font-size:25px;margin:5px 10px;width:calc(25% - 20px);text-align:center;}
.dop-convert-footer li a{color:#aeb8c4;}
.dop-convert-footer li.active a{color:#4c5968;}
/*** dop-convert-footer ***/
/*** media query ***/
@media (min-width:400px) {
.dop-convert-slider .dop-c-slidecontent h5{font-size:16px;}
.dop-convert-slider .dop-c-slidecontent p{font-size:14px;}
.dop-top-converters-h5{font-size:1.3rem;}
.dop-top-converters li h6{font-size:16px;}
.dop-top-converters li p{font-size:12px;}
}
/*** media query ***/
/*** converters-page ***/
.dop-all-converters a{margin-left: 8px; font-weight: 400; font-size:18px;display:grid;}
.dop-all-converters a span{font-size:14px;}
.dopconverts-dropdown{color: #fff; width: 100%; text-align-last: center; border-radius: 14px; font-size: 16px; padding: 12px 33px 12px 9px;
  background-color:#18af64; border: 0; outline: inherit; appearance: none; -moz-appearance: none; -webkit-appearance: none;
  background-image: url(../img/chevron-down-2.svg); background-repeat: no-repeat; background-position: calc(100% - 14px) center; background-size: 14px;
  overflow: hidden; text-overflow: ellipsis;}
.dopconverts-dropdown option{background:#fff;color:#303030;}
/*** support-page***/
.dop-converter-support{background: #fff; border-radius: 14px; box-shadow: 0px 9px 15px rgb(154 155 176 / 17%);padding:27px 26px 32px;}
.dop-converter-support h5{color:#4c5968;margin:0px 0px 14px;}
.dop-converter-support h5 span{margin-right: 3px;}
.dop-converter-support p{color:#8e8e8e;font-size:12px;}
.dop-converter-support a{color: #1581bf; font-weight: 400; display: block; margin-top: 1.5rem;}
/*** dopconverter-single-category ***/
.dopconverter-single-category{background: #fff; border-radius: 20px; box-shadow: 0px 9px 15px rgb(154 155 176 / 17%); padding: 20px; margin: 0;text-align:center;}
.dopconverter-single-category h4 { font-size: 23px; margin: 10px 0px; }
.dopconverter-single-category i { font-size: 66px; }
.dopconverter-single-category p { color: #8e8e8e; font-weight: 300;font-size:12px;}
/*** home-progressbar ***/
.dopconverter-banner .progress-container{left: calc(7% + (44px / 2)); width: calc(80% - (44px / 2)); height: auto; position: relative; display: flex; align-items: center; z-index: 1;}
.dopconverter-banner .progress-container .progress{height: 7px; display: flex; overflow: hidden; line-height: 0; font-size: 0.75rem; border-radius: 0.25rem; width: 100%; background: rgb(24 175 100 / 47%); }
.dopconverter-banner .progress-container .stripe .progress-bar{ background-size: 30px 30px; -moz-background-size: 30px 30px; -webkit-background-size: 30px 30px;
-o-background-size: 30px 30px; margin-left: 0px;
background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.30) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0.30) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(25%,rgba(255,255,255,0.2)), color-stop(25%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.2)), color-stop(75%,rgba(255,255,255,0.2)), color-stop(75%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.30) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0.30) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.30) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0.30) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
background-image: linear-gradient(135deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.30) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0.30) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
}
/*** home-progressbar-animation ***/
.dopconverter-banner .progress-container .animate { animation: progress 5s linear infinite; -moz-animation: progress 5s linear infinite;
-webkit-animation: progress 5s linear infinite; -ms-animation: progress 5s linear infinite; -o-animation: progress 5s linear infinite; }
@-webkit-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } }
@-moz-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } }
@-ms-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } }
@-o-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } }
@keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } }
/*** home-progressbar end ***/
/*** page-load-animation ***/
.container{animation: fadein 1.5s; -moz-animation: fadein 1.5s; /* Firefox */-webkit-animation: fadein 1.5s; /* Safari and Chrome */ -o-animation: fadein 1.5s; /* Opera */ }
@keyframes fadein { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity: 1; } }
/*** page-load-animation end***/
/*** preloader ***/
.loader {width: 50px; aspect-ratio: 1; border-radius: 50%; border: 8px solid #0000; border-right-color: #dbd6cd97; position: relative; animation: l24 1s infinite linear; }
.loader:before, .loader:after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: inherit; animation: inherit; animation-duration: 2s; }
.loader:after { animation-duration: 4s; }
@keyframes l24 { 100% {transform: rotate(1turn)} }
/*** preloader end***/