/* Empty. Add your own CSS if you like */
/** Styling for the username field **/
label.item.has-error {  
  /*border-bottom: 2px solid red;*/
}

/** Styling for the password field when an error exists**/
label.item.has-error-lr {  
  border-left: 2px solid red;
  border-right: 2px solid red;
}

/** Styling for the password field when an error has been resolved**/
label.item.valid-lr {  
  border-left: 2px solid green;
  border-right: 2px solid green;
}

/** Styling for the error text and container **/
.form-errors {
    margin: 5px 0;
    text-align: right;
     font-size: 90%;
}
.form-error {
  padding: 2px 0 2px 16px;
  color: rgb(255, 105, 0);
  font-size: 90%;
}

label.bold {
    font-weight: bold;
}

body {
  /*cursor: url('http://ionicframework.com/img/finger.png'), auto;*/
}
.slider {
  height: 100%;
}
.slider-slide {
  padding-top: 4%;
  padding-bottom: 2%;
  color: #000;
  background-color: #fff;
  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}

.slider-slide-feature {
  padding-top: 0px;
}

#logoHeader {
 margin-top: 40px;
}

#list {
  width: 210px;
  margin: 30px auto;
  font-size: 20px;
}
#list ol {
  margin-top: 30px;
}
#list ol li {
  text-align: left;
  list-style: decimal;
  margin: 10px 0px;
}

.center-content {
  display: table !important;
  width: 100% !important;
  height: 100% !important;
  top: 20%;
}
.center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.center-header {
  display: table !important;
  width: 100% !important;
  /*height: 100% !important;*/
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  top: 10%;
  /*margin: 20px 0px;*/
}

.center-item {
  display: table !important;
  width: 100% !important;
  display: table-cell;
  /*vertical-align: middle;*/
  text-align: center;
  /*top: 10%;*/
  margin: 10px 0px 5px 0px;
}

.center-item-nomargin {
  display: table !important;
  width: 100% !important;
  display: table-cell;
  /*vertical-align: middle;*/
  text-align: center;
  /*top: 10%;*/
}
.center-gridcell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  margin: 10px 0px 10px 0px;
}
.center-subitem {
      margin: 5px 0px 10px 0px;
      color: #808080
}
.center-header-color {
        color: rgb(253, 79, 0);
}
.button.orange {
  background: rgb(253, 79, 0);
}
.title-image {
    margin-top: 6px;
    height: 29px;
}

/* numbered buttons */
#status-buttons                 {  }
/*#status-buttons a               { color:#FFF; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; }
#status-buttons a:hover         { text-decoration:none; }*/

/* we will style the span as the circled number */
/*#status-buttons span { color: rgb(253, 79, 0); display:inline-block; height:30px; margin:10px 10px 0px; padding-top:5px; width:30px; 
    border-radius:50%; border-color: rgb(253, 79, 0);border-width: 1px;border-style: solid; text-align:center;margin-right:10px;}*/

.stepCircle {color: rgb(253, 79, 0); display:inline-block; height:30px; margin:10px 10px 0px; padding-top:3px; width:30px; 
    border-radius:50%; border-color: rgb(253, 79, 0);border-width: 1px;border-style: dotted; text-align:center;margin-right:10px;}

.stepCircleCompleted {
    border-style: solid;
}
.stepCircleActive {
    background:rgb(253, 79, 0);
    color: white;
}

.yesNoCircle {color: rgb(253, 79, 0); display:inline-block; height:48px;  width:48px; margin-right: 35px; margin-left: 35px;
  border-radius:50%; border-color: rgb(253, 79, 0);border-width: 1px;border-style: solid; text-align:center;}

.yesNoCircleHidden { display:inline-block; height:48px;  width:48px; margin-right: 35px; margin-left: 35px;
    border-radius:50%; border-width: 0px;border-style: none; text-align:center;}  

.stepCircleMerginTop {
    margin-top: 20px;
}
/* active buttons turn light green-blue*/
/*#status-buttons a.active span   { background:#ED652E; }*/

.button.button-dark.button-outline {
  border-color: rgb(253, 79, 0);
  background: rgb(253, 79, 0);
  color: white;
}
.button.button-positive.button-outline {
  border-color: rgb(253, 79, 0);
  background: transparent;
  color: rgb(253, 79, 0);
}
.button.button-positive.button-clear {
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: rgb(253, 79, 0);
}

.toggle input:checked + .track {
  border-color: rgb(253, 79, 0);
  background-color: rgb(253, 79, 0);
}

.paddingIntroButton {
    padding: 60px;
}
.cc-color-orange{ color: rgb(253, 79, 0);}
.cc-color-orange:hover{
  color: rgb(253, 79, 0) !important;
}
.cc-color-requiredfield{ color: rgb(255, 0, 0);}

.tabs .tab-item .icon.promotion {
  background-repeat: no-repeat;
  background-position: center;
  height: 70%;
  background-image: url('/img/prmotions-24-32.png');
  /*background-size:contain;*/
 -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
}

.tabs .tab-item .icon.promotion-o {
  background-repeat: no-repeat;
  background-position: center;
  height: 70%;
  background-image: url('/img/prmotions-24-32-O.png');
    /*background-size: 24px 32px;*/
  /*background-size:contain;*/
 -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
}


.chatTimeStamp {
    font-size: x-small;
}
.messages {
	margin:0;
	padding:0;
	list-style-type:none;
}

.messages li {
	display:block;
	clear:both;
	max-width:50%;
	margin:0 0 1rem 0;
	padding:0;
}

.messages li:nth-child(even) {
	float:right;
}

.messages li:nth-child(even) img {
	float:right;
}

.messages p {
	border-radius:.75rem;
	background:#e6e5eb;
	color:#383641;
	padding:.6875rem;
	margin:0;
	font-size:.875rem;
}

.messages li:nth-child(even) p {
	background:#158ffe;
	color:#fff;
}

.messages img {
	display:block;
	max-width:65%;
	border-radius:.75rem;
}
.chat-input-message{
  background-color: #eee;
    width: 85%;
}

.message-form{
  width: 100%;
}
.bigger-icon {
    font-size: 80px;
}
.feature-desc-padding {
    padding: 2%;
}
.CarProfileCamCaption {
    width: 75%; 
    font-weight: bold; 
    text-align: left
}
.exactCenter { left: 40%; } 

button.customBiggerIcon:before {
    font-size: 50px !important;
    line-height: normal;
}
.button-icon.customBiggerIcon:before {
        font-size: 50px !important;
        line-height: normal;
}

button.icomoonBiggerIcon:before {
    font-size: 45px !important;
}
.emergency {
    background-image: url('/img/parental_control-512.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 512px;
}

.icon.customImage {
  background-repeat: no-repeat;
  background-position: center;
  height: 30%;
   width: 30%;
  background-size:contain;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.icon.customImage.blockUser {
  background-image: url('/img/block_users-128-red.png');
}
.twoButtons {
    padding-left: 30px;
}

.item {
    border-color: White
}

.messageSummaryHighlight{
    font-weight: bold
}

.spinner svg {
  /*width: 28px;
  height: 28px;*/
  stroke: rgb(253, 79, 0);
  fill: rgb(253, 79, 0);
}

.float-button {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  padding: 30px;
  font-size: 40px;
  background: $warning;
  position: fixed;
  bottom: 20px; /* Adjust to where you want it */
  right: 20px; /* Adjust to where you want it */
  z-index: 9999;
}

.float-button .height_fix {
  margin-top: 100%;
}

.float-button .content {
  position: absolute;
  left: 0;
  top: 50%;
  height: 100%;
  width: 100%;
  text-align: center;
  margin-top: -20px; /* Note, this must be half the font size */
  /*color: $light;*/
}

.platform-android .float-button {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  padding: 30px;
  font-size: 30px;
  /*background: $assertive;*/
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.platform-ios .float-button {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  padding: 30px;
  font-size: 30px;
  /*background: $assertive;*/
  position: absolute;
  bottom: 60px;
  right: 20px;
  z-index: 9999;
}

.suburb-lookup{
    font-size: 14px;
    font-weight: bold;
}

.list .item.item-accordion {
  /*line-height: 38px;*/
  padding-top: 0;
  padding-bottom: 0;
  transition: 0.09s all linear;
}
.list .item.item-accordion.ng-hide {
  line-height: 0px;
}
.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove {
  display: block !important;
}
.accordionHeader{
padding: 0px; 
height: 95px;
}

.accordionHeaderShort{
padding: 0px; 
height: 40px;
}

.list .item .item.active{
   border-color: white;
   background-color:white;
}

.avatarShortHeight{
   min-height: 0px; 
}

.myServicesConfig{
    font-size:small;
}
.myServicesTogglePadding{
    padding-top: 0px;
    padding-bottom: 0px;
}
.myServicesLabelPadding{
    padding-top: 0px;
    padding-bottom: 3px;
}

.opentextTextArea{
    color: rgb(253, 79, 0);
    width: 100%;
}

.opentextTextAreaBlack{  
  width: 100%;
}

.paddingbuttonLeftRight60{
    padding-left:60px;
    padding-right:60px;
    padding-top:0px;
    padding-bottom:0px;
}

.TnCFont{
    font-size: 90%;
}

.wrapping-list .item-content, .wrapping-list .item {
  overflow: initial;
  white-space: initial;
}

.popup-width .popup{
    width: 90%;
}

.pre-def-sel-padding{
    padding:5px;
    font-size: 14px;
}

.wrapText {
  overflow: initial;
  white-space: initial;
}

.disabledText{
    color:gray;
}
.togglePadding{
    padding: 8px 16px 11px 16px;
}
.toggleItemPadding{
    padding: 4px 16px 4px 16px;
    height: 68px;
}
.center-subheader {
  display: table !important;
  width: 100% !important;
  /*height: 100% !important;*/
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  top: 10%;
  background-color: beige;
  /*margin: 20px 0px;*/
}

.gridOdd{
    background-color:lightgray;
}
.gridEven{
    background-color:gray;
}

.smaller-font{
    font-size: 25px;
}

.font-size-14{
    font-size: 14px;
}

.info-font-italic{
    font-size: small;
    font-style: italic;
    margin-left: 16px;
}
.font-bold{
    font-weight: bold;
}

.text-align-left {
    text-align: left;
}
.slider-pager{
  padding-top:4%;
}
.shrink-list-inset{
  margin-top: 0px; 
  margin-bottom: 0px;
}

.codeOfConduct .popup { 
  /* height: 60%; */
  width: 90%; 
  background-color: rgba(255, 255, 255, 1)
}

.codeOfConduct .button { 
  border-color: rgb(253, 79, 0);
  background: transparent;
  color: rgb(253, 79, 0);
}

.textarea-border{
  border: solid 1px #ccc;
}

.link-underlined{
  text-decoration-line:underline
}

.slider-pager {            
  margin-bottom: 20px;
  }  
  .slider-pager .slider-pager-page {
  color: rgb(253, 79, 0);            
  }  

  @media only screen and (min-device-height: 812px) {
    .tabs {
      height: 60px;
    }
  
    .bar-header {
      height: 60px; /*just an example*/
   }
  
    .bar-header .title {
      line-height: 60px;
    }
    
    .has-header {
      top: 60px;
    }
    
    .title-image {
      margin-top: 15px;
      margin-bottom: 5px;
    }
  }
  
  @media only screen and (max-device-height: 812px) {
    .intro-slide-height {
      height: 725px;
      margin-bottom: 40px;      
    }
    .intro-ac-btn-margin-top {
      margin-top:30px;
    }
  }
  @media only screen and (max-device-height: 736px) {
    .intro-slide-height {
      height: 650px;
      margin-bottom: 40px;      
    }
    .intro-ac-btn-margin-top {
      margin-top:30px;
    }
  }

  @media only screen and (max-device-height: 667px) {
    .intro-slide-height {
      height: 620px;
      margin-bottom: 40px;
    }

    .intro-ac-btn-margin-top {
      margin-top:30px;
    }
  }

  @media only screen and (max-device-height: 568px) {
    .intro-slide-height {
      height: 520px;
      margin-bottom: 50px;      
    }

    .intro-ac-btn-margin-top {
      margin-top:0px;
    }
  }

  .ion-help-circled {
    color: rgb(253, 79, 0);
  }

  .mobiscroll-background {
    background-color: white; 
    font-size: smaller;
  }