/* admin styling */

.templ-block-spread {
    display:flex;
    justify-content:space-between;
    flex-direction:column;
}
.map-profile-link {
    text-align:center;
}

.region-selector {
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:160px;
}
.instuctor-available-message {
	color:green;
	font-weight:bold;
	margin-bottom:20px;
}

#instuctor-region-wrapper {
	margin-left:30px;
}
.instructor-name {
	font-weight:bold;
	margin-bottom:10px;
}

#ajax-wait {
	position:absolute;
	display:none;
	left:45%;
	top:-40px;
	text-align:center;
	color:red;
}

h1.instructor-profile {
    color: #CC0000;
    font-size: 200%;
    font-weight:normal;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* styling for survey form */
.tch_readonly_field input {
    pointer-events:none;
    background-color:#f6c1ab;
}
.tch_name_field input {
    color:blue !important;
    font-weight:bold;
}

#survey-form-wrapper {
    border:1px solid #cc0000;
    border-radius: 20px;
    padding:20px;
    max-width:600px;
}
.location-wrapper .ginput_container {
    border:1px solid #eeb3b3;
    padding:5px;
}
#gform_11 .gfield_description, .tch_location_text {
    color:#2B777F;
    font-size:80%;
}
.gfield_validation_message {
    color:#cc0000 !important;
}

/* main site styling - this can be moved to the main site style sheet if you wish (don't duplicate it) */
#searched {
    padding-top:10px;
}
#instructor-location-search-form {
    font-size:85%;    
    padding:4px;
    border-radius:10px;
}
#instructor-location-search-form input {
    font-size:85%;
    height:23px;
}
#reset_search_form {
    background-color:#41c0c6;
    border-bottom: 2px solid #34acb8;
}
#reset_search_form:hover {
	color: #FFFFFF;
	text-decoration: none;
	background: #cccccc;
	border-bottom: 2px solid #aaaaaa;
}
.search-panel-label {
    color:#41c0c6;
}

.random-search {
    font-size:80%;
    color:brown;
}
#no-trainer {
    align-items:flex-start;
}
#tc-grid-wrapper.show-message { 
    min-height:0;
}

.input-location-text input {
    min-width: 100px;
    border: 1px solid #cccccc;
    padding: 6px;
}

.postcode-row {
    display:flex;
    justify-content:space-between;
}

.postcode-row:hover {
    background-color: #e1e1e1;
}

.postcode-row a {
	color:#CC0000;
}
.postcode-row a:hover {
	color:#333333;
}

.w3w-link {
	overflow-wrap:anywhere;
}

#map3 {
  /*  border: 0px solid red; */
    right: 32px;
    left: 32px;
    bottom: 40px;
    top: 72px;
    position: fixed;
	z-index:200;
	display:none;
}

#map3.showMap3 {
	display:block !important;
}
#map3closer, #map3infocloser {
	display:none;
}
#map3closer.showMap3, #map3infocloser.showinfo_layer {
	display:block !important;
}

div.fixedMapClass { 
	position:fixed !important;
}

.map_overlay_close {
    position: fixed;
    right: 16px;
    top: 50px;
    width: 40px;
    height: 40px;
    z-index: 1003;
    background: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 4px rgb(0 0 0 / 24%);
    box-shadow: 0 2px 4px rgb(0 0 0 / 24%);
    cursor: pointer;
}
.map_overlay_close:before {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.map_overlay_close:after {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.map_overlay_close:before, .map_overlay_close:after {
    content: '';
    background: #383838;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 2px;
    border-radius: 4px;
}

.map_overlay_close:hover:before,.map_overlay_close:hover:after,.map_overlay_close:focus:before,.map_full_overlay__close:focus:after
{
	background:#0071c2;
}




.map_info_overlay_close {
    position: fixed;
    left: 325px;
    top: 170px;
    margin-left:20px;
    width: 20px;
    height: 20px;
    z-index: 10003;
    background: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 4px rgb(0 0 0 / 24%);
    box-shadow: 0 2px 4px rgb(0 0 0 / 24%);
    cursor: pointer;
}
.map_info_overlay_close:before {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.map_info_overlay_close:after {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.map_info_overlay_close:before, .map_info_overlay_close:after {
    content: '';
    background: #383838;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 2px;
    border-radius: 4px;
}

.map_info_overlay_close:hover:before,.map_info_overlay_close:hover:after,.map_info_overlay_close:focus:before,.map_full_overlay__close:focus:after
{
	background:#0071c2;
}






.map_info_overlay_close.map-bound {
    position: absolute;
    left: 290px;
    top: 10px;
}


#mapinfo_layer {
    display: none;
    position: fixed;
    height: 50%;
    top: 180px;
    left: 32px;
    width: 290px;
    background-color: white;
    z-index: 9999;
    border: solid 2px #0B8B99;
    margin-left: 15px;
	padding: 10px 10px 10px 10px;
	font-size:90%;
	height: auto !important;
}



#mapinfo_layer.map-bound { 
	position:absolute;
	top:20px;
	left:10px;
}

#mapinfo_layer.showinfo_layer {
	display:block;
}

#map3closer, #map3infocloser {
    display: none;
}
#map3infocloser {
    border: solid 3px #0B8B99;
}
#mapinfokey_layer.showMap3 {
    display:block !important;
}
#mapinfokey_layer {
    display:none ;
    color:red;
    position: fixed;    height: 50%;
    bottom: 35px;
    left: 32px;
    width: 80%;
    background-color: white;
    z-index: 9999;
    border: solid 2px #0B8B99;
    margin-left: 15px;
	padding: 10px 10px 10px 10px;
	font-size:8pt;
	height: auto !important;
    z-index: 9999;
}




@media only screen and (max-width: 500px)  {

#map3 {
   /* border: 1px solid red; */
    position: fixed;
	height:80vh;
	height: calc(var(--vh, 1vh) * 20);
	
	bottom:unset;
/*width:80vw;	margin:auto;
	z-index:200; right:unset; */
}


} 

@media only screen and (max-width: 760px)  {

.sk-chk.TC {
    grid-column-start: 1 !important;
}

}


/* styling for taichi instructor search page */

.instructor_email {
    word-break:break-all;
}

#sk-check-anchor {
    position:relative;
    top:-100px;
    left:0px;
}

#sk-check-wrapper {
	border:0px solid green;
	min-height:50px;
	margin-bottom:10px;
}

#sk-grid-wrapper { 
	border:0px solid red;
	margin:2px;
	padding:5px;
	min-height:500px;
	display: grid;
    gap: 4em 3em;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	justify-content:flex-start;
	font-size:90%;
	color:#000000;
}
#sk-grid-wrapper>div { 
	height:100%;
}


#sk-check-wrapper {
	display: grid;
    grid-gap: 0.5em 3em;
    grid-template-columns: repeat(auto-fill, minmax(75px, 145px));
	font-size:0.8em;
	color:#000000;
	font-weight:bold;
}
.sk-chk {
	border:0px solid brown;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	padding:2px;
	height:20px;
}
.sk-check-span {
}
.sk-checkbox, .all-sk-checkbox {
	margin-right:10px;
	accent-color: #3CA6B3;
}
.sk-chk.TC {
    grid-column-start: 2;
}

.templ-teaching-label, .templ-region-label {
	color:#37B1B7;
}

#tch-search-boxes {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    gap:0.5em;
    margin-top:10px;
}
.tch-search-textbox {
    display:flex;flex-wrap:nowrap;justify-content:space-between;
}
.tch-search-textbox div:first-of-type, .tch-name-search div:first-of-type  {
    width:120px;
}
#instructor-location-search-form input[type="textbox"] {
        width:100px;
}
#instructor-location-search-form input[type="number"] {
    width:65px;
}
#instructor-location-search-form input[name="search"] {
    width: 100%;
}
#search_field {
    width:100%;
}
.tch-name-search {
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    grid-column-start:1;
    grid-column:span 2;
}
.tch-name-search div:last-of-type {
    flex-grow:1;
}    

.tch-search-buttons {
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    width:100%;
    margin-top:5px;
}
.tch-search-button {
    width:30%;
}
#tch-location-search-button {
    background-color:green;
    border-bottom: 2px solid green;
}
#tch-location-search-button:hover {
	color: #FFFFFF;
	text-decoration: none;
	background: #999999;
	border-bottom: 2px solid #999999;
}

#search-controls {
    max-width:375px;
    border:1px solid red;
    padding:10px;
    background-color:#eeeeee;
}
.hide_map_button {
    pointer-events:none;
}
.hide_map_button input[type="button"] {
    background-color:#cccccc;
}



@media only screen and (max-width: 375px)  {
    
#tc-grid-wrapper {
    gap:2em;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
    
.tch-search-textbox div:first-of-type, .tch-name-search div:first-of-type  {
    width:120px;
}
.tch-search-textbox div:last-of-type, .tch-name-search div:last-of-type {
    flex-grow:1;
}    
#tch-search-boxes {
    display:flex;
    flex-direction:column;
    gap:0.5em;
}
.tch-search-button {
    width: auto;
}
.tch-search-buttons input[type="button"]{
    padding-inline: 6px; 
    letter-spacing: 1px;
    width:100%;
}
#instructor-location-search-form input[type="textbox"], #instructor-location-search-form input[type="number"] {
    width:100%;
}

#mapinfo_layer {
    border:1px solid red;
    margin-left: 3px
}

#mapinfo_layer.map-bound { 
	position:absolute;
	top:20px;
    right: 32px;
	max-width:80vw;
	left:0px;
}

.map_info_overlay_close.map-bound {
    margin-left:3px;
    position: absolute;
    left: 80vw;
    top: 10px;
}


}

