/*=======================================================================================*/
/*	Si le background est blanc															 */
/*=======================================================================================*/
.whiteWork:before {
    color: #757575;
    transition: color 0.3s;
}

.whiteWork:hover:before {
    color: #00ADB3;
}

.whiteWork:focus:before {
    color: #00ADB3;
}

.whiteWork:active:before {
    color: #1A9EA5;
}

.whiteWork:disabled:before {
    color: #BDBDBD;
}

.whiteWork.multi-opened:before, .whiteWorkActive:before {
    color: #00ADB3 !important;
}

/*=======================================================================================*/
/*	Si le fond est noir																	 */
/*=======================================================================================*/
.blackWork:before {
    color: #FFFFFF;
}

.blackWork:hover:before {
    color: rgba(255, 255, 255, 0.75);
}

.blackWork:focus:before {
    color: rgba(255, 255, 255, 0.75);
}

.blackWork:active:before {
    color: rgba(255, 255, 255, 0.5);
}

.blackWork:disabled:before {
    color: rgba(255, 255, 255, 0.3);
}

.blackWork.multi-opened:before, .blackWorkActive:before {
    color: #FFFFFF !important;
    opacity: 0.5 !important;
}
/*=======================================================================================*/
/*	Si le background est orange													 */
/*=======================================================================================*/
.orangeWork:before {
    color: #F39200;
    transition: color 0.3s;
}

.orangeWork:hover:before {
    color: #00ADB3;
}

.orangeWork:focus:before {
    color: #00ADB3;
}

.orangeWork:active:before {
    color: #1A9EA5;
}

.orangeWork:disabled:before {
    color: #F39200;
}

.orangeWork.multi-opened:before, .whiteWorkActive:before {
    color: #00ADB3 !important;
}
/*=======================================================================================*/
/*	Autres couleurs																	     */
/*=======================================================================================*/
.red:before {
    color: #FF5252;
}

.red:hover:before {
    color: rgba(228, 35, 18, 0.65) !important;
}

.yellow:before {
    color: #F6A42C;
}

/*=======================================================================================*/
/*	Le bouton simple(Bouton de couleur)													 */
/*=======================================================================================*/
.raisedprimary {
    border-style: none;
    height: 3.6rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    border-radius: 0.2rem;
    font-weight: bold;
    min-width: 6.4rem;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    text-transform: uppercase;
    color: #fff;
    outline: none;
    cursor: pointer;
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
}

.suite.raisedprimary {
    background-color: #00ADB3;
    -moz-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
}

.suite.raisedprimary:hover {
    border-style: none;
    background-color: #1A9EA5;
}

.suite.raisedprimary:focus  {
    border-style: none;
    background-color: #1A9EA5;
}

.suite.raisedprimary:disabled {
    border-style: none;
    background-color: #BAE6E8; /* rgb(139, 213, 247); */
    color: rgb(250, 250, 250);
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*=======================================================================================*/
/*	Le bouton Orange(Bouton Orange)														 */
/*=======================================================================================*/
.raisedOrange {
    border-style: none;
    height: 3.6rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    border-radius: 0.2rem;
    font-weight: bold;
    min-width: 6.4rem;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    text-transform: uppercase;
    color: #fff;
    outline: none;
    cursor: pointer;
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
}

.suite.raisedOrange {
    background-color: #F39200;
    -moz-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
}

.suite.raisedOrange:hover {
    border-style: none;
    background-color: #F6A42C;
}

.suite.raisedOrange:focus {
    border-style: none;
    background-color: #F6A42C;
}

.suite.raisedOrange:disabled {
    border-style: none;
    background-color: #FFD194; /* rgb(139, 213, 247); */
    color: rgb(250, 250, 250);
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*=======================================================================================*/
/*	Le bouton Red(Bouton Rouge)														 */
/*=======================================================================================*/
.raisedRed {
    border-style: none;
    height: 3.6rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    border-radius: 0.2rem;
    font-weight: bold;
    min-width: 6.4rem;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    text-transform: uppercase;
    color: #fff;
    outline: none;
    cursor: pointer;
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
}

.suite.raisedRed {
    background-color: #DC4547;
    -moz-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
}

.suite.raisedRed:hover {
    border-style: none;
    background-color: #FF5252;
}

.suite.raisedRed:focus {
    border-style: none;
    background-color: #FF5252;
}

.suite.raisedRed:disabled {
    border-style: none;
    background-color: #FF8687; /* rgb(139, 213, 247); */
    color: rgb(250, 250, 250);
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*=======================================================================================*/
/*	Le bouton Violet(Bouton Violet)														 */
/*=======================================================================================*/
.raisedPurple {
    border-style: none;
    height: 3.6rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    border-radius: 0.2rem;
    font-weight: bold;
    min-width: 6.4rem;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    text-transform: uppercase;
    color: #fff;
    outline: none;
    cursor: pointer;
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
}

.suite.raisedPurple {
    background-color: #7759ae;
    -moz-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
}

.suite.raisedPurple:hover {
    border-style: none;
    background-color: #8f76bc;
}

.suite.raisedPurple:focus {
    border-style: none;
    background-color: #8f76bc;
}

.suite.raisedPurple:disabled {
    border-style: none;
    background-color: #b9aad5; /* rgb(139, 213, 247); */
    color: rgb(250, 250, 250);
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*=======================================================================================*/
/*	Le bouton vert(Bouton vert)														 */
/*=======================================================================================*/
.raisedGreen,
.raisedPosGreen,
.raisedCoral{
    border-style: none;
    height: 3.6rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    border-radius: 0.2rem;
    font-weight: bold;
    min-width: 6.4rem;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    text-transform: uppercase;
    color: #fff;
    outline: none;
    cursor: pointer;
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
}

.suite.raisedGreen {
    background-color: #00c61f;
    -moz-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
}

.suite.raisedGreen:hover {
    border-style: none;
    background-color:  #00cc1f;
}

.suite.raisedGreen:focus {
    border-style: none;
    background-color:  #00cc1f;
}

.suite.raisedGreen:disabled {
    border-style: none;
    background-color: #66ff7d; /* rgb(139, 213, 247); */
    color: rgb(250, 250, 250);
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*=======================================================================================*/
/*	Le bouton vert du POS      											     */
/*=======================================================================================*/

.suite.raisedPosGreen {
    background-color: #00a873;
    -moz-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
}

.suite.raisedPosGreen:hover {
    border-style: none;
    background-color:  #00ae73;
}

.suite.raisedPosGreen:focus {
    border-style: none;
    background-color:  #00ae73;
}

.suite.raisedPosGreen:disabled {
    border-style: none;
    filter: contrast(0.3);
    color: rgb(250, 250, 250);
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*=======================================================================================*/
/*	Le bouton CORAL (entre orange et rouge)       											     */
/*=======================================================================================*/

.suite.raisedCoral {
    background-color: #ff774f;
    -moz-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
}

.suite.raisedCoral:hover {
    border-style: none;
    background-color: #fa9778;
}

.suite.raisedCoral:focus {
    border-style: none;
    background-color:  #fa9778;
}

.suite.raisedCoral:disabled {
    border-style: none;
    filter: contrast(0.3);
    color: rgb(250, 250, 250);
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*=======================================================================================*/
/*	Le bouton simple(Bouton blanc)														 */
/*=======================================================================================*/
.raisedsecondary {
    border-style: none;
    height: 3.6rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    border-radius: 0.2rem;
    font-weight: bold;
    min-width: 6.4rem;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
    color: #474747;
    outline: none;
    cursor: pointer;
    font-size: 1.4rem;
    background-color: #FAFAFA;
    -moz-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    border: 0.1rem solid #eeeeee;
}

.raisedsecondary:hover {
    background-color: #F0F0EF;
}

.raisedsecondary:focus {
    background-color: #F0F0EF;
}

.raisedsecondary:disabled {
    border: 0.1rem solid #E0E0E0;
    background-color: #F0F0F0;
    color: #BDBDBD;
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*=======================================================================================*/
/*	Le bouton flat																		 */
/*=======================================================================================*/
.flat {
    border-style: none;
    height: 3.6rem;
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
    border-radius: 0.2rem;
    font-weight: bold;
    min-width: 6.4rem;
    text-transform: uppercase;
    outline: none;
    cursor: pointer;
    font-size: 1.4rem;
    background-color: transparent;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
}

.suite.flat {
    color: #00ADB3;
    transition: background-color 0.3s;
}

.suite.flat:hover {
    border-style: none !important;
    background-color: #F0F0F0;
}

.suite.flat:focus {
    border-style: none !important;
    background-color: #F0F0F0;
}

.suite.flat:active {
    border-style: none !important;
    background-color: #E8E8E8;
}

.suite.flat:disabled {
    border-style: none !important;
    background-color: #FAFAFA;
    color: #BDBDBD !important;
}

/*=======================================================================================*/
/*	Le bouton de Login																	 */
/*=======================================================================================*/
.btnLogin {
    height: 3.8rem;
    color: #ffffff;
    border: 0.1rem solid #ffffff;
    border-radius: 0.2rem;
    cursor: pointer;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    background-color: transparent;
}

.btnLogin[disabled] {
    cursor: default;
}

.suite.btnLogin:hover {
    background-color: var(--login-btn-color);
}

.suite.btnLogin[disabled]:hover {
    background-color: transparent;
}

.suite.btnLogin:focus {
    background-color: var(--login-btn-color);
}

.suite.btnLogin:active {
    background-color: var(--login-btn-color);
}

.suite.btnLogin[disabled]:active {
    background-color: transparent;
}

/*=======================================================================================*/
/*	Le bouton trois point de suspension	(Vertical)										 */
/*=======================================================================================*/
.icon-suspension:before {
    content: "\e66b";
    font-size: 2.3rem;
    line-height: 3.1rem;
}

.icon-suspension {
    border: none !important;
    cursor: pointer;
    background-color: transparent;
}

/*=======================================================================================*/
/*	Le bouton stylo										 */
/*=======================================================================================*/
button.icon-edit-table {
    border: none !important;
    cursor: pointer;
    background-color: transparent;
}

/*=======================================================================================*/
/*	L'effet goute d'eau au clic (rippled) 										btn-multi-opening		 */
/*=======================================================================================*/
.ripple {
    position: relative;
    overflow: hidden;
    transition: background-color .2s;
}

.ripple.color:before {
    content: "\00a0"; /* iOS : Il faut la hauteur sinon safari ne l'affiche pas lorsque sélectionné de nouveau */
    height: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    padding-top: 0;
    border-radius: 100%;
    background-color: rgba(236, 240, 241, .4);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ripple.color.selected:before {
    content: "\00a0"; /* iOS : Il faut la hauteur sinon safari ne l'affiche pas lorsque sélectionné de nouveau */
    height: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 6rem;
    padding-top: 6rem;
    border-radius: 100%;
    background-color: rgba(236, 240, 241, .4);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ripple.white:before {
    content: "\00a0"; /* iOS : Il faut la hauteur sinon safari ne l'affiche pas lorsque sélectionné de nouveau */
    height: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    padding-top: 0;
    border-radius: 100%;
    background-color: rgba(189, 189, 189, .4);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ripple.white.selected:before {
    content: "\00a0";
    height: 0px; /* iOS : Il faut la hauteur sinon safari ne l'affiche pas lorsque sélectionné de nouveau */
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 6rem;
    padding-top: 6rem;
    border-radius: 100%;
    background-color: rgba(189, 189, 189, .4);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ripple:active:before {
    width: 100%;
    padding-top: 100%;
    transition: width .1s ease-out, padding-top .1s ease-out;
}

/*===============================================================================================*/
/*	L'effet goute d'eau au clic (rippled) sur le bouton d'ouverture des boutons multi fonction	 */
/*===============================================================================================*/
.btn-multi-opening.ripple:active:before {
    width: 200%;
    padding-top: 300%;
    transition: width .1s ease-out, padding-top .1s ease-out;
}

.btn-multi-opening > span.icon-expand {
    margin-left: 0 !important;
}

/*=======================================================================================*/
/* Les bouton de content                                                                  */
/*=======================================================================================*/
.button_content {
    width: 1.6rem;
    height: 1.6rem;
    margin: 0.2rem;
    padding: 0rem;
    border-radius: 0.2rem;
    border: 0.1rem solid transparent;
    outline: none;
    background-position: center;
    background-color: transparent;
    cursor: pointer;
    font-family: 'kameleon';
    background-color: transparent;
    border: 0.1rem solid transparent;
}

.content_validate-icon:before {
    content: "\e68b";
}

.content_cancel-icon:before {
    content: "\e614";
}

/*=======================================================================================*/
/* Les boutons multi et boutons avec icone                                               */
/*=======================================================================================*/
.btn-multi-opening:before, .btn-multi-opening span:before, span.btn-icon:before {
    font-size: 2rem;
    vertical-align: sub;
}

.btn-multi-opening span:before {
    line-height: 3.8rem;
}


.raisedprimary.btn-multi-opening:before, .raisedprimary.btn-multi-opening span:before, .raisedprimary > span.btn-icon {
    color: #FFFFFF;
}

.raisedsecondary.btn-multi-opening:before, .raisedsecondary.btn-multi-opening span:before {
    color: #000000;
}

.suite.flat.btn-multi-opening:before, .suite.flat.btn-multi-opening span:before {
    color: #00ADB3;
}

/*le bouton principal*/
.button-multi {
    margin-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.suite.button-multi.raisedprimary {
    border-left: 0.1rem solid #00ADB3;
    border-right: 0.1rem solid #1A9EA5;
}

.suite.button-multi.raisedprimary:hover {
    border-left: 0.1rem solid #00ADB3;
    border-right: 0.1rem solid #1A9EA5;
}

/*le bouton d ouverture*/
button.btn-multi-opening {
    min-width: 2.4rem;
    width: 2.4rem;
    margin-left: 0;
    vertical-align: top;
    padding: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.button-multi-options {
    min-width: 12.8rem;
    overflow: hidden;
    position: absolute;
    padding-bottom: 1.2rem;
    border-radius: 0.2rem;
    display: none;
    background-color: white;
    z-index: 10000;
    -webkit-box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
    -box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
}

.suite.btn-multi-opening.raisedprimary {
    border-style: none;
    border-left: 0.1rem solid #1A9EA5;
}

.suite.raisedprimary.hover {
    border-style: none;
    background-color: #14797B;
}

.raisedsecondary.hover {
    border-style: none;
    background-color: #D4D4D4;
}

.suite.flat.hover {
    border-style: none !important;
    background-color: #D4D4D4;
}

.content_button_multi button {
    width: 100%;
    margin-left: 0;
    text-align: left;
}

.suite.flat.button-multi, .suite.flat.button-multi.right {
    padding-left: 0.8rem !important;
    padding-right: 0.4rem !important;
}

.suite.flat.button-multi.left {
    padding-right: 0.8rem !important;
}

span.btn-multi-opening, span.btn-icon {
    color: #00ADB3;
}

span.btn-multi-opening.right, span.btn-icon.right {
    margin-left: 0.4rem;
}

span.btn-multi-opening.left, span.btn-icon.left {
    float: left;
    margin-right: 0.8rem;
}

/*disabled*/
button.button-multi.disabled > span:before {
    opacity: 0.26 !important;
}

.suite.button-multi.raisedprimary:disabled {
    border-left: 0.1rem solid #BAE6E8; /* rgb(139, 213, 247); */
    border-right: 0.1rem solid #BAE6E8; /* #A9E0F9; */
}

.suite.btn-multi-opening.raisedprimary:disabled {
    border-left: 0.1rem solid #BAE6E8;
}

/* séparateur */
.content_divider .divider {
    width: 100%;
    height: 0.1rem;
    background-color: #EEEEEE;
}

li.v_control.content_button_multi.content_divider {
    height: 0.1rem;
    padding-top: 1rem;
    margin-bottom: 0;
}

/*options */
.inner-button {
    color: #777777 !important;
    font-size: 1.4rem;
    font-weight: normal;
    text-transform: none !important;
}

/* sans text */
.no-text {
    min-width: 0 !important;
}

.no-text span {
    margin-right: 0 !important;
}
/* scroll */
.scroll_options{
    overflow: auto !important;
}