:root
{
    --bluecolor: #00ADB5;
    --bluecolor2: #007A82;
    --umcolor: #00ADB5;
    --white: #FFFFFF;
    --black: #1a1a1a;
    --shadow: 0 0 15px #ddd;
}
#maincontainer .listing-app
{
    margin: 15px 0 !important;
}
.listing-app
{
    padding: 15px;
    position: relative;
    border-radius: 15px;
    border: 1px solid var(--bluecolor);
    background-color: var(--white);
    box-shadow: var(--shadow);
}
div.listing-app.waiting
{
    border-color: #DF826C;
}
div.listing-app.confirmed-unobligatory
{
    border-color: #FFDD83;
}
div.listing-app.done
{
    border-color: #ADE792;
}
div.listing-app.cancelled
{
    border-color: #999;
}
span.app-status
{
    font-weight: 600;
    position: absolute;
    display: block;
    top: 0px;
    right: 0px;
    padding: 3px 10px;
    font-size: 13px;
    text-transform: uppercase;
    border: 1px solid var(--bluecolor);
    background: var(--bluecolor);
    color: var(--white);
    border-radius: 0 14px 0 14px;
}
span.app-status.waiting, span.single-app.waiting
{
    border-color: #DF826C;
    background: #DF826C;
}
span.app-status.confirmed-unobligatory, span.single-app.confirmed-unobligatory
{
    border-color: #FFDD83;
    background: #FFDD83;
}
span.app-status.done, span.single-app.done
{
    border-color: #ADE792;
    background: #ADE792;
}
span.app-status.cancelled, span.single-app.cancelled
{
    border-color: #999;
    background: #999;
}
button.app-status
{
    font-weight: 600;
    padding: 3px 10px;
    font-size: 14px;
    margin: 5px 5px;
    text-transform: uppercase;
}
button.app-status.waiting
{
    border-color: #DF826C;
    background: #DF826C;
}
button.app-status.confirmed-unobligatory
{
    border-color: #FFDD83;
    background: #FFDD83;
}
button.app-status.done
{
    border-color: #ADE792;
    background: #ADE792;
}
button.app-status.cancelled
{
    border-color: #999;
    background: #999;
}
.more-details
{
    position: absolute;
    bottom: -1px;
    right: -1px;
    border: 1px solid var(--bluecolor);
    border-radius: 15px 0 14px 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px;
}
.app-title-listing
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.app-title-listing h2
{
    line-height: 1 !important;
    font-size: 22px;
}
.app-reference
{
    font-weight: 600;
    text-transform: uppercase;
}
.app-rh
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.visit-date
{
    font-weight: 600;
}

@media (max-width: 768px) {
    .app-content-listing
    {
    display: inherit !important;
    padding: 20px 0 !important;
    }
    
}