@font-face {
    font-family: 'Premier';
    src: url("fonts/PremierLeagueW01-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Premier';
    src: url("fonts/PremierLeagueW01-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}

* {
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
}

*:focus {
    outline: none;
}

a {
    cursor: pointer;
}

a,
li,
span,
article,
header,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
img,
svg {
    outline: none;
    transition: all 0.3s ease;
}

strong {
    font-weight: bold;
}

html,
body {
    height: 100%;
}

body {
    background: #edf1f5;
    color: #4d535a;
    font-family: 'Premier';
    font-size: 14px;
    line-height: 1.5em;
    margin: 0 auto;
    padding-left: 200px;
    padding-top: 59px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1em;
    font-weight: inherit;
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

span {
    font-weight: inherit;
}

input,
textarea,
select,
button {
    background: #f4f7f9;
    border: 1px solid #dfe6ec;
    border-radius: 3px;
    display: block;
    padding: 12px 16px;
    position: relative;
    width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

input[type="submit"],
button {
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:focus,
textarea:focus,
select:focus,
.selectize-input.focus {
    box-shadow: 0 0 12px rgba(81, 203, 238, 0.4);
    border: 1px solid rgba(81, 203, 238, 0.75);
}

.main_button:focus {
    box-shadow: 0 0 12px rgba(0, 170, 85, 0.8);
}

.main_button1:focus {
    box-shadow: 0 0 12px rgba(0, 192, 255, 0.8);
}

.form__switch__completed:focus {
    box-shadow: 0 0 12px rgba(0, 192, 255, 0.8);
}

.form__switch__pending:focus:focus {
    box-shadow: 0 0 12px rgba(255, 50, 50, 0.8);
}

.form__switch input:checked+label.form__switch__completed:focus {
    box-shadow: 0 0 12px rgba(0, 192, 255, 0.8);
}

.form__switch input:checked+label.form__switch__pending:focus {
    box-shadow: 0 0 12px rgba(255, 50, 50, 0.8);
}

form label {
    display: block;
    margin-bottom: 4px;
}

textarea {
    height: 120px;
}

img {
    height: auto;
    margin-bottom: -7px;
    max-width: 100%;
}

p {
    margin: 0;
}

table {
    border-top: none;
    border-radius: 3px;
    border-spacing: 0;
    box-sizing: border-box;
    display: table;
    overflow-x: auto;
    padding: 0;
    max-width: 100%;
    width: 100%!important;
}

table th,
table td {
    box-sizing: border-box;
    padding: 10px 16px!important;
    text-align: left;
}

table td {
    border-top: 1px solid #dfe6ec;
}

table tr:first-child td {
    border-top: none;
}

table.table_center th,
table.table_center td {
    text-align: center;
}

table th {
    background: #edf1f5;
    font-weight: bold;
    overflow: hidden;
}

table th:first-child {
    border-radius: 3px 0 0 0;
    font-weight: bold;
    overflow: hidden;
}

table th:last-child {
    background: #edf1f5;
    border-radius: 0 3px 0 0;
    font-weight: bold;
    overflow: hidden;
}

table tr,
table td {
    position: relative;
    text-align: left!important;
}

::-webkit-input-placeholder {
    color: inherit;
}

::-moz-placeholder {
    color: inherit;
}

:-ms-input-placeholder {
    color: inherit;
}

:-moz-placeholder {
    color: inherit;
}

.button {
    display: inline-block;
    padding: 10px 16px;
}

.main_button {
    background: #00aa55;
    color: #fff;
    width: 100%;
}

.small_button {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 5px 2px;
    text-transform: uppercase;
}

.ghost_button {
    border: 1px solid;
    border-radius: 3px;
}

.edit_button {
    color: #00c0ff;
}

.delete_button {
    color: #ff3232;
}

.edit_button:hover {
    background: #00c0ff;
    border-color: #00c0ff;
    color: #fff;
}

.delete_button:hover {
    background: #ff3232;
    border-color: #ff3232;
    color: #fff;
}

.site_header {
    background: #fff;
    display: flex;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

.site_header__logo {
    background: #2f3a4c;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    padding: 15px 20px;
    width: 200px;
}

.logo {
    line-height: 1em;
}

.logo svg {
    fill: #fff;
    font-size: 72px;
}

.maintenance__logo svg {
    fill: #4d535a;
}

.site_header__content {
    align-items: center;
    box-shadow: 0 1px 3px rgba(47, 58, 76, 0.1);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    width: 100%;
}

.site_header__title {
    font-size: 1.285em;
}

.site_header__title__mobile {
    display: none;
}

.site_header__info {
    align-items: center;
    display: flex;
}

.site_header__info a:hover svg {
    fill: #ff9600;
}

.info__profile {
    background: #ff9600;
    border-radius: 100%;
    margin: 0 8px 0 12px;
    overflow: hidden;
    width: 32px;
}

.nav_mobile {
    display: none;
}

.nav {
    background: #2f3a4c;
    bottom: 0;
    color: #fff;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    position: fixed;
    top: 59px;
    transition: all 0.3s ease;
    width: 200px;
    z-index: 99;
}

.nav::-webkit-scrollbar-track {
    background-color: transparent;
}

.nav::-webkit-scrollbar {
    width: 6px;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 6px 0;
}

.nav::-webkit-scrollbar-thumb {
    border-radius: 10px;
    width: 8px;
    background-color: #ff8c32;
}

.nav__item {
    position: relative;
}

.nav__item>a {
    border-left: 4px solid transparent;
    display: block;
    padding: 10px 20px;
}

.nav__item.current>a,
.nav__item.active>a {
    background: rgba(0, 0, 0, 0.5)!important;
    border-color: #ff9600;
    color: #ff9600;
}

.nav__item:hover>a {
    background: rgba(0, 0, 0, 0.3);
    color: #ff9600;
}

.nav__subnav li:hover a,
.nav__subnav li.active a {
    color: #ff9600;
}

.nav__subnav {
    background: #283141;
    left: 200px;
    opacity: 0;
    padding: 8px 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 160px;
}

.nav__item:hover .nav__subnav {
    opacity: 1;
    visibility: visible;
}

.nav__subnav a {
    display: block;
    padding: 4px 20px;
}

.nav__item.current:before,
.nav__item.active:before {
    border-style: solid;
    border-width: 8px 8px 8px 0;
    border-color: transparent #edf1f5 transparent transparent;
    content: '';
    display: block;
    height: 0;
    position: absolute;
    right: 0;
    top: 14px;
    width: 0;
}

.nav__subnav:before {
    border-style: solid;
    border-width: 8px 8px 8px 0;
    border-color: transparent #283141 transparent transparent;
    content: '';
    display: block;
    height: 0;
    position: absolute;
    left: -8px;
    top: 14px;
    width: 0;
}

.current .nav__subnav,
.active .nav__subnav {
    left: auto;
    opacity: 1;
    position: relative;
    top: auto;
    visibility: visible;
    width: 100%;
}

.wrapper {
    height: 100%;
}

.content {
    min-height: 100%;
    padding: 20px;
    padding-bottom: 61px;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.card-report.cards {
    display: block;
}

.cards__wrapper {
    flex: 1;
    padding: 10px;
    max-width: 100%;
}

.card {
    background: #fff;
    border-radius: 0 0 3px 3px;
    border-top: 3px solid #ff8c32;
    box-shadow: 0 1px 3px rgba(47, 58, 76, 0.1);
    min-height: 100%;
    padding: 30px;
}

.card_v2 {
    box-shadow: 0 1px 3px rgba(47, 58, 76, 0.1);
}

.card__link {
    display: flex;
}

.card__icon {
    background: #2f3a4c;
    border-radius: 3px 0 0 3px;
    padding: 16px;
}

.card__caption {
    align-items: center;
    background: #fff;
    border-radius: 0 3px 3px 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    padding: 20px;
    width: 100%;
}

.card__caption__title,
.card__caption__number {
    flex: 0 0 100%;
}

.card__caption__number {
    font-size: 1.5em;
    font-weight: bold;
}

.card_full {
    flex: 0 0 100%;
}

.card_2 {
    flex: 0 0 50%;
}

.card_3 {
    flex: 0 0 33.33%;
}

.card_3 .form__item.fi_2 {
    flex: 0 0 100%;
}

.card_4 {
    flex: 0 0 25%;
}


/*.card_blue{
    border-color: #00c0ff;
}

.card_green{
    border-color: #00aa55;
}

.card_red{
    border-color: #ff3232;
}

.card_orange{
    border-color: #ff8c32;
}

.card_purple{
    border-color: #6000d6;
}

.card_gold{
    border-color: #6f6c25;
}*/

.card_blue .card__icon {
    background: #00c0ff;
}

.card_green .card__icon {
    background: #00aa55;
}

.card_red .card__icon {
    background: #ff3232;
}

.card_orange .card__icon {
    background: #ff8c32;
}

.card_purple .card__icon {
    background: #6000d6;
}

.card_gold .card__icon {
    background: #6f6c25;
}

.card__title {
    font-size: 1.7em;
    line-height: 1.3em;
}

.card__content {
    margin-top: 20px;
}

.form__list {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.form__item {
    flex: 0 0 100%;
    padding: 10px;
    max-width: 100%;
}

.form__list div {
    flex: 0 0 100%;
}

.form__item.fi_2 {
    flex: 0 0 50%;
}

.form__item.fi_3 {
    flex: 0 0 33.33%;
}

.form__item.fi_4 {
    flex: 0 0 25%;
}

.fi_separation{
    flex: 0 0 100%;
}

.selectize-input {
    background: #f4f7f9;
    border: 1px solid #dfe6ec;
    border-radius: 3px;
    display: block;
    padding: 8px 24px 7px 16px;
    position: relative;
    width: 100%;
}

.selectize-input .item {
    display: inline-block;
    height: 26px;
    line-height: 26px;
}

.selectize-input:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 3px 0 3px;
    border-color: #000 transparent transparent transparent;
    position: absolute;
    right: 7px;
    top: 18px;
}

.selectize-input>input {
    display: inline-block !important;
    padding: 0 !important;
    height: 26px!important;
    max-width: 100% !important;
    margin: 0 1px !important;
    text-indent: 0 !important;
    border: 0 none !important;
    background: none !important;
    line-height: inherit !important;
    -webkit-user-select: auto !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.selectize-control.multi .selectize-input>div {
    background: #2f3a4c;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 0 3px 2px 0;
    padding: 2px 8px;
}

.selectize-dropdown {
    position: absolute;
    z-index: 10;
    border: 1px solid #dfe6ec;
    border-radius: 3px;
    background: #fff;
    margin: 3px 0 0 0;
    padding: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.selectize-dropdown-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 200px;
    -webkit-overflow-scrolling: touch;
}

.selectize-dropdown [data-selectable].option {
    opacity: 1;
}

.selectize-dropdown .option {
    cursor: pointer;
    padding: 4px 8px;
}

.selectize-dropdown .option:hover {
    background: #edf1f5;
}

.select__other,
.pending_task {
    display: none;
    margin-top: 10px;
}

.select__other.show {
    display: block;
}

.pending_task.show {
    display: flex;
}

.minutes_complete.hide {
    display: none;
}

.hide2 {
    display: none!important;
}

.pending_task {
    flex-wrap: wrap;
}

.dataTables_length label,
.dataTables_filter label {
    align-items: center;
    display: flex;
}

.dataTables_length select {
    margin: 0 10px;
    padding: 6px;
}

.dataTables_wrapper .ui-toolbar {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    margin: 10px 0;
}


/* .dataTables_wrapper .ui-toolbar{
} */

.dataTables_filter input {
    margin-left: 4px;
    padding: 6px 8px;
}

.dataTables_paginate,
.dataTables_paginate span {
    display: flex;
}

.dataTables_paginate a {
    border: 2px solid #edf1f5;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    margin-left: 4px;
    padding: 6px 12px;
}

.dataTables_paginate a:hover {
    background: #edf1f5;
}

.dataTables_paginate a.ui-state-disabled {
    background: #2f3a4c;
    border: 2px solid #2f3a4c;
    color: #fff;
    pointer-events: none;
}

a.previous.ui-state-disabled,
a.next.ui-state-disabled {
    background: #edf1f5;
    border: 2px solid #edf1f5;
    color: #adb4bc;
}

.inputShowPwd>.showEle {
    display: none;
    position: absolute;
    height: 24px;
    width: 24px;
    top: 50%;
    margin-top: -12px;
    right: 6px;
    background: #000;
    background-size: 24px 24px;
    z-index: 1;
    cursor: pointer;
}

.td_buttons {
    text-align: right;
}

.td_buttons a {
    margin-left: 10px;
}

.chart canvas {
    width: 100%!important;
}

.form__date {
    align-items: center;
    display: flex;
}

.form__date span {
    margin: 0 20px;
}

.form__switch {
    box-sizing: border-box;
    font-size: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
}

.form__switch input {
    width: 0;
    height: 0;
    position: absolute;
    left: -9999px;
}

.form__switch input+label {
    color: #87919a;
    cursor: pointer;
    margin: 0;
    padding: 8px 16px;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    background-color: #e2e9ee;
    font-size: 14px;
    text-align: center;
    transition: background-color .15s ease-out, color .25s ease-out;
    width: 100%;
}

.form__switch input+label:first-of-type {
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.form__switch input+label:last-of-type {
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.form__switch input:hover+label {
    color: #58585a;
}

.form__switch input:checked+label {
    color: #fff;
    z-index: 1;
}

.form__switch input:checked+label.form__switch__pass {
    background-color: #00c0ff;
}

.form__switch input:checked+label.form__switch__fail {
    background-color: #ff3232;
}

.form__switch input:checked+label.form__switch__not {
    background-color: #ff8c32;
}

.form__item__duration {
    align-items: center;
    display: flex;
}

.form__item__duration span {
    margin-left: 10px;
}

.report {
    margin-top: 30px;
}

.modal {
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    overflow-y: auto;
    padding: 30px;
    position: fixed;
    top: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    width: 100%;
    z-index: 99999;
}

.modal__content {
    background: #fff;
    border-radius: 3px;
    margin: 0 auto;
    width: 480px;
    padding: 30px;
    position: relative;
}

.modal__close {
    align-items: center;
    background: #ff3232;
    border-radius: 100px;
    cursor: pointer;
    display: flex;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: -16px;
    top: -16px;
    width: 32px;
}

.modal__title {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2em;
    margin-bottom: 20px;
    text-align: center;
}

.modal__form textarea {
    margin-bottom: 10px;
}

.modal.open_modal {
    opacity: 1;
    visibility: visible;
}

.rate {
    float: left;
    padding: 0 10px;
}

.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked)>label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.rate:not(:checked)>label:before {
    content: '★ ';
}

.rate>input:checked~label {
    color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: #deb217;
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: #c59b08;
}

.working_hours {
    align-items: center;
    display: flex;
}

.working_hours select {
    margin-left: 10px;
    width: 100px;
}

.working_hours span {
    margin: 0 10px;
}

.pi_more span {
    display: inline-block;
    vertical-align: middle;
}

.more {
    background: #ff9600;
    border-radius: 32px;
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 24px;
    justify-content: center;
    line-height: 24px;
    margin-left: 8px;
    text-align: center;
    width: 24px;
}

.sub_activity {
    display: none;
}

.sub_activity td {
    border-top: none;
    padding: 4px 16px!important;
}

.sub_activity td:nth-child(2) {
    max-width: 320px;
    padding-left: 34px!important;
}

.sub_activity__name {
    font-weight: bold;
}

.sub_activity__comments {
    background: #edf1f5;
    border-radius: 3px;
    margin-top: 4px;
    margin-bottom: 10px;
    max-height: 200px;
    overflow-y: auto;
    padding: 6px 12px;
}

.number_tasks_row {
    flex-wrap: wrap;
    display: flex;
}

.number_tasks_row.show {
    display: flex;
}

.completed {
    color: #00aa55;
    font-weight: bold;
}

.pending {
    color: #ff3232;
    font-weight: bold;
}

.site_footer {
    margin-top: -61px;
    padding: 20px;
    position: relative;
    z-index: 99;
}

.site_footer__wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.by a {
    color: #ff9600;
}

@media screen and (max-width: 1279px) {
    body {
        padding-left: 0;
        transition: all 0.3s ease;
        width: 100%;
    }
    .nav {
        left: -200px;
        overflow-y: auto;
    }
    .open_navigation {
        left: 200px;
        overflow: hidden;
        position: absolute;
    }
    .open_navigation nav {
        left: 0;
    }
    .nav__subnav {
        left: 0;
    }
    .info__profile,
    .info__name {
        display: none;
    }
    .nav_mobile {
        cursor: pointer;
        display: block;
        margin-left: 10px;
    }
    .card_2,
    .card_3 {
        flex: 0 0 100%;
    }
    .card_4,
    .form__item.fi_4 {
        flex: 0 0 50%;
    }
    .nav__item:hover .nav__subnav {
        opacity: 0;
        visibility: hidden;
    }
    .nav__item.current:hover .nav__subnav,
    .nav__item.active:hover .nav__subnav {
        opacity: 1;
        visibility: visible;
    }
}

@media screen and (max-width: 767px) {
    .site_header__title {
        display: none;
    }
    .site_header__title__mobile {
        display: block;
        margin-bottom: 10px;
    }
    .card_4,
    .form__item.fi_2,
    .form__item.fi_3,
    .form__item.fi_4 {
        flex: 0 0 100%;
    }

    .modal{
        padding: 20px;
    }
    .modal__content {
        min-width: 0;
        width: 100%;
    }
}

.input_disable {
    pointer-events: none;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center right;
}

table.dataTable thead .sorting {
    background-image: url(../images/sort_both.png);
}

table.dataTable thead .sorting_asc {
    background-image: url(../images/sort_asc.png);
}

table.dataTable thead .sorting_desc {
    background-image: url(../images/sort_desc.png);
}

.alert {
    border-radius: 3px;
    display: flex;
    padding: 8px 20px;
    align-items: center;
    margin-bottom: 20px;
}

.alert-success {
    background: #e5f6ee;
    color: #00aa55;
}

.alert .close {
    border-radius: 30px;
    background: #f00;
    color: #fff;
    font-weight: bold;
    height: 24px;
    line-height: 24px;
    margin-right: 8px;
    text-align: center;
    width: 24px;
}

.card__buttons {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.card__buttons a {
    color: #ff9600;
    display: flex;
    align-items: center;
    margin-right: 10px;
    padding: 6px 12px;
}

.card__buttons a svg {
    margin-right: 8px;
}

.add_button {
    background: #00c0ff;
    border-color: #00c0ff;
    color: #fff;
}

.remove_button {
    background: #ff3232;
    border-color: #ff3232;
    color: #fff;
}

.form__item__add {
    display: flex;
}

.form__item__add button {
    margin-left: 10px;
    width: 60px;
}

.change_password {
    padding-left: 0;
}

.change_password .content {
    margin: 0 auto;
    padding: 20px 0;
    width: 1020px;
}

@media screen and (max-width: 1279px) {
    .change_password .content {
        padding: 20px;
        width: 100%;
    }
}

.notifications {
    margin-right: 10px;
    position: relative;
}

.notifications__icon {
    cursor: pointer;
    position: relative;
}

.notifications__number {
    align-items: center;
    background: #ff8c32;
    border-radius: 100px;
    color: #fff;
    display: flex;
    font-size: 10px;
    font-weight: bold;
    height: 16px;
    justify-content: center;
    position: absolute;
    right: -6px;
    top: -6px;
    width: 16px;
}

.notifications__list {
    background: #fff;
    border: 1px solid #d8dde5;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    line-height: 1.3em;
    max-height: 224px;
    opacity: 0;
    overflow: auto;
    position: absolute;
    left: 0;
    top: 32px;
    transition: all 0.3s ease;
    visibility: hidden;
    width: 200px;
}

.notifications__list.show {
    opacity: 1;
    visibility: visible;
}

.notifications__item {
    background: #edf1f5;
    border-bottom: 1px solid #d8dde5;
    padding: 6px 12px;
}

.notifications__item:last-child {
    border-bottom: none;
}

.notifications__item:hover a {
    color: #ff8c32;
}

.notifications__item.read {
    background: #fff;
}

@media screen and (max-width: 1279px) {
    .notifications__list {
        left: auto;
        right: -60px;
    }
}

.danger {
    padding: 10px;
    background-color: #d83226;
    /* Red */
    color: white;
    margin-bottom: 10px;
}

.warning {
    padding: 10px;
    background-color: orange;
    /* Red */
    color: white;
    margin-bottom: 10px;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

body.login {
    padding: 0;
}

.login__logo svg {
    fill: #4d535a;
}

.login__wrapper {
    bottom: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    padding-bottom: 100px;
    position: relative;
    top: 0;
    width: 100%;
}

.login__content {
    width: 420px;
    text-align: center;
}

.login__header {
    margin-bottom: 30px;
}

.login__box {
    background: #fff;
    box-shadow: 0 1px 3px rgba(56, 64, 75, 0.1);
    border-radius: 10px;
    color: #6b7174;
    padding: 40px;
}

.login__title {
    font-size: 1.5em;
    line-height: 1.2em;
    margin-bottom: 30px;
}

.login__title span {
    font-weight: bold;
    display: block;
}

.login__form {
    margin-top: 20px;
    text-align: left;
}

.login__form__label {
    font-size: 13px;
    line-height: 1.4em;
    font-weight: bold;
    text-transform: uppercase;
}

.login__form__item {
    margin-bottom: 20px;
}

.login__form__item:last-child {
    margin-bottom: 0;
}

.login__form__button {
    width: 100%;
}

.login__footer {
    margin-top: 10px;
}

.login__footer__link {
    color: #009ce4;
    font-size: 14px;
    font-weight: bold;
}

#donutchart_detail,
#columnchart_material {
    display: none;
}

.show_report {
    display: block!important;
}

.form__switch input:checked+label.form__switch__completed {
    background-color: #00c0ff;
}

.form__switch input:checked+label.form__switch__pending {
    background-color: #ff3232;
}

.form__item__validate {
    color: red;
    margin-top: 4px;
}


/* para ADS Disable */


/* The container */

.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default checkbox */

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}


/* On mouse-over, add a grey background color */

.container:hover input~.checkmark {
    background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.container input:checked~.checkmark {
    background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.container input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* FIN para ADS Disable */

table.ui-datepicker-calendar th,
table.ui-datepicker-calendar td {
    padding: 0!important;
}

.loading {
    background: rgba(255, 255, 255, 0.8);
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    transition: all 0.3s ease;
    visibility: hidden;
    width: 100%;
    z-index: 99999;
}

.loading_show {
    opacity: 1;
    visibility: visible;
}

.loading_hide {
    opacity: 0;
    visibility: hidden;
}


/* #pie-chart {
    background-color: goldenrod;
    border-radius: 6px;
} */

.content_logos {
    border-top: 1px solid #dfe6ec;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
}

.content_logos__item {
    align-items: center;
    display: flex;
}

.content_logos__item img {
    margin-bottom: 0;
    ;
    max-width: 180px;
}






/* Reports */

@font-face {
    font-family: 'Din';
    src: url('fonts/D-DINCondensed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Din';
    src: url('fonts/DINCond-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



.report{
    background: #fff;
    color: #000;
    font-family: 'Din';
    font-size: 18px;
}

.report__header{
    margin-bottom: 20px;
}

.report__title{
    font-size: 2.4em;
    font-weight: 900;
    line-height: 1em;
    text-transform: uppercase;
}

.report__date{
    color: #9098a2;
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.report__subtitle{
    font-size: 1.5em;
    font-weight: 900;
    line-height: 1em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.report__table-wrapper{
    max-width: 100%;
    overflow-x: auto;
}

.report__section{
    margin-bottom: 40px;
}

.report__section:last-child{
    margin-bottom: 0;
}

table.report__table{
    border-top: none;
    border-radius: 3px;
    border-spacing: 0;
    box-sizing: border-box;
    display: table;
    overflow-x: auto;
    padding: 0;
    max-width: 100%;
    text-align: center;
    width: 100%!important;
}

table.report__table th, table td{
    box-sizing: border-box;
    border-left: 3px solid #fff;
    padding: 12px 16px!important;
    text-align: center;
}

table.report__table th:first-child, table td:first-child{
    border-left: none;
}

table.report__table td{
    border-top: 1px solid #dfe6ec;
}

table.report__table tr:first-child td{
    border-top: none;
}

table.report__table thead th{
    background: #ff7800;
    border-radius: 0;
    color: #fff;
    font-weight: bold;
    overflow: hidden;
}

table.report__table tfoot th{
    border-top: 3px solid #fff;
    background: #000;
    color: #fff;
    border-radius: 0!important;
    font-weight: bold;
    overflow: hidden;
}

table.report__table th:first-child{
    border-radius: 6px 0 0 0;
}

table.report__table th:last-child{
    border-radius: 0 6px 0 0;
}

table.report__table tr{
    position: relative;
}

table.report__table tr:nth-child(even) {background: #e1e6eb}
table.report__table tr:nth-child(odd) {background: #FFF}

.report__table__total{
    font-weight: bold;
    text-transform: uppercase;
}

.report__table__task{
    font-weight: bold;
    text-transform: uppercase;
}

.radio-group-flex{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.radio-group-flex .radio-group{
    flex: 0;
    padding: 10px;
}

.form__item__checkbox,
.radio-group{
    display: flex;
}

.form__item__checkbox input,
.radio-group input{
    width: auto;
    margin: 0 6px 5px;
}

table.report__table.table-short{
    width: auto!important;
    min-width: 50%;
}

.task-link{
    align-items: center;
    display: flex;
    font-weight: bold;
    justify-content: center;
}

.task-link span{
    margin-right: 6px;
}

.task-link img{
    margin-bottom: 2px;
}

.plugin-remove_button .item{
    padding: 2px 24px 2px 8px!important;
    position: relative;
}

.plugin-remove_button .item .remove{
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
}

.plugin-remove_button .item:hover .remove{
    background: rgba(0, 0, 0, 0.2);
}

.plugin-remove_button .remove-single{
    align-items: center;
    background: #2f3a4c;
    border-radius: 100px;
    color: #fff;
    justify-content: center;
    padding: 2px 6px
}

.timer{
    display: flex;
}

.timer > *{
    flex: 1;
}

.cleat__timer__button{
    background-color: #202732;
    border-radius: 4px 0 0 4px;
    color: #fff;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 16px;
    text-align: center;
}

.timer__button{
    background-color: #2f3a4c;
    border-radius: 0;
    color: #fff;
    flex: 1;
}

.timer__label{
    align-items: center;
    border: 1px solid #2f3a4c;
    border-radius: 0 4px 4px 0;
    display: flex;
    font-size: 1.4em;
    font-weight: bold;
    justify-content: center;
    flex: 1;
}
input:disabled,
select:disabled,
.selectize-input.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.list-files{
    font-size: 12px;
    margin-top: 20px;
}

.list-files li{
    align-items: center;
    border: 1px solid #dfe6ec;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    padding: 2px 2px 2px 4px;
}

.list-files li button{
    background-color: #2f3a4c;
    color: #fff;
    font-size: 10px;
    margin-left: 6px;
    padding: 4px;
    height: 20px;
    width: 20px;
}

.list-files li span{
    overflow: hidden;
}

.dataTables_wrapper{
    min-height: 320px;
    overflow-x: auto;
}

.dataTables_wrapper .dataTables_processing{
    z-index: 9999999;
}


table.dataTable>tbody>tr.child ul.dtr-details{
    text-align: left;
    width: 100%;
}

.report__buttons{
    display: flex;
}

.report__buttons .main_button{
    margin-right: 10px;
    width: auto;
}

.form__item input[readonly] {
    background: #dfe6ec;
    color: #989ea6;
}

.form__item input[readonly]:focus {
    box-shadow: none;
    border: 1px solid #dfe6ec;
}

.chart canvas {
    width: 100%!important;
}

.badge-error {
    background-color: #ec7063;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
}

.badge-success {
    background-color: #52be80;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
}

.badge-pending {
    background-color: #99a3a4;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
}

.badge-checking {
    background-color: #eb984e;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
}

.badge-saving {
    background-color: #3498db;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
}

/** refresh icon start */
.button-refresh {
    left: 50%;
    top: 20%;
    cursor: pointer;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 1.105vw 0.205vw rgb(35, 47, 62);
    background-color: #232f3e;
    width: 7vw;
    height: 3vw;
    border-left: 0.4vw solid #b60ee5;
    border-radius: 0.315vw;
    font-weight: bolder;
    font-size: 1.1vw;
    line-height: 3vw;
    text-align: center;
    transition: 0.7s ease-in-out transform, 0.7s ease-in-out;
}

.button-refresh:hover {
    color: red;
    transition: 0.7s ease-in-out transform, 0.7s ease-in-out;
}
/** refresh icon end */