:root {
    --xboxgreen:#107C10;
    --xboxonegreen:#0e7a0d;
    --slategray:#3A3A3A;
}
.circle {
    border: 5px solid;
    background-color: var(--secondary);
    height: 135px;
    border-radius:50%;
    width: 135px;
}

.icon-background-success {
    color: var(--success);
}

.icon-background-warning {
    color: var(--warning);
}

.icon-background-danger {
    color: var(--danger);
}

/**
** History Elements
** Based on https://bootsnipp.com/snippets/AlGPV
** Other idea https://bootsnipp.com/snippets/O5D4q
**/
.history-detail {
    padding:3rem 0
}
#history {
    margin-bottom:1rem
}
[class*=history-status-] p {
    margin:0;
    font-size:1.1rem;
    color:#fff;
    text-transform:uppercase;
    text-align:center
}
[class*=history-status-] {
    padding:1.6rem 0
}
.history-status-intransit {
    background-color:var(--xboxgreen);
}
.history-status-outfordelivery {
    background-color:#f5a551
}
.history-status-deliveryoffice {
    background-color:#f7dc6f
}
.history-status-delivered {
    background-color:#4cbb87
}
.history-status-attemptfail {
    background-color:#b789c7
}
.history-status-error,.history-status-exception {
    background-color:#d26759
}
.history-status-expired {
    background-color:#616e7d
}
.history-status-pending {
    background-color:#ccc
}
.history-status-inforeceived {
    background-color:#214977
}
.history-list {
    border:1px solid #e5e5e5
}
.history-item {
    border-left:1px solid #e5e5e5;
    position:relative;
    padding:2rem 1.5rem .5rem 2.5rem;
    font-size:.9rem;
    margin-left:3rem;
    min-height:5rem
}
.history-item:last-child {
    padding-bottom:4rem
}
.history-item .history-date {
    margin-bottom:.5rem
}
.history-item .history-date span {
    color:#888;
    font-size:85%;
    padding-left:.4rem
}
.history-item .history-content {
    padding:.5rem .8rem;
    background-color:#f4f4f4;
    border-radius:.5rem
}
.history-item .history-content span {
    display:block;
    color:#888;
    font-size:85%
}
.history-item .history-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
}

.history-item .history-icon.status-success {
    background-color: var(--success);
}

.history-item .history-icon.status-danger {
    background-color: var(--danger);
}

.history-item .history-icon.status-warning {
    background-color: var(--warning);
}

@media(min-width:992px) {
    .history-item {
        margin-left:10rem
    }
    .history-item .history-date {
        position:absolute;
        left:-10rem;
        width:7.5rem;
        text-align:right
    }
    .history-item .history-date span {
        display:block
    }
    .history-item .history-content {
        padding:0;
        background-color:transparent
    }
}

/** F.A.Q. **/
div[data-toggle="collapse"]{
    border-bottom:1px solid #BBDEFB;
    width:100%;
    cursor:pointer;
    padding:1%;
}
.collapse{
    background:#F5F5F5;
}