* {
    box-sizing: border-box;
}

body,
html {
    font-weight: 300;
    font-size: 14px;
    background-repeat: no-repeat;
    background-size: cover !important;
    background-attachment: fixed !important;
    float: left;
    width: 100%;
    height: 100%;
}

body.login_page {
    background-color: #f8f8f8;
}

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

a {
    text-decoration: none;
    color: #333;
    outline: 0;
}

::-webkit-input-placeholder {
    color: #ccc;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: #ccc;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: #ccc;
}

:-ms-input-placeholder {
    color: #ccc;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"] {
    width: 100%;
    padding: 8px 10px;
    margin: 10px 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border: solid 1px #ccc;
    outline: 0;
    transition-duration: 0.2s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="date"]:focus {
    color: #555;
    border: solid 1px #24b375;
}

input.error {
    border-color: #a30;
}

label {
    font-size: 14px;
    color: #777777;
    float: left;
}

.button {
    padding: 8px;
    background: #eee;
    border: solid 1px #ccc;
    border-radius: 3px;
    outline: 0;
    cursor: pointer;
    transition-duration: 0.2s;
}

.button:hover {
    background: #ccc;
}

.button.rounded {
    border-radius: 30px;
}

.button:active {
    -webkit-box-shadow: inset 0px 0px 10px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 0px 0px 10px -2px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px 0px 10px -2px rgba(0, 0, 0, 0.75);
}

.button.with-icon i {
    font-size: 12px;
    /*float:left;*/
    margin-right: 5px;
    line-height: 1.4;
}

.button span {
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.button.full {
    width: 100%;
}

.button.button-primary {
    background-color: #24b375;
    border: solid 1px #20a069;
    color: #fff;
}

.button.button-primary span {
    color: #fff;
}

.button.button-primary:hover {
    background-color: #20a069;
}

.button.button-red {
    background-color: #f44336;
    border: solid 1px #f44336;
    color: #fff;
}

.button.button-red span {
    color: #fff;
}

.button.button-red:hover {
    background-color: #8C0000;
}

.button.button-dark {
    background-color: #555;
    border: solid 1px #000;
    color: #fff;
}

.button.button-dark span {
    color: #fff;
}

.button.button-dark:hover {
    background-color: #000;
}

.btn {
    padding: 8px;
    background: #eee;
    border: solid 1px #ccc;
    border-radius: 3px;
    outline: 0;
    cursor: pointer;
    transition-duration: 0.2s;
}

.btn:hover {
    background: #ccc;
}

.btn.rounded {
    border-radius: 30px;
}

.btn:active {
    -webkit-box-shadow: inset 0px 0px 10px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 0px 0px 10px -2px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px 0px 10px -2px rgba(0, 0, 0, 0.75);
}

.btn.with-icon i {
    font-size: 12px;
    /*float:left;*/
    margin-right: 5px;
    line-height: 1.4;
}

.btn span {
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.btn.full {
    width: 100%;
}

.btn.btn-primary {
    background-color: #24b375;
    border: solid 1px #20a069;
    color: #fff;
}

.btn.btn-primary span {
    color: #fff;
}

.btn.btn-primary:hover {
    background-color: #20a069;
}

.btn.btn-default {
    background-color: #24b375;
    border: solid 1px #20a069;
    color: #fff !important;
}

.btn.btn-default span {
    color: #fff;
}

.btn.btn-default:hover {
    background-color: #20a069;
}

.btn.btn-red {
    background-color: #f44336;
    border: solid 1px #f44336;
    color: #fff;
}

.btn.btn-red span {
    color: #fff;
}

.btn.btn-red:hover {
    background-color: #8C0000;
}

.btn.btn-dark {
    background-color: #555;
    border: solid 1px #000;
    color: #fff;
}

.btn.btn-dark span {
    color: #fff;
}

.btn.btn-dark:hover {
    background-color: #000;
}

.message {
    display: none;
    text-align: center;
    width: 300px;
    font-size: 12px;
    margin: 20px auto;
    padding: 12px;
    border-radius: 3px;
    position: relative;
}

.message.error {
    background-color: #a30;
}

.message.error span {
    color: #fff;
}

.message.error:after {
    content: '';
    border-width: 10px;
    border-color: #a30 transparent transparent transparent;
    border-style: solid;
    position: absolute;
    left: 10px;
    bottom: -20px;
}

.message.success {
    background-color: #4CAF50;
}

.message.success span {
    color: #fff;
}

.message.success:after {
    content: '';
    border-width: 10px;
    border-color: #4CAF50 transparent transparent transparent;
    border-style: solid;
    position: absolute;
    left: 10px;
    bottom: -20px;
}

.center_box {
    float: left;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
    text-align: center;
}

.center_box .mini_box {
    width: 300px;
    padding: 20px;
    margin: 20px auto;
    background-color: #fff;
    overflow: hidden;
    position: relative;
}

.center_box .mini_box {
    box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    -moz-box-shadow: 0 0 3px #ccc;
    -o-box-shadow: 0 0 3px #ccc;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
}

.center_box .mini_box .loading {
    display: none;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
}

.center_box .mini_box .loading .loader {
    margin: 184px auto;
}

.center_box .mini_box .mini_box_header {
    float: left;
    width: 100%;
    padding: 10px;
    text-align: center;
    margin-bottom: 10px;
}

.center_box .mini_box .mini_box_header .logo {
    text-indent: -999999px;
    background: #fff url('../img/logo.png') no-repeat;
    width: 58%;
    height: 61px;
    background-size: contain !important;
    display: inline-block;
}

.center_box .mini_box .mini_box_content {
    float: left;
    width: 100%;
}

.devided {
    border-top: solid 1px #F2F2F2;
    float: left;
    width: 100%;
    margin: 5px 0;
}

.field {
    float: left;
    width: 100%;
    margin: 5px 0;
}

.field .extra {
    font-size: 12px;
    color: #555555;
    text-decoration: none;
    text-transform: uppercase;
    float: right;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 18px;
}

.field .icon_input {
    margin-top: 10px;
    clear: both;
    background: #fff;
    border-radius: 3px;
    border: solid 1px #ccc;
    display: inline-block;
}

.field .icon_input input {
    border: none;
    width: 70%;
    padding: 8px;
    margin: 0;
    float: left;
}

.field .icon_input .input_ico {
    float: left;
    width: 30%;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    color: #24b375;
    border-left: solid 1px #eee;
}

.field .icon_input .input_ico:hover {
    color: #333;
}

.field.connected {
    float: left;
    width: 100px;
    margin: 0px;
}

.field.connected input {
    float: left;
    border-radius: 0 30px 30px 0;
    width: 100%;
    margin: 0;
}

.field.connected:first-child input {
    float: left;
    border-radius: 30px 0 0 30px;
    width: 100%;
    border-right: none;
}

.field.connected:first-child input:focus {
    border-right: solid 1px #24b375;
}

.field.ul_field label {
    float: left;
    width: 100%;
    line-height: 1.6;
}

.field.ul_field ul {
    margin: 14px 0;
    float: left;
}

.field.ul_field ul li {
    margin: 0 10px;
}

.field.ul_field ul li span {
    margin-left: 3px;
    line-height: 1.5;
}


/* iCheck plugin Square skin, orange
----------------------------------- */

.icheckbox_square-orange,
.iradio_square-orange {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    background: url(../img/orange.png) no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox_square-orange {
    background-position: 0 0;
}

.icheckbox_square-orange.hover {
    background-position: -24px 0;
}

.icheckbox_square-orange.checked {
    background-position: -48px 0;
}

.icheckbox_square-orange.disabled {
    background-position: -72px 0;
    cursor: default;
}

.icheckbox_square-orange.checked.disabled {
    background-position: -96px 0;
}

.iradio_square-orange {
    background-position: -120px 0;
}

.iradio_square-orange.hover {
    background-position: -144px 0;
}

.iradio_square-orange.checked {
    background-position: -168px 0;
}

.iradio_square-orange.disabled {
    background-position: -192px 0;
    cursor: default;
}

.iradio_square-orange.checked.disabled {
    background-position: -216px 0;
}


/* iCheck plugin Square skin, green
----------------------------------- */

.icheckbox_square-green,
.iradio_square-green {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    background: url(../img/green.png) no-repeat;
    border: none;
    cursor: pointer;
    float: left;
}

.checkb {
    float: left;
    margin: 30px 10px 0 0;
}

.checkb label {
    margin-left: 10px;
    line-height: 1.5;
}

.icheckbox_square-green {
    background-position: 0 0;
}

.icheckbox_square-green.hover {
    background-position: -24px 0;
}

.icheckbox_square-green.checked {
    background-position: -48px 0;
}

.icheckbox_square-green.disabled {
    background-position: -72px 0;
    cursor: default;
}

.icheckbox_square-green.checked.disabled {
    background-position: -96px 0;
}

.iradio_square-green {
    background-position: -120px 0;
}

.iradio_square-green.hover {
    background-position: -144px 0;
}

.iradio_square-green.checked {
    background-position: -168px 0;
}

.iradio_square-green.disabled {
    background-position: -192px 0;
    cursor: default;
}

.iradio_square-green.checked.disabled {
    background-position: -216px 0;
}


/* HiDPI support */

@media (-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi),
(min-resolution: 1.25dppx) {
    .icheckbox_square-green,
    .iradio_square-green {
        background-image: url(../img/green@2x.png);
        -webkit-background-size: 240px 24px;
        background-size: 240px 24px;
    }
}


/* HiDPI support */

@media (-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi),
(min-resolution: 1.25dppx) {
    .icheckbox_square-orange,
    .iradio_square-orange {
        background-image: url(../img/orange@2x.png);
        -webkit-background-size: 240px 24px;
        background-size: 240px 24px;
    }
}

.selectize-control.plugin-drag_drop.multi> .selectize-input> div.ui-sortable-placeholder {
    visibility: visible !important;
    background: #f2f2f2 !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border: 0 none !important;
    -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
    box-shadow: inset 0 0 12px 4px #ffffff;
}

.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
    content: '!';
    visibility: hidden;
}

.selectize-control.plugin-drag_drop .ui-sortable-helper {
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.selectize-dropdown-header {
    position: relative;
    padding: 5px 8px;
    border-bottom: 1px solid #d0d0d0;
    background: #f8f8f8;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}

.selectize-dropdown-header-close {
    position: absolute;
    right: 8px;
    top: 50%;
    color: #303030;
    opacity: 0.4;
    margin-top: -12px;
    line-height: 20px;
    font-size: 20px !important;
}

.selectize-dropdown-header-close:hover {
    color: #000000;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup {
    border-right: 1px solid #f2f2f2;
    border-top: 0 none;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
    border-right: 0 none;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
    display: none;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
    border-top: 0 none;
}

.selectize-control.plugin-remove_button [data-value] {
    position: relative;
    padding-right: 24px !important;
}

.selectize-control.plugin-remove_button [data-value] .remove {
    z-index: 1;
    /* fixes ie bug (see #392) */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 17px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    color: inherit;
    text-decoration: none;
    vertical-align: middle;
    display: inline-block;
    padding: 2px 0 0 0;
    border-left: 1px solid #d0d0d0;
    -webkit-border-radius: 0 2px 2px 0;
    -moz-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.selectize-control.plugin-remove_button [data-value] .remove:hover {
    background: rgba(0, 0, 0, 0.05);
}

.selectize-control.plugin-remove_button [data-value].active .remove {
    border-left-color: #cacaca;
}

.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
    background: none;
}

.selectize-control.plugin-remove_button .disabled [data-value] .remove {
    border-left-color: #ffffff;
}

.selectize-control {
    position: relative;
}

.selectize-dropdown,
.selectize-input,
.selectize-input input {
    color: #303030;
    font-family: inherit;
    font-size: 13px;
    line-height: 18px;
    -webkit-font-smoothing: inherit;
}

.selectize-input,
.selectize-control.single .selectize-input.input-active {
    background: #ffffff;
    cursor: text;
    display: inline-block;
}

.selectize-control.single .selectize-input.dropdown-active {
    border-color: #24b375;
}

.selectize-input {
    border: 1px solid #CCCCCC;
    padding: 7px 5px;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 30px;
}

.selectize-control.multi .selectize-input.has-items {
    padding: 6px 8px 3px;
}

.selectize-input.full {
    background-color: #ffffff;
}

.selectize-input.disabled,
.selectize-input.disabled * {
    cursor: default !important;
}

.selectize-input> * {
    vertical-align: baseline;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.selectize-control.multi .selectize-input> div {
    cursor: pointer;
    margin: 0 3px 3px 0;
    padding: 2px 6px;
    background: #f2f2f2;
    color: #303030;
    border: 0 solid #d0d0d0;
}

.selectize-control.multi .selectize-input> div.active {
    background: #e8e8e8;
    color: #303030;
    border: 0 solid #cacaca;
}

.selectize-control.multi .selectize-input.disabled> div,
.selectize-control.multi .selectize-input.disabled> div.active {
    color: #7d7d7d;
    background: #ffffff;
    border: 0 solid #ffffff;
}

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

.selectize-input> input::-ms-clear {
    display: none;
}

.selectize-input> input:focus {
    outline: none !important;
}

.selectize-input::after {
    content: ' ';
    display: block;
    clear: left;
}

.selectize-input.dropdown-active::before {
    content: ' ';
    display: block;
    position: absolute;
    background: #f0f0f0;
    height: 1px;
    bottom: 0;
    left: 0;
    right: 0;
}

.selectize-dropdown {
    position: absolute;
    z-index: 10;
    border: 1px solid #d0d0d0;
    background: #ffffff;
    margin: 9px 0 0 0;
    border-top: 0 none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 3px 3px;
}

.selectize-dropdown:before {
    content: '';
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #ECECEC transparent;
    position: absolute;
    top: -20px;
    left: 5px;
}

.selectize-dropdown [data-selectable] {
    cursor: pointer;
    overflow: hidden;
}

.selectize-dropdown [data-selectable] .highlight {
    background: rgba(125, 168, 208, 0.2);
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
    padding: 5px 8px;
}

.selectize-dropdown .optgroup:first-child .optgroup-header {
    border-top: 0 none;
}

.selectize-dropdown .optgroup-header {
    color: #303030;
    background: #ffffff;
    cursor: default;
}

.selectize-dropdown .active {
    background-color: #f5fafd;
    color: #495c68;
}

.selectize-dropdown .active.create {
    color: #495c68;
}

.selectize-dropdown .create {
    color: rgba(48, 48, 48, 0.5);
}

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

.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
    cursor: pointer;
}

.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
    cursor: text;
}

.selectize-control.single .selectize-input:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #808080 transparent transparent transparent;
}

.selectize-control.single .selectize-input.dropdown-active:after {
    margin-top: -4px;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent #808080 transparent;
}

.selectize-control.rtl.single .selectize-input:after {
    left: 15px;
    right: auto;
}

.selectize-control.rtl .selectize-input> input {
    margin: 0 4px 0 -2px !important;
}

.selectize-control .selectize-input.disabled {
    opacity: 0.5;
    background-color: #fafafa;
}

.ct-double-octave:after,
.ct-major-eleventh:after,
.ct-major-second:after,
.ct-major-seventh:after,
.ct-major-sixth:after,
.ct-major-tenth:after,
.ct-major-third:after,
.ct-major-twelfth:after,
.ct-minor-second:after,
.ct-minor-seventh:after,
.ct-minor-sixth:after,
.ct-minor-third:after,
.ct-octave:after,
.ct-perfect-fifth:after,
.ct-perfect-fourth:after,
.ct-square:after {
    content: "";
    clear: both
}

.ct-label {
    fill: rgba(0, 0, 0, .4);
    color: rgba(0, 0, 0, .4);
    font-size: .75rem;
    line-height: 1
}

.ct-chart-bar .ct-label,
.ct-chart-line .ct-label {
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.ct-label.ct-horizontal.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-label.ct-horizontal.ct-end {
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-label.ct-vertical.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    text-align: right;
    text-anchor: end
}

.ct-label.ct-vertical.ct-end {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-chart-bar .ct-label.ct-horizontal.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    text-anchor: start
}

.ct-chart-bar .ct-label.ct-horizontal.ct-end {
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    text-anchor: start
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    text-align: right;
    text-anchor: end
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: end
}

.ct-grid {
    stroke: rgba(0, 0, 0, .2);
    stroke-width: 1px;
    stroke-dasharray: 2px
}

.ct-point {
    stroke-width: 10px;
    stroke-linecap: round
}

.ct-line {
    fill: none;
    stroke-width: 4px
}

.ct-area {
    stroke: none;
    fill-opacity: .1
}

.ct-bar {
    fill: none;
    stroke-width: 10px
}

.ct-slice-donut {
    fill: none;
    stroke-width: 60px
}

.ct-series-a .ct-bar,
.ct-series-a .ct-line,
.ct-series-a .ct-point,
.ct-series-a .ct-slice-donut {
    stroke: #d70206
}

.ct-series-a .ct-area,
.ct-series-a .ct-slice-pie {
    fill: #d70206
}

.ct-series-b .ct-bar,
.ct-series-b .ct-line,
.ct-series-b .ct-point,
.ct-series-b .ct-slice-donut {
    stroke: #f05b4f
}

.ct-series-b .ct-area,
.ct-series-b .ct-slice-pie {
    fill: #f05b4f
}

.ct-series-c .ct-bar,
.ct-series-c .ct-line,
.ct-series-c .ct-point,
.ct-series-c .ct-slice-donut {
    stroke: #f4c63d
}

.ct-series-c .ct-area,
.ct-series-c .ct-slice-pie {
    fill: #f4c63d
}

.ct-series-d .ct-bar,
.ct-series-d .ct-line,
.ct-series-d .ct-point,
.ct-series-d .ct-slice-donut {
    stroke: #d17905
}

.ct-series-d .ct-area,
.ct-series-d .ct-slice-pie {
    fill: #d17905
}

.ct-series-e .ct-bar,
.ct-series-e .ct-line,
.ct-series-e .ct-point,
.ct-series-e .ct-slice-donut {
    stroke: #453d3f
}

.ct-series-e .ct-area,
.ct-series-e .ct-slice-pie {
    fill: #453d3f
}

.ct-series-f .ct-bar,
.ct-series-f .ct-line,
.ct-series-f .ct-point,
.ct-series-f .ct-slice-donut {
    stroke: #59922b
}

.ct-series-f .ct-area,
.ct-series-f .ct-slice-pie {
    fill: #59922b
}

.ct-series-g .ct-bar,
.ct-series-g .ct-line,
.ct-series-g .ct-point,
.ct-series-g .ct-slice-donut {
    stroke: #0544d3
}

.ct-series-g .ct-area,
.ct-series-g .ct-slice-pie {
    fill: #0544d3
}

.ct-series-h .ct-bar,
.ct-series-h .ct-line,
.ct-series-h .ct-point,
.ct-series-h .ct-slice-donut {
    stroke: #6b0392
}

.ct-series-h .ct-area,
.ct-series-h .ct-slice-pie {
    fill: #6b0392
}

.ct-series-i .ct-bar,
.ct-series-i .ct-line,
.ct-series-i .ct-point,
.ct-series-i .ct-slice-donut {
    stroke: #f05b4f
}

.ct-series-i .ct-area,
.ct-series-i .ct-slice-pie {
    fill: #f05b4f
}

.ct-series-j .ct-bar,
.ct-series-j .ct-line,
.ct-series-j .ct-point,
.ct-series-j .ct-slice-donut {
    stroke: #dda458
}

.ct-series-j .ct-area,
.ct-series-j .ct-slice-pie {
    fill: #dda458
}

.ct-series-k .ct-bar,
.ct-series-k .ct-line,
.ct-series-k .ct-point,
.ct-series-k .ct-slice-donut {
    stroke: #eacf7d
}

.ct-series-k .ct-area,
.ct-series-k .ct-slice-pie {
    fill: #eacf7d
}

.ct-series-l .ct-bar,
.ct-series-l .ct-line,
.ct-series-l .ct-point,
.ct-series-l .ct-slice-donut {
    stroke: #86797d
}

.ct-series-l .ct-area,
.ct-series-l .ct-slice-pie {
    fill: #86797d
}

.ct-series-m .ct-bar,
.ct-series-m .ct-line,
.ct-series-m .ct-point,
.ct-series-m .ct-slice-donut {
    stroke: #b2c326
}

.ct-series-m .ct-area,
.ct-series-m .ct-slice-pie {
    fill: #b2c326
}

.ct-series-n .ct-bar,
.ct-series-n .ct-line,
.ct-series-n .ct-point,
.ct-series-n .ct-slice-donut {
    stroke: #6188e2
}

.ct-series-n .ct-area,
.ct-series-n .ct-slice-pie {
    fill: #6188e2
}

.ct-series-o .ct-bar,
.ct-series-o .ct-line,
.ct-series-o .ct-point,
.ct-series-o .ct-slice-donut {
    stroke: #a748ca
}

.ct-series-o .ct-area,
.ct-series-o .ct-slice-pie {
    fill: #a748ca
}

.ct-square {
    display: block;
    position: relative;
    width: 100%
}

.ct-square:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 100%
}

.ct-square:after {
    display: table
}

.ct-square>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-second {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-second:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 93.75%
}

.ct-minor-second:after {
    display: table
}

.ct-minor-second>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-second {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-second:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 88.8888888889%
}

.ct-major-second:after {
    display: table
}

.ct-major-second>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-third {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-third:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 83.3333333333%
}

.ct-minor-third:after {
    display: table
}

.ct-minor-third>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-third {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-third:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 80%
}

.ct-major-third:after {
    display: table
}

.ct-major-third>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-perfect-fourth {
    display: block;
    position: relative;
    width: 100%
}

.ct-perfect-fourth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 75%
}

.ct-perfect-fourth:after {
    display: table
}

.ct-perfect-fourth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-perfect-fifth {
    display: block;
    position: relative;
    width: 100%
}

.ct-perfect-fifth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 66.6666666667%
}

.ct-perfect-fifth:after {
    display: table
}

.ct-perfect-fifth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-sixth {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-sixth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 62.5%
}

.ct-minor-sixth:after {
    display: table
}

.ct-minor-sixth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-golden-section {
    display: block;
    position: relative;
    width: 100%
}

.ct-golden-section:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 61.804697157%
}

.ct-golden-section:after {
    content: "";
    display: table;
    clear: both
}

.ct-golden-section>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-sixth {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-sixth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 60%
}

.ct-major-sixth:after {
    display: table
}

.ct-major-sixth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-seventh {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-seventh:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 56.25%
}

.ct-minor-seventh:after {
    display: table
}

.ct-minor-seventh>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-seventh {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-seventh:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 53.3333333333%
}

.ct-major-seventh:after {
    display: table
}

.ct-major-seventh>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-octave {
    display: block;
    position: relative;
    width: 100%
}

.ct-octave:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 50%
}

.ct-octave:after {
    display: table
}

.ct-octave>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-tenth {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-tenth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 40%
}

.ct-major-tenth:after {
    display: table
}

.ct-major-tenth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-eleventh {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-eleventh:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 37.5%
}

.ct-major-eleventh:after {
    display: table
}

.ct-major-eleventh>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-twelfth {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-twelfth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 33.3333333333%
}

.ct-major-twelfth:after {
    display: table
}

.ct-major-twelfth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-double-octave {
    display: block;
    position: relative;
    width: 100%
}

.ct-double-octave:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 25%
}

.ct-double-octave:after {
    display: table
}

.ct-double-octave>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.main {
    background-color: #fff;
    position: relative;
    border-radius: 4px;
    max-width: 1620px;
    margin: 32px auto;
    -ms-box-shadow: 0 0 2px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2);
    -o-box-shadow: 0 0 2px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2);
    box-shadow: 0 0 2px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2);
    padding-bottom: 40px;
}

.main-header {
    float: left;
    width: 100%;
    height: 60px;
    background: #fff;
    border-bottom: solid 1px #eee;
    border-radius: 5px 5px 0 0;
}

.main-header .left_side {
    float: left;
    width: 300px;
}

.main-header .right_side {
    float: right;
}

.main-header .left_side .logo {
    text-indent: -999999px;
    background: transparent url('../img/logo.png') no-repeat;
    width: 43%;
    height: 38px;
    background-size: contain !important;
    background-position-y: 2px;
    display: inline-block;
    margin: 10px 20px;
}

.main-header .right_side .user_menu {
    float: right;
    position: relative;
    margin: 0 20px;
    cursor: pointer;
}

.main-header .right_side .menu_text {
    float: left;
    margin-top: 20px;
}

.main-header .right_side .user_menu .username {
    font-size: 14px;
    font-weight: 300;
    color: #838383;
    margin: 0;
    float: left;
    transition-duration: 0.2s;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.main-header .right_side .user_menu i {
    color: #8A8A8A;
    font-size: 16px;
    margin-top: 0;
    float: left;
    transition-duration: 0.2s;
}

.main-header .right_side .user_menu:hover .username,
.main-header .right_side .user_menu:hover i {
    color: #555;
}

.main-header .right_side .user_menu .icon {
    float: left;
    padding: 10px;
    border-radius: 50%;
    background: #eee;
    margin: 10px;
}

.main-header .right_side .submenu {
    display: none;
    top: 53px;
    position: absolute;
    width: 170px;
    padding: 5px 0;
    z-index: 240;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .36), 0 0 0 1px rgba(0, 0, 0, .06);
    font-family: Lucida Grande, Lucida Sans Unicode, Geneva, sans-serif;
    font-size: 12px;
    border-bottom: solid 3px #24b375;
}

.main-header .right_side .submenu:before {
    content: "";
    position: absolute;
    display: block;
    width: 37px;
    height: 12px;
    top: -12px;
    left: 50%;
    margin-left: -18.5px;
    background-image: url("../img/drop_up.png");
    background-size: 100% 100%;
}

.main-header .right_side .submenu ul {
    list-style: none;
    border-top: 1px solid #f0f2f2;
    margin-top: 4px;
    padding-top: 4px;
    clear: both;
}

.main-header .right_side .submenu ul:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.main-header .right_side .submenu ul li {
    float: left;
    width: 100%;
}

.main-header .right_side .submenu ul li a {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 0 14px;
    line-height: 26px;
    height: 27px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    color: #6f7c82;
    text-decoration: none;
}

.main-header .right_side .submenu ul li a i {
    float: left;
    line-height: 2.5;
    margin-right: 10px;
    color: #24b375;
}

.main-header .right_side .submenu ul li a:hover {
    border-top: 1px solid #24b375;
    border-bottom: 1px solid #24b375;
    background: #24b375;
    background-image: linear-gradient(#24b375, #20a069);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .05);
}

.main-header .right_side .submenu ul li a:hover i {
    color: #fff;
}

.main-header .left_side .show_main_menu {
    display: none;
    text-decoration: none;
    color: #333;
    float: left;
    padding: 11px;
}

.main-header .left_side .show_main_menu i {
    font-size: 31px;
    float: left;
}

.main-header .left_side .show_main_menu span {
    line-height: 2.2;
    font-size: 16px;
}

.wrapper {
    clear: both;
    float: left;
    width: 100%;
}

.wrapper .left_panel {
    width: 18%;
    float: left;
    border-right: 1px solid #F1F1F1;
}

.wrapper .left_panel .side_menu {
    
    display: inline-block;
    width: 100%;
    margin: 20px 0;
}

.wrapper .left_panel .side_menu h4 {
    font-size: 14px;
    font-weight: 300;
    color: #555;
    -webkit-font-smoothing: subpixel-antialiased;
    margin: 10px 0;
    padding-bottom: 10px;
}

.wrapper .left_panel .side_menu ul {
    list-style: none;
}

.wrapper .left_panel .side_menu ul li a {
    float: left;
    padding: 8px 0;
    width: 100%;
    font-weight: 500;
    color: #8F8F8F;
    text-decoration: none;
    border-left: solid 2px transparent;
}

.wrapper .left_panel .side_menu ul li a i {
    float: left;
    margin: 0 10px;
    font-size: 18px;
}

.wrapper .left_panel .side_menu ul li a span {
    line-height: 1.7;
}

.wrapper .left_panel .side_menu ul li a:hover {
    border-left: solid 2px #24b375;
    color: #333;
}

.wrapper .left_panel .side_menu ul li a:hover i {
    color: #24b375;
}

.wrapper .left_panel .side_menu ul li a.active {
    border-left: solid 2px #24b375;
    color: #333;
}

.wrapper .left_panel .side_menu ul li a.active i {
    color: #24b375;
}

.wrapper .left_panel .balance_block {
    float: left;
    width: 100%;
    padding: 10px;
    text-align: center;
    -webkit-box-shadow: inset -1px -4px 3px -4px rgba(140, 140, 140, 1);
    -moz-box-shadow: inset -1px -4px 3px -4px rgba(140, 140, 140, 1);
    box-shadow: inset -1px -4px 3px -4px rgba(140, 140, 140, 1);
}

.wrapper .left_panel .balance_block .b_text {
    margin: 0;
    font-weight: 300;
    font-size: 20px;
    padding: 10px;
    color: #24b375;
}

.wrapper .left_panel .balance_block .text {
    font-size: 12px;
    color: #555;
}

.wrapper .left_panel .balance_block .qr_code img {
    width: 40px;
    transition-duration: 0.3s;
}

.wrapper .left_panel .balance_block:hover .qr_code img {
    width: 150px;
    transition-duration: 0.3s;
}

.wrapper .right_section {
    float: left;
    width: 82%;
}

.wrapper .right_section .center_panel {
    height: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: transparent #eee;
    display: block;
}

.big_label {
    font-weight: bold;
    font-size: 16px;
    margin: 10px 0;
}

.wrapper .right_section .center_panel .mini_info {
    padding: 10px 27px;
}

.wrapper .right_section .center_panel .mini_info ul {
    float: right;
}

.wrapper .right_section .center_panel .mini_info .we_text {
    font-size: 16px;
    font-weight: 400;
    margin: 5px 0;
}

.wrapper .right_section .center_panel .mini_info .text {
    font-size: 12px;
    color: #797979;
}

.wrapper .right_section .center_panel .mini_info .big-text {
    float: left;
    width: 100%;
}

.wrapper .right_section .center_panel .mini_info .big-text i {
    float: left;
    font-size: 16px;
    color: #555;
    margin: 10px 10px 0 0;
}

.wrapper .right_section .center_panel .mini_info .big-text .title {
    font-size: 16px;
    font-weight: 300;
    color: #555;
    margin: 10px 0;
    float: left;
}

.wrapper .right_section .center_panel .stats_cols {
    float: left;
    width: 100%;
    padding: 10px 0;
}

.wrapper .right_section .center_panel .stats_cols .col {
    float: left;
    width: 15%;
    margin: 10px;
    text-align: center;
    border-right: solid 1px #E8EBEF;
}

.wrapper .right_section .center_panel .stats_cols .col:last-child {
    border-right: none;
}

.wrapper .right_section .center_panel .stats_cols .col .col_b_text {
    font-weight: 300;
    font-size: 22px;
    color: #333;
    margin: 3px 0;
    transition-duration: 0.2s;
}

.wrapper .right_section .center_panel .stats_cols .col .col_b_text.positive {
    color: #24b375;
}

.wrapper .right_section .center_panel .stats_cols .col .col_b_text.negative {
    color: #a30;
}

.wrapper .right_section .center_panel .stats_cols .col .text {
    color: #666;
    font-size: 12px;
}

.wrapper .right_section .center_panel .stats_cols .col:hover .col_b_text {
    color: #F6A72A;
}

.wrapper .right_section .right_panel {
    width: 22%;
    float: right;
    display: inline-block;
}

.wrapper .right_section .right_panel .top_block {
    float: left;
    width: 100%;
    position: relative;
}

.wrapper .right_section .right_panel .top_block .title {
    font-weight: 400;
    text-transform: uppercase;
    color: #AEAEAE;
    font-size: 13px;
    padding: 20px 0;
    text-align: center;
    margin-top: 0;
    border-bottom: solid 1px #eee;
}

.wrapper .right_section .right_panel .top_block .inputs_block {
    padding: 0 12px;
}

.wrapper .right_section .center_panel .panel_content .panel_title {
    float: left;
    width: 100%;
    padding: 0 27px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.wrapper .right_section .center_panel .panel_content .panel_title.name_title {
    padding-bottom: 10px;
    border-bottom: solid 1px #eee;
}

.wrapper .right_section .center_panel .panel_content .panel_title .title {
    font-size: 14px;
    font-weight: 400;
    float: left;
}

.wrapper .right_section .center_panel .panel_content .panel_title .actions {
    float: right;
}

.wrapper .right_section .center_panel .panel_content .panel_title .actions.left {
    float: left !important;
}

.wrapper .right_section .center_panel .panel_content .panel_title .actions ul li {
    margin: 0 5px;
    float: left;
}

.wrapper .right_section .center_panel .panel_content .panel_title .actions ul li .advanced_filter {
    position: relative;
}

.wrapper .right_section .center_panel .panel_content .panel_title .actions ul li .loader.chartload {
    display: none;
    margin: 0;
    width: 20px;
    height: 20px;
    float: left;
}

.wrapper .right_section .center_panel .panel_content .panel_title .actions ul li .field .title {
    float: left;
    width: 100%;
    margin: 0;
}

.loader.dataload {
    display: none;
    margin: 0;
    width: 20px;
    height: 20px;
    float: left;
    margin-top: -32px;
}

.wrapper .right_section .center_panel .panel_content .canvas_container {
    padding: 20px;
    float: left;
    width: 100%;
    box-sizing: border-box;
}

.wrapper .right_section .center_panel .panel_content .canvas_container .main_canvas {
    width: 100% !important;
}

.list_container {
    float: left;
    width: 100%;
    padding: 15px;
}

.list_container > .title {
    font-size: 14px;
    font-weight: 400;
    padding: 10px;
    color: #555;
}

.list_container .list_col {
    float: left;
    width: 100%;
    padding: 5px;
    border-bottom: solid 1px #eee;
    background-color: transparent;
    border-left: solid 2px transparent;
    transition-duration: 0.2s;
    cursor: pointer;
    position: relative;
}

.list_container .list_col .icon {
    float: left;
    padding: 14px;
    background: rgba(36, 179, 117, 0.18);
    color: #666;
    font-size: 13px;
    margin-right: 16px;
}

.list_container .list_col.loading:before {
    content: '';
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
}

.list_container .list_col .loader {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 9;
    margin: 8px 0px;
    width: 28px;
    height: 28px;
}

.list_container .list_col .user_icon {
    float: left;
    padding: 15px;
    background: #f8f8f8;
    border-radius: 3px;
}

.list_container .list_col .user_icon i {
    font-size: 31px;
    color: #009688;
}

.list_container .list_col:hover {
    border-left: solid 2px #24b375;
    background-color: #f8f8f8;
}

.list_container .list_col.active {
    border-left: solid 2px #24b375;
    background-color: #f8f8f8;
}

.list_container .list_col:nth-child(even) {
    background: #F8F8F8;
}

.list_container .list_col .col {
    display: inline-block;
    vertical-align: top;
    min-height: 1px;
    padding-left: 1%;
    padding-right: 1%;
    font-size: 15px;
    text-align: left;
}

.list_container .list_col .date.col {
    width: 8.33333333%;
}

.list_container .list_col .details_section {
    width: 90.666667%;
}

.list_container .list_col .details_section.full {
    width: 100%;
}

.list_container .list_col .date.col .month {
    font-size: 12px;
    color: #000;
    font-weight: 400;
    transition-duration: 0.2s;
}

.list_container .list_col .date.col .day {
    margin: 0;
    font-weight: 300;
    color: #555;
    font-size: 27px;
    transition-duration: 0.2s;
}

.list_container .list_col:hover .date.col .month,
.list_container .list_col:hover .date.col .day {
    color: #24b375;
}

.list_container .list_col .details_section .detail_title {
    float: left;
}

.list_container .list_col .details_section .addition_info {
    float: right;
    text-align: center;
}

.list_container .list_col .details_section .detail_title .main_title {
    font-weight: 300;
    margin: 5px 0 1px 0;
    font-size: 16px;
    color: #555;
}

.list_container .list_col .details_section .detail_title .mini_info {
    padding: 0;
    font-size: 12px;
    color: #777;
    float: left;
    clear: both;
}

.list_container .list_col .details_section .detail_title .mini_info.code {
    color: #0F9C8F;
    font-weight: 400;
}

.list_container .list_col .details_section .addition_info .num {
    float: right;
}

.list_container .list_col .details_section .addition_info .num span {
    float: left;
    line-height: 2;
}

.list_container .list_col .details_section .addition_info .num span.negative {
    color: #a30;
}

.list_container .list_col .details_section .addition_info .num span.positive {
    color: #4CAF50;
}

.list_container .list_col .details_section .addition_info .num .num_ {
    color: #555;
    font-weight: 300;
    font-size: 20px;
    margin: 5px 0 0 5px;
    float: left;
}

.list_container .list_col .details_section .addition_info .mini_currency {
    color: #777;
    font-weight: 400;
    font-size: 12px;
    float: right;
    clear: both;
}

.list_container .list_col .details_section .addition_info .mini_currency.negative {
    color: #FF9800;
}

.list_container .list_col .details_section .addition_info .mini_city {
    float: right;
    clear: both;
    font-size: 12px;
    color: #009688;
}

.list_container .list_col .under_section {
    clear: both;
    float: left;
    width: 100%;
    padding: 10px;
    display: none;
}

.list_container .list_col .under_section .close {
    position: absolute;
    right: 10px;
    font-size: 23px;
    color: #555;
}

.list_container .list_col .under_section .mini_box {
    width: 45%;
    float: left;
}

.list_container .list_col .under_section .mini_box .field .title {
    margin: 3px 0;
    font-size: 14px;
    font-weight: 400;
    color: #555;
}

.list_container .list_col .under_section .mini_box .field .tx {
    font-size: 12px;
    color: #737373;
}

.list_container .list_col .under_section .mini_box .field .tx input {
    width: 64%;
}

.list_container .list_col .under_section .mini_box .field .tx.positive {
    color: #8BC34A;
}

.list_container .list_col .under_section .mini_box .field .tx.negative {
    color: #a30;
}

.list_container .list_col .under_section .mini_box .field ul.dashed {
    margin-left: 10px;
}

.list_container .list_col .under_section .mini_box .field ul.dashed> li {
    text-indent: -5px;
    display: block;
}

.list_container .list_col .under_section .mini_box .field ul.dashed> li:before {
    content: "-";
    text-indent: -5px;
}


/*
* Details section 3 columns 
*
*/

.wrapper .right_section .center_panel .panel_content .details_profile_section {
    clear: both;
    float: left;
    width: 100%;
    padding: 10px 26px;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .close {
    position: absolute;
    right: 10px;
    font-size: 23px;
    color: #555;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box {
    width: 33%;
    float: left;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box .field .title {
    margin: 3px 0;
    font-size: 14px;
    font-weight: 400;
    color: #555;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box .field .tx {
    font-size: 12px;
    color: #737373;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box .field .link {
    float: right;
    color: #24b375;
    font-size: 12px;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box .field .link i {
    float: left;
    margin-right: 10px;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box .field .tx.positive {
    color: #8BC34A;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box .field .tx.negative {
    color: #a30;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box .field ul {
    margin-left: 10px;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box .field ul.dashed {
    list-style-type: none;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box .field ul.dashed> li {
    text-indent: -5px;
    display: block;
}

.wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box .field ul.dashed> li:before {
    content: "-";
    text-indent: -5px;
}

.ct-chart {
    float: left;
    width: 100%;
    height: 400px;
}

.ct-chart_r {
    float: right;
}

.ct-chart_l {
    float: left;
}

.footer {
    max-width: 1100px;
    margin: auto;
    padding: 0 10px;
}

.footer .copyright_text {
    color: #555;
    font-size: 12px;
}

.datepicker {
    position: absolute;
    top: 18px;
    left: 18px;
    background: #FFF;
    padding: 4px;
    font-size: 16px;
    border-radius: 5px;
    font-weight: 400;
    z-index: 50;
    -webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.15);
}

.datepicker * {
    /* box-sizing */
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.datepicker .tip {
    position: absolute;
    left: 12px;
    top: -12px;
    z-index: 5;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 12px solid #eee;
}

.datepicker .tip:before {
    content: ' ';
    position: absolute;
    left: -8px;
    top: 2px;
    z-index: 20;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #FFF;
}

.datepicker a {
    text-decoration: none;
    color: #000;
}

.datepicker .row {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
}

.datepicker .row.header {
    text-align: center;
    position: relative;
    margin: 4px 0;
    padding: 10px 0;
    color: #8F8F8F;
}

.datepicker .row.header a {
    margin: 0 3px;
    cursor: pointer;
    color: #8F8F8F;
    font-weight: 300;
    font-size: 13px;
}

.datepicker .row.header .prev {
    display: block;
    position: absolute;
    left: 0;
    top: 10px;
    margin: 0;
    width: 10px;
    height: 10px;
    padding: 4px;
}

.datepicker .row.header .next {
    display: block;
    position: absolute;
    right: 0;
    top: 10px;
    margin: 0;
    width: 10px;
    height: 10px;
    padding: 4px;
}

.datepicker .row.header .prev .arrow {
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 6px solid #8F8F8F;
    border-bottom: 5px solid transparent;
    float: left;
}

.datepicker .row.header .next .arrow {
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 6px solid #8F8F8F;
    border-bottom: 5px solid transparent;
    float: right;
}

.datepicker .row.header .prev.disabled {
    cursor: default;
}

.datepicker .row.header .next.disabled {
    cursor: default;
}

.datepicker .row.header .prev.disabled .arrow {
    border-right-color: #DDD;
}

.datepicker .row.header .next.disabled .arrow {
    border-left-color: #DDD;
}

.datepicker .cell {
    display: block;
    float: left;
    width: 27px;
    height: 29px;
    line-height: 27px;
    text-align: center;
    padding: 0 3px;
    text-transform: uppercase;
    font-size: 13px;
    border: 1px solid transparent;
}

.datepicker .cell.large {
    width: 59px;
    padding: 0;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
}

.datepicker .cell.large.double {
    line-height: 25px;
    word-wrap: break-word;
    text-align: left;
}

.datepicker .day {
    color: #818181;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
}

.datepicker .cell.day.today {
    color: #24b375;
    background: #FFFFFF;
}

.datepicker .cell.day:hover,
.datepicker .cell.month:hover,
.datepicker .cell.year:hover,
.datepicker .cell.decade:hover {
    background: #eee;
    color: #555;
    border-radius: 3px;
}

.datepicker .cell.blank,
.datepicker .cell.blank:hover {
    background: none;
    color: inherit;
    cursor: default;
}

.datepicker .cell.day.selected,
.datepicker .cell.month.selected,
.datepicker .cell.year.selected,
.datepicker .cell.decade.selected {
    background: #24b375;
    color: #FFF;
    border-radius: 3px;
}

.datepicker .cell.grayed {
    color: #CCC;
}

.datepicker .days .cell {
    color: #555;
}

.datepicker .decades .cell span {
    display: block;
    padding: 5px 5px 0;
}

.datepicker .calendar,
.datepicker .decades,
.datepicker .years,
.datepicker .months {
    position: relative;
    float: left;
    width: 100%;
}

.datepicker .decades,
.datepicker .years,
.datepicker .months {
    display: none;
}

.datepicker .decades .header,
.datepicker .years .header,
.datepicker .months .header {
    margin-bottom: 13px;
}

.loader {
    margin: 60px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 2px solid rgba(255, 255, 255, 0.5);
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    border-left: 2px solid #1195F7;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 0.8s infinite linear;
    animation: load8 0.8s infinite linear;
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.not_found {
    width: 200px;
    margin: auto;
    text-align: center;
}

.not_found i {
    font-size: 85px;
    color: #eeeeee;
}

.not_found .title {
    font-size: 12px;
    font-weight: 400;
    color: #888;
}

.pagination {
    float: right;
    clear: both;
    margin-top: 20px;
}

.pagination .nav_button {
    float: left;
    padding: 7px;
    background: #393939;
    color: #fff;
    font-size: 12px;
}

.pagination .nav_button.inactive {
    background: #B6B6B6;
}

.pagination .nav_button:hover {
    background: #222222;
}

.pagination .nav_button.prev {
    border-radius: 30px 0 0 30px;
    border-right: solid 2px #555;
}

.pagination .nav_button.prev i {
    float: left;
    margin-top: 1px;
}

.pagination .nav_button.next {
    border-radius: 0 30px 30px 0;
}

.pagination .nav_button.next i {
    float: right;
    margin-top: 1px;
}

.table_data {
    display: inline-block;
    width: 100%;
}

.table_data .table_data_header {
    float: left;
    width: 100%;
    padding: 10px;
    background: #f9f9f9;
    border-bottom: solid 1px #EEE;
}

.table_data .table_data_header .table_data_title {
    float: left;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

.table_data .table_data_header .actions.right {
    float: right;
}

.table_data .table_data_header .actions.right ul li {
    display: inline-block;
}

.table_data .table_data_header .actions.right ul li a {
    text-decoration: none;
    font-weight: 300;
    text-transform: uppercase;
    padding: 8px;
    float: left;
    border-radius: 3px;
    transition-duration: 0.2s;
}

.table_data .table_data_header .actions.right ul li a:hover {
    background: #24b375;
    border: solid 1px #24b375;
    color: #fff;
}

.table_data .table_data_header .actions.right ul li a i {
    float: left;
    margin-right: 5px;
    line-height: 1.2;
}

.table_data .table_data_header .actions.right ul li a span {
    font-size: 12px;
}

.form_container {
    float: left;
    width: 100%;
    padding: 10px 20px;
    display: none;
}

.form_container .section {
    width: 45%;
    float: left;
    padding: 10px;
}

.form_container .form_button_container {
    clear: both;
    margin: 5px 8px;
}

.show_right_panel {
    display: none;
    position: fixed;
    bottom: 16px;
    right: 10px;
    padding: 12px 14px;
    background: #24b375;
    font-size: 22px;
    color: #fff;
    text-shadow: 0 0 1px #777;
    border-radius: 64%;
    box-shadow: 0 0 4px #939393;
    z-index: 999;
}

table {
    border-collapse: collapse;
    width: 100%;
}

thead {
    border-bottom: solid 2px #F6F6F6;
}

th {
    background-color: rgba(255, 255, 255, 0.08);
    font-weight: 400;
    color: #777;
    border-right: 0.125em solid #FFFFFF;
    padding: 19px 10px 10px 10px !important;
}

tr {
    border-bottom: solid 1px #eee;
}

tr:last-child {
    border: none;
}

tr:nth-child(even) {
    background: #f8f8f8;
}

th.checkbox_space,
td.checkbox_space {
    width: 1%;
}

th:hover {
    background: #f7f7f7;
}

tbody tr:hover {
    background: #f8f8f8;
}

th,
td {
    line-height: 1.5;
    padding: 10px;
    text-align: left;
}

.switch_button {
    float: left;
    padding: 2px 4px;
    border-radius: 30px;
    border: solid 2px #03A9F4;
    width: 110px;
    display: inline-block;
    position: relative;
    top: -4px;
}

.switch_button .slider {
    padding: 6px 5px;
    border-radius: 30px;
    background: #03A9F4;
    font-size: 12px;
    color: #fff;
    box-sizing: border-box;
}

.switch_button .slider.right {
    float: right;
}

.switch_button .slider.left {
    float: left;
}

.select_ {
    float: left;
    width: 110px;
}

.pagination {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin-top: 10px;
}

.pagination li {
    display: inline;
    text-align: center;
}

.pagination a {
    float: left;
    display: block;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 12px;
    color: #fff;
    margin-left: -1px;
    border: 1px solid transparent;
    line-height: 1.5;
}

.pagination a.active {
    cursor: default;
}

.pagination a:active {
    outline: none;
}

.pagination.modal-1 li:first-child a {
    -moz-border-radius: 6px 0 0 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px 0 0 6px;
}

.pagination.modal-1 li:last-child a {
    -moz-border-radius: 0 6px 6px 0;
    -webkit-border-radius: 0;
    border-radius: 0 6px 6px 0;
}

.pagination.modal-1 a {
    border-color: #ddd;
    color: #4285F4;
    background: #fff;
}

.pagination.modal-1 a:hover {
    background: #eee;
}

.pagination.modal-1 a.active,
.modal-1 a:active {
    border-color: #4285F4;
    background: #4285F4;
    color: #fff;
}

.pagination.modal-2 li:first-child a {
    -moz-border-radius: 50px 0 0 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px 0 0 50px;
}

.pagination.modal-2 li:last-child a {
    -moz-border-radius: 0 50px 50px 0;
    -webkit-border-radius: 0;
    border-radius: 0 50px 50px 0;
}

.pagination.modal-2 a {
    border-color: #ddd;
    color: #999;
    background: #fff;
}

.pagination.modal-2 a:hover {
    color: #24b375;
    background-color: #eee;
}

.pagination.modal-2 a.active,
.modal-2 a:active {
    border-color: #24b375;
    background: #24b375;
    color: #fff;
}

.popup_container {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
}

.popup_container {
    display: none;
}

.popup_container .overlay {
    float: left;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.88);
}

.popup_container .popup_body {
    position: absolute;
    left: 0;
    top: -1000px;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.popup_container .popup_body .modal {
    max-width: 600px;
    width: 100%;
    background: #fff;
    margin: 100px auto;
    border: solid 1px #eee;
    border-radius: 5px;
}

.popup_container .popup_body .modal.mini {
    max-width: 400px;
}

.popup_container .popup_body .modal .modal_header {
    float: left;
    width: 100%;
    padding: 0;
}

.popup_container .popup_body .modal .modal_header .title {
    margin: 0;
    font-size: 19px;
    font-weight: 300;
    color: #555;
    float: left;
    padding: 10px;
}

.popup_container .popup_body .modal .modal_header .close {
    float: right;
    padding: 13px 15px;
}

.popup_container .popup_body .modal .modal_header .close i {
    color: #7F7F7F;
    text-shadow: 0 0 2px #989898;
}

.popup_container .popup_body .modal .modal_content {
    float: left;
    width: 100%;
    padding: 10px;
}

.popup_container .popup_body .modal .modal_content .inputs_block {
    float: left;
    width: 240px;
}

.popup_container .popup_body .modal .modal_content .inputs_block .selectize-input {
    border-radius: 3px;
}

.popup_container .popup_body .modal .modal_content .right_container {
    float: right;
    width: 55%;
}

.popup_container .popup_body .modal .modal_content .right_container .title {
    font-size: 16px;
    font-weight: 300;
    color: #333;
    border-bottom: solid 1px #eee;
    padding: 10px 0;
}


/**
* Popup style for user card
**/

.popup_container .popup_body .modal .modal_content .user_card {
    float: left;
    width: 100%;
    padding: 10px;
    background: #f8f8f8;
}

.popup_container .popup_body .modal .modal_content .user_card .icon {
    float: left;
    padding: 22px;
    color: #fff;
    background: #7F7F7F;
    border-radius: 4px;
    box-shadow: 0 0 3px #ccc;
    border: solid 3px #fff;
}

.popup_container .popup_body .modal .modal_content .user_card .details {
    float: left;
    margin-left: 10px;
}

.popup_container .popup_body .modal .modal_content .user_card .details .username {
    margin: 5px 0;
    font-size: 13px;
    color: #555;
    font-weight: 300;
}

.popup_container .popup_body .modal .modal_content .user_card .details .balance {
    font-size: 12px;
    color: #555;
    background: #fff;
    padding: 10px;
    margin: 5px 0;
    float: left;
    border-radius: 4px;
    box-shadow: 0 0 2px #ccc;
}

.popup_container .popup_body .modal .modal_content .user_card .icon i {
    font-size: 36px;
}

.popup_container .popup_body .modal .modal_content .user_card.male .icon {
    background: #03A9F4;
}

.popup_container .popup_body .modal .modal_content .user_card.male .icon i {
    color: #fff;
}

.popup_container .popup_body .modal .modal_content .user_card.male .details .balance {
    color: #03A9F4;
    box-shadow: 0 0 2px #03A9F4;
}

.popup_container .popup_body .modal .modal_content .user_card.female .icon {
    background: #F40388;
}

.popup_container .popup_body .modal .modal_content .user_card.female .details .balance {
    color: #F40388;
    box-shadow: 0 0 2px #F40388;
}

.camera_container {
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}

.camera_container .camera_actions {
    position: absolute;
    right: 0;
    width: 141px;
    top: 30px;
    z-index: 9;
    overflow: hidden;
    padding: 5px 0;
}

.camera_container .camera_actions ul li {
    display: inline-block;
    float: left;
    margin: 0 10px;
}

.camera_container .camera_actions ul li div {
    float: left;
    padding: 10px;
    color: #24b375;
    font-size: 22px;
    background: #fff;
    width: 47px;
    border-radius: 50%;
    box-shadow: 0 0 3px #737373;
    height: 47px;
    text-align: center;
}

.camera_container .camera_actions ul li div i {
    line-height: 1.2;
}

.camera_container .camera_actions ul li div:hover {
    background: #f8f8f8;
}

.template_thumbnails_container {
    float: left;
    width: 100%;
    position: relative;
}

.template_thumbnails_container .template_thumbnail {
    float: left;
    width: auto;
    margin: 24px;
    padding: 75px 39px;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    position: relative;
    background-position: center !important;
    border-radius: 4px;
    box-shadow: 0 0 3px #BBB;
    top: 0;
    transition-duration: 0.2s;
}

.template_thumbnails_container .template_thumbnail:hover {
    top: -5px;
}

.template_thumbnails_container .template_thumbnail.not_active {
    display: none;
}

.template_thumbnails_container .template_thumbnail:before {
    content: '';
    background: rgba(245, 245, 245, 0.6);
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition-duration: 0.2s;
}

.template_thumbnails_container .template_thumbnail:hover:before {
    background: rgba(224, 224, 224, 0.5);
}

.template_thumbnails_container .template_thumbnail.selected:before {
    content: '';
    background: rgba(224, 224, 224, 0.5);
}

.template_thumbnails_container .template_thumbnail .actions {
    position: relative;
    z-index: 10;
}

.template_thumbnails_container .template_thumbnail .actions ul {
    list-style: none;
}

.template_thumbnails_container .template_thumbnail .actions ul li {
    display: inline-block;
    float: left;
    width: 100%;
    clear: both;
}

.template_thumbnails_container .template_thumbnail .actions ul li.cancle_action {
    display: none;
}

.template_thumbnails_container .template_thumbnail .actions ul li a {
    float: left;
    margin: 3px 0;
}

.template_thumbnails_container .template_thumbnail.selected .actions ul li {
    visibility: hidden;
}

.template_thumbnails_container .template_thumbnail.selected .actions ul li.cancle_action {
    visibility: visible;
    display: block;
    position: absolute;
    text-align: center;
}

.template_thumbnails_container .template_thumbnail.selected .actions ul li.cancle_action a {
    float: none;
}

.light_box_container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: 100%;
}

.light_box_container .overlay {
    float: left;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.light_box_container .image_container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
}

.light_box_container .image_container .image {
    width: 463px;
    height: auto;
    margin: 50px auto;
    box-shadow: 0 0 34px #424242;
}

.light_box_container .image_container .image .close {
    background: #fff;
    padding: 17px;
    position: absolute;
    right: 0;
}

.light_box_container .image_container .image img {
    margin: auto;
    width: 100%;
}

.compiler_form_container {
    display: none;
    float: left;
    width: 100%;
    position: relative;
    border-top: solid 1px #eee;
}

.compiler_form_container .hidden_title {
    display: none;
    float: left;
    width: 100%;
    padding: 15px;
    background: #eee;
    font-size: 16px;
    font-weight: 400;
    color: #333;
}

.compiler_form_container .hidden_title i {
    float: right;
    border-radius: 50%;
    color: #24b375;
}

.compiler_form_container:before {
    content: '';
    border-style: solid;
    border-width: 13px;
    border-color: transparent transparent #ECECEC transparent;
    position: absolute;
    top: -26px;
    left: 97px;
}

.compiler_form_container .inputs_container {
    float: left;
    width: 100%;
    padding: 10px;
}

.compiler_form_container .inputs_container .left_block {
    float: left;
    width: 71%;
    margin-right: 10px;
}

.compiler_form_container .inputs_container .right_block {
    float: right;
    width: 26%;
}

.compiler_form_container .inputs_container .right_block .images_input {
    float: left;
    width: 100%;
    margin-top: 13px;
}

.compiler_form_container .inputs_container .right_block .images_input .image_title {
    font-size: 14px;
    color: #555;
    font-weight: bold;
}

.compiler_form_container .inputs_container .right_block .images_input .image_input {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    background: #FFFFFF;
    box-shadow: 0 0 3px #B3B3B3;
}

.compiler_form_container .inputs_container .right_block .images_input .image_input .icon {
    float: left;
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    background: #f8f8f8;
    cursor: pointer;
}

.compiler_form_container .inputs_container .right_block .images_input .image_input .icon .loader {
    display: none;
}

.compiler_form_container .inputs_container .right_block .images_input .image_input .icon i {
    position: absolute;
    font-size: 40px;
    width: 100%;
    height: 100%;
    line-height: 3;
    text-align: center;
    color: #666;
    background: rgba(214, 214, 214, 0.7);
    padding: 12px;
    display: none;
}

.compiler_form_container .inputs_container .right_block .images_input .image_input .icon.not_selected i {
    display: block;
}

.compiler_form_container .inputs_container .right_block .images_input .image_input .icon:hover i {
    display: block;
}

.compiler_form_container .inputs_container .right_block .images_input .image_input .icon img {
    width: 100%;
    object-fit: contain!important;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 3px;
}

.compiler_form_container .inputs_container .right_block .images_input .image_input .inputs {
    float: left;
    width: 100%;
}

.compiler_form_container .inputs_container .right_block .images_input .image_input .inputs input {
    margin: 0;
    padding: 10px;
    border: none;
    border-bottom: solid 1px #DEDEDE;
    background: #FFFFFF;
    border-radius: 0;
}

.compiler_form_container .actions {
    float: right;
    padding: 10px;
}

.compiler_form_container .actions ul li {
    display: inline-block;
    margin: 0 10px;
}

.hidden {
    display: none;
}

.jq-toast-wrap {
    display: block;
    position: fixed;
    width: 250px;
    pointer-events: none !important;
    margin: 0;
    padding: 0;
    letter-spacing: normal;
    z-index: 9000 !important;
}

.jq-toast-wrap * {
    margin: 0;
    padding: 0;
}

.jq-toast-wrap.bottom-left {
    bottom: 20px;
    left: 20px;
}

.jq-toast-wrap.bottom-right {
    bottom: 20px;
    right: 40px;
}

.jq-toast-wrap.top-left {
    top: 20px;
    left: 20px;
}

.jq-toast-wrap.top-right {
    top: 20px;
    right: 40px;
}

.jq-toast-single {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 0px 0px 5px;
    border-radius: 4px;
    font-size: 12px;
    font-family: arial, sans-serif;
    line-height: 17px;
    position: relative;
    pointer-events: all !important;
    background-color: #444444;
    color: white;
}

.jq-toast-single h2 {
    font-family: arial, sans-serif;
    font-size: 14px;
    margin: 0px 0px 7px;
    background: none;
    color: inherit;
    line-height: inherit;
    letter-spacing: normal;
}

.jq-toast-single a {
    color: #eee;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid white;
    padding-bottom: 3px;
    font-size: 12px;
}

.jq-toast-single ul {
    margin: 0px 0px 0px 15px;
    background: none;
    padding: 0px;
}

.jq-toast-single ul li {
    list-style-type: disc !important;
    line-height: 17px;
    background: none;
    margin: 0;
    padding: 0;
    letter-spacing: normal;
}

.close-jq-toast-single {
    position: absolute;
    top: 3px;
    right: 7px;
    font-size: 14px;
    cursor: pointer;
}

.jq-toast-loader {
    display: block;
    position: absolute;
    top: -2px;
    height: 5px;
    width: 0%;
    left: 0;
    border-radius: 5px;
    background: red;
}

.jq-toast-loaded {
    width: 100%;
}

.jq-has-icon {
    padding: 10px 10px 10px 50px;
    background-repeat: no-repeat;
    background-position: 10px;
}

.jq-icon-info {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=');
    background-color: #31708f;
    color: #d9edf7;
    border-color: #bce8f1;
}

.jq-icon-warning {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=');
    background-color: #8a6d3b;
    color: #fcf8e3;
    border-color: #faebcc;
}

.jq-icon-error {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=');
    background-color: #a94442;
    color: #f2dede;
    border-color: #ebccd1;
}

.jq-icon-success {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');
    color: #dff0d8;
    background-color: #3c763d;
    border-color: #d6e9c6;
}


/*!
 * jquery-confirm v2.5.1 (http://craftpip.github.io/jquery-confirm/)
 * Author: boniface pereira
 * Website: www.craftpip.com
 * Contact: hey@craftpip.com
 *
 * Copyright 2013-2016 jquery-confirm
 * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE)
 */

@-webkit-keyframes jconfirm-rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes jconfirm-rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

body.jconfirm-noscroll {
    overflow: hidden !important;
}

.jconfirm {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999;
    font-family: inherit;
    overflow: hidden;
}

.jconfirm .jconfirm-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transition: all .4s;
    transition: all .4s;
}

.jconfirm .jconfirm-bg.seen {
    opacity: 1;
}

.jconfirm .jconfirm-scrollpane {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-perspective-origin: center;
    perspective-origin: center;
}

.jconfirm .jconfirm-box {
    background: white;
    border-radius: 4px;
    position: relative;
    outline: none;
    padding: 15px 15px 0;
}

.jconfirm .jconfirm-box div.closeIcon {
    height: 20px;
    width: 20px;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    opacity: .6;
    text-align: center;
    -webkit-transition: opacity 0.1s ease-in;
    transition: opacity 0.1s ease-in;
    display: none;
    font-size: 27px;
    line-height: 14px;
}

.jconfirm .jconfirm-box div.closeIcon .fa {
    font-size: 16px;
}

.jconfirm .jconfirm-box div.closeIcon .glyphicon {
    font-size: 16px;
}

.jconfirm .jconfirm-box div.closeIcon .zmdi {
    font-size: 16px;
}

.jconfirm .jconfirm-box div.closeIcon:hover {
    opacity: 1;
}

.jconfirm .jconfirm-box div.title-c {
    display: block;
    font-size: 22px;
    line-height: 20px;
}

.jconfirm .jconfirm-box div.title-c .icon-c {
    font-size: inherit;
    padding-bottom: 15px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.jconfirm .jconfirm-box div.title-c .icon-c i {
    vertical-align: middle;
}

.jconfirm .jconfirm-box div.title-c .icon-c:empty {
    display: none;
}

.jconfirm .jconfirm-box div.title-c .title {
    font-size: inherit;
    font-family: inherit;
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 15px;
}

.jconfirm .jconfirm-box div.title-c .title:empty {
    display: none;
}

.jconfirm .jconfirm-box div.content-pane {
    margin-bottom: 15px;
    height: auto;
    -webkit-transition: height 0.4s ease-in;
    transition: height 0.4s ease-in;
    display: inline-block;
    width: 100%;
    position: relative;
}

.jconfirm .jconfirm-box div.content-pane .content {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    right: 0;
}

.jconfirm .jconfirm-box div.content-pane .content img {
    width: 100%;
    height: auto;
}

.jconfirm .jconfirm-box div.content-pane .content:empty {
    display: none;
}

.jconfirm .jconfirm-box div.content-pane .content:empty.loading {
    height: 40px;
    position: relative;
    opacity: 0.6;
    display: block;
}

.jconfirm .jconfirm-box div.content-pane .content:empty.loading:before {
    content: '';
    height: 20px;
    width: 20px;
    border: solid 2px transparent;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    border-radius: 50%;
    -webkit-animation: jconfirm-rotate 1s infinite linear;
    animation: jconfirm-rotate 1s infinite linear;
    border-bottom-color: #aaa;
    top: 50%;
    margin-top: -10px;
}

.jconfirm .jconfirm-box div.content-pane .content:empty.loading:after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -15px;
}

.jconfirm .jconfirm-box .buttons {
    padding-bottom: 15px;
}

.jconfirm .jconfirm-box .buttons button+ button {
    margin-left: 5px;
}

.jconfirm .jquery-clear {
    clear: both;
}

.jconfirm.rtl {
    direction: rtl;
}

.jconfirm.rtl div.closeIcon {
    left: 12px;
    right: auto;
}

.jconfirm.jconfirm-white .jconfirm-bg {
    background-color: rgba(0, 0, 0, 0.2);
}

.jconfirm.jconfirm-white .jconfirm-box {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.jconfirm.jconfirm-white .jconfirm-box .buttons {
    float: right;
}

.jconfirm.jconfirm-white .jconfirm-box .buttons button {
    border: none;
    background-image: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
    -webkit-transition: background .1s;
    transition: background .1s;
    color: white;
}

.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default {
    box-shadow: none;
    color: #333;
}

.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default:hover {
    background: #ddd;
}

.jconfirm.jconfirm-black .jconfirm-bg {
    background-color: rgba(0, 0, 0, 0.5);
}

.jconfirm.jconfirm-black .jconfirm-box {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    background: #444;
    border-radius: 5px;
    color: white;
}

.jconfirm.jconfirm-black .jconfirm-box .buttons {
    float: right;
}

.jconfirm.jconfirm-black .jconfirm-box .buttons button {
    border: none;
    background-image: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
    -webkit-transition: background .1s;
    transition: background .1s;
    color: white;
}

.jconfirm.jconfirm-black .jconfirm-box .buttons button.btn-default {
    box-shadow: none;
    color: #fff;
    background: none;
}

.jconfirm.jconfirm-black .jconfirm-box .buttons button.btn-default:hover {
    background: #666;
}

.jconfirm .jconfirm-box.hilight {
    -webkit-animation: hilight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    animation: hilight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@-webkit-keyframes hilight {
    10%,
    90% {
        -webkit-transform: translate3d(-2px, 0, 0);
        transform: translate3d(-2px, 0, 0);
    }
    20%,
    80% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }
    30%,
    50%,
    70% {
        -webkit-transform: translate3d(-8px, 0, 0);
        transform: translate3d(-8px, 0, 0);
    }
    40%,
    60% {
        -webkit-transform: translate3d(8px, 0, 0);
        transform: translate3d(8px, 0, 0);
    }
}

@keyframes hilight {
    10%,
    90% {
        -webkit-transform: translate3d(-2px, 0, 0);
        transform: translate3d(-2px, 0, 0);
    }
    20%,
    80% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }
    30%,
    50%,
    70% {
        -webkit-transform: translate3d(-8px, 0, 0);
        transform: translate3d(-8px, 0, 0);
    }
    40%,
    60% {
        -webkit-transform: translate3d(8px, 0, 0);
        transform: translate3d(8px, 0, 0);
    }
}


/*Transition rules*/

.jconfirm {
    -webkit-perspective: 400px;
    perspective: 400px;
}

.jconfirm .jconfirm-box {
    opacity: 1;
    -webkit-transition-property: -webkit-transform, opacity, box-shadow;
    transition-property: transform, opacity, box-shadow;
}

.jconfirm .jconfirm-box.anim-top,
.jconfirm .jconfirm-box.anim-left,
.jconfirm .jconfirm-box.anim-right,
.jconfirm .jconfirm-box.anim-bottom,
.jconfirm .jconfirm-box.anim-opacity,
.jconfirm .jconfirm-box.anim-zoom,
.jconfirm .jconfirm-box.anim-scale,
.jconfirm .jconfirm-box.anim-none,
.jconfirm .jconfirm-box.anim-rotate,
.jconfirm .jconfirm-box.anim-rotatex,
.jconfirm .jconfirm-box.anim-rotatey,
.jconfirm .jconfirm-box.anim-scaley,
.jconfirm .jconfirm-box.anim-scalex {
    opacity: 0;
}

.jconfirm .jconfirm-box.anim-rotate {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.jconfirm .jconfirm-box.anim-rotatex {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-rotatexr {
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-rotatey {
    -webkit-transform: rotatey(90deg);
    -ms-transform: rotatey(90deg);
    transform: rotatey(90deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-rotateyr {
    -webkit-transform: rotatey(-90deg);
    -ms-transform: rotatey(-90deg);
    transform: rotatey(-90deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-scaley {
    -webkit-transform: scaley(1.5);
    -ms-transform: scaley(1.5);
    transform: scaley(1.5);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-scalex {
    -webkit-transform: scalex(1.5);
    -ms-transform: scalex(1.5);
    transform: scalex(1.5);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-top {
    -webkit-transform: translate(0px, -100px);
    -ms-transform: translate(0px, -100px);
    transform: translate(0px, -100px);
}

.jconfirm .jconfirm-box.anim-left {
    -webkit-transform: translate(-100px, 0px);
    -ms-transform: translate(-100px, 0px);
    transform: translate(-100px, 0px);
}

.jconfirm .jconfirm-box.anim-right {
    -webkit-transform: translate(100px, 0px);
    -ms-transform: translate(100px, 0px);
    transform: translate(100px, 0px);
}

.jconfirm .jconfirm-box.anim-bottom {
    -webkit-transform: translate(0px, 100px);
    -ms-transform: translate(0px, 100px);
    transform: translate(0px, 100px);
}

.jconfirm .jconfirm-box.anim-zoom {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.jconfirm .jconfirm-box.anim-scale {
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

.jconfirm .jconfirm-box.anim-none {
    display: none;
}

.jconfirm.jconfirm-supervan .jconfirm-bg {
    background-color: rgba(54, 70, 93, 0.95);
}

.jconfirm.jconfirm-supervan .jconfirm-box {
    background-color: transparent;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.closeIcon {
    color: white;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.title-c {
    text-align: center;
    color: white;
    font-size: 28px;
    font-weight: normal;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.title-c> * {
    padding-bottom: 25px;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.content-pane {
    margin-bottom: 25px;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.content {
    text-align: center;
    color: white;
}

.jconfirm.jconfirm-supervan .jconfirm-box .buttons {
    text-align: center;
}

.jconfirm.jconfirm-supervan .jconfirm-box .buttons button {
    font-size: 16px;
    border-radius: 2px;
    background: #303f53;
    text-shadow: none;
    border: none;
    color: white;
    padding: 10px;
    min-width: 100px;
}

.jconfirm.jconfirm-material .jconfirm-bg {
    background-color: rgba(0, 0, 0, 0.67);
}

.jconfirm.jconfirm-material .jconfirm-box {
    background-color: white;
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 30px 25px 10px 25px;
}

.jconfirm.jconfirm-material .jconfirm-box div.closeIcon {
    color: rgba(0, 0, 0, 0.87);
}

.jconfirm.jconfirm-material .jconfirm-box div.title-c {
    color: rgba(0, 0, 0, 0.87);
    font-size: 22px;
    font-weight: bold;
}

.jconfirm.jconfirm-material .jconfirm-box div.content {
    text-align: left;
    color: rgba(0, 0, 0, 0.87);
}

.jconfirm.jconfirm-material .jconfirm-box .buttons {
    text-align: right;
}

.jconfirm.jconfirm-material .jconfirm-box .buttons button {
    text-transform: uppercase;
    font-weight: 500;
}

.jconfirm.jconfirm-bootstrap .jconfirm-bg {
    background-color: rgba(0, 0, 0, 0.21);
}

.jconfirm.jconfirm-bootstrap .jconfirm-box {
    background-color: white;
    box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2);
    border: solid 1px rgba(0, 0, 0, 0.4);
    padding: 15px 0 0;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box div.closeIcon {
    color: rgba(0, 0, 0, 0.87);
}

.jconfirm.jconfirm-bootstrap .jconfirm-box div.title-c {
    color: rgba(0, 0, 0, 0.87);
    font-size: 22px;
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box div.content {
    text-align: left;
    color: rgba(0, 0, 0, 0.87);
    padding: 0px 15px;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box .buttons {
    text-align: right;
    padding: 0px 0 0px;
    margin: -5px 0 0px;
    border-top: solid 1px #ddd;
    overflow: hidden;
    border-radius: 0 0 4px 4px;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box .buttons button {
    font-weight: 500;
    border-radius: 0px;
    margin: 0;
    border-left: solid 1px #ddd;
}
/*
.jconfirm .jconfirm-scrollpane .jconfirm-box-container {
    margin: auto;
    max-width: 400px;
    width: 100%;
}
*/

/* Stack rows vertically on small screens */

@media (max-width: 30em) {
    /* Hide column labels */
    th.checkbox_space,
    td.checkbox_space {
        display: none;
    }
    thead tr {
        position: absolute;
        top: -9999em;
        left: -9999em;
    }
    tr {
        border-bottom: 0;
        margin: 20px 0;
        clear: both;
        box-shadow: 0 0 3px #ccc;
    }
    /* Leave a space between table rows */
    tr+ tr {
        margin-top: 1.5em;
    }
    /* Get table cells to act like rows */
    tr,
    td {
        display: block;
    }
    td {
        border: none;
        /* Leave a space for data labels */
        padding-left: 50%;
    }
    /* Add data labels */
    td:before {
        content: attr(data-label);
        display: inline-block;
        font-weight: bold;
        line-height: 1.5;
        margin-left: -100%;
        width: 100%;
    }
}

.clear {
    clear: both;
}

.popup_container .popup_body {
    overflow: auto;
}

.image_gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
}

.image_gallery .overlay {
    float: left;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.image_gallery .images_container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.image_gallery .images_container .modal {
    width: 100%;
    max-width: 871px;
    margin: 100px auto;
    background: #fff;
    overflow: hidden;
    border-radius: 4px;
}

.image_gallery .images_container .modal .header {
    float: left;
    width: 100%;
    border-bottom: solid 1px #eee;
    padding: 10px;
}

.image_gallery .images_container .modal .header .title {
    float: left;
    font-size: 16px;
    color: #555;
    font-weight: 400;
}

.image_gallery .images_container .modal .header .close {
    float: right;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    background: #eee;
    font-size: 14px;
    color: #555;
    height: 30px;
    margin-top: 6px;
    text-align: center;
}

.image_gallery .images_container .modal .header .close i {
    line-height: 1.5;
}

.image_gallery .images_container .modal .img_cont {
    float: left;
    width: 100%;
    padding: 10px;
    max-height: 400px;
    overflow: auto;
}

.image_gallery .images_container .modal .img_cont .image {
    float: left;
    width: 150px;
    height: 150px;
    background: #f8f8f8;
    box-shadow: 0 0 3px #ccc;
    margin: 10px;
    position: relative;
    border: solid 2px transparent;
}

.image_gallery .images_container .modal .img_cont .image:hover {
    cursor: pointer;
    border: solid 2px #24b375;
}

.image_gallery .images_container .modal .img_cont .image.loading:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
}

.image_gallery .images_container .modal .img_cont .image.loading:hover {
    border-color: transparent;
}

.image_gallery .images_container .modal .img_cont .image.loading .loader {
    position: absolute;
    background: #fff;
    left: 34%;
    top: 0;
}

.image_gallery .images_container .modal .img_cont .image.selected {
    border: solid 2px #24b375;
}

.image_gallery .images_container .modal .img_cont .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image_gallery .images_container .modal .img_cont .image .actions {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding: 3px;
    background: rgba(0, 0, 0, 0.5);
}

.image_gallery .images_container .modal .img_cont .image .actions ul li {
    display: inline-block;
}

.image_gallery .images_container .modal .img_cont .image .actions ul li a {
    float: left;
    padding: 5px 8px;
}

.image_gallery .images_container .modal .img_cont .image .delete {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 10px;
    background: #24b375;
    border-radius: 0 0 0 10px;
    width: 29px;
    height: 33px;
    color: #fff;
    right: -1px;
    z-index: 9;
    text-align: center;
    line-height: 1.6;
    top: 0px;
}

.image_gallery .images_container .modal .img_cont .image:hover .delete {
    display: block;
}

.image_gallery .images_container .modal .footer {
    float: left;
    width: 100%;
    border-top: solid 1px #eee;
    padding: 10px;
}

.image_gallery .images_container .modal .footer .actions {
    float: right;
}

.image_gallery .images_container .modal .footer .actions ul li {
    display: inline-block;
}

.client_search {
    display: none;
    clear: both;
    float: left;
    width: 100%;
    padding: 19px;
}

.client_search .title {
    font-size: 14px;
    font-weight: 300;
    color: #555;
}

.field.half {
    width: 48%;
}

.field.right {
    float: right;
}

.field .selectize-input {
    margin-top: 9px;
}

.field .main_label {
    font-size: 16px;
    clear: both;
    width: 100%;
    border-bottom: solid 1px #eee;
    padding: 10px 0;
    text-transform: uppercase;
}

.field .d {
    float: left;
    width: 48%;
    margin-top: 11px;
}

.field .d.right {
    float: right !important;
}


/* Optional scoped theme for tag-it which mimics the zendesk widget. */

ul.tagit {
    padding: 1px 5px;
    overflow: auto;
    margin-left: inherit;
    /* usually we don't want the regular ul margins. */
    margin-right: inherit;
    float: left;
    width: 100%;
    margin-top: 7px;
    border-radius: 3px;
}

ul.tagit li {
    display: block;
    float: left;
    margin: 2px 5px 2px 0;
}

ul.tagit li.tagit-choice {
    position: relative;
    line-height: inherit;
}

input.tagit-hidden-field {
    display: none;
}

ul.tagit li.tagit-choice-read-only {
    padding: .2em .5em .2em .5em;
}

ul.tagit li.tagit-choice-editable {
    padding: .2em 18px .2em .5em;
}

ul.tagit li.tagit-new {
    padding: .25em 4px .25em 0;
}

ul.tagit li.tagit-choice a.tagit-label {
    cursor: pointer;
    text-decoration: none;
}

ul.tagit li.tagit-choice .tagit-close {
    cursor: pointer;
    position: absolute;
    right: .1em;
    top: 50%;
    margin-top: -8px;
    line-height: 17px;
}


/* used for some custom themes that don't need image icons */

ul.tagit li.tagit-choice .tagit-close .text-icon {
    display: none;
}

ul.tagit li.tagit-choice input {
    display: block;
    float: left;
    margin: 2px 5px 2px 0;
}

ul.tagit input[type="text"] {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
    width: inherit;
    background-color: inherit;
    outline: none;
}


/* Optional scoped theme for tag-it which mimics the zendesk widget. */

ul.tagit {
    border-style: solid;
    border-width: 1px;
    border-color: #C6C6C6;
    background: inherit;
}

ul.tagit li.tagit-choice {
    border: 1px solid #f1f1f1;
    background: none;
    background-color: #f1f1f1;
    font-weight: normal;
}

ul.tagit li.tagit-choice .tagit-label:not(a) {
    color: #555;
}

ul.tagit li.tagit-choice a.tagit-close {
    text-decoration: none;
}

ul.tagit li.tagit-choice .tagit-close {
    right: .4em;
}

ul.tagit li.tagit-choice .ui-icon {
    display: none;
}

ul.tagit li.tagit-choice .tagit-close .text-icon {
    display: inline;
    font-family: arial, sans-serif;
    font-size: 16px;
    line-height: 16px;
    color: #777;
}

ul.tagit li.tagit-choice:hover,
ul.tagit li.tagit-choice.remove {
    background-color: #bbcef1;
    border-color: #6d95e0;
}

ul.tagit li.tagit-choice a.tagLabel:hover,
ul.tagit li.tagit-choice a.tagit-close .text-icon:hover {
    color: #222;
}

ul.tagit input[type="text"] {
    color: #333333;
    background: none;
}

.ui-widget {
    font-size: 1.1em;
}


/* Forked from a jQuery UI theme, so that we don't require the jQuery UI CSS as a dependency. */

.tagit-autocomplete.ui-autocomplete {
    position: absolute;
    cursor: default;
}

* html .tagit-autocomplete.ui-autocomplete {
    width: 1px;
}


/* without this, the menu expands to 100% in IE6 */

.tagit-autocomplete.ui-menu {
    list-style: none;
    padding: 2px;
    margin: 0;
    display: block;
    float: left;
}

.tagit-autocomplete.ui-menu .ui-menu {
    margin-top: -3px;
}

.tagit-autocomplete.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}

.tagit-autocomplete.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: .2em .4em;
    line-height: 1.5;
    zoom: 1;
}

.tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-hover,
.tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}

.tagit-autocomplete.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #ffffff 50% 50% repeat-x;
    color: #222222;
}

.tagit-autocomplete.ui-corner-all,
.tagit-autocomplete .ui-corner-all {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}

.tagit-autocomplete .ui-state-hover,
.tagit-autocomplete .ui-state-focus {
    border: 1px solid #999999;
    background: #dadada;
    font-weight: normal;
    color: #212121;
}

.tagit-autocomplete .ui-state-active {
    border: 1px solid #aaaaaa;
}

.tagit-autocomplete .ui-widget-content {
    border: 1px solid #aaaaaa;
}

.tagit .ui-helper-hidden-accessible {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
}

.field ul li {
    display: inline-block;
}

.block {
    float: left;
    width: 100%;
    padding: 19px;
}

.block .title {
    font-size: 14px;
    color: #555;
    font-weight: 300;
    float: left;
    width: 100%;
}

.tagged_text {
    float: left;
    width: 100%;
    padding: 10px;
    border: solid 1px #eee;
    border-radius: 5px;
}

.tagged_text .selected_tag {
    float: left;
    padding: 5px;
    background: #24b375;
    border-radius: 30px;
    color: #fff;
    margin-bottom: 11px;
    cursor: pointer;
    transition-duration: 0.2s;
}

.tagged_text .selected_tag .number {
    float: left;
    padding: 5px;
    background: #1e9662;
    font-weight: 400;
    min-width: 27px;
    transition-duration: 0.2s;
    min-height: 27px;
    width: auto;
    border-radius: 10px;
    height: auto;
    text-align: center;
}

.tagged_text .selected_tag .number i {
    display: none;
    color: #fff;
    font-weight: 400;
    padding: 1px;
    transition-duration: 0.2s;
}

.tagged_text .selected_tag:hover {
    background: #1e9662;
}

.tagged_text .selected_tag:hover .number span {
    display: none;
}

.tagged_text .selected_tag:hover .number i {
    display: block;
}

.tagged_text .selected_tag p {
    float: left;
    margin: 0;
    padding: 5px;
}

.tagged_text .input_extra {
    float: left;
    width: 100%;
    border: solid 1px #d8d8d8;
    border-bottom: none;
    padding-bottom: 10px;
    border-radius: 5px 5px 0 0;
}

.tagged_text .input_extra ul.tagit {
    border-color: transparent !important;
}

.tagged_text .message_box {
    float: left;
    width: 100%;
    border: solid 1px #d8d8d8;
    padding: 10px;
    border-radius: 0 0 5px 5px;
}

.tagged_text .message_box.error {
    border-color: #a30;
}

.tagged_text .message_box textarea {
    border: none;
    width: 100%;
    height: 150px;
    resize: none;
    outline: 0;
}

.tagged_text .button_.send {
    float: left;
    width: 100%;
    text-align: right;
    padding: 10px 0;
}

.tagged_text .button_.send #leftChars {
    float: left;
    font-weight: 400;
    color: #24b375;
    padding: 8px;
}

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

.local_host {
    background: #fff;
    padding: 10px;
    margin: auto;
    position: fixed;
    top: -46px;
    width: 100%;
    z-index: 99;
    box-shadow: 0 0 3px #5a5a5a;
}

.local_host span {
    float: left;
    padding: 5px;
    border-right: solid 1px #e8e8e8;
    color: #333 !important;
}

.local_host .open_close {
    position: absolute;
    right: 30px;
    background: #fff;
    padding: 10px;
    font-size: 20px;
    bottom: -43px;
    box-shadow: 0px 2px 2px #acacac;
    cursor: pointer;
}

.loading_fix {
    position: fixed;
    top: 77px;
    right: 0;
    padding: 10px;
    background: #fff;
    border-radius: 5px 0 0 5px;
    display:none;
}

.loading_fix .loader {
    float: left;
    margin: 0;
    width: 30px;
    height: 30px;
    background: #eee;
}

.loading_fix span {
    float: left;
    padding: 6px;
    font-size: 14px;
    color: #777;
}

.opt_selection {
    display: none;
    margin: auto;
    width:100%;
    padding: 73px;
}
.opt_selection .selection_box {
    max-width: 44%;
    float: left;
    width: 100%;
    text-align: center;
    margin: 0 11px;
}
.opt_selection .selection_box .icon {
    float: left;
    width: 100%;
    height: 150px;
    background: #eee;
    border-radius: 5px;
    text-align: center;
}
.opt_selection .selection_box .icon i {
    line-height: 1.5;
    font-size: 100px;
    color: #555;
}
.opt_selection .selection_box .title {
    font-size: 16px;
    float: left;
    color: #555;
    width: 100%;
    font-weight: 400;
}
.opt_selection .selection_box .button {
    width: 182px;
}


.slide_images {
    float: left;
    width: 100%;
    padding: 10px;
}
.slide_images .image {
    float: left;
    width: 150px;
    height: 150px;
    background: #eee;
    border-radius: 5px;
    border: solid 2px #eee;
    cursor:pointer;
    margin: 10px;
    position:relative;
}
.slide_images .image:hover {
    background: #eee;
    border-radius: 5px;
    border: solid 2px #eee;
}

.slide_images .image.add:hover {
    background: #24b375;
    border-radius: 5px;
    border: solid 2px #0c8952;
}
.slide_images .image .add_icon {
    float: left;
    width: 100%;
    padding: 49px;
    font-size: 48px;
    color: #777;
}
.slide_images .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.slide_images .image .action {
    display:none;
    position: absolute;
    padding: 65px 35px;
    background: rgba(255,255,255,0.6);
}
.slide_images .image .loading {
    position: absolute;
    top: 0;
    padding: 54px;
    text-align: center;
    background: #d3d3d3;
    border-radius: 5px;
}
.slide_images .image .loading .loader {
    margin:0;
    border-left: 3px solid #24b375;
}
.slide_images .image:hover .add_icon {
    color: #0c8952;    
}
.slide_images .image:hover .action {
    display:block;
}
.totalePagareCard {
    color: #00804b;
}
/* Stack labels vertically on smaller screens */

@media (max-width: 20em) {
    td {
        padding-left: 0.75em;
    }
    td:before {
        display: block;
        margin-bottom: 0.75em;
        margin-left: 0;
    }
}

@media screen and (max-width:750px) {
    .main {
        margin: 0 auto;
        box-shadow: none;
    }
    body {
        background: #fff !important;
    }
    .main-header {
        position: fixed;
        z-index: 99;
        top: 0;
    }
    .main-header .logo {
        margin: 10px 0 !important;
    }
    .main-header .left_side {
        width: 172px;
    }
    .main-header .right_side {
        width: auto;
    }
    .main-header .right_side .user_menu {
        margin: 0 5px;
    }
    .main-header .right_side .user_menu .menu_text {
        display: none;
        margin: 10px 0;
    }
    .show_right_panel {
        display: block;
    }
    .wrapper {
        margin-top: 60px;
    }
    .wrapper .left_panel {
        width: 230px;
        float: left;
        position: fixed;
        top: 60px;
        z-index: 99;
        background: #fff;
        left: -300px;
        height: 100%;
        box-shadow: 2px 1px 3px #ccc;
        overflow: auto;
    }
    .wrapper .right_section {
        width: 100%;
    }
    .wrapper .right_section .center_panel {
        width: 100%;
    }
    .wrapper .right_section .right_panel {
        width: 230px;
        float: right;
        position: fixed;
        top: 60px;
        display: inline-block;
        z-index: 99;
        right: -300px;
        height: 100%;
        box-shadow: -1px 3px 3px #ccc;
        background: #fff;
        overflow: auto;
    }
    .main-header .left_side .show_main_menu {
        display: block;
    }
    .wrapper .right_section .center_panel .stats_cols .col {
        width: 43%;
    }
    .wrapper .right_section .center_panel .stats_cols .col:nth-child(even) {
        border-right: none;
    }
    .datepicker {
        left: 0 !important;
        bottom: 0;
        top: auto !important;
        width: 100%;
    }
    .datepicker .tip {
        display: none;
    }
    .wrapper .right_section .center_panel .panel_content .details_profile_section .mini_box {
        width: 48%;
    }
    .template_thumbnails_container .template_thumbnail {
        float: left;
        margin: 12px !important;
        padding: 42px 18px !important;
    }
    .compiler_form_container .inputs_container .left_block,
    .compiler_form_container .inputs_container .right_block {
        width: 100%;
    }
    .light_box_container .image_container .image {
        width: auto;
        height: auto;
        padding: 2px;
        margin: 50px auto;
    }
    .field label {
        font-size: 12px;
    }
    .main-header .right_side .submenu {
        position: fixed !important;
        top: 60px;
        right: 0;
        height: 100%;
        border-radius: 0;
        box-shadow: 0 4px 7px rgba(0, 0, 0, .36), 0 0 0 1px rgba(0, 0, 0, .06);
    }
    .main-header .right_side .submenu:before {
        display: none;
    }
}

@media screen and (max-width:567px) {
    .popup_container .popup_body .modal .modal_content .inputs_block {
        width: 100%;
    }
    .popup_container .popup_body .modal {
        margin-top: 0;
    }
    .popup_container .popup_body {
        overflow: auto;
    }
    .popup_container .popup_body .modal .modal_content .right_container {
        width: 100%;
    }
    .button.with-icon.mini {
        border-radius: 50%;
        padding: 8px 10px;
    }
    .button.with-icon.mini span {
        display: none;
    }
    .button.with-icon.mini i {
        margin-right: 0;
    }
}

@media screen and (max-width:500px) {
    .center_box .mini_box {
        width: 100%;
    }
    .list_container .list_col .details_section .detail_title {
        width: 67%;
    }
    .list_container .list_col .details_section .detail_title .main_title {
        width: 100%;
    }
}



@media  only screen and (max-width:1600px) {
   .main {
        max-width: 1500px;
        /*background-color: red;*/
    }
}

@media  only screen and (min-width:1601px) and (max-width:1920px) {
   .main {
        max-width: 1800px;
        /*background-color: yellow;*/
    }
}