:root { --colorBlack : #000000; --colorDarkGray : #585858; --colorGray: #8e8e8e; --colorLightGray : #b3b3b3; --colorWhite : #ffffff; --colorLightRed : #f86687; --colorRed: #e94969; /* Réseaux sociaux et influence #e94969 */ --colorDarkRed : #9e233b; --colorLightBlue : #20fcff; --colorBlue: #00ced1; /* Formation et accompagnement #00ced1 */ --colorDarkBlue : #018789; --colorLightGreen : #8ce75a; --colorGreen: #6eb746; /* Referencement et publicité #6eb746 */ --colorDarkGreen : #47752e; --colorLightOrange : #ff9544; --colorOrange : #d07432; /* Analyse et strategie #d07432 */ --colorDarkOrange : #915224; --colorLightYellow : #ffd160; --colorYellow : #e5b231; /* Identite et creation #e5b231 */ --colorDarkYellow : #9f7c23; --colorLightViolet : #9671e4; --colorViolet : #654c9a; /* Infrastructure et développement #654c9a */ --colorDarkViolet : #362951; --radius : 2px; --bs-card-inner-border-radius : var(--radius) !important; --bs-card-border-radius: var(--radius) !important; } /* FONT SIZE */ .fs-7 { font-size: 0.90rem !important; } .fs-8 { font-size: 0.80rem !important; } .fs-9 { font-size: 0.70rem !important; } .fs-10 { font-size: 0.60rem !important; } .fs-11 { font-size: 0.50rem !important; } .fs-12 { font-size: 0.40rem !important; } /* BACKGROUND */ .bg-black { background: var(--colorBlack) !important; --bs-dropdown-link-hover-bg: var(--colorBlack) !important; color: var(--colorWhite) !important; } .bg-darkgray { background: var(--colorDarkGray) !important; --bs-dropdown-link-hover-bg: var(--colorDarkGray) !important; color: var(--colorWhite) !important; } .bg-gray { background: var(--colorGray) !important; --bs-dropdown-link-hover-bg: var(--colorGray) !important; color: var(--colorWhite) !important; } .bg-lightgray { background: var(--colorLightGray) !important; --bs-dropdown-link-hover-bg: var(--colorLightGray) !important; color: var(--colorBlack) !important; } .bg-white { background: var(--colorWhite) !important; --bs-dropdown-link-hover-bg: var(--colorWhite) !important; color: var(--colorBlack) !important; } .bg-lightred { background: var(--colorLightRed) !important; --bs-dropdown-link-hover-bg: var(--colorLightRed) !important; color: var(--colorBlack) !important; } .bg-red { background: var(--colorRed) !important; --bs-dropdown-link-hover-bg: var(--colorRed) !important; color: var(--colorBlack) !important; } .bg-darkred { background: var(--colorDarkRed) !important; --bs-dropdown-link-hover-bg: var(--colorDarkRed) !important; color: var(--colorWhite) !important; } .bg-lightblue { background: var(--colorLightBlue) !important; --bs-dropdown-link-hover-bg: var(--colorLightBlue) !important; color: var(--colorBlack) !important; } .bg-blue { background: var(--colorBlue) !important; --bs-dropdown-link-hover-bg: var(--colorBlue) !important; color: var(--colorBlack) !important; } .bg-darkblue { background: var(--colorDarkBlue) !important; --bs-dropdown-link-hover-bg: var(--colorDarkBlue) !important; color: var(--colorWhite) !important; } .bg-lightgreen { background: var(--colorLightGreen) !important; --bs-dropdown-link-hover-bg: var(--colorLightGreen) !important; color: var(--colorBlack) !important; } .bg-green { background: var(--colorGreen) !important; --bs-dropdown-link-hover-bg: var(--colorGreen) !important; color: var(--colorBlack) !important; } .bg-darkgreen { background: var(--colorDarkGreen) !important; --bs-dropdown-link-hover-bg: var(--colorDarkGreen) !important; color: var(--colorWhite) !important; } .bg-lightorange { background: var(--colorLightOrange) !important; --bs-dropdown-link-hover-bg: var(--colorLightOrange)!important; color: var(--colorBlack) !important; } .bg-orange { background: var(--colorOrange) !important; --bs-dropdown-link-hover-bg: var(--colorOrange) !important; color: var(--colorBlack) !important; } .bg-darkorange { background: var(--colorDarkOrange) !important; --bs-dropdown-link-hover-bg: var(--colorDarkOrange) !important; color: var(--colorWhite) !important; } .bg-lightyellow { background: var(--colorLightYellow) !important; --bs-dropdown-link-hover-bg: var(--colorLightYellow)!important; color: var(--colorBlack) !important; } .bg-yellow { background: var(--colorYellow) !important; --bs-dropdown-link-hover-bg: var(--colorYellow) !important; color: var(--colorBlack) !important; } .bg-darkyellow { background: var(--colorDarkYellow) !important; --bs-dropdown-link-hover-bg: var(--colorDarkYellow) !important; color: var(--colorWhite) !important; } .bg-lightviolet { background: var(--colorLightViolet) !important; --bs-dropdown-link-hover-bg: var(--colorLightViolet)!important; color: var(--colorBlack) !important; } .bg-violet { background: var(--colorViolet) !important; --bs-dropdown-link-hover-bg: var(--colorViolet) !important; color: var(--colorWhite) !important; } .bg-darkviolet { background: var(--colorDarkViolet) !important; --bs-dropdown-link-hover-bg: var(--colorDarkViolet) !important; color: var(--colorWhite) !important; } .bg-black > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorDarkGray) !important; } .bg-darkgray > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorLightGray) !important; } .bg-gray > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-lightgray > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorDarkGray) !important; } .bg-white > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorLightGray) !important; } .bg-lightred > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-red > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-darkred > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-lightblue > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-blue > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-darkblue > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-lightgreen > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-green > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-darkgreen > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-lightorange > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-orange > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-darkorange > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-lightyellow > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-yellow > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-darkyellow > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-lightviolet > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-violet > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } .bg-darkviolet > .card-header { border-bottom: var(--bs-card-border-width) solid var(--colorWhite) !important; } /* COLOR */ .text-black { color: var(--colorBlack) !important; } .text-darkgray { color: var(--colorDarkGray) !important; } .text-gray { color: var(--colorGray) !important; } .text-lightgray { color: var(--colorLightGray) !important; } .text-white { color: var(--colorWhite) !important; } .text-lightred { color: var(--colorLightRed) !important; } .text-red { color: var(--colorRed) !important; } .text-darkred { color: var(--colorDarkRed) !important; } .text-lightblue { color: var(--colorLightBlue) !important; } .text-blue { color: var(--colorBlue) !important; } .text-darkblue { color: var(--colorDarkBlue) !important; } .text-lightgreen { color: var(--colorLightGreen) !important; } .text-green { color: var(--colorGreen) !important; } .text-darkgreen { color: var(--colorDarkGreen) !important; } .text-lightorange { color: var(--colorLightOrange) !important; } .text-orange { color: var(--colorOrange) !important; } .text-darkorange { color: var(--colorDarkOrange) !important; } .text-lightyellow { color: var(--colorLightYellow) !important; } .text-yellow { color: var(--colorYellow) !important; } .text-darkyellow { color: var(--colorDarkYellow) !important; } .text-lightviolet { color: var(--colorLightViolet) !important; } .text-violet { color: var(--colorViolet) !important; } .text-darkviolet { color: var(--colorDarkViolet) !important; } tr.text-black > td, tr.text-black > th { color: var(--colorBlack) !important; } tr.text-darkgray > td, tr.text-darkgray > th { color: var(--colorDarkGray) !important; } tr.text-gray > td, tr.text-gray > th { color: var(--colorGray) !important; } tr.text-lightgray > td, tr.text-lightgray > th { color: var(--colorLightGray) !important; } tr.text-white > td, tr.text-white > th { color: var(--colorWhite) !important; } tr.text-lightred > td, tr.text-lightred > th { color: var(--colorLightRed) !important; } tr.text-red > td, tr.text-red > th { color: var(--colorRed) !important; } tr.text-darkred > td, tr.text-darkred > th { color: var(--colorDarkRed) !important; } tr.text-lightblue > td, tr.text-lightblue > th { color: var(--colorLightBlue) !important; } tr.text-blue > td, tr.text-blue > th { color: var(--colorBlue) !important; } tr.text-darkblue > td, tr.text-darkblue > th { color: var(--colorDarkBlue) !important; } tr.text-lightgreen > td, tr.text-lightgreen > th { color: var(--colorLightGreen) !important; } tr.text-green > td, tr.text-green > th { color: var(--colorGreen) !important; } tr.text-darkgreen > td, tr.text-darkgreen > th { color: var(--colorDarkGreen) !important; } tr.lightorange > td, tr.text-lightorange > th { color: var(--colorLightOrange) !important; } tr.orange > td, tr.text-orange > th { color: var(--colorOrange) !important; } tr.darkorange > td, tr.text-darkorange > th { color: var(--colorDarkOrange) !important; } tr.lightyellow > td, tr.text-lightyellow > th { color: var(--colorLightYellow) !important; } tr.yellow > td, tr.text-yellow > th { color: var(--colorYellow) !important; } tr.darkyellow > td, tr.text-darkyellow > th { color: var(--colorDarkYellow) !important; } tr.lightviolet > td, tr.text-lightviolet > th { color: var(--colorLightViolet) !important; } tr.violet > td, tr.text-violet > th { color: var(--colorViolet) !important; } tr.darkviolet > td, tr.text-darkviolet > th { color: var(--colorDarkViolet) !important; } /* BTN */ .btn-black { background: var(--colorBlack) !important; color: var(--colorWhite) !important; border: 1px solid var(--colorDarkGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorBlack) !important; --bs-btn-hover-bg: var(--colorBlack) !important; } .btn-darkgray { background: var(--colorDarkGray) !important; color: var(--colorWhite) !important; border: 1px solid var(--colorBlack) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorDarkGray) !important; --bs-btn-hover-bg: var(--colorDarkGray) !important; } .btn-gray { background: var(--colorGray) !important; color: var(--colorWhite) !important; border: 1px solid var(--colorDarkGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorGray) !important; --bs-btn-hover-bg: var(--colorGray) !important; } .btn-lightgray { background: var(--colorLightGray) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorLightGray) !important; --bs-btn-hover-bg: var(--colorLightGray) !important; } .btn-white { background: var(--colorWhite) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorWhite) !important; --bs-btn-hover-bg: var(--colorWhite) !important; } .btn-lightred { background: var(--colorLightRed) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorBlack) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorLightRed) !important; --bs-btn-hover-bg: var(--colorLightRed) !important; } .btn-red { background: var(--colorRed) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorDarkGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorRed) !important; --bs-btn-hover-bg: var(--colorRed) !important; } .btn-darkred { background: var(--colorDarkRed) !important; color: var(--colorWhite) !important; border: 1px solid var(--colorGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorDarkRed) !important; --bs-btn-hover-bg: var(--colorDarkRed) !important; } .btn-lightblue { background: var(--colorLightBlue) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorBlack) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorLightBlue) !important; --bs-btn-hover-bg: var(--colorLightBlue) !important; } .btn-blue { background: var(--colorBlue) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorDarkGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorBlue) !important; --bs-btn-hover-bg: var(--colorBlue) !important; } .btn-darkblue { background: var(--colorDarkBlue) !important; color: var(--colorWhite) !important; border: 1px solid var(--colorGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorDarkBlue) !important; --bs-btn-hover-bg: var(--colorDarkBlue) !important; } .btn-lightgreen { background: var(--colorLightGreen) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorBlack) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorLightGreen) !important; --bs-btn-hover-bg: var(--colorLightGreen) !important; } .btn-green { background: var(--colorGreen) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorDarkGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorGreen) !important; --bs-btn-hover-bg: var(--colorGreen) !important; } .btn-darkgreen { background: var(--colorDarkGreen) !important; color: var(--colorWhite) !important; border: 1px solid var(--colorGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorDarkGreen) !important; --bs-btn-hover-bg: var(--colorDarkGreen) !important; } .btn-lightorange { background: var(--colorLightOrange) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorBlack) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorLightOrange) !important; --bs-btn-hover-bg: var(--colorLightOrange) !important; } .btn-orange { background: var(--colorOrange) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorDarkGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorOrange) !important; --bs-btn-hover-bg: var(--colorOrange) !important; } .btn-darkorange { background: var(--colorDarkOrange) !important; color: var(--colorWhite) !important; border: 1px solid var(--colorGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorDarkOrange) !important; --bs-btn-hover-bg: var(--colorDarkOrange) !important; } .btn-lightyellow { background: var(--colorLightYellow) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorBlack) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorLightYellow) !important; --bs-btn-hover-bg: var(--colorLightYellow) !important; } .btn-yellow { background: var(--colorYellow) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorDarkGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorYellow) !important; --bs-btn-hover-bg: var(--colorYellow) !important; } .btn-darkyellow { background: var(--colorDarkYellow) !important; color: var(--colorWhite) !important; border: 1px solid var(--colorGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorDarkYellow) !important; --bs-btn-hover-bg: var(--colorDarkYellow) !important; } .btn-lightviolet { background: var(--colorLightViolet) !important; color: var(--colorBlack) !important; border: 1px solid var(--colorBlack) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorLightViolet) !important; --bs-btn-hover-bg: var(--colorLightViolet) !important; } .btn-violet { background: var(--colorViolet) !important; color: var(--colorWhite) !important; border: 1px solid var(--colorDarkGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorViolet) !important; --bs-btn-hover-bg: var(--colorViolet) !important; } .btn-darkviolet { background: var(--colorDarkViolet) !important; color: var(--colorWhite) !important; border: 1px solid var(--colorGray) !important; --bs-btn-border-color: none !important; border-radius: var(--radius) !important; --bs-btn-bg: var(--colorDarkViolet) !important; --bs-btn-hover-bg: var(--colorDarkViolet) !important; } /* BORDER */ .border-black { border: 1px solid var(--colorBlack) !important; } .border-darkgray { border: 1px solid var(--colorDarkGray) !important; } .border-gray { border: 1px solid var(--colorGray) !important; } .border-lightgray { border: 1px solid var(--colorLightGray) !important; } .border-white { border: 1px solid var(--colorWhite) !important; } .border-lightred { border: 1px solid var(--colorLightRed) !important; } .border-red { border: 1px solid var(--colorRed) !important; } .border-darkred { border: 1px solid var(--colorDarkRed) !important; } .border-lightblue { border: 1px solid var(--colorLightBlue) !important; } .border-blue { border: 1px solid var(--colorBlue) !important; } .border-darkblue { border: 1px solid var(--colorDarkBlue) !important; } .border-lightgreen { border: 1px solid var(--colorLightGreen) !important; } .border-green { border: 1px solid var(--colorGreen) !important; } .border-darkgreen { border: 1px solid var(--colorDarkGreen) !important; } .border-lightorange { border: 1px solid var(--colorLightOrange) !important; } .border-orange { border: 1px solid var(--colorOrange) !important; } .border-darkorange { border: 1px solid var(--colorDarkOrange) !important; } .border-lightyellow { border: 1px solid var(--colorLightYellow) !important; } .border-yellow { border: 1px solid var(--colorYellow) !important; } .border-darkyellow { border: 1px solid var(--colorDarkYellow) !important; } .border-lightviolet { border: 1px solid var(--colorLightViolet) !important; } .border-violet { border: 1px solid var(--colorViolet) !important; } .border-darkviolet { border: 1px solid var(--colorDarkViolet) !important; } .btn-xs, .btn-group-xs > .btn { --bs-btn-padding-y: 0.12rem; --bs-btn-padding-x: 0.35rem; --bs-btn-font-size: 0.75rem; --bs-btn-border-radius: var(--radius) !important; } .btn-remove-action, .btn-validate-action { height: 36px; } .bg-gray .dropdown-item:hover, .bg-gray .dropdown-item:focus { background: var(--colorBlack) !important; } .card-body { min-height: 56px !important; } .card-body span { font-weight: bolder; } /* RADIUS */ .radius { border-radius: var(--radius) !important; } .radius-0 { border-radius: 0 !important; } .radius-1 { border-radius: 5px !important; } .radius-2 { border-radius: 10px !important; } .radius-3 { border-radius: 15px !important; } /* FORM */ .form-control { border-radius: var(--radius) !important; } .modal-dialog.radius { border-radius: var(--radius) !important; } .tox-tinymce { border-radius: var(--radius) !important; padding-bottom: 10px !important; } .tox .tox-edit-area::before { border: 2px solid var(--colorBlack) !important; border-radius: var(--radius) !important; } /* PROGRESSBAR */ .progress, .progress-bar { border-radius: var(--radius) !important; } @media (min-width: 1680px) { .container { max-width: 1800px; } } .view_profileListComponent{ max-height: 250px; overflow-y: auto; } .form-error{ color: var(--colorDarkRed); } .form-error ul{ padding:0; list-style-type: none; } .loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); /* Overlay gris */ display: flex; justify-content: center; align-items: center; z-index: 1000; } .loader .spinner-border { width: 5rem; height: 5rem; border-width: 8px; } .card { --bs-card-inner-border-radius : var(--radius) !important; --bs-card-border-radius: var(--radius) !important; } table td, table th { background: transparent !important; } .form-check-input:checked { background-color: var(--colorBlack); border-color: var(--colorGray); } .form-check-input:focus { border-color: var(--colorGray); outline: 0; box-shadow: 0 0 0 .25rem rgba(0,0,0,0.15); } .form-control, .form-select, .tox-tinymce { border-radius: var(--radius) !important; border-color: var(--colorGray) !important; } .bottom-30 { bottom: 30px !important; } .form-check.form-switch .calculation, .form-check.form-switch .custonly { min-height: initial; font-size: 12px; } .form-check.form-switch > label { transform: translate(0px, -6px); }