/* Override boostrap form elements*/
.form-control{
    display:inline-block;
    width: auto;
    border-radius:2px;
    border: 1px solid #CCC;
    padding: 5px 10px;
    font-size:0.8rem;
    line-height:1rem;    
}

.form-control-sm{
    font-size:0.6rem;
    line-height:0.7rem;
    letter-spacing: 0.1em;
}

.form-control-lg{
    font-size:1.25rem;
    line-height:1.8rem;
}

.form-control:hover{
    border: 1px solid #999;
}


input[type=text].form-control{
    height:calc(1.6rem + 2px) !important;
}
input[type=text].form-control-sm{
    height:calc(1.3rem + 2px) !important;
}
input[type=text].form-control-lg{
     height:calc(2.5rem) !important;
}


select.form-control {
    height:calc(1.6rem + 2px) !important;
}

select.form-control-sm {
    height:calc(1.3rem + 2px) !important;
}

select.form-control-lg {
    height:calc(2.5rem) !important;
}

.custom-file{
    position:relative;
    display:inline-block;
    height:calc(0.8rem + 18px);
    font-size: 0.8rem;
}

.custom-file-sm{
    height:calc(1.3rem + 2px);
    font-size: 0.6rem;
}

.custom-file-lg{
    height:calc(2.5rem);
    font-size: 1.25rem;
}


.custom-file-input{
    height:100% !important;
    top: 0px;
    left: 0px;
}

.custom-file-label{
    height:100% !important;
    border-radius:2px;
    border: 1px solid #CCC;
    margin:0px;
}
.custom-file-label::after{
    height:100% !important;
    line-height:1rem;
    border-radius:2px;
    border: 1px solid #A41826;
    background-color: #A41826;
    color: #FFF;
}
.custom-file-sm .custom-file-label::after{
    line-height:0.5rem;
}
.custom-file-lg .custom-file-label::after{
    line-height:1.3rem;
}
/*--------------- Override boostrap form elements ---------------*/
/*End Buttons*/
.frmBtn {
    cursor:pointer;
    border: 1px solid #A41826;
    background-color: #A41826;
    color: #FFF;
}
.frmBtn.primary {
    border:1px solid #7BC637;
    background-color: #7BC637;
}
.frmBtn.secondary {
    border: 1px solid #A41826;
    background-color: #A41826;
}
.frmBtn.tertiary {
    border: 1px solid #A41826;
    background-color: #FFF;
    color: #A41826;
}
.frmBtn:hover, .frmBtn:focus {
    background-color: #8A1C26;
    color: #FFF;
}
.frmBtn.primary:hover, .frmBtn.primary:focus {
    border:1px solid #629E2C;
    background-color: #629E2C;
    color: #FFF;
}
.frmBtn.secondary:hover, .frmBtn.secondary:focus {
    border:1px solid #8A1C26;
    background-color: #8A1C26;
    color: #FFF;
}
.frmBtn.tertiary:hover, .frmBtn.tertiary:focus {
    border: 1px solid #8A1C26;
    background-color: #8A1C26;
    color: #FFF;
}

.frmBtn.disabled, .frmBtn:disabled, .frmBtn:disabled:hover {
    border: 1px solid #AAA;
    background-color: #AAA;
    cursor: not-allowed;
    color: #777;
}

.frmBtn.selected {
    border: 1px solid #7BC637;
    background-color: #7BC637;
}

.frmBtn.selected:hover {
    border: 1px solid #69AA2F;
    background-color: #69AA2F;
}
/*End Buttons*/

/*Button Groups*/
.btn-group .frmBtn {
    cursor:pointer;
    border: 1px solid #A41826;
    background-color: #FFF;
    color: #FFF;
}
.btn-group .frmBtn.primary {
    border:1px solid #7BC637;
    color: #7BC637;
}
.btn-group .frmBtn.secondary {
    border: 1px solid #A41826;
    color: #A41826;
}
.btn-group .frmBtn.tertiary {
    border: 1px solid #999;
    color: #333;
}
.btn-group .frmBtn:hover, .btn-group .frmBtn:focus {
    background-color: #8A1C26;
    box-shadow: 0 0 0 0;
    color: #FFF;
}
.btn-group .frmBtn.primary:hover, .btn-group .frmBtn.primary:focus {
    border:1px solid #629E2C;
    background-color: #629E2C;
    color: #FFF;
}
.btn-group .frmBtn.secondary:hover, .btn-group .frmBtn.secondary:focus {
    border:1px solid #8A1C26;
    background-color: #8A1C26;
    color: #FFF;
}
.btn-group .frmBtn.tertiary:hover, .btn-group .frmBtn.tertiary:focus {
    background-color: #8A1C26;
    color: #FFF;
}

.btn-group .frmBtn.disabled, .frmBtn:disabled, .frmBtn:disabled:hover {
    border: 1px solid #AAA;
    background-color: #AAA;
    cursor: not-allowed;
}

.btn-group .frmBtn.active {
    border: 1px solid #A41826;
    background-color: #A41826;
    color:#FFF;
}

.btn-group .frmBtn.primary.active {
    border: 1px solid #7BC637;
    background-color: #7BC637;
    color:#FFF;
}

.btn-group .frmBtn.secondary.active {
    border: 1px solid #A41826;
    background-color: #A41826;
    color:#FFF;
}

.btn-group .frmBtn.tertiary.active {
    border: 1px solid #A41826;
    background-color: #A41826;
    color:#FFF;
}
/*END Button Groups*/

 
/* Customize the label (the container) */
.containerCheckbox {
  font-size:0.8em;
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.containerCheckbox-sm{
    font-size:0.6em;
    padding-left: 20px;
}
.containerCheckbox-lg{
    font-size:1em;
    padding-left: 35px;
}

/* Hide the browser's default checkbox */
.containerCheckbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border:1px solid #666;
}
.containerCheckbox-sm .checkmark {
  height: 15px;
  width: 15px;
}
.containerCheckbox-lg .checkmark {
  height: 25px;
  width: 25px;
}

/* On mouse-over, add a grey background color */
.containerCheckbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerCheckbox input:checked ~ .checkmark {
  background-color: #A41826;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* containerCheckbox the checkmark when checked */
.containerCheckbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerCheckbox .checkmark:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.containerCheckbox-sm .checkmark:after {
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;  
  border-width: 0 2px 2px 0;
}
.containerCheckbox-lg .checkmark:after {
  left: 8px;
  top: 4px;
  width: 7px;
  height: 12px;  
  border-width: 0 3px 3px 0;
}






select.validatorError{
    border:1px dotted red;
}
input[type=text].validatorError{
    border:1px dotted red;
}
input[type=checkbox].validatorError + div{
    color: red;
}

.sbhp{
    display:none;
}

table.tblFrmItems td{
    padding-top:5px;
    padding-bottom:5px;
}

table.tblFrmItems td.frmItemLabel:not(:first-child), table.tblFrmItems td.frmItemFullWidth:not(:first-child){
    padding-left:20px;
}
table.tblFrmItems-lg td.frmItemLabel:not(:first-child), table.tblFrmItems-lg td.frmItemFullWidth:not(:first-child){
    padding-left:30px;
}

td.frmItemLabel{
    vertical-align:top;
    padding-right:10px;
    font-size: 0.9rem;
}
table.tblFrmItems-sm td.frmItemLabel{
    font-size: 0.7rem;
    padding-right:5px;
}
table.tblFrmItems-lg td.frmItemLabel{
    font-size: 1.2rem;
}

td.frmItemFullWidth{
    vertical-align:top;
}

td.frmItemFullWidth .form-control{
    width:100%;
}

/*Flex Form Layout*/
.wrapperFlexFrm{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap; 
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
    box-sizing:border-box;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}
.ffGrpColumn{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
    box-sizing:border-box;
    width:299px;
}
.ffGrpLblElm{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
    box-sizing:border-box;
    padding:10px;
    width:100%;
}
.ffGrpColumn.ctrls, .ffGrpLblElm.ctrls, ffElm.ctrls{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: flex-end;
    align-content: flex-end;
}
.ffLbl{
    box-sizing:border-box;
    width:100px;
}
.ffLbl.fullWidth{
    width:100%;
}
.ffElm{
    box-sizing:border-box;
    width:172px;
}
.ffElm.fullWidth{
    width:100%;
}
.ffElm .form-control{
    width:100%;
    box-sizing:border-box;
}
.ffElm100 .form-control{
    width:100%;
    box-sizing:border-box;
}

.ffElm .form-control:not(:first-child), .ffElm100 .form-control:not(:first-child){
    margin-top:5px;
}

.ffRequired{
    font-size:80%;
}

/*END Flex Form Layout*/

div.validatorError{
    color:red;
    display:block;
    font-size:90%;
}
div.errorSummary{
    color:red;
}