kiss/css/component.css

/* GENERAL */
input[data-type].invalid-value{
    border: 1px solid #ff0057;
}

/* COMPOSANT QUICKFORM */
div[data-type="quickform"] {
	position: relative;
	flex: 0 0 auto;
	cursor: pointer;
}
.quickform > span  {
	line-height: 3em;
}
.quickform-tooltip {
	opacity: 0.75;
    background: #333;
    color: #fff;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    border-radius: 2rem;
    border: 1px solid #fff;
    white-space: pre-wrap;
    text-decoration: none;
    box-shadow: none;
}
/* FIN COMPOSANT QUICKFORM */

/* COMPOSANT FILE */
input[data-type="file"]{
    display: none;
}
.component-file-default ul,.component-file-default li{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.component-file-default .upload-list{
    border-top: 1px solid #eaeaea;
}
.component-file-default .upload-list > li{
    border-bottom: 1px solid #eaeaea;
    position: relative;
    height: 45px;
}
.component-file-default .data-type-file{
    padding: 10px;
    border-top: 1px solid #eaeaea;
}
.component-file-default .upload-list .btn-bar{
    float: right;
    margin-left: 5px;
}
.component-file-default .upload-list .btn-delete,
.component-file-default .upload-list .file-button{
    margin-left: 5px;
}
.component-file-default .file-preview{
    display: none;
}
.component-file-default.readonly .upload-header,
.component-file-default.readonly .btn-delete{
    display: none;
}
.component-file-default .upload-list .progress-bar{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    z-index: 10;
    background:#f6f6f6;
}
.component-file-default .upload-complete .progress-bar{
    display: none;
}
.component-file-default .file-size{
    margin-left: 5px;
    color:#cecece;
}
.component-file-default .upload-list .file-info{
    position: absolute;
    top: 0;
    width: 100%;
    padding: 10px;
    font-size: 12px;
    line-height: 25px;
    left: 0;
    z-index: 11;
    overflow: hidden;
    transition: width 0.1s linear;
}
.component-file-default .upload-list .file-label{
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
    display: inline-block;
    height: 17px;
    text-overflow: ellipsis;
}
.component-file-default .upload-success{
    box-shadow: 2px 0 inset #8bd91d;
}
.component-file-default .upload-process:after{
    content: 'Traitement...';
    color:#cecece;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 20;
    width: 100%;
    font-size: 10px;
    text-align: center;
}
.component-file-default .upload-error{
    box-shadow: 2px 0 inset #dc3545;
}
.component-file-default .file-info a{
    color:#212529;
}
.component-file-default .file-info> a> i{
    margin-right: 3px;
}
.component-file-default .error-message{
    background-color: #dc3545;
    overflow: hidden;
    text-align: center;
    color: #ffffff;
    height: 15px;
    font-size: 10px;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
}
.component-file-default .upload-error .error-message{
    display: block;
}
.component-file-cover{
    background-repeat: no-repeat;
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: relative;
    background-position: center center;
}
.component-file-cover[data-file-number="0"]{
    background-image: url(../img/default-image-muted.png);
    background-size: contain;
}
.component-file-cover .file-link,
.component-file-cover .upload-list,
.component-file-cover .upload-list > li,
.component-file-cover .file-info {
    height: 100%;
}
.component-file-cover.readonly .upload-header,
.component-file-cover.readonly .btn-delete{
    display: none;
}
.component-file-cover .file-link{
    display: block;
    height: 100%;
    width: 100%;
}
.component-file-cover .file-preview{
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.7s ease-in-out;
}
.component-file-cover .preview-loaded  .file-preview{
    opacity: 1;
}
.component-file-cover .upload-header{
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    position: absolute;
}
.component-file-cover .upload-header .upload-zone{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}
.component-file-cover .upload-list,.component-file-cover .upload-list > li{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.component-file-cover .upload-list .file-preview{
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    background-position: center center;
}
.component-file-cover .upload-list .file-info .file-link{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
.component-file-cover .upload-list .file-info .btn-bar{
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 50;
    color: #fff;
    padding: 0 3px;
    border-radius: 3px;
}
.component-file-cover .upload-list .file-icon,
.component-file-cover .upload-list .file-size,
.component-file-cover .file-upload-label {
    display: none;
}
.component-file-cover .no-preview .file-icon{
    height: 100%;
    width: 100%;
    top: 0;
    line-height: 100%;
    font-size: 60px;
    text-align: center;
    display: block;
    left: 0;
    position: absolute;
}
.component-file-cover .no-preview .file-icon:before{
    left: 0;
    top: calc(50% - 30px);
    vertical-align: bottom;
    position: absolute;
    width: 100%;
    text-align: center;
}
.component-file-cover  .file-label{
    opacity: 0;
    background-color: rgba(0,0,0,0.5);
    padding: 0 3px;
    color:#ffffff;
    text-align: center;
    font-size: 12px;
    bottom: 0;
    width: 100%;
    text-overflow: ellipsis;
    position: absolute;
    transform: translateY(100px);
    transition: all 0.2s ease-in-out;
}
.component-file-cover:hover .file-label {
    opacity: 1;
    transform: translateY(0);
}
.component-file-cover .upload-list .progress-bar{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    z-index: 10;
    background:#f6f6f6;
    background: rgb(0,0,0,0.5);
}
.component-file-cover .upload-complete .progress-bar{
    display: none;
}
/* FIN COMPOSANT FILE */

/* COMPOSANT FILEPICKER  */
input[data-type="filepicker"] {
    display: none!important;
}
.data-type-filepicker{
    min-width: 150px;
}
.data-type-filepicker[required="required"],
.data-type-filepicker[required] {
    border-left: 0.25rem solid #FFA100 !important;
}
.data-type-filepicker > i {
    color: #f1c40f;
}
.data-type-filepicker[readonly] .filepicker-browse,
.data-type-filepicker[readonly] .filepicker-clear{
    display: none;
}
.filepicker-modal i.far.fa-folder,
.filepicker-modal i.far.fa-folder-open {
    color: #f1c40f;
}
.filepicker-modal .tree-folders,.filepicker-modal .tree-folders li,.filepicker-modal .tree-folders ul{
    list-style-type: none;
}
.filepicker-modal .tree-folders ul{
    padding-left: 15px;
}
.filepicker-modal .tree-folders li{
    cursor: pointer;
}
.filepicker-modal ul.tree-folders li.folder-focused{
    font-weight: bold;
}
.filepicker-modal ul.tree-folders li.folder-focused ul {
    font-weight: normal;
}
.data-type-filepicker {
    cursor: pointer;
}
.data-type-filepicker ul ,.data-type-filepicker li{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.data-type-filepicker .filepicker-browse,
.data-type-filepicker .filepicker-clear{
    float: right;
    margin-top: 4px;
    opacity: 0.5;
    transform: scale(0.8);
    transition: all 0.2s ease-in-out;
}
.data-type-filepicker .filepicker-browse:hover,
.data-type-filepicker .filepicker-clear:hover {
    transform: scale(1);
    opacity: 1;
}
.data-type-filepicker .filepicker-clear{
    margin-right:10px ;
}
.data-type-filepicker .filepicker-clear:after{
    clear: right;
    content: '';
    display: block;
}
.data-type-filepicker.readonly .filepicker-browse{
    display: none;
}
.data-type-filepicker ul{
    display: inline-block;
    vertical-align: top;
    padding-left: 5px;
}
.data-type-filepicker li{
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    padding: 4px 0px 0 0;
}
.data-type-filepicker li .text-muted{
    color: #e8ebec!important;
}
.data-type-filepicker li > i{
    transform: rotate(90deg);
}
.data-type-filepicker li:nth-child(1) > i{
    display: none;
}
/* FIN COMPOSANT FILEPICKER */

/* COMPOSANT DROPZONE */
div[data-type="dropzone"].form-control {
    height: auto;
}
div[data-type="dropzone"]{
    border-style: dashed;
    background: #e9e9e9;
    position: relative;
}
div[data-type="dropzone"] > div{
    padding: 5px;
}
div[data-type="dropzone"] > ul{
    list-style-type:none;
    margin: 0;
    padding: 0;
}
div[data-type="dropzone"] > ul > li{
    position: relative;
    padding: 3px;
    border-bottom: 1px solid #cecece;
    background:#ffffff;
}
div[data-type="dropzone"] > ul > li > i:first-of-type{
    margin: 0 5px;
}
div[data-type="dropzone"] > ul > li > i.pointer{
    position:absolute;
    right:5px;
    top: 50%;
    transform: translateY(-50%);
}
div[data-type="dropzone"] .preload{
    top: 0px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    content: "";
    padding:0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #2b9ad8;
    transition: all 0.2s ease-in-out;
}
.dropzone-custom-button {
    position: absolute;
    right: 5px;
    padding: 0 5px;
    font-size: 1em;
    top: 50%;
    transform: translateY(-50%);
}
/* FIN COMPOSANT DROPZONE */

/* COMPOSANT DROPDOWN-SELECT */
.data-type-dropdown-select > .dropdown-toggle-button,
.data-type-dropdown-select > .dropdown-toggle-button:focus {
    outline: none;
    box-shadow: none;
    vertical-align: top;
}
select[data-type="dropdown-select"]{
    display: none !important;
}
.input-group .data-type-dropdown-select .dropdown-toggle-button{
    height: 100%;
    border: 1px solid #cecece;
}
.input-group .input-group-append .data-type-dropdown-select  .dropdown-toggle-button{
    border-left: 0px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group .input-group-prepend .data-type-dropdown-select  .dropdown-toggle-button{
    border-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.data-type-dropdown-select .dropdown-menu{
    max-width: 500px;
}
/* FIN DROPDOWN-SELECT */

/* COMPOSANT WYSIWYG / TRUMBOWYG */
/* data-minimal */
.trumbowyg-box.trumbowyg-minimal.trumbowyg-editor-visible.trumbowyg-fr.trumbowyg {
    min-height: auto;
}
.trumbowyg-box[readonly] .trumbowyg-button-pane,
.trumbowyg-box[disabled] .trumbowyg-button-pane {
    display: none;
}
.trumbowyg-box[readonly] .trumbowyg-editor,
.trumbowyg-box[disabled] .trumbowyg-editor {
    background-color: #e9ecef;
}
.trumbowyg-box.trumbowyg-minimal .trumbowyg-editor {
    height: 100%;
    overflow: visible;
    margin: 0 auto;
    padding: 0;
    background: inherit;
    min-height: auto;
    white-space: nowrap;
    -moz-scrollbars-none;
    -ms-overflow-style: none;
}
.trumbowyg-box.trumbowyg-minimal .trumbowyg-editor::-webkit-scrollbar {
    height: 0 !important;
}
.trumbowyg-box.trumbowyg-minimal .trumbowyg-editor * {
    margin: 0;
}
.wysiwyg-dragover{
    position: relative;
    background-color: #e3e3e3!important;
}
.wysiwyg-dragover:after{
    content :"\f382";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 80px;
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    color:#aeaeae;
}

/* mentions */
.mention-user-picker-container .data-type-user{
    display: inline-block;
    vertical-align: top;
    background: none;
    padding: 0!important;
}
span.data-mention-user{
    color:#17a2b8;
    font-weight:bold;
}
span.data-mention-object{
    color:#000000;
    font-weight:bold;
}
.mention-object-picker-container{
    color:#000000;
    font-weight:bold;
}
.mention-object-picker{
    outline: none;
}
.mention-object-picker-container input.mention-object-picker{
    border:0;
    outline:0;
    color:#000000;
    font-weight:bold;
}
/* FIN COMPOSANT WYSIWYG / TRUMBOWYG */

/* PERMISSION PANEL */
#permission-modal{
    z-index: 10002;
}
#permission-modal .permission-firm-all .btn-delete,
#permission-modal[data-firm=""] .permission-firm-all .btn-delete-info,
#permission-modal .btn-delete-info {
    display: none;
}
#permission-modal[data-firm=""] .permission-firm-all .btn-delete,
#permission-modal .permission-firm-all .btn-delete-info {
    display: inline-block;
}
#permission-modal .modal-dialog{
    max-width: 800px;
}
#permission-modal #permission{
    max-width: 600px;
    margin: auto;
}
#permission-modal #permissions .label-diagonal{
    display: inline-block;
    transform: rotate(-70deg);
    font-size: 9px;
}
#permission-modal #permissions .col-target{
    max-width: 100px;
}
#permission-modal #permissions .col-read,
#permission-modal #permissions .col-edit,
#permission-modal #permissions .col-delete,
#permission-modal #permissions .col-configure,
#permission-modal #permissions .col-recursive {
    max-width: 50px;
}
#permission-modal #permissions td,#permissions th{
    text-align: center;
}
/* FIN PERMISSIONS PANEL */

/* COMPOSANT HISTORY */
@keyframes slide-left-fade-in{
    0% {
        opacity:0;
        transform:  translate(400px,0px);
    }
    100% {
        opacity:1;
        transform:  translate(0px,0px);
    }
}
@keyframes slide-right-fade-out{
    0% {
        opacity:1;
        transform:  translate(0px,0px);
    }
    100% {
        opacity:0;
        transform:  translate(400px,0px);
    }
}
.history-panel{
    position: fixed;
    top: 50px;
    box-shadow: 0 0 10px 1px rgba(0,0,0,0.15);
    right: 0;
    width: 33%;
    max-width: 400px;
    min-width: 200px;
    background-color: #f9f9f9;
    z-index: 100;
    padding: 10px;
    box-sizing: border-box;
    height: calc(100% - 50px);
    opacity: 1;
    animation: slide-left-fade-in ease 0.2s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
}
.history-panel.fold{
    animation: slide-right-fade-out ease 0.2s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    opacity: 0;
}
.badge.history-notification {
    padding: 2px 5px;
    position: absolute;
    left: 5px;
    height: 15px;
    top: 0px;
    font-size: 0.65em;
    z-index: 1;
}
.history-panel .comment-search{
    margin: auto auto 5px auto;
    text-align: center;
}
.history-panel h3{
    font-size: 16px;
}
.history-panel h2{
    font-size: 18px;
    font-weight: bold;
}
.history-panel .comments{
    padding: 0;
    list-style-type: none;
    max-height: calc(100% - 70px);
    overflow: auto;
}
.history-panel .btn-close{
    position: absolute;
    right: 10px;
    cursor: pointer;
    color:#cecece;
    top: 10px;
}
.history-panel .comments > li{
    padding: 5px;
    box-shadow: 0 0 10px 1px rgba(0,0,0,0.05);
    border-radius: 3px;
    font-size: 12px;
    margin-bottom:30px;
    background-color: #ffffff;
    position: relative;
}
.history-panel .comment[data-importance="important"]{
    box-shadow: inset 0 0 0px 3px #ffc310;
}
.history-type{
    display: inline-block;
    width: 50px;
    text-align: center;
    font-size: 30px;
    vertical-align: top;
}
.history-header{

}
.history-content{
    display: inline-block;
    vertical-align: top;
}
.history-content  .trumbowyg-box{
    border: 0px;
    margin-top: 0px;
    min-height: 100px;
}
.history-content  .trumbowyg-editor{
    min-height: 100px;
    padding: 5px;
    overflow: visible;
}
.history-content  .trumbowyg-button-pane button,.history-content  .trumbowyg-button-pane{
    height: 15px;
    min-height: 15px;
}
.history-content  .trumbowyg-button-pane::after{
    top: 14px;
}
.history-panel .comments .comment[data-type="comment"] .history-options{
    display: block;
}
.history-panel .comments .comment .history-options{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    right: 9px;
    bottom: 7px;
    color:#cecece;
    display: none;
}
.history-panel .comments .history-delete-btn {
    transition: color 0.1s linear;
}
.history-panel .comments .history-delete-btn:hover {
    color: #ca0202;
}
.history-panel .history-add{
    font-size: 13px;
    color: #495057;
    opacity: 0.5;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease-in-out;
}
.history-panel .comments .history-add{
    position: absolute;
    right: calc(50% - 10px);
    bottom: -25px;
}
.history-panel .history-add:hover{
    opacity: 1;
    transform: scale(1.2);
}
.history-panel .history-importance{
    position: absolute;
    right: 5px;
    top: 10px;
}
.history-panel .advanced-search .filter-operator select {
    padding-left: 0;
}
.history-panel .advanced-search .filter-value{
    display: block;
    margin-right: 0;
}
/* FIN COMPOSANT HISTORY */

/* COMPOSANT URL  */
.url-field {
    display: flex;
    flex: 1 0 100%;
    position: relative;
}
.url-field.haslock > input{
    padding-left: 28px;
}
.url-field i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.url-field i.url-link {
    right: 10px;
    cursor: pointer;
}
.url-field i.url-icon {
    left: 10px;
}
.input-group .url-field{
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}
.input-group > .url-field .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* FIN COMPOSANT URL  */

/* COMPOSANT PASSWORD */
.password-field {
    display: flex;
    flex: 1 0 100%;
    position: relative;
}
.password-field i {
    position: absolute;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}
.password-field i.password-toggler,
.password-field i.password-generator {
    right: 10px;
}
.password-field i.password-toggler + i.password-generator {
    right: 35px;
}
.data-type-password[readonly] i.password-generator{
    display: none;
}
.strength-transparent { background-color: transparent !important; }
.strength-low { background-color: #e74c3c !important; }
.strength-medium { background-color: #e67e22 !important; }
.strength-hard { background-color: #2ecc71 !important; }
.password-field .strength-lines {
    position: absolute;
    bottom: 1px;
    left: 2px;
    right: 0;
    width: calc(100% - 5px);
    height: 6px;
    z-index: 3;
}
.password-field .strength-lines .line {
    position: absolute;
    background-color: transparent;
    height: 4px;
    border-radius: 2px;
    transition: background-color 0.15s ease-in;
}
.password-field .strength-lines .line:not(:first-of-type):not(:last-of-type) {
    left: 33%;
    right: 33%;
}
.password-field .strength-lines .line:first-of-type {
    left: 4px;
    right: 68%;
}
.password-field .strength-lines .line:last-of-type {
    left: 68%;
    right: 4px;
}
.input-group .password-field{
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}
.input-group> .password-field .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* FIN COMPOSANT PASSWORD */

/* COMPOSANT SEARCH BOX */
.advanced-search-box .simple-search .filter-keyword{
    border-radius: 0 .25rem 0 0;
}
.advanced-search-box .options .btn-search-load{
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: inline-block;
}
.advanced-search-box .simple-search .data-search-label{
    z-index: 5;
}
.advanced-search-box .advanced-search{
    display: none;
}
.advanced-search-box.advanced .simple-search .filter-keyword,
.advanced-search-box.advanced .simple-search .data-search-label{
    transition: all 0.2s ease-in-out;
}
.advanced-search-box.advanced .advanced-search{
    display: block;
}
.advanced-search-box.advanced .simple-search .data-search-label{
    border-radius: 3px 0 0 0;
    background-color: #f5f9ff;
    border: 0;
}
.advanced-search-box.advanced .simple-search .filter-keyword{
    background: #e8f1ff;
    color: #83b3ff;
    border: 0;
}
.advanced-search-box.advanced .advanced-button-search i{
    text-shadow: 0 0 5px #007bff;
    color: #007bff;
}
.advanced-search-box .advanced-button-search i{
    position: relative;
}
.advanced-search-box .advanced-button-search i:after {
    content: "\f0d7";
    position: absolute;
    font-size: 0.8em;
    bottom: -3px;
    right: -5px;
}
.advanced-search-box ul,.advanced-search-box li{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.advanced-search-box .criterias{
    position: relative;
}
.advanced-search-box .criterias > .condition > .filter-option > .btn-unindent{
    display: none;
}
.advanced-search-box li.condition > .filter-option{
    user-select: none;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.advanced-search-box li.condition.hover > .filter-option{
    opacity: 1;
}
.advanced-search-box li.condition{
    transition: background 0.2s ease-in-out;
}
.advanced-search-box li.condition.error:after {
    font-weight: bold;
    font-size: 13px;
    background-color: #ffc107;
    padding: 3px 10px;
    content: 'Erreur';
    position: absolute;
    bottom: calc(50% - 14px);
    right: 150px;
    border-radius: 30px;
    color: #fff;
}
.advanced-search-box li.condition.hover{
    background-color: rgba(255,255,255,0.5);
}
.advanced-search-box ul.group {
    padding: 3px;
    background-color: #f5f9ff;
}
.advanced-search-box ul.group ul.group{
    position: relative;
    background-color: rgb(197, 225, 255);
    border-left: 5px solid #78b9ff;
    padding-right: 20px;
    counter-increment: number;
}
.advanced-search-box ul.group ul.group ~ .filter-option {
    height: calc(100% - 6px);
    background-color: rgb(72, 86, 109);
    position: absolute;
    opacity: 1;
    top: 3px;
    right: 3px;
    color: #fff;
}
.advanced-search-box ul.group ~ .filter-option i {
    margin: 5px;
    padding: 0;
}
.advanced-search-box ul.group ul.group ~ .filter-option i{
    display: block;
    font-size: 10px;
    transition: none;
}
.advanced-search-box ul.group ul.group ~ .filter-option i.btn-unindent,
.advanced-search-box ul.group ul.group ~ .filter-option i.btn-indent{
    display: none;
}
.advanced-search-box ul.group ul.group ul.group{
    background-color: rgb(211, 243, 197);
    border-color: rgb(104, 212, 57);
}
.advanced-search-box ul.group ul.group ul.group ul.group{
    background-color: rgb(243, 197, 230);
    border-color: rgb(222, 130, 196);
}
.advanced-search-box ul.group ul.group ul.group ul.group ul.group{
    background-color: #d8d8d8;
    border-color: rgb(95, 95, 95);
}
.advanced-search-box li {
    padding: 3px;
    position:relative;
}
.advanced-search-box .filter-join{
    border: 1px solid #007bff;
    background: #f3f9ff;
    color: #007bff;
    width: 50px;
    display: block;
    text-transform: uppercase;
    margin-top: 5px;
    margin-left: 3px;
    font-weight: bold;
    font-size: 12px;
    border-radius: 10px;
}
.advanced-search-box li.condition:last-child > .filter-join{
    display: none;
}
.advanced-search-box .filter-column,
.advanced-search-box .filter-operator,
.advanced-search-box .filter-value {
    vertical-align: top;
    display: inline-block;
    width: auto;
}
.advanced-search-box .filter-value{
    margin-right: 5px;
    max-width: 100%;
}
.advanced-search-box .filter-operator select{
    color: #007bff!important;
    border:0;
    background: transparent;
}
.advanced-search-box .filter-column select{
    font-weight: 700!important;
    background-color: transparent;
    border: none;
    padding-left: 0;
    display: inline-block;
}
.advanced-search-box .filter-option{
    position: absolute;
    right: 5px;
    top: 11px;
}
.advanced-search-box .filter-option i{
    padding: 5px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease-in-out;
}
.advanced-search-box .filter-option i.btn-move{
    cursor: move;
}
.advanced-search-box .filter-option i.btn-delete:hover {
    color: #ca0202;
}
.advanced-search-box .filter-option i.btn-add:hover {
    color: #28a745;
}
.advanced-search-box .filter-option i:hover{
    opacity: 1;
    transform: scale(1.15);
}
.advanced-search-box .options{
    float: right;
}
.advanced-search-box .options > div{
    float: right;
    border-radius: 0;
}
.advanced-search-box .options > div:first-child{
    border-radius: 0 0 3px 0;
}
.advanced-search-box .options > div:last-child{
    border-radius: 0 0 0 3px;
}
.advanced-search-box .options > div.preferences > .btn{
    border-radius: 0px 0px 0px 3px;
}
.advanced-search-box .options div.tools {
    font-size: 0.9em;
}
.btn-search-load .btn-search-global{
    transition: color 0.2s ease-in-out;
    display: none;
}
.advanced-search-box .btn-search-load[data-global="1"] .btn-search-delete {
    display: none;
}
.btn-search-load[data-global="1"] .btn-search-global{
    color: #007bff!important;
}
.advanced-search-box[data-configure="1"] .btn-search-global{
    display: inline-block;
}
.advanced-search-box[data-configure="1"] .btn-search-load[data-global="1"] .btn-search-delete {
    display: inline-block;
}
@media (max-width: 767px) {
    .advanced-search-box .simple-search .filter-keyword {
        border-radius: .25rem .25rem 0 .25rem !important;
    }
    .advanced-search-box ul.group ul.group {
        padding: 0.15em;
    }
    .advanced-search-box li {
        padding: .5em 0;
        padding: 0;
        padding-bottom: 0;
    }
    .advanced-search-box li.condition > .filter-option {
        position: relative;
        text-align: right;
        width: 100%;
        vertical-align: top;
        top: unset;
        right: unset;
        display: inline-block;
        padding-top: 0.35rem;
        opacity: 1;
    }
    .advanced-search-box .filter-column,
    .advanced-search-box .filter-operator,
    .advanced-search-box .filter-value {
        width: 100%;
        display: block;
    }
    .advanced-search-box .filter-value input {
        width: 100%;
        font-size: 0.9em;
        padding-top: 0.25rem;
        height: calc(1.5em + .5rem + 2px);
    }
    .advanced-search-box .filter-column select,
    .advanced-search-box .filter-operator select,
    .advanced-search-box .filter-value select {
        width: 100%;
        font-size: 0.9em;
        padding: 0;
        height: calc(1.5em + .5rem + 2px);
    }
    .advanced-search-box ul.group ul.group ~ .filter-option {
        display: inline-block;
        position: relative;
        top: unset;
        right: unset;
        width: 100%;
        text-align: right;
        padding: 0.15rem;
        padding-right: 0.15rem;
    }
    .advanced-search-box ul.group ul.group ~ .filter-option i {
        display: inline-block;
        font-size: 1em;
    }
    .advanced-search-box .filter-join {
        margin: 0 auto;
        font-size: 0.9rem;
    }
    .advanced-search-box ul.group ul.group ~ .filter-join {
        margin: .45em auto;
        font-size: 0.9rem;
    }
}
/* FIN COMPOSANT SEARCH BOX */

/* COMPOSANT CHOIX */
    .data-type-choice[required]{
        padding-left: 2px;
    }
    .data-type-choice > label{
        margin-bottom: 0px;
    }
/* FIN COMPOSANT CHOIX */

/* COMPOSANT COLOR */
.component-color{
    cursor: pointer;
    position: relative;
}
.component-color[required] {
    max-width: calc(40px + 0.25rem)!important;
}
.component-color .component-color-picker{
    position: absolute;
    background:#ffffff;
    border-radius: 3px;
    width: 160px;
    z-index: 100;
    left:-1px;
    top:-1px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    padding:5px;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: translateX(-20px);
}
.component-color-picker ul{
    padding:0;
    margin: 0;
}
.component-color .component-color-picker.active{
    transform: translateX(0px);
    opacity: 1;
}
.component-color.form-control{
    max-width: 40px;
}
.component-color .component-color-thumb{
    width: 15px;
    border-radius: 100px;
    background-color: #333333;
    height: 15px;
    margin: auto;
}
.input-group-sm .component-color .component-color-thumb{
    margin-top: 4px;
}
.input-group-sm .component-color.form-control {
    max-width: 33px;
}
.component-color .component-color-palette{
    display: none;
}
.component-color-picker li > div{
    cursor: pointer;
    width:20px;
    height:20px;
    border-radius: 100px;
}
.component-color-picker li {
    vertical-align: top;
    padding: 5px;
    display: inline-block;
}
.component-color .other-color{
    color: #525252;
    text-align: center;
    display: flex;
}
.component-color .other-color > i{
    margin: auto;
}
.component-color .color-choice {
    transition: transform 0.1s linear;
}
.component-color .other-color {
    transition: color 0.1s linear;
}
.component-color .other-color:hover {
    color: #232323;
}
.component-color .color-choice:hover {
    transform: scale(1.2);
}
/* FIN COMPOSANT COLOR */

/* COMPOSANT ICÔNES */
.component-icon.dropdown {
    position: unset;
}
div.component-icon[required]{
    border: 0!important;
}
.component-icon[required] > .dropdown-toggle{
    border-left: 0.25rem solid #FFA100 !important;
}
.component-icon div.dropdown-menu {
    width: 100%;
    max-width: 550px;
}
.component-icon.dropdown[readonly] .dropdown-toggle,
.component-icon.dropdown[disabled] .dropdown-toggle{
    background-color: #cecece!important;
    border-color: #aeaeae!important;
    color:#ffffff!important;
}
.component-icon.dropdown[readonly] .dropdown-toggle::after,
.component-icon.dropdown[disabled] .dropdown-toggle::after{
    display: none;
}
.component-icon div.dropdown-menu > div.icons-list {
    max-height: 300px;
    overflow-y: auto;
    padding-left: 5px;
}
.component-icon .dropdown-item {
    display: block;
    height: auto;
    padding: .25rem 0.5rem;
    width: 100%;
}
.component-icon .dropdown-icon-item {
    cursor: pointer;
    display: inline-flex;
    width: 35px;
    height: 35px;
    transition: all 0.08s linear;
}
.component-icon .dropdown-icon-item:focus,
.component-icon .dropdown-icon-item:active,
.component-icon .dropdown-icon-item:hover {
    color: #fff;
    text-decoration: none;
    background-color: #007bff;
    border-radius: 3px;
}
.component-icon span.dropdown-icon-item > i {
    margin: auto;
}
.icon-chooser button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.component-icon .dropdown-item.active,
.component-icon .dropdown-item:active {
    color: unset;
    background-color: unset;
}
.component-icon .dropdown-item:focus,
.component-icon .dropdown-item:hover {
    color: unset;
    background-color: unset;
}
.component-icon .no-icon{
    border: 2px dashed #cecece;
    color:#cecece;
    border-radius: 5px;
    padding: 5px;
    transition: all 0.2s ease-in-out;
    height: 35px;
    width: 35px;
}
.component-icon .no-icon.dropdown-icon-item:focus,
.component-icon .no-icon.dropdown-icon-item:active,
.component-icon .no-icon.dropdown-icon-item:hover {
    border-color: #ffc107;
    color: #ffc107;
    background-color: transparent;
    border-radius: 5px;
}
/* FIN COMPOSANT ICÔNES */

/* COMPOSANT ENTITY PICKER */
.data-type-entitypicker{
    cursor: pointer;
    min-height: calc(1.5em + .75rem + 2px)!important;
    height: auto!important;
}

.entitypicker-modal .list-group-item.active .text-muted{
    color: #a9d7ff!important;
}
.entitypicker-clear{
    float: right;
    margin: 4px;
    cursor: pointer;
}
.entitypicker-modal .plugin-list-container{
    max-height: 600px;
    overflow: auto;
}
input[data-type="entitypicker"]{
    display: none;
}
/* FIN COMPOSANT ENTITY PICKER */

/* COMPOSANT DATE */
input[data-type="date"]{
    background-image: url('../img/icons/icon-calendar.png');
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 30px!important;
    transition: color 0.2s ease-in-out;
}
div#ui-datepicker-div{
    background-color: #ffffff;
    border:1px solid #cecece;
    z-index:10000 !important;
}
/* FIN COMPOSANT DATE */

/* COMPOSANT HOUR */
input[data-type="hour"]{
    background-image: url('../img/icons/icon-clock.png');
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 30px!important;
}
/* FIN COMPOSANT HOUR */

/* COMPOSANT PHONE */
input[data-type="phone"]{
    background-image: url('../img/icons/icon-phone.svg');
    background-size: auto 14px;
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 30px!important;
    transition: border 0.4s ease-in-out;
}
/* FIN COMPOSANT PHONE */

/* COMPOSANT CHECKBOX */
label.check-component {
    width: 15px;
    height: 15px;
    margin: 0 5px;
    /*margin: auto;*/
    border: 1px solid #bbbbbb;
}
label.check-component input {
    display: none;
}
label.check-component[readonly] input + .box{
    background-color: #e9ecef!important;
}
label.check-component[readonly] input + .box:after {
    border-color: #ababab!important;
}
label.check-component input:checked + .box {
    background-color: #ddf8d8;
}
label.check-component[required] {
    box-shadow: -2px 0px 1px 0px #ffa100;
}
label.check-component input:indeterminate + .box {
    background-color: #ffd6c9;
}
label.check-component .box {
    width: 100%;
    height: 100%;
    transition: .35s cubic-bezier(0.19, 1, 0.22, 1);
    transition-property: background-color, color, top, left, right, bottom;
    border: 2px solid transparent;
    background-color: white;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px rgba(0, 0, 0, 0.2);
}
label.check-component input:checked + .box:after {
    width: 85%;
    height: 45%;
    border-left: 1.5px solid;
    border-bottom: 1.5px solid;
    border-color: #28b72e;
    transform: rotate(-45deg) translate3d(0, 0, 0);
    transform-origin: center center;
    top: 0;
}
label.check-component input:indeterminate + .box:after {
    width: 75%;
    height: 0;
    top: 1px;
    border-top: 1px solid rgba(50, 50, 50,.5);
}
label.check-component .box:after {
    content: '';
    position: absolute;
    transition: .35s cubic-bezier(0.19, 1, 0.22, 1);
    transition-property: background-color, color, top, left, right, bottom;
    left: 0;
    right: 0;
    top: 200%;
    bottom: 5%;
    margin: auto;
}
label[disabled].check-component input:checked + .box,
label[disabled].check-component .box {
    background-color: #e8e8e8;
    cursor: not-allowed;
}
label[disabled].check-component input:checked + .box:after {
    border-color: #565656;
}
.advanced-search .filter-value label.check-component {
    margin: 15px 5px 0 5px;
}
/* FIN COMPOSANT CHECKBOX */

/* COMPOSANT RADIO */
.radio-component:checked,
.radio-component:not(:checked) {
    position: absolute;
    left: -9999px;
}
.radio-component:checked + label,
.radio-component:not(:checked) + label {
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #333;
    margin-bottom: 0;
    pointer-events: none;
}
.radio-component:checked + label:before,
.radio-component:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: -15px;
    width: 18px;
    height: 18px;
    border: 1px solid #7db581;
    box-shadow: 0 1px rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    background: #fff;
    pointer-events: all;
}
.radio-component:checked + label:after,
.radio-component:not(:checked) + label:after {
    content: '';
    width: 8px;
    height: 8px;
    background: #2fca26;
    position: absolute;
    top: -10px;
    left: 5px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    pointer-events: all;
}
.radio-component:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.radio-component:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.radio-component:checked + label[disabled],
.radio-component:not(:checked) + label[disabled] {
    cursor: not-allowed;
}
.radio-component:checked + label[disabled]:before,
.radio-component:not(:checked) + label[disabled]:before {
    border: 1px solid #2541274a;
    box-shadow: 0 1px rgba(0, 0, 0, 0.2);
    background: #e8e8e8;
}
/* FIN COMPOSANT RADIO */

/* COMPOSANT CARD */
*[data-type="card"].card-component-container {
    cursor: pointer;
    color: #2b9ad8;
    position: relative;
}
*[data-type="card"].card-component-container > div.wrapper {
    position: absolute;
    display: block;
    min-height: 0px;
    z-index: 10;
}
*[data-type="card"].card-component-container:hover {
    text-decoration: underline;
    color: #207cb1;
}
.card-component {
    text-transform: none;
    font-size: 12pt;
    cursor: default;
    color: #2a2a28;
    opacity: 0;
    position: absolute;
    z-index: -1;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, .15);
    transition: all .40s;
}
.card-component-hover {
    animation: slide-up-fade-in ease 0.35s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards;

    -webkit-animation: slide-up-fade-in ease 0.35s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/

    -moz-animation: slide-up-fade-in ease 0.35s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards; /*FF 5+*/

    -o-animation: slide-up-fade-in ease 0.35s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/

    -ms-animation: slide-up-fade-in ease 0.35s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards; /*IE 10+*/
}
.card-component-hide {
    animation: slide-down-fade-out ease 0.25s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards;

    -webkit-animation: slide-down-fade-out ease 0.25s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards;

    -moz-animation: slide-down-fade-out ease 0.25s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards;

    -o-animation: slide-down-fade-out ease 0.25s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards;

    -ms-animation: slide-down-fade-out ease 0.25s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards;
}
@keyframes slide-up-fade-in{
    0% {
        opacity:0;
        z-index: -1;
        transform:  translate(0px,40px);
    }
    100% {
        opacity:1;
        z-index: 1100;
        transform:  translate(0px,0px);
    }
}
@-moz-keyframes slide-up-fade-in{
    0% {
        opacity:0;
        z-index: -1;
        transform:  translate(0px,40px);
    }
    100% {
        opacity:1;
        z-index: 1100;
        transform:  translate(0px,0px);
    }
}
@-webkit-keyframes slide-up-fade-in{
    0% {
        opacity:0;
        z-index: -1;
        transform:  translate(0px,40px);
    }
    100% {
        opacity:1;
        z-index: 1100;
        transform:  translate(0px,0px);
    }
}
@-o-keyframes slide-up-fade-in{
    0% {
        opacity:0;
        z-index: -1;
        transform:  translate(0px,40px);
    }
    100% {
        opacity:1;
        z-index: 1100;
        transform:  translate(0px,0px);
    }
}
@keyframes slide-down-fade-out{
    0% {
        opacity:1;
        z-index: 1100;
        transform:  translate(0px,0px);
    }
    100% {
        opacity:0;
        z-index: -1;
        transform:  translate(0px,40px);
    }
}
@-moz-keyframes slide-down-fade-out{
    0% {
        opacity:1;
        z-index: 1100;
        transform:  translate(0px,0px);
    }
    100% {
        opacity:0;
        z-index: -1;
        transform:  translate(0px,40px);
    }
}
@-webkit-keyframes slide-down-fade-out{
    0% {
        opacity:1;
        z-index: 1100;
        transform:  translate(0px,0px);
    }
    100% {
        opacity:0;
        z-index: -1;
        transform:  translate(0px,40px);
    }
}
@-o-keyframes slide-down-fade-out{
    0% {
        opacity:1;
        z-index: 1100;
        transform:  translate(0px,0px);
    }
    100% {
        opacity:0;
        z-index: -1;
        transform:  translate(0px,40px);
    }
}
/* FIN COMPOSANT CARD */

/* COMPOSANT LOCATION */
input[data-type="location"]{
  background-image: url('../img/icons/icon-location.png');
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 30px!important;
}
.input-group-sm input[data-type="location"]{
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
}
/* FIN COMPOSANT LOCATION */

/* COMPOSANT MAP */
*[data-type="map"]{
    display: none;
}
/* FIN COMPOSANT MAP */

/* COMPOSANT CONTACT */
input.data-type-contact{
    background-image: url('../img/icons/icon-contact.png');
    background-repeat:no-repeat;
    background-position: 10px center;
    padding-left: 30px!important;
}
/* FIN COMPOSANT CONTACT */

/* COMPOSANT USER */
input[data-type="user"]{
    display: none!important;
}
div.data-type-user{
    background-image: url('../img/icons/icon-user.png');
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 30px !important;
    display: inline-block;
}
div.data-type-user[disabled],div.data-type-user[readonly] {
    background-color: #e9ecef !important;
}
.input-group > .form-control.data-type-user,
.input-group > .form-control-plaintext.data-type-user {
    position: unset;
}
div.data-type-user.unfolded{
    background-position: 10px 10px;
}
div.data-type-user.unfolded{
    position : absolute;
    height: 200px;
    overflow: auto;
    z-index: 100;
    top: 0;
    left: 0;
}
div.data-type-user.unfolded.overflowing  .unfold{
    display: none;
}
div.data-type-user .unfold{
    display: none;
    color: #cecece;
    float: right;
    cursor: pointer;
}
div.data-type-user.overflowing.unfolded{
    overflow: inherit;
}
div.data-type-user.overflowing{
    overflow: auto;
}
div.data-type-user.overflowing .unfold{
    display: inline-block;
}
div.data-type-user::-webkit-scrollbar {
  width: 5px;
}
div.data-type-user::-webkit-scrollbar-track {
  background: #f1f1f1;
}
div.data-type-user::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}
div.data-type-user::-webkit-scrollbar-thumb:hover {
  background: #555;
}
div.data-type-user[required] {
    border-left: 0.25rem solid #FFA100 !important;
}
div.data-type-user > ul > li > input{
    border: 0;
    outline: none;
    margin: 0;
    background: transparent;
    padding: 0 0 7px 0;
}
div.data-type-user > ul{
    cursor: text;
    border: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    vertical-align: top;
    list-style-type: none;
    /*display: flex;*/
    align-items: center;
}
div.data-type-user > ul > li{
    padding: 0 5px 0 5px;
    display: inline-block;
    margin: 0;
    padding: 0 5px 0 0;
    vertical-align: middle;
}
div.data-type-user > ul > li > div{
    display: flex;
    font-size: 12px;
    border-bottom: 1px solid #4caf50;
    text-overflow: ellipsis;
    white-space: nowrap;
   padding: 0;
   margin: 0 0 3px 0;
}
div.data-type-user > ul > li > div > i{
    margin: auto;
    margin-left: 5px;
    cursor: pointer;
    vertical-align: middle;
    font-size: 9px;
}
div.data-type-user ul.dropdown-menu .dropdown-item {
    position: relative;
    padding: .25rem 0.50rem;
}
div.data-type-user  ul.dropdown-menu div.user-logo,
div.data-type-user   ul.dropdown-menu div.rank-logo {
    display: inline-block;
    width: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
div.data-type-user ul.dropdown-menu div.user-infos,
div.data-type-user ul.dropdown-menu div.rank-infos {
    margin-left: 2.25rem;
    min-height: 30px;
}
.user-picker-tag[data-entity="rank"] div{
    border-color: #03a9f4;
}
/* FIN COMPOSANT USER */

/* COMPOSANT TAG-LIST & TAG */
input[data-type="tag-list"]{
    display:none!important;
}
input[data-type="tag"]{
    display:none!important;
}
div.data-type-tag-list,.data-type-tag{
    background-image: url('../img/icons/icon-tag.png');
    background-repeat:no-repeat;
    background-position: 10px center;
    padding-left: 30px !important;
    height:inherit !important;
}
div.data-type-tag[required],div.data-type-tag-list[required] {
    border-left: 0.25rem solid #FFA100 !important;
}
div.data-type-tag-list[disabled],
div.data-type-tag-list[readonly],
div.data-type-tag[readonly]  {
   background-color:#e9ecef !important;
}
div.data-type-tag-list > ul > li > input,
div.data-type-tag > ul > li > input{
    border: 0;
    outline: none;
    height: 18px;
    font-size: 12px;
    margin: 0;
    background: transparent;
    padding: 0 0 0 3px;
}
div.data-type-tag-list > ul,
div.data-type-tag > ul{
    border: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    vertical-align: top;
    list-style-type: none;
    /*display: flex;*/
    align-items: center;
}
div.data-type-tag-list > ul > li,
div.data-type-tag > ul > li{
    padding: 0 5px 0 5px;
    display: inline-block;
    margin: 0;
    padding:0 5px 0 0;
    vertical-align: text-bottom;
}
.data-type-tag-list > ul > li > div > i,
.data-type-tag > ul > li > div > i{
    margin: auto;
    margin-left: 5px;
    cursor: pointer;
    vertical-align: middle;
    font-size: 9px;
}
div.data-type-tag-list ul.dropdown-menu .dropdown-item {
    position: relative;
    padding: .25rem 1.25rem;
}
div.data-type-tag-list > ul > li > div,
div.data-type-tag > ul > li > div {
    display: flex;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 3px;
    padding: 0 5px 0 5px;
    background-color: #e9ecef;
}
/* FIN COMPOSANT TAG-LIST & TAG */

/* COMPOSANT CHECKBOX LIST */
input[data-type="checkbox-list"]{
    display: none!important;
}

.data-type-checkbox-list.form-control{
    height: auto;
}



.data-type-checkbox-list.form-control ul{
    list-style-type: none;
    padding: 0;
    margin:0 0 0 36px;
}

.data-type-checkbox-list.form-control > ul{
    padding: 5px 12px;
    margin:0;
}


.data-type-checkbox-list.form-control .checkbox-toggle-fold{
    transition: transform 0.15s ease-in-out;
    font-size: 0.8rem;
    line-height: 1.2rem;
    height: 15px;
    width: 15px;
    text-align: center;
}
.data-type-checkbox-list.form-control [data-folded="0"] > .dropdown-element > .checkbox-toggle-fold:first-child{
    transform : rotate(90deg);
    transform-origin: 8px 9px;
}

.data-type-checkbox-list.form-control .checkbox-list-check-all{
    font-size: 10px;
}

.data-type-checkbox-list.form-control .checkbox-list-check-all.hide{
    visibility: hidden;
    opacity: 0;
}

.data-type-checkbox-list.form-control .checkbox-list-check-all:not(.hide) {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s linear;
}

.data-type-checkbox-list.form-control [data-folded="1"] > ul{
    display: none;
}

.data-type-checkbox-list.form-control  ul li label{
    padding:0;
    cursor: pointer;
    margin:0;
}

.data-type-checkbox-list .dropdown-menu{
    max-height: 200px;
    overflow: auto;
}
.data-type-checkbox-list .dropdown-menu .dropdown-item.active,
.data-type-checkbox-list .dropdown-menu .dropdown-item:active{
    color: inherit;
    background-color: inherit;
}

.data-type-checkbox-list .dropdown-menu .fa-stack{
    font-size: 0.5em;
}

.data-type-checkbox-list .dropdown-toggle{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.data-type-checkbox-list.form-control > ul li.dropdown-item{
    padding: 0;
}
.data-type-checkbox-list.form-control > ul li.dropdown-item:hover{
    background-color: inherit;
}
.data-type-checkbox-list.form-control > ul li.dropdown-item label{
    /*padding: .25rem 0.5rem;*/
}


.data-type-checkbox-list.form-control > ul > li,
.data-type-checkbox-list.form-control > ul input[type="checkbox"]
{
    cursor: pointer;
}
/* FIN COMPOSANT CHECKBOX LIST */

/* COMPOSANT JSONTABLE */
input[data-type="jsontable"]{
    display: none!important;
}
table.data-type-json[required]{
    border-left: 0.25rem solid #FFA100 !important;
}
table.data-type-json[readonly] .btn-add-line,
table.data-type-json[readonly] .btn-remove{
    display: none;
}
/* FIN COMPOSANT JSONTABLE */

/* COMPOSANT CHOICE */
input[data-type="choice"]{
    display: none!important;
}
/* FIN COMPOSANT CHOICE */

/* COMPOSANT FIRM */
input[data-type="firm"]{
    display: none!important;
}
input.data-type-firm{
    background-image: url('../img/icons/icon-firm.png');
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 30px !important;
}
/* FIN COMPOSANT FIRM */




/* COMPOSANT IMAGE */
.type-image-bloc {
    position: relative;
}
.type-image-bloc .btn-delete-img {
    position: absolute;
    right: 0px;
}
.type-image-bloc img{
    /*max-width:70px;*/
    max-height:70px;
    display: inline-block;
    margin-right: 15px;
}
.type-image-bloc input{
    display: inline-block;
    width: auto;
}
/* FIN COMPOSANT IMAGE