@charset "UTF-8";
html {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}
body {
	font-family: 'alto_pronormal', sans-serif;
	color: #333;
	font-size: 12px;
	margin: 0px;
	overflow: hidden;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
	cursor: default;
	-webkit-font-smoothing: antialiased;
}
#mainAll {
	position:absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right:0px;
	overflow:hidden;
    display: flex;
    flex-direction: column;
}
#resize-right {
	position: absolute;
	z-index: 400;
	top: 0px;
	right: 0px;
	bottom: 0px;
	width: 3px;
}
#resize-right:hover {
	cursor:url(../images/cursor-resize-right.png),w-resize;
}
#resize-bottom {
	position: absolute;
	z-index: 400;
	right: 0px;
	bottom: 0px;
	height: 3px;
	left: 0px;
}
#resize-bottom:hover {
	cursor: url(../images/cursor-resize-bottom.png),n-resize;
}
#infoMenu {
	background-color: #333333;
	position: absolute;
	width: 360px;
	top: 24px;
	right: 30px;
	z-index: 100;
	display: none;
	box-shadow: 0px 0px 7px -1px #333;
	-webkit-box-shadow: 0px 0px 10px -1px #666;
}
.infoMenu-app {
	background-color: #333333;
	position: absolute;
	left: 85px;
	width: 169px;
	top: 0px;
	z-index: 100;
	box-shadow: 0px 0px 7px -1px #333;
	-webkit-box-shadow: 0px 0px 10px -1px #666;
}
input {
	-webkit-appearance: none;
}
h1, h2, h3, h4, h5 {
	font-family: 'alto_probold', sans-serif;
	font-weight:normal;
	margin: 0px;
	padding: 0px;
	clear: both;
}
#overview-top {
	height: 64px;
	overflow: hidden;
	background-color: #FFF;
    -webkit-app-region: drag;
    -webkit-user-select: none;
    border-bottom: solid 1px rgb(220,220,220);
    //box-shadow: 0 0 5px rgba(57, 70, 78, 0.2);
    display: flex;
    align-items: center;
    padding: 0px 24px;
}
#overview-top-iconbar {
	top: 0px;
	right: 0px;
	bottom: 0px;
	position: absolute;
	width: 110px;
}
#overview-top-iconfullscreen {
	position: absolute;
	top: 14px;
	overflow: hidden;
	height: 22px;
	width: 20px;
	right: 15px;
}
#overview-top-iconclose, #overview-top-iconmaximize, #overview-top-iconminimize {
    position: absolute;
	top: 16px;
	overflow: hidden;
	height: 20px;
	width: 20x;
    opacity: 0.4;
    transition: all 100ms linear;
}
#overview-top-iconclose {
	right: 16px;
}
#overview-top-iconmaximize {
	right: 38px;
}
#overview-top-iconminimize {
	right: 60px;
}
#overview-top-iconclose img, #overview-top-iconmaximize img, #overview-top-iconminimize img {
    width: 17px;
    height: 17px;
}
#overview-top-iconclose:hover, #overview-top-iconmaximize:hover, #overview-top-iconminimize:hover {
    opacity: 1;
}
#overview-top-iconmenu {
	position: absolute;
	top: 23px;
	overflow: hidden;
	height: 24px;
	width: 24px;
	right: 6px;
}
#overview-logo {

}
.spacer {
    flex: 1;
}
#overview-back {
	position: absolute;
	top: 11px;
	left: -18px;
	-webkit-transition: left 100ms linear;
}
.overview-content {
    flex: 1;
    position: relative;
    overflow: hidden;
}
#content-menu {
	background-color: #FFFFFF;
	height: 25px;
	overflow: hidden;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #DCDCDC;
}
#menu {
    display: flex;
    height: 100%;
    align-items: center;
}
#menu-user {
	display: flex;
    width: 32px;
    height: 32px;
    border: solid 2px rgb(220,220,220);
    border-radius: 100%;
    overflow: hidden;
}
#menu-user:hover {
}
#menu-user-img {
    margin-right: 12px;
}
#menu-user-image {
    width: 32px;
    height: 32px;
}
#menu-user-name {
	position: absolute;
	left: 84px;
	top: 24px;
	margin: auto;
	color: #101200;
	font-size: 14px;
	font-family: 'alto_probold';
	text-transform: uppercase;
}
#menu-user-position {
	position: absolute;
	left: 84px;
	top: 48px;
	color: #666;
	font-size: 12px;
	font-family: 'alto_pronormal';
}
#menu ul {
	color: #101200;
	list-style-type: none;
	font-size: 13px;
	text-transform: uppercase;
	margin-right: 24px;
	padding: 0px;
	font-family: 'alto_promedium';
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
}
#menu ul li {
	position: relative;
	cursor: default;
	font-family: 'alto_probold';
    display: flex;
    align-items: center;
    margin-right: 24px;
    height: 100%;
    color: rgb(135,135,135);
}
#menu #menu-list li .icon {
    margin-right: 6px;
    display: none;
}
#menu #menu-list li .icon img {
	width: 18px;
	height: 18px;
}
#menu ul li:hover {
}
.menu-active {
	background-color: #607D99;
	height: 0px;
	position: absolute;
	left: 0px;
    right: 0px;
	bottom: 0px;
	display: none;
}
.menu-app-active {
	background-color: #7A9AB3;
	width: 3px;
	position: absolute;
	z-index: 3;
	left: 0px;
	top: 0px;
	bottom: 0px;
	display: none;
}
#sync-button {
    border: solid 1px rgb(96,125,153);
    color: rgb(96,125,153);
    text-transform: uppercase;
    font-size: 11px;
    font-family: 'alto_probold';
    padding: 4px 6px;
    border-radius: 4px;
    margin-right: 24px;
    transition: all 100ms ease;
}
#sync-button:hover {
    color: rgb(246,246,246);
    background-color: rgb(96,125,153);
}
.content-menu-link {
	color: #101200;
	text-align: center;
	text-transform: uppercase;
	height: 20px;
	padding-right: 10px;
	padding-left: 10px;
	margin-left: 5px;
	position: relative;
	float: left;
	cursor: default;
}
.content-menu-link-active {
	background-color: #7A9AB3;
	position: absolute;
	height: 3px;
	left: -1px;
	right: -1px;
	bottom: -5px;
}
#main-page-layout {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
.messageBox {
	border: 1px solid #DCDCDC;
	position: absolute;
	top: 50%;
	height: 200px;
	width: 360px;
	left: 50%;
	margin-left: -180px;
	margin-top: -115px;
	-webkit-box-shadow: 0px 0px 40px 0px #000;
	border-radius: 2px;
	background-color: #FFFFFF;
	z-index: 300;
}
#login-ges, #sync-ges {
	background-color: #FFF;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 500;
	height: 100%;
}
#sync-progressbar {
	position: absolute;
	height: 10px;
	margin-top: -5px;
	top: 50%;
	left: 0px;
	width: 0%;
	background-color: rgb(96,125,153);
	transition:all 300ms linear;
	-webkit-transition:all 300ms linear;
}
#login-content, #login-email-content {
	position: absolute;	
	width: 100%;
	bottom: 40px;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	-webkit-flex-direction: column;
	-webkit-align-content: center;
	-webkit-align-items: center;
	transition: all 100ms linear;
	-webkit-transition: all 100ms linear;
}
#login-email-content {
	bottom: -240px;
}
#login-logo {
	position: absolute;
	top: 40px;
	right: 40px;
	height: 60px;
	width: 160px;
	text-align: right;
}
#login-cloud {
	position: absolute;
	top: 50%;
	margin-top: -180px;
	left: 40px;
	right: 40px;
	text-align: center;
	transition: all 300ms linear;
	-webkit-transition: all 300ms linear;
}
.login-table {
	display: table;
	width: 100%;
	background-color: #FFF;
	max-width: 600px;
}
.login-table-row {
	display:table-row;
}
.login-table-col{
	display: table-cell;
	position: relative;
	height: 32px;
}
.login-table-col-small{
	display: table-cell;
	width: 90px;
	text-align: left;
	font-family: 'alto_pronormal';
	font-size: 14px;
	height: 32px;
	text-transform: uppercase;
}
.login-table-form, .login-table-form-falsch {
	width: 100%;
	border: solid 1px #DCDCDC;
	background-color: #F2F2F2;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	font-family: 'alto_pronormal';
	font-size: 16px;
	padding: 10px;
	outline: none;
}
.login-table-form-falsch { 
	border: solid 1px rgba(160,43,55,0.3);
	background-color: rgba(160,43,55,0.3);
}
#login-button-send, #login-button-reset {
	margin-top: 20px;
	border: none;
	background-color: rgb(96,125,153);
	color: #FFF;
	text-transform: uppercase;
	padding: 12px 58px;
	border-radius: 4px;
	font-size: 14px;
	font-family: 'alto_promedium';
	outline: none;
	cursor: pointer;
	display: inline-block;
	border-bottom: solid 2px rgb(64,93,124);
}
#login-button-send:hover {
	background-color: rgb(64,93,124);
}
#login-button-reset {
	background-color: #FFF;
	color: rgb(180,180,180);
	margin-left: 10px;
	padding: 18px;
	border-bottom: solid 2px #FFF;
}
#login-button-reset:hover {
	color: rgb(135,135,135);
}
#login-box p {
	line-height: 16px;
	text-align: center;
	margin-top: 50px;
}
#sync-box p {
	line-height: 16px;
	text-align: center;
	margin-top: 50px;
}
#sync-box {
	-webkit-box-shadow: 0px 0px 40px 0px #999;
	display: inherit;
}
.uebersichts-box {
	margin-top: 26px;
}
.spacer-uebersicht {
	height: 26px;
}
#over-top-img {
	position: absolute;
	left: 10px;
	top: 5px;
}
#overview-top-bez {
	position: absolute;
	left: 38px;
	top: 7px;
}
#overview-top-right-img {
	position: absolute;
	top: 16px;
	right: 5px;
	display:none;
}
.infoMenu-box-table {
	font-family: 'alto_pronormal';
	color: #FBFBFB;
	display: table;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
}
.infoMenu-box-table-caption {
	display: table-caption;
}
.infoMenu-box-table-row {
	display: table-row;
}
.infoMenu-box-table-row-trenner .infoMenu-box-table-col {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #3B3B3B;
	padding: 0px;
}
.infoMenu-box-table-row-spacer .infoMenu-box-table-col {
	padding: 0px;
	height: 10px;
}
.infoMenu-box-table-row-trenner {
	display: table-row;
}
.infoMenu-box-table-row-spacer {
	display: table-row;
}
.infoMenu-box-table-row:hover {
	background-color: rgb(64,93,124);
}
.infoMenu-box-table-row:active {
	background-color: #7A9AB3;
}
.infoMenu-box-table-col{
	display: table-cell;
	position: relative;
	padding-top: 6px;
	padding-right: 15px;
	padding-bottom: 6px;
	padding-left: 0px;
	text-align: right;
	font-weight: normal;
	font-style: italic;
}
.infoMenu-box-table-col-bez{
	display: table-cell;
	width: 60%;
	text-align: left;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 6px;
	padding-left: 15px;
	font-weight: normal;
}
.infoMenu-box-table-col-infobez{
	display: table-cell;
	vertical-align:middle;
	text-align: left;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 6px;
	padding-left: 15px;
	font-weight: normal;
}
.infoMenu-box-table-col-img{
	display: table-cell;
	width: 16px;
	text-align: left;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 6px;
	padding-left: 15px;
	font-weight: normal;
}
.infoMenu-box-table-col-img img {
	width: 16px;
	height: 16px;
}
#infoMenu-user-email {
	color: #8CAEC4;
}

/* HEADER */
.content-header {
	display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #FFF;
    padding: 0px 24px;
    height: 54px;
    overflow: hidden;
    z-index: 100;
    padding: 0px 0px 0px 24px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: solid 1px #DCDCDC;
    box-shadow: 1px 0px 5px -1px #CCC;
    -webkit-box-shadow: 1px 0px 5px -1px #CCC;
}
.content-header-spacer {
	flex: 1;
}
.content-header-button {
	font-size: 13px;
    border: solid 1px rgb(96,125,153);
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    background-color: rgb(96,125,153);
    fill: rgb(255,255,255);
    color: rgb(255,255,255);
    margin-right: 10px;
    font-family: 'alto_probold';
    transition: all 100ms ease;
}
.content-header-button:hover {
	color: rgb(96,125,153);
    fill: rgb(96,125,153);
    background-color: rgb(255,255,255);
}
.content-header-button-grey {
	display: flex;
    align-items: center;
	font-size: 13px;
    padding: 4px 8px;
    text-transform: uppercase;
    fill: rgb(135,135,135);
    color: rgb(135,135,135);
    margin-right: 10px;
    font-family: 'alto_probold';
    transition: all 100ms ease;
}
.content-header-button-grey svg {
	height: 14px;
    width: 14px;
    margin-right: 7px;
}
.content-header-button-grey:hover {
	color: rgb(30,30,30);
    fill: rgb(30,30,30);
}

/* POPUP */
.popups-wrap {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
    display: -webkit-box;
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flexbox;
    display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
    align-items: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
    justify-content: center;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
    flex-direction: column;
    opacity: 0;
}
.popups-box {
    position: relative;
    background-color: rgb(255,255,255);
    box-shadow: 0px 0px 10px rgba(30,30,30,0.2);
    overflow: auto;
    z-index: 1001;
    margin: 8px;
	width: 100%;
}
.popups-close {
    background-color: rgba(30,30,30,0.7);
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}
.popups-box-close {
    position: absolute;
    right: 16px;
    top: 16px;
	width: 20px;
	height: 20px;
}
.popups-box-close svg {
	width: 100%;
	height: 100%;
}

/* Ladebalken */
#sync-animation {
  	transform: scale(0.4);
  	height: 100%;
  	text-align: center;
  	font-size: 26px;
  	margin: 0px 24px 0px -3px;
	transition: all 100ms ease;
	display: none;
}

#sync-animation > div {
  background-color: rgb(96,125,153);
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

#sync-animation .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

#sync-animation .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

#sync-animation .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

#sync-animation .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(0.8);
    -webkit-transform: scaleY(0.8);
  }
}

::-webkit-scrollbar {
    height: 8px;
    overflow: visible;
    width: 12px;
	border-left-style:solid;
	border-left-color:#DCDCDC;
	border-left-width:1px;
	margin-left:-10px;
}
::-webkit-scrollbar-button {
    display: none;
    height:0;
    width: 0;
}
::-webkit-scrollbar-track {
    -moz-background-clip: border;
    -webkit-background-clip: border;
    background-clip: border-box;
    border-width: 0 0 0 4px;
    border: solid transparent;
}
::-webkit-scrollbar-track:hover {
    background-color:rgba(0,0,0,.05);
    -moz-box-shadow: inset 0px 0 0 rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0px 0 0 rgba(0,0,0,.1);
    box-shadow: inset 0px 0 0 rgba(0,0,0,.1);
}
::-webkit-scrollbar-track:active {
    background-color:rgba(0,0,0,.05);
    -moz-box-shadow: inset 0px 0 0 rgba(0,0,0,.14), inset 0px 0 0 rgba(0,0,0,.07);
    -webkit-box-shadow: inset 0px 0 0 rgba(0,0,0,.14), inset 0px 0 0 rgba(0,0,0,.07);
    box-shadow: inset 0px 0 0 rgba(0,0,0,.14), inset 0px 0 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar-track:horizontal {
    border-width: 4px 0 0;
}
::-webkit-scrollbar-track:horizontal:hover {
    -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
}
::-webkit-scrollbar-track:horizontal:active {
    -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07);
    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07);
    box-shadow: inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar-thumb {
    -moz-background-clip: border;
    -webkit-background-clip: border;
    background-clip: border-box;
    background-color: #B4B4B4;
    /*border-width: 1px 1px 1px 6px;
    border: solid transparent;*/
    -moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
    min-height: 28px;
    padding: 100px 0 0;
}
::-webkit-scrollbar-thumb:hover {
    background-color:rgba(0,0,0,.4);
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
    box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
}
::-webkit-scrollbar-thumb:active {
    background-color:rgba(0,0,0,0.5);
    -moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
    -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
}
::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 1px 1px;
    -moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.07);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.07);
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.07);
    padding: 0 0 0 100px;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
body::-webkit-scrollbar-track-piece {
    -moz-background-clip: border;
    -webkit-background-clip: border;
    background-clip: border-box;
    background-color: #f5f5f5;
    /*border-width: 0 0 0 3px;
    border: solid #fff;*/
    -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.14), inset -1px 0 0 rgba(0,0,0,.07);
    -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.14), inset -1px 0 0 rgba(0,0,0,.07);
    box-shadow: inset 1px 0 0 rgba(0,0,0,.14), inset -1px 0 0 rgba(0,0,0,.07);
}
body::-webkit-scrollbar-track-piece:horizontal {
    border-width:3px 0 0;
    -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07);
    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07);
    box-shadow: inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07);
}
body::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px;
}
body::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px;
}
body::-webkit-scrollbar-corner {
    -moz-background-clip: border;
    -webkit-background-clip: border;
    background-clip: border-box;
    background-color: #f5f5f5;
    border-width: 3px 0 0 3px;
    border: solid #fff;
    -moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,.14);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.14);
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.14);
}
@media screen and (max-width: 480px) {
#login-ges {
	overflow-y: auto;
}
}