/*
 *
 * City University of Hong Kong
 * ----------------------------
 * Site Specific CSS
 *
 */

/* ============================ Place your custom CSS here */

.web_only
{
	display:none;
}

@media (min-width: 768px) {
  .web_only {
	display:block;
  }
}

.mobile_only
{
	display:block;
}

@media (min-width: 768px) {
  .mobile_only {
	display:none;
			 
  }
}

li
{
	padding:5px;
}
notice
{
	color:#CD009F;
	
	font-size:smaller;
	font-weight: bold;
	 
}

table thead tr th
{
	background-color:#CECECE!important;
}
.ted_block
{
	-webkit-box-shadow: 0px 10px 13px -7px #DDD, 0px 5px 15px -2px rgb(100 100 100 / 20%);
    box-shadow: 0px 10px 13px -7px #DDD, 0px 5px 15px -2px rgb(100 100 100 / 20%);
	padding: 10px;
}
.hidden_title
{
	display:none;
}

.content_table
{
	width:100%;
}
.content_table td
{
	padding:5px;
}
.content_table tr:nth-child(even) {background: #EEE}
.content_table tr:tr:nth-child(odd) {background: #FFF}


.resp-container {
 position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.resp-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.zoom_img
{
	overflow: hidden;
}
.zoom_img img
{
	-webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.zoom_img:hover img {
	-webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
}

.Index_Title
{
	/*
	color: #60cbcb;
    background: linear-gradient(225deg, #e49600 0%, #e45b00 75%, #7c257c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	*/
}

.Index_Sub_Title
{
	/*
	color: #dec93a;
    background: linear-gradient(225deg, #e49600 0%, #e45b00 75%, #7c257c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	*/
}

.Index_Highlights
{
	background-color:white; 
}

.Index_Highlights li a
{
	color:dodgerblue!important;
}

.Index_Highlights ul
{
	border-top: 1px solid #ffccff!important;
}

.Index_Course_Section
{
	background-color:aqua;
	background-image: url(../img/bg/courses.jpg);
	background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
	border-radius: 5px;
 	padding:10px;
}

.Index_Courses {
    background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    border-radius: 5px;
    padding: 10px;
}





.staff_table
{
	
}
.staff_table tr:nth-child(even) {background: #EEE}
.staff_table tr th
{
	 background-color:#C0C0C0;
}
.staff_table tr td
{
	 vertical-align:top;
}
.staff_table tr td:first-child {white-space: pre; }     




		.resp-container {
 position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.resp-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
		
		
		
		.btn-index_page {
			font-size:smaller;
    		color: #bf165e !important;
    		background-color: #fff;
    		
			padding:5px!important;
			transition: ease 0.2s;
}
		
			.btn-index_page:hover {
			 
    		color: #fff !important;
    		background-color: #bf165e;
    		
			 
}	
		
		.long_section
		{
			min-height: 350px;
			-webkit-box-shadow: 0px 10px 13px -7px #CCC, 0px 5px 15px -2px rgba(0,0,0,0.2); 
			box-shadow: 0px 10px 13px -7px #CCC, 0px 5px 15px -2px rgba(0,0,0,0.2); 
		}
		.main_section
		{
			padding: 10px;
			margin-bottom:50px;
		}
		.main_section_intro
		{
			/*font-size:smaller;*/
			padding:10px;
-webkit-box-shadow: 1px 1px 0px 0px rgba(250,150,0,1);
-moz-box-shadow: 1px 1px 0px 0px rgba(250,150,0,1);
box-shadow: 1px 1px 0px 0px rgba(250,150,0,1);
			background-color: rgba(255,255,255, 0.75);
		}
		.main_section_service_wrapper
		{
			padding:5px;
			margin: 5px;
		}
		.main_section_service
		{
			
			padding:5px;
			margin:5px;
			background-color:rgba(179,179,179,0.50);
			color:white;
			border-left: 24px solid rgba(255,255,255,1);
			 
		}
 
		.section_header
		{
			border-left: 9px solid #ffa85b;
			font-size:30px;
			font-weight:bold;
			color: #bf165e ; 
			text-shadow: 1px 1px 5px rgba(158, 158, 158, 1);
			padding: 10px; 
			margin-bottom:10px;
		}



/* GE Mapping */
	.area1
		{
			background-color:#ED686A!important;
		}
	.area2
		{
			background-color:#769BFF!important;
		}
	.area3
		{
			background-color:#FFCC59!important;
		}
	.area4
		{
			background-color:#C259D9!important;
		}
	.req
		{
			vertical-align: top;
			background-color:#9BE2FF;
			text-align: center;
			 
		}
	.opt
		{
			vertical-align: top;
			background-color:#FFEDBA;
			text-align: center;
			 
		}
	.mapping_table tr
		{
			border-bottom-style:solid;
			border-color:#CCCCCC;
		}
	.mapping_table li
		{
			padding:0px;
		}

/*  GE Mapping end */

.post-it
{
	padding:10px;
	 background-color:antiquewhite;
	 border: 1px solid #ff6550;
}



.grant_list {
	border-width:1px;
	border-style: solid;
	border-color:#DDD;
}
.grant_list thead
{
	font-weight: bold;
	text-align: center; 
	background: linear-gradient(225deg, #fff5d9 0%, #fff3ef 100%);
}
.grant_list tr td
{
	padding: 5px;
}
.grant_list tr:nth-child(even) 
{
	background: #EEE;
}
 
 
.grant_list tbody tr:hover
{
	color: #bf165e!important;
 	background-color: #f8f9fa;
    background: linear-gradient(225deg, #fff5d9 0%, #fff3ef 100%);
  	-webkit-transition: background-color 0.5s ease-out;
  	-moz-transition: background-color 0.5s ease-out;
  	-o-transition: background-color 0.5s ease-out;
  	transition: background-color 0.5s ease-out;
}











/* ============================ (added by Betsy, starting 11 September 2024) */


ul.cityu-submenu-block { margin-top: 4px; list-style-type: "\25BA"; font-size: 90%; }
ul.cityu-submenu-block li > a.dropdown-item { padding: 8px 10px 8px 12px; }
ul.cityu-submenu-block li > a.dropdown-item:hover { text-decoration: underline; }

section { padding-top: 40px; padding-bottom: 20px; }
section.page-title-heading { padding-bottom: 0; margin-bottom: -20px; }
a.pointer:hover { cursor: pointer; }

.label_new, .label_new-080percent { background-color: #730D38; color: #FFF; font-style: italic; padding: 1px 8px; }
.label_new { border-radius: 12px; }
.label_new-080percent { border-radius: 8px; font-size: 80%; }

.text_highlight-yellow { padding: 0 4px; background-color: #FEE686; }

.sidebar_fixed-position { position: sticky; top: 60px; z-index: 10; margin-bottom: 10px;}
ul.child-sidebar-list { background-color: #E6E7E7; margin-top: -16px; }
ul.child-sidebar-list li { padding-top: 4px; padding-bottom: 4px; border-bottom: solid 1px #B5B6B6; }
ul.child-sidebar-list li.child-sidebar-heading { font-weight: 800; border-bottom: solid 2px #1C1C1B; background-color: #FFFFFF; }
aside.child-sidebar { padding-bottom: 0 !important; }
.parent-sidebar { margin-top: -32px; border-top: solid 4px #bf165e; }
.parent-sidebar aside { margin-top: 0 !important; padding-top: 0 !important; }

table th.col_v-middle,
table td.col_v-middle,
table tr.col_v-middle td,
table tr.col_v-middle th { vertical-align: middle !important;  }
table.table_grey-white thead th { background-color: #F3F3F3 !important; }
table.table_grey-white tr { border-bottom: solid 1px #B5B6B6 !important; }



table.table_ge-mapping thead { position: sticky; top: -8px; font-size: 15px; font-weight: 950; }
table.table_ge-mapping tbody { overflow-y: auto; font-size: 14px; }
table.table_ge-mapping thead th { background-color: #F3F3F3 !important; }
table.table_ge-mapping .area1 { background-color: #F7C5C6 !important;}
table.table_ge-mapping .area2 { background-color: #BAE4F9 !important; }
table.table_ge-mapping .area3 { background-color: #F5E0A0 !important; }
table.table_ge-mapping .area4 { background-color: #D8C2EA !important; }
table.table_ge-mapping .req { background-color: rgba(0, 86, 98, 0.25); }
table.table_ge-mapping .opt { background-color: rgba(188, 197, 0, 0.4); }
table.table_ge-mapping .req, table.table_ge-mapping .opt { text-align: center; }
table.table_ge-mapping tr { border-bottom: solid 2px #FFFFFF !important; }
table.table_ge-mapping thead th,
table.table_ge-mapping tbody td { border-right: solid 2px #FFFFFF !important; }
table.table_ge-mapping li { padding: 0; }
table.table_ge-mapping ol { margin-bottom: 0; }








/* ============================ (AI-TDG) */

.tdg_project_list li {
	padding-bottom:20px;
}
.chatbox {
    font-weight: bold;
    font-family: 'Play', sans-serif;
    border-radius: 25px;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    max-width: 800px;
}
.chatbox_text {
    background: -webkit-linear-gradient(#ff8400, #a80284);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* blink cursor */
.blinking-cursor {
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
    -ms-animation: 1s blink step-end infinite;
    -o-animation: 1s blink step-end infinite;
    animation: 1s blink step-end infinite;
}
@keyframes "blink" {
	from, to {
		color: transparent;
	}
	50% {
		color: black;
	}
}
@-moz-keyframes blink {
	from, to {
		color: transparent;
	}
	50% {
		color: black;
	}
}
@-webkit-keyframes "blink" {
	from, to {
		color: transparent;
	}
	50% {
		color: black;
	}
}
@-ms-keyframes "blink" {
	from, to {
		color: transparent;
	}
	50% {
		color: black;
	}
}
@-o-keyframes "blink" {
	from, to {
		color: transparent;
	}
	50% {
		color: black;
	}
}
.typewriter {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

/* The typewriter cursor effect */
@keyframes blink-caret {
	from, to {
		border-color: transparent;
	}
	50% {
		border-color: transparent;
	}
}
/* end typing */


@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

h1.cybertitle {
    font-family: 'Audiowide', sans-serif;
    text-align: center;
    font-size: 70px;
    color: #98822C;
    position: relative;
    background: linear-gradient(30deg, #5B2D00 5%, #894300 10%, #E47000 20%, #BF165E 50%, #BF165E 75%, #7C0378 85%, #320130 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
h1.cybertitle_m {
    font-family: 'Audiowide', sans-serif;
    text-align: center;
    font-size: 30px;
    color: #98822C;
    position: relative;
    background: linear-gradient(30deg, #5B2D00 5%, #894300 10%, #E47000 20%, #BF165E 50%, #BF165E 75%, #7C0378 85%, #320130 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
h1.cybertitle::before,
h1.cybertitle_m::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #BF165E;
}
h1.cybertitle::before { z-index: -1; text-shadow: -1px -2px 1px #FFFFFF, 2px 4px 1px #4A0248; }
h1.cybertitle_m::before { z-index: -1; text-shadow: -1px -1px 1px #FFFFFF, 1px 2px 1px #4A0248; }
.cybertext {
    font-family: 'Audiowide', sans-serif;
    font-size: 40px;
    color: #98822C;
    background: linear-gradient(30deg, #5B2D00 0%, #894300 5%, #E47000 10%, #BF165E 30%, #BF165E 55%, #7C0378 75%, #320130 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}
.cybertext_m {
    font-family: 'Audiowide', sans-serif;
    font-size: 25px;
    color: #98822C;
    background: linear-gradient(30deg, #5B2D00 0%, #894300 5%, #E47000 10%, #BF165E 30%, #BF165E 55%, #7C0378 75%, #320130 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}
.cybertext_small {
    font-family: 'Audiowide', sans-serif;
    text-align: center;
}
.video-container {
    position: relative;
    background: linear-gradient(to right, #000000, rgba(19, 19, 19, 0));
}
.video-container video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: 0;
}
/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
    z-index: 1;
    position: relative;
    text-align: center;
    color: #dc0000;
    padding: 10px;
}

/* ======================================== */
/* ============ Version 2025 ============== */

.flip-card {
    background-color: #242424;
    width: 100%;
    height: 240px;
    perspective: 1000px;
    font-family: 'Play', sans-serif;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /*box-shadow: 6px 6px 0 0 rgba(0,0,0,0.4);*/
}

.flip-card-front {
    border-left: solid 4px rgba(0,0,0,0.6);
    border-right: solid 4px rgba(0,0,0,0.6);
    border-top: solid 20px rgba(0,0,0,0.6);
    border-bottom: solid 20px rgba(0,0,0,0.6);
}

.flip-card-title, .flip-card-play-cover {
    padding: 0 8px;
    text-align: center;
}
.flip-card-title {
    height: 175px;
    color: rgba(255,255,255,0.85);
    font-size: 105%;
    font-style: italic;
    line-height: 120%;
    padding-top: 10px;
}
.flip-card-play-cover {
    height: 120px;
    color: rgba(255,255,255,0.5);
    font-size: 80px;
    text-shadow: 0 0 4px rgba(0,0,0,0.1);
}

.flip-card-presenter {
    padding: 0 12px;
    height: 25px;
    color: rgba(255,255,255,0.8);
    text-align: right !important;
    font-size: 85%;
}
.flip-card-play-caption {
    padding: 8px 12px;
    height: 55px;
    color: rgba(255,255,255,0.85);
    text-align: left !important;
    font-size: 125%;
}

.flip-card-back {
    background-color: #121212;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateY(180deg);
    border-left: solid 4px #242424;
    border-right: solid 4px #242424;
    border-top: solid 20px #242424;
    border-bottom: solid 20px #242424;
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.flip-card-back img { height: 100%; width: auto;}
.flip-card-gradient { background-image: linear-gradient(30deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4), rgba(0,0,0,0.2), rgba(0,0,0,0.1), rgba(0,0,0,0), rgba(255,255,255,0.1), rgba(255,255,255,0.15), rgba(255,255,255,0.2), rgba(255,255,255,0.1), rgba(255,255,255,0)); }

.panopto_container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.panopto_title { font-weight: 600; font-size: 110%; }

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.quote-symbol {
    font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 125%;
}

.modal-content { font-family: 'Play', sans-serif; }
.modal-body { color: white; background-color: #121212; }
.modal-footer .btn { font-size: 120%; font-weight: 800 !important; }

.project-background {
    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.8), rgba(255,255,255,0.5), rgba(255,255,255,0.2), rgba(255,255,255,0)), url("../img/bg.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

.chatbot-theme {
    background-color: white;
    border: solid 4px #CCCCCC;
}





.heading_dialog-box {
	position: relative;
	padding: 12px 16px 8px 16px;
	background-color: #242424;
	border-left: 4px solid #6C6D6D;
	border-bottom: 4px solid #6C6D6D;
	margin-left: 24px;
	width: 90%;
	max-width: 480px;
	border-radius: 12px;
	font-family: 'Play', sans-serif;
	color: #F3F3F3;
	text-align: center;
}

.heading_dialog-box:after,
.heading_dialog-box:before {
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
}
.heading_dialog-box:after { border-width: 12px; }
.heading_dialog-box:before { border-width: 18px; }


.heading_dialog-box.from-left:after,
.heading_dialog-box.from-left:before {
	right: 100%;
	top: 50%;
}
.heading_dialog-box.from-left:after {
	border-color: transparent #242424 transparent transparent;
	margin-top: -16px;
}
.heading_dialog-box.from-left:before {
	border-color: transparent #6C6D6D transparent transparent;
	margin-top: -20px;
}

.heading_dialog-box.from-right {
	transform: translateX(-100%);
	margin-left: calc(100% - 24px);
}

.heading_dialog-box.from-right:after,
.heading_dialog-box.from-right:before {
	left: 100%;
	top: 50%;
}
.heading_dialog-box.from-right:after {
	border-color: transparent transparent transparent #242424;
	margin-top: -16px;
}
.heading_dialog-box.from-right:before {
	border-color: transparent transparent transparent #6C6D6D;
 	border-width: 16px;
	margin-top: -18px;
}