﻿/*apply button-sm when screensize xs*/
@media screen and (max-width: 575.98px) {
    .btn-sm-on-xs {
        padding: .25rem .5rem;
        font-size: .875rem;
        line-height: 1.5;
        border-radius: .2rem;
    }
}

.nowrap {
    white-space: nowrap;
}

.color-black {
    color: #000;
}
.color-white {
    color: #fff;
}
.display-none{ display: none;}
.twitter-color {
    color: #1DA1F2;
}

.width-250 {
    width: 250px;
}

.facebook-color {
    color: #4267B2;
}

.expansion-panel-100w {
    flex-basis: 100% !important;
}

.fas.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

.fb-btn {
    background-color: #3B5998;
    color: white;
}

.caption-color { color: #6c757d; }

.tooltip-border-white {
    border-bottom: 1px dotted white;
    cursor: pointer;
}
.twitter-btn {
    background-color: #55ACEE;
    color: white;
}

.google-btn {
    background-color: #dd4b39;
    color: white;
}

.red { color: red;}
.cursor {
    cursor: pointer;
}

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}

.row.display-flex > [class*='col-'] {
    flex-grow: 1;
}

.mdc-text-field--textarea .mdc-text-field__input {
    line-height: 20px !important;
    background-color: #f5f5f5 !important;
}


/* MatBlazor Select (MatSelect) zu klein. Hack: */
.mdc-select__anchor{ min-width: 220px;}
@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.fa-left {
    margin-right: 7px;
}

.pb-7 {
    padding-bottom: 7rem !important
}

m-l-r-0 {
    margin-left: 0;
    margin-right: 0;
}

.padding-lr-0 {
    padding-left: 0;
    padding-right: 0;
}

.text-black {
    color: rgba(0,0,0,0) !important
}

.blazored-modal-header {
    padding: 0 0 0.5rem 0;
}

.nav-link:hover{ border-color: white;}

.logout-btn {
    border-color: transparent;
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

    .logout-btn:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }