﻿@charset "UTF-8";
/* CSS Document */

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(90deg, rgba(24, 48, 88, 1) 10.21%, rgba(0, 71, 141, 1) 24.02%, rgba(0, 75, 145, 1) 25.13%, rgba(0, 102, 172, 1) 35.01%, rgba(0, 118, 188, 1) 43.75%, rgba(0, 124, 194, 1) 50.4%, rgba(13, 84, 138, 1) 68.18%, rgba(21, 58, 102, 1) 81.82%, rgba(24, 48, 88, 1) 89.08%);
    color: #333333;
    line-height: 1.5em;
}

.index-logo img {
    width: 100%;
}

.mainbg {
    background-image: url("/Images/AnnualPaper/2024/index-image.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 101%;
    background-color: #008ccc;
}

.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: 1%;
}

.text-info {
    color: rgba(255,255,255,.5) !important;
}

@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: 100px 0;
}

    ul.submenu li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        ul.submenu li img {
            width: 85px;
            margin: 6% auto;
            display: block;
        }

        ul.submenu li a {
            float: left;
            display: block;
            width: 19%;
            height: 160px;
            font-size: 16px;
            line-height: 1.3em;
            text-indent: 5px;
            margin: -5% 0.5%;
            padding: 5px;
            text-align: center;
            border-radius: 10px;
            color: #384B5E;
            font-weight: bold;
            background: rgba(255,221,51,0.8);
            transition: all 0.25s ease-in-out;
        }

            ul.submenu li a:hover {
                /*	width: 90%;*/
                text-decoration: none;
                color: #FFF;
                box-shadow: 0 5px 15px rgba(0,0,0,.1);
                background: rgba(170,109,49,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: 16%;
            margin: 0.5% auto;
            padding-right: 10px;
        }

        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: 10px;
            text-align: center;
            border-radius: 1cap;
            color: #384B5E;
            font-weight: bold;
            background: rgba(255,221,51,1);
        }

            ul.secmenu li a:hover {
                text-decoration: none;
                color: #FFF;
                background: rgba(170,109,49,1);
            }

            ul.secmenu li a.active {
                background: rgba(34,82,100,1);
                color: #FFF;
                background: rgba(170,109,49,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 left, #AA6D31 0%, #FFDD33 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

    h3.mainTitle img {
        width: 55px;
        padding: 8px;
        margin-right: 5px;
        background-color: rgba(255,221,51,1);
        border-radius: 50%;
    }

.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;
}
