.toasts {
    bottom: 1em;
    left: 1em;
    position: fixed;
}

.floatingText {
    border-radius: 0.19em;
    color: #FFF;
    display: inherit;
    font-family: 'Roboto';
    font-size: 0.8em;
    font-weight: 300;
    min-width: 15em;
    padding: 1em 2em;
    position: relative;
    text-align: left;
}

.floatingContainer {
    bottom: 1em;
    position: fixed;
    right: 1em;
    z-index: 20;
}

.floatingContainer:hover .subActionButton {
    transition: opacity 1.2s;
}

.floatingContainer:hover .subActionButton + .subActionButton {
    transition: opacity 0.8s;
}

.subActionButton + .subActionButton + .subActionButton{
    transition: opacity 0.4s;
}

.actionButton {
    border: 3px #FFF solid;
    background-color: #F44336;
    border-radius: 50%;
    height: 4.5em;
    position: relative;
    width: 4.5em;
    z-index: 1000;
    box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.floatingTextBG {
    padding: 0.2em 0.5em;
}

.actionButton.display {
    display: inherit;
}

.actionButton:before {
    content: '\f11d';
    color: #FFF;
    position: absolute;
    margin-top: 3px;
    margin-left: 13px;
    opacity: 1;
    font-size: 2.6em;
    font-weight: 400;
    font-family: 'Ionicons';
    transform: rotate3d(0, 0, 1, -360deg);
    transition: content 0.4s, transform 0.4s, opacity 0.2s;
}

.actionButton:after {
    content: '\f11d';
    color: #FFF;
    position: absolute;
    margin-top: .6em;
    margin-left: .88em;
    font-size: 1.6em;
    font-weight: 400;
    opacity: 0;
    font-family: 'Ionicons';
    transform: rotate3d(0, 0, 1, -360deg);
    transition: content 0.4s, transform 0.4s, opacity 0.4s;
}

.actionButton.open::before {
    transform: rotate3d(0, 0, 1, 0deg);
    opacity: 0;
}
.actionButton.open::after {
    transform: rotate3d(0, 0, 1, 0deg);
    opacity: 1;
}

.subActionButton {
    background-color: #f44336;
    height: 3em;
    width: 3em;
    border-radius: 50%;
    margin-bottom: .6em;
    margin-left: .8em;
    opacity: 0;
    position: relative;
    z-index: 1000;
    display: none;
}

.subActionButton .floatingText {
    position: absolute;
    right: 2em;
    top: 2px;
    font-family: 'Roboto';
    color: #FFF;
    text-align: right;
    opacity: 1;
    transition: opacity 0.4s;
}
.subActionButton .floatingText.show {
    opacity: 1;
}

.floatingTextBG {
    padding: 0.2em 0.5em;
    background-color: rgba(33, 33, 33, 0.8);
    border-radius: .3em;
}

.subActionButton.display {
    opacity: 1;
}

.subActionButton.chat:before {
    content: "\f212";
    font-family: 'Ionicons';
    margin-left: 12px;
    display: block;
    padding-top: 5px;
    font-size: 22px;
    color: #f5f5f5;
}

.subActionButton.whatsapp:before {
    content: '\f4f0';
    font-family: 'Ionicons';
    margin-left: 12px;
    display: block;
    padding-top: 5px;
    font-size: 22px;
    color: #f5f5f5;
    
    
}

.subActionButton:hover {
    box-shadow:0 0 8px rgba(0,0,0,.14),0 4px 16px rgba(0,0,0,.28);
}