.pcoded-inner-content {
    min-height: calc(100vh - 56px);
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    text-align: center;
}

.modal-dialog {
    overflow-y: initial !important
}

.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.form-group.required .col-form-label:after {
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 8px;
    top: 7px;
}

.form-group .field-validation-error {
    color: #dc3545 !important;
    font-size: 13px;
}

    .form-group .field-validation-error span {
        display: block;
    }

.form-group .field-validation-valid span {
    display: none;
}

.theme-loader2 {
    display: none;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255, 0.1);
    position: fixed;
    z-index: 99999999999;
    top: 0;
}

    .theme-loader2 .ball-scale {
        left: 50%;
        top: 50%;
        position: absolute;
        height: 50px;
        width: 50px;
        margin: -25px 0 0 -25px
    }

        .theme-loader2 .ball-scale .contain {
            height: 100%;
            width: 100%
        }

            .theme-loader2 .ball-scale .contain .ring {
                display: none
            }

                .theme-loader2 .ball-scale .contain .ring:first-child {
                    display: block;
                    height: 100%;
                    width: 100%;
                    border-radius: 50%;
                    padding: 10px;
                    border: 3px solid transparent;
                    border-left-color: #01a9ac;
                    border-right-color: #01a9ac;
                    -webkit-animation: round-rotate 1.5s ease-in-out infinite;
                    animation: round-rotate 1.5s ease-in-out infinite
                }

                    .theme-loader2 .ball-scale .contain .ring:first-child .frame {
                        height: 100%;
                        width: 100%;
                        border-radius: 50%;
                        border: 3px solid transparent;
                        border-left-color: #0ac282;
                        border-right-color: #0ac282;
                        -webkit-animation: round-rotate 1.5s ease-in-out infinite;
                        animation: round-rotate 1.5s ease-in-out infinite
                    }

.modal {
    z-index: 999999 !important;
}

.dataTable td a, .dataTable td span.label {
    font-size: 12px !important;
}

.rating-symbol .fa-star, .rating-symbol .fa-star-o {
    color: #ffc107;
}

.row-delete-icon {
    color: #fe5d70 !important;
}

.form-footer {
    background-color: #fff;
    border-top: 1px dashed #01a9ac;
    padding: 20px 25px;
    padding-right: 0px;
    position: inherit;
    text-align: right;
}

.gj-textbox-md {
    padding: .5rem .75rem;
}

.gj-datepicker-md [role=right-icon] {
    position: absolute;
    right: 4px;
    top: 4px;
    font-size: 24px;
}

.gj-picker {
    z-index: 1000000 !important;
}

.label-bold {
    font-weight: bold !important;
}

.pcoded-left-item li.active span.pcoded-mtext {
    font-weight: bold;
    color: #FE8A7D !important;
}

.login-block {
    background: url(images/bg_fixnow.jpg) no-repeat !important;
}

/*Station management*/
.avatar-upload {
    position: relative;
    max-width: 205px;
    margin: 10px auto;
}

    .avatar-upload .avatar-edit {
        position: absolute;
        left: 44px;
        z-index: 1;
        top: 5px;
    }

        .avatar-upload .avatar-edit input {
            display: none;
        }

            .avatar-upload .avatar-edit input + label {
                display: inline-block;
                width: 25px;
                height: 25px;
                margin-bottom: 0;
                border-radius: 100%;
                background: #01a9ac;
                border: 1px solid transparent;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                cursor: pointer;
                font-weight: normal;
                transition: all 0.2s ease-in-out;
            }

                .avatar-upload .avatar-edit input + label:hover {
                    background: #f1f1f1;
                    border-color: #d6d6d6;
                }

                .avatar-upload .avatar-edit input + label:after {
                    content: "\f040";
                    font-family: 'FontAwesome';
                    font-size: 10px;
                    color: dimgray;
                    position: absolute;
                    top: 5px;
                    left: 9px;
                    text-align: center;
                    margin: auto;
                }

        .avatar-upload .avatar-edit span {
            display: inline-block;
            width: 25px;
            height: 25px;
            margin-bottom: 0;
            border-radius: 100%;
            background: #fe5d70;
            border: 1px solid transparent;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
            cursor: pointer;
            font-weight: normal;
            transition: all 0.2s ease-in-out;
        }

            .avatar-upload .avatar-edit span:hover {
                background: #f1f1f1;
                border-color: #d6d6d6;
            }

            .avatar-upload .avatar-edit span:after {
                content: "\f1f8";
                font-family: 'FontAwesome';
                color: dimgray;
                position: absolute;
                top: 3px;
                left: 29px;
                right: 0;
                text-align: center;
                margin: auto;
            }

    .avatar-upload .avatar-preview {
        width: 100px;
        height: 100px;
        max-height: 100px;
        position: relative;
        border-radius: 0%;
        border: 1px solid gainsboro;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    }

        .avatar-upload .avatar-preview > div {
            width: 100%;
            height: 100%;
            border-radius: 0%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

.tab-content {
    padding: 5px 0 0 0 !important;
}

.tabs .nav-item a.nav-link.active {
    font-weight: bold;
}

.input-group-addon {
    background-color: #e9ecef;
    color: #000;
    height: 31px;
}

.input-group input {
    height: 31px;
}

.ms-parent.form-control {
    border: 0 !important;
    padding: 0 !important;
}

    .ms-parent.form-control button {
        height: 31px !important;
    }

.ms-choice {
    border-radius: 2px !important;
}

    .ms-choice div {
        top: 2px !important;
    }

    .ms-choice span {
        top: 3px !important;
    }

.select2-container--default .select2-selection--single {
    border-radius: 2px !important;
}

.select2-container .select2-selection--single {
    height: 31px !important;
}

.input-group {
    margin-bottom: 0.25em !important;
}

label {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399FF;
}

.autocomplete-group {
    padding: 2px 5px;
}

    .autocomplete-group strong {
        display: block;
        border-bottom: 1px solid #000;
    }

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    padding: 4px 0;
    margin: 0 0 10px 25px;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
}

.ui-menu-item > a.ui-corner-all {
    display: block;
    clear: both;
    font-weight: normal;
    line-height: 2em;
    font-size: .8em;
    color: #555555;
    white-space: nowrap;
    text-decoration: none;
}

.ui-menu-item div {
    padding: 6px 6px;
}


.ui-state-hover, .ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none;
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
    height: 0;
}

.pac-container {
    z-index: 1000000000;
}

.ui-helper-hidden-accessible {
    display: none;
}

.productivity .select2-container {
    width: 250px !important;
    margin-left: 10px;
    margin-bottom: 5px;
    font-weight: bold;
}

.productivity .tabs .nav-item a.nav-link {
    padding-left: 30px !important;
    padding-right: 30px !important;
    border: none !important;
    font-weight: bold;
}

    .productivity .tabs .nav-item a.nav-link.active {
        background: #034498;
        color: #fff;
    }

    .productivity .tabs .nav-item a.nav-link:hover {
        color: #4ea5e0;
    }

.productivity .tab-content {
    border-top: 3px solid #034498;
}

.productivity .nav {
    display: inline-flex !important;
}

.productivity .legends {
    float: right;
    padding-top: 10px;
}

    .productivity .legends span {
        font-weight: 400;
        font-size: 14px;
        margin-right: 10px;
    }

        .productivity .legends span i {
            font-size: 18px;
            margin-right: 5px;
        }

        /*Color legends*/
        .productivity .legends span.finished i {
            color: #B9E986;
        }

        .productivity .legends span.available i {
            color: #8FD9F6;
        }

        .productivity .legends span.waiting i {
            color: #F7B500;
        }

        .productivity .legends span.approved i {
            color: #43D7B5;
        }

        .productivity .legends span.reparing i {
            color: #F96400;
        }

        .productivity .legends span.notinuse i {
            color: #A4A4A4;
        }

.productivity .input-group {
    width: 210px;
    display: inline-flex !important;
}

.productivity button.btn-today {
    font-size: 14px;
    height: 31px;
    margin-right: 5px;
    line-height: 10px;
}

.productivity .time-slots {
    display: table;
    margin: 0;
    min-height: 200px;
    border: 1px solid #ddd;
    width: 100%;
    table-layout: fixed;
}

    .productivity .time-slots .area-name {
        color: white;
        font-weight: bold;
        font-size: 20px;
        width: 50px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .productivity .time-slots .time-slot-container {
        display: table-cell;
        white-space: nowrap;
        overflow: auto;
        vertical-align: middle;
    }

    .productivity .time-slots .card-container {
    }

        .productivity .time-slots .card-container .card-sub {
            cursor: default !important;
            width: 22.5%;
            height: 160px;
            display: inline-block;
            margin-left: 1%;
            margin-right: 1%;
            border: 3px solid;
            border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
        }

            .productivity .time-slots .card-container .card-sub:first-child {
                margin-left: 1%;
            }

            .productivity .time-slots .card-container .card-sub:last-child {
                margin-right: 15px;
            }

        .productivity .time-slots .card-container .slot-number {
            font-weight: bold;
            font-size: 14px;
            margin-right: 7px;
        }

        .productivity .time-slots .card-container .slot-status {
            font-size: 12px;
        }

        .productivity .time-slots .card-container .slot-menu {
            font-size: 16px;
            float: right;
        }

        .productivity .time-slots .card-container .dropdown {
            position: fixed !important;
            z-index: 10000;
        }

        /*Card colors*/
        .productivity .time-slots .card-container .finished {
            border-color: #B9E986;
        }

            .productivity .time-slots .card-container .finished .slot-number {
                color: #B9E986;
            }

            .productivity .time-slots .card-container .finished .card-footer {
                background: #B9E986;
                color: #fff;
            }


        .productivity .time-slots .card-container .available {
            border-color: #8FD9F6;
        }

            .productivity .time-slots .card-container .available .slot-number {
                color: #8FD9F6;
            }

            .productivity .time-slots .card-container .available .card-footer {
                background: #8FD9F6;
                color: #fff;
            }

        .productivity .time-slots .card-container .waiting {
            border-color: #F7B500;
        }

            .productivity .time-slots .card-container .waiting .slot-number {
                color: #F7B500;
            }

            .productivity .time-slots .card-container .waiting .card-footer {
                background: #F7B500;
                color: #fff;
            }

        .productivity .time-slots .card-container .approved {
            border-color: #43D7B5;
        }

            .productivity .time-slots .card-container .approved .slot-number {
                color: #43D7B5;
            }

            .productivity .time-slots .card-container .approved .card-footer {
                background: #43D7B5;
                color: #fff;
            }

        .productivity .time-slots .card-container .reparing {
            border-color: #F96400;
        }

            .productivity .time-slots .card-container .reparing .slot-number {
                color: #F96400;
            }

            .productivity .time-slots .card-container .reparing .card-footer {
                background: #F96400;
                color: #fff;
            }

        .productivity .time-slots .card-container .notinuse {
            border-color: #A4A4A4;
        }

            .productivity .time-slots .card-container .notinuse .slot-number {
                color: #A4A4A4;
            }

            .productivity .time-slots .card-container .notinuse .card-footer {
                background: #A4A4A4;
                color: #fff;
            }

        .productivity .time-slots .card-container .card {
            margin-bottom: 0;
        }

            .productivity .time-slots .card-container .card .card-header {
                border-bottom: 1px solid #ddd;
                padding: 0.6rem 0;
                margin: 0 10px;
            }

            .productivity .time-slots .card-container .card .card-body {
                padding: 10px;
                min-height: 78px;
            }

            .productivity .time-slots .card-container .card .card-footer {
                padding-top: .4rem;
                padding-bottom: .4rem;
                text-align: center;
            }

                .productivity .time-slots .card-container .card .card-footer i {
                    font-size: 18px;
                }

                .productivity .time-slots .card-container .card .card-footer b {
                    font-size: 16px;
                }


            .productivity .time-slots .card-container .card .card-body .driver-name {
                font-size: 15px;
            }

            .productivity .time-slots .card-container .card .card-body .license-plate {
                font-size: 15px;
                margin-top: 5px;
            }

            .productivity .time-slots .card-container .card .card-body a.btn-info:hover {
                color: #fff;
            }

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

.waiting-list .userlist-box .media-left {
    flex-grow: 1 !important;
}

    .waiting-list .userlist-box .media-left .license-plate {
        margin-top: 3px;
    }

.waiting-list .btn.btn-round {
    border-radius: .5rem;
}

.waiting-list .userlist-box {
    padding: 10px;
}


/* Adapt font color if the background is light or dark  */
.dark-color {
    color: black
}

.light-color {
    color: white
}

.show-all {
    text-align: center;
    font-size: 13px;
}

    .show-all a:hover {
        background: none !important;
    }

.productivity #timeSlotContainer .time-slots:first-child {
    margin-top: 10px;
}

.table-styling.table-week th {
    background-color: #F99325;
    color: #fff;
    border: 3px solid #F99325;
}

.table-styling.table-week th {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.table-styling.table-week td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #e9ecef;
}

    .table-styling.table-week td.time-slot {
        text-align: center;
    }

.small-card {
    border-radius: .25rem;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-basis: 100%;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
}

    .small-card .area {
        color: #fff;
        float: left;
        padding: 5px;
        display: flex;
        padding-left: 10px;
        padding-right: 10px;
    }

        .small-card .area b {
            margin: auto;
            text-align: center;
        }


    .small-card .card-info {
        padding: 5px;
        width: 100%;
        font-size: 13px;
    }

        .small-card .card-info a {
            /*text-align: center;*/
            display: block;
            font-size: 13px;
        }

        .small-card .card-info > a i {
            color: #F99325;
        }

    .small-card .area.finished {
        background: #B9E986;
    }

    .small-card .area.available {
        background: #8FD9F6;
    }

    .small-card .area.waiting {
        background: #F7B500;
    }

    .small-card .area.approved {
        background: #43D7B5;
    }

    .small-card .area.reparing {
        background: #F96400;
    }

    .small-card .area.notinuse {
        background: #A4A4A4;
    }

.cal-day {
    font-size: 15px;
}

.small-card .area.month {
    color: #353c4e;
}

.card-info .slot-container {
    text-align: right;
    margin-top: 1px;
}

.slot-container i.finished {
    color: #B9E986;
}

.slot-container i.available {
    color: #8FD9F6;
}

.slot-container i.waiting {
    color: #F7B500;
}

.slot-container i.approved {
    color: #43D7B5;
}

.slot-container i.reparing {
    color: #F96400;
}

.slot-container i.notinuse {
    color: #A4A4A4;
}

.highlight-row {
    background: #c0e1f9 !important;
}

.btn-white {
    background: #fff;
    border: 1px solid #ccc;
}

.notification-view li.notify-item {
    padding: 10px;
    border-bottom: 1px solid #efefef;
}

    .notification-view li.notify-item.read {
        background: #edf2fa;
    }

tr.read {
    background: #edf2fa;
}

.ui-autocomplete {
    z-index: 2147483647;
}

.select2-modal {
    z-index: 1050 !important;
}

#pcoded[vertical-nav-type="offcanvas"] #waitingSideBar {
    /*left: -640px !important;*/
}

fieldset.system-config {
    border: solid 1px #DDD !important;
    padding: 0 10px 10px 10px;
    border-bottom: none;
}

legend.system-config {
    width: auto !important;
    border: none;
    font-size: 15px;
    font-weight: bold;
}


p.finished {
    background: #B9E986;
    color: #fff;
}

p.waiting {
    background: #F7B500;
    color: #fff;
}

p.approved {
    background: #43D7B5;
    color: #fff;
}

p.reparing {
    background: #F96400;
    color: #fff;
}

p.canceled {
    background: #BDC3C7;
    color: #fff;
}

.not-read {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #F96400;
    box-shadow: 1px 1px #888888;
    opacity: 96%;
    margin: -20px 17px -0px;
    border-radius: 50%;
}

.select2-container.select2-container--default.select2-container--open {
    z-index: 9999999 !important;
}

p.notification-msg {
    white-space: normal;
}

#monthTimeSlotContainer, #weekTimeSlotContainer {
    max-width: 100%;
    overflow-x: auto;
}

#stationAreaSub {
    overflow-y: auto;
    max-height: 400px;
}

@media only screen and (min-width:1280px) {
    div.card-block .legends {
        width: 100%;
        margin-bottom: 15px;
        text-align: right;
    }
}

.text_enter {
    white-space: normal !important;
}