/* CSS Document */


.red{color: red}

#portalloader{padding: 0; margin: 0 auto; z-index: 1 ;width:100% !important}
#portalloader a{color:var(--pink); transition:all 300ms ease; margin: 2px 0}
#portalloader p a:hover{color:#000}
#portalerror{color:crimson; display:none; padding: 15px 0}

#portalloader h1{margin: 0 0 40px}

#portal_email{max-width:100% !important; display: block}
#portal_pw{width:100% !important; max-width: 100% !important}

.colgreen .plainbutton, .colred .plainbutton{background-color: #6b6579 !important}
.colgreen .plainbutton{color: #00be66 !important}
.colred .plainbutton{color: #eb0000 !important}

.colgreen, .colred{color:#fff !important}
.colgreen a, .colred a{color:#fff !important}
.colgreen h4, .colred h4{color:#fff !important}
.colgreen .wscontact, .colred .wscontact{color:#fff !important}
.colgreen .wscontact a, .colred .wscontact a{color:#fff !important}

.colgreen{background-color: #00be66 !important}
.colred{background-color: #eb0000 !important}
.faded{opacity: 0.6}

.toggleAttState{text-align: center; color: #e9843b !important; cursor:pointer; transition:all 300ms ease; margin: 30px 0 0; display: block}
.toggleAttState:hover{color:#000 !important}

.loginbox{max-width:500px; margin: 0 auto}
.ucase{text-transform: uppercase}

.wsRow{border-top: 4px solid var(--pink); background: #fff; display: flex; justify-content: space-between; align-items: flex-start; margin: 10px auto 15px}
.wsRow > div{width:100%}
.wsRow > div:first-of-type{max-width: 75px}
.wsRow > div:last-of-type{padding: 20px; text-align: left}
.wsRow h3{font-size:1.2rem; padding: 0; margin: 0 0 15px}
.wsRow .ws-button-wrap{padding:15px 0 10px}
.wsRow.past-event{border-color:var(--navy)}


.row-deets{display: flex; justify-content: space-between; align-content: stretch;  margin-bottom: 6px}
.row-deets > div{width:100%}
.row-deets > div:first-of-type{max-width:26px}
.row-deets > div:first-of-type img{width:100%; height: auto}
.row-deets > div:last-of-type{padding: 0 0 0 12px}
.row-deets .divider{color:var(--pink); display: inline-block; padding: 0 15px}

.bene-button-flex{justify-content: flex-end}
.bene-button-flex > div{width:100%; padding-left: 10px}
.bene-button-flex > div:first-of-type{min-width: 120px}
.bene-button-flex .button{margin: 0}

.wsInactive{opacity:1}
.wsInactive > div:nth-of-type(1) > div{background-color:crimson}
.wsInactive > div:nth-of-type(1) > div:last-of-type{background-color:pink}
.wsInactive > div:nth-of-type(3) a{color: crimson !important} 
.wsInactive > div:nth-of-type(3) a{color:crimson !important; text-decoration: none}

.attendeeWindow{}

.user-info-icon{cursor: pointer; transition: all 300ms ease-in-out}
.user-info-icon:hover{transform: scale(0.9)}

.attendeeList{display: flex; justify-content: flex-start; align-items: stretch; flex-wrap:wrap}
.attendeeList > div{border:4px solid var(--teal);background: #fff; padding: 10px; width:100%; min-width:300px; max-width:300px; margin: 5px 10px 30px 0px}
.attendeeList h4{color:#000; text-align: left; padding: 0px; margin: 0 0 15px; font-size:16px; z-index: 1}

.attendeeList .user-info-icon{width:30px; position: absolute; top:10px; right:10px; z-index: 10}

.ws-button-flex > div{text-align:center; width:100%; max-width: 50%}
.ws-button-flex > div:first-of-type{padding-right: 3px}
.ws-button-flex > div:last-of-type{padding-left: 3px}
.ws-button-flex .button{display: block; padding: 10px 0}

.wsChkFlex{display: flex; justify-content: space-between; align-items: center; margin: 30px 0 0}
.wsChkFlex > div{width:100%; font-size:15px; text-align: left}
.wsChkFlex > div:nth-of-type(odd){max-width:35px}
.wsChkFlex input{margin: 0px !important; display: block}

.wsChkFlexAtt{display: flex; justify-content: flex-start; align-items: center; margin: 15px 0 0}
.wsChkFlexAtt > div{width:100%; font-size:15px; text-align: left}
.wsChkFlexAtt > div:nth-of-type(1){max-width:35px}
.wsChkFlexAtt input{margin: 0px !important; display: block}

.ws_confirmed{background: var(--teal) !important}

.wscontact{font-size:15px; color: #000; text-align: left}
.wscontact a{text-decoration: underline; color:#000}

.plainbutton{background: var(--pink); display: inline-block; padding: 6px 15px; color: #fff !important; cursor: pointer; transition:all 300ms ease; font-size:15px; text-decoration: none !important}
.plainbutton:hover{opacity: 0.6}

.blankbutton{background: #fff; display: inline-block; padding: 4px 13px; color: #888 !important; cursor: pointer; border:2px solid #888; transition:all 300ms ease; font-size:15px; text-decoration: none !important}
.blankbutton:hover{}

.wsEditButton{display: block; margin: 15px 0}
.dashback{color:#000 !important; text-decoration: none !important; position: absolute; top:0px; left:5px; cursor:pointer; font-size:22px; line-height: 1em}

.volList{display: flex; justify-content: flex-start; align-items: stretch; flex-wrap:wrap}
.volList > div{border:4px solid var(--teal); background: #fff; padding: 10px; width:100%; min-width:250px; max-width:250px; margin: 5px 15px 30px 5px}
.volList h4{color:#000; text-align: left; padding: 0px; margin: 0 0 15px; font-size:16px}

.volFlex{display: flex; justify-content: space-between; align-items: center}
.volFlex > div{width:100%; text-align: left}
.volFlex > div:nth-of-type(1){max-width:40px}

.modalclose{ position: absolute; top:15px; right:15px; color: #000; transition:all 300ms ease; cursor:pointer}
.modalclose:hover{opacity: 0.5}

.greentick{color: green; font-size:50px; margin: 0 0 30px}

.faFormWrap{max-width: 900px; margin: 60px auto 30px}
.faFormWrap h1{margin:0 0 15px !important; padding:0px; text-align: left !important}
.faFormWrap h2{padding:0 0 5px; margin:0 0 5px; border-bottom:2px solid #ccc}
.faFormWrap .venue{padding: 5px 0}
.faFormWrap .date{padding:5px 0 30px}

.printlist{color: #000; font-size:1rem; margin: 0; cursor:pointer; transition:all 300ms ease; text-decoration:underline}
.printlist img{width:20px; height: auto; display: inline-block; transform:translate(-3px, 5px)}
.printlist:hover{color:var(--pink)}

.attendee-title-flex > div:last-of-type{text-align: right}
.attendee-title-flex h3{font-size:1.2rem}

.printModal{max-width: 500px; margin: 0 auto}
.printModal .plainbutton{display: block; padding: 8px !important; width:100%; text-align: center}
input[type=date]{min-width:inherit !important}

.flexPrintModal{display: flex; justify-content: space-between; align-items: center}
.flexPrintModal > div{font-weight:700; width:100%}
.flexPrintModal > div:first-of-type{max-width: 120px}
.flexPrintModal select{width:100%; margin: 0}

.flexPrintModal2{display: flex; justify-content: space-between; align-items: center; margin:15px 0}
.flexPrintModal2 > div{width:100%; text-align: center}
.flexPrintModal2 > div:nth-of-type(2){max-width: 30px}

.printbutton{display: flex; justify-content: space-between; align-items: center; cursor:pointer; margin: 0 auto 15px; max-width:300px}
.printbutton > div{width:100%}
.printbutton > div:first-of-type{max-width:40px; font-size:26px; color:var(--pink)}
.printbutton > div:last-of-type{color:#000}
.printbutton:hover > div:last-of-type{color:var(--pink) !important}

.dataAlert{text-align: center; overflow: auto; max-height: 500px}
.dataAlert h2{font-size:28px; color:#000}
.dataAlert h2{font-size:24px; color:#000}
.dataAlert h3{font-size:20px; color:var(--pink); padding: 15px 0px 15px; margin: 0px}

.alertFlex{display: flex; align-items: center; justify-content: space-between; max-width:380px; margin: 15px auto}
.alertFlex > div{padding:5px; width:100%; max-width:50%; box-sizing: border-box}


.searchBox{display: flex; justify-content: flex-start; align-items: center; margin: 0 auto 20px}
.searchBox > div{width:100%}
.searchBox > div:first-of-type{padding-right: 5px}
.searchBox > div:nth-of-type(2){max-width:100px; padding-right: 5px}
.searchBox > div:nth-of-type(3){max-width:100px}
.searchBox .button{padding:11px 4px; display: block; margin: 0}
.searchBox input{margin: 0 !important}

.greybutton{background-color: #333}

.greyOutBox{background: #efefef !important; background-color: #efefef !important}
.greyOutBox .plainbutton{background-color:#666 !important}

.greybutton2{background-color: #fff !important; background: #fff !important; color:#666 !important; border:1px solid #666 !important}

#cancelConfirm{text-align: center}
.patName{color:var(--pink);font-weight:700; font-size:28px; padding: 15px 0}

.subhead{font-weight:700; color:var(--dark-pink)}
.filterbox{display: flex; justify-content: flex-start; align-items: center; margin: 0 auto}
.filterbox > div{width:100%; flex-grow:1; font-size:0.8rem}
.filterbox > div:nth-of-type(1){max-width:200px}
.filterbox > div:nth-of-type(2){max-width:200px}
.filterbox > div:nth-of-type(3){max-width:200px}
.filterbox > div:nth-of-type(4){max-width:40px}
.filterbox > div:nth-of-type(5){max-width:180px}
.filterbox > div:nth-of-type(6){max-width:40px}
.filterbox > div:nth-of-type(7){max-width:160px}
.filterbox select{width:100%; max-width: 90%; margin: 0}
.filterbox input{margin: 0}

#portalalert{background-color: var(--dark-pink); color: #fff; width:100%; position: fixed; left:0px; bottom:0px; z-index: 2; display: none}
#portalalert > div{max-width:1200px; padding: 15px 10px 40px; margin: 0 auto; font-size:14px}
#portalalert h1{color:#fff; font-size:22px; padding: 0 0 15px; margin:0px}
#portalalert .dismiss{position:absolute; right:10px; top:20px; font-size:15px; cursor: pointer; transition:all 300ms ease}
#portalalert .dismiss:hover{opacity: 0.6}
#portalalert .dismiss i{font-size:18px}

#monthFilters{display:flex; width:100%; padding: 8px 0; justify-content: space-between; align-items: center; flex-wrap:wrap}
#monthFilters > div{border:1px solid #666; color: #666; justify-content: space-between; align-items: center; width:100%; text-align: center; max-width: 40px; cursor:pointer; transition: all 300ms ease; padding: 4px; margin-bottom: 5px !important; font-size:0.8rem}
#monthFilters > div:hover{background-color:#666; color:#fff}
#monthFilters > div.active{background-color: var(--pink); border-color:var(--pink); color: #fff}

.introtext{max-width: 900px; margin: 0 auto 50px}

.volBooking{text-align: center}
.volBooking h2{padding:0px; margin:0px 0px 30px}

.volBookFlex{display:flex; justify-content:center; align-items:center; max-width:540px; margin: 40px auto 0}
.volBookFlex > div{padding:5px; witdh:100%; max-width:50%; min-width:50%}
.volBookFlex> div .button{display: block !important; max-width:100% !important; min-width:100% !important}

.volBookingConf{text-align: center}
.volBookingConf h2{padding:0px; margin:0px 0px 30px}
.volBookingConf h3{padding:0px; margin:0px 0px 30px; color:#2dad5b !important; font-size:22px}

.postcodeBox{max-width: 600px; margin: 0 auto 60px}
.postcodeBox .button{margin-top: 15px}

#volUpdateForm{}
#volUpdateForm lable{max-width:500px !important; margin: 10px auto 0 !important; display:block; color:#000; font-size:14px; font-weight:700}
#volUpdateForm input{max-width:500px !important; margin: 0 auto 5px !important; display:block}

.ableflex{display: flex; justify-content: space-between; align-items: center; max-width:500px; margin: 10px auto}
.ableflex > div{width:100%; text-align: left}
.ableflex > div:first-of-type{max-width:50px}

.yearFlex{display:flex; justify-content: flex-start; align-items: center}
.yearFlex > div{width:100%; text-align: center}
.yearFlex > div:first-of-type{max-width:60px; font-weight:700; text-align: left}
.yearFlex > div:nth-of-type(2), .yearFlex > div:nth-of-type(3){max-width:30px; cursor:pointer; transition:all 300ms ease;opacity:0.6}
.yearFlex > div:nth-of-type(2):hover, .yearFlex > div:nth-of-type(3):hover{opacity:1}

.postcodeflex{display: flex; justify-content: space-between; align-items: center; margin: 0 auto 30px}
.postcodeflex > div{width:100%; max-width: 50%; text-align: left}
.postcodeflex label{display: block; text-align: left; padding:0px; margin:0px; box-sizing:border-box}
.postcodeflex select{width:100%; box-sizing:border-box; margin: 0 !important; border: 2px solid #000 !important}
.postcodeflex input{width:100% !important; box-sizing:border-box; margin:0px !important; padding: 12px !important; max-width: 100%}
.postcodeflex .button{padding: 8px 40px; width:100%; margin-bottom: 4px}

.bookFlex{display: flex; justify-content: space-between; align-items: center; font-size:16px}
.bookFlex > div{width:100%; text-align: center; max-width:50%}
.bookFlex > div:nth-of-type(1){padding-right: 10px}
.bookFlex a{color:crimson !important; font-weight:bold !important}

.ws-buttons{display: flex; justify-content: flex-start; align-content: center; margin: 30px auto 0}
.ws-buttons > div{width:100%; padding:0 5px 0 0}
.ws-buttons > div:last-of-type{padding: 0}
.ws-buttons .button{padding-left:5px; padding-right: 5px; display: block; margin: 0 !important}

.confbutton{background: #2dad5b; padding: 10px; color: #fff; text-align: center; display: block; cursor:pointer; transition:all 300ms ease}
.confbutton:hover{background:var(--pink)}

.calButton{display:flex; justify-content: space-between; align-items: center; max-width: 325px; margin: 30px auto 10px; cursor:pointer; border:2px solid var(--navy); font-size:1rem}
.calButton > div{width:100%; text-align: center}
.calButton > div:first-of-type{max-width:40px; color:var(--dark-pink); font-size:30px}
.calButton > div:last-of-type{font-size:20px; font-weight:700}

#trainingIframe{width:100vw; height:calc(100vh - 200px); border:0px}

.resourceBox{background: #fff; padding: 30px; max-width: 600px; margin: 15px auto; border:1px solid var(--dark-pink)}
.resourceBox a{background: var(--dark-pink); color:#fff !important; display: block; padding: 15px; transition:all 300ms ease}
.resourceBox a:hover{color:#fff !important; opacity: 0.9}
.resourceBox h2{margin: 0px; padding: 0px; text-align: center}


.user-stats{display: flex; justify-content: flex-start; align-items: stretch; margin: 0 auto 50px}
.user-stats > div{width:100%; max-width:120px; margin: 0 15px 0 0; border:4px solid var(--teal); text-align: center; padding: 15px; font-weight:700}
.user-stats > div > div:first-of-type{font-size:4rem; color:var(--pink)}
.user-stats > div > div:last-of-type{font-size:1rem; line-height: 1.4rem; color: #000}

.feedback-flex{display: flex; justify-content: flex-start; align-items: flex-start; margin: 0 auto 50px}
.feedback-flex > div{width:100%}
.feedback-flex > div:first-of-type{max-width:180px; padding-bottom: 120px; position: relative}
.feedback-flex > div:first-of-type img{object-fit: cover; object-position: center; width:100%; height: 100%; position: absolute; top:0; left:0}
.feedback-flex > div:last-of-type{padding: 0 0 30px 30px !important}
.feedback-flex h3{margin: 0; font-size:1.2rem}

.feedback-more-button{padding-left: 210px; margin-bottom: 50px}

#feedback-form-wrap{border:4px solid var(--teal); padding: 30px; margin: 0 auto 50px}
#feedback-form-wrap h3{margin: 0}

#feedback-form-wrap input[type=submit]{background: var(--pink); color:#fff; padding: 12px 100px}
.feedback-form-flex > div:first-of-type{padding-right: 15px}
.feedback-form-flex > div:last-of-type{padding-left: 15px}
.feedback-form-flex input{margin: 0 !important}

.feedback-optin-flex > div{ font-size:0.9rem}
.feedback-optin-flex > div:first-of-type{max-width: 50px}
.feedback-optin-flex input{margin: 0}

.whats-new-filters{margin: 0 auto 50px}
.whats-new-filters > div:last-of-type{padding-left: 25px}
.whats-new-filters .button{padding: 11px; display: block; margin: 0}

.training-wrap{align-items: flex-start; margin: 0 0 30px}
.training-wrap > div{width:100%}
.training-wrap > div:first-of-type{max-width:280px}
.training-wrap > div:last-of-type{padding-left:25px}
.training-wrap h3{margin: 0; padding:0; font-size:1.2rem}
.training-wrap a{color: #000 !important}

.staff-flex{background-color:var(--pale-grey); font-size:0.8rem; font-weight:600; margin: 10px 0}
.staff-flex > div{padding: 15px}
.staff-flex > div:nth-of-type(3){min-width:180px; max-width:180px}
.staff-flex > div:nth-of-type(4){min-width:90px; max-width:90px}
.staff-flex > div:nth-of-type(5){min-width:120px; max-width: 120px; padding: 5px}
.staff-flex .button{line-height: 1; font-size:0.8rem !important; padding: 5px 10px !important; border-radius:4px !important}

#user-update-form{}
#user-update-form .wpcf7-list-item{margin:0 !important}

#user-update-form .wpcf7-checkbox .wpcf7-list-item-label{display:inline-block; transform:translate(4px, -5px); font-weight:500}
#user-update-form input[type=submit]{margin: 30px 0 0; padding: 12px 30px}

.ws-search-flex-acc > div{max-width: 50%; padding-right: 15px}
.ws-search-flex-acc > div:last-of-type{padding:0}
.ws-search-flex-acc select, .ws-search-flex-acc input{width:100%}

.event-button-flex > div{max-width:50%; margin: 30px auto 0}
.event-button-flex > div:first-of-type{padding-right: 5px}
.event-button-flex > div:last-of-type{padding-left: 5px}
.event-button-flex .button{margin: 0; display: block; padding-left: 0; padding-right:0}

.attended-flex{justify-content: flex-start !important; margin: 15px 0 0; font-size:1rem; font-weight:700; align-items: center}
.attended-flex > div:first-of-type{max-width:95px}
.attended-flex > div:last-of-type{max-width:50px}
.attended-flex img{max-width: 40px; transform:translate(3px, 0); cursor:pointer}

.cancel-bene{border-bottom:2px solid var(--pink); font-size:12px; justify-content: flex-start; align-items: stretch}
.cancel-bene > div{padding:5px; width:100%; overflow: hidden; text-align: left}
.cancel-bene > div:nth-of-type(1){}
.cancel-bene > div:nth-of-type(2){max-width:90px}
.cancel-bene > div:nth-of-type(3){max-width:200px}
.cancel-bene > div:nth-of-type(4){max-width:80px}
.cancel-bene > div:nth-of-type(5){max-width:100px}
.cancel-bene > div:nth-of-type(6){max-width:130px; text-align: center}
.cancel-bene .button{padding:4px 6px; font-size:12px}

@media only screen and (max-width: 600px) {
	.attendee-title-flex{display: block}
	.attendee-title-flex > div{min-width:100%; max-width: 100% !important; text-align: left !important; padding: 15px 0}
    .postcodeflex{display: flex; justify-content: space-around; flex-wrap: wrap}
    .postcodeflex > div{width:100%; max-width: 100%}
    .wsRow{flex-direction: column; box-sizing: border-box}
    .wsRow > div{max-width:100%; box-sizing: border-box}
    .wsRow > div:nth-of-type(2){padding-bottom: 15px}
    .wsRow > div:nth-of-type(3){padding-bottom: 15px; text-align: center}
    #hospitalTopBar > div{font-size: 9px !important}
    #hospitalTopBar .ucase{display: none}
	.feedback-more-button{padding: 0; text-align: center}
	.feedback-flex{flex-direction: column}
	.feedback-flex > div{max-width: 100%; padding: 0}
	.feedback-flex > div:last-of-type{padding: 15px 0 30px 0 !important}
	.feedback-form-flex{flex-direction: column}
	.feedback-form-flex > div{max-width: 100%; margin: 0 0 15px}
	.whats-new-filters{flex-direction: column}
	.whats-new-filters > div{max-width:100%; min-width: 100%; text-align: center; padding: 0 0 15px !important; margin: 0 !important}
	.whats-new-filters .button{margin: 0}
	
	.user-stats{flex-wrap:wrap; justify-content: space-around}
	.user-stats > div{margin-bottom: 30px}
	
	.account-page .show-all{display: block; float: none; text-align: center}
	.account-page .show-all a{position: relative}
	
	.searchBox{flex-direction: column}
	.searchBox > div{max-width:100%; min-width:100%; text-align: center; padding: 0 0 15px}
	.searchBox .button{display: block; margin: 0}
	
	.feedback-optin-flex input{margin-right:12px}
	.feedback-form-flex > div{padding: 0 !important; min-width:100% !important}
	
	.ws-search-flex-acc{display: block; max-width: 300px; margin: 0 auto}
	.ws-search-flex-acc > div{max-width:100%}
	
	.staff-flex{display: block}
	.staff-flex > div{min-width: inherit; max-width: 100%}
}

#vol-status{max-width: 700px}