:root {
    --primary-bg: #e4840a;
    --light-font: #FFF;
    --dark-font: #333;
    --primary-dark-bg: #fbf0c6;
    --second-bg: #f5dace;
    --light-bg: #FFFBED;
    --btn-bg: linear-gradient(to bottom right, #e4840a, #e6a022);
    --btn-dark-bg: linear-gradient(to bottom right, #e4840a, #e6a022);
}

.logo {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/*第11屆顏色設定檔*/
h2:before {
    background-color: var(--primary-bg);
}

h2:after {
    border-color: var(--primary-bg);
}


form > .row > h2:before {
    background-color: var(--primary-bg);
}

form > .row > h2:after {
    border: 2px solid var(--primary-bg);
}

table > tbody > tr > th,
table > tbody > tr > td {
    border-bottom: 1px solid #fcab37;
}

table > tbody > tr > th {
    background-color: #fcab37;
}

table.style1 > tbody > tr > th,
table.style1 > tbody > tr > td {
    border: 1px solid #fcab37;
    background-color: #fff;
}

table.style1 > tbody > tr > th {
    background-color: #fcab37;
    color: #fff;
}

table > tbody > tr > td .fa-check-circle:before {
    color: #16794a;
}

table > tbody > tr > td .fa-exclamation-triangle:before {
    color: #fcab37;
}

/*header*/
header {
    background-image: url(../13th/headerbg.jpg);
}

.nav-link {
    color: var(--dark-font);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--dark-font);
    background-color: transparent;
    box-shadow: inset 0 -3px 0 var(--dark-font);
}

.nav-link:focus {
    color: var(--dark-font);
    background-color: transparent;
    border-bottom: transparent;
}

.nav-pills .nav-link.active:hover,
.nav-pills .show > .nav-link:hover,
.nav-link:hover {
    color: var(--dark-font);
    background-color: transparent;
    box-shadow: inset 0 -38px 0 rgba(255,255,255,0.3);
}

.navbar-toggler {
    color: var(--dark-font);
    border-color: rgba(255,255,255,0.5);
    background-color: rgba(255,255,255,0.2);
}

.navbar-collapse.collapse.show {
    background-color: rgba(77,171,126,0.5);
}

/*麵包屑*/
.breadcrumb-nav {
    background-color: var(--second-bg);
}

.breadcrumb-item.active,
.breadcrumb a {
    color: var(--dark-font);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--dark-font);
}

h1 {
    background-image: url(../13th/h1bg.jpg);
    color: #fff;
    background-position: center;
    background-size: cover;
    background-attachment: local;
}

.note {
    background-color: #ffefc3;
}


/*Login*/
#Login > .container > .row > div:nth-of-type(2) ul > li > a {
    background: var(--btn-bg);
    color: var(--light-font);
}

    #Login > .container > .row > div:nth-of-type(2) ul > li > a:hover {
        background: var(--btn-dark-bg);
        opacity: 0.8;
    }

/*UploadFile*/
.k-upload .k-dropzone {
    background-color: #efefef;
    border: 1px solid #d3d3d3;
}

    .k-upload .k-dropzone .k-upload-button {
        background-color: #333;
        border: 1px solid #aaa;
        color: #fff;
    }

        .k-upload .k-dropzone .k-upload-button:hover {
            background-color: #888;
        }

.k-button::before {
    background-color: #aaa;
}

.k-button .k-button-icon:before {
    color: #333;
}

.kendo-flix-multiple .k-upload-files .k-file {
    border: 1px solid #ddd;
}

.k-upload-files .k-file .k-file-size {
    color: #5c5c5c;
    background-color: #efefef;
}

#UploadFile > .container > #UploadFileAnchor {
    background-color: var(--primary-bg);
}

    #UploadFile > .container > #UploadFileAnchor:after {
        border-color: var(--primary-bg) transparent transparent transparent;
    }

    #UploadFile > .container > #UploadFileAnchor > li {
        background-color: #fff;
        border: 2px solid var(--primary-bg);
    }

        #UploadFile > .container > #UploadFileAnchor > li > a {
            color: #333;
        }

#UploadFile > .container > #UploadFileItem > li {
    border: 2px solid var(--primary-bg);
}

    #UploadFile > .container > #UploadFileItem > li > h3 {
        background-color: var(--primary-bg);
        color: #fff;
    }

        #UploadFile > .container > #UploadFileItem > li > h3:after {
            border-color: var(--primary-bg) var(--primary-bg) transparent transparent;
        }

    #UploadFile > .container > #UploadFileItem > li .ex-download {
        background-color: #d5f5e7;
    }

        #UploadFile > .container > #UploadFileItem > li .ex-download:before {
            background-color: #01321f;
        }

    #UploadFile > .container > #UploadFileItem > li > h4 {
        background-color: #fff;
    }

        #UploadFile > .container > #UploadFileItem > li > h4 + div {
            border: 1px dashed #01321f;
        }

    #UploadFile > .container > #UploadFileItem > li .upload-files-block {
        border: 1px dashed #333;
    }

        #UploadFile > .container > #UploadFileItem > li .upload-files-block.red {
            border: 1px dashed #ff3e3e;
            color: #ff3e3e;
        }

        #UploadFile > .container > #UploadFileItem > li .upload-files-block > li > span {
            background-color: #ffefc3;
        }

/*footer*/
footer {
    background-color: var(--light-bg);
}

/*btn-primary*/
.btn-primary {
    color: var(--light-font);
    background: var(--btn-bg);
    border-color: transparent;
}

    .btn-primary:hover {
        color: var(--light-font);
        background: var( --btn-dark-bg);
        opacity: 0.8;
        border-color: transparent;
    }

    .btn-check:focus + .btn-primary,
    .btn-primary:focus {
        color: var(--light-font);
        background: var( --btn-dark-bg);
        border-color: transparent;
        box-shadow: 0 0 0 0.25rem rgb(181 156 40 / 50%)
    }

    .btn-check:active + .btn-primary,
    .btn-check:checked + .btn-primary,
    .btn-primary.active, .btn-primary:active,
    .show > .btn-primary.dropdown-toggle {
        color: var(--light-font);
        background: var( --btn-dark-bg);
        border-color: transparent;
    }

        .btn-check:active + .btn-primary:focus,
        .btn-check:checked + .btn-primary:focus,
        .btn-primary.active:focus, .btn-primary:active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgb(181 156 40 / 50%)
        }

    .btn-primary.disabled,
    .btn-primary:disabled {
        color: #777777;
        background-color: #014b32;
        border-color: #5f5f5f;
        background: #d7d7d7;
    }

@media (max-width: 576px) {

    .navbar-nav .nav-link {
        background-color: #00402b;
    }

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        background-color: #00402b;
    }
}