/* CMNTY Platform stylesheet, based on HTML5 Boilerplate*/
.ajax-input-tag {
    background:#000;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled],
.pages .pager li,
.btn,
.btn-group > .btn,
.btn-group > .btn:first-child,
.btn-group > .btn:last-child,
.webshop .shop-cart .shop-cart-overview table .close,
.webshop .shop-cart .shop-place-order a,
.custom-next-btn,
.btn-group.open .btn.dropdown-toggle {
    background: var(--color-button-secondary);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled],
.postcomment-action .btn:not(.btn-cancel),
#pagination .active,
#pagination li a:hover {
    background-color: var(--color-button-primary);
}

#pagination .active,
#pagination li a:hover {
    border: 1px solid var(--color-button-primary);
}

.btn-primary {
    background-color: var(--color-button-primary);
    background-image: none;
}

.btn.btn-primary:focus {
    outline: 2px auto -webkit-focus-ring-color !important;
}

#archive li .read-more:hover,
.widget-carousel #carousel #carousel-controls li a:hover,
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled],
.weblog .box_content article .blog-categories li a:hover,
.postcomment-action .btn:hover,
.browse > .btn:hover,
.postcomment-extras > .btn-group > a.btn:hover,
.forum-post-footer > .btn-group > .btn:hover,
.webshop .shop-cart .shop-place-order a:hover,
.profile-actions > .btn-group > .btn:hover,
.uploadsmodule .btn.ajax-cancel-upload:hover,
.btn-group > .btn:first-child:hover,
.btn-group > .btn:last-child:hover,
.pages .pager li:hover,
.btn:not(.btn-primary):hover,
.btn-group.open .btn.dropdown-toggle:hover {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .25) 100%);
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .25) 100%);
}

.btn-group.open .btn.dropdown-toggle {
    box-shadow: none;
}

/* HTML5 element display */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block
}

audio[controls], canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/* Base */

html {
    font-size: calc(var(--font-size) - 5px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* below for sticky footer */
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.231;
    overflow-x: hidden;
    /* below for sticky footer */
    margin: 0 auto;
    height: 100%;
}

button, input, select, textarea {
    color: #222
}

textarea {
    resize: none
}

::-moz-selection {
    background: var(--color-primary);
    color: #fff;
    text-shadow: none;
}

::selection {
    background: var(--color-primary);
    color: #fff;
    text-shadow: none;
}

:focus {
    outline: 0;
}

/* JWPlayer */
.jwplayer { -webkit-overflow-scrolling: auto; }

/* Links */

a {
    color: #777;
}

input:focus {
    outline: 0!important;
}

a:focus {
    outline: -webkit-focus-ring-color auto 1px;
}

a:hover {
    color: #444
}

a:hover, a:active {
    outline: 0
}

/* Typography */

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: bold
}

blockquote {
    color: #777;
    font-style: italic;
    margin-left: 1em;
}

dfn {
    font-style: italic
}

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

ins {
    background: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background: #ff0;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

pre, code, kbd, samp {
    font-family: monospace;
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

q {
    quotes: none
}

q:before, q:after {
    content: "";
    content: none;
}

small {
    font-size: 85%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

h1, h2, h3, h4, h5, h6, p, pre, form, ul, ol, dl {
    margin: 0
}

p {
    line-height: 1.5em
}

/* Lists */

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

}

dd {
    margin: 0
}

nav ul, nav ol {
    list-style: none;
    margin: 0;
    padding: 0;

}

/* Redactor content */

    .redactor-content,
    .redactor-content p,
    .forum-post-content,
    .forum-post-content p {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    .redactor-content ol, .forum-post-content ol,
    .redactor-content ul, .forum-post-content ul {
        margin: 10px 0px 10px 20px;
        padding: 0;
    }

    .redactor-content ul li, .forum-post-content ul li {
        list-style-type: disc;
        list-style-position: outside;
    }

    .redactor-content ol li, .forum-post-content ol li {
        list-style-type: decimal;
        list-style-position: outside;
    }

    .redactor-content.custom-page ul li, .redactor-content.custom-page ol li {
        list-style-type: none;
        list-style-position: outside;
    }

    .redactor-content p img {
        max-width: 100%;
    }


/* Embedded content */

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}

svg:not(:root) {
    overflow: hidden
}

/* Figures */

figure {
    margin: 0
}

figure img {
    width: 100%
}

/* Forms */

form {
    margin: 0;
    position: relative;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

legend {
    border: 0;
    padding: 0;
}

label {
    cursor: pointer
}

button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle;
}

button, input {
    line-height: normal;
    *overflow: visible;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box
}

input[type="search"] {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea,
.comment-field {
    overflow: auto;
    vertical-align: top;
}

input:valid, textarea:valid {

}

input:invalid, textarea:invalid {
    background-color: #f0dddd
}

.error, .required, input.error {
    color: #CC0000
}

span.error {
    font-size: 1em;
    font-style: italic;
}

/* Tables */

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* CMNTY Platform (c) 2012 CMNTY Corporation */

/* font declarations */

/*serif titles*/
aside ul.posts li h3, li.header h3, table.stats tbody td, .serif {
    font-family: var(--font-family), serif;;
}

/*sans-serif paragraphs*/
body {
    font-family: var(--font-family), sans-serif;
}

/*sans-serif titles*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family), sans-serif;
    word-wrap:break-word;
}

h1 {
    font-size: 2em;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #fff;
    line-height: 1em;
    word-wrap: break-word;
}

.fancybox-inner h1 {
    text-shadow: none;
}

/* main styles */
/* main styles: size settings */
#header_wrapper {
    width: 980px;
    margin: 0 auto;
}

#wrapper {
    width: 960px;
    padding: 20px 10px;
}

body > div#root {
    /* below for sticky footer */
    height: auto;
    min-height: 100%;
}

div#root {
    /* below for sticky footer */
    height: 100%;
}

#spacer {
    /* below for sticky footer */
    height: 20px;
}

ul#usercontrols, ul#langcontrols, #header_wrapper aside ul.usernav, #header_wrapper aside, #header_wrapper {
    z-index: 2 !important
}

.dropdown-toggle {
    z-index: auto;
}

body #root > header {
    float: left;
    width: 100%;
    border-top: 5px solid #005481;
    border-bottom: none;
    display: block;
}


#header_wrapper {
    background: #3290c2;
    position: relative;
    height: auto /* clearfix */
}

#header_wrapper #header_main {
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: var(--image-logo-position);
}

#header_wrapper aside {
    float: right;
    color: #dadada;
    position: absolute;
    z-index: 1005;
    right: 0;
    width: auto;
}

#header_wrapper aside > ul {
    list-style: none;
    float: right;
    margin-top: 0;
    background-color: #236D9C;
    border-radius: 0 0 4px 4px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

#header_wrapper aside > ul li {
    float: left;
    padding: 0 1em;
    border-left: 1px solid #999;
}

#header_wrapper aside aside > ul li a {
    display: block;
    margin: 0 0 2px 0;
    padding: 3px 0;
    color: #999;
    text-decoration: none;
}

#header_wrapper aside ul.usernav li.user {
    position: relative;
}

#header_wrapper aside ul.usernav li.user i {
    margin-top: -2px;
}

ul.usernav li.user figure {
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    margin-right: .5em;
}

#header_wrapper aside ul.usernav li:first-child {
    border-left: none
}

#header_wrapper aside ul.headernav li:first-child {
    border-left: none
}

#header_wrapper aside > ul > li a {
    text-transform: uppercase;
    font-size: .8em;
    line-height: 2em;
    color: #fff;
    display: block;
    margin: 0;
    padding: 3px 0;
    text-decoration: none;
}

html.no-touch #header_wrapper aside > ul li a:hover {
    color: #dadada;
}

body #root > header h1 {
    float: left;
    margin: 5px 0 0 20px;
    width: 240px; /*24.489795918367%;*/
}

body #root > header h1 a {
    background: url("/front-end/pf2/images/logos/cmntyplatform-logo-white.png") top left no-repeat transparent;
    color: #fff;
    display: block;
    font-size: 2em;
    font-weight: normal;
    height: 100px;
    line-height: 100px;
    text-decoration: none;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    width: 100%;
}

#nav_container {
    margin: 0 auto;
    position: relative;
    width: 980px;
}

body #root > header nav ul {
    float: left
}

body #root > header nav ul li {
    display: inline;
    float: left;
}

body #root > header nav ul li a {
    position: relative;
    display: block;
    float: left;
    margin-right: 10px;
    padding: 3px 10px;
    color: #fff;
    font-size: 1.2em;
    text-decoration: none;
    background: none;
    border-radius: 4px 4px 0 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-tap-highlight-color: #999;
}

body #root > header nav ul li.current a {
    color: #444;
    background-color: #fafafa;
    text-shadow: none;
}

/* common elements in CMNTY Platform */
.badge-lvl {
    margin-bottom:5px;
}

span.badge {
    background: none repeat scroll 0 0 #CC0000;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 0px 0px 2px rgba(0,0,0,.5);
    color: #fff;
    font-size: 0.8em;
    padding: 2px 5px;
    position: absolute;
    right: -6px;
    top: -6px;
    z-index: 1;
}

.label {
    background-color: #3290c2;
    border-radius: var(--main-border-radius);
    color: #fff !important;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    padding: 2px 6px;
    text-transform: uppercase;
    text-shadow: none;
    vertical-align: middle;
    white-space: nowrap;
}

.label.positive {
    background-color: #468847;
    color: white !important;
    text-shadow: none;
}

.label.negative {
    background-color: #B94A48;
    color: white !important;
    text-shadow: none;
}

.label.neutral {
    background-color: #999;
    color: white !important;
    text-shadow: none;
}

/* search */

.widget-searchbox input.span2 {
    width: 79%;
    padding: 5px 2%;
    box-shadow: none;
}

.widget-searchbox button {
    padding: 4px 5%;
    float: right;
}

.widget-searchbox .input-append .btn {
    margin-left: -18px;
}

#searchbox {
    margin-top: 20px;
    width: 100%;
    float: right;
    background: #EDEDED;
    border-radius: 4px;
}

.searchbox {
    border: 0;
    height: 18px;
    padding: 3px;
    margin-left: 1.818181818181818%;
    width: 80.6818181818182%;
    color: #999;
    z-index: 1;
    float: left; /*voor IE8*/
    background: none repeat scroll 0 0 #EDEDED;
}

input.searchbox:focus {
    color: #444
}

.searchbox_submit {
    background-image: url('/front-end/pf2/images/icons/dark/magnifying_glass.png');
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    height: 24px;
    width: 10.909090909090909%;
    float: right;
    padding: 0;
    min-width: 0;
}

.widget-search {
    width: 100%;
    padding-bottom: 15px;
}

.widget-search .input-append, .widget-search  .input-prepend {
    width: 100%;
}

.widget-search #searchbox {
    margin-top: 0;
    width: 100%;
    float: left;
    background-color: #dadada;
    border-radius: 4px;
}

.widget-search #searchbox input {
    border: 0;
    background-color: transparent;
    float: left;
}

.widget-community-recent-badges ul li section {
    width:65%;
    float:right;
}


.widget-community-recent-badges ul li a {
    text-transform: uppercase;
    color: rgb(49, 146, 208);
    word-wrap: break-word;
    text-shadow: 1px 1px 0px rgb(255, 255, 255);
    width:auto;
    border-radius:0;
}


/*notifition-center dropdown*/

ul.usernav li.notification_center {
    position: relative
}

ul.usernav li.notification_center a span.badge {
    font-size: 1em;
    padding: 3px 5px;
    top: 2px;
    left: auto;
    right:-8px;
}

ul.usernav li ul#notification-list {
    display: none;
    position: absolute;
    top: 26px;
    width: 200px;
    z-index: 1005;
    list-style: none;
    background: none repeat scroll 0 0 #FAFAFA;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
    right: 0;
}

ul.usernav li ul#notification-list li {
    width: 100%;
    padding: 0;
    border: none;
    z-index: 1005;
    border-bottom: 1px solid #f5f5f5;
}

ul.usernav li ul#notification-list li:nth-child(even) {
    background-color: #f5f5f5
}

ul.usernav li ul#notification-list li a {
    display: block;
    padding: 5px;
    color: #444;
    font-size: 0.85em;
    text-transform: none;
    line-height: 1.5em;
    border-radius: 0;
    margin: 0;
    width: 95%;
    float: left;
}

ul.usernav li ul#notification-list li.unread a {
    border-right: 3px solid #CC0000;
    padding-right: 2px;
}

ul.usernav li ul#notification-list li.readmore {
    border-bottom: none
}

ul.usernav li ul#notification-list li.readmore a {
    color: #777;
    background: #f5f5f5;
    text-align: center;
}

ul.usernav li ul#notification-list li a figure {
    float: left;
    margin-right: 4px;
    width: 24px;
}

ul.usernav li ul#notification-list li a div {
    margin-top: -3px;
    float: left;
    width: 160px;
}

ul.usernav li ul#notification-list li.readmore a div {
    width: auto
}

ul.usernav li ul#notification-list li a div span.timeago {
    font-size: .8em;
    color: #777;
    white-space: nowrap;
}

html.no-touch ul.usernav li ul#notification-list li a:hover {
    color: #fff;
    background: #333;
    text-shadow: none;
}

/* Notification-center page */
.notification_center {
    .bg-dark {
        background: #4F4F4F;
    }
    .text-dark {
        color: #4F4F4F;
    }
}
.notification_center section.notification-group {
    float: left;
    margin-bottom: 2em;
    width: 100%;
}

.notification_center section.notification-group h2 {
    border-bottom: 1px solid #0075B3;
    color: #0075B3;
    margin-bottom: 0.5em;
    padding-bottom: 0.25em;
    font-weight: normal;
}
.notification_center ul {
    list-style: none;
}

.notification_center ul li {
    float: left;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
}

.notification_center ul li:nth-child(even) {
    background-color: #f5f5f5;
}

.notification_center ul li.unread {
    border-left: 3px solid #CC0000;
}

.notification_center ul li a {
    color: #4F4F4F;
    text-decoration: none;
    padding: 5px 0.71428571428571%;
    line-height: 1.5em;
    border-radius: 0;
    margin: 0;
    width: 98.5714285714286%;
    float: left;
}

html.no-touch .notification_center ul li a:hover {
    color: #444;
    background: #dadada;
}

.notification_center li a div em {
    color: var(--color-primary) !important;
}

.notification_center li a div span.timeago {
    font-size: .8em;
    color: #4F4F4F;
    white-space: nowrap;
}

.notification_center ul li a figure {
    float: left;
    height: 32px;
    margin: 0 1em 0 0;
    width: 32px;
}

.notification_center ul li a figure img {
    height: 100%;
}

.notification_center .quote {
    background: transparent;
    margin-left: 0;
    padding: 0;
    margin-bottom: 0;
}
.notification_center {
    .mt-20 {
        margin-top: 20px;
    }
    .display-grid {
        display: grid;
    }
    /*.high-contrast-text {*/
    /*    color: #333;*/
    /*}*/
}

/* mark all notifications as read */
#notification_clear {
    background: #eee;
    color: #696969;
    padding: 0.5% 2% 2%;

    border: 1px dotted #555;

    border-top-style:dotted;
    border-right-style:none;
    border-bottom-style:dotted;
    border-left-style:none;

    margin-bottom: 1%;
}

#notification_clear .btn {
    float: right;
}

#notification_clear span {
    position: relative;
    top: 4px;
}

/*usercontrols + languagecontrols*/

#header_wrapper aside ul.usernav li.user #usercontrols, #header_wrapper aside ul.usernav li.lswitch #langcontrols {
    display: none;
    background-color: #333;
    position: absolute;
    top: 27px;
    z-index: 1005;
    list-style: none;
    box-shadow: 1px 1px 2px #444;
    right: 0;
    min-width: 152px;
}

input[type="checkbox"] {
    width:16px;
    height:16px;
}

/* chrome + safari fix*/
.chrome #header_wrapper aside ul.usernav li.user #usercontrols, .chrome #header_wrapper aside ul.usernav li.lswitch #langcontrols, .chrome ul.usernav li ul#notification-list, .safari #header_wrapper aside ul.usernav li.user #usercontrols, .safari #header_wrapper aside ul.usernav li.lswitch #langcontrols, .safari ul.usernav li ul#notification-list {
    top: 26px;
}

#header_wrapper aside ul.usernav li.lswitch #langcontrols {
    left: 0;
    min-width: 0;
}

#header_wrapper aside ul.usernav li.lswitch {
    position: relative;
}

#header_wrapper aside ul.usernav li.user #usercontrols li, #header_wrapper aside ul.usernav li.lswitch #langcontrols li {
    width: 100%;
    padding: 0;
    border: none;
    z-index: 1005;
}

#header_wrapper aside ul.usernav li.user #usercontrols a, #header_wrapper aside ul.usernav li.lswitch #langcontrols a {
    display: block;
    padding:  5px 10%;
    width: 80%;
    color: #dadada;
    text-shadow: 1px 1px 0 #444;
    text-transform: uppercase;
    font-size: 0.75em;
}

#header_wrapper aside ul.usernav li.lswitch #langcontrols li {
    width: 36px;
}

#header_wrapper aside ul.usernav li.lswitch #langcontrols a {
    width: 86%;
    text-align: center;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}


html.no-touch #header_wrapper aside ul.usernav li.user #usercontrols a:hover, html.no-touch #header_wrapper aside ul.usernav li.lswitch #langcontrols a:hover {
    color: #fff;
    background: black;
}

.stroketop {
    border-top: 1px solid #999 !important;
}

/* Content */

.right, .pull-right {
    float: right !important;
}

.left, .pull-left {
    float: left !important;
}

body {
    color: #444;
}

body, #root {
    background: url("/front-end/pf2/images/backgrounds/back_fabric_ececec.jpg") repeat top left #ECECEC;
}

div#innerbody {
    float: left;
    width: 100%;
}

html, body {
    min-height: 100%;
}

#wrapper {
    margin: 0 auto;
    position: relative;
    background: #fafafa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 0 !important /* replaced for datepicker 10 !important*/;
    border-radius: 0 0 4px 4px;

}


#main {
    position: relative;
    width: 700px;
    float: left;
}


#main.no-sidebar {
    width: 100%;
    float: left;
}

.fancybox-opened div#main {
    width: auto;
}

.fancybox-opened div#main .box {
    margin-bottom: 0;
}


/********** fancybox iPad fix ********/

.no-touch .fancybox-nav:hover span {
    visibility: visible;
}

.touch .fancybox-nav span {
    visibility: visible;
}


/********** fancybox video ********/

.safari .fancybox-video-container {
    left: 50% !important;
    transform: translateX(-50%);
}

.safari .fancybox-video-container,
.safari .fancybox-video-container .fancybox-inner {
    width: auto !important;
}

#fancybox-videocontainer {
    max-width: 100%;
    width: 600px;
    height: auto;
    position: relative;
}

.fancybox-videoplayer {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fancybox-videoplayer > p {
    text-align: center;
}

.fancybox-videoplayer iframe,
.fancybox-videoplayer object,
.fancybox-videoplayer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* main box */


div#main .box {
    margin-bottom: 60px;
    clear: both;
}
div#main .box.notification {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    padding: 10px;
    border-radius: 4px;
}

div#main .box.notification > h3 {
    border-bottom: none;
}

div#main .box > h3, .uploadsmodule h3, .pointsform h3, .badgeform h3  {
    border-bottom: 3px solid #0075B3;
    color: #0075B3;
    font-weight: 700;
    padding: 0 7% 0 0;
    text-shadow: 1px 1px 0 #fff;
    text-transform: uppercase;
    font-size: 1.95rem;
    position: relative;
    clear: both;
    margin-bottom: 0.5em;
}

.clean div#main .box > h3 {
    padding: 0;
}

.box .box_content {
    width: 100%;
}
.box_content p,
.custom-element p,
.cookie-modal-body p {
    margin-bottom: 8px;
}
.box_content figure {
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    display: block;
    float: left;
    margin: 0 1em 0 0;
    text-align: center;
    color: #999;
    overflow: hidden;
}

figure.clean {
    border: none;
    box-shadow: none;
    display: block;
    float: left;
    margin: 0;
    overflow: hidden;
}

figure.video {

}

figure.video.video-no-thumb {
    width: 25%;

}

figure.video.video-no-thumb .video {
    height: 120px;
}

figure.video > span {
    float: left;
    font-size: 1.2rem;
    padding: 2px 0;
    text-align: center;
    width: 100%;
}

.box .box_content figure.placeholder {
    width: 95.8579881656805%;
    margin: 0;
}

.box .box_content figure img {
    float: left;
}

.box .box_content .avatar img {
    border-radius: 50%;
}

div#main .box .box_content figure img.video-play-button {
    width: 61px;
    height: 52px;
}

figure.right {
    float: right;
    margin: 0 0 1em 1em;
    clear: right;
    width: 25%;
}

figure.avatar {
    width: 24px;
    height: 24px;
}

section.comment figure.avatar {
    margin-bottom: 0;
}

.box .box_content figure.miniavatar {
    width: 36px;
    border: none;
    box-shadow: none;
    margin: 0;
}

.box .box_content figure.small {
    width: 25%
}
.box .box_content figure.medium {
    width: 50%
}
.box .box_content figure.large {
    width: 75%
}
div#main .box .box_content figure.full {
    width: 100%
}

figure.video-processing {
    background: rgb(243,243,243); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI3JSIgc3RvcC1jb2xvcj0iI2Y1ZjVmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOWU5ZTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(243,243,243,1) 0%, rgba(245,245,245,1) 27%, rgba(233,233,233,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,243,243,1)), color-stop(27%,rgba(245,245,245,1)), color-stop(100%,rgba(233,233,233,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(245,245,245,1) 27%,rgba(233,233,233,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(245,245,245,1) 27%,rgba(233,233,233,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(245,245,245,1) 27%,rgba(233,233,233,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(243,243,243,1) 0%,rgba(245,245,245,1) 27%,rgba(233,233,233,1) 100%); /* W3C */
    color: #777;
    text-align: center;
    height: 120px;
    position: relative;

    width: 25%;
}



.box .box_content figure .video{
    position: relative;
    display: block;
    width: 100%;
    float: left;
}

.box .box_content figure .video .video-play-button-container {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.box .box_content figure img.video-play-button {
    width: 62px;
    height: 52px;
}

.video-processing .vertical-text-align {
    position: absolute;
    height: 120px;
    width: 100%;
    display: table;
}

.video-processing .vertical-text-align p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 1.1rem;
    padding: 0 5%;
    width: 90%;
}

.video-processing .vertical-text-align a {
    text-decoration: none;
    display: block;
    width: 90%;

}

.typeahead.dropdown-menu {
    overflow:hidden;
}

/* uploading & uploads */

.upload_time {
    float:right;
        font-size: 1.1rem;
}

.uploaded_attachments li {
    margin-bottom: 4px;
    font-size: 1.04rem;
    margin-top: 2px;
}

.uploaded_attachments li a {
    color: #777;
}

.uploaded_attachments li > i {
    margin-top: -2px;
}

ul.attachments {
    height: auto !important;
}

.no-geolocation li.location.get-location {
    display: none;
}

.main-image {
    max-height: 150px;
    width: 25%;
}


.visual-attachments li {
    list-style-type: none !important;
}

.visual-attachments li.image.odd {
    margin-left: 0;
    clear: left;
}

.visual-attachments figure {
    width: 100%;
    margin: 0;
}

body .visual-attachments figure img {
    height: 100% !important;
}

.visual-attachments .file {
    border: 1px solid #dadada;
    box-shadow: none;
    box-sizing: border-box;
    clear: none;
    display: inline-flex;
    float: left;
    height: 100px;
    margin-bottom: 10px;
    width: calc(50% - 5px);
}

.visual-attachments .file:not(.odd) {
    margin-left: 10px;
}

.visual-attachments .file .file-link {
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    padding: 10px;
    width: 100%;
}

.visual-attachments .file .file-icon-image {
    color: #bbb;
    font-size: 30px;
    margin-top: auto;
}

.visual-attachments .file .file-name {
    margin-top: auto;
}

.visual-attachments .file .file-link:hover {
    background: #ededed;
    text-decoration: none;
}

.visual-attachments .file .file-link:hover .file-icon-image {
    color: #999;
}

.visual-attachments .video {
    height: 100px;
    margin: 0;
    padding: 0;
}

.visual-attachments .video .video-download-link {
    float: right;
}

.video-download-link > i {
    opacity: .5;
}

.video-download-link:hover > i {
    opacity: .8;
}

.visual-attachments li.image {
    float: left;
    width: 47.237569060773%;
    margin-left: 5.52486187845304%;
    margin-bottom: 10px;
}



.visual-attachments .file a, .visual-attachments .video a  {
    color: #444;
    font-size: 1rem;
    text-decoration: none;
    word-break: break-all;
    word-wrap: break-word;
}

.visual-attachments .video .fancybox-picture {
    height: 100%;
}

.visual-attachments .file a:hover, .visual-attachments .video a:hover {
    background: #fff;
    text-decoration: underline;
}

.visual-attachments .file a i {
    margin-top: 0;
    margin-right: 0;
}

.visual-attachments .file a i.icon-download-alt {
    float: right;
    opacity: 0.5;
}

.visual-attachments .file a:hover i.icon-download-alt {
    opacity: 0.8;
}

/* fix voor kleinere letters in attachment */


.visual-attachments {
    float: right;
    clear: right;
    width: 25%;
    list-style: none;
    margin: 0 0 0 10px !important;
    font-size: 1.2rem;
}

.journal-article .visual-attachments a, .comment .visual-attachments a{
    font-size: .9rem;
}


.journal-article .visual-attachments a i, .comment .visual-attachments a i {
    margin-top: -2px;
}


.journal-article .visual-attachments a.video-download-link i, .comment .visual-attachments a.video-download-link i {
    margin-top: 0px;
}



.uploadsmodule,
.pointsform,
.badgeform {
    background: url("/front-end/pf2/images/backgrounds/back_gradient.png") repeat-x scroll 0 0 transparent;
    width: 480px;
    height: 480px;
    padding: 10px;
}

.feedback .uploadsmodule {
    background: none;
    width: auto;
    height: auto;
    padding: 10px;
}

.uploadsmodule div.box_content,
.pointsform div.box_content,
.badgeform div.box_content {
    border-top: 1px solid #fff;
    padding: 0.5em 0 0;
}

.uploadsmodule .container,
.pointsform .container,
.badgeform .container {
    clear: both;
    margin-top: .5em;
}

.uploadsmodule .container {
    display: flex;
    margin-right: -10px;
    max-height: 325px;
    overflow: auto;
}

.uploadsmodule .container .uploads_container {
    display: flex;
    flex-wrap: wrap;
}

.uploadsmodule .max_files {
    margin-top: 7px;
}

.uploadsmodule .box_content > .upload-progress {
    display: none;
}

.uploadsmodule .upload-feedback {
    background: #fff;
    border-radius: 8px;
    bottom: 40px;
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, .2);
    float: left !important;
    left: 50%;
    padding: 6px 12px;
    position: absolute;
    transform: translateX(-50%);
    width: auto !important;
}

.uploadsmodule a {
    text-decoration: none;
}

.uploadsmodule small {
    clear: both;
}

ul.uploads_container {
    list-style: none;
}

.uploadsmodule ul.uploads_container {
    margin-left: -8px;
    margin-bottom: 30px;
    float: left;
}

.uploadsmodule ul.uploads_container li {
    float: left;
    margin: 0 0 13px 13px
}

.uploadsmodule ul.uploads_container li figure {
    width: 100px;
    height: 124px;
    margin: 0;
}

.uploadsmodule ul.uploads_container .upload-video-crop{
    width: 100%;
    height: 105px;
    overflow: hidden;
}

.delete_upload {
    display: block;
    height: 20px;
    width: 20px;
    float: left;
    margin-left: 20px;
}
.delete_upload:hover {
    opacity: .5;
}


.move_upload_left {
    display: block;
    height: 20px;
    width: 20px;
    float: left;
}
.move_upload_left:hover {
    opacity: .5;
}

.move_upload_right {
    display: block;
    height: 20px;
    width: 20px;
    float: left;
}
.move_upload_right:hover {
    opacity: .5;
}

.aviary_upload {
    background: url('/front-end/pf2/images/icons/dark/paint_brush.png') no-repeat center left transparent;
    display: block;
    height: 20px;
    width: 20px;
    float: left;
    text-indent: -9999px;
}
.aviary_upload:hover {
    background: url('/front-end/pf2/images/icons/light/paint_brush.png') no-repeat center left transparent
}

.uploadsmodule footer {
    clear: both;
    bottom: 2%;
    position: absolute;
    width: 96%;
}

/*Login & registration styling   ========================================================================== */

section.login, section.register {
    width: 100%;
    clear: right;
}

.login, .register {
    width: 48.016701461378%;
}

.login.regular-form, .register.regular-form {
    border-right: 1px solid #C3D8EB;
    display: inline-block;
    padding-right: 9px;
}

.box_content.nosocial .login.regular-form, .box_content.nosocial .register.regular-form {
    border-right: none;
    margin-left: 25%;
}

.box_content.nosocial .register.regular-form {
    margin-left: 10%;
    width: 80%;
}


.login.regular-form dl dt label, .register dl dt label, .register dl dd label {
    font-size: 1em;
    display: inline;
}

.login.regular-form a.forgot_password, .register dl dt > a{
    float: right;
    font-size: 0.8em;
    margin-top: 2px;
    text-decoration: none;
    width: auto;
}

.login.regular-form a.forgot_password:hover, .login .auth-activation a:hover {
    text-decoration: underline;
}

.login .auth-activation  {
    text-align: center;
    margin-top: 2em;
    font-size: 0.8em;
}

.login .auth-activation a {
    text-decoration: none;
}

body.clean div#main .box.login {
    margin-bottom: 0;
}

.login.regular-form form button {
    width: 100%;
}



.login .auth-register {
    text-align: center;
    margin-top: .5em;
    padding-top: .5em;
    border-top: 1px solid #c6bbb6;
}

.authentication input[type="text"], .authentication input[type="password"], .authentication input[type="email"], .authentication textarea,
.feedback input[type="text"], .feedback input[type="password"], .feedback input[type="email"], .feedback textarea{
    width: 93.9130434782609%;
}

.authentication textarea  {
    height: auto;
}

.authentication.forgot_password input[type="email"] {
    width: 97.0833333333333%;
}

.authentication input.disabled {
    color: #BBB !important;
}

.authentication textarea {
    font-size: 1.2em;
}

div#main .authentication .form, #main .authentication .terms{
    width: 100%;
}

.social {
    padding: 20px 0 0 0;
    float: right;
    display: inline-block;
    overflow: hidden;
    _overflow: visible; /* for IE */
    _zoom: 1; /* for IE */
}

.social:after {
    clear: both;
}


.social ul {
    list-style: none;
    width: 100%;
}

.social a {
    -moz-transition: all 0.2s ease 0s;
    border: medium none;
    border-radius: var(--button-border-radius);
    color: #fff;
    float: left;
    font-size: 1.2em;
    margin: 0 0 15px 1%;
    padding: 6px 1% 6px 20px;
    text-decoration: none;
    width: 88%;

}

.clean .social ul li a {
    width: 88%;
}

.register .terms, .register .login {
    margin-top: 20px;
    width: 57.222222222222%;
    float: right;
}

section.form {
    width: 40%;
    float: left;
}

.register .terms section {
    height: 244px;
    overflow: auto;
    background: #f5f5f5;
    padding: 10px 1.388888888889%;
    margin-bottom: 1em;
    font-size: .8em;

}


.register input[type="text"], .register input[type="password"], .register input[type="email"], .register textarea {
    width: 90%;
}

.register select.dob-month {
    width: 38%;
    margin-right: 3%;
}

.register select.dob-day {
    width: 24%;
    margin-right: 3%;
}

.register select.dob-year {
    width: 28%;
}

.register select {
    width: 92%;
}

div#main .register input[type="submit"], div#main .register input[type="button"] {
    float: left;
    margin-top: 1em;
}

div#main .register input[type="submit"]:hover {
    color: #fff;
}

.register .buttons {
    clear: both;
    width: 100%;
}

.auth-usergroups dd {
    clear: left;
    float: left;
    margin-bottom: 0;
    width: 5%;
}

.auth-daylightsaving label {
    float: left;
}

.auth-daylightsaving input {
    margin-left: .5em;
}

.register .login.social {
    padding: 0;
}

.register .login.social a {
    width: 17%;	margin-left: 5%;
}

.register .login.social a:first-child
{
    margin-left: 0;
}

.register .login.social ul li a {
    font-size: .9em;
    text-align: center;
}

section.welcome .box_content > p {
    font-size: 1.5em;
    text-transform: capitalize;
}

.welcome .box_content .postbody {
    width: 100%;
}

.is-required-message {
    float: left;
    width: 100%;
}

.password-container {
    position: relative;
}

.user-password-form .password-container {
    display: inline-block;
}

.user-password-form .password-minimums {
    padding-left: 15px;
}

.show-password-minimums {
    align-items: center;
    background-color: rgba(255, 255, 255, .5);
    color: #8A8A8A;
    cursor: pointer;
    display: flex;
    font-size: 1.6rem;
    font-weight: bold;
    height: 38px;
    justify-content: center;
    position: absolute;
    right: 1px;
    top: 1px;
    width: 38px;
}

.register .show-password-minimums {
    right: calc(10% - 14px + 1px);
}

.show-password-minimums:hover {
    background: #f5f5f5;
    color: #333;
}


/*clean login   ========================================================================== */


body.clean {
    background: url('/front-end/pf2/images/backgrounds/pattern_1.jpg') repeat left top transparent
}

body.clean div#innerbody, body.clean div#innerbodyback {
    background: none;
}

body.clean #wrapper {
    background: rgb(255,255,255);
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95);
    border-radius: 5px;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.25);
    margin: 30px auto 0;
    padding: 10px;
    width: 480px;
}

body.clean div#main {
    float: none;
    width: 100%;
}

body.clean header .logo h1 a {
    background: url("/front-end/pf2/images/logos/cmntyplatform-logo.png") no-repeat scroll center center transparent;
    display: block;
    height: 72px;
    margin: 0.8em 20%;
    text-indent: -9999px;
    width: 60%;
}

/*posts & comments   ========================================================================== */

section.postbody {
    width: 74.305555555555556%;
    float: left;
    word-wrap: break-word;
}

.comments {
    float: left;
    width: 100%;/* journal comments fix*/
}

.comments section.postbody {
    width: 100%;
}

.comments section.postbody .redactor_box {
    margin-left:40px;
}

.comments section.postbody .redactor_editor p {
    margin-bottom: 0px !important;
}

article#new aside ul {
    float: left;
    list-style: none outside none;
    margin-top: 1em;
    width: 100%;
}

article#new aside ul li, .postcomment aside ul li {
    padding-left: 15.189873417722%;
    margin: 0 0 5px 0;
    background-color: #fff;
    border-radius: 4px 4px 4px 4px;
    word-wrap: break-word;
}

article#new aside ul li a:hover, .postcomment aside ul li a:hover {
    color: #777
}

/* new comment okt. 2012 */

.comments > ul {
    list-style: none;
}

.comments li.comment {
    float: left;
    width: 98.611111111111%;
    padding: 20px 0.694444444444%;
    background: #F5F5F5;
    list-style: none;
    border-bottom: 1px solid #dadada;
}

.comments li.comment.odd {
    background: #fff;
}

.comments li.comment .avatar {
    margin: 0px 10px 5px 0px;
    z-index: 2;
    position: relative;
}

.comments li.comment .postdate {
    text-transform: lowercase;
}

.comments li.comment .commentbody, .comments li.comment .commentbody p  {
    word-wrap: break-word;
}

article.forum-post-content {
    padding-bottom: 2em;
}

.cntrl_forum article.forum-post-content {
    padding-bottom: 2em;
    word-wrap:break-word;
}

form.ajax-comment-form.ajax-comment-edit {
    display:inline-block;
    width:85%;
    margin-bottom:10px;
}

.comments li.comment .comment-footer {
    margin-top: 0;
    padding-bottom: 0;
}

.comments li.comment .commentbody figure.small {
    margin: 0 0 10px 10px;
}

.comments li.comment .comment-footer .btn {
    float: right;
}

.uploadbutton {
    float: left;
}

.upload-feedback {
    margin: 5px 0;
}

.post-source, .post-source a {
    color: #aaa;
    text-decoration: none;
    font-size: 1rem;
}

.post-source a:hover {
    color: #999;
}

.post-source-desktop {
    display: none;
}

.comments-count {
    color: #777;
    font-weight: normal;
    margin-bottom: 0.5em;
}

/*hide comment controls on desktop devices*/

html.no-touch .comment .comment-options {
    opacity: 0;
    -webkit-transition: .4s all ease;
    -moz-transition: .4s all ease;
    -ms-transition: .4s all ease;
    -o-transition: .4s all ease;
    transition: .4s all ease;
}

.comment-options.btn-group.right.open {
    z-index:9999;
}

html.no-touch .comment:hover .comment-options {
    opacity: 1;
}

/* hide uploadbuttons on iOS devices */
.appleios li.file-upload, .iphone li.doodle, .ipod li.doodle {
    display: none;
}

a.anchor {
    display: none;
}


/*    POSTCOMMENT*/

.postcomment {
    padding: 0.28571428571429% /*2px*/; width: 99.4285714285714% /*696px*/; border-radius: 2px;
    float: left;
    background: #F5F5F5;
    z-index: 0;
}

.postcomment-sort-ASC {
    margin-top: 20px;
}

.postcomment-sort-DESC, .weblog .postcomment {
    margin-bottom: 20px
}

.postcomment.focused, #new.focused {
    box-shadow: 0 0 5px var(--color-primary);
}

.postcomment .postcomment-body {
    width: 100%;
    float: left;
    position: relative;
    background: #fff;
    margin-bottom: 10px;
}

.postcomment .postcomment-body figure.miniavatar {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 2px 0 0 2px;
}

.postcomment-body figure.miniavatar {
    background: #f5f5f5;
}

.postcomment .postcomment-body textarea,
.postcomment .postcomment-body .comment-field {
    padding: 0;
    box-shadow: none;
    margin-left: 45px;
    width: 91.6781609195402%;
    float: left;
    min-height: 36px;
    color: #555;
    font-size: 1.2rem;
    background: none;
    border: none;
    background-color: #FFF;
    width: 91.5%;
}


.smiley-container img, .comments li.comment .commentbody p img {
    margin: 0 2px -6px;
}

.comment-container, .comment-container-edit {
    font-weight: normal;
    border-radius: 0px 0px 0px 0px;
    display: inline-block;
    line-height: 2rem;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    font-family: var(--font-family), sans-serif;
    vertical-align: top;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    box-shadow: none;
    color: #555555;
    font-size: 1.2rem;
    overflow-y: hidden;
    resize: none;
    float: right;
    padding: 0.2% 0 0.2% 2%;
    width: 92.3%;

    -webkit-box-shadow: inset 1px 1px 2px -1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:    inset 1px 1px 2px -1px rgba(0, 0, 0, 0.5);
    -o-box-shadow:      inset 1px 1px 2px -1px rgba(0, 0, 0, 0.5);
    box-shadow:         inset  1px 1px 2px -1px rgba(0, 0, 0, 0.5);

    -webkit-transition: all linear .2s, box-shadow linear .2s;
    -moz-transition:    all linear .2s, box-shadow linear .2s;
    -o-transition:      all linear .2s, box-shadow linear .2s;
    transition:         all linear .2s, box-shadow linear .2s;
}

.comment-container-edit {
    width: 98.3%;
}

.edit-comment, .weblog .edit-comment {
    margin-bottom: 0;
    border-bottom: 0;
}

.edit-comment .postcomment-body {
    width: 98.3%;
}

.comments .edit-comment .postbody {
    width: 100%;
}

.edit-comment .postcomment-extras {
    margin-left: 0 !important;
}

div[data-placeholder]:not(:focus):not([data-div-placeholder-content]):before {
    content: attr(data-placeholder);
    color: #b3b3b3;
}

.comment-container, .comment-container-edit {
    min-height: 37px;
}

.cntrl_journal .comment-container {
    min-height: 33px;
}

.comment-container:hover, .comment-container-edit:hover {
    cursor: text;
}

.internet_explorer .postcomment .postcomment-body textarea,
.internet_explorer .postcomment .postcomment-body .comment-field {
    min-height: 35px;
}


.edit-comment .postcomment-body textarea {
    margin-left: 0;
    width: 99.416909620991%;
    float: left;
    background: #fff;
}

.postcomment .postcomment-body textarea:focus,
.postcomment .postcomment-body .comment-field:focus {
    box-shadow: none
}

.postcomment .postcomment-body .error {
    margin-left: 5.74713%
}

.postcomment .postcomment-extras, #new .postcomment-extras   {
    margin-left: 5.74712643678161%;
    width: auto;
    float: left;
    background: transparent;
    border-radius: 2px;
}

#new .postcomment-extras {
    margin-left: 9.9112426035503%;
    width: 90%;
}

#new .postcomment-options {
    float: left;
}



.postcomment .postcomment-extras .uploaded_attachments, #new .postcomment-extras .uploaded_attachments {
    list-style: none;
    padding: 0 2px;
}

.postcomment .postcomment-extras .uploaded_attachments li, #new .postcomment-extras .uploaded_attachments li {
    font-size: 1.04rem;
    padding: 4px 2px;
}

.postcomment .postcomment-options {
    float: left;
    width: 38%;
    margin-left: 1.436781609195%;
    position: relative;

}

.postcomment .postcomment-options label {
    font-size: 1.1rem;
    display: inline;
}

.postcomment .postcomment-options small {
    display: none
}

.postcomment .postcomment-options:hover small {
    background: #fff;
    border: 1px solid #DADADA;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
    display: block;
    padding: 5px 7px;
    position: absolute;
    z-index: 999;
}

.postcomment-action {
    width: auto;
    float: right;
}

.postcomment-action .btn {
    margin-left: 2px;
}

a.actionbutton, .confirmbox .buttons input[type="button"]
{
    float: left;
    height: 26px;
    padding: 0 8px;
    background-color: #F5F5F5; color: #777;
    font-weight: bold;
    text-decoration: none;
    border-style: solid;
    border-width: 1px;
    border-color: #CCCCCC #CCCCCC #BBBBBB;
    border-radius: 2px;
    line-height: 2.6rem;
    background-repeat: no-repeat;
    background-position: center left;
    cursor: pointer;
}
a.actionbutton:active {
    border: 1px solid #444
}
a.actionbutton:hover, .confirmbox .buttons input[type="button"]:hover {
    background-color: #F8F8F8; color: #333;
    text-decoration: none !important;
    border: 1px solid #C6C6C6;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
div#main input[type="submit"].comment, a.actionbutton.comment {
    float: right;
    padding-left: 24px;
    background-image: url('/front-end/pf2/images/icons/dark/speech_bubble_2.png');
}
div#main input[type="submit"].new, a.actionbutton.new {
    padding-left: 24px;
    background-image: url('/front-end/pf2/images/icons/dark/plus.png');
}

div#main input[type="submit"].upload, a.actionbutton.upload {
    padding-left: 24px;
    background-image: url('/front-end/pf2/images/icons/dark/plus.png');
}

div#main input[type="submit"].doodle, a.actionbutton.doodle {
    padding-left: 24px;
    background-image: url('/front-end/pf2/images/icons/dark/paint_brush.png');
}

.box .box_content article aside {
    float: right;
    width: 22.916666666666667%;
    margin-left: 2.777777777777778%;
}

.postcomment aside {
    float: right;
    width: 25%;
}

.postcomment aside ul {
    float: left;
    list-style: none outside none;
    margin-top: 0;
    width: 100%;
}

/* input styling */

input.inline {
    background: #fff;
    border: none;
}

input.h1 {
    font-weight: 700;
    font-size: 2em;
    line-height: 1em;
    text-shadow: 1px 1px 0 #fff;
    text-transform: uppercase;
    width: 100%;
}

textarea.inline {
    width: 100%;
    background: #fff;
    border: none;
}

input.p {
    width: 100%
}

input.valid {
    background: #CCEDDB
}

input.invalid {
    background: #FFCCD5
}

/*buttons & icons */

div.tooltip {
    z-index: 1000000 !important;
}

.tooltip {
    font-size:1em;
}

.cntrl_forum span.absolute {
    margin-top:45px;
}

.cntrl_forum section.topics-overview span.absolute {
    margin-top: 35px;
}

span.top-right-corner {
    position: absolute;
    right: 0px;
    top: 3px;
    -webkit-border-radius: 2px 0px 0px 2px;
    -moz-border-radius: 2px 0px 0px 2px;
    border-radius: 2px 0px 0px 2px;
    z-index: 10;
}

span.in-overview {
    position: relative;
    top: auto;
    float: right;
    z-index: 10;
}

span.absolute {
    position: absolute;
    z-index: 10;
}

span.for-questionnaires {
    top: 29px;
}

span.separated {
    margin-right: 5px;
}

span.future-info {
    color: #41B300;
    font-style: italic;
}

.inlineblock {
    display: inline-block;
}

#sidebar span.isnew {
    /*used in sidebar*/
    font-size: 0.5em;
    left: -3px;
    position: absolute;
    top: 1px;
}

#sidebar div.custom-element img {
    height: auto;
    width: 100% !important;
}

span.count {
    font-size: .8em;
    float: right;
    padding-right: .5em;
    line-height: 1.5em;
}

/* list items */

.bodytext ol, .bodytext ul {
    list-style-position: inside
}

/*Community page */

ul.userprofiles {
    list-style: none;
    float: left;
    margin-top: 10px;
    width: 100%;
}

section.community {
    clear: left;
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: -20px;
}

.usergroup_controls {
    text-align:right;
}

.group-overview-parent {
    background-color:#f3f3f3;
    border-bottom:1px solid #eee;
}

.group-overview-child {
    background-color:#fbfbfb;
    border-bottom:1px dotted #eee;
    margin-left:10px;
}

section.community > header {
    border-bottom: 1px solid #0075B3;
    width: 100%;
    float: left;
    margin-top: .5em;
    margin-bottom: 0.3em;
}

section.community h3 {
    font-size: 1.5em;
    border-bottom: 1px solid #0075B3;
    color: #0075B3;
    text-transform: capitalize;
    margin-top: .5em;
}

section.community header h3 {
    border-bottom: none;
    float: left;
    margin-top: 0;
}

section.community  header .btn-group {
    float: right
}

ul.breadcrumb {
}

.userprofiles li.profile {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    color: #333;
    float: left;
    margin-bottom: 20px;
    margin-left: 2.857142857143%;
    padding: 6px 0.857142857143%;
    position: relative;
    text-align: center;
    width: 29.714285714286%;
    text-align: left;
}

.no-boxshadow .userprofiles li.profile {
    border: 1px solid #dadada;
    margin-left: 2.42857142857155%;
}

.no-boxshadow .userprofiles li.profile:hover {
    border: 1px solid #0075B3
}

.userprofiles li.profile a {
    text-decoration: none
}

.userprofiles li.profile.profile-picture-view {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    color: #999;
    float: left;
    margin-bottom: 20px;
    margin-left: 2.857142857143%;
    padding: 6px 0.857142857143%;
    position: relative;
    text-align: center;
    width: 10.122448979592%;
    text-align: left;
}

.no-boxshadow .userprofiles li.profile.profile-picture-view {
    border: 1px solid #dadada;
    margin-left: 2%;
}


.userprofiles li.profile.profile-picture-view figure {
    width: 100%;
    height: auto;
}

.userprofiles li.profile.profile-picture-view h3.username {
    flex-shrink: 0;
    float: left;
    font-weight: normal;
    margin-top: 0.5em;
    text-align: center;
    text-transform: capitalize;
    width: 100%;
    font-size: 1.2rem;
}

.userprofiles li.profile.profile-picture-view a:hover h3.username {
    color: var(--color-primary);
}

.userprofiles li.profile:first-child, .userprofiles li.profile.first-in-row {
    margin-left: 0;
    clear: left;
}

.userprofiles li.profile figure {
    float: left;
    height: 80px;
    margin: 0 6px 0 0;
    max-width: 80px;
    width: 38.461538461538%;
}

.userprofiles li.profile.profile-picture-view figure {
    max-width: 100%;
}

.userprofiles li.profile.profile-picture-view a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.userprofiles li.profile a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.userprofiles li.profile figure {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.userprofiles li.profile div {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.no-sidebar .userprofiles li.profile figure, .no-sidebar .postcomment .postcomment-body figure.miniavatar {
    height:auto;
}



.userprofiles li.profile div {
    float: right;
    width: 55.653846%;
}

.userprofiles li.profile h3 {
    color: #555;
    font-size: 1.06667em;
    line-height: 1.06667em;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    word-wrap: break-word;
    border-bottom: none;
}

.userprofiles li.profile a:hover h3 {
    color: var(--color-primary);
    text-shadow: 1px 1px 0 #fff;
}

.userprofiles li.profile dl {
    font-size: .8em
}

.userprofiles li.profile dt {
    color: #333
}

.userprofiles li.profile dd {
    margin: 0 0 0.2em;
    color: #333;
}

.userprofiles li.profile a.button {
    font-size: .8em;
    float: right;
    clear: both;
}

.userprofiles li.profile a.btn {

}

span.showonhover {
    display: none
}

.userprofiles li.profile a.btn:hover span.showonhover {
    display: inline
}

.userprofiles li.profile .profile-login-as {
    position: absolute;
    right: 0;
    bottom: 0;
    float: none;
    width: 0;
    height: 0;
    border-bottom: 36px solid #ffe0e0;
    border-left: 36px solid transparent;
}

.userprofiles li.profile-picture-view .profile-login-as {
    position: absolute;
    left: 0;
    top: 0;
    float: none;
    width: 0;
    height: 0;
    border-top: 36px solid #ffe0e0;
    border-right: 36px solid transparent;
    border-left: none;
    border-bottom: none;
}

.userprofiles li.profile a:hover .profile-login-as {
    border-bottom: 36px solid #cc0000
}

.userprofiles li.profile .profile-login-as i {
    bottom: -32px;
    position: absolute;
    right: 2px;
}

.userprofiles li.profile-picture-view .profile-login-as i {
    bottom: auto;
    right: auto;
    left: 5px;
    position: absolute;
    top: -33px;
}

.userprofiles li.profile-picture-view a:hover .profile-login-as {
    border-top: 36px solid #cc0000;
    border-bottom: none;
}

.profile-login-as:focus {
    outline: 1px auto -webkit-focus-ring-color;
}

.top-border {
    border-top:1px solid #000;
}

div.admincontrols {
    clear: both;
    float: right;
    font-size: 1.2rem;
    font-weight: normal;
    list-style: none outside none;
    margin: 0;
    text-transform: lowercase;
}

.admincontrols, a#settings {
    z-index: 1000;
}

article header {
    margin-bottom: .5em
}

.forum article header {
    position: relative;
    z-index: 2;
}

.box span.author {
    color: inherit;

}
.box span.author a {
    color: inherit
}
a.button, span.button {
    padding: 0 5px;
    font-size: 1em;
    text-decoration: none;
    background: none repeat scroll 0 0 #DDDDDD;
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
}
a.button:hover, span.button:hover {
    background-color: #555; color: #fff;
    text-decoration: none !important;
}
a.button.delete:hover {
    color: #fff;
    background: red
}

.points-remove-popup textarea {
    width:96%;
}

section.box > .admincontrols {
    float: right;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
}

section.box > .admincontrols .dropdown {
    z-index: 103;
}

section.box > .admincontrols > a {
    display: block;
    width: 24px; height: 20px;
    padding: 0;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;

}

.admincontrols > .btn {
    float: left;
}

.admincontrols > .btn i {
    margin: 2px;
}

.admincontrols .btn#settings {
    padding: 0;
}
.admincontrols .btn#settings:hover {
}


.controls {
    position: absolute; display: none; float: right;
    top: 20px; right: -50px;
    margin: 0; padding: 0; padding: 4px;
    font-size: 1.2rem; font-weight: normal;
    text-transform: lowercase;
    z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */;;
}
.controls .button {
    color: #fff;
    background: none
}
.rectangle {
    position: relative; float: left;
    padding: 4px;
    color: #fff;
    font-size: 1.2rem;
    text-align: right;
    background: #7F9DB9;
    line-height: 1.8rem;
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.55);
    -khtml-box-shadow: 0px 0px 2px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.55);
    z-index: 100; /* the stack order: foreground */;;
    -webkit-border-radius: 2px 0 0 2px;
    -moz-border-radius: 2px 0 0 2px;
    border-radius: 2px 0 0 2px;
}
.triangle-r {
    position: relative; float: right;
    top: 12px; right: 15px;
    width: 0; height: 0;
    border-color: transparent transparent transparent #7D90A3;
    border-style: solid;
    border-width: 15px;
    z-index: -1; /* displayed under bubble */
}

.triangle-l {
    position: relative; float: right;
    top: 11px; left: -10px;
    width: 0; height: 0;
    border-color: transparent #7D90A3 transparent transparent ;
    border-style: solid;
    border-width: 15px;
    z-index: -1; /* displayed under bubble */
}
.author {
    color: var(--color-primary);
    text-decoration: none;
    word-wrap: break-word;
}
.author:hover {
    color: inherit
}

.challenge-idea-title {
    color: #333 !important;
}

.idea .author {
    display:inline-block;
    color: #333 !important;
}

.nice-date {
    width: 60px;
    background: #fcfcfc;
    background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
    background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
    float: left;
}

#new .nice-date {
    width: 8.87573964497041%;
}

.nice-date .date-day {
    color: #666;
    display: block;
    font-size: 48px;
    line-height: 48px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.1);
}

@media(max-width: 1200px) {
    .nice-date .date-day {
        font-size: 3.8rem;
    }
}

.nice-date .date-sub {
    font-size: 1.2rem;
    background: #d10000;
    background: linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
    font-weight: bold; color: #fff; text-transform: uppercase;
    display: block;
    border-top: 1px solid #a13838;
    text-align: center;
    padding: 2px 0;
    border-radius: 0 0 4px 4px;
    margin-bottom: 0;
}

.nice-date .date-year {
    display: block;
    font-size: 1rem;
    font-weight: 100;
    margin-top: -5px;
}


/*notifications / flashmessages / confirmations
========================================================================== */

div.confirmbox {
    width: 220px;
    position: relative;
}

div.confirmbox h1 {
    width: 100%;
    background: var(--color-primary);
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 1.5em;
    text-align: center;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius:  4px 4px 0 0;
    border-radius:  4px 4px 0 0;
    font-weight: 700;
    padding: 2px 0;
    text-transform: uppercase;
}
div.confirmbox p {
    width: 90%;
    padding: 5%;
}

div.confirmbox .buttons {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius:  0 0 4px 4px;
    border-radius:  0 0 4px 4px;
    padding: 5%;
    text-align: right;
    width: 90%;
}

.confirmbox .buttons input[type="button"] {
    display: inline-block;
    float: none;
    margin-left: 1em;
}

#fancyConfirm_cancel {
    margin-right: 15px;
}

/* realtime notification */

.realtime-notification {
    position: fixed;
    left: 50px;
    bottom: 20px;
    z-index:9999;
}

/* usergroups list view */

.group-visibility {
    float: left;
    margin: 0.5em 0;
    width: 100%;
    position: relative;
}

.group-visibility ul {
    float: left;
    list-style: none;
}

.group-visibility li, .group-visibility p  {
    float: left;
    margin: 0 2px 2px 0;
    padding: 2px 4px;
    font-size: 1rem;
    color: #999;
}

.group-visibility > ul > ul {
}

.group-visibility > ul li {
    background: #e5e5e5;
}

.group-visibility > ul ul li {
    background: #f5f5f5;
}

.group-visibility p {
    display: none;
    color: inherit;
    margin: 0 !important; /* ignore any <p> styles surrounding the usergroups block */
    line-height: 1.2rem;
    position: absolute;
    bottom: -16px;
    z-index: 1001;
}

.group-visibility:hover p {
    display: block;
    background: #999;
    color: #fff;
}

/*status messages   ========================================================================== */



#statusmessage {
    background: #4596bf;
    border: 0;
    color: #fff;
    display: block;
    float: left;
    font-size: 12px;
    height: auto;
    line-height: 1.3;
    margin: -1px 0 0;
    padding: 0;
    position: relative;
    text-align: center;
    transform: none;
    width: 100%;
    z-index: 9;
}

#statusmessage section {
    background: none;
    border: 0;
    border-bottom: 1px dashed #fff;
    border-top: 1px dashed #fff;
    color: #fff;
    display: block;
    margin-bottom: 2px;
    margin-top: 2px;

}

#statusmessage section div {
    background: none;
    border: 0;
    color: #fff;
    display: block;
    margin: 0 auto;
    padding: 5px 0;
    width: 100%;
}

#statusmessage section div a {
    color: #fff;
    font-size: .8em;
    margin-left: 3px;
    margin-top: -3px;
    padding: 2px 5px;
}

#statusmessage section div a:hover {
    color: #fff;
}

.alert-info {

}

/*pagination   ========================================================================== */

.pages .pager {
    margin-right: 5px;
}

.pages .pager li {
    display: block;
    float: left;
    padding: 4px 6px;
}

.pages .pager li a {
    color: #fff;
}

.pages .pager li:hover a {
    color: #fff;
}

.pages .pager li a {
    text-decoration: none;
    font-size: .8em;
    border-radius: 0;
    -moz-transition: none;
    background: none;
    border: none;
    color:#fff;
}
  .pager li.previous {
margin-right:10px;
 }

.pager li.last {
    height: 16px;
}

.pages {
    float: right;
    width: auto;
    margin-bottom: 10px;
    display: block;
}

.pages .results {
    width: 100%;
    color: #888;
    font-size: .8em;
    text-align: center
}

.pages ul {
    float: right
}

#pagination li {
    float: left;
    margin-right: 2px;
    margin: 0; padding: 0;
    font-size: 1.1rem;
    border: 0;
    list-style: none;
}

#pagination a {
    border: solid 1px #9aafe5;
    margin-right:2px;
    -webkit-tap-highlight-color: var(--color-primary);

}

#pagination a > i {
    opacity: .6;
}

#pagination a:hover > i {
    opacity: 1;
}


#pagination li a:hover {
    color: #fff;
}

#pagination a:link, #pagination a:visited {
    display: block; float: left;
    padding: 3px 8px;
    color: #333;
    text-decoration: none;
    border: 1px solid transparent
}

#pagination .previous-off, #pagination .next-off {
    display: block;
    margin-right: 2px;
    padding: 3px 4px;
    color: #888;
    border: solid 1px #DEDEDE
}

#pagination .active {
    display: block; float: left;
    padding: 4px 6px;
    color: #fff;
    font-weight: bold;
}


/******************************************
USER
******************************************/

/*New profile page sept. 2012*/

.profile-main {
    width: 28.5714285714286%;
    padding: 1.42857142857143%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    float: left;
    position: relative;
    z-index: 2;
}

.profile-main figure.no-scaling {
    padding: 0;
    width: 100%;
}

.profile-main figure.no-scaling img {
    width: 100px
}

.profile-main .user-details {
    color: #595959;
    font-size: 0.8em;
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.profile-main .user-role {
    text-transform: uppercase
}

.profile-main figure {
    width: 100%;
    margin-bottom: 1em;
}

.profile-main .profile-user > h1 {
    margin-bottom: 10px;
    width: 100%;
    word-wrap: break-word;
    float: left;
}

/*
.profile-actions .profile-pm, .profile-actions .profile-actions .profile-follow {
    width: 45%;
}*/

.profile-actions .btn-group + .btn-group {
    margin-left: 0;
    margin-top: 5px;
}

.user-profile .box_content > section h2 {
    padding: 5px 0 0 0;
    margin-bottom: 5px;
    border-bottom: 3px solid #0075B3;
    color: #0075B3;
    font-weight: normal;
    letter-spacing: -0.1px;
    text-shadow: 1px 1px 0 #fff;
    text-transform: uppercase;
    word-wrap: break-word;
}

.profile-fields, .profile-stats, .profile-badges, .profile-activity {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    float: left;
    box-shadow: none;
    background: none;
}

.profile-activity ul.profile-activity-nav {
    width: 14.6627565982405% !important;
    margin-right: 2.93255131964809%;
    float: left;
    list-style: none;
}

.profile-stats .profile-stats-value h4,
.profile-stats .profile-stats-value span {
    font-size: 2em;
    line-height: 1.5em;
    font-weight: bold;
}

.profile-stats .profile-stats-value h4.reduce-size {
    font-size: 1.3em;
    line-height: 1.1em;
    word-wrap: break-word;
    margin: 2px 5% 0;
    min-height: 2.2em;

}

.profile-stats .profile-stats-param {
    color: #777;
    font-size: 0.9em;
    text-transform: capitalize;
}

.profile-stats .profile-stats-stat {
    box-sizing: border-box;
    text-align: center;
    min-height: 65px;
}

.profile-activity .profile-module {
    width: 82.4046920821114% !important;
    float: left;
}

.badge-active figure {
    position:relative;
}

.badge-active a {
    position:absolute;
    top:0;
    right:0;
}

.badge-active i {
    float:right;
    background-color:#fff;
}

.profile-activity ul {
    list-style: 0;
}

.profile-badges ul li a:hover {
    display: block;
}

.profile-stats ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.profile-stats ul li {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    position: relative;
    width: calc(50% - 2.5%);
    margin: 0 0 5% 5%;
    float: left;
}

.profile-stats ul li:nth-child(odd) {
    margin-left: 0;
    clear:left;
}

section.user .profile-fields dl dt {
    width: auto;
    float: none;
    color: #595959;
    font-size: .9em;
    margin-top: .5em;
}

section.user .profile-fields dl dd {
    float: none;
    padding-left: 1em;
    font-size: 1.2em;
    word-break: break-word;
}

.profile-activity {
    margin-top: 20px;
}

.profile-activity {
    z-index: 1;
}

.profile-actions .btn-group a {
    width: 100%;
    font-size: 1.4rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.profile-activity-nav li a {
    display: block;
    width: 100%;
    text-decoration: none;
    border-radius: 4px;
    line-height: 1.4rem;
    color: var(--color-primary);
    margin: 2px 2px 2px 0;
    padding: 4px;
    float: none;
    word-break: break-word;
}

.user-siteactivity ul {
    list-style: none outside none;
    margin: 0;
}

.user-siteactivity ul li a {
    -moz-transition: all 0.1s linear 0s;
    border-radius: 4px 4px 4px 4px;
    float: left;
    padding: 0;
    width: 100%;
}

.user-siteactivity ul.user-activities {
    float: left;
    margin: 0;
    padding: 0 1% 1% 1%;
    width: 98%;
}

.user-siteactivity ul.user-activities li a {
    border-radius: 0 0 0 0;
    padding: 5px 0;
    width: 100%;

}

.user-siteactivity ul.user-activities li a:hover {
    background-color: rgb(247,247,247); /* IE fallback */
    background-color: rgba(240,240,240,.5);
}

ul.user-activities li {
    color: #777;
    float: left;
    position: relative;
    width: 100%;
}

ul.user-activities li a {
    color: #333;
}

ul.user-activities li:nth-child(2n) {
    background-color: rgba(245, 245, 245, 0.5)
}

ul.user-activities li span.author {
    color: #444;
    text-transform: capitalize;
}

ul.user-activities li .excerpt {
    font-size: 1.1rem;
    font-style: italic;
    margin-left: 10.2003642987249%;
    color: inherit;
    word-wrap: break-word;
}


ul.user-activities li .postdate {
    clear: left;
    float: right;
    font-size: 1rem;
    position: absolute;
    right: 1em;
    top: 1em;
    font-weight: normal;
}

ul.user-activities li figure {
    height: 50px;
    margin: 0 0.5em 0.5em 0;
    width: 50px;
}

ul.user-activities li .type {
    text-transform: capitalize;
}



ul.user-activities li h4,
ul.user-activities li h3 {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
    text-shadow: 1px 1px 0 #fff;
    text-transform: uppercase;
}

.user-siteactivity a {
    text-decoration: none
}

/*END of New profile page sept. 2012*/

.user.editprofile .uploadsmodule {
    padding: 0;
    height: auto;
}

.user.editprofile .uploadsmodule > form {
    width: 100%;
    float: left;
}

.user.editprofile figure {
    width: 140px;
    margin: 0;
    position: relative;
}

.user.editprofile figure > p {
    width: 100%;
    color: #777;
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.1em;
    padding: 2px 0;
    float: left;
}

.user.editprofile a:hover figure > p {
    color: #444;
}

.user.editprofile li.image {
    background-image: none;
}

.user.editprofile form section {
    width: 77.1428571428571%;
    float: right;
}

.user.editprofile form select {
    width: 100px;
}

.user.editprofile figure a {
    display: none;
}

.user.editprofile form dd label {
    display: inline;
}

.user.editprofile form input[type="submit"] {
    float: right !important;
}

.user.editprofile .box_content > div:not(.alert) {
    clear: both;
    float: right;
    margin-top: 40px;
}

.user .box_content > div.alert.alert-info {
    clear: both;
    float: none;
    margin-top: 20px;
}

.form-buttons {
    float: left;
    width: 100%;
    margin-left: 25%;
}

section.user dl {
    width: 100%;
    float: left;
    line-height: 1.5em;
}

section.user .profile-input-extra-info small {
    display: none;
}

.location-inline > dd:first-child {
     margin-bottom: 0;
}

.location-inline > dd label {
    margin-bottom: 0;
}

section.user dl dd{
    float: left;

}

section.user dl dt label {
    line-height: 2.8rem;
}

section.user dl dt {
    width: 53.2394366197183%;
    float: left;

}

/* user dropdown */

div.author.dropdown-toggle {
    float: left;
    position: relative;
}

div.author.dropdown-toggle ul.user-dropdown.dropdown-menu {
    left: 10%;
    right: auto;
    top: 80%;
    border-radius: 5px 5px 5px 5px;
    font-size: 1.1rem;
    z-index:9999;
}

div.author.dropdown-toggle:hover ul.user-dropdown.dropdown-menu {
    display: block !important;
}

.user-dropdown.dropdown-menu .dropdown-no-click {
    color: #777;
    clear: both;
    display: block;
    font-weight: normal;
    line-height: 2rem;
    padding: 3px 20px;
    white-space: normal;
}

.user-dropdown.dropdown-menu li:first-child {
    padding: 3px 20px;
    font-weight: bold;
    color: var(--color-primary);
}

div.author.dropdown-toggle:hover ul.user-dropdown li:first-child {
    display: block;
}

.user-dropdown.dropdown-menu .dropdown-no-click {
    color: #777;
    clear: both;
    display: block;
    font-weight: normal;
    line-height: 2rem;
    padding: 3px 20px;
    white-space: normal;
}

.user-dropdown.dropdown-menu li:first-child {
    padding: 3px 20px;
    font-weight: bold;
}

/* Forms */
fieldset {
    padding: 10px;
    border: 1px solid #E5E5E5
}

form legend {
    margin: 10px 0; padding: 0 5px 0 5px;
    color: #555;
    font-size: 1.2em;
    text-transform: uppercase; /* 14/12 */
}
form dl.inline dt {
    float: left;
    width: 24%;
    text-align: right;
    clear: both;
    padding-right: 1%;
}

form dt {
    margin-bottom: 2px
}
form dt label,  form dd label {
    color: #555;
    cursor: pointer;
}
form dd label.remember-me {
    display: inline-block;
    font-size: 0.9em;
}
form dl.inline dd {
    float: left;
    width: 75%;
    margin: 0 0 15px
}
form dd {
    margin-bottom: 15px
}
form dl small {
    display: block;
    color: #AAAAAA;
    font-size: 1em; /* 10/12 */
}
.accordion h3 {
    height: 1.5em;
    margin: 0 5px 5px 0; padding: 5px 5px 5px 25px;
    background: url("/front-end/pf2/images/icons/triangle_down.png") no-repeat scroll left center #F7F7F7;
    border: 1px solid #EEEEEE;
    clear: both;
}
.accordion h3 a {
    font-size: 0.857142857142857em;
    text-decoration: none; /* 12/14px */
}
.accordion input.text {
    width: 560px
}
form div.buttons {
    text-align: right
}

form.inline_edit {
    border: 2px dashed #CCC;
    padding: 2px;
    width: 98.857142857143%; /*fitted for forumedit */
}
/* =============================================================================
   Tabs 09-02-2012
   ========================================================================== */

.tabs {
    float: right;
}

.tabs li {
    background: none repeat scroll 0 0 #E4E4E4;
    border: 1px solid #C3C3C3;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1) inset;
    float: left;
    margin-bottom: -1px;
    margin-right: 13px;
}

.tabs li.selected {
    background: #fff;
    border-bottom-color: #fff;
    box-shadow: none;
}

.tabs li:hover {
    background: #fff;
}
.tabs li a {
    color: #979797;
    display: block;
    font-size: .8em;
    font-weight: bold;
    line-height: 2.5rem;
    padding: 2px 22px;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
}


/* =============================================================================
   Direct Messaging System 09-02-2012
   ========================================================================== */

.box.inbox ul {
    list-style: none;
}

.inbox .box_content {
    float: left;
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    box-shadow: 0 0 2px 2px #fff inset, 0 1px 0 rgba(127, 127, 127, 0.1);
    clear: both;
    margin: 0;
    overflow: hidden;
    padding: 10px 10px 0 10px !important;
    margin-top: 2em;
    width:  96.8571428571429%;
}

.pm-empty p {
    color: #333;
    text-align: center;
}

.inbox ul.tabs {
    float: left;
}

.inbox ul.tabs + ul {
    float: right;
}

.inbox .tabs li {
}

.inbox .tabs li.new {
    float: left;
    margin-left: 10px;
}

.inbox .tabs li a {
    line-height: 1.5em;
    padding: 5px 10px;
}

.messages,
.points_history {
    float: left;
    width: 100%;
}
.points_history table{
    table-layout: fixed;
}
.messages table, .messages table tr,
.points_history table , .points_history table tr {
    width: 100%;
}

.messages table,
.points_history table {
    margin-bottom: 2em;
}

.messages table tr,
.points_history table tr {
    padding: 2px;
}

.messages thead td,
.points_history thead td,
.points_history thead th{
    font-size: .8em;
    text-align: left;
}

.messages td,
.points_history td {
    //width: 3%;
    padding: 0.5em 0;

}

#participant-tab.nav-tabs {
    border-bottom: none;
}

.messages tbody tr td,
.points_history tbody tr td {
    border-top: 1px solid #E1E1E1;
    background: #fff;

}

.messages table tbody tr:nth-child(2n) td,
.points_history table tbody tr:nth-child(2n) td {
    background: none repeat scroll 0 0 #FAFAFA;
}

.messages table td + td {
    width: 13%;
    padding-right:10px;
}

.messages table tr td + td + td {
    width: 15%;
}

.messages table td a {
    text-decoration: none;
    color:  #3333FF;
}

.messages table td a:hover {
    text-decoration: underline;
    color:  #444;
}

.messages table tbody tr:hover td {
    background: #ECECEC;
}

.messages table td + td + td + td {
    width: 50%;
}

.messages table td + td + td + td + td {
    width: 19%;
}

.messages table tr.unread span.isnew {
    display: inline-flex;
    margin-bottom: 2px;
}

.messages section input[type='submit'] {
    margin-right: .5em;
}

.messages section {
    margin-bottom: 1em;
    float: right;

}

.points_history table tbody tr:hover td {
    background: #ECECEC;
}

.points_history td {
    padding: 5px;
    width: 20%;
}
.view_message figure.avatar {
    width: 54px;
    border: 0.428571428571% solid #fff;
    height: 54px;
    float: left;
    margin: 0 1% 1% 0;
}

.view_message dl {
    width: 80%;
    float: left;
}

.send_message dl {
    width: 100%;
}
.send_message dl dt {
    width: 18%;
    text-align: right;
    color: #777;
}

.view_message dl dt {
     width: 18%;
    text-align: left;
    color: #777;
    margin-left:2%;
}

.view_message dl dd, .send_message dl dd {
    width: 75%;
    margin-left: 2%;
}

.send_message dl dt {
    float: left;
    padding: .2em 0;
    margin-bottom: 15px;
}

.view_message dl dt:first-child {
    font-size:1.2em;
}

.view_message dl dt, .view_message dl dd {
    color:#a5acaf;
    font-size:0.9em;
}

.view_message dl dt:first-child, .view_message dl dt:first-child + dd {
    color:#272727;
    font-weight:600;
    font-size:1.2em;
}


.view_message dl dt, .view_message dl dd {
    float: left;
    padding-bottom:8px;
}

.send_message dl dd {
    float: right;
}

.send_message article {
    background: none repeat scroll 0 0 #fff;
    clear: left;
    float: right;
    margin: 0 0 1em 0;
    padding: .5em 1%;
    width: 83%;
    border: 1px solid #DADADA;
}

.view_message article {
    border-top:1px solid #c6c6c6;
    width:100%;
    float:left;
    padding:15px;
    margin-bottom:20px;
    	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}

.view_message article h1, .send_message article h1{
    font-family: var(--font-family), sans-serif;
    font-size: 1.4rem;
    text-transform: capitalize;
}

.view_message article header {
padding:10px;
background:#fff;
margin:0;
border-top-left-radius:3px;
border-top-right-radius:3px;
border-left:1px solid #c6c6c6;
border-right:1px solid #c6c6c6;
border-top:1px solid #c6c6c6;
}

.view_message article section {
padding-bottom: 15px;
background:#fff;
padding:10px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-left:1px solid #c6c6c6;
border-right:1px solid #c6c6c6;
border-bottom:1px solid #c6c6c6;
}
.send_message textarea {
    width: 98%;
}
.send_message article {
    border-bottom: none;
    background: none;
    padding: 0;
}

.view_message input[type='submit'] {
    margin-left: .2em;
}

.send_message div.buttons {
    width: 100%;
    float: left;
}

.no-sidebar .prv-msg-btns {
    margin-right:6px;
}

.send_message div.buttons input {
    float: right;
}
.view_message form {
    float: right;
}


.view_message .box_content > div {
    float: left;
    width: 100%;
}

.mouse_pointer {
    cursor:pointer;
}


.cntrl_private_messaging input:not[type=checkbox] {
margin-right:10px;
position:relative;
top:-3px;
width:auto;
    max-width:100%;
    min-width:210px;
}

/*CLEANUP*/


/* =============================================================================
   Site activity 23-01-2012
   ========================================================================== */

section.siteactivity {
    float:left;
    width:100%;
    box-shadow:1px 1px 5px 0 rgba(0, 0, 0, .1);
    background-color:#fff;
    border-radius:4px;
    margin-top: 2em;
}

section.siteactivity a.btn{
    display: block;
}

.no-boxshadow section.siteactivity {
    border: 1px solid #dadada;
}

section.siteactivity header h3 {
    color:#0075B3;
    border-bottom:1px solid #FFF;
    font-size:1.5em;
    font-weight:700;
    position:relative;
    text-align:center;
    text-transform:uppercase;
    border-radius:4px 4px 0 0;
    padding:2px;
}

section.siteactivity header ul.filters {
    width:100%;
    text-align:center;
    padding:5px 0;
}

section.siteactivity header ul.filters li {
    display:inline-block;
}

@media only screen and (max-width: 1024px) {
    section.siteactivity header ul.filters li {
        margin-top:5px;
        margin-bottom:5px;
    }
}

section.siteactivity header ul.filters li a, ul.srch-filters li a  {
    display:inline;
    text-decoration:none;
    border-radius:4px;
    line-height:1.4rem;
    color:var(--color-primary);
    margin:2px 2px 2px 0;
    padding:4px 9px;
    float: none;
    text-transform: capitalize;
}

section.siteactivity header ul.filters li a:hover, ul.srch-filters li a:hover, .profile-activity ul.profile-activity-nav li a:hover {
    background-color:#eee;
    color:#005481;
}

section.siteactivity header ul.filters li.active a, ul.srch-filters li.active a, .profile-activity ul.profile-activity-nav li.active a  {
    color:#FFF;
    background:none repeat scroll 0 0 var(--color-primary);
    cursor: default;
}

section.siteactivity ul {
    list-style:none;
    margin: 0;
}

ul.activities {
    float:left;
    width:98%;
    padding:1%;
    margin: 0;
}

ul.activities li, .srch-resultslist ul li {
    position: relative;
    float: left;
    width: 100%;
    color: #777
}

ul.activities li:nth-child(2n), li.srch-result:nth-child(2n) {
    background-color: rgb(250,250,250); /* IE fallback */
    background-color: rgba(245,245,245,.5)
}

ul.activities figure {
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    display: block;
    float: left;
    margin: 0 1em 1em 0;
    text-align: center;
    color: #999;
    overflow: hidden;
}

ul.activities li .postdate, li.srch-result .postdate {
    position: absolute; float: right;
    top: 1em; right: 1em;
    font-size: 0.8em;
    clear: left
}
ul.activities li div.excerpt, li.srch-result div.excerpt {
    margin-left: 9.037900874636%;
    font-style: italic
}
ul.activities li span.author, li.srch-result span.author {
    color: #444;
    text-transform: capitalize;
}
ul.activities li figure, li.srch-result figure {
    width: 7.28862973760933%;
    height: 7.28862973760933%;
    margin: 0 1.45772594752187% 0.72886297376094% 0
}
ul.activities li .type, li.srch-result .type {

}
ul.activities li h4, li.srch-result h4 {
    margin: 0; padding: 0;
    color: var(--color-primary);
    font-size: 1.6rem;
    font-size: 1.6rem;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #fff
}

/* Search results page*/

.srch-bar {
    padding: 2em 10% 4em;
}

.srch-bar input.searchbox {
    padding: 8px;
    border-radius: 4px;
}

.srch-bar input.searchbox:focus {
    color: #444;
}

.srch-results h2 {
    text-align: center;
}

.srch-noresults {
    text-align: center;
}

ul.srch-filters {
    padding: 2em 0;
    text-align: center;
    width: 100%;

}

ul.srch-filters li {
    display: inline-block;
}

span.srch-resultcount {
    background: var(--color-primary);
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    padding: 1px 3px;
    vertical-align: text-bottom;
}

li.active a span.srch-resultcount {
    color: var(--color-primary);
    background: #fff;
}

.srch-resultslist ul {
    list-style: none;
}

.srch-resultslist ul li {
    margin: 10px 0 ;
}

.srch-resultslist ul li a {
    padding: 0px;
    width: 100%;
    -moz-transition: all 0.1s linear 0s;
    text-decoration: none;
    display: block;
}

.srch-resultslist ul li a:hover h4 {
    text-decoration: underline;
}

.srch-resultslist ul.pager li {
    margin-left: 5px;
    width: auto;
}

.srch-resultslist ul li a figure {
    height: 50px;
    margin: 0 0.5em 0.5em 0;
    width: 50px;
}

.srch-resultslist ul li a figure img {
    height: 100%;
}

li.srch-result .postdate {
    top: auto;
    bottom: 1em;
}

li.srch-result .excerpt p {
    width: 85%;
}

li.srch-result .type {
    background-color: #3290c2;
    border-radius: 3px 3px 3px 3px;
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.3rem;
    padding: 1px 4px 2px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    vertical-align: middle;
    white-space: nowrap;
    right: 1em;
    position: absolute;
    top: 1em;
}


.search-results .srch-bar {
    padding: 2em 3% 4em;

}
/* END OF Search results page*/

/* Footer */

body > footer {
    float: left;
    width: 100%;
    display: block;
}

/*ERROR PAGES*/

.cntrl_errors #main {
    float: none;
}

.error404 h1 {
    color: #DDDDDD;
    font-size: 4em;
    text-align: center;
    text-shadow: 2px 2px 0 #fff;
    padding: 1em 0;
}

.error404 p {
    text-align: center;
    text-shadow: 1px 1px 0 #fff;

}

.error404 p.note {
    font-style: italic;
    color: #666;
}

/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir {
    display: block;
    text-indent: -999em;
    overflow: hidden;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
}
.ir br {
    display: none
}
/* Not visisble at all (for hiding and showing elements via JS) */
.hidden {
    display: none;
}
/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.invisble {
    display: none !important;
    visibility: hidden !important;
}

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
    visibility: hidden
}
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both
}
.clearfix {
    zoom: 1
}

/* css verwijderd geweest */

div#main input[type="submit"].save, div#main input[type="submit"].quote, div#main input[type="submit"].more, div#main input[type="submit"].update, div#main input[type="submit"].message, div#main input.cancel[type="submit"] {
    background-color: red !important;
}

div.quote {
    background: #fff;
    margin-left: 11%;
    padding: 5px 0.704225352113%;
    margin-bottom: 1em;
    border: 1px solid #DDDDDD;
}
div.quote p {
    font-style: italic;
    font-size: .9em;
}

article#new {
    width: 98.61%;
    padding: 0.694% 5px;
    border-bottom: none;
    background: #F5F5F5;
    float: left;
}

article#new input[type="text"]:not(.entry-date-input):not(.input-field) {
    width: 100%;
    color: #555;
    font-size: 1.2rem;
    padding: 2px;

}
article#new textarea:not(.forum-new-topic__input-content) {
    float: left;
    width: 100%;/* height: 110px;*/
    padding: 2px !important;
    color: #555;
    font-size: 1.2rem;
    background: #fff;
}

figure.placeholder {
    position: relative
}
figure.placeholder span {
    position: absolute; display: table-cell;
    top: 35%;
    left: 0;
    width: 100%;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    background: #fff;
}
.postmeta {
    float: left;
    width: 100%;
    margin-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 1.1rem;
}

/*section.postmeta */
ul.attachments li a {
    display: block;
    width: 83.030303030303%;
    margin: 0 0 4px;
    padding: 4px 2.424242424242% 4px 18.313131%;
    color: inherit;
    font-size: .8em;
    text-decoration: none;
    word-wrap: break-word;
    background: url("/front-end/pf2/images/icons/dark/download.png") no-repeat scroll left center transparent
}

/*section.postmeta*/
ul.attachments li a:hover {
    background-color: #fff;
    text-decoration: underline;
}


div.usergroupmeta {
    float:left;
    width:100%;
}

.read-more {
    color: #0075B3;
}

/* margin */

.margin-top {
    margin-top: 0.5em;
}

/* CUSTOM ROLES */

.comments li.comment.moderator-reply {
    background-color: #f7f7f7;
    border: 1px solid #DDDDDD;
}

.comments li.comment .moderator-reply-quote {
    background-color: #ebebeb;
    border: 1px solid #DDDDDD;
}

.comments li.comment.moderator-reply .commentbody p,
.comments li.comment.moderator-reply .commentbody .quote p,
.comments li.comment .moderator-reply-quote p {
    color: #000;
}

.comments li.comment.moderator-reply .commentbody .quote {
    border-color: #999;
}

.comments li.comment.moderator-reply .postdate {
    text-transform: lowercase;
}


/* ie test */
#cntrl_shop figure.clean {
    width:100%;
    height:0;
    padding-bottom:100%;
}

.auth-register {
    display:block;
    width:100%;
}

 .auth-register .btn-inverse {
        width:100px;
        left:50%;
        display:inline-block;
    }

/* google translate button */
.translator-button-dropdown {
    display: inline-block;
    font-size: 1.4rem;
    vertical-align: middle;
}

.paused-info p {
    margin-top: 50px;
    margin-bottom: 25px;
}

/* #6000 */

.alert .close {
    cursor: pointer;
}

/* #6219 */
#pagination a:hover .icon-fast-forward,
#pagination a:hover .icon-fast-backward {
    background-image: url('/front-end/pf2/images/icons/glyphicons-halflings-white.png');
}

span.highlighted_text {
    color: #000;
    background-color: #E8E9EA;
    padding: 2px;
}

.cntrl_authorize .auth-register {
    text-align: center;
    margin-top: .5em;
    padding-top: .5em;
    border-top: 1px solid #c6bbb6;
}

.custom-element ol,
.custom-element ul {
    padding-left: 20px;
}

.fluid-vids iframe {
    max-width: 100%;
    position: relative !important;
}

.custom_page .redactor-iframe iframe {
    border: 0;
}

.upload-progress {
    border: 1px dashed #dadada;
    height: 130px;
    margin-left: 5px;
    width: 100px;
}

.upload-progress:not(.hidden) {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.upload-progress > img {
    margin-bottom: 10px;
}

.box .location {
    color: #999999;
    font-size: 1.2rem;
}

/* #14630 - Fix badge level textwrapping in popover */

.popover .popover-content > span {
    white-space: normal;
    word-break: break-word;
}

/* END #14630 */

.toggle-subscription {
    cursor: pointer;
    float: right;
    font-size: 1.6rem;
}

.toggle-subscription.subscribed .fa-envelope {
    display: block;
}

.toggle-subscription.subscribed .fa-envelope-o {
    display: none;
}

.toggle-subscription:not(.subscribed) .fa-envelope-o {
    display: block;
}

.toggle-subscription:not(.subscribed) .fa-envelope {
    display: none;
}

.toggle-subscription .tooltip {
    font-size: .8125em;
    max-width: 150px;
    white-space: normal;
}

.push-notifications .switch-container {
    margin-left: 4px;
    margin-top: 15px;
}

body .switch-container input:checked ~ .switch {
    background: rgba(0, 117, 179, 0.51);
    opacity: .95;
}

body .switch-container input:checked ~ .switch:before {
    background: #0075B3;
}

body .switch-container input:checked ~ .switch:before:active {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28);
}

.comment .permalink {
    margin-right: 2px;
    text-decoration: none;
}

.comment .permalink:hover {
    text-decoration: underline;
}

.vi .user.editprofile form .dob-month {
    width: 120px;
}

.user-dropdown .user-dropdown-usergroups {
    box-sizing: border-box;
    color: #333;
    max-width: 200px;
    padding: 3px 20px;
    width: 100%;
}

.user-dropdown .user-dropdown-usergroups strong {
    display: block;
}

.user-dropdown .user-dropdown-usergroups .usergroups-cb {
    display: none;
}

.user-dropdown .user-dropdown-usergroups .usergroups {
    display: inline-block;
    flex-wrap: wrap;
    list-style: none;
    max-width: 100%;
    padding: 0;
}

.user-dropdown .user-dropdown-usergroups .usergroups .usergroup {
    color: #333;
    display: inline;
    font-weight: normal;
    margin: 0 3px 0 0;
    padding: 0;
    width: auto;
    word-wrap: break-word;
}

.user-dropdown .user-dropdown-usergroups .usergroups .usergroup:first-child {
    display: inline !important; /* For some reason it needs this... */
}

.user-dropdown .user-dropdown-usergroups .usergroups .usergroups-toggle label {
    font-size: 1em;
    font-style: italic;
    line-height: 1.1;
}

.user-dropdown .user-dropdown-usergroups .usergroups .usergroups-toggle:hover {
    text-decoration: underline;
}

.user-dropdown .user-dropdown-usergroups .usergroups .usergroup:not(:last-child):not(.usergroups-toggle):after {
    content: ',';
    display: inline;
    margin: 0;
}

.user-dropdown .user-dropdown-usergroups .usergroups-cb:checked + .usergroups .usergroups-toggle {
    display: none;
}

.user-dropdown .user-dropdown-usergroups .usergroups-cb:not(:checked) + .usergroups .usergroups-toggle ~ .usergroup {
    display: none;
}

.inbox .status-label {
    margin-right: 5px;
}

.report-item {
    cursor: pointer;
    float: right;
    font-size: 1.6rem;
}

.report-item  .tooltip {
    font-size: .8125em;
    max-width: 150px;
    white-space: normal;
}

.translator-button-dropdown .fa-language {
    font-size: 1.2rem;
}

.translator-button-dropdown .dropdown-menu a:hover {
    cursor: pointer;
}

.trial-signup .password-container input {
    height: 40px;
}

.trial-signup .password-container .show-password-minimums {
    right: calc(10% + 1px);
}

.authentication .box_content .password-minimums > ul,
.user-password-form .password-minimums {
    list-style: none;
    padding-left: 0;
}

.authentication .box_content .password-minimums > ul > li,
.user-password-form .password-minimums > li {
    font-size: 1.2rem;
    margin-bottom: 3px;
    padding-left: 15px;
    position: relative;
}

.authentication .box_content .password-minimums > ul > li:before,
.user-password-form .password-minimums > li:before {
    content: ' ';
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0;
}

.authentication .box_content .password-minimums > ul > li:not(.met),
.user-password-form .password-minimums > li:not(.met) {
    color: #999;
}

.authentication .box_content .password-minimums > ul > .met,
.user-password-form .password-minimums > .met {
    color: #ddd;
}

.authentication .box_content .password-minimums > ul > :not(.met):before,
.user-password-form .password-minimums > :not(.met):before {
    background: #999;
    border-radius: 50%;
    height: 5px;
    margin-top: 5px;
    width: 5px;
}

.authentication .box_content .password-minimums > ul > .met:before,
.user-password-form .password-minimums > .met:before {
    border-left: 2px solid #5db363;
    border-bottom: 2px solid #5db363;
    height: 3px;
    margin-top: 3px;
    transform: rotate(-45deg);
    width: 6px;
}

.invisible-for-users {
    color: #fff;
    font-size: 15px;
    padding: 3px;
    position: absolute;
    z-index: 1;
}

.profile:not(.profile-picture-view) .invisible-for-users {
    right: 5px;
    top: 3px;
}

.profile-picture-view .invisible-for-users {
    background: rgba(0, 0, 0, .5);
    right: 0;
    top: 0;
}

.box-community .userprofiles .profile a .invisible-for-users ~ .tooltip {
    width: auto;
}

.box-community .userprofiles .profile a .invisible-for-users ~ .tooltip .tooltip-arrow {
    width: 0;
}

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

body .avatar-shape {
    border-radius: var(--avatar-border-radius) !important;
    overflow: hidden;
}

body .avatar-shape img {
    height: 100%;
    width: 100%;
}

#sidebar ul.activity li a .avatar-shape {
    align-self: flex-start;
    display: inline-flex;
}

.box_content .comments .postcomment .avatar-shape {
    height: 60px;
}

.g-recaptcha {
    float: left;
    margin: 20px 0 10px;
    transform-origin: 0 center;
}

.box_content:not(.nosocial) .g-recaptcha {
    transform: scale(.7);
}

.box_content .redactor-box figure,
.box_content .forum-post-content figure,
.box_content .redactor-content-content figure,
.box_content .redactor-content figure,
.box_content .qs-question-content figure,
.terms_popup .redactor-content figure {
    background: none;
    border: 0;
    box-shadow: none;
}

.profile-avatar-upload {
    display: inline-block;
    float: left;
}

.image-list-figure {
    height: 100px;
}
.img-100-100 {
    .image-list-figure {
        height: 100px;
        width: 100px;
    }
}
.ios.ipad #sidebar {
    -webkit-overflow-scrolling: touch;
}

.ios.ipad .navigation-container {
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

body .highlight {
    animation: highlightColor 3s 1s;
}

@keyframes highlightColor {
    0% {
        background: var(--color-primary);
    }

    100% {
        background: transparent;
    }
}

.video {
    position: relative;
}

.video__download-link {
    align-items: center;
    border-radius: 50%;
    background: #fff;
    bottom: 4px;
    box-shadow: 0 5px 1px rgba(0, 0, 0, .1);
    display: inline-flex !important;
    height: 24px;
    justify-content: center;
    opacity: .8;
    position: absolute;
    right: 4px;
    text-decoration: none;
    transition: all .2s;
    width: 24px;
    z-index: 1;
}

.video__download-link:hover {
    background-color: #ededed;
    opacity: 1;
    transform: scale(1.05);
}

.video__download-icon {
    margin-top: 2px;
}


body #root .postbody > .video {
    display: inline-flex;
    max-height: 150px;
    width: calc(28% - 10px);
}

body #root .postbody > .video .video {
    height: 100%;
}

.commentbody .visual-attachments > li {
    width: calc(50% - 5px);
}

.commentbody .visual-attachments > .even {
    margin-left: 10px;
}

.password-requirements {
    border-color: var(--color-primary);
}

.password-requirements:before {
    border-bottom-color: var(--color-primary);
}

body #root .user .nav-tabs {
    margin-bottom: 32px;
}

body .viewtype .active,
body .filter .active {
    border-bottom: 2px solid var(--color-primary);
}

body .viewtype .active,
body .viewtype a:hover,
body .filter .active,
body .filter a:hover {
    color: var(--color-primary);
}

.dropdown-toggle .user-dropdown .fa {
    margin-right: 4px;
}

.custom-header-element {
        border: 0;
        color: var(--color-primary) !important;
        display: inline-block;
        font-weight: 300;
        font-size: calc(1rem + 8px);
        padding-top: 6px;
        padding-bottom: 2px;
        margin-bottom: 20px;
        margin-left: -20px;
        padding-left: 20px;
        padding-right: 20px;
        text-align: left;
        width: auto;
        letter-spacing: 1px;
        text-transform: uppercase !important;
}