/* ==========================================================================
   Form Elements
   ========================================================================== */

.nsp-input *,
.nsp-label {
    font-size: 13px !important;
    font-family: 'Noto Sans', sans-serif;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

/* OVERRIDES */
.nsp-input .hasDatepicker {
    float: none;
    width: 100% !important;
}


.nsp-input label,
.nsp-label /* span */ {
  display: block;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}


.nsp-input label.required:after,
.nsp-label.required:after /* span */ {
  content: "*";
  position: relative;
  bottom: 2px;
  color: #e73332;
  font-size: 14px;
  margin-left: 3px;
}

.nsp-label-percent{
    font-size:18px;
}

.nsp-input.inline {
  display: inline-block;
}

.nsp-input.inline label {
  font-weight: normal;
  display: inline;
}

.nsp-input input[type=checkbox],
.nsp-input input[type=radio] {
  margin-right: 10px;
}

.nsp-input textarea {
    /*height: 110px;*/
    max-height: 110px;
    resize: vertical;
    overflow-y:auto;
}

.nsp-input input:not([type="radio"]):not([type="checkbox"]),
.nsp-input select,
.nsp-input textarea {
  border: 1px solid #dfdfdf;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  padding: 5px 10px;
  margin: 0;
  width: 100%;
  min-height: 32px;
  background-color: #fff;
  font-weight: normal;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* @Adjustment - Secret Question
    Since some of the secret questions are very long - had to reduce the 
    font-size than normal to fit the question in the dropdown, also reduced 
    the left indent to fit all characters */
.nsp-input select.secretQuestion {
    font-size: 12.5px !important;
    padding-left: 2px;
}

.align-right {
    float:right;
}

.nsp-input input.nsp-input-small:not([type="radio"]):not([type="checkbox"]) {
    width: 100px !important;  /* important because of .hasDatepicker class */
}

.nsp-input input.nsp-input-smaller:not([type="radio"]):not([type="checkbox"]) {
    width: 55px;
}

.nsp-input input:not([type="radio"]):not([type="checkbox"]):disabled,
.nsp-input select:disabled,
.nsp-input textarea:disabled {
  background-color: #ededed;
  box-shadow: none;
  font-weight: normal;
  color: #333;
  border-color: #dfdfdf;
}

.nsp-input input[type="range"]:disabled {
    background: transparent !important;  /* override */
    opacity: 0.3;
}

.nsp-input input:not([type="radio"]):not([type="checkbox"]):disabled:active,
.nsp-input input:not([type="radio"]):not([type="checkbox"]):disabled:focus,
.nsp-input select:disabled:active,
.nsp-input select:disabled:focus,
.nsp-input textarea:disabled:active,
.nsp-input textarea:disabled:focus {
  outline: none;
  color: inherit;
  border-color: #dfdfdf;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.nsp-input input:not([type="radio"]):not([type="checkbox"]):active,
.nsp-input select:active,
.nsp-input textarea:active,
.nsp-input input:not([type="radio"]):not([type="checkbox"]):focus,
.nsp-input select:focus,
.nsp-input textarea:focus {
  outline: none;
  /*color: #225e06;*/
  border-color: #6ccd43;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.23);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.23);
}

/* Ensure checkbox/radio alignment in all browsers */
/*.nsp-input.checkbox{
    position: relative;
    display: block;
}*/

.nsp-input.inline.radio label {
    margin-right: 10px;
}

.nsp-input.checkbox:first-of-type,
.nsp-input.radio:first-of-type {
    /*margin-top: 10px;*/
}

.nsp-input.checkbox label,
.nsp-input.radio label{
    display: inline-block;
    /*padding-left: 20px;*/
    font-weight: normal;
    cursor: pointer;
}

.nsp-input.checkbox.block label,
.nsp-input.radio.block label{
    display: block;
    float:left;
    margin-right:10px;
    font-weight: normal;
    cursor: pointer;
}
.nsp-input.checkbox label.active,
.nsp-input.radio label.active{
    font-weight: bold;
}

.nsp-input.checkbox.block label + label,
.nsp-input.radio.block label + label{
    margin-left: auto;
}

.nsp-input.checkbox label + label,
.nsp-input.radio label + label{
    margin-left: 30px;
}

.nsp-input.radio input[type="radio"],
.nsp-input.checkbox input[type="checkbox"] {
    /*position: absolute;*/
    /*margin: 0 0 0 -18px;*/
    top: 1px;
    vertical-align: middle;
}

/*.nsp-input.radio input[type="radio"] {
    margin-top: 0;
}*/

input.nsp-input-small.ng-invalid.ng-invalid-invalid-date, 
input.nsp-input-small.ng-invalid.ng-invalid-invalid-date-range,
.nsp-input input.error,
.nsp-input input.error:focus {
    border: solid 1px #e73332 !important;
}


.ng-submitted input.ng-invalid:not([type=range]):not([type="radio"]):not([type="checkbox"]),
.ng-submitted div.ng-invalid,
.ng-submitted textarea.ng-invalid,
input.ng-invalid.ng-dirty:not([type=range]):not([type="radio"]):not([type="checkbox"]),
select.ng-invalid.ng-dirty,
div.ng-invalid.ng-dirty,
textarea.ng-invalid.ng-dirty,
.ng-dirty.ng-invalid>div.selectize-input,
.ng-submitted .ng-invalid>div.selectize-input {
        border: 1px solid #e73332 !important;
        color: #e73332;
        -webkit-box-shadow: 0 0 5px #ec6060 !important;
        -moz-box-shadow: 0 0 5px #ec6060 !important;
        box-shadow: 0 0 5px #ec6060 !important;
}

select.ng-invalid.ng-dirty {   
    color: black !important;  
}

.error-inline {
    color: #e73332;
    font-weight: bold;
}

.error-inline .error-icon {
    font-size: 16px;
    line-height: 24px;
    float: left;
    padding-right: 5px;
}

.error-inline .error-text {
    display: inline-block;
    width: calc(100% - 25px);
}

.nsp-copy-icon{
    cursor: pointer;
    text-decoration: none !important;
    font-size:20px;
    color: #333;
    
 }

.nsp-copy-icon:hover{
    cursor: pointer;
    text-decoration: none !important;
    font-size:20px;
    color: #006595;
   
}

/* Validation tooltip*/
.nsp-error-tooltip {
    color: #e73332 !important;
    z-index: 3;
    font-size: 12px;
    font-weight: bold !important;
}

.nsp-error-tooltip {
    position: absolute;
    left: 10px;
    bottom: -33px;
    white-space: nowrap;
    display: block;
    background: #f8e4d4;
    border: 1px solid #ebaf74;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 5px 7px;
}

.validation-inline {
    position: relative;
    display: inline-block;
}

.validation-inline .nsp-error-tooltip {
    left: 0;
}

/* The following code causes IE8 to crash when using single ':' */    
.nsp-error-tooltip::after,
.nsp-error-tooltip::before {
    bottom: 100%;
    left: 21px;
    border: solid transparent;
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none;
    content: " ";
}

.nsp-error-tooltip::after {
    border-color: transparent;     
    border-bottom-color: #f8e4d4;
    border-width: 6px;
    margin-left: -6px;
}
.nsp-error-tooltip::before {
    border-color: transparent;
    border-bottom-color: #ebaf74;
    border-width: 7px;
    margin-left: -7px;
}

.nsp-input .inline-label {
    display: inline;
    margin-right: 5px;
    font-weight: normal;
    font-style: italic;
    font-size: 12px !important;
}



.nsp-tooltip {
position: absolute;
width:350px;
color: #333;
padding: 8px 10px;
font-size: 12px;
line-height: 12px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 5px;
 box-shadow: 0 3px 12px rgba(0,0,0,0.15);
 -webkit-transform: translateZ(0); 
-webkit-transition: top 0.5s 0s;
-moz-transition: top 0.5s 0s;
transition: top 0.5s 0s;
opacity:0;
-webkit-transform: translateY(10px);
   -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
     -o-transform: translateY(10px);
        transform: translateY(10px);
-webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
     -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
   -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.nsp-tooltip:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 10px;
margin-top: -10px;
}
.nsp-tooltip:before {
border-color: rgba(66, 142, 255, 0);
border-right-color: #eaeaea;
border-width: 11px;
margin-top: -11px;
}
.nsp-tooltip-container {
position:absolute;
display:inline-block;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
}
.nsp-tooltip-container:hover .nsp-tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
     -o-transform: translateY(0px);
        transform: translateY(0px);
}
.nsp-tooltip p {
line-height:normal;
}
.nsp-tooltip-container:hover {
width:500px;

z-index:9999;
}
.nsp-tooltip-container .tooltip-icon {font-size:18px; line-height: normal;}
.nsp-tooltip-wrapper {
z-index:997;
cursor: default;
margin:0;

position: relative;
width:100%;
height:30px;

-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.nsp-tooltip-wrapper .tooltip {
background: #ffffff;
bottom: 100%;
display: block;
left:-20%;
margin-left:-13px;
margin-bottom: 15px;
opacity: 0;
padding: 10px;
pointer-events: none;
position: absolute;
width:500px;
-webkit-transform: translateY(10px);
   -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
     -o-transform: translateY(10px);
        transform: translateY(10px);
-webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
     -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
   -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
    /* @Override ESC5 Style Guide - Tooltips comes 
    only on overing on the icons instead of the containers/wrappers*/
    .nsp-tooltip-wrapper i:hover + .tooltip {
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

    .nsp-tooltip-wrapper span.tooltip-trigger:hover + .tooltip {
        opacity: 1;
        pointer-events: auto;
    }

    .nsp-tooltip-wrapper span.tooltip-trigger.no-animate:hover + .tooltip,
    .nsp-tooltip-wrapper span.tooltip-trigger.no-animate + .tooltip {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        transition: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
    }

    .nsp-tooltip-wrapper i.material-icons.no-animate:hover + .tooltip,
    .nsp-tooltip-wrapper i.material-icons.no-animate + .tooltip {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        transition: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
    }

    .nsp-tooltip-wrapper:hover .tooltip.right {
        width: auto;
        height: 30px;
        left: 10em;
        min-width: 100px;
        top: -0.7em;
    }

    .nsp-tooltip-wrapper .tooltip.auto.notesadjust, .nsp-tooltip-wrapper:hover .tooltip.auto.notesadjust {
        width: 530px;
        left: 0 !important;
        min-width: 530px;
    }

    .nsp-tooltip-wrapper .tooltip.auto, .nsp-tooltip-wrapper:hover .tooltip.auto {
        width: auto !important;
        left: 0 !important;
        min-width: 100px;
    }

    /*Special class for notes page - Info icon tooltip for Notes header should be 
    displayed on the right of the Notes header 
    and wrapped into multiple lines*/
    .nsp-tooltip-wrapper .tooltip.auto.notes-tooltip {
        white-space: normal;
        width: 500px !important;
        top: 0px !important;
        height: 150px !important;
        left: 140px !important;
    }

.nsp-input label + .material-icons {
    line-height: 24px;
    font-size: 18px !important;
    color: #1570a6;
}

h1 + .material-icons {
    padding-left:5px;
}

.material-icons.info:hover {
    color:#0D79AB;
    cursor:pointer;
}