/*popups have opened using openPopup function*/
.popup{
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 1055;
    top: 0%;
    left: 0%;
    background-color: #0000007a;
    display:none;
}

.popup__content{
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.28);
	width:50%;
	margin:0 auto;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index:5;
	background-color:#fff;
	border-radius: 5px;
	transition: all .2s;
}

.popup__content--hidden{
	transform: translate(-50%,100%);
}

.popup__content--come-up{
	transform: translate(-50%,-50%);
}

.popup__header{
    margin-bottom:8px;
}


/*extends u-center-wrapper-hori*/
.popup__header--aligned{
    top:0%;
	left:50%;
	transform: translate(-50%,-0%);
    position:absolute;
    margin-top:8px;
}

.popup-error{
	color:rgb(255,0 ,0);
	margin:0px;
	font-weight: 300;
	display:none;
}

/*
a list that becomes scrollable after the height of 300px.
TODO: move to a seprate css file.
USED IN add-user and update-user chair profiles icon list and popup.
*/
.scrollable-list{
	max-height:300px;
	overflow-x:auto;
}

.scrollable-list__item{

}

.scrollable-list:hover::-webkit-scrollbar-thumb{
	background: #ef7d00;
	background-clip: content-box;
	border: 3px solid transparent;
}

.scrollable-list::-webkit-scrollbar {
	width: 10px;
}

  /* Track */
.scrollable-list::-webkit-scrollbar-track {
    background: transparent;
    padding:3px;
}

  /* Handle */
.scrollable-list::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
    padding:3px;
    width:3px;
    background-clip: content-box;
    border: 3px solid transparent;
    transition: all .4s;
}


.add-seat-profiles__icon__seats-number {
	bottom:5px;
	left:5px;
	color:#ef7d00;
}

.popup__close-container{

}

.add-seat-profiles__icon-inc-seats-icon{
	vertical-align:middle;
	font-size:18px;
}

i{
	cursor: pointer;
	user-select: none;
}

/*
used for chair profile icons in the popup.
TODO: move to a seprate css file.
USED IN add-user and update-user chair profiles icon list and popup.
*/
.selectable-element__input{
	display:none;
}


.selectable-element__btn {
    border:2px solid transparent;
    position:relative;
}



.selectable-element__input:checked + .selectable-element__btn{
	border:2px solid #ef7d00
}

/*
OTHER POPUP CLASSES.
*/

.popup__icon-button{
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.18);
	border-radius: 5px;
	margin:5px;

}

.popup__close-icon{
	float:right;
	color:#ef7d00;
	padding:5px;
}


.popup__footer{
}

.seat-icon{
    width: 90px;
}

@media all and (max-width: 736px) {

	.popup__content{
		width:95%;
	}
}