

//   $font-family-base: "WorkSans-Regular" !default;
body{
    :root[dir="rtl"]{
        font-family: var(--fontFamilyIOSAR)  !important;
      }
    :root[dir="ltr"]{
        font-family: var(--fontFamilyMediumEN)  !important;
    }
  }
   input, textarea, p ,label,div{
    font-size: 16px;
     :root[dir="rtl"]{
        font-family: var(--fontFamilyIOSAR)  !important;
      }
    :root[dir="ltr"]{
        font-family: var(--fontFamilyLightEN)  !important;
    }
     }
   h1, h2,h3, button {
    :root[dir="rtl"]{
        font-family: var(--fontFamilyIOSAR)  !important;
    }
    :root[dir="ltr"]{
    font-family: var(--fontFamilyMediumEN)  !important;
}
  
  }

ion-label{
    color:var(--labelColor) !important;
}
.tipsPadding{
    padding: 0px 10px;
}
.profileDiv{
    margin: 5px auto !important;
}
.profileImg{
    width: 90px;
    height: 90px;
    display: inline-flex;
    background: transparent;
    -webkit-border-radius:50% !important;
    -moz-border-radius:50% !important;
    border-radius: 50% !important;
   // margin:0 auto 40px;
    img{
        -webkit-border-radius:50% !important;
        -moz-border-radius:50% !important;
        border-radius: 50% !important;
        width: 90px;
        height: 90px;
    }
    //box-shadow: 0px 0px 0px 10px #8c8c8c;


}
.loaderGif{
    background: transparent !important;
    width:100px;
    height: 100px;
}
.loading-md .loading-wrapper,
.loading-ios .loading-wrapper{
    background: transparent !important;
    box-shadow: none;
    -webkit-box-shadow:none;
    -moz-box-shadow: none;
    width: 150px;
}
.loading-md ,.loading-ios {
    ion-backdrop{
        background-color: #8c8c8c !important;
    }
}

/***********change header color***************/
.headerBtn{
    background-color: transparent;
}
.headerImg{
    width: 36px;
}

/***************/
.attachImg{
    max-width: 30px;
    width: 30px;
}
img.attachImg {
    max-width: 30px;
    width: 30px;
}
.attachImgBtn{
    background-color: transparent;
}
.toolbar-title,.toolbar-title-md,.toolbar-title-ios{
    color:(--light);
    font-size: 18px;
}
ion-header ion-icon.back-button-icon.icon {
    color: (--light);
    font-size: 25px;
}
ion-header ion-icon.icon.icon-ios.ion-ios-back{
    font-size: 25px;
}
ion-header ion-icon.icon.icon-md.ion-md-back,
ion-header ion-icon.icon.icon-md.ion-md-search,
ion-header ion-icon.icon.icon-ios.ion-ios-search{
    color: (--light);
    font-size: 18px;
}

button.disable-hover.item-button.button.button-md.button-clear.button-clear-md ,
button.disable-hover.item-button.button.button-ios.button-clear.button-clear-ios{
    background: transparent;
    font-size: 16px;
    color:(--darkgray);
}
button.item-button.button.button-md.button-clear.button-clear-md,
button.item-button.button.button-ios.button-clear.button-clear-ios {
    background: transparent;
    font-size: 16px;
    color:(--darkgray);
}
ion-header ion-icon.icon.icon-md.ion-md-close,
ion-header ion-icon.icon.icon-ios.ion-ios-close{
    color: (--light);
}
ion-header ion-icon.icon.icon-md.ion-md-add,
ion-header ion-icon.icon.icon-ios.ion-ios-add{
    color: (--light);
}
 ion-icon.icon.icon-md.ion-md-search,
 ion-icon.icon.icon-ios.ion-ios-search{
    color: (--darkgray);
}
.toolbar-background {
    background: var(--primary); 
    background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary)  36%,var(--secondary)  59%, var(--customnavy) 100%); 
    background: -webkit-linear-gradient(45deg, var(--primary) 0%, var(--secondary)  36%,var(--secondary)  59%, var(--customnavy) 100%); 
    background: linear-gradient(45deg, var(--primary) 0%, var(--secondary)  36%,var(--secondary)  59%, var(--customnavy) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--primary)', endColorstr='--var(customnavy)',GradientType=1 );
}
/***************button bckground***************/
a{
    color:var(--primary);
}
.button,.button-md, button-ios{
 background:var(--customnavy);
 white-space: normal;
// background: $primary; 
// background: -moz-linear-gradient(45deg, $primary 0%, $secondary 36%, $secondary  59%, $customnavy 100%); 
// background: -webkit-linear-gradient(45deg, $primary 0%,$secondary  36%,$secondary  59%,$customnavy 100%);
// background: linear-gradient(45deg, $primary 0%,$secondary  36%,$secondary  59%,$customnavy 100%); 
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$primary', endColorstr='$customnavy',GradientType=1 );
color:var(--light);
text-transform: capitalize;	
// min-width: 200px;
min-height: 45px;	
}
.iconButton{
    min-width: auto;
    min-height: auto;
}
/*********select style************/
ion-item.item.item-block.item-md.item-select.ng-touched,
ion-item.item.item-block.item-ios.item-select.ng-touched,
ion-item.item.item-block.item-md.item-datetime.ng-touched,
ion-item.item.item-block.item-ios.item-datetime.ng-touched {
    border-bottom: 2px solid var(--danger);
}

ion-item.item.item-block.item-md.item-select.ng-touched.input-has-value.item-input-has-value,
ion-item.item.item-block.item-ios.item-select.ng-touched.input-has-value.item-input-has-value,
ion-item.item.item-block.item-md.item-datetime.ng-touched.input-has-value.item-input-has-value,
ion-item.item.item-block.item-ios.item-datetime.ng-touched.input-has-value.item-input-has-value {
    border-bottom: 0px;
}
/********center element****************/
.centerDiv{
    margin:auto;
    text-align: center;
    display: block;
    // .button,.button-md, button-ios{
    //     min-width: 200px;
    // }
    .iconButton{
        min-width: auto;
        min-height: auto;
    }
}
/***********item icon************/
 .item-icon{
    width:25px;
    height:25px;
}
[dir="ltr"] .item-icon{
    margin: 9px 8px 9px 0;
}
[dir="rtl"] .item-icon{
    margin: 6px 0px 9px 9px;
}
/**********text format**********/
p.text-caps{
    text-transform: uppercase;
}
.boldTxt,p.boldTxt,.boldTxt>label {
    :root[dir="ltr"]{
        font-family: var(--fontFamilyBoldEN) !important;
    }
    :root[dir="rtl"]{
        font-family: var(--fontFamilyIOSAR) !important;
        font-weight: bold;
    }
}
.boldTxtNav,p.boldTxtNav,.boldTxtNav>label {
    color: var(--customnavy);
    :root[dir="ltr"]{
        font-family: var(--fontFamilyBoldEN) !important;
    }
    :root[dir="rtl"]{
        font-family: var(--fontFamilyIOSAR) !important;
        font-weight: bold;
    }
}
ion-label.boldTxtNav.label.label-md,ion-label.boldTxtNav.label.label-ios{
    // font-weight: bold;
    color:var(--customnavy);
    :root[dir="ltr"]{
        font-family: var(--fontFamilySemiBoldEN) !important;
    }
    :root[dir="rtl"]{
        font-family: var(--fontFamilyIOSAR) !important;
        font-weight: bold;
    }
        
}
/******* label stacked***********/
.label-md[stacked], .label-ios[stacked] {
font-size: 16px;
}
/**********input **************/
input.text-input.text-input-md,
input.text-input.text-input-ios{
    font-size: 16px;
  :root[dir="ltr"]{
      text-align: left;
  }
  :root[dir="rtl"]{
      text-align: right;
  }
}
ion-datetime.datetime.datetime-md.ng-valid.ng-dirty.ng-touched,
ion-datetime.datetime.datetime-ios.ng-valid.ng-dirty.ng-touched {
    direction: ltr !important;
    text-align: left !important;
}
/**********background************/
.gray-bg{
    background-color:var(--gray); 
    margin-top: 10px;
}
/***************select and alert ************/
.alert-md .alert-head,.alert-ios .alert-head{
    background-color:var(--grayBG);  
    color: var(--light);
}
/********profile grid************/
// .profile-grid{
//     .col{
//         text-align: center;
//     }
// }
/**********card**********/
ion-card ,ion-card-md ,ion-card-ios {
    box-shadow: black;
   // background-color: #99999938;
   -webkit-border-top-left-radius: 10px !important;
   -webkit-border-top-right-radius: 10px !important;
   -moz-border-radius-topleft: 10px !important;
   -moz-border-radius-topright: 10px !important;
   border-top-left-radius: 10px !important;
   border-top-right-radius: 10px !important;
   
}
ion-card-header{
    padding: 0px 10px !important;
    color: var(--light) !important;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: var(--grayBG);
    .hrTitle{
        white-space: normal;
        padding: 5px;
        padding-top: 12px;
        width:85%;
        min-height: 45px;
        @media screen and (max-width: var(--break-big)) {
            width: 80%;
          }
        @media screen and (max-width: var(--break-small)) {
            width: 74%;
          }
         
        :root[dir="ltr"]{
            float:left;
        }
        :root[dir="rtl"]{
            float:right;
        }
        line-height: 1.2;
    }
    .button,.button-md, button-ios{
        background: transparent;
        box-shadow: none;
        -webkit-box-shadow:none;
        -moz-box-shadow: none;
        min-width: auto;
        padding: 0px !important;
        margin:0px 5px !important;
        :root[dir="ltr"]{
            float:right;
        }
        :root[dir="rtl"]{
            float:left;
        }
    }
}
ion-col.colBold,ion-col.colBold>label{
    // font-weight: bold;
       color:var(--customnavy);
       :root[dir="ltr"]{
        font-family: var(--fontFamilyBoldEN) !important;
    }
    :root[dir="rtl"]{
        font-family: var(--fontFamilyIOSAR) !important;
        font-weight: bold;
    }
        font-size: 15px;
}
// .boldTxt{
//     font-weight: bold;
// }
// p.boldTxt{
//     font-weight: bold;    
// }
/**********button grid***********/
// .gridBtn{

//     height: auto;
//     min-height: 35px !important;
//     padding: 10px;
//     font-size: 12px;
//     white-space: normal;
// }
// button.gridBtn.button.button-md,
// button.gridBtn.button.button-ios,
// button.gridBtn.button.button
//  {
//     width: 90%;
// }
// .gridBtnCol{
//     text-align: center;
// }
// .btnGrid{

//     padding:0px;
// }
/*****************dynamic form*******************/
.daynamicForm-Label{
    font-size: 16px;
    // margin-left: 15px;
    color: var(--customnavy);
    display: block;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    /* font-size: inherit; */
    // text-overflow: ellipsis;
    // white-space: nowrap;
    white-space: normal;
    // padding-top: 10px;
    padding: 5px 0px;
    margin: 10px auto;
    :root[dir="ltr"]{
        font-family: var(--fontFamilySemiBoldEN) !important;
    }
    :root[dir="rtl"]{
        font-family: var(--fontFamilyIOSAR) !important;
        font-weight: bold;
    }

}
img.flipImg{
    :root[dir="rtl"]{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    }
  }

.daynamicForm-Input{
    width: 100%;
    border: none;
    border-bottom: var(--gray) solid 1px;
    border-radius: 0px;
    // margin-left: 10px;
    // text-align: right;
    color:  var(--dark);
    font-size: 15px;
    padding: 6px 0px;

}


.daynamicForm-Button{
    background:var(--customnavy);
    white-space: normal;
   // background: $primary; 
   // background: -moz-linear-gradient(45deg, $primary 0%, $secondary 36%, $secondary  59%, $customnavy 100%); 
   // background: -webkit-linear-gradient(45deg, $primary 0%,$secondary  36%,$secondary  59%,$customnavy 100%);
   // background: linear-gradient(45deg, $primary 0%,$secondary  36%,$secondary  59%,$customnavy 100%); 
   // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$primary', endColorstr='$customnavy',GradientType=1 );
   color:var(--light);
   text-transform: capitalize;	
   min-width: 200px;
   min-height: 45px;
    
    
    font-weight: 500;
    
    border: none;
    border-radius: 2px;
      -ms-flex: 1;
    flex: 1;
    font-size: 14px;
    padding: 0 1.1em;
    margin: 0.4rem 0.2rem;
    justify-content: center;
}

.custom-button-element{
    //margin-top: 10px;
    margin: 10px auto;
    text-align: center;
}
.daynamicForm-DateTime{
    color: var(--dark);
    font-size: 15px;
    border: none;
    font-weight: 400;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    width: 100%;
    padding: 6px 0px;
    background: var(--light);
    border-bottom: var(--cusgray) solid 1px;
    border-radius: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    box-shadow: none;
    -webkit-box-shadow:none;
    -moz-box-shadow: none;
}
.daynamicForm-DateTime:after{
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #999;
    border-radius: 0px;
    position: absolute;
    top: 40%;
    :root[dir="ltr"]{
    right: 5px;
    }
    :root[dir="rtl"]{
        left: 5px;
        }
    content: "";
    z-index: 98;
  
}
.daynamicForm-Select{
    color: var(--dark);
    font-size: 15px;
    // background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
    //  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…AgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=), -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(0, 0, 0, 0.12)), color-stop(50%, rgba(0, 0, 0, 0.12))); 
    // background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…AgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=), linear-gradient(to top, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.12) 50%); 
    // background-size: 96% 0; 
    // background-repeat: no-repeat;
    border: none;
    font-weight: 400;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    width: 100%;
    padding: 6px 0px;
    background-color: var(--light);
    border-bottom: var(--cusgray) solid 1px;
    border-radius: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    // text-overflow: '';
    box-shadow: none;
    -webkit-box-shadow:none;
    -moz-box-shadow: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    :root[dir="ltr"]{
    background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff);
    background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0;
    background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
    background-repeat: no-repeat;
    padding-right: 20px;
    }
    :root[dir="rtl"]{
        background-image: linear-gradient(-135deg, #999 50%, transparent 50%),linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff);
        background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%;
        background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
        background-repeat: no-repeat;
        padding-left: 20px;
        }
}

.daynamicForm-Select:after{
    width: 0;
    height: 0;
    border-radius: 0px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #999;
    position: absolute;
    top: 40%;
    :root[dir="ltr"]{
    right: 5px;
    }
    :root[dir="rtl"]{
        left: 5px;
        }
    content: "";
    z-index: 98;
  
}
.requiredClass::before{
    content:"* ";
}
.requiredClassElm{
    border-bottom:2px solid var(--danger);
}

textarea:disabled, input:disabled ,.daynamicForm-Select:disabled, .daynamicForm-DateTime:disabled{
    background: rgba(204, 204, 204, 0.11);
}
div.daynamicForm-DateTime.disabled{
    background: rgba(204, 204, 204, 0.11); 
}

.iconButton{

    background: transparent;
    -webkit-box-shadow:none;
-moz-box-shadow: none;
box-shadow: none;
} 
.imgSize{
width: 22px;
height: 22px;
-webkit-box-shadow:none;
-moz-box-shadow: none;
box-shadow: none;
}
/************footer****************/
ion-footer {
padding:15px 0px;
background-color: var(--light) !important;
border: 0px !important;
box-shadow: none !important;
-webkit-box-shadow:none;
-moz-box-shadow: none;
}
.footer-md::before,.footer-ios::before{
    background-color: var(--light) !important;
    background-image:none;
    border: 0px !important;
    box-shadow: none !important;
    -webkit-box-shadow:none;
-moz-box-shadow: none;
}
/*************progress bar****************/
.progcontainer {
    margin: auto;
    text-align: center;
    width: 100%;
    min-height: 100px;
}
.cusprogressbar {
    counter-reset: step;
    padding: 0px;
}
.cusprogressbar li {
    list-style-type: none;
    width: 33.333%;
    :root[dir="ltr"]{
        float: left;
    }
    :root[dir="rtl"]{
        float: right;
    }
    font-size: 12px;
    position: relative;
    text-align: center;
    color: var(--darkgray);
    :root[dir="ltr"]{
        font-family:var(--fontFamilySemiBoldEN);
    }
    :root[dir="rtl"]{
        font-family: var(--fontFamilyIOSAR);
        font-weight: bold;
    }
}
.cusprogressbar li:before {
    width: 40px;
    height: 40px;
    content: counter(step);
    color: var(--light);
    counter-increment: step;
    line-height: 40px;
    border: 0px;
    background-color: var(--grayBG);
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
}
.cusprogressbar li:after {
    width: 100%;
    height: 2px;
    content: '';
    position: absolute;
    background-color: var(--cusgray);
    top: 20px;
    :root[dir="ltr"]{
        left: -50%;
    }
    :root[dir="rtl"]{
        right: -50%;
    }
    
    z-index: -1;
}
.cusprogressbar li:first-child:after {
    content: none;
}
.cusprogressbar li.active {
    color: var(--custgreen);
}
.cusprogressbar li.active:before {
    background-color: var(--custgreen);
}
//.cusprogressbar li.active + li:after {
   // background-color: #55b776;
    //color: $custgreen;
//}
/**************badge **********************/
.badge-md,.badge-ios {
    color: #fff;
    background-color: #327eff;
    background: red;
    border-radius: 50% !important;
    min-width: 30px;
    min-height: 30px;
    line-height: 2;
}
/**********no data div***********/
div.no-dataDiv{
.row {
    border-bottom: 1px solid;
    border-color:var(--cusgray);
  }
h4 {
font-size: 2.2rem;
text-align: center;
color: var(--dark);

}
.empty-data {
    font-size: 10.2em;
    display: block;
    margin: .2em auto 0;
    color: var(--custgreen);
  }
}

.toast-md .toast-message,.toast-ios .toast-message {
    background-color: var(--secondary);
}
/*************picker style*********************/
    .picker-md .picker-opt,.picker-ios .picker-opt{
        font-size: 18px;
    }
 .picker-md .picker-col,.picker-ios .picker-col {
     padding: 0px 2px !important;
}
