#app.success{
    border:solid 10px #4DF08A;
}

#app.info{
    border:solid 10px #6cb1ff;
}

#app.warning{
    border:solid 10px #F0D24D;
}

#app.error, #app.newtype,#app.confirm{
    border:solid 10px #F0554D;
}

#app.waiting{
    border:solid 10px transparent;
}

#app.fade-out {
    border: solid 10px transparent;
    transition: border-color 5s;
}

#message-container{
    height:100%;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;


    header{
        display:flex;
        width:100%;
        font-size: 60%;
        flex-direction: row;
        justify-content: space-between;
        .header-note{
            font-weight: normal;
            color: #2e892b;
            margin-left:1em;
        }
    }

    footer{
        text-align: left;
        width:100%;
    }

    color: #111;
    .logo{
        font-family: sans-serif;
        font-size: 250%;
        font-weight: bold;
        color: #022a58;
        line-height:1.1;
    }
    .guide{
        font-size: 200%;
    }
    .id{
        font-weight: bold;
    }
    .fullName{
        font-size:180%;
        font-weight:bold;
        color: #0e7effcd;
        margin: 0;
        letter-spacing: 0.15em;
        font-feature-settings:palt;
        line-height:1;
        rt{
            font-size: 30%;
        }
    }
    p{
        margin: 0;
    }
    .duty{
        display: flex;
        flex-direction: column;
        align-items: center;

        table{
            margin:0;
            border-collapse: collapse; 
        }
        th{
            text-align: right;
            padding: 0 0.5em;
        }
        td{
            text-align: left;
            padding: 0 0.5em;
            .sep{
                color:#888;
                margin: 0 0.5em;
            }
            .times{
                color:#888;
                margin: 0 0.2em;
            }

        }
        tr{
            td,th{
                box-shadow: inset 0 -0.4em yellow;
                padding-bottom: 0.1em;
                border-bottom: 0.3em solid transparent;
            }
        }
        tr.today{
            td,th{
                box-shadow: inset 0 -0.4em lightgreen;
                padding-bottom: 0.1em;
                border-bottom: 0.3em solid transparent;
            }
        }        
    }
    .note{
        font-weight: bold;
        color: #EB723B
    }
    .material-icons, .material-icons-outlined, .material-icons-round, .material-icons-sharp, .material-icons-two-tone, .material-symbols-rounded, .material-symbols-outlined {
        vertical-align: text-bottom;
        font-size: 110%; /* テキストのサイズに合わせる */
      }
}

.logo{
    font-family: ISCIE;
    font-size: 300%;
    color: #6cb1ff;
}