.subject-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    width: 100%;
    /*height: 800px;*/
    list-style: none;
    padding: 0;
    margin: 0;
}

.subject-list .subject {
    margin: 0 0 10px 0;
    padding: 5px;
    width: 50%;
}

.subject-name {
    padding: 10px 30px;
    background: #C69713;
    color: #FFF;
}

.subject-code,
.subject-formal-desc {
    /*display: inline-block;*/
    display: table-cell;
    vertical-align: middle;
}

.subject-code {
    font-size: 35px;
    font-family: 'Roboto', Verdana, Arial, "Trebuchet MS", 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
    padding: 0;
    /* padding: 0; */
    /*width: 120px;*/
    /*width: 95px;*/
    text-align: left;
    position: relative;
}

.subject-code::after {
    /*content: '|';
    color: #FFF;
    padding: 0;
    opacity: 0.4;
    font-size: 35px;
    position: absolute;
    top: -2px;*/

    content: '|';
    color: #FFF;
    /*border: 1px solid;*/
    padding: 0 20px;
    opacity: .4;
    font-size: 35px;
    vertical-align: top;
    position: relative;
    top: -2px;
}

.subject-formal-desc {
    font-size: 22px;
    font-family: 'Roboto', Verdana, Arial, "Trebuchet MS", 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
    width: calc(100% - 95px);
    padding: 0 0 0 0;
}

.crse-detail-control {
    padding: 20px 0;
    text-align: right;
    /* width: 500px; */
    /* float: right; */
    /* clear: both; */
}

.crse-detail-control .btn {
    /* float: right; */
    text-align: left;
    margin: 0 5px 5px 5px;
    width: 120px;
}

.crse-detail-control::after {
    content: '';
    display: block;
    clear: both;
}

.search-result-desc p {
    color: #DD7B2D;
    margin: 0;
    padding: 20px 0 50px 0;
    border-bottom: 3px solid #fff;
    font-size: 18px;
}

.subject-desc {
    font-size: 15px;
    padding: 20px 0 50px 0;
    border-bottom: 3px solid #fff;
    text-align: justify;
    margin: 0;
    color: #4E4E4E;
}

.crse-list {
    list-style: none;
    padding: 30px 0;
    margin: 0;
    /*cursor: pointer;*/
}

.crse-list>.crse {
    margin: 0 0 2px 0;
    /*cursor: pointer;*/
}

.crse-list>.crse>.crse-header {
    color: #777777;
    background: transparent;
    cursor: pointer;
    /*cursor: default;*/
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    /*     border-top-left-radius: 25px;
    border-bottom-left-radius: 25px; */
    /* width: calc(100% - 60px); */
    /* margin: 0 0 0 60px;  */
    position: relative;
    /*     -webkit-transition: background border 0.4s ease-in-out;
    transition: background border 0.4s ease-in-out; */
}

.crse-list>.crse>.crse-header:hover {
    background: #FFF;
}

.crse-list>.crse.open>.crse-header {
    color: #777777;
    background: #FFF;
    border-bottom-left-radius: 0;
}

.crse-list>.crse .crse-detail {
    background: transparent;
    border-bottom-left-radius: 30px;
    background: #FFF;
    padding: 15px 50px 50px 80px;
}

.crse-list>.crse.open>.crse-detail {
    border-bottom-left-radius: 0;
}

.crse-list>.crse>.crse-header .crse-toggle,
.crse-list>.crse>.crse-header .crse-title,
.crse-list>.crse>.crse-header .crse-code,
.crse-list>.crse>.crse-header .crse-unit,
.crse-list>.crse>.crse-header .crse-vector {
    display: inline-block;
    vertical-align: top;
}

.crse-list>.crse>.crse-header .crse-toggle {
    width: 46px;
    height: 46px;
    margin: 3px 0 0 5px;
    background: rgba(0, 0, 0, 0);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    position: absolute;
    /* left: -60px; */
    top: 0;
}

.crse-list>.crse>.crse-header .crse-toggle>span {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    border-radius: 50%;
    position: relative;
    /*display: none;*/
}

.crse-list>.crse.open>.crse-header .crse-toggle>span,
.crse-list>.crse>.crse-header:hover .crse-toggle>span {
    background: #EAA400;
    /*display: block;*/
}

.crse-list>.crse>.crse-header .crse-toggle>span::before {
    content: '';
    width: 12px;
    height: 2px;
    background: transparent;
    position: absolute;
    top: 23px;
    left: 17px;
}


/*.crse-list>.crse>.crse-header:hover .crse-toggle>span::before,
.crse-list>.crse>.crse-header:hover .crse-toggle>span::after {
    background: #EAA400;
}*/

.crse-list>.crse>.crse-header .crse-toggle>span::after {
    content: '';
    width: 2px;
    height: 12px;
    background: transparent;
    position: absolute;
    top: 18px;
    left: 22px;
}

.crse-list>.crse>.crse-header:hover .crse-toggle>span::before,
.crse-list>.crse>.crse-header:hover .crse-toggle>span::after {
    background: #FFF;
}

.crse-list>.crse.open>.crse-header .crse-toggle>span::before {
    content: '';
    width: 12px;
    height: 2px;
    background: #FFF;
    position: absolute;
    top: 23px;
    left: 17px;
}

.crse-list>.crse.open>.crse-header .crse-toggle>span::after {
    content: none;
}

.crse-list>.crse>.crse-header .crse-title,
.crse-list>.crse>.crse-header .crse-code {
    font-weight: bold;
    font-size: 18px;
    color: #777777;
}

.crse-list>.crse>.crse-header .crse-title {
    padding: 15px 0;
    width: calc(100% - 400px);
}

.crse-list>.crse>.crse-header .crse-code {
    width: 160px;
    padding: 15px 19px;
    margin: 0 0 0 60px;
    /* margin: 0 ; */
    color: #DD7B2D;
}

.crse-list>.crse>.crse-header .crse-unit,
.crse-list>.crse>.crse-header .crse-vector {
    color: #4E4E4E;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    top: 15px;
    right: 50px;
}

.crse-list>.crse.open>.crse-header .crse-title,
.crse-list>.crse.open>.crse-header .crse-code,
.crse-list>.crse>.crse-header:hover .crse-title,
.crse-list>.crse>.crse-header:hover .crse-code {
    color: #DE7C2E
}

.crse-list>.crse.open>.crse-header .crse-unit,
.crse-list>.crse>.crse-header:hover .crse-unit,
.crse-list>.crse.open>.crse-header .crse-vector,
.crse-list>.crse>.crse-header:hover .crse-vector {
    color: #EC9147;
}

.crse-list>.crse>.crse-detail .data-row-group {
    padding: 20px;
    margin: 0 0 40px 0;
    background-color: #DDDDDD;
}

.crse-list .crse .crse-detail .data-row-group * {
    font-family: 'Open Sans', sans-serif, Verdana, Arial, "Trebuchet MS", 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
}

.crse-list .crse .crse-detail .data-row.data-row-default>.header,
.crse-list .crse .crse-detail .data-row.data-row-default>.data {
    display: inline-block;
    vertical-align: top;
}

.crse-list .crse .crse-detail .data-row.data-row-long {
    position: relative;
}

.crse-list .crse .crse-detail .data-row.data-row-long>.header {
    width: 230px;
    background-color: #A9A9A9;
    position: static;
    color: #FFF;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 10px;
    font-family: 'Lato', sans-serif, Verdana, Arial, "Trebuchet MS", 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
    display: inline-block;
    vertical-align: top;
}

.crse-list .crse .crse-detail .data-row.data-row-long>.data {
    width: calc(100% - 230px);
    font-size: 15px;
    display: inline-block;
    vertical-align: top;
    padding: 10px 0px 50px 20px;
    color: #4E4E4E;
    text-align: justify;
    font-family: 'Lato', sans-serif, Verdana, Arial, "Trebuchet MS", 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
}

.crse-list .crse .crse-detail .data-row.data-row-long>.header::after {
    content: '';
    position: absolute;
    width: calc(100% - 250px);
    left: 250px;
    top: 0;
    border: 1px solid #A9A9A9;
}

.crse-list .crse .crse-detail .data-row.data-row-default>.header {
    width: 200px;
    display: inline-block;
    font-size: 14px;
    color: #777777;
}

.crse-list .crse .crse-detail .data-row.data-row-default>.data {
    width: calc(100% - 200px);
    display: inline-block;
    font-size: 14px;
    font-style: italic;
    color: #0D519B;
}

.cilo-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cilo-info .cilo {
    margin: 0 0 10px 0;
}

.cilo-info .cilo>.cilo-seq {
    width: 40px;
    display: inline-block;
    vertical-align: top;
}

.cilo-info .cilo>.cilo-desc {
    width: calc(100% - 40px);
    display: inline-block;
    vertical-align: top;
}

.back-btn-container {
    margin: 20px 0px;
}

a.page-back {
    background: none;
    border: none;
    padding: 0px;
    font-size: 16px;
    font-weight: bold;
    color: #888;
    padding-left: 15px;
    position: relative;
    text-decoration: none;
}

a.page-back::before {
    content: '';
    border-top: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid #595959;
    position: absolute;
    top: calc(50% - 5px);
    left: 0px;
}

@media screen and (max-width: 1024px),
print {
    .crse-list .crse .crse-detail .data-row.data-row-long>.data {
        width: 100%;
        font-size: 15px;
        padding: 10px 0 30px 0;
        color: #4E4E4E;
        font-family: 'Lato', sans-serif, Verdana, Arial, "Trebuchet MS", 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
    }
}

@media screen and (max-width: 1024px) {
    .staff-control {
        right: auto;
        position: relative;
        right: 30px;
    }
}

@media screen and (max-width: 768px) {
    .subject-name {
        padding: 10px 15px;
    }
    .subject-code {
        font-size: 28px;
    }
    .subject-code::after {
        padding: 0 10px;
        font-size: 28px;
    }
    .subject-formal-desc {
        padding: 0 0 0 0;
        font-size: 18px;
    }
    /*     .crse-detail-control .btn {
        float: right;
        text-align: left;
        margin: 0 0 5px 0;
        width: 24.33%;
    } */
    .crse-list .crse .crse-header {
        border-top-left-radius: 25px;
        border-bottom-left-radius: 0;
        padding: 5px 0 20px 5px;
    }
    .crse-list .crse .crse-header .crse-code {
        margin: 0 0 0 40px;
        padding: 5px 15px;
    }
    .crse-list .crse .crse-header .crse-toggle {
        width: 34px;
        height: 34px;
        margin: 5px 0 0 0;
    }
    .crse-list .crse .crse-header .crse-toggle>span::before,
    .crse-list .crse.open .crse-header .crse-toggle>span::before {
        top: 16px;
        left: 11px;
    }
    .crse-list .crse .crse-header .crse-toggle>span::after {
        top: 11px;
        left: 16px;
    }
    .crse-list .crse .crse-header .crse-title {
        width: 100%;
        padding: 0 30px 0 55px;
    }
    .crse-list .crse .crse-detail {
        /* padding: 0px 30px 50px 60px; */
        padding: 0px 15px 50px 15px;
    }
    .crse-list .crse .crse-header .crse-unit,
    .crse-list .crse .crse-header .crse-vector {
        right: 30px;
        top: 10px;
    }
    .crse-list .crse .crse-detail .data-row-group {
        padding: 10px;
        margin: 0 0 20px 0;
    }
    .crse-list .crse .crse-detail .data-row.data-row-long>.header {
        width: 100%;
        padding: 5px 10px;
    }
    .crse-list .crse .crse-detail .data-row.data-row-long>.header::after {
        content: none;
    }
    .crse-list .crse .crse-detail .data-row.data-row-long>.data {
        padding: 10px 0 20px 0;
        font-size: 16px;
        line-height: 22px;
        /* font-weight: bold; */
    }
}

@media screen and (max-width: 480px) {
    .crse-list .crse .crse-detail .data-row.data-row-default {
        margin: 0 0 10px 0;
    }
    .crse-list .crse .crse-detail .data-row.data-row-default>.header,
    .crse-list .crse .crse-detail .data-row.data-row-default>.data {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .footer .footer-link-group a:active,
    .footer .footer-link-group a:hover,
    .footer .footer-link-group a:visited,
    .footer .footer-link-group a:link {
        display: block;
        margin: 0 0 10px 0;
    }
}


/*@media screen and (max-width: 320px) {
    .subject-code {
        text-align: left;
    }
    .subject-formal-desc {
        width: 100%;
        padding: 0;
    }
}*/

@media print {
    .crse-detail-control {
        display: none;
    }
    .crse-list .crse .crse-header {
        color: #777777;
        background: #FFF;
        border-bottom-left-radius: 0;
    }
    .crse-list .crse .crse-detail {
        border-bottom-left-radius: 0;
    }
    .crse-list .crse .crse-header .crse-toggle>span {
        background: #EAA400;
        display: block;
    }
    .crse-list .crse .crse-detail {
        display: block !important;
    }
    .crse-list .crse .crse-header .crse-toggle>span::before {
        content: '';
        width: 12px;
        height: 2px;
        background: #FFF;
        position: absolute;
        top: 23px;
        left: 17px;
    }
    .crse-list .crse .crse-header .crse-toggle>span::after {
        content: none;
    }
    .crse-list .crse .crse-detail .data-row-group {
        color: #000 !important;
    }
}

.back-btn-container {
    margin: 20px 0px;
}

a.page-back {
    background: none;
    border: none;
    padding: 0px;
    font-size: 16px;
    font-weight: bold;
    color: #888888;
    padding-left: 15px;
    position: relative;
    text-decoration: none;
}

a.page-back:hover {
    color: #4E4E4E;
}

a.page-back::before {
    content: '';
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #595959;
    position: absolute;
    top: calc(50% - 5px);
    left: 0px;
}

a.page-back:hover::before {
    border-right: 5px solid #F97D21;
}