body {
    font-family: arial, verdana, helvetica, geneva, sans-serif;
    font-size: .85em;
    background-color: #f3f3f3;
    margin: 0;
    padding:0;
    min-width: 340px;
}

img {
    border:0
}

input, textarea, button {
    font-family: arial, helvetica, verdana, sans-serif;
    font-size: 1em;
    }

input[type=submit], input[type=button], .toggle-label {
    font-size:0.95em;
    color: #000;
    border:1px solid #c0c0c0;
    text-decoration:none;
    padding:0.5em 0.7em 0.5em 0.7em;
    border-radius:8px;
    background-color: #fff;
    font-family: arial, helvetica, verdana, sans-serif;
    -webkit-appearance: none;
    }

input[type=submit]:active, .toggle-label:active {
    background-color: #f3f3f3;
    }

input[type=submit]:focus {
    outline: 0;
    background-color: #f3f3f3;
    }

input[type="checkbox"], input[type="radio"] {
    transform: translate(0px);
    }
    
input[type="submit"]:disabled, button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    }

#footer a:visited, .link, a:link {
    color: #0645ad;
    background-color: inherit;
    text-decoration:none
}

a:visited {
    color: #471bae;
    background-color:inherit
}

a:hover {
    text-decoration:underline
}

.show-resp {
  display: none;
}

.small-glomt {
  font-size: .8em;
  margin-left:1em
}

#click-table a:hover, #click-table a:link, #click-table a:visited {
    text-decoration:none
}

#content a.link:link, #content a.link:visited {
    color:#0645ad
}

a.arr {
    text-decoration: none;
    color:#999 !important
}

.logo {
    position: absolute;
    top: 12px;
    left:1.5em
}

.logo img, .logo-index img {
    height:15px
}

.logo-index {
    padding-top: 12px;
    text-align:center
}

.logo-index-login img {
  width:130px;
 
}

.logo-index-login {
    padding-top:0.7em;
    padding-bottom: 0.7em;    
    text-align:center;
}

.click-table tr, .resp-table tr, .resp-table-blank tr {
    cursor:pointer
}

.byt-login {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 1.5em;
    margin-top:2em
}

.byt-login strong {
    border-bottom:2px solid #000
}

.main-login {
    margin: 0 auto;
    border: 1px solid #e8e8e8;
    max-width: 27em;
    background-color: #f3f3f3;
    padding: .2em 1.6em .5em 1.6em;
    border-radius: 10px;
    margin-bottom: 15em;
    clear: both;
    text-align:left
}

.main-login input[type=email], .main-login input[type=password], .main-login input[type=text] {
    font-size: 1.3em;
    width: 100%;
    box-sizing:border-box
}

@media screen and (max-height: 500px) {
    .main-login {
        margin-bottom:5em
    }
}

#menu a:hover, #menu a:link, #menu a:visited {
    color: #fff;
    background-color: inherit;
    text-decoration:none
}

#menu-bar {
    width: 100%;
    height: 40px;
}

#menu-wrap {
    width: 100%;
    margin:0 auto
}

#menu-wrap .sb {
    margin-right: .5em;
    width:160px
}

#menu {
    float: right;
    padding-right:1.5em
}

#menu ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    height: 40px;
    max-width:none
}

#menu ul li {
    display: inline;
    padding: 0;
    text-align: center;
    height: 40px;
    float: left;
    overflow:hidden
}

#menu ul li a {
    display: block;
    line-height: 3.1em;
    padding:0 1.3em 0 1.3em
}

#menu ul li a.current, #menu ul li a:hover {
    background-color: #5285b6;
}

#menu ul li a:active {
    display: block;
    background-color: #5b8fc1;
    background: linear-gradient(#5285b6, #6e9fce);
    box-shadow:inset 0 0 3px #24588a
}

#menu-bar, #menu-bar-login {
    background-color:#3a71a7
}

a.green-button {
    background-color: #75ac52;
    border: 1px solid #689e44;
    border-radius: 10px;
    display: inline-block;
    cursor: pointer;
    color: #fff;
    font-size: 1.1em;
    padding: .45em .8em .4em .8em;
    text-decoration: none;
    text-align: center;
    margin-bottom:.2em
}

.green-button:hover {
    background-color:#6aa047
}

a.green-button {
    color: #fff;
    text-decoration:none
}

table {
    border: solid;
    border-width: 0 0 1px 1px;
    border-color: #e8e8e8;
    width: 100%;
    border-collapse: collapse;
    vertical-align: middle;
    empty-cells:show
}

table.contact {
    width:auto
}

table.contact tr {
    vertical-align:top
}

tr {
    padding: 0;
    margin: 0;
    border-collapse:collapse
}

table.slim, table.slim td {
    border: 0;
    vertical-align: top;
    padding:0
}

tr:hover {
    background-color:#f3f3f3
}

table.blank tr:hover, table.signs tr:hover {
    background-color:inherit
}

table.contact tr:hover, table.slim tr:hover, table.white tr, table.white tr:hover, tr:hover.white {
    background-color:#fff
}

td {
    border: solid;
    border-width: 1px 1px 0 0;
    border-color: #e8e8e8;
    padding:1em
}

td.bild {
    width:1%
}

.rtd {
    text-align:right
}

.ctd {
    text-align:center
}

#click-table tr, #click-table-blank tr {
    cursor:pointer
}

.trtop, thead, thead td:hover, thead tr:hover {
    background-color: #f3f3f3;
    padding: .7em 1em .7em 1em;
    cursor:default
}

.white thead tr td, thead td:hover {
    background-color:#f3f3f3
}

thead td {
    font-weight: 700;
    padding:.7em 1em .7em 1em
}

.inputright input {
    text-align:right
}

td.np {
    padding: 0;
    background-color:#fff
}

.np img {
    padding: 0;
    margin: 0;
    display:block
}

.wordwrap {
    word-wrap: break-word;
    max-width:20em
}

.greyback {
    background-color:#f3f3f3
}

.q-box {
    border: 1px solid #e8e8e8;
    padding: .2em 1.2em .2em 1.2em;
    margin: 1.5em 0 1.5em 0;
    background-color: #f3f3f3;
    border-radius:10px
}

.greenback {
    position: absolute;
    top: 3.7em;
    right: 1.5em;
    border: 1px solid #cde3c5;
    border-radius: 8px;
    background-color: #e0f9da;
    padding:.7em
}

.greenback-relative {
    border: 1px solid #cde3c5;
    border-radius: 8px;
    background-color: #e0f9da;
    padding: .4em .7em .3em .7em;
    text-align:center
}

.searchbox {
    margin:0 0 1.5em 0;
}

.searchbox input[type=text] {
    width: 350px;
}

.message-box {
    font-weight: 700;
    margin: 0 0 1em 0;
    padding: 1em 0 2em 0;
    clear:both;

}

.green-box {
    border: 1px solid #cde3c5;
    padding: .6em;
    background-color: #e0f9da;
    border-radius:10px;
}

.red-box {
    border: 1px solid #d86363;
    padding: .6em;
    background-color: #ef9191;
    border-radius: 10px;
    box-shadow:0 0 .3em #ccc;
}

.navlinks {
  margin: 1em 0 1em 0;
  font-size:0.9em;
  color: #6c6c6c;
  }
  
.navlinks a:link, .navlinks a:visited, .navlinks strong, .navlinks label {
  color: #0645ad;
  border:1px solid #e8e8e8;
  text-decoration:none;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-radius:4px;
  font-size: 1.1em;
  line-height: 2.3em;
  background-color: #f3f3f3;
  }

.navlinks label {
  color: #000;
  font-size: 1.5em;
  margin: 0 0.3em 0.6em 0.3em;
  display: inline-block;
  line-height: normal;
  padding: 0.2em 0.5em 0.2em 0.5em;
  }
  
.navlinks strong {
  color: #000;
  background-color: #fff;
  }
  
.navlinks a:hover  {
  text-decoration: underline;
  background-color: #f3f3f3;
  }

.nav-right-margin {
  margin-right: 0.5em;
  font-size: 1.1em !important;
  }

.navlinks  {
  margin-top: 1.3em;
  margin-bottom: 4em;
  }
  
.navlinks a:link, .navlinks a:visited, .navlinks strong {
  font-size: 1.3em;
  margin-right: 0.2em;
  }
  
.nasta-navlinks, .nasta-navlinks a {
  display: inline;
}  

.remove-user {
    text-align: right;
    margin-bottom:0
}

.remove-user a:link, .remove-user a:visited {
    color: #999;
    font-size: 1em;
    margin-bottom:0
}

.remove-user a:hover {
    color: #0645ad;
    text-decoration:none
}

.nav-right-margin {
    margin-right:.5em
}

.navlinks a:hover {
    background-color:#f3f3f3
}

.toggle {
    margin:1em 0 1em 0
}

.toggle-label {
    font-size: .95em;
    color: #0645ad;
    background-color: #f3f3f3;
    padding: .2em .5em .2em .5em;
    cursor: pointer;
    display: block;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    display:inline-block
}

.toggle-label:after {
    content: "+";
    float: left;
    margin-right:.3em
}

.toggle-content {
    margin-top:1em
}

.toggle-input {
    display:none
}

.toggle-input:not(checked) ~ .toggle-content {
    display:none
}

.toggle-input:checked ~ .toggle-content {
    display:block
}

.toggle-input:checked ~ .toggle-label:after {
    content: "-"
}

.toggle-gray-text {
    font-size: .95em;
    margin: 1em 0 1em .5em;
    color:#6c6c6c
}

.svara .toggle-label {
    background-color:#fff
}

.statistik-top-box table tr
{
cursor: default;
}

.width100 {
width: 100%;
}

.inget-konto {
  color:#888888;
  text-align: center;
  margin: 3em 0 1em 0;
}

.statistik-top-box {
    border: 1px solid #e8e8e8;
    padding: .5em .7em .5em .5em;
    background-color: #f3f3f3;
    border-radius: 10px;
    clear:both
}

.statistik-top-box table {
    border: 0;
    margin: 0;
    padding: 0;
    width:100%
}

.statistik-top-box td {
    text-align: right;
    border: 0;
    padding:.6em
}

.statistik-bar-outer {
  border: 1px solid #e8e8e8;
  width: 100%;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP06rL/DwAETQIUQ339NQAAAABJRU5ErkJggg==);
	background-repeat: repeat-y;
  background-color: #fff;
  text-align:left
}

.statistik-bar-green {
    font-size: .7em;
    background-color: #3db526;
    opacity:.7
}

.statistik-bar-red {
    font-size: .7em;
    background-color: #ec3232;
    opacity:.7
}

.genomsnitt {
    text-align: center;
    margin:.8em 0 0 0
}

a:link.radera, a:visited.radera {
    color: #ef3939 !important;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    text-decoration: none;
    padding: 0 .2em 0 .2em;
    border-radius:4px
}

a:hover.radera {
    color: #fff !important;
    border: 1px solid #ef3939;
    background-color: #ef3939;
    font-weight:700
}

.radera-allt {
    max-width: 100%;
    text-align: right;
    margin:1em 0 1em 0
}

.statistik-info {
    max-width: 100%;
    text-align: right;
    margin:.3em 0 -1.3em 0
}

tr.statistik-big {
    font-size:1.1em;
}

td.antal {
    width:37%
}

td.antal-tid {
    width:65%
}

td.kategori {
    width:28%
}

td.procent {
    width: 17%;
    text-align:right
}

td.datum {
    width: 17%;
    text-align:right
}

td.radera {
    width: 1%;
    text-align:right
}

.tmargin {
    margin:1.5em 0 0 0
}

.bmargin {
    margin:0 0 1.5em 0
}

.tbmargin {
    margin:1.5em 0 1.5em 0
}

.tid-td {
	background-image: url(https://cdn.korkortonline.se/images/site/tid.svg);
	background-size: 1.7em;
	background-position: center center;
	background-repeat: no-repeat;
	}
	
a:link.fragetecken, a:link.kryss, a:visited.fragetecken, a:visited.kryss {
    color: #aaa;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    text-decoration: none;
    padding: .1em .3em .05em .3em;
    border-radius: 4px;
    font-weight: 400;
    margin-left:.5em
}

a:hover.fragetecken, a:hover.kryss {
    color: #fff;
    background-color:#e8e8e8
}

.fragetecken {
    font-size:.9em
}

.colmask {
    position: relative;
    clear: both;
    float: left;
    width: 100%;
    overflow:hidden
}

.top-50-50 {
    position: relative;
    float: left;
    overflow: hidden;
    clear: both;
    margin-bottom: 2em;
    width:100%
}

.top-50-50-inner {
    float: left;
    width: 100%;
    position: relative;
    right:48%
}

.top-50-50-left {
    width: 50%;
    left:48%
}

.top-50-50-right {
    width: 48%;
    left:50%
}

.top-50-50-left, .top-50-50-right {
    float: left;
    position: relative;
    overflow:hidden
}

.teoritest-50-50 {
    position: relative;
    clear: both;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    margin-bottom:.8em
}

.teoritest-50-50-inner {
    float: left;
    width: 100%;
    position: relative;
    right:0
}

.teoritest-50-50-left {
    width: 68%;
    left: 0;
    border-right:1px solid #e8e8e8
}

.teoritest-50-50-right {
    width: 31%;
    left:0
}

.teoritest-50-50-left {
    padding:0
}

.teoritest-50-50-left, .teoritest-50-50-right {
    float: left;
    position: relative;
    overflow:hidden
}

.teoritest-50-50-padding {
    padding-left:2.7em
}

.teoritest-50-50 h1 {
    margin-top:0
}

.sub {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 1.7em;
    margin-bottom: 1.7em;
    color: #dadada;
}

.sub strong {
    color: #000;
    margin:0 .3em 0 .3em
}

.sub a {
    text-decoration: none;
    margin:0 .3em 0 .3em
}

.sub a.start {
    margin:0 .3em 0 0
}

.sub a:hover {
    text-decoration:underline
}

#content, #content-nopadding {
    padding: 1.7em 1.5em 1px 1.5em;
    background-color: #fff;
    min-width: 20em;
    border-bottom:1px solid #e8e8e8
}



.bottom-forms {
    margin: 1em 0 1em 0;
    text-align:right
}

.bottom-forms form, .top-forms form {
    display:inline
}

#statistik .provyta .img {
    margin: 0 0 2.5em 0;
    }
        
#statistik .forklaringsruta img {
    float: none;
    margin: 0;
    padding: 0;
    }	
    
#statistik .hr {
    margin:1.5em 0 1.5em 0;
    border-top: 10px solid #000;
    }

#statistik .visa-fraga {
    margin-bottom: 6em;
    clear: right;
    }

.mark {
    width:10px
}

.besvarad {
    font-size: 1.1em;
    color:#a8a7a7
}


.light-green-back {
  background-color:#ecffe7;
  }
  
.light-red-back {
  background-color:#ffebec;
  }

.provyta {
  max-width: 70em;
    }
    
.fraga {
    font-weight: bold;
    font-size: 1.1em;
    margin: 0.5em 0 0 0;
    padding-bottom: 1.1em;
    border-bottom:1px solid #e8e8e8;
    max-width: 100%;
    }

.fraga-markerad {
    background-color: #c1e2fe;
    padding: 0.1em;
    margin-right: 0.5em;
    }

.nasta, .foregaende {
    display: block;
    min-width: 9em;
    width: 9em;
    }
    
.nasta {
    margin: 2.5em 0 1em 0;
    }
    
.foregaende {
    margin: 0 0 1.7em 0;
    }

.sista-fragan {
    display: block;
    margin: 2.5em 0 1em 0;
    }
    
.sista-fragan {
    display: block;
    margin: 2.5em 0 1em 0;
    }
        
.antal-kvar {
    margin: 0 0.8em 0 1em;
    }

.provyta .img, .provyta .img-stor {
    float: right;
    background-color: #fff;
    padding-left: 1.3em;
    margin-bottom: 0.5em;
    }

.provyta .img video {
    max-width:640px;
    width:100%;
    }

.provyta .embed-video {
    width:100%;
    margin-bottom:1em;
    }




.provyta .img video, .provyta .img iframe {
      max-width:100%;
      margin-bottom: 0.9em;
      }
    
    .provyta .klickbar-vm {
      max-width: 220px;
      max-height: 220px;
      margin-bottom: 0.9em !important;
      }
    
    .img  {
      text-align: center !important;
      margin: 0 auto !important;
      width: 100% !important;
      }
    .provyta .img img {
      margin-bottom: 1em;
      }
      
      
      
      
      
.video-iframe {
    padding:56.25% 0 0 0;
    position:relative;
    }

.video-iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
    }

.fullwidth,
.fullwidth-contained {
  display: block;
  margin-bottom: 1rem;
  clear: both;
  margin-inline: 0;
}

.fullwidth img,
.fullwidth video,
.fullwidth picture,
.fullwidth iframe,
.fullwidth-contained img,
.fullwidth-contained video,
.fullwidth-contained picture,
.fullwidth-contained iframe {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 900px) {
  .fullwidth {
    width: calc(100% + 2 * var(--edge));
    margin-inline: calc(-1 * var(--edge));
  }
}



/* SIGNS */

.sign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, max-content));
  gap: 1rem 3rem;
  margin: 1.25rem 0;
  align-items: start;
}

@media (max-width: 900px) {
  .sign-grid {
    gap: 1rem 1rem;
  }
}

.sign-grid-wrap .sign-grid {
  row-gap: 3rem;
}

.sign-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-align: left;
  margin-bottom: 1rem;
}

.sign-grid .sign-item {
  align-items: center;
  text-align: center;
  width: 100px;
}

.sign-grid .sign-item,
.sign-grid-right .sign-item {
  margin-bottom: 0;
}

.sign-item > a {
  display: block;
}

figure {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sign-item figure {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 100%;
}

.sign-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
}

.sign-rotate-90 .sign-item img {
  rotate: 90deg;
}

.sign-rotate-180 .sign-item img {
  rotate: 180deg;
}

.sign-rotate-270 .sign-item img {
  rotate: 270deg;
}

.sign-item figcaption {
  font-size: .9rem;
  line-height: 1.3;
  margin-top: .2rem;
}

.sign-item-text {
  display: block;
  font-style: italic;
}

.sign-code {
  display: block;
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
}

.sign-item figcaption,
.sign-item .sign-code {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 5;
  hyphenate-limit-chars: 10 5 5;
}

.sign-grid-right {
  float: right;
  clear: right;
  margin: 0.5rem 0 0.5rem 1rem;
  width: 100px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sign-grid-right .sign-item {
  align-items: center;
  text-align: center;
}



.vm-max {
    max-width: 220px;
    max-height: 220px;
    }
        
.provyta .img-stor img {
    width: 640px;
    }
    
.provyta .img-forklaring {
    float: right;
    background-color: #fff;
    padding-left: 1.3em;
    margin-bottom: 2em;
    }

.provyta .alt .red-check, .provyta .alt .green-check {
    display: inline-block;
    width: 0.9em;
    margin-left: 0.4em;
    }

.provyta .alt {
    display: block;
    margin:0;
    padding: 1.2em 1em 1.2em 0;
    border-bottom:1px solid #e8e8e8;
    }

.provyta .alt input {
    margin: 0;
    }

.alt-container {
  display: flex;
  }
   
.alt-radio, .alt-radio-res, .alt-text, .alt-check {
  box-sizing: border-box;
  display: block;
  margin: 0;
  border-bottom:1px solid #e8e8e8;
  }
   
.alt-container label {
  display: block;
  margin: 0;
  padding: 1.2em 1em 1.2em 0.7em;
  }
  
.alt-radio, .alt-radio-res, .alt-check {
  width: 1%;    
  padding: 1.1em 1em 1.2em 0;
  }

.alt-check { 
  padding: 1.1em 1em 1.2em 0.3em;
  }

.alt-text {
  width: 100%;
  }
  
.kontroller {
    position: relative;
    clear: both;
    width: 100%;
    overflow: hidden;
    padding:1.3em 0 1.3em 0
}

.provyta-colleft, .provyta-colmid, .provyta-colright {
    float: left;
    width: 100%;
    position:relative
}

.provyta-col1, .provyta-col2, .provyta-col3 {
    float: left;
    position: relative;
    padding: 0;
    overflow:hidden
}

.provyta-botten .provyta-colmid {
    right:33%
}

.provyta-botten .provyta-colleft {
    right:34%
}

.provyta-botten .provyta-col1 {
    width: 34%;
    left: 100%;
    text-align:center
}

.provyta-botten .provyta-col2 {
    width: 33%;
    left:33%
}

.provyta-botten .provyta-col2 img {
    margin: .2em 0 0 0;
    float:left
}

.provyta-botten .provyta-col3 {
    width: 33%;
    left: 67%;
    text-align:right
}


.provyta #xp1 {
    float: left;
    text-align:left
}

.marked, .time {
    color:#777
}


.tid-kvar {
    margin-right: .8em;
    color: #777;
    font-weight:700
}

.obesvarad {
    background-color:#ff8b4b
}

.markerad {
    background-color:#c1e2fe
}

tr.markerad:hover {
    background-color:#c1e2fe
}

.ej-besvarad {
    margin-top: 1em;
    color: #ff8f0a;
    font-weight:700
}

.r {
    border-radius:10px
}

.rb {
    border: 1px solid #e8e8e8;
    border-radius:10px
}

.rbs {
    border-radius: 10px;
    box-shadow:0 0 4px #ccc
}

.box img.nb, .nb {
    border: 0;
    border-radius:0
}

.klickbar {
    width:100%;
}

.klickbar-vm {
    width: 300px;
    max-height:400px
}

.forklaring-vm {
    height: 60px !important;
    max-width:100px !important
}

h1 {
    font-size: 2em;
    clear: both;
    font-weight:400;
    margin-top: 0;
}

h2 {
    font-size: 1.4em;
    font-weight:400
}

table {
    font-size:1em
}

.nowrap {
    white-space: nowrap;
}

.big {
    font-size:1.3em
}

.resh1 {
    padding-right:.5em;
    margin-top: 0;
    display: inline-block;
}

.time {
    color:#777
}

.red, .red-check {
    color:#ef3939
}

.green, .green-check {
    color:#138301
}

.grey {
    color:#999
}

.nya-med {
    color:#00db00
}

.orange {
    color:#f08229
}

.redback {
    background-color:#f99
}

.green-back, table.blank tr.green-back:hover {
    background-color:#d4ffd4
}

.black-hr {
    border-top: 1px solid #000;
    margin:2em 0 2em 0
}

#content li {
    margin:.5em 0 .5em 0
}

.hl1 {
    background-color:#94ff99
}

.hl2 {
    background-color:#ff6
}

.hl3 {
    background-color:#a0ffff
}

.hl4 {
    background-color:#f99
}

.hl5 {
    background-color:#f6f
}

.hl6 {
    background-color:#ca2929
}

.hl7 {
    background-color:#0a0
}

.hl8 {
    background-color:#004699
}

.hl9 {
    background-color:#886800
}

.hr {
    border-top: 1px solid #e8e8e8;
    margin:1em 0 1em 0
}

.xs {
    font-size:.8em
}

.totalt-genomsnitt {
    font-size:1.2em
}

textarea {
    font-family: arial, helvetica, verdana, sans-serif;
    font-size:1em
}

.max {
    max-width:55em
}

.orangetdback {
    background-color:#fdf872
}

.redtdback {
    background-color:#ff7866
}

.small {
    margin-left: 1em;
    font-size:.85em
}

#meddelanden .till_fran {
    font-weight: 700;
    margin-left:.5em
}

#meddelanden .svar_fran {
    color: #585858;
    font-weight: 700;
    margin-left:.5em
}

#meddelanden .till {
    margin-left: .5em;
    color:#585858
}

#meddelanden .datum {
    color:#585858
}

#meddelanden .med {
    border-radius: 10px;
    margin: 1.5em 0 1.5em 0;
    width: 65%;
    padding:1em 1em .9em 1em
}

#meddelanden .meddelande {
    display: block;
    word-wrap:break-word
}

#meddelanden .anvandare {
    border: 1px solid #e8e8e8;
    background-color:#f3f3f3
}

#meddelanden .korkortonline {
    border: 1px solid #dbe3f0;
    background-color:#f0f5fd
}

#meddelanden .partner {
    border: 1px solid #dcead8;
    background-color:#edfae4
}

#meddelanden .anvandare-aktuellt {
    border: 5px solid #e8e8e8;
    background-color:#f3f3f3
}

#meddelanden .korkortonline-aktuellt {
    border: 5px solid #bbcff2;
    background-color:#f0f5fd
}

#meddelanden .partner-aktuellt {
    border: 5px solid #bee6a4;
    background-color:#edfae4
}

#meddelanden .svar {
    margin-left:3em
}

#meddelanden .fran-anvandare {
    padding-bottom: .4em;
    margin-bottom: .8em;
    border-bottom:1px solid #e8e8e8
}

#meddelanden .fran-korkortonline {
    padding-bottom: .4em;
    margin-bottom: .8em;
    border-bottom:1px solid #dbe3f0
}

#meddelanden .fran-partner {
    padding-bottom: .4em;
    margin-bottom: .8em;
    border-bottom:1px solid #dcead8
}

#meddelanden .olast-notis {
    color: #ff660a;
    margin-right:.3em
}

#meddelanden .med textarea {
    width:100%
}


.svara {
    margin-bottom:0
}

.svara a:hover, .svara a:link, .svara a:visited {
    background-color:#fff
}

.olast-inkorg {
    background-color: #f0f5fd;
    font-weight:700
}

.replyarrow {
    display:block
}

a.gray-button, a.red-button {
    color: #9e9e9e;
    text-align: center;
    display: inline-block;
    padding: .6em .8em .6em .8em;
    border: 1px solid #c2c2c2;
    border-radius: 10px;
    clear: both;
    margin-bottom:1em
}

a.gray-button:hover {
    color: #5aa564;
    border: 1px solid #5aa564;
    text-decoration:none
}

a.red-button:hover {
    color: #de4747;
    border: 1px solid #de4747;
    text-decoration:none
}

#footer {
    font-size: .95em;
    position: relative;
    margin: 0 auto;
    color: #474646;
    -webkit-text-size-adjust: none;
    max-width: 970px;
    line-height: 1.5em;
    margin-top: .8em;
    margin-bottom: 2.5em;
    clear: both;
    text-align:center
}

#footer a {
    text-decoration: none;
    margin:0 .5em 0 .5em
}

.footer-space {
    margin:0 .5em 0 .5em
}

#footer .footer-space a:visited, .footer-space a {
    color:#474646
}

.footer-links {
    margin: .3em 0 1.5em 0;
    line-height:2.3em
}

.flex-main { 
  display: flex;
  max-width: 40em;
  text-align: center;
  }

.flex-main img { 
  width: 150px;
  margin-top: 0.5em;
  }
  
.flex-sub {
  padding: 1em;
  flex-grow: 1;
  margin: 0 1.5em 3em 0;
  }

.big-q-box   {
  margin: 0 3em 3em 0;
  }








@media screen and (max-width: 1000px) {

.logo {
    display: none;
}

#menu-bar {
    width: 100%;
    height: auto;
    background-color:#3a71a7; 
    }

#menu {
    height: auto;
    background-color:#3a71a7;
    padding-right:0;
    text-align: center;
    float: none;
    }

#menu   ul {
    list-style: none;
    margin: 0 auto;
    padding: 0.5em;
    height: auto;
    max-width: none;
    overflow: visible;
    
    }

#menu ul li {
    padding: 0.1em;
    text-align: center;
    height: auto;
    float: none;
    overflow: visible;
    display: inline-block;
    overflow: visible;
    }

#menu ul .show-resp {
    display: inline;
    }
    
#menu ul li a {
    color: #fff;
    border:1px solid #fff;
    padding: 0.6em 0.7em 0.6em 0.7em;
    border-radius: 5px;
    line-height: 1em;
    margin: 0.3em;
    overflow: visible;
    }
    
#menu ul ul {
    top : 75px;
    background-color: #3a71a7;
    }
 
}






@media screen and (max-width: 750px) {

.flex-main { 
  display: block;
  max-width: none;
  width: auto;
  margin: 0 auto;
  
  }
  
.flex-sub {
  padding: 1em;
  width: auto;
  margin: 0 0 3em 0;
  }
  
#content {
    padding: 1.2em 1em 1px 1em;
}

#content-nopadding {
    padding: 1.2em 0 1px 0;
}

.searchbox {
    margin:0 0 1.2em 0;
}

.message-box {
    padding: 0 0 .5em 0;
}

.green-box, .red-box  {
    display: block;
}
.sub {
    padding-bottom: 1em;
    margin-bottom: 1.2em;
}
  
.alt-container label {
  padding: 1.2em 1em 1.2em 0.7em;
  }
  
.searchbox input[type=text] {
    width: 70%;
}

.top-50-50-inner {
    float: left;
    width: 100%;
    position: relative;
    right:0
}

.top-50-50-left {
    width: 100%;
    left:0
}

.top-50-50-right {
    width: 100%;
    left:0%;
    margin-top: 2em;
}

.top-50-50-left, .top-50-50-right {
    float: left;
    position: relative;
    overflow:hidden
}

.resh1 {
    margin-top: 0.7em;
}

.navlinks  {
  font-size: 1em;
}

.navlinks a:hover  {
  text-decoration: none;
  }
  
.navlinks a:link, .navlinks a:visited, .navlinks strong {
  margin-right: 0.6em;
  line-height: 2.5em;
  }

.nasta-navlinks {
  margin-right: 1.4em;
  display: block;
  }
  
.nasta-navlinks a {
  text-align: center;
  display: block;
  width: 100%;
  margin-top: 1em;
  }
  
.provyta {
  margin: 0;
  }
  
.lr-space {
  margin: 0 1em 0 1em;
  }
  
#statistik .provyta .img {
    margin-bottom:0;
    }

#statistik .hr {
    margin: 0 0 1em 0;
    border-top: 10px solid #000;
    }

#statistik .provyta .img img {
    margin-left:1em;
    }
    
#statistik .provyta .img img.klickbar, #statistik .provyta .img img.klickbar-left, .img img.klickbar {
    margin-left:0;
    }
  
.img img {
    max-width: 92%;
    height: auto;
    }
    
.img .klickbar {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 0.9em !important;
    }
    
 #statistik {
  font-size:1.1em;
  }
  
.provyta .fraga {
  font-weight: bold;
  margin-top: 0 !important;
  padding: 0 1em 1em 1em !important;
  border-bottom:1px solid #e8e8e8;
  max-width: none;
  font-size:1em;
  }
  
.provyta .alt {
  padding: 1.2em 1em 1.2em 1em;
  }
.provyta .img video, .provyta .img iframe {
  max-width:100%;
  margin-bottom: 0.9em;
  }

.provyta .klickbar-vm {
  max-width: 220px;
  max-height: 220px;
  margin-bottom: 0.9em !important;
  }

.img  {
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  }
.provyta .img img {
  margin-bottom: 1em;
  }
  
.alt-container label {
  padding: 1.2em 1em 1.2em 0.7em;
  }
  
.alt-radio, .alt-check {
  padding: 1.2em 1em 1.2em 0.7em;
  }

.alt-radio-res {
  padding: 1.2em 1em 1.2em 0;
  }  
  
.provyta .alt .red-check, .provyta .alt .green-check {
  margin-left: 0;
  }
  
.forklaring-text {
  margin: 1.3em 1em 0 1em;
  }  
  
.show-resp {
  display: inline;
  } 

.display-block-resp {
  display: block;
  }     

.main-login {
    margin: 0 auto;
    max-width: none;
    background-color: #fff;
    padding: 0;
    margin-top: 0;
    margin-bottom:3em;
    border:0;
    }

.main-login label {
  display: block;
  margin-top: 2em;
  }	

.main-login label input {
  display:inline !important;
  width: auto !important;
  }	

.byt-login {
    font-size: 1.4em;
    margin-top:.8em
}

.hide-resp {
    display:none
}

.small-glomt {
    font-size: 1em;
    margin-left: 0;
    display: block;
    text-align: center;
    margin-top:1.5em
}

.main-login input {
    width: 100%;
    margin: 0;
    font-size: 1.3em !important;
    box-sizing:border-box
}

.footer-resp-space-top {
    display: block;
    margin-top:.7em
}

.resp-block {
    display: block
}

.width100 {
    width: auto;
    }
    
.resp-table	table, .resp-table-blank table {
    border: solid;
    border-width: 0px;
    border-color: #e8e8e8;
    width: 100%;
    border-collapse: collapse;
    vertical-align: middle;
    empty-cells: show;
    }

.resp-table tr, .resp-table-blank tr {
    border: solid;
    border-width: 0px;
    border-color: #e8e8e8;
    padding: 0;
    margin:0;
    }

.resp-table table.slim, table.slim td, .resp-table-blank table.slim {
    border: 0;
    vertical-align: top;
    padding: 0;
    }
    
.resp-table table.blank tr:hover, table.signs tr:hover, .resp-table-blank table.blank tr:hover {
    background-color: inherit;
    }

.resp-table table.white tr:hover, table.slim tr:hover, .resp-table-blank table.white tr:hover  {
    background-color: #fff;
    }
    
.resp-table td, .resp-table-blank td {
    border: solid;
    border-width: 0px;
    border-color: #e8e8e8;
    padding: 0.5em;
    }

.resp-table td.bild, .resp-table-blank td.bild {
    width: 1%;
    }

.resp-table .rtd, .resp-table-blank rtd {
    text-align: left;
    }

.resp-table .ctd, .resp-table-blank .ctd {
    text-align: center;
    }

.resp-table td.np, .resp-table-blank td.np {
    padding: 0;
    background-color: inherit;
    text-align:left;
    }

.resp-table .np img, .resp-table-blank .np img {
    margin: 0 0 0 0.5em;
    display: inline;
    }
    
.np img {
    padding: 0;
    margin: 0 auto;
    display: block;
    max-width: 110px;
    max-height: 78px;
    }
    
.resp-table td:first-child, .resp-table-blank td:first-child {
    font-weight: bold;
    }
    
.resp-table-white td:first-child, .resp-table-white-blank td:first-child {
    background: none !important;
    background-color: #fff !important;
    }
        
.resp-table .rtd, .resp-table-blank .rtd {
    display: inline-block;
    width:auto;
    }

.resp-table table, .resp-table thead, .resp-table tbody, .resp-table-blank thead, .resp-table-blank tbody, .resp-table-blank table, .resp-table td, .resp-table-blank td, .resp-table tr, .resp-table-blank tr {
    display: block;
    }
         
.resp-table thead, .resp-table-blank thead {
   display: none;
    }
     
.resp-table tr, .resp-table-blank tr {
    border-bottom: 0;
    margin-bottom: 1.2em;
    padding-bottom: 0;
    line-height: 0.7em;
    }
 
.resp-table tr:last-child, .resp-table-blank tr:last-child {
    margin-bottom: 0em;
    } 
     
.resp-table td, .resp-table-blank td {
    border: none;
    position: relative;
    padding-left: 0.5em;
    white-space: normal;
    text-align:left;
    }
     
.resp-table td:before, .resp-table-blank td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
    }
 
.resp-table td:before, .resp-table-blank td:before {
    content: attr(data-title);
    }
 
.resp-table tr.statistik-big, .resp-table-blank tr.statistik-big {
    font-size:1.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    }

.tid-td {
    background-position: left center;
    margin: 0 0 0 0.3em;
    }

.right {
    text-align: left;
    float: none;
    padding: 0;
    }
    
tr:hover {
    background-color: inherit;
    }

.resp-table-results	{
margin-top: 1em;
    }

.resp-table-results	table, .resp-table-results-blank table {
  border: solid;
  border-width: 0px;
  border-color: #e8e8e8;
  width: 100%;
  border-collapse: collapse;
  vertical-align: middle;
  empty-cells: show;
  }

.resp-table-results tr, .resp-table-results-blank tr {
  border: solid;
  border-width: 1px;
  border-color: #e8e8e8;
  padding: 0;
  margin:0;
  }

.resp-table-results table.slim, table.slim td, .resp-table-results-blank table.slim {
  border: 0;
  vertical-align: top;
  padding: 0;
  }
  
.resp-table-results table.blank tr:hover, table.signs tr:hover, .resp-table-results-blank table.blank tr:hover {
  background-color: inherit;
  }

.resp-table-results table.white tr:hover, table.slim tr:hover, .resp-table-results-blank table.white tr:hover  {
  background-color: #fff;
  }
  
.resp-table-results td, .resp-table-results-blank td {
  border: solid;
  border-width: 1px;
  border-color: #e8e8e8;
  padding: 0.5em;
  }

.resp-table-results td.bild, .resp-table-results-blank td.bild {
  width: 1%;
  }

.resp-table-results .rtd, .resp-table-results-blank rtd {
  text-align: left;
  }

.resp-table-results .ctd, .resp-table-results-blank .ctd {
  text-align: center;
  }

.resp-table-results td.np, .resp-table-results-blank td.np {
  padding: 0;
  background-color: inherit;
  text-align:left;
  }

.resp-table-results .np img, .resp-table-results-blank .np img {
  margin: 0 0 0 0.5em;
  display: inline;
  }
  
.np img {
  padding: 0;
  margin: 0 auto;
  display: block;
  max-width: 110px;
  max-height: 78px;
  }
  
.resp-table-results td:first-child, .resp-table-results-blank td:first-child {
  background-color: #e6e6e6;
  font-weight: bold;
  }
  
.resp-table-results-white td:first-child, .resp-table-results-white-blank td:first-child {
  background: none !important;
  background-color: #fff !important;
  }
      
.resp-table-results .rtd, .resp-table-results-blank .rtd {
  display: inline-block;
  width:auto;
  }

.resp-table-results table, .resp-table-results thead, .resp-table-results tbody, .resp-table-results-blank thead, .resp-table-results-blank tbody, .resp-table-results-blank table, .resp-table-results td, .resp-table-results-blank td, .resp-table-results tr, .resp-table-results-blank tr {
  display: block;
  }
       
.resp-table-results thead, .resp-table-results-blank thead {
 display: none;
  }
   
.resp-table-results tr, .resp-table-results-blank tr {
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 1em;
  padding-bottom: 0;
  }

.resp-table-results tr:last-child, .resp-table-results-blank tr:last-child {
  margin-bottom: 0em;
  } 
   
.resp-table-results td, .resp-table-results-blank td {
  border: none;
  position: relative;
  padding-left: 0.5em;
  white-space: normal;
  text-align:left;
  }
   
.resp-table-results td:before, .resp-table-results-blank td:before {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 45%;
  padding-right: 10px;
  white-space: nowrap;
  text-align:left;
  font-weight: bold;
  }

.resp-table-results td:before, .resp-table-results-blank td:before {
  content: attr(data-title);
  }

.resp-table-results tr.statistik-big, .resp-table-results-blank tr.statistik-big {
  font-size:1.3em;
  }

#meddelanden .med {
     width:auto;
    }
    
#meddelanden .svar {
    margin-left: 2em;
    }


}