@font-face {
    font-family: "Roboto-Regular";
    src: url("../fonts/Roboto-Regular.eot");
    src: url("../fonts/Roboto-Regular.eot") format("embedded-opentype"),
        url("../fonts/Roboto-Regular.woff2") format("woff2"),
        url("../fonts/Roboto-Regular.woff") format("woff"),
        url("../fonts/Roboto-Regular.ttf") format("truetype"),
        url("../fonts/Roboto-Regular.svg#Roboto-Regular") format("svg");
}

@font-face {
    font-family: "Roboto-Bold";
    src: url("../fonts/Roboto-Bold.eot");
    src: url("../fonts/Roboto-Bold.eot") format("embedded-opentype"),
        url("../fonts/Roboto-Bold.woff2") format("woff2"),
        url("../fonts/Roboto-Bold.woff") format("woff"),
        url("../fonts/Roboto-Bold.ttf") format("truetype"),
        url("../fonts/Roboto-Bold.svg#Roboto-Bold") format("svg");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body,
html {
    min-height: 100vh;
    background: #f3f3f3;
    font: normal 14px Roboto-Regular, sans-serif;
    color: #151515;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

body {
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
}

a {
    color: #607d8b;
    text-decoration: none;
}

a:hover {
    color: #151515;
}

input[type="text"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="password"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 0 10px;
    font: normal 14px Roboto-Regular, sans-serif;
    border: none;
    outline: 1px solid #ddd;
    outline-offset: -1px;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    outline: 1px solid #bbb;
}

input[type="text"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="password"] {
    height: 35px;
    line-height: normal;
}

select {
    height: 35px;
    line-height: 35px;
}

select option[disabled] {
    background: #eee;
}

select option[data-group] {
    color: #000;
    background: #eee;
    font-family: Roboto-Bold, sans-serif;
    font-size: 13px;
    text-transform: uppercase;
}

input[type="submit"],
input[type="button"] {
    display: block;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    font: normal 12px Roboto-Regular, sans-serif;
    color: #fff;
    background: #2196f3;
    text-align: center;
    text-transform: uppercase;
    border: none;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

input[type="submit"]:hover,
input[type="button"]:hover {
    background: #607d8b;
}

input.error,
textarea.error,
select.error {
    outline: 1px solid #e13030 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2196f3;
    text-transform: uppercase;
    font-weight: normal;
    font-family: Roboto-Regular, sans-serif;
}

h1 {
    font-size: 30px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 26px;
}
h4 {
    font-size: 24px;
}
h5 {
    font-size: 22px;
}
h6 {
    font-size: 20px;
}

b,
strong {
    font-family: Roboto-Bold, sans-serif;
}

::-webkit-input-placeholder {
    color: #bbb;
}
::-moz-placeholder {
    color: #bbb;
}
:-moz-placeholder {
    color: #bbb;
}
:-ms-input-placeholder {
    color: #bbb;
}

::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    overflow: visible;
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
    min-height: 28px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
        inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}
::-webkit-scrollbar-track {
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, 0.07);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
        inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}

#msg {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    max-width: initial;
    height: 50px;
    top: 0;
    left: 0;
    padding: 0;
    color: #fff;
    background: #4eb127;
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    z-index: 101;
}

#msg[data-type="ok"] {
    background: #4eb127;
}
#msg[data-type="no"] {
    background: #d52e2e;
}

#head {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    justify-content: flex-end;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    color: #fff;
    background: #2196f3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 100;
}

#head .menu {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
}

#head .menu a {
    display: block;
    margin: 0 10px 0 0;
    padding: 2px 5px;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid transparent;
}

#head .menu a:hover {
    border-bottom: 1px solid #ddd;
}

#head .menu a.active {
    font-family: Roboto-Bold, sans-serif;
    border-bottom: 1px solid #fff;
}

#ico-vms {
    display: none;
    width: 27px;
    min-width: 27px;
    height: 20px;
    margin: 0 auto 0 0;
    background: url("/tmpl/images/ico-vms.png") center no-repeat;
    background-size: contain;
    cursor: pointer;
}

#head .notice {
    position: relative;
    width: 17px;
    min-width: 17px;
    height: 20px;
    margin: 0 0 0 20px;
    background: url("/tmpl/images/ico-bell.png") center no-repeat;
    background-size: contain;
    cursor: pointer;
}

#head .notice span {
    display: none;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background: #f44336;
    font-size: 9px;
    line-height: 15px;
    text-align: center;
    position: absolute;
    margin: 2px 0 0 11px;
}

#head .user {
    width: 150px;
    margin: 0 20px;
    font-size: 12px;
    text-align: right;
}

#head .user .type {
    color: #ddd;
}

#btn-logout {
    width: 60px;
    padding: 7px 0;
    font-size: 10px;
    background: #004a6d;
    text-align: center;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
}

#btn-logout:hover {
    background: #151515;
}

#content {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    max-width: 1600px;
}

#bar {
    display: none;
    flex-grow: 1;
    min-width: 270px;
    max-width: 400px;
    margin: 50px 0 0;
    background: #fff;
    box-shadow: -5px 0 7px -5px rgba(0, 0, 0, 0.5);
    z-index: 99;
    /*transition: 500ms;*/
}

#bar.showed {
    display: block;
}

#bar > .head {
    display: flex;
    align-items: center;
    position: fixed;
    top: 50px;
    height: 50px;
    background: #fff;
    box-shadow: 0 3px 5px -4px rgba(0, 0, 0, 0.8);
    z-index: 99;
}

#bar > .head h3 {
    padding: 0 20px;
    font-size: 18px;
    color: #004a6d;
}

#bar > .content {
    height: 300px;
    /*height: auto;*/
    /*margin: 50px 0 0;*/
    overflow-y: auto;
}

#bar .tasks {
    padding: 10px 15px;
}

#bar .tasks-header {
    padding: 10px 15px 0 15px;
    font-size: 14px;
    text-align: center;
}

#bar .task {
    padding: 10px 7px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
#bar .task:hover {
    background: #f3f3f3;
}
#bar .task[data-pro="1"] {
    background: #ffd4d4;
}

#bar .task .name {
    font-family: Roboto-Bold, sans-serif;
    font-size: 16px;
}

#bar .task .owner {
    padding: 5px 0 0;
    font-size: 12px;
    font-style: italic;
}

#bar .task .text {
    padding: 5px 0 0;
    font-size: 12px;
}

#bar .task .dates {
    display: flex;
    justify-content: space-between;
    padding: 7px 0 0;
}

#bar .task .dates .ended {
    color: #888;
}

#bar .task .actions {
    display: none;
    padding: 7px 0 0;
}

#bar .task .actions textarea {
    height: 50px;
    padding: 3px 5px;
    font-size: 12px;
}

#bar .task .actions .apply {
    margin: 7px 0 0 0;
}

#bar .quick-links {
    display: none;
    padding: 10px 20px;
    background: #f3f3f3;
}

#bar .quick-links a {
    display: block;
    padding: 3px 0;
    font-size: 12px;
}

#bar .quick-links a:hover {
    text-decoration: underline;
}

#bar .notices {
    padding: 10px 15px;
}

#bar .notice {
    position: relative;
    margin: 7px 0 0;
    padding: 10px 7px;
    background: #fff9bf;
    cursor: pointer;
    transition: 0.2s background;
}
#bar .notice.red {
    background: #ffb6b7;
}
#bar .notice[data-flick].red.flick {
    background: #fff9bf;
}
#bar .notice.blue {
    background: #d5eaff;
}
#bar .notice.green {
    background: #bdffbf;
}
#bar .notice.lila {
    background: #f0bfff;
}
#bar .notice:hover {
    background: #f3f3f3;
}

#bar .notice .name {
    font-family: Roboto-Bold, sans-serif;
    font-size: 14px;
}

#bar .notice .text {
    display: none;
    padding: 5px 0 0;
    font-size: 12px;
}

#bar .notice .text a {
    display: block;
    padding: 3px 0;
    font-size: 12px;
}

#bar .notice .text .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #888;
}
#bar .notice .text .actions a {
    padding: 3px 0;
}

#bar .notice .text .actions a.print {
    color: #419344;
}

#bar .notice .text .actions a.hide {
    color: #000;
}

#bar-btn {
    position: relative;
    width: 27px;
    min-width: 27px;
    height: 20px;
    margin: 0 0 0 20px;
    background: url("/tmpl/images/ico-tasks.png") center no-repeat;
    background-size: contain;
    cursor: pointer;
}

#tips-btn {
    position: relative;
    width: 27px;
    min-width: 27px;
    height: 20px;
    margin: 0 0 0 20px;
    background: url("/tmpl/images/question.png") center no-repeat;
    background-size: contain;
    cursor: pointer;
}

#bar #add-task {
    display: block;
    width: 150px;
    margin: 5px auto;
    text-align: center;
}

#reminders {
    padding: 10px 15px;
    border-top: 1px solid #bbb;
    margin: 15px 0 0;
}

#reminders .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 5px;
}

#reminders .head h3 {
    font-size: 18px;
}

#reminders .head p.add {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background: #4caf50;
    color: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s background;
}

#reminders .head p.add:hover {
    background: #316a35;
}

#reminders .form {
    display: none;
}

#reminders .form.shown {
    display: block;
}

#reminders .form textarea {
    padding: 5px 7px;
    font-size: 13px;
    height: 50px;
}

#reminders .form .fields {
    display: flex;
}

#reminders .form .fields input {
    padding: 0 7px;
}

#reminders .form .fields input[name="date"] {
    width: 65%;
}
#reminders .form .fields input[name="time"] {
    width: 35%;
}

#reminders .form .actions {
    margin: 7px 0;
}

#reminders .list .item {
    display: block;
    font-size: 13px;
    background: none;
    outline: none;
    padding: 7px 5px;
    margin: 0 -5px;
    cursor: pointer;
    transition: 0.3s background;
}

#reminders .list .item::after {
    content: "";
    clear: both;
    display: block;
}

#reminders .list .item p.created {
    font-size: 8px;
    color: #555;
}

#reminders .list .item p.title {
    display: none;
    padding: 3px 0;
    font-family: Roboto-Bold, sans-serif;
}
#reminders .list .item p.title.shown {
    display: block;
}

#reminders .list .item p.text {
    display: none;
    padding: 3px 0;
}
#reminders .list .item p.text.shown {
    display: block;
}

#reminders .list .item p.btn-remove {
    display: inline-block;
    float: right;
    font-size: 10px;
    color: #d52e2e;
    text-transform: uppercase;
    padding: 3px;
    transition: 0.3s;
    border-radius: 3px;
    cursor: pointer;
}

#reminders .list .item p.btn-remove:hover {
    background: #d52e2e;
    color: #fff;
}

#main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 50px 0 0;
    padding: 0 20px 20px 20px;
    background: #fff;
}

#main .ext-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 9px 0;
}

#main > .ext-menu {
    border-bottom: 1px solid #ddd;
}

#main .ext-menu a {
    display: block;
    font-family: Roboto, sans-serif !important;
    margin: 0 10px 0 0;
    padding: 5px;
    color: #607d8b !important;
    font-size: 14px !important;
    border-bottom: 1px solid transparent;
}

#main .ext-menu a.add {
    margin-left: auto !important;
    margin-right: 0 !important;
    font-family: Roboto-Bold, sans-serif !important;
    font-size: 16px !important;
    color: #4caf50 !important;
}
#main > .ext-head a.add {
    margin-left: auto;
    margin-right: 0;
    font-family: Roboto-Bold, sans-serif;
    font-size: 16px;
    color: #4caf50;
    white-space: nowrap;
}

#main .ext-menu a:hover {
    border-bottom: 1px solid #7e98a5;
}

#main .ext-menu a.active {
    font-family: Roboto-Bold, sans-serif !important;
    border-bottom: 1px solid #607d8b !important;
}

#main > .ext-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 13px 0;
}

#main > .ext-head h1 {
    flex-grow: 1;
    font-size: 20px;
}

#main > .ext-head a {
    font-family: Roboto-Bold, sans-serif;
    font-size: 17px;
    color: #4caf50;
}

#main > .ext-head a:hover {
    color: #607d8b;
}

#main > .ext {
    flex-grow: 1;
    width: 100%;
}

#notices {
    display: none;
    position: fixed;
    top: 50px;
    right: 20px;
    width: 300px;
    z-index: 100;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.7);
}

#notices::before {
    display: block;
    position: absolute;
    content: "";
    top: -13px;
    left: 37px;
    border: 5px solid transparent;
    border-bottom: 8px solid #fff;
}

#notices .item {
    padding: 7px 0;
    border-bottom: 1px solid #ddd;
}

#filter,#filter-repeated,#filter-project,#filter-online-courses  {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #f3f3f3;
    border-bottom: 1px solid #ddd;
}

#filter .sorts,#filter-repeated .sorts,#filter-project .sorts,#filter-online-courses .sorts {
    line-height: 30px;
}

.tasks-title {
    display: flex;
    justify-content: center;
    padding: 10px;
    font-size: 16px;
    background: #f3f3f3;
    border-bottom: 1px solid #ddd;
}

#filter .sorts span,#filter-repeated .sorts span,#filter-project .sorts span {
    display: inline-block;
    margin: 0 15px 0 0;
    color: #777;
    cursor: pointer;
}
#filter .sorts span[data-sort="1"],
#filter .sorts span[data-sort="2"],
#filter-repeated .sorts span[data-sort="1"],
#filter-repeated .sorts span[data-sort="2"],
#filter-project .sorts span[data-sort="1"],
#filter-project .sorts span[data-sort="2"]{
    color: #151515;
}

#filter .sorts span::before,#filter-repeated .sorts span::before,#filter-project .sorts span::before {
    content: "";
    display: block;
    position: relative;
    float: right;
}
#filter .sorts span[data-sort="2"]::before,#filter-repeated .sorts span[data-sort="2"]::before,#filter-project .sorts span[data-sort="2"]::before {
    margin: 12px 0 0 7px;
    border: 5px solid transparent;
    border-top: 8px solid #999;
}
#filter .sorts span[data-sort="1"]::before,#filter-repeated .sorts span[data-sort="1"]::before,#filter-project .sorts span[data-sort="1"]::before {
    margin: 7px 0 0 7px;
    border: 5px solid transparent;
    border-bottom: 8px solid #999;
}

#filter .filters,#filter-repeated .filters,#filter-project .filters {
    display: flex;
}

#filter select,
#filter input,
#filter-repeated select,
#filter-project select,
#filter-project input
#filter-repeated input{
    height: 30px;
    line-height: 30px;
}

#filter .multi-select,#filter-repeated .multi-select,#filter-project .multi-select {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 4px 10px;
    outline: 1px solid #ddd;
    outline-offset: -1px;
}

#filter .multi-select::after,#filter-repeated .multi-select::after,#filter-project .multi-select::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom: 6px solid #ddd;
    border-right: 6px solid #ddd;
}

#filter .multi-select > p,#filter-repeated .multi-select > p,#filter-project .multi-select > p {
    max-width: 150px;
    overflow-x: hidden;
    white-space: nowrap;
    cursor: pointer;
}

#filter .multi-select .items,#filter-repeated .multi-select .items,#filter-project .multi-select .items {
    display: none;
    position: absolute;
    top: 0;
    width: 250px;
    padding: 15px;
    background: #fff;
    left: -50px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 100;
}

#filter .multi-select .items.shown,#filter-repeated .multi-select .items.shown,#filter-project .multi-select .items.shown {
    display: block;
}

#filter .multi-select .items label,#filter-repeated .multi-select .items label,#filter-project .multi-select .items label {
    display: flex;
    align-items: center;
    padding: 3px 0;
    cursor: pointer;
    font-size: 13px;
}

#filter .multi-select .items label.group,#filter-repeated .multi-select .items label.group,#filter-project .multi-select .items label.group {
    font-family: Roboto-Bold, sans-serif;
}

#filter .multi-select .items label input,#filter-repeated .multi-select .items label input,#filter-project .multi-select .items label input {
    margin-right: 7px;
    height: auto;
    line-height: normal;
}

#filter .multi-select .items .btn,#filter-repeated .multi-select .items .btn,#filter-project .multi-select .items .btn {
    margin: 10px 0 0;
    background-color: #2196f3;
}
#filter .multi-select .items .btn:hover,#filter-repeated .multi-select .items .btn:hover,#filter-project .multi-select .items .btn:hover {
    background-color: #1c63a9;
}

.list .item {
    display: flex;
    padding: 7px 0;
    border-bottom: 1px solid #eee;
}

.list .item:hover {
    /*background: #fafafa;*/
    background: #e5f3ff !important;
    outline: 1px solid #ddd;
}

.list .item > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
    border-right: 1px solid #eee;
}

.list .item:hover > div {
    border-right: 1px solid #ddd;
}

.list .item > div.name a {
    font-size: 16px;
}

.list .item > div.name p {
    font-size: 12px;
}

.list .item > div .city {
    display: inline-block;
    width: max-content;
    color: #fff;
    margin: 2px 0;
    padding: 2px 4px;
    background: #2196f3;
    font-size: 10px !important;
    border-radius: 3px;
}

.list .item > div .city[data-city="1"] {
    background: #2196f3;
}
.list .item > div .city[data-city="2"] {
    background: #004a6d;
}
.list .item > div .city[data-city="3"] {
    background: #4caf50;
}
.list .item > div .city[data-city="4"] {
    background: #cd861c;
}
.list .item > div .city[data-city="5"] {
    background: #f44336;
}
.list .item > div .city[data-city="6"] {
    background: #c9b823;
}

.list .item .actions {
    min-width: 30px;
    padding: 0;
}

.list .item .btns {
    position: relative;
    width: 30px;
    height: 30px;
    background: url("/tmpl/images/item-actions.png") center center no-repeat;
    background-size: 15%;
    cursor: pointer;
}

.list .item .actions .btns > div {
    visibility: hidden;
    position: absolute;
    width: 150px;
    margin: 0 0 0 -120px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: 300ms;
    z-index: 1;
}

.list .item .actions .btns:hover > div {
    visibility: visible;
    opacity: 1;
}

.list .item .actions .btns > div a {
    display: block;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.ext-head .actions,
.ext-bottom .actions {
    display: flex;
    justify-content: flex-end;
}

.actions button {
    display: block;
    height: 30px;
    line-height: 30px;
    margin: 0 0 0 10px;
    padding: 0 15px 0 30px;
    color: #fff;
    font-size: 12px;
    background-image: url("/tmpl/images/actions.png");
    background-repeat: no-repeat;
    border: none;
    border-radius: 2px;
    outline: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease-in;
}
.actions button.apply {
    background-color: #27b184;
    background-position: 0 0;
}
.actions button.apply:hover {
    background-color: #1f8e6a;
}
.actions button.edit-task {
    background-color: #278ab1;
    background-position: 0 0;
}
.actions button.edit-task:hover {
    background-color: #1f8e6a;
}
.actions button.save {
    background-color: #4eb127;
    background-position: 0 -30px;
}
.actions button.save:hover {
    background-color: #39861a;
}
.actions button.close {
    background-color: #d52e2e;
    background-position: 0 -60px;
}
.actions button.close:hover {
    background-color: #7e1919;
}
.actions button.back {
    background-color: #999;
    background-position: 0 -90px;
}
.actions button.back:hover {
    background-color: #666;
}
.actions button.delete {
    background-color: #d52e2e;
    background-position: 0 -150px;
}
.actions button.delete:hover {
    background-color: #7e1919;
}
.actions button.cancel {
    background-color: #999;
    background-position: 0 -60px;
}
.actions button.cancel:hover {
    background-color: #777;
}

span.btn.add,
a.btn.add {
    background-color: #4eb127;
}
span.btn.add:hover,
a.btn.add:hover {
    background-color: #39861a;
}

span.btn.remove,
a.btn.remove {
    background-color: #d52e2e;
}
span.btn.remove:hover,
a.btn.remove:hover {
    background-color: #7e1919;
}

.section {
    display: flex;
    width: 100%;
}

.section-flex {
    display: flex;
    width: 100%;
}

.block {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.section.c2 .block {
    width: 50%;
}

.section.c2 > .block:first-child {
    padding: 0 15px 0 0;
    border-right: 1px solid #f3f3f3;
}

.section.c2 > .block:last-child {
    padding: 0 0 0 15px;
}

.block.c2 {
    flex-direction: row;
}

.block.c2 > .block:first-child {
    padding: 0 10px 0 0;
}

.block.c2 > .block:last-child {
    padding: 0 0 0 10px;
}

.block h2 {
    padding: 20px 0 0 0;
    font-size: 18px;
}

form.edit {
    flex-grow: 100;
}
form.edit .field {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #ebebeb;
}
form.edit .field.column {
    flex-direction: column;
}
form.edit .field > label {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 40%;
    min-width: 150px;
    line-height: 15px;
    padding: 0 15px 0 0;
    color: #777;
    box-sizing: border-box;
}
form.edit .field > label .label-helper {
    margin-top: 3px;
    font-size: 10px;
    font-style: italic;
    color: rgba(0, 0, 0, 0.5);
}
form.edit .field input,
form.edit .field select,
form.edit .field .switch,
form.edit .field .checkboxes {
    display: block;
    width: 60%;
    color: #333;
    box-sizing: border-box;
}
form.edit .field.f2 > input,
form.edit .field.f2 > .select,
form.edit .field.f2 > .switch,
form.edit .field.f2 > div {
    width: 30%;
}
form.edit .field input.min {
    width: 100px;
}
form.edit .field > input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}
form.edit input[type="submit"] {
    display: inline-block;
    width: 40%;
    height: 35px;
    line-height: 35px;
    margin: 15px 0;
    background: #222;
}
form.edit input[type="submit"]:hover {
    background: #4eb127;
}
form.edit textarea {
    width: 60%;
    height: 50px;
    padding: 5px 10px;
    font-size: 12px;
}
form.edit .text textarea {
    width: 100%;
    height: 100px;
}

form.edit input.error,
form.edit select.error,
form.edit textarea.error,
form.edit .select.error {
    outline: 1px solid #d52e2e;
}

form.edit div.error {
    position: absolute;
    margin: 20px 0 0 0;
    color: #d52e2e;
    font-size: 10px;
    text-transform: uppercase;
}

form.edit label div.error {
    position: relative;
    margin: 7px 0 0 0;
}

form.edit .field .switch,
.switch {
    display: flex;
}

form.edit .field.selectlist, form.edit .field.selectlistmain, form.edit .field.selectlist1, form.edit .field.selectlistonline, form.edit .field.selectlisttests {
    flex-wrap: wrap;
}

form.edit .field.selectlist .select, form.edit .field.selectlistmain .select, form.edit .field.selectlist1 .select, form.edit .field.selectlistonline .select, form.edit .field.selectlisttests .select {
    display: flex;
    align-items: center;
    width: 60%;
}

form.edit .field.selectlist .select .add, form.edit .field.selectlistmain .select .add, form.edit .field.selectlist1 .select .add, form.edit .field.selectlistonline .select .add, form.edit .field.selectlisttests .select .add  {
    margin: 0 0 0 10px;
}

form.edit .field.selectlist .list, form.edit .field.selectlistmain .list, form.edit .field.selectlist1 .list, form.edit .field.selectlistonline .list, form.edit .field.selectlisttests .list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

form.edit .field.selectlist .list p, form.edit .field.selectlistmain .list p, form.edit .field.selectlist1 .list p, form.edit .field.selectlistonline .list p, form.edit .field.selectlisttests .list p {
    display: flex;
    position: relative;
    margin: 10px 10px 0 0;
    padding: 5px 25px 5px 7px;
    color: #fff;
    background: #607d8b;
    border-radius: 2px;
    font-size: 10px;
}

form.edit .field.selectlist .list p span, form.edit .field.selectlistmain .list p span, form.edit .field.selectlist1 .list p span, form.edit .field.selectlistonline .list p span, form.edit .field.selectlisttests .list p span  {
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    width: 25px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
}

form.edit .field.selectlist .list p span:hover, form.edit .field.selectlistmain .list p span:hover, form.edit .field.selectlistonline .list p span:hover, form.edit .field.selectlisttests .list p span:hover {
    color: #f14500;
}

form.edit .field .checkboxes label {
    display: flex;
    align-items: center;
    padding: 7px 0 0;
    cursor: pointer;
    font-size: 12px;
}

form.edit .field .checkboxes label:first-child {
    padding: 0;
}

form.edit .field .checkboxes label input {
    width: 15px;
    min-width: 15px;
    height: 15px;
    margin: 2px 10px 0 0;
}

.switch span {
    display: flex;
    align-items: center;
    width: 50%;
    height: 35px;
    /*padding: 5px 10px 5px 0;*/
    cursor: pointer;
}

.switch span::before {
    content: "";
    display: block;
    float: left;
    width: 15px;
    height: 15px;
    margin: 0 10px 0 0;
    background: url("/tmpl/images/checkbox.png") top center no-repeat;
}

.switch span.checked::before {
    background-position: bottom center;
}

span.btn,
a.btn {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    color: #fff;
    background-color: #999;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in;
}
span.btn.add,
a.btn.add {
    background-color: #4eb127;
}
span.btn.add:hover,
a.btn.add:hover {
    background-color: #39861a;
}

#client-card,
#client-info,
#course-card,
#tips-card {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    z-index: 1000;
}

#client-card > div,
#course-card > div,
#tips-card > div {
    position: relative;
    width: 80%;
    max-width: 1000px;
    height: 80%;
    padding: 20px;
    background: #fff;
}

#client-info > div{
    position: relative;
    width: 80%;
    max-width: 500px;
    height: 50%;
    padding: 20px;
    background: #fff;
}

.client-program-button {
    display: block;
    height: 30px;
    line-height: 30px;
    margin: 0 0 0 10px;
    padding: 0 15px 0 15px;
    color: #fff;
    font-size: 12px;
    background-repeat: no-repeat;
    border: none;
    border-radius: 2px;
    outline: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease-in;
    background-color: #2196f3;
}

.client-program-button:hover {
    background-color: #15539c;
}

#client-card .content,
#client-info .content,
#course-card .content {
    height: 100%;
    overflow-y: auto;
}

#client-card .content iframe,
#client-info .content iframe,
#course-card .content iframe {
    width: 100%;
    height: 98%;
    border: none;
}

#client-card p.close,
#course-card p.close,
#client-info p.close,
#tips-card p.close {
    position: absolute;
    top: 0;
    left: 100%;
    cursor: pointer;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: -15px;
    background: #151515;
    border-radius: 15px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    z-index: 3;
}

#client-card.company .id {
    position: absolute;
    top: 10px;
    font-size: 12px;
    color: #888;
    user-select: text;
}

#client-card .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#client-card.company .head {
    position: relative;
    padding-left: 26px;
}

#client-card.company .head .state {
    position: absolute;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #bbb;
}

#client-card.company .head .state[data-state="1"] {
    background: #55a968;
}

#client-card.company .contacts {
    display: flex;
}

#client-card.company .contacts .column {
    display: flex;
    flex-direction: column;
    width: 30%;
    flex-grow: 1;
    padding: 0 15px;
    border-right: 1px solid #ddd;
}
#client-card.company .contacts .column:first-child {
    padding-left: 0;
}
#client-card.company .contacts .column:last-child {
    padding-right: 0;
    border-right: none;
}

#client-card.company .contacts .column .name {
    color: #2196f3;
    font-size: 18px;
    padding: 3px 0;
    margin: 0 0 2px;
}

#client-card.company .contacts .column a {
    padding: 3px 0;
    margin: 0 0 2px;
}

#client-card.company .contacts .column p {
    padding: 3px 0;
    margin: 0 0 2px;
}

#client-card.company .contacts .column p.note {
    font-size: 14px;
}

#client-card .head .name.loyalty-name-member {
    color: #ffc300;
}

#client-card .head .name.loyalty-name-eligible {
    color: #e6b800;
}


#client-card .head .name {
    display: block;
    flex-grow: 1;
    padding: 7px 0;
    color: #2196f3;
    font-size: 20px;
}

#client-card .head .pays {
    margin: 0 20px 0 0;
}

#client-card .head .created-pc {
    width: 110px;
    /*flex-grow: 1;*/
    font-size: 12px;
}

#client-card .head .pc {
    width: 100px;
    margin: 0 0 4px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
}

#client-card .head .pc .value {
    height: 15px;
    line-height: 15px;
    color: #151515;
    font-size: 10px;
    margin: -15px 0 0;
    text-align: center;
}

#client-card .head .pc .bar {
    height: 15px;
    background: url("/tmpl/images/client-pc.png") left center repeat-y;
}

#client-card .contacts {
    padding: 10px 0;
    display: flex;
    font-size: 16px;
}

#client-card .contacts a {
    margin: 0 30px 0 0;
}

#client-card .contacts a:hover {
    color: #151515;
    text-decoration: underline;
}

#client-card .fields-requests {
    display: flex;
}

#client-card .certificates {
    margin: 0 0 10px;
    padding: 10px;
    background: #eaffe2;
}

#client-card .certificates p {
    padding: 0 0 5px;
    text-transform: uppercase;
}

#client-card .certificates a {
    display: block;
    padding: 3px 0;
}

#client-card .fields-requests .contacts {
    display: block;
    padding: 0 0 0 20px;
}

#client-card .fields-requests .contacts h2 {
    font-size: 16px;
    padding: 0 0 5px;
}

#client-card .fields-requests .contacts p {
    font-size: 14px;
    padding: 0 0 5px;
    /*text-transform: uppercase;*/
}

#client-card .fields {
    width: 50%;
    font-size: 13px;
}

#client-card .fields p {
    padding: 7px 0;
    border-bottom: 1px solid #eee;
}

#client-card .fields p span {
    display: inline-block;
    width: 130px;
    margin: 0 10px 0 0;
    color: #888;
}

#client-card .fields p.balance b {
    color: #4caf50;
}

#client-card .fields p.balance.minus b {
    color: #d52e2e;
}

#client-card .fields div.balance {
    display: flex;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #eee;
}

#client-card .fields div.balance span {
    display: inline-block;
    width: 130px;
    margin: 0 10px 0 0;
    color: #888;
}

#client-card .fields div.balance input {
    display: none;
    font-size: 12px;
    height: 20px;
    width: 80px;
    margin: 0 0 0 10px;
    padding: 0 7px;
}

#client-card .fields div.balance .btn {
    width: max-content;
    color: #fff;
    margin: 0 5px;
    padding: 3px 4px;
    background: #dc7d56;
    font-size: 10px !important;
    border-radius: 3px;
    cursor: pointer;
}

#client-card .fields div.balance .btn.confirm {
    display: none;
    background: #2196f3;
}

#client-card .fields div.balance .btn.shown {
    display: block;
}

#client-card .fields div.balance .btn.hidden {
    display: none;
}

#client-card .fields div.balance b {
    color: #4caf50;
}

#client-card .fields div.promocode, #client-card .fields div.certificates-items, #client-card .fields div.genesis {
    display: flex;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #eee;
}

#client-card .fields div.promocode span, #client-card .fields div.certificates-items span, #client-card .fields div.genesis span {
    display: inline-block;
    width: 130px;
    margin: 0 10px 0 0;
    color: #888;
}

#client-card .fields div.promocode input, #client-card .fields div.certificates-items input, #client-card .fields div.genesis input {
    width: 100px;
    height: 25px;
}

#client-card .fields div.promocode .btn, #client-card .fields div.certificates-items .btn {
    width: max-content;
    color: #fff;
    margin: 0 5px;
    padding: 4px 5px;
    background: #4caf50;
    font-size: 11px !important;
    border-radius: 3px;
    cursor: pointer;
}

#client-card .fields div.promocode .btn:hover {
    background: #419345;
}

#client-card .requests {
    width: 50%;
    margin: 0 10px;
    font-size: 12px;
}

#client-card .requests .item {
    display: flex;
    padding: 3px 0;
    border-bottom: 1px solid #ddd;
}

#client-card .requests .item:hover {
    background: #daead3;
}

#client-card .requests .date {
    width: 70px;
    color: #555;
}

#client-card .requests .course {
    flex-grow: 1;
}

#client-card .requests .add {
    font-family: Roboto-Bold, sans-serif;
    font-size: 11px;
    color: #4caf50;
    cursor: pointer;
}

#client-card .block {
    margin: 20px 0 0;
    min-height: 100px;
}

#client-card .block > p {
    padding: 5px 0;
    border-bottom: 1px solid #bbb;
    color: #2196f3;
    text-transform: uppercase;
}

#client-card .block > p .add {
    display: block;
    float: right;
    margin: 0 10px 0 0;
    font-family: Roboto-Bold, sans-serif;
    font-size: 13px;
    color: #4caf50;
    cursor: pointer;
}

#client-card #course-form,#online-course-form {
    display: none;
    position: absolute;
    top: 70px;
    margin: 0 7%;
    width: 80%;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.7);
}

#client-card #course-form h2,#online-course-form h2  {
    padding: 0 0 10px;
    font-size: 18px;
}

#client-card #course-form .block,#online-course-form .block {
    margin: 0;
    min-height: 0;
}

#client-card #course-form .block,#online-course-form .block {
    margin: 0;
    min-height: 0;
}

#client-card #course-form select[name="course"],#online-course-form select[name="course"] {
    margin: 0 0 10px;
}

#client-card #course-form select[name="group"],#onlinecourse-form select[name="group"] {
    margin: 0 0 15px;
}

#client-card #course-form .field,#online-course-form .field {
    display: flex;
    align-items: center;
    margin: 0 0 15px;
}

#client-card #course-form .field label,#online-course-form .field label {
    width: 40%;
    color: #777;
}

#client-card #course-form select[name="sert"],#online-course-form select[name="sert"] {
    width: 100px;
}

#client-card #course-form .pay,#online-course-form .pay {
    display: flex;
    flex-wrap: wrap;
}

#client-card #course-form .pay label,#online-course-form textarea[name="note"] {
    width: 100%;
    padding: 0 0 7px 0;
    color: #2196f3;
    text-transform: uppercase;
}

#client-card #course-form textarea[name="note"],#online-course-form textarea[name="note"] {
    height: 100px;
    margin: 0 0 15px;
    padding: 5px 7px;
    font-size: 12px;
}

#client-card #course-form select[name="state"],#online-course-form select[name="state"] {
}

#client-card #course-form .pay input[name="pay_date"],#online-course-form .pay input[name="pay_date"] {
    width: 140px;
}

#client-card #course-form .pay input[name="pay_sum"],#online-course-form .pay input[name="pay_sum"] {
    width: 70px;
}

#client-card #online-course-form input[name="price_sum"] {
    width: 70px;
    margin-right: 5px;
}

#client-card #course-form .pay select[name="pay_type"],#online-course-form .pay select[name="pay_type"] {
    width: 100px;
}

#client-card #course-form .actions,#online-course-form .actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
}

#client-card #course-form .actions .save,#online-course-form .actions .save {
    background-color: #4eb127;
}

#client-card #course-form .actions .btn:hover,#online-course-form .actions .btn:hover {
    background: #222;
}

#client-card #course-form .price,#online-course-form .price {
    position: relative;
}

#client-card #course-form .price .dis,#online-course-form .price .dis {
    position: absolute;
    font-size: 7px;
    color: #fff;
    background: #f44336;
    border-radius: 8px;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    right: -16px;
    top: 1px;
}

#client-card #course-form .price .dis.ok,#online-course-form .price .dis.ok {
    background: #4eb127;
}

#client-card #questions-form {
    display: none;
    position: absolute;
    top: 0;
    margin: 0 7%;
    width: 80%;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.7);
}

#client-card #questions-form h2 {
    padding: 0 0 10px;
    font-size: 18px;
}

#client-card #questions-form .block {
    margin: 0;
    min-height: 0;
}

#client-card #questions-form .block{
    margin: 0;
    min-height: 0;
}

#client-card #questions-form select[name="course"] {
    margin: 0 0 10px;
}

#client-card #questions-form select[name="group"] {
    margin: 0 0 15px;
}

#client-card #questions-form .field {
    display: flex;
    align-items: center;
    margin: 0 0 15px;
}

#client-card #questions-form .field label {
    width: 40%;
    color: #777;
}

#client-card #questions-form select[name="sert"] {
    width: 100px;
}

#client-card #questions-form .pay {
    display: flex;
    flex-wrap: wrap;
}

#client-card #questions-form .pay label {
    width: 100%;
    padding: 0 0 7px 0;
    color: #2196f3;
    text-transform: uppercase;
}

#client-card #questions-form textarea[name="note"] {
    height: 100px;
    margin: 0 0 15px;
    padding: 5px 7px;
    font-size: 12px;
}

#client-card #questions-form select[name="state"] {
}

#client-card #questions-form .pay input[name="pay_date"]{
    width: 140px;
}

#client-card #questions-form .pay input[name="pay_sum"]{
    width: 70px;
}

#client-card #questions-form input[name="price_sum"] {
    width: 70px;
    margin-right: 5px;
}

#client-card #questions-form .pay select[name="pay_type"] {
    width: 100px;
}

#client-card #questions-form .actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
}

#client-card #questions-form .actions .save {
    background-color: #4eb127;
}

#client-card #questions-form .actions .btn:hover {
    background: #222;
}

#client-card #questions-form .price {
    position: relative;
}

#client-card #questions-form .price .dis {
    position: absolute;
    font-size: 7px;
    color: #fff;
    background: #f44336;
    border-radius: 8px;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    right: -16px;
    top: 1px;
}

#client-card #questions-form .price .dis.ok {
    background: #4eb127;
}

.rating-cancel{
    display: none!important;
}

#questions-form {
    font-size: 16px;
}

.profile {
    display: flex;
    flex-direction: column;
}

.from {
    display: flex;
    flex-direction: column;
}

.question-block {
    flex-direction: column;
}

.question-name {
    font-weight: bold;
    margin: 7px 0px;
}

#client-card .calls {
    position: relative;
    min-height: 180px;
    width: 50%;
    margin: 0 10px;
    padding: 10px;
    background: #eaffe2;
    font-size: 12px;
}

#client-card .calls h5 {
    padding: 0 0 4px;
    border-bottom: 1px solid #bbb;
    font-size: 12px;
    color: #2196f3;
    text-transform: uppercase;
}

#client-card .calls .list {
    height: 100px;
    font-size: 11px;
    overflow-y: auto;
}

#client-card .calls .list .call {
    padding: 3px 0;
    border-bottom: 1px solid #eee;
}

#client-card .calls .list .call .created {
    font-size: 10px;
    color: #888;
}

#client-card .calls .list .call .note {
    font-family: Arial, sans-serif;
    font-style: italic;
    color: #222;
}

#client-card .calls textarea {
    font-size: 12px;
    padding: 5px;
    width: 100%;
    height: 40px;
}

#client-card .calls .actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 0;
}

#client-card .calls .actions .btn-save {
    padding: 5px 7px;
    color: #fff;
    background: #55a968;
    font-size: 12px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
}

#client-card .calls .actions .btn-save:hover {
    background: #448750;
}

#client-card .calls .actions .add-remind {
    margin: 0 0 0 10px;
    padding: 5px 7px;
    color: #fff;
    background: #2f9cf3;
    font-size: 12px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
}

#client-card .calls .actions .add-remind-save:hover {
    background: #2b85d1;
}

#client-card .calls .reminder-form {
    display: none;
    position: absolute;
    width: 100%;
    background: #fff;
    /*margin-top: -25px;*/
    padding: 10px;
    left: 0px;
    box-shadow: 0 3px 10px -5px rgb(0 0 0 / 80%);
}

#client-card .calls .reminder-form.shown {
    display: block;
}

#client-card .calls .reminder-form textarea {
    padding: 5px 7px;
    font-size: 13px;
    height: 50px;
}

#client-card .calls .reminder-form .fields {
    display: flex;
    width: 100%;
}
#client-card .calls .reminder-form .fields input {
    padding: 0 7px;
}
#client-card .calls .reminder-form .fields input[name="date"] {
    width: 65%;
}
#client-card .calls .reminder-form .fields input[name="time"] {
    width: 35%;
}
#client-card .calls .reminder-form .actions {
    margin: 10px 0 0;
    padding: 0;
}

.client-courses {
}

#client-auto-actions {
    display: none;
    margin: 5px 0 20px;
}

#client-auto-actions.shown {
    display: block;
}

#client-pays {
    display: none;
    margin: 5px 0 20px;
}

#client-pays.shown {
    display: block;
}

.client-courses .item {
    display: flex;
    padding: 7px 0;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    color: #151515;
}

.client-courses .filter {
    display: flex;
    padding: 5px;
    background: #ddd;
    font-size: 12px;
}

.client-courses .filter select {
    height: 25px;
    line-height: 25px;
    width: 100px;
    padding: 0 5px;
    font-size: 12px;
}

.client-courses .filter select[name="course"] {
    width: 200px;
}

.client-courses .item.columns {
    font-family: Roboto-Bold, sans-serif;
    background: #eee;
    border-bottom: 1px solid #ddd;
}

.client-courses .item:hover {
    background: #f3f3f3;
}

.client-courses .columns > p,
.client-courses .item > div {
    padding: 0 5px;
}

.client-courses .columns > p {
    display: flex;
    align-items: center;
}

.client-courses .columns > p[data-order] {
    min-height: 18px;
    cursor: pointer;
}

.client-courses .columns > p[data-sort]::before {
    content: "";
    display: block;
}

.client-courses .columns > p[data-sort="1"]::before {
    margin: -5px 4px 0 0;
    border: 5px solid transparent;
    border-bottom: 8px solid #999;
}

.client-courses .columns > p[data-sort="2"]::before {
    margin: 5px 4px 0 0;
    border: 5px solid transparent;
    border-top: 8px solid #999;
}

.client-courses .item .name {
    width: 20%;
}

.client-courses .item .dates {
    width: 15%;
}

.client-courses .item .group {
    width: 15%;
}

.client-courses .item .sert {
    width: 10%;
}

.client-courses .item .note {
    width: 20%;
    flex-grow: 1;
}

.client-courses .item .pays {
    width: 20%;
}

.client-courses .item > .pay {
    width: 20%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.client-courses .item > .pay b {
    padding: 0 5px 0 0;
}

.client-courses .item .pays .pay {
    display: flex;
    flex-wrap: wrap;
    padding: 2px 0;
    font-size: 10px;
    cursor: pointer;
}

.client-courses .item .pays .pay .date {
    min-width: 50px;
    margin: 0 10px 0 0;
    color: #666;
}

.client-courses .item .actions {
}

.client-courses .item .actions .remove {
    padding: 5px;
    color: #e11a0c;
}

#client-services {
}

#client-services > .info {
    display: flex;
    margin: 5px -5px;
}

#client-services .info > div {
    flex-grow: 1;
    width: 30%;
    padding: 10px;
    background: #f1f1f1;
    margin: 5px;
}

#client-services .info > div > span {
    display: block;
    margin: -2px 0 0;
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
}
#client-services .info > div > p {
    padding: 5px 0 0;
    font-size: 11px;
}

#client-services .item {
    display: flex;
    padding: 7px 0;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    color: #151515;
}

#client-services .item > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5px;
    border-right: 1px solid #eee;
}

#client-services .item .time {
    width: 20%;
}
#client-services .item .name {
    width: 20%;
}
#client-services .item .doctor {
    width: 20%;
}
#client-services .item .price {
    width: 5%;
    min-width: 50px;
}
#client-services .item .price.red {
    color: red;
}
#client-services .item .note {
    width: 35%;
}

#vip-price-field {
    display: flex;
    margin: 10px 0 0;
    align-items: center;
}

#vip-price-field label {
    width: 70px;
    color: #029f25;
}
#vip-price-field input {
    width: 100px;
    height: 25px;
}

#client-card #video-form {
    display: none;
    position: absolute;
    top: 170px;
    margin: 0 18%;
    width: 60%;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 70px -10px rgb(0 0 0 / 70%);
}

#client-card #video-form h2 {
    padding: 0 0 10px;
    font-size: 18px;
}

#client-card #video-form select {
}

#client-card #video-form .actions {
    margin: 10px 0 0;
}

#client-card #video-form .actions .save {
    background-color: #4eb127;
}

#client-card #video-form .actions .close {
}

#client-card #video-form .actions .btn:hover {
    background: #222;
}

#task-window {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    z-index: 1000;
}

#task-window > div {
    position: relative;
    width: 80%;
    max-width: 1000px;
    height: 80%;
    padding: 20px;
    background: #fff;
}

#task-window .content {
    height: 100%;
    overflow-y: auto;
}

#task-window .content iframe {
    width: 100%;
    height: 98%;
    border: none;
}

#task-window p.close {
    position: absolute;
    top: 0;
    left: 100%;
    cursor: pointer;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: -15px;
    background: #151515;
    border-radius: 15px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    z-index: 3;
}

.bl-icon {
    width: 14px;
    height: 14px;
    background: #000;
    border-radius: 7px;
    margin: 0 2px 0 0;
    display: inline-block;
}

.rl-icon {
    width: 14px;
    height: 14px;
    background: #c3440c;
    border-radius: 7px;
    margin: 0 2px 0 0;
    display: inline-block;
}

#footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 20px;
    font-size: 12px;
    border-top: 1px solid #ddd;
    color: #9e9e9e;
}

#footer a {
    color: #2196f3;
}

#top-btn {
    display: none;
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 30px;
    right: 30px;
    line-height: 47px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    z-index: 100;
}

#top-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transition: 0.3s;
}

.helper {
    position: relative;
}
.helper > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #888;
    color: #fff;
}
.helper > div {
    position: absolute;
    width: 200px;
    padding: 10px;
    background: #fff;
    border: 1px solid #888;
    font-size: 12px;
    visibility: hidden;
    z-index: 100;
}
.helper:hover > div {
    visibility: visible;
}
#bar .notice .helper {
    position: absolute;
    right: 4px;
    top: 4px;
}
#bar .notice .helper > span {
    width: 12px;
    height: 12px;
    font-size: 8px;
}
#bar .notice .helper > div {
    right: 0;
}

.img-prof {
    flex-wrap: wrap;
    height: 250px;
    overflow: hidden;
}

.img-prof > div {
    display: flex;
    position: relative;
    width: 60%;
}

.img-prof img {
    display: block;
    height: 160px;
    margin: 15px auto 0 auto;
}

.balance-message {
    color: red;
    width: 100%;
    visibility: hidden;
}

#support .item {
    font-size: 12px;
}

#support .item[data-doc="1"] {
    background: #f3f3f3;
}

#support .item[data-state="1"] {
    background: #eaffe2;
}

#support .item .id {
    min-width: 50px;
}

#support .item .date {
    width: 150px;
}

#support .item .type {
    /*width: 100px;*/
}

#support .item .client {
    flex-grow: 1;
    width: 20%;
}

#support .item .text {
    flex-grow: 1;
    width: 30%;
}

#support .item .state {
    width: 150px;
}

#support .item .note {
    flex-grow: 1;
    width: 30%;
}

#support .item .note textarea {
    width: 100%;
    font-size: 12px;
    padding: 5px;
    min-height: 50px;
}

.project_tasks {
    display: none;
}

.project_toggle_accordeon {
    padding: 10px 7px;
    cursor: pointer;
    font-size: 16px;
    color: #278ab1;
    font-weight: bold;
}

#task-btn img{
    position: relative;
    width: 27px;
    min-width: 27px;
    height: 26px;
    margin: 0 0 0 20px;
    background-size: contain;
    cursor: pointer;
}

@media screen and (max-width: 350px) {

    .ext-head .actions {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .actions button.close {
        margin: 0;
    }

    .actions button.back {
        margin: 0;
    }

    .actions button {
        margin-bottom: 10px!important;
    }
}

@media screen and (max-width: 480px) {
    #main h1 {
        font-size: 15px;
    }

    #main .ext-head a {
        font-size: 15px;
        text-align: end;
    }


    #main > .ext-head {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        padding: 15px 0;
    }

    .actions button.save {
        margin: 0;
    }

    .ext-head .actions {
        margin-top: 10px;
    }

    .cancel-discount {
        flex-direction: column;
    }

    #filter .sorts span {
        margin: 0 7px 0 0;
    }
}

@media screen and (max-width: 450px) {

    #main > .ext-head h1 {
        font-size: 18px;
    }
    
    .fields-requests {
        width: 1000px;
    }

    .requests-contacts {
        width: 1000px;
    }

    .requests-contacts .column {
        width: 100% !important;
    }
    
    #client-card .block {
        width: 1000px;
    }
    
    #client-card .head .name {
        margin-top: 20px;
    }
    
    .back {
        display: none!important;
    }
}