@charset "UTF-8";
/* CSS Document */

body {
    padding: 0;
    margin: 0;
    background-color: #f5f4f2 !important;
    color: #333333;
    line-height: 1.5em;
}

.index-logo img {
    width: 100%;
}

.mainbg {
    background-image: url("/Images/AnnualPaper/2023/index-image.jpg"); 
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #f5f4f2;
}

.header {
    /*background-image:url(../images/header-bg.jpg) ;
	background-position:top center;
	background-repeat:no-repeat;
	
	background-size:100% ;*/
    background-color: #f7ee13;
}

.logo {
    margin: 0;
    padding: 0px;
    text-align: right;
}

    .logo img {
        width: 100%;
    }

.header-link {
    text-align: right;
    margin: -22px 26px 0 0;
}

    .header-link a {
        padding: 3px 5px;
        color: #225278;
    }

.header a {
    color: #FFF;
    text-decoration: underline;
}

.header-link a:hover {
    text-decoration: none;
    color: #333333;
    background-color: #bbdfdf;
    border-radius: 20px;
}

.sup-link {
    width: 90%;
    text-align: left;
    margin-top: 5px;
}

@media screen and (max-width:996px) {
    .header {
        background-size: 100%;
    }
}

@media screen and (max-width:770px) {

    .header {
        background-size: auto;
    }
    /*.logo img {
	margin: 0 0 0 5%;
	text-align: right;
	width: 95%;
}*/
}

.main {
    overflow: auto;
    padding: 20px 50px;
}

ul.submenu {
    margin: 0 10%;
    padding: 50px 0;
}

    ul.submenu li {
        padding: 0;
        margin: 0 .5%;
        list-style: none;
        float: left;
        width: 19%;
    }

        ul.submenu li img {
            width: 40px;
            margin: 0;
            padding-right: 10px;
        }

        ul.submenu li a {
            float: left;
            display: block;
            width: 100%;
            font-size: 20px;
            letter-spacing: 1.2px;
            margin: 5px;
            padding: 10px 10px 8px 10px;
            text-align: center;
            border-radius: 40px;
            border: 1px solid #FFF;
            color: #FFF;
            background: rgba(34,82,100,0.7);
            transition: all 0.25s ease-in-out;
        }

            ul.submenu li a:hover {
                /*	width: 90%;*/
                text-decoration: none;
                color: #FFF;
                border: 1px solid #FFF;
                box-shadow: 0 5px 15px rgba(0,0,0,.1);
                background: rgba(34,82,100,1);
                /*	margin:3px 5px 7px;*/
            }

@media screen and (min-width:768px) and (max-width:992px) {
    ul.submenu {
        margin: 120px 0 0 0;
        padding: 0;
    }
}

@media screen and (min-width:480px) and (max-width:768px) {
    ul.submenu {
        margin: 0 20px 30px 20px;
        padding: 0;
    }

        ul.submenu li a {
            width: 100%;
        }
}

@media screen and (max-width:480px) {
    ul.submenu {
        margin: 0 20px 30px 20px;
        padding: 0;
    }

        ul.submenu li a {
            width: 100%;
        }
}

/*---- page menu ---*/
.mainContent {
    overflow: auto;
    padding: 0 10px;
    margin: 0;
    /*background:url(../images/body-surgery.png) bottom right no-repeat;*/
    background-size: 25%;
}

ul.secmenu {
    margin: 0;
    padding: 0;
}

    ul.secmenu li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        ul.secmenu li img {
            width: 10%;
            display: block;
            margin: 0.5% auto;
        }

        ul.secmenu li a {
            float: left;
            display: block;
            width: 19%;
            font-size: 16px;
            line-height: 1.3em;
            text-indent: 5px;
            margin: 1% 0.5%;
            padding: 5px;
            text-align: center;
            border-radius: 30px;
            color: #FFF;
            background: rgba(34,82,100,0.5);
        }

            ul.secmenu li a:hover {
                text-decoration: none;
                color: #FFF;
                background: rgba(34,82,100,0.8);
            }

            ul.secmenu li a.active {
                background: rgba(34,82,100,1);
                color: #FFF;
                box-shadow: 0 1px 15px rgba(0,0,0, .1);
                font-weight: 700;
            }

@media screen and (max-width:768px) {
    ul.secmenu li a {
        width: 32.3%;
        margin: 1% 0.5% 0 0.5%;
        text-align: left;
    }

    ul.secmenu li img {
        width: 10%;
        float: left;
        margin: 0 auto;
    }
}

@media screen and (max-width:480px) {
    ul.secmenu li a {
        width: 49%;
        margin: 1% 0.5% 0 0.5%;
        text-align: center;
    }

    ul.secmenu li img {
        display: none;
    }
}

h3.mainTitle {
    margin: 0;
    padding: 10px 10px 10px 10px;
    letter-spacing: 4px;
    text-shadow: 0 1px 8px rgba(0,0,0, .1);
    float: left;
    text-transform: uppercase;
    background: linear-gradient(to right, #e70013 0%, #f29100 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

    h3.mainTitle img {
        width: 40px;
        padding: 6px;
        margin-right: 5px;
        background-color: #f29100;
        border-radius: 10px;
    }

.tablezone {
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: 10px;
    margin: 0 5px 10px 5px;
    box-shadow: 0 2px 8px rgba(0,0,0, .1);
}

.tableSet {
    font-size: 16px;
}

    .tableSet a {
        color: #006b9d;
        text-decoration: underline;
    }

        .tableSet a:hover {
            color: #00a0ea;
            text-decoration: none;
        }

    .tableSet th {
        background-color: #008ccc;
        color: #FFF;
        text-align: center;
        border-left: 1px solid #FFF;
    }

    .tableSet tr:hover {
        background-color: #ebf3f7 !important;
    }

    .tableSet tr:nth-child(even) {
        background-color: #f3f8fa;
    }

.search-form {
    float: right;
    margin: 5px 5px 0 0;
}

    .search-form label {
        color: #336666;
    }

.form-group {
    margin-left: 5px;
}

@media screen and (max-width:768px) {
    h3.mainTitle {
        float: none;
    }

    .search-form {
        float: none;
    }
}

h4.search-title {
    background-image: linear-gradient(to top, rgba(255,255,255, .4), rgba(255,255,255,.8));
    border-radius: 4px;
    margin: 0 8px;
    padding: 5px;
    font-weight: normal;
    color: #b06c00;
}

.tablezoneB {
    background-image: linear-gradient(to top, rgba(255,255,255, .4), rgba(255,255,255,.8));
    border-radius: 8px;
    padding: 10px;
    margin: 0 5px 10px 5px;
    box-shadow: 0 2px 8px rgba(0,0,0, .2);
}

.table-result {
    font-size: 16px;
}

    .table-result a {
        color: #225278;
        text-decoration: underline;
    }

        .table-result a:hover {
            color: #e72e0e;
            text-decoration: none;
        }

    .table-result th {
        color: #FFF;
        text-align: center;
        border-left: 1px solid #e0f1d5;
        background-color: #225278;
    }
    /*
.table-result th:first-child {
background-image: linear-gradient(to right, rgba(243,230,41, 1),  rgba(231,121,156, 1));
	
}
.table-result th:nth-child(2) {
background-image: linear-gradient(to right,  rgba(231,121,156, 1), rgba(0,176,166, 1));
}
.table-result th:nth-child(3) {
background-image: linear-gradient(to right, rgba(0,176,166, 1),  rgba(243,230,41, 1));
}
.table-result th:nth-child(4) {
background-image: linear-gradient(to right,rgba(243,230,41, 1), rgba(0,176,166, 1));
}
*/
    .table-result tr:hover {
        background-color: rgba(193,224,226,.3);
    }

    .table-result tr:nth-child(even) {
        background-color: rgba(193,224,226,.3);
    }

ul.subjectList {
    padding: 0;
    margin: 5px 5px 10px 5px;
}

    ul.subjectList li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        ul.subjectList li a {
            width: 32.3%;
            margin: 0.5%;
            display: block;
            float: left;
            font-size: 18px;
            padding: 10px 0;
            text-align: center;
            background-image: linear-gradient(to top, rgba(224,241,213, 1), rgba(255,255,255,.7));
            border-radius: 30px;
            border: #cee1c1 1px solid;
        }

            ul.subjectList li a:hover {
                color: #ff6c00;
                background-image: linear-gradient(to bottom, rgba(177,213,155, 1), rgba(255,255,255,1));
                text-decoration: none;
            }

h4.subjectTitle {
    margin: 0 0 5px 0;
    color: #ff6c00;
    font-size: 16px;
    padding: 10px 20px;
    display: inline-block;
    float: left;
    background-image: linear-gradient(to top, rgba(224,241,213, 1), rgba(255,255,255,.7));
    border-radius: 30px;
    border: #cee1c1 1px solid;
}

a.btn-back {
    float: right;
    background-image: linear-gradient(to top, rgba(224,241,213, 1), rgba(255,255,255,.7));
    border-radius: 30px;
    border: #cee1c1 1px solid;
    margin: 5px 5px 5px 0;
    padding: 5px 15px;
}

    a.btn-back:hover {
        color: #FFF;
        text-decoration: none;
        background-image: linear-gradient(to top, rgba(255,180,0, 1), rgba(227,107,0, 1));
    }

.modal-body {
    background-image: linear-gradient(to top, rgba(10,100,175, 1), rgba(75,160,195, 1));
    border-radius: 4px;
}

    .modal-body p {
        border: 2px solid #ffe681;
        background-color: #FFF;
        border-radius: 6px;
        padding: 25px 5px;
        margin-top: 25px;
        margin-bottom: 10px;
        color: #003f6b;
        font-size: 1.5em;
        text-align: center;
    }

.modal-content {
    z-index: 1050 !important;
}

.mt-1 {
    margin-top: 5px;
    margin-right: 20px;
}