@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body, html {
	position: relative;
	min-height: 100%;
	background: #eceff4 !important;
	font-family: 'Roboto', sans-serif !important;
	font-size: .9rem;
}

/* Sign In */
.signin-box {
	position: relative;
	margin-top: calc(50vh - 182px) !important;
	padding: 20px;
	width: 100%;
	max-width: 350px;
	margin: 0 auto;
	background: #fff;
	border: solid 1px #d8e2e7;
	-webkit-box-shadow: 0 10px 2rem #e1e1e1;
	-moz-box-shadow: 0 10px 2rem #e1e1e1;
	box-shadow: 0 10px 2rem #e1e1e1;
	-webkit-border-radius: 1rem;
	border-radius: 1rem;
}
.signin-box .signin-avatar {
	width: 100px;
	height: 100px;
	margin: 0 auto 10px;
}
.signin-box .signin-avatar img {
	display: block;
	width: 100%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.signin-box .signin-title {
	text-align: center;
	font-size: 24px;
	color: #22313F;
}
.signin-box .alert {
	margin-left: 0;
	margin-right: 0;
}
.signin-box .form-control {
	box-shadow: none;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.signin-box .keys {
	display: flex;
	margin: 10px 0;
	flex-wrap: wrap;
	justify-content: space-between;
}
.signin-box .key {
	width: 50px;
	height: 56px;
	margin: 4px 5px;
	cursor: pointer;
	-webkit-border-radius: 8px;
	border-radius:  8px;
	border-bottom: 6px solid #db4865;
	background: #db4865;
	color: #fff;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.signin-box .key .all-char {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	animation-name: rotateKeys;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
.signin-box .key .all-char .char {
	display: grid;
	width: 25px;
	height: 25px;
	line-height: 22.5px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.signin-box .key .all-char .char div {
	position: relative;
	animation-name: rotateChars;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
.signin-box .key:active {
	border-bottom: none;
}
.signin-box .key:active .all-char .char {
	height: 28px;
	line-height: 25.5px;
}
.signin-box .key .all-char .char:first-of-type {
	border-right: .5px solid #fff;
	border-bottom: .5px solid #fff;
}
.signin-box .key .all-char .char:nth-of-type(2) {
	border-left: .5px solid #fff;
	border-bottom: .5px solid #fff;
}
.signin-box .key .all-char .char:nth-of-type(3) {
	border-right: .5px solid #fff;
	border-top: .5px solid #fff;
}
.signin-box .key .all-char .char:last-of-type {
	border-left: .5px solid #fff;
	border-top: .5px solid #fff;
}
@keyframes rotateKeys {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	75% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes rotateChars {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-180deg);
	}
	75% {
		transform: rotate(-180deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}
.signin-box .checkbox {
	position: static;
}
.signin-box .checkbox label {
	font-size: .875rem;
}
.signin-box .btns {
	margin: 0 -5px 8px;
	display: flex;
	justify-content: space-between;
}
.signin-box .btn-signin {
	display: block;
	width: 100%;
	/*max-width: 140px;*/
	margin: 0 4px;
	-webkit-border-radius: 25rem;
	border-radius:  25rem;
	border: 1px solid #db4865;
	background: #fff;
	color: #db4865;
	font-weight: 600;
	padding: 6px 12px;
    font-size: 14px;
	-webkit-transition: all 0.75s;
	-moz-transition: all 0.75s;
	-o-transition: all 0.75s;
	transition: all 0.75s;
}
.signin-box .btn-signin:first-of-type {
	margin-right: 4px;
}
.signin-box .btn-signin:last-of-type {
	margin-left: 4px;
}
.signin-box .btn-signin:hover {
	background: #db4865;
	color: #fff;
}
.signin-box .btn-signin:focus {
	outline: none;
}


/* Page - Commercial */
.text-muted {
    margin-bottom: 0 !important;
}
.navbar-text {
    margin-right: 1rem;
    text-transform: uppercase;
}
/*@media (min-width: 576px){*/
/*    .modal-dialog.modal-xl {*/
/*        max-width: 850px !important;*/
/*    }*/
/*}*/
.dataTables_wrraper > .row div {
    flex: 0 0 auto;
    width: 50%; 
}
.dataTables_filter {
    float: right;
}
table tbody {
    border: 1px solid #eee !important; 
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
table {
    white-space: nowrap;
}
table td {
    vertical-align: middle;
}
button.btn.validation i {
    margin-right: .4rem;
}
.form-label {
    font-weight: bold;
}
.div-half {
    position: fixed;
    width: 50%;
    height: 100%;
}
.div-half.commercial {
    left: 0;
    background: #02a7c0;
}
.div-half.agent {
    left: 50%;
    background: #f9bd17;
}
.div-half img {
    width: 100%;
    height: 1000px;
    transition: all .5s ease-in-out;
}
.div-half:hover img {
    transform: scale(1.25);
}
.btn-style {
    position: fixed;
    top: 50%;
    left: 20%;
    z-index: 10;
    background: rgb(240 246 255 / 20%);
    border: 3px solid #fff;
    padding: 1rem 4rem;
    color: #fff;
    letter-spacing: 2px;
    transition: all .3s ease-in-out;
}
.btn-style:hover {
    background: rgb(240 246 255 / 75%);
    color: #555;
}
.overflow {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 50%);
    z-index: 2;
}
@media(max-width: 767.98px){
    .btn-style {
        position: relative;
        margin: 0 auto;
        width: 150px;
        top: 50%;
        left: 30%;
        text-align: -webkit-center;
        border: 2px solid #fff;
        padding: 1rem 1rem !important;
        letter-spacing: 1px;
    }
    .div-half {
        width: 100%;
        height: 50%;
    }
    .div-half.commercial {
        top: 0;
    }
    .div-half.agent {
        top: 50%;
        left: 0;
    }
}
.bg-green {
    background-color: #98ffcf !important;
}
.bg-red {
    background-color: #ff9d9d !important;
}
.bg-yellow {
    background-color: #ffc720 !important;
}
.select2-container--default .select2-selection--single {
    height: 34px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}
.alert {
    padding: .5rem !important;
    margin-bottom: 0 !important;
    font-size: .8rem;
}
.alert i {
    margin-right: .5rem;
    font-size: 1rem;
}
.card {
    margin: 1rem 0;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%) !important;
    border-radius: 1rem !important;
}
.card-body {
    overflow: hidden;
}
.page-content {
    padding: 1rem;
}
.dtr-title input,
.sorting input {
    width: 100%;
}
.limit-width {
    max-width: 100px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1340px){
    table {
        font-size: .8rem;
    }
    .page-content {
        padding: 0;
    }
    /*.dtr-title input,*/
    /*.sorting input,*/
    /*.dataTables_length,*/
    .dataTables_filter {
        display: none !important;
    }
    .dtr-title input,
    .sorting input {
        width: 60px;
    }
    .dtr-details {
        width: 100%;
    }
    .dtr-title {
        width: 50%;
    }
    .dtr-data {
        width: 50%;
    }
    .btn {
        padding: .2rem .5rem;
        font-size: .8rem;
    }
}



.equal-height-container {
    width: 100%;
    height: 100vh;
    display: flex;
}
.equal-height-container img {
    position: absolute;
    left: 25%;
    width: 50%;
    height: 75px;
}
.second {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.second-a,
.second-b,
.second-c,
.second-d,
.second-e {
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 100%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.second-a {
    flex: 1;
    background-image: url("https://ressources.regionsjob.com/seo/ObsJob/ingenieur-commercial.jpg");
    height: 100%;
}
.second-b {
    flex: 1;
    background-image: url("https://www.promeo-formation.fr/sites/default/files/styles/header_image/public/2019-12/logistique_industrielle.jpg");
    height: 100%;
}
.second-c {
    flex: 1;
    background-image: url("https://img-0.journaldunet.com/wPGV3aeIi_9f09cA3sMFkpjwgUQ=/1500x/smart/843a50278592417dab128059a21d9cd3/ccmcms-jdn/11648457.jpg");
    height: 100%;
}
.second-d {
    flex: 1;
    background-image: url("https://profondesolution.online/img/contact-bg.jpg");
    height: 100%;
}
.second-e {
    flex: 1;
    background-image: url("https://retaildimensions.com/wp-content/uploads/2020/07/side-view-delivery-man-ringing-door.jpg");
    height: 100%;
}
.second :hover {
    flex-grow: 2;
}
.content {
    font-size: 44px;
    font-weight: bold;
    width: 100%;
    height: 100%;
    color: white !important;
    text-decoration: none;
    box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.4);
    text-align: center;
}
.second .content {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
}
.first .content {
    background: linear-gradient(to right, #00000094, #84001887);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

.select2 {
    width: 100% !important;
}

.filter-select + .select2 {
    width: 240px !important;
}

.btn:disabled {
    background-color: #bbb;
    border-color: #bbb;
}

@media (min-width: 1200px){
    .modal-dialog.modal-xl {
        max-width: 1300px !important;
    }
}

.form-control:focus {
    border-color: #db4865 !important;
}

/*.modal.secondary {*/
/*    z-index: 1062 !important;*/
/*}*/
/*.modal-backdrop.show:nth-of-type(odd) {*/
/*    z-index: 1061 !important;*/
/*}*/