@import url("https://fonts.googleapis.com/css?family=Open+Sans");

body.modal-open { position: fixed; width: 100%; }

html{
 max-width: 100%;
}
body {font-family: Roboto, Arial, sans-serif;}

.customHeader {background-color:white;margin:5px;}
#page-wrapper
{
  width:100%;

}

.customLogonHeader {background-color: #6ec4e5;}

.customLogo {height:80px; margin: 15px;}
.topLinks {width: 200px; margin: 15px;}
.custom-list-item {z-index: 9999;}
.navbar-right{
    margin-right:0px;
    margin-top: 12px; /* change this if image is different height */
}
.navbar-nav>li>a{
font-family: Raleway, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px;
    line-height: 21px;
    font-weight: 600;
}
.customFooter {background-color:#ffffff;margin:5px}
.customFooter .headerText {color: #000000;}
.customFooter .text {color:#000000;}
.customFooter ol,ul {list-style:none;padding-inline-start: 0px}
.customFooter li>a {color:#000000;}
.customFooter a {color:#0ac6f1;cursor:pointer;}
.footerLogo {float: right; text-align: right;}
.credits {font-size: small; text-align: right;}
.credits a {color: #000;}
.footAddress {color: #242424;
font-size: 1em;
padding-left: 10px;}
.footLogoList {height: 75px;}
.logoCenter {display: flex;
		justify-content: center;
		text-align: center;
		background-color: #000;
		padding: 10px;}
.logoLeft {text-align: left;}
.social_icons {margin-top: 15px;}
.dcs-web-controller {width:95vw; margin:auto;}

/*add price band colours here */
.dcs-band-O {background-color:#10b196;}

.list-inline {display: inline-block; margin-bottom: 5px;}
.list__link {text-transform: uppercase;
	font-size: 1em;
	padding-right: 20px;
	color: #242424;
	text-decoration: none;
font-weight: 600;}
    /* Custom AAA compliant grey (approx 7.5:1 ratio with white) */
    .btn-aaa-grey {
        background-color: #404040;
        color: #ffffff;
        border: 1px solid #404040;
    }

    .btn-aaa-grey:hover {
        background-color: #262626;
        color: #ffffff;
        border-color: #262626;
    }
	/* New dropdown styling from Gravesham */
	.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 9999;
  top: 75px;
}

.dropdown:hover .dropdown-content {
  display: block; color: white;
}
.dropdown a {color: #000; 
	text-decoration:none;    
	letter-spacing: 2px; 
	font-size: 13px; 
	line-height: 21px; 
	font-weight: 700; 
	position: relative;
    display: block;
    padding-top: 30px;
	padding-left: 10px;
	padding-right:10px;
	margin:0px;
	}
	
	.headButton {background-color: #040404;
	height: 40px;
	border: none;
	padding: 5px;
	margin: 20px 0px 0px 0px;
	text-align: center;
	color: #fff;}
	
	.headLink {display: flex;
	  justify-content: center;
	align-items: center;}
	.headLink a {font-weight: 700;  text-decoration: none; font-size: 13px; text-align: center; letter-spacing: 1px; color: #fff;}
	.headButton a {color: #fff; padding-left: 23px; padding-right: 23px;}
	.headAppLink a {color: #fff; letter-spacing: 2px; font-weight: 700;}
	.headContact a {color: #fff; letter-spacing: 2px; font-weight: 700;}
	.vert-center {padding-top: 35px;}
	.headMenu {display: block;}
	/* End new content */


        /* Custom styling for the title toggle */
        .list-toggle {
            cursor: pointer;
            text-decoration: none;
            transition: color 0.2s ease;
            font-size: 1.5rem;
            font-weight: bold;
            color: black; /* Default state */
        }

        /* Changes color to yellow ONLY when the list is expanded */
        .list-toggle[aria-expanded="true"] {
            color: #ffc107; /* Bootstrap yellow */
        }

        /* Keep list items black regardless of the title state */
        .custom-list-item {
            color: black;
        }

/* add custom button images */
a.btn.btn-primary.header-button {background-color: #25338C;width:120px;height:44px;padding: 11px;}
a.btn.btn-primary.header-button:hover {background-color: #9A3F97;}
.panel-heading {border: none;}
.dcs-dashboard-panel, .dcs-web-dashboard-panel {font-weight: normal;}
.dcs-dashboard-panel .panel-footer {
    min-height: 6em;
}

.s2-class {border: solid 1px #eee;}
.s2-activity {border: solid 1px #eee;}
.s2-enrol {border: solid 1px #eee;}
.s2-join {border: solid 1px #eee;}
.s2-whatson {border: solid 1px #eee;}
.s2-cinema {border: solid 1px #eee;}
.s2-contact {border: solid 1px #eee;}
.s2-timed {border: solid 1px #eee; background-image: url(../customimages/TheStrand.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;background-size:cover;}
.s2-class  {background-image: url(../customimages/FitnessClass.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;background-size:cover;}
.s2-class .large {display:none;}
.s2-class .panel-heading icon {display:none}
.s2-activity {background-image: url(../customimages/BookACourt.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;background-size:cover;}
.s2-activity  .large {display:none;}
.s2-activity .panel-heading icon  {display:none}
.s2-enrol  {background-image: url(../customimages/Enrol.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;background-size:cover;}
.s2-enrol .large {display:none!important;}
.s2-enrol .panel-heading icon {display:none}
.s2-join  {background-image: url(../customimages/Premier.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;background-size:cover;}
.s2-join .large {display:none;}
.s2-join .panel-heading icon {display:none}
.s2-contact  {background-image: url(../customimages/ContactingUs.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;background-size:cover;}
.s2-contact .large {display:none;}
.s2-contact .panel-heading icon {display:none}
.s2-whatson  {background-image: url(../customimages/WhatsOn.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;background-size:cover;}
.s2-whatson .large {display:none;}
.s2-whatson .panel-heading icon {display:none}
.s2-manage-courses  {background-image: url(../customimages/ManageCourses.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;background-size:cover;}
.s2-manage-courses .large {display:none;}
.s2-manage-courses .panel-heading icon {display:none}
.s2-course-cancel  {background-image: url(../customimages/CancelCourse.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;background-size:cover;}
.s2-course-cancel .large {display:none;}
.s2-course-cancel .panel-heading icon {display:none}
.s2-manage-activity  {background-image: url(../customimages/ManageActivity.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;background-size:cover;}
.s2-manage-activity .large {display:none;}
.s2-manage-activity .panel-heading icon {display:none}
.s2-custom2  {background-image: url(../customimages/Disruption.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;}
.s2-custom2 .large {display:none;}
.s2-custom2 .panel-heading icon {display:none}

.s2-timed .large {display:none;}
.s2-timed .panel-heading icon {display:none}
.s2-custom3  {background-image: url(../customimages/TasterSessions.jpg);background-repeat: no-repeat;background-size:100%;background-color: #79d173; background-position: center;background-size:cover;}
.s2-custom3 .large {display:none;}
.s2-custom3 .panel-heading icon  {display:none;}


.dcs-well-iyf {
    background-color: #ab4590;
    border-color: #d7d7d7;
}
.dcs-wcag {background-color: #f7b138;
color: black;
border: none;}
.dcs-wcag .panel-footer {background: #f5f5f5;}
.dcs-web-button-alt {color:black;}
.dcs-band-O {background-color: #008800;}
.close {opacity: 0.75;}
.close:hover {opacity: 1;}
a {color: #0000ff;}
.form-control::placeholder {color: darkgray;}
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: darkgray;
  opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: darkgray;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: darkgray;
}

/* add custom button images 
a.btn.btn-primary.header-button {background-color: #25338C;width:120px;height:44px;padding: 11px;}
a.btn.btn-primary.header-button:hover {background-color: #9A3F97;}
.s2-timed .panel-heading{background-image: url(../customimages/EL-Admissions.png);background-repeat: no-repeat;background-size:cover;}
.s2-timed  .xlarge {display:none;}
.s2-timed .panel-heading icon  {display:none}
*/

/* changes for dark mode users */
/* logged on user name in bar */
@media (prefers-color-scheme: dark) {

  .mat-mdc-select-value-text {
    color: #000000;
  }
}
/*Additional CSS for Edge menu functionality*/
.dropdown:hover .dropdown-content {
        display: block;
    }

    /* This pseudo-element "bridge" prevents the menu from closing if there's a 1-2px gap */
    .dropdown-content::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
    }