/* hide this in mobile */

/* .km-view{
    position: relative;
    max-width: 850px;
    border-style: groove;
    margin: auto
}
.km-modalview-wrapper{
    text-align: center;
} */


/* ---- */

.size-a4 {
    width: 6.2in;
    height: 8.7in;
}

.linkText{
    text-decoration: underline;
    font-weight: bold;
    color: darkblue;
}

.textUnderImage{
    text-align: center; 
    color:grey;
    font-size: 18px; 
    font-weight: bold; 
    display:block
}

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  /* The actual popup (appears on top) */
  .popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class when clicking on the popup container (hide and show the popup) */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

/* other */
.jobcardStatusLabel{
    background-color: green;
    color: white;
    padding: 4px;
    font-size: 14px;
    border-radius: 20%;
    font-weight: bold;
    margin: 3px;
}

.employeeNameInJobCard{
    color:black;
    background-color: lightgreen; 
    padding: 5px; 
    border-radius: 10px; 
    float: left;
    font-size: 14px;
}

/* progres bar color */
progress::-moz-progress-bar {appearance: none; background: skyblue; }
progress::-webkit-progress-value {appearance: none; background: skyblue; }
progress {appearance: none; color: skyblue; }


/* @group Blink */
.blink {
	-webkit-animation: blink .75s linear infinite;
	-moz-animation: blink .75s linear infinite;
	-ms-animation: blink .75s linear infinite;
	-o-animation: blink .75s linear infinite;
	 animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-o-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}


.purchaseEditInput{
    border-style: solid;
    border-color: #08baba;
    border-width: 2px;
    padding: 1px;
    margin-top: 1px;
}


#loadingsplashLogo {
    -webkit-animation: rotation 3s infinite linear;
}

@-webkit-keyframes rotation {
    from {
            -webkit-transform: rotate(0deg);
    }
    to {
            -webkit-transform: rotate(359deg);
    }
}


.jobCardStatusButonWrapper {
    display:inline-block; 
    width:100px;
    border-radius: 9px;
}

.jobCardStatusButon {
    vertical-align: top;
     display: inline-block; 
      border: none;
      border-style: none;
}


.smallRoundButton {
    display: block;
     color: white; 
     border-style: none; 
     border-radius: 50%;
     background-color: #db4240;
}
#newRoundButton {
    /* position:fixed; */
    position: absolute;
    width:60px;
    height:60px;
    bottom:40px;
    right:30px;
    /* left: 80%; */
    background-color:#0C9;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
    }
 #newRoundButton :active {
    color: green;
  } 


  /* Float four columns side by side */
  .column {
    float: left;
    width: 50%;
    padding: 0 10px;
  }
  .column :active {
    background-color: grey;
  } 
  /* Remove extra left and right margins, due to padding in columns */
  .row {margin: 0 -5px;}
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Style the counter cards */
  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
    padding: 16px;
    text-align: center;
    background-color: #f1f1f1;
  }

 
  
  /* Responsive columns - one column layout (vertical) on small screens */
  @media screen and (max-width: 200px) {
    .column {
      width: 100%;
      display: block;
      margin-bottom: 20px;
    }
  }




#listview-noArrow .km-listview-link:after {
    content: none;
  }
.benefitButton{
    color: white;
    border-radius: 50px;
}

.infoBenefit{
    position:absolute;
    padding-top:.3em;
    padding-right:0.5em;
    display:inline-block;
     width: auto;
     font-size: 18px;
}
.detaillBenefit {
    display:block;
    margin-top: 0.5em;
    margin-left:0.5em;
    font-size: 12px;
}

.saveButton {
    display:block; 
    background-color:rgb(8, 186, 127); 
    width:99%; 
     font-size:1.1em; 
     color:white;
}

.halfLabelDiv {
    float: left;
    display: block;
    width: 48%;
}

.labelSpan {
    color:grey;
    font-size: 11px;
}

#roundbutton0{
           width:60px;
           height:60px;
           bottom:40px;
           left:10%;
           background-color:#0C9;
           color:#FFF;
           border-radius:50px;
           text-align:center;
           box-shadow: 2px 2px 3px #999;
}


#roundbutton1{
     position:fixed; 
            width:60px;
            height:60px;
            bottom:40px;
            left:30%;
            background-color:#0C9;
            color:#FFF;
            border-radius:50px;
            text-align:center;
            box-shadow: 2px 2px 3px #999;
}

#roundbutton2{
    position:fixed; 
           width:60px;
           height:60px;
           bottom:40px;
           left:50%;
           background-color:#0C9;
           color:#FFF;
           border-radius:50px;
           text-align:center;
           box-shadow: 2px 2px 3px #999;
}

#roundbutton3{
    position:fixed; 
           width:60px;
           height:60px;
           bottom:40px;
           left:70%; 
           background-color:#0C9;
           color:#FFF;
           border-radius:50px;
           text-align:center;
           box-shadow: 2px 2px 3px #999;
}

#previewbutton{
    position:fixed; 
           width:60px;
           height:60px;
           bottom: 2em;
           right:2em;
           background-color:#0C9;
           color:#FFF;
           border-radius:50px;
           text-align:center;
           box-shadow: 2px 2px 3px #999;
}


/* this begining of radio custom for inspection */
.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
  .tg  {border-collapse:collapse;border-spacing:0;}
  .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
  .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
  .tg .tg-6nuq{font-weight:bold;font-size:12px;background-color:#15596d;color:#ffffff;border-color:inherit;text-align:center;vertical-align:top}
  .tg .tg-ryke{font-weight:bold;font-size:16px;background-color:#15596d;color:#ffffff;border-color:inherit;text-align:center;vertical-align:top}
  .tg .tg-77x5{font-weight:bold;font-size:12px;border-color:inherit;text-align:left;vertical-align:top}
  .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark, .checkmarkfair, .checkmarkpoor {
  position: absolute;
  top: -6px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ebeaea;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #8bc34a;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
   top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* -------------------yellow */

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmarkfair {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmarkfair {
  background-color: #ff9800;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkfair:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmarkfair:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmarkfair:after {
   top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* -------------------red */

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmarkpoor {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmarkpoor {
  background-color: #f44336;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkpoor:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmarkpoor:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmarkpoor:after {
   top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
/* this is end of custom radio for inspection */

#searchMakeInputVehDet_listbox, #searchMakeInputVeh_listbox, #searchMakeInput_listbox, #inputVIN_listbox{
    color: white;
    /* width: 8em; */
    background-color: #4e578e;
    list-style-type: none;
    padding: 0px;
}
#searchMakeInputVehDet_listbox li, #searchMakeInputVeh_listbox li, #searchMakeInput_listbox li, #inputVIN_listbox li{ 
    border-bottom: 1px solid black;
    margin-top: 10px;
    padding-left: 20px;
}
#searchModelInput_listbox{
    color: white;
    width: 8em;
    background-color: #4e578e;
    list-style-type: none;
    padding: 0px;
}

#searchModelInput_listbox li { 
    border-bottom: 1px solid black;
    margin-top: 10px;
    padding-left: 20px;
}

.searchItemWizard {
    padding: 10px;
    font-size: 12px;
    border: 1px solid grey;
    /* float: left; */
    /* width: 80%; */
    background: #f1f1f1;
}

.searchSelectWizard {
    float: left;
    width: 20%;
    padding: 10px;
    background: #2196F3;
    color: white;
    font-size: 12px;
    border: 1px solid grey;
    border-left: none;
    cursor: pointer;
}

  

#floatButton{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

.my-float{
	margin-top:22px;
}




 .km-arrow-e06d:after,
    .km-arrow-e06d:before
    {
        content: "\e06d";
    }
 .km-arrow-e0e6:after,
    .km-arrow-e06d:before
    {
        content: "\e0e6";
    }
.km-arrow-e06e:after,
    .km-arrow-e06d:before
    {
        content: "\e06e";
    }
.km-arrow-e200:after,
    .km-arrow-e06d:before
    {
        content: "\e200";
        margin-top: 11px;
        font-size: 21px;
    }



/* settings */
.km-arrow-e20f:after,
.km-arrow-e20f:before
{
    content: "\e20f";
}
    
/* arrow - down */
.km-arrow-e012:after,
    .km-arrow-e012:before
    {
        content: "\e012";
    }

/* sync */
.km-arrow-e0f6:after,
    .km-arrow-e0f6:before
    {
        content: "\e0f6";
        color: green;
    }

/* save */
.km-arrow-e096:after,
    .km-arrow-e096:before
    {
        content: "\e096";
        margin-top: 11px;
        font-size: 21px;
    }

/* preview */
.km-arrow-e09b:after,
    .km-arrow-e09b:before
    {
        content: "\e09b";
        margin-top: 11px;
        font-size: 21px;
    }
/* link */
/* .km-arrow-e073:after,
    .km-arrow-e073:before
    {
        content: "\e073";
        margin-top: 11px;
        font-size: 21px;
    } */

/* link */  
.km-arrow-e073:after,
.km-arrow-e073:before
    {
        content: "\e073";
    }

/* share */
.km-arrow-e0df:after,
    .km-arrow-e0df:before
    {
        content: "\e0df";
        margin-top: 11px;
        font-size: 21px;
    }

/* email */
.km-arrow-e099:after,
    .km-arrow-e099:before
    {
        content: "\e099";
        margin-top: 11px;
        font-size: 21px;
    }
/* print */
.km-arrow-e07e:after,
    .km-arrow-e07e:before
    {
        content: "\e07e";
        margin-top: 11px;
        font-size: 21px;
    }
/* SMS */
.km-arrow-e092:after,
    .km-arrow-e092:before
    {
        content: "\e092";
        margin-top: 11px;
        font-size: 21px;
    }
/* barcode */
.km-arrow-ebarcode:after,
    .km-arrow-ebarcode:before
    {
        content: "\e104";
    }
/* gallery 2nd */
.km-arrow-e07c:after,
    .km-arrow-e07c:before
    {
        content: "\e07c";
    }
/* decode 2nd */
.km-arrow-e08f:after,
    .km-arrow-e08f:before
    {
        content: "\e08f";
    }

/* X */
.km-arrow-e038:after,
    .km-arrow-e038:before
    {
        content: "\e038";
    }

/* X */
.km-arrow-e031:after,
    .km-arrow-e031:before
    {
        content: "\e031";
    }

/* + */
.km-arrow-e032:after,
    .km-arrow-e032:before
    {
        content: "\e032";
    }

/* checked */
.km-arrow-e037:after,
    .km-arrow-e037:before
    {
        content: "\e037";
    }

    /* MORE dots */
.km-arrow-e0ab:after,
.km-arrow-e0ab:before
{
    content: "\e0ab";
}

/* downloads */
.km-arrow-e096:after,
.km-arrow-e096:before
{
    content: "\e096";
}

/* list view */
.km-arrow-e077:after,
.km-arrow-e077:before
{
    content: "\e077";
}


   
    
#emailFormInit {
    content: '';
    position: absolute;
    top: 50%;
    right: .75em;
    display: block;
    width: 1em;
    height: 1em;
    margin-top: -.5em;
    background-color: transparent;
    background-position: 0 0;
    background-repeat: no-repeat;
}
#contactsButton {
    width: 53px;
    height: 53px;
    background-image: url(pics/contacts.png);
    background-repeat: no-repeat;
    background-size: 52px 52px; 
}
#calendarButton {
    width: 53px;
    height: 53px;
    background-image: url(pics/calendar.png);
    background-repeat: no-repeat;
    background-size: 52px 52px; 
}
#scanbtn {
    width: 28px;
    height: 35px;
    background-image: url(pics/scan2.png);
    background-repeat: no-repeat;
    background-size: 50px 50px; 
}
#scanbtn2 {
    width: 22px;
    height: 33px;
    background-image: url(pics/scan2.png);
    background-repeat: no-repeat;
    background-size: 45px 45px; 
}
#outer
{
    width:100%;
    text-align: center;
    
}
/*
	*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*/
.pulse-button {

    position: relative;
    width: 150px;
    height: 150px;
    border: none;
    box-shadow: 0 0 0 0 rgb(231, 205, 190);
    border-radius: 50%;
    background-color: #d4986f;
    /* background-image: url(startButton2.png); */
    /* background-image: url(estim2/dates128.png); */
    background-image: url(home/BOOKING128.png);
    background-size:cover;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  }
  .pulse-button:hover 
{
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

#wizard .km-content  {
    height: 100%;
    overflow: hidden;
  }
  
   #wizard .km-content  {
    /* background: -webkit-linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), -webkit-linear-gradient(315deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), -webkit-linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), -webkit-linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%); */
    /* background: linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #09f505 100%, rgba(9, 245, 5, 0) 70%); */
    background: linear-gradient(45deg, #6183a0 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #147177 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #5da989 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #0a6b6b 100%, rgba(9, 245, 5, 0) 70%)
  }


#HomeOld .km-content  {
  height: 100%;
  overflow: hidden;
}

 #HomeOld .km-content  {
  background: -webkit-linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), -webkit-linear-gradient(315deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), -webkit-linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), -webkit-linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
  background: linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
}

#HomeOld .absolute-center, .menuCenter, .menuCenter .btnCenter .fa,  .menuCenter .btnCenter.trigger .line {
    
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}

#HomeOld .km-content .menuCenter {
  width: 5em;
  height: 5em;
}
#HomeOld .km-content .menuCenter .btnCenter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
 /* background: rgba(255, 255, 255, 0.15);*/
  opacity: 0;
  z-index: -10;
  cursor: pointer;
  -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
          transition: opacity 1s, z-index 0.3s, transform 1s;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
#HomeOld .menuCenter .btnCenter .fa {
     border:0;
  font-size: 3em;
  -webkit-transition: color 0.3s;
          transition: color 0.3s;
}
    
/*Home .menuCenter .btnCenter:hover .fa {
  color: rgba(255, 255, 255, 0.7);
}*/

#HomeOld .menuCenter .btnCenter.trigger {
  opacity: 1;
  z-index: 100;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
   
#HomeOld .menuCenter .rotater {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
#HomeOld .menuCenter.active .btnCenter-icon {
  opacity: 1;
  z-index: 50;
}
#HomeOld .menuCenter.active .trigger .line {
  height: 0px;
  top: 45%;
}
#HomeOld .menuCenter.active .trigger .line:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 110%;
}
#HomeOld .menuCenter.active .trigger .line:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 110%;
}

#HomeOld .rotater:nth-child(1) {
  -webkit-transform: rotate(-22.5deg);
      -ms-transform: rotate(-22.5deg);
          transform: rotate(-22.5deg);
}

#HomeOld .menuCenter.active .rotater:nth-child(1) .btnCenter-icon {
  
  -webkit-transform: translateY(-8.6em) rotate(22.5deg);
      -ms-transform: translateY(-8.6em) rotate(22.5deg);
          transform: translateY(-8.6em) rotate(22.5deg);
}

#HomeOld .rotater:nth-child(2) {
  -webkit-transform: rotate(22.5deg);
      -ms-transform: rotate(22.5deg);
          transform: rotate(22.5deg);
}

#HomeOld .menuCenter.active .rotater:nth-child(2) .btnCenter-icon {
  -webkit-transform: translateY(-8.6em) rotate(-22.5deg);
      -ms-transform: translateY(-8.6em) rotate(-22.5deg);
          transform: translateY(-8.6em) rotate(-22.5deg);
}

#HomeOld .rotater:nth-child(3) {
  -webkit-transform: rotate(67.5deg);
      -ms-transform: rotate(67.5deg);
          transform: rotate(67.5deg);
}

#HomeOld .menuCenter.active .rotater:nth-child(3) .btnCenter-icon {
  -webkit-transform: translateY(-8.6em) rotate(-67.5deg);
      -ms-transform: translateY(-8.6em) rotate(-67.5deg);
          transform: translateY(-8.6em) rotate(-67.5deg);
}

#HomeOld .rotater:nth-child(4) {
  -webkit-transform: rotate(112.5deg);
      -ms-transform: rotate(112.5deg);
          transform: rotate(112.5deg);
}

#HomeOld .menuCenter.active .rotater:nth-child(4) .btnCenter-icon {
  -webkit-transform: translateY(-8.6em) rotate(-112.5deg);
      -ms-transform: translateY(-8.6em) rotate(-112.5deg);
          transform: translateY(-8.6em) rotate(-112.5deg);
}

#HomeOld .rotater:nth-child(5) {
  -webkit-transform: rotate(157.5deg);
      -ms-transform: rotate(157.5deg);
          transform: rotate(157.5deg);
}

#HomeOld .menuCenter.active .rotater:nth-child(5) .btnCenter-icon {
  -webkit-transform: translateY(-8.6em) rotate(-157.5deg);
      -ms-transform: translateY(-8.6em) rotate(-157.5deg);
          transform: translateY(-8.6em) rotate(-157.5deg);
}

#HomeOld .rotater:nth-child(6) {
  -webkit-transform: rotate(202.5deg);
      -ms-transform: rotate(202.5deg);
          transform: rotate(202.5deg);
}

#HomeOld .menuCenter.active .rotater:nth-child(6) .btnCenter-icon {
  -webkit-transform: translateY(-8.6em) rotate(-202.5deg);
      -ms-transform: translateY(-8.6em) rotate(-202.5deg);
          transform: translateY(-8.6em) rotate(-202.5deg);
}


#HomeOld .rotater:nth-child(7) {
  -webkit-transform: rotate(247.5deg);
      -ms-transform: rotate(247.5deg);
          transform: rotate(247.5deg);
}

#HomeOld .menuCenter.active .rotater:nth-child(7) .btnCenter-icon {
  -webkit-transform: translateY(-8.6em) rotate(-247.5deg);
      -ms-transform: translateY(-8.6em) rotate(-247.5deg);
          transform: translateY(-8.6em) rotate(-247.5deg);
}
#HomeOld .rotater:nth-child(8) {
  -webkit-transform: rotate(292.5deg);
      -ms-transform: rotate(292.5deg);
          transform: rotate(292.5deg);
}


#HomeOld .menuCenter.active .rotater:nth-child(8) .btnCenter-icon {
  -webkit-transform: translateY(-8.6em) rotate(-292.5deg);
      -ms-transform: translateY(-8.6em) rotate(-292.5deg);
          transform: translateY(-8.6em) rotate(-292.5deg);
}

#HomeOld  .km-button   {
     padding:.1em .1em .1em
 }




/*------------------------------------------------------*/

.km-ios7 .k-list,
.km-ios7 .k-slider,
.km-ios7 .km-widget
{
    color: #400673;
}

/*center button*/
.center-logo{
     display: block;
	text-align:center; 
}
.logo-button{
    border: 1px solid white;
    /* width: 160px; */
	height:120px;
}

.center-button-address{
     display: block;
     width:auto;
	text-align:center; 
}
/*materials and services lists*/
.infol{
      padding-top:.1em;
      padding-left:.3em;
      padding-right:0.5em;
      display:inline-block;
       width: auto;
       height:3em;
  }

     .namel {
          display:block;
         margin-top: 0.1em;
         margin-left:0.5em;
        font-size: 0.8em;
         font-weight: bold;
    }
      .detaill {
          display:block;
          margin-top: 0.5em;
		margin-left:0.5em;
        font-size: 0.7em;
          font-style:italic;
    }
/*center 2 buttons*/
.center-buttons{
     display: block;
     width:auto;
    height:7em;
}
#addButton{
    float:left;
    margin-top:1em;
    margin-left: 1em;
	display: inline-block;
	border: 1px solid green;
    border-radius: 1em;
    
}
#selectButton{
        float:right;
        margin-top:1em;
   margin-right: 1em;
	display: inline-block;
	border: 1px solid blue;
    border-radius: 2em;
}
/*center button*/
.center-button{
     display: block;
     width:auto;
	text-align:center; 
    height:4em;
}
.save-button{
    margin-top:1em;
    width: 10em; 
}

.footerTotal{
    position:relative;
        margin-top:3em;

    display: block;
  	text-align:center; 
    background-color:#EFEFF4;
    width:99%; 
    height:3em; 
    font-size:1.2em; 
    color:black;
}

/*customers and estimates listviews*/ 
.employee-image {
        width: 4em;
        height: 4em;
        margin: 0;
        border: 1px solid rgba(0,0,0,.2);
        -webkit-border-radius: 4em;
        border-radius: 4em;
        display: inline-block;
        -webkit-background-size: auto 100%;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-transform: translatez(0);
        vertical-align: middle;
    }


    .image-cropper {
        width: 100px;
        height: 100px;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        margin: auto;
    }
    .profile-pic {
      display: inline;
      margin: 0 auto;
      margin-left: -25%; 
      height: 100%;
      width: auto;
    }


.ebay-image {
        width: 7em;
        height: 7em;
        margin: 0;
        border: 1px solid rgba(0,0,0,.2);
        display: inline-block;
        -webkit-background-size: auto 100%;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center center;
        vertical-align: middle;
        color:grey;
    }
#save-button-right {
    color: #fff;
    background-color: #0c9;
    padding: 6px;
    border-radius: 10px;
}

.save-button-green {
    color: #fff;
    background-color: #0c9;
    padding: 6px;
    border-radius: 10px;
}

.error-image {
        width: 4em;
        height: 4em;
        margin: 0;
        -webkit-border-radius: 4em;
        display: inline-block;
        -webkit-background-size: auto 100%;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-transform: translatez(0);
        vertical-align: middle;
    } 
.estimate-image {
        width: 3.5em;
        height: 4em;
        margin: 0;
       
        display: inline-block;
        -webkit-background-size: auto 100%;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-transform: translatez(0);
        vertical-align: middle;
    }

  .info{
      position:absolute;
      padding-top:.1em;
      padding-left:.3em;
      padding-right:0.5em;
      display:inline-block;
       width: auto;
       height:4em;
  }

     .name {
          display:block;
         margin-top: 0.1em;
         margin-left:0.5em;
        font-size: 0.8em;
         font-weight: bold;
    }
      .detail {
          display:block;
		margin-left:0.5em;
        font-size: 0.7em;
          font-style:italic;
    }
 .detail2 {
          display:block;
         margin-top: -0.5em;
     padding-top:-0.5em;
		margin-left:0.5em;
        font-size: 0.6em;
          font-style:italic;
    }
    .notif{
        display:inline-block;
		width: auto;
       height:4em;
       float:right;
        padding-right:1em;
        
    }
.estimStatus{
    display:block;
        border: 1px solid white;
        border-radius: .5em;
         -webkit-border-radius: .5em;
        background-color: orange;
         margin-top: 0.1em;
        font-size: 0.8em;
		width: 7em;
        text-align:center;
}

.statusWrapper{
    background-color: #99a8ff;
    padding: 2px;
    color: black;
    border-radius: 3px;
}
    .total{
		 display:block;
        border: 1px solid white;
        border-radius: .5em;
         -webkit-border-radius: .5em;
        background-color: rgba(112, 178, 250, 0.45);
         margin-top: .7em;
        font-size: 0.8em;
		width: 7em;
        text-align:center;
    }

    .km-android #customersList .parent:after {
        display: inline-block;
        border-color: #ffffff;
    }
    .km-wp #customersList .parent:after {
        display: inline-block;
        border-color: #cccccc;
    }



/*table estimate format*/
.estTable { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
.estTable tr:nth-of-type(odd) { 
  background: #f1d8b1; 
}
.estTable tr:nth-of-type(even) { 
  background: #f1d8b1; 
}
.estTable th { 
  background: #f8c779; 
  color: black; 
  font-weight: bold; 
}
.estTable td, th { 
  padding: 6px; 
  border: 1px solid #A6CAEF; 
  text-align: left; 
}
.estTable tfoot { 
  background: #caa160; 
  color: black; 
  font-weight: bold; 
}


/*table wizard format*/
.TableWizard { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 10px;
    background: white; 
  }
  .TableWizard td, th { 
    padding: 6px; 
    border: 1px solid #A6CAEF; 
    text-align: left; 
  }

.cf {
  zoom: 1;
}

.cf:before,
.cf:after {
  content: '';
  display: table;
}

.cf:after {
  clear: both;
}


    .inboxList
    {
        font-size: .8em;
    }

    .inboxList p,
    .inboxList h3
    {
        color: #777;
    }

    .inboxList h3.time
    {
        color: #369;
        float: left;
        margin-right: 10px;
    }
/* This will style any <img> element in .parent div */
.parentListview img {
   height: 3em;
   width: 3em;
    vertical-align: middle;
    margin-right: 1em;
    margin-left: 1em;
}
.parentListview h2 {
        display: inline-block;
        margin: .5em;
        font-size: 1.1em;
    }
.backGround {
  background-color: #999999;

}

.signatureparent {
  color:darkblue;
  background-color:lightgrey;
  padding-top: 30px;
  padding-left: 2px;
  padding-right: 2px;  
    
}

.signature {
    background: white;
  padding: 0 0 0 0; 
  margin: 0 0 0 0;
  border: 2px dotted #000;
  width: 100%;
    
}

.sigWrapper {
    position: relative;
 
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .signature-pad {
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height:300px;
  }


.stretchBtb{
    width: 47%;
}
.stretchBtbFull{
    width: 99%;
}

.km-root .km-android .km-view {
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
}
 
.km-android .km-view-title
{
 visibility: visible;
}
 



::-webkit-input-placeholder {
    color: #b6c5c6;
}

:-moz-placeholder {
    color: #b6c5c6;
}

::-moz-placeholder {
    color: #b6c5c6;
}

:-ms-input-placeholder {  
    color: #b6c5c6;
}

#friendsApp.km-flat form .km-list > li {
    padding: .7em .7em .5em;
    border-color: #eaeced;
}

#friendsApp.km-flat form .km-listinset > li:first-child,
#friendsApp.km-flat form .km-listgroupinset .km-list > li:first-child {
    border-width: 0 0 1px;
    border-color: #eaeced;
    -webkit-border-radius: 2px 2px 0 0;
    -moz-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;
}

#friendsApp.km-flat form .km-listinset > li:last-child,
#friendsApp.km-flat form .km-listgroupinset .km-list > li:last-child {
    border: 0 none;
    -webkit-border-radius: 0 0 2px 2px;
    -moz-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
}

#friendsApp.km-flat .km-list input[type="text"]:not(.k-input),
#friendsApp.km-flat .km-list input[type="password"],
#friendsApp.km-flat .km-list input[type="email"],
#friendsApp.km-flat .km-list input[type="date"],
#friendsApp.km-flat textarea,
#friendsApp.km-flat select {
    position: static;
    width: 100%;
    height: 30px;
    font-size: 1rem;
}

#friendsApp.km-flat select {
    padding: .4em .2em;
}

/* Buttons */

#friendsApp .btn {
    position: relative;
    margin: 0 -1px;
    padding: .6em 0;
    border: 0 none;
    font-size: 1.2rem;
    background-color: #363558;
}
#friendsApp .btn2 {
    position: relative;
    margin: 0 -1px;
    padding: .6em 0;
    border: 0 none;
    font-size: 1.2rem;
    background-color: #544173;
}
#friendsApp .btn3 {
    position: relative;
    margin: 0 -1px;
    padding: .6em 0;
    border: 0 none;
    font-size: 1.2rem;
    background-color: #65d29b;
}
#friendsApp .infoBar {
    position: relative;
    margin: 0 -1px;
    padding-bottom: .6em;
    border: 0 none;
    font-size: 0.9rem;
    background-color: grey;
}
#friendsApp .btn4 {
    position: relative;
    margin: 0 -1px;
    padding: .6em 0;
    border: 0 none;
    font-size: 1.2rem;
    background-color: #d17742;
}

#friendsApp .disabled .btn {
    opacity: .35;
}

#friendsApp .btn-login,
#friendsApp .signup-view .btn-signup {
    background-color: #1bbc9b;
}

#friendsApp .signup-view .btn-signup,
#friendsApp .btn-delete {
    display: block;
    text-align: center;
}

#friendsApp .btn-delete {
    background-color: #e84c3d;
}

#friendsApp .oauth-item1 .btn {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#friendsApp .oauth-item2 .btn2 {
    background-position: 50% 50%;
    
    background-repeat: no-repeat;
}
#friendsApp .oauth-item3 .btn3 {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#friendsApp .oauth-item3 .infoBar {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#friendsApp .oauth-item2 .btn4 {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}


#friendsApp .btn-my-profile{
    background-image: url(home/profile.png);
}

#friendsApp .btn-my-list-services{
    background-image: url(home/my-list-services.png);
}

#friendsApp .btn-customers {
    
    background-image: url(home/clients.png);
    background-size:64px, 64px;
}
#friendsApp .btn-estimates {
    background-image: url(home/estimates128.png);
      background-size:64px, 64px;
}
#friendsApp .btn-invoices {
    background-image: url(home/invoices128.png);
    background-size:64px, 64px;
}
#friendsApp .btn-services {
    background-image: url(home/services128.png);
    background-size:72px, 72px;
    
}
#friendsApp .btn-parts {
    background-image: url(home/parts128.png);
    background-size:72px, 72px;    
}
#friendsApp .btn-help {
    background-image: url(home/help.png);
}
#friendsApp .btn-about {
    background-image: url(home/about.png);
}



#friendsApp .km-header .nav-button {
    display: inline-block;
    width: 2em;
    height: 2em;
    margin: 0;
    padding: 0;
    border: 0 none;
    background-color: transparent;
    background-position: 0 50%;
    background-repeat: no-repeat;
}

#friendsApp .km-header .nav-button-back {
    background-image: url(images/icon-arrow_left.png);
    background-position: .65em 50%;
}

#friendsApp .km-header .nav-button-add {
    background-image: url(images/icon-add.png);
}

#friendsApp .km-header .nav-button-cancel,
#friendsApp .km-header .nav-button-post {
    width: auto;
    height: 2.5em;
    font-size: .85rem;
    line-height: 2.5em;
}

/* App Header */

#friendsApp.km-flat.km-on-ios.km-black-translucent-status-bar .km-header {
    min-height: 20px;
    background-color: #2d3e50;
}

#friendsApp.km-flat .km-header .km-navbar {
    min-height: 3.15em;
}

#friendsApp.km-flat.km-on-ios.km-black-translucent-status-bar .km-header .km-navbar {
    min-height: 4.5em;
}

#friendsApp.km-flat .km-header .km-view-title {
    margin-top: .4em;
    font-size: 1rem;
}

#friendsApp.km-flat.km-on-ios.km-black-translucent-status-bar .km-header .km-view-title {
  margin-top: .4em;
}

/* App Footer */

#friendsApp .welcome-scrn .km-footer {
    color: #fff;
    text-align: center;
    background-color: transparent;
}

#friendsApp .welcome-scrn .km-footer p {
    font-size: .75rem;
}

/* Welcome screen */

#friendsApp .app-logo,
#friendsApp .app-name {
    margin-top: 1.5em;
}

#friendsApp .app-logo {
    width: 247px;
    height: 32px;
    background: transparent url(images/logo-telerik_devcloud.png) no-repeat 0 0;
}

#friendsApp .app-name {
    margin-bottom: 1.5em;
}

#friendsApp .app-name small {
    display: block;
    font-weight: 400;
    font-size: 1.15rem;
}

#login-form .username,
#login-form .password {
    position: relative;
}

#login-form .username:before,
#login-form .password:before {
    content: '';
    position: absolute;
    top: 50%;
    right: .75em;
    display: block;
    width: 1em;
    height: 1em;
    margin-top: -.5em;
    background-color: transparent;
    background-position: 0 0;
    background-repeat: no-repeat;
}

#login-form .username:before {
    background-image: url(images/icon-username.png);
}

#login-form .password:before {
    background-image: url(images/icon-password.png);
}

#friendsApp .welcome-scrn .group-wrp {
    margin: 1em 1em 0;
    padding: 0;
    text-align: center;
    list-style-type: none;
    
 
}

#friendsApp .welcome-scrn .group-wrp li {
  margin: .3em 0 0;
}

#friendsApp .welcome-scrn .group-wrp .btn,
#friendsApp .welcome-scrn .group-wrp .btn2 ,
#friendsApp .welcome-scrn .group-wrp .btn3 ,
#friendsApp .welcome-scrn .group-wrp .btn4,
#friendsApp .welcome-scrn .group-wrp .infoBar {
    display: block;
}

#friendsApp .welcome-scrn .group-wrp .oauth {
    margin-right: -1%;
    margin-left: -1%;
}

#friendsApp .welcome-scrn .group-wrp .oauth .oauth-item1 {
    float: left;
    width: 31.3%;
    margin: 0 1%;
    }
#friendsApp .welcome-scrn .group-wrp .oauth .oauth-item2 {
    float: left;
    width: 48%;
    margin: 0 1%;
}
#friendsApp .welcome-scrn .group-wrp .oauth .oauth-item3 {
    float: left;
    width: 98%;
    margin: 0 1%;
}

#friendsApp .welcome-scrn .group-wrp .oauth .btn {    
    height: 7em;
    color:white;
    overflow: hidden;
}
#friendsApp .welcome-scrn .group-wrp .oauth .btn2 {
    height: 8em;
    color:white;
    overflow: hidden;
}
#friendsApp .welcome-scrn .group-wrp .oauth .btn3 {
    height: 3em;
   color:white;
    overflow: hidden;
}
#friendsApp .welcome-scrn .group-wrp .oauth .infoBar {
    height: auto;
   color:white;

    
}
#friendsApp .welcome-scrn .group-wrp .oauth .btn4 {
    height: 7em;
   color:white;
    overflow: hidden;
}
#friendsApp .welcome-scrn .group-wrp .oauth .btn span,
#friendsApp .welcome-scrn .group-wrp .btn-signup span {
    font-weight: 500;
    font-size: 1rem;
}

#friendsApp .welcome-scrn .group-wrp .btn-signup {
    border: 0 none;
    background-color: transparent;
}

/* Signup */

#friendsApp .signup-view .select-wrp {
    -webkit-border-radius: 0 0 2px 2px;
    -moz-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
}

#friendsApp.km-flat .signup-view .km-listinset > li:last-child {
    margin: .5em 0 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

#friendsApp .txtarea-wrp textarea {
    float: none;
    height: 5.5em;
    resize: none;
}

#friendsApp .signup-view .signup-btn-wrp {
    margin: 0 1em;
}

#friendsApp .signup-view .select-wrp select {
    color: #b6c5c6;
}

#friendsApp .signup-view .select-wrp option:first-child {
    color: #b6c5c6;
}

/* Activities */

#friendsApp .activities-view .km-content,
#friendsApp .activity-view .km-content,
#friendsApp .add-activity-view .km-content,
#friendsApp .activities-view .km-listview {
    background-color: #fff;
}

#friendsApp .activities-view .km-list > li {
    padding: .75em 0;
    border-width: 0 0 1px;
    border-color: #eaeced;
    color: #34495e;
    background-color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    overflow: visible;
}

#friendsApp .activities-view .km-list > li:first-child {
    padding-top: 0;
}

#friendsApp .user-avatar {
    float: left;
    width: 50px;
}

#friendsApp .user-avatar img {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

#friendsApp .activity-content {
    position: relative;
    padding-left: 5em;
    font-size: .85rem;
}

#friendsApp .activity-content .person-name,
#friendsApp .add-activity-view .person-name,
#friendsApp .activity-content .time-span {
    font-weight: 600;
}

#friendsApp .add-activity-view .person-name,
#friendsApp .activity-content .person-name {
    display: block;
    margin: 0 0 .5em;
    color: #3598db;
    font-size: 1.1rem;
}

#friendsApp .person-name {
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#friendsApp .activity-content .time-span {
    position: absolute;
    top: 5px;
    right: 0;
    color: #6c7884;
    font-size: .7rem;
    text-transform: uppercase;
}

#friendsApp .user-share-txt {
    color: #34495e;
}

#friendsApp .activity-view .person-name,
#friendsApp .add-activity-view .person-name {
    margin: .85em 0 1em;
}

#friendsApp .add-activity-view .person-name {
    padding-left: .75em;
}

#friendsApp .activity-view .picture {
    margin: 1em 0 0;
}

#friendsApp .user-share {
    position: relative;
    margin: 2.35em 0 0;
}

#friendsApp .user-share:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
}

#friendsApp .user-share:before {
    top: -10px;
    left: 16px;
    border-right: 9px solid transparent;
    border-bottom: 10px solid #f5f7f8;
    border-left: 9px solid transparent;    
}

#friendsApp .user-share textarea {
    float: none;
    height: 13.5em;
    min-height: 3em;
    margin: 0;
    padding: .75em 1em;
    background-color: #f5f7f8;
    resize: none;
}

#friendsApp .activity-view .km-footer {
    padding: 0 1em 1em;
    background: #fff none;
}

#friendsApp .add-activity-view .km-leftitem {
    left: 1em;
}

#friendsApp .add-activity-view .km-rightitem {
    right: 1em;
}

#friendsApp.km-black-translucent-status-bar .km-navbar .km-leftitem,
#friendsApp.km-black-translucent-status-bar .km-navbar .km-rightitem {
    margin-top: .4em;
}

#friendsApp .k-invalid-msg {
  display: none;
  margin: 1rem 0 0;
  padding: 0 1rem;
  color: #e84c3d;
}

/* Retina Images */

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 144dppx) { 
    
    #friendsApp .app-logo {
        background-image: url(images/logo-telerik_devcloud@2x.png);
        background-size: 247px 32px;
    }
    
    #login-form .username:before {
        background-image: url(images/icon-username@2x.png);
        background-size: 12px 13px;
    }

    #login-form .password:before {
        background-image: url(images/icon-password@2x.png);
        background-size: 10px 12px;
    }
    
    #friendsApp .btn-login-fb {
        background-image: url(images/icon-facebook@2x.png);
        background-size: 11px 18px;
    }
    
    #friendsApp .btn-login-google {
        background-image: url(images/icon-google@2x.png);
        background-size: 20px 20px;
    }
    
    #friendsApp .btn-login-liveid {
        background-image: url(images/icon-liveid@2x.png);
        background-size: 22px 20px;
    }

    #friendsApp .btn-login-adsf {
        background-image: url(images/icon-adsf@2x.png);
        background-size: 21px 20px;
    }
    
    #friendsApp .km-header .nav-button-back {
        background-image: url(images/icon-arrow_left@2x.png);
        background-size: 9px 20px;
    }

    #friendsApp .km-header .nav-button-add {
        background-image: url(images/icon-add@2x.png);
        background-size: 23px 23px;
    }
}