/* Awesome variables */
:root {
    --color-navy: #004061;
    --main-bg-color: #fafafa;
    --th-color: #e0e1e3;
    --calendar-day-default-color: #ededed;
    --calendar-day-light-color: #F6F6F6;
    --color-dark-green: #009893;
    --tr-color: #f3f3f3;
    --calendar-day-text-color: #004061;
    --color-primary: #00B355;
    --color-secondary: #0F5931;
    --color-ternary: #000000;
    --color-primary-complementary: #ffffff;
    --color-secondary-complementary: #ffffff;
    --color-green: #38b34b;
    --color-blue: #00adef;
    --color-purple: #652d92;
    --color-red: #ed1b24;
    --color-orange: #ff6501;
    --color-yellow: #fff100;
    --color-black: #000000;
    --color-grey: #808185;
}

svg {
    vertical-align: middle;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

html, body {
    overflow-x: hidden;
}

.modal-open[style] {
    padding-right: 0 !important;
}
/*.content-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}*/

/*@media screen and (max-width: 464px) {
    .body-content {
        padding-left: 0;
        padding-right: 0;
    }

    .container {
        padding-left: 0;
        padding-right: 0;
    }

    .col-xs-2 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-xs-4 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-xs-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-xs-8 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-xs-10 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-xs-12 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-sm-2 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-sm-4 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-sm-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-sm-8 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-sm-10 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-sm-12 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-2 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-3 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-4 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-5 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-7 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-8 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-10 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-12 {
        padding-left: 0;
        padding-right: 0;
    }
}*/

/* Set widths on the form inputs since otherwise they're 100% wide */
/*input,
select,
textarea {
    max-width: 280px;
}*/

.ie9 img[src$=".svg"] {
    width: 100%;
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    img[src$=".svg"] {
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .dropdownHover > p {
        display: none;
    }
}

@media (max-width: 767px) {
    .dropdownHover > p {
        display: inline-block;
    }

    .dropDownButtonRow > input[type="submit"] {
        width: 50% !important;
    }
}

.dropdownHover > img {
    display: inline-block;
}

.textUnderlineDiv {
    border-bottom: solid 1px #E1E2E4;
    width: 150px;
    margin-bottom: 15px;
}

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.svgicon {
    background-color: var(--color-primary);
    border-radius: 50%;
    height: 38px;
    width: 38px;
    vertical-align: middle;
}

.svgicon-small {
    width: 3rem;
    height: 3rem;
}

/* Brugt til textarea autoexpand */
.animated {
    -webkit-transition: height 0.2s;
    -moz-transition: height 0.2s;
    -o-transition: height 0.2s;
    transition: height 0.2s;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.standard-green {
    color: var(--color-primary);
}

.standard-green-background {
    background-color: #00B355;
}

.standard-background {
    background-color: #FFFFFF;
    padding: 20px 20px 20px 20px;
}

.standard-top-margin {
    margin-top: 20px;
}
/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* buttons and links extension to use brackets: [ click me ] */
.btn-bracketed::before {
    display: inline-block;
    content: "[";
    padding-right: 0.5em;
}

.btn-bracketed::after {
    display: inline-block;
    content: "]";
    padding-left: 0.5em;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

/* Setting body background color */
html, body {
    background-color: #EDEDED;
}

.float-left {
    float: left;
}

.float-right {
    float: left;
}

.fixed-width-50 {
    width: 50px;
}

.fixed-width-75 {
    width: 75px;
}

.fixed-width-100 {
    width: 100px;
}

.bodyBackground {
    height: 100%;
    background-image: url(../images/wisdome_bg_pattern.svg);
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.btn-default {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

.btn-default:hover {
    background-color: var(--color-primary);
}

.btn-default:active, .btn-default:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn:active {
    border-color: var(--color-primary);
}

.btn-navy {
    background-color: var(--main-bg-color);
    border-color: var(--color-navy);
}

.btn-navy:hover {
    font-weight: bold;
}

/* included to keep same width when bolding text on hover*/
.btn::after {
    display: block;
    content: attr(value);
    font-weight: bold;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}

.btn-navy-filled {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: white;
}

.btn-navy-filled:hover {
    background-color: var(--main-bg-color);
    color: var(--color-navy);
}


/*-----------------------*/


.btn-wisdome-light-green {
    background-color: var(--main-bg-color);
    border-color: var(--color-primary);
}

.wisdome-light-green:hover {
    font-weight: bold;
}

/* included to keep same width when bolding text on hover*/
.btn::after {
    display: block;
    content: attr(value);
    font-weight: bold;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}

.btn-wisdome-light-green-filled {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.btn-wisdome-light-green-filled:hover {
    background-color: var(--main-bg-color);
    color: var(--color-primary);
}



/*
    Changes to the navigation bar layout
*/

/* Change color and width of the navbar, added darker bottom border and removing the default rounded corners */
.navbar {
    background-color: var(--color-primary);
    min-height: 65px;
    border-bottom: solid;
    border-bottom-width: 3px;
    border-bottom-color: var(--color-primary-complementary);
    border-radius: 0;
}

.navbar svg {
    color: var(--color-primary-complementary);
}

/*The vertical line seperating icons*/
.icon-divider {
    border-left: thick solid var(--color-primary-complementary);
    border-left-width: 2px;
    height: 50px;
    width: 0;
}

.header-icon {
    padding: 1rem;
}

.nav > li:hover {
    /*filter: brightness(90%);*/
    /*opacity: 0.7;*/
    cursor: pointer;
}

.header-icon > a > img {
    margin-top: 5px;
}

/*
    Plus icon dropdown styling
*/
.dropdown-menu {
    padding: 0 0 0 0;
    margin: 2px 0 0 0; 
}

.dropDownContainer {
    width: 225px;
    height: auto;
    background: var(--color-secondary);
    margin-top: 0;
    margin-bottom: 0;
    padding: 3px 3px 3px 3px;
}

.dropDownHeader > h3 {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 8px;
    font-size: 12px;
    color: var(--color-secondary-complementary);
}

.dropDownInnerContainer {
    background-color: #FFFFFF;
    padding-bottom: 0;
    max-height: 400px;
    color: black !important;
}

.dropDownText {
    padding: 20px 8px 0 8px;
    font-size: 12px;
}

.dropDownText > p {
    margin-bottom: 5px;
}

.dropDownButtonRow {
    background-color: #E1E2E4;
    height: 60px;
    text-align: center;
}

.dropDownButtonRow > button, .dropDownButtonRow > input[type="submit"] {
    margin-top: 13px;
    width: 85%;
    color: #FFFFFF;
    background-color: var(--color-primary);
}

@media screen and (max-width: 768px) {
    .dropDownContainer {
        width: 100%;
        height: 100%;
        background: var(--color-secondary);
        margin-top: 0;
        margin-bottom: 0;
        padding: 3px 3px 3px 3px;
        color: var(--color-secondary-complementary);
    }

    .dropDownButtonRow > button {
        width: 50%;
        min-width: 50px;
    }
}

#newNotificationContainer, #newMessageContainer {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: var(--color-secondary);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
}

#newNotificationCounter, #newMessageCounter {
    color: white;
    font-size: 12px;
}

#notificationIcon {
    padding-top: 16px;
}

/*
 * Footer layout
 */

/* 
 * Footer line 
 */

footer {
    background-color: #EDEDED;
}

.full-page-line {
    border-top: solid var(--color-primary);
    border-width: 2px;
}

footer ul {
    text-align: center;
}

footer ul li {
    display: inline-block;
    margin: 0; 
    padding-left: 0 !important;
    padding-right: 0 !important;
}

footer ul li a {
    color: black;
    font-size: 10px;
    padding-left: 2px;
    padding-right: 2px;
}

footer ul li p {
    color: black;
    font-size: 10px;
    padding-left: 2px;
    padding-right: 2px;
}

/*


    General styling!


*/

.containerHeader {
    padding: 40px 30px 0 30px;
    color: var(--color-secondary);
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: bold;
}

.containerHeaderLine {
    border: solid thin #E1E2E4;
    border-width: 1px;
    margin-left: 30px;
    margin-right: 150px;
    margin-bottom: 10px;
}

.wideContainerHeaderLine {
    border: solid thin #E1E2E4;
    border-width: 1px;
    margin-left: 30px;
    width: 20%;
    margin-bottom: 10px;
}

.sidebarHeader {
    color: var(--color-secondary);
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: bold;
}

.sidebarLine {
    border: solid thin #E1E2E4;
    border-width: 1px;
    width: 70%;
    margin-bottom: 10px;
}

.wideSidebarLine {
    border: solid thin #E1E2E4;
    border-width: 1px;
    width: 35%;
    margin-bottom: 20px;
}

.fullWidthLine {
    border: solid thin #E1E2E4;
    border-width: 1px;
    width: 100%;
    margin-bottom: 20px;
}

.bottom-margin {
    margin-bottom: 20px;
}

.center-content {
    text-align: center;
}

.left-content {
    text-align: left;
}

.right-content {
    text-align: right;
}

.right-content-left-small {
    text-align: right;
}

@media (max-width: 767px) {
    .right-content-left-small {
        text-align: left;
    }
}



.linkRecolor {
    color: var(--color-primary);
}

.left-float {
    float: left;
}

.right-float {
    float: right;
}


.moretxt {
    color: var(--color-primary);
    cursor: pointer;
}

.lesstxt {
    color: var(--color-primary);
    cursor: pointer;
}

.morecontent span {
    display: none;
}

/*


    Your Club styling 


*/
.your-club-container {
    background-color: #FFFFFF;
    margin-top: 20px;
}

.your-club-container > h3 {
    padding: 40px 30px 0 30px;
    color: var(--color-secondary);
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: bold;
}

.your-club-headerline {
    border: solid thin #E1E2E4;
    border-width: 1px;
    margin-left: 30px;
    margin-right: 150px;
    margin-bottom: 10px;
}

.club {
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
    padding: 0 1em;
}

.club > .col-xs-10 {
    padding-right: 0;
    padding-left: 2px;
}

.club > .col-xs-7 {
    padding-right: 2px;
    padding-left: 2px;
}

.club-line {
    border: solid thin #E1E2E4;
    border-width: 1px;
    margin-left: 0;
    margin-right: 70px;
    margin-bottom: 10px;
}

.club-footer {
    min-height: 80px;
    text-align: center;
    background-color: #E1E2E4;
    padding-top: 23px;
    margin-bottom: 20px;
}

.club-footer-button {
    outline: 0;
    height: 35px;
    text-decoration: none !important;
    cursor: pointer;
    position: relative;
    text-align: center;
    display: inline-block;
    background-color: var(--color-primary);
    border: none;
    width: 70%;
}

.club-heading {
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    padding-left: 0;
}

.club-heading span {
    color: var(--color-primary);
}

.club-button {
    padding-left: 0;
}

.club-image {
    text-align: right;
    padding-right: 0;
    padding-left: 0;
    margin-top: 25px;
}

.club-button > .btn {
    color: white;
    background-color: var(--color-primary);
    margin-top: 30px;
}

.club-description h5 {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.club-description h5 a {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.club-description p {
    font-size: 0.8em;
}






/*



    Main Feed styling



*/

.mainFeedContainer {
    margin-top: 20px;
    margin-bottom: 30px;
    background-color: #FFFFFF;
}

.mainFeedHeader {
    background-color: var(--color-primary);
    width: 100%;
    min-height: 65px;
}

.mainFeedHeaderContent {
    display: inline-block;
}

.mainFeedHeader img {
    margin-top: 10px;
    margin-left: 20px;
    float: left;
}

.mainFeedHeader h3 a, .mainFeedHeader h3 span {
    font-size: 18px;
    color: inherit;
    margin-top: 35px;
    padding-left: 10px;
}

.mainFeedHeader h4 {
    float: right;
    margin-top: 40px;
    padding-right: 20px;
    font-size: 12px;
    color: inherit;
}

.mainFeedUser h3 {
    margin: 0;
}

.mainFeedUser > * {
    display: inline-block;
    padding-left: 20px;
    padding-top: 10px;
}


.mainFeedUser img {
    margin-bottom: 10px;
}

.mainFeedUserInfo > h3 > a {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.mainFeedUserInfo h4 {
    margin-top: 0;
    font-size: 12px;
}

.mainFeedContent {
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 10px;
}

.mainFeedContent h3 {
    margin-top: 5px;
    color: var(--color-secondary);
    font-weight: bold;
}

.mainFeedContentLine {
    border-top: solid thin #E1E2E4;
    width: 20%;
    border-width: 1px;
    margin-left: 0;
    margin-bottom: 10px;
}

.mainFeedEmbeddedContent {
    border: solid thin #E1E2E4;
    border-width: 1px;
    padding: 5px 5px 5px 5px;
    margin-left: 2px;
    margin-right: 5px;
}

.mainFeedEmbeddedContent > div {
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.postEmbeddedVideo {
    margin-top: 0;
    margin-bottom: 0;
}

/*.mainFeedEmbeddedContent img{
    padding: 000px 0 
    margin: 0 0 0 0 
}*/

.mainFeedEmbeddedContent > .col-sm-5 {
    padding-left: 0;
    padding-right: 0;
}

/*.mainFeedEmbeddedContent > .col-sm-7{
    padding-left: 0;
}*/

.mainFeedEmbeddedContentText h3 {
    font-size: 14px;
    color: var(--color-secondary);
    font-weight: lighter;
}

.mainFeedEmbeddedContentText {
    margin-top: 20px;
}


.mainFeedWisdomised > * {
    padding-left: 2px;
    margin-top: 10px;
}

.mainFeedWisdomised > p {
    width: 165px;
    margin-top: 0;
    margin-bottom: 0;
}

.mainFeedWisdomised > * {
    display: inline-block;
}

.mainFeedWisdomised > span {
    background-color: var(--color-secondary);
    width: 21px;
    height: 21px;
    margin-left: 3px;
    padding: 4px 1px 0 0;
    border-radius: 50%;
    font-size: 10px;
    color: white;
    text-align: center;
    margin-top: 0;
    -moz-filter: brightness(80%);
    -webkit-filter: brightness(80%);
    filter: brightness(80%);
}



.mainFeedWisdomised > img {
    margin-top: -2px;
    cursor: pointer;
}

.mainFeedCommentContainer {
    background-color: #E1E2E4;
    padding-top: 20px;
    padding-bottom: 20px;
}

.mainFeedCommentsHeader h3 {
    padding: 0 20px 10px 20px;
    font-size: 16px;
    color: var(--color-secondary);
    margin-bottom: 0;
    cursor: pointer;
    margin-top: 0;
}

.mainFeedComments {
    margin-left: 0;
    margin-right: 0;
    padding-left: 25px;
    padding-right: 25px;
    border-bottom: solid 1px #D0D0D0;
}

.mainFeedComments > * {
    margin-top: 15px;
    display: inline-block;
}

.mainFeedCommentsWisdomise > * {
    display: inline-block;
}

.mainFeedCommentsWisdomise > img {
    margin-top: -5px;
    cursor: pointer;
}

.mainFeedCommentsWisdomise > text {
    color: black;
    font-size: 12px;
}

.mainFeedComments > div > .circleImageMaskXSmall {
    text-align: center;
}

.mainFeedUserComment {
    margin-left: 0;
    margin-right: 0;
    margin-top: 5px;
    padding: 0 10px 0 20px;
}

.btnright > button {
    width: 75px;
    color: white;
    background-color: var(--color-primary);
}

.submitComment {
    margin-top: 10px;
}

.mainFeedUserComment input {
    max-width: 100%;
}

.mainFeedUserComment > form > div {
    text-align: left;
}

.mainFeedUserComment > form > * {
    padding-left: 0;
    padding-right: 10px;
}

.btnright > input {
    float: right;
}

.mainFeedTextInput > textarea {
    resize: vertical;
}

.mainFeedUserIconInput {
    margin-left: 5px !important;
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    margin-top: 10px;
    padding-bottom: 20px;
}

.mainFeedUserIconInput > div > .col-xs-2 {
    padding-left: 0;
}

.mainFeedUserIconInput > .col-sm-1 {
    text-align: left;
}

.mainFeedUserIconInput > * {
    padding-right: 0;
    padding-left: 0;
    display: inline-block;
}


/*


    About this Club styling


*/

.aboutClubContainer {
    background: #FFFFFF;
}

.aboutClubText {
    padding: 10px 30px 35px 30px;
    font-size: 12px;
    text-align: start;
}

.aboutClubText > text > span {
    color: var(--color-primary);
    font-weight: bold;
}


/*


    Club page header styling


*/

#clubCoverContainer {
    width: 100%;
    height: 20vh;
}

@media screen and (min-width: 769px) {
    #clubCoverContainer {
        height: 30vh;
    }
}

#clubCoverContainer > div {
    width: 100%;
    height: 100%;
}

#clubCover {
    background-size: cover;
    background-position: center;
}

.clubEditCoverImage {
    position: absolute;
    right: 2em;
    top: 1em;
}

#clubCoverPlaceholder {
    display: flex;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

@media screen and (min-width: 769px) {
    #clubCoverPlaceholder > div {
        font-size: 5vh;
    }
}

@media screen and (max-width: 768px) {
    #clubCoverPlaceholder > div {
        font-size: 3vh;
    }
}

@media screen and (max-width: 400px) {
    #clubCoverPlaceholder > div {
        font-size: 1.5vh;
    }
}

    .clubPageHeaderContainer {
        position: relative;
        background: #FFFFFF;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .clubPageHeader {
        position: relative;
    }

    .clubPageHeaderText {
        padding-top: 65px;
        color: #000000;
    }

    .clubPageHeader h1 {
        margin-top: 30px;
        font-size: 24px;
        margin-bottom: 5px;
    }

    .clubPageHeaderIcon {
        position: absolute;
        top: -4.5em;
    }

        .clubPageHeaderIcon img {
            margin-left: 20px;
            margin-top: 20px;
            border-radius: 50%;
            border: 5px solid white;
            background: radial-gradient(circle at center, white 100%, transparent 100%);
        }

    .club-page-header-content {
        padding: 1em 2em;
    }

    @media screen and (min-width: 768px) {
        .clubPageHeaderIcon {
            top: -6.5em;
        }

            .clubPageHeaderIcon > div > img {
                width: 120px;
                height: 120px;
                box-shadow: #0000005e 0px 0px 3px;
            }

        .clubPageHeaderText {
            padding-top: 1em;
        }

        .clubLockIcon {
            padding: 1em;
        }
    }

    @media screen and (min-width: 768px) {
        .clubPageHeaderIcon {
            top: -7.5em;
        }
    }

    @media screen and (max-width: 768px) {
        .clubPageHeaderIcon > div > img {
            margin: 20px auto;
        }

        .clubPageHeaderText > div {
            text-align: center;
        }

            .clubPageHeaderText > div > div {
                margin: 0 auto;
            }

        .clubPageHeader h1 {
            margin-top: 5px;
        }
    }

    .clubPageHeaderLine {
        border-top: solid thin #E1E2E4;
        border-width: 1px;
        width: 25%;
        margin-bottom: 10px;
    }

    .clubTags > ul {
        padding-left: 0;
    }

        .clubTags > ul > * {
            display: inline-block;
            list-style-type: none;
        }

    .clubLockIcon {
        position: absolute;
        top: 0;
        right: 0;
    }

        .clubLockIcon > a > img {
            cursor: pointer;
        }

    .clubPageHeaderApply {
        background: #FFFFFF;
        min-height: 75px;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 20px;
    }

    /*.clubPageHeaderApply button{
    width: 40%;
    margin-top: 20px;
    color: #FFFFFF;
    background-color: var(--color-primary);
    
}*/

    .applyForClubButton {
        width: 40%;
        margin-top: 20px;
        color: #FFFFFF;
        background-color: var(--color-primary);
    }

    /*


    Club Members styling



*/

    .clubMembersContainer {
        background-color: #FFFFFF;
        padding-right: 30px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .clubMembersOwners {
        padding-left: 30px;
        position: relative;
    }

        .clubMembersOwners > h3 {
            font-size: 14px;
            color: var(--color-primary);
            font-weight: bold;
        }

    .clubMembersMemberList {
        padding-left: 30px;
        margin-bottom: 30px;
    }

        .clubMembersMemberList > h3 {
            font-size: 14px;
            color: var(--color-primary);
            font-weight: bold;
        }

    .clubMembersShowMore {
        text-align: center;
    }

        .clubMembersShowMore > button {
            color: #7F8085;
            font-weight: bold;
            background-color: #FFFFFF;
            border: solid thin #E1E2E4;
            border-width: 1px;
            border-radius: 5%;
            width: 50%;
            min-height: 30px;
            margin-bottom: 40px;
        }

    .clubMembersClubIsPrivateMessageContainer {
        padding-left: 30px;
        background: white;
    }

    .clubPrivateClubMessage {
        font-size: 18px;
    }
    /*


    Club Member Frame styling


*/

    .clubMemberFrame {
        background-color: #EDEDED;
        margin-right: 0;
        margin-left: 0;
        min-height: 110px;
        margin-bottom: 30px;
        overflow: hidden;
    }

        .clubMemberFrame > * > img {
            margin-top: 20px;
        }

        .clubMemberFrame > * > h3 {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 0;
            margin-top: 30px;
        }

            .clubMemberFrame > * > h3 > a {
                color: #444444;
            }

        .clubMemberFrame > * > h4 {
            font-size: 14px;
            font-weight: bold;
            color: var(--color-secondary);
            margin-top: 0;
        }

        .clubMemberFrame > * > h5 {
            font-size: 12px;
        }

        .clubMemberFrame > .col-xs-8 {
            padding-left: 0;
        }

    /*


    Club page for members header styling


*/
    .clubPageHeaderNavBar {
        display: flex;
        position: relative;
    }

    @media screen and (max-width: 768px) {
        .clubPageHeaderNavBar {
            flex-direction: column;
        }
    }

    .clubPageHeaderNavBar a:hover {
        cursor: pointer;
        color: var(--color-secondary);
        -moz-filter: brightness(90%);
        -webkit-filter: brightness(90%);
        filter: brightness(90%);
    }

    .clubPageHeaderNavBar div {
        text-align: center;
        -webkit-flex: 1;
        -ms-flex: 1;
        -o-flex: 1;
        flex: 1;
        position: relative;
    }

    /*The last child selector doesn't work - workaround below this block*/
    .clubPageHeaderNavBarRightLine:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        background-color: #EDEDED;
        height: 100%;
    }


    .clubPageHeaderNavBar a {
        display: block;
    }

    .clubPageNav {
        font-weight: bold;
    }

        .clubPageNav div {
            text-align: center;
        }

    .clubPageNav {
        border-top: 1px solid #EDEDED;
        padding: 1em 0;
    }

        .clubPageNav a {
            color: var(--color-secondary);
            font-size: 13px;
        }


    /*



    Club members sidebar styling



*/

    .clubMembersSidebarContainer {
        background-color: #FFFFFF;
        padding-bottom: 10px;
    }

    .clubMembersSidebarMembers {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 30px;
        background-color: #E1E2E4;
        margin-left: 0;
        margin-right: 0;
        min-height: 50px;
    }

        .clubMembersSidebarMembers > * {
            padding-top: 6px;
            padding-left: 2px;
            padding-right: 2px;
        }

    .clubMembersSidebarBody {
        min-height: 60px;
        text-align: center;
    }

        .clubMembersSidebarBody svg {
            height: 100%;
            width: 28px;
            height: 28px;
            margin-left: 1em;
            margin-top: -3px;
        }

        .clubMembersSidebarBody > button {
            background-color: var(--color-primary);
            color: #FFFFFF;
            margin-top: 12px;
        }


    /*
 * Front page - no user.
 */

    .front-page-body {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        background: #FFFFFF;
    }

    .background-pattern-wrapper {
        overflow: hidden;
        height: 700px;
        width: 100%;
        position: absolute;
    }

    @media screen and (max-width: 480px) {
        .background-pattern-wrapper {
            height: 400px;
        }
    }

    .background-pattern {
        position: absolute;
        -webkit-transform: rotate(-54deg);
        transform: rotate(-54deg);
        right: -137px;
        top: -220px;
    }

    .greenDevider {
        margin: 0;
        border-color: var(--color-primary);
        width: 96%;
        margin-left: 2%;
    }

    #headerfrontpage {
        background-color: #FFFFFF;
        min-height: 100px;
        border: none;
        padding-right: 15px;
        margin-bottom: 0;
    }

        #headerfrontpage > .navbar-header > .navbar-toggle {
            margin-top: 10px;
            background-color: var(--color-primary);
        }

    .frontpageButton {
        background-color: var(--color-primary);
        color: #FFFFFF;
        width: 100%;
        min-width: 60px;
    }

    .frontPageInput {
        border: none;
        background-color: #EDEDED;
    }

    .frontpageLogin > * {
        padding-left: 0;
        padding-right: 5px;
    }

    #frontPageNeedHelp {
        color: var(--color-primary);
    }

    .frontPageNeedHelpWrapper {
        margin-top: 10px;
    }

    .frontPageTophalf {
        background-color: white;
        text-align: center;
        min-height: 585px;
    }

        .frontPageTophalf > h2 {
            margin-top: 10px;
            color: var(--color-primary);
            font-size: 45px;
        }

        .frontPageTophalf > h3 {
            margin-top: 48px;
            font-size: 31px;
        }

    .frontPageMiddle {
        display: none;
    }

    @media screen and (max-width: 991px) {
        .frontPageMiddle {
            background-color: white;
            min-height: 400px;
            display: block;
        }
    }

    @media screen and (max-width: 991px) {
        .frontPageTophalf {
            min-height: 340px;
        }
    }




    .frontPageMiddle {
        background-color: white;
        min-height: 400px;
    }

    .frontPageMiddleLine {
        margin-top: 125px;
    }

        .frontPageMiddleLine > * > hr {
            border: none;
            height: 1px;
            /* Set the hr color */
            color: #e0e0e0; /* old IE */
            background-color: #e0e0e0; /* Modern Browsers */
        }

    @media screen and (max-width: 400px) {
        .frontPageMiddleLine {
            margin-top: 125px;
        }
    }

    @media screen and (min-width: 821px) {
        .frontPageMiddleLine {
            margin-top: 125px;
        }
    }


    .frontPageBottomhalf {
        background-color: var(--color-primary);
        color: #FFFFFF;
        padding-bottom: 25px;
        padding-top: 250px;
        padding-bottom: 110px;
    }

        .frontPageBottomhalf > img {
            position: absolute;
            z-index: 1;
            max-height: 550px;
            top: 140px;
        }

        .frontPageBottomhalf > div {
            z-index: 10;
        }

            .frontPageBottomhalf > div > h2 {
                font-style: italic;
                font-size: 40px;
            }

            .frontPageBottomhalf > div > h3 {
                margin-bottom: 40px;
                font-size: 27px;
            }


    @media screen and (min-width: 992px) {
        .frontPageBottomhalfVideo {
            background-color: var(--color-primary);
            color: #FFFFFF;
            padding-top: 170px;
            padding-bottom: 120px;
        }

            .frontPageBottomhalfVideo > img {
                position: absolute;
                z-index: 1;
                max-height: 410px;
                top: 10px;
            }
    }

    @media screen and (max-width: 991px) {
        .frontPageBottomhalfVideo {
            background-color: var(--color-primary);
            color: #FFFFFF;
            padding-top: 550px;
            padding-bottom: 120px;
            position: relative;
        }

            .frontPageBottomhalfVideo > img {
                position: absolute;
                z-index: 1;
                max-height: 450px;
                bottom: 5px;
                width: 600px;
                left: 50%;
                -webkit-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
            }
    }

    .frontPageBottomhalfVideo > div {
        z-index: 10;
    }

        .frontPageBottomhalfVideo > div > h1 {
            margin-top: 0;
        }

    .greyMessageBoxContainer {
        position: relative;
    }

    .greyMessagePosition {
        position: absolute;
        top: -420px;
        z-index: 5;
    }

    .greyMessagePositionVideo {
        position: absolute;
        top: -580px;
        z-index: 5;
    }

    @media screen and (max-width: 991px) {
        .greyMessagePositionVideo {
            position: absolute;
            top: -410px;
            z-index: 5;
        }
    }

    .greyMessageTest {
        background-color: #eaeaea;
        min-height: 580px;
        border-radius: 1%;
        padding: 10px 30px 20px 30px;
        margin-top: 20px;
    }

    .clearFrontPageMessageBox {
        background-color: unset;
        min-height: 580px;
        border-radius: 1%;
        padding: 10px 0 20px 0;
        margin-top: 20px;
        display: table;
        width: 100%;
    }

    .clearFrontPageMessageBoxInner {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        text-align: center;
    }

        .clearFrontPageMessageBoxInner > h3 {
            color: var(--color-primary);
        }


    /*@media screen and (max-width: 991px) {
    .clearFrontPageMessageBoxInner > h3 {
        color: white;
    }
}*/


    .frontPageVideo {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
        border: none;
    }

    .greyMessageBox {
        background-color: #EDEDED;
        min-height: 550px;
        padding: 10px 30px 20px 30px;
        text-align: center;
        border-radius: 1%;
        z-index: 5;
    }

    .greyMessageContainer {
        background-color: #EDEDED;
        position: absolute;
        top: 350px;
        min-height: 550px;
        padding: 10px 30px 20px 30px;
        text-align: center;
        border-radius: 1%;
        z-index: 5;
    }

    @media screen and (max-width: 768px) {
        .greyMessageContainer {
            top: 400px;
        }

        .frontPageBottomhalf {
            padding-top: 320px;
        }

            .frontPageBottomhalf > img {
                top: 325px;
            }

        .background-pattern {
            position: absolute;
            -webkit-transform: rotate(-54deg);
            transform: rotate(-54deg);
            right: -50px;
            top: -50px;
        }
    }

    @media screen and (max-width: 480px) {
        .greyMessageContainer {
            top: 500px;
        }

        .frontPageBottomhalf {
            padding-top: 450px;
        }

            .frontPageBottomhalf > img {
                top: 500px;
            }

        .background-pattern {
            position: absolute;
            -webkit-transform: rotate(-54deg);
            transform: rotate(-54deg);
            right: 0;
            /*top: 250px;*/
        }
    }

    @media screen and (max-width: 350px) {
        .greyMessageContainer {
            top: 600px;
        }

        .frontPageBottomhalf {
            padding-top: 550px;
        }

            .frontPageBottomhalf > img {
                top: 600px;
            }

        .background-pattern {
            position: absolute;
            -webkit-transform: rotate(-54deg);
            transform: rotate(-54deg);
            right: 0;
            top: 15px;
        }
    }

    .greyMessageContainer > h3 {
        font-size: 32px;
    }

    .greyMessageContainer > .confirmEmailTitle {
        margin-top: 70px;
        margin-bottom: 35px;
    }

    .signUpEmailLine {
        margin-top: 10px;
        margin-left: 0;
        margin-right: 0;
    }

    .signUpBorderColumn {
        margin-top: 10px;
        border-bottom: solid 1px #AFAFAF;
        width: 25%;
    }

    .signUpTextColumn {
        width: 50%;
        text-align: center;
    }

        .signUpTextColumn > p {
            color: var(--color-primary);
        }

    .signUpContainer > div > div > p {
        color: var(--color-primary);
    }



    .signUpContainer > * > * > * > input {
        width: 100%;
        margin-top: 10px;
    }

    .signUpButton {
        background-color: var(--color-primary);
        color: #FFFFFF;
        width: 60%;
        height: 45px;
        margin-top: 20px;
        font-size: 20px;
    }

    .terms {
        margin-top: 40px;
        color: #AFAFAF;
        text-align: center;
    }

        .terms > p > a {
            color: var(--color-primary);
        }

    .helpLink {
        color: var(--color-primary);
    }


    /*



    User public profile styling



*/

    .userIntroductionContainer {
        margin-top: 20px;
    }

    .userClubListContainer {
        padding: 20px 17px 20px 15px;
        background-color: #FFFFFF;
        margin-top: 20px;
    }

    .userProfileHeaderContainer {
        padding: 20px;
        min-height: 300px;
        background-color: var(--color-primary);
        margin-left: 0;
        margin-right: 0;
        margin-top: 20px;
    }

        .userProfileHeaderContainer > div > div > img {
            margin-top: 20px;
        }

    .userProfileHeaderText {
        margin-top: 20px;
    }

        .userProfileHeaderText > h3 {
            color: #FFFFFF;
            margin-bottom: 0;
        }

        .userProfileHeaderText > p {
            color: #004B21;
        }

        .userProfileHeaderText > h4 {
            font-size: 18px;
            margin-top: 5px;
            color: #004B21;
        }

    .profileHeaderLine {
        border-bottom: solid #53CB8B;
        width: 70%;
        border-width: 1px;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .userProfileHeaderText > div > div > text {
        font-size: 18px;
        color: #004B21;
    }

        .userProfileHeaderText > div > div > text > span {
            color: #FFFFFF;
        }

    .userProfileClubBorder {
        border-right: solid #019645;
        border-width: 2px;
        margin-bottom: 10px;
        max-width: 140px;
    }

    .userIntroductionContainer {
        padding: 20px 20px 20px 20px;
        background-color: #FFFFFF;
        margin-top: 20px;
    }

        .userIntroductionContainer > .userIntroVitaLink {
            margin-top: 10px;
            text-align: center;
        }

    .userIntroVitaLink > a {
        text-decoration-style: unset;
        color: var(--color-primary);
        font-size: 16px;
    }

    .userIntroEmbeddedVideo {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .userIntroVita {
        margin-top: 20px;
    }

    .userContentSubContainer {
        margin-top: 20px;
        background-color: #FFFFFF;
        padding: 20px 20px 40px 20px;
    }

    .userContentHeaderLine {
        border-bottom: solid thin #E1E2E4;
        border-width: 1px;
        width: 30%;
        margin-bottom: 10px;
    }

    .userContentHeader {
        color: var(--color-primary);
        font-size: 14px;
        margin-bottom: 4px;
        font-weight: bold;
    }

    .userContentText {
        margin-bottom: 0;
        margin-top: 0;
        padding-top: 0;
    }

    .userContentTextSmall {
        font-size: 10px;
        margin-bottom: 0;
        margin-top: 0;
    }


    /*



    User Edit Profile - Styling



*/

    .userEditHeaderRow {
        margin-left: 0;
        margin-right: 0;
    }

        .userEditHeaderRow > .col-xs-7 {
            padding-right: 0;
        }

            .userEditHeaderRow > .col-xs-7 > h3 {
                font-size: 22px;
            }

    .userEditHeaderInput {
        width: 90%;
        border: 0;
        background-color: var(--color-primary);
    }

    #userEditSave {
        background-color: #019545;
        color: white;
    }

    .userEditIntroductionBtn {
        margin-top: 10px;
    }

    .profileStrength {
        padding-top: 5px;
        padding-left: 0;
        height: 56px;
        text-align: right;
    }

        .profileStrength > * {
            display: inline-block;
        }

        .profileStrength > h3 {
            font-size: 18px;
            margin-bottom: 0;
        }

        .profileStrength > img {
            padding-bottom: 15px;
        }

    .userEditHeader {
        background-color: var(--color-primary);
        min-height: 200px;
        padding: 10px 5px 10px 10px;
        margin-left: 0;
        margin-right: 0;
    }

        .userEditHeader > * > img {
            margin-top: 15px;
        }

    .userEditHeaderText {
        margin-top: 20px;
        padding-left: 0;
    }

        .userEditHeaderText > h3 {
            color: #FFFFFF;
            margin-bottom: 0;
        }

        .userEditHeaderText > p {
            display: inline-block;
            font-size: 18px;
            margin-bottom: 0;
        }

            .userEditHeaderText > p > span {
                display: inline-block;
                font-size: 24px;
                color: #FFFFFF;
            }

    @media screen and (max-width: 768px) {
        .userEditHeaderText {
            -moz-align-content: center;
            -o-align-content: center;
            -webkit-align-content: center;
            align-content: center;
        }
    }


    .profileEditImageIcon {
        position: absolute;
        top: 80%;
    }

        .profileEditImageIcon > a > img {
            width: 40px;
            height: 40px;
        }

    .profileEditNameIcon {
        position: absolute;
        top: 5%;
        right: 10%;
    }

    .userEditPresentation {
        background-color: #FFFFFF;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 20px 20px 20px 20px;
    }

        .userEditPresentation > h3 > span {
            color: black;
            font-size: 10px;
        }

        .userEditPresentation > .row > * {
            text-align: center;
            padding-left: 0;
            padding-right: 0;
        }

        .userEditPresentation > .row {
            margin-left: 0;
            margin-right: 0;
        }

        .userEditPresentation > div > div > p {
            font-size: 12px;
            padding-top: 0;
        }

    .userEditIntroductionBtn {
        background-color: var(--color-primary);
        width: 100%;
        color: #FFFFFF;
    }

    .userEditVita {
        background-color: #FFFFFF;
        padding: 20px 20px 20px 20px;
        margin-top: 20px;
    }

    #user-vita > p {
        white-space: pre-wrap;
    }

    #userEditVita {
        resize: none;
    }

    .userEditLink > * {
        color: black;
        display: inline-block;
    }

    .userEditLink > a > img {
        padding-bottom: 5px;
    }

    .userEditIcon {
        content: url(../images/userediticon.png);
    }

    .userEditVitaButton {
        background-color: var(--color-primary);
        width: 70%;
        color: #FFFFFF;
        margin-top: 15px;
    }

    .accomplishmentText > * {
        display: inline-block;
    }

    .userEditRecommendations {
        background-color: #FFFFFF;
        padding: 20px 20px 20px 20px;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .userEditActivity {
        background-color: #FFFFFF;
        padding: 20px 20px 20px 20px;
    }

    .userEditActivity {
        padding: 20px 20px 20px 20px;
        background-color: #FFFFFF;
    }

    .userEditActivityClub {
        text-align: center;
    }

    .userEditActivity > .row {
        margin-left: 0;
        margin-right: 0;
    }

    .userEditActivity h3 {
        font-size: 18px;
    }

    .editActivityDivider {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        width: 10px;
    }

    .createClub {
        padding: 20px 60px 40px 60px;
    }

        .createClub > h3 {
            margin-top: 5px;
            margin-bottom: 0;
            color: var(--color-primary);
            font-size: 16px;
        }

        .createClub > p {
            font-size: 10px;
        }

    .createClubWidget {
        padding: 30px 20px 30px 20px;
        background-color: #EDEDEB;
        border: dashed 1px var(--color-primary);
        margin-bottom: 20px;
        height: 160px;
    }

        .createClubWidget > h3 {
            margin-top: 5px;
            margin-bottom: 3px;
            color: var(--color-primary);
            font-size: 16px;
        }

        .createClubWidget > p {
            font-size: 10px;
            margin-bottom: 0;
        }

    .profileStrengthRow {
        margin-left: 0;
        margin-right: 0;
    }

    .editUserMyActivityContainer {
        background-color: #FFFFFF;
        padding: 20px 30px 30px 30px;
        margin-bottom: 20px;
    }

        .editUserMyActivityContainer > .row {
            margin-left: 0;
            margin-right: 0;
        }

            .editUserMyActivityContainer > .row > p {
                text-align: center;
                color: var(--color-primary);
                font-size: 32px;
                margin-top: 30px;
                font-weight: bold;
            }

                .editUserMyActivityContainer > .row > p > span {
                    color: #7F8085;
                    font-weight: normal;
                }

    #editUserFindClubTopRight {
        width: 150px;
        float: right;
    }

    @media screen and (max-width: 767px) {
        #editUserFindClubTopRight {
            float: left;
        }
    }

    #editUserStartClubTopRight {
        width: 150px;
        float: right;
    }

    @media screen and (max-width: 767px) {
        #editUserStartClubTopRight {
            float: left;
        }
    }

    .clubOwnershipEmpty {
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }

        .clubOwnershipEmpty > h3 {
            font-size: 16px;
            font-weight: bold;
        }

        .clubOwnershipEmpty > h4 {
            color: var(--color-primary);
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .clubOwnershipEmpty > p {
            font-size: 12px;
            margin-bottom: 15px;
        }

        .clubOwnershipEmpty > .editUserClubBtn {
            width: 60%;
        }

    /* Club ownership/membership clubframes*/

    .editUserMemberFrame {
        background-color: #EDEDED;
        margin-top: 10px;
        margin-bottom: 20px;
        padding: 10px 10px 20px;
    }

    @media screen and (max-width: 440px) {
        /* Not supported in Firefox */
        div:has(.editUserMemberFrame) {
            padding-left: 1%;
            padding-right: 1%;
        }
    }

    .userEditClubFrameImage {
        padding-right: 5px;
    }

        .userEditClubFrameImage > div > img {
            text-align: center;
            margin-top: 25px;
            margin-left: auto;
            margin-right: auto;
        }

        .userEditClubFrameImage > div > a > img {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

    .userEditClubFrameText {
        padding-left: 5px;
        padding-right: 5px;
    }

        .userEditClubFrameText > h3 {
            margin-top: 25px;
            margin-bottom: 0;
        }

            .userEditClubFrameText > h3 > a {
                font-size: 16px;
                font-weight: bold;
                color: var(--color-primary);
            }

        .userEditClubFrameText > p {
            font-size: 12px;
        }

    .userEditClubFrameLink {
        padding-left: 5px;
        padding-top: 27px;
        text-align: right;
    }

        .userEditClubFrameLink > a {
            color: black;
            font-weight: bold;
        }

        .userEditClubFrameLink > div {
            margin-top: 30px;
            padding-bottom: 20px;
        }

    .userEditClubEditText {
        margin-top: 30px;
    }

        .userEditClubEditText > p {
            margin-bottom: 0;
            color: #AFAFAF;
        }

            .userEditClubEditText > p > a {
                color: black;
                font-weight: bold;
                text-decoration: none;
            }

    /*


    EditUser Modal Styling


*/

    .date-selector {
        background-color: #FFFFFF !important;
    }

    #editUserModal {
        width: 50%;
    }

    .editVitaContentContainer {
        background-color: #EDEDED;
    }

    .editVitaContentContainer {
        padding: 40px 40px 40px 40px;
        text-align: center;
    }


    @media screen and (max-width: 768px) {
        #editUserModal {
            width: 90%;
            background-color: #FFFFFF;
        }

        /*.modal {
        margin-left: 5%;
    }*/

        .editVitaContentContainer {
            padding: 15px 15px 15px 15px;
        }
    }

    .editVitaContentContainer > form > textarea {
        width: 100%;
    }

    .editUserVitaModalContainer {
        padding-bottom: 20px;
    }


    .edit-accomplishment-header {
        padding-top: 20px;
    }

    /*


    Create club modal


*/

    .btn-modal {
        outline: 0;
        margin: 13px 4px 0 0;
        padding: 0 1em;
        height: 35px;
        text-decoration: none !important;
        cursor: pointer;
        position: relative;
        text-align: center;
        display: inline-block;
        background-color: var(--color-primary);
        border: none;
        width: 85%;
    }

    a.btn-modal {
        padding-top: 8px;
        color: White;
    }

    @media screen and (max-width: 768px) {
        .btn-modal {
            width: 75%;
        }
    }

    .modal-dialog {
        width: 70%;
        background-color: #FFFFFF;
    }

    .modal-content {
        border-radius: 0;
        border: 0;
    }

    .modalInnerContainer {
        background-color: #EDEDED;
        padding: 15px 15px 15px 50px;
    }

    .createClubModalContainer {
        padding: 15px 15px 30px 15px;
    }

    .createClubInnerContainer {
        background-color: #EDEDED;
        padding: 15px 15px 0 50px;
    }

    .createClubContentContainer {
        padding: 15px 15% 15px 0
    }

    .modalHeader {
        color: var(--color-secondary);
        margin-top: 0;
        margin-bottom: 5px;
        font-size: 18px;
        font-weight: bold;
    }

    .modalHeaderLine {
        border: solid thin #E1E2E4;
        border-width: 1px;
        width: 25%;
        margin-bottom: 10px;
    }

    #imgCloseButton:hover {
        cursor: pointer;
    }

    .createClubInnerContainer > .row > .col-xs-2 {
        text-align: right;
    }

    .modal-label {
        color: var(--color-primary);
    }

    .createClubUploadBtn {
        width: 150px;
        color: #FFFFFF;
        background-color: var(--color-primary);
        margin-bottom: 10px;
    }

    #createClubUploadNote {
        font-size: 12px;
        color: #AFAFAF;
    }

    @media screen and (max-width: 350px) {
        #Purpose {
            height: 75px;
        }
    }

    .createClubUploadDisclaimer > label {
        font-size: 10px;
        color: #AFAFAF;
    }

    .createClubUploadAgreement > p {
        font-size: 10px;
        color: #AFAFAF;
    }

    input[type='checkbox'] {
        border: solid 1px var(--color-primary);
    }

    .modalDropdownBtnGroup {
        width: 100%;
    }

    .modalDropdownBtn {
        width: 100%;
        background-color: #FFFFFF;
    }

    .createClubDropdown {
        width: 100%;
    }

    .modalDropdownBtn > span {
        float: left;
    }

    /*.modalDropdownBtn > .caret {
    margin-top: 8px;
    float: right;
    color: var(--color-primary);
}

.caret {
    border-width: 8px;
}*/

    .scrollable-menu {
        height: auto;
        max-height: 200px;
        overflow-x: hidden;
    }

    .form-group > div > textarea {
        resize: vertical;
    }


    @media screen and (max-width: 768px) {
        .modal-dialog {
            width: 95%;
            background-color: #FFFFFF;
            margin: 15px auto;
        }

        .createClubInnerContainer {
            background-color: #EDEDED;
            padding: 15px 15px 0 15px;
        }

        .createClubContentContainer {
            padding: 15px 15px 15px 15px;
        }
    }

    .modal-footer-links {
        color: #AFAFAF;
    }

        .modal-footer-links:hover {
            cursor: pointer;
        }

    #userListDropDown_chosen {
        min-width: 200px;
    }
    /*


    Find club modal


*/

    .reset-search {
        cursor: pointer;
    }

    .clubFrameContainer > img {
        position: absolute;
        right: 25px;
    }

    .findClubInnerContainer {
        padding: 10px 10px 10px 10px;
    }

        .findClubInnerContainer > img {
            padding-top: 0;
        }

        .findClubInnerContainer > div > .col-xs-2 {
            text-align: right;
        }

    .modalFindClubShowmore {
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }

    .modalFindClubFooterBtn {
        border: solid 1px #AFAFAF;
        width: 100%;
        background-color: #FFFFFF;
        color: #7F8085;
    }

    .findClubDropDown {
        border: 1px solid var(--color-primary);
        /*-webkit-appearance: menulist;*/
    }

        .findClubDropDown[disabled=disabled] {
            border: 0;
            color: lightgrey;
            background: none;
        }

    /*
    Onboarding start a new club
*/
    .startNewClubFrameContainer {
        background-color: var(--color-primary);
        text-align: right;
        padding: 12.5%;
        display: block;
        /*margin-top: 20px;*/
    }

    a.startNewClubFrameContainer:hover, a.startNewClubFrameContainer:focus {
        color: white;
        text-decoration: none;
        /*margin-top: 20px;*/
    }

    .startNewClubFrameOuterContainer {
        margin-bottom: 20px;
    }

    .startNewClubFrameInnerContainer {
        padding: 12.5%;
        text-align: center;
        background-color: #01A04C;
        border: dashed 1px #4FBD83;
        color: white;
        /*padding:  0 10px 10px 10px;*/
    }

    .startNewClubFrameHeader > h3 {
        font-size: 16px;
    }

    .startNewClubFrameContent > p {
        font-size: 12px;
    }

        .startNewClubFrameContent > p > span {
            color: var(--color-primary);
        }

    .club-frame-categories {
        color: var(--color-primary);
    }

    .invertPlusIcon {
        content: url("../images/invertplus.png");
    }

    .startNewClubHelpTextFrameContainer {
        padding: 12.5%;
        height: 100%;
        vertical-align: middle;
        display: inline-block;
    }

    .startNewClubHelpTextFrameOuterContainer {
        margin-top: 20px;
        height: 100%;
    }

    .startNewClubHelpTextFrameInnerContainer {
        padding: 12.5%;
        text-align: center;
        height: 100%;
    }

    .startNewClubHelpTextFrameContent {
        vertical-align: middle;
        height: 100%;
        display: inline-block;
    }


    .startNewClubHelpTextFrameHeader > h3 {
        font-size: 16px;
    }

    .startNewClubHelpTextFrameContent > p {
        font-size: 12px;
    }

        .startNewClubHelpTextFrameContent > p > span {
            color: #3DC177;
        }

    .boardingNewClubFrameInnerContainer {
        padding: 10% 5%;
        text-align: left;
        height: 100%;
        width: 100%;
        background-color: #EDEDED;
    }

    .boardingNewClubFrameDescription h5 {
        font-size: 16px;
        font-weight: bold;
        color: var(--color-primary);
        margin-bottom: 2px;
    }

    .boardingNewClubFrameDescription p {
        font-size: 1em;
    }

    .boardingNewClubFrameline {
        border: solid thin #E1E2E4;
        border-width: 1px;
        margin-bottom: 10px;
    }

    /*

    Find club - club frame

*/

    .clubFrameContainer {
        background-color: #EDEDED;
        text-align: right;
        /*padding: 10px 10px 10px 10px;
    margin-top: 20px;*/
        border: dashed 1px var(--color-primary);
        height: 237px;
    }

    .clubFrameOuterContainer {
        margin-bottom: 20px;
        overflow: hidden;
    }

    .clubFrameInnerContainer {
        text-align: center;
        /*padding:  0 10px 10px 10px;*/
    }

    .clubFrameHeader > h3 {
        color: var(--color-primary);
        font-size: 16px;
    }

    .clubFrameContent > p {
        font-size: 12px;
    }

        .clubFrameContent > p > span {
            color: var(--color-primary);
        }

    .clubFrameInnerOverlayContainer {
        padding: 10px 10px 10px 10px;
    }

    .find-club-categories {
        margin-bottom: 20px;
    }

    /*

    test af overlay

*/

    #overlay {
        position: absolute;
        overflow: auto;
        top: 0;
        left: auto;
        background-color: rgba(0,0,0,.73);
        z-index: 1;
        vertical-align: middle;
        text-align: center;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        padding-top: 10%;
    }

    @media screen and (max-width: 967px) {
        #overlay {
            top: 0;
        }
    }

    #overlay > h3 {
        font-size: 16px;
    }

    #overlay > a {
        font-size: 14px;
        color: white;
    }

    .imgToggle.selected > img {
        content: url("../images/findClubIcon.png");
    }

    .error {
        border-color: #c60000;
    }

    input[type=checkbox] {
        height: 19px;
        width: 19px;
        vertical-align: middle;
        margin: 0 0.4em 0.4em 0;
        border-radius: 16%;
        background-color: #f4f4f4;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
        -webkit-transition: box-shadow 200ms;
        -moz-transition: box-shadow 200ms;
        -ms-transition: box-shadow 200ms;
        -o-transition: box-shadow 200ms;
        transition: box-shadow 200ms;
    }

        input[type=checkbox]:hover {
            border-color: #acacac;
        }

        input[type=checkbox]:active:not(:disabled) {
            border-color: #acacac;
        }

        input[type=checkbox]:focus {
            outline: none;
        }

        input[type=checkbox]:checked {
            border-color: #acacac;
            background-color: var(--color-primary);
            padding-left: 6px;
        }

            input[type=checkbox]:checked:before {
                content: '';
                display: block;
                width: 7px;
                height: 12px;
                border: solid #FFFFFF;
                border-width: 0 3px 3px 0;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
                margin-top: 1px;
            }



        input[type=checkbox].error {
            border-color: #c60000 !important;
        }

    select {
        box-sizing: border-box;
        border: 1px solid transparent;
        line-height: 1.42857143;
        font-size: 14px;
        border-radius: 4px;
        height: 34px;
        padding: 6px 30px 6px 12px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        background: url(../images/chevron-down-solid.png) no-repeat right center;
        vertical-align: middle;
    }

        select::-ms-expand {
            display: none;
        }

    .createClubImage {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-bottom: 1em;
    }

    .profileImage {
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }

    .profileImageSmall {
        width: 40px;
        height: 40px;
        margin-right: 0.5em;
        border-radius: 50%;
    }

    .paleGreenColor {
        color: #3DC177;
    }

    .notWisdomisedPost {
        content: url('../images/Bulb_small_black.svg');
    }

    .wisdomisedPost {
        content: url('../images/Bulb_small_green.svg');
        width: auto;
        height: 3%;
    }


    .notWisdomisedPost:after {
        content: url('../images/Bulb_small_black.svg');
    }

    .wisdomisedPost:after {
        content: url('../images/Bulb_small_green.svg');
        width: auto;
        height: 3%;
    }

    .mainFeedWisdomised > img {
        width: 25px;
        height: 25px;
    }

    .mainFeedCommentsWisdomise > img {
        width: 20px;
        height: 20px;
    }

    .wisdomisedComment {
        content: url("../images/Bulb_small_green.svg");
    }

    .notWisdomisedComment {
        content: url("../images/Bulb_small_black.svg");
    }

    .wisdomisedComment:after {
        content: url('../images/commentwisicon.png');
    }

    .notWisdomisedComment:after {
        content: url('../images/Bulb_small_black.svg');
        width: auto;
        height: 3%;
    }

    .mainFeedCommentsWisdomise > p {
        font-size: 12px;
        width: 140px;
    }

    .mainFeedCommentsWisdomise > span {
        background-color: var(--color-secondary);
        width: 19px;
        height: 19px;
        margin-left: 2px;
        padding: 3px 1px 0 0;
        border-radius: 50%;
        font-size: 10px;
        color: white;
        text-align: center;
        -moz-filter: brightness(80%);
        -webkit-filter: brightness(80%);
        filter: brightness(80%);
    }

    /*

        Edit club styling

    */

    #link-to-club-from-edit {
        margin-top: 20px;
        text-align: center;
    }

        #link-to-club-from-edit > a {
            color: var(--color-primary-complementary);
        }

    .userEditHeaderRow > .col-xs-12 {
        padding-left: 0;
    }



    .clubHeaderLine {
        border-bottom: solid var(--color-primary-complementary);
        width: 100%;
        border-width: 1px;
        margin-bottom: 0;
        margin-top: 10px;
    }

    .clubEditHeader {
        background-color: var(--color-primary);
        padding: 20px 10px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .clubEditHeader > div > img {
            margin-top: 20px;
        }

    .clubEditHeaderInput {
        width: 100%;
        border: 0;
        background-color: var(--color-primary);
    }

    .clubEditHeaderTextarea {
        width: 100%;
        border: 0;
        background-color: var(--color-primary);
        resize: none;
    }

    .clubEditTitle {
        position: absolute;
        top: 0;
        right: 5%;
    }

    .clubEditPurpose {
        position: absolute;
        top: 30%;
        right: 5%;
    }

    .clubEditImageIcon {
        position: absolute;
        top: 80%;
    }

    .clubEditPublicStatusContainer {
        background: white;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 20px 20px 20px 20px;
    }

    .clubEditPublicStatusHeaderAndCheckbox {
        display: flex;
        -o-justify-content: space-between;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    #clubPublicStatusCheckbox {
        margin-right: 0;
        margin-top: 19px;
    }

    #clubEditSave {
        width: 80px;
        color: white;
        background-color: #019545;
        /*position:absolute;
    left: 20px;
    top: 120px;*/
    }

    .clubEditHeaderContainer {
        position: relative;
    }

    @media screen and (max-width: 768px) {
        .clubEditImage > img {
            margin: 0 auto;
        }

        .clubEditImageIcon {
            left: 40%;
        }
    }

    @media screen and (max-width: 500px) {
        .clubEditImageIcon {
            left: 38%;
        }
    }

    #clubEditTerminateContainer {
        padding-top: 10px;
    }

    .clubEditPendingQueryContainer {
        background: white;
        padding: 20px;
        margin-top: 20px;
    }

    .clubEditPendingInnerContainer {
        margin-left: 0;
        margin-right: 0;
    }

    .editClubMemberFrameText > h3 > a {
        text-decoration: none;
        color: var(--color-primary);
        font-size: 16px;
    }

    .editClubMemberFrameText > h3 {
        margin-top: 13px;
        margin-bottom: 0;
    }

    .editClubMemberFrameText > h4 {
        font-size: 14px;
        color: var(--color-secondary);
        font-weight: bold;
        margin-top: 0;
    }

    .editClubMemberFrameText > p {
        font-size: 12px;
    }

    .editClubMemberFrame > div > div > div > img {
        margin-top: 15px;
    }

    .invitememberbutton {
        margin-left: 30px;
        color: #FFFFFF;
        background-color: var(--color-primary);
        width: 120px;
    }

    .clubEditUserButtons {
        margin-top: 35px;
    }

        .clubEditUserButtons > * {
            display: inline-block;
            width: 75px;
        }

    #clubAcceptUser {
        background-color: var(--color-primary);
        color: white;
    }

    #clubDeclineUser {
        background-color: #1b1b1b;
        color: white;
    }

    #terminateClubBtn {
        background-color: var(--color-primary);
        border: 0;
        float: left;
        text-decoration: underline;
        color: var(--color-secondary);
    }

    #formClubAbout {
        text-align: center;
    }

    .clubEditMembersContainer {
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: #FFFFFF;
        padding: 20px 20px 20px 20px;
    }

        .clubEditMembersContainer > .row {
            margin-left: 0;
            margin-right: 0;
        }

    .clubEditSubHeader {
        font-size: 14px;
        color: var(--color-primary);
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: bold;
    }

    #clubEditRemoverUserLink {
        margin-top: auto;
        text-decoration: none;
        color: black;
        font-weight: bold;
    }

    .clubMemberFrame > .col-xs-3 {
        text-align: right;
        padding-top: 40px;
    }

    .editClubCategories {
        background-color: #EDEDED;
        padding: 10px 20px 30px 20px;
    }

    .new-owner-label {
        margin-top: 8px;
    }


    /*

    Notification dropdown

*/

    #notificationDropdown {
        overflow-y: scroll;
    }

    .notificationDropDownText {
        padding: 10px 10px 10px 10px;
    }

    .notificationDropDownTextLink:hover {
        text-decoration: none;
    }

    .notificationDropDownText:hover {
        background-color: #EDEDED;
    }

    .notificationDropDownText > h3 {
        margin-top: 0;
        margin-bottom: 5px;
        /*color: #004B21;*/
        color: var(--color-secondary);
        font-size: 14px;
        font-weight: bold;
    }

    .notificationDropDownText > p {
        font-size: 12px;
        margin-bottom: 0;
        color: black;
        text-decoration: none;
    }

    .notificationDropDownLine {
        border-bottom: 1px solid #acacac;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
    }

    .newNotificationMarker {
        position: absolute;
        right: 5px;
        top: 5px;
    }

    .notificationContainer {
        position: relative;
    }

    .newNotificationMarker {
        font-size: 12px;
        color: var(--color-primary);
        font-weight: bold;
    }

    #postImageDataLinkRow {
        margin-top: 15px;
    }

    .createImagePostUploadBtn {
        width: 150px;
        color: #FFFFFF;
        background-color: var(--color-primary);
        margin-bottom: 10px;
    }

    .postTypeSelector, .postDocument {
        cursor: pointer;
    }



    .createPostImage {
        width: 80px;
        height: 80px;
        margin-bottom: 1em;
    }

    .acceptClubInvitationButton {
        color: #FFFFFF;
        background-color: var(--color-primary);
        margin-bottom: 10px;
    }


    .invite-skip-now {
        color: #AFAFAF;
        vertical-align: middle;
    }

        .invite-skip-now:hover {
            cursor: pointer;
        }


    .onBoardingInvitationFrameOuterContainer {
        margin-bottom: 20px;
        background-color: #EDEDED;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    }

    @media screen and (max-width: 464px ) {
        .onboarding-club-info {
            padding-left: 30px;
            padding-right: 30px;
        }
    }

    @media screen and (max-width: 767px ) {
        #onboarding-next-btn {
            float: none;
        }

        .onboarding-next-div {
            text-align: center;
        }
    }

    .boardingInviteFrameInnerContainer {
        padding: 15px;
    }

    .onboard-invite-footer {
        padding: 10px 15px;
        background-color: #E1E2E4;
    }

    .padding-left-7-5px {
        padding-left: 7.5px;
    }

    .padding-right-7-5px {
        padding-right: 7.5px;
    }

    .acceptClubInvitation > p {
        margin-top: 0;
        margin-bottom: 0;
        color: var(--color-primary);
    }

    .declineClubInvitation > p {
        margin-top: 0;
        margin-bottom: 0;
        color: var(--color-primary);
    }

    .acceptClubInvitation > p:hover {
        text-decoration: underline;
    }

    .declineClubInvitation > p:hover {
        text-decoration: underline;
    }

    /*


    About wisdome modal


*/

    .aboutModalContainer {
        padding: 10px 20px 20px 20px;
    }

    .info-modal-content h3 {
        font-size: 18px;
        color: var(--color-secondary);
        font-weight: bold;
    }


    .imgCloseButton {
        -ms-border-radius: 50%;
        border-radius: 50%;
        cursor: pointer;
        background-color: white;
        color: var(--color-primary);
    }

    .squareEditIcons {
        border-radius: 50%;
    }



.circleImageMaskLarge > img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

    .circleImageMaskBigger > img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
    }

.circleImageMask > img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.circleImageMaskSmall > img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.circleImageMaskXSmall > img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.circleImageMaskXXSmall > img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

    .circleImageMaskLarge > a > img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .circleImageMaskBigger > a > img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

    .circleImageMask > a > img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }

    .circleImageMaskSmall > a > img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .circleImageMaskXSmall > a > img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .circleImageMaskXXSmall > a > img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .commentHeaderName {
        margin-top: 0;
        margin-bottom: 0;
        color: var(--color-primary);
        font-size: 14px;
        font-weight: bold;
    }

    .margintop15 {
        margin-top: 15px;
    }


    /*

    My Clubs page styling

*/

    .MyClubsInnerContainer {
        background-color: #FFFFFF;
        padding: 20px 20px 20px 20px;
        margin-bottom: 20px;
    }

    /*

    Admin page styling


*/
    .admin-table-container {
        padding: 20px 20px 20px 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: #FFFFFF;
    }

    .admin-table-link > a {
        font-size: 12px;
        font-weight: bold;
    }

    .admin-table-link > span {
        font-size: 12px;
        font-weight: bold;
    }

    /*

    Modal contacts

*/

    .contacts-modal-header {
        margin-top: 0;
        font-size: 16px;
        font-weight: bold;
        color: var(--color-primary);
    }

        .contacts-modal-header:hover {
            cursor: pointer;
        }

    .contacts-modal-button {
        margin-top: 10px;
        width: 50px;
        background-color: var(--color-primary);
        color: #FFFFFF;
    }

    .invite-success > p {
        color: var(--color-primary);
        font-weight: bold;
        margin-left: 10px;
    }


    /* Login with facebook and google buttons */

    .loginBtn {
        box-sizing: border-box;
        position: relative;
        /* width: 13em;  - apply for fixed size */
        margin: 0.6em 0.2em 0.2em 0.2em;
        padding: 0 15px 0 46px;
        border: none;
        text-align: left;
        line-height: 40px;
        white-space: nowrap;
        border-radius: 0.2em;
        font-size: 16px;
        color: #FFF;
        width: 100%;
        text-align: center;
    }

        .loginBtn:before {
            content: "";
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
            width: 34px;
            height: 100%;
        }

        .loginBtn:focus {
            outline: none;
        }

        .loginBtn:active {
            box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
        }


    /* Facebook */
    .loginBtn--Facebook {
        background-color: #4C69BA;
        background-image: linear-gradient(#4C69BA, #3B55A0);
        /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
        text-shadow: 0 -1px 0 #354C8C;
    }

        .loginBtn--Facebook:before {
            border-right: #364e92 1px solid;
            background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
        }

        .loginBtn--Facebook:hover,
        .loginBtn--Facebook:focus {
            background-color: #5B7BD5;
            background-image: linear-gradient(#5B7BD5, #4864B1);
        }


    /* Google */
    .loginBtn--Google {
        /*font-family: "Roboto", Roboto, arial, sans-serif;*/
        background: #DD4B39;
    }

        .loginBtn--Google:before {
            border-right: #BB3F30 1px solid;
            background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 9px no-repeat;
        }

        .loginBtn--Google:hover,
        .loginBtn--Google:focus {
            background: #E74B37;
        }

    /*

    Social media(facebook, google) login disclaimer

*/

    .external-login-disclaimer {
        margin-bottom: 30px;
        margin-top: 10px;
        text-align: center;
    }

        .external-login-disclaimer > p {
            color: #AFAFAF;
        }


    /*

    Terms and conditions page

*/

    .terms-container > p {
        white-space: pre-wrap;
    }


    /*

    Club documents styling


*/

    .club-document-table-container {
        background-color: white;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    .club-doc-icon {
        height: 16px;
        width: 16px;
    }

    .club-doc-font {
        font-size: 14px;
        color: var(--color-primary);
    }

    .club-table-body {
        border: none;
    }

    #club-documents-table > thead > tr > th {
        background-color: #E1E2E4;
        font-size: 14px;
        color: var(--color-secondary);
    }

    #club-documents-table_paginate {
        font-size: 14px;
    }

    .club-document-header {
        color: var(--color-secondary);
        padding-top: 10px;
        padding-left: 20px;
        margin-bottom: 20px;
    }

        .club-document-header > h1 {
            font-size: 18px;
            font-weight: bold;
        }

    #club-documents-table.dataTable.no-footer {
        border: none;
    }

    #club-documents-table.dataTable thead th {
        border: none;
    }

    .club-doc-link {
        color: var(--color-primary);
    }

        .club-doc-link:hover {
            color: var(--color-secondary);
        }

    .club-document-table-container .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: none;
        background-color: #0F5931 !important;
        border: none;
        /*change the hover text color*/
    }

    .club-document-table-container .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: none;
        background-color: var(--color-primary) !important;
        color: white !important;
        border: none;
        /*change the hover text color*/
    }

    .contentLine {
        position: relative;
        margin-bottom: 30px;
    }

        .contentLine::after {
            content: "";
            height: 2px;
            width: 120px;
            background-color: #E1E2E4;
            position: absolute;
            left: 0;
            top: 110%;
        }

    .box {
        background: white;
        border-radius: 5px;
    }

    .box-header {
        padding: 1em;
        display: flex;
        flex-direction: column; /* TODO: MEDIA QUERY*/
        position: relative;
    }

    table.fixed-header {
        /*width: 400px;*/
        table-layout: fixed;
        border-collapse: collapse;
    }

        table.fixed-header tbody {
            display: block;
            width: 100%;
            overflow: auto;
            height: 200px;
        }

        table.fixed-header thead tr {
            display: block;
        }

        table.fixed-header thead {
            background: black;
            color: #fff;
        }

    .afterPlusButton {
        height: 40px;
        line-height: 40px;
        display: inline-block;
        position: relative;
        display: flex;
        -o-justify-content: flex-end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .afterPlusButtonBtn {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: var(--color-secondary);
        text-align: center;
        color: white;
        font-size: xx-large;
        margin-left: 1rem;
    }

    .afterPlusButton:hover {
        cursor: pointer;
    }

    .not-clickable:hover {
        background-color: inherit !important;
        font-weight: inherit !important;
        color: inherit !important;
        cursor: inherit !important;
    }

    .clickable:hover {
        cursor: pointer;
    }

    .flex {
        display: flex;
    }

    .flex-column {
        flex-direction: column;
        display: flex;
    }

        .flex-column > * {
            margin-top: 1rem;
        }

    .flex-even {
        display: flex;
    }

        .flex-even > * {
            -webkit-flex: 1;
            -o-flex: 1;
            flex: 1;
        }

    .align-items-center {
        -o-align-items: center;
        -webkit-align-items: center;
        align-items: center;
    }

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

    .ml-1em {
        margin-left: 1em;
    }

    .bg-white {
        background-color: white;
    }

    .bg-green {
        background-color: #38b34b;
    }

    .bg-blue {
        background-color: #00adef;
    }

    .bg-purple {
        background-color: #652d92;
    }

    .bg-red {
        background-color: #ed1b24;
    }

    .bg-orange {
        background-color: #ff6501;
    }

    .bg-yellow {
        background-color: #fff100;
    }

    .bg-black {
        background-color: #000000;
    }

    .bg-grey {
        background-color: #808185;
    }

    .btn:hover {
        /* A little lighter*/
        /*box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.5);*/
        -moz-filter: brightness(110%);
        -webkit-filter: brightness(110%);
        filter: brightness(110%);
    }

    .tooltip-inner {
        max-width: 200px;
        width: 200px;
    }

    @media screen and (max-width: 576px) {
        .sm-column {
            flex-direction: column;
        }

        .flex.align-items-center.sm-column > * {
            margin-top: 1rem;
        }
    }

    .commentInFeed{
        font-size: 0.8em;
        box-sizing: border-box;
        padding: 10px 10px 15px 0;
    }

    /* THEMING */
    /* THEMING */
    /* THEMING */
    /* THEMING */
    /* THEMING */
    .bg-primary,
    .club-btn {
        background-color: var(--color-primary) !important;
        color: var(--color-primary-complementary) !important;
    }


        .bg-primary.fill path {
            fill: var(--color-primary-complementary) !important;
        }


    .bg-secondary,
    input.club-checkbox:checked {
        background-color: var(--color-secondary) !important;
        color: var(--color-secondary-complementary) !important;
    }

        .bg-secondary .fill path, .bg-secondary.fill path {
            fill: var(--color-secondary-complementary) !important;
        }

    .color-primary {
        color: var(--color-primary) !important;
    }

    .color-primary-complementary {
        color: var(--color-primary-complementary) !important;
    }

    .color-secondary {
        color: var(--color-secondary) !important;
    }

    .color-secondary-complementary {
        color: var(--color-secondary-complementary) !important;
    }

    .color-ternary {
        color: var(--color-ternary) !important;
    }



    input.club-checkbox,
    select.clubDropdown,
    select.new-owner-dropdown {
        border: solid 1px var(--color-secondary) !important;
    }

    /*input.club-checkbox:checked {
    background-color: var(--color-secondary);
}*/

    .bootstrap-datetimepicker-widget table td.active {
        background-color: var(--color-secondary) !important;
        color: var(--color-secondary-complementary) !important;
    }

    .bootstrap-datetimepicker-widget span {
        color: var(--color-secondary);
    }



    /* Morten's restyling of the navbar'*/
    .navProfilePictureContainer {
        padding-top: 3px;
        padding-left: 5px;
    }

    .navbar-icon a:hover, .navbar-icon a:focus {
        text-decoration: none;
    }

    .navbar-icon a > div, .navbar-icon > div.dropdown-toggle > div {
        color: var(--color-primary-complementary);
        margin-left: 1em;
    }

    .nav-admin-icon {
        width: 45px;
        height: 45px;
    }

    .navbar.navbar-default {
        padding: 0.5em 0;
    }

    div.navbar-icon {
        padding: 0.3em 0;
    }

    @media screen and (min-width: 768px) {
        .navbar-icon .navbar-icon-text {
            display: block;
        }

        .navbar-icon > .flex {
            flex-direction: column;
        }

        .navbar-icon a > div, .navbar-icon > div.dropdown-toggle > div {
            margin-left: 0;
        }

        ul.nav.navbar-nav {
            display: flex;
            -o-align-items: center;
            -webkit-align-items: center;
            align-items: center;
        }
    }
    /* Addded the new video styling and other things needed for it to work*/
    .uploadVideoBox{
        display:flex;
        .col
        {
    width: 50%;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    position:relative;
        }
        }
.textInput{
    display: flex;
    flex-direction: column;
    row-gap: 1em;
}
.saveVideo {
    margin-left: auto;
    display: block;
}
#VideoPreview {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#VideoExisting {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}
#cancelVid {
    position: absolute;
    right: 5%;
    top: 2.5%;
    background: unset;
    border-radius: 100%;
    width: 10%;
    border: unset;
    svg{
            color: white;
           width: 100%
       }
}
.textShow {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.eventHeader{
                    font-size: 1.3em;
                    color: black;
                }
        
        button{
              width: fit-content;
          }
p {
    color: black;
    font-size: 0.8em;
}
.ownerDisplay{
    margin-top: 20px;
    display: flex;
    padding: 0px 30px 0px 30px;
    .ownerName{
                  margin-left: 5%;
                  font-weight:600;
              }
    svg{
           margin-left: unset;
       }
}
.editClubVideo{
    position: absolute;
    right: 0;
    padding-right: 2em;
    a{
         position: absolute;
         width: 100%;
         height: 100%;
         opacity: 0;
     }
}
.VideoButton {
    height: 100%;
    width: 100%;
    position: relative;
    label{
                 border-radius: unset;
                     width: 100%;
                     height:100%;
                     display: flex;
                     justify-content: center;
                     row-gap: 0.5em;
                     align-items: center;
                     flex-direction: column;
                     font-size: 1.2em;
                     box-sizing: border-box;
                     padding: 1em;
                     .plus{
                              width: 1.5em;
                              height: 1.5em;
                              border-radius: 100%;
                              border: 2px solid white;
                          }
                 }
        }