/*****************/
/* Switch button */
/*****************/

.switch-button {
	position: relative;
    width: 56px;
	height: 24px;
    cursor: pointer;
	color: white;
	font-size: 11px;
	border-radius: 6px;
}

.switch-button.on{
	background-color: #EEBE53;
}
.switch-button.off{
	background-color: grey;
}
.switch-button span.on {
    position: relative;
	top: 7px;
	left: 9px;
}
.switch-button .block {
	display: inline-block;
    position: absolute;
    top: 3px;
    left: 7px;
    width: 17px;
    height: 17px;
    background-color: white;
    border-radius: 4px;
}

.switch-button .block.block-off {
    left: 7px;
}

.switch-button .block.block-on {
	left: 29px;
}

.switch-button span.off {
    position: relative;
	top: 7px;
	left: 15px;
}

/**********/
/* Slider */
/**********/

.slider {
	display: inline-flex;
	flex-direction: column;
	margin-right: 15px;
    margin-left: 15px;    
    justify-content: center;    
}

.slider button {
	padding: 1px 6px 1px 6px;
	color: #3A3668;
	background-color: #DEDEE8;
	border-radius: 3px;
}

.slider .outer {
    display: flex;
}

.slider .outer.vertical {
    flex-direction: column;
}

.slider .outer.horizontal{
    flex-direction: row;
}

.slider button{
    width: 20px;
	height: 20px;
}


/***********************************/
/* Material UI customized sliders  */
/***********************************/

.MuiSlider-root {
    color: #EEBE53 !important;
}

.MuiSlider-thumb {
	border-radius: 10% !important;
	border: 1px solid #3A3668 !important;
    background-color: #DEDEE8 !important;
} 

.MuiSlider-thumb::after {
    border-radius: 10% !important;
}

.MuiSlider-valueLabel > span > span {
    color: #3A3668 !important;
}

.MuiSlider-rail {
    background-color: #DEDEE8 !important;
}

.MuiSlider-track {
    background-color:  #EEBE53 !important;;
}

/* Spread logo */

.spread-logo {
	position: relative;
	display: flex;
	justify-content: center;
}

.spread-logo .text {
    font-size: 25px;
	font-weight: bold;
	letter-spacing: 3.9px;
	color: #3A3668;
	text-transform: uppercase;
    margin-left: 5px;
}

.spread-logo .logo-img {
    display: inline-block;
	position: relative;
    width: 47px;
	height: 35px;
}

/********************/
/* Collapsible tabs */
/********************/
.collapsible-tabs {
	display: flex;
	flex-direction: column;
	min-height: 0px;    
}

.collapsible-tabs .tab {
	min-height: 50px;
    display: flex;
    flex-direction: column;    
}

.collapsible-tabs .tab > .title {
    font-weight: bold;
    display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #E2E2EA;
    padding: 10px 5px 10px 5px;
	color: #3A3668;
	cursor: pointer;    
}

.collapsible-tabs .tab > .title > .text {
	display: flex;
	align-items: center;
}

.collapsible-tabs .tab > .title > .text img {
	margin-right: 10px;
}

.collapsible-tabs .tab > .title img.arrow.open {
    transform: rotateZ(180deg);
}

.collapsible-tabs .tab-body {
	min-height: 0px;
    padding: 10px;
	overflow: hidden;
	border-bottom: 1px solid #E2E2EA;
}

.collapsible-tabs .tab-body.open {    
	min-height: 0px;
	overflow: auto;    
}

.collapsible-tabs .tab-body.collapsed {
    
    display: none;
}

.collapsible-tabs .tab .badge {
	border: 1px solid;
	padding: 3px;
	border-radius: 5px;
	font-size: 10px;
	background-color: #FBFCFE;
}

.collapsible-tabs .tab .badge.new {
	color: #3428CA;
}

.collapsible-tabs .tab .badge.error {
	color: #B20707;
}