#ab {
    position: fixed;
    width: 500px;
    background: #fff;
    left: 50%;
    top: 100px;
    z-index: 9999;
    padding: 15px 20px 10px;
    border: 5px solid red;
    margin-left: -420px;
    font-size: 18px;
}

#ab a {
    color: #444;
}

#ab .d {
    font-size: 200%;
    line-height: 15px;
}

#ab .c {
    position: absolute;
    right: -23px;
    top: -23px;
    font-size: 40px;
    background: #fff;
    line-height: 40px;
    border-radius: 20px;
    max-width: 40px;
    max-height: 40px;
    cursor: pointer;
}

#ab + form {
    opacity: 0.5;
    transition: opacity, filter .5s;
    filter: contrast(0.5);
}

fieldset, hr {
    border: 0;
    padding: 0;
}

a:focus, input:focus {
    outline: 0;
}

.onlyMobile {
    display: none !important;
}

a.anchor, hr {
    display: block;
}

button, html, input, select, textarea {
    color: #111;
}

body {
    font-size: 13px;
    line-height: 1.4;
    text-shadow: 0 0 1px rgba(128,128,128, .01);
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
}

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {
    font-weight: 400;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    height: 1px;
    border-top: 1px solid #ccc;
    margin: 1em 0;
}

img {
    vertical-align: middle;
    max-width: 100%;
}

fieldset {
    margin: 0;
}

.chromeframe {
    margin: .2em 0;
    background: #ccc;
    color: #000;
    padding: .2em 0;
}

@font-face {
    font-family: aleoregular;
    src: url(/Fonts/aleo-regular-webfont.eot);
    src: url(/Fonts/aleo-regular-webfont.eot?#iefix) format('embedded-opentype'), url(/Fonts/aleo-regular-webfont.svg#aleoregular) format('svg'), url(/Fonts/aleo-regular-webfont.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

h1 {
    font-family: aleoregular, serif;
    font-size: 32px;
    color: #222;
    margin: 25px 0 15px;
    line-height: 1.2;
}

h2, h5 {
    font-family: aleoregular;
    color: #222;
}

h2 {
    font-size: 28px;
    margin: 8px 0 20px;
}

h3 {
    font-size: 16px;
    color: #222;
    margin: 4px 0 8px;
}

h4 {
    font-size: 14px;
    color: #222;
    margin: 2px 0;
}

h5 {
    font-size: 18px;
    margin: -5px 0 2px -8px;
}

a {
    color: #111;
}

.joggSite a {
    color: #227626;
}

a.qc-cmp2-persistent-link {
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 0;
    padding: 8px;
    padding-bottom: 6px;
}

a.anchor {
    width: 0;
    height: 0;
    position: relative;
    top: -85px;
}

a.tooltipUpdate {
    position: relative;
    float: right;
    margin: 2px 5px;
    width: 16px;
    height: 16px;
    text-indent: -9999px;
    background: url(/Images/ajax_spinner_small.gif) no-repeat;
    z-index: 1000;
}

.addBtn, .addBtn2, .addBtn:active, .h1Button, .h1Button:active {
    background: #1e8438;
}

p {
    margin: 4px 0 8px;
}

ol, ul {
    margin: 0;
    padding: 0;
}

.dotlist li, .nolist li {
    padding: 1px 1px 1px 12px;
}

ul li {
    list-style-type: none;
}

.dotlist li {
    list-style-position: inside;
    list-style-type: disc;
}

.nolist li {
    list-style-type: decimal;
    list-style-position: inherit;
    margin: 1px 1px 1px 20px;
}

.alignright {
    text-align: right;
}

.left {
    float: left;
}

.right {
    float: right;
}

table.settings {
    font-size: 14px;
}

ul.settings li {
    float: left;
    text-align: center;
    margin: 0 15px 10px 0;
}

.error, .ok {
    margin: 5px 0;
    font-weight: 700;
}

.error {
    color: #900 !important;
}

.ok {
    color: #090 !important;
}

.errorText::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    padding-right: 1ex;
    content: "\f06a";
}

ul.settings span {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.CalcDiv, .bigForm input, .bigForm label, .bigForm select, .bigForm textarea, .calc label div, .form .label{
    display: inline-block;
}

.boxShadow {
    box-shadow: 0 0 2px #888;
}

.noBorder {
    border: 0 !important;
}

.round, a.round img {
    border-radius: 50%;
}

.staravatar {
    height: 50px;
    margin: 0;
    padding: 0;
    width: 50px;
}

.addBtn, .addBtn2, .button, .button_01, .clearBtn, .grayBtn, .submit input, a.addBtn, input[type=button], input[type=submit] {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 1px;
    position: relative;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    border: 0;
    white-space: nowrap;
    cursor: pointer;
}

.addBtn2 {
    padding: 8px;
    border-radius: 8px;
}

.button, .button_01, .lightBtn, .submit input, input[type=button] {
    font-weight: 700;
}

.button, .button_01, .smallBtn, .submit input, a.smallBtn, input[type=button], input[type=submit] {
    font-weight: 700;
    border-radius: 3px;
    font-size: 12px;
    padding: 5px 10px;
    margin: 0 1px;
}

.std_tbl input[type=submit] {
    min-width: 80px;
}

.std_tbl input[type=submit].addBtn{
    background: #1e8438;
}

.std_tbl input[type=submit].addBtn:hover{
    background: #18682c;
}

input.addBtn, input.clearBtn, input.grayBtn {
    padding-bottom: 3px;
    padding-top: 1px;
    top: -1px;
}

.addBtn2:hover, .addBtn:hover, .h1Button:hover {
    background: #1e8438;
    color: #fff;
}

.grayBtn, input[type=button].grayBtn, input[type=submit].grayBtn {
    background: #666;
}

.grayBtn:hover, input[type=button].grayBtn:hover, input[type=submit].grayBtn:hover {
    background: #616161;
    color: #fff;
}

.grayBtn:active, input[type=button].grayBtn:active, input[type=submit].grayBtn:active {
    background: #616161;
}

a.grayBtn {
    color: #fff;
}

.button, .button_01, .submit input, input[type=button], input[type=submit] {
    background: #999;
    color: #fff !important;
    border: 1px solid #999;
    transition: all .2s;
}

    .button:hover, .button_01:hover, .submit input:hover, input[type=button]:hover, input[type=submit]:hover {
        background: #888;
        color: #fff;
    }

input.clearBtn {
    background: 0 0 !important;
    border: none !important;
    color: #227626 !important;
}

.button:active, .button_01:active, .submit input:active, input[type=button]:active, input[type=submit]:active {
    background: #888;
    color: #fff;
}

.button_01.button_save {
    background: #1e8438;
    border-color: #1b7933;
}

.button_01.button_save:hover {
    background: #1b7933;
}

.button_01.button_delete:hover {
    background: #c00;
}

.button_buy {
    width: 100%;
    max-width: 300px;
    text-align: center;
    padding: 8px 12px 9px 12px;
    margin: 0;
    border-radius: 5px;
    background-color: #32a736;
    font-weight: bold;
    font-size: 16px;
}

.button_buy:hover {
    background-color: #227626;
}

.button_edit,
.button_popout,
.button.button_popout,
.button_01.button_popout,
.submit input.button_popout,
input[type=button].button_popout,
input[type=submit].button_popout {
    color: #333 !important;
    background: #fff;
    border: 1px solid #999;
    font-weight: 400;
    border-radius: 100px;
    margin: 0;
    padding: 2px 10px 3px;
    line-height: 20px;
    text-align: center;
    min-width: 80px;
}


.button_edit:hover,
.button_popout:hover,
.grayBtn.button_popout:hover,
input[type=button].grayBtn.button_popout:hover,
input[type=submit].grayBtn.button_popout:hover,
.button_edit:active,
.button_popout:active,
.grayBtn.button_popout:active,
input[type=button].grayBtn.button_popout:active,
input[type=submit].grayBtn.button_popout:active {
    background: #fff;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}

select + input[type=submit].button_popout {
    height: 24px;
    padding-top: 1px;
    line-height: 18px;
}

.button.button_popout.button_save, 
.button_popout.button_save:hover {
    border-color: #1b7933;
}

.button_popout.button_delete:hover {
    border-color: #c00;
}

.hasMatch .button.button_popout.button_save,
.similarRow .button.button_popout.button_save {
    border-color: #aaa;
}

.hasMatch .button.button_popout.button_save:hover,
.similarRow .button.button_popout.button_save:hover,
.planned.matching .button.button_popout.button_save {
    border-color: #1b7933;
}

.button.button_popout.button_logout {
    margin: 10px;
}

.button.button_popout.button_logout:hover {
    border-color: red;
}

.button.button_less {
    line-height: 1.1;
    min-width: 50px;
}

.button.button_copy {
    min-width: 60px;
}

.button_popout i.fal,
.button_popout i.far,
.button_popout i.fas {
    padding: 0 5px 0 2px;
    color: #666;
}

.lightBtn {
    background: #ccc;
    color: #fff !important;
    border: 1px solid #ccc;
    cursor: pointer;
}

.lightBtn:active, .lightBtn:hover {
    background: #aaa;
    border: 1px solid #aaa;
    color: #fff;
}

button[disabled], button[disabled]:active, button[disabled]:hover, html input[disabled], html input[disabled]:active, html input[disabled]:hover {
    cursor: default;
    background: #eee;
    color: #999;
}

input[type=text], input[type=email], input[type=password], select, textarea {
    border: 1px solid #BBB;
    border-radius: 2px;
    font-size: 13px;
    color: #222;
}

input[type=text], input[type=email], input[type=password] {
    padding: 2px 5px;
}

.wide_input {
    width: 100%;
}

.messageWarning {
    background: #eee;
    padding: 10px 20px;
    font-size: 12px;
}

.CalcDiv, a.h1Button, button.h1Button, input.h1Button {
    font-size: 28px;
    position: relative;
    white-space: nowrap;
}

a.h1Button, button.h1Button, input.h1Button {
    padding: 10px 30px;
    color: #fff !important;
    font-family: aleoregular, serif;
    border-radius: 6px;
    border: 0;
    background: #1e8438;
    text-align: center;
}

.CalcDiv, .CalcDiv input {
    font-family: aleoregular;
}

.CalcDiv {
    padding: 2px 16px 4px;
    margin: 0 1px;
    color: #fff;
    border-radius: 20px;
    border: 0;
    background: #31a836;
}

.CalcDiv input {
    border-radius: 15px;
    margin: 7px 10px;
    width: 60px;
    border: 0;
    text-align: right;
    font-size: 25px;
    padding: 3px;
}

.box h2, .flow .header, .siteEvent > .info div {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
}

textarea {
    padding: 5px;
    border-radius: 3px;
    margin: 0 10px;
    resize: vertical;
    width: 385px;
}

.placeholder {
    color: #aaa !important;
}

input[type=text]:focus::placeholder
{
    color: transparent;
}

.input.calendar,
.form input.image {
    font-size: 11px;
    /* height: 14px;*/
    margin-right: 2px;
    padding: 4px;
    vertical-align: middle;
}

.box fieldset, .wide_box fieldset {
    background: #fff;
    border: none;
    clear: both;
    float: left;
    font-size: 12px;
    margin: 1px 0 0;
    padding-bottom: 5px;
    width: 100%;
}

fieldset legend {
    font-weight: 700;
}

fieldset ol {
    list-style: none;
    padding: 0;
}

fieldset li:first-child {
    border: none;
    padding-top: 5px;
}

fieldset li {
    clear: left;
    float: left;
    padding: 7px 0;
    width: 100%;
}

fieldset label {
    width: 120px;
    color: #000;
    float: left;
    margin: 0 5px 0 10px;
    position: relative;
}

fieldset label + input[type=text],
fieldset label + input[type=email],
fieldset label + input[type=password],
fieldset label ~ select {
    margin-top: -4px;
}

fieldset.workoutTriparts td[colspan="3"] {
    padding: 5px 0;
}

fieldset.workoutTriparts .button_less {
    min-width: 100px;
}

fieldset.workoutMultiparts,
fieldset.workoutTriparts {
    width: 375px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 10px;
}

fieldset.workoutMultiparts legend,
fieldset.workoutTriparts legend {
    padding: 1px 15px 2px;
    background: #eee;
    border-radius: 100px;
    text-align: center;
}

fieldset.workoutMultiparts li:last-of-type {
   text-align:center;
}

fieldset.workoutMultiparts tr,
fieldset.workoutTriparts tr {
    border-top: 1px solid #eee;
}

fieldset.workoutMultiparts tr:last-of-type,
fieldset.workoutTriparts tr:last-of-type {
    border-bottom: 1px solid #eee;
}

fieldset.workoutMultiparts tr:hover,
fieldset.workoutTriparts tr:hover {
    background: #fafafa;
}

fieldset.workoutMultiparts td,
fieldset.workoutTriparts td {
    padding: 5px 0;
}

fieldset.workoutAdditionalData select {
    min-width: 200px;
}

fieldset.workoutAdditionalData select option[value="0"]:disabled,
fieldset.search-workout select option:disabled
{
    color: #333;
    background: #F5F5F5;
    font-weight: 900;
    font-style:italic;
}

fieldset .route-info,
fieldset .equipment-info {
    display: block;
    width: 270px;
    margin-left: 135px;
    font-size: 12px;
    line-height: 1.2;
    font-style: italic;
}

fieldset .valda_kompisar li {
    border-top: 1px solid #eee;
    width: 262px;
    padding: 3px 5px 0;
}

fieldset .valda_kompisar li:last-of-type {
    border-bottom: 1px solid #eee;
}

fieldset .valda_kompisar li:hover {
    background: #fafafa;

}

fieldset.actionButtons {
    padding: 10px 40px 10px ;
    text-align:right;
}

fieldset.actionButtons .button.button_popout {
    margin-right: 20px;
}

fieldset.actionButtons .button.button_popout:last-of-type {
    margin-right: 0;
}

.calc fieldset {
    margin-bottom: 10px;
}

.calc label.calc_wide {
    width: 110px;
}

.calc label {
    width: 95px;
    margin-bottom: 5px;
}

select {
    color: #333;
    font-size: 12px;
    padding: 2px;
    max-width: 276px;
    background-color: #fff;
}

.form .label {
    color: #666;
    font-size: 11px;
    margin-left: 3px;
    padding: 3px 0;
    vertical-align: top;
}

.form input {
    margin-right: 0;
}

.form input[type=text].runda,
.form input[type=text].url, 
.form select.runda {
    width: 272px;
}



.form select.traningstyp,
.form select.traningsform {
    width: 131px;
    margin-right: 10px;
}

.form select.timminsek {
    width: 55px;
    margin: 0 2px;
}

.form select.timminsek:first-of-type {
    margin-left: 0;
}

.form input[type=text].distans {
    width: 45px;
}

.form input[type=text].datum {
    width: 80px;
}

.form input[type=text].tid {
    width: 45px;
}

.form textarea.tid {
    width: 45px;
}

.bigForm label {
    margin: 15px 20px 0 0;
    width: 120px;
    font-size: 14px;
}

.bigForm input, .bigForm select, .bigForm textarea {
    width: 230px;
    max-width: 350px;
    font-size: 14px;
    margin: 15px 0 0;
}

.bigForm select {
    width: 242px;
}

.bigForm textarea {
    width: 340px;
    height: 80px;
}

.blogBoxes input, .blogBoxes label {
    vertical-align: middle;
}

.blogBoxes li {
    float: left;
    margin: 0 10px 10px 0;
    border: none;
    width: auto;
    padding: 0;
    clear: none;
}

.blogBoxes li:first-child {
    padding: 0;
}

.blogBoxes label, .form .blogBoxes label {
    color: #333;
    padding: 0 2px;
    margin: 0 10px 0 2px;
    white-space: nowrap;
    float: none;
}


.blogText {
    height: 370px;
}

.confirmPopup {
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    border-color: Gray;
    padding: 7px;
    width: 190px;
    text-align: left;
}

.confirmPopup .buttons, .confirmPopup .title {
    width: 100%;
    text-align: center;
    background-color: #FFF
}

.confirmPopup .title {
    padding-bottom: 10px;
    color: #000;
}

.confirmPopup .buttons {
    padding: 10px 0 0;
    margin-bottom: 5px;
}

.sComment,
.sLike,
.sPublished,
.sViews {
    position: relative;
    font-family: Helvetica, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    float: left;
    padding: 0 20px 2px 18px;
    white-space: nowrap;
}

.sLike .likers {
position: absolute;
bottom: 25px;
background-color: #333;
padding: 7px 10px;
border-radius: 5px;
text-transform: none;
margin-left: -50%;
cursor: default;
line-height: 1;
z-index: 1;
}

.comment .sLike .likers {
    left: -25px;
}

.slides .sLike .likers {
    top: 25px;
    bottom: unset;
    z-index: 1;
}
.sLike .likers .popup-like {
    float: left;
    margin-top: 5px;
}

.sLike .liker {
    clear: both;
    float: left;
    margin: 2px 0;
    color: #ddd;
    font-weight: 700;
    width: 100%;
    text-align: left;
}

.sLike .liker a {
    color: #fff;
}

.sLike .liker a:hover {
    text-decoration: underline;
}

.sViews {
    padding-left: 20px;
}

.social > div:last-of-type {
    padding-right: 0;
}
.social > div:first-of-type {
    padding-left: 0;
}

.socialSmall > div {
    font-size: 11px;
    padding: 0 12px 2px 16px;
}

.socialSmall > div:first-of-type {
    padding-left: 0;
}

.socialWo > div {
    font-size: 11px;
    padding: 0 12px 0 16px;
    margin-top: 8px;
}

.sComment:before,
.sLike:before,
.sPublished:before,
.sViews:before,
.flag:before,
.edit:before {
    position: relative;
    min-width: 15px;
    font-family: "Font Awesome 5 Pro";
    display: inline-block;
    font-weight: 300;
    color: #666;
    transition: all .1s;
    text-align: center;
    margin-right: 4px;
    margin-left: -2px;
}

.sPublished:before {
    content: "\f017";
}

.sLike:before {
    content: "\f164";
    font-size: 110%;
    padding-right: 1px;
    border-radius: 100px;
    transition: box-shadow .2s;
}

.sLike:hover:before {
    transform: rotate(-15deg);
    transform-origin: left;
    background: #eee;
    box-shadow: 0 0 0 10px rgba(231, 231, 231, 0.7);
}

.sLike.meLike:before {
    font-weight: 800;
    color: #999;
}

.sLike.meLike:hover:before {
    font-weight: 300;
    color: #666;
    transform:none;
}

.sComment:before {
    content: "\f075";
}

.siteEvent .socialSmall .sComment:before {
    content: "\f4ad";
    border-radius: 100px;
    transition: box-shadow .2s;
}

.siteEvent .socialSmall .sComment:hover:before {
    font-weight: 800;
    color: #999;
    background: #eee;
    box-shadow: 0 0 0 10px rgba(231, 231, 231, 0.7);
}

.sViews:before {
    content: "\f06e";
    font-weight: 800;
    color: #999;
}

.sComment a {
    font-weight: 400;
    font-size:11px;
    color: #999;
}

.sLike {
    cursor: pointer;
}

.flag:before {
    content: "\f024";
    font-weight: 800;
    font-size: 90%;
    color: #ccc;
    transform: rotate(-10deg);
    top: -2px;
    border-radius: 100px;
    min-width: 16px;
    min-height: 16px;
    text-align: center;
}

.flag:hover:before {
    color: #c62828;
    background: #eee;
    box-shadow: 0 0 0 10px rgba(231, 231, 231, 0.7);
}

body, html {
    height: 100%;
}

.bodyForm {
    display: block;
    min-height: 100%;
    /*background: #fff no-repeat top;*/
    background-size: 100%;
    margin-bottom: -20px;
    transition: filter .5s;
}

body.editorWindow, html.editorWindow {
    min-width: 0;
}

html.editorWindow body {
    background-color: #fff;
    background-image: none;
}

#content {
    background: #fff;
    width: 1000px;
    min-height: 753px;
    margin-bottom: 25px;
 }

.content {
    margin: 0;
    float: left;
    width: 100%;
    position: relative;
}

/*.IsMobileDevice #startPageArticle #arrowLeft, .IsMobileDevice #startPageArticle #arrowRight, .anon #toggleStartPageArticle {
    display: none;
}*/

.col, .column, .fullColumn, .rightColumn, .wideColumn {
    position: relative;
    float: left;
}

.col, .column {
    width: 480px;
    margin: 0 10px;
}

.wideColumn {
    width: 720px;
}

.map .wideColumn {
    width: 770px;
}

.rightColumn {
    width: 260px;
    margin: 0 10px;
}

.map .rightColumn {
    width: 150px;
}

.fullColumn {
    width: 100%;
    padding: 10px;
}

.bg3col .col {
    width: 292px;
}

#startPageArticle #arrowLeft, #startPageArticle #arrowRight {
    position: absolute;
    top: 110px;
    width: 21px;
    height: 36px;
    cursor: pointer;
}

.resp_part_half:first-of-type {
    margin-right: 20px;
}

#startPageArticle {  
    position: relative;
    padding: 0 35px 0 10px;
    min-height: 200px;
}

#toggleStartPageArticle {
    position: absolute;
    top: 12px;
    left: 965px;
    height: 22px;
    width: 22px;
    background: url(../img/icons.png) -300px -22px;
    cursor: pointer;
    z-index: 1;
}

#toggleStartPageArticle:hover {
    background: url(../img/icons.png) -322px -22px;
}


#startPageArticle #arrowRight {
    left: 965px;
    font-size: 32px;
}


#startPageArticle .swipe-wrap > div {
    width: 950px;
}

#startPageArticle .image {
    width: 460px;
    float: left;
    padding: 8px;
    overflow: hidden;
    margin: 5px 10px 5px 10px;
}

#startPageArticle h1 {
    float: left;
    width: 440px;
    margin: 5px 0 0 20px;
}

#startPageArticle p {
    float: left;
    width: 440px;
    margin: 6px 0 0 20px;
}

.summaryFull{
    min-height:210px;
}

#startPageArticle a p {
    color: #333;
}

#startPageArticle .vinjett {
    display: inline-block;
    margin-right: 0.5em;
    padding: .35em .35em .175em;
    background-color: #999;
    color: #fff;
    border-radius: 3px;
    font-family: Helvetica, sans-serif;
    font-size: .625rem;
    line-height: 1;
    text-transform: uppercase;
}

#startPageArticle .social {
    float: right;
    margin: 14px 20px 0 7px;
}

#startPageArticle a#m_ingressLink span.summaryFull {
    display: block;
}

.EditArticleButtons input {
    width: 100px;
    margin: 5px;
}

.box, .flow {
    margin: 0 0 15px 0;
}

.box {
    padding: 0 5px;
}

.box h2, .flow .header {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin: 8px 0 4px;
}

    .box ~ .box, .box ~ .flow, .flow ~ .box, .flow ~ .flow, .withBoxBorder {
        border-top: 2px solid #33a737;
    }

.box h2,  .flow .header {
    color: #222;
}

.withoutBoxBorder {
    border-top: none !important;
}

.flow > div > div {
    margin: 0 10px 0px;
    padding-top: 7px;
    border-top: 1px solid #ddd;
}

.forumFlow > div > div {
    margin: 0 10px 5px;
}

.flow > div > div:first-of-type {
    border-top: none;
}

.transpirationFlow {
    border-bottom: 2px solid #33a737;
    margin-bottom: 10px;
}

.imageUploadControlWithProgressToTheLeft {
    display: inline-block;
    width: 0;
    vertical-align: top;
}

.flow #ImageUploadButton {
    position: absolute;
    right: 2px;
    top: 2px;
}

.imageUploadControlWithProgressToTheLeft #ImageUploadButton {
    vertical-align: top;
}

fieldset .imageUploadControlWithProgressToTheLeft #ImageUploadButton {
    margin-top: 10px;
}

#ImageUploadButton.button_popout {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 20px;
    color: #bbb !important;
    padding: 3px 0 2px;
}

#imageUploadProgressControl.displayImageUploadProgressControl {
    display: inline-block;
}

.imageUploadControlWithProgressToTheLeft + #imageUploadProgressControl {
    position: relative;
    float: right;
    border: 1px solid #BBB;
    border-radius: 4px;
    padding: 3px;
    margin-left: 3px;
}

.showMore, .siteEvent {
    border-top: 1px solid #33a737;
}

fieldset .imageUploadControlWithProgressToTheLeft + #imageUploadProgressControl {
    margin-right: 10px;
}

.flow #imageUploadProgressControl.displayImageUploadProgressControl {
    display: block;
}

.workoutComments #imageUploadProgressControl {
    float: none;
    margin-left: 135px;
    width: 264px;
    background: #fff;
    margin-top: -30px;
}

#imageUploadProgressControl {
    display: none;
    text-align: center;
}

#imageUploadProgressControl #progressBar {
    display: none;
}

.hiddenUploadFile {
    height: 0;
    width: 0;
    overflow: hidden;
}

.siteEvent .img, .siteEvent .img img {
    width: 50px;
    height: 50px;
}

.showMore, .flow div .showMore {
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    color: #666;
    margin: 0px 10px 30px;
    padding-top: 10px;
}

.flow a {
    color: #111;
}

.siteEvent {
    position: relative;
    padding: 7px 0 0px;
}

.siteEvent > div:first-of-type {
    border-top: none;
}

.siteEvent .img {
    position: absolute;
    top: 10px;
    left: 0;
}

.siteEvent > .info {
    float: left;
    width: 390px;
    position: relative;
    top: 1px;
    margin-left: 60px;
}

.siteEvent > .info div {
    font-size: 11px;
    color: #888;
    float: left;
}

.siteEvent > .info .stats {
    text-align: right;
    float: right;
}

.siteEvent .siteEventImage {
    width: 380px;
    margin-left: 60px;
    margin-bottom: 5px;
    float: left;
    box-shadow: 0 0 2px #888;
}

.siteEvent.training-planned,
.siteEvent.training-done {
    padding-top: 10px;
    margin-bottom: 0;
}

.siteEvent.training-done {
    background: #dbebd9;
    margin: 0px;
    padding-left: 10px;
}

.siteEvent.training-done + div {
    border-top-color: #fff;
}

.siteEvent .planned-training-icon {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    text-align: center;
    font-size: 28px;
    line-height: 48px;
    color: #fff;
    background: #d49705;
    border-radius: 50px;
}

.planned-training-icon.type-0 {
    background: #2a8f2e;
}

.planned-training-icon.type-1 {
    background: #999999;
}

.planned-training-icon.type-2 {
    background: #aaaaaa;
}

.planned-training-icon.type-3 {
    background: #499fc1;
}

.planned-training-icon.type-4 {
    background: #499fc1;
}

.planned-training-icon.type-5 {
    background: #ad3279;
}

.planned-training-icon.type-6 {
    background: #ad3279;
}

.planned-training-icon.type-7 {
    background: #ad3279;
}

.planned-training-icon.type-8 {
    background: #3dbcac;
}

.planned-training-icon.type-9 {
    background: #f9b206;
}

.planned-training-icon.type-10 {
    background: #e73f11;
}

.planned-training-icon.type-11 {
    background: #f9b206;
}

.planned-training-icon.type-12 {
    background: #b07530;
}

.planned-training-icon.type-13 {
    background: #fff600;
}

.planned-training-icon.type-14 {
    background: #444444;
}

.planned-training-icon.type-15 {
    background: #bb0000;
}

.planned-training-icon.type-16 {
    background: #d5dcaf;
}

.siteEvent .planned-dist {
    color: #999;
}

.siteEvent.training-done .planned-dist {
    color: #666;
}

.siteEvent_Article .siteEventImage,
.siteEvent_BlogPost .siteEventImage,
.siteEvent_Status .siteEventImage,
.siteEvent_Workout .siteEventImage {
    margin-top: 8px;
    max-height: 380px;
    overflow-y: hidden;
    border: 5px solid #fff;
}

.siteEvent .siteEventImage img {
    width: 380px;
}

.resp_part_half .siteEvent .title input[type=text], .siteEvent .title {
    font-weight: 700;
    font-size: 14px;
    color: #111;
    float: left;
    margin: 7px 0 0 60px;
    width: 370px;
    position: relative;
}

    .siteEvent .title a {
        font-weight: 700;
    }
    .resp_part_half .siteEvent .title input[type=text] {
    padding: 5px;
    margin: 7px 0 0;
    width: 390px;
}

.transpirationFlow .siteEvent .title {
    padding-left: 0;
    width: 388px;
    margin-top: 0;
}

.siteEvent_Status .title{
    font-weight: 400;
}

.personalFlow .siteEvent .title:before {
    display: inline-block;
    width: 16px;
    padding-right: 5px;
    font-family: "Font Awesome 5 Pro";
    color: #999;
    text-align: center;
}

.siteEvent_Article .title:before {
    content: "\f15c";
    font-weight: 400;
    font-size: 110%;
}

.siteEvent_ForumPost .title:before {
    content: "\f319";
    font-weight: 400;
    font-size: 110%;
}

.siteEvent_BlogPost .title:before {
    content: "\f09e";
}

.siteEvent_Workout .title:before {
    content: "\f5f8";
}

.siteEvent_Status .title:before{
    content: "\f05a";
}

.personalFlow .siteEvent .comments .userComment .cImg, .personalFlow .siteEvent .comments .userComment .cPost span, .personalFlow .siteEvent .title, .personalFlow .siteEvent p, .personalFlow .siteEvent_Article .siteEventImage, .personalFlow .siteEvent_BlogPost .siteEventImage, .personalFlow .siteEvent_Status .img, .personalFlow .siteEvent_Status .name, .personalFlow .siteEvent_Status .siteEventImage, .personalFlow .siteEvent_Workout .img, .personalFlow .siteEvent_Workout .name, .personalFlow .siteEvent_Workout .siteEventImage {
    cursor: pointer;
}

.siteEvent .title img {
    width: 100%;
    margin-bottom: 10px;
}

.resp_part_half .siteEvent textarea, .siteEvent p {
    font-size: 12px;
    color: #444;
    float: left;
    width: 390px;
    margin: 5px 0 5px 60px;
}

.workoutFriends {
    float: left;
    width: 390px;
    padding: 5px 0 8px 60px;
}

.workoutFriends .friend {
    float: left;
    padding: 0 10px 0 0;
}

.workoutFriends .friend:nth-of-type(8) {
    margin-right: 0;
}

.siteEvent .socialSmall {
    float: left;
    margin: 3px 0 6px 60px;
}

.siteEvent .comments {
    font-size: 11px;
    color: #888;
    float: left;
    margin: 0 0 4px 60px;
    width: 390px;
    font-family: Helvetica, serif;
}

.siteEvent .comments > div {
    background: #f2f2f2;
    border-top: 1px solid #ddd;
}

.siteEvent .comments > div:first-child {
    border: 0;
}

.siteEvent .comments .info {
    position: relative;
    float: left;
    padding: 5px 0 5px 24px;
    width: 366px;
}

.siteEvent .comments .info:before {
    content: " ";
    background: url(../img/icons.png) -32px -16px;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 5px;
    top: 3px;
}

.siteEvent .comments .userComment {
    float: left;
    position: relative;
    width: 390px;
    padding: 4px 0;
}

.siteEvent .comments .cImg {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 4px;
    left: 4px;
}

.siteEvent .comments .cPost, .siteEvent .comments .cTime {
    margin-left: 40px;
    width: 340px;
    float: left;
}

.siteEvent .comments .cPost span {
    color: #222;
}

.siteEvent .comments .cTime {
    font-size: 11px;
    padding-top: 2px;
}

.siteEvent .comments .cInput {
    float: left;
    position: relative;
    background: 0 0;
    width: 390px;
    border: 0;
    height: 32px;
}

.siteEvent .comments input {
    margin: 7px 0 0 40px;
    width: 340px;
}

.discardUploadedImageButton, .siteEvent div.deleteButton {
    position: absolute;
    cursor: pointer;
    z-index: 100;
}

.discardUploadedImageButton {
    top: 2px;
    right: 4px;
}

.siteEvent div.deleteButton {
    height: 15px;
    width: 15px;
    top: 6px;
    right: 0;
    background: url(/Images/ui-icons_888888_256x240.png) -32px -192px no-repeat;
}

.siteEvent div.deleteButton:hover {
    background: url(/Images/ui-icons_222222_256x240.png) -32px -192px no-repeat;
}

#uploadedImage {
    margin: 0 25px;
}

.siteEvent .showOlderComments {
    cursor: pointer;
    color: #444;
}

.post .title, .searchResult .title {
    width: 360px;
    position: relative;
}

.post .time, .post .title, .searchResult .title {
    float: left;
    font-size: 14px;
}



.post .time, .post .title a {
    font-weight: 400;
    color: #222;
}

.post.olast .time, .post.olast .title a {
    font-weight: 700;
    color: #111;
}

.post .title {
    padding-left: 16px;
}

.post .title:before {
    content: " ";
    background: #ddd;
    position: absolute;
    width: 7px;
    height: 7px;
    left: 1px;
    top: 7px;
    border-radius: 50%;
}

.post.olast.svettigPost .title:before {
    background: #f9b206;
}

.post.olast.joggPost .title:before {
    background: #31a836;
}

.post.olast.cyklaPost .title:before {
    background: #cb3b8e;
}

.post.olast.skidPost .title:before {
    background: #499fc1;
}

.post.olast.triPost .title:before {
    background: #e73f11;
}

.post .time {
    width: 90px;
    text-align: right;
}

.post .postInfo, .post .poster, .searchResult .leftInfoBox, .searchResult .rightInfoBox {
    font-family: Helvetica, sans-serif;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    width: 340px;
    float: left;
    margin-top: 5px;
    margin-left: 17px;
}

.post .postInfo span, .post .poster span, .searchResult .leftInfoBox span, .searchResult .rightInfoBox span {
    color: #999;
}

.post .poster, .searchResult .rightInfoBox {
    width: 340px;
    text-align: left;
}

.searchResult p a {
    font-size: 12px;
    float: left;
    width: 100%;
    color: #444;
    font-weight: 400;
}

#MainContent_MainImage {
    width: 680px;
    border: 10px solid #fff;
    box-shadow: 0 0 2px #aaa;
}

#MainContent_EditArticleButtonsPanel {
    margin-bottom: 20px;
    text-align: right;
}

.article {
    padding-top: 20px;
}

.article h2 {
    margin-left: 20px;
}

.article .box h2 {
    margin-left: -10px;
}

.artikel {
    margin: 0 20px;
}

.artikel p.caption {
    font-size: 11px;
    color: #111;
    padding: 0;
    margin: 4px 0;
}

.artikeltext, .artikeltext ol {
    margin: 10px 0;
}

.artikel p.caption span {
    float: left;
}

.artikel p.caption span.fotoByline {
    float: right;
}

.artikel .social {
    padding: 10px 0;
    width: 100%;
}

.artikeltext {
    float: left;
    width: 100%;
}

.artikel .artikeltext .vinjett, .mceContentBody .vinjett {
    display: inline-block;
    margin-right: 0.5em;
    padding: .35em .35em .175em;
    background-color: #999;
    color: #fff;
    border-radius: 3px;
    font-family: Helvetica, sans-serif;
    font-size: .625rem;
    line-height: 1;
    text-transform: uppercase;
}

.artikeltext ol li {
    list-style-position: inside;
    margin: 5px 0 5px 15px;
}

.artikeltext ul {
    margin: 10px 0;
}

.artikeltext ul li {
    list-style-type: disc;
    list-style-position: inside;
    margin: 5px 0 5px 15px;
}

.artikel .social {
    border-top: 2px solid #addcaf;
}

ul.thumbs {
    margin: 20px 0 10px;
    padding: 0;
}

ul.thumbs li {
float: left;
margin: 0 20px 20px 0;
list-style: none;
}

ul.thumbs li a {
float: left;
background: #fff;
padding: 6px;
width: 68px;
height: 68px;
margin: 0;
border: 1px solid #ddd;
}

ul.thumbs li a:hover {
    background: #fff;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px #999;
}

.artikel .byline {
    float: left;
    width: 100%;
    margin: 10px 0;
    padding-bottom: 10px;
}

.artikel .byline .img {
    float: left;
}

.artikel .byline .img img {
    border-radius: 25px;
}

.artikel .author {
    float: left;
    margin: 15px 10px;
}

.artikel .author a {
    font-size: 12px;
    color: #000;
    font-weight: 700;
}

.artikel .author .smaller {
    color: #888;
    font-weight: 400;
    padding-left: 4px;
}

.articleImageLeft {
    float: left;
    margin: 0 10px 0 0;
}

.articleImageRight {
    float: right;
    margin: 0 0 0 10px;
}

.articleImageFull {
    width: 100%;
    text-align: center;
}

.archiveItem {
    float: left;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    min-height: 70px;
    position: relative;
}

.archiveItem .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 70px;
}

.comment, .forumHeader, ul.toolbox {
    position: relative;
}

.archiveItem h1 {
    float: left;
    font-size: 22px;
    margin: 0 0 0 120px;
    width: 500px;
}

.archiveItem h1 a {
    font-size: 22px;
    color: #111;
    font-weight: 400;
}

.archiveItem .info, .archiveItem p {
    font-size: 12px;
    color: #555;
    float: left;
}

.archiveItem .social {
    float: left;
    margin: 8px 0 5px 40px;
}

.archiveItem p {
    margin: 5px 0 0 120px;
    width: 500px;
}

.archiveItem .info {
    margin: 5px 0 0 40px;
    width: 280px;
}

.threadInfo, .threadInfo a {
    color: #666;
    font-size: 11px;
    font-family: Helvetica, sans-serif;
}

.forum {
    margin-top: 20px;
}

.forumWithoutPager {
    margin-bottom: 40px;
}

.forum .rightColumn {
    margin-top: 10px;
}

.forum .messageWarning, .forum div h3 {
    padding-left: 20px;
}

.threadInfo {
    margin-left: 20px;
    text-transform: uppercase;
}

.threadInfo > div {
    float: left;
}

.threadInfo a:hover {
    color: #444;
}

.threadInfo > div > span {
    padding: 0 5px;
}

ul.toolbox {
    font-size: 11px;
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #999;
    overflow: visible;
    display: inline;
    float: left;
    top: -4px;
    left: 4px;
}

ul.toolbox:hover {
    border: 1px solid #999;
    color: #333;
    background: #fff;
    box-shadow: 0 0 2px #888;
}

ul.toolbox li {
    float: left;
    padding: 2px;
    height: 16px;
    border-left: 1px solid #ddd;
}

ul.toolbox:hover li {
    border-left: 1px solid #ccc;
}

ul.toolbox li:first-child {
    border: none;
}

.toolbox li span {
    padding: 0 5px !important;
    float: left;
    height: 16px;
}

.toolbox a {
    color: #999;
    line-height: 1;
}

.toolbox:hover a {
    color: #070;
}

    .toolbox:hover a:hover {
        color: #d54e21;
    }

.forumtrad.toolbox a.sort {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url(../img/icons.png) no-repeat;
}

.forumtrad.toolbox a.sortDesc {
    background-position: -262px -20px;
}

    .forumtrad.toolbox a.sortDesc:hover {
        background-position: -282px -20px;
    }

.forumtrad.toolbox a.sortAsc {
    background-position: -262px -3px;
}

    .forumtrad.toolbox a.sortAsc:hover {
        background-position: -282px -3px;
    }

ul.toolbox li a.icon {
    background: url(/Style/img/icons_vrtcl.png) no-repeat;
    text-indent: -9999px;
}

    ul.toolbox li a.icon:hover {
        display: block;
        text-indent: 20px;
        width: 100%;
    }

ul.toolbox li a.prenumerera {
    display: block;
    background-position: 0 -600px;
    padding-top: 3px;
}

ul.toolbox li a.prenumerera:hover {
    background-position: 0 -700px;
    padding-right: 5px;
}

ul.toolbox li a.remove, ul.toolbox:hover li a.remove {
    background-position: 0 -300px;
}

ul.toolbox li a.remove {
    text-indent: -9999px;
    display: block;
    padding-top: 3px;
}

ul.toolbox li a.remove:hover {
    display: block;
    text-indent: 20px;
    width: 100%;
    background-position: 0 -400px;
    padding-right: 5px;
}

.forum h1 {
    margin-left: 20px;
}

.comment {
    float: left;
    padding: 15px 10px;
    margin: 0 10px;
    transition: background-color .5s;
    background-color: #f3f3f3;
}

.comment.unreadforumpost {
    background-color: #fff;
}

.comment.deletedForumPost {
    background-color: #eee;
    padding-bottom: 0;
}

.comment.deletedForumPost .reply .replyIndex {
    top: -4px;
}

.comment.deletedForumPost .reply .text {
    min-height: 32px;
}

.comment.selected {
    padding: 14px 9px;
    background: #fff8e1;
    border: 1px solid #f1c168;
}

.athlete, .comment .commenter {
    float: left;
    width: 100px;
    text-align: center;
    margin: 0 0 10px;
}

.athlete .img, .comment .commenter .img {
    width: 100px;
    position: relative;
}

.athlete .img .star, .comment .commenter .img .star, .siteEvent .img .star {
background: url(../img/starV4_40.png) no-repeat;
width: 40px;
height: 40px;
position: absolute;
}

.athlete .img img, .comment .commenter .img img {
border-radius: 25px;
}

.athlete .img .star, .comment .commenter .img .star {
top: -14px;
left: 57px;
}

.comment.firstEntry .commenter .img .star {
    left: 68px;
}

.siteEvent .img .star {
    transform: translate(-20px, -15px) scale(.5);
}

.athlete .user, .comment .commenter .user {
    width: 100px;
    color: #111;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 0 2px;
}

.athlete .userData, .comment .commenter .userData {
    width: 100px;
    color: #666;
    font-size: 11px;
    font-family: Helvetica, sans-serif;
}

.athlete .userData .adminUser::before, .comment .commenter .userData .adminUser::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url(/img/joggWheel_80.png);
    background-size: cover;
    margin-right: .25em;
    transform: translateY(1px);
}

.comment .reply {
    width: 560px;
    border-top: 2px solid #ccc;
    margin: 0 0 0 120px;
    position: relative;
}

.comment.unreadforumpost .reply {
    border-top-color: #33a737;
}

.comment .reply .inReplyTo {
    position: absolute;
    top: -9px;
    right: 115px;
    background: #fff;
    padding: 0 8px;
    color: #999;
    font-size: 12px;
    border-radius: 10px;
    height: 16px;
}

.comment .reply .inReplyTo a {
    color: #999;
}

.comment .reply .inReplyTo a:hover {
    color: #666;
}

.comment .reply .time {
    position: relative;
    float: left;
    top: -9px;
    left: 10px;
    background: #fff;
    font-weight: 600;
    color: #888;
    font-size: 12px;
    padding: 0 8px;
    margin: 0 0 -20px;
    white-space: nowrap;
    border-radius: 10px;
}

.comment .reply .text {
    padding-right: 100px;
    margin-top: 14px;
    line-height: 1.4;
    min-height: 40px;
}

.comment .reply .itemImage img {
    box-shadow: 0 0 2px #888;
    padding: 10px;
    margin-top: 14px;
    max-width: 440px;
}

.comment .reply .actions {
    position: absolute;
    top: -9px;
    right: 10px;
    height: 16px;
    text-align: right;
}

.comment .reply .actions > div {
    position: relative;
    float: right;
    background: #fff;
    padding: 0 12px;
    white-space: nowrap;
    border-radius: 10px;
    height: 16px;
}

.comment .reply .actions div > a {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin: 0 3px;
}

.comment .reply .actions .sLike {
    padding: 0 4px;
}

.comment .reply .actions .sLike .LikesCount {
    color: #aaa;
    font-size: 12px;
}

.comment .reply .actions .sLike .LikesText {
    display: none;
}

.comment .reply .actions .edit:before {
    content: "\f040";
    font-weight: 800;
    color: #bbb;
    top: -1px;
}

.comment .reply .actions .edit:hover {
    background-position: -242px -2px;
}

.comment .reply .actions div a.sReply {
    background: none;
    color: #ccc;
    float: left;
    margin: -1px 13px 0 0;
    border-radius: 100px;
    transition: all .2s;
}

.comment .reply .actions div a.sReply:hover {
    color: #666;
    background: #eee;
    box-shadow: 0 0 0 10px rgba(231, 231, 231, 0.7);
}

.comment .reply .replyIndex {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 100px;
    height: 40px;
    font-size: 36px;
    text-align: right;
    color: #e0e0e0;
    font-style: italic;
    z-index: 1;
}

.comment .reply .replyIndex a {
    color: #ddd;
    font-weight: 400;
}
.comment .reply .replyIndex a:hover {
    color: #999;
}

.response {
    border-top: 2px solid #bbb;
    margin: 0 20px 20px;
}

.response h2 {
    margin-left: 0;
}

.response .comment {
    margin: 0 0 10px;
}

.comment .writeReply {
    width: 560px;
    margin: 0 0 0 120px;
}

.comment .writeReply .replyingTo {
    background: #999;
    width: 460px;
    padding: 5px 0;
    color: #fff;
    margin-bottom: -2px;
    text-align: center;
    border-radius: 4px 4px 0 0;
    font-weight: 600;
}

.comment .writeReply .replyingTo .close-reply {
    margin-right: 7px;
    font-size: 16px;
    line-height: 18px;
    transition: all .2s;
    cursor: pointer;
}

.comment .writeReply .textbox {
    float: left;
    width: 460px;
}

.comment .writeReply .imageUpload {
    float: left;
    clear: both;
    width: 460px;
    margin-top: 10px;
}

.comment .writeReply .textbox textarea {
    width: 448px;
    margin: 0;
}

.comment .writeReply .info {
    float: left;
    width: 460px;
    margin-top: 20px;
}

.comment .writeReply .info a {
    display: block;
    margin: 10px 0;
    text-decoration: underline;
}

.forumReplyError {
    padding-top: 10px;
    color: Red;
}

.svarainlagg {
    background: #eee;
    margin: 10px 0 20px 20px;
    padding: 10px;
}

.comment.firstEntry {
    padding: 20px 0;
}

.comment.firstEntry .commenter {
    margin-left: 20px;
}

.comment.firstEntry .commenter .img img {
    border-radius: 50px;
    height: 100px;
    width: 100px;
}

.comment.firstEntry .reply {
    border-top: 2px solid #bbb;
    margin: 0 20px 0 140px;
    width: 820px;
}

.comment.firstEntry .reply .actions .flag {
    color: #666;
}

.comment.firstEntry .reply .actions .edit, .comment.firstEntry .reply .actions .edit:hover {
    background-position: -242px -2px;
}

.comment.firstEntry .reply .text {
    padding-right: 140px;
    color: #000;
}

.comment.firstEntry .reply .replyIndex {
    font-size: 72px;
    color: #ccc;
}

.comment.unreadforumpost .reply .text {
    position: relative;
}

.comment.firstEntry .reply .itemImage img {
    background: #fff;
}

.comment.unreadforumpost .reply .replyIndex {
    color: #ccc;
    z-index: 100;
}

 .comment.firstEntry,  .comment.firstEntry .reply .actions > div,  .comment.firstEntry .reply .time {
    background: #e6f4e7;
}

.related {
    margin: 0 0 30px;
    float: left;
    width: 100%;
    padding-top:10px;
    border-top: 2px solid #33a737;
}

.related p {
    font-size: 12px;
    color: #111;
    padding: 0 10px;
}

.related ul {
    margin: 0;
    padding: 0;
}

.related ul li {
    margin: 0 0 6px;
    font-size: 11px;
    color: #666;
    line-height: 1.3;
}

.related ul li a {
    display: inline-block;
    font-size: 12px;
    color: #000;
    font-weight: 600;
    line-height: 1.3;
}


.related .header {
    display: block;
    font-size: 14px;   
    font-weight: 700;
    text-transform: uppercase;
    margin: 3px 0 8px;
}

#CompetitionHeaderImage {
    margin-bottom: -10px;
}

.background--light {
    color: #000;
    text-shadow: 1px 1px 1px #fff;
}

.background--dark {
    color: #fff;
    text-shadow: 1px 1px 1px #000;
}

.blog {
    margin: 0 20px;
}

.blog h1 {
    margin-top: 0;
}

.blog .social {
    padding: 10px 0;
    width: 100%;
}

.blogheaderimage {
    width: 100%;
    margin-top: -23px;
    margin-bottom: 10px;
    float: left;
    position: relative;
    min-height: 65px;
}

.blogheaderimage img {
    width: 100%;
}

.blogheaderimage span {
    position: absolute;
    top: 12px;
    left: 20px;
    width: 800px;
    height: 50px;
    font-family: aleoregular, serif;
    font-size: 36px;
    cursor: pointer;
}

.blog .artikeltext {
    margin-bottom: 30px;
}

.blackHeader, .blogheaderimage span.blackHeader {
    color: #000;
    text-shadow: 1px 1px 1px #FFF
}

.blogheaderimage span.whiteHeader, .whiteHeader {
    color: #FFF;
    text-shadow: 1px 1px 1px #000;
}

.related.bloggWriter {
    text-align: center;
    border: 0;
}

.related.bloggWriter img {
    border-radius: 50px;
    width: 100px;
    height: 100px;
    margin: 10px 0;
}

.related.bloggWriter .writer {
    font-weight: 600;
    color: #111;
    margin: 0 0 2px;
    display: block;
}

.related.bloggWriter .writerInfo {
    font-size: 11px;
    font-family: Helvetica, sans-serif;
    color: #888;
    margin-bottom: 20px;
}

.related.bloggWriter .grayBtn {
    margin: 3px 0;
}

.related.bloggWriter ul li {
    margin-top: 20px;
}

.joggSite .blog .social {
    border-top: 2px solid #addcaf;
}

.blog input[type=text], .blog table {
    width: 648px;
}

.memberSearch {
    position: absolute;
    top: 20px;
    right: 0;
    width: 200px;
    height: 30px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    text-align: right;
}

.memberSearch #memberSearch {
    width: 60px;
    padding: 2px 4px;
}

.OnMapInfo{
    line-height: 28px;
}

#StickyButton, #positionButton {
    text-align: center;
    width: 980px;
    opacity: .9;
    z-index: 100;
}


input.adminEditableHeader {
    border: 1px solid #fff;
    font-family: aleoregular;
    font-size: 28px;
    width: 400px;
}

input.adminEditableHeader:hover {
    border: 1px solid #eee;
}

input.isEditing, input.isEditing:hover {
    border: 1px solid #444 !important;
}

.compfilter span {
    float: left;
    padding-left: 10px;
}

.compfilter span:first-child {
    padding-left: 0;
}

.compfilter span.checkBoxBefore {
    padding-left: 0;
}

.compfilter span.checkBoxBefore label {
    margin-left: 1px;
}

.pagesnav {
    text-align: center;
    margin: 30px 0;
}

.userPostsForm .pagesnav {
    transform: translateX(-70px);
}

.pagesnav .pages {
    display: inline-block;
    margin: 0 10px;
}

.pagesnav a {
    display: inline-block;
    padding: 2px 6px;
    margin: 0 2px;
    position: relative;
    font-size: 12px;
    text-decoration: none;
    color: #222;
    font-family: Helvetica, sans-serif;
    border-radius: 2px;
    box-shadow: 0 0 1px #eee;
    border: 1px solid #ddd;
    background: #f8f8f8;
}

.pagesnav a:hover {
    box-shadow: 0 0 1px #ddd;
    background: #eee;
}

.pagesnav a.chosen, .pagesnav a.chosen:hover {
    border: 1px solid #d6d6d6;
    background: #e0e0e0;
    box-shadow: none;
    cursor: default;
}

.profile {
    margin: 10px 0 30px;
}

.profile .leftSide {
    float: left;
    width: 200px;
    margin: 0 20px 0 0;
    position: relative;
    text-align: center;
}

.profile .leftSide .profileImg {
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.profile .leftSide .profileImg img {
    min-height: 200px;
    min-width: 200px;
}

.profile .leftSide .profileStar {
    position: absolute;
    top: -17px;
    right: -15px;
    width: 80px;
    height: 80px;
}

#measureMap{
    right: 0;
    top: 0;
}

.profile .leftSide .grayBtn {
    margin: 10px 30px 0;
}

.profile .rightSide {
    float: left;
    width: 720px;
}

.profile .rightSide #profileInfo {
    overflow: hidden;
}

.profile .rightSide h1 {
    margin: 0 0 15px;
    float: left;
}

.profile .rightSide .buttons {
    float: right;
    position: relative;
    top: 10px;
    margin-bottom: 15px;
}

.profile .rightSide .buttons .button {
    margin-left: 5px;
    box-sizing:border-box;
}

.profile .rightSide p {
    margin: 6px 0 4px;
    color: #333;
    float: left;
    width: 100%;
}

.profile .rightSide b {
    color: #000;
}

    .profile .rightSide .showMore {
        border-top: 1px solid #33a737;
        margin: 20px 0 0px;
        padding-top: 5px;
        display: none;
        cursor: pointer;
    }

.tooltip:hover span, td.traning ul li.help a:hover span {
    bottom: 16px;
    right: 16px;
    text-decoration: none;
}

.DayWrapper {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}

.DayWrapper .Events {
    width: 100%;
    position: relative;
}

.DayWrapper .Events .Event, .DayWrapper .Events .Event_New {
    border-bottom: 1px solid #EAEAEA;
    float: left;
    padding: 5px 0;
    width: 100%;
    position: relative;
}

.DayWrapper .Events .Event_New {
    background: #eee;
    border-bottom: 1px solid #fff;
}

.DayWrapper .Date {
    color: #666;
    position: absolute;
    width: 35px;
    height: 20px;
    top: 5px;
    left: 0;
}

.DayWrapper .Comment {
    margin-left: 50px;
}

.UserWrapper {
    float: left;
    margin-bottom: 10px;
    margin-top: 20px;
    padding-bottom: 5px;
    width: 100%;
}

.UserWrapper .UserLink {
    float: left;
    margin-bottom: 5px;
    width: 100%;
}

.UserWrapper .Message, .UserWrapper .MessageNew {
    border-bottom: 1px solid #EAEAEA;
    cursor: pointer;
    margin: 0 8px 5px;
    padding: 0 2px 5px;
    width: 98%;
    float: left;
}

.UserWrapper .MessageNew {
    background-color: #F4F4F4;
}

.UserWrapper .Message {
    background-color: #FFF
}

.UserWrapper .Date {
    float: left;
    margin: 3px 0 5px;
    font-size: 11px;
    color: #666;
    font-style: italic;
}

.UserWrapper .New {
    color: Red;
    float: right;
    margin: 3px 0 0;
    padding-right: 5px;
    text-align: right;
}

.UserWrapper .MessageWrapper {
    float: inherit;
    width: inherit;
}

.UserWrapper .MessageWrapper .MessageTitle {
    color: #111;
    font-weight: 700;
    display: block;
}

.UserWrapper .MessageWrapper .MessageText {
    color: #222;
}

.UserWrapper .UserLinks {
    float: right;
    margin-right: 10px;
    text-align: right;
    width: inherit;
}

.contact, .contact a {
    text-align: center;
}

.contacts {
    margin-top: 40px;
}

.contact {
    float: left;
    width: 200px;
    min-height: 340px;
    margin: 0 20px 0 25px;
}

.contact a .image {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-image: url(../Images/personal.jpg);
    margin-bottom: 10px;
}

.contact a .name {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}

.contact .title {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.contact .email a, .contact .phone {
    display: inline-block;
    font-size: 12px;
    color: #444;
    font-weight: 700;
    margin-bottom: 6px;
}

    .contact.personal_1 .image {
        background-position: 0 0;
    }

    .contact.personal_1:hover .image {
        background-position: 0 -200px;
    }

    .contact.personal_2 .image {
        background-position: -200px 0;
    }

    .contact.personal_2:hover .image {
        background-position: -200px -200px;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.countyAvatar, td.avatar {
    width: 50px;
}

table.std_tbl tr.importRow:hover,
table.std_tbl tr.similarRow:hover {
    background-color: #fafafa;
}

table.std_tbl td, table.std_tbl th {
    text-align: left;
}

table.std_tbl td.hogerkolumn,
table.std_tbl th.hogerkolumn {
    text-align: right;
    padding-right: 5px;
}


table.std_tbl th {
    border-bottom: 1px solid #aaa;
    padding: 0 8px 2px;
}

table.std_tbl td {
    border-bottom: 1px solid #ddd;
    padding: 5px 8px;
    font-size: 12px;
}

table.std_tbl tr.similarRow td:first-of-type {
    max-width: 250px;
    padding-left: 10px;
}

table.std_tbl td.import-merge {
    min-width: 240px;
}

table.std_tbl td.import-merge span {
    font-size: 10px;
}

table.std_tbl tr.noLine td {
    border-bottom: 0;
}

table.std_tbl p {
    margin: 0;
    padding: 0;
    color: #444;
}

table.std_tbl a {
    font-weight: 600;
}

    table.std_tbl a.readThread {
        font-weight: 400;
    }

table.std_tbl tr.odd, tr.odd {
    background: #fdfdfd;
}

table.std_tbl tr:hover, table.std_tbl tr.odd:hover {
    background: #fafafa;
}

table.std_tbl tfoot tr:hover {
    background: #fff;
}

table.workoutItemTable tr td {
    border-bottom: 0 none #fff;
    font-size: 12px;
}

table.std_tbl tr td.fler, table.std_tbl tr td.pagesnav, td.fler {
    border: none;
}

table.std_tbl tr td.pagesnav p {
    color: #777;
    font-size: 11px;
    text-align: center;
}

table.std_tbl tr td.pagesnav .pagesnav {
    margin: 25px 0 20px;
}

table.centered td {
    text-align: center;
}

.tdlista a {
    display: block;
}

.updateProgress a, td.fler a {
    padding-left: 13px;
}

.updateProgress a.visa_fler {
    background-position: 0 2px;
}

.updateProgress a.visa_fler:hover {
    background-position: 0 -98px;
    color: #555;
}

.updateProgress a.visa_fler_update {
    background: url(/Style/img/ajax_spinner_small.gif) 0 4px no-repeat;
}

table.std_tbl .equipmentInfo a {
    color: #333;
    font-size: 11px;
    font-weight: 400;
}

td.avatar {
    padding: 6px;
    vertical-align: top;
    box-sizing: content-box;
}

a.icon, td.icon a.remove {
    width: 16px;
    text-indent: -9999px;
}

td.icon a.remove {
    display: block;
    background-position: 0 0;
}

div.tdlista:hover a.remove, tr:hover td.icon a.remove {
    background-position: -16px 0;
}

div.tdlista:hover a.remove:hover, tr:hover td.icon a.remove:hover {
    background-position: -32px 0;
}

a.icon {
    background: url(/Style/img/icons.png) no-repeat;
    height: 16px;
}

a.redigera {
    background: url(/Style/img/edit.png) no-repeat;
    height: 17px;
    width: 22px;
}

.tinyheader {
    display: inline-block;
    float: right;
    margin-top: 4px;
}

.tinyheader a {
    display: inline-block;
    font-size: 12px;
}

.more-input-fields i {
    font-size: 16px;
    position: relative;
    top: 2px;
    left: 5px;
}

.borgimg {
    background: url(/Images/borskalan_bg.png) no-repeat;
    width: 210px;
    height: 21px;
    display: inline-block;
    font-size: 0;
}

#borgvalue {
    position: absolute;
    margin-left: 5px;
    font-size: 18px;
}

#borgdescr {
    padding-left: 135px;
    font-style: italic;
    line-height: 2;
}

.borg-delete {
    position: relative;
    top: 5px;
    left: 42px;
    cursor: pointer;
}

.calendarItem .borgimg {
    visibility: hidden;
    position: relative;
    left: 5%;
    height: 5px;
    width: 90%;
    margin-bottom: 2px;
    background-size: cover;
}

.borg-active .calendarItem .borgimg {
    visibility: visible;
}

.calendarItem .borg-gauge {
    position: absolute;
    right: 0;
    display: block;
    height: 5px;
    background: rgba(255,255,255,0.9);
}

.journal .calendarItem > a .borg-value {
    font-size: 9px;
    position: absolute;
    top: -4px;
    left: auto;
    padding: 2px 3px 1px;
    background: #fff;
    line-height: 0.9;
    border: 1px solid #999;
    border-radius: 3px;
    color: #666;
}

/* Träningsprogram */

.program-adder {
    margin-top: 15px;
    border: 1px solid #aaa;
    padding: 10px 10px 15px 15px;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
    left: -53px;
    left: calc(50% - 173px);
    position: absolute;
    background: #fff;
    min-width: 330px;
}

.program-adder .checkBoxBefore {
    line-height: 25px;
}

.program-adder .checkBoxBefore label {
    font-weight: 400;
    display: inline-block;
    margin-right: 0;
}

.program-adder .up-arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 0 solid #aaa;
    border-width: 1px 0 0 1px;
    transform: rotate(45deg);
    position: absolute;
    top: -10px;
    left: 155px;
    left: calc(50% - 12px);
    background: #fff;
}

.program-adder .separate-wo-info,
.program-adder .info-star {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 5px 10px 7px;
    max-width: 190px;
    bottom: 75px;
    left: 30px;
    border-radius: 10px 10px 10px 0;
    box-shadow: 0 2px 5px #888;
}

.program-adder .info-star {
    bottom: 100px
}

.program-adder .info-star.smaller a {
    display:block;
    color: #fff;
    font-weight: 400;
}

.program-adder .info-hover {
    display: inline-block;
    position: relative;
    top: 2px;
    margin-left: 3px;
    cursor: pointer;
    color: #777;
    font-size: 16px;
}

.program-adder .star {
    margin-left: 5px;
}  

input#addToCalendar:not(:checked) ~ label:last-of-type {
    color: #999;
    pointer-events: none;
}

input#addToCalendar:not(:checked) ~ label:last-of-type::before {
    color: #aaa;
    content: "\f146";
}

div.traning {
    margin-top: 20px;
    position: relative;
}

div.traning .description {
    float: left;
    width: 700px;
}

div.traning .shareProgram {
    float: right;
    font-size: 11px;
    background-color: #f8f8f8;
    padding: 4px 8px 4px 5px;
    margin: 0 40px 0 0;
    border: 1px solid #eee;
}

div.traning .adaptProgram {
    width: 100%;
    padding: 5px 5px 0 0;
    border-bottom: 0 none #fff;
}

div.traning .adaptProgram li {
    width: 100%;
}

div.traning .adaptProgram li span {
    float: left;
    margin-left: 15px;
}

div.traning .adaptProgram li select {
    width: 270px;
}

table.traningsprogram {
    float: left;
    margin-bottom: 20px;
}

table.traningsprogram td {
    border-bottom: medium none;
    border-top: 1px solid #E0E0E0;
    padding: 6px;
    vertical-align: top;
}

table.traningsprogram th {
    color: #000;
    padding: 40px 6px 10px;
    text-align: left;
}

table.traningsprogram td.notop {
    border-top: medium none;
}

table.traningsprogram tr.dayRow td {
    white-space: nowrap;
}

table.traningsprogram td.dag, table.traningsprogram td.distans {
    width: 100px;
    white-space: nowrap;
}

table.traningsprogram td.distans, table.traningsprogram th.distans {
    text-align: right;
}

table.traningsprogram td.traning ul {
    float: left;
    font-size: 12px;
    list-style-type: disc;
    padding: 5px 0;
    vertical-align: middle;
    width: 700px;
}

table.traningsprogram td.traning ul li {
    font-size: 12px;
    padding: 5px 0;
}

table.traningsprogram td.traning ul li.traningspost {
    float: left;
    list-style-type: disc;
    margin-left: 20px;
    width: 650px;
}

table.traningsprogram td.traning ul li.help {
    float: right;
    height: 16px;
    list-style-type: none;
    width: 20px;
}

td.traning ul li.help a {
    background: url(img/icons.png) -160px 0 no-repeat;
    cursor: help;
    float: left;
    height: 16px;
    margin: 0 5px;
    position: relative;
    text-indent: -9999px;
    width: 16px;
}

td.traning ul li.help a:hover {
    background-position: -176px 0;
}

td.traning ul li.help a span {
    display: none;
}

td.traning ul li.help a:hover span b {
    display: block;
    margin-bottom: 5px;
}

td.traning ul li.help a:hover span {
    background-color: #333;
    border-radius: 11px 11px 0;
    box-shadow: 0 2px 5px #888;
    color: #FFF;
    cursor: help;
    display: block;
    font: 11px/16px Helvetica, Verdana, sans-serif;
    padding: 10px;
    position: absolute;
    text-indent: 0;
    width: 350px;
    z-index: 999;
}

.runningCalculator ol {
    list-style: none;
}

.runningCalculator li {
    width: 150px;
    border: none;
    float: left;
    list-style-position: outside;
}

.runningCalculator label {
    width: 130px;
    color: #000;
    float: left;
    margin: 0 5px 0 10px;
    position: relative;
    font-size: 12px;
}

.runningCalculator table {
    margin: 15px 0;
    float: left;
}

.runningCalculator #DistanceTextBox, .runningCalculator #TimeTextBox {
    width: 70px;
}

.runningCalculator .ErrorMsg {
    float: left;
    margin: 10px;
    color: #600;
}

.runningCalculatorLink {
    display: inline-block;
    margin-left: 9px;
    padding-left: 34px;
    min-height: 18px;
    background: url(/Images/calculator_18.jpg) no-repeat;
}

.starmemberfunc {
    padding: 10px 0px 0px 45px;
    margin-bottom: 10px;
    min-height: 42px;
    background: transparent url(/img/starv4_40.png) no-repeat scroll 0px 12px;
}

.speedChartDiv .box {
    padding-left: 0;
    margin-left: 0 !important;
}

a.tooltip {
    position: relative;
    float: right;
    margin: 2px 5px;
    width: 16px;
    height: 16px;
    text-indent: -9999px;
    background: url(/Style/img/icons.png) -144px 0 no-repeat;
    cursor: help;
}

fieldset:hover a.tooltip {
    background-position: -160px 0;
}

fieldset:hover a.tooltip:hover, fieldset:hover li:hover a.tooltip {
    background-position: -176px 0;
}

.tooltip span {
    display: none;
}

.tooltip:hover span {
    text-indent: 0;
    display: block;
    position: absolute;
    background-color: #046bbb;
    color: #fff;
    border: 5px solid #fff;
    padding: 10px;
    width: 250px;
    font: 400 11px/16px Helvetica, sans-serif;
    z-index: 999;
    cursor: help;
    border-radius: 11px 11px 0;
    box-sizing: content-box;
    box-shadow: 0 2px 5px #888;
}

#footer {
    position: absolute;
    width: 100%;
    height: 120px;
    bottom: 0;
    left: 0;
    background: url(../img/footerBg.png) repeat-x;
    border-bottom: 2px solid #888;
    font-size: 14px;
    color: #888;
}

.ir, .visuallyhidden {
    border: 0;
    overflow: hidden;
}

#footerInner {
    width: 1244px;
    margin: 0 auto;
    position: relative;
    padding: 30px 0 0;
}

#footer > div > div {
    font-weight: 600;
    float: left;
    margin-bottom: 20px;
}

#footer > div > div:first-of-type {
    width: 260px;
}

#footer > div > div:last-of-type {
    width: 720px;
    text-align: right;
}

#footer a {
    color: #888;
    text-decoration: none;
}

#footer span {
    margin: 0 10px;
}

#footer > div > div > div {
    font-size: 12px;
    color: #aaa;
}

#footer > div > div > div:first-child {
    margin-top: 6px;
}

.ir {
    background-color: transparent;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    clip-path: circle(0);
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px;
}

#map, #measureMap {
    border: 1px solid #AAA
}

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

#mapPanel, #progressWrapper, #statusBox {
    position: relative;
}

.invisible {
    visibility: hidden;
}

.clearfix:after, .clearfix:before {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

abbr[title] {
    cursor: help;
}

@media print {
    blockquote, img, pre, tr {
        page-break-inside: avoid;
    }

    * {
        background: 0 0 !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a, a:visited {
        text-decoration: underline;
    }

        a[href]:after {
            content: " (" attr(href) ")"
        }

    abbr[title]:after {
        content: " (" attr(title) ")"
    }

    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: ""
    }

    blockquote, pre {
        border: 1px solid #999;
    }

    thead {
        display: table-header-group;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: .5cm;
    }

    h2, h3, p {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}


#progressBar {
    height: 14px;
    width: 429px;
    text-align: left;
    background-color: #FFF;
    margin: 0 5px 0 10px;
}

.imageUploadControlWithProgressToTheLeft + #imageUploadProgressControl #progressBar {
    width: 200px;
}

#progressBarDisplay {
    position: absolute;
    top: 0;
    width: 430px;
    height: 14px;
    margin: 0;
    text-align: left;
    background-color: #6db75c;
}

#progressWrapper {
    margin: 0;
}

#map {
    width: 940px;
    height: 340px;
    margin: 8px 0;
}

#mapPanel.fullscreenMapPanel, #mapPanel.fullscreenMapPanel.mapPanelWithAltitudes {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 100;
}

#measureMap {
    bottom: 0;
    left: 0;
    height: 500px;
    overflow: hidden;
    background-color: #e5e3df;
}

#mapPanel.fullscreenMapPanel #measureMap {
    z-index: 10000;
    height: 100%;
}

#mapPanel.fullscreenMapPanel #measureMapControlPanel {
    z-index: 10001;
}

#measureMapControlPanel {
    position: absolute;
    top: 10px;
    right: 8px;
    width: 130px;
    padding: 10px;
    background-color: rgba(255,255,255, .7);
    border: 1px solid #AAA;
    border-radius: 6px;
}

    #measureMapControlPanel input[type=button] {
        width: 100%;
        margin-top: 5px;
    }

    #measureMapControlPanel input[type=checkbox] {
        visibility: hidden;
    }

    #measureMapControlPanel .checkBoxButton {
        border: 1px solid #999;
        color: #FFF;
        background: #999;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 700;
        margin-top: 5px;
        cursor: pointer;
        padding: 1px 0 3px 22px;
        position: relative;
    }

        #measureMapControlPanel .checkBoxButton div {
            position: absolute;
            width: 12px;
            height: 12px;
            border: 1px solid #666;
            background: #FFF;
            top: 3px;
            left: 3px;
        }

        #measureMapControlPanel .checkBoxButton.checkBoxSelected {
            background: #1E8438;
        }

            #measureMapControlPanel .checkBoxButton.checkBoxSelected div {
                border: 1px solid #FFF;
                background: url(/Images/check.png) no-repeat #FFF
            }

    #measureMapControlPanel .spacedButton {
        margin-bottom: 10px;
    }

    #measureMapControlPanel #editRouteText {
        font-size: 10px;
        margin: 5px 0;
        display: none;
    }

#altitudeChart, #gpsAltitudeChartWide {
    display: none;
    position: relative;
    bottom: 0;
    left: 0;
    height: 200px;
    width: 940px;
}

#gpsAltitudeChart, #stravaAltitudeChart {
    display: none;
    position: relative;
    bottom: 0;
    left: 0;
    height: 200px;
    width: 430px;
}

#mapPanel.fullscreenMapPanel #altitudeChart {
    z-index: 10001;
    bottom: 10px;
}

#measureMapInfo {
    border: solid #000;
    border-width: 1px;
    padding: 10px;
    margin-top: 10px;
}

#distancePanel {
    font-weight: 700;
    font-size: 20px;
    margin: 12px 5px 0;
}

.OnBarLabelDiv, .adminInfoHeader span, .calendaritem .name, .campTopHead, .goaltable label, .lr_tbl .midgray, .pricetag, .weeknumber {
    font-weight: 700;
}

.fourth_input {
    width: 120px;
}

.addExternalPuff {
    width: 33%;
    min-height: 120px;
    padding: 10px;
    float: left;
    text-align: center;
}

.PuffButton {
    border-radius: 25px;
    background-color: #32a736;
    border: none;
    font-size: 16px;
    padding: 8px 12px 10px 12px;
    min-width: 90px;
    text-align: center;
    margin: 3px;
}

.goaltable {
    margin-top: 10px;
    max-width: 600px;
}

.goaltable tr td {
    padding: 0 5px;
}

.linkbox {
    float: right;
    margin-right: 40px;
}

.goalinfotable {
    float: left;
    padding-left: 20px;
    width: 600px;
}

.OnMapInfo, .OnMapLogo {
    padding: 15px !important;
    font-size: 14px;
}

.goalinfotable h1 {
    margin-top: 20px;
}

.rateControl {
    margin: 20px 90px;
    text-align: center;
    border: 1px solid #DDD
}

.OnMapInfo {
    width: 180px !important;
    left: 10px;
    right: auto !important;
    top: 63px !important;
    font-family: aleoregular, serif;
}

.OnMapLogo {
    right: 0;
    top: 50px;
    position: absolute;
    opacity: .8;
}

#GetAltitudesButton {
    position: absolute;
    top: 25px;
    left: 818px;
    z-index: 10001;
}

.ProfileButton {
    border-radius: 36px !important;
    border: none !important;
    height: 72px;
    width: 72px;
    margin: 6px !important;
    white-space: normal !important;
    vertical-align: text-bottom !important;
}

.ProfileButton:hover {
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.3);
}

.NameBox, .NmbBox {
    height: 13px;
    float: left;
    overflow: hidden;
}

.NameBox {
    width: 28%;
    font-size: 10px;
}

.NmbBox {
    width: 4%;
    font-size: 10px;
}

.NameLink {
    color: #000 !important;
}

.PointBox {
    float: left;
    width: 67%;
    position: relative;
}

.OnBarLabelDiv {
    color: #EEE;
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 10px;
}

#Asp_img, #Sdb_img {
    position: absolute;
    top: 5px;
}

#Sdb_img {
    left: 2px;
}

#Asp_img {
    right: 5px;
}

.multiinfo, .subinfo {
    width: 100px;
    border: 1px solid #eee;
    font-size: 12px;
    text-align: right;
    padding: 5px;
    cursor: pointer;
}

.multiinfo {
    font-weight: 700;
    margin-right: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.arrow, .subinfo {
    margin-right: 6px;
    position: absolute;
}

.partnumber {
    font-size: 16px;
    text-align: left;
    position: absolute;
    cursor: pointer;
    color: #ddd;
    font-style: italic;
    padding: 3px;
}

.arrow {
    width: 28px;
    padding: 5px;
}

#divStats .userbox, .statinfo ul li span.info {
    width: 90px;
    float: left;
}

.t0 {
    border-bottom: solid #31a836;
}

.t1 {
    border-bottom: 3px solid #999;
}

.t2 {
    border-bottom: 3px solid #aaa;
}

.t3 {
    border-bottom: 3px solid #499fc1;
}

.t4 {
    border-bottom: 3px solid #0c6385;
}

.t5 {
    border-bottom: 3px solid #cb3b8e;
}

.t6 {
    border-bottom: 3px solid #7232ad;
}

.t7 {
    border-bottom: 3px solid #ff61bc;
}

.t8 {
    border-bottom: 3px solid #3dbcac;
}

.t9 {
    border-bottom: 3px solid #fff600;
}

.t10 {
    border-bottom: 3px solid #e73f11;
}

.t11 {
    border-bottom: 3px solid #f9b206;
}

.t12 {
    border-bottom: 3px solid #fff600;
}

.t13 {
    border-bottom: 3px solid #444;
}

.t15 {
    border-bottom: 3px solid #b00;
}

.statinfo ul li span {
    float: left;
    width: 180px;
}

#divStats .userspacing {
    width: 200px;
    float: left;
}

#divStats .header {
    padding: 10px 0 5px;
    margin: 10px 10px 0;
}

.statinfo {
    width: 45%;
    padding: 10px;
    vertical-align: top;
}

    .statinfo ul {
        list-style-type: none;
        padding-left: 0;
    }

.competitioncalendar {
    float: left;
    clear: left;
    width: 100%;
}

.calendaritem {
    border: 1px solid #ddd;
    padding: 8px;
    height: 100px;
    width: 293px;
    margin-bottom: 2px;
    background-color: #f6f6f6;
    cursor: pointer;
    border-top: solid 2px #ddd;
    box-sizing: content-box;
}

.smallvip, .vip {
    background-color: #fff;
}

.vip {
    height: 140px;
}

.calendaritem .name {
    position: relative;
    font-size: 13px;
    color: #1e8438;
    width: 100%;
    height: 19px;
    overflow: hidden;
}

.calendaritem .dateInfo {
    float: left;
    width: 142px;
}

.calendaritem .stars {
    position: relative;
    height: 25px;
    float: left;
    clear: both;
    margin-top: 5px;
}

    .calendaritem .stars img {
        width: 100px;
        padding-bottom: 5px;
    }

.arrlogo {
    float: right;
    padding: 3px;
    width: 140px;
}

.arrlogo img {
    max-width: 100px;
    max-height: 40px;
    float: right;
}

.distanceInfo {
    float: right;
    margin-top: 7px;
}

.distanceDiv {
    width: 100%;
    float: left;
    clear: both;
}

.city, .county {
    margin: 0;
}

.calendaritem .info {
    position: relative;
    margin-top: 10px;
    clear: both;
}

.calendaritem .bottom {
    position: absolute;
    bottom: 5px;
    left: 5px;
}

.calendaritem .icon {
    float: left;
    display: inline;
    clear: both;
}

    .calendaritem .icon img, .picto {
        height: 30px;
        padding: 4px 1px 3px;
        float: left;
    }

.calendaritem .race-icon {
    color: #666;
    width: 26px;
    padding-top: 5px;
    font-size: 13px;
    line-height: 24px;
}

.calendaritem .race-icon .fa-inverse {
    color: #fbfbfb;
}

.calendaritem .backyard-icon .fa-clock {
    font-size: 18px;
}

.calendaritem .relay-icon .fa-repeat {
    font-size: 16px;
}

.calendaritem .chip-timing-icon .fa-stopwatch {
    font-size: 16px;
    padding-top: 3px;
}

.calendaritem .chip-timing-icon .fa-bolt {
    font-size: 10px;
    transform: rotate(15deg);
    padding-top: 1px;
}

.calendaritem .live-results-icon .fa-history {
    font-size: 15px;
}

.pricetag {
    color: #FFF;
    background-color: #666;
    height: 22px;
    float: left;
    padding: 2px 5px 3px;
    margin: 4px 1px 3px;
    border-radius: 12px;
}

.calendaritem .signup {
    position: absolute;
    bottom: 5px;
    right: 5px;
    text-align: right;
}

.smaller {
    font-size: 11px;
}

.weeknumber {
    width: 940px;
    height: 10px;
    background: 0 0;
    border: none;
}

.lr_tbl {
    margin-top: 10px;
}

.lr_tbl td {
    padding: 5px;
}

.lr_tbl .midgray, .lr_tbl .subhead {
    padding: 9px 10px 5px;
    background-color: #DDD
}

.lr_tbl .rightMe {
    text-align: right;
}

.lr_tbl .midgray {
    border-top: 15px solid #FFF;
    font-size: 14px;
    color: #000;
}

.lr_tbl .subhead {
    color: #444;
    font-weight: 400;
}

.lr_tbl th {
    font-weight: 400;
    padding: 3px;
    font-size: 12px;
    text-align: center;
    color: #444;
}

.lr_tbl tr.lightgray td {
    background-color: #F0F0F0;
}

.importCheck {
    float: left;
}

.truncatehref {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

.userInfo {
    margin-top: 5px;
    text-align: center;
    font-weight: 600;
    display: flex;
    justify-content: center;
    transition: all 1s;
}

    .userInfo div a {      
    font-weight: 600;     
}

.userInfo.asMedals {
    margin-top: 70px;
}

.userInfo .statItem {
    position: relative;
    display: inline-block;
    min-width: 90px;
    max-width: 90px;
    min-height: 58px;
    max-height: 58px;
    border-radius: 50px;
    margin: 10px;
    padding: 15px 0;
    color: #fff;
    float: left;
    transition: all .5s;
    transition-delay: 1s;
    box-sizing:content-box;
}
    
.userInfo .statItem a {
    color: #fff;
}

.userInfo.asMedals .statItem {
    color: rgba(255,255,255,0.7);
    line-height: 1.25;
    box-shadow: 0 0 5px #999, inset 0 0 0 4px rgba(0,0,0,0.15);
    text-shadow: 0.5px 0.5px rgba(0,0,0,.3), -0.5px -0.5px rgba(255,255,255,0.7);
}

.userInfo.asMedals .statItem a {
    color: rgba(255,255,255,0.7);
}

.userInfo .ribbon {
    display: none;
}

.userInfo.asMedals .ribbon {
    display: block;
    position: absolute;
    left: 0;
    bottom: 117px;
    width: 100%;
    height: 41px;
    background: #ffe082;
    box-shadow: 0 -2px 4px #eee;
    border-radius: 0 0 10px 10px;
}

.userInfo.asMedals .ribbon::after {
    content: "";
    display: block;
    width: 4px;
    border: 39px solid transparent;
    border-top-color: #ffe082;
    top: 4px;
    position: relative;
    left: 4px;
}

.userInfo.asMedals .ribbon .label {
    padding: 10px 7px 0;
    height: 25px;
    color: #04a;
    font-family: aleoregular;
    font-style: italic;
    letter-spacing: 1px;
    text-shadow: -1px -1px #e3f2fd;
}

.userInfo.asMedals .hole {
    display: inline-block;
    position: absolute;
    left: 40px;
    bottom: -43px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0px -2px 3px #888;
}

.userInfo .statItem .label {
    font-size: 12px;
    display: block;
    line-height: 1;
    padding: 3px 10px 1px;
}

    .userInfo.asMedals .statItem > .label {
        height: 5px;
        visibility: hidden;
    }

.userInfo .statItem .value {
    font-size: 28px;
    line-height: 30px;
    font-family: aleoregular;
    letter-spacing: 1.5px;
}

.userInfo .statItem .unit {
    font-size: 11px;
    display: block;
    line-height: 10px;
}

.moreProfileInfo {
    display: none;
    visibility: hidden;
    position: absolute;
}

traningsdagbok .newGoalContainer {
    float: right;
}

.traningsdagbok .goalsContainer {
    width: 100%;
    padding: 0 5px;
    margin-top: 23px;
    border-bottom: 0 none;
}
.traningsdagbok .goalsContainer .goalBox {
    width: 100%;
    margin-bottom: 20px;
    clear: left;
    border-bottom: 0 none;
    position: relative;
}

.traningsdagbok .goalsContainer .goalBox .goalEditImageLink {
    position: absolute;
    right: 0;
    top: 25px;
}

.traningsdagbok .goalsContainer .goalBox .goalChart {
    width: 320px;
    height: 320px;
    float: left;
    z-index: 0;
}

.traningsdagbok .goalsContainer .goalBox .goaltable tr td.label {
    display: table-cell;
    font-weight: 700;
    font-size: 12px;
    color: #111;
    padding-left: 5px;
}

.traningsdagbok .goalsContainer .goalBox .goaltable tr td.value {
    padding-bottom: 10px;
}

    .goalDetails {
    width: 100%;
    padding: 0 5px;
    border-bottom: 0 none;
}
.goalDetails .backToGoals {
    float: right;
    margin: 15px;
}

.goalDetails .chartHeading {
    width: 100%;
    font-size: 16px;
    text-align: center;
    margin: 10px;
}

.goalDetails #detailchart,
.goalDetails #aheadchart {
    width: 940px;
    height: 500px;
}

.statistics #chart {
    width: 940px;
    height: 500px;
}

.statistics label {
    font-weight: 700;
    width: auto;
    margin: 0;
}

.goalCreate {
    width: 50%;
    padding: 0 5px;
    border-bottom: 0 none;
}

.sr-only {
    color: transparent;
}

.date-warning {
    border: 1px solid #C62828;
    padding: 2px 10px;
    margin-top: 10px;
    display: inline-block;
}

.date-warning i {
    float: left;
    padding: 6px 10px 40px 0;
    font-size: 200%;
    color: #C62828;
}

.date-warning label {
    float: right;
    margin: 4px 10px;
    font-size: 11px;
    cursor: default;
}

.date-warning input[type="submit"] {
    padding: 2px 30px 3px;
    margin-right: 12px;
}

.date-warning input[type="checkbox"] {
    vertical-align: middle;
    margin-right: 5px;
}

.box fieldset.planned-status {
    margin-bottom: 20px;
}

.planned-status > label {
    min-height: 70px;
}

.planned-status div {
    margin-bottom: 10px;
}

.planned-status div:last-of-type {
    margin-bottom: 0;
}

.planned-status div label {
    width: unset;
    float: none;
    margin: 0;
    cursor: pointer;
}

.planned-status div label input[type="radio"] {
    top: 2px;
    position: relative;
}

.planned-status div label i {
    padding: 0 5px;
}
    .planned-status div label i.fa-ban {
        position: absolute;
        left: 14px;
        top: 3px;
        font-size: 14px;
        color: #F44336;
    }

.multibanner {
    display: inline-block;
    width: 94%;
    width: calc(100% - 60px);
    padding: 10px 20px;
    margin: 10px 10px 0;
    background-color: #d6e7c9;
    font-size: 14px;
    text-align: center;
}

    .multibanner .planned-icon {
        margin-right: 10px;
        font-size: 20px;
    }

.ErrorMsg {
    margin-top: 20px;
    color: #C62828;
}

.text-right {
    text-align: right !important;
}

.icon-preload {
    width: 0px;
    height: 0px;
    position: absolute;
    left: -10000px;
}

i.star {
    width: 20px;
    height: 20px;
    background: url(/img/starV4_40.png) no-repeat;
    display: inline-block;
    background-size: contain;
    position: relative;
    top: 5px;
    margin-top: -6px;
}

i.star_right {
    margin-left: 5px;
    margin-right: -7px;
}

i.delete {
    color: #666;
}

i.delete:hover {
    color: #c00;
    font-weight: 900;
}

.checkBoxButton input[type=checkbox],
.checkBoxBefore input[type=checkbox],
.checkBoxAfter input[type=checkbox]
{
    display: none;
}

.checkBoxBefore label {
    width: auto;
    margin-right: 10px;
}

.checkBoxButton input[type=checkbox] + label:before,
.checkBoxBefore input[type=checkbox] + label:before,
.checkBoxAfter input[type=checkbox] + label:before {
        font-family: "Font Awesome 5 Pro";
        color: #000;
        font-size: 13px;
        font-weight: 200;
        width: 12px;
        height: 12px;
        display: inline-block;
        padding-right: 2px;
        content: "\f0c8";
    }

.checkBoxButton input[type=checkbox]:checked + label:before,
.checkBoxBefore input[type=checkbox]:checked + label:before,
.checkBoxAfter input[type=checkbox]:checked + label:before{
    content: "\f14a";
}

.checkBoxButton input[type=checkbox]:disabled + label:before,
.checkBoxBefore input[type=checkbox]:disabled + label:before,
.checkBoxAfter input[type=checkbox]:disabled + label:before {
    background: #eee;
    color: #aaa;
}

.checkBoxBefore input[type=checkbox] + label:before {
    padding-right: 5px;
}

.checkBoxAfter input[type=checkbox] + label:before {
    position: absolute;
    left: 126px;
    top: 1px;
}

.export .checkBoxBefore label {
    width: 110px;
}

.export .checkBoxBefore.w100 label {
    width: 100%;
}

.infobox {
    padding: 15px 20px 13px 17px;
    margin-bottom: 5px;
    background: #FFF9C4;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
}

.infobox::before {
    content: "\f05a";
    font-family: "Font Awesome 5 Pro";
    font-size: 150%;
    font-weight: 900;
    color: #474747;
    line-height: 1;
    position: absolute;
}

    .infobox.info-danger::before {
        content: "\f071";
        color: darkorange;
    }

.infobox.info-green {
    background: #C8E6C9
}

.infobox > div {
    margin-left: 35px;
}

.infobox a {
    color: #333;
}

.infobox a:hover {
    text-decoration: underline;
}

.borg-control {
    font-size: 11px;
    position: absolute;
    right: 0px;
    top: -25px;
    color: #333;
    cursor: default;
}

.slide-control {
    background: #e3e3e3;
    height: 16px;
    width: 32px;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    top: 5px;
    margin-right: 10px;
    transition-delay: 0.1s;
}

.slide-control:before {
    content: '';
    width: 18px;
    height: 18px;
    background: #fff;
    border: 1px solid #9E9E9E;
    border-radius: 10px;
    position: absolute;
    left: -2px;
    top: -3px;
    box-shadow: 0 2px 4px 0px rgba(0,0,0,0.3);
    transition: left 0.2s ease-in-out;
}

.slide-control.on {
    background: #f8fffa;
    border-color: #1e8438;
}

.slide-control.on:before {
    left: 15px;
}

.black {
    color: #111 !important;
}

.grey {
    color: #666 !important;
}

.green {
    color: #31a836 !important;
}

.ilb {
    display: inline-block !important;
}

.rel {
    position: relative;
}

.abs {
    position: absolute;
}

.fl {
    float: left !important;
}

.fr {
    float: right !important;
}

.tal {
    text-align: left !important;
}

.tac {
    text-align: center !important;
}

.tar {
    text-align: right !important;
}

.w100 {
    width: 100% !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mr5 {
    margin-right: 5px !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.ml5 {
    margin-left: 5px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.p5 {
    padding: 5px!important;
}

.p10 {
    padding: 10px!important;
}

.pt5 {
    padding-top: 5px!important;
}

.pr5 {
    padding-right: 5px!important;
}

.pb5 {
    padding-bottom: 5px!important;
}

.pl5 {
    padding-left: 5px!important;
}
.pt10 {
    padding-top: 10px!important;
}

.pr10 {
    padding-right: 10px!important;
}

.pb10 {
    padding-bottom: 10px!important;
}

.pl10 {
    padding-left: 10px!important;
}

.bb {
    border-bottom: 1px solid #ccc !important;
}

.bt {
    border-top: 1px solid #ccc !important;
}

.fw1 {
    font-weight: 100 !important;
}

.fw2 {
    font-weight: 200 !important;
}

.fw3 {
    font-weight: 300 !important;
}

.fw4 {
    font-weight: 400 !important;
}

.fw5 {
    font-weight: 500 !important;
}

.fw6 {
    font-weight: 600 !important;
}

.fw7 {
    font-weight: 700 !important;
}

.fw8 {
    font-weight: 800 !important;
}

.fw9 {
    font-weight: 900 !important;
}

.fs150p {
    font-size: 150% !important;
}

.fs200p {
    font-size: 200% !important;
}

.darken {
    filter: brightness(0.5) contrast(0.25);
    pointer-events: none;
}

.itemImage {
    position: relative;
}

.itemImage img {
    cursor: zoom-in;
}

.imageBoxWrapper {
    position: fixed;
    top: 5%;
    left: 50%
}

.imageBoxContainer {
    position: relative;
    top: 0;
    left: -50%;
    min-height: 100px;
    min-width: 175px;
    text-align: center;
    background: #fff;
    padding: 15px;
    box-shadow: 0 2px 10px 4px rgba(0,0,0,.3);
    border-radius: 5px
}

    .imageBoxContainer .closer {
        position: absolute;
        top: 0;
        right: -15px;
        font-size: 30px;
        line-height: 0;
        color: #333;
        cursor: pointer
    }

        .imageBoxContainer .closer:first-of-type {
            color: #fff
        }

.imageBox {
    overflow: auto;
    max-height: 750px;
    max-height: calc(90vh - 30px);
    max-width: 900px;
    max-width: calc(100vw - 80px)
}

img.imageBoxImage {
    max-width: 1024px
}

.doCopy::after {
    content: "\f0c5";
    font-size: 12px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    line-height: 1.4;
    position: absolute;
    display: inline-block;
    margin-left: 1ex;
    color: #31a836;
    z-index: 399;
}

h1.doCopy::after {
    font-size: 20px;
}

h1.doCopy::after
.wo-type.doCopy::after,
.kommentar.doCopy::after {
    line-height: 2;
}

.user-wo-type-info {
    display: none;
    position: absolute;
    margin-left: 30px;
    color: #ef6c00;
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}

.user-wo-type.warning-icon .user-wo-type-info {
    display: inline-block;
}

.user-wo-type-info .fa-exclamation-triangle {
    font-size: 14px;
    padding-right: 1ex;
}

#map.doCopy::after,
.itemImage.doCopy::after {
    top: 50%;
    left: 50%;
    top: calc(50% - 18px);
    left: calc(50% - 27px);
    width: 34px;
    height: 34px;
    font-size: 22px;
    line-height: 35px;
    background: #fff;
    text-align: center;
    border-radius: 5px;
    z-index: 999;
}

.itemImage.doCopy, #map.doCopy, #map.doCopy div {
    pointer-events: none;
}

.itemImage.doCopy img, #map.doCopy .leaflet-pane {
    filter: opacity(0.5);
}

.fadeout {
    opacity: 0;
    animation: fade 5s;
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.pop-and-fade-5s {
    opacity: 0;
    font-size: 100%;
    animation: pop-and-fade 5s 3s;
}

.pop-and-fade-10s {
    opacity: 0;
    font-size: 100%;
    animation: pop-and-fade 10s 3s;
}

@keyframes pop-and-fade {
    0% {
        opacity: 1;
        font-size: 100%;
    }
    5% {
        font-size: 125%;
    }
    15% {
        opacity: 1;
        font-size: 100%;
    }

    90% {
        opacity: 1;
        font-size: 100%;
    }

    100% {
        opacity: 0;
        font-size: 100%;
    }
}
i.large.star {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    top: 1px;
}
.href-target {
    scroll-margin-top: 60px;
}

.gc {
    display: grid;
    grid-auto-flow: column;
}

.gr {
    display: grid;
    grid-auto-flow: row;
}

.gg5 {
    grid-gap: 5px;
}

.no-border {
    border: none !important;
}

.flow.hot-plans-wrapper > div > div {
    border: none;
}

.hot-plans {
    position: relative;
    text-align: center;
    background: #d3f5c6 url(https://www.jogg.se/program/images/smal_huvudbild.jpg);
    background-size: cover;
}

.hot-plans::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 60%);
}

.hot-plans > div
{
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-gap: 5px;
}

.flow > div > div.hot-plans-name {
    margin: 0 0 10px 0;
    padding: 5px 3px 5px;
    background-color: rgb(38 101 27 / 80%);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}

.flow > div > div.hot-plans-dates {
    padding-top: 0;
    background-color: rgb(255 255 255 / 75%);
}

.hot-plans-dates p {
    margin: 3px 0 5px;
}

.hot-plans-dates span {
    white-space: nowrap;
}

.hot-plans-buttons a {
    padding: 8px 12px;
    background-color: #32a736;
    color: #fff;
    border-radius: 5px;
    font-weight: 700;
}

.hot-plans-links {
    justify-content:space-between;
    padding-bottom: 10px;
}

.hot-plans-links a {
    padding: 4px 12px;
    background-color: rgb(255 255 255 / 85%);
    color: #227626;
    border-radius: 5px;
    font-weight: 700;
}

.red {
    color:red;
}