.input-group {
    line-height:10px;
}

.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn,
.form-control {
    border-radius: 0;
    background-color: transparent;
}


.fa {
    margin-top: 1px;
}

.input-group-addon {
    padding: 6px 6px 6px 6px;
    font-size: 17px;
    font-weight: normal;
    /*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; */
}

/*
.input-group-addon:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}*/

/*.input-group > input {*/
.compound-input > input,
.compound-input > .styledSelect
{
    padding-top: 8px !important;
    padding-left: 5px !important;
    border-left: 0px !important;
}


.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: transparent;
    opacity: 1;
}


.sole-input > input,
.compound-input > .styledSelect {
    padding-top: 8px !important;
}


.compoundinput-select {

    padding-left: 5px !important;
    border-left: 0px !important;
}


.awesomelookup,
.awesomelookup-input {
    height:30px;color:var(--normaltextcolor);background-color:transparent;
}

.awesomelookup-span {
    color:var(--normaltextcolor);background-color:transparent;
}

.awesomelookup-gridheight-default {
    height: 445px;
}

.awesomelokup-gridheight-alternate {
    height: 467px;
}

.awesomemoney,
.awesomenumber,
.currencypicker,
.datetimeinput,
.awesomelookup,
.awesometextbox,
.awesomecombobox,
.awesomesearch,
.map-location,
.awesomesecret {
    /*height:30px !important;*/
    font-size: 17px !important;
    font-weight: normal !important;
    padding-bottom: 6px !important;
    padding-top: 6px !important;
}

.awesomecheckbox {
    font-size: 17px !important;
    font-weight: normal !important;
    /*padding-bottom: 6px !important;*/
   /* padding-bottom: 12px !important;*/
    padding-top: 3px !important;
    /*padding-top: 0px !important;*/
}


.awesomemoney,
.awesomenumber {
    text-align: left;
}

.select ul {
    min-width:100px;
}

.awesomelookup-div {
    text-align:left;width:auto;padding:0;
}

.awesomelookup-visible,
.awesomenumber-visible {
    display: inline-block;
}


.awesomelookup-notvisible,
.awesomenumber-notvisible {
    display: none;
}

.lookupmodal {
    overflow-y:hidden;
}


.awesomelookup-modal-content {
    background-color: var(--sectioncolor);
    height:667px;
}

.awesomelookup-modal-content .awesomelookup-modal-title {
    padding-left: 5px;
    color: var(--normaltextcolor);
}

.addlookupbtn {
    display:none;color:var(--normaltextcolor);background-color:var(--confirmcolor);
}

.lookupicon {

}

.lookuptrashicon {
    padding-left:10px;display:none;
}

.lookup-modal-dialog {
    top: calc(50% - 364px);
    width: 800px;
}

.lookup-modal-footer {
    padding: 30px 15px 30px;
}

.addlookupbtn-span {
    position: absolute;
    right: 30px;
}

.lookup-left-span {
    float: left;
}

.lookup-right-span {
    float: right;
}

/* ----------------- Custom Styles for Awesome Search ------------------ */
.awesomesearch-span {
    background-color: transparent; color:var(--normaltextcolor);border-radius: 0px; padding-top: 5px;
}

.awesomesearchicon-trash {
    padding-left:10px; display:none;
}



/* -----------------  Custom Styles for Currency Picker  ----------------- */
.currencypicker {
    /*border: none !important;
    outline: none !important;
    border-image: none !important;*/
    height: 30px;
    padding-left: 7px;
    padding-top: 8px;
    margin: 0;
    min-width: 50px;
    border-radius: 0px;
    max-width: 50px !important;
    border-right: none;
    text-align: center;
}



.currencypicker > input {
    border: 0px none !important;
    outline: 0px none !important;
}


.inputpicker-wrapped-list {
    border: 1px solid var(--normaltextcolor);
}


.inputpicker-element,
.inputpicker-wrapped-list {
    /* change harcoded colors later */
    /* background-color: #404040 !important; */
    background-color: var(--sectioncolor);
    /*color: white;*/
    color: var(--normaltextcolor);
    font-size: 17px;
    font-weight: normal;
}

.inputpicker-wrapped-list .inputpicker-active {
    /* change harcoded colors later */
    /*background-color: #404040 !important;*/
    background-color: var(--sectioncolor) !important;
    /*color: orange;*/
    color: var(--confirmcolor);
    font-size: 17px;
    font-weight: normal;
}

.inputpicker-wrapped-list .table {
    border: none;
}

.inputpicker-wrapped-list .table > tbody > tr > td,
.inputpicker-wrapped-list .table > tbody > tr > th,
.inputpicker-wrapped-list .table > tfoot > tr > td,
.inputpicker-wrapped-list .table > tfoot > tr > th,
.inputpicker-wrapped-list .table > thead > tr > td,
.inputpicker-wrapped-list .table > thead > tr > th {
        border-top: 0;
    }


.inputpicker-wrapped-list .table > tbody > tr > td:first-child {
    padding-left:10px;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: 0;
}

/* -----------------  Custom Styles for DateTime Picker  ----------------- */

.bootstrap-datetimepicker-widget {
    color: var(--normaltextcolor) !important;
    background-color: var(--sectioncolor) !important;
    font-size: 17px !important;
    font-weight: normal !important;
    border: 1px solid var(--normaltextcolor) !important;
    position: absolute !important;
    z-index: 1151 !important;
}



.bootstrap-datetimepicker-widget.dropdown-menu:before, .bootstrap-datetimepicker-widget.dropdown-menu:after {
    content: unset;
    display: inline-block;
    position: absolute;
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before, .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
    border-bottom-color: var(--sectioncolor) !important;
}



.bootstrap-datetimepicker-widget.dropdown-menu.top:before,
.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
    border-top-color: var(--sectioncolor) !important;
}


.bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second, .bootstrap-datetimepicker-widget .btn-primary {
    font-weight: normal;
    font-size: 20px;
}

.bootstrap-datetimepicker-widget .btn-primary {
    color: var(--normaltextcolor) !important;
    background-color: var(--textcolor) !important;
    border-color: var(--textcolor) !important;
}

.bootstrap-datetimepicker-widget a  {
    color: var(--normaltextcolor);
}


.bootstrap-datetimepicker-widget table td.active{
    background-color: var(--textcolor);
    color: var(--normaltextcolor);
}

.bootstrap-datetimepicker-widget table td.active:hover {
    color: var(--confirmcolor) !important;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover,
.bootstrap-datetimepicker-widget .picker-switch td span:hover,
.bootstrap-datetimepicker-widget table td span:hover,
.bootstrap-datetimepicker-widget .btn-primary:hover,
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: var(--sectioncolor) !important;
    color: var(--confirmcolor) !important;
    border-color: var(--sectioncolor) !important;
}


.bootstrap-datetimepicker-widget table thead tr:first-child th {
    color: var(--normaltextcolor)
}

.bootstrap-datetimepicker-widget table th {
    color: var(--textcolor)
}


.bootstrap-datetimepicker-widget table td span {
}

.input-field {
    padding-bottom: 0px !important;
    padding-top: 1.5px !important;
}

.glyphicon-large {
   font-size: 14px;
   min-height: 18px;
   line-height: 18px;
}

th {
    font-weight: normal;
}


@media (min-width: 768px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 15em !important;
    }
   
}

@media (min-width: 992px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 30em !important;
    }
   
}

@media (min-width: 1200px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 30em !important;
    }
    
}


.bootstrap-datetimepicker-widget.dropdown-menu {
    width: 15em;
}

.bootstrap-datetimepicker-widget.wider {
    width: 15em;
}

.aweseome-datetimepicker-div {
    width:auto; display:inline-block;text-align:left;padding:0;
}

.awesome-datetimepicker-span {
    color:var(--normaltextcolor);background-color:transparent;
}


.datetimeinput {
    height:30px;color:var(--normaltextcolor);background-color:transparent;
}

/* ----------------- Custom Styles for Modal Dialog ------------------ */
.modal-header {
    border-bottom: none;
}

.awesomemessagebox-modal-body,
.awesomemessagbox-input {
    color: var(--normaltextcolor);
}

.awesomemessagebox-modal-content {
    background-color:var(--sectioncolor);
}

.awesomemessagebox-modal-dialog {
    top:calc(50% - 170px);
}

.awesomemessagebox-modal-footer {
    text-align: right;
}

.awesomemessagebox-row {
    margin:10px;
}

.awesomemessagebox-modal-title {
    color:var(--textcolor);
}

.awesomemessagebox-image {
    display:inline; margin-left:auto; margin-right:auto; padding: 10px;
}

.modalerrmsg {
    display:none;
}

/* ----------------- Custom Styles for Awesome Combobox ------------------ */
.s-hidden {
    /*    visibility: hidden;*/
    display: none !important;
    padding-right: 10px;
}

.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    /*font: normal 11px/22px Arial, Sans-Serif;*/
    color: var(--textcolor);
    /*border: 1px solid #ccc;*/
    min-width:100px;
}

.styledSelect {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
    padding-left: 10px;
    padding-top: 3px;
    color: var(--normaltextcolor) !important;
    /*padding-bottom:6px;*/
    height: 30px;
    /*font-weight: bold;*/
    min-width:100px;
}

.styledSelect:after {
    content: "";
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-color: var(--textcolor) transparent transparent transparent;
    position: absolute;
    top: 13px;
    right: 6px;
}

.styledSelect.required:after {
    border-color: black transparent transparent transparent;
}

.partial-required .fa-question:before {
    color: black;
}

.styledSelect:active, .styledSelect.active {
    /*background-color: #eee;*/
    background-color: transparent;
}

.options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0 0;
    padding: 0 10px;
    list-style: none;
    border: 1px solid #ccc;
    color:var(--normaltextcolor);
    background-color: var(--sectioncolor);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    max-height: 200px;
    overflow-y: auto;
    max-width: 250px;
    overflow-x: auto;
}

.options li {
   /* padding: 0 6px;*/
    margin: 0 0;
    padding: 0 10px;
    padding-top:4px;
    padding-bottom:4px;
    line-height:18px;
    white-space:nowrap;
}

.options li:hover,
.options li:focus,
.optionselected {
    background-color: transparent;
    color: var(--confirmcolor) !important;
}

#novalue {
    color:var(--normaltextcolor);
    background-color: transparent;
}

.combobox-trash {
   /* display:none;*/
    width:30px;
    color:var(--normaltextcolor);
    background-color:transparent;
}

.combobox-selection {
    color:var(--normaltextcolor);
    background-color:transparent;
}

.smallsize-img {
    width: 12px;
    height: 12px;
}

.mediumsize-img {
    width:16px;
    height:16px;
}

.largesize-img {
    width:25px;height:25px;
}

.xlargesize-img {
    align-items: center;
    width: 60px;
    height: 60px;
}

.xxlargesize-img {
    align-items: center;
    width:120px;
    height:120px;
}

.customsize-img {
    width:16px;height:20px;
}

.customsize2-img {
    width:18px;height:20px;
}


/* -----------------  Custom Styles for Awesome Map Location  ----------------- */
.awesomemap-container {
    width:auto; display: inline-block;text-align: left;
}

.awesomemap-span {
    color:var(--normaltextcolor);background-color:transparent;
}

.awesomemap-input {
    height:30px;color:var(--normaltextcolor);background-color:transparent;
}

.awesomemap-modal-content {
    background-color:var(--sectioncolor);
}

.awesomemap-modal-title {
    color:var(--normaltextcolor);
}

[id$="_maparea"] {
    overflow:auto; height:400px; width:100%;
}

.awesomemap-modal-footer {
    text-align: right;
}

.awesomemap-modal-dialog {
    top:calc(30% - 170px);
}

.awesomemap-icon-trash {
    padding-left:10px;
}


/* -----------------  Custom Styles for Awesome Check Box  ----------------- */
/* Customize the label (the container) */
.checkbox-container {
    display: inline-block;
    position: relative;
    /* padding-top: 5px;*/
    padding-top: 7px;
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    /*-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
}


.checkbox-container.inactive,
.radio-container.inactive {
    /*color: #C5C5C5;*/
    cursor: not-allowed;
    font-weight: normal;
}

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

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
}

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

/* On mouse-over, add a grey background color */
.checkbox-container.inactive:hover input ~ .checkmark {
    background-color: #eee;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container .checkmark {
    background-color: #2196F3;
}


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

/* Show the checkmark when checked */
.checkbox-container .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 7px;
    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);
}


.awesomecheckbox .check {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    /*border: 1px solid #767676;*/
    margin: 2px 3px 3px 3px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    /*    margin-top: -40px;*/
}

.awesomecheckbox[disabled="disabled"] {
    cursor: not-allowed;
    opacity: 100;
    pointer-events: none;
}

.checked {
    background-color: #2196F3;
    color: white;
    margin-top: 0px;
}

.unchecked {
    background-color: #800000;
    color: white;
    margin-top: 0px;
}


.partial {
    background-color: darkgray;
    color: white;
    margin-top: 0px;
}

.partial-required {
    background-color: #ffffcc;
    color: white;
    margin-top: 0px;
}


/*.awesomecheckbox .check.unchecked i {
    display: none;
}
*/

.awesomecheckbox .check.unchecked i.fa-check,
.awesomecheckbox .check.unchecked i.fa-question {
    display: none;
}

.awesomecheckbox .check.partial i.fa-check,
.awesomecheckbox .check.partial i.fa-close {
    display: none;
}


.awesomecheckbox .check.partial-required i.fa-check,
.awesomecheckbox .check.partial-required i.fa-close {
    display: none;
}

.awesomecheckbox .check.checked i.fa-close,
.awesomecheckbox .check.checked i.fa-question {
    display: none;
}

.check:focus {
    border-color: #66afe9 !important;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}

.labelleft {
    float:left;margin-right:10px;
}

.linebreak {
    clear:both;
}

.chkbox-inline {
    display: inline-block;
}

/* -----------------  Custom Styles for Awesome Radio Buttons  ----------------- */
/* The container */
.radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    padding-top:10px;
    /*font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
}

.radio-container.inactive {
    color: #C5C5C5;
    cursor: not-allowed;
    font-weight: normal;
}

/* Hide the browser's default radio button */
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.radiomark {
    position: absolute;
    top: 7px;
    left: 5px;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 50%;
}


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

/* On mouse-over, add a grey background color */
.radio-container.inactive:hover input ~ .radiomark {
    background-color: #eee;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radiomark {
    background-color: #2196F3;
}

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

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radiomark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .radiomark:after {
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

.not-bold {
    font-weight: normal !important;
}

/* -----------------  Custom Styles for Awesome Buttons  ----------------- */

.btn.disabled, 
.btn[disabled], 
fieldset[disabled]
fieldset[disabled] .btn {
    background-color: transparent !important;
    opacity: 0.5;
    border-width: 2px;
}


fieldset {
    /* min-width:min-content; jeff - had to comment this as this makes the dataform width too wide and cuts the right margin*/
    clear: both;
}



/* -----------------  Form Brwse Buttons  ----------------- */

.formbrowse-buttontabs {
    white-space: nowrap;
    font-size: 0;
    display: inline;
}


.formbrowse-buttontabs button {
    background-color: var(--processcolor);
    color: var(--textcolor);
    height: 40px;
}

.formbrowse-tablist {
    background-color: transparent;
    font-size: 17px;
    font-style: normal;
    padding: 0px 6px !important;
    /*border-color:inherit;*/
    border:none;
}


.formbrowse-tablist.active {
    /*border-bottom: 4px solid var(--confirmcolor) !important;*/
    color: var(--normaltextcolor);
}



/* -----------------  Custom Styles for Awesome Secret / AwesomeText  ----------------- */
.hiddenfield {
    display: none;
}

.awesomesecret {
    height:30px;background-color:transparent;color:var(--normaltextcolor);border:1px solid var(--textcolor);
}

.awesometext-modal-dialog {
    top:calc(50% - 200px);width:600px;
}

.awesometext-modal-content {
    background-color:var(--sectioncolor);
}

.awesometext-modal-title,
.awesometext-modal-body {
    color: var(--normaltextcolor);
}

.awesometext-section {
    width:100%;height:100px;float:left;padding-left:0px;
}
.awesometext-modal-label {
    color:var(--textcolor);padding-bottom:5px;display:block;
}

.awesometext-span1 {
    display: flex;text-align:left;flex-flow:row;
}

.awesometext-span2 {
    display: inline; float: left; padding-right: 10px; padding-top: 1px;
}

.toggleshowsecret-button {
    margin-bottom: 5px;
    margin-top: 0px !important;
    color: var(--normaltextcolor);
    background-color: var(--confirmcolor);
}

.togglesecret-image {
    width:20px;height:20px;
    margin-top:-5px;
}

.awesometext-modal-footer {
    text-align: right;
}


.awesometext-row {
    margin:0 10px;
}

.awesometext-multiline,
.awesometext-textarea {
    width: 100%  !important;
}


/*------------------- Custom Styles for AwesomeFile/AwesomeImage -------------------------- */
.drop-container:focus {
    border-color: #66afe9 !important;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}

.cancelupload-button,
.upload-input {
    display:none;
}




/* -----------------  Custom Styles for  AwesomeLookup  ----------------- */
.urllink {
    /* text-decoration: underline;*/
}

.urllink:hover {
    color: var(--confirmcolor) !important;
}

/* -----------------  Custom Styles for Awesome Number  ----------------- */

.awesomenumber-container {
    padding:0;
}

.withcurrency {
    display: flex;
}

.awesomenumber-span {
    padding:0;margin:0;min-width:45px;
}

.number-input,
.currencypicker-input {
    color:var(--normaltextcolor);background-color:transparent;
}