html, body {
 height: 100%;
 width: 100%;
 margin: 0px;
 padding: 0px;
 color: #F1F1F1;
 background-image: linear-gradient(90deg, rgb(13, 112, 128) 0%, rgb(2, 19, 31) 100%);;
}

.dotGreen {
  height: 15px;
  width: 15px;
  background-color: #0F0;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.no-padding {
    padding: 0px;
    margin: 2px;
}

.RGLogo {
	position: absolute;
	top:0;
	left: 50%;
  z-index: 11;
  height: 90px;
  width: 90px;
  background-image: url("/img/logoAutoGPS_90.png");
  margin: 0 0 0 -45px;
}

.centredDiv {
 /*max-width: 550px;*/
 text-align: -webkit-center;
 margin: auto;
 /*overflow-x: unset;*/
}

.table-responsive .table td, .table-responsive .table th {
    padding: 5px;
    vertical-align: middle;
    white-space: nowrap;
}
.table-responsivePadd td, .table th {
    padding: 5px;
    vertical-align: middle;
    white-space: nowrap;
    max-width: 120px;
}

.dotRed {
  height: 15px;
  width: 15px;
  background-color: #F00;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

input[type=checkbox] {
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  margin: 10px;
  float: right;
}

.RGHeaderMenu {
 position: absolute;
 background-color: #e96529;
 top: 3px;
 left: 3px;
 z-index: 10;
}

.MenuName {
	display: block;
  margin: 0;
  padding: 0;
  text-align: center;
}

.hamburger-icon {
 margin: 0;
 padding: 7px 7px 0 7px;
 display: inline-block;
 top: 0;
 left: 0;
 cursor: pointer;
}

.hamburger-icon span {
 width: 35px;
 background-color: #7cc1e6;
 height: 5px;
 display: block;
 margin-bottom: 5px;
}

.hamburger-icon span:last-child {
 margin-bottom: 0px;
}

.form-signin {
 width: 100%;
 max-width: 330px;
 padding: 5px;
 margin: auto;
}

.contact-form {
 width: 100%;
 max-height: 300px;
 max-width: 400px;
 padding: 15px;
 margin: auto;
}

.contact-form .message {
  height: 250px;
}

#RGBody {
 text-align: center;
}

#RGMap{
 height: 100%;
 width: 100%;
 margin: 0px auto;
}

/* google mapss controle type button */
.gm-style-mtc {
 left: 45px;
}

/* google map info window style */
.gm-style .gm-style-iw {
    font-weight: 300;
    font-size: 14px;
    overflow: hidden;
    color: #6f3929;
}

.gm-style-iw button:focus {
    outline: 0;
}

/* menu */
#RGMenu {
 position: absolute;
 top: 0px;
/* padding-top: 5px;*/
 padding-left: 200px;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease;
}

#RGMenu #sidebar-wrapper {
 border-right: 1px solid #e7e7e7;
 z-index: 100;
 position: fixed;
 left: 200px;
 width: 0px;
 height: 100%;
 line-height: 10px;
 margin-left: -200px;
 overflow-y: auto;
 background-image: linear-gradient(90deg, rgb(13, 112, 128) 0%, rgb(2, 19, 31) 100%);
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease;
}

#RGMenu #sidebar-wrapper .sidebar-nav {
 position: absolute;
 font-size: 18px;
 width: 200px;
 margin: 0;
 padding: 0;
 top: 100px;
 margin-left: 10px;
 list-style: none;
}

.dropdown-toggle::after {
 right: 20px;
 position: absolute;
 top: auto;
 margin-top: 15px;
}

#RGMenu #sidebar-wrapper .sidebar-nav li {
 text-indent: 0;
 line-height: 30px;
 margin-top: 10px;
}

#RGMenu #sidebar-wrapper .sidebar-nav li a {
 display: block;
 text-decoration: none;
 color: #f1f1f1;
 background: #3c7a7f;
 border-radius: 20px;
 margin: 2px;
 padding-left: 5px;
}

#RGMenu #sidebar-wrapper .sidebar-nav li a:hover {
 color: #ffff00;
}

#RGMenu #sidebar-wrapper .sidebar-nav li a .sidebar-icon {
 width: 5px;
 height: 30px;
 padding: 0 2px;
 display: inline-block;
 text-indent: 7px;
 margin-right: 10px;
 color: #fff;
 float: left;
}

#RGMenu #sidebar-wrapper .sidebar-nav li ul.panel-collapse {
 list-style: none;
 -moz-padding-start: 0;
 -webkit-padding-start: 0;
 -khtml-padding-start: 0;
 -o-padding-start: 0;
 padding-start: 0;
 padding: 0;
 margin-left: 15px;
}

#RGMenu #sidebar-wrapper .sidebar-nav li ul.panel-collapse li i {
 margin-right: 20px;
}

#RGMenu #sidebar-wrapper .sidebar-nav li ul.panel-collapse li {
 text-indent: 5px;
}

#RGMenu #sidebar-wrapper .closebtn {
 position: absolute;
 top: 5px;
 right: 5px;
 font-size: 30px;
 margin-left: 50px;
}
 
@media screen and (max-height: 400px) {
 #RGMenu #sidebar-wrapper .sidebar-nav {
  top: 20px;
 }
 
 #RGMenu #sidebar-wrapper .sidebar-nav li a {
  font-size: 16px;
 }
}

/* manage accounts */
.nav {
   display: inline-flex;
   /*margin: 10px; */
   margin-bottom: 15px;
   margin-top: 15px;
   justify-content: center;
}

.nav-tabs .nav-link {
 background: #3c7a7f;
 border-radius: 10px;
 color: #b08d7e;
 margin-bottom: 1px;
}

.nav-tabs .nav-item {
 margin-top: 5px;
 margin-left: 5px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
 background: #3c7a7f;
 border-radius: 10px;
 color: #FFF;
 margin-bottom: 1px;
}

.btn-success {
    color: #fff;
    background-color: #3c7a7f;
    border-color: #3c7a7f;
}

.btn-success:disabled {
    color: #fff;
    background-color: #3c7a7f;
    border-color: #3c7a7f;
}

.btn-success:hover {
    color: #fff;
    background-color: #17a3aa;
    border-color: #17a3aa;
}

.btn-outline-secondary {
	color: #FFF;
}
/* Set the size of the div element that contains the map 
#map {
 height: 85%;
 width: 100%;
 margin: 0px auto;
}
*/
.tdPub {
 width: 100%;
 text-align: center;
}

.loadCounter {
 position: fixed;
 z-index: 9;
 top: 5px;
 right: 5px;
 vertical-align: middle;
 text-align: center;
 display: content;
 color: #beeef1;
 background-color: #FF9800;
 border-radius: 15px;
 font-family: sans-serif;
 font-size: 24px;
}

.gpsDistance {
 position: fixed;
 z-index: 9;
 top: 5px;
 right: 5px;
 vertical-align: middle;
 text-align: center;
 display: content;
 color: #80d0ed;
 background-color: #584d3d;
 border-radius: 10px;
 font-family: sans-serif;
 font-size: 20px;
 padding: 5px;
 visibility: hidden;
}

.closebtn2 {
 margin-left: 5px;
 margin-right: 5px;
 color: #AE8F73;
 font-weight: bold;
 float: right;
 font-size: 25px;
 line-height: 22px;
 cursor: pointer;
 transition: 0.3s;
}

.closebtn2:hover {
 color: red;
}

.modalAlert {
 position: absolute;
 display: none;
 top: 50%;
 left: 50%;
 width: 300px;
 height: 150px;
 margin-top: -75px;
 margin-left: -150px;
 color: #b30d36;
 background-color: #FEEFB3;
 font-size: 16px;
 text-align: center;
 border-radius: 5px;
 /* needed styles for the overlay */
 z-index: 10; /* keep on top of other elements on the page */
 box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
}

#AlertSpan {
 position: relative;
 top: 30%;
 margin-left: 20px;
}

.tracking-days {
 position: absolute;
 display: flex;
 flex-wrap: nowrap;
 max-width: 100%;
 overflow-x: auto; 
 overflow-y: hidden;
 /*-webkit-overflow-scrolling: touch;*/
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 text-align: center;
 font-family: Helvetica, Arial, Sans-serif;
 background: #555;
 color: #fff;
 border: 2px solid #e7e7e7;
 font-size: 16px;
 z-index: 200;
 visibility: hidden;
}

.tracking-days::-webkit-scrollbar {
-webkit-appearance: none;
}

.tracking-days::-webkit-scrollbar:horizontal {
height: 12px;
}

.tracking-days::-webkit-scrollbar-thumb {
background-color: #408080;
border-radius: 10px;
border: 2px solid #0080c0;
}

.tracking-days::-webkit-scrollbar-track {
border-radius: 10px; 
background-color: darkslategray; 
}

.form-control {
 padding: 0;
 }
.calendar-time {
    text-align: center;
}

.calendar-hour label {
    color: #FFF;
    font-size: 12px;
    line-height: 12px;
}

.calendar-hour {
    padding: 5px;
    position: relative;
    text-align: center;
    top: 25%;
    min-width: 95px;
}

.month {
 display: inline-block;
 margin: 5px;
 vertical-align: top;
 -webkit-user-select: none;
 background: darkslategray;
 color: currentColor;
}

.month caption {
 padding-top: .5rem;
 padding-bottom: .5rem;
 text-align: center;
 caption-side: top;
 color: currentColor;
}

.days  td {
 height: 30px !important;
 font-weight: bold;
 text-align: center;
 vertical-align: middle;
 background: lightyellow;
 color: forestgreen;
}

.month td {
 border-top: 1px solid #adb0b1;
 border-left: 1px solid #adb0b1;
 position: relative;
 height: 30px;
 width: 30px;
 text-align: center;
 vertical-align: middle;
}

.month td:hover:not(.blur){
background:#abd1f3;
}
.tracking-days .blur {
 background: #888;
 font-size: 12px;
}

.month td a.date {
 font-size: 14px;
 color: #fff;
}

.tracking-days .today {
 background: #C55762;
 color: #fff;
}

.loader {
 position: absolute;
 visibility: hidden;
 border-radius: 50%;
 border-top: 15px solid #FF0000;
 border-right: 15px solid #00FFFF;
 border-bottom: 15px solid #0000FF;
 border-left: 15px solid #FFFF00;
 width: 80px;
 height: 80px;
 margin-top: -40px;
 margin-left: -40px;
 top: 50%;
 left: 50%;
 -webkit-animation: spin 2s linear infinite alternate;
 -moz-animation: spin 2s linear infinite alternate;
 animation: spin 2s linear infinite alternate;
 z-index: 200; 
 box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mapLabels {
 color: #ffffff;
 background-color: #004040;
 font-size: 14px;
 font-weight: bold;
 text-align: center;
 padding: 2px;
 border: 1px solid #400080;
 white-space: normal;
}

/* LIST #2 */
.homeList {
	  float: left;
    max-width: 800px;
    margin-left: 10px;
    font-style: normal;
    font-family: Georgia, Times, serif;
    font-size: 24px;
    color: #ffff00;
}

.homeList p {
    font-size: 18px;
    color: #FFFFFF;
    text-decoration: underline;
}

.homeList li p {
    text-decoration: none;
    padding: 8px;
    font-size: 16px;
    font-style: normal;
    font-family: Arial;
    font-size: 16px;
    color: #ffffff;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #2da4bf;
}

.homeList li:nth-child(even) p {
    border: 1px solid #4abd8d;
}

.homeLogo {
    height: 128px;
    width: 128px;
    background-image: url("/img/logoAutoGPS_128.png");
}

@media screen and (max-width: 500px) {
 .homeLogo {
    height: 90px;
    width: 90px;
    background-image: url("/img/logoAutoGPS_90.png");
	}
}



.form-holder {
      /*display: flex;*/
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
}

.form-holder .form-content {
    position: relative;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 40px;
}

.form-content .form-items {
    border: 3px solid #fff;
    padding: 40px;
    display: inline-block;
    width: 100%;
    min-width: 300px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: left;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.form-content h3 {
    color: #fff;
    text-align: left;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 5px;
}

.form-content h3.form-title {
    margin-bottom: 30px;
}

.form-content p {
    color: #fff;
    text-align: left;
    font-size: 17px;
    font-weight: 300;
    line-height: 20px;
    margin-bottom: 30px;
}


.form-content label, .was-validated .form-check-input:invalid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label{
    color: #fff;
}

.form-content input[type=text], .form-content input[type=password], .form-content input[type=email], .form-content select {
    width: 100%;
    padding: 9px 20px;
    text-align: left;
    border: 0;
    outline: 0;
    border-radius: 6px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin-top: 16px;
}

.form-content textarea {
    position: static !important;
    width: 100%;
    padding: 8px 20px;
    border-radius: 6px;
    text-align: left;
    background-color: #fff;
    border: 0;
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    outline: none;
    resize: none;
    height: 120px;
    -webkit-transition: none;
    transition: none;
    margin-bottom: 14px;
}

.form-content textarea:hover, .form-content textarea:focus {
    border: 0;
    background-color: #ebeff8;
    color: #8D8D8D;
}

.mv-up{
    margin-top: -9px !important;
    margin-bottom: 8px !important;
}

.invalid-feedback{
    color: #ff606e;
}

.valid-feedback{
   color: #2acc80;
}

.whatsAppShare {
 position: absolute;
 width: 600px;
 height: 220px;
 max-width: 100%;
 overflow-x: auto; 
 overflow-y: hidden;
 /*-webkit-overflow-scrolling: touch;*/
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 text-align: center;
 font-family: Helvetica, Arial, Sans-serif;
 background: linear-gradient(90deg, rgb(13, 112, 128) 0%, rgb(2, 19, 31) 100%);
 color: #fff;
 border: 2px solid #e7e7e7;
 font-size: 16px;
 z-index: 200;
 visibility: hidden;
}