.boardButton {
    cursor:pointer;
}

.defaultAnimation{
    animation: pulsateAll 1.5s ease-in-out infinite;
}

#ExtraInfo{
    color:red;
    font-weight:bold;
}

.taxiOption{
    background:yellow;
    border-radius:15px;
}
.busOption{
    background:#49AB9C;
    border-radius:15px;
}
.metroOption{
    background:#E9624C;
    color:white;
    border-radius:15px;
}
.blackOption{
    background:black;
    color:white;
    border-radius:15px;
}

.cardDemoTicket i {
    font-size: 2em;
}

.demoTicketText {
    font-size: 1em;
}

.possibleLocation{
    animation: pulsatePossible 1.5s ease-in-out infinite;
    border:4px solid navy;
}

div#selectedBoardNumber {
    font-size: 2em;
}

.selectedButton{
    animation: pulsateSelected 1.5s ease-in-out infinite;
    border-color:darkgreen !important;
    background:darkgreendarkgreen;
}

@keyframes pulsateAll {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 10px navy;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
        box-shadow: 0 0 20px navy;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 10px navy;
    }
}

@keyframes pulsateSelected {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 10px darkgreen;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
        box-shadow: 0 0 20px darkgreen;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 10px darkgreen;
    }
}

@keyframes pulsatePossible {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 10px rgba(50, 205, 50, 0.5);
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
        box-shadow: 0 0 20px rgba(50, 205, 50, 1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 10px rgba(50, 205, 50, 0.5);
    }
}