@charset "utf-8"

@font-face{
  font-family: 'Nanum Gothic';
  font-style: normal;
  src: url(/font/NanumGothic.eot);
  src: url(/font/NanumGothic.eot?#iefix) format('embedded-opentype'),
       url(/font/NanumGothic.woff2) format('woff2'),
       url(/font/NanumGothic.woff) format('woff'),
       url(/font/NanumGothic.ttf) format('truetype');
}

/* basic grid template */
#tabletTemplate{
  width: 100%;height: 100%;min-width: 30vw;min-height: 30vh;margin: 0;overflow: auto;font-size: 3vmax;
  display: grid;
  grid-template-areas:
    'header'
    'contents'
    'footer';
  grid-template-rows: 5vmax auto 5vmax;
}
#tabletTemplate *:not(.resetCss *), .restoreCss, .restoreCss * {margin: 0;overflow: auto;box-sizing: border-box;}
#tabletTemplate .resetCss { overflow: initial; }
#tabletTemplate input{text-align:center;background:#fafafa;border-top:#8e8e8e 1px solid;border-left:#8e8e8e 1px solid;border-right:#d2d2d2 1px solid;border-bottom:#d2d2d2 1px solid;height:3vmax;}

#tabletTemplate > #header{
  padding: 0 1vmax;
  grid-area: header;background-color: var(--main-color);
  display: grid;grid-template-columns: repeat(auto-fit, minmax(30%, auto));align-items: center;
}
#tabletTemplate > #header > div[center]{color:#fff;font-weight: bold;}
#tabletTemplate > #header > div[date-navigation]{color:#fff;font-weight: bold;display: flex;gap: 2vmax;justify-content: center;align-items: center;}

/* staff select - header */
.top_sel{position:absolute;top:7px;right:10px;width:170px;height:42px;line-height:42px;text-align:center;color:#fff;font-size:22px;cursor:pointer;overflow: auto;-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;font-weight:bold;padding:0 5px;}
.top_sel span{font-size:22px;color:#fff;}



#tabletTemplate > #contents{grid-area: contents;background-color: var(--light-color);}
#tabletTemplate > #footer{
  padding: 0 1vmax;
  grid-area: footer;background-color: var(--main-color);
  display: grid;grid-template-columns: repeat(auto-fit, minmax(30%, auto));align-items: center;
}
/* end of basic grid template ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* staff-select contetns grid template */
#tabletTemplate > #contents[staff-select]{
  height: 100%;padding: 2vmax 3vmax;
  display: grid;
  grid-template-areas: 
    'title'
    'list';
  grid-template-rows: fit-content(20vh) auto;
  gap: 2vmax 0;
}
#tabletTemplate > #contents[staff-select] > div[title]{font-size:2vmax;font-weight:bold;color: var(--main-color);display: flex;justify-content: center;align-items: center;}
#tabletTemplate > #contents[staff-select] > div[list]{
  height: 100%;overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20%, auto));
  grid-auto-rows: 9vmax;  
  gap: 0.5vmax 0.5vmax;
}
#tabletTemplate > #contents[staff-select] > div[list] > div[item]
{
  border:var(--main-color) 1px solid;background:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow: auto;
  display: grid;  
  grid-template-areas:
    'number photo name'
    'number photo commute';
  grid-template-columns: 1fr 2fr 3fr;
  grid-template-rows: 1fr 1fr;
}
#contents[staff-select] > div[list] > div[item] > div[number]{grid-area: number;color: #fff;background:var(--main-color);font-weight: bold;}
#contents[staff-select] > div[list] > div[item] > div[name]{grid-area: name;font-size: 2vmax;font-weight: bold;}
#contents[staff-select] > div[list] > div[item] > div[photo]{grid-area: photo;border-right:var(--main-color) 1px solid;overflow: auto;}
#contents[staff-select] > div[list] > div[item] > div[commute]{grid-area: commute;padding: 0.5vmax;border-top:var(--main-color) 1px solid;display: flex;gap: 0.5vmax;align-items: center;}
/* end of staff-select contetns grid template -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* service contetns grid template */
#tabletTemplate > #contents[service]{
  height: 100%;
  display: grid;
  grid-template-areas: 'menu list info';
  grid-template-columns: 15vw 20vw auto;
}

/* list contetns grid template */
#tabletTemplate > #contents[list]{
  height: 100%;
  display: grid;
  grid-template-areas: 'menu list';
  grid-template-columns: 15vw auto;
}

#tabletTemplate > #contents[list] > #list { display: flex; flex: 1; }
#tabletTemplate > #contents[list] > #list > [ejs],
#tabletTemplate > #contents[list] > #list > [ejs] > form
{ display: flex; flex-direction: column; gap: 5px; flex: 1; overflow: hidden; margin: 10px; box-sizing: border-box; }

#menu
{
  grid-area: menu;height: 100%;background-color: var(--menu-color);overflow-y: auto;scroll-snap-type: y mandatory;
  display: grid;grid-auto-rows: 5vw;
}
#tabletTemplate > #contents[service] > #list{grid-area: list;height: 100%;background:var(--light-color) url('/img/sub_line.png') repeat-y 100% 0;padding:0 0.5vmax;overflow-y: auto;display: grid;}
#tabletTemplate > #contents[service] > #info{grid-area: info;height: 100%;padding: 0.5vmax;display: grid;overflow-y: hidden;display: grid;background-color: #fff;}

/* left menu */
#menu > div{display: flex;align-items: center;cursor:pointer;border-bottom:var(--light-color) 1px solid;scroll-snap-align: start;}
#menu > div.title{justify-content: center;position: -webkit-sticky;position: sticky;top: 0;background:var(--li-color);color: #fff;cursor: default;font-weight: bold;}
#menu > div:not(.title)::before{display: inline-block;content: "";background-image: url('/img/sub_icon.png');background-size: 0.5em 0.5em;width: 0.5em;height: 0.5em;margin: 0 0.5em;}
#menu > div.over{color: #000;font-weight: bold;background-color: var(--light-color);}

/* ejs loading list common setting */
#tabletTemplate > #contents[service] > #list > div[ejs]{
  overflow-y: auto;scroll-snap-type: y mandatory;
  display: grid;grid-auto-rows: 5vmax;
}
#tabletTemplate > #contents[service] > #list > div[ejs] > div{
  border-bottom: var(--patient-li-border-color) 1px solid;scroll-snap-align: start;
  display: grid;
  align-content: center;align-items: center;
  gap: 0.3vw 0;
}
#tabletTemplate > #contents[service] > #list > div[ejs] > div[list]{cursor: pointer;}
#tabletTemplate > #contents[service] > #list > div[ejs] > div[list].over{background: #d8f8c0;font-weight: bold;}

#tabletTemplate > #contents[service] > #list[mealType] { width: 100%; display: flex; padding: 0.5vmax; }
#tabletTemplate > #contents[service] > #list[mealType] > div[ejs] { width: 100%; display: flex; flex-direction: column; gap: 0.5vmax; }
#tabletTemplate > #contents[service] > #list[mealType] > div[ejs] > li { width: 100%; display: flex; flex: 1; }

/* ejs loading info common settion */
#contents[service] > #info div[ejs]{
  height: 100%;box-sizing: border-box;
  display: grid;
  grid-template-areas: 
    'top'
    'contents';
  grid-template-rows: fit-content(10vh) auto;
  gap: 0.5vmax 0;
}
#contents[service] > #info div[ejs] > div[top]{
  grid-area: top;font-weight: bold;box-sizing: border-box;
  display: grid;
  grid-template-areas: 'title .';
  grid-template-columns: auto fit-content(max-content);
  align-items: center;
}
#contents[service] > #info div[ejs] > div[contents]{grid-area: contents;height: 100%;overflow-y: auto;padding: 0.5vmax;border: 2px dashed gray;box-sizing: border-box;}
#contents > #info div[ejs] > div[button], .buttonArea{display: flex;justify-content: center;align-items: center;gap: 1vmax;flex-basis: auto;font-weight:bold;}
#contents > #info div[ejs] > div[button] div, .buttonArea div{width: 15vw;}

#contents > #info div[ejs] > div[contents] div[time] input{width: 4vmax;}
/* end of contetns grid template --------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* patient list grid template */
#tabletTemplate > #contents[service] > #list[patient]{
  grid-template-areas: 
    'filter'
    '.';
  grid-template-rows: 5vmax auto;
}

/* patient filter */
#filter{grid-area: filter;padding: 0.5vmax 0;}
#filter > div{display: flex;justify-content: center;align-items: center;width: 99%;height: 100%;background-color: var(--li-color);border:var(--li-border-color) 1px solid;cursor:pointer;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;color:#fff;font-weight: bold;}
#filter > div *{font-size: 1.5vmax;font-weight: normal;}

/* patient list */
#list[patient] > div[ejs] > div{
  overflow: hidden;
  grid-template-areas:
    'name record'
    'personalInfomation record';
  grid-template-columns: auto fit-content(6vw);
}
#list[patient] > div[ejs] > div[list] > div[record]{grid-area: record;box-sizing:border-box;padding: 0.5vmax;display: flex;align-content: center;justify-content: center;}

#tabletTemplate div[name]{grid-area: name;display: flex;align-items: center;text-overflow: ellipsis;white-space: nowrap;overflow: auto;} /* ellipsis nor working */
#tabletTemplate div[name] > *[status]{font-size: 1.3vw;color: red;}
#tabletTemplate div[personalInfomation]{grid-area: personalInfomation;font-size: 1.4vw;text-overflow: ellipsis;white-space: nowrap;overflow: auto;}
/* end of patient list grid template------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* care contents grid template */
#contents[service] > #info div[ejs=care]{
  height: 100%;box-sizing: border-box;
  display: grid;
  grid-template-areas: 
    'top'
    'contents'
    'note'
    'writer';
  grid-template-rows: fit-content(10vh) auto 100px fit-content(10vh);gap: 0.5vmax 0;
}

#info div[ejs=care] > div[contents]{
  height: 100%;overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, auto));
  grid-template-rows: repeat(auto-fill, minmax(30%, auto));
  gap: 1vmax;
}
#info div[ejs=care] > div[contents] > li{grid-template-rows: repeat(auto-fit, minmax(50%, auto));}
#info div[ejs=care] > div[contents] > li > div:first-child{font-weight: bold;display: flex;flex-direction: column;align-items: center;gap: 0.5vmax;}
#info div[ejs=care] > div[contents] > li > div[action]{display: flex;align-items: center;justify-content: center;gap: 0.5vmax;}

#info div[ejs=care] > div[writer]{
  height: 100%;
  grid-area: writer;
  display: grid;
  grid-template-columns: auto fit-content(100vw);
  grid-template-areas:
    'staff button';
}
#info div[ejs=care] > div[writer] > div[writeStaff]{
  height: 4.2vmax;
  font-weight: bold;background-color: #d8f8c0;
  grid-area: staff;
  display: flex;align-items: center;justify-content: center;
}
/* end of care contents grid template----------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* care meal grid template */
#list[patient] div[list=meal] > div[record]{
  padding: 0 !important;
  display: grid !important;
  grid-template-areas:
    'breakfast lunch'
    'dinner snack' !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 0.3vmax 0.3vmax !important;
}
#list[patient] div[list=meal] > div[record] > div{font-size: 1.3vmax;font-weight: normal;padding: 0.1vmax;color:#000;background:#fff;border:#d5d5d5 1px solid;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-sizing:border-box;}
#list[patient] div[list=meal] > div[record] > div.on{color:#fff;background:#ef7c00;border:#ef7c00 1px solid;}
#list[patient] div[list=meal] > div[record] > div[breakfast]{grid-area: breakfast;}
#list[patient] div[list=meal] > div[record] > div[lunch]{grid-area: lunch;}
#list[patient] div[list=meal] > div[record] > div[dinner]{grid-area: dinner;}
#list[patient] div[list=meal] > div[record] > div[snack]{grid-area: snack;}

#contents[service] > #info div[ejs=meal]{
  height: 100%;box-sizing: border-box;
  display: grid;
  grid-template-areas: 
    'top'
    'mealInformation'
    'contents'
    'note'
    'button';
  grid-template-rows: fit-content(10vh) fit-content(10vh) auto 100px fit-content(10vh);gap: 0.5vmax 0;
}

#info div[ejs=meal] > div[contents]{
  overflow-y: hidden;
  display: grid;
  grid-template-areas: 
    'careMeal'
    'tubeFeeding';
  grid-template-rows: auto fit-content(20vh);gap: 0.5vmax 0;
}

#info div[ejs=meal] > div[contents] > div[careMeal]{
  grid-area: careMeal;height: 100%;padding: 0.5vmax;border: var(--main-color) 2px solid;
  overflow-y: auto;
  display: grid;
  grid-auto-rows: minmax(max-content, auto);gap: 0.5vmax 0;
}
#info div[ejs=meal] > div[contents] > div[careMeal] > div[meal], 
#info div[ejs=meal] > div[contents] > div[careMeal] > div[therapeuticDiet]{
  border:var(--table-border-color) 1px solid;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
  display: grid;
  grid-template-areas:
    'title kind'
    'title amount';
  grid-template-columns: 10vw auto;
  grid-template-rows: fit-content(max-content);
}
#info div[ejs=meal] > div[contents] > div[careMeal] > div[meal] > div[title], 
#info div[ejs=meal] > div[contents] > div[careMeal] > div[therapeuticDiet] > div[title]{
  font-weight: bold;background-color: var(--table-th-color);border-right: var(--table-border-color) 1px solid;
  grid-area: title;
  display: flex;gap: 0.5vmax;flex-direction: column;justify-content: center;align-items: center;
}
#info div[ejs=meal] > div[contents] > div[careMeal] > div[meal] > div[title] > div[time]{display: flex;gap: 2%;justify-content: center;align-items: center;}
#info div[ejs=meal] > div[contents] > div[careMeal] > div[meal] > div[kind], #info div[ejs=meal] > div[contents] > div[careMeal] > div[therapeuticDiet] > div[kind]{padding: 0.5vmax;grid-area: kind;}
#info div[ejs=meal] > div[contents] > div[careMeal] > div[meal] > div[amount]{
  padding: 0.5vmax;border-top: var(--table-border-color) 1px solid;
  grid-area: amount;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, auto));gap: 0.5vmax;
}
#info div[ejs=meal] > div[contents] > div[careMeal] > div[snack]{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40%, auto));gap: 0 0.5vmax;
}
#info div[ejs=meal] > div[contents] > div[careMeal] > div[snack] > div[item]{
  border:var(--table-border-color) 1px solid;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
  display: grid;
  grid-template-areas:
    'title amount';
  grid-template-columns: 20vw auto;
}
#info div[ejs=meal] > div[contents] > div[careMeal] > div[snack] > div[item] > div[title]{
  font-weight: bold;background-color: var(--table-th-color);border-right: var(--table-border-color) 1px solid;
  grid-area: title;
  display: flex;gap: 1vmax;align-items: center;justify-content: center;
}
#info div[ejs=meal] > div[contents] > div[careMeal] > div[snack] > div[item] > div[title] > div[time]{display: flex;gap: 2%;justify-content: flex-start;align-items: center;}
#info div[ejs=meal] > div[contents] > div[careMeal] > div[snack] > div[item] > div[amount]{padding: 0.5vmax;display: flex;justify-content: flex-start;align-items: center;}

#info div[ejs=meal] > div[contents] > div[tubeFeeding]{
  grid-area: tubeFeeding;height: 100%;overflow-y: auto;
  display: grid;
  grid-template-areas:
    'title'
    'contents';
  grid-template-rows: 2.5vmax auto;gap: 0.5vmax 0;align-items: end;
}
#info div[ejs=meal] > div[contents] > div[tubeFeeding] > div[contents]{grid-area: contents;height: 100%;overflow-y: auto;}
#info div[ejs=meal] > div[contents] > div[tubeFeeding] > div[contents] div[item]{
  display: grid;
  grid-template-columns: 1fr 3fr 2fr 2fr 1fr;
}
#info div[ejs=meal] > div[contents] > div[tubeFeeding] > div[contents] div[item] > div[kind] > select{height: 3vmax;}
#info div[ejs=meal] > div[contents] > div[tubeFeeding] > div[contents] div[item] > div[time]{display: flex;gap: 2%;justify-content: center;align-items: center;}
/* end of care meal grid template--------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* care toilet grid template */
#info div[ejs=toilet]{
  display: grid !important;
  grid-template-areas: 
    'top'
    'contents'
    'note'
    'button' !important;
  grid-template-rows: fit-content(10vh) auto fit-content(100px) fit-content(10vh) !important;gap: 0.5vmax 0 !important;
}

#info div[ejs=toilet] > div[contents]{
  grid-area: contents;
  display: grid;
  grid-template-areas: 
    'main'
    'etc';
  grid-template-rows: max-content auto;gap: 0.5vmax 0;
}

#info div[ejs=toilet] > div[contents] > div[main]{
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, auto));
  grid-template-rows: 16vh;
  gap: 1vmax;
}
#info div[ejs=toilet] > div[contents] > div[main] > li{
  overflow: auto;background-color: #fff;border: #d5d5d5 1px solid;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;box-sizing: border-box;
  display: grid;grid-template-rows: 1fr 1.5fr;place-items: stretch;
}
#info div[ejs=toilet] > div[contents] > div[main] > li > div{display: flex;justify-content: center;align-items: center;}
#info div[ejs=toilet] > div[contents] > div[main] > li > div[title]{font-weight: bold;background-color: var(--table-th-color);border-bottom:var(--table-border-color) 1px solid;}
#info div[ejs=toilet] > div[contents] > div[main] > li > div[action]{gap: 0.5vmax;}

#info div[ejs=toilet] > div[contents] > div[etc]{grid-area: etc;box-sizing:border-box;}
#info div[ejs=toilet] > div[contents] > div[etc].diaper.catheter{
  display: grid;
  grid-template-areas: 
    'diaper catheter';
  grid-template-columns: 64% 35%;gap: 0 0.5vmax;
}
#info div[ejs=toilet] > div[contents] > div[etc].diaper.catheter div[divButtonItem] *{padding: 0;}
#info div[ejs=toilet] > div[contents] > div[etc].diaper.catheter .button_area > div{padding: 0.3vmax;}
#info div[ejs=toilet] > div[contents] > div[etc] > div[diaper]{
  height: 100%;box-sizing:border-box;
  grid-area: diaper;
  display: grid;
  grid-template-areas:
    'title'
    'info'
    'list';
  grid-template-rows: 2.5vmax max-content auto;gap: 0.5vmax 0;align-items: end;  
}
#info div[ejs=toilet] > div[contents] > div[etc] > div[diaper] div[divButtonItem]{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20%, auto));gap: 0.5vmax;
}

#info div[ejs=toilet] > div[contents] > div[etc] > div[catheter]{
  height: 100%;box-sizing:border-box;
  grid-area: catheter;
  display: grid;
  grid-template-areas:
    'title'
    'info'
    'list';
  grid-template-rows: 2.5vmax max-content auto;gap: 0.5vmax 0;align-items: end;
}

#info div[ejs=toilet] > div[contents] > div[etc] > div[diaper] > div[list],
#info div[ejs=toilet] > div[contents] > div[etc] > div[catheter] > div[list]{
  height: 100%;overflow-y: auto;align-self: stretch;border: var(--main-color) 2px solid;background:#fff;padding : 0.5vmax;
  display: flex;flex-wrap: wrap;align-content: flex-start;gap: 0.5vmax;
}
#info div[ejs=toilet] > div[contents] > div[etc] > div[diaper] > div[list] > div[item],
#info div[ejs=toilet] > div[contents] > div[etc] > div[catheter] > div[list] > div[item]{
  background: #fff2cc;padding : 0.5vmax;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-sizing:border-box;
  display: flex;align-items: center;gap: 0.5vmax;
}
/* end of care toilet grid template------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* care bath grid template */
#list[patient] div[list=bath] > div[record] > div[time]{
  width: 4.6vw;font-size: 1.3vmax;padding: 0.5vmax;font-weight: normal;color:#fff;background:#ef7c00;border:#ef7c00 1px solid;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-sizing:border-box;
  display: flex;align-items: center;justify-content: center;
}

#info div[ejs=bath]{
  display: grid !important;
  grid-template-areas: 
    'top'
    'contents'
    'note'
    'button' !important;
  grid-template-rows: fit-content(10vh) auto fit-content(100px) fit-content(10vh) !important;gap: 0.5vmax 0 !important;
}

#info div[ejs=bath] > div[contents] div[divButtonItem]{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, auto));gap: 0.5vmax;
}
/* end of care bath grid template--------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* care excretion grid template */
#info div[ejs=excretion] > div[contents]{
  grid-area: contents;height: 100%;
  display: grid;
  grid-template-areas:
    'state'
    'record';
  grid-template-rows: max-content auto;gap: 0.5vmax 0;
}

#info div[ejs=excretion] > div[contents] > div[record]{height: 100%;overflow-y: auto;}
#info div[ejs=excretion] > div[contents] > div[record] div[item]{
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 2fr;
}
/* end of care excretion grid template--------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* care position grid template */
#list[patient] div[list=position] span[yc-state]{font-size: 1.3vmax;font-weight: normal;padding: 0.1vmax 0.2vmax;color:#fff;background:red;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-sizing:border-box;}
#list[patient] div[list=position] span[yc-state].purple{background: purple;}

#info div[ejs=position]{
  display: grid !important;
  grid-template-areas: 
    'top'
    'contents'
    'button' !important;
  grid-template-rows: fit-content(10vh) auto fit-content(10vh) !important;gap: 0.5vmax 0 !important;
}

#info div[ejs=position] > div[contents]{
  grid-area: contents;height: 100%;
  display: grid;
  grid-template-areas:
    'position'
    'prevent-yc';
  grid-template-rows: auto fit-content(max-content);gap: 0.5vmax 0;
}

#info div[ejs=position] > div[contents] > div[position]{grid-area: position;height: 100%;overflow-y: auto;}
#info div[ejs=position] > div[contents] > div[position] div[item]{
  display: grid;
  grid-template-columns: 19% auto 14%;
}
/* end of care position grid template----------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* program service grid template */
/* patient list */
#tabletTemplate > #contents[service] > #list[program] > div[ejs]{
  height: 100%;overflow-y: auto;scroll-snap-type: y mandatory;
  display: grid;grid-auto-rows: 8vmax;
}

#list[program] > div[ejs] > div{
  height: 100%;overflow-y: auto;
  display: grid;
  grid-template-areas:
    'name name'
    'information record';
  grid-template-columns: auto fit-content(5vmax);
  grid-template-rows: auto fit-content(5.5vmax);
  align-content: stretch !important;
}
#list[program] > div[ejs] > div[list] > div[name]{grid-area: name;min-width: 0;height: 100%;overflow: auto;display: flex;align-items: flex-end;}
#list[program] > div[ejs] > div[list] > div[name] *{white-space: nowrap;overflow: auto;text-overflow: ellipsis;}

#list[program] > div[ejs] > div[list] > div[information]{
  grid-area: information;height: 100%;overflow: auto;
  display: grid;
  grid-template-rows: max-content auto auto;
  align-items: center;align-content: center;
}
#list[program] > div[ejs] > div[list] > div[information] *{font-size: 1.4vmax;text-overflow: ellipsis;white-space: nowrap;}
#list[program] > div[ejs] > div[list] > div[information] > div[kind]{display: flex;gap: 0.3vmax;align-items: center;}

#list[program] > div[ejs] > div[list] > div[record]{grid-area: record;padding: 0.5vmax;display: flex;justify-content: center;align-items: center;}

/* program contents */
#info div[ejs=program]{
  display: grid !important;
  grid-template-areas: 
    'top'
    'contents'
    'button' !important;
  grid-template-rows: fit-content(10vh) auto fit-content(10vh) !important;gap: 0.5vmax 0 !important;
}

#info div[ejs=program] > div[contents]{
  grid-area: contents;height: 100%;
  display: grid;
  grid-template-areas:
    'master'
    'record';
  grid-template-rows: fit-content(50vh) auto;gap: 0.5vmax 0;
}

#info div[ejs=program] > div[contents] > div[master] div[writer]{display: grid;grid-template-columns: 2fr 1.5fr;gap: 0 0.5vmax;align-items: center;}
#info div[ejs=program] > div[contents] > div[master] div[writer] > *:visible{}

#info div[ejs=program] > div[contents] > div[record]{height: 100%;overflow-y: auto;}
#info div[ejs=program] > div[contents] > div[record] div[item]{
  display: grid;
  grid-template-columns: 2fr 3fr 3fr 3fr;
}
#info div[ejs=program] > div[contents] > div[record] div[item] > div:first-child{grid-row: 1 / span 2;}
#info div[ejs=program] > div[contents] > div[record] div[item] > div:last-child{grid-column: 2 / span 3;border-top:var(--table-border-color) 1px solid;}

#info div[ejs=program] > div[contents] > div[record] div[item] > div[note]{width: 100%;display: grid;grid-template-columns: 10fr 1fr;gap: 0 0.5vmax;}
/* end of program list grid template------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* patient initial assessment grid template */
#list[patient] div[list=initial_assessment] > div[record]{
  padding: 0 !important;
  display: grid !important;
  grid-template-areas:
    'social'
    'nursing' !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 0.3vmax 0.3vmax !important;
}
#list[patient] div[list=initial_assessment] > div[record] > div{font-size: 1.3vmax;font-weight: normal;padding: 0.1vmax;color:#000;background:#fff;border:#d5d5d5 1px solid;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-sizing:border-box;}
#list[patient] div[list=initial_assessment] > div[record] > div.on{color:#fff;background:#ef7c00;border:#ef7c00 1px solid;}
#list[patient] div[list=initial_assessment] > div[record] > div[social]{grid-area: social;}
#list[patient] div[list=initial_assessment] > div[record] > div[nursing]{grid-area: nursing;}

#info div[ejs=initial_assessment]{
  display: grid !important;
  grid-template-areas: 
    'top'
    'contents';
  grid-template-rows: fit-content(10vh) auto !important;gap: 0.5vmax 0 !important;
}

/* end of patient initial assessment grid template---------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */