* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

li {
    margin-left: 1rem;
    /* 沒有上面這行的話，marker會落到container之外！ */

    list-style-position: outside;
    /* 其實不用設、default就如上面這樣，但要學！如此把marker放在內容的外面，這樣第二行的開始才不會跟marker對齊！ */
}

html {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body {
    width: 210mm;
    height: 297mm;

    display: flex;
    flex-direction: column;
    background-color: blanchedalmond;
    align-items: center;
}

.block {
    outline: 1px gray solid;

    background-color: white;
    padding: 0.6rem 1rem 0.6rem 1rem;
    width: 90%;
}

/* 以下menu */
#menu {
    display: flex;
    flex-direction: row;
}

#menu>div {
    border: 1px rgba(0, 0, 0, 0.6) solid;
    box-shadow: 0 7px 30px -10px rgba(150, 170, 180, 0.5);
    background-color: lightgray;
    padding: 0.1rem 1.2rem 0.1rem 1.2rem;
    font-size: 1.25rem;
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
}

#menu>div:hover {
    box-shadow: 0 0 10px rgba(33, 33, 33, .2);
    clip-path: inset(-1rem -1rem 0 -1rem);
    cursor: pointer;
}

#menu>div>a {
    all: unset;
}

/* 以上menu */

header {
    font-size: 2rem;
    font-weight: 600;
    padding: 0 0 0.8rem 0;
}

#inputsection {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#inputsectionhide {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#inputname,
#inputrecnumb {
    height: 2.5rem;
    border-radius: 1rem;
    border: 1px solid black;

    width: 7rem;
}

#input2>div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#inputthawdate,
#inputetdate,
#inputpregdate {
    height: 1.9rem;
    width: 7rem;
    border-radius: 0.5rem;
    border: 1px solid black;
    margin: 0 0 0.1rem 0;
}

#inputoonumber {
    width: 2.0rem;
    height: 1.25rem;
    border: 1px solid black;
}

/* 下面讓input type=number時右方不會有arrow(會檔住輸入區域) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#inputemp {
    display: flex;
    flex-direction: row;
}

#inputemp-nx {
    display: inline-block;
    width: 1.5rem;
}

#patient {
    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
}

.documentemcon {
    height: 1.5rem;
    width: 3.15rem;
    border: 1px solid black;
}

#patient>div:nth-child(1) {
    width: 25%;
    /* background-color: aqua; */
}

#patient>div:nth-child(2) {
    width: 33%;
    /* background-color: rgba(127, 255, 144, 0.824); */
}

#patient>div:nth-child(3) {
    width: 42%;
    /* background-color: rgba(155, 127, 255, 0.721); */
}

.patient_thet {
    display: flex;
    flex-direction: row;
    justify-content: baseline;
}

hr {
    margin: 0.35rem 0 0.35rem 0;
    border-top: 1px dotted gray;
    border-radius: 5px;
}

#location {
    overflow-y: auto;
    text-align: center;
}

.container:hover {
    background-color: rgba(255, 166, 0, 0.5);
}

/* 把live-server莫名奇妙inject的code刪掉，目前先這樣 */
#forest-ext-shadow-host {
    display: none;
}

/* 這樣可以讓列印的時候不會有頁首跟頁尾！ */
@page {
    margin: 0;
}

@media print {

    /* 下面這行這樣才可以讓印的時候限制在一頁*/
    body {
        height: 100%;
    }

    header {
        margin: 0.8rem 0 0 0;
    }

    /* 不需顯示 */
    #menu,
    #inputsection {
        display: none;
    }
}