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

/* set A4 */
body {
    width: 210mm;
    height: 297mm;
}

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

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #d4e2d7;
}

/* 以下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;
}

.subtitle {
    padding: 0 0 0.8rem 0;
}

#update {
    padding: 0.1rem 1rem 0.1rem 1rem;
}

#inputdate {
    width: 145px;
    height: 2rem;
    /* border-radius: 1rem; */
    padding: 0.4rem;
}

#inputoporder {
    width: 50px;
    height: 2rem;
    /* border-radius: 1rem; */
    padding: 0.4rem;
}

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

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

.block {
    background-color: white;
    padding: 0.6rem 1rem 0.6rem 1rem;
    width: 90%;
    outline: 1px gray solid;
}

.block_title {
    font-size: 1.2rem;
    font-weight: 600;
}

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

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

#inputname,
#inputrecnumb {
    width: 7rem;
}

#style_1 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

/* style patient */
#patient {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#style_2 {
    width: 280px;
}

/* style result123 */
#result1,
#result2,
#result3 {
    font-size: 1.1rem;
    background-color: rgb(214, 211, 211);
}

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

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

@media print {

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

    header {
        margin: 0.8rem 0 0 0;
    }

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