/***************************************************************************
* FONTS
***************************************************************************/

@font-face {
  font-family: 'Open Sans';
  src: url(./fonts/OpenSans-Regular.ttf);
}
@font-face {
  font-family: 'Open Sans';
  src: url(./fonts/OpenSans-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: 'Archivo Black';
  src: url(./fonts/ArchivoBlack-Regular.ttf);
}

/***************************************************************************
* BASE LAYOUT
***************************************************************************/
*{
    box-sizing:border-box
}
html{
    height:100%;
    width:100%;
    min-width:350px
}
body {
    display:flex;
    flex-direction:column;
    margin:0;
    min-width:100%;
    height:100%;
    min-height:100%;
    color:#eee;
    font-family:'Open Sans',sans-serif;
    font-size: 18px;
    background-image: url(../images/themes/base.png);
}


body:before{
    content:' ';
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:fixed;
    z-index:-1;
    background:rgba(68,75,80,.3)
}

.header{
	position:relative;
    background:linear-gradient(#5cba9e,#5cba9e);
    padding:15px;
    border-bottom:1px solid #000;
    box-shadow: 0 0 3px 0px #000;
    z-index: 5;
}

.font-heading, .btn.font-heading {
	font-family:'Archivo Black',sans-serif;
}

.header__title{
    font-size:2.0rem;
    text-align:center;
}
.header__title--left{
	text-align: left;	
}
.header__logo {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 10px;
}
.header__logo img {
	border: 0;
	max-height: 100%;
	max-width: 100%;
}

.header__logo--center {
	text-align: center;
}

.header__time {
	position: absolute;
	right: 10px;
	text-align: right;
	display: flex;
	align-items:center;
	justify-content: center;
	height: 100%;
	top: 0;
}

.header__logo--right {
	text-align: right;
}

.content{
    flex: 1;
    overflow: auto;
    padding: 10px;
}
.content--nopadding {
	padding: 0;
}

.mainContainer {
	display: flex;
}

.visitorsContainer {
	padding: 10px;
	flex: 1;
	flex-basis: 300px;
}

.announcedVisitorsContainer {
	margin-bottom: 10px;	
}

.currentVisitorsContainer {
	margin-bottom: 10px;
}

.section{
    border:1px solid rgba(22,22,22,1);
    background-color:rgba(0,0,0,.2);
    border-radius:4px;
    padding:10px;
    position:relative
}
.section--gradient{
    background-color:rgba(255,255,255,.15);
    border:1px solid #000
}
.section--shadow{
    box-shadow:2px 6px 6px -1px rgba(0,0,0,.5)
}

.presenceContainer {
	padding: 10px;
	height: 100%; 
	position: relative;
}

.presentContainer {
	padding: 0 5px 10px 5px;
	flex-grow: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.absentContainer {
	padding: 0 5px;
	flex-grow: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.presenceUser {
    padding: 10px;
    background-color:rgba(61,105,139,.3);
    border: 1px solid #021829;
    margin-bottom: 5px;
}
.presenceUser--spacer {
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 0 !important;
	border: 0 !important;
}
.presenceUser--manual:hover {
	opacity: 0.5;
	cursor: pointer;
}

/***************************************************************************
* PRESENCE BIG LAYOUT
***************************************************************************/
.layout-noVisitors .presenceContainer, .layout-noCurrentVisitors .presenceContainer, .layout-SBS .presenceContainer, .layout-presenceBig .presenceContainer, .layout-presenceBigSBS .presenceContainer {
	flex: 1;
	flex-basis: 300px;
}

.layout-noVisitors #absenceList, .layout-noVisitors #presenceList, .layout-noCurrentVisitors #absenceList, .layout-noCurrentVisitors #presenceList, .layout-SBS #presenceList, .layout-SBS #absenceList, .layout-presenceBig #presenceList, .layout-presenceBig #absenceList {
	display: flex;
	flex-wrap: wrap;
}

.layout-noVisitors .presenceUser, .layout-noCurrentVisitors .presenceUser, .layout-SBS .presenceUser, .layout-presenceBig .presenceUser {
	flex: 1;
	flex-basis: 160px;
	margin-left: 1px;
	margin-right: 1px;
}

/***************************************************************************
* PRESENCE SBS LAYOUT
***************************************************************************/

.layout-noVisitors .presenceContainer, .layout-noCurrentVisitors .presenceContainer, .layout-SBS .presenceContainer, .layout-presenceBigSBS .presenceContainer , .layout-presenceSBS .presenceContainer {
	display: flex;
}

.layout-noVisitors .presentContainer, .layout-noCurrentVisitors .presentContainer, .layout-SBS .presentContainer, .layout-presenceBigSBS .presentContainer, .layout-presenceSBS .presentContainer{
	flex-basis: 300px;
}

.layout-noVisitors .absentContainer, .layout-noCurrentVisitors .absentContainer, .layout-SBS .absentContainer, .layout-presenceBigSBS .absentContainer, .layout-presenceSBS .absentContainer {
	flex-basis: 300px;
}


/***************************************************************************
* VISITORS SBS LAYOUT
***************************************************************************/
.layout-SBS .mainContainer {
	flex-direction: column;
}

.layout-SBS .visitorsContainer {
	display: flex;
}

.layout-SBS .announcedVisitorsContainer {
	flex-basis: 300px;
	flex: 1;
}

.layout-SBS .currentVisitorsContainer {
	flex-basis: 300px;
	flex: 1;
}

/***************************************************************************
* NO VISITORS LAYOUT
***************************************************************************/
.layout-noVisitors .mainContainer, .layout-noCurrentVisitors .mainContainer {
	flex-direction: column;
}
.layout-noVisitors .visitorsContainer {
	display: none;
}

.layout-noCurrentVisitors .currentVisitorsContainer {
	display: none;
}


/***************************************************************************
* SCREENSAVER
***************************************************************************/
.screensaver{
    position:fixed;
    width:100%;
    height:100%;
    background:#000;
    z-index:9999;
    
    /*display:flex;
    justify-content:center;
    align-items:center*/
}
.screensaver__logo {
	text-align: center;
}
.screensaver__logo img{
	max-width: 600px;
	max-height: 200px;
}
.screensaver__text {
    color:#FFF;
    font-size: 46px;
    text-align: center;
}

.screensaver__x {
	width: 600px;
  	animation: x 18s linear infinite alternate;
}
.screensaver__y {
	height: 200px;
  	animation: y 13s linear infinite alternate;
}

.screensaver--logo .screensaver__y {
	height: 400px;
  	animation: yl 13s linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX( calc(100vw - 600px) );
  }
}

@keyframes y {
  100% {
    transform: translateY( calc(100vh - 200px) );
  }
}
@keyframes yl {
  100% {
    transform: translateY( calc(100vh - 400px) );
  }
}

.screensaver--hidden {
	display: none;	
}




/***************************************************************************
* FLEXBOX
***************************************************************************/
.fx{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap
}
.fx--col{
    flex-direction:column
}
.fx--nowrap{
    flex-wrap:nowrap
}
.fx--jc-start{
    justify-content:flex-start
}
.fx--jc-end{
    justify-content:flex-end
}
.fx--jc-center{
    justify-content:center
}
.fx--jc-space-between{
    justify-content:space-between
}
.fx--jc-space-around{
    justify-content:space-around
}
.fx--jc-space-evenly{
    justify-content:space-evenly
}
.fx--ai-start{
    align-items:flex-start
}
.fx--ai-end{
    align-items:flex-end
}
.fx--ai-center{
    align-items:center
}
.fx--ai-baseline{
    align-items:baseline
}
.fx--ai-stretch{
    align-items:stretch
}
.fx--ac-start{
    align-content:flex-start
}
.fx--ac-end{
    align-content:flex-end
}
.fx--ac-center{
    align-content:center
}
.fx--ac-space-between{
    align-content:space-between
}
.fx--ac-space-around{
    align-content:space-around
}
.fx--ac-stretch{
    align-content:stretch
}
.fx__i{
    flex:1 1 auto;
    max-width:100%
}
.fx__i--grow,.fx__i--grow-1{
    flex-grow:1
}
.fx__i--grow-2{
    flex-grow:2
}
.fx__i--grow-3{
    flex-grow:3
}
.fx__i--grow-4{
    flex-grow:4
}
.fx__i--grow-5{
    flex-grow:5
}
.fx__i--grow-6{
    flex-grow:6
}
.fx__i--nogrow{
    flex-grow:0
}
.fx__i--shrink,.fx__i--shrink-1{
    flex-shrink:1
}
.fx__i--shrink-2{
    flex-shrink:2
}
.fx__i--shrink-3{
    flex-shrink:3
}
.fx__i--shrink-4{
    flex-shrink:4
}
.fx__i--shrink-5{
    flex-shrink:5
}
.fx__i--shrink-6{
    flex-shrink:6
}
.fx__i--noshrink{
    flex-shrink:0
}
.fx__i--basis-0{
    flex-basis:0
}
.fx__i--basis-100{
    flex-basis:100px
}
.fx__i--basis-200{
    flex-basis:200px
}
.fx__i--basis-300{
    flex-basis:300px
}
.fx__i--basis-0{
    flex-basis:0
}
.fx__i--as-start{
    align-self:flex-start
}
.fx__i--as-end{
    align-self:flex-end
}
.fx__i--as-center{
    align-self:center
}
.fx__i--as-baseline{
    align-self:baseline
}
.fx__i--as-stretch{
    align-self:stretch
}


/***************************************************************************
* INPUT
***************************************************************************/
.inputstack{
    background-color:#fff
}
.input,.inputstack{
    font-size:14px;
    padding:5px;
    color:#363636;
    border:1px solid #C4C4C4;
    border-radius:3px;
    margin:2px 0;
    box-sizing:border-box;
    max-width:100%
}
.input[type=checkbox],.input[type=radio]{
    vertical-align:middle;
    position:relative;
    bottom:1px
}
.inputstack__input{
    flex:1;
    width:10px;
    border:0;
    padding:5px;
    margin:0;
    font-size:inherit;
    color:inherit;
    background-color:inherit
}
.inputstack{
    display:flex;
    padding:0
}
.inputstack *:first-child{
    border-radius:3px 0 0 3px!important
}
.inputstack *:last-child{
    border-radius:0 3px 3px 0!important
}
.input:disabled{
    opacity:.7
}
.input--primary,.inputstack--primary{
    background-color:rgba(141,185,219,1);
    border-color:rgba(0,5,39,1);
    color:#363636
}
.input--secondary,.inputstack--secondary{
    background-color:rgba(207,210,221,1);
    border-color:rgba(138,140,149,1);
    color:#363636
}
.input--success,.inputstack--success{
    background-color:rgba(153,255,194,1);
    border-color:rgba(0,98,14,1);
    color:#363636
}
.input--info,.inputstack--info{
    background-color:rgba(148,255,255,1);
    border-color:rgba(0,119,117,1);
    color:#363636
}
.input--warning,.inputstack--warning{
    background-color:rgba(255,250,158,1);
    border-color:rgba(118,70,0,1);
    color:#363636
}
.input--danger,.inputstack--danger{
    background-color:rgba(255,135,135,1);
    border-color:rgba(100,0,0,1);
    color:#363636
}
input[type=radio].input--primary + label,input[type=checkbox].input--primary + label{
    color:rgba(61,105,139,1)
}
input[type=radio].input--secondary + label,input[type=checkbox].input--secondary + label{
    color:rgba(138,140,149,1)
}
input[type=radio].input--success + label,input[type=checkbox].input--success + label{
    color:rgba(73,198,114,1)
}
input[type=radio].input--info + label,input[type=checkbox].input--info + label{
    color:rgba(68,219,217,1)
}
input[type=radio].input--warning + label,input[type=checkbox].input--warning + label{
    color:rgba(218,170,78,1)
}
input[type=radio].input--danger + label,input[type=checkbox].input--danger + label{
    color:rgba(200,55,55,1)
}
.input--minimal{
    border-right:0;
    border-top:0;
    border-left:0;
    background:inherit;
    border-radius:0
}
.input--file{
    color:#FFF;
    border:0
}
.input--xs,.inputstack--xs{
    width:50px
}
.input--s,.inputstack--s{
    width:100px
}
.input--m,.inputstack--m{
    width:200px
}
.input--l,.inputstack--l{
    width:300px
}
.input--xl,.inputstack--xl{
    width:500px
}
.input--xxl,.inputstack--xxl{
    width:800px
}
.input--w100,.inputstack--w100{
    width:100%
}
.input--noLMargin{
    margin-left:0
}
.input--noRMargin{
    margin-right:0
}
.input--noLRMargin{
    margin-left:0;
    margin-right:0
}
.input--ta-s{
    height:50px
}
.input--ta-m{
    height:100px
}
.input--ta-l{
    height:200px
}


/***************************************************************************
* BUTTONS
***************************************************************************/
.btn,.inputstack__btn{
    background-color:#f5f5f5;
    background-image:linear-gradient(to bottom,#f5f5f5 0,#d2d2d2 33%,#d2d2d2 66%,#f5f5f5 100%);
    background-repeat:repeat-x;
    background-size:1px 300%;
    border-style:solid;
    border-width:1px;
    border-radius:4px;
    border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
    text-shadow:0 1px 0 rgba(255,255,255,.3);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    color:#000;
    padding: 10px!important;
    font-family:'Archivo Black',sans-serif;
    font-size:14px;
    margin:2px 0;
    cursor:pointer;
    transition:background-position .15s;
    display:inline-block;
}

.inputstack__btn{
    border:0;
    margin:0
}
.btn--block{
    display:block;
    width:100%
}

.btn:hover,.inputstack__btn:hover{
    background-position:0 50%
}
.btn:active,.inputstack__btn:active{
    background-position:0 100%
}
.btn:disabled,.btn[disabled],.inputstack__btn:disabled,.btn--disabled,.inputstack__btn--disabled{
    background-position:0 130%!important;
    opacity:.5
}

.btn--primary,.inputstack button.inputstack__btn--primary,.inputstack--primary .inputstack__btn{
    background-color:#52af93;
    background-image:linear-gradient(to bottom,rgba(92,186,158,1) 0,rgba(82,176,148,1) 33%,rgba(82,176,148,1) 66%,rgba(92,186,158,1) 100%);
    text-shadow:0 -1px 0 rgba(0,0,0,.25);
    color: #fff;
}
.btn--secondary,.inputstack button.inputstack__btn--secondary,.inputstack--secondary .inputstack__btn{
    background-color: #8a8c95;
    background-image:linear-gradient(to bottom,#8a8c95 0,#6e6f75 33%,#6e6f75 66%,#8a8c95 100%);
    text-shadow:0 -1px 0 rgba(0,0,0,.25);
    color:#fff
}
.btn--success,.inputstack button.inputstack__btn--success,.inputstack--success .inputstack__btn{
    background-color:rgba(73,198,114,1);
    background-image:linear-gradient(to bottom,rgba(73,198,114,1) 0,#179440 33%,#179440 66%,rgba(73,198,114,1) 100%);
    text-shadow:0 -1px 0 rgba(0,0,0,.25);
    color:#fff
}
.btn--info,.inputstack button.inputstack__btn--info,.inputstack--info .inputstack__btn{
    background-color:rgba(68,219,217,1);
    background-image:linear-gradient(to bottom,rgba(68,219,217,1) 0,#12a9a7 33%,#12a9a7 66%,rgba(68,219,217,1) 100%);
    text-shadow:0 -1px 0 rgba(0,0,0,.25);
    color:#fff
}
.btn--warning,.inputstack button.inputstack__btn--warning,.inputstack--warning .inputstack__btn{
    background-color:rgba(218,170,78,1);
    background-image:linear-gradient(to bottom,rgba(218,170,78,1) 0,#a8781c 33%,#a8781c 66%,rgba(218,170,78,1) 100%);
    text-shadow:0 -1px 0 rgba(0,0,0,.25);
    color:#fff
}
.btn--danger,.inputstack button.inputstack__btn--danger,.inputstack--danger .inputstack__btn{
    background-color:rgba(200,55,55,1);
    background-image:linear-gradient(to bottom,rgba(200,55,55,1) 0,#960505 33%,#960505 66%,rgba(200,55,55,1) 100%);
    text-shadow:0 -1px 0 rgba(0,0,0,.25);
    color:#fff
}

.btn--file{
    display:inline-block;
    position:relative;
    overflow:hidden
}
.btn--file input{
    position:absolute;
    top:0;
    right:0;
    margin:0;
    padding:0;
    font-size:20px;
    cursor:pointer;
    opacity:0
}



/***************************************************************************
* ANCHOR
***************************************************************************/
a{
    color:inherit;
    text-decoration:none;
    transition:color .2s
}
.a:hover{
    color:#FFF
}
.a--hover-dark:hover{
    color:#000
}
.a--success,.a--hover-success:hover{
    color:rgba(73,198,114,1)
}
.a--info,.a--hover-info:hover{
    color:rgba(68,219,217,1)
}
.a--warning,.a--hover-warning:hover{
    color:rgba(218,170,78,1)
}
.a--danger,.a--hover-danger:hover{
    color:rgba(200,55,55,1)
}

/***************************************************************************
* GENERAL STYLES
***************************************************************************/
.padded {
    padding: 10px!important
}
.padded:not(input){
    margin-top: 3px;
}
select,input,button{
    font-size:inherit!important
}
option *{
    padding:10px
}

.text-center{
    text-align:center!important
}
.text-left{
    text-align:left!important
}
.text-right{
    text-align:right!important
}
.text-bold{
    font-weight:bold!important
}
.text-strike{
    text-decoration:line-through!important
}
.text-underline{
    text-decoration:underline!important
}
.text-italic{
    font-style:italic!important
}
.float-left{
    float:left
}
.float-right{
    float:right
}

.hr{
    border:0;
    height:1px;
    background:#333
}
.hr--primary{
    background-color:#021829
}
.hr--secondary{
    background-color:rgba(138,140,149,1)
}
.hr--success{
    background-color:rgba(73,198,114,1)
}
.hr--info{
    background-color:rgba(68,219,217,1)
}
.hr--warning{
    background-color:rgba(218,170,78,1)
}
.hr--danger{
    background-color:rgba(200,55,55,1)
}

.font-s15{
    font-size:.85em
}
.font-s30{
    font-size:.7em
}
.font-s50{
    font-size:.5em
}
.font-p15{
    font-size:1.15em
}
.font-p30{
    font-size:1.30em
}
.font-p50{
    font-size:1.5em
}
.font-p75{
    font-size:1.75em
}
.font-2x{
    font-size:2em
}
.cursor-pointer{
    cursor:pointer!important
}
.cursor-move{
    cursor:move!important
}
.cursor-default{
    cursor:default!important
}
.hover-opacity:hover{
    opacity:.5!important
}
.hover-color:hover{
    color:rgba(138,140,149,1)!important
}
.opacity-10{
    opacity:1!important
}
.opacity-9{
    opacity:.9!important
}
.opacity-8{
    opacity:.8!important
}
.opacity-7{
    opacity:.7!important
}
.opacity-6{
    opacity:.6!important
}
.opacity-5{
    opacity:.5!important
}
.opacity-4{
    opacity:.4!important
}
.opacity-3{
    opacity:.3!important
}
.opacity-2{
    opacity:.2!important
}
.opacity-1{
    opacity:.1!important
}
.opacity-0{
    opacity:0!important
}
.transition{
    transition-duration:.2s
}
.transition--opacity{
    transition-property:opacity
}
.transition--duration-fast{
    transition-duration:.2s
}
.transition--duration-slow{
    transition-duration:.6s
}
.transition--duration-1s{
    transition-duration:1s
}
.notransition{
    transition:none!important
}
.icon-group{
    display:table
}
.icon-group__icon{
    display:table-cell;
    width:35px
}
h1,h2,h3,h4,h5,h6{
    margin:0 0 10px 0;
    padding:0
}

h2 {
	font-size: 1.8rem;
}


.clear{
    clear:both
}
.hidden{
    display:none
}
.vcenter{
    vertical-align:center
}
.invalid{
    border:1px solid #e50000;
    background-color:#fdd1d1
}
input[type=radio].invalid + label,input[type=checkbox].invalid + label{
    color:#e500a8
}
.pre{
    white-space:pre-wrap;
    word-wrap:wrap
}
.nomargin{
    margin:0!important
}
.nopadding{
    margin:0!important
}
.noborderradius{
    border-radius:0!important
}

.success{
    color:rgba(73,198,114,1)!important
}
.info{
    color:rgba(68,219,217,1)!important
}
.warning{
    color:rgba(218,170,78,1)!important
}
.danger{
    color:rgba(200,55,55,1)!important
}

/***************************************************************************
* STATUS BAR
***************************************************************************/
.statusbar{
    position:relative;
    padding:10px;
    text-align:center;
    font-size:14px;
    z-index:20;
    background-color:#3a87ad;
    border-bottom:1px solid #000
}
.statusbar--warning{
    background-color:#ae873b;
    color:#FFF
}
.statusbar--danger{
    background-color:#ad3a3a;
    color:#FFF
}
.statusbar--success{
    background-color:rgba(0,255,100,.2)
}
.statusbar--info{
    background-color:rgba(15,120,172,.2)
}


/***************************************************************************
* NOTIFICATION
***************************************************************************/
.notification-container{
    position:fixed;
    display:inline-block;
    pointer-events:none;
    z-index:1000;
    top:0;
    right:0
}
.notification{
    position:relative;
    padding:10px 20px;
    margin:10px;
    border-radius:5px;
    width:200px;
    pointer-events:auto;
    text-align:left;
    border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05),0px 0 5px 5px rgba(0,0,0,.2);
    background:rgb(255,255,255);
    background:rgba(255,255,255,.9);
    border:1px solid #000;
    color:#333
}
.notification-dismiss{
    cursor:pointer
}
.notification-dismiss:hover{
    opacity:.5
}
.notification-dismiss-icon{
    position:relative;
    margin-top:-8px;
    margin-right:-14px;
    float:right
}
.notification--primary{
    background-color:rgba(61,105,139,1);
    border-color:#000;
    color:#FFF
}
.notification--secondary{
    background-color: #545454;
    border-color:#000;
    color: #ffffff; 
}
.notification--success{
    background-color:#179440;
    border-color:#000;
    color:#FFF
}
.notification--info{
    background-color:#12a9a7;
    border-color:#000;
    color:#FFF
}
.notification--warning{
    background-color:#a8781c;
    border-color:#000;
    color:#FFF
}
.notification--danger{
    background-color:#960505;
    border-color:#000;
    color:#FFF
}

/***************************************************************************
* DIALOG
***************************************************************************/
.dialog{
    position:fixed;
    text-align:center;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:990;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    flex-direction:column;
    -webkit-align-items:center;
    align-items:center;
    justify-content:center;
    background-color:rgba(0,0,0,.6)
}
.dialog--no-overlay{
    background:none
}
.dialog--invisible{
    opacity:0;
    pointer-events:none
}
.dialog__box{
    position:relative;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    flex-direction:column;
    max-height:100%;
    min-width:300px;
    max-width:100%;
    color:#333;
    margin:10px;
    text-align:center;
    border-radius:6px;
    border:1px solid #000;
    background:#FFF
}
.dialog__header{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    background-color:#FFF;
    background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.2));
    border-radius:5px 5px 0 0;
    flex-shrink:0
}
.dialog__header--hidden{
    display:none
}
.dialog__header-content{
    font-size:2em;
    font-weight:bold;
    padding:5px 10px;
    text-align:center;
    flex-grow:1
}
.dialog__spacer,.dialog__dismiss{
    flex-grow:0;
    flex-shrink:0;
    flex-basis:40px;
    width:40px
}
.dialog__dismiss{
    cursor:pointer;
    margin-top:-2px;
    margin-right:3px;
    text-align:right;
    font-size:2.5em
}
.dialog__dismiss:hover{
    opacity:.4
}
.dialog__scroller .dialog__dismiss{
    position:absolute;
    display:inline-block;
    top:-4px;
    right:0;
    margin:0;
    width:auto
}
.dialog__scroller{
    border-radius:0 0 5px 5px;
    flex-grow:1;
    flex-shrink:1;
    overflow:auto
}
.dialog__box--animating .dialog__scroller{
    overflow:hidden
}
.dialog__scroller--with-dismiss{
    padding-left:25px;
    padding-right:25px
}
.dialog__content{
    min-height:40px;
    padding:10px
}
@media all and (max-width:500px){
    .dialog__spacer,.dialog__dismiss{
        flex-shrink:1;
        flex-basis:0
    }
    .dialog__header-content{
        text-align:left
    }
}
.dialog--primary .dialog__box{
    background:#fff;
    border-color:rgba(61,105,139,1);
    color:#000
}
.dialog--primary .dialog__header{
    background-color:rgba(61,105,139,1);
    text-shadow:1px 1px 0 rgba(0,0,0,.7);
    color:#FFF
}
.dialog--primary .dialog__header .dialog__dismiss{
    color:#FFF
}
.dialog--primary .dialog__footer{
    color:#000;
    background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(0,5,39,.3))
}
.dialog--secondary .dialog__box{
    background:#fff;
    border-color:#6e6f75;
    color:#000
}
.dialog--secondary .dialog__header{
    background-color:#6e6f75;
    text-shadow:1px 1px 0 rgba(0,0,0,.7);
    color:#FFF
}
.dialog--secondary .dialog__header .dialog__dismiss{
    color:#FFF
}
.dialog--secondary .dialog__footer{
    color:#000;
    background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(150,150,150,.3))
}
.dialog--success .dialog__box{
    background:#fff;
    border-color:rgba(73,198,114,1);
    color:#000
}
.dialog--success .dialog__header{
    background-color:rgba(73,198,114,1);
    text-shadow:1px 1px 0 rgba(0,0,0,.7);
    color:#FFF
}
.dialog--success .dialog__header .dialog__dismiss{
    color:#FFF
}
.dialog--success .dialog__footer{
    color:#000;
    background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(0,98,14,.3))
}
.dialog--info .dialog__box{
    background:#fff;
    border-color:rgba(68,219,217,1);
    color:#000
}
.dialog--info .dialog__header{
    background-color:rgba(68,219,217,1);
    text-shadow:1px 1px 0 rgba(0,0,0,.7);
    color:#FFF
}
.dialog--info .dialog__header .dialog__dismiss{
    color:#FFF
}
.dialog--info .dialog__footer{
    color:#000;
    background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(0,119,117,.3))
}
.dialog--warning .dialog__box{
    background:#fff;
    border-color:rgba(218,170,78,1);
    color:#000
}
.dialog--warning .dialog__header{
    background-color:rgba(218,170,78,1);
    text-shadow:1px 1px 0 rgba(0,0,0,.7);
    color:#FFF
}
.dialog--warning .dialog__header .dialog__dismiss{
    color:#FFF
}
.dialog--warning .dialog__footer{
    color:#000;
    background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(118,70,0,.3))
}
.dialog--danger .dialog__box{
    background:#fff;
    border-color:rgba(200,55,55,1);
    color:#000
}
.dialog--danger .dialog__header{
    background-color:rgba(200,55,55,1);
    text-shadow:1px 1px 0 rgba(0,0,0,.7);
    color:#FFF
}
.dialog--danger .dialog__header .dialog__dismiss{
    color:#FFF
}
.dialog--danger .dialog__footer{
    color:#000;
    background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(100,0,0,.3))
}

.dialog {
    justify-content:normal!important
}
.dialog__content .ftable__cell{
    padding:3px 10px!important
}

/***************************************************************************
* FTABLE
***************************************************************************/
.ftable {
    margin-bottom:10px;
    /*
    border-width: 1px;
    border-style: solid;
    */
}
.ftable--primary {
    border-color: #021829;
    color:#eee
}
.ftable--secondary {
    border-color: rgba(247,71,86,1);
    color:#eee
}
.ftable--success {
    border-color: rgba(73,198,114,1);
    color:#eee
}
.ftable--info {
    border-color: rgba(68,219,217,1);
    color:#eee
}
.ftable--warning {
    border-color: rgba(218,170,78,1);
    color:#eee
}
.ftable--danger {
    border-color: rgba(200,55,55,1);
    color:#eee
}
.ftable--minimalistic{
    border:0
}
.ftable--on-white{
    color:#000
}
.ftable__row {
	margin-top: 3px;
	border-width: 1px;
	border-style: solid;
}
.ftable__row:first-child { 
	margin-top: 0;	
}
.ftable__row,.ftable__cell--inherit{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap
}
.ftable__row--bordered{
    border-style:solid;
    border-width:1px
}
.ftable--primary .ftable__row{
    background-color:rgba(61,105,139,.3);
    border-color:#000000;
}
.ftable--primary .ftable__row:nth-child(even){
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.1));
}
.ftable--secondary .ftable__row{
    background-color:rgba(138,140,149,.3);
    border-color:rgba(138,140,149,1)
}
.ftable--secondary .ftable__row:nth-child(even){
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
}
.ftable--success .ftable__row{
    background-color:rgba(73,198,114,.3);
    border-color:rgba(73,198,114,1)
}
.ftable--success .ftable__row:nth-child(even){
    background-color:rgba(73,198,114,.2);
    border-color:rgba(73,198,114,1)
}
.ftable--info .ftable__row{
    background-color:rgba(68,219,217,.3);
    border-color:rgba(68,219,217,1)
}
.ftable--info .ftable__row:nth-child(even){
    background-color:rgba(68,219,217,.2);
    border-color:rgba(68,219,217,1)
}
.ftable--warning .ftable__row{
    background-color:rgba(218,170,78,.3);
    border-color:rgba(218,170,78,1)
}
.ftable--warning .ftable__row:nth-child(even){
    background-color:rgba(218,170,78,.2);
    border-color:rgba(218,170,78,1)
}
.ftable--danger .ftable__row{
    background-color:rgba(200,55,55,.3);
    border-color:rgba(200,55,55,1)
}
.ftable--danger .ftable__row:nth-child(even){
    background-color:rgba(200,55,55,.2);
    border-color:rgba(200,55,55,1)
}
.ftable__row.ftable__row--primary{
    background-color:rgba(61,105,139,.3);
    border-color:#021829
}
.ftable__row.ftable__row--primary:nth-child(even){
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
}
.ftable__row.ftable__row--secondary{
    background-color:rgba(138,140,149,.3);
    border-color:rgba(138,140,149,1)
}
.ftable__row.ftable__row--secondary:nth-child(even){
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
}
.ftable__row.ftable__row--success{
    background-color:rgba(73,198,114,.3);
    border-color:rgba(73,198,114,1)
}
.ftable__row.ftable__row--success:nth-child(even){
    background-color:rgba(73,198,114,.2);
    border-color:rgba(73,198,114,1)
}
.ftable__row.ftable__row--info{
    background-color:rgba(68,219,217,.3);
    border-color:rgba(68,219,217,1)
}
.ftable__row.ftable__row--info:nth-child(even){
    background-color:rgba(68,219,217,.2);
    border-color:rgba(68,219,217,1)
}
.ftable__row.ftable__row--warning{
    background-color:rgba(218,170,78,.3);
    border-color:rgba(218,170,78,1)
}
.ftable__row.ftable__row--warning:nth-child(even){
    background-color:rgba(218,170,78,.2);
    border-color:rgba(218,170,78,1)
}
.ftable__row.ftable__row--danger{
    background-color:rgba(200,55,55,.3);
    border-color:rgba(200,55,55,1)
}
.ftable__row.ftable__row--danger:nth-child(even){
    background-color:rgba(200,55,55,.2);
    border-color:rgba(200,55,55,1)
}
.ftable__row--clickable{
    cursor:pointer
}
.ftable__row--clickable:hover{
    opacity:.4
}
.ftable__cell{
    flex-grow:1;
    flex-basis:100px;
    margin:1px;
    padding: 10px;
    white-space:normal;
    word-wrap:break-word;
    overflow:visible;
    max-width:100%
}

.ftable--primary .ftable__cell--header, .ftable__row--primary .ftable__cell--header,.ftable__cell--primary.ftable__cell--header{
    background:#021829;
    color:#e6e6e6;
    font-weight:bold
}
.ftable--secondary .ftable__cell--header, .ftable__row--secondary .ftable__cell--header,.ftable__cell--secondary.ftable__cell--header{
    background:rgba(138,140,149,1);
    color:#e6e6e6;
    font-weight:bold
}
.ftable--success .ftable__cell--header, .ftable__row--success .ftable__cell--header,.ftable__cell--success.ftable__cell--header{
    background:#179440;
    color:#e6e6e6;
    font-weight:bold
}
.ftable--info .ftable__cell--header, .ftable__row--info .ftable__cell--header,.ftable__cell--info.ftable__cell--header{
    background:rgba(0,119,117,1);
    color:#e6e6e6;
    font-weight:bold
}
.ftable--warning .ftable__cell--header, .ftable__row--warning .ftable__cell--header,.ftable__cell--warning.ftable__cell--header{
    background:#a8781c;
    color:#e6e6e6;
    font-weight:bold
}
.ftable--danger .ftable__cell--header, .ftable__row--danger .ftable__cell--header,.ftable__cell--danger.ftable__cell--header{
    background:#960505;
    color:#e6e6e6;
    font-weight:bold
}

.ftable__cell--fixedwidth{
    flex-grow:0;
    flex-basis:auto
}
.ftable__cell--overflow{
    overflow:visible
}
.ftable__cell--clickable{
    cursor:pointer
}
.ftable__cell--clickable:hover{
    opacity:.4
}
.ftable__colgroup{
    flex-grow:1;
    margin:0;
    padding:0;
    display:flex
}
.ftable__cell--cspan-2,.ftable__colgroup--cspan-2{
    flex-grow:2;
    flex-basis:202px
}
.ftable__cell--cspan-3,.ftable__colgroup--cspan-3{
    flex-grow:3;
    flex-basis:303px
}
.ftable__cell--cspan-4{
    flex-grow:4;
    flex-basis:404px
}
.ftable__cell--cspan-5{
    flex-grow:5;
    flex-basis:505px
}
.ftable__cell--cspan-6{
    flex-grow:6;
    flex-basis:606px
}
.ftable__cell--cspan-7{
    flex-grow:7;
    flex-basis:707px
}
.ftable__cell--cspan-8{
    flex-grow:8;
    flex-basis:808px
}
.ftable__cell--cspan-9{
    flex-grow:9;
    flex-basis:909px
}
.ftable__cell--base0{
    flex-basis:0
}
.ftable--compact .ftable__cell{
    padding:0 4px
}