@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
    font-family:'Droid Sans';
    src: url('../font/droid-sans.eot');
	src: url('../font/droid-sans.eot?#iefix') format('embedded-opentype'),
		url('../font/droid-sans.woff2') format('woff2'),
		url('../font/droid-sans.woff') format('woff'),
		url('../font/droid-sans.svg#Droid Sans') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-2044;
}

@font-face {
    font-family:'Droid Sans';
    src: url('../font/droid-sans-bold.eot');
	src: url('../font/droid-sans-bold.eot?#iefix') format('embedded-opentype'),
		url('../font/droid-sans-bold.woff2') format('woff2'),
		url('../font/droid-sans-bold.woff') format('woff'),
		url('../font/droid-sans-bold.svg#Droid Sans Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-2044;
}

*::before,
*::after {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; outline: none;}
:root {
    --title-font: 'Rubik';
    --content-font: 'Droid Sans';
    --color1: #7E3587;
    --color2: #009FE3;
    --color3: #2B2B51;
    --bg1: #F9EEFB;
    --bg2: #E5F5FC;
}
body{  background:#F9EEFB; font-size:16px; font-family:var(--content-font); font-weight: 400; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

html, body {color: var(--color3); line-height:1.5; padding:0; margin:0; position: relative;}
#loader-wrapper img {height: 80px; left: 50%; margin: -40px 0 0 -40px; position: absolute; top: 50%; width: 80px;}
#loader-wrapper {background: rgba(255,255,255, 0.8); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 999999999;}
#loader {-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; animation: 2s linear 0s normal none infinite running spin; border-color: var(--color1)  transparent transparent; border-image: none; border-radius: 50%; border-style: solid; border-width: 3px; display: block; height: 200px; left: 50%; margin: -100px 0 0 -100px; position: relative; top: 50%; width: 200px;}
#loader::before {-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; animation: 3s linear 0s normal none infinite running spin; border-color: var(--color2) transparent transparent; border-image: none; border-radius: 50%; border-style: solid; border-width: 3px; bottom: 5px; content: ""; left: 5px; position: absolute; right: 5px; top: 5px;}
#loader::after {-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; animation: 1.5s linear 0s normal none infinite running spin; border-color: var(--color1)  transparent transparent; border-image: none; border-radius: 50%; border-style: solid; border-width: 3px; bottom: 15px; content: ""; left: 15px; position: absolute; right: 15px; top: 15px;}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#toTop {background:var(--color1);  border-radius:0; bottom:10px; color: #fff; width: 50px; height: 50px; cursor: pointer; display: none; font-size: 14px; font-weight: 700; text-transform: uppercase;position: fixed; right: 10px; z-index: 999; border-radius: 5px; text-align: center; line-height: 50px}

a {color: var(--color3); text-decoration:none; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; display: inline-block;}
.top-bg{position: fixed; width: 100%; mix-blend-mode: multiply; top: 0px; left: 0px;}
.sidebar{background: #fff; border-radius: 0 30px 30px 0; height: 100vh; width: 320px; top: 0px; left: 0px; position: fixed; z-index: 3; padding: 30px 30px 30px 0; -webkit-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); -moz-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7);}
.sidebar .logo{width: 175px; margin: 0 0 30px 30px}
.sidebar .logo img{width: 100%}
.sidebar ul.sidemenu{margin: 0px; padding: 0px; list-style: none}
.sidebar ul.sidemenu li a{background: #fff; display: flex; font-family:var(--title-font); font-size: 15px; letter-spacing: 0.3px; font-weight: 500; line-height: 24px; padding: 13px 30px; border-radius: 0 25px 25px 0; color: var(--color3); position: relative;}
.sidebar ul.sidemenu li a span{display: none}
.sidebar ul.sidemenu li a::before{content: ''; position: absolute; top: 16px; right: 20px; background: url(../images/right-arrow.png) center center no-repeat; width: 10px; height: 18px; filter: brightness(0) invert(1);}
.sidebar ul.sidemenu li a .icon{width: 24px; height: 24px; margin-right: 16px;}
.sidebar ul.sidemenu li a .icon svg{transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.sidebar ul.sidemenu li a:hover,
.sidebar ul.sidemenu li a.active{background: var(--color1); color: #fff}
.sidebar ul.sidemenu li a:hover .icon svg,
.sidebar ul.sidemenu li a.active .icon svg{filter: brightness(0) invert(1); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.topbar{position: fixed; display: flex; justify-content: space-between; align-items: center; top: 0px; left: 0px; z-index: 2; width: 100%; padding: 15px 30px 15px 350px; background: rgba(255, 255, 255, 0.56); backdrop-filter: blur(50px); -webkit-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); -moz-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7);}
.topbar .left{display: flex; align-items: center;}
.topbar .user{font-size: 13px; line-height: 13px; color: #3F3D3D; letter-spacing: 0.3px; padding: 7px 30px 7px 65px; position: relative; }
.topbar .user .icon{width: 50px; height: 50px; background: var(--color1); line-height: 50px; border-radius: 50%; color: #fff; font-size: 24px; text-align: center; font-weight: 700; position: absolute; top: 0px; left: 0px}
.topbar .user span{display: block; font-size: 18px; line-height: 18px; font-weight: 700; color: var(--color1); text-transform: uppercase; margin-top: 5px}
.topbar .info{font-size: 13px; line-height: 13px; color: #3F3D3D; letter-spacing: 0.3px; padding: 7px 30px; border-left: #C8B2CB 1px dashed}
.topbar .info span{display: block; font-size: 18px; line-height: 18px; font-weight: 700; color: var(--color1); text-transform: uppercase; margin-top: 5px}
.topbar .btn-signout{width: 50px; height: 50px; background: var(--color1); display: flex; align-items: center; justify-content: center; border-radius: 50%}
.topbar .btn-signout:hover{background: var(--color2)}
.main-wapper{padding: 110px 30px 30px 350px;  }
.main-wapper h1{font-family:var(--title-font); font-size:30px; line-height: 36px; color: #2B2B51; font-weight: 300; position: relative; z-index: 1; margin: 0 0 30px 0;}
.main-wapper h1 strong{color: var(--color1); font-weight: 700;}

.main-wapper .white-card-block{background: #fff; border-radius: 20px; -webkit-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); -moz-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7);  position: relative; z-index: 1; margin-bottom: 20px;}
.main-wapper .white-card-block .card-header{display: flex; justify-content: space-between; padding: 20px; border-bottom: #EAD5EE 1px dashed; position: relative;}
.main-wapper .white-card-block .card-header::before{content: ''; position: absolute; top: 20px; left: 0px; width: 5px; height: 28px; background: var(--color1);}
.main-wapper .white-card-block .card-header .title{font-family:var(--title-font); font-size: 18px; line-height: 28px; color: #2B2B51; font-weight: 400; text-transform: uppercase; letter-spacing: 1px;}
.main-wapper .white-card-block .card-header a{color: var(--color1); font-weight: 700; font-size: 16px;}
.main-wapper .white-card-block .card-header a svg{margin-left: 15px;}

.test-info-block{padding: 20px; border-bottom: #EAD5EE 1px dashed;}
.test-info-block .test-top{display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.test-info-block .test-top h2{font-family: var(--title-font); font-weight: 500; font-size:24px; color: var(--color1); line-height: 28px; letter-spacing: 0.5px; margin: 0px;}
.test-info-block .test-top h2 span{display: block; font-size: 12px; line-height: 14px; color: #2B2B51; font-weight: 400; margin-top: 5px;}
.test-info-block .test-top .btn-download{background: var(--color1); font-size: 16px; line-height: 22px; font-weight: 700; color: #fff; padding: 12px 30px; border-radius: 25px}
.test-info-block .test-top .btn-download svg{margin-right: 12px; vertical-align: top;}
.test-info-block .test-top .btn-download:hover{background: var(--color2)}
.test-info-block .chart-number{margin: 0px -10px; padding: 0px; list-style: none; display: flex;}
.test-info-block .chart-number li{padding: 0 10px; width: 25%;}
.test-info-block .chart-number li .chart-block{width: 100%; border: #EAD5EE 1px dashed; padding: 20px; height: 166px; border-radius: 15px; position: relative;}
.test-info-block .chart-number li .chart-block span{position: absolute; top: 50%; left: 50%; font-size: 20px; font-family: var(--title-font); font-weight: 400; line-height: 24px; text-align: center; margin-left: -35px; margin-top: -18px;}
.test-info-block .chart-number li .number-block{width: 100%;  border: #EAD5EE 1px dashed; padding: 30px 20px 25px 20px; text-align: center; font-size: 14px; color:#20D17C; font-weight: 700; border-radius: 15px;}
.test-info-block .chart-number li .number-block .number{background: #20D17C; border-radius: 50%; width: 78px; height: 78px; color: #fff; line-height: 78px; text-align: center; font-size: 42px; font-weight: 700; margin: 0 auto 10px auto;}
.test-info-block .chart-number li .number-block.green{border: #20D17C 1px dashed; background: #F0FFF8; color: #20D17C;}
.test-info-block .chart-number li .number-block.green .number{background: #20D17C;}
.test-info-block .chart-number li .number-block.yellow{border: #FBBB21 1px dashed; background: #FFFBF1; color: #FBBB21;}
.test-info-block .chart-number li .number-block.yellow .number{background: #FBBB21;}
.test-info-block .chart-number li .number-block.red{border: #E6544C 1px dashed; background: #FFF4F3; color:#E6544C ;}
.test-info-block .chart-number li .number-block.red .number{background: #E6544C;}

.attention-area{padding: 15px 20px;}
.attention-area .sub{font-size: 16px; font-family: var(--title-font); font-weight: 500; letter-spacing: 0.5px; color: #000; line-height: 20px;}
.attention-area .result-block{border: #EAD5EE 1px dashed; border-radius: 15px; margin-top: 15px;}
.attention-area .result-block .parameter-info{padding: 15px 25px; display: flex; justify-content: space-between; font-size: 18px; line-height: 22px; color: var(--color1); font-weight: 700;;}
.attention-area .result-block .parameter-info span.yellow{background: #FBBB21; color: #2B2B51; font-size: 13px; line-height: 22px; border-radius: 6px; padding: 0 12px; text-transform: uppercase;}
.attention-area .result-block .parameter-info span.red{background: #E6544C; color: #fff; font-size: 13px; line-height: 22px; border-radius: 6px; padding: 0 12px; text-transform: uppercase;}
.attention-area .result-block .result_area {width: 100%; display: flex;align-items: center;  position: relative;}
.attention-area .result-block .result_area .lower-red{width: 20% ;margin-right: 3px; position: relative;}
.attention-area .result-block .result_area .lower-red .progress {height: 10px ; background-color: #E6544C;}
.attention-area .result-block .result_area .lower-red .result-detail {text-align: center;width: 100%; position:absolute;  font-size: 10px;line-height: 10px; margin-top: 10px; color: #E6544C ;}
.attention-area .result-block .result_area .lower-yellow{width: 20% ;margin-right: 3px; position: relative;}
.attention-area .result-block .result_area .lower-yellow .progress {height: 10px ; background-color:#FBBB21;}
.attention-area .result-block .result_area .lower-yellow .result-detail {text-align: center; width: 100%;position: absolute;font-size: 10px;line-height: 10px; margin-top: 10px; color: #FBBB21;}
.attention-area .result-block .result_area .normal-green{width: 20% ;margin-right: 3px; position: relative;}
.attention-area .result-block .result_area .normal-green .progress {height: 10px ; background-color:#20D17C;}
.attention-area .result-block .result_area .normal-green .result-detail {text-align: center;width: 100%;position: absolute;font-size: 10px;line-height: 10px; margin-top: 10px; color: #20D17C;}
.attention-area .result-block .result_area .higher-yellow{width: 20% ;margin-right: 3px; position: relative;}
.attention-area .result-block .result_area .higher-yellow .progress {height: 10px ;  background-color:#FBBB21;}
.attention-area .result-block .result_area .higher-yellow .result-detail {text-align: center;width: 100%;position: absolute;font-size: 10px;line-height: 10px; margin-top: 10px; color: #FBBB21;}
.attention-area .result-block .result_area .higher-red{width: 20% ; position: relative;}
.attention-area .result-block .result_area .higher-red .progress {height: 10px ; background-color: #E6544C;}
.attention-area .result-block .result_area .higher-red .result-detail {text-align: center;width: 100%; position: absolute; font-size: 10px;line-height: 10px; margin-top: 10px; color: #E6544C ;}
.attention-area .result-block .result_area .normal-range {position: absolute; left: 50%; top: -25px; margin-left: -10.5px; font-size: 14px;}
.attention-area .result-block .result_area .test-range{position: absolute; left: 50%; top: -25px; margin-left: -10.5px;  font-size: 24px;}
.attention-area .result-block .pd{padding: 20px 25px 30px 25px; margin: 0 0 15px 0;}
.attention-area .result-block .result-text{text-align: center; font-size: 15px; line-height: 18px; font-weight: 700; color: var(--color3); margin: 0 0 15px 0;}
.attention-area .result-block p{margin: 0px; text-align: center; border-top:#EAD5EE 1px dashed; background: #F9EEFB; border-radius: 0 0 15px 15px; padding: 15px 20px; font-size: 13px; line-height: 18px; letter-spacing: 0.5px; color: var(--color1);}

.chart-area-pd{padding: 20px 20px 40px 20px;}
.chart-area-pd .form-select{border: #E1E1E1 1px solid; font-size: 16px; color: var(--color3); font-weight: 700; line-height: 28px; padding: 10px 20px; margin: 0 0 30px 0;}
.chart-area-pd .form-select:focus{box-shadow: none;}
.chart-area-pd .chart-main-area{height: 620px; max-width: 1000px; position: relative;  margin: 0 auto;}
.chart-area-pd .chart-main-area canvas{width: 100% !important; height: 100% !important;}
.chart-area-pd .chart-main-area .custom-y-bar{position: absolute; top: 0px; left: 8px; height: 100%; padding:7px 0 20px 0}
.chart-area-pd .chart-main-area .custom-y-bar .high-red-area{position: relative;  background: #E6544C; width: 10px; border-radius: 10px;}
.chart-area-pd .chart-main-area .custom-y-bar .low-red-area{position: relative; background: #E6544C; width: 10px; border-radius: 10px;}
.chart-area-pd .chart-main-area .custom-y-bar .high-red-area span{position: absolute; right: 18px; color: #000; color: #000; font-size: 12px; top: -20px; line-height: 12px; font-weight: 600}
.chart-area-pd .chart-main-area .custom-y-bar .low-red-area span{position: absolute; right: 18px; color: #000;  font-size: 12px; bottom: -20px; line-height: 12px; font-weight: 600}
.chart-area-pd .chart-main-area .custom-y-bar .high-yellow-area{position: relative; background: #FBBB21; width: 10px; border-top: #fff 2px solid; border-radius: 10px;}
.chart-area-pd .chart-main-area .custom-y-bar .low-yellow-area{position: relative; background: #FBBB21; width: 10px; border-bottom: #fff 2px solid; border-radius: 10px;}
.chart-area-pd .chart-main-area .custom-y-bar .high-yellow-area span{position: absolute; right: 18px; color: #000; color: #000; font-size: 12px; top: -20px; line-height: 12px; font-weight: 600}
.chart-area-pd .chart-main-area .custom-y-bar .low-yellow-area span{position: absolute; right: 18px; color: #000;  font-size: 12px; bottom: -20px; line-height: 12px; font-weight: 600}
.chart-area-pd .chart-main-area .custom-y-bar .normal-green-area{position: relative; border-top: #fff 2px solid; border-bottom: #fff 2px solid;  width: 10px; border-radius: 10px;}
.chart-area-pd .chart-main-area .custom-y-bar .high-yellow-area .range-top{position:absolute; right: 15px; color: #000; font-size: 12px; line-height: 12px; font-weight: 600}
.chart-area-pd .chart-main-area .custom-y-bar .low-yellow-area .range-bottom{position:absolute; right: 15px; color: #000; font-size: 12px; line-height: 12px; font-weight: 600}

ul.result-list{margin: 0px; padding: 0px; list-style: none; position: relative; z-index: 2}
ul.result-list li{margin-bottom: 15px}
ul.result-list li .result-block{background: #fff; border-radius: 20px; -webkit-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); -moz-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
ul.result-list li .result-block .result-titlebar{display: flex; align-items: center; justify-content: space-between;  padding: 15px 20px; cursor: pointer;}
ul.result-list li .result-block .left-part{display: flex; align-items:center;}
ul.result-list li .result-block .chart{width: 100px; height: 90px; margin-right: 30px}
ul.result-list li .result-block .info{font-family:var(--title-font); font-size: 18px; line-height: 125.7%; color: var(--color1); font-weight: 500; padding-right: 70px; border-right:#C8B2CB 1px dashed}
ul.result-list li .result-block .info span{display: block; font-size: 14px; color: #000; font-weight: 400}
ul.result-list li .result-block .info.no-border{border-right: none; padding-left: 70px}
ul.result-list li .result-block .btn-download{background: var(--color1); font-size: 16px; line-height: 22px; font-weight: 700; color: #fff; padding: 12px 30px; border-radius: 25px}
ul.result-list li .result-block .btn-download svg{margin-right: 12px; vertical-align: top;}
ul.result-list li .result-block .btn-download:hover{background: var(--color2)}
ul.result-list li:hover .result-block{position: relative; z-index: 2;transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-box-shadow: 0px 0px 100px 0px rgba(180,140,188,0.6); -moz-box-shadow: 0px 0px 100px 0px rgba(180,140,188,0.6); box-shadow: 0px 0px 100px 0px rgba(180,140,188,0.6);}
ul.result-list li .result-block .result-content{border-top: #C8B2CB 1px dashed; padding: 20px}
.tab-area{display: flex; align-items: center; flex-direction: row-reverse; justify-content: space-between; position: relative; z-index: 1; margin: 0 0 22px 0}
.tab-area h1{margin: 0px}
.tab-area ul.inner-tab{margin: 0px; padding: 5px; list-style: none; display: flex; background: #fff; border-radius: 30px}
.tab-area ul.inner-tab li a{background: #fff; display: flex; align-items: center; padding: 10px 20px; border-radius: 30px}
.tab-area ul.inner-tab li a .icon{width: 22px; height: 22px; margin-right: 15px}
.tab-area ul.inner-tab li a .icon svg{width: 100%; height: 100%; vertical-align: top; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.tab-area ul.inner-tab li a:hover,
.tab-area ul.inner-tab li a.active{background: var(--color1); color: #fff}
.tab-area ul.inner-tab li a:hover .icon svg,
.tab-area ul.inner-tab li a.active .icon svg{filter: brightness(0) invert(1); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

.form-area{padding: 20px}
.form-area .md-10{margin: 0 -10px}
.form-area .pd-10{padding: 0 10px}
.form-area .map-location{width: 100%; height: 360px; border-radius: 10px; overflow: hidden; margin-bottom: 30px; position: relative;}
.form-area .map-location iframe{width: 100%; height: 100%}
.form-area .map-location .btn-current{position: absolute; top: 15px; right: 15px; background: var(--color1); color: #fff; border: none; padding: 10px 25px; font-size: 16px; border-radius: 25px}
.form-area h2{margin: 0 0 20px 0; font-size: 20px;}
.form-area .input-block{position: relative; padding-top: 7px; margin-bottom: 16px;}
.form-area .input-block label{font-size: 12px; line-height: 14px; color: var(--color1); position: absolute; top: 0px; left: 10px; background: #fff; padding: 0 11px; font-weight: 700;}
.form-area .input-block .form-control{border: #E4CFE7 1px solid; border-radius: 5px; font-size: 16px; line-height: 20px; color: #3C3C6D; padding: 14px 20px;}
.form-area .input-block .form-control:focus{border: var(--color1) 1px solid; box-shadow: none;}
.form-area .input-block .form-select{border: #E4CFE7 1px solid; border-radius: 5px; font-size: 16px; line-height: 20px; color: #3C3C6D; padding: 14px 20px;}
.form-area .input-block .form-select:focus{border: var(--color1) 1px solid; box-shadow: none;}
.form-area small{display: block; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--color1); margin: 0 0 15px 0}
.form-area .choose-id-flex {display: flex; align-items: center; margin-bottom: 14px;}
.form-area .choose-id-flex h2{margin: 0px 15px 0px 0px; font-size: 18px; font-weight: 700;}
.form-area .radio-list{margin: 0px; padding: 0px; list-style: none; display: flex;}
.form-area .radio-list li{margin-right: 10px}
.form-area .radio { display: block; position: relative;cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0px;}
.form-area .radio input {position: absolute; opacity: 0;cursor: pointer; display: none;}
.form-area .radio .checkmark {background: #fff; border:#EBDBED 1px solid; color: var(--color1); font-size: 14px; font-weight: 700; padding: 8px 15px; display: block; border-radius: 30px}
.form-area .radio .checkmark:after {content: ""; position: absolute; display: none;}
.form-area .radio input:checked ~ .checkmark{background: #EBDBED;}
.form-area .radio input:checked ~ .checkmark:after { display: block;}
.form-area .form-input--file{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; color: var(--color1); border: #E4CFE7 1px solid; display: flex; flex-direction: column; border-radius: 5px; text-align: center; align-items: center; padding: 45px 15px; margin-bottom: 15px}
.form-area .form-input--file .form-input-file {opacity: 0;visibility: hidden;position: absolute;top: 0;left: 0;}
.form-area .form-input--file svg{width: 70px; height: 70px; margin-bottom: 10px}
.form-area .btn-update{background: var(--color1); font-size: 16px; line-height: 22px; font-weight: 700; color: #fff; padding: 12px 30px; border-radius: 25px; border: none}
.form-area .btn-update:hover{background: var(--color2)}

ul.order-history-list{margin: 0px; padding: 0px; list-style: none; position: relative; z-index: 1}
ul.order-history-list li{margin: 0 0 10px 0}
ul.order-history-list li .order-info-block{background: #fff; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-radius: 10px; -webkit-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); -moz-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
ul.order-history-list li:hover .order-info-block{position: relative; z-index: 2;transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-box-shadow: 0px 0px 100px 0px rgba(180,140,188,0.6); -moz-box-shadow: 0px 0px 100px 0px rgba(180,140,188,0.6); box-shadow: 0px 0px 100px 0px rgba(180,140,188,0.6);}
ul.order-history-list li .order-info-block .left-part{display: flex; align-items:center; width: 75%}
ul.order-history-list li .order-info-block .info{font-family:var(--title-font); font-size: 16px; line-height: 120%; color: var(--color1); font-weight: 500; padding:0 30px; border-right:#C8B2CB 1px dashed; }
ul.order-history-list li .order-info-block .info span{display: block; font-size: 14px; color: #000; font-weight: 400}
ul.order-history-list li .order-info-block .info.id{width:15%; padding-left: 10px}
ul.order-history-list li .order-info-block .info.date{width:40% }
ul.order-history-list li .order-info-block .info.amount{width:20% }
ul.order-history-list li .order-info-block .status{width: 25%; padding-left: 30px; line-height: 120%;}
ul.order-history-list li .order-info-block .status span{display: block; font-size: 14px; color: #000; font-weight: 400}
ul.order-history-list li .order-info-block .status strong{font-family:var(--title-font); font-size: 16px;  font-weight: 500; }
ul.order-history-list li .order-info-block .btn-area{display: flex; width: 25%; justify-content:flex-end;}
ul.order-history-list li .order-info-block .btn-reschedule{background: var(--color2); font-size: 14px; line-height: 16px; font-weight: 400; color: #fff; padding: 10px 25px; border-radius: 25px; margin-right: 10px}
ul.order-history-list li .order-info-block .btn-view{background: var(--color1); font-size: 14px; line-height: 16px; font-weight: 400; color: #fff; padding: 10px 25px; border-radius: 25px}

.address-list-area{padding: 20px}
.address-list-area ul{margin: 0px -7px; padding: 0px; list-style: none; display: flex; flex-wrap: wrap;}
.address-list-area ul li{padding: 0 7px; margin-bottom: 14px; width: 33.33%}
.address-list-area ul li .address-block{border: #C8B2CB 1px dashed; position: relative; padding: 15px 45px 15px 15px; border-radius: 15px}
.address-list-area ul li .address-block .type{font-family:var(--title-font); font-size: 18px; color: var(--color3); font-weight: 700; display: flex; align-items: center; margin-bottom: 10px; padding-bottom: 10px; position: relative;}
.address-list-area ul li .address-block .type::before{content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; border-bottom:#C8B2CB 1px dashed; height: 1px}
.address-list-area ul li .address-block .type .icon{background: var(--color1); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 10px; margin-right: 10px}
.address-list-area ul li .address-block .type .icon svg{width: 100%; height: 100%}
.address-list-area ul li .address-block p{font-size: 14px; color: var(--color3); font-weight: 400; line-height: 18px; margin: 0px; min-height: 36px}
.address-list-area ul li .address-block .btnarea{position: absolute; top: 25px; right: 45px; display: flex;}
.address-list-area ul li .address-block .btnarea a{width: 20px; height: 20px; margin-left: 15px}
.address-list-area ul li .address-block .btnarea a img{width: 100%; height: 100%; vertical-align: top}
.address-list-area ul li .address-block .btn-vw{position: absolute; top: 48px; right: -48px; background: #F9EEFB; border-top: #C8B2CB 1px dashed; color: var(--color3); width: 126px; font-size: 12px; text-align: center; line-height: 30px; transform: rotate(-90deg); border-radius: 0 0 15px 15px;}
.address-list-area ul li .address-block .btn-vw:hover{background: var(--color1); color: #fff}
.address-list-area ul li .address-block .btn-vw.primary{background: var(--color1); color: #fff}

.order-detail-page{background: #fff; border-radius: 20px; padding: 20px; -webkit-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); -moz-box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7); box-shadow: 0px 0px 25px 0px rgba(234,219,237,0.7);  position: relative; z-index: 1; margin-bottom: 20px;}
.order-detail-page ul.order-info-list{margin: 0px -8px; padding: 0px; list-style: none; display: flex; flex-wrap: wrap;}
.order-detail-page ul.order-info-list li{width: 33.33%; padding: 0 8px; }
.order-detail-page ul.order-info-list li .inner-border{font-family: var(--title-font); font-size: 18px; line-height: 125.7%; color: var(--color1); font-weight: 500; border: #C8B2CB 1px dashed; padding: 8px 15px; border-radius: 8px}
.order-detail-page ul.order-info-list li .inner-border strong{display: block; font-size: 14px; color: #000; font-weight: 400}
.order-detail-page ul.order-info-list li:last-child{width: 100%; margin-top: 16px; }


@media (min-width: 768px) and (max-width: 1024px){
    .sidebar{bottom: 0px; top: auto; width: 100%; height: auto; padding: 0px}
    .sidebar .logo{display: none; }
    .sidebar ul.sidemenu{display: flex;}
    .sidebar ul.sidemenu li{width: 16.66%}
    .sidebar ul.sidemenu li a{display: block;  padding: 10px 0px 5px 0px; font-size: 0px; letter-spacing: 0; font-weight: 500; line-height: 10px; text-align: center; border-radius: 5px 5px 0px 0px}
    .sidebar ul.sidemenu li a span{font-size: 10px; display: block;}
    .sidebar ul.sidemenu li a .icon{margin: 0 auto}
    .sidebar ul.sidemenu li a::before {content: none}
    #toTop{display: none !important}

    .topbar{padding: 10px 15px}
    .topbar .info{display: none}
    .topbar .user{padding: 2px 20px 2px 55px}
    .topbar .user .icon{width: 40px; height: 40px; line-height: 40px; font-size: 18px}
    .topbar .btn-signout{width: 40px; height: 40px; padding: 12px}
    .topbar .btn-signout img{width: 100%}
    .main-wapper{padding: 60px 0px 40px 0px}
    .main-wapper h1{font-size: 18px; line-height: 26px; padding: 10px 15px; margin: 0px;}

    .main-wapper .white-card-block{border-radius: 0px;}
    .main-wapper .white-card-block .card-header{padding: 10px; border-radius: 0px;}
    .main-wapper .white-card-block .card-header .title{font-size: 16px; line-height: 22px;}
    .main-wapper .white-card-block .card-header a{font-size: 14px;}
    .main-wapper .white-card-block .card-header::before {content: none;}
    .test-info-block{padding: 10px;}
    .test-info-block .test-top{margin-bottom: 15px;}
    .test-info-block .test-top h2{font-size: 16px; line-height: 20px;}
    .test-info-block .test-top .btn-download{font-size: 14px; line-height: 18px; padding: 8px 20px; text-align: center;}
    .test-info-block .test-top .btn-download svg{height: 18px;}
    .test-info-block .chart-number{flex-wrap: wrap; }
    .test-info-block .chart-number li:first-child{width: 100%;}
    .test-info-block .chart-number li{width: 33.33%; margin-bottom: 10px;}
    .test-info-block .chart-number li .chart-block{border-radius: 6px;}
    .test-info-block .chart-number li .number-block{padding: 5px; display: flex; align-items: center; border-radius: 6px;}
    .test-info-block .chart-number li .number-block .number{width: 24px; height: 24px; line-height: 24px; font-size: 14px; margin: 0px 10px 0px 0px;}
    .attention-area{padding: 10px;}
    .attention-area .sub{font-size: 13px;}
    .attention-area .result-block{margin-top: 10px; border-radius: 6px;}
    .attention-area .result-block .parameter-info{padding: 10px; font-size: 14px;}
    .attention-area .result-block .parameter-info span.yellow{font-size: 10px;}
    .attention-area .result-block .pd{padding: 20px 10px 30px 10px;}
    .attention-area .result-block .result-text{font-size: 12px; line-height: 14px; margin: 0 0 10px 0;}
    .attention-area .result-block p{border-radius: 0 0 6px 6px; padding: 10px; font-size: 10px; line-height: 15px;}
    .chart-area-pd{padding: 10px 10px 20px 10px;}
    .chart-area-pd .form-select{font-size: 14px; line-height: 20px; padding: 8px 15px;}
    .chart-area-pd .chart-main-area { height: 300px; max-width: 580px;}

    .tab-area{ margin: 15px 0px}
    .tab-area ul.inner-tab{padding: 2px; margin-right: 15px}
    .tab-area ul.inner-tab li a{font-size: 14px; text-align: center; padding: 8px 20px; }
    .tab-area ul.inner-tab li a .icon{width: 20px; height: 20px; margin: 0px 5px 0px 0px;}
    .form-area{padding: 10px}
    .form-area small{font-weight: 400}
    .form-area .choose-id-flex {display: block;}
    .form-area .choose-id-flex h2{margin: 0 0 10px 0}

    ul.order-history-list li .order-info-block{border-radius: 0px; padding: 10px}
    ul.order-history-list li .order-info-block .info{font-size: 15px; padding: 0 20px}
    ul.order-history-list li .order-info-block .status strong{font-size: 15px}
    ul.order-history-list li .order-info-block .status{padding-left: 20px}
    ul.order-history-list li .order-info-block .status span{line-height: 120%}
    .address-list-area{padding: 15px}
    .address-list-area ul li{width: 50%}

}
@media (max-width: 767px) {
    .sidebar{bottom: 0px; top: auto; width: 100%; height: auto; padding: 0px}
    .sidebar .logo{display: none; }
    .sidebar ul.sidemenu{display: flex;}
    .sidebar ul.sidemenu li{width: 16.66%}
    .sidebar ul.sidemenu li a{display: block;  padding: 10px 0px 5px 0px; font-size: 0px; letter-spacing: 0; font-weight: 500; line-height: 10px; text-align: center; border-radius: 5px 5px 0px 0px}
    .sidebar ul.sidemenu li a span{font-size: 10px; display: block;}
    .sidebar ul.sidemenu li a .icon{margin: 0 auto}
    .sidebar ul.sidemenu li a::before {content: none}
    #toTop{display: none !important}

    .topbar{padding: 10px 15px; box-shadow: none}
    .topbar .info{display: none}
    .topbar .user{padding: 2px 20px 2px 55px}
    .topbar .user .icon{width: 40px; height: 40px; line-height: 40px; font-size: 18px}
    .topbar .btn-signout{width: 40px; height: 40px; padding: 12px}
    .topbar .btn-signout img{width: 100%}
    .main-wapper{padding: 60px 0px 40px 0px}
    .main-wapper h1{font-size: 18px; line-height: 26px; padding: 10px 15px; margin: 0px;}

    .main-wapper .white-card-block{border-radius: 0px;}
    .main-wapper .white-card-block .card-header{padding: 10px; display: block; border-radius: 0px;}
    .main-wapper .white-card-block .card-header .title{font-size: 16px; line-height: 22px;}
    .main-wapper .white-card-block .card-header a{font-size: 14px;}
    .main-wapper .white-card-block .card-header::before {content: none;}
    .test-info-block{padding: 10px;}
    .test-info-block .test-top{display: block;}
    .test-info-block .test-top h2{font-size: 16px; line-height: 20px; margin: 0 0 10px 0;}
    .test-info-block .test-top .btn-download{font-size: 14px; line-height: 18px; padding: 8px 20px; width: 100%; text-align: center;}
    .test-info-block .test-top .btn-download svg{height: 18px;}
    .test-info-block .chart-number{flex-wrap: wrap; margin: 0px;}
    .test-info-block .chart-number li{width: 100%; padding: 0px; margin-bottom: 5px;}
    .test-info-block .chart-number li .chart-block{border-radius: 6px;}
    .test-info-block .chart-number li .number-block{padding: 5px; display: flex; align-items: center; border-radius: 6px;}
    .test-info-block .chart-number li .number-block .number{width: 24px; height: 24px; line-height: 24px; font-size: 14px; margin: 0px 10px 0px 0px;}
    .attention-area{padding: 10px;}
    .attention-area .sub{font-size: 13px;}
    .attention-area .result-block{margin-top: 10px; border-radius: 6px;}
    .attention-area .result-block .parameter-info{padding: 10px; font-size: 14px;}
    .attention-area .result-block .parameter-info span.yellow{font-size: 10px;}
    .attention-area .result-block .pd{padding: 20px 10px 30px 10px;}
    .attention-area .result-block .result-text{font-size: 12px; line-height: 14px; margin: 0 0 10px 0;}
    .attention-area .result-block p{border-radius: 0 0 6px 6px; padding: 10px; font-size: 10px; line-height: 15px;}
    .chart-area-pd{padding: 10px 10px 20px 10px;}
    .chart-area-pd .form-select{font-size: 14px; line-height: 20px; padding: 8px 15px;}
    .chart-area-pd .chart-main-area { height: 130px; max-width: 260px;}

    .tab-area{display: block; margin: 0px}
    .tab-area ul.inner-tab{width: 100%; border-radius: 0px; padding: 0px}
    .tab-area ul.inner-tab li{width: 33.33%}
    .tab-area ul.inner-tab li a{font-size: 10px; display: block; text-align: center; padding: 6px 15px; border-radius: 0 0 5px 5px;}
    .tab-area ul.inner-tab li a .icon{width: 20px; height: 20px; margin: 0px auto 4px auto;}
    .form-area{padding: 10px}
    .form-area small{font-weight: 400}
    .form-area .choose-id-flex {display: block;}
    .form-area .choose-id-flex h2{margin: 0 0 10px 0}
    .form-area .btn-update{width: 100%; margin: 0 0 10px 0}

    ul.order-history-list li{margin: 0 0 5px 0}
    ul.order-history-list li .order-info-block{display: block; border-radius: 0px}
    ul.order-history-list li .order-info-block .left-part{display: block; width: 100%}
    ul.order-history-list li .order-info-block .btn-area{width: 100%;}
    ul.order-history-list li .order-info-block .info{width: 100% !important; padding: 8px 0 !important; border-bottom: #C8B2CB 1px dashed; border-right: none; display: flex; justify-content: space-between; font-size: 14px}
    ul.order-history-list li .order-info-block .status{width: 100%; display: flex; justify-content: space-between; padding: 8px 0}
    ul.order-history-list li .order-info-block .status strong{font-size: 14px}
    ul.order-history-list li .order-info-block .btn-reschedule{font-size: 13px; line-height: 13px; width: 50%; margin: 0 5px 0 0; text-align: center;}
    ul.order-history-list li .order-info-block .btn-view{font-size: 13px; line-height: 13px; width: 50%; margin: 0 0 0 5px; text-align: center;}

    .address-list-area{padding: 10px}
    .address-list-area ul li{width: 100%}

}