/* User Card for a table row */
.user-card .user-card-meta
{
    font-size:12px;
}
.user-card .user-card-meta > div
{
    padding:2px 0px;
}



/* Contact Card = for specialty contacts etc */
.contact-wrap
{
    display:flex;
    padding:20px 0px;
    border-bottom:1px solid #ccc;
    margin-bottom:20px;

}

.contact-wrap, .contact-wrap p
{
    font-size: 0.75rem ;
}

.contact-wrap .contact-name, .contact-wrap .contact-job-title
{
    font-size: 1rem;
}


.contact-wrap  .imperial-avatar
{
    margin-right:20px;
}

.contact-wrap .contact-name
{
    font-weight:bold;
}

.contact-wrap .contact-meta
{
    margin-bottom:20px;
}



/* Progress Bar */

/* Progress bar */
.progress-bar {
    min-width:150px;
    max-width:250px;
    background:var(--bulma-background);
    padding: 3px;
    border-radius: 15px;
    margin:10px 0px;
    position:relative;
    display:flex;
    align-items: center;

}

.progress-bar-fill {
    display: block;
    height: 22px;
    border-radius: 15px;
    transition: width 500ms ease-in-out;
}

.progress-bar-fill-complete {
    background-color: #4fda4dbf;
}

.progress-bar-fill-incomplete {
    background-color: #ffae40bf;
}

.progress-bar-value {
    position: absolute;
    z-index:30;
    left:10px;
    color:var(--bulma-text);
    font-size:13px;
}


.table .progress-bar {
    margin:0px;
}


table td.td-success
{
    border-left: 2px solid #2b892abf;
}

table td.td-warning
{
    border-left: 2px solid hsla(37, 100%, 50%, 0.749);
}

table td.td-danger
{
    border-left: 2px solid hsla(0, 82%, 48%, 0.749);
}


/* Piece of paper with folder in corner */
.imperial-paper
{
    margin:10px 20px 10px 0px;
    color:#666;
    min-height:270px;
    position: relative; /* required for the corner fold */
    box-shadow: -5px 5px 3px #ccc;
    display:flex;
    flex-direction: column;
    background:var(--bulma-background);
}



/* The inseid contents of the paper */
.imperial-paper-inner
{
    padding:20px 40px;
}



/* Make this col stick to the top on screen scroll */
.side-col-sticky
{
    position: -webkit-sticky; /* Safari & IE */
    position: sticky;
    top: 50px;
}


.icl-card-wrap
{
    position:relative;
    background:var(--bulma-background);
    border-radius:5px;
    padding:0px;
    margin:20px;
    max-width:300px;
    min-width:220px;
    flex:1;
}


.icl-card-wrap .icl-card-image
{
    background-size: cover;
    
    height:200px;
    min-height:200px;
    background-position: center;
}


.icl-card-wrap .icl-card-header
{
    padding:10px;
    font-weight:bold;
    font-size:18px;
    color:var(--bulma-content-heading-color);
    height:80px;
}

.icl-card-wrap .icl-card-footer
{
    padding:10px;

}




/* This adds the shadow and hover effect on mouseover */
.has-shadow-hover
{
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
    transition: 0.2s ease-in-out all; /* The speed of the animation on hover */
    box-shadow: -5px 5px 3px #ccc;
}

.has-shadow-hover:hover
{
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    box-shadow: -10px 10px 8px #ccc;
}


.ticket-unassigned-count
{
    background:var(--bulma-danger);
    color:white;
    padding:2px 5px;
    border-radius:5px;
    font-size:0.9rem;
}