i.fa {
  font-family: 'FontAwesome' !important;
}

.text-red{
  color: #ff0000 !important;
}

.text-orange-bold{
  color: #fd9606 !important;
  font-weight: bold;
}

.text-red-bold{
  color: #f90106 !important;
  font-weight: bold;
}

.btn-history {
  background-color: #cccc !important;
}

.notification-details {
  min-width: 230px;
}

.highlighted { background: yellow }

#map_canvas {
  height: calc(100vh);
  width: 100%;
}

#map_action{
  position: absolute;
  top: 180px;
  right: 0;
  margin-right: 10px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  border-radius: 2px;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  user-select: none;
}

#map_action button {
  background: none;
  display: block;
  border: 0px;
  margin: 0px;
  padding: 0px;
  position: relative;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  width: 40px;
  height: 40px;
  font-size: 16px;
}

#map_action button.active {
  color: #f67d2e;
}

#map_action button:focus {
  outline:0;
}

#map_action .separator {
  overflow: hidden;
  width: 30px;
  height: 1px;
  margin: 0px 5px;
  background-color: rgb(230, 230, 230);
  top: 0px;
}

.text-avatar{
  font-size: 25px;
  text-align: center;
  line-height: 54px;
  color: #f67d2e;
}

.info-box-map-header{
  text-align:left;
  font-weight:bold; 
  font-size:12px; 
  background:transparent; 
  color:#444; 
  padding:10px; 
  border-radius: 10px 10px 0px 0px;
}

.infoBox:after {
    content: '';
    z-index: -1;
    position: absolute;
    border: 10px solid transparent;
    border-right: 13px solid rgb(233, 233, 233);
    top: 8px;
    left: -21px;
}

.info-box-map-header.darkblue{
  /*background: #022f65;*/
  /*color: #fff;*/
}

.info-box-map-content{
  padding: 10px;
  font-size: 11px;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
}

input#pac-input {
    background-color: #fff;
    padding: 10px 11px 10px 13px;
    width: 300px;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    text-overflow: ellipsis;
    margin-top:10px;
    outline: none;
    border: 1px solid #dedede;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}

input#pac-input:focus {
    /*border-color: #4d90fe;*/
    border: 1px solid #f67d2e;
    margin-left: -1px;
    padding-left: 14px;  /* Regular padding-left + 1. */
    width: 301px;
}

.map-container{
  /* padding-top: 60px; */
  position: relative;
  left: 380px;
  width: calc(100vw - 380px);
}

/*.htmlMarker{
  transition: transform;
  transition-timing-function: cubic-bezier(.51, .61, .66, .52);
}
.htmlMarkerLabel{
  transition: transform;
  transition-timing-function: cubic-bezier(.51, .61, .66, .52);
}*/

.invisible{
  display: none;
}

.v-block{
  display: block;
}

.card-icon-bg-primary [class^=i-] {
    color: rgba(255, 96, 40, 0.70);
}

.modal-body .nav-tabs {
    border-bottom: 1px solid #ff6028;
    width: 100%;
}
.modal-body .nav-tabs .nav-item .nav-link {
    padding: .6rem 1rem;
}

/*Search bar*/
.list-horizontal .list-item a.item-title {
  width: 100%;
  display: block;
}
/*End Search bar*/

/*Smart table*/
.st-sort-ascent:before {
  content: '\25B2';
}

.st-sort-descent:before {
  content: '\25BC';
}

.table .st-selected {
  background-color: #eeeeee;
}

.st-pagination .pagination {
    display: inline-block;
    padding-left: 0;
    border-radius: 4px;
}
.st-pagination .pagination>li {
    display: inline;
}
.st-pagination .pagination>li>a, .st-pagination .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #ff6028;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.st-pagination .pagination>.active>a, .st-pagination .pagination>.active>span, .st-pagination .pagination>.active>a:hover, .st-pagination .pagination>.active>span:hover, .st-pagination .pagination>.active>a:focus, .st-pagination .pagination>.active>span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #ff6028;
    border-color: #ff6028;
}
.st-pagination .pagination>li>a, .st-pagination .pagination>li>span { 
  border-radius: 50% !important;margin: 0 5px;
}

/*end Smart table*/

/*Dashboard*/
.chart-container {
  position: relative;
  margin: auto;
  height: 340px;
  width: 100%;
}

#dashboard-unit-body .content .text-primary small {
  font-size: 50%;
}

/*End Dashboard*/

/*SIDEBAR*/
.customizer{
  z-index: 99;  
  top: 0px;
}

.customizer .handle > .i-Arrow-Right{
  display: block;
}

.customizer .handle > .i-Arrow-Left{
  display: none;
}

.customizer.open .handle > .i-Arrow-Right {
  display: none;
}

.customizer.open .handle > .i-Arrow-Left {
  display: block;
}

.customizer-body .btn-action a {
  font-size: 18px;
  padding: 7px 10px;
}

.customizer-body .card {
  border-radius: 0;
}

.customizer-body .card-header h5 {
  font-size: .90rem;
  color: #f67d2e;
  padding: .375rem 0;
  position: relative;
  top: 50%;
}

.customizer-body .card-header .btn-link {
  font-size: .90rem;
  padding: 0 .75rem;
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.customizer-body .card-header .btn-link.collapsed i {
  -webkit-transform: rotate(180deg);
}

#information-card-device .card-body div.action{
  position: absolute;
  right: 0;
  padding-right: 1.25rem;
  font-size: 16px;
}

.street-view-container{
  position: relative;
}
.street-view-container > div > small {
  left: 0;
  right: 0;
  color: #7e7e7e;
  font-size: 75%;
  position: absolute;
  top: 0;
  text-align: center;
  z-index: 1;
  font-style: italic;
}

.street-view-container .pro-streetview-desc{
  height: 150px;
  line-height: 150px;
  background-color: #000000;
  text-align: center;
}

.street-view-container .pro-streetview-desc p {
  color: #f67d2e;
  font-size: 16px;
}

#group-unit-list{
  padding: 0;
  /* min-height: 150px; */
  position: relative;
}
#group-unit-list .title {
  background-color: #f0f0f1;
  position: relative;
  border-bottom: 1px solid #dedede;
}

#group-unit-list .title.danger {
  background-color: #ff00004f;
}

#group-unit-list .title a {
  width: 100%;
  display: block;
  padding: 10px 1.25rem;
  color: #444;
  font-weight: 700;
}

#group-unit-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#group-unit-list ul > .heading {
  background-color: #555555;
  color: #ffffff;
  font-weight: 700;
}

#group-unit-list .title a.collapsed i {
  -webkit-transform: rotate(180deg);
}

#group-unit-list .title:hover div.action,
#group-unit-list .title:focus div.action {
  visibility: visible;
}

#group-unit-list .title div.action {
  position: absolute;
  top: 0;
  right: 30px;
  visibility: hidden;
}

#group-unit-list ul > .heading:hover, #group-unit-list ul > .heading:focus {
  background-color: #555555;
}

#group-unit-list ul li {
  /*padding: 8px 1.25rem;*/
  cursor: pointer;
  position: relative;
}

#group-unit-list ul li a {
  color: #444;
  padding: 8px 1.25rem;
  display: block;
}

#group-unit-list ul li:hover, #group-unit-list ul li:focus {
  background-color: #ffebdc;
}

#group-unit-list ul li:hover div.action,
#group-unit-list ul li:focus div.action {
  visibility: visible;
}

#group-unit-list ul li div.action {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px 15px;
  visibility: hidden;
}
#group-unit-list ul li div.action a {
  padding: 0;
}
#group-unit-list ul li div.status {
  position: absolute;
  top: 10px;
  right: 40px;
}
#group-unit-list ul li div.status span {
  margin-right: 5px;
}
#group-unit-list ul li div.status span.badge-danger {
  color: #ff0000;
  border: 1px solid #ff0000;
  background-color: #fff;
  text-transform: lowercase;
}
#group-unit-list ul li div.status span.badge-success {
  color: #4caf50;
  background-color: #fff;
  border: 1px solid #4caf50;
  text-transform: lowercase;
}
#group-unit-list ul li div.status span.badge-primary {
  color: #ff6028;
  background-color: #fff;
  border: 1px solid #ff6028;
  text-transform: lowercase;
}

/*#group-unit-list ul li span.badge-danger {
  color: #ff0000;
  border: 1px solid #ff0000;
  background-color: #fff;
  text-transform: lowercase;
}
#group-unit-list ul li span.badge-success {
  color: #4caf50;
  background-color: #fff;
  border: 1px solid #4caf50;
  text-transform: lowercase;
}*/


#group-geofence-list{
  padding: 0;
  min-height: 150px;
  position: relative;
}
#group-geofence-list .title {
  background-color: #f0f0f1;
  position: relative;
  border-bottom: 1px solid #dedede;
}

#group-geofence-list .title.danger {
  background-color: #ff00004f;
}

#group-geofence-list .title a {
  width: 100%;
  display: block;
  padding: 10px 1.25rem;
  color: #444;
  font-weight: 700;
}

#group-geofence-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#group-geofence-list ul > .heading {
  background-color: #555555;
  color: #ffffff;
  font-weight: 700;
}

#group-geofence-list .title a.collapsed i {
  -webkit-transform: rotate(180deg);
}

#group-geofence-list .title:hover div.action,
#group-geofence-list .title:focus div.action {
  visibility: visible;
}

#group-geofence-list .title div.action {
  position: absolute;
  top: 0;
  right: 30px;
  visibility: hidden;
}

#group-geofence-list ul > .heading:hover, #group-geofence-list ul > .heading:focus {
  background-color: #555555;
}

#group-geofence-list ul li {
  /*padding: 8px 1.25rem;*/
  cursor: pointer;
  position: relative;
}

#group-geofence-list ul li a {
  color: #444;
  padding: 8px 1.25rem;
  display: block;
}

#group-geofence-list ul li:hover, #group-geofence-list ul li:focus {
  /* background-color: #ffebdc; */
}

#group-geofence-list ul li:hover div.action,
#group-geofence-list ul li:focus div.action {
  visibility: visible;
}

#group-geofence-list ul li div.action {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px 15px;
  visibility: hidden;
}
#group-geofence-list ul li div.action a {
  padding: 0;
}
#group-geofence-list ul li div.status {
  position: absolute;
  top: 10px;
  right: 40px;
}
#group-geofence-list ul li div.status span {
  margin-right: 5px;
}
#group-geofence-list ul li div.status span.badge-danger {
  color: #ff0000;
  border: 1px solid #ff0000;
  background-color: #fff;
  text-transform: lowercase;
}
#group-geofence-list ul li div.status span.badge-success {
  color: #4caf50;
  background-color: #fff;
  border: 1px solid #4caf50;
  text-transform: lowercase;
}

/*#group-geofence-list ul li span.badge-danger {
  color: #ff0000;
  border: 1px solid #ff0000;
  background-color: #fff;
  text-transform: lowercase;
}
#group-geofence-list ul li span.badge-success {
  color: #4caf50;
  background-color: #fff;
  border: 1px solid #4caf50;
  text-transform: lowercase;
}*/


#group-device-geofence-list{
  padding: 0;
  position: relative;
}
#group-device-geofence-list .title {
  background-color: #f0f0f1;
  position: relative;
  border-bottom: 1px solid #dedede;
}

#group-device-geofence-list .title.danger {
  background-color: #ff00004f;
}

#group-device-geofence-list .title a {
  width: 100%;
  display: block;
  padding: 10px 1.25rem;
  color: #f67d2e;
  font-weight: 700;
}

#group-device-geofence-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#group-device-geofence-list ul > .heading {
  background-color: #555555;
  color: #ffffff;
  font-weight: 700;
}

#group-device-geofence-list .title a.collapsed i {
  -webkit-transform: rotate(180deg);
}

#group-device-geofence-list .title:hover div.action,
#group-device-geofence-list .title:focus div.action {
  visibility: visible;
}

#group-device-geofence-list .title div.action {
  position: absolute;
  top: 0;
  right: 30px;
  visibility: hidden;
}

#group-device-geofence-list ul > .heading:hover, #group-device-geofence-list ul > .heading:focus {
  background-color: #555555;
}

#group-device-geofence-list ul li {
  /*padding: 8px 1.25rem;*/
  cursor: pointer;
  position: relative;
}

#group-device-geofence-list ul li a {
  color: #444;
  padding: 8px 1.25rem;
  display: block;
}

#group-device-geofence-list ul li:hover, #group-device-geofence-list ul li:focus {
  background-color: #ffebdc;
}

#group-device-geofence-list ul li:hover div.action,
#group-device-geofence-list ul li:focus div.action {
  visibility: visible;
}

#group-device-geofence-list ul li div.action {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px 15px;
  visibility: hidden;
}
#group-device-geofence-list ul li div.action a {
  padding: 0;
}
#group-device-geofence-list ul li div.status {
  position: absolute;
  top: 10px;
  right: 40px;
}
#group-device-geofence-list ul li div.status span {
  margin-right: 5px;
}
#group-device-geofence-list ul li div.status span.badge-danger {
  color: #ff0000;
  border: 1px solid #ff0000;
  background-color: #fff;
  text-transform: lowercase;
}
#group-device-geofence-list ul li div.status span.badge-success {
  color: #4caf50;
  background-color: #fff;
  border: 1px solid #4caf50;
  text-transform: lowercase;
}

/*#group-device-geofence-list ul li span.badge-danger {
  color: #ff0000;
  border: 1px solid #ff0000;
  background-color: #fff;
  text-transform: lowercase;
}
#group-device-geofence-list ul li span.badge-success {
  color: #4caf50;
  background-color: #fff;
  border: 1px solid #4caf50;
  text-transform: lowercase;
}*/

.tracking-info-head div.tracking-info-head-content {
  position: relative;
}

div.tracking-info-head-content > .tracking-info > .unit-action{
  position: absolute;
  top: 1.5rem;
  right: 30px
}

div.tracking-info-head-content > .tracking-info > .unit-action a {
  color: #fff;
  font-size: 18px;
}

/*END SIDEBAR*/

.swal-modal {
  background-color: #ffffff;
  border: 3px solid #ff8f00;
  border-radius: 20px;
}

.auth-content .tab-content{
  padding: 0;
}

.loading-wrapper{
  position: relative;
  /* min-height: 100px; */
}

.loading-wrapper .overlay {
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.loading-wrapper .overlay .fa, .loading-wrapper .overlay .loading-text {
  position: absolute;
  top: 50%;
  left: 45%;
  margin-left: -15px;
  margin-top: -15px;
  color: #f15a29;
  font-size: 16px;
}

.loading-wrapper .overlay p {
  position: absolute;
  top: 50%;
  left: 33%;
  margin-left: -15px;
  margin-top: -15px;
  color: #f15a29;
  font-size: 25px;
  font-weight: bold;
}

.loading-wrapper .overlay.dark {
  background: rgba(2, 2, 2, 0.7);
}

.overlay-street-view {
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.overlay-street-view .fa, .overlay-street-view .loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -7px;
  margin-top: -7px;
  color: #fb6f00cf;
  font-size: 27px;
}

.invoice-content {
  /*padding-top: 50px;*/
}

.invoice-content legend {
  border-bottom: 1px dashed #e5e5e5;
}

.invoice-content td.detail-invoice {
  padding: 0;
  font-size: 12px;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.invoice-content td.detail-invoice .alert {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}

.invoice-content td.detail-invoice .table {
  margin-bottom: 0;
}

.invoice-content td.detail-invoice .table tr {
  background-color: #f5f5f5;
}

.invoice-content .accordion-toggle.collapsed .i-Arrow-Up-in-Circle {
  display: none;
}

.invoice-content .accordion-toggle .i-Arrow-Up-in-Circle {
  display: inline-block;
}

.invoice-content .accordion-toggle.collapsed .i-Arrow-Down-in-Circle {
  display: inline-block;
}

.invoice-content .accordion-toggle .i-Arrow-Down-in-Circle {
  display: none;
}

.invoice-content .accordion-toggle.collapsed .fa-chevron-up {
  display: none;
}

.invoice-content .accordion-toggle .fa-chevron-up {
  display: inline-block;
}

.invoice-content .accordion-toggle.collapsed .fa-chevron-down {
  display: inline-block;
}

.invoice-content .accordion-toggle .fa-chevron-down {
  display: none;
}

/*notice*/
.notice {
  padding: 15px;
  background-color: #fafafa;
  border-left: 6px solid #7f7f84;
  margin-bottom: 10px;
  box-shadow: 0 5px 8px -6px rgba(0, 0, 0, 0.2);
}

.notice-sm {
  padding: 10px;
  font-size: 80%;
}

.notice-lg {
  padding: 35px;
  font-size: large;
}

.notice-success {
  border-color: #80D651;
}

.notice-success > strong {
  color: #80D651;
}

.notice-primary {
  border-color: #fb6f00;
}

.notice-primary > strong {
  color: #fb6f00;
}

.notice-info {
  border-color: #45ABCD;
}

.notice-info > strong {
  color: #45ABCD;
}

.notice-warning {
  border-color: #FEAF20;
}

.notice-warning > strong {
  color: #FEAF20;
}

.notice-danger {
  border-color: #d73814;
}

.notice-danger > strong {
  color: #d73814;
}

.notice-fieldmate {
  border-color: #002966;
}

.notice-fieldmate > strong {
  color: #002966;
}
.notice-complete {
  border-color: #9e9e9e;
}

.notice-complete > strong {
  color: #9e9e9e;
}

/*end notice*/

/*group devices*/
.group-box-list ul[dnd-list],
.group-box-list ul[dnd-list] > li {
  position: relative;
  cursor: pointer;
}

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.group-box-list ul[dnd-list] {
  min-height: 42px;
  padding-left: 0px;
}

/**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
.group-box-list ul[dnd-list] .dndDraggingSource {
  display: none;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.group-box-list ul[dnd-list] .dndPlaceholder {
  background-color: #ddd;
  display: block;
  min-height: 42px;
}

.group-box-list ul[dnd-list] li {
  background-color: #fff;
  border: 1px solid #ddd;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
}

.group-box-list ul[dnd-list] li dnd-nodrag {
  display: block;
  padding: 10px 15px;
}

/**
 * Show selected elements in green
 */
.group-box-list ul[dnd-list] li.selected {
  background-color: #dff0d8;
  color: #3c763d;
}

/**
 * Handle positioning
 */
.group-box-list .handle {
  cursor: move;
  position: absolute;
  top: 14px;
}

.group-box-list .name {
  margin-left: 20px;
}

.group-box-list .group-devices-container {
  margin: auto;
  width: 100%;
  overflow-y: auto;
}

.group-box-list .group-devices {
  white-space: nowrap;
  padding: 0;
}



.group-box-list .group-devices .group-list {
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  width: 250px;
}

.group-box-list .group-devices .group-list .card-title {
  margin-bottom: .75rem;
}

#btn-save-group {
  position: absolute;
  right: 20px;
  top: 20px;
}

.avatar-list label > input {
  /* HIDE RADIO */
  visibility: hidden;
  /* Makes input not-clickable */
  position: absolute;
  /* Remove input from document flow */
}

.avatar-list label > input + img {
  /* IMAGE STYLES */
  cursor: pointer;
  border: 2px solid #ddd;
}

.avatar-list label > input:checked + img {
  /* (RADIO CHECKED) IMAGE STYLES */
  border: 2px solid #f15a29;
}

.auth-reg-content .card .card.notif {
  border: 1px solid #ff8f00;
  background-color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  padding: 10px;
}

.auth-reg-content .card .card.notif h4 {
  font-weight: 500;
  line-height: 1.5;
  font-size: 19px;
}

.card-fieldmate {
  margin-top: 20px;
}

.table.top-least {
  border-collapse: unset !important;
}

.table.top-least th {
  background-color: #ff6028;
  border-radius: 5px;
  padding: 5px;
}

#table-history {
  overflow-y: auto; 
  height: 300px;
}

#table-history thead th{
  position: sticky; 
  top: -2px;
  background-color: #ff6028;
  color: #fff;
  margin-top: 0px;
}

.history_colapse {
  overflow-y: auto; 
  height: 300px;
}

.history-colpase ul {
  position: sticky; 
}

.avatarPro {
  line-height: 3.5;
  vertical-align: middle;
  text-align: center;
  border-radius: 5px;
  color: #ff9037;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 15px;
  right: 15px;
  bottom: .5rem;
  width: auto;
  background-color: #2d2c2c94;
  opacity: 1;
}

.driver-behaviour .star-rating {
  font-size: 32px;
  color: #ffc107;
}

.driver-behaviour .table td, .driver-behaviour .table th {
    padding: .2rem 0;
    border-top: none;
}

.driver-behaviour-sm .star-rating {
  font-size: 14px;
  color: #ffc107;
}

.least-perform-list {
  position: relative;
}

.least-perform-list > a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: absolute;
}

.pin-wrap {
   position: absolute;
   width: 18px;
   height: 18px;
   margin-top: -21.7279220614px;
   margin-left: -9px;
   transform-origin: 50% 120.7106781187% 0;
}
 .pin {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 18px;
   height: 18px;
   margin-top: -9px;
   margin-left: -9px;
   transform-origin: 50% 120.7106781187% 0;
}
 .pin::after {
   position: absolute;
   display: block;
   box-sizing: border-box;
   width: 18px;
   height: 18px;
   content: '';
   transform: rotateZ(-45deg);
   border: 5px solid #f90106;
   border-radius: 50% 50% 50% 50%;
}
 .pin::before {
   position: absolute;
   display: block;
   box-sizing: border-box;
   width: 18px;
   height: 18px;
   content: '';
   transform: rotateZ(-45deg);
   border: 5px solid #f90106;
   border-radius: 50% 50% 50% 0;
}
 .shadow {
   position: absolute;
}
 .shadow::after {
   position: absolute;
   left: -109px;
   display: block;
   width: 18px;
   height: 18px;
   margin-top: -9px;
   content: '';
   transform: rotateX(55deg);
   border-radius: 50%;
   box-shadow: rgba(0, 0, 0, .8) 100px 0 20px;
}
 .pulse {
   position: absolute;
   margin-top: -18px;
   margin-left: -18px;
   transform: rotateX(55deg);
}
 .pulse::after {
   display: block;
   width: 36px;
   height: 36px;
   content: '';
   animation: pulsate 1s ease-out;
   animation-delay: 1.1s;
   animation-iteration-count: infinite;
   opacity: 0;
   border-radius: 50%;
   box-shadow: 0 0 1px 2px rgba(0, 0, 0, .5);
   box-shadow: 0 0 6px 3px rgba(249, 1, 6, 1.0);
}

.danger-pulsate {
  animation: shadow-pulse-danger 1s infinite;
}

 @keyframes pulsate {
   0% {
     transform: scale(0.1, 0.1);
     opacity: 0;
  }
   50% {
     opacity: 1;
  }
   100% {
     transform: scale(1.2, 1.2);
     opacity: 0;
  }
}
@keyframes shadow-pulse-danger
{
  0% {
    box-shadow: 0 0 0 0px rgba(249, 1, 6, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(249, 1, 6, 0);
  }
}

.btn-toggle.inactive {
  margin: 0 4rem;
  padding: 0;
  position: relative;
  border: none;
  height: 1.5rem;
  width: 3rem;
  border-radius: 1.5rem;
  color: #6b7381;
  background: #bdc1c8;
}
.btn-toggle:focus.inactive,
.btn-toggle.focus.inactive,
.btn-toggle:focus.active,
.btn-toggle.focus.active {
  outline: none;
}
.btn-toggle:before,
.btn-toggle:after {
  line-height: 1.5rem;
  width: 4rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle:before {
  content: "Unavailable";
  left: -4.5rem;
}
.btn-toggle:after {
  content: "Available";
  right: -5rem;
  opacity: 0.5;
}
.btn-toggle.inactive > .handle {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 1.125rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.active {
  transition: background-color 0.25s;
}
.btn-toggle.active > .handle {
  left: 1.6875rem;
  transition: left 0.25s;
}
.btn-toggle.active:before {
  opacity: 0.5;
}
.btn-toggle.active:after {
  opacity: 1;
}
.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
  line-height: -0.5rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.4125rem;
  width: 2.325rem;
}
.btn-toggle.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
  display: none;
}
.btn-toggle:before,
.btn-toggle:after {
  color: #6b7381;
}
.btn-toggle.active {
  background-color: #29b5a8;
}
.btn-toggle.btn-lg {
  margin: 0 5rem;
  padding: 0;
  position: relative;
  border: none;
  height: 2.5rem;
  width: 5rem;
  border-radius: 2.5rem;
}
.btn-toggle.btn-lg:focus,
.btn-toggle.btn-lg.focus,
.btn-toggle.btn-lg:focus.active,
.btn-toggle.btn-lg.focus.active {
  outline: none;
}
.btn-toggle.btn-lg:before,
.btn-toggle.btn-lg:after {
  line-height: 2.5rem;
  width: 5rem;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle.btn-lg:before {
  content: "Off";
  left: -5rem;
}
.btn-toggle.btn-lg:after {
  content: "On";
  right: -5rem;
  opacity: 0.5;
}
.btn-toggle.btn-lg > .handle {
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 1.875rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.btn-lg.active {
  transition: background-color 0.25s;
}
.btn-toggle.btn-lg.active > .handle {
  left: 2.8125rem;
  transition: left 0.25s;
}
.btn-toggle.btn-lg.active:before {
  opacity: 0.5;
}
.btn-toggle.btn-lg.active:after {
  opacity: 1;
}
.btn-toggle.btn-lg.btn-sm:before,
.btn-toggle.btn-lg.btn-sm:after {
  line-height: 0.5rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.6875rem;
  width: 3.875rem;
}
.btn-toggle.btn-lg.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-lg.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-lg.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-lg.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-lg.btn-xs:before,
.btn-toggle.btn-lg.btn-xs:after {
  display: none;
}
.btn-toggle.btn-sm {
  margin: 0 0.5rem;
  padding: 0;
  position: relative;
  border: none;
  height: 1.5rem;
  width: 3rem;
  border-radius: 1.5rem;
}
.btn-toggle.btn-sm:focus,
.btn-toggle.btn-sm.focus,
.btn-toggle.btn-sm:focus.active,
.btn-toggle.btn-sm.focus.active {
  outline: none;
}
.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
  line-height: 1.5rem;
  width: 0.5rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle.btn-sm:before {
  content: "Off";
  left: -0.5rem;
}
.btn-toggle.btn-sm:after {
  content: "On";
  right: -0.5rem;
  opacity: 0.5;
}
.btn-toggle.btn-sm > .handle {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 1.125rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.btn-sm.active {
  transition: background-color 0.25s;
}
.btn-toggle.btn-sm.active > .handle {
  left: 1.6875rem;
  transition: left 0.25s;
}
.btn-toggle.btn-sm.active:before {
  opacity: 0.5;
}
.btn-toggle.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-sm.btn-sm:before,
.btn-toggle.btn-sm.btn-sm:after {
  line-height: -0.5rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.4125rem;
  width: 2.325rem;
}
.btn-toggle.btn-sm.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-sm.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-sm.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-sm.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-sm.btn-xs:before,
.btn-toggle.btn-sm.btn-xs:after {
  display: none;
}
.btn-toggle.btn-xs {
  margin: 0 0;
  padding: 0;
  position: relative;
  border: none;
  height: 1rem;
  width: 2rem;
  border-radius: 1rem;
}
.btn-toggle.btn-xs:focus.inactive,
.btn-toggle.btn-xs.focus.inactive,
.btn-toggle.btn-xs:focus.active,
.btn-toggle.btn-xs.focus.active {
  outline: none;
}
.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
  line-height: 1rem;
  width: 0;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle.btn-xs:before {
  content: "Unavailable";
  left: 0;
}
.btn-toggle.btn-xs:after {
  content: "Available";
  right: 0;
  opacity: 0.5;
}
.btn-toggle.btn-xs.inactive > .handle {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.75rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.btn-xs.active {
  transition: background-color 0.25s;
}
.btn-toggle.btn-xs.active > .handle {
  left: 1.125rem;
  transition: left 0.25s;
}
.btn-toggle.btn-xs.active:before {
  opacity: 0.5;
}
.btn-toggle.btn-xs.active:after {
  opacity: 1;
}
.btn-toggle.btn-xs.btn-sm:before,
.btn-toggle.btn-xs.btn-sm:after {
  line-height: -1rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.275rem;
  width: 1.55rem;
}
.btn-toggle.btn-xs.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-xs.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-xs.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-xs.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-xs.btn-xs:before,
.btn-toggle.btn-xs.btn-xs:after {
  display: none;
}
.btn-toggle.btn-secondary {
  color: #6b7381;
  background: #bdc1c8;
}
.btn-toggle.btn-secondary:before,
.btn-toggle.btn-secondary:after {
  color: #6b7381;
}
.btn-toggle.btn-secondary.active {
  background-color: #ff8300;
}
.toogle-active, .toogle-inactive {font-size:40px;cursor:pointer;}
.toogle-active, .toogle-inactive {font-size:40px;cursor:pointer;}
i.toogle-active { color: #5cb85c}
i.toogle-inactive {color: #d9534f}
.piehole{
  display:block;
  opacity: 1;
  background:white;
  height:35px;
  width:35px;
  position:absolute;
  z-index:-1;
  border-radius:100%;
  top: 15px;
  left: 13px;
}