body{
    overflow-x: hidden;
}

.btn-fallsafe {
    color: black;
    background-color: #dedede;
    border-color: #dedede;
    font-family: "eurostilebold_extended_2";
}

.btn-fallsafe:hover {
    color: black;
    background-color: #c2c2c2;
    border-color: #c2c2c2;
}

.btn-check:focus + .btn-fallsafe,
.btn-fallsafe:focus {
    color: black;
    background-color: #c2c2c2;
    border-color: #c2c2c2;
    box-shadow: 0 0 0 0.25rem rgb(#c2c2c2 / 50%);
}

.btn-fallsafe-orange {
    color: white;
    background-color: #ee744b;
    border-color: #ee744b;
}

.btn-fallsafe-orange:hover {
    color: white;
    background-color: #ca6341;
    border-color: #ca6341;
}

.btn-check:focus + .btn-fallsafe-orange,
.btn-fallsafe-orange:focus {
    color: white;
    background-color: #ca6341;
    border-color: #ca6341;
    box-shadow: 0 0 0 0.25rem rgb(#ca6341 / 50%);
}

.search-bar-container {
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.search-bar-container > div {
    width: 0;
    opacity: 0;
    transition: all 0.5s;
    pointer-events: none;
    display: flex;
}

.search-bar-container > div > form {
    display: flex;
}

.search-bar-container > div > form > input:focus-visible {
    outline: none;
}

.search-bar-container.active > div {
    width: auto;
    opacity: 1;
    pointer-events: all;
    display: flex;
}

.search-bar-container > i::after {
    font-family: "Font Awesome 6 Free";
    content: "\f002";
    cursor: pointer;
    padding-right: 0.5rem;
    font-weight: bolder;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.dropdown-menu {
    padding: 0;
}

.search-bar-container.active > i::after {
    content: "\f00d";
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

.dropdown-item.active,
.dropdown-item:active {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

.dropdown-item {
    transition: all 0.5s;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: inherit;
    background-color: transparent;
    padding-left: 35px !important;
}

.cursor-pointer {
    cursor: pointer;
}

.dropdown-item:focus:before,
.dropdown-item:hover:before {
    width: 20px;
}


.dropdown-item:before {
    content: "___";
    transition: all 0.5s;
    position: absolute;
    display: block;
    overflow: hidden;
    width: 0px;
    left: 15px;
}

.no-effect.dropdown-item:before{
    content: '';
}

.dropdown-menu:has(.no-effect){
    min-width: fit-content;
}

.custom-collapse {
    border: 3px solid #c8c9ca;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 15px;
}

.custom-collapse > .header {
    width: 100%;
    font-size: 1.5em;
    cursor: pointer;
}

.custom-collapse > .content {
    overflow: hidden;
    transition: max-height 1s;
    max-height: 0;
}

.custom-collapse.active > .content {
    max-height: 400px;
}

.custom-collapse > .header:after {
    content: "\f0d7";
    color: #dedede;
    float: right;
    font-family: "Font Awesome 6 Free";
    cursor: pointer;
    padding-right: 0.5rem;
    font-weight: bolder;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.custom-collapse.active > .header:after {
    content: "\f0d8";
}

.page-item.disabled .page-link {
    color: #000000;
    background-color: #e2e2e2;
    border-color: transparent;
}

.page-item.active .page-link {
    z-index: 3;
    color: #000000;
    background-color: #c3c3c3;
    border-color: transparent;
}

.page-link, .rows-per-page-select {
    color: #000000;
    background-color: #e2e2e2;
    border: 1px solid transparent;
}

.rows-per-page-select{
    border-radius: 0.25rem;
    padding: 0.375rem 0.2rem;
    padding-bottom: 10px;
}


.page-link:focus {
    box-shadow: 0 0 0 0.25rem #00000021;
}

.category-page-categories-list>.dropdown-item{
    padding: 0;
}

.form-check-input{
    background-color: #e2e2e2;
    border: 1px solid black;
    border-radius: 2px;
}

.form-check-input{
    background-color: #e2e2e2;
    border: 1px solid black;
    border-radius: 2px;
}

.form-check-input:focus {
    border-color: #a9a9a9;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(180 180 180 / 25%);
}

.form-check-input:checked {
    background-color: #e2e2e2;
    border-color: #e2e2e2;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")!important;
}


.carousel-indicators [data-bs-target] {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background-color: #7a7a7a;
}

.carousel-indicators {
    bottom: -50px;
}

.nav-pills{
    border-bottom: 5px solid #dddddd;
}

.nav-pills .nav-link {
    background-color: #f1f1f1;
    margin: 0 5px 0 0;
    border-radius: 0.25rem 0.25rem 0 0;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #000;
    font-weight: bold;
    background-color: #dddddd;
}

.product-name{
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;
}

.product-sub-desc{
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;
}

.object-fit-contain{
    object-fit: contain;
}

.navbar-toggler{
    border: none;
    margin-left: auto;
}

.navbar-toggler>span{
    background-image: unset!important;
    border: none;
}

.navbar-toggler>span::before{
    font-family: "Font Awesome 6 Free";
    content: "\f0c9";
    cursor: pointer;
    font-weight: bolder;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 1.5em;
    color: #ee744b;
}

.navbar-collapse>div,.navbar-collapse>div>a{
    padding-left: 0;
}

.solution>p{
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s;
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    width: 100px;
    text-align: center;
}

.solution:hover>p{
    opacity: 1;
}

@media (max-width: 767.98px) { 
    .solution>p{
        opacity: 1;
        position: inherit;
    }
 }