* {
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 576px) {
    * {
        /*font-size: 1rem;*/
        /*for mobile and ipad*/
        /*line-height: 1.428;*/
    }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* ipad style*/
    /*.coverage, .mapstylechoice {
        font-size: 1.1rem;
        width: 235px;
    }

    .coverage {
        margin: 155px 0px 0px 45px;
    }

    .coverageIcon {
        margin: 155px 0px 0px 10px;
    }

    .mapstyle {
        margin: 115px 0px 0px 10px;
    }

    .mapstylechoice {
        margin: 115px 0px 0px 45px;
    }*/


    /*.coverage input {
        width: 27px;
        height: 27px;
        margin-bottom: 10px;
    }

    .mapstylechoice input {
        width: 27px;
        height: 27px;
        margin-bottom: 10px;
    }*/
}

@media (min-width: 768px) {
    * {
        /*font-size: 1rem;*/
        /*line-height: 1.428;*/
    }
    .modal-md-1 {
        max-width: 800px;
    }
    .modal-md-2 {
        max-width: 800px;
    }
    
}

@media (min-width: 992px) {
  
}

@media (min-width: 1200px) {
    * {
        /*font-size: 0.93rem;*/
        /*line-height: 1.428;*/


    }
    /*
    .coverage, .mapstylechoice {
        font-size: 0.8rem;
        width: 195px;
    }
    .coverage {
        margin: 195px 0px 0px 45px;
    }

    .mapstylechoice {
        margin: 155px 0px 0px 45px;
    }

    .coverageIcon {
        margin: 195px 0px 0px 10px;
    }

    .mapstyle {
        margin: 155px 0px 0px 10px;
    }
    .coverage input {
        width: 17px;
        height: 17px;
        margin-bottom: 10px;
    }

    .mapstylechoice input {
        width: 17px;
        height: 17px;
        
    }*/


    

}

@media screen and (max-width: 991px) {
    /*.sidebar-offcanvas {
        position: fixed;
        max-height: calc(100vh - 70px);
        top: 70px;
        bottom: 0;
        overflow: auto;
        left: -237px;
        -webkit-transition: all 0.25s ease-out;
        -o-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
    }

    .sidebar-offcanvas.active {
        left: 0;
    }*/
}

.hideOverFlowText {
}
.hideOverFlowText:hover {
    overflow: visible;
    white-space: normal;
    /*line-height: 1.2rem;*/
    height: auto; /* just added this line */
}
.dropdown-toggle {
    text-align: right !important;
}
.bg-darkblue {
    background-color: #0055A4;
}
.forceHide {
    display:none!important;
}
.auth .login-half-bg-cci {
    background: url("../images/auth/login-bg.jpg") no-repeat;
    background-size: cover;
    background-position-y: 30px;
    background-position-x: -15px;
}
.auth .login-half-bg-TrailRunner {
    background: url("../images/auth/login-bg-TrailRunner.jpg") no-repeat;
    background-size: cover;
    background-position-y: 30px;
    background-position-x: -15px;
    
}
.auth .login-half-bg-OttAgile {
    background: url("../images/auth/login-bg-OttAgile.jpg") no-repeat;
    background-size: cover;
    background-position-y: 30px;
    background-position-x: -15px;
}
.auth .login-half-bg-demo {
    background: url("../images/auth/login-bg.jpg") right no-repeat;
    background-size: cover;
}

.auth .login-half-bg {
    background: url("../images/auth/login-bg.jpg") no-repeat;
    background-size: cover;
}

.auth .login-half-bg-CustLogin {
    background: url("../images/auth/login-bg-CustLogin.jpg") no-repeat;
    background-size:cover;
}

.auth .login-half-bg-AdminLogin {
    background: url("../images/auth/login-bg-AdminLogin.jpg") no-repeat;
    background-size: cover;
}

.sidebar-dark .sidebar .nav.sub-menu .nav-item .nav-link.active {
    color: #248afd;
    background: transparent;
}

.main-panel {
   
}

.page-body-wrapper {
   
}

@media (min-width: 576px) {

    .modal-lg {
        max-width: 98%;
    }
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 86%;
    }
}
.topIcon {
    position: absolute;
    top: -20px;
    right: -7px;
    box-sizing: border-box;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    font-size: 0.60rem;
    color: white;
    padding-top: 1px;
}



.text-transparent {
    opacity:0;
}
.rotate-45 {
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    display: inline-block;
}
.ajax-file-upload-progress {
    width: 97%;
}

.ajax-file-upload-bar {
    padding-top: 2px;
}

.ajax-upload-dragdrop {
    height: 130px;
    /*padding-left:40%;*/
    padding-top: 30px;
    text-align: center;
}
.ajax-file-upload-statusbar {
    width:920px!important;
}
.modalFix {
    overflow-y: auto;
}
.ui-front{
    z-index:2000!important;
}
.whiteLink a, whiteLink a:active, whiteLink a:focus, whiteLink a:visited {
    color: white;
    text-decoration: none;
}

    .whiteLink a:hover {
        text-decoration:underline;
    }
.blueLink a, blueLink a:active, blueLink a:focus, blueLink a:visited {
    color: #090b0e;
    text-decoration: none;
}
    .blueLink a:hover {
        color: #0056b3;
    }
.blueLink1 a, blueLink1 a:active, blueLink1 a:focus, blueLink1 a:visited {
    color: #007bff;
    text-decoration: none;
}

.blueLink1 a:hover {
    color: #0056b3;
    text-decoration:underline!important;
}

.blackLink {
    color: black !important;
    text-decoration: none;
    opacity: 1;
}

    .blackLink:hover {
        color:blue !important;
        opacity: 1;
    }
.selectedButton {
    position: relative;
}

.selectedButton::before {
    content: "";
    position: absolute;
    top: 130%;
    left: 0;
    width: 100%;
    height: 0.2rem;
    background-color: rgb(61, 61, 61);
}
.form-control {
    padding-left: 0.675rem !important;
    padding-right: 0.675rem !important;
}
.border-icon {
    text-shadow: -1px 0 #a3a4a5, 0 1px #a3a4a5, 1px 0 #a3a4a5, 0 -1px #a3a4a5;
    /*text-shadow: 0 0 1px #000;*/
}
.border-icon-1 {
    text-shadow: -1.2px 0 #7F7F7F, 0 1.2px #7F7F7F, 1px 0 #7F7F7F, 0 -1px #7F7F7F;
    /*text-shadow: 0 0 1px #000;*/
}
.progress-bar.active, .progress.active  {
    -webkit-animation: progress-bar-stripes 0.5s linear infinite;
    -o-animation: progress-bar-stripes 0.5s linear infinite;
    animation: progress-bar-stripes 0.5s linear infinite;
}
.progress-bar-info {
    background-color: #5bc0de!important;
}
.table, .report-table,.network-table {
    border-collapse:separate!important;
    border-spacing:0px!important;
}



.table-bordered {
    border-left: 1px solid #c9ccd7 !important;
    border-right: 0px solid #c9ccd7 !important;
    border-bottom: 0px solid #c9ccd7 !important;
}

    .table-bordered td, .table-bordered th {
        border-left: 0px solid #c9ccd7 !important;
        border-top: 0px solid #c9ccd7 !important;
        border-bottom: 1px solid #c9ccd7 !important;
        border-right: 1px solid #c9ccd7 !important;
    }

.network-table {
    border-left: 1px solid #c9ccd7;
    border-top: 1px solid #c9ccd7;
}
    .network-table td {
        
        border-bottom: 1px solid #c9ccd7;
        border-right: 1px solid #c9ccd7;
    }
.table th, .jsgrid .jsgrid-table th,
.table td, .jsgrid .jsgrid-table td {
    
    padding: 0.625rem 0.375rem !important;
    vertical-align: top;
    border-top: 1px solid #c9ccd7;
}

.table-overflow {
    display: block;
    /*width: 100%;*/
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.report-table {
    /*width: 100%;*/
    /*max-width: 100%;*/
    margin-bottom: 1rem;
    background-color: transparent;
}
    .report-table th,
    .report-table td {
        padding: 0.625rem 0.375rem;
        vertical-align: top;
        border-top: 1px solid #c9ccd7;
        font-size: 0.875rem;
        line-height:18px;
        
    }
.report-table-label {
    padding: 0.225rem 0.375rem !important;
    margin:0px;
    border:0px!important;
}

    .toolTipTable tbody tr {
        height: 25px;
    }
.toolTipTable thead tr {
    height: 30px;
    background-color: #EDEDED;
    padding:0px 0px 2px 8px;
}
    .toolTipTable thead tr th, .toolTipTable tbody tr td {
        padding: 0px 0px 2px 8px;
    }


.form-control-lgCyrus {
    height: calc(2.25rem + 2px);
    padding: .5rem 1rem;
    line-height: 1.5;
    border-radius: 0rem;
}
select.form-control:not([size]):not([multiple]) {
    /*This is to make the select dropdown not gray when not in focus*/
    color: #495057 !important;
    padding-bottom: 0.5rem;
}
.textarea {
    line-height: 1.2rem;
}

.datepickerOld {
    z-index: 1600 !important; /* has to be larger than 1050 of modal */
}
.fc-nonbusinessOld {
    background-color: #F3F3F3;
    opacity: 0.8;
    border-color: #ddd;
}
.fc table {
    font-size:0.9rem;
}
.fc .fc-header-toolbar .fc-center h2 {
    font-size: 0.95rem;
}
.fc .fc-header-toolbar {
    margin-top: 2rem;
}

.fc .fc-event {
    border: 0;
    color: #ffffff;
    padding: .1rem;
}

    .fc .fc-event.fc-start {
        background: #248afd;
        border-radius: 4px;
        border-left: 4px solid #248afd;
    }

    .fc .fc-event.fc-not-start, .fc .fc-event.fc-not-end {
        background: #ff4747;
        border-left: 4px solid #ff4747;
        padding-left: .5rem;
    }

    .fc .fc-event.fc-not-end {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .fc .fc-event .fc-title,
    .fc .fc-event .fc-time {
        color: #ffffff;
    }

.fc-external-events .fc-event {
    background: #ffffff;
    color: #000;
    border-width: 0 0 0 4px;
    padding: 16px;
    border-radius: 0;
    margin-bottom: 10px;
}

.ui-widget-content {
    border: 1px solid #ddd;
    background: #f2f5f7 url(themes/cupertino/images/ui-bg_highlight-hard_100_f2f5f7_1x100.png) 50% top repeat-x;
    color: #362b36;
}



.ui-tooltip-custom {
    background-color: #E5F1F9!important;
    background: none;
    box-shadow: 2px 2px 5px gray;
    max-width:600px!important;
    line-height:20px;
}


.calClickable {
    cursor: pointer;
    font-size: 0.85rem;
}
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

/*this is for jquery UI autocomplete combobox*/
.ui-menu .ui-menu-item {
    padding-left: 10px;
    font-size: 0.9rem;
}
.ui-tooltip-content {
    font-size: 0.8rem;
    color: gray;
    
}
/*this datalist form bootstrap multi select*/

.multiselect-box {
    border: 1px solid #c9ccd7;
   background-color:transparent;
}
    .multiselect-box:hover {
        background-color: #E6E6E6;
    }
.multiselect-container {
    z-index: 999999 !important; /* has to be larger than 1050 of modal */
    width: 100%;
}
.multiselect-search {
    margin:2px;
    width:98%;
}
.multiselect-selected {
    background-color: #F3F3F3;
}
.multiselect-container > li > a {
    color: #495057;
}
.multiselect-container > li > a > label {
   
    padding: 3px 20px 3px 10px;
    
}

    .multiselect-container > li > a > label > input[type=checkbox] {
        width: 17px;
        height: 17px;
        margin: 0px 5px 0 0 ;
        
    }
.hideRightBorder {
    border-right: hidden;
}
.hideLeftBorder {
    border-left: hidden!important;
}

.whiteBG {
    background-color:white!important;
}
    .hide-pane {
    display:none;
}
.toggleMapPane {
    width: 20px;
    height: 110px;
    background-color: white;
    border: 1px solid #c9ccd7;
    border-right:0px;
    padding: 45px 0 0 8px;
    position: absolute;
    top: 55px;
    margin-right: 21px;
    right: -21px;
    cursor: pointer;
    z-index:0;
    
}
    .toggleMapPane:hover {
        background-color:lightgray;
    }

.clickableHover {
    cursor: pointer;
    text-decoration: underline;
}

    .clickableHover:hover {
        color: Highlight;
    }
.clickable {
   
   cursor:pointer;
   
}
.stageToolTip {
    /*font-size:1.6rem;*/
}

.clickable:hover {
    /*background-color:ghostwhite;*/
}

.sortable {
    cursor: pointer;
}
.sortheader {
    
    margin-left:10px;
}
.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #C4C4C4;
    /*border-radius: 4px;*/
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
    float: left;
    width: 0%;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    font-weight:bold;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
    
}
.progress-bar-title {
    position: absolute;
    text-align: center;
    line-height: 20px; /* line-height should be equal to bar height */
    overflow: hidden;
    color: #fff;
    right: 0;
    left: 0;
    top: 0;
}
.progress-bar-success {
    background-color: #5cb85c;
}
.progress-bar-warning {
    background-color: #f0ad4e;
}
.cellMarker {
    background-image: url('../images/celltower.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.userMarkerGreen {
    background-image: url('../images/UserIconGreen.png');
    background-size: cover;
    width: 25px;
    height: 25px;
    cursor: pointer;
}
.userMarkerRed {
    background-image: url('../images/UserIconRed.png');
    background-size: cover;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.userMarkerGray {
    background-image: url('../images/UserIconGray.png');
    background-size: cover;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.input-group-addon {
    padding: .5rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    color: #495057;
    text-align: center;
    background-color: #e9ecef;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    white-space: nowrap;
    vertical-align: middle;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    border-left: 0;
    cursor:pointer
}
.input-group-addon-flushed {
    padding: .5rem .1rem .5rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    color: #495057;
    text-align: center;
    background-color: white;
    border: 1px solid rgba(0,0,0,.15);
    white-space: nowrap;
    vertical-align: middle;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    border-right: 0;
    
}
.input-group .input-group-addon-flushed + .form-control {
    border-left: none;
    padding-left:0px!important;
}




.mapboxgl-popup-content {
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
}



.swal-button {
    box-shadow: none;
    padding: 10px 24px;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    color: #fff;
    background-color: #0276f8;
    
    border-color: #026adf;
    text-decoration: none;
    webkit-appearance: button;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.675rem 1.0rem;
    /*font-size: 1rem;*/
    line-height: 1;
    border-radius: 0.1875rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    overflow: visible;
    border: 0;
}
    .swal-button:hover {
        color: #fff;
        background-color: #0270ec;
        border-color: #0270ec;
    }
.swal-button:focus {
    box-shadow: none;
}
.popover {
    z-index: 2050;
}
.popover-body {
    
    font-size: 0.8rem;
    
}
.map {
    width: 100%;
    height: 500px;
}

.mapBar {
    width: 100%;
    height: 40px;
    flex-wrap: nowrap;
    display: flex;
}

.geocoder {
    z-index: 2;
    flex-grow: 1;
    /*left: 50%;
            margin-left: 30%;*/
    /*padding-top:5px;
            margin-left:5px;*/
    float: left;
    border: 1px solid silver;
}

.detectLocation {
    float: left;
    z-index: 1;
    width: 40px;
    height: 36px;
    border: 1px solid silver;
    background-image: url('../images/currentlocation.png');
    background-repeat: no-repeat;
    background-position: 5px 2px;
    cursor: pointer;
}

#detectLocation {

    cursor: pointer;
}

#divDetectLocation {
    background: white;
    width: 32px;
    height: 32px;
    cursor: pointer;
    padding: 3px 0 0 3px;
    display: none;
}


.coverageIcon {
    position: absolute;
    z-index: 1;
    background: #fff;
    width: 30px;
    height: 30px;
    margin: 195px 0px 0px 10px;
    border-radius: 3px;
    cursor: pointer;
    background-image: url('../images/signal.png');
    background-repeat: no-repeat;
    background-position: 4px 5px;
    border: 1px solid silver;
}

.coverage {
    position: absolute;
    z-index: 1;
    background: #fff;
    
    color: gray;
    margin: 195px 0px 0px 45px;
    padding: 12px 15px 0px 10px;
   
   
    line-height: 18px;
    border-radius: 3px;
    display:none;
    
}
   
    
    .coverageIconDisp {
        display: none;
    }
.mapstyle {
    position: absolute;
    z-index: 1;
    background: #fff;
    width: 30px;
    height: 30px;
    margin: 155px 0px 0px 10px;
    border-radius: 4px;
    cursor: pointer;
    background-image: url('../images/layer.png');
    background-repeat: no-repeat;
    background-position: 4px 5px;
    border: 1px solid silver;
}

.mapstylechoice {
    position: absolute;
    z-index: 1;
    background: #fff;
    width: 120px;
    
    margin: 155px 0px 0px 45px;
    padding: 8px 10px 0px 10px;
    border-radius: 3px;
    
    line-height: 18px;
    color: gray;
    display: none;
}
   
.rbLabel {
    padding-left:5px;
    cursor:pointer;
}

.mapboxgl-ctrl-geocoder {
    min-width: 100%;
    border: 0px solid silver;
    border-radius: 0px;
    box-shadow: none;
    font-size: 0.875rem;
}

.darkPlaceholder::-webkit-input-placeholder {
    color: #757575;
}

.mapboxgl-ctrl-geocoder--icon-search {
   
    /*display:none;
            width:5px;
            left:0px;*/
}

.mapboxgl-ctrl-geocoder--input {
    height: 36px !important;
}

.mapboxgl-ctrl-geocoder--icon {
    top: 8px !important;
}
.suggestions {
    z-index:10000!important;
}

pre.ui-coordinates {
    width: 100%;
    height: 25px;
    padding-top: 4px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    border-radius: 0px;
    margin-top: -5px;
    height: 30px;
    text-align: right;
    overflow: hidden;
}

#menu {
    position: absolute;
    background: #fff;
    padding: 10px;
    font-family: 'Open Sans', sans-serif;
    top: 60px;
}

#forMapbox input {
    border: 0 !important;
    height: 100% !important;
}

.tbl_charges td {
    font-size: 11px !important;
}

.smallIcon {
    font-size: 1.3em!important;
    color:lightgray!important;
}
.panelGray {
    background-color:silver!important;
}
.textAlignRight {
    text-align:right;
}
.scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    /* important:  dimensions or positioning here! */
}

.hidden-Scrollbar {
    
    overflow-y: scroll; /* Add the ability to scroll */
}

    /* Hide scrollbar for Chrome, Safari and Opera */
    .hidden-Scrollbar::-webkit-scrollbar {
        display: none;
    }

/* Hide scrollbar for IE and Edge */
.hidden-Scrollbar {
    -ms-overflow-style: none;
}

.btn-wrap-text {
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height:1.3rem;
}
.red-text {
    color:red!important;
}


@media (min-width: 992px) {
    .modal-md-1 {
        max-width: 1050px;
    }
    .modal-md-2 {
        max-width: 800px;
    }
}

.signpost { /* our rectangle */
    width: 70px;
    height: 43px;
    background-color: #4472C4;
    margin-top: -2.5px;
    position: absolute;
    padding:12px 0 0 15px;
    color:white;
    margin-left:10px;
    cursor:pointer;
}

    .signpost:after { /*  our pseudo-element */
        content: ""; /* required */
        position: absolute; /* takes the 'cap' out off flow */
        top: 0; /* stick it to top edge of the sign */
        left: 99%; /* push it way overto the right*/
        height: 0; /* we're doing this with borders remember */
        width: 0;
        border-width: 21.5px;
        border-style: solid;
        border-color: #4472C4; /* same as bg of our rectangle */
        /* now we make some of theborders disappear*/
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

    .signpost:hover {
        background-color: #5783D0;
    }

.sa {
    width: 140px;
    height: 140px;
    padding: 26px;
    background-color: #fff;
}

.sa-success {
    border-radius: 50%;
    border: 4px solid #A5DC86;
    box-sizing: content-box;
    height: 80px;
    padding: 0;
    position: relative;
    background-color: #fff;
    width: 80px;
}

    .sa-success:after, .sa-success:before {
        background: #fff;
        content: '';
        height: 120px;
        position: absolute;
        transform: rotate(45deg);
        width: 60px;
    }

    .sa-success:before {
        border-radius: 40px 0 0 40px;
        width: 26px;
        height: 80px;
        top: -17px;
        left: 5px;
        transform-origin: 60px 60px;
        transform: rotate(-45deg);
    }

    .sa-success:after {
        border-radius: 0 120px 120px 0;
        left: 30px;
        top: -11px;
        transform-origin: 0 60px;
        transform: rotate(-45deg);
        animation: rotatePlaceholder 4.25s ease-in;
    }

.sa-success-placeholder {
    border-radius: 50%;
    border: 4px solid rgba(165, 220, 134, 0.25);
    box-sizing: content-box;
    height: 80px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 80px;
    z-index: 2;
}

.sa-success-fix {
    background-color: #fff;
    height: 90px;
    left: 28px;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 5px;
    z-index: 1;
}

.sa-success-tip, .sa-success-long {
    background-color: #A5DC86;
    border-radius: 2px;
    height: 5px;
    position: absolute;
    z-index: 2;
}

.sa-success-tip {
    left: 14px;
    top: 46px;
    transform: rotate(45deg);
    width: 25px;
    animation: animateSuccessTip .75s;
}

.sa-success-long {
    right: 8px;
    top: 38px;
    transform: rotate(-45deg);
    width: 47px;
    animation: animateSuccessLong .75s;
}

@keyframes animateSuccessTip {
    0%, 54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes animateSuccessLong {
    0%, 65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0;
        top: 35px;
    }

    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

@keyframes rotatePlaceholder {
    0%, 5% {
        transform: rotate(-45deg);
    }

    100%, 12% {
        transform: rotate(-405deg);
    }
}

.sa-error {
    border-radius: 50%;
    border: 4px solid #F27474;
    box-sizing: content-box;
    height: 80px;
    padding: 0;
    position: relative;
    background-color: #fff;
    width: 80px;
    animation: animateErrorIcon .5s;
}

    .sa-error:after, .sa-error:before {
        background: #fff;
        content: '';
        height: 120px;
        position: absolute;
        transform: rotate(45deg);
        width: 60px;
    }

    .sa-error:before {
        border-radius: 40px 0 0 40px;
        width: 26px;
        height: 80px;
        top: -17px;
        left: 5px;
        transform-origin: 60px 60px;
        transform: rotate(-45deg);
    }

    .sa-error:after {
        border-radius: 0 120px 120px 0;
        left: 30px;
        top: -11px;
        transform-origin: 0 60px;
        transform: rotate(-45deg);
        animation: rotatePlaceholder 4.25s ease-in;
    }

.sa-error-x {
    display: block;
    position: relative;
    z-index: 2;
}

.sa-error-placeholder {
    border-radius: 50%;
    border: 4px solid rgba(200, 0, 0, 0.2);
    box-sizing: content-box;
    height: 80px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 80px;
    z-index: 2;
}

.sa-error-fix {
    background-color: #fff;
    height: 90px;
    left: 28px;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 5px;
    z-index: 1;
}

.sa-error-left, .sa-error-right {
    border-radius: 2px;
    display: block;
    height: 5px;
    position: absolute;
    z-index: 2;
    background-color: #F27474;
    top: 37px;
    width: 47px;
}

.sa-error-left {
    left: 17px;
    transform: rotate(45deg);
    animation: animateXLeft .75s;
}

.sa-error-right {
    right: 16px;
    transform: rotate(-45deg);
    animation: animateXRight .75s;
}

@keyframes rotatePlaceholder {
    0%, 5% {
        transform: rotate(-45deg);
    }

    100%,12% {
        transform: rotate(-405deg);
    }
}

@keyframes animateErrorIcon {
    0% {
        transform: rotateX(100deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes animateXLeft {
    0%, 65% {
        left: 82px;
        top: 95px;
        width: 0;
    }

    84% {
        left: 14px;
        top: 33px;
        width: 47px;
    }

    100% {
        left: 17px;
        top: 37px;
        width: 47px;
    }
}

@keyframes animateXRight {
    0%, 65% {
        right: 82px;
        top: 95px;
        width: 0;
    }

    84% {
        right: 14px;
        top: 33px;
        width: 47px;
    }

    100% {
        right: 16px;
        top: 37px;
        width: 47px;
    }
}

/*pulsating button start*/
.pulsingButton {
    /*width: 220px;*/
    /*text-align: center;
    white-space: nowrap;
    display: block;*/
    /*margin: 50px auto;
    padding: 10px;*/
    box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
    /*border-radius: 10px;*/
    /*background-color: #FF0000;*/
    -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    /*font-size: 22px;
    font-weight: normal;
    font-family: sans-serif;
    text-decoration: none !important;
    color: #ffffff;*/
    transition: all 300ms ease-in-out;
}


/* Comment-out to have the button continue to pulse on mouseover */

a.pulsingButton:hover {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
    color: #ffffff;
}


/* Animation */

@-webkit-keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

@-moz-keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

@-ms-keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

@keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

/*pulsating button end*/

.button-hand button::after {
    content: "👇";
    /*font-size: 60px;*/
    /*transform: scaleX(-1);*/
    transform: rotate(180deg);
    /*top: 2px;*/
    /*top: -68px;*/
    /*animation: up-down 1s infinite;*/
    -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    /*font-size: 22px;
    font-weight: normal;
    font-family: sans-serif;
    text-decoration: none !important;
    color: #ffffff;*/
    transition: all 300ms ease-in-out;
 
}