* {
    scroll-behavior: smooth;
}

.z-index-9 {
    z-index: 9;
}

.z-index-10 {
    z-index: 10;
}

.v-hr {
    border-right: 1px solid #eeeeef;
}

.bg-notifications {
    background-color: #207964;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 250,
        'GRAD' 0,
        'opsz' 24;
    font-size: 34px!important;
}

.header {
    width: 100%;
    min-height: 75vh;
    background-image: url('../img/front-header.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.header::before {
    content: "";
    position: absolute;
    width: 100%;
    min-height: 75vh;
    background-image: url('../img/front-header.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 1;
}

.auth-header {
    width: 100%;
    min-height: 100vh;
    background-image: url('../img/front-header.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.auth-header {
    content: "";
    position: absolute;
    width: 100%;
    min-height: 75vh;
    background-image: url('../img/front-header.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 1;
}

.cover-mask {
    position: absolute;
    width: 100%;
    min-height: 75vh;
    background-color: #126744b8;
    z-index: 2;
}

.header h1, 
.header h2, 
.header h3, 
.header h4, 
.header h5, 
.header h6 {
    color: #FFF;
    position: relative;
    z-index: 3;
}

.active-auction-links {
    color: inherit;
}

.active-auction-links:hover {
    color: green!important;
}

.max-width-nav {
    max-width: 1300px;
}

.row {
    max-width: 1440px;
    margin: 0 auto;
}

.footer-row-width {
    max-width: 100%;
}

.modal-content {
    border: none!important;
    background-color: #FFF!important;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
}

.modal-header {
    border-bottom: none!important;
}

.modal-footer {
    border-top: none!important;
}

.modal-backdrop {
    background-color: #00000045!important;
}

.fade {
    transition: opacity .15s linear!important;
}

.card-bg {
    background-image: url('../img/front-header.jpg');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.card-bg::before {
    content: '';
    background-image: url('../img/front-header.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 1;
}

.card-mask {
    width: 100%;
    height: 100%;
    background-color: #3d903ee2;
    z-index: 2;
}

.dropdown-item:hover {
    color: #FFF!important;
    background-color: #5ab25e;
    border-radius: 0;
}

.dropdown-divider {
    border-color: #90909025;
}

.form-control, .form-select {
    border: 1px solid rgb(206, 206, 206);
    padding: 5px;
    padding-left: 10px;
}

.form-control:active {
    border: 1px solid rgb(102, 175, 66);
}

.form-control:focus {
    border: 1px solid rgb(102, 175, 66);
}

.form-select:active {
    border: 1px solid rgb(102, 175, 66);
}

.form-select:focus {
    border: 1px solid rgb(102, 175, 66);
}

.error {
    color: #ff0000;
}







.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  
    @media (max-width: 768px) {
      font-size: 12px;
    }
  }
  
  .stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #e5e5e5;
    width: 100%;
    top: 25px;
    left: -50%;
    z-index: 2;
  }
  
  .stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #e5e5e5;
    width: 100%;
    top: 25px;
    left: 50%;
    z-index: 2;
  }
  
  .stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e5e5e5;
    margin-bottom: 6px;
    color: rgb(163, 163, 163);
  }

    .material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24
    }

  .stepper-item.active .step-counter {
    width: 55px;
    height: 55px;
    margin-top: -2.5px;
    border: 2px solid #4bb543;
    background-color: #f3f3f3;
    color: #4bb543;
    box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)!important
  }
  
  .stepper-item.active {
    font-weight: bold;
    color: #4bb543;
  }

  .stepper-item.completed .step-counter {
    background-color: #4bb543;
    color: white;
  }
  
  .stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #4bb543;
    width: 100%;
    top: 25px;
    left: 50%;
    z-index: 3;
  }
  
  .stepper-item:first-child::before {
    content: none;
  }
  .stepper-item:last-child::after {
    content: none;
  }




 /* Style the drop zone */
 .drop-zone {
    border: 2px dashed #4bb543;
    background-color: #fafafa;
    color: #454545;
    padding: 20px;
    min-height: 100px;
    cursor: pointer;
    border-radius: 0.75rem;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transition: 0.15s all ease-in-out;
}

.attention-icon {
    font-size: 22px!important;
    margin-right: 3px;
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
}

.selected-file, .file-selected {
    margin: 0;
}

.drop-zone:hover {
    background-color: #4bb543;
    color: white;
}

/* Style the hidden file input */
.custom-file-input {
    display: none;
}

/* Style the plus sign */
.plus-sign {
    font-size: 24px;
    cursor: pointer;
}

/* Style for selected file text */
.file-selected {
    color: #4bb543;
    font-weight: bold;
    transition: 0.15s all ease-in-out;
}

.drop-zone:hover .file-selected {
    color: white;
}

.file-selected:hover {
    color: white;
}

/* Style for drag over effect */
.drag-over {
    background-color: #4bba4318;
}

.dropdown-notifications {
    width: 350px!important;
    max-height: 500px!important;
    overflow-y: auto;
    /* word-wrap:break-word; */
    white-space: normal;
}

.notification-item:hover {
    background-color: transparent!important;
    color: inherit!important;
}

.notification-bubble {
    position: relative;
    display: inline-block;
}

.notification-count {
    position: absolute;
    margin-top: -15px;
    margin-left: 23px;
    font-weight: bold;
    background-color: red;
    border-radius: 50%;
    width: 7px;
    height: 7px;
}

.bid-input {
    text-align: center;
}

.input-group-btn {
    /* width: 1%; */
    white-space: nowrap;
}

@media (max-width: 767px) {
    .v-hr {
        border: none;
    }

    .navbar {
        border-radius: 0;
    }

    .container-fluid {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        padding: 0;
    }

    .mobile-content-card {
        width: 100vw;
        margin: 0;
        padding: 0;
    }

    .bid-input {
        width: 100px;
    }

    .navbar-toggler {
        outline: none!important;
        box-shadow: none!important;
        border: 0!important;
    }

    .mobile-hide {
        display: none;
    }

    .mobile-show {
        display: inline;
    }
}