@font-face {
    font-family: "Vonnes";
    src: url('../fonts/Vonnes-BookCond.otf');
    font-weight: 500;
}

@font-face {
    font-family: "Vonnes";
    src: url('../fonts/Vonnes-BoldCond.otf');
    font-weight: 700;
}

body,h1,h2,h3,h4,h5,h6,p{
    /*font-family: "Vonnes" !important;*/
}

.loginbody {
    background-color: #313131;
}

#loginform i {
    color: #e1061f;
}

.form-signin input[type="text"] {
    margin-bottom: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vertical-offset-100 {
    padding-top: 100px;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
}

.panel {
    margin-bottom: 20px;
    background-color: transparent;
    border: none;
}

.panel-default > .panel-heading {
    background-image: none;
    background-color: transparent;
    border: none;
}

.panel-login {
    width: 100%;
}

#loginform .input-group-addon{
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    padding-right: 35px;
}

#loginform .form-control{
    border: none;
    background-color: #fff;
    border-radius: 0;
    height: 40px;
}

.custom-btn {
    background: transparent;
    color: #FFF;
    border: 1px solid #FFF;
    border-radius: 8px;
}

.custom-btn:hover {
    color: #e1061f;
    background: #FFF;
}

.custom-btn-black{
    background: #313131 !important;
    color: #FFF !important;
    border: 1px solid #313131 !important;
    border-radius: 0px !important;
    text-transform: uppercase;
    padding: 12px 30px !important;
}

.link{
    color: #FFF;
}

.link-black{
    color: #313131;
    text-transform: uppercase;
    font-weight: bold;
}

table#ventes thead tr .header {
    background-image: url(../../assets/img/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

table#ventes thead tr .headerSortUp {
    background-image: url(../../assets/img/asc.gif);
}

table#ventes thead tr .headerSortDown {
    background-image: url(../../assets/img/desc.gif);
}

.removeOption {
    line-height: 30px;
    font-size: 20px;
}

.delta.green {
    border: 1px solid green;
    color: green;
}

.delta.red {
    border: 1px solid red;
    color: red;
}

.liste-session > div {
    margin-bottom: 15px;
}

.liste-session .content-session {
    background: #FFF;
    color: #e1061f;
    text-align: center;
    padding: 5px;
    cursor: pointer;
}

.liste-session .content-session.disabled {
    background: #a8a8a8;
    color: #FFF;
    cursor: inherit;
}

.liste-session .content-session.disabled .num-session {
    border-bottom: 1px solid #FFF;
}

.liste-session .content-session:hover,
.liste-session .content-session.active {
    background: #e1061f;
    color: #FFF;
}

.liste-session > div .num-session {
    border-bottom: 1px solid #e1061f;
    font-size: 80px;
    font-weight: bold;
    margin-bottom: 5px;
}

.liste-session .content-session:hover .num-session,
.liste-session .content-session.active .num-session {
    border-bottom: 1px solid #FFF;
}

.liste-session > div small {
    display: block;
}

.nb-jour .content-nb {
    background: #FFF;
    color: #e1061f;
    text-align: center;
    padding: 5px;
    cursor: pointer;
    font-size: 50px;
    font-weight: bold;
}

.nb-jour .content-nb:hover,
.nb-jour .content-nb.active {
    background: #e1061f;
    color: #FFF;
}

.nb-jour .content-nb.disabled {
    background: #a8a8a8;
    color: #FFF;
    cursor: inherit;
}

.elite,
.agree {
    color: #FFF;
    display: none;
    font-size: 18px;
}


/*Custom */

body {
    font-family: 'Roboto', sans-serif;
}

.wrapper-bg {
    background: url(../img/background.jpg) no-repeat;
}

.wrapper-bg.wrapper-bg-2018 {
    background: url(../img/HP_Intranet_Specialized2017.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
}

.wrapper-bg-home {
    background: url(../img/HP_Intranet_Specialized.jpg) no-repeat;
}

.wrapper-bg-contrat {
    background: url(../img_v2/image_fond.jpg) no-repeat;
}

.wrapper-bg.skin-custom .wrapper,
.wrapper-bg-contrat.skin-custom .wrapper,
.wrapper-bg-home.skin-custom .wrapper {
    background-color: transparent;
}

.container-home {
    margin-top: 50px;
    margin-bottom: 10px;
}

.container-home .container-logo{
    margin-bottom: 60px;
}

.container-home h1{
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 60px;
    line-height: 35px;
}

.container-home h1 small{
    color: #FFF;
    font-size: 30%;
}

.btn-back {
    padding: 15px 20px;
    color: #FFF;
    background: #e1061f;
    font-size: 20px;
    cursor: pointer;
    font-weight: bold;
}

.btn-back:hover {
    color: #FFF;
    background: #a8a8a8;
}

.btn-home {
    padding: 15px 20px;
    width: 30%;
    color: #FFF;
    background: #313131;
    font-size: 20px;
    cursor: pointer;
    font-weight: bold;
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    text-transform: uppercase;
}

.btn-home:hover {
    color: #FFF;
    background: #a8a8a8;
}

.btn-logout{
    margin: 0 auto;
    margin-top: 50px;
    width: 30%;
}

.btn-logout .btn{
    border: 1px solid #FFF;
    border-radius: 8px;
}

.text-upper {
    text-transform: uppercase;
}

.title-header {
    background: #e1061f;
}

h1 {
    margin: 10px 0;
    color: #FFF;
}

h2 {
    color: #313131;
    font-size: 26px;
}

.form-horizontal label {
    color: #FFF;
    font-size: 16px;
    font-weight: normal;
}

.infoRoulerRoutePersonPerson,
.infoRoulerRoutePerson,
.infoRouler,
.hourtrans,
.infoRoulerperson,
.infoRoulerperson1,
.infoRoulerRoute,
.infoRoulerperson2 {
    display: none;
}

.visible {
    display: block !important;
}

.deleteperson {
    cursor: pointer;
}

#header {
    background: url(../img_v2/bandeau.jpg) no-repeat;
    height: 210px;
    background-size: cover;
    background-position: center center;
}

#header.contrat-bg {
    background: url(../img_v2/bandeau.jpg) no-repeat;
}

#header.contrat-bg h1{
    margin:0;
    line-height: 210px;
    font-size: 60px;

}

.select2-container {
    width: 100% !important;
}

.liste-magasin,
.liste-session,
.nb-jour,
.coordonnes {
    margin-bottom: 20px;
}

.margintop20 {
    margin-top: 20px;
}

.hourtrans .input-group .input-group-addon {
    border: none;
    background-color: transparent;
}

.add-person {
    padding: 10px;
    width: 100%;
    color: #FFF;
    background: #e1061f;
    font-size: 20px;
    cursor: pointer;
    font-weight: bold;
}

.coo-resp {
    display: none;
    border: 1px solid #313131;
    color: #313131;
    padding: 15px;
}

.coo-resp h3 {
    margin-top: 0px;
}

.title-person {
    padding: 10px;
    width: 100%;
    color: #FFF;
    background: #e1061f;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.content-person {
    border-bottom: 2px solid #e1061f;
    border-top: 2px solid #e1061f;
    padding-top: 20px;
}

.table .thead {
    background: #a8a8a8;
    color: #FFF;
    border: none;
}

.table .thead tr,
.table .thead tr th,
.table > tbody > tr.thead > th {
    border-top: none;
}

.table > tbody > tr > td {
    border-top: 1px solid #a8a8a8 !important;
}

.h2table {
    color: #e1061f;
    margin: 0px;
    font-weight: 600;
    margin-top: 10px;
}

.ptable {
    color: #FFF;
    font-size: 16px;
}

.square {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: #FFF;
    color: #e1061f;
    font-size: 40px;
    font-weight: 600;
}

.flechetd:before {
    font-size: 40px;
    line-height: 80px;
    cursor: pointer;
}

.flechetd:hover:before {
    color: #e1061f;
}

.content {
    min-height: 750px !important;
}


/* iCheck plugin Square skin, grey
----------------------------------- */

.icheckbox_square-grey,
.iradio_square-grey {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0 10px 0 0;
    padding: 0;
    width: 22px;
    height: 22px;
    background: url(../img/grey.png) no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox_square-grey {
    background-position: 0 0;
}

.icheckbox_square-grey.hover {
    background-position: -24px 0;
}

.icheckbox_square-grey.checked {
    background-position: -48px 0;
}

.icheckbox_square-grey.disabled {
    background-position: -72px 0;
    cursor: default;
}

.icheckbox_square-grey.checked.disabled {
    background-position: -96px 0;
}

.iradio_square-grey {
    background-position: -120px 0;
}

.iradio_square-grey.hover {
    background-position: -144px 0;
}

.iradio_square-grey.checked {
    background-position: -168px 0;
}

.iradio_square-grey.disabled {
    background-position: -192px 0;
    cursor: default;
}

.iradio_square-grey.checked.disabled {
    background-position: -216px 0;
}


/* HiDPI support */

@media (-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
    .icheckbox_square-grey,
    .iradio_square-grey {
        background-image: url(../img/grey@2x.png);
        -webkit-background-size: 240px 24px;
        background-size: 240px 24px;
    }
}

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?iw7jci');
    src: url('../fonts/icomoon.eot?iw7jci#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?iw7jci') format('truetype'), url('../fonts/icomoon.woff?iw7jci') format('woff'), url('../fonts/icomoon.svg?iw7jci#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[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;
    vertical-align: middle;
    color: #FFF;
    font-size: 24px;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-fleche:before {
    content: "\e900";
}

.icon-people:before {
    content: "\e901";
}

.icon-heure:before {
    content: "\e902";
}

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

.relative {
    position: relative;
    width: 100%;
    height: 200px;
}

.m-signature-pad {
    position: absolute;
    font-size: 10px;
    width: 100%;
    height: 100%;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
}

.m-signature-pad:before,
.m-signature-pad:after {
    position: absolute;
    z-index: -1;
    content: "";
    width: 40%;
    height: 10px;
    left: 20px;
    bottom: 10px;
    background: transparent;
    -webkit-transform: skew(-3deg) rotate(-3deg);
    -moz-transform: skew(-3deg) rotate(-3deg);
    -ms-transform: skew(-3deg) rotate(-3deg);
    -o-transform: skew(-3deg) rotate(-3deg);
    transform: skew(-3deg) rotate(-3deg);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.m-signature-pad:after {
    left: auto;
    right: 20px;
    -webkit-transform: skew(3deg) rotate(3deg);
    -moz-transform: skew(3deg) rotate(3deg);
    -ms-transform: skew(3deg) rotate(3deg);
    -o-transform: skew(3deg) rotate(3deg);
    transform: skew(3deg) rotate(3deg);
}

.m-signature-pad--body {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    bottom: 20px;
    border: 1px solid #f4f4f4;
}

.m-signature-pad--body canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    cursor: default;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.wizard .content-signature {
    /*z-index: 99999;*/
    border-radius: 4px;
    text-align: center;
}

.wizard .m-signature-pad {
    border-radius: 4px;
}

.wizard .m-signature-pad canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: default;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.clear {
    margin-top: 5px;
}

.content .form-horizontal .radio {
    padding-top: 0px;
}

.wizard,
.tabcontrol {
    display: block;
    width: 100%;
    overflow: hidden;
}

.wizard>.steps {
    position: relative;
    display: block;
    width: 100%;
}

.wizard ul,
.tabcontrol ul {
    list-style: none!important;
    padding: 0;
    margin: 0;
    text-align: center;
}

.wizard>.steps>ul>li,
.wizard>.actions>ul>li {
    display: inline-block;
}

.wizard ul>li,
.tabcontrol ul>li {
    display: block;
    padding: 0;
}

.wizard>.steps .current a,
.wizard>.steps .current a:hover,
.wizard>.steps .current a:active {
    background: #313131;
    color: #fff;
    cursor: default;
}

.wizard>.steps .done a,
.wizard>.steps .done a:hover,
.wizard>.steps .done a:active {
    background: #6C000C;
    color: #fff;
}

.wizard>.steps a,
.wizard>.steps a:hover,
.wizard>.steps a:active {
    display: block;
    width: auto;
    margin: 0 .5em .5em;
    padding: 1em 1em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard>.steps .disabled a,
.wizard>.steps .disabled a:hover,
.wizard>.steps .disabled a:active {
    background: #eee;
    color: #aaa;
    cursor: default;
}

.wizard a,
.tabcontrol a {
    outline: 0;
}

.wizard>.content {
    display: block;
    margin: .5em;
    min-height: 35em;
    overflow: hidden;
    position: relative;
    width: auto;
}

.wizard>.content>.body {
    background: #eee;
    float: left;
    position: absolute;
    width: 60%;
    left: 50%;
    -ms-transform: translateX(-50%);
    /* IE 9 */
    -webkit-transform: translateX(-50%);
    /* Chrome, Safari, Opera */
    transform: translateX(-50%);
    height: 95%;
    padding: 2.5%;
    overflow-y: auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard>.content>.title,
.tabcontrol>.content>.title {
    position: absolute;
    left: -999em;
}

.wizard>.actions {
    position: relative;
    display: block;
    text-align: center;
    margin-top: 30px;
    width: 100%;
}

.wizard>.actions>ul {
    display: inline-block;
    text-align: right;
}

.wizard>.actions>ul>li {
    margin: 0 .5em;
}

.wizard>.actions .disabled a,
.wizard>.actions .disabled a:hover,
.wizard>.actions .disabled a:active {
    background: #eee;
    color: #aaa;
}

.wizard>.actions a,
.wizard>.actions a:hover,
.wizard>.actions a:active {
    background: #313131;
    color: #fff;
    display: block;
    padding: .5em 1em;
    text-decoration: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.white {
    color: #313131;
    text-transform: uppercase;
    font-size: 2em;
    text-align: center;
    margin-bottom: 50px;
}

.content-signature .relative {
    width: 600px;
    margin: 0 auto;
    height: 300px;
}

#contrat-table {
    color: #313131;
}

.wizard .content p {
    font-size: 16px;
}

.actions li a {
    padding: 1em 2em;
    font-size: 24px;
}

.content-signature .clear {
    background: white;
    z-index: 555555;
}

@media screen and (max-width: 1024px) {
    .m-signature-pad {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        min-width: 250px;
        min-height: 140px;
    }
    .content-signature .m-signature-pad {
        min-width: inherit;
        min-height: inherit;
    }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .m-signature-pad {
        margin: 10%;
    }
    .content-signature .m-signature-pad {
        margin: 0;
    }
}

@media screen and (max-height: 320px) {
    .m-signature-pad--body {
        left: 0;
        right: 0;
        top: 0;
        bottom: 32px;
    }
}


/* CSS */


/* Extra Small Devices, .visible-xs-* */


/* Landscape phones and portrait tablets */

@media (max-width: 767px) {
    .btn-home {
        width: 100%;
    }
    #header {
        background: url(../img/header.png) no-repeat;
        height: 95px;
        background-size: contain;
    }
    .relative {
        height: 300px;
    }
    .wizard>.content>.body {
        width: 100%;
    }
    .content-img img {
        display: block;
        max-width: 100%;
        height: auto;
    }
}


/* Small Devices, .visible-sm-* */


/* Portrait tablets and small desktops */

@media (min-width: 768px) and (max-width: 992px) {
    .wizard>.content>.body {
        width: 100%;
    }
    .wizard .content {
        min-height: 900px !important;
    }
}


/* Medium Devices, .visible-md-* */


/* Landscape tablets and medium desktops */

@media (min-width: 992px) and (max-width: 1199px) {}


/* CSS */


/* Extra Small Devices, .visible-xs-* */


/* Landscape phones and portrait tablets */

@media (max-width: 481px) {}

.content-signature label {
    color: #FFF;
}

.container-spinner {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}


/* Transparent Overlay */

.container-spinner:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.spinner {
    margin: 100px auto 0;
    width: 70px;
    text-align: center;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #e1061f;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.skin-custom .wrapper.background-color{
    background-color: #FFF !important;
}

.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single{
    border: 1px solid #313131 !important;
}