/* general */
.entry .entry-content .profile-link{text-decoration:none;}
.img-wrap{display:inline-block;width:100%;  display: flex;
  align-items: center;
  justify-content: center;
	overflow:hidden;
  	border-bottom:1px solid #cecece;
}
.img-wrap img{text-align:center;}
.list .img-wrap{display:none;}

/* grid */
.iso-grid{clear:both;}
.iso-grid.list {background-color:white; border-top:1px solid #cecece; line-height:0px;}
.iso-grid:not(.grid)::after {content: '';display: block;clear: both;}
.content.iso-grid .item-card {margin-left:0px;}
.iso-grid.list .item-card {width:100%;}

.grid {
    display:flex;
    flex-wrap:wrap;
    gap:25px;
}
.grid .item-card {
    background: #f1f1f1;
    flex: 1 1 22%;
    display: flex;
    flex-direction: column;
    margin-left: 0px !important;
    max-width:calc((100% - 75px) / 4);
    text-decoration:none;
}


/* element-item */
.element-item {position: relative;float: left;width: 100%;margin:0px;padding:0px;margin-bottom: 20px;background: #fff;border:1px solid #cecece;color: #262524;}
.element-item > * {margin: 0;padding: 0;}
.content.iso-grid .grid-sizer,.content.iso-grid .element-item{width:25.0%;}
.element-item{border:none;}
.element-item{border-bottom:1px solid #cecece;}
.gutter-sizer{width:0;}
.iso-grid.grid .profile-card img{background-color:#cecece;}

.content.iso-grid .grid-sizer,.content.grid .element-item{width:100%;}

/* course details */
.material-icons{font-size:18px;margin-top:-4px;}













#status{display: flex;width:100%;margin-top:25px;align-items: center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #000000;}
.status-line{width:100%;padding-left:20px;font-size:12px;line-height: 20px;}
.status-line2{margin-bottom:20px;height:25px;padding: 0 10px;}
.filter-count{float:left;font-size:12px;}
.clear-filters{width:80px;margin-bottom:0px;font-size:12px;font-weight:325;}
.enable-clear-filter-btn:hover{cursor:pointer;}
.clear-filters:before{content:'CLEAR ALL';padding:5px;border-radius:5px;}
.enable-clear-filter-btn:hover:before{color:white;}

.enable-clear-filter-btn:before{pointer-events: all;}
.disable-clear-filter-btn:before{color:#EEEEEE;pointer-events: none;border:1px solid #EEEEEE}

/* Search bar styling */
#qsearch .icon-search {
    top:10px;
    left:12px;
    padding-right:12px;
    font-size:15px;
    line-height:17px;
}
#filter-search-text {
    margin:0;
    font-size:24px;
    line-height:36px;
    height:50px;
    width:100%;
    padding-right:31px;
    box-sizing:border-box;
    text-indent:15px;
    margin-left:0px;
    padding-left:55px;color:#000000;
}
#qsearch {
    position:relative;
    display:inline-block;
    width:100%;
    margin:0;
}
#qsearch .icon-search {
    font-size: 19px;
    border-right: 1px solid #dddddd;
    padding-right: 18px;
    position: absolute;
    top: 11px;
    line-height: 30px;
    color:#000000;
    left:18px;
}

#clear-searchbar-btn {
    color: #EEEEEE;
    pointer-events: none;
    border: 1px solid #EEEEEE;
    border-radius:5px;
    position: absolute;
    right: 10px;
    top: 15px;
	margin-top:0px;
}
#clear-searchbar-btn:before {
    content:"\e14c";
}
#clear-searchbar-btn.enable-qsearch-clear-btn {
    pointer-events:all;
    cursor:pointer;
}
/* End of search bar styling */


/* start of multiselects styling */
#filters {
    display: flex;
    flex-flow: row wrap;
    margin:0;
    margin-bottom:5px;
}
.vsb-main {
    width:100%;
}
.vsb-main > button {
    max-width: unset !important;
    height: 50px;
    font-size: 12px !important;
    line-height: 15px !important;
    letter-spacing: 1.0px;
    text-transform: uppercase;
    padding: 5px 10px !important;
    border:1px solid #cccccc !important;
}
.vsb-main > button > .caret:after {
    content:"\e5cf";
    font-size: 22px;
    font-family: 'Material Icons';
    left: 20px;
}
.vsb-main > button > .caret {
    border: none !important;
    display: inline-flex;
    width: 25px;
    height: 15px;
    margin-top:0px !important;
}
.vsb-main > button:hover {
    background:#eeeded !important;
}

#filters .vsb-menu {
    width:inherit;
    margin-top:5px;
    border-radius: 0px;
    cursor:default;
    border:1px solid #cccccc;
    z-index:1 !important;
}
#filters .vsb-main .title {
    color: #000000;
}
#filters .vsb-menu ul{
    padding:0px;
    max-width:100% !important;
    padding-top: 10px;
    padding-bottom: 5px;
    overflow-y:hidden;
    max-height:250px;
    width:inherit;
}
#filters .vsb-menu ul.scroll::-webkit-scrollbar {
    width: 8px;
}

#filters .vsb-menu ul.scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#filters .vsb-menu ul.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #888;
}

#filters .vsb-menu ul.scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.clear-btn-hr{
    margin: 0px 10px 10px 10px;
}
#filters .vsb-menu li{
    font-size:12px;
    line-height:15px;
    padding:6px 40px;
    white-space: normal;
    position:relative;
}
#filters .vsb-menu .multi li:not(.grouped-option)::before {
    margin-left:0px;
    left:12px;
    padding: 5px;
    border-radius: 0px;
    border: 1.75px solid;
    color:rgba(0,0,0,0.7);
}
#filters .vsb-menu .multi li:not(.grouped-option).active::after {
    height: 7px;
    width: 3px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    position: absolute;
    left: 34px;
    top: 6px;
}
#filters .vsb-main li:hover {
    background: #eeeded;
}

#filters .ms-btn-wrapper {
    margin-top: 0px;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}
#filters .ms-btn {
    text-align: center;
    width: 90px;
    min-width: 90px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    padding: 4px 0px;
    pointer-events:none;
    cursor:auto;
    color:#eeeeee;
    border:1px solid #eeeeee;
}
#filters .ms-btn.ms-show-all-btn{
    margin-right:10px;
    border:none;
    border-radius: 0px;
}
#filters .vsb-main .ms-btn.ms-active-btn.ms-show-all-btn {
    border:none;
    border-radius: 0px;
}
#filters .vsb-main .ms-btn:hover {
    color:white;
}
#filters .vsb-main .ms-btn.ms-active-btn {
    cursor:pointer;
    pointer-events: all;
}

#filters .vsb-main .ms-open .caret:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ms-wrapper {
    flex: 1;
    max-width:50%;
    margin-top:15px;
}
.ms-wrapper:not(:last-child) {
    margin-right: 15px;
}

.ms-select-list, .radio-select-list {
    margin:0px;
}

.number-of-options{
    padding-left:5px;
    font-weight:normal;
}
.ms-select-list li, .radio-select-list label {
    padding-left:50px;
    font-size: 15px;
    line-height: 20px;
    padding-bottom: 7px;
    padding-top:7px;
    cursor:pointer;
    position:relative;
}
.ms-select-list li:hover, .radio-select-list label:hover {
    background:#eeeeee;
}
.ms-select-list li:not(.grouped-option)::before{
    margin-left: 0px;
    left: 22px;
    margin-top:3px;
    padding: 5px;
    border-radius: 0px;
    border: 1.75px solid;
    color: rgba(0,0,0,0.7);
    content: "";
    display: inline-block;
    font-size: inherit;
    font-weight: bold;
}

.ms-select-list li:not(.grouped-option).active::after{
    margin-left: -24px;
    margin-top: 5px;
    height: 6px;
    width: 3px;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    content: "";
    font-size: inherit;
    float: left;
    margin-left: -24px;
    display: inline-block;
    transform: rotate(45deg);
    position: absolute;
    top: 7px;
    left: 50px;
}
.vsb-menu li.active, .ms-select-list li.active, .radio-select-list label.active {
    font-weight:bold;
}
#filters .ms-multi-btn-wrapper {
    justify-content: space-between;
    padding:0px 10px;
}
#view-more-btn:hover {
    background-color:#eeeded;
}
.view-more-btn-wrapper {
    text-align: center;
    margin-top: 25px;
    display: inline-block;
    width: 100%;
}

.l3-column #content .view-more-btn-wrapper {
    margin-top:5px;
}

#filters .ms-wrapper .inactive-filter, #filters .ms-wrapper .inactive-filter > * {
    pointer-events: none!important;
    color:grey;
    opacity:0.7;
}
/* End of multiselects styling */



/* Start of custom scrollbar styling */
.custom-scrollbar {
    overflow-y: auto !important; /* Enable vertical scrollbar */
    height: 250px; /* Example height */
    width: 300px; /* Example width */
}

.custom-scrollbar::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Track color */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #888; /* Thumb color */
    border-radius: 5px; /* Rounded corners */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Hover color */
}

/* End of custom scrollbar styling */



/* Start of mobile modal buttons styling */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
    width: calc(100% - 40px);
    margin: 0px 20px;
    height: calc(100vh - 100px);
    display:flex;
    flex-direction: column;
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 12px 20px;
    border: none;
    text-align: center;
}

.modal-body {
    padding: 12px 0px;
    flex: 1;
    max-height:unset;
}

.modal-footer {
    padding: 20px 10px 25px 10px;
    display: flex;
    gap: 15px;
    background-color: #ffffff;
    margin-left:10px;
    margin-right:10px;
}

.modal-content .modal-footer:before, .modal-footer:after {
    display:unset;
    content:unset;
}

.modal-footer button {
    flex: 1;
    font-size: 12px;
    line-height: 20px;
    padding: 5px 0px;
    font-weight:normal;
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

.ms-select-list {
    margin:0px;
}

.number-of-options{
    padding-left:5px;
    font-weight:normal;
}
#clear-modal-btn{
    border:1px solid #eeeeee;
    color:#eeeeee;
    border-radius: 5px;
}
#clear-modal-btn.modal-enable-clear:hover {
    color:white;
}
#close-modal-btn {
    border:none;
    font-weight:bold;
}
.mobile-modal-btn {
    font-size:12px;
    line-height:15px;
    text-transform: uppercase;
    letter-spacing: 1.23px;
    width: 100%;
    padding: 10px;
    justify-content: space-between;
    border:1px solid #cccccc;
    color:black;
}
.mobile-modal-btn.closed:after {
    content: "\e5cf";
    font-size: 22px;
    font-family: 'Material Icons';
    margin-right:-5px;
}
.mobile-modal-btn.closed:hover {
    background:#eeeeee;
}

/* The container */
.radio-btn-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio-btn-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.radio-checkmark {
    position: absolute;
    top: 7px;
    left: 22px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 1px solid black;
}

/* On mouse-over, add a grey background color */
.radio-btn-container:hover input ~ .radio-checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-btn-container input:checked ~ .radio-checkmark {
    background-color: white;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-btn-container input:checked ~ .radio-checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-btn-container .radio-checkmark:after {
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
/* End of mobile modal buttons styling */





























/*item content */

.profile-content{padding:5px 10px;color:black;}
a.profile-link{text-decoration:none;}
/*a.profile-link:hover > .profile-content{}*/

/*for lists only */
.list .element-item .profile-content{margin-top:10px;}
.list .element-item p.terms{font-size:1em;font-weight:bold;margin-bottom:1.2em;color:#0680A6;}
.list .element-item p.title{font-size:1.5em;line-height:1.1em;margin-bottom:0;}
.list .element-item div.excerpt{margin-top:10px;}
.list .element-item div.date{margin-top:20px;}
.list .element-item div.excerpt p{font-size:14px;line-height:22px;margin-bottom:0;}


/*for grid only*/
.grid .element-item p.terms{height:2em;font-size:.5em;font-weight:bold;}
.grid .element-item p.title{font-size:1em;line-height:1.1em;height:2em;font-weight:lighter}
.grid .element-item div.excerpt{
	height:10em;
	overflow:hidden;
	text-overflow:ellipsis;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #filters .filter-select {background-image:none;}
}

/***************Select Multiple *************************/

.js-example-tags-container{clear:both;margin-top:5px;width:100%;padding-left:20px;}

.js-example-tags-container ul {
  	list-style: none;
		padding: 0;
		margin:0;
}
.js-example-tags-container li.tag-label{font-size:16px;list-style: none;float:left;margin-top:8px;margin-right:8px;}


#content ul li.tag-selected {
	font-size:1em;
	float:left;
  list-style: none;
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0 5px;
}

#content ul li.tag-selected:before{content:'';}

.entry .entry-content a.destroy-tag-selected,a.destroy-tag-selected {
  color: black;
  cursor: pointer;
  display: inline-block;
  font-weight: normal;
  margin-right: 2px;
  text-decoration: none;
}

#content a.profile-link:after,.entry .entry-content a.destroy-tag-selected:after,#content a.destroy-tag-selected:after {content:'' !important;}

.select2-selection__choice {
  display: none;
}

li.tag-label{
	background:none;
	border:none;
}

/***************Select Multiple *************************/

#view-more{margin-top:40px;}
#view-more:hover{color:white;background-color:#0680A6;}
.hiddenx{visibility: hidden;}



.list .element-item .container {
  max-width: 250px;
  float:right;
  padding:10px;
  padding-bottom:20px;
}

.list .element-item .image-wrapper {
  position: relative;
  padding-bottom: 56.2%;
}

.list .element-item .image-wrapper img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.iso-grid{
  border-bottom: 1px solid #cecece;
}




.iso-grid img{border: 1px solid #cecece;}


/************GRID***********/
.grid-list-view-all{
  	margin-top:4px;
	color: #808080;
	line-height: 50px;
	letter-spacing: 0.8px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 600;
	white-space: nowrap;
}
a.grid-list-view-all:hover{
  	color: #808080;
 	text-decoration:underline;
}
#content a.grid-list-view-all:after{
  	content:''!important;
}

#content.span6 a.grid-list-view-all{margin-top:-4px;}

.iso-grid.container:not('inheader')[id^=ubcc-controls-]{width:100%;}
.iso-grid.grid .content-wrap:hover .cover-wrap .publication-cover{opacity:.5;}
.iso-grid.grid .element-item{border-bottom:none;background-color:inherit;}
/*.iso-grid.grid{margin-left:-10px;margin-right:-10px;}*/
/* .iso-grid.grid .publications{padding-left:10px;padding-right:10px;} */
.iso-grid.grid .cover-wrap{cursor:pointer;}
.iso-grid.grid .content-wrap:hover {cursor:pointer;}
.l3-column .iso-grid.grid .item-card .ap-excerpt-wrap {
    color:#262524;
}
.l3-column .iso-grid.grid .item-card:hover .ap-list-title{
    text-decoration: underline;
}

/************NEW AP LIST***********/
body #content .iso-grid.list a:after,#content .iso-grid.grid a:after{content:''!important;}
body #content.content.span6 .ap-list-excerpt > a:after {content:'launch' !important;}

.iso-grid{border:none;}
.iso-grid.list .ap-excerpt-wrap span.elementpad{display:none!important;}
.ap-list-title-link{pointer-events:none;cursor:default;}
.content.iso-grid.list .grid-sizer,.content.iso-grid.list .element-item{width:100%;margin-bottom:0px;margin-left:0px;}
.element-item:hover{cursor:pointer;}
.element-item:hover .ap-list-title-link{text-decoration:underline;}
.ap-list-header{padding:15px;padding-bottom:5px;}
.ap-list-header .show-content {padding-top:30px;}
.ap-list-terms h6{margin:0;}
h3.ap-list-title{margin-bottom:5px;margin-top:5px;word-break: break-word;}
.ap-list-excerpt{padding:15px;padding-top:5px;}
p.ap-list-title{margin:0;}

/************desktop***********/

.ap-list-excerpt{display:none;}
.show-content .ap-list-excerpt{display:block;}
.ap-list-excerpt button{display:none;}
.show-content a.ap-list-title-link:after{font-size:22px!important;}

/************span6 list***********/
.content.span6.iso-grid.grid .grid-sizer,.content.span6.iso-grid.grid .element-item, .content.span6 .iso-grid.grid .element-item{width:50%;}
.content.span6 .iso-grid.grid .item-card {max-width:50%; flex: 1 1 47%;}

.content.span6 .element-item:hover .ap-list-header{cursor:pointer;} 
/*.content.span6 .element-item{background-color:#f1f1f1;}*/

/***********list general***********/

.content.span6 .iso-grid.list {border:none;}
.content.span6 .list .element-item{border:1px solid #cecece;margin-bottom:20px;box-sizing:border-box;}
.content.span6 .ap-list-excerpt{display:none;padding-top:10px;}
.content.span6 .ap-list-title-link{pointer-events:none;cursor:default;}
.content.span6 .ap-list-header{padding-top:15px;position:relative;}
.content.span6 .ap-list-header .ap-list-terms, .content.span6 .ap-list-header h3.ap-list-title {margin-right:55px;}
/************mobile with no description***********/

.content.span6 .ap-list-excerpt > a {position:relative;display:inline-block;width:100%;}
.content.span6 .ap-list-excerpt button{display:block;width:100%;text-align:left;margin-top:15px;cursor:pointer;}
body #content.content.span6 .ap-list-excerpt > a:hover:after{color:white !important;}
.content.span6 .ap-list-excerpt button:hover,body.mobile .ap-list-excerpt button:hover{color:white;}
/*.content.span6 .ap-list-excerpt button:after{float:right; font-weight:normal; font-feature-settings:'liga'; font-size:20px; content:'launch'; font-family:'Material Icons';}*/
.content.span6 .ap-list-excerpt a:after{position:absolute; top:40px; right:20px; font-size:20px !important; font-weight:normal; font-feature-settings:'liga'; font-size:20px; content:'launch'; font-family:'Material Icons';}


/************mobile with description***********/

.content.span6.show-content .element-item.content-open{pointer-events:none;}
.content.span6.show-content .element-item.content-open:hover{background-color:white;}
.content.span6.show-content .element-item.content-open .ap-list-header,.content.span6.show-content .element-item.content-open .ap-list-excerpt button{pointer-events:all;}

body.mobile .element-item.content-open{pointer-events:none;}
body.mobile .element-item.content-open:hover{background-color:white;}
body.mobile .element-item.content-open .ap-list-header,body.mobile .element-item.content-open .ap-list-excerpt button{pointer-events:all;}
.content.span6.show-content .ap-list-excerpt{margin-top:15px;}
#content .content.span6.show-content .ap-list-title-link:after{content:''}

#content.content.span6 .show-content .ap-list-header:after{ content:'keyboard_arrow_up';text-transform:none; font-weight:normal; font-feature-settings:'liga'; font-size:25px; content:'keyboard_arrow_down'; font-family:'Material Icons'; position: absolute; right: 15px; top: calc((100% / 2));}
#content.content.span6 .show-content .ap-list-header.content-open:after{ content:'keyboard_arrow_up'; }
#content.content.span6 .show-content .element-item:hover .ap-list-header .ap-list-title-link{text-decoration:none;}



.content.span6.show-content .content-open.ap-list-header{cursor:pointer;border-bottom:1px solid #cecece;}
.content.span6.show-content a.ap-list-title-link:after{content:'' !important;}
.content.span6.show-content .ap-list-header .ap-list-terms h6:after{text-transform:none; float:right; font-weight:normal; font-feature-settings:'liga'; font-size:25px; margin-right:10px; content:'keyboard_arrow_down'; font-family:'Material Icons';}
.content.span6.show-content .ap-list-header.content-open .ap-list-terms h6:after{ content:'keyboard_arrow_up'; }
/*.content.span6.show-content .element-item{background-color:transparent}*/
.content.span6.show-content .element-item:hover .ap-list-title-link{text-decoration:none;}
.content.span6.show-content .element-item{border-color: #cecece;}
.list.content.span6 .show-content .element-item:hover{background-color:transparent;}
.list.show-content.span6 .element-item{margin-bottom:20px;}
.list.show-content.span6 .element-item{border:1px solid #cecece;}


.publication-cover{height:28vw; /*max-height:350px;*/}
.iso-grid.grid .content-wrap{padding-bottom:10px;}

@media screen and (max-width: 767px) {
    #filters .filter-select,#filters .select2{flex-basis: 100%;margin-right:0;max-width:100%;width:100%!important} 
 	#filters .select2-selection.select2-selection--single {flex-basis:100%;margin-right:0;max-width:100%; width:100%!important} 
  	#ubc-sync-courses #ubcc-controls #inner-controls{margin-left:-20px;margin-right:-20px;padding:20px;background-color:#efefef;}

	/************mobile list***********/

	.element-item:hover .ap-list-header{cursor:pointer;} 
	.element-item{background-color:#f1f1f1; border:none;}
    .list.view-more-btn-wrapper, .grid.view-more-btn-wrapper {margin-top:5px;}

	/***********list general***********/

 	.iso-grid.list {border:none;}
	.list.show-content .element-item{border:1px solid #cecece;}
    .list .element-item{margin-bottom:20px;}
	.show-content .ap-list-excerpt{display:none;padding-top:10px;}
	.ap-list-title-link{pointer-events:none;cursor:default;}
	.ap-list-header{padding-top:15px;}

	/************mobile with no description***********/

	.ap-list-excerpt button{display:block;width:100%;text-align:left;margin-top:15px;cursor:pointer;}
	.ap-list-excerpt button:hover{color:white;}
	/* .ap-list-excerpt button:after{float:right; font-weight:normal; font-feature-settings:'liga'; font-size:20px; content:'launch'; font-family:'Material Icons';} */

	/************mobile with description***********/

	.content.span6.show-content .content-open.ap-list-header{cursor:pointer;border-bottom:1px solid #cecece;}
	.content.span6.show-content a.ap-list-title-link:after{content:'' !important;}
	.content.span6.show-content .ap-list-header .ap-list-terms h6:after{text-transform:none; float:right; font-weight:normal; font-feature-settings:'liga'; font-size:25px; margin-right:10px; content:'keyboard_arrow_down'; font-family:'Material Icons';}
	.content.span6.show-content .ap-list-header.content-open .ap-list-terms h6:after{ content:'keyboard_arrow_up'; }
	.show-content .element-item{background-color:transparent}
	.show-content .element-item:hover .ap-list-title-link{text-decoration:none;}
	.show-content .element-item{border-color: #cecece;}
	.list .show-content .element-item:hover{background-color:transparent;}
	.show-content .ap-list-excerpt{margin-top:15px;}
	#content .show-content .ap-list-title span.ap-list-title-link:after{content:""}

}

@media screen and (max-width: 1199px) {
	.content.span6.iso-grid.grid .grid-sizer,.content.span6.iso-grid.grid .element-item,.content.span6 .iso-grid.grid .element-item{width:50%;}
}

@media screen and (max-width: 979px) {
	/* .iso-grid.grid .grid-sizer,.iso-grid.grid .element-item{width:33%;} */
	.publication-cover{height:37vw;}
	.content.span6.iso-grid.grid .grid-sizer,.content.span6.iso-grid.grid .element-item,.content.span6 .iso-grid.grid .element-item{width:50%;}
	.content.span6 .publication-cover{height:28vw;}


}

@media screen and (max-width: 767px) {
	.iso-grid.grid .grid-sizer, .iso-grid.grid .element-item{width:100%;}
	.content.span6.iso-grid.grid .grid-sizer,.content.span6.iso-grid.grid .element-item,.content.span6 .iso-grid.grid .element-item{width:100%;}



	/* GRID ONLY*/
  	.grid .element-item{/*border:1px solid #cecece;*/margin-bottom:0px;}
	.iso-grid.grid{margin-left:0px;margin-right:0px;}
	.iso-grid.grid .publications{padding-left:0;padding-right:0;}
	/*.grid .element-item .content-wrap{border-bottom:1px solid #cecece;}*/
	.grid .element-item .cover-wrap{ display:none; }
	.grid-sizer, body.mobile .element-item{width:100%;}
	.grid .element-item .content-wrap{background-color:#f1f1f1; padding:10px;}
	.grid .element-item:hover .content-wrap{cursor:pointer;}
	.grid .element-item .content-wrap span.elementpad{display:none!important;}
	/* GRID ONLY*/
}

/*************************AP LIST/GRID******************************/


/*************************NEWSEVENTS******************************/
/*.news-item-cover:before{background-color: #3A057B;}
.news-item .news-inner a,.news-item .news-inner a:link,.news-item .news-inner a:visited,.news-item .news-inner a:hover{color: #3A057B;}*/

.news.content.iso-grid{padding-bottom:60px;}
.news-inner.hovering{cursor:pointer;}
.news-inner.hovering .news-inner-wrap h4 a{text-decoration:underline;}
.news-inner-wrap h4{margin-bottom:0; }

.news-item-cover:before{
position:absolute;
opacity:0;
content:'';
height:37.5vw; 
max-height:490px;
width:75%;
}
.news-item-cover.hovering:before,.news-item-cover:hover:before{opacity:.5;}

.news-item-cover{
background-size:cover;background-position: 50% 50%;
}
.news-inner{
position: absolute;
bottom: -8px;
background-color: white;
width:43%;
margin:20px;
margin-bottom:0px;
margin-left:0px;
padding-bottom:0px;
padding-right:20px;
padding-top:10px;
}

.news-inner.hovering h3{text-decoration:underline;}

.news-item-cover{
margin-left:25%;
height:37.5vw; 
max-height:490px;
width:75%;
}

.news-inner h4:after{text-decoration:none;font-family: FontAwesome; padding-left:4px; content:'\f178';display: inline-block;}

.iso-grid.news a:after{display:none!important;}
.iso-grid.news, .iso-grid.news .element-item{border:none!important;}
.iso-grid.news .element-item:hover{background-color:transparent;cursor:default;}
.news-item-cover:hover{cursor:pointer;}

	/*Added as MOD */
	.content.span6 .news-item{border:1px solid #cecece;}
	/*.content.span6 .news-item:hover .news-inner-wrap{background-color:#F4EDFD}*/
	.content.span6 .news-inner{width:100%; position:relative;padding: 0;  margin:0px;}
	.content.span6 .news-inner p {display:block;}
	body.mobile .news-item-cover:before{height:50vw;margin-left:0;width:100%;}
	.content.span6 .news-item-cover{height:25vw;max-height:300px;}
	.content.span6 .news-inner-wrap{padding:15px;}
	/*END MOD */



    @media screen and (max-width: 1024px) {
        .grid .item-card {
            flex: 1 1 30%;
            max-width: 31%;
        }
    }

    @media screen and (max-width: 768px) {
        .grid {
            flex-wrap: nowrap;
            gap: 0px;
            flex-direction: column;
        }
        .grid .item-card {
            max-width: 100%;
            margin-bottom: 20px;
        }
        .content.iso-grid.list .element-item {
            margin-bottom:20px;
            box-sizing:border-box;
            float:left;
        }



        #filters {
            flex-flow:column;
        }
        .ms-wrapper, .checkbox-wrapper {
            margin-right:0px !important;
            margin-bottom:5px;
            max-width:100%;
            margin-top:0px;
        }
        .vsb-main {
            display: block !important;
        }
        .vsb-main > button {
            display:none !important;
        }
        .mobile-modal-btn.visible-phone{
            display:flex !important;
        }
    
        #status{
            flex-direction: row-reverse;
            justify-content: space-between;
            align-items: flex-start;
        }
        .status-line {
            padding-left:0px;
            padding-right:10px;
        }
        .clear-filters {
            width:75px;
        }
        #qsearch {
            margin-bottom:5px;
        }
        #filter-search-text {
            font-size:18px;
            line-height: 28px;
            height: 35px;
            padding-left: 30px
        }
        #qsearch .icon-search {
            top:10px;
            left:12px;
            padding-right:12px;
            font-size:15px;
            line-height:17px;
        }
        #clear-searchbar-btn {
            top:12px;
            font-size: 18px;
            margin-top: -4px;
        }
        .checkbox-container {
            margin-bottom: 5px;
        }
        .checkbox-label {
            display:none;
        }
    }

@media screen and (max-width: 979px) { 
	.content.span6 .news-item-cover,.content.span6 .news-item-cover:before{height:25vw;margin-left:0;width:100%;}
}

@media screen and (max-width: 767px) { 
	.news-item-cover,.news-item-cover:before,
	.content.span6 .news-item-cover,.content.span6 .news-item-cover:before{height:50vw;margin-left:0;width:100%;}
	/*Added as MOD */
	/*.news-item{border:1px solid #cecece;}
	.news-item:hover .news-inner-wrap{background-color:#F4EDFD}*/
	.news-inner{width:100%; position:relative;padding: 0;  margin:0px;}
	.news-inner  p.ap-news-content{display:none;}
	.news-inner-wrap{padding:15px;border:1px solid #cecece;border-top:none;margin-top:-15px;}
	/*END MOD */
}

@media (max-width:979px) and (min-width:600px) {
	.news-inner  p.ap-news-content{display:none;}
	.content.span6 .news-inner p.ap-news-content{display:block;}
}

/*************************CAROUSEL******************************/

		.arts-carousel{visibility: hidden;}

		.arts-carousel .carousel-item-cover{
  			height: 50vw; /*56.25vw; 16:9*/
  			/*border:1px solid #cecece;*/
		}
		/*.arts-carousel .item .carousel-item-cover{opacity:0.5;}
		.arts-carousel .hovering .item .carousel-item-cover{opacity:1.0;}*/
		.arts-carousel .center .item .carousel-item-cover{opacity:1.0;}
		.arts-carousel .center.hovering .item .carousel-item-cover{opacity:.5;}

/************CUSTOM DOTS***************/

		#carousel-wrap #customDots  {
  			text-align: center;
  			-webkit-tap-highlight-color: transparent; 
          	background:white;
		}
  		#carousel-wrap #customDots  .owl-dot {
			background:none;
			border:none;
			padding:0;
			margin:0;
    		display: inline-block;
		}
    	#carousel-wrap #customDots  .owl-dot span {
      		width: 10px;
      		height: 10px;
      		margin: 5px 4px;
      		background: white;
      		display: block;
      		-webkit-backface-visibility: visible;
			backface-visibility: visible;
      		transition: opacity 200ms ease;
      		border-radius: 30px; 
		}
    	/*#carousel-wrap #customDots  .owl-dot.active span, .arts-carousel #customDots  .owl-dot:hover span {
      		background: #869791; 
		}*/


		#carousel-wrap #customDots{position:absolute;}
		/*#carousel-wrap #customDots .owl-dot.active span, .arts-carousel .owl-dot:hover span{background:white;}*/
		#carousel-wrap #customDots.mobile{float:left;left:0;right:auto;padding:15px;margin-top:-60px;}
		#carousel-wrap #customDots.normal{float:right;left:auto;right:0px;width:auto;}

/************TEXTBOX***************/
		#carousel-textbox{
			position:absolute;
			width:50%;
			bottom:-20px;
			background-color:white;
			z-index:99;
			margin-left:70px;
			min-height:100px;
		}
		#carousel-textbox .scroll-element{
        	padding:0px 30px;
    		position: absolute;
    		top: 25px;
    		left: 0px;
          	margin-top:0px;
		}
		#carousel-wrap .scroll-container {
    		position: relative;
		}
		#carousel-wrap #text-vert-center{
			width:100%;
			height:80%;
			display:table;
			vertical-align: middle;
		}
		#carousel-textbox #text-vert-center a{text-decoration:none;display:inline-block;}
		#carousel-textbox #text-vert-center h4:after{text-decoration:none;font-family: FontAwesome; padding-left:4px; content:'\f178';display: inline-block;}
		#carousel-textbox .scroll-container .scroll-element h4{text-decoration:none; margin-top:0;margin-bottom:0;}

		#carousel-wrap #carousel-textbox.mobile{margin-top:-40px; }
		#carousel-wrap #carousel-textbox.mobile .scroll-container{margin-left:20px;margin-right:20px;}
		#carousel-wrap #carousel-textbox.normal{margin-top:auto;}
		#carousel-wrap #carousel-textbox.normal .scroll-container{margin-left:0px;margin-right:0px;}

		#carousel-wrap{position:relative;margin-bottom:40px;}

/************PREV/NEXT***************/

		.arts-carousel .owl-prev:hover, .arts-carousel .owl-next:hover {background-color:transparent!important;}	

		.arts-carousel .owl-prev, .arts-carousel  .owl-next {
        	width: 50%;
        	height: 100%;
        	position: absolute;
        	top: 50%;
        	transform: translateY(-50%); 
        	display: block !important;
        	border:0px solid black;
          	background:none;
			outline:none;
    	}

		/*.arts-carousel .owl-prev:hover:after, .arts-carousel  .owl-next:hover:before {*/
          	/*font-size:7vw;*/
        /*}*/

    	.arts-carousel .owl-prev { left: 0; margin:0!important; }
    	.arts-carousel .owl-next { right: 0; margin:0!important; }

		.arts-carousel .owl-next:after,.arts-carousel .owl-prev:before{
            content: '';
    		position: absolute;
    		top: -1px;
    		bottom: 0;
            z-index: -2;
    		background-color: white;
  			opacity: .5;
            left: 0;
    		right: 0;
        }

		.arts-carousel .owl-next:after{
			left: 5vw;
		}

		.arts-carousel .owl-prev:before{
    		right: calc(5vw-1px);
		}

		.arts-carousel .owl-next:before{
			display:inline-block;
			position:absolute;
			font-feature-settings: 'liga';  
			top:48%; 
			bottom:0;
			font-family: 'Material Icons';
			content:"keyboard_arrow_right";
          	font-size:6vw;
          	left:5px;
		}

		.arts-carousel .owl-prev:after{
			display:inline-block;
			position:absolute;
			font-feature-settings: 'liga';  
			top:48%; 
			bottom:0;
			font-family: 'Material Icons';
			content:"keyboard_arrow_left";
            font-size:6vw;
          	right:5px; 
		}

		.arts-carousel .owl-prev:hover:before, .arts-carousel  .owl-next:hover:after{opacity:0;}

.arts-carousel .owl-prev.stopnav, .arts-carousel  .owl-next.stopnav {pointer-events: none;}
.arts-carousel .owl-next.stopnav:before,.arts-carousel .owl-prev.stopnav:after{opacity:.5;}

@media screen and (max-width: 600px) { 
	#carousel-textbox {padding-bottom:20px;width:100%}
	#carousel-textbox .scroll-element{padding:0;}
	.arts-carousel .owl-next:before{display:none;}
}

@media screen and (max-width: 979px) { 
  #carousel-wrap{margin-left:-20px;margin-right:-20px;}
}
#carousel-textbox #text-vert-center a:hover{color:inherit;}
#carousel-wrap-wrap{margin-top:-20px;}
/*************************CAROUSEL******************************/

@media screen and (max-width: 767px) { 
	.row-fluid .news-item-wrapper{display:flex;flex-direction: column-reverse;}

	.row-fluid .news-item-wrapper .news-wrapper-text,
	.row-fluid .news-item-wrapper .news-wrapper-image{
		height: auto;
	}
  
  .row-fluid .news-item-wrapper .news-wrapper-image{margin:-25px;}
}

@media screen and (max-width: 979px){.row-fluid .row-fluid .content.iso-grid  [class*="span"]{width:33%;margin:0;}}
@media screen and (max-width: 767px){.row-fluid .row-fluid .content.iso-grid  [class*="span"]{width:99%;margin:0;padding:0;}}
@media screen and (min-width: 980px){.row-fluid .content.iso-grid  [class^="span"]{width:25%;}}

.ap-excerpt-wrap{word-wrap:break-word;}

/*************************STANDARD CAROUSEL******************************/
/*@media screen and (min-width: 800px){*/
	.owl-carousel.standard-carousel{
		background-color:#f5f5f5;
		height:inherit!important;
		width: 100vw;position: relative;
		left: calc(50% - 50vw);
		padding:20px 0;
		margin:2rem 0;
	}
/*}*/
.owl-carousel.standard-carousel #pagin,
.owl-carousel.standard-carousel .textbox{
	width:460px;
	text-align:center;
	margin:auto;
	/*font:Whitney;*/
	font-size:12px;
	line-height:20px;
	clear:both;
	padding:4px;
	padding-top:15px;
	height:50px;
}
.owl-carousel.standard-carousel #pagin{width:320px;margin-bottom:25px;}
@media screen and (max-width: 576px){
	.owl-carousel.standard-carousel #pagin,
	.owl-carousel.standard-carousel .textbox{width:70%;text-align:left;height:auto;}
	.owl-prev {
		height: 100px;
		position: absolute;
		top: 35%;
		left: 10px;
		display: block !important;
		border:0px solid black;
	}

	.owl-next {
		height: 100px;
		position: absolute;
		top: 35%;
		right: 10px;
		display: block !important;
		border:0px solid black;
	}
	.owl-prev .material-icons, .owl-next .material-icons {font-size:50px; color: #ccc;}

	.owl-carousel.standard-carousel .owl-item:not(.center) img{visibility:hidden;}

}

.owl-carousel.standard-carousel .owl-stage-outer{
	background-color:#f5f5f5;
	height:inherit!important;
	position: relative;
	margin:auto;
}

.owl-carousel.standard-carousel .owl-item.center{cursor: pointer;}
.owl-carousel.standard-carousel .owl-item.center:before{
	font-family: "Material Icons";
    content: "\f1ce";
	opacity:.5;
	font-size:14px;
	padding:6px;
	border-radius:14px;
	position:absolute;
	color:white;
	right:8px;
	top:8px;
	pointer-events:auto;
}
.owl-carousel.standard-carousel .owl-item.center:hover:before{
	opacity:1;
}

.owl-carousel.standard-carousel .owl-item img{/*height:250px;*/width:auto!important;}
.owl-carousel.standard-carousel .owl-item > div {cursor: pointer;}
.owl-carousel.standard-carousel .ccaption{display:none;font-size:12px;line-height:20px;}

/*width:460px;align:center;*/

#isolated .ccaption,
.owl-carousel.standard-carousel .ccaption{
	text-align:center;
}
#isolated .owl-nav [class*='owl-']:hover,
.owl-carousel.standard-carousel .owl-nav [class*='owl-']:hover{background:none;}

#isolated .owl-nav .owl-next:hover,
.owl-carousel.standard-carousel .owl-nav .owl-next:hover{color:#cecece;}

#isolated  .owl-nav .owl-prev:hover,
.owl-carousel.standard-carousel .owl-nav .owl-prev:hover{color:#f5f5f5;}

#isolated  .owl-nav .owl-prev:hover .material-icons,
.owl-carousel.standard-carousel .owl-nav .owl-prev:hover .material-icons{color:#000000;}

#isolated .owl-nav .owl-prev .material-icons:hover,
.owl-carousel.standard-carousel .owl-nav .owl-prev .material-icons:hover{color:#cecece;}


#isolated  .owl-dot,
#isolated  .owl-dots,
.owl-carousel.standard-carousel .owl-dot,
.owl-carousel.standard-carousel .owl-dots{background:none;}

 #isolated .owl-nav [class*='owl-'],
.owl-carousel.standard-carousel  .owl-nav [class*='owl-']{margin:0;}

#isolated  .owl-nav .material-icons,
.owl-carousel.standard-carousel  .owl-nav .material-icons{margin-top:0;vertical-align:middle;}


.owl-carousel.standard-carousel #pagin #pagenum{float:right;padding:4px;}
.owl-carousel.standard-carousel #pagin #details{float:left;padding:4px;cursor:pointer;font-size:14px;}
#accordion_arrow{margin-left:8px;font-size:22px;vertical-align:bottom;}

/*MOBILE*/
.owl-carousel.standard-carousel .owl-stage-outer.mobile .owl-item img {
  height:auto !important;
  width:70vw!important;
}

.owl-carousel.standard-carousel .owl-stage-outer.mobile.shrunk{
	width:70vw!important;
}

/*#container2 #closeBtn{margin-left:calc(100% - 86px);}*/
#container2 #closeBtn{
      cursor:pointer;
      /*margin-left:50px;*/
      font-size:22px;
      vertical-align:middle;
      text-decoration:underline;
      float:right;
      margin:20px -50px 10px 0;
}

#container2 #closeBtn .material-icons{font-size:40px;margin-left:8px;}

#container2 .ccaption{
	margin-top:20px;
	font-size:18px;
	line-height:28px;
	min-height:80px;
	
}

#container2 .ccaption-title{margin:auto;max-width:460px;font-size:12px;line-height:20px;}
#container2 .ccaption-description{max-width:460px;margin:auto;font-size:12px;line-height:20px;}
#isolated{clear:both;}
@media screen and (max-width: 767px){
.owl-carousel.standard-carousel .owl-stage-outer .owl-item.center:before{display:none;}
}



#container2 .owl-prev {
	/*width: 15px;*/
	height: 100px;
	position: absolute;
	top: 35%;
	left: -70px;
	display: block !important;
	border:0px solid black;
}

#container2 .owl-next {
	/*width: 15px;*/
	height: 100px;
	position: absolute;
	top: 35%;
	right: -70px;
	display: block !important;
	border:0px solid black;
}
#container2 .owl-prev .material-icons, #container2 .owl-next .material-icons {
	/*transform : scale(3,3); */
	font-size:70px;
	color: #ccc;
}

#container2{
	/*display:none;*/
	visibility:hidden;
	margin:auto;
	text-align:center;
	width:50vw;
	height:auto!important;
}


#container2 .owl-carousel .owl-stage {
    display: flex !important;
    align-items: center;
	/*background-color:#efefef;*/
	height:auto!important;
}
#container2 .owl-carousel .owl-item img {
    object-fit: contain;
  	width: 60vh;
  	height: 60vh;
	margin:auto;
	text-align:center;
}
#isolated .item img {
	width:60vh!important;
	height:60vh!important;
	margin:auto;
}
#isolated .item{margin:auto;}
body.isolated{background:#f5f5f5;} 

.owl-carousel.standard-carousel .owl-nav .material-icons{font-size:22px;}

.inlinealert a:not([href*='asia.cms2.arts.ubc.ca']):not([href*='cms.arts.ubc.ca']):not([href^='#']):not([href^='/']):not([href^='mailto:']):not([href^='tel:']) .inlinealert-linktext.internal-link button::after