//@import "../../core/css/variables.scss";
@import "svariables.scss";
@import "variables.scss";
@import "icons.scss";
.srgdev-icon-override{
	background-repeat: no-repeat;
	background-position: center;
	@include icon-color('appt-calendar','appointments', '#222222', 1);
	background-image: var(--srgdev-dot-img);
	opacity: 1 !important;
}
.srgdev_com_circle .action-button__icon--url{
	background-repeat: no-repeat;
	background-position: center;
	background-size: 8px;
}

.srgdev-slider-open .action-item.app-navigation-toggle{
	display: none;
}


//.icon-projects-primary{
//	@include icon-color('projects', 'actions', $color-primary, 1, true);
//}
#content{
	max-height: 100%;
}
.srgdev-appt-cal-view-cont{
	display: flex;
	margin: 0;
	white-space: nowrap;
	max-width: 100%;
	height: 100%;
	overflow: hidden;
	text-align: center;
}

//#srgdev-appt-grid-scroll_cont{
//	height: 100%;
//	overflow: scroll;
//}

.srgdev-appt-grid-flex{
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
.srgdev-appt-grid-flex-lower{
	flex: 1;
	flex-basis: 10em;
	overflow: auto;
	position: relative;
}
.srgdev-appt-grid-cont{
	position: relative;
	text-align: left;
	line-height: 1;
	margin: 0;
	z-index: 116;
}

$appt_grid_ml:6em;
.srgdev-appt-grid-header{
	display: block;
	margin: 0;
	padding: 0 0 0 $appt_grid_ml;
	text-align: left;
	position: sticky;
	top: 0;
	background: var(--color-main-background);
	z-index: 117;
}
.srgdev-appt-gh-li{
	//display: inline-block;
	vertical-align: top;
	min-width: 8em;
	border-left: thin solid var(--color-border);
	padding-bottom: .25em;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
}
.srgdev-appt-gh-li:last-child{
	border-right: thin solid var(--color-border);
}
.srgdev-appt-gh-txt{
	margin-left: 4%;
}
.srgdev-appt-gh-act1{
	display: block !important;
	margin-right: .2%;
}

.srgdev-appt-gh-act1 label{
	box-sizing: border-box;
}
.srgdev-appt-act-input-ext label{
	box-sizing: border-box;
}


.srgdev-appt-gh-act-inp input{
	min-width: 64px !important;
	width: 64px !important;
}

.srgdev-appt-grd-grid_layer{
	margin-left: 1em;
	padding: 0;
	position: relative;
	cursor: grabbing;
}
.srgdev-appt-grd-appt_layer{
	position: absolute;
	left: $appt_grid_ml;
	top: 0;
	bottom: 0;
	right: 0;
	pointer-events: none;
	/*z-index: 6;*/
}

.srgdev-appt-grd-grid-line{
	font-size: 75%;
	height: 5px;
	position: absolute;
	width: 100%;
	border-top: 1px solid transparent;
	cursor: grabbing;
}
.srgdev-appt-grd-line-vis{
	border-color: var(--color-border);
}
.srgdev-appt-grd-grid-line[top_ok]{
	border-color: var(--color-border-dark);
}
.srgdev-appt-grd-appt_columns{
	display: inline-block;
	vertical-align: top;
	min-width: 8em;
	height: 100%;
	position: relative;
	pointer-events: all;
	border-left: thin solid var(--color-border-dark);
}
.srgdev-appt-grd-appt_columns:last-child{
	border-right: thin solid var(--color-border-dark);
}
.srgdev-appt-grd-appt{
	position: absolute;
	left: 2px;
	right: 2px;
	border: 1px solid var(--color-main-background);
	color: $color-primary-text;
	background: $color-primary;
	overflow: hidden;
	cursor: grab;
	border-radius: 4px;
}
.srgdev-appt-grd-appt-empty{
	z-index: -1;
	opacity: .125;
}

.srgdev-appt-grd-appt_txt{
	font-size: 75%;
	margin: .25em .25em 0 .25em;
	cursor: grab;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

.sb_loading_cont{
	margin: 4em auto;
}
.sb_loading_icon_cont{
	width: 3em;
	height: 3em;
	display: block;
	margin: 0 auto;
}
.sb_loading_icon_cont:after{
	width: 3em;
	height: 3em;
	margin: -1.5em 0 0 -1.5em;
}
.sb_loading_text{
	display: block;
	height: 3em;
	line-height: 3em;
	color: var(--color-text-lighter);
	text-align: center;
}


.appt-btn-loading:after {
	overflow: hidden;
	display: inline-block;
	vertical-align: bottom;
	-webkit-animation: ellipsis steps(4,end) 900ms infinite;
	animation: appt-btn-ellipsis steps(4,end) 900ms infinite;
	content: "\2026"; /* ascii code for the ellipsis character */
	width: 0;
	position: absolute;
	text-align: left;
}

@keyframes appt-btn-ellipsis {
	to {
		width: 1.125em;
	}
}

@-webkit-keyframes appt-btn-ellipsis {
	to {
		width: 1.125em;
	}
}


//.srgdev-appt-cal-view-col{
//	display: inline-block;
//	vertical-align: top;
//	width: 19%;
//	min-width: 7em;
//	max-width: 12em;
//	white-space: normal;
//	text-align: left;
//}
//.srgdev-appt-cal-view-cell{
//	display: block;
//	position: relative;
//	color: var(--color-main-text);
//	border: 1px solid var(--color-border);
//	border-radius: 4px;
//	overflow: hidden;
//	/*border-bottom: 1px solid #eee;*/
//}
//.srgdev-appt-cell-txt{
//	padding: 0 0 0 .4em;
//	font-size: 80%;
//	font-weight: bold;
//	white-space: nowrap;
//	display: block;
//	overflow: hidden;
//	margin-right: .25em;
//	text-overflow: ellipsis;
//}
//.srgdev-appt-cell-txt>span{
//	opacity: .8;
//}
//
//.srgdev-appt-cell-bkr{
//	position: absolute;
//	display: block;
//	z-index: -1;
//	width: 100%;
//	height: 100%;
//	top: 0;
//	left: 0;
//	opacity: .5;
//}
//.srgdev-appt-cal-view-head{
//	background-color: var(--color-main-background);
//	color: var(--color-main-text);
//	border-radius: 0;
//}
//.srgdev-appt-cell30{
//	height: 2.5em;
//}
//.srgdev-appt-cell45{
//	height: 3.75em;
//}
//.srgdev-appt-cell60{
//	height: 5em;
//}
//.srgdev-appt-cell-lunch{
//	background-color: var(--color-main-background);
//	color: var(--color-text-lighter);
//}
//.srgdev-appt-cell-lunch_past{
//	background-color: var(--color-main-background);
//	color: var(--color-text-maxcontrast);
//}
//.srgdev-appt-cell-txt>span.srgdev-appt-lunch-time{
//	opacity: .6;
//	white-space: normal;
//}
//.srgdev-appt-cell-past{
//	color: var(--color-text-light);
//}
//.srgdev-appt-cell-past .srgdev-appt-cell-txt{
//	opacity: .5;
//}
//.srgdev-appt-cell-past > .srgdev-appt-cell-bkr{
//	opacity: .25;
//}





.srgdev-appt-cal-view-btns{
	margin: 1em 0;
}
.srgdev-appt-modal_content {
	text-align: center;
	margin: 2em 6em;
}
.srgdev-appt-modal_content_tmpl{
	text-align: left;
	margin: 2em 3em 1em;
}
.srgdev-appt-modal-header{
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 1.35em;
}

.srgdev-appt-modal-lbl{
	margin: 1em 0;
}
.srgdev-appt-modal-lbl_dim{
	margin: .75em 0;
	color: var(--color-text-lighter);
}

.srgdev-appt-modal-btn{
	margin-top: 1.5em;
}

.srgdev-appt-icon_txt_btn,
.srgdev-appt-icon_btn{
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	margin: 0 0 0 .75em;
	cursor: pointer;
	transform-origin: center center;
}
.srgdev-appt-icon_txt_btn{
	width: auto;
	padding-left: 1.5em;
	background-position: left center !important;
	margin: 1.25em 1em .25em;
	vertical-align: top;
}
.srgdev-appt-icon_txt_btn:hover,
.srgdev-appt-icon_btn:hover{
	transform: scale(1.075);
}
.srgdev-appt-modal_pop{
	position: relative;
	display: block;
	overflow: hidden;
	height: 2.25em;
	margin: 0 1em -2em;
}
.srgdev-appt-modal_pop_txt{
	position: absolute;
	display: block;
	right: 0;
	bottom: 0;
	opacity: 1;
	transition: transform .25s;
}
.srgdev-appt-modal_pop_txt:before{
	content: "\25CF";
	margin-right: .5em;
}
.srgdev-appt-modal_pop_txt[data-pop="0"]{
	transition: none;
	transform: translateX(100%);
	opacity: 0;
}
$srgdev-prog-height:3px;

.srgdev-appt-modal-slider{
	position:relative;
	width:90%;
	overflow: hidden;
	margin: 1em auto;
	height: 1.5em;
}

.srgdev-appt-slider-line,
.srgdev-appt-slider-inc,
.srgdev-appt-slider-dec{
	position:absolute;
	height:$srgdev-prog-height;
	background: var(--color-primary);
	width:100%;
	left:0;
}

.srgdev-appt-slider-line{
	opacity: .2;
}

.srgdev-appt-slider-inc{
	animation: increase 1.8s infinite;
}
.srgdev-appt-slider-dec{
	animation: decrease 2s 0.5s infinite;
}

@keyframes increase {
	from { transform: translateX(-50%) scaleX(.1); }
	to { transform: translateX(130%) scaleX(1);}
}
@keyframes decrease {
	from { transform: translateX(-80%) scaleX(.8); }
	to { transform: translateX(110%) scaleX(.1);}
}

.srgdev-appt-main-sec_fid,
.srgdev-appt-main-sec{
	display: block;
	margin: 0;
	width: 100%;
	height: 100%;
	padding-top: 3.25em;
	box-sizing: border-box;
}
.srgdev-appt-main-sec_fid{
	padding: 1em;
}
.srgdev-appt-main-frame-cont{
	width: 100%;
	height: 100%;
}
.srgdev-appt-main-frame {
	width: 100%;
	min-height: 100%;
	display: block;
	margin: 0 auto;
}
.srgdev-appt-main-info{
	padding: .5em 0;
	border-bottom: 1px solid var(--color-border-dark);
	text-align: center;
	position: absolute;
	width: 100%;
	top: 0;
}
.srgdev-appt-main-info > *{
	display: inline-block;
	vertical-align: middle;
	margin-left: 1em;
	margin-right: 1em;
}
.srgdev-appt-main-pub-link p{
	width: auto !important;
}

.appt-stn-input-form {
	opacity: $opacity_normal;
	display: flex;
	.appt-stn-input-field {
		border-color: var(--color-border-dark);
	}
}

.appt-stn-ext-link{
	margin: 1em 0 0;
	&_span{
		cursor: pointer;
		color: var(--color-main-text);
		&:hover{
			text-decoration: underline;
		}
	}
}


$stn-txt-input-margin: 4px;

.appt-stn-txt-cont{
	display: flex;
	align-items: flex-start;

	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;

	cursor: pointer;
	white-space: nowrap;

	opacity: $opacity_normal;
	color: var(--color-main-text);
	border: 0;
	border-radius: 0; // otherwise Safari will cut the border-radius area
	background-color: transparent;
	box-shadow: none;

	font-weight: normal;
	line-height: $clickable-area;
}

.appt-stn-txt-form{
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;

	position: relative;
	margin: $stn-txt-input-margin 0;
}
input.appt-stn-txt-submit{
	display: flex;
	align-items: center;
	justify-content: center;

	// bottom-right corner
	position: absolute;
	bottom: 1px;
	right: 1px;
	width: #{$clickable-area - $stn-txt-input-margin * 2};
	height: #{$clickable-area - $stn-txt-input-margin * 2};
	margin: 0;
	padding: 7px 6px;

	cursor: pointer;

	opacity: $opacity_full;
	color: var(--color-text-lighter);
	border: 0;
	border-radius: 50%;
	/* Avoid background under border */
	background-color: var(--color-main-background);
	background-clip: padding-box;
}
input.appt-stn-txt-submit:active{
	background-color: var(--color-primary-element) !important;
}
textarea.appt-stn-txt-ta{
	flex: 1 1 auto;

	min-height: #{$clickable-area * 2 - $stn-txt-input-margin * 7}; /* twice the element margin-y */
	max-height: #{$clickable-area * 3 - $stn-txt-input-margin * 2}; /* twice the element margin-y */
	// block width widening
	min-width: $clickable-area * 4;
	width: 100%;
	margin: 0;
	color: var(--color-main-text);

	// if disabled, change cursor
	&:disabled {
		cursor: default;
	}
}

.srgdev-appt-sb-main-cont{
    text-align: left;
    padding-left: 4%;
    min-width: 270px;
}
.srgdev-appt-sb-lbl-header{
	font-size: 125%;
	color: var(--color-text-lighter);
	margin-left: -2%;
	padding-left: 2%;
	width: 98%;
	padding-bottom: .25em;
	margin-bottom: 1em;
	border-bottom: thin solid var(--color-border);
}
.srgdev-appt-sb-chb-cont{
	margin-top: .5em;
	margin-left: -3px;
}

.srgdev-sqr-btn{
	cursor: pointer;
	padding: .45em 0 .5em;
	border: thin solid var(--color-border);
	display: block;
	width: 90%;
	margin: 0 auto 1em;
	text-align: center;
	position: relative;

	&_text{
		display: inline-block;
		margin: 0 3em 0 1em;
		color: var(--color-main-text);
		height: 2em;
		line-height: 2em;
		cursor: inherit;
	}
	&_icon{
		display: block;
		position: absolute;
		right: .75em;
		top: 50%;
		width: 2em;
		height: 2em;
		margin-top: -1em;
		opacity: .7;
		cursor: inherit;
	}
	&:hover{
		border-color: var(--color-border-dark);
	}
	&:hover &_text{
		font-weight: bold;
	}
	&:hover &_icon{
		transform: scale(1.1);
	}

}
.srgdev-icon-btn{
	background: var(--color-background-hover);
	cursor: pointer;
	&_icon,
	&_text{
		display: inline-block;
		cursor: pointer;
	}
	&_text{
		margin-left: .5em;
	}
}

.srgdev-appt-dir-pl{
	padding: 1em 2.75em 1em 1em;
	margin: 1em .5em;
	border: 1px solid var(--color-border);
	position: relative;
	min-height: 2em;
	&_title{
		font-size: 110%;
		font-weight: bold;
	}
	&_actions{
		position: absolute;
		right: 0;
		top: 0;
	}

	&_label{
		display: block;
		margin: .5em 0 0;
	}
	&_input{
		display: block;
		width: 100%;
	}

	&_combo{
		padding-right: 2em;
		position: relative;
		margin-bottom: 1em;
	}
	&_actions_cmb {
		top: 50%;
		transform: translate(0, -50%);
		right: -1.25em;
	}
}




.srgdev-appt-sb-main-cont {

	label{
		color: var(--color-main-text);
	}
	.srgdev-appt-sb-label {
		display: block;
	}
	.srgdev-appt-info-lcont .srgdev-appt-sb-label{
		padding-right: 1.5em;
	}
	.srgdev-appt-sb-label-inline {
		display: inline;
	}

	.srgdev-appt-sb-input-text,
	.srgdev-appt-sb-textarea {
		display: block;
		margin: 0 0 1em 0;
		width: 96%;
	}

	.srgdev-appt-sb-input-select{
		display: block;
		margin: 0;
		width: 80%;
	}

	.srgdev-appt-sb-textarea {
		min-height: 60px;
		max-height: 124px;
	}
	.srgdev-appt-sb-textarea:not(:disabled):hover,
	.srgdev-appt-sb-textarea:not(:disabled):focus,
	.srgdev-appt-sb-textarea:not(:disabled):active {
		border-color: var(--color-primary-element) !important;
	}

	.srgdev-appt-sb-indent{
		padding-left: 2em;
		margin-bottom: 1em;
		margin-top: .25em;
	}
	.srgdev-appt-sb-indent_small{
		padding-left: .5em;
		margin-bottom: 2.25em;
		margin-top: .75em;
	}
}
.srgdev-appt-sb-main-cont .srgdev-appt-sb-genbtn{
	margin-top: 3em;
	padding-left: 3em;
	padding-right: 3em;
	display: block;
}

.srgdev-appt-sb-main-spacer{
	height: 0;
	margin: .75em 0 .75em -4%;
	border-top: 1px solid $color-border-dark;
	width: 104%;

}
.srgdev-appt_expando_cont{
	display: none;
	padding-left: 3.25em;
	position: relative;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
}
.srgdev-appt_expando_cont:before{
	content: "";
	position: absolute;
	display: block;
	left: 1.125em;
	top: -.25em;
	bottom: 0;
	width: .2em;
	background: var(--color-border);
}
.srgdev-appt_expando_cont[data-expand="1"]{
	display: block;
}


.srgdev-appt-help-sec{
	max-height: 100%;
	overflow: scroll;
}
.srgdev-appt-hs-inner{
	margin: 0 4.5em 3em;
	line-height: 1.2;
}

.srgdev-appt-hs-h1{
	font-size: 120%;
	font-weight: bold;
	margin: .75em 0 0;
}
.srgdev-appt-hs-p{
	margin: .25em 0 0;
}
.srgdev-appt-hs-p-h code,
.srgdev-appt-hs-p code{
	font-size: 90%;
}

.sb_disable{
	pointer-events: none;
}
.sb_disable_nav-item{
	pointer-events: none;
	opacity: .7;
}



.srgdev-appt-hs-p-h{
	margin: .5em 0 0;
}
.srgdev-appt-hs-p-hb{
	margin: 1.5em 0 .5em;
	font-size: 105%;
	font-weight: bold;
}
.srgdev-appt-hs-code,
.srgdev-appt-hs-code_short{
	width: 96%;
	margin: .5em 0 .75em;
	padding: .75em 0 .75em 1em;
	background: var(--color-background-darker);
	display: block;
	font-size: 95%;
	cursor: text;
}
.srgdev-appt-hs-code_short {
	display: inline-block;
	padding: .5em;
	margin: 0;
	width: auto;
}

.srgdev-appt-hs-link {
	text-decoration: underline;
	color: var(--color-primary-element);
}

.srgdev-appt-hs-tz-img{
	width: 90%;
	display: block;
	margin: .5em 0 2em;
}
.quick-start-guide-img{
	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.125)
}
.srgdev-appt-hs-p_t{
	padding-top: 1em;
}

.srgdev-appt-info-lcont{
	display: block;
	position: relative;
}
.srgdev-appt-info-lcont>.srgdev-appt-info-link,
.appt-accordion-title>.srgdev-appt-info-link{
	display: block;
	position: absolute;
	width: auto;
	height: 1em;
	min-width: 1em;
	min-height: 1em;
	right: 4%;
	top: 50%;
	margin-top: -.5em;
	background-size: 1em;
	opacity: .5;
	padding-right: 1.5em;
	background-position: right center;
	line-height: 1em;
}
.srgdev-appt-info-link>span{
	font-size: 70%;
}
.srgdev-appt-info-link:hover{
	opacity: 1;
}
.srgdev-appt-info-link:hover>span{
	opacity: .65;
}

.srgdev-appt-temp-highlight{
	//background: $color-primary;
	background: var(--color-primary);
	//color: $color-primary-text;
	color: var(--color-primary-text);
	transition: color .5s;

}

.appt_icon_button_cont:hover{
	.action-item__menutoggle{
		transform: scale(1.1);
		opacity: 1;
	}
	.action-item--open{
		.action-item__menutoggle{
			transform: scale(1);
		}
	}
}


@media only screen and (max-width: $breakpoint-mobile) {
	.srgdev-app-content{
		max-width: 100%;
	}
	.srgdev-appt-cal-view-cont {
		margin-left: 3.25em;
		//margin-top: 0;
		margin-right: 0;
		max-width: 100%;
		//text-align: right;
	}
	.srgdev-appt-cal-view-col{
		width: 18%;
	}
	.srgdev-appt-hs-inner{
		margin: 4em 1em 0;
	}

}

.toggler--closed:hover>.aib_icon_wrap{
	transform: scale(1.1);
}