/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 30, 2014 */
@font-face {
    font-family: 'Open Sans italic';
    src:         url('fonts/opensans-italic.eot');
    src:         url('fonts/opensans-italic.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-italic.woff') format('woff'), url('fonts/opensans-italic.ttf') format('truetype'), url('fonts/opensans-italic.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style:  normal;
}

@font-face {
    font-family: 'Open Sans bold';
    src:         url('fonts/opensans-bold.eot');
    src:         url('fonts/opensans-bold.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-bold.woff') format('woff'), url('fonts/opensans-bold.ttf') format('truetype'), url('fonts/opensans-bold.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style:  normal;
}

@font-face {
    font-family: 'Open Sans';
    src:         url('fonts/opensans-regular.eot');
    src:         url('fonts/opensans-regular.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-regular.woff') format('woff'), url('fonts/opensans-regular.ttf') format('truetype'), url('fonts/opensans-regular.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style:  normal;
}

html {
    background: #f5f5f5;
    color:      #343439;
    font:       14px 'Open Sans', sans-serif;
    overflow-y: scroll;
}

a {
    color:           #343439;
    text-decoration: none;
}

label {
    cursor: pointer;
}

strong {
    font-family: 'Open Sans bold', sans-serif;
    font-weight: normal;
}

.clear {
    clear:    both;
    height:   0;
    overflow: hidden;
}

.red {
    color: #8b0000 !important;
}

#container {
    margin: 20px auto 0;
    width:  calc(100% - 40px);
}

#login {
    list-style: none;
    margin:     0;
    padding:    0;
}

#login li {
    margin-bottom: 5px;
}

.content {
    width: 100%;
}

/*----------------------------
    HEADER
-----------------------------*/

.logo {
    float:  left;
    margin: 22px 50px 0 0;
}

/*----------------------------
    NAVIGATION
-----------------------------*/

nav {
    float:          left;
    text-transform: uppercase;
}

nav.left {
    margin-right: 20px;
}

nav ul {
    height:     40px;
    list-style: none;
    margin:     10px 0 0;
    padding:    0;
}

nav li {
    float:      left;
    text-align: center;
    transition: width 0.3s ease-out;
}

nav a {
    background-color: #fff;
    border-bottom:    2px solid #bfbfbf;
    color:            #1f5b66;
    display:          block;
    font-family:      'Open Sans bold', sans-serif;
    line-height:      40px;
    transition:       border 0.2s ease-out;
}

nav a:hover,
nav a.active {
    border-bottom: 2px solid #0f2d33;
}

nav .active {
    background-color: #1f5b66;
    color:            #fff;
}

#powered {
    position:   absolute;
    text-align: center;
    transition: right 0.3s ease-out;
    width:      173px;
}

#powered small {
    display:       block;
    margin-bottom: 10px;
}

.nav_filter {
    margin-left: 20px;
}

/*----------------------------
    LOGIN
-----------------------------*/

.login {
    float:      right;
    text-align: right;
}

/*----------------------------
    FILTER
-----------------------------*/
.filter {
    margin-top: 25px;
    padding:    10px;
}

.filter {
    background: #fff;
}

.filter h4 {
    padding:     0;
    margin:      0;
    float:       left;
    line-height: 30px;
}

.filter input,
.filter select {
    width: 100px;
    float: left;
}

.filter select {
    height: 27px;
}

.fl-nav {
    margin:       0;
    padding-left: 50px;
    list-style:   none;
}

.marker_filter .fl-nav li {
    margin: 0;
}

.marker_filter .fl-nav {
    padding: 0;
}

.fl-nav li {
    display:    inline-block;
    transition: margin 0.3s ease-out;
    padding:    5px;
    width:      175px;
    background: #eee;
}

.fl-nav li.new {
    margin: 0;
}

.fl-nav li label,
.add-action-nav li label {
    display:    block;
    float:      left;
    width:      60px;
    margin-top: 5px;
}

#clients {
    width: 150px;
}

.marker_filter {
    bottom:   25px;
    position: relative;
    width:    98% !important;
}

.marker_filter_info {
    float: left;
}

.table_filter_info {
    line-height: 40px;
}

.selectActive {
    outline:    1px solid rgba(31, 91, 102, 0.5) !important;
    background: rgba(31, 91, 102, 0.3) !important;
}

.marker_filter_options {
    float:       right;
    margin-left: 50px;
    width:       150px;
}

.marker_filter_icon {
    width:  20px;
    height: 20px;
}

.marker_filter img {
    float:          left;
    margin:         15px 10px 0 0;
    padding-bottom: 15px;
}

.marker_filter_options h3 {
    margin-bottom: 5px;
}

/*----------------------------
    ADD_ACTION
-----------------------------*/
.add-action {
    margin-top: 10px;
    padding:    10px;
}

.add-action {
    background: #fff;
}

.add-action h4 {
    padding: 0;
    margin:  5px 0;
    float:   left;
}

.add-action-nav {
    margin:       0;
    list-style:   none;
    padding-left: 160px;
}

.add-action-nav li {
    display:       inline-block;
    margin-right:  10px;
    transition:    margin 0.3s ease-out 0s;
    background:    #eee;
    padding:       5px;
    margin-bottom: 10px;
}

.add-action-nav input[type="text"], .add-action-nav input[type="password"], .add-action-nav select, textarea {
    width: 100px;
}

.add-action-nav li:last-child {
    float: right !important;
}

/*----------------------------
    TABLES
-----------------------------*/

.overview {
    text-align: left;
    width:      100%;
}

#table .overview {
    margin-bottom: 25px;
}

.overview tbody tr {
    background-color: #fff;
    height:           35px;
    transition:       background-color 0.2s ease-out;
}

.overview tbody tr:nth-child(even) {
    background-color: #eee;
}

.overview th {
    background-color: #1f5b66;
    border-bottom:    2px solid #0f2d33;
    color:            #fff;
    font-family:      'Open Sans bold', sans-serif;
    font-weight:      normal;
}

.overview tbody tr:hover, .overview tbody tr.active {
    background-color: #ceedf2 !important;
}

*[data-href] {
    cursor: pointer;
}

.overview th,
.overview td {
    padding-left: 15px;
}

.overview th {
    height: 40px;

}

.overview tr.current {
    outline:          1px solid rgb(31, 91, 102) !important;
    background-color: rgba(31, 91, 102, 0.6) !important;
}

.overview a {
    display:     block;
    line-height: 35px;
}

.overview .subject {
    width: 15%;
}

.overview .job {
    width: 6%;
}

.overview .titel {
    width: 14%;
}

.overview .staff {
    width: 7%;
}

.overview .street {
    width: 14%;
}

.overview .street_nr {
    width: 5%;
}

.overview .zip {
    width: 5%;
}

.overview .city {
    width: 10%;
}

.overview .sub_city {
    width: 10%;
}

.overview .time {
    width: 4%;
}

.overview .details {
    width:     11%;
    min-width: 140px;
}

.quantity {
    min-width: 60px;
}

.pins {
    margin-left: 15px;
    width:       100%;
}

.pins thead td {
    padding-bottom: 9px;
}

.pins tbody td {
    height: 35px;
}

.pins a:hover {
    color: #1f5b66;
}

input[name="fil_begin"],
input[name="fil_end"] {
    text-align: center;
}

input[name="fil_zip"] {
    width: 100px;
}

.icons img {
    float: left;
}

.error {
    margin-top: 30px;
}

input[disabled="disabled"] {
    background-color: #fafafa;
}

.archive,
#table .archive,
#subjects .archive {
    background-color: #e6c3c3;
}

/*----------------------------
    TABLESORTER
-----------------------------*/

.sortable,
table.tablesorter thead tr .header {
    background: #1f5b66 url("../img/tablesorter/bg.png") right center no-repeat;
    cursor:     pointer;
}

.sort_desc,
table.tablesorter thead tr .headerSortUp {
    background-image: url("../img/tablesorter/asc.png");
}

.sort_asc,
table.tablesorter thead tr .headerSortDown {
    background-image: url("../img/tablesorter/desc.png");
}

/*----------------------------
    PAGINATION
-----------------------------*/

.pagination2 {
    border:           1px solid #bbb;
    background-color: #eee;
    height:           31px;
    width:            calc(100% - 2px);
}

.pagesize {
    display: none;
}

.pagedisplay {
    border:     none !important;
    display:    inline-block;
    padding:    0 !important;
    text-align: center;
    width:      150px;
}

.pagination-control {
    height:  50px;
    padding: 10px;
    bottom:  0;
}

.pager {
    margin: 0 auto;
    width:  230px;
}

.pager img {
    margin-top: 7px;
}

/*----------------------------
    EDIT BOX
-----------------------------*/

.edit {
    background: #eee;
    float:      left;
    min-height: 600px;
    margin:     25px 0 0 5px;
    width:      440px;
}

#customers .edit,
#teams .edit,
#staff .edit {
    margin-top: 100px;
}

.edit .headline {
    background-color: #fff;
    border-bottom:    2px solid #bfbfbf;
    color:            #1f5b66;
    display:          block;
    font-family:      'Open Sans bold', sans-serif;
    line-height:      40px;
    padding-left:     15px;
}

.edit ul {
    margin:     15px 0 0 15px;
    padding:    0;
    list-style: none;
}

.edit li {
    margin-bottom: 5px;
    height:        28px;
}

.edit .title {
    float: left;
    width: 100px;
}

#subjects .edit .title {
    width: 145px;
}

#subjects .edit .button {
    margin-bottom: 5px;
    display:       inline-block;
}

.edit li.note {
    height: 85px;
}

input[type="text"],
input[type="password"],
select,
textarea {
    border:     1px solid #bfbfbf;
    padding:    3px 5px;
    transition: border 0.2s ease-out;
}

.edit input[type="text"],
.edit textarea {
    width: 298px;
}

#subjects .edit input[type="text"],
#subjects .edit textarea {
    width: 253px;
}

.red input[type="text"],
input[type="text"].red {
    border: 1px solid #8b0000;
}

.edit input[type="text"].pin {
    text-align: center;
    width:      40px;
}

.edit select {
    width: 310px;
}

#subjects .edit select {
    width: 265px;
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
textarea:hover,
textarea:focus {
    border: 1px solid #1f5b66;
}

.note textarea {
    height: 75px;
    resize: none;
}

.button,
input[type="submit"] {
    background-color: #1f5b66;
    border:           none;
    color:            #fff;
    padding:          5px 15px;
    transition:       background-color 0.2s ease-out;
}

.button:hover,
input[type="submit"]:hover {
    background-color: #17454c;
}

.button:active,
input[type="submit"]:active {
    padding: 5px 14px 5px 16px;
}

.buttons {
    float:        right;
    margin-right: 1px;
    margin-top:   -26px;
}

/*----------------------------
    BOXES
-----------------------------*/

.mantle {
    float:  left;
    margin: 0 5px 25px 0;
}

#customers .mantle,
#teams .mantle,
#staff .mantle {
    height:     600px;
    margin-top: 100px;
    min-width:  300px;
    position:   relative;
    width:      calc(50% - 450px);
}

#subjects .mantle {
    width: calc(100% - 450px);
}

#maps .mantle {
    width: 100%;
}

.table {
    min-height: 563px;
    position:   relative;
}

.pdf {
    cursor: pointer;
}

.nav_filter {
    float: right;
}

/*----------------------------
    MAP
-----------------------------*/

#map {
    margin:   0;
    padding:  0;
    position: relative;
    width:    100%;
}

#osm {
    font-size:     0.7em;
    font-style:    italic;
    margin-bottom: 20px;
}

#installations {
    margin-left: 10px
}

@media (max-width: 1200px) {

    nav li {
        width: 75px;
    }

    nav li a {
        font-size: 11px;
    }

    .details {
        width: 102px;
    }

    .icons img {
        height:       20px;
        margin-right: 10px;
        width:        16px;
    }

    #map {
        height: 325px;
    }

    .overview .details {
        min-width: 105px;
    }

}

@media (min-width: 1201px) {

    .icons img {
        margin-right: 10px;
    }

}

@media (min-width: 1201px) and (max-width: 1300px) {

    #map {
        height: 525px;
    }

}

@media (max-width: 1300px) {

    nav li {
        width: 70px;
    }

    #table .filter select,
    #maps .filter select {
        width: 95px;
    }

    #jobs .edit {
        width: 100%;
    }

    #jobs .mantle {
        width: 100%;
    }

    .pager {
        margin: 0 0 0 10px;
    }

}

@media (min-width: 1301px) {

    #jobs .mantle {
        width: calc(100% - 450px);
    }
}

@media (max-width: 1400px) {

    #jobs .mantle {
        font-size: 12px;
    }

    .add-action-nav li,
    .fl-nav li,
    .nav_filter {
        font-size: 12px;
    }

    .fl-nav li label,
    .add-action-nav li label {
        width: 50px;
    }

    .add-action-nav input[type="text"], .add-action-nav input[type="password"], .add-action-nav select, textarea {
        width: 90px;
    }

    input[name="street[]"],
    input[name="city[]"] {
        width: 100px;
    }

    input[name="zip[]"] {
        width: 40px;
    }

    input[name="street_nr[]"] {
        width: 20px;
    }
}

@media (min-width: 1401px) {

    input[name="street[]"],
    input[name="city[]"],
    input[name="sub_city[]"] {
        width: calc(100% - 15px);
    }

    input[name="street_nr[]"] {
        width: 38px;
    }

    input[name="zip[]"] {
        width: 75px;
    }
}

@media (max-width: 1500px) {

    .table {
        font-size: 12px;
    }

}

@media (min-width: 1201px) and (max-width: 1600px) {

    nav li {
        width: 100px;
    }

}

@media (min-width: 1301px) and (max-width: 1600px) {

    #map {
        height: 515px;
    }
}

@media (min-width: 1601px) {

    nav li {
        width: 150px;
    }

    #map {
        height: 595px
    }

    #map.extended {
        height: 630px;
    }

}

@media (max-width: 1650px) {

    #powered:not(.no_move) {
        right: 70px;
    }

    #powered.no_move {
        right: 150px;
    }

}

@media (min-width: 1651px) {

    #powered {
        right: 150px;
    }

}

.waitingSlogan {
    color:    #343439;
    position: absolute;
    left:     calc(50% - 200px);
    top:      calc(50% + 100px);
}

.hide {
    display: none;
}

select:disabled {
    background: #ddd;
}