label{
    margin-bottom: .4rem;
    font-weight: bold;
}
.checkboxHolder label {
    font-weight: normal;
}
fieldset legend {
    font-weight: bold;
}
//for IE remove focus outline
fieldset:focus{
    outline: none;
  }
.form-control{
	border-color: #b9b6b6;
}
.form-group.required label:after, label.required:after {
    content: "*";
    color: red;
}
.textarea-holder.required label:after {
    content: "*";
    color: red;
}
.select-wrapper.required label:after {
    content: "*";
    color: red;
}
 legend.required:after {
    content: "*";
    color: red;
}
label.custom-control.required{
    content: "*";
    color: red;
}
.form-control[disabled]{
    border-color: #B9B6B6;
    background-color: #d4d4d4;
}
.form-control:focus{
	border-color: #9dd3f7;
    outline: $focus-outline-setting;
}

.ui-calendar .ui-widget:disabled {
    opacity: 1;
    filter: Alpha(Opacity=100);
    border-color: #B9B6B6;
    background-color: #d4d4d4;
}
.ui-calendar .ui-widget.ui-calendar-button:disabled {
    border-color: transparent;
    background-color: transparent;
}
.ui-state-disabled span.ui-button-icon-left {
    color: #b9b6b6;
}
.ui-calendar input {
    width: 120px;
}

//for custom radio and checkbox
.custom-control-indicator {
    border: 1px solid $border-color;
}
// override webkit auto fill styles
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
:focus{
    outline: $focus-outline-setting ; 
}
textarea.form-control {
    max-height: 140px;
    min-height: 140px;
    height: 140px;
    word-break: break-word;
    white-space: normal;
}
//styling for form alerts.. 
.form-group.alert {
  margin-bottom: .65rem;
  padding:0 ;
  background:none;
  border:none;
  color: #4c4c4c;
    .errorMsg{
        color: #a94442;
        &::before{
            content:"\F071";
            font-family: fontAwesome;
            display: inline-block;
            margin-right:.5rem;
        }
    }
    .warningMsg{
        color: #e5991c;
        &::before{
            content:"\F071";
            font-family: fontAwesome;
            display: inline-block;
            margin-right:.5rem;
        }
    }
}

.form-group {
  p {
      margin-bottom: 0;
  }
 
  fieldset{
      legend {
          font-size:1rem;
      }
      .form-control {
          padding-bottom: .7rem;
      }
      .form-checkrow label {
        max-width: 90%;
        line-height: 1.1;
    }
  }
}
// allows radio & checkbox components to stack instead of default inline-form
.form-group.form-inline.stackedRadio .form-checkrow {
    display: block;
    margin-bottom: 1rem;
}
.form-group.form-inline .form-checkrow {
  display: inline-block;
  margin-right: 1.3rem;
}
// allows inputs to align to right of label
// use on fieldValue component @FieldValue(cols="1", iconField ="labelLeft")
.labelLeft { 
    display:inline-block;
    margin-left: .6rem;
    &::after { //this removes psuedo after inherited from iconField class
        display: none;
    }
}
.form-group.form-inline.legend-left.questionGroup {
    margin-bottom: 0;
    padding: 0;
}
.form-group.form-inline.legend-left legend {
  float: left;
  margin-right: 1.3rem;
  width: 50%;
}
.form-group.form-inline.legend-left.small legend {
    width: 25%;
}

p-dropdown.form-control {
    border: none;
    padding:0.1rem;
    background: none;
    line-height: 1.5;
    .ui-widget-content {
        border: 1px solid #9dd3f7;
        background: #ecf7ff;
        border-radius: 0;
    }
    .ui-state-highlight,
    .ui-dropdown-panel .ui-dropdown-item:not(.ui-state-highlight):hover {
        border-color: #4a90e2;
        background: #4a90e2;
        color: #FFFFFF;
    }
}
.ui-dropdown {
    min-width: 150px;
    max-width: 98%;
    .ui-dropdown-panel .ui-dropdown-list{
        padding:0;
    }
    &.ui-state-disabled, 
    &.ui-widget:disabled {
        opacity: 1;
        .ui-dropdown-label.ui-inputtext,
        .ui-dropdown-trigger {
            border-color: #B9B6B6;
            background-color: #d4d4d4;
        }
    }
}
.ui-corner-all {
    border-radius: 0px;
}

//START inline edit text input styles for inplace-editor.component
.form-group{
  .editTrigger{
     display: block;
     position:relative;
     color:#333;
     &:hover{
         border: 1px solid #cecece;
             padding-left: 10px;
         &::after{
             position:absolute;
             top:0;
             right:0;
             height: 100%;
             border-left: 1px solid #cecece;
             text-align: center;
             font-family: "fontAwesome";
             content: "\f040";
             padding: 2px 4px 0;
         }
     }
     .unassigned {
         font-style: italic;
     }
  }
  .editTarget{
      display:none;
  }
  .editSubmit {
    &::before{
        display: inline-block;
        font-family: "fontAwesome";
             content: "\f00c";
    }
 }
 .editCancel {
     &::before{
        display: inline-block;
        font-family: "fontAwesome";
             content: "\f00d";
    }
 }
 .saveOptions {
     position: absolute;
     top: 100%;
     right: 0;
     height: 30px;
     display: none;
     text-align: right;
     z-index: 1;
 }

  &.editOn {
     border: 1px solid #cecece;
     padding: .4rem;
     margin-bottom: 40px;
     position: relative;
     .editTrigger{
         display: none;
     }
     .editTarget{
         display: block;
     }
 }
}

.formEditGroup.editOn .form-group .editTarget {
 display: block;
}
.formEditGroup.lockedForm .form-group .editTarget[disabled] {
 display: block;
}
// END inline edit text input styles for inplace-editor.component

//date and time input
.ui-calendar{
    display:block;
     .ui-calendar-button {
        height: 2.15rem;
    }
}
.ui-timepicker.ui-widget-header{
    text-align: center;
}

.form-group.questionGroup .ui-calendar input { 
    width: 150px; 
}


// custom radio

.ui-state-default {
    border: 1px solid #9dd3f7;
    background: #ffffff;
    color: #4c4c4c;
}
p-checkbox.ng-dirty.ng-invalid .ui-chkbox-box {
    border-bottom-color: #9dd3f7;
}

    .ui-chkbox-box.ui-state-active, 
    .ui-radiobutton-box.ui-state-active {
        border: 1px solid #006bc2;
        background: #006bc2;
        color: #FFFFFF;
   
        .ui-radiobutton-icon{
            position:relative;
            vertical-align: bottom;
            &::before {
                position: absolute;
                font-size: .5rem;
                bottom: .3rem;
                left: -.19rem;
            }
        }
    }


    .ui-radiobutton-box:not(.ui-state-disabled):not(.ui-state-active):hover,
    .ui-chkbox-box:not(.ui-state-disabled):not(.ui-state-active):hover {
        border-color: #006bc2;
        background: #D9EDFD;
    }
    .ui-radiobutton-box.ui-state-disabled,
    .ui-radiobutton-box.ui-state-disabled:hover,
    .ui-chkbox-box.ui-state-disabled,
    .ui-chkbox-box.ui-state-disabled:hover,
    .ui-chkbox-box.ui-state-active.ui-state-disabled, 
    .ui-radiobutton-box.ui-state-disabled.ui-state-active {
        border-color: #b9b6b6;
        background: #d4d4d4;
        opacity: 1;
        color: #4c4c4c;
    }



.custom-radio {
    .custom-control-input{
        &:checked ~ .custom-control-indicator{
            background-image: none;
            background-color: #006bc2;
            color: #fff;
            &::after{
                font-family: fontAwesome;
                content: "\F111";
                font-size: .4rem;
                position: absolute;
                top: .15rem;
                left: .25rem;
            }
        }
        &:focus ~ .custom-control-indicator{
            box-shadow: none;
        }
    }
}
// custom check
.custom-check {
    .custom-control-input{
        &:checked ~ .custom-control-indicator{
            background-image: none;
            background-color: #006bc2;
            color: #fff;
            border-color: #006bc2;
            -webkit-font-smoothing: antialiased;
            width: 1.1rem;
            height: 1.1rem;
            &::after{
                font-family: fontAwesome;
                content: "\F00C";
                font-size: 1rem;
                position: absolute;
                top: -.3rem;
            }
        }
        &:focus ~ .custom-control-indicator{
            box-shadow: none;
        }
    }
}
.ui-timepicker.ui-widget-header {
    background: #c8e3f6;
    color: #696b6c;
}
.ui-timepicker a > span {
    color: #006bc2;
    font-weight: bold;
    font-size: 1.4rem;
}
.ui-datepicker.ui-widget .ui-timepicker {
    text-align: right;
    padding-right: 2rem;
}

input.custom-control-input:disabled ~ .custom-control-description {
    color: #4c4c4c;
}
input.custom-control-input:disabled ~ .custom-control-indicator,
.custom-check .custom-control-input:checked:disabled ~ .custom-control-indicator {
    border-color: #b9b6b6;
        background: #d4d4d4;
        opacity: 1;
        color: #4c4c4c;
}
.ui-messages.ui-widget.ui-corner-all.infoMessage.ui-messages-info.ng-star-inserted.infoMessage {
    background-color: inherit;
    margin-left: 1.5rem;
    background-color: inherit;
    margin-left: 1.5rem;
    color: #515151;
    padding-top: 0px;
    margin-top: 0px;
    border:none;
}
.ui-messages.ui-widget.ui-corner-all.infoMessage.ui-messages-info.ng-star-inserted.infoMessage .ui-messages-icon {
    display: none;
}