@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
	--dpform-user-color: #fff;
	--dpform-color: #333333;
	--dpform-user-bg: #007abe;
	--dpform-user-bg-dark: #0068a3;
	--dpform-subtitle-link-color: #00d3e9;
	--dpform-box-border-color: #a9a9a9;
	--dpform-success-color: #53e162;
}

.d-none-title h1:first-of-type {
	display: none;
}

.dpform-loader {
	width: 22px;
	height: 22px;
	vertical-align: middle;
	border: 2px solid #fff;
	border-bottom-color: var(--dpform-subtitle-link-color);
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.dpform-login-title {
	font-family: "Roboto", sans-serif;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--dpform-color);
	margin-bottom: 2rem;
}

.dpform-ms-button {
	height: 41px;
	width: 250px;
}

.dpform-container {
	margin-bottom: 2rem;
}

.dpform-container * {
	font-family: "Roboto", sans-serif;
}

.dpform-container > h1 {
	font-size: 1.75rem;
	font-weight: 500;
	margin-bottom: 3rem;
	color: var(--dpform-color);
}

.dpform-container > h2 {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
	margin-bottom: 3rem;
	color: var(--dpform-color);
}

.dpform-container a {
	color: var(--dpform-subtitle-link-color);
	text-decoration: none;
}
.dpform-container a.btn-primary {
	color: #fff;
}

.dpform-urgent-banner-holder {
	margin: 2rem 0;
}

.dpform-urgent-banner {
	background-color: #ff4136;
	color: white;
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	padding: 0.4rem;
	margin-bottom: 2rem;
}

.dpform-urgent-icon {
	height: 40px;
	width: 40px;
	display: inline-block;
	margin: 0px 0.8rem 0 0;
	background: url(../img/dp-urgente-icone.svg);
	background-repeat: no-repeat;
}

.dpform-user-holder {
	background-color: var(--dpform-user-bg);
	color: var(--dpform-user-color);
	width: 100%;
	display: flex;
	margin: 0;
	height: 61px;
}

.dpform-user-holder > .user-icon-holder {
	background-color: var(--dpform-user-bg-dark);
}

.dpform-user-holder > .user-icon-holder > .user-icon {
	width: 61px;
	height: 61px;
	vertical-align: middle;
	padding: 0.5rem;
	border-radius: 50%;
}

.dpform-user-holder > .user-logout {
	color: inherit;
	flex: 0 1 auto;
	width: max-content;
	margin-left: auto;
	line-height: 61px;
	padding: 0 1rem;
}

.dpform-user-holder > .user-logout > a {
	text-decoration: none;
	color: var(--dpform-user-color);
}

.dpform-user-holder > .user-infos {
	line-height: 61px;
	margin-left: 1rem;
}

.dpform-input-holder textarea {
	min-height: 12rem;
}

.dpform-input-holder select,
.dpform-input-holder input:not([type="file"]),
.dpform-input-holder textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--dpform-box-border-color);
	padding: 0.75rem;
	font-size: 1rem;
	color: var(--dpform-color);
	background-color: #fff;
}

.dpform input[type="submit"] {
	margin-right: 0;
	margin-left: auto;
	display: block;
	background-color: var(--dpform-user-bg);
	color: var(--dpform-user-color);
	border: 0;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
}

.dpform input[type="submit"]:hover {
}

.dpform-input-holder > label,
.dpform-input-holder-urgence > span {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: var(--dpform-color);
	display: block;
}

.dpform-input-holder-urgence label {
	font-size: 1rem;
	margin: 0 0 0 0.5rem;
}

.dpform-input-holder-urgence {
	margin-bottom: 2rem;
}

.dpform-input-holder-urgence input {
	width: 1rem;
	height: 1rem;
	vertical-align: middle;
}

#dpformUrgent .modal-title {
	margin-top: 0;
	font-size: 1rem;
}

#dpformUrgent .dpform-subtitle {
	margin-top: 1rem;
}

.dpform-input-holder,
.g-recaptcha {
	width: 100%;
	margin-bottom: 2rem;
}

.dpform {
	width: 100%;
}

.dpform-message {
	margin-bottom: 2rem;
}

.dpform-message.success {
	background-color: #5ecf5e;
	padding: 1.5rem 1rem;
}

.dpform-message.error {
	background-color: #d54c4c;
	padding: 1.5rem 1rem;
	color: #fff;
}

.dpform-submit-button-holder > button {
	margin-right: 0;
	margin-left: auto;
	display: block;
	background-color: var(--dpform-user-bg);
	color: var(--dpform-user-color);
	border: 0;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
}

.dpform-submit-button-holder > button:hover {
	background-color: var(--dpform-user-bg-dark);
	cursor: pointer;
}

.dpform-as-guess {
	color: #878787;
	font-size: 14px;
	margin: 2rem 0;
	cursor: pointer;
}

/* Dropzone */
#dpform.dropzone {
	border: none;
	padding: 0;
}
.dropzone-clickable {
	border: 1px solid var(--dpform-box-border-color);
	border-radius: 0;
	border-style: dashed;
	cursor: pointer;
}

/* Modal */

.modal {
	font-family: "Roboto", sans-serif;
}

.modal__overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal__container {
	background-color: #fff;
	padding: 30px;
	max-width: 500px;
	min-width: 30rem;
	max-height: 100vh;
	overflow-y: auto;
	box-sizing: border-box;
}

.modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal button:focus {
	outline: rgb(0 0 0 / 15%) 1px solid;
	border-radius: 0.2rem;
}

.modal__title {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.25;
	color: #000000;
	box-sizing: border-box;
}

.modal__close {
	background: transparent;
	border: 0;
}

.modal__header .modal__close:before {
	content: "\2715";
	vertical-align: middle;
}

.modal__content {
	margin: 2rem 0;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.8);
}

.modal__btn {
	font-size: 0.875rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	background-color: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	border-style: none;
	border-width: 0;
	cursor: pointer;
	-webkit-appearance: button;
	text-transform: none;
	overflow: visible;
	line-height: 1.15;
	margin: 0;
	will-change: transform;
	-moz-osx-font-smoothing: grayscale;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: -webkit-transform 0.25s ease-out;
	transition: transform 0.25s ease-out;
	transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

.modal__btn-primary {
	background-color: var(--dpform-success-color);
	color: #000;
}

.modal__footer {
	display: flex;
	justify-content: end;
}

.modal__footer .modal__btn {
	margin-left: 1rem;
	padding: 0.8rem 1.5rem;
}

.modal__footer .modal__btn:hover {
	background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
}

/**************************\
    Micromodal animations
\**************************/
@keyframes mmfadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mmfadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes mmslideIn {
	from {
		transform: translateY(15%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes mmslideOut {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-10%);
	}
}

.micromodal-slide {
	display: none;
}

.micromodal-slide.is-open {
	display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
	animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
	animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
	animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
	animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
	will-change: transform;
}

/* Mobile theme */

@media only screen and (max-width: 600px) {
	.modal__container {
		margin: 5px;
		min-width: auto;
	}

	.dpform-user-holder {
		flex-direction: column;
		height: auto;
	}

	.dpform-user-holder > .user-icon-holder > .user-icon {
		display: block;
		margin: auto;
	}

	.dpform-user-holder > .user-infos {
		margin-left: 0;
		text-align: center;
	}

	.dpform-user-holder > .user-logout {
		margin: auto;
	}

	.dpform-submit-button-holder > button {
		width: 100%;
	}

	.dpform-input-holder > label,
	.dpform-input-holder-urgence > span {
		overflow-wrap: break-word;
	}
}