.bordel {
    text-align: center;
}

body {
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 10px;
    padding-right: 10px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

#reset-button.datetime-reset-button {
    display:none;
}

.navbar-brand {
    padding: 9px;
}

h2 {
    color: rgb(240,59,94);
    font-size: 50px;
}

h3 {
    margin-top: 10px;
}

h4 {
    margin-top: 20px;
}



.navbar {
    margin-bottom: 0px;
    background-color: #f7f7f7;
}

a {
    color: #f3385b;
}

    a:hover {
        color: #f3748c;
    }

.navbar a {
    color: black;
}

.btn, .btn-default {
    border-radius: 0px;
    border-color: #f3385b;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    color: #fff;
    border-color: #f3385b;
    background-color: #d53150;
}

.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    color: #333;
    background-color: #f3dce0;
    border-color: #f3385b;
}

.btn-primary {
    border-color: #d53150;
    background-color: #f3385b;
}

.btnTerre.active, .btnTerre:active, .open > .dropdown-toggle.btn-primary {
    background-color: transparent !important;
    color: #f03b5e;
    border-color: white;
    background-image: url(../img/earth.png) !important;
    background-repeat: no-repeat;
}

.btnTerre:hover {
    background-color: #F9F9F9 !important;
    color: #f03b5e;
    border-color: white;
    background-image: url(../img/earth.png);
    background-repeat: no-repeat;
}

/* Datatables buttons */
.dt-buttons {
    float: left;
}

.customBtn {
    margin-right: 10px;
    border-radius: 4px !important;
}

    .customBtn span::before {
        font-family: "Glyphicons Halflings";
        margin-right: 10px;
    }

.buttons-users span::before {
    content: "\e008";
}

.buttons-create span::before {    
    content: "\002b";
}

.buttons-remove-selection span::before {
    content: "\e020";
}

.buttons-remove span::before {
    content: "\e020";
}

.buttons-analytics span::before {
    content: "\e003";
}

.buttons-userdevice span::before {
    content: "\e185";
}

.buttons-excel span::before {
    content: "\e166";
}

.buttons-insights span::before {
    content: "\e185";
}

.buttons-activation-code span::before {
    content: "\e039";
}

.buttons-edit span::before {
    content: "\270f";
}

.buttons-tags span::before {
    content: "\e041";
}

.buttons-souvenir span::before {
    content: "\2601";
}

.buttons-add {
    margin-right: 10px;
    border-radius: 4px !important;
}

.buttons-add span::before {
    font-family: "Glyphicons Halflings";
    content: "\002b";
}

.buttons-lock span::before {
    font-family: "Glyphicons Halflings";
    content: "\e033";
}

.buttons-insight-dashboard span::before {
    content: "\e141";
}

.button-ok span::before {
    content: "\e084";
    margin-right: 0px;
}

.button-spin span::before {
    content: "\e031";
    margin-right: 0px;
}

.button-dropdown-host {
    padding-top: 8px;
}

.button-dropdown {
    border-color: transparent;
}

div.dt-button-collection {
    width: 350px;
}

.btn-group {
    margin-bottom: 15px;
}

.reduce-tags {
    min-width: 200px;
}

.single-tag {
    word-wrap: break-word;
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em;
}

.columnlabel {
    float: left;
    vertical-align: auto;
    padding: 6px 6px
}

.table-columns-container {
    width: 100%;
    height: 36px;
}

.table-columns-xsmall > span {
    text-overflow: ellipsis;
    max-width: 50px;
    overflow: hidden;
    display: block;
    white-space: nowrap;
}

.table-column-small > span {
    text-overflow: ellipsis;
    max-width: 100px;
    overflow: hidden;
    display: block;
    white-space: nowrap;
}

.table-column-medium > span {
    text-overflow: ellipsis;
    max-width: 150px;
    overflow: hidden;
    display: block;
    white-space: nowrap;
}

.table-column-large > span {
    text-overflow: ellipsis;
    max-width: 200px;
    overflow: hidden;
    display: block;
    white-space: nowrap;
}

.table-column-xl > span {
    text-overflow: ellipsis;
    max-width: 300px;
    overflow: hidden;
    display: block;
    white-space: nowrap;
}

#ck-button {
    margin-left: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid transparent;
    border-color: #f3385b;
    float: left;
}

#ck-button label {
    margin-bottom: 0px;
}

#ck-button label span {
    text-align: center;
    padding: 6px 12px;
    display: block;
    border-radius: 4px;
}

#ck-button input {
    display: none;
}

#ck-button input:checked + span {
    background-color: #f3dce0;
}

#checkboxContainer {
    height: 200px;
    overflow: scroll;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

#checkboxContainer input[type="checkbox"] {
    margin-right: 5px;
}

#checkboxContainer > div {
    flex: 1 1 45%;
    box-sizing: border-box;
    margin: 5px;
}

div.dom_wrapper {
    position: sticky; /* Fix to the top */
    top: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 1); /* hide the scrolling table */
    width: 100%;
    height: 30px;
}

.dateTimePicker {
    z-index:4;
}
/*=======================*/
.btnTerre:hover {
    background-color: #F9F9F9 !important;
    color: #f03b5e;
    border-color: white;
    background-image: url(../img/earth.png);
    background-repeat: no-repeat;
}

/*.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open > .btnTerre.btn-primary {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}*/

.btn.focus, .btn:focus, .btn:hover {
    color: #333;
    text-decoration: none;
}

.btn-primary {
    background-color: #f03b5e;
    border-color: white;
}

.btnTerre {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #f03b5e;
    border-color: #f03b5e;
    background-image: url(../img/earth.png);
    background-repeat: no-repeat;
    background-size: 22px 22px;
    background-position: center;
    height: 50px;
    width: 100%;
    margin: 0px 10px;
}

@media screen and (max-width: 760px) {
    .dropdown-toggle {
        margin: 0 auto;
    }
}

footer {
    padding: 25px 50px 25px 50px;
    /*background-color: rgba(196, 196, 196, 0.4);*/
    text-align: center;
    width: 100% !important;
}

#footerContent {
}

.logoExcense {
    padding-bottom: 15px;
}


.site-jumbotron {
    margin-top: 50px;
    margin-bottom: 0px;
}

/*=============================
==========PAGE INSTALL=========
==============================*/
.titleInstallPage {
    margin-top: 30px;
    margin-bottom: 40px;
}

.divInstallPageBody a {
    color: black;
    text-decoration: none;
}

.divInstallPageBody {
    margin-bottom: 40px;
    margin-top: 20px;
    height: auto;
    padding-left: 0px;
    max-width: 370px;
}

.boxUX, .boxV4 {
    border: 1px solid #ebebeb;
    padding: 26px;
    border-radius: 4px;
    box-shadow: rgba(0,0,0,0.05) 2px 2px 6px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.025) 100%);
    max-width: 360px;
}

.boxUX {
    margin-bottom: 20px;
}

.imgLogoCD {
    height: 30px;
    margin-right: 10px;
    margin-top: -5px;
    margin-bottom: 5px;
}

.h3InstallPageUX, .h3InstallPageV4 {
    font-size: 25px;
    margin-top: 0px;
    margin-bottom: 2px;
}

.h3InstallPageUX {
    color: #0799C4;
}

.h3InstallPageV4 {
    color: #d53150;
}

/*.h4InstallPage {
    margin-bottom: 20px;
    margin-top: 0px;
    font-size: 13px;
    color: #808080;
    margin-left: 50px;
}*/

.pOSInstallPage {
    font-size: 14px;
    font-weight: bold;
    margin-left: 1px;
}

.pOSV4 {
    margin-top: 50px;
}


.pDeviceInstallPage, .pStyletInstallPage {
    font-size: 13px;
    margin-left: 10px;
    margin-bottom: 0px !important;
}

.pStyletInstallPage {
    margin-bottom: 30px;
}
/*.divbtnInstall {
    margin-left:-23px;
    display: flex;
    justify-content: space-around;
}*/

/*.divpInstallPageUX {
    margin-top: 16px;
}*/

/*.btnMicrosoftStore {
    height: 50px;
    width: auto;
    margin-left: -30px;
}*/

/*.spanBtnInstall {
    font-size: 16px;
    font-size: smaller;
}*/


.checkIconInstallPageUX, .checkIconInstallPageV4 {
    margin-right: 10px;
    font-weight: bold;
}

.checkIconInstallPageUX {
    color: #0799C4;
}

.checkIconInstallPageV4 {
    color: #d53150;
    margin-left: 1px;
}

.btnCDV4 {
    width: 200px;
    text-align: left;
}

    .btnCDV4 p {
        margin: 0px;
    }

    .btnCDV4:visited {
        color: white;
    }

.boxUX:hover, .boxV4:hover {
    /*box-shadow: rgba(0,0,0,0.05) -13px 7px 16px;*/
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.08) 100%);
}


@media(max-width:650px) {
    * {
        padding: 0px;
    }

    .divInstallPageBody {
        height: auto;
        margin: 0 auto;
        max-width: 350px;
    }
    /*.divbtnInstall {
        margin-top: 20px;
        display: block;
        margin-left: 0px
    }*/

    /*.btnMicrosoftStore {
        height: 50px;
        width: auto;
        margin-left: 30px;
        margin-top:10px;
    }*/
    .boxUX, .boxV4 {
        min-width: 300px;
        margin-bottom: 30px;
        display: block;
    }

    .h3InstallPageV4, .h3InstallPageUX {
        font-size: 18px;
    }
}

/*=============================
=======FIN PAGE INSTALL========
==============================*/

/*=============================
=========PAGE TARIFS===========
==============================*/
/*=================barre selection======================*/
select {
    background-color: white;
    border: thin solid blue;
    border-radius: 4px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;
    /* reset */
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*-webkit-appearance: none;*/
    -moz-appearance: none;
}

    select:disabled {
        cursor: not-allowed;
        background: darkgrey;
    }

    select.btnUserOrDevice {
        padding: 5px 10px;
        margin-top: 10px;
        background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
        background-position: calc(100% - 20px) calc(1em + 0px), calc(100% - 15px) calc(1em + 0px), calc(100% - 2.2em) 0em;
        background-size: 5px 5px, 5px 5px, 1px 2.5em;
        background-repeat: no-repeat;
        border-color: #ebebeb;
        border-radius: 5px;
        width: 100%;
        text-align: center !important;
    }

        select.btnUserOrDevice:hover {
            background-color: white !important;
            border-color: slategrey;
        }

        select.btnUserOrDevice:focus {
            background-color: white !important;
            border-color: #ebebeb;
            background-size: 5px 5px, 5px 5px, 1px 2.5em;
            background-repeat: no-repeat;
            outline: 0;
        }

    select option {
        text-align: center !important;
    }

/*=================barre selection======================*/


.titleSection {
    color: #f3385b;
    margin-bottom: 25px;
    font-variant: small-caps;
    margin-left: 5px;
}

.titleGroup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.testing {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.testing2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.offers {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-left: -10px;
    margin-bottom: 20px;
    margin-top: -20px;
}

#img1 {
    height: 70px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-right: 20px;
    margin-left: 10px;
    margin-top: -10px;
}

#img2 {
    height: 70px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-right: 20px;
    margin-left: 10px;
    margin-top: -10px;
}

.testsub {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
    margin-top: 70px;
    margin-left: -40px;
}

.sub-box {
    text-align: center;
    display: block;
    padding: 20px 28px;
    min-width: 305px;
    max-width: 310px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    box-shadow: rgba(0,0,0,0.05) 2px 2px 6px;
    background: #FFF0F5;
}

.description {
    font-style: italic;
}

.consult {
    font-size: 15px;
    color: rgb(240,59,94);
    white-space: nowrap;
}

.box {
    height: 270px;
    max-height: 270px;
    border: 1px solid #ebebeb;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: rgba(0,0,0,0.05) 2px 2px 6px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.025) 100%);
    margin-top: 20px;
}

.offers .sub-box {
    margin-left: 10px;
    margin-right: 50px;
    margin-top: 10px;
}

.offers .box {
    margin-left: 10px;
    margin-right: 50px;
    margin-top: 10px;
}

.box span {
    display: block;
}

.offer {
    flex-grow: 1;
    flex: 1;
    /*display: inline-grid;
    grid-template-columns: minmax(100px,250px);*/
    min-width: 305px;
    max-width: 310px;
}


    .offer span {
        text-align: center;
        display: block;
    }

.box-title {
    font-weight: bold;
    font-size: 24px;
    white-space: nowrap;
}

.nbUsersStartup {
    margin: -5px;
    padding: 5px;
}

.price {
    font-size: 24px;
    color: rgb(240,59,94);
    white-space: nowrap;
    margin-bottom: 10px;
    margin-top: -15px;
    text-align: center;
}

.byMonthAndUser {
    font-size: 15px;
    margin-top: -10px;
}

.beginingPrice {
    font-size: 18px;
    color: black;
}

.nb-users {
    font-size: 14px;
    margin-bottom: 16px;
    white-space: nowrap;
    font-style: oblique;
}

.descriptionList {
    margin: 0 auto;
}

.offer .offer-description {
    text-align: right;
}

.offer-description {
    margin-top: 2px;
    color: #808080;
    display: inline-flex !important;
}

#setup-price {
    float: right;
    margin-right: 10px;
    margin-left: 10px;
}

#setup-details-button {
    border: none;
    background: none;
    padding: 10px;
    margin: -10px;
    color: #5f5f5f;
}

#setup-details {
    color: #5f5f5f;
    margin-top: 6px;
}

    #setup-details ul {
        margin-top: 4px;
        list-style: none;
        padding-left: 0px;
    }

    #setup-details li:before {
        content: '✓  ';
    }

#price-details {
    font-size: 9pt;
    color: #808080;
}

.checkDescription {
    color: #f3385b;
    margin-right: 4px;
    margin-left: 35px;
}

#setup-description {
    font-size: large;
    font-weight: lighter;
}

#add-offer {
    display: block;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    width: 60px;
    height: 60px;
    font-size: xx-large;
    font-weight: lighter;
    background: rgb(240,59,94);
    color: white;
    padding: 7px 5px 4px 5px;
    border-radius: 40px;
}

.divDetailPrice2 {
    margin-bottom: 50px;
}

.priceHT {
    font-size: 16px;
}


@media(max-width:992px) {
    .offers {
        margin-left: 0px;
    }

    .titleGroup {
        margin-top: 40px;
    }

    .testsub {
        margin-top: 110px;
    }
}

@media(max-width: 750px) {
    .testsub {
        margin-left: 0px !important;
        margin-top: 40px;
    }

    .offers .box {
        justify-content: center;
    }

    .offers {
        justify-content: center;
    }

    .testing2 {
        margin-left: 50px;
    }
}

@media(max-width: 460px) {
    #img2 {
        margin-left: 120px;
    }

    .testing2 {
        margin-left: 0px;
    }
}


    /*=============================
=======FIN PAGE TARIFS=========
===========================


/* Souvenirs */
.statusCircle {
    color: white;
    border-radius: 18px;
    padding: 4px;
    font-size: 18px;
    width: 26px;
    height: 26px;
    display: flex;
}

.statusCircle i {
    display: block;
}

.disabledLink {
    color: #666;
    pointer-events: none;
    cursor: pointer;
    opacity: 0.7;
}

    .disabledLink:hover {
        color: #666;
    }

/*Organisation/Details*/
.statistics {
    display: flex;
}

.statistics-left {
    width: 60%;
}

.statistics-right {
    width: 40%;
}

.title {
    text-align: left;
    font-size: 24px;
    font-weight: bold;
    margin-top: -20px;
}

.button-reporting-container {
    margin-bottom: 20px;
}

.button-reporting {
    margin: 0px 5px;
}

.info-reporting {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
}





/*=========================================
======= Pourcentage d'utilisation ==========
=========================================*/
/*Organisation/Index*/

.bar-red {
    background: rgba(255,0,0);
}

.bar-withesmoke {
    background-color: rgb(245,245,245);
}

.bar-orange {
    background: orange;
}

.bar-gold {
    background: rgb(255,215,0);
}

.bar-green {
    background: rgba(0,128,0);
}

.bg-bar-red {
    background-color: rgba(255,0,0,0.2);
}

.bg-bar-orange {
    background-color: rgb(255,165,0,0.2);
}

.bg-bar-gold {
    background-color: rgb(255,215,0,0.2);
}

.bg-bar-green {
    background-color: rgba(0,128,0,0.2);
}

.bg-progress {
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    height: 24px;
    width: 100%;
}

.front-progress {
    height: 24px;
    border-radius: 2px;
    font-size: 1.5rem;
}

.background-noValue {
    background: rgb(238, 130, 238, 0.3);
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    height: 24px;
    width: 100%;
}

.feature-button {
    display: flex;
    align-items: center;

    height: 4em;
}

.feature-button-content {   
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: initial;
}

.feature-button-caret {
    margin-left: auto !important;
}

.feature-list {
    width: 100%;

    border: none;
    border-radius: 0px;
}

.feature-link {
    padding: 3px 6px !important;
}

.feature-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    margin: 0 !important;
    padding: 0 !important;
}

.feature-input {
    position: relative !important;
    
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
}

.feature-text {
    display: -webkit-box;

    white-space: initial;
    
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    
    overflow: hidden;
    text-overflow: ellipsis;
}