#myGroups {
	color:#fff;
}

#myGroups .container-fluid:first-child .container:first-child {
	padding-top:20px;
	padding-bottom:20px;
}
#myGroups .container-fluid:not(:first-child) {
	padding-top:20px;
	padding-bottom:20px;
}
#myGroups .container-fluid:last-child {
	padding-bottom:40px;
}

#myGroups .myGroupsHeaderPicture {
	background-image: url('../images/688099.jpg');
}

#myGroups .myGroupsHeader {
	display:inline-block;
	padding: 10px;
	text-decoration: none;
    font-weight: 600;
    font-size: 36px;
    color:#c0c0c0; 
    width:100%;
    border-bottom: 1px solid  #c0c0c0;
}
#myGroups .createGroup {
	line-height: 1.25;
    padding: 0.5rem 0rem;
}
#myGroups .btnCreateGroup {
	font-size:14px;
}
.form.col-xs-12.no-padding {
	padding-top:20px;
}

/* ADD GROUP */
#myGroups form {
	
	padding-top:20px;
}
#myGroups .form-check-input {
	margin-top:7px;
	padding-left:10px;
}
/* FIELDSET */
#myGroups fieldset {
	padding: 5px 10px 5px 10px;
	margin-bottom: 20px;
    border: 1px solid #dbdbdb;
    background-color: #fff;
    border-radius: 10px;
}
#myGroups legend {
	width: initial;
	font-size: medium;
	margin-bottom:0;
	height: 42px;
}
#myGroups .fieldset-header{
    margin-top: -20px;
    margin-left: 40px;
    color:#449d44!important;
    font-size: 24px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-weight:600;
}
#myGroups .fa-circle {
	color:#5cb85c!important;
}

/* BLOCKQUOTE */
#myGroups .blockquote p {
	margin-bottom: 0;
	color:#474d59;
	display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#myGroups .blockquote {
	background-color: #f7f7f9;
	border-left: #fff;
	margin:0;
}
#myGroups .blockquote:hover {
	background-color: #eef8ee;
	border-left: 2px solid #5cb85c;
	cursor:pointer;
}
#myGroups .blockquote-footer {
    position: relative;
}
#myGroups .quote-overflow {
	width: 70%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    top: 2px;
}
#myGroups .onLeave {
	position: absolute;
    top: 8px;
    right: 28px;
    padding: 6px 8px;
	z-index: 5;
	cursor: pointer;
	color: #818a91;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 4px;
	line-height: 1;
}
#myGroups .onLeave > .fa{
	margin-right: 0;
}
#myGroups .onLeave:hover {
	background-color: #c0c0c0;
	color: #333;
}

#myGroups .onJoin {
	position: absolute;
    top: 8px;
    right: 28px;
    padding: 6px 8px;
	z-index: 5;
	cursor: pointer;
	color: #5cb85c;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 4px;
	line-height: 1;
}
#myGroups .onJoin > .fa{
	margin-right: 0;
}
#myGroups .onJoin:hover {
	background-color: #c0c0c0;
	color: #333;
}

/* Kaart-wrapper: anker voor absolute join/leave-icoon */
#myGroups #myGroupsOverview > .row > [class*="col-"],
#myGroups #otherGroups .row > [class*="col-"] {
	position: relative;
}
@media (max-width: 575px) {
	#myGroups .fieldset-header {
		margin-left:0;
	}
	#myGroups .quote-overflow {
		width: 70%;
	}
}

@media (max-width: 450px) {
	#myGroups .quote-overflow {
		width: 55%;
	}
}

/* ---- Warm page polish ---- */
#myGroups {
	color: #6a635c !important;
}
#myGroups .myGroupsHeaderPicture {
	background-image: none !important;
}
#myGroups .mygroups-intro {
	color: #6a635c;
	margin: 0.4rem 0 0;
}
#myGroups .mygroups-intro strong {
	color: #1e1a17;
}
#myGroups .fa-circle {
	color: #5cb85c !important;
}
#myGroups .blockquote {
	border: 1px solid #e6e2dc;
	border-radius: 14px;
	background: #f3f1ed;
	padding: 0.9rem 1rem;
}
#myGroups .container-fluid {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
#myGroups .mygroups-intro .fa-link,
#myGroups .mygroups-available-hint .fa-link {
	color: #449d44;
}