@charset "UTF-8"; @import "/webjars/bootstrap/5.3.7/dist/css/bootstrap.min.css"; @import "/webjars/selectize.js/0.15.2/css/selectize.bootstrap5.css"; @import "../css/fonts/materialdesignicons.css"; @import "../css/core-icon.css"; @import "../css/extra-icon.css"; @import "../css/overlayScrollbars/OverlayScrollbars.min.css"; @import "../css/fullCalendar/fullcalendar.css"; @import "../css/lobipanel/lobipanel.css"; /* Autocomplete */ .autocomplete-container { position: relative; display: inline-block; width: 100%; } .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-radius: 3px; margin-top: 5px; z-index: 150; top: 100%; left: -10px; right: -10px; background-color: #fff; overflow: auto; font-size: 1rem; font-weight: 400; } .autocomplete-item { padding: 10px; cursor: pointer; background-color: #fff; } .autocomplete-item:hover { background-color: #f7f7f7; } .autocomplete-active { background-color: #eee; } .autocomplete-no-results { padding: 10px; background-color: #fff; } .autocomplete-loader-container { position: absolute; right: 10px; } .autocomplete-loader-size { width: 20px; height: 20px; } @keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .slug-animation > *:not(.spinner-border):not(button):not(.form-floating) { opacity: 0; animation: slug 0.5s forwards; } @keyframes slug { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } #backtotop-container { position: relative; } #backtotop { right: 0px; position: fixed; width: 50px; z-index: 6666; display: none; /* Show using Javascript */ height: 80px; } #backtotop.fixed-bottom { height: 100px; z-index: 666; right: 0; left: auto !important; } #backtotop.chat { bottom: 60px; left: 17px; } #backtotop a.top, #backtotop a.bottom { background-color: var(--primary-color); color: #fff; display: none; text-align: center; text-decoration: none; transition: all 0.3s ease 0s; /*! font-size: 1.1em; */ opacity: 0.5; /*! max-width: 40px; */ border-radius: 20px; /*! height: 40px; */ display: block; width: 40px; height: 40px; line-height: 40px !important; } #backtotop a.bottom.disabled, #backtotop a.bottom.disabled:hover { opacity: 0.25; cursor: default; transition: none; background-color: var(--primary-color); } #backtotop a.top:hover { background-color: rgba(var(--primary-color-rgb), 0.75); color: #fff; opacity: 1; } #backtotop a.top .mdi:before, #backtotop a.bottom .mdi:before, #backtotop a.top .iconify--mdi:before, #backtotop a.bottom .iconify--mdi:before { color: #fff; font-size: 30px; font-weight: bold; } #backtotop a.bottom { position: absolute; top: 50px; left: 0; } #backtotop a.bottom:hover { background-color: rgba(var(--primary-color-rgb), 0.75); color: #fff; opacity: 1; } body.popup #backtotop { display: none; } body.popup #backtotop a.top, body.popup #backtotop a.bottom { padding: 4px 6px; font-size: 10px; } body.popup #backtotop a.bottom { top: 25px; } body.modal-open #backtotop { display: none !important; } .body.widget #backtotop { display: none; } .badge[class*=" border-"] { border-width: 1px; border-style: solid; } .badge-sm { font-size: 0.75rem !important; padding: 0.25rem 0.5rem !important; } .badge-lg { font-size: 1rem !important; padding: 0.5rem 1rem !important; } .badge { background: var(--badge-bg); color: var(--badge-text); border: 1px solid var(--badge-border-color); display: inline-block; padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x); font-size: var(--bs-badge-font-size); --bs-badge-padding-x: 0.65em; --bs-badge-padding-y: 0.35em; --bs-badge-font-size: 0.85em; --bs-badge-font-weight: 500; } .badge-pill { border-radius: 100rem; } .badge-lighter-primary { --badge-bg: var(--primary-color-lighter); --badge-text: var(--primary-color-lighter-contrast-text); --badge-border-color: var(--primary-color-lighter); } .badge-outline-lighter-primary { --badge-bg: var(--white-color); --badge-text: var(--primary-color-lighter-contrast-text); --badge-border-color: var(--primary-color-lighter); } .badge-light-primary { --badge-bg: var(--primary-color-light); --badge-text: var(--primary-color-light-contrast-text); --badge-border-color: var(--primary-color-light); } .badge-outline-light-primary { --badge-bg: var(--white-color); --badge-text: var(--primary-color-light-contrast-text); --badge-border-color: var(--primary-color-light); } .badge-primary { --badge-bg: var(--primary-color); --badge-text: var(--primary-color-contrast-text); --badge-border-color: var(--primary-color); } .badge-outline-primary { --badge-bg: var(--white-color); --badge-text: var(--primary-color); --badge-border-color: var(--primary-color); } .badge-dark-primary { --badge-bg: var(--primary-color-dark); --badge-text: var(--primary-color-dark-contrast-text); --badge-border-color: var(--primary-color-dark); } .badge-outline-dark-primary { --badge-bg: var(--white-color); --badge-text: var(--primary-color-dark); --badge-border-color: var(--primary-color-dark); } .badge-darker-primary { --badge-bg: var(--primary-color-darker); --badge-text: var(--primary-color-darker-contrast-text); --badge-border-color: var(--primary-color-darker); } .badge-outline-darker-primary { --badge-bg: var(--white-color); --badge-text: var(--primary-color-darker); --badge-border-color: var(--primary-color-darker); } /**/ .badge-lighter-secondary { --badge-bg: var(--secondary-color-lighter); --badge-text: var(--secondary-color-lighter-contrast-text); --badge-border-color: var(--secondary-color-lighter); } .badge-outline-lighter-secondary { --badge-bg: var(--white-color); --badge-text: var(--secondary-color-lighter-contrast-text); --badge-border-color: var(--secondary-color-lighter); } .badge-light-secondary { --badge-bg: var(--secondary-color-light); --badge-text: var(--secondary-color-light-contrast-text); --badge-border-color: var(--secondary-color-light); } .badge-outline-light-secondary { --badge-bg: var(--white-color); --badge-text: var(--secondary-color-light-contrast-text); --badge-border-color: var(--secondary-color-light); } .badge-secondary { --badge-bg: var(--secondary-color); --badge-text: var(--secondary-color-contrast-text); --badge-border-color: var(--secondary-color); } .badge-outline-secondary { --badge-bg: var(--white-color); --badge-text: var(--secondary-color); --badge-border-color: var(--secondary-color); } .badge-dark-secondary { --badge-bg: var(--secondary-color-dark); --badge-text: var(--secondary-color-dark-contrast-text); --badge-border-color: var(--secondary-color-dark); } .badge-outline-dark-secondary { --badge-bg: var(--white-color); --badge-text: var(--secondary-color-dark); --badge-border-color: var(--secondary-color-dark); } .badge-darker-secondary { --badge-bg: var(--secondary-color-darker); --badge-text: var(--secondary-color-darker-contrast-text); --badge-border-color: var(--secondary-color-darker); } .badge-outline-darker-secondary { --badge-bg: var(--white-color); --badge-text: var(--secondary-color-darker); --badge-border-color: var(--secondary-color-darker); } /**/ .badge-lighter-tertiary { --badge-bg: var(--tertiary-color-lighter); --badge-text: var(--tertiary-color-lighter-contrast-text); --badge-border-color: var(--tertiary-color-lighter); } .badge-outline-lighter-tertiary { --badge-bg: var(--white-color); --badge-text: var(--tertiary-color-lighter-contrast-text); --badge-border-color: var(--tertiary-color-lighter); } .badge-light-tertiary { --badge-bg: var(--tertiary-color-light); --badge-text: var(--tertiary-color-light-contrast-text); --badge-border-color: var(--tertiary-color-light); } .badge-outline-light-tertiary { --badge-bg: var(--white-color); --badge-text: var(--tertiary-color-light-contrast-text); --badge-border-color: var(--tertiary-color-light); } .badge-tertiary { --badge-bg: var(--tertiary-color); --badge-text: var(--tertiary-color-contrast-text); --badge-border-color: var(--tertiary-color); } .badge-outline-tertiary { --badge-bg: var(--white-color); --badge-text: var(--tertiary-color); --badge-border-color: var(--tertiary-color); } .badge-dark-tertiary { --badge-bg: var(--tertiary-color-dark); --badge-text: var(--tertiary-color-dark-contrast-text); --badge-border-color: var(--tertiary-color-dark); } .badge-outline-dark-tertiary { --badge-bg: var(--white-color); --badge-text: var(--tertiary-color-dark); --badge-border-color: var(--tertiary-color-dark); } .badge-darker-tertiary { --badge-bg: var(--tertiary-color-darker); --badge-text: var(--tertiary-color-darker-contrast-text); --badge-border-color: var(--tertiary-color-darker); } .badge-outline-darker-tertiary { --badge-bg: var(--white-color); --badge-text: var(--tertiary-color-darker); --badge-border-color: var(--tertiary-color-darker); } /**/ .badge-lighter-blue { --badge-bg: var(--blue-color-lighter); --badge-text: var(--blue-color-lighter-contrast-text); --badge-border-color: var(--blue-color-lighter); } .badge-outline-lighter-blue { --badge-bg: var(--white-color); --badge-text: var(--blue-color-darker); --badge-border-color: var(--blue-color-lighter); } .badge-light-blue { --badge-bg: var(--blue-color-light); --badge-text: var(--blue-color-light-contrast-text); --badge-border-color: var(--blue-color-light); } .badge-outline-light-blue { --badge-bg: var(--white-color); --badge-text: var(--blue-color-darker); --badge-border-color: var(--blue-color-light); } .badge-blue { --badge-bg: var(--blue-color); --badge-text: var(--blue-color-contrast-text); --badge-border-color: var(--blue-color); } .badge-outline-blue { --badge-bg: var(--white-color); --badge-text: var(--blue-color-darker); --badge-border-color: var(--blue-color); } .badge-dark-blue { --badge-bg: var(--blue-color-dark); --badge-text: var(--blue-color-dark-contrast-text); --badge-border-color: var(--blue-color-dark); } .badge-outline-dark-blue { --badge-bg: var(--white-color); --badge-text: var(--blue-color-darker); --badge-border-color: var(--blue-color-dark); } .badge-darker-blue { --badge-bg: var(--blue-color-darker); --badge-text: var(--blue-color-darker-contrast-text); --badge-border-color: var(--blue-color-darker); } .badge-outline-darker-blue { --badge-bg: var(--white-color); --badge-text: var(--blue-color-darker); --badge-border-color: var(--blue-color-darker); } /**/ .badge-lighter-green { --badge-bg: var(--green-color-lighter); --badge-text: var(--green-color-lighter-contrast-text); --badge-border-color: var(--green-color-lighter); } .badge-outline-lighter-green { --badge-bg: var(--white-color); --badge-text: var(--green-color-darker); --badge-border-color: var(--green-color-lighter); } .badge-light-green { --badge-bg: var(--green-color-light); --badge-text: var(--green-color-light-contrast-text); --badge-border-color: var(--green-color-light); } .badge-outline-light-green { --badge-bg: var(--white-color); --badge-text: var(--green-color-darker); --badge-border-color: var(--green-color-light); } .badge-green { --badge-bg: var(--green-color); --badge-text: var(--green-color-contrast-text); --badge-border-color: var(--green-color); } .badge-outline-green { --badge-bg: var(--white-color); --badge-text: var(--green-color); --badge-border-color: var(--green-color); } .badge-dark-green { --badge-bg: var(--green-color-dark); --badge-text: var(--green-color-dark-contrast-text); --badge-border-color: var(--green-color-dark); } .badge-outline-dark-green { --badge-bg: var(--white-color); --badge-text: var(--green-color-dark); --badge-border-color: var(--green-color-dark); } .badge-darker-green { --badge-bg: var(--green-color-darker); --badge-text: var(--green-color-darker-contrast-text); --badge-border-color: var(--green-color-darker); } .badge-outline-darker-green { --badge-bg: var(--white-color); --badge-text: var(--green-color-darker); --badge-border-color: var(--green-color-darker); } /**/ .badge-lighter-yellow { --badge-bg: var(--yellow-color-lighter); --badge-text: var(--yellow-color-lighter-contrast-text); --badge-border-color: var(--yellow-color-lighter); } .badge-outline-lighter-yellow { --badge-bg: var(--white-color); --badge-text: var(--yellow-color-darker); --badge-border-color: var(--yellow-color-lighter); } .badge-light-yellow { --badge-bg: var(--yellow-color-light); --badge-text: var(--yellow-color-light-contrast-text); --badge-border-color: var(--yellow-color-light); } .badge-outline-light-yellow { --badge-bg: var(--white-color); --badge-text: var(--yellow-color-darker); --badge-border-color: var(--yellow-color-light); } .badge-yellow { --badge-bg: var(--yellow-color); --badge-text: var(--yellow-color-contrast-text); --badge-border-color: var(--yellow-color); } .badge-outline-yellow { --badge-bg: var(--white-color); --badge-text: var(--yellow-color-darker); --badge-border-color: var(--yellow-color); } .badge-dark-yellow { --badge-bg: var(--yellow-color-dark); --badge-text: var(--yellow-color-dark-contrast-text); --badge-border-color: var(--yellow-color-dark); } .badge-outline-dark-yellow { --badge-bg: var(--white-color); --badge-text: var(--yellow-color-darker); --badge-border-color: var(--yellow-color-dark); } .badge-darker-yellow { --badge-bg: var(--yellow-color-darker); --badge-text: var(--yellow-color-darker-contrast-text); --badge-border-color: var(--yellow-color-darker); } .badge-outline-darker-yellow { --badge-bg: var(--white-color); --badge-text: var(--yellow-color-darker); --badge-border-color: var(--yellow-color-darker); } /**/ .badge-lighter-orange { --badge-bg: var(--orange-color-lighter); --badge-text: var(--orange-color-lighter-contrast-text); --badge-border-color: var(--orange-color-lighter); } .badge-outline-lighter-orange { --badge-bg: var(--white-color); --badge-text: var(--orange-color-darker); --badge-border-color: var(--orange-color-lighter); } .badge-light-orange { --badge-bg: var(--orange-color-light); --badge-text: var(--orange-color-light-contrast-text); --badge-border-color: var(--orange-color-light); } .badge-outline-light-orange { --badge-bg: var(--white-color); --badge-text: var(--orange-color-darker); --badge-border-color: var(--orange-color-light); } .badge-orange { --badge-bg: var(--orange-color); --badge-text: var(--orange-color-contrast-text); --badge-border-color: var(--orange-color); } .badge-outline-orange { --badge-bg: var(--white-color); --badge-text: var(--orange-color-darker); --badge-border-color: var(--orange-color); } .badge-dark-orange { --badge-bg: var(--orange-color-dark); --badge-text: var(--orange-color-dark-contrast-text); --badge-border-color: var(--orange-color-dark); } .badge-outline-dark-orange { --badge-bg: var(--white-color); --badge-text: var(--orange-color-darker); --badge-border-color: var(--orange-color-dark); } .badge-darker-orange { --badge-bg: var(--orange-color-darker); --badge-text: var(--orange-color-darker-contrast-text); --badge-border-color: var(--orange-color-darker); } .badge-outline-darker-orange { --badge-bg: var(--white-color); --badge-text: var(--orange-color-darker); --badge-border-color: var(--orange-color-darker); } /**/ .badge-lighter-red { --badge-bg: var(--red-color-lighter); --badge-text: var(--red-color-lighter-contrast-text); --badge-border-color: var(--red-color-lighter); } .badge-outline-lighter-red { --badge-bg: var(--white-color); --badge-text: var(--red-color-darker); --badge-border-color: var(--red-color-lighter); } .badge-light-red { --badge-bg: var(--red-color-light); --badge-text: var(--red-color-light-contrast-text); --badge-border-color: var(--red-color-light); } .badge-outline-light-red { --badge-bg: var(--white-color); --badge-text: var(--red-color-darker); --badge-border-color: var(--red-color-light); } .badge-red { --badge-bg: var(--red-color); --badge-text: var(--red-color-contrast-text); --badge-border-color: var(--red-color); } .badge-outline-red { --badge-bg: var(--white-color); --badge-text: var(--red-color-darker); --badge-border-color: var(--red-color); } .badge-dark-red { --badge-bg: var(--red-color-dark); --badge-text: var(--red-color-dark-contrast-text); --badge-border-color: var(--red-color-dark); } .badge-outline-dark-red { --badge-bg: var(--white-color); --badge-text: var(--red-color-darker); --badge-border-color: var(--red-color-dark); } .badge-darker-red { --badge-bg: var(--red-color-darker); --badge-text: var(--red-color-darker-contrast-text); --badge-border-color: var(--red-color-darker); } .badge-outline-darker-red { --badge-bg: var(--white-color); --badge-text: var(--red-color-darker); --badge-border-color: var(--red-color-darker); } /**/ .badge-lighter-brown { --badge-bg: var(--brown-color-lighter); --badge-text: var(--brown-color-lighter-contrast-text); --badge-border-color: var(--brown-color-lighter); } .badge-outline-lighter-brown { --badge-bg: var(--white-color); --badge-text: var(--brown-color-darker); --badge-border-color: var(--brown-color-lighter); } .badge-light-brown { --badge-bg: var(--brown-color-light); --badge-text: var(--brown-color-light-contrast-text); --badge-border-color: var(--brown-color-light); } .badge-outline-light-brown { --badge-bg: var(--white-color); --badge-text: var(--brown-color-darker); --badge-border-color: var(--brown-color-light); } .badge-brown { --badge-bg: var(--brown-color); --badge-text: var(--brown-color-contrast-text); --badge-border-color: var(--brown-color); } .badge-outline-brown { --badge-bg: var(--white-color); --badge-text: var(--brown-color-darker); --badge-border-color: var(--brown-color); } .badge-dark-brown { --badge-bg: var(--brown-color-dark); --badge-text: var(--brown-color-dark-contrast-text); --badge-border-color: var(--brown-color-dark); } .badge-outline-dark-brown { --badge-bg: var(--white-color); --badge-text: var(--brown-color-darker); --badge-border-color: var(--brown-color-dark); } .badge-darker-brown { --badge-bg: var(--brown-color-darker); --badge-text: var(--brown-color-darker-contrast-text); --badge-border-color: var(--brown-color-darker); } .badge-outline-darker-brown { --badge-bg: var(--white-color); --badge-text: var(--brown-color-darker); --badge-border-color: var(--brown-color-darker); } /**/ .badge-lighter-pink { --badge-bg: var(--pink-color-lighter); --badge-text: var(--pink-color-lighter-contrast-text); --badge-border-color: var(--pink-color-lighter); } .badge-outline-lighter-pink { --badge-bg: var(--white-color); --badge-text: var(--pink-color-darker); --badge-border-color: var(--pink-color-lighter); } .badge-light-pink { --badge-bg: var(--pink-color-light); --badge-text: var(--pink-color-light-contrast-text); --badge-border-color: var(--pink-color-light); } .badge-outline-light-pink { --badge-bg: var(--white-color); --badge-text: var(--pink-color-darker); --badge-border-color: var(--pink-color-light); } .badge-pink { --badge-bg: var(--pink-color); --badge-text: var(--pink-color-contrast-text); --badge-border-color: var(--pink-color); } .badge-outline-pink { --badge-bg: var(--white-color); --badge-text: var(--pink-color-darker); --badge-border-color: var(--pink-color); } .badge-dark-pink { --badge-bg: var(--pink-color-dark); --badge-text: var(--pink-color-dark-contrast-text); --badge-border-color: var(--pink-color-dark); } .badge-outline-dark-pink { --badge-bg: var(--white-color); --badge-text: var(--pink-color-darker); --badge-border-color: var(--pink-color-dark); } .badge-darker-pink { --badge-bg: var(--pink-color-darker); --badge-text: var(--pink-color-darker-contrast-text); --badge-border-color: var(--pink-color-darker); } .badge-outline-darker-pink { --badge-bg: var(--white-color); --badge-text: var(--pink-color-darker); --badge-border-color: var(--pink-color-darker); } /**/ .badge-lighter-purple { --badge-bg: var(--purple-color-lighter); --badge-text: var(--purple-color-lighter-contrast-text); --badge-border-color: var(--purple-color-lighter); } .badge-outline-lighter-purple { --badge-bg: var(--white-color); --badge-text: var(--purple-color-darker); --badge-border-color: var(--purple-color-lighter); } .badge-light-purple { --badge-bg: var(--purple-color-light); --badge-text: var(--purple-color-light-contrast-text); --badge-border-color: var(--purple-color-light); } .badge-outline-light-purple { --badge-bg: var(--white-color); --badge-text: var(--purple-color-darker); --badge-border-color: var(--purple-color-light); } .badge-purple { --badge-bg: var(--purple-color); --badge-text: var(--purple-color-contrast-text); --badge-border-color: var(--purple-color); } .badge-outline-purple { --badge-bg: var(--white-color); --badge-text: var(--purple-color-darker); --badge-border-color: var(--purple-color); } .badge-dark-purple { --badge-bg: var(--purple-color-dark); --badge-text: var(--purple-color-dark-contrast-text); --badge-border-color: var(--purple-color-dark); } .badge-outline-dark-purple { --badge-bg: var(--white-color); --badge-text: var(--purple-color-darker); --badge-border-color: var(--purple-color-dark); } .badge-darker-purple { --badge-bg: var(--purple-color-darker); --badge-text: var(--purple-color-darker-contrast-text); --badge-border-color: var(--purple-color-darker); } .badge-outline-darker-purple { --badge-bg: var(--white-color); --badge-text: var(--purple-color-darker); --badge-border-color: var(--purple-color-darker); } /**/ .badge-lighter-grey { --badge-bg: var(--grey-color-lighter); --badge-text: var(--grey-color-lighter-contrast-text); --badge-border-color: var(--grey-color-lighter); } .badge-outline-lighter-grey { --badge-bg: var(--white-color); --badge-text: var(--grey-color-darker); --badge-border-color: var(--grey-color-lighter); } .badge-light-grey { --badge-bg: var(--grey-color-light); --badge-text: var(--grey-color-light-contrast-text); --badge-border-color: var(--grey-color-light); } .badge-outline-light-grey { --badge-bg: var(--white-color); --badge-text: var(--grey-color-darker); --badge-border-color: var(--grey-color-light); } .badge-grey { --badge-bg: var(--grey-color); --badge-text: var(--grey-color-contrast-text); --badge-border-color: var(--grey-color); } .badge-outline-grey { --badge-bg: var(--white-color); --badge-text: var(--grey-color-darker); --badge-border-color: var(--grey-color); } .badge-dark-grey { --badge-bg: var(--grey-color-dark); --badge-text: var(--grey-color-dark-contrast-text); --badge-border-color: var(--grey-color-dark); } .badge-outline-dark-grey { --badge-bg: var(--white-color); --badge-text: var(--grey-color-darker); --badge-border-color: var(--grey-color-dark); } .badge-darker-grey { --badge-bg: var(--grey-color-darker); --badge-text: var(--grey-color-darker-contrast-text); --badge-border-color: var(--grey-color-darker); } .badge-outline-darker-grey { --badge-bg: var(--white-color); --badge-text: var(--grey-color-darker); --badge-border-color: var(--grey-color-darker); } /**/ .badge-white { --badge-bg: var(--white-color); --badge-text: var(--white-color-contrast-text); --badge-border-color: var(--white-color); } .badge-outline-white { --badge-bg: var(--white-color); --badge-text: var(--white-color-contrast-text); --badge-border-color: var(--white-color-contrast-text); } .badge-black { --badge-bg: var(--black-color); --badge-text: var(--black-color-contrast-text); --badge-border-color: var(--black-color); } .badge-outline-black { --badge-bg: var(--white-color); --badge-text: var(--black-color-contrast-text); --badge-border-color: var(--black-color-contrast-text); } html { height: 100%; /* Sticky footer ie11 compatible */ } body { display: flex; /* Sticky footer ie11 compatible */ min-height: 100vh; /* Sticky footer ie11 compatible */ height: 100%; /* Sticky footer ie11 compatible */ flex-direction: column; /* Sticky footer ie11 compatible */ } /* BORDER */ /* NOTE: border-color settings in _colors.scss*/ .border-1 { --bs-border-width: 1px; } .border-2 { --bs-border-width: 2px; } .border-3 { --bs-border-width: 3px; } .border-4 { --bs-border-width: 4px; } .border-5 { --bs-border-width: 5px; } .border-6 { --bs-border-width: 6px; } [class^=border-dotted] { /* Can be overridden by border-number and border-color */ border-width: 1px; border-color: #aaa; } .border-dotted { border-top-style: dotted !important; border-bottom-style: dotted !important; border-left-style: dotted !important; border-right-style: dotted !important; } .border-dotted-top { border-top-style: dotted !important; border-bottom-style: none !important; border-left-style: none !important; border-right-style: none !important; } .border-dotted-end { border-top-style: none !important; border-bottom-style: none !important; border-left-style: none !important; border-right-style: dotted !important; } .border-dotted-bottom { border-top-style: none !important; border-bottom-style: dotted !important; border-left-style: none !important; border-right-style: none !important; } .border-dotted-start { border-top-style: none !important; border-bottom-style: none !important; border-left-style: dotted !important; border-right-style: none !important; } .border-dotted-0 { border-top-style: none !important; border-bottom-style: none !important; border-left-style: none !important; border-right-style: none !important; } .border-dotted-top-0 { border-top-style: none !important; border-bottom-style: dotted !important; border-left-style: dotted !important; border-right-style: dotted !important; } .border-dotted-end-0 { border-top-style: dotted !important; border-bottom-style: dotted !important; border-left-style: dotted !important; border-right-style: none !important; } .border-dotted-bottom-0 { border-top-style: dotted !important; border-bottom-style: none !important; border-left-style: dotted !important; border-right-style: dotted !important; } .border-dotted-start-0 { border-top-style: dotted !important; border-bottom-style: dotted !important; border-left-style: none !important; border-right-style: dotted !important; } [class^=border-dashed] { /* Can be overridden by border-number and border-color */ border-width: 1px; border-color: #aaa; } .border-dashed { border-top-style: dashed !important; border-bottom-style: dashed !important; border-left-style: dashed !important; border-right-style: dashed !important; } .border-dashed-top { border-top-style: dashed !important; border-bottom-style: none !important; border-left-style: none !important; border-right-style: none !important; } .border-dashed-end { border-top-style: none !important; border-bottom-style: none !important; border-left-style: none !important; border-right-style: dashed !important; } .border-dashed-bottom { border-top-style: none !important; border-bottom-style: dashed !important; border-left-style: none !important; border-right-style: none !important; } .border-dashed-start { border-top-style: none !important; border-bottom-style: none !important; border-left-style: dashed !important; border-right-style: none !important; } .border-dashed-0 { border-top-style: none !important; border-bottom-style: none !important; border-left-style: none !important; border-right-style: none !important; } .border-dashed-top-0 { border-top-style: none !important; border-bottom-style: dashed !important; border-left-style: dashed !important; border-right-style: dashed !important; } .border-dashed-end-0 { border-top-style: dashed !important; border-bottom-style: dashed !important; border-left-style: dashed !important; border-right-style: none !important; } .border-dashed-bottom-0 { border-top-style: dashed !important; border-bottom-style: none !important; border-left-style: dashed !important; border-right-style: dashed !important; } .border-dashed-start-0 { border-top-style: dashed !important; border-bottom-style: dashed !important; border-left-style: none !important; border-right-style: dashed !important; } /* Removing border */ .rounded-top-start-radius-0 { border-top-left-radius: 0 !important; } .rounded-top-end-radius-0 { border-top-right-radius: 0 !important; } .rounded-top-radius-0 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .rounded-bottom-start-radius-0 { border-bottom-left-radius: 0 !important; } .rounded-bottom-end-radius-0 { border-bottom-right-radius: 0 !important; } .rounded-bottom-radius-0 { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Removing rounded border */ .border-top-start-radius-0 { border-top-left-radius: 0px; } .border-top-end-radius-0 { border-top-right-radius: 0px; } .border-bottom-start-radius-0 { border-bottom-left-radius: 0px; } .border-bottom-end-radius-0 { border-bottom-right-radius: 0px; } /* Responsive border */ @media (max-width: 575px) { .border { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-0 { border: none !important; } .border-top-0 { border-top: none !important; } .border-start-0 { border-left: none !important; } .border-bottom-0 { border-bottom: none !important; } .border-end-0 { border-right: none !important; } } @media (min-width: 576px) { .border-sm { border: none !important; } .border-sm-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-sm-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-sm-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-sm-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-sm-0 { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-sm-top-0 { border-top: none !important; } .border-sm-start-0 { border-left: none !important; } .border-sm-bottom-0 { border-bottom: none !important; } .border-sm-end-0 { border-right: none !important; } } @media (min-width: 768px) { .border-md { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-md-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-md-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-md-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-md-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-md-0 { border: none !important; } .border-md-top-0 { border-top: none !important; } .border-md-start-0 { border-left: none !important; } .border-md-bottom-0 { border-bottom: none !important; } .border-md-end-0 { border-right: none !important; } } @media (min-width: 992px) { .border-lg { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-lg-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-lg-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-lg-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-lg-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-lg-0 { border: none !important; } .border-lg-top-0 { border-top: none !important; } .border-lg-start-0 { border-left: none !important; } .border-lg-bottom-0 { border-bottom: none !important; } .border-lg-end-0 { border-right: none !important; } } @media (min-width: 1200px) { .border-xl { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-xl-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-xl-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-xl-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-xl-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-xl-0 { border: none !important; } .border-xl-top-0 { border-top: none !important; } .border-xl-start-0 { border-left: none !important; } .border-xl-bottom-0 { border-bottom: none !important; } .border-xl-end-0 { border-right: none !important; } } @media (min-width: 1400px) { .border-xxl { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-xxl-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-xxl-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-xxl-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-xxl-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-xxl-0 { border: none !important; } .border-xxl-top-0 { border-top: none !important; } .border-xxl-start-0 { border-left: none !important; } .border-xxl-bottom-0 { border-bottom: none !important; } .border-xxl-end-0 { border-right: none !important; } } /* Colors */ .border-start-primary { border-left-color: var(--primary-color) !important; } .border-end-primary { border-right-color: var(--primary-color) !important; } .border-start-secondary { border-left-color: var(--secondary-color) !important; } .border-end-secondary { border-right-color: var(--secondary-color) !important; } /* Underscore */ .underscore-primary:after { color: var(--primary-color) !important; content: "_"; } .underscore-secondary:after { color: var(--secondary-color) !important; content: "_"; } .underscore-tertiary:after { color: var(--tertiary-color) !important; content: "_"; } /* Colors */ .border-lighter-blue { border-color: var(--blue-color-lighter) !important; } .border-light-blue { border-color: var(--blue-color-light) !important; } .border-blue { border-color: var(--blue-color) !important; } .border-dark-blue { border-color: var(--blue-color-dark) !important; } .border-darker-blue { border-color: var(--blue-color-darker) !important; } .border-lighter-green { border-color: var(--green-color-lighter) !important; } .border-light-green { border-color: var(--green-color-light) !important; } .border-green { border-color: var(--green-color) !important; } .border-dark-green { border-color: var(--green-color-dark) !important; } .border-darker-green { border-color: var(--green-color-darker) !important; } .border-lighter-yellow { border-color: var(--yellow-color-lighter) !important; } .border-light-yellow { border-color: var(--yellow-color-light) !important; } .border-yellow { border-color: var(--yellow-color) !important; } .border-dark-yellow { border-color: var(--yellow-color-dark) !important; } .border-darker-yellow { border-color: var(--yellow-color-darker) !important; } .border-lighter-orange { border-color: var(--orange-color-lighter) !important; } .border-light-orange { border-color: var(--orange-color-light) !important; } .border-orange { border-color: var(--orange-color) !important; } .border-dark-orange { border-color: var(--orange-color-dark) !important; } .border-darker-orange { border-color: var(--orange-color-darker) !important; } .border-lighter-red { border-color: var(--red-color-lighter) !important; } .border-light-red { border-color: var(--red-color-light) !important; } .border-red { border-color: var(--red-color) !important; } .border-dark-red { border-color: var(--red-color-dark) !important; } .border-darker-red { border-color: var(--red-color-darker) !important; } .border-lighter-brown { border-color: var(--brown-color-lighter) !important; } .border-light-brown { border-color: var(--brown-color-light) !important; } .border-brown { border-color: var(--brown-color-light) !important; } .border-dark-brown { border-color: var(--brown-color-dark) !important; } .border-darker-brown { border-color: var(--brown-color-darker) !important; } .border-lighter-pink { border-color: var(--pink-color-lighter) !important; } .border-light-pink { border-color: var(--pink-color-light) !important; } .border-pink { border-color: var(--pink-color) !important; } .border-dark-pink { border-color: var(--pink-color-dark) !important; } .border-darker-pink { border-color: var(--pink-color-darker) !important; } .border-lighter-purple { border-color: var(--purple-color-lighter) !important; } .border-light-purple { border-color: var(--purple-color-light) !important; } .border-purple { border-color: var(--purple-color) !important; } .border-dark-purple { border-color: var(--dark-purple-color) !important; } .border-darker-purple { border-color: var(--purple-color-darker) !important; } .border-lighter-grey { border-color: var(--grey-color-lighter) !important; } .border-light-grey { border-color: var(--grey-color-light) !important; } .border-grey { border-color: var(--grey-color) !important; } .border-dark-grey { border-color: var(--grey-color-dark) !important; } .border-darker-grey { border-color: var(--grey-color-darker) !important; } .border-white { border-color: var(--white-color) !important; } /* BORDES */ /* Border primary */ .border-top-primary { border-top-color: var(--primary-color) !important; } .border-right-primary { border-right-color: var(--primary-color) !important; } .border-bottom-primary { border-bottom-color: var(--primary-color) !important; } .border-left-primary { border-left-color: var(--primary-color) !important; } /**/ .border-lighter-primary { border-color: var(--primary-color-lighter) !important; } .border-light-primary { border-color: var(--primary-color-light) !important; } .border-primary { border-color: var(--primary-color) !important; } .border-dark-primary { border-color: var(--primary-color-dark) !important; } .border-darker-primary { border-color: var(--primary-color-darker) !important; } /* Border secondary */ .border-top-secondary { border-top-color: var(--secondary-color) !important; } .border-right-secondary { border-right-color: var(--secondary-color) !important; } .border-bottom-secondary { border-bottom-color: var(--secondary-color) !important; } .border-left-secondary { border-left-color: var(--secondary-color) !important; } /**/ .border-lighter-secondary { border-color: var(--secondary-color-lighter) !important; } .border-light-secondary { border-color: var(--secondary-color-light) !important; } .border-secondary { border-color: var(--secondary-color) !important; } .border-dark-secondary { border-color: var(--secondary-color-dark) !important; } .border-darker-secondary { border-color: var(--secondary-color-darker) !important; } /* Border tertiary */ .border-top-tertiary { border-top-color: var(--tertiary-color) !important; } .border-right-tertiary { border-right-color: var(--tertiary-color) !important; } .border-bottom-tertiary { border-bottom-color: var(--tertiary-color) !important; } .border-left-tertiary { border-left-color: var(--tertiary-color) !important; } /**/ .border-lighter-tertiary { border-color: var(--tertiary-color-lighter) !important; } .border-light-tertiary { border-color: var(--tertiary-color-light) !important; } .border-tertiary { border-color: var(--tertiary-color) !important; } .border-dark-tertiary { border-color: var(--tertiary-color-dark) !important; } .border-darker-tertiary { border-color: var(--tertiary-color-darker) !important; } .object_type_1123 #modeler, .object_type_1258 #modeler { width: 100% !important; height: 870px !important; } .object_type_1123 #canvas, .object_type_1258 #canvas { width: 100% !important; height: 870px !important; } .object_type_1130 #canvas { width: 100% !important; height: 600px !important; float: left; } .object_type_1123 tr td:last-child .mdi-check-circle, .object_type_1123 tr td:last-child .mdi-close-circle, .object_type_1258 tr td:last-child .mdi-close-circle, .object_type_1258 tr td:last-child .mdi-close-circle { cursor: pointer; } .object_type_1123 .bpmZoomPosition, .object_type_1130 .bpmZoomPosition, .object_type_1258 .bpmZoomPosition { position: absolute; top: 20px; right: 25px; background: #FAFAFA; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); padding: 2px 8px; border: solid 1px #CCC; } .object_type_1123 .bpmZoomPosition .mdi, .object_type_1130 .bpmZoomPosition .mdi, .object_type_1258 .bpmZoomPosition .mdi, .object_type_1123 .bpmZoomPosition .iconify--mdi, .object_type_1130 .bpmZoomPosition .iconify--mdi, .object_type_1258 .bpmZoomPosition .iconify--mdi { font-size: 25px; margin-right: 10px; } /* Variables */ .btn { --bs-btn-disabled-opacity: 0.3; --bs-btn-padding-x: 1rem; --bs-btn-font-family: var(--font-general); } /* BUTTON LINK */ .btn-link { --bs-btn-font-weight: 400; --bs-btn-color: var(--general-link-color); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--primary-color-hover); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--primary-color-hover); --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: #6c757d; --bs-btn-disabled-border-color: transparent; --bs-btn-box-shadow: 0 0 0 #000; --bs-btn-focus-shadow-rgb: 49,132,253; text-decoration: underline; } .btn-link.text-decoration-underline-hover { text-decoration: none !important; } .btn-link.text-decoration-underline-hover:hover { text-decoration: underline !important; } /* BUTTON DEFAULT */ .btn-outline-default { --bs-btn-color: #686c71; --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: #fafcff; --bs-btn-hover-border-color: var(--bs-btn-color); --bs-btn-focus-shadow-rgb: var(--default-color-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-btn-color); --bs-btn-active-border-color: #ececec; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #ccc; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-btn-disabled-color); --bs-gradient: none; } .btn-outline-default-primary { --bs-btn-color: #686c71; --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: #fafcff; --bs-btn-hover-border-color: var(--bs-btn-color); --bs-btn-focus-shadow-rgb: var(--default-color-rgb); --bs-btn-active-color: var(--primary-color-contrast-text); --bs-btn-active-bg: var(--primary-color); --bs-btn-active-border-color: var(--primary-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #ccc; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-btn-disabled-color); --bs-gradient: none; } .btn-outline-default-secondary { --bs-btn-color: #686c71; --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: #fafcff; --bs-btn-hover-border-color: var(--bs-btn-color); --bs-btn-focus-shadow-rgb: var(--default-color-rgb); --bs-btn-active-color: var(--secondary-color-contrast-text); --bs-btn-active-bg: var(--secondary-color); --bs-btn-active-border-color: var(--secondary-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #ccc; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-btn-disabled-color); --bs-gradient: none; } .btn-outline-default-tertiary { --bs-btn-color: #686c71; --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: #fafcff; --bs-btn-hover-border-color: var(--bs-btn-color); --bs-btn-focus-shadow-rgb: var(--default-color-rgb); --bs-btn-active-color: var(--tertiary-color-contrast-text); --bs-btn-active-bg: var(--tertiary-color); --bs-btn-active-border-color: var(--tertiary-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #ccc; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-btn-disabled-color); --bs-gradient: none; } /* BUTTON BRAND */ .btn-brand { --bs-btn-color: var(--brand-color-contrast-text); --bs-btn-bg: var(--brand-color); --bs-btn-border-color: var(--brand-color); --bs-btn-hover-color: var(--brand-color-contrast-text); --bs-btn-hover-bg: var(--brand-color-hover); --bs-btn-hover-border-color: var(--brand-color-hover); --bs-btn-focus-shadow-rgb: var(--brand-color-focus-shadow-rgb); --bs-btn-active-color: var(--brand-color-contrast-text); --bs-btn-active-bg: var(--brand-color); --bs-btn-active-border-color: var(--brand-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--brand-color-disabled); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-btn-disabled-color); } /* BUTTON PRIMARY */ /* btn-lighter-primary -- btn-lighter-outline-primary */ .btn-lighter-primary { --bs-btn-color: var(--primary-color-lighter-contrast-text); --bs-btn-bg: var(--primary-color-lighter); --bs-btn-border-color: var(--primary-color-lighter); --bs-btn-hover-color: var(--primary-color-lighter-contrast-text); --bs-btn-hover-bg: var(--primary-color-lighter-hover); --bs-btn-hover-border-color: var(--primary-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--primary-color-lighter-rgb); --bs-btn-active-color: var(--primary-color-lighter-contrast-text); --bs-btn-active-bg: var(--primary-color-lighter-hover); --bs-btn-active-border-color: var(--primary-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--primary-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--primary-color-lighter); --bs-btn-disabled-border-color: var(--primary-color-lighter); } .btn-outline-lighter-primary { --bs-btn-color: var(--primary-color-lighter-contrast-text); --bs-btn-border-color: var(--primary-color-lighter); --bs-btn-hover-color: var(--primary-color-lighter-contrast-text); --bs-btn-hover-bg: var(--primary-color-lighter); --bs-btn-hover-border-color: var(--primary-color-lighter); --bs-btn-focus-shadow-rgb: var(--primary-color-rgb); --bs-btn-active-color: var(--primary-color-lighter-contrast-text); --bs-btn-active-bg: var(--primary-color-lighter); --bs-btn-active-border-color: var(--primary-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--primary-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--primary-color-lighter); --bs-gradient: none; } /* btn-light-primary -- btn-light-outline-primary */ .btn-light-primary { --bs-btn-color: var(--primary-color-light-contrast-text); --bs-btn-bg: var(--primary-color-light); --bs-btn-border-color: var(--primary-color-light); --bs-btn-hover-color: var(--primary-color-light-contrast-text); --bs-btn-hover-bg: var(--primary-color-light-hover); --bs-btn-hover-border-color: var(--primary-color-light-hover); --bs-btn-focus-shadow-rgb: var(--primary-color-rgb); --bs-btn-active-color: var(--primary-color-light-contrast-text); --bs-btn-active-bg: var(--primary-color-light-hover); --bs-btn-active-border-color: var(--primary-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--primary-color-light-contrast-text); --bs-btn-disabled-bg: var(--primary-color-light); --bs-btn-disabled-border-color: var(--primary-color-light); } .btn-outline-light-primary { --bs-btn-color: var(--primary-color-light-contrast-text); --bs-btn-border-color: var(--primary-color-light); --bs-btn-hover-color: var(--primary-color-light-contrast-text); --bs-btn-hover-bg: var(--primary-color-light); --bs-btn-hover-border-color: var(--primary-color-light); --bs-btn-focus-shadow-rgb: var(--primary-color-rgb); --bs-btn-active-color: var(--primary-color-light-contrast-text); --bs-btn-active-bg: var(--primary-color-light); --bs-btn-active-border-color: var(--primary-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--primary-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--primary-color-light); --bs-gradient: none; } /* btn-primary -- btn-outline-primary */ .btn-primary { --bs-btn-color: var(--primary-color-contrast-text); --bs-btn-bg: var(--primary-color); --bs-btn-border-color: var(--primary-color); --bs-btn-hover-color: var(--primary-color-contrast-text); --bs-btn-hover-bg: var(--primary-color-hover); --bs-btn-hover-border-color: var(--primary-color-hover); --bs-btn-focus-shadow-rgb: var(--primary-color-rgb); --bs-btn-active-color: var(--primary-color-contrast-text); --bs-btn-active-bg: var(--primary-color-hover); --bs-btn-active-border-color: var(--primary-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--primary-color-contrast-text); --bs-btn-disabled-bg: var(--primary-color); --bs-btn-disabled-border-color: var(--primary-color); } .btn-outline-primary { --bs-btn-color: var(--primary-color); --bs-btn-border-color: var(--primary-color); --bs-btn-hover-color: var(--primary-color-contrast-text); --bs-btn-hover-bg: var(--primary-color); --bs-btn-hover-border-color: var(--primary-color); --bs-btn-focus-shadow-rgb: var(--primary-color-rgb); --bs-btn-active-color: var(--primary-color-contrast-text); --bs-btn-active-bg: var(--primary-color); --bs-btn-active-border-color: var(--primary-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--primary-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--primary-color); --bs-gradient: none; } /* btn-dark-primary -- btn-dark-outline-primary */ .btn-dark-primary { --bs-btn-color: var(--primary-color-dark-contrast-text); --bs-btn-bg: var(--primary-color-dark); --bs-btn-border-color: var(--primary-color-dark); --bs-btn-hover-color: var(--primary-color-dark-contrast-text); --bs-btn-hover-bg: var(--primary-color-dark-hover); --bs-btn-hover-border-color: var(--primary-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--primary-color-rgb); --bs-btn-active-color: var(--primary-color-dark-contrast-text); --bs-btn-active-bg: var(--primary-color-dark-hover); --bs-btn-active-border-color: var(--primary-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--primary-color-dark-contrast-text); --bs-btn-disabled-bg: var(--primary-color-dark); --bs-btn-disabled-border-color: var(--primary-color-dark); } .btn-outline-dark-primary { --bs-btn-color: var(--primary-color-dark); --bs-btn-border-color: var(--primary-color-dark); --bs-btn-hover-color: var(--primary-color-dark-contrast-text); --bs-btn-hover-bg: var(--primary-color-dark); --bs-btn-hover-border-color: var(--primary-color-dark); --bs-btn-focus-shadow-rgb: var(--primary-color-rgb); --bs-btn-active-color: var(--primary-color-dark-contrast-text); --bs-btn-active-bg: var(--primary-color-dark); --bs-btn-active-border-color: var(--primary-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--primary-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--primary-color-dark); --bs-gradient: none; } /* btn-darker-primary -- btn-darker-outline-primary */ .btn-darker-primary { --bs-btn-color: var(--primary-color-darker-contrast-text); --bs-btn-bg: var(--primary-color-darker); --bs-btn-border-color: var(--primary-color-darker); --bs-btn-hover-color: var(--primary-color-darker-contrast-text); --bs-btn-hover-bg: var(--primary-color-darker-hover); --bs-btn-hover-border-color: var(--primary-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--primary-color-rgb); --bs-btn-active-color: var(--primary-color-darker-contrast-text); --bs-btn-active-bg: var(--primary-color-darker-hover); --bs-btn-active-border-color: var(--primary-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--primary-color-darker-contrast-text); --bs-btn-disabled-bg: var(--primary-color-darker); --bs-btn-disabled-border-color: var(--primary-color-darker); } .btn-outline-darker-primary { --bs-btn-color: var(--primary-color-darker); --bs-btn-border-color: var(--primary-color-darker); --bs-btn-hover-color: var(--primary-color-darker-contrast-text); --bs-btn-hover-bg: var(--primary-color-darker); --bs-btn-hover-border-color: var(--primary-color-darker); --bs-btn-focus-shadow-rgb: var(--primary-color-rgb); --bs-btn-active-color: var(--primary-color-darker-contrast-text); --bs-btn-active-bg: var(--primary-color-darker); --bs-btn-active-border-color: var(--primary-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--primary-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--primary-color-darker); --bs-gradient: none; } /* BUTTON SECONDARY */ /* btn-lighter-secondary -- btn-lighter-outline-secondary */ .btn-lighter-secondary { --bs-btn-color: var(--secondary-color-lighter-contrast-text); --bs-btn-bg: var(--secondary-color-lighter); --bs-btn-border-color: var(--secondary-color-lighter); --bs-btn-hover-color: var(--secondary-color-lighter-contrast-text); --bs-btn-hover-bg: var(--secondary-color-lighter-hover); --bs-btn-hover-border-color: var(--secondary-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb); --bs-btn-active-color: var(--secondary-color-lighter-contrast-text); --bs-btn-active-bg: var(--secondary-color-lighter-hover); --bs-btn-active-border-color: var(--secondary-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--secondary-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--secondary-color-lighter); --bs-btn-disabled-border-color: var(--secondary-color-lighter); } .btn-outline-lighter-secondary { --bs-btn-color: var(--secondary-color-lighter-contrast-text); --bs-btn-border-color: var(--secondary-color-lighter); --bs-btn-hover-color: var(--secondary-color-lighter-contrast-text); --bs-btn-hover-bg: var(--secondary-color-lighter); --bs-btn-hover-border-color: var(--secondary-color-lighter); --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb); --bs-btn-active-color: var(--secondary-color-lighter-contrast-text); --bs-btn-active-bg: var(--secondary-color-lighter); --bs-btn-active-border-color: var(--secondary-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--secondary-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--secondary-color-lighter); --bs-gradient: none; } /* btn-light-secondary -- btn-light-outline-secondary */ .btn-light-secondary { --bs-btn-color: var(--secondary-color-light-contrast-text); --bs-btn-bg: var(--secondary-color-light); --bs-btn-border-color: var(--secondary-color-light); --bs-btn-hover-color: var(--secondary-color-light-contrast-text); --bs-btn-hover-bg: var(--secondary-color-light-hover); --bs-btn-hover-border-color: var(--secondary-color-light-hover); --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb); --bs-btn-active-color: var(--secondary-color-light-contrast-text); --bs-btn-active-bg: var(--secondary-color-light-hover); --bs-btn-active-border-color: var(--secondary-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--secondary-color-light-contrast-text); --bs-btn-disabled-bg: var(--secondary-color-light); --bs-btn-disabled-border-color: var(--secondary-color-light); } .btn-outline-light-secondary { --bs-btn-color: var(--secondary-color-light-contrast-text); --bs-btn-border-color: var(--secondary-color-light); --bs-btn-hover-color: var(--secondary-color-light-contrast-text); --bs-btn-hover-bg: var(--secondary-color-light); --bs-btn-hover-border-color: var(--secondary-color-light); --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb); --bs-btn-active-color: var(--secondary-color-light-contrast-text); --bs-btn-active-bg: var(--secondary-color-light); --bs-btn-active-border-color: var(--secondary-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--secondary-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--secondary-color-light); --bs-gradient: none; } /* btn-primary -- btn-outline-primary */ .btn-secondary { --bs-btn-color: var(--secondary-color-contrast-text); --bs-btn-bg: var(--secondary-color); --bs-btn-border-color: var(--secondary-color); --bs-btn-hover-color: var(--secondary-color-contrast-text); --bs-btn-hover-bg: var(--secondary-color-hover); --bs-btn-hover-border-color: var(--secondary-color-hover); --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb); --bs-btn-active-color: var(--secondary-color-contrast-text); --bs-btn-active-bg: var(--secondary-color-hover); --bs-btn-active-border-color: var(--secondary-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--secondary-color-contrast-text); --bs-btn-disabled-bg: var(--secondary-color); --bs-btn-disabled-border-color: var(--secondary-color); } .btn-outline-secondary { --bs-btn-color: var(--secondary-color); --bs-btn-border-color: var(--secondary-color); --bs-btn-hover-color: var(--secondary-color-contrast-text); --bs-btn-hover-bg: var(--secondary-color); --bs-btn-hover-border-color: var(--secondary-color); --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb); --bs-btn-active-color: var(--secondary-color-contrast-text); --bs-btn-active-bg: var(--secondary-color); --bs-btn-active-border-color: var(--secondary-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--secondary-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--secondary-color); --bs-gradient: none; } /* btn-dark-secondary -- btn-dark-outline-secondary */ .btn-dark-secondary { --bs-btn-color: var(--secondary-color-dark-contrast-text); --bs-btn-bg: var(--secondary-color-dark); --bs-btn-border-color: var(--secondary-color-dark); --bs-btn-hover-color: var(--secondary-color-dark-contrast-text); --bs-btn-hover-bg: var(--secondary-color-dark-hover); --bs-btn-hover-border-color: var(--secondary-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb); --bs-btn-active-color: var(--secondary-color-dark-contrast-text); --bs-btn-active-bg: var(--secondary-color-dark-hover); --bs-btn-active-border-color: var(--secondary-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--secondary-color-dark-contrast-text); --bs-btn-disabled-bg: var(--secondary-color-dark); --bs-btn-disabled-border-color: var(--secondary-color-dark); } .btn-outline-dark-secondary { --bs-btn-color: var(--secondary-color-dark); --bs-btn-border-color: var(--secondary-color-dark); --bs-btn-hover-color: var(--secondary-color-dark-contrast-text); --bs-btn-hover-bg: var(--secondary-color-dark); --bs-btn-hover-border-color: var(--secondary-color-dark); --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb); --bs-btn-active-color: var(--secondary-color-dark-contrast-text); --bs-btn-active-bg: var(--secondary-color-dark); --bs-btn-active-border-color: var(--secondary-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--secondary-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--secondary-color-dark); --bs-gradient: none; } /* btn-darker-secondary -- btn-darker-outline-secondary */ .btn-darker-secondary { --bs-btn-color: var(--secondary-color-darker-contrast-text); --bs-btn-bg: var(--secondary-color-darker); --bs-btn-border-color: var(--secondary-color-darker); --bs-btn-hover-color: var(--secondary-color-darker-contrast-text); --bs-btn-hover-bg: var(--secondary-color-darker-hover); --bs-btn-hover-border-color: var(--secondary-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb); --bs-btn-active-color: var(--secondary-color-darker-contrast-text); --bs-btn-active-bg: var(--secondary-color-darker-hover); --bs-btn-active-border-color: var(--secondary-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--secondary-color-darker-contrast-text); --bs-btn-disabled-bg: var(--secondary-color-darker); --bs-btn-disabled-border-color: var(--secondary-color-darker); } .btn-outline-darker-secondary { --bs-btn-color: var(--secondary-color-darker); --bs-btn-border-color: var(--secondary-color-darker); --bs-btn-hover-color: var(--secondary-color-darker-contrast-text); --bs-btn-hover-bg: var(--secondary-color-darker); --bs-btn-hover-border-color: var(--secondary-color-darker); --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb); --bs-btn-active-color: var(--secondary-color-darker-contrast-text); --bs-btn-active-bg: var(--secondary-color-darker); --bs-btn-active-border-color: var(--secondary-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--secondary-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--secondary-color-darker); --bs-gradient: none; } /* BUTTON TERTIARY */ /* btn-lighter-tertiary -- btn-lighter-outline-tertiary */ .btn-lighter-tertiary { --bs-btn-color: var(--tertiary-color-lighter-contrast-text); --bs-btn-bg: var(--tertiary-color-lighter); --bs-btn-border-color: var(--tertiary-color-lighter); --bs-btn-hover-color: var(--tertiary-color-lighter-contrast-text); --bs-btn-hover-bg: var(--tertiary-color-lighter-hover); --bs-btn-hover-border-color: var(--tertiary-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--tertiary-color-rgb); --bs-btn-active-color: var(--tertiary-color-lighter-contrast-text); --bs-btn-active-bg: var(--tertiary-color-lighter-hover); --bs-btn-active-border-color: var(--tertiary-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--tertiary-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--tertiary-color-lighter); --bs-btn-disabled-border-color: var(--tertiary-color-lighter); } .btn-outline-lighter-tertiary { --bs-btn-color: var(--tertiary-color-lighter-contrast-text); --bs-btn-border-color: var(--tertiary-color-lighter); --bs-btn-hover-color: var(--tertiary-color-lighter-contrast-text); --bs-btn-hover-bg: var(--tertiary-color-lighter); --bs-btn-hover-border-color: var(--tertiary-color-lighter); --bs-btn-focus-shadow-rgb: var(--tertiary-color-rgb); --bs-btn-active-color: var(--tertiary-color-lighter-contrast-text); --bs-btn-active-bg: var(--tertiary-color-lighter); --bs-btn-active-border-color: var(--tertiary-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--tertiary-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tertiary-color-lighter); --bs-gradient: none; } /* btn-light-tertiary -- btn-light-outline-tertiary */ .btn-light-tertiary { --bs-btn-color: var(--tertiary-color-light-contrast-text); --bs-btn-bg: var(--tertiary-color-light); --bs-btn-border-color: var(--tertiary-color-light); --bs-btn-hover-color: var(--tertiary-color-light-contrast-text); --bs-btn-hover-bg: var(--tertiary-color-light-hover); --bs-btn-hover-border-color: var(--tertiary-color-light-hover); --bs-btn-focus-shadow-rgb: var(--tertiary-color-rgb); --bs-btn-active-color: var(--tertiary-color-light-contrast-text); --bs-btn-active-bg: var(--tertiary-color-light-hover); --bs-btn-active-border-color: var(--tertiary-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--tertiary-color-light-contrast-text); --bs-btn-disabled-bg: var(--tertiary-color-light); --bs-btn-disabled-border-color: var(--tertiary-color-light); } .btn-outline-light-tertiary { --bs-btn-color: var(--tertiary-color-light-contrast-text); --bs-btn-border-color: var(--tertiary-color-light); --bs-btn-hover-color: var(--tertiary-color-light-contrast-text); --bs-btn-hover-bg: var(--tertiary-color-light); --bs-btn-hover-border-color: var(--tertiary-color-light); --bs-btn-focus-shadow-rgb: var(--tertiary-color-rgb); --bs-btn-active-color: var(--tertiary-color-light-contrast-text); --bs-btn-active-bg: var(--tertiary-color-light); --bs-btn-active-border-color: var(--tertiary-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--tertiary-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tertiary-color-light); --bs-gradient: none; } /* btn-tertiary -- btn-outline-tertiary */ .btn-tertiary { --bs-btn-color: var(--tertiary-color-contrast-text); --bs-btn-bg: var(--tertiary-color); --bs-btn-border-color: var(--tertiary-color); --bs-btn-hover-color: var(--tertiary-color-contrast-text); --bs-btn-hover-bg: var(--tertiary-color-hover); --bs-btn-hover-border-color: var(--tertiary-color-hover); --bs-btn-focus-shadow-rgb: var(--tertiary-color-rgb); --bs-btn-active-color: var(--tertiary-color-contrast-text); --bs-btn-active-bg: var(--tertiary-color-hover); --bs-btn-active-border-color: var(--tertiary-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--tertiary-color-contrast-text); --bs-btn-disabled-bg: var(--tertiary-color); --bs-btn-disabled-border-color: var(--tertiary-color); } .btn-outline-tertiary { --bs-btn-color: var(--tertiary-color); --bs-btn-border-color: var(--tertiary-color); --bs-btn-hover-color: var(--tertiary-color-contrast-text); --bs-btn-hover-bg: var(--tertiary-color); --bs-btn-hover-border-color: var(--tertiary-color); --bs-btn-focus-shadow-rgb: var(--tertiary-color-rgb); --bs-btn-active-color: var(--tertiary-color-contrast-text); --bs-btn-active-bg: var(--tertiary-color); --bs-btn-active-border-color: var(--tertiary-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--tertiary-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tertiary-color); --bs-gradient: none; } /* btn-dark-tertiary -- btn-dark-outline-tertiary */ .btn-dark-tertiary { --bs-btn-color: var(--tertiary-color-dark-contrast-text); --bs-btn-bg: var(--tertiary-color-dark); --bs-btn-border-color: var(--tertiary-color-dark); --bs-btn-hover-color: var(--tertiary-color-dark-contrast-text); --bs-btn-hover-bg: var(--tertiary-color-dark-hover); --bs-btn-hover-border-color: var(--tertiary-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--tertiary-color-rgb); --bs-btn-active-color: var(--tertiary-color-dark-contrast-text); --bs-btn-active-bg: var(--tertiary-color-dark-hover); --bs-btn-active-border-color: var(--tertiary-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--tertiary-color-dark-contrast-text); --bs-btn-disabled-bg: var(--tertiary-color-dark); --bs-btn-disabled-border-color: var(--tertiary-color-dark); } .btn-outline-dark-tertiary { --bs-btn-color: var(--tertiary-color-dark); --bs-btn-border-color: var(--tertiary-color-dark); --bs-btn-hover-color: var(--tertiary-color-dark-contrast-text); --bs-btn-hover-bg: var(--tertiary-color-dark); --bs-btn-hover-border-color: var(--tertiary-color-dark); --bs-btn-focus-shadow-rgb: var(--tertiary-color-rgb); --bs-btn-active-color: var(--tertiary-color-dark-contrast-text); --bs-btn-active-bg: var(--tertiary-color-dark); --bs-btn-active-border-color: var(--tertiary-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--tertiary-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tertiary-color-dark); --bs-gradient: none; } /* btn-darker-tertiary -- btn-darker-outline-tertiary */ .btn-darker-tertiary { --bs-btn-color: var(--tertiary-color-darker-contrast-text); --bs-btn-bg: var(--tertiary-color-darker); --bs-btn-border-color: var(--tertiary-color-darker); --bs-btn-hover-color: var(--tertiary-color-darker-contrast-text); --bs-btn-hover-bg: var(--tertiary-color-darker-hover); --bs-btn-hover-border-color: var(--tertiary-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--tertiary-color-rgb); --bs-btn-active-color: var(--tertiary-color-darker-contrast-text); --bs-btn-active-bg: var(--tertiary-color-darker-hover); --bs-btn-active-border-color: var(--tertiary-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--tertiary-color-darker-contrast-text); --bs-btn-disabled-bg: var(--tertiary-color-darker); --bs-btn-disabled-border-color: var(--tertiary-color-darker); } .btn-outline-darker-tertiary { --bs-btn-color: var(--tertiary-color-darker); --bs-btn-border-color: var(--tertiary-color-darker); --bs-btn-hover-color: var(--tertiary-color-darker-contrast-text); --bs-btn-hover-bg: var(--tertiary-color-darker); --bs-btn-hover-border-color: var(--tertiary-color-darker); --bs-btn-focus-shadow-rgb: var(--tertiary-color-rgb); --bs-btn-active-color: var(--tertiary-color-darker-contrast-text); --bs-btn-active-bg: var(--tertiary-color-darker); --bs-btn-active-border-color: var(--tertiary-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--tertiary-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tertiary-color-darker); --bs-gradient: none; } /* based: https://bulma.io/documentation/elements/button/ */ /* BUTTON SUCCESS */ .btn-success, .btn-validate { --bs-btn-color: #fff; --bs-btn-bg: #05816e; --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: hsl(from var(--bs-btn-bg) h s 20%); --bs-btn-hover-border-color: hsl(from var(--bs-btn-bg) h s 20%); --bs-btn-focus-shadow-rgb: 0,209,178; --bs-btn-active-color: var(--bs-btn-color); --bs-btn-active-bg: hsl(from var(--bs-btn-bg) h s 20%); --bs-btn-active-border-color: hsl(from var(--bs-btn-bg) h s 20%); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: hsl(from var(--bs-btn-bg) h s 20%); --bs-btn-disabled-border-color: hsl(from var(--bs-btn-bg) h s 20%); } .btn-outline-success, .btn-outline-validate { --bs-btn-color: #05816e; --bs-btn-border-color: var(--bs-btn-color); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-btn-border-color); --bs-btn-hover-border-color: var(--bs-btn-border-color); --bs-btn-focus-shadow-rgb: 0,196,167; --bs-btn-active-color: var(--bs-btn-hover-color); --bs-btn-active-bg: var(--bs-btn-hover-color); --bs-btn-active-border-color: var(--bs-btn-border-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-btn-border-color); --bs-gradient: none ; } /* BUTTON DANGER */ .btn-danger, .btn-invalidate { --bs-btn-color: #fff; --bs-btn-bg: #d72f51; --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: hsl(from var(--bs-btn-bg) h s 40%); --bs-btn-hover-border-color: hsl(from var(--bs-btn-bg) h s 40%); --bs-btn-focus-shadow-rgb: 241,70,104; --bs-btn-active-color: var(--bs-btn-color); --bs-btn-active-bg: hsl(from var(--bs-btn-bg) h s 40%); --bs-btn-active-border-color: hsl(from var(--bs-btn-bg) h s 40%); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: hsl(from var(--bs-btn-bg) h s 40%); --bs-btn-disabled-border-color: hsl(from var(--bs-btn-bg) h s 40%); } .btn-outline-danger, .btn-outline-invalidate { --bs-btn-color: #d72f51; --bs-btn-border-color: var(--bs-btn-color); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-btn-border-color); --bs-btn-hover-border-color: var(--bs-btn-border-color); --bs-btn-focus-shadow-rgb: 237,51,88; --bs-btn-active-color: var(--bs-btn-hover-color); --bs-btn-active-bg: var(--bs-btn-border-color); --bs-btn-active-border-color: var(--bs-btn-border-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-btn-border-color); --bs-gradient: none ; } /* BUTTON WARNING */ .btn-warning { --bs-btn-color: #4c4329; --bs-btn-bg: #ffe08a; --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: hsl(from var(--bs-btn-bg) h s 50%); --bs-btn-hover-border-color: hsl(from var(--bs-btn-bg) h s 50%); --bs-btn-focus-shadow-rgb: 76,67,41; --bs-btn-active-color: var(--bs-btn-color); --bs-btn-active-bg: hsl(from var(--bs-btn-bg) h s 50%); --bs-btn-active-border-color: hsl(from var(--bs-btn-bg) h s 50%); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: hsl(from var(--bs-btn-bg) h s 50%); --bs-btn-disabled-border-color: hsl(from var(--bs-btn-bg) h s 50%); } .btn-outline-warning { --bs-btn-color: #4c4329; --bs-btn-border-color: #ffe08a; --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: var(--bs-btn-border-color); --bs-btn-hover-border-color: var(--bs-btn-border-color); --bs-btn-focus-shadow-rgb: 207,172,78; --bs-btn-active-color: var(--bs-btn-color); --bs-btn-active-bg: var(--bs-btn-border-color); --bs-btn-active-border-color: var(--bs-btn-border-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-btn-border-color); --bs-gradient: none ; } /* BUTTON INFO */ .btn-info { --bs-btn-color: #fff; --bs-btn-bg: #1f7ac5; --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: hsl(from var(--bs-btn-bg) h s 40%); --bs-btn-hover-border-color: hsl(from var(--bs-btn-bg) h s 40%); --bs-btn-focus-shadow-rgb: 62,142,208; --bs-btn-active-color: var(--bs-btn-color); --bs-btn-active-bg: hsl(from var(--bs-btn-bg) h s 40%); --bs-btn-active-border-color: hsl(from var(--bs-btn-bg) h s 40%); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: hsl(from var(--bs-btn-bg) h s 40%); --bs-btn-disabled-border-color: hsl(from var(--bs-btn-bg) h s 40%); } .btn-outline-info { --bs-btn-color: #1f7ac5; --bs-btn-border-color: var(--bs-btn-color); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-btn-color); --bs-btn-hover-border-color: var(--bs-btn-color); --bs-btn-focus-shadow-rgb: 47,132,202; --bs-btn-active-color: var(--bs-btn-hover-color); --bs-btn-active-bg: var(--bs-btn-color); --bs-btn-active-border-color: var(--bs-btn-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-btn-color); --bs-gradient: none ; } /* BUTTON LIGHT */ .btn-light { --bs-btn-color: #494949; --bs-btn-bg: #f5f5f5; --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: hsl(from var(--bs-btn-bg) h s 90%); --bs-btn-hover-border-color: hsl(from var(--bs-btn-bg) h s 90%); --bs-btn-focus-shadow-rgb: 73,73,73; --bs-btn-active-color: var(--bs-btn-color); --bs-btn-active-bg: hsl(from var(--bs-btn-bg) h s 90%); --bs-btn-active-border-color: hsl(from var(--bs-btn-bg) h s 90%); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: hsl(from var(--bs-btn-bg) h s 90%); --bs-btn-disabled-border-color: hsl(from var(--bs-btn-bg) h s 90%); } .btn-outline-light { --bs-btn-color: #494949; --bs-btn-border-color: #f5f5f5; --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: var(--bs-btn-border-color); --bs-btn-hover-border-color: var(--bs-btn-border-color); --bs-btn-focus-shadow-rgb: 73,73,73; --bs-btn-active-color: var(--bs-btn-color); --bs-btn-active-bg: var(--bs-btn-border-color); --bs-btn-active-border-color: var(--bs-btn-border-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-btn-border-color); --bs-gradient: none; } /* BUTTON DARK */ .btn-dark { --bs-btn-color: #fff; --bs-btn-bg: #363636; --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: hsl(from var(--bs-btn-bg) h s 10%); --bs-btn-hover-border-color: hsl(from var(--bs-btn-bg) h s 10%); --bs-btn-focus-shadow-rgb: 255,255,255; --bs-btn-active-color: var(--bs-btn-color); --bs-btn-active-bg: hsl(from var(--bs-btn-bg) h s 10%); --bs-btn-active-border-color: hsl(from var(--bs-btn-bg) h s 10%); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: var(--bs-btn-bg); --bs-btn-disabled-border-color: var(--bs-btn-bg); } .btn-outline-dark { --bs-btn-color: #161515; --bs-btn-border-color: var(--bs-btn-color); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-btn-color); --bs-btn-hover-border-color: var(--bs-btn-color); --bs-btn-focus-shadow-rgb: 22,21,21; --bs-btn-active-color: var(--bs-btn-hover-color); --bs-btn-active-bg: var(--bs-btn-color); --bs-btn-active-border-color: var(--bs-btn-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: var(--bs-btn-hover-color); --bs-btn-disabled-border-color: var(--bs-btn-color); --bs-gradient: none ; } /* BUTTON BLUE */ /* btn-lighter-blue -- btn-lighter-outline-blue */ .btn-lighter-blue { --bs-btn-color: var(--blue-color-lighter-contrast-text); --bs-btn-bg: var(--blue-color-lighter); --bs-btn-border-color: var(--blue-color-lighter); --bs-btn-hover-color: var(--blue-color-lighter-contrast-text); --bs-btn-hover-bg: var(--blue-color-lighter-hover); --bs-btn-hover-border-color: var(--blue-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--blue-color-lighter-rgb); --bs-btn-active-color: var(--blue-color-lighter-contrast-text); --bs-btn-active-bg: var(--blue-color-lighter-hover); --bs-btn-active-border-color: var(--blue-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--blue-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--blue-color-lighter); --bs-btn-disabled-border-color: var(--blue-color-lighter); } .btn-outline-lighter-blue { --bs-btn-color: var(--blue-color-darker); --bs-btn-border-color: var(--blue-color-lighter); --bs-btn-hover-color: var(--blue-color-lighter-contrast-text); --bs-btn-hover-bg: var(--blue-color-lighter); --bs-btn-hover-border-color: var(--blue-color-lighter); --bs-btn-focus-shadow-rgb: var(--blue-color-lighter-rgb); --bs-btn-active-color: var(--blue-color-lighter-contrast-text); --bs-btn-active-bg: var(--blue-color-lighter); --bs-btn-active-border-color: var(--blue-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--blue-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--blue-color-lighter); --bs-gradient: none; } /* btn-light-blue -- btn-light-outline-blue */ .btn-light-blue { --bs-btn-color: var(--blue-color-light-contrast-text); --bs-btn-bg: var(--blue-color-light); --bs-btn-border-color: var(--blue-color-light); --bs-btn-hover-color: var(--blue-color-light-contrast-text); --bs-btn-hover-bg: var(--blue-color-light-hover); --bs-btn-hover-border-color: var(--blue-color-light-hover); --bs-btn-focus-shadow-rgb: var(--blue-color-light-rgb); --bs-btn-active-color: var(--blue-color-light-contrast-text); --bs-btn-active-bg: var(--blue-color-light-hover); --bs-btn-active-border-color: var(--blue-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--blue-color-light-contrast-text); --bs-btn-disabled-bg: var(--blue-color-light); --bs-btn-disabled-border-color: var(--blue-color-light); } .btn-outline-light-blue { --bs-btn-color: var(--blue-color-darker); --bs-btn-border-color: var(--blue-color-light); --bs-btn-hover-color: var(--blue-color-light-contrast-text); --bs-btn-hover-bg: var(--blue-color-light); --bs-btn-hover-border-color: var(--blue-color-light); --bs-btn-focus-shadow-rgb: var(--blue-color-light-rgb); --bs-btn-active-color: var(--blue-color-light-contrast-text); --bs-btn-active-bg: var(--blue-color-light); --bs-btn-active-border-color: var(--blue-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--blue-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--blue-color-light); --bs-gradient: none; } /* btn-blue -- btn-outline-blue */ .btn-blue { --bs-btn-color: var(--blue-color-contrast-text); --bs-btn-bg: var(--blue-color); --bs-btn-border-color: var(--blue-color); --bs-btn-hover-color: var(--blue-color-contrast-text); --bs-btn-hover-bg: var(--blue-color-hover); --bs-btn-hover-border-color: var(--blue-color-hover); --bs-btn-focus-shadow-rgb: var(--blue-color-rgb); --bs-btn-active-color: var(--blue-color-contrast-text); --bs-btn-active-bg: var(--blue-color-hover); --bs-btn-active-border-color: var(--blue-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--blue-color-contrast-text); --bs-btn-disabled-bg: var(--blue-color); --bs-btn-disabled-border-color: var(--blue-color); } .btn-outline-blue { --bs-btn-color: var(--blue-color-darker); --bs-btn-border-color: var(--blue-color); --bs-btn-hover-color: var(--blue-color-contrast-text); --bs-btn-hover-bg: var(--blue-color); --bs-btn-hover-border-color: var(--blue-color); --bs-btn-focus-shadow-rgb: var(--blue-color-rgb); --bs-btn-active-color: var(--blue-color-contrast-text); --bs-btn-active-bg: var(--blue-color); --bs-btn-active-border-color: var(--blue-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--blue-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--blue-color); --bs-gradient: none; } /* btn-dark-blue -- btn-dark-outline-blue */ .btn-dark-blue { --bs-btn-color: var(--blue-color-dark-contrast-text); --bs-btn-bg: var(--blue-color-dark); --bs-btn-border-color: var(--blue-color-dark); --bs-btn-hover-color: var(--blue-color-dark-contrast-text); --bs-btn-hover-bg: var(--blue-color-dark-hover); --bs-btn-hover-border-color: var(--blue-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--blue-color-dark-rgb); --bs-btn-active-color: var(--blue-color-dark-contrast-text); --bs-btn-active-bg: var(--blue-color-dark-hover); --bs-btn-active-border-color: var(--blue-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--blue-color-dark-contrast-text); --bs-btn-disabled-bg: var(--blue-color-dark); --bs-btn-disabled-border-color: var(--blue-color-dark); } .btn-outline-dark-blue { --bs-btn-color: var(--blue-color-darker); --bs-btn-border-color: var(--blue-color-dark); --bs-btn-hover-color: var(--blue-color-dark-contrast-text); --bs-btn-hover-bg: var(--blue-color-dark); --bs-btn-hover-border-color: var(--blue-color-dark); --bs-btn-focus-shadow-rgb: var(--blue-color-dark-rgb); --bs-btn-active-color: var(--blue-color-dark-contrast-text); --bs-btn-active-bg: var(--blue-color-dark); --bs-btn-active-border-color: var(--blue-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--blue-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--blue-color-dark); --bs-gradient: none; } /* btn-darker-blue -- btn-darker-outline-blue */ .btn-darker-blue { --bs-btn-color: var(--blue-color-darker-contrast-text); --bs-btn-bg: var(--blue-color-darker); --bs-btn-border-color: var(--blue-color-darker); --bs-btn-hover-color: var(--blue-color-darker-contrast-text); --bs-btn-hover-bg: var(--blue-color-darker-hover); --bs-btn-hover-border-color: var(--blue-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--blue-color-darker-rgb); --bs-btn-active-color: var(--blue-color-darker-contrast-text); --bs-btn-active-bg: var(--blue-color-darker-hover); --bs-btn-active-border-color: var(--blue-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--blue-color-darker-contrast-text); --bs-btn-disabled-bg: var(--blue-color-darker-blue); --bs-btn-disabled-border-color: var(--blue-color-darker); } .btn-outline-darker-blue { --bs-btn-color: var(--blue-color-darker); --bs-btn-border-color: var(--blue-color-darker); --bs-btn-hover-color: var(--blue-color-darker-contrast-text); --bs-btn-hover-bg: var(--blue-color-darker); --bs-btn-hover-border-color: var(--blue-color-darker); --bs-btn-focus-shadow-rgb: var(--blue-color-darker-rgb); --bs-btn-active-color: var(--blue-color-darker-contrast-text); --bs-btn-active-bg: var(--blue-color-darker); --bs-btn-active-border-color: var(--blue-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--blue-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--blue-color-darker); --bs-gradient: none; } /* BUTTON GREEN */ /* btn-lighter-green -- btn-lighter-outline-green */ .btn-lighter-green { --bs-btn-color: var(--green-color-lighter-contrast-text); --bs-btn-bg: var(--green-color-lighter); --bs-btn-border-color: var(--green-color-lighter); --bs-btn-hover-color: var(--green-color-lighter-contrast-text); --bs-btn-hover-bg: var(--green-color-lighter-hover); --bs-btn-hover-border-color: var(--green-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--green-color-lighter-rgb); --bs-btn-active-color: var(--green-color-lighter-contrast-text); --bs-btn-active-bg: var(--green-color-lighter-hover); --bs-btn-active-border-color: var(--green-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--green-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--green-color-lighter); --bs-btn-disabled-border-color: var(--green-color-lighter); } .btn-outline-lighter-green { --bs-btn-color: var(--green-color-darker); --bs-btn-border-color: var(--green-color-lighter); --bs-btn-hover-color: var(--green-color-lighter-contrast-text); --bs-btn-hover-bg: var(--green-color-lighter); --bs-btn-hover-border-color: var(--green-color-lighter); --bs-btn-focus-shadow-rgb: var(--green-color-lighter-rgb); --bs-btn-active-color: var(--green-color-lighter-contrast-text); --bs-btn-active-bg: var(--green-color-lighter); --bs-btn-active-border-color: var(--green-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--green-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--green-color-lighter); --bs-gradient: none; } /* btn-light-green -- btn-light-outline-green */ .btn-light-green { --bs-btn-color: var(--green-color-light-contrast-text); --bs-btn-bg: var(--green-color-light); --bs-btn-border-color: var(--green-color-light); --bs-btn-hover-color: var(--green-color-light-contrast-text); --bs-btn-hover-bg: var(--green-color-light-hover); --bs-btn-hover-border-color: var(--green-color-light-hover); --bs-btn-focus-shadow-rgb: var(--green-color-light-rgb); --bs-btn-active-color: var(--green-color-light-contrast-text); --bs-btn-active-bg: var(--green-color-light-hover); --bs-btn-active-border-color: var(--green-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--green-color-light-contrast-text); --bs-btn-disabled-bg: var(--green-color-light); --bs-btn-disabled-border-color: var(--green-color-light); } .btn-outline-light-green { --bs-btn-color: var(--green-color-darker); --bs-btn-border-color: var(--green-color-light); --bs-btn-hover-color: var(--green-color-light-contrast-text); --bs-btn-hover-bg: var(--green-color-light); --bs-btn-hover-border-color: var(--green-color-light); --bs-btn-focus-shadow-rgb: var(--green-color-light-rgb); --bs-btn-active-color: var(--green-color-light-contrast-text); --bs-btn-active-bg: var(--green-color-light); --bs-btn-active-border-color: var(--green-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--green-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--green-color-light); --bs-gradient: none; } /* btn-green -- btn-outline-green */ .btn-green { --bs-btn-color: var(--green-color-contrast-text); --bs-btn-bg: var(--green-color); --bs-btn-border-color: var(--green-color); --bs-btn-hover-color: var(--green-color-contrast-text); --bs-btn-hover-bg: var(--green-color-hover); --bs-btn-hover-border-color: var(--green-color-hover); --bs-btn-focus-shadow-rgb: var(--green-color-rgb); --bs-btn-active-color: var(--green-color-contrast-text); --bs-btn-active-bg: var(--green-color-hover); --bs-btn-active-border-color: var(--green-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--green-color-contrast-text); --bs-btn-disabled-bg: var(--green-color); --bs-btn-disabled-border-color: var(--green-color); } .btn-outline-green { --bs-btn-color: var(--green-color-darker); --bs-btn-border-color: var(--green-color); --bs-btn-hover-color: var(--green-color-contrast-text); --bs-btn-hover-bg: var(--green-color); --bs-btn-hover-border-color: var(--green-color); --bs-btn-focus-shadow-rgb: var(--green-color-rgb); --bs-btn-active-color: var(--green-color-contrast-text); --bs-btn-active-bg: var(--green-color); --bs-btn-active-border-color: var(--green-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--green-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--green-color); --bs-gradient: none; } /* btn-dark-green -- btn-dark-outline-green */ .btn-dark-green { --bs-btn-color: var(--green-color-dark-contrast-text); --bs-btn-bg: var(--green-color-dark); --bs-btn-border-color: var(--green-color-dark); --bs-btn-hover-color: var(--green-color-dark-contrast-text); --bs-btn-hover-bg: var(--green-color-dark-hover); --bs-btn-hover-border-color: var(--green-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--green-color-dark-rgb); --bs-btn-active-color: var(--green-color-dark-contrast-text); --bs-btn-active-bg: var(--green-color-dark-hover); --bs-btn-active-border-color: var(--green-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--green-color-dark-contrast-text); --bs-btn-disabled-bg: var(--green-color-dark); --bs-btn-disabled-border-color: var(--green-color-dark); } .btn-outline-dark-green { --bs-btn-color: var(--green-color-darker); --bs-btn-border-color: var(--green-color-dark); --bs-btn-hover-color: var(--green-color-dark-contrast-text); --bs-btn-hover-bg: var(--green-color-dark); --bs-btn-hover-border-color: var(--green-color-dark); --bs-btn-focus-shadow-rgb: var(--green-color-dark-rgb); --bs-btn-active-color: var(--green-color-dark-contrast-text); --bs-btn-active-bg: var(--green-color-dark); --bs-btn-active-border-color: var(--green-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--green-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--green-color-dark); --bs-gradient: none; } /* btn-darker-green -- btn-darker-outline-green */ .btn-darker-green { --bs-btn-color: var(--green-color-darker-contrast-text); --bs-btn-bg: var(--green-color-darker); --bs-btn-border-color: var(--green-color-darker); --bs-btn-hover-color: var(--green-color-darker-contrast-text); --bs-btn-hover-bg: var(--green-color-darker-hover); --bs-btn-hover-border-color: var(--green-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--green-color-darker-rgb); --bs-btn-active-color: var(--green-color-darker-contrast-text); --bs-btn-active-bg: var(--green-color-darker-hover); --bs-btn-active-border-color: var(--green-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--green-color-darker-contrast-text); --bs-btn-disabled-bg: var(--green-color-darker); --bs-btn-disabled-border-color: var(--green-color-darker); } .btn-outline-darker-green { --bs-btn-color: var(--green-color-darker); --bs-btn-border-color: var(--green-color-darker); --bs-btn-hover-color: var(--green-color-darker-contrast-text); --bs-btn-hover-bg: var(--green-color-darker); --bs-btn-hover-border-color: var(--green-color-darker); --bs-btn-focus-shadow-rgb: var(--green-color-darker-rgb); --bs-btn-active-color: var(--green-color-darker-contrast-text); --bs-btn-active-bg: var(--green-color-darker); --bs-btn-active-border-color: var(--green-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--green-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--green-color-darker); --bs-gradient: none; } /* BUTTON YELLOW */ /* btn-lighter-yellow -- btn-lighter-outline-yellow */ .btn-lighter-yellow { --bs-btn-color: var(--yellow-color-lighter-contrast-text); --bs-btn-bg: var(--yellow-color-lighter); --bs-btn-border-color: var(--yellow-color-lighter); --bs-btn-hover-color: var(--yellow-color-lighter-contrast-text); --bs-btn-hover-bg: var(--yellow-color-lighter-hover); --bs-btn-hover-border-color: var(--yellow-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--yellow-color-lighter-rgb); --bs-btn-active-color: var(--yellow-color-lighter-contrast-text); --bs-btn-active-bg: var(--yellow-color-lighter-hover); --bs-btn-active-border-color: var(--yellow-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--yellow-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--yellow-color-lighter); --bs-btn-disabled-border-color: var(--yellow-color-lighter); } .btn-outline-lighter-yellow { --bs-btn-color: var(--yellow-color-darker); --bs-btn-border-color: var(--yellow-color-lighter); --bs-btn-hover-color: var(--yellow-color-lighter-contrast-text); --bs-btn-hover-bg: var(--yellow-color-lighter); --bs-btn-hover-border-color: var(--yellow-color-lighter); --bs-btn-focus-shadow-rgb: var(--yellow-color-lighter-rgb); --bs-btn-active-color: var(--yellow-color-lighter-contrast-text); --bs-btn-active-bg: var(--yellow-color-lighter); --bs-btn-active-border-color: var(--yellow-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--yellow-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--yellow-color-lighter); --bs-gradient: none; } /* btn-light-yellow -- btn-light-outline-yellow */ .btn-light-yellow { --bs-btn-color: var(--yellow-color-light-contrast-text); --bs-btn-bg: var(--yellow-color-light); --bs-btn-border-color: var(--yellow-color-light); --bs-btn-hover-color: var(--yellow-color-light-contrast-text); --bs-btn-hover-bg: var(--yellow-color-light-hover); --bs-btn-hover-border-color: var(--yellow-color-light-hover); --bs-btn-focus-shadow-rgb: var(--yellow-color-light-rgb); --bs-btn-active-color: var(--yellow-color-light-contrast-text); --bs-btn-active-bg: var(--yellow-color-light-hover); --bs-btn-active-border-color: var(--yellow-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--yellow-color-light-contrast-text); --bs-btn-disabled-bg: var(--yellow-color-light); --bs-btn-disabled-border-color: var(--yellow-color-light); } .btn-outline-light-yellow { --bs-btn-color: var(--yellow-color-darker); --bs-btn-border-color: var(--yellow-color-light); --bs-btn-hover-color: var(--yellow-color-light-contrast-text); --bs-btn-hover-bg: var(--yellow-color-light); --bs-btn-hover-border-color: var(--yellow-color-light); --bs-btn-focus-shadow-rgb: var(--yellow-color-light-rgb); --bs-btn-active-color: var(--yellow-color-light-contrast-text); --bs-btn-active-bg: var(--yellow-color-light); --bs-btn-active-border-color: var(--yellow-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--yellow-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--yellow-color-light); --bs-gradient: none; } /* btn-yellow -- btn-outline-yellow */ .btn-yellow { --bs-btn-color: var(--yellow-color-contrast-text); --bs-btn-bg: var(--yellow-color); --bs-btn-border-color: var(--yellow-color); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--yellow-color-hover); --bs-btn-hover-border-color: var(--yellow-color-hover); --bs-btn-focus-shadow-rgb: var(--yellow-color-rgb); --bs-btn-active-color: var(--yellow-color-contrast-text); --bs-btn-active-bg: var(--yellow-color-hover); --bs-btn-active-border-color: var(--yellow-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--yellow-color-contrast-text); --bs-btn-disabled-bg: var(--yellow-color); --bs-btn-disabled-border-color: var(--yellow-color); } .btn-outline-yellow { --bs-btn-color: var(--yellow-color-darker); --bs-btn-border-color: var(--yellow-color); --bs-btn-hover-color: var(--yellow-color-contrast-text); --bs-btn-hover-bg: var(--yellow-color); --bs-btn-hover-border-color: var(--yellow-color); --bs-btn-focus-shadow-rgb: var(--yellow-color-rgb); --bs-btn-active-color: var(--yellow-color-contrast-text); --bs-btn-active-bg: var(--yellow-color); --bs-btn-active-border-color: var(--yellow-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--yellow-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--yellow-color); --bs-gradient: none; } /* btn-dark-yellow -- btn-dark-outline-yellow */ .btn-dark-yellow { --bs-btn-color: var(--yellow-color-dark-contrast-text); --bs-btn-bg: var(--yellow-color-dark); --bs-btn-border-color: var(--yellow-color-dark); --bs-btn-hover-color: var(--yellow-color-dark-contrast-text); --bs-btn-hover-bg: var(--yellow-color-dark-hover); --bs-btn-hover-border-color: var(--yellow-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--yellow-color-dark-rgb); --bs-btn-active-color: var(--yellow-color-dark-contrast-text); --bs-btn-active-bg: var(--yellow-color-dark-hover); --bs-btn-active-border-color: var(--yellow-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--yellow-color-dark-contrast-text); --bs-btn-disabled-bg: var(--yellow-color-dark); --bs-btn-disabled-border-color: var(--yellow-color-dark); } .btn-outline-dark-yellow { --bs-btn-color: var(--yellow-color-darker); --bs-btn-border-color: var(--yellow-color-dark); --bs-btn-hover-color: var(--yellow-color-dark-contrast-text); --bs-btn-hover-bg: var(--yellow-color-dark); --bs-btn-hover-border-color: var(--yellow-color-dark); --bs-btn-focus-shadow-rgb: var(--yellow-color-dark-rgb); --bs-btn-active-color: var(--yellow-color-dark-contrast-text); --bs-btn-active-bg: var(--yellow-color-dark); --bs-btn-active-border-color: var(--yellow-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--yellow-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--yellow-color-dark); --bs-gradient: none; } /* btn-darker-yellow -- btn-darker-outline-yellow */ .btn-darker-yellow { --bs-btn-color: var(--yellow-color-darker-contrast-text); --bs-btn-bg: var(--yellow-color-darker); --bs-btn-border-color: var(--yellow-color-darker); --bs-btn-hover-color: var(--yellow-color-darker-contrast-text); --bs-btn-hover-bg: var(--yellow-color-darker-hover); --bs-btn-hover-border-color: var(--yellow-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--yellow-color-darker-rgb); --bs-btn-active-color: var(--yellow-color-darker-contrast-text); --bs-btn-active-bg: var(--yellow-color-darker-hover); --bs-btn-active-border-color: var(--yellow-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--yellow-color-darker-contrast-text); --bs-btn-disabled-bg: var(--yellow-color-darker); --bs-btn-disabled-border-color: var(--yellow-color-darker); } .btn-outline-darker-yellow { --bs-btn-color: var(--yellow-color-darker); --bs-btn-border-color: var(--yellow-color-darker); --bs-btn-hover-color: var(--yellow-color-darker-contrast-text); --bs-btn-hover-bg: var(--yellow-color-darker); --bs-btn-hover-border-color: var(--yellow-color-darker); --bs-btn-focus-shadow-rgb: var(--yellow-color-darker-rgb); --bs-btn-active-color: var(--yellow-color-darker-contrast-text); --bs-btn-active-bg: var(--yellow-color-darker); --bs-btn-active-border-color: var(--yellow-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--yellow-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--yellow-color-darker); --bs-gradient: none; } /* BUTTON ORANGE */ /* btn-lighter-orange -- btn-lighter-outline-orange */ .btn-lighter-orange { --bs-btn-color: var(--orange-color-lighter-contrast-text); --bs-btn-bg: var(--orange-color-lighter); --bs-btn-border-color: var(--orange-color-lighter); --bs-btn-hover-color: var(--orange-color-lighter-contrast-text); --bs-btn-hover-bg: var(--orange-color-lighter-hover); --bs-btn-hover-border-color: var(--orange-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--orange-color-lighter-rgb); --bs-btn-active-color: var(--orange-color-lighter-contrast-text); --bs-btn-active-bg: var(--orange-color-lighter-hover); --bs-btn-active-border-color: var(--orange-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--orange-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--orange-color-lighter); --bs-btn-disabled-border-color: var(--orange-color-lighter); } .btn-outline-lighter-orange { --bs-btn-color: var(--orange-color-darker); --bs-btn-border-color: var(--orange-color-lighter); --bs-btn-hover-color: var(--orange-color-lighter-contrast-text); --bs-btn-hover-bg: var(--orange-color-lighter); --bs-btn-hover-border-color: var(--orange-color-lighter); --bs-btn-focus-shadow-rgb: var(--orange-color-lighter-rgb); --bs-btn-active-color: var(--orange-color-lighter-contrast-text); --bs-btn-active-bg: var(--orange-color-lighter); --bs-btn-active-border-color: var(--orange-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--orange-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--orange-color-lighter); --bs-gradient: none; } /* btn-light-orange -- btn-light-outline-orange */ .btn-light-orange { --bs-btn-color: var(--orange-color-light-contrast-text); --bs-btn-bg: var(--orange-color-light); --bs-btn-border-color: var(--orange-color-light); --bs-btn-hover-color: var(--orange-color-light-contrast-text); --bs-btn-hover-bg: var(--orange-color-light-hover); --bs-btn-hover-border-color: var(--orange-color-light-hover); --bs-btn-focus-shadow-rgb: var(--orange-color-light-rgb); --bs-btn-active-color: var(--orange-color-light-contrast-text); --bs-btn-active-bg: var(--orange-color-light-hover); --bs-btn-active-border-color: var(--orange-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--orange-color-light-contrast-text); --bs-btn-disabled-bg: var(--orange-color-light); --bs-btn-disabled-border-color: var(--orange-color-light); } .btn-outline-light-orange { --bs-btn-color: var(--orange-color-darker); --bs-btn-border-color: var(--orange-color-light); --bs-btn-hover-color: var(--orange-color-light-contrast-text); --bs-btn-hover-bg: var(--orange-color-light); --bs-btn-hover-border-color: var(--orange-color-light); --bs-btn-focus-shadow-rgb: var(--orange-color-light-rgb); --bs-btn-active-color: var(--orange-color-light-contrast-text); --bs-btn-active-bg: var(--orange-color-light); --bs-btn-active-border-color: var(--orange-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--orange-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--orange-color-light); --bs-gradient: none; } /* btn-orange -- btn-outline-orange */ .btn-orange { --bs-btn-color: var(--orange-color-contrast-text); --bs-btn-bg: var(--orange-color); --bs-btn-border-color: var(--orange-color); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--orange-color-hover); --bs-btn-hover-border-color: var(--orange-color-hover); --bs-btn-focus-shadow-rgb: var(--orange-color-rgb); --bs-btn-active-color: var(--orange-color-contrast-text); --bs-btn-active-bg: var(--orange-color-hover); --bs-btn-active-border-color: var(--orange-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--orange-color-contrast-text); --bs-btn-disabled-bg: var(--orange-color); --bs-btn-disabled-border-color: var(--orange-color); } .btn-outline-orange { --bs-btn-color: var(--orange-color-darker); --bs-btn-border-color: var(--orange-color); --bs-btn-hover-color: var(--orange-color-contrast-text); --bs-btn-hover-bg: var(--orange-color); --bs-btn-hover-border-color: var(--orange-color); --bs-btn-focus-shadow-rgb: var(--orange-color-rgb); --bs-btn-active-color: var(--orange-color-contrast-text); --bs-btn-active-bg: var(--orange-color); --bs-btn-active-border-color: var(--orange-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--orange-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--orange-color); --bs-gradient: none; } /* btn-dark-orange -- btn-dark-outline-orange */ .btn-dark-orange { --bs-btn-color: var(--orange-color-dark-contrast-text); --bs-btn-bg: var(--orange-color-dark); --bs-btn-border-color: var(--orange-color-dark); --bs-btn-hover-color: var(--orange-color-dark-contrast-text); --bs-btn-hover-bg: var(--orange-color-dark-hover); --bs-btn-hover-border-color: var(--orange-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--orange-color-dark-rgb); --bs-btn-active-color: var(--orange-color-dark-contrast-text); --bs-btn-active-bg: var(--orange-color-dark-hover); --bs-btn-active-border-color: var(--orange-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--orange-color-dark-contrast-text); --bs-btn-disabled-bg: var(--orange-color-dark); --bs-btn-disabled-border-color: var(--orange-color-dark); } .btn-outline-dark-orange { --bs-btn-color: var(--orange-color-darker); --bs-btn-border-color: var(--orange-color-dark); --bs-btn-hover-color: var(--orange-color-dark-contrast-text); --bs-btn-hover-bg: var(--orange-color-dark); --bs-btn-hover-border-color: var(--orange-color-dark); --bs-btn-focus-shadow-rgb: var(--orange-color-dark-rgb); --bs-btn-active-color: var(--orange-color-dark-contrast-text); --bs-btn-active-bg: var(--orange-color-dark); --bs-btn-active-border-color: var(--orange-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--orange-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--orange-color-dark); --bs-gradient: none; } /* btn-darker-orange -- btn-darker-outline-orange */ .btn-darker-orange { --bs-btn-color: var(--orange-color-darker-contrast-text); --bs-btn-bg: var(--orange-color-darker); --bs-btn-border-color: var(--orange-color-darker); --bs-btn-hover-color: var(--orange-color-darker-contrast-text); --bs-btn-hover-bg: var(--orange-color-darker-hover); --bs-btn-hover-border-color: var(--orange-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--orange-color-darker-rgb); --bs-btn-active-color: var(--orange-color-darker-contrast-text); --bs-btn-active-bg: var(--orange-color-darker-hover); --bs-btn-active-border-color: var(--orange-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--orange-color-darker-contrast-text); --bs-btn-disabled-bg: var(--orange-color-darker); --bs-btn-disabled-border-color: var(--orange-color-darker); } .btn-outline-darker-orange { --bs-btn-color: var(--orange-color-darker); --bs-btn-border-color: var(--orange-color-darker); --bs-btn-hover-color: var(--orange-color-darker-contrast-text); --bs-btn-hover-bg: var(--orange-color-darker); --bs-btn-hover-border-color: var(--orange-color-darker); --bs-btn-focus-shadow-rgb: var(--orange-color-darker-rgb); --bs-btn-active-color: var(--orange-color-darker-contrast-text); --bs-btn-active-bg: var(--orange-color-darker); --bs-btn-active-border-color: var(--orange-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--orange-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--orange-color-darker); --bs-gradient: none; } /* BUTTON RED */ /* btn-lighter-red -- btn-lighter-outline-red */ .btn-lighter-red { --bs-btn-color: var(--red-color-lighter-contrast-text); --bs-btn-bg: var(--red-color-lighter); --bs-btn-border-color: var(--red-color-lighter); --bs-btn-hover-color: var(--red-color-lighter-contrast-text); --bs-btn-hover-bg: var(--red-color-lighter-hover); --bs-btn-hover-border-color: var(--red-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--red-color-lighter-rgb); --bs-btn-active-color: var(--red-color-lighter-contrast-text); --bs-btn-active-bg: var(--red-color-lighter-hover); --bs-btn-active-border-color: var(--red-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--red-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--red-color-lighter); --bs-btn-disabled-border-color: var(--red-color-lighter); } .btn-outline-lighter-red { --bs-btn-color: var(--red-color-darker); --bs-btn-border-color: var(--red-color-lighter); --bs-btn-hover-color: var(--red-color-lighter-contrast-text); --bs-btn-hover-bg: var(--red-color-lighter); --bs-btn-hover-border-color: var(--red-color-lighter); --bs-btn-focus-shadow-rgb: var(--red-color-lighter-rgb); --bs-btn-active-color: var(--red-color-lighter-contrast-text); --bs-btn-active-bg: var(--red-color-lighter); --bs-btn-active-border-color: var(--red-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--red-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--red-color-lighter); --bs-gradient: none; } /* btn-light-red -- btn-light-outline-red */ .btn-light-red { --bs-btn-color: var(--red-color-light-contrast-text); --bs-btn-bg: var(--red-color-light); --bs-btn-border-color: var(--red-color-light); --bs-btn-hover-color: var(--red-color-light-contrast-text); --bs-btn-hover-bg: var(--red-color-light-hover); --bs-btn-hover-border-color: var(--red-color-light-hover); --bs-btn-focus-shadow-rgb: var(--red-color-light-rgb); --bs-btn-active-color: var(--red-color-light-contrast-text); --bs-btn-active-bg: var(--red-color-light-hover); --bs-btn-active-border-color: var(--red-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--red-color-light-contrast-text); --bs-btn-disabled-bg: var(--red-color-light); --bs-btn-disabled-border-color: var(--red-color-light); } .btn-outline-light-red { --bs-btn-color: var(--red-color-darker); --bs-btn-border-color: var(--red-color-light); --bs-btn-hover-color: var(--red-color-light-contrast-text); --bs-btn-hover-bg: var(--red-color-light); --bs-btn-hover-border-color: var(--red-color-light); --bs-btn-focus-shadow-rgb: var(--red-color-light-rgb); --bs-btn-active-color: var(--red-color-light-contrast-text); --bs-btn-active-bg: var(--red-color-light); --bs-btn-active-border-color: var(--red-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--red-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--red-color-light); --bs-gradient: none; } /* btn-red -- btn-outline-red */ .btn-red { --bs-btn-color: var(--red-color-contrast-text); --bs-btn-bg: var(--red-color); --bs-btn-border-color: var(--red-color); --bs-btn-hover-color: var(--red-color-contrast-text); --bs-btn-hover-bg: var(--red-color-hover); --bs-btn-hover-border-color: var(--red-color-hover); --bs-btn-focus-shadow-rgb: var(--red-color-rgb); --bs-btn-active-color: var(--red-color-contrast-text); --bs-btn-active-bg: var(--red-color-hover); --bs-btn-active-border-color: var(--red-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--red-color-contrast-text); --bs-btn-disabled-bg: var(--red-color); --bs-btn-disabled-border-color: var(--red-color); } .btn-outline-red { --bs-btn-color: var(--red-color-darker); --bs-btn-border-color: var(--red-color); --bs-btn-hover-color: var(--red-color-contrast-text); --bs-btn-hover-bg: var(--red-color); --bs-btn-hover-border-color: var(--red-color); --bs-btn-focus-shadow-rgb: var(--red-color-rgb); --bs-btn-active-color: var(--red-color-contrast-text); --bs-btn-active-bg: var(--red-color); --bs-btn-active-border-color: var(--red-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--red-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--red-color); --bs-gradient: none; } /* btn-dark-red -- btn-dark-outline-red */ .btn-dark-red { --bs-btn-color: var(--red-color-dark-contrast-text); --bs-btn-bg: var(--red-color-dark); --bs-btn-border-color: var(--red-color-dark); --bs-btn-hover-color: var(--red-color-dark-contrast-text); --bs-btn-hover-bg: var(--red-color-dark-hover); --bs-btn-hover-border-color: var(--red-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--red-color-dark-rgb); --bs-btn-active-color: var(--red-color-dark-contrast-text); --bs-btn-active-bg: var(--red-color-dark-hover); --bs-btn-active-border-color: var(--red-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--red-color-dark-contrast-text); --bs-btn-disabled-bg: var(--red-color-dark); --bs-btn-disabled-border-color: var(--red-color-dark); } .btn-outline-dark-red { --bs-btn-color: var(--red-color-darker); --bs-btn-border-color: var(--red-color-dark); --bs-btn-hover-color: var(--red-color-dark-contrast-text); --bs-btn-hover-bg: var(--red-color-dark); --bs-btn-hover-border-color: var(--red-color-dark); --bs-btn-focus-shadow-rgb: var(--red-color-dark-rgb); --bs-btn-active-color: var(--red-color-dark-contrast-text); --bs-btn-active-bg: var(--red-color-dark); --bs-btn-active-border-color: var(--red-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--red-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--red-color-dark); --bs-gradient: none; } /* btn-darker-red -- btn-darker-outline-red */ .btn-darker-red { --bs-btn-color: var(--red-color-darker-contrast-text); --bs-btn-bg: var(--red-color-darker); --bs-btn-border-color: var(--red-color-darker); --bs-btn-hover-color: var(--red-color-darker-contrast-text); --bs-btn-hover-bg: var(--red-color-darker-hover); --bs-btn-hover-border-color: var(--red-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--red-color-darker-rgb); --bs-btn-active-color: var(--red-color-darker-contrast-text); --bs-btn-active-bg: var(--red-color-darker-hover); --bs-btn-active-border-color: var(--red-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--red-color-darker-contrast-text); --bs-btn-disabled-bg: var(--red-color-darker); --bs-btn-disabled-border-color: var(--red-color-darker); } .btn-outline-darker-red { --bs-btn-color: var(--red-color-darker); --bs-btn-border-color: var(--red-color-darker); --bs-btn-hover-color: var(--red-color-darker-contrast-text); --bs-btn-hover-bg: var(--red-color-darker); --bs-btn-hover-border-color: var(--red-color-darker); --bs-btn-focus-shadow-rgb: var(--red-color-darker-rgb); --bs-btn-active-color: var(--red-color-darker-contrast-text); --bs-btn-active-bg: var(--red-color-darker); --bs-btn-active-border-color: var(--red-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--red-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--red-color-darker); --bs-gradient: none; } /* BUTTON BROWN */ /* btn-lighter-brown -- btn-lighter-outline-brown */ .btn-lighter-brown { --bs-btn-color: var(--brown-color-lighter-contrast-text); --bs-btn-bg: var(--brown-color-lighter); --bs-btn-border-color: var(--brown-color-lighter); --bs-btn-hover-color: var(--brown-color-lighter-contrast-text); --bs-btn-hover-bg: var(--brown-color-lighter-hover); --bs-btn-hover-border-color: var(--brown-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--brown-color-lighter-rgb); --bs-btn-active-color: var(--brown-color-lighter-contrast-text); --bs-btn-active-bg: var(--brown-color-lighter-hover); --bs-btn-active-border-color: var(--brown-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--brown-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--brown-color-lighter); --bs-btn-disabled-border-color: var(--brown-color-lighter); } .btn-outline-lighter-brown { --bs-btn-color: var(--brown-color-darker); --bs-btn-border-color: var(--brown-color-lighter); --bs-btn-hover-color: var(--brown-color-lighter-contrast-text); --bs-btn-hover-bg: var(--brown-color-lighter); --bs-btn-hover-border-color: var(--brown-color-lighter); --bs-btn-focus-shadow-rgb: var(--brown-color-lighter-rgb); --bs-btn-active-color: var(--brown-color-lighter-contrast-text); --bs-btn-active-bg: var(--brown-color-lighter); --bs-btn-active-border-color: var(--brown-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--brown-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--brown-color-lighter); --bs-gradient: none; } /* btn-light-brown -- btn-light-outline-brown */ .btn-light-brown { --bs-btn-color: var(--brown-color-light-contrast-text); --bs-btn-bg: var(--brown-color-light); --bs-btn-border-color: var(--brown-color-light); --bs-btn-hover-color: var(--brown-color-light-contrast-text); --bs-btn-hover-bg: var(--brown-color-light-hover); --bs-btn-hover-border-color: var(--brown-color-light-hover); --bs-btn-focus-shadow-rgb: var(--brown-color-light-rgb); --bs-btn-active-color: var(--brown-color-light-contrast-text); --bs-btn-active-bg: var(--brown-color-light-hover); --bs-btn-active-border-color: var(--brown-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--brown-color-light-contrast-text); --bs-btn-disabled-bg: var(--brown-color-light); --bs-btn-disabled-border-color: var(--brown-color-light); } .btn-outline-light-brown { --bs-btn-color: var(--brown-color-darker); --bs-btn-border-color: var(--brown-color-light); --bs-btn-hover-color: var(--brown-color-light-contrast-text); --bs-btn-hover-bg: var(--brown-color-light); --bs-btn-hover-border-color: var(--brown-color-light); --bs-btn-focus-shadow-rgb: var(--brown-color-light-rgb); --bs-btn-active-color: var(--brown-color-light-contrast-text); --bs-btn-active-bg: var(--brown-color-light); --bs-btn-active-border-color: var(--brown-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--brown-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--brown-color-light); --bs-gradient: none; } /* btn-brown -- btn-outline-brown */ .btn-brown { --bs-btn-color: var(--brown-color-contrast-text); --bs-btn-bg: var(--brown-color); --bs-btn-border-color: var(--brown-color); --bs-btn-hover-color: var(--brown-color-contrast-text); --bs-btn-hover-bg: var(--brown-color-hover); --bs-btn-hover-border-color: var(--brown-color-hover); --bs-btn-focus-shadow-rgb: var(--brown-color-rgb); --bs-btn-active-color: var(--brown-color-contrast-text); --bs-btn-active-bg: var(--brown-color-hover); --bs-btn-active-border-color: var(--brown-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--brown-color-contrast-text); --bs-btn-disabled-bg: var(--brown-color); --bs-btn-disabled-border-color: var(--brown-color); } .btn-outline-brown { --bs-btn-color: var(--brown-color-darker); --bs-btn-border-color: var(--brown-color); --bs-btn-hover-color: var(--brown-color-contrast-text); --bs-btn-hover-bg: var(--brown-color); --bs-btn-hover-border-color: var(--brown-color); --bs-btn-focus-shadow-rgb: var(--brown-color-rgb); --bs-btn-active-color: var(--brown-color-contrast-text); --bs-btn-active-bg: var(--brown-color); --bs-btn-active-border-color: var(--brown-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--brown-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--brown-color); --bs-gradient: none; } /* btn-dark-brown -- btn-dark-outline-brown */ .btn-dark-brown { --bs-btn-color: var(--brown-color-dark-contrast-text); --bs-btn-bg: var(--brown-color-dark); --bs-btn-border-color: var(--brown-color-dark); --bs-btn-hover-color: var(--brown-color-dark-contrast-text); --bs-btn-hover-bg: var(--brown-color-dark-hover); --bs-btn-hover-border-color: var(--brown-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--brown-color-dark-rgb); --bs-btn-active-color: var(--brown-color-dark-contrast-text); --bs-btn-active-bg: var(--brown-color-dark-hover); --bs-btn-active-border-color: var(--brown-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--brown-color-dark-contrast-text); --bs-btn-disabled-bg: var(--brown-color-dark); --bs-btn-disabled-border-color: var(--brown-color-dark); } .btn-outline-dark-brown { --bs-btn-color: var(--brown-color-darker); --bs-btn-border-color: var(--brown-color-dark); --bs-btn-hover-color: var(--brown-color-dark-contrast-text); --bs-btn-hover-bg: var(--brown-color-dark); --bs-btn-hover-border-color: var(--brown-color-dark); --bs-btn-focus-shadow-rgb: var(--brown-color-dark-rgb); --bs-btn-active-color: var(--brown-color-dark-contrast-text); --bs-btn-active-bg: var(--brown-color-dark); --bs-btn-active-border-color: var(--brown-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--brown-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--brown-color-dark); --bs-gradient: none; } /* btn-darker-brown -- btn-darker-outline-brown */ .btn-darker-brown { --bs-btn-color: var(--brown-color-darker-contrast-text); --bs-btn-bg: var(--brown-color-darker); --bs-btn-border-color: var(--brown-color-darker); --bs-btn-hover-color: var(--brown-color-darker-contrast-text); --bs-btn-hover-bg: var(--brown-color-darker-hover); --bs-btn-hover-border-color: var(--brown-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--brown-color-darker-rgb); --bs-btn-active-color: var(--brown-color-darker-contrast-text); --bs-btn-active-bg: var(--brown-color-darker-hover); --bs-btn-active-border-color: var(--brown-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--brown-color-darker-contrast-text); --bs-btn-disabled-bg: var(--brown-color-darker); --bs-btn-disabled-border-color: var(--brown-color-darker); } .btn-outline-darker-brown { --bs-btn-color: var(--brown-color-darker); --bs-btn-border-color: var(--brown-color-darker); --bs-btn-hover-color: var(--brown-color-darker-contrast-text); --bs-btn-hover-bg: var(--brown-color-darker); --bs-btn-hover-border-color: var(--brown-color-darker); --bs-btn-focus-shadow-rgb: var(--brown-color-darker-rgb); --bs-btn-active-color: var(--brown-color-darker-contrast-text); --bs-btn-active-bg: var(--brown-color-darker); --bs-btn-active-border-color: var(--brown-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--brown-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--brown-color-darker); --bs-gradient: none; } /* BUTTON PINK */ /* btn-lighter-pink -- btn-lighter-outline-pink */ .btn-lighter-pink { --bs-btn-color: var(--pink-color-lighter-contrast-text); --bs-btn-bg: var(--pink-color-lighter); --bs-btn-border-color: var(--pink-color-lighter); --bs-btn-hover-color: var(--pink-color-lighter-contrast-text); --bs-btn-hover-bg: var(--pink-color-lighter-hover); --bs-btn-hover-border-color: var(--pink-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--pink-color-lighter-rgb); --bs-btn-active-color: var(--pink-color-lighter-contrast-text); --bs-btn-active-bg: var(--pink-color-lighter-hover); --bs-btn-active-border-color: var(--pink-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--pink-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--pink-color-lighter); --bs-btn-disabled-border-color: var(--pink-color-lighter); } .btn-outline-lighter-pink { --bs-btn-color: var(--pink-color-darker); --bs-btn-border-color: var(--pink-color-lighter); --bs-btn-hover-color: var(--pink-color-lighter-contrast-text); --bs-btn-hover-bg: var(--pink-color-lighter); --bs-btn-hover-border-color: var(--pink-color-lighter); --bs-btn-focus-shadow-rgb: var(--pink-color-lighter-rgb); --bs-btn-active-color: var(--pink-color-lighter-contrast-text); --bs-btn-active-bg: var(--pink-color-lighter); --bs-btn-active-border-color: var(--pink-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--pink-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--pink-color-lighter); --bs-gradient: none; } /* btn-light-pink -- btn-light-outline-pink */ .btn-light-pink { --bs-btn-color: var(--pink-color-light-contrast-text); --bs-btn-bg: var(--pink-color-light); --bs-btn-border-color: var(--pink-color-light); --bs-btn-hover-color: var(--pink-color-light-contrast-text); --bs-btn-hover-bg: var(--pink-color-light-hover); --bs-btn-hover-border-color: var(--pink-color-light-hover); --bs-btn-focus-shadow-rgb: var(--pink-color-light-rgb); --bs-btn-active-color: var(--pink-color-light-contrast-text); --bs-btn-active-bg: var(--pink-color-light-hover); --bs-btn-active-border-color: var(--pink-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--pink-color-light-contrast-text); --bs-btn-disabled-bg: var(--pink-color-light); --bs-btn-disabled-border-color: var(--pink-color-light); } .btn-outline-light-pink { --bs-btn-color: var(--pink-color-darker); --bs-btn-border-color: var(--pink-color-light); --bs-btn-hover-color: var(--pink-color-light-contrast-text); --bs-btn-hover-bg: var(--pink-color-light); --bs-btn-hover-border-color: var(--pink-color-light); --bs-btn-focus-shadow-rgb: var(--pink-color-light-rgb); --bs-btn-active-color: var(--pink-color-light-contrast-text); --bs-btn-active-bg: var(--pink-color-light); --bs-btn-active-border-color: var(--pink-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--pink-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--pink-color-light); --bs-gradient: none; } /* btn-pink -- btn-outline-pink */ .btn-pink { --bs-btn-color: var(--pink-color-contrast-text); --bs-btn-bg: var(--pink-color); --bs-btn-border-color: var(--pink-color); --bs-btn-hover-color: var(--pink-color-contrast-text); --bs-btn-hover-bg: var(--pink-color-hover); --bs-btn-hover-border-color: var(--pink-color-hover); --bs-btn-focus-shadow-rgb: var(--pink-color-rgb); --bs-btn-active-color: var(--pink-color-contrast-text); --bs-btn-active-bg: var(--pink-color-hover); --bs-btn-active-border-color: var(--pink-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--pink-color-contrast-text); --bs-btn-disabled-bg: var(--pink-color); --bs-btn-disabled-border-color: var(--pink-color); } .btn-outline-pink { --bs-btn-color: var(--pink-color-darker); --bs-btn-border-color: var(--pink-color); --bs-btn-hover-color: var(--pink-color-contrast-text); --bs-btn-hover-bg: var(--pink-color); --bs-btn-hover-border-color: var(--pink-color); --bs-btn-focus-shadow-rgb: var(--pink-color-rgb); --bs-btn-active-color: var(--pink-color-contrast-text); --bs-btn-active-bg: var(--pink-color); --bs-btn-active-border-color: var(--pink-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--pink-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--pink-color); --bs-gradient: none; } /* btn-dark-pink -- btn-dark-outline-pink */ .btn-dark-pink { --bs-btn-color: var(--pink-color-dark-contrast-text); --bs-btn-bg: var(--pink-color-dark); --bs-btn-border-color: var(--pink-color-dark); --bs-btn-hover-color: var(--pink-color-dark-contrast-text); --bs-btn-hover-bg: var(--pink-color-dark-hover); --bs-btn-hover-border-color: var(--pink-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--pink-color-dark-rgb); --bs-btn-active-color: var(--pink-color-dark-contrast-text); --bs-btn-active-bg: var(--pink-color-dark-hover); --bs-btn-active-border-color: var(--pink-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--pink-color-dark-contrast-text); --bs-btn-disabled-bg: var(--pink-color-dark); --bs-btn-disabled-border-color: var(--pink-color-dark); } .btn-outline-dark-pink { --bs-btn-color: var(--pink-color-darker); --bs-btn-border-color: var(--pink-color-dark); --bs-btn-hover-color: var(--pink-color-dark-contrast-text); --bs-btn-hover-bg: var(--pink-color-dark); --bs-btn-hover-border-color: var(--pink-color-dark); --bs-btn-focus-shadow-rgb: var(--pink-color-dark-rgb); --bs-btn-active-color: var(--pink-color-dark-contrast-text); --bs-btn-active-bg: var(--pink-color-dark); --bs-btn-active-border-color: var(--pink-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--pink-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--pink-color-dark); --bs-gradient: none; } /* btn-darker-pink -- btn-darker-outline-pink */ .btn-darker-pink { --bs-btn-color: var(--pink-color-darker-contrast-text); --bs-btn-bg: var(--pink-color-darker); --bs-btn-border-color: var(--pink-color-darker); --bs-btn-hover-color: var(--pink-color-darker-contrast-text); --bs-btn-hover-bg: var(--pink-color-darker-hover); --bs-btn-hover-border-color: var(--pink-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--pink-color-darker-rgb); --bs-btn-active-color: var(--pink-color-darker-contrast-text); --bs-btn-active-bg: var(--pink-color-darker-hover); --bs-btn-active-border-color: var(--pink-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--pink-color-darker-contrast-text); --bs-btn-disabled-bg: var(--pink-color-darker); --bs-btn-disabled-border-color: var(--pink-color-darker); } .btn-outline-darker-pink { --bs-btn-color: var(--pink-color-darker); --bs-btn-border-color: var(--pink-color-darker); --bs-btn-hover-color: var(--pink-color-darker-contrast-text); --bs-btn-hover-bg: var(--pink-color-darker); --bs-btn-hover-border-color: var(--pink-color-darker); --bs-btn-focus-shadow-rgb: var(--pink-color-darker-rgb); --bs-btn-active-color: var(--pink-color-darker-contrast-text); --bs-btn-active-bg: var(--pink-color-darker); --bs-btn-active-border-color: var(--pink-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--pink-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--pink-color-darker); --bs-gradient: none; } /* BUTTON PURPLE */ /* btn-lighter-purple -- btn-lighter-outline-purple */ .btn-lighter-purple { --bs-btn-color: var(--purple-color-lighter-contrast-text); --bs-btn-bg: var(--purple-color-lighter); --bs-btn-border-color: var(--purple-color-lighter); --bs-btn-hover-color: var(--purple-color-lighter-contrast-text); --bs-btn-hover-bg: var(--purple-color-lighter-hover); --bs-btn-hover-border-color: var(--purple-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--purple-color-lighter-rgb); --bs-btn-active-color: var(--purple-color-lighter-contrast-text); --bs-btn-active-bg: var(--purple-color-lighter-hover); --bs-btn-active-border-color: var(--purple-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--purple-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--purple-color-lighter); --bs-btn-disabled-border-color: var(--purple-color-lighter); } .btn-outline-lighter-purple { --bs-btn-color: var(--purple-color-darker); --bs-btn-border-color: var(--purple-color-lighter); --bs-btn-hover-color: var(--purple-color-lighter-contrast-text); --bs-btn-hover-bg: var(--purple-color-lighter); --bs-btn-hover-border-color: var(--purple-color-lighter); --bs-btn-focus-shadow-rgb: var(--purple-color-lighter-rgb); --bs-btn-active-color: var(--purple-color-lighter-contrast-text); --bs-btn-active-bg: var(--purple-color-lighter); --bs-btn-active-border-color: var(--purple-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--purple-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--purple-color-lighter); --bs-gradient: none; } /* btn-light-purple -- btn-light-outline-purple */ .btn-light-purple { --bs-btn-color: var(--purple-color-light-contrast-text); --bs-btn-bg: var(--purple-color-light); --bs-btn-border-color: var(--purple-color-light); --bs-btn-hover-color: var(--purple-color-light-contrast-text); --bs-btn-hover-bg: var(--purple-color-light-hover); --bs-btn-hover-border-color: var(--purple-color-light-hover); --bs-btn-focus-shadow-rgb: var(--purple-color-light-rgb); --bs-btn-active-color: var(--purple-color-light-contrast-text); --bs-btn-active-bg: var(--purple-color-light-hover); --bs-btn-active-border-color: var(--purple-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--purple-color-light-contrast-text); --bs-btn-disabled-bg: var(--purple-color-light); --bs-btn-disabled-border-color: var(--purple-color-light); } .btn-outline-light-purple { --bs-btn-color: var(--purple-color-darker); --bs-btn-border-color: var(--purple-color-light); --bs-btn-hover-color: var(--purple-color-light-contrast-text); --bs-btn-hover-bg: var(--purple-color-light); --bs-btn-hover-border-color: var(--purple-color-light); --bs-btn-focus-shadow-rgb: var(--purple-color-light-rgb); --bs-btn-active-color: var(--purple-color-light-contrast-text); --bs-btn-active-bg: var(--purple-color-light); --bs-btn-active-border-color: var(--purple-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--purple-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--purple-color-light); --bs-gradient: none; } /* btn-purple -- btn-outline-purple */ .btn-purple { --bs-btn-color: var(--purple-color-contrast-text); --bs-btn-bg: var(--purple-color); --bs-btn-border-color: var(--purple-color); --bs-btn-hover-color: var(--purple-color-contrast-text); --bs-btn-hover-bg: var(--purple-color-hover); --bs-btn-hover-border-color: var(--purple-color-hover); --bs-btn-focus-shadow-rgb: var(--purple-color-rgb); --bs-btn-active-color: var(--purple-color-contrast-text); --bs-btn-active-bg: var(--purple-color-hover); --bs-btn-active-border-color: var(--purple-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--purple-color-contrast-text); --bs-btn-disabled-bg: var(--purple-color); --bs-btn-disabled-border-color: var(--purple-color); } .btn-outline-purple { --bs-btn-color: var(--purple-color-darker); --bs-btn-border-color: var(--purple-color); --bs-btn-hover-color: var(--purple-color-contrast-text); --bs-btn-hover-bg: var(--purple-color); --bs-btn-hover-border-color: var(--purple-color); --bs-btn-focus-shadow-rgb: var(--purple-color-rgb); --bs-btn-active-color: var(--purple-color-contrast-text); --bs-btn-active-bg: var(--purple-color); --bs-btn-active-border-color: var(--purple-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--purple-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--purple-color); --bs-gradient: none; } /* btn-dark-purple -- btn-dark-outline-purple */ .btn-dark-purple { --bs-btn-color: var(--purple-color-dark-contrast-text); --bs-btn-bg: var(--purple-color-dark); --bs-btn-border-color: var(--purple-color-dark); --bs-btn-hover-color: var(--purple-color-dark-contrast-text); --bs-btn-hover-bg: var(--purple-color-dark-hover); --bs-btn-hover-border-color: var(--purple-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--purple-color-dark-rgb); --bs-btn-active-color: var(--purple-color-dark-contrast-text); --bs-btn-active-bg: var(--purple-color-dark-hover); --bs-btn-active-border-color: var(--purple-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--purple-color-dark-contrast-text); --bs-btn-disabled-bg: var(--purple-color-dark); --bs-btn-disabled-border-color: var(--purple-color-dark); } .btn-outline-dark-purple { --bs-btn-color: var(--purple-color-darker); --bs-btn-border-color: var(--purple-color-dark); --bs-btn-hover-color: var(--purple-color-dark-contrast-text); --bs-btn-hover-bg: var(--purple-color-dark); --bs-btn-hover-border-color: var(--purple-color-dark); --bs-btn-focus-shadow-rgb: var(--purple-color-dark-rgb); --bs-btn-active-color: var(--purple-color-dark-contrast-text); --bs-btn-active-bg: var(--purple-color-dark); --bs-btn-active-border-color: var(--purple-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--purple-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--purple-color-dark); --bs-gradient: none; } /* btn-darker-purple -- btn-darker-outline-purple */ .btn-darker-purple { --bs-btn-color: var(--purple-color-darker-contrast-text); --bs-btn-bg: var(--purple-color-darker); --bs-btn-border-color: var(--purple-color-darker); --bs-btn-hover-color: var(--purple-color-darker-contrast-text); --bs-btn-hover-bg: var(--purple-color-darker-hover); --bs-btn-hover-border-color: var(--purple-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--purple-color-darker-rgb); --bs-btn-active-color: var(--purple-color-darker-contrast-text); --bs-btn-active-bg: var(--purple-color-darker-hover); --bs-btn-active-border-color: var(--purple-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--purple-color-darker-contrast-text); --bs-btn-disabled-bg: var(--purple-color-darker); --bs-btn-disabled-border-color: var(--purple-color-darker); } .btn-outline-darker-purple { --bs-btn-color: var(--purple-color-darker); --bs-btn-border-color: var(--purple-color-darker); --bs-btn-hover-color: var(--purple-color-darker-contrast-text); --bs-btn-hover-bg: var(--purple-color-darker); --bs-btn-hover-border-color: var(--purple-color-darker); --bs-btn-focus-shadow-rgb: var(--purple-color-darker-rgb); --bs-btn-active-color: var(--purple-color-darker-contrast-text); --bs-btn-active-bg: var(--purple-color-darker); --bs-btn-active-border-color: var(--purple-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--purple-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--purple-color-darker); --bs-gradient: none; } /* BUTTON GREY */ /* btn-lighter-grey -- btn-lighter-outline-grey */ .btn-lighter-grey { --bs-btn-color: var(--grey-color-lighter-contrast-text); --bs-btn-bg: var(--grey-color-lighter); --bs-btn-border-color: var(--grey-color-lighter); --bs-btn-hover-color: var(--grey-color-lighter-contrast-text); --bs-btn-hover-bg: var(--grey-color-lighter-hover); --bs-btn-hover-border-color: var(--grey-color-lighter-hover); --bs-btn-focus-shadow-rgb: var(--grey-color-lighter-rgb); --bs-btn-active-color: var(--grey-color-lighter-contrast-text); --bs-btn-active-bg: var(--grey-color-lighter-hover); --bs-btn-active-border-color: var(--grey-color-lighter-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--grey-color-lighter-contrast-text); --bs-btn-disabled-bg: var(--grey-color-lighter); --bs-btn-disabled-border-color: var(--grey-color-lighter); } .btn-outline-lighter-grey { --bs-btn-color: var(--grey-color-darker); --bs-btn-border-color: var(--grey-color-lighter); --bs-btn-hover-color: var(--grey-color-lighter-contrast-text); --bs-btn-hover-bg: var(--grey-color-lighter); --bs-btn-hover-border-color: var(--grey-color-lighter); --bs-btn-focus-shadow-rgb: var(--grey-color-lighter-rgb); --bs-btn-active-color: var(--grey-color-lighter-contrast-text); --bs-btn-active-bg: var(--grey-color-lighter); --bs-btn-active-border-color: var(--grey-color-lighter); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--grey-color-lighter); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--grey-color-lighter); --bs-gradient: none; } /* btn-light-grey -- btn-light-outline-grey */ .btn-light-grey { --bs-btn-color: var(--grey-color-light-contrast-text); --bs-btn-bg: var(--grey-color-light); --bs-btn-border-color: var(--grey-color-light); --bs-btn-hover-color: var(--grey-color-light-contrast-text); --bs-btn-hover-bg: var(--grey-color-light-hover); --bs-btn-hover-border-color: var(--grey-color-light-hover); --bs-btn-focus-shadow-rgb: var(--grey-color-light-rgb); --bs-btn-active-color: var(--grey-color-light-contrast-text); --bs-btn-active-bg: var(--grey-color-light-hover); --bs-btn-active-border-color: var(--grey-color-light-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--grey-color-light-contrast-text); --bs-btn-disabled-bg: var(--grey-color-light); --bs-btn-disabled-border-color: var(--grey-color-light); } .btn-outline-light-grey { --bs-btn-color: var(--grey-color-darker); --bs-btn-border-color: var(--grey-color-light); --bs-btn-hover-color: var(--grey-color-light-contrast-text); --bs-btn-hover-bg: var(--grey-color-light); --bs-btn-hover-border-color: var(--grey-color-light); --bs-btn-focus-shadow-rgb: var(--grey-color-light-rgb); --bs-btn-active-color: var(--grey-color-light-contrast-text); --bs-btn-active-bg: var(--grey-color-light); --bs-btn-active-border-color: var(--grey-color-light); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--grey-color-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--grey-color-light); --bs-gradient: none; } /* btn-grey -- btn-outline-grey */ .btn-grey { --bs-btn-color: var(--grey-color-contrast-text); --bs-btn-bg: var(--grey-color); --bs-btn-border-color: var(--grey-color); --bs-btn-hover-color: var(--grey-color-contrast-text); --bs-btn-hover-bg: var(--grey-color-hover); --bs-btn-hover-border-color: var(--grey-color-hover); --bs-btn-focus-shadow-rgb: var(--grey-color-rgb); --bs-btn-active-color: var(--grey-color-contrast-text); --bs-btn-active-bg: var(--grey-color-hover); --bs-btn-active-border-color: var(--grey-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--grey-color-contrast-text); --bs-btn-disabled-bg: var(--grey-color); --bs-btn-disabled-border-color: var(--grey-color); } .btn-outline-grey { --bs-btn-color: var(--grey-color-darker); --bs-btn-border-color: var(--grey-color); --bs-btn-hover-color: var(--grey-color-contrast-text); --bs-btn-hover-bg: var(--grey-color); --bs-btn-hover-border-color: var(--grey-color); --bs-btn-focus-shadow-rgb: var(--grey-color-rgb); --bs-btn-active-color: var(--grey-color-contrast-text); --bs-btn-active-bg: var(--grey-color); --bs-btn-active-border-color: var(--grey-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--grey-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--grey-color); --bs-gradient: none; } /* btn-dark-grey -- btn-dark-outline-grey */ .btn-dark-grey { --bs-btn-color: var(--grey-color-dark-contrast-text); --bs-btn-bg: var(--grey-color-dark); --bs-btn-border-color: var(--grey-color-dark); --bs-btn-hover-color: var(--grey-color-dark-contrast-text); --bs-btn-hover-bg: var(--grey-color-dark-hover); --bs-btn-hover-border-color: var(--grey-color-dark-hover); --bs-btn-focus-shadow-rgb: var(--grey-color-dark-rgb); --bs-btn-active-color: var(--grey-color-dark-contrast-text); --bs-btn-active-bg: var(--grey-color-dark-hover); --bs-btn-active-border-color: var(--grey-color-dark-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--grey-color-dark-contrast-text); --bs-btn-disabled-bg: var(--grey-color-dark); --bs-btn-disabled-border-color: var(--grey-color-dark); } .btn-outline-dark-grey { --bs-btn-color: var(--grey-color-darker); --bs-btn-border-color: var(--grey-color-dark); --bs-btn-hover-color: var(--grey-color-dark-contrast-text); --bs-btn-hover-bg: var(--grey-color-dark); --bs-btn-hover-border-color: var(--grey-color-dark); --bs-btn-focus-shadow-rgb: var(--grey-color-dark-rgb); --bs-btn-active-color: var(--grey-color-dark-contrast-text); --bs-btn-active-bg: var(--grey-color-dark); --bs-btn-active-border-color: var(--grey-color-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--grey-color-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--grey-color-dark); --bs-gradient: none; } /* btn-darker-grey -- btn-darker-outline-grey */ .btn-darker-grey { --bs-btn-color: var(--grey-color-darker-contrast-text); --bs-btn-bg: var(--grey-color-darker); --bs-btn-border-color: var(--grey-color-darker); --bs-btn-hover-color: var(--grey-color-darker-contrast-text); --bs-btn-hover-bg: var(--grey-color-darker-hover); --bs-btn-hover-border-color: var(--grey-color-darker-hover); --bs-btn-focus-shadow-rgb: var(--grey-color-darker-rgb); --bs-btn-active-color: var(--grey-color-darker-contrast-text); --bs-btn-active-bg: var(--grey-color-darker-hover); --bs-btn-active-border-color: var(--grey-color-darker-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--grey-color-darker-contrast-text); --bs-btn-disabled-bg: var(--grey-color-darker); --bs-btn-disabled-border-color: var(--grey-color-darker); } .btn-outline-darker-grey { --bs-btn-color: var(--grey-color-darker); --bs-btn-border-color: var(--grey-color-darker); --bs-btn-hover-color: var(--grey-color-darker-contrast-text); --bs-btn-hover-bg: var(--grey-color-darker); --bs-btn-hover-border-color: var(--grey-color-darker); --bs-btn-focus-shadow-rgb: var(--grey-color-darker-rgb); --bs-btn-active-color: var(--grey-color-darker-contrast-text); --bs-btn-active-bg: var(--grey-color-darker); --bs-btn-active-border-color: var(--grey-color-darker); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--grey-color-darker); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--grey-color-darker); --bs-gradient: none; } /* BUTTON BLACK */ /* btn-black -- btn-outlite-black */ .btn-black { --bs-btn-color: var(--black-color-contrast-text); --bs-btn-bg: var(--black-color); --bs-btn-border-color: var(--black-color); --bs-btn-hover-color: var(--black-color-contrast-text); --bs-btn-hover-bg: var(--black-color-hover); --bs-btn-hover-border-color: var(--black-color-hover); --bs-btn-focus-shadow-rgb: var(--black-color-rgb); --bs-btn-active-color: var(--black-color-contrast-text); --bs-btn-active-bg: var(--black-color-hover); --bs-btn-active-border-color: var(--black-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--black-color-contrast-text); --bs-btn-disabled-bg: var(--black-color); --bs-btn-disabled-border-color: var(--black-color); } .btn-outline-black { --bs-btn-color: var(--black-color); --bs-btn-border-color: var(--black-color); --bs-btn-hover-color: var(--black-color-contrast-text); --bs-btn-hover-bg: var(--black-color); --bs-btn-hover-border-color: var(--black-color); --bs-btn-focus-shadow-rgb: var(--black-color-rgb); --bs-btn-active-color: var(--black-color-contrast-text); --bs-btn-active-bg: var(--black-color); --bs-btn-active-border-color: var(--black-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--black-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--black-color); --bs-gradient: none; } /* BUTTON WHITE */ /* btn-white -- btn-outlite-white */ .btn-white { --bs-btn-color: var(--white-color-contrast-text); --bs-btn-bg: var(--white-color); --bs-btn-border-color: var(--white-color); --bs-btn-hover-color: var(--white-color-contrast-text); --bs-btn-hover-bg: var(--white-color-hover); --bs-btn-hover-border-color: var(--white-color-hover); --bs-btn-focus-shadow-rgb: var(--white-color-rgb); --bs-btn-active-color: var(--white-color-contrast-text); --bs-btn-active-bg: var(--white-color-hover); --bs-btn-active-border-color: var(--white-color-hover); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--white-color-contrast-text); --bs-btn-disabled-bg: var(--white-color); --bs-btn-disabled-border-color: var(--white-color); } .btn-outline-white { --bs-btn-color: var(--white-color); --bs-btn-border-color: var(--white-color); --bs-btn-hover-color: var(--white-color-contrast-text); --bs-btn-hover-bg: var(--white-color); --bs-btn-hover-border-color: var(--white-color); --bs-btn-focus-shadow-rgb: var(--white-color-rgb); --bs-btn-active-color: var(--white-color-contrast-text); --bs-btn-active-bg: var(--white-color); --bs-btn-active-border-color: var(--white-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--white-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--white-color); --bs-gradient: none; } /* Buttons */ .btn.disabled, .btn[disabled] { cursor: not-allowed !important; pointer-events: all !important; } .btn.disabled.mdi:before, .btn.disabled .mdi:before, .btn.disabled.iconify--mdi, .btn.disabled .iconify--mdi { color: #ddd !important; } [class*=btn-outline-]:disabled:active, [class*=btn-outline-].disabled:active { background-color: var(--bs-btn-disabled-bg); color: var(--bs-btn-disabled-color); } .btn-sm, .btn-group-sm > .btn { font-size: 0.85rem; padding: 0.15rem 1rem; } .btn-lg, .btn-group-lg > .btn { font-size: 1.2rem; padding: 0.6rem 1.5rem 0.5rem; } .btn-xl, .btn-group-xl > .btn { font-size: 1.75rem; padding: 0.6rem 2rem 0.5rem; } .btn .mdi { /* .iconify--mdi not neccesary */ display: contents; line-height: initial; } [class^=btn] .mdi.text-white, [class^=btn] .iconify--mdi.text-white { text-shadow: none !important; } .btn-labeled { border: 0; width: auto; padding: 0; min-height: 30px; } .btn-labeled.btn-sm { min-height: inherit !important; } .btn-labeled.btn-lg { min-height: inherit !important; } .btn-labeled.btn-xl { min-height: inherit !important; } .btn-labeled .btn-label { background: rgba(255, 255, 255, 0.15); height: auto; display: inline-flex; align-items: center; } .btn-labeled span { vertical-align: middle; padding: 0 1rem !important; } .btn-labeled .btn-label .mdi, .btn-labeled .btn-label.mdi, .btn-labeled .btn-label .iconify--mdi, .btn-labeled .btn-label.iconify--mdi { color: #fff !important; } .btn-labeled .btn-label:last-child, .btn-labeled .btn-label:last-child:hover { border-radius: 0; } .btn-sm[class*=btn-labeled] .mdi, .btn-sm[class*=btn-labeled] .iconify--mdi { font-size: 1rem !important; } .btn-sm .btn-label { left: -13px; } .btn[class*=btn-labeled] .mdi, .btn[class*=btn-labeled] .iconify--mdi { font-size: 20px; } .btn-lg[class*=btn-labeled] .mdi, .btn-lg[class*=btn-labeled] .iconify--mdi { font-size: 1.75rem !important; } .btn-lg .btn-label { left: -19px; } .btn-xl[class*=btn-labeled] .mdi, .btn-xl[class*=btn-labeled] .iconify--mdi { font-size: 1.75rem !important; } .btn-xl .btn-label { left: -19px; } .btn-labeled-outline { width: auto; display: inline-flex; justify-content: center; align-items: center; padding: 0; } .btn-labeled-outline.btn-sm { min-height: 22px !important; } .btn-labeled-outline.btn-lg { min-height: 42px !important; } .btn-labeled-outline.btn-xl { min-height: 52px !important; } .btn-labeled-outline .btn-label { padding: 0; padding: 0 1rem !important; background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), linear-gradient(CurrentColor, CurrentColor); height: 100%; display: flex; align-items: center; } .btn-labeled-outline .btn-label:last-child, .btn-labeled-outline .btn-label:last-child:hover { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); } .btn-labeled.btn-sm .btn-label, .btn-labeled.btn-sm .btn-label:hover, .btn-labeled-outline.btn-sm .btn-label, .btn-labeled-outline.btn-sm .btn-label:hover { border-top-left-radius: 3px; border-bottom-left-radius: 3px; min-height: 20px !important; } .btn-labeled .btn-label, .btn-labeled .btn-label:hover, .btn-labeled-outline .btn-label, .btn-labeled-outline .btn-label:hover { border-top-left-radius: 4px; border-bottom-left-radius: 4px; min-height: 30px !important; } .btn-labeled.btn-lg .btn-label, .btn-labeled.btn-lg .btn-label:hover, .btn-labeled-outline.btn-lg .btn-label, .btn-labeled-outline.btn-lg .btn-label:hover { border-top-left-radius: 5px; border-bottom-left-radius: 5px; min-height: 40px !important; } .btn-labeled.btn-xl .btn-label, .btn-labeled.btn-xl .btn-label:hover, .btn-labeled-outline.btn-xl .btn-label, .btn-labeled-outline.btn-xl .btn-label:hover { border-top-left-radius: 5px; border-bottom-left-radius: 5px; min-height: 50px !important; } .btn-labeled-outline span { vertical-align: middle; padding: 0 1rem; } .btn-labeled-outline:hover span [class*=spinner] { color: var(--bs-btn-color); } .dt-button.btn-labeled span:first-child { /* This is a bit of a weird case, it's the locator export buttons. There is one more SPAN. */ position: relative; left: -7px; } /**/ .btn-pill { border-radius: 50em !important; padding-left: calc(var(--bs-btn-padding-x) + 0.5rem); padding-right: calc(var(--bs-btn-padding-x) + 0.5rem); } /**/ body.main .btn-ripple:not(.viewer-control-button) div, body.locator .btn-ripple:not(.viewer-control-button) div, body.detail .btn-ripple:not(.viewer-control-button) div, body.popup .btn-ripple:not(.viewer-control-button) div { position: relative !important; /* Remove Material Dessign Effect - Problem with react viewer buttons and SVG icons */ } /* btn -> mdi */ [class*=btn-outline-] .mdi:before, [class*=btn-outline-] .iconify { color: var(--bs-btn-color); } [class*=btn-outline-]:hover .mdi:before, [class*=btn-outline-]:hover .iconify { color: var(--bs-btn-hover-color) !important; } [class*=btn-outline-]:focus .mdi:before, [class*=btn-outline-]:focus .iconify { color: var(--bs-btn-color); } [class*=btn-outline-]:active .mdi:before, [class*=btn-outline-]:active .iconify { color: var(--bs-btn-active-color); } [class*=btn-outline-]:disabled .mdi:before, [class*=btn-outline-]:disabled .iconify { color: var(--bs-btn-disabled-color); } /**/ .btn-ico { background-color: #fff !important; border-color: var(--bs-border-color) !important; } .btn-ico:hover:not(.disabled):not([disabled=disabled]):not(.form-control-plaintext) { background-color: rgba(var(--primary-color-rgb), 0.1) !important; border-color: var(--bs-border-color); } .btn-ico:hover.form-control-plaintext { color: var(--link-ico-color) !important; /* No hover please */ } .btn-ico.disabled, .btn-ico:disabled { color: #fff; background-color: #cccfd1; border-color: var(--bs-border-color); } .btn-ico:not(:disabled):not(.disabled):active, .btn-ico:not(:disabled):not(.disabled).active, .show > .btn-ico.dropdown-toggle { color: #939292; background-color: #dddfe0; border-color: #dddfe0; } /* State Bootstrap buttons with icon */ button.btn-info.ico:before, button.btn-success.ico:before, button.btn-danger.ico:before, button.btn-light.ico:before, button.btn-warning.ico:before, button.btn-validate.ico:before, button.btn-invalidate.ico:before { float: left; margin: -3px 5px -2px 0px; font-family: "Material Design Icons"; font-size: 1.3rem; } button.btn-info.ico:before { content: "\f02d7"; } button.btn-success.ico:before, button.btn-validate.ico:before { content: "\f0133"; } button.btn-danger.ico:before { content: "\f0028"; } button.btn-light.ico:before { content: "\f07fc"; } button.btn-invalidate.ico:before { content: "\f0159"; } button.btn-warning.ico:before { content: "\f0734"; } /* Tree transition buttons */ .btn-custom-tree, a.btn-custom-tree { background-color: var(--btn-custom-tree); border-color: var(--btn-custom-tree); color: var(--custom-tree-color) !important; border-radius: var(--button-radius); } .btn-outline-custom-tree { border-color: var(--btn-custom-tree); color: var(--btn-custom-tree); } .btn-custom-tree:hover { background-color: var(--btn-custom-tree); border-color: var(--btn-custom-tree); } .btn-outline-custom-tree:hover { background-color: var(--btn-custom-tree); border-color: var(--btn-custom-tree); } .btn-custom-tree.disabled, .btn-custom-tree:disabled { background-color: var(--btn-custom-tree); border-color: var(--btn-custom-tree); color: var(--custom-tree-color); } .btn-outline-custom-tree.disabled, .btn-outline-custom-tree:disabled { color: var(--btn-custom-tree); background: transparent; border-color: var(--btn-custom-tree); } .btn-custom-tree:not(:disabled):not(.disabled):active, .btn-custom-tree:not(:disabled):not(.disabled).active, .show > .btn-custom-tree.dropdown-toggle { background-color: var(--btn-custom-tree); } /* btn-custom-tree -> mdi */ .btn-outline-custom-tree .mdi:before, .btn-outline-custom-tree .iconify--mdi:before { color: var(--btn-custom-tree); } .btn-custom-tree:hover .mdi:before, .btn-custom-tree .mdi:before, .btn-outline-custom-tree:hover .mdi:before, .btn-outline-custom-tree:focus .mdi:before, .btn-custom-tree:hover .iconify--mdi:before, .btn-custom-tree .iconify--mdi--mdidi:before, .btn-outline-custom-tree:hover .iconify--mdi:before, .btn-outline-custom-tree:focus .iconify--mdi:before { color: var(--custom-tree-color); } /* Button Only-icon */ .only-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 0; } .btn-sm.only-icon { width: 20px !important; height: 20px !important; } .btn-sm.only-icon .mdi:before, .btn-sm.only-icon .iconify--mdi:before { font-size: 0.75rem !important; } .btn.only-icon { width: 30px; height: 30px; } .btn.only-icon .mdi:before, .btn.only-icon .iconify--mdi:before { font-size: 1rem; } .btn-lg.only-icon { width: 40px !important; height: 40px !important; } .btn-lg.only-icon .mdi:before, .btn-lg.only-icon .iconify--mdi:before { font-size: 1.5rem !important; } .btn-xl.only-icon { width: 50px !important; height: 50px !important; } .btn-xl.only-icon .mdi:before, .btn-xl.only-icon .iconify--mdi:before { font-size: 2rem !important; } /* Button hover */ .btn-hover { margin: 0.3rem; transition: all 0.6s; height: 30px; width: 30px; border: 0px; padding: 0px; display: flex; align-items: center; justify-content: center; } .btn-hover:hover { background-color: #eee; } /* btn-check */ .btn-check + .btn:hover .mdi:before, .btn-check + .btn:hover .iconify--mdi:before { color: var(--bs-btn-color) !important; } .btn-check + .btn { margin-right: 0.15rem; } .btn-check:disabled:not(:checked) + .btn:hover { color: var(--bs-btn-disabled-color) !important; } .btn-group .btn-check + .btn { margin-right: 0 !important; } .btn-check:checked:not(:disabled) + .btn:not(.shadow-none) { box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-focus-shadow-rgb), 0.15); } .btn-check:hover:not(:disabled) + .btn[class*=" btn-outline"]:not(.shadow-none) { box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-focus-shadow-rgb), 0.15) !important; } .btn-check:checked + .btn[class*=" btn-outline"] .mdi:before, .btn-check:hover:checked + .btn[class*=" btn-outline"] .mdi:before, .btn-check:checked + .btn[class*=" btn-outline"] .iconify--mdi:before, .btn-check:hover:checked + .btn[class*=" btn-outline"] .iconify--mdi:before { color: var(--bs-btn-active-color) !important; } .btn-check:checked + .btn { animation: btn-checked-animation 0.6s; } @keyframes btn-checked-animation { 0% { opacity: 1; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-8%); } 100% { opacity: 1; transform: translateY(0); } } .btn-check:checked + .btn-outline-default.border-check-hover-primary { border-color: var(--primary-color); } .btn-check + .btn-outline-default.border-check-hover-primary:hover { border-color: var(--primary-color); } .btn-check + .btn-outline-default.border-check-hover-secondary { border-color: var(--secondary-color); } .btn-check:checked + .btn-outline-default.border-check-hover-secondary:hover { border-color: var(--secondary-color); } /* Modal */ .btn-close:focus { box-shadow: none; } /***************************************/ /*************** Colors ****************/ /***************************************/ /* Variables */ :root { --blue-color-lighter: hsl(from var(--blue-color) h s 95%); --blue-color-lighter-contrast-text: var(--blue-color-darker); --blue-color-lighter-hover: hsl(from var(--blue-color) h s 90%); --blue-color-lighter-rgb: 235, 243, 249; --blue-color-light: hsl(from var(--blue-color) h s 85%); --blue-color-light-contrast-text: var(--blue-color-darker); --blue-color-light-hover: hsl(from var(--blue-color) h s 80%); --blue-color-light-rgb: 196, 218, 237; --blue-color: #3779B3; --blue-color-contrast-text: #fff; --blue-color-hover: hsl(from var(--blue-color) h s 35%); --blue-color-rgb: 55, 121, 179; --blue-color-status: hsl(from var(--blue-color) h s 85%); --blue-color-dark: hsl(from var(--blue-color) h s 30%); --blue-color-dark-contrast-text: #fff; --blue-color-dark-hover: hsl(from var(--blue-color) h s 25%); --blue-color-dark-rgb: 36, 79, 117; --blue-color-darker: hsl(from var(--blue-color) h s 20%); --blue-color-darker-contrast-text: #fff; --blue-color-darker-hover: hsl(from var(--blue-color) h s 15%); --blue-color-darker-rgb: 24, 53, 78; --green-color-lighter: hsl(from var(--green-color) h s 95%); --green-color-lighter-contrast-text: var(--green-color-darker); --green-color-lighter-hover: hsl(from var(--green-color) h s 90%); --green-color-lighter-rgb: 238, 247, 243; --green-color-light: hsl(from var(--green-color) h s 85%); --green-color-light-contrast-text: var(--green-color-darker); --green-color-light-hover: hsl(from var(--green-color) h s 80%); --green-color-light-rgb: 203, 230, 218; --green-color: #3F8364; --green-color-contrast-text: #fff; --green-color-hover: hsl(from var(--green-color) h s 35%); --green-color-rgb: 63, 131, 100; --green-color-dark: hsl(from var(--green-color) h s 30%); --green-color-dark-contrast-text: #fff; --green-color-dark-hover: hsl(from var(--green-color) h s 25%); --green-color-dark-rgb: 50, 103, 79; --green-color-darker: hsl(from var(--green-color) h s 20%); --green-color-darker-contrast-text: #fff; --green-color-darker-hover: hsl(from var(--green-color) h s 15%); --green-color-darker-rgb: 33, 69, 53; --yellow-color-lighter: hsl(from var(--yellow-color) h s 95%); --yellow-color-lighter-contrast-text: var(--yellow-color-darker); --yellow-color-lighter-hover: hsl(from var(--yellow-color) h s 90%); --yellow-color-lighter-rgb: 252, 249, 233; --yellow-color-light: hsl(from var(--yellow-color) h s 85%); --yellow-color-light-contrast-text: var(--yellow-color-darker); --yellow-color-light-hover: hsl(from var(--yellow-color) h s 80%); --yellow-color-light-rgb: 245, 238, 189; --yellow-color: #e1ce42; --yellow-color-contrast-text: var(--yellow-color-darker); --yellow-color-hover: hsl(from var(--yellow-color) h s 35%); --yellow-color-rgb: 225, 206, 66; --yellow-color-dark: hsl(from var(--yellow-color) h s 30%); --yellow-color-dark-contrast-text: #fff; --yellow-color-dark-hover: hsl(from var(--yellow-color) h s 25%); --yellow-color-dark-rgb: 132, 119, 21; --yellow-color-darker: hsl(from var(--yellow-color) h s 20%); --yellow-color-darker-contrast-text: #fff; --yellow-color-darker-hover: hsl(from var(--yellow-color) h s 15%); --yellow-color-darker-rgb: 88, 79, 14; --orange-color-lighter: hsl(from var(--orange-color) h s 95%); --orange-color-lighter-contrast-text: var(--orange-color-darker); --orange-color-lighter-hover: hsl(from var(--orange-color) h s 90%); --orange-color-lighter-rgb: 253, 241, 232; --orange-color-light: hsl(from var(--orange-color) h s 85%); --orange-color-light-contrast-text: var(--orange-color-darker); --orange-color-light-hover: hsl(from var(--orange-color) h s 80%); --orange-color-light-rgb: 248, 212, 185; --orange-color: #ed904b; --orange-color-contrast-text: var(--orange-color-darker); --orange-color-hover: hsl(from var(--orange-color) h s 35%); --orange-color-rgb: 237, 144, 75; --orange-color-dark: hsl(from var(--orange-color) h s 30%); --orange-color-dark-contrast-text: #fff; --orange-color-dark-hover: hsl(from var(--orange-color) h s 25%); --orange-color-dark-rgb: 139, 67, 14; --orange-color-darker: hsl(from var(--orange-color) h s 20%); --orange-color-darker-contrast-text: #fff; --orange-color-darker-hover: hsl(from var(--orange-color) h s 15%); --orange-color-darker-rgb: 93, 45, 9; --red-color-lighter: hsl(from var(--red-color) h s 95%); --red-color-lighter-contrast-text: var(--red-color-darker); --red-color-lighter-hover: hsl(from var(--red-color) h s 90%); --red-color-lighter-rgb: 249, 235, 235; --red-color-light: hsl(from var(--red-color) h s 85%); --red-color-light-contrast-text: var(--red-color-darker); --red-color-light-hover: hsl(from var(--red-color) h s 80%); --red-color-light-rgb: 238, 195, 195; --red-color: #c83d3d; --red-color-contrast-text: #fff; --red-color-hover: hsl(from var(--red-color) h s 35%); --red-color-rgb: 200, 61, 61; --red-color-dark: hsl(from var(--red-color) h s 30%); --red-color-dark-contrast-text: #fff; --red-color-dark-hover: hsl(from var(--red-color) h s 25%); --red-color-dark-rgb: 119, 34, 34; --red-color-darker: hsl(from var(--red-color) h s 20%); --red-color-darker-contrast-text: #fff; --red-color-darker-hover: hsl(from var(--red-color) h s 15%); --red-color-darker-rgb: 79, 23, 23; --brown-color-lighter: hsl(from var(--brown-color) h s 95%); --brown-color-lighter-contrast-text: var(--brown-color-darker); --brown-color-lighter-hover: hsl(from var(--brown-color) h s 90%); --brown-color-lighter-rgb: 245, 241, 240; --brown-color-light: hsl(from var(--brown-color) h s 85%); --brown-color-light-contrast-text: var(--brown-color-darker); --brown-color-light-hover: hsl(from var(--brown-color) h s 80%); --brown-color-light-rgb: 225, 213, 209; --brown-color: #916B5F; --brown-color-contrast-text: #fff; --brown-color-hover: hsl(from var(--brown-color) h s 35%); --brown-color-rgb: 145, 107, 95; --brown-color-dark: hsl(from var(--brown-color) h s 30%); --brown-color-dark-contrast-text: #fff; --brown-color-dark-hover: hsl(from var(--brown-color) h s 25%); --brown-color-dark-rgb: 92, 68, 61; --brown-color-darker: hsl(from var(--brown-color) h s 20%); --brown-color-darker-contrast-text: #fff; --brown-color-darker-hover: hsl(from var(--brown-color) h s 15%); --brown-color-darker-rgb: 62, 45, 40; --pink-color-lighter: hsl(from var(--pink-color) h s 95%); --pink-color-lighter-contrast-text: var(--pink-color-darker); --pink-color-lighter-hover: hsl(from var(--pink-color) h s 90%); --pink-color-lighter-rgb: 250, 234, 245; --pink-color-light: hsl(from var(--pink-color) h s 85%); --pink-color-light-contrast-text: var(--pink-color-darker); --pink-color-light-hover: hsl(from var(--pink-color) h s 80%); --pink-color-light-rgb: 240, 193, 224; --pink-color: #c53091; --pink-color-contrast-text: #fff; --pink-color-hover: hsl(from var(--pink-color) h s 35%); --pink-color-rgb: 197, 48, 145; --pink-color-dark: hsl(from var(--pink-color) h s 30%); --pink-color-dark-contrast-text: #fff; --pink-color-dark-hover: hsl(from var(--pink-color) h s 25%); --pink-color-dark-rgb: 123, 30, 91; --pink-color-darker: hsl(from var(--pink-color) h s 20%); --pink-color-darker-contrast-text: #fff; --pink-color-darker-hover: hsl(from var(--pink-color) h s 15%); --pink-color-darker-rgb: 82, 20, 60; --purple-color-lighter: hsl(from var(--purple-color) h s 95%); --purple-color-lighter-contrast-text: var(--purple-color-darker); --purple-color-lighter-hover: hsl(from var(--purple-color) h s 90%); --purple-color-lighter-rgb: 234, 236, 248; --purple-color-light: hsl(from var(--purple-color) h s 85%); --purple-color-light-contrast-text: var(--purple-color-darker); --purple-color-light-hover: hsl(from var(--purple-color) h s 80%); --purple-color-light-rgb: 220, 199, 234; --purple-color: #7e3fab; --purple-color-contrast-text: #fff; --purple-color-hover: hsl(from var(--purple-color) h s 35%); --purple-color-rgb: 126, 63, 171; --purple-color-dark: hsl(from var(--purple-color) h s 30%); --purple-color-dark-contrast-text: #fff; --purple-color-dark-hover: hsl(from var(--purple-color) h s 25%); --purple-color-dark-rgb: 82, 41, 112; --purple-color-darker: hsl(from var(--purple-color) h s 20%); --purple-color-darker-contrast-text: #fff; --purple-color-darker-hover: hsl(from var(--purple-color) h s 15%); --purple-color-darker-rgb: 55, 27, 75; --grey-color-lighter: hsl(from var(--grey-color) h s 95%); --grey-color-lighter-contrast-text: var(--grey-color-darker); --grey-color-lighter-hover: hsl(from var(--grey-color) h s 90%); --grey-color-lighter-rgb: 242, 242, 242; --grey-color-light: hsl(from var(--grey-color) h s 85%); --grey-color-light-contrast-text: var(--grey-color-darker); --grey-color-light-hover: hsl(from var(--grey-color) h s 80%); --grey-color-light-rgb: 217, 217, 217; --grey-color: #757575; --grey-color-contrast-text: #fff; --grey-color-hover: hsl(from var(--grey-color) h s 35%); --grey-color-rgb: 117, 117, 117; --grey-color-dark: hsl(from var(--grey-color) h s 30%); --grey-color-dark-contrast-text: #fff; --grey-color-dark-hover: hsl(from var(--grey-color) h s 25%); --grey-color-dark-rgb: 77, 77, 77; --grey-color-darker: hsl(from var(--grey-color) h s 20%); --grey-color-darker-contrast-text: #fff; --grey-color-darker-hover: hsl(from var(--grey-color) h s 15%); --grey-color-darker-rgb: 51, 51, 51; /**/ --white-color: #ffffff; --white-color-contrast-text: #000; --white-color-hover: #f6f6f6; --white-color-rgb: 223,223,223; /**/ --black-color: #000000; --black-color-contrast-text: #fff; --black-color-hover: #292929; --black-color-rgb: 41,41,41; } /* It is important not to put the black links with the gray hover. There has to be contrast. */ body:not(#tinymce):not(.popup) { background: var(--general-bg-color); color: var(--general-text-color); } /* General link color like Bootstrap. You can redefine color of specific zones, but general colors are essential */ a { color: var(--general-link-color); } a:hover { color: var(--general-link-color-hover); } /**/ .text-current { color: currentcolor !important; } /* NOTE: On the lighter you have to be able to write on it without disturbing */ .text-lighter-blue, .text-lighter-blue.info { color: var(--blue-color-lighter) !important; } .text-contrast-lighter-blue { color: var(--blue-color-lighter-contrast-text) !important; } .bg-lighter-blue { background-color: var(--blue-color-lighter) !important; } /**/ .text-light-blue, .text-light-blue.info { color: var(--blue-color-light) !important; } .text-contrast-light-blue { color: var(--blue-color-light-contrast-text) !important; } .bg-light-blue { background-color: var(--blue-color-light) !important; } /**/ .text-blue, .text-blue.info { color: var(--blue-color) !important; } .text-contrast-blue { color: var(--blue-color-contrast-text) !important; } .bg-blue { background-color: var(--blue-color) !important; } /**/ .text-dark-blue, .text-dark-blue.info { color: var(--blue-color-dark) !important; } .text-contrast-dark-blue { color: var(--blue-color-dark-contrast-text) !important; } .bg-dark-blue { background-color: var(--blue-color-dark) !important; } /**/ .text-darker-blue, .text-darker-blue.info { color: var(--blue-color-darker) !important; } .text-contrast-darker-blue { color: var(--blue-color-darker-contrast-text) !important; } .bg-darker-blue { background-color: var(--blue-color-darker) !important; } /**/ .text-lighter-green, .text-lighter-green.info { color: var(--green-color-lighter) !important; } .text-contrast-lighter-green { color: var(--green-color-lighter-contrast-text) !important; } .bg-lighter-green { background-color: var(--green-color-lighter) !important; } /**/ .text-light-green, .text-light-green.info { color: var(--green-color-light) !important; } .text-contrast-light-green { color: var(--green-color-light-contrast-text) !important; } .bg-light-green { background-color: var(--green-color-light) !important; } /**/ .text-green, .text-green.info { color: var(--green-color) !important; } .text-contrast-green { color: var(--green-color-contrast-text) !important; } .bg-green { background-color: var(--green-color) !important; } /**/ .text-dark-green, .text-dark-green.info { color: var(--green-color-dark) !important; } .text-contrast-dark-green { color: var(--green-color-dark-contrast-text) !important; } .bg-dark-green { background-color: var(--green-color-dark) !important; } /**/ .text-darker-green, .text-darker-green.info { color: var(--green-color-darker) !important; } .text-contrast-darker-green { color: var(--green-color-darker-contrast-text) !important; } .bg-darker-green { background-color: var(--green-color-darker) !important; } /**/ .text-lighter-yellow, .text-lighter-yellow.info { color: var(--yellow-color-lighter) !important; } .text-contrast-lighter-yellow { color: var(--yellow-color-lighter-contrast-text) !important; } .bg-lighter-yellow { background-color: var(--yellow-color-lighter) !important; } /**/ .text-light-yellow, .text-light-yellow.info { color: var(--yellow-color-light) !important; } .text-contrast-light-yellow { color: var(--yellow-color-light-contrast-text) !important; } .bg-light-yellow { background-color: var(--yellow-color-light) !important; } /**/ .text-yellow, .text-yellow.info { color: var(--yellow-color) !important; } .text-contrast-yellow { color: var(--yellow-color-contrast-text) !important; } .bg-yellow { background-color: var(--yellow-color) !important; } /**/ .text-dark-yellow, .text-dark-yellow.info { color: var(--yellow-color-dark) !important; } .text-contrast-dark-yellow { color: var(--yellow-color-dark-contrast-text) !important; } .bg-dark-yellow { background-color: var(--yellow-color-dark) !important; } /**/ .text-darker-yellow, .text-darker-yellow.info { color: var(--yellow-color-darker) !important; } .text-contrast-darker-yellow { color: var(--yellow-color-darker-contrast-text) !important; } .bg-darker-yellow { background-color: var(--yellow-color-darker) !important; } /**/ .text-lighter-orange, .text-lighter-orange.info { color: var(--orange-color-lighter) !important; } .text-contrast-lighter-orange { color: var(--orange-color-lighter-contrast-text) !important; } .bg-lighter-orange { background-color: var(--orange-color-lighter) !important; } /**/ .text-light-orange, .text-light-orange.info { color: var(--orange-color-light) !important; } .text-contrast-light-orange { color: var(--orange-color-light-contrast-text) !important; } .bg-light-orange { background-color: var(--orange-color-light) !important; } /**/ .text-orange, .text-orange.info { color: var(--orange-color) !important; } .text-contrast-orange { color: var(--orange-color-contrast-text) !important; } .bg-orange { background-color: var(--orange-color) !important; } /**/ .text-dark-orange, .text-dark-orange.info { color: var(--orange-color-dark) !important; } .text-contrast-dark-orange { color: var(--orange-color-dark-contrast-text) !important; } .bg-dark-orange { background-color: var(--orange-color-dark) !important; } /**/ .text-darker-orange, .text-darker-orange.info { color: var(--orange-color-darker) !important; } .text-contrast-darker-orange { color: var(--orange-color-darker-contrast-text) !important; } .bg-darker-orange { background-color: var(--orange-color-darker) !important; } /**/ .text-lighter-red, .text-lighter-red.info { color: var(--red-color-lighter) !important; } .text-contrast-lighter-red { color: var(--red-color-lighter-contrast-text) !important; } .bg-lighter-red { background-color: var(--red-color-lighter) !important; } /**/ .text-light-red, .text-light-red.info { color: var(--red-color-light) !important; } .text-contrast-light-red { color: var(--red-color-light-contrast-text) !important; } .bg-light-red { background-color: var(--red-color-light) !important; } /**/ .text-red, .text-red.info { color: var(--red-color) !important; } .text-contrast-red { color: var(--red-color-contrast-text) !important; } .bg-red { background-color: var(--red-color) !important; } /**/ .text-dark-red, .text-dark-red.info { color: var(--red-color-dark) !important; } .text-contrast-dark-red { color: var(--red-color-dark-contrast-text) !important; } .bg-dark-red { background-color: var(--red-color-dark) !important; } /**/ .text-darker-red, .text-darker-red.info { color: var(--red-color-darker) !important; } .text-contrast-darker-red { color: var(--red-color-darker-contrast-text) !important; } .bg-darker-red { background-color: var(--red-color-darker) !important; } /**/ .text-lighter-brown, .text-lighter-brown.info { color: var(--brown-color-lighter) !important; } .text-contrast-lighter-brown { color: var(--brown-color-lighter-contrast-text) !important; } .bg-lighter-brown { background-color: var(--brown-color-lighter) !important; } /**/ .text-light-brown, .text-light-brown.info { color: var(--brown-color-light) !important; } .text-contrast-light-brown { color: var(--brown-color-light-contrast-text) !important; } .bg-light-brown { background-color: var(--brown-color-light) !important; } /**/ .text-brown, .text-light-brown.info { color: var(--brown-color) !important; } .text-contrast-brown { color: var(--brown-color-contrast-text) !important; } .bg-brown { background-color: var(--brown-color) !important; } /**/ .text-dark-brown, .text-dark-brown.info { color: var(--brown-color-dark) !important; } .text-contrast-dark-brown { color: var(--brown-color-dark-contrast-text) !important; } .bg-dark-brown { background-color: var(--brown-color-dark) !important; } /**/ .text-darker-brown, .text-darker-brown.info { color: var(--brown-color-darker) !important; } .text-contrast-darker-brown { color: var(--brown-color-darker-contrast-text) !important; } .bg-darker-brown { background-color: var(--brown-color-darker) !important; } /**/ .text-lighter-pink, .text-lighter-pink.info { color: var(--pink-color-lighter) !important; } .text-contrast-lighter-pink { color: var(--pink-color-lighter-contrast-text) !important; } .bg-lighter-pink { background-color: var(--pink-color-lighter) !important; } /**/ .text-light-pink, .text-light-pink.info { color: var(--pink-color-light) !important; } .text-contrast-light-pink { color: var(--pink-color-light-contrast-text) !important; } .bg-light-pink { background-color: var(--pink-color-light) !important; } /**/ .text-pink, .text-pink.info { color: var(--pink-color) !important; } .text-contrast-pink { color: var(--pink-color-contrast-text) !important; } .bg-pink { background-color: var(--pink-color) !important; } /**/ .text-dark-pink, .text-dark-pink.info { color: var(--pink-color-dark) !important; } .text-contrast-dark-pink { color: var(--pink-color-dark-contrast-text) !important; } .bg-dark-pink { background-color: var(--pink-color-dark) !important; } /**/ .text-darker-pink, .text-darker-pink.info { color: var(--pink-color-darker) !important; } .text-contrast-darker-pink { color: var(--pink-color-darker-contrast-text) !important; } .bg-darker-pink { background-color: var(--pink-color-darker) !important; } /**/ .text-lighter-purple, .text-lighter-purple.info { color: var(--purple-color-lighter) !important; } .text-contrast-lighter-purple { color: var(--purple-color-lighter-contrast-text) !important; } .bg-lighter-purple { background-color: var(--purple-color-lighter) !important; } /**/ .text-light-purple, .text-light-purple.info { color: var(--purple-color-light) !important; } .text-contrast-light-purple { color: var(--purple-color-light-contrast-text) !important; } .bg-light-purple { background-color: var(--purple-color-light) !important; } /**/ .text-purple, .text-purple.info { color: var(--purple-color) !important; } .text-contrast-purple { color: var(--purple-color-contrast-text) !important; } .bg-purple { background-color: var(--purple-color) !important; } /**/ .text-dark-purple, .text-dark-purple.info { color: var(--purple-color-dark) !important; } .text-contrast-dark-purple { color: var(--purple-color-dark-contrast-text) !important; } .bg-dark-purple { background-color: var(--purple-color-dark) !important; } /**/ .text-darker-purple, .text-darker-purple.info { color: var(--purple-color-darker) !important; } .text-contrast-darker-purple { color: var(--purple-color-darker-contrast-text) !important; } .bg-darker-purple { background-color: var(--purple-color-darker) !important; } /**/ .text-lighter-grey, .text-lighter-grey.info { color: var(--grey-color-lighter) !important; } .text-contrast-lighter-grey { color: var(--grey-color-lighter-contrast-text) !important; } .bg-lighter-grey { background-color: var(--grey-color-lighter) !important; } /**/ .text-light-grey, .text-light-grey.info { color: var(--grey-color-light) !important; } .text-contrast-light-grey { color: var(--grey-color-light-contrast-text) !important; } .bg-light-grey { background-color: var(--grey-color-light) !important; } /**/ .text-grey, .text-grey.info { color: var(--grey-color) !important; } .text-contrast-grey { color: var(--grey-color-contrast-text) !important; } .bg-grey { background-color: var(--grey-color) !important; } /**/ .text-dark-grey, .text-dark-grey.info { color: var(--grey-color-dark) !important; } .text-contrast-dark-grey { color: var(--grey-color-dark-contrast-text) !important; } .bg-dark-grey { background-color: var(--grey-color-dark) !important; } /**/ .text-darker-grey, .text-darker-grey.info { color: var(--grey-color-darker) !important; } .text-contrast-darker-grey { color: var(--grey-color-darker-contrast-text) !important; } .bg-darker-grey { background-color: var(--grey-color-darker) !important; } /**/ .text-white, .text-white.info { color: var(--white-color) !important; } .text-contrast-white { color: var(--white-color-contrast-text) !important; } .bg-white { background-color: var(--white-color) !important; } .mdi.text-white.text-shadow, .iconify--mdi.text-white.text-shadow { text-shadow: 0px 0px 2px #767676, 0px 0px 2px #767676, 0px 0px 1px #767676; /* Para los iconos se les aplica sombra */ } /**/ .text-black, .text-black.info { color: var(--black-color) !important; } .text-contrast-black { color: var(--black-color-contrast-text) !important; } .bg-black { background-color: var(--black-color) !important; } /* BACKGROUNDS */ /* background primary */ .bg-lighter-primary { background-color: var(--primary-color-lighter) !important; } .bg-light-primary { background-color: var(--primary-color-light) !important; } .bg-primary { background-color: var(--primary-color) !important; } .bg-dark-primary { background-color: var(--primary-color-dark) !important; } .bg-darker-primary { background-color: var(--primary-color-darker) !important; } /**/ .bg-lighter-primary.card-header h1, .bg-lighter-primary.card-header h2, .bg-lighter-primary.card-header h3, .bg-lighter-primary.card-header h4, .bg-lighter-primary.card-header h5, .bg-lighter-primary.card-header h6, .bg-lighter-primary.card-header a, .bg-lighter-primary.card-header small, .bg-lighter-primary.card-header .mdi-chevron-down:before, .bg-lighter-primary.card-footer, .bg-lighter-primary.card-footer a { color: var(--primary-color-lighter-contrast-text); /* Important: Not !important */ } .bg-light-primary.card-header h1, .bg-light-primary.card-header h2, .bg-light-primary.card-header h3, .bg-light-primary.card-header h4, .bg-light-primary.card-header h5, .bg-light-primary.card-header h6, .bg-light-primary.card-header a, .bg-light-primary.card-header small, .bg-light-primary.card-header .mdi-chevron-down:before, .bg-light-primary.card-footer, .bg-light-primary.card-footer a { color: var(--primary-color-light-contrast-text); } .bg-primary.card-header h1, .bg-primary.card-header h2, .bg-primary.card-header h3, .bg-primary.card-header h4, .bg-primary.card-header h5, .bg-primary.card-header h6, .bg-primary.card-header a, .bg-primary.card-header small, .bg-primary.card-header .mdi-chevron-down:before, .bg-primary.card-header .btn-outline-white .mdi:before, .bg-primary.card-header .btn-outline-white .iconify--mdi:before, .bg-primary.card-footer, .bg-primary.card-footer a { color: var(--primary-color-contrast-text); } .bg-dark-primary.card-header h1, .bg-dark-primary.card-header h2, .bg-dark-primary.card-header h3, .bg-dark-primary.card-header h4, .bg-dark-primary.card-header h5, .bg-dark-primary.card-header h6, .bg-dark-primary.card-header a, .bg-dark-primary.card-header small, .bg-dark-primary.card-header .mdi-chevron-down:before, .bg-dark-primary.card-footer, .bg-dark-primary.card-footer a { color: var(--primary-color-dark-contrast-text); } .bg-darker-primary.card-header h1, .bg-darker-primary.card-header h2, .bg-darker-primary.card-header h3, .bg-darker-primary.card-header h4, .bg-darker-primary.card-header h5, .bg-darker-primary.card-header h6, .bg-darker-primary.card-header a, .bg-darker-primary.card-header small, .bg-darker-primary.card-header .mdi-chevron-down:before, .bg-darker-primary.card-footer, .bg-darker-primary.card-footer a { color: var(--primary-color-darker-contrast-text); } /**/ .bg-primary.card-header .btn-outline-white:hover { color: var(--primary-color); } .bg-primary.card-header .btn-outline-white:hover .mdi:before, .bg-primary.card-header .btn-outline-white:hover .iconify--mdi:before { color: var(--primary-color); } /* background secondary */ .bg-lighter-secondary { background-color: var(--secondary-color-lighter) !important; } .bg-light-secondary { background-color: var(--secondary-color-light) !important; } .bg-secondary { background-color: var(--secondary-color) !important; } .bg-dark-secondary { background-color: var(--secondary-color-dark) !important; } .bg-darker-secondary { background-color: var(--secondary-color-darker) !important; } /**/ .bg-lighter-secondary.card-header h1, .bg-lighter-secondary.card-header h2, .bg-lighter-secondary.card-header h3, .bg-lighter-secondary.card-header h4, .bg-lighter-secondary.card-header h5, .bg-lighter-secondary.card-header h6, .bg-lighter-secondary.card-header a, .bg-lighter-secondary.card-header small, .bg-lighter-secondary.card-header .mdi-chevron-down:before, .bg-lighter-secondary.card-footer, .bg-lighter-secondary.card-footer a { color: var(--secondary-color-lighter-contrast-text) !important; } .bg-light-secondary.card-header h1, .bg-light-secondary.card-header h2, .bg-light-secondary.card-header h3, .bg-light-secondary.card-header h4, .bg-light-secondary.card-header h5, .bg-light-secondary.card-header h6, .bg-light-secondary.card-header a, .bg-light-secondary.card-header small, .bg-light-secondary.card-header .mdi-chevron-down:before, .bg-light-secondary.card-footer, .bg-light-secondary.card-footer a { color: var(--secondary-color-light-contrast-text) !important; } .bg-secondary.card-header h1, .bg-secondary.card-header h2, .bg-secondary.card-header h3, .bg-secondary.card-header h4, .bg-secondary.card-header h5, .bg-secondary.card-header h6, .bg-secondary.card-header a, .bg-secondary.card-header small, .bg-secondary.card-header .mdi-chevron-down:before, .bg-secondary.card-header .btn-outline-white .mdi:before, .bg-secondary.card-header .btn-outline-white .iconify--mdi:before, .bg-secondary.card-footer, .bg-secondary.card-footer a { color: var(--secondary-color-contrast-text) !important; } .bg-dark-secondary.card-header h1, .bg-dark-secondary.card-header h2, .bg-dark-secondary.card-header h3, .bg-dark-secondary.card-header h4, .bg-dark-secondary.card-header h5, .bg-dark-secondary.card-header h6, .bg-dark-secondary.card-header a, .bg-dark-secondary.card-header small, .bg-dark-secondary.card-header .mdi-chevron-down:before, .bg-dark-secondary.card-footer, .bg-dark-secondary.card-footer a { color: var(--secondary-color-dark-contrast-text) !important; } .bg-darker-secondary.card-header h1, .bg-darker-secondary.card-header h2, .bg-darker-secondary.card-header h3, .bg-darker-secondary.card-header h4, .bg-darker-secondary.card-header h5, .bg-darker-secondary.card-header h6, .bg-darker-secondary.card-header a, .bg-darker-secondary.card-header small, .bg-darker-secondary.card-header .mdi-chevron-down:before, .bg-darker-secondary.card-footer, .bg-darker-secondary.card-footer a { color: var(--secondary-color-darker-contrast-text) !important; } /**/ .bg-secondary.card-header .btn-outline-white:hover { color: var(--secondary-color); } .bg-secondary.card-header .btn-outline-white:hover .mdi:before, .bg-secondary.card-header .btn-outline-white:hover .iconify--mdi:before { color: var(--secondary-color); } /* background tertiary */ .bg-lighter-tertiary { background-color: var(--tertiary-color-lighter) !important; } .bg-light-tertiary { background-color: var(--tertiary-color-light) !important; } .bg-tertiary { background-color: var(--tertiary-color) !important; } .bg-dark-tertiary { background-color: var(--tertiary-color-dark) !important; } .bg-darker-tertiary { background-color: var(--tertiary-color-darker) !important; } /**/ .bg-lighter-tertiary.card-header h1, .bg-lighter-tertiary.card-header h2, .bg-lighter-tertiary.card-header h3, .bg-lighter-tertiary.card-header h4, .bg-lighter-tertiary.card-header h5, .bg-lighter-tertiary.card-header h6, .bg-lighter-tertiary.card-header a, .bg-lighter-tertiary.card-header small, .bg-lighter-tertiary.card-header .mdi-chevron-down:before, .bg-lighter-tertiary.card-footer, .bg-lighter-tertiary.card-footer a { color: var(--tertiary-color-lighter-contrast-text) !important; } .bg-light-tertiary.card-header h1, .bg-light-tertiary.card-header h2, .bg-light-tertiary.card-header h3, .bg-light-tertiary.card-header h4, .bg-light-tertiary.card-header h5, .bg-light-tertiary.card-header h6, .bg-light-tertiary.card-header a, .bg-light-tertiary.card-header small, .bg-light-tertiary.card-header .mdi-chevron-down:before, .bg-light-tertiary.card-footer, .bg-light-tertiary.card-footer a { color: var(--tertiary-color-light-contrast-text) !important; } .bg-tertiary.card-header h1, .bg-tertiary.card-header h2, .bg-tertiary.card-header h3, .bg-tertiary.card-header h4, .bg-tertiary.card-header h5, .bg-tertiary.card-header h6, .bg-tertiary.card-header a, .bg-tertiary.card-header small, .bg-tertiary.card-header .mdi-chevron-down:before, .bg-tertiary.card-header .btn-outline-white .mdi:before, .bg-tertiary.card-header .btn-outline-white .iconify--mdi:before, .bg-tertiary.card-footer, .bg-tertiary.card-footer a { color: var(--tertiary-color-contrast-text) !important; } .bg-dark-tertiary.card-header h1, .bg-dark-tertiary.card-header h2, .bg-dark-tertiary.card-header h3, .bg-dark-tertiary.card-header h4, .bg-dark-tertiary.card-header h5, .bg-dark-tertiary.card-header h6, .bg-dark-tertiary.card-header a, .bg-dark-tertiary.card-header small, .bg-dark-tertiary.card-header .mdi-chevron-down:before, .bg-dark-tertiary.card-footer, .bg-dark-tertiary.card-footer a { color: var(--tertiary-color-dark-contrast-text) !important; } .bg-darker-tertiary.card-header h1, .bg-darker-tertiary.card-header h2, .bg-darker-tertiary.card-header h3, .bg-darker-tertiary.card-header h4, .bg-darker-tertiary.card-header h5, .bg-darker-tertiary.card-header h6, .bg-darker-tertiary.card-header a, .bg-darker-tertiary.card-header small, .bg-darker-tertiary.card-header .mdi-chevron-down:before, .bg-darker-tertiary.card-footer, .bg-darker-tertiary.card-footer a { color: var(--tertiary-color-darker-contrast-text) !important; } /**/ .bg-tertiary.card-header .btn-outline-white:hover { color: var(--tertiary-color); } .bg-tertiary.card-header .btn-outline-white:hover .mdi:before, .bg-tertiary.card-header .btn-outline-white:hover .iconify--mdi:before { color: var(--tertiary-color); } /* Color header card */ .card .card-header.border-primary .mdi:before, .card .card-header.border-primary .iconify--mdi:before, .card .card-header.border-primary > h3 { color: var(--primary-color); } .card .card-header.border-secondary .mdi:before, .card .card-header.border-secondary .iconify--mdi:before, .card .card-header.border-secondary > h3 { color: var(--secondary-color); } .card .card-header.border-tertiary .mdi:before, .card .card-header.border-tertiary .iconify--mdi:before, .card .card-header.border-tertiary > h3 { color: var(--tertiary-color); } /**/ /* TEXTS */ /* Text primary */ .text-lighter-primary { color: var(--primary-color-lighter) !important; } .text-contrast-lighter-primary { color: var(--primary-color-lighter-contrast-text) !important; } a.text-lighter-primary:hover, a.text-lighter-primary:focus { color: var(--primary-color-lighter-hover) !important; } .text-light-primary { color: var(--primary-color-light) !important; } .text-contrast-light-primary { color: var(--primary-color-light-contrast-text) !important; } a.text-light-primary:hover, a.text-light-primary:focus { color: var(--primary-color-light-hover) !important; } .text-primary { color: var(--primary-color) !important; } .text-contrast-primary { color: var(--primary-color-contrast-text) !important; } a.text-primary:hover, a.text-primary:focus { color: var(--primary-color-hover) !important; } .text-dark-primary { color: var(--primary-color-dark) !important; } .text-contrast-dark-primary { color: var(--primary-color-dark-contrast-text) !important; } a.text-dark-primary:hover, a.text-dark-primary:focus { color: var(--primary-color-dark-hover) !important; } .text-darker-primary { color: var(--primary-color-darker) !important; } .text-contrast-darker-primary { color: var(--primary-color-darker-contrast-text) !important; } .text-darker-primary:hover, .text-darker-primary:focus { color: var(--primary-color-darker-hover) !important; } .text-primary h1, .text-primary h2, .text-primary h3, .text-primary h4, .text-primary h5, .text-primary h6, .text-primary a, .text-primary .mdi, .text-primary .mdi:before, .text-primary .iconify--mdi, .text-primary .iconify--mdi:before { color: var(--primary-color) !important; } /* Text secondary */ .text-lighter-secondary { color: var(--secondary-color-lighter) !important; } .text-contrast-lighter-secondary { color: var(--secondary-color-lighter-contrast-text) !important; } a.text-lighter-secondary:hover, a.text-lighter-secondary:focus { color: var(--secondary-color-lighter-hover) !important; } .text-light-secondary { color: var(--secondary-color-light) !important; } .text-contrast-light-secondary { color: var(--secondary-color-light-contrast-text) !important; } a.text-light-secondary:hover, a.text-light-secondary:focus { color: var(--secondary-color-light-hover) !important; } .text-secondary { color: var(--secondary-color) !important; } .text-contrast-secondary { color: var(--secondary-color-contrast-text) !important; } a.text-secondary:hover, a.text-secondary:focus { color: var(--secondary-color-hover) !important; } .text-dark-secondary { color: var(--secondary-color-dark) !important; } .text-contrast-dark-secondary { color: var(--secondary-color-dark-contrast-text) !important; } a.text-dark-secondary:hover, a.text-dark-secondary:focus { color: var(--secondary-color-dark-hover) !important; } .text-darker-secondary { color: var(--secondary-color-darker) !important; } .text-contrast-darker-secondary { color: var(--secondary-color-darker-contrast-text) !important; } a.text-darker-secondary:hover, a.text-darker-secondary:focus { color: var(--secondary-color-darker-hover) !important; } .text-secondary h1, .text-secondary h2, .text-secondary h3, .text-secondary h4, .text-secondary h5, .text-secondary h6, .text-secondary a, .text-secondary .mdi, .text-secondary .mdi:before, .text-secondary .iconify--mdi, .text-secondary .iconify--mdi:before { color: var(--secondary-color) !important; } /* Text tertiary */ .text-lighter-tertiary { color: var(--tertiary-color-lighter) !important; } .text-contrast-lighter-tertiary { color: var(--tertiary-color-lighter-contrast-text) !important; } a.text-lighter-tertiary:hover, a.text-lighter-tertiary:focus { color: var(--tertiary-color-lighter-hover) !important; } .text-light-tertiary { color: var(--tertiary-color-light) !important; } .text-contrast-light-tertiary { color: var(--tertiary-color-light-contrast-text) !important; } a.text-light-tertiary:hover, a.text-light-tertiary:focus { color: var(--tertiary-color-light-hover) !important; } .text-tertiary { color: var(--tertiary-color) !important; } .text-contrast-tertiary { color: var(--tertiary-color-contrast-text) !important; } a.text-tertiary:hover, a.text-tertiary:focus { color: var(--tertiary-color-hover) !important; } .text-dark-tertiary { color: var(--tertiary-color-dark) !important; } .text-contrast-dark-tertiary { color: var(--tertiary-color-dark-contrast-text) !important; } a.text-dark-tertiary:hover, a.text-dark-tertiary:focus { color: var(--tertiary-color-dark-hover) !important; } .text-darker-tertiary { color: var(--tertiary-color-darker) !important; } .text-contrast-darker-tertiary { color: var(--tertiary-color-darker-contrast-text) !important; } a.text-darker-tertiary:hover, a.text-darker-tertiary:focus { color: var(--tertiary-color-darker-hover) !important; } .text-tertiary h1, .text-tertiary h2, .text-tertiary h3, .text-tertiary h4, .text-tertiary h5, .text-tertiary h6, .text-tertiary a, .text-tertiary .mdi, .text-tertiary .mdi:before .text-tertiary .iconify--mdi, .text-tertiary .iconify--mdi:before { color: var(--tertiary-color) !important; } /**/ .text-bg-primary { background-color: var(--primary-color) !important; color: var(--primary-color-contrast-text) !important; } .text-bg-secondary { background-color: var(--secondary-color) !important; color: var(--secondary-color-contrast-text) !important; } .text-bg-tertiary { background-color: var(--tertiary-color) !important; color: var(--tertiary-color-contrast-text) !important; } /**/ .to-secondary { --primary-color-lighter: var(--secondary-color-lighter); --primary-color-lighter-contrast-text: var(--secondary-color-lighter-contrast-text); --primary-color-light: var(--secondary-color-light); --primary-color-light-contrast-text: var(--secondary-color-light-contrast-text); --primary-color: var(--secondary-color); --primary-color-contrast-text: var(--secondary-color-contrast-text); --primary-color-hue: var(--secondary-color-hue); --primary-color-saturation: var(--secondary-color-saturation); --primary-color-rgb: var(--secondary-color-rgb); --primary-color-hover: var(--secondary-color-hover); --primary-color-hover-contrast-text: var(--secondary-color-hover-contrast-text); --primary-color-hover-rgb: var(--secondary-color-hover-rgb); --primary-color-dark: var(--secondary-color-dark); --primary-color-dark-contrast-text: var(--secondary-color-dark-contrast-text); --primary-color-darker: var(--secondary-color-darker); --primary-color-darker-contrast-text: var(--secondary-color-darker-contrast-text); } .to-tertiary { --primary-color-lighter: var(--tertiary-color-lighter); --primary-color-lighter-contrast-text: var(--tertiary-color-lighter-contrast-text); --primary-color-light: var(--tertiary-color-light); --primary-color-light-contrast-text: var(--tertiary-color-light-contrast-text); --primary-color: var(--tertiary-color); --primary-color-contrast-text: var(--tertiary-color-contrast-text); --primary-color-hue: var(--tertiary-color-hue); --primary-color-saturation: var(--tertiary-color-saturation); --primary-color-rgb: var(--tertiary-color-rgb); --primary-color-hover: var(--tertiary-color-hover); --primary-color-hover-contrast-text: var(--tertiary-color-hover-contrast-text); --primary-color-hover-rgb: var(--tertiary-color-hover-rgb); --primary-color-dark: var(--tertiary-color-dark); --primary-color-dark-contrast-text: var(--tertiary-color-dark-contrast-text); --primary-color-darker: var(--tertiary-color-darker); --primary-color-darker-contrast-text: var(--tertiary-color-darker-contrast-text); } /* Links */ .link-primary { color: var(--primary-color) !important; } .link-primary:focus, .link-primary:hover { color: var(--primary-color-hover) !important; } .link-secondary { color: var(--secondary-color) !important; } .link-secondary:focus, .link-secondary:hover { color: var(--secondary-color-hover) !important; } .link-tertiary { color: var(--tertiary-color) !important; } .link-tertiary:focus, .link-tertiary:hover { color: var(--tertiary-color-hover) !important; } .status0 { background-color: #efefef; color: #6a6a6a; border: 1px solid #cbcbcb; padding: 3px 10px 3px 0 !important; margin: 0 20px 0 0; } .status0:before { font: 17px "Material Design Icons"; content: "\f02d7"; float: left; margin: 2px 5px 0 10px; } .status1 { background-color: #e0f2cb; color: #4b6d21; border: 1px solid #ccebac; padding: 3px 10px 3px 0 !important; margin: 0 20px 0 0; } .status1:before { font: 17px "Material Design Icons"; content: "\f0133"; float: left; margin: 2px 5px 0 10px; } .status2 { background-color: #fdd3c7; color: #a22525; border: 1px solid #efb6a7; padding: 3px 10px 3px 0 !important; margin: 0 20px 0 0; } .status2:before { font: 17px "Material Design Icons"; content: "\f0028"; float: left; margin: 2px 5px 0 10px; } .status3 { background-color: #fffccc; color: #4d4b42; border: 1px solid #f8e3ac; padding: 3px 10px 3px 0 !important; margin: 0 20px 0 0; } .status3:before { font: 17px "Material Design Icons"; content: "\f0376"; float: left; margin: 2px 5px 0 10px; } .data_validation.status0 { background-color: #d0eefc; color: #17485e; border: 1px solid #a3cbdc; padding: 3px 10px 3px 0 !important; margin: 0 20px 0 0; } .data_validation.status0:before { font: 17px "Material Design Icons"; content: "\f02d7"; float: left; margin: 2px 5px 0 10px; } .data_validation.status1 { background-color: #e0f2cb; color: #4b6d21; border: 1px solid #ccebac; padding: 3px 0 3px 0 !important; margin: 0 20px 0 0; } .data_validation.status1:before { font: 17px "Material Design Icons"; content: "\f0133"; float: left; margin: 2px 5px 0 10px; } .data_validation.status2 { background-color: #fdd3c7; color: #a22525; border: 1px solid #efb6a7; padding: 3px 0 3px 0 !important; margin: 0 20px 0 0; } .data_validation.status2:before { font: 17px "Material Design Icons"; content: "\f0028"; float: left; margin: 2px 5px 0 10px; } .data_validation.status3 { background-color: #efefef; color: #6a6a6a; border: 1px solid #cbcbcb; padding: 3px 0 3px 0 !important; margin: 0 20px 0 0; } .data_validation.status3:before { font: 17px "Material Design Icons"; content: "\f0376"; float: left; margin: 2px 5px 0 10px; } .status0, .status1, .status2, .status3 { margin: 0px 10px 10px 0 !important; width: 107px; } .status0.hover:hover { background: #e2e2e2; } .status1.hover:hover { background: #ccdeb6; } .status2.hover:hover { background: #eebeb0; } .status3.hover:hover { background: #efecc4; } .data_validation.status0.hover:hover { background: #c0e3f3; } .data_validation.status1.hover:hover { background: #ccdeb6; } .data_validation.status2.hover:hover { background: #eebeb0; } .data_validation.status3.hover:hover { background: #e2e2e2; } .divider { display: flex; flex-direction: row; align-items: center; align-self: stretch; margin-top: 1rem; margin-bottom: 1rem; height: 1rem; white-space: nowrap; } .divider:before, .divider:after { height: 0.125rem; width: 100%; flex-grow: 1; content: ""; background-color: rgba(69, 69, 69, 0.1); } .divider-start:before { display: none; } .divider-end:after { display: none; } .divider-horizontal { margin-left: 1rem; margin-right: 1rem; margin-top: 0; margin-bottom: 0; height: auto; width: 1rem; } .divider-vertical { margin-left: 0; margin-right: 0; margin-top: 1rem; margin-bottom: 1rem; height: 1rem; width: auto; } .divider-horizontal { flex-direction: column; } .divider-horizontal:before { height: 100%; width: 0.125rem; } .divider-horizontal:after { height: 100%; width: 0.125rem; } .divider-vertical { flex-direction: row; } .divider-vertical:before { height: 0.125rem; width: 100%; } .divider-vertical:after { height: 0.125rem; width: 100%; } .divider:not(:empty) { gap: 1rem; } .divider-primary:before, .divider-primary:after { background-color: var(--primary-color); } .divider-secondary:before, .divider-secondary:after { background-color: var(--secondary-color); } .divider-success:before, .divider-success:after { background-color: #10b981; } .divider-danger:before, .divider-danger:after { background-color: #ef4444; } .divider-warning:before, .divider-warning:after { background-color: #f59e0b; } .divider-info:before, .divider-info:after { background-color: #4f73c2; } div.error-crm h3 { font-size: 2rem; text-align: center; color: var(--primary-color); } div.error-crm p { font-size: 1rem; text-align: center; color: var(--primary-color); margin: 0 auto; } div.error-crm.desc { box-shadow: none; height: auto; border: 0; margin: 30px auto; background: none; } div.error-crm.desc p { color: #666; font-size: 1rem; width: 100%; } div.error-crm.desc p.code { font-size: 1rem; font-weight: bold; } /* Error outside CRM */ /* Example: http://localhost:8080/s/asda */ body.full-error { background: #fff; align-items: center; padding: 2.5rem; } body.full-error .error-container { position: relative; top: 50%; transform: translateY(-50%); } @media (min-width: 992px) { div.error-crm { display: block; width: 580px; height: 580px; margin: 1em auto; border-radius: 99em; border: 7px solid #fff; box-shadow: 11px 10px 11px rgba(0, 0, 0, 0.15); position: relative; background: url("../../images/error/error_sdw.png") 100% 100% no-repeat, linear-gradient(var(--primary-color), var(--primary-color-darker)); box-sizing: content-box; } div.error-crm p { font-size: 1rem; text-align: center; color: #fff; width: 390px; margin: 0 auto; } div.error-crm h3 { font-size: 2rem; text-align: center; color: #fff !important; margin: 400px auto 0; width: 390px; } div.error-crm.evillapti:before, div.error-crm.ko:before, div.error-crm.lovelapti:before, div.error-crm.ohno:before, div.error-crm.sad:before, div.error-crm.verysad:before, div.error-crm.what:before, div.error-crm.oh:before, div.error-crm.happy:before, div.error-crm.default:before { content: ""; position: absolute; width: 580px; height: 580px; } div.error-crm.evillapti:before { background: url("../../images/error/error_evillapti.png") center 37% no-repeat; } div.error-crm.ko:before { background: url("../../images/error/error_ko.png") center 37% no-repeat; } div.error-crm.lovelapti:before { background: url("../../images/error/error_lovelapti.png") center 37% no-repeat; } div.error-crm.ohno:before { background: url("../../images/error/error_ohno.png") center 37% no-repeat; } div.error-crm.sad:before { background: url("../../images/error/error_sad.png") center 37% no-repeat; } div.error-crm.verysad:before { background: url("../../images/error/error_verysad.png") center 37% no-repeat; } div.error-crm.what:before { background: url("../../images/error/error_what.png") center 37% no-repeat; } div.error-crm.oh:before { background: url("../../images/error/error_oh.png") center 37% no-repeat; } div.error-crm.happy:before { background: url("../../images/error/error_happy.png") center 37% no-repeat; } div.error-crm.default:before { background: url("../../images/error/error_default.png") center 37% no-repeat; } body.full-error { padding: 0; } } /* Overwritting default css components */ /*-------------------------------------*/ /* Send files template */ #fileListPanel .drop-zone-file-container { box-shadow: none !important; border: 1px dashed #ccc !important; margin-top: 1rem !important; margin-bottom: 2rem !important; } #fileListPanel .drop-zone-file-container .row { flex-direction: column !important; justify-content: center !important; align-items: center !important; } #fileListPanel .drop-zone-file-container .col-auto { line-height: 3rem !important; margin-bottom: 1rem !important; } #fileListPanel .drop-zone-file-container .mdi-cloud-upload-outline { font-size: 50px !important; } html { font-size: var(--font-size); } body, textarea, input, button, select { font-size: var(--font-size); font-family: var(--font-general); } body { font-weight: var(--font-general-weight); } option { /* Option no lee las google font en FF, solo las lee si están instaladas en el sistema operativo. Hay que poner más opciones. */ font-family: var(--font-general), Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif; } .fw-bold, b, strong { font-weight: bold !important; } /* .fw-100 to 900 */ .fw-100 { font-weight: 100; } .fw-200 { font-weight: 200; } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } .fw-900 { font-weight: 900; } /* Bootstrap 4 font size classes generated for each breakpoint. */ /* https://github.com/ivandokov/bootstrap-font-sizes */ /* If possible, it is better to use: fs-1, fs-2... */ .font-size-1 { font-size: 1px !important; } .font-size-2 { font-size: 2px !important; } .font-size-3 { font-size: 3px !important; } .font-size-4 { font-size: 4px !important; } .font-size-5 { font-size: 5px !important; } .font-size-6 { font-size: 6px !important; } .font-size-7 { font-size: 7px !important; } .font-size-8 { font-size: 8px !important; } .font-size-9 { font-size: 9px !important; } .font-size-10 { font-size: 10px !important; } .font-size-11 { font-size: 11px !important; } .font-size-12 { font-size: 12px !important; } .font-size-13 { font-size: 13px !important; } .font-size-14 { font-size: 14px !important; } .font-size-15 { font-size: 15px !important; } .font-size-16 { font-size: 16px !important; } .font-size-17 { font-size: 17px !important; } .font-size-18 { font-size: 18px !important; } .font-size-19 { font-size: 19px !important; } .font-size-20 { font-size: 20px !important; } .font-size-21 { font-size: 21px !important; } .font-size-22 { font-size: 22px !important; } .font-size-23 { font-size: 23px !important; } .font-size-24 { font-size: 24px !important; } .font-size-25 { font-size: 25px !important; } .font-size-26 { font-size: 26px !important; } .font-size-27 { font-size: 27px !important; } .font-size-28 { font-size: 28px !important; } .font-size-29 { font-size: 29px !important; } .font-size-30 { font-size: 30px !important; } .font-size-31 { font-size: 31px !important; } .font-size-32 { font-size: 32px !important; } .font-size-33 { font-size: 33px !important; } .font-size-34 { font-size: 34px !important; } .font-size-35 { font-size: 35px !important; } .font-size-36 { font-size: 36px !important; } .font-size-37 { font-size: 37px !important; } .font-size-38 { font-size: 38px !important; } .font-size-39 { font-size: 39px !important; } .font-size-40 { font-size: 40px !important; } .font-size-41 { font-size: 41px !important; } .font-size-42 { font-size: 42px !important; } .font-size-43 { font-size: 43px !important; } .font-size-44 { font-size: 44px !important; } .font-size-45 { font-size: 45px !important; } .font-size-46 { font-size: 46px !important; } .font-size-47 { font-size: 47px !important; } .font-size-48 { font-size: 48px !important; } .font-size-49 { font-size: 49px !important; } .font-size-50 { font-size: 50px !important; } .font-size-51 { font-size: 51px !important; } .font-size-52 { font-size: 52px !important; } .font-size-53 { font-size: 53px !important; } .font-size-54 { font-size: 54px !important; } .font-size-55 { font-size: 55px !important; } .font-size-56 { font-size: 56px !important; } .font-size-57 { font-size: 57px !important; } .font-size-58 { font-size: 58px !important; } .font-size-59 { font-size: 59px !important; } .font-size-60 { font-size: 60px !important; } .font-size-61 { font-size: 61px !important; } .font-size-62 { font-size: 62px !important; } .font-size-63 { font-size: 63px !important; } .font-size-64 { font-size: 64px !important; } .font-size-65 { font-size: 65px !important; } .font-size-66 { font-size: 66px !important; } .font-size-67 { font-size: 67px !important; } .font-size-68 { font-size: 68px !important; } .font-size-69 { font-size: 69px !important; } .font-size-70 { font-size: 70px !important; } .font-size-71 { font-size: 71px !important; } .font-size-72 { font-size: 72px !important; } .font-size-73 { font-size: 73px !important; } .font-size-74 { font-size: 74px !important; } .font-size-75 { font-size: 75px !important; } .font-size-76 { font-size: 76px !important; } .font-size-77 { font-size: 77px !important; } .font-size-78 { font-size: 78px !important; } .font-size-79 { font-size: 79px !important; } .font-size-80 { font-size: 80px !important; } .font-size-81 { font-size: 81px !important; } .font-size-82 { font-size: 82px !important; } .font-size-83 { font-size: 83px !important; } .font-size-84 { font-size: 84px !important; } .font-size-85 { font-size: 85px !important; } .font-size-86 { font-size: 86px !important; } .font-size-87 { font-size: 87px !important; } .font-size-88 { font-size: 88px !important; } .font-size-89 { font-size: 89px !important; } .font-size-90 { font-size: 90px !important; } .font-size-91 { font-size: 91px !important; } .font-size-92 { font-size: 92px !important; } .font-size-93 { font-size: 93px !important; } .font-size-94 { font-size: 94px !important; } .font-size-95 { font-size: 95px !important; } .font-size-96 { font-size: 96px !important; } .font-size-97 { font-size: 97px !important; } .font-size-98 { font-size: 98px !important; } .font-size-99 { font-size: 99px !important; } .font-size-100 { font-size: 100px !important; } @media (min-width: 576px) { .font-size-sm-1 { font-size: 1px !important; } .font-size-sm-2 { font-size: 2px !important; } .font-size-sm-3 { font-size: 3px !important; } .font-size-sm-4 { font-size: 4px !important; } .font-size-sm-5 { font-size: 5px !important; } .font-size-sm-6 { font-size: 6px !important; } .font-size-sm-7 { font-size: 7px !important; } .font-size-sm-8 { font-size: 8px !important; } .font-size-sm-9 { font-size: 9px !important; } .font-size-sm-10 { font-size: 10px !important; } .font-size-sm-11 { font-size: 11px !important; } .font-size-sm-12 { font-size: 12px !important; } .font-size-sm-13 { font-size: 13px !important; } .font-size-sm-14 { font-size: 14px !important; } .font-size-sm-15 { font-size: 15px !important; } .font-size-sm-16 { font-size: 16px !important; } .font-size-sm-17 { font-size: 17px !important; } .font-size-sm-18 { font-size: 18px !important; } .font-size-sm-19 { font-size: 19px !important; } .font-size-sm-20 { font-size: 20px !important; } .font-size-sm-21 { font-size: 21px !important; } .font-size-sm-22 { font-size: 22px !important; } .font-size-sm-23 { font-size: 23px !important; } .font-size-sm-24 { font-size: 24px !important; } .font-size-sm-25 { font-size: 25px !important; } .font-size-sm-26 { font-size: 26px !important; } .font-size-sm-27 { font-size: 27px !important; } .font-size-sm-28 { font-size: 28px !important; } .font-size-sm-29 { font-size: 29px !important; } .font-size-sm-30 { font-size: 30px !important; } .font-size-sm-31 { font-size: 31px !important; } .font-size-sm-32 { font-size: 32px !important; } .font-size-sm-33 { font-size: 33px !important; } .font-size-sm-34 { font-size: 34px !important; } .font-size-sm-35 { font-size: 35px !important; } .font-size-sm-36 { font-size: 36px !important; } .font-size-sm-37 { font-size: 37px !important; } .font-size-sm-38 { font-size: 38px !important; } .font-size-sm-39 { font-size: 39px !important; } .font-size-sm-40 { font-size: 40px !important; } .font-size-sm-41 { font-size: 41px !important; } .font-size-sm-42 { font-size: 42px !important; } .font-size-sm-43 { font-size: 43px !important; } .font-size-sm-44 { font-size: 44px !important; } .font-size-sm-45 { font-size: 45px !important; } .font-size-sm-46 { font-size: 46px !important; } .font-size-sm-47 { font-size: 47px !important; } .font-size-sm-48 { font-size: 48px !important; } .font-size-sm-49 { font-size: 49px !important; } .font-size-sm-50 { font-size: 50px !important; } .font-size-sm-51 { font-size: 51px !important; } .font-size-sm-52 { font-size: 52px !important; } .font-size-sm-53 { font-size: 53px !important; } .font-size-sm-54 { font-size: 54px !important; } .font-size-sm-55 { font-size: 55px !important; } .font-size-sm-56 { font-size: 56px !important; } .font-size-sm-57 { font-size: 57px !important; } .font-size-sm-58 { font-size: 58px !important; } .font-size-sm-59 { font-size: 59px !important; } .font-size-sm-60 { font-size: 60px !important; } .font-size-sm-61 { font-size: 61px !important; } .font-size-sm-62 { font-size: 62px !important; } .font-size-sm-63 { font-size: 63px !important; } .font-size-sm-64 { font-size: 64px !important; } .font-size-sm-65 { font-size: 65px !important; } .font-size-sm-66 { font-size: 66px !important; } .font-size-sm-67 { font-size: 67px !important; } .font-size-sm-68 { font-size: 68px !important; } .font-size-sm-69 { font-size: 69px !important; } .font-size-sm-70 { font-size: 70px !important; } .font-size-sm-71 { font-size: 71px !important; } .font-size-sm-72 { font-size: 72px !important; } .font-size-sm-73 { font-size: 73px !important; } .font-size-sm-74 { font-size: 74px !important; } .font-size-sm-75 { font-size: 75px !important; } .font-size-sm-76 { font-size: 76px !important; } .font-size-sm-77 { font-size: 77px !important; } .font-size-sm-78 { font-size: 78px !important; } .font-size-sm-79 { font-size: 79px !important; } .font-size-sm-80 { font-size: 80px !important; } .font-size-sm-81 { font-size: 81px !important; } .font-size-sm-82 { font-size: 82px !important; } .font-size-sm-83 { font-size: 83px !important; } .font-size-sm-84 { font-size: 84px !important; } .font-size-sm-85 { font-size: 85px !important; } .font-size-sm-86 { font-size: 86px !important; } .font-size-sm-87 { font-size: 87px !important; } .font-size-sm-88 { font-size: 88px !important; } .font-size-sm-89 { font-size: 89px !important; } .font-size-sm-90 { font-size: 90px !important; } .font-size-sm-91 { font-size: 91px !important; } .font-size-sm-92 { font-size: 92px !important; } .font-size-sm-93 { font-size: 93px !important; } .font-size-sm-94 { font-size: 94px !important; } .font-size-sm-95 { font-size: 95px !important; } .font-size-sm-96 { font-size: 96px !important; } .font-size-sm-97 { font-size: 97px !important; } .font-size-sm-98 { font-size: 98px !important; } .font-size-sm-99 { font-size: 99px !important; } .font-size-sm-100 { font-size: 100px !important; } } @media (min-width: 768px) { .font-size-md-1 { font-size: 1px !important; } .font-size-md-2 { font-size: 2px !important; } .font-size-md-3 { font-size: 3px !important; } .font-size-md-4 { font-size: 4px !important; } .font-size-md-5 { font-size: 5px !important; } .font-size-md-6 { font-size: 6px !important; } .font-size-md-7 { font-size: 7px !important; } .font-size-md-8 { font-size: 8px !important; } .font-size-md-9 { font-size: 9px !important; } .font-size-md-10 { font-size: 10px !important; } .font-size-md-11 { font-size: 11px !important; } .font-size-md-12 { font-size: 12px !important; } .font-size-md-13 { font-size: 13px !important; } .font-size-md-14 { font-size: 14px !important; } .font-size-md-15 { font-size: 15px !important; } .font-size-md-16 { font-size: 16px !important; } .font-size-md-17 { font-size: 17px !important; } .font-size-md-18 { font-size: 18px !important; } .font-size-md-19 { font-size: 19px !important; } .font-size-md-20 { font-size: 20px !important; } .font-size-md-21 { font-size: 21px !important; } .font-size-md-22 { font-size: 22px !important; } .font-size-md-23 { font-size: 23px !important; } .font-size-md-24 { font-size: 24px !important; } .font-size-md-25 { font-size: 25px !important; } .font-size-md-26 { font-size: 26px !important; } .font-size-md-27 { font-size: 27px !important; } .font-size-md-28 { font-size: 28px !important; } .font-size-md-29 { font-size: 29px !important; } .font-size-md-30 { font-size: 30px !important; } .font-size-md-31 { font-size: 31px !important; } .font-size-md-32 { font-size: 32px !important; } .font-size-md-33 { font-size: 33px !important; } .font-size-md-34 { font-size: 34px !important; } .font-size-md-35 { font-size: 35px !important; } .font-size-md-36 { font-size: 36px !important; } .font-size-md-37 { font-size: 37px !important; } .font-size-md-38 { font-size: 38px !important; } .font-size-md-39 { font-size: 39px !important; } .font-size-md-40 { font-size: 40px !important; } .font-size-md-41 { font-size: 41px !important; } .font-size-md-42 { font-size: 42px !important; } .font-size-md-43 { font-size: 43px !important; } .font-size-md-44 { font-size: 44px !important; } .font-size-md-45 { font-size: 45px !important; } .font-size-md-46 { font-size: 46px !important; } .font-size-md-47 { font-size: 47px !important; } .font-size-md-48 { font-size: 48px !important; } .font-size-md-49 { font-size: 49px !important; } .font-size-md-50 { font-size: 50px !important; } .font-size-md-51 { font-size: 51px !important; } .font-size-md-52 { font-size: 52px !important; } .font-size-md-53 { font-size: 53px !important; } .font-size-md-54 { font-size: 54px !important; } .font-size-md-55 { font-size: 55px !important; } .font-size-md-56 { font-size: 56px !important; } .font-size-md-57 { font-size: 57px !important; } .font-size-md-58 { font-size: 58px !important; } .font-size-md-59 { font-size: 59px !important; } .font-size-md-60 { font-size: 60px !important; } .font-size-md-61 { font-size: 61px !important; } .font-size-md-62 { font-size: 62px !important; } .font-size-md-63 { font-size: 63px !important; } .font-size-md-64 { font-size: 64px !important; } .font-size-md-65 { font-size: 65px !important; } .font-size-md-66 { font-size: 66px !important; } .font-size-md-67 { font-size: 67px !important; } .font-size-md-68 { font-size: 68px !important; } .font-size-md-69 { font-size: 69px !important; } .font-size-md-70 { font-size: 70px !important; } .font-size-md-71 { font-size: 71px !important; } .font-size-md-72 { font-size: 72px !important; } .font-size-md-73 { font-size: 73px !important; } .font-size-md-74 { font-size: 74px !important; } .font-size-md-75 { font-size: 75px !important; } .font-size-md-76 { font-size: 76px !important; } .font-size-md-77 { font-size: 77px !important; } .font-size-md-78 { font-size: 78px !important; } .font-size-md-79 { font-size: 79px !important; } .font-size-md-80 { font-size: 80px !important; } .font-size-md-81 { font-size: 81px !important; } .font-size-md-82 { font-size: 82px !important; } .font-size-md-83 { font-size: 83px !important; } .font-size-md-84 { font-size: 84px !important; } .font-size-md-85 { font-size: 85px !important; } .font-size-md-86 { font-size: 86px !important; } .font-size-md-87 { font-size: 87px !important; } .font-size-md-88 { font-size: 88px !important; } .font-size-md-89 { font-size: 89px !important; } .font-size-md-90 { font-size: 90px !important; } .font-size-md-91 { font-size: 91px !important; } .font-size-md-92 { font-size: 92px !important; } .font-size-md-93 { font-size: 93px !important; } .font-size-md-94 { font-size: 94px !important; } .font-size-md-95 { font-size: 95px !important; } .font-size-md-96 { font-size: 96px !important; } .font-size-md-97 { font-size: 97px !important; } .font-size-md-98 { font-size: 98px !important; } .font-size-md-99 { font-size: 99px !important; } .font-size-md-100 { font-size: 100px !important; } } @media (min-width: 992px) { .font-size-lg-1 { font-size: 1px !important; } .font-size-lg-2 { font-size: 2px !important; } .font-size-lg-3 { font-size: 3px !important; } .font-size-lg-4 { font-size: 4px !important; } .font-size-lg-5 { font-size: 5px !important; } .font-size-lg-6 { font-size: 6px !important; } .font-size-lg-7 { font-size: 7px !important; } .font-size-lg-8 { font-size: 8px !important; } .font-size-lg-9 { font-size: 9px !important; } .font-size-lg-10 { font-size: 10px !important; } .font-size-lg-11 { font-size: 11px !important; } .font-size-lg-12 { font-size: 12px !important; } .font-size-lg-13 { font-size: 13px !important; } .font-size-lg-14 { font-size: 14px !important; } .font-size-lg-15 { font-size: 15px !important; } .font-size-lg-16 { font-size: 16px !important; } .font-size-lg-17 { font-size: 17px !important; } .font-size-lg-18 { font-size: 18px !important; } .font-size-lg-19 { font-size: 19px !important; } .font-size-lg-20 { font-size: 20px !important; } .font-size-lg-21 { font-size: 21px !important; } .font-size-lg-22 { font-size: 22px !important; } .font-size-lg-23 { font-size: 23px !important; } .font-size-lg-24 { font-size: 24px !important; } .font-size-lg-25 { font-size: 25px !important; } .font-size-lg-26 { font-size: 26px !important; } .font-size-lg-27 { font-size: 27px !important; } .font-size-lg-28 { font-size: 28px !important; } .font-size-lg-29 { font-size: 29px !important; } .font-size-lg-30 { font-size: 30px !important; } .font-size-lg-31 { font-size: 31px !important; } .font-size-lg-32 { font-size: 32px !important; } .font-size-lg-33 { font-size: 33px !important; } .font-size-lg-34 { font-size: 34px !important; } .font-size-lg-35 { font-size: 35px !important; } .font-size-lg-36 { font-size: 36px !important; } .font-size-lg-37 { font-size: 37px !important; } .font-size-lg-38 { font-size: 38px !important; } .font-size-lg-39 { font-size: 39px !important; } .font-size-lg-40 { font-size: 40px !important; } .font-size-lg-41 { font-size: 41px !important; } .font-size-lg-42 { font-size: 42px !important; } .font-size-lg-43 { font-size: 43px !important; } .font-size-lg-44 { font-size: 44px !important; } .font-size-lg-45 { font-size: 45px !important; } .font-size-lg-46 { font-size: 46px !important; } .font-size-lg-47 { font-size: 47px !important; } .font-size-lg-48 { font-size: 48px !important; } .font-size-lg-49 { font-size: 49px !important; } .font-size-lg-50 { font-size: 50px !important; } .font-size-lg-51 { font-size: 51px !important; } .font-size-lg-52 { font-size: 52px !important; } .font-size-lg-53 { font-size: 53px !important; } .font-size-lg-54 { font-size: 54px !important; } .font-size-lg-55 { font-size: 55px !important; } .font-size-lg-56 { font-size: 56px !important; } .font-size-lg-57 { font-size: 57px !important; } .font-size-lg-58 { font-size: 58px !important; } .font-size-lg-59 { font-size: 59px !important; } .font-size-lg-60 { font-size: 60px !important; } .font-size-lg-61 { font-size: 61px !important; } .font-size-lg-62 { font-size: 62px !important; } .font-size-lg-63 { font-size: 63px !important; } .font-size-lg-64 { font-size: 64px !important; } .font-size-lg-65 { font-size: 65px !important; } .font-size-lg-66 { font-size: 66px !important; } .font-size-lg-67 { font-size: 67px !important; } .font-size-lg-68 { font-size: 68px !important; } .font-size-lg-69 { font-size: 69px !important; } .font-size-lg-70 { font-size: 70px !important; } .font-size-lg-71 { font-size: 71px !important; } .font-size-lg-72 { font-size: 72px !important; } .font-size-lg-73 { font-size: 73px !important; } .font-size-lg-74 { font-size: 74px !important; } .font-size-lg-75 { font-size: 75px !important; } .font-size-lg-76 { font-size: 76px !important; } .font-size-lg-77 { font-size: 77px !important; } .font-size-lg-78 { font-size: 78px !important; } .font-size-lg-79 { font-size: 79px !important; } .font-size-lg-80 { font-size: 80px !important; } .font-size-lg-81 { font-size: 81px !important; } .font-size-lg-82 { font-size: 82px !important; } .font-size-lg-83 { font-size: 83px !important; } .font-size-lg-84 { font-size: 84px !important; } .font-size-lg-85 { font-size: 85px !important; } .font-size-lg-86 { font-size: 86px !important; } .font-size-lg-87 { font-size: 87px !important; } .font-size-lg-88 { font-size: 88px !important; } .font-size-lg-89 { font-size: 89px !important; } .font-size-lg-90 { font-size: 90px !important; } .font-size-lg-91 { font-size: 91px !important; } .font-size-lg-92 { font-size: 92px !important; } .font-size-lg-93 { font-size: 93px !important; } .font-size-lg-94 { font-size: 94px !important; } .font-size-lg-95 { font-size: 95px !important; } .font-size-lg-96 { font-size: 96px !important; } .font-size-lg-97 { font-size: 97px !important; } .font-size-lg-98 { font-size: 98px !important; } .font-size-lg-99 { font-size: 99px !important; } .font-size-lg-100 { font-size: 100px !important; } } @media (min-width: 1200px) { .font-size-xl-1 { font-size: 1px !important; } .font-size-xl-2 { font-size: 2px !important; } .font-size-xl-3 { font-size: 3px !important; } .font-size-xl-4 { font-size: 4px !important; } .font-size-xl-5 { font-size: 5px !important; } .font-size-xl-6 { font-size: 6px !important; } .font-size-xl-7 { font-size: 7px !important; } .font-size-xl-8 { font-size: 8px !important; } .font-size-xl-9 { font-size: 9px !important; } .font-size-xl-10 { font-size: 10px !important; } .font-size-xl-11 { font-size: 11px !important; } .font-size-xl-12 { font-size: 12px !important; } .font-size-xl-13 { font-size: 13px !important; } .font-size-xl-14 { font-size: 14px !important; } .font-size-xl-15 { font-size: 15px !important; } .font-size-xl-16 { font-size: 16px !important; } .font-size-xl-17 { font-size: 17px !important; } .font-size-xl-18 { font-size: 18px !important; } .font-size-xl-19 { font-size: 19px !important; } .font-size-xl-20 { font-size: 20px !important; } .font-size-xl-21 { font-size: 21px !important; } .font-size-xl-22 { font-size: 22px !important; } .font-size-xl-23 { font-size: 23px !important; } .font-size-xl-24 { font-size: 24px !important; } .font-size-xl-25 { font-size: 25px !important; } .font-size-xl-26 { font-size: 26px !important; } .font-size-xl-27 { font-size: 27px !important; } .font-size-xl-28 { font-size: 28px !important; } .font-size-xl-29 { font-size: 29px !important; } .font-size-xl-30 { font-size: 30px !important; } .font-size-xl-31 { font-size: 31px !important; } .font-size-xl-32 { font-size: 32px !important; } .font-size-xl-33 { font-size: 33px !important; } .font-size-xl-34 { font-size: 34px !important; } .font-size-xl-35 { font-size: 35px !important; } .font-size-xl-36 { font-size: 36px !important; } .font-size-xl-37 { font-size: 37px !important; } .font-size-xl-38 { font-size: 38px !important; } .font-size-xl-39 { font-size: 39px !important; } .font-size-xl-40 { font-size: 40px !important; } .font-size-xl-41 { font-size: 41px !important; } .font-size-xl-42 { font-size: 42px !important; } .font-size-xl-43 { font-size: 43px !important; } .font-size-xl-44 { font-size: 44px !important; } .font-size-xl-45 { font-size: 45px !important; } .font-size-xl-46 { font-size: 46px !important; } .font-size-xl-47 { font-size: 47px !important; } .font-size-xl-48 { font-size: 48px !important; } .font-size-xl-49 { font-size: 49px !important; } .font-size-xl-50 { font-size: 50px !important; } .font-size-xl-51 { font-size: 51px !important; } .font-size-xl-52 { font-size: 52px !important; } .font-size-xl-53 { font-size: 53px !important; } .font-size-xl-54 { font-size: 54px !important; } .font-size-xl-55 { font-size: 55px !important; } .font-size-xl-56 { font-size: 56px !important; } .font-size-xl-57 { font-size: 57px !important; } .font-size-xl-58 { font-size: 58px !important; } .font-size-xl-59 { font-size: 59px !important; } .font-size-xl-60 { font-size: 60px !important; } .font-size-xl-61 { font-size: 61px !important; } .font-size-xl-62 { font-size: 62px !important; } .font-size-xl-63 { font-size: 63px !important; } .font-size-xl-64 { font-size: 64px !important; } .font-size-xl-65 { font-size: 65px !important; } .font-size-xl-66 { font-size: 66px !important; } .font-size-xl-67 { font-size: 67px !important; } .font-size-xl-68 { font-size: 68px !important; } .font-size-xl-69 { font-size: 69px !important; } .font-size-xl-70 { font-size: 70px !important; } .font-size-xl-71 { font-size: 71px !important; } .font-size-xl-72 { font-size: 72px !important; } .font-size-xl-73 { font-size: 73px !important; } .font-size-xl-74 { font-size: 74px !important; } .font-size-xl-75 { font-size: 75px !important; } .font-size-xl-76 { font-size: 76px !important; } .font-size-xl-77 { font-size: 77px !important; } .font-size-xl-78 { font-size: 78px !important; } .font-size-xl-79 { font-size: 79px !important; } .font-size-xl-80 { font-size: 80px !important; } .font-size-xl-81 { font-size: 81px !important; } .font-size-xl-82 { font-size: 82px !important; } .font-size-xl-83 { font-size: 83px !important; } .font-size-xl-84 { font-size: 84px !important; } .font-size-xl-85 { font-size: 85px !important; } .font-size-xl-86 { font-size: 86px !important; } .font-size-xl-87 { font-size: 87px !important; } .font-size-xl-88 { font-size: 88px !important; } .font-size-xl-89 { font-size: 89px !important; } .font-size-xl-90 { font-size: 90px !important; } .font-size-xl-91 { font-size: 91px !important; } .font-size-xl-92 { font-size: 92px !important; } .font-size-xl-93 { font-size: 93px !important; } .font-size-xl-94 { font-size: 94px !important; } .font-size-xl-95 { font-size: 95px !important; } .font-size-xl-96 { font-size: 96px !important; } .font-size-xl-97 { font-size: 97px !important; } .font-size-xl-98 { font-size: 98px !important; } .font-size-xl-99 { font-size: 99px !important; } .font-size-xl-100 { font-size: 100px !important; } } /* REM more bootstrap classes (fs-1, fs-2, fs-3, fs-4, fs-5, fs-6 - Added responsive utility */ .fs-7 { font-size: 0.875rem !important; } .fs-8 { font-size: 0.75rem !important; } @media (min-width: 576px) { .fs-sm-1 { font-size: calc(1.375rem + 1.5vw) !important; } .fs-sm-2 { font-size: calc(1.325rem + 0.9vw) !important; } .fs-sm-3 { font-size: calc(1.3rem + 0.6vw) !important; } .fs-sm-4 { font-size: calc(1.275rem + 0.3vw) !important; } .fs-sm-5 { font-size: 1.25rem !important; } .fs-sm-6 { font-size: 1rem !important; } .fs-sm-7 { font-size: 0.875rem; } .fs-sm-8 { font-size: 0.75rem; } } @media (min-width: 768px) { .fs-md-1 { font-size: calc(1.375rem + 1.5vw) !important; } .fs-md-2 { font-size: calc(1.325rem + 0.9vw) !important; } .fs-md-3 { font-size: calc(1.3rem + 0.6vw) !important; } .fs-md-4 { font-size: calc(1.275rem + 0.3vw) !important; } .fs-md-5 { font-size: 1.25rem !important; } .fs-md-6 { font-size: 1rem !important; } .fs-md-7 { font-size: 0.875rem; } .fs-md-8 { font-size: 0.75rem; } } @media (min-width: 992px) { .fs-lg-1 { font-size: calc(1.375rem + 1.5vw) !important; } .fs-lg-2 { font-size: calc(1.325rem + 0.9vw) !important; } .fs-lg-3 { font-size: calc(1.3rem + 0.6vw) !important; } .fs-lg-4 { font-size: calc(1.275rem + 0.3vw) !important; } .fs-lg-5 { font-size: 1.25rem !important; } .fs-lg-6 { font-size: 1rem !important; } .fs-lg-7 { font-size: 0.875rem; } .fs-lg-8 { font-size: 0.75rem; } } @media (min-width: 1200px) { .fs-xl-1 { font-size: calc(1.375rem + 1.5vw) !important; } .fs-xl-2 { font-size: calc(1.325rem + 0.9vw) !important; } .fs-xl-3 { font-size: calc(1.3rem + 0.6vw) !important; } .fs-xl-4 { font-size: calc(1.275rem + 0.3vw) !important; } .fs-xl-5 { font-size: 1.25rem !important; } .fs-xl-6 { font-size: 1rem !important; } .fs-xl-7 { font-size: 0.875rem; } .fs-xl-8 { font-size: 0.75rem; } } /* This is only footer general */ /* Footer of login, different file -> _login.scss */ body:not(.login) footer { background: var(--footer-color); /* margin-top: 0; On an portal sometimes it's auto */ /* width: 100%; On a portal sometimes it's not 100%, it's 100% minus something */ display: flex; align-items: center; justify-content: space-between; color: var(--footer-contrast-text); padding: 0.85rem; min-height: auto; } body:not(.login) #footerLinks { margin-left: 0; display: flex; gap: 1rem; } body:not(.login) #footerTemplate { margin-left: 1rem; display: flex; } body:not(.login) #footerCopy { margin-left: auto; margin-right: 0; text-align: right; } body:not(.login) footer a { color: var(--footer-link-color); } body:not(.login) footer a:hover { color: var(--footer-link-color-hover); } body:not(.login) footer p { margin-left: auto; margin-right: 1rem; } @media (max-width: 992px) { body:not(.login) footer { flex-direction: column; align-items: center; justify-content: center; gap: 5px; } body:not(.login) #footerCopy { text-align: center; margin-left: 0; margin-right: 0; flex: 0 1 auto; } } body:not(.login) footer:not(:has(#footerLinks)):not(:has(#footerTemplate)) #footerCopy { text-align: center; margin-left: 0; margin-right: 0; flex: 1; } header .container-fluid { min-height: 80px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); background: var(--header-color) !important; border-bottom: var(--header-separator); } header a:not(a.dropdown-item) { color: var(--header-contrast-text); } header a:hover:not(a.dropdown-item) { text-decoration: underline; } header #logo { max-height: 80px; position: relative; } header #logo img { margin: auto; } header #showMainMenuElement #showMainMenuElement_icon { font-size: 1.75rem; color: var(--header-ico-menu-color); } header #showMainMenuElement #showMainMenuElement_icon:hover { font-size: 1.75rem; color: var(--header-ico-menu-color-hover); } header #info { margin: 5px 0 0 0; position: relative; } header #info .mdi, header #info .iconify--mdi { color: var(--header-ico-color); } header #info .mdi:hover, header #info .iconify--mdi:hover { color: var(--header-ico-color-hover); } header #info .vr { color: var(--header-contrast-text); } header #info .menu .mdi, header #info .menu .iconify--mdi { font-size: 1rem; } header #info ul { padding-left: 0; } header #info ul li { list-style-type: none; } header #info .left ul li { float: left; padding: 0; margin: 0 3px; } header #info .left ul { margin-bottom: 0; } header #info .left .mdi, header #info .left .iconify--mdi { font-size: 2rem; } header #info .left ul li:last-child { margin: 0 0; } header #info .left .user { font-size: 2rem; float: left; margin-right: 10px; } header #info .left .user .mdi, header #info .left .user .mdi:hover, header #info .left .user .iconify--mdi, header #info .left .user .iconify--mdi:hover { font-size: 2rem; color: var(--header-user-color); } header #info .left .mdi:hover, header #info .left .iconify--mdi:hover { color: var(--header-ico-color-hover); } header #info .left .separe { height: 15px; border-color: rgba(255, 255, 255, 0.3); border-width: 1px; border-style: solid; border-left: 0; border-top: 0; border-bottom: 0; } header #info .separe { /* This is for support portal */ height: 15px; border-color: rgba(255, 255, 255, 0.3); border-width: 1px; border-style: solid; border-left: 0; border-top: 0; border-bottom: 0; } header #info .left .menu .mdi, header #info .left .menu .iconify--mdi { margin-right: 5px; } header #info .left .menu #userNotesNumber .mdi, header #info .left .menu #userNotesNumber .iconify--mdi { margin-left: 5px; } header #info .left .exit a:hover { text-decoration: none; } header #info .left .bell .number-element, header #info .left #UTNButton .number-element, header #info .left #NotesButton .number-element { position: absolute; background: #b3261e; color: #fff; font-weight: 600; color: #eee; user-select: none; display: none; border-radius: 50px; width: 1.5rem; text-align: center; } header #info .left .bell .number-element { right: -4px; top: -4px; } header #info .left #UTNButton .number-element, header #info .left #NotesButton .number-element { right: -3px; top: -3px; } header #info .left #BellButton { margin-top: 0; float: left; } header #info .left .bell, header #info .left #UTNButton, header #info .left #NotesButton { position: relative; cursor: pointer; display: block; } header #info .left #FavoriteButton > a, header #info .left #HistoryButton > a, header #info .left #NotesButton > a, header #info .left #UTNButton > a, header #info .left #emailErrors > a, header #info .left #BellButton .bell { background: transparent; float: left; /* For CHROME if not, the click zone is not fully marked */ text-decoration: none; /* For IE */ } header #info .left #historyDiv:before { margin-left: 0; } header #info .left #FavoriteDiv li, header #info .left #historyDiv li, header #info .left #userNotesDiv li, header #info .left #UTNDiv li, header #info .left #NotifiDiv li { list-style: none; margin: 0 auto; border-bottom: 1px solid #d1d1d1; padding: 5px 0; width: 100%; user-select: none; } header #info .left #FavoriteDiv li.last, header #info .left #UTNDiv li.last, header #info .left #historyDiv li:last-child, header #info .left #userNotesDiv li:last-child, header #info .left #NotifiDiv li:last-child { border-bottom: 0; } header #info .left #UTNDiv li .mdi, header #info .left #UTNDiv li .iconify--mdi { color: #939292; font-size: 1rem; margin-left: 0; } header #info .left #FavoriteDiv li a:hover, header #info .left #historyDiv li a:hover, header #info .left #UTNDiv li a:hover { color: #000; } header #info .left #FavoriteDiv .nav, header #info .left #historyDiv .nav, header #info .left #footerUTN .nav { width: 100%; display: block; text-align: center; padding: 0; border-top: 1px solid #ddd; box-sizing: border-box; float: left; } header #info .left #historyDiv .nav { border-top: 0 !important; } header #info .left #FavoriteDiv .nav .back, header #info .left #historyDiv .nav .back, header #info .left #footerUTN .nav .back { float: left; padding: 5px 5px 7px; } header #info .left #FavoriteDiv .nav .next, header #info .left #historyDiv .nav .next, header #info .left #footerUTN .nav .next { float: right; padding: 5px 5px 7px; } header #info .left #FavoriteDiv .nav .back a, header #info .left #FavoriteDiv .nav .next a, header #info .left #historyDiv .nav .back a, header #info .left #historyDiv .nav .next a, header #info .left #footerUTN .nav .back a, header #info .left #footerUTN .nav .next a { color: #757575; } header #info .left #FavoriteDiv .nav .pag, header #info .left #historyDiv .nav .pag, header #info .left #footerUTN .nav .pag { display: inline-flex; margin-top: 13px; } header #info .left #FavoriteDiv li.nohref, header #info .left #UTNDiv li.nohref { border-bottom: 0; } header #info .left #FavoriteDiv li.nohref a, header #info .left #UTNDiv li.nohref a { text-decoration: none; cursor: default; border-bottom: 0; } header #info .left #userNotesDiv li.new_note { margin: 2px 0 2px 10px; } header #info .left #userNotesDiv li.new_note:before { content: ""; } header #info .left #userNotesDiv li.new_note:before .left { float: left; } header #info .left #userNotesDiv li.new_note .left a { background: var(--link-ico-color); padding: 5px; color: #fff; } header #info .left #userNotesDiv li.new_note .left a:hover { background: var(--link-ico-color-hover); text-decoration: none; } header #info .left #userNotesDiv li.new_note #userNotesNumber { float: right; color: #000; margin: -24px 17px 0 0; } header #info .left #userNotesDiv li.new_note #userNotesNumber a.pagLeftNotes .mdi, header #info .left #userNotesDiv li.new_note #userNotesNumber a.pagRightNotes .mdi, header #info .left #userNotesDiv li.new_note #userNotesNumber a.pagLeftNotes .iconify--mdi, header #info .left #userNotesDiv li.new_note #userNotesNumber a.pagRightNotes .iconify--mdi { color: var(--primary-color); float: right; font-size: 1rem; margin-left: 5px; margin-top: -9px; } header #info .left .bell .mdi, header #info .left .bell .iconify--mdi { color: var(--header-ico-color); /* It is overwritten in subs */ font-size: 2rem; user-select: none; } header #info .left .bell .mdi:hover, header #info .left .bell .iconify--mdi:hover { color: var(--header-ico-color-hover); } header #info .left #NotifiDiv textarea, header #info .left #UTNDiv textarea { resize: none; margin: 13px 0 0 0; padding: 2px 5px; border: 0; width: 100%; height: 130px; background: inherit; outline: 0; } header #info .left #NotifiDiv textarea { padding: 0 15px !important; } header #info .left #NotifiDiv .nav { border-top: 1px solid #d1d1d1; display: block; padding: 0; text-align: center; width: 100%; } header #info .left #NotifiDiv .nav .back { float: left; } header #info .left #NotifiDiv .nav .next { float: right; } header #info .left #NotifiDiv .nav .back, header #info .left #NotifiDiv .nav .next { background: #ededed none repeat scroll 0 0; color: #757575; padding: 9px; } header #info .left #NotifiDiv .nav .back:hover, header #info .left #NotifiDiv .nav .next:hover { background: #e2e2e2 none repeat scroll 0 0; } header #info .left #NotifiDiv .nav .pag { line-height: 30px; } header #info .left #FavoriteDiv .nav .mdi, header #info .left #FavoriteDiv .nav .mdi:hover, header #info .left #historyDiv .nav .mdi, header #info .left #historyDiv .nav .mdi:hover, header #info .left #UTNDiv .nav .mdi, header #info .left #UTNDiv .nav .mdi:hover, header #info .left #FavoriteDiv .nav .iconify--mdi, header #info .left #FavoriteDiv .nav .iconify--mdi:hover, header #info .left #historyDiv .nav .iconify--mdi, header #info .left #historyDiv .nav .iconify--mdi:hover, header #info .left #UTNDiv .nav .iconify--mdi, header #info .left #UTNDiv .nav .iconify--mdi:hover { color: #888 !important; } header #info .left #UTNDiv #remarksUTN { margin: 14px 0 5px; border-top: 1px solid #d1d1d1; padding: 14px 0 0 22px; } header #info .left #UTNButton .number-element, header #info .left .bell .number-element { display: none; } header #info .left .dropdown-item { white-space: normal; text-overflow: ellipsis; overflow: hidden; } header #info .right #ico-user img { height: 36px; width: 36px; line-height: 36px; border-radius: 50%; } header #info .right ul { list-style: none; } /* Header object */ body.main #header_object .ui-multiselect { padding: 2px 0 1px 0; text-indent: 5px; height: 25px; margin: 14px 0 0 -5px !important; } body.main #header_object { border: 1px solid #d9d8d8; width: 100% !important; padding: 0; height: 41px; align-items: center; margin-top: 25px; margin-bottom: 10px !important; padding-left: 4px; padding-right: 4px; } body.main #header_object { box-shadow: 0 0.15rem 1.75rem 0 rgba(var(--primary-color-rgb), 0.15) !important; z-index: 1; background: #fff; /* Add !important avoids being able to be overwritten */ } body.fixed #header_object { position: sticky; top: 0; z-index: 10; /* locator icon above header */ } #header_object { background: var(--header-object-color); padding: 10px 20px 10px 25px; display: flex; width: 100%; align-items: center; box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, 0.15); } #header_object p { color: var(--header-object-contrast-text); margin: 0 15px 0 0; padding: 15px 0 0 5px; font-size: 1rem; font-weight: bold; text-align: left; white-space: nowrap; text-overflow: ellipsis; width: auto; overflow: hidden; } #header_object p strong { margin: 0 5px 0 0; } #header_object h2 { margin: 0 0 0 15px; font-size: 1.25rem; display: flex; } #header_object h2 div { text-overflow: ellipsis; width: auto; overflow: hidden; } #header_object .ico .round { background-color: var(--primary-color); } #header_object .info { flex: 1; min-width: 0; } #header_object .name { width: 100%; margin: 2px 0 0 15px; color: var(--header-object-contrast-text); white-space: nowrap; text-overflow: ellipsis; width: auto; overflow: hidden; } #header_object .object { width: 100%; white-space: nowrap; } #header_object .object h2 { color: var(--header-object-contrast-text); } #header_object .icons .mdi, #header_object .icons .iconify--mdi { color: var(--header-object-ico-color) !important; } #header_object .icons .mdi:hover, #header_object .icons .iconify--mdi:hover { color: var(--header-object-ico-color-hover) !important; } #header_object .icons ul { float: right; } #header_object .icons ul:not(:last-child) { border-left: 1px solid rgba(var(--primary-color-rgb), 0.5); content: ""; padding: 0 1rem; margin-left: 0.5rem; position: relative; top: 10px; line-height: 15px; } #header_object .icons ul:not(:last-child) li { padding-left: 10px; } #header_object .icons ul li { list-style: none; display: inline-block; } #header_object .icons ul li:not(:last-child) { margin-right: 0.5rem; } #header_object .icons ul li > a, #header_object .icons ul li > button { display: inline-block; } #header_object .icons ul li button#showMoreIcons { box-shadow: none; } #header_object .icons .mdi, #header_object .icons .iconify--mdi { font-size: 25px; color: #8c8c8c; margin: 0 5px; } #header_object .icons .disabled .mdi:before, #header_object .icons .disabled .mdi:hover:before, #header_object .icons .disabled .iconify--mdi:before, #header_object .icons .disabled .iconify--mdi:hover:before { opacity: 0.4; color: var(--header-object-ico-color); } #header_object .icons li:last-child .mdi, #header_object .icons li:last-child .iconify--mdi { padding: 0; margin: 0; } #header_object .icons .mdi:hover, #header_object .icons .iconify--mdi:hover { color: #e2e2e2; } #header_object .icons li .mdi, #header_object .icons li .iconify--mdi { padding: 0; } #header_object .icons li:first-child .mdi, #header_object .icons li:first-child .iconify--mdi { border-left: 0; } #header_object .icons button:focus { box-shadow: none; } #header_object #content form .icons a { outline: 0; } #header_object .control-menu .mdi, #header_object .control-menu .iconify--mdi { color: #7490b8; } #header_object .control-menu .mdi:hover, #header_object .control-menu .iconify--mdi:hover { color: #eee; } #header_object .control-menu .mdi.disabled, #header_object .control-menu .mdi.disabled:hover, #header_object .control-menu .iconify--mdi.disabled, #header_object .control-menu .iconify--mdi.disabled:hover { opacity: 0.5 !important; color: #fff !important; cursor: default; } /* Portal */ header.portal .dropdown-menu { top: 32px; border-radius: 0; } header.portal .dropdown-item { padding: 0 0.5rem; font-size: 10px; } header.portal .dropdown-item:hover { background: transparent; } header.portal .selected { font-weight: 800; color: #fff !important; text-decoration: underline; font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif; } /* Animate */ @keyframes slideIn { 0% { transform: translateY(1rem); opacity: 0; } 100% { transform: translateY(0rem); opacity: 1; } 0% { transform: translateY(1rem); opacity: 0; } } header .dropdown-menu { animation-name: slideIn; animation-duration: 0.3s; animation-fill-mode: both; } h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 65%; } h1.mdi:before, h2.mdi:before, h3.mdi:before, h4.mdi:before, h5.mdi:before, h6.mdi:before, h1.iconify--mdi:before, h2.iconify--mdi:before, h3.iconify--mdi:before, h4.iconify--mdi:before, h5.iconify--mdi:before, h6.iconify--mdi:before { margin-right: 0.5rem; } h1, h1.fw-bold, h2, h2.fw-bold, h3, h3.fw-bold, h4, h4.fw-bold, h5, h5.fw-bold, h6, h6.fw-bold { color: #666; font-family: var(--font-headings); font-weight: var(--font-headings-weight); margin-bottom: 1.1rem; } h1, h1.mdi, h1 .mdi, h1.iconify--mdi, h1 .iconify--mdi { font-size: 1.6rem; color: inherit; } h2, h2.mdi, h2 .mdi, h2.iconify--mdi, h2 .iconify--mdi { font-size: 1.5rem; color: inherit; } h3, h3.mdi, h3 .mdi, h3.iconify--mdi, h3 .iconify--mdi { font-size: 1.4rem; color: inherit; } h4, h4.mdi, h4 .mdi, h4.iconify--mdi, h4 .iconify--mdi { font-size: 1.3rem; color: inherit; } h5, h5.mdi, h5 .mdi, h5.iconify--mdi, h5 .iconify--mdi { font-size: 1.2rem; color: inherit; } h6, h5.mdi, h5 .mdi, h5.iconify--mdi, h5 .iconify--mdi { font-size: 1.1rem; color: inherit; } h1.bg-primary, h2.bg-primary, h3.bg-primary, h4.bg-primary, h5.bg-primary, h6.bg-primary { color: var(--primary-color-contrast-text); } h1.bg-secondary, h2.bg-secondary, h3.bg-secondary, h4.bg-secondary, h5.bg-secondary, h6.bg-secondary { color: var(--secondary-color-contrast-text); } /* EJ:

*/ .border-bottom-half:after { border-bottom: solid transparent; border-color: inherit; content: ""; display: block; margin-top: 0.3rem; width: 3rem; } .border-1.border-bottom-half:after { border-width: 1px !important; } .border-2.border-bottom-half:after { border-width: 2px !important; } .border-3.border-bottom-half:after { border-width: 3px !important; } .border-4.border-bottom-half:after { border-width: 4px !important; } .border-5.border-bottom-half:after { border-width: 5px !important; } /* Center of onCustomer, StoryBook, Popup, Modal, Widget and Offcanvas */ #content .mdi, #content .mdi.info, #content .mdi.info:hover, #storybook-root .mdi, #storybook-root .mdi.info, #storybook-root .mdi.info:hover, .sb-show-main .mdi, .sb-show-main .mdi.info, .sb-show-main .mdi.info:hover, .popup .mdi, .popup .mdi.info, .popup .mdi.info:hover, .modal-content .mdi, .modal-content .mdi.info, .modal-content .mdi.info:hover .widget .mdi, .widget .mdi.info, .widget .mdi.info:hover, #content .iconify--mdi, #content .iconify--mdi.info, #content .iconify--mdi.info:hover, #storybook-root .iconify--mdi, #storybook-root .iconify--mdi.info, #storybook-root .iconify--mdi.info:hover, .sb-show-main .iconify--mdi, .sb-show-main .iconify--mdi.info, .sb-show-main .iconify--mdi.info:hover, .popup .iconify--mdi, .popup .iconify--mdi.info, .popup .iconify--mdi.info:hover, .modal-content .iconify--mdi, .modal-content .iconify--mdi.info .modal-content .iconify--mdi.info:hover, .widget .iconify--mdi, .widget .iconify--mdi.info, .widget .iconify--mdi.info:hover, .offcanvas .mdi .offcanvas .mdi.info .offcanvas .mdi.info:hover { font-size: 20px; color: var(--link-ico-color); /* That is not important, because it overwrites other MDI */ vertical-align: middle; /* z-index: 1; The icons stayed above the drop-down menus */ } #content .mdi:hover, #storybook-root .mdi:hover, .sb-show-main .mdi:hover, .popup .mdi:hover, .modal-content .mdi:hover, .widget .mdi:hover, #content .iconify--mdi:hover, #storybook-root .iconify--mdi:hover, .sb-show-main .iconify--mdi:hover, .popup .iconify--mdi:hover, .modal-content .iconify--mdi:hover, .widget .iconify--mdi:hover, .offcanvas .mdi:hover { color: var(--link-ico-color-hover); /* That is not important, because it overwrites other MDI */ } /* ICONS */ .mdi-64px.mdi-set, .mdi-64px.mdi::before { font-size: 64px; } .mdi-128px.mdi-set, .mdi-128px.mdi::before { font-size: 128px; } .mdi-256px.mdi-set, .mdi-256px.mdi::before { font-size: 256px; } .mdi-512px.mdi-set, .mdi-512px.mdi::before { font-size: 512px; } main .user1, main .user2 { margin: 0 0 1rem; display: table; } main .user1 { width: 80%; float: right; background: #f5f5f5; } main .user2 { width: 100%; float: left; background: #eaf7ff; float: left; } main .user1 .left, main .user2 .left { width: 300px; background-color: rgba(0, 0, 0, 0.03); display: table-cell; vertical-align: top; padding: 10px; } main .user1 .left p, main .user2 .left p { margin: 0; padding: 0; } main .user1 .desc, main .user2 .desc { margin: 10px; float: left; width: calc(100% - 160px); display: table-cell; } main .user1 .desc p, main .user2 .desc p { margin: 0; } main .user1 textarea, main .user2 textarea { background: transparent; border: 0; resize: none; } .object_type_5 .new_interaction .tree label { width: 175px; } .object_type_5 #sub_interaction_list .user1, .object_type_5 #sub_interaction_list .user2 { background: #fff; } .object_type_5 #sub_interaction_list .user1, .object_type_5 #sub_interaction_list .user2 { margin: 0; } .object_type_5 #sub_interaction_list .user2 { width: 80%; } .object_type_5 #sub_interaction_list .user2 .tit { background: #ecf6fb; } .object_type_5 #sub_interaction_list .block .tit:nth-child(2) .message { text-decoration: underline; font-size: 13px; font-weight: bold; } .object_type_5 .header_email p span.mini { font-style: normal !important; position: absolute; right: 20px; } body.main, body.detail, body.locator { background-image: var(--bg-img-source) !important; background-repeat: var(--bg-img-repeat) !important; background-position: var(--bg-img-position) !important; background-attachment: var(--bg-img-attachment) !important; background-size: var(--bg-img-size) !important; overflow-x: hidden !important; } #content #flex_container, #content { background-color: transparent; } main { flex: 1 0 auto; } main [class^=container] { margin: 0 auto; padding: 0; color: #000; min-height: 100%; /* Portal bug height? */ height: 100%; /* Portal bug height? */ display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; } .overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 100; cursor: pointer; animation: fadeIn 0.2s forwards; } .overlay.fadeOut { animation: fadeOut 0.2s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } body.locator main > [class^=container] > form#detailForm, body.detail #content > form#detailForm { height: auto; } body.locator #main.container { box-shadow: 0 0.15rem 1.75rem 0 #aaa !important; } body.locator #content #main { margin: 0; padding: 25px; } body.main #content #main.container > section, body.widget #content #main.container > section, body.locator #content #main.container > section { width: 100%; } body.locator #content #flex_container { padding: 25px; } body.locator #actionsLocator { padding: 5px; } body.locator #actionsLocator .mdi, body.locator #actionsLocator .iconify--mdi { font-size: 20px !important; } body.locator #actionsLocator .dropdown-item { margin-bottom: 5px; } body.locator #actionsLocator .dropdown-item:last-child { margin-bottom: 0; } body.locator #locatorFiltersDiv .input-group:not(.treeview-input-group) .form-control { /* The opposite of Bootstrap */ margin-left: 0 !important; border-top-left-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; } #content { min-width: 1px; width: 100%; flex-grow: 1; flex: 1; margin: 0 auto; } #content #flex_container { display: flex; } body.detail #content #main.container { max-width: 100%; } body.main #content { border: 0; background: transparent; margin: 0 25px; } body.main #content #flex_container { border-top: 0; margin: 0; } body.main #content #main { background: transparent; padding: 0; min-width: 100%; max-width: 100%; width: 100%; } body.main #content #main.container > section { background-color: transparent !important; } body.detail #content #main.container { margin: 25px auto 0; background-color: transparent; } body.detail #content #main.container > section { padding: 25px; margin: 0 25px; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important; width: 100%; background: white; } body.detail #content #main.container, body.detail #content #main.container > section { /* Hack for fix scroll line width using CodeMirror script */ min-width: 0; } body.detail .section-container form > section, body.detail .section-container > section { box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important; background: white; padding: 1.5rem; margin-bottom: 1rem; border-radius: 1rem; } body.detail .section-container { margin: 0 25px; width: 100%; } body.locator main > [class^=container] #main.container, body.error main > [class^=container] #main.container { max-width: 100%; margin: 25px; } #content #main { color: var(--main-text-color); position: relative; background-color: var(--main-bg-color); flex: 1; } main [class^=container] #column, main [class^=container] #column.absolute { width: 300px; position: fixed !important; top: 0; display: none; z-index: 200; height: 100%; background-color: var(--menu-color); margin-left: 0; box-shadow: 15px 0px 10px -15px rgba(0, 0, 0, 0.1); /* Right shadow. Not valid Bootstrap class: ".shadow" */ height: 100vh !important; overflow-y: scroll; } /* The maximize is applied with maxView=true or maxView=false from the URL */ body.detail.maximize #content #main.container { max-width: 100%; } body.detail.maximize main [class^=container] #column { position: absolute; } /* Highlight zone */ .highlight-zone { background-color: var(--highlight-zone-bg-color); } /* Media queries responsive of layout */ @media (min-width: 992px) { body.detail #content #main.container { max-width: 1320px; } } @media (min-width: 1201px) { body.main, body.detail, body.locator { overflow-x: visible; } main [class^=container] #column { width: 250px; position: relative !important; height: auto !important; /* 100vh default responsive */ overflow-y: hidden; /* scroll for responsive */ } } @media (min-width: 1401px) { main [class^=container] #column { display: block; } } @media (min-width: 1601px) { main [class^=container] #column { width: 300px; } } .login a { color: var(--login-link-color); } .login a:hover { color: var(--login-link-color-hover); } .login { background-color: var(--login-color) !important; background-image: var(--login-img) !important; background-repeat: var(--login-img-repeat) !important; background-position: var(--login-img-position) !important; background-attachment: var(--login-img-attachment) !important; background-size: var(--login-img-size) !important; --bs-body-bg: transparent; /* React class not .login */ display: flex; flex-direction: column; height: 100%; /* React class not .login */ } .login .fields { margin-bottom: 50px; } .login .password-container .icon .mdi, .login .password-container .icon .iconify--mdi { color: var(--login-form-mdi-color) !important; } .login main { flex: initial; margin: auto; width: 100%; } /* Left position */ .login.left main { flex: 1; background: var(--login-container-color); margin-left: 0; margin-right: auto; box-shadow: var(--login-shadow) !important; /*border-radius: var(--login-radius); here not necessary */ } @media (min-width: 992px) { .login.left main { width: var(--login-width); } } /* Center position */ .login.center main { flex: 1; background: var(--login-container-color); margin-left: auto; margin-right: auto; padding: 4rem 0rem 0rem; box-shadow: var(--login-shadow) !important; border-radius: var(--login-radius); } .login.center .btn-login, .login.center .btn-outline-login { width: 100%; } .login.center #username, .login.center #newpass { margin-bottom: 1.5rem; } .login.center .form-floating > .form-control:not(:placeholder-shown) { padding-bottom: 0; } .login.center .form-floating > .form-control { padding: 1rem 0.75rem 0 1rem; } @media (min-width: 992px) { .login.center main { width: var(--login-width); flex: 0; } } /* Right Position */ .login.right main { flex: 1; background: var(--login-container-color); margin-left: auto; margin-right: 0; box-shadow: var(--login-shadow) !important; /*border-radius: var(--login-radius); here not necessary */ } @media (min-width: 992px) { .login.right main { width: var(--login-width); } } .login .card-header { padding: 0; min-height: auto; } .login .card-header h2 { display: var(--login-welcome-display); color: var(--login-welcome-color); font-size: var(--login-welcome-font-size); margin-bottom: var(--login-welcome-margin-bottom); } .login .card-header p { display: var(--login-welcome-subtext-display); color: var(--login-welcome-subtext-color); font-size: var(--login-welcome-subtext-font-size); margin-bottom: var(--login-welcome-subtext-margin-bottom); } /* Autologin */ .login main p { color: var(--login-container-contrast-text); } /* Button */ /* Important: The button can be outline, so the borders have to be seen in the disabled state */ .login .btn-login { --bs-btn-color: var(--login-btn-contrast-text); --bs-btn-bg: var(--login-btn-color); --bs-btn-border-color: var(--login-btn-border); --bs-btn-hover-color: var(--login-btn-hover-contrast-text); --bs-btn-hover-bg: var(--login-btn-hover-color); --bs-btn-hover-border-color: var(--login-btn-border); --bs-btn-focus-shadow-rgb: var(--login-btn-hover-color-rgb); --bs-btn-active-color: var(--login-btn-hover-contrast-text); --bs-btn-active-bg: var(--login-btn-hover-color); --bs-btn-active-border-color: var(--login-btn-hover-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--login-btn-contrast-text); --bs-btn-disabled-bg: var(--login-btn-color); --bs-btn-disabled-border-color: var(--login-btn-border); } .login .btn-outline-login { --bs-btn-color: var(--login-btn-color); --bs-btn-border-color: var(--login-btn-color); --bs-btn-hover-color: var(--login-btn-contrast-text); --bs-btn-hover-bg: var(--login-btn-color); --bs-btn-hover-border-color: var(--login-btn-color); --bs-btn-focus-shadow-rgb: var(--login-btn-color-rgb); --bs-btn-active-color: var(--login-btn-contrast-text); --bs-btn-active-bg: var(--login-btn-color); --bs-btn-active-border-color: var(--login-btn-color); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--login-btn-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--login-btn-color); } .login .btn-login, .login .btn-outline-login { font-size: var(--login-btn-font-size) !important; font-weight: var(--login-btn-font-weight) !important; box-shadow: var(--login-btn-shadow) !important; background-image: var(--login-btn-img) !important; background-position: var(--login-btn-img-position) !important; background-attachment: var(--login-btn-img-attachment) !important; background-size: var(--login-btn-img-size) !important; border-radius: var(--login-btn-border-radius); transition: all 0.4s ease-in-out; min-width: var(--login-btn-width); height: 50px; } .login .btn-login:hover, .login .btn-outline-login:hover { transition: all 0.4s ease-in-out; background-image: var(--login-btn-img-hover) !important; background-position: var(--login-btn-img-hover-position) !important; background-attachment: var(--login-btn-img-hover-attachment) !important; background-size: var(--login-btn-img-hover-size) !important; } /**/ .login .form-control { background-color: var(--login-form-color); color: var(--login-form-contrast-text); } .login .form-control-bottom.form-control { border-bottom: var(--login-form-bottom-height) solid var(--login-form-border-color) !important; } .login .form-control-bottom.input[readonly].form-control, .login .form-control-bottom.input[readonly].form-control:focus { border-bottom: var(--login-form-bottom-height) solid var(--login-form-border-color) !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; } /* Variables config position */ .login.default { /* floating label disabled */ } .login.default .form-control { border: 1px solid var(--login-form-border-color) !important; /* Always 1px */ border-radius: var(--login-form-border-radius) !important; } .login.default .form-control::placeholder { color: var(--login-form-placeholder) !important; } .login.default #username { margin-bottom: 1rem !important; } .login.default .form-floating > .form-control { padding: 0 0 0 1rem; } .login.default .form-floating > label { display: none; } .login.default .form-floating > .form-control-plaintext::placeholder, .login.default .form-floating > .form-control::placeholder { color: var(--login-form-bottom-placeholder); } .login.default .form-floating { margin-bottom: 2rem !important; } .login.default .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown), .login.default .form-floating > .form-control:not(:-moz-placeholder-shown) { padding-top: 0; padding-bottom: 0; } .login.default .form-floating > .form-control-plaintext:focus, .login.default .form-floating > .form-control-plaintext:not(:placeholder-shown), .login.default .form-floating > .form-control:focus, .login.default .form-floating > .form-control:not(:placeholder-shown) { padding-top: 0; padding-bottom: 0; } .login.default .form-floating > .form-control-plaintext:-webkit-autofill, .login.default .form-floating > .form-control:-webkit-autofill { padding-top: 0; padding-bottom: 0; } .login .buttons { margin-top: 5rem; } .login .spinner-border-sm { --bs-spinner-width: 1.2rem; --bs-spinner-height: 1.2rem; --bs-spinner-border-width: 0.1em; margin-left: 0.25rem; } /* floating form */ /* There is a bug in chrome, it does not change the color of the saved texts */ .login .form-container { margin-bottom: 4rem; } .login .form-floating .form-control { color: var(--login-form-contrast-text); font-size: 17px; /* Not REM here */ } .login .form-floating > label { color: var(--login-form-bottom-floating-label) !important; font-size: 17px; /* Not REM here */ } /* floating form -> default field */ .login .form-container.default { margin-bottom: 2rem; } .login .form-container.default label { display: none; } .login .form-container.default .form-control { padding: 0 1rem; } .login .form-container.default .form-control::placeholder { color: var(--login-form-bottom-floating-label); transition: none; } /* Login footer (Inside CRM ---> footer.scss) */ .login.left footer { margin-left: 0; margin-right: auto; } .login.right footer { margin-left: auto; margin-right: 0; } .login.left footer, .login.right footer { background: var(--login-footer-color); margin-top: 0; display: flex; align-items: center; justify-content: center; color: var(--login-footer-contrast-text); justify-content: center; width: 100%; padding: 1rem; flex-direction: column; gap: 5px; } .login.left footer a, .login.right footer a { color: var(--login-footer-link-color); } .login.left footer a:hover, .login.right footer a:hover { color: var(--login-footer-link-color-hover); } .login.left #footerVersion, .login.right #footerVersion { border-top: 1px solid var(--bs-border-color); width: 90%; padding: 1rem 1rem 0 1rem; margin: 1rem 1rem 0 1rem; text-align: center; } .login.left #footerVersion .version, .login.right #footerVersion .version { width: 100%; display: block; } .login.left #footerVersion .separe, .login.right #footerVersion .separe { display: none; } @media (min-width: 992px) { .login.left footer, .login.right footer { width: var(--login-width); } } .login.center footer { background: var(--login-footer-color); margin-top: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; color: var(--login-footer-contrast-text); width: 100%; padding: 0 0.85rem; min-height: 45px; } .login.center #footerLinks { margin-left: 0; } .login.center #footerTemplate { margin-left: 1rem; } .login.center #footerVersion { margin-left: auto; margin-right: 0; } .login.center footer a { color: var(--login-footer-link-color); } .login.center footer a:hover { color: var(--login-footer-link-color-hover); } .login.center footer p { margin-left: auto; margin-right: 1rem; } .login.center #footerVersion .version { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } @media (max-width: 992px) { .login.center footer { flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .login.center #footerVersion { margin-left: 0; } } /* End Footer */ /* SSO */ .login .separator { display: flex; flex-direction: row; margin: 1rem 0; color: var(--login-link-color); font-size: 1.25rem; } .login .separator:before, .login .separator:after { content: ""; flex: 1 1; border-bottom: 1px dashed var(--login-form-border-color); } .login .separator::before { margin: 0.85rem 0.85rem 0.85rem 0; } .login .separator::after { margin: 0 0 0.85rem 0.85rem; } /* End SSO */ #menu { background: var(--menu-color) !important; } #menu a { color: var(--menu-contrast-text) !important; } #menu > .nav > .nav-item > .nav-link { color: var(--menu-contrast-text) !important; font-weight: var(--menu-font-weight-links) !important; } #menu > .nav > .nav-item > .nav-link > .mdi, #menu > .nav > .nav-item > .nav-link > .iconify--mdi { color: var(--menu-contrast-text) !important; } #menu > .nav > .nav-item.active > a.nav-link { background: var(--menu-active-color) !important; color: var(--menu-active-contrast-text) !important; } #menu .collapse .nav .nav-item .nav-link .mdi-chevron-down, #menu .collapsing .nav .nav-item .nav-link .mdi-chevron-down { color: var(--link-ico-color) !important; } #menu .mdi.mdi-plus-circle-outline, #menu .iconify--mdi.mdi-plus-circle-outline { color: var(--link-ico-color) !important; } #menu .mdi.mdi-plus-circle-outline:hover, #menu .iconify--mdi.mdi-plus-circle-outline:hover { color: var(--link-ico-color-hover) !important; } #menu > .nav > .nav-item:not(.active) > a.nav-link:hover { background: var(--menu-hover-color) !important; color: var(--menu-hover-contrast-text) !important; } #menu > .nav > .nav-item:not(.active) > a.nav-link:hover, #menu > .nav > .nav-item:not(.active) > a.nav-link:hover .mdi, #menu > .nav > .nav-item:not(.active) > a.nav-link:hover .iconify--mdi { color: var(--menu-hover-contrast-text) !important; } #menu > .nav > .nav-item:not(.active) > a.nav-link:hover { border-left: 4px solid var(--menu-hover-border-color) !important; } #menu > .nav > .nav-item.active > a.nav-link, #menu > .nav > .nav-item > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) { border-left: 4px solid var(--menu-active-border-color) !important; color: var(--menu-active-contrast-text) !important; } #menu > .nav > .nav-item > div.collapse, #menu > .nav > .nav-item > div.collapsing { border-left: 4px solid var(--menu-active-border-color) !important; } #menu > .nav > .nav-item > div.collapse > .nav, #menu > .nav > .nav-item > div.collapsing > .nav { background-color: rgba(var(--menu-active-content-color), 0.05) !important; } #menu .nav .nav-item { border-bottom: none; } #menu > .nav > .nav-item > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) > .mdi, #menu > .nav > .nav-item > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) > .iconify--mdi { color: var(--menu-active-contrast-text) !important; } #menu > .nav > .nav-item.active > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) > .mdi, #menu > .nav > .nav-item.active > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) > .iconify--mdi { color: var(--menu-active-contrast-text) !important; } #menu > .nav > .nav-item.active > a.nav-link[data-bs-toggle=collapse] > .mdi, #menu > .nav > .nav-item.active > a.nav-link[data-bs-toggle=collapse] > .iconify--mdi { color: var(--menu-active-contrast-text) !important; } #menu > .nav > .nav-item > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) { background-color: var(--menu-active-color) !important; } .input-otp-list-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .input-otp-list-container .input-otp { width: 1em; min-width: 43px; text-align: center; } .input-otp-list-container .input-otp.is-invalid { background-image: none; background-color: transparent; padding-right: 0; padding-left: 0; } #dataObjectTable td.shrink { min-width: 50%; width: 50% !important; /* Only Chrome */ } #dataObjectTable .text-nowrap { width: 1px; display: table; } #dataObjectTable .flex-wrap { flex-wrap: nowrap !important; } @-moz-document url-prefix() { /* Firefox and Windows 10 (only 10) BUG: https://github.com/twbs/bootstrap/issues/23295 */ #dataObjectTable textarea { overflow-y: auto; overflow-x: hidden; } } #documentData button[id^=data_validation_], .configurable-field button[id^=data_validation_] { width: 200px; } .object_type_pdf main [class^=container] .mdi, .object_type_pdf main [class^=container] .mdi.info, .object_type_pdf main [class^=container] .mdi.info:hover, .object_type_pdf main [class^=container] .iconify--mdi, .object_type_pdf main [class^=container] .iconify--mdi.info, .object_type_pdf main [class^=container] .iconify--mdi.info:hover { font-size: 20px; vertical-align: middle; } .object_type_pdf #main { width: 100%; } .object_type_pdf .popup { float: left; width: 55%; height: 100%; padding: 0; margin: 0; } .object_type_pdf .pdf { float: right; width: 45%; height: 100%; } .object_type_pdf .derecha { float: right; margin-left: 10px !important; } .object_type_pdf main [class^=container] { width: 100%; } .object_type_pdf [id^=pdf_title][id$=Block] { margin: 0 15px; } .object_type_pdf main [id^=pdf_title][id$=Block] > .block > div.tit.border { text-align: justify; position: relative; width: 100%; padding-left: 4%; padding-right: 5.8%; line-height: 22px; } .object_type_pdf main [id^=pdf_title][id*=Block] > .block > div.tit.border .arrow3, .object_type_pdf main [id^=pdf_title][id*=Block] > .block > div.tit.border .arrow4 { margin: 0; position: absolute; left: 0; top: 0; height: 100%; width: 20px; padding: 0 5px; } .object_type_pdf main [id^=pdf_title][id*=Block] > .block > div.tit.border span.derecha { position: absolute; top: 0; padding-top: 5px; right: 0; height: 95%; margin-right: 5px; font-size: 11px; } .object_type_pdf [id^=pdf_title] .block { padding-left: 0 !important; } .object_type_pdf [id^=pdf_title] #status .derecha { margin-right: 0 !important; } .object_type_pdf [id^=pdf_title] #status strong, .object_type_1002 #status strong { background: #eee; padding: 2px 10px; color: #333; } .object_type_pdf #pdf_titleBlock .border { background: #858585 !important; padding: 12px 0; line-height: 17px; } .object_type_pdf #pdf_titleBlock .border .arrow3, .object_type_pdf #pdf_titleBlock .border .arrow4 { color: #fff; } .object_type_pdf #pdf_title .border .arrow3, .object_type_pdf #pdf_title .border .arrow4 { color: #4d4d4d; } .object_type_pdf #pdf_titleBlock .border a { color: #fff; } .object_type_pdf [id^=pdf_title] .border span.derecha .mdi, .object_type_pdf [id^=pdf_title] .border span.derecha .iconify--mdi { color: #939292 !important; } .object_type_pdf [id^=pdf_title] .border span.derecha .mdi:hover, .object_type_pdf [id^=pdf_title] .border span.derecha .iconify--mdi:hover { color: #000 !important; } .object_type_pdf [id^=pdf_title] .scroll { width: 100% !important; } .object_type_pdf #pdf_title { padding: 0 !important; } .object_type_pdf #pdf_title .border { background: #fff !important; border-left: 0; border-right: 0; border-style: dashed; } .object_type_pdf #tipologyBlock .border { border-top: 0; } .object_type_pdf #pdf_title .border a { color: #000 !important; } .object_type_pdf .file { float: left; margin-left: 25px; height: 30px; line-height: 30px !important; clear: both; font-weight: bold; width: calc(100% - 50px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .object_type_pdf ul { clear: both; } .object_type_pdf ul.docs li { float: left; clear: both; margin: 0 0 0 65px; list-style: none; padding: 0 0 0 10px; } .object_type_pdf ul.docs li:before { font-size: 16px; content: "- "; } .object_type_pdf #pdf_dataBlock { width: 95%; margin: 0 auto; } .object_type_pdf main .counter { float: left; } .object_type_pdf main .scroll { width: 100%; } .object_type_pdf main .scroll { width: 100%; } .object_type_pdf main table td input[type=text].autofillCellLocator, main input[type=text].autofillCellLocator { width: calc(100% - 110px); } .object_type_pdf main table td input[type=text].autofillCell, main input[type=text].autofillCell { width: 100%; } .object_type_pdf main .counter { width: 100%; } .object_type_pdf main table td.simpleParam { text-align: right !important; width: 1%; white-space: nowrap; } .object_type_pdf main table td.multiParam { width: 100%; white-space: nowrap; } .object_type_pdf .border .derecha { float: right; margin-right: 10px; } .object_type_pdf .border .derecha a.clickArchive { color: #858585 !important; line-height: 21px; padding: 0 10px; font-weight: bold; font-size: 14px; } .object_type_pdf #status { float: right; margin: 10px 10px 0 0; } .object_type_pdf #tipologyBlock .border .derecha { background: #fff; padding-top: 0; margin: -3px 10px 0 0 !important; } .object_type_pdf #tree1 { margin: 25px 0 0 25px; } .object_type_pdf #tipology0Block .border { border-bottom: 0; } .object_type_pdf #analyze { padding: 12px 0 20px 0; float: left; } .object_type_pdf #status { padding: 5px 0 18px 0; float: right; } .object_type_pdf #verify { background: #858585; color: #fff; font-weight: bold; padding: 4px; border-radius: 5px; } .object_type_pdf #verify:hover { background: #4e4e4e; } .object_type_pdf .splitScreenArchivesContainer { background: #fff; overflow-x: auto; overflow-y: auto; position: relative; float: left; height: 100%; width: 55%; } .object_type_pdf .splitScreenContainer { display: flex; flex-direction: row; height: 100%; width: 100%; } .object_type_pdf .splitScreenArchivesContainer, .object_type_pdf .splitScreenViewerContainer { box-sizing: border-box; } .object_type_pdf .splitScreenArchivesContainer { background: #fff; overflow-x: auto; overflow-y: auto; position: relative; float: left; height: 100%; width: 55%; } .object_type_pdf .splitScreenHandler { width: 9px; height: 100%; padding: 0; cursor: ew-resize; } .object_type_pdf .splitScreenHandler::before { content: ""; display: block; width: 9px; height: 100%; background: #474747; margin: 0 auto; } .object_type_pdf .splitScreenViewerContainer { flex: 1; } body.object_type_pdf { margin-bottom: 0 !important; } .popup { background-color: #fff; background-image: none; overflow-x: auto; overflow-y: auto; margin: 0; padding: 10px; min-width: auto; } body.popup main #flex_container { width: calc(100% - 15px); } body.popup main [class^=container] { display: initial; width: calc(100% - 15px); max-width: calc(100% - 15px); margin: 0 auto; box-shadow: none; } body.popup main [class^=container] #main { padding: 0 !important; width: calc(100% - 15px); } body.popup main [class^=container] .alertas { width: calc(100% - 15px); } #popup { margin: 10px 0 0 0; padding: 0; width: calc(100% - 15px); height: 500px; } body.popup main [class^=container] { max-width: calc(100% - 15px); } #procesing_container { padding: 20px; text-align: center; font-size: 14px; font-weight: bold; color: #000; background: white; width: 300px; height: 70px; filter: alpha(opacity=70); opacity: 0.9; box-sizing: content-box; border: 1px solid rgba(0, 0, 0, 0.125); } .popup #procesing_container { display: none !important; } #procesing_container.processing_fixed { position: fixed; top: 0%; left: 50%; margin-left: -150px; margin-top: 220px; z-index: 6666; } #procesing_container.processing_modal { position: fixed; top: 50%; left: 50%; margin-top: -35px; margin-left: -150px; z-index: 6666; } /* Pulse */ .loader-thin-container { --thin-size: 50px; --thin-speed: 1s; --thin-color: var(--primary-color); } .loader-thin-container.thin-secondary { --thin-color: var(--secondary-color); } .loader-thin-container.thin-tertiary { --thin-color: var(--tertiary-color); } .loader-thin-container.thin-sm { --thin-size: 25px; } .loader-thin-container.thin-lg { --thin-size: 75px; } .loader-thin-container svg { width: 3.25em; transform-origin: center; animation: rotate4 2s linear infinite; } .loader-thin-container circle { fill: none; stroke: var(--thin-color); stroke-width: 2; stroke-dasharray: 1, 200; stroke-dashoffset: 0; stroke-linecap: round; animation: dash4 1.5s ease-in-out infinite; } @keyframes rotate4 { 100% { transform: rotate(360deg); } } @keyframes dash4 { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; } 100% { stroke-dashoffset: -125px; } } .loader-pulse-container { --pulse-size: 50px; --pulse-speed: 1s; --pulse-color: var(--primary-color); position: relative; height: var(--pulse-size); width: var(--pulse-size); } .loader-pulse-container.pulse-secondary { --pulse-color: var(--secondary-color); } .loader-pulse-container.pulse-tertiary { --pulse-color: var(--tertiary-color); } .loader-pulse-container.pulse-sm { --pulse-size: 25px; } .loader-pulse-container.pulse-lg { --pulse-size: 75px; } .loader-pulse-container::before, .loader-pulse-container::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 50%; background-color: var(--pulse-color); animation: pulse-scale-animation var(--pulse-speed) linear infinite; transform: scale(0); opacity: 0; } .loader-pulse-container::after { animation-delay: calc(var(--pulse-speed) / -2); } @keyframes pulse-scale-animation { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } /* Worm */ .loader-worm-container { --worm-size: 40px; --worm-speed: 2s; --worm-color: var(--primary-color); position: relative; display: flex; align-items: center; justify-content: space-between; width: var(--worm-size); height: var(--worm-size); } .loader-worm-container.worm-secondary { --worm-color: var(--secondary-color); } .loader-worm-container.worm-tertiary { --worm-color: var(--tertiary-color); } .loader-worm-container.worm-sm { --worm-size: 25px; } .loader-worm-container.worm-lg { --worm-size: 70px; } .loader-worm-container .loader-worm-dot { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%; } .loader-worm-container .loader-worm-dot::before { content: ""; display: block; height: calc(var(--worm-size) * 0.22); width: calc(var(--worm-size) * 0.22); border-radius: 50%; background-color: var(--worm-color); will-change: transform; } .loader-worm-container .loader-worm-dot:nth-child(1) { animation: worm-leap-animation var(--worm-speed) ease infinite; } .loader-worm-container .loader-worm-dot:nth-child(2) { transform: translateX(calc(var(--worm-size) * 0.4)); animation: worm-leap-animation var(--worm-speed) ease calc(var(--worm-speed) / -1.5) infinite; } .loader-worm-container .loader-worm-dot:nth-child(3) { transform: translateX(calc(var(--worm-size) * 0.8)) rotate(0deg); animation: worm-leap-animation var(--worm-speed) ease calc(var(--worm-speed) / -3) infinite; } @keyframes worm-leap-animation { 0% { transform: translateX(0) rotate(0deg); } 33.333% { transform: translateX(0) rotate(180deg); } 66.666% { transform: translateX(calc(var(--worm-size) * -0.4)) rotate(180deg); } 99.999% { transform: translateX(calc(var(--worm-size) * -0.8)) rotate(180deg); } 100% { transform: translateX(0) rotate(0deg); } } /* Dotted */ .loader-dotted-container { --dotted-size: 60px; --dotted-dot-size: 7px; --dotted-color: var(--primary-color); width: var(--dotted-size); height: var(--dotted-size); position: relative; } .loader-dotted-container.dotted-secondary { --dotted-color: var(--secondary-color); } .loader-dotted-container.dotted-tertiary { --dotted-color: var(--tertiary-color); } .loader-dotted-container.dotted-sm { --dotted-size: 30px; --dotted-dot-size: 4px; } .loader-dotted-container.dotted-lg { --dotted-size: 85px; --dotted-dot-size: 10px; } .loader-dotted-container .loader-dotted-dot { position: absolute; inset: 0; display: flex; justify-content: center; animation: dotted-spin-animation 2s infinite; } .loader-dotted-container .loader-dotted-dot::after { content: ""; width: var(--dotted-dot-size); height: var(--dotted-dot-size); border-radius: 50%; background-color: var(--dotted-color); } .loader-dotted-container .loader-dotted-dot:nth-child(2) { animation-delay: 100ms; } .loader-dotted-container .loader-dotted-dot:nth-child(3) { animation-delay: 200ms; } .loader-dotted-container .loader-dotted-dot:nth-child(4) { animation-delay: 300ms; } .loader-dotted-container .loader-dotted-dot:nth-child(5) { animation-delay: 400ms; } @keyframes dotted-spin-animation { to { transform: rotate(360deg); } } .rating { float: left; } .rating:not(:checked) > input { position: absolute; top: -9999px; clip: rect(0, 0, 0, 0); } .rating:not(:checked) > label { float: right; width: 1em; overflow: hidden; white-space: nowrap; cursor: pointer; font-size: 160%; color: #ddd; } .rating:not(:checked) > label:before { content: "★ "; } .rating > input:checked ~ label { color: var(--primary-color); } .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: var(--primary-color); } .rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label { color: var(--primary-color); } .rating > label:active { position: relative; top: 2px; left: 2px; } main .locator { width: 680px !important; /* En modo maximizado necesitamos que siga siendo 600px */ margin: 0 auto; padding: 0; } main .locator input, main .locator select { padding: 3px 5px; border-radius: 4px; min-height: 30px; } main .locator input:focus, main .locator select:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important; } main .locator .form-select { display: unset; } main .locator label { float: left; width: 160px; text-align: right; margin: 5px 10px 0 0; } main .locator p { margin-bottom: 0.5rem; display: flex; } main .locator p input[type=text] { border: 1px solid var(--bs-border-color); color: #495057; box-sizing: border-box; } main .locator select { margin: 0 10px 3px 0; width: 190px; /* Igual que el valor de jquery.multiselect.min.js */ } main .locator input { margin: 3px 10px 0 0; } main .locator .mini { width: 85.5px; } main .locator #advancedSearchButton { clear: both; display: block; margin: 10px 0 0 250px; cursor: pointer; } main .locator .bumensaje { border: 0; font-size: 11px; font-style: italic; margin-top: 5px; cursor: default; } main .locator .bumensaje:focus { border: 0; outline: none; } main .locator .treeLevelFilter { /* Para los árboles */ clear: both; } main .locator .twodate { /* Para fecha de inicio, entre */ margin: 3px 0 0 366px !important; } main .locator .timepicker { margin: 3px 0 0 -5px; } main .locator_filters .predefinedFilter_container { text-align: center; } main .locator_filters .predefinedFilter_container { width: 100%; } main .locator_filters .predefinedFilter_container .filter .mdi, main .locator_filters .predefinedFilter_container .filter .iconify--mdi { color: #4cb1e1; font-size: 60px; line-height: 60px; } main .locator .ui-multiselect { margin: 0 0 0 0 !important; width: 192px !important; border-radius: 3px !important; line-height: 25px; } main .locator .bumensaje { border: 0; font-size: 11px; font-style: italic; margin-top: 5px; cursor: default; } main .locator .bumensaje:focus { border: 0; outline: none; } main .container-fluid.locator { width: 100% !important; } body.rightPanel header .container { max-width: 100%; } body.rightPanel #maxminElement { display: none; } body.rightPanel main #navbar .showMainMenu { display: none !important; } body.rightPanel main #navbar .mdi-arrow-expand { display: none; } body.rightPanel main #navbar .breadCrumbs { width: 70%; } body.rightPanel main #navbar ul.iconsRight { position: relative; right: 0; } body.rightPanel main #menu_tabs { width: 100% !important; } body.rightPanel main [class^=container] { padding: 0 0 10px 0; box-shadow: none; max-width: inherit !important; } body.rightPanel main [class^=container].mainPanel { position: fixed; left: 0; overflow-y: auto; overflow-x: hidden; display: block !important; margin-top: 0; border-radius: 0; min-height: calc(100vh - 80px); height: calc(100% - 80px); } body.rightPanel main [class^=container].mainPanel #main { margin-bottom: 0px; } body.rightPanel main #navbar { margin-top: 10px; } body.rightPanel main #column { position: absolute; left: -10px; z-index: 665; box-shadow: -5px 2px 20px -14px rgba(0, 0, 0, 0.5); } body.rightPanel main #content { max-width: 100%; } body.rightPanel main #sidebar { position: absolute; right: -10px; z-index: 665; box-shadow: -5px 2px 20px -14px rgba(0, 0, 0, 0.5); width: 400px; max-width: 400px; } body.rightPanel main #sidebar .icons { margin-top: 0; } body.rightPanel main #sidebar .links .description .mdi-eye:before { content: ""; } body.rightPanel main section { width: auto !important; } body.rightPanel .rightPanelWithButtons { height: calc(100% - 45px); } body.rightPanel .rightPanelWithoutButtons { height: 100%; } body.rightPanel .rightPanelButtons { height: 45px; background-color: #2a2a2e; position: relative; top: -5px; } body.rightPanel footer { display: none !important; } body.rightPanel #navbar .mdi-eye-off { display: block !important; } body.rightPanel #header_object .mdi-eye-off { display: block !important; } body.rightPanel.iframe { display: inherit !important; /* Not flex */ background: #fff; } body:not(.rightPanel) .hideRightPanelElement { display: none; } #rightPanelModal .modal-dialog img { max-height: calc(100vh - 100px); } .rightPanelClose { width: 0px; background: #fff; display: none !important; height: 0; float: right; } .rightPanelOpen { right: 0; position: fixed; background: #fff; height: 100%; max-height: calc(100% - 80px); top: 80px; z-index: 666; } /* Archive Viewer (for Office files) */ .archive-viewer .viewer-archive-container.view-word-container { margin-top: 0 !important; margin-bottom: 0 !important; } .archive-viewer .viewer-archive-controls-container.viewer-archive-controls-static-container { margin-top: 0 !important; margin-bottom: 0 !important; } .archive-viewer .viewer-archive-controls-container.viewer-archive-controls-static-container, .archive-viewer .viewer-control-button { background-color: #38383d; } .archive-viewer .viewer-archive-controls-container.viewer-archive-controls-static-container .mdi-download::before, .archive-viewer .viewer-control-button .mdi-download::before { content: "\f0b8f"; /* Change to mdi-download-outline */ color: #ffffff; } .archive-viewer .viewer-control-button:hover .mdi:before { color: #38383d !important; } /* Quick search */ #column #spanSearchMenu { margin: 13px; } #column #spanSearchMenu input { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .ui-autocomplete { z-index: 6666 !important; max-height: 50vh; overflow-y: auto; /*top: 143px !important; Variable height depending on the service console */ left: 12px !important; width: 276px !important; border-radius: 5px !important; } body.service .ui-autocomplete { /*top: 189px !important; Variable height depending on the service console */ } .ui-autocomplete .ui-menu-item:hover { text-decoration: underline; } .ui-autocomplete .row { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 1rem; } .ui-autocomplete .mdi:hover, .ui-autocomplete .iconify--mdi:hover { color: #666; } #column #spanSearchMenu .input-group-lg > .form-control:not(textarea) { /* Height same as #header_object */ height: calc(3rem + 2px); } /***************************************/ /*********** Jquery ui menu ************/ /***************************************/ /* Prepared so that the drop-down menu options do not jump */ /* Being generic can cause problems, be careful */ .ui-menu .ui-menu-item a { padding: 2px 10px !important; } .ui-menu .ui-menu-item a .mdi, .ui-menu .ui-menu-item a .iconify--mdi { position: absolute; right: 0; cursor: pointer; font-size: 14px; padding: 0 5px; } #divServiceFooter { position: relative; } #divServiceFooter #services .notifications { margin-top: 0; } #services { margin-top: 1rem; margin-bottom: 1rem; } #services .console { padding: 5px 10px; line-height: 34px; } #services .console.conconnected { background: #a4e1cf; border: 1px solid #a4e1cf; color: #236847; } #services p { margin-bottom: 0; /* Bootstrap Fix */ } #services .console.condisconnected { background: #eee none repeat scroll 0 0; border: 1px solid #c3c3c3; color: #747474; } #services .console.condisconnected .mdi, #services .console.condisconnected .iconify--mdi { color: #747474; } #services .console em { margin: 4px 0 0 5px; } #services .console em, #services strong { font-size: 1rem; } #services .console a { float: right; font-size: 1.3rem; margin: 0 0 0 5px; } #services .console #moveVertical { margin-right: 5px; } #services .console a#loginConsoleButton, #services .console a#logoutConsoleButton { margin: 0 0 0 5px; } #services .console .listservices { margin: 5px 0 0 0; padding: 5px 10px; position: relative; background: #fff; color: #333; } #services .console .listservices p { padding: 5px 0; border-bottom: 1px dotted #ddd; font-weight: normal; font-style: italic; display: flex; justify-content: space-between; } #services .console .listservices p em { float: none; margin: 0; } #services .console .listservices p.connected { color: #68a951; } #services .console .listservices p.disconnected { color: #000; } #services .console .listservices p:last-child { border: 0; } #services .console .listservices p.connected span, #services .console .listservices p.disconnected span { width: 230px; font-size: 1rem; } #services .notifications { position: relative; display: none; margin: 5px 0 0 0 !important; padding: 0; } #services .notifications .notibox { background: #fff; margin-bottom: 5px; width: 100%; border-bottom: 1px solid #c3c3c3; } #services .notifications .notibox div i { /* This i is not an icon */ float: left; word-break: break-all; margin: 7px 10px 8px; font-weight: bold; font-style: normal; color: #434343; padding: 0; font-size: 1rem; } #services .notifications .notibox div i.service { /* This i is not an icon */ background: #f2f2f2; margin: 0; width: 100%; border-bottom: 1px solid #c3c3c3; border-top: 1px solid #c3c3c3; padding: 5px 4px 5px 10px; font-weight: bold; font-style: italic; } #services .notifications .notibox:last-child { margin-bottom: 0; } #services .notifications .notibox .header { width: 100%; margin: 0; color: #333; padding: 0; background: var(--primary-color); cursor: pointer; display: flex; } #services .notifications .notibox .header.collapsed { transition: 0.3s transform ease-in-out; } #services .notifications .notibox .header .mdi, #services .notifications .notibox .header .iconify--mdi { font-size: 1rem; text-align: center; color: #FFF; float: left; margin: 2px 0 0 2px; transition: 0.3s transform ease-in-out; } #services .notifications .notibox .header.collapsed .mdi, #services .notifications .notibox .header.collapsed .iconify--mdi { transform: rotate(-90deg) !important; } #services .notifications .notibox .header .title { width: 85%; color: #fff; margin: 5px 0; text-decoration: none; display: flex; align-items: center; } #services .notifications .notibox .header .title.long { width: 135px; /* When there are 3 icons */ } #services .notifications .notibox .header .title:hover { color: #fff; } #services .notifications .notibox span { font-size: 1rem; color: #000; font-style: italic; position: relative; word-break: break-all; display: block; border-top: 0; padding: 0.25rem; font-weight: 500; border-bottom: 1px solid #c3c3c3; } #services .notifications .notibox span.service { background: #edecec; } #services .notifications .notibox .buttons { width: 100%; background-color: #edecec; border-bottom: 0; margin: 0; display: flex; } #services .notifications .notibox .buttons ul { width: 100%; border-top: 0; margin: 0; padding: 0; display: flex; float: left; } #services .notifications .notibox .buttons ul li { font-size: 1rem; text-decoration: none; color: #666; float: left; background: none; padding: 0; margin: 0; clear: none; list-style: none; border-right: 1px solid #c3c3c3; flex: auto; } #services .notifications .notibox div em { border-top: 1px solid #c3c3c3; width: 100%; display: flex; background: #fff; padding: 0.25rem 0; } #services .notifications .notibox div em a { flex: auto; } #services .notifications .notibox div em a:last-child { flex: initial; } #services .notifications .notibox div[id^=info] ul { margin-bottom: 0; } #services .notifications .notibox div[id^=info] ul li { margin: 0 10px; list-style: none; margin: 0 15px 0 10px; /* At the request of FCO. More space on the right */ list-style: none; display: flex; width: 100%; } #services .notifications .notibox div[id^=info] ul li:before { content: "\f012e"; font: 7px "Material Design Icons"; color: var(--primary-color); padding: 5px; margin: 0; } #services .notifications .notibox div.buttons ul li:last-child { border-right: 0px; } #services .notifications div .sep { height: 16px; width: 2px; } #services .notifications .ok, #services .notifications .go, #services .notifications .postpone, #services .notifications .transfer { cursor: pointer !important; vertical-align: top; width: 100%; float: left; } #services .notifications .transferbox { padding: 10px; border-top: 1px solid #c3c3c3; margin: 0 auto; display: flex; flex-direction: row; width: 100%; } #services .notifications .transferbox input[type=text] { width: 100px; padding: 2px; border: 1px solid #c3c3c3; background: #fff; margin: 0 10px 0 0; } #services .notifications .transferbox .mdi, #services .notifications .transferbox .iconify--mdi { color: var(--primary-color); font-size: 1rem; margin-top: 5px; } #services .notifications .countdown { border-top: 1px solid #c3c3c3; width: calc(100% - 20px); padding: 10px 0 0 0; margin: 0px 0 10px 10px; font-style: normal; width: 100%; display: flex; } #services .notifications .countdown b { background: var(--primary-color); padding: 2px 4px; color: #fff; border-radius: 5px; margin: 0 2px; font-style: normal; font-weight: normal; } #services .console.conconnected .mdi, #services #activeMenuService .mdi:before, #services .console.conconnected .iconify--mdi, #services #activeMenuService .iconify--mdi:before { color: #236847; } #services .console.conconnected a .mdi:hover, #services .console.conconnected a .iconify--mdi:hover { color: #317b58; } #services .console.condisconnected a .mdi, #services .console div.listservices a .mdi, #services .console.condisconnected a .iconify--mdi, #services .console div.listservices a .iconify--mdi { color: #000; font-size: 1rem; } #services .console.condisconnected a .mdi:hover, #services .console div.listservices a .mdi:hover, #services .console.condisconnected a .iconify--mdi:hover, #services .console div.listservices a .iconify--mdi:hover { color: #666; } #services .notifications .notibox div.buttons ul li .mdi, #services .notifications .notibox div.buttons ul li .iconify--mdi { width: 100%; font-size: 1rem; text-align: center; color: #888; padding: 5px 0px 5px 0px; margin: 0; } #services .notifications .notibox div.buttons ul li .mdi:hover, #services .notifications .notibox div.buttons ul li .iconify--mdi:hover { color: #000; } #services .notifications .notibox .eminfo a span:before { color: var(--primary-color); float: left; clear: none; } #services .notifications .notibox .eminfo a span:before:hover { color: var(--primary-color-hover); } #services .info-box { font-size: 1rem; color: #000; font-style: italic; position: relative; word-break: break-all; width: 100%; } #navService.fixed-bottom { width: 300px; z-index: 50; right: 0; left: auto !important; } #navService.fixed-bottom .console.conconnected { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } #navService.fixed-bottom .notifications { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } .console.conconnected { background: #a4e1cf; border: 1px solid #a4e1cf; color: #236847; line-height: 34px; } #sidebar { width: 300px; padding: 0; background: #fff; min-height: 100%; margin-right: 0px; display: none; height: 100vh; overflow-y: scroll; } body.maximize #sidebar:not(.clicked) { width: 400px; position: absolute; display: none; z-index: 670; background: white; right: 0; } #sidebar .headertabs { background-color: var(--primary-color); padding: 0 20px; } #sidebar .headertabs .nav-tabs { border-bottom: 0; } #sidebar .headertabs .nav-tabs .nav-item .nav-link { margin-top: 5px; padding: 0 20px 2px; border: 0; } #sidebar .headertabs .nav-tabs .nav-item .nav-link .mdi, #sidebar .headertabs .nav-tabs .nav-item .nav-link:hover .mdi, #sidebar .headertabs .nav-tabs .nav-item .nav-link .iconify--mdi, #sidebar .headertabs .nav-tabs .nav-item .nav-link:hover .iconify--mdi { font-size: 24px; color: #fff; } #sidebar .headertabs .nav-tabs .active .mdi, #sidebar .headertabs .nav-tabs .active .iconify--mdi { color: var(--link-ico-color) !important; } #sidebar .tab-content { background: #fff; } #sidebar .tab-content .tab-pane h4.card-header { padding: 0; border-bottom: 0; background-color: transparent; margin-bottom: 1.5rem; text-transform: uppercase; font-weight: 600 !important; } #sidebar .icons { padding: 0 20px; margin-bottom: 5%; } #sidebar .icons ul { margin-bottom: 0; } #sidebar .icons li { list-style: none; display: inline; } #sidebar .icons li .mdi, #sidebar .icons li .iconify--mdi { font-size: 27px; color: var(--primary-color); display: inline-block; margin: 0 0.5rem 0 0; } #sidebar .icons li a { cursor: pointer; outline: 0; } @media (max-width: 991px) { main [class^=container] #sidebar { position: fixed; display: none; z-index: 670; background: white; top: 0; right: 0; display: none; width: 450px; } } @media (min-width: 1201px) { #sidebar { display: block; width: 350px; height: auto; overflow-y: hidden; } } @media (min-width: 1601px) { #sidebar { display: block; width: 450px; } } .status { --status-border-width: 1px; --status-border-style: solid; --status-border-color: #e6e7e9; --status-body-color: #1d273b; padding: 0.25rem 0.75rem; } /**/ .status-lg { font-size: 1rem !important; padding: 1rem !important; } .status-lg .status-dot { --status-size: 0.6rem; } .status-lg .status-donut { --status-size: 10px !important; } .status-sm { font-size: 0.75rem !important; padding: 0.7rem !important; } .status-sm .status-dot { --status-size: 0.35rem; } .status-sm .status-donut { --status-size: 8px !important; } /**/ .status-success { --status-color: var(--bs-success) !important; --status-color-rgb: var(--bs-success-rgb) !important; } .status-danger { --status-color: var(--bs-danger) !important; --status-color-rgb: var(--bs-danger-rgb) !important; } .status-warning { --status-color: var(--bs-warning) !important; --status-color-rgb: var(--bs-warning-rgb) !important; } .status-info { --status-color: var(--bs-info) !important; --status-color-rgb: var(--bs-info-rgb) !important; } .status-light { --status-color: var(--bs-light) !important; --status-color-rgb: var(--bs-light-rgb) !important; } .status-dark { --status-color: var(--bs-dark) !important; --status-color-rgb: var(--bs-dark-rgb) !important; } /**/ .status-lighter-primary { --status-color: var(--primary-color-lighter) !important; --status-color-rgb: var(--primary-color-lighter-rgb) !important; } .status-light-primary { --status-color: var(--primary-color-light) !important; --status-color-rgb: var(--primary-color-light-rgb) !important; } .status-primary { --status-color: var(--primary-color) !important; --status-color-rgb: var(--primary-color-rgb) !important; } .status-dark-primary { --status-color: var(--primary-color-dark) !important; --status-color-rgb: var(--primary-color-dark-rgb) !important; } .status-darker-primary { --status-color: var(--primary-color-darker) !important; --status-color-rgb: var(--primary-color-darker-rgb) !important; } .status-lighter-secondary { --status-color: var(--secondary-color-lighter) !important; --status-color-rgb: var(--secondary-color-lighter-rgb) !important; } .status-light-secondary { --status-color: var(--secondary-color-light) !important; --status-color-rgb: var(--secondary-color-light-rgb) !important; } .status-secondary { --status-color: var(--secondary-color) !important; --status-color-rgb: var(--secondary-color-rgb) !important; } .status-dark-secondary { --status-color: var(--secondary-color-dark) !important; --status-color-rgb: var(--secondary-color-dark-rgb) !important; } .status-darker-secondary { --status-color: var(--secondary-color-darker) !important; --status-color-rgb: var(--secondary-color-darker-rgb) !important; } .status-lighter-tertiary { --status-color: var(--tertiary-color-lighter) !important; --status-color-rgb: var(--tertiary-color-lighter-rgb) !important; } .status-light-tertiary { --status-color: var(--tertiary-color-light) !important; --status-color-rgb: var(--tertiary-color-light-rgb) !important; } .status-tertiary { --status-color: var(--tertiary-color) !important; --status-color-rgb: var(--tertiary-color-rgb) !important; } .status-dark-tertiary { --status-color: var(--tertiary-color-dark) !important; --status-color-rgb: var(--tertiary-color-dark-rgb) !important; } .status-darker-tertiary { --status-color: var(--tertiary-color-darker) !important; --status-color-rgb: var(--tertiary-color-darker-rgb) !important; } .status-lighter-blue { --status-color: var(--blue-color-lighter) !important; --status-color-rgb: var(--blue-color-lighter-rgb) !important; } .status-light-blue { --status-color: var(--blue-color-light) !important; --status-color-rgb: var(--blue-color-light-rgb) !important; } .status-blue { --status-color: var(--blue-color) !important; --status-color-rgb: var(--blue-color-rgb) !important; } .status-dark-blue { --status-color: var(--blue-color-dark) !important; --status-color-rgb: var(--blue-color-dark-rgb) !important; } .status-darker-blue { --status-color: var(--blue-color-darker) !important; --status-color-rgb: var(--blue-color-darker-rgb) !important; } .status-lighter-green { --status-color: var(--green-color-lighter) !important; --status-color-rgb: var(--green-color-lighter-rgb) !important; } .status-light-green { --status-color: var(--green-color-light) !important; --status-color-rgb: var(--green-color-light-rgb) !important; } .status-green { --status-color: var(--green-color) !important; --status-color-rgb: var(--green-color-rgb) !important; } .status-dark-green { --status-color: var(--green-color-dark) !important; --status-color-rgb: var(--green-color-dark-rgb) !important; } .status-darker-green { --status-color: var(--green-color-darker) !important; --status-color-rgb: var(--green-color-darker-rgb) !important; } .status-lighter-yellow { --status-color: var(--yellow-color-lighter) !important; --status-color-rgb: var(--yellow-color-lighter-rgb) !important; } .status-light-yellow { --status-color: var(--yellow-color-light) !important; --status-color-rgb: var(--yellow-color-light-rgb) !important; } .status-yellow { --status-color: var(--yellow-color) !important; --status-color-rgb: var(--yellow-color-rgb) !important; } .status-dark-yellow { --status-color: var(--yellow-color-dark) !important; --status-color-rgb: var(--yellow-color-dark-rgb) !important; } .status-darker-yellow { --status-color: var(--yellow-color-darker) !important; --status-color-rgb: var(--yellow-color-darker-rgb) !important; } .status-lighter-orange { --status-color: var(--orange-color-lighter) !important; --status-color-rgb: var(--orange-color-lighter-rgb) !important; } .status-light-orange { --status-color: var(--orange-color-light) !important; --status-color-rgb: var(--orange-color-light-rgb) !important; } .status-orange { --status-color: var(--orange-color) !important; --status-color-rgb: var(--orange-color-rgb) !important; } .status-dark-orange { --status-color: var(--orange-color-dark) !important; --status-color-rgb: var(--orange-color-dark-rgb) !important; } .status-darker-orange { --status-color: var(--orange-color-darker) !important; --status-color-rgb: var(--orange-color-darker-rgb) !important; } .status-lighter-red { --status-color: var(--red-color-lighter) !important; --status-color-rgb: var(--red-color-lighter-rgb) !important; } .status-light-red { --status-color: var(--red-color-light) !important; --status-color-rgb: var(--red-color-light-rgb) !important; } .status-red { --status-color: var(--red-color) !important; --status-color-rgb: var(--red-color-rgb) !important; } .status-dark-red { --status-color: var(--red-color-dark) !important; --status-color-rgb: var(--red-color-dark-rgb) !important; } .status-darker-red { --status-color: var(--red-color-darker) !important; --status-color-rgb: var(--red-color-darker-rgb) !important; } .status-lighter-brown { --status-color: var(--brown-color-lighter) !important; --status-color-rgb: var(--brown-color-lighter-rgb) !important; } .status-light-brown { --status-color: var(--brown-color-light) !important; --status-color-rgb: var(--brown-color-light-rgb) !important; } .status-brown { --status-color: var(--brown-color) !important; --status-color-rgb: var(--brown-color-rgb) !important; } .status-dark-brown { --status-color: var(--brown-color-dark) !important; --status-color-rgb: var(--brown-color-dark-rgb) !important; } .status-darker-brown { --status-color: var(--brown-color-darker) !important; --status-color-rgb: var(--brown-color-darker-rgb) !important; } .status-lighter-pink { --status-color: var(--pink-color-lighter) !important; --status-color-rgb: var(--pink-color-lighter-rgb) !important; } .status-light-pink { --status-color: var(--pink-color-light) !important; --status-color-rgb: var(--pink-color-light-rgb) !important; } .status-pink { --status-color: var(--pink-color) !important; --status-color-rgb: var(--pink-color-rgb) !important; } .status-dark-pink { --status-color: var(--pink-color-dark) !important; --status-color-rgb: var(--pink-color-dark-rgb) !important; } .status-darker-pink { --status-color: var(--pink-color-darker) !important; --status-color-rgb: var(--pink-color-darker-rgb) !important; } .status-lighter-purple { --status-color: var(--purple-color-lighter) !important; --status-color-rgb: var(--purple-color-lighter-rgb) !important; } .status-light-purple { --status-color: var(--purple-color-light) !important; --status-color-rgb: var(--purple-color-light-rgb) !important; } .status-purple { --status-color: var(--purple-color) !important; --status-color-rgb: var(--purple-color-rgb) !important; } .status-dark-purple { --status-color: var(--purple-color-dark) !important; --status-color-rgb: var(--purple-color-dark-rgb) !important; } .status-darker-purple { --status-color: var(--purple-color-darker) !important; --status-color-rgb: var(--purple-color-darker-rgb) !important; } .status-lighter-grey { --status-color: var(--grey-color-lighter) !important; --status-color-rgb: var(--grey-color-lighter-rgb) !important; } .status-light-grey { --status-color: var(--grey-color-light) !important; --status-color-rgb: var(--grey-color-light-rgb) !important; } .status-grey { --status-color: var(--grey-color) !important; --status-color-rgb: var(--grey-color-rgb) !important; } .status-dark-grey { --status-color: var(--grey-color-dark) !important; --status-color-rgb: var(--grey-color-dark-rgb) !important; } .status-darker-grey { --status-color: var(--grey-color-darker) !important; --status-color-rgb: var(--grey-color-darker-rgb) !important; } .status-black { --status-color: var(--black-color) !important; --status-color-rgb: var(--black-color-rgb) !important; } @keyframes status-pulsate-tertiary { 25% { transform: scale(1, 1); } 80% { transform: scale(3, 3); opacity: 0; } 100% { transform: scale(3, 3); opacity: 0; } } .status { --status-height: 1.5rem; --status-color: #616876; --status-color-rgb: 97, 104, 118; --status-text-color: #000; --status-font-weight: 500; --status-background-alpha: 0.2; display: inline-flex; align-items: center; height: var(--status-height); padding: 0.25rem 0.75rem; gap: 0.5rem; color: var(--status-text-color); background: rgba(var(--status-color-rgb), var(--status-background-alpha)); font-size: 0.875rem; text-transform: none; letter-spacing: normal; border-radius: 100rem; font-weight: var(--status-font-weight); line-height: 1; margin: 0; } .status .mdi, .status .iconify--mdi { color: var(--status-color) !important; font-size: 0.95rem !important; } .status svg { fill: var(--status-color) !important; } .status.status-lite { border: var(--status-border-width) var(--status-border-style) var(--status-border-color) !important; background: transparent !important; color: var(--status-body-color) !important; } .status .status-donut { --status-size: 0.65rem; width: var(--status-size); height: var(--status-size); display: inline-block; border: 2px solid var(--status-color); background: transparent; border-radius: 100rem; } .status ::after, .status ::before { box-sizing: border-box; } .status-dot { --status-dot-color: var(--status-color, #616876); --status-size: 0.5rem; position: relative; display: inline-block; width: var(--status-size); height: var(--status-size); background: var(--status-color) !important; border-radius: 100rem; } .status-dot.status-dot-animated:before { content: ""; position: absolute; inset: 0; z-index: 0; background: inherit; border-radius: inherit; opacity: 0.6; box-sizing: border-box; animation: 1s linear 2s backwards infinite status-pulsate-tertiary; } .status-indicator { --tblr-status-indicator-size: 2.5rem; --tblr-status-indicator-color: var(--status-color, #616876); display: block; position: relative; width: var(--tblr-status-indicator-size); height: var(--tblr-status-indicator-size); } .status-indicator-circle { --status-circle-size: .75rem; position: absolute; left: 50%; top: 50%; margin: calc(var(--status-circle-size) / -2) 0 0 calc(var(--status-circle-size) / -2); width: var(--status-circle-size); height: var(--status-circle-size); border-radius: 100rem; background: var(--status-color); } .status-indicator-circle:nth-child(1) { z-index: 3; } .status-indicator-circle:nth-child(2) { z-index: 2; opacity: 0.1; } .status-indicator-circle:nth-child(3) { z-index: 1; opacity: 0.3; } .status-indicator-animated .status-indicator-circle:nth-child(1) { animation: 2s linear 1s infinite backwards status-pulsate-main; } .status-indicator-animated .status-indicator-circle:nth-child(2) { animation: 2s linear 1s infinite backwards status-pulsate-secondary; } .status-indicator-animated .status-indicator-circle:nth-child(3) { animation: 2s linear 1s infinite backwards status-pulsate-tertiary; } /* Stepper */ .stepper { --stepper-font: var(--font-general); --stepper-circle-size: 48px; --stepper-circle-inner-size: 1rem; --stepper-title-size: .875rem; --stepper-subtitle-size: .875rem; --stepper-text: #000; --stepper-bg: #f4f4f4; --stepper-border: #D0D5DD; --stepper-active-text: #fff; --stepper-active-bg: var(--primary-color); --stepper-active-border: var(--primary-color); --stepper-passed-text: #fff; --stepper-passed-bg: var(--secondary-color); --stepper-passed-border: var(--secondary-color); display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 2rem; margin-bottom: 2rem; counter-reset: step; row-gap: 1rem; font-family: var(--stepper-font); } .stepper .step { color: var(--stepper-text); align-items: center; display: flex; flex-direction: column; position: relative; margin-top: 1rem; margin-bottom: 1rem; width: 100%; } .stepper .step-content { text-align: center; height: 100%; width: 100%; display: grid; grid-column-gap: 1rem; grid-template-columns: min-content auto; justify-items: start; align-items: first baseline; z-index: 1; } .stepper .step:not(:last-child):after { content: " "; display: block; width: 0.15rem; height: 100%; border-left: 0.15rem solid var(--stepper-border); position: absolute; left: calc(var(--stepper-circle-size) / 2); top: var(--stepper-circle-size); } .stepper .step.passed:not(:first-child):before, .stepper .step.passed:not(:last-child):after { border-color: var(--stepper-passed-border); width: calc(50% - var(--stepper-circle-size) / 2); z-index: 1; } .stepper .step-circle { border-radius: 50%; height: var(--stepper-circle-size); width: var(--stepper-circle-size); display: inline-flex; align-items: center; justify-content: center; color: var(--stepper-text); background-color: var(--stepper-bg); } .stepper .step-circle:before { display: inline-block; content: counter(step) " "; counter-increment: step; place-content: center; align-items: center; border-radius: 50%; font-weight: 700; font-size: var(--stepper-circle-inner-size); } .stepper .step-title { font-size: var(--stepper-title-size); color: var(--stepper-text); text-align: left; text-transform: uppercase; font-weight: 700; margin-block-end: 0.75rem; } .stepper .step-subtitle { font-size: var(--stepper-subtitle-size); margin-top: 0.5rem; color: var(--stepper-text); grid-column: 2; display: flex; align-items: center; } .stepper .step-subtitle > * { margin-top: auto; margin-bottom: auto; } .stepper .step-subtitle-status { padding: 0.25rem 1.5rem 0.25rem 1.5rem !important; border: 1px solid var(--stepper-border); border-radius: 50rem; } .stepper .step.active .step-circle { color: var(--stepper-active-text); background-color: var(--stepper-active-bg); border: 1px solid var(--stepper-active-border); } .stepper .step.active .step-subtitle-status { border-color: var(--stepper-active-border); } .stepper .step.passed .step-circle, .stepper .step.passed .step-circle:before { color: var(--stepper-passed-text); background-color: var(--stepper-passed-bg); border: 1px solid var(--stepper-passed-border); } .stepper .step.passed .step-subtitle-status { border-color: var(--stepper-passed-border); } @media (min-width: 576px) { .stepper { flex-wrap: nowrap; } .stepper .step { width: 100%; } .stepper .step-content { display: flex; flex-direction: column; align-items: center; row-gap: 1rem; } .stepper .step-title { text-align: center; margin-block-end: 0; } .stepper .step-subtitle { margin-top: auto; } .stepper .step:not(:last-child):after { content: ""; display: block; border-left: none; border-top: 0.15rem solid var(--stepper-border); width: calc(100% - var(--stepper-circle-size)); position: absolute; left: calc(50% + var(--stepper-circle-size) / 2); top: calc(var(--stepper-circle-size) / 2); } .stepper .step:not(:first-child):before { content: ""; display: block; border-top: 0.15rem solid var(--stepper-border); width: calc(100% - var(--stepper-circle-size)); position: absolute; right: calc(50% + var(--stepper-circle-size) / 2); top: calc(var(--stepper-circle-size) / 2); } .stepper .step.passed:not(:first-child):before, .stepper .step.passed:not(:last-child):after { border-color: var(--stepper-passed-border); width: calc(50% - var(--stepper-circle-size) / 2); z-index: 1; } } /* Fixed content */ body.fixed #menu_tabs { position: sticky; z-index: 10; /* 10 and only 10. Problem width datatable and modal */ box-shadow: 0 5px 5px rgba(182, 182, 182, 0.3); } #menu_tabs { background: #fff; width: 100%; position: relative; min-height: 45px; display: flex; padding: 0 20px 0 25px; } #menu_tabs:after { content: ""; position: absolute; top: 0; width: calc(100% - 45px); border-top: 1px solid #dee5ee; } #menu_tabs .maxmin { display: none; } #menu_tabs .tabs > ul li a, #menu_tabs .tabs > ul li p { position: relative; } #menu_tabs .tabs > ul li a:hover { opacity: 1; text-decoration: none; color: var(--primary-color) !important; } #menu_tabs .tabs > ul li a:before { transition: 300ms; height: 6px; content: ""; position: absolute; background-color: var(--primary-color); width: 0%; bottom: 0px; } #menu_tabs .tabs > ul li.selected p { color: var(--primary-color); } #menu_tabs .tabs > ul li.selected p:before, #menu_tabs .tabs > ul li.selected a:before { height: 4px; content: ""; position: absolute; background-color: var(--primary-color); width: 0%; bottom: 2px; width: calc(100% - 7px); } #menu_tabs .tabs > ul li a:hover::before { width: calc(100% - 7px); } #menu_tabs .tabs { overflow: hidden; position: relative; width: 100%; background: #fff; } #menu_tabs .tabs > ul { position: absolute; list-style-type: none; padding-right: 100px; margin-bottom: 0; } #menu_tabs .tabs > ul li { float: left; color: inherit; padding: 2px 10px 0 10px; text-align: center; cursor: pointer; } #menu_tabs .tabs > ul li:first-child { padding-left: 0; } #menu_tabs .tabs > ul li:hover a { color: #333333; } #menu_tabs .tabs > ul a, #menu_tabs .tabs > ul p { display: block; color: #333333; background: inherit; text-decoration: none; padding: 5px 4px 14px; font-size: 14px; margin: 5px 0 0 0; font-weight: bold; text-transform: uppercase; } #menu_tabs .tabs > ul a:hover { color: #fff; } #menu_tabs .tabs > ul li.disabled a, #menu_tabs .tabs > ul li.disabled:hover a { opacity: 0.4; color: var(--primary-color); text-decoration: none; cursor: default; } #menu_tabs .tabs > ul li.disabled a:before { position: relative !important; } #menu_tabs .control-menu { position: relative; float: right; margin: 0; } #menu_tabs .control-menu #prev, #menu_tabs .control-menu #next { cursor: pointer; float: left; font-size: 20px; } #menu_tabs .control-menu #prev { margin: -8px 0 0 -80px; } #menu_tabs .control-menu #next { margin: -8px 0 0 -57px; } #menu_tabs .control-menu .mdi:hover, #menu_tabs .control-menu .iconify--mdi:hover { color: #eaeaea; } #menu_tabs .control-menu .menu-expand { color: inherit; border-radius: 5px 5px 0 0; padding: 8px 0 2px 0; height: 32px; z-index: 666; width: 40px; text-align: center; position: absolute; right: 0; top: -8px; list-style: none; cursor: pointer; margin: 0; } #menu_tabs .control-menu .menu-expand #down { font-size: 20px; margin: 5px 0 0 10px; float: left; } #menu_tabs .control-menu .menu-expand ul { display: none; width: 200px; position: absolute; top: 25px; z-index: 0; left: auto; right: -1px; background: #fff; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 28px 0 0 0; } #menu_tabs .control-menu .menu-expand ul a { /* They asked us to be able to click on the entire area 100%, not just on the link */ text-decoration: none; color: #000; margin: 0; padding: 8px 0; display: block; width: 100%; font-weight: normal; } #menu_tabs .control-menu .menu-expand ul.row { /* When there are more than 15 options */ width: 400px; left: auto !important; right: -11px; margin-right: 10px; box-sizing: content-box; } #menu_tabs .control-menu .menu-expand ul.row li { float: left; width: 200px; } #menu_tabs .control-menu .menu-expand ul li:first-child { border-top: 0; } #menu_tabs .control-menu .menu-expand ul.row li:nth-child(1), #menu_tabs .control-menu .menu-expand ul.row li:nth-child(2) { border-top: 0; } #menu_tabs .control-menu .mdi, #menu_tabs .control-menu .iconify--mdi { color: var(--primary-color); } #menu_tabs .control-menu .mdi:hover, #menu_tabs .control-menu .iconify--mdi:hover { color: var(--primary-color-hover); } #menu_tabs .control-menu .mdi.disabled, #menu_tabs .control-menu .mdi.disabled:hover, #menu_tabs .control-menu .iconify--mdi.disabled, #menu_tabs .control-menu .iconify--mdi.disabled:hover { opacity: 0.5 !important; color: #fff !important; cursor: default; } #menu_tabs .control-menu ul { left: auto !important; right: 0; } #menu_tabs .control-menu .menu-expand ul li { list-style: none; text-align: left; border-top: 1px solid #d1d1d1; } #menu_tabs .control-menu .menu-expand ul li:hover { background: #f5f5f5; } #menu_tabs .control-menu .menu-expand ul li.border { /* This and the following is for when the number of elements is odd, add an empty item */ border-top: 1px solid #d1d1d1; } #menu_tabs .control-menu .menu-expand ul li.border:before { content: "" !important; } #menu_tabs .control-menu .menu-expand ul li a { display: flex; padding-right: 10px; } #menu_tabs .control-menu .menu-expand ul li a:before { font: 12px "Material Design Icons"; content: "\f040a"; color: #8d8d8d; margin-right: 5px; margin-left: 10px; margin-top: 4px; display: inline-block; } #menu_tabs .control-menu .mdi.disabled, #menu_tabs .control-menu .mdi.disabled:hover, #menu_tabs .control-menu .iconify--mdi.disabled, #menu_tabs .control-menu .iconify--mdi.disabled:hover { opacity: 0.5 !important; color: #fff !important; cursor: default; } #menu_tabs > .icons > ul > li:not(:last-child) { margin-right: 0.5rem; } #menu_tabs .icons > ul.nav > li span { display: block; margin: 7px 0 0 0; } /***************************************/ /*************** Tabs ******************/ /***************************************/ main ul.tabs { float: left; list-style: none; width: 100%; border-radius: 5px 0 -50px 0; margin: 0; padding: 0; } main ul.tabs li { float: left; height: 45px; line-height: 45px; border: 1px solid rgba(var(--primary-color-rgb), 0.125); overflow: hidden; position: relative; background: var(--primary-color-lighter); border-top-left-radius: 5px; border-top-right-radius: 5px; margin: -10px 5px -1px 0; padding: 0 15px; } main ul.tabs li .mdi:before, main ul.tabs li .iconify--mdi:before { color: var(--primary-color); } main ul.tabs li a { text-decoration: none; color: #000; display: block; border: 0; outline: none; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 0 20px; } main ul.tabs li:hover { background: rgba(var(--primary-color-rgb), 0.2); } main ul.tabs li.active, main ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; } main .tabContainer { border: 1px solid rgba(0, 0, 0, 0.125); overflow: hidden; clear: both; float: left; width: 100%; background: #fff; border-radius: 5px; border-top-left-radius: 0; margin: 0; } main .tabContainer { padding: 0; } main .tabContent { padding: 20px; min-height: 30px; } /* Simple tabs adapted to the integral view */ main #integral_view, main #integral_view .block { padding: 0; margin: 0; } main .integral_view ul.tabs li a { padding: 0; } main .integral_view ul.tabs li strong { padding: 0 12px; color: var(--primary-color); font-size: 15px; } main .integral_view ul.tabs li .mdi:before, main .integral_view ul.tabs li .iconify--mdi:before { padding: 2px 8px; color: rgba(var(--primary-color-rgb), 0.6); font-size: 25px; } main .integral_view ul.tabs li a:hover .mdi, main .integral_view ul.tabs li a:hover .iconify--mdi { color: #939292; } main .integral_view ul.tabs li.active .mdi, main .integral_view ul.tabs li.active .iconify--mdi, main .integral_view ul.tabs li.active strong, main .integral_view ul.tabs li.active a:hover .mdi, main .integral_view ul.tabs li.active a:hover .iconify--mdi, main .integral_view ul.tabs li.active a:hover strong { color: #000; font-size: 15px; } main .integral_view div[id^=tab_cases] .slide p, main .integral_view div[id^=tab_task] .slide p { margin-left: 65px; } main .integral_view div[id^=tab_cases] .slide p a, main .integral_view div[id^=tab_task] .slide p a { margin-left: -15px; } /* The slides can appear in the main tab or in the interior ones, I do not prefix them */ main .integral_view .tabContent .slide { width: 100%; margin: 5px 0 -20px 0; } main .integral_view .tabContent .sub { display: block; margin: 0 0 0 30px; width: 100%; } main .integral_view .tabContent p { width: 100%; } main .integral_view .tabContent .slide span { display: block; clear: both; cursor: default; } main .integral_view .tabContent .slide span { margin: 5px 0 5px 5px; } main .integral_view .tabContent .slide span.closed, main .integral_view .tabContent .slide span.opened { cursor: pointer; margin-left: 20px; } main .integral_view .tabContent .slide span:before { font-size: 15px; content: "-"; padding-right: 5px; color: #000; } main .integral_view .tabContent .slide span[class^=estado] { display: initial; clear: initial; margin: initial; font-weight: bold; } main .integral_view .tabContent .slide span[class^=estado]:before { content: initial; } main .integral_view .tabContent .slide span.opened:before { font: 15px "Material Design Icons"; content: "\f0140"; } main .integral_view .tabContent .slide span.closed:before { font: 15px "Material Design Icons"; content: "\f0142"; } main .integral_view .tabContent .slide p { clear: both; float: left; width: 80%; margin-left: 50px; margin-right: -115px; } main .integral_view .tabContent .slide p .mdi, main .integral_view .tabContent .slide p .mdi:hover, main .integral_view .tabContent .slide p .iconify--mdi, main .integral_view .tabContent .slide p .iconify--mdi:hover { font-size: 10px; } main .integral_view .tabContent .slide p a { overflow-wrap: break-word; } main .integral_view .tabContent .slide p a:before { font: 10px "Material Design Icons"; content: "\f05b0"; padding-right: 5px; color: #989797; } main .integral_view .tabContent .slide p strong { padding: 0 0 0 20px; margin: 0 0 0 -20px; word-break: break-all; } /**/ main .integral_view .tabContent.tab_summary .left { float: left; width: calc(59% - 20px); margin: 0 0 10px 0; } main .integral_view .tabContent.tab_summary .right { float: left; width: 40%; border-left: 1px solid #dedede; padding-left: 20px; margin-bottom: 20px; } main .integral_view .tabContent.tab_summary .left span[class*=ico_] { font-size: 18px; padding: 0 10px; line-height: 20px; display: block; font-weight: bold; color: var(--primary-color); margin-bottom: 1rem; } main .integral_view .tabContent.tab_summary .left span[class*=ico_]:before { font: 20px "Material Design Icons"; padding-right: 5px; color: var(--primary-color); } main .integral_view .tabContent.tab_summary .left span.ico_interactions:before { content: "\f0182"; } main .integral_view .tabContent.tab_summary .left span.ico_cases:before { content: "\f0224"; } main .integral_view .tabContent.tab_summary .left span.ico_tasks:before { content: "\f014d"; } main .integral_view .tabContent.tab_summary .left span.ico_attachments:before { content: "\f039b"; } main .integral_view .tabContent.tab_summary .left span.ico_paymentAgreement:before { content: "\f0a4f"; } main .integral_view .tabContent.tab_summary .left span.ico_campaigns:before { content: "\f05dd"; } main .integral_view .tabContent.tab_summary .left span.ico_products:before { content: "\f03d7"; } main .tabContent.tab_summary .left span.ico_contracts:before { content: "\f03ea"; } main .integral_view .tabContent.tab_summary .left hr { margin: 10px 20px 10px 0; } main .tabContent.tab_summary .left span.ico_debt:before { content: "\f05e4"; } /* Comparator */ .popUpIframeElementCompare #menu_tabs { display: none; } @media (min-width: 1201px) { #menu_tabs .maxmin { display: block; } } /**********************/ /**** Timeline CRM ****/ /**********************/ .timeline { position: relative; margin: 0 0 0 20px; } .timeline .timeline-block { position: relative; min-height: 16px; padding-left: 35px; padding-right: 35px; } .timeline .timeline-block::before { content: ""; position: absolute; height: 100%; left: 0; top: 0; } .timeline .timeline-last-block::before, .timeline .timeline-block:last-child::before { display: none; } .timeline .timeline-block::after { content: ""; display: table; clear: both; } .timeline .timeline-ico .mdi, .timeline .timeline-ico .iconify--mdi { display: block; color: var(--primary-color) !important; } .timeline .timeline-ico { position: absolute; min-width: 1px; min-height: 1px; left: 0; top: 0; } .timeline .timeline-block::before { width: 2px; background: var(--primary-color); margin-left: -2px; } .timeline .timeline-block { padding-bottom: 40px; } .timeline .timeline-last-block { padding-bottom: 10px !important; } .timeline .timeline-ico { padding: 0; top: -10px; width: 25px; height: 58px; color: var(--primary-color); text-align: center; font-size: 24px; transform: rotate(180deg); } .timeline .timeline-ico > span:first-of-type { position: relative; display: block; width: 40px; height: 40px; border: 2px solid var(--primary-color); box-sizing: content-box; transform: none; border-radius: 50%; background: #fff; left: 2px; top: 5px; } .timeline .timeline-ico .mdi, .timeline .timeline-ico .iconify--mdi { display: block; line-height: 23px; font-size: 1em; position: relative; top: 6px; transform: rotate(180deg); } .timeline .timeline-ico { margin-right: -31px; } .timeline-content-inner { position: relative; word-break: break-all; } .timeline-content-inner p.date { margin: 0 0 5px; font-weight: bold; color: var(--primary-color); } .timeline-content-inner p { margin: 0; color: #000; line-height: 20px; } /**/ .timeline .timeline-block.passed .timeline-ico span { border: 2px solid var(--primary-color); } .timeline .timeline-block.passed .timeline-ico .mdi:before, .timeline .timeline-block.passed .timeline-ico .iconify--mdi:before { color: var(--primary-color); } .timeline .timeline-block.passed:before { background-image: linear-gradient(var(--primary-color-rgb) 100%, rgba(255, 255, 255, 0) 0%) !important; } /**/ .timeline .timeline-block.not_passed .timeline-ico span { border: 2px solid var(--primary-color); } .timeline .timeline-block.not_passed .timeline-ico .mdi:before, .timeline .timeline-block.not_passed .timeline-ico .iconify--mdi:before { color: var(--primary-color); } .timeline .timeline-block.not_passed:before { background: linear-gradient(to bottom, var(--primary-color) 70%, #ccc 70%, #ccc 50%, #ccc 50%); } /**/ .timeline .timeline-block.empty .timeline-ico span { border: 2px solid #ccc; } .timeline .timeline-block.empty .timeline-ico .mdi:before, .timeline .timeline-block.empty .timeline-ico .iconify--mdi:before { color: #ccc; } .timeline .timeline-block.empty:before { background-image: linear-gradient(#ccc 100%, rgba(255, 255, 255, 0) 0%) !important; } /**********************/ /**** Timeline Portal ****/ /**********************/ .timeline-container { position: relative; margin: 5rem 0 0 20px; --inactive-color: #6c6c6c; --inactive-border-color: #bbb; /* list-group-item */ } .timeline-container .clickable { cursor: pointer; } .timeline-container .clickable:hover { text-decoration: underline; } .timeline-container h2 { color: var(--inactive-color); margin-bottom: 1.6rem; margin-left: -35px; line-height: 25px; padding-left: 32px; padding-bottom: 10px; border-left: 4px solid var(--inactive-border-color); } .timeline-container .timeline-ico { position: absolute; min-width: 1px; min-height: 1px; left: 0; padding: 0; top: -10px; width: 25px; height: 58px; text-align: center; font-size: 24px; transform: none; z-index: 666; } .timeline-container .timeline-ico span { position: relative; display: block; width: 40px; height: 40px; border: 2px solid var(--primary-color); box-sizing: content-box; transform: none; border-radius: 50%; left: 2px; top: 5px; border: 0; display: flex; justify-content: center; align-items: center; font-size: 19px; font-weight: bold; color: #fff; background: var(--inactive-border-color); } .timeline-container .timeline-block { position: relative; min-height: 16px; padding-left: 35px; padding-right: 35px; padding-bottom: 25px; } .timeline-container .timeline-block h2 { border-left: 4px solid transparent; } .timeline-container .timeline-block .ok { background: #8d90a6; display: block; color: var(--primary-color); font-size: 25px; font-weight: bold; transform: none; } .timeline-container .timeline-block.passed h2 { border-left: 4px solid var(--primary-color); color: var(--primary-color); } .timeline-container .timeline-block.passed .clickable { color: #ddd; } .timeline-container .timeline-block.passed .ok { background: var(--primary-color); } .timeline-container .timeline-block.passed .ok .mdi::before, .timeline-container .timeline-block.passed .ok .iconify--mdi::before { color: var(--primary-color-contrast-text); } .timeline-container .timeline-block.passed .number { background: #ddd; color: #777; } .timeline-container .timeline-block.passed .timeline-ico span { border: 0; } .timeline-container .timeline-block.passed .list-group-item { background: none; color: #ddd; border-left: 4px solid var(--inactive-border-color); } .timeline-container .timeline-block.passed .list-group-item.passed { background: none; color: var(--primary-color); border-left: 4px solid var(--primary-color); } .timeline-container .timeline-block.passed .list-group-item.passed:after { color: var(--primary-color); } .timeline-container .timeline-block.passed.alone .timeline-ico .mdi:before, .timeline-container .timeline-block.passed.alone .timeline-ico .iconify--mdi:before { color: var(--primary-color-contrast-text); font-size: 25px; display: block; margin-top: -12px; } .timeline-container .timeline-block.passed.alone .timeline-ico { top: 0; } .timeline-container .timeline-block.passed.alone .timeline-ico span { border: 0; } .timeline-container .timeline-block.active h2 { color: var(--primary-color); border-left: 4px solid var(--primary-color); } .timeline-container .timeline-block.disabled h2 { border-left: 4px solid var(--inactive-border-color); } .timeline-container .timeline-block.active.alone h2, .timeline-container .timeline-block.disabled.alone h2, .timeline-container .timeline-block.passed.alone h2 { border-left: 4px solid transparent; } .timeline-container .timeline-block.active .number, .timeline-container .timeline-block.passed .number { background: var(--primary-color); color: var(--primary-color-contrast-text); } .timeline-container .timeline-content-inner { margin-left: 20px; } .timeline-container .list-group { position: relative; top: -21px; } .timeline-container li { color: var(--primary-color); background: inherit; font-size: 13px; padding: 0 0 0.5rem; } .timeline-container .list-group-item { color: var(--inactive-color); padding: 0 10px 0rem 0; padding-left: 0px; border: 0; border-left-color: currentcolor; border-left-style: none; border-left-width: 0px; min-width: 200px; margin-left: -35px; border-left: 4px solid var(--inactive-border-color); line-height: 25px; padding-left: 35px; } .timeline-container .list-group-item:first-child { border-top-left-radius: 0; border-top-right-radius: 0; } .timeline-container .list-group-item:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .timeline-container .list-group-item.active { background: none; border-left: 4px solid var(--primary-color); font-weight: bold !important; color: var(--primary-color); } .timeline-container .list-group-item.passed { background: none; color: var(--primary-color); border-left: 4px solid var(--primary-color); } .timeline-container .list-group-item.passed:after { content: "\f012c"; font: 16px "Material Design Icons"; line-height: 0; margin-left: 5px; color: var(--primary-color); } .token-selector { box-sizing: border-box !important; padding: 10px !important; cursor: pointer !important; border-radius: 4px !important; margin-bottom: 10px !important; } .mdi-json { position: absolute; top: 8px; right: 3px; font-size: 17px; float: right; } a[class*=tokenTemplatesButton-] span.cke_button_icon::before { content: "\f0626"; font: normal normal normal 16px/1 "Material Design Icons"; } body.widget { background: #fff; background-image: none; padding: 0; } body.widget main [class^=container] { max-width: 100%; width: 100%; padding: 0; } body.widget main [class^=container] > form, body.widget main [class^=container] > form #main { width: 100%; } body.widget .jmesa.caption_top { padding-top: 0; } body.widget .jmesa caption { display: none; } body.widget #legend { display: none; } .body.widget main #content #main { width: 100%; padding: 0 !important; } .body.widget #content { width: 100%; max-width: 100%; } .opacity-0 { opacity: 0; } .opacity-10 { opacity: 0.1; } .opacity-20 { opacity: 0.2; } .opacity-30 { opacity: 0.3; } .opacity-40 { opacity: 0.4; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-80 { opacity: 0.8; } .opacity-90 { opacity: 0.9; } .opacity-100 { opacity: 1; } .cursor-alias { cursor: alias !important; } .cursor-all-scroll { cursor: all-scroll !important; } .cursor-auto { cursor: auto !important; } .cursor-cell { cursor: cell !important; } .cursor-context-menu { cursor: context-menu !important; } .cursor-col-resize { cursor: col-resize !important; } .cursor-copy { cursor: copy !important; } .cursor-crosshair { cursor: crosshair !important; } .cursor-default { cursor: default !important; } .cursor-e-resize { cursor: e-resize !important; } .cursor-ew-resize { cursor: ew-resize !important; } .cursor-grab { cursor: -webkit-grab !important; cursor: grab !important; } .cursor-grabbing { cursor: -webkit-grabbing !important; cursor: grabbing !important; } .cursor-help { cursor: help !important; } .cursor-move { cursor: move !important; } .cursor-n-resize { cursor: n-resize !important; } .cursor-ne-resize { cursor: ne-resize !important; } .cursor-nesw-resize { cursor: nesw-resize !important; } .cursor-ns-resize { cursor: ns-resize !important; } .cursor-nw-resize { cursor: nw-resize !important; } .cursor-nwse-resize { cursor: nwse-resize !important; } .cursor-no-drop { cursor: no-drop !important; } .cursor-none { cursor: none !important; } .cursor-not-allowed { cursor: not-allowed !important; } .cursor-pointer { cursor: pointer !important; } .cursor-progress { cursor: progress !important; } .cursor-row-resize { cursor: row-resize !important; } .cursor-s-resize { cursor: s-resize !important; } .cursor-se-resize { cursor: se-resize !important; } .cursor-sw-resize { cursor: sw-resize !important; } .cursor-text { cursor: text !important; } .cursor-w-resize { cursor: w-resize !important; } .cursor-wait { cursor: wait !important; } .cursor-zoom-in { cursor: zoom-in !important; } .cursor-zoom-out { cursor: zoom-out !important; } .ribbon_container { position: relative; background: #eee; } .ribbon_container .ribbon { position: fixed; left: -5px; top: -5px; z-index: 665; } body.maximize .ribbon_container .ribbon { position: relative; left: -5px; top: -5px; z-index: 665; } .ribbon_container .ribbon span { font-size: 10px; font-weight: bold; color: #FFF; text-transform: uppercase; text-align: center; line-height: 20px; transform: rotate(-45deg); width: 100px; display: block; background: #79A70A; background: linear-gradient(#9BC90D 0%, #79A70A 100%); box-shadow: 0 3px 10px -5px black; position: absolute; top: 19px; left: -21px; } .ribbon_container .ribbon span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #79A70A; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #79A70A; } .ribbon_container .ribbon span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #79A70A; border-bottom: 3px solid transparent; } .ribbon_container .ribbon span.blue, .ribbon_container .ribbon span.red, .ribbon_container .ribbon span.gray, .ribbon_container .ribbon span.cian, .ribbon_container .ribbon span.orange { font-size: 10px; font-weight: bold; color: #FFF; text-transform: uppercase; text-align: center; line-height: 20px; transform: rotate(-45deg); width: 100px; display: block; position: absolute; top: 19px; left: -21px; box-shadow: 0 3px 10px -5px black; } .ribbon_container .ribbon span.blue::before, .ribbon_container .ribbon span.blue::after, .ribbon_container .ribbon span.red::before, .ribbon_container .ribbon span.red::after, .ribbon_container .ribbon span.gray::before, .ribbon_container .ribbon span.gray::after, .ribbon_container .ribbon span.cian::before, .ribbon_container .ribbon span.cian::after, .ribbon_container .ribbon span.orange::before, .ribbon_container .ribbon span.orange::after { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; } .ribbon_container .ribbon span.blue { background: #79A70A; background: linear-gradient(#2989d8 0%, #1e5799 100%); } .ribbon_container .ribbon span.blue::before { border-left: 3px solid #1e5799; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #1e5799; } .ribbon_container .ribbon span.blue::after { border-left: 3px solid transparent; border-right: 3px solid #1e5799; border-bottom: 3px solid transparent; } .ribbon_container .ribbon span.red { background: #79A70A; background: linear-gradient(#F70505 0%, #8F0808 100%); } .ribbon_container .ribbon span.red::before { border-left: 3px solid #8F0808; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #8F0808; } .ribbon_container .ribbon span.red::after { border-left: 3px solid transparent; border-right: 3px solid #8F0808; border-bottom: 3px solid transparent; } .ribbon_container .ribbon span.gray { background: #79A70A; background: linear-gradient(#B6BAC9 0%, #808080 100%); } .ribbon_container .ribbon span.gray::before { border-left: 3px solid #808080; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #808080; } .ribbon_container .ribbon span.gray::after { border-left: 3px solid transparent; border-right: 3px solid #808080; border-bottom: 3px solid transparent; } .ribbon_container .ribbon span.cian { background: #79A70A; background: linear-gradient(#05EFF7 0%, #087F8F 100%); } .ribbon_container .ribbon span.cian::before { border-left: 3px solid #087F8F; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #087F8F; } .ribbon_container .ribbon span.cian::after { border-left: 3px solid transparent; border-right: 3px solid #087F8F; border-bottom: 3px solid transparent; } .ribbon_container .ribbon span.orange { background: #79A70A; background: linear-gradient(#F79E05 0%, #8F5408 100%); } .ribbon_container .ribbon span.orange::before { border-left: 3px solid #8F5408; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #8F5408; } .ribbon_container .ribbon span.orange::after { border-left: 3px solid transparent; border-right: 3px solid #8F5408; border-bottom: 3px solid transparent; } @media (max-width: 991px) { .ribbon_container .ribbon { position: relative; left: -5px; top: -5px; z-index: 665; } .ribbon_container .ribbon { position: fixed; left: -5px; top: -5px; z-index: 665; } } body.main #navbar { background: transparent; padding: 0; } body.main #navbar .iconsLeft .mdi-home { display: block; pointer-events: none; } body.main #navbar .iconsLeft .mdi-home:hover { cursor: default; } #navbar { padding: 0 0 5px 0; display: flex; flex: 0 0 100%; padding: 10px 30px; background-color: #fff; } #navbar ul { margin: 3px 0 0 0; } #navbar ul li { list-style: none; float: left; /* It cannot be display:inline because hidden elements are shown (hamburgers) */ } #navbar ul.breadCrumbs { max-width: 1165px; /* If the width is put in #navbar there are problems in IE10 */ margin: 0; } #navbar ul.breadCrumbs li { padding: 5px; } #navbar ul.breadCrumbs li:not(:last-child):after { content: "\f040a"; font: 15px "Material Design Icons"; color: #000; margin: 0 10px; } #navbar ul.iconsLeft { display: flex; } #navbar ul.iconsLeft .mdi, #navbar ul.iconsLeft .iconify--mdi { float: left; margin-right: 5px; } #navbar ul.iconsRight { display: flex; margin-left: auto; } #navbar ul.iconsRight .mdi, #navbar ul.iconsRight .iconify--mdi { margin-left: 5px; } #navbar .mdi, #navbar .iconify--mdi { font-size: 22px; display: block; } #navbar .iconify--mdi:hover, #navbar .mdi:hover { color: var(--primary-color-hover); } #navbar .iconsLeft, #navbar .iconsRight { float: left; margin: 0; } #navbar .mdi-eye-off.hide { display: none !important; } /* OC-CHAT */ .oc-chat-open-container { z-index: 1000 !important; cursor: pointer; } .oc-chat-open-container .mdi, .oc-chat-open-container .iconify--mdi { color: #fff; } .oc-chat-container { position: fixed; right: 10px; bottom: 10px; z-index: 1000; width: 300px; height: 496px; border-radius: 8px; margin: 1rem; touch-action: none; user-select: none; box-sizing: border-box; display: flex; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); } .oc-chat-container-landscape { height: 496px; border-radius: 5px; margin: 1rem; touch-action: none; user-select: none; box-sizing: border-box; display: flex; border: 1px solid rgba(0, 0, 0, 0.125); } .oc-chat-header { font-size: 11px; line-height: 23px; font-weight: bold; color: #fff; padding: 3px 10px; box-sizing: border-box; border-radius: 8px 8px 0px 0px; } .oc-chat-header .title { font-size: 14px; } .oc-chat-header-icon { color: #fff; font-size: 18px; cursor: pointer; transition: color 0.5s; } .oc-chat-header-icon:hover { color: #eee; } .oc-chat-header-icon-arrow { font-size: 25px; } .oc-chat-header select { font-size: 11px; width: 40%; border: 0; float: right; margin-right: 5px; } .oc-chat-users-connected-landscape { font-size: 11px !important; color: #fff; display: flex; border-top-left-radius: 5px; border-top-right-radius: 5px; min-height: 35px; align-items: center; } .oc-chat-users-connected-landscape .mdi, .oc-chat-users-connected-landscape .iconify--mdi { font-size: 11px !important; color: #9EFF9A !important; margin-top: -3px !important; display: inline-block; } .oc-chat-users-connected { font-size: 11px !important; line-height: 10px !important; color: #fff; padding: 0px 5px 1px; box-sizing: border-box; display: flex; } .oc-chat-users-connected .mdi, .oc-chat-users-connected .iconify--mdi { font-size: 11px !important; color: #9EFF9A !important; } /* CHAT BODY */ .oc-chat-body { padding: 4px 10px; height: 100%; background: url("../../../images/chat.png"); overflow-y: auto; width: 100%; user-select: text; } .oc-chat-select { padding: 4px 15px; height: 100%; background: url("../../../images/chat.png"); overflow-y: auto; width: 100%; border-radius: 0px 0px 8px 8px; display: flex; } .oc-chat-sub-interaction { list-style: none; margin-top: 10px; position: relative; } /* left */ .oc-chat-sub-interaction .arrow-left { position: absolute; top: 0px; left: 57px; bottom: 150px; border: 15px solid transparent; border-top-color: #fff; } .left-sub-interaction .user { line-height: 10px; margin: 0px 10px 0 7px; text-align: center; font-size: 25px; border-radius: 50%; width: 50px; height: 50px; color: #000; float: left; display: flex; justify-content: center; align-items: center; } .left-sub-interaction { overflow: hidden; } .left-sub-interaction p { background-color: #fff; padding: 10px; border-radius: 5px; float: left; width: calc(100% - 75px); margin-bottom: 20px; } .left-sub-interaction p .mdi, .left-sub-interaction p .iconify--mdi { float: none; } .left-sub-interaction span { position: absolute; left: 70px; top: 60px; color: #B7BCC5; } .left-sub-interaction p { color: #000; } /* right */ .right-sub-interaction .mdi .right-sub-interaction .iconify--mdi { font-size: 17px; width: 50px; height: 50px; border-radius: 50%; margin: 0px 10px; text-align: center; float: right; line-height: 11px; } .oc-chat-sub-interaction .arrow-right { position: absolute; top: 0px; right: 55px; bottom: 150px; border: 15px solid transparent; } .right-sub-interaction .user { /*! line-height: 10px; */ margin: 0px 10px; text-align: center; font-size: 25px; border-radius: 50%; width: 50px; height: 50px; color: #000; float: right; display: flex; align-items: center; justify-content: center; } .right-sub-interaction { overflow: hidden; } .right-sub-interaction p { background-color: #fff; padding: 10px; border-radius: 5px; float: left; width: calc(100% - 185px); margin-bottom: 20px; } .right-sub-interaction p .mdi, .right-sub-interaction p .iconify--mdi { float: none; } .right-sub-interaction span { position: absolute; left: 70px; top: 60px; color: #B7BCC5; } .right-sub-interaction span { left: 45px; } .right-sub-interaction p { float: right !important; color: #fff; } .right-sub-interaction .mdi .mdi-comment-processing:before, .right-sub-interaction .iconify--mdi .mdi-comment-processing:before { position: absolute; right: 16px; top: 10px; } .right-sub-interaction .mdi, .right-sub-interaction .iconify--mdi { font-size: 25px !important; } .right-sub-interaction a:hover { text-decoration: underline; } /**/ .right-sub-interaction.telegram .arrow-right { border-top-color: #2fa3df; } .right-sub-interaction.telegram p, .right-sub-interaction.telegram .mdi, .right-sub-interaction.telegram .iconify--mdi { background: #2fa3df; color: #fff !important; } .right-sub-interaction.telegram a { color: #fff !important; } /**/ .right-sub-interaction.twitter .arrow-right { border-top-color: #00aced !important; } .right-sub-interaction.twitter p, .right-sub-interaction.twitter .mdi, .right-sub-interaction.twitter .iconify--mdi { background: #00aced; color: #fff !important; } .right-sub-interaction.twitter a { color: #fff !important; } /**/ .right-sub-interaction.facebook .arrow-right { border-top-color: #3a589e !important; } .right-sub-interaction.facebook p, .right-sub-interaction.facebook .mdi, .right-sub-interaction.facebook .iconify--mdi { background: #3a589e; color: #fff !important; } .right-sub-interaction.facebook a { color: #fff !important; } /**/ .right-sub-interaction.whatsapp .arrow-right { border-top-color: #e6fdcf !important; } .right-sub-interaction.whatsapp p, .right-sub-interaction.whatsapp .mdi, .right-sub-interaction.whatsapp .iconify--mdi { background: #e6fdcf; color: #3e423b !important; } .right-sub-interaction.whatsapp a { color: #3e423b !important; } /**/ .oc-chat-separator { position: relative; text-align: center; padding: 10px; } .oc-chat-separator label { padding: 0 0.4em; position: relative; margin-bottom: 0; background: #f2f2f2; } .oc-chat-separator:before { content: ""; border-style: dashed; border-width: 0 0 1px 0; position: absolute; left: 0; top: 50%; width: 100%; border-color: #bbb; } /* CHAT FOOTER */ .oc-chat-footer { box-sizing: border-box; border-radius: 0px 0px 8px 8px; background: #fff; } .oc-chat-footer-input { display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem !important; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #444 !important; background-color: #fff; background-clip: padding-box; border: 0px solid var(--bs-border-color) !important; border-radius: 0.25rem; } .oc-chat-footer-input:focus { outline: 0 !important; } .oc-chat-footer-icon { font-size: 18px; cursor: pointer; transition: color 0.5s; } /* CHANNEL SELECTION */ .oc-chat-channel-opt { background: #E7E7E7; border-radius: 8px; padding: 12px; box-sizing: border-box; transition: background 0.5s; cursor: pointer; margin: 5px 0px; width: 100%; max-width: 400px; } .oc-chat-channel-opt:hover { background: #bbb; } .oc-chat-channel-opt-selected { border-radius: 8px; padding: 12px; box-sizing: border-box; margin: 5px 0px; width: 100%; max-width: 400px; background: #ddd; } .oc-chat-channel-opt-icon { font-size: 22px; } /* END OC-CHAT */ h3 #listCanal { margin-top: -5px; } .main-section { width: 400px; position: fixed; right: 50px; bottom: -350px; } .first-section:hover { cursor: pointer; } .open-more { bottom: 0px; transition: 2s; } .border-chat { border: 1px solid #edecec; margin: 0px; display: inherit; } .first-section { background-color: #7490b8; } .first-section p { color: #fff; margin: 0px; padding: 10px 0px; } .first-section p:hover { color: #fff; cursor: pointer; } .right-first-section { text-align: right; } .right-first-section i { color: #fff; font-size: 15px; padding: 12px 3px; } .right-first-section i:hover { color: #fff; } .chat-section ul li { list-style: none; margin-top: 10px; position: relative; } .chat-section { overflow-y: auto; height: 400px; } .chat-section ul { padding: 0px; } .left-chat .user, .right-chat .mdi .right-chat .iconify--mdi { font-size: 40px; width: 60px; height: 60px; border-radius: 50%; margin: 0px 10px; text-align: center; } .left-chat .user, .left-chat .user:hover { float: left; } .left-chat .user { line-height: 40px !important; } .left-chat .user.old, .left-chat p.old { color: #ccc; } .right-chat .mdi, .right-chat .mdi:hover, .right-chat .iconify--mdi, .right-chat .iconify--mdi:hover { float: right; background: #7490b8; color: #fff; } .full-chat { background: #bbb; color: #fff; padding: 10px; margin: 0 auto; width: calc(100% - 20px); border-radius: 5px; margin-bottom: 30px; } .full-chat p { float: none !important; } .second-section { padding: 0px; margin: 0px; background-color: #F3F3F3; height: 400px; width: 100%; } .left-chat, .right-chat { overflow: hidden; } .left-chat p, .right-chat p { background-color: #fff; padding: 10px !important; color: #000; border-radius: 5px; float: left; width: 60%; margin-bottom: 20px !important; } .left-chat p .mdi, .right-chat p .mdi, .left-chat p .mdi:hover, .right-chat p .mdi:hover, .left-chat p .iconify--mdi, .right-chat p .iconify--mdi, .left-chat p .iconify--mdi:hover, .right-chat p .iconify--mdi:hover { float: none; } .left-chat span, .right-chat span { position: absolute; left: 70px; top: 60px; color: #B7BCC5; } .right-chat span { left: 45px; } .right-chat p { float: right !important; background-color: #7490b8; color: #fff; } .third-section { background: #fff; } .text-bar input { width: 80%; margin: 0; padding: 12px 0 9px; border: 0; transition: none; margin-left: -5px; } .text-bar input:focus, .text-bar input:button { outline: none; } .text-bar .btn { float: right; margin-top: 5px; margin-right: -10px; } .text-bar input:focus, .text-bar input:active { border: 0; } .text-bar a i { background-color: #7490b8; color: #fff; width: 30px; height: 30px; padding: 7px 0px; border-radius: 50%; text-align: center; } .left-chat:before { content: " "; position: absolute; top: 0px; left: 65px; bottom: 150px; border: 15px solid transparent; border-top-color: #fff; } .right-chat:before { content: " "; position: absolute; top: 0px; right: 65px; bottom: 150px; border: 15px solid transparent; border-top-color: #7490b8; } .right-chat .mdi.mdi-comment-processing:before, .right-chat .iconify--mdi.mdi-comment-processing:before { position: absolute; right: 19px; top: 10px; } /* Telegram */ .right-chat.telegram:before { border-top-color: #2fa3df; } .right-chat.telegram p, .right-chat.telegram .mdi, .right-chat.telegram .iconify--mdi { background: #2fa3df; } /* Twitter */ .right-chat.twitter:before { border-top-color: #00aced; } .right-chat.twitter p, .right-chat.twitter .mdi, .right-chat.twitter .iconify--mdi { background: #00aced; } /* Facebook */ .right-chat.facebook:before { border-top-color: #3a589e; } .right-chat.facebook p, .right-chat.facebook .mdi, .right-chat.facebook .iconify--mdi { background: #3a589e; } /**/ .right-chat.telegram.opacity, .right-chat.twitter.opacity, .right-chat.facebook.opacity, .right-chat.opacity { opacity: 0.4; } .chat-separator { position: relative; text-align: center; padding: 10px; } .chat-separator label { background-color: #f3f3f3; padding: 0 0.4em; position: relative; } .chat-separator:before { content: ""; border-style: dashed; border-width: 0 0 1px 0; position: absolute; left: 0; top: 50%; width: 100%; border-color: #bbb; } .chat-header { margin-bottom: 20px; } .chat-header #numConectados { float: left; } .chat-header #listaConectados { list-style: none; float: left; margin-left: 10px; } .chat-header #listaConectados li { display: inline-block; } /* CUSTOM CHAT */ #chat_channel .chat-section { width: 300px; } #chat_channel { font-size: 11px; } #chat_channel select { font-size: 11px; width: 40%; border: 0; float: right; margin-right: 5px; } #chat_channel .title1 { font-size: 14px; } #chat_channel .title2 { font-size: 12px; } #chat_channel .title1, #chat_channel .title2 { line-height: 23px; font-weight: bold; color: #fff; background: #7490b8; padding: 3px 10px; box-sizing: border-box; } #chat_channel .title1.bottom, #chat_channel .title2.bottom { width: 300px; position: fixed; bottom: 0; padding: 4px 10px; margin: 0 0 0 0; } #chat_channel .title1 .mdi, #chat_channel .title2 .mdi, #chat_channel .title1 .iconify--mdi, #chat_channel .title2 .iconify--mdi { color: #fff; font-size: 18px; } #chat_channel .title1 .icons, #chat_channel .title2 .icons { float: right; } #chat_channel .title1 .icons .mdi, #chat_channel .title2 .icons .mdi, #chat_channel .title1 .icons .iconify--mdi, #chat_channel .title2 .icons .iconify--mdi { color: #fff; } #chat_channel .title1 .icons .mdi:hover, #chat_channel .title2 .icons .mdi:hover, #chat_channel .title1 .icons .iconify--mdi:hover, #chat_channel .title2 .icons .iconify--mdi:hover { color: #eee; } #chat_channel .title1 .icons .close_chat { font-size: 18px; } #chat_channel .title1 .icons .maximize_chat, #chat_channel .title2 .icons .maximize_chat { display: none; } #chat_channel .title1 .icons .minimize_chat, #chat_channel .title1 .icons .maximize_chat { font-size: 25px; } #chat_channel .chat { padding: 4px 15px; } #customChat { width: 300px; position: fixed; right: 0px; bottom: 100px; z-index: 1; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); } #customChat.bottom { bottom: -25px; } #customChat .btn { border: 0; background: 0; padding: 0 10px; cursor: pointer; width: 5%; margin-right: 0; } #customChat .left-chat .user { line-height: 10px !important; font-size: 15px !important; width: 30px !important; height: 30px !important; color: #000; } #customChat .right-chat .mdi, #customChat .right-chat .iconify--mdi { line-height: 11px !important; font-size: 17px !important; width: 30px !important; height: 30px !important; } #customChat .right-chat .mdi.mdi-comment-processing:before, #customChat .right-chat .iconify--mdi.mdi-comment-processing:before { position: absolute; right: 16px; top: 10px; } #customChat .left-chat p, #customChat .right-chat p { width: calc(100% - 60px); } #customChat .left-chat:before { left: 43px; } #customChat .right-chat:before { right: 42px; } #customChat .text-bar input { padding: 8px 0 13px 0; width: auto; margin-left: -5px; } #customChat .btn-labeled { box-shadow: none !important; } #customChat .btn-labeled .btn-label .mdi, #customChat .btn-labeled .btn-label .iconify--mdi { color: #7490b8 !important; } #customChat .btn-labeled .btn-label .mdi:hover, #customChat .btn-labeled .btn-label .iconify--mdi:hover { color: #7490b8 !important; } .offcanvas-collapse { position: fixed; z-index: 1030; top: 0; /* Height of navbar */ bottom: 0; right: 100%; left: -700px; width: 700px; padding-right: 1rem; padding-left: 1rem; overflow-y: auto; visibility: hidden; background-color: white; transition-timing-function: ease-in-out; transition-duration: 0.3s; transition-property: left, visibility; } .offcanvas-collapse { align-items: start; /* Adds a subtle drop shadow */ -moz-background-clip: padding; /* Firefox 3.6 */ -webkit-background-clip: padding; /* Safari 4? Chrome 6? */ background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ border-right: 5px solid rgba(0, 0, 0, 0.2); } .offcanvas-collapse.open { left: 0; visibility: visible; } /* css for calendar */ .task { position: absolute; width: 3px; height: 3px; border-radius: 150px; bottom: 3px; left: calc(50% - 1.5px); content: " "; display: block; background: #3d8eb9; } .task.in { background: #f64747; } .task.out { background: #B6B6B6; } /* css for timepicker */ .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } .ui-timepicker-div dl { text-align: left; } .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; } .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; } .ui-timepicker-div td { font-size: 90%; } .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } /* css for datepicker */ .ui-datepicker {  z-index: 6666 !important; } .demoHeaders { margin-top: 2em; } #dialog_link { padding: 0.4em 1em 0.4em 20px; text-decoration: none; position: relative; } #dialog_link span.ui-icon { margin: 0 5px 0 0; position: absolute; left: 0.2em; top: 50%; margin-top: -8px; } ul#icons { margin: 0; padding: 0; } ul#icons li { margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none; } ul#icons span.ui-icon { float: left; margin: 0 4px; } .ui-datepicker-trigger { background: none; border: 0; cursor: pointer; margin: 0; outline: 0; } .ui-datepicker-trigger:hover > .mdi { color: #000; } /* Alert Window */ .alertSuccess .modal-body, .alertWarning .modal-body, .alertDanger .modal-body, .alertInfo .modal-body, .alertConfirm .modal-body, .alertAsync .modal-body, .alertModal .modal-body { z-index: 6666; } .alertSuccess .modal-body, .alertWarning .modal-body, .alertDanger .modal-body, .alertInfo .modal-body, .alertConfirm .modal-body, .alertAsync .modal-body, .alertModal .modal-body { text-align: center; padding: 2rem 2rem 0; } .alertSuccess .modal-body .icon, .alertWarning .modal-body .icon, .alertDanger .modal-body .icon, .alertInfo .modal-body .icon, .alertConfirm .modal-body .icon, .alertAsync .modal-body .icon, .alertModal .modal-body .icon { margin-bottom: 1rem; } .alertSuccess .modal-body .icon:before, .alertWarning .modal-body .icon:before, .alertDanger .modal-body .icon:before, .alertInfo .modal-body .icon:before, .alertConfirm .modal-body .icon:before, .alertAsync .modal-body .icon:before, .alertModal .modal-body .icon:before { font: 85px "Material Design Icons"; } .alertSuccess .modal-body .icon::before { content: "\f05e1"; color: #d1e7dd; } .alertWarning .modal-body .icon::before { content: "\f002a"; color: #664d03; } .alertDanger .modal-body .icon::before { content: "\f0376"; color: #f8d7da; } .alertInfo .modal-body .icon::before { content: "\f02fc"; color: #cff4fc; } .alertConfirm .modal-body .icon::before { content: "\f0185"; } .alertAsync .modal-body .icon::before { content: "\f05e1"; } .alertSuccess .modal-footer, .alertWarning .modal-footer, .alertDanger .modal-footer, .alertInfo .modal-footer, .alertConfirm .modal-footer, .alertAsync .modal-footer, .alertModal .modal-footer { border-top: 0; padding: 2rem; } .alertSuccess .btn-close, .alertWarning .btn-close, .alertDanger .btn-close, .alertInfo .btn-close, .alertConfirm .btn-close, .alertAsync .btn-close, .alertModal .btn-close { position: absolute; top: 0; right: 0; padding: 20px; } .alertSuccess h5, .alertWarning h5, .alertDanger h5, .alertInfo h5, .alertConfirm h5, .alertAsync h5, .alertModal h5 { font-size: 1.75rem; color: #000; } .alertSuccess .modal-content, .alertWarning .modal-content, .alertDanger .modal-content, .alertInfo .modal-content, .alertConfirm .modal-content, .alertAsync .modal-content, .alertModal .modal-content { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } /* Animate Icon */ .screenAlert-icon { border-radius: 50%; border: 4px solid gray; box-sizing: content-box; height: 80px; margin: 20px auto; padding: 0; position: relative; width: 80px; } .screenAlert-icon + .screenAlert-icon { margin-top: 50px; } /* Success */ .alertSuccess .modal-body { border-top: 5px solid #A5DC86; } .screenAlert-icon.screenAlert-success { border-color: #A5DC86; } .screenAlert-icon.screenAlert-success:after { background-color: transparent !important; content: ""; height: 120px; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 60px; } .screenAlert-icon.screenAlert-success:before { background-color: transparent !important; content: ""; height: 120px; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 60px; border-radius: 120px 0 0 120px; left: -33px; top: -7px; -webkit-transform-origin: 60px 60px; transform-origin: 60px 60px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .screenAlert-icon.screenAlert-success:after { border-radius: 0 120px 120px 0; left: 30px; top: -11px; -webkit-transform-origin: 0 60px; transform-origin: 0 60px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .screenAlert-icon.screenAlert-success .screenAlert-placeholder { border-radius: 50%; border: 4px solid rgba(165, 220, 134, 0.2); box-sizing: content-box; height: 80px; left: -4px; position: absolute; top: -4px; width: 80px; z-index: 2; } .screenAlert-icon.screenAlert-success .screenAlert-line { background-color: #A5DC86; border-radius: 2px; display: block; height: 5px; position: absolute; z-index: 2; } .screenAlert-icon.screenAlert-success .screenAlert-line.screenAlert-tip { left: 14px; top: 46px; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 25px; } .screenAlert-icon.screenAlert-success .screenAlert-line.screenAlert-long { right: 8px; top: 38px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 47px; } .animateSuccessTip { -webkit-animation: animateSuccessTip 0.75s; animation: animateSuccessTip 0.75s; } .animateSuccessLong { -webkit-animation: animateSuccessLong 0.75s; animation: animateSuccessLong 0.75s; } /* Animate Success */ @-webkit-keyframes animateSuccessTip { 0%, 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 45px; } } @keyframes animateSuccessTip { 0%, 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 45px; } } @-webkit-keyframes animateSuccessLong { 0%, 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; } } @keyframes animateSuccessLong { 0%, 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; } } /* Danger */ .alertDanger .modal-body { border-top: 5px solid #F27474; } .screenAlert-icon.screenAlert-danger { border-color: #F27474; } .screenAlert-icon.screenAlert-danger:after { background-color: transparent !important; content: ""; height: 120px; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 60px; } .screenAlert-icon.screenAlert-danger:before { background-color: transparent !important; content: ""; height: 120px; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 60px; border-radius: 120px 0 0 120px; left: -33px; top: -7px; -webkit-transform-origin: 60px 60px; transform-origin: 60px 60px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .screenAlert-icon.screenAlert-danger:after { border-radius: 0 120px 120px 0; left: 30px; top: -11px; -webkit-transform-origin: 0 60px; transform-origin: 0 60px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .screenAlert-icon.screenAlert-danger .screenAlert-placeholder { border-radius: 50%; border: 4px solid rgba(165, 220, 134, 0.2); box-sizing: content-box; height: 80px; left: -4px; position: absolute; top: -4px; width: 80px; z-index: 2; } .screenAlert-icon.screenAlert-danger .screenAlert-line { background-color: #A5DC86; border-radius: 2px; display: block; height: 5px; position: absolute; z-index: 2; } .screenAlert-icon.screenAlert-danger .screenAlert-line.screenAlert-tip { left: 14px; top: 46px; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 25px; } .screenAlert-icon.screenAlert-danger .screenAlert-line.screenAlert-long { right: 8px; top: 38px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 47px; } .screenAlert-icon.screenAlert-danger .screenAlert-x-mark { display: block; position: relative; z-index: 2; } .screenAlert-icon.screenAlert-danger .screenAlert-placeholder { border: 4px solid rgba(200, 0, 0, 0.2); } .screenAlert-icon.screenAlert-danger .screenAlert-line { background-color: #F27474; top: 37px; width: 47px; } .screenAlert-icon.screenAlert-danger .screenAlert-line.screenAlert-left { left: 17px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .screenAlert-icon.screenAlert-danger .screenAlert-line.screenAlert-right { right: 16px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .animateXLeft { -webkit-animation: animateXLeft 0.75s; animation: animateXLeft 0.75s; } .animateXRight { -webkit-animation: animateXRight 0.75s; animation: animateXRight 0.75s; } /* Animate Danger */ @-webkit-keyframes animateXLeft { 0%, 65% { left: 82px; top: 95px; width: 0; } 84% { left: 14px; top: 33px; width: 47px; } 100% { left: 17px; top: 37px; width: 47px; } } @keyframes animateXLeft { 0%, 65% { left: 82px; top: 95px; width: 0; } 84% { left: 14px; top: 33px; width: 47px; } 100% { left: 17px; top: 37px; width: 47px; } } @-webkit-keyframes animateXRight { 0%, 65% { right: 82px; top: 95px; width: 0; } 84% { right: 14px; top: 33px; width: 47px; } 100% { right: 16px; top: 37px; width: 47px; } } @keyframes animateXRight { 0%, 65% { right: 82px; top: 95px; width: 0; } 84% { right: 14px; top: 33px; width: 47px; } 100% { right: 16px; top: 37px; width: 47px; } } /* Warning */ .alertWarning .modal-body { border-top: 5px solid #F8BB86; } .screenAlert-icon.screenAlert-warning { border-color: #F8BB86; } .screenAlert-icon.screenAlert-warning:before { -webkit-animation: pulseWarning 2s linear infinite; animation: pulseWarning 2s linear infinite; background-color: transparent !important; border-radius: 50%; content: ""; display: inline-block; height: 100%; opacity: 0; position: absolute; width: 100%; } .screenAlert-icon.screenAlert-warning:after { background-color: transparent !important; border-radius: 50%; content: ""; display: block; height: 100%; position: absolute; width: 100%; z-index: 1; } .screenAlert-icon.screenAlert-warning .screenAlert-body { background-color: #F8BB86; border-radius: 2px; height: 47px; left: 50%; margin-left: -2px; position: absolute; top: 10px; width: 5px; z-index: 2; } .screenAlert-icon.screenAlert-warning .screenAlert-dot { background-color: #F8BB86; border-radius: 50%; bottom: 10px; height: 7px; left: 50%; margin-left: -3px; position: absolute; width: 7px; z-index: 2; } .scaleWarning { -webkit-animation: scaleWarning 0.75s infinite alternate; animation: scaleWarning 0.75s infinite alternate; } .pulseWarningIns { -webkit-animation: pulseWarningIns 0.75s infinite alternate; animation: pulseWarningIns 0.75s infinite alternate; } /* Animate Warning */ @-webkit-keyframes scaleWarning { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.02); transform: scale(1.02); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleWarning { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.02); transform: scale(1.02); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes pulseWarning { 0% { background-color: #fff; -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; } 30% { background-color: #fff; -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; } 100% { background-color: #F8BB86; -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes pulseWarning { 0% { background-color: #fff; -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; } 30% { background-color: #fff; -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; } 100% { background-color: #F8BB86; -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @-webkit-keyframes pulseWarningIns { 0% { background-color: #F8D486; } 100% { background-color: #F8BB86; } } @keyframes pulseWarningIns { 0% { background-color: #F8D486; } 100% { background-color: #F8BB86; } } /* Info */ .alertInfo .modal-body, .alertAsync .modal-body { border-top: 5px solid #9de0f6; } .screenAlert-icon.screenAlert-info { border-color: #9de0f6; } .screenAlert-icon.screenAlert-info:before { -webkit-animation: pulseInfo 2s linear infinite; animation: pulseInfo 2s linear infinite; background-color: transparent !important; border-radius: 50%; content: ""; display: inline-block; height: 100%; opacity: 0; position: absolute; width: 100%; } .screenAlert-icon.screenAlert-info:after { background-color: transparent !important; border-radius: 50%; content: ""; display: block; height: 100%; position: absolute; width: 100%; z-index: 1; } .screenAlert-icon.screenAlert-info .screenAlert-body { background-color: #3fc3ee; border-radius: 2px; height: 47px; left: 50%; margin-left: -2px; position: absolute; top: 10px; width: 5px; z-index: 2; } .screenAlert-icon.screenAlert-info .screenAlert-dot { background-color: #3fc3ee; border-radius: 50%; bottom: 10px; height: 7px; left: 50%; margin-left: -3px; position: absolute; width: 7px; z-index: 2; } .scaleInfo { -webkit-animation: scaleInfo 0.75s infinite alternate; animation: scaleInfo 0.75s infinite alternate; } .pulseInfoIns { -webkit-animation: pulseInfoIns 0.75s infinite alternate; animation: pulseInfoIns 0.75s infinite alternate; } /* Animate Info */ @-webkit-keyframes scaleInfo { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.02); transform: scale(1.02); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleInfo { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.02); transform: scale(1.02); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes pulseInfo { 0% { background-color: #fff; -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; } 30% { background-color: #fff; -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; } 100% { background-color: #9de0f6; -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes pulseInfo { 0% { background-color: #fff; -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; } 30% { background-color: #fff; -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; } 100% { background-color: #9de0f6; -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @-webkit-keyframes pulseInfoIns { 0% { background-color: #3fc3ee; } 100% { background-color: #9de0f6; } } @keyframes pulseInfoIns { 0% { background-color: #3fc3ee; } 100% { background-color: #9de0f6; } } /* Confirm */ .alertConfirm .modal-body { border-top: 5px solid #c9dae1; } .screenAlert-icon.screenAlert-confirm { border-color: #c9dae1; } .screenAlert-icon.screenAlert-confirm:before { content: "?"; font-size: 55px; color: #87adbd; display: flex; justify-content: center; } .screenAlert-icon.screenAlert-confirm .screenAlert-body { background-color: #87adbd; border-radius: 2px; height: 47px; left: 50%; margin-left: -2px; position: absolute; top: 10px; width: 5px; z-index: 2; } .screenAlert-icon.screenAlert-confirm .screenAlert-dot { background-color: #87adbd; border-radius: 50%; bottom: 10px; height: 7px; left: 50%; margin-left: -3px; position: absolute; width: 7px; z-index: 2; } .scaleConfirm { -webkit-animation: scaleconfirm 0.75s infinite alternate; animation: scaleconfirm 0.75s infinite alternate; } .pulseConfirmIns { -webkit-animation: pulseconfirmIns 0.75s infinite alternate; animation: pulseconfirmIns 0.75s infinite alternate; } /* Animate confirm */ @-webkit-keyframes scaleconfirm { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.02); transform: scale(1.02); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleconfirm { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.02); transform: scale(1.02); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .toast-container { position: fixed; bottom: 0; right: 0; z-index: 666; pointer-events: auto; /* Fight with bootstrap! */ } .toast-container :where(.toast-notify, .column) { display: flex; align-items: center; } .toast-container .toast-notify { width: 400px; position: relative; overflow: hidden; list-style: none; border-radius: 4px; padding: 16px 17px; margin-bottom: 10px; background: #ffffff; justify-content: space-between; animation: show_toast 0.3s ease forwards; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); } @keyframes show_toast { 0% { transform: translateX(100%); } 40% { transform: translateX(-5%); } 80% { transform: translateX(0%); } 100% { transform: translateX(-10px); } } .toast-container .toast-notify.hide { animation: hide_toast 0.3s ease forwards; } @keyframes hide_toast { 0% { transform: translateX(-10px); } 40% { transform: translateX(0%); } 80% { transform: translateX(-5%); } 100% { transform: translateX(calc(100% + 20px)); } } .toast-container .toast-notify::before { position: absolute; content: ""; height: 3px; width: 100%; bottom: 0px; left: 0px; animation: progress 5s linear reverse forwards; } @keyframes progress { 0% { width: 100%; } 100% { width: 0%; } } .toast-container .toast-notify.success::before, .btn#success { background-image: linear-gradient(130deg, #5fa885, rgba(95, 168, 133, 0.5)); } .toast-container .toast-notify.danger::before, .btn#danger { background-image: linear-gradient(130deg, #e86771, rgba(232, 103, 113, 0.5)); } .toast-container .toast-notify.warning::before, .btn#warning { background-image: linear-gradient(130deg, #e9bd0c, rgba(233, 189, 12, 0.5)); } .toast-container .toast-notify.info::before, .btn#info { background-image: linear-gradient(130deg, #3498db, rgba(52, 152, 219, 0.5)); } .toast-container .toast-notify.default::before, .btn#default { background-image: linear-gradient(130deg, #aaaaaa, rgba(138, 137, 137, 0.5)); } .toast-container .toast-notify.default .column { margin-left: -10px; } .toast-container .toast-notify .column span { font-size: 1.75rem; font-size: 1.07rem; margin-left: 12px; color: #000; } .toast-container .toast-notify .column span a, .toast-container .toast-notify .column span a:hover { color: #000; } .toast-container .toast-notify.success .column span:first-child { color: #0ABF30; } .toast-container .toast-notify.danger .column span:first-child { color: #E24D4C; } .toast-container .toast-notify.warning .column span:first-child { color: #E9BD0C; } .toast-container .toast-notify.info .column span:first-child { color: #3498DB; } .toast-container-containerContainer .toast-notify span:last-child { color: #aeb0d7; cursor: pointer; } /* .toast-container .toast-notify span:last-child:hover { color: #34495E; } */ @media screen and (max-width: 530px) { .toast-container { width: 95%; } .toast-container .toast-notify { width: 100%; font-size: 1rem; margin-left: 20px; } } /* GENERAL */ * { margin: 0; padding: 0; } img { border: 0; } a.disabled:hover .mdi, .mdi.disabled:hover, a.disabled:hover .iconify--mdi, .iconify--mdi.disabled:hover { cursor: not-allowed !important; } a.disabled .mdi, .mdi.disabled, a.disabled:hover .mdi, .mdi.disabled:hover, a.disabled .iconify--mdi, .iconify--mdi.disabled, a.disabled:hover .iconify--mdi, .iconify--mdi.disabled:hover { color: #e2e2e2 !important; } /* ol, ul { padding-left: 0; // Removed for Tinymce list problems 2025 } */ .resize-none { resize: none; } .untouchable { user-select: none; pointer-events: none; } .animation-none { animation: none !important; } .required, .error { color: var(--danger-color); } /* TOOLTIPS */ .tooltip { pointer-events: none; --bs-tooltip-font-size: var(--font-size); --bs-tooltip-color: rgba(var(--primary-color-rgb), 1); --bs-tooltip-bg: var(--primary-color-lighter); --bs-tooltip-opacity:1; } /* POPOVER */ .popover { --bs-popover-font-size: var(--font-size); --bs-popover-bg: #fff; --bs-popover-header-color:var(--primary-color-lighter-contrast-text); --bs-popover-header-bg: rgba(var(--primary-color-rgb), 0.15); --bs-popover-body-color:var(--primary-color); } .locator #locatorTableDiv .popover { /* Due this kind of text (only locator) <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ max-width: 100%; } /* FORM ELEMENTS */ .form-label { color: var(--form-label-color); font-weight: var(--form-label-weight); } .form-control { color: var(--form-text-color); font-size: var(--form-md-font-size); } .form-control-sm, .form-select-sm { font-size: var(--form-sm-font-size); } .form-control-lg, .form-select-lg { font-size: var(--form-lg-font-size); } .form-control-xl, .form-select-xl { font-size: var(--form-xl-font-size); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: all 5000s ease-in-out 0s; } input::-moz-placeholder, input:focus::placeholder, input:focus-visible::placeholder, input.form-control-bottom::placeholder { text-shadow: none !important; color: var(--form-placeholder-color); /* Not important here. Floating labels broken. Check .input-select react values. */ opacity: 1 !important; } input::-webkit-outer-spin-button.no-arrows, input::-webkit-inner-spin-button.no-arrows { -webkit-appearance: none; margin: 0; } input[type=number].no-arrows { -moz-appearance: textfield; } .form-control:focus, .selectize-input.focus, .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25); } input[readonly].form-control { box-shadow: none !important; border: 1px solid var(--bs-border-color); } select[readonly], i[readonly] { pointer-events: none; appearance: none; } .form-select { color: var(--main-text-color); } .form-select:disabled { color: #6c757d; } .col-form-label-sm { padding: 0.1rem 1rem; margin-bottom: 0; } .col-form-label { padding: 0.4rem 1rem; margin-bottom: 0; } .col-form-label-lg { padding: 0.6rem 1rem; margin-bottom: 0; } .col-form-label-lg { padding: 0.8rem 1rem; margin-bottom: 0; } /* INPUT -> Plaintext */ input[readonly].form-control:focus:not(.form-control-plaintext) { border: 1px solid var(--form-plaintext-border-color) !important; box-shadow: none !important; } .form-control-plaintext.disabled { cursor: not-allowed; } .form-control-plaintext.disabled::placeholder { color: #ddd; } .mdi-calendar.form-control-plaintext:before { opacity: 0.3; } .form-control-plaintext { font-weight: bold; border-bottom: 1px dotted var(--form-plaintext-border-color) !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; background: transparent !important; padding-left: 0; color: #6c757d; outline: none; text-shadow: none !important; box-shadow: none !important; border-radius: 0; appearance: none; /* Remove arrows in select element */ } .form-control-plaintext:focus { color: #6c757d; box-shadow: none !important; border-bottom: 1px dotted var(--form-plaintext-border-color) !important; } .input-group-plaintext { border-bottom: 1px dotted var(--form-plaintext-border-color) !important; } .input-group-plaintext .mdi, .input-group-plaintext .iconify--mdi { line-height: 2.1rem !important; } .input-group-plaintext .mdi:before, .input-group-plaintext .iconify--mdi:before { color: #6c757d; } .input-group > .form-control-plaintext { position: relative; width: 1%; flex: 1 1 auto; } .input-group .form-control-plaintext { /* Not width: auto - Very dangerous!! */ } .input-group-plaintext + .form-control-plaintext { padding-left: 0.5rem !important; flex: 1 0 0%; /* col: auto */ } .table.border-dotted .form-control-plaintext, .table.border-dotted input[readonly].form-control { /* Plaintext borders within a bordered table are overridden */ border: 0 !important; } .btn-ico.form-control-plaintext { width: auto; flex: 0; } /* INPUT -> Float (always big) */ .form-floating > .form-control { padding: 1rem 0.75rem 0 1rem; box-shadow: none; } .form-floating > .form-control:not(:placeholder-shown) { padding-top: 1.5rem; padding-bottom: 0; padding-left: 1rem; } .form-floating > label { font-size: 17px; /* Here not REM. Portal extra large fonts */ padding: 0.85rem 1rem; } /**/ .form-floating .form-control-bottom { padding-top: 1.5rem !important; padding-left: 1.1rem !important; } .form-floating > .form-control-bottom:focus ~ label, .form-floating > .form-control-bottom:not(:placeholder-shown) ~ label { top: -10px; } /**/ .form-floating.form-floating-fieldset > .form-control.form-control-sm { min-height: calc(1.5em + 0.5rem + var(--bs-border-width) * 2); padding: 0.25rem 1rem; } .form-floating.form-floating-fieldset > .form-control.form-control-sm + label { font-size: 0.875rem; left: 10px; padding: 0.25rem 0.25rem; } .form-floating.form-floating-fieldset > .form-control.form-control-sm:focus ~ label, .form-floating.form-floating-fieldset > .form-control.form-control-sm:not(:placeholder-shown) ~ label { transform: scale(0.85) translateY(-1rem) translateX(0.25rem); background: #fff; height: 22px; line-height: 9px; padding: 0.25rem 0.25rem; } /**/ .form-floating.form-floating-fieldset > .form-control { min-height: auto; height: auto; line-height: inherit; padding: 0.5rem 1rem; } .form-floating.form-floating-fieldset > .form-control + label { font-size: 1rem; left: 0px; padding: 0.5rem 1rem; } .form-floating.form-floating-fieldset > .form-control:focus ~ label::after { display: none; } .form-floating.form-floating-fieldset > .form-control:not(:placeholder-shown) ~ label::after { height: auto; } .form-floating.form-floating-fieldset > .form-control:focus ~ label, .form-floating.form-floating-fieldset > .form-control:not(:placeholder-shown) ~ label { transform: scale(0.85) translateY(-1rem) translateX(0.5rem); background: #fff; height: 22px; line-height: 9px; padding: 0.5rem 0.5rem; } /**/ .form-floating.form-floating-fieldset > .form-control.form-control-lg { min-height: calc(1.5em + 1rem + var(--bs-border-width) * 2); padding: 0.5rem 1rem; } .form-floating.form-floating-fieldset > .form-control.form-control-lg + label { font-size: var(--form-lg-font-size); left: 10px; padding: 0.5rem 0.25rem; } .form-floating.form-floating-fieldset > .form-control.form-control-lg:focus ~ label, .form-floating.form-floating-fieldset > .form-control.form-control-lg:not(:placeholder-shown) ~ label { transform: scale(0.85) translateY(-1rem) translateX(0.25rem); background: #fff; height: 22px; line-height: 9px; padding: 0.5rem 0.25rem; } /**/ .form-floating.form-floating-fieldset > .form-control.form-control-xl { min-height: calc(1.5em + 1rem + var(--bs-border-width) * 2); padding: 0.5rem 1rem; } .form-floating.form-floating-fieldset > .form-control.form-control-xl + label { font-size: var(--form-xl-font-size); left: 10px; padding: 0.5rem 0.25rem; } .form-floating.form-floating-fieldset > .form-control.form-control-xl:focus ~ label, .form-floating.form-floating-fieldset > .form-control.form-control-xl:not(:placeholder-shown) ~ label { transform: scale(0.85) translateY(-1rem) translateX(0.25rem); background: #fff; height: 22px; line-height: 9px; padding: 0.5rem 0.25rem; } /**/ .form-floating > .form-control:-webkit-autofill { background: transparent; } /**/ .form-floating .form-control-plaintext, .form-floating .form-control-plaintext + label { padding-left: 0; } /* INPUT - > Bottom */ .form-control-bottom { border-bottom: 1px solid var(--bs-border-color) !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; padding-left: 0; outline: none; text-shadow: none !important; box-shadow: none !important; border-radius: 0 !important; width: 100%; transition: border-bottom-color 0.3s; font-size: 1rem; padding: 0.375rem 0.75rem 0.375rem 0 !important; } select.form-control-bottom { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-color: transparent; } .form-control-bottom.form-control-sm, .form-control-bottom.form-select-sm { font-size: 0.875rem; } .form-control-bottom.form-control-lg, .form-control-bottom.form-select-lg { font-size: var(--form-lg-font-size); } .form-control-bottom.form-control-xl, .form-control-bottom.form-select-xl { font-size: var(--form-xl-font-size); } .form-control-bottom:focus { border-bottom: 1px solid var(--primary-color) !important; } select.form-control-bottom { padding: 0.45rem 0.75rem 0.45rem 0 !important; } .form-control-bottom[class*=decorators] { border-radius: 0; } .form-control-bottom.input-phone-container, .form-control-bottom.input-decorators { border-radius: 0 !important; } .form-control-bottom.input-phone-container .input-prefix-container { min-width: auto !important; } .form-control-bottom.input-phone-container.focused { border-bottom: 1px solid var(--primary-color) !important; } .form-control-bottom.input-phone-container .overlay-base-container { left: 16px !important; } .form-control-bottom.react-select, .form-control-bottom.input-select { padding: 0 !important; border-bottom: 0 !important; } .form-control-bottom.react-select .input-select__control, .form-control-bottom.input-select .input-select__control { background: transparent; border: 0; border-bottom: 1px solid var(--bs-border-color) !important; border-radius: 0 !important; padding: 0; } .form-control-bottom:hover .input-select__control:hover { border: 0px; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-radius: 0; } .form-control-bottom .input-select__control--is-focused { box-shadow: none !important; } .form-control-bottom .input-select__option--is-selected { background-color: rgba(var(--primary-color-rgb), 0.2) !important; color: #000 !important; } .form-control-bottom .input-select__option--is-focused { background-color: rgba(var(--primary-color-rgb), 0.1) !important; color: #000 !important; } .form-control-bottom .input-select__option--is-selected.input-select__option--is-focused { background-color: rgba(var(--primary-color-rgb), 0.2) !important; color: #000 !important; } .form-control-bottom.react-select.input-select.input-select-lg .input-select__control, .form-control-bottom.react-select.input-select.input-select-lg .input-select__control:hover { font-size: var(--form-lg-font-size); } .form-control-bottom.react-select.input-select.input-select-xl .input-select__control, .form-control-bottom.react-select.input-select.input-select-xl .input-select__control:hover { font-size: var(--form-xl-font-size); } .form-control-bottom.react-select .input-select__value-container, .form-control-bottom.input-select .input-select__value-container { padding: 0; } .form-control-bottom.react-select.input-select .input-select__control, .form-control-bottom.react-select.input-select .input-select__control:hover { padding: 0 !important; } .form-control-bottom.form-control-plaintext { border-bottom: 1px dotted var(--form-plaintext-border-color) !important; } /* INPUT -> Big */ [class^=big-input] { border: 1px solid var(--bs-border-color); padding: 0.55rem 0.8rem; border-radius: 5px; } [class^=big-input].big-input-focused { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25); } [class^=big-input].big-input-error { border: 1px solid var(--danger-color); } [class^=big-input] .row { --bs-gutter-x: 0; --bs-gutter-y: 0; } [class^=big-input] label { font-size: 0.875rem; font-weight: 600; margin-bottom: 3px; color: #333; } [class^=big-input] input, [class^=big-input] .form-control, [class^=big-input] .form-control-plaintext, [class^=big-input] .input-decorators, [class^=big-input] .input-select, [class^=big-input] select, [class^=big-input] .form-select, [class^=big-input] textarea, [class^=big-input] .input-select__indicators { border: 0 !important; height: 19.5px !important; max-height: 50px !important; min-height: 19.5px !important; outline: 0; padding: 0 !important; font-size: 1rem !important; font-weight: normal; } [class^=big-input] .input-select__control { background: inherit !important; padding: 0 !important; } [class^=big-input] input.form-control:hover, [class^=big-input] input.form-control-plaintext:hover, [class^=big-input] input:hover, [class^=big-input] textarea:hover, [class^=big-input] select:hover, [class^=big-input] .form-select:hover, [class^=big-input] input.form-control:focus, [class^=big-input] input.form-control-plaintext:focus, [class^=big-input] input:focus, [class^=big-input] textarea:focus, [class^=big-input] .input-decorators.focused, [class^=big-input] .input-select__control--is-focused, [class^=big-input] .input-select__control { border: none !important; box-shadow: none !important; } [class^=big-input] .input-select__value-container { padding: 0; align-items: initial; } [class^=big-input] .input-select__input-container { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; } [class^=big-input] .input-select__menu { width: calc(100% + 20px) !important; margin-left: -10px; } [class^=big-input] .form-control:-webkit-autofill, [class^=big-input] .form-control:-webkit-autofill:hover, [class^=big-input] .form-control:-webkit-autofill:focus, [class^=big-input] .form-control:-webkit-autofill:active { -webkit-box-shadow: 0 0 0px 1000px white inset; background-color: #fff !important; background-clip: content-box !important; } [class^=big-input] select, [class^=big-input] .form-select { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ""; background: transparent; } [class^=big-input] .form-control-plaintext { padding: 0.55rem 0rem; border-radius: 0; } /* INPUT -> Pass */ .password-container .icon .mdi, .password-container .icon .iconify--mdi { position: absolute; right: 15px; cursor: pointer; font-size: 1.5rem; user-select: none; transition: all 1s; } .password-container .icon .mdi, .password-container .icon .iconify--mdi { top: 50%; transform: translateY(-50%) !important; } .password-container { position: relative; margin-bottom: 0; } .password-container .icon span:first-of-type { opacity: 1; transform: scale(1); } .password-container .icon span:last-of-type { opacity: 0; transform: scale(0); } .password-container .icon span.active:first-of-type { opacity: 0; transform: scale(0); } .password-container .icon span.active:last-of-type { opacity: 1; transform: scale(1); } .big-input .password-container .icon .mdi, .big-input .password-container .icon .iconify--mdi { top: -5px !important; right: 0; transform: none !important; } .login .form-floating.password-container .mdi, .login .form-floating.password-container .iconify--mdi { transform: translateY(-30%); } .password-container .is-invalid .icon .mdi, .password-container .is-invalid .icon .iconify--mdi { right: 30px; } /* INPUT -> Upload */ .form-file { position: relative; display: inline-block; width: 100%; height: calc(1.5em + 0.75rem + 2px); margin-bottom: 0; } .form-file-input { position: relative; /* z-index: 2; problems with color selector React */ width: 100%; height: calc(1.5em + 0.75rem + 2px); margin: 0; overflow: hidden; opacity: 0; } .form-file-input:focus ~ .form-file-label { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25); } .form-file-input[disabled] ~ .form-file-label, .form-file-input:disabled ~ .form-file-label { background-color: #e9ecef; } .form-file-input:lang(en) ~ .form-file-label::after { content: "Browse"; } .form-file-input ~ .form-file-label[data-browse]::after { content: attr(data-browse); } .form-file-label { position: absolute; top: 0; right: 0; left: 0; /* z-index: 1; problems with color selector React */ height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; overflow: hidden; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; border: 1px solid var(--bs-border-color); border-radius: 0.25rem; } .form-file-label::after { position: absolute; top: 0; right: 0; bottom: 0; /* z-index: 3; problems with color selector React */ display: block; height: calc(1.5em + 0.75rem); padding: 0.375rem 0.75rem; line-height: 1.5; color: var(--primary-color-contrast-text); content: "Browse"; background-color: var(--primary-color); border-left: inherit; border-radius: 0 0.25rem 0.25rem 0; } .input-group > .form-file { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; } /* INPUT -> Input group */ .input-group-text { color: #aeaeae; background-color: #f0f0f0; padding: 0.175rem 0.75rem !important; } .input-group-text .mdi, .input-group-text .iconify--mdi { color: #a2a2a2 !important; } .input-group { align-self: flex-start; /* To fix a Bootstrap bug when you put a BTN inside an input-group */ } /* input group -> Icons */ .input-group .btn-ico.mdi.disabled, .input-group .btn-ico.iconify--mdi.disabled { color: #c8c8c8 !important; } .input-group .btn.mdi, .input-group .btn .mdi, .input-group .input-group-text .mdi, .input-group .btn.iconify--mdi, .input-group .btn .iconify--mdi, .input-group .input-group-text .iconify--mdi { font-size: 1.2rem !important; line-height: 1.2rem; } .input-group-sm .btn.mdi, .input-group-sm .btn .mdi, .input-group-sm .input-group-text .mdi, .input-group-sm .btn.iconify--mdi, .input-group-sm .btn .iconify--mdi, .input-group-sm .input-group-text .iconify--mdi { font-size: 1rem !important; line-height: 1rem; } .input-group-lg .btn .mdi, .input-group-lg .btn .mdi, .input-group-lg .input-group-text .mdi, .input-group-lg .btn .iconify--mdi, .input-group-lg .btn .iconify--mdi, .input-group-lg .input-group-text .iconify--mdi { font-size: 1.4rem !important; line-height: 1.4rem; } .input-group-xl .btn .mdi, .input-group-xl .btn .mdi, .input-group-xl .input-group-text .mdi, .input-group-xl .btn .iconify--mdi, .input-group-xl .btn .iconify--mdi, .input-group-xl .input-group-text .iconify--mdi { font-size: 1.65rem !important; line-height: 1.65rem; } /* input group -> input-group-text */ .input-group-lg > .input-group-text { font-size: var(--form-lg-font-size); } .input-group-xl > .input-group-text { font-size: var(--form-xl-font-size); } /* input group -> .form-control */ .input-group > .form-control:focus { z-index: 1; /* This avoid hide icon */ } .input-group-lg > .form-control { font-size: var(--form-lg-font-size); } .input-group-xl > .form-control { font-size: var(--form-xl-font-size); } /* input group -> ico-container */ .input-group.ico-container { position: relative; } /* input group -> ico-container -> Normal */ .input-group.input-group-sm.ico-container:not(:focus) input.form-control, .input-group.ico-container:not(:focus) input.form-control-sm { padding-left: 20px; } .input-group.ico-container:not(:focus) input.form-control { padding-left: 25px; } .input-group.input-group-lg.ico-container:not(:focus) input.form-control, .input-group.ico-container:not(:focus) input.form-control-lg { padding-left: 33px; } .input-group.input-group-xl.ico-container:not(:focus) input.form-control, .input-group.ico-container:not(:focus) input.form-control-xl { padding-left: 33px; } /* input group -> ico-container -> Reading */ .input-group.input-group-sm.ico-container:not(:focus) input.form-control-plaintext, .input-group.ico-container:not(:focus) input.form-control-sm.form-control-plaintext { padding-left: 27px !important; } .input-group.ico-container:not(:focus) input.form-control-plaintext { padding-left: 29px; } .input-group.input-group-lg.ico-container:not(:focus) input.form-control-plaintext, .input-group.ico-container:not(:focus) input.form-control-lg.form-control-plaintext { padding-left: 35px !important; } .input-group.input-group-xl.ico-container:not(:focus) input.form-control-plaintext, .input-group.ico-container:not(:focus) input.form-control-xl.form-control-plaintext { padding-left: 35px !important; } /* input group -> ico-container -> Icon */ .input-group.ico-container > .mdi::before, .input-group.ico-container > .iconify--mdi::before { position: absolute; color: #bbb; z-index: 1; top: 16px; left: 0.55rem; transform: translateY(-50%); font-size: 1rem; } .input-group.ico-container .form-control-sm + .mdi::before, .input-group.input-group-sm.ico-container > .mdi::before, .input-group.ico-container .form-control-sm + .iconify--mdi::before, .input-group.input-group-sm.ico-container > .iconify--mdi::before { font-size: 0.9rem; left: 0.55rem; top: 12px !important; } .input-group.ico-container .form-control-lg + .mdi::before, .input-group.input-group-lg.ico-container > .mdi::before, .input-group.ico-container .form-control-lg + .iconify--mdi::before, .input-group.input-group-lg.ico-container > .iconify--mdi::before { font-size: 1.1rem; left: 0.7rem; top: 20px !important; } .input-group.ico-container .form-control-xl + .mdi::before, .input-group.input-group-xl.ico-container > .mdi::before, .input-group.ico-container .form-control-xl + .iconify--mdi::before, .input-group.input-group-xl.ico-container > .iconify--mdi::before { font-size: 1.2rem; left: 0.7rem; top: 20px !important; } /* INPUT -> Input locator */ .input-locator { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .input-locator > .form-control { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; } .input-locator > .form-floating { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; } .input-locator > .form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; } .input-locator .btn-group .btn { line-height: 1px; } .input-locator .btn-group > .btn:last-of-type { border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; } .input-locator .input-decorators { flex: 1 1 auto; width: 1%; } .input-locator .input-decorators.disabled { background: transparent; } .input-locator .input-decorators.disabled .input-decorators-base-input { color: #6c757d; font-weight: bold; pointer-events: none; } .input-locator .input-decorators.disabled .input-decorators-box .mdi { color: var(--form-plaintext-border-color) !important; pointer-events: none; } .input-locator .input-decorators.disabled .input-decorators-box .iconify { color: var(--form-plaintext-border-color) !important; pointer-events: none; } .input-locator .autocomplete-container { display: flex; flex: 1 1 0; } /* INPUT -> Decorator */ .input-decorators { display: flex; align-items: center; width: 100%; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid var(--bs-border-color); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; appearance: none; height: calc(1.5em + 0.75rem + 2px); min-height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: var(--bs-border-radius) !important; /* overwritting bootstrap default */ } .input-decorators.decorators-sm { height: calc(1.5em + 0.5rem + 2px); min-height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; } .input-decorators.decorators-lg { height: calc(1.5em + 1rem + 2px); min-height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; font-size: var(--form-lg-font-size); } .input-decorators.decorators-xl { height: calc(1.5em + 1rem + 2px); min-height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; font-size: var(--form-xl-font-size); } .input-decorators.error { border: 1px solid var(--danger-color); } .input-decorators.error.focused, .input-decorators.error:focus { outline: none; border: 1px solid var(--danger-color); box-shadow: 0 0 0 0.2rem rgba(var(--danger-color-rgb), 0.25); } .input-decorators.disabled, .input-decorators.readOnly { padding-left: 0; padding-right: 0; border: 0; border-bottom-width: 0px; border-bottom-style: none; border-bottom-color: currentcolor; border-bottom: 1px dotted var(--form-plaintext-border-color); border-radius: 0; } .input-decorators.plaintext { font-weight: bold; border-bottom: 1px dotted var(--form-plaintext-border-color) !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; background: transparent !important; padding-left: 0; color: #6c757d; outline: none; text-shadow: none !important; box-shadow: none !important; border-radius: 0; appearance: none; } .input-decorators.form-control-plaintext { padding: 0; } .input-decorators:not(.readOnly):not(.disabled):not(.error).focused, .input-decorators:not(.readOnly):not(.disabled):not(.error).focus, .input-decorators:not(.readOnly):not(.disabled):not(.error):focus-within { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25); } .input-decorators-box { display: flex; align-items: center; justify-content: center; height: 100%; } .input-decorators-base-input { box-sizing: content-box; height: 100%; width: 100%; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit; } .input-decorators-base-input.form-control { border-color: transparent; box-shadow: none; } .input-decorators-separator { align-self: stretch; background-color: #ccc; margin-bottom: 2px; margin-top: 2px; margin-left: 10px; margin-right: 10px; width: 1px; box-sizing: border-box; } /* CHECK Y RADIO */ .form-check { margin-bottom: 0.5rem; } .form-check-input:active { filter: none; } .form-check-input:focus { background-color: none; box-shadow: none; border-color: var(--bs-border-color); } .form-check-input[type=radio]:checked + label, .form-check-input[type=checkbox]:checked + label { font-weight: var(--form-checked-label-weight); } .form-check-input:checked[type=checkbox], .form-check-input[type=checkbox]:indeterminate { background-color: rgba(var(--primary-color-rgb), 1); border-color: rgba(var(--primary-color-rgb), 0.55); box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.15); } .form-check-input:checked[type=checkbox] { --bs-form-check-bg-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='checkbox-base-svg' viewBox='0 0 24 20' preserveAspectRatio='xMinYMid meet'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='%23fff' d='M7.89561 14.8538L6.30462 13.2629L14.3099 5.25755L15.9009 6.84854L7.89561 14.8538Z'%3E%3C/path%3E%3Cpath fill='%23fff' d='M4.08643 11.0903L5.67742 9.49929L9.4485 13.2704L7.85751 14.8614L4.08643 11.0903Z'%3E%3C/path%3E%3C/svg%3E%3C/svg%3E"); } .form-check-input[type=checkbox]:indeterminate { --bs-form-check-bg-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='checkbox-base-svg' viewBox='0 0 24 20' preserveAspectRatio='xMinYMid meet'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='%23fff' d='M6.56666 11.0013L6.56666 8.96683L13.5667 8.96683L13.5667 11.0013L6.56666 11.0013Z'%3E%3C/path%3E%3Cpath fill='%23fff' d='M13.5582 8.96683L13.5582 11.0013L6.56192 11.0013L6.56192 8.96683L13.5582 8.96683Z'%3E%3C/path%3E%3C/svg%3E%3C/svg%3E"); } .form-check-input:checked[type=radio] { background-color: rgba(var(--primary-color-rgb), 1); border-color: rgba(var(--primary-color-rgb), 0.55); box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.15); } .form-check-input { height: 1.3rem; width: 1.3rem; transition: border-color 350ms ease 0ms, background-color 500ms ease 0ms; } .form-check-input:not(:disabled):hover { cursor: pointer; border-color: rgba(var(--primary-color-rgb), 0.55); box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.15); } .form-check .form-check-label { margin-left: 0.8rem; vertical-align: middle; cursor: pointer; /*display: flex; NOT FLEX HERE */ /*padding-top: 0.25rem; We use default padding. Problems if check is into a list */ } .form-check.form-check-sm .form-check-label { /* margin-left: 0.6rem; padding-top: 0.1rem; */ } .form-check.form-check-sm .form-check-input { width: 1.2rem; height: 1.2rem; } .form-check.form-check-lg .form-check-label { /* margin-left: 1rem; padding-top: 0.3rem; */ } .form-check.form-check-lg .form-check-input { width: 1.4rem; height: 1.4rem; } .form-check.form-check-xl .form-check-label { /* margin-left: 1.2rem; padding-top: 0.5rem; */ } .form-check.form-check-xl .form-check-input { width: 1.5rem; height: 1.5rem; } .mdi.cursor-help.position-absolute, .iconify--mdi.cursor-help.position-absolute { margin-top: -5px; margin-left: 5px; } /* CARD */ #accordion .card { margin-bottom: 0.5rem; } .card { margin-bottom: 1rem; /* overflow: hidden; Never put this. There may be combos inside */ --bs-card-border-color: var(--bs-border-color); } /* header */ .card-header { /* A card-header with icons has to occupy the same height as one without */ padding: 0.3rem 1rem; min-height: 2.5rem; display: flex; align-items: center; } .card-header .row { margin: 0; width: 100%; } .card-header .input-group .btn .mdi::before, .card-header .input-group .btn .iconify--mdi::before { color: inherit !important; } .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { margin-bottom: 0; line-height: inherit !important; } .card-header[data-bs-toggle=collapse] h1, .card-header[data-bs-toggle=collapse] h2, .card-header[data-bs-toggle=collapse] h3, .card-header[data-bs-toggle=collapse] h4, .card-header[data-bs-toggle=collapse] h5, .card-header[data-bs-toggle=collapse] h6, .card-header [data-bs-toggle=collapse] h1, .card-header [data-bs-toggle=collapse] h2, .card-header [data-bs-toggle=collapse] h3, .card-header [data-bs-toggle=collapse] h4, .card-header [data-bs-toggle=collapse] h5, .card-header [data-bs-toggle=collapse] h6 { cursor: pointer; display: flex; align-items: center; } .card-header .row, .card-header .col, .card-header .col-auto { display: flex; align-items: center !important; padding: 0; } .card-header small, .card-header small a, .card-header .col-auto a { font-size: 0.875rem !important; vertical-align: middle; display: flex; align-items: center; } .card-header small a:hover { text-decoration: underline; } .card-header small .mdi, .card-header .col-auto .mdi .card-header small .iconify--mdi, .card-header .col-auto .iconify--mdi { font-size: 1.5rem !important; } .card-header small button .mdi, .card-header .col-auto button .mdi, .card-header small button .iconify--mdi, .card-header .col-auto button .iconify--mdi { font-size: inherit !important; } /* body */ .card-body { padding: 2rem; border-radius: var(--bs-card-border-radius); } /* footer */ .card-footer { padding: 0.4rem 1.25rem 0.3rem 0.8rem; } .card-footer a:hover { text-decoration: underline; } /* arrow animation (header or body of card) */ .card .mdi.mdi-chevron-down { margin-right: 0.25rem; display: flex; align-items: center; } /* removed 2025 - affected more sites .card svg:first-child.iconify.iconify--mdi .card .iconify--mdi.mdi-chevron-down */ .card .mdi.mdi-chevron-down:before, .section-header .mdi.mdi-chevron-down:before, .card .iconify--mdi.mdi-chevron-down:before, .card svg:first-child.iconify.iconify--mdi { transition: 0.3s transform ease-in-out; } .card .collapsed .mdi-chevron-down:before, .card.collapsed .mdi-chevron-down:before, .section-header .collapsed .mdi.mdi-chevron-down:before, .section-header.collapsed .mdi.mdi-chevron-down:before, .card.collapsed svg.iconify.iconify--mdi:not(:last-child) { transform: rotate(-90deg) !important; } .card .mdi-chevron-down:hover, .card .mdi-chevron-up:hover, .card.collapsed svg:first-child.iconify.iconify--mdi:hover { cursor: pointer !important; } /* TABLE (only .table Diferent to Datatable and React table) /* This table is not configurable by css - Dangerous. Different design. (Table of parameters, table of documents of sidebar...) */ .table { --bs-table-hover-bg: rgba(var(--primary-color-rgb), 0.1) !important; --bs-emphasis-color: var(--main-text-color); } table.table tr:last-child td { border-bottom: 0; } .table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(0, 0, 0, 0.03); /* A little clearer than the default, so the hover is more noticeable */ } .table caption { caption-side: top; font-size: 14px; margin: 0 0 5px 0; color: var(--primary-color); font-weight: bold; } .table.border-dashed td { border-top: 1px dashed #dee2e6; border-bottom: 1px dashed #dee2e6; } .table.border-dotted td { border-top: 1px dotted #dee2e6; border-bottom: 1px dotted #dee2e6; } .table thead.bg-primary tr th { background: var(--primary-color) !important; color: var(--primary-color-contrast-text) !important; } .table thead.bg-secondary tr th { background: var(--secondary-color) !important; color: var(--secondary-color-contrast-text) !important; } table.table thead .minimizar { text-align: right; } table.table td.shrink { /* This type of td shrinks to the minimum but the others maintain their size */ width: 1px; } table.table .number { display: block; height: 20px; width: 20px; line-height: 20px; -moz-border-radius: 10px; /* or 50% */ border-radius: 10px; /* or 50% */ background-color: var(--primary-color) !important; color: white; text-align: center; font-size: 1em; font-weight: bold; cursor: default; } table.table .ignored { font-style: italic; color: #666; } table.table tbody .subnivel td { border-bottom: 1px solid #EBEBEB; } table.table .ui-datepicker-trigger { margin: -2px 0 0 5px; } table.table td.shrink { /* This type of td shrinks to the minimum but the others maintain their size */ width: 1px; } table.table input.warning-highlight, table.table select.warning-highlight { background-color: #FEEFB3 !important; border-color: #9F6000 !important; color: #9F6000 !important; } table.table .warning-highlight { color: #9F6000 !important; } table.table.table-scroll { display: block; width: fit-content !important; overflow-x: auto; } table a.cursor-pointer { /* Bug tag icon. Space into links. */ display: inline-block; } /* LIST */ .list-group-striped li:nth-child(odd) { background-color: #fff; } .list-group-striped li:nth-child(even) { background-color: #f7f7f7; } .list-group-striped-inverse li:nth-child(odd) { background-color: #f7f7f7; } .list-group-striped-inverse li:nth-child(even) { background-color: #fff; } .list-group-item-action:focus, .list-group-item-action:hover { background-color: #edebeb !important; } .list-group-item-action a:hover { color: #495057; } .list-group-item-action:focus { background: #d2d2d2 !important; } .list-group-flush li:first-child { border-top: none; } .list-group-flush li:last-child { border-bottom: none; } /* MODAL */ /* Removed 11/2022 body.modal-open { overflow: auto !important; } */ .modal-header { align-items: center; background: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); padding: 0.5rem 1rem; } .modal-body { padding: 2rem; } .modal-content { border: 0; } /**/ .modal-header.bg-primary { background-color: var(--primary-color); } .modal-header.bg-primary .mdi:before, .modal-header.bg-primary .iconify--mdi:before { /* There may be an icon on the left */ color: #fff; } .modal-header.bg-primary h1, .modal-header.bg-primary h2, .modal-header.bg-primary h3, .modal-header.bg-primary h4, .modal-header.bg-primary h5, .modal-header.bg-primary h6 { color: #fff; } .modal-header.bg-primary .close { color: #fff; } .modal-footer.bg-primary a, .modal-footer.bg-primary a:link, .modal-footer.bg-primary a:visited, .modal-footer.bg-primary a:active { color: #fff; } .modal-header.bg-secondary { background-color: var(--secondary-color); } .modal-header.bg-secondary .mdi:before, .modal-header.bg-secondary .iconify--mdi:before { /* There may be an icon on the left */ color: #fff; } .modal-header.bg-secondary h1, .modal-header.bg-secondary h2, .modal-header.bg-secondary h3, .modal-header.bg-secondary h4, .modal-header.bg-secondary h5, .modal-header.bg-secondary h6 { color: #fff; } .modal-header.bg-secondary .close { color: #fff; } .modal-footer.bg-secondary a, .modal-footer.bg-secondary a:link, .modal-footer.bg-secondary a:visited, .modal-footer.bg-secondary a:active { color: #fff; } .modal-dialog.modal-full-screen { max-width: 98%; margin: 0 auto; top: 2%; bottom: 0; left: 0; right: 0; height: 96%; display: flex; } /* I think this does not have to be so .modal-dialog.modal-full-screen div.modal-body { padding: 0; } */ .modal-dialog.modal-full-height .modal-content { max-height: 95vh; } .modal-dialog.modal-full-height .modal-body { max-height: 90vh; overflow-y: auto; } /* "Modal" that appears in the select text function */ .modal-selection { position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: inherit; height: 100%; overflow: hidden; outline: 0; } .modal-selection-backdrop.show { opacity: 0.5 !important; } .modal-selection-backdrop.fade { opacity: 0; } .modal-selection-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: inherit; height: 100vh; background-color: #000; } #modalLocator.modal:nth-of-type(even) { /* This is for template selection */ z-index: 6666 !important; } #modalLocator { /* This is for a support issue */ z-index: 1222; } /* DROPDOWNS */ .dropdown-item { padding: 0.4rem 1rem; } a.dropdown-item { color: #373737; } .dropdown-item:focus, .dropdown-item:hover, .dropdown-item:active, .dropdown-item.active { background-color: rgba(var(--primary-color-rgb), 0.1); color: inherit; } .dropdown-menu { --bs-dropdown-min-width: 20rem; } .dropdown-menu a.dropdown-item .mdi, .dropdown-menu a.dropdown-item .iconify--mdi { font-size: 1.2rem !important; line-height: 1.2rem; float: none !important; height: auto; margin: 0 0.75rem 0 0 !important; } /* Extension of the error states of the forms is-valid, is-invalid */ .form-select.is-valid, .form-select.is-invalid, .form-select.is-warning, .form-control.is-warning { background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .form-control.is-warning, .form-select.is-warning { border-color: #ffc107; padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffc107' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.177l8.631 15.823h-17.262l8.631-15.823zm0-4.177l-12 22h24l-12-22zm-1 9h2v6h-2v-6zm1 9.75c-.689 0-1.25-.56-1.25-1.25s.561-1.25 1.25-1.25 1.25.56 1.25 1.25-.561 1.25-1.25 1.25z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center right calc(0.375em + 0.1875rem); } .form-control.is-warning:focus, .form-select.is-warning:focus { border-color: #ffc107; box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important; } .form-check-input.is-warning:checked ~ .form-check-label::before { border-color: #ffc107; background-color: #ffc107; } .form-check-input.is-warning ~ .form-check-label::before { border-color: #ffc107; } .form-check-input.is-warning ~ .form-check-label { color: #ffc107; } .form-check-input.is-warning:focus:not(:checked) ~ .form-check-label::before { color: #ffc107; } .form-check-input.is-warning:focus ~ .form-check-label::before { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); } .form-check-input.is-warning:focus:not(:checked) ~ .form-check-label::before { border-color: #ffc107; } .form-check-input.is-warning:not(:disabled):active ~ .form-check-label::before { background-color: #ffc107; border-color: #ffc107; } /* Improvement of existing .is-valid, .is-invalid classes */ .form-select.is-valid { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); } .form-check-input.is-valid:not(:disabled):active ~ .form-check-label::before { background-color: #34ce57; border-color: #34ce57; } .form-select.is-invalid { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); } .form-check-input.is-invalid:not(:disabled):active ~ .form-check-label::before { background-color: #e4606d; border-color: #e4606d; } .form-check-input.is-invalid, .form-check-input.is-invalid:hover, .form-check-input.is-invalid:active, .form-check-input.is-invalid:focus, .form-check-input[type=checkbox]:indeterminate.is-invalid, .form-check-input:checked[type=radio].is-invalid, .form-check-input:checked[type=checkbox].is-invalid { border-color: var(--danger-color) !important; box-shadow: 0 0 0 0.2rem #f2dee0 !important; } .form-check-input.is-invalid:checked, .form-check-input:invalid:checked, .form-check-input[type=checkbox]:indeterminate.is-invalid { background-color: var(--bs-form-invalid-color); } .form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label { color: inherit; /* by default is red */ } /* Checkbox status disabled. Even if you have is-valid, is-invalid, is-warning is gray */ .custom-checkbox .form-check-input:disabled:checked ~ .form-check-label::before { background-color: rgba(195, 195, 195, 0.5); color: #c3c3c3; border-color: #c3c3c3; } .custom-radio .form-check-input:disabled:checked ~ .form-check-label::before { background-color: rgba(195, 195, 195, 0.5); color: #c3c3c3; border-color: #c3c3c3; } .form-check-input:disabled ~ .form-check-label { color: #c3c3c3; } .form-check-input:disabled ~ .form-check-label::before { border-color: #dbdbdb; } /* ALERTS */ .alert.alert-danger a { color: #721c24 !important; } .alert.alert-danger a:hover { color: #42090e !important; text-decoration: underline; } .alert.alert-danger .btn-close { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23721c24'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; } .alert.alert-success a { color: #155724 !important; } .alert.alert-success a:hover { color: #093413 !important; text-decoration: underline; } .alert.alert-success .btn-close { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23155724'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; } .alert.alert-warning a { color: #856404 !important; } .alert.alert-warning a:hover { color: #5b470c !important; text-decoration: underline; } .alert.alert-warning .btn-close { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23856404'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; } .alert.alert-info a { color: #0c5460 !important; } .alert.alert-info a:hover { color: #053840 !important; text-decoration: underline; } .alert.alert-info .btn-close { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c5460'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; } .alert.alert-description { margin: -15px 0 15px 0px; color: #a22525; display: none; width: 100%; } .alert.alert-description p { margin-bottom: 0; } .alert.alert-danger::before { content: "\f0028"; } .alert.alert-success:before { content: "\f0133"; } .alert.alert-warning:before { content: "\f002a"; } .alert.alert-info:before { content: "\f02fd"; } .alert.alert-danger::before, .alert.alert-success::before, .alert.alert-warning::before, .alert.alert-info::before { font: 25px "Material Design Icons"; position: absolute; left: 1rem; top: 1rem; line-height: 22px; } .alert.alert-danger, .alert.alert-success, .alert.alert-warning, .alert.alert-info { padding-left: 3.5rem; } .alertDiv_container.fixed { position: fixed; top: 0; z-index: 666; } /* SWITCH */ .form-switch .form-check-input { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important; } .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important; } .form-switch .form-check-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25); } /* size sm */ .form-switch.form-check.form-switch-sm { line-height: 23px; } .form-switch.form-check.form-switch-sm .form-check-input { width: 2.5rem; height: 1.5rem; } .form-check.form-switch-sm .form-check-label { margin-left: 0.75rem !important; } /* size default */ .form-switch.form-check { line-height: 26px; } .form-switch .form-check-input { width: 2.7rem; height: 1.7rem; } .form-check.form-switch .form-check-label { margin-left: 1rem; } /* size lg */ .form-switch.form-check.form-switch-lg { line-height: 30px; } .form-switch.form-check.form-switch-lg .form-check-input { width: 2.9rem; height: 1.9rem; } .form-check.form-switch-lg .form-check-label { margin-left: 1.5rem !important; } /* size xl */ .form-switch.form-check.form-switch-xl { line-height: 33px; } .form-switch.form-check.form-switch-xl .form-check-input { width: 50px; height: 29px; } .form-check.form-switch-xl .form-check-label { margin-left: 2rem !important; } /* NAVS */ .nav { --bs-nav-link-color: var(--primary-color); --bs-nav-link-hover-color: var(--primary-color-hover); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--primary-color); } .nav-pills { --bs-nav-pills-link-active-bg: var(--primary-color); } .nav-link:focus, .nav-link:hover { color: var(--primary-color-hover); } .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar-dark .navbar-toggler { border-color: rgba(255, 255, 255, 0.85); } .navbar-light .navbar-toggler { border-color: rgba(0, 0, 0, 0.85); } .navbar-dark .navbar-toggler { color: rgba(255, 255, 255, 0.85); } .navbar-light .navbar-toggler { color: rgba(0, 0, 0, 0.85); } /* PAGINATION / PAGE LINKS */ .page-link { --bs-pagination-color: var(--primary-color); } .page-link:hover { color: #000; border-color: #dee2e6; background: rgba(var(--primary-color-rgb), 0.1); } .page-link:focus { color: #000; border-color: var(--primary-color); } .page-link a:hover { color: #fff; background-color: var(--primary-color-lighter); } .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important; } .page-item.active .page-link { background: var(--primary-color); border-color: var(--primary-color); color: var(--primary-color-contrast-text); } /* DIVIDERS */ hr.dotted { border-bottom: 1px dotted #ddd; } hr.dashed { border-bottom: 1px dashed #ddd; } /* TOAST */ .toast { font-size: inherit; box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.05); } .toast .toast-header .close { margin-top: 0.15rem; } .toast.w-100 { max-width: 100%; } /* TEXT */ .text-break-all { word-break: break-all; } .text-justify { text-align: justify; } .text-decoration-underline-hover { text-decoration: none !important; } .text-decoration-underline-hover:hover { text-decoration: underline !important; } /* POSITION - is it already added?*/ .top-0 { top: 0 !important; } .top-50 { top: 50% !important; } .top-100 { top: 100% !important; } .bottom-0 { bottom: 0 !important; } .bottom-50 { bottom: 50% !important; } .bottom-100 { bottom: 100% !important; } .start-0 { left: 0 !important; } .start-50 { left: 50% !important; } .start-100 { left: 100% !important; } .end-0 { right: 0 !important; } .end-50 { right: 50% !important; } .end-100 { right: 100% !important; } /* PSEUDOCLASS */ .after-content-none:after { content: none !important; } .before-content-none:before { content: none !important; } /* HR */ hr:not(.dropdown-divider) { border-right: 0; border-left: 0; border-top: 0; border-bottom: 1px solid var(--bs-border-color); /* Dotted is already in the readonly state */ } /* ICONS */ .mdi, .iconify--mdi { color: #939292; } .round { display: inline-table; border-radius: 50%; text-align: center; } .round .mdi.text-white, .round .iconify--mdi.text-white { text-shadow: none !important; } .round span { display: block; /*font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif; /* Better than Open Sans */ } .round .mdi:before, .round .iconify--mdi:before, .round span { height: 48px; width: 48px; line-height: 48px; } .round.round-sm .mdi:before, .round.round-sm .iconify--mdi:before, .round.round-sm span { height: 36px; width: 36px; line-height: 36px; } .round.round-lg .mdi:before, .round.round-lg .iconify--mdi:before, .round.round-lg span { height: 72px; width: 72px; line-height: 72px; } .round.round-xl .mdi:before, .round.round-xl .iconify--mdi:before, .round.round-xl span { height: 80px; width: 80px; line-height: 80px; } .square { display: inline-table; text-align: center; } .square .mdi.text-white, .square .iconify--mdi.text-white { text-shadow: none !important; } .square span { display: block; /* font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif; /* Better than Open Sans */ } .square .mdi:before, .square .iconify--mdi:before, .square span { height: 48px; width: 48px; line-height: 48px; } .square.square-sm .mdi:before, .square.square-sm .iconify--mdi:before, .square.square-sm span { height: 36px; width: 36px; line-height: 36px; } .square.square-lg .mdi:before, .square.square-lg .iconify--mdi:before, .square.square-lg span { height: 72px; width: 72px; line-height: 72px; } .square.square-xl .mdi:before, .square.square-xl .iconify--mdi:before, .square.square-xl span { height: 80px; width: 80px; line-height: 80px; } /* OUTLINE */ .outline-none { outline: none !important; } /* TEXTAREA */ textarea.form-control { height: auto; } /* why is this? */ /*.textarea textarea { border-top-left-radius: 0; border-top-right-radius: 0; }*/ /* CALLOUT */ .callout { padding: 1.25rem; margin-bottom: 1rem; /* like cards */ border: 1px solid #eee; border-left-width: 0.35rem; border-radius: 0.25rem; } .callout h4 { margin-top: 0; margin-bottom: 0.5rem; } .callout p { margin-bottom: 0.5rem; } .callout-info { border-left-color: #5bc0de; } .callout-info h4 { color: #5bc0de; } .callout-warning { border-left-color: #f0ad4e; } .callout-warning h4 { color: #f0ad4e; } .callout-danger { border-left-color: #d9534f; } .callout-danger h4 { color: #d9534f; } .callout-primary { border-left-color: var(--primary-color); } .callout-secondary { border-left-color: var(--secondary-color); } .callout-primary h4 { color: var(--primary-color); } .callout-secondary h4 { color: var(--secondary-color); } .callout-success { border-left-color: #28a745; } .callout-success h4 { color: #28a745; } .callout-default { border-left-color: #6c757d; } .callout-default h4 { color: #6c757d; } /* VERTICAL RULE */ .vr { vertical-align: middle; } /* RANGE */ .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25); } .form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25); } .form-range::-webkit-slider-thumb { background-color: var(--primary-color); } .form-range::-webkit-slider-thumb:active { background-color: var(--primary-color-light); } .form-range::-webkit-slider-runnable-track { background-color: var(--primary-color-lighter); } .form-range::-moz-range-thumb { background-color: var(--primary-color); } .form-range::-moz-range-thumb:active { background-color: var(--primary-color-dark); } .form-range::-moz-range-track { background-color: var(--primary-color-lighter); } .form-range:disabled::-webkit-slider-thumb { background-color: var(--primary-color-dark); } .form-range:disabled::-moz-range-thumb { background-color: var(--primary-color-dark); } /* SPINNER */ .loader-dotted-container { --dotted-size: 60px; --dotted-dot-size: 7px; --dotted-color: var(--primary-color); width: var(--dotted-size); height: var(--dotted-size); position: relative; } .loader-dotted-container.dotted-secondary { --dotted-color: var(--secondary-color); } .loader-dotted-container.dotted-tertiary { --dotted-color: var(--tertiary-color); } .loader-dotted-container.dotted-sm { --dotted-size: 30px; --dotted-dot-size: 4px; } .loader-dotted-container.dotted-lg { --dotted-size: 85px; --dotted-dot-size: 10px; } .loader-dotted-container.dotted-xl { --dotted-size: 100px; --dotted-dot-size: 15px; } .loader-dotted-container .loader-dotted-dot { position: absolute; inset: 0; display: flex; justify-content: center; animation: dotted-spin-animation 2s infinite; } .loader-dotted-container .loader-dotted-dot::after { content: ""; width: var(--dotted-dot-size); height: var(--dotted-dot-size); border-radius: 50%; background-color: var(--dotted-color); } .loader-dotted-container .loader-dotted-dot:nth-child(2) { animation-delay: 100ms; } .loader-dotted-container .loader-dotted-dot:nth-child(3) { animation-delay: 200ms; } .loader-dotted-container .loader-dotted-dot:nth-child(4) { animation-delay: 300ms; } .loader-dotted-container .loader-dotted-dot:nth-child(5) { animation-delay: 400ms; } @keyframes dotted-spin-animation { to { transform: rotate(360deg); } } /* VALIDATION */ .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { box-shadow: none; } /* SIZING - Expand: https://getbootstrap.com/docs/5.0/utilities/sizing/ */ .mw-auto { min-width: auto !important; } /* SCROLLBAR */ /* Variables removed for incompatibility issues - September 2023 scrollbar-width scrollbar-color ::-webkit-scrollbar ::-webkit-scrollbar-track ::-webkit-scrollbar-thumb ::-webkit-scrollbar-thumb:hover */ /* ROTATE */ .rotate-45 { transform: rotate(45deg); } .rotate-90 { transform: rotate(90deg); } .rotate-135 { transform: rotate(135deg); } .rotate-180 { transform: rotate(180deg); } .rotate-225 { transform: rotate(225deg); } .rotate-270 { transform: rotate(270deg); } .rotate-315 { transform: rotate(315deg); } /* OFFCANVAS SIZING SYSTEM ========================================== Para cambiar el tamaño de los offcanvas de forma flexible y responsive, utiliza las clases utilitarias: .offcanvas-width-sm → 200px .offcanvas-width-md → 400px (por defecto) .offcanvas-width-lg → 600px .offcanvas-width-xl → 800px .offcanvas-width-xxl → 1000px Puedes combinarlas con los breakpoints de Bootstrap para un control responsive: .offcanvas-lg.offcanvas-width-xl // xl a partir de lg .offcanvas-md.offcanvas-width-sm // sm a partir de md Ejemplo de uso en HTML:
...
...
Así puedes tener offcanvas de diferentes tamaños según el breakpoint. ========================================== */ .offcanvas-lg.offcanvas-width-sm, .offcanvas-md.offcanvas-width-sm, .offcanvas-sm.offcanvas-width-sm, .offcanvas-xl.offcanvas-width-sm, .offcanvas-xxl.offcanvas-width-sm, .offcanvas-width-sm, .offcanvas-lg.offcanvas-width-md, .offcanvas-md.offcanvas-width-md, .offcanvas-sm.offcanvas-width-md, .offcanvas-xl.offcanvas-width-md, .offcanvas-xxl.offcanvas-width-md, .offcanvas-width-md, .offcanvas-lg.offcanvas-width-lg, .offcanvas-md.offcanvas-width-lg, .offcanvas-sm.offcanvas-width-lg, .offcanvas-xl.offcanvas-width-lg, .offcanvas-xxl.offcanvas-width-lg, .offcanvas-width-lg, .offcanvas-lg.offcanvas-width-xl, .offcanvas-md.offcanvas-width-xl, .offcanvas-sm.offcanvas-width-xl, .offcanvas-xl.offcanvas-width-xl, .offcanvas-xxl.offcanvas-width-xl, .offcanvas-width-xl, .offcanvas-lg.offcanvas-width-xxl, .offcanvas-md.offcanvas-width-xxl, .offcanvas-sm.offcanvas-width-xxl, .offcanvas-xl.offcanvas-width-xxl, .offcanvas-xxl.offcanvas-width-xxl, .offcanvas-width-xxl { --bs-offcanvas-width: 100%; --bs-offcanvas-border-width: 0; } @media (min-width: 992px) { .offcanvas-width-sm, .offcanvas-sm.offcanvas-width-sm, .offcanvas-md.offcanvas-width-sm, .offcanvas-lg.offcanvas-width-sm, .offcanvas-xl.offcanvas-width-sm, .offcanvas-xxl.offcanvas-width-sm { --bs-offcanvas-width: 200px; } .offcanvas-width-md, .offcanvas-sm.offcanvas-width-md, .offcanvas-md.offcanvas-width-md, .offcanvas-lg.offcanvas-width-md, .offcanvas-xl.offcanvas-width-md, .offcanvas-xxl.offcanvas-width-md { --bs-offcanvas-width: 400px; /* Default */ } .offcanvas-width-lg, .offcanvas-sm.offcanvas-width-lg, .offcanvas-md.offcanvas-width-lg, .offcanvas-lg.offcanvas-width-lg, .offcanvas-xl.offcanvas-width-lg, .offcanvas-xxl.offcanvas-width-lg { --bs-offcanvas-width: 600px; } .offcanvas-width-xl, .offcanvas-sm.offcanvas-width-xl, .offcanvas-md.offcanvas-width-xl, .offcanvas-lg.offcanvas-width-xl, .offcanvas-xl.offcanvas-width-xl, .offcanvas-xxl.offcanvas-width-xl { --bs-offcanvas-width: 800px; } .offcanvas-width-xxl, .offcanvas-sm.offcanvas-width-xxl, .offcanvas-md.offcanvas-width-xxl, .offcanvas-lg.offcanvas-width-xxl, .offcanvas-xl.offcanvas-width-xxl, .offcanvas-xxl.offcanvas-width-xxl { --bs-offcanvas-width: 1000px; } } /* LINE CLAMP */ .line-clamp-1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .line-clamp-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .line-clamp-3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .line-clamp-4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .line-clamp-5 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .bootstrap-select { width: auto; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; } .bootstrap-select .btn { padding: 0.35rem 0.6rem; } .bootstrap-select .btn:focus { box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25); background: #fff !important; border-color: var(--primary-color) !important; } .bootstrap-select > .dropdown-toggle { border: 1px solid var(--bs-border-color) !important; background: #fff !important; color: #212529 !important; } .bootstrap-select > .dropdown-toggle:focus { border: 1px solid var(--bs-border-color) !important; background: #fff !important; color: #212529 !important; } .bootstrap-select > .dropdown-toggle:after { display: inline-block; margin-left: 0.255em; content: ""; border-top: 0.3em solid !important; border-right: 0.3em solid white !important; border-bottom: 0; border-left: 0.3em solid white !important; display: block; width: auto; padding: 0.375rem 2.25rem 0.375rem 0.75rem; -moz-padding-start: calc(0.75rem - 3px); font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.25rem center; background-size: 16px 12px; border: 0; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover { color: #6c757d; /* Grey forced */ } .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 100%; } .bootstrap-select .dropdown-toggle:focus, .bootstrap-select > select.mobile-device:focus + .dropdown-toggle { outline: 0 !important; } .bootstrap-select .dropdown-toggle:focus, .bootstrap-select > select.mobile-device:focus + .dropdown-toggle { outline: 0 !important; } .bootstrap-select .dropdown-menu .dropdown-item:hover { background: rgba(var(--primary-color-rgb), 0.1); } .bootstrap-select .bs-select-all { font-size: 13px !important; border: 1px solid(--primary-color); background: var(--primary-color); color: var(--primary-color-hover-contrast-text) !important; } .bootstrap-select .bs-select-all:hover, .bootstrap-select .bs-select-all:active, .bootstrap-select .bs-select-all:focus { background-color: var(--primary-color-hover) !important; border-color: var(--primary-color-hover); } .bootstrap-select .bs-select-all:active, .bootstrap-select .bs-select-all:focus, .bootstrap-select > .dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important; border-color: var(--primary-color) !important; } .bootstrap-select > .dropdown-toggle:hover { background: #fff !important; } .bootstrap-select .bs-deselect-all { font-size: 13px !important; border: 1px solid(--primary-color); background: #fff; color: var(--primary-color); } .bootstrap-select .bs-deselect-all:hover { background-color: var(--primary-color-hover) !important; color: var(--primary-color-hover-contrast-text) !important; } .bootstrap-select .bs-deselect-all:active, .bootstrap-select .bs-deselect-all:focus { background-color: var(--primary-color-hover) !important; color: var(--primary-color-hover-contrast-text) !important; border-color: var(--primary-color-hover) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-hover), 0.5) !important; } .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark { color: var(--primary-color); } /* Header */ #header_object .bootstrap-select { width: 100% !important; } #header_object .bootstrap-select .btn-light:active, #header_object .bootstrap-select .btn-light:focus { background: #fff; color: #212529; } #header_object .bootstrap-select .btn-light:hover { color: #212529 !important; } /* Flags */ .bootstrap-select [class*=" flag:"] { top: 2px; position: relative; margin-right: 7.5px; } /**/ .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 100% !important; } .locator, #locatorFiltersDiv { /* outside of the locator, treeview will behave as normal */ } .locator .treeview, #locatorFiltersDiv .treeview { /*border-top: 1px solid #ddd;*/ margin-top: -30px; padding-left: 0px; } .locator .treeview .node-selected .mdi:before, #locatorFiltersDiv .treeview .node-selected .mdi:before { color: var(--primary-color-contrast-text); } .locator .treeview .child-selected, #locatorFiltersDiv .treeview .child-selected { background-color: var(--primary-color-lighter); border-color: transparent; } .locator .treeview span.indent, #locatorFiltersDiv .treeview span.indent { margin-left: 0px !important; margin-right: 0px !important; padding-left: 5px; padding-right: 5px; } .locator .treeview li.list-group-item, #locatorFiltersDiv .treeview li.list-group-item { padding: 1px 10px 0px 5px; } .locator .treeview li.list-group-item:first-child, #locatorFiltersDiv .treeview li.list-group-item:first-child { display: none; } .locator .treeview ul.list-group, #locatorFiltersDiv .treeview ul.list-group { position: absolute; } .locator .treeview ul.treeExpanded, #locatorFiltersDiv .treeview ul.treeExpanded { box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); position: absolute; z-index: 100; padding: 0; top: 30px; } .locator .treeview .node-selected, #locatorFiltersDiv .treeview .node-selected { background-color: var(--primary-color) !important; } .locator .treeview-input-group, #locatorFiltersDiv .treeview-input-group { z-index: 9; /* with a higher number, it overlaps the header */ } .locator .treeview-input-group .btn-ico, #locatorFiltersDiv .treeview-input-group .btn-ico { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .locator .treeview-input-group .form-control:focus, #locatorFiltersDiv .treeview-input-group .form-control:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important; } .ui-jqgrid-bootstrap .ui-jqdialog-titlebar, .ui-jqgrid-bootstrap .ui-jqgrid-caption { background: var(--primary-color) !important; color: var(--primary-color-contrast-text) !important; font-weight: bold; font-size: 1.4rem; font-family: var(--font-headings); font-weight: var(--font-headings-weight); padding: 8px !important; } .ui-jqgrid-bootstrap .ui-jqgrid-htable th.ui-th-ltr, .ui-jqgrid-bootstrap .ui-th-ltr { background: var(--primary-color-lighter) !important; } .ui-jqgrid-bootstrap .ui-pg-table td { background: var(--primary-color-lighter) !important; } .ui-jqgrid-bootstrap .ui-jqgrid-htable .ui-jqgrid-labels th div { display: flex; align-items: center; padding: 5px; } .ui-jqgrid-bootstrap .btn-default, .ui-jqgrid-bootstrap .btn-default:active { background: transparent; } .ui-jqgrid-bootstrap .fa-chevron-circle-up::before { content: "\f0140"; font-family: "Material Design Icons"; color: #fff; font-size: 20px; } .ui-jqgrid-bootstrap .fa-chevron-circle-down { transform: rotate(-90deg); } .ui-jqgrid-bootstrap .fa-chevron-circle-down::before { content: "\f0140"; font-family: "Material Design Icons"; color: #fff; font-size: 20px; transition: 0.3s transform ease-in-out; } .ui-jqgrid-bootstrap .ui-jqgrid-titlebar-close { left: 0.1rem; } .ui-jqgrid-bootstrap .ui-jqgrid-title { font-size: 18px !important; margin-left: 21px; } .ui-jqgrid-bootstrap .ui-jqgrid-titlebar > .ui-jqgrid-titlebar-close > span.fa { position: absolute; left: 6px; top: 0px; } .ui-jqgrid-bootstrap .ui-jqgrid-titlebar { border-top-left-radius: 3px !important; border-top-right-radius: 3px !important; } .ui-jqgrid-bootstrap tr.jqgrow.success, .ui-jqgrid-bootstrap tr.jqgrow.success:hover { background: var(--primary-color) !important; } .ui-jqgrid-bootstrap tr.jqgrow > td { padding: 0.5em !important; } .ui-jqgrid-bootstrap .ui-pg-button:not(.ui-state-hover) { border: 0 !important; } .ui-jqgrid-bootstrap .ui-jqdialog .ui-jqdialog-titlebar-ltr .ui-jqdialog-titlebar-close { right: 0.85em; font-size: 17px; top: 22px; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.5; width: 1em; height: 1em; } .ui-jqgrid-bootstrap .modal-header .fa-times:before { content: ""; } .ui-jqgrid-bootstrap .ui-jqdialog.ui-jqgrid-bootstrap .FormData .CaptionTD { font-size: var(--font-size); } .ui-jqgrid-bootstrap #gview_list, .ui-jqgrid-bootstrap .ui-jqgrid-hdiv, .ui-jqgrid-bootstrap .ui-jqgrid-bdiv, .ui-jqgrid-bootstrap #pager, .ui-jqgrid-bootstrap .ui-jqgrid-htable, .ui-jqgrid-bootstrap .ui-jqgrid-btable { width: 100% !important; } .ui-jqgrid-bootstrap .modal.ui-jqgrid-bootstrap .modal-footer .fm-button { background: var(--primary-color); color: var(--primary-color-contrast-text); padding: 0.5rem 1rem; } .ui-jqgrid-bootstrap .modal.ui-jqgrid-bootstrap .modal-footer .fm-button:hover { background: var(--primary-color-hover); color: var(--primary-color-hover-contrast-text); } .ui-jqgrid-bootstrap .modal.ui-jqgrid-bootstrap .modal-footer .EditButton .fm-button .fa { display: none; } .ui-jqgrid-bootstrap .modal.ui-jqgrid-bootstrap .modal-footer .EditButton { display: flex; justify-content: center; flex-direction: row-reverse; } .ui-jqgrid-bootstrap .modal.ui-jqgrid-bootstrap .modal-footer hr { display: none; } /**/ .ui-jqgrid-bootstrap#gbox_list { width: 100% !important; } /* .form-control invalite check */ .FormGrid .DataTD input[type=checkbox] { appearance: checkbox; width: 20px !important; height: 20px !important; } .fc-toolbar h2 { color: var(--primary-color); } .fc-unthemed .fc-divider, .fc-unthemed .fc-popover .fc-header { background: var(--primary-color); color: #fff; } .fc-unthemed .fc-popover .fc-header .fc-close { color: #fff; } .fc-state-default.fc-corner-left { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .fc-state-default.fc-corner-right { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .fc-state-default { background-color: var(--primary-color); background-image: none; border: 0; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); text-shadow: none; } .fc-state-disabled { color: #fff; background-color: #aaa !important; } .fc-state-active, .fc-state-hover { color: #fff; background: var(--primary-color-hover) !important; text-decoration: none; } .fc-state-down, .fc-state-active { background-color: var(--primary-color-hover); background-image: none; box-shadow: none; } .fc-prev-button, .fc-prev-button:hover { border-right: 2px solid #fff !important; /* ISYC */ } .fc-next-button, .fc-next-button:hover { border-left: 2px solid #fff !important; /* ISYC */ } .fc-day { background-color: #ffffff; } .fc-day-header { font-weight: normal; padding: 6px !important; border-right: 1px solid var(--primary-color) !important; background-color: var(--primary-color); color: #fff; width: 100%; } .fc-event { line-height: 15px; border-radius: 0; } .fc-day-grid-event .fc-content { /* force events to be one-line tall */ white-space: inherit; /* ISYC - Antes estaba en NOWRAP */ } /**/ main #calendar .estado1 { background: #94e2e8; border: 1px solid #7fadb9; color: #197589; } main #calendar .estado2 { background: #b7ee73; border: 1px solid #87b167; color: #4d6d08; } main #calendar .estado3 { background: #e6d761; border: 1px solid #afb168; color: #775a00; } main #calendar .estado4 { background: #eb8795; border: 1px solid #ae6b6c; color: #ac0101; } main #calendar .estado5 { background: #c1ae97; border: 1px solid #887e66; color: #4b3f14; } body.popup .jmesa { display: table; /* In an iframe (popup class) I force horizontal scrolling */ width: 100%; /* (customer request) */ } .jmesa { margin: 0 auto 15px; padding: 0; width: 100%; overflow: auto; /* To force scrolling in very wide tables */ /**/ /**************************************/ /* For when there are no filters the caption this class is added by javascript */ /* Custom column widths */ /* For jMesa that shows/hides areas */ } .jmesa .mdi { vertical-align: initial; } .jmesa .mdi.mdi-file, .jmesa .mdi.mdi-circle { /* This is a fix so that files and status icons are always above the .angle */ position: relative; z-index: 50; } .jmesa .mdi.mdi-checkbox-blank { font-size: 16px !important; } .jmesa .mdi.mdi-checkbox-blank-circle { font-size: 9px !important; } .jmesa caption { font-weight: bold; font-size: 14px !important; text-align: left; margin: 0 0 10px 0; font-size: inherit; top: 10px; padding-top: 6px; color: var(--primary-color); position: absolute; } .jmesa .table { position: relative; border-collapse: inherit; /* Bootstrap FIX */ } .jmesa table td { vertical-align: inherit; /* Bootstrap FIX */ border-top: 0 !important; } .jmesa table tr:first-child td { border-top: 0 !important; } .jmesa table tbody tr:not(.statusBar):not(.toolbar) td { border-bottom: 1px solid #dee2e6 !important; } .jmesa table .mdi.disabled, .jmesa table .mdi.disabled:hover { cursor: default; color: #9f9f9f !important; opacity: 0.5; float: left; } .jmesa .toolbar td { padding: 0px 1px 0px 1px; } .jmesa .toolbar select { border: solid 1px #c4c3c2; margin-left: 0.5rem; background: #fff; padding: 1px 0.5rem; } .jmesa .toolbar .pageNumber { font-weight: bold; color: #000; padding: 0px 2px; margin: 0; float: left; } .jmesa .toolbar .pageNumber a { font-weight: normal; color: black; } .jmesa .toolbar .textItem { font-weight: bold; font-style: italic; color: #000; padding: 0px 2px; } .jmesa .toolbar .textItem a { color: #000; } .jmesa .toolbar .textItemError { font-weight: bold; font-style: italic; color: #ec4646; padding: 0px 2px; } .jmesa .toolbar .textItemError a { color: #ec4646; } .jmesa .toolbar img { border: 0px; } .jmesa .filter { background: #f7f7f7; } .jmesa .filter td { padding: 5px; } .jmesa .tbody input { padding: 0; margin: 0; } .jmesa .filter .dynFilter { position: relative; margin: 0; background: #fff !important; white-space: nowrap; cursor: pointer; border: 1px solid #ccc; max-width: 100%; overflow: hidden; text-overflow: ellipsis; cursor: text; outline: none; /* z-index: 65; Do not uncomment, it causes problems with datepickers. */ } .jmesa .filter .dynFilter:empty { padding: 10px; } .jmesa .filter #dynFilterDiv:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important; outline: none; } .jmesa .filter #dynFilterDiv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; outline: none; border-color: var(--primary-color) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important; } .jmesa .filter #dynFilterInput { outline: none; padding: 0; margin: 0; border-style: none; border-color: var(--primary-color) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important; } .jmesa .filter #dynFilterDroplistDiv, .jmesa .filter #wsColumnDroplistDiv { position: absolute; padding: 0; margin: 0; z-index: 2; outline: none; } .jmesa .filter #dynFilterDroplist, .jmesa .filter #wsColumnDroplistInput { padding: 0; margin: 0; outline: none; } .jmesa .header td { /* white-space: nowrap caused the website layout to break due to headers that were too wide and not jumping between lines */ background: rgba(var(--primary-color-rgb), 0.2) !important; color: rgba(var(--primary-color-hover-rgb), 1); /* Darker than primary color */ font-weight: bold; padding: 5px 4px; border-right-style: solid; border-right-width: 0px; box-sizing: content-box; /* Bootstrap FIX */ } .jmesa .odd a, .jmesa .even a { color: black; } .jmesa .odd td, .jmesa .even td, .jmesa .removed td, .jmesa .rowError td, .jmesa .highlight, .jmesa .highlight td { /* Do not put vertical-align - If necessary, the CSS class will be added to the TD */ padding: 4px; vertical-align: inherit; /* Por Bootstrap */ } .jmesa .odd td { border: 1px solid transparent; min-width: 16px; } .jmesa .even td { border: 1px solid transparent; } .jmesa .removed td { border: 1px solid transparent; } .jmesa .odd { background-color: #ffffff; } .jmesa .even { background-color: #f4f4f4; } .jmesa tbody.tbody img { vertical-align: middle; } .jmesa .removed { font-style: italic; color: #ccc; } .jmesa .rowError { font-style: italic; } .jmesa .addRow { font-weight: bold; height: 20px; color: white; background-color: #888; } .jmesa table.table tbody tr.highlight { background: rgba(var(--primary-color-rgb), 0.1); } .jmesa table.table tbody tr.highlight td { min-width: 16px; border: 1px solid transparent; } .jmesa table.table tbody tr.highlight a { color: black; } .jmesa table.table thead tr.header td, .jmesa table.table tbody tr.odd td, .jmesa table.table tbody tr.even td, .jmesa table.table tbody tr.highlight td { padding: 7px; } .jmesa table.table thead tr.header td { white-space: nowrap; color: rgba(var(--primary-color-rgb), 1); } .jmesa .statusBar { height: 20px; position: relative; margin-top: 10px; } .jmesa .statusBar td { text-align: right; padding: 3px 10px 5px 0; width: auto; } .jmesa .dropShadow { padding: 10px 14px 14px 10px; } .jmesa .wsColumn { position: relative; padding: 0; margin: 0; border-bottom: 0; white-space: nowrap; cursor: pointer; min-height: 15px; /* This 15px marks the click space. Do not remove. */ } .jmesa .wsColumnError { position: relative; font-style: italic; padding: 0; margin: 0; color: #ec4646; border-bottom: 1px dashed #ec4646; white-space: nowrap; cursor: pointer; } .jmesa .wsColumnChange { position: relative; font-style: italic; padding: 0; margin: 0; color: #000; border-bottom: 1px dashed #c0c0c0; white-space: nowrap; cursor: pointer; } .jmesa #wsColumnDiv { position: absolute; top: -2px; left: -2px; padding: 0; margin: 0; height: 17px; border: 1px solid #c0c0c0; background-color: #ededed; } .jmesa #wsColumnInput { padding: 0; margin: 0; border-style: none; background-color: #ededed; } .jmesa .info span { /* For dates */ font-style: italic; color: #888; } .jmesa .center { text-align: center; } .jmesa .fixed { width: 676px; } .jmesa .caption_top { position: relative; padding-top: 30px; margin-top: 0px; } .jmesa .caption_top caption { position: absolute; top: -35px; } .jmesa .nowrap { white-space: nowrap; } .jmesa .highlight + tr[id*=extraRow] * { background-color: #e2f3fa; border-color: #e2f3fa; } .jmesa .highlight + tr[id*=extraRow] * td { padding: 4px; } .jmesa .highlight + tr[id*=extraRow] > td { border-top: 1px dotted #cdcdcd; } .jmesa tr[id*=extraRow] > td { border-top: 1px dotted #cdcdcd; padding: 4px; } .jmesa tr[id*=extraRow]:hover { background-color: #e2f3fa; } .jmesa tr[id*=extraRow]:hover > td { border-top: 1px dotted #cdcdcd !important; } .jmesa tr[id*=extraRow]:hover td { border-color: #e2f3fa; } .jmesa table.table > tbody > tr.even { background: #fff; /* fco doesn't like it. */ } .jmesa table.table > tbody > tr.odd { background: #fff; } .jmesa table.info, .jmesa table.info td { padding: 0; margin: 0; border-collapse: collapse; } .jmesa #wsColumnDroplistDiv { position: relative; z-index: 1234; top: 0 !important; } .jmesa .mdi-menu-left, .jmesa .mdi-menu-right { font-size: 27px !important; } /* In documentary groups the circle is large */ #documentalValidations .mdi.mdi-checkbox-blank-circle, #relatedDocumentalValidations .mdi.mdi-checkbox-blank-circle { font-size: 16px; } .toolbar table { margin-right: auto; margin-left: 0px; margin-bottom: 10px; float: right !important; } .toolbar td { border-top: 0; /* Inherited from Bootstrap */ } #contenido_max .jmesa .fixed { width: 966px; } /* Occasional styles */ .jmesa #ROLEVIEW .odd td, .jmesa #ROLEVIEW .highlight td { min-width: 16px; } /* jmesa ROLEVIEW */ .fixedTable, .fixedTable .fixedTable-header, .fixedTable .fixedTable-body { overflow: hidden; } .fixedTable { width: 100%; height: 100%; } .fixedTable .fixedTable-body { overflow: auto; } #countdown_dashboard { height: 50px; margin: 0; } #countdown_dashboard .dash { height: 50px; width: 50px; float: left; position: relative; line-height: normal !important; background: linear-gradient(to bottom, var(--primary-color) 0%, var(--primary-color-hover) 100%); border-radius: 5px; display: flex; justify-content: center; border-radius: 7.5px; } #countdown_dashboard .dash_title { font-size: 10px; font-family: var(--font-general); color: #fff; position: absolute; bottom: 5px; } #countdown_dashboard .dash .digit { font-size: 20px; font-weight: bold; float: left; text-align: center; font-family: var(--font-general); color: #fff; margin-top: 0.3rem; } #countdown_dashboard.off .dash .digit { background: #bb2020; } #countdown_dashboard .separator { float: left; width: 5px; text-align: center; margin: 27px 0 0 0; } table.dataTable { width: 100% !important; } table.dataTable tbody th, table.dataTable tbody td { vertical-align: middle; padding: var(--table-spacing) !important; } table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child, table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th:first-child { /* padding-left: 30px !important; */ } table.dataTable thead th.th-search { padding: 8px 2px; } table.dataTable tbody td.select-checkbox, table.dataTable tbody th.select-checkbox { width: 10px; } div.dt-container div.dt-length select { display: initial; width: auto; font-size: auto; margin-left: 0.5rem; margin-right: 0.5rem; } table.dataTable thead > tr > th > span.dt-column-title { color: var(--table-header-text-color); cursor: pointer; vertical-align: middle; opacity: 1; font-weight: var(--table-header-font-weight); } table.dataTable thead input:not(.input-decorators-base-input):not(.form-check-input) { background-color: #fff; border-radius: 0.25rem; border: 1px solid #ccc; outline: none; width: auto; } table.dataTable thead input:not(.input-decorators-base-input):focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important; outline: none; } table.dataTable div.input-select input:focus { border-color: 0 !important; box-shadow: none !important; outline: none !important; } table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date { text-align: left !important; } .table.dataTable thead th { border-bottom: 0 !important; font-size: var(--table-header-font-size); } table.dataTable thead > tr:nth-child(n) > th { background-color: var(--table-header-bg-color); overflow: hidden; } table.dataTable thead > tr > th.dt-ordering-asc, table.dataTable thead > tr > th.dt-ordering-desc { background-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), 94%); } table.dataTable thead th[class*=sorting]:before, table.dataTable thead th[class*=sorting]:after { color: rgba(var(--primary-color-rgb), 1); opacity: 1; } table.dataTable.display tbody > tr.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.selected > .sorting_1 { background: none !important; } .dt-layout-table { overflow: auto; } .dt-container div.dt-info { white-space: inherit; } table.dataTable thead th.dt-orderable-asc span.dt-column-order:before { right: 0.4em; top: 0.7rem; content: "\f0360"; font: 22px "Material Design Icons"; display: flex; align-items: center; justify-content: center; } table.dataTable thead th.dt-orderable-desc span.dt-column-order:after { right: 0.4em; top: 1.7rem; content: "\f035d"; font: 22px "Material Design Icons"; display: flex; align-items: center; justify-content: center; } table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before { color: var(--table-header-icon-color); opacity: 1; } table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th:first-child::before { position: inherit; left: auto; top: auto; background-color: rgba(var(--primary-color-rgb), 1); float: left; margin-right: 10px; } table.dataTable.collapsed .ms-1-collapsed { margin-left: 0.25rem !important; } table.dataTable.collapsed .ms-2-collapsed { margin-left: 0.5rem !important; } table.dataTable.collapsed .ms-3-collapsed { margin-left: 1rem !important; } table.dataTable.collapsed .ms-4-collapsed { margin-left: 1.5rem !important; } div.dtr-modal div.dtr-modal-display { background-color: #fff !important; } table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background-color: transparent !important; } table.dataTable .even { /* Fco doesn't like it. */ } table.dataTable .odd { background-color: #fff; } /* select.bootstrap5.min.css */ table.dataTable tbody tr.selected td { color: #000; background-color: rgba(var(--primary-color-rgb), 0.1); } table.dataTable.hover tbody > tr.selected:hover, table.dataTable.hover tbody > tr > .selected:hover, table.dataTable.display tbody > tr.selected:hover, table.dataTable.display tbody > tr > .selected:hover { background-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), 89%); } .custom-checkbox .form-check-input:indeterminate ~ .form-check-label::before { border-color: var(--primary-color); background-color: var(--primary-color); } /**/ @media screen and (max-width: 576px) { /* So that it appears on the right in the popups */ div.dt-container div.dt-length, div.dt-container div.dt-search, div.dt-container div.dt-info, div.dt-container div.dt-paging { text-align: right !important; } div.dt-container div.dt-info { margin-bottom: 1rem !important; } } div.dt-container div.dt-length { /* Responsive view: show register and buttons */ text-align: center !important; } [class^=break-cell-] { word-wrap: break-word; } table.dataTable thead th.dt-head-left, table.dataTable tfoot td.dt-head-left { text-align: left; } table.dataTable thead th.dt-head-center, table.dataTable tfoot td.dt-head-center { text-align: center; } table.dataTable thead th.dt-head-right, table.dataTable tfoot td.dt-head-right { text-align: right; } table.dataTable thead th.dt-head-justify, table.dataTable tfoot td.dt-head-justify { text-align: justify; } table.dataTable thead th.dt-head-nowrap, table.dataTable tfoot td.dt-head-nowrap { white-space: nowrap; } table.dataTable tbody th.dt-body-left, table.dataTable tbody td.dt-body-left { text-align: left; } table.dataTable tbody th.dt-body-center, table.dataTable tbody td.dt-body-center { text-align: center; } table.dataTable tbody th.dt-body-right, table.dataTable tbody td.dt-body-right { text-align: right; } table.dataTable tbody th.dt-body-justify, table.dataTable tbody td.dt-body-justify { text-align: justify; } table.dataTable tbody th.dt-body-nowrap, table.dataTable tbody td.dt-body-nowrap { white-space: nowrap; } /**/ table.dataTable thead th input[type=text] { /*width: 100%;*/ } div.dataTables_scrollHead div.dt-scroll-headInner { /*width: 100% !important; Responsive fails */ } body.widget #locatorExportButtonsDiv { /* Pendiente de programar */ display: none !important; } body.widget #locatorTableDiv .row, body.popup #locatorTableDiv .row { margin-left: 0; margin-right: 0; } body.widget #locatorTableDiv .row > [class^=col-], body.popup #locatorTableDiv .row > [class^=col-] { padding-left: 0; padding-right: 0; } table.dataTable .mdi.mdi-checkbox-blank { font-size: 16px !important; } table.dataTable .mdi.mdi-checkbox-blank-circle { font-size: 9px !important; } div.dt-container div.dt-paging ul.pagination { margin-top: 1rem; } div.dt-container div.dt-processing { /* Be careful with the coordinates because they can cover a button and cause the tests to fail. */ padding: 20px !important; text-align: center !important; font-size: 14px; font-weight: bold; color: #000; background: white; width: 300px !important; height: 70px; opacity: 0.9; box-sizing: content-box; border: 1px solid rgba(0, 0, 0, 0.125); position: fixed !important; top: 0% !important; left: 50% !important; margin-left: -150px !important; margin-top: 220px !important; z-index: 6666; } #dt-processing-message + div { /* Hide default processing loading spinner */ display: none; } /* editor.bootstrap5.css*/ table.dataTable tbody tr.highlight { background-color: var(--primary-color-light) !important; } div.DTE div.DTE_Form_Error { color: var(--danger-color); } table.dataTable tbody td { font-size: var(--table-cell-font-size); } table.dataTable tbody td .editable-element { border-bottom: 1px dotted var(--primary-color); cursor: cell; } table.dataTable tbody td .editable-element:empty { border-bottom: none !important; width: 100%; height: 100%; display: block; cursor: cell; padding: 1rem !important; } div.dt-datetime table td.selectable button:hover { background: var(--primary-color-light) !important; color: var(--primary-color-light-contrast-text) !important; } /* Focus header removed */ table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover, table.dataTable thead > tr > td.dt-orderable-asc:hover, table.dataTable thead > tr > td.dt-orderable-desc:hover { outline: 0 !important; } /* Modal */ .DTE_Header.modal-header { background: var(--primary-color); color: var(--primary-color-contrast-text); font-size: 1.2rem; font-family: var(--font-headings); font-weight: var(--font-headings-weight); } .DTE_Header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .DTE_Footer.modal-footer { display: flex; justify-content: center; } div.DTE_Bubble { z-index: 1000; } div.DTE_Bubble_Background { z-index: 999; } /* Paginate */ .page-link.ellipsis { pointer-events: none; /* So the [...] button does not seem clickable */ } /* Left div: tServiceP_info has top padding, but right div not */ div.dt-container div.dt-paging { padding-top: 0.85em; } /* Checkbox */ #multiSelectionColumn:before, #multiSelectionColumn:after { display: none; } #multiSelectionColumn .form-check-label { margin-left: 0; display: initial; } #multiSelectionColumn .form-check-input { float: inherit; margin-left: 0; } #multiSelectionColumn .form-check { padding-left: 0; } /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { zoom: 1; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter: Alpha(Opacity=0); } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-selectable-helper { position: absolute; z-index: 100; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin-top: 2px; padding: 0.5em 0.5em 0.5em 0.7em; zoom: 1; } .ui-accordion .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-noicons { padding-left: 0.7em; } .ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: 0.5em; top: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; zoom: 1; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; } /* workarounds */ * html .ui-autocomplete { width: 1px; } /* without this, the menu expands to 100% in IE6 */ .ui-button { display: inline-block; position: relative; padding: 0; margin-right: 0.1em; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */ .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } .ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */ button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */ .ui-button-icons-only { width: 3.4em; } button.ui-button-icons-only { width: 3.7em; } /*button text element */ .ui-button .ui-button-text { display: block; line-height: 1.4; } .ui-button-text-only .ui-button-text { padding: 0.4em 1em; } .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: 0.4em; text-indent: -9999999px; } .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: 0.4em 1em 0.4em 2.1em; } .ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: 0.4em 2.1em 0.4em 1em; } .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } /* no icon support for input elements, provide padding by default */ input.ui-button { padding: 0.4em 1em; } /*button icon element(s) */ .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: 0.5em; } .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: 0.5em; } .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: 0.5em; } /*button sets*/ .ui-buttonset { margin-right: 7px; } .ui-buttonset .ui-button { margin-left: 0; margin-right: -0.3em; } /* workarounds */ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */ .ui-datepicker { width: 17em; padding: 0.2em 0.2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: 0.2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; padding: inherit; } .ui-datepicker select.ui-datepicker-month-year { width: 100%; font-family: var(--font-general); } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%; font-family: var(--font-general); } .ui-datepicker table { width: 100%; font-size: 0.9em; border-collapse: collapse; margin: 0 0 0.4em; } .ui-datepicker th { padding: 0.7em 0.3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: 0.2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: 0.7em 0 0 0; padding: 0 0.2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: 0.5em 0.2em 0.4em; cursor: pointer; padding: 0.2em 0.6em 0.3em 0.6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto 0.4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0em; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float: right; } .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } /* IE6 IFRAME FIX (taken from datepicker 1.5.3 */ .ui-datepicker-cover { position: absolute; /*must have*/ z-index: -1; /*must have*/ filter: mask(); /*must have*/ top: -4px; /*must have*/ left: -4px; /*must have*/ width: 200px; /*must have*/ height: 200px; /*must have*/ } .ui-dialog { position: absolute; top: 0; left: 0; padding: 0.2em; width: 300px; overflow: hidden; } .ui-dialog .ui-dialog-titlebar { padding: 0.4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: 0.1em 16px 0.1em 0; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: 3px; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 0px; height: 18px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: 0.5em 1em; background: none; overflow: auto; zoom: 1; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: 0.5em 0 0 0; padding: 0.3em 1em 0.5em 0.4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: 0.5em 0.4em 0.5em 0; cursor: pointer; } .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-menu { list-style: none; padding: 2px; margin: 0; display: block; outline: none; } .ui-menu .ui-menu { margin-top: -3px; position: absolute; } .ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; } .ui-menu .ui-menu-item .mdi { color: var(--primary-color); } .ui-menu .ui-menu-item .mdi:hover { color: var(--primary-color); } .ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px 0.4em; line-height: 1.5; zoom: 1; font-weight: normal; border: 0; } .ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; background: rgba(var(--primary-color), 0.1); } .ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-state-disabled a { cursor: default; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0.2em; left: 0.2em; } /* right-aligned */ .ui-menu .ui-menu-icon { position: static; float: right; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 0.7em; display: block; border: 0; background-position: 0 0; } .ui-slider-horizontal { height: 0.8em; } .ui-slider-horizontal .ui-slider-handle { top: -0.3em; margin-left: -0.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: 0.8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -0.3em; margin-left: 0; margin-bottom: -0.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: none; padding: 0; margin: 0.2em 0; vertical-align: middle; margin-left: 0.4em; margin-right: 22px; } .ui-spinner-button { width: 16px; height: 50%; font-size: 0.5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } .ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; border-right: none; } /* more specificity required here to overide default borders */ .ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } /* vertical centre icon */ .ui-spinner-up { top: 0; } .ui-spinner-down { bottom: 0; } /* TR overrides */ .ui-spinner .ui-icon-triangle-1-s { /* need to fix icons sprite */ background-position: -65px -16px; } .ui-tabs { position: relative; padding: 0.2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ .ui-tabs .ui-tabs-nav { margin: 0; padding: 0.2em 0.2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px 0.2em 0 0; border-bottom: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { float: left; padding: 0.5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; } /* Fades and background-images don't work well together in IE6, drop the image */ * html .ui-tooltip { background-image: none; } body .ui-tooltip { border-width: 2px; } /* Component containers ----------------------------------*/ .ui-widget { font-family: var(--font-general); font-size: inherit; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: var(--font-general); font-size: 1em; border: 0; } .ui-widget-content { border: 1px solid #dddddd; background: #ffffff; color: #333333; } .ui-widget-content a { color: #333333; } .ui-widget-header { border: 1px solid #dddddd; background: var(--primary-color); color: #ffffff; font-weight: bold; } .ui-widget-header a { color: #ffffff; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #c5c5c5; background: #f6f6f6; font-weight: normal; color: #454545; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #454545; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background: rgba(var(--primary-color-rgb), 0.1) !important; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: #2b2b2b; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid var(--primary-color); background: var(--primary-color) !important; font-weight: normal; color: #ffffff; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid var(--secondary-color); background: var(--secondary-color); color: #ffffff; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #ffffff; } .ui-state-highlight.ui-state-hover { border: 1px solid var(--secondary-color) !important; background: var(--secondary-color) !important; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #f1a899; background: #fddfdf; color: #5f3f3f; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #5f3f3f; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #5f3f3f; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: 0.7; filter: Alpha(Opacity=70); font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: 0.35; filter: Alpha(Opacity=35); background-image: none; } .ui-state-disabled .ui-icon { filter: Alpha(Opacity=35); } /* For IE8 - See #6059 */ /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; background-image: url("../images/jquery-ui.theme/ui-icons_444444_256x240.png"); } .ui-widget-content .ui-icon { background-image: url("../images/jquery-ui.theme/ui-icons_444444_256x240.png"); } .ui-widget-header .ui-icon { background-image: url("../images/jquery-ui.theme/ui-icons_ffffff_256x240.png"); } .ui-widget-header .ui-state-hover .ui-icon { background-image: url("../images/jquery-ui.theme/ui-icons_ececec_256x240.png"); } .ui-state-default .ui-icon { background-image: url("../images/jquery-ui.theme/ui-icons_777777_256x240.png"); } .ui-state-focus .ui-icon { background-image: url("../images/jquery-ui.theme/ui-icons_ffffff_256x240.png"); } .ui-state-hover .ui-icon { background-image: url("../images/jquery-ui.theme/ui-icons_777777_256x240.png"); } .ui-state-active .ui-icon { background-image: url("../images/jquery-ui.theme/ui-icons_ffffff_256x240.png"); } .ui-state-highlight .ui-icon { background-image: url("../images/jquery-ui.theme/ui-icons_777777_256x240.png"); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("../images/jquery-ui.theme/ui-icons_ececec_256x240.png"); } /* positioning */ .ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-ne { background-position: -16px 0; } .ui-icon-carat-1-e { background-position: -32px 0; } .ui-icon-carat-1-se { background-position: -48px 0; } .ui-icon-carat-1-s { background-position: -64px 0; } .ui-icon-carat-1-sw { background-position: -80px 0; } .ui-icon-carat-1-w { background-position: -96px 0; } .ui-icon-carat-1-nw { background-position: -112px 0; } .ui-icon-carat-2-n-s { background-position: -128px 0; } .ui-icon-carat-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -64px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -64px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 0 -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 0px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 0px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 0px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa; opacity: 0.3; filter: Alpha(Opacity=30); } .ui-widget-shadow { margin: 0px 0 0 0px; padding: 5px; background: #666666; opacity: 0.3; filter: Alpha(Opacity=30); border-radius: 0px; } .ui-multiselect { background: #fff !important; color: #4e4e4e !important; -webkit-border-radius: 0px; border-radius: 0px !important; border-color: var(--bs-border-color) !important; /* Mismo color que los bordes de Bootstrap */ font-weight: normal; font-size: 13px; padding: 3px; margin: 0 0 10px 0; line-height: 15px; text-indent: 2px; } @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Para Chrome */ .ui-multiselect { padding: 2px 0 1px 0; text-indent: 5px; } } .ui-multiselect-menu { margin-top: -1px; } .ui-multiselect-menu .ui-widget-header { background: var(--primary-color); border-radius: 0px; font-weight: normal; border: 0; } .ui-multiselect-menu .ui-widget-header span { font-size: 9px; font-family: var(--font-general); margin: 1px 0 0 0; } .ui-multiselect-menu { border-radius: 0px; border-color: var(--bs-border-color); /* Mismo color que los bordes de Bootstrap */ box-sizing: content-box; } .ui-multiselect-checkboxes li label input { margin: 0 5px 0 5px; } .ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align: left; border-color: #bbb; border-bottom-style: dotted; margin-left: -3px; margin-bottom: 5px; } .ui-multiselect span { float: left; } /* SELECTIZE INPUT */ .selectize-input { border: var(--bs-border-width) solid var(--bs-border-color); } /* SELECTIZE CONTROL */ .selectize-control.multi .selectize-input > div.active { background: var(--primary-color); } .selectize-control.single .selectize-input::after { content: " " !important; display: block !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px 12px; width: 16px !important; height: 12px !important; right: 10px !important; top: 8px !important; position: absolute !important; z-index: 1; margin-top: 0 !important; border-color: inherit !important; border: 0 !important; } .selectize-control.single .selectize-input.dropdown-active:after { margin-top: 0 !important; } .selectize-control.multi .selectize-input > div { padding: 0 0.75rem; font-size: 1rem; } .selectize-control.multi .selectize-input.has-items { padding: calc(0.375rem - 1px - 0px) 0.375rem calc(0.375rem - 1px - 3px - 0px); } .selectize-control:not(:first-child) .selectize-input { border-top-left-radius: auto; border-bottom-left-radius: auto; } .selectize-control.plugin-remove_button .item .remove { margin-left: 0.75rem; padding: 1px 9px 0 5px; } .selectize-control:not(:first-child) .selectize-input { border-top-left-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; } /* SELECTIZE DROPDOWN */ .selectize-dropdown .active { background-color: var(--primary-color); } .selectize-dropdown .selected { background-color: var(--primary-color); } .selectize-dropdown [data-selectable] .highlight { background: var(--primary-color); color: var(--primary-color-contrast-text); } #kanban { width: 100% !important; } #kanban .footer { display: none; } main .ck { width: 100%; margin: 0 0 0 -1px; } main .ck textarea { border: 0 !important; } .cke_dialog_ui_html { /* Popup */ border: 0; } a.cke_dialog_ui_button { padding: 0 !important; } a.cke_dialog_ui_button:focus { box-shadow: none !important; } a.cke_dialog_ui_button_ok, a.cke_dialog_ui_button_cancel { background: var(--primary-color) !important; border: 1px solid var(--primary-color) !important; color: var(--primary-color-contrast-text) !important; padding: 4px 1px !important; } a.cke_dialog_ui_button_ok:hover, a.cke_dialog_ui_button_cancel:hover { background: var(--primary-color-hover) !important; border-color: var(--primary-color-hover) !important; color: var(--primary-color-hover-contrast-text) !important; } .cke_dialog .cke_resizer_ltr { margin-right: 5px; position: absolute; right: 0; } #spanDescription p { clear: both; word-break: break-all; } .cke_top, .cke_bottom, .cke_chrome { border-color: var(--bs-border-color) !important; } .cke_fake { border-top: 1px solid var(--bs-border-color) !important; border-left: 1px solid var(--bs-border-color) !important; border-right: 1px solid var(--bs-border-color) !important; background: #f8f8f8; display: flex; justify-content: end; align-items: center; padding: 0 10px; height: 32px; } .cke_fake a.cke_button { height: auto !important; padding: 0 !important; } .cke_fake a.cke_button_off:hover { background: transparent !important; border: 0 !important; } .cke_fake .button.token { background: url("/static/js/ckeditor/plugins/crmtemplates/images/icon.png?t=H0CG") no-repeat; display: block; float: right; width: 16px; height: 16px; margin-top: -1px; } .cke_textarea_inline { border: 1px solid #bbb; } .cke_dialog_footer { display: flex; justify-content: center; background-color: #fff !important; padding: 1rem; } a.cke_dialog_ui_button { border-radius: 0.25rem !important; } .cke_dialog_footer_buttons a.cke_dialog_ui_button span { font-size: 1rem !important; font-weight: normal !important; padding: 0.35rem 1rem !important; } .cke_dialog_title { background-color: var(--primary-color) !important; font-family: var(--font-headings) !important; font-weight: var(--font-headings-weight) !important; font-size: 1.2rem !important; color: #fff !important; padding: 0.5rem 1rem !important; } a.cke_dialog_close_button { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important; filter: invert(1) grayscale(100%) brightness(200%); } .cke_fake + .textarea textarea { border-top-left-radius: 0; border-top-right-radius: 0; } .jsoneditor { border: thin solid var(--bs-border-color) !important; height: 500px !important; } .jsoneditor-modal .pico-modal-header { background: var(--primary-color) !important; } .jsoneditor-modal a { color: var(--primary-color) !important; } .jsoneditor-modal .selectr-selected .selectr-tag { background-color: var(--primary-color) !important; } .jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc, .jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc { background: var(--primary-color) !important; border-color: var(--primary-color) !important; } .jsoneditor-menu { background-color: #f8f8f8 !important; border-bottom: 1px solid var(--bs-border-color) !important; } .jsoneditor-menu a.jsoneditor-poweredBy { display: none !important; } .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected, .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus, .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover { background-color: var(--primary-color) !important; } .ace-jsoneditor .ace_marker-layer .ace_active-line { background: var(--primary-color-lighter) !important; } .jsoneditor-menu > button { background-image: url("../../images/jsoneditor/jsoneditor-icons.svg") !important; } .jsoneditor-menu > .jsoneditor-modes > button { background-image: none !important; color: #3a3a3a !important; } textarea.jsoneditor-text { outline: 0 !important; } div.jsoneditor-field.jsoneditor-highlight, div.jsoneditor-field[contenteditable=true]:focus, div.jsoneditor-field[contenteditable=true]:hover, div.jsoneditor-value.jsoneditor-highlight, div.jsoneditor-value[contenteditable=true]:focus, div.jsoneditor-value[contenteditable=true]:hover { background-color: #ebebeb !important; border: 1px solid transparent !important; color: #666; } tr.jsoneditor-highlight, tr.jsoneditor-selected { background-color: #f2f2f2 !important; } .flatpickr-calendar { box-shadow: 1px 0 #e6e6e6, -1px 0 #e6e6e6, 0 1px #e6e6e6, 0 -1px #e6e6e6, 0 3px 13px #00000014; } .flatpickr-calendar .flatpickr-calendar.open { z-index: 66666666666; } .flatpickr-calendar .flatpickr-day.today, .flatpickr-calendar .flatpickr-day.today:hover { background: #fff; border: 1px solid var(--primary-color); color: var(--primary-color); border-radius: 100%; font-weight: bold; } .flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange, .flatpickr-calendar .flatpickr-day.selected.inRange, .flatpickr-calendar .flatpickr-day.startRange.inRange, .flatpickr-calendar .flatpickr-day.endRange.inRange, .flatpickr-calendar .flatpickr-day.selected:focus, .flatpickr-calendar .flatpickr-day.startRange:focus, .flatpickr-calendar .flatpickr-day.endRange:focus, .flatpickr-calendar .flatpickr-day.selected:hover, .flatpickr-calendar .flatpickr-day.startRange:hover, .flatpickr-calendar .flatpickr-day.endRange:hover, .flatpickr-calendar .flatpickr-day.selected.prevMonthDay, .flatpickr-calendar .flatpickr-day.startRange.prevMonthDay, .flatpickr-calendar .flatpickr-day.endRange.prevMonthDay, .flatpickr-calendar .flatpickr-day.selected.nextMonthDay, .flatpickr-calendar .flatpickr-day.startRange.nextMonthDay, .flatpickr-calendar .flatpickr-day.endRange.nextMonthDay { background: var(--primary-color); border-color: var(--primary-color); color: #fff; } .flatpickr-calendar span.flatpickr-weekday { font-weight: bold !important; } .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--primary-color) !important; } .flatpickr-calendar .flatpickr-calendar.inline { box-shadow: none; border: none; } .flatpickr-calendar .input-flatpickr-inline .flatpickr-calendar.open { z-index: 66666666666; } .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover { margin-right: 2rem !important; background-color: #fff !important; font-size: 15px !important; font-family: var(--font-general) !important; font-weight: 500 !important; } .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { font-weight: 400 !important; } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--primary-color) !important; } .flatpickr-calendar .numInputWrapper:hover { background: transparent !important; } .flatpickr-calendar .flatpickr-current-month .numInputWrapper { font-family: var(--font-general) !important; font-size: 15px !important; } .flatpickr-calendar .flatpickr-current-month input.cur-year { font-weight: 500 !important; font-size: inherit !important; padding: 0 0 0 0.5ch !important; } .flatpickr-calendar .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-calendar .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-calendar .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 rgba(var(--primary-color-rgb), 0.15) !important; } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month, .flatpickr-calendar .flatpickr-months .flatpickr-next-month { padding: 7px !important; } .CodeMirror { border: 1px solid #eee; height: auto; margin-bottom: 15px; } .CodeMirror:last-child { margin-bottom: 0; } .CodeMirror-scroll { height: auto; } .CodeMirror-lines { width: 1px; } .lobipanel .card-body { padding: 1.5rem 0; } .lobipanelcard .card-body { padding: 1.5rem; } .lobipanel > .card-header { background-color: transparent !important; } .lobipanelcard .card-header, .lobipanel .card-header.ui-sortable-handle { padding: 1rem 1.5rem; } .lobipanel > .card-header > .card-title { margin-bottom: 0; max-width: calc(100% - 150px); padding-left: 0; cursor: move; } .lobipanel.panel-expanded > .card-header > .card-title { margin-bottom: 0; max-width: calc(100% - 60px); } .lobipanelcard > .card-header > .card-title h2, .lobipanel > .card-header > .card-title h2 { color: var(--widget-heading-contrast-text); } .flatpickr-calendar.inline { top: 0 !important; } .lobipanel > .card-body { z-index: 1; } .lobipanel > .card-header .dropdown { position: initial; } .lobipanel > .card-header .dropdown .dropdown-toggle:hover, .lobipanel > .card-header .dropdown .dropdown-toggle:hover:focus { text-shadow: none; background-color: #fff; } .lobipanel .card-header .dropdown .dropdown-menu { position: absolute; } .lobipanel .card-header .dropdown .dropdown-menu .dropdown-item { margin-left: 10px; } .lobipanel .card-header .dropdown .dropdown-menu .dropdown-item .mdi:before { font-size: 17px; } .lobipanel .card-header .dropdown .dropdown-menu .dropdown-item:hover, .lobipanel .card-header .dropdown .dropdown-menu .dropdown-item:focus:hover { text-shadow: none !important; background-color: transparent !important; cursor: pointer; } .lobipanel > .card-header .dropdown .dropdown-menu { top: 12px !important; right: 12px; } .lobipanel > .card-header .dropdown .dropdown-toggle { cursor: pointer; color: var(--primary-color); } .lobipanel.panel-expanded, .lobipanel.panel-expanded iframe { height: 100vh !important; } .dropdown-item .mdi { font-size: 20px; } .lobipanel-parent-sortable { min-height: auto; } body.main .lobipanel { box-shadow: 0 0.15rem 1.75rem 0 rgba(var(--primary-color-rgb), 0.15) !important; z-index: 1; background: #fff; /* Add !important avoids being able to be overwritten */ } .lobipanelcard .mdi { font-size: 20px; color: var(--link-ico-color); /* Don't let it be important, because it overwrites other MDIs */ vertical-align: middle; } .lobipanelcard .mdi:hover { color: var(--link-ico-color-hover); /* Don't let it be important, because it overwrites other MDIs */ } .body.widget .lobipanel { display: none; } .lobipanel .dropdown-item:active { background: #fff; } #lobiWidgets .lobipanel.widget1:before, #lobiWidgets .lobipanel.widget2:before, #lobiWidgets .lobipanel.widget3:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; opacity: 0.3; } #lobiWidgets .lobipanel.widget1 .card:hover, #lobiWidgets .lobipanel.widget2 .card:hover { background-color: rgba(238, 238, 238, 0.9) !important; } .lobipanel-placeholder { background-color: rgba(var(--primary-color-rgb), 0.2); border: 1px dashed rgba(var(--primary-color-rgb), 0.2); } .lobipanel.panel-unpin.panel-minimized > .card-header .dropdown .dropdown-menu { display: flex; } .lobipanel-minimized-toolbar { background: transparent; } .lobipanel-minimized #column { z-index: 1 !important; } /* Main */ body.main #header_object, body.main .lobipanel { box-shadow: 0 0.15rem 1.75rem 0 #aaa !important; } /* Icon Header */ #header_object .ico .round { background-color: var(--tertiary-color) !important; }