/* 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-label{
    margin-top:.5rem;
    margin-bottom:.2rem;
}


/*.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 var(--primaryBackColour);
    background-color: var(--primaryBackColour);
    color: #FFF;
    text-decoration:none !important;
}

    .frmBtn.primary {
        border: 1px solid var(--primaryBackColour);
        background-color: var(--primaryBackColour);
    }

    .frmBtn.secondary {
        border: 1px solid var(--primaryBackColour);
        background-color: var(--primaryBackColour);
    }

    .frmBtn.tertiary {
        border: 1px solid var(--primaryBackColour);
        background-color: #FFF;
        color: var(--primaryBackColour);
    }

    .frmBtn:hover, .frmBtn:focus {
        background-color: var(--primaryHoverColour);
        color: #FFF;
    }

    .frmBtn.primary:hover, .frmBtn.primary:focus {
        border: 1px solid var(--primaryHoverColour);
        background-color: var(--primaryHoverColour);
        color: #FFF;
    }

    .frmBtn.secondary:hover, .frmBtn.secondary:focus {
        border: 1px solid var(--primaryHoverColour);
        background-color: var(--primaryHoverColour);
        color: #FFF;
    }

    .frmBtn.tertiary:hover, .frmBtn.tertiary:focus {
        border: 1px solid var(--primaryHoverColour);
        background-color: var(--primaryHoverColour);
        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 var(--primaryBackColour);
    background-color: #FFF;
    color: #FFF;
}

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

    .btn-group .frmBtn.secondary {
        border: 1px solid var(--primaryBackColour);
        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 var(--primaryBackColour);
        background-color: var(--primaryBackColour);
        color: #FFF;
    }

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

    .btn-group .frmBtn.secondary.active {
        border: 1px solid var(--primaryBackColour);
        background-color: var(--primaryBackColour);
        color: #FFF;
    }

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


/* Customize the label (the container) */
.containerCheckbox {
/*    font-size: 0.8em; */
    display: inline-block;
    position: relative;
    padding-left: 28px;
    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;
    border-radius:5px;
}

.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: var(--primaryBackColour);
}

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

/* 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;
}
.form-check-input:checked {
    background-color: var(--primaryBackColour) !important;
    border-color: var(--primaryBackColour) !important;
}

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;
    line-height: 3;
}

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%;
    font-style:italic;

}

/*END Flex Form Layout*/
.btn-outline-primary {
    border-color: var(--primaryBackColour);
    color:black; 
}
.btn-check + .btn:hover {
    background-color: var(--primaryHoverColour);
    border-color: var(--primaryBackColour);
    color: white;
}

.btn-check:checked + .btn {
    background-color: var(--primaryBackColour);
    border-color: var(--primaryBackColour);
}
div.validatorError {
    color: red;
    display: block;
    font-size: 90%;
}

div.errorSummary {
    color: red;
}