html {
  background: #F2F2F2;
  font-family: "lato", "Arial", sans-serif;
  font-size: 16px; 
}

body {
  padding: 0px;
  margin: 0px;
  display: grid;
  height: 100svh;
  grid-template-columns: 230px auto;
  grid-template-rows: 60px auto;
  grid-template-areas: 
    "header header"
    "menu main";
  color: #202020;
}

a:visited {
  color: black;
}

a {
  color: #303030;
  text-decoration: none;
}

body.empty {
  padding: 0px;
  margin: 0px;
  display: grid;
  height: 100svh;
  grid-template-columns: auto;
  grid-template-rows: auto 40px;
  grid-template-areas: 
    "main"
    "footer";
}
.hidden {
  display: none;
}


[data-showOnDevice] {
  display: none;
}

#header {
  padding-left: 20px;
  grid-area: header;
  align-items: center;
  display: flex;
  background: white;
}

#header h1 {
  vertical-align: middle;
}

#menu {
  grid-area: menu;
  /* display: flex; */
  background: #46475D;
  padding: 10px;
  color: white;
  overflow: auto;
}

#menu ul {
  padding: 0px;
  margin: 0px;
  margin-top: 20px;
}

#menu li {
  padding: 10 10px;
  display: block;
}

#main {
  grid-area: main;
  /* display: flex; */
  background: #F2F2F2;
  overflow: auto;
}

#footer {
  /* display: flex; */
  background: #F2F2F2;
  vertical-align: middle;
}

#footer p {
  width: 100%;
  text-align: center;
  font-size: 80%;
}

#pageHeader {
  padding: 10px 32px 0px 32px;
}

#pageTitle {
  display: flex;
  margin-top: 21px;
  margin-bottom: 32px;
  width: 100%;
}

#pageTitle .buttonsList.onRight {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
  align-items: flex-start;
}

#pageTitleContainer h1 {
  margin: 0px;
}

#pageTitleContainer h2 {
  font-weight: normal;
  font-size: 16pt;
  margin: 8px 0px 0px 0px;
}

#filterFormContainer {
  margin: 10px 32px 32px 32px;
  padding: 16px;
  background-color: white;
}

#content {
  padding: 32px 32px 32px 32px;
  background-color: white;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/MaterialIcons-Regular.ttf);
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype"); }

.material-icons, .icon {
  font-size: 1.5rem;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga'; }

.material-icons.md-18 {
  font-size: 1.125rem; }

.material-icons.md-16 {
  font-size: 1rem; }

.material-icons.md-14 {
  font-size: 0.875rem; }

.material-icons.md-12 {
  font-size: 0.75rem; }


/*
 * buttons
 */
.buttonsList {
  display: flex;
  align-items: center;
  gap: 10px;
  /* justify-content: center; */
}

.buttonsList.onRight{
  justify-content: flex-end;
}

.button {
  cursor: pointer;
  display: inline-flex;
  padding: 0 16px;
  text-decoration: none;
  /* line-height: 35px; */
  align-items: center;
  height: 36px;
}

.button.large > .icon {
  margin-right: 5px;
}

.button.large {
  background: #46475D;
  border-radius: 3px;
  color: white;
}

.button.small {
  background: white;
  border-radius: 100%;
  color: black;
  width: 36px;
  padding: 0px 0px;
  justify-content: center;
}


/*
 * Titles
 */
form h3 {
  font-family: "cabin", "Arial", sans-serif;
  font-size: 1.5rem;
  font-weight: normal;
  color: #46475D;
  padding-bottom: 8px;
  border-bottom: 1px solid #EFEFEF;
  margin-bottom: 16px;
}


/*
 * Grid management
 */
.gridRow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grip-gap: 16px;
}

.grid-2 {
  grid-column-end: span 2;
}
.grid-3 {
  grid-column-end: span 3;
}
.grid-4 {
  grid-column-end: span 4;
}
.grid-5 {
  grid-column-end: span 5;
}
.grid-6 {
  grid-column-end: span 6;
}
.grid-7 {
  grid-column-end: span 7;
}
.grid-8 {
  grid-column-end: span 8;
}
.grid-9 {
  grid-column-end: span 9;
}
.grid-10 {
  grid-column-end: span 10;
}
.grid-11 {
  grid-column-end: span 11;
}
.grid-12 {
  grid-column-end: span 12;
}



/*
 * Loader
 */
#loading {
  width: 100%;
  height: 100%;
  top: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.3);
  z-index: 8000;
}
#loading .loading-content {
  top: 50%;
  left: 50%;
  position: absolute;
  margin-right: -50%;
  background: #FFFFFF;
  padding: 10px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  box-shadow: black 0px 0px 10px 0px;
}

#loading .loading-content svg {
  position: absolute;
  z-index: 10000;
  top: 2px;
  left: 2px;
}
#loading .loading-content p {
  margin-bottom: 0px;
}



/*
 * Modal window
 */
div.modalContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000080;
  z-index: 1000;
}

div.modal {
  position: fixed;
  top: 7%;
  background-color: white;
  right: 23%;
  left: 23%;
  border-radius: 5px;
    
}

div.modal.modalSize-xs {
  right: 35%;
  left: 35%;
}
div.modal.modalSize-m {
  right: 23%;
  left: 23%;
}

div.modalTitle {
  background: #F2F2F2;
  color: #565656;
  display: flex;
  padding: 10px 20px;
  align-items: center;
  border-radius: 5px;
}

div.modalTitle h1 {
  flex: auto;
  font-size: 100%;

}

div.modalTitle .modalClose {
  flex: initial;
  cursor: pointer;
}

div.modalContent {
  padding: 20px;
  overflow-y: auto;
  max-height: 60vh;
}

div.modalHeader div.buttonsList {
  float: right;
}

div.modalHeader div.buttonsList .button.small {
  background-color: #F2F2F2;
  color: #46475D;
}


div.modalBottom {
  border-top: 1px solid #F2F2F2;
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

div.modalBottom > .left {
  display: inline-flex;
  justify-content: left;
  gap: 6px;
}

div.modalBottom > .middle {
  display: inline-flex;
  justify-content: center;
  gap: 6px;
}

div.modalBottom > .right {
  display: inline-flex;
  justify-content: right;
  gap: 6px;
}

.modalButtonOk {
  background: #40B771 !important;
}



/*
 * Tabs
 */
.tabsHeader {
  padding: 0px 32px;
}
div.tabs ul {
  margin: 0px;
  padding: 0px;
  overflow: auto;
  list-style: none;
}

div.tabs ul li {
  display: inline-block;
  padding: 0 8px;
}

div.tabs ul li.activeTab {
  border-bottom: 4px solid #dd4343;
}

div.tabs ul li a {
  text-decoration: none;
  color: black;
}

div.tabs ul li.activeTab a {
  color: #dd4343;
}

div.tabsContent {
  background-color: white;
  padding: 32px;
}

div.tabContent {
  display: none;
}



/*
 * form
 */
.field {
  margin-bottom: 20px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0; }

legend {
  width: 90%;
  display: block;
  padding: 15px;
  font-size: 0.875rem;
  margin-bottom: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #D1EDFB;
  color: #184861;
}

.field label {
  padding-bottom: 8px;
  font-size: 0.875rem;
  color: #666666;
  display: block;
  text-align: left;
  /* padding-top: 1px;  */
}

/* form[data-showMode='1'] .field .label { */
/*   width: 40%; */
/* } */

.field label.radio {
  display: inline-block;
}

form:not([data-showMode='1']) .field .label.required:after
{
  color: #DD4343;
  content: '*';
  margin-left: 4px;
}

input, select, textarea, div.fake-select, .cancelFormButton {
  width: auto;
  /* height: 35px; */
  outline: none;
  border: 1px solid #C9C9C9;
  padding: 8px;
  color: #323232;
  background: #FFFFFF;
  font-size: 0.8125rem;
  font-family: "lato", "Arial", sans-serif;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-weight: 600;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

input.error, select.error, textarea.error {
    border-color: #DD4343;
}

input[type="radio"] {
  vertical-align: middle;
}

label {
  font-size: 0.875rem;
  color: #666666;
  /* width: 40%; */
  /* display: block; */
  /* float: left; */
  /* text-align: left; */
  padding-top: 1px; }

label.radio {
  margin-right: 2ex;
}

form[data-showMode="1"] .fieldGroup {
  display: grid;
  grid-template-columns: 40% auto;
  grid-gap: 1ex;
}

form:not([data-showMode='1']) .fieldGroup .fieldLabel {
  display: none;
}

form .fieldGroup:has(.fieldInput:empty) {
  display: none;
}

.fieldInput {
  display: grid;
  grid-template-columns: fit-content(50%) auto;
  grid-gap: 1ex;
}

.fieldInput .field .showMode {
  grid-column: 1/3 !important;
}

.buttonsForm {
  display: inline-flex;
  gap: 6px;
}

input[type="submit"] {
  color: #FFFFFF;
  border: 0px;
  background: #40B771;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; }

input[type="submit"]:hover {
    background: #309459;
    box-shadow: none;
    -webkit-transition: background 0.3s ease-in;
    -moz-transition: background 0.3s ease-in;
    transition: background 0.3s ease-in;
}

input[type="reset"], .cancelFormButton {
  border: 0px;
  margin: 0 16px 0 24px;
  border-bottom: 2px solid #666666;
  color: #666666;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  height: 4ex;
  border-radius: 0px;
}

input[type="reset"]:hover, .cancelFormButton:hover {
    border-bottom: 2px solid #DD4343;
    color: #DD4343;
}

div.showMode .fieldIsChecked:before {
  content: 'check';
  font-size: 1.5rem;
  font-family: 'Material Icons';
  color: #40B771;
}

div.showMode .fieldIsUnchecked:before {
  content: 'block';
  font-size: 1.5rem;
  font-family: 'Material Icons';
  color: #DD4343;
}

div.showMode .empty:after {
  content: '\2014';
}


form[data-showMode='1'] div.field {
  display: grid;
  grid-template-columns: 40% auto;
  grid-gap: 1ex;
}

form[data-showMode='1'] div.field label {
  grid-column: 1/2;
  /* grid-row: 1; */
}

form[data-showMode='1'] div.field div.showMode {
  grid-column: 2/2;
  /* grid-row: 1; */
}

button.updateFormButton {
  font-family: "lato", "Arial", sans-serif;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  line-height: 35px;
  color: #FFFFFF;
  background: #46475D;
  border: 0px;
  margin-bottom: 3ex;
}

button.updateFormButton i {
  font-size: 0.875rem;
  padding-right: 1.5ex;
}

.field p.error {
  margin: 0px;
  margin-top: .7ex;
  color: #DD4343;
}

/*
 * Special field form
 */
input[name="zipCode"],
input[name="birthPlaceZipCode"]
{
  width: 14ex;
}

form .field ul.listField
{
  margin: 0px;
  padding: 0px;
}

form .field ul.listField li
{
  margin: 0px;
  padding: 0px;
  display: block;
}

form div.field div.list {
  width: 40ex;
}

form div.field div.list button {
  width: 32px;
  padding: 0px;
}

form div.field div.list button i {
  font-size: 0.875rem;
}

form div.field div.list .listInput {
  display: grid;
  grid-template-columns: auto 32px;
  grid-gap: 16px;
}

form div.field div.list div.listContainer {
  padding-top: 8px;
  display: grid;
  grid-template-columns: auto 32px;
  grid-gap: 16px;
}

form div.field div.list select.list {
  height: 18ex;

}

form div.field div.list div.listContainer div.listButtons button {
  margin-bottom: 8px;
  height: 35px;
}

/*
 * Filter forms
*/
.filterForm fieldset {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.filterForm input
{
  width: 100%;
  box-sizing: border-box;
}



/*
 * Tables
 */
table {
  width: 100%;
  border: 0px;
  border-collapse: collapse;
  border-spacing: 0px;
}

table th, table td {
  padding: 0.7em 1.0em;
  text-align: left;
}

table > thead {
  position: sticky;
  top: 0px;
}

table > thead > tr {
  background-color: #DD4343;
  color: white;
  height: 40px;
  font-weight: 600;
}

table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

i.sort-icon {
  vertical-align: middle;
  padding-left: 3px;
}

div.paging-loading {
  text-align: center;
}
div.paging-loading > img {
  height: 32px;
}

i.sort-icon .asc-icon,
i.sort-icon .desc-icon {
  opacity: 0.5;
}

.sort-desc i.sort-icon .desc-icon,
.sort-asc i.sort-icon .asc-icon
{
  opacity: 1 !important;
}

/* table > thead > tr th { */
/* } */





/* width < 768 -- Mobile Device */
@media screen and (max-width: 767px) {
  [data-hideOnDevice*="phone"] {
    display: none !important;
  }

  [data-showOnDevice*="phone"] {
    display: initial !important;
  }

  body {
    grid-template-columns: auto;
    grid-template-areas: 
      "header"
      "main";
      font-size: 0.875rem;
  }

  #menu {
    display: none;
  }

  #pageHeader {
    padding: 10px 15px 0px 15px;
  }

  .breadcrumb {
    font-size: 80%;
  }

  #content {
    padding: 0px;
  }

  .button {
    padding: 0 8px;
  }
  .button > .icon + span {
    display: none;
  }

  .button > .icon {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }

  #pageTitle h1 {
    font-size: 1.625rem;
  }
  #pageTitle h2 {
    font-size: 1.125rem;
  }

  div.modal {
    display: grid;
    /* width: 100%; */
    grid-template-columns: 100%;
    grid-template-rows: min-content auto min-content;
    grid-template-areas:
      "modalHeader"
      "modalContent"
      "modalBottom";
    right: 0 !important;
    left: 0 !important;
    top: 0;
    bottom: 0;
    border-radius: 0;
  }

  div.modal > form {
    grid-area: modalContent;
    display: grid;
    /* width: 100%; */
    grid-template-columns: 100%;
    grid-template-rows: auto min-content;
    grid-template-areas:
      "modalContent"
      "modalBottom";
    max-height: calc(100svh - 54.75px);
  }

  div.modalTitle {
    border-radius: 0;
    grid-area: modalHeader;
  }

  div.modalContent {
    grid-area: modalContent;
  }

  div.modalBottom {
    grid-area: modalBottom;
  }

  div.modalContent {
    max-height: initial;
  }

  div.field {
    display: block;
  }

}
/*
 * Special render for login webpage
 */
#login {
  display: flex;
  min-height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#login fieldset{
  border-radius: 10px;
  border: 0px;
  padding: 32px;
  background-color: white;
}

#login input[type='password'],
#login input[type='text']
{
  width: 40ex;
  background-color: #F2F2F2;
}



/*
 * Configuration panel
 */
#configurationPanel {
  display: flex;
  min-height: 80%;
}

#configurationPanel > .verticalMenu {
  background-color: white;
  width: 20ex;
  border-right: 1px solid #F0F0F0;
}

#configurationPanel > .verticalMenu ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#configurationPanel > .verticalMenu ul li {
  margin: 0px;
  padding: 0px;
  border-bottom: 1px solid #F0F0F0;
}

#configurationPanel > .verticalMenu ul li.selected {
  background: #E8E8E8;
  border-right: 3px solid red;
}

#configurationPanel > .verticalMenu ul li i {
  margin-right: 2ex;
}

#configurationPanel > .verticalMenu ul li a {
  padding: 2ex 1ex 2ex 2ex;
  display: block;
  min-height: 2.5ex;
}

#configurationPanel > .verticalMenu ul li a:hover {
  background-color: #F0F0F0;
}

#mainConfigPanel {
  width: 100%;
}