/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 

#disa-form-wrapper {
    overflow-x: hidden;
}

#disa-form-start {
    text-align: center;
}

#disa-form-start p,
#disa-form-start .icons {
}

#disa-form-start .icons {
    margin-top: 20px;
}

#disa-form-start .icons div {
    margin-bottom: 10px;
}

#disa-form-start .icons i {
    margin-right: 10px;
}

#disa-form-start #disa-form-start-test {
    margin-top: 20px;
}


#disa-form-wrapper .redo-test {
   display: none;
   margin-top: 20px;
}

 #disa-form {
    height: 800px;
    overflow: hidden;
 }

 #disa-form .question {
    padding: 32px 0;
    float: left;
    height: 800px;
    position: relative;
 }

 #disa-form .question .header {
    color: #303133;
    font-size:  35px;
    font-weight: bolder;
    margin-bottom: 20px;
 }

 #disa-form .question p.description {
   margin-bottom: 20px;
   font-size: 16px;
 }

 #disa-form .question .answer {
    background-color: rgb(239, 236, 230);
    padding: 20px;
    margin-bottom: 20px;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
 }

 #disa-form .question .answer p {
   font-size:  16px !important;
   padding: 0 !important;
   margin: 0 !important;
 }

 #disa-form .question .answer-actions-wrapper {
   display: none;
 }

 #disa-form .question .answer-actions {
   margin-top: 10px;
   display: flex;
   justify-content: space-between;
 }

 #disa-form .question .answer-actions .action {
   width: 180px;
   display: flex;
   justify-content: flex-start;
   cursor: pointer;
 }

 #disa-form .question .answer-actions .action.clicked {
   font-weight: bolder !important;
 }

 #disa-form .question .answer-actions .action.negative-action i,
 #disa-form-start .icons i.fa-thumbs-down {
   color: rgb(225, 29, 72) !important;
   background-color: rgb(254, 205, 211) !important;
   border-color: rgb(225, 29, 72) !important;
 }

 #disa-form .question .answer-actions .action.positive-action i,
 #disa-form-start .icons i.fa-thumbs-up {
   color: rgb(101, 163, 13) !important;
   background-color: rgb(217, 249, 157) !important;
   border-color: rgb(101, 163, 13) !important;
 }


 #disa-form .question .answer-actions .action .action-icon {
   width: 50px;
   margin-right: 10px;
 }

 #disa-form .question .answer-actions .action .action-description .strong {
   display: block;
 }

 #disa-form .question .answer-actions .action.positive-action .strong {
   color: rgb(101, 163, 13) !important;
 }

  #disa-form .question .answer-actions .action.negative-action .strong {
   color: rgb(225, 29, 72) !important;
 }


 #disa-form .question ul li {
    cursor: pointer;
    padding-bottom: 10px;
 }

 #disa-form .question ul li .symbol {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 2px;

 }

 #disa-form .result {
    display: none;
 }

 #disa-form .result #result-text {
    font-weight: bolder;
 }

 #disa-form .result .chart {
    width: 50px;
    float:  left;
    margin-right: 20px;
 }

 #disa-form .result #chartdottedline {
    border-bottom: 1px dashed #c2c2c2;    position: relative;    margin-bottom: 0;    padding: 0;
    height: 1px;    top: 120px;    width: 234px;    left: 65px;    z-index: 2;
    margin-top: 36px;
}

#disa-form .result #charttdred .chart-line {
    background-color: #c72e28;
}

#disa-form .result #charttdgreen .chart-line {
    background-color: #5e9f3a;
}

#disa-form .result #charttdblue .chart-line {
    background-color: #3368b7;
}

#disa-form .result #charttdyellow .chart-line {
    background-color: #d4af29;
}

#charttable tfoot td {
   text-align: center;
   border: 0;
}

#charttable {
    border: none;
    width: 300px;
    height: 274px;
    margin-top: 0;
}

.charttrhundred, .charttrfifty, .charttrzero { color:#999999;}

.charttrhundred { height:50px; }

body.chrome .charttrfifty {
    top: 140px !important;
}
.charttrfifty {
    position: absolute;
    top: 148px;
    left: 18px;
    height: 60px;
}
.charttrzero { height:90px; }

.charttrhundred td { padding-left: 0 !important; }
.charttrfifty td { padding-left: 0 !important; top:0;}
.charttrzero td { padding-left: 0 !important; }

.charttdhundred, .charttdfifty, .charttdzero { height:25%;padding:0 10px 0 0 !important; border: 0px none; vertical-align: bottom !important; text-align: right;}

.charttdhundred {vertical-align: top !important;width:19%; }
.charttdfifty {
    position: relative;
    top: 10px;
}
.charttdzero {height: 50% !important; }

.charttdzero {
    padding-left: 0 !important;
}

#chartred, #chartyellow, #chartgreen, #chartblue { width: 100%; display: flex; border: 0px none; border-radius: 10px 0 0;}

#chartred { background-color: #ED5D5D; }
#chartyellow { background-color: #FFD85C; }
#chartgreen { background-color: #91D473; }
#chartblue { background-color: #59A1DB; }

#charttdred, #charttdyellow, #charttdgreen, #charttdblue {vertical-align: bottom; border: 0px none; border-bottom: 2px solid black; padding: 0 5px 0 5px; width:20%;}

#charttdred { border-left: 2px solid black; padding: 0 5px 0 7px; width: 21%; }
#charttdyellow {}
#charttdgreen {}
#charttdblue {}

.chart-line span {
    text-align: center;
    display: block;
    position: relative;
    left: 7px;
    top: 20px;
    color: #fff;
}