/*Rundown CSS vBote*/
html {
	height: 100%;
	width: 100%;
	overflow: hidden !important;
	/*activate the GPU for compositing each page */
	-webkit-transform: translate3d(0, 0, 0);
}

body {
	background-color: #fafafa !important;
	margin-top: 0px;
	outline-color: transparent;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-tap-highlight-color: transparent;
}
.announcement-badge {
	position: absolute;
	right: 119px !important;
    top: 16px; 
	border-radius: 50%;
	background-color: red;
	color: white;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 1px;
	padding-bottom: 1px;
    margin-left: 6px;
    font-size: 0.80em;
  }

.badge {
	/*position: absolute;
	top: -10px;
	right: -10px;
	padding: 5px 10px;*/
	border-radius: 50%;
	background-color: red;
	color: white;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 1px;
	padding-bottom: 1px;
    /*margin-left: 6px;*/
    font-size: 0.80em;
  }
/*
a{
	text-decoration: none!important;
	color: inherit!important;
}
a:hover {
   	text-decoration: none!important;
	color: inherit!important;
}*/

/* transition overall disabler */
.disableAnimations * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

li.comp>div {
	border-bottom: 0px none !important;
}

li.comp {
	border-bottom: 1px solid rgba(0, 0, 0, .15);
	/*-webkit-transition: all 200ms ease-in-out 0s;
	-moz-transition: all 200ms ease-in-out 0s;
	-ms-transition: all 200ms ease-in-out 0s;
	-o-transition: all 200ms ease-in-out 0s;
	transition: all 200ms ease-in-out 0s;*/
}

.list {
	border-top: 1px solid rgba(0, 0, 0, .15);
	border-bottom: 0px none;
	margin-bottom: 51px;
	-webkit-overflow-scrolling: touch;
}

a.button.back::before,
a.button.backTo::before {
	background-color: transparent !important;
	-webkit-mask-image: initial !important;
}

/*.current a.button.back, .current a.button.backTo, .current a.button{
	height: 44px;
	padding: 0px!important;
}
.current .back i, .current .button  i{
	line-height: 44px;
	color: #333;
}*/
.current h1 {
	font-weight: bold;
	/*top: 7px !important;*/
}

.tabbar i {
	line-height: 50px;
}

.thin {
	font-weight: normal !important;
}

.bold {
	font-weight: bold !important;
}

article>section {
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/*Chocolate UI default*/
.icon {
	height: 40px;
	width: 40px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 70%;
}

.icon.weather {
	background-color: #29abe2;
	background-image: url(/images/app-icons/weather.png);
	background-size: 70% auto;
}

.icon.mail {
	background-color: #52c5d0;
	background-image: url(/images/app-icons/mail.png);
	background-size: 70% auto;
}

.icon.music {
	background-color: #f38133;
	background-image: url(/images/app-icons/music.png);
}

.icon.browser {
	background-color: #ed453a;
	background-image: url(/images/app-icons/browser.png);
}

.icon.app {
	background-color: #6ec05c;
	background-image: url(/images/app-icons/app.png);
}

/* Border Radius for each OS: */
.isiOS .icon {
	border-radius: 10px;
}

.isAndroid .icon {
	border-radius: 50%;
}

.isWin .icon {
	border-radius: 0;
}

.isiOS .popover-buttons,
.isDesktopSafari.popover-buttons {
	margin-bottom: 20px;
	padding: 0 40px;
}

.isiOS .popover-buttons>.button,
.isDesktopSafari.popover-buttons>.button {
	display: -webkit-box;
	display: -webkit-flex;
	border: solid 1px #007aff;
	padding: 4px 15px;
	border-left: none;
	background-color: rgba(255, 255, 255, .65);
	width: auto;
	overflow-x: hidden;
	-webkit-transition: none;
	transition: none;
	font-size: 10pt;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	-webkit-box-flex: 1;
	-wekbit-flex: 1;
	text-align: center;
}

.isiOS .popover-buttons,
.isDesktopSafari .popover-buttons {}

.isiOS .popover-buttons,
.isDesktopSafari .popover-buttons .popover-buttons>.button:first-of-type {
	border-left: solid 1px #007aff;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.isiOS .popover-buttons>.button:first-of-type,
.isDesktopSafari .popover-buttons>.button:first-of-type {
	border-left: solid 1px #007aff;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.isiOS .popover-buttons>.button:last-of-type,
.isDesktopSafari .popover-buttons>.button:last-of-type {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.isDesktopSafari .popover-buttons>.button:hover {
	color: #fff;
	background-color: #007aff;
}

/*Style navbar buttons*/
nav {
	background-color: #FFFFFF;
	color: #333333;
	height: 62px;
}

nav>h1 {
	overflow: visible;
}

h1.nav-section-rundown {
	left: 60px !important;
}

h1.nav-section-editor,
h1.nav-section-editor-info {
	left: 50px;
	right: 54px;
	top: 0 !important;
}
#sequenceDataEditorInfo {
	top: 10px;
}

h1.nav-section-init {
	left: 50px;
	text-align: left !important;
}

.logo {
	position: absolute;
	float: left;
	width: 60px;
	height: 60px;
	background-image: url('../img/logo-rundown.png');
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	left: 0px;
	top: 0px;
}

.navtap {
	height: 54px !important;
	top: 3px !important;
	width: 54px !important;
	right: 5px !important;
	text-align: center !important;
	background: #0099cc !important;
	border-radius: 5px;
}

.navtap.OptionsListSelected {
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	flex-wrap: wrap;
	align-content: stretch;
	align-items: center;
	align-self: center;
	padding: 18px 0 !important;
	line-height: 60px;
}

.nav-logo-container {
	/*width: 140px;*/
	max-width: 180px;
	height: 70px;
	margin: 0 auto;
	margin-top: -4px;
	text-align: center;
	/*background-image: url(/img/logo-mediaprome-plc.svg);*/
	background-position: center;
	background-size: contain;
	/*display: flex;
    flex-direction: row;
	justify-content: center;*/

}
.rundown-picture-container {
	/*width: 140px;*/
	max-width: 380px;
	height: 270px;
	margin: 0 auto;
	margin-top: 24px;
	text-align: center;
	/*background-image: url(/img/logo-mediaprome-plc.svg);*/
	background-position: center;
	background-size: contain;
	/*display: flex;
    flex-direction: row;
	justify-content: center;*/

}

a.button.custom-button {
	cursor: pointer;
	position: relative;
	max-width: 120px;
	min-width: 120px;
	margin: 0 5px;
	height: 42px;
	line-height: 42px;
	display: block;
	line-height: 30px;
	font-weight: normal;
	font-size: 15px;
	/*text-transform: uppercase;*/
	padding: 8px 0;
	color: #FFFFFF;
	border-radius: 4px;
}
a.button.custom-button.cancelBt {
	color: #333333;
}
a.button {
	color: #FFFFFF;
	border-color: #0099CC;
}

a.button.back.navtap,
a.button.backToMain.navtap,
a.button.goToInit.navtap,
a.button.backStyle.navtap {
	height: 60px !important;
	/*top: 0px!important;*/
	width: 60px !important;
	left: 0px !important;
	text-align: center !important;
	background: transparent !important;
	/*border-right: 1px solid #000;*/
	position: absolute;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	flex-wrap: wrap;
	align-content: stretch;
	align-items: center;
	align-self: center;
	padding: 18px 0 !important;
	line-height: 60px;
	border-radius: 0;
}

a.button.button-announcement-info.navtap {
	right: 112px !important;
	height: 60px !important;
	text-align: center !important;
	background: transparent !important;
	/*border-right: 1px solid #000;*/
	position: absolute;
	cursor: pointer;
	line-height: 60px;
	border-radius: 0;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	flex-wrap: wrap;
	align-content: stretch;
	align-items: center;
	align-self: center;
	padding: 18px 0 !important;
}
 a.button.button-share-info.navtap {
	height: 60px !important;
	/*top: 0px!important;*/
	width: 60px !important;
	right: 62px !important;
	text-align: center !important;
	background: transparent !important;
	/*border-right: 1px solid #000;*/
	position: absolute;
	cursor: pointer;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	flex-wrap: wrap;
	align-content: stretch;
	align-items: center;
	align-self: center;
	padding: 16px 0 !important;
	line-height: 60px;
	border-radius: 0;
}
a.button.button-edit-info.navtap {
	height: 60px !important;
	/*top: 0px!important;*/
	width: 60px !important;
	right: 62px !important;
	text-align: center !important;
	background: transparent !important;
	/*border-right: 1px solid #000;*/
	position: absolute;
	cursor: pointer;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	flex-wrap: wrap;
	align-content: stretch;
	align-items: center;
	align-self: center;
	padding: 18px 0 !important;
	line-height: 60px;
	border-radius: 0;
}

a.button.button-edit-info.navtap i,
a.button.button-share-info.navtap i,
a.button.button-announcement-info.navtap i {
	color: #333;
}

/*a.button-edit-info{
	float: right;
	position: absolute;
	right: 61px;
	height: 60px;
	width: 60px;
	line-height: 60px;
	font-size: 20px;
	border-left: 1px solid #000;
	text-align: center;
	color: #fff;
	cursor: pointer;
	top: 0px;	
}*/
a.button-edit-info:hover,
a.button-share-info:hover {
	color: #999;
}

.current .back i,
.current .backTo i,
.current .button i {
	color: #fff;
	text-align: center;
}

.current .button.backStyle i {
	color: #333333;
}

.head-info-sequence {
	width: 100%;
	height: 60px;
	float: left;
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
	/*padding-top: 15px;*/
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	justify-content: center;
}

.onair-panel {
	float: right;
	padding: 0px 3px;
	border: 2px solid #666;
	position: absolute;
	right: 50px;
	top: 22px;
	font-size: 0.9em;
	color: #666;
	width: 60px;
	height: 20px;
	border-radius: 2px;
}

.onair-panel.red {
	color: #fff;
	border-color: #fff;
	background-color: #ff3333 !important;
	-webkit-animation-name: indicator2;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-play-state: running;
	animation-name: indicator2;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
}

span.rundown-name {
	font-weight: bold;
	position: relative;
	font-size: 1em;
	/*bottom: 4px;*/
	text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    display: block;
}
}

div.led {
	display: none;
	margin: auto 0px auto 10px;
	height: 18px;
	width: 18px;
	/*border: 1px solid #000;*/
	border-radius: 100%;
	background-color: #444;
	float: right;
	right: 12px;
	top: 16px;
	position: absolute;
}

div.led.red {
	background-color: #ff3333 !important;
	-webkit-animation-name: indicator2;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-play-state: running;
	animation-name: indicator2;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
}

@-webkit-keyframes indicator2 {
	from {
		background-color: #FF6666;
	}

	to {
		background-color: #FF3333;
	}
}

@keyframes indicator2 {
	from {
		background-color: #FF6666;
	}

	to {
		background-color: #FF3333;
	}
}

.onair-panel.onairPause {
	background-image: url(../img/pause-onair.png);
	background-position: center;
	background-repeat: no-repeat;
	color: transparent;
	background-color: #FF6600 !important;
	background-size: 20%;
	border-color: #FFF;
	-webkit-animation-name: indicator3 !important;
	-webkit-animation-duration: 0.5s !important;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-play-state: running;
	animation-name: indicator3 !important;
	animation-duration: 0.5s !important;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
}

@-webkit-keyframes indicator3 {
	from {
		opacity: 1;
	}

	to {
		opacity: .6;
	}
}

@keyframes indicator3 {
	from {
		opacity: 1;
	}

	to {
		opacity: .6;
	}
}

div.led.onairPause {
	background-image: url(../img/pause-onair.png);
	background-position: 5px;
	background-repeat: no-repeat;
	color: transparent;
	background-color: #FF6600 !important;
	background-size: 49%;
	-webkit-animation-name: indicator3 !important;
	-webkit-animation-duration: 0.5s !important;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-play-state: running;
	animation-name: indicator3 !important;
	animation-duration: 0.5s !important;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
}

span.sequence-name-head {
	position: relative;
	color: #999;
	margin-left: 0;
	font-size: 0.75em;
	top: 0;
}

/*Style name panel*/
.name-panel {
	width: 100%;
	position: absolute;
	top: -115px;
	height: 20px;
	float: left;
	border-bottom: 1px solid rgba(0, 0, 0, .15);
	padding: 0px 5px;
	line-height: 20px;
	background: #fff;
	font-weight: bold;
	font-size: 0.9em;
	display: none;
}

/*Styles action panel*/

.action-panel {
	width: 100%;
	position: absolute;
	top: -92px;
	height: 102px;
	float: left;
	background: #fff;
	border-bottom: 1px solid #bbb;
}

article.article-action-panel {
	top: 152px;
	overflow: visible;
}

article.article-action-panel-without-top {
	top: 60px !important;
	overflow: visible;
}

article.article-action-panel>section article.article-action-panel-without-top>section {
	padding-top: 0px;
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
	top: 10px;
	float: left;
	left: 0px;
	height: 100%;
	min-height: 0px !important;
}

.panel-timers {
	float: left;
	position: relative;
	left: 5px;
	top: 5px;
	max-width: 480px;
	height: 92px;
	background-color: #E8E8E8;
	border-radius: 5px;
}

.panel-controls {
	float: right;
	position: absolute;
	width: auto;
	height: 92px;
	top: 5px;
	right: 5px;
	background-color: #E8E8E8;
	border-radius: 5px;
}

.more-clocks {
	display: none;
	font-size: 20px;
	width: 20px;
	height: 38px;
	float: right;
	position: absolute;
	line-height: 38px;
	text-align: center;
	color: #888;
	cursor: pointer;
}

.panel-timers ul {
	padding: 3px 0px 0px;
	margin: 0px;
	width: 475px;
	display: table;
}

.panel-timers ul li {
	list-style: none;
	display: table-row;
}

.panel-timers ul li span {
	display: table-cell;
	padding: 0px 5px;
	vertical-align: middle;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 110px;
	max-width: 110px;
	min-width: 110px;
}

.panel-timers ul>li:first-of-type {
	font-size: 0.75em;
	height: 10px;
	/*color: #888;*/
}

.panel-timers ul li span.success,
.panel-timers ul li span.danger {
	font-size: 2.8em;
	height: 20px;
	line-height: 40px;
}

.panel-timers ul.small-timers>li:last-of-type span {
	font-size: 1.1em;
}

.panel-timers ul.large-timers {
	padding-top: 0px;
}

.panel-timers ul.large-timers li span {
	width: 230px;
	max-width: 230px;
	min-width: 230px;
}

.panel-controls button {
	float: left;
	position: relative;
	width: 70px;
	text-align: center;
	/*line-height: 92px;*/
	cursor: pointer;
	background-color: transparent;
	border: 0px none;
	cursor: pointer;
	height: 70px;
	background-size: 5em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 60%;
	margin: 10px 5px;
	outline: none;
}

/** Guest Mode **/
.guest-mode-container {
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	align-items: stretch;
	align-content: stretch;
	padding: 25px;
}

.guest-mode-title {
	font-size: 1.1em;
	color: #0099CC;
	text-transform: uppercase;
	font-weight: bold;
}

.guest-mode-user {
	font-size: 0.9em;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 100%;
}

.btnAir {
	background-image: url(../img/onair-black.png);
	background-size: 6.5em;
}

.btnPause {
	background-image: url(../img/pause.svg);
}

.btnStop {
	background-image: url(../img/stop.svg);
}

.btnStop.btnStopActive,
.btnStopActive {
	background-image: url(../img/stop-active.svg);
}

.btnNext {
	background-image: url(../img/next.svg);
	z-index: 5;
}

.btnPauseActive {
	background-image: url(../img/pause-active.svg);
}

.btnNextActive {
	background-image: url(../img/next-active.svg);
	z-index: 5;
}

.disabled {
	opacity: 0.25;
	cursor: not-allowed !important;
}

.btnPlay {
	background-image: url(../img/play-active.svg);
}

.btnPlay.btnPauseActive {
	background-image: url(../img/pause-active.svg) !important;
}

.btnPlayActive {
	background-image: url(../img/play-active.svg);
}

.disableAnimations>.btnAirActive {
	-webkit-transition: all 0 ease 0 !important;
	-moz-transition: all 0 ease 0 !important;
	-o-transition: all 0 ease 0 !important;
	-ms-transition: all 0 ease 0 !important;
	transition: all 0 ease 0 !important;
}

.btn-default.disabled {
	opacity: 0.65;
	pointer-events: none;
}

/*.indicator{
	height: 78px;
	width: 78px;
	float: right;
	position: absolute;
	right: 15px;
	top: 7px;
	z-index: 0;
}*/
.btnNextActive.btnAirActive {
	background-image: url(../img/next-active-white-blink.svg);
	/* Chrome, Safari, Opera */
	webkit-animation-name: parpadeo;
	-webkit-animation-duration: 0.8s !important;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-play-state: running;
	/* Standard syntax */
	animation-name: parpadeo;
	animation-duration: 0.8s !important;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
}

/*@-webkit-keyframes indicator {
	from {
		background-image: url(../img/next-active-black.png);
	}

	to {
		background-image: url(../img/next-active-black-blink.png);
	}
}
@keyframes indicator {
	from {
		background-image: url(../img/next-active-black.png);
	}

	to {
		background-image: url(../img/next-active-black-blink.png);
	}
}*/
@-moz-keyframes parpadeo {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

@-webkit-keyframes parpadeo {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

@keyframes parpadeo {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

/** Switcher **/
.switch.on {
	border-color: #0099cc !important;
	box-shadow: inset 0 0 0 15px #0099CC !important;
	-webkit-animation-name: none;
	animation-name: none;
}

#dateForceModeSelector .switch {
	height: 26px;
	width: 50px;
	top: 2px;
}

#dateForceModeSelector .switch>em {
	height: 22px;
	width: 22px;
}

/*Style info panel*/
.info-panel {
	width: 100%;
	position: absolute;
	height: 20px;
	float: left;
	padding: 0px;
	line-height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	top: 10px;
	z-index: 99;
	background: #fff;
	border-bottom: 1px solid #bbb;

}

.info-panel p {
	float: left;
	position: relative;
	font-size: 0.8em;
	margin: 0px 5px 0px 0px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-bottom: 1px dotted rgba(0, 0, 0, .15);
	padding-bottom: 5px;
	width: 98%;
}

.info-panel p:first-of-type {
	/*margin-top: 0px;*/
}

.info-panel p:last-of-type {
	border-bottom: 0px none;
	padding-bottom: 0px;
}

.info-panel .more-info-panel {
	position: absolute;
	float: right;
	background-color: #ddd;
	font-weight: bold;
	top: 0px;
	right: 0px;
	min-width: 100px;
	border-left: 1px solid #bbb;
	padding: 0px 0px 0px 5px;
	font-size: 0.8em;
	cursor: pointer;
	z-index: 5;
	text-align: center;

}

.info-panel .more-info-panel i:last-of-type {
	width: 100%;
}

.info-panel .more-info-panel i:last-of-type:hover {
	color: #0099cc;
}

.info-panel.openInfo {
	height: auto;
	background-color: #fff;
	z-index: 15;
	padding: 5px 10px 35px 10px;
	-webkit-transition: top 200ms linear 0s !important;
	-moz-transition: top 200ms linear 0s !important;
	-ms-transition: top 200ms linear 0s !important;
	-o-transition: top 200ms linear 0s !important;
	transition: top 200ms linear 0s !important;
}

.info-panel.openInfo p {
	clear: none;
	width: 48%;
}

.info-panel.openInfo p:last-of-type {
	clear: none;
	width: 98%;
}

.info-panel.openInfo p:last-of-type span.info-title {
	width: 14.5%;
}

.info-panel.openInfo p:last-of-type span.info-name {
	width: 82.5%;
}

.info-panel.openInfo .more-info-panel {
	top: auto;
	bottom: 0px;
	width: 100%;
	border-top: 1px solid rgba(0, 0, 0, .5);
	height: auto;
}

.info-panel.openInfo .more-info-panel i {
	float: left;
	position: relative;
	height: 30px;
	width: 100%;
	clear: left;
	text-align: center;
	line-height: 30px;
	font-size: 2em;
}

.info-panel .more-info-panel>a.edit-infos {
	display: none;
}

.info-panel.openInfo .more-info-panel>a.edit-infos {
	display: block;
	background-color: rgba(0, 0, 0, .35);
	color: #fff;
	float: right;
	position: absolute;
	width: 40px;
	height: 40px;
	top: -50px;
	right: 30px;
	border-radius: 5px;
}

.info-panel.openInfo .more-info-panel>a.edit-infos>i {
	line-height: 40px;
}

.info-panel span {
	float: left;
	position: relative;
	margin-right: 5px;
}

.info-title {
	color: #666;
	margin-left: 5px;
}

.openInfo .edit-info-panel {
	position: absolute;
	float: right;
	background-color: rgba(0, 0, 0, .25);
	color: #333;
	cursor: pointer;
}

.openInfo .info-title {
	width: 30%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #666;
}

.openInfo .info-name {
	width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: bold;
}

/*STYLE ARTICLE INIT*/
article.article-init {
	background: #FFF;
	z-index: 2;
	top: 60px !important;
}

article.article-init>section {
	top: 0px;
	padding-top: 0px;
}

.article-init li.sequences {
	height: 50px;
	cursor: pointer;
}

.article-init li.sequences .sequence-name-wrap {
	max-width: 100% !important;
	width: auto !important;
	margin-left: 10px !important;
	/*position: relative !important;*/
	font-size: 1em;
}

.article-init li.sequences .sequence-name-wrap>span {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	width: 100%;
}

.article-init li.sequences .sequence-name-wrap>span.date-creation-span {
	text-align: right;
	font-size: 0.8em;
	float: right;
	position: absolute;
	right: 5px;
	top: 8px;
	width: 50%;
}
.article-init li.sequences .sequence-name-wrap> div > span.date-creation-span {
	text-align: right;
	font-size: 0.8em;
	float: right;
	position: absolute;
	right: 5px;
	top: 8px;
	width: 50%;
}

.article-init li.sequences .sequence-name-wrap>span.info-sequence {
	float: left;
	clear: left;
	font-size: 0.75em;
	font-weight: normal;
}

.article-init li.sequences .sequence-name-wrap>span.info-sequence.owner-user-mail {
	color: #0099CC;
	text-align: right;
	right: 5px;
	top: 28px;
	font-size: 0.8em;
	width: 50%;
	float: right;
	position: absolute;
}

.article-init li.sequences .sequence-name-wrap> div > span.info-sequence.owner-user-mail {
	color: #0099CC;
	text-align: right;
	right: 5px;
	top: 28px;
	font-size: 0.8em;
	width: 50%;
	float: right;
	position: absolute;
}
.article-init li.sequences .sequence-name-wrap .sequence-name-name {
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 65%;
	color: #FFF;
	margin-bottom: -4px;
	/*clear: both;*/
    display: inline-block;
}

.article-init li.sequences .option-sequence {
	width: 180px !important;
	max-width: 180px !important;
	min-width: 180px !important;
}

.article-init li.sequences .option-sequence li i {
	line-height: 50px;
}

.comp.sequences.nav.grid-sequence { 
	background: #333; 
    color: #FFF;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* Style Article with Grids */
@media (min-width: 768px) {
	ul.list.list-grid {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));  
		align-content: space-between;
		justify-content: space-around;  
	}
	.comp.sequences.nav.grid-sequence {
		min-height: 170px;
		max-height: unset !important;
		margin: 0;
		padding: 0;
		list-style: none;
		display: inline-block;
		min-width: 240px;
		  /*max-width: 400px; */ 
	}
	.comp.sequences.nav.sequenceSelected.grid-sequence {
		min-height: 100px;
		margin: 0;
		padding: 0;
		list-style: none;
		display: inline-block;
		min-width: 240px;
		/*background: #333;*/ 
	}
	.article-init li.sequences .option-sequence {
		bottom: 8px;
	}
}


/* Style article with sequences*/
.article-action-panel ul.list {
	margin-top: 20px;
}

.list>li.nav::after {
	display: none;
	visibility: hidden;
}

/* Style sequences list*/
li.sequences {
	padding: 0px !important;
	max-height: 55px !important;
	/*overflow-y: hidden; // iOS7 NOT WORKING*/
}

li.sequences>div {
	padding: 5px 0px !important;
}

li.sequences>div:last-of-type {
	padding: 0px !important;
}

li.sequences .sequence-number-wrap {
	max-width: 45px;
	width: 45px;
	min-width: 45px;
	border-right: 0px none;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	font-weight: bold;
	color: #fff;
	background-color: rgba(0, 0, 0, .20);
	cursor: move;
	height: 45px;
	margin: 4px;
	border-radius: 3px;
}

li.sequences .sequence-number-wrap-no-sortable {
	max-width: 45px;
	width: 45px;
	min-width: 45px;
	border-right: 0px none;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	font-weight: bold;
	color: #fff;
	background-color: rgba(0, 0, 0, .20);
	cursor: move;
	height: 45px;
	margin: 4px;
	border-radius: 3px;
}


li.comp:last-of-type>div.sequence-number-wrap {
	border-right: 1px solid rgba(0, 0, 0, .35) !important;
}

li.comp:last-of-type>div.sequence-number-wrap-no-sortable {
	border-right: 1px solid rgba(0, 0, 0, .35) !important;
}

li.sequences .sequence-name-wrap {
	max-width: 400px;
	min-width: 400px;
	width: 400px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 10px;
}

li.sequences .sequence-name-wrap>div.text-container-name {
	width: 100%;
	display: inline-block;
	float: left;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	line-height: 45px;
}

.text-container-name.activefixed {
	line-height: normal !important;
	margin-top: 5px;
}

li.sequences .sequence-times-wrap {
	text-align: right;
	padding-right: 10px !important;
	/*max-width: 200px;*/
}

li.sequences .sequence-infos-wrap,
li.sequences .time-title {
	font-size: 0.75em;
	max-width: 110px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	/*width: 110px;
	position: relative;
	display: block;
	float: left;*/

}

li.sequences .time-response {
	width: 70px;
}

li.sequences .sequence-infos-wrap {
	/*width: 100%;*/
	max-width: 100%;
	min-width: 190px;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	justify-content: center;
}

.sequence-infos-wrap div {
	width: 100%;
	display: inline-block;
	clear: left;
	float: left;
	overflow: hidden;
	text-overflow: ellipsis;
}

li.sequences .sequence-number {
	font-size: 1.25em;
	color: #fff;
	line-height: 45px;
	width: 100%;
	text-align: center;
	height: 45px;
}

li.sequences .sequence-number,
li.sequences .sequence-name-wrap,
li.sequences .time-response {
	font-weight: normal;
}

.sequence-info-1 {
	margin-top: 0;
}

.sequence-progress-bar {
	opacity: 0;
	width: 100%;
	height: 4px;
	position: absolute;
	float: left;
	background-color: #888;
	bottom: 0px;
	left: 0px;
	padding: 0px 0px 0px 0px !important;
	z-index: 10;
	-webkit-transition: all 200ms linear 0s;
	-moz-transition: all 200ms linear 0s;
	-ms-transition: all 200ms linear 0s;
	-o-transition: all 200ms linear 0s;
	transition: all 200ms linear 0s;
}

.sequence-bar {
	width: 0%;
	height: 4px;
	/*background-color: #66c2e0;*/
	background-color: #43cffd;
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
	position: relative;
	float: left;
	padding: 0px !important;
	border: 0px none !important;
	/*-webkit-transition: all 500ms ease-in-out 0s;
	-moz-transition: all 500ms ease-in-out 0s;
	-ms-transition: all 500ms ease-in-out 0s;
	-o-transition: all 500ms ease-in-out 0s;
	transition: all 500ms ease-in-out 0s;*/
}

.sequenceSelected .sequence-progress-bar {
	background-color: #026e92;
}

li.sequenceSelected span.time-title {
	display: none;
}

.sortable-icon {
	float: left;
	position: absolute;
	left: 7px;
	top: 10px;
	font-size: 25px;
	color: rgba(0, 0, 0, .25);
	cursor: move;
	display: none;
}

.option-sequence {
	float: right;
	position: relative;
	width: auto !important;
	min-width: 50px !important;
	max-width: 180px !important;
	max-height: 60px;
	background-color: rgba(0, 0, 0, .1);
	display: none;
	-webkit-animation: swipe .5s;
	animation: swipe .5s;
	line-height: 54px;
}

.option-sequence-main {
	position: absolute !important;;
    top: 0px;
	right: 0px;
	height: 50px; 
}

.option-sequence-main ul {
		background-color: #0099CC; 
		height: 50px; 
		float: right !important;
}

.option-sequence ul {
	float: left;
	position: relative;
	display: block;
	margin: 0px;
	padding: 0px;
}

.option-sequence li,
.option-sequence li.comp {
	float: left;
	margin: 0 5px;
	position: relative;
	cursor: pointer;
	width: 50px !important;
	min-width: 50px !important;
	max-width: 50px !important;
	text-align: center;
	display: inline;
	border-bottom: 0px none;
	/*	-webkit-transition: all 0ms ease-in-out 0s;
	-moz-transition: all 0ms ease-in-out 0s;
	-ms-transition: all 0ms ease-in-out 0s;
	-o-transition: all 0ms ease-in-out 0s;
	transition: all 0ms ease-in-out 0s;*/
}

li.sequenceDefault {
	background-color: #fff !important;
	color: #000 !important;
}

li.sequenceActive {
	background-color: #e8e8e8 !important;
	color: #000 !important;
	border-bottom: 0px none;
}

li.sequenceActive .sequence-progress-bar {
	opacity: 1;
}

li.sequenceDisabled {
	background-color: #ccc !important;
	color: #999 !important;
}

.comp.sequences.nav.sequenceSelected.grid-sequence {
	min-height: 170px;
}

li.sequenceSelected {
	background-color: #0099cc !important;
	color: #fff !important;
}

li.sequenceSelected .sortable-icon {
	display: block;
}

li.sequenceSelected .option-sequence {
	display: block;
}

.article-init li.sequenceSelected span.date-creation-span {
	display: none;
}

.article-init li.sequenceSelected span.info-sequence.owner-user-mail {
	display: none;
}

.sequenceNumberActive {
	opacity: 1;
}

.sequenceNumberDefault {
	opacity: .9;
	color: #333;
}

.tabbar {
	background-color: #444;
}

.isDesktop .tabbar>.button:hover,
.tabbar>.button.selected {
	color: #0099cc !important;
	opacity: 1 !important;
}

.tabbar a {
	color: #fff !important;
	border-right: 1px solid #111 !important;
	text-align: center !important;
}

.tabbar a:last-of-type {
	border: 0px none;
	width: 50%;
}

.tabbar a.disabledBt {
	background-color: #666 !important;
	color: #888 !important;
	cursor: not-allowed;
}

.tabbar a.button.disabledBt:hover {
	color: #888 !important;
	cursor: not-allowed;
}

.runmode-date {
	position: relative;
	font-size: 0.65em;
	font-weight: normal !important;
	color: inherit;
	height: auto;
	line-height: 12px;
	clear: left;
	margin-top: 3px;
	word-break: break-word;
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 5px;
}

.runmode-date-estimated {
	position: relative;
	font-size: 0.63em;
	font-weight: normal !important;
	color: #888;
	height: auto;
	line-height: 12px;
	clear: left;
	margin-top: 3px;
	word-break: break-word;
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 5px;
}

/*Edit view*/
.element-form {
	width: 99%;
	background-color: rgba(0, 0, 0, .15);
	border-radius: 10px;
	margin: 10px 5px;
	padding: 0px;
	height: 30px;
	line-height: 30px;
}

.right-check {
	float: right;
	position: absolute;
	margin: 0px 5px;
	height: 30px;
	line-height: 30px;
	right: 10px;
}

.right-check span {
	float: left;
	position: relative;
	margin-bottom: 10px;
	margin-right: 5px;
}

.element-form {
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	align-items: center;
}

.element-form:last-of-type {
	/*margin-bottom: 70px;*/
}

.element-form .label-form {
	margin: 0px 10px;
	color: #666;
	min-width: 50px;
	max-width: 30%;
	float: left;
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#edit-info .element-form .label-form {
	min-width: 90px;
}

.element-form input {
	flex: 1;
	background-color: transparent;
	border: none;
	width: 70%;
	font-size: 1em;
	font-weight: bold;
	float: left;
	position: relative;
	line-height: 30px;
	margin: 0px;
	padding: 0px;
}

.element-form.error {
	box-shadow: inset 0px 0px 1px 1px #ff3333, 0px 0px 8px 1px rgba(255, 0, 0, .15);
}

.element-form.error+div.error-label {
	display: block;
}

div.error-label {
	position: relative;
	padding: 0px 10px;
	font-size: 0.85em;
	color: #ff3333;
	display: none;
}

.invisible-label {
	display: none;
}

.color-item-form {
	width: 24px;
	height: 24px;
	margin: 0px 5px;
	border: 1px none;
	float: left;
	position: relative;
	line-height: 30px;
	cursor: pointer;
	border-radius: 100%;
	/*box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,.5);*/
	/*top: 3px;*/
}

.color-item-form.fa {
	line-height: 20px;
	text-align: center;
	color: #fff;
	font-size: 1.33333333em;
}

.element-form.favorites-button {
	background-color: rgba(0, 0, 0, .65);
	text-align: center;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	max-width: 250px;
	min-width: 200px;
	margin: 0 auto;
	height: 42px;
	line-height: 42px;
	display: block;

}

.element-form.favorites-button:hover {
	color: #0099cc;
}

.element-form.favorites-button.favorite-add,
.element-form.favorites-button.favorite-add:hover {
	background-color: rgba(0, 0, 0, .45);
	color: #FBD405;
}

.super-star {
	width: 100%;
	text-align: center;
	font-size: 50px;
	position: absolute;
	left: 0;
	bottom: 20px;
}

.arrow-select {
	float: right;
	color: rgba(0, 0, 0, .35);
	margin: 2px 20px;
	position: absolute;
	right: 0px;
	font-size: .9em !important;
}

.element-mode {
	font-weight: bold;
}

/*popups*/
.popup header h1,
.popup2 header h1 {
	margin: 5px 0px;
	width: 270px;
}

.popover.inverse.largeWindow,
.popoverCustom.inverse.largeWindow {
	top: 190px !important;
	margin: 0 auto !important;
	position: relative;
	height: 100% !important;
	right: 0 !important;
}

.popoverCustom.inverse.largeWindowHighest {
	top: 190px !important;
	margin: 0 auto !important;
	height: 500px !important;
	position: relative;
	right: 0 !important;
	max-height: 500px !important;
}

.popover.inverse::before,
.popoverCustom.inverse::before {
	display: none;
}

/* loading overlay */
.loading-overlay {
	float: left;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, .5);
	z-index: 10000;
}

.popup.loading,
.popup2.loading {
	width: 200px;
	height: 110px;
	float: none;
	position: relative;
	top: 50%;
	margin: 0 auto;
	/*margin-top: -55px;*/
	/*left: 50%;*/
	/*margin-left: -100px;*/
	background-color: transparent;
}

#spinner {
	/*background-image: url(../img/spritesLoad.png);*/
	width: 60px !important;
	height: 60px !important;
	box-shadow: none;
	margin: 25px auto;
	padding: 0px;
	position: relative;
}

#spinner .fa.fa-spinner.fa-spin.fa-4x {
	color: #FFFFFF;
}

/*Pop up save rundown*/
.popup2.save-rundown {
	width: 300px;
	height: 156px;
	float: left;
	position: absolute;
	top: 50% !important;
	left: 50% !important;
	margin-top: -78px;
	margin-left: -150px;
}

.popup2.save-rundown header h1 {
	margin: 5px 0px;
}

.popup2.save-rundown input {
	margin: 0px;
	padding: 15px 10px;
	border: 1px solid;
	width: 280px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 0px;
	border-color: #b5b5b5;
	color: #AAA;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.popup2.save-rundown input:focus {
	color: #333;
}

/*Spinner popup picker*/
.maskPicker {
	display: none;
	float: left;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, .5);
	z-index: 10;
}

input.valuePicker {
	width: 100%;
	text-align: center;
	font-size: 1em;
	margin: 2px 0px;
	padding: 0px;
}

.spinner-group {
	position: fixed;
	font-weight: bold;
	height: auto;
	width: 300px;
	z-index: 10;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -150px;
	background-color: #fff;
	border-radius: 10px;
	z-index: 10000;
}

.spinner-group header>h1 {
	line-height: 32pt;
	font-size: 16pt;
	font-weight: 700;
	text-align: center;
	margin: 0px;
}

.spinner-group .chronos {
	float: left;
	clear: left;
	margin-bottom: 5px;
	padding: 20px 15px 15px 15px;
}

.spinner-group footer a {
	color: #0099cc;
	border-right: 1px solid #b5b5b5;
	border-top: 1px solid #b5b5b5;
	float: left;
	position: relative;
	width: 149px;
	text-align: center;
	height: 60x !important;
	line-height: 44px !important;
}

.spinner-group footer a:last-of-type {
	border-right: 0px none;
}

.spinnerBox {
	border: 1px solid #b5b5b5;
	float: left;
	border-radius: 5px;
	position: relative;
	margin: 0px 14px;
}

.spinnerBox span {
	position: absolute;
	float: left;
	top: -20px;
	left: 0px;
	text-align: center;
	width: 100%;
	font-size: 0.8em;
	font-weight: normal;
}

.spinnerBox input {
	float: left;
	position: relative;
	width: 60px;
	background-color: #fff;
	text-align: center;
	clear: left;
	line-height: 30px;
	font-size: 1.25em;
	margin: 0px;
	padding: 0px;
}

.spinnerBox div.bt {
	float: left;
	position: relative;
	height: 40px;
	width: 60px;
	background-color: #ddd;
	cursor: pointer;
	color: #333;
	font-size: 1em;
	text-align: center;
	clear: left;
	line-height: 40px;
}

.spinnerBox div.bt:hover {
	color: #0099cc;
}

.spinnerBox div.bt:first-of-type {
	border-radius: 5px 5px 0px 0px;
}

.spinnerBox div.bt:last-of-type {
	border-radius: 0px 0px 5px 5px;
}


/*Datepicker customized*/
.dtpicker-content {
	margin: 0px auto !important;
	padding: 1em 0em 0em !important;
	max-width: 500px !important;
	background: #fff !important;
	border-radius: 10px;
	color: #333 !important;
}

.dtpicker-header .dtpicker-title {
	color: #333 !important;
	text-align: center !important;
	font-size: 16pt !important;
	font-weight: 700 !important;
}

.dtpicker-header .dtpicker-close {
	color: #ccc !important;
}

.dtpicker-header .dtpicker-value {
	color: #333 !important;
}

.dtpicker-components .dtpicker-comp {
	margin: 0px !important;
}

.dtpicker-components .dtpicker-compOutline {
	float: left !important;
	border: 1px solid #b5b5b5 !important;
	margin: 0px 16px !important;
	border-radius: 5px !important;
	padding: 0px !important;
	width: 62px !important;
}

.dtpicker-components .dtpicker-compButton {
	background: #ddd !important;
	font-size: 140% !important;
	cursor: pointer !important;
	height: 40px !important;
	line-height: 40px !important;
	width: 60px !important;
	float: left !important;
	position: relative !important;
	color: #333 !important
}

.dtpicker-components .dtpicker-compButton:hover {
	color: #0099cc !important;
}

.dtpicker-components .dtpicker-compButton:first-of-type {
	border-radius: 5px 5px 0px 0px;
}

.dtpicker-components .dtpicker-compButton:last-of-type {
	border-radius: 0px 0px 5px 5px;
}

.dtpicker-components .dtpicker-compButton:hover {
	color: #0099cc;
}

.dtpicker-components .dtpicker-compValue {
	margin: 0px !important;
	width: 60px !important;
	border: none !important;
	background: #FFFFFF !important;
	font-size: 1.25em !important;
	padding: 0px !important;
	line-height: 30px !important;
	float: left !important;
	position: relative !important;
	color: #333 !important;
}

.dtpicker-buttonCont {
	overflow: hidden;
	margin: 0px !important;
	bottom: 0px !important;
	height: 44px !important;
}

.dtpicker-buttonCont .dtpicker-button {
	padding: 0.6em 0em;
	width: 50% !important;
	background-color: transparent !important;
	color: #0099cc !important;
	text-align: center !important;
	font-size: 13pt !important;
	cursor: pointer !important;
	height: 44px !important;
	height: 44px !important;
	line-height: 44px !important;
	padding: 0px !important;
	font-weight: bold !important;
}

.dtpicker-button {
	border-top: 1px solid #ccc !important;
}

.dtpicker-buttonClear {
	float: right !important;
	display: none;
}

.dtpicker-buttonSet {
	float: left;
	width: 100% !important;
	border-right: 0px none !important;
}

.dtpicker-twoButtons .dtpicker-buttonSet {
	float: left;
	width: 100% !important;
}

.dtpicker-buttonCont .dtpicker-button:hover {
	cursor: pointer;
	opacity: .5 !important;
}


/* Style save rundown as popover */
.maskSaveRundown {
	display: none;
	float: left;
	position: fixed;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgba(255, 255, 255, .3);
	z-index: 10;

}


/*Style Popover*/
.popover,
.popoverCustom {
	width: 280px;
	background-color: #fff;
	border-radius: 10px;
	min-height: 215px;
	max-height: 300px;
	position: absolute;
	padding-bottom: 0px;
	z-index: 100001;
	height: 215px;
	bottom: 0px;
}

.popover.open,
.popoverCustom.open {}

.popover::before,
.popoverCustom::before {
	background-color: #fff !important;
	display: none;
}

.popover header {
	padding: 1px 15px;
	background-color: #fff;
}

.popoverCustom header {
	padding: 1px 15px;
	background-color: #fff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.popover header h1,
.popoverCustom header h1 {
	text-align: left;
	color: #333;
	font-weight: bold;
	margin-top: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.popover>section>ul.list,
.popoverCustom>section>ul.list {
	padding: 0px;
}

.popover>section>ul.list li {
	cursor: pointer;
}

.popover>section>ul.list li:hover {}

.popover>section>ul.list li::before,
.popoverCustom>section>ul.list li::before {
	left: 0px;
}

.popover>section>ul.list li:last-of-type::before,
.popoverCustom>section>ul.list li:last-of-type::before {
	/*border-bottom: solid 1px #c8c8c8;*/
}

.popover>section>ul.list li h3,
.popoverCustom>section>ul.list li h3 {
	font-weight: bold;
	color: #0099cc;
	padding-right: 50px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.popover>section>ul.list li:hover h3,
.popoverCustom>section>ul.list li:hover h3 {
	color: rgba(0, 153, 204, .5);
}

.popover>section>ul.list li i,
.popoverCustom>section>ul.list li i {
	float: right;
	position: absolute;
	right: 20px;
	top: 17px;
	color: rgba(0, 0, 0, .25);
}

.popover>section>ul.list li i.delete,
.popoverCustom>section>ul.list li i.delete {
	float: right;
	position: absolute;
	right: 20px;
	top: 10px;
	color: rgba(0, 0, 0, .35);
	cursor: pointer;
	font-size: 25px;
}

.popover>section>ul.list li i.delete:hover,
.popoverCustom>section>ul.list li i.delete:hover {
	color: rgba(0, 0, 0, .25);
}

.popover ul.list.switchesOptions li,
.popoverCustom ul.list.switchesOptions li {
	padding-right: 65px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/** Ventanas de Opciones y Favoritos **/
#optionsPopover {
	position: relative;
	height: 100%;
	left: 0 !important;
	margin: 0 auto;
	/*top: 150px !important;*/
	width: 550px;
}
#AccountPopover {
	position: relative;
	height: 100%;
	left: 0 !important;
	margin: 0 auto;
	/*top: 150px !important;
	width: 550px;*/
}

#optionsPopover {
	min-height: 600px;
}
#AccountPopover {
	min-height: 500px;
}

#fvTypePopover,
#fvselectTypePopover,
#userShareList {
	position: relative;
	height: 100%;
	left: 0 !important;
	margin: 0 auto;
	/*top: 150px !important;*/
	width: 550px;
	min-height: 500px;
}

#fvselectTypePopover {
	margin: 0 auto !important;
	right: 0 !important;
	top: 77px !important;
}

#optionsPopover.settingsPopover,
#AccountPopover.accountPopover,
#fvTypePopover.favouritesPopover,
#fvselectTypePopover.favouritesPopover,
#userShareList.userSharePopover {
	background-color: #FFF;
}

#optionsPopover.settingsPopover header,
#AccountPopover.accountPopover header,
#fvTypePopover.favouritesPopover header,
#fvselectTypePopover.favouritesPopover header,
#userShareList.userSharePopover header {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	height: 50px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);;
	background-color: #FFF;
}

#optionsPopover.settingsPopover header h1,
#AccountPopover.accountPopover header h1,
#fvTypePopover.favouritesPopover header h1,
#fvselectTypePopover.favouritesPopover header h1,
#userShareList.userSharePopover header h1 {
	line-height: 30px;
	font-size: 18px;
	color: #0099CC;
}

#optionsPopover.settingsPopover header button.close,
#AccountPopover.accountPopover header button.close,
#fvTypePopover.favouritesPopover header button.close,
#fvselectTypePopover.favouritesPopover header button.close,
#userShareList.userSharePopover header button.close {
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #CCC;
	filter: alpha(opacity=20);
	opacity: .8;
}

#optionsPopover.settingsPopover header button.close:focus,
#AccountPopover.accountPopover header button.close:focus,
#fvTypePopover.favouritesPopover header button.close:focus,
#fvselectTypePopover.favouritesPopover header button.close:focus,
#userShareList.userSharePopover header button.close:focus {
	outline: none !important;
}

#optionsPopover.settingsPopover header button.close:hover,
#AccountPopover.accountPopover header button.close:hover,
#fvTypePopover.favouritesPopover header button.close:hover,
#fvselectTypePopover.favouritesPopover header button.close:hover,
#userShareList.userSharePopover header button.close:hover {
	outline: none !important;
}

#AccountPopover.accountPopover section,
#fvTypePopover.favouritesPopover section,
#fvselectTypePopover.favouritesPopover section {
	top: 0;
	position: relative;
	margin: 0 20px;
	max-height: 80vh;
}

#optionsPopover.settingsPopover section {
	top: 0;
	position: relative;
	margin: 0 20px;
	padding-bottom: 40px;
	height: 460px;
}

#fvTypePopover.favouritesPopover section,
#fvselectTypePopover.favouritesPopover section {
	max-height: 380px;
}

#optionsPopover.settingsPopover section ul.switchesOptions {
	margin-bottom: 0;
}

#fvTypePopover.favouritesPopover section ul#PopoverFavs,
#fvselectTypePopover.favouritesPopover section ul#PopoverFavs,
#userShareList.userSharePopover section ul#PopoverFavs {
	border-top: none;
}

#optionsPopover.settingsPopover section ul.switchesOptions li {
	height: 60px;
	line-height: 30px;
}

#optionsPopover.settingsPopover section ul.switchesOptions li::before {
	border-bottom: 1px solid #CCC;
}

#optionsPopover.settingsPopover section ul.switchesOptions li aside {
	top: 12px;
}

#optionsPopover.settingsPopover section ul.switchesOptions li i {
	top: 20px;
}

#optionsPopover.settingsPopover .popup-footer,
#AccountPopover.accountPopover .popup-footer,
#fvTypePopover.favouritesPopover .popup-footer,
#fvselectTypePopover.favouritesPopover .popup-footer,
#userShareList.userSharePopover .popup-footer {
	padding: 15px;
	text-align: right;
	border-top: 1px solid rgba(0, 0, 0, 0.12);;
	position: absolute;
	width: 100%;
	bottom: 0;
	background-color: #FFF;
	border-radius: 0 0 10px 10px;
	max-width: 550px;
}

#optionsPopover.settingsPopover .popup-footer button,
#AccountPopover.accountPopover .popup-footer button,
#fvTypePopover.favouritesPopover .popup-footer button,
#fvselectTypePopover.favouritesPopover .popup-footer button,
#userShareList.userSharePopover .popup-footer button {
	display: inline-block;
	margin-bottom: 0;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	background-color: #0099CC;
	border: 1px solid transparent;
	padding: 6px 12px;
	font-size: 15px;
	line-height: 1.42857143;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #FFF;
	width: 100px;
	height: 42px;
}

#userShareList.userSharePopover>section>ul.list li i.delete {
	float: right;
	position: relative;
	right: 10px;
	top: -20px;
	color: rgba(0, 0, 0, .35);
	cursor: pointer;
	font-size: 20px;
	margin-left: 20px;
}

#userShareList.userSharePopover>section>ul.list li i.share {
	float: right;
	position: relative;
	right: 0px;
	top: -20px;
	color: rgba(0, 0, 0, .35);
	cursor: pointer;
	font-size: 20px;
	margin-left: 20px;
}

/** Vetana Mi Cuenta **/
#AccountPopover.accountPopover section h3 {
	margin-top: 15px;
}

#AccountPopover.accountPopover .profile-container {
	padding: 15px;
	border-bottom: 1px solid #CCC;
}

#AccountPopover.accountPopover .profile-container:last-child {
	border-bottom: none;
}

#AccountPopover.accountPopover .profile-container div {
	min-height: 35px;
	line-height: 30px;
}

#AccountPopover.accountPopover .profile-container div button {
	float: right;
	margin-right: -10px;
}

#AccountPopover.accountPopover .profile-container div button {
	display: inline-block;
	margin-bottom: 0;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	background-color: #0099CC;
	border: 1px solid transparent;
	padding: 6px 12px;
	font-size: 15x;
	line-height: 1.42857143;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #FFF;
	width: auto;
	height: 32px;
}

/** Ventana Compartir escaleta **/
#userShareList.userSharePopover section {
	top: 20px;
	position: relative;
	padding: 0 15px;
	max-height: 80vh;
}

#divShareLinkId {
	padding: 3px 0;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	justify-content: space-around;
	width: 100%;
}
.divShareLinkId {
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	flex-direction: row;
    flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
}
#inputShareLinkId {
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	margin-top: 3px;
	width: 100%;
}

#userShareList.userSharePopover button#btnShareLinkId {
	display: inline-block;
	margin-bottom: 0;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	background-color: transparent;
	border: 1px solid transparent;
	/*padding: 6px 12px;*/
	font-size: 18px;
	line-height: 1.42857143;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #0099cc;
}

#userShareList.userSharePopover ul#PopoverUsersShared {
	margin-top: 15px;
	border-top: none;
	overflow: auto;
	height: 240px;
}

#userShareList.userSharePopover ul#PopoverUsersShared li {
	min-height: 60px;
	line-height: 60px;
	border-bottom: 1px solid #CCC;
	padding: 20px 0px;
}

#userShareList.userSharePopover ul#PopoverUsersShared li h3 {
	font-weight: normal;
	color: #222;
}

.overlayShare {
	background-color: #000;
	opacity: 0.3;
}

#userShareList.userSharePopover .popup-footer {
	/*display: flex;
	flex-direction: row;
	justify-content: space-between;*/
}

#userShareList.userSharePopover .popup-footer .premium-container-advice,
#optionsPopover.settingsPopover .popup-footer .premium-container-advice {
	background-color: #FFF3CD;
	color: #856404;
	width: 380px;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	text-align: center;
	padding: 2px;
	border-radius: 4px;
	float: left;
}

#userShareList.userSharePopover .popup-footer .premium-container-advice span,
#optionsPopover.settingsPopover .popup-footer .premium-container-advice span {
	font-size: 13px;
}

#userShareList.userSharePopover .popup-footer .premium-container-advice a,
#optionsPopover.settingsPopover .popup-footer .premium-container-advice a {
	color: #856404;
	text-decoration: underline;
	font-weight: 600;
}


/*Styles popover inverse*/
.popover.inverse,
.popoverCustom.inverse {
	left: auto !important;
}

.popover.inverse::before,
.popoverCustom.inverse::before {
	background-color: #fff !important;
	top: auto !important;
	bottom: -7px !important;
}

.popover.rightArrow::before,
.popoverCustom.rightArrow::before {
	right: 15px;
	left: auto;
}

.popover.leftArrow::before,
.popoverCustom.leftArrow::before {
	left: 15px;
	right: auto;
}

.popup footer>.button,
.popup2 footer>.button {
	color: #0099cc;
}

.popup,
.popup2 {
	background-color: #fff;
	-webkit-transition: none;
	transition: none;
	-webkit-trasform-origin: none;
	transform-origin: none;
	filter: none !important;
	-webkit-filter: none !important;
	margin: 0 auto;
	top: 30% !important;
	position: relative;
	left: auto !important;
}

.popup p,
.popup2 p {
	margin-bottom: 15px;
}

/** Ventana confirmación compra **/
/** Ventana Importar XLS **/
#importTypePopover {
	position: relative;
	height: 100%;
	left: 0 !important;
	margin: 0 auto;
	width: 550px;
	min-height: 300px;
}

.text-not-centered {
	text-align: left !important;
}

.network-status-container {
	position: absolute;
	color: orange;
	font-size: 0.75em;
	bottom: 5px;
	width: 100%; 
	animation: blinker 1.4s linear infinite;
  }
  
  @keyframes blinker {
	50% {
	  opacity: 0;
	}
  }

#confirmedPurchase {
	position: relative;
	height: 100%;
	left: 0 !important;
	margin: 0 auto;
	width: 550px;
	min-height: 280px;
	max-height: 280px;
}

#importTypePopover header,
#confirmedPurchase header {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	height: 50px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);;
	background-color: #FFF;
}

#importTypePopover header h1,
#confirmedPurchase header h1 {
	line-height: 30px;
	font-size: 18px;
	color: #0099CC;
}

#importTypePopover header button.close,
#confirmedPurchase header button.close {
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #CCC;
	filter: alpha(opacity=20);
	opacity: .8;
}

#importTypePopover header button.close:focus,
#confirmedPurchase header button.close:focus {
	outline: none !important;
}

#importTypePopover header button.close:hover,
#confirmedPurchase header button.close:hover {
	outline: none !important;
}

#importTypePopover section {
	padding: 15px;
}

#confirmedPurchase section {
	padding: 15px 50px;
	text-align: center;
}

#confirmedPurchase section i {
	color: #0099CC;
	margin-bottom: 10px;
}

#importTypePopover section label a,
#confirmedPurchase section label a {
	color: #0099CC !important;
}

#importTypePopover .popup-footer,
#confirmedPurchase .popup-footer {
	padding: 15px;
	text-align: right;
	border-top: 1px solid rgba(0, 0, 0, 0.12);;
	position: absolute;
	width: 100%;
	bottom: 0;
	background-color: #FFF;
	border-radius: 0 0 10px 10px;
	max-width: 550px;
}

#importTypePopover .popup-footer button,
#confirmedPurchase .popup-footer button {
	display: inline-block;
	margin-bottom: 0;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	background-color: #0099CC;
	border: 1px solid transparent;
	padding: 6px 12px;
	font-size: 15x;
	line-height: 1.42857143;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #FFF;
	width: 100px;
	height: 42px;
}

#importTypePopover .popup-footer .premium-container-advice,
#confirmedPurchase .popup-footer .premium-container-advice {
	background-color: #FFF3CD;
	color: #856404;
	width: 280px;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	text-align: center;
	padding: 2px;
	border-radius: 4px;
	float: left;
}

#importTypePopover .popup-footer .premium-container-advice span,
#confirmedPurchase .popup-footer .premium-container-advice span {
	font-size: 13px;
}

#importTypePopover .popup-footer .premium-container-advice a,
#confirmedPurchase .popup-footer .premium-container-advice a {
	color: #856404;
	text-decoration: underline;
	font-weight: 600;
}

#importTypePopover.popover,
#confirmedPurchase.popover {
	min-width: 500px;
	font-size: 14px;
	/*line-height: 30px;*/
	max-height: 260px;
}

#importTypePopover.popover>section,
#confirmedPurchase.popover>section {
	padding: 15px;
	top: 50px !important;
	/*bottom: 0;*/
}

#xlsFile {
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

/*#importTypePopover.popover button {
	background-color: #0099cc;
    padding: 5px 20px;
    float: right;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    position: relative;
    top: 30px;
    right: 10px;
}*/
#importTypePopover.popover a {
	color: #0099cc;
}

/** Popup Modo Premium **/
#premiumPopover {
	position: relative;
	height: 100%;
	left: 0 !important;
	margin: 0 auto;
	width: 550px;
	min-height: 320px;
	height: 320px !important;
}

#premiumPopover header {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	height: 50px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);;
	background-color: #FFF;
}

#premiumPopover header h1 {
	line-height: 30px;
	font-size: 18px;
	color: #000;
}

#premiumPopover header button.close {
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #CCC;
	filter: alpha(opacity=20);
	opacity: .8;
}

#premiumPopover header button.close:focus {
	outline: none !important;
}

#premiumPopover header button.close:hover {
	outline: none !important;
}

#premiumPopover section {
	padding: 15px;
}

#premiumPopover section {
	padding: 15px;
}

#premiumPopover section label a {
	color: #0099CC !important;
}

#premiumPopover .popup-footer {
	padding: 15px;
	text-align: right;
	border-top: 1px solid rgba(0, 0, 0, 0.12);;
	position: absolute;
	width: 100%;
	bottom: 0;
	background-color: #FFF;
	border-radius: 0 0 10px 10px;
	max-width: 550px;
}

#premiumPopover .popup-footer button {
	display: inline-block;
	margin-bottom: 0;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	background-color: #0099CC;
	border: 1px solid transparent;
	padding: 6px 12px;
	font-size: 15x;
	line-height: 1.42857143;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #FFF;
	width: 100px;
	height: 42px;
}

.switchesOptions aside {
	float: right;
	position: absolute;
	right: 5px;
	top: 7px;
}

.licence-mode {
	font-size: 12px;
	color: #6D6D6D;
	padding-left: 10px;
}

/*Colors*/
.rundown-blue {
	background-color: #0099CC !important;
}

.violet {
	background-color: #993399 !important;
}

.red {
	background-color: #D4282B !important;
}

.green {
	background-color: #a4ca39 !important;
}

.blue {
	background-color: #0066cc !important;
}

.orange {
	background-color: #ff6600 !important;
}

.yellow {
	background-color: #FBD405 !important;
}

.violet-font {
	color: #993399;
}

.red-font {
	color: #ff3333;
}

.green-font {
	color: #a4ca39;
}

.blue-font {
	color: #0066cc;
}

.orange-font {
	color: #ff6600;
}

.yellow-font {
	color: #FBD405;
}


/*Show and hide tab bars*/

#init.current~.tabbar#editorInit,
#main.current~.tabbar#editorNav,
#edit-sequence-article.current~.tabbar#editorBack,
#info-article.current~.tabbar#editorInfo,
#info-shared-users.current~.tabbar#editorInfo {
	visibility: visible;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	z-index: 5;

}

#init~.tabbar#editorInit,
#edit-sequence-article~.tabbar#editorNav,
#main~.tabbar#editorBack,
#info-article~.tabbar#editorInfo,
#info-shared-users~.tabbar#editorInfo {
	visibility: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	z-index: 0;
}



.tabbar a.addRundownBt {
	width: 100% !important;
	text-align: center;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	cursor: pointer;
	border: 0px none;
}

.tabbar a#saveChanges {
	width: 50%;
}

.tabbar a.cancelBt {
	width: 50% !important;
	text-align: center;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	cursor: pointer;
}

.tabbar a.cancelBt:hover>i {
	color: #0099cc;
}

.tabbar a.green {
	width: 50% !important;
	text-align: center;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	cursor: pointer;
}

.tabbar a.green:hover>i {
	color: rgba(0, 0, 0, .35);
	width: 100% !important;
}

#edit-sequence-article.current~.tabbar#editorBack {
	visibility: hidden !important;
}

#info-article.current~.tabbar#editorInfo,
#info-shared-user~.tabbar#editorInfo {
	visibility: hidden !important;
}


/* Sortable styles */

li.ui-sortable-item {
	background: #444;
	height: 24px;
	box-shadow: inset 0px 0px 8px 2px rgba(0, 0, 0, .5);
}

li.ui-sortable-item>div {
	display: none !important;
}

.list>li.ui-sortable-item::before {
	border-bottom: 0px none transparent;
}

li.ui-sortable-helper {
	opacity: 0.85;
	left: 0px !important;
	border-top: 1px solid rgba(0, 0, 0, .25);
	min-height: 50px;
	max-height: 50px;
	height: 50px;
}

.advicePanel {
	text-align: center;
	position: fixed;
	top: 35%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
}

.textPanel {
	background-color: rgba(0, 0, 0, .2);
	margin-left: -125px;
	position: absolute;
	top: -35px;
	left: 50%;
	width: 230px;
	visibility: visible;
	font-size: 1.5em;
	color: #fff;
	padding: 10px;
	border-radius: 8px;
}

/* FAB BUTTON */
.fixed-action-btn {
	position: fixed;
	right: 23px;
	bottom: 60px;
	padding-top: 15px;
	margin-bottom: 0;
	z-index: 998;
}

.btn-floating {
	display: inline-block;
	color: #fff;
	position: relative;
	overflow: hidden;
	width: 40px;
	height: 40px;
	line-height: 40px;
	padding: 0;
	background-color: #0099CC;
	border-radius: 50%;
	transition: .3s;
	cursor: pointer;
	vertical-align: middle;
	outline: none !important;
}

.btn-floating.btn-large {
	width: 55.5px;
	height: 55.5px;
}

.btn-large,
.btn-floating {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}

.btn-floating.btn-large i {
	line-height: 58.5px;
}

.btn-large i {
	font-size: 1.6rem;
}

.btn-floating i {
	width: inherit;
	display: inline-block;
	text-align: center;
	color: #fff;
	font-size: 1.3rem;
	line-height: 42px;
}

.fixed-action-btn ul {
	left: 0;
	right: 0;
	text-align: center;
	position: absolute;
	bottom: 64px;
	margin: 0;
	visibility: hidden;
	z-index: 5001;
}

.fixed-action-btn.active ul {
	visibility: visible;
}

.fixed-action-btn ul li {
	margin-bottom: 15px;
	list-style-type: none
}

.action-buttons-container {
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: flex-end;
    height: 80px;
    padding: 13px 20px;
    background-color: #FFF;
}

.action-buttons-container {
	visibility: hidden;
}

.current.action-buttons-container {
	visibility: visible;
}

.overlay {
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: transparent;
	opacity: .3;
	display: none;
	z-index: 100 !important;
	float: inherit;
}

.overlayShare {
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100 !important;
	float: inherit;
}

.sizeMode {
	width: 350px;
	height: 265px !important;
	margin-right: -175px;
}

#saveTitleAs {
	display: flex;
	display: -ms-flexbox;
    display: -webkit-flex;
	margin-right: -2px;
}

.settingsPopover {
	/* ADD all you need to new CSS  */
}

.favouritesPopover {
	width: 450px;
	height: 265px !important;
	margin-right: -175px;
}

.leftMode {
	right: 0;
}

.blocked {
	display: none;
}

/* Tooltip container */
.tooltip {
	max-width: 90%;
	/* position: relative;
	display: inline-block;
	border-bottom: 1px dotted black; */
	/* If you want dots under the hoverable text */
}

.linkActivatePremiumText {
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer;
}

/* ANIMATIONS */
/* Chrome, Safari, Opera */
@-webkit-keyframes swipe {
	from {
		right: -180px;
	}

	to {
		right: 0px;
	}
}

/* Standard syntax */
@keyframes swipe {
	from {
		right: -180px;
	}

	to {
		right: 0px;
	}
}


/* RESPONSIVE */
@media (max-width: 1024px) {
	

		#info-article.current~.tabbar#editorInfo {
			visibility: hidden !important;
		}

	#info-shared-user~.tabbar#editorInfo {
		visibility: visible !important;
	}
	.action-buttons-container {
		width: 100%;
		position: absolute;
		bottom: 0;
		right: 0;
		display: flex;
		display: -ms-flexbox;
        display: -webkit-flex;
		-webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
		justify-content: flex-end;
		height: 70px;
		background-color: #222;
		padding: 10px 15px;
	}
	
}

@media (max-width: 890px) {
	li.sequenceSelected span.time-title {
		display: none;
	}
}

@media (max-width: 860px) {
	li.sequenceSelected .sequence-infos-wrap {
		width: 10px;
		max-width: 150px;
		min-width: 150px;
	}

}

@media (max-width: 800px) {
	.panel-timers ul {
		width: auto;
	}

	.panel-timers ul li span {
		width: 85px;
		max-width: 85px;
		min-width: 85px;
	}

	.panel-timers ul.large-timers li span {
		width: 180px;
		max-width: 180px;
		min-width: 180px;
		margin-right: 0px;
	}

	.sequence-infos-wrap {
		width: 110px !important;
		max-width: 110px !important;
		min-width: 110px !important;
	}

	li.sequences .sequence-name-wrap {
		min-width: 200px;
		max-width: 200px;
		width: 200px;
	}

	.element-form {
		width: 98%;
	}

}

@media (max-width: 750px) {
	li.sequences .sequence-name-wrap {
		min-width: 150px;
		max-width: 150px;
		width: 150px;
	}
}

@media (max-width: 710px) {
	.panel-timers {
		width: 60%;
	}

	.panel-timers ul {
		width: 100%;
	}

	.panel-timers ul li span {
		width: 50%;
		max-width: 50%;
		min-width: 50%;
	}

	.panel-timers ul.large-timers li span {
		width: 50%;
		max-width: 50%;
		min-width: 50%;
		margin-right: 5px;
	}
}

@media (max-width: 665px) {

	.panel-timers ul li span.success,
	.panel-timers ul li span.danger {
		font-size: 1.2em;
		height: 10px;
		line-height: 20px;
		font-weight: bold;
	}

	.panel-timers ul.large-timers {
		padding-top: 9px;
	}

	.panel-controls {
		width: 280px;
	}

	.panel-controls button {
		margin: 5px 0px;
	}

	li.sequences .sequence-name-wrap {
		min-width: 130px !important;
		max-width: 130px !important;
		width: 130px !important;
		font-size: 0.75em;
	}

	li.sequences .sequence-infos-wrap {
		width: 150px !important;
		max-width: 150px !important;
		min-width: 150px !important;
	}

}

@media (max-width: 600px) {
	.panel-timers {
		width: 60%;
	}

	ul.small-timers li {
		/*	text-decoration:underline;*/
	}

	ul.small-timers:hover {
		/* text-decoration:underline;*/
		/*color: #0099cc;*/
	}

	ul.small-timers li span:nth-child(3),
	ul.small-timers li span:nth-child(4) {
		display: none;
	}

	.more-clocks {
		display: none;
		/*Show or hide icon for show clocks*/
	}

	.panel-timers ul li span {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		max-width: 100px;
		width: 100px;
		min-width: 100px;
	}

	.panel-timers ul.large-timers li span {
		max-width: 100px;
		width: 100px;
		min-width: 100px;
	}

	/*Sequences*/
	.article-action-panel li.sequences .sequence-name-wrap {
		min-width: 150px;
		max-width: 150px;
		width: 150px;
		overflow: hidden;
		font-size: 0.75em;
	}

	.article-init li.sequences .sequence-name-wrap {
		min-width: 150px;
		max-width: 150px;
		width: 150px;
		overflow: hidden;
	}

	li.sequenceSelected .sequence-times-wrap {
		display: none;
	}

	li.sequenceSelected .option-sequence {
		right: 0px;
		position: absolute;
		height: 50px;
	}

	.article-action-panel li.sequenceSelected .option-sequence {
		right: 0px;
		position: absolute;
		height: 52px;
	}

	.article-init li.sequenceSelected .sequence-name-wrap {
		min-width: 390px !important;
		max-width: 390px !important;
		width: 390px !important;
	}
	a.button.custom-button,
	.v-btn.rundown-dialog-btn,
	.v-btn.text--rundown-dialog-btn {
		width: 50% !important;
		max-width: 50% !important;
		min-width: 50% !important;
	}
}

@media (max-width: 530px) {
	.time-title {
		display: none;
	}

	li.sequences .sequence-name-wrap {
		min-width: 110px !important;
		max-width: 110px !important;
		width: 110px !important;
	}

	/*Datepicker responsive*/
	.dtpicker-mobile .dtpicker-content {
		width: 300px !important;
	}

	.dtpicker-components {
		overflow: hidden !important;
		margin: 10px auto !important;
	}

	.dtpicker-components .dtpicker-compOutline {
		margin: 0px 0px 0px 8px !important;
	}

	.dtpicker-components .dtpicker-compOutline {
		width: 50px !important;
	}

	.dtpicker-components .dtpicker-compButton {
		width: 48px !important;
	}

	.dtpicker-components .dtpicker-compValue {
		width: 48px !important;
		font-size: 1em !important;
	}

	.article-init li.sequenceSelected .sequence-name-wrap {
		min-width: 350px !important;
		max-width: 350px !important;
		width: 350px !important;
	}
}

@media (max-width: 500px) {
	.nav-logo-container {
		display: none;
	}

	article.article-action-panel>section {
		top: -10px;
	}

	.panel-timers ul.large-timers {
		padding-top: 0px;
	}

	.action-panel {
		height: 82px;
	}

	.panel-timers {
		height: 74px !important;
		width: 210px !important;
		left: 5px !important;
	}

	.panel-controls {
		height: 74px !important;
		width: 150px !important;
		right: 5px !important;
		min-width: 150px !important;
	}

	.info-panel {
		top: -10px;
	}

	.article-action-panel ul.list {
		margin-top: 0px;
	}

	.panel-controls {
		width: 170px;
	}

	.panel-controls button {
		height: 50px;
		width: 50px;
		background-size: 2.8em;
		margin-top: 10px;
	}

	.onair-panel {
		display: none !important;
	}

	.head-info-sequence {
		width: 75%;
	}

	.led {
		display: inline-block !important;
		margin-left: 5px !important;
		vertical-align: middle;
	}

	.sequence-name-head {
		margin-left: 0 !important;
		/*float: left;
		position: absolute !important;
        left: 0;
        top: 35px;*/
	}

	/** Header text **/
	#sequenceData .sequence-name-head {
		position: relative !important;
		left: 0;
		top: 0;
	}

	#sequenceDataEditor .sequence-name-head {
		position: absolute !important;
		left: 0;
		top: 18px !important;
	}

	span.sequence-name-head {
		top: 10px;
	}

	span.rundown-name {
		/*top: 10px;*/
	}

	#importTypePopover.popover {
		min-width: 95% !important;
		font-size: 14px;
		line-height: 20px;
		max-height: 280px;
	}

	.sequence-infos-wrap div {
		width: 80%;
	}

	/** Guest Mode **/
	.guest-mode-container {
		display: flex;
		display: -ms-flexbox;
        display: -webkit-flex;
		-webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
		align-items: flex-start;
		align-content: stretch;
		padding: 17px;
	}

	.guest-mode-title {
		font-size: 1em;
		color: #0099cc;
		text-transform: uppercase;
	}

	.guest-mode-user {
		font-size: 0.9em;
		text-align: left;
	}

	.info-panel.openInfo p {
		clear: left;
		width: 98%;
		margin-top: 5px;
	}

	.info-panel.openInfo p:last-of-type span.info-title {
		width: 30%;
	}

	.info-panel.openInfo p:last-of-type span.info-name {
		width: 60%;
	}

	li.sequenceSelected .sequence-infos-wrap {
		min-width: 80px !important;
		max-width: 80px !important;
		width: 80px !important;
	}

	article#edit-sequence-article .action-panel,
	article#info-article .action-panel,
	article#info-shared-user .action-panel {
		width: 100%;
		position: absolute;
		top: -70px;
	}

	article#edit-sequence-article,
	article#info-article,
	article#info-shared-user {
		top: 132px;
	}

	.article-init li.sequenceSelected .sequence-name-wrap {
		min-width: 290px !important;
		max-width: 290px !important;
		width: 290px !important;
	}

	.article-init li.sequenceSelected span.date-creation-span {
		display: none;
	}

	.fixed-action-btn {
		/*bottom: 30px;*/
	}

	/** Ventana Opciones **/
	#optionsPopover,
	#fvTypePopover,
	#fvselectTypePopover,
	#AccountPopover,
	#importTypePopover,
	#premiumPopover,
	#confirmedPurchase {
		top: 0 !important;
		width: 100%;
		margin: 0 auto;
		height: 100%;
		min-height: 100%;
		border-radius: 0;
		position: absolute;
	}

	#userShareList {
		top: 0 !important;
		width: 100%;
		margin: 0 auto;
		height: 100%;
		min-height: 100%;
		border-radius: 0;
		position: absolute;
	}

	#userShareList.userSharePopover ul#PopoverUsersShared {
		padding: 0px 5px;
        max-height: 100vh;
		height: calc(100vh - 262px);
		-webkit-overflow-scrolling: touch;
	}

	#userShareList.userSharePopover section {
		max-height: 80vh;
	}

	#confirmedPurchase section {
		padding: 50px;
		text-align: center;
	}

	#fvTypePopover.favouritesPopover section,
	#fvselectTypePopover.favouritesPopover section {
		max-height: 80vh;
		margin: 0;
	}

	#optionsPopover.settingsPopover .popup-footer,
	#AccountPopover.accountPopover .popup-footer,
	#fvTypePopover.favouritesPopover .popup-footer,
	#fvselectTypePopover.favouritesPopover .popup-footer,
	#userShareList.userSharePopover .popup-footer,
	#importTypePopover .popup-footer,
	#confirmedPurchase .popup-footer {
		position: absolute;
		width: 100%;
		bottom: 0;
	}

	#userShareList.userSharePopover .popup-footer {
		display: flex;
		display: -ms-flexbox;
        display: -webkit-flex;
		-webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
		justify-content: center;
	}

	#userShareList.userSharePopover .popup-footer .premium-container-advice,
	#optionsPopover .popup-footer .premium-container-advice,
	#importTypePopover .popup-footer .premium-container-advice {
		margin-bottom: 10px;
		width: 100% !important;
	}

	#optionsPopover.settingsPopover .popup-footer button,
	#AccountPopover.accountPopover .popup-footer button,
	#fvTypePopover.favouritesPopover .popup-footer button,
	#fvselectTypePopover.favouritesPopover .popup-footer button,
	#userShareList.userSharePopover .popup-footer button,
	#importTypePopover .popup-footer button,
	#confirmedPurchase .popup-footer button {
		width: 100%;
	}

	#optionsPopover.settingsPopover header button.close,
	#AccountPopover.accountPopover header button.close,
	#fvTypePopover.favouritesPopover header button.close,
	#fvselectTypePopover.favouritesPopover header button.close,
	#userShareList.userSharePopover header button.close {
		display: none;
	}

}

@media (max-width: 430px) {
	.article-action-panel li.sequenceSelected {
		margin-bottom: 43px;
	}

	.article-action-panel .sequenceSelected .sequence-infos-wrap {
		display: block;
		position: absolute;
		float: left;
		clear: left;
		width: 100% !important;
		min-width: 0px !important;
		max-width: 100% !important;
		background: #0089b7;
		left: 0px;
		border-top: 1px solid #026e92;
	}

	.article-action-panel .sequenceSelected .sequence-infos-wrap div {
		width: 95%;
		float: left;
		position: relative;
		clear: left;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-top: 0px;
		padding-left: 5px;

	}

	/*One info visible*/
	.article-action-panel li.sequenceSelected.oneInfo {
		margin-bottom: 23px;
	}

	.article-action-panel .sequenceSelected.oneInfo .sequence-infos-wrap {
		top: 52px;
		height: 36px;
	}

	/*One info visible*/
	.article-action-panel .sequenceSelected.twoInfo .sequence-infos-wrap {
		top: 52px;
		height: 46px;
	}

	.article-action-panel li.sequenceSelected.twoInfo {
		margin-bottom: 43px;
	}

	/*None info visible*/
	.article-action-panel li.sequenceSelected.noneInfo {
		margin-bottom: 0px;
	}

	.article-action-panel .sequenceSelected.noneInfo .sequence-infos-wrap {
		display: none;
	}

	.article-init li.sequenceSelected .sequence-name-wrap {
		/*min-width: 250px!important;
		max-width: 250px!important;*/
		width: 250px !important;
	}

}

@media (max-width: 400px) {
	.color-item-form {
		width: 23px;
		height: 23px;
		margin: 5px;
	}

	.color-item-form.fa {
		line-height: 23px;
		text-align: center;
		font-size: 1em;
	}

	.time-response {
		font-size: 0.8em;
	}

	.element-form {
		font-size: 0.8em !important;
	}

	.element-form {
		width: 97%;
	}

	.article-init li.sequenceSelected .sequence-name-wrap {
		min-width: 230px !important;
		max-width: 230px !important;
		width: 230px !important;
	}
}

@media (max-width: 380px) {
	.panel-controls {
		width: 170px;
	}

	.panel-timers {
		width: 160px;
	}

	.panel-timers ul li span {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		max-width: 60px;
		width: 60px;
		min-width: 60px;
	}

	.panel-timers ul.small-timers>li:last-of-type span {
		font-size: 0.85em;
	}

	.panel-timers ul.large-timers li span {
		max-width: 60px;
		width: 60px;
		min-width: 60px;
	}

	.panel-timers ul li span.success,
	.panel-timers ul li span.danger {
		font-size: 0.85em;
	}

	.head-info-sequence span {
		/*font-size: 0.8em;*/
	}

	/*li.sequences .sequence-infos-wrap{
		min-width: 100px!important;
		max-width: 100px!important;
		width: 100px!important;
		font-size: 0.65em;
	}*/
	.article-init li.sequenceSelected .sequence-name-wrap {
		min-width: 200px !important;
		max-width: 200px !important;
		width: 200px !important;
	}
	.article-init li.sequences .sequence-name-wrap .sequence-name-name {
		max-width: 57%;
	}
	.article-init li.sequenceSelected span.date-creation-span {
		display: none;
	}
}

@media (max-width: 365px) {
	.head-info-sequence {
		margin: auto;
		top: -8px;
	}

	.led {
		float: left;
	}

	.rundown-name {
		max-width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.head-info-sequence span {
		font-size: 0.8em;
		clear: left;
		float: left;
		margin-left: 5px;
	}

	li.sequences .sequence-name-wrap {
		min-width: 90px !important;
		max-width: 90px !important;
		width: 90px !important;
	}

	li.sequences .sequence-infos-wrap {
		width: 90px !important;
		max-width: 90px !important;
		min-width: 90px !important;
	}

	.article-action-panel li.sequences.sequenceSelected .sequence-name-wrap {
		min-width: 100px !important;
		max-width: 100px !important;
		width: 100px !important;
		font-size: 0.7em;
		margin-right: 3px;
	}

	li.sequences .sequence-number-wrap {
		max-width: 30px;
		width: 30px;
		min-width: 30px;
		margin: 8px 4px;
		height: 25px;
		font-size: 0.7em;
	}
	.article-init li.sequences .sequence-name-wrap .sequence-name-name {
		max-width: 45%;
	}

	li.sequences .sequence-number-wrap-no-sortable {
		max-width: 30px;
		width: 30px;
		min-width: 30px;
		margin: 8px 4px;
		height: 25px;
		font-size: 0.7em;
	}

	.sequence-number {
		height: 25px !important;
		line-height: 25px !important;
	}

	.article-action-panel .sequence-name-wrap {
		max-width: 100% !important;
		width: auto !important;
		margin-left: 10px !important;
		position: relative !important;
		font-size: 1em;
	}

	.article-action-panel .sequence-infos-wrap {
		display: none;
	}

	.color-item-form {
		width: 18px;
		height: 18px;
		margin: 5px;
	}

	.color-item-form.fa {
		line-height: 18px;
		text-align: center;
		font-size: 1em;
	}

	.element-form .label-form {
		max-width: 25%;
	}

	.forceModePicker>.label-form {
		max-width: 30px;
		min-width: 30px;
	}

	.right-check span {
		float: left;
		position: relative;
		margin-bottom: 10px;
		margin-right: 2px;
		font-size: 0.65em;
	}

	.article-init li.sequenceSelected .sequence-name-wrap {
		min-width: 170px !important;
		max-width: 170px !important;
		width: 170px !important;
	}
}

/*Height responsive*/

@media (min-height:550px) {

	.popover,
	.popoverCustom {
		max-height: 385px;
		height: auto;
	}

	.popover.inverse,
	.popoverCustom.inverse {
		max-height: 300px;
		height: 215px;
	}

	.popover.inverse.largeWindow,
	.popoverCustom.inverse.largeWindow {
		max-height: 402px;
		height: auto;
		top: 50px !important;
	}

	.popoverCustom.inverse.largeWindowHighest {
		max-height: 402px;
		height: auto;
		top: 0px !important;
	}

}

@media only screen and (max-device-width: 320px) and (orientation: portrait) {
	nav>a.button+h1 {
		left: 50px !important;
		right: 110px;
		top: 17px !important;
	}

	div.led {
		top: 7px;
	}
}