:root {
  --colorGreen: #02b07d;
	--colorOcean: #22a3a9;
  --colorBlue: #36a2eb;
	--colorPurple: #a379c5;
	--colorYellow: #e8ac33;
	--colorOrange: #fe6b38;
	--colorRed: #fe6b38;
  --colorParcus: #d31772;
}

html {height:100%;font-size: 16px;}
body {height:100%;font-family: Arial, Helvetica, sans-serif; color: #101010; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

a {text-decoration: none; color: #d31772; }
img {border: none;}

.bold {font-weight:bold;}
.italic {font-style: italic;}
.uppercase {text-transform: uppercase;}
.percent100 {width: 100%;}
.percent75 {width: 75%;}
.percent50 {width: 50%;}
.inline {display:inline-block; vertical-align: top;}

/****** HEADER ******/
div.header {position: relative; margin-bottom: 2rem;}
div.header img.logo {position: absolute; top: 0.7rem; right: 6rem; width:15vw;}
div.header div.top {height: 4rem; width: 100%; padding-left: 14rem; color: #d31772;  box-sizing:border-box;}
div.header div.top div.marque {font-family: serif; font-size: 2.5rem; padding-top: 3.2rem; letter-spacing: 0.2rem;}
div.header div.top div.marque_full {position: absolute; font-size: 1.5rem; top: 4.2rem; right: 5%; letter-spacing: 0.1rem;}
div.header div.top div.login_menu {position: absolute; font-size: 0.8rem; top: 0.5rem; right: 5%; color:#888; text-align: right;}
div.header div.menu {height: 2.5rem; width: 100%; padding-left: 14rem; background-color: #d31772; color: #fff; box-sizing:border-box;}
div.header div.menu ul {padding-top: 0.6rem; font-size: 1.2rem;}
div.header div.menu ul li {display: inline-block; text-transform: uppercase; padding: 0 2rem;}
div.header div.menu ul li a {color: #fff;}
div.header div.menu ul li a:hover {color: rgba(255,255,255,0.8);}

/****** SUBMENU ******/
.pageTitle {float: left; display: inline-block; background-color: #d31772; color: #fff;padding: 0.5rem 2rem; font-size: 1rem; text-transform: uppercase; margin-right: 5px;}
.pageTitleActive {background-color: #4ba728; }
a.pageTitle, a.pageSubTitle {cursor: pointer;}
.pageSubTitle {float: left; display: inline-block; background-color: #999; color: #fff;padding: 0.25rem 1rem; font-size: 1rem; text-transform: uppercase; margin-right: 5px; font-size: 0.9em;}
.pageSubTitleActive {background-color: #333; }
.statsYTable {display: none;}
div.submenu {float: right; display: inline-block;}
div.submenu li {display: inline-block; text-transform: uppercase; padding: 0 1rem;}
div.submenu li a, input.btn-default {padding: 0.4rem 2rem; background-color: #d31772; color: #fff; font-size: 0.8rem; border-radius: 0.4rem; border: none;}
div.submenu li a:hover, input.btn-default:hover {background-color: rgba(154,195,25,0.8)}

/******* TOP MENU ****/
div.topmenu {width: 100%; padding-left: 14rem; padding-top:0.5em; box-sizing:border-box;}
div.topmenu ul li {display: inline-block; padding: 0 1rem; border-right: 1px solid #CCC;}
div.topmenu ul li a {color:#666;}

/****** CONTENT ******/
div.content {width: 80%; padding: 0 10%;}
table.tableAbos {border-spacing: 0px; border-collapse: separate; margin: 0rem 0 1rem 0; border-top: 1px solid #999; border-left: 1px solid #999;}
table.tableAbos th {padding: 0.5rem 1rem; background-color: var(--colorGreen); font-weight: bold; font-size: 0.9rem; color: #555; border-right: 1px solid #999; border-bottom: 1px solid #999; padding: 0.5rem 0.7rem; color: #fff; text-transform:uppercase; text-shadow: 1px 1px 4px rgb(0 0 0 / 30%); }
table.tableAbos td {padding: 0.25rem 1rem; border-right: 1px solid #999; border-bottom: 1px solid #999; font-size: 0.9rem;}
table.tableAbos a.tablelink {color: #4A4A4A; font-weight: bold;}
.tableAbos {border-top: 1px solid #fff; border-left: 1px solid #fff;}
.tableAbos th {font-size: 0.9em;}
.tableAbos td {font-size: 0.75em;}

div.formTable table {width: 20rem; padding-top: 0;}
div.formTable table td:first-child {font-size: 0.9rem;}
div.formTable table td {background-color: #fafafa;}
div.formTable table input, table#client textarea {color: #777;}
div.formTable div.formTitle {width: 20rem; background-color: #d31772; color: #fff; padding: 0.5rem 1rem; box-sizing:border-box;}
div.totalSum {color: #d31772; font-weight: bold;}

span.dotRed {height: 0.75em; width: 0.75em; background-color:red; border-radius: 50%; display: inline-block;}
span.dotOrange {height: 0.75em; width: 0.75em; background-color:orange; border-radius: 50%; display: inline-block;}
span.dotGreen {height: 0.75em; width: 0.75em; background-color:green; border-radius: 50%; display: inline-block;}

a.hrefDesignControls, div.designFormSave button {border-radius: 1em; border: 1px solid #d31772; padding: 0.4em 1em 0.3em 1em; font-weight: bold; background-color: white;}
a.hrefDesignControls:hover, div.designFormSave button:hover {background-color: #d31772; color: #fff; border: 1px solid #fff;}

/****** Dashboard ******/
.dashboardHeader {background-color: #d31772; color: #fff; padding: 0.5em 2em; width: 100%; box-sizing: border-box; margin-bottom: 0.2em;}
.dashboardMenu {width: 100%; text-align: right; margin-bottom: 0.75em;}
.dashboardInfosParking {background-color: #d31772; color: #fff; padding: 1em 2em; width: 100%; margin-top: 0.5em; box-sizing: border-box; margin-bottom: 0.5em;}
.indicateur {border-radius: 3px; margin-top: 0.5em; border: solid 1px;}
.indicateurHeader {color: #fff; padding: 0.5em 2em; box-sizing: border-box;}
.indicateurTitle {text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); text-transform: uppercase; width:72%; font-size:1em; font-weight: bold; box-sizing: border-box; vertical-align: middle; text-align: right;}
.indicateurSubTitle .indicateurTitleValue {background-color: rgba(0,0,0,0.2); color: #fff; padding: 0.25em 0.75em 0.2em 0.75em; font-weight: bold; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); font-weight: 1.25em;}
.indicateurSubTitle span {color: var(--colorOcean); padding: 0.35em 0em 0.2em 0.75em; font-weight: 300; text-transform: uppercase; font-size: 0.9em; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);}
.indicateurIcon {width:25%; text-align: center;}
.indicateurTitleValue {background-color: rgba(0,0,0,0.2); padding: 0.1em 2em; margin-top: 0.2em;}
.indicateurContent {text-align: left; padding: 0.5em 2em; box-sizing: border-box; width: 100%; font-size: 0.8em; color: rgba(0,0,0,0.9); display: flex;}
.indicateurContentVariation {line-height: 1.5em; font-size: 0.95em; margin-top: 0.5em;}
.indicateurContentValues {text-align: right; flex-grow: 1;}
.indicateurContentValue {font-weight: normal; font-size: 1em; background-color: rgba(0,0,0,0.05); padding: 0.2em 0.75em 0.2em 0.75em; margin-top: 1px;}
.indicateurContenDate {text-transform: lowercase; font-size: 0.9em; color: rgba(0,0,0,0.75); margin-top:0.5em; margin-left: 1em;}

.indicateurIncrease {color: green;}
.indicateurDecrease {color: red}

.indicRotation {border-color: var(--colorOcean);}
.indicRotation .indicateurHeader {background-color: var(--colorOcean);}
.indicOccupation {border-color: var(--colorBlue);}
.indicOccupation .indicateurHeader {background-color: var(--colorBlue);}
.indicDuree {border-color: var(--colorPurple);}
.indicDuree .indicateurHeader {background-color: var(--colorPurple);}
.indicTicket {border-color: var(--colorYellow);}
.indicTicket .indicateurHeader, .indicTicket th, .indicTicket td.tableTotal {background-color: var(--colorYellow);}
.indicCaPlace {border-color: var(--colorOrange);}
.indicCaPlace .indicateurHeader {background-color: var(--colorOrange);}
.indicFRQ, .indicFRQCA {border-color: var(--colorOcean);}
.indicFRQ .indicateurHeader, .indicFRQCA .indicateurHeader, .indicFRQ th, .indicFRQ td.tableTotal {background-color: var(--colorOcean);}
.indicFRQA, .indicFRQACA {border-color: var(--colorGreen);}
.indicFRQA .indicateurHeader, .indicFRQACA .indicateurHeader, .indicFRQA th, .indicFRQA td.tableTotal {background-color: var(--colorGreen);}
.boxTitle {background-color: rgba(54, 162, 235, 1); padding: 0.7em; width: 100%; color: #fff; text-align:center; letter-spacing: 0.05em;}
.page {width: 100%; box-sizing: border-box; height:100%;}
/*.divGraphOcc {height: 20vh; margin: 1em 0; width: 100%; }
.divGraphFrQ {height: 19.7vh;}
.divGraphSam {height: 15vh;}
.divGraphEvo {height: 21.3vh; margin: 0.5em 0;}
/*.divGraph {transform: scale(1);}*/
#frqH, #frqA, #caA {margin-top:-2em;}
.aHref {color: var(--colorParcus); padding: 0.25em 1em; border: 1px solid var(--colorParcus); display: inline-block; margin: 0 0.25em;}
.dashboardFooterPrint {display: none; width: 100%; color: #fff; background-color: var(--colorParcus); font-weight: bold; padding: 0.25em 1em; font-size: 0.8em; position: absolute; bottom: 0cm; box-sizing: border-box;}

/**** Dashoboard global ***/
.indicateur table {width:100%;}
.indicateur th, td.tableTotal {color: #fff; font-size: 1.05em; padding: 0.15em 0;}
/*td.tableTotal {background-color: #888;}*/
.indicateur td.tableCurrentYear {background-color: #EEE; font-weight:bold;}
.indicateur td {padding: 0.1em 1em; letter-spacing: 0; text-align: center; font-size: 0.9em; border-bottom: 1px solid #CCC; white-space: nowrap;}
.indicateur td.tableVariations {font-size: 0.7em; padding: 0.1em 0.5em;}
.indicateur td.tableTotal {font-size: 1.05em;}
.indicateur td.tableSubTotal {font-size: 0.9em; color: #fff; opacity: 0.7}
.tdDecrease {background-color: red; color: white;}
.tdIncrease {background-color: green; color: white;}
.dashboardGlobal .indicateur {width:64%; margin-bottom: 1.5em;}


div#tabulator-controls {background-color: #DDD; padding: 0.7em 1em; margin-bottom: 0.3em; font-size: 0.8em; color: #666;}
.table-controls input, .table-controls select {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 0.5em;
    border: 1px solid #d31772;
    background: #fafafa;
    outline: none;
		max-width: 10em;
}

tr.statsTableCat td {background-color:#999; color:#fff; font-weight:bold;}
tr.statsTableSubcat td {background-color:#333; color:#fff; font-weight:bold; text-transform: uppercase;}

.table-controls button {background-color: #d31772; padding: 0.35em 1em; color: #fff; border: none; cursor: pointer;}
.table-controls span {color: #ccc; padding: 0 2em;}

.tabulator a {color: #444; font-weight: bold;}

div#fos_user_profile_form div, div#fos_user_change_password_form div {margin: 0.4rem 0;}
div#fos_user_profile_form label, div#fos_user_change_password_form label {margin-right: 0.8rem;}
div.marchandise_new_type {font-size: 0.9em; background-color:#CCC; font-weight:bold; padding: 0.35rem 1rem; border: 1px solid #999; border-right: none;}
div.marchandise_new_table table {margin: 0;}
.boutton {padding: 0.4rem 2rem; background-color: #d31772; color: #fff; font-size: 0.8rem; border-radius: 0.4rem; border: none;}

table#form {border: none; margin: 0;}
table#form td {border: none;}
#form button {background-color: #d31772; color: #fff; padding: 0.25em 1em; border: 1px solid #fff; font-weight: bold;}
.formOptionParking {text-transform: capitalize;}

#form_parking {padding: 0.2em 0; }

@media (max-width: 1600px) {
  html {font-size: 15px;}
  .indicateurHeader {padding: 0.5em 1em;}
}

@media (max-width: 1369px) {
  html {font-size: 14px;}
  /*.divGraphOcc {height: 5cm;  }*/
  /*.divGraphOcc {transform: scale(0.70); transform-origin: left; padding-left: 3%;}*/
  /*.divGraphOcc {transform: scale(0.70); transform-origin: left; padding-left: 3%;}*/
  /*.divGraphOcc {height: 25vh; margin: 1em 0; width: 100%; }*/
  /*.divGraphFrQ {height: 24.7vh;}
  .divGraphSam {height: 20vh;}
  .divGraphEvo {height: 26.3vh; margin: 0.5em 0;}*/
}

@media (max-width: 1300px) {
  html {font-size: 14px;}
}