@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;700&display=swap');

body{
	font-family: 'Raleway';
	overflow: hidden;
	color:#000;
}

.logo{
	width:70px;
	height:26px;
	background:url(../../img/logo.png) left top no-repeat;
	background-size:contain;
	flex-shrink: 0;
}



.scr{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	overflow-y: auto;
}
.scr-btn .wrap{
}



.wrap{
	margin:0 auto;
	max-width:500px;
	padding:20px;
	display: flex;
	flex-direction: column;
	height:100%;
	user-select: none;
}
.wrap-load{
	margin:0 auto;
	max-width:500px;
	padding:20px;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	height:100%;
	user-select: none;
}
.wrap-center{
	padding:30px 0;
	padding-bottom:120px;
}
.help{
	position:fixed;
	right:0px;
	bottom:10px;
	color:#bbb;
	font-size:10px;
	background:#fff;
	padding:5px;
	border-radius: 5px 0 0 5px;
	box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.05);
	display: none;
}


.tabs{
	display: flex;
	max-width:350px;
	margin:0 auto;
	margin-top:40px;
}
.tabs .tab{
	width:50%;
	flex-shrink: 0;
	background:#f5f5f5;
	text-align: center;
	font-size:14px;
	padding:6px 0;
	color:#000;
	cursor: pointer;
}
.tabs .tab:first-child{
	border-radius: 100px 0 0 100px;
	border-right:0;
}
.tabs .tab:last-child{
	border-radius: 0 100px 100px 0;
	border-left:0;
}
.tabs .tab-a{
	background:#757575;
	color:#fff;
}

.btn{
	position: relative;
	padding:15px;
	text-align: center;
	border-radius:10px;
	color:#fff;
	cursor:pointer;
	display: none;
	margin: auto;
	background:#aaa;
	overflow: hidden;
	max-width:460px;
}
.btn-send{
	margin-top:10px;
	cursor: default;
	display: block;
	opacity: 0.5;
	width: 100%;
}
.btn-send-a{
	opacity: 1;
}
.btn-fix{
	position:fixed;
	left:20px;
	bottom:50px;
	right:20px;
}
.btn-input{
	margin-top:10px;
	opacity: 0.5;
	cursor: default;
}
.btn-input-a{
	opacity: 1;
	cursor: pointer;
}

.form-height{
	display: flex;
}


.height-1-1{
	margin-right:5px;
}
.height-1-2{
	margin-left:5px;
}

.btn-glow:after{
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: linear-gradient(to bottom,rgba(229,172,142,0),rgba(255,255,255,.7) 50%,rgba(229,172,142,0));
    transform: rotateZ(60deg) translate(-5em,7.5em);
    opacity: 0;
    animation: blink 3s infinite;
    z-index: 100
}
@keyframes blink{
    0%,79%{
        opacity: 0;
        transform: rotateZ(60deg) translate(-5em,7.5em)
    }
    80%{
        opacity: 0.8;
        transform: rotateZ(60deg) translate(-5em,7.5em)
    }
    95%{
        opacity: 0.8;
        transform: rotateZ(60deg) translate(5em,-11em)
    }
    to{
        opacity: 0;
        transform: rotateZ(60deg) translate(5em,-9em)
    }
}
ul {
    padding:0 30px; /* To remove default left padding */
	 list-style: square outside;
	 margin-top:10px;

}
ul li {
    margin: 5px 0;
    padding-left: 0;
    color: #FF554C;
}
ul li span{
    color: #000;
}

.figure{
	height:210px;
	background:url(../img/m1.png) center center no-repeat;
	background-size:auto 210px;
	overflow: hidden;
	border-radius: 5px;
	text-align: center;
}
.figure img{
	width:30%;
}
.figure-range{
	background:#fff;
	margin-bottom:20px;
	padding:0 20px;
	border: 2px solid #f0f0f0;
	background: #fafafa;
	border-radius: 10px;
}


.progress{
	padding-bottom:0;
	display: flex;
	align-items: center;
	min-height:26px;
	display: none;
}
.progress-back{
	width:26px;
	height:26px;
	flex-shrink: 0;
	margin-right:10px;
	border-radius:100px;
	position: relative;
	border:1px solid #e9e9e9;
	cursor: pointer;
}
.progress-back:before{
	width:26px;
	height:26px;
	background:url(../img/left-arrow.svg) 6px 7px no-repeat;
	background-size:10px auto;
	position: absolute;
	left:0;
	top:0;
	content:'';
	opacity:1;
}
.progress-bar{
	border-radius:5px;
	width:100%;
	height:6px;
	background:#f5f5f5;
	position: relative;
}
.progress-percent{
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	border-radius:5px 0 0 5px;
	border-radius:5px;
	width:0%;
	height:100%;
	background:#9BE048;
	min-width:8px;
	transition: 0.2s;
}
.progress-cnt{
	flex-shrink: 0;
	margin-left:10px;
	border-radius:8px;
	opacity:0.5;
	font-size:12px;
	text-align: right;
}
.head{
	font-weight:700;
	font-size:24px;
	line-height: 1.2em;
}
.page-head{
	font-weight:700;
	font-size:24px;
	line-height: 1.2em;
}
.page-desc {
    margin-top: 20px;
    background: #f5f5f5;
    padding: 15px;
    font-size: 16px;
    border-radius: 10px;
    font-weight: 400;
}
.page-desc-2{
	margin-top:10px;
}
.page-question{
	width:50px;
	height:50px;
	margin:0 auto;
	margin-bottom:10px;
	text-align: center;
	padding:3px;
	background:#fff;
	color:#9BE048;
	font-weight: 900;
	font-size:30px;
	border-radius: 100px;
	box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.07);
}
.page-imt-body-wrap{
	width:140px;
	height:210px;
	margin:0 auto;
	position: relative;
}
.page-imt-body-1{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:url(../img/m1.png) left top no-repeat;
	background-size:140px auto;
	z-index:1;
}
.page-imt-body-2{
	position: absolute;
	left:0;
	top:0;
	width:0%;
	height:100%;
	z-index:2;
	border-right:2px solid #aaa;
	background:#fff;
	animation: lines 5s infinite;
}
.page-imt-body-2 div{
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:#fff url(../img/m5.png) left top no-repeat;
	background-size:140px auto;
	opacity:0.7;
}
@keyframes lines{
	0%{
		width:100%;
	}
	50%{
		width:0%;
	}
	100%{
		width:100%;
	}
}
.page-imt-desc{
	background:#fff;
	padding:15px;
	font-size:16px;
	font-weight: 400;
	border:1px solid #e9e9e9;
	border-radius:10px;
}
.page-imt-line{
	height:5px;
	background:url(../img/imt.png) repeat-y;
	background-size:100% auto;
	border-radius:5px;
	position: relative;
	margin-top:20px;
}
.page-imt-line div {
    width: 4px;
    height: 15px;
    background: #383838;
    position: absolute;
    top: -5px;
    border-radius: 100px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
}
.page-imt-head{
	font-weight:700;
}
.page-imt-text{
	font-size:14px;
	margin-top:10px;
}
.page-imt-number{
	font-weight:900;
	font-size:30px;
	margin-top:20px;
	line-height: 1em;
}
.page-imt-weight{
	font-size:12px;
	background:#FF554C;
	padding:1px 3px;
	display: inline-block;
	border-radius:5px;
	color:#fff;
	margin-top:3px;
}
.page-imt-types{
	display: flex;
	justify-content: space-between;
}
.page-imt-types div{
	width:60px;
	margin-top:5px;
	font-size:12px;
	text-align: center;
	opacity:0.4;
}
.page-imt-types div:first-child{
	text-align: left;
}
.page-imt-types div:last-child{
	text-align: right;
}
.answer{
	margin-top:30px;
}
.question-no .answer{
	opacity:0.5;
}
.text{
	background:#fff;
	height:70px;
	padding:0 15px;
	font-size:16px;
	border-radius:10px;
	position: relative;
	width:100%;
	border:2px solid #f0f0f0;
	border:2px solid #f0f0f0;
	background:#fafafa;
	outline:0;
	text-align: center;
	font-weight: 400;
}
.text-mail{
	margin-top:10px;
	height:50px;
}
.text-holder{
	position:relative;
}
.text-holder div{
	position:absolute;
	left:20px;
	top:0;
	bottom:0;
	font-weight:700;
	margin: auto;
	z-index:5;
	color:#aaa;
	height:24px;
	font-size:14px;
}
.card{
	background:#fff;
	height:80px;
	padding:0 15px;
	font-size:16px;
	margin:10px 0;
	border-radius:10px;
	position: relative;
	/*box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.03);
	box-shadow: 0 3px 8px 0 rgba(0,0,0,.0);*/
	border:2px solid #f0f0f0;
	background:#fafafa;
	display:flex;
	align-items: center;
	line-height: 1.2em;
	padding-left:40px;
	cursor: pointer;
}
.card-img{
	background:url() center center no-repeat;
	background-size:contain;
	width:40px;
	height:40px;
	border-radius: 5px;
	margin-right:8px;
	flex-shrink: 0;
}
.card:before{
	background:#fff;
	border: 2px solid #eee;
	width:20px;
	height:20px;
	border-radius: 100px;
	position:absolute;
	left:15px;
	top:0;
	bottom:0px;
	margin:auto;
	content:'';
	box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.0);
}
.card-a:before{
	background:url(../img/tick.svg) center center no-repeat #9BE048;
	background-size:10px auto;
	border: 2px solid #9BE048;
}
.card-a{
	border: 2px solid #9BE048;
}

.tag{
	display: inline-block;
	-webkit-appearance: none;
	background:#f5f5f5;
	padding:8px 20px;
	font-size:16px;
	border-radius:5px;
	font-weight: 400;
	margin-right:7px;
	margin-bottom:7px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}
.tag-img{
	background:url() center center no-repeat;
	background-size:contain;
	width:20px;
	height:20px;
	border-radius: 5px;
	margin-right:8px;
	flex-shrink: 0;
}
.tag-a{
    color:#fff;
}
.tag-h{
	font-weight:900;
	margin-top:10px;
	margin-bottom:5px;
	font-size:14px;
}

.lock{
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:#fff;
	opacity:0;
	z-index:999;
	display: none;
}
.lock-a{
	display: block;
}



/*
.figure-wrap{
	text-align: center;
}
.figure-img{
	width:120px;
	height:120px;
	background:#fff;
	box-shadow: 0 3px 8px 0 rgba(0,0,0,.05);
	margin:0 auto;
	margin-bottom:20px;
	border-radius: 5px;
}
.black .figure-img{
	background-color:#383838;
}
*/

/*
.range{
	display: flex;
    flex-flow: row wrap;
    position: relative;
}
.range input{
    width:100%;
    height:22px;
    z-index:1;
    cursor:pointer;
    background:transparent;
	appearance: none;
}
.range-progress{
	position:absolute;
	left:10px;
	right:10px;
	display:flex;
	bottom:8px;
    height:12px;
    background-color: transparent;
    background-image: linear-gradient(to left, #e5e5e5, 2px, transparent 2px);
    background-size: calc(14.2857%);
}
.range-progress::before{
	content: '';
    width: 2px;
    height: 12px;
    background: #e5e5e5;
}
.range-progress::after {
    content: '';
    width: 100%;
    height: 2px;
    margin-top: 5px;
    background-color: #e5e5e5;
    background-position: left center, right center;
    background-repeat: no-repeat;
}



input[type=range]::-webkit-slider-thumb {
  margin-top: -6px;
  width: 20px;
  height: 20px;
  background: #9BE048;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #9BE048;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
}
input[type=range]::-ms-thumb {
  width: 20px;
  height: 20px;
  background: #9BE048;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  margin-top: 0px;
}*/


input[type=range] {
  width: 100%;
  background-color: transparent;
  -webkit-appearance: none;
  height:60px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: rgba(221, 221, 221, 0.6);
  border: 0;
  border-radius: 25px;
  width: 100%;
  height: 3px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -10.5px;
  width: 24px;
  height: 24px;
  background: #aaa;
  border: 1px solid rgba(155, 224, 72, 0);
  border-radius: 100px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #eaeaea;
}
input[type=range]::-moz-range-track {
  background: rgba(221, 221, 221, 0.6);
  border: 0;
  border-radius: 25px;
  width: 100%;
  height: 3px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: #aaa;
  border: 1px solid rgba(155, 224, 72, 0);
  border-radius: 100px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 11.5px 0;
  color: transparent;
  width: 100%;
  height: 3px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #d0d0d0;
  border: 0;
  border-radius: 50px;
}
input[type=range]::-ms-fill-upper {
  background: rgba(221, 221, 221, 0.6);
  border: 0;
  border-radius: 50px;
}
input[type=range]::-ms-thumb {
  width: 24px;
  height: 24px;
  background: #aaa;
  border: 1px solid rgba(155, 224, 72, 0);
  border-radius: 100px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(221, 221, 221, 0.6);
}
input[type=range]:focus::-ms-fill-upper {
  background: #eaeaea;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}



.load{
	text-align: center;
	max-width:100%;
	width:200px;
	margin:0 auto;
	position:relative;
}
.loader{
	display: inline-block;
	width: 100px;
	height: 100px;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:0 auto;
	border-radius: 50%;
	box-shadow: -5px -20px 30px 5px #fff inset;
	background: linear-gradient(to right, #ffdd22 50%, transparent 50%);
	animation: spin 0.7s infinite linear;
}
.loader:before{
	display: block;
	content: '';
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background:#fff;
}
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.load-percent{
	width: 100%;
	height: 100px;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	display: flex;
	align-items: center;
	justify-content: center;
	color:#000;
	font-weight: 600;
	font-size:18px;
	text-align: center;
}
.load-text{
	position:absolute;
    left:-60px;
    right:-60px;
    bottom:-50px;
	color:#ccc;
	color:#888;
	font-size:15px;
	line-height: 1.3em;
}
#svg{
	transform: rotate(-90deg);
}
#svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.2s linear;
  stroke: #f5f5f5;
  stroke-width: 0.5em;
}
#svg #bar {
  stroke: #9be048;
  stroke-dashoffset: 565.48px;
}



.modal-bg{
	background:rgba(0,0,0,0.3);
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:700;
	width:100%;
	height:100%;
	position:fixed;
	display: none;
	align-items: center;
	justify-content: center;
	padding:20px;
}
.modal{
	width:100%;
	background:#f8f8f8;
	padding:25px;
	border-radius:5px;
	position: relative;
	width:100%;
	box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.03);
	max-width:500px;
}
.modal-head{
	font-weight:700;
	font-size:20px;
	line-height: 1.2em;
}
.modal-cards{
	margin-top:20px;
}
.modal-card{
	background:#fff;
	height:65px;
	padding:0 15px;
	font-size:16px;
	margin:10px 0;
	border-radius:7px;
	position: relative;
	box-shadow: 0 3px 8px 0 rgba(0,0,0,.05);
	display:flex;
	align-items: center;
	line-height: 1.2em;
	border:2px solid #fff;
	cursor: pointer;
}
.modal-card-img{
	background:url(../img/0.png) center center no-repeat;
	background-size:contain;
	width:30px;
	height:30px;
	border-radius: 5px;
	margin-right:8px;
	flex-shrink: 0;
}
/*
.modal-card:before{
	background:#fff;
	border: 2px solid #eee;
	width:20px;
	height:20px;
	border-radius: 100px;
	position:absolute;
	left:15px;
	top:0;
	bottom:0px;
	margin:auto;
	content:'';
	box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.0);
}
.modal-card-a:before{
	background:url(../img/tick.svg) center center no-repeat #9BE048;
	background-size:10px auto;
	border: 2px solid #9BE048;
}*/

.hidden{
	display: none;
}


.info{
	padding:20px;
	font-size:12px;
	color:#aaa;
	max-width: 500px;
	margin:0 auto;
}
.info a{
	color:#ccc;
	text-decoration: underline;
}
.label{
	padding:10px 0;
	font-size:12px;
	color:#aaa;
	background:url(../img/arr.png) 150px top no-repeat;
	background-size:35px 35px;
	margin-left: 20px;
}
.tick{
	display:flex;
	align-items: center;
	margin-top:10px;
	line-height:1.2em;
	font-size:10px;
	color:#ccc;
}
.tick div{
	width:16px;
	height:16px;
	background:url() center center no-repeat #fff;
	background-size:8px auto;
	flex-shrink: 0;
	margin-right:10px;
	border-radius:3px;
	box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.05);
}
.tick-a div{
	background:url(../img/tick.svg) center center no-repeat #ddd;
	background-size:8px auto;
	box-shadow: 0px 4px 15px 0px rgba(0,0,0,0);
}


body.black{
	background:#292826;
}
.black .logo{
	background-image:url(../../img/logo-w.png);
}
.black .figure-range{
	background-color:#383838;
}
.black .progress-back{
	background:#383838;
}
.black .progress-back:before{
	background-image:url(../img/left-arrow-w.svg);
}
.black .progress-bar{
	background:#383838;
}
.black .progress-cnt{
	color:#fff;
}
.black .head{
	color:#fff;
}
.black .page-head{
	color:#fff;
}
.black .page-desc{
	background:#383838;
	color:#fff;
}
.black .text{
	background:transparent;
	color:#fff;
	border:0;
}
.black .card{
	background:#383838;
	border:2px solid #383838;
	color:#fff;
}
.black .card:before{
	background:#383838;
	border: 2px solid #484848;
}
.black .card-a:before{
	background:url(../img/tick.svg) center center no-repeat #9BE048;
	background-size:10px auto;
	border: 2px solid #9BE048;
}
.black .card-a{
	border: 2px solid #9BE048;
}
.black .tag{
	background:#383838;
	color:#fff;
}
.black .tag-a{
	background:#9BE048;
    color:#fff;
}
.black .lock{
	background:#000;
}
.black .load-percent{
	color:#fff;
}
.black .load-text{
	color:#ccc;
}
.black #svg circle{
	stroke:#383838;
}
.black .modal-bg .modal{
	background:#383838;
}
.black .modal-head{
	color:#fff;
}
.black .modal-card{
	background:#444;
	border-color:#444;
	color:#fff;
}
.black .tick div{
	background-color:#383838;
}
.black .tick-a div{
	background-color:#383838;
}
.black .page-imt-body-2{
	background-color:#292826;
}
.black .page-imt-desc{
	background-color:#383838;
}
.black .page-imt-line div {
    background: #fff;
}
.black .page-imt-desc{
	color:#fff;
}
.black .page-imt-body-2{
	background:#292826;
}
.black .page-imt-body-2 div{
	background-color:#292826;
}
.black ul li span{
    color: #fff;
}
.black .wrap-main .head{
	color:#aaa;
}
.black .wrap-main .main-head-1{
	color:#fff;
}
.black .wrap-main .main-head-2{
	color:#fff;
}
.black .wrap-main .main-head-3{
	color:#fff;
}
.black .wrap-main .main-head-3 span{
	color:#000;
}


.wrap-main{
	height:auto;
}
.wrap-main .main-head-box {
    margin-top:30px;
	margin-bottom:60px;
}
.wrap-main .logo {
    width: 140px;
    height: 40px;
}
.wrap-main .card {
	padding-left: 15px;
	height:100px;
}
.wrap-main .card:after{
	position:absolute;
	content:'';
	z-index:5;
	right:5px;
	top:45px;
	width:50px;
	height:50px;
	background:url(../img/tap.svg);
	background-size:contain;
	animation: blink-2 3.5s infinite;
}
.wrap-main .card:first-child:after{
	animation: blink-1 3.5s infinite;
}
.wrap-main .card:last-child:after{
	animation: blink-3 3.5s infinite;
}
@keyframes blink-1{
	0%{
		opacity: 0;
		top:45px;
	}
	16%{
		opacity: 1;
		top:35px;
	}
	33%{
		opacity: 0;
		top:45px;
	}
	45%{
		opacity: 0;
	}
	66%{
		opacity: 0;
	}
	82%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}
@keyframes blink-2{
	0%{
		opacity: 0;
	}
	16%{
		opacity: 0;
	}
	33%{
		opacity: 0;
		top:45px;
	}
	45%{
		opacity: 1;
		top:35px;
	}
	66%{
		opacity: 0;
		top:45px;
	}
	82%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}
@keyframes blink-3{
	0%{
		opacity: 0;
	}
	16%{
		opacity: 0;
	}
	33%{
		opacity: 0;
	}
	45%{
		opacity: 0;
	}
	66%{
		opacity: 0;
		top:45px;
	}
	82%{
		opacity: 1;
		top:35px;
	}
	100%{
		opacity: 0;
		top:45px;
	}
}

.wrap-main .card:before {
    display: none;
}
.wrap-main .head{
	font-size:14px;
	text-align: center;
	color:#aaa;
	font-weight: 400;
}
.wrap-main .main-head-1{
	text-align: center;
	font-size:12px;
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom:5px;
}
.wrap-main .main-head-2{
	text-align: center;
	font-size:24px;
	font-weight: 900;
	line-height: 1.2em;
}
.wrap-main .main-head-3{
	text-align: center;
	font-size:16px;
	color:#000;
	max-width:350px;
	margin:0 auto;
	margin-top:10px;
}
.wrap-main .main-head-3 span{
	border-bottom:1px solid #ddd;
	background:#ddd;
	padding:1px 10px;
	border-radius:100px;
	white-space: nowrap;
}
.wrap-main .card-img{
	width:60px;
	height:60px;
	background-size:60px auto;
	border-radius: 5px;
	margin-right:15px;
}











@media (prefers-color-scheme: dark) {
	body{
		background:#292826;
	}
	.logo{
		background-image:url(../../img/logo-w.png);
	}
	.wrap-main .card:after{
		background-image:url(../img/tap-w.svg);
	}
	.figure-range{
		background-color:#383838;
		border:0;
	}
	.progress-back{
		background:#383838;
		border:0;
	}
	.progress-back:before{
		background-image:url(../img/left-arrow-w.svg);
	}
	.progress-bar{
		background:#383838;
	}
	.progress-cnt{
		color:#fff;
	}
	.head{
		color:#fff;
	}
	.page-head{
		color:#fff;
	}
	.page-desc{
		background:#383838;
		color:#fff;
	}
	.text{
		background:#383838;
		color:#fff;
		border:0;
	}
	.card{
		background:#383838;
		border:2px solid #383838;
		color:#fff;
	}
	.card:before{
		background:#383838;
		border: 2px solid #484848;
	}
	.card-a:before{
		background:url(../img/tick.svg) center center no-repeat #9BE048;
		background-size:10px auto;
		border: 2px solid #9BE048;
	}
	.card-a{
		border: 2px solid #9BE048;
	}
	.tag{
		background:#383838;
		color:#fff;
	}
	.tag-a{
		background:#9BE048;
	    color:#fff;
	}
	.lock{
		background:#000;
	}
	.load-percent{
		color:#fff;
	}
	.load-text{
		color:#ccc;
	}
	#svg circle{
		stroke:#383838;
	}

	.modal-bg .modal{
		background:#383838;
	}
	.modal-head{
		color:#fff;
	}
	.modal-card{
		background:#444;
		border-color:#444;
		color:#fff;
	}
	.tick div{
		background-color:#383838;
	}
	.tick-a div{
		background-color:#383838;
	}
	.page-imt-body-2{
		background-color:#292826;
	}
	.page-imt-desc{
		background-color:#383838;
	}
	.page-imt-line div {
	    background: #fff;
	}
	.page-imt-desc{
		color:#fff;
	}
	.page-imt-body-2{
		background:#292826;
	}
	.page-imt-body-2 div{
		background-color:#292826;
	}
	ul li span{
	    color: #fff;
	}
	.wrap-main .head{
		color:#aaa;
	}
	.wrap-main .main-head-1{
		color:#fff;
	}
	.wrap-main .main-head-2{
		color:#fff;
	}
	.wrap-main .main-head-3{
		color:#fff !important;
	}
	.wrap-main .main-head-3 span{
		color:#000;
	}
	.page-imt-desc{
		 border:0;
	}
}