/*
|--------------------------------------------------------------------------
| General
|--------------------------------------------------------------------------
*/

:root {

    --form-control-border-color: #bbb;

    --facebook-bg-color: #3b5998;
    --facebook-color: white;
    --google-bg-color: #dd4b39;
    --google-color: white;
    --linkedin-bg-color: #007bb6;
    --linkedin-color: white;
    --apple-bg-color: #ddd;
    --apple-color: #333;
    --twitter-bg-color: #1DA1F2;

}

.preview-container {
    border: 1px solid #dfdfdf;
    box-shadow: 1px 1px 5px #dfdfdf;
}

/*
|--------------------------------------------------------------------------
| Animations
|--------------------------------------------------------------------------
*/

@keyframes ringing {
    0% {
        transform: rotate(0deg) scale(1, 1);
    }

    5% {
        transform: rotate(15deg) scale(1.25, 1.25);
    }

    10% {
        transform: rotate(-15deg) scale(1.25, 1.25);
    }

    15% {
        transform: rotate(15deg) scale(1.25, 1.25);
    }

    20% {
        transform: rotate(-15deg) scale(1.25, 1.25);
    }

    25% {
        transform: rotate(0deg) scale(1, 1);
    }

    100% {
        transform: rotate(0deg) scale(1, 1);
    }
}

.ringing {
    animation: ringing 3s infinite;
}

/*
|--------------------------------------------------------------------------
| Indicators
|--------------------------------------------------------------------------
*/

.dot-indicator {
    display: inline-block;
    height: 1em;
    width: 1em;
    border-radius: 50%;
}

/*
|--------------------------------------------------------------------------
| Alert
|--------------------------------------------------------------------------
*/

.alert-danger {
    font-size: 13px;
}

.page-error {
    display: inline-block;
    text-align: center;
    font-size: 1.4em;
    padding-top: 40px;
    padding-bottom: 20px;
}

/*
|--------------------------------------------------------------------------
| Noty
|--------------------------------------------------------------------------
*/
/* Custom type of Noty with colors to use when we need to display logical error */
.noty_theme__relax.noty_type__logical_error {
    background-color: #ff00fc;
    border: 1px solid #ca00ff;
    color: #fff;
}

/*
|--------------------------------------------------------------------------
| Flex items
|--------------------------------------------------------------------------
*/


.flex-items {
    display: flex;
}

.flex-items.flex-items-centered {
    justify-content: center;
}

.flex-items.column-direction {
    flex-direction: column;
}

.flex-items .flex-item {
    flex: 1 1 auto;
}

.flex-items .flex-equal-item {
    flex: 1 1 0px;
}

.flex-bottom-content-vertically {
    height: 100%;
    display: flex;
    /* justify-content: center; */
    align-items: flex-end;
}

/* @link kisu in https://stackoverflow.com/questions/26385334/css-displayflex-align-itemsbaseline-not-working-in-firefox */
.flex-baseline-content-vertically {
    height: 100%;
    display: inline-flex;
    align-items: baseline;
}

.flex-centered {
    display: flex;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 100%;
}

@media (max-width : 991px) {

    .flex-items.flex-panel-responsive-md,
    .flex-panel.flex-panel-responsive-md {
        display: block;
    }

    .flex-panel.flex-panel-responsive-md.flex-panel-horizontal>.flex-panel-body>.flex-panel.flex-panel-horizontal {
        height: auto;
    }

    .flex-panel.flex-panel-responsive-md:not(.flex-panel-horizontal):not(.flex-panel-full-height)>.flex-panel-body {
        height: auto;
    }
}

@media (max-width : 835px) {

    .flex-items.flex-panel-responsive-sm {
        display: block;
    }
}

@media (max-width : 767px) {

    .flex-items.flex-panel-responsive-sm2 {
        display: block;
    }
}

@media (max-width : 479px) {

    .flex-items.flex-panel-responsive {
        display: block;
    }

}

/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/
/* Pour gérer les images SVG qui n'ont pas de taille */

.logo_container.main-online-page img {
    min-width: 105px;
    max-width: 100%;
}

.logo_container.login-page img,
.logo_container.back-office-colors-home-page img,
.logo_container.back-office-translations-home-page img,
.logo_container.back-office-translations-registration-page img,
.logo_container.back-office-preview-image-page img {
    min-height: 45px;
    max-height: 300px;
}

.logo_container.offline-page img,
.logo_container.registration-page img {
    height: 46px;
}

.logo_container.applying-registration-page img,
.logo_container.completed-registration-page img {
    min-height: 75px;
    max-height: 180px;
}

@media (max-width: 767px) {

    .logo_container.login-page img,
    .logo_container.back-office-preview-image-page img,
    .logo_container.back-office-home-page img,
    .logo_container.applying-registration-page img,
    .logo_container.completed-registration-page img {
        min-height: 10px;
        max-height: 70px;
    }
}

@media (min-width: 768px) and (max-width: 1102px) {

    .logo_container.login-page img,
    .logo_container.back-office-preview-image-page img,
    .logo_container.back-office-home-page img,
    .logo_container.applying-registration-page img,
    .logo_container.completed-registration-page img {
        min-height: 75px;
        max-height: 200px;
    }
}

/*
|--------------------------------------------------------------------------
| Home
|--------------------------------------------------------------------------
*/


@media (min-width : 836px) {

    .home-register-button-container {
        max-width: 40%;
    }

}

/*
|--------------------------------------------------------------------------
| Widgets
|--------------------------------------------------------------------------
*/

.widget {
    margin: 0px 4px 16px;
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-radius: unset;
}

.widget-container-carousel {
    padding-top: 4px;
}

.widget-ajax-content-placeholder {
    height: 80px;
}

/*
|--------------------------------------------------------------------------
| Form
|--------------------------------------------------------------------------
*/

.dynamic-list {
    padding-bottom: 4px;
}

.dynamic-list .dynamic-list-item {
    padding: 2px;
}

.dynamic-list .dynamic-list-item-action {
    cursor: pointer;
    opacity: 0.9;
    padding: 0px 2px;
}

.dynamic-list .dynamic-list-item-action:hover {
    opacity: 1;
}

.list-row {
    border-bottom: 1px solid #ccc;
    display: flex;
    width: calc(100% - 10px);
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 6px;
    color: #555;
}

.list-row:last-of-type {
    border-bottom: none;
}

.list-row label {
    margin-bottom: 0px;
}

.edit-btn,
.del-btn {
    opacity: 0.8;
}

.edit-btn:hover,
.del-btn:hover {
    cursor: pointer;
    opacity: 1;
}

.checkbox-wrapper {
    padding: 2px 3px 0px;
}

.checkbox-wrapper input[type=checkbox] {
    transform: scale(1.7);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

input[data-readonly],
.data-readonly {
    pointer-events: none;
}

select.disabled,
.form_date.disabled,
.form_time.disabled {
    pointer-events: none;
    background: #ddd;
}

option.disabled {
    color: #ccc;
}

.form_date.disabled input {
    background: #eee;
    cursor: not-allowed;
}

.form_time_container .fa.fa-clock-o {
    top: -2px;
    right: 6px;
    font-size: 20px;
}

.form-time-container .fa {
    top: calc(50% - 10px);
    right: 6px;
    font-size: 20px;
}

.form-group label.section {
    margin-bottom: 0
}

label.form-section-title {
    margin-top: 10px;
}

.intl-tel-input.separate-dial-code .selected-flag {
    background-color: transparent;
}


.form-control.input-lg {
    font-size: 14px;
}

.form-group.vanilla .SumoSelect>.CaptionCont>label>i {
    top: 7px;
}

.form-group.vanilla .SumoSelect .SelectBox:hover,
.form-group.vanilla .SumoSelect .SelectBox {
    border: 1px solid var(--form-control-border-color);
    border-radius: 0;
    box-shadow: none;

    padding: 6px 12px;
    padding-left: 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
}

.form-group.vanilla .SumoSelect.open .SelectBox {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}

.form-group:not(.vanilla) div.form-control:not(.form-control-vanilla),
.form-group:not(.vanilla) select.form-control:not(.form-control-vanilla),
.form-group:not(.vanilla) input[type=text].form-control:not(.form-control-vanilla),
.form-group:not(.vanilla) input[type=tel].form-control:not(.form-control-vanilla),
.form-group:not(.vanilla) input[type=email].form-control:not(.form-control-vanilla),
.form-group:not(.vanilla) input[type=password].form-control:not(.form-control-vanilla),
.form-group:not(.vanilla) input[type=number].form-control:not(.form-control-vanilla) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--form-control-border-color);
}

.form-control,
.input-group-addon,
.form-group:not(.vanilla) input[type=color].form-control:not(.form-control-vanilla),
.form-group:not(.vanilla) .textarea-stub.form-control:not(.form-control-vanilla),
.form-group:not(.vanilla) .summernote.form-control:not(.form-control-vanilla),
.form-group:not(.vanilla) textarea.form-control:not(.form-control-vanilla) {
    border: 1px solid var(--form-control-border-color);
    border-radius: 0;
    box-shadow: none;
}

.form-group:not(.vanilla) select.form-control:not(.form-control-vanilla) {
    padding-left: 0;
}

.form-group:not(.vanilla) input[type=email].form-control:not(.form-control-vanilla),
.form-group:not(.vanilla) input[type=password].form-control:not(.form-control-vanilla),
.form-group:not(.vanilla) input[type=text].form-control:not(.country_selector):not(.date):not(.form-control-vanilla) {
    padding-left: 4px;
}

.form-group {
    position: relative;
}

.form-group.form-group-no-margin {
    margin-bottom: 0px !important;
}

.form-group :not(.SumoSelect, [type="tel"]) .form-control {
    z-index: 1;
}

.form-group:not(.vanilla) .form-control[readonly]:not(.form-control-vanilla) {
    background-color: transparent;
    /* border-color: transparent; */
}

.form-group.floating {
    padding-top: 16px;
}

.form-control {
    -webkit-transition: color ease-in-out .15s;
    -o-transition: color ease-in-out .15s;
    transition: color ease-in-out .15s;
}

.floating-label {
    display: inline-block;
    position: absolute;
    top: 18px;
    left: 0;
    max-width: 100%;
    padding-top: 10px;
    margin: 0;
    cursor: text;
    color: #bbb;
    font-size: 13px;
    line-height: 0.8;
    font-weight: 400;
    white-space: nowrap;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, -webkit-transform;
    transition-property: color, -webkit-transform;
    transition-property: color, transform;
    transition-property: color, transform, -webkit-transform;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.form-group.control-focus .floating-label,
.form-group.control-highlight .floating-label {
    -webkit-transform: scale(0.9, 0.86) translateY(-23px);
    transform: scale(0.9, 0.86) translateY(-23px);
    color: #333;
}

.form-group:not(.vanilla) input[type="text"]:not(.form-control-vanilla)::-webkit-input-placeholder,
/* Chrome/Opera/Safari */
.form-group:not(.vanilla) input[type="text"]:not(.form-control-vanilla)::-moz-placeholder,
/* Firefox 19+ */
.form-group:not(.vanilla) input[type="text"]:not(.form-control-vanilla):-ms-input-placeholder,
/* IE 10+ */
.form-group:not(.vanilla) input[type="text"]:not(.form-control-vanilla):-moz-placeholder {
    /* Firefox 18- */
    color: transparent;
}

.form-group .textarea-stub.form-control,
.form-group textarea.form-control {
    resize: vertical;
    min-height: 34px;
    max-height: 260px;
}

.form-control[readonly] {
    background-color: white;
}

.form-group:not(.vanilla) .input-group .form-control:not(.form-control-vanilla) {
    background-color: transparent
}

.select-label {
    display: block;
    font-size: 11px;
    opacity: 1;
    color: #333;
    line-height: 15px;
}

.form-group:not(.vanilla) .date .form-control[readonly]:not(.form-control-vanilla) {
    background: none;
}

.form-group:not(.vanilla) .input-group-addon {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--form-control-border-color);
    background: none;
    color: #333;
    padding: 4px 8px;
    font-size: 18px;
}

.form-group:not(.vanilla) .input-group-addon.dropdown-toggle {
    font-size: 12px;
    padding: 11px 8px 10px;
    cursor: pointer;
}

.intl-tel-input {
    display: block !important;
}

input:-internal-autofill-selected {
    background-color: #fff
}

#locality-fields .form-group.row {
    margin-bottom: 20px
}

.form-group .items-list {
    border: 1px solid #eee;
    width: 100%;
    min-height: 40px;
    max-height: 120px;
    margin-top: 2px;
}

.form-group .items-list .row.item {
    padding: 5px;
    margin: 5px;
}

.form-group .items-list .item .item_value {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2;
}

.form-group .items-list .item .edit-item {
    color: #825d27;
    cursor: pointer
}

.form-group .items-list .item .delete-item {
    color: #990000;
    cursor: pointer
}

.form-group>.well.question {
    margin-bottom: 0px;
}

.well.question {
    transition: background-color 0.8s ease, color 0.8s ease;
    margin-bottom: 40px;
}

.well.question.active {
    background-image: none;
}

.question .question-text {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.question .material-switch {
    margin-left: 10px;
}

@media only screen and (max-width: 991px) {
    .well.question {
        padding: 8px;
    }

    .question .question-text {
        font-size: 1em;
        margin-bottom: 12px;
    }
}

.question-form-header {
    padding: 15px 20px;
    font-size: 1.2em;
}

.dataview-item .question-form-header {
    margin: 0px -5px 10px;
    font-size: 1.1em;
}

.question-mark {
    font-size: 1.3em;
    vertical-align: middle;
}

.multi-date-picker .ui-datepicker {
    width: 100%;
}

.counter .btn-minus:not(.disabled),
.counter .btn-plus:not(.disabled) {
    cursor: pointer;
}

.counter .btn-minus.disabled>*,
.counter .btn-plus.disabled>* {
    opacity: 0;
}

.address-override-textarea {
    display: flex;
    flex-direction: row;
}

.address-override-textarea .selected-address-container {
    flex: 1 1 auto;
}

.address-override-textarea .selected-address-container textarea {
    min-height: 80px;
    background-color: white;
    border-right: none !important;
}

.address-override-textarea .address-button-container {
    flex: 0 0 auto;
}

.address-override-textarea .address-button {
    width: 100%;
    height: 100%;
    border: 1px solid var(--form-control-border-color);
    /* border-left: none; */
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3em;
    cursor: pointer;
    background-color: white;
}

.address-override-textarea .address-button>* {
    opacity: 0.9;
}

.address-override-textarea .address-button:hover>* {
    opacity: 1;
}

.address-override-textarea .address-button.disabled {
    cursor: default;
}

.address-override-textarea .address-button.disabled>* {
    opacity: 0;
}

.address-override-textarea .address-button.disabled:hover>* {
    opacity: 0;
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
    background-image: none;
}

.list-group-item.disabled {
    opacity: 0.6;
    border: 1px solid rgba(181, 181, 181, 0.6);
    /* Put a grey color for neutrality, with same opacity */
    -webkit-background-clip: padding-box;
    /* For Safari */
    background-clip: padding-box
        /* For IE9+, Firefox 4, Opera, Chrome */
}

/* .list-group-item[data-disabled="true"] .state-icon,
.list-group-item[data-disabled="true"] span:nth-child(2) {
    color: #aaa;
} */

.job-functions-control {
    margin-bottom: 15px;
}

.job-functions-control .form-group {
    margin-bottom: 0px;
}

.job-functions-control .input-group-addon {
    cursor: pointer;
}

.job-functions-control .input-group-addon>* {
    opacity: 0.9;
}

.job-functions-control .input-group-addon:hover>* {
    opacity: 1;
}

.title-collapse-toggle i,
.btn-expand {
    -webkit-transition: -webkit-transform 0.15s;
    -moz-transition: -moz-transform 0.15s;
    transition: transform 0.15s;
    opacity: 0.9;
}

.btn-expand {
    cursor: pointer;
    width: 25px;
}

.title-collapse-toggle:hover i,
.btn-expand:hover {
    opacity: 1;
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}

.title-collapse-toggle.opened i,
.btn-expand.expanded {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 1;
}

.title-collapse-toggle.opened:hover i,
.btn-expand.expanded:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.section-expand {
    display: none;
    padding-left: 12px;
}

.section-expand.expanded {
    display: block;
}

.division-selector .input-group-addon {
    cursor: pointer;
}

.division-selector .input-group-addon>* {
    opacity: 0.9;
}

.division-selector .input-group-addon:hover>* {
    opacity: 1;
}

.dataview-picker .input-group-addon {
    cursor: pointer;
}

.dataview-picker .input-group-addon>* {
    opacity: 0.9;
}

.dataview-picker .input-group-addon:hover>* {
    opacity: 1;
}

.timesheet-quickform .timesheet-quickform-field {
    padding: 0px 2px 8px;
}

.timesheet-quickform .timesheet-quickform-field .form-group {
    margin-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.base-timesheet-hour {
    font-style: italic;
    opacity: 0.8;
    padding-left: 8px;
    padding-right: 4px;
}

.secondary-text {
    color: #777;
    font-size: 0.8em;
}

/*
|--------------------------------------------------------------------------
| Dropdown
|--------------------------------------------------------------------------
*/
/*.dropdown-menu{position:fixed;left:auto;top:auto} */
.modal .dropdown-menu {
    z-index: 1050;
}

/* Fix view of dropdown menu in modal */
/* .datetimepicker.dropdown-menu{left:50% !important} */
/*
|--------------------------------------------------------------------------
| Pickers
|--------------------------------------------------------------------------
*/
#ui-timepicker-div,
#ui-datepicker-div {
    z-index: 1051 !important
}

/* #dates-picker{width:80%;margin:0 auto} */
.ui-state-highlight a {
    border: 2px solid !important
}

/*
|--------------------------------------------------------------------------
| Loaders
|--------------------------------------------------------------------------
*/

.loading {
    opacity: 0.8;
    pointer-events: none
}

.disabling-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
}

.loader.static {
    position: static;
    opacity: 0.6;
}

.loader {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;

    transition: opacity 200ms;
    transition-delay: 0s;
    transition-timing-function: ease-in;
}

.loader.active {
    opacity: 1;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #0D6294;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #0D6294 transparent transparent transparent;
}

.lds-ring.paused div {
    animation-play-state: paused;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*
|--------------------------------------------------------------------------
| Modals
|--------------------------------------------------------------------------
*/

.modal-content-spacer {
    height: 120px;
}

body.modal-open {
    overflow: hidden;
}

body.modal-open .modal {
    /* Leave below properties as visible to prevent Bootstrap dowpdown to not be displayed properly inside modal */
    overflow-x: visible;
    overflow-y: auto;
}

/*
|--------------------------------------------------------------------------
| Notifications
|--------------------------------------------------------------------------
*/

#notification-container .notification-body {
    padding: 8px;
}

#notification-container .notification-heading {
    font-size: 1.6em;
    padding: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
}

@media (max-width: 991px) {
    #notification-container .notification-body {
        padding: 5px;
    }

    #notification-container .notification-heading {
        font-size: 1.12em;
        padding: 5px;
        margin-top: 0;
        margin-bottom: 0;
    }
}

/*
|--------------------------------------------------------------------------
| Contextual Help
|--------------------------------------------------------------------------
*/

.contextual-help-container {
    padding-top: 8px;
    font-size: 1.2em;
}

.contextual-help-container .contextual-help-blocks {
    padding: 10px 8px;
}

.contextual-help-container .contextual-help-block {
    display: none;
}

.contextual-help-container .contextual-help-block.active {
    display: block;
}

.contextual-help-container .contextual-help-block .contextual-help-block-section {
    padding: 8px;
    margin: 15px -10px 0px;
}

.contextual-help-container .contextual-help-legend {
    font-size: 14px;
}

.contextual-help-container .contextual-help-legend .legend-entry {
    padding-top: 8px;
    padding-bottom: 8px;
}

.contextual-help-container .contextual-help-legend .legend-entry .legend-description {
    margin-left: 8px;
}

.contextual-help-container .contextual-help-breadcrumb {
    padding: 10px;
}

.contextual-help-container .contextual-help-breadcrumb-titles {
    font-size: 1.4em;
}

.contextual-help-container .contextual-help-breadcrumb .btn-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contextual-help-container .contextual-help-breadcrumb .btn-parent,
.contextual-help-container .contextual-help-breadcrumb .btn-child {
    font-size: 1.2em;
    cursor: pointer;
}

.contextual-help-container .contextual-help-breadcrumb .btn-parent {
    margin-right: 10px;
}

.contextual-help-container .contextual-help-breadcrumb .btn-child {
    margin-left: 10px;
}

.contextual-help-container .contextual-help-breadcrumb-item {
    display: none;
}

.contextual-help-container .contextual-help-breadcrumb-item.active {
    display: block;
}

@media (max-width: 991px) {
    .contextual-help-container {
        padding-top: 0;
        font-size: 1em;
    }

    .contextual-help-container .contextual-help-breadcrumb {
        padding: 5px;
    }

    .contextual-help-container .contextual-help-breadcrumb .btn-parent,
    .contextual-help-container .contextual-help-breadcrumb .btn-child {
        font-size: 0.9em;
    }

    .contextual-help-container .contextual-help-breadcrumb-titles {
        font-size: 1.12em;
    }

    .contextual-help-container .contextual-help-blocks {
        padding: 5px 7px;
    }
}

/*
|--------------------------------------------------------------------------
| Swipe Tabs
|--------------------------------------------------------------------------
 */

.swipe-tabs {
    height: 100%;
    width: 100%;
    position: relative;
}

.swipe-tabs .swipe-tab {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: white;

    -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s, position 0.3s;
    -moz-transition: -moz-transform 0.3s, box-shadow 0.3s, position 0.3s;
    transition: transform 0.3s, box-shadow 0.3s, position 0.3s;
}

.swipe-tabs .swipe-tab.swipe-tab-left {

    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}

.swipe-tabs .swipe-tab.swipe-tab-right {

    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

.swipe-tabs .swipe-tab.is-visible {

    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.swipe-tabs-actions .swipe-tabs-dots .swipe-tabs-dot {
    cursor: pointer;
    margin: 0px 5px;
    font-size: 1.4em;
}

.swipe-tabs-actions .swipe-tabs-dots .swipe-tabs-dot .dot-active {
    display: none;
}

.swipe-tabs-actions .swipe-tabs-dots .swipe-tabs-dot.active .dot-active {
    display: inline-block;
}

.swipe-tabs-actions .swipe-tabs-dots .swipe-tabs-dot.active .dot-inactive {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Nav tabs
|--------------------------------------------------------------------------
*/

.tabs-container .nav-tabs>li {
    margin-right: 4px;
}

.tabs-container .nav-tabs>li>a {
    border-radius: 0;
    border: none;
    font-size: 18px;
    color: #888;
    background-color: transparent;

    -webkit-transition: color 0.15s;
    -moz-transition: color 0.15s;
    transition: color 0.15s;
}

.tabs-container .nav-tabs>li.active>a,
.tabs-container .nav-tabs>li>a:hover {
    border-radius: 0;
    border: none;
    color: #2AB1FA;
    border-bottom: 2px solid #2AB1FA;
}

.tabs-container .tab-content {
    padding-top: 10px
}

/*
|--------------------------------------------------------------------------
| responsive-tabs
|--------------------------------------------------------------------------
*/

.responsive-tabs .responsive-tab-active,
.responsive-tabs.open .responsive-tab-active,
.responsive-tabs .responsive-tab-active:hover,
.responsive-tabs.open .responsive-tab-active:hover,
.responsive-tabs .responsive-tab-active:focus,
.responsive-tabs.open .responsive-tab-active:focus {
    padding: 10px;
    margin-top: 0px;
    border-radius: 0px;
    color: #2AB1FA;
    border-bottom: 2px solid #2AB1FA;
    text-align: center;
}

.responsive-tabs .arrow {
    float: right;
}

.responsive-tabs ul.dropdown-menu li a {
    padding: 10px;
    color: #888;
    /* border-bottom: 2px solid transparent; */
}

.responsive-tabs ul.dropdown-menu li.active a {
    background-image: none;
    background-color: transparent;
    color: #2AB1FA;
    /* border-bottom: 2px solid #2AB1FA; */
}

.responsive-tabs ul.dropdown-menu li:hover:not(.active) a,
.responsive-tabs ul.dropdown-menu li:focus:not(.active) a {
    background-image: none;
    background-color: transparent;
    /* opacity: 0.5; */
    color: #2AB1FA;
    /* border-bottom: 2px solid #2AB1FA; */
}

/*
|--------------------------------------------------------------------------
| Spacing helpers
|--------------------------------------------------------------------------
*/

.tile-spacer {
    padding-left: 2px;
    padding-right: 2px;
}

.tile-stack {
    padding-top: 2px;
    padding-bottom: 2px;
}

.btn-spacer {
    padding-left: 4px;
    padding-right: 4px;
}

.btn-stack {
    padding-top: 4px;
    padding-bottom: 4px;
}

.panel-spacer {
    padding-left: 8px;
    padding-right: 8px;
}

.panel-stack {
    padding-top: 8px;
    padding-bottom: 8px;
}

.line-spacer {
    padding-top: 16px;
    padding-bottom: 16px;
}

/*
|--------------------------------------------------------------------------
| Show, Edit and Delete buttons
|--------------------------------------------------------------------------
*/

.delete,
.add {
    border-radius: 50%;
}

.criteriaChoice,
.delete,
.add {
    -webkit-transition: transform 150ms, box-shadow 150ms, width 100ms, background-color 100ms, color 100ms, border-color 100ms, opacity 0.15s;
    -moz-transition: transform 150ms, box-shadow 150ms, width 100ms, background-color 100ms, color 100ms, border-color 100ms, opacity 0.15s;
    transition: transform 150ms, box-shadow 150ms, width 100ms, background-color 100ms, color 100ms, border-color 100ms, opacity 0.15s;
}

.criteriaChoice.edit:hover,
.criteriaChoice.wizard:hover,
.delete:hover,
.add:hover {
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, .15) 0 3px 3px 0;
}

.criteriaChoice.checked,
.criteriaChoice.disabled:hover {
    transform: translateY(0px) !important;
    box-shadow: none !important;
}

.add .fa.fa-circle {
    color: #28a745
}

.add .fa.fa-plus {
    color: #fff
}

.edit .fa.fa-circle {
    color: #E67E22
}

.criteria-choice-control .checkbox label {
    display: block;
}

.criteriaChoice.disabled .criteria-choice-control .checkbox label {
    cursor: default;
}

.infoCriteria .fa {
    color: #555 !important;
}

.infoCriteria .fa.fa-circle {
    color: #D9EDF7 !important;
}

.delete.fa-stack .fa.fa-circle {
    color: #990000
}

.delete.fa-stack .fa.fa-times {
    color: #FFFFFF
}

.edit .fa.fa-pencil {
    color: #fff
}

.edit .fa.fa-pencil-square-o {
    color: #2e6da4
}

.copy .fa.fa-files-o {
    color: #ab6666
}

.activate .fa.fa-check-circle {
    color: #d2d2d2
}

.status.active .fa.fa-check-circle {
    color: #28a745
}

.delete .fa.fa-times {
    color: #990000
}

.show:not(.admin-sidebar) .fa.fa-search-plus {
    color: #fff
}

.btn-show-edit,
.entity-description-details-button {
    margin-bottom: 5px;
}

.btn-show-copy,
.entity-description-copy-button {
    margin-bottom: 5px;
}

.btn-show-delete {
    margin-bottom: 5px;
}

.badge {
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    transition: all 0.15s;
}

.badge.badge-slim {
    padding-right: 4px;
    padding-left: 4px;
}

/* To be moved in colors.blade.php */
.badge.badge-danger {
    background: #d9534f;
    color: #FFFFFF;
}

.text-success {
    color: #5cb85c;
}

.text-danger {
    color: #d9534f;
}

.btn-close-window {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    font-size: 26px;
    /* font-weight: 700; */
    line-height: normal;
    filter: alpha(opacity=20);
    opacity: .4;
    margin-right: 14px;
}

.btn-close-window:focus,
.btn-close-window:hover {
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .7;
}

.btn-close-window:last-of-type {
    margin-right: 0px;
}



.item-sized-button {
    height: 100%;
    width: 100%;
    background: #D8D8D8;
    border: 1px solid #D8D8D8;
    opacity: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;

    -webkit-transition: background-color 0.15s, color 0.15s;
    -moz-transition: background-color 0.15s, color 0.15s;
    transition: background-color 0.15s, color 0.15s;
}

.item-sized-button:hover {
    opacity: 1;
    cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Icons
|--------------------------------------------------------------------------
 */

.icon {
    width: 1em;
}

.icon.fa-lg {
    line-height: 1.42857143;
}

.icon.fa-fw {
    width: 1.28571429em;
}

/*
|--------------------------------------------------------------------------
| Awesome Icons
|--------------------------------------------------------------------------
 */
.awesome_icon {
    margin-right: 5px
}

.awesome_icon i.fa {
    font-size: 18px
}

.awesome_icon i.fa-tags {
    color: #af762d
}

.awesome_icon i.fa-map-marker {
    color: #2eaf2d
}

.awesome_icon i.fa-calendar {
    color: #2a8fc1
}

.awesome_icon i.fa-building {
    color: #e09431
}

.awesome_icon i.fa-group {
    color: #4a3c61
}

.awesome_icon i.fa-clock-o {
    color: #5485a9
}

/* TODO: Now customizable by the agency, remove */
/*.awesome_icon i.fa.fa-thumbs-o-up,
.awesome_icon i.fa.fa-check-circle {color: #1E884B}
.awesome_icon i.fa.fa-exclamation-circle,
.awesome_icon i.fa.fa-question-circle {color: #3498DB}
.awesome_icon i.fa.fa-thumbs-o-down,
.awesome_icon i.fa.fa-times-circle {color: #e74c3c}*/

.awesome_icon i.fa.fa-suitcase {
    color: #6c87a2
}

.awesome_icon i.fa.fa-hourglass {
    color: #3c763d
}

.awesome_icon i.fa.fa-calendar {
    color: #12569c
}

.awesome_icon i.fa.fa-calendar-minus-o {
    color: #006c9e
}

.awesome_icon i.fa.fa-calendar-plus-o {
    color: #006c9e
}

.simple_icon i.fa.fa-thumbs-o-up,
.simple_icon i.fa.fa-check-circle {
    color: #1E884B
}

.simple_icon i.fa.fa-exclamation-circle,
.simple_icon i.fa.fa-question-circle {
    color: #3498DB
}

.simple_icon i.fa.fa-thumbs-o-down,
.simple_icon i.fa.fa-times-circle {
    color: #e74c3c
}

.simple_icon i.fa.fa-suitcase {
    color: #6c87a2
}

.simple_icon i.fa.fa-hourglass {
    color: #3c763d
}

.simple_icon i.fa.fa-calendar {
    color: #12569c
}

.simple_icon i.fa.fa-calendar-minus-o {
    color: #006c9e
}

.simple_icon i.fa.fa-calendar-plus-o {
    color: #006c9e
}

i.green-icon {
    color: #1E884B
}

i.blue-icon {
    color: #3498DB
}

i.red-icon {
    color: #e74c3c
}

.sharing-icons .fa.fa-facebook,
.sharing-icons .fa.fa-facebook-square {
    color: #4862a3
}

.sharing-icons .fa.fa-linkedin,
.sharing-icons .fa.fa-linkedin-square {
    color: #045B88
}

.sharing-icons .fa.fa-twitter,
.sharing-icons .fa.fa-twitter-square {
    color: #55acee
}

.sharing-icons a {
    margin-right: 5px;
    margin-left: 5px;
}


.fa.fa-clickable {
    cursor: pointer;
}

/* Icons with circle effect */

.circle-icon-effect {
    font-size: 1.5em;
}

.circle-icon-effect i.dir-icon {
    color: #3498DB;
    /* font-size: 18px; */
    font-size: 1em;
    /* bottom: calc(-50% + 8px);
    left: calc(50% - 8px); */
    bottom: -30%;
    left: 40%;
}

.circle-icon-effect img.dir-icon {
    height: 0.8em;
    bottom: -10%;
    left: 35%;
}

/* filter est pour reproduire la couleur #337ab7 des icones au dessus (fait avec: https://isotropic.co/tool/hex-color-to-css-filter/) */
/* Inspirer de: https://stackoverflow.com/a/49049008 pour changer la couleur d'un svg */
.twitter-blue {
    filter: invert(50%) sepia(19%) saturate(1562%) hue-rotate(166deg) brightness(83%) contrast(98%);
}

.twitter-black {
    filter: brightness(0) saturate(0);
}

.twitter-large {
    height: 21px;
    width: 21px;
}


.avatar.avatar-md.square .twitter-small,
.twitter-small {
    height: 12px;
    width: 12px;
}

/*
|--------------------------------------------------------------------------
| Control HTML in PRIM (Internet Explorer)
|
 */
.prim-html-control blockquote {
    border-left: none;
}

/*
|--------------------------------------------------------------------------
| Big actions buttons
|--------------------------------------------------------------------------
 */

.big-actions .fa {
    font-size: 2em;
}

@media only screen and (min-width : 768px) {
    .big-actions .btn {
        height: 160px;
    }

    .big-actions .fa {
        font-size: 4em;
    }
}

/*
|--------------------------------------------------------------------------
| Switches
|--------------------------------------------------------------------------
 */
/* https://bootsnipp.com/snippets/xp0QM */

.material-switch {
    padding: 4px 4px 4px 0px;
}

.material-switch.material-switch-contained {
    padding: 4px 13px 4px 8px;
}

.material-switch>input[type="checkbox"] {
    display: none;
}

.material-switch>label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
}

.material-switch>label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position: absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}

.material-switch>label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}

.material-switch>input[type="checkbox"]:checked+label::before {
    background: inherit;
    opacity: 0.5;
}

.material-switch>input[type="checkbox"]:checked+label::after {
    background: inherit;
    left: 20px;
}

/*
|--------------------------------------------------------------------------
| Panels
|--------------------------------------------------------------------------
*/

.panel .panel-heading .panel-title>a {
    display: block;
    text-decoration: none;
}

.panel .panel-heading .accordion-toggle:after,
.panel .panel-heading .accordion-toggle:focus:after {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
    float: right;
    -webkit-transition: -webkit-transform 0.15s;
    -moz-transition: -moz-transform 0.15s;
    transition: transform 0.15s;
    opacity: 1;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.panel .panel-heading .accordion-toggle.collapsed:after,
.panel .panel-heading .accordion-toggle.collapsed:focus:after {
    opacity: 0.9;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* Cannot disable icon rotation on mobile device, so this feature is removed
.panel .panel-heading .accordion-toggle.collapsed:hover:after {
    opacity: 1;
    -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
            transform: rotate(15deg);
}
*/
.panel-default .panel-heading.storage_container table td:first-child {
    background: #eee;
    padding: 0 40px
}

.panel-default.twitter {
    border: 1px solid #ddd
}

.panel-default.twitter .panel-heading {
    background: #55acee;
    color: #fff
}

.panel-default.twitter .panel-heading .fa {
    font-size: 18px
}

.panel-default.twitter .panel-body {
    font-size: 12px
}

.panel-default.twitter .panel-body hr {
    margin-top: 10px;
    margin-bottom: 10px
}

.panel-default.facebook .panel-heading {
    background: #385898;
    color: #fff
}

.panel-title {
    font-size: 14px;
    line-height: 2
}

.panel-body.limited-height {
    max-height: 240px;
}

.panel-body.limited-height-md {
    max-height: 360px;
}

.panel.panel-clickable {
    -webkit-transition: box-shadow 0.3s, border-color 0.3s;
    -moz-transition: box-shadow 0.3s, border-color 0.3s;
    transition: box-shadow 0.3s, border-color 0.3s;
}

.panel.panel-clickable:hover {
    cursor: pointer;
}

.panel.panel-sm>.panel-heading {
    padding: 2px 6px;
}

.panel.panel-sm>.panel-body {
    padding: 6px;
}

.panel.panel-no-padding>.panel-body {
    padding: 0px;
}

/*
|--------------------------------------------------------------------------
| Images
|--------------------------------------------------------------------------
 */

img {
    opacity: 1;
    transition: opacity 0.3s;
}

img[data-src] {
    opacity: 0;
}

.background {
    text-align: center;
    position: relative;
}

.panel-default>.panel-body.background.background-cover,
.background-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.panel-default>.panel-body.background.background-repeat,
.background-repeat {
    background-repeat: repeat;
    background-size: auto;
}

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

/*
|--------------------------------------------------------------------------
| Carousel
|--------------------------------------------------------------------------
 */
.carousel-item-detail {
    margin-bottom: 10px
}

/*
|--------------------------------------------------------------------------
| ChartJS
|--------------------------------------------------------------------------
*/

.graph-grid-container {
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| Storage icons
|--------------------------------------------------------------------------
 */
.storage_icons img {
    margin-left: 10px;
    cursor: pointer
}

/*
|--------------------------------------------------------------------------
| Documents
|--------------------------------------------------------------------------
*/

.list-group-document {
    min-height: 400px;
}

.folder-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
    display: none;
}

.folder-overlay.in {
    display: block
}

.folder-storage-buttons {
    /* padding: 10px 20px; */
    /* margin-bottom: 6px; */
    text-align: center;
    /* border-bottom: 2px solid #ddd; */
    background: #fff;
}

.account-storage-buttons {
    text-align: center;
}

.folder-storage-buttons .alert {
    margin: 4px;
}

.folder-storage-buttons .storage-buttons-container,
.account-storage-buttons .storage-buttons-container {
    padding: 20px
}

.folder-overlay .folder-storage-buttons .storage-buttons-container {
    padding: 12px 20px;
}

.folder-storage-buttons .storage-button-wrapper,
.account-storage-buttons .storage-button-wrapper {
    padding: 4px;
}

.folder-storage-buttons .storage-button,
.account-storage-buttons .storage-button {
    font-size: 11px;
    display: inline-block;
}

.storage-button .storage-label {
    padding-top: 2px;
}

.form-storage-buttons-container .allowed-file-types {
    margin-left: 30px;
    margin-right: 30px;
}

#uploadImagesSidebar .form-storage-buttons-container .allowed-file-types {
    margin-left: 0px;
    margin-right: 0px;
}

.form-storage-buttons-container .storage-buttons {
    padding: 10px 30px;
}

#uploadImagesSidebar .form-storage-buttons-container .storage-buttons {
    padding-left: 0px;
    padding-right: 0px;
}

.form-storage-buttons-container .storage-button {
    display: block;
    margin-bottom: 8px;
    text-align: left;
    font-size: 13px;
    font-weight: bold;
}

.storage-buttons .storage-button .storage-logo img {
    width: 26px;
}

.form-storage-buttons-container .storage-label {
    margin-left: 10px;
}

.storage-buttons .storage-logo {
    height: 36px;
}

.storage-button .storage-button-error-indicator {
    display: none;
}

.storage-button.disabled .storage-button-error-indicator {
    display: block;
}

.selected-file input[type="file"] {
    visibility: hidden;
}

/*
|--------------------------------------------------------------------------
| Criteria
|--------------------------------------------------------------------------
 */

.panel-criteria>.panel-heading,
.panel-criteria>.panel-body {
    padding: 5px
}

.panel-criteria.panel-default[data-required-subject="1"] {
    margin-bottom: 2px;
    transition: all .3s ease;
}

.criteriaChoice {
    background: #eee;
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 0 5px;
    margin-bottom: 5px;
}

.criteriaChoice:last-of-type {
    margin-bottom: 0px;
}

.criteriaChoice.display {
    padding: 5px 10px;
}

.criteriaChoice .checkbox {
    margin-top: 5px;
    margin-bottom: 5px
}

.criteriaChoiceData {
    padding: 4px 20px 12px;
}

.criteriaChoice .criteriaChoiceData .row:last-of-type .choice-data-control.form-group {
    margin-bottom: 0px;
}

.criteriaChoice .form-control.choice-option-dropdown {
    height: 26px;
    line-height: 26px;
    margin: 2px 0;
    padding-top: 3px;
    padding-bottom: 3px;
}


.subject-description {
    font-size: 1.1em;
}

.requiredCriteria {
    background-color: rgba(28, 162, 19, 0.61);
}

.assetCriteria {
    background-color: rgba(174, 178, 153, 0.8);
}

.undesirableCriteria {
    background-color: rgb(246, 112, 112);
}

.optionalCriteria {
    background-color: rgba(21, 127, 189, 0.56);
}

/* TODO: Creer des couleurs dans le backoffice */

#required-criteria {
    background-color: rgba(28, 162, 19, 0.61);
}

.at-least-one-criteria {
    background-color: rgba(21, 127, 189, 0.56);
}

.at-least-one-criteria:empty::after {
    color: white;
}

#asset-criteria {
    background-color: rgba(174, 178, 153, 0.8);
}

#undesirable-criteria {
    background-color: rgb(246, 112, 112);
}

#undesirable-criteria:empty::after {
    color: white;
}

.legend-criteria .fa-ban {
    color: red;
}

.criteriaOptionsContainer .fa-thumbs-down,
.criteriaOptionsContainer .fa-thumbs-up {
    font-size: 20px
}

.criteria-list {
    list-style-type: none;
    margin: 0;
    padding: 20px;
    border: 2px solid transparent;
    border-radius: 10px;
}

.criteria-list:empty {
    border: 2px dashed #fff;
    text-align: center
}

.criteria-list:empty::after {
    content: attr(placeholder);
}

.criteria {
    display: inline-block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    vertical-align: middle;
    list-style-type: none;
    -webkit-transition: all 0.2s;
    transition: all 0.3s;
    margin: 0.4rem;
    border: 3px solid transparent;
    cursor: move;
    text-align: center;
    vertical-align: middle;
}

.legend-criteria {
    display: inline-block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    vertical-align: middle;
    list-style-type: none;
    background: #fff;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    margin: 0.6rem;
    border: #000013 0.15rem solid;
    border-radius: 0.2rem;
    text-align: center;
    vertical-align: middle;
}

.criteria.disabled,
.criteria.gu-mirror.only-group {
    cursor: not-allowed;
}

.criteria .table {
    margin-bottom: 0;
}

.criteria-message-at-least-one {
    padding: 5px 10px;
    border-radius: 2px
}

.criteriaChoice:not(.disabled) .criteria-choice-control {
    cursor: pointer;
}

.criteria-choice-control .checkbox {
    padding-left: 0px;
}

.criteria-choice-control .checkbox label {
    padding-left: 0px;
    width: 20px;

}

.criteria-choice-control .checkbox label::before,
.criteria-choice-control .checkbox label::after {
    left: 20px;
}

/*
|--------------------------------------------------------------------------
| Buttons text
|--------------------------------------------------------------------------
 */
/*.btn:not(.dropdown-toggle):not(.storage-button){white-space: normal;word-break: break-word}*/


.criteriaChoice .checkbox>div.row {
    height: 0;
}

.criteriaChoice .criteria_options .choice_options>span {
    padding: 0;
    margin-right: 0;
}

.criteria_options {
    padding: 0px 4px;
}

.choice_options {
    position: relative;
    top: -3px;
    padding: 0;
}

.glyphicon-information {
    padding: 0;
    padding-left: 5px;
    font-size: 25px;
    cursor: pointer;
}

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

    .criteriaChoice .checkbox>div.row {
        margin-left: -20px;
        height: inherit;
    }

    .criteriaChoice .criteria_options {
        padding: 0;
        margin-left: -20px;
        margin-top: 20px;
        position: inherit;
    }

    .criteriaChoice .criteria_options .choice_options>span {
        padding: 0;
        margin-right: 0;
    }

    .choice_options {
        position: relative;
        top: -3px;
        padding: 0;
    }

    .glyphicon-information {
        padding: 0;
        padding-left: 5px;
        font-size: 20px;
    }
}

/*
|--------------------------------------------------------------------------
| Conditions
|--------------------------------------------------------------------------
*/

.conditions-modal .modal-right-panel .modal-body .tab-content * {
    text-align: left;
}

/* This expression must stay below .conditions-modal .modal-right .modal-body .tab-content */
.conditions-modal .modal-right-panel .modal-body .tab-content .wizard-step .panel .panel-heading {
    text-align: center;
}

@media (min-width: 768px) {

    /* To reduce spaces to the right of the wizard step title */
    .conditions-modal .modal-dialog.modal-xl.wizard .modal-left-panel {
        flex: 0 0 25%;
        min-width: 300px;
        height: auto;
    }
}

@media only screen and (max-width: 767px) {
    .modal-content .condition-title {
        display: none;
    }
}

/*
|--------------------------------------------------------------------------
| Map
|--------------------------------------------------------------------------
*/

.map-component {
    /* height: 500px; */
    /* height: 58vh; */
    height: 100%;
    min-height: 58vh;
    z-index: 1;
}

/*
|--------------------------------------------------------------------------
| Dataview
|--------------------------------------------------------------------------
*/

.dataview .dataview-actions-container {
    margin-bottom: 6px;
}

.dataview .dataview-actions-container .filters-count {
    margin-right: 4px;
}

.dataview .btn-display-container {
    padding-right: 4px;
}

.dataview .dataview-items-footer {
    padding-top: 16px;
}

.dataview-item {
    -webkit-transition: box-shadow 1s;
    -o-transition: box-shadow 1s;
    transition: box-shadow 1s;
    box-shadow: 0;
}

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

    .dataview .dataview-items-footer:not(.force-mobile) {
        padding-top: 0px;
    }

}

/* Side Filters */

.display-menu-section:not(:last-child) {
    margin-bottom: 8px;
}

.display-menu-section-title,
.side-section-title {
    font-size: 1.1em;
    font-weight: bold;
    border-bottom: 1px solid #DCDCDC;
    padding: 4px 0px 2px;
    margin-bottom: 6px;
}

.title-collapse-toggle {
    margin-right: 4px;
    margin-left: 4px;
}

.side-filters-item .item-label {
    font-size: 12px;
    padding: 8px 0px 4px;
}

.dataview .btn-filter.has-filters {
    background: #DB8C20;
    color: white;
}

.dataview .btn-filter.has-filters:hover {
    background: #DB8C20;
}

.dataview .data-container {
    position: relative;
    min-height: 60px;
}

.dropdown-dv-mode {
    display: inline-block;
}

.dataview.dataview-compact .btn-show-add,
.dataview.dataview-compact .btn-filter {
    margin-bottom: 10px;
}

/* .dataview-list,
.dataview-grid {
    padding: 5px 5px;
} */

.dataview-list-item .panel-heading,
.dataview-grid-item .panel-heading {
    padding: 7px 5px;
}

.dataview-list-item .btn.btn-list,
.dataview-grid-item .btn.btn-list {
    width: 100%;
    max-width: 160px;
}

.dataview-calendar-item .mb-in-grid,
.dataview-grid-item .mb-in-grid {
    padding-bottom: 16px;
}

.dataview-calendar-item,
.dataview-list-item {
    padding-bottom: 16px;
}

.dataview-list-item:last-of-type {
    padding-bottom: 0px;
}

.dataview-grid .dataview-page {
    display: flex;
    flex-wrap: wrap;
}

.dataview-grid-item {
    flex: 0 0 auto;
    box-sizing: border-box;
}

.dataview-map-popup:not(.auto-width) {
    width: 240px;
}

.dataview-map-errors {
    padding-top: 10px;
}

.dataview-pagination {
    margin: 20px 0px;
}

.dataview-pagination .pagination {
    margin: 0px;
}

.dataview-total-result {
    font-size: 1.1em;
    color: #444444;
    margin-bottom: 15px;
}

.dataview-total-result .dataview-total-result-number {
    margin-right: 2px;
}

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

    .dataview-pagination-inner-container {
        padding-top: 10px;
        padding-bottom: 24px;
    }

}




.calendar-date-details .flex-panel.fullwidth-ingrid,
.dataview-map-popup .flex-panel.fullwidth-ingrid,
.dataview-carousel .dataview-item .flex-panel.fullwidth-ingrid,
.dataview-grid-item .flex-panel.fullwidth-ingrid {
    display: block;
}

.calendar-date-details [class^='col-'].fullwidth-ingrid,
.calendar-date-details [class*='col-'].fullwidth-ingrid,
.dataview-map-popup [class^='col-'].fullwidth-ingrid,
.dataview-map-popup [class*='col-'].fullwidth-ingrid,
.dataview-carousel .dataview-item [class^='col-'].fullwidth-ingrid,
.dataview-carousel .dataview-item [class*='col-'].fullwidth-ingrid,
.dataview-grid-item [class^='col-'].fullwidth-ingrid,
.dataview-grid-item [class*='col-'].fullwidth-ingrid {
    width: 100%;
}

.calendar-date-details .hidden-in-grid,
.dataview-map-popup .hidden-in-grid,
.dataview-carousel .dataview-item .hidden-in-grid,
.dataview-grid-item .hidden-in-grid {
    display: none !important;
}

.calendar-date-details .visible-in-grid,
.dataview-map-popup .visible-in-grid,
.dataview-carousel .dataview-item .visible-in-grid,
.dataview-grid-item .visible-in-grid {
    display: block !important;
}

.dataview-actions-container {
    position: relative;
}

.dt-filters {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 4px 4px 20px transparent;
    z-index: 5;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s;
    -moz-transition: -moz-transform 0.3s, box-shadow 0.3s;
    transition: transform 0.3s, box-shadow 0.3s;
}

.dt-filters.filter-is-visible {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
}

.availability-chart-container {
    max-width: 240px;
}

/************************************ Details *************************************************/
.details-element {
    margin-bottom: 6px;
}

.details-element>label {
    margin-bottom: 0px;
}

.details-element a.label {
    font-size: 0.8em;
    margin: 2px;
}

.details-element .details-element-well {
    padding: 4px;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    overflow: auto;
}

/* .details-element > .details-element-value {

} */

/************************************ filters *************************************************/

.dataview-filters-container {
    height: 100%;
    padding: 0px 8px;
}

.dataview-filters-buttons {
    height: 100%;
    padding: 4px;
}

.dataview-filters-buttons .btn {
    margin-top: 0px;
}

.dt-filters-block {
    margin-bottom: 1.6em;
}

.dt-filters-block h4 {
    /* filter block title */
    position: relative;
    margin-bottom: .2em;
    padding: 10px 0 10px 20px;
    color: #774545;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.3rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.pw-filter-block label {
    /* filter block title */
    position: relative;
    margin-bottom: .2em;
    padding: 0 0 10px 20px;
    color: #774545;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.3rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.no-touch .pw-filter-block h4:hover {
    color: #41307c;
}

.datetimepicker-inline {
    border: 2px solid
}

.switch-group-filter .switch-group-filter-option {
    margin: 2px;
}

/*.panel-body{height:500px;overflow:auto}*/

.dt-filters i.fa.fa-thumbs-o-up,
.dt-filtersi.fa.fa-check-circle {
    color: #1E884B
}

.dt-filters i.fa.fa-exclamation-circle,
.dt-filters i.fa.fa-question-circle {
    color: #3498DB
}

.dt-filters i.fa.fa-thumbs-o-down,
i.fa.fa-times-circle {
    color: #e74c3c
}

.dt-filters-block .btn-default.clicked {
    opacity: 0.4;
}

.dropdown-toggle .dataview-mode-title {
    display: none;
}

@media screen and (min-width: 768px) {
    .dataview:not(.dataview-compact) .preferencesBtn {
        max-width: 45px;
    }

    .dataview:not(.dataview-compact) .sortBtn {
        max-width: 260px;
    }

    .dataview:not(.dataview-compact) .rowBtn {
        max-width: 220px;
    }

    .dropdown-toggle .dataview-mode-title {
        display: inline;
    }

    /* .dataview-grid-item {
       max-width: calc(50% -  1em);
    } */

}

@media screen and (min-width: 1192px) {
    .dataview:not(.dataview-compact) .dataview-pagination {
        /* text-align: right; */
    }

    /* .dataview-grid-item {
        max-width: calc(33% - 1em);
    } */
}

.dataview-page span.label.wrap {
    white-space: normal
}

/*
|--------------------------------------------------------------------------
| Wizard
|--------------------------------------------------------------------------
*/

@media only screen and (max-width : 991px) {
    .page-header.details-page-header {
        padding-bottom: 2px;
        margin: 0px 0px 2px;
    }

    .page-header.details-page-header h3 {
        font-size: 16px;
        margin-top: 0px;
        margin-bottom: 2px;
    }
}

.sw-theme-arrows .step-content {
    padding-top: 10px
}

/*
|--------------------------------------------------------------------------
| Dataview item (Aka: Entity short description)
|--------------------------------------------------------------------------
*/

.dataview-item:not(.react-root .dataview-item) {
    margin: 0;
    border-radius: 5px;
    line-height: 25px;
}

.dataview-item .panel {
    height: 100%;
    margin-bottom: 0;
}

/* .dataview-item .panel:not(.panel-sm) .panel-title { line-height: 1.1; } */
.dataview-item .well {
    margin-bottom: 0;
}

.dataview-item .awesome_icon i.fa.fa-exclamation-circle,
.dataview-item .awesome_icon i.fa.fa-thumbs-o-up,
.dataview-item .awesome_icon i.fa.fa-thumbs-o-down {
    font-size: 2em;
}

.btn.btn-dataview-item,
.btn.btn-block.btn-dataview-item {
    margin: 4px;
    padding: 6px;
    border-radius: 10px;
    display: block;
}

.btn-dataview-item-container {
    padding: 0px 0px;
}

.dataview-grid-item .dataview-item {
    padding: 4px;
}

.title-bar {
    border-radius: 3px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 5px;
}

.title-bar.title-bar-label {
    width: 80px;
    display: inline-block;
    margin-right: 5px;
}

.title-bar.title-bar-default {
    /* background: #ddd;
    color: #333; */

}

@media only screen and (max-width: 479px) {
    .title-bar.title-bar-label {
        width: 100%;
        display: block;
        margin-right: 0px;
        margin-bottom: 5px;
        text-align: center;
    }
}

.dataview-item .panel-dataview-item {
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
    border-color: #ccc;
}

.panel.panel-criteria>.panel-body,
.dataview-item .panel-dataview-item>.panel-body {
    border-radius: 4px;
}

.dataview-item .panel-body {
    padding: 5px;
}

.dataview-item .row {
    margin-right: 0px;
    margin-left: 0px;
}

.dataview-item .info-section {
    margin-top: 6px;
    margin-bottom: 6px;
    padding-left: 3px;
    padding-right: 3px;
}

.dataview-item .info-section .info-section-header {
    padding-bottom: 3px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 6px;
}

.dataview-item .info-section .info-section-header .info-section-header-title {
    font-size: 1.08em;
}

.avatar {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 8px;
}

.avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.avatar.square img {
    border-radius: 0px;
}

.avatar.avatar-md img {
    width: 60px;
    height: 60px;
}

.avatar-text {
    font-size: 1.2em;
}

.alert-interest-status {
    padding: 6px;
    word-wrap: normal;
    word-break: normal;
}

.info {
    margin-bottom: 4px;
    word-wrap: normal;
    word-break: normal;
    padding-left: 3px;
    padding-right: 3px;
}

.info .info-body {
    padding-left: 6px;
    word-wrap: normal;
}

.jobBoardEntityShortDescription .panel {
    margin-bottom: 0
}

.dataview-grid-item .jobBoardEntityShortDescription .panel-heading {
    height: 70px
}

/*.dataview-grid-item .jobBoardEntityShortDescription .panel-body .data{height:200px}*/
.dataview-grid-item .jobBoardEntityShortDescription .panel-body .data .summary {
    margin-top: 10px;
    margin-bottom: 10px;
}

.dataview-grid-item .jobBoardEntityShortDescription .panel-body .item-actions {
    margin-top: 10px
}

.dataview-grid-item .jobBoardEntityShortDescription .panel-body .job-schedule-container {
    margin-top: 10px;
}

.jobBoardEntityShortDescription .job_criteria:not(.job_schedule) {
    word-break: break-word;
    line-height: 30px
}

.weekScheduletable {
    margin-bottom: 0px
}

.weekScheduletable th {
    color: #000;
    padding: 2px;
    font-size: 11px
}

.weekScheduletable .inactive-day {
    color: #ababab
}

.jobboard-offer-details-button {
    border-radius: 15px
}

textarea.no-resize {
    resize: none
}

/*
|--------------------------------------------------------------------------
| Font Awesome: concatenate 3 icons in one
|--------------------------------------------------------------------------
*/
.icon-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
}

.icon-stack-1x,
.icon-stack-2x,
.icon-stack-3x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

.icon-stack-3x {
    font-size: 2em;
}

.icon-stack-2x,
.icon-stack-1x {
    line-height: inherit;
}

/*
|--------------------------------------------------------------------------
| Login Box : LoginOR
|--------------------------------------------------------------------------
*/

.loginOr {
    position: relative;
}

.hrOr {
    height: 1px;
    border: 0;
    border-top: 1px solid;
    margin-bottom: 35px;
}

.spanOr {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -1.5em;
    top: calc(-1.5em / 2);
    width: 3em;
    font-size: 1.5em;
    text-align: center;
}

/*
|--------------------------------------------------------------------------
| Login Box : Social Buttons
|--------------------------------------------------------------------------
*/

.btn-social {
    position: relative;
    padding-left: 44px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-state-container {
    position: absolute;
    /* right: 30px; */
    display: flex;
    align-items: center;
    font-size: 12px;
}

.btn-state-container>span:first-of-type {
    position: relative;
    right: 5px;
}

.btn-state-container>span:last-of-type {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    clear: both;
}

.state-active {
    background-color: rgb(183, 252, 115);
    box-shadow: inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5),
        0px 0px 3px 3px rgba(183, 252, 115, 0.5);
}

.text-active {
    color: rgb(183, 252, 115);
}

.state-inactive {
    background-color: #ddd;
}

.text-inactive {
    color: #ddd;
}

/* .btn-apple .state-active {
    background-color: rgb(101, 203, 23);
    box-shadow: inset 0px 1px 0px 0px rgba(169, 220, 255, 0.5),
        0px 0px 3px 3px rgba(101, 203, 23, 0.3);
}

.btn-apple .text-active {
    color: rgb(101, 203, 23);
}

.btn-apple .state-inactive {
    background-color: rgb(131, 131, 131);
}

.btn-apple .text-inactive {
    color: rgb(131, 131, 131);
} */

.btn-social-lg {
    width: calc(100% - 2.5px);
    font-size: 48px;
}

.btn-social>:first-child {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 34px;
    line-height: 34px;
    font-size: 1.6em;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

/* Facebook */

.panel-facebook>.panel>.panel-heading,
.btn-facebook {
    color: #fff;
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook:focus,
.btn-facebook.focus {
    color: #fff;
    /* background-color: #2d4373; */
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook:hover {
    color: #fff;
    /* background-color: #2d4373; */
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook:active,
.btn-facebook.active,
.open>.dropdown-toggle.btn-facebook {
    color: #fff;
    /* background-color:#2d4373; */
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-facebook:active:hover,
.btn-facebook.active:hover,
.open>.dropdown-toggle.btn-facebook:hover,
.btn-facebook:active:focus,
.btn-facebook.active:focus,
.open>.dropdown-toggle.btn-facebook:focus,
.btn-facebook:active.focus,
.btn-facebook.active.focus,
.open>.dropdown-toggle.btn-facebook.focus {
    color: #fff;
    /* background-color: #23345a; */
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook:active,
.btn-facebook.active,
.open>.dropdown-toggle.btn-facebook {
    background-image: none;
}

.btn-facebook.disabled:hover,
.btn-facebook[disabled]:hover,
fieldset[disabled] .btn-facebook:hover,
.btn-facebook.disabled:focus,
.btn-facebook[disabled]:focus,
fieldset[disabled] .btn-facebook:focus,
.btn-facebook.disabled.focus,
.btn-facebook[disabled].focus,
fieldset[disabled] .btn-facebook.focus {
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook .badge {
    color: #3b5998;
    background-color: #fff;
}

/* Google */

.panel-google>.panel>.panel-heading,
.btn-google {
    color: #fff;
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-google:focus,
.btn-google.focus {
    color: #fff;
    /* background-color: #c23321; */
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-google:hover {
    color: #fff;
    /* background-color: #c23321; */
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-google:active,
.btn-google.active,
.open>.dropdown-toggle.btn-google {
    color: #fff;
    /* background-color: #c23321; */
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-google:active:hover,
.btn-google.active:hover,
.open>.dropdown-toggle.btn-google:hover,
.btn-google:active:focus,
.btn-google.active:focus,
.open>.dropdown-toggle.btn-google:focus,
.btn-google:active.focus,
.btn-google.active.focus,
.open>.dropdown-toggle.btn-google.focus {
    color: #fff;
    /* background-color: #a32b1c; */
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-google:active,
.btn-google.active,
.open>.dropdown-toggle.btn-google {
    background-image: none;
}

.btn-google.disabled:hover,
.btn-google[disabled]:hover,
fieldset[disabled] .btn-google:hover,
.btn-google.disabled:focus,
.btn-google[disabled]:focus,
fieldset[disabled] .btn-google:focus,
.btn-google.disabled.focus,
.btn-google[disabled].focus,
fieldset[disabled] .btn-google.focus {
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-google .badge {
    color: #dd4b39;
    background-color: #fff;
}

/* Linkedin */

.panel-linkedin>.panel>.panel-heading,
.btn-linkedin {
    color: #fff;
    background-color: #007bb6;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-linkedin:focus,
.btn-linkedin.focus {
    color: #fff;
    /* background-color:#005983; */
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-linkedin:hover {
    color: #fff;
    /* background-color:#005983; */
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-linkedin:active,
.btn-linkedin.active,
.open>.dropdown-toggle.btn-linkedin {
    color: #fff;
    /* background-color:#005983; */
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-linkedin:active:hover,
.btn-linkedin.active:hover,
.open>.dropdown-toggle.btn-linkedin:hover,
.btn-linkedin:active:focus,
.btn-linkedin.active:focus,
.open>.dropdown-toggle.btn-linkedin:focus,
.btn-linkedin:active.focus,
.btn-linkedin.active.focus,
.open>.dropdown-toggle.btn-linkedin.focus {
    color: #fff;
    /* background-color:#00405f; */
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-linkedin:active,
.btn-linkedin.active,
.open>.dropdown-toggle.btn-linkedin {
    background-image: none;
}

.btn-linkedin.disabled:hover,
.btn-linkedin[disabled]:hover,
fieldset[disabled] .btn-linkedin:hover,
.btn-linkedin.disabled:focus,
.btn-linkedin[disabled]:focus,
fieldset[disabled] .btn-linkedin:focus,
.btn-linkedin.disabled.focus,
.btn-linkedin[disabled].focus,
fieldset[disabled] .btn-linkedin.focus {
    background-color: #007bb6;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-linkedin .badge {
    color: #007bb6;
    background-color: #fff;
}

/* Apple */

.panel-apple>.panel>.panel-heading,
.btn-apple {
    color: var(--apple-bg-color);
    background-color: var(--apple-color);
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-apple:focus,
.btn-apple.focus {
    color: var(--apple-bg-color);
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-apple:hover {
    color: var(--apple-bg-color);
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-apple:active,
.btn-apple.active,
.open>.dropdown-toggle.btn-apple {
    color: var(--apple-bg-color);
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-apple:active:hover,
.btn-apple.active:hover,
.open>.dropdown-toggle.btn-apple:hover,
.btn-apple:active:focus,
.btn-apple.active:focus,
.open>.dropdown-toggle.btn-apple:focus,
.btn-apple:active.focus,
.btn-apple.active.focus,
.open>.dropdown-toggle.btn-apple.focus {
    color: var(--apple-bg-color);
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-apple:active,
.btn-apple.active,
.open>.dropdown-toggle.btn-apple {
    background-image: none;
}

.btn-apple.disabled:hover,
.btn-apple[disabled]:hover,
fieldset[disabled] .btn-apple:hover,
.btn-apple.disabled:focus,
.btn-apple[disabled]:focus,
fieldset[disabled] .btn-apple:focus,
.btn-apple.disabled.focus,
.btn-apple[disabled].focus,
fieldset[disabled] .btn-apple.focus {
    background-color: var(--apple-color);
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-apple .badge {
    color: var(--apple-color);
    background-color: var(--apple-bg-color);
}

/* Email */

.panel-email>.panel>.panel-heading,
.btn-email {
    color: #fff;
    background-color: #5a9c6b;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-email:focus,
.btn-email.focus {
    color: #fff;
    background-color: #447751;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-email:hover {
    color: #fff;
    background-color: #447751;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-email:active,
.btn-email.active,
.open>.dropdown-toggle.btn-email {
    color: #fff;
    background-color: #447751;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-email:active:hover,
.btn-email.active:hover,
.open>.dropdown-toggle.btn-email:hover,
.btn-email:active:focus,
.btn-email.active:focus,
.open>.dropdown-toggle.btn-email:focus,
.btn-email:active.focus,
.btn-email.active.focus,
.open>.dropdown-toggle.btn-email.focus {
    color: #fff;
    background-color: #00405f;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-email:active,
.btn-email.active,
.open>.dropdown-toggle.btn-email {
    background-image: none;
}

.btn-email.disabled:hover,
.btn-email[disabled]:hover,
fieldset[disabled] .btn-email:hover,
.btn-email.disabled:focus,
.btn-email[disabled]:focus,
fieldset[disabled] .btn-email:focus,
.btn-email.disabled.focus,
.btn-email[disabled].focus,
fieldset[disabled] .btn-email.focus {
    background-color: #5a9c6b;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-email .badge {
    color: #5a9c6b;
    background-color: #fff
}

/*.fa.fa-facebook {color: #3b5898}
.fa.fa-linkedin {color: #0177b5}
.fa.fa-twitter {color: #1da1f2}
.fa.fa-google-plus {color: #dd4d41}*/

/*
|--------------------------------------------------------------------------
| label switch
|--------------------------------------------------------------------------
 */
.btn-default.btn-off,
.btn-default.btn-on {
    background-color: #eee;
    color: #a3a2a7
}

.btn-default.btn-on.active {
    background-color: #5BB75B;
    color: white;
    border-color: #adadad
}

.btn-default.btn-off.active {
    background-color: #DA4F49;
    color: white;
    border-color: #adadad
}

/*
|--------------------------------------------------------------------------
| Dropdown menu
|--------------------------------------------------------------------------
 */

.panel-heading>.dropdown .dropdown-toggle {
    color: #fff
}

.dropdown-menu {
    padding: 10px;
}

.dropdown-menu-center {
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

/*
|--------------------------------------------------------------------------
| Bootstrap select
|--------------------------------------------------------------------------
 */

/*
|--------------------------------------------------------------------------
| authentication module
|--------------------------------------------------------------------------
 */
#confirmation-panel {
    width: 100%;
    z-index: 20;
}

/* Confirmation panel button div */
.change-buttons-div {
    margin-top: 10px;
    float: right;
}

/* Inactive panel msg. */

.active-method,
.one-method {
    border: 1px solid #d6e9c6;
    background-color: #dff0d8;
    color: #3c763d;
    padding: 15px;
    border-radius: 5px;
}

/* Inactive panel msg. */

.inactive-method {
    border: 1px solid #faebcc;
    background-color: #fcf8e3;
    color: #8a6d3b;
    padding: 15px;
    border-radius: 5px;
}

.auth-method>p {
    margin: 0;
}

.email-btn {
    cursor: pointer;
}

.auth-btn-edit-email .btn {
    border-radius: 3px !important;
}

/*
|--------------------------------------------------------------------------
| Modal footer
|--------------------------------------------------------------------------
 */

.apreciation {
    border-bottom: 1px solid #ccc;
    text-align: initial;
    margin-bottom: 15px;
}

.newRequest-apreciation {
    padding-bottom: 10px;
}

.job-apreciation {
    border: 1px solid #000;
}

.job-apreciation table {
    margin: 10px;
}

.job-apreciation tr>td:first-child {
    padding-right: 10px;
}

.job-apreciation tr>td:last-child {
    padding-right: 20px;
}

.job-apreciation tr:first-child>td:first-child {
    padding-bottom: 5px;
}

.label-apreciation {
    border-bottom: 2px solid #E67E22;
}

.thumb-container {
    color: #FFF;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    opacity: 0.3;
}

.apreciation .fa {
    color: #FFF !important;
    margin-left: 10px;
    padding: 10px 0;
}

.interest {
    background-color: #1E884B;
}

.not-interest {
    background-color: #e74c3c;
}

.active-thumb {
    opacity: 1;
}

.commentaire-apreciation {
    width: 100%;
    margin-top: 5px;
}

/*
|--------------------------------------------------------------------------
| Job Contacts
|--------------------------------------------------------------------------
*/

#addJobContactContainer .well {
    margin: 8px 0px;
}


/*
|--------------------------------------------------------------------------
| Availabilities
|--------------------------------------------------------------------------
*/

.table.table-week {
    margin-bottom: 5px;
    /* height: 100%; */
}

.table.table-week thead th {
    padding: 4px;
}

.table.table-week thead th {
    text-align: center;
    cursor: pointer;
}

table.week-usual-schedule {
    width: 100%
}

table.week-usual-schedule>thead>tr>th,
table.week-usual-schedule>tbody>tr>td {
    padding: 2px;
    text-align: center;
    height: 25px
}

.edit-week-usual-schedule .table-striped {
    margin-bottom: 0
}

.edit-week-usual-schedule .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #e6e6e6;
}

.edit-week-usual-schedule td .fa-plus-circle {
    color: #90b374;
    font-size: 25px;
    cursor: pointer
}

.edit-week-usual-schedule td .fa-check {
    color: #96bb79
}

.edit-week-usual-schedule td .fa-times {
    color: #dc423f
}

.edit-week-usual-schedule .hours {
    padding: 2px 4px;
    border-radius: 4px;
    display: inline-block;
    color: white;
}

.edit-week-usual-schedule .hours.available {
    background-color: #5cb85c;
}

.edit-week-usual-schedule .hours.unavailable {
    background-color: #d9534f;
}

.edit-week-usual-schedule {
    list-style-type: none;
    width: 100%;
    padding-left: 0;
}

.week-usual-schedule li {
    display: inline-block;
    width: 13%;
    margin: 0 5px 0 0;
}

.edit-week-usual-schedule table td {
    min-width: 110px
}

.edit-week-usual-schedule table td.week-day-hour-form {
    font-size: 11px;
}

.edit-week-usual-schedule table td .fa-check {
    color: #96bb79
}

.edit-week-usual-schedule table td .fa-times {
    color: #dc423f
}

.edit-week-usual-schedule table th .fa-pencil-square-o {
    line-height: 20px
}

.edit-week-usual-schedule [class*="col-sm-"],
.edit-week-usual-schedule [class*="col-md-"] {
    padding-left: 0;
    padding-right: 0;
}

.edit-usual-schedule .view-week-models-btn {
    padding: 4px 5px;
    border-radius: 5px;
    margin-top: 0px;
}

.edit-usual-schedule .dropdown {
    vertical-align: middle;
}

/* Previous colors:     border: 1px solid #777b54;    color:#333; */
.edit-usual-schedule .delete-week-btn {
    font-size: 14px;
    padding: 3px 5px;
    border-radius: 5px;
    vertical-align: middle;
}

.day-availability-empty,
.edit-week-usual-schedule .day-availability-empty,
.edit-week-usual-schedule .day-availability {
    min-height: 24.5px;
}

.day-availability-empty-compact {
    min-height: 0px;
}

.availability-item {
    margin: 0px 0px 8px;
    padding: 6px 0px 6px;
    border-left: 2px solid var(--unavailability-color);
}

.availability-item[data-status="0"] {
    border-color: var(--availability-color);
}

.availability-item .form-group {
    margin-bottom: 0px;
}

.availability-item .unavailability-reasons-container .form-group {
    margin-top: 5px
}

.dropdown-menu li:not(.divider) {
    cursor: pointer;
    padding: 4px;
    color: initial
}

.dropdown-menu li.disabled {
    color: #d0cccc;
    pointer-events: none
}

.dropdown-menu li:hover {
    font-weight: bold
}

.ui-timepicker-minute-cell .ui-state-default {
    width: 4em;
    text-align: center;
}

#weeks-container {
    margin-top: 5px
}

#weeks-container .panel-title {
    margin-top: -5px;
    margin-bottom: -5px
}

#weeks-container .panel-title .week-title {
    line-height: 2
}

#weeks-container .panel-body {
    margin-bottom: 0px;
    padding: 0px;
}

#weeks-container .panel-body .table {
    margin-bottom: 0px;
}

.week-usual-schedule.table th,
.week-usual-schedule.table td,
#weeks-container .panel-body .table th,
#weeks-container .panel-body .table td {
    border: 0;
}

/* TODO: User backoffice color */
#conflict-error-msg span,
#start-end-same-error-msg span {
    color: #d9534f;
    font-size: 11px;
    font-weight: bold;
}

.availability-item.conflict-error .form_time {
    border: 1px solid #d9534f
}

/* TODO: Remove this patch (disabled modals) */
#usual-schedule-step .edit-usual-schedule .usched-start-date,
.pmodal-body-content.disabled .edit-usual-schedule {
    pointer-events: none;
}

.pmodal-body-content.current .edit-usual-schedule .usched-start-date,
.pmodal-body-content.disabled .edit-usual-schedule .usched-start-date,
.pmodal-body-content.disabled .edit-usual-schedule #add-week,
.pmodal-body-content.disabled .edit-usual-schedule .panel-default table th .fa,
.pmodal-body-content.disabled .edit-usual-schedule .panel-default .panel-title .btn {
    display: none
}

.pmodal-body-content.disabled .edit-usual-schedule .panel-default table td {
    background: #eee
}

/*
|--------------------------------------------------------------------------
| Job Type
|--------------------------------------------------------------------------
*/

.job-type-title {
    padding: 20px 0px;
}

.job-type-option-btn {
    padding: 30px;
    color: #FFFFFF;
}

.job-type-option-btn:hover {
    opacity: 0.8;
    color: #FFFFFF;
}

.job-type-option-btn .fa {
    font-size: 3em;
}

.option-content {
    height: 100%;
    width: 100%;
}

.option-content .panel-footer {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.option-content .option-content-header {
    background: #5CB85C;
}

.option-content hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

/*
|--------------------------------------------------------------------------
| Job Type contract
|--------------------------------------------------------------------------
*/
.job-contract-type-options {
    margin-bottom: 30px;
}

/* .job-contract-type-options .form-group,
.startdate-field,
.enddate-field{
    margin-left:30px;
} */

.package.job-contract-type-option {
    text-align: center;
    /* margin: 0 30px; */
    padding: 15px;
    width: 100%;
}

.job-contract-type-option:hover {
    cursor: pointer;
}

.flex-item.job-contract-type-option {
    flex: 1 1 0;
}

.job-contract-type-option .fa {
    font-size: 2em;
}

/*
|--------------------------------------------------------------------------
| Package
|--------------------------------------------------------------------------
| TODO: Simplify and cleanup classes
*/

.packages-list .flex-item {
    margin-bottom: 20px;
}

.link-box,
.question,
.package {
    background: white;
    border: 1px solid #C0C0C0;
    border-radius: 10px;

    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.question,
.package {
    padding: 20px;
}

.package {
    width: 80%;
    margin: 0px auto;
}

.link-box {
    padding: 6px;
    margin: 4px;
}

.link-box-files {
    margin: 0px 4px 4px 4px;
}

.package .glyphicon {
    font-size: 20px;
}

.link-box,
.package:hover {
    cursor: pointer;
}

.package-description {
    font-size: 16px;
    line-height: 26px;
    margin-left: 4px;
    font-weight: bold;
}

.package-price {
    font-size: 14px;
    line-height: 26px;
    color: #990000;
}

.packages-payment-text {
    width: 80%;
    margin: 10px auto;
}

.packages-payment-text img {
    width: 75px;
}

.packages-payment-text span {
    font-size: 12px;
}

.link-box.info-link {
    font-size: 0.9em;
}

/*
|--------------------------------------------------------------------------
| Page Help
|--------------------------------------------------------------------------
*/

#page-help-alert {
    font-size: 1.1em;
    overflow-x: hidden;
}

#page-help-alert .page-help-alert-content {
    padding: 10px 20px 18px 20px;
}

#page-help-button.btn.btn-default {
    font-size: 1em;
    padding: 0px 9px;
}

/*
|--------------------------------------------------------------------------
| Communications
|--------------------------------------------------------------------------
*/

.communication-item-container {
    -webkit-transition: transform 150ms, box-shadow 150ms, background-color 100ms, color 100ms, border-color 100ms, opacity 0.15s;
    -moz-transition: transform 150ms, box-shadow 150ms, background-color 100ms, color 100ms, border-color 100ms, opacity 0.15s;
    transition: transform 150ms, box-shadow 150ms, background-color 100ms, color 100ms, border-color 100ms, opacity 0.15s;
}

.communication-item-container:nth-child(even) {
    background-color: rgb(245, 245, 245);
}

.communication-item-container.clickable:hover {
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, .25) 0 3px 9px 0;
}

.communication-item {
    padding: 10px;
    font-size: 13px;
}

.communication-item[data-toggle=modal] {
    cursor: pointer;
}

.communication-item .sender {
    font-weight: bold;
}

.communication-item .subject {
    font-size: 12px;
}

/*
|--------------------------------------------------------------------------
| Media Queries
|--------------------------------------------------------------------------
 */

@media only screen and (max-width: 767px) {
    .right_col .pageHeader h2 {
        font-size: 20px;
    }

    .form-control:not(.input-sm) {
        font-size: 15px;
    }

    .btn-show-add,
    .btn-filter {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    .visible-lg-down {
        display: block;
        pointer-events: initial;
    }

    .visible-lg-up {
        display: none;

    }

    #container-redirectBtn {
        z-index: 99999;
    }

    .jobBoardEntityShortDescription.textmode {
        font-size: 12px
    }

    .row.short-description .short-description-body .body-action .btn {
        display: block;
        width: 100%;
    }

    .sharing-icons a {
        margin-right: 2px;
        margin-left: 2px;
    }
}

@media only screen and (min-width: 767px) {
    .dt-filters.filter-is-visible {
        width: 50%;
    }

    .visible-lg-down {
        display: none;
    }

    .visible-lg-up {
        display: block;
    }

    .dt-filters .panel-scroll {
        overflow-y: auto;
        height: auto;
    }
}

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

    .table.weekScheduletable>tbody>tr>th,
    .table.weekScheduletable>tbody>tr>td {
        padding: 2px
    }

    .panel-default .panel-heading.jobboard-search-form-header .panel-title>a {
        font-size: 13px
    }

}


/*
|--------------------------------------------------------------------------
| Errors
|--------------------------------------------------------------------------
*/

.data-required,
.msg-asterix {
    color: #FF0000
}

/*
|--------------------------------------------------------------------------
| Important
|--------------------------------------------------------------------------
*/

.important-notice {
    color: #d9534f;
}

/*
|--------------------------------------------------------------------------
| margin - padding - font-size - position - border
|--------------------------------------------------------------------------
*/

.nav-top-avatar {
    position: relative;
    height: 100%;
    display: inline-block;
}

.nav-top-avatar>.nav-top-avatar-contact img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
}

.nav-top-avatar>.nav-top-avatar-client {
    position: absolute;
    top: 45%;
    left: 50%;
    background-color: white;
    border-radius: 50%;
}

.nav-top-avatar>.nav-top-avatar-client img {
    height: 24px;
    border-radius: 50%;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.ft-size-12 {
    font-size: 12px
}

.ml-size-5 {
    margin-left: 5px
}

.ml-size-10 {
    margin-left: 10px
}

.ml-size-20 {
    margin-left: 20px
}

.mr-size-5 {
    margin-right: 5px
}

.mr-size-10 {
    margin-right: 10px
}

.mr-size-20 {
    margin-right: 20px
}

.mt-size-5 {
    margin-top: 5px
}

.mt-size-10 {
    margin-top: 10px
}

.mt-size-20 {
    margin-top: 20px
}

.mt-size-30 {
    margin-top: 30px
}

.mb-size-10 {
    margin-bottom: 10px
}

.mb-size-20 {
    margin-bottom: 20px
}

.mb-size-40 {
    margin-bottom: 40px
}

.mb-size-5 {
    margin-bottom: 5px
}

.pdl-size-20 {
    padding-left: 20px
}

.pdr-size-20 {
    padding-right: 20px
}

.span-fw {
    width: 10%;
    display: inline-block
}

.txt-decoration-line-through-red {
    text-decoration: line-through red
}

.inline-block {
    display: inline-block
}

.no-data-message {
    font-size: 0.9em;
    padding: 18px 6px;
    opacity: 0.9;
}

hr.separator {
    margin-top: 3px;
    margin-bottom: 10px;
}

.notice {
    color: #a94442;
}

hr.white-size-10 {
    border-color: #fff;
    margin: 10px 0
}

.no-bb {
    border-bottom: none
}

.position-relative {
    position: relative
}

.position-absolute {
    position: absolute
}

.str_ellipsis {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nowrap {
    white-space: nowrap;
}

.has-error .help-block {
    font-size: 11px;
    /* https://stackoverflow.com/a/28850794/4492709 */
    white-space: pre-wrap;
}

.help-block.with-errors {
    font-size: 11px;
}

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

.label.label-lg {
    /* padding: .2em .6em .3em; */
    font-size: 83%;
    /* font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em; */
}

.label.label-block {
    display: block;
    margin: 2px 0px;
    width: 100%;
    padding: 4px;
}

.label-status {
    margin-left: 1em;
}

.invisible {
    opacity: 0;
}

.disabled-section {
    opacity: 0.6;
    background-color: #eee !important;
}

@media (max-width: 991px) {
    .no-data-message:not(.keep-padding) {
        padding: 6px;
    }
}

.no-wrap {
    white-space: nowrap;
}

.pmodal .container-schedule:not(:first-child) {
    margin-top: 20px;
}

.width-inherit {
    width: inherit;
}

.form-section {
    padding: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    border: 1px solid #ddd;
}

/*
|--------------------------------------------------------------------------
| Branding
|--------------------------------------------------------------------------
*/

.facebook:hover,
.facebook:focus,
.facebook {
    background-color: var(--facebook-bg-color);
    color: var(--facebook-color);
}

.google:hover,
.google:focus,
.google {
    background-color: var(--google-bg-color);
    color: var(--google-color);
}

.linkedin:hover,
.linkedin:focus,
.linkedin {
    background-color: var(--linkedin-bg-color);
    color: var(--linkedin-color);
}

.apple:hover,
.apple:focus,
.apple {
    background-color: var(--apple-bg-color);
    color: var(--apple-color);
}