@charset "UTF-8";

/* CSS reset */
body{margin:0;padding:0;}html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, input, button,textarea{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}ol, ul{list-style:none;}a{text-decoration:none;}hr,br{clear:both;}blockquote, q{quotes:none;}blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}input, button, textarea, select{*font-size:100%;}body{line-height:180%;}ol, ul, li{list-style:none;}:link,:visited , ins{text-decoration:none;}blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;} section, article, aside, footer, header, nav, main{display:block;}*,*::before,*::after{-moz-box-sizing:border-box;box-sizing:border-box;}
body{overflow-x: hidden; height: 100vh; font-size: 16px;font-family:"Arial","Microsoft Jhenghei", "微軟正黑體",sans-serif;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#30c5cb+0,330968+80 */background: #30c5cb; /* Old browsers */background: -moz-linear-gradient(-20deg,  #30c5cb 0%, #330968 80%); /* FF3.6-15 */background: -webkit-linear-gradient(-20deg,  #30c5cb 0%,#330968 80%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(160deg,  #30c5cb 0%,#330968 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30c5cb', endColorstr='#330968',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

/*default*/
.clear{clear: both;}.clear:before, .clear:after {content:""; display:table; clear:both;} 
.al-c{text-align: center;}
.al-l{text-align: left;}
.al-m{position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;}
.fl-r{float: right;}
.margin-c{display: block;margin: 0 auto;}
.mobile-show{display: none;}
a:hover,*{transition: all 0.1s ease-in-out 0s;}
hr{opacity: .2; }


/*theme*/
.theme{color: #ffae00;}
.sub{color: #174e72;}
.bg-theme{background-color: #ffae00;}
.f-o{color: #fff;}
.f-gr{color: #a2a2a2;}
.f-p{color: #EF02B6;;}





/*font*/
h1,h2,h4,h4,h5{font-weight: 600;}
h2{font-size: 24px;}
h3{font-size: 20px;}
h4{font-size: 18px;}
h6{font-size: 15px;}
.f-lg{font-size: 24px;}
.f-md{font-size: 18px;}
.f-nr{font-size: 14px;}
.f-xs{font-size: 12px;transform: scale(0.95);transform-origin: 0 0;}

/*login*/
#particles-js canvas{ display: block!important; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#330968+0,30c5cb+100 */background: #330968; /* Old browsers */background: -moz-linear-gradient(top,  #330968 0%, #30c5cb 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top,  #330968 0%,#30c5cb 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom,  #330968 0%,#30c5cb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#330968', endColorstr='#30c5cb',GradientType=0 ); /* IE6-9 */} /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
.login canvas{display: none!important;} 
.login-main{position: relative;}
.login-content,.login-main{z-index: 2;}
.login-panel:before,.login-panel:after{content: url(../img/common/panel.png);position: absolute;z-index: 1;left: 0;}
.login-panel:before{top: 6%;transform: scale(.98);opacity: .6;}
.login-panel:after{top: 11%;transform: scale(.92);opacity: .4;}
.login-content{position: absolute;top: 0;left: 0;padding: 0 30px;}
.login-content h2{padding-top: 10px;font-weight: 300;}
.login-footer{position: absolute;bottom: 30px;width: 100%;text-align: center;}
.login-footer span{margin: 0 10px;}
.login-form{margin-top: 50px;width: 280px;}
.login-form i{font-size: 24px;position: absolute;left: 30px;}
.login-form input{outline:none;background-color: transparent;color: #fff;}
.login-form > div{border-bottom: 1px solid #ffae00;margin-bottom: 30px;padding-left: 35px;}
.login-form button{width: 100%;}
.login-sub{text-decoration: underline;display: flex;justify-content: space-between; padding-top: 20px;}
.login-sub a{text-decoration: underline;}
.login-sub a:hover{text-decoration: none;}
.login-form select{margin-left: -5px;font-size: 16px;}


/********************layout********************/
.site-header{background-color: rgba(0,0,0,.4);padding: 5px 15px 0;position: relative;z-index: 9;}
.main-content {padding-left: 230px;}
.sidebar{min-height: 90vh;width: 230px;float: left;z-index: 9;position: relative;}
.main-area{padding: 0 30px 10px;}
.content-area{height: calc(100vh - 180px);min-width: 969px;}
.area-header{margin-bottom: 20px;}
.questionnaire-area .area-header,.questionnaire-area-page-header-tool{position: sticky;width: 100%;height: 30px;top: 0;}


/*scroll*/
.scroll-area{overflow-y: scroll;width: calc(100% + 20px);overflow-x: hidden;position: relative;}
.scroll-wrapper{padding-right: 10px;}
.default-scroll-area{width: calc(100% + 50px);}
.default-scroll-area .scroll-wrapper{width: calc(100% - 25px);}
.scroll-area-site-expand-table{height: calc(100vh - 300px);}
.questionnaire-area,.default-scroll-area{height: calc(100vh - 240px);}
.page-area{height: calc(100vh - 200px);}
.Test-Base-scroll-area{height: calc(100vh - 560px);margin-top: 20px;}
.Answer-Users-area{height: calc(100vh - 480px);margin-top: 20px;}
.settings-area{height: calc(100vh - 410px);}
.Management-area{height: calc(100vh - 330px);}
.Base-Category-area{height: calc(100vh - 360px);}
.full-scroll-area{height: calc(100vh - 300px);width: calc(100% + 40px);}
.recycling-scroll-area{height: calc(100vh - 330px);}
/*header*/
.site-header > *{display: inline-block;}
.page-logo img{width: 75px;display: block;position: relative;top: 3px;}
.menu-trigger{cursor: pointer;margin: 0 20px;position: relative;top: 2px;}
.menu-trigger:hover{opacity: .7;}
.menu-trigger div {width: 22px;height: 2px;background-color: #fff;margin: 5px 0;}
.menu-trigger div:nth-child(1){width: 24px;}
.menu-trigger div:nth-child(2){width: 18px;}
.header-nav{float: right;color: #848484;}
.header-nav a{color: #fff;}.header-nav a:hover,.search-trigger:hover{opacity: .5;}
.header-nav i,.sidebar-nav i{font-size: 20px;position: relative;top: 2px;margin-right: 8px;position: relative;width: 20px;text-align: center;}
.header-nav,.header-nav > *{display: flex;flex-wrap: nowrap;}
.header-info li{margin-right: 30px;}
.header-info i{margin-right: 5px;}
.header-nav .sub-nav{display: none;position: absolute;position: absolute;background: transparent;left: 0;top: 0;padding-top: 44px;min-width: 105px;width: calc(100% + 10px);}
.header-nav .sub-nav li{background-color: #ffae00;border: 1px solid #8f8f8f; border-top: 0;}
.w-sub-nav:hover .sub-nav,.navopen .sub-nav{display: block;}
.nav-w-arrow:hover{opacity: .6;} 
.sub-nav a{padding: 3px 5px;color: #fff;display: block;}
.w-sub-nav{cursor: pointer;position: relative;font-size: 13px;}
.profilepic img{width: 30px;display: block;border-radius: 100px;margin-right: 8px;}
.nav-w-arrow:after{content: '\e90a';font-family:'esa-font';color: #d3b14f;font-size: 13px;position: relative;top: 2px;}
.w-sub-nav span:after{margin-left: 10px;}
.header-info-user{padding-top: 5px;}

/*main-content*/
.open .main-content{padding-left: 50px;}
.page-header { padding: 10px 30px; letter-spacing: 0.01em; position: relative;min-width: 969px;}
.page-header h2 i{margin-right: 10px;font-size: 30px;}
.page-header h2{font-size: 30px;}
.breadcrumb {padding-left: 48px; display: flex;margin-top: 10px;line-height: 1;}
.breadcrumb .current{font-weight: 600;transform: scale(1);}
.breadcrumb > div:after{content: '/';padding: 0 10px;}
.breadcrumb > div:last-child:after{display: none;}
.page-header-tool{padding: 20px 0 10px;display: flex;justify-content: space-between;}
.page-header-tool-btn-group{position: absolute;right: 30px;top: 0;} 
.page-header-tool-btn-group > *{display: inline-block;}
.view-filter{text-align: right;}
.view-filter > *{display: inline-block;margin-left: 10px;font-size: 12px;}
.questionnaire-area-page-header-tool{justify-content:flex-end;height: auto;}
.questionnaire-area-page-header-tool .site-btn{width: 40px;height: 40px;line-height: 40px;font-size: 20px;}

/*sidebar*/
.open .sidebar{width: 50px;}
.open .sidebar .sidebar-nav > li > h6 span,.open .sidebar .sidebar-nav > li ul{display: none;}
.open .sidebar-nav > li > h6{padding-left: 5px;}
.open .sidebar-nav > li.w-sub-nav > h6:after,.open .company-logo,.open .sidebar-nav > li.current.w-sub-nav .sidebar-subnav {display: none;}
/*.sidebar-nav > li:hover > .sidebar-subnav{display: block;}*/
.sidebar-nav li{padding: 4px 10px;border-bottom: 1px solid rgba(255,255,255,.3);text-shadow: 1px 1px 5px rgba(0,0,0,.3);position: relative;}
.sidebar-nav > li.w-sub-nav > h6:after{content: '\e90e';font-family:'esa-font';color: #d3b14f;font-size: 12px;position: absolute;right: 0;}

.sidebar-nav li a,.sidebar-nav > li.w-sub-nav > h6{color: #fff;}
.sidebar-nav li a:hover,.sidebar-nav li.current > h6 a,.sidebar-nav li.current .sidebar-subnav .selected a,
.sidebar-nav li.current > h6,.sidebar-nav > li.w-sub-nav > h6:hover
{color: #d3b14f;}.sidebar-subnav a:hover,.sidebar-nav li.current .sidebar-subnav .selected a{text-decoration: underline;}
.sidebar-nav > li > h6{font-size: 14px;}
.sidebar-subnav{display: none;padding-left: 25px;}
.sidebar-nav li > .sidebar-subnav li{border-bottom: 0;padding: 0 10px;line-height: 1.8;}
.sidebar-subnav h6{font-size: 13px;}
.sidebar-nav > li.current.w-sub-nav .sidebar-subnav{display: block;}
.company-logo{width: 90px;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}
.bubble{background-color:#f86b4f;border-radius: 100px;min-width: 20px;height: 20px;position: absolute;right: 0;top: 10px;font-size: 12px;color: #fff;line-height: 20px;padding: 0 5px;}
.sidebar-nav > li.w-sub-nav.select .sidebar-subnav,.sidebar-nav > li.w-sub-nav.current .sidebar-subnav{display: block;}
.sidebar-nav > li.w-sub-nav.select > h6:after,.sidebar-nav > li.w-sub-nav.current > h6:after{content: '\e90a';}


/*.site-expand-table*/
.site-expand-table{font-size: 13px;min-width: 969px;}
.site-expand-table .expand-table-btn-group .site-btn:hover{background-color: #e09703;}
.site-expand-table > li.open,.site-expand-table > li:hover{box-shadow: 0 0 15px rgba(79,193,233,.8);}
.site-expand-table .expand-table-column{flex-grow: 2;border-right: 1px dashed #fff;}
.site-expand-table .expand-table-btn-group{border-right: 0;}
.site-expand-table .expand-table-column.main{flex-grow: 4;}
.site-expand-table-link{display: flex;flex-wrap: nowrap;}
.site-expand-table-link > a {margin-right: 20px;position: relative;padding-top: 3px;}
.site-expand-table-link > a:after{content: '>';position: absolute;left: calc(100% + 5px);}
.site-expand-table-link > a:last-child:after{display: none;}

/*questionnaire-nav*/
.questionnaire-nav{display: flex;justify-content: space-between;}
.questionnaire-nav li{min-width: 15%;}
.questionnaire-nav li a{text-align: center; position: relative; z-index: 1;white-space: nowrap; display: block;background-color: #0b202b;color: #8f8f8f;padding: 5px 25px;-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;}
.questionnaire-nav li a.current,.questionnaire-nav li a:hover{color: #d3b14f;background-color: rgba(2,7,12,.4); z-index: 3;}
.questionnaire-nav li a.current:before,.questionnaire-nav li a:hover:before{content: '';width: 100%;height: 100%;box-shadow: 0 -2px 4px rgba(79,193,233,.8);position: absolute;left: 0;top: 0;background-color: transparent;z-index: 1;}
.questionnaire-area,.questionnaire-nav li a.current,.page-area{background-color: rgba(2,7,12,.4);}
.questionnaire-area,.page-area{ overflow: hidden; padding: 20px 20px; position:relative;z-index: 2;  box-shadow: 0 0 5px rgba(79,193,233,.8);}
.questionnaire-area{-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;}



/*questionnaire-new*/ 
.questionnaire-new .form-item > label,.questionnaire-new h4{width: 135px;text-align: right;margin-right: 5px;vertical-align: top;}
.questionnaire-new h4{margin-bottom: 10px;font-size: 15px;text-align: left;text-shadow: 1px 1px 2px rgba(0,0,0,.3);}
.questionnaire-new .form-item{margin-bottom: 15px; }
.questionnaire-new .form-item > *,.inlind-form .form-item > *{display: inline-block;}
.questionnaire-new .form-item > label + *{width: calc( 100% - 150px );}
.questionnaire-new .item_inline_hack_head{padding-left: 145px;}
.questionnaire-new .form-item-w-btn > label,.questionnaire-new .form-item-auto > label{width: 200px;} 
.questionnaire-new .form-item-w-btn input{width: calc( 100% - 380px );}
.questionnaire-new .form-item-w-btn button,.form-default .form-item-w-btn button{margin-left: 10px;top: 3px;padding: 0 20px;}
.questionnaire-new .form-item-auto > label + *{width: auto;}

/*page-area*/
.page-area{border-radius: 5px;}
.page-area .area-content > h4{font-size: 15px;text-shadow: 1px 1px 2px rgba(0,0,0,.3);}
.default-form-btn-group{position: relative;text-align: right;padding-top: 5px;}
.form-Temperature .item_hack.form-item > label + *{max-width: 43%!important;}
.paging > *{margin-left: 5px;}
.paging input{width: 45px;padding: 0 5px;text-align: center;}
.paging-inline{margin-right: 20px;position: relative;top: 50px;}
/*table-scroll*/
.table-scroll{table-layout:fixed;width:100%;*margin-left:-100px;font-size:12px;}
.table-scroll td,.table-scroll th{vertical-align:top;width:100px;}
.table-scroll th:first-child{position:absolute;*position:relative;left:0;width:130px;}
.table-scroll th:nth-child(2){position:absolute;*position:relative;left:130px;width:130px;}
.table-fixed-wrapper{overflow-x:scroll;overflow-y:visible;width:calc(100% - 235px);margin-left:260px;}
/*analysis-list*/
.analysis-list{background-color: rgba(0,0,0,.4);padding: 10px 10px 10px 20px;}
.analysis-list > li{list-style: inside decimal;border-bottom: 1px solid rgba(255,255,255,.1);padding-bottom: 20px;margin-bottom: 20px;} 
.analysis-item h5{font-size: 15px;font-weight: 300;display: inline; }
.analysis-item h6{font-size: 12px;width: 50%;}
.question-answer-analysis-list li > *,.analysis-content > div{display: inline-block;min-width: 30px;vertical-align: top;}
.answer-percent{width: 30%;}
.question-answer-analysis-list li{border-bottom: 1px dashed rgba(255,255,255,.3);padding: 5px 0;}
.question-answer-analysis-list li:first-child{border-top: 1px dashed rgba(255,255,255,.3);}
.analysis-item-main{width: 60%;}.analysis-item-main + div{width: 39%;}
.meter {box-sizing: content-box;height: 12px;position: relative;margin: 0 0 0 5px;background: #111;border-radius: 25px;width: 70%;display: inline-block;}
.meter > span {display: block;height: 100%;border-radius: 20px;position: relative;overflow: hidden;}
.meter > span:after{content: "";position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 1;border-top-right-radius: 8px;border-bottom-right-radius: 8px;border-top-left-radius: 20px;border-bottom-left-radius: 20px;overflow: hidden;}
.question-answer-analysis-list li .meter > span ,.meter1.meter > span{background-color: #77C4FA;}
.question-answer-analysis-list li:nth-child(2n) .meter > span ,.meter2.meter > span{background-color: #00A7BD;}
.question-answer-analysis-list li:nth-child(3n) .meter > span ,.meter3.meter > span{background-color: #1C75FF;}
.question-answer-analysis-list li:nth-child(4n) .meter > span ,.meter4.meter > span{background-color: #790EE7;}
/*chart-tabs*/
.chart-tabs-nav{text-align: right;}
.chart-tabs-nav > *{display: inline-block;margin-left: 10px;}
.chart-tabs{overflow: visible!important;}
.chart-tabs .table{position: relative;left: -155%;width: 255%;padding: 10px;min-height: 250px;top: 5px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#113542+0,13102e+100 */
background: rgb(17,53,66); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(17,53,66,1) 0%, rgba(19,16,46,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(17,53,66,1) 0%,rgba(19,16,46,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(17,53,66,1) 0%,rgba(19,16,46,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#113542', endColorstr='#13102e',GradientType=1 ); /* IE6-9 */
}
/*recycling-chart-area*/
.recycling-chart-area{margin-bottom: 20px;}
.recycling-chart-area > div{display: inline-block;background-color: rgba(0,0,0,.4);height: 300px;overflow: hidden;}
.recycling-chart-area > div{width: calc(33.3% - 5px);padding: 10px 20px;vertical-align: top;}
.recycling-chart-area > div h5{color:#fff;text-align: center;}
.recycling-chart-area > .main-recycling-chart-area{width: calc(66.6% - 20px);margin-right: 20px;}
.chartcanvas{height: 220px ; }
.chart-desc{ line-height: 1.3;padding: 10px 0;}
.analysis-content{padding-top: 10px;}
.chart-display{margin-top: -35px;}
.chartcontent{height: 180px;}
.piechart.chartcanvas{height: 170px!important ;width: auto!important;}
.analysis-table{border:1px dotted #fff;width: 100%;}
.analysis-table th,.analysis-table td{padding: 5px;border:1px dotted #fff;text-align: center;}


/*form*/
input:-moz-placeholder,textarea:-moz-placeholder{color:#a2a2a2;}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#a2a2a2;}
input,textarea{padding: 0 15px;background-color: transparent;border: 0;}
.form-default,.questionnaire-new{ font-size: 13px;}
.form-default .form-item > label{text-align: right;margin-right: 5px;vertical-align: top;}
.form-default .form-item{margin-bottom: 5px; }
.form-default .form-item > *{display: inline-block;}
.site-select{width: 100%;  background-image: url(../img/common/down-chevron.png);background-repeat: no-repeat;background-position: right 10px; height: 30px;position: relative;z-index: 2;cursor: pointer;line-height: 1;border: 0;background-color: transparent;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
select.site-select option {color: #666;}
.form-default .site-select-wrapper select{background-position: 95% 10px;padding-left: 10px;background-size: 12px;color: #8f8f8f;}
.form-default .form-item-w-btn button{top:0;}
.form-block .form-item > label{display: block;width: 100%!important;text-align: left;}
.form-cols-inline .form-item{display: inline-block;}
.form-hint {opacity: .8;margin-left: 5px;}
 input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus { -webkit-text-fill-color: #a2a2a2;-webkit-box-shadow: 0 0 0px 1000px transparent inset;transition: background-color 5000s ease-in-out 0s;padding: 0 15px;background-color: transparent;border: 0;}

  /*form-round-dark*/
.form-round-dark input,.form-round-dark.site-select-wrapper{background-color:#1d3e5c;color: #fff;border-radius: 100px; }
.form-round-dark.site-select-wrapper{border: 0!important;}
.form-round-dark  select.site-select{background-position: 75% 10px;padding-right: 30px;background-size: 13px auto;}
.form-round-dark > *{margin-left: 10px;}
  /*form-dark*/
.form-dark input,.form-round-dark.site-select-wrapper,.form-dark .site-select-wrapper,.default-input,.form-dark textarea{background-color:#0b202b;color: #fff;}
.form-dark input,.form-dark .site-select-wrapper,.default-input,.form-dark textarea{border: 1px solid #4fc1e9;}
.form-dark{border-radius: 0;}
.form-dark input:focus { outline:none;border-color:#4fc1e9;box-shadow:0 0 5px #4fc1e9;}
  /*form-cols*/
.form-cols .form-item > label {width: 130px;} 
.form-cols .form-item > label + *,.form-cols-3 .form-item > label + *{width: calc( 100% - 140px );} 
.form-cols-3 > div.form-item:nth-child(3n){margin-right: 0;}
.form-cols-3 .btn-group-float{width: calc(33.3% - 9px);text-align: left!important;}
.form-cols-3 .btn-group-float > *{width: calc(50% - 5px);margin: 0 5px 0 0;}
.form-cols-3 .btn-group-float.btn-group-float-3 > *{width: calc(33% - 5px);}
.form-cols-10{padding: 0 50px;}
.form-cols .form-item-w-btn > label + *{width: auto!important;} 
.form-cols-10 .form-item > label {width: 160px;} 
.form-cols-10 .form-item > label + *{width: calc( 100% - 170px );} 
.form-cols-10.form-block .form-item > label + *{width: calc( 100%);} 
.form-cols-10.form-w-hint .form-item-w-hint > label + *{width: calc( 100% - 220px );} 
.form-cols-inline .form-item > label + * ,.form-cols-inline .form-item > *{ width: 120px;}
.form-cols-inline .form-item > label{width: auto; }


/*.form-default-dialog*/
.form-default-dialog{padding: 30px 30px 10px;}
.form-default-dialog .form-item > label + *{width: calc( 100% - 140px );} 
/*checkbox*/
.checkbox-container{display:block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:auto!important;padding-left:35px!important;text-align:left!important;}
.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0;}
.checkmark{position:absolute;top:3px;left:0;height:20px;width:20px;background-color:#0b202b;border:1px solid #4fc1e9;border-radius:3px;}
.checkbox-container:hover input ~ .checkmark{background-color:#0b202b;}
.checkbox-container input:checked ~ .checkmark{background-color:#0b202b;}
.checkmark:after{content:"";position:absolute;display:none;}
.checkbox-container input:checked ~ .checkmark:after{display:block;}
.checkbox-container .checkmark:after{left:7px;top:3px;width:5px;height:10px;border:solid #4fc1e9;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);;}
/*radio*/
/* The container */
.radio-container {display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
/* Hide the browser's default radio button */
.radio-container input {position: absolute;opacity: 0;cursor: pointer;}
/* Create a custom radio button */
.radio-checkmark {position: absolute;top: 2px;left: 0;height: 20px;width: 20px;background-color: #0b202b;border:1px solid #4fc1e9;border-radius: 50%;}
/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .radio-checkmark {background-color: #0b202b;}
/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio-checkmark {background-color: #0b202b;}
/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark:after {content: "";position: absolute;display: none;}
/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radio-checkmark:after {display: block;}
/* Style the indicator (dot/circle) */
.radio-container .radio-checkmark:after {top: 5px;left: 5px;width: 8px;height: 8px;border-radius: 50%;background: #4fc1e9;}

/*.form-item*/ 
.item_hack.form-item > label,.item_hack.form-item > label + *{width: auto!important;}
.item_inline,.col{display: inline-block;margin-right: 10px;vertical-align: top;}
.item_end{margin-right: 0!important;}
.item_10{width: 100%;}
.item_8{width: 80%;}
.item_5{width: calc(50% - 8px);}
.item_4{width: 25%;}
.item_3{width: calc(33.3% - 9px);}
.col{margin-right: 30px;}
.col-5{width: calc(50% - 20px);}
/*site-table*/
.site-table{color: #fff;font-size: 13px;width: 100%;}
.site-table th,.site-table td{padding:8px;text-align: left;line-height: 1.2; }
.site-table th{background-color:#5A636D; }
.site-table td{background-color:#202020; }
.site-table tr:nth-child(even) td{background-color:#2C2D2E; }
.site-table-w-checkbox .checkbox-container{width: 25px!important;height: 25px!important;padding-left: 0 !important;}
.site-table-w-checkbox th,.site-table-w-checkbox td{vertical-align: middle;}
.site-table-w-btn th,.site-table-w-btn td{padding: 5px 10px 8px;}
/*site-btn*/
.site-btn{color: #fff;border-bottom: 3px solid transparent;cursor: pointer;text-align: center;display: inline-block;text-shadow: 1px 1px 2px rgba(0,0,0,.3);position: relative;}
.site-btn:hover{position: relative; border-color: transparent; box-shadow: 2px 2px 10px rgba(0,0,0,1);text-shadow: 1px 1px 2px rgba(0,0,0,.8); }
.btn-lg{padding: 10px 30px;font-size: 24px;}
.btn-md{padding: 2px 15px; min-width: 120px;}
.btn-min{padding: 0 15px; top: -2px;line-height: 1.8;}
.btn-xs{width: 30px;height: 30px;border: 0;line-height: 30px;}
.btn-square-min{padding: 0;width: 30px;height: 30px;font-size: 18px;line-height: 30px;}
.btn-theme{background-color: #ffae00;border-color: #e09703;} 
.btn-gray{background-color: #a4a9ae;border-color:#83898f}
.btn-blue{background-color: #326699;}.btn-blue:hover{background-color: #e09703;}
.btn-lignt-blue{background-color: #4fc1e9;}
.btn-round{border-radius: 100px;}
.btn-square{border-radius: 5px;}
.btn-group > *{margin: 0 5px;}.btn-group > *:last-child{margin-right: 0;}
.btn-group-float{float: right;}

/*expand-table-btn-group*/
.expand-table > li{position: relative; padding: 10px 0 0; background-color: rgba(0,0,0,0.4);border-radius: 5px;display: flex;margin-bottom: 10px;flex-flow: row wrap;align-content: space-between;justify-content: space-between;}
.expand-table-column-expand {-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;flex-basis: 100%;width: 0;width: 100%;background-color: rgba(255,255,255,.6);padding: 10px 20px; display: none;}
.expand-table > li.open .expand-table-column-expand{display: block;}
.expand-table > li.open .btn-edit-expand{background-color: #ffae00;}
.expand-table .expand-table-column{padding: 0 15px;margin-bottom: 5px;line-height: 1.5;}
.expand-table-btn-group .site-btn i{font-size: 15px;}
.expand-table-btn-group > *{margin-right: 5px;top: 2px;padding-top: 2px;}.expand-table-btn-group > *:last-child{margin-right: 0;}








.recycling-chart-area .charthere{padding: 20px 0;}
/*
 * DOM element rendering detection
 * https://davidwalsh.name/detect-node-insertion
 */
@keyframes chartjs-render-animation {
	from { opacity: 0.99; }
	to { opacity: 1; }
}

.chartjs-render-monitor {
	animation: chartjs-render-animation 0.001s;
}

/*
 * DOM element resizing detection
 * https://github.com/marcj/css-element-queries
 */
.chartjs-size-monitor,
.chartjs-size-monitor-expand,
.chartjs-size-monitor-shrink {
	position: absolute;
	direction: ltr;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
	z-index: -1;
}

.chartjs-size-monitor-expand > div {
	position: absolute;
	width: 1000000px;
	height: 1000000px;
	left: 0;
	top: 0;
}

.chartjs-size-monitor-shrink > div {
	position: absolute;
	width: 200%;
	height: 200%;
	left: 0;
	top: 0;
}

/*20210317 edit*/
.fix-padding{padding: 20px 40px 0 0;}

/*20210608edit*/
.site-expand-table .expand-table-column{width: 18% !important;}
.site-expand-table .expand-table-column.main{width: 28% !important;}
.analysis-list > li{list-style: none;}