html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.footer {
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

td {
  text-align: center;
}

.footer {
    position: fixed;
    width: 100%;
    height: 40px;
    bottom: 0;
}

.footer .container {
    position: fixed;
    text-align: right;
    right: 0;
    bottom: 0;
}

.table-header {
    text-align: center;
}

.content-container {
    padding-top: 80px;
}

.table {
    border: 1px solid black;
}

.card {
    margin-bottom: 20px;
    border: 1px solid black;
}

h3 {
    text-align: center;
    font-weight: bold;
}

input:invalid {
    border: 1px solid #cc3333;
}

.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.navbar-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 10px;
}

.text-black {
    font-weight: bold;
    margin-left: 50px;
}

.navbar-brand {
    color: #fff !important;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    background-color: #785AA5;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

    .navbar-brand:hover {
        background-color: #E85F6E;
    }

.nav-item {
    font-weight: bold;
    text-decoration: none;
    background-color: #FFDE91;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    display: inline-block;
    width: fit-content;
}

    .nav-item:hover {
        background-color: #E8A407;
    }

.logout-link {
    text-decoration: none;
    background-color: #FF3D3D;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    display: inline-block;
    width: fit-content;
    margin-left: auto;
    margin-right: 5px;
}

    .logout-link:hover {
        background-color: #960000;
    }

#user_logout {
    font-weight: bold;
    color: #FFF !important;
}

.navbar-nav .nav-item {
    margin-right: 5px;
}

.circle-button {
    font-weight: bold;
    margin-right: 5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
}

#red.circle-button {
    background-color: #D42424;
}

    #red.circle-button:hover {
        background-color: #A30303;
    }

#orange.circle-button {
    background-color: #E69D00;
}

    #orange.circle-button:hover {
        background-color: #A35E03;
    }

#yellow.circle-button {
    background-color: #E6CF00;
}

    #yellow.circle-button:hover {
        background-color: #A38B03;
    }

#green.circle-button {
    background-color: #3EA303;
}

    #green.circle-button:hover {
        background-color: #1C5E00;
    }

#blue.circle-button {
    background-color: #0071D4;
}

    #blue.circle-button:hover {
        background-color: #004887;
    }

#purple.circle-button {
    background-color: #7E02AB;
}

    #purple.circle-button:hover {
        background-color: #4B0266;
    }

/*顏色設定-紅色*/
.redTable tbody tr:hover {
    background-color: #FDE5E5;
}

.redTable thead th {
    text-align: center;
    background-color: #FA7F7F;
    color: #fff;
}

.redCard.card-header {
    background-color: #FA7F7F;
    color: #fff;
}

.redBtn {
    display: inline-block;
    padding: 4px 12px;
    background-color: #FA7F7F;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    border: none;
    outline: none;
}

    .redBtn:hover {
        color: #fff;
        background-color: #DE0707;
    }

.redH1 {
    text-align: center;
    font-weight: bold;
    color: #D62F2F;
}

.redThead {
    text-align: center;
    background-color: #D62F2F;
    color: #fff;
}

.redHistory {
    border-radius: 5px;
    padding: 20px;
    margin-top: 5px;
    background-color: #FFD6D6;
}

    .redHistory .form-group {
        margin-bottom: 20px;
    }

    .redHistory label {
        font-weight: bold;
    }

    .redHistory input[type="date"] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
    }

.redHistoryContainer {
    border-radius: 10px;
    background-color: #D62F2F;
}

.redBackgroundColor {
    background-color: #FFD6D6 !important;
}

.redBackgroundDeepColor {
    background-color: #D62F2F !important;
}

.redBackgroundSumColor {
    background-color: #F58989 !important;
}
/*顏色設定-橘色*/
.orangeTable tbody tr:hover {
    background-color: #FDf3E5;
}

.orangeTable thead th {
    text-align: center;
    background-color: #FABC7F;
    color: #fff;
}

.orangeCard.card-header {
    background-color: #FABC7F;
    color: #fff;
}

.orangeBtn {
    display: inline-block;
    padding: 4px 12px;
    background-color: #FABC7F;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    border: none;
    outline: none;
}

    .orangeBtn:hover {
        color: #fff;
        background-color: #D66B00;
    }

.orangeH1 {
    text-align: center;
    font-weight: bold;
    color: #F08411;
}

.orangeThead {
    text-align: center;
    background-color: #F08411;
    color: #fff;
}

.orangeHistory {
    border-radius: 5px;
    padding: 20px;
    margin-top: 5px;
    background-color: #FFE3C4;
}

    .orangeHistory .form-group {
        margin-bottom: 20px;
    }

    .orangeHistory label {
        font-weight: bold;
    }

    .orangeHistory input[type="date"] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
    }

.orangeHistoryContainer {
    border-radius: 10px;
    background-color: #F08411;
}

.orangeBackgroundColor {
    background-color: #FFE3C4 !important;
}

.orangeBackgroundDeepColor {
    background-color: #F08411 !important;
}

.orangeBackgroundSumColor {
    background-color: #FFC68A !important;
}
/*顏色設定-黃色*/
.yellowTable tbody tr:hover {
    background-color: #FDFDE5;
}

.yellowTable thead th {
    text-align: center;
    background-color: #FAFA7F;
}

.yellowCard.card-header {
    background-color: #FAFA7F;
}

.yellowBtn {
    display: inline-block;
    padding: 4px 12px;
    background-color: #FAFA7F;
    text-align: center;
    border-radius: 5px;
    outline: none;
    border: 2px solid #000;
}

    .yellowBtn:hover {
        color: #fff;
        background-color: #D6C800;
    }

.yellowH1 {
    text-align: center;
    font-weight: bold;
    color: #CFC80A;
}

.yellowThead {
    text-align: center;
    background-color: #F5ED00;
}

.yellowHistory {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-top: 5px;
    background-color: #FFFDD1;
}

    .yellowHistory .form-group {
        margin-bottom: 20px;
    }

    .yellowHistory label {
        font-weight: bold;
    }

    .yellowHistory input[type="date"] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
    }

.yellowHistoryContainer {
    border-radius: 10px;
    background-color: #F5ED00;
}

.yellowBackgroundColor {
    background-color: #FFFDD1 !important;
}

.yellowBackgroundDeepColor {
    background-color: #F5ED00 !important;
}

.yellowBackgroundSumColor {
    background-color: #FFFB94 !important;
}
/*顏色設定-綠色*/
.greenTable tbody tr:hover {
    background-color: #E5FDEE;
}

.greenTable thead th {
    text-align: center;
    background-color: #00A854;
    color: #fff;
}

.greenCard.card-header {
    background-color: #00A854;
    color: #fff;
}

.greenBtn {
    display: inline-block;
    padding: 4px 12px;
    background-color: #00A854;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    outline: none;
}

    .greenBtn:hover {
        color: #fff;
        background-color: #00A854;
    }

.greenH1 {
    text-align: center;
    font-weight: bold;
    color: #00A854;
}

.greenThead {
    text-align: center;
    background-color: #00A854;
    color: #fff;
}

.greenHistory {
    border-radius: 5px;
    padding: 20px;
    margin-top: 5px;
    background-color: #E5FDEE;
}

    .greenHistory .form-group {
        margin-bottom: 20px;
    }

    .greenHistory label {
        font-weight: bold;
    }

    .greenHistory input[type="date"] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
    }

.greenHistoryContainer {
    border-radius: 10px;
    background-color: #00A854;
}

.greenBackgroundColor {
    background-color: #E5FDEE !important;
}

.greenBackgroundDeepColor {
    background-color: #00A854 !important;
}

.greenBackgroundSumColor {
    background-color: #75E09D !important;
}

/*顏色設定-藍色*/
.blueTable tbody tr:hover {
    background-color: #E5FBFD;
}

.blueTable thead th {
    text-align: center;
    background-color: #5F86D4;
    color: #fff;
}

.blueCard.card-header {
    background-color: #5F86D4;
    color: #fff;
}

.blueBtn {
    display: inline-block;
    padding: 4px 12px;
    background-color: #5F86D4;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    outline: none;
    border: none;
}

    .blueBtn:hover {
        color: #fff;
        background-color: #054163;
    }

.blueH1 {
    text-align: center;
    font-weight: bold;
    color: #5F86D4;
}

.blueThead {
    text-align: center;
    background-color: #5F86D4;
    color: #fff;
}

.blueHistory {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-top: 5px;
    background-color: #DBE7FF;
}

    .blueHistory .form-group {
        margin-bottom: 20px;
    }

    .blueHistory label {
        font-weight: bold;
    }

    .blueHistory input[type="date"] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
    }

.blueHistoryContainer {
    border-radius: 10px;
    background-color: #5F86D4;
}

.blueBackgroundColor {
    background-color: #DBE7FF !important;
}

.blueBackgroundDeepColor {
    background-color: #5F86D4 !important;
}

.blueBackgroundSumColor {
    background-color: #B5CEFF !important;
}

/*顏色設定-紫色*/
.purpleTable tbody tr:hover {
    background-color: #F2E5FD;
}

.purpleTable thead th {
    text-align: center;
    background-color: #785AA5;
    color: #fff;
}

.purpleCard.card-header {
    background-color: #785AA5;
    color: #fff;
}

.purpleBtn {
    display: inline-block;
    padding: 4px 12px;
    background-color: #785AA5;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    border: none;
    outline: none;
}

    .purpleBtn:hover {
        color: #fff;
        background-color: #470563;
    }

.purpleH1 {
    text-align: center;
    font-weight: bold;
    color: #785AA5;
}

.purpleThead {
    text-align: center;
    background-color: #785AA5;
    color: #fff;
}

.purpleHistory {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-top: 5px;
    background-color: #F2E5FD;
}

    .purpleHistory .form-group {
        margin-bottom: 20px;
    }

    .purpleHistory label {
        font-weight: bold;
    }

    .purpleHistory input[type="date"] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
    }

.purpleHistoryContainer {
    border-radius: 10px;
    background-color: #785AA5;
}

.purpleBackgroundColor {
    background-color: #F2E5FD !important;
}

.purpleBackgroundDeepColor {
    background-color: #785AA5 !important;
}

.purpleBackgroundSumColor {
    background-color: #C3A1E6 !important;
}