/* ---------- Generel ----------- */
html {margin:0; padding:0; height:100%;}
body {background: #e2d2b6 !important; font-size:14px; font-family:arial, helvetica, sans-serif; margin:0; padding:0; color:#333333;}
.responsive * {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;}
.clear, .clear-both {clear:both;}
img {max-width:100%; height:auto;}
p {background:transparent; padding:0px; margin:0px;}
a {color:#333333;}


/* ---------- Header ----------- */
.responsive-header {background:#fff; width:100%; padding:20px;}
.responsive-header-inner {width:90%; max-width:800px; margin:0px auto;}
.header-logo {width:100%; text-align:center; margin-bottom:10px;}
  @media (min-width: 550px) {.header-logo {width:49%; float:left; text-align:left; margin-bottom:0px;}}
  @media (min-width: 550px) {.header-logo.esmarch-logo {margin-top:-10px;}}
.header-contactinfo {text-align:center;}
  @media (min-width: 550px) {.header-contactinfo {text-align:right; width:49%; float:right;}}
.header-contactinfo p {margin: 0px 0px 8px 0px;}
.top-shadow{text-align:center; overflow:hidden;}
.top-shadow img {top:-2px; position:relative;}


/* ---------- Indholdsområde ----------- */
.responsive-container {background:url('/img/responsive-top-bg.jpg') no-repeat 0px 0px; min-height:400px;}
.responsive-container-inner {width:90%; max-width:800px; margin:0px auto;} 
.content {background:#fff; padding:20px 15px 15px 15px; margin-bottom:30px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);}
  @media (min-width: 550px) {.content {padding:35px 30px 30px 30px;}}
 p.intro {margin-bottom:20px; border-bottom:1px solid #ccc; padding-bottom:20px;}


/* ---------- Navigation / brødkrumme ----------- */
.navigation-wrapper {text-align:right; margin-top:15px; margin-bottom:0px;}
.navigation {width:288px; display:inline-block; line-height:14px;}
  @media (min-width: 550px) {.navigation {width:320px;}}
.navigation .arrow {display:inline-block; position:relative;padding:0px; height:0px; width:0px;}
.navigation .arrow:after {border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: transparent;border-width: 10px;margin-top: -33px;}
.navigation div {float:left; width:20%;}
.navigation a {text-decoration:none;}
.navigation div span {display:block; font-size:12px; text-align:center; padding:4px 0px;}
.navigation .col2 span {background:#dce9da; color:#333;} /*aktiv*/
.navigation .col2 .arrow:after {border-left-color: #dce9da;}
.navigation .col3 span, .navigation .col span {background:#2c6b92; color:#fff;} /*default*/
.navigation .col3 .arrow:after, .navigation .col .arrow:after {border-left-color: #2c6b92;}
.navigation .col4 span {background:#2c9b0e; color:#fff;} /*gennemført*/
.navigation .col4 .arrow:after {border-left-color: #2c9b0e;}


/* ---------- Spørgsmål ----------- */
.schema-form {width:100%;}
.question-box {border:0px; margin:0px 0px 30px 0px; padding:0px; position:relative;}
.question-container textarea {width:100%; border:1px solid #aaa;}
.question {font-weight:bold; margin-bottom:10px;}
.question small {color:#888; font-size:12px; font-weight:normal;}
.question-container {margin-bottom:10px; overflow:hidden; margin-bottom:10px;}
.question-label {width:100%; margin-bottom:3px;}
  @media (min-width: 550px) {.question-label {width:40%; display:block; float:left; margin-bottom:0px;}}

.satisfaction-scale {width:100%; font-size:11px; color:#666; }
  @media (min-width: 550px) {.satisfaction-scale { font-size:14px; margin-bottom:5px; height:30px;}}
.question-table>.satisfaction-scale {display:none; }
  @media (min-width: 550px) {.question-table>.satisfaction-scale {display:block; padding-left:40%;}}
  @media (min-width: 550px) {.question-table>.satisfaction-scale+.clear2 {clear:both;}}
.question-container>.satisfaction-scale {}
  @media (min-width: 550px) {.question-container>.satisfaction-scale {display:none;}}
.satisfaction-scale span {width:9.09%; float:left; display:block; vertical-align:bottom; text-align:center; position:relative; padding-top:11px;}
  @media (min-width: 550px) {.satisfaction-scale span {padding: 24px 0 10px 0; /*padding-top:15px;*/}}
.satisfaction-scale .meget-sandsynligt, .satisfaction-scale .saerdeles-tilfreds {position:absolute; top:0px; left:0px; width:150px; text-align:left; padding:0px;}
.satisfaction-scale .hoejst-usandsynligt, .satisfaction-scale .meget-utilfreds {position:absolute; top:0px; right:0px; width:150px; text-align:right; padding:0px;}
.satisfaction-scale .meget-vigtigt, .satisfaction-scale .meget-vigtigt {position:absolute; top:0px; left:-15px; width:150px; text-align:left; padding:0px;}
.satisfaction-scale .ikke-vigtigt, .satisfaction-scale .ikke-vigtigt {position:absolute; top:0px; right:-5px; width:150px; text-align:right; padding:0px;}

.input-radiobutton {width:100%;}
  @media (min-width: 550px) {.input-radiobutton {width:60%; display:block; float:left;}}
.input-radiobutton span {width:9.09%; float:left; display:block; vertical-align:bottom; margin:0px; text-align:center;}
.satisfaction-scale.tekst-skala span {width:25%; padding:0px;} 
.input-radiobutton-28 span, .input-radiobutton-29 span, .input-radiobutton-30 span,.input-radiobutton-31 span, .input-radiobutton-32 span, .input-radiobutton-33 span, .input-radiobutton-34 span, .input-radiobutton-35 span, .input-radiobutton-36 span, .input-radiobutton-37 span, .input-radiobutton-38 span, .input-radiobutton-39 span, .input-radiobutton-40 span, .input-radiobutton-41 span, .input-radiobutton-42 span  {width:25%;}

.submit-container button, .submit-container a.link-til-tak {color:#fff; background:#2c6b92; padding:8px 14px; border-radius:3px; border:0px; font-weight:normal; float: right; font-size:14px; cursor:pointer; text-decoration:none;}
.question img {display:none;}

/* ---------- Karakter smilies ---------- */
div.karakter-smile-q-left {
    float:left;
    width: 40%;
}
@media (max-width: 550px) {
    div.karakter-smile-q-left {
        display:none;
    }
}

div.karakter-smile-a-right {
    float:left;
    width: 60%;
}
@media (max-width: 550px) {
    div.karakter-smile-a-right {
        width: 100%;
    }
}

i.smile-left {
    font-size: 1.7em;
    color: #429d42;
    margin-left: 10px;
}
@media (max-width: 700px) and (min-width: 650px) {
    i.smile-left {
        margin-left: 4px;
    }
}
@media (max-width: 650px) and (min-width: 550px) {
    i.smile-left {
        margin-left: 2px;
    }
}
@media (max-width: 550px) and (min-width: 400px) {
    i.smile-left {
        margin-left: 10px;
    }
}
@media (max-width: 460px) and (min-width: 300px) {
    i.smile-left {
        margin-left: 5px;
    }
}
@media (max-width: 300px) {
    i.smile-left {
        margin-left: 0px;
    }
}

i.frown-right {
    font-size: 1.7em;
    color: #d21212;
    margin-right: 7px;
}
@media (max-width: 800px) and (min-width: 650px) {
    i.frown-right {
        margin-right: 3px;
    }
}
@media (max-width: 650px) and (min-width: 550px) {
    i.frown-right {
        margin-right: 0px;
    }
}
@media (max-width: 550px) and (min-width: 400px) {
    i.frown-right {
        margin-right: 7px;
    }
}
@media (max-width: 450px) and (min-width: 360px) {
    i.frown-right {
        margin-right: 3px;
    }
}
@media (max-width: 360px) {
    i.frown-right {
        margin-right: 0px;
    }
}
/* ---------- Tal ved hvert hovedspørgsmål ----------- */
.hovedspoergsmaal_1a p, .hovedspoergsmaal_2a p, .hovedspoergsmaal_3a p, .hovedspoergsmaal_3c p, .hovedspoergsmaal_4 p, .hovedspoergsmaal_5 p, .hovedspoergsmaal_6 p, .hovedspoergsmaal_7 p, .hovedspoergsmaal_8 p, .hovedspoergsmaal_9 p, .hovedspoergsmaal_10 p, .hovedspoergsmaal_11 p  {padding-left:30px;}
.hovedspoergsmaal_1a:before, .hovedspoergsmaal_2a:before, .hovedspoergsmaal_3a:before, .hovedspoergsmaal_3c:before, .hovedspoergsmaal_4:before, .hovedspoergsmaal_5:before, .hovedspoergsmaal_6:before, .hovedspoergsmaal_7:before, .hovedspoergsmaal_8:before, .hovedspoergsmaal_9:before, .hovedspoergsmaal_10:before, .hovedspoergsmaal_11:before {display:inline; color:#2c6b92; font-size:20px; font-weight:bold; position:absolute; top:-5px;}
.hovedspoergsmaal_1a:before {content:"1.";}
.hovedspoergsmaal_2a:before {content:"2.";}
.hovedspoergsmaal_3a:before {content:"3.";}
.hovedspoergsmaal_3c:before {content:"3.";}
.hovedspoergsmaal_4:before {content:"4.";}
.hovedspoergsmaal_5:before {content:"5.";}
.hovedspoergsmaal_6:before {content:"8.";}
.hovedspoergsmaal_7:before {content:"9.";}
.hovedspoergsmaal_8:before {content:"10.";}
.hovedspoergsmaal_9:before {content:"11.";}
.hovedspoergsmaal_10:before {content:"6.";}
.hovedspoergsmaal_11:before {content:"7.";}


/* ---------- Særlig styling for enkelte spørgsmål ----------- */
.question-box.hovedspoergsmaal_8 {}
.question-box.hovedspoergsmaal_8 .question-label {width:90%; margin-bottom:0px; float:left;}
  @media (min-width: 550px) {.question-box.hovedspoergsmaal_8 .question-label {width:70%;}}
.satisfaction-input.satisfaction-input-choose { width:9%; float:left;}
  @media (min-width: 550px) {.satisfaction-input.satisfaction-input-choose { width:29%; }}


/* ---------- Om-side ----------- */
.info h1 {margin-top:0px;}
.om-logoer {text-align:center;}
.om-logoer a{margin:10px; display:inline-block; vertical-align:middle;}
.om-logo-danwest {max-width:50px;}
  @media (min-width: 550px) {.om-logo-danwest {max-width:75px;}}
.om-logo-elite {max-width:78px;}
  @media (min-width: 550px) {.om-logo-elite {max-width:130px;}}
.om-logo-esmarch {max-width:68px;}
  @media (min-width: 550px) {.om-logo-esmarch {max-width:90px;}}
.om-logo-feriepartner {max-width:60px;}
  @media (min-width: 550px) {.om-logo-feriepartner {max-width:90px;}}
.om-logo-westerland {max-width:100px;}
  @media (min-width: 550px) {.om-logo-westerland {max-width:150px;}}


/* ---------- Validering/besked ----------- */
div.alert {
    width: 100%;
    margin: 10px 0;
    padding:7px 10px;
    border: 2px solid #cbba9a;
    background-color: #e2d2b6;
    color: #000;
}

div.alert-danger {
    border: 2px solid #aa0000;
    background-color: #cb4545;
    color: #fff;
}
div.alert-success {
    border: 2px solid #1d7900;
    background-color: #339c14;
    color: #fff;
}
div.alert-info {
    border: 2px solid #5abeee;
    background-color: #b0dcf3;
    /*color: #fff;*/
}
div.alert-primary {
    border: 2px solid #cbba9a;
    background-color: #e2d2b6;
}

button.forrige-trin-btn { /*, .naeste-trin-btn {*/
    float: left;
}


table.tbl-oversigt {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

table.tbl-oversigt td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

table.tbl-oversigt tr:nth-child(even){background-color: #f2f2f2;}

table.tbl-oversigt tr:hover {background-color: #ddd;}

table.tbl-oversigt th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #04AA6D;
    color: white;
}