:root {
    --FirstColor: #FD7E14;
    --SecondColor: #FFFFFF;
    --ThirdColor: #1847BB;
	--NavColor: #ffffff;
}

[data-bs-theme=dark] {
  --bs-body-bg: #005978;
  --bs-body-bg-rgb: 0,89,120;
}

body {
  	font-family: 'Open Sans', sans-serif;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

a.custom-link,
a.custom-link:active,
a.custom-link:hover,
a.custom-link:link,
a.custom-link:visited {
	color: black;
	text-decoration: underline;
}

/* Accordion Button */
.accordion-button,
.accordion-button:active,
.accordion-button:not(.collapsed) {
    background-color: var(--FirstColor);
	border: none;
    color: white;
	font-weight: bold;
}

/* Breadcrumb */
.breadcrumb-section {
    background-color: #f3f3f3;
	color: black;
	font-size: 12px;
}

	.breadcrumb-section .breadcrumb-item,
	.breadcrumb-section .breadcrumb-item a {
		color: gray;
		text-decoration: none; 
	}

/* .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { */
    /* box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; */
/* } */

/* Offcanvas buttons */
.btn-offcanvas-button {
    background-color: white;
    border-color: white);
    color: var(--FirstColor);
}

    .btn-offcanvas-button:active,
    .btn-offcanvas-button:hover,
    .btn-offcanvas-button:focus {
        background-color: var(--SecondColor);
        border-color: var(--FirstColor);
        color: var(--FirstColor);
    }

    .btn-offcanvas-button.disabled {
        background-color: gray;
		border-color: var(--FirstColor);
        color: black;
    }

/* Override bootstrap primary button */
.btn-primary {
    background-color: var(--FirstColor);
    border-color: var(--FirstColor);
    color: white;
}

    .btn-primary:active,
    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--SecondColor);
        border-color: var(--FirstColor);
        color: var(--FirstColor);
    }

    .btn-primary.disabled {
        background-color: gray;
		border-color: var(--FirstColor);
        color: black;
    }

.cart-image {
    position: relative;
    display: inline-block;
}

.cart-input {
	border: none;
	border-top: 1px solid var(--FirstColor);
	border-bottom: 1px solid var(--FirstColor);
}

.cart-summary-item {
	color: white;
	background-color: var(--FirstColor);
	display: block;
	font-size: 14px;
	text-decoration: none;
}

/* DropDowns */
.dropdown-item {
	background-color : white;
}

	.dropdown-item.active,
	.dropdown-item:hover {
		background-color : var(--FirstColor);
		color: white;
	}

.form-label {
    font-weight: bold;
}

/* Product details tabs */
.nav .nav-link {
	background-color: var(--FirstColor);
    border-color: var(--FirstColor);
    color: white;
	margin-left: 5px;
	margin-right: 5px;
}

	.nav .nav-link.active {
		background-color: var(--SecondColor);
		border-color: var(--FirstColor);
		color: var(--FirstColor);
		margin-left: 5px;
		margin-right: 5px;
	}

/* NavBar custom (Home) */
.navbar-custom {
    background-color: var(--FirstColor);
}

    .navbar-custom .navbar-custom-link {
        color: white;
    }

        .navbar-custom .navbar-custom-link:hover {
            color: silver;
            text-decoration: none;
        }

/* NavBar custom Dark (Home) */
.navbar-custom-dark {
    background-color: var(--ThirdColor);
}

    .navbar-custom-dark .btn-dark {
        background-color: var(--ThirdColor);
		border-style: none;
        border-color: var(--ThirdColor);
        color: white;
        font-size: 12px;
        font-weight: bold;
    }

		.navbar-custom-dark .btn-dark:active,
		.navbar-custom-dark .btn-dark:focus,
		.navbar-custom-dark .btn-dark:hover {
            background-color: white;
			border-style: none;
            border-color: white;
            color: var(--ThirdColor);
            text-decoration: none;
            font-size: 12px;
            font-weight: bold;
        }

    .navbar-custom-dark .navbar-toggler {
        background-color: var(--ThirdColor);
        border-color: var(--ThirdColor);
        color: white;
    }

/* Offcanvas ( products filters ) */	
.offcanvas { 
	background-color: var(--FirstColor);
	color: white;
}

	.offcanvas .filter-close {
		background-color: var(--FirstColor);
		border-style: none;
		color: white;
	}
	
		.offcanvas .filter-close:hover {
			transform: scale(1.3);
		}		

	.offcanvas .filter-item {
		color: white;
		background-color: var(--FirstColor);
		display: block;
		font-size: 14px;
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		transition: 0.3s;
	}
	
	.offcanvas .filter-item:hover {
		font-weight: bold;
		color: white;
	}

	.offcanvas-input {
		border: none;
		border-top: 1px solid white;
		border-bottom: 1px solid white;
	}

/* Pagination */
.pagination-custom {
    display: inline-block;
}

    .pagination-custom a {
        color: white;
        background-color: var(--FirstColor);
        float: left;
        padding: 5px 10px;
        text-decoration: none;
        transition: background-color .3s;
        border: 1px solid var(--FirstColor);
        margin: 0 2px;
    }

    .pagination-custom .page-item {
        color: white;
    }

    .pagination-custom .page-item-active {
        background-color: var(--SecondColor);
        color: var(--FirstColor);
        border: 1px solid var(--FirstColor);
    }

    .pagination-custom a:hover:not(.active) {
        background-color: var(--SecondColor);
        color: var(--FirstColor);
        border-color: var(--FirstColor);
    }

.product-novelty {
    background-color: #1209FD;
    color: white;
}

.product-available {
    background-color: green;
    color: white;
}

.product-price {
	font-weight: bold;
}

.product-price-conditions {
	font-size: 11px;
}

.product-unavailable {
    background-color: yellow;
    color: black;
}

/* Tables and GridViews */
.table-header > th {
    background-color: var(--FirstColor);
    color: white;
    vertical-align: middle;
}

    .table-header > th > a {
        color: white;
    }

.table-row > td {
    vertical-align: middle;
    font-size: smaller;
}

.table-footer > td {
    background-color: var(--FirstColor);
    color: white;
    vertical-align: middle;
    height: 60px;
}

    .table-footer > td > a {
        background-color: var(--ThirdColor);
        border: 1px solid white;
        border-radius: 3px;
        color: var(--FirstColor);
        margin-left: 2px;
        padding: 5px 5px 5px 5px;
    }

        .table-footer > td > a:hover {
            background-color: silver;
            color: var(--FirstColor);
            border-color: var(--FirstColor);
            margin-left: 2px;
            padding: 5px 5px 5px 5px;
        }

/* Video responsive */		
.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

    .video-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }