@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

html,
body {
    overscroll-behavior-y: contain;
}

body {
    background-image: url(../images/what-the-hex.png);
    font-family: 'Roboto', sans-serif;
    background-repeat: repeat;
    background-color: rgba(0, 92, 185, 0.2);
}

.toggle-rabais i, #new_quote_remplacement_modeleCarrelage_dos {
    display: none;
}

.success-commande {
    color: #28a745;
    text-decoration: underline;
    cursor: pointer;
}

.fa-eraser, .view-recu {
    cursor: pointer;
}

#oui-travaux, #non-travaux, #value_facture, #montant-complet, #montant-partiel {
    display: none;
    width: 100%;
}

#main-content {
    margin-bottom: 1rem;
}

h2, h2.blue-bg {
    font-size: 1.3rem !important;
    font-weight: 500 !important;
    width: 100%;
}

#staging-warning {
    position: fixed;
    bottom: 0;
    z-index: 999999;
    width: 100%;
    margin: 0;
    text-align: center;
}

.red {
    color: #dc3545;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Chercher.."
}

.img-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

}

#photos {
    display: flex;
}

#photos > div {
    position: relative;
    width: 23%;
    height: 140px;
    margin: 10px .5rem 10px 0;
}

#photos > div > span {
    cursor: pointer;
    z-index: 99999;
    position: absolute;
    top: -7px;
    right: -6px;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: white;
    color: red;
    border-radius: 50%;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}

#form-camion .hide-camion {
    display: none;
}

.table-responsive-sm {
    width: 100%;
}

#signature-preview img {
    max-width: 100%;
    width: 100%;
}

.alert-light {
    background-color: #E8E8E8;
    border-color: #E8E8E8
}

.alert-orange {
    background-color: #F2B705;
    border-color: #F2B705;
}

.selected-autre {
    text-decoration: underline;
    cursor: pointer;
}

.smaller-font {
    font-size: 0.9em !important;
}

h2 .smaller-font {
    text-transform: none;
    font-size: 0.65em;
}

.commande-line {
    border: 1px solid black;
    padding: 20px 10px;
    margin-bottom: 1rem;
    border-radius: 6px;
}

.client-autre-contact {
    display: block;
    width: 100%;
}

.alert- {
    width: 100%;
}

.sum-total {
    text-align: right;
}

label:not(.custom-control-label) {
    font-size: 0.9em;
}

#autre-service-inputs-container {
    width: 100%;
}

#autre-service-inputs-container .autre-service-container {
    display: none !important;
}

.loader {
    font-size: 10px;
    margin: 4px 10px;
    display: none;
    text-indent: -9999em;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0009b8;
    background: -moz-linear-gradient(left, #0009b8 10%, rgba(0, 9, 184, 0) 42%);
    background: -webkit-linear-gradient(left, #0009b8 10%, rgba(0, 9, 184, 0) 42%);
    background: -o-linear-gradient(left, #0009b8 10%, rgba(0, 9, 184, 0) 42%);
    background: -ms-linear-gradient(left, #0009b8 10%, rgba(0, 9, 184, 0) 42%);
    background: linear-gradient(to right, #0009b8 10%, rgba(0, 9, 184, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.loader:before {
    width: 50%;
    height: 50%;
    background: #0009b8;
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}

.loader:after {
    background: #fff;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


.loader.show-loader {
    display: flex;
}

.commande-checkbox {
    position: relative;
    top: 2px;
}

h3 {
    font-size: 1rem;
}

#montant_total {
    font-weight: bold;
}

h2.form-name {
    font-weight: 700;
    padding: 11px 15px;
}

label:not(.custom-control-label) {
    font-weight: 400;
}

.master-container-autre-service {
    display: block;
    width: 100%;
}

.form-group-special {
    display: flex;
    flex-direction: row;
}

.toggle-rabais {
    border: none;
    background: transparent;
}

.toggle-rabais:focus {
    outline: none;
}

.liste-travaux-reprise {
    margin-bottom: 0.5rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
}

.toggle-rabais i {
    font-size: 0.9em;
}

.half {
    max-width: 50%;
    width: 50%;
    float: left;
}

.half:first-of-type {
    padding-right: 2%;
}

.half:last-of-type {
    padding-left: 2%;
}

.form-id {
    font-weight: 600;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.btn-primary {
    background-color: rgba(0, 92, 184, 0.9);
    border: none;
    transition: ease 0.3s all;
    border-radius: 6px;
}

.btn-primary:hover {
    background-color: #005cb9 !important;
    border-color: #005cb9 !important;
}

.lh {
    line-height: 38px;
}

#magasinier .lh-38 {
    line-height: 1;
    padding: 1rem;
    text-align: left;
    margin: 0;
    font-size: 0.9em;
}

.magasinier-reception .global-dates {
    display: none;
}

/*#magasinier .form-check-input{margin-top: 0; top: 50%; transform: translateY(-50%);}*/
#magasinier .form-check {
    height: 100%;
}

#magasinier .form-row {
    align-items: center;
}

/*#magasinier .form-check .form-check-label{position: absolute; top: 50%; transform: translateY(-50%);}*/
#main-login {
    max-width: 400px;
    background: white;
    border-radius: 6px;
    padding: 30px;
    margin: 0 auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
}

.magasinier-commande .en_stock {
    display: none;
}

#main-login p {
    text-align: justify;
}

#main-login h2 {
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.6em;
    margin-bottom: 1.5rem;
}

#main-login img {
    display: block;
    margin: 0 auto 2rem;
}

#main-login .btn-primary {
    width: 100%;
}

.copyright {
    display: block;
    text-align: center;
    margin: 12px 0 0;
}

#dashboard-menu {

    position: fixed;
    width: 200px;
    top: 65px;
    left: 0;
    background: url(../images/side-bar-img.png);
    background-size: cover;
    background-position: top center;
    z-index: 2;
    padding-top: 13px;
    transition: all 0s ease;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

#dashboard-menu li {
    margin: 5px 0;
    padding: 0 3%;
    position: relative;
}

#dashboard-menu li a {
    color: #fff;
    background: rgba(255, 255, 255, 0);
    border-radius: 4px;
    padding: 10px 12px;
    line-height: 1;
    font-size: 14px;
    font-weight: 300;
    transition: all 0.2s ease;
    position: relative;
}

#dashboard-menu li a i {
    margin-right: 8px;
    font-size: 1.2em;
}

#dashboard-menu li a:hover, #dashboard-menu li a.active, #dashboard-menu li a[aria-expanded=true] {
    background: rgba(255, 255, 255, .23);
    color: #fff;
}

.resized-menu #dashboard-menu > li > a {
    width: 88%;
    margin: 0 auto;
}

.resized-menu #dashboard-menu li a i {
    font-size: 1em;
}

.resized-menu #liste-franchise {
    width: 100% !important;
}

#dashboard-menu .dropdown-menu {
    min-width: auto !important;
    width: 100% !important;
    top: 0 !important;
    padding: 0 !important;
}

.modal .dropdown-menu {
    background: white !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

#dashboard-menu .dropdown-menu a {
    font-size: 0.8em;
    text-transform: none;
    border-radius: 0px;
    padding: 10px 12px;
    border-bottom: 1px solid white;
}

#dashboard-menu .dropdown-menu a:last-of-type {
    border-bottom: none;
}

#dashboard-menu .dropdown-menu a:last-of-type {
    border-bottom: none;
}

#dashboard-menu .dropdown-menu a i {
    font-size: 0.8em;
    margin: 0 0 0 8px;
}

#dashboard-menu .dropdown-menu.show {
    transform: translate3d(0, 4px, 0px) !important;
    background: rgb(0, 92, 184);
    left: 100% !important;
    max-height: 450px;
    height: auto;
    overflow-y: auto;
}

.resize {
    width: 56px !important;
    text-align: center;
}

.resize span {
    display: none;
}

.resize li {
    padding: 0 !important;
    position: relative;
}

.resize li a {
    padding: 10px 0 !important;
}

.resize li a i {
    margin-right: 0 !important;
}

#dashboard-menu .dropdown-toggle::after {
    display: none;
}

.resize .resize-menu i {
    transform: rotate(-180deg);
}

.resize .dropdown-menu {
    position: absolute !important;
    min-width: 120px !important;
    text-align: center;
    right: -100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    left: 100% !important;
    padding: 0 !important;
    top: -6px !important;
}

.resize .dropdown-menu a {
    padding: 0;
}

.resize .caret {
    display: none;
}

.admin-bar-title {
    height: 70px;
    color: white;
    display: flex;
    align-items: center;
    margin: 0 0 1.5rem !important;
    text-transform: uppercase;
    text-align: center;
    font-size: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    justify-content: center;
}

#welcome-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background: white;
    width: 100%;
    padding: 12px 16px;
    z-index: 9;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    z-index: 999;
}

#welcome-bar img {
    max-height: 40px;
    margin-right: 8px;
}

#welcome-bar h1 {
    margin-bottom: 0;
    font-size: 20px;
    color: #333;
    font-weight: 600;
}

#welcome-bar #logout-form button {
    color: #FC3C3C;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

input#form-recherche {
    width: 450px;
    transition: all 0.3s ease;
}

input#form-recherche:focus {
    width: 500px;
}

.welcome-message {
    margin-right: 10px;
}

#main-content {
    display: flex;
    padding: 65px 0 0 200px;
}

.resized-menu {
    padding-left: 56px !important;
}

.app_msgs {
    position: fixed;
    bottom: 20px;
    right: 73px;
    margin: 0 !important;
    padding: 0 5px !important;
    z-index: 9999999;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-9 9:3:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-out-bottom
 * ----------------------------------------
 */
@-webkit-keyframes fade-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
}

@keyframes fade-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
}

.fade-in-right {
    -webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-3-4 16:23:7
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-right
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.app_msgs .alert {
    width: 100%;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin: 0;
    -webkit-animation: fade-out-bottom 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 5s both;
    animation: fade-out-bottom 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 5s both;
}

.container {
    max-width: 100% !important;
    margin: 0 0 3rem 0;
    padding: 0;
}

.row {
    padding: 0 20px;
    margin: 20px 0 0;
}

#tableau_de_bord_wrapper .row, #tableau_wrapper .row, #soumissions-table_wrapper .row, #tbld_clients_wrapper .row {
    padding: 0;
    margin: 0;
}

.tbld-column {
    margin-bottom: 1rem;
}

#tableau_de_bord_wrapper, #tableau_wrapper, #soumissions-table_wrapper, #tbld_clients_wrapper, .row form:not(.no-bg),
#rapport-soumission, #soumissions-client, ul.list-options, #rappel, #derniere-soumissions, #alertes,
#materiel-a-recevoir, #materiel-a-commander, #pancartes, #rdv-soumission, #verification-et-confirmation, #magasinier-tableau,
.white-bg, #rdv-installation, #compte-recevable, #soumissions-manuelle {
    width: 100%;
    background: white;
    padding: 12px;
    border-radius: 6px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

#page-sommaire-detaille {
    width: auto;
    margin: 2% auto;
    min-width: 85%;
    border-radius: 6px;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
}

#page-sommaire-detaille thead {
    background: rgba(0, 92, 184, 0.9);
    color: white;
}

.alert-rouge {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

#page-sommaire-detaille .container {
    margin: 0;
}

#page-sommaire-detaille .row {
    padding: 0;
    margin: 0 -15px;
}

#pancartes, #verification-et-confirmation, #magasinier-tableau {
    margin-bottom: 1rem;
}

#verification-et-confirmation, .hide-submit, .hide-step, .hide-btn {
    display: none !important;
}

.active-step {
    display: block !important;
}

#rappel h2 {
    text-align: center;
}

.rappel-alertes a {
    display: block;
    position: relative;
}

ul.list-options {
    list-style-type: none;
    display: flex;
    justify-content: center;
    justify-items: center;
    flex-wrap: wrap;
}

ul.list-options li {
    padding: 0.5rem;
    border: 1px solid black;
    border-radius: 6px;
    flex: 0 0 auto;
    margin: 0.5%;
    display: flex;
}

ul.list-options li span {
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
}

#events .form-row:last-of-type .form-group {
    margin-bottom: 1rem !important;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto;
}

.lds-ellipsis div {
    position: absolute;
    top: 30px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #005cb9;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 6px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 6px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 26px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 45px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(19px, 0);
    }
}

.gallery img {
    max-height: 150px;
    width: auto;
}

.gallery-container .form-group:last-of-type {
    margin: 1rem 0 !important;
}

#nb_heures, #choisir_boutique, #info_boutique {
    display: none;
    margin: 8px 0;
}

#newClientContent, #addNewClient, #existingClientContent {
    width: 100%;
}

.small-input {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 5px !important;
    background-color: transparent !important;
}

#other-services .form-check {
    display: block;
    margin: 6px 0;
}

/*.image-container{
	position: relative;
	padding: 6px;
	transition: all 0.3s ease;
	display: inline-block;
}
.image-container .fa-times{
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.3s ease;
	background: red;
	color: white;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 19px;
	font-size: 12px;
}
.image-container:hover .fa-times{
	opacity: 1;
}*/
#app_msgs {
    display: block;
    max-width: 50%;
    margin: 2rem auto;
    text-align: center;
}

.reset-pw-link {
    text-align: center;
    margin: 0.5rem 0;
    display: block;
}

.soumission-franchise-detail {
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
}

.soumission-franchise-detail p {
    margin: 0;
    padding: 0.2rem 15px;
}

.soumission-franchise-detail span, form h2, .grey-background {
    background-color: #ddd;
    border-radius: 6px;
    padding: 1rem;
    text-transform: uppercase;
    margin: 0 0 0.6rem 0;
    width: 100%;
}

.soumission-table {
    padding: 0 5px;
    -webkit-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
}

.soumission-table .soumission-table-header {
    font-weight: 600;
}

.soumission-table input {
    width: 100%;
}

h2.blue-bg {
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    color: white;
    border-radius: 6px;
    padding: 12px 15px;
    margin: 0.4rem 0;
    -webkit-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
    background: rgba(0, 92, 184, 0.9);
}

.is-collapsable {
    line-height: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
}

.is-collapsable .fas {
    line-height: 50px;
}

h2.is-collapsable[aria-expanded=false] {
    background: rgba(0, 92, 184, 0.9);
    color: white;
}

.is-collapsable[aria-expanded=true] .fas {
    transform: rotate(180deg);
}

.soumission-table .soumission-table-row {
    border-left: 1px solid rgba(0, 0, 0, .05);
    border-top: 1px solid rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.soumission-table-header .form-group {
    border: 1px solid rgba(0, 0, 0, .05);
}

.soumission-table .soumission-table-row .form-group, .soumission-table .soumission-table-header .form-group {
    margin: 0;
    padding: 0.75rem;
}

.soumission-table .soumission-table-row .form-group {
    border-right: 1px solid rgba(0, 0, 0, .05);
}

.soumission-table .soumission-table-row:nth-of-type(even) {
    background-color: rgba(0, 0, 0, .05);
}

.soumission-table .form-row:last-of-type {
    margin-top: 1rem;
}

.gj-datepicker {
    width: auto;
    flex: 1 1;
}

.gj-datepicker input {
    border-radius: 0;
}

#last-row {
    margin: 2rem 0;
}

#calendar {
    max-width: 100%;
    margin: 0 auto;
    background: white;
    padding: 1% 2%;
    border-radius: 6px;
    -webkit-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
}

.fc-basic-view .fc-body .fc-row {
    min-height: 2em;
}

.add-to-list, .add-photo {
    background: rgba(0, 92, 184, 1);
    width: 100%;
    height: 100%;
    color: white;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    border: none !important;
    height: 100%;
    transition: all 0s ease;
    border: none;
    display: inline-block;
}

.remove-from-list, .remove-photo {
    width: 48%;
    float: right;
    height: 100%;
}

.add-to-list.added, .add-photo.added {
    background: #28a745;
    width: 48%;
    cursor: not-allowed !important;
    float: left;
}

.add-to-list:hover, .add-photo:hover {
    background: #28a745 !important;
}

/*
.step{
	display: none;
}*/
.fade-in-right {
    -webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.fade-in-left {
    -webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.fade-in-bottom {
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-3-12 10:5:14
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2019-3-12 10:4:57
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-left
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2019-3-12 10:3:25
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-right
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.form-info {
    padding: 1%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow: hidden;
    display: block;
    width: 100%;
}

.form-info:not(:first-of-type) {
    margin-top: 1rem;
}

.add-other-photo {
    display: none;
}

.dynamic-container {
    width: 100%;
    display: contents;
}

.dynamic-container .form-row {
    width: 100%;
}

.dynamic-container .form-group {
    padding-right: 5px;
    padding-left: 5px;
}

/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
*/
@media only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin: 0 0 1rem 0;
    }

    tr:nth-child(odd) {
        background: #ccc;
    }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 0;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
    Label the data
You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
    */
    /*td:nth-of-type(1)::before { content: "First Name"; }
    td:nth-of-type(2)::before { content: "Last Name"; }
    td:nth-of-type(3)::before { content: "Job Title"; }
    td:nth-of-type(4)::before { content: "Favorite Color"; }
    td:nth-of-type(5)::before { content: "Wars of Trek?"; }
    td:nth-of-type(6)::before { content: "Secret Alias"; }
    td:nth-of-type(7)::before { content: "Date of Birth"; }
    td:nth-of-type(8)::before { content: "Dream Vacation City"; }
    td:nth-of-type(9)::before { content: "GPA"; }
    td:nth-of-type(10)::before { content: "Arbitrary Data"; }*/
}

#qualite-verre, #type-trempe, #type-teinte, #pancarte-info, #couleur1, #couleur2, #faces, #formatCoupe, #pied-lineaire, #ajout-contact, #adresse-different, #choix-rappel {
    display: none;
}

.show-flex {
    display: block !important;
}

.container-cat {
    width: 100%;
    padding: 1%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
}

.container-cat:hover {
    border: 1px solid rgba(0, 92, 184, 0.9);
}

.input-group-text {
    font-size: 0.9em;
}

.dessin-here {
    display: flex;
}

.dessin {
    width: 400px;
    display: none;
    height: 470px;
    margin: 1rem 2rem 1rem 0;
}

.plan {
    width: 400px;
    display: none;
    height: 470px;
    margin: 1rem 2rem 1rem 0;
}

#retirer-dessin {
    display: none;
}

#retirer-plan {
    display: none;
}

.isDisabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}

.caret {
    margin-top: 9px;
    position: absolute;
    right: 6px;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transition: all 150ms ease-in;
}

#dashboard-menu a[aria-expanded="true"] > .caret {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}

.soumission-photo {
    max-height: 150px;
}

#carrelage-special-montant, #ecart-horizontal, #ecart-vertical, #forme-special, #forme-special-ajustement, #no_autorisation, #no_cheque {
    display: none;
}

.fenetres, .portepatio, .porteacier {
    margin-bottom: 1rem;
}

.form-check-inline {
    height: 38px;
}

table.dataTable td, table.dataTable th {
    vertical-align: middle;
}

.rappel {
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 0;
}

.derniere-soumission, #tdb-materiel-a-commander .rappel {
    cursor: initial;
}

.rappel.alert {
    transition: all 0.3s ease;
}

.rappel.alert:not(:last-of-type) {
    margin-bottom: 0.5rem;
}

.rappel.alert.alert-danger:hover {
    border-color: #721c24;
}

.rappel.alert.alert-warning:hover {
    border-color: #856404;
}

.rappel.alert.alert-success:hover {
    border-color: #155724;
}

.link-to:hover {
    text-decoration: none;
}

.container-border {
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 92, 184, 0.4);
    border-radius: 4px;
    padding: 8px;
}

#soumission-action-bar {
    position: fixed;
    /*top: 65px;*/
    top: 0;
    visibility: hidden;
    z-index: 8;
    right: 20px;
    transition: all 0.3s ease;
    z-index: 99999;
}

#soumission-action-bar .save-icon {
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    background: rgb(0, 92, 184);
    transition: all 0.3s ease-in-out;
    border-radius: 0 0 4px 4px;
}

.save-icon .fa-check {
    display: none;
}

.draft-saved .fa-save {
    display: none;
}

.draft-saved .fa-check {
    display: block;
}

.draft-saved {
    background: #28a745 !important;
}

.heartbeat {
    -webkit-animation: heartbeat 1.5s ease-in-out 5s 3 both;
    animation: heartbeat 1.5s ease-in-out 5s 3 both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-22 11:27:33
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

#form-verification-container span {
    display: block !important;
    height: 38px;
}

#form-verification-container .card-body .row {
    padding: 0;
    margin: 0 0 1.5rem 0;
}

#form-verification-container .card-body .row .col-6 {
    padding: 0 20px;
}

#form-verification-container .card-body .row .col-lg-4 {
    padding: 0 10px !important;
}

#form-verification-container .card-body .table-responsive-sm {
    padding: 0 10px !important;
}

#signature-pad canvas {
    border: 1px solid black;
    width: 100%;
}

#right-bar-notifications {
    width: 56px;
    height: calc(100vh - 65px);
    position: fixed;
    top: 65px;
    right: 0;
    background: url('../images/side-bar-img.png');
    background-size: cover;
    background-position: top center;
    text-align: center;
    color: white;
    padding-top: 13px;
}

#expand-bar {
    position: absolute;
    bottom: 20px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
}

#right-bar-notifications button {
    color: white;
    border: none;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0);
    width: 88%;
    line-height: 1;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 10px 0;
    position: relative;
    margin: 5px 0;
}

#right-bar-notifications button:hover, #expand-bar:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.badge {
    position: absolute;
    top: 4px;
    font-size: 0.75em;
    padding: 0;
    color: white;
    background-color: transparent;
}

#form-recherche {
    position: relative;
}

#photo-cadre {
    display: none;
    width: 100%;
}

#recherche-resultats, #recherche-resultats-choose, #recherche-resultats-client, #recherche-resultats-client-2, #recherche-resultats-franchise {
    position: absolute;
    top: 100%;
    background: white;
    border-right: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    border-left: 1px solid #ced4da;
    border-radius: 0 0 0.25em 0.25em;
    display: none;
    width: 100%;
    z-index: 9;
    max-height: 400px;
    overflow-x: hidden;
}

#recherche-resultats span, #recherche-resultats-choose span, #recherche-resultats-client span, #recherche-resultats-client-2 span, #recherche-resultats-franchise span {
    display: block;
    width: 100%;
    padding: 10px 12px;
}

#recherche-resultats span a, #recherche-resultats-choose span a, #recherche-resultats-client span a, #recherche-resultats-client-2 span a, #recherche-resultats-franchise span a {
    color: #212529;
}

.bottom-border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

p.bottom-border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

p.bottom-border em {
    font-size: 0.8em;
}

.remove-service-row {
    position: absolute;
    top: 0.5rem;
    right: 1%;
    cursor: pointer;
    z-index: 9999;
}

.white-bg {
    padding: 10px 0;
    background: white;
    border-radius: 6px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

#tdb-calendrier-soumission-a-venir .alert {
    border-radius: 0;
}

#tdb-calendrier-soumission-a-venir .alert:last-of-type {
    border-radius: 0 0 6px 6px;
}

.date-creer, .creer-par {
    font-size: 0.9rem;
    margin-bottom: 0;
    text-align: center;
    margin-top: 0.5rem;
}

.modal-footer {
    flex-direction: column;
}

.modal-footer > div {
    width: 100%;
}

.alert-carrelage {
    color: #004085;
    background-color: #cce5ff;
    border: 1px solid #b8daff;
    padding: 0.3rem 1rem;
    display: block;
    margin-top: 0.75rem;
}

.alert-triple {
    color: #383d41;
    background-color: #e2e3e5;
    border: 1px solid #d6d8db;
    padding: 0.3rem 1rem;
}

.alerte-trempe {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 0.3rem 1rem;
}

.alerte-teinte {
    background-color: #f2d7ee;
    border: 1px solid #D5B8DB;
    padding: 0.3rem 1rem;
    color: #0e103d;
}

.alerte-givre {
    background-color: rgba(50, 62, 64, 0.2);
    border: 1px solid rgba(50, 62, 64, 0.8);
    padding: 0.3rem 1rem;
    color: #323E40;
}

.alerte-forme-special {
    background-color: rgba(140, 55, 86, 0.2);
    border: 1px solid rgba(140, 55, 86, 0.8);
    padding: 0.3rem 1rem;
    color: #8C3756;
}

.relative-container {
    position: relative;
}

.hide-from-soumission, .hide-from-soumission-calfeutrage, .delete-from-soumission {
    /*position: absolute;
    right: 0;
    top:  1rem;*/
    cursor: pointer;
    font-size: 1.3rem;
    opacity: 0.5;
}

.delete-from-soumission, .remove-service-row {
    color: #dc3545;
    opacity: 1;
}

.hide-from-soumission:hover, .hide-from-soumission.hidden,
.hide-from-soumission-calfeutrage:hover, .hide-from-soumission-calfeutrage.hidden, .delete-from-soumission:hover {
    opacity: 1;
}

.hidden-col {
    visibility: hidden;
    position: absolute;
    left: -9999px;
    z-index: 0;
}

.derniere-soumission {
    display: flex;
}

.derniere-soumission > div:first-of-type {
    margin-right: auto;
}

.checkbox-reprise {
    padding: 0 2.5%;
}

#form-camion .checkbox span.alert {
    display: block;
}

.checkbox label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px;
}

.checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    top: 2px;
}

.checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: -20px;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
    color: #555555;
}

.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    opacity: 0;
    z-index: 1;
}

.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
    font-family: "FontAwesome";
    content: "\f00c";
}

.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
    opacity: 0.65;
}

.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
    background-color: #eeeeee;
    cursor: not-allowed;
}

.checkbox.checkbox-circle label::before {
    border-radius: 50%;
}

.checkbox.checkbox-inline {
    margin-top: 0;
}

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
    background-color: #337ab7;
    border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox.checkbox-sm label::before {
    width: 30px;
    height: 30px;
    top: -13px;
}

.checkbox.checkbox-sm label::after {
    width: 30px;
    height: 30px;
    padding-left: 4px;
    font-size: 20px;
    left: 1px;
    top: -13px;
}

.checkbox.checkbox-sm label {
    padding-left: 18px;
    top: 13px;
}

.checkbox.checkbox-md label::before {
    width: 34px;
    height: 34px;
    top: -17px;
}

.checkbox.checkbox-md label::after {
    width: 34px;
    height: 34px;
    padding-left: 4px;
    font-size: 24px;
    left: 1px;
    top: -18px;
}

.checkbox.checkbox-md label {
    padding-left: 22px;
    top: 17px;
}

.checkbox.checkbox-lg label::before {
    width: 46px;
    height: 46px;
    top: -28px;
}

.checkbox.checkbox-lg label::after {
    width: 46px;
    height: 46px;
    padding-left: 4px;
    font-size: 36px;
    left: 1px;
    top: -31px;
}

.checkbox.checkbox-lg label {
    padding-left: 34px;
    top: 32px;
}

.radio {
    padding-left: 20px;
}

.radio label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px;
}

.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out;
}

.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 11px;
    height: 11px;
    left: 3px;
    top: 3px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}

.radio input[type="radio"] {
    opacity: 0;
    z-index: 1;
}

.radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

.radio input[type="radio"]:disabled + label {
    opacity: 0.65;
}

.radio input[type="radio"]:disabled + label::before {
    cursor: not-allowed;
}

.radio.radio-inline {
    margin-top: 0;
}

.radio-primary input[type="radio"] + label::after {
    background-color: #337ab7;
}

.radio-primary input[type="radio"]:checked + label::before {
    border-color: #337ab7;
}

.radio-primary input[type="radio"]:checked + label::after {
    background-color: #337ab7;
}

.radio-danger input[type="radio"] + label::after {
    background-color: #d9534f;
}

.radio-danger input[type="radio"]:checked + label::before {
    border-color: #d9534f;
}

.radio-danger input[type="radio"]:checked + label::after {
    background-color: #d9534f;
}

.radio-info input[type="radio"] + label::after {
    background-color: #5bc0de;
}

.radio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de;
}

.radio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de;
}

.radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked + label::after {
    background-color: #f0ad4e;
}

.radio-success input[type="radio"] + label::after {
    background-color: #5cb85c;
}

.radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c;
}

.radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c;
}

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
    font-family: 'FontAwesome';
    content: "\f00c";
    top: 2px;
}

input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
    color: #fff;
}

input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
    color: #fff;
}

.radio.radio-sm label::before {
    width: 30px;
    height: 30px;
    top: -13px;
}

.radio.radio-sm label::after {
    width: 22px;
    height: 22px;
    padding-left: 4px;
    font-size: 20px;
    left: 4px;
    top: -9px;
}

.radio.radio-sm label {
    padding-left: 18px;
    top: 13px;
}

.radio.radio-md label::before {
    width: 34px;
    height: 34px;
    top: -17px;
}

.radio.radio-md label::after {
    width: 26px;
    height: 26px;
    padding-left: 4px;
    font-size: 24px;
    left: 4px;
    top: -13px;
}

.radio.radio-md label {
    padding-left: 22px;
    top: 17px;
}

.radio.radio-lg label::before {
    width: 46px;
    height: 46px;
    top: -28px;
}

.radio.radio-lg label::after {
    width: 36px;
    height: 36px;
    padding-left: 4px;
    font-size: 36px;
    left: 5px;
    top: -23px;
}

.radio.radio-lg label {
    padding-left: 34px;
    top: 32px;
}

#popup-ajout-date .modal-dialog {
    max-width: 50%;
}

.sommaire-ligne {
    display: block;
    font-size: 0.95em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.code-postal {
    text-transform: uppercase;
}

.sommaire-row {
    display: flex;
    width: 100%;
}

.sommaire-row > div {
    padding-right: 5px;
    padding-left: 5px;
}

.hide {
    display: none;
}

.align-text-right input {
    text-align: right
}

.form-row-sommaire-info input {
    background: transparent !important;
    border: none;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    height: auto;
    font-size: 0.9em;
}

h5 {
    font-size: 1rem;
}

.magasinier-commande .reprise {
    display: none;
}

.section-title {
    background: rgba(0, 92, 184, 0.9);
    color: white;
    text-transform: uppercase;
    font-weight: 500;
}

.equipe-container {
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.equipe-title {
    padding: .375rem .75rem;
    font-size: 1em;
    display: block;
    text-align: center;
    text-transform: uppercase;
    background: rgba(0, 92, 184, 0.9);
    color: white;
}

.equipe-member {
    padding: .375rem .75rem;
    font-size: 0.9em;
    display: block;
    text-align: center;

}

.equipe-member:not(:last-of-type) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.hide-garantie {
    display: none;
}

h5.sommaire-blue {
    border-bottom: 2px solid #dee2e6;
    background: rgba(0, 92, 184, 0.9);
    color: white;
    padding: 1rem .75rem;
    line-height: 1;
    margin-bottom: 0;
}

.rabais-container {
    display: inline-block;
    max-width: 100px;
}

.rabais-master-container {
    display: inline-block;
}

.no-bg-input {
    text-align: right;
    border: none;
    max-width: 100px;
    background: transparent;
}

.toggle-view {
    display: none !important;
}

#form-verification-container .input-group-prepend .input-group-text.small {
    max-width: 20px;
    padding: 0;
    line-height: 36px;
    display: inline-block !important
}

#form-verification-container .input-group-append, #form-verification-container .input-group-prepend {
    display: inline-block !important;
}

.camion-photos {
    position: relative;
    top: -2px;
}

#popup-rdv-a-sceduler .modal-dialog {
    max-width: 50%;
}

.modal-dialog {
    max-width: 700px;
}

#newClient {
    width: 100%;
    padding: 0 5px;
}

#confirmer-courriel, #confirmer-poste, #facture-envoyer-modal {
    display: none;
}

.access-4 #liste-franchise,
.access-5 #liste-franchise,
.access-6 #liste-franchise,
.access-7 #liste-franchise,
.access-8 #liste-franchise {
    display: none !important;
}

.user-admin #liste-franchise,
.access-2 #liste-franchise,
.access-3 #liste-franchise,
.access-4.is-secretaire #liste-franchise {
    top: 65px;
    position: fixed;
    left: 200px;
    padding: 0.5rem 0;
    width: calc(100% - 200px);
    background: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 9;
    display: flex !important;
    justify-content: center;
}

.user-admin.resized-menu #liste-franchise {
    left: 56px;
    width: calc(100% - 56px;
);
}

.user-admin .container {
    margin: 3.5rem 0 3rem 0;
}

#liste-franchise .custom-control {
    display: inline-block;
    margin-right: 1rem;
    text-transform: uppercase;
}

.hide_ajustement {
    display: none;
}

.brouillon {
    border: 1px solid red;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 0.5rem;
}

.toggle-show {
    display: none !important;
}

h2.ajouts {
    display: block;
    width: 100%;
    background: rgba(0, 92, 184, 0.9);
    color: white;
    padding: 0.75rem;
    text-transform: uppercase;
    font-size: 1rem !important;
}

#ajout-technicien .form-row {
    border: 1px solid rgba(0, 0, 0, 0.35);
    padding: 14px;
    margin: 0.5rem 0;
    border-radius: 4px;
    position: relative;
}

#ajout-technicien .form-row .remove-ajout {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 0.7rem;
    cursor: pointer;
    z-index: 999;
}

.row.no-padding {
    padding: 0;
}

.table-responsive-sm {
    padding: 0 15px;
}

.remove-ajout {
    display: none;
}

.class-travaux .remove-ajout {
    display: block;
}

.liste-camion a {
    width: 100%;
    height: 100%;
    max-height: 46px;
    padding: 0 0.5rem;
    margin-left: 0.5rem;
    line-height: 48px;
}

#module-voir-sommaire .modal-dialog {
    max-width: 75%;
}

.show-commande, .show-reception {
    display: none !important;
}

.magasinier-commande .show-commande, .magasinier-reception .show-reception {
    display: flex !important;
}

.magasinier-commande table .show-commande, .magasinier-reception table .show-reception {
    display: table-cell !important;
}

.commande-photos {
    display: block;
    margin-bottom: 1rem;
    text-align: center;
}

.commande-photos img {
    max-height: 100px;
    margin: 0 0.5rem 0 0;
}

/*
.dessin-container{
	float: left;
}*/
.border {
    border: 1px solid black;
}

.date-filter {
    background: white;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    padding: 10px;
    display: block;
}

.tooltip {
    top: 12px !important;
}

@media print {
    #magasinier * {
        padding-left: 0;
        padding-right: 0;
        font-size: 120%;
    }

    #magasinier {
        background-image: none;
        background: transparent;
    }

    #magasinier .hide-print,
    #magasinier .btn-note,
    #magasinier .show-reception {
        display: none !important;
    }

    #magasinier #main-content {
        padding: 0 !important;
    }

    #magasinier .form-group {
        display: block;
        flex: 0 0 100%;
        max-width: 100%;
    }

    #magasinier .form-group {
        margin-bottom: 0;
    }

    #magasinier table th {
        font-size: 0.9em;
    }

    #magasinier label {
        display: none;
    }

    #magasinier .commande-line {
        padding: 10px;
    }

    #magasinier .user-admin .container {
        margin: 0;
    }

    #magasinier .soumission-franchise-detail span, #magasinier form h2, #magasinier .grey-background {
        background-color: transparent;
        border-radius: 0;
        padding: 0;
        margin: 0;
    }

    #magasinier #pancartes, #magasinier #verification-et-confirmation, #magasinier #magasinier-tableau {
        background: transparent;
        padding: 0;
        border-radius: 0;
    }
}

.badge-danger {
    color: #dc3545 !important;
}

.magasinier-commande .technicien-row,
.magasinier-commande .client-row,
.magasinier-commande .prix-row {
    display: none;
}

.rappel-installation {
    padding-bottom: 30px;
    z-index: 1;
    transition: all 0.3s ease;
}

.opened .rappel {
    padding-bottom: 150px;
}

.opened .open-more i {
    transform: rotateX(180deg);
}

.open-more {
    display: block;
    width: 100%;
    z-index: 2;
    position: absolute;
    bottom: 8px;
    cursor: pointer;
}

.icones {
    transition: all 0.3s ease;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 20px;
    padding: 0 1.25rem;
}

.opened .icones {
    display: block;
}

.full-width {
    width: 100%;
}

.commande-fournisseur-photo {
    border: 2px solid transparent;
    opacity: 0.75;
    cursor: pointer;
    transition: 0.3s all ease;
    position: relative;
    z-index: 9998;
}

.commande-fournisseur-photo:hover {
    transform: scale(2.5);
    border: 2px solid #4BB543;
    opacity: 1;
    z-index: 9999;
}

.commande-fournisseur-photo.selected {
    border: 5px solid #4BB543;
    opacity: 1;
}

#proceder-paiement, #charger, #entente-paiement, #fini-non-paiement {
    display: none;
    width: 100%;
}

.no-btn {
    background: transparent;
    padding: 0;
    border: 0;
}

.created-history-text {
    display: block;
    width: 100%;
}

.created-history-text em {
    font-size: 0.9em;
}

.list-group-item {
    cursor: pointer;
}

.list-group-item.grey:hover, .list-group-item.grey.active-map {
    background-color: #6c757d;
    color: white;
}

.list-group-item.green:hover, .list-group-item.green.active-map {
    background-color: #28a745;
    color: white;
}

.list-group-item.yellow:hover, .list-group-item.yellow.active-map {
    background-color: #ffc107;
    color: #212529;
}

.list-group-item.red:hover, .list-group-item.red.active-map {
    background-color: #dc3545;
    color: white;
}

.list-group-item.blue:hover, .list-group-item.blue.active-map {
    background-color: rgba(0, 92, 184, 1);
    color: white;
}

.list-group-item.grey {
    border-left: 10px solid #6c757d;
    color: black;
}

.list-group-item.green {
    border-left: 10px solid #28a745;
    color: black;
}

.list-group-item.yellow {
    border-left: 10px solid #ffc107;
    color: black;
}

.list-group-item.red {
    border-left: 10px solid #dc3545;
    color: black;
}

.list-group-item.blue {
    border-left: 10px solid rgba(0, 92, 184, 1);
    color: black;
}

.magasinier-tableau .hide-commande {
    display: none;
}

#magasinier, #magasinier {
    position: relative;
}

#overlay-verifier-soumission {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: baseline;
    z-index: 9999;
}

#overlay-verifier-soumission p {
    padding: 2rem;
    text-align: center;
    font-size: 1em;
    background: white;
    border-radius: 6px;
    color: black;
    margin: 5% 0 0 0;
}

.red-bg h2 {
    background: #f8d7da;
}

#sommaire-detaille .alert-info {
    padding: 0;
    margin-bottom: 0.5rem;
    background: transparent;
    border: none;
    color: black;
}

.delete-note {
    cursor: pointer;
    color: red;
}

#popup-soumission-accepter-text {
    display: none;
}

.progressbar {
    margin: 0;
    padding: 0;
    counter-reset: step;
    clear: both;
    display: flex;
    justify-content: center;
}

.progressbar li {
    list-style-type: none;
    width: 14.28%;
    float: left;
    font-size: 11px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: #7d7d7d;
}

.progressbar li:before {
    width: 30px;
    height: 30px;
    content: counter(step);
    counter-increment: step;
    line-height: 30px;
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
}

.progressbar li:after {
    width: 159%;
    height: 2px;
    content: '';
    position: absolute;
    background-color: #7d7d7d;
    top: 15px;
    left: -81%;
    z-index: -2;
}

.progressbar li:first-child:after {
    content: none;
}

.progressbar li.active {
    color: green;
}

.progressbar li.active:before {
    border-color: #55b776;
}

.progressbar li.active:after {
    background-color: #55b776;
    z-index: -1;
}

.progressbar li:not(:last-of-type).active:last-of-type::after {
    background-color: transparent !important;
    z-index: -1;
}

.rabais_service td {
    display: block;
    width: 100%;
}

#form-travaux .notes-soumissions {
    display: none;
}

/* Absolute Center Spinner */
.loading {
    position: fixed;
    z-index: 999;
    height: auto;
    width: auto;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#retour-form {
    color: black;
    z-index: 9999;
    position: relative;
    cursor: pointer;
    font-size: 46%;
    background: white;
    border: none;
    margin: 10px 0;
    padding: 10px 20px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
    border-radius: 6px;
}

/* Transparent Overlay */
.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
    /* hide "loading..." text */
    font-size: 40px;
    font-weight: bold;
    color: black;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: 30px;
    margin-left: 20px;
    -webkit-animation: spinner 1500ms infinite linear;
    -moz-animation: spinner 1500ms infinite linear;
    -ms-animation: spinner 1500ms infinite linear;
    -o-animation: spinner 1500ms infinite linear;
    animation: spinner 1500ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#resume-commande .modal-dialog {
    max-width: 70%;
    font-size: 120%;
}

.incorrect {
    border-color: red;
}

span.green {
    background: #d4edda;
    padding: 3px 5px;
    border-radius: 4px;
    border: 1px solid #c3e6cb;
}

.sum-fraction {
    cursor: pointer;
    text-decoration: underline;
}

.check-calcul-popup {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 0;
    z-index: 99999;
    text-align: center;
    transition: height 0.5s ease;
}

.check-calcul-popup.show {

    height: 50px;
}

.active-client {
    background: rgba(220, 53, 69, 0.33);
}

#quoi-row .container-cat:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .05);
}

.btn-circle {
    position: fixed;
    bottom: 50px;
    right: 20px;
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.no-rack.show {
    display: table-cell !important;
}

.modifier-paiement-popup {
    cursor: pointer;
}

#no-soumission-container, #soumission-verifier-notes {
    display: none;
}

.delete-photo-soumission {
    background: red !important;
    color: white;
    opacity: 1 !important;
    padding: 2px 4px !important;
}

label.dnone-before::before {
    display: none !important;
}

.red-color * {
    color: red !important;
}

.row-reprise {
    border: 1px solid black;
    display: block;
    padding: 1%;
    border-radius: 6px;
    margin-bottom: 1rem;
}

@media (max-width: 1100px) {
    #dashboard-menu {
        flex-direction: row !important;
        max-height: calc(100vh - 65px);
    }

    #dashboard-menu li {
        display: block;
        width: 100%;
    }
}

.badge {
    padding: .25em .4em !important;
}

.badge-light {
    color: #212529 !important;
    background-color: #f8f9fa !important;
}

.active-form {
    padding-left: 20px;
}

.active-form:before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f110";
    animation: fa-spin 2s infinite linear;
    display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
    left: -10px;
position: relative;

}

@-webkit-keyframes fa-spin {
 0% {
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg)
 }
 100% {
  -webkit-transform:rotate(359deg);
  transform:rotate(359deg)
 }
}
.form-error *{
    color: red;
}