:root{--color-principal : #c3ee0a;}

/* Général */
header{margin-bottom: 5rem; position: relative;}
body {font-size: 16px; font-family: 'Montserrat', sans-serif !important; color: #1c1b1c;min-height: 100vh;}
a{color: black !important; text-decoration: none !important; width: fit-content;}
.btn-green { background-color: var(--color-principal) !important; height: fit-content;}
h1 {text-align: center; font-size: 3rem; font-weight: 900; margin-bottom: 1.5rem;}
h2 {margin-bottom: 3rem;}
p {margin: 0;}
article{padding: 1rem;}
td{vertical-align: middle;}
#content {min-height: 100vh; margin: 0;}
#content > .col-10 > .container {margin-bottom: 4em;}
.ajout {background-color: #f2f2f2; border-radius: 10px; padding: 1rem;}
a.ajout:hover {background-color: #c3ee0a;}
.icon-add {font-size: 20px; text-align: center; margin-top: 1rem;}
.lien-txt {border-bottom: solid 2px var(--color-principal);}
.info {font-size: .75rem;}
.lien {text-decoration: var(--color-principal) underline !important;}

/* Menu latéral */
#sidebar {position: relative;}
#burger {display: none;}
#menu {background-color: #f2f2f2; padding: 1em 2em; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; position: fixed; height: 100%; left: 0; display: flex; flex-direction: column; width: inherit; overflow: auto;}
#menu a i {margin-right: 1em;}
#menu a {margin: .5em 0; font-size: 18px; padding: .5rem; border-radius: 10px; position: relative; transition: all 0.3s ease-in-out;}
#menu a::before {content: ''; width: 0; height: 5px; background-color: #c3ee0a; position: absolute; bottom: 0; transition: all 0.3s ease-out;}
#menu a:hover::before, #menu a.current::before {width: 100%;}
#footer-sidebar {position: absolute; bottom: 0; font-size: .8em; width: 100%; text-align: center; padding-right: 1em;}

/* Fiche de contact */
.img-profile {border-radius: 50%; width: 150px; height: 150px; overflow: hidden; min-width: 150px; border: solid 2px;}
.img-profile img {width: 100%;height: 100%;object-fit: cover;}
.nom {font-size: 1.5rem; text-transform: uppercase; font-weight: bold; text-align: center;}
#contact {background-color: #fff; min-height: 100vh; padding: 0;}
#vcard {background-color: #F4F4F4;}
.header-contact {min-height: 30vh; display: flex; flex-direction: column; justify-content: end; position: relative;}
.header-contact .logo-company {position: absolute; top: 0; max-height: 70px; max-width: 150px; }
.header-contact .logo-company img {max-height: 70px;}
.header-contact > div {position: relative; background-color: #1c1b1c; color: #FFF; padding-top: 5vh;}
.header-contact > div .img-profile {position: absolute; top: -110px;}
.fonction {font-size: 1.25rem; text-align: center;}
#social-media {display: grid; grid-template-columns: 1fr 1fr;}
#social-media .rs-link {background-color: #FFF; border-radius: 10px; padding: .5rem 1.5rem; margin-top: 1rem; width: 100%; display: flex; align-items: center; }
#social-media .rs-link:nth-child(odd){margin-right: 2rem;}
#social-media .rs-link:nth-child(even){margin-left: 2rem;}
#social-media .rs-link i{font-size: 2rem; margin-right: .5rem;}
#social-media .rs-link:hover {background-color: rgba(0, 0, 0, 0.05);}
#vcard #infos {padding: 3rem;}
.btn-card {padding: .75rem; width: 100%; margin-bottom: 2rem;}
.btn-card:hover {background-color: #F4F4F4;}
#contact-infos > * {margin-top: 1.5rem;}
#contact-infos i {padding: 8px; margin-right: 1rem; border-radius: 50%;}
#infos div:not(:first-of-type) h4{ margin-top: 2rem;}
#vcard.mycard {border-radius: 10px; border: solid 2px #F4F4F4; margin-bottom: 2rem;}
.fonction, .activite{margin-bottom: .25rem;}
.checkboxcard {margin-left: 1em; cursor: pointer;}
#btnCmdCheckbox {position: absolute; right: 0;}
#headerCards {position: relative;}
.btn-card-qr {position: absolute; top: 0; right: 0; width: fit-content; padding: .75rem 1.25rem; margin: .5em;}

/* Page ma carte */
#page-ma-carte {margin-bottom: 10vh;}
#tabCoordonnees {gap: .5em;}
.nav-pills .nav-link {background-color: #f2f2f2; color: initial; opacity: .5;}
.nav-pills .nav-link.active {background-color: #c3ee0a; opacity: 1; color: initial;}

/* Entreprise */
.company {margin-bottom: 5rem;}
.color-company {display: block; width: 25px; height: 25px; border-radius: 50%; position: absolute; bottom: -.5rem; right: -1rem;}
.company-identity {position: relative; width: fit-content; margin-bottom: 1rem; width: 100%;}
.infos-company {padding-left: 7rem;}
.img_company, .banniere_company {max-width: 150px;}
.img_fondecran {max-width: 100%;}

/* Formulaire */
.form {height: max-content;}
.form div {margin-bottom: 0.5em; display: flex; flex-direction: column;}
#radio-transparent, #radio-couleur {display: flex; flex-direction: row;}
select, textarea, input, #btnSupprimer {margin-bottom: 1rem !important;}
.form input:focus,
.form textarea:focus,
.form select:focus {border-color: var(--color-principal); outline: var(--color-principal); box-shadow: none;}
.form > button span{z-index: 1; position: relative;}
input[type="radio"]{margin-right: .25rem;}
#radio-transparent label, #radio-couleur label{margin-right: 1rem;}
#btnSupprimer {margin-right: 1rem;}
.alert-success, .alert-copy{background-color: var(--color-principal) !important; color: black !important;}
.alert-copy{width: min-content;}
.input-group input {margin-bottom: 0 !important;}
.far.show-pwd.fa-eye:hover, .far.show-pwd.fa-eye-slash:hover {cursor: pointer;}
table input[type="checkbox"]{margin-bottom: 0 !important;}
.colonne-lien {cursor: pointer;}
.submit-row {margin-bottom: 2rem;}
.submit-row .retour {margin: 0 1.5rem 1rem 0;}
.role, .default-branding {width: fit-content; margin: 0 1rem 0 0 !important;}
table input[type="number"] {margin-bottom: 0 !important; width: fit-content;}
fieldset {margin-bottom: 2em;}
.tmpl-signature-img {max-width: 100%; cursor: pointer;}
legend {width: fit-content;}
.date-prog-signature {font-size: 1.2em; margin-bottom: .5em; list-style: #c3ee0a;}
.date-prog-signature::before {background: #c3ee0a; content: ''; width: 15px; height: 15px; display: inline-block; border-radius: 50%; margin-right: .25em; }
.signature-programmee {margin-bottom: 4em;}
.agence {margin: 1em 0;}

/* Filtres et recherche */
#tri, #filtre_role, #filtre_branding {width: fit-content; margin: 0 0 0 1em !important;}
.input-group {width: fit-content;}
#search, #searchbtn {height: fit-content; width: fit-content;}
#searchbtn {background-color: #c3ee0a; color: #000000; outline: #c3ee0a; border-color: #c3ee0a;}
#resetFilters {font-size: .8em; margin-right: 0; margin-top: 1em;}
.reset {display: block; margin: 0 auto; box-shadow: none; text-shadow: none; cursor: pointer; background: transparent; position: relative; padding: 0.5em 1em; border: 0; overflow: hidden; transition: all 0.15s ease-out;}
.reset:after {content: ''; position: absolute; top: 95%; left: 0; width: 100%; height: 100%; background-color: #c3ee0a; z-index: 0; transition: all 0.15s ease-out;z-index: -1;}
.reset:hover:after {top: 0;}

/* Étapes Demande de devis */
.tab {display: none; }
.step {	padding: .25em 1em; background-color: #f2f2f2;border: none; display: inline-block;	opacity: 0.5; }
.step.active {opacity: 1; }
.step:first-of-type{background-color: #c3ee0a;}
.step.finish {background-color: #c3ee0a;}
#formCommande #commanderBtn {display: none;}
#formSteps {margin-bottom: 3em;}
.qteTotale {font-weight: bold; margin: 0 1em;}
tbody select {margin-bottom: 0 !important;}
select#visuels {width: fit-content; margin-bottom: 0 !important;}
#formUploadVisuel, #formTemplateVisuel {display: none;}
.tmplRadio {width: fit-content;}

/* Button */
.form > button, .modifier, .telecharger, .retour, .visualiser, .exporter, .ajouter, .btnSupprimer, .btnCommander, .btnSupprCommande, .btnNext, .btnPrev {display: block; margin: 0 auto; box-shadow: none; text-shadow: none; cursor: pointer; background: transparent; position: relative; padding: 0.5em 1em; border: 0; overflow: hidden; transition: all 0.15s ease-out;}
.form > button:after, .modifier:after, .telecharger:after, .retour:after, .visualiser:after, .exporter:after, .ajouter:after, .btnSupprimer:after, .btnCommander:after, .btnSupprCommande:after, .btnNext:after, .btnPrev:after {content: ''; position: absolute; top: 95%; left: 0; width: 100%; height: 100%; background-color: var(--color-principal); z-index: 0; transition: all 0.15s ease-out;z-index: -1;}
.form > button:hover:after, .telecharger:hover:after, .modifier:hover:after, .retour:hover:after, .visualiser:hover:after, .exporter:hover:after, .btnSupprimer:hover:after, .ajouter:hover:after, .btnCommander:hover:after, .btnSupprCommande:hover:after, .btnNext:hover:after, .btnPrev:hover:after {top: 0;}
.table-container{margin: 0 auto;}
.modifier, .telecharger, .retour, .visualiser, .exporter, .ajouter, .btnSupprimer, .btnCommander, .btnSupprCommande, .btnNext, .btnPrev{margin: 0; z-index: 2; }
.retour, .exporter{margin: 1rem 2rem;}
.lien:hover {color: var(--color-principal) !important;}
.ajouter{height: min-content;}
.btnSupprimer, .btnCommander, .btnSupprCommande, .btnNext {margin-left: 1rem; height: fit-content;}
.btnSupprimer:after, .btnSupprCommande:after {background-color: red;}
.btnSupprimer:hover, .btnSupprCommande:hover {color: #FFF;}
#commanderBtn {padding: 0.5em 1em; margin-bottom: 0 !important; margin-left: 1rem;}
#deleteLogo {margin-bottom: 1rem;}

/* Tooltip */
#tooltipImg{position:absolute; box-shadow: 5px 5px 15px -5px #000000; background-color: white;z-index: 10;}

/* Login */
#login .input-group {width: 100%;}


@media (max-width: 991px) {
	.container {flex-direction: column; align-items: center;}
	.container > article {width: 100%;}
	#content-list-input.type-contact {column-count: 1;}
	.header-contact {min-height: 40vh;}
	.nom {margin-top: .25rem;}
	.btn-card {margin-bottom: 1rem;}
	#contact {min-height: auto;}
	#vcard #contact, #vcard #infos {width: 100%;}
	#social-media {display: flex; flex-direction: column;}
	#social-media .rs-link {margin: .5rem 0  !important;}
	#contact-infos > * {margin-top: 1rem;}
	.input-photo > div {flex-direction: column;}
	.company {margin: 5rem 1rem;}
	.company > .row {flex-direction: column;}
	.company > .row > div {width: 100%;}
	.infos-company {padding: 0;}
	#inscription .container.col-6 {width: 100%;}

	#menu{display: none; transition: all 1s ease-in-out;}
	#menu.open{display: flex; z-index: 10; width: 100vw;}
	#footer-sidebar {display: none;}
	#content > div.col-10 {width: 100%;}
	#burger {display: block;}
	#sidebar {position: absolute; top: 0; left: 0;}
}


@media (max-width: 414px) {
	#contact-infos {font-size: .9em;}
}