@import url("normalize.css");

* {
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-family: 'Open Sans', sans-serif;
    -webkit-appearance: none;
    -webkit-transition: all 0.3s ease 0s;
    -khtml-transition: all 0.03s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
*, a:focus {
    outline: none;
}
html {
    min-height: 100%;
}
body {
    color: #404040;
    font-size: 14px;
    height: 100%;
    min-height: 100%;
}
a, a:hover, a:visited {
    color: #427FED;
    cursor: pointer;
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    color: #427FED;
    font-weight: 400;
    margin: 0 0 5px;
    text-shadow: 0 1px 0 #FFFFFF;
}
h2, h3 {
    line-height: 30px;
}
h4 {
    margin: 10px 0 0 0;
}
p {
    margin: 5px 0 10px 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
td, th {
    padding: 4px 2px;
}
th {
    text-align: left;
}
td em, th em {
    display: block;
    height: 10px;
    margin: 0 auto;
    width: 10px;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.left {
    float: left!important;
}
.right {
    float: right!important;
}
.hide {
    display: none;
}
.show {
    display: block;
}
.static {
    position: static!important;
}
.loadingAnimation {
    background: url('img/loader-circle.gif') no-repeat center center rgba(255,255,255,0.5);
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000000;
}
#content .loadingAnimation {

}

/* forms */
form {
    position: relative;
}
label:first-child {
    border-right: 0 none;
}
label {
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 4px 0 0 4px;
    -khtml-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    -o-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
legend {
    font-size: 12px;
    padding: 3px 0;
}
input, select, textarea, label {
    display: table-cell;
}
input, select, textarea {
    border: 1px solid #D9D9D9;;
    height: 34px;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    vertical-align: middle;
    width: 100%;
}
textarea {
    height: 100px;
}
input + input, select + input, select + select, input + select {
    margin-left: 1%;
}
* + input.col56 {
    width: 82.33%;
}
* + input.col13 {
    width: 32.33%;
}
* + input.col24 {
    width: 49%;
}
* + select.col13 {
    width: 32.33%;
}
* + select.col14 {
    width: 24%;
}
* + input.col23, * + select.col23 {
    width: 65.66%;
}
* + input.col34half {
    width: 36.5%;
}
* + select.col24 {
    width: 49%;
}
* + input.col25, * + select.col25 {
    width: 39%;
}
input:hover, select:hover, textarea:hover {
    border-color: #b9b9b9;
}
input:focus, select:focus, textarea:focus, input.error, select.error, textarea.error {
    border-color: #4D90FE;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
    -khtml-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
    outline: none;
}
button, a.button, .fc-state-default, .close {
    background: #4d90fe;
    background: -moz-linear-gradient(top,  #4d90fe 0%, #4787ed 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
    background: -webkit-linear-gradient(top,  #4d90fe 0%,#4787ed 100%);
    background: -o-linear-gradient(top,  #4d90fe 0%,#4787ed 100%);
    background: -ms-linear-gradient(top,  #4d90fe 0%,#4787ed 100%);
    background: linear-gradient(to bottom,  #4d90fe 0%,#4787ed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d90fe', endColorstr='#4787ed',GradientType=0 );
    border: 1px solid #3079ED;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 13px;
    padding: 6px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
}
button.red, a.button.red {
    background: #ff1313;
    background: -moz-linear-gradient(top,  #ff1313 0%, #df1111 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff1313), color-stop(100%,#df1111));
    background: -webkit-linear-gradient(top,  #ff1313 0%,#df1111 100%);
    background: -o-linear-gradient(top,  #ff1313 0%,#df1111 100%);
    background: -ms-linear-gradient(top,  #ff1313 0%,#df1111 100%);
    background: linear-gradient(to bottom,  #ff1313 0%,#df1111 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1313', endColorstr='#df1111',GradientType=0 );
    border: 1px solid #df1111;
}
#sidepanel button, #sidepanel a.button, .close {
    padding: 6px 12px;
}
.fc-text-arrow {
    margin: 0;
}
.fc-state-default {
    height: 32px;
    line-height: 18px;
    margin-bottom: 0 !important;
}
button:hover, button:focus, a.button:hover, a.button:focus, button:active, a.button:active, .fc-state-default:hover, .fc-state-default:focus, .close:hover, .close:focus {
    background: #4d90fe;
    background: -moz-linear-gradient(top,  #4d90fe 0%, #357ae8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
    background: -webkit-linear-gradient(top,  #4d90fe 0%,#357ae8 100%);
    background: -o-linear-gradient(top,  #4d90fe 0%,#357ae8 100%);
    background: -ms-linear-gradient(top,  #4d90fe 0%,#357ae8 100%);
    background: linear-gradient(to bottom,  #4d90fe 0%,#357ae8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d90fe', endColorstr='#357ae8',GradientType=0 );
    border-color: #285E8E;
    color: #FFFFFF;
    outline: none;
}
.input-group {
    border-collapse: separate;
    display: table;
    position: relative;
    width: 100%;
}
.input-group + .input-group {
    margin-top: 10px;
}

form .msg {
    bottom: -30px;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
form#login .msg {
    bottom: -60px;
    height: 50px;
}

form#login {
    background: #F7F7F7;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -khtml-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    margin: 10% auto;
    padding: 40px;
}
form#login, form#editpass {
    width: 350px;
}
form button {
    width: 100%;
}
form#signup, form#signup {
    width: 500px;
}
form#editpass, form#signup {
    margin: 10% auto;
}

/* grid */
.row {
    clear: both;
    float: left;
    width: 100%;
}
.col {
    float: left;
    position: relative;
}
.col1 {
    width: 100%;
}
.col13 {
    width: 33.33%;
}
div.col13 + div.col13 {
    margin-left: 1%;
    width: 32.33%;
}
.col23 {
    width: 66.66%;
}
.col14 {
    width: 25%;
}
.col24 {
    width: 50%;
}
div.col24 + div.col24 {
    margin-left: 1%;
    width: 49%;
}
.col34 {
    width: 75%;
}
.col34half {
    width: 37.5%;
}
.col15 {
    width: 20%;
}
.col25 {
    width: 40%;
}
.col35 {
    width: 60%;
}
.col45 {
    width: 80%;
}
.col16 {
    width: 16.66%;
}
.col56 {
    width: 83.33%;
}

/* calendar */
#sidepanel .fc-state-highlight {
    background: #f0f0f0;
}
#sidepanel .calendar > .fc-content {
    margin-top: 11px;
}
#sidepanel .calendar {
    margin-bottom: 15px;
}
#content .fc-state-highlight {
    background: none;
}
.calendar.loading .fc-content {
    opacity: .5;
}
#sidepanel .fc-event-container {
    display: none!important;
}
#sidepanel .calendar .fc-day {
    height: 45px!important;
}
.hideEvents {
    background: #f9f9f9;
    font-weight: bold;
}
.hideEvents div.fc-day-content {
    height: 0!important;
    min-height: 0px!important;
}
.fc-text-arrow {
    position: relative;
    top: -2px;
}

#page {
    float: left;
    height: 100%;
    left: 0;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    width: 100%;
}

#menubar {
    background: #364047;
    left: 0;
    min-height: 100%;
    position: fixed;
    top: 0;
    width: 50px;
    z-index: 300;
}
#menu {
    margin: 0;
    padding: 0;
}
#menu li {
    border-bottom: 1px solid #323234;
    display: inline-block;
    float: left;
    width: 100%;
}
#menu li:last-child {
    border-bottom: none;
    bottom: 0;
    left: 0;
    position: absolute;
}
#menu li a {
    display: block;
    font-size: 10px;
    height: 58px;
    text-align: center;
    text-indent: -9999em;
}
#menu li a.tasks {
    background: url('img/icon-tasks.png') no-repeat center 5px transparent;
}
#menu li a.tarife {
    background: url('img/icon-tarife.png') no-repeat center 5px transparent;
}
#menu li a.users {
    background: url('img/icon-users.png') no-repeat center 5px transparent;
}
#menu li a.customers {
    background: url('img/icon-customers.png') no-repeat center 5px transparent;
}
#menu li a.settings {
    background: url('img/icon-settings.png') no-repeat center 5px transparent;
}
#menu li a.clean {
    background: url('img/icon-clean.png') no-repeat center 5px transparent;
}
#menu li a.logout {
    background: url('img/icon-logout.png') no-repeat center 5px transparent;
}
#menu li a:hover, #menu li a.active {
    background-color: #357AE8;
}

.overlay {
    background: #fff;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -khtml-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    left: 0;
    padding: 10px;
    position: absolute;
    -webkit-transition: top .75s ease 0s;
    -khtml-transition: top .75s ease 0s;
    -moz-transition: top .75s ease 0s;
    -o-transition: top .75s ease 0s;
    transition: top .75s ease 0s;
    top: 0;
    width: 100%;
    z-index: 100;
}
#inner_content .overlay {
    left: 0;
    margin: 0 auto;
    right: 0;
    top: 50px;
    width: 500px;
    z-index: 1000;
}
.overlay.hidden {
    top: -400px!important;
}
#inner_content .overlay.hidden {
    top: -550px!important;
}
.overlay .close {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
}

#content {
    background: #fff;
    height: 100%;
    left: 0;
    padding: 0 0 0 350px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
#inner_content {
    height: 100%;
    position: relative;
}
#inner_content.overflowy {
    overflow-y: scroll;
}
#inner_content #controlls {
    list-style: none;
    margin: 0;
    overflow-y: hidden;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 34%;
    z-index: 100;
}
#inner_content #controlls li {
    float: left;
}
#inner_content #controlls li + li {
    margin-left: 5px;
}
#inner_content > .calendar {
    height: 67%;
}
#inner_content .calendar .fc-header {
    left: 10px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 34%;
}
#inner_content > .calendar > .fc-content {
    height: 100%;
}
#inner_content .calendar > .fc-content .fc-view, #inner_content .calendar > .fc-content .fc-view > div {
    height: 100%!important;
}
#inner_content .calendar > .fc-content .fc-view > div > div {
    height: 95%!important;
}
#inner_content .fc-agenda-days th {
    text-indent: -40px;
}

#map + .row {
    padding: 10px 20px;
}
#map + .row table, #map + .row p {
    min-width: 610px;
    width: 75%;
}
#map + .row table td {
    width: 50%;
}

#sidepanel {
    background: #fff;
    border-right: 1px solid #D3D3D3;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -khtml-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    left: 0;
    margin-left: 50px;
    height: 100%;
    overflow-y: scroll;
    padding: 10px 10px 50px 10px;
    position: fixed;
    top: 0;
    width: 300px;
    z-index: 200;
}
#sidepanel form.search {
    margin-bottom: 10px;
}
#sidepanel form.search a + input {
    width: 85%;
}
#sidepanel ul {
    font-size: 12px;
    margin: 0;
    padding: 0 0 50px 0;
}
#sidepanel ul li {
    border-bottom: 1px dotted #B9B9B9;
    list-style: none;
}
#sidepanel ul li > a {
    color: #555;
    display: block;
    padding: 4px 5px;
}
#sidepanel ul li:last-child {
    border-bottom: none;
}
#sidepanel > ul > li:hover > a, #sidepanel > ul > li.active > a{
    background: #357AE8;
    color: #fff!important;
}
#sidepanel ul li.cinaktiv a {
    color: #9b9b9b!important;
}
#sidepanel > ul > li.cinaktiv:hover > a, #sidepanel > ul > li.active.cinaktiv > a {
    background: #f6f6f6;
}
#sidepanel ul li.dropdown {
    position: relative;
}
#sidepanel ul li.dropdown .row {
    height: 0;
    padding: 0 10px;
    overflow: hidden;
}
#sidepanel ul li.dropdown.active:hover div.row {
    background: #f6f6f6;
}
#sidepanel ul li.dropdown.active ul.row {
    height: auto;
}
#sidepanel ul li.dropdown.active div.row {
    height: auto;
}
#sidepanel ul li.dropdown div.row p {
    margin: 5px 0;
}
#sidepanel ul li.dropdown div.row p:last-child {
    margin: 5px 0 10px 0;
}
#sidepanel ul li.dropdown div.row > .actions {
    cursor: pointer;
    display: none;
    position: absolute;
    right: 0;
    top: 0;
}
#sidepanel ul li.dropdown.active div.row > .actions {
    display: inline-block;
}
#sidepanel ul li.dropdown div.row > .actions em {
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 24px;
    text-indent: -9999em;
    width: 25px;
}
#sidepanel ul li.dropdown div.row > .actions em.icon-view {
    background: url('img/icon-view.png') no-repeat center center transparent;
}
#sidepanel ul li.dropdown.cinaktiv div.row > .actions em.icon-view {
    background: url('img/icon-view-inactive.png') no-repeat center center transparent;
}
#sidepanel ul li.dropdown div.row > .actions em.icon-resetpass {
    background: url('img/icon-resetpass.png') no-repeat center center transparent;
}
#sidepanel ul li.dropdown.cinaktiv div.row > .actions em.icon-resetpass {
    background: url('img/icon-resetpass-inactive.png') no-repeat center center transparent;
}
#sidepanel ul li.dropdown div.row > .actions em.icon-edit {
    background: url('img/icon-edit.png') no-repeat center center transparent;
}
#sidepanel ul li.dropdown.cinaktiv div.row > .actions em.icon-edit {
    background: url('img/icon-edit-inactive.png') no-repeat center center transparent;
}
#sidepanel ul li.dropdown div.row > .actions em.icon-delete {
    background: url('img/icon-delete.png') no-repeat center center transparent;
}
#sidepanel ul li.dropdown.cinaktiv div.row > .actions em.icon-delete {
    background: url('img/icon-delete-inactive.png') no-repeat center center transparent;
}
#sidepanel ul.mask {
    display: none;
}
#userlist ul.userlist {
    list-style: none;
    margin: 0;
    padding: 0;
}
#userlist ul ul {
    font-size: 12px;
    padding-bottom: 10px;
}
#userlist > ul > li {
    border-bottom: 1px solid #F6F6F6;
    line-height: 2em;
}
#userlist li > div {
    padding: 0 20px;
}
#userlist li > div span {
    float: left;
}
#userlist li > div em {
    float: right;
    font-size: 11px;
    font-style: normal;
    padding: 0 4px;
    text-align: center;
    width: 45px;
}
#userlist ul ul li a {
    display: block;
    padding: 0 30px;
}
#userlist ul ul li a:hover {
    background: #f6f6f6;
}
em.status_online {

}
em.status_offline {

}
em.status_active {

}
em.type_user {

}
em.type_admin {

}

/* tasks */
#map {
    height: 400px;
}
#view_date_user {
    padding: 20px 0;
}
span.offen {
    color: red;
}
span.wirdbearbeitet {
    color: yellow;
}
span.beendet {
    color: green;
}
.tasklist {
    margin: 0 20px;
}
.tasklist h3 {

}
.tasklist table {
    margin-bottom: 15px;
}
.tasklist table th {
    border-bottom: 1px solid #D9D9D9;
}
.tasklist table tr:last-child td {
    border-bottom: 1px solid #D9D9D9;
}
.tasklist table tr:nth-child(odd) td {
    background: #f8f8f8;
}
.copyright {
    background: #fff;
    bottom: 0;
    font-size: 10px;
    left: 50px;
    margin: 0;
    padding: 10px;
    position: absolute;
    width: 282px;
    z-index: 500;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (min-width : 768px) and (max-width : 1024px) {
    .fc-header-left {
        width: 150px;
    }
    .fc-header-center {
        width: 270px;
    }
    .fc-header-right {
        width: 237px;
    }
}