.ph-Container {
    margin-top: -5px;
    margin-bottom: 10px;
    padding-left:38px;
}


.ph-Current {
    font-weight: 900;
    font-size: larger;
    background-color: #ffcd89;
    border-radius: 5px;
    padding: 0 2px;
    border: 2px solid darkorange;
    cursor: pointer;
}

.ph-Default {
    font-weight: 600;
    border-radius: 3px;
    padding: 0 2px;
    border: 1px solid black;
    margin-right: 3px;
    cursor: pointer;
}
.ph-Default:hover{
    background-color:burlywood;
}
.ph-btn {
    margin-left: -7px;
    margin-right: 3px;
    vertical-align: middle;
    border: none;
    padding: 0;
    display: inline-block;
    line-height: 15px;
    text-align: center;
    font-size: small;
    height: 15px;
    width: 15px;
    cursor: pointer;
}
/*.ph-btn:hover{
    background-color:antiquewhite;
    border-radius:2px;
}*/
.ph-btn-Delete {
    color:white;
    background-color:red;
    margin-right:10px;
}
.ph-btn-Record {
    color: red;
    background-color: red;
    border-radius:50%;
    height:9px;
    width:9px;
}
.ph-btn-Play {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom:5px solid transparent;
    border-left: 9px solid green;
}
.ph-flash {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
.ph-bannercontrol {
    height: 50px;
    background-color: #683618;
    width: 100%;
}

.cls-1 {
    opacity: 0.3;
    fill: none;
    stroke: #00c;
    stroke-miterlimit: 10;
    stroke-width: 6px;
    cursor: pointer;
    pointer-events: visible;
    transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out;
    fill: rgba(135, 206, 250, 0.2); /* sky-blue, 30% opacity */
}

    .cls-1:hover {
        fill: rgba(135, 206, 250, 0.5); /* sky-blue, 30% opacity */
    }

    .cls-1:active {
        opacity: 1.0; /* fully visible while clicking */
    }

.suppress-interactions {
    cursor: default;
    pointer-events: none;
}