/*Global variables and MIXINS only
    PLEASE DO NOT CREATE STYLES HERE
    Globl Styles are to go into Site.scss
*/
/*Color Variables*/
/*#region Theme Colours*/
/*#endregion*/
/*#region Eye Colours*/
/*#endregion*/
/*Mix Ins - 
 * usage:   .box { @include border-radius(10px); }  
*/
.grid-container {
  display: grid;
  grid-gap: 2px;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-template-rows: auto;
  grid-auto-columns: minmax(1fr, max-content);
  grid-auto-rows: auto;
}
.grid-container .no-gap {
  grid-gap: 0;
}

.grid-item {
  /*used for auto grid*/
}

.grid-columns-fill {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-rows-fill {
  grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-rows-fit {
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-columns-fit {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-columns-auto {
  display: grid;
  grid-gap: 0px;
  grid-template-areas: "mainheader mainheader mainheader mainheader mainheader actionButtons" "main main main main main main" "datafooter datafooter datafooter datafooter datafooter datafooter";
  box-sizing: border-box;
  grid-template-rows: fit-content(1px) 1fr fit-content(1px);
  grid-auto-rows: min-content;
  grid-auto-columns: auto;
  height: 100%;
}

.dox-page-background {
  border: 2px solid whitesmoke;
  box-sizing: border-box; /* Restore border-box - kendo likes to sneak content-box back in, especially in popup windows */
}

.grid-left-quarter {
  display: grid;
  grid-gap: 10px;
  box-sizing: border-box;
  grid-template-areas: "sideColumn main .";
  grid-template-columns: fit-content(35%) 1fr fit-content(5px);
  grid-template-rows: 1fr;
  grid-auto-rows: min-content;
}

.grid-right-quarter {
  display: grid;
  grid-gap: 0px;
  box-sizing: border-box;
  grid-template-areas: "sideColumn main .";
  grid-template-columns: fit-content(5px) 1fr fit-content(35%);
  grid-template-rows: 1fr;
  grid-auto-rows: min-content;
}

.grid-top-quarter {
  display: grid;
  grid-gap: 0px;
  box-sizing: border-box;
  grid-template-areas: "sideColumn sideColumn sideColumn sideColumn sideColumn" "main main main main main";
  grid-template-columns: 1fr;
  grid-template-rows: fit-content(35%) 1fr fit-content(10px);
  grid-auto-rows: min-content;
}

.grid-data-screen-with-header {
  display: grid;
  grid-gap: 0px;
  grid-template-areas: "mainheader mainheader mainheader mainheader actionButtons actionButtons" "main main main main main main" "datafooter datafooter datafooter datafooter datafooter datafooter";
  box-sizing: border-box;
  grid-template-rows: fit-content(1px) 1fr fit-content(1px);
  grid-auto-rows: min-content;
  grid-auto-columns: auto;
  height: 100%;
}
.grid-data-screen-with-header > .grid-header {
  grid-area: mainheader;
}
.grid-data-screen-with-header > .grid-footer {
  grid-area: datafooter;
}

.grid-left-column {
  grid-area: sideColumn;
}

.grid-right-column {
  grid-area: sideColumn;
}

.grid-top-row {
  grid-area: header;
}

.grid-header {
  background-color: whitesmoke;
  grid-area: header;
  padding: 6px;
}

.grid-action-buttons {
  grid-area: actionButtons;
  text-align: right;
  background-color: whitesmoke;
}

.grid-menu {
  grid-area: menu;
  background-color: whitesmoke;
}

.grid-criteria {
  grid-area: criteria;
  background-color: whitesmoke;
  padding: 6px;
}

.grid-results {
  grid-area: results;
  /*    height: calc(100%);
  width: calc(100%);*/
}

.grid-main {
  grid-area: main;
  padding: 0 7px;
  /* height: calc(100% - 22px);
   width: calc(100% - 22px);*/
  min-height: 0;
}

.grid-footer {
  background-color: whitesmoke;
  grid-area: footer;
}

.grid-col-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-template-rows: max-content max-content;
}

/*Search Screen Layout Designs*/
.grid-criteria-top {
  display: grid;
  grid-gap: 0px;
  box-sizing: border-box;
  grid-template-areas: "header header header actionButtons actionButtons" "criteria criteria criteria criteria criteria" "results results results results results" "footer footer footer footer footer";
  grid-template-rows: fit-content(35%) fit-content(35%) 1fr fit-content(100px);
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: auto;
}
.grid-criteria-top > .grid-criteria .four-line > .k-multiselect-wrap {
  height: unset !important;
  overflow: auto !important;
}
.grid-criteria-top > .grid-criteria .two-line > .k-multiselect-wrap {
  height: unset !important;
  overflow: auto !important;
}

.grid-results {
  display: grid;
  grid-template-areas: "resultsheader resultsheader resultsheader resultactionbuttons resultactionbuttons" "results results results results results" "resultsfooter resultsfooter resultsfooter resultsfooter resultsfooter";
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: fit-content(35%) 5fr fit-content(300px);
  grid-auto-rows: auto;
}
.grid-results > .grid-main {
  grid-area: results;
}
.grid-results > .grid-header {
  grid-area: resultsheader;
}
.grid-results > .grid-action-buttons {
  grid-area: resultactionbuttons;
}
.grid-results > .grid-footer {
  grid-area: resultsfooter;
}

.grid-criteria-left {
  display: grid;
  grid-gap: 0px;
  box-sizing: border-box;
  grid-template-areas: "header header header actionButtons actionButtons" "criteria results results results results" "footer footer footer footer footer";
  grid-template-columns: fit-content(500px) 1fr 1fr 1fr 1fr;
  grid-template-rows: fit-content(35%) 1fr fit-content(50px);
  grid-auto-rows: auto;
}
.grid-criteria-left > .grid-criteria {
  overflow-y: auto;
  padding-left: 5px;
}

.grid-criteria-right {
  display: grid;
  grid-gap: 0px;
  box-sizing: border-box;
  grid-template-areas: "header header header actionButtons actionButtons" "results results results results criteria" "footer footer footer footer footer";
  grid-template-rows: fit-content(100px) 1fr fit-content(50px);
  grid-template-columns: 1fr 1fr 1fr 1fr fit-content(500px);
  grid-auto-rows: auto;
  overflow-y: auto;
}
.grid-criteria-right > .grid-criteria {
  overflow-y: auto;
  padding-right: 5px;
}

.grid-auto-cols-6 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
  grid-gap: 0.5rem;
  grid-auto-flow: row;
  /*   grid-template-columns: auto auto auto auto auto auto;


  grid-auto-columns: minmax(200px, 0.3fr);
      grid-template-columns: auto;
   grid-auto-flow: row dense;
   grid-auto-columns: minmax(min-content,1fr);
   grid-auto-rows: max-content; */
}

.align-left {
  justify-self: left;
}

.align-right {
  justify-self: right;
}

.grid-cell {
  grid-column: auto/span 1;
  grid-row-gap: 3px;
}

.grid-col-span-2 {
  grid-column: auto/span 2;
}

.grid-col-span-3 {
  grid-column: auto/span 3;
}

.grid-col-span-4 {
  grid-column: auto/span 4;
}

.grid-col-span-5 {
  grid-column: auto/span 5;
}

.grid-col-span-end {
  grid-column: auto/end;
}

.grid-col-span-row {
  grid-column: 1/end;
}

/*
    Try a Fixed Header Tabler

*/
.fixed-header {
  /* width: 400px;*/
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

.fixed-header tbody {
  display: block;
  width: 100%;
  overflow: auto;
  height: 100%;
}

.fixed-header thead tr {
  display: block;
  border-bottom: 2px solid lightgrey;
}

.fixed-header th, .fixed-header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}