.add-services-mode {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 10000;
    display: none;
}

.add-services-mode .bg {
    width: 100%;
    height: 100%;
    background-color: rgba(41,55,80,.75);
}

.add-services-mode .add-services {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.add-services-mode .add-services .matrix {
    border-collapse: separate;
    border-spacing: 10px 5px;
    position: absolute;
    top: calc(50% - 285px);
    left: calc(50% - 445px);
    transition: top .25s ease-in-out;
}

.add-services-mode .add-services .matrix .enjeux {
}

.add-services-mode .add-services .matrix .enjeux .enjeu {
    width: 210px;
    height: 130px;
    background-color: white;

    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}


.add-services-mode .add-services .matrix .enjeux .enjeu_1_1 {
    background-image: url('../img/enjeu_1_1_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_1_2 {
    background-image: url('../img/enjeu_1_2_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_1_3 {
    background-image: url('../img/enjeu_1_3_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_1_4 {
    background-image: url('../img/enjeu_1_4_icon.svg');
}


.add-services-mode .add-services .matrix .enjeux .enjeu_2_1 {
    background-image: url('../img/enjeu_2_1_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_2_2 {
    background-image: url('../img/enjeu_2_2_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_2_3 {
    background-image: url('../img/enjeu_2_3_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_2_4 {
    background-image: url('../img/enjeu_2_4_icon.svg');
}


.add-services-mode .add-services .matrix .enjeux .enjeu_3_1 {
    background-image: url('../img/enjeu_3_1_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_3_2 {
    background-image: url('../img/enjeu_3_2_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_3_3 {
    background-image: url('../img/enjeu_3_3_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_3_4 {
    background-image: url('../img/enjeu_3_4_icon.svg');
}


.add-services-mode .add-services .matrix .enjeux .enjeu_4_1 {
    background-image: url('../img/enjeu_4_1_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_4_2 {
    background-image: url('../img/enjeu_4_2_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_4_3 {
    background-image: url('../img/enjeu_4_3_icon.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu_4_4 {
    background-image: url('../img/enjeu_4_4_icon.svg');
}


.add-services-mode .add-services .matrix .enjeux .enjeu_1_1.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_1_1:hover {
    background-image: url('../img/enjeu_1_1_icon-inverted.svg');
    background-color: #808080;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_1_2.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_1_2:hover {
    background-image: url('../img/enjeu_1_2_icon-inverted.svg');
    background-color: #808080;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_1_3.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_1_3:hover {
    background-image: url('../img/enjeu_1_3_icon-inverted.svg');
    background-color: #808080;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_1_4.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_1_4:hover {
    background-image: url('../img/enjeu_1_4_icon-inverted.svg');
    background-color: #808080;
}


.add-services-mode .add-services .matrix .enjeux .enjeu_2_1.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_2_1:hover {
    background-image: url('../img/enjeu_2_1_icon-inverted.svg');
    background-color: #8CC63E;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_2_2.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_2_2:hover {
    background-image: url('../img/enjeu_2_2_icon-inverted.svg');
    background-color: #8CC63E;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_2_3.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_2_3:hover {
    background-image: url('../img/enjeu_2_3_icon-inverted.svg');
    background-color: #8CC63E;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_2_4.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_2_4:hover {
    background-image: url('../img/enjeu_2_4_icon-inverted.svg');
    background-color: #8CC63E;
}



.add-services-mode .add-services .matrix .enjeux .enjeu_3_1.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_3_1:hover {
    background-image: url('../img/enjeu_3_1_icon-inverted.svg');
    background-color: #249BEE;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_3_2.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_3_2:hover {
    background-image: url('../img/enjeu_3_2_icon-inverted.svg');
    background-color: #249BEE;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_3_3.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_3_3:hover {
    background-image: url('../img/enjeu_3_3_icon-inverted.svg');
    background-color: #249BEE;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_3_4.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_3_4:hover {
    background-image: url('../img/enjeu_3_4_icon-inverted.svg');
    background-color: #249BEE;
}


.add-services-mode .add-services .matrix .enjeux .enjeu_4_1.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_4_1:hover {
    background-image: url('../img/enjeu_4_1_icon-inverted.svg');
    background-color: #F7931E;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_4_2.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_4_2:hover {
    background-image: url('../img/enjeu_4_2_icon-inverted.svg');
    background-color: #F7931E;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_4_3.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_4_3:hover {
    background-image: url('../img/enjeu_4_3_icon-inverted.svg');
    background-color: #F7931E;
}

.add-services-mode .add-services .matrix .enjeux .enjeu_4_4.checked, 
.add-services-mode .add-services .matrix .enjeux .enjeu_4_4:hover {
    background-image: url('../img/enjeu_4_4_icon-inverted.svg');
    background-color: #F7931E;
}

.add-services-mode .add-services .matrix .enjeux .enjeu ul.stars {
    display: inline;
    position: relative;
    top: -36px;
    left: 15px;
}

.add-services-mode .add-services .matrix .enjeux .enjeu ul.stars li.star {
    background-image: url('../img/star-gray.svg');
    background-repeat: no-repeat;
    background-position: left;
    background-size: 16px;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.add-services-mode .add-services .matrix .enjeux .enjeu.checked ul.stars li.star, 
.add-services-mode .add-services .matrix .enjeux .enjeu:hover ul.stars li.star {
    background-image: url('../img/star.svg');
}

.add-services-mode .add-services .matrix .enjeux .enjeu span {
    font-size: 14px;
    text-transform: uppercase;
    color: #C7C7C7;
    display: block;
    text-align: center;
    position: relative;
    top: 45px;
    font-weight: normal;
}

.add-services-mode .add-services .matrix .enjeux .enjeu.checked span, 
.add-services-mode .add-services .matrix .enjeux .enjeu:hover span {
    color: #FFF;
}

.add-services-mode .add-services .matrix tr.space td {
    height: 0px;
    transition: height .25s ease-in-out;
}

.add-services-mode .add-services .matrix tr.space.open td {
    /*height: 500px;*/
}

.add-services-mode .add-services .panel {
    position: absolute;
    top: 20px;
    left: calc(50% - 600px);
    width: 1200px;
    height: calc(100% - 590px);
    background-color: transparent;
    visibility: hidden;
    padding: 20px 0px;
    background-repeat: no-repeat;
}

.add-services-mode .add-services .panel-content {
    width: 100%;
    height: 100%;
    background-color: white;
    overflow: hidden;
}

.add-services-mode .add-services .panel-content .services-container {
    width: 100%;
    height: 100%;
    border: 4px solid #808080;   
    padding: 20px; 
    box-sizing: border-box;
}

.add-services-mode .add-services .panel-content .services-container[name="services_2_1"],
.add-services-mode .add-services .panel-content .services-container[name="services_2_2"],
.add-services-mode .add-services .panel-content .services-container[name="services_2_3"],
.add-services-mode .add-services .panel-content .services-container[name="services_2_4"] {
    border-color: #8CC63F;   
}

.add-services-mode .add-services .panel-content .services-container[name="services_3_1"],
.add-services-mode .add-services .panel-content .services-container[name="services_3_2"],
.add-services-mode .add-services .panel-content .services-container[name="services_3_3"],
.add-services-mode .add-services .panel-content .services-container[name="services_3_4"] {
    border-color: #249BEE;   
}

.add-services-mode .add-services .panel-content .services-container[name="services_4_1"],
.add-services-mode .add-services .panel-content .services-container[name="services_4_2"],
.add-services-mode .add-services .panel-content .services-container[name="services_4_3"],
.add-services-mode .add-services .panel-content .services-container[name="services_4_4"] {
    border-color: #F7931E;   
}

.add-services-mode .add-services .panel-content .services {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.add-services-mode .add-services .panel-content .services .service {
    font-size: 14px;
    color: #777;
    line-height: 25px;
    padding-left: 20px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url('../img/unchecked-gray.svg');
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-services-mode .add-services .panel-content .services .service.disabled {
    cursor: default;
    opacity: .50;
}

.add-services-mode .add-services .panel-content .services-container[name="services_2_1"] .services .service,
.add-services-mode .add-services .panel-content .services-container[name="services_2_2"] .services .service,
.add-services-mode .add-services .panel-content .services-container[name="services_2_3"] .services .service,
.add-services-mode .add-services .panel-content .services-container[name="services_2_4"] .services .service {
    background-image: url('../img/unchecked-green.svg');
}

.add-services-mode .add-services .panel-content .services-container[name="services_3_1"] .services .service,
.add-services-mode .add-services .panel-content .services-container[name="services_3_2"] .services .service,
.add-services-mode .add-services .panel-content .services-container[name="services_3_3"] .services .service,
.add-services-mode .add-services .panel-content .services-container[name="services_3_4"] .services .service {
    background-image: url('../img/unchecked-blue.svg');
}

.add-services-mode .add-services .panel-content .services-container[name="services_4_1"] .services .service,
.add-services-mode .add-services .panel-content .services-container[name="services_4_2"] .services .service,
.add-services-mode .add-services .panel-content .services-container[name="services_4_3"] .services .service,
.add-services-mode .add-services .panel-content .services-container[name="services_4_4"] .services .service {
    background-image: url('../img/unchecked-orange.svg');
}

.add-services-mode .add-services .panel-content .services-container[name="services_1_1"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_1_2"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_1_3"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_1_4"] .services .service.selected {
    background-image: url('../img/checked-gray.svg');
}

.add-services-mode .add-services .panel-content .services-container[name="services_2_1"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_2_2"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_2_3"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_2_4"] .services .service.selected {
    background-image: url('../img/checked-green.svg');
}

.add-services-mode .add-services .panel-content .services-container[name="services_3_1"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_3_2"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_3_3"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_3_4"] .services .service.selected {
    background-image: url('../img/checked-blue.svg');
}

.add-services-mode .add-services .panel-content .services-container[name="services_4_1"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_4_2"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_4_3"] .services .service.selected,
.add-services-mode .add-services .panel-content .services-container[name="services_4_4"] .services .service.selected {
    background-image: url('../img/checked-orange.svg');
}

.add-services-mode button {
    height: 30px;
    width: 150px;
    background-color: white;
    color: #777;
    font-size: 12px;
    text-transform: uppercase;
    position: absolute;
    right: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 52px;
    text-align: left;
}

.add-services-mode button.save {
    top: 20px;
    background-image: url('../img/labelisation-save-bg.svg');
}

.add-services-mode button.cancel {
    top: 60px;
    background-image: url('../img/labelisation-cancel-bg.svg');
}