/* new styles */

ul,
li,
.container,
a,
p,
input,
body,
ol,
span {
    box-sizing: border-box!important;
}

#global {
    max-width: 100%;
}

@media screen and (max-width: 1500px) {
    #global {
        min-width: 0;
    }
}

body {
    font-family: "SF Pro Text";
    font-size: 14px;
    font-weight: 400;
    background-image: none;
    background-color: #f3f7fa;
}


/* ---------------------------------- */

table.dataTable.order-column tbody tr>.sorting_1,
table.dataTable.order-column tbody tr>.sorting_2,
table.dataTable.order-column tbody tr>.sorting_3,
table.dataTable.display tbody tr>.sorting_1,
table.dataTable.display tbody tr>.sorting_2,
table.dataTable.display tbody tr>.sorting_3 {
    background-color: transparent!important;
}

.dataTables_wrapper .ui-toolbar.fg-toolbar {
    display: none!important;
}


/* ----------------------------------
.field.col-6.field-check.tss_5_1 {
    margin-top: 10px;
}
.field.col-6.field-check.tss_4_1 {
    margin-left: 6px;
	padding-bottom: 31px;
}
.field.col-6.field-check.tss_3_1 {
    margin-left: 6px;
}
.field.col-6.field-check.tss_6_1 {
    margin-top: 10px;
}
.field.col-6.field-check.tss_7_1 {
    margin-left: 6px;
	padding-bottom: 31px;
}
.field.col-6.field-check.tss_8_1 {
    margin-top: 10px;
	padding-bottom: 28px;
}
.field.col-6.field-check.tss_222_715 {
    margin-left: 6px;
}
.field.col-6.field-check.tss_2_1 {
    margin-top: 10px;
}*/
table {
    background: transparent;
    border-spacing: 0px;
    width: 100%;
    /* width: 100%!important; */
    border-bottom: 0!important;
}

table {
    border-collapse: separate;
}

tr.odd td.sorting_1,
tr.odd,
tr.even td.sorting_1,
tr.odd td.sorting_2,
td {
    background-color: transparent;
}

table tr.odd:hover td,
table tr.even:hover td {
    background-color: transparent;
}

table>thead td,
table>thead th {
    padding: 12px 20px 12px 5px;
    background-color: #0e70b1;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    text-transform: uppercase;
}

table>thead td:first-child,
table>thead th:first-child {
    border-radius: 0;
}

table>thead td:last-child,
table>thead th:last-child {
    border-radius: 0;
}

table>thead td,
table>thead th {
    color: #fff;
}

table>tbody td,
table>tfoot td {
	height: 100%;
    border: 0;
    border-radius: 0;
    margin: 0;
    /*line-height: 1.8;*/
    font-size: 0.8em;
    border-top: 1px solid #d8d6d6;
    color: #595959;
    font-family: "SF Pro Text";
    font-weight: 600;
    /* white-space: nowrap; */
}


/*  ---------------------*/

.left {
    color: #595959;
}

.container {
    width: 100%;
    max-width: 1450px;
    padding: 0 15px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}


.container.contenu {
    max-width: none;
}

#global>.container {
    position: static;
}

@media screen and (max-width: 1500px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        margin: 0 auto;
    }
}

input:active,
input:focus,
select:active,
select:focus {
    outline: none;
}

textarea {
    padding-left: 0;
    padding-right: 0;
    outline: none;
}

textarea:focus {
    outline: none;
}

textarea,
input[type=email],
input[type=text],
select,
textarea,
input[type=texte],
input[type=password],
.field .dataTables_filter input {
    border: 1px solid #dddddd;
    background-color: #ffffff;
    color: #282828;
    font-family: "SF Pro Text";
    font-size: 13px;
    max-width: 100%;
    border-radius: 4px;
}

input {
    max-width: 100%;
    /*-webkit-appearance: none;
    -moz-appearance: none;*/
    appearance: none;
}
input#actif {
    margin-left: 0px !important;
}

input[type=email],
input[type=text],
input[type=texte],
input[type=password] {
    height: 37px;
}

textarea {
    resize: none;
}

textarea::placeholder,
input[type=texte]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=text]::placeholder {
    color: #adadad;
    opacity: 1;
}

textarea:-ms-input-placeholder,
input[type=texte]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=text]:-ms-input-placeholder {
    color: #adadad;
}

textarea::-ms-input-placeholder,
input[type=texte]::-ms-input-placeholder,
input[type=email]::-ms-input-placeholder,
input[type=password]::-ms-input-placeholder,
input[type=text]::-ms-input-placeholder {
    color: #adadad;
}

input.kolorPicker {
    background-position: 60px 7px;
}


/* input file */


/* -- custom Check -- */

.customCheck {
    display: none;
}

.customCheck+label {
    color: #7d8387;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    padding: 0;
    border: 0;
    padding-left: 30px;
    /* line-height: 1.7; */
    margin-bottom: 10px;
    margin-right: 15px;
    font-size: 1em;
    margin-top: 0;
}

.customCheck+label::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border-radius: 4px;
}

.customCheck:checked+label::before {
    background-color: #0e70b1;
}

.customCheck:checked+label::after {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e901";
    color: #fff;
    display: block;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 20px;
    text-align: center;
}


/* header */

.header {
    background-color: #ffffff;
    position: relative;
    z-index: 2;
}

.header .header-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0 20px;
}

.header .container {
    z-index: 2;
}

.header-left {
    width: calc(100% - 260px);
}

@media screen and (max-width: 1500px) {
    .header .header-left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: auto;
        flex: 1;
    }
}

@media screen and (max-width: 767px) {
    .header .header-left {
        flex-direction: column;
        align-items: flex-start;
    }
}

.logo {
    max-width: 140px;
    display: inline-block;
}

.logo img {
    max-width: 100%;
    width: auto;
    max-height: 23px;
    height: auto;
}

.header .club-name {
    display: inline-block;
    margin: 0 0 0 170px;
    color: #282828;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 500;
}

@media screen and (max-width: 1200px) {
    .header .club-name {
        margin: 0 0 0 20px;
    }
}

@media screen and (max-width: 767px) {
    .header .club-name {
        margin: 10px 0 0 0;
    }
}

.header .club-name span {
    color: #bfbfbf;
    font-size: 15px;
    text-transform: capitalize;
}

.header-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .header-right {
        position: absolute;
        top: 25px;
        right: 15px;
    }
}

@media screen and (max-width: 450px) {
    .header-right {
        top: 18px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
    }
}

.lang {
    width: 50px;
    padding-right: 15px;
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.lang.active .lang-list {
    display: block;
}

.lang.active .lang-current::after {
    transform: rotate(-180deg);
}

.lang-current {
    color: #989898;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
}

.lang-current::after {
    content: "\e900";
    color: inherit;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 8px;
    transition: all .2s ease-in-out;
    display: block;
    position: absolute;
    right: 1px;
    top: 4px;
}

.lang-list {
    display: none;
    position: absolute;
    left: -5px;
    top: auto;
    width: 60px;
    height: auto;
    padding: 5px;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
    background: #f8f8f8;
}

.lang-item {
    margin-bottom: 2px;
}

.lang-item {
    display: block;
    background-color: #e4eff7;
    border-radius: 4px;
    color: #6a747e;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    padding: 0 3px;
}

.lang-item:hover {
    background-color: #0e70b1;
    color: #ffffff;
}

.logout {
    margin-left: 10px;
    padding-right: 4px;
    position: relative;
    color: #989898;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: none;
    position: relative;
    white-space: nowrap;
}

@media screen and (max-width: 450px) {
    .logout {
        padding-right: 0;
    }
}

.logout i {
    margin-left: 10px;
    display: inline-block;
}

.nav {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    background-color: #0e70b1;
    min-height: 30px;
    z-index: 1;
    position: relative;
}

.nav .container {
    position: relative;
}

.nav.fix {
    position: fixed;
    width: 100%;
    z-index: 999;
    top: 0;
    left: 0;
}

.small-calendar.fix{
    position: fixed;
    z-index: 999;
    top: -9px;
    left: 10px;
}

.page-nav.hide .big-calendar.active.fix{
    position: fixed;
    z-index: 999;
    top: 50px;
    left: 15px;
}

.nav-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

@media screen and (max-width: 992px) {
    .nav-list {
        display: none;
        flex-direction: column;
        width: auto;
    }
}

.nav-item {
    padding: 24px 0;
    margin: 0 10px;
    position: relative;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: uppercase;
    display: inline-block;
}

.item {
    position: relative;
}

.item .page-nav__list {
    display: none;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    background: #f8f8f8;
    padding: 0;
    top: 90%;
    position: absolute;
    left: 0;
    padding: 7px 5px;
    flex-direction: column;
    width: auto;
    /* max-height: 400px;
    overflow: auto; */
}

.item .page-nav__list::-webkit-scrollbar {
    width: 0;
}

.item .page-nav__list {
    -ms-overflow-style: none;
}

.item .page-nav__list {
    overflow: -moz-scrollbars-none;
}

.item:last-child .page-nav__list {
    left: auto;
    right: 0;
}


/* two col in menu */

@media screen and (min-width: 992px) {
    .item:last-child .page-nav__list,
    .item.two .page-nav__list {
        width: 600px;
        /* display: flex; */
        flex-wrap: wrap;
        flex-direction: row;
    }
    .item.two .page-nav__list li,
    .item:last-child .page-nav__list li {
        width: calc(50% - 2px);
        margin: 1px;
    }
}

@media screen and (min-width: 992px) {
    .item:hover .page-nav__list {
        display: flex;
    }
}

.item:hover .nav-item,
.item:hover .page-nav__list {
    z-index: 120;
}

.item .page-nav__list li>a {
    color: #282828;
    font-family: "SF Pro Text";
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    /* height: 47px; */
    background-color: #e4eff7;
    padding: 11px;
    white-space: nowrap;
    padding: 11px 11px 11px 35px;
    height: auto;
    min-height: auto;
    border-radius: 4px;
}

.item .page-nav__list li>a i {
    top: 17px;
}

.item .page-nav__list li {
    background-color: #e4eff7;
    border-radius: 4px;
    color: #6a747e;
    font-family: "SF Pro Text";
    font-size: 14px;
    font-weight: 400;
}

.item .page-nav__list li>:before {
    display: none;
}

.item .page-nav__list li>a:hover {
    background-color: #0e70b1;
    color: #fff;
}

.item .page-nav__list li {
    margin-bottom: 2px;
}


/* ------------------------ */

@media screen and (max-width: 992px) {
    .item {
        width: 220px;
    }
    .nav-item.active {
        padding-right: 0;
    }
    .item.active .page-nav__list {
        display: flex;
        position: relative;
        top: 5px;
        left: 0;
        width: 100%;
    }
    .nav-item:hover:before,
    .nav-item.active:before {
        display: none!important;
    }
    .item .page-nav__list li>a {
        white-space: normal;
    }
}


/* ------------------------ */

.item .ui-datepicker {
    display: none!important;
}

@media screen and (max-width: 1300px) {
    .nav-item {
        padding: 20px 0;
        margin: 0 5px;
        font-size: 13px;
    }
    .nav-item i {
        margin-right: 5px;
    }
}


/* @media screen and (min-width: 1100px) and (max-width: 1200px) {
    .nav-item {
        font-size: 12px;
        padding: 21px 0;
    }
}
@media screen and (min-width: 992px) and (max-width: 1100px) {
    .nav-item {
        font-size: 10px;
        padding: 22px 0;
    }
} */

@media screen and (max-width: 992px) {
    .nav-item {
        padding: 15px 0;
        margin: 0 2px;
        font-size: 15px;
        display: block;
    }
}

.nav-item i {
    display: inline-block;
    margin-right: 10px;
    opacity: .8;
}

@media screen and (max-width: 992px) {
    .nav-item {
        padding-right: 16px;
    }
    .nav-item::after {
        content: "\e907";
        background-image: none;
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 10px;
        text-indent: 0;
        display: block;
        position: absolute;
        top: calc(50% - 4px);
        right: 0px;
        transition: all .2s linear;
    }
    /* .item:hover .nav-item::after,  */
    .item.active .nav-item::after {
        transform: rotate(-180deg);
    }
    .item.w .nav-item {
        padding-right: 0;
    }
}

.item.w .nav-item::after {
    display: none!important;
}


/* @media screen and (max-width: 992px) {
    .nav-item::after {
        top: 18px;
    }
    .item:hover .nav-item::after {
        transform: rotate(0deg);
    }
    .item.active:hover .nav-item::after {
        transform: rotate(-180deg);
    }
} */

.nav-item.active i {
    opacity: 1;
}

.nav-item:hover {
    color: #ffffff;
}

.nav-item:hover:before,
.nav-item.active:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 10px;
    width: calc(100% - 20px);
    height: 5px;
    background-color: #ffffff;
    transition: all .2s linear;
}

@media screen and (max-width: 992px) {
    .nav-item:hover:before,
    .nav-item.active:before {
        bottom: 5px;
        left: 0px;
        width: 100%;
        height: 2px;
    }
}


/* .nav-button {
    display: none;

    border: 0;
    background-color: transparent;
    font-size: 24px;
    color: #fff;
    text-align: center;
    height: 30px;
    width: 45px;
    line-height: 30px;
    border-radius: 5px;
    border: 1px solid #fff;
    cursor: pointer;
} */

.nav-button {
    border: 0;
    background-color: transparent;
    font-size: 24px;
    color: #fff;
    text-align: center;
    overflow: hidden;
    position: absolute;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    top: 0;
    right: 15px;
    width: 52px;
    height: 30px;
    cursor: pointer;
    display: none;
}

.nav-button span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background: #fff;
    border-radius: 4px;
    -webkit-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    -moz-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    -ms-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    -o-transition: all .5s cubic-bezier(.08, .81, .87, .71);
    transition: all .5s cubic-bezier(.08, .81, .87, .71);
}

.nav-button #span1 {
    transform-origin: 4px 0px;
}

.nav-button #span3 {
    transform-origin: bottom right;
}

.nav-button:focus,
.nav-button:active {
    outline: none;
}

@media screen and (max-width: 992px) {
    .nav-button {
        display: block;
        z-index: 2;
    }
}


/* mobile calendar */


/* .calendar {
    display: none;  
    z-index: 1;  
}
@media screen and (max-width: 992px) {
    .calendar {
        display: block;
        position: absolute;
        top: 2px;
        right: 15px;
    }
    .calendar .small-calendar {
        display: block;
        color: #fff;
        margin-right: 70px;
        border-bottom: 0;
        height: 50px;
    }
    .calendar .icon-zcalendar:before {
        color: inherit;
    }
    
} */


/* opened navigation */

@media screen and (max-width: 992px) {
    .nav.active {
        /* position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 999; */
    }
    .nav.active .container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .nav.active .nav-button {
        margin-top: -2px;
    }
    .nav.active .nav-button #span1 {
        background-color: #fff;
        transform: rotate(45deg) translate(4px);
    }
    .nav.active .nav-button #span2 {
        background-color: #fff;
        transform: rotate(495deg);
    }
    .nav.active .nav-button #span3 {
        background-color: #fff;
        transform: rotate(45deg);
        opacity: 0;
    }
    .nav.active .nav-list {
        display: flex;
        margin-top: 60px;
    }
}


/* elements */

ul {
    margin: 0;
    list-style: none;
}

li {
    color: #777777;
    font-family: "SF Pro Text";
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    padding-left: 25px;
    display: block;
    position: relative;
}

.text-page li:before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #005c97;
    border-radius: 8px;
    position: absolute;
    top: 7px;
    left: 0;
    display: block;
}


/* main content */

.main {
    display: flex;
    margin-top: 35px;
    background: transparent;
    margin-bottom: 2px;
}

@media screen and (max-width: 992px) {
    .main {
        /* padding-left: 65px; */
        padding-left: 0;
    }
}


/* @media screen and (max-width: 450px) {
    .main {
        padding-left: 40px;
    }
} */

.page-nav {
    flex: 0;
    min-width: 260px;
    width: 260px;
    margin-right: 30px;
    box-shadow: 0 7px 31px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: all .1s linear;
    display: block
}


/* page navigation hide */

.page-nav.hide {
    min-width: 50px;
    width: 50px;
}


/* @media screen and (max-width: 450px) {
    .page-nav.hide {
        min-width: 30px;
        width: 30px;
    }
} */

.page-nav.hide .page-nav__toggle .page-nav__hide {
    display: none;
}

.page-nav.hide .page-nav__toggle .page-nav__show {
    display: block;
}

.page-nav__toggle {
    position: absolute;
    cursor: pointer;
    z-index: -1;
    top: 10px;
    right: -15px;
    width: 15px;
    height: calc(100% - 20px);
    border-radius: 0 20px 20px 0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    background-color: #d9dee2;
    text-align: center;
}

.page-nav__toggle p {
    opacity: 0.7;
    color: #282828;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}

.page-nav__toggle i {
    position: relative;
    display: inline-block;
    font-size: 8px;
}

.page-nav__toggle i:first-child {
    transform: rotate(270deg);
}

.page-nav__toggle i:last-child {
    transform: rotate(90deg);
}

.page-nav__toggle .page-nav__hide {
    display: block;
}

.page-nav__toggle .page-nav__show {
    display: none;
}

.page-nav__toggle .page-nav__hide,
.page-nav__toggle .page-nav__show {
    transform: rotate(-90deg);
    position: absolute;
    height: 15px;
    width: 300px;
    z-index: 1;
    top: 50%;
    right: -144px;
}

.page-nav.hide ul.page-nav__list>li>a {
    font-size: 0;
    padding: 21px 15px 21px 15px;
    height: 65px;
}

.page-nav.hide ul.page-nav__list>li>a i {
    left: 20px;
}


/* hover */

.page-nav.hide ul.page-nav__list>li>a:hover {
    color: #ffffff;
    font-family: "SF Pro Text";
    font-size: 13px;
    min-height: 58px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 21px 15px 21px 40px;
    display: block;
    /* width: 260px;     */
    white-space: nowrap;
}

.page-nav.hide ul.page-nav__list>li>a:hover i {
    display: inline-block;
    margin-right: 10px;
    font-size: 13px;
    position: absolute;
    display: block;
    top: 26px;
}

.page-nav.hide ul.page-nav__list>li {
    border-bottom: 1px solid #cdd1d4;
}

@media screen and (max-width: 992px) {
    .page-nav.hide ul.page-nav__list>li:last-child {
        border-bottom: 0;
    }
}

.page-nav.hide .big-calendar {
    display: none;
}

.page-nav.hide .big-calendar.active {
    display: block;
    position: absolute;
    z-index: 2;
}

.page-nav.hide .big-calendar.active .hasDatepicker {
    box-shadow: 0 7px 31px rgba(0, 0, 0, 0.1);
    width: 260px;
}

.page-nav.hide .small-calendar {
    display: block;
}


/* content */

.content {
    flex: 1;
    box-shadow: 0 7px 31px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    padding: 30px 35px 40px;
    border-radius: 4px;
    /* position: relative; */
    width: calc(100% - 300px);
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .content {
        padding: 20px 20px 40px;
        width: 100%;
    }
}


/* ------ */


/* Titles */

h1,
h2,
h3,
h4,
h5 {
    color: #282828;
    font-family: "SF Pro Text", sans-serif;
    font-weight: 700;
    margin: 0 0 25px 0;
    font-style: normal;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
}

.title-page {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 30px;
}

@media screen and (max-width: 992px) {
    .title-page {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 15px;
    }
}

.title-page:before {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 25px;
    background-color: #0b71b2;
    top: 6px;
    left: -35px;
}

@media screen and (max-width: 768px) {
    .title-page:before {
        width: 10px;
        left: -20px;
    }
}

.title-page h1,
.title-page h2,
.title-page h3,
.title-page h4,
.title-page h5 {
    margin: 0;
}

@media screen and (max-width: 992px) {
    .title-page h1,
    .title-page h2,
    .title-page h3,
    .title-page h4,
    .title-page h5 {
        margin-bottom: 15px;
    }
}

.text-page {
    color: #777777;
    font-family: "SF Pro Text";
    font-size: 14px;
    font-weight: 400;
    margin-top: 10px;
}

.field input:not([type=label]).bouton,
.field input:not([type=label]).bouton2,
input:not([type=label]).bouton,
input:not([type=label]).bouton2{
    box-shadow: 0 1px 1px rgba(11, 113, 178, 0.75);
    background: #0b71b2;
    color: #ffffff;
    font-family: "SF Pro Text";
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    padding: 8px 18px;
    transition: all .4s linear;
    border-radius: 4px;
    text-align: center;
    margin: 0 5px 10px 0;
}

@media screen and (max-width: 450px) {
    .field input:not([type=label]).bouton,
    .field input:not([type=label]).bouton2,
    input:not([type=label]).bouton,
    input:not([type=label]).bouton2{
        padding: 8px;
    }
}

.field input:not([type=label]).bouton:hover,
.field input:not([type=label]).bouton2:hover,
input:not([type=label]).bouton:hover,
input:not([type=label]).bouton2:hover,
{
    box-shadow: 0 1px 13px rgba(11, 113, 178, 0.75);
    background-color: #0b71b2;
    color: #ffffff;
}

.field input:not([type=label]).bouton:active,
.field input:not([type=label]).bouton2:active,
input:not([type=label]).bouton:active,
input:not([type=label]).bouton2:active,
.bouton:active,
.bouton2:active {
    background-color: #1d8bd1;
    box-shadow: none;
    color: #ffffff;
    outline: none;
}


/* iconmoon */

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-archive:before {
    content: "\e94d";
    color: #878787;
}

.icon-caisse-2:before {
    content: "\e94e";
}

.icon-carte:before {
    content: "\e94f";
}

.icon-check2 {
    font-size: 18px;
}

.icon-check2:before {
    content: "\e950";
    color: #529100;
}

.icon-color-wheel-2:before {
    content: "\e951";
}

.icon-copy:before {
    content: "\e952";
    color: #878787;
}

.icon-cross:before {
    content: "\e953";
    color: #f25858;
}

.icon-ecole-2:before {
    content: "\e954";
    color: #e7391c;
}

.icon-loupe:before {
    content: "\e955";
}

.icon-modifier:before {
    content: "\e956";
    color: #529100;
}

.icon-oeil:before {
    content: "\e957";
}

.icon-plus1:before {
    content: "\e958";
}

.icon-poubelle:before {
    content: "\e959";
}

.icon-refresh:before {
    content: "\e95a";
    color: #878787;
}


/* --- */

.icon-reply1 {
    font-size: 18px;
    color: #878787;
}

.icon-reply1:before {
    content: "\e94c";
}

.icon-check1:before {
    content: "\e945";
}

.icon-document:before {
    content: "\e946";
}

.icon-list2:before {
    content: "\e947";
}

.icon-money1:before {
    content: "\e948";
}

.icon-reply:before {
    content: "\e949";
}

.icon-route:before {
    content: "\e94a";
}

.icon-trash {
    font-size: 18px;
    color: #878787;
}

.icon-trash:before {
    content: "\e94b";
}

.icon-040:before {
    content: "\e943";
}

.icon-041:before {
    content: "\e944";
}

.icon-courts1:before {
    content: "\e942";
    color: inherit;
}

.icon-clock1:before {
    content: "\e932";
    color: inherit;
}

.icon-court:before {
    content: "\e933";
    color: inherit;
}

.icon-courts:before {
    content: "\e934";
    color: inherit;
}

.icon-credit-card:before {
    content: "\e935";
    color: inherit;
}

.icon-eye:before {
    content: "\e936";
    color: inherit;
}

.icon-import1:before {
    content: "\e937";
    color: inherit;
}

.icon-link1:before {
    content: "\e938";
    color: inherit;
}

.icon-list1:before {
    content: "\e939";
    color: inherit;
}

.icon-lock:before {
    content: "\e93a";
    color: inherit;
}

.icon-membership:before {
    content: "\e93b";
    color: inherit;
}

.icon-prices:before {
    content: "\e93c";
    color: inherit;
}

.icon-rating:before {
    content: "\e93d";
    color: inherit;
}

.icon-re-dolar:before {
    content: "\e93e";
    color: inherit;
}

.icon-rent:before {
    content: "\e93f";
    color: inherit;
}

.icon-time:before {
    content: "\e940";
    color: inherit;
}

.icon-users:before {
    content: "\e941";
    color: inherit;
}

.icon-tennis-ball:before {
    content: "\e90b";
}

.icon-link:before {
    content: "\e90c";
}

.icon-basketball:before {
    content: "\e90d";
}

.icon-magnifying-glass:before {
    content: "\e90e";
}

.icon-link-1:before {
    content: "\e90f";
}

.icon-user:before {
    content: "\e910";
}

.icon-pass:before {
    content: "\e911";
}

.icon-plus:before {
    content: "\e912";
}

.icon-import:before {
    content: "\e913";
}

.icon-key:before {
    content: "\e914";
}

.icon-money:before {
    content: "\e915";
}

.icon-lock-icon:before {
    content: "\e916";
}

.icon-test:before {
    content: "\e917";
}

.icon-clock-circular-outline:before {
    content: "\e918";
}

.icon-sale:before {
    content: "\e919";
}

.icon-bill:before {
    content: "\e91a";
}

.icon-list:before {
    content: "\e91b";
}

.icon-pay:before {
    content: "\e91c";
}

.icon-graph:before {
    content: "\e91d";
}

.icon-graph-1:before {
    content: "\e91e";
}

.icon-mail:before {
    content: "\e91f";
}

.icon-mail-1:before {
    content: "\e920";
}

.icon-email:before {
    content: "\e921";
}

.icon-download:before {
    content: "\e922";
}

.icon-cup:before {
    content: "\e923";
}

.icon-internet:before {
    content: "\e924";
}

.icon-calendar-icon:before {
    content: "\e925";
}

.icon-hour:before {
    content: "\e926";
}

.icon-shield:before {
    content: "\e927";
}

.icon-paypal:before {
    content: "\e928";
}

.icon-gear:before {
    content: "\e929";
}

.icon-open-book:before {
    content: "\e92a";
}

.icon-manager:before {
    content: "\e92b";
}

.icon-block:before {
    content: "\e92c";
}

.icon-clock:before {
    content: "\e92d";
}

.icon-vision:before {
    content: "\e92e";
}

.icon-dollar:before {
    content: "\e92f";
}

.icon-list-1:before {
    content: "\e930";
}

.icon-for-rent:before {
    content: "\e931";
}

.icon-zcalendar:before {
    content: "\e909";
    color: #0e70b1;
}

.icon-ztennis-ball:before {
    content: "\e90a";
    color: #fff;
}

.icon-arrow-picker:before {
    content: "\e900";
    color: #fff;
}

.icon-check:before {
    content: "\e901";
    color: #fff;
}

.icon-log-out:before {
    content: "\e902";
    color: #0e70b1;
}

.icon-ok-check:before {
    content: "\e903";
}

.icon-radio-dots:before {
    content: "\e904";
    color: #d9e5ee;
}

.icon-small-triangle-left:before {
    content: "\e905";
    color: #757575;
}

.icon-small-triangle-right:before {
    content: "\e906";
    color: #757575;
}

.icon-triangle-down:before {
    content: "\e907";
}

.icon-triangle-up:before {
    content: "\e908";
}


/*reservation*/

.ui-accordion {
    margin-top: 45px;
}

.ui-accordion .ui-accordion-content {
    padding: 0;
}

.table_reservation {
    background-color: #bde5ff;
}

.ui-widget {
    font-family: "SF Pro Text";
    font-weight: 400;
}

.ui-accordion .ui-widget-content {
    border: 0px;
    background: #bde5ff;
    padding: 0 6px 28px 6px;
    /* margin-bottom: 8px; */
}

.ui-accordion .ui-state-active,
.ui-accordion .ui-state-active:hover,
.ui-accordion .ui-accordion-header {
    border: 0;
    font-weight: 400;
    color: #282828;
    font-family: "SF Pro Text";
    font-size: 20px;
    font-weight: 500;
    background: #bde5ff;
    margin-top: 8px;
}

.ui-accordion .ui-state-active:focus,
.ui-accordion .ui-accordion-header:focus {
    outline: none;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #282828;
}

.ui-accordion .ui-accordion-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.ui-accordion .ui-accordion-header a {
    order: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.ui-accordion .ui-accordion-header .ui-icon {
    order: 2;
    width: auto;
    height: auto;
    margin-top: 2.5px;
}


/* icon for accordion */

.ui-icon.ui-icon-triangle-1-e {
    background-image: none;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 10px;
    text-indent: 0;
}

.ui-icon.ui-icon-triangle-1-e:before {
    content: "\e907";
}

.ui-state-active .ui-icon.ui-icon-triangle-1-s {
    background-image: none;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 10px;
    text-indent: 0;
}

.ui-state-active .ui-icon.ui-icon-triangle-1-s:before {
    content: "\e908";
}


/* ----------------- */

.reservation,
.reservation table {
    border-spacing: 2px;
}

.reservation td {
    background-color: #ffffff;
    border-radius: 4px;
     /*min-width: 120px; */
    /* min-width: 44px; */
    min-width: 10px;
    font-weight: 400;
    border: 0;
    word-break: break-word;
}

.reservation thead th,
.reservation tr th,
.reservation tr:first-child th:first-child {
    background-color: #0b71b2;
    /* min-width: 45px; */
    min-width: 10px;
    height: 44px;
    word-break: break-word;
}

.reservation thead th {
    padding: 0 3px;
}

.reservation td.noReservation {
    background-color: transparent;
}

.reservation tr:first-child th:first-child {
    border-radius: 4px 0 0 4px;
}

.reservation tr:last-child th:last-child {
    border-radius: 0 4px 4px 0;
}


/* left navigation */

.page-nav__wrap {
    height: 100%;
    width: 100%;
    position: relative;
    background-color: #ffffff;
    z-index: 1;
    padding: 10px 0;
    border-radius: 4px;
    box-sizing: border-box;
}

ul.page-nav__list {
    list-style: none;
    margin: 0;
}

ul.page-nav__list>li {
    margin: 0;
    color: #282828;
    position: relative;
    padding: 0;
    padding-left: 0;
    position: relative;
}

ul.page-nav__list>li::before {
    display: none;
}

ul.page-nav__list>li {
    border-bottom: 1px solid #cdd1d4;
}

ul.page-nav__list>li>a {
    color: #282828;
    font-family: "SF Pro Text";
    font-size: 13px;
    min-height: 58px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 21px 15px 21px 40px;
    display: block;
    width: auto;
}

ul.page-nav__list>li i {
    display: inline-block;
    margin-right: 10px;
    font-size: 13px;
    position: absolute;
    display: block;
    top: 26px;
    left: 12px;
}

ul.page-nav__list>li>a:hover,
ul.page-nav__list>li>a.active {
    color: #ffffff;
    background-color: #0e70b1;
}


/* Datepicker */

.small-calendar {
    display: none;
    position: relative;
    height: 58px;
    font-size: 32px;
    text-align: center;
    color: #0e70b1;
    cursor: pointer;
    border-bottom: 1px solid #cdd1d4;
}

.small-calendar.active {
    display: block;
}

@media screen and (max-width: 450px) {
    .small-calendar {
        font-size: 24px;
    }
}

.small-calendar i {
    line-height: 48px;
    /* top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0); */
}

.ui-datepicker-header.ui-widget-header {
    border: 0;
    background: #0e70b1;
    color: #ffffff;
    font-weight: 400;
    padding: 0;
}

.ui-datepicker table {
    margin: 0px 0 7px 0;
}

.ui-datepicker.ui-widget.ui-widget-content {
    padding: 7px 7px 0 7px;
    margin-bottom: 20px;
    border: 0px;
    width: 100%;
    min-width: 260px;
    max-width: 270px;
    box-sizing: border-box;
    background-color: white;
}

.page-nav__wrap .ui-widget.ui-widget-content {
    padding: 0 7px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    display: none;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 auto;
    width: calc(100% - 50px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background-image: url(../fonts/arrow_picker.svg);
    width: 15px;
    height: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 2;
    display: block;
    top: 15px;
}

.ui-datepicker-prev {
    transform: rotate(90deg);
}

.ui-datepicker-next {
    transform: rotate(-90deg);
}

.ui-datepicker .ui-datepicker-title .selectric-wrapper {
    width: 50%;
}

.ui-datepicker .ui-datepicker-title .selectric-wrapper:first-child {
    text-align: left;
}

.ui-datepicker .ui-datepicker-title .selectric-wrapper:last-child {
    text-align: right;
}

.ui-datepicker th {
    color: #2c3e50;
    font-size: 12px;
    height: 35px;
    text-transform: uppercase;
    background: transparent;
}

.ui-datepicker .ui-state-default {
    border: 0;
    color: #2c3e50;
    background: #e4eff7;
    border-radius: 4px;
    color: #2c3e50;
    font-family: "SF Pro Text";
    font-size: 14px;
    font-weight: 400;
    height: 32px;
    line-height: 26px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.ui-datepicker .ui-datepicker-today .ui-state-default {
    border: 0;
    font-weight: 400;
    color: #fff;
    background: #0b71b2;
}

.ui-datepicker td .ui-state-default.ui-state-active,
.ui-datepicker td .ui-state-default.ui-state-active {
    border: 0;
    font-weight: 400;
    color: #fff;
    background: #79b30a;
}

.ui-datepicker .ui-datepicker-buttonpane {
    margin: 0;
    border: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: 10px 0;
    cursor: pointer;
    padding: 9px 17px;
    width: auto;
    overflow: visible;
    box-shadow: 0 1px 1px rgba(11, 113, 178, 0.75);
    background-color: #0b71b2;
    color: #ffffff;
    opacity: 1;
    line-height: 1;
}

.ui-accordion .ui-widget.ui-widget-content {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}


/* custom select selectric */

.selectric {
    border: 0;
    background: #0e70b1;
    position: relative;
    overflow: hidden;
    padding: 0 32px 0 10px;
    border-radius: 4px;
}

.selectric-items .selectric-scroll::-webkit-scrollbar {
    width: 0;
}

.selectric-items .selectric-scroll {
    -ms-overflow-style: none;
}

.selectric-items .selectric-scroll {
    overflow: -moz-scrollbars-none;
}

.selectric .label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-size: 12px;
    line-height: 40px;
    height: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #ffffff;
    font-family: "SF Pro Text";
    font-size: 14px;
    font-weight: 400;
}

.selectric .button {
    display: block;
    position: absolute;
    right: 12px;
    top: 0;
    width: 10px;
    height: 40px;
    line-height: 40px;
    background-color: transparent;
    color: #fff;
    text-align: center;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0;
}

.selectric .button:hover,
.selectric-hover .selectric .button {
    color: #fff;
}

.selectric .button:after {
    display: none;
}

.selectric .button:before {
    content: "\e900";
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    margin-top: -4px;
    font-size: 8px;
    transition: all .2s ease-in-out;
}

.selectric-open .selectric .button:before {
    transform: rotate(-180deg);
}

.selectric-items {
    border: 0;
    border-radius: 4px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    background: #f8f8f8;
    padding: 0;
    top: 90%;
}

.selectric-items .selectric-scroll ul {
    padding: 7px 5px;
}

.selectric-items .selectric-scroll ul li {
    background-color: #e4eff7;
    border-radius: 4px;
    color: #6a747e;
    font-family: "SF Pro Text";
    font-size: 14px;
    font-weight: 400;
}

.selectric-items .selectric-scroll ul li:before {
    display: none;
}

.selectric-items .selectric-scroll ul li:hover {
    background-color: #0e70b1;
    color: #fff;
}

.selectric-items .selectric-scroll ul li {
    margin-bottom: 2px;
}


/* ui-autocomplete */


/* .jsonSuggest .ui-autocomplete .ui-menu .ui-widget .ui-widget-content .ui-corner-all */

.ui-autocomplete.ui-menu,
.ui-selectmenu-menu .ui-widget-content {
    padding: 7px 5px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    background: #f8f8f8;
}

.ui-autocomplete.ui-menu::-webkit-scrollbar,
.ui-selectmenu-menu .ui-widget-content::-webkit-scrollbar {
    width: 0;
}

.ui-autocomplete.ui-menu,
.ui-selectmenu-menu .ui-widget-content {
    -ms-overflow-style: none;
}

.ui-autocomplete.ui-menu,
.ui-selectmenu-menu .ui-widget-content {
    overflow: -moz-scrollbars-none;
}

.ui-autocomplete.ui-menu li.ui-menu-item,
.ui-selectmenu-menu li.ui-menu-item {
    background-color: #e4eff7;
    border-radius: 4px;
    color: #6a747e;
    font-family: "SF Pro Text";
    font-size: 14px;
    font-weight: 400;
}

.ui-autocomplete.ui-menu li.ui-menu-item,
.ui-selectmenu-menu li.ui-menu-item {
    margin-bottom: 2px;
}

.ui-autocomplete.ui-menu li.ui-menu-item:before,
.ui-selectmenu-menu li.ui-menu-item:before {
    display: none;
}

.ui-autocomplete.ui-menu li.ui-menu-item:hover,
.ui-selectmenu-menu li.ui-menu-item:hover {
    background-color: #0e70b1;
    color: #fff;
}

.ui-autocomplete.ui-menu .ui-state-hover,
.ui-autocomplete.ui-menu .ui-widget-content .ui-state-hover,
.ui-selectmenu-menu .ui-widget-content div.ui-state-active {
    /* link */
    background: transparent;
    border: 0;
    color: inherit!important;
}


/* ------- */


/* time select timepicker */

.ui-selectmenu-button {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 37px;
    height: 37px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #ffffff;
    font-family: "SF Pro Text";
    font-size: 14px;
    font-weight: 400;
	background-color: #FFF;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative;
    /* new */
    color: #282828;
    font-family: "SF Pro Text";
    font-size: 16px;
    font-weight: 600;
    padding: 0;
}

.ui-selectmenu-button:focus {
    outline: none;
}

.ui-selectmenu-button.ui-button .ui-icon {
    height: 100%;
}

.ui-selectmenu-button.ui-button .ui-icon {
    background-image: none;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 10px;
    text-indent: 0;
}

.ui-selectmenu-button.ui-button .ui-icon:before {
    content: "\e907";
    line-height: 37px;
}

.ui-selectmenu-button-open .ui-icon.ui-icon-triangle-1-s {
    background-image: none;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 10px;
    text-indent: 0;
}

.ui-selectmenu-button-open .ui-icon.ui-icon-triangle-1-s:before {
    content: "\e908";
    line-height: 37px;
}

.ui-selectmenu-menu .ui-widget-content {
    width: 100%;
    box-sizing: border-box;
    min-width: 30px;
    /* max-width: 150px;
     */
}

.ui-selectmenu-menu li.ui-menu-item {
    padding: 0;
    text-align: center;
}

.ui-selectmenu-menu .ui-widget-content div {
    padding: 3px 5px;
    border-radius: 4px;
}

.ui-selectmenu-menu .ui-widget-content div.ui-state-active {
    background-color: #0e70b1;
    color: #fff!important;
}


/* .ui-selectmenu-menu .ui-widget-content {
    margin-bottom: 0;
    padding: 0;
} */


/* ------------ */


/* ui */

.ui-datepicker {
    padding: 0 7px;
}

body>.ui-datepicker {
    z-index: 128!important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 50%;
    border: 0;
    border-radius: 0px;
    background: transparent;
    position: relative;
    overflow: hidden;
    padding: 0 10px 0 16px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 46px;
    height: 46px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #ffffff;
    font-family: "SF Pro Text";
    font-size: 14px;
    font-weight: 400;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('../fonts/arrow_picker.svg');
    background-position: 88% 53%;
    background-repeat: no-repeat;
}

select::-ms-expand {
    display: none;
    /* hide the default arrow in ie10 and ie11 */
}

.ui-datepicker select.ui-datepicker-month:focus,
.ui-datepicker select.ui-datepicker-year:focus {
    outline: none;
}

.selectric-open .selectric .button:before {
    transform: rotate(-180deg);
}

.ui-datepicker select.ui-datepicker-month option,
.ui-datepicker select.ui-datepicker-year option {
    color: #6a747e;
    border-radius: 4px;
}

.ui-datepicker select.ui-datepicker-month option:hover,
.ui-datepicker select.ui-datepicker-year option:hover {
    color: #fff;
    background-color: #0e70b1;
}


/* alert wrapper */

.alert-wrapper {
    background-color: #ffcdcd;
    border-radius: 4px;
    padding: 21px 0;
}

.alert-wrapper .alert-text {
    position: relative;
    padding: 0 30px;
    margin: 0 2%;
    background: transparent;
}

.alert-wrapper .alert-text #errorText {
    line-height: 1.9;
    color: #606060;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}


/* checkbox */

.ui-accordion .ui-state-active.ui-checkboxradio-label,
.ui-controlgroup>.ui-controlgroup-item.ui-checkboxradio-label,
.ui-checkboxradio-label,
.ui-button.ui-state-active.ui-state-active,
.ui-checkboxradio-label:focus,
.ui-checkboxradio-label,
input.check+label,
input.radio+label {
    color: #7d8387;
    font-size: 13px;
    font-weight: 400;
    background: transparent;
    padding: 0;
    border: 0;
    padding-left: 23px;
    /* line-height: 1.7; */
    margin-bottom: 10px;
    margin-right: 15px;
    font-size: 1em;
    margin-top: 0;
    position: relative;
}

input.check,
input.radio {
    display: none;
}

.ui-visual-focus {
    box-shadow: none;
}

.ui-checkboxradio-label:focus {
    outline: none;
}


/* ----------- */


/* <input type="checkbox" class="validate[minCheckbox[1]] radio ui-checkboxradio ui-helper-hidden-accessible" name="terrain[]" id="1_1_terrain_1" value="1">
<label for="1_1_terrain_1" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget">Court N°1</label> */


/* ----------- */

input[type=checkbox]+.ui-checkboxradio-label:before,
input.check+label:before {
    width: 20px;
    height: 20px;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
    border-radius: 4px;
}

input[type=checkbox]+.ui-button.ui-state-active.ui-state-active:before,
input[type=checkbox].check:checked+label:before {
    background-color: #0e70b1;
}

input[type=checkbox]+.ui-button.ui-state-active.ui-state-active:after,
input[type=checkbox].check:checked+label:after {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e901";
    color: #fff;
    display: block;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 20px;
    text-align: center;
}


/* radio */

input[type=radio]+.ui-checkboxradio-label:before,
input.radio+label:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
}

input[type=radio]+.ui-button.ui-state-active.ui-state-active:after,
input[type=radio].radio:checked+label:after {
    content: "";
    display: block;
    position: absolute;
    background-color: #0e70b1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 5px;
    left: 5px;
}


/*  */

.moveRes {
    border-radius: 4px;
    z-index: 999;
}

.table-wrapper {
    width: 100%;
    overflow: auto;
}


/* field */

.form {
    background-color: #fff;
    width: 100%;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-container {
   width: 100%;
    /* max-width: 600px; */
    margin: 0 auto;
    padding: 9px 12px 1px 14px;
    box-sizing: border-box;
    margin-top: 0px;
}

.field {
    /* new */
    border: 0;
    border-radius: 4px;
    padding: 10px 15px 5px 15px;
    background-color: #e4eff7;
}

@media screen and (max-width: 767px) {
    .fancybox-slide {
	    padding:14px;
	}
}

.field-button {
    /* margin-bottom: 20px; */
    background-color: transparent;
    padding: 0 0 40px 0;
}

.field-button .field-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.field-button .field-content input {
    margin: 2px!important;
}

.field-no {
    background-color: transparent;
    padding: 0;
    flex-direction: row;
}

.field-no .field-title {
    width: 48%;
}

.field-no .field-content {
    width: 48%;
}

.field-no .field-content .field-text {
    margin-top: -1px;
}

@media screen and (max-width: 767px) {
    .field-button {
        align-items: center;
    }
    .field-button input {
        margin: 0 0 10px 0!important;
        display: block;
    }
}

.field-check .field-title {
    margin-bottom: 0px;
}

.field label {
    text-align: left
}

.field select,
.field input,
.field textarea {
    /* new */
    border: 0;
    background-color: transparent;
    font-size: 13px;
    font-weight: 600;
}

.field textarea {
    padding: 10px 0 2px 5px;
}

.field .field-icon {
    position: absolute;
    width: 250px;
    background-position: top right!important;
}

.field .field-icon img,
.field .field-icon i {
    position: absolute;
    top: 0;
    right: 0;
}

.field textarea::placeholder,
.field input[type=email]::placeholder,
.field input[type=text]::placeholder {
    color: #adadad;
    font-size: 16px;
    font-weight: 600;
    opacity: 1;
}

.field textarea:-ms-input-placeholder,
.field input[type=email]:-ms-input-placeholder,
.field input[type=text]:-ms-input-placeholder {
    color: #adadad;
    font-size: 16px;
    font-weight: 600;
}

.field textarea::-ms-input-placeholder,
.field input[type=email]::-ms-input-placeholder,
.field input[type=text]::-ms-input-placeholder {
    color: #adadad;
    font-size: 16px;
    font-weight: 600;
}

.field .selectric-items .selectric-scroll ul li {
    background-color: #fff;
}

.field .selectric-items .selectric-scroll ul li:hover {
    background-color: #0e70b1
}

@media screen and (min-width: 500px){
.field.col-6 {
    width: calc(50% - 33px);
    margin-right: 0px;
    margin-bottom: 0px;
    display: inline-block;
    padding: 5px;
	vertical-align:top;}

}
.field-title {
    /* flex: 1; */
    width: 100%;
    /* margin-top: -10px; */
    height: 37px;
    margin-right: 10px;
    /* margin-bottom: 7px; */
    margin-bottom:0;
    /* height: 37px; */
    height: auto;
    /* line-height: 37px; */
    display: block;
    flex-direction: row;
    align-items: center;
}
 }
}
@media screen and (max-width: 300px)
.form-container.twoP .field {
    width: calc(100% - 15px) !important;
    margin-right: 0px;
    margin-bottom: 0px;
    display: inline-block;
    padding: 5px;
}

.form-container.two .col-2-span {
	grid-column: span 2;
}

.field-content {
    /* flex: 1; */
    padding: 10px 0px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    align-items: flex-start;
    position: relative;
}

.field-text {
    color: #282828;
    font-family: "SF Pro Text";
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
}

.field textarea {
    background-color: transparent;
    width: 100%;
    height: 45px;
    border: 0;
	background: #fff;
}


/* selectric in field */

.field-content .selectric-wrapper {
	width: calc(50% - 15px);
}

.field-content.w100 .selectric-wrapper {
    width: 100%;
    background-color: #fff;
    border-radius: 4px;
    padding: 0 5px;
    margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
    .field-content .selectric-wrapper {
        width: 100%;
    }
}

.field-content .selectric {
    background: white;
}

.field-content .selectric .label {
    font-size: 16px;
    font-weight: 600;
    color: #282828;
	background: #fff;
}

.field-content .selectric .button {
    color: #282828;
}


/* ----- */

@media screen and (max-width: 767px) {
    .field-content {
        flex: 1;
    }
}

.field input,
.field>span,
.field select {
   /* margin-right: 10px;
    margin-bottom: 10px; */
    margin-bottom: 0;
    height: 27px;
	background: #fff;
	
}

.field input[type=text],
.field input[type=email],
.field input[type=password],
.field select {
    width: 100%;
    margin-right: 0;
	background: #fff;
}


/* .field input[type=texte],  */

.field .ui-selectmenu-button {
    width: calc(50% - 15px)!important;
    margin-right: 0;
    max-width: 120px;
}

#tablePersonne{
	width: 800px;
}

@media screen and (max-width: 767px) {
    .field input[type=texte],
    .field .ui-selectmenu-button {
        width: 100%!important;
        max-width: 100%;
		background: #fff;
    }
}

span.ui-selectmenu-text {
    padding-left: 10px;
}
.field-separator {
    /* margin-right: 10px;  */
    text-align: center;
    display: inline-block;
    width: 24px;
    height: 37px;
    line-height: 33px;
}

@media screen and (max-width: 460px) {
    .field-separator {
        display: none;
    }
}

.ui-accordion-content .field {
    /* padding: 0 10px; */
    /* margin-bottom: 5px; */
}


/* field-line */

.field-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}

.field-line input[type=text],
.field-line input[type=email],
.field-line select,
.field-line input,
.field-line div {
    margin-left: 0px;
    margin-right: 10px;
    max-width: 100%;
}

.field-line .noReservation,
.field-line .list {
    width: 100%;
}

.field-line .list input {
    width: 100%;
}

.field-line__title {
    /* margin-top: -10px; */
    height: 37px;
    margin-right: 10px;
    margin-bottom: 7px;
    height: auto;
    /* line-height: 37px; */
    display: flex;
    flex-direction: row;
    align-items: center;
}


/* grid */

.grid, .grids {
    display: grid;
}

@media screen and (max-width: 767px) {
    .grid{
        display: flex;
        flex-wrap: wrap;
    }
    
    .grids{
	    display: block;
    }
}

.grid-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-3A {
	grid-template-columns: auto auto auto;
}

.grid-3A>div{
	vertical-align: middle;
	margin: 5px;
}

.grid-4A {
	grid-template-columns: auto auto auto auto;
}
.grid-4A input[type=text] {
	min-width: 55px;
	text-align: right;
	padding-right: 5px;
}

.grid-4A>div{
	vertical-align: middle;
	margin: 5px;
}

.grid-4A>.controle>div{
	display: inline-block;
	min-width: 55px;
}

.grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-5 {
    grid-template-columns: auto auto auto auto 1fr;
}

.grid input {
    text-align: left;
}


/* @media screen and (min-width: 992px) {
    .field, .ui-accordion-content .field {
        padding-left: 250px;
        position: relative;
        min-height: 42px;
    }
    .field-title {
        position: absolute;
        top: 0;
        left: 10px;
        width: 240px;
    }
} 

@media screen and (max-width: 767px) {
    .ui-accordion-content .field {
        margin-top: 0;
    }
}*/


/* inform modal window */


/**
 * Default Look and Feel
 */

.alertify,
.alertify-log {
    font-family: sans-serif;
}

.alertify {
    background: #FFF;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 13px 34px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
	position: absolute;
	z-index: 99999999;
}

.alertify-text {
    border: 1px solid #CCC;
    padding: 10px;
    border-radius: 4px;
}

.alertify-button {
    border-radius: 4px;
    color: #FFF;
    font-weight: bold;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: none;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .5);
    background-image: none;
    box-shadow: 0 1px 1px rgba(11, 113, 178, 0.75);
    background-color: #0b71b2;
}

.alertify-button:hover,
.alertify-button:focus {
    outline: none;
    background-image: none;
    box-shadow: 0 1px 13px rgba(121, 121, 121, 0.75);
    background-color: #0b71b2;
}

.alertify-button:focus {
    box-shadow: 0 1px 13px rgba(121, 121, 121, 0.75);
}

.alertify-button:active {
    position: relative;
    box-shadow: none;
    background-color: #1d8bd1;
}

.alertify-button-cancel,
.alertify-button-cancel:hover,
.alertify-button-cancel:focus {
    background-color: #FE1A00;
    border: 1px solid #D83526;
}

.alertify-button-ok,
.alertify-button-ok:hover,
.alertify-button-ok:focus {
    background-color: #5CB811;
    border: 1px solid #3B7808;
}

.alertify-log {
    background: #1F1F1F;
    background: rgba(0, 0, 0, .9);
    padding: 15px;
    border-radius: 4px;
    color: #FFF;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .5);
}

.alertify-log-error {
    background: #FE1A00;
    background: rgba(254, 26, 0, .9);
}

.alertify-log-success {
    background: #5CB811;
    background: rgba(92, 184, 17, .9);
}

.alertify-message {
    max-height: 500px;
    overflow-y: auto;
}


/* table with sort */

.list3,
table.display,
table.list {
    background: transparent;
    border-spacing: 0px;
    width: 100%;
    width: 100%!important;
}

table.display,
table.list {
    border-collapse: separate;
}

tr.odd td.sorting_1,
tr.odd,
tr.even td.sorting_1,
tr.odd td.sorting_2,
td {
    background-color: transparent;
}


/* .display tr.odd:hover, .display tr.even:hover {
    background-color: transparent;
} */

.display tr.odd:hover td,
.display tr.even:hover td {
    background-color: transparent;
}


/* table > thead td, table > thead th, */

table.dataTable thead th,
.list3>thead td,
table.display>thead th {
    padding: 12px 20px 12px 5px;
    background-color: #0e70b1;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400!important;
    text-transform: uppercase;
}

.list3>thead td:first-child,
table.display>thead th:first-child {
    border-radius: 0;
}

.list3>thead td:last-child,
table.display>thead th:last-child {
    border-radius: 0;
}


/* table > tbody td, */

.list3>tbody td,
table.display>tbody td {
    border: 0;
    border-radius: 0;
    margin: 0;
    line-height: 1.8;
    font-size: 14px;
    padding: 3px 5px;
    border-top: 1px solid #d8d6d6;
    color: #595959;
    font-family: "SF Pro Text";
    font-weight: 600;
    /* white-space: nowrap; */
}

.list3>tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.list3>tbody tr:nth-child(even) {
    background-color: #eaeaea;
}
.display>tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.display>tbody tr:nth-child(even) {
    background-color: #eaeaea;
}

.list3 {
    margin-bottom: 20px;
}

.list3 select {
    height: 37px;
}
.people-box{padding-left: 10px}

/* head sorting table */

thead .sorting,
thead .sorting_asc,
thead .sorting_desc {
    position: relative;
    background: none;
}

thead .sorting::before,
thead .sorting_asc::before,
thead .sorting_desc::before,
thead .sorting::after,
thead .sorting_asc::after,
thead .sorting_desc::after {
    content: "";
    display: block;
    width: 20px;
    height: 10px;
    background: transparent;
    position: absolute;
    right: 3px;
    background-image: none;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 6px;
    text-align: center;
}

thead .sorting::before,
thead .sorting_asc::before,
thead .sorting_desc::before {
    content: "\e908";
    top: calc(50% - 10px);
    line-height: 15px;
    text-align: center;
}

thead .sorting::after,
thead .sorting_asc::after,
thead .sorting_desc::after {
    bottom: calc(50% - 10px);
    content: "\e907";
}

thead .sorting_desc::after {
    display: none;
}

thead .sorting_asc::before {
    display: none;
}

thead .sorting:nth-last-child(2)::before,
thead .sorting:last-child::before,
thead .sorting:nth-last-child(2)::after,
thead .sorting:last-child::after {
    display: none;
}


/* list/ Small form in accordion */

table.list tr td {
    background-color: transparent;
    border: 0;
}

.list>tbody tr:first-child {
    background-color: transparent;
    border: 0
}

.list>tbody tr td {
    border: 0!important;
}


/* color picker */

.kolorPicker-wrapper {
    width: 100%;
}

.kolorPicker-wrapper div.kolorpicker-palette ul li {
    height: auto;
}

.kolorPicker-wrapper div.kolorpicker-palette ul li:before {
    display: none;
}

input.kolorPicker {
    z-index: 1!important;
    background-position: 98% 7px;
}

#kolorPicker {
    z-index: 2!important;
    width: 260px;
}

@media screen and (max-width: 450px) {
    #kolorPicker {
        left: 50%;
        transform: translateX(-50%);
    }
}

div.x-close-box {
    height: 13px;
}


/* flash buttons */
.dt-buttons {
   /* position: absolute; */
   display: none;
}

button.dt-button,
button.DTTT_button {
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(11, 113, 178, 0.75);
    background-color: #0b71b2;
    border: 0;
    color: #ffffff;
    font-size: 14px;
    height: auto;
    white-space: nowrap;
    margin-bottom: 5px;
}

button.dt-button:hover,
button.dt-button:focus,
button.DTTT_button:hover,
button.DTTT_button:focus {
    box-shadow: 0 1px 13px rgba(11, 113, 178, 0.75);
    background-color: #0b71b2;
}

button.dt-button:active,
button.DTTT_button:active {
    background-color: #1d8bd1;
    box-shadow: none;
}


/* -- */

@media screen and (max-width:767px) {
    button.DTTT_button {
        float: none;
    }
    div.DTTT_container {
        float: none;
        width: 100%;
    }
    .dataTables_filter {
        margin-top: 2px;
        width: auto;
        float: none;
        text-align: left;
        margin-bottom: 10px;
    }
}


/* -- */


/* modal */

#sb-wrapper-inner {
    border: 0;
    border-radius: 4px;
}

/* new table */

.icon-in-table {
    font-size: 19px;
    color: #0b71b2;
    display: block;
    text-align: center;
}

.fg-button {
    color: #0b71b2!important;
    opacity: 1!important;
}

@media screen and (max-width: 992px) {
    #hdtable_reservation,
    #hdtable_reservation4_1 {
        display: none!important;
    }
    
	#tablePersonne{
		width: 100%;
	}
}


/*  */

@media screen and (max-width: 992px) {
    .page-nav,
    .page-nav.hide {
        position: absolute;
        top: auto;
        left: 0;
        height: auto;
        z-index: 100;
        /* display: none; */
        position: static;
        width: 0;
        padding: 0;
        margin: 0;
        min-width: 0;
    }
    .page-nav__wrap {
        padding: 0;
        position: static;
    }
    .page-nav .page-nav__toggle,
    .page-nav .page-nav__list {
        display: none;
    }
    .page-nav .icon-zcalendar:before {
        color: #fff;
    }
    .small-calendar {
        display: none;
        position: absolute;
        top: 67px;
        border-bottom: 0;
        left: 10px;
    }
    .page-nav.hide .small-calendar {
        display: block;
    }
    .page-nav.hide .big-calendar.active {
        top: 120px;
        left: 15px;
    }
    .page-nav.hide .big-calendar.active .hasDatepicker .ui-widget.ui-widget-content {
        padding-top: 10px;
    }
}

@media screen and (max-width: 768px) {
    .small-calendar {
        top: 87px;
    }
    .page-nav.hide .big-calendar.active {
        top: 152px;
        left: 15px;
    }
}


/* -- */

.alertify-cover {
    background-color: black;
    opacity: .2;
}

.alert-wrapper {
    font-weight: 600;
    font-size: 16px;
    width: 100%;
    padding: 17px 0 18px;
    margin-bottom: 5px;
    border-radius: 4px;
}

.alert-wrapper .alert-text {
    position: relative;
    line-height: 26px;
    min-height: 26px;
    padding: 0 30px;
    margin: 0 2%;
    background: transparent;
    text-align: center;
}

.alert-wrapper .alert-text .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 26px;
    display: block;
    background: url('../../image_site/alert_icon_close.png') no-repeat;
    text-indent: -9999px;
    /*display: none;*/
}

.push-down .alert-wrapper .grid_4 {
    margin-bottom: 0 !important;
}

.alert-wrapper.error {
    color: #E83D0E;
    background: #ffcdcd;
}

.alert-wrapper.error .alert-text {
    background: transparent;
}

.alert-wrapper.warning {
    color: #e8a911;
    background: #ffffd7 url('../../image_site/alert_pattern.png') repeat top left;
}

.alert-wrapper.warning .alert-text {
    background: transparent;
}

.alert-wrapper.confirm {
    color: #54a306;
    background: #ddf4b1;
}

.alert-wrapper.confirm .alert-text {
    background: transparent;
}

.alert-wrapper.info {
    color: #2766a1;
    background: #ddf4b1;
}

.alert-wrapper.info .alert-text {
    background: transparent;
}

.dataTables_filter {
    margin-bottom: 10px;
}

.dataTables_paginate,
.dataTables_info,
.dataTables_length {
    /* display: none!important; */
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #0e70b1 !important;
    /* font-weight: 600; */
    border: 1px solid transparent;
    background-color: transparent;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, transparent));
    background: -webkit-linear-gradient(top, transparent 0%, transparent 100%);
    background: -moz-linear-gradient(top, transparent 0%, transparent 100%);
    background: -ms-linear-gradient(top, transparent 0%, transparent 100%);
    background: -o-linear-gradient(top, transparent 0%, transparent 100%);
    background: linear-gradient(to bottom, transparent 0%, transparent 100%);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #0e70b1 !important;
    font-weight: 600;
    border: 1px solid transparent;
    background-color: transparent;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, transparent));
    background: -webkit-linear-gradient(top, transparent 0%, transparent 100%);
    background: -moz-linear-gradient(top, transparent 0%, transparent 100%);
    background: -ms-linear-gradient(top, transparent 0%, transparent 100%);
    background: -o-linear-gradient(top, transparent 0%, transparent 100%);
    background: linear-gradient(to bottom, transparent 0%, transparent 100%);
}


/* login page */

.login-page .field-content {
    margin-bottom: 15px;
}

.login-page .field-title {
    margin-bottom: 10px;
}

.login-page .field-content--button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


/* time form */

.field .selectric-w100,
.field input.w100,
.field .w100,
.time-form .field .w100,
.time-form .field input.w100 {
    width: 100%;
}

.field input.w50,
.field .w50,
.time-form .field .w50,
.time-form .field input.w50 {
    width: calc(50% - 15px);
     max-width: 90px;
}
.field input.w51, .field .w51, .time-form .field .w51, .time-form .field input.w51 {
    width: calc(50% - 15px);
    max-width: 120px;
}
.field input.w52, .field .w52, .time-form .field .w52, .time-form .field input.w52 {
    width: calc(50% - 15px);
    max-width: 145px;
}
span#_heureD-button {
    width: 35% !important;
}
span#_heureF-button {
    width: 35% !important;
    margin-left: 10px;
}

.time-form .w33,
.time-form input.w33 {
    width: calc(33% - 20px);
    max-width: 90px;
}

@media screen and (max-width: 450px) {
    .time-form .w33,
    .time-form input.w33 {
        width: 100%;
    }
}

.time-form .heure {
    max-width: 90px;
}

.time-form .selectric-w50 {
    max-width: 90px;
}


/* inputs */

input[type=radio]+label.ui-button:hover,
input[type=checkbox]+label.ui-button:hover,
input[type=radio]+label.ui-button:hover,
input[type=checkbox]+label.ui-button:hover,
input[type=radio]+label.ui-button:focus,
input[type=checkbox]+label.ui-button:focus,
input[type=radio]+label.ui-button:focus,
input[type=checkbox]+label.ui-button:focus {
    background: transparent;
    border: 0;
}


/*  */

.country-list {
    background-color: #fff;
    padding: 7px 5px;
}

.country-list li {
    margin: 3px 0;
    border-radius: 4px;
    padding: 4px;
}

.country-list li::before {
    content: "";
    display: none;
}

.field input[type=texte]#tel {
    width: auto!important;
    max-width: 100%!important;
}

.error_tab_vide {
    padding: 0;
}

.listPersonne input#suggestBox {
    width: 100%;
}

ul.token-input-input-token-facebook,
ul.token-input-list-facebook {
    width: 100%!important;
}

.token-input-list-facebook li {
    list-style: none;
}

.token-input-list-facebook li::before {
    display: none;
}

.token-input-dropdown-facebook li:before {
    display: none!important;
}


/* test color */

th.blue,
th.red {
    color: white
}


/*  */

.selectric-select{
	background-color: white;
}

.selectric-hide-select {
    width: 100%;
    overflow: visible;
}

.selectric-hide-select select {
    left: 0;
    opacity: 0;
}

.selectric-select-multiple .selectric-hide-select {
    overflow: hidden;
}


/*  */

table.editTable td:last-child {
    text-align: left;
}

table.editTable td:nth-last-child(2) {
    text-align: right;
}


/*  */

.two-col {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.two-col .col {
    width: 50%!important;
}

.two-col .col:last-child {
    padding-left: 15px;
}

@media screen and (max-width: 767px) {
    .two-col {
        display: flex;
        flex-direction: column;
    }
    .two-col .col {
        width: 100%!important;
    }
    .two-col .col:last-child {
        padding-left: 0;
    }
}


/*  table import  excel */

.excel-table {}

.excel-table .excel-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.excel-table .excel-row .changeChoix {
    height: 37px;
    width: auto;
    margin-bottom: 0px;
    margin-right: 10px;
}

.excel-table .excel-row .changeChoix+input[type=text] {
    margin-right: 10px;
}

.excel-table .excel-row input[type=text] {
    width: auto;
}

.excel-table .excel-row .check+label {
    text-align: left!important;
    padding-top: 2px!important;
    margin-top: 0!important;
    display: inline-block;
}

@media screen and (max-width: 768px) {
    .excel-table .excel-row {
        display: block;
    }
    .excel-table .excel-row .changeChoix {
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
    }
    .excel-table .excel-row .changeChoix+input[type=text] {
        margin-right: 0;
    }
    .excel-table .excel-row input[type=text] {
        width: 100%;
    }
    .excel-table .excel-row .check+label {
        text-align: left!important;
        padding-top: 2px!important;
        margin-top: 20px!important;
        display: inline-block;
    }
}


/* two column */
@media screen and (max-width: 799px) {
    .form-container.two {
	    display: grid;
	    grid-template-columns: repeat(1, 1fr);
	    grid-gap: 10px;
    }
}

@media screen and (min-width: 800px) and (max-width: 1299px) {
    .form-container.two {
	    display: grid;
	    grid-template-columns: repeat(2, 1fr);
	    grid-gap: 10px;
    }
}

@media screen and (min-width: 1300px) and (max-width: 1899px) {
    .form-container.two {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    grid-gap: 10px;
    }
}

@media screen and (min-width: 1900px) and (max-width: 2499px) {
    .form-container.two {
	    display: grid;
	    grid-template-columns: repeat(4, 1fr);
	    grid-gap: 10px;
    }
}

@media screen and (min-width: 2500px) {
    .form-container.two {
	    display: grid;
	    grid-template-columns: repeat(5, 1fr);
	    grid-gap: 10px;
    }
}

.form-container.two.twoColu {
    display: grid;
    grid-template-columns: 200px auto;
    grid-gap: 10px;
}

.form-container.two.twoEgal {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 10px;
}
/* two column popup */


.twoColumn {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 5px;
}

@media screen and (min-width: 700px) {
    .form-container.twoP {
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
		padding: 0px 10px;

    }
    .form-container.twoP .field {
        width: calc(50% - 15px);
        margin-right: 0px;
        margin-bottom: 0px;
        display: inline-block;
        padding: 5px;
	
    }
}


/* tabs */

.ui-widget.ui-widget-content.tabs {
    box-shadow: none;
    background-color: transparent;
}

.ui-accordion .ui-widget.ui-widget-content.ui-tabs {
    background-color: #fff;
    padding-left: 0;
    padding-right: 0;
}

.tabs.ui-tabs .ui-tabs-active {
    background-color: transparent;
}

.ui-accordion .ui-widget.ui-widget-content.tabs .ui-widget-content {
    background-color: #fff
}

.ui-accordion .ui-tabs-panel.ui-widget-content {
    background: #fff
}

.ui-tabs .ui-tabs-nav {
    padding: 0;
    /* background-color: #fff;  */
    background-color: #0e70b1;
    border-radius: 4px 4px 0 0;
}

.ui-tabs .ui-tabs-nav li:before {
    display: none;
}

.ui-tabs .ui-tabs-nav li:hover,
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    /* border-radius: 4px 4px 0 0;
    background-color: #fff; */
    font-weight: 400;
}

.ui-tabs .ui-tabs-nav li:hover a.ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-active a.ui-tabs-anchor {
    /* text-decoration: underline;     */
    /* color: #0e70b1;
    background-color: #fff; */
    position: relative;
}

.ui-tabs .ui-tabs-nav li:hover a.ui-tabs-anchor:before,
.ui-tabs .ui-tabs-nav li.ui-tabs-active a.ui-tabs-anchor:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 15px;
    width: calc(100% - 30px);
    height: 5px;
    background-color: #ffffff;
    transition: all .2s linear;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav .ui-tabs-anchor:focus {
    outline: none;
}

.ui-tabs .ui-tabs-nav li,
.ui-tabs .ui-tabs-nav li:hover {
    margin-top: 0;
}

.ui-tabs .ui-tabs-nav li a {
    font-size: 15px;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 10px;
    /* background-color: #0e70b1; */
    color: #fff;
    background-color: #0e70b1;
    border-radius: 4px 4px 0 0;
}


/* - */

.ui-tabs-panel {
    box-shadow: 0 7px 17px rgba(0, 0, 0, 0.1);
}

.ui-accordion .ui-tabs-panel {
    box-shadow: none;
}

.ui-tabs-panel ul li {
    color: #000;
}


/* button grid */

.grid>div div,
.grid>div span,
.grid>div a {
    height: calc(100% - 20px);
    display: block;
    height: 100%;
    display: block;
    box-sizing: border-box!important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
}


/* .qtip.qtip-shadow > li::before {
    display: none!important;
} */


/* breeeed */

@media screen and (min-width: 992px) {
    #preference.col-in-two {
        width: calc(50% - 23px);
        padding-right: 21px;
    }
}


/* fix list */

@media screen and (min-width: 500px){
.field.coll-6 {
    width: calc(49% - 13px);
    margin-right: 8px;
    margin-bottom: 0px;
    display: inline-block;
    padding: 5px;
}
}
@media screen and (min-width: 500px){
.field.coll-4 {
    width: calc(32% - 6px);
    margin-right: 4px;
    margin-bottom: 0px;
    display: inline-block;
    padding: 5px;
}
}
.listOfItems_fix.fix {
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: 2;
}

.ui-draggable-dragging {
    opacity: .7;
}

td span.click {
    color: #0071bc!important;
}

table.methode,
table#mthPaiement {
    background-color: #f5f5f5;
}

/*table#facture td span {
    color: #595959!important;
}*/

.cke_reset {
    width: 100%!important;
}

table.display tr.odd:hover td, table.list3 tr.odd:hover td, table.display tr.odd:hover td.click.left.fancy.blue.sorting_1,
table.display tr.even:hover td, table.list3 tr.even:hover td, table.display tr.even:hover td.click.left.fancy.blue.sorting_1 {
    /*background-color: transparent*/
}

.fix-accordion.ui-accordion .ui-widget-content {
    height: auto!important
}

.reservation tr:first-child th:first-child {
    word-wrap: normal;
    min-width: 50px;
}

.table_reservation tbody tr td:first-child {
    word-wrap: normal;
    min-width: 50px;
}

.emailformbox {
	margin-top:0px;
}

.passformbox {
	margin-top: 21px;
}
div#sb-wrapper {
    width: 730px !important;
}
button#ToolTables_SS_222_0 {
    display: none;
}
label.labl {
    padding: 5px;
}
.field.col-6.sponser,.formulaire .field.col-6 {
    margin: 0 10px 10px;
}
.fix-header .reservation td{word-break:initial;
}
.fix-header .reservation .entete td{ 
padding-top:0;
padding-bottom:0;}

 .input-box-center .text-center{text-align:center;}
 .input-box-center .field-content{width:auto;
 margin:0 auto;}
 
 .selectize-control .selectize-input{z-index:0;}
 
.dt-buttons {
    /*position: absolute;*/
    display: block;
}
.dt-buttons button{padding: 6px 12px; cursor:pointer;}

table.display>tbody td.red{
	color: red;
}

table.display>tbody td.blue{
	color: blue;
}

table.display>tbody td.right{
	text-align: right;
}

.fancybox-content body{
	overflow: hidden;
}

div.odd, tr.odd{
	background-color: #f3f7fa;
}

div.even, tr.even{
	background-color: #eaeaea;
}

.fancybox-slide--iframe .fancybox-content {
    padding: 0;
    width: 96%;
    max-width: 96%;
    overflow: visible;
    background: #fff;
}


@media screen and (min-width: 992px) {
    .form-containerPopup.two {
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
    }
    .form-containerPopup.two .field {
        width: calc(50% - 77px);
        margin-right: 20px;
        display: inline-block;
    }
}

@media print 
{
	.field{
		margin: 0;
		padding: 0;
		display: inline;
	}
	
	.field-title{
		display: inline;
	}
	
	.field-content{
		display: inline;
	}
	
	.bouton {
		display: none;
	}
	
	.display, .header, .text-page, .page-nav, .page-nav__toggle, .page-nav__show, .page-nav__hide, .page-nav__wrap, .small-calendar, .choix_jour, .page-nav__list, #pied, .title-page{
		display: none;
	}
	
	ul{
		display: none;
	}
	
}