/*body, .wrapper {
    background: #b92b27;*/  /*fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #1565C0, #b92b27); 
    background: linear-gradient(to right, #1565C0, #b92b27);  
}*/

.default-harmony {
    background: #b92b27;  
    background: -webkit-linear-gradient(to right, #000, #0068ff);  
    background: linear-gradient(to right, #000, #0068ff) ;
    
}

.dark-transparent {
    background-color: rgb(55 55 64);
}

.default-transparent {
    background-color: rgba(0, 0, 0, 0);
    color: #4a4a4a;
}

    .default-transparent > .mud-layout > .mud-appbar{
        color: #4a4a4a;
    }

.mud-harmony {
    background: #b92b27; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #000, #0068ff); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #000, #0068ff) ;
}

    .mud-harmony .mud-table-cell {
        color: white !important;
    }

.loader {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circular {
    animation: rotate 2s linear infinite;
    height: 100px;
    position: relative;
    width: 100px;
}

.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke: #b6463a;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

.close-edit-card {
    width: 100%;
}

.close-edit-card .mud-button {
    width: 100%;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@keyframes color {
    100%, 0% {
        stroke: #000;
    }

    40% {
        stroke: #0068ff;
    }

    66% {
        stroke: #008744;
    }

    80%, 90% {
        stroke: #ffa700;
    }
}