/* 
    Created on : 27/10/2017, 12:47:05
    Author     : SHL
*/
[draggable=true] {
    cursor: move;
}

@keyframes text-shine-white {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #eee, 0 0 70px #eee, 0 0 80px #eee, 0 0 100px #eee, 0 0 150px #eee;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #eee, 0 0 35px #eee, 0 0 40px #eee, 0 0 50px #eee, 0 0 75px #eee;
    }
}

@keyframes text-shine-black {
    from {
        text-shadow: 0 0 10px #aaa, 0 0 20px #aaa, 0 0 30px #aaa, 0 0 40px #999, 0 0 70px #999, 0 0 80px #999, 0 0 100px #999, 0 0 150px #999;
    }
    to {
        text-shadow: 0 0 5px #aaa, 0 0 10px #aaa, 0 0 15px #aaa, 0 0 20px #999, 0 0 35px #999, 0 0 40px #999, 0 0 50px #999, 0 0 75px #999;
    }
}

@keyframes text-rotate {
    0% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    25% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.alert-step {
    animation-name: alert-step;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.alert-step-gray {
    animation-name: alert-step-gray;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.alert-step-yellow {
    animation-name: alert-step-yellow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.alert-step-green {
    animation-name: alert-step-green;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.alert-step-time {
    animation-name: alert-step;
    animation-duration: 0.5s;
    animation-iteration-count: 3;
}

.alert-step-gray-light {
    animation-name: alert-step-gray-light;
    animation-duration: 0.5s;
    animation-iteration-count: 7;
}

.alert-step-move {
    animation-name: alert-step-move;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes alert-step {
    0% {
        background-color: #FFF;
    }
    10% {
        color: #FFF;
    }
    100% {
        color: #FFF;
        background-color: red;
    }
}

@keyframes alert-step-yellow {
    0% {
        background-color: #FFF;
    }
    100% {
        color: #000;
        background-color: yellow;
    }
}
@keyframes alert-step-green {
    0% {
        background-color: #FFF;
    }
    100% {
        color: #000;
        background-color: #00e676;
    }
}
@keyframes alert-step-gray {
    0% {
        background-color: #DFDFDF;
    }
    100% {
        color: #000;
        background-color: dimgray;
    }
}

@keyframes alert-step-gray-light {
    0% {
        background-color: #cccccc;
    }
    100% {
        color: #000;
        background-color: dimgray;
    }
}

@-webkit-keyframes alert-step-move {
    0% {
        -webkit-transform: rotate(-45deg);
    }
    50% {
        -webkit-transform: rotate(45deg);
    }
    100% {
        -webkit-transform: rotate(-45deg);
    }
}

/* Classes para bordas destacadas com arredondamento de 3px */
.border-highlight-red {
    border: 2px solid #f44336;
    border-radius: 3px;
    padding: 2px 4px;
}

.border-highlight-yellow {
    border: 2px solid #ffeb3b;
    border-radius: 3px;
    padding: 2px 4px;
}

/* Classes para fundos arredondados dos ícones */
.bg-rounded-red {
    background-color: #f44336;
    border-radius: 50%;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bg-rounded-yellow {
    background-color: #ffeb3b;
    border-radius: 50%;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}