html {
    height: 100%;
    font-size: calc(1em * .625);
}

body {
    background-color: #efefef;
    font-family: "Source Sans Pro", Arial, Tahoma, Verdana, Helvetica, sans-serif;
    font-size: 1.5rem;
    color: #808080;
    width: 100%;
}

h1 {
    font-weight: bold;
    font-size: 1.8rem;
    color: #202b30;
}

h2 {
    font-weight: normal;
    font-size: 2.2rem;
    text-transform: uppercase;
    color: #3f404c;
}

h3 {
    font-weight: bold;
    color: #3f404c;
    padding-bottom: 1rem;
}

a {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.btn,
.ui-dialog .ui-dialog-buttonpane button {
    cursor: pointer;
    color: #202b30;
    background-color: #b3d143;
    padding: .65em 1.6em;
    margin: .3em 0;
    display: inline-block;
    border-radius: 4px;
    border: 0;
    font-family: inherit;
}

.btn:hover,
.blocBtn:hover {
    background-color: #a4c42f;
}

.blocBtn {
    cursor: pointer;
    color: #202b30;
    background-color: #b3d143;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
}

button {
    cursor: pointer;
    border: 0;
    padding: 0.4rem 1.5rem;
}

/* Layout, header, container - mobile first */

.logo {
    z-index: 3;
    height: 5rem;
    background-color: #202b30;
    margin-left: 5rem;
    display: flex;
    align-items: center;
    color: #ffffff;
    font-weight: bold;
}

.menuBurger {
    z-index: 4;
    position: fixed;
    top: 0;
    left: 0;
    width: 5rem;
    height: 5rem;
    background: #202b30;
}

.menuBurger > i {
    display: inline-block;
    color: #b3d143;
}

.menuBurger > i::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.svg-icon-menu {
    margin: 1.3rem;
}

.svg-icon-menu path,
.svg-icon-menu polygon,
.svg-icon-menu rect {
    fill: #AEB7C2;
}

.svg-icon-menu circle {
    stroke: #AEB7C2;
    stroke-width: 1;
}

.menuSidebar {
    z-index: 3;
    position: fixed;
    top: 0;
    left: -26rem;
    overflow-x: hidden;
    width: 26rem;
    height: 100%;
    background: #29353a;
    color: #ffffff;
    transition: all .3s ease-in;
}

.menuSidebar:hover,
.menuSidebar:focus,
.menuBurger:focus + .menuSidebar,
.menuBurger:hover + .menuSidebar {
    left: 0;
}

.menuSidebar ul {
    position: absolute;
    top: 5em;
}

.menuSidebar ul li {
    width: 26rem;
}

.niv1 a {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 5rem;
}

.niv1:hover {
    color: #AEB7C2;
}

.niv1 a.active {
    color: #b3d143;
}

.niv1 a.active svg path,
.niv1 a.active svg polygon,
.niv1 a.active svg rect {
    fill: #b3d143;
}

.niv1 a.active svg circle {
    stroke: #b3d143;
    stroke-width: 1;
}

.niv1 i {
    position: absolute;
    width: 5rem;
    height: 5rem;
}

.niv1 i::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.niv1 em {
    position: absolute;
    top: 50%;
    left: 5rem;
    transform: translateY(-50%);
}

.content {
    position: relative;
}

.header {
    z-index: 2;
    position: sticky;
    top: 0;
    height: 5rem;
    margin-left: 5rem;
    padding: 0 1rem 0 2rem;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pageContainer {
    margin: 3rem 2rem;
}

/* Tablette */

@media (min-width: 42em) {

    .menuSidebar {
        width: 5rem;
        left: 0;
    }

    .menuSidebar:hover,
    .menuSidebar:focus,
    .menuBurger:hover + .menuSidebar,
    .menuBurger:focus + .menuSidebar {
        width: 26rem;
    }

    .content {
        padding-left: 5rem;
    }

    .header {
        margin-left: 0;
    }

}

/* Desktop */

@media (min-width: 68rem) {

    .logo {
        margin: 0;
        padding-left: 1.7rem;
    }

    .menuBurger {
        display: none;
    }

    .menuSidebar {
        width: 26rem;
    }

    .content {
        padding-left: 26rem;
    }

    .header {
        padding: 0 4rem;
    }

    .pageContainer {
        margin: 4rem 4rem 1rem;
    }

}

/* Table */

table.dataTable {
    border-collapse: collapse;
}

table.dataTable thead th,
table.dataTable thead td {
    text-align: left;
    color: #B0B0B2;
    font-weight: normal;
    background-color: #fff;
    font-size: 1.8rem;
    border-bottom: 1px solid #e5e5e5;
    padding: 1.3rem 1.8rem;
}

table.dataTable tbody tr:hover,
table.dataTable tbody td:hover {
    background-color: #f5f5f5;
    cursor: pointer;
    color: #666666;
}

table.dataTable tbody tr,
table.dataTable tbody td {
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
    padding: 0;
}

table.dataTable tbody a{
    display: block;
    padding: 1.5rem 1.8rem;
}

/* Barre de recherche, boutons au-dessus des table */

.tableTool {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 2rem;
}

.tableToolSearch {
    padding: .75em .75em .75em 3em;
    width: 27rem;
    margin-right: 1.2rem;
    background-image: url('/images/search.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

.tableToolSearch:focus {
    width: 35rem;
}

.tableToolBtn {
    display: flex;
    flex-wrap: wrap;
}

.tableToolBtn > div {
    margin-right: 0.6rem;
}


.tableToolBtn div:last-child {
    margin: 0;
}

/* Form */

.element {
    margin: 0.8rem 0 2rem;
}

.elementCourt input {
    max-width: 10rem;
}

input,
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    margin: 8px 0;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus,
textarea:focus {
    border: 1px solid #3474C1;
}

.ui-autocomplete{
    border: 1px solid red;
}

textarea {
    resize: none;
    height: 20rem;
}

input[type=submit], .btn.archiver {
    cursor: pointer;
    color: #fff;
    padding: .65em 1.6em;
    margin: .6em 0;
    text-decoration: none;
    display: inline-block;
    font-weight: 400;
    background: #3474C1;
    border-radius: 4px;
    width: inherit;
    font-weight: bold;
    border: 0;
    font: 400 13.3333px Arial;
}
.btn.archiver {
	background: #C13A34;
}

input[type=file] {
    padding: 12px 0;
    border: 0;
}

input[type=submit]:hover {
    background-color: #2e66ab;
}

::placeholder {
    color: #B0B0B2;
}

.switch input:checked + label::before{
    background-color: #b3d143;
}

.errors {
    font-size: 1.2rem;
    color: #D24343;
    margin-bottom: 2rem;
}

.error {
    border: 1px solid #df7b7b;
}

/* Bloc de contenu par 2 ou 3 */

.containerBloc {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: -2rem;
}

.blocFlex1,
.blocFlex2,
.blocFlex2Bornes {
    margin: 2rem;
    min-width: 25rem;
}

.blocFlex1 {
    flex: 1;
    background-color: #fff;
}

.blocFlex2 {
    flex: 2;
    background-color: #fff;
}

.blocFlex2Bornes {
    flex: 2;
    margin-bottom: 1rem;
}

.title {
    background-color: #efefef;
    padding-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
}

.bloc,
.blocBornesList {
    padding: 2rem 2.5rem;
}

.blocBornesList {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: #fff;
    margin-bottom: 1rem;
}

.bornesId {
    border-right: 2px solid #dedede;
    padding-right: 4rem;
    margin-right: 4rem;
    padding-bottom: 2rem;
    flex: 1;
}

.bornesEntreprise {
    flex: 3;
}

/* Tab navigation*/

.tab-nav {
    border-bottom: 1px solid #c9c9c9;
    margin-bottom: 4rem;
}

.tab-nav a {
    display: inline-block;
    color: #a1a1a1;
    text-align: center;
    padding: 14px;
    font-size: 1.7rem;
    font-weight: bold;
    transition: 0.3s;
    border-bottom: 4px solid transparent;
}

.tab-nav a:hover {
    color: #2E2E2E;
}

.tab-nav a.active {
    color: #2E2E2E;
    border-bottom: 4px solid #2E2E2E;
}

/* Modal Content */

.ui-widget {
    font-family: inherit;
}

.ui-widget-overlay {
    background: #000000;
    opacity: 0.6;
}

.ui-dialog-titlebar,
.ui-dialog-buttonpane {
    border: 0;
}

.ui-dialog .ui-dialog-titlebar {
    background-color: #ffffff;
    padding: 1.8rem 2rem;
    font-size: 1.8rem;
}

.ui-dialog .ui-dialog-content {
    background-color: #efefef;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/*Form - Segmented Control sur btn radio*/

.segmented-control {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
}

.segmented-control > label {
    width: 100%;
    margin-bottom: 8px;
}

.segmented-control input {
    display: none;
}

.segmented-control div > label {
    display: block;
    margin: 0 -1px -1px 0;
    /* -1px margin removes double-thickness borders between items */
    padding: 1em .6em;
    border: 1px solid #ccc;
    text-align: center;
    cursor: pointer;
}

.segmented-control div > label:hover {
    color: #202b30;
}

.segmented-control div > input:checked + label {
    background: #516872;
    color: #ffffff;
}

/*Bornes edit - liste entreprises associées*/

#listeEntreprisesAssociees {
    margin-top: 2rem;
}

#listeEntreprisesAssociees li {
    padding: 1rem 0;
    border-bottom: 1px solid #dedede;
    display: flex;
    justify-content: space-between;
}

.deleteEntreprise {
    cursor: pointer;
}

.deleteEntreprise:hover {
    color: #202b30;
}

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

/*Dashboard home*/

.dashboard {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 -1rem;
}

.dashboardEncart {
    background-color: #ffffff;
    padding: 2rem 1.5rem;
    flex: 1;
    margin: 1rem 0.5rem;
    border: 1px solid #e5e5e5;
    min-width: 170px;
    text-align: center;
}

.dashboardEncart:hover {
    border-bottom: 1px solid #b3d143;
}

.dashboardIcon{
    margin-bottom: 1rem;
}

.dashboardEncart > h2 {
    margin: 1.8rem 0 0.5rem 0;
    font-size: 1.8rem;
    color: #202b30;
    text-transform: inherit;
    font-weight: normal;
}

.dashboardNb {
    font-size: 2.8rem;
    font-weight: bold;
    color: #202b30;
}

.dashboardIcon > svg {
    width: 4rem;
    height: 4rem;
    background-color: #b3d143;
    border-radius: 50%;
    padding: 1.5rem;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
    fill: #ffffff;
}

.svg-icon circle {
    stroke: #ffffff;
    stroke-width: 1;
}

/*Entreprise edit - Contact*/

.contact{
    padding-bottom: 1.8rem;
    border-bottom: 1px solid #dedede;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
}

.contactNom{
    font-weight: bold;
    padding-bottom: 0.5rem;
    color: #202b30;
}

.contactFonction{
    padding-bottom: 1.5rem;
}

.listPuce{
    background-image: url('/images/puce.png');
    background-position: 10px 4px;
    background-repeat: no-repeat;
    padding-left: 2.8rem;
    padding-bottom: 1rem;
}

.contactEmail a{
    text-decoration: underline;
}

.contactEmail a:hover{
    text-decoration: none;
}

.blocBtnRond{
    border-radius:50%;
    background-color: #ffffff;
    border: 1px solid #ccc;
    width: 4rem;
    height: 4rem;
    background-image: url('/images/edit.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.blocBtnRond:hover{
    background-color: #E4E4E4;
    border: 1px solid #E4E4E4;
}