@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v134/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

body,td,th {
	color: #333;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	font-weight:normal;
}
body {
	background:#f6f7f9;
	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; }

.left { float:left; }
.right { float:right; }

.top_10 { margin-top:10px; }
.top_20 { margin-top:20px; }
.top_30 { margin-top:30px; }
.top_40 { margin-top:40px; }
.top_50 { margin-top:50px; }

.right_10 { margin-right:10px; }
.right_20 { margin-right:20px; }
.right_30 { margin-right:30px; }
.right_50 { margin-right:50px; }
.no_right { margin-right:0px; }

.left_10 { margin-left:10px; }
.left_40 { margin-left:40px; }
.left_70 { margin-left:70px; }
.left_15 { margin-left:15px; }
.no_left { margin-left:0px; }

.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;
}

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


/* LOGIN */
.bg-login {
    background: #dd1a16;
    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 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: #dd1a16;
    border: 2px solid #a8251d;
    width: 100%;
    border-radius: 8px;
    font-size: 16px;
}
#login_box .button:hover { background:#a8251d }




/* main page */ 
#top { 
    position: fixed;
    height: 100px;
    padding-top: 20px;
    background: #dd1a16;
    color: #fff;
    width: 100%;
    z-index: 99;
}

#top .logo { 
    float: left;
    width: 290px;
}
#top .logo img { 
    width: 220px;
    margin-left: 20px;
    margin-top: 15px;
}

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

#top .input {
    padding-left: 15px;
    height: 40px; 
    font-size: 16px;
    width: calc(100% - 10px);
    background-color: rgba(255,255,255,.1);
    color: #fff;
    -webkit-appearance:none;
    border: 0px solid #ddd;
    border-radius: 5px;
    float: left;
}

#top .input::placeholder {
    color: rgba(255,255,255,.7);
}


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

#top .see-site { 
    float: left;
    margin-left: 20px;
    cursor: pointer;
}

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

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

#top .notifs i { 
    margin-top: -4px;
}

#top .span-alert-big {
    background: #ff0000;
    color: #fff;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 13px;
    position: absolute;
    left: 20px;
    top: 2px;
    border-radius: 100%;
}

#alerts-body {
    display: none;
    position: fixed;
    right: 18px;
    top: 70px;
    width: 440px;
    color: #333;
    border: 1px solid #c8c8c8;
    background: #e3f4ff;
    max-height: calc(100vh - 90px);
    overflow-y: scroll;
}

#alerts-body .line-on {
    line-height: 1.6;  
    width: calc(100% - 30px);
    padding: 15px;
    background: #e3f4ff;
    position: relative;
}

#alerts-body .line-off {
    line-height: 1.6;  
    width: calc(100% - 30px);
    padding: 15px;
    background: #fff;
    position: relative;
}

#alerts-body .sep-alert {
    height: 1px;
    background: #c8c8c8;
    width: calc(100% - 0px);
    margin:0px;
}

#alerts-body a {
    color:#3498db
}

#alerts-body .alert-actions {
    float: left;
}

#alerts-body .alert-dots {
    float: right;
    background: #f8f8f8;
    padding: 2px 7px;
    border-radius: 12px;
    margin-top: -6px;
    cursor: pointer;
}

#alerts-body .alert-action {
    display: none;
    position: absolute;
    background: #f8f8f8;
    padding: 10px;
    border-radius: 12px;
    right: 17px;
    top: 90px;
    z-index: 999;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

#alerts-body .alert-action-bottom {
    top: unset;
    bottom: 50px;
}

/* main page */
#main { 
    position: relative;
    width: 100%;
    height: 100%;
}

#main #left { 
    position: fixed;
    width: 265px;
    left: 0;
    bottom: 0;
    top: 100px;
    border-right: 1px solid #ddd;
    background: #fff;
    z-index: 2;
    padding-top: 10px;
    transition: all .1s ease;
}

#main #right { 
    padding: 20px;
    position: fixed;
    width: calc(100% - 306px);
    right: 0;
    bottom: 0;
    top: 100px;
    z-index: 1;
    overflow: scroll
}

.logged-in { 
    width: calc(100% - 0px);
    padding-left: 20px;
    line-height: 40px;
    color: #525252;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.reduce-width {
    position: absolute;
    top: 20px;
    right: -12px;
    cursor: pointer;
}

.left-sep {
    width: 100%;
    height: 1px;
    margin-top: 0px;
    margin-bottom: 0px;
    background: #ddd;
}

.search-div { 
    width: calc(100% - 20px);
    padding-left: 20px;
    padding-top: 10px;
    height: 50px;
    background: #f6f7f9;
    color: #525252;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
}

.search-div i { 
    position: absolute;
    top: 17px;
    left:25px;
}

.input-icon {
    padding-left: 30px;
    height: 35px; 
    font-size: 16px;
    width: calc(100% - 44px);
    border: 1px solid #ddd;
    border-radius: 5px;
}

.nav-left {
    width: 100%;
    height: calc(100vh - 170px);
    overflow: scroll;
}

.line-item {
    line-height: 50px;
    color: #525252;
    font-size: 16px;
    padding-left: 20px;
    width: calc(100% - 0px);
    cursor: pointer;
    position: relative;
}

.line-item:hover {
    background: #f6f7f9;
}

.line-item-active {
    background: #f6f7f9;
    color: #004e7c;
}

.chevron-right {
    position: absolute;
    top: 13px;
    right: 10px;
}

.group-items {
    display: none;
}

.group-items .line-item {
    background: #f6f7f9;
    padding-left: 55px;
    width: calc(100% - 0px);
}

.line-item a {
    color: #525252;
    display: block;
}
.line-item a:hover {
    color: #004e7c;
}


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

.wrapper-start {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.wrapper-end {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

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

.w-50 {
    width: 50%;
}

.w-50-20 {
    width: calc(50% - 20px)
}

.w-66 {
    width: calc(66% - 10px)
}

.w-60 {
    width: calc(60% - 0px)
}

.w-100 {
    width: 100%;
}

.w-80 {
    width: 80%;
}

.w-40 {
    width: 40%;
}
.w-33 {
    width: calc(33% - 10px)
}

.w-25 {
    width: 20%;
}

.w-20 {
    width: 20%;
}

.w-10 {
    width: 10%;
}

.links {
    font-size: 12px;
    color: #333;
    margin-bottom: 0px;
}

.links a {
    color: #337abf;
}

.title-page {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
}

.statuses {
    float: right;
    padding-left: 25px;
    padding-right: 25px;
    line-height: 40px;
    font-size: 14px;
    background-color: #e8e7e6;
    border: 1px solid #ccc;
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 20px;
}

.statuses:hover {
    background-color: #efefef;
}

.update_lines:hover {
    background: #173964;
}
.submit {
    padding-left: 25px;
    padding-right: 25px;
    line-height: 36px; 
    font-size: 16px;
    background-color: #ccc;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}

#pop-status {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    width: 400px;
    height: calc(100vh - 52px);
    background: #fff;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 25px;
	padding-top: 25px;
    border-radius: 0;
    border: 1px solid #ddd;
    font-weight: 500;
    font-size: 14px;
    overflow: scroll;
}

.close-status {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 421px;
    padding-right: 20px;
    color: #3b90ce;
    cursor: pointer;
    background: #f8f8f8;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
    text-align: right;
}


#pop-status .sep {
    width: calc(100% + 0px);
    height: 1px;
    background: #ddd;
    margin-top: 20px;
    margin-bottom: 20px;
}
#pop-status .see-view {
    width: calc(100% + 0px);
    height: 24px;
    line-height: 24px;
    cursor: pointer;
    color: #333;
}
#pop-status .see-view i {
    float: right;
    margin-left: 10px;
}
#pop-status .add-view {
    width: calc(100% + -120px);
    padding-left: 25px;
    font-size: 14px;
	line-height: 40px;
	border-radius: 6px;
    cursor: pointer;
    background-color: #00cb84;
	color: #fff;
	

}
#pop-status .input {
    padding-left: 15px;
    height: 35px; 
    font-size: 16px;
    width: calc(100% - 19px);
    border: 2px solid #ddd;
    border-radius: 0px;
    margin-top: 0px;
}
#pop-status .input-list {
    padding-left: 10px;
    height: 44px; 
    font-size: 16px;
    width: calc(100% - 0px);
    border: 2px solid #ddd;
    border-radius: 0px;
    margin-top: 0px;
}
#pop-status .line-check {
    width: calc(100% + 0px);
    height: 24px;
    color: #333;
    line-height: 24px;
    font-size: 16px;
}

.actions-status {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 401px;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #f8f8f8;
    border-top: 1px solid #ddd;
}

#pop-status .submit-view {
    height: 44px;
    color: #fff;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background: #00cb84;
    border-radius: 6px;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    
}
#pop-status .submit-view:hover {
    background: #00cb84db;
}

#pop-status .close-view {
    background: #333 !important;
    float: right;
    padding-left: 15px;
    padding-right: 15px;
    
}
#pop-status .close-view:hover {
    background: #111 !important;
}

.statut_check {
    line-height: 44px;
    border: 2px solid #ddd;
    width: 41px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    margin-right: 5px;
    float: left;
    background: #fff;
    color: #333;
}

.statut_check:hover {
    background: #222;
    border: 2px solid #222;
    color: #fff;
}

.filter_statut {
    line-height: 34px;
    background: #333;
    width: 44px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    float: left;
    color: #fff;
    border-radius: 8px;
}


#pop-invoice {
    display: none;
    position: fixed;
    z-index: 9991;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 820px;
    height: calc(100vh - 200px);
    background: #fff;
    padding: 25px;
    padding-top: 0px;
    border-radius: 12px;
    border: 1px solid #ddd;
    overflow: hidden;
}

#pop-invoice .actions {
    width: calc(100% + 20px);
    margin-left: -25px;
    padding-right: 10px;
    height: 34px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f8f8f8;
    border-bottom: 1px solid #ddd;
}

#pop-invoice .actions .button {
    height: 34px;
    color: #fff;
    line-height: 34px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background: #004d7b;
    border-radius: 6px;
    float: right;
    padding-left: 15px;
    padding-right: 15px;
    
}

#pop-invoice .actions .button:hover {
    background: #173964;
}

#pop-invoice iframe {
    width: 100%;
    height: 90vh;
}




#pop-client, #pop-notification {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    width: 400px;
    height: calc(100vh - 52px);
    background: #fff;
    padding: 25px;
    border-radius: 0;
    border: 1px solid #ddd;
    font-weight: 500;
    font-size: 14px;
    overflow: scroll;
}

.edit-div {
    display: none;
}

.edit-button {
    line-height: 44px;
    font-size: 16px;
    font-weight: bold;
    background: #27ae60;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    width: calc(100% - 4px);
    text-align: center;
    margin-top: 10px;
    border: 2px solid #189b4f;
}

.edit-button:hover {
    background: #189b4f;
}


.close-client {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 431px;
    padding-right: 20px;
    color: #3b90ce;
    cursor: pointer;
    background: #f8f8f8;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
    text-align: right;
}

.header-client { 
    width: calc(100% - 22px);
    padding: 10px;
    background: rgba(0,0,0,.05);
    border: 1px solid #ccc;
    font-size: 16px;
    color: #888;line-height: 1.5;
}

.header-client strong { 
    color: #111;
    font-size: 18px;
    text-transform: uppercase;
}

.header-box { 
    width: calc(100% - 22px);
    padding: 10px;
    background: rgba(0,0,0,.03);
    border: 1px solid #ccc;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    float: left;
}
.header-box .right i {
    cursor: pointer;
}

.body-box { 
    width: calc(100% - 22px);
    padding: 10px;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 16px;
    color: #555;
    line-height: 1.5;
} 
.body-box strong { 
    color: #333;
}
.body-box a { 
    color: #337abf;
}

.body-box .input {
    padding-left: 10px;
    margin-top: 5px;
    height: 35px;
    font-size: 16px;
    width: calc(100% - 15px);
    border: 2px solid #ddd;
    border-radius: 4px;
}

.table-cell .input-list {
    padding-left: 10px;
    height: 40px; 
    font-size: 16px;
    width: calc(100% - 0px);
    border: 2px solid #ddd;
    border-radius: 5px;
}

.body-box .input-list {
    padding-left: 10px;
    height: 40px; 
    font-size: 16px;
    width: calc(100% - 0px);
    border: 2px solid #ddd;
    border-radius: 5px;
}

.bg-points {
    background: url('img/elipses.png') repeat-y top left;
    padding-left: 20px;
}






.name_date {
    color: #a6a5a5;
    font-size: 16px;
    margin-bottom: 5px;
}

#reportrange {
    background: #fff;
    cursor: pointer; 
    padding: 10px 10px; 
    border: 1px solid #ccc; 
    width: calc(100% - 22px);
	border-radius: 6px;
}

#filters {
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background: #e8e7e6;
    line-height: 36px; 
    font-size: 16px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: calc(100% - 22px);
}

#filters .status {
    line-height: 32px !important;
    font-size: 16px;
    padding: 0px 10px;
    margin-top: 2px;
    height: 32px;
    color: #fff;
    background: #4d86ec;
    border-radius: 5px;
    margin-left: 5px;
    cursor: pointer;
}


#filters i {
    font-size: 18px;
    margin-top: -4px;
    background: rgba(255,255,255,.1);
    margin-left: 8px;
    border-radius: 6px;
}

.update_lines {
    float: right;
    padding-left: 25px;
    padding-right: 25px;
    line-height: 40px;
    font-size: 14px;
    background-color: #00cb84;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.update_lines:hover {
    background: #00cb84db;
}
.disabled {
    background-color: #e8e7e6 !important;
    color: #333 !important;
}

.table-graph {
    display: table;
    width: 100%;
    background: #fff;
}

.table-graph .cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ddd;
    border-right: 0px solid #ddd;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.table-graph span {
    margin-top: 0px;
    font-size: 12px;
    color: #a6a5a5;
}

.table-graph .first {
    border-top-left-radius: 6px;
}

.table-graph .last {
    border-top-right-radius: 6px;
    border-right: 1px solid #ddd;
}

.content-main-table {
    width: 100%;
    background: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    position: relative;
}

.w_20 { flex-basis: 20px; flex-grow: 0; flex-shrink:0; }
.w_30 { flex-basis: 20px; flex-grow: 0; flex-shrink:0; }
.w_40 { flex-basis: 40px; flex-grow: 0; flex-shrink:0; position: relative; }
.w_50 { flex-basis: 50px; flex-grow: 0; flex-shrink:0; position: relative; }
.w_60 { flex-basis: 60px; flex-grow: 0; flex-shrink:0; }
.w_80 { flex-basis: 80px; flex-grow: 0; flex-shrink:0; }
.w_100 { flex-basis: 100px; flex-grow: 0; flex-shrink:0; }
.w_110 { flex-basis: 110px; flex-grow: 0; flex-shrink:0; border-left: 1px solid #ddd; border-right: 1px solid #ddd; position: fixed; background: #fff; right: 18px; }
.w_120 { flex-basis: 120px; flex-grow: 0; flex-shrink:0; }
.w_140 { flex-basis: 140px; flex-grow: 0; flex-shrink:0; }
.w_160 { flex-basis: 160px; flex-grow: 0; flex-shrink:0; }
.w_180 { flex-basis: 180px; width: 180px; flex-grow: 0; flex-shrink:0; }
.w_200 { flex-basis: 200px; flex-grow: 0; flex-shrink:0; }
.w_220 { flex-basis: 220px; flex-grow: 0; flex-shrink:0; }
.w_260 { flex-basis: 260px; flex-grow: 0; flex-shrink:0; }

.span-alert {
    background: #ff0000;
    color: #fff;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    font-size: 12px;
    position: absolute;
    left: 23px;
    top: 6px;
    border-radius: 100%;
}

#edit_lines {
    background: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    position: absolute;
    right: 18px;
    z-index: 999;
}
.edit {
    width: 110px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 44px;
    background: #f8f8f8;
}
.edit i {
    cursor: pointer;
}

#check_lines {
    background: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    position: absolute;
    left: 20px;
    z-index: 999;
}
.check-div {
    width: 50px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 44px;
    background: #f8f8f8;
}

.infos-dossier {
    float: left;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px 0px;
}

.infos-dossier .info {
    float: left;
    padding-left: 10px;
    padding-right: 15px;
    margin-right: 20px;
    border-right: 1px solid #ddd;
    font-size: 14px;
    text-transform: uppercase;
}

.infos-dossier strong {
    font-size: 15px;
}


.statuts-dossier {
    float: left;
    width: 100%;
    padding: 20px 0px;
}

.statuts-dossier .statut {
    float: left;
    padding-left: 10px;
    padding-right: 15px;
    font-size: 14px;
    text-transform: uppercase;
}

.statuts-dossier .rond {
    float: left;
    background: #fff;
    padding-left: 14px;
    padding-right: 14px;
    line-height: 37px;
    font-size: 19px;
    text-transform: uppercase;
    border: 1px solid #ddd;
    border-radius: 50%;
}

.statuts-dossier .libelle {
    float: left;
    line-height: 37px;
    margin-left: 10px;
}

.statuts-dossier .next {
    float: left;
    margin-left: 20px;
    margin-top: 7px;
    margin-right: 20px;
}


.tab {
    float: right;
    margin-left: 10px;
    background: #333;
    color: #fff;
    cursor: pointer;
    opacity: 0.9;
    line-height: 40px;
    font-weight: bold;
    font-size: 14px;
    padding: 0 10px;
    border-radius: 8px;
}

.tab:hover {
    opacity: 1;
}

.select_tab {
    opacity: 1;
    background: #27ae60;
}

.container-left {
    float: left;
    width: 67%;
}

.container-right {
    float: right;
    width: calc(33% - 10px);
}

.container-100 {
    float: left;
    width: 100%;
    margin-bottom: 5px;
}

.top-container {
    width: calc(100% - 30px);
    padding: 0 15px;
    background: #333;
    line-height: 40px;
    color: #fff;
    font-weight: bold;
}

.top-container i {
    float: right;
    cursor: pointer;
    opacity: .95;
    margin-top: 8px;
}

.top-container i:hover {
    opacity: 1;
}

.body-container {
    float: left;
    width: calc(100% - 0px);
    padding: 20px;
    background: #fff;
    font-size: 16px;
    color: #2C3E50;
    line-height: 35px;
    border-radius: 8px;
    border: 4px solid #fff;
}

.body-container .line {
    float: left;
    width: calc(100% - 0px);
}

.body-container .label {
    float: left;
    width: calc(40% - 10px);
    text-align: right;
}

.body-container .field {
    float: right;
    width: calc(60% - 0px);
}

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

.body-container .no {
    background: #e74c3c;
}

.body-container .yes {
    background: #27ae60;
}

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

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

.body-container .no .text {
   float: right;
    margin-right: 10px;
}

.body-container .yes .text {
   float: left;
    margin-left: 10px;
}

.body-container input {
    padding-left: 10px;
    height: 35px;
    font-size: 16px;
    width: calc(100% - 0px);
    border: 2px solid #e4e4e4;
    border-radius: 8px;
}

.body-container textarea {
    padding: 10px;
    height: 90px;
    line-height: 20px;
    font-size: 16px;
    width: calc(100% - 0px);
    border: 2px solid #e4e4e4;
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    
}

.body-container .input-list {
    padding-left: 10px;
    height: 40px;
    font-size: 16px;
    width: calc(100% - 0px);
    border: 2px solid #e4e4e4;
    border-radius: 8px;
}

.body-container .input-list-50 {
    float: left;
    margin-left: 20px;
    width: calc(50% - 0px);
}

.body-container .input-50 {
    float: left;
    margin-left: 20px;
    width: calc(50% - 0px);
}

.body-container .info-field {
    position: absolute;
    right: 0px;
    top: 24px;
    line-height: 35px;
    background: #ddd;
    color: #333;
    padding: 0 10px;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.body-container .edit-button { 
    line-height: 44px;
    font-size: 16px;
    font-weight: bold;
    background: #27ae60;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    width: calc(100% - 4px);
    text-align: center;
    margin-top: 10px;
    border: 2px solid #189b4f;
}

.body-container .edit-button:hover { 
    background: #189b4f;
}

.autocomplete-container {
  position: relative;
}

.suggestions {
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 999;
  width: calc(100% - 0px);
  max-height: 200px;
  overflow-y: auto;
  background-color: #f8f8f8;
  border: 2px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
    display: none;
}

.suggestion {
  padding: 12px 20px;
  margin: 0;
  cursor: pointer;
}

.suggestion:hover {
  background-color: #efefef;
}


.create-button {
    line-height: 44px;
    font-size: 16px;
    font-weight: bold;
    background: #27ae60;
    color: #fff;
    border-radius: 0px;
    cursor: pointer;
    width: calc(100% - 4px);
    text-align: center;
    border: 2px solid #189b4f;
}

.create-button:hover {
    background: #189b4f;
}

.body-container-lines {
    float: left;
    width: calc(100% - 2px);
    padding: 0px;
    background: #fff;
    border: 1px solid #ccc;
    border-top: 0;
    font-size: 16px;
    color: #444;
    line-height: 35px;
}

.body-container-lines .table-line {
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
}
.body-container-lines .table-cell {
    float: left;
    width: 150px;
    padding-right: 10px;
    line-height: 34px;
}
.pastille {
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 5px;
    background: #ccc;
    cursor: pointer;
    border-radius: 8px;
}
.pastille-0 {
    background: #ccc;
}
.pastille-1 {
    background: #27ae60;
}
.pastille-2 {
    background: #c0392b;
}

.body-container-lines .cell-80 {
    width: 80px;
}
.body-container-lines .cell-100 {
    width: 100px;
}
.body-container-lines .cell-250 {
    width: 250px;
}
.body-container-lines .cell-500 {
    width: 500px;
}
.body-container-lines .cell-actions {
    float: right;
    text-align: right;
}
.body-container-lines .cell-actions i {
    cursor: pointer;
}







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

.wrap-start {
    display: flex;
    justify-content: flex-start
}

.col-20 {
    width: calc(20% - 20px);
    flex-basis: calc(20% - 20px);
    position: relative;
}

.col-25 {
    width: calc(25% - 20px);
    flex-basis: calc(25% - 20px);
    position: relative;
}

.col-12 {
    width: calc(12.5% - 10px);
    flex-basis: calc(12.5% - 10px);
    position: relative;
}

.col-33 {
    width: calc(33% - 20px);
    flex-basis: calc(33% - 20px);
    position: relative;
}

.col-40 {
    width: calc(40% - 20px);
    flex-basis: calc(40% - 20px);
    position: relative;
}

.col-50 {
    width: calc(50% - 20px);
    flex-basis: calc(50% - 20px);
    position: relative;
}

.col-75 {
    width: calc(75% - 0px);
    flex-basis: calc(75% - 0px);
    position: relative;
}

.col-100 {
    width: calc(100% - 0px);
    flex-basis: calc(100% - 0px);
    position: relative;
}

.label-100 {
    font-size: 14px;
    font-weight: bold;
    color: #222;
    line-height: 24px;
}

.label-50 {
    float: left;
    width: 50%;
    font-size: 14px;
    font-weight: bold;
    color: #222;
    line-height: 24px;
}

.body-container .columns {
    float: left;
    width: calc(100% + 0px);
    padding: 10px;
    background: #666;
    color: #fff;
}

.body-container .columns-white {
    float: left;
    width: calc(100% + 0px);
    padding: 10px;
    background: #f7f7f7;
    color: #333;
    border-bottom: 1px solid #ddd;
}

.body-container .column {
    float: left;
    line-height: 1.5;
    padding-top: 6px;
    padding-bottom: 6px;
}

.body-container .line-comment {
    padding: 10px;
    border-bottom: 1px solid #333;
}

.body-container .create-photo {
    width:100%;
    background:#4d8bc2;
    line-height:40px; 
    padding-bottom: 6px; 
    text-align:center;
    font-size:18px;
    color:#fff;
    cursor:pointer
}

.body-container .delete-photo {
    width:100%;
    background:#e74c3c;
    line-height:40px; 
    padding-bottom: 6px; 
    text-align:center;
    font-size:18px;
    color:#fff;
    cursor:pointer;
    margin-bottom: 10px;
}



.status {
    color: white;
    padding: 5px;
    padding-right: 10px;
    border-radius: 6px; 
}
.status-history {
    color: white;
    padding: 5px;
    padding-right: 10px;
    border-radius: 6px; 
    float: left;
}
.status-reason {
    color: 333;
    padding: 5px;
    padding-right: 0px;
    float: right;
    font-size: 14px;
}
.status-date {
    color: 666;
    padding: 5px;
    padding-right: 0px;
    float: left;
    font-size: 14px;
}
.paid { 
    color: #fff;
    padding: 5px;
    padding-right: 5px;
	padding-left: 5px;
    border-radius: 6px;
	font-weight: 500;
    background: #9e9e9e8f;
}
.unpaid { 
    color: white;
    padding: 5px;
    padding-right: 10px;
    border-radius: 6px; 
    background: #ff9800;
}
.canceled { 
    background: #777 !important;
}
.error { 
    background: #666 !important;
}
.confirmed { 
    background: #3869b2 !important;
}
.preparation { 
    background: #00cb84 !important;
}
.expedition { 
    background: #01784e !important;
}
.annulation { 
    background: #ff9800 !important;
}
.refund { 
    background: #ff9800 !important;
}
.remboursement { 
    background: #ff9800 !important;
}
.chargeback { 
    background: #ff9800 !important;
}


.status i { 
    margin-top: -4px;
}
.status-history i { 
    margin-top: -4px;
}






.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% - 0px);
    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;
}




/* STATS */
.filter-stats {
    display: flex;
    justify-content: space-between;
}

.filter-stats .buttons {
    display: flex;
    justify-content: flex-start;
    column-gap: 14px;
}

.filter-stats .fields {
    display: flex;
    justify-content: flex-end;
    column-gap: 14px;
}

.div-statuts-stats {
    float: right;
}

.filter-stats .button {
    background: #333;
    color: #fff;
    cursor: pointer;
    opacity: 0.9;
    line-height: 40px;
    font-weight: bold;
    font-size: 14px;
    padding: 0 10px;
}

.filter-stats .button:hover {
    background: #111;
}

.filter-stats .input {
    padding-left: 15px;
    height: 38px;
    font-size: 16px;
    width: calc(100% - 19px);
    border: 2px solid #ddd;
    border-radius: 0px;
    margin-top: 0px;
}

.filter-stats .input-list {
    padding-left: 10px;
    height: 44px; 
    font-size: 16px;
    width: calc(100% - 0px);
    border: 2px solid #ddd;
    border-radius: 0px;
    margin-top: 0px;
}


.from {
    font-size: 12px;
    float: left;
    margin-bottom: 8px;
}

.delete_message {
    float: left;
    margin-left: 10px;
    line-height: 24px;
    padding: 7px 12px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background: #c0392b;
    border-radius: 8px;
}


.message_in {
    clear: both;
    background: #efefef;
    padding: 12px;
    border-radius: 8px;
    max-width: 80%;
    float: left;
}

.message_out {
    background: #2980b9;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    max-width: 80%;
    clear: both;
    float: right;
}

.message_statut {
    background: #27ae60;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    max-width: 80%;
    clear: both;
    float: left;
}

.statut-suivi {
    line-height: 24px;
    background: #efefef;
    border-radius: 8px;
    width: calc(100% - 80px);
    padding: 7px 12px;
    color: #222;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    float: left;
}

.statut-suivi span {
    font-size: 12px;
    font-weight: 600;
}



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

.input:focus{
    outline: none;
}
.input-list:focus{
    outline: none;
}

input[type="text"][disabled]{
   color: #333;
}

select[disabled] {
   color: #000;
}

/* 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% - 0px); 
    padding:0 10px; 
    line-height:35px; 
    border-radius:6px; 
    display:none; 
    margin-bottom:20px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


@keyframes ldio-8ofh4juowlf-1 {
  0% { top: 36px; height: 128px }
  50% { top: 60px; height: 80px }
  100% { top: 60px; height: 80px }
}
@keyframes ldio-8ofh4juowlf-2 {
  0% { top: 41.99999999999999px; height: 116.00000000000001px }
  50% { top: 60px; height: 80px }
  100% { top: 60px; height: 80px }
}
@keyframes ldio-8ofh4juowlf-3 {
  0% { top: 48px; height: 104px }
  50% { top: 60px; height: 80px }
  100% { top: 60px; height: 80px }
}
.ldio-8ofh4juowlf div { position: absolute; width: 30px }.ldio-8ofh4juowlf div:nth-child(1) {
  left: 35px;
  background: #004d7b;
  animation: ldio-8ofh4juowlf-1 1s cubic-bezier(0,0.5,0.5,1) infinite;
  animation-delay: -0.2s
}
.ldio-8ofh4juowlf div:nth-child(2) {
  left: 85px;
  background: #173964;
  animation: ldio-8ofh4juowlf-2 1s cubic-bezier(0,0.5,0.5,1) infinite;
  animation-delay: -0.1s
}
.ldio-8ofh4juowlf div:nth-child(3) {
  left: 135px;
  background: #00a9ae;
  animation: ldio-8ofh4juowlf-3 1s cubic-bezier(0,0.5,0.5,1) infinite;
  animation-delay: undefineds
}

.loadingio-spinner-pulse-b2l0renm68f {
  width: 200px;
  height: 200px;
  display: none;
  overflow: hidden;
  background: transparent;
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 999;
    transform: translateY(-50%), translateX(-50%);
}
.ldio-8ofh4juowlf {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-8ofh4juowlf div { box-sizing: content-box; }
/* generated by https://loading.io/ */