.tl.groupper{
   position: relative;
   background-color: white;
   /* box-shadow: 0 -1px 5px rgba(0,0,0,0.1), 0 1px 5px rgba(0,0,0,0.1); */
	/* box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 -1px 2px rgba(0,0,0,0.07); */
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
   padding: 1.5em;
	margin: 10px;
	
	border-radius: 8px;
}

.tl.groupper .tl.divider{
	height: 1px;
	border-bottom: #F1F1F1 1px solid;
	margin: 0 -21px;
	width: calc(100% + 42px);
}

.tl.slim.groupper .tl.divider{
	margin: 0 -10px;
	width: calc(100% + 20px);
}

.tl.groupper form{
	margin-bottom: 0;
}
.tl.flat.groupper{
   box-shadow: none;
   border: #f5f5f5 1px solid;
}

.tl.groupper.fitted{
   margin: 0;
}
.tl.groupper.slim{
   padding: 5px 10px 10px 10px;
}
.tl.slim.extra.groupper{
	padding: 0;
}

.tl.groupper .segment{
	margin: 0 -21px;
	width: calc(100% + 42px);
	padding: 0 20px;
	position: relative;
}

.tl.groupper .segment.loading::before{
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   background: rgba(255,255,255,.8);
   width: 100%;
   height: 100%;
	z-index: 100;
}
.tl.groupper .segment.loading::after{
   position: absolute;
   content: '';
   top: 50%;
   left: 50%;
   width: 3em;
   height: 3em;
   margin: -1.5em 0 0 -1.5em;
   -webkit-animation: segment-spin .6s linear;
   animation: segment-spin .6s linear;
      animation-iteration-count: 1;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   border-radius: 500rem;
   border-color: #767676 rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1);
   border-style: solid;
   border-width: .2em;
   box-shadow: 0 0 0 1px transparent;
   visibility: visible;
   z-index: 101;
}

.tl.disabled.groupper::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	background: rgba(255,255,255,.7);
	width: 100%;
	height: 100%;
	z-index: 100;
	border-radius: 4px;
}

.tl.loading.groupper::before{
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   background: rgba(255,255,255,.8);
   width: 100%;
   height: 100%;
	border-radius: 8px;
   z-index: 100;
}
.tl.loading.groupper::after{
   position: absolute;
   content: '';
   top: 50%;
   left: 50%;
   width: 3em;
   height: 3em;
   margin: -1.5em 0 0 -1.5em;
   -webkit-animation: segment-spin .6s linear;
   animation: segment-spin .6s linear;
      animation-iteration-count: 1;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   border-radius: 500rem;
   border-color: #767676 rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1);
   border-style: solid;
   border-width: .2em;
   box-shadow: 0 0 0 1px transparent;
   visibility: visible;
   z-index: 101;
}

.tl.groupper .topper{
   width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
   border-bottom: #F1F1F1 1px solid;
   padding-bottom: 20px;
   margin-bottom: 20px;
}
.tl.groupper .divided.topper .section{
   border-right: #F1F1F1 1px solid;
}
.tl.groupper .divided.topper .section:last-child{
   border-right: none;
}
.tl.groupper .topper .section{
   /* background-color: red; */
   width: 100%;
   padding: 0 20px;
}
.tl.groupper .topper .section:first-child{
   padding-left: 0;
}
.tl.groupper .topper .section:last-child{
   padding-right: 0;
}
.tl.groupper .two.topper .section{
   width: 50%;
}
.tl.groupper .three.topper .section{
   width: 33%;
}

.tl.groupper .groupper-fill{
	margin-left: -21px;
	margin-right: -21px;
}

.tl.groupper .head{
	margin: -21px -21px;
	margin-bottom: 20px;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	/* background-color: #eeeeee; */
	/* background-color: #404040; */
	background-color: #151717;
	color: #f5f5f5 !important;
	padding: 10px 15px;
}

/* .tl.groupper .head:not(.clear){
	font-size: 2em;
	font-weight: 800;
	padding: 5px 0;
	line-height: 1em;
	text-align: center;
	color: #f5f5f5;
} */

.tl.groupper .head .tl.header{
	color: #f5f5f5;
}
.tl.groupper .white.head{
	background-color: white;
	border-bottom: #F1F1F1 1px solid;
	color: #151717 !important;
}
.tl.groupper .white.head > .tl.header{
	color: #151717;
}

.tl.groupper.slim .head{
	margin: -5px -10px;
	margin-bottom: 10px;
}
.tl.groupper.extra.slim .head{
	margin: 0;
	margin-bottom: 10px;
}

.tl.groupper .head .tl.header{
	margin-bottom: 0;
}
.tl.groupper .head .tl.header .sub.header{
	color: #b9b9b9 !important;
}

.tl.groupper .sub.head{
	background-color: #eeeeee;
	margin-top: 30px;
	color: #151717 !important;
	border-radius: 0;
}
.tl.groupper .sub.head .tl.header{
	color: #151717 !important;
}
.tl.groupper .sub.head .tl.header .sub.header{
	color: #404040 !important;
}

.tl.groupper .actions{
	margin: -21px;
	margin-top: 20px;
	background-color: #eeeeee;
	padding: 10px;
	text-align: right;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	justify-content: flex-end;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}

.tl.groupper.slim .actions{
	margin: -10px;
	margin-top: 10px;
}
.tl.groupper.slim .actions{
	margin: 0px;
	margin-top: 10px;
}

.tl.groupper .actions > .left{
   float: left;
   padding: 10px 5px;
}

.tl.centered.groupper{
   margin: auto;
}

.tl.mini.groupper{
   max-width: 400px;
   width: 100%;
}

.tl.slim.groupper .tl.items{
	margin: 0 -10px;
	width: calc(100% + 20px);
}

.tl.groupper .tl.items{
	margin: 0 -21px;
	width: calc(100% + 42px);
}
.tl.groupper .tl.items .item{
	cursor: pointer;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}
.tl.groupper .tl.items .item > .grow{
	flex-grow: 100;
}
.tl.groupper .tl.items .item > .flex{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}

.tl.groupper .tl.full.expando{
	width: 100%;
	margin: 0 -21px;
	width: calc(100% + 42px);
}
.tl.groupper .tl.full.expando .title{
	padding:  12px 20px;
}
.tl.groupper .tl.full.expando > .item > .content{
	padding: 20px;
	padding-top: 0;
}

.tl.groupper .divisor{
	width: 100%;
	margin: 20px -21px;
	width: calc(100% + 42px);
}

/* ========================================================================== */
/* SCROLL */
/* ========================================================================== */
.tl.scroll.groupper{
	padding: 0;
}
.tl.scroll.groupper .head{
	margin: 0;
}
.tl.scroll.groupper .scroll{
	padding: 10px;
	height: 300px;
	overflow-y: auto;
	padding-top: 0;
}
.tl.scroll.groupper .scroll .tl.items{
	margin: 0 -10px;
	width: calc(100% + 20px);
}
.tl.scroll.groupper .actions{
	margin: 0;
}

@media screen and (max-width: 768px){
	.tl.groupper .topper{
		flex-wrap: wrap !important;
		display: block;
		border-bottom: 0;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.tl.groupper .topper .section{
		width: 100% !important;
		padding: 20px 0;
		border-bottom: #F1F1F1 1px solid;
	}
	.tl.groupper .topper .section:first-child{
		padding-top: 0px;
	}
	.tl.groupper .topper.divided .section{
		border-right: 0;
	}
	.tl.groupper .topper .section:last-child{
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
}