/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


.surveyIntroNote, .surveyResultnote{ margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #efefef;}
.surveyResultEndnote{ margin-top: 30px; padding-top: 30px; border-top: 1px solid #efefef;}
.surveyIntroNote h2, .surveyIntroNote h3{ padding: 10px 0;}

.divider{ border-top:1px dotted #BCBCBC; margin: 30px 0;}
.surveyContainer{  padding: 60px; font-family: "Open Sans", sans-serif; }

.surveyFooter{ font-size: .8em; color: #9E9E9E;}
.req{ color: #C30003;}

.questionHolder{ padding: 5px 0;display: flex;flex-wrap: nowrap;}
.questionNum{ font-weight: bold; font-size:18px; padding:8px; width:40px; height:40px; text-align: center; background: #2184be; color: #fff;  border-radius:50%; margin-right: 10px;}
.question{ font-size: 1.2em; padding: 8px;flex: 1;}
.questionOptions{ padding-left: 80px; clear: both; width: 100%;}

fieldset{ padding: 10px 0 30px 0;}

/*.resultDisplay{ padding: 40px; margin: 20px; background-color: #efefef; border-radius: 10px;}*/
.resultDisplay {
  position: relative;
  background-color: #efefef;
  padding: 40px;
 
	margin:0 60px 20px 60px;
}

.resultDisplay::before {
  content: "";
  position: absolute;
  top: 20px;
  transform: translateY(-50%);
  border-top: 0 solid transparent;
  border-bottom: 40px solid transparent;
	
}

.resultDisplay:nth-child(odd) {	border-radius: 0 10px 10px 10px;}
.resultDisplay:nth-child(even) {margin:0 60px 20px 60px;border-radius: 10px 0 10px 10px;}
.resultDisplay:nth-child(odd)::before { left: -40px; border-right: 40px solid #efefef;}
.resultDisplay:nth-child(even)::before { right: -40px;  border-left: 40px solid #efefef;}


.resultTitle{font-size: 1.2em; font-weight: bold; padding-bottom: 10px;}
.resultText{ font-size: 1em;}

.wizard,.tabcontrol {
    display: block;
    width: 100%;
    overflow: hidden
}

.wizard a,.tabcontrol a {
    outline: 0
}

.wizard ul,.tabcontrol ul {
    list-style: none!important;
    padding: 0;
    margin: 0
}

.wizard ul>li,.tabcontrol ul>li {
    display: block;
    padding: 0
}

.wizard>.steps .current-info,.tabcontrol>.steps .current-info {
    position: absolute;
    left: -999em
}

.wizard>.content>.title,.tabcontrol>.content>.title {
    position: absolute;
    left: -999em
}

.wizard>.steps {
    position: relative;
    display: block;
    width: 100%
}

.wizard.vertical>.steps {
    display: inline;
    float: left;
    width: 30%
}

.wizard>.steps .number {
    font-size: 1.429em;
	display: none;
}

.wizard>.steps>ul>li {
    width: 25%
}

.wizard>.steps>ul>li,.wizard>.actions>ul>li {
    float: left
}

.wizard.vertical>.steps>ul>li {
    float: none;
    width: 100%
}

.wizard>.steps a,.wizard>.steps a:hover,.wizard>.steps a:active {
    display: block;
    width: auto;
    margin: 0 .5em .5em;
    padding: 1em 1em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.wizard>.steps .disabled a,.wizard>.steps .disabled a:hover,.wizard>.steps .disabled a:active {
    background: #eee;
    color: #aaa;
    cursor: default
}

.wizard>.steps .current a,.wizard>.steps .current a:hover,.wizard>.steps .current a:active {
    background: #2184be;
    color: #fff;
    cursor: default
}

.wizard>.steps .done a,.wizard>.steps .done a:hover,.wizard>.steps .done a:active {
    background: #9dc8e2;
    color: #fff
}

.wizard>.steps .error a,.wizard>.steps .error a:hover,.wizard>.steps .error a:active {
    background: #ff3111;
    color: #fff
}

.wizard>.content {
    /*background: #eee;*/
	border: 1px solid #eee;
    display: block;
    margin: .5em;
    min-height: 30em;
    overflow: hidden;
    position: relative;
    width: auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.wizard.vertical>.content {
    display: inline;
    float: left;
    margin: 0 2.5% .5em 2.5%;
    width: 65%
}
/*
.wizard>.content>.body {
    float: left;
    position: absolute;
    width: 95%;
    height: 95%;
    padding: 2.5%
}*/
.content>.body{float:left;width:100%;height:95%;padding:4%}


.wizard>.content>.body ul {
    list-style: disc!important
}

.wizard>.content>.body ul>li {
    display: list-item
}

.wizard>.content>.body>iframe {
    border: 0 none;
    width: 100%;
    height: 100%
}

.wizard>.content>.body input {
    display: block;
    border: 1px solid #ccc
}

.wizard>.content>.body input[type="checkbox"] {
    display: inline-block
}

.wizard input.error, .wizard input[type="checkbox"].error, .wizard input[type='radio'].error, .wizard select.error {
    background-color: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #8a1f11;
}


.wizard>.content>.body input.error {
    background-color: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #8a1f11
}

.wizard input[type='radio'].error:checked{ background-color: #940002;}

.wizard>.content>.body label {
    display: inline-block;
    margin-bottom: .5em
}

.wizard>.content>.body label.error {
    color: #8a1f11;
    display: inline-block;
    margin-left: 1.5em
}

.wizard>.actions {
    position: relative;
    display: block;
    text-align: right;
    width: 100%
}

.wizard.vertical>.actions {
    display: inline;
    float: right;
    margin: 0 2.5%;
    width: 95%
}

.wizard>.actions>ul {
    display: inline-block;
    text-align: right
}

.wizard>.actions>ul>li {
    margin: 0 .5em
}

.wizard.vertical>.actions>ul>li {
    margin: 0 0 0 1em
}

.wizard>.actions a,.wizard>.actions a:hover,.wizard>.actions a:active {
    background: #2184be;
    color: #fff;
    display: block;
    padding: .5em 1em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.wizard>.actions .disabled a,.wizard>.actions .disabled a:hover,.wizard>.actions .disabled a:active {
    background: #eee;
    color: #aaa
}

.wizard>.loading {
}

.wizard>.loading .spinner {
}

.tabcontrol>.steps {
    position: relative;
    display: block;
    width: 100%
}

.tabcontrol>.steps>ul {
    position: relative;
    margin: 6px 0 0 0;
    top: 1px;
    z-index: 1
}

.tabcontrol>.steps>ul>li {
    float: left;
    margin: 5px 2px 0 0;
    padding: 1px;
    -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
}

.tabcontrol>.steps>ul>li:hover {
    background: #edecec;
    border: 1px solid #bbb;
    padding: 0
}

.tabcontrol>.steps>ul>li.current {
    background: #fff;
    border: 1px solid #bbb;
    border-bottom: 0 none;
    padding: 0 0 1px 0;
    margin-top: 0
}

.tabcontrol>.steps>ul>li>a {
    color: #5f5f5f;
    display: inline-block;
    border: 0 none;
    margin: 0;
    padding: 10px 30px;
    text-decoration: none
}

.tabcontrol>.steps>ul>li>a:hover {
    text-decoration: none
}

.tabcontrol>.steps>ul>li.current>a {
    padding: 15px 30px 10px 30px
}

.tabcontrol>.content {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 35em;
    overflow: hidden;
    border-top: 1px solid #bbb;
    padding-top: 20px
}

.tabcontrol>.content>.body {
    float: left;
    position: absolute;
    width: 95%;
    height: 95%;
    padding: 2.5%
}

.tabcontrol>.content>.body ul {
    list-style: disc!important
}

.tabcontrol>.content>.body ul>li {
    display: list-item
}

@media(max-width: 900px) {
    .wizard>.steps>ul>li {
        width:50%
    }
	
    .wizard>.steps a,.wizard>.steps a:hover,.wizard>.steps a:active {
        margin-top: .5em
    }

    .wizard.vertical>.steps,.wizard.vertical>.actions {
        display: block;
        float: none;
       /* width: 100%*/
			
    }
	.wizard.vertical>.steps{ display: none;}
    .wizard.vertical>.content {
        display: block;
        float: none;
        margin: 0 .5em .5em;
        width: auto
    }
}

@media(max-width: 480px) {
    .wizard>.steps>ul>li {
        width:100%; 
    }
}