/*

body,
#area_1,	/* area-page-container *
#area_6,	/* area-top-menu *
#area_7,	/* area-main-menu *
#area_8,	/* area-language-selection *
#area_5,	/* area-header *
#area_9,	/* area-usageinfo *
#area_11,	/* area-logo *
#area_10,	/* area-buttons *
#area_3,	/* area-main-container *
#area_3,	/* area-defaultcontainer *
#area_4,	/* area-cms-links *
#area_2,	/* area-generator *
#area_16,	/* area-clockcontainer *
#area_17	/* area-emergency-button *
 { all: unset; }
*/

/* BEGIN - main layout */
body {
	/* grid container */ 
	display:grid;
	grid-template-columns: auto; 
	
    background: var(--page-background);
    color: var(--text-base);
    font-size: 10pt;
    text-align: left;
}

.area-page-container {
	/* grid item */
	justify-self: center;
	align-self: start;
	min-width:970px;
	width: 80%;
	max-width:unset; /* webrtc override */
	grid-area: 1 / 1 / 1 / 1;/* FS20200813 ability to facilitate popup-overlay */
	  
	/* grid container */ 
	display: grid;
	grid-template-columns: auto;
}

@media screen and (max-width: 970px){
	.area-page-container {
		width:100% !important;
		min-width:unset;
	}
}

.area-top-menu {
	/* grid item */
	justify-self: left;
	align-self: start;
	width:98%;
	margin: 1% 1% 0 1%;
	
	/* flex container */
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	
	z-index:1;
}

.area-main-menu {
	display: flex;
}

/* .area-language-selection {} */

.area-header {
	/* grid item */
	justify-self: center;
	align-self: start;
	width:98%;
	padding:1%;
	margin: 1% 0 0 0;

	/* grid container */ 
	display:grid;	
/* 	3 col, 1 row */
/* 	text/spacer | logo | spacer/buttons */
	grid-template-columns: 33.33% 33.33% 33.33%;
	grid-template-rows: auto; 

	/* other properties */
    background: var(--area-background);
 	max-width:unset; /* webrtc override */
    
    background: var(--area-background);
	background-image: unset !important;
	border-radius: 10px;
	border-top: 4px solid var(--page-highlight);
	border-bottom: 4px solid var(--page-highlight);
	box-shadow: 0 0 20px #111;
}

.header-grid-no-logo .area-header,
.header-grid-2x1 .area-header {
	grid-template-columns: auto;
	grid-template-rows: auto auto; 
}

.header-grid-1x2-wide-logo .area-header {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: auto; 
}

.header-grid-no-logo .area-logo {
	display:none;
}

@media screen and (max-width: 440px){
	.header-grid-1x2-wide-logo .area-header {
		grid-template-columns: auto;
		grid-template-rows: auto auto; 
	}
}

.header-grid-1x2-wide-logo .area-logo,
.header-grid-2x1 .area-logo {
	text-align: center;		
}

/* .area-usageinfo {} */
.area-logo img {
/* 	Ensure we make the height/width set by the editor compatible with the layout */
	width:100% !important; 
	height:unset !important;
}

.header-grid-1x2-wide-logo .area-logo img,
.header-grid-2x1 .area-logo img {
    width: unset !important;
    height: unset !important;
	max-width: 100% !important;
    max-height:180px !important;
}

.area-buttons {
	text-align: right;
}

.area-defaultcontainer,
.area-main-container { 
	/* grid item */
	justify-self: center;
	align-self: start;
	width:98%;
	padding:1%;
	margin: 1% 0 0 0;
	
	/* grid container */
	display: grid;
	grid-template-columns: auto;
	justify-items: center;
	
	/* other properties */
    background: var(--area-background);

	/* styling the content container with a top and bottom borders, some round corners and removing the container background + a subtle shadow around the whole container */
	background-image: unset !important;
    border-radius: 10px;
	border-top: 4px solid var(--page-highlight);
	border-bottom: 4px solid var(--page-highlight);
	box-shadow: 0 0 20px #111;
}

.area-main-container > * { /* making regular texts go blackish instead of blueish all over */
	color: #333 !important;
}

/* .area-cms-links {} */
/* .area-generator {} */
/* .area-clockcontainer {} */
.area-emergency-button { z-index:1; }
/* END - main layout */

/* BEGIN - base-video-chat options */
/* .base-video-chat .ba_body { all: unset; } */

.ay-login-form,
.ay-login-forgot-password {
	position:relative;
	float:left;
	clear:both;
	margin: 0 auto;
	min-width:220px;
	max-width:92%;
	padding:4%;
	background-color:#FFF;
}
.ay-login-form input,
.ay-login-forgot-password input {
    width: 90% !important;
    min-width: 120px;
    max-width: 200px;
}

.messages div,
.messages div {
	width: unset;/* make them scale along again */
}

.webrtc-fullscreen-enabled.is-webrtc-displayed .area-clockcontainer { display:none; }
.is-webrtc-displayed .area-emergency-button { display:none; }
/* END - base-video-chat options */

/* BEGIN - Visibility list search bar */
#call-options-search-container {
	display: grid;	/* default for regular sites */
	grid-template-columns: 1fr 32px;
	grid-column-gap: 16px;
	grid-template-rows: auto; 
	margin-bottom:1%;
	clear:both;
}

#search-call-options {
	grid-area: 1 / 1 / 2 / 2;
	min-width:160px;
}
.call-options-force-refresh {
	grid-area: 1 / 2 / 2 / 3;
	width: 32px; 
	height:32px; 
	background: url('/shared/image/manage/refresh-32.png'); 
}
.call-options-force-refresh span {
	display:none;
}
/* END - Visibility list search bar */

/* BEGIN - Visibility list options */
.call-options-wrapper-display {
	position: relative;
	display: block !important;
	background-color: #fff;
	height: auto;
	overflow-y: auto;
}

#call-options {
	display:grid;
	align-content: start;
}

#call-options.view-regular { 
	min-height: 545px;
}

#call-options ul { padding: 5px 0 5px 0; }

#call-options .messages {
	all:unset;
}

#call-options .messages div,
#call-options .messages .notification {
	width: 96% !important;
	margin: 5px 1%;
	padding: 5px 1%;
}

#call-options li.call-option {
	display:flex;
	clear:both; 
	width:100%;
	list-style-type: none;
	min-height:120px; 
	padding-bottom: 5px; 
	margin-bottom: 10px; 
	border-bottom: 4px solid #ef7900;
}

#call-options.view-compact li.call-option { min-height:unset; border-color:#006f8d; justify-content: space-between;}
#call-options.view-compact li.call-option.first { padding-top: 10px; border-top: 4px solid #006f8d;}

.call-option h2 { 
	font-size:1.5em;
	padding-bottom:10px;
	margin:0;
}
.call-option p {
	padding-bottom:5px;
}

.call-option.hide-button button { visibility: hidden; }

.call-option-image 		{ width:32%; }
.call-option-user-info 	{ width:22%; }
.call-option-action  	{ width:42%; }
.view-compact .call-option-image	 { width: unset; }
.view-compact .call-option-action 	 { width: unset; }
.view-compact .call-option-user-info { width: unset; }

@media screen and (max-width: 630px){
	#call-options li.call-option {
		flex-wrap: wrap;
	}
	.call-option-image,
	.call-option-user-info,
	.call-option-action  	{ width:unset; }
	
	.call-option h2 { 
		font-size:1.2em;
	}
}

.call-option-image { margin-right:15px; text-align:center;}
.call-option-image { background-color: unset; }
.call-option-image img { background-color: #e0e0e0; width:100%; max-width:300px; }
/* .call-option-image.placeholder { background-color: unset; } */
/* .call-option-image.placeholder img { background-color: #e0e0e0; width:100%; max-width:300px; } */

.call-option-user-info { 
	padding:5px; 
	margin-right:15px;
} 
.call-option-user-info button.force-refresh-16  { 
	vertical-align: text-top; 
	width:16px; 
	height:16px; 
	margin:0 8px 0 0;
	background: url('/shared/image/manage/force-refresh-16.png'); 
}

.call-option-user-info h2 {
	word-wrap: anywhere;
}

.call-option-action h2 {
	white-space: nowrap;
}

.call-option-user-info 	button span,
.call-option-action 	button span { display:none; }

.call-option-action {
	padding:5px;
}

.call-option-action button {
	margin: 10px 6px 0 0;
	width: 48px; 
	height:48px; 
	background: url('/shared/image/manage/webrtc-call-answer.png'); 
}
.view-compact .call-option-action button { margin: 0; }

.call-option-action button.hangup-group-call { 
	background: url('/shared/image/manage/webrtc-hang-up.png'); 
	float:right;
}

.call-option-action input { width:90%; }

.view-compact .call-option-action form { 
	padding-top:unset;
	float: right;
}

.call-option-action-info { margin-bottom:10px; }
.call-option-action-info ol,
.call-option-action-info li { margin-left:15px; }
/* END - Visibility list options */

/* BEGIN Booking related CSS */
.redial-option-action {
	display:grid;
	grid-template-columns: 48px;
	grid-column-gap: 12px;
	grid-template-rows: auto;
	align-items: center; 
	margin-bottom:1%;
	clear:both;
}

.redial-option-action a {
	grid-area: 1 / 1 / 2 / 2;
}
.redial-option-action h2 {
	grid-area: 1 / 2 / 2 / 3;
}
.redial-option-action button { 
	width: 48px; 
	height:48px; 
	background: url('/shared/image/manage/webrtc-call-answer.png');
}
.redial-option-action button span { 
	display:none;
}
/* END Booking related CSS */

/* fixing the account request send button location and textarea size on mobile */
@media only screen and (max-width: 690px) {
	.ct_body textarea,
	.field_comment {
		max-width: 230px;
	}
}