@charset "utf-8";
/* CSS Document */
/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */

@import url('https://fonts.googleapis.com/css2?family=Road+Rage&display=swap');
@import url('fabrik.css');
@import url('fabrik-groups.css');
@import url('fabrik-elements.css');
@import url('dashboards.css');
@import url('side-menu.css');
@import url('gear-summary.css');
@import url('devices.css');



/* Change some root colors and settings of the document */

:root {

    --cassiopeia-color-primary: #4E6B79;
    --cassiopeia-color-link: #B35667;
    --cassiopeia-color-hover: #B35667;

    --cassiopeia-font-family-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --cassiopeia-font-family-headings: "Road Rage", Helvetica Neue, Helvetica, Arial, sans-serif !important;
    --cassiopeia-font-weight-headings: none;
    --cassiopeia-font-weight-normal: none;
    
    --blue: #4E6B79;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #B35667;
    --orange: #fd7e14;
    --yellow: #CFD2B2;
    --yellow2: #cfd2b263;
    --green: #80B192;
	--green-dark: #497153e0;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #353b41;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #4E6B79;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
   /* --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 1rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #efefef;
	--radius: 0.25rem;
	--radius-top: 0.25rem 0.25rem 0 0;
	--radius-bot: 0 0 0.25rem 0.25rem;
	--radius-right: 0 0.25rem 0.25rem 0;
	--radius-left: 0.25rem 0 0 0.25rem;
	--box-shadow: 0 0 0.25rem 0rem rgb(78 107 121);
	--padding-div-tit: 0.5rem 0.25rem;
	--emphasis-color: #22262aa8;
}
.table {
    --table-bg: transparent;
    --table-accent-bg: transparent;
    --table-striped-color: var(--blue);
    --table-striped-bg: rgba(0,0,0,.05);
    --table-active-color: #22262a;
    --table-active-bg: rgba(0,0,0,.1);
    --table-hover-color: #22262a;
    --table-hover-bg: rgba(0,0,0,.075);
    border-color: #dfe3e7;
    color: var(--blue);
    margin-bottom: 1rem;
    vertical-align: top;
    width: 100%;
}

/* Use the imported font (See first lines of the document) on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */
.grid-child.container-sidebar-left .card {
	border:none;
}
.grid-child.container-sidebar-left .card:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: 0px 0px 10px 0px var(--blue);
    box-shadow: none;
    border: 0;
}
.mt-3 {
    margin-top: 0.1rem !important;
}
.form-control:focus,
.switcher .fabrikinput:focus,
.form-select:focus,
.custom-select:focus,
textarea.fabrikinput:focus {
    color: var(--body-color);
    background-color: #fff;
    border-color: #ced4da;
    outline: 0;
    box-shadow: 0 0 5px 0 #4e6b797a;
}
.container-header .container-nav {
	padding-bottom:0.5em;
    justify-content: flex-start;
}
.grid-child.container-nav {
	align-items: center;
}
.container-component>*+*, .container-component>:first-child, .container-sidebar-left>*+*, .container-sidebar-left>:first-child, .container-sidebar-right>*+*, .container-sidebar-right>:first-child {
    margin-top: 0.5em;
}
main > p {
    margin-bottom: 0;
}
.elemento-dinamico a {
    display: block;
    text-decoration: none;
    color: var(--yellow);
    background: var(--blue);
    padding: 3px 5px;
    margin-bottom: 5px;
    border-radius: var(--radius);
}
.elemento-dinamico a:hover {
    background: var(--red);
}
.elemento-dinamico a:selected {
    background: var(--red);
}
.elemento-dinamico {
    list-style-type: none;
}

.elemento-dinamico a.active {
    background: var(--red) !important;
}
/* MAIN CONTAINER */
body:not(.has-sidebar-right) .site-grid .container-component {
    grid-column-end: main-end;
    max-width: 1200px;
}
.com-content-article.item-page .float-end {
    display: none;
}

/* Header Logo */
div#mod-custom114 p {
    margin: 0 1em 0 0;
}
/* MAIN MENU */
ul.mod-menu.mod-list.nav.main {
    text-transform: uppercase;
    color: var(--yellow);
}
.mod-list li.active>a {
    color: var(--white);
	opacity: .6;
}

/* TOP MENU */
ul.mod-menu.mod-list.nav.top {
    display: flex;
    flex-direction: row;
   /* flex-wrap: nowrap;*/
    width: 100%;
    justify-content: center;
}
ul.mod-menu.mod-list.nav.top li {
    padding: 0 0.5rem;
}
/*.top-a.no-card {
    background: var(--red);
    border-radius: var(--radius);
}*/
.top-a.no-card, .top-b.no-card {
    background: var(--blue);
    border-radius: var(--radius);
}
ul.mod-menu.mod-list.nav.top li a {
    color: var(--yellow);
    text-transform: uppercase;
    font-size: 0.9rem;
}
ul.mod-menu.mod-list.nav.top li.active>a {
    color: var(--white);
}
.container-top-a>*, .container-top-b>* {
	margin:0.5em 0 0;
}

.collapse:not(.show) {
    display: inherit;
}
.jmp-menu {
    background: #ffffff8a !important;
}
.jmp-menu.l li:last-child a {
	border-bottom:0;
}
/* ALERTAS JOOMLA */

#system-message-container joomla-alert[type=danger], #system-message-container joomla-alert[type=error] {
    --alert-accent-color: var(--red);
    --alert-heading-text: hsla(0,0%,100%,.95);
    --alert-close-button: var(--red);
    background-color: #fff;
}

#system-message-container joomla-alert[type=message], #system-message-container joomla-alert[type=success] {
    --alert-accent-color: var(--green);
    --alert-heading-text: hsla(0,0%,100%,.95);
    --alert-close-button: var(--green);
    background-color: #fff;
}
#system-message-container joomla-alert .alert-heading {
    align-content: center;
    color: var(--alert-heading-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.8rem;
}
#system-message-container joomla-alert {
    background-color: #fff;
    color: var(--gray-700);
}
.text-danger {
    --text-opacity: 1;
    color: var(--red) !important;
    font-size: 0.8em;
}

/* Body style*/
body.wrapper-fluid .site-grid {
    grid-gap: 0 0.5em;
    grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,25%)) [main-end] minmax(0,1fr) [full-end];
}
/*body.wrapper-fluid .site-grid {
    grid-gap: 0 0.5em;
    grid-template-columns: [full-start] 1% [main-start] minmax(0, 1fr) 600px 600px minmax(0, 1fr) [main-end] 1% [full-end];
}*/
h1 {
    background: var(--red);
    padding: 5px 5px;
    line-height: 1;
    border-radius: var(--radius);
    color: var(--yellow);
    text-transform: uppercase;
    text-align: center;
	text-shadow: 0 0 3px #000;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	cursor:default;
}

/* The page header of Cassiopeia has the class "header" so you control it with .header */

.header {
    background: var(--blue);
}

Smaller banner
.container-banner .banner-overlay {
    height: 40vh;
}

/* MOBILE MENU JMP-MENU */
.jmp-btn-group button {
	background: var(--yellow) !important;
	color: var(--blue) !important;
}

/* Modules have the class card, so you control them with .card - if you want to control only a specific module, you can give the module its own CSS class in the settings and then control it with that */

.card {
    margin-top: 0.5rem;
	border-radius: var(--radius);
}
.card:hover {
	-webkit-box-shadow: 0px 0px 10px 0px var(--blue);
	-moz-box-shadow: 0px 0px 10px 0px var(--blue);
	box-shadow: 0px 0px 10px 0px var(--blue);
	border:0;
}

/* Modules are on different module positions in the Cassiopeia template then the modules get in addition to card also the position as class name, for example main-top - so if you want to change all modules to main top you take .main-top.card */

.main-top.card {
    background: #e1e9f5;
}

/* Headings are html elements, the main heading is an h1, then comes h2, h3, h4 and so on. You control an html element by simply writing the name in front of it */
.
h1 {
    text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
    color: rgba(119, 9, 121, 1);
}

/* FORM HEADER */
.form-header {
    background: var(--red);
    text-align: center;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}
img.form-img {
    height: 2.5rem;
    margin: 0.5rem;
}
span.form-title {
    color: #cfd2b2;
    vertical-align: middle;
    font-family: 'Road Rage', sans-serif;
    font-size: 2.5em;
    font-weight: normal;
    line-height: 1em;
}
/* In Joomla most buttons have the class btn-primary - in the element inspector you can check if the button you want to color really has this color.
*/

label.btn.btn-outline-secondary {
    cursor: pointer;
}
.btn-outline-primary:hover {
    background-color: #353b41;
    border-color: #353b41;
    color: #fff;
}
.btn.btn-primary.save {
    background-color: var(--green);
	color: var(--gray-dark);
}

/* If you want to color something, only if you move the mouse over it then write :hover behind it
*/

.btn.btn-primary.save:hover {
    background-color: var(--yellow);
	color: var(--red);
}
.btn-check:active+.btn-primary:focus, .btn-check:checked+.btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show>.btn-primary.dropdown-toggle:focus, .btn-check:focus+.btn-primary, .btn-primary:focus {
	box-shadow:var(--box-shadow);
}
.btn {
    background-color: var(--yellow);
    border: 0;
    color: var(--blue);
}
.btn:hover {
    background-color: var(--blue);
    border-color: var(--btn-hover-border-color);
    color: var(--yellow);
}

/* In Joomla all article images have the class item-image, if you want to control only a specific image, then you have to give the image inside the article its own CSS class.
*/

.item-image {
    border: 2px solid #ff0000;
}
/* TABLES */
.table>:not(:first-child) {
	    border-top: 0;
}
table.table.table-striped.repeatGroupTable thead {
    display: none;
}


/* Tabs */
.nav.nav-tabs .nav-link {
	padding:0.5em 0.5em;
}
.nav-tabs+.tab-content {
	padding:5px;
}.nav.nav-tabs .nav-link.active {
    background-color: var(--blue);
    background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.05));
    border-left: 0;
    border-right: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: inset 2px 0 1px -1px rgb(0 0 0 / 8%), inset -2px 0 1px -1px rgb(0 0 0 / 8%), inset 0 1px 0 rgb(0 0 0 / 2%);
    color: var(--yellow);
}
.nav.nav-tabs .nav-link.active:after {
    background-color: var(--yellow);
}

/*If you run into icons on the website, you can color them individually*/

.icon-user {
    color: #403678;

}

/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */

.footer {
    background: var(--blue);
}
.footer .grid-child {
    padding: 1.5rem 2em;
}

body.site.com_fabrik.wrapper-fluid.view-form.no-layout.no-task.itemid-220 .top-b.no-card, body.site.com_fabrik.wrapper-fluid.view-form.no-layout.no-task.itemid-137 .top-b.no-card {
    display: none;
}
.top-a.no-card button.navbar-toggler.navbar-toggler-right, .top-b.no-card button.navbar-toggler.navbar-toggler-right {
    display: none;
}



.jmp-menu.l li a {
    border-bottom: 1px solid #ccc;
    display: block;
    background: var(--blue);
    color: var(--yellow);
}
.jmp-menu.l li.active a {
    background: var(--red );
}



/* ANCHOS COLUMNAS */

/* 5 COLUMNAS */
    .col-sm-2 {
        flex: none;
        width: 20%;
}

[data-bs-toggle="tooltip"] {
    pointer-events: none !important; /* Deshabilita la interacción */
    display: none !important; /* Oculta el tooltip */
}
span.fa.icon-star.small {
    color: #b35667b8;
}
.osm-pricing-table-circle .osm-plan:hover .osm-plan-price {
	background:var(--green) !important;
}


/* SYSTEM POPUP MESSAGES */
.polipop_position_center {
    top: 75px;
}
.polipop_layout_popups.polipop_theme_default .polipop__notification {
    box-shadow: 0 0px 5px var(--blue);
    border-radius: 5px;
}
.polipop__notification-title,
.polipop__notification-content {
	text-shadow: 0 0 2px #000;
}
.polipop__notification-content {
    text-transform: uppercase;
    font-weight: bold !important;
    text-align: center;
    font-size: 1.2em;
}
.polipop__notification-icon,
.polipop__notification-title,
button.polipop__notification-close {
    display: none;
}

/* GEAR REPORT */
.com-content-article.item-page-gear-report .groupintro {
    background: transparent;
    margin-bottom: 30px;
}
.com-content-article.item-page-gear-report .form-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000;
    text-shadow: none;
    font-size: 1.4em;
    font-weight: bold;
    text-decoration: underline;
}
.com-content-article.item-page-gear-report .category-name {
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 10px;
}
.com-content-article.item-page-gear-report .quantity-model {
    width: 100%;
}
.com-content-article.item-page-gear-report .category-container {
    margin-bottom: 30px;
}