/* `LAYOUT ---------------------------------------------------------------------------------------------------------- */

#container {
    min-height: 100%;
    position: relative;
}

#wrap-header {
    background: #2196F3;
    height: 60px;
}

#header {
    padding: 10px;
}

#wrap-content {
    padding-bottom: 80px;
}

#content {
    height: 100%;
    padding: 10px;
}

#wrap-footer {
    bottom: 0;
    width: 100%;
    height: 60px;
    position: absolute;
    background: #EEEEEE;
}

#footer {
    padding: 20px 0;
    font-size: 13px;
}

.ui-widget, .ui-widget .ui-widget, .headerRow td {
    font-size: 1em;
    font-family: 'PT Sans', 'Arial', serif;
}


.ui-widget-header, .ui-widget-header .ui-widget-header {
    background: none;
}

.ui-widget-content, .ui-widget-content .ui-widget-content {
    color: rgba(0, 0, 0, .87);
}

.ui-shadow {
    box-shadow: 0 0 1px rgba(9, 30, 66, 0.31), 0 20px 32px -8px rgba(9, 30, 66, 0.25);
}

.ui-corner-all {
    border-radius: 2px;
}

.ui-state-default .ui-icon {
    font-weight: 900;
    font-family: 'FontAwesome', 'Arial', sans-serif;
    background: none;
    content: "";
    text-indent: 0;
    font-size: 0 !important;
    width: inherit;
    display: inline;
}

.ui-state-default .ui-icon:before {
    font-size: 12px;
}

.ui-icon-seek-first:before {
    content: "\f100";
}

.ui-icon-seek-end:before {
    content: "\f101";
}

.ui-icon-seek-prev:before {
    content: "\f104";
}

.ui-icon-seek-next:before {
    content: "\f105";
}

.ui-icon-carat-2-n-s:before {
    content: "\f0dc";
    padding-left: 5px;
}

.ui-icon-triangle-1-s:before {
    content: "\f078";
    font-size: 10px !important;
}

.ui-icon-carat-2-n-s.ui-icon-triangle-1-n:before {
    content: "\f0de";
}

.ui-icon-carat-2-n-s.ui-icon-triangle-1-s:before {
    content: "\f0dd";
    font-size: 12px !important;
}

.ui-icon-check:before {
    content: "\f00c";
    font-size: 10px !important;
}

.ui-icon-bullet:before {
    content: "\f111";
    font-size: 10px !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    text-shadow: none;
    box-shadow: none;
    border-radius: 2px;
    border: 1px solid #cbd4e3;
    background: #fafcff;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover {

}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    box-shadow: none;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {

}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    text-shadow: none;
}

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    box-shadow: none;
    font-size: 15px;
    color: #172b4d;
}

.ui-inputfield.ui-state-focus, .ui-widget-content .ui-inputfield.ui-state-focus,
.ui-widget-header .ui-inputfield.ui-state-focus {
    box-shadow: none;
}

.ui-paginator {
    border: none;
    text-align: left;
    margin-top: 4px;
}

.ui-paginator .ui-paginator-page, .ui-paginator .ui-paginator-pages, .ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last, .ui-paginator .ui-paginator-first, .ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-current {
    padding: 4px;
    height: 27px;
    min-width: 30px;
    text-align: center;
    border: none;
    background: none;
    font-weight: normal;
    margin-left: 2px;
    margin-right: 2px;
    color: #2196F3;
}

.ui-paginator .ui-state-hover,
.ui-paginator .ui-state-active {
    font-weight: bold;
    background: #2196F3;
    color: #fff;
}

.ui-paginator .ui-paginator-rpp-label {
    display: inline-block;
    color: #2196F3;
    border-left: 1px solid #2196F3;
    padding-left: 16px;
    margin-left: 8px;
    font-size: 13px;
}

.ui-paginator .ui-paginator-rpp-options {
    background: inherit;
    border: none;
    height: 27px;
    color: #2196F3;
}

.ui-paginator .ui-paginator-current {
    float: right;
    font-weight: bold;
    margin-top: 9px;
}

.ui-spinner-input.ui-inputfield {
    padding-right: 20px;
}

.ui-spinner .ui-button {
    width: 16px;
    height: 50%;
    padding: 0;
    border-color: #e5e5e5;
    background: #eee;
}

.ui-spinner-up {
    top: 1px;
}

.ui-spinner-down {
    bottom: 1px;
}

.ui-growl {
    width: 260px;
}

.ui-growl-item-container {
    border: none;
    background: #aaa;
    opacity: 0.95;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.02);
}

.ui-growl-item-container.ui-growl-error {
    background: #d32f2f;
}

.ui-growl-item-container.ui-growl-info {
    background: #8BC34A;
}

.ui-growl-item-container.ui-growl-warn {
    background: #FF8A65;
}

.ui-growl-item-container:hover {
    opacity: 1;
}

.ui-growl-title {
    font-weight: normal;
    padding: 0;
}

.ui-growl-image {
    display: none;
}

.ui-growl-message {
    padding: 0;
    float: left;
}

.ui-selectonemenu {
    background: none;
    padding-right: 16px;
}

.ui-selectonemenu .ui-selectonemenu-label {
    height: 36px;
    padding: 7px 8px;
    background: #fafcff;
}

.ui-selectonemenu .ui-selectonemenu-trigger {
    background: #fafcff;
    border: none;
    color: #0f367d;
}

.ui-autocomplete .ui-autocomplete-dropdown {
    height: 36px;
    border: none;
    right: 0;
    top: 1px;
}

.ui-autocomplete .ui-autocomplete-dropdown.ui-state-hover {
    background: none;
    color: inherit;
}

.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    background: none;
    top: 2px;
}

.ui-autocomplete-dropdown .ui-icon {
    overflow: visible;
    top: 8px;
    left: 14px;
    width: 25px;
}

.ui-selectonemenu-panel.ui-input-overlay {
    border: none;
}

.ui-autocomplete-panel .ui-autocomplete-list,
.ui-selectonemenu-panel .ui-selectonemenu-list {
    padding: 0;
}

.ui-autocomplete-panel .ui-autocomplete-item,
.ui-selectonemenu-panel .ui-selectonemenu-item {
    color: #172B4D;
    padding: 6px 8px;
    border-radius: 0;
}

.ui-autocomplete-panel .ui-autocomplete-item.ui-state-hover,
.ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight,
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-hover,
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight {
    background: #F4F5F7;
}

.ui-datepicker {
    padding: 0;
    border: none;
    -webkit-box-shadow: 0 0 4px rgba(6, 8, 8, 0.15);
    -moz-box-shadow: 0 0 4px rgba(6, 8, 8, 0.15);
    -o-box-shadow: 0 0 4px rgba(6, 8, 8, 0.15);
    box-shadow: 0 0 4px rgba(6, 8, 8, 0.15);
}

.ui-datepicker .ui-datepicker-header {
    background: #f5f5f5;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 2px;
    top: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 2px;
    top: 2px;
}

.ui-datepicker td span, .ui-datepicker td a {
    padding: 4px 0;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default {
    text-align: center;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-hover {
    background: #ccc;
}

.ui-datepicker .ui-datepicker-current-day .ui-state-highlight, .ui-datepicker .ui-datepicker-current-day .ui-state-default {
    text-shadow: none;
}

.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {;
}

.ui-datepicker-next .ui-icon:before {
    content: "\f054";
    margin: 0 5px 0 2px;
}

.ui-datepicker-prev .ui-icon:before {
    content: "\f053";
    margin: 0 2px 0 5px;
}

.ui-datatable .ui-paginator, .ui-datatable .ui-paginator {
    padding: 10px 0 !important;
}

.ui-datatable .ui-datatable-footer {
    background: none;
}

tr.ui-datatable-empty-message td {
    text-align: center;
    color: #f5f5f5;
}

.ui-datalist-content.ui-widget-content {
    border: none;
}

.ui-selectonemenu.ui-state-focus {
    border-color: #1976D2;
}

.ui-chkbox-icon.ui-icon {
    left: 2px;
}

.ui-radiobutton-icon {
    top: -1px;
    left: 1px;
}

.ui-dialog {
    border: none;
    -webkit-box-shadow: 0 0 4px rgba(6, 8, 8, 0.15);
    -moz-box-shadow: 0 0 4px rgba(6, 8, 8, 0.15);
    -o-box-shadow: 0 0 4px rgba(6, 8, 8, 0.15);
    box-shadow: 0 0 4px rgba(6, 8, 8, 0.15);
}

.ui-dialog-titlebar {
    background: #f2f2f2;
}

.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-minimize,
.ui-dialog .ui-dialog-titlebar-maximize {
    margin-top: 3px;
}

.ui-dialog .ui-dialog-titlebar-close.ui-state-hover,
.ui-dialog .ui-dialog-titlebar-minimize.ui-state-hover,
.ui-dialog .ui-dialog-titlebar-maximize.ui-state-hover {
    background: #ccc;
    border-color: #ccc;
}

.ui-dialog .ui-dialog-content {
    padding: 20px 25px 10px;
    font-size: 14px;
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: center;
    border: none;
    padding-bottom: 20px;
}

.ui-confirmdialog-yes,
.ui-confirmdialog-no {
    width: 80px;
}

.ui-icon-alert.ui-icon {
    border-radius: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

.ui-icon-closethick:before {
    content: "\f00d";
}

.ui-icon-alert.ui-icon:before {
    content: "\f071";
}

.ui-messages-info-summary,
.ui-messages-warn-summary,
.ui-messages-error-summary,
.ui-messages-fatal-summary,
.ui-message-info-summary,
.ui-message-warn-summary,
.ui-message-error-summary,
.ui-message-fatal-summary {
    margin-left: 0;
}

.ui-inputswitch-on,
.ui-inputswitch-off,
.ui-chkbox-all .ui-icon,
.ui-widget-content .ui-icon,
.ui-chkbox-icon.ui-icon.ui-icon-check {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: none;
    text-indent: 0;
    text-align: center;
    padding: 1px;
}


.ui-chkbox-icon.ui-icon {
    overflow: hidden;
}

.ui-chkbox .ui-chkbox-box {
    background: #fff;
    border-color: #ddd;
    border-radius: 1px;
    text-shadow: none;
}

.ui-chkbox .ui-chkbox-box.ui-state-active {
    border-color: #03A9F4;
    background: #03A9F4;
    color: #fff;
}

.ui-selectmanycheckbox .ui-chkbox {
    margin-top: 8px;
}

.ui-inputswitch {
    width: 40px !important;
    height: 22px;
    border-radius: 24px;
    border: none;
    background: #eaeaea !important;
}

.ui-inputswitch .ui-inputswitch-handle {
    width: 22px !important;
    height: 22px;
    border-width: 2px;
    border-radius: 11px;
    border-color: #939bb7;
}

.ui-inputswitch .ui-inputswitch-on {
    background: none;
    padding: 0;
    height: auto;
}

.ui-inputswitch .ui-inputswitch-on span,
.ui-inputswitch .ui-inputswitch-off span {
    display: none;
}

.ui-inputswitch.ui-inputswitch-checked {
    background: #4CAF50 !important;
}

.ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-handle {
    border-color: #4CAF50;
}

.ui-inputgroup .ui-inputgroup-addon:first-child,
.ui-inputgroup .ui-inputgroup-addon-checkbox:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.ui-inputgroup .ui-inputgroup-addon,
.ui-inputgroup .ui-inputgroup-addon-checkbox {
    background: #f6f8fb;
    border-color: #cbd4e3;
    font-size: 15px;
    color: #172b4d;
    padding: 7px 8px 4px;
}

.ui-inputgroup .ui-inputgroup-addon.ui-inputgroup-separator {
    min-width: 1px;
    width: 1px;
    padding: 0;
    border-right: 0;
}

.ui-tabs {
    padding: 0;
    border: none;
}

.ui-tabs .ui-tabs-nav {
    background: none;
    border-bottom: 1px solid #2196F3;
}

.ui-tabs.ui-tabs-top > .ui-tabs-nav {
    padding: 0;
}

.ui-tabs .ui-tabs-nav li {
    background: #cbd4e3;
    border-color: #cbd4e3;
    font-size: 15px;
    text-shadow: none;
    min-width: 128px;
}

.ui-tabs .ui-tabs-nav li a {
    color: #2c4b9e;
    text-shadow: none;
    font-weight: normal;
    text-align: center;
    width: 100%;
}

.ui-tabs .ui-tabs-nav .ui-tabs-selected {
    background: #2196F3;
}

.ui-tabs .ui-tabs-nav .ui-tabs-selected a {
    color: #fff;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    border-color: #2196F3;
}

.ui-tabs .ui-tabs-panel {
    padding: 10px 0;
}

.ui-tabs.organization-tabs .ui-tabs-panel {
    min-height: 270px;
}

/* `HEADER ---------------------------------------------------------------------------------------------------------- */

.logo-text {
    margin: 8px 0;
    color: #f2f9fb;
    font-size: 17px;
    text-transform: uppercase;
}

.lang-bar-main {
    margin: 9px;
}

.lang-item {
    color: #fff;
    float: left;
    margin: 0 4px;
    display: block;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 14px;
    text-transform: uppercase;
}

.lang-item:hover {
    background: #1976D2;
    transition: background 0.3s ease;
}

.lang-item-current {
    background: #1976D2;
}

.item-lang {
    margin-top: 10px;
}

.item-lang .lang-current {
    color: #0086b7;
}

.item-lang a {
    color: #999;
}

/* `FOOTER ---------------------------------------------------------------------------------------------------------- */

.link-footer {
    color: #1E88E5;
    text-decoration: underline;
}

.link-footer:hover {
    text-decoration: none;
}

/* `SIGN IN --------------------------------------------------------------------------------------------------------- */

.sign-blc {
    width: 320px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -160px;;
}

.sign-blc-header {
    margin-top: 20px;
}

.sign-blc-icon {
    margin: auto;
    width: 128px;
    height: 128px;
    background: #FAFAFA;
    border: 1px solid #64B5F6;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
}

.sign-blc-icon .fa {
    top: 16px;
    left: 18px;
    color: #64B5F6;
    font-size: 128px;
    position: absolute;
}

.sign-blc-heading {
    display: block;
    font-size: 19px;
    color: #00aff0;
}

.sign-blc-form {
    padding: 20px;
}

.sign-form-field-wrap {
    position: relative;
    margin: 0 0 10px;
}

input.sign-form-field {
    width: 280px;
    height: 40px;
    font-size: 14px;
    padding-left: 10px;
    text-align: center;
    background: #E3F2FD;
    border-color: #BBDEFB;
    color: #42A5F5;
}

input.sign-form-field:hover,
input.sign-form-field:focus {
    border-color: #90CAF9;
}

input.sign-form-field::placeholder {
    color: #90CAF9;
}

.sign-form-btn {
    width: 280px;
    height: 40px;
    font-size: 15px;
    margin: 0 auto;
}

.link-testing {
    font-size: 16px;
    text-align: center;
    margin: 24px;
    text-transform: uppercase;
    font-weight: bold;
    color: #00aff0;
}


/* `PRIVATE --------------------------------------------------------------------------------------------------------- */

#sidebar {
    width: 220px;
    min-height: 100%;
    background: #2968ff;
    position: fixed;
    float: left;
}

#current-user {
    text-align: center;
    font-size: 16px;
    padding: 10px;
    color: #fff;
}

#current-user .fa-user {
    width: 64px;
    height: 64px;
    padding: 16px 0 0;
    background: #215dec;
    border: 1px solid #215dec;
    border-radius: 100%;
    font-size: 86px;
    overflow: hidden;
}

#current-user::after,
#settings::before,
.link-logout::before,
.server-date::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, transparent 0%, rgba(0, 0, 0, 0.07) 15%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.07) 85%, transparent 100%);
    background-image: -moz-linear-gradient(left, transparent 0%, rgba(0, 0, 0, 0.07) 15%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.07) 85%, transparent 100%);
    background-image: -ms-linear-gradient(left, transparent 0%, rgba(0, 0, 0, 0.07) 15%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.07) 85%, transparent 100%);
}

#current-user::after {
    top: 105px;
}

#settings {
    width: 100%;
    position: absolute;
    bottom: 0;
}

#settings::before {
    bottom: 67px;
}

#settings .lang-bar {
    padding: 0 10px;
}

.lang-bar li {
    float: left;
    color: #fff;
}

.lang-bar li a {
    display: block;
    padding: 5px 10px;
    text-transform: uppercase;
    font-size: 11px;
}

.lang-bar li a:hover {
    background: #1d57ef;
    color: #fff;
}

.lang-bar .fa {
    padding-right: 5px;
    color: #f5f5f5;
}

.lang-current {
    color: #fff;
    background: #1d57ef;
}

.link-logout {
    display: block;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.link-logout::before {
    bottom: 41px;
}

.link-logout:hover {
    background: #1d57ef;
}

.link-logout .fa {
    padding-right: 15px;
}

#content-top,
#content-private {
    width: -moz-calc(100% - 220px);
    width: -webkit-calc(100% - 220px);
    width: calc(100% - 220px);
    height: 100%;
    float: right;
    margin-left: calc(100% - 220px);
    padding: 10px 24px;
}

#content-top {
    height: 106px;
    /*border-bottom: 1px solid #e8e8e8;*/
}

#content-private {
    padding: 0 24px 10px;
}

#menu {
    padding: 16px 8px;
}

#menu ul li {
    margin: 2px 0;
}

#menu ul li a {
    width: 100%;
    display: block;
    padding: 8px 12px;
    border-radius: 2px;
    font-size: 14px;
    color: #fff;
}

#menu ul li a.active {
    background: #1d57ef;
}

#menu .fa {
    margin-right: 10px;
    display: inline-block;
    width: 15px;
    font-size: 15px;
    text-align: center;
}

#menu ul li a:hover {
    color: #fff;
}

#menu ul li ul {
    padding: 0;
}

#menu ul li ul li a {
    padding: 9px 15px 9px 25px;
}

.menu-count-notifier {
    float: right;
    background: #c9b248;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    text-align: center;
    font-size: 10px;
    padding-top: 1px;
}

.private .page-heading {
    font-size: 23px;
    color: #255cec;
}


.search-form-query-blc {
    position: relative;
}

.search-field-icon.fa-search {
    top: 13px;
    right: 8px;
    color: #0f367d;
    position: absolute;
}

.search-form-query-blc input[type="text"] {
    height: 38px;
    font-size: 15px;
    color: #1a79d7;
    padding-right: 25px;
    width: 512px;
}

.search-form .btn-apply {
    width: 102px;
}

.w-heading {
    width: -moz-calc(100% - 260px);
    width: -webkit-calc(100% - 260px);
    width: calc(100% - 260px);
    float: left;
}

.w-heading-items {
    width: -moz-calc(100% - 250px);
    width: -webkit-calc(100% - 250px);
}

.w-heading-claim {
    width: -moz-calc(100% - 480px);
    width: -webkit-calc(100% - 480px);
    width: calc(100% - 480px);
}

#candidate-search-form {
    padding: 10px 0;
}

#candidate-search-form table {
    margin-top: 5px;
}

.candidate-status-EXPELLED td {
    text-decoration: line-through;
}

.server-date {
    padding: 1px 10px 2px;
}

.server-date::after {
    bottom: 93px;
}

.claim-form {
    width: -moz-calc(100% - 260px);
    width: -webkit-calc(100% - 260px);
    width: calc(100% - 260px);
}

.candidate-history-blc {
    width: -moz-calc(100% - 380px);
    width: -webkit-calc(100% - 380px);
    width: calc(100% - 380px);
    min-height: 500px;
    padding: 8px 16px;
}

.candidate-history-blc.candidate-indiv-blc {
    padding: 0;
}

.claims-for-date {
    width: 260px;
    background: #f8f8f8;
    height: -moz-calc(100% - 50px);
    height: -webkit-calc(100% - 50px);
    height: calc(100% - 50px);
    position: absolute;
    right: 0;
    top: 104px;
}

.candidate-indiv-blc {
    border: 1px solid #f0f4fb;
    border-radius: 2px;
    min-height: 500px;
}

.form-candidate-search {
    min-height: 10px;
}

.form-group-candidate-search {
    padding-bottom: 10px;
    border-bottom: 1px solid #edf4ff;
}

.form-group-candidate .attention {
    border: 1px solid #f44336;
    padding: 5px 8px;
    background: #ffebee;
    border-radius: 2px;
    font-size: 14px;
}

.form-group-candidate .attention h2 {
    color: #f44336;
    font-weight: bold;
    font-size: 15px;
}

.form-group-candidate .attention label {
    color: #555;
}

.candidate-indiv-blc-heading,
.candidate-indiv-blc-body {
    padding: 8px 16px;
}

.candidate-indiv-blc-heading {
    background: #f0f4fb;
    font-size: 13px;
    text-transform: uppercase;
    color: #255bef;
}

.candidate-indiv-blc-info {
    margin-bottom: 10px;
    border-bottom: 1px solid #fafcff;
    padding-bottom: 10px;
}

.candidate-indiv-blc-info label {
    font-size: 14px;
    color: #777;
}

.candidate-indiv-blc-info p {
    font-size: 15px;
}

.candidate-save-form {
    border: 1px solid #f5f5f5;
    border-radius: 2px;
    padding: 8px 16px;
}

.claims-for-date p {
    padding: 8px 10px;
    background: #f2f2f2;
    color: #2196F3;
    font-size: 15px;
    text-align: center;
}

.claim {
    padding: 0 6px;
    background: #f8f8f8;
}

.inner-claim {
    display: block;
    padding: 7px 4px;
    border-bottom: 1px solid #f2f2f2;
}

#roles {
    padding: 0;
}

.select-one-btn .ui-button {
    color: #666;
    background: none;
    width: 120px;
    padding: 0;
    height: 36px;
    line-height: 34px;
    text-align: center;
    text-transform: none;
    font-weight: normal;
    font-size: 13px;
    border: 1px solid #fff;
    border-radius: 2px;
}

#boolean-switch.select-one-btn .ui-button,
.boolean-switch.select-one-btn .ui-button {
    width: 50px;
}

.gender-switch.select-one-btn .ui-button {
    width: 80px;
}

.select-one-btn .ui-button.ui-state-hover {
    border-color: #4CAF50;
}

.select-one-btn .ui-button.ui-state-active {
    background: #4CAF50;
    border-color: #4CAF50;
    color: #fff;
}

.activity-status .fa-check {
    color: #4CAF50;
}

.activity-status .fa-times {
    color: #f44336;
}

.license {
    width: 50px;
    height: 24px;
    background: #ccc;
    border-radius: 2px;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
    margin: auto;
}

.category {
    font-size: 12px;
    line-height: 2em;
}

.fa-license {
    display: block;
    width: 50%;
    height: 100%;
    float: left;
    font-size: 12px;
    text-align: center;
    padding: 6px 0;
    background: #bbb;
}

.claim-changes-count {
    width: 24px;
    height: 24px;
    display: inline-block;
    cursor: pointer;
    border-radius: 2px;
    background: #00a6e7;
    color: #fff;
    padding: 3px 0;
    font-size: 12px;
    font-weight: bold;
}

.claim-status,
.claim-treatment-status {
    font-size: 17px;
}

.claim-status.CREATED {
    color: #9E9E9E;
}

.claim-status.PENDING,
.claim-treatment-status.SENT {
    color: #FFC107;
}

.claim-status.VERIFIED,
.claim-treatment-status.APPROVED {
    color: #4CAF50;
}

.claim-status.REJECTED,
.claim-treatment-status.REJECTED {
    color: #f44336;
}

.license.PENDING,
.license.VERIFIED,
.license.INVALID {
    color: #263238;
}

.license.PENDING {
    background: #FFC107;
}

.license.PENDING .fa-license {
    background: #FFB300;
}

.license.VERIFIED {
    background: #4CAF50;
}

.license.VERIFIED .fa-license {
    background: #43A047;
}

.license.REJECTED {
    background: #f44336;
}

.license.REJECTED .fa-license {
    background: #e53935;
}

.fa-license.fa-A,
.fa-license.fa-A1,
.fa-license.fa-B,
.fa-license.fa-B1 {
    font-size: 11px;
}

.fa-license:before {
    content: "\f0d1";
}

.fa-license.fa-A:before,
.fa-license.fa-A1:before {
    content: "\f21c";
}

.fa-license.fa-B:before,
.fa-license.fa-B1:before {
    content: "\f1b9";
}

.fa-license.fa-D:before,
.fa-license.fa-D1:before {
    content: "\f207"
}

.fa-license.fa-А:before,
.fa-license.fa-Б:before,
.fa-license.fa-В:before,
.fa-license.fa-Г:before,
.fa-license.fa-Д:before,
.fa-license.fa-Е:before,
.fa-license.fa-Е1:before {
    content: "\f111"
}

.test-result {
    width: 74px;
    background: #f2f2f2;
    border: 1px solid #eee;
    border-radius: 2px;
    margin: auto;
}

.test-result .test-result-item {
    width: 23px;
    float: left;
    border-right: 1px solid #eee;
    padding: 3px;
    text-align: center;
    height: 100%;
}

.test-result .activity-status {
    width: 26px;
    border-right: none;
}

.stat-online,
.stat-offline {
    font-size: 10px;
    margin-bottom: 6px;
}

.stat-online {
    color: #4CAF50;
}

.stat-offline {
    color: #f44336;
}

.report-list li {
    margin: 2px 0;
}

.report-list li a {
    display: block;
    background: #E1F5FE;
    padding: 5px 10px;
    border-radius: 2px;
    color: #34495e;
    border: 1px solid #B3E5FC;
    font-weight: bold;
}

.report-list li:hover a {
    color: #0277BD;
    background: #B3E5FC;
    border: 1px solid #81D4FA;
}

.user-prac-cat {
    padding: 0 0 0 4px;
    background: #EEEEEE;
    border-radius: 2px;
    width: 52px;
}

.user-prac-cat-name {
    padding: 2px 0;
    font-weight: bold;
}

.user-prac-cat-name.TRANSPORT {
    color: #4CAF50;
}

.user-prac-cat-name.AGRICULTURAL {
    color: #FF5722;
}

/* `DASHBOARD ---------------------------------------------------------------------------- */

.dashboard-section {
    padding: 10px;
    background: #f5f5f5;
    margin-right: 20px;
    border-radius: 2px;
    min-height: 225px;
    min-width: 350px;
}

.dashboard-section label {
    color: #777;
}

.dashboard-section-title {
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 5px;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
}

/* `BUTTONS ------------------------------------------------------------------------------ */

.btn-mng .fa-pencil {
    color: #03A9F4;
}

.btn-mng .fa-trash {
    color: #f44336;
}

.btn-mng .fa-info {
    color: #FFC107;
}

.btn-mng .fa-print,
.btn-mng .fa-key {
    color: #1abc9c;
}

.btn-mng .fa-play {
    color: #d9c26c;
}

.btn-mng.disabled .fa-play {
    color: #4a5d75;
}

.btn-add {
    font-family: 'PT Sans', 'Arial', serif !important;
    font-size: 11px !important;
}

/* `HOME PAGE --------------------------------------------------------------------------- */

#messages {
    background: #f5f5f5;
}

#messages.error {
    background: red;
}

.share-title {
    color: #3498db;
    display: block !important;
    margin: 0 0 5px 5px;
}


/* `DROPDOWN FOR MAP -------------------------------------------------------------------------- */

#dropdown-holder {
    background: #fff;
    color: #5b5b5b;
    cursor: pointer;
    position: relative;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
    -o-box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
    -moz-box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
    font-family: 'HattoriHanzo', 'PT-Sans', serif;
    margin: 10px;
}

.dropdown-header {
    border-bottom: 1px solid #ededed;
    font-size: 17px;
    padding: 10px 5px 10px 15px;
    width: 188px;
}

.btn-dropdown {
    width: 30px;
    height: 28px;
    display: block;
    border-left: 1px solid #ededed;
}

.dropdown {
    z-index: -1;
    position: relative;
    padding-bottom: 5px;
    display: none;
}

.dropdown-item {
    padding: 5px 25px 5px 15px;
    text-align: left;
    font-size: 15px;
}

.dropdown-item:hover {
    background: #f5f5f5;
}

.info-window {
    width: 180px;
    height: auto;
}

.info-window p {
    font-size: 13px;
}

/* `TABLE
----------------------------------------------------------------------------------------------------------------------*/

.display-table {
    border: none;
}

.display-table .ui-widget-content {
    border: none;
    background: none;
}

.display-table .ui-state-default {
    box-shadow: none;
    text-shadow: none;
}

.display-table thead tr th,
.display-table tbody tr td {
    height: 48px;
    border-left: none;
    border-right: none;
    border-color: #ededed;
    text-align: left;
    color: #484848;
}

.display-table .number-col {
    text-align: center;
    width: 40px;
}

.display-table .time-col {
    width: 100px;
}

.display-table thead tr th,
.display-table thead tr th.ui-state-default {
    color: #2196F3;
    font-size: 11px;
    height: 40px;
    background: none;
    border: none;
    border-bottom: 2px solid #2196F3;
    text-transform: uppercase;
}

.display-table tbody tr:hover td {
    background: #f4f8ff;
}

.data-table {
    width: 100%;
}

.data-table thead tr th,
.data-table tbody tr td {
    height: 40px;
    color: #484848;
    border-left: none;
    border-right: none;
    border-color: #ededed;
    text-align: left;
    padding: 4px;
}

.data-table thead tr th {
    color: #2196F3;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid #2196F3;
}

.td-info-accent,
a.td-info-accent {
    color: #0f367d;
    text-transform: uppercase;
}

a.td-info-accent {
    text-decoration: underline;
}

.td-info-secondary {
    color: #757575;
    font-size: 11px;
}

.theory-testing-list-category {
    color: #484848;
    background: #eee;
    font-size: 12px;
    line-height: 12px;
    font-weight: bold;
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    padding: 1px 2px;
    width: 24px;
}

.theory-testing-payment-amount {
    color: #484848;
    background: #eee;
    font-size: 12px;
    line-height: 12px;
    font-weight: bold;
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    padding: 1px 2px;
    width: 34px;
    width: fit-content;
}

.theory-testing-list-purpose {
    color: #484848;
}

.theory-testing-list-type-category .license {
    margin: 0;
}

.theory-testing-list-full-name {
    word-spacing: 3px;
    letter-spacing: 1px;
}

/* `THEORY-TESTINGS-TABLE
--------------------------------------------------------------------------------------------------------------------- */

/*.theory-testings-table .theory-testing-status-TESTED-success td,
.theory-testings-table .theory-testing-status-TESTED-success td .fw-bld {
    color: #4CAF50 !important;
}*/

/*.theory-testings-table {
    border-collapse: separate !important;
    border-spacing: 0 1px;
}

.theory-testings-table tbody tr td {
    border-width: 1px;
    border-style: solid;
    border-color: #d9dff0;
    border-right-width: 0;
    border-left-width: 0;
    height: 40px;
}

.theory-testings-table .theory-testing-status-TESTED td {
    border-color: #f44336;
    background: #ffebee;
}

.theory-testings-table .theory-testing-status-EXEMPTED td,
.theory-testings-table .theory-testing-status-TESTED-success td {
    border-color: #4CAF50;
    background: #F1F8E9;
}

.theory-testings-table thead tr th {
    border-color: #f5f6fa;
    background: #f5f6fa;
    color: #0D47A1;
    border-radius: 0;
    border-bottom: 0;
}

.theory-testings-table tbody tr td:first-child {
    border-radius: 4px 0 0 4px;
    border-left-width: 1px;
}

.theory-testings-table tbody tr td:last-child {
    border-radius: 0 4px 4px 0;
    border-right-width: 1px;
}*/

/* `FORM-TABLE
--------------------------------------------------------------------------------------------------------------------- */

.form-table {
    width: 100%;
}

.form-table tr:first-child {

}

.form-table tr {
    border-bottom: 1px dashed #cbd4e3;
}

.form-table tr:last-child {
    border-bottom: none;
}

.form-table tr td {
    padding: 16px;
}

.license-inner-table .form-table-odd-col {
    padding: inherit;
}

.license-inner-table tr:first-child {
    border-top: none;
}

/*
.form-table tr td div > label {
    color: #6a758f;
    font-size: 14px;
}*/

.form-table tr td:first-child {
    width: 148px;
    font-size: 15px;
    padding-right: 24px;
}

/*.form-table input[type=text] {
    min-width: 256px;
}*/

/* `INFO-TABLE
--------------------------------------------------------------------------------------------------------------------- */

.info-table tr td {
    padding: 8px 16px;
    border-bottom: 1px solid #cbd4e2;
}

.info-table-label {
    font-weight: bold;
}

/* `INFO-BLOCK
--------------------------------------------------------------------------------------------------------------------- */

.info-block {
    background: #fafcff;
    border-radius: 2px;
    border: 1px solid #f6f9fd;
}

.info-block-heading {
    padding: 4px 8px;
    font-size: 17px;
    color: #2660ed;
    background: #f6f9fd;
}

.info-block-body {
    padding: 8px;
    font-size: 15px;
}

.info-block-red {
    background: #ffebee;
    border: 1px solid #ffcdd2;
}

.info-block-red .info-block-heading {
    color: #e53935;
    background: #ffcdd2;
}

/* `INFO VIEW
----------------------------------------------------------------------------------------------------------------------*/

.info-view {
    background: #fafcff;
    padding: 4px;
    border: 1px solid #edf4ff;
    border-radius: 2px;
}

.info-view > div {
    float: left;
    padding: 0 8px;
    font-size: 14px;
    border-right: 1px dashed #edf4ff
}

.info-view > div.first {
    padding-left: 4px;
}

.info-view > div.last {
    border-right: none;
}

.info-view-label {
    font-size: 10px;
    text-transform: uppercase;
}

/* `BREADCRUMB
----------------------------------------------------------------------------------------------------------------------*/

ul.breadcrumb {
    height: 21px;
    padding: 0 4px 1px;
    border-radius: 2px;
    background: #fafcff;
    margin: 6px 0 16px;
    /*border: 1px solid #f5f5f5;*/
}

.breadcrumb.small-m-btm {
    margin-bottom: 8px;
}

ul.breadcrumb.new {
    margin: 0 0 8px;
}

ul.breadcrumb li {
    color: #1847a4;
    display: inline;
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
}

ul.breadcrumb li + li:before {
    padding: 2px 4px 2px 3px;
    content: "\203A";
    font-size: 16px;
}

ul.breadcrumb li.back-link {
    float: right;
}

ul.breadcrumb li.back-link:before {
    content: "";
}

/* `CONTENT NAV
----------------------------------------------------------------------------------------------------------------------*/

ul.content-nav {
    border-bottom: 1px solid #e4edfb;
    margin-bottom: 16px;
}

ul.content-nav li {
    float: left;
    padding: 2px 24px 0 8px;
}

ul.content-nav li a {
    display: block;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 4px 2px;
    color: #769eff;
}

ul.content-nav li.current a,
ul.content-nav li a.active {
    color: #255dec;
    border-bottom: 2px solid #255dec;
}

/* `CONTENT TOP NAV
----------------------------------------------------------------------------------------------------------------------*/

ul.content-top-nav {
    border-bottom: 1px solid #e4edfb;
}

ul.content-top-nav li {
    float: left;
    padding: 8px 24px 0 8px;
}

ul.content-top-nav li a {
    display: block;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 18px 2px;
    color: #769eff;
}

ul.content-top-nav li.current a,
ul.content-top-nav li a.active {
    color: #255dec;
    border-bottom: 2px solid #255dec;
}

/* `PERSON INFO
----------------------------------------------------------------------------------------------------------------------*/

.person-info {
    padding: 8px 4px;
    border-radius: 2px;
    border: 1px solid #e4edfb;
    background: #fdfeff;
}

.person-info-item {
    padding: 0 16px;
    border-right: 1px solid #f5f9ff;
}

.person-info-item:first-of-type {
    padding-left: 8px;
}

.person-info-item .fa {
    width: 38px;
    height: 38px;
    font-size: 16px;
    text-align: center;
    border-radius: 50px;
    overflow: hidden;
    margin-right: 8px;
    padding: 11px 0 0;
    color: #769eff;
    background: #f5f9ff;
}

.person-info-item label {
    color: #263238;
    font-size: 10px;
    text-transform: uppercase;
}

.person-info-item p {
    font-size: 14px;
    color: #255ded;
    text-transform: uppercase;
}

/* `PRACTICE PERSON INFO
----------------------------------------------------------------------------------------------------------------------*/

.practice-person-info {
    border: 1px solid #e4edfb;
    border-radius: 2px;
    padding: 10px 4px;
    background: #fdfeff;
}

.practice-person-info-block {
    padding: 0 24px;
    border-right: 1px solid #f5f9ff;
}

.practice-person-info-block.first {
    padding: 0 24px 0 10px;
}

.practice-person-info-block.last {
    padding: 0 10px 0 24px;
    border-right: none;
}

.practice-person-info-block .fa {
    width: 54px;
    height: 54px;
    font-size: 20px;
    text-align: center;
    border-radius: 50px;
    overflow: hidden;
    margin-right: 8px;
    padding: 18px 0 0;
    color: #769eff;
    background: #f5f9ff;
}

.practice-person-info-block label {
    color: #263238;
    font-size: 10px;
    text-transform: uppercase;
}

.practice-person-info-block div {
    padding: 5px;
}

.practice-person-info-block p {
    font-size: 16px;
    color: #255ded;
    text-transform: uppercase;
}

.practice-categories {
    float: left;
    border-radius: 12px;
    padding: 1px 6px;
    margin-top: 3px;
    background: #FF8A65;
    color: #fff;
}

p.practice-categories {
    color: #fff;
    font-size: 13px;
}

.practice-categories.existing {
    color: #F1F8E9;
    background: #9CCC65;
}

.practice-categories-tab.ui-tabs .ui-tabs-nav {
    border-bottom: 1px solid #e4edfb;
}

.practice-categories-tab.ui-tabs .ui-tabs-nav li {
    max-width: 40px;
    min-width: 40px;
    font-size: 14px;
    margin: 0 1px;
    border-radius: 2px 2px 0 0;
}

.practice-categories-tab.ui-tabs .ui-tabs-nav li a {
    padding: 0;
    color: #fff;
}

.practice-categories-tab.ui-tabs .ui-tabs-nav li.passed {
    background: #9CCC65;
    border-color: #9CCC65;
}

.practice-categories-tab.ui-tabs .ui-tabs-nav li.available {
    background: #FF8A65;
    border-color: #FF8A65;
}

.practice-categories-tab.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    background: #255dec;
    border-color: #255dec;
}

.practice-categories-tab .display-table thead tr th {
    color: #255dec;
    border-bottom: 2px solid #e4edfb;
}

.practice-items-list thead {
    display: none;
}

.practice-items-list tbody tr td {
    height: 36px;
    color: #263238;
}

.practice-items-list tbody tr:first-child td {
    border-top: none;
}

.practice-items-list tbody tr:last-child td {
    border-bottom: none;
}

.practice-items-list tbody tr td:first-child span {
    width: 20px;
    display: inline-block;
    border-radius: 50%;
    font-size: 13px;
    color: #fff;
}

.practice-items-list-passed span {
    background: #9CCC65;
}

.practice-items-list-available span {
    background: #FF5722;
}

.category-def {
    background: #f5f9ff;
    border-radius: 2px;
    color: #608bf5;
    padding: 8px;
    margin-bottom: 4px;
}

/* `TESTING --------------------------------------------------------------------------------------------------------- */

.identification-blc {
    padding-top: 24px;
    text-align: center;
    margin: auto;
}

.identification-blc-heading {
    color: #1E88E5;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 24px;
    text-transform: uppercase;
    display: inline-block;
}

.identification-blc-live-video {
    width: 402px;
    height: 302px;
    margin: auto;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
    border: 1px solid #2f8be6;
    position: relative;
}

.identification-blc-live-video #video {
    width: 400px;
}

.identification-form {
    margin: 0 auto;
    position: relative;
    font-size: 14px;
    padding: 20px;
    text-align: center;
}

.identification-form label {
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.identification-form input[type="text"] {
    height: 48px;
    width: 402px;
    text-align: center;
    font-size: 18px;
    border-radius: 3px 3px 0 0;
    border-color: #2f8be6;
}

.identification-form input[type="text"]:hover {

}

.identification-form a {
    text-transform: uppercase;
}


.testing-info h2 {
    margin: 24px 0 36px;
    font-size: 21px;
    font-weight: bold;
}

.identification-second-level {
    position: relative;
}

#face-id-photo {
    position: absolute;
    top: 0;
}

.face-id-photo-loader {
    background: #fff;
    width: 400px;
    height: 300px;
    padding: 72px 0;
}

.testing-info-photo {
    margin: auto;
    width: 156px;
    height: 156px;
    border-radius: 50%;
    border: 1px solid #eee;
    color: #00a6e7;
    text-align: center;
    padding: 42px 0;
    font-size: 48px;
    font-weight: bold;
}

.testing-info-items {
    text-align: center;
    padding: 16px 0 20px;
}

.testing-info-item {
    width: 168px;
    color: #00a6e7;
    font-size: 21px;
    font-weight: bold;
    display: inline-block;
}

.testing-info-item label {
    font-size: 13px;
    text-transform: uppercase;
}

.testing-info-btn {
    height: 48px;
    font-size: 16px;
    border-radius: 3px;
    font-weight: normal;
}

/* `THEORY TESTING INFO --------------------------------------------------------------------------------------------- */

.theory-testing-info-group {
    display: flex;
    justify-content: center;
    padding: 16px;
}

.theory-testing-info-group-item {
    color: #00a6e7;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 0 8px;
    min-width: 128px;
}

.theory-testing-info-group-item label {
    color: #5b5b5b;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.btn-green.testing-info-btn {

}

.identification-blc .btn-identification {
    width: 402px;
    border-radius: 0 0 3px 3px;
}

.btn-identification:hover {
    box-shadow: 0 6px 8px -5px #2f8ae6;
}

.btn-identification:active {
    box-shadow: 0 2px 6px -2px #2f8ae6;;
}

.testing-info-status {
    height: 156px;
    padding: 40px 0;
    font-size: 48px;
    text-align: center;
    text-transform: uppercase;
}

.testing-info-status-passed {
    color: #4CAF50;
}

.testing-info-status-failed {
    color: #f44336;
}

.auto-claim-blc {
    font-size: 19px;
}

.late-blc {
    font-size: 19px;
    color: #f44336;
}

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.9;
    filter: alpha(opacity=80);
}

#loading {
    top: 36%;
    width: 400px;
    position: relative;
    margin: auto;
}

#loader {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    animation: loader-circles 1s linear infinite;
    margin: -8px auto 0 auto;
}

#loader-text {
    width: inherit;
    text-align: center;
    color: #0052ec;
    text-transform: uppercase;
    font-size: 36px;
    margin-top: 56px;
    letter-spacing: 3px;
}

@keyframes loader-circles {
    0% {
        box-shadow: 0 -40px 0 0 rgba(0, 82, 236, 0.05), 28px -28px 0 0 rgba(0, 82, 236, 0.1), 40px 0 0 0 rgba(0, 82, 236, 0.2), 28px 28px 0 0 rgba(0, 82, 236, 0.3), 0 40px 0 0 rgba(0, 82, 236, 0.4), -28px 28px 0 0 rgba(0, 82, 236, 0.6), -40px 0 0 0 rgba(0, 82, 236, 0.8), -28px -28px 0 0 #0052ec;
    }
    12.5% {
        box-shadow: 0 -40px 0 0 #0052ec, 28px -28px 0 0 rgba(0, 82, 236, 0.05), 40px 0 0 0 rgba(0, 82, 236, 0.1), 28px 28px 0 0 rgba(0, 82, 236, 0.2), 0 40px 0 0 rgba(0, 82, 236, 0.3), -28px 28px 0 0 rgba(0, 82, 236, 0.4), -40px 0 0 0 rgba(0, 82, 236, 0.6), -28px -28px 0 0 rgba(0, 82, 236, 0.8);
    }
    25% {
        box-shadow: 0 -40px 0 0 rgba(0, 82, 236, 0.8), 28px -28px 0 0 #0052ec, 40px 0 0 0 rgba(0, 82, 236, 0.05), 28px 28px 0 0 rgba(0, 82, 236, 0.1), 0 40px 0 0 rgba(0, 82, 236, 0.2), -28px 28px 0 0 rgba(0, 82, 236, 0.3), -40px 0 0 0 rgba(0, 82, 236, 0.4), -28px -28px 0 0 rgba(0, 82, 236, 0.6);
    }
    37.5% {
        box-shadow: 0 -40px 0 0 rgba(0, 82, 236, 0.6), 28px -28px 0 0 rgba(0, 82, 236, 0.8), 40px 0 0 0 #0052ec, 28px 28px 0 0 rgba(0, 82, 236, 0.05), 0 40px 0 0 rgba(0, 82, 236, 0.1), -28px 28px 0 0 rgba(0, 82, 236, 0.2), -40px 0 0 0 rgba(0, 82, 236, 0.3), -28px -28px 0 0 rgba(0, 82, 236, 0.4);
    }
    50% {
        box-shadow: 0 -40px 0 0 rgba(0, 82, 236, 0.4), 28px -28px 0 0 rgba(0, 82, 236, 0.6), 40px 0 0 0 rgba(0, 82, 236, 0.8), 28px 28px 0 0 #0052ec, 0 40px 0 0 rgba(0, 82, 236, 0.05), -28px 28px 0 0 rgba(0, 82, 236, 0.1), -40px 0 0 0 rgba(0, 82, 236, 0.2), -28px -28px 0 0 rgba(0, 82, 236, 0.3);
    }
    62.5% {
        box-shadow: 0 -40px 0 0 rgba(0, 82, 236, 0.3), 28px -28px 0 0 rgba(0, 82, 236, 0.4), 40px 0 0 0 rgba(0, 82, 236, 0.6), 28px 28px 0 0 rgba(0, 82, 236, 0.8), 0 40px 0 0 #0052ec, -28px 28px 0 0 rgba(0, 82, 236, 0.05), -40px 0 0 0 rgba(0, 82, 236, 0.1), -28px -28px 0 0 rgba(0, 82, 236, 0.2);
    }
    75% {
        box-shadow: 0 -40px 0 0 rgba(0, 82, 236, 0.2), 28px -28px 0 0 rgba(0, 82, 236, 0.3), 40px 0 0 0 rgba(0, 82, 236, 0.4), 28px 28px 0 0 rgba(0, 82, 236, 0.6), 0 40px 0 0 rgba(0, 82, 236, 0.8), -28px 28px 0 0 #0052ec, -40px 0 0 0 rgba(0, 82, 236, 0.05), -28px -28px 0 0 rgba(0, 82, 236, 0.1);
    }
    87.5% {
        box-shadow: 0 -40px 0 0 rgba(0, 82, 236, 0.1), 28px -28px 0 0 rgba(0, 82, 236, 0.2), 40px 0 0 0 rgba(0, 82, 236, 0.3), 28px 28px 0 0 rgba(0, 82, 236, 0.4), 0 40px 0 0 rgba(0, 82, 236, 0.6), -28px 28px 0 0 rgba(0, 82, 236, 0.8), -40px 0 0 0 #0052ec, -28px -28px 0 0 rgba(0, 82, 236, 0.05);
    }
    100% {
        box-shadow: 0 -40px 0 0 rgba(0, 82, 236, 0.05), 28px -28px 0 0 rgba(0, 82, 236, 0.1), 40px 0 0 0 rgba(0, 82, 236, 0.2), 28px 28px 0 0 rgba(0, 82, 236, 0.3), 0 40px 0 0 rgba(0, 82, 236, 0.4), -28px 28px 0 0 rgba(0, 82, 236, 0.6), -40px 0 0 0 rgba(0, 82, 236, 0.8), -28px -28px 0 0 #0052ec;
    }
}

.circle-loader {
    margin: 0;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-left-color: #5cb85c;
    animation-name: loader-spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.circle-loader,
.circle-loader:after {
    border-radius: 50%;
    width: 156px;
    height: 156px;
}

.load-complete {
    -webkit-animation: none;
    animation: none;
    border-color: #5cb85c;
    transition: border 500ms ease-out;
}

.checkmark.draw:after {
    animation-duration: 800ms;
    animation-timing-function: ease;
    animation-name: checkmark;
    transform: scaleX(-1) rotate(135deg);
}

.checkmark:after {
    opacity: 1;
    height: 78px;
    width: 39px;
    transform-origin: left top;
    border-right: 2px solid #5cb85c;
    border-top: 2px solid #5cb85c;
    content: '';
    left: 39px;
    top: 79px;
    position: absolute;
}

@keyframes loader-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }
    20% {
        height: 0;
        width: 39px;
        opacity: 1;
    }
    40% {
        height: 78px;
        width: 39px;
        opacity: 1;
    }
    100% {
        height: 78px;
        width: 39px;
        opacity: 1;
    }
}

.detail-person div {
    padding: 5px 20px 0 5px;
    font-size: 16px;
}

.testing-info-face-history {
    text-align: center;
    margin-top: 24px;
}

.testing-info-face-list {
    display: inline-block;
}

.testing-info-face {
    float: left;
    margin: 2px 2px 2px 0;
    width: 128px;
}

.testing-info-face-thumb {
    position: relative;
}

.testing-info-face-date {
    font-size: 12px;
    padding: 0 9px;
    color: #fff;
}

.testing-info-face-update {
    color: #fff !important;
}

.testing-info-face-date.face-true {
    background: #4CAF50;
}

.testing-info-face-date.face-false {
    background: #f44336;
}

.testing-info-face-thumb img {
    width: 128px;
}

.testing-info-face-thumb .fa {
    position: absolute;
    top: 0;
    right: 0;
}

/* `ADD ITEM -------------------------------------------------------------------------------------------------------- */

.item-category,
.item-question {
    width: 720px;
}

.item-choice .fa-bars {
    color: #ccc;
    margin-top: 9px;
    width: 10px;
    overflow: hidden;
}

.item-choice-text {
    width: 656px;
    height: 34px;
    min-height: 34px;
    margin: 0;
}

.item-choice-chkbox {
    display: block;
    border-radius: 3px;
}

.item-choice-chkbox .ui-chkbox-box {
    width: 34px;
    height: 34px;
    border-radius: 2px !important;
}

.item-choice-chkbox .ui-chkbox-box.ui-state-hover {
    border-color: #A5D6A7;
}

.item-choice-chkbox .ui-chkbox-box.ui-state-active {
    border-color: #43A047 !important;
    background: #4CAF50 !important;
}

.item-choice-chkbox .ui-icon {
    width: 16px;
    margin: 8px;
    color: #fff;
    font-size: 12px;
}

.view-item-choice-chkbox .ui-state-disabled {
    opacity: 1;
}

.item-choice-add-btn {
    width: 34px;
    height: 34px;
    padding: 9px;
    margin-left: 20px;
    font-size: 12px;
    line-height: inherit;
}

.item-choice-add-blc label {
    font-size: 14px;
    margin-top: 6px;
}

.item-choice .btn-mng {
    width: 34px;
    height: 34px;
    color: #ccc;
    padding: 7px;
}

.uploaded-image-name {
    display: block;
    margin-top: 5px;
    padding: 2px;
}

/* `INSTRUCTIONS --------------------------------------------------------------------------- */

.instr-steps {
    width: 800px;
    margin-bottom: 20px;
}

.instr-step-title {
    margin-bottom: 5px;
}

.instr-step-desc {
    font-size: 14px;
}

.instr-step-desc ul li {
    list-style: disc outside;
    margin-left: 25px;
}

.instr-step-desc img {
    width: 800px;
    margin-bottom: 20px;
    background: #f5f5f5;
}

/* `ERROR PAGE ------------------------------------------------------------------------ */

.error-page-logo {
    padding: 64px 0;
    text-align: center;
    font-size: 32px;
}

.error-page-logo img {
    width: 300px;
}

.error-page {

}

.error-content {
    position: relative;
    z-index: 4;
}

.error-code {
    padding: 32px 0 16px;
    font-size: 72px;
    line-height: 1.4em;
    font-weight: bold;
}

.error-401 {
    color: #9CCC65;
}

.error-403 {
    color: #FFCA28;
}

.error-404 {
    color: #FF7043;
}

.error-500 {
    color: #26A69A;
}

.error-msg,
.error-actions {
    font-size: 24px;
    color: #5a6168;
}

/* `THEMES --------------------------------------------------------------------------- */

.oops-message {
    text-align: center;
    padding: 40px;
}

.containerText {
    width: 500px;
    height: 600px;
    border: 1px solid #918a8a;
    overflow: scroll;
    background: #c0c0c0;

}

#messageForName {
    border: 1px solid #b9b9b9;
    display: none;
    padding: 5px;
    margin-right: 420px !important;
    width: 200px;
    overflow: auto;
}

#messagePurpose, #messageForm {
    border: 1px solid #b9b9b9;
    display: none;
    padding: 5px;
    width: 200px;
    height: 40px;
    overflow: auto;
}

#inn-field:hover #inn #messagePurpose {
    display: block;
    width: 200px;
    height: 40px;
}

.additClass {
    border: 1px solid #ff0000 !important;
}

.tooltip {
    border: 1px solid #4f4fff;
    padding: 10px;
    width: 200px;
    margin-top: -40px;
}

.spinner {
    margin: 200px auto;
    width: 70px;
    text-align: center;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #60beeb;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bounce-delay 1.4s infinite ease-in-out both;
    animation: sk-bounce-delay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bounce-delay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce-delay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.fusioncharts-container svg > text {
    display: none;
}

/* `ASSESSMENT ------------------------------------------------------------------------------------------ */

#wrap-header-assessment {
    height: 60px;
    width: 100%;
    position: fixed;
    background: #f5f5f5;
    box-shadow: 1px -1px 10px 2px #ddd;
    padding: 5px 0;
}

#wrap-content-assessment {
    padding: 80px 0;
}

#wrap-footer-assessment {
    background: #42434b;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.assessment-pagination-pages {
    width: 770px;
    margin: auto;
}

.assessment-pagination-item {
    width: 77px;
    height: 48px;
    font-size: 21px;
    background: none;
    border: none;
    float: left;
    color: #F5F5F5;
    font-family: 'PT Sans', 'Arial', serif;
    text-transform: uppercase;
    cursor: pointer;
}

.assessment-pagination-item-current {
    background: #767781;
}

.assessment-pagination-item-ANSWERED_INVALID {
    color: #f44336;
}

.assessment-pagination-item-ANSWERED_VALID {
    color: #4CAF50;
}

.assessment-pagination-item:hover {
    background: #767781;
}

.assessment-pagination-prev,
.assessment-pagination-next {
    width: 192px;
    background: #3d3e46;
    color: #03A9F4;
}

.assessment-pagination-prev:hover,
.assessment-pagination-next:hover {
    background: #31323a;
}

.assessment-pagination-next {
    float: right;
}

.assessment-info label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

.assessment-info p,
.assessment-info .ui-selectonemenu.ui-state-default label {
    font-size: 21px;
    color: #148ede;
    line-height: 1;
}

.assessment-info .ui-selectonemenu.ui-state-default {
    background: none;
    margin: 0;
    border: none;
}

.assessment-info .ui-selectonemenu.ui-state-default label {
    text-transform: none;
    padding: 0;
}

.assessment-info .ui-selectonemenu .ui-inputfield,
.assessment-info .ui-selectonemenu .ui-selectonemenu-trigger {
    background: none;
}

.assessment-info .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    margin: 4px;
}

.time-left {
    padding: 1px;
}

.time-left img {
    height: 48px;
}

.time-left .time {
    font-size: 32px;
    color: #4fb8d7;
}

.assessment-image {
    width: 50%;
    float: left;
    border-right: 1px solid #ddd;
    padding: 15px 20px 15px 0;
    min-height: 600px;
    text-align: center;
}

.assessment-image img {
    max-width: 100%;
    max-height: 100%;
}

.assessment-no-image {
    color: #ccc;
    text-align: center;
    padding: 100px;
    font-size: 48px;
    display: block;
    text-transform: uppercase;
}

.assessment-interaction {
    width: 50%;
    float: right;
    padding: 15px 0 15px 20px;
}

.assessment-question {
    font-size: 21px;
    margin: 0 0 15px;
    line-height: 1.3;
}

.assessment-video{
    margin-top: 30px;
    width: 50%;
    float: right;
    padding: 15px 0 15px 20px;
}

.assessment-submit {
    font-size: 17px;
    height: 40px;
}

.response-options {
    width: 100%;
}

.response-options tr {
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.response-options tr * {
    cursor: pointer;
}

.response-options tr td {
    padding: 0;
    font-size: 15px;
    border-radius: 4px;
    background: #F5F5F5;
}

.response-options tr td label {
    width: 100%;
    color: #616161;
    margin: 0 0 0 -20px;
    padding: 8px 8px 8px 24px;
}

.response-options tr:hover td {
    background: #E3F2FD;
}

.response-options .ui-radiobutton {
    margin: 0 0 0 4px;
}

.response-options .ui-radiobutton .ui-radiobutton-box.ui-state-active {
    border-color: #29B6F6;
}

.response-options .ui-state-active .ui-icon {
    width: 12px;
    height: 12px;
    background: #29B6F6;
    top: -2px;
    left: 1px;
}

.response-options .ui-state-active .ui-icon:before {
    font-size: 11px !important;
}

.response-options .ui-state-disabled {
    opacity: 1;
    cursor: pointer;
}

.response-options .response-selected td {
    background: #81D4FA !important;
}

.response-options .response-selected td label {
    color: #0277BD;
}

.response-options .response-invalid td {

}

.response-options .response-invalid td label {

}

.response-options .valid-response td {
    background: #A5D6A7 !important;
}

.response-options .valid-response td label {
    color: #388E3C;
}

.response-options .valid-response .ui-radiobutton .ui-radiobutton-box.ui-state-active {
    border-color: #388E3C;
}

.response-options .valid-response .ui-state-active .ui-icon {
    background: #388E3C;
}

/* **********************************SelectCheckBoxMenu******************************************* */

.ui-selectcheckboxmenu-filter-container input {
    height: 20px;
}

/* `MEDIA PRINT
--------------------------------------------------------------------------------------------------------------------- */

.print {
    display: none;
}

@media print {
    @page {
        size: A4;   /* auto is the initial value */
        margin: 0;  /* this affects the margin in the printer settings */
    }

    html {
        background-color: #FFFFFF;
        margin: 0; /* this affects the margin on the html before sending to printer */
    }

    body {
        padding: 10mm 5mm 10mm 5mm; /* margin you want for the content */
    }

    #sidebar {
        display: none;
    }

    #content-top {
        display: none;
    }

    #content-private {
        width: 100%;
        padding: 0;
        display: table;
    }

    #pageFooter {
        display: table-footer-group;
    }

    #pageFooter:after {
        counter-increment: page;
        content: counter(page);
    }

    .print {
        display: block;
    }

    .print .header img {
        margin-bottom: 10px;
    }

    .print .header h2 {
        text-transform: uppercase;
        font-size: 11px;
    }

    .print .header h1 {
        margin: 8px 0;
        font-weight: bold;
    }

    .display-table thead tr th {
        border-bottom: 1px solid #555;
    }

    .display-table thead tr th,
    .display-table tbody tr td {
        font-size: 12px;
        height: 24px;
        padding: 2px;
    }

    .print .signature-table td {
        padding: 12px 8px 0;
        font-size: 14px;
        height: 36px;
    }

    .print .signature-table td:first-child {
        width: 128px;
    }

    .print .signature-table td:last-child {
        width: 256px;
        border-bottom: 1px solid #666;
    }

    .ui-sortable-column-icon {
        display: none !important;
    }
}


.search-form-checkbox .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label {
    padding: 8px 26px 8px 5px !important;
}
.search-form-checkbox .ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger {
    padding: 7px 3px !important;
}

.mrgn-lft-20{
    margin-left: 20px;
}
.mrgn-rht-20{
    margin-right: 20px;
}
.mrgn-top-20{
    margin-top: 20px;
}
.mrgn-btm-20{
    margin-bottom: 20px;
}
.mrgn-lft-40{
    margin-left: 40px;
}
.mrgn-rht-40{
    margin-right: 40px;
}
.mrgn-top-40{
    margin-top: 40px;
}
.mrgn-btm-40{
    margin-bottom: 40px;
}

.deaf-chkbox{
    vertical-align: -webkit-baseline-middle;
    font-size: 16px;
}

.center {
    text-align: center;
}

.centered-table th, .centered-table td, .centered-table input {
    text-align: center;
}

.bold {
    font-weight: bold;
}