/****************************
Styles pour les formulaires et composants
hébergés par MODX
*/
body{
    font-family:Arial;
}

/******************************
letter spacing
*/
.xls-1{
    letter-spacing: 1px;
}
.xls-2{
    letter-spacing: 2px;
}
/******************************
widths
*******************************/
.xw-40{
    width:40px;
}
.xw-100{
    width:100px;
}
.xw-110{
    width:110px;
}
.xw-120{
    width:120px;
}
.xw-130{
    width:130px;
}

.xw-140{
    width:140px;
}
.xw-150{
    width:150px;
}
.xw-200{
    width:200px;
}
.xw-250{
    width:250px;
}


/******************************
heights
*******************************/
.xh-100{
    height:100px;
}
.xh-150{
    height:150px;
}
.xh-200{
    height:200px;
}
.xh-250{
    height:250px;
}


/******************************
Colors
*******************************/
.bg-blue{
    background-color: #3C93D0;
}
.bg-grey-1{
    background-color:#F7F7F7;
}


/******************************
UI
Cards as radio
.xradio-card
Demos: https://kaihatsu.jpdn.net/ma__effe1yz2a/?a=resource/update&id=1197
******************************/
label.xradio-card  {
    width: 100%;
}
/*
label.xradio-card-autoheight  {
    width: auto;
}
*/
.xradio-card .card-autoheight{
    height:100%;
    
}
.xradio-card-autoheight .card-input-element {
    display: none;
}

.xradio-card-autoheight .card-input {
    margin: 10px;
    padding: 00px;
}

.xradio-card-autoheight .card:hover {
    cursor: pointer;
}

.xradio-card-autoheight .card-input-element:checked + .card {
    /*box-shadow: 0 0 1px 1px #2ecc71;*/
    box-shadow: 0 0 1px 1px #146c43;
    color:#146c43;
}

.xradio-card-autoheight .card-input-element:checked + .card:before {
    content: "\f058";
    position: absolute;
    right: -15px;
    font-family: FontAwesome;
    font-size: 30px;
    top: 5px;
    background-color: #fff;
    height: 30px;
    width: 30px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    border-radius: 100px;
}
    
/*bg image*/ 
.xradio-card-autoheight .card-bg-img-contain{
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
}
.xradio-card-autoheight .card-bg-img-cover{
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.xradio-card-autoheight .card-bg-img-100{
    background-size:100%;
    background-position:center;
    background-repeat: no-repeat;
}
.xradio-card-autoheight .card-bg-img-70{
    background-size:70%;
    background-position:center;
    background-repeat: no-repeat;
}
.xradio-card-autoheight .card-bg-img-50{
    background-size:50%;
    background-position:center;
    background-repeat: no-repeat;
}
.xradio-card-autoheight .card-bg-img-40{
    background-size:40%;
    background-position:center;
    background-repeat: no-repeat;
}
.xradio-card-autoheight .card-bg-img-30{
    background-size:30%;
    background-position:center;
    background-repeat: no-repeat;
}
.xradio-card-autoheight .card-bg-img-25{
    background-size:25%;
    background-position:center;
    background-repeat: no-repeat;
}
.xradio-card-autoheight .card-bg-img-20{
    background-size:20%;
    background-position:center;
    background-repeat: no-repeat;
}

.xborder-10-white{
    border:10px #fff solid;
}

#card-level-1 .card-footer .btn .fa{
    font-size: 28px;
    vertical-align: top;

}

/******************************
Custom list checkboxes
utilisées dans le form. Interim pour lister et sélectionner les fournisseurs
******************************/
.list-group-item.checked{
    background-color:#f5f5f5;
}
/*
.list-group-item .form-check-input:checked,
.form-check-input.is-valid:checked, .was-validated .form-check-input:valid:checked{
    background-color: #f5f5f5;
    border-color: #f5f5f5;
}
*/
.list-group-item .form-check-input:checked,
.was-validated .list-group-item .form-check-input:checked{
    background-color: #f5f5f5;
    border-color: #f5f5f5;
}
/*change color of checkboxes in card stacked lists*/
 .list-group-item .form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23777' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.list-group-item .form-check-input {
    border:none;
}
.list-group-item .form-check-input:focus,
.form-check-input.is-valid:focus, .was-validated .form-check-input:valid:focus{
    border-color: none;
    outline: 0;
    box-shadow: none;
}


/******************************
Select2
******************************/
/* Custom select 2 */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #999;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px;
    font-size: 26px;
    float: left;
    line-height: 1rem;
    margin-top: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 8px;
    padding: 0px 6px;
}

/* adjust heigh */
.select2-container .select2-selection--single {
    height: 42px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 42px;
}
/* reposition arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
    right: 5px;
}

/* sinon la liste ne s'affiche pas dans les modales */
.select2-container.select2-container--open{
    z-index:10000 !important;
}

/* Picto pour input */
.picto{
    width:40px;
}

.step h5.card-title{
    font-weight: 600;
    font-size: 1.125rem;
}

/* input fields readonly bg-light*/
input.form-control:read-only{
    background-color:#f8f9fa !important;
    cursor: not-allowed;
}