body {
background-color: #e3e3db;
/*background-color: #22a4c4;*/
font-family:Ubuntu,trebuchet ms,lucida grande,lucida sans unicode,lucida sans,Tahoma,sans-serif;
font-size: 12.5px;
}

hr {
border-top: 1px solid #dddddd;
    margin-top: 6px;
    margin-bottom: 6px;§
    box-shadow: 0px 1px #fff;
}
a {
color: #22a4c4;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #22a4c4;
font-weight: bold;
text-decoration: none;
}

a.blurple_link {
color: #626cda;
text-decoration: none;
font-weight: bold;
}

a.nostyle {
color: #8c8c8c;
text-decoration: none;
font-weight: 100;
}

a.popup {
    color: #fff;
    font-weight: 100;
    text-decoration: none;
}

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

.btn-info {
    color: #fff;
    background-color: #22a4c4;
    border-color: #333;
}

.formstyle {
    font-size: 12.5px;
    height: 32px;
    background-color: #efefef;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    box-shadow: 0px 1px 0 0px #d1d1d1, inset 0px 0px 0 1px #fff;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: .5rem;
}

.navbar-dark .navbar-nav .nav-link {
cursor: pointer;
color: #fff;
font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link:hover {
cursor: pointer;
color: #e0e0e0;
}

.left_bg {
background: url(../images/s7_bg_left.png);
width: 500px;
height: 998px;
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
}

.navstyle {
background-color: #444444!important;
font-size: 14px;
border-bottom: 1px solid white;
box-shadow: inset 0px -2px #00000036;
}

.header {
    background-image: linear-gradient(#004087, #6baaf1);
    width: 100%;
    height: 230px;       /* keeps your existing header height */
    margin-top: 53px;
    position: relative;
    z-index: 2;
    border-bottom: 2px solid white;
    box-shadow: 0px 2px 0 1px #0000001a;

    display: flex;             /* enable Flexbox */
    justify-content: center;   /* horizontal center of content */
    align-items: center;       /* vertical center of content */
}

.header .row {
    display: flex;             /* ensure the row is a flex container */
    justify-content: center;   /* horizontally center columns */
    align-items: center;       /* vertically center columns inside header */
    width: auto;               /* shrink-wrap to content width */
}


.headerimage_right {
/* background: url(../images/assets/header_right_euros.png); */
width: 100%;
height: 258px;
background-position: right;
background-repeat: no-repeat;
}

.headerimage_left {
/* background: url(../images/assets/header_left_euros.png); */
width: 100%;
height: 258px;
background-position: left;
background-repeat: no-repeat;
}

.headerlogo {
    background: url(../images/connect_logo.png) no-repeat center center;
    width: 320px;
    height: 62px;
    background-size: contain;
    transition: opacity 0.3s ease;
}

.headerlogo:hover {
    background: url(../images/connect_logo_hover.png) no-repeat center center;
    opacity: 0.9;
    cursor: pointer;
}

.adverts {
position: relative;
overflow: hidden;
background-color: #fff;
z-index: 2;
border-radius: 3px;
box-shadow: 0px 2px #00000021;
padding: 2px;
margin-top: -52px;
}

.badges {
position: relative;
height: 100px;
overflow: hidden;
background-color: #22a4c4;
z-index: 2;
border: 2px solid white;
border-radius: 3px;
box-shadow: 0px 2px #00000021, inset 0px 2px #0003;
padding: 18px;
margin-top: -52px;
margin-bottom: 24px;
}

.badgesurround {
cursor: pointer;
float: left;
overflow: auto;
width: 60px;
height: 60px;
margin-left: 10.5px;
border-radius: 2px;
background-color: #0000003b;
padding: 8px 0 0px 0;
box-shadow:0px 0px 15px 7px #ffffff3b, inset 0px 0px 0 1px #00000024;
}

.badgebg {
cursor: pointer;
overflow: auto;
width: 55px;
height: 55px;
margin-left: 3px;
margin-right: 2px;
border-radius: 2px;
background-color: #0000000f;
padding: 8px 0 0px 0;
box-shadow: 0px 0px 15px 7px #ffffff3b, inset 0px 0px 0 1px #00000024;
}

.contentbox {
background-color: white;
border-radius: 2px;
border: 1px solid #cacaca;
box-shadow:0px 1px 0 0px #cacaca;
margin-bottom: 18px;
}

.contentboxheader {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background-color: #22a4c4;
height: 35px;
color: #fff;
font-weight: 700;
font-size: 12.5px;
text-shadow: 1px 1px #00000094;
padding: 8px 8px 8px 12px;
box-shadow: inset 0px 0px 0 1px #00000036, 0px 2px 0 0px #00000021;
}

.notify {
    background-color: #444444;
}

.blurple {
background-color: #626cda;
}

.winter {
    color: #22a4c4;
}

.contentboxpadding {
padding: 3px;
}

.contentboxinner {
background-color: #f5f5f5;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
box-shadow: 0px 0px 0 1px #dfdfdf;
margin-top: -2px;
color: #8c8c8c;
overflow: auto;
}

.contentboxinnerpadding {
padding: 10px;
}

.homepage-items-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.homepage-items-row .contentbox{
    flex:1;
    min-width:240px;
}


.footeronline {
float: left;
background-color: #00000026;
border-top: 1px solid #0003;
width: 60px;
height: 60px;
margin: 3px;
border-radius: 2px;
box-shadow: inset 0px 0px 0 1px #ffffff17, 0px 1px 0 1px #0003;
}

.footeronline:hover {
cursor: pointer;
background-color: #00000030;
border-top: 1px solid #0003;
border-radius: 2px;
box-shadow: inset 0px 0px 0 1px #ffffff15, 0px 1px 0 1px #0003;
}

.footeronline img:hover {
filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px -1px 0 white);
}

.buttons_containcontentbox {
overflow: auto;
margin-bottom: 6px;
}

.buttons_containcontentboxtext_noheader {
    overflow: auto;
}

.button_buttons {
width: auto;
color: #474747;
text-shadow: 1px 1px #fff;
padding: 10px 14px 10px 14px;
border-radius: 3px;
background-color: #f4f4f4;
box-shadow: 0px 2px 0 0px #00000012, inset 0px 0px 0 1px #0000002e;
float: right;
margin: 0 0 4px 10px;
}

.button_buttons:hover {
background-color: #ebebeb;
    box-shadow: 0px 2px 0 0px #00000012, inset 0px 0px 0 1px #00000017;
cursor: pointer;
}

.staffnav {
color: #8c8c8c;
text-decoration: none;
font-weight: 500;
}

.staffnav:hover {
color: #8c8c8c;
text-decoration: none;
font-weight: 700;
}

.staff_nav {
height:  56.52px;
overflow: hidden;
color: #909090;
padding: 8px;
background-color: #0000000f;
border-bottom: 1px solid #00000017;
margin-top: 1px;
}

.staff_nav:hover {
background-color: #00000014;
}

.bbcodebutton {
float: left;
width: 40px;
font-family: verdana;
color: #8c8c8c;
text-align: center;
text-shadow: 1px 1px #fff;
padding: 10px;
margin: 2px 6px 8px 0px;
border-radius: 2px;
background-color: #f5f5f5;
box-shadow: 0px 2px 0 0px #0000000a, inset 0px 0px 0 1px #00000012;
}

.bbcodebutton:hover {
cursor: pointer;
background-color: #efefef;
}

.articleheader {
    font-family: verdana;
    color: #8c8c8c;
    text-shadow: 1px 1px #fff;
    padding: 10px;
    margin: 8px auto 8px auto;
    border-radius: 3px;
    background-color: #f5f5f5;
    box-shadow: 0px 2px 0 0px #0000000a, inset 0px 0px 0 1px #00000012;
}

.quote {
color: #8c8c8c;
text-shadow: 1px 1px #fff;
padding: 10px;
margin: 8px auto 0 auto;
border-radius: 3px;
background-color: #f5f5f5;
box-shadow: 0px 2px 0 0px #0000000a, inset 0px 0px 0 1px #00000012;
}

.pagination_containcontentbox {
overflow: auto;
margin-bottom: 6px;
}

.pagination_containcontentboxtext_noheader {
    overflow: auto;
}

.pagination_buttons {
width: auto;
color: #474747;
padding: 10px 14px 10px 14px;
border-radius: 3px;
background-color: #f4f4f4;
box-shadow: 0px 2px 0 0px #00000012, inset 0px 0px 0 1px #0000002e;
float: right;
margin: 0 0 4px 6px;
}

.pagination_buttons:hover {
background-color: #ebebeb;
    box-shadow: 0px 2px 0 0px #00000012, inset 0px 0px 0 1px #00000017;
cursor: pointer;
}

.edituser_containcontentbox {
overflow: auto;
margin-bottom: 6px;
}
.edituser_containcontentboxtext_noheader {
    overflow: auto;
}
.edituser_buttons {
width: auto;
color: #8c8c8c;
text-shadow: 1px 1px #fff;
padding: 10px 14px 10px 32px;
border-radius: 3px;
background-color: #f5f5f5;
box-shadow: 0px 2px 0 0px #0000000a, inset 0px 0px 0 1px #00000012;
float: left;
margin: 0 10px 12px 0px;
}

.edituser_buttons:hover {
background-color: #f5f5f56e;
box-shadow: 0px 2px 0 0px #0000000d, inset 0px 0px 0 1px #0000000f;
}

.messagecontainer {
overflow: hidden;
color: #909090;
padding: 8px;
background-color: #0000000f;
border-bottom: 1px solid #00000017;
margin-top: 1px;
}

.messagetext {
margin: 0 0 0 4px;
width: 35px;
height: 35px;
}

.boonhead_message {
margin-top: -10px;
}

.messagecontent {
position: relative;
margin: -32px 0 0 65px;
}

.footer {
position: relative;
width: 100%;
z-index: 1;
background-color: #444444!important;
font-size: 14px;
border-top: 2px solid white;
box-shadow: inset 0px 3px #00000036, 0px -1px #444444;
padding: 10px 0px 10px 0px;
}

.footer_sml {
position: relative;
    width: 100%;
    height: 40px;
    z-index: 1;
    color: #fff;
    background-color: #515151!important;
    font-size: 14px;
    box-shadow: inset 0px 1px #3a3a3a;
    border-top: 1px solid #696969;
    padding: 10px 0px 10px 0px;
}

.latestmember {
    height: 148px;
    background-color: #0000008a;
    width: 57%;
    box-shadow: 0px 2px #00000021, inset 0px 0px 0 1px #ffffff3d;
    border-radius: 3px;
    color: #fff;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center inside box */
    align-items: center;     /* horizontal center inside box */
}

.latestmemberfigure {
margin: 10px auto 4px auto;background-color: #00000018;width: 60px;height: 60px;box-shadow:0px 2px #00000012, inset 0px 0px 0 1px #ffffff24;border-radius: 50%;
}

.ongoings {
    height: 148px;
    width: 85%;
    border-radius: 3px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center inside box */
    margin-left:80px;
}

.ongoingsinfo {
background-color: #0000008a;
height: 32px;
box-shadow: 0px 2px #00000021, inset 0px 0px 0 1px #ffffff3d;
border-radius: 3px;
margin-bottom: 4px;
font-size: 11px;
padding: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step {
    background:url(/images/headers/duckets.png),linear-gradient(to right bottom, #30bfdd, #29b7da, #23afd6, #20a7d2, #1f9fcd, #1f99c7, #1f92c1, #1f8cbb, #1d86b3, #1b80ab, #1a7ba4, #18759c);
    width: 100%;
    float: left;
    color: white;
    font-size: 18px;
    font-weight: 900;
    text-shadow: 1px 1px #00000094;
    margin: 0 -2% 20px;
    padding: 1% 2%;
}

.bg-tokens {
    background-color: #30bfdd;
}

.bg-tunes {
    background-color: #50c878;
}

.bg-stitch {
    background-color: #274155;
}

.bg-lny {
    background-color: #bd4545;
}

.bg-easter-pink {
    background-color: #FFA6F2;
}

.bg-easter-blue {
    background-color: #A6DDFF;
}

.bg-easter-green {
    background-color: #A6F59D;
}

.bg-valentines {
    background-color: #ea407e;
}

.bg-staffqa {
    background-color: #18759c;
}
.bg-solver {
    background-color: #df3f3f;
}

.showcase {
padding: 0 5px 0 5px;
margin-left:3px;
max-width: 150px;
border-radius: 3px;
box-shadow: inset 0 3px #ffffff1a;
color: #fff;
text-align: center;
font-weight: 700;
text-shadow: 1px 1px rgba(0,0,0,.2);
margin-bottom: .25rem;
display: inline-block !important;
}