@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
body{
	margin:0;
	color:#fff;
	background:#322140;
	font:300 16px/18px 'Roboto',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.login-wrap{
	width:100%;
	margin:auto;
	max-width:525px;
	min-height:670px;
	position:relative;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(122,23,248,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#FFAC88;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:7px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	-text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	/*color:#999999;*/
	color:rgb(0,0,0);
	font-size:14px;
}
.login-form .group .button{
	/*background:#39006C;*/
	color:rgb(0,0,0);
	background:#FFAC88;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#39006C;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}

.settingbar {
	list-style-type: none;
	position: fixed;
	top: 35px;
	height: 35px;
	width: 100%;
	margin: 0px;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color: #39006C;
}


.navbar {
	list-style-type: none;
	position: fixed;
	top: 35px;
	height: 35px;
	width: 100%;
	margin: 0px;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color: #39006C;
}

.navbar2 {
	list-style-type: none;
	position: fixed;
	top: 75px;
	height: 35px;
	width: 50%;
	margin: 0px;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color: #322140;
}

.navbar_flow_designer {
	list-style-type: none;
	position: fixed;
	top: 110px;
	height: 35px;
	width: 100%;
	margin: 0px;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color: #7b5d94;
}

.navbar_flow_designer2 {
	list-style-type: none;
	position: fixed;
	top: 145px;
	left: 200px;
	height: 35px;
	width: 100%;
	margin: 0px;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color: #efdffc;
}

.navbar_details_flow_designer2 {
	list-style-type: none;
	position: fixed;
	display: flex;
	top: 180px;
	left: 400px;
	height: 35px;
	width: 100%;
	margin: 0px;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color: #f8d9d7;
}

.navbar_black {
	list-style-type: none;
	position: fixed;
	top: 35px;
	height: 35px;
	width: 100%;
	margin: 0px;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color: #000000;
	color: #ffffff;
}

.title {
	position: fixed;
	top: 0px;
	height: 35px;
	width: 100%;
	list-style-type: none;
	background-color: #39006C;
	color: #ffffff;
}

nav li {
	float: left;
}

.login_bar li {
	float: left;
}

.pagination li{
	float: left;
}

/*li {
	float: left;
}*/


.link_navbar {
	display: block;
	padding: 5px 5px 5px 15px;
	position: relative;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color: #322140;
}

.link_navbar_ {
	display: block;
	padding: 5px 5px 5px 15px;
	position: relative;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color: #39006C;
}

.link_navbar2_ {
	display: block;
	padding: 5px 5px 5px 15px;
	position: relative;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color: #322140;
}

.link_navbar_flow_designer_ {
	display: block;
	padding: 5px 5px 5px 15px;
	position: relative;
	background-color: #7b5d94;
	font:300 14px/16px 'Roboto',sans-serif;
	color: rgb(255, 255, 255);
}

.link_navbar_flow_designer2_ {
	display: block;
	padding: 5px 5px 5px 15px;
	position: relative;
	background-color: #efdffc;
	font:300 14px/16px 'Roboto',sans-serif;
	color: rgb(0, 0, 0);
}

.link_navbar_detail_flow_designer2_ {
	display: block;
	padding: 5px 5px 5px 15px;
	position: relative;
	background-color: #f8d9d7;
	font:300 14px/16px 'Roboto',sans-serif;
	color: rgb(0, 0, 0);
}


.sidebar-config{
	height: 400px;
	width: 200px;
	position: fixed;
	top: 110px;
	left: 0px;
	list-style-type: none;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color:#322140;
}

.sidebar-config_flow_designer{
	height: 400px;
	width: 200px;
	position: fixed;
	top: 145px;
	left: 0px;
	list-style-type: none;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color:#7b5d94;
}

.flow_sidebar{
	height: 100%;
	width: 200px;
	position: relative;
	top: 0px;
	left: 0px;
	list-style-type: none;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color:#efdffc;
}

.flow_details_sidebar{
	height: 100%;
	width: 200px;
	position: relative;
	top: 35px;
	left: 0px;
	list-style-type: none;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color:#f8d9d7;
}

.sidebar-link {
	margin: 5px;
	width:200px;
	display: block;
	padding: 3px;
	position: relative;
	background-color: #322140;
	font:300 14px/16px 'Roboto',sans-serif;
	border-bottom: 1px solid #ffffff;
}

.sidebar-link_flow_designer {
	margin: 5px;
	width:200px;
	display: block;
	padding: 3px;
	position: relative;
	background-color: #7b5d94;
	font:300 14px/16px 'Roboto',sans-serif;
	border-bottom: 1px solid #ffffff;
	color: #ffffff;
}

.link_navbar_top{
	display: block;
	padding: 5px 5px 5px 15px;
	position: relative;
	background-color: #39006C;
	text-decoration: underline;
	font:300 14px/16px 'Roboto',sans-serif;
	text-decoration-color: rgb(255, 255, 255);
	text-underline-offset: 5px;
}

.selected{
	text-decoration: underline;
	text-decoration-color: rgb(255, 255, 255);
	text-underline-offset: 5px;
}

.selected_background{
	background-color: rgb(255, 255, 255);
	color: #39006C;
	text-decoration-color: #39006C;
	text-underline-offset: 5px;
}

.link_navbar2_top{
	display: block;
	padding: 5px 5px 5px 15px;
	position: relative;
	background-color: #322140;
	text-decoration: underline;
	font:300 14px/16px 'Roboto',sans-serif;
	text-decoration-color: rgb(255, 255, 255);
	text-underline-offset: 5px;
}

.link_navbar_flow_designer_top{
	display: block;
	padding: 5px 5px 5px 15px;
	position: relative;
	background-color: #7b5d94;
	text-decoration: underline;
	font:300 14px/16px 'Roboto',sans-serif;
	text-decoration-color: rgb(255, 255, 255);
	text-underline-offset: 5px;
	color: rgb(255, 255, 255);
}

.sidebar-current {
	margin: 5px;
	width:200px;
	display: block;
	padding: 3px;
	position: relative;
	background-color: #FFFFFF;
	font:300 14px/16px 'Roboto',sans-serif;
	color: #322140;
}

.link_navbar ul{
	position: relative;
	list-style-type: none;
	width: 150px;
	white-space: nowrap
}

.link_navbar_white {
	display: block;
	padding: 5px;
	position: relative;
	font:300 14px/16px 'Roboto',sans-serif;
	background-color: #39006C;
	color:#ffffff;
}

.link_navbar_black {
	display: block;
	padding: 5px;
	position: relative;
	background-color: #000000;
	font:300 14px/16px 'Roboto',sans-serif;
	color: #ffffff;
}

.text_navbar {
	display: block;
}

@keyframes underanimation {
	from {text-decoration-color: #322140;}
	to {text-decoration-color: rgb(123, 150, 255)}
}

.link_navbar:hover {
	/*background-color: #aaa;*/
	text-decoration: underline;
	text-decoration-color: rgb(123, 150, 255);
	text-underline-offset: 5px;
	animation-name: underanimation;
	animation-duration: 1s;
}

.middle {
	height: auto;
	width: auto;
	position: relative;
	top: 70px;
}

.buttonposition {
	height: 40px;
	width: 100%;
	position: fixed;
	top: 70px;
	right: 0px;
	background-color: #322140;
}

.buttonposition_popup {
	height: 60px;
	width: 100%;
	position: relative;
	top: 20px;
	right: 0px;
	background-color: #ffffff;
}

@keyframes buttonanimation {
	from {background:#FFAD87;
		color:#474343;}
	to {background:#7A17F8;
		color:#ffffff;}
}

.tn-button{
	text-transform:uppercase;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	line-height: 18px;
	width:150px;
	position:absolute;
	top: 5px;
	right: 10px;
	color:#474343;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#FFAD87;
	cursor: pointer;
}

.tn-button:hover{
	text-transform:uppercase;
	width:150px;
	position:absolute;
	line-height: 18px;
	right: 10px;
	color:#ffffff;
	display:block;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#7A17F8;
	cursor: pointer;
	animation-name: buttonanimation;
	animation-duration: 1s;
}

.tn-button-small1{
	text-transform:uppercase;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	line-height: 18px;
	width:50px;
	position:absolute;
	top: 5px;
	right: 10px;
	color:#474343;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#FFAD87;
	cursor: pointer;
}

.tn-button-small1:hover{
	text-transform:uppercase;
	width:50px;
	position:absolute;
	line-height: 18px;
	right: 10px;
	color:#ffffff;
	display:block;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#7A17F8;
	cursor: pointer;
	animation-name: buttonanimation;
	animation-duration: 1s;
}

.tn-button-small2{
	text-transform:uppercase;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	line-height: 18px;
	top: 5px;
	width:50px;
	position:absolute;
	right: 230px;
	color:#474343;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#FFAD87;
	cursor: pointer;
}

.tn-button-small2:hover{
	text-transform:uppercase;
	width:50px;
	position:absolute;
	line-height: 18px;
	right: 230px;
	color:#ffffff;
	display:block;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#7A17F8;
	cursor: pointer;
	animation-name: buttonanimation;
	animation-duration: 1s;
}

.tn-button-date{
	text-transform:uppercase;
	width:150px;
	position:relative;
	left: 180px;
	top: 0px;
	line-height: 18px;
	color:#474343;
	display:block;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#FFAD87;
	cursor: pointer;
}

.tn-button-date:hover{
	text-transform:uppercase;
	width:150px;
	position:absolute;
	right: 0px;
	line-height: 18px;
	color:#ffffff;
	display:block;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#7A17F8;
	cursor: pointer;
	animation-name: buttonanimation;
	animation-duration: 1s;
}

.tn-button-date-relative{
	text-transform:uppercase;
	width:150px;
	position:relative;
	left: 180px;
	top: 0px;
	line-height: 16px;
	color:#474343;
	display:block;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#FFAD87;
	cursor: pointer;
}

.tn-button-date-relative:hover{
	text-transform:uppercase;
	width:150px;
	position:relative;
	right: 0px;
	line-height: 16px;
	color:#ffffff;
	display:block;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#7A17F8;
	cursor: pointer;
	animation-name: buttonanimation;
	animation-duration: 1s;
}

.tn-button-link{
	text-transform:uppercase;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	width:150px;
	position:absolute;
	top: 5px;
	right: 10px;
	color:#474343;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#FFAD87;
	cursor: pointer;
}

.tn-button-link:hover{
	text-transform:uppercase;
	width:150px;
	position:absolute;
	right: 10px;
	color:#ffffff;
	display:block;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#7A17F8;
	cursor: pointer;
	animation-name: buttonanimation;
	animation-duration: 1s;
}

.tn-button-link2{
	text-transform:uppercase;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	width:150px;
	position:absolute;
	top: 5px;
	right: 70px;
	color:#474343;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#FFAD87;
	cursor: pointer;
}

.tn-button-link2:hover{
	text-transform:uppercase;
	width:150px;
	position:absolute;
	right: 70px;
	color:#ffffff;
	display:block;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#7A17F8;
	cursor: pointer;
	animation-name: buttonanimation;
	animation-duration: 1s;
}

.tn-button-link3{
	text-transform:uppercase;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	width:150px;
	position:absolute;
	top: 5px;
	right: 300px;
	color:#474343;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#FFAD87;
	cursor: pointer;
}

.tn-button-link3:hover{
	text-transform:uppercase;
	width:150px;
	position:absolute;
	right: 300px;
	color:#ffffff;
	display:block;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#7A17F8;
	cursor: pointer;
	animation-name: buttonanimation;
	animation-duration: 1s;
}

.tn-button-link-wo-position{
	text-transform:uppercase;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	width:250px;
	color:#474343;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#FFAD87;
	cursor: pointer;
}

.tn-button-link-wo-position:hover{
	text-transform:uppercase;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	width:250px;
	color:#ffffff;
	border:none;
	padding:5px 20px;
	border-radius:7px;
	background:#7A17F8;
	cursor: pointer;
	animation-name: buttonanimation;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.popup{
	width: 360px;
	position: absolute;
	left: 0; 
	right: 0; 
	margin: 0 auto 10px auto;
	padding: 15px 5px;
	text-align: center;
	border-radius: 5px;
    box-shadow: 
		0 1px 1px rgba(0,0,0,0.1), 
		inset 0 1px 0 rgba(255,255,255,0.6);
	cursor: default;
	color: #474343;
	background: #FFAC88;
	border: 1px solid #FFAC88;
	z-index: 1;
}

@keyframes fadeOut {
	0% 	{ opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; transform: translateY(0px);}
	99% { opacity: 0; transform: translateY(-30px);}
	100% { opacity: 0; }
}

.datepicker{
	width: 180px;
	height:0px;
	position: relative;
	left: 15px;
}

.content{
	height: calc(100vh - 110px);
	width: calc(100% - 200px);
	font:300 14px/16px 'Roboto',sans-serif;
	position: relative;
	left: 200px;
	top: 110px;
	overflow-y: auto;
	background-color: #FFFFFF;
	color: #000000;
}

.content_wo_sidebar{
	height: calc(100vh - 110px);
	width: 100%;
	font:300 14px/16px 'Roboto',sans-serif;
	position: relative;
	left: 0px;
	top: 110px;
	overflow-y: auto;
	background-color: #FFFFFF;
	color: #000000;
}

.content_flow_design{
	height: calc(100vh - 145px);
	width: calc(100% - 200px);
	font:300 14px/16px 'Roboto',sans-serif;
	position: relative;
	left: 200px;
	top: 35px;
	overflow-y: auto;
	background-color: #FFFFFF;
	color: #000000;
}

.ec-body{
	overflow-y: auto;
	height: 625px;
}

.inner_content{
	max-width: 3000px;
}

.center {
	margin: auto;
	line-height: 150%;
	text-align:center;
}

.config-wrap{
	width:100%;
	margin:auto;
	max-width:1400px;
	height:550px;
	position:relative;
	background-color: #ffffff;
	color: #000000;
	/*box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);*/
}

.config-html-popup{
	width:100%;
	position:absolute;
	padding:10px 30px 30px 30px;
	/*background: #322140*/
	background-color: #ffffff;
	color: #000000;
}


.config-html{
	width:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	/*background: #322140*/
	background-color: #FFFFFF;
	color: #000000;
}


.config-html .sign-in,
.config-html .sign-up,
.config-form .group .check{
	display:none;
}

.config-html .tab,
.config-form .group .button{
	text-transform:uppercase;
}

.config-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.config-html .sign-in:checked + .tab,
.config-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#39006C;
}

.config-form{
	min-height:100px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}

.config-form .group{
	margin-bottom:15px;
}


.config-form .group .label{
	/* width:100%; */
	padding-right: 5px;
	color:rgb(0, 0, 0);
	font-size:14px;
	display:block;

}


.config-form .group .input,
.config-form .group .textarea,
.config-form .group .button{
	width:100%;
	color:rgb(0, 0, 0);
	font-size:14px;
	display:block;
	padding:15px 20px;	
	background:#ffffff;
	border: 2px solid #d8d8d8;
  	border-radius: 6px;
	font:300 14px/16px 'Roboto',sans-serif;
	max-width: 750px;
	
}

.config-form .group input[data-type="password"]{
	-text-security:circle;
	-webkit-text-security:circle;
}
.config-form .group .textarea[data-type="password"]{
	-text-security:circle;
	-webkit-text-security:circle;
}
.config-form .group .label{
	color:rgb(0,0,0);
	font-size:14px;
}
.config-form .group .button{
	background:#39006C;
}
.config-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.config-form .group label .icon:before,
.config-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}

.switch-calender:hover{
	background:#2a364d !important;
	color:#fff !important;
	border-radius:7px;
}

.switch-calender{
	text-transform:uppercase;
	font-weight: normal;
	width: 350px;
	height: 20px;
	display: inline-block;
	padding-left: 30px;
	padding-right: 30px;
	margin-left: 5px;
	margin-right: 5px;
	border-radius:7px;
	background:#152a4e;
	color:#fff;
	cursor: pointer;
}

.switch1{
	width:100%;
	margin:auto;
	max-width: 1000px;
	height:30px;
	text-align:center;
	position:relative;
}

.cal_table{
	width:100%;
	margin:auto;
	text-align:left; /*center;*/
	max-width:1400px;
	font-size:14px;
}

.cal_table th{
	/*border: 1px solid rgb(216, 216, 216);*/
	font-size:14px;
}


.cal_table td,
.cal_table tr{
	/*border: 1px solid rgb(216, 216, 216);*/
	height:25px;
	border-top: 1px solid rgb(196, 196, 197);
	border-bottom: 1px solid rgb(196, 196, 197);	
	font-size:14px;
}

.cal_table tr:nth-child(even) {
	background:#f1f1f1
}


.cal_table a:hover{
	background-color:rgb(216, 216, 216);
	color:#322140;
}


.cal_table_std{
	width:100%;
	margin:auto;
	text-align:center;
	max-width:1400px;
	font-size:14px;
}

.cal_table_std th{
	/*border: 1px solid rgb(216, 216, 216);*/
	font-size:14px;
}


.cal_table_std td,
.cal_table_std tr{
	/*border: 1px solid rgb(216, 216, 216);*/
	height:25px;
	border-top: 1px solid rgb(196, 196, 197);
	border-bottom: 1px solid rgb(196, 196, 197);	
	font-size:14px;
}


.cal_table_std a:hover{
	background-color:rgb(216, 216, 216);
	color:#322140;
}




.cal_list_sidebar{
	width:100%;
	margin:auto;
	text-align:center;
	max-width:1000px;
}

.cal_list_sidebar td,
.cal_list_sidebar tr{
	/*border: 1px solid rgb(216, 216, 216);*/
	height:25px;
	border-width: 5px;
	border-top: 1px solid rgb(255, 255, 255);
	border-bottom: 1px solid rgb(255, 255, 255);	
}



.cal_list_sidebar a:hover{
	background-color:rgb(216, 216, 216);
	color:#322140;
}

.cal_list_sidebar td a{
	display: block;
}

.cal_table_menu{
	width:100%;
	margin:auto;
	text-align:center;
	max-width:1000px;
	font-size:14px;
}

.cal_table_menu td,
.cal_table_menu tr{
	/*border: 1px solid rgb(216, 216, 216);*/
	height:25px;	
}

.cal_table_menu a:hover{
	background-color:rgb(216, 216, 216);
	color:#322140;
}

.cal_table_menu td a{
	display: block;
}

.cal_table_info{
	width:100%;
	margin:auto;
	text-align:center;
	max-width:1000px;
	background:#ffffff;
	font-size:14px;
}

.cal_table_info td, 
.cal_table_info tr{
	/*border: 1px solid rgb(216, 216, 216);*/
	height:25px;	
	font-size:14px;
}

.cal_table_info a:hover{
	background-color:rgb(255, 255, 255);
	color:#322140;
}



.cal_table_parameter{
	width:100%;
	margin:auto;
	text-align:center;
	max-width:1000px;
	background:#ffffff;
	font-size:14px;	
}

.cal_table_parameter td, 
.cal_table_parameter tr{
	/*border: 1px solid rgb(216, 216, 216);*/
	height:25px;	
	font-size:14px;
	padding:4px 4px;
	max-width: 500px;
}

.cal_table_parameter a:hover{
	background-color:rgb(255, 255, 255);
	color:#322140;
}

.config-cal_table_parameter .label{
	/* width:100%; */
	padding-right: 5px;
	color:rgb(0, 0, 0);
	font-size:14px;
	display:block;

}


.cal_table_parameter .input:not([type="checkbox"]),
.cal_table_parameter .textarea,
.cal_table_parameter .button{
	width:100%;
	color:rgb(0, 0, 0);
	font-size:14px;
	display:block;
	padding:2px 2px;	
	background:#ffffff;
	border: 2px solid #d8d8d8;
  	border-radius: 6px;
	font:300 14px/16px 'Roboto',sans-serif;
	max-width: 750px;
	text-align: left;
	
}

.config-cal_table_parameter .checkbox{
	text-align: left;	
}

.config-cal_table_parameter .label{
	color:rgb(0,0,0);
	font-size:14px;
}
.cal_table_parameter .button{
	background:#39006C;
}
.cal_table_parameter label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.cal_table_parameter label .icon:before,
.cal_table_parameter label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}

.cal_table_individual {
	width:100%;	
	text-align:center;
	max-width:800px;
	font-size:12px;
}

.cal_table_individual th {
	position:sticky;
	top: 100px;
	background-color: #FFFFFF;
	font-size:12px;
}

.cal_table_individual td,
.cal_table_individual tr{
	/*border: 1px solid rgb(216, 216, 216);*/
	height:25px;
	border-top: 1px solid rgb(90, 90, 150);
	border-bottom: 1px solid rgb(90, 90, 150);
	font-size:12px;
}

.cal_table_fixed{
	width:900px;
	text-align:center;
	background-color: #FFFFFF;
	font-size:12px;
}

.cal_table_fixed td,
.cal_table_fixed tr{
	/*border: 1px solid rgb(216, 216, 216);*/
	height:25px;
	border-top: 1px solid rgb(90, 90, 150);
	border-bottom: 1px solid rgb(90, 90, 150);
}

.cal_table_fixed a:hover{
	background-color:rgb(216, 216, 216);
	color:#322140;
}

.cal_table_fixed td a{
	display: block;
}

.customer_content1{	
	/*height: calc(50vh - 110px);*/
	height: 200px;
	width: calc(100% - 200px);
	left: 200px;
	right: 0px;
	background-color: #FFFFFF;
	z-index: 1;
}

.customer_content2{	
	width: calc(100% - 200px);
	padding: 0px;
	top: 200px;
	background-color: #FFFFFF;
}

table{
	width:100%;
	max-width:1000px;
	text-align:center;
	margin:auto;
}

table, th, td {
	/*border: 1px solid rgb(216, 216, 216);*/
	border-collapse: collapse;
}

.link-container {
    position: absolute;
    transform: translateY(-50%); /* Ensures the arrows stay aligned */
    display: flex;
    flex-direction: column; /* Stack arrows vertically */
    gap: 5px; /* Adds spacing between up/down arrows */
    pointer-events: auto; /* Ensure they are clickable */
}

.icon-button{
	width: 30px;
	font-weight: normal;
	display: block;
	border-radius:0px;
	cursor: pointer;
}

.delete-button{
	width: 100px;
	font-weight: normal;
	display: block;
	color:#fff;
	background:#152a4e;
	border-radius:7px;
	cursor: pointer;
}

.delete-button:hover{
	width: 100px;
	display: block;
	color:#fff !important;
	background:#2a364d !important;
	border-radius:7px;
	cursor: pointer;
}



.day-button{
	width: 140px;
	margin: auto;
	margin-bottom: 10px;
	display: block;
	background:#152a4e;
	text-align:center;
	color:#fff;
	border-radius:7px;
	cursor: pointer;
}

.day-button:hover{
	width: 140px;
	margin: auto;
	margin-bottom: 10px;
	display: block;
	background:#2a364d !important;
	text-align:center;
	color:#fff !important;
	border-radius:7px;
	cursor: pointer;
}

h2, h3, h4{
	width:100%;
	max-width:1000px;
	height:30px;
	text-align:center;
	margin:auto;
}

#calendar h4{
	max-width: unset;
}

/* Tabelle: linksbündig, aber eingerückt */
.table_opening {
  border-collapse: collapse;
  width: auto;
  margin: 10px 0 20px 60px; /* <-- hier: 60px Abstand nach links */
  text-align: left;
}

/* Tabellenzellen kompakt und klar */
.table_opening td {
  border: none;
  padding: 4px 8px;
  font-size: 14px;
  white-space: nowrap;
}


/* Spalten gezielt steuern */
.table_opening tr td:first-child {
  width: 120px;
  font-weight: bold;
}

.table_opening td:nth-child(2),
.table_opening td:nth-child(4) {
  width: 40px;
  color: #666;
  text-align: center;
}

.table_opening td:nth-child(3),
.table_opening td:nth-child(5) {
  width: 130px;
}

.btn-primary{
	background-color: #bababd;
	border: none;
	color: rgb(0, 0, 0);
	padding: 2px 42px;
	text-decoration: none;
	display: block;
	margin-top: -18px;
	margin-left: 230px;
	cursor: pointer;
}

.btn-secondary{
	background-color: #bababd;
	border: none;
	color: rgb(0, 0, 0);
	padding: 2px 32px;
	text-decoration: none;
	display: block;
	cursor: pointer;
}

.btn-tertiary{
	background-color: #bababd;
	border: none;
	color: rgb(0, 0, 0);
	padding: 2px 32px;
	text-decoration: none;
	display: block;
	margin: auto;
	cursor: pointer;
}

/*.form_select_restaurant{
	margin-left: 5px;
	margin-top: 6px;
	padding: 0px;
	text-align: left;

}*/

.form_select_restaurant{
	position: absolute;
	top: calc(50% - 15px);
	left: 10px;
	display: block;
	padding: 5px;
}

.dropdown-content{
	display: none;
	position: relative;
	width: 100%;
}

.form_select_restaurant:hover .dropdown-content{
	display: block;
}

.choosed_reservationslot{
	margin: 30px auto;
	text-align: center;
}

.warning{
	color:#f00;
}

.login_bar {
	position: absolute;
	top: calc(50% - 15px);
	right: 0px;
	display: block;
	background-color: #FFFFFF;
	color: #000000;
}

.TNlogo{
	position: fixed;
	bottom: 0px;
}

.pagination{
	list-style-type: none;
	font-size: 12px;
	padding: auto;
}

.pagination li{
	font-size: 12px;
	margin: 5px;
}

.pagination li:hover{
	font-size: 19px;
	margin: 3px;
}

.active{
	font-size: 19px !important;
	margin: 3px !important;
}

.filterform{
	width:100%;
	margin:auto;
	text-align:left;
	max-width:1000px;
}

.select-button{
	text-transform:uppercase;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	width:150px;	
	color:#FFFFFF;
	border:none;	
	border-radius:7px;
	background:#39006c;
	cursor: pointer;
}

.select-button:hover{
	text-transform:uppercase;
	width:150px;	
	color:#ffffff;
	/*display:block;*/
	border:none;	
	border-radius:7px;
	background:#7A17F8;
	cursor: pointer;
	animation-name: buttonanimation;
	animation-duration: 1s;
}

.overlay{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
	z-index: 2;
	justify-content: center;
}

.overlay_right {
	position: fixed;
	top: 110px;
	right: 0;
	width: 100vw;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	border: 1px solid rgb(100, 100, 100);
	transition: all 1s;
	transform: translate(100vw, 0);
	visibility: hidden;
	z-index: 2;
}

.overlay:target {
	visibility: visible;
	opacity: 1;
}

.overlay_right:target {
	visibility: visible;
	transition: all 1s;
	right: 0;
	width: 500px;
	transform: translate(0, 0);
}

.popup_form_right {
	height: 100%;
	background: #fff;
	border-radius: 5px;
	position: relative;
	right: 0;
	width: 100%;
	max-width: 500px;
	transition: all 1s ease-in-out;
  }

.popup_form {
	margin: 70px auto;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	width: 700px; /*40%;*/
	position: relative;
	transition: all 0.5s ease-in-out;
  }

.arrange-horizontally  {
    display: flex;    
	flex-direction: row;
	justify-content: flex-start

}

.arrange-vertically {
    display: block;
}

#date_submit {
    display: inline-block; /* Set the form to display as inline-block */
}

#datepicker-container {
    display: flex; /* Set the container as inline */
	align-items: center;
}

#submit-link {
    display: inline; /* Set the submit link as inline */
    margin-left: 10px; /* Add some spacing between the date picker and the link */
}

.submit_link_div {
	position: relative;
	top: 0px;
	display: inline;
}

#id_new_password1,
#id_new_password2 {
    width: 300px; 
}

.cal_table_note{
	width:90%;
	margin:auto;
	text-align:center;
	max-width:6000px;
	font-size:14px;
}

.cal_table_note th{
	/*border: 1px solid rgb(216, 216, 216);*/
	font-size:14px;
}



.cal_table_note td, 
.cal_table_note tr{
	/*border: 1px solid rgb(216, 216, 216);*/
	height:25px;	
	border-top: 1px solid rgb(196, 196, 197);
	border-bottom: 1px solid rgb(196, 196, 197);	
	font-size:14px;
}


.cal_table_note tr:nth-child(even) {
	background:#f1f1f1
}

.cal_table_note a:hover{
	background-color:rgb(216, 216, 216);
	color:#322140;
}

.cal_table_note td a{
	display: block;
}

.closed-class {
	opacity: 0.5;
	color: #808080;
}

#tooltip {
	display: none;
	position: absolute;
	background-color: #f0f0f0;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }

  #cookiebannerModal {
	position: fixed;
	bottom: 0; /* Position it at the bottom of the window */
    left: 0; /* Align it to the left side of the window */
    width: 100%; /* Make it span the entire width of the window */
    height: 135px;
	background-color: #39006C;
	--color-highlight: #FFAC88;
    --color-button-fg: black;
  }


.container {
	display: flex;
	justify-content: space-around;
	gap: 2rem;
	margin-top: 1em;
	font-family: sans-serif;
	color: black;
}

.container > div {
    display: flex;
    flex-direction: column;
}

.custom-select {
	width: 200px;
	height: 200px;
}
.middle-buttons {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
}
.right-pane {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.mapping {
	font-size: 0.9rem;
	color: #444;
	text-align: center;
	border: 1px solid #ccc;
    border-radius: 8px;
    width: 100%;
    max-width: 800px;

}
label[for="id_file"] {
	color: black;
}

#spinner {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;        
}

.loader {
	border: 10px solid #f3f3f3;
	border-top: 10px solid #39006C;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	animation: spin 1s linear infinite;
}

canvas {
		background: #fff;
		border: 1px solid #ddd;
		padding: 10px;
		margin-bottom: 20px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

	/* Text im ausgewählten Feld */
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: black !important;
}

/* Text in der Dropdown-Liste */
.select2-container--default .select2-results__option {
	color: black !important;
	background-color: white !important;
}

/* Hover-Effekt für bessere Lesbarkeit */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color:  #474343 !important;;
	color: rgb(255, 255, 255) !important;
}

#datepicker-container {
  display: none;
  position: absolute;
  z-index: 9999;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
}

/* Überschrift mittig, Icon daneben */
.title-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.3rem;
}

.page-title {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* Container, damit Buttons relativ zur Tabelle bleiben */
.openinghours-section {
  position: relative;
  margin-top: 1.5rem;
}

/* Buttons rechts über der Tabelle */
.table-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
  margin-right: 4px;
}

/* Lokales Buttonverhalten */
.openinghours-section .tn-button {
  position: static !important;
  width: auto;
  padding: 6px 16px;
  font-size: 12px;
}

.tn-button-cancel {
  background-color: #c62828;
  color: white;
}