.content {
    width:95%;
    max-width:1000px;
    border-top:0px hidden transparent;
    font-family:alightfont;
    color:black;
}

.content > div {
    padding:20px;
}

.info_box {
    text-align:justify;
    width:90%;
    border-top:5px solid var(--primeColor);
    border-bottom:5px solid var(--secColor);
    color:#16172d;
}

.info_box > div {
    padding:20px;
}

.info_box h3 {
    padding-left:20px;
    color:var(--primeColor);
}

.info_box > div br {
    margin-bottom:10px;
} 

.test_area {
    
}

.test_area > div {
    padding:5px;
}

.test_area h3 {
    font-size:30px;
    color:var(--primeColor);
}

.test_area label {
    color:black;
    font-size:14px;
}

.result {
    margin-top:40px;
    background-color:#ffded5;
    padding:40px;
    border-radius:20px;
}

.result h3 {
    font-size:25px;
    color:var(--primeColor);
}

.result h2 {
    font-size:30px;
    color:var(--secColor);
}

.result h2 > #you_are {
    font-size:40px;
    text-decoration:underline;
}

.result button {
    margin-top:20px;
}

.stats {
    color:black;
    padding-top:20px;
}

.stats table td {
    padding-top:5px;
    padding-bottom:5px;
}

.stats table .r_side {
    text-align:right;
    vertical-align:top;
    padding-right:10px;
}

.questions {
    
}

.question {
    background-color:#CCE6FF;
    margin-top:4px;
    margin-bottom:4px;
    padding:5px;
    border-radius:3px;
}

.question:hover {
    background-color:#ffded5;
}

.question .q_text {
    font-size:20px;
    padding-bottom:10px;
    color:var(--primeColor);
}

.question label {
    color:#242424;
}

.question .q_slider {
    width:300px;
    -webkit-appearance:none;
    appearance:none;
    height:12px;
    background:var(--primeColor);
    outline:none;
    border-radius:3px;
}

.question .q_slider::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:25px;
    height:25px;
    background:var(--secColor);
    cursor:pointer;
    border:none;
}

.question .q_slider::-moz-range-thumb {
    width:25px;
    height:25px;
    background:var(--secColor);
    cursor:pointer;
    border:none;
}

.q_table {
    width:auto;
}

.q_table td {
    padding-left:5px;
    padding-right:5px;
}

.question input[type="text"] {
    background-color:var(--primeColor);
    width:300px;
    height:25px;
    border-radius:2px;
    color:white;
    padding-left:5px;
    padding-right:5px;
    font-family:alightfont;
    font-size:16px;
    border:none;
}

.question input[type="text"]:hover {
    background-color:#387fe4;
}

.question input[type="text"]:focus {
    background-color:var(--secColor);
}

.q_boxLabel {
    display:block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.q_boxLabel > input {
    cursor:pointer;
    display:none;
    opacity:0;
    height:0;
    width:0;
}

.q_boxLabel > .check_custom {
    display:inline-block;
    height:20px;
    width:20px;
    background-color:var(--primeColor);
    position:relative;
    top:3px;
    margin-right:10px;
}

.q_boxLabel > .check_custom:after {
    display:block;
    width:10px;
    height:10px;
    margin:5px;
    background-color:rgba(255,255,255,.5);
    content:"";
}

.q_boxLabel:hover input ~ .check_custom {
    background-color:#387fe4;
}

.q_boxLabel input:checked ~ .check_custom:after {
    background-color:var(--secColor) !important;
}

.qt_schoice .q_boxLabel > .check_custom {
    border-radius:100%;
}

.qt_schoice  .q_boxLabel > .check_custom:after {
    border-radius:100%;
}

.q_finish {
    width:100%;
    font-size:18px;
    padding:5px;
    font-family:alightfont;
    background-color:var(--primeColor);
    border-color:#055CED;
    border-radius:3px;
    color:white;
    cursor:pointer;
}

.q_finish:hover {
    background-color:#3c81e0;
    border-color:var(--primeColor);
}

.q_finish:active {
    background-color:var(--secColor);
    border-color:#b36630;
}

.footnote {
    margin-top:50px;
    font-family:arial;
    font-size:11px;
}

#rsl {
    display:none;
}

.your_description {
    border-top:2px solid var(--primeColor);
    border-bottom:2px solid var(--secColor);
    border-radius:10px;
    padding:20px;
    text-align:justify;
}

.your_description h3 {
    padding:0px;
    padding-bottom:20px;
    margin:0px;
}

.char_bar {
    width:100px;
    background-color:var(--secColor);
    height:20px;
    border-radius:2px;
    margin-left:10px;
    margin-right:10px;
}

.char_bar div {
    background-color:var(--primeColor);
    height:20px;
    border-radius:2px;
}

.characeristic {
    background-color:rgba(255,255,255,.4);
    border-radius:10px;
}

.characeristic table {
    width:100%;
}

.characeristic table td {
    color:var(--secColor) !important;
}

.characeristic table .r_side {
    color:var(--primeColor) !important;
}