html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.custom-check {
     font-size: 24px;
     color: #28a745;
}

.custom-x {
     font-size: 24px;
     color: #dc3545;
}

.dot-green {
            height: 15px;
            width: 15px;
            background-color: green;
            border-radius: 50%;
            display: inline-block;
        }
.dot-red {
            height: 15px;
            width: 15px;
            background-color: red;
            border-radius: 50%;
            display: inline-block;
        }
.marker {
    /* Set the marker size here */
    width: 1rem;
    height: 1rem;
    border-radius: 2rem;
    /* Set the marker color here */
    background: #aa3300;
    top: -0.5rem;

    display: inline-block;
    border-bottom-right-radius: 0;
    position: relative;
    transform: rotate(45deg);

    /* optional fanciness */
    border: 1px solid #881100;
}

.draggable-item {
    cursor: move;
}

/* inner circle (optional if you don't need the central dot) */
.marker::before {
    content: "";
    background: white;
    width: 50%;
    height: 50%;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* optional fanciness */
    box-shadow: 0.1rem 0.1rem 0.2rem 0.1rem rgba(0, 0, 0, 0.1);
}
/* shadow (optional if you don't need a shadow) */
.marker::after {
    content: "";
    background: rgba(128, 128, 128, 0.2);
    width: 75%;
    height: 75%;
    border-radius: 100%;
    position: absolute;
    top: 100%;
    left: 100%;
    transform: translate(-50%, -50%) rotate(45deg) scaleX(0.5);
}

.content {
    overflow-y: auto;
}

        /* Dodaj styl dla znaczników języka */
        .language {
            color: white;
            text-decoration: none;
            margin-left: 10px;
        }
        /* Styl dla aktywnego znacznika języka */
        .l_active {
            font-weight: bold;
        }
        /* Dodaj styl dla kontenera z przyciskami języka */
        .lan {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        
.notification-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.notification-icon .badge {
    position: absolute;
    top: -10px;
    right: -10px;
    border-radius: 50%;
    background-color: red;
    color: white;
}

.notification-icon .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    top: 30px;
    display: none;
    width: 300px;
    max-height: 400px;
    overflow-y: auto;
}

.notification-icon .dropdown-menu.show {
    display: block;
}      

.user-info {
    position: relative;
    display: inline-block;
}

.user-info:hover .logout-button {
    display: inline-block;
}

.logout-button {
    margin-left: 10px;
}

.notification-panel {
	position: fixed;
    top: 0;
    right: -300px; 
    width: 300px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    z-index: 1000;
}

.notification-panel.active {
    right: 0;
}

.notification-header {
    padding: 10px;
    background: #007bff;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-content {
    padding: 10px;
    overflow-y: auto;
    height: calc(100% - 50px);
}

.tracking-detail {
 padding:3rem 0
}
#tracking {
 margin-bottom:1rem
}
[class*=tracking-status-] p {
 margin:0;
 font-size:1.1rem;
 color:#fff;
 text-transform:uppercase;
 text-align:center
}
[class*=tracking-status-] {
 padding:1.6rem 0
}
.tracking-status-intransit {
 background-color:#65aee0
}
.tracking-status-outfordelivery {
 background-color:#f5a551
}
.tracking-status-deliveryoffice {
 background-color:#f7dc6f
}
.tracking-status-delivered {
 background-color:#4cbb87
}
.tracking-status-attemptfail {
 background-color:#b789c7
}
.tracking-status-error,.tracking-status-exception {
 background-color:#d26759
}
.tracking-status-expired {
 background-color:#616e7d
}
.tracking-status-pending {
 background-color:#ccc
}
.tracking-status-inforeceived {
 background-color:#214977
}
.tracking-list {
 border:1px solid #e5e5e5
}
.tracking-item {
 border-left:1px solid #e5e5e5;
 position:relative;
 padding:2rem 1.5rem .5rem 2.5rem;
 font-size:.9rem;
 margin-left:3rem;
 min-height:5rem
}
.tracking-item:last-child {
 padding-bottom:4rem
}
.tracking-item .tracking-date {
 margin-bottom:.5rem
}
.tracking-item .tracking-date span {
 color:#888;
 font-size:85%;
 padding-left:.4rem
}
.tracking-item .tracking-content {
 padding:.5rem .8rem;
 background-color:#f4f4f4;
 border-radius:.5rem
}
.tracking-item .tracking-content span {
 display:block;
 color:#888;
 font-size:85%
}
.tracking-item .tracking-icon {
 line-height:2.6rem;
 position:absolute;
 left:-1.3rem;
 width:2.6rem;
 height:2.6rem;
 text-align:center;
 border-radius:50%;
 font-size:1.1rem;
 background-color:#fff;
 color:#fff
}
.tracking-item .tracking-icon.status-sponsored {
 background-color:#f68
}
.tracking-item .tracking-icon.status-delivered {
 background-color:#4cbb87
}
.tracking-item .tracking-icon.status-outfordelivery {
 background-color:#f5a551
}
.tracking-item .tracking-icon.status-deliveryoffice {
 background-color:#f7dc6f
}
.tracking-item .tracking-icon.status-attemptfail {
 background-color:#b789c7
}
.tracking-item .tracking-icon.status-exception {
 background-color:#d26759
}
.tracking-item .tracking-icon.status-inforeceived {
 background-color:#214977
}
.tracking-item .tracking-icon.status-intransit {
 color:#e5e5e5;
 border:1px solid #e5e5e5;
 font-size:.6rem
}
@media(min-width:992px) {
 .tracking-item {
  margin-left:10rem
 }
 .tracking-item .tracking-date {
  position:absolute;
  left:-10rem;
  width:7.5rem;
  text-align:right
 }
 .tracking-item .tracking-date span {
  display:block
 }
 .tracking-item .tracking-content {
  padding:0;
  background-color:transparent
 }
}