.button-set{
    width: 100%;
    margin: 10px 0;
}

button{
    padding: 6px 8px;
    border: 1px solid transparent;
    min-width: 25px;
}

button:hover{
    background: whitesmoke;
    cursor: pointer;
}

button:focus{
    outline: none;
}

button:active{
    background: gainsboro;
}

button:disabled{
    pointer-events: none;
    opacity: 0.5;
}

label{
    font-size: 12px;
    font-weight: 200;
    letter-spacing: 1px;
}

input,select,textarea:not(.no-control){
    font-size: 16px;
    padding: 2px 5px;
    font-weight: 300;
    background: var(--pale-color);
    border-radius: 2px;
    border: 1px solid whitesmoke;
}

select{
    -webkit-appearance: unset;
    padding: 2px 0;
}

input:focus,
select:focus,
textarea:not(.no-control):focus{
    border: 1px solid dimgray;
    outline:none;
}

.breadcrumb {

}

.breadcrumb span{
    position:relative;

    font-size: 14px;
}

.breadcrumb span:not(:last-child){
    color: var(--primary-color);
}

.breadcrumb span:not(:last-child)::after{
    content: '/';
    padding-right: 3px;
    padding-left: 6px;
    color: grey;
}

.breadcrumb span:not(:last-child):hover{
    cursor:pointer;
    opacity: 0.6;
}

.dotted-underline{
    border-bottom: 1px dashed;
    margin-bottom: -1px;
}

[data-tooltip]{
    position: relative;
    display: inline-flex;
    justify-content: center;
}

[data-tooltip]::after{
    content: attr(data-tooltip);
    text-align: center;
    position: absolute;
    top: 100%;
    width: max-content;
    background: #616161;
    padding: 2px 8px;
    font-weight: 100;
    color: white;
    z-index:100;
    border-radius: 2px;
    transform-origin:center;
    box-shadow: 0 15px 50px -10px black;
    transition: all .4s;
    transform: translateY(0);
    pointer-events: none;
    opacity:0;
}

[data-tooltip]::before{
    content: '';
    width: 0;
    height: 0;
    position:absolute;
    bottom: 0;
    transform-origin:center;
    border: 5px solid transparent;
    border-bottom: 5px solid #616161;
    transition: all .4s;
    transform: translateY(0);
    pointer-events: none;
    opacity:0;
}


[data-tooltip]:hover::after{
    opacity:1;
    transform: translateY(2px);
}

[data-tooltip]:hover::before{
    opacity:1;
    transform: translateY(3px);
}

.padding-progress{
    padding: 5px;
}

.gauge{
    flex: 1;
    position: relative;
    height: 10px;
    background: gainsboro;
    display: flex;
}

.gauge .bar{
    position: relative;
    height: 10px;
    background: #FFC107;
    vertical-align: middle;
    display: inline-block;
}

.gauge .ball{
    margin-left: -5px;
    width: 10px;
    height: 10px;
    position: relative;
    vertical-align: middle;
    display: inline-flex;
    border-radius: 50%;
    background: #ec1461;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all .4s;
}

.gauge .ball:hover{
    color: white;
    width: 50px;
    height: 20px;
    margin-top: -5px;
    border-radius: 2px;
    margin-left: -25px;
    cursor: pointer;
}

.card-set .card {
    background: white;
    border-radius: 4px;
    margin: 15px;
    box-shadow: 0 5px 50px -20px;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    align-items:center;
}

.card-set .card h2{
    font-size: 20px;
    margin:0;
    background: rgba(255, 193, 7, 0.42);
    padding: 5px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 50px;
    width: 45px;
    height: 45px;
}

.card-set .card h2 i{
    color: #FF9800;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    position: relative;
    height: 100%;
}

.card-set .card h1{
    margin: 5px 0;
    font-size: 50px
}

.card-set .card span{
    color: grey;
    font-size:12px;
}

.filepond--panel-root {
    border-radius: 2px !important;
}

.filepond--drop-label label{
    letter-spacing:0;
}