body{
    color: black;
    background-color: white !important;
}
.logo {color: #008ccf; font-weight: 900; font-size: 1.4rem}
.title {color: #008ccf; font-weight: 400; font-size: 1.2rem}
/******input*************/
textarea {border: 1px solid #cecece; border-radius: 3px;}
/*Link*/
.ab {font-weight: bold;}
/*COLOR*/
.black {color: black;}
/*Width --------------------------------------*/
.w010 {width: 10px;}
.w020 {width: 20px;}
.w030 {width: 30px;}
.w050 {width: 50px;}
.w90 {width: 90px;}
.w100 {width: 100px;}
.w125 {width: 125px;}
.w150 {width: 150px;}
.w180 {width: 180px;}
.w200 {width: 200px;}
.w250 {width: 250px;}
.w300 {width: 300px;}
.w350 {width: 350px;}
.w380 {width: 380px;}
.w400 {width: 400px;}
.w450 {width: 450px;}
.w500 {width: 500px;}
.w550 {width: 550px;}
.w600 {width: 600px !important; }
.w700 {width: 700px !important; }
.w820 {width: 810px !important; }
.w900 {width: 900px !important; }
.h400 {height: 400px !important;}
.mtop0 {margin-top: 0px !important;}
.wem100 {box-sizing: border-box; width: 100%; -moz-box-sizing: border-box;}
/*Margin ---------------------------------------*/
.mlr10 {margin-left: 10px; margin-right: 10px;}
.mlr20 {margin-left: 20px; margin-right: 20px;}
.mlr30 {margin-left: 30px; margin-right: 30px;}
.mlr35 {margin-left: 35px; margin-right: 35px;}
.mlr40 {margin-left: 40px; margin-right: 40px;}
.mlr50 {margin-left: 50px; margin-right: 50px;}
.mt10  {margin-top: 10px !important;}
.mt20  {margin-top: 20px !important;}
.mtb05 {margin-top: 5px; margin-bottom: 5px;}
.mtb10 {margin-top: 10px; margin-bottom: 10px;}
.mtb20 {margin-top: 20px !important; margin-bottom: 20px !important;}
.mtb30 {margin-top: 30px; margin-bottom: 30px;}
.mtb40 {margin-top: 40px; margin-bottom: 40px;}
/*Padding ----------------------------------------*/
.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.ptb10 {padding-top: 10px; padding-bottom: 10px;}
.ptb20 {padding-top: 20px; padding-bottom: 20px;}
.ptb30 {padding-top: 30px; padding-bottom: 30px;}
.ptb40 {padding-top: 40px; padding-bottom: 40px;}
.plr10 {padding-left: 10px; padding-right: 10px;}
.plr20 {padding-left: 20px; padding-right: 20px;}
.plr30 {padding-left: 30px; padding-right: 30px;}
.plr40 {padding-left: 40px; padding-right: 40px;}
/*pointer*/
.pointer {cursor: pointer}
/****************QUESTIONNAIRE********************/
.questionnaire {color: black; border-radius: 5px 5px 5px 5px; position: relative; font-size: 13px; background-color: #ddd}
.questionnaire a.ico{padding-top: 0px; position: absolute; line-height: 0.5em; top: 6px; right: 10px;}
.questionnaire a.ico:hover{background-color: red;}
.questionnaire div.questionnaire-titlebar {background-color: #FFC000; padding: 3px; border-radius: 5px 5px 0px 0px;}
.questionnaire-title {
    background-color: #FFC000;
    margin-left: -15px;
    margin-right: -15px;
}
.questionnaire-title .ico {
    position: absolute;
    top: 10px;
    right: 10px;
}
.questionnaire-section {background-color: #f5f5f5; border-radius: 5px 5px 0 0; border-bottom: 1px solid #cecece;}
.questionnaire-section-item {padding: 20px 10px;}
/****************QUESTIONNAIRE RESULT********************/
.questionnaire-result h3.title {text-align: center;}
.questionnaire-result .question {position: relative; padding-top: 10px;}
.questionnaire-result .question-num {padding: 5px; border-radius: 3px; border: 1px solid #008ccf; color: #008ccf;}
.questionnaire-result .question-body {/* margin-left: 10px; */}
.questionnaire-result .question-body td {vertical-align: top;}
.questionnaire-result .question-point {position: absolute; top: 0px; right: -30px; font-size: 0.6em; border: 1px solid #cecece; background-color: white; padding: 0px 3px; border-radius: 3px; min-width: 10px;}
.sidebar {min-width: 200px; position: absolute; top: 98px; left: 10px; border: 1px solid #cecece; background-color: #ddd; border-radius: 5px; padding: 10px; font-size: 0.9em;}
.sidebar label {font-size: 1em; font-weight: bold; display: block; text-align: center; }
.divhr {border-top: 0.5px solid #cecece; border-bottom: 0.5px solid #cecece; height: 0px; margin: 10px 0px;}
.sidebar ul {margin-bottom: 0px;padding-left: 20px; margin-top: 5px;}
.sidebar ul li {font-size: 1em;}
.advertising {position: relative; top: 350px; left: 10px; /*border: 1px solid #cecece; background-color: #ddd; border-radius: 5px;*/ padding: 10px; font-size: 0.9em;}
/****************QUESTION***************************/
.question-page-body {padding: 0px; margin-left: auto; margin-right: auto;}
.min-hgt-300 { min-height: 300px;}
.question-page-body { }
.question-page-body .question {border: 1px #cecece dashed; background-color: #fdfdfd; padding: 10px 20px; border-radius: 5px; font-size: 1.3em;}
.question-single {min-height: 100px;}
#question-timer {position: absolute; background-color: #eee; color: #333; border-left: 1px solid #cecece; border-bottom: 1px solid #cecece; border-radius: 0px 3px 0px 3px; padding: 3px; width: 50px; font-size: 10px; text-align: center;}
.question-border {background-color: white; border: 1px solid #CECECE;}
.question .question-text {margin-top: 5px;}
.question .question-text .num {padding: 5px; border: 1px solid #ddd; border-radius: 5px; font-weight: bold; color: #333; margin-right: 5px;}
/****************ANSWER*****************************/
div.answers{ margin: 0; padding: 10px; margin-top: 5px;}
div.answers > div.answer > div,
div.answers > div.answerfree > div { border: 3px solid transparent; cursor: default; padding: 5px 0px; font-size: 14px; color: black; border-radius: 10px; display: inline-block;}
div.answers > div.answerfree > div {width: 300px;}
div.answers > div.answer:hover > div {color: #0182A8;}
div.answers > div.selected > div     {color: #0182A8;}
div.answers > div.answer:last-child {margin-bottom: 0px;}
div.typ1 span.ico {background-image: url(/img/ico/custom-inputs.png); background-repeat: no-repeat; background-position: -180px 0px; display: inline-block; padding: 0px 8px;}
div.typ1 div.answer:hover span.ico {background-position: -162px -19px;}
div.typ1 div.selected span.ico {background-position: -127px -55px !important; }
div.typ2 span.ico {background-image: url(/img/ico/custom-inputs.png); background-repeat: no-repeat; background-position: -90px -90px; display: inline-block; padding: 0px 8px;}
div.typ2 div.answer:hover span.ico {background-position: -72px -108px;}
div.typ2 div.selected span.ico {background-position: -36px -144px !important; }
/*footer*/
div.question-foot div.progressbar { display: inline-block; position: relative; width: 160px; border: 1px solid gray; text-align: left; background-color: white; opacity: 0.6; line-height: 18px; margin-top: 10px; border-radius: 3px;}
div.question-foot div.progressbar > span.bar {display: inline-block; background-color: #ddd; box-sizing: border-box; line-height: 18px; border-right: 1px solid gray;}
div.question-foot div.progressbar > span.idx {position: absolute; width: 160px; top: 0px; left: 0px; text-align: center; font-size: 12px; font-weight: bold;  border-radius: 3px;}
/*general*/
.clearfix{clear: both;}
a {text-decoration: none;}
.btn_cnf{ border: 1px solid gray;  border-radius: 3px; cursor: pointer; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); margin-bottom: 5px;    font-weight: bold; color: white; font-size: 11px; font-size: 14px; padding: 6px 15px; display: inline-block; margin-top: 3px;}
.btn_cnf{border-color: #0071e0; background: #0079ff; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0096ff), to(#005dff)); background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#0096ff), to(#005dff)); background: -moz-linear-gradient(center top, #0096ff, #005dff); background: linear-gradient(#0096ff, #005dff);}

/*home*/
.icobookmark {background-image: url(/img/ico/bn.48.bookmark.png); background-repeat: no-repeat; padding-left: 65px; background-position: 20px center; background-size: 24px 24px; }
.icocalendar {background-image: url(/img/ico/bn.48.calendar.png); background-repeat: no-repeat; padding-left: 65px; background-position: 20px center; background-size: 24px 24px;}
.icodelay {background-image: url(/img/ico/delay.png); background-repeat: no-repeat; padding-left: 65px; background-position: 20px center; background-size: 24px 24px;}
.icoerror {background-image: url(/img/ico/bn.48.error.png); background-repeat: no-repeat; padding-left: 65px; background-position: 20px center; background-size: 32px 25px; }
.icofinish  {background-image: url(/img/ico/bn.48.finish.png); background-repeat: no-repeat; padding-left: 65px; background-position: 20px center; background-size: 24px 24px; }
.icoquestion {background-image: url(/img/ico/bn.48.question.png); background-repeat: no-repeat; padding-left: 65px; background-position: 20px center; background-size: 24px 24px;}
.icotag  {background-image: url(/img/ico/bn.48.tag.png); background-repeat: no-repeat; padding-left: 65px; padding-right: 65px; background-position: 20px 20px; background-size: 24px 24px;}
.icowelcome  {background-image: url(/img/ico/bn.48.welcome.png); background-repeat: no-repeat; padding-left: 85px; padding-right: 85px; background-position: 20px 20px; }
.bkwhite {background-color: white !important;}
.breadcrumbqa { list-style: none; overflow: hidden; font: 18px Helvetica, Arial, Sans-Serif; margin: 0px; padding-left: 0px; }
.breadcrumbqa li { float: left; }
.breadcrumbqa li .arrow {color: white; text-decoration: none;  padding: 10px 0 10px 55px; background: brown; /* fallback color */ background: hsla(34,85%,35%,1); position: relative; display: block; float: left; }
.breadcrumbqa li .arrow:after { content: " "; display: block; width: 0; height: 0;	border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */	border-bottom: 50px solid transparent; border-left: 30px solid hsla(34,85%,35%,1); position: absolute; top: 50%; margin-top: -50px; left: 100%;	z-index: 2; }
.breadcrumbqa li .arrow:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent;	border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; /*margin-left: 1px;*/ left: 100%; z-index: 1; }
.breadcrumbqa li:first-child .arrow {padding-left: 10px;}
.breadcrumbqa li:nth-child(2) .arrow       { background:        hsla(34,85%,45%,1); }
.breadcrumbqa li:nth-child(2) .arrow:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumbqa li:nth-child(3) .arrow       { background:        hsla(34,85%,55%,1); }
.breadcrumbqa li:nth-child(3) .arrow:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumbqa li:nth-child(4) .arrow       { background:        hsla(34,85%,65%,1); }
.breadcrumbqa li:nth-child(4) .arrow:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumbqa li:nth-child(5) .arrow       { background:        hsla(34,85%,75%,1); }
.breadcrumbqa li:nth-child(5) .arrow:after { border-left-color: hsla(34,85%,75%,1); }
/*.breadcrumb li:last-child a {	background: white !important; color: black;	pointer-events: none; cursor: default; }*/
/*.breadcrumb li:last-child a:after { border: 0; }*/
.breadcrumbqa li .arrow:hover { background: hsla(34,85%,25%,1); }
.breadcrumbqa li .arrow:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }
div.hr {height: 0px; border-top: 1px dashed #ddd; border-bottom: 1px solid #ddd; margin: 10px auto; width: 750px}

.border-color-red {border-color: red !important;}
.border-color-green {border-color: green !important;}
.background-color-red {background-color: red !important; color: white !important; border-color: red !important;}
.background-color-green {background-color: green !important; color: white !important; border-color: green !important;}
.text-color-red {color: red !important}
.text-color-green {color: green !important}