/**
 * -----------------------------------------------------------------------------
 * --> Gonzocons
 * (http://www.gonzodesign.nl/gonzocons/)
 * -----------------------------------------------------------------------------
 */
@font-face {
    font-family: 'gonzocons';
    src: url('../lib/gonzocons/fonts/gonzocons.eot');
    src: url('../lib/gonzocons/fonts/gonzocons.eot#iefix') format('embedded-opentype'), url('../lib/gonzocons/fonts/gonzocons.ttf') format('truetype'), url('../lib/gonzocons/fonts/gonzocons.woff') format('woff'), url('../lib/gonzocons/fonts/gonzocons.svg#gonzocons') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'gonzocons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-antenna:before {
    content: "\e900";
}

.icon-archive:before {
    content: "\e901";
}

.icon-arrow-down:before {
    content: "\e902";
}

.icon-arrow-left:before {
    content: "\e903";
}

.icon-arrow-right:before {
    content: "\e904";
}

.icon-arrow-up:before {
    content: "\e905";
}

.icon-article:before {
    content: "\e906";
}

.icon-at:before {
    content: "\e907";
}

.icon-attachment:before {
    content: "\e908";
}

.icon-award:before {
    content: "\e909";
}

.icon-behance:before {
    content: "\e90a";
}

.icon-book:before {
    content: "\e90b";
}

.icon-bookmark:before {
    content: "\e90c";
}

.icon-brackets:before {
    content: "\e90d";
}

.icon-browser:before {
    content: "\e90e";
}

.icon-cart:before {
    content: "\e90f";
}

.icon-category:before {
    content: "\e910";
}

.icon-chat:before {
    content: "\e911";
}

.icon-check:before {
    content: "\e912";
}

.icon-close:before {
    content: "\e913";
}

.icon-cloud:before {
    content: "\e914";
}

.icon-code:before {
    content: "\e915";
}

.icon-coffee:before {
    content: "\e916";
}

.icon-commit:before {
    content: "\e917";
}

.icon-database:before {
    content: "\e918";
}

.icon-date:before {
    content: "\e919";
}

.icon-document:before {
    content: "\e91a";
}

.icon-down:before {
    content: "\e91b";
}

.icon-download:before {
    content: "\e91c";
}

.icon-dribbble:before {
    content: "\e91d";
}

.icon-email:before {
    content: "\e91e";
}

.icon-eye:before {
    content: "\e91f";
}

.icon-facebook:before {
    content: "\e920";
}

.icon-file:before {
    content: "\e921";
}

.icon-flickr:before {
    content: "\e922";
}

.icon-forbidden:before {
    content: "\e923";
}

.icon-garbage:before {
    content: "\e924";
}

.icon-gear:before {
    content: "\e925";
}

.icon-github:before {
    content: "\e926";
}

.icon-googleplus:before {
    content: "\e927";
}

.icon-graph:before {
    content: "\e928";
}

.icon-grid:before {
    content: "\e929";
}

.icon-hamburger:before {
    content: "\e92a";
}

.icon-heart:before {
    content: "\e92b";
}

.icon-home:before {
    content: "\e92c";
}

.icon-hourglass:before {
    content: "\e92d";
}

.icon-html5:before {
    content: "\e92e";
}

.icon-idea:before {
    content: "\e92f";
}

.icon-image:before {
    content: "\e930";
}

.icon-instagram:before {
    content: "\e931";
}

.icon-kebab:before {
    content: "\e932";
}

.icon-key:before {
    content: "\e933";
}

.icon-lab:before {
    content: "\e934";
}

.icon-left:before {
    content: "\e935";
}

.icon-like:before {
    content: "\e936";
}

.icon-link:before {
    content: "\e937";
}

.icon-linkedin:before {
    content: "\e938";
}

.icon-list:before {
    content: "\e939";
}

.icon-location:before {
    content: "\e93a";
}

.icon-map:before {
    content: "\e93b";
}

.icon-megaphone:before {
    content: "\e93c";
}

.icon-microphone:before {
    content: "\e93d";
}

.icon-mobile:before {
    content: "\e93e";
}

.icon-monitor:before {
    content: "\e93f";
}

.icon-music:before {
    content: "\e940";
}

.icon-network:before {
    content: "\e941";
}

.icon-paper:before {
    content: "\e942";
}

.icon-performance:before {
    content: "\e943";
}

.icon-phone:before {
    content: "\e944";
}

.icon-photo:before {
    content: "\e945";
}

.icon-pin:before {
    content: "\e946";
}

.icon-pinterest:before {
    content: "\e947";
}

.icon-portfolio:before {
    content: "\e948";
}

.icon-power:before {
    content: "\e949";
}

.icon-process:before {
    content: "\e94a";
}

.icon-project:before {
    content: "\e94b";
}

.icon-quote:before {
    content: "\e94c";
}

.icon-right:before {
    content: "\e94d";
}

.icon-rss:before {
    content: "\e94e";
}

.icon-search:before {
    content: "\e94f";
}

.icon-send:before {
    content: "\e950";
}

.icon-share:before {
    content: "\e951";
}

.icon-sitemap:before {
    content: "\e952";
}

.icon-skype:before {
    content: "\e953";
}

.icon-star:before {
    content: "\e954";
}

.icon-stats:before {
    content: "\e955";
}

.icon-tag:before {
    content: "\e956";
}

.icon-text:before {
    content: "\e957";
}

.icon-tool:before {
    content: "\e958";
}

.icon-tumblr:before {
    content: "\e959";
}

.icon-twitter:before {
    content: "\e95a";
}

.icon-up:before {
    content: "\e95b";
}

.icon-upload:before {
    content: "\e95c";
}

.icon-url:before {
    content: "\e95d";
}

.icon-user:before {
    content: "\e95e";
}

.icon-vector:before {
    content: "\e95f";
}

.icon-video:before {
    content: "\e960";
}

.icon-vimeo:before {
    content: "\e961";
}

.icon-wordpress:before {
    content: "\e962";
}

.icon-youtube:before {
    content: "\e963";
}

.icon-mycourses:before {
    content: '';
    display: inline-block;
    width: 60px;
    height: 26px;
    /* fill: #000000; NOT WORKING */
    background: url('../lib/gonzocons/SVGs 2.0/lesson_15399113.svg') no-repeat center center;
}

.icon-mycourses.icon-mycourses__white:before {
    background-image: url('../lib/gonzocons/SVGs 2.0/lesson_15399113_white.svg');
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

noscript {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    z-index: 1100;
    background-color: rgba(110, 5, 5, 0.69);
    color: #FFFFFF;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
}

.hidden {
    display: none !important;
}

body.no_scroll {
    overflow-y: hidden;
}

/* -----------------------------------------------------------------------------
* --> Semantic UI enhancement
* -----------------------------------------------------------------------------
*/
.ui.centered {
    text-align: center;
}

.ui.text.small {
    font-size: 0.8em;
}

.ui.page.dimmer,
.ui.modal {
    z-index: 2100;
}

.ui.menu:not(.vertical) > .menu.center {
    margin: 0 auto;
}

.ui.tabular.menu .item,
.ui.tabular.menu .item:hover,
.ui.top.attached.menu > .item:first-child {
    background-color: #a3bcc7;
    -webkit-border-radius: 0.28571429rem 0.28571429rem 0 0;
    -moz-border-radius: 0.28571429rem 0.28571429rem 0 0;
    border-radius: 0.28571429rem 0.28571429rem 0 0;
    margin-right: 3px;
}

.ui.tabular.menu .item.active,
.ui.tabular.menu .item:hover.active,
.ui.top.attached.menu > .item:first-child.active {
    background-color: #ffffff;
}

.checkbox_week {
    width: 35px;
    height: 35px;
    margin-top: 5px;
    margin-right: 10px;
    position: relative;
    -webkit-box-shadow: initital;
    -moz-box-shadow: initital;
    box-shadow: initital;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 18px !important;
    -moz-border-radius: 18px !important;
    border-radius: 18px !important;
    background-color: #2dade4;
    cursor: pointer;
    outline: 0;
    color: #ffffff;
}

.checkbox_week:after {
    content: '';
    display: block;
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    line-height: 35px;
    text-align: center;
}

.checkbox_week.checkbox_week_sat,
.checkbox_week.checkbox_week_sun {
    background-color: #f77066;
}

.checkbox_week:checked {
    background-color: #1b9bd2;
    -webkit-box-shadow: inset 0 0 0 3px #0085BF;
    -moz-box-shadow: inset 0 0 0 3px #0085BF;
    box-shadow: inset 0 0 0 3px #0085BF;
}

.checkbox_week:checked:before {
    content: '\f00c';
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    top: -4px;
    left: -4px;
    -webkit-border-radius: 9px !important;
    -moz-border-radius: 9px !important;
    border-radius: 9px !important;
    background-color: #0085BF;
    font-family: Icons;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
}

.checkbox_week.checkbox_week_sat:checked,
.checkbox_week.checkbox_week_sun:checked {
    background-color: #f55145;
    -webkit-box-shadow: inset 0 0 0 3px #F44336;
    -moz-box-shadow: inset 0 0 0 3px #F44336;
    box-shadow: inset 0 0 0 3px #F44336;
}

.checkbox_week.checkbox_week_sat:checked:before,
.checkbox_week.checkbox_week_sun:checked:before {
    background-color: #F44336;
}

.checkbox_week.checkbox_week_mon:after {
    content: 'пн';
}

.checkbox_week.checkbox_week_tue:after {
    content: 'вт';
}

.checkbox_week.checkbox_week_wed:after {
    content: 'ср';
}

.checkbox_week.checkbox_week_thu:after {
    content: 'чт';
}

.checkbox_week.checkbox_week_fri:after {
    content: 'пт';
}

.checkbox_week.checkbox_week_sat:after {
    content: 'сб';
}

.checkbox_week.checkbox_week_sun:after {
    content: 'вс';
}

.ui.dimmer.page {
    padding-top: 0;
}

.ui.droparea {
    position: relative;
    width: 100%;
    min-height: 200px;
    height: auto;
    background-color: #0085BF;
    -webkit-border-radius: 0.28571429rem;
    -moz-border-radius: 0.28571429rem;
    border-radius: 0.28571429rem;
    cursor: pointer;
}

.ui.droparea.small {
    min-height: 120px;
}

.ui.droparea:hover {
    background-color: #0093d3;
}

.ui.droparea:before {
    content: '\f0ee';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 42px;
    margin-left: -25px;
    margin-top: -31px;
    font-family: Icons;
    font-style: normal;
    font-weight: 400;
    font-size: 42px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 42px;
    text-align: center;
}

.ui.droparea:after {
    content: 'Перетащите файлы сюда';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.row__top {
    padding-top: 0 !important;
}

.row__top > .column {
    padding-top: 0;
}

.ui.animated.button .hidden.content,
.ui.animated.button .hidden.content {
    display: initial !important;
}

.ui.buttons .or:before {
    content: 'или';
}

.ui.card.card__green {
    background-color: #fcfff5;
    -webkit-box-shadow: 0 0 0 7px #a3c293 !important;
    -moz-box-shadow: 0 0 0 7px #a3c293 !important;
    box-shadow: 0 0 0 7px #a3c293 !important;
}

.ui.card.card__red {
    background-color: #fbf3f3;
    -webkit-box-shadow: 0 0 0 7px #9E1026, inset 0 0 200px 25px rgba(0, 0, 0, 0.1) !important;
    -moz-box-shadow: 0 0 0 7px #9E1026, inset 0 0 200px 25px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0 0 7px #9E1026, inset 0 0 200px 25px rgba(0, 0, 0, 0.1) !important;
}

.ui.form .field.colored.blue input,
.ui.form .field.colored.blue select,
.ui.form .field.colored.blue textarea {
    background-color: #2dade4;
    color: #ffffff;
}

.ui.form .field.bold input,
.ui.form .field.bold select,
.ui.form .field.bold textarea {
    font-weight: bold;
}

.ui.green.label {
    background-color: #4CAF50 !important;
}

.ui.selection.dropdown:disabled {
    background-color: #dadada;
}

/**
 * -----------------------------------------------------------------------------
 * <-- Semantic UI enhancement
 * -----------------------------------------------------------------------------
 */
/**
 * -----------------------------------------------------------------------------
 * --> C3 edits
 * -----------------------------------------------------------------------------
 */
.c3 {
    max-width: 97%;
}

.c3-line {
    stroke-width: 1px !important;
}

/**
 * -----------------------------------------------------------------------------
 * <-- C3 edits
 * -----------------------------------------------------------------------------
 */
::-webkit-scrollbar,
body ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #CCC;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #bababa;
}

::-webkit-scrollbar-track {
    background: #FFF;
    -webkit-box-shadow: none;
}

body {
    scrollbar-face-color: #CCC;
    scrollbar-track-color: #FFF;
}

html,
body,
.ui,
.ui.menu {
    font-family: Helvetica, Tahoma, Arial, sans-serif;
}

textarea {
    min-height: 50px;
}

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

.outlay {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
    min-height: 100%;
}

/*.outlay:before {
    position: fixed;
    content: '';
    width: 90px;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #0085BF;
    z-index: 1;
}*/

.outlay__nomenu:before {
    display: none;
}

.icon-container {
    display: inline-block;
}

.ui.button .gonz {
    font-size: 30px;
    position: absolute;
    margin-left: -32px;
    margin-top: -10px;
}

.ui.menu.secondary.head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    margin: 0;
    background-color: #2dade4;
    -webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
    z-index: 999;

    display: flex;
    flex-flow: row;
}

.ui.menu.secondary.head .item.logo {
    width: 90px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui.menu.secondary.head .item.logo.logo__dev a::before,
.ui.menu.secondary.head .item.logo.logo__dev a::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}

.ui.menu.secondary.head .item.logo.logo__dev a::before {
    content: 'dev';
    transform: translateY(15px);
    font-size: 10px;
    font-weight: initial;
    color: initial;
}

.ui.menu.secondary.head .item.logo.logo__dev a::after {
    width: 6px;
    height: 6px;
    background-color: #F00;
    border-radius: 3px;
    transform: translateX(8px) translateY(19px);
}

.ui.menu.secondary.head .item.logo img {
    width: 52px;
}

.ui.menu.secondary.head .left.menu.search {
    width: 55%;
}

.ui.menu.secondary.head .left.menu.search .item {
    width: 100%;
    margin-left: 0;
    padding-left: 3em;
}

.ui.menu.secondary.head .left.menu.search .item > .input input {
    border: 0;
}

.ui.menu.secondary.head .left.menu.search .ui.button {
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
    border-left: 1px solid #2dade4;
}

.ui.menu.secondary.head .item.account {
    margin-right: 3em;
}

.ui.menu.secondary.head .item.account .icon-container {
    background-color: #0085BF;
    width: 45px;
    height: 45px;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
}

.ui.menu.secondary.head .item.account .ava {
    width: 45px;
    height: 45px;
}

.ui.menu.secondary.head .item.account .gonz {
    background-color: #006591;
    padding: 5px;
    font-size: 24px;
    color: #ffffff;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
}

.ui.menu.secondary.head .item.account .user_time {
    padding-top: inherit;
    padding-right: inherit;
    text-align: center;
    margin-left: 10px;
    color: #ffffff;
    font-weight: normal;
}

.ui.menu.secondary.head .item.account .user_name {
    margin-left: 10px;
    color: #ffffff;
    font-weight: normal;
}

@media only screen and (max-width: 767px) {
    .ui.menu.secondary.head {
        position: absolute;
        height: 55px;
    }

    .ui.secondary.menu .item {
        padding: 0;
    }

    .ui.menu.secondary.head .item.logo {
        width: 20%;
    }

    .ui.menu.secondary.head .item.logo a {
        margin: 0 auto;
    }

    .ui.menu.secondary.head .item.logo img {
        width: 35px;
    }

    .ui.menu.secondary.head .left.menu.search {
        width: 60%;
    }

    .ui.menu.secondary.head .left.menu.search .item .ui.icon.input input {
        padding-right: 0 !important;
    }

    .ui.menu.secondary.head .right.menu {
        width: 20%;
    }

    .ui.menu.secondary.head .right.menu .header.item.account {
        margin: 0 auto;
        height: 45px;
    }

    .ui.menu.secondary.head .right.menu .user_name {
        display: none;
    }

    .ui.menu.secondary.head .left.menu.search .item {
        padding-left: 0;
    }

    .ui.menu.secondary.head .left.menu.search .ui.button span {
        display: none;
    }

    .ui.menu.secondary.head .item.account .icon-container {
        width: 35px;
        height: 35px;
    }

    .ui.menu.secondary.head .item.account .ava {
        width: 35px;
        height: 35px;
    }

    .page {
        padding-top: 55px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ui.menu.secondary.head {
        position: absolute;
        height: 55px;
    }

    .ui.secondary.menu .item {
        padding: 0;
    }

    .ui.menu.secondary.head .item.logo {
        width: 20%;
    }

    .ui.menu.secondary.head .item.logo a {
        margin: 0 auto;
    }

    .ui.menu.secondary.head .item.logo img {
        width: 35px;
    }

    .ui.menu.secondary.head .left.menu.search {
        width: 60%;
    }

    .ui.menu.secondary.head .left.menu.search .item .ui.icon.input input {
        padding-right: 0 !important;
    }

    .ui.menu.secondary.head .right.menu {
        width: 20%;
    }

    .ui.menu.secondary.head .right.menu .header.item.account {
        margin: 0 auto;
        height: 45px;
    }

    .ui.menu.secondary.head .right.menu .user_name {
        display: none;
    }

    .ui.menu.secondary.head .left.menu.search .item {
        padding-left: 0;
    }

    .ui.menu.secondary.head .left.menu.search .ui.button span {
        display: none;
    }

    .ui.menu.secondary.head .item.account .icon-container {
        width: 35px;
        height: 35px;
    }

    .ui.menu.secondary.head .item.account .ava {
        width: 35px;
        height: 35px;
    }

    .page {
        padding-top: 55px !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ui.menu.secondary.head {
        position: absolute;
        height: 55px;
    }

    .ui.secondary.menu .item {
        padding: 0;
    }

    .ui.menu.secondary.head .item.logo {
        width: 20%;
    }

    .ui.menu.secondary.head .item.logo a {
        margin: 0 auto;
    }

    .ui.menu.secondary.head .item.logo img {
        width: 35px;
    }

    .ui.menu.secondary.head .left.menu.search {
        width: 60%;
    }

    .ui.menu.secondary.head .left.menu.search .item .ui.icon.input input {
        padding-right: 0 !important;
    }

    .ui.menu.secondary.head .right.menu {
        width: 20%;
    }

    .ui.menu.secondary.head .right.menu .header.item.account {
        margin: 0 auto;
        height: 45px;
    }

    .ui.menu.secondary.head .right.menu .user_name {
        display: none;
    }

    .ui.menu.secondary.head .left.menu.search .item {
        padding-left: 0;
    }

    .ui.menu.secondary.head .left.menu.search .ui.button span {
        display: none;
    }

    .ui.menu.secondary.head .item.account .icon-container {
        width: 35px;
        height: 35px;
    }

    .ui.menu.secondary.head .item.account .ava {
        width: 35px;
        height: 35px;
    }

    .page {
        padding-top: 55px !important;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1919px) {
}

@media only screen and (min-width: 1920px) {
}


.lang {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ava {
    width: 350px;
    height: 350px;
    display: block;
    position: relative;
    background-position: center center;
    background-size: cover;
    -webkit-border-radius: 175px;
    -moz-border-radius: 175px;
    border-radius: 175px;
}

.ava.inline {
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.sidebar {
    position: relative;
    /* z-index: 1; */
    z-index: 101;
    background-color: #0085BF;
    width: 90px;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

/*@media only screen and (max-width: 767px) {
    width: 25%;
}*/

.sidebar .ui.menu {
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 90px;
}

.ui.inverted.menu {
    background-color: #0085BF;
}

.page .ui.card.card__no_bg > .overlay {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1
}

.page .ui.card.card__active > .overlay {
    visibility: visible;
}


.page .ui.card.card__no_bg,
.page .ui.cards > .card.card__no_bg {
    position: relative;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: transform 0.2s ease-out;
    -moz-transition: transform 0.2s ease-out;
    -ms-transition: transform 0.2s ease-out;
    -o-transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
}

.page .ui.card.card__no_bg:hover,
.page .ui.cards > .card.card__no_bg:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.page .ui.card.card__no_bg > .button,
.page .ui.cards > .card.card__no_bg > .button,
.page .ui.card.card__no_bg > .buttons,
.page .ui.cards > .card.card__no_bg > .buttons {
    margin: 0;
    width: 100%;
}


.ui.basic.modal .ui.card.card__no_bg .dropdown {
    color: #000000;
}

/*.ui.modal .ui.card.card__no_bg {
  -webkit-box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}

.ui.modal .ui.card.card__no_bg:hover {
  -webkit-box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}*/

.page .ui.card.card__transparent_group {
    color: rgba(255, 255, 255, 0.5);
    background-color: transparent;
    box-shadow: none;
    position: relative;
}

.page .ui.card.card__transparent_group .dropdown {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}

.page .ui.card.card__transparent_group:hover .dropdown {
    opacity: 1;
}

.page .ui.card.card__transparent_group .content h3 {
    margin: 0;
}

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

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

}

@media only screen and (min-width: 1200px) and (max-width: 1919px) {

}

@media only screen and (min-width: 1920px) {

}


.page .ui.card.card__transparent_group .content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.page .ui.card.card__transparent_group .content a {
    position: relative;
    /*top: 50%;*/
    /*left: 50%;*/
    color: rgba(255, 255, 255, 0.5);
    /*transform: translate(-50%, -50%);*/
}

.page .ui.card.card__transparent_group .content a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.page .ui.card.card__create_group {
    /*background-color: rgba(255, 255, 255, 0.3);*/
    background-color: transparent;
    min-height: 250px;
    box-shadow: none;
}

.page .ui.card.card__create_group .content {
    color: #ffffff;
    position: relative;
}

.page .ui.card.card__create_group .content a {
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
}

.page .ui.card.card__create_group .content a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.main_menu {
    padding-top: 90px;
}

@media only screen and (max-width: 767px) {
    .main_menu {
        padding-top: 52px;
        transition: width 0.5s;
    }

    .page {
        padding-top: 52px !important;
    }

    .page_inner {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0.5em 0 7em !important;
    }

    .sidebar {
        transition: width 0.5s;
    }

    .main_menu--collapsed a .item, .main_menu--collapsed .item__burger__visible {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .main_menu {
        padding-top: 52px;
        transition: width 0.5s;
    }

    .main_menu--collapsed a .item, .main_menu--collapsed .item__burger__visible {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .page_inner {
        margin-left: 1em !important;
        margin-right: 1em !important;
        padding: 0.5em 0 7em !important;
    }

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main_menu--collapsed a .item, .main_menu .item__burger__visible {
        display: none !important;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1919px) {
    .main_menu--collapsed a .item, .main_menu .item__burger__visible {
        display: none !important;
    }
}

@media only screen and (min-width: 1920px) {
    .main_menu--collapsed a .item, .main_menu .item__burger__visible {
        display: none !important;
    }
}


.main_menu .header {
    margin-bottom: 0 !important;
}

.main_menu .header .gonz {
    display: block;
    font-size: 30px;
    text-align: center;
}

.main_menu .item > .menu {
    margin-top: 0 !important;
}

.main_menu .item {
    padding-top: 8px !important;
    padding-bottom: 5px !important;
    border-bottom: 1px solid #006591;
}

.main_menu .menu .item {
    font-size: .85714286em;
    text-align: center;
    border-bottom: 0;
}

.ui.vertical.menu .item.item__burger {
    cursor: pointer;
    display: none;
}

.page {
    position: relative;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    background-color: #006591;
    padding-top: 90px;
}

.page_inner {
    margin-left: 1em;
    margin-right: 1em;
    width: auto !important;
    padding: 1em 0 2em;
}

.header.page_header {
    color: #ffffff;
}

.header.page_header.header__visible {
    display: initial!important;
}

.header.page_header .sub {
    display: inline-block!important;
    padding: 0.25em 0.5em!important;
    border-radius: 1em;
}

.header__black .sub {
    background-color: #000000;
}

.bg_helper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.graph_block {
    position: relative;
    height: 100%;
}

.graph_block__red {
    background-color: #9E1026;
}

.graph_block__blue {
    background-color: #006591;
}

.graph_block__dark {
    background-color: #5e5e5e;
}

.graph_block__red,
.graph_block__blue,
.graph_block__green,
.graph_block__dark {
    color: #ffffff;
}

.graph_block__red .ui.header,
.graph_block__blue .ui.header,
.graph_block__green .ui.header,
.graph_block__dark .ui.header,
.graph_block__red .ui.small.statistic > .value,
.graph_block__blue .ui.small.statistic > .value,
.graph_block__green .ui.small.statistic > .value,
.graph_block__dark .ui.small.statistic > .value,
.graph_block__red .ui.small.statistic > .label,
.graph_block__blue .ui.small.statistic > .label,
.graph_block__green .ui.small.statistic > .label,
.graph_block__dark .ui.small.statistic > .label {
    color: #ffffff;
}

.graph_block ul {
    margin: 0;
    padding: 0 0 0 1rem;
}

.graph_block i.icon {
    font-size: 48px;
    line-height: 100%;
}

.graph_block .button i.icon {
    font-size: inherit;
}

.graph_block.file {
    position: relative;
}

.graph_block.file .content {
    position: relative;
    overflow: hidden;
}

.graph_block.file .name {
    max-width: 100%;
    font-size: 12px;
    margin-top: 10px;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.graph_block.file .delete {
    cursor: pointer;
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 1;
    opacity: .8;
    font-size: 1.25em;
    color: #282828;
    width: 2.25rem;
    height: 2.25rem;
    padding: .625rem 0 0 0;
}

.page__hasbg {
    background: #DADADA url('../images/login-bg.jpg') no-repeat top center;
    background-size: cover;
}

.page__hasbg .page {
    background-color: initial;
}

.bg_helper {
    background-color: rgba(0, 0, 0, 0.75);
}

/**
 * -----------------------------------------------------------------------------
 * --> Login Page
 * -----------------------------------------------------------------------------
 */
.page__login {
    background: #DADADA url('../images/login-bg.jpg') no-repeat top center;
    background-size: cover;
}

.page__login > .grid {
    height: 100%;
}

.page__login .column__login {
    margin-top: 50px;
}

.page__login .column__login .logo {
    padding: 8px 18px;
    background-color: #FFFFFF;
    border-radius: 40px;
    margin-bottom: 2rem;;
}

.page__login .ui.stacked.segment.register_form .icon.arrow.left {
    position: absolute;
    left: 10px;
}

.page__login .image {
    /* margin-top: -50px !important; */
    width: 220px!important;
}

.page__login .column {
    max-width: 450px;
}

.page__login .ui.header > .image:not(.icon),
.page__login .ui.header > img {
    /* width: 110px; */
}

/**
 * -----------------------------------------------------------------------------
 * <-- Login Page
 * -----------------------------------------------------------------------------
 */
/**
 * -----------------------------------------------------------------------------
 * --> Companies list
 * -----------------------------------------------------------------------------
 */
.companies_list .ui.fluid.card .image {
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .companies_list .ui.fluid.card .content .header {
        font-size: 0.8rem;
    }

    .companies_list .ui.card .content .meta, .companies_list .ui.card .content .description {
        font-size: 0.8rem;
    }

    .companies_list .ui.card .image {
        height: 80px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .companies_list .ui.card .content .header {
        font-size: 0.9rem;
    }

    .companies_list .ui.card .content .meta, .companies_list .ui.card .content .description {
        font-size: 0.8rem;
    }

    .companies_list .ui.card .image {
        height: 100px;
    }

    .companies_list .ui.card a.button {
        font-size: .78571429rem;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .companies_list .ui.card .content .header {
        font-size: 1rem;
    }

    .companies_list .ui.card .content .meta, .companies_list .ui.card .content .description {
        font-size: 0.9rem;
    }

    .companies_list .ui.card .image {
        height: 160px;
    }

    .companies_list .ui.card a.button {
        font-size: .85714286rem;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1919px) {
    .companies_list .ui.card .content .header {
        font-size: 1.28571429rem;
    }

    .companies_list .ui.card .content .meta, .companies_list .ui.card .content .description {
        font-size: 0.9rem;
    }

    .companies_list .ui.card .image {
        height: 180px;
    }

    .companies_list .ui.card a.button {
        font-size: .92857143rem;
    }
}

@media only screen and (min-width: 1920px) {
    .companies_list .ui.card .content .header {
        font-size: 1.28571429rem;
    }

    .companies_list .ui.card .content .meta, .companies_list .ui.card .content .description {
        font-size: 1rem;
    }

    .companies_list .ui.card .image {
        height: 200px;
    }

    .companies_list .ui.card a.button {
        font-size: 1rem;
    }
}

.companies_list .ui.card .content ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.companies_list .ui.card .image {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.companies_list .ui.card .card_footer {
    margin-top: 20px;
}

.companies_list .ui.card > .image,
.companies_list .ui.cards > .card > .image {
    border-top: 1px solid rgba(34, 36, 38, 0.1);
}

.cards.companies_list {
    margin-top: 10px;
}

.cards.companies_list .card_footer {
    /*padding-bottom: 80px !important;*/
}

.cards.companies_list .card {
    margin-bottom: 1.5em !important;
}

/**
 * -----------------------------------------------------------------------------
 * <-- Companies list
 * -----------------------------------------------------------------------------
 */
/**
 * -----------------------------------------------------------------------------
 * --> Project
 * -----------------------------------------------------------------------------
 */
.project {
    min-height: 100%;
    margin-top: 0 !important;
    margin-bottom: -90px !important;
    background-color: #f3f3f3;
}

.project_info {
    background-color: #2dade4;
    position: fixed !important;
    height: 100%;
    padding: 0 0 90px !important;
    left: 90px;
    overflow-y: auto;
}

.project_info .ui.header {
    margin: 0;
    padding: 1rem;
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

@-moz-keyframes project_notification {
    0% {
        -webkit-box-shadow: 0 0 0 3px #006591;
        -moz-box-shadow: 0 0 0 3px #006591;
        box-shadow: 0 0 0 3px #006591;
    }
    50% {
        -webkit-box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
        -moz-box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
        box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
    }
    51% {
        -webkit-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
        -moz-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
        box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
        -moz-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
        box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
    }
}

@-webkit-keyframes project_notification {
    0% {
        -webkit-box-shadow: 0 0 0 3px #006591;
        -moz-box-shadow: 0 0 0 3px #006591;
        box-shadow: 0 0 0 3px #006591;
    }
    50% {
        -webkit-box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
        -moz-box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
        box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
    }
    51% {
        -webkit-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
        -moz-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
        box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
        -moz-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
        box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
    }
}

@-o-keyframes project_notification {
    0% {
        -webkit-box-shadow: 0 0 0 3px #006591;
        -moz-box-shadow: 0 0 0 3px #006591;
        box-shadow: 0 0 0 3px #006591;
    }
    50% {
        -webkit-box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
        -moz-box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
        box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
    }
    51% {
        -webkit-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
        -moz-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
        box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
        -moz-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
        box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
    }
}

@keyframes project_notification {
    0% {
        -webkit-box-shadow: 0 0 0 3px #006591;
        -moz-box-shadow: 0 0 0 3px #006591;
        box-shadow: 0 0 0 3px #006591;
    }
    50% {
        -webkit-box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
        -moz-box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
        box-shadow: 0 0 0 150px rgba(0, 101, 145, 0);
    }
    51% {
        -webkit-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
        -moz-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
        box-shadow: 0 0 0 3px rgba(0, 101, 145, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
        -moz-box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
        box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.25);
    }
}

.project_menu ul {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.project_menu ul li {
    position: relative;
    list-style-type: none;
    overflow: hidden;
}

.project_menu ul li:last-child a {
    border-bottom: 0;
}

.project_menu ul li.has_notification:after {
    content: '';
    display: block;
    position: absolute;
    width: 11px;
    height: 11px;
    top: 50%;
    margin-top: -6px;
    right: 15px;
    background-color: #ffffff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    opacity: 1.0;
    -webkit-box-shadow: 0 0 0 3px #006591;
    -moz-box-shadow: 0 0 0 3px #006591;
    box-shadow: 0 0 0 3px #006591;
    z-index: 1;
    -webkit-animation: project_notification 2s ease-in infinite;
    -moz-animation: project_notification 2s ease-in infinite;
    -o-animation: project_notification 2s ease-in infinite;
    animation: project_notification 2s ease-in infinite;
}

.project_menu ul li.active a {
    -webkit-box-shadow: inset 5px 0 0 rgba(255, 255, 255, 0.75);
    -moz-box-shadow: inset 5px 0 0 rgba(255, 255, 255, 0.75);
    box-shadow: inset 5px 0 0 rgba(255, 255, 255, 0.75);
}

.project_menu ul li.goto a {
    font-weight: bold;
    -webkit-box-shadow: inset 5px 0 0 #f77066;
    -moz-box-shadow: inset 5px 0 0 #f77066;
    box-shadow: inset 5px 0 0 #f77066;
}

.project_menu ul a {
    display: block;
    width: 100%;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

.project_menu ul a:hover {
    background-color: #1da5e0;
}

.project_menu .disabled-menu a {
    cursor: default;
    opacity: 0.3;
}

.project_company_logo {
    position: relative;
    width: 100%;
    height: 200px;
    background: #cccccc no-repeat center center;
    background-size: cover;
}

.project_company_logo img {
    width: 100%;
    height: 100%;
}

.project_company_status {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.project_page {
    margin-left: 25%;
    padding: 2rem 3rem 1rem 4rem !important;
}

@media only screen and (max-width: 767px) {
    .project {
        margin-left: -2em !important;
        margin-right: -2em !important;
    }
}

/**
 * -----------------------------------------------------------------------------
 * <-- Project
 * -----------------------------------------------------------------------------
 */
/* -----------------------------------------------------------------------------
* --> Project chat
* -----------------------------------------------------------------------------
*/
.chat .ava,
.chat .ava img {
    width: 45px;
    height: 45px;
    margin: 0 auto;
    text-align: center;
}

.chat_leftside {
    width: 90px;
    height: 100%;
    overflow-y: auto;
    background-color: #006591;
    padding-bottom: 110px;
}

.chat_leftside .chat_user {
    width: 90px;
    height: 90px;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #004c6d;
    position: relative;
    cursor: pointer;
}

.chat_leftside .has_notification {
    position: absolute;
    width: auto;
    min-width: 15px;
    height: 15px;
    padding: 2px 3px 2px 1px;
    top: 57px;
    left: 50%;
    font-size: 11px;
    line-height: 11px;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    background-color: #F44336;
    color: #ffffff;
    text-align: center;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 0 4px #006591;
    -moz-box-shadow: 0 0 0 4px #006591;
    box-shadow: 0 0 0 4px #006591;
}

.chat_leftside .username {
    position: absolute;
    width: 70px;
    padding: 5px;
    left: -9999px;
    margin-top: 5px;
    font-size: 11px;
    line-height: 100%;
    background-color: #ffffff;
    -webkit-border-radius: 0.28571429rem;
    -moz-border-radius: 0.28571429rem;
    border-radius: 0.28571429rem;
    -webkit-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
    -moz-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
    z-index: 2;
}

.chat_leftside .username:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 25px;
    margin-top: -20px;
    border: 10px solid transparent;
    border-bottom-color: #ffffff;
}

.chat_leftside .chat_user:hover .username {
    left: 10px;
}

.chat_leftside :last-child {
    border-bottom: 0;
}

.chat_user__tech {
    background-color: #005a82;
    height: 115px !important;
}

.chat_user__tech .username {
    position: relative;
    width: 70px;
    padding: 0;
    left: -10px;
    margin-top: 10px;
    font-size: 11px;
    line-height: 100%;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.chat_user__tech .username:before {
    display: none;
}

.chat_user__tech:hover .username {
    left: -10px !important;
}

.chat_user__tech .has_notification {
    -webkit-box-shadow: 0 0 0 4px #005a82;
    -moz-box-shadow: 0 0 0 4px #005a82;
    box-shadow: 0 0 0 4px #005a82;
}

.chat_user__resp .ava {
    -webkit-box-shadow: 0 0 0 4px #4CAF50;
    -moz-box-shadow: 0 0 0 4px #4CAF50;
    box-shadow: 0 0 0 4px #4CAF50;
}

.chat_user__resp .username {
    background-color: #3d8b40;
    color: #ffffff;
    -webkit-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.35);
    -moz-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.35);
    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.35);
}

.chat_user__resp .username:before {
    border-bottom-color: #3d8b40;
}

.chat_user__resp .username hr {
    border-color: #ffffff;
}

.chat_user__resp .has_notification {
    background-color: #4CAF50;
}

.chat_user__online .ava:after {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    top: 1px;
    right: 1px;
    background-color: #66d66b;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 0 4px #006591;
    -moz-box-shadow: 0 0 0 4px #006591;
    box-shadow: 0 0 0 4px #006591;
    z-index: 1;
}

.chat_mainwindow {
    position: absolute;
    padding-left: .28571429rem;
    width: 100%;
    height: 100%;
    padding-left: 90px;
    padding-top: 90px;
    top: 0;
    background-color: #ffffff;
}

.chat_messages_outer {
    position: absolute;
    height: 100%;
    padding-top: 90px;
    top: 0;
    padding-bottom: 100px;
}

.chat_messages {
    height: 100%;
    overflow-y: auto;
    background-color: #e2f4fb;
    padding-bottom: 15px;
}

.chat_message {
    position: relative;
    width: 80%;
    min-width: 150px;
    margin: 15px 80px;
    padding: 15px;
    background-color: #ffffff;
    -webkit-border-radius: 0.28571429rem 0.28571429rem 0.28571429rem 0;
    -moz-border-radius: 0.28571429rem 0.28571429rem 0.28571429rem 0;
    border-radius: 0.28571429rem 0.28571429rem 0.28571429rem 0;
    -webkit-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
    -moz-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
}

.chat_message_tail {
    position: absolute;
    width: 30px;
    height: 30px;
    left: -30px;
    bottom: 0px;
    overflow: hidden;
}

.chat_message_tail:before {
    content: '';
    display: block;
    position: absolute;
    width: 60px;
    height: 60px;
    left: -30px;
    top: -30px;
    -webkit-box-shadow: 0 0 0 20px #ffffff;
    -moz-box-shadow: 0 0 0 20px #ffffff;
    box-shadow: 0 0 0 20px #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.chat_message_meta {
    width: 100%;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.chat_message_meta .chat_user {
    float: left;
}

.chat_message_meta .chat_user .username {
    font-size: 12px;
}

.chat_message_meta .chat_date {
    font-size: 12px;
    color: #a9a9a9;
    float: right;
}

.chat_message_meta:before,
.chat_message_meta:after {
    content: " ";
    display: table;
}

.chat_message_meta:after {
    clear: both;
}

.chat_date_time {
    margin-left: 10px;
    color: #5e5e5e;
}

.chat_message_owned {
    margin-left: auto;
    right: 0;
    background-color: #f3f3f3;
    -webkit-border-radius: 0.28571429rem 0.28571429rem 0 0.28571429rem;
    -moz-border-radius: 0.28571429rem 0.28571429rem 0 0.28571429rem;
    border-radius: 0.28571429rem 0.28571429rem 0 0.28571429rem;
}

.chat_message_owned .chat_message_tail {
    left: auto;
    right: -30px;
}

.chat_message_owned .chat_message_tail:before {
    left: auto;
    right: -30px;
    -webkit-box-shadow: 0 0 0 20px #f3f3f3;
    -moz-box-shadow: 0 0 0 20px #f3f3f3;
    box-shadow: 0 0 0 20px #f3f3f3;
}

.chat_message_owned .ava {
    left: auto !important;
    right: -55px;
}

.chat_message .ava {
    position: absolute;
    bottom: 5px;
    left: -52px;
    z-index: 2;
}

.chat_typewindow {
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 0;
    left: 0;
    padding-left: 180px;
}

.chat_typewindow_textbox {
    width: 100%;
    height: 100%;
    position: relative;
    border-top: 1px solid #a9a9a9;
    padding-right: 100px;
}

.chat_typewindow_textbox textarea {
    width: 100%;
    height: 100%;
    padding: 15px;
    resize: none;
    border: 0;
    outline: none;
}

.chat_typewindow_rightside {
    position: absolute;
    bottom: 0;
    right: 0;
}

.chat_typewindow_rightside .chat_button {
    border: 0;
}

.chat_typewindow_rightside .chat_button_send {
    width: 70px;
    height: 70px;
    position: absolute;
    display: block;
    bottom: 15px;
    right: 15px;
    margin: 0;
    padding: 0 !important;
    text-align: center;
    font-size: 36px;
    line-height: 75px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.chat_typewindow_rightside .chat_button_send:before {
    content: '\f1d8';
    font-family: Icons;
    text-align: center;
}

.chat_typewindow_rightside .chat_button_send:hover,
.chat_typewindow_rightside .chat_button_send:active {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
* <-- Project chat
* -----------------------------------------------------------------------------
*/
/* -----------------------------------------------------------------------------
* --> KPI Table
* -----------------------------------------------------------------------------
*/
.ui.table.kpi_table__old {
    background-color: #eaeaea;
}

.ui.table.kpi_table td {
    text-align: center;
}

.ui.table.kpi_table tr td:first-child {
    text-align: left;
}

.kpi_table .kpi_value {
    padding: 2px .28571429rem;
    cursor: pointer;
    font-size: 10px;
    width: 75px;
    height: 30px;
    line-height: 25px;
    margin: 0 auto 1em;
}

.kpi_table .kpi_violated {
    background-color: #9E1026;
    /*background-color: #cccccc;*/
    color: #ffffff;
    -webkit-border-radius: 0.28571429rem;
    -moz-border-radius: 0.28571429rem;
    border-radius: 0.28571429rem;
}

.kpi_table .kpi_over {
    background-color: #4CAF50;
    color: #ffffff;
    -webkit-border-radius: 0.28571429rem;
    -moz-border-radius: 0.28571429rem;
    border-radius: 0.28571429rem;
}

.kpi_table .kpi_zero {
    background-color: #04f1f1;
    color: #000000;
    -webkit-border-radius: 0.28571429rem;
    -moz-border-radius: 0.28571429rem;
    border-radius: 0.28571429rem;
}

.kpi_table_titles p {
    height: 23px;
}

.project__kpis .ui.accordion {
    width: 100%;
}

.project__kpis .ui.accordion .title {
    font-size: 1.28571429rem;
    color: #a9a9a9;
}

.project__kpis .ui.accordion .title.new {
    color: #000000;
}

.project__kpis .current_statistics .month,
.project__kpis .date_filter_dropdown {
    background-color: rgba(77, 77, 219, 0.15)!important;
}

/* -----------------------------------------------------------------------------
* <-- KPI Table
* -----------------------------------------------------------------------------
*/
/**
 * -----------------------------------------------------------------------------
 * --> Project employees
 * -----------------------------------------------------------------------------
 */
.project__emp .graph_block {
    position: relative;
}

.project__emp .graph_block .attestate {
    display: none;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.project__emp .graph_block .attestate p {
    font-size: 13px;
    font-weight: bold;
}

.project__emp .graph_block .attestate .icon {
    height: auto;
    margin-bottom: 10px;
    font-size: 64px;
    line-height: 64px;
}

.project__emp .graph_block.favorite {
    border-color: #DDD40B;
}

.project__emp .graph_block.favorite .emp_star {
    position: absolute;
    width: 0;
    height: 0;
    top: 11px;
    right: 5px;
    border-right: 8px solid transparent;
    border-bottom: 6px solid #DDD40B;
    border-left: 8px solid transparent;
    transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    cursor: pointer;
}

.project__emp .graph_block.favorite .emp_star:before {
    content: '';
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    top: -4px;
    left: -6px;
    border-bottom: 7px solid #DDD40B;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
}

.project__emp .graph_block.favorite .emp_star:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -8px;
    width: 0px;
    height: 0px;
    border-right: 8px solid transparent;
    border-bottom: 6px solid #DDD40B;
    border-left: 8px solid transparent;
    transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -webkit-transform: rotate(-70deg);
}

.project__emp .graph_block.favorite .emp_star:hover {
    border-bottom-color: rgba(221, 212, 11, 0.5);
}

.project__emp .graph_block.favorite .emp_star:hover:before,
.project__emp .graph_block.favorite .emp_star:hover:after {
    border-bottom-color: rgba(221, 212, 11, 0.5);
}

.project__emp .graph_block.not_certified {
    background-color: #eaeaea;
}

.project__emp .graph_block.not_certified .ava {
    opacity: 0.25;
}

.project__emp .graph_block.not_certified .attestate {
    display: block;
}

.project__emp .graph_block.not_certified .hidden_na {
    display: none;
}

.project__emp .graph_block.wait {
    background-color: #eaeaea;
}

.project__emp .graph_block.wait .attestate {
    color: #0085BF;
}

.project__emp .graph_block.wait .emp_star {
    display: none;
}

.project__emp .graph_block.active:before {
    content: 'Активен';
    display: block;
    position: absolute;
    width: auto;
    height: 15px;
    padding: 2px 4px;
    top: -7px;
    left: 50%;
    background-color: #4CAF50;
    font-size: 10px;
    line-height: 11px;
    color: #ffffff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.project__emp .graph_block .ava_container {
    position: relative;
    width: 100%;
    height: 165px;
    margin-bottom: 15px;
}

.project__emp .graph_block .ava_container .ava {
    width: 100%;
    height: 165px;
}

.project__emp .graph_block img {
    width: 100%;
}

/**
 * -----------------------------------------------------------------------------
 * <-- Project employees
 * -----------------------------------------------------------------------------
 */
/**
 * -----------------------------------------------------------------------------
 * --> Attestation
 * -----------------------------------------------------------------------------
 */
.attestation_field_types ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.attestation_field_types li {
    margin-top: 15px;
}

.attestation_field_types li:first-child {
    margin-top: 0;
}

.attestation_field {
    position: relative;
    padding: 15px;
    background-color: #eaeaea;
    margin-top: 15px;
}

.attestation_field:last-child {
    margin-top: 0;
}

.attestation_removefield {
    font-family: Icons;
    position: absolute;
    width: 20px;
    height: 20px;
    top: -7px;
    right: -7px;
    font-size: 10px;
    background-color: #F44336;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.attestation_removefield:after {
    content: '\f00d';
}

.attestation_answer__wrong .attestation_answer_text {
    color: #F44336;
}

.attestation_answer__wrong .attestation_answer_text:before {
    content: '\f05e';
    font-family: Icons;
    margin-right: 5px;
}

.attestation_answer__correct .attestation_answer_text {
    color: #4CAF50;
}

.attestation_answer__correct .attestation_answer_text:before {
    content: '\f05d';
    font-family: Icons;
    margin-right: 5px;
}

/**
 * -----------------------------------------------------------------------------
 * <-- Attestation
 * -----------------------------------------------------------------------------
 */
/**
 * -----------------------------------------------------------------------------
 * --> Seller work
 * -----------------------------------------------------------------------------
 */
.seller_work {
    min-height: 100%;
    margin: 0 0 -90px !important;
    background-color: #f3f3f3;
}

.work_page {
    margin-left: 12.5%;
    padding: 1rem 2rem 1rem 2rem !important;
}

.work_page__alone {
    margin-left: 0 !important;
}

.work_page .row.row__top {
    padding-bottom: 30px;
}

.work_sidebar {
    background-color: #eaeaea;
    position: fixed !important;
    height: 100%;
    padding: 15px 15px 90px !important;
    left: 90px;
    overflow-y: auto;
}

.seller_script {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.seller_script li {
    font-size: 15px;
    padding-left: 5px;
    margin-bottom: 10px;
    border: 1px #ccc dotted;
}

.seller_script li.my .answer {
    padding-top: 10px;
    padding-left: 20px;
}

.seller_script li.my:before {
    content: '\f0da';
    padding-right: 10px;
    font-family: Icons;
    color: #4CAF50;
}

.seller_script li.active {
    background-color: #3f51b5;
    -webkit-border-radius: 0.28571429rem;
    -moz-border-radius: 0.28571429rem;
    border-radius: 0.28571429rem;
}

.seller_script li.active.my:before {
    color: #ffffff;
}

.seller_script li.next {
    background-color: #d9eeda;
    -webkit-border-radius: 0.28571429rem;
    -moz-border-radius: 0.28571429rem;
    border-radius: 0.28571429rem;
}

.seller_script li.answered {
    background-color: rgba(76, 175, 80, 0.85);
    -webkit-border-radius: 0.28571429rem;
    -moz-border-radius: 0.28571429rem;
    border-radius: 0.28571429rem;
}

.seller_script .wrong_word {
    background-color: #9E1026;
    color: #ffffff;
    padding: 0 .28571429rem;
    -webkit-border-radius: 0.28571429rem;
    -moz-border-radius: 0.28571429rem;
    border-radius: 0.28571429rem;
}


@media only screen and (max-width: 767px) {
    .work_page {
        font-size: 10px;
        margin-left: 0;
        padding: 0.5em !important;
    }

    .work_sidebar {
        position: relative !important;
        padding: 0 !important;
        /*position: fixed !important;*/
        /*height: 100%;*/
        /*padding: 15px 15px 90px !important;*/
        /*left: 90px;*/
        /*overflow-y: auto;*/
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .work_page {
        font-size: 11px;
        margin-left: 0;
        padding: 0.5em !important;
    }

    .work_sidebar {
        position: static !important;
        padding: 0.5em !important;
    }
}


@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .work_page {
        font-size: 12px;
        margin-left: 0;
        padding: 0.5em !important;
    }

    .work_sidebar {
        position: static !important;
        padding: 0.5em !important;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1919px) {
    .work_page {
        font-size: 13px;
    }
}

@media only screen and (min-width: 1920px) {
    .work_page {
        font-size: 14px;
    }
}

/**
* -----------------------------------------------------------------------------
* <-- Seller work
* -----------------------------------------------------------------------------
*/
/**
* -----------------------------------------------------------------------------
* --> Project KPI's
* -----------------------------------------------------------------------------
*/
.kpi_edit_removefile,
.kpi_edit_removereplic {
    font-family: Icons;
    position: absolute;
    width: 20px;
    height: 20px;
    top: -7px;
    right: -7px;
    font-size: 10px;
    background-color: #F44336;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.kpi_edit_removefile:after,
.kpi_edit_removereplic:after {
    content: '\f00d';
}

.kpi_edit_removereplic {
    top: 10px;
    right: 10px;
}

ul.kpi_edit_replics {
    list-style-type: none;
    padding: 0;
    border: 1px solid #eaeaea;
    -webkit-border-radius: 0.28571429rem;
    -moz-border-radius: 0.28571429rem;
    border-radius: 0.28571429rem;
}

ul.kpi_edit_replics li {
    position: relative;
    padding: 0.85714287rem;
    padding-right: 35px;
}

ul.kpi_edit_replics li:nth-child(2n) {
    background-color: #eaeaea;
}

.script_container {
    position: relative;
    padding-left: 10px;
    display: flex;
    flex-flow: column;
}

.script_container .comment.bot {
    align-self: end;
}

.script_cursor {
    position: absolute;
    top: 0;
    -webkit-transition: top 0.2s ease-out;
    -moz-transition: top 0.2s ease-out;
    -ms-transition: top 0.2s ease-out;
    -o-transition: top 0.2s ease-out;
    transition: top 0.2s ease-out;
}

.script_cursor:after {
    content: '';
    display: block;
    top: 0;
    left: 0;
    width: 8px;
    margin-left: -10px;
    height: 18px;
    position: absolute;
    background-color: #DDD40B;
    -webkit-border-radius: 0.28571429rem;
    -moz-border-radius: 0.28571429rem;
    border-radius: 0.28571429rem;
}

.script_container.script_container__text.ui.comments {
    height: 300px;
    overflow-y: scroll;
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
}

/*.script_container .client .potencial {*/
/*    padding: 10px;*/
/*    background-color: rgba(76, 175, 80, 0.05);*/
/*    -webkit-border-radius: 0.28571429rem;*/
/*    -moz-border-radius: 0.28571429rem;*/
/*    border-radius: 0.28571429rem;*/
/*}*/

/*.script_container .client .potencial {*/
/*    border: 1px solid rgba(76, 175, 80, 0.25);*/
/*}*/

.project_script .field {
    position: relative;
}

.project_script_removefield {
    font-family: Icons;
    position: absolute;
    width: 20px;
    height: 20px;
    top: -7px;
    right: 10px;
    font-size: 10px;
    background-color: #F44336;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.project_script_removefield:after {
    content: '\f00d';
}

/**
* -----------------------------------------------------------------------------
* <-- Project KPI's
* -----------------------------------------------------------------------------
*/
/**
 * ----------------------------------------------------------------------------
 * --> Video.js
 * ----------------------------------------------------------------------------
 */
.video-js .vjs-big-play-button {
    top: 50% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    border: 0 !important;
    -webkit-border-radius: 0.28571429rem !important;
    -moz-border-radius: 0.28571429rem !important;
    border-radius: 0.28571429rem !important;
}

.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
    background-color: #0085BF !important;
    background-color: rgba(0, 133, 191, 0.7) !important;
}

.video-js .vjs-slider {
    background-color: #68d1ff !important;
    background-color: rgba(104, 209, 255, 0.5) !important;
}

.video-js .vjs-load-progress {
    background: #e8f8ff !important;
    background: rgba(104, 209, 255, 0.5) !important;
}

.video-js .vjs-load-progress div {
    background: white !important;
    background: rgba(104, 209, 255, 0.75) !important;
}

.vjs-fullscreen {
    width: 100% !important;
    max-height: initial !important;
}

.vjs-fullscreen video {
    max-height: initial !important;
}

/**
 * ----------------------------------------------------------------------------
 * <-- Video.js
 * ----------------------------------------------------------------------------
 */
/* Small devices (tablets, 768px and up) */
@media only screen and (max-width: 991px) {
    .ui.steps:not(.unstackable) {
        max-height: 150px;
        overflow-y: auto;
    }

    .ui.steps:not(.unstackable) .step {
        top: -9999px;
        position: absolute;
    }

    .ui.steps:not(.unstackable) .step.active {
        position: inherit;
        top: auto;
    }

    .ui.stackable.cards.hidden {
        display: none !important;
    }

    .ui.grid > .row > [class*="four wide"].column.project_info {
        width: 300px !important;
        max-width: 80%;
        position: fixed !important;
        z-index: 2;
    }

    .ui.grid > .row > [class*="twelve wide"].column.project_page {
        width: 100% !important;
        margin-left: 0;
    }

    .ui.vertical.menu .item.item__burger__visible {
        display: block;
    }

    .sidebar {
        /* z-index: 3; */
        z-index: 101;
    }

    .project_info.collapsable {
        left: -100%;
        -webkit-transition: left 0.2s ease-out;
        -moz-transition: left 0.2s ease-out;
        -ms-transition: left 0.2s ease-out;
        -o-transition: left 0.2s ease-out;
        transition: left 0.2s ease-out;
    }

    .project_info.collapsable.__switched {
        left: 90px;
    }

    .work_sidebar {
        position: static !important;
    }
}

/* Medium devices (desktops, 992px and up) */
/* Large devices (large desktops, 1200px and up) */

.img-wrap {
    margin: 10px auto;
    cursor: pointer;
    color: #ccc;
    font-size: 30px;
    display: block;
    line-height: 40px;
    width: 60px;
    height: 40px;
    transition: all 0.2s ease-in;
}

.microphone-wrap {
    margin: 10px auto;
    cursor: pointer;
    color: #ccc;
    font-size: 30px;
    display: block;
    line-height: 40px;
    width: 60px;
    height: 40px;
    transition: all 0.2s ease-in;
}

.microphone-active {
    color: #db2828;
}

.img-active {
    color: #21ba45;
}

.microphone-heartbit {
    -webkit-animation: heartbit 4s ease infinite forwards;
}

.assistive-listening-wrap {
    margin: 5px auto;
    color: #ccc;
    font-size: 30px;
    display: block;
    line-height: 40px;
    width: 60px;
    height: 40px;
}

.assistive-listening-active {
    color: #1face6;
    -webkit-animation: heartbit 4s ease infinite forwards;
}

#voice_listening {
    width: 30px;
    height: 30px;
    float: left;
    background-image:url('../images/voice_listening.gif');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 8px 10px 0 10px;
}

#voice_listening img {
    max-width: 32px;
}

#voice_text_result {
    font-size: 18px;
    color: #757575;
    line-height: 1.6;
    margin: 18px 0;
    background: #fff;
    padding: 5px;
}

#voice_text_result::after {
    content: '';
    clear: both;
    display: block;
}

#voice_text_result p.active {
    color: #b7e1cd;
}

#finish_text {
    /*color: #757575;*/
    font-size: 16px;
    margin: 0 0 20px;
    padding: 5px;
    text-align: center;
    /*font-weight: bold;*/
}

.progress-menu-divider {
    margin: 16px 0;
}

@-webkit-keyframes heartbit {
    0% {
        font-size: 30px;
    }
    20% {
        font-size: 40px;
    }
    50% {
        font-size: 30px;
    }
    80% {
        font-size: 40px;
    }
    100% {
        font-size: 30px;
    }
}

@-webkit-keyframes highlight {
    0% {
        background: none;
    }
    100% {
        background: #83cfee;
    }
}

@keyframes highlight {
    0% {
        background: none;
    }
    100% {
        background: #83cfee;
    }
}

.highlight {
    -webkit-transition: background 0.2s ease-out;
    transition: background 0.2s ease-out;
    background: #ade3fa !important;
}

.submit-gray {
    /*width: 120px;*/
    /*height: 32px;*/
    /*line-height: 150% !important;*/
    /*padding: 0 0 2px;*/
    /*font: 12px/32px "Trebuchet MS", Tahoma, Arial, sans-serif;*/
    /*outline: none;*/
    /*position: relative;*/
    /*cursor: pointer;*/
    /*border-radius: 5px;*/
    /*color: #555;*/
    /*border: 1px solid #BBB;*/
    /*border-top: 1px solid #D0D0D0;*/
    /*border-bottom: 1px solid #A5A5A5;*/
    /*text-shadow: 1px 1px #FAFAFA;*/
    /*box-shadow: inset 0 1px #F5F5F5,*/
    /*inset 1px 0 #EDEDED,*/
    /*inset -1px 0 #EDEDED,*/
    /*inset 0 -1px #E7E7E7;*/
    /*background: -moz-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%); !* FF3.6+ *!*/
    /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #e2e2e2)); !* Chrome,Safari4+ *!*/
    /*background: -webkit-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%); !* Chrome10+,Safari5.1+ *!*/
    /*background: -o-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%); !* Opera 11.10+ *!*/
    /*background: -ms-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%); !* IE10+ *!*/
    /*background: linear-gradient(top, #eeeeee 0%, #e2e2e2 100%); !* W3C *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#e2e2e2', GradientType=0); !* IE6-9 *!*/
    /*background-color: #E8E8E8;*/
}

.submit-gray::-moz-focus-inner {
    border: 0
}

.submit-gray:hover {
    border-top: 1px solid #C2C2C2;
    box-shadow: inset 0 1px #EFEFEF,
    inset 1px 0 #EDEDED,
    inset -1px 0 #EDEDED,
    inset 0 -1px #EDEDED;
    background: -moz-linear-gradient(top, #e4e4e4 0%, #e9e9e9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #e9e9e9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e4e4e4 0%, #e9e9e9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e4e4e4 0%, #e9e9e9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e4e4e4 0%, #e9e9e9 100%); /* IE10+ */
    background: linear-gradient(top, #e4e4e4 0%, #e9e9e9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#e9e9e9', GradientType=0); /* IE6-9 */
    background-color: #E8E8E8;
}

.submit-gray:active {
    top: 3px;
    border: 1px solid #B9B9B9;
    border-top: 1px solid #959595;
    border-bottom: 1px solid #CACACA;
    background: #E3E3E3;
    box-shadow: inset 0 1px 2px #B9B9B9;
}

.ui.segment.company_nps {
    width: 100%;
    height: auto;
    padding-bottom: 90%;
    /*height: 274px;*/
    /*padding: 0;*/
    text-align: center;

    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
}

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

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

}

@media only screen and (min-width: 1200px) and (max-width: 1919px) {

}

@media only screen and (min-width: 1920px) {

}

.company_nps canvas {
    position: absolute;
    display: block;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
}

.kpi_table_titles > .header {
    font-size: 12px;
}

a.stage-wrap {
    display: block;
    border: 1px #ddd solid;
    /*width: 120px;*/
    /*height: 60px;*/
    color: #b8b8b8;
    margin: 10px auto;
}

a.stage-wrap.active {
    border: 1px #4183c4 solid;
    color: #4183c4;
}

a.stage-wrap:hover {
    border: 1px #1e70bf solid;
    color: #1e70bf;
}

a.stage-wrap span {
    display: block;
    text-transform: uppercase;
    font-size: 0.7em;
}

a.stage-wrap i {
    display: block;
    margin: 10px auto 0;
    font-size: 1.5em;
}

.card_footer > .ui.button {
    /*width: 200px;*/
}

.card_footer > .ui.button:last-child {
    margin-top: 10px;
}

.remove_item {
    cursor: pointer;
    margin-left: 20px;
    color: #ccc;
}

.remove_item:hover {
    color: #757575;
}

#block_tips, #block_recognition, #block_history {
    margin: 0 0 20px;
}

[data-action="show_prev_text"], [data-action="show_next_text"] {
    cursor: pointer;
    color: #b5b5b5;
    -webkit-user-select: none;
    -moz-webkit-user-select: none;
    -ms-webkit-user-select: none;
    -o-webkit-user-select: none;
}

[data-action="show_prev_text"]:hover, [data-action="show_next_text"]:hover {
    color: #47af4c;
}

.block_tip_item ul {
    list-style-type: none;
}
.block_tip_item ul li{
    width: 100%;
}

.work_page #block_tips .block_tip_item span.rephrasable {
    cursor: pointer;
}

.work_page #block_tips .block_tip_item span.rephrasable i {
    margin-left: 10px;
}

.ui.popup.transition.animating  {
    width: initial!important;
    height: initial!important;
}

.enjoyhint_next_btn, .enjoyhint_skip_btn {
    width: auto;
}

.enjoyhint_next_btn {
    min-width: 100px;
}

.enjoyhint_skip_btn {
    min-width: 220px;
}

#block_point_progress {
    margin-bottom: 1rem;
}

#project_create_difficult_value {
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
    display: inline-block;
    position: relative;
    bottom: 5px;
}

#phrase-img-modal .pictarea {
    margin: 0 auto;
}

#phrase-img-modal img {
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

#phrase-img-sticky {
    z-index: 10000;
    position: fixed;
    bottom: 20px;
    right: 20px;
    min-width: 250px;
    min-height: 150px;

    /*border: 5px solid #cccccc;*/
    /*background-color: #ffcc33;*/
}

#phrase-img-sticky.fullscreen {
    margin: 0;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}

#phrase-img-sticky .content {
    position: relative;
    height: 100%;
}

#phrase-img-sticky .content .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #cccccc;
}

#phrase-img-sticky .pictarea-img {
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* Styles to fix pictarea ==> */
#phrase-img-sticky .content {
    text-align: center;
}

.pictarea {
    display: inline-block;
    width: auto;
    height: 100%;
}

.pictarea input {
    text-align: initial;
}

#phrase-img-sticky .pictarea-img,
#phrase-img-sticky .ui.fluid.image {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
}

@media (orientation: portrait) {
    #phrase-img-sticky .pictarea-img,
    #phrase-img-sticky .ui.fluid.image {
        width: 100%;
        height: auto;
        max-height: 100vh;
    }
}
/* <== Styles to fix pictarea */

#block_history .comment {
    width: 70%;
}

.comment > .content {
    margin: 0 3.5em;
    /*border: 1px solid #cccccc;*/
    border-radius: .28571429rem;
    padding: 5px 10px;
    background-color: #dddddd;
    position: relative;
}

.comment > .content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-right-color: #dddddd;
    border-left: 0;
    border-top: 0;
    margin-top: -6px;
    margin-left: -12px;
}

.comment.bot > .avatar {
    float: right !important;
}

.comment.bot > .content {
    /*border: 1px solid #95C9E0;*/
    text-align: right;
    background-color: #ade3fa;
    position: relative;
}

.comment.bot > .content::before {
    content: '';
    position: absolute;
    left: auto;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-left-color: #ade3fa;
    border-right: 0;
    border-top: 0;
    margin-top: -6px;
    margin-right: -12px;
}


.comment.bot > .content > .text {
    /*text-align: left;*/
}

.comment.bot .meta-data {
    margin-left: 0;
    margin-right: 0.5em;
}

div.scale {
    width: 100%;
    height: 1em;
    background: rgb(222, 0, 0);
    background: linear-gradient(90deg, rgba(222, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 25%, rgba(0, 255, 0, 1) 50%, rgba(255, 255, 0, 1) 75%, rgba(255, 0, 0, 1) 100%);
    margin: 25px 0 15px 0;
    border-radius: 5px;
    position: relative;
}

div.scale2 {
    width: 100%;
    height: 1em;
    background: linear-gradient(90deg, rgba(222, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 50%, rgba(0, 255, 0, 1) 75%);
    margin: 25px 0 15px 0;
    border-radius: 5px;
    position: relative;
}

div.scale > .slow, div.scale > .fast, div.scale2 > .slow, div.scale2 > .fast {
    color: #999999;
    position: absolute;
    top: 1.1em;
    font-style: italic;
}

div.scale > .slow, div.scale2 > .slow {
    left: 0;
}

div.scale > .fast {
    right: 0;
}

div.scale .pointer, div.scale2 .pointer {
    transition: 1s;
    color: #999999;
    font-size: 1.5em;
    margin-left: -0.5em;
    left: 50%;
    top: -0.5em;
    position: absolute;
    display: none;
}

.trainer-card {
    margin-bottom: 2em !important;
}

#recommendations_pace .message, #recommendations_schedule .message, #recommendations_exam .message {
    margin-top: 10px;
    margin-bottom: 0;
}

span#typing_speech_result {
    width: 100%;
    background: #fff;
    padding: .67857143em 1em;
    border: 1px solid rgba(34, 36, 38, .15);
}


span#typing_speech_result[placeholder]:empty::before {
    content: attr(placeholder);
    color: #999999;
}

span#typing_speech_result[placeholder]:empty:focus::before {
    content: "";
}

.block_tips_items_copy {
    user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.block_tips_items_no_copy {
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.script_container.script_container__text {
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.script_container span.err {
    text-decoration: underline;
    -webkit-text-decoration-color: red; /* Safari */
    text-decoration-color: red;
}

del {
    color: #ff695e;
}

ins {
    text-decoration: none;
    color: #21ba45;
}

#client_is_typing .ball-pulse > div {
    background-color: #000000;
}

#client_is_typing .loader-inner div {
    transform: scale(0.5, 0.5);
}


#typing {
    display: block;
    position: relative
}

#typing_send {
    margin-top: 5px
}

#typing_overlay_screenshots {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom_tours .shepherd-content {
    border: 2px solid #e67136;
}

.custom_tours .shepherd-header {
    background-color: #e67136 !important;
}

.custom_tours .shepherd-button {
    background-color: #e67136;
    color: #ffffff;
    border: none;
}

.project_page .column .label.dialog_result {
    position: absolute;
    width: initial;
    top: -1px;
    border-radius: 0 0.28571429rem 0.28571429rem 0.28571429rem !important;
    margin-left: initial !important;
    margin-right: initial !important;
}

.project_page .column .label.right.dialog_result {
    font-size: 1rem !important;
    margin-right: -1px !important;
    right: 0;
    left: initial;
}

.project_page .column .ui.segment.inverted .label.right.dialog_result {
    top: 0px!important;
    margin-right: 0 !important;
}

.project_page .column .label.green.dialog_result {
    background-color: #21ba45!important;
}

.project_page .column .label.red.dialog_result {
    background-color: #db2828!important;
}


/*!*****************************************************

Freak Flags, Copyright ©2024 Michael P. Cohen. Freak flags is licenced under the MIT licence.  

For complete information visit: www.freakflagsprite.com 

******************************************************/

.fflag {
    background-image:url('../images/flagSprite42.png');
    background-repeat:no-repeat;
    background-size: 100% 49494%;
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    box-sizing: content-box;
}
.fflag-CH,
.fflag-NP {box-shadow: none!important}
.fflag-AI {background-position:center 0.2287%}
.fflag-AG {background-position:center 0.4524%}
.fflag-AR {background-position:center 0.6721%}
.fflag-AW {background-position:left 0.8958%}
.fflag-BS {background-position:left 1.1162%}
.fflag-BB {background-position:center 1.3379%}
.fflag-BQ {background-position:center 1.5589%}
.fflag-BZ {background-position:center 1.7805%}
.fflag-BM {background-position:center 2.0047%}
.fflag-BO {background-position:center 2.2247%}
.fflag-VG {background-position:center 2.4467%}
.fflag-BR {background-position:center 2.6674%}
.fflag-CA {background-position:center 2.8931%}
.fflag-KY {background-position:center 3.1125%}
.fflag-CL {background-position:left 3.3325%}
.fflag-CO {background-position:left 3.5542%}
.fflag-KM {background-position:center 3.7759%}
.fflag-CR {background-position:center 4.0015%}
.fflag-CU {background-position:left 4.2229%}
.fflag-CW {background-position:center 4.441%}
.fflag-DM {background-position:center 4.66663%}
.fflag-DO {background-position:center 4.8844%}
.fflag-EC {background-position:center 5.1061%}
.fflag-SV {background-position:center 5.3298%}
.fflag-FK {background-position:center 5.5495%}
.fflag-GF {background-position:center 5.7712%}
.fflag-GL {background-position:left 5.994%}
.fflag-GD {background-position:center 6.2156%}
.fflag-GP {background-position:center 6.4363%}
.fflag-GT {background-position:center 6.658%}
.fflag-GY {background-position:center 6.8805%}
.fflag-HT {background-position:center 7.1038%}
.fflag-HN {background-position:center 7.3231%}
.fflag-JM {background-position:center 7.5448%}
.fflag-MQ {background-position:center 7.7661%}
.fflag-MX {background-position:center 7.98937%}
.fflag-MS {background-position:center 8.2099%}
.fflag-NI {background-position:center 8.4316%}
.fflag-PA {background-position:center 8.6533%}
.fflag-PY {background-position:center 8.875%}
.fflag-PE {background-position:center 9.0967%}
.fflag-PR {background-position:left 9.32237%}
.fflag-BL {background-position:center 9.5426%}
.fflag-KN {background-position:center 9.7628%}
.fflag-LC {background-position:center 9.9845%}
.fflag-PM {background-position:center 10.2052%}
.fflag-VC {background-position:center 10.4269%}
.fflag-SX {background-position:left 10.6486%}
.fflag-TT {background-position:center 10.8703%}
.fflag-TC {background-position:center 11.0945%}
.fflag-US {background-position:center 11.3135%}
.fflag-VI {background-position:center 11.5354%}
.fflag-UY {background-position:left 11.7593%}
.fflag-VE {background-position:center 11.9799%}
.fflag-AB {background-position:center 12.2005%}
.fflag-AF {background-position:center 12.4222%}
.fflag-AZ {background-position:center 12.644%}
.fflag-BD {background-position:center 12.8664%}
.fflag-BT {background-position:center 13.0873%}
.fflag-BN {background-position:center 13.309%}
.fflag-KH {background-position:center 13.5307%}
.fflag-CN {background-position:left 13.7524%}
.fflag-GE {background-position:center 13.9741%}
.fflag-HK {background-position:center 14.1958%}
.fflag-IN {background-position:center 14.4175%}
.fflag-ID {background-position:center 14.6415%}
.fflag-JP {background-position:center 14.8609%}
.fflag-KZ {background-position:center 15.0826%}
.fflag-LA {background-position:center 15.306%}
.fflag-MO {background-position:center 15.528%}
.fflag-MY {background-position:center 15.7496%}
.fflag-MV {background-position:center 15.9694%}
.fflag-MN {background-position:left 16.1911%}
.fflag-MM {background-position:center 16.4128%}
.fflag-NP {background-position:left 16.6345%}
.fflag-KP {background-position:left 16.8562%}
.fflag-MP {background-position:center 17.0779%}
.fflag-PW {background-position:center 17.2996%}
.fflag-PG {background-position:center 17.5213%}
.fflag-PH {background-position:left 17.743%}
.fflag-SG {background-position:left 17.968%}
.fflag-KR {background-position:center 18.1864%}
.fflag-LK {background-position:right 18.4081%}
.fflag-TW {background-position:left 18.6298%}
.fflag-TJ {background-position:center 18.8515%}
.fflag-TH {background-position:center 19.0732%}
.fflag-TL {background-position:left 19.2987%}
.fflag-TM {background-position:center 19.518%}
.fflag-VN {background-position:center 19.7383%}
.fflag-AX {background-position:center 19.96%}
.fflag-AL {background-position:center 20.1817%}
.fflag-AD {background-position:center 20.4034%}
.fflag-AM {background-position:center 20.6241%}
.fflag-AT {background-position:center 20.8468%}
.fflag-BY {background-position:left 21.0685%}
.fflag-BE {background-position:center 21.2902%}
.fflag-BA {background-position:center 21.5119%}
.fflag-BG {background-position:center 21.7336%}
.fflag-HR {background-position:center 21.9553%}
.fflag-CY {background-position:center 22.177%}
.fflag-CZ {background-position:left 22.4002%}
.fflag-DK {background-position:center 22.6204%}
.fflag-EE {background-position:center 22.8421%}
.fflag-FO {background-position:center 23.0638%}
.fflag-FI {background-position:center 23.2855%}
.fflag-FR {background-position:center 23.5072%}
.fflag-DE {background-position:center 23.732%}
.fflag-GI {background-position:center 23.9506%}
.fflag-GR {background-position:left 24.1723%}
.fflag-GG {background-position:center 24.392%}
.fflag-HU {background-position:center 24.6157%}
.fflag-IS {background-position:center 24.8374%}
.fflag-IE {background-position:center 25.0591%}
.fflag-IM {background-position:center 25.279%}
.fflag-IT {background-position:center 25.5025%}
.fflag-JE {background-position:center 25.7242%}
.fflag-XK {background-position:center 25.9459%}
.fflag-LV {background-position:center 26.1676%}
.fflag-LI {background-position:left 26.3885%}
.fflag-LT {background-position:center 26.611%}
.fflag-LU {background-position:center 26.8327%}
.fflag-MT {background-position:left 27.0544%}
.fflag-MD {background-position:center 27.2761%}
.fflag-MC {background-position:center 27.4978%}
.fflag-ME {background-position:center 27.7195%}
.fflag-NL {background-position:center 27.9412%}
.fflag-MK {background-position:center 28.1615%}
.fflag-NO {background-position:center 28.3846%}
.fflag-PL {background-position:center 28.6063%}
.fflag-PT {background-position:center 28.829%}
.fflag-RO {background-position:center 29.0497%}
.fflag-RU {background-position:center 29.2714%}
.fflag-SM {background-position:center 29.4931%}
.fflag-RS {background-position:center 29.7148%}
.fflag-SK {background-position:center 29.9365%}
.fflag-SI {background-position:center 30.1582%}
.fflag-ES {background-position:left 30.3799%}
.fflag-SE {background-position:center 30.6016%}
.fflag-CH {background-position:center 30.8233%}
.fflag-TR {background-position:center 31.045%}
.fflag-UA {background-position:center 31.2667%}
.fflag-GB {background-position:center 31.4884%}
.fflag-VA {background-position:right 31.7101%}
.fflag-BH {background-position:center 31.9318%}
.fflag-IR {background-position:center 32.1535%}
.fflag-IQ {background-position:center 32.3752%}
.fflag-IL {background-position:center 32.5969%}
.fflag-KW {background-position:left 32.8186%}
.fflag-JO {background-position:left 33.0403%}
.fflag-KG {background-position:center 33.25975%}
.fflag-LB {background-position:center 33.4837%}
.fflag-OM {background-position:left 33.7054%}
.fflag-PK {background-position:center 33.9271%}
.fflag-PS {background-position:center 34.1488%}
.fflag-QA {background-position:center 34.3705%}
.fflag-SA {background-position:center 34.5922%}
.fflag-SY {background-position:center 34.8139%}
.fflag-AE {background-position:center 35.0356%}
.fflag-UZ {background-position:left 35.2555%}

.fflag.ff-sm {width: 18px;height: 11px}
.fflag.ff-md {width: 27px;height: 17px}
.fflag.ff-lg {width: 42px;height: 27px}
.fflag.ff-xl {width: 60px;height: 37px}
.fflag.ff-br {border-radius: 3px;}

/* TEMP Flag for english, used only for language */
.fflag-UK {background-position:center 11.3135%}


.preloader {
    width: 600px;
    height: 423px;
    position: fixed;
    top: -999px;
    left: 50%;
    background: url('../images/no_ava_new.png') no-repeat center center;
    background-size: cover;
    z-index: 9999;
    transform: translateX(-50%) translateY(-50%) scale(0.3);
    display: none;
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
    0% {transform: translateX(-50%) translateY(-50%) scale(0.3);}
    25% {transform: translateX(-50%) translateY(-50%) scale(0.4);}
    50% {transform: translateX(-50%) translateY(-50%) scale(0.3);}
    75% {transform: translateX(-50%) translateY(-50%) scale(0.4);}
    100% {transform: translateX(-50%) translateY(-50%) scale(0.3);}
}

.preloader.__visible  {
    top: 50%;
    display: block;
}

[data-sense="phrase_id"] .info {
    display: inline-block;
    position: relative;
}

[data-sense="phrase_id"] .info .icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    font-size: 13px;
    line-height: 15px;
    text-align: center;
    background-color: #ff6565;
    color: #fff;
    border-radius: 8px;
}

[data-sense="phrase_id"] .info .message {
    width: auto;
    min-width: 200px;
    background-color: #FFFFFF;
    padding: 0.5833em 0.833em;
    position: absolute;
    top: -9999px;
    left: -9999px;
    border-radius: 20px;
    -webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
}

[data-sense="phrase_id"] .info .message::before {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    top: 0;
    left: 0;
    border: 5px solid transparent;
    border-right: 12px solid #FFFFFF;
    transform: translateY(10px) translateX(-15px) rotate(0);
}

[data-sense="phrase_id"] .info .message.visible {
    left: 50%;
    top: 50%;
    transform: translateY(-15px) translateX(20px);
}

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

.text-right {
    text-align: left;
}

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

.media_camera_preview_container {
    width: 100%;
    display: block;
    position: relative;
}

.media_camera_preview_container canvas {
    display: block;
}

.media_camera_preview_container::after,
.webcamera_container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 92%;
    background: url('../images/human_bust.svg') no-repeat bottom center;
    background-size: contain;
    opacity: 0.7;
}

.media_camera_preview {
    width: 100%;
    background-color: #bdbec0;
    background-size: 100%;
    border-radius: .28571429rem;
}

.webcamera_container {
    position: relative;
    margin-top: 15px;
}

.webcamera_container::after {
    /* background-size: 55%; */
}

.webcamera canvas {
    display: block;
    background-color: #bdbec0;
    border-radius: .28571429rem;
}

.webcamera .label {
    font-family: Lato,system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    text-align: center!important;
    background-color: transparent !important;
    font-size: 28px !important;
    color: #0a2a42 !important;
    text-transform: none !important;
    font-weight: 300 !important;
}

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

.one_kpi_info_image_photo_popup_container {
    position: absolute;
    width: 328px;
    height: 328px;
    padding: 4px;
    top: 45px;
    left: 0;
    margin-left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    border-radius: 6px;
    background-color: #FFFFFF;
    box-shadow: 0px 16px 64px 0px rgba(10, 42, 66, 0.3);
}

.one_kpi_info_image_photo_popup_container::before {
    content: '';
    position: absolute;
    top: -29px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-bottom: 15px solid #FFFFFF;
}

.one_kpi_info_image_photo_popup_container .close {
    position: absolute;
    top: 0;
    right: 0;
}

.one_kpi_info_image_photo, .one_kpi_info_image_photo_gradient {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 320px;
    height: 320px;
    border-radius: 6px;
}

.one_kpi_info_image_photo_gradient {
    mix-blend-mode: hue;
    opacity: 0;
}

.one_kpi_info_image_photo_gradient:active,
.one_kpi_info_image_photo_gradient:hover {
    opacity: 1;
}
.social_propertyes {}

.ui.form .social_propertyes .label {
    color: rgba(0,0,0,.87)!important;
}

.ui.form .social_property_sex .field > label {
    display: inline-block;
    margin-right: 10px;
}

.ui.form .social_property_sex .field > label:last-child {
    margin-right: 0;
}

.ui.form .social_property_sex .field > label {
    cursor: pointer;
}

.ui.form .social_property_sex .field > label input[type="checkbox"] {
    margin-right: 4px;
}

.color-square {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 3px;
    border-radius: 4px;
    vertical-align: bottom;
    background-color: #CCC;
}

.color-square.__pink {
    background-color: #FFc0cb;
}

.color-square.__blue {
    background-color: #add8e6;
}

.color-square.__green {
    background-color: #b6e4ca;
}