/* Bootstrap override */
:root {
    --body-text-color: #ffffff;
    --text-muted-color: #dddddd;

    --bg-main: ;
    --bg-main-border-color: #00;
    --bg-main-z2: #00;
    --bg-main-z2-border-color: #00;
    --bg-main-z3: #00;
    --bg-main-z3-border-color: #00;
    --bg-main-z4: #00;
    --bg-main-z4-border-color: #00;
    --text-on-bg-main-color: #ffffff;

    --primary-color: #293069;
    --primary-color-active: #151c55;
    --primary-color-disabled: #3d447d;
    --primary-color-soft: rgba(41,48,105,0.2);
    --primary-color-lighter: #c9d0ff;
    --text-on-primary-color: #ffffff;
    --text-on-primary-color-cta: #ffffff;

    --secondary-color: #293069;
    --secondary-color-active: #151c55;
    --secondary-color-disabled: #3d447d;
    --secondary-color-soft: rgba(41,48,105,0.2);
    --secondary-color-lighter: #c9d0ff;
    --text-on-secondary-color: #FFFFFF;
    --text-on-secondary-color-cta: #FFFFFF;

    --button-border-radius: .25rem;

    --page-navbar-color: #293069;

    --controls-border-color: #00;
}


/* Font family */


*:not(.fa):not(.fas):not(.fab):not(.far) {
    font-family: ;
}


body {
    color: var(--body-text-color) !important;
}

.text-muted {
    color: var(--text-muted-color) !important;
}

.text-line-through {
    text-decoration: line-through !important;
}

.bg-main {
    background-color: var(--bg-main) !important;
}

.bg-main[class*="border-"] {
    border-color: var(--bg-main-border-color) !important;
}

.bg-main-z2 {
    background-color: var(--bg-main-z2) !important;
}

.bg-main-z2[class*="border-"] {
    border-color: var(--bg-main-z2-border-color) !important;
}

.bg-main-z3 {
    background-color: var(--bg-main-z3) !important;
}

.bg-main-z3[class*="border-"] {
    border-color: var(--bg-main-z3-border-color) !important;
}

.cursor-pointer{
    cursor: pointer;
}


/* Styling badge sulle icone */

.show-badge, [data-badge] {
    position: relative;
}

.show-badge:after, [data-badge]:after {
    display: block;
    position: absolute;
    top: -7px;
    right: -14px;
    content: attr(data-badge);
    border-radius: 500px;
    background: var(--primary-color-active);
    color: var(--text-on-primary-color);
    width: 18px;
    height: 18px;
    font-size: 12px;
    text-align: center;
    line-height: 19px;
    font-family: sans-serif;
}

[data-badge].fa-badge-left:after {
    right: initial;
    left: -14px;
}

[data-badge].fa-badge-red:after {
    background-color: #F44336 !important;
}

/*
========================
COMPONENTS: Buttons
========================
*/

*:not(.input-group-append):not(.input-group-prepend) > .btn {
    -webkit-border-radius: var(--button-border-radius) !important;
    -moz-border-radius: var(--button-border-radius) !important;
    border-radius: var(--button-border-radius) !important;
}

.btn-primary {
    color: var(--text-on-primary-color-cta) !important;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    color: var(--text-on-primary-color-cta) !important;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    background-color: var(--primary-color-disabled);
    border-color: var(--primary-color-disabled);
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    color: var(--text-on-primary-color-cta) !important;
    background-color: var(--primary-color-active);
    border-color: var(--primary-color-active);
}

.btn-primary .badge {
    color: var(--primary-color);
    background-color: #FFFFFF;
}


.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.open .dropdown-toggle.btn-outline-primary {
    color: var(--primary-color-active);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.open .dropdown-toggle.btn-outline-primary {
    background-image: none;
}

.btn-outline-primary.disabled,
.btn-outline-primary[disabled],
fieldset[disabled] .btn-outline-primary,
.btn-outline-primary.disabled:hover,
.btn-outline-primary[disabled]:hover,
fieldset[disabled] .btn-outline-primary:hover,
.btn-outline-primary.disabled:focus,
.btn-outline-primary[disabled]:focus,
fieldset[disabled] .btn-outline-primary:focus,
.btn-outline-primary.disabled:active,
.btn-outline-primary[disabled]:active,
fieldset[disabled] .btn-outline-primary:active,
.btn-outline-primary.disabled.active,
.btn-outline-primary[disabled].active,
fieldset[disabled] .btn-outline-primary.active {
    color: var(--primary-color-disabled);
    border-color: var(--primary-color-disabled);
}

.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
    color: var(--primary-color-active);
    background-color: var(--primary-color-active);
    border-color: var(--primary-color-active);
}


/* Secondary button */

.btn-secondary {
    color: var(--text-on-secondary-color-cta);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.open .dropdown-toggle.btn-secondary {
    color: var(--text-on-secondary-color-cta);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary:active,
.btn-secondary.active,
.open .dropdown-toggle.btn-secondary {
    background-image: none;
}

.btn-secondary.disabled,
.btn-secondary[disabled],
fieldset[disabled] .btn-secondary,
.btn-secondary.disabled:hover,
.btn-secondary[disabled]:hover,
fieldset[disabled] .btn-secondary:hover,
.btn-secondary.disabled:focus,
.btn-secondary[disabled]:focus,
fieldset[disabled] .btn-secondary:focus,
.btn-secondary.disabled:active,
.btn-secondary[disabled]:active,
fieldset[disabled] .btn-secondary:active,
.btn-secondary.disabled.active,
.btn-secondary[disabled].active,
fieldset[disabled] .btn-secondary.active {
    background-color: var(--secondary-color-disabled);
    border-color: var(--secondary-color-disabled);
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
    color: var(--text-on-secondary-color-cta);
    background-color: var(--secondary-color-active);
    border-color: var(--secondary-color-active);
}

.btn-secondary .badge {
    color: var(--secondary-color);
    background-color: #FFFFFF;
}


.btn-outline-secondary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.open .dropdown-toggle.btn-outline-secondary {
    color: var(--text-on-secondary-color-cta);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active,
.open .dropdown-toggle.btn-outline-secondary {
    background-image: none;
}

.btn-outline-secondary.disabled,
.btn-outline-secondary[disabled],
fieldset[disabled] .btn-outline-secondary,
.btn-outline-secondary.disabled:hover,
.btn-outline-secondary[disabled]:hover,
fieldset[disabled] .btn-outline-secondary:hover,
.btn-outline-secondary.disabled:focus,
.btn-outline-secondary[disabled]:focus,
fieldset[disabled] .btn-outline-secondary:focus,
.btn-outline-secondary.disabled:active,
.btn-outline-secondary[disabled]:active,
fieldset[disabled] .btn-outline-secondary:active,
.btn-outline-secondary.disabled.active,
.btn-outline-secondary[disabled].active,
fieldset[disabled] .btn-outline-secondary.active {
    color: var(--secondary-color-disabled);
    border-color: var(--secondary-color-disabled);
}

.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle {
    color: var(--text-on-secondary-color-cta);
    background-color: var(--secondary-color-active);
    border-color: var(--secondary-color-active);
}


/* Link button */
.btn-link {
    color: var(--primary-color);
}

.btn-link:hover {
    color: var(--primary-color-active);
}

.btn-link:focus, .btn-link.focus {
    color: var(--primary-color-active);
}

.btn-link:disabled, .btn-link.disabled {
    color: var(--primary-color-disabled);
}

a{
    color: var(--primary-color);
}

a:hover, a:active{
    color: var(--primary-color-active);
}

.rounded-side {
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}

.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-soft-primary {
    background-color: var(--primary-color-soft) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-soft-secondary {
    background-color: var(--secondary-color-soft) !important;
}

.border-secondary {
    border-color: var(--secondary-color) !important;
}


.text-on-bg-primary {
    color: var(--text-on-primary-color-cta) !important;
}

.text-on-bg-secondary {
    color: var(--text-on-secondary-color) !important;
}

.text-on-bg-main {
    color: var(--text-on-bg-main-color) !important;
}

.badge-primary {
    color: #fff;
    background-color: var(--primary-color) !important;
}

.text-facebook {
    color: #4166B2 !important;
}

.text-instagram {
    color: #DC2C7D !important;
}

.text-youtube {
    color: #FF0400 !important;
}


.bg-facebook {
    background-color: #4166B2 !important;
}

.bg-instagram {
    background-color: #DC2C7D !important;
}

.bg-youtube {
    background-color: #FF0400 !important;
}


/*
========================
COMPONENTS: Alerts
========================
*/

.alert-primary {
    color: var(--primary-color) !important;
    background-color: var(--primary-color-lighter) !important;
    border-color: var(--primary-color) !important;
}

.alert-secondary {
    color: var(--secondary-color) !important;
    background-color: var(--secondary-color-lighter) !important;
    border-color: var(--secondary-color) !important;
}

/*
========================
COMPONENTS: Pages
========================
*/
.page-navbar {
    background-color: var(--page-navbar-color);
    color: var(--text-on-primary-color-cta);
}

/*
========================
COMPONENTS: inputs and form controls
========================
*/

.form-control, .form-control:focus {
    color: var(--text-on-bg-main-color) !important;
    background-color: var(--bg-main-z3);
    border: 1px solid var(--controls-border-color) !important;
    appearance: none;
}

/*
========================
COMPONENTS: Pagination
========================
*/

.page-item.active .page-link {
    color: var(--text-on-primary-color-cta) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.page-link {
    color: var(--text-on-bg-main-color) !important;
    background-color: var(--bg-main-z2) !important;
    border: 1px solid var(--controls-border-color) !important;
}


/*
========================
COMPONENTS: fux-radiobox
========================
*/


.fux-radiobox {
    position: relative;
}

.fux-radiobox > input[type="radio"],
.fux-radiobox > input[type="checkbox"] {
    position: absolute;
    visibility: hidden;
}

.fux-radiobox > input[type="radio"] + .fux-radiobox-icon:before,
.fux-radiobox > input[type="checkbox"] + .fux-radiobox-icon:before {
    margin-right: 8px;
}

.fux-radiobox:not(.hidden-if-unchecked) > input[type="radio"] + .fux-radiobox-icon:before,
.fux-radiobox:not(.hidden-if-unchecked) > input[type="checkbox"] + .fux-radiobox-icon:before {
    font-family: "FontAwesome4";
    content: "\f111";
}

.fux-radiobox > input[type="radio"]:checked + .fux-radiobox-icon:before,
.fux-radiobox > input[type="checkbox"]:checked + .fux-radiobox-icon:before {
    font-family: "FontAwesome4";
    content: "\f058";
}

/* DATE PICKER MOBILE REACT */
.datepicker-modal .datepicker {
    background-color: var(--bg-main-z2) !important;
    color: var(--primary-color) !important;
}

.datepicker-modal .datepicker-header {
    color: var(--primary-color) !important;
}

.datepicker-modal .datepicker-navbar-btn {
    color: var(--primary-color) !important;
}

.datepicker-modal .datepicker-wheel {
    border-top: 1px solid var(--primary-color) !important;
    border-bottom: 1px solid var(--primary-color) !important;
}

/* Shadows reversed */
.shadow-reverse {
    box-shadow: 0 -0.5rem 1rem rgba(0,0,0,.15)!important;
}

.shadow-sm-reverse {
    box-shadow: 0 -0.125rem .25rem rgba(0,0,0,.075)!important;
}

.shadow-lg-reverse {
    box-shadow: 0 -1rem 3rem rgba(0,0,0,.175)!important;
}