/*
    This file is to show how CSS and other static resources (such as images) can be
    used from a library project/package.
*/

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

.radio-toolbar {
}

    .radio-toolbar input[type="radio"] {
        opacity: 0;
        position: fixed;
        width: 0;
    }

    .radio-toolbar label {
        margin-right: 0px;
        text-align: center;
        width: 120px;
        display: inline-block;
        background-color: #ddd;
        font-family: sans-serif, Arial;
        font-size: 16px;
        border: 2px solid #444;
        border-radius: 4px;
    }

        .radio-toolbar label:hover {
            background-color: #eee;
        }

    .radio-toolbar input[type="radio"]:focus + label {
        border: 2px solid #444;
    }

    .radio-toolbar input[type="radio"]:checked + label {
        background-color: #ff8787;
        border-color: red;
    }

    .radio-toolbar input[type="radio"].target + label {
        background-color: #fff3cd;
        border-color: yellow;
    }

        .radio-toolbar input[type="radio"]:checked + label + .arrow {
            border-left-color: #ff8787;
        }

    .radio-toolbar input[type="radio"].target + label + .arrow {
        border-left-color: #fff3cd;
    }

    .radio-toolbar label:hover + .arrow {
        border-left-color: #eee;
    }

.StatusBox {
    font-size: 8px !important;
    width: 55px !important;
    height: 22px !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column;
    border-radius: 0 !important;
    margin-right: 1px;
    
}

.arrow {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 7px solid #ddd;
}

.transaktionLink:hover{
    cursor:pointer;
}