/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v17-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
        url('../fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/open-sans-v17-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/open-sans-v17-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
    font-family: 'Open Sans Bold';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/open-sans-v17-latin-700.eot');
    /* IE9 Compat Modes */
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
        url('../fonts/open-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v17-latin-700.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/open-sans-v17-latin-700.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/open-sans-v17-latin-700.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/open-sans-v17-latin-700.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-size: 112.5%;
}

body {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 1rem;
    line-height: 1;
    background: #fff;
}


.page-link {
    border: 0;
}

p,
label,
h1,
h2,
h3,
h4,
h5,
h6,
button,
small,
a {
    font-family: 'Open Sans';
}
p.tagInfo{
    margin-bottom: 0;
    font-size: 15px;
    margin-top: 5px;
}


body.fixed-nav {
    padding-top: 54px;
}

div .question.in-survey p, .bigp p{
    font-size: 1.5rem;
    font-family: 'Open Sans Bold';
    line-height: 130%;
    letter-spacing: -0.01em;
    margin-bottom: 2rem;
}
p.result-label{
    font-family: 'Open Sans Bold';
    line-height: 130%;
    letter-spacing: -0.01em;
    margin-bottom: 5px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

#resultContent{
    margin-top: 50px
}
p.bold-grey.result-name{
    font-size: 40px;
}
.bold-grey{
    font-size: 28px;
    color: #c4c4c4;
    font-family: 'Open Sans Bold';
}
p.recom-text{
    font-size: 20px;
}
.addRecom:last-child{
    margin-bottom: 0;
}
.addRecom{
    margin-top: 2rem;
    margin-block-end: 0;
}

p.lastRecomMargin{
    margin-bottom: 0;
}

td.recom-td{
    padding: 40px 0.75rem;
}


.fail{
    margin-top: 5rem;
}


.back-arrow{
    display: inline-block;
    cursor: pointer;
    background: transparent no-repeat center center;
    background-size: 100% 100%;
    height: 30px;
    width: 30px;
    background-image: url('../img/arrow_left.svg');
}

.back-arrow:hover{
    background-image: url('../img/arrow_left_hover.svg');
}

.aswFormatWrapper{
    display: inline-flex;
    margin-left: 1rem;
}


@media (max-width: 767px) { 
    .aswFormatWrapper.textonly{
        margin-top: 16px;
    }
    .aswFormatLabel{
        min-height: 50px;
    }
    .aswFormatWrapper{
        margin-top: 2px;
    }
}
@media (min-width: 768px) { 
    .aswFormatWrapper.textonly{
        margin-top: 1.5rem;
    }
    .aswFormatLabel{
        min-height: 75px;
    }
    .aswFormatWrapper{
        margin-top: 0.5rem;
    }
}

.aswFormatLabel{
    border: 0;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    transition: 0.2s;

    
    padding: 1rem 0;
    
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
}

.aswFormatLabel.uinput {
    background-color: transparent;
}

.aswFormatLabel.checked {
    color: #fff;
}

.custom-tr{
    margin-top: 10px;
}

@media (hover: hover) and (pointer: fine) {
    .aswFormatLabel:hover{
        color: #fff;
    }

}

.customTextField{
    margin-left: 0.5rem;
}

.aswRow{
    text-align: left;
}
 /*.aswCol{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    margin-bottom: 2rem;
    
}
*/
.aswCol p{
    margin-bottom: 0;
    margin-top: 0;
}

#control {
    position: fixed;
    bottom: 0;
    height: 105px;
    background: #fff;
    width: 100%;
}

.btn.next{
    color: #fff;
    width: 100%;
    margin-top: 0rem;
    margin-bottom: 0.5rem;
    border-color: transparent;
}

#anchor .btn-outline-dark:hover{
    background-color: #bbb;
}

@media (min-width: 992px) {
    body.fixed-nav {
        padding-top: 56px;
    }
}

.firmen-logo {
    height: 50px;
}


p .radio-img{
    width: 3rem;
    height: auto;
    margin-right: 1rem;
}


.checkbox-img{
    width: 3rem;
    height: 100%;
}

/* .radio-img, .checkbox-img{
    font-style: normal;
    margin: 10px;
    margin-left: -80px;
    padding-left: 70px;
    text-align: left;
    content: "";
    height: 50px;
    background-repeat: no-repeat;
    padding-top: 15px;
} */

.chart-legend li span{
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-right: 11px;
}
.chart-legend li{
    padding: 10px;
    font-size: 20px; 
    font-family: 'Open Sans';
}
.chart-legend ul{
    list-style-type:none;
    display: contents;
}

.chart-legend{
  overflow:auto;
  /* padding: 10px; */
}
.doughnutCol{
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

@media screen{
    .showInPrint{
        display: none;
    }
    /* #doughnutChartForPrint{
        display: none !important;
    } */
}

@media print{
    #screenRow{
        display: none !important;
    }
    .showInScreen{
        display: none !important;
    }
    
    p{
        margin-bottom: 0;
        font-size: 0.9rem;
    }
    p img{
        display: none;
    }
    
    div .row.bigp{
        margin-top: 0 !important;
    }
    div .question.in-survey p, .bigp p{
        margin-bottom: 0rem !important;
    }
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
    
}

table #screenRow{
    border-bottom: 0.5px solid #c4c4c4;
}

table .recomendRowBorder{
    border-bottom: 0.5px solid #c4c4c4;
}

table .questionBorder{
    border-right: 0.5px solid #c4c4c4;
}

nav {
    margin-top: 75px;
    margin-bottom: 25px;
}
nav.commonSurvey {
    margin-top: 25px;
    margin-bottom: 25px;
}

#mainNav .navbar-collapse {
    overflow: auto;
    max-height: 75vh;
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link {
    position: relative;
    min-width: 45px;
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after {
    font-family: 'FontAwesome';
    float: right;
    width: auto;
    content: '\f105';
    color: #464a4c;
    border: none;
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link .new-indicator {
    font-size: 1.1rem;
    position: absolute;
    top: 0;
    right: 25px;
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link .new-indicator .number {
    font-size: .5rem;
    position: absolute;
    top: 6px;
    left: 0;
    width: 22.625px;
    text-align: center;
    color: white;
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown.show > .nav-link:after {
    content: '\f107';
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown .dropdown-menu > .dropdown-item > .dropdown-message {
    overflow: hidden;
    max-width: none;
    text-overflow: ellipsis;
}

.navbar-nav {
    margin-top: 25px;
}

.content {
    padding-top: 70px;
    background-color: #E9E9E9;
    padding-bottom: 150px;
}

@media (min-width: 992px) {

    #mainNav .navbar-collapse {
        overflow: visible;
        max-height: none;
    }

    #mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link {
        min-width: 0;
    }

    #mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after {
        width: 24px;
        text-align: center;
    }

    #mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown .dropdown-menu > .dropdown-item > .dropdown-message {
        max-width: 300px;
    }
}



.icon-bar {
    width: 40px;
    height: 3px;
    background-color: #C4C4C4;
    display: block;
    transition: all 0.2s;
    margin-top: 8px
}

.navbar-toggler:hover .icon-bar {
    background-color: #e9e9e9;
}

.navbar-toggler {
    border: none;
    background: transparent !important;
}

.navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
    opacity: 0;
}

.navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
}

button.navbar-toggler {
    border: solid 1px #fff;
    float: right;
    transition: 1s;
}

.navbar-toggler:hover .icon-bar {
    background-color: #000;
}

button.navbar-toggler:hover {
    background-color: #fff;
    border: solid 1px transparent;
}

.card-header {
    background-color: #fff;
}





.progress-circle {
    font-size: 15px;
    margin: 20px;
    position: relative; /* so that children can be absolutely positioned */
    padding: 0;
    width: 5em;
    height: 5em;
    background-color: #F2E9E1; 
    border-radius: 50%;
    line-height: 5em;
    float: right;
    margin-top: 1rem;
 }
 
 .progress-circle:after{
     border: none;
     position: absolute;
     top: 0.35em;
     left: 0.35em;
     text-align: center;
     display: block;
     border-radius: 50%;
     width: 4.3em;
     height: 4.3em;
     background-color: white;
     content: " ";
 }
 /* Text inside the control */
 .progress-circle span {
     position: absolute;
     line-height: 5em;
     width: 5em;
     text-align: center;
     display: block;
     z-index: 2;
 }
 .left-half-clipper { 
    /* a round circle */
    border-radius: 50%;
    width: 5em;
    height: 5em;
    position: absolute; /* needed for clipping */
    clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/ 
 }
 /* when p>50, don't clip left half*/
 .progress-circle.over50 .left-half-clipper {
    clip: rect(auto,auto,auto,auto);
 }
 .value-bar {
    /*This is an overlayed square, that is made round with the border radius,
    then it is cut to display only the left half, then rotated clockwise
    to escape the outer clipping path.*/ 
    position: absolute; /*needed for clipping*/
    clip: rect(0, 2.5em, 5em, 0);
    width: 5em;
    height: 5em;
    border-radius: 50%;
    /*background-color: #4D642D;*/ /* for debug */
    box-sizing: border-box;
   
 }
 /* Progress bar filling the whole right half for values above 50% */
 .progress-circle.over50 .first50-bar {
    /*Progress bar for the first 50%, filling the whole right half*/
    position: absolute; /*needed for clipping*/
    clip: rect(0, 5em, 5em, 2.5em);
    border-radius: 50%;
    width: 5em;
    height: 5em;
 }
 .progress-circle:not(.over50) .first50-bar{ display: none; }
 
 
 /* Progress bar rotation position */
 .progress-circle.p0 .value-bar { display: none; }
 .progress-circle.p1 .value-bar { transform: rotate(4deg); }
 .progress-circle.p2 .value-bar { transform: rotate(7deg); }
 .progress-circle.p3 .value-bar { transform: rotate(11deg); }
 .progress-circle.p4 .value-bar { transform: rotate(14deg); }
 .progress-circle.p5 .value-bar { transform: rotate(18deg); }
 .progress-circle.p6 .value-bar { transform: rotate(22deg); }
 .progress-circle.p7 .value-bar { transform: rotate(25deg); }
 .progress-circle.p8 .value-bar { transform: rotate(29deg); }
 .progress-circle.p9 .value-bar { transform: rotate(32deg); }
 .progress-circle.p10 .value-bar { transform: rotate(36deg); }
 .progress-circle.p11 .value-bar { transform: rotate(40deg); }
 .progress-circle.p12 .value-bar { transform: rotate(43deg); }
 .progress-circle.p13 .value-bar { transform: rotate(47deg); }
 .progress-circle.p14 .value-bar { transform: rotate(50deg); }
 .progress-circle.p15 .value-bar { transform: rotate(54deg); }
 .progress-circle.p16 .value-bar { transform: rotate(58deg); }
 .progress-circle.p17 .value-bar { transform: rotate(61deg); }
 .progress-circle.p18 .value-bar { transform: rotate(65deg); }
 .progress-circle.p19 .value-bar { transform: rotate(68deg); }
 .progress-circle.p20 .value-bar { transform: rotate(72deg); }
 .progress-circle.p21 .value-bar { transform: rotate(76deg); }
 .progress-circle.p22 .value-bar { transform: rotate(79deg); }
 .progress-circle.p23 .value-bar { transform: rotate(83deg); }
 .progress-circle.p24 .value-bar { transform: rotate(86deg); }
 .progress-circle.p25 .value-bar { transform: rotate(90deg); }
 .progress-circle.p26 .value-bar { transform: rotate(94deg); }
 .progress-circle.p27 .value-bar { transform: rotate(97deg); }
 .progress-circle.p28 .value-bar { transform: rotate(101deg); }
 .progress-circle.p29 .value-bar { transform: rotate(104deg); }
 .progress-circle.p30 .value-bar { transform: rotate(108deg); }
 .progress-circle.p31 .value-bar { transform: rotate(112deg); }
 .progress-circle.p32 .value-bar { transform: rotate(115deg); }
 .progress-circle.p33 .value-bar { transform: rotate(119deg); }
 .progress-circle.p34 .value-bar { transform: rotate(122deg); }
 .progress-circle.p35 .value-bar { transform: rotate(126deg); }
 .progress-circle.p36 .value-bar { transform: rotate(130deg); }
 .progress-circle.p37 .value-bar { transform: rotate(133deg); }
 .progress-circle.p38 .value-bar { transform: rotate(137deg); }
 .progress-circle.p39 .value-bar { transform: rotate(140deg); }
 .progress-circle.p40 .value-bar { transform: rotate(144deg); }
 .progress-circle.p41 .value-bar { transform: rotate(148deg); }
 .progress-circle.p42 .value-bar { transform: rotate(151deg); }
 .progress-circle.p43 .value-bar { transform: rotate(155deg); }
 .progress-circle.p44 .value-bar { transform: rotate(158deg); }
 .progress-circle.p45 .value-bar { transform: rotate(162deg); }
 .progress-circle.p46 .value-bar { transform: rotate(166deg); }
 .progress-circle.p47 .value-bar { transform: rotate(169deg); }
 .progress-circle.p48 .value-bar { transform: rotate(173deg); }
 .progress-circle.p49 .value-bar { transform: rotate(176deg); }
 .progress-circle.p50 .value-bar { transform: rotate(180deg); }
 .progress-circle.p51 .value-bar { transform: rotate(184deg); }
 .progress-circle.p52 .value-bar { transform: rotate(187deg); }
 .progress-circle.p53 .value-bar { transform: rotate(191deg); }
 .progress-circle.p54 .value-bar { transform: rotate(194deg); }
 .progress-circle.p55 .value-bar { transform: rotate(198deg); }
 .progress-circle.p56 .value-bar { transform: rotate(202deg); }
 .progress-circle.p57 .value-bar { transform: rotate(205deg); }
 .progress-circle.p58 .value-bar { transform: rotate(209deg); }
 .progress-circle.p59 .value-bar { transform: rotate(212deg); }
 .progress-circle.p60 .value-bar { transform: rotate(216deg); }
 .progress-circle.p61 .value-bar { transform: rotate(220deg); }
 .progress-circle.p62 .value-bar { transform: rotate(223deg); }
 .progress-circle.p63 .value-bar { transform: rotate(227deg); }
 .progress-circle.p64 .value-bar { transform: rotate(230deg); }
 .progress-circle.p65 .value-bar { transform: rotate(234deg); }
 .progress-circle.p66 .value-bar { transform: rotate(238deg); }
 .progress-circle.p67 .value-bar { transform: rotate(241deg); }
 .progress-circle.p68 .value-bar { transform: rotate(245deg); }
 .progress-circle.p69 .value-bar { transform: rotate(248deg); }
 .progress-circle.p70 .value-bar { transform: rotate(252deg); }
 .progress-circle.p71 .value-bar { transform: rotate(256deg); }
 .progress-circle.p72 .value-bar { transform: rotate(259deg); }
 .progress-circle.p73 .value-bar { transform: rotate(263deg); }
 .progress-circle.p74 .value-bar { transform: rotate(266deg); }
 .progress-circle.p75 .value-bar { transform: rotate(270deg); }
 .progress-circle.p76 .value-bar { transform: rotate(274deg); }
 .progress-circle.p77 .value-bar { transform: rotate(277deg); }
 .progress-circle.p78 .value-bar { transform: rotate(281deg); }
 .progress-circle.p79 .value-bar { transform: rotate(284deg); }
 .progress-circle.p80 .value-bar { transform: rotate(288deg); }
 .progress-circle.p81 .value-bar { transform: rotate(292deg); }
 .progress-circle.p82 .value-bar { transform: rotate(295deg); }
 .progress-circle.p83 .value-bar { transform: rotate(299deg); }
 .progress-circle.p84 .value-bar { transform: rotate(302deg); }
 .progress-circle.p85 .value-bar { transform: rotate(306deg); }
 .progress-circle.p86 .value-bar { transform: rotate(310deg); }
 .progress-circle.p87 .value-bar { transform: rotate(313deg); }
 .progress-circle.p88 .value-bar { transform: rotate(317deg); }
 .progress-circle.p89 .value-bar { transform: rotate(320deg); }
 .progress-circle.p90 .value-bar { transform: rotate(324deg); }
 .progress-circle.p91 .value-bar { transform: rotate(328deg); }
 .progress-circle.p92 .value-bar { transform: rotate(331deg); }
 .progress-circle.p93 .value-bar { transform: rotate(335deg); }
 .progress-circle.p94 .value-bar { transform: rotate(338deg); }
 .progress-circle.p95 .value-bar { transform: rotate(342deg); }
 .progress-circle.p96 .value-bar { transform: rotate(346deg); }
 .progress-circle.p97 .value-bar { transform: rotate(349deg); }
 .progress-circle.p98 .value-bar { transform: rotate(353deg); }
 .progress-circle.p99 .value-bar { transform: rotate(356deg); }
 .progress-circle.p100 .value-bar { transform: rotate(360deg); }