/* App Font */
@font-face {
  font-family: 'Events'; font-style: normal; font-weight: 300 900; font-display: swap; 
  font-named-instance: "Regular"; src: url('../fnt/opensans.woff2') format('woff2'); }

@font-face {
  font-family: 'Events'; font-style: Italic; font-weight: 300 900; font-display: swap; 
  font-named-instance: "Italic"; src: url('../fnt/opensans-italic.woff2') format('woff2'); }

/* Root Vairables and Responsive Font Size defaults */
:root { 
  --bgScrollTrack: transparent;
  --bgScrollThumb: #8dbeeb;
  --custScroll: var(--bgScrollThumb) var(--bgScrollTrack);

  font-size: clamp(1rem, 0.8807rem + 0.5089vw, 1.125rem);
  font-weight: 400; }

/* Base reset */
*, *::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } 
html { overflow-y: scroll;	scroll-behavior: smooth; }
input, button, textarea, select, optgroup { font: inherit; }
button { overflow: visible; }
button, select { outline: none; text-transform: none; }
button, html input[type=button],
input[type=reset], input[type=submit] { appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
textarea { overflow: auto; resize: vertical; }
ol { list-style: decimal; }
ul, li { list-style: none; }
p { margin: 0 0 1.5rem 0; }
img, picture { max-width: 100%; height: auto; } 
fieldset, img { border: 0; }

/* Custom Scrollbars */
::-webkit-scrollbar { margin-block: 2px; width: 0.42rem; }
::-webkit-scrollbar-track { background-color: var(--bgScrollTrack); }
::-webkit-scrollbar-thumb	{ background-color: var(--bgScrollThumb); border-radius: 0.5rem; border: 1px solid #ffffff; }

/*scrollbar-gutter: stable;*/

/* scroll styles for Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--custScroll); }

/* Global Defaults */
html, body {
  position: relative; color: #2a485a; 
  font-family: 'Events', sans-serif;
  line-height: 1.5; overflow: hidden;
  text-rendering: optimizeSpeed; 
  font-variant-ligatures: normal; 
  background: rgb(159,211,253);
  background: linear-gradient(169deg, rgba(159,211,253,1) 0%, rgba(224,197,252,1) 100%); }

/* Links */
a {
  color: #0175bd; outline: none; transition: all 0.4s ease;
  text-decoration: none; background-color: transparent; }

a:active, a:hover {  
  color: #0395f0; outline: none; }

a:focus {
  outline: 1px dashed #22b0e8; }

/* Headings */
h1, h2 { color: #03415e; font-weight: 700; }
h3, h4 { color: #474747; font-weight: 400; }
h5, h6 { color: #474747; font-weight: 400; } 
h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; } h4 { font-size: 1rem; }
h5 { font-size: 0.95rem; } h6 { font-size: 0.90rem; }

h1, h2 { margin: 0 0 0.5rem; }
h3, h4 { margin: 0; }
h5, h6 { margin: 0; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }

/* Date Picker - Table*/
#ui-datepicker-div {
  font-size: 14px;
  border: 1px solid #3a5769;
  background-color: #ffffff; }

#ui-datepicker-div table {
  width: 100%; border-collapse: collapse;
  border-spacing: 0; }

#ui-datepicker-div table tr th {
  padding: 6px; text-align: center;
  font-weight: normal; text-transform: uppercase;
  border-top: 2px solid #cdd9dc;
  border-left: 1px solid #cdd9dc;
  border-bottom: 2px solid #cdd9dc;
  background: #ffffff; }

#ui-datepicker-div table td {
  padding: 0px; vertical-align: top;
  border-left: 1px solid #cdd9dc;
  border-bottom: 1px solid #cdd9dc; }

#ui-datepicker-div table td a {
    display: block; padding: 3px;
    text-align: center;  }

#ui-datepicker-div table th:first-child,
#ui-datepicker-div table td:first-child {
  border-left: 0; }

/* Zebra striping */
#ui-datepicker-div tr:nth-of-type(odd) { 
  background: #e9f3f7; }

.ui-datepicker-title {
  padding: 0.25rem;
  text-align: center; 
  font-size: 15px; font-weight: 500;
  text-transform: uppercase; }

.ui-datepicker-header {
  position: relative; background-color: #efefef; }

.ui-datepicker-prev {
  position: absolute; overflow: hidden;
  top: 3px; left: 0; text-indent: -50rem;
  width: 26px; height: 26px; cursor: pointer;  
  background-repeat: no-repeat;
  background-image: url(../uix/prev.svg); 
  background-size: 1.5rem; z-index: 99; }

.ui-datepicker-next {
  position: absolute; overflow: hidden;
  top: 3px; right: 3px; text-indent: -50rem;
  width: 26px; height: 26px; cursor: pointer;  
  background-repeat: no-repeat;
  background-image: url(../uix/next.svg); 
  background-size: 1.5rem; z-index: 99; }

  /*background-image: url(../uix/power.svg); background-size: 1.35rem; */

/* Forms */
input[type="text"], input[type="password"], 
select, textarea {
  padding: 0.25rem;
  font-size: .92rem; color: #03415e;
  outline: 0; border: 0; 
  border-radius: 0.25rem 0.25rem 0 0;
  transition: all 0.3s;
  border-bottom: 2px solid #d7dfe0; }

input:focus {
  border-bottom: 2px solid #24b59a; }

input[type="file"],
input[type="file"]:focus {
  border: 0; }  

input[type=submit] {
  width: auto; overflow: visible; 
  padding: 0.25rem 0.75rem; color: #ebf0f2;
  font-weight: 400; text-transform: uppercase; 
  border-radius: 0.5rem; border: 0;
  cursor: pointer; background: #0064a4; }

input[type=button] {
  width: auto; overflow: visible; 
  padding: 0.25rem 0.75rem; color: #004342;
  font-weight: 400; border-radius: 0.5rem; border: 0;
  cursor: pointer; background: #7cefed; }  

input::file-selector-button {
  padding: 0.25rem 0.5rem 0.3rem; margin: 0.25rem 0.5rem 0.25rem 0;
  color: #004342; font-size: 0.92rem; letter-spacing: 1px;
  cursor: pointer; border: 0; border-radius: 0.35rem; 
  background-color: #7cefed; }

select {
  padding-block: 0.25rem;
  width: auto; color: #0064a5; 
  background-color: #ffffff; }  

abbr {
  color: #9e1448; font-weight: 400; font-size: 0.92rem; }

/* buttons - radio and checkbox */
.rdo, .chk {
  position: relative; margin: 0; }

.rdo [data-option], .chk [data-option] {
  position: absolute; opacity: 0; z-index: 100; }

.rdo input:checked + label:before,
.chk input:checked + label:before {
	background: #ffffff; border: 2px solid #1a73e8; }

.rdo input:checked + label:after,
.chk input:checked + label:after {
  transform: scale(1); }

.chk label {
  position: relative; display: block;
  padding: 0 0 0 2rem; cursor: pointer; }

.rdo label {
  position: relative; display: block; 
  padding: 0 0 0 2rem;
  width: auto; cursor: pointer; }
  
.rdo label:before {
  content: ""; position: absolute; 
	width: 26px; height: 26px; left: 0; top: 0;
  border-radius: 50%; border: 2px solid #79849a; }

.rdo label:after {
  content: ""; position: absolute;
  width: 14px; height: 14px; left: 6px; top: 6px;	
  border-radius: 50%; background: #1a73e8;
  transform: scale(0); transition: 0.3s ease; }

.chk label:before {
  content: ""; position: absolute; 
	width: 26px; height: 26px; left: 0; top: 0;
  border-radius: 0.25rem; border: 2px solid #79849a; }

.chk label:after {
  content: "\2714"; position: absolute; 
	font-size: 1.25rem; font-weight: 400; 
  left: 4px; top: 2px; line-height: 1;
  border-radius: 2px; color: #1a73e8;
  transform: scale(0); transition: 0.3s ease; }  

/* Layout and Grids */
.grid {
  position: relative; margin: 0.5rem; 
  display: grid; height: calc(100svh - 1rem); 
  width: 768px; margin-inline: auto;
  grid-template-columns: 100%;
  grid-template-rows: 85px 1fr 44px;
  grid-template-areas: "header" "main" "footer"; 
  border-radius: 1rem; 
  backdrop-filter: blur(5px);
  background-color: rgba(233, 238, 240, 0.60); }

/* App Header */  
.header {
  grid-area: header; display: flex; padding: 0.25rem;
  justify-content: space-between;
  height: 75px; margin: 0.4rem;
  border-radius: 1rem 1rem 0 0; background-color: #ffffff; }

.nav-top {
  display: grid; grid-gap: 0.5rem; 
  grid-auto-flow: column;
  place-items: end; }

.nav-top a {
  position: relative; overflow: hidden;
  display: inline-block; text-indent: -50rem;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center; }

.nav-ftr {
  padding: 0.25rem 0 0;
  display: grid; grid-gap: 0.5rem; 
  grid-auto-flow: column;
  place-items: end; }

.nav-ftr a {
  position: relative; overflow: hidden;
  display: inline-block; text-indent: -50rem;
  width: 28px; height: 28px; 
  background-repeat: no-repeat;
  background-position: center center; }  

.lnk-power { background-image: url(../uix/power.svg); background-size: 1.35rem; }
.lnk-home { background-image: url(../uix/home.svg); background-size: 1.35rem; }
.lnk-guest { background-image: url(../uix/add-guest-c.svg); background-size: 1.35rem; }
.lnk-accounts { background-image: url(../uix/account.svg); background-size: 1.35rem; }

.nav-top li:nth-child(1) { 
  width: 65px;

  /*@media (max-width: 440px) {
    width: 55px; } */
}

/* Site Logo for Administrator */
.site-logo a {  
  display: block; position: relative; overflow: hidden;
  width: 154px; height: 65px;  text-indent: -50rem;
  background: url(../uix/hmrdwt-logo.svg) no-repeat 0 0; 

  /*@media (max-width: 440px) {
    width: 178px; height: 55px; }*/
}

/* Main section */
.main {
  grid-area: main; margin: 0 0.4rem;
  height: calc(100svh - 150px); 

  @media (max-width: 768px) {
    height: calc(100svh - 133px); }

}

.main-cards {
  display: block; padding: 1rem; 
  margin: 0 0.5rem 0.3rem 0.3rem; 
  border-radius: 0.5rem; background: #ffffff; }

.hdr-main {
  position: relative; padding: 0; margin: 0.3rem 0.3rem 0.75rem; 
  font-size: 1.5rem; font-weight: 300; line-height: 1.2; }

.hdr-group {
  margin: 0 0 0.4rem; padding: 0.25rem 0.5rem;
  color: #3a5769; font-size: 1.1rem; font-weight: 400; 
  text-transform: uppercase; border-radius: 0.4rem; 
  background: #ffffff; }

.hdr-group dfn {
  color: #747474; font-style: normal; text-transform: capitalize; }  

/* Login Page */
#loginLyr {
  display: grid; place-content: center;
  margin: 2rem auto 0; padding: 1rem; width: 240px; 
  border-radius: 1rem; background: #ffffff; 
  box-shadow: 0 10px 20px 0 rgba(153, 153, 153, 0.25); }
  
.text-danger {
  color: #cf1c4f; font-size: 0.80rem; }

/* Forms Styling */
#frmPost { 
  position: relative; overflow: hidden;
  height: calc(100svh - 150px); 

  @media (max-width: 768px) {
    height: calc(100svh - 133px); }

}

.lyr-content {
  display: grid; position: relative;
  grid-template-columns: 1fr 2fr; gap: 10px; 
  height: calc(100%); }

h4.lstHd {
  margin: 0 0 0.25rem; padding: 0.4rem 0.4rem 0.25rem;
  color: #ffffff; background: #1497d9; }

h4.frmHd {
  margin: 0 0 0.5rem; padding: 0.25rem 1rem;
  color: #522e00; font-size: 1.15rem; font-weight: 500;
  background-color: #fff4e5; }

/* System Messages */  
#Msg {
  display: none; position: absolute; padding: 0.5rem 1rem; 
  color: #453303; font-size: 1rem;
  top: 25%; left: 65%; width: 20rem;
  transform: translateY(-50%) translateX(-50%);  
  border-radius: 0.5rem; border: 2px solid #d4c49b;  
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  background-color: #ffebb2; z-index: 9999; }

.error {
  color: #f34573; font-size: 0.92rem; }  
  
/* Data Fields Styling - right column of form page */
.lyr-form {
  padding: 0 0 1rem; 
  height: calc(100svh - 150px);
  overflow-y: scroll; 
  background-color: #ffffff; 

  @media (max-width: 768px) {
    height: calc(100svh - 133px); }

}

.frm-fields {
  position: relative; padding: 0 0 2rem; }    

.fld-data {
  position: relative; display: grid; row-gap: 0.5rem;
  margin: 0.5rem; }

.row-field {
  position: relative; padding: 0.25rem 0.5rem 0.5rem;
  display: grid;  border-radius: 0.25rem; }

.row-field label {
  color: #616161; width: 100%; font-size: .90rem; 
  text-transform: uppercase; }

.row-field:focus-within,
.row-options:focus-within,
.row-status:focus-within { 
  outline: 1px dashed #abd7cf;
  background-color: #e6fcf8; }

.row-field:focus-within label,
.row-options:focus-within label {
  color: #005e42; }

.fld-data-grp, 
.fld-counts {
  position: relative; margin: 1rem;
  display: grid; row-gap: 0.5rem;
  padding: 0.25rem 1rem 1rem;
  border: 1px solid #d5d5d5;
  border-radius: 0.75rem; }

.fld-data-grp legend, 
.fld-counts legend {
  position: relative; margin: 0 0 0.5rem -0.5rem;
  padding: 0.25rem 0.75rem; color: #ffffff;
  min-width: 120px;
  border-radius: 0.15rem; background: #4fc11f; }

[data-size="dz-name"] { width: 30rem; }
[data-size="dz-name"] input { width: 29rem; }

[data-size="dz-address"] { width: 40rem; }
[data-size="dz-address"] input { width: 39rem; }

[data-size="dz-mobile"] { width: 9rem; }
[data-size="dz-mobile"] input { width: 8rem; }

.row-options {
  position: relative; display: grid; 
  grid-template-columns: 110px 60px;
  grid-column-gap: 10px; width: 180px; }

.row-options div:first-of-type {
  padding: 0.25rem 0; }
  
.row-status {
  position: relative; padding: 0.25rem 0; }

[data-size="dz-count"] { 
  width: 2.5rem; display: none; 
  text-align: center; } 

.grp-btns {
  position: relative; margin: 0rem 1rem 2.5rem; }

.grp-btns [type="button"] {
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  color: #ffffff; border-radius: 1.5rem;
  text-transform: uppercase; 
  background: #22b0e8 url(../uix/save-guest.svg) no-repeat 0.5rem center;
  background-size: 1.70rem; }

.grp-btns [type="button"]:focus {
  outline: 1px dashed #22b0e8; }

.lst-btns {
  display: grid; grid-gap: 1rem; margin: 2rem 0 0;
  grid-template-columns: repeat(3, fit-content(300px));

  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }

}

.lst-btns li a {
  display: inline-block;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  color: #ffffff; border-radius: 1.5rem;
  text-transform: uppercase; 
  background-color: #22b0e8;
  background-repeat: no-repeat;
  background-position: 0.5rem center; }

.btn-add { background-image: url(../uix/add-guest.svg); background-size: 1.50rem; }
.btn-search { background-image: url(../uix/search.svg); background-size: 1.60rem; }
.btn-cloud { background-image: url(../uix/export.svg); background-size: 1.80rem; }
.btn-expense { background-image: url(../uix/account-w.svg); background-size: 1.60rem; }

.grd-stats {
  display: grid; grid-gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 1rem; }

.crd-stats {
  position: relative; padding: 0.5rem; 
  display: grid; place-content: center; 
  border-radius: 0.5rem; text-align: center;
  box-shadow: 0 3px 5px 0 rgba(153, 153, 153, 0.25); }

.crd-stats dd {
  line-height: 1.2; }  

.crd-stats i {
  display: block; font-style: normal; font-size: 0.90rem; }  
 
.crd-stats:nth-child(1) { background-color: #ebfff0; }
.crd-stats:nth-child(2) { background-color: #fffceb; }
.crd-stats:nth-child(3) { background-color: #ffe8ec; }
.crd-stats:nth-child(4) { background-color: #fceeff; }
.crd-stats:nth-child(5) { background-color: #ebfaff; }

.crd-stats dt {
  font-size: 1.75rem; }

/* Search Page */
#data {
  position: relative; padding: 1rem; }

.box-utils {
  margin: 0 0 0.5rem; padding: 0 1rem;
  display: grid; grid-gap: 1rem; 
  grid-template-columns: auto 120px;
  justify-content: space-between; }

#totCnt i {
  color: #d61378; font-style: normal; 
  font-size: 1.5rem; font-weight: 550; }

#exDiv { margin: 0 1rem; }
#exDiv .lst-btns { margin: 0; }

.grd-guest {
  display: grid; margin: 0 0 1.5rem; padding: 0 0 0.75rem;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px; grid-row-gap: 5px; 
  border-top: 1px solid #dadfe8; 
  border-bottom: 1px solid #dadfe8; 
  box-shadow: 0 3px 6px 0 rgba(153, 153, 153, 0.15); }

.info-guest { grid-area: 1 / 1 / 2 / 4; }
.grd-invite { grid-area: 2 / 1 / 3 / 3; }
.grd-utils { grid-area: 2 / 3 / 3 / 4; }
.invited { border-color: #00b392; }

.info-guest {
  display: flex; margin: 0 0 0.25rem;
  padding: 0.25rem 0.5rem;
  font-weight: 500; align-items: center;  
  justify-content: space-between; 
  background-color: #f9f9f9; }

.invited .info-guest {
  background-color: #d8fff8; }

.grd-invite {
  display: grid; grid-gap: 0.5rem; padding: 0 0 0 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); }

.grd-invite dl {
  position: relative; padding: 0.25rem; 
  display: grid; place-content: center; 
  border-radius: 0.5rem; text-align: center;
  border: 1px solid #aeb4bd; }
 
.grd-invite dl:nth-child(1) { background-color: #ebfff0; }
.grd-invite dl:nth-child(2) { background-color: #fffceb; }
.grd-invite dl:nth-child(3) { background-color: #ffe8ec; }
.grd-invite dl:nth-child(4) { background-color: #fceeff; }

.grd-invite dd {
  font-size: 0.72rem; text-transform: uppercase; }

.grd-invite dl[class^="src-"]  {
  width: 90px; background-color: #e8fdff; }

.grd-invite dl.src-1 { background-color: #ebfff0; }
.grd-invite dl.src-2 { background-color: #fffceb; }
.grd-invite dl.src-3 { background-color: #ffe8ec; }
.grd-invite dl.src-4 { background-color: #fceeff; }

.grd-utils {
  display: grid; grid-gap: 0.5rem;
  padding: 0 0.5rem 0 0;
  grid-auto-flow: row dense; }

.lst-relation {
  display: grid; grid-gap: 0.15rem; justify-content: end;
  grid-template-columns: 24px 24px 24px; }

.lst-relation li { 
  display: inline-block; width: 24px; height: 24px; 
  background-repeat: no-repeat; }
  
.inf-family { background-image: url(../uix/family.svg); background-size: 1.2rem; }
.inf-friend { background-image: url(../uix/friend.svg); background-size: 1.2rem; }
.inf-common { background-image: url(../uix/common.svg); background-size: 1.2rem; }
.inf-invited { background-image: url(../uix/check.svg); background-size: 1.2rem; }

.lst-actions {
  display: grid; padding: 0.5rem 0 0; 
  grid-gap: 0.5rem; place-content: end;
  grid-template-columns: 34px 34px; }

.lst-actions a {
  position: relative; overflow: hidden;
  display: inline-block; padding: 0.5rem;
  text-indent: -50rem; border-radius: 50%;
  width: 34px; height: 34px; 
  background-repeat: no-repeat;
  background-position: center center; }  

.lnk-invite { background-color: #39ae41; background-image: url(../uix/invite.svg); background-size: 1.2rem; }
.lnk-delete { background-color: #efefef; background-image: url(../uix/trash.svg); background-size: 1.2rem; }
.lnk-edit { background-color: #129bdf; background-image: url(../uix/pencil.svg); background-size: 1.2rem; }


/* Expense List */
.grd-expense {
  margin: 0 0 1rem; padding: 0.5rem;
  display: grid; grid-gap: 10px;
  grid-template-columns: 3fr 1fr;
  border-top: 1px solid #dadfe8;
  border-bottom: 1px solid #dadfe8;
  box-shadow: 0 3px 6px 0 rgba(153, 153, 153, 0.15); }

.grd-expense i {
  display: block; font-style: normal;
  color: #7f082a; font-size: 12px; line-height: 1; 
  text-transform: uppercase; }

.paid-desc {
  display: grid; place-content: start; 
  grid-gap: 10px; }

.paid-action {
  display: grid; place-content: end; 
  grid-gap: 10px; }

.by-boy {
  height: 30px;
  background-size: 1.5rem;
  background-repeat: no-repeat;    
  background-position: center right;
  background-image: url(../uix/boy-line.svg); }

.by-girl {
  height: 30px;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  background-position: center right; 
  background-image: url(../uix/girl-line.svg); }

/* Admin Site Footer Styling */
.footer {
  grid-area: footer; display: flex; margin: 0 0.4rem 0.4rem;
  padding: 0 0.75rem 0 0.5rem; color: #777; font-size: .80rem;
  align-items: center;  justify-content: space-between; 
  background-color: #ffffff; border-radius: 0 0 1rem 1rem; }


@media (max-width: 768px) {
  .grid {
    position: relative; margin: 0; 
    display: grid; height: calc(100svh); 
    width: 100%; }

  [data-size^="dz-"] { width: 100%; }
  [data-size^="dz-"] input { width: 100%; }
} 

.msg-code {
  margin: 1rem 0 0.5rem; line-height: 1.3;
  font-size: .86rem; color: #79383a;
}