@charset "UTF-8";
/* CSS Document */


body,td,th {
	color: #333;
	font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:14px;
	font-weight:normal;
}
body {
	background: #eceff8;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #333;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #333;
}
a:hover {
	text-decoration: none;
	color: #333;
}
a:active {
	text-decoration: none;
	color: #333;
}

img { border:0px; }

p {margin:0px; }

.centered { display:table; margin:auto; }

.clear { clear:both; height:0px; }
.clear_8 { clear:both; height:8px; }
.clear_10 { clear:both; height:10px; }
.clear_20 { clear:both; height:20px; }
.clear_30 { clear:both; height:30px; }
.clear_40 { clear:both; height:40px; }
.clear_50 { clear:both; height:50px; }
.clear_60 { clear:both; height:60px; }
.clear_70 { clear:both; height:70px; }
.clear_80 { clear:both; height:80px; }
.clear_90 { clear:both; height:90px; }
.clear_100 { clear:both; height:100px; }
.clear_110 { clear:both; height:110px; }
.clear_120 { clear:both; height:120px; }
.clear_150 { clear:both; height:150px; }
.clear_160 { clear:both; height:160px; }
.clear_170 { clear:both; height:170px; }
.clear_180 { clear:both; height:180px; }
.clear_190 { clear:both; height:190px; }
.clear_200 { clear:both; height:200px; }
.clear_210 { clear:both; height:210px; }
.clear_230 { clear:both; height:230px; }
.clear_240 { clear:both; height:240px; }
.clear_280 { clear:both; height:280px; }
.clear_305 { clear:both; height:305px; }
.clear_390 { clear:both; height:390px; }
.clear_5 { clear:both; height:5px; }
.clear_15 { clear:both; height:15px; }
.clear_25 { clear:both; height:25px; }
.clear_35 { clear:both; height:35px; }
.clear_45 { clear:both; height:450px; }
.clear_55 { clear:both; height:55px; }
.clear_65 { clear:both; height:65px; }
.clear_75 { clear:both; height:75px; }
.clear_85 { clear:both; height:85px; }
.clear_95 { clear:both; height:95px; }
.clear_8 { clear:both; height:8px; }
.clear_12 { clear:both; height:12px; }

.container { margin:auto; width:1021px; }

.p-relative { 
    position: relative;
}

.wrapper-between {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.material-icons { 
    vertical-align: middle;
    display: unset;
        
}

.justify-between {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}


/* LOGIN */
.bg-login {
    background: #e77c2f;
    background-image: url(https://my.planethoster.com/img/backgrounds/background_login.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.full-body {
    position: absolute; 
    width: 100%; 
    height: 100%; 
}
.mask-login {
}

.logo-login {
    position: relative;
    top: 200px;
    width: 200px;
    margin: auto;
}

.logo-login img {
    width: 100%;
}

#login_box { 
    background:#f6f7f9; 
    width:500px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    top: 210px;
    margin: auto;
    border-radius: 8px;
}

#login_box header {
    width: calc(100% + 30px);
    margin-left: -15px;
    line-height: 80px;
    font-size: 18px;
    text-transform: uppercase;
    color: #333;
    font-weight: 700;
    background: #efefef;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#login_box header strong {
    color: #e77c2f;
}

#login_box input {
    padding-left: 10px;
    height: 44px; 
    font-size: 16px;
    width: calc(100% - 14px);
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

#login_box input:focus{
    outline: none;
}

#login_box .button {
    color: #fff;
    cursor: pointer;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #e77c2f;
    border: 2px solid #d46b1f;
    width: 100%;
    border-radius: 8px;
    font-size: 16px;
}
#login_box .button:hover { background:#d46b1f }




/* TOP */  
#top { 
    position: fixed;
    height: 40px;
    box-sizing: border-box;
    background: #eceff8;
    color: #323338;
    width: calc(100% - 40px);
    z-index: 99;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
}

#top .logo { 
    float: left;
    font-weight: bold;
    color: #323338;
    font-size: 18px;
    line-height: 40px;
    height: 40px;
}
#top .logo strong { 
    color: #e77c2f;
}

#top .search {
    float: left;
    width: 480px;
    height: 40px;
    margin-left: 128px;
    position: relative;
}

#top .input {
    padding-left: 15px;
    height: 36px;
    font-size: 16px;
    width: calc(100% - 30px);
    background-color: #fff;
    color: #323338;
    -webkit-appearance: none;
    border: 2px solid #fff;
    border-radius: 6px;
    float: left;
}
#top .input:focus {
    outline: none;
    border: 2px solid #e77c2f;
}

#top .search i {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #323338;
}

#top .notifs {
    margin-top: 0px;
    float: right;
    width: 100px;
    margin-right: 0px;
}

#top .notif {
    float: right;
    position: relative;
    height: 40px;
    border-radius: 100%;
    color: #323338;
    margin-left: 10px;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
}









/* TOP */  
#left { 
    position: fixed;
    top: 80px;
    height: calc(100vh - 80px);
    background: #fff;
    color: #323338;
    border-top-right-radius: 12px;
    width: 255px;
    padding: 20px;
    box-sizing: border-box;
}

.line-item {
    color: #323338;
    font-size: 14px;
    margin-left: -10px;
    padding: 10px 20px;
    box-sizing: border-box;
    width: calc(100% + 10px);
    cursor: pointer;
    position: relative;
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    line-height: 22px;
}
.line-item:hover {
    background: rgba(0,0,0,0.07)
}

.line-item i { 
    font-size: 22px;
    margin-right: 5px;
}

.line-item-selected { 
    background: rgba(0,0,0,0.07)
}

.minimize { 
    position: absolute;
    top: 23px;
    left: 196px;
    padding: 5px;
    background: #efefef;
    border-radius: 6px;
    border: 1px solid #ccc;
    width: 24px;
    z-index: 999;
    cursor: pointer;
    user-select: none;
}









/* RIGHT */  
#right { 
    position: fixed;
    top: 80px;
    left: 285px;
    height: calc(100vh - 80px);
    width: calc(100% - 285px);
    background: #fff;
    color: #323338;
    border-top-left-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
    overflow: scroll;
}

.title_page {
    line-height: 21px;
    color: #323338;
    font-size: 22px;
    font-weight: 600;
    margin-left: 0px;
    padding: 10px 20px;
    border-radius: 8px;
    background: rgba(0,0,0,0.07);
    
}

.title_page i {
    float: right;
    cursor: pointer;
}

.title_page .search-button {
    background: #e77c2f;
    color: #fff;
    font-size: 16px;
    line-height: 27px;
    font-weight: 500;
    padding: 7px 14px;
    cursor: pointer;
    border-radius: 6px;
    float: right;
    margin-top: -10px;
    margin-right: -20px;
}

.table_div {
    width: 100%;
    overflow: scroll;
}

.title_table {
    line-height: 21px;
    font-size: 18px;
    font-weight: 600;
}

.table-header {
    background: #f7f7f7;
    float: left;
    position: relative;
}

.cell-header {
    border: 1px solid #ccc;
    background: #f7f7f7;
    border-left: 0;
    line-height: 40px;
    text-align: center;
    float: left;
}

.cell-header i {
    cursor: pointer;
    background: rgba(0,0,0,0.10);
    border-radius: 6px;
}

.table-line {
    background: #fff;
    float: left;
    position: relative;
}

.cell-line {
    border: 1px solid #ccc;
    background: #fff;
    border-left: 0;
    line-height: 40px;
    height: 40px;
    text-align: center;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.cell-line i {
    cursor: pointer;
    background: rgba(0,0,0,0.10);
    border-radius: 6px;
    font-size: 18px;
    padding: 3px;
}

.cell-first {
    border-left: 1px solid #ccc !important;
}

.cell-line input {
    font-size: 16px;
    border: 0px solid #e4e4e4;
    height: 33px;
    padding-left: 10px;
    width: calc(100% - 7px);
    border-radius: 0px;
    box-sizing: border-box;
    margin-top: 2px;
    margin-left: 2px;
}

.cell-line input:focus {
    background: #f7f7f7;
    border: 0px;
    outline: none;
}

#pop-installateur .cell-line, #pop-ca .cell-line {
    cursor: pointer;
}
#pop-installateur .cell-line:hover, #pop-ca .cell-line:hover {
    background: rgba(0,0,0,0.10)!important
}






/* SAISIE */  
.form-100 {
    width: calc(100% - 0px);
    box-sizing: border-box;
}

.form-75 {
    width: calc(75% - 15px);
    box-sizing: border-box;
}

.form-66 {
    width: calc(67% - 15px);
    box-sizing: border-box;
}

.form-50 {
    width: 50%;
    box-sizing: border-box;
}

.form-45 {
    width: calc(50% - 15px);
    
}

.form-33 {
    width: calc(33% - 15px);
    box-sizing: border-box; 
}

.form-25 {
    width: calc(25% - 15px);
    box-sizing: border-box; 
}

.form-bloc {
    width: 100%;
    background: rgba(0,0,0,0.02);
    box-sizing: border-box;
    padding: 20px;
    border-radius: 12px;
}

.label {
    color: #2C3E50;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 5px;
    font-weight: 500;
}

.label i {
    float: right;
    cursor: pointer;
    color: #e77c2f;
}

.input-text {
    font-size: 16px;
    border: 2px solid #e4e4e4;
    height: 45px;
    padding-left: 16px;
    width: 100%;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.input-list {
    font-size: 16px;
    border: 2px solid #e4e4e4;
    height: 45px;
    padding-left: 16px;
    width: 100%;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

input[disabled] {
    background-color: #fff;
}

textarea[disabled] {
    background-color: #fff;
}

.confirm-button {
    background: #0195FF;
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    font-weight: 500;
    padding: 11px 24px;
    cursor: pointer;
    border-radius: 6px;
    float: left;
}










/* VUE */  
.tab {
    float: left;
    line-height: 24px;
    font-size: 16px;
    padding: 8px 16px;
    background: #666;
    color: #fff;
    margin-right: 16px;
    border-radius: 12px;
    cursor: pointer;
}

.tab:hover {
    background: #0195FF;
    color: #fff;
}

.tab-active {
    background: #0195FF;
    color: #fff;
}

.title-document {
    color: #2C3E50;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px;
    font-weight: 500;
    float: left;
}

.title-document a:hover {
    color: #0195FF;
    text-decoration: underline;
}

.unlink-document {
    color: #c0392b;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px;
    font-weight: 500;
    float: right;
    cursor: pointer;
}



/* PLANNING */ 
.table-planning { 
    width: 100%;
}
        
.table-planning th {
    line-height: 50px;
    background: #efefef;
}
.table-planning td {
    line-height: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100px;
    text-align: center;
}
.table-planning td i {
    cursor: pointer;
}
.table-planning td div {
    cursor: pointer;
}

.div-planning {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}







/* FACTURATION */ 
.w-80 {
    width: 80%;
}
.w-60 {
    width: 60%;
}
.w-20 {
    width: 20%;
}


.container-table {
    padding: 20px;
    background: #fff;
    width: 100%;
    border-radius: 8px;
    margin-top: 20px;
    overflow: scroll;
}

.container-table table {
    width: max-content;
    caption-side: bottom;
    border-collapse: collapse;
}

.container-table .title-table {
    width: 100%;
    background: #333;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    line-height: 40px;
}

.container-table th, .container-table td {
    padding-left: 12px;
    padding-right: 12px;
    height: 40px;
    border-bottom: 1px solid rgb(228, 230, 235);
    line-height: 24px;
    font-size: 16px;
    text-align: left;
    padding: 8px;
}

.container-table th {
    background-color: #00000020;
    font-weight: 600;
    cursor: pointer;
}

.container-table tbody tr:hover {
  background-color: rgb(248, 249, 252);
}

.select-td:hover {
    cursor: pointer;
    font-weight: bold;
    color: #e77c2f;
}









/* POPUPS */  
#mask-popup {
    position:fixed;
    z-index:998;
    top:0px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    display:none;
    cursor:pointer;
}

.div-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 640px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #ccc;
    background: #fff;
    color: #2C3E50;
    z-index: 99999;
    -webkit-box-shadow: 0 15px 20px 0 rgb(5 5 5 / 5%);
    -moz-box-shadow: 0 15px 20px 0 rgba(5,5,5,.05);
    box-shadow: 0 15px 20px 0 rgb(5 5 5 / 5%);
    transition: all .3s ease;
    display: none;
}

.div-popup .statut {
    width: 250px;
    height: 50px;
    cursor: pointer;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 500;
    line-height: 50px;
    color: #fff;
}

.div-popup .sep {
    width: 250px;
    height: 1px;
    background: #ccc;
    margin-bottom: 16px;
}

.div-popup h4 {
    line-height: 50px;
    background: #efefef;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-top: -20px;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 2px solid #ccc;
    text-align: center;
    font-size: 20px;
}

#pop-search {
    transform: unset;
    left: unset;
    right: 20px;
    top: 160px;
}







.popup-center {
    display: none;
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 400px;
    height: auto;
    background: #fff;
    color: #333;
    border-radius: 0;
    border: 1px solid #ddd;
    font-size: 14px;
}

.popup-center .title {
    background: #f8f8f8;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
    width: calc(100% - 50px);
    padding: 0 25px;
    text-align: center;
    font-weight: bold;
}

.popup-center .button-confirm {
    height: 40px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    background: #2ecc71;
    border-radius: 0px;
    float: left;
    margin-left: 20px;
    width: calc(50% - 30px);
}

.popup-center .button-confirm:hover {
    background: #27ae60;
}

.popup-center .button-cancel {
    height: 40px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    background: #e74c3c;
    border-radius: 0px;
    float: right;
    margin-right: 20px;
    width: calc(50% - 30px);
}

.popup-center .button-cancel:hover {
    background: #c0392b;
}






.form-bloc .no, .form-bloc .yes {
    float: left;
    width: 90px;
    background: #ddd;
    color: #fff;
    line-height: 32px;
    font-weight: bold;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
}

.form-bloc .no {
    background: #e74c3c;
}

.form-bloc .yes {
    background: #27ae60;
}

.form-bloc .no .box {
    width: 32px;
    height: 32px;
    background: #c82c1c;
    float: left;
    border-radius: 6px;
}

.form-bloc .yes .box {
    width: 32px;
    height: 32px;
    background: #0c8840;
    float: right;
    border-radius: 6px;
}

.form-bloc .no .text {
   float: right;
    margin-right: 10px;
}

.form-bloc .yes .text {
   float: left;
    margin-left: 10px;
}

.vendeur {
    padding: 16px;
    background: #f7f7f7;
    border-radius: 8px;
    float: left;
    width: 100%;
    margin-right: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    font-size: 16px;
    color: #2C3E50;
    line-height: 35px;
}

.line_vendeur {
    padding: 16px;
    background: #f7f7f7;
    border-radius: 8px;
    float: left;
    width: 100%;
    margin-right: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.line_vendeur:nth-child(odd) {
  background: #efefef; /* first, third, fifth... */
}

.line_vendeur:last-child {
    margin-bottom: 0px;
}

.pastille_vendeur {
    width: 24px; height: 24px; border-radius: 8px; background: rgba(44, 62, 80, 1)
}

.product_vendeur {
    line-height: 24px; width: calc(100% - 100px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.title_bloc {
    color: #e77c2f;
    width: calc(100% - 400px);
    float: left;
    line-height: 40px;
    font-weight: bold;
    font-size: 18px;
}

.qty_vendeur { 
    height: 24px;
    line-height: 24px;
    width: 50px;
    border-radius:8px;
    background:#ebefff;
    text-align: center;
    padding: 4px;
}

/* CARTE FRANCE */
.statut_check {
    line-height: 45px;
    border: 2px solid #e4e4e4;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    float: left;
    background: #fff;
    color: #333;
}

.statut_check:hover {
    background: #2C3E50;
    color: #fff;
    border-color: #2C3E50;
}

.statut_checked {
    background: #27ae60;
    color: #fff;
    border-color: #27ae60;
}

.add_line {
    float: left;
    padding: 4px;
    background: #efefef;
    border-radius: 4px;
    color: #27ae60;
    cursor: pointer;
    margin-top: 8px;
}

.remove_line {
    float: left;
    padding: 4px;
    height: 24px;
    border-radius: 4px;
    color: #e74c3c;
    cursor: pointer;
    margin-top: 5px;
}

/* ALERTS */
.alert-error {  
    color: #a94442; 
    background-color: #f2dede; 
    font-size:14px; 
    border:1px solid #ebccd1; 
    width:calc(100% - 20px); 
    padding:0 10px; 
    line-height:35px; 
    border-radius:6px; 
    display:none; 
    margin-bottom:20px;
}
.alert-error i, .alert-success i {  float: right; margin-top: 6px; margin-right: -5px; cursor: pointer; }

.alert-success {  
    color: #3c763d; 
    background-color: #dff0d8; 
    font-size:14px; 
    border:1px solid #d6e9c6; 
    width:calc(100% - 20px); 
    padding:0 10px; 
    line-height:35px; 
    border-radius:6px; 
    display:none; 
    margin-bottom:20px;
}