/*----------------------------------------------------------------------------------------------------------------------
									Charte grahpique du wikiradio manager
----------------------------------------------------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic);

/*------------------------------------------------- Main components --------------------------------------------------*/
html
{

	color       : #222;
	font-family : 'Roboto', sans-serif;
	font-size   : 10px;
	background  : #fff;
}

body
{
	-webkit-overflow-scrolling : touch;
	font-size                  : 1.3rem;
	position                   : relative;
	-moz-box-sizing            : border-box;
	-webkit-box-sizing         : border-box;
	box-sizing                 : border-box;
}

h1
{
	font-size   : 2.4rem;
	font-weight : 500;
}

h2
{
	font-size   : 2rem;
	font-weight : 500;
	margin      : 0.7em 0;
}

h3
{
	font-size   : 1.6rem;
	font-weight : 400;
}

h4
{
	color       : #666;
	font-size   : 1.4rem;
	font-weight : 400;
}

h5
{
	font-weight : 600;
	font-size   : 1.3rem;
}

h6
{
	font-weight : 800;
	font-size   : 1.2rem;
}

em
{
	color      : #444;
	font-style : italic;
}

strong
{
	color       : #444;
	font-weight : 600;
}

/*----------------------------------------------------- Buttons ------------------------------------------------------*/
button
{
	background    : none;
	color         : #08c;
	border        : 0.1rem solid #08c;
	margin        : 0.5rem 0.5rem 0.5rem;
	font-weight   : normal;
	transition    : 0.3s background ease-in;
	font-size     : 1.2rem;
	padding       : 0.6em 1em;
	cursor        : pointer;
	border-radius : 5px;
	line-height   : 2rem;
}

button:hover
{
	color      : #fff;
	background : #08c;
}

button:hover:disabled
{
	color      : #999;
	background : none;
}

button:disabled
{
	color         : #999;
	border        : 0.1rem solid #999;
	cursor        : none;
	-ms-flex-wrap : wrap;
	flex-wrap     : wrap;
}

button.main
{
	background    : #08c;
	color         : #fff;
	border-radius : 5px;
}

button.main:hover
{
	background : #05679a;
}

button.main:disabled
{
	background : none;
	color      : #999;
	border     : 0.1rem solid #999;
}

button.main:disabled:hover
{
	background : none;
}

label
{
	margin      : 1em 0 0;
	display     : block;
	color       : #222;
	font-weight : 500;
	margin-left : 0;
}

/*----------------------------------------------------- Inputs -------------------------------------------------------*/

.saootigc-input-box
{
	display            : -ms-flexbox;
	display            : flex;
	-ms-flex-direction : column-reverse;
	flex-direction     : column-reverse;
	margin             : 0;
	position           : relative;
}

.saootigc-input-box input
{
	border-radius : 5px;
}

.saootigc-input-box .time-info
{
	line-height : 2em;
}

.saootigc-input-box .select2-container--default .select2-selection--single
{
	border        : 1px solid #ddd;
	border-radius : 5px;
}

.saootigc-input-box label
{
	color       : #222;
	font-weight : 500;
	cursor      : pointer;
}

.saootigc-input-box .error-message
{
	text-align : right;
	font-size  : 0.75rem;
}

/**--------------------------------------- Text input,Text area and select--------------------------------------------*/

.saootigc-input-box.error input[type='text'],
.saootigc-input-box.error input[type='password'],
.saootigc-input-box.error input[type='email'],
.saootigc-input-box.error input[type='tel'],
.saootigc-input-box.error textarea,
.saootigc-input-box.error select
{
	border-color : #e9573f;
}

.saootigc-input-box.error .error-message,
.saootigc-input-box.error input[type='text'] ~ label,
.saootigc-input-box.error input[type='password'] ~ label,
.saootigc-input-box.error input[type='email'] ~ label,
.saootigc-input-box.error input[type='tel'] ~ label,
.saootigc-input-box.error textarea ~ label,
.saootigc-input-box.error select ~ label
{
	color : #e9573f;
}

.saootigc-input-box input[type='text'],
.saootigc-input-box input[type='password'],
.saootigc-input-box input[type='email'],
.saootigc-input-box input[type='tel'],
.saootigc-input-box textarea,
.saootigc-input-box select
{
	margin        : 0.4rem 0;
	padding       : 0.7rem;
	border        : solid 0.1rem #ddd;
	box-sizing    : border-box;
	border-radius : 5px;
}

.saootigc-input-box textarea
{
	padding : 1rem;
}

.saootigc-input-box input[type='text']:focus,
.saootigc-input-box input[type='password']:focus,
.saootigc-input-box input[type='email']:focus,
.saootigc-input-box input[type='tel']:focus,
.saootigc-input-box textarea:focus,
.saootigc-input-box select:focus
{
	border  : solid 0.1rem #0d88c1;
	outline : none;
}

.saootigc-input-box input[type='text']:focus ~ label,
.saootigc-input-box input[type='password']:focus ~ label,
.saootigc-input-box input[type='email']:focus ~ label,
.saootigc-input-box input[type='tel']:focus ~ label,
.saootigc-input-box textarea:focus ~ label,
.saootigc-input-box select:focus ~ label
{
	color : #08c;
}

.saootigc-input-box #broadcast-kind
{
	margin : 0.4rem 0 3rem;
}

/**--------------------------------------------------- Checkbox  -----------------------------------------------------*/

.saootigc-input-box input[type='checkbox']:not(.toggle)
{
	opacity  : 0;
	height   : 0;
	margin   : 0;
	position : absolute;
	top      : 0;
}

.saootigc-input-box input[type='checkbox']:not(.toggle) ~ label
{
	position : relative;
	margin   : 1rem 0;
}

.saootigc-input-box input[type='checkbox']:not(.toggle) ~ label:before
{
	content        : '';
	width          : 1.5rem;
	height         : 1.5rem;
	display        : inline-block;
	border         : 0.1rem solid #bbb;
	background     : #fff;
	vertical-align : middle;
	margin-right   : 0.5em;
	font-size      : 1rem;
	border-radius  : 3px;
}

.saootigc-input-box input[type='checkbox']:not(.toggle):checked ~ label:before
{
	content     : "\2713";
	background  : #08c;
	line-height : 1.5rem;
	color       : #fff;
	text-align  : center;
	font-weight : 700;
}

/**--------------------------------------------------- Radio  -----------------------------------------------------*/

.saootigc-input-box input[type='radio']
{
	opacity  : 0;
	height   : 0;
	margin   : 0;
	position : absolute;
	top      : 0;
}

.saootigc-input-box input[type='radio'] ~ label
{
	position : relative;
	margin   : 1.2rem 0;
}

.saootigc-input-box input[type='radio'] ~ label:before
{
	width          : 2rem;
	height         : 2rem;
	top            : 0;
	left           : 0;
	content        : '';
	display        : inline-block;
	border         : 0.1rem solid #bbb;
	background     : #fff;
	vertical-align : middle;
	margin-right   : 0.5em;
	border-radius  : 4px;
}

.saootigc-input-box input[type='radio']:checked ~ label::after
{
	content          : "";
	background-color : #08c;
	position         : absolute;
	top              : 0.5rem;
	left             : 0.5rem;
	display          : inline-block;
	width            : 1.2rem;
	height           : 1.2rem;
	border-radius    : 2px;
}

/*--------------------------------------------------- Togglebox  -----------------------------------------------------*/

.saootigc-input-box input[type='checkbox'].toggle
{
	opacity  : 0;
	height   : 0;
	margin   : 0;
	position : absolute;
	top      : 0;
}

.saootigc-input-box input[type='checkbox'].toggle ~ label
{
	padding  : 0.2rem;
	position : relative;
}

.saootigc-input-box input[type='checkbox'].toggle ~ label:before
{
	width          : 4rem;
	height         : 2rem;
	border-radius  : 2rem;
	top            : 0;
	left           : 0;
	content        : '';
	display        : inline-block;
	border         : 0.2rem solid #999;
	background     : #fff;
	vertical-align : middle;
	margin-right   : 0.5em;
	transition     : border-color 0.2s;
}

.saootigc-input-box input[type='checkbox'].toggle ~ label:after
{
	content          : "";
	background-color : #999;
	position         : absolute;
	top              : 0.6rem;
	left             : 0.6rem;
	display          : inline-block;
	width            : 1.6rem;
	height           : 1.6rem;
	border-radius    : 1.6rem;
	transition       : background, transform 0.2s;
}

.saootigc-input-box input[type='checkbox'].toggle:checked ~ label:before
{
	border-color : #08f;
}

.saootigc-input-box input[type='checkbox'].toggle:checked ~ label:after
{
	background-color : #08f;
	transform        : translateX(2rem);
}

/*-------------------------------------------------- File input  -----------------------------------------------------*/

.saootigc-input-box input[type='file']
{
	opacity : 0;
	height  : 3rem;
}

.saootigc-input-box input[type='file'] ~ label
{
	min-height : 1.5rem;
	position   : relative;
}

.saootigc-input-box input[type='file'] ~ label::after
{
	background : #08c;
	content    : attr(lang);
	color      : #fff;
	position   : absolute;
	left       : 0;
	top        : 2rem;
	padding    : 0.5rem;
	cursor     : pointer;
}

.saootigc-input-box input[type='file'] ~ label:hover::after
{
	background : #05679a;
}

/*-------------------------------------------------- Progress Bar ----------------------------------------------------*/

.saootigc-progress-bar
{
	height   : 1.5rem;
	width    : 100%;
	position : relative;
	margin   : 0.2rem 0;
}

.saootigc-progress-bar::before
{
	content  : '';
	position : absolute;
	left     : 0;
	top      : 0;
	bottom   : 0;
	right    : 0;
	border   : #ccc solid 0.1rem;
	display  : block;
}

.saootigc-progress-bar .progress
{
	position   : absolute;
	top        : 0;
	bottom     : 0;
	left       : 0;
	background : #08c;
	transition : width 0.3s;
}

/*------------------------------------------------------ List --------------------------------------------------------*/
.saootigc-main-list
{
	display            : -ms-flexbox;
	display            : flex;
	-ms-flex-direction : column;
	flex-direction     : column;
	height             : 100%;
}

.saootigc-main-list .list-header
{
	background  : #ddd;
	color       : #222;
	font-size   : 1.4rem;
	padding     : 1rem;
	font-weight : 300;
}

.saootigc-main-list .list-content
{
	padding           : 0;
	margin            : 0;
	list-style        : none;
	-ms-flex-positive : 1;
	flex-grow         : 1;
	height            : 0;
	overflow-y        : auto;
	overflow-x        : hidden;
}

.saootigc-main-list .list-content .list-item
{
	cursor        : pointer;
	padding       : 0 0.2em;
	border-bottom : 0.1rem solid #eee;
	display       : -ms-flexbox;
	display       : flex;
}

.saootigc-main-list .list-content .list-item:last-child
{
	border-bottom : none;
}

.saootigc-main-list .list-content .list-item .list-image
{
	font-size  : 2.8rem;
	padding    : 0 1.5rem 0 0.5rem;
	-ms-flex   : 0 1 auto;
	flex       : 0 1 auto;
	margin     : auto;
	align-self : center;
}

.saootigc-main-list .list-content .list-item.selected .list-image
{
	color : #08c;
}

.saootigc-main-list .list-content .list-item.selected .list-text
{
	color : #08c;
}

.saootigc-main-list .list-content .list-item.selected .list-text .list-short-info .info
{
	color : #08c;
}

.saootigc-main-list .list-content .list-item.selected .list-text .list-description
{
	color : #08c;
}

.saootigc-main-list .list-content .list-item.selected .list-action-trigger
{
	color : #08c;
}

.saootigc-main-list .list-content .list-item .list-text
{
	-ms-flex-positive  : 1;
	flex-grow          : 1;
	-ms-flex-negative  : 1;
	flex-shrink        : 1;
	-ms-flex-basis     : 25%;
	flex-basis         : 25%;
	padding            : 1rem 0;
	overflow           : hidden;
	word-wrap          : break-word;
	display            : -ms-flexbox;
	display            : flex;
	-ms-flex-direction : column;
	flex-direction     : column;
}

.saootigc-main-list .list-content .list-item .list-text .list-title
{
	font-size     : 1.4rem;
	font-weight   : 300;
	text-overflow : ellipsis;
	overflow      : hidden;
}

.saootigc-main-list .list-content .list-item .list-text .list-description
{
	font-size     : 1rem;
	color         : #666;
	text-overflow : ellipsis;
	overflow      : hidden;
}

.saootigc-main-list .list-content .list-item .list-text .list-short-info
{
	font-size         : 1rem;
	font-weight       : 300;
	color             : #999;
	display           : -ms-flexbox;
	display           : flex;
	-ms-flex-positive : 0;
	flex-grow         : 1;
	-ms-flex-pack     : space-between;
	justify-content   : space-between;
	overflow          : hidden;
	text-overflow     : ellipsis;
}

.saootigc-main-list .list-content .list-item .list-action-trigger
{
	font-size         : 2.3rem;
	margin            : auto;
	-ms-flex-negative : 0;
	flex-shrink       : 0;
	-ms-flex-positive : 0;
	flex-grow         : 0;
	-ms-flex-basis    : auto;
	flex-basis        : auto;
	cursor            : pointer;
}

.saootigc-main-list .list-content .list-item .list-action
{
	-ms-flex-positive : 0;
	flex-grow         : 0;
	-ms-flex-negative : 1;
	flex-shrink       : 1;
	width             : 0;
	display           : -ms-flexbox;
	display           : flex;
	-ms-flex-pack     : center;
	justify-content   : center;
	-ms-flex-align    : center;
	align-items       : center;
	background        : #08c;
	overflow          : hidden;
}

.saootigc-main-list .list-content .list-item .list-action > .action
{
	font-size : 2rem;
	color     : #fff;
	padding   : 0 0.6rem;
}

.saootigc-main-list .list-content .list-item.panned .list-action
{
	width : auto;
}

/*------------------------------------------------------ Popup -------------------------------------------------------*/

.saootigc-popup
{
	border             : 0;
	max-width          : 100%;
	margin             : 5% 0;
	max-height         : 84vh;
	background         : #fff;
	display            : -ms-flexbox;
	display            : flex;
	-ms-flex-direction : column;
	flex-direction     : column;
	width              : 100%;
	-ms-flex-positive  : 1;
	flex-grow          : 1;
	border-radius      : 8px;
	overflow           : hidden;
}

.saootigc-popup .popup-header
{
	background        : #08c;
	color             : #fff;
	font-size         : 1.4rem;
	padding           : 1rem 1.5rem;
	display           : -ms-flexbox;
	display           : flex;
	-ms-flex-negative : 0;
	flex-shrink       : 0;
}

.saootigc-popup .popup-header .popup-title
{
	-ms-flex-positive : 1;
	flex-grow         : 1;
	text-align        : center;
}

.saootigc-popup .popup-header .popup-close
{
	-ms-flex-negative : 0;
	flex-shrink       : 0;
	cursor            : pointer;
	margin-left       : 1rem;
}

.saootigc-popup .popup-content
{
	padding           : 1rem 2rem;
	font-size         : 1.3rem;
	-ms-flex-positive : 1;
	flex-grow         : 1;
	overflow          : auto;
	height            : 0;
	max-height: 70vh;
}

.saootigc-popup .popup-content > *
{
	flex-shrink : 0;
}

.saootigc-popup .popup-button
{
	border-top      : 0.1rem solid #ddd;
	background      : #eee;
	display         : -ms-flexbox;
	display         : flex;
	-ms-flex-pack   : flex-end;
	justify-content : flex-end;
	flex-shrink     : 0;
}

.saootigc-popup .popup-button > button
{
	margin : 1em;
	cursor : pointer;
}

@media screen and (min-width : 1000px)
{
	.saootigc-popup
	{
		display           : -ms-flexbox;
		display           : flex;
		width             : auto;
		max-width         : 100%;
		-ms-flex-positive : inherit;
		flex-grow         : inherit;
	}

	.saootigc-popup .popup-content
	{
		-ms-flex-positive : inherit;
		flex-grow         : inherit;
		height            : auto;
		width             : 50rem;
		max-height: 70vh;
	}
	
}

/*------------------------------------------------ Notification stack ------------------------------------------------*/
.notification-stack
{
	position : fixed;
	top      : 0;
	right    : 0;
	z-index  : 10;
}

.notification-stack .notification-item
{
	display       : block;
	color         : #fff;
	width         : 20rem;
	border-radius : 0;
	margin        : 1em;
	font-weight   : 300;
}

.notification-stack .notification-item .close-notif.saooti-remove-bounty
{
	float  : right;
	margin : 0.5rem;
	cursor : pointer;
}

.notification-stack .notification-item h3
{
	font-size : 1.3rem;
	padding   : 1rem 1rem 0;
	margin    : 0;
}

.notification-stack .notification-item p
{
	margin  : 0;
	padding : 0.5em 1em 1em;
}

.notification-stack .notification-item p em
{
	margin     : 0;
	padding    : 0.5em 0;
	font-style : italic;
	display    : block;
	color      : #fff;
	text-align : center;
}

.notification-stack .notification-item.error
{
	background : #e9573f;
	border     : 0;
}

.notification-stack .notification-item.warn
{
	background : #f6bb42;
	border     : 0;
}

.notification-stack .notification-item.info
{
	background : #8cc152;
	border     : 0;
}