.panel{
  transition: 0.2s opacity;
  margin-bottom:1.5rem;
}
.panel.grid-filter{
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
}

.panel .panel-header{
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background: var(--prog-primary);
  color: var(--primary-color-text);
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 27px;
}
.modal-form-panel .panel .panel-header{
  padding:0.75rem 1rem;
}
.panel.grid-filter .panel-header {
  background-color: var(--panel-bg-grid-filter);
  /*color:#636363;*/
  padding: 0.75rem 1rem;
}
.panel.grid-filter .panel-header .title-group{
  margin-bottom: 0;
  text-transform: none;
}
.panel .panel-header.bg-cust-a {
  background-color: var(--panel-bg-cust-a)
}
.panel .panel-header.bg-cust-b {
  background-color: var(--panel-bg-cust-b)
}
.panel .panel-header.bg-cust-c {
  background-color: var(--panel-bg-cust-c)
}
.panel .panel-header.bg-cust-d {
  background-color: var(--panel-bg-cust-d)
}
.panel .panel-header.bg-cust-e {
  background-color: var(--panel-bg-cust-e)
}
.panel .panel-header.bg-cust-f {
  background-color: var(--panel-bg-cust-f)
}
.panel .panel-header.bg-cust-g {
  background-color: var(--panel-bg-cust-g)
}
.panel .panel-header.bg-cust-x {
  background-color: var(--panel-bg-cust-x)
}
.panel .panel-header.bg-error
,.panel .panel-header.bg-delete
,.panel .panel-header.bg-remove{
  background-color: var(--error)
}
.panel .panel-header i.pad-rt{
  padding-right:0.5rem;
}
.panel .panel-header .panel-btn{
  color:var(--white);
  cursor:pointer;
  padding:0.25rem 0.375rem;
  font-size: 17px;
  opacity: 85%;
  transition: 0.2s opacity;
}
.panel .panel-header .panel-btn[disabled]:hover{
  cursor:initial;
  opacity:75%;
  background-color:rgba(0,0,0,0);
}
.aa-is-dirty span.panel-title::after {
  content: "Unsaved changes";
  font-size: 0.8125rem;
  font-weight: normal;
  font-style: normal;
  text-transform: none;
  margin-left: 1.5rem;
}

.aa-is-dirty span.panel-title {
  font-style: italic;
}
/*.panel .panel-header .panel-btn i{
  padding-right:0.375rem;
}*/
.panel .panel-header .panel-btn ~ .panel-btn{
  margin-left:0.25rem
}

.panel .panel-header .panel-btn:hover{
  opacity:100%;
  background-color: rgba(255,255,255,0.18);
}
.panel .panel-header .panel-btn.panel-btn-cancel{
  padding-left:0.5rem;
  padding-right:0.5rem;
}
.panel .panel-header .panel-btn.panel-btn-save{
  padding-left:0.25rem;
  padding-right:0.25rem;
}
.panel .panel-body{
  border:1px solid #ddd;
  border-top: none;
  background: var(--white);
  padding: 16px 20px 16px 20px;
}
.panel.form-panel .panel-body{
  padding-top:5px;
  padding-bottom:10px;
}
.panel.grid-filter .panel-body{
  padding:20px;
  border:1px solid #f2f2f2;
}
.panel .panel-body .form-group{
  /* Taken from .align-middle */
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  /* Custom styling */
  margin:0;
  border-bottom:1px solid var(--gray);
}
.panel .panel-body .form-group.submit{
  border-bottom:none;
  padding-top:0.75rem;
}
.panel .panel-body .form-group:last-of-type
,.panel .panel-body .form-group.static-text{
  border-bottom-color: transparent;
}
.panel-body .form-group.aa-is-active
,.panel-body .form-group:focus-within
,.panel .panel-body .form-group:last-of-type:focus-within{
  border-bottom-color: #5f90eb;
}
.k-animation-container .k-popup.aa-is-active{
  border-left: 1px solid #5f90eb;
  border-right: 1px solid #5f90eb;
  border-bottom: 1px solid #5f90eb;
  border-top:none;
}
.panel-body .elem-group.form-group:focus-within input{
  background: rgba(0,0,0,0.05);
}
.panel-body .elem-group.form-group:focus-within select{
  background-color: rgba(0,0,0,0.05);
}
.panel-body .form-group input::placeholder{
  color:#777;
}
.panel fieldset .elem-group.has-preview-text .edit-elements{
  display: block;
}
.panel fieldset .elem-group.has-preview-text .preview-text{
  display: none;
}
.panel .panel-body .form-group.static-text{
  font-size:0.875rem;
  padding-top:0.5rem;
}
.panel-body .form-group input
,.panel-body .form-group select
,.panel-body .form-group textarea
,.panel-body .form-group span.form-control{
  margin-bottom: 0;
  border: none;
  outline: none;
  box-shadow: none;
  color:var(--black);
  padding-left:0.5rem;
  font-size:0.875rem;
}
.panel-body .form-group span.form-control.db-text{
  color:#6d6d6d;
  width: 100%;
}
.panel-body .form-group .form-control.db-text.has-tip{
  font-weight: normal;
}
.panel-body .form-group .form-control.db-text.aa-full-w {
  padding: 0;
}
.panel-body .form-group button.form-control:hover
,.panel-body .form-group button.form-control:focus{
  background-color: var(--prog-primary-light);
}
.panel-body .form-group textarea.error{
  margin-bottom:4px;
}
.panel form small.error{
  margin-bottom:2px;
}
.panel-body .form-group span.form-control{
  min-height: 2.125rem;
  padding:0.5rem;
  /*display: inline-block;*/
  display: inline-flex; /* Changed to this for Kendo DatePicker. Need to test with buttons */
  cursor: default;
  pointer-events: auto;
  line-height:1.1875;
}
.panel-body .form-group span.form-control.k-input
,.panel-body .form-group span.form-control.k-picker{
  padding:0;
  background-color:transparent;
}
.panel-body .form-group span.form-control.k-picker.error {
  background-color: var(--input-error-bg);
  color: var(--error);
}
.panel-body .form-group input
,.panel-body .form-group .input-group .input-group-field input
,.panel-body .form-group select{
  height:2.125rem;
}
.panel-body .form-group .cb-wrapper{
  min-height: 2.125rem;
}
.panel-body .form-group input[type=checkbox]{
  margin-left: 0.5rem;
}
.panel-body .form-group label.has-tip{
  font-weight:initial;
}
.panel .panel-body .form-group select{
  background-image: url(/img/assets/select-dropdown-lt.svg) !important;
  background-repeat: no-repeat !important;
  -webkit-transition: background 0 !important;
  transition: background 0 !important;
  background-size: 14px;
}
.panel-body .form-group textarea{
  padding:0;
  width:100%;
  vertical-align: bottom;
}
.panel-body .form-group label{
  padding-right: 0.5rem;
  font-weight: 500;
}
.panel-body .form-group label.has-info-icon{
  display:inline;
  padding-right:0.375rem;
}
.panel-body .form-group label.has-info-icon ~ i{
  display:inline;
  padding-right:0;
  color: #808080;
  cursor:pointer;
  font-size:0.875rem;
}
.panel-body .form-group label.has-info-icon ~ i.has-tip{
  border-bottom:none;
}
.panel-body .form-group label.error{
  line-height: 1.3;
}
.panel-body .form-group label.error.has-info-icon ~ i{
  display:none;
}
.panel-body .form-group label.error.has-info-icon{
  display:block;
}
.panel-body .form-group .cb-wrapper input[type=checkbox] {
    height: 16px;
    border-width: 1px;
    border-style: solid;
    outline: 0;
    border-color: rgba(0,0,0,.25);
    background-color: #fff;
}
.panel-body .form-group .cb-wrapper input[type=checkbox]:checked {
  border-color: #5c7bcb;
  color: #fff;
  background-color: #5c7bcb;
}
fieldset[disabled] .form-group .cb-wrapper input[type=checkbox] {
  opacity: 0.6;
}
/*.panel-body fieldset .form-group[disabled] label*/
.form-panel .form-group.disabled label
,.form-panel .form-group.disabled input
,.form-panel .form-group.disabled select
,.form-panel .form-group.disabled textarea{
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Function Buttons ****************************************************************************/
.panel button.form-control
,.panel .button.form-control{
  color:#777;
  cursor: pointer;
  padding:0.25rem 0.375rem;
}
.panel .button.form-control{
  background: transparent;
}
.panel button.form-control:hover
,.panel button.form-control:focus
,.panel .button.form-control:hover
,.panel .button.form-control:focus{
  color:var(--black);
}
.panel .panel-body fieldset .button.form-control.form-visit-url{
  display:none;
}
.panel .k-grid-toolbar button.k-button{
  color:inherit;
}
.panel .k-grid td button.k-button{
  background-color: #f5f5f5;
  color:#424242;
}
.panel .k-grid td button.k-button:hover
,.panel .k-grid td button.k-button:focus{
  color:var(--black);
  background-color:#ebebeb;
}
.panel button.k-button
,.panel span.k-button{
  background-color:transparent;
  color:#555;
  padding-left:0.5rem;
  padding-right:0.5rem;
}
.panel button.k-button:hover
,.panel button.k-button:focus{
  color:var(--black);
}
.panel .form-group .k-picker > .k-button{
  /*border-color: rgba(0,0,0,.08);*/
  background-image: url(/img/assets/select-dropdown-lt.svg) !important;
  background-repeat: no-repeat !important;
  -webkit-transition: background 0 !important;
  transition: background 0 !important;
  background-position: center;
  background-size: 14px;
}
.panel .form-group .k-picker > .k-button .k-icon{
  display:none;
}
/* Input Group for Element Prefixes *****************************************************************/
.form-panel .input-group{
  margin-bottom: 0;
}
.form-panel .input-group .input-group-label{
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 0.875rem;
  padding: 0.5rem 0 0.5rem 0.5rem;
  height: 2.125rem;
  line-height: 2.125rem;
}
.form-panel .input-group .input-group-label~.input-group-field input{
  padding-left:0.125rem;
}
.form-panel .input-group-label.plain{
  padding-left:0;
  padding-right:1rem;
}
.form-panel .input-group input.small.input-group-field {
    height: 2rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
}
.form-panel .input-group input.input-group-field.has-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.form-panel .input-group .button.small.input-group-button {
  height: 2rem;
  padding-top:0;
  padding-bottom:0;
}
.aa-elem-std .input-group{
  margin-bottom: 0;
}
.aa-elem-std .input-group input{
  margin-bottom: 0;
}
.aa-elem-std .input-group-label {
  /*margin-bottom: 1rem;*/
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.aa-elem-std .input-group-label ~ .input-group-field > input[type=text]
,.aa-elem-std .input-group-label ~ .input-group-field > input[type=number]
,.aa-elem-std .input-group-label ~ .input-group-field > input[type=search]
,.aa-elem-std .input-group-label ~ .input-group-field > input[type=email]{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.aa-elem-std .error{
  color: var(--error);
  font-weight: 500;
  background: transparent;
}

/* *** Disabled (View Only) Form Elements *****************************************************************************/
.panel fieldset[disabled] label.required::after{
  display:none;
}
.panel.form-panel fieldset[disabled]{
  opacity:1;
}
.panel .panel-body fieldset[disabled] select
,.panel .panel-body fieldset[disabled] input
,.panel .panel-body fieldset[disabled] textarea
,.panel .panel-body fieldset[disabled] span.form-control
,.panel .panel-body fieldset[disabled] .input-group .input-group-label
,.panel .panel-body fieldset[disabled] .elem-group-divider{
  background-color: transparent;
  cursor:default;
  color:#6d6d6d;
  opacity: 1;
  -webkit-text-fill-color: #6d6d6d;
}
.panel .panel-body fieldset[disabled] .k-picker{
  background-image: none;
}
.panel .panel-body fieldset[disabled] input[type=checkbox]
,.panel .panel-body fieldset[disabled] input[type=checkbox]~label{
  cursor:default;
}
.panel .panel-body fieldset[disabled] .form-group select{
  background-image: none !important;
  border-color: transparent;
  opacity:1;
}
.panel .panel-body fieldset[disabled] button.form-control
,.panel .panel-body fieldset[disabled] .button.form-control
,.panel fieldset[disabled] button.k-button{
  display:none;
}
.panel .panel-body fieldset[disabled] .button.form-control.form-visit-url{
  display:inline-block;
}
.panel .panel-body fieldset[disabled] span.form-control{
  pointer-events: none; 
}
.panel .panel-body fieldset[disabled] .elem-group.has-preview-text .edit-elements{
  display: none;
}
.panel .panel-body fieldset[disabled] .elem-group.has-preview-text .preview-text{
  display: block;
}
.panel .panel-body fieldset[disabled] .k-dropdownlist .k-input-button{
  visibility: hidden;
}

/* ********************************************************************************************************************/
.panel .elem-group-divider{
  height: 2.125rem;
  line-height: 2.125rem;
  min-width:24px;
  padding-left:8px;
  padding-right:8px;
  text-align:center;
/*  margin-top:4px;
  margin-bottom:4px;*/
}
.panel .elem-group-divider > i{
  line-height: 2.125rem;
}
.form-panel-submit{
  width:100%;
  margin-bottom:0;
  padding-top:10px;
  padding-bottom:10px;
}
.panel .panel-body .elem-gorup select{
  border: 1px solid var(--gray);
  margin-top:4px;
  margin-bottom:4px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.panel .panel-body .elem-group select:focus{
  border-color: var(--dark-gray);
}

.panel .form-control::placeholder{
  color: #aaa;
  opacity: 1;
}

.panel .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--gray);
}

.panel .form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--gray);
}
.panel.form-panel .form-panel-submit{
  font-weight: 500;
  text-transform: uppercase;
}
.panel.form-panel .panel-body .form-feedback-wrapper:first-child .form-feedback{
  margin-top:0.5rem;
  margin-bottom:0.5rem;
}

.panel.form-panel .button.form-panel-submit
,.panel .form-panel .button.form-panel-submit{
  background:var(--prog-accent);
  font-weight: 500;
}
.panel.form-panel .button.form-panel-submit:hover
,.panel.form-panel .button.form-panel-submit:focus
,.panel .form-panel .button.form-panel-submit:hover
,.panel .form-panel .button.form-panel-submit:focus{
  background:var(--prog-accent-hover);
}
.panel.form-panel .form-control.inactive
,.panel .form-panel .form-control.inactive{
  color:var(--gray-text);
}
.panel.form-panel label.has-hover {
  text-decoration: underline;
  text-decoration-style: dotted;
}
.panel.form-panel label > i{
  color: #808080;
  padding-left:0.5rem;
}
.panel.form-panel label > i:hover{
  color: var(--black);
}

/* Added from ApModule meld, but not sure if we wanted it (MC 8/19/24) */
.panel.form-panel .k-picker-solid{
  background-image: none;
}

/* ------ Panel header icon classes ----------------------------------------------------------------------------------*/
/*.panel .panel-header.bg-whse-grid{
  background-color:#585363;
}*/
.panel .panel-header{
  min-height: 44px;
}
.panel .panel-header > .panel-header-content{
  min-height: 28px;
}
.panel .panel-header.bg-delete .panel-title::before
,.panel .panel-header.bg-remove .panel-title::before{
  content:"\f1f8";
  padding-right:0.5rem;
  font:var(--fa-font-solid);
}

.panel .panel-header.bg-grid .panel-title::before{
  content:"\f03a";
  padding-right:0.5rem;
  font:var(--fa-font-solid);
}

/*.panel .panel-header.bg-whse-info{
  background-color:#585363;
}*/
.panel .panel-header.bg-info .panel-title::before{
  /*content:"\f30f";*/
  content:"\f129";
  padding-right:0.5rem;
  font:var(--fa-font-solid);
}

.panel .panel-header.bg-form
,.panel .panel-header.bg-grid-edit
,.panel .panel-header.bg-input{
  background-color:var(--panel-bg-cust-c);
}
.panel .panel-header.bg-form .panel-title::before
,.panel .panel-header.bg-grid-edit .panel-title::before
,.panel .panel-header.bg-input .panel-title::before{
  content:"\f044";
  padding-right:0.5rem;
  font:var(--fa-font-solid);
}

/*.panel .panel-header.bg-whse-action{
  background-color:#7cb342;
}*/
.panel .panel-header.bg-action .panel-title::before{
  /*content:"\e2d1";*/
  content:"\f0ad";
  padding-right:0.5rem;
  font:var(--fa-font-solid);
}

.modal-form-panel {
  padding: 0;
  border: none;
  background: none;
}

.panel .pad-left-only{
  padding: 0 0 0 1rem;
}
@media screen and (min-width: 40em){ 
  .panel .medium-pad-left-only{
    padding: 0 0 0 1rem;
  }
}
@media screen and (min-width: 64.0625em){ 
  .panel .large-pad-left-only{
    padding: 0 0 0 1rem;
  }
}

/* ------ Panel list, scrollable -------------------------------------------------------------------------------------*/
.panel .panel-body.panel-list{
  padding-top:0.25rem;
  /*padding-bottom:0.25rem;*/
  ;
}
.panel .panel-body.panel-list.list-scroll{
  max-height: 325px;
  overflow-y:auto
}
.list-row {
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray);
  
}

.list-row:last-of-type{
  border-bottom:none;
}
.list-row.list-click{
  cursor: pointer;
}
.list-row.list-click:hover{
  background-color:rgba(49,79,142,0.06);
}
.cell.list-icon-wrapper {
  font-size: 1.5rem;
  margin-right: 0.25rem;
  color:var(--primary-color);
  padding-top:6px;
}
.panel-list .data-lbl{
  color:var(--gray-text);
}
ul.list-detail{
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
ul.list-detail li a
,ul.list-detail li span.as-link{
  padding: 0;
  display: inline;
  text-decoration: underline;
  color: var(--black);
  text-decoration-style: dotted;
}
ul.list-detail li a:hover
,ul.list-detail li a:focus
,ul.list-detail li span.as-link:hover
,ul.list-detail li span.as-link:focus{
  text-decoration-style: solid;
  color:var(--link-hover-color);
}
ul.list-detail li {
  margin-right: 1.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}
.cell.list-row-hover-icon{
  font-size:1.75rem;
  color:#999;
  padding:0;
  visibility: hidden;
  margin-left:0;
}
.list-row:hover .list-row-hover-icon{
  visibility: visible;
}

/* ------ Panel Grid Add Form ----------------------------------------------------------------------------------------*/
.panel-body .grid-add-form input[type=text]
,.panel-body .grid-add-form input[type=number]
,.panel-body .grid-add-form input[type=email]
,.panel-body .grid-add-form input[type=date]
,.panel-body .grid-add-form .k-dropdownlist
,.panel-body .grid-add-form .k-combobox

,form.aa-cozy input[type=text]
,form.aa-cozy input[type=number]
,form.aa-cozy input[type=email]
,form.aa-cozy input[type=date]
,form.aa-cozy .k-dropdownlist
,form.aa-cozy .k-combobox{
  height: 32px;
  font-size:0.875rem;
}
.panel-body .grid-add-form .button
,form.aa-cozy .button{
  height:36px;
  margin-bottom:1rem;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}
.panel-body .grid-add-form input[type=radio]
,.panel-body .grid-add-form input[type=checkbox]
,form.aa-cozy input[type=radio]
,form.aa-cozy input[type=checkbox]
{
  margin-top:3px
}
.panel-body .grid-add-form span.input-group-label{
  padding-left:8px;
  padding-right:8px;
}

/* ** Full height panel with grid inside ******************************************************************************/
/* Make grid-container participate in the flex chain when it contains auto-height content */
.grid-container:has(.auto-height-wrapper) {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}

/* Fallback for browsers that don't support :has() */
.grid-container.auto-height-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}
.auto-height-wrapper.grid-x.grid-padding-x {
  flex-grow: 1;
  display: flex;
  min-height: 0;
  /*width: 100%;*/
  /*max-width: 100%;*/
  box-sizing: border-box;
}

.auto-height-wrapper > .cell.panel-auto-height {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  min-height: 0;
}

.panel-auto-height > .panel-header {
  flex-shrink: 0;
  height: auto !important;
}

.panel-auto-height > .panel-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  height: auto !important;
}

.panel-auto-height > .panel-body > .k-grid {
  height: 100% !important;
}