@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

hr.b-w-2 {height: 1.5px;background: #1b1b1b;}


/* header */
.col-md-6.page-header {display: flex;align-items: center;}
.col-md-6.page-header.btn-area-top {justify-content: end;}
.btn-area-top a.btn-main {
    width: fit-content;
    padding: 0px 20px;
}
/* header */


/* card-professor */
.card-professor {display: inline-flex;}
.card-professor {display: inline-flex;width: 100%;}
.card-professor .image {width: 50%;}
.card-professor .info {width: 50%;}
.card-professor .info div {text-align: center;}
.card-professor .info {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
}
.card-professor p.name {font-size: 26px;font-family: 'chulalongkornbold' , sans-serif;}
.card-professor p.mail {font-size: 24px;}
.card-professor p.tel {font-size: 24px;}
.card-professor p {margin-bottom: 0;}


/* Button Area */
.btn-area div {display: flex;}
a.btn-main:hover {color: #fff !important;box-shadow: 0px 0px 0px 4px #fec1d9;}
a.btn-main {
    width: 230px;
    height: 50px;
    background-color: #dd5c8e;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 20px;
    color: #fff;
    transition: all 0.3s;
}
a.btn-main:focus, 
a.btn-main:active {color: #fff !important;}


img.icon-btn {
    width: 20px;
    margin-left: 15px;
    filter: invert(1);
}

/* Main Menu List */
ul.main-menu-list li.active > a {background: #DE5C8E;color: #fff !important;}
ul.main-menu-list li a {
    font-size: 18px;
    color: #484848;
    line-height: 2.8;
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out;
    background: #E5E5E5;
    padding: 0 20px;
}
ul.main-menu-list li, ul.main-menu-list li > a {width: 100%;display: inline-block;}
ul.main-menu-list {margin: 0;padding: 0;list-style: none;}
ul.main-menu-list li {margin-bottom: 5px;}
ul.main-menu-list li a {
    font-family: 'chulalongkornbold';
    color: #484848 !important;
}
ul.main-list li.dropdown.active > a {color: #fff !important;}
ul.main-menu-list li.dropdown.active > a {color: #fff !important;}
ul.dropdown-list li {margin: 0 !important;}
ul.main-menu-list li.dropdown.active li.dropdown.active > a {
    color: #ffffff !important;
    background: #e778a3;
}
ul.main-list li.dropdown > a::after {
    font-family: fontawesome;
    content: "\f106";
    position: absolute;
    right: 0;
    height: 36px !important;
    color: #040404 !important;
    transform: rotate(90deg);
    top: 7px;
    font-size: 18px;
}

.hide{display: none;}
ul.dropdown-list .show {display: block;}


/* News */
.news ul {list-style: none;padding: 0;margin: 0;}
.news ul li {display: inline-block;width: 32.9%;}
.news .inner-news img {width: 100%;}
.s-detail {font-size: 14px;padding-bottom: 10px;}
.h-title {font-size: 24px; font-family: 'chulalongkornbold';padding: 15px 0px;}
.news p.h-title {margin: 0;}
.news p.s-detail {
    margin: 0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 0;
}
.inner-news {
    padding: 12px;
    background-color: #fff;
    box-shadow: 0px 0px 15px #20202030;
    margin: 10px;
    border-radius: 10px;
    margin: 10px 5px;
}

.inner-news .image {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.d-m-y {
    position: absolute;
    z-index: 1;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 10px;
    background: #eee;
    bottom: 15px;
    left: 15px;
}
.d-m-y p {
    font-size: 13px;
    font-family: 'chulalongkornbold';
    margin: 0;
    line-height: initial;
}
/* News */


/* Calendar */
.calendar {display: flex;}
.calendar .image {width: 50%;}
.calendar .btn-area div {display: block;}
.calendar .info {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7f7;
}
/* Calendar */


/* List */
ul {list-style: none;}
.col-md-6.content-l {padding: 0;}
.col-md-6.content-l p.h-s-sec {margin-bottom: 10px;}
.col-md-6.content-r {
    height: 100%;
    display: flex;
    justify-content: end;
    padding-right: 30px;
    align-items: center;
    font-size: 25px;
}

/*.list li:last-child{border-bottom: 1px solid #000;}*/
/* List */


/* table List */
table h4, table p {margin: 0 !important;}
table .fa-chevron-right:before {
    content: "\f054";
    color: #181816;
    font-family: 'FontAwesome';
}
table.table-list td {
    padding: 20px 0px;
    border-collapse: collapse;
    /*border-top: 1px solid #202020;*/
    border-bottom: 1px solid #202020;
}
table.table-list {margin: 15px;}
table.table-list th {
    padding: 20px 0px;
    color: #000;
    border-bottom: 1px solid #000;
    width: 50%;
}
table.table-list img.icon-btn {
    filter: unset;
    vertical-align: baseline;
    width: 15px;
}

/* table List */




/* page nav */
.fa-chevron-left:before  {content: "\f053";font-family: 'FontAwesome';}
.fa-chevron-right:before {content: "\f054";font-family: 'FontAwesome';}

.page-nav {margin-top: 60px;text-align: center;}
.page-nav i {font-size: 10px;vertical-align: middle;}
.page-nav ul {list-style: none;padding: 0;margin: 0;}
.page-nav ul li {display: inline-block;}
.page-nav ul li {
    display: inline-block;
    border: 2px solid #ccc;
    width: 35px;
    height: 35px;
    border-radius: 50px;
}
.page-nav ul li.active {background: #dd5c8e;border-color: #dd5c8e;}
.page-nav ul li.active a {color: #fff !important;}
.page-nav ul li:nth-child(5) {border-color: #fff;}
.page-nav ul li a {
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #837e7e !important;
    margin-top: -1px;
    display: block;
}
/* page nav */


/* Activity Detail */
.b-r-15 img {border-radius: 15px;}
/* Activity Detail */


/* personal list */
.personal-list ul {padding: 0;}
.personal-list .detail h5 {font-size: 16px !important;}
.personal-list .detail p {margin: 0;font-size: 13px;}
.personal-list ul li {width: 32.8%;}
.personal-list .detail {text-align: center;padding-top: 10px;}
.personal-list ul li {
    width: 24.5%;
    display: inline-block;
    margin-bottom: 20px;
    padding: 5px;
}
.personal-list div#pills-tabContent {
    padding: 0;
}
ul#pills-tab {padding: 0px 12px;position: relative;}
ul#pills-tab:before {
    content: "";
    width: 96.8%;
    height: 1px;
    position: absolute;
    bottom: 0;
    background: #dc5c8e;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #dd5c8e;
    background-color: unset;
    border-bottom: 4px solid;
    font-family: 'chulalongkornbold';
}
.nav-pills .nav-link {
    background: none;
    border-radius: 0;
    border-bottom: 3px solid #fff;
}
li.nav-item a:active {color: #dd5c8e;}
li.nav-item a:focus {color: #dd5c8e !important;}
.hover-wrap {position: relative;}
.text-wrap {
    position: absolute;
    top: 0;
    padding: 10px;
    transition: 0.3s;
    transform: translateY(50px);
    opacity: 0;
}

.text-wrap p {font-size: 13px;}
.text-wrap p {
    font-size: 13px;
    line-height: initial;
    color: #fff;
}
.personal-list .inner:hover .text-wrap {opacity: 1;transform: translateY(0px);}
.personal-list .inner:hover img {filter: brightness(0.5);}
/* personal list */




@media (max-width: 768px){

    .btn-area-top a.btn-main {padding: 5px 20px;height: unset;}
    ul#pills-tab:before {width: 93%;}

    .card-professor {display: block;width: 100%;}
    .btn-area div {display: block;}
    a.btn-main {width: 100%; margin-bottom: 10px;}
    a.btn-main.m-l-20 {margin-left: 0 !important;}
    .card-professor .image {width: 100%;}
    .card-professor .info {width: 100%;padding: 50px 0;}

    /* calendar */
    .calendar {display: block;}
    .calendar .image {width: 100%;}
    .calendar .info {width: 100%;display: block;margin-top: 20px;}
    /* Calendar */


    /* personal */
    .personal-list ul li {width: 49%;}
    .text-wrap p {font-size: 10px;line-height: initial;color: #fff;}


    /* news */
    .news ul li {display: inline-block;width: 100%;}


}