:root { --main-yellow: #AB7A3B; --main-white: #fff; --main-black: #000; } .swal2-container{ z-index: 30000 !important; } .iti__selected-dial-code{ display: none !important; } /* --- Liste des pays (intl-tel-input) --------------------------------- Le modal de vote (#voteBoxDialog) est forcé a z-index: 30000. En mobile, intl-tel-input deplace sa liste dans (".iti--container", z-index 1060 par defaut) : elle passait donc DERRIERE le modal et restait invisible. On la repasse au-dessus, et on retablit un fond clair avec un texte fonce (le fond noir vient de new-form.css). */ .iti--container, .iti--fullscreen-popup.iti--container { z-index: 30050 !important; } .iti__dropdown-content{ background-color: #fff !important; color: #000 !important; } .iti__country, .iti__country-name, .iti__search-input{ color: #000 !important; } .iti__search-input{ background-color: #fff !important; } .iti__dial-code{ color: #666 !important; } .iti__country.iti__highlight, .iti__country[aria-selected="true"], .iti__country:hover{ background-color: rgba(0, 0, 0, 0.06) !important; } /* La liste s ouvre a l interieur du modal : elle doit passer au-dessus des champs qui la suivent, et rester assez haute pour etre utilisable sur un petit ecran. */ .iti--inline-dropdown .iti__dropdown-content{ z-index: 10 !important; border: 1px solid #ccc !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; } .iti--inline-dropdown .iti__country-list{ max-height: 45vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* Filet de securite si le mode plein ecran est reactive un jour */ .iti--fullscreen-popup .iti__country-list{ max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } .hidden{ display: none !important; } .img-rounded{ border-radius: 20px !important; } .step, .label-custom, .form-label, #voteBoxDialogCategory{ /*text-align: left !important;*/ color: var(--main-black) !important; } /** Utilisation de la variable **/ #voteBoxDialogCategory{ font-size: inherit; } .img-rounded{ border-radius: 50px; } .vt_btn{ padding: 1px !important; margin: 2px !important; } #footerAction{ display: flex; } .form-control{ border-radius: 0px; padding-bottom: .5rem; padding-top: .5rem; } .iti{ width: 100% !important; } .btn-voter { background-color: var(--main-yellow) !important; color: var(--main-white) !important; } .two-columns, .button-container, #page-2, #page-1, .modal-header { background-color: var(--main-white) !important; } .modal-content { background-color: var(--main-white) !important; } .btn-close { background-color: transparent !important; } .step button{ background-color: none; } /** personnalisation des titres sur le modal **/ /*.step .label-custom, .modal-title { /color: var(--main-black) !important; }*/ /** couleur jaune inutilisée ? */ /* #FFC600 */ #number, #phone { color: var(--main-black) !important; border-style: solid !important; border-width: 1px !important; border-color: var(--main-black) !important; } #viewMethodCheck { color: var(--main-black) !important; } #next-button, #vote-modal-start, #forceReload, .btn-action { background-color: var(--main-yellow) !important; padding: 5px !important; border-radius: 3px !important; } .back{ background-color: #000 !important; } .iti__selected-country{ padding: 2px !important; } #vote-total, .text_motivview, .listPack, #listPack, #formCheck { color: var(--main-black) !important; } #choiceMethod { color: var(--main-yellow) !important; } .back { background-color: none !important; } .payment-method.selected { border-color: var(--main-yellow) !important; } .iti__selected-country{ background-color: transparent !important; } #voteBoxDialogLabel { font-size: 20px; } @media screen and (max-width: 767px) { #voteBoxDialogLabel { font-size: 16px; } }