/*Utilities*/
.ph-12{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.mb-0{
  margin-bottom: 0 !important;
}

.mb-6{
  margin-bottom: 6px !important;
}

.mb-12{
  margin-bottom: 12px !important;
}

.mt-12{
  margin-top: 12px;
}

.mv-12{
  margin-top: 12px;
  margin-bottom: 12px;
}

.flex-group{
  display: flex;
  align-items: center;
}

.flex-justify-content-right{
  justify-content: flex-end;
}

.flex-group-header .icon-circle-wrapper{
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  line-height: 24px;
  border: 2px solid #00ab67;
  border-radius: 50%;
  text-align: center;
  position: relative;
  top: 2px;
}

@media screen and (min-width: 768px){
  .mb-sm-24{
    margin-bottom: 24px !important;
  }
}

@media screen and (max-width: 767px){
  .flex-group-header .col-sm-8,
  .flex-group-header .col-sm-4{
    flex: 1;
  }
  
  .flex-group-header .col-sm-4{
    text-align: center;
    margin-bottom: 9px;
  }
}

@media screen and (max-width: 640px){
  .flex-group-header{
    flex-direction: column;
  }

  .flex-group-header .col-sm-8,
  .flex-group-header .col-sm-4{
    width: 100%;
  }

  .flex-group-header .col-sm-8{
    margin-bottom: 12px;
  }
}


/*UI Guideline Theme V2 - Service Components*/
.message-alert li,
.message-alert span,
.service-sub-container,
.service-main-container p,
.service-main-container a,
.service-main-container h1,
.service-main-container h2,
.service-main-container h3,
.service-main-container h4,
.service-main-container h5,
.service-main-container h6,
.service-main-container label,
#eservice-container .common-body table label {
  font-size: 14px !important;
  font-family: "Droid Arabic Kufi", "Roboto", Arial, sans-serif !important;
}

.formButtons button.round-button,
.formButtons input[type="submit"].round-button,
.formButtons input[type="button"].round-button,
.formButtons input[type="submit"].round-outline{
    border-radius: 4px !important;
    border: none !important;
    min-width: 140px !important;
    margin: 0 6px !important;
    font-family: "Droid Arabic Kufi", "Roboto", Arial, sans-serif !important;
}

.formButtons .round-button.round-cancel-outline{    
    border: 2px solid #ec3131 !important;
    color: #ec3131 !important;
    background-color: white !important;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.formButtons input[type="submit"].round-button.resend{
    color: #00ab67 !important; 
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    text-decoration: underline !important;  
}

.formButtons input[type="submit"]:disabled.round-button.resend{
    color: #999 !important;
    text-decoration: none !important;
}

.formButtons .round-button.round-outline,
.formButtons input[type="submit"].round-button.round-outline{
    background-color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.formButtons input[type="submit"].round-button.round-back-outline{    
    border: 2px solid #00ab67 !important;
    color: #00ab67 !important;
    background-color: white !important;
}

@media screen and (max-width: 767px){
    .formButtons button.round-button,
    .formButtons input[type="submit"].round-button,
    .formButtons input[type="button"].round-button,
    .formButtons input[type="submit"].round-outline{
        margin: 4px !important;
    }
}

@media screen and (max-width: 640px){
    .formButtons button.round-button,
    .formButtons input[type="submit"].round-button,
    .formButtons input[type="button"].round-button,
    .formButtons input[type="submit"].round-outline{
        margin: 4px 0 !important;
    }
}

/*Button Enhancement*/
button.round-outline-lg{
    background: #fff !important;
    font-size: 18px !important;
    color: #00AB67 !important;
    font-weight: bold !important;
    border-radius: 0 !important;
    padding: 8px 16px !important;
    height: auto !important;
    border-width: 2px !important;
    border-color: #00AB67 !important;  
    margin-bottom: 24px !important;
}

button.round-outline-lg:hover{
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

/*Error Message Enhancements*/
.message-alert span em{
  font-style: normal;
  font-weight: normal;
  display: flex;
  font-size: 14px;
  align-items: center;
}

.message-alert span em + em{
  margin-top: 4px;
}

.list-inline-validation{
  margin: 0 !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.list-inline-validation .validation-inline-success,
.list-inline-validation .validation-inline-error{
  display: flex;
  align-items: center;
}


.validation-inline-success:before,
.validation-inline-error:before{
  width: 20px;
  height: 20px;
  min-width: 20px;
  font-size: 12px;
  text-align: center;
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  border: 2px solid transparent;
  border-radius: 50%;
  line-height: 1;
  margin-top: 6px;
  margin-bottom: 6px;
}

.ltr .validation-inline-success:before,
.ltr .validation-inline-error:before{
  margin-right: 9px;
}

.rtl .validation-inline-success:before,
.rtl .validation-inline-error:before{
  margin-left: 9px;
}

.validation-inline-success:before{  
  content: '\e804';
  color: #4caf50;
  border: 2px solid #4caf50;
}

.validation-inline-error:before{  
  content: '\e808';
  color: #e51212;
  border: 2px solid #e51212;
}

.service-sub-container .service-sub-body select{
    height: auto;
    padding: 2px 6px !important;
    border-color: #bfead9 !important;    
}

.ltr .service-sub-body input[type="radio"]{
  position: relative;
  top: -2px;
}

.service-sub-body input[type="radio"] + label{
  display: inline-block;
  vertical-align: middle;
  padding: 0 6px;
}

.service-sub-container .service-sub-body input[type=text]{
    height: 34px !important;
    padding: 6px !important;
    line-height: 1.42857143 !important;    
    border-color: #bfead9 !important;    
}

#eservice-container .service-sub-body input[type="radio"] + label{
  font-weight: normal !important;
}

#eservice-container .service-sub-container .lblcal{
  height: 36px !important;
  width: 180px !important;
}

#eservice-container .service-sub-container .lblcal input[type=text].is-calendarsPicker{
    height: 34px !important;
    padding: 6px !important;
    line-height: 1.42857143 !important;    
    border-color: #bfead9 !important;      
    min-width: 180px !important;
}

.ltr #eservice-container .service-sub-container .lblcal .calendars-trigger{
  top: -24px;
  right: 10px;
  left: auto;
}

.rtl #eservice-container .service-sub-container .lblcal .calendars-trigger{
  top: 10px;
  left: 10px;
  right: auto;
}

.service-sub-container .service-sub-body .service-sub-header{
  border-bottom-width: 2px !important;
}

.service-sub-body--header {
  padding: 8px 16px !important;
  margin-bottom: 18px !important;
  margin-bottom: 24px;
}

.service-sub-body--header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.service-sub-header--noborder {
  border: none !important;
  width: 100% !important;
  font-size: 14px !important;
}

.service-sub-header--noborder > label{
  padding-left: 3px;
  padding-right: 3px;
  color: #333 !important;
}

.service-sub-body__group {
  margin-bottom: 24px;
}

/*Vehicle List - Individual Vehicle Component*/
.service-sub-body--content .list-vehicle-item{
  display: flex;
  align-items: center;
}

.service-sub-body--content .list-vehicle-item ul,
.service-sub-body--content .list-vehicle-item h5{
  margin: 0 !important;
}

.service-sub-body--content .list-vehicle-item h5{
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #00ab67 !important;
}

.service-sub-body--content .list-vehicle-item ul,
.service-sub-body--content .list-vehicle-item h5{
  margin-bottom: 6px !important;
}

.ltr .service-sub-body--content .list-vehicle-item .list-vehicle-item--image{
  padding-right: 18px;
  padding-left: 18px;
  height: 60px;
}

.rtl .service-sub-body--content .list-vehicle-item .list-vehicle-item--image{
  padding-left: 18px;
  padding-right: 18px;
  height: 60px;
}

.service-sub-body--content .list-vehicle-item .list-vehicle-item--image.size-lg{
  height: auto;
}

.service-sub-body--content .list-vehicle-item .list-vehicle-item--image > img{
  width: 60px;
}

.service-sub-body--content .list-vehicle-item .list-vehicle-item--image.size-lg > img{
  width: 80px;
}

@media screen and (max-width: 767px){
  .service-sub-body--content .list-vehicle-item{
    flex-direction: column;
  }

  .service-sub-body--content .list-vehicle-item .list-vehicle-item--image{
    margin-bottom: 12px;
  }

  .service-sub-body--content .list-vehicle-item .list-vehicle-item--details{
    text-align: center;
  }
}


/*Service Links Component*/
.service-sub-body--content.service-sub-body--links a{
  font-size: 24px;
  color: #00ab67;
  display: inline-block;
  vertical-align: middle;
  margin: 0 9px;
  min-height: 32px !important;
  line-height: 32px;
}

.service-sub-body--content.service-sub-body--links a:hover{
  text-decoration: underline !important;
}

.ltr #data-list-group ul,
.rtl #data-list-group ul {
  margin: 0 !important;
}

.ltr #data-list-group ul.row,
.rtl #data-list-group ul.row {
  margin-right: -15px !important;
  margin-left: -15px !important;
}


/*--------------------------
List.JS Components
---------------------------*/
.list {
  margin: 0 !important;
}

.list > li{
  padding: 8px 0;
  cursor: pointer;
}

.list > li + li{
  border-top: 1px solid #eee;  
}

.list > li *{
  pointer-events: none;
}

.list > li:hover{
  background-color: #fcfcfc;
}

/*List - Search Component*/
.main-search-wrapper{
    position: relative;
    max-width: 200px;
    margin-inline-start: auto;
}

.main-search-wrapper > i.icon-search{
  position: absolute;
  font-size: 18px;
  top: 50%;
  margin-top: -12px;
}

.ltr .main-search-wrapper > i.icon-search{
  right: 12px;
}

.rtl .main-search-wrapper > i.icon-search{
  left: 12px;
}

#main-search{
  
  padding: 9px !important;
  height: 38px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

#main-search::-webkit-input-placeholder {
  font-family: "Droid Arabic Kufi", "Roboto", Arial, sans-serif !important;
}

#main-search:-ms-input-placeholder {
  font-family: "Droid Arabic Kufi", "Roboto", Arial, sans-serif !important;
}

#main-search::placeholder {
  font-family: "Droid Arabic Kufi", "Roboto", Arial, sans-serif !important;
}

/*List - Pagination Componenet*/
.ltr .pagination-theme-green{
  text-align: center;
}

.rtl .pagination-theme-green{
  text-align: center;
}

.pagination-theme-green .pagination{
  margin-top: -12px;
}

.pagination-theme-green .pagination a{
    color: #333;    
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: bold;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pagination-theme-green .pagination a.hover,
.pagination-theme-green .pagination a.focus{
    color: #2bc57d !important;  
}

.pagination-theme-green .pagination .active a{
    color: #fff;
    border-color: #2bc57d;
    background-color: #2bc57d;    
}

@media screen and (max-width: 767px){
    .ltr .pagination-theme-green,
    .rtl .pagination-theme-green{
      text-align: center;
    }    

    .pagination-theme-green .pagination{
        margin: 6px 0 !important;
    }
}


/*List - No Result Component*/
.no-result {
  display: none;
}

.no-result .bg-info {
  background-color: #d9edf7;
  padding: 15px;
  border: 1px solid #b9d9e8;
}


/*List - Footer Component*/
.list-footer{
  background: #efefef;
  padding: 9px 0;
  margin-top: 6px;
  display: none;;
}

.list-footer .pagination-options{
    border-radius: 0 !important;
    min-width: auto;
    width: 52px;  
}

.list-footer .pagination{
  margin: 0;
}

.list-footer .pagination li{
  margin-right: 2px;
  margin-left: 2px;
  display: inline-block;
}

.list-footer .pagination li > a{
  color: #333;
  float: none;
  font-weight: normal !important;
  background-color: transparent;
  display: inline-block;
  border: none !important;
  border-radius: 0 !important;
}

.list-footer .btn-prev,
.list-footer .btn-next{
  color: #333;
}

@media screen and (max-width: 991px){
  .list-footer .col-sm-6{
    float: none;
    width: 100%;
  }

  .list-footer .col-sm-6 .flex-group{
    justify-content: center;
  }

  .list-footer .col-sm-6:first-child{
    margin-bottom: 6px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 9px;  
  }  
}

@media screen and (max-width: 640px){
  .list-footer .pagination{
    display: none;
  }

  .list-footer .btn-prev, 
  .list-footer .btn-next{
    display: inline-block;
    border: 1px solid #179d60;
    padding: 6px 12px;
    border-radius: 18px;
    width: 35%;    
  }

  .list-footer .col-sm-6 .flex-justify-content-right{
    justify-content: space-between;
  }
}


/*Success Page Component Styles*/
.service-msg-wrapper {
  text-align: center;
  padding: 42px 70px;
}

.service-msg-wrapper h3 {
  font-size: 22px !important;
  font-weight: bold;
  margin-bottom: 30px !important;
  line-height: 1.5;
}

.service-msg-wrapper p.lead {    
  font-size: 18px !important;
  line-height: 1.5;
  font-weight: bold;
}

.service-msg-wrapper .glyphicon {
  font-size: 80px;
  margin-bottom: 30px;
}

.service-msg-wrapper .glyphicon-ok-sign {
  color: #00ab67;
}

.service-msg-wrapper .text-underline{
  text-decoration: underline !important;
}

@media screen and (max-width: 767px){  
  .service-msg-wrapper {
    padding: 0;
  }

  .service-msg-wrapper h3{
    font-size: 18px !important;
  }

  .service-msg-wrapper p.lead{
    font-size: 14px;
  }

  .service-msg-wrapper .glyphicon{
    font-size: 60px;
    margin-bottom: 10px;
  }

  .service-msg-wrapper .flex-input-group{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #eservice-container .common-body .service-msg-wrapper .tbl3column .labels{
    width: 100% !important;
  }
}


/*Custom Calender Toggle - Component*/
.customToggle td{
  padding: 0 !important;
}

.customToggle input[type="radio"] {
    display: none;
}

.customToggle input[type="radio"] + label {
    cursor: pointer;
    min-width: 90px;
    position: relative;
    z-index: 1;
    border: 1px solid #00ab67;
    display: inline-block;
    padding: 6px;
    position: relative;
    text-align: center;
}

.customToggle input[type="radio"]:checked + label {
    cursor: default;
    color: #fff;
    background: #00ab67;
}

@media screen and (max-width: 640px){
  table.tbl3column .customToggle{
      display: table !important;
      width: 100% !important;
      table-layout: fixed;
  }

  .customToggle tbody,
  .customToggle thead,
  .customToggle tfoot{
      display: table-row-group !important;
  }

  .customToggle tr{
      display: table-row !important;
  }

  .customToggle th, 
  .customToggle td{
      display: table-cell !important;
      width: 50% !important;
  }  

  .customToggle td label{
    display: block !important;
  }

  #eservice-container .service-sub-container .lblcal{
    width: 100% !important;
  }
}


/*Default Theme - Bootstrap Modal*/
.default-modal-theme{
  z-index: 9999;
}

.default-modal-theme .modal-content{
  border: none;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-family: "Droid Arabic Kufi", "Roboto", Arial, sans-serif !important;
}

.default-modal-theme .modal-header,
.default-modal-theme .modal-footer{
  border: none;
}

.default-modal-theme .modal-header{
  color: #fff;
  background-color: #00ab67;
}

.default-modal-theme .modal-header h4{
  font-size: 16px;
  font-weight: bold;
}

.default-modal-theme .modal-header a.close{
  color: #fff !important;
  opacity: 1;
  text-shadow: none;  
}

.default-modal-theme .modal-body{
  padding: 24px !important;
}

.default-modal-theme .modal-footer{
  padding-top: 0 !important;
  display: flex;justify-content: center;
}

.default-modal-theme .modal-footer .round-button{
    border-radius: 4px !important;
    border: none !important;
    min-width: auto !important;
    margin: 0 6px !important;
    padding: 0 28px !important;
    font-size: 14px !important;
    font-family: "Droid Arabic Kufi", "Roboto", Arial, sans-serif !important;
}

.default-modal-theme .modal-footer .round-outline{
    border-width: 2px !important;
}

.formButtons .modal-footer .round-button.round-outline{
    background-color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.default-modal-theme .modal-footer .round-button.round-cancel-outline{
  border: 2px solid red !important;
  color: red !important;
  background-color: white !important;
}

@media screen and (min-width: 768px){
  .default-modal-theme .modal-md{
    width: 500px !important;
  }
}

@media screen and (max-width: 767px){
  .default-modal-theme{
    top: 20%;
  }

  .default-modal-theme .modal-footer{
    flex-direction: column;
  }

  .default-modal-theme .modal-footer .round-button{
      margin: 4px !important;
  }
}

@media screen and (max-width: 640px){
  .default-modal-theme .modal-footer .round-button{
      margin: 4px 0 !important;
  }
}

/*Print Styles*/
@media print{
  .service-progressbar,
  .service-msg-wrapper{
    display: none !important;
  }
}