@charset "UTF-8";
@font-face {
    font-family: "boschsans";
    src: url('../../fonts/BoschSans-Light.ttf');
}


@font-face {
    font-family: "BoschSansBold";
    src: url('../../fonts/BoschSans-Bold.ttf');
}
@font-face {
    font-family: "BoschSansBoldItalic";
    src: url('../../fonts/BoschSans-BoldItalic.ttf');
    font-style: italic;
}

@font-face {
    font-family: "BoschSansBlack";
    src: url('../../fonts/BoschSans-Black.ttf');
}
@font-face {
    font-family: "BoschSansBlackItalic";
    src: url('../../fonts/BoschSans-BlackItalic.ttf');
    font-style: italic;
}

@font-face {
    font-family: "boschsansLight";
    src: url('../../fonts/BoschSans-Light.ttf');
}
@font-face {
    font-family: "boschsansLightItalic";
    src: url('../../fonts/BoschSans-LightItalic.ttf');
    font-style: italic;
}

@font-face {
    font-family: "boschsansMedium";
    src: url('../../fonts/BoschSans-Medium.ttf');
}
@font-face {
    font-family: "boschsansMediumItalic";
    src: url('../../fonts/BoschSans-MediumItalic.ttf');
    font-style: italic;
}

@font-face {
    font-family: "boschsansRegular";
    src: url('../../fonts/BoschSans-Regular.ttf');
}
@font-face {
    font-family: "boschsansRegularItalic";
    src: url('../../fonts/BoschSans-RegularItalic.ttf');
    font-style: italic;
}

.boschSansBold {
    font-family: BoschSansBold, serif !important;
}
.boschSansRegular {
    font-family: BoschSansRegular, serif !important;
}
.boschSansMedium {
    font-family: BoschSansMedium, serif !important;
}
.boschSansLight {
    font-family: BoschSansLight, serif !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body * {
    font-family: boschSansRegular, sans-serif;
}

h1,h2,h3,h4,h5,h6 {
    font-family: boschSansBold, serif;
}

h1 span,h2 span,h3 span,h4 span,h5 span,h6 span {
    font-family: boschSansBold, serif;
}


.supergraphipc-header {
    background-image: url("../../images/bosch-supergraphic-strip.svg");
    background-size: cover;
}

.logo_200 {
    width: 300px;
    max-height: 80px;
    height: auto;
    object-fit: cover;
}

/* Side Bar */
#side-bar {
    width: 300px;

    background-color: #2e3033;
    color: white;
}

#side-bar a {
    font-size: 1.05rem;
    padding: 1.1rem 1rem !important;
    text-decoration: none;
    color: white;
    white-space: nowrap;
}

.sidebar-item {
    position: relative;
    overflow-x: hidden;

    /*margin-top: 5px;*/
    width: 100%;


    /*background-color: var(--sidebar-items-background-color);*/
    color: white;
    transition: all 0.2s;
}

.sidebar-item:hover {
    /* transform: scale(101%);*/
    text-decoration: none;
    color: white;
    background-color: #008ecf;
}

.sidebar-categories-list {
    color: var(--font-base-color);
    list-style: none;
    transition: all 0.2s;
}

.sidebar-category-link {
    background-color: var(--sidebar-items-background-color);
    color: var(--font-base-color) !important;
    transition: all 0.2s;
}

.sidebar-category-link:hover {
    background-color: #008ecf;
    color: white !important;
}

.sidebar-item:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    content: '';
    width: 4px;
    height: 100%;

    /* background-image: url('../../images/bosch-supergraphic-strip-vertical.svg');*/
    background-size: cover;
}

@media (max-width: 992px) {
    #side-bar {
        display: none;
    }
}
/* Top Bar */
#top-bar {
    height: 80px;

    color: var(--font-base-color);
    background-color: var(--top-bar-background-color);
}

#top-bar .nav-link {
    color: var(--font-base-color);
}

#top-bar a > i {
    font-size: 2rem;
    color: var(--font-base-color);
}

/* Bottom Bar */
#bottom-bar {
    background-color: var(--side-bar-background-color);
}

#bottom-bar li, #bottom-bar a {
    color: var(--font-base-color);
}

/** Bosch Buttons **/
button:not(.select2-selection__choice__remove), .bosch-btn {
    text-decoration: none;

    padding: 0.25em 0.75em;
    min-width: 10ch;
    height: 44px;

    border: none;
    transition: background-color 0.2s;

    border-radius: 2px !important;
}
.bosch-btn-outline {
    text-decoration: none;

    padding: 0.25em 0.75em;
    min-width: 10ch;
    height: 44px;

    transition: background-color 0.2s;

    border-radius: 2px !important;
}

a.bosch-btn {
    line-height: 40px;
}

a.bosch-btn:hover {
    color: white;
}

button.icon-button {
    border-radius: 1px;
    padding: 0;

    width: 35px;
    min-width: 35px;
    height: 35px;

    font-size: .75em;
}

a.icon-anchor {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    border-radius: 1px;
    padding: 0;

    width: 35px;
    height: 35px;

    color: white;
}

a.icon-anchor:hover {
    color: white;
}

button:hover, .bosch-btn:hover {
    cursor: pointer;
}

button > img, .bosch-btn > img {
    height: 30px;
    width: auto;
}

.blue-bosch-btn {
    color: white;
    background-color: #007bc0;
}

.blue-bosch-btn:hover {
    background-color: #0096e8;
}

.blue-bosch-outline-btn {
    background-color: white;
    color: #007bc0;
    border: 1px solid #007bc0;
}

.blue-bosch-outline-btn:hover {
    background-color: #0096e8;
    color: white;
}

.green-bosch-btn {
    color: white;
    background-color: #00884a;
}

.green-bosch-btn:hover {
    background-color: #37a264;
}

.yellow-bosch-btn {
    color: black;
    background-color: #ffcf00;
}

.yellow-bosch-btn:hover {
    background-color: #ffd46f;
}

.gray-bosch-btn {
    color: white;
    background-color: #71767c;
}

.gray-bosch-btn:hover {
    background-color: #8a9097;
}

.red-bosch-btn {
    color: white;
    background-color: #ed0007;
}

.red-bosch-btn:hover {
    background-color: #ff5152;
}


/* for text style*/
.text-yellow {
    color: rgba(252, 175, 23, 1);
}

.text-fuchsia {
    color: #B90276;
}

.text-violet {
    color: rgba(80, 35, 127, 1);
}

.text-red-1 {
    color: rgba(169, 0, 16, 1);
}

.text-light-blue-1 {
    color: rgba(0, 142, 207, 1);
}

a {
    color: rgba(0, 86, 145, 1);
}

a:hover {
    color: rgba(0, 142, 207, 1);
    text-decoration: none;
}

/*select*/
/* Basic reset and box model */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styling for the select element */
select {
    width: 100%; /* Full width */
    padding: 0.375rem 0.75rem; /* Padding to make it look nice */
    font-size: 1rem; /* Text size */
    line-height: 1.5; /* Adjust line height for spacing */
    color: #495057; /* Dark gray text color */
    background-color: #fff; /* White background */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 0; /* Sharp corners */
    outline: none; /* Remove focus outline */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for focus/hover */
}

/* Add focus effect */
select:focus {
    border-color: #0056b3; /* Blue border color on focus */
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.25); /* Subtle shadow effect */
}

/* Styling for the select options (dropdown) */
select option {
    padding: 0.375rem 0.75rem; /* Padding inside options */
    font-size: 1rem; /* Option text size */
    background-color: #fff; /* White background */
    color: #495057; /* Option text color */
    border: none; /* Remove border from options */
}

/* Hover effect for options */
select option:hover {
    background-color: #f1f1f1; /* Light gray background on hover */
}

/* Optional: Styling for disabled state */
select:disabled {
    background-color: #e9ecef; /* Light gray background */
    color: #6c757d; /* Gray text */
    border-color: #ced4da; /* Gray border */
    cursor: not-allowed; /* Disable cursor */
}

/* Optional: Custom styling for the arrow icon */
select::-ms-expand {
    display: none; /* Remove default arrow in IE */
}

/* Text Input */
input:not[type="radio"], textarea {
    font-family: inherit;
    padding: 0.25em 0.5em;
    background-color: #fff;
    border: 1px solid #c7c7c7;
    border-radius: 2px !important;
}

.form-control, .form-select {
    border-radius: 2px !important;
}

.green-border form-controll {
    border-color: #00884a;
}


.card {
    border-radius: 2px;
}

/* Products cards */

/* Other */
.select2-container {
    z-index: 9999;
}

span {
    border-radius: 2px !important;
}

label {
    border-radius: 2px !important;
}

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fade-in.show {
    opacity: 1;
}

.fade-out {
    opacity: 0;
    transition: opacity 1s ease-out;
}

/* Select2 */
.modal {
    z-index: 100 !important;
}

.modal-backdrop {
    z-index: 10 !important;
}

.select2-container {
    z-index: 110;

    border: 1px solid #ccc;
}

.img-fluid-top {
    object-fit: contain;  /* Ensures the image scales without distortion */
    object-position: top; /* Ensures the top of the image is always visible */
}

.carousel-caption {
    position: absolute;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    color: #fff;
    text-align: center;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0 !important;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 15%;
    margin-bottom: .0rem;
    margin-left: 15%;
}