/******
	
	Purple Magnifier Primary: var(--main-color)
	Purple Magnifier Secondary: #f6f6f9
	Green Primary: var(--main-color)
	Green Secondary: var(--main-color)
	
	#f3e7f9
	
******/

#ticket1, #ticket2, #ticket3 {
	position:absolute;
}

:root {
	--main-color: #f55d62;
	--main-color:#057846;
	--main-color:#b28f70;
	--main-color-light:#bea2893e;
    --bg-primary: #1f2123;
    --bg-primary-light: #3a3c40;
    --bg-secondary: #33363a;
    --bg-secondary-transparent: #33363a7a;
    --bg-secondary-light: #2e3135;
    --border-light: #585858;
    --border-super-light: #3b3d40;
    --light-grey: #ccc;
    --green: #057846;
    --red: #f55d62;
    --main-font-color: #fff;
}

.save {
	margin-top:20px;
}

.wideIcon {
	margin-right:15px;
}

.parentContainer {
	width:100%;
	height:100%;
}

.topBackgroundContainer {
	width:100%;
	/* height:250px; */
	border-radius:8px;
	position:relative; 
	margin:0 auto;
	background:var(--main-color)!important;
}

.topBackgroundContainerWithSubNavi {
	margin-top:80px;
}

.topInfoContainer {
	width: calc(100% - 80px);
    padding: 40px;
    padding-top: 50px;
    border-radius: 8px;
    position: relative;
    top: 100px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0px 0px 7px #a4a4a4;
	margin-bottom:150px;
}

.topNameContainer {
	position: absolute;
    left:50px;
    top: 25px;
}

.topNameContainer > .bigContenteditable {
	color: #fff!important;
}

.topPicContainer {
	width: 100px;
    height: 100px;
	max-width: 100px;
    max-height: 100px;
    border-radius: 6px;
    box-shadow: 0px 0px 5px #a4a4a4;
    background: #fff;
    position: absolute;
    top: 20px;
    right: 100px;
    z-index: 3;
    text-align: center;
	overflow:hidden;
	display:table;
}

.topPic, .topPicUser {
	display: table-cell;
    vertical-align: middle;
}

.topPic img {
	max-width:80px;
}

.topPicUser img {
	max-width: 100%;
	border-radius:6px;
}

.spaceContainer {
	width: calc((100vw / 12) + .4em);
    height: calc((100vw / 12) + .4em);
    border-radius: 8px;
    border: none;
    padding: .4em;
    padding-left: 0;
    padding-right: .8em;
	padding-bottom: .8em;
    display: table;
}

.innerSpaceContainer.linkButton:hover {
	cursor: default;
	background:var(--main-color)!important;
	color:#fff;
}

.innerSpaceContainer {
	font-size: 1em;
    color: #727272;
    text-align: center;
    
    transition: all .2s;
    display: table-cell;
    border-radius: 8px;
    vertical-align: middle;
	padding:10px;
	/*word-break: break-word;*/
}

.spaceContainerDynamic {
	width:100%;
	cursor:default;
}

.activeSpaceContainer {
	background:var(--main-color)!important;
	color:#fff;
}

.space img {
	max-width:100%;
}

.space:hover img {
	filter:invert(1) brightness(100);
}

.spacePic {
	text-align:center;
	/*margin-bottom:10px;*/
}

.bgLightGray {
	box-shadow:0px 0px 7px #e7e7e7;
	cursor: default;
}

.bgLightGray:hover {
	background:#e7e7e7;
}

.bg1 {
	background:rgb(245, 245, 245);
	background:var(--main-color);
}

.bg2 {
	background:rgb(242, 233, 218);
	background:var(--main-color);
}

.bg3 {
	background:rgb(242, 228, 228);
	background:var(--main-color);
}

.bg4 {
	background:rgb(202, 215, 202);
	background:var(--main-color);
}

.bg5 {
	background:rgb(205, 163, 95, 0.5);
	background:var(--main-color);
}

.bg6 {
	background:rgb(38, 102, 120);
	background:var(--main-color);
}

.bg7 {
	background:rgb(205, 163, 95);
	background:var(--main-color);
}

.bg8 {
	background:rgb(233, 238, 242);
	background:var(--main-color);
}

.bg9 {
	background:rgb(72, 172, 152);
	background:var(--main-color);
}

.bg10 {
	background:rgb(227, 238, 241);
	background:var(--main-color);
}

.bg11 {
	background:rgb(158, 89, 87);
	background:var(--main-color);
}

.bg12 {
	background:rgb(116, 116, 116);
	background:var(--main-color);
}

.bg13 {
	background:rgb(203, 124, 122);
	background:var(--main-color);
}

.bg14 {
	background:rgb(228, 242, 239);
	background:var(--main-color);
}

.bg15 {
	background:rgba(54, 161, 139, 0.6);
	background:var(--main-color);
}

.bg1, .bg2, .bg3, .bg4, .bg5, .bg6, .bg7, .bg8, .bg9, .bg10, .bg11, .bg12, .bg13, .bg14, .bg15 {
	background: var(--main-color)!important;
    color: #727272;
}

.plus {
    border: 3px solid #ededed;
	font-size:30px!important;
	color:var(--main-color);
	background:transparent!important;
}

.plus:hover {
	border:3px solid var(--main-color);
    color: #fff;
	background:var(--main-color)!important;
	transition:all .2s;
	cursor:default;
	/*background: linear-gradient(140deg, rgba(166,210,210,1) 50%, rgba(182,108,226,1) 180%);*/
}

.ticketOptionsMenu {
	position:fixed;
	z-index:16;
	top:56px;
	padding-left:5vw;
	left:0px;
	width:100%;
	background:var(--main-color);
	padding-top: 10px;
    padding-bottom: 10px;	
    box-shadow: #c5c5c5 0px 0px 9px;
}

.ticketMessageMenu {
	overflow-y: scroll;
    position: fixed;
    z-index: 10;
    bottom: -20px;
    padding-top: 20px;
    /* padding-bottom: 20px; */
    padding-left: 5vw;
    box-shadow: 0 0 3px 0px #c1c1c1;
    background: #f6f6f9;
    width: calc(100% - 5vw);
    /* height: calc(100vh - 153px); */
    height: auto;
    max-height: 350px;
    /* min-height: 60px; */
    left: 0px;
    transition: all .1s;
}

.sectionContainer {
	background:#fff;
	border-radius:10px;
	padding:30px;
	margin-bottom:30px;
	margin-right:0px!important;
	-webkit-box-shadow: 0 0 3px 0px #c1c1c1;
	box-shadow: 0 0 3px 0px #c1c1c1;
}

.ticketDetails {
	top:40px;
	padding-bottom:70px;
}

.ticketOptionsContent {
	display:table;
	position:relative;
}

.jconfirm-bg {
	background:var(--main-color)!important;
}

.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button {
	background:#fff!important;
	color:#000!important;
}

.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button:hover {
	background:#000!important;
	color:#fff!important;

}

.attachmentContainer {
	display:flex;
	justify-content:center;
	align-content:center;
}

.attachment {
	    flex: 1 0 calc(44% - 40px);
    border-radius: 5px;
    background: #fff;
    padding: 20px;
    border: 1px solid #c5c5c5;
    margin: 10px;
    min-height: 40px;
}

.submitAnswerButton {
	position: relative;
    top: -50px;
    left: calc(100% - 60px - 5vw);
	font-size: 25px!important;
}

.attachmentButton {
	position: relative;
    top: -50px;
    left: -60px;
    font-size: 25px!important;
}

.divTextarea {
	background:#fff;
	/*min-height:calc(60vh - 320px);*/
	min-height:25px;
	width:calc(100% - 60px - 5vw); 
	border: 1px solid #ddd; 
	border-radius: 5px; 
	padding:15px;
	transition:all ease 0.2s;
	max-height:250px;
	overflow-y:scroll;
}

.divTextarea:focus {
	outline: none;
	border:1px solid var(--main-color);
}

body {
    /*background:rgba(102, 114, 200, 0.05);*/
	background:#f6f6f9;
    font-family: 'Poppins';
    margin:0px;
    color:#727272; 
    font-size:18px; 
	font-weight:400;
    margin:0;
    padding:0;
    border:0; 
	line-height:1.6;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	letter-spacing: 0px;
	transition:all .5s;
}

.loginBody {
	/* background:linear-gradient(45deg, #166898, #56b5d9d4); */
	background:#2B2A35;
	background:#f6f6f9;
	height:100vh;
}

.bodyLoadingFull {
    width: 100%;
    height: 100%;
    background: #ffffff6e;
    position: fixed;
    bottom: 0px;
    left: 0;
    display: none;
    vertical-align: middle;
    line-height: 100%;
    text-align: center;
    color: var(--main-color);
    font-size: 10px;
    z-index: 90000;
}

.bodyLoadingIcon {
	margin: 0px auto;
    position: absolute;
    width: 20px;
    height: 20px;
    left: calc(50% - 50px);
    z-index: 2001;
    top: calc(50% - 50px);
}

.bodyLoading  {
	background: linear-gradient(-45deg, blue, #00c687, #ff00b0, #ccff03);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    width: 100%;
    height: 1px;
    position: fixed;
    top: 56px;
    left: 0;
    z-index: 99999999;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.loginlogo {
    width: 300px;
    height: 120px;
    margin: 0px auto;
    background-image: url("https://tayyoun.ae/wp-content/uploads/2023/02/tayyoun-logo.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80px auto;
	/* filter:brightness(0) invert(1); */
}

.loginPanelWrapper {
    width: 320px;
    margin: 0px auto;
    position: relative;
    top: 10vh;
}

.loginPanel {
    border-radius: 10px;
    /*
	padding: 20px;
	border: 1px solid #e6e6e6;
	*/
}

.loginInput {
	width: calc(100% - 20px)!important;
    border-radius: 8px;
    padding: 10px!important;
	padding-top:15px!important;
	padding-bottom:15px!important;
    margin-bottom: 15px!important;
	border:1px solid 505a5f!important;
	transition:all ease .2s;
	line-height:30px;
	color:#000!important;
	background:transparent!important;
	/*margin-bottom: -20px;
	padding-left:40px;*/
}

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color:#ccc;
	 -webkit-text-fill-color: #ccc;
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color:#ccc;
	-webkit-text-fill-color: #ccc;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
	color:#ccc;
	-webkit-text-fill-color: #ccc;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:#ccc;
	-webkit-text-fill-color: #ccc;
}

.loginInput:-webkit-input-placeholder {
	color:#fff!important;
	-webkit-text-fill-color: #fff!important;
}

.loginInput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color:#fff;
	-webkit-text-fill-color: #fff;
}

.loginInput::-moz-placeholder { /* Mozilla Firefox 19+ */
	color:#fff;
	-webkit-text-fill-color: #fff;
}

.loginInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:#fff;
	-webkit-text-fill-color: #fff;
}


/* .loginButton {
	width:calc(100% + 2px);
    border-radius: 5px;
    padding: 10px;
	padding-top:20px;
	padding-bottom:20px;
	background:#000;
	border:1px solid #000;
	color:#fff;
	font-weight:18px;
	transition:all .2s;
	font-weight:400;
	font-size:14px;
}

.loginButton:hover {
	background:var(--main-color);
	border:1px solid var(--main-color);
	color:#fff;
	cursor:default;
} */

.logoutMessage {
   width: calc(100% - 40px);
    color: #fff;
    font-weight: 400;
    padding: 20px;
    border-radius: 5px;
    position: relative;
    top: 10px;
    text-align: center;
    background: #008f44;
}

.loginErrorMessage {
	width: calc(100% - 20px);
    background: #cb7c7a;
    color: #fff;
    font-weight:400;
    padding: 10px;
    border-radius: 8px;
    position: relative;
    top: 10px;
    text-align: center;
}

.smallIcon {
	font-size:14px;
}

.removeItem {
	cursor:default;
	transition:all .2s;
}

.removeItem:hover {
	filter:grayscale(1);
}

.inputIcon {
	position:relative;
	right:55px;
	top:2px;
	z-index:2;
	font-size:16px;
	font-family:"Font Awesome 5 Free";
	font-weight:600;
	color:#CCC;
	 -webkit-text-fill-color: #ccc;
}

.h1SearchIcon {
	right: 40px;
    top: -4px;
}

.h1SearchField {
	padding-top: 7px!important;	
	width:150px;
}

.searchFieldSpan {
	float:right; 
	right: -12px; 
	position: relative;
}

.inputIconSearch:before {
	content: "\f002";
}

.inputIconSearchTop {
	
}

.inputError:before {
	content:'\f05a';
	color:#e63859;
}

.inputSuccess:before {
	content:'\f00c';
	color:#55b580;
}

.inputSearch:before {
	content:"\f002";
}

.inputUsername:before {
	content:"\f2be";
}

.inputPassword:before {
	content:"\f13e";
}

.standardInput {
	border-radius:3px;
	padding:10px;
	border:1px solid #fff;
}

.bigInput {
	padding: 15px!important;
	padding-top:20px!important;
	padding-bottom:20px!important;
    font-size: 30px;
    width: calc(100% - 30px)!important;
}

.longInput {
	width: calc(100% - 30px)!important;
}

.logo {
    display:none;
	background-image:url("../pictures/respot-logo-color.png");
    background-repeat:no-repeat;
    background-position:center left;
	
	background-size: 100px auto;
    width: 300px;
    height: 90px;
	z-index:20000;
	position:fixed;
	top:0px;
	left:5vw;
	transition:all ease-in-out .2s;
}

.logo:hover {
	cursor:default;
}

#goBackToInfoPanel {
	font-size:0px;
}

.leftPanel {
    position: absolute;
    top:0;
    height: 100%;
    overflow-y: auto; 
	overflow-x:hidden;
    min-width:250px;
	width:250px;
	margin-right:20px;
    /*border-right: 1px solid #dddfe3;*/
	box-shadow:0px 0px 7px #e7e7e7;
    background-color: #fff;
    left: 0px;
}

.rightPanel {
	/* position: fixed;
    top: 40px; */
	position: relative;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    padding: 30px;
    padding-top: 90px;
    padding-right: 5vw;
    padding-left: 5vw;
	padding-bottom:10px;
    width: calc(100% - 10vw);
}


.topBar {
	height: 56px;
	width:100%;
    box-shadow: 0 0 3px 0px #c1c1c1;
	background:#fff;
	position:fixed;
	z-index:10000000;
}

.navigation {
	position:fixed;
	top:10px;
	left:5vw;
	z-index:100000000;
	width:calc(100% - 20vw);
}

.naviPoint, .naviPointActive, .subNaviPoint {
    font-weight: 300!important;
    font-size: 17px;
	min-width:17px;
    transition: all .2s;
    color: #727272;
    display: inline-block;
    padding: 10px;
	transition:all .2s;
	margin-right:5px;
	text-align:center;
	cursor:default;
}

.naviPoint:hover {
	border-radius: 5px;
    background: #f6f6f9;
}

.naviPointActive {
    color: var(--main-color)!important;
	border-radius: 5px;
    background: #f6f6f9;
}

.subNaviPoint, .subNaviPointActive {
	color:#fff;
}

.subNaviPoint:hover, .subNaviPointActive {
	border-radius: 5px;
    background: #f6f6f9;
	color:#727272;
}

.actionButton {
	
}

.footable {
	border-spacing: 0 5px!important;
	border-collapse: separate;
	border:none;
}

.footable > tbody > td > select {
	width:auto!important;
}



.popup-tag{
	position:absolute;
	display:none;
	background-color: #4c4c4cd4;
    border-radius: 8px;
    color: transparent;
	padding:10px;
	font-size:20px;
	font-weight:400;
	text-decoration:underline;
	cursor:default;
	-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
	z-index:199999;
}

.smallBtn {
	font-size:12px;
	font-weight:400;
	padding:7px!important;
}

.marginRight20px {
	margin-right:20px;
}

.textTemplates {
	padding:10px;
}

.textTemplate {
	margin-bottom: 5px;
    cursor: move;
    border: 1px dashed #ccc;
    width: auto;
    padding: 2px;
	font-size:10px;
	border-radius:3px;
}

.textTemplate:hover {
	border: 1px dashed #ccc;
	background:#ccc;
}

.offerText {
	width:calc(100% - 40px);
	border:none;
	margin-top:20px;
	padding:20px;
	background:#efefef;
	transition:all .2s;
	border-radius:5px;
	margin-bottom:20px;
}

.offerText:hover {
	background:#e5e5e5;
}

.offerText ul, li {
	margin:1px;
}

.small {
	width: 5vw!important;
    /* line-height: 15px!important; */
    margin-bottom: 2px;
    padding: 5px!important;
    padding-left: 10px!important;
}


}

.medium {
	width:8vw!important;
}

.spacer {
	height:80px;
	width:100%;
}

.smallSpacer {
	height:20px;
	width:100%;
}

.noMargin {
	margin:0!important;
}

#mytable tr:not(.summary) {
	background:#fff;
	transition:all .2s;
}

#mytable tr:not(.tableHeader):hover {
	box-shadow:0px 0px 12px #e7e7e7;
	background:#f9f9f9!important;
}

table, td {
    border-bottom: 1px solid #dddfe3;
    border-top: 1px solid #dddfe3;
}

.footable tbody td:first-child {
    border-bottom-left-radius: 6px;
    border-left: 1px solid #dddfe3;
    border-top-left-radius: 6px;
}

.footable tbody td:last-child {
    border-bottom-right-radius: 6px;
    border-right: 1px solid #dddfe3;
    border-top-right-radius: 6px;
} 

.footable thead th:first-child {
    border-bottom-left-radius: 6px;
    border-left: 0px solid #dddfe3;
    border-top-left-radius: 6px;
	padding-left: 0px;
}

.footable thead th:last-child {
    border-bottom-right-radius: 6px;
    border-right: 0px solid #dddfe3;
    border-top-right-radius: 6px;
}

.footable thead th {
	border:none;
}

.ellipsis {
	max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tableHeader {
	background:transparent!important;
	font-weight:500!important;
	color:var(--main-color)!important;
}

.tableHeaderSmall {
	line-height:40px;
	font-weight:500!important;
}

.gerade, .ungerade {
	background:#fff!important;
}

/*
.li, .liActive {
	border-bottom: 1px solid #fff;
    background: #fff;
	padding-left:34px;
	font-size:14px;
	padding-bottom:10px;
	color:var(--main-color);
}
*/

.li, .liActive {
    padding-left: 34px;
    /*
	text-indent: -28px;
    font-size: 14px;
    padding-bottom: 10px;
    color: #727272;
    left: 26px;
	*/
    position: relative;
    width: 170px;
    word-break: break-word;
}

.liActive {
	font-weight:400;
}

.li:before, .liActive:before {
    padding-right: 20px;
	content:"+"!important;
}

.li:hover {
	font-weight:400;
	color:#777777;
}

li {
	list-style-type:square;
	color:var(--main-color);
}

h1 {
	font-size:25px;
	font-weight:400;
	color:var(--main-color);
	margin-bottom:30px;
	/* padding-left:10px; */
}

h2 {
	font-size:22px;
	color:#727272;
	font-weight:400;
	/* padding-left:10px; */
}

h3 {
	margin:0;
	margin-top:10px;
	margin-bottom:10px;
	color:var(--main-color);
	transition:all .2s;
	font-weight:400;
	/* padding-left:10px; */
}

.mainbg > h1, .mainbg > h2, .mainbg > h3 {
	color:#fff!important;
}

.ticketOptions h1, .ticketOptions h2 {
	color:var(--main-color)!important;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

select:hover {
	cursor:default;
}

textarea {
	width:calc(100% - 20px);
	border-radius:5px;
	font-family:"Poppins";
	font-weight:400;
	height:auto;
	border:1px solid #ddd;
	padding:10px;
	min-height:120px;
	font-size:16px;
	max-height:110px;
	color:#727272;
}

input[type='radio'] {
	margin-top: 15px;
    margin-bottom: 15px;
}

.whiteFont > td > span > i.fontAweSomeIconAsLink {
	color:#fff!important;	
}

.fontAweSomeIconAsLink {
	padding-right:3px;
}

a:link, .fontAweSomeIconAsLink, .profileBoxLink {
	color:var(--main-color); 
	text-decoration:none;
	transition:all .2s;
}

a:focus {
	color:var(--main-color);
}

a:visited {	
	color:var(--main-color);
}

a:active {
	color:var(--main-color);
}

a:hover, .fontAweSomeIconAsLink:hover, .profileBoxLink:hover {	
	color:#727272;
	cursor:default;
}

a:visited.standardButton, a:link.standardButton {
	color:#FFF!important;
}

.infoMessage {
	background: #d5d8dc;
    color: #483d3d;
    font-size: 13px;
}

th {
	font-weight:500!important;
}

.loeschen {
	color:inherit;
	transition:all .2s;
}

input:checked + .slider:before {
    height: 16px!important;
    width: 16px!important;
    left: 7px!important;
}

input + .slider:before {
    height: 16px!important;
    width: 16px!important;
    left: -13px!important;
    bottom: 2px!important;
}

.loggedinInfo {
	font-size:10px;
}

option {
	font-size:inherit;
}

.bold {
	font-weight:600;
}

.bellIcon {
	position:fixed;
	top:10px;
	right:calc(5vw + 40px);	
	z-index:1000;
}

.profilePicContainer {
    position:fixed;
	width:30px;
	height:30px;
	top:13px;
	right:5vw;	
	cursor:default;
	border-radius:30px;
	z-index:1000;
	overflow:hidden;
	transition:all .2s;
}

.profilePicContainer:hover {
	-webkit-box-shadow: 0 0 0px 8px #f6f6f9;
	-moz-box-shadow: 0 0 0px 8px #f6f6f9;
	box-shadow: 0 0 0px 8px #f6f6f9;
	cursor:default;
}

.profilePic {
	/*
	display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
	border:1px solid #ddd;
	*/
}

.profilePic img {
	width: 100%;
    height: auto;
    margin-left: 0px;
	margin-top:0px;
}

.profilePicPreview {
	display: inline-block;
    position: relative;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #ddd;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.profilePicPreview img {
	width: 100%;
    height: auto;
    margin-left: 0px;
	margin-top:-10%;
}

.profilePic:hover {
	default-events:none;
}

.profileBoxContainer {
	position:fixed;
	right:0px;
	top:70px;
	z-index:90000;
}

.profileBox {
	position: relative;
	top:10px;
	right:calc(5vw - 18px);
	box-sizing: border-box;
	background: #FFF;
	box-shadow: 0px 0px 6px 0 rgba(0, 0, 0, 0.5);
	width:auto;
	display:none;
	border-radius:3px;
}

.profileBox::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    right: 0;
    box-sizing: border-box;
    border: 10px solid black;
    border-color: transparent transparent var(--main-color) var(--main-color);
    transform-origin: 0 0;
    transform: rotate(135deg);
}

.profileBoxLink {
	padding-left:20px;
	padding-right:20px;
	line-height:40px;
	cursor:default;
}

.profileBoxLink:hover {
	background:#CCC;
}

.profileLine {
	height:0px;
	border-bottom:1px solid #ddd;
}

.logoPreview {
	text-align:right;
	margin-right:40px;
}

.userName {
	height:auto;
	background:var(--main-color);
	color:#FFF;
	font-weight:400;
	font-size:16px;
	padding:20px 20px;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
	text-align:right;
}

.searchResults {	
    width: 500px;
    line-height: 30px;
    max-height: 400px;
    overflow: auto;
    text-align: left;
    margin: 0px auto;
    border: 1px solid #eee;
    padding: 10px;
    border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	position: absolute;
	border-top:0px;
	display:none;
	background:#fff;
	box-shadow: 0px 0px 5px 0px #ccc;
    -moz-box-shadow: 0px 0px 5px 0px #ccc;
    -webkit-box-shadow: 0px 0px 5px 0px #ccc;
	z-index:99999;
}

.mainbg {
	background:var(--main-color);
}

.maincolor {
	color:var(--main-color);
}


.searchResult {
	transition:all ease-in-out .2s;
	border-bottom:1px solid #F7F7FC;
}

.searchResult:last-child {
	border-bottom:3px solid #F7F7FC;
}

.searchResult:hover {
	cursor:default;
	background:#eee;
}

.searchResultName {
    padding-left:10px;
}

#distanceToAddress {
	font-size:8px;
}

.grey {
	color:var(--main-color);
}

.greyedOut {
    width: 100%;
    height: 100%;
    background: #ffffff6b;
    position: fixed;
    z-index:10;
	top: 0;
    left: 0;
    filter: blur(5px);
}

.popupContainer {
	width: calc(100% - 180px);
    height: calc(100% - 180px);
    position: fixed;
    overflow-y: auto;
    z-index: 4000;
    left: 60px;
    top: 60px;
    background: #FFF;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 0px #ccc;
    -moz-box-shadow: 0px 0px 5px 0px #ccc;
    -webkit-box-shadow: 0px 0px 5px 0px #ccc;
    display: none;
    padding: 30px 30px;
}

.closeContainer {
	width:30px;
	height:30px;
	line-height:30px;
	position:fixed;
	right:80px;
	top:80px;
	color:var(--main-color);
	z-index:10000;
	font-size:30px;
}

.closeContainer:hover {
	color:#ccc;
	cursor:default;
}

.smallInfo {
	font-size: 15px;
    /* margin-bottom: 20px;
    margin-top: 10px; */
    padding: 10px;
}

#drop_file_zone {
	display: none;
    position: fixed;
    top: 5vh;
    left: 5vw;
    width: 90vw;
    height: 90vh;
    border: 5px dashed var(--main-color);
    border-radius: 10px;
    background: #fcfcfc;
    z-index: 999999;
    /* box-shadow: 0px 0px 5px 0px #2b2b2b; */
    -moz-box-shadow: 0px 0px 5px 0px #2b2b2b;
    -webkit-box-shadow: 0px 0px 5px 0px #2b2b2b;
}

#drag_upload_file {
	text-align: center;
    vertical-align: middle;
    font-size: 20px;
    position: relative;
    top: calc(50% - 40px);
}

.filename_info {
	font-size:15px;
    padding: 10px;
}

.smallInput {
	max-width:100px;
	padding-top:20px!important;
	height:30px!important;
}

.smallerInput {
	max-width: 100px;
    line-height: 30px!important;
    /* padding-bottom: 5px!important; */
    padding-top: 5px!important;
}

.wideInput {
	width:80%!important;
	line-height:36px!important;
	padding-bottom: 4px!important;
    padding-top: 7px!important;
}

input[type="text"], input[type="password"], input[type="number"], input[type="color"], input[type="file"], input[type="date"], input[type="time"], select, .custom-combobox-input {
    border-radius: 3px;
    outline: none;
    vertical-align: middle;
    display: inline-block;
    border-radius: 5px;
    font-weight: 300;
    /* .background: #fff!important; */
    border: 1px solid #ddd;
    padding: 10px;
    transition: all ease 0.2s!important;
    width: 20vw;
    line-height: 30px;
	color:#727272;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="color"]:focus, input[type="file"]:focus, input[type="date"]:focus, input[type="time"]:focus, select:focus, .multi-select:focus, textarea:focus, .custom-combobox-input:focus {
	/*
	-webkit-box-shadow:0 0 0 1px var(--main-color),inset 0 1px 3px 0 rgba(33,34,36,0.07),inset 0 0 0 1px var(--main-color);
	box-shadow:0 0 0 1px var(--main-color),inset 0 1px 3px 0 rgba(33,34,36,0.07),inset 0 0 0 1px var(--main-color);
	*/
	/* border:1px solid var(--main-color); */
	border: 1px solid #bababa;
	
}

input[type="text"]:hover, input[type="password"]:hover, input[type="number"]:hover, input[type="color"]:hover, input[type="file"]:hover, input[type="date"]:hover, input[type="time"]:hover, select:hover, .multi-select:hover, textarea:hover, .custom-combobox-input:hover {
	box-shadow:0 0 2px 0px #c1c1c1;
} 

input[type="text"]:disabled, input[type="number"]:disabled, select:disabled, input[type="submit"]:disabled {
	cursor:no-drop;
}

input[type="button"]:disabled, select:disabled {
	cursor:no-drop;
	color:#aaa;
	background:#ccc;
	border:1px solid #ddd;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0.2s!important;
	font-size:20px;
	/* -webkit-text-fill-color: #fff!important; */
}

strong {
	font-weight:500;
}

select {
	width:auto!important;
	font-weight:400!important;
	height:52px;
	font-size:18px;
	margin-bottom:5px;
	color:#555!important;
	font-family:"Poppins";
}

.selectSmall {
	height:50px!important;
	
}

#ticketDescription img, #ticketDetails img, #ticketAnswer img, .nachrichtMessageAnswer img, .nachrichtMessage img, .ticketOptions img {
	border:1px solid #c5c5c5;
	border-radius:5px;
	max-width:100%;
}

.ticketOptions {
	background: #f6f6f9;
    position: fixed!important;
    overflow: auto;
    right: calc(-50% - 85px);
    height: calc(100% - 140px);
	width:0;
    top: 56px;
    z-index: 1;
    padding: 40px;
	-webkit-box-shadow:0px 0px 3px #ccc;
	box-shadow:0px 0px 3px #ccc;
	transition:all .5s cubic-bezier(0.1, 1.05, 1, 1)!important;
}

.ticketOptionsShow {
	right:0;
	width:40%!important;
}

input {
	font-family: "Poppins";
	-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
	z-index:11;
	position:relative;
	margin-bottom:5px;
}

input[type="text"], input[type="password"], input[type="number"], input[type="color"], input[type="date"], input[type="time"] {
	padding-left: 15px;
    padding-top: 20px;
    padding-bottom: 4px;
    background: none;
	font-size:18px;
	line-height:38px;
}

input[type="file"] {
    padding-top: 18px;
}

input[type="color"] {
	min-height:57px!important;
}

.copySection {
	margin-left: 30px;
    top: -5px!important;
}

.sectionTable {
	background: #f6f6f9;
    margin-bottom: 40px;
    border-radius: 10px;
    padding: 20px;
    width: calc(100% - 40px)!important;
}

hr {
	border: 0px;
    height: 1px;
    background: #ccc;
    margin-bottom: 10px;
    margin-top: 10px;
	width:100%;
}

.cv_table {
	border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
	border-top:1px solid #ccc;
	border-radius:10px;
}

.cv_table_cell {
	padding: 10px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
	background:#fff;
}

.cv_table > .table-row:first-child > .table-cell {
	background:var(--main-color)!important;
	color:#fff!important;
}

.cv_table > .table-row:first-child > .cv_table_cell:first-child {
	border-top-left-radius:10px;
} 

.cv_table > .table-row:first-child > .cv_table_cell:last-child {
	border-top-right-radius:10px;
} 

.cv_table > .cv-table-row:last-child > .cv_table_cell:first-child {
	border-bottom-left-radius:10px;
} 

.cv_table > .cv-table-row:last-child > .cv_table_cell:last-child {
	border-bottom-right-radius:10px;
} 

/*
input[type="color"] {
    padding: 10px!important;
	width:25vw!important;
}
*/

.isSortableContainer {
	display:contents;
}

.questionInput {
	height: 20px;
    padding-top: 10px!important;
    padding-bottom: 7px!important;
}

.ui-sortable-handle > .spaceContainer > .innerSpaceContainer.linkButton {
	cursor:move!important;
}

.topSearchInput {
	padding-top: 4px!important;
    padding-bottom: 4px!important;
    margin-bottom: 0px;
    width: 40vw!important;
    left: calc(50% - 20vw)!important;
    margin: 0 auto!important;
    position: fixed;
    top: 8px;
	padding-top: 4px!important;
    padding-bottom: 4px!important;
    margin-bottom: 0px;
    width: 40vw!important;
    left: calc(50% - 20vw)!important;
    margin: 0 auto!important;
    position: relative;
    top: -3px;
	line-height:initial!important;
}

#kwd_search {
	padding:10px;
}

.disabled {
	background:#f6f6f6!important;
	cursor:no-drop;
}

.hidden {
	display:none!important;
	transition:all .4s;
}


#statusMessage {
	color:#FFF; 
	font-family:"Poppins"; 
	display:none; 
	position:fixed; 
	bottom:20px; 
	right:20px; 
	width:auto; 
	height:auto; 
	font-weight:400; 
	padding:20px; 
	background:var(--main-color);
	border-radius:3px;
	text-align:center;
	z-index:100000;
}

.lightRedBg {
	background:#FFFFFF!important;
}

.redBg {
	background:#cb7c7a!important;
}

.redFont {
	color:#f55d62!important;
	font-weight:400;
}

.greenFont {
	color:var(--main-color)!important;
	font-weight:400;
}

.blueFont {
	color:#266678!important;
	font-weight:400;
}

.greenBg {
	background:var(--main-color)!important;
}

.whiteFont {
	color:#fff!important; 
}

.green {
	background:var(--main-color)!important; 
}

.green:hover {
	background:#66d2a6!important; 
	color:#fff!important; 
}

.yellow {
	background:#cda35f!important; 
}

.yellow:hover {
	background:#d0c262!important;
	color:#FFF!important;
}

.yellowFont {
	color:#cda35f!important; 
}

.red {
	background:#b94f54!important; 
}

.red:hover {
	background:#d87276!important; 
	color:#FFF!important;
}

.mandatoryField {
	border:1px solid var(--main-color)!important;
}

.error {
	background:var(--red)!important;
}

.success {
	background:var(--green)!important;
}

.inputFieldError {
	-webkit-box-shadow:0 0 0 1px #f2e4e4,inset 0 1px 3px 0 rgba(33,34,36,0.07),inset 0 0 0 1px #f2e4e4;
	box-shadow:0 0 0 1px #f2e4e4,inset 0 1px 3px 0 rgba(33,34,36,0.07),inset 0 0 0 1px #f2e4e4;
	border:1px solid #f2e4e4;
}

.inline-block {
	display:inline-block;
}

.systemNotificationWrapper {
	position:fixed;
	right:40px;
	bottom:40px;
	display:block;
	width:auto;
	z-index:1000000;
	text-align:right;
}

.systemNotification {
	width:auto;
	line-height:20px;
	z-index:100000000;
	padding:20px;
	font-weight:400;
	color:#fff;
	background:var(--main-color);
	border-radius:5px;
	-webkit-box-shadow: 0 0 5px #999;
	box-shadow: 0 0 5px #999;
	display:table;
	margin-top:10px;
	position:relative;
	margin-left:auto;
}

.systemNotificationDynamic {
	/*width: calc(100% + 60px);*/
	width:calc(100% - 20px);
    line-height: 20px;
    font-size: 15px;
    font-weight: 500;
    color: #266678;
    padding: 10px;
    margin-bottom: 20px;
    background: #f55d6226;
    position: relative;
	border-radius:5px;
    /*left: -40px;*/
}

.standardButton {
	width:auto;
	font-family:""Poppins"";
	font-weight:500!important;
    border-radius: 8px;
    padding: 10px;
	border:none;
	background:var(--main-color);
	color:#fff;
	transition: all ease 0.2s;
	font-weight:400;
	cursor:default;
	line-height:30px;
	position:relative;
	top:0px;
	font-size:18px;
}

.bigButton {
	width:40vw;
	padding:20px;
	margin:0 auto;
}

.andNew {
	margin-top:20px;
}

.standardButton:hover {
	border:none;
	cursor:default;
	position:relative;
	box-shadow:0px 4px 7px 0px #acacac;
	top:-3px;
}

.css-selector {
    
}

@-webkit-keyframes  {
    0%{background-position:13% 0%}
    50%{background-position:88% 100%}
    100%{background-position:13% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:13% 0%}
    50%{background-position:88% 100%}
    100%{background-position:13% 0%}
}
@keyframes AnimationName {
    0%{background-position:13% 0%}
    50%{background-position:88% 100%}
    100%{background-position:13% 0%}
}

.smallButton {
	padding: 0px;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 1px;
}

.smallerButton {
	padding:1px;
	font-size:11px;
}

.deleteItem {
	/*display:none;*/
}

.delete-container {
	position: relative;
    left: 20px;
    top: 2px;
    width: 20px;
    font-size: 15px;
    height: 20px;
    display: none;
    transition: all .2s;
    cursor: default;
}

.delete-container:after {
	font-family: "Font Awesome 5 Free";
    font-weight: 500;
    position: absolute;
    left: 0px;
    color: var(--light-grey);
    top: 0px;
	content: '\f2ed';
	transition:all .2s;
}

.delete-container:hover::after {
    color: var(--main-color);
}

.cancel {
	background:#aeaeae;
	border:none;
}

/*
.label {
	display:table-cell;
	font-weight:400;
	padding-bottom:10px;
	padding-top:10px;
	font-size:14px;
	font-weight:400;
	color:#555;
}
*/

.form-group {
	position:relative;
}



.label {
	position: absolute;
	left: 15px;
	top: 18px;
	color: #b7b7b7;
	z-index: 15;
	-webkit-transition: all .4s;
	transition: all .4s;
}

.labelForCheckbox {
	position: absolute;
	left: 55px;
	top: 0px;
	color: #b7b7b7;
	z-index: 10;
	-webkit-transition: all .4s;
	transition: all .4s;
}

.focused > .label {
	-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
	font-size: .75em;
}

.task {
	border:1px solid #ddd;
	padding:10px;
	background:#FFF;
	margin-bottom:10px;
	border-radius:5px;
	width:calc(100% - 20px);
	display:table;
	transition:background .2s ease;
}

.task:hover {	
	cursor:move!important;
	box-shadow:0px 0px 12px #e7e7e7;
	background:#f9f9f9!important;
}

.sortableTable tr {
	cursor:move;
}

.ui-sortable-helper {
    display: table;
}

.customTask {
	background:#e9e9e9!important;
}

.tablePadding10px {
	width:calc(100% - 20px)!important;
}

.tableWithBG {
	border-radius: 8px;
    box-shadow:0px 1px 10px #e7e7e7;
    padding: 20px;
    padding-left: 0px;
    background: #fff;
	margin-bottom:10px;
}

.table { 
   display: table;
   width:100%;
   /*margin-bottom:10px;*/
}

.tableWithBorderTop {
	border-top: 1px solid #ccc;
    margin-top: 15px;
}

.fatBorder {
	border-width: 3px;
}

.textIndent20px {
	padding-left:30px;
}

.tableWithBorderBottom {
	border-bottom: 1px dotted #ccc;
    margin-bottom: 15px;
}

.table-row {
	display: table-row;
}

.table-cell {
	display: table-cell;
	position:relative;
}

.table-rowActive {
	display: table-row;
	position:relative;
}

.noPadding {
	margin:0;
	padding:0;
}

.noPaddingTop {
	padding-top:6px!important;
}

.fontPurple {
	color:var(--main-color);
}

.cell0 {
	width:0%;
	padding:0px;
	transition:width .5s cubic-bezier(0.1, 1.05, 1, 1);
}

.cell5 {
	width:5%;
}

.cell10 {
	width:10%;
}

.cell15 {
	width:15%;
}

.cell20 {
	width:20%;
}

.cell25 {
	width:25%;
}

.cell33 {
	width:33%;
}

.cell50 {
	width:50%;
	transition:width .5s cubic-bezier(0.1, 1.05, 1, 1);
}

.cell70 {
	width:70%;
}

.cell75 {
	width:75%!important;
}

.cell100 {
	width:100%;
	transition:all .2s;
}

.cell100px {
	width:300px;
}

.smallImageGrid {
	float: left;
    width: calc(50% - 10px);
    margin-right: 5px;
    margin-bottom: 5px;
}

.inline-table {
	/*
	display:inline-table;
	padding-right: 1.5em;
	*/
	vertical-align:middle;
	padding-right:1em;
	font-size:1em;
	
	overflow:ellipsis;
}

.topBorderDouble {
	border-top:3px double #999;
}

.alignCenter {
	text-align:center!important;
}

.centered {
	text-align:center!important;
}

.alignLeft {
	text-align:left!important;
}

.alignRight {
	text-align:right!important;
	margin-right:10px;
}

.topAligned {
	vertical-align:top!important;
}

.verticalAligned {
	vertical-align:middle!important;
}



.cateringDetail {
	transition:all .2s;
}

.cateringDetail:hover, .task:hover {
	cursor:default;
	box-shadow:0px 0px 12px #e7e7e7;
	background:#f9f9f9!important;
	color:var(--main-color)!important;
}

.noFinalVersion {
	background: #f1f1f1!important;
    color: #c8c8c8!important;
}

.checkBoxWrapper {
	/*width: calc(50% - 49px);*/
    /*float: left;
    margin-bottom: 11px;
	*/
}

.checkBoxWrapper100 {
	width: 100%;
}

.checkBoxWrapper_33 {
	width: calc(33% - 49px);
    float: left;
    margin-bottom: 11px;
}

.checkBoxText {
	margin-left: 49px;
}

.checkbox {
	cursor: default;
    height: auto!important;
    float: left; 
}

.centeredCheckBox {
	float:none;
}

.switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
}

.switch input {
	display:none;
}

.slider {
	position: absolute;
	cursor: default;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}


input:checked + .slider {
	background-color: var(--main-color);
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--main-color);
} 

input:checked + .slider:before {
	-webkit-transform: translateX(15px);
	-ms-transform: translateX(15px);
	transform: translateX(15px);
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: -3px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input + .slider:before {
	-webkit-transform: translateX(15px);
	-ms-transform: translateX(15px);
	transform: translateX(15px);
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: -20px;
	bottom: -3px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
	-webkit-box-shadow: 0px 0px 2px 0px rgba(133,133,133,1);
	-moz-box-shadow: 0px 0px 2px 0px rgba(133,133,133,1);
	box-shadow: 0px 0px 2px 0px rgba(133,133,133,1);
}

.whiteCheckbox {
	background:#fff;
}

.whiteCheckbox:checked + .slider:before {
	-webkit-transform: translateX(15px);
	-ms-transform: translateX(15px);
	transform: translateX(15px);
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: -3px;
	background-color: #727272;
	-webkit-transition: .4s; 
	transition: .4s;
}

.whiteCheckbox:checked + .slider {
	background-color: #fff;
}

.whiteButton {
	background:#fff;
	color:var(--main-color);
}

.height32px {
	height:32px;
}

#packingList {
	padding-bottom:100px;
}

.dashboardCard {
	width:calc(100% - 80px);
	border-radius:5px;
	background:#FFF;
	padding:20px;
	-webkit-box-shadow: 0 0 3px #ccc;
	box-shadow: 0 0 3px #ccc;
	background:#fff;	
	border-top: 10px solid var(--main-color);
	padding-top:10px;
}

.bgfff {
	background:#fff!important;
}

.bgWhite {
	background:#fff;
	border:1px solid #ddd;
	border-radius:5px;
	padding:10px;
	/*padding-top:0px;*/
}

.bgWhiteNoPadding {
	background:#FFF;
	border:1px solid #ddd;
	border-radius:5px;
}

.bgGrey {
	background:#f6f6f6;
	border:1px solid #ddd;
	border-radius:5px;
	padding:10px;
	width:calc(100% - 20px);
	margin-bottom:5px;
	background-image: url(https://employr.de/ionicapp/auth4/www/img/login.jpg);
    background-position: 43% 66%;
	background-size:cover;
}

.infoPanelRight {
	width:calc(90% - 80px);
	height:100%;
	position:fixed;
	padding:20px 40px;
	right:-60%;
	top:0px;
	overflow: hidden;
	overflow-y:auto;
	display:none;
	background:#FFF;
	box-shadow:0px 0px 5px 0px #555;
    -moz-box-shadow:0px 0px 5px 0px #555;
    -webkit-box-shadow:0px 0px 5px 0px #555;
	z-index:80000;
}

.infoPanelRightClose:before {
	font-family: "Font Awesome 5 Free";
    content: "\f061";
    font-weight:400;
    color: #FFF;
    font-size: 15px;
    border-radius: 33%;
    padding: 8px 8px;
    height: 14px;
    width: 15px;
    line-height: 14px;
    text-align: center;
    background: #00a764;
    position: absolute;
    right: 20px;
	transition:all ease-in-out .3s;
	z-index:3000;
}

.infoPanelRightClose:hover:before {
	background:#67bb5d;
	cursor:default;
	box-shadow:0px 0px 5px 0px #CCC;
    -moz-box-shadow:0px 0px 5px 0px #CCC;
    -webkit-box-shadow:0px 0px 5px 0px #CCC;
}

/*
td[contenteditable="true"] {
	border:1px solid #dddfe3;
}
*/

td[contenteditable="true"]:focus {
	outline:2px solid var(--main-color);
	/*
	border:1px solid var(--main-color);
	-webkit-box-shadow:0 0 0 1px var(--main-color),inset 0 1px 2px 0 rgba(33,34,36,0.07),inset 0 0 0 1px var(--main-color);
	box-shadow:0 0 0 1px var(--main-color),inset 0 1px 2px 0 rgba(33,34,36,0.07),inset 0 0 0 1px var(--main-color);
	border:none;
	*/
	
}

span[contenteditable="true"] {
	resize:both;
}



.contenteditable {
	border-bottom:2px dotted #e6e6e6!important;
	/* font-size:20px!important; */
	padding:0px!important;
	padding-left:0px!important;
	padding-right:0px!important;
	min-width: 100px;
    display: inline-block;
}

.contenteditable:focus {
	outline:2px solid var(--main-color);
	border-radius:3px;
}

.contenteditable:hover {
	cursor:text!important;
}

.contenteditableDiv {
	border: 2px dotted #e6e6e6;
    padding: 20px!important;
    border-radius: 5px;
	width:calc(100% - 40px);
}

.bigContenteditable {
	font-size:30px!important;
	color:var(--main-color)!important;
	margin-bottom: 30px!important;
	padding:0px!important;
}

.displayNone {
	display:none;
	transition:all .2s;
}

::-webkit-scrollbar {
    width:0px;
	height:0px;
}
::-webkit-scrollbar-track {
    background-color:#eaeaea;
    border-left:1px solid #ddd;
}
::-webkit-scrollbar-thumb {
    background-color:#ccc;
}
::-webkit-scrollbar-thumb:hover {
    background-color:#aaa;
}

.toggleResourcesBtn {
	cursor:default;
	margin-top:0px;
}

#resourcePlanningPlaceHolder {
	margin-top:20px;
}

.width35px {
	width:15px;
}

.rotate {
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.rotate.down {
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}

#jqContextMenu {
	z-index:222222222222;
}

#jqContextMenu ul {
	min-width:300px;
	border:1px solid #d0d0d0 !important;
	border-radius:5px !important;
	padding:10px !important;
	box-shadow: 0 0 3px #ccc!important;
	color:var(--main-color) !important; 
	background-color:#FEFEFE !important;
}

#jqContextMenu li {
	border:none !important;
	border-bottom:1px solid #eaeaea !important;
	padding: 15px !important;
    line-height: 20px;
	transition:all .3s;
	border-radius: 4px;
	color:#727272!important;
}

#jqContextMenu li:before {
	content:"";
}

#jqContextMenu li:last-child {
	border:none !important;
	border-bottom:1px solid transparent !important;
}

#jqContextMenu li:hover {
	cursor: default !important;
    border-bottom: 1px solid #f1f1f1 !important;
    background-color: var(--main-color) !important;
    color: #fff!Important;
}

#jqContextMenu li:hover:last-child {
	border:none !important;
	border-bottom:1px solid transparent  !important; 
}

.contextMenu {
	cursor:default;
}


/* ROUND CHECKBOX */

.packListRow {
	height:30px;
}

/* Checkbox Icons */
.labelRound {
    position: relative;
	left: 30px;
    cursor: default;
    color: #727272;
    padding: 10px 0;
	font-family:"Poppins";
}

.labelRound:before, .labelRound:after {
    font-family: "Font Awesome 5 Free";
    font-size: 25px;
	font-weight:400;
    /*absolutely positioned*/
    position: absolute; 
	top: 0; 
	left:-30px;
}

.labelIntended {
	margin-left:25px;
}

.labelRound:before {
    content: '\f111'; /*checkbox unchecked */
	font-weight:400;
}

.labelRound:after {
    content: '\f00c';
    max-width: 0;
    font-weight:400;
    overflow: hidden;
    opacity: 0.5;
    font-size: 13px;
    top: 10px;
    left: -24px;
    color: #727272;
    -webkit-transition: all 0.50s;
    -moz-transition: all 0.50s;
    -o-transition: all 0.50s;
    transition: all 0.50s;
}

.labelHeader {
	font-size:15px;
	font-weight:400;
	color:var(--main-color);
}


/* Hide the Ordinary Checkbox */
.checkBoxRound {
    display: none;
}

/* Animating the Checkbox Icon */
.checkBoxRound:checked + label::after {
  margin-right: 0px;
  max-width: 25px;
  opacity: 1;
  width: 25px;
}





.nachrichtMessage {
	width:calc(80% - 50px);
	padding:0px 20px 20px 20px;
	margin-bottom:20px;
	border-radius:5px;
	margin-left:60px;
	padding-top:-20px!important;
	-webkit-box-shadow: 0 0 3px #ccc;
	box-shadow: 0 0 3px #ccc;
	background:#fff;	
	/*border-top: 10px solid #f6f6f9;*/
	padding-top:10px;
}

.nachrichtMessageAnswer { 
	width:calc(80% - 50px);
	padding:0px 20px 20px 20px;
	margin-bottom:20px;
	border-radius:5px;
	margin-left:30px;
	position:relative;
	left:calc(20% - 80px);
	clear:both;
	-webkit-box-shadow: 0 0 3px #ccc;
	box-shadow: 0 0 3px #ccc;
	background:#fff;
	/*border-top: 10px solid var(--main-color);*/
	padding-top:10px;
}

.spaceLine {
	height:2px;
	border-bottom:1px solid #eaeaea;
	margin-bottom:10px;
	margin-top:10px;
}

.subject {
	font-size:16px;
	color:var(--main-color);
	font-weight:400;
	margin-bottom:10px;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;   
	border-right:10px solid #e5e5e5; 
	position:relative;
	top:22px;
	left:-30px;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;   
	border-left:10px solid #e5e5e5; 
	position:relative;
	top:22px;
	left:calc(100% + 20px);
}

.circleUser {
	width:30px;
	height:30px;
	border-radius:50%;
	background-color:#CCC;
	border:1px solid #e0e0e0;
	font-weight:400;
	display: inline-block;
	align-items: center;
	justify-content:center;
	color:#FFF;
	overflow:hidden;
}



.circleUser img {
	width: 100%;
    height: auto;
    margin-left: 0px;
	margin-top:-10%;
}

.answer {
	background:#f7f7f7;
}


.left {
	position:relative;
	left:-80px;
	top:12px;
	padding-top:-50px!important;
	margin-bottom:-40px;
}

.right {
	position:absolute;
	left:calc(100% + 20px);
	top:24px;
	/*display:none!important;*/
}

.fontSize8px {
	font-size:11px;
}

.fontSize11px {
	font-size:11px;
}

.smallColorBox {
	width:30px;
	height:13px;
	border-radius:2px;
	display:inline-block;
}

.bottomInfoCircle {
	width: 10px;
    height: 10px;
    padding: 6px 9px 17px 14px;
    border-radius: 5px;
    font-size: 14px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--main-color);
    z-index: 100000;
    color: #fff;
	font-family:"Font Awesome 5 Free";
	font-weight:600;
	transition:all .2s;
}

.bottomInfoCircle:hover {
	-webkit-box-shadow: 0 0 0px 8px #f6f6f9;
	-moz-box-shadow: 0 0 0px 8px #f6f6f9;
	box-shadow: 0 0 0px 8px #f6f6f9;
	cursor:default;
}

.bottomInfoCircle:before {
	content:"\f129";
}

.bottomInfoCircleBoxContainer {
	position:fixed;
	right:5px;
	bottom:90px;
	z-index:90000;
	max-height:90%;
	max-height: 300px;
    height: 300px;
    margin-bottom: -210px;
}

.bottomInfoCircleBox {
	position: relative;
	top:10px;
	right:10px;
	box-sizing: border-box;
	background: #FFF;
	box-shadow: 0px 0px 6px 0 rgba(0, 0, 0, 0.2);
	width:auto;
	display:none;
	border-radius:3px;
	border-bottom:3px solid var(--main-color);
}

.bottomInfoCircleBox::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: -12px;
    box-sizing: border-box;
    border: 10px solid black;
    border-color:  var(--main-color) var(--main-color) transparent transparent;
    transform-origin: 0 0;
    transform: rotate(135deg);
}

.bottomInfoCircleBoxContent {
	overflow-y:scroll;
	text-overflow:ellipsis;
	max-height:60vh;
	max-width:60vw;
	width:60vw;
}

.bottomInfoBoxLink:hover {
	background:#CCC;
}

.bottomInfoBoxLine {
	height:0px;
	border-bottom:1px solid #f3f3f3;
}

.notificationRow:hover, tr.linkButton:hover {
	background:#f6f6f6!important;
	cursor:default;
	transition:all .2s;
}

.detailsSwitcher:hover {
	cursor:default;
}

.offerSelectButton {
	padding:20px;
	width:auto;
	max-width:150px;
	text-align:center;
	color:var(--main-color);
	font-weight:400;
	font-size:16px;
	border-radius:5px;
	background:#FFF;
	padding:20px;
	-webkit-box-shadow: 0 0 3px #ccc;
	box-shadow: 0 0 3px #ccc;
	margin-right:10px;
	float:left;
}

.padding20px {
	padding:20px;
}

.padding10px {
	padding-left:15px;
}

.paddingLeft20px {
	padding-left:20px;
}

.paddingRight10px {
	padding-right:10px;
}

.paddingRight30px {
	padding-right:30px;
}

.padding15px {
	padding:15px;
}

.paddingBottom20px {
	padding-bottom:20px;
}

.widthAuto {
	padding:10px; 
}

.pulsateSmall {
    -webkit-animation: pulsateSmall 1.5s infinite;
    -moz-animation: pulsateSmall 1.5s infinite;
    -ms-animation: pulsateSmall 1.5s infinite;
    animation: pulsateSmall 1.5s infinite;
    -o-animation: pulsateSmall 1.5s infinite;
}






.fixedBottomBox {
	position:fixed;
	bottom:80px;
	right:20px;
	background:white;
	border-radius:5px;
	width:auto;
	max-width:70vw;
	max-height:50%;
	height:auto;
	z-index:900000;
	box-shadow: 0px 0px 6px 0 rgba(0, 0, 0, 0.2);
	overflow:auto;
	border-bottom:5px solid var(--main-color);
	display:none;
}

.fixedBottomBoxContent {
	overflow-y:scroll;
}


@-webkit-keyframes pulsateSmall {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0); }

  50% {
    box-shadow: 0px 0px 12px 0 rgba(0, 0, 0, 0.9); }

  100% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0); } 
}

@-moz-keyframes pulsateSmall {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0); }

  50% {
    box-shadow: 0px 0px 12px 0 rgba(0, 0, 0, 0.9); }

  100% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0); } 
}

@keyframes pulsateSmall {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0); }

  50% {
    box-shadow: 0px 0px 12px 0 rgba(0, 0, 0, 0.9); }

  100% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0); } 
}

.select-wrapper {
	margin: auto;
	max-width: 600px;
	width: calc(100% - 40px);
}

.select-pure__placeholder {
	font-size:11px;
}

.select-pure__select {
	align-items: center;
	background: #fff;
	border-radius:8px;
	border: 1px solid #ddd;
	box-sizing: border-box;
	color: #727272;
	cursor: default;
	display: flex;
	font-size:inherit;
	justify-content: left;
	padding: 2px;
	padding-left:8px;
	position: relative;
	transition: 0.2s;
	width: 100%;
	height:39px;
}

.select-pure__options {
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: 0px 0px 6px 0 rgba(0, 0, 0, 0.6);
	box-sizing: border-box;
	color: #727272;
	display: none;
	left: 0;
	max-height: 221px;
	overflow-y: scroll;
	position: absolute;
	top: 30px;
	z-index: 5;
}

.select-pure__select--opened .select-pure__options {
	display: block;
}

.select-pure__option {
	background: #fff;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;
	padding: 8px;
	transition:all .2s;
}

.select-pure__option:hover {
	background: #f8f8f8;
}

.select-pure__option--selected {
	color: #ccc;
	cursor: initial;
	default-events: none;
}

.select-pure__option--hidden {
	display: none;
}

.select-pure__selected-label {
	align-items: 'center';
	background: var(--main-color);
	border-radius: 4px;
	color: #fff;
	cursor: initial;
	display: inline-flex;
	justify-content: 'center';
	margin: 5px 10px 5px 0;
	padding: 3px 7px;
	font-size:10px;
}

.select-pure__selected-label-small {
	font-size:8px;
}

.select-pure__selected-label:last-of-type {
	margin-right: 0;
}

.select-pure__selected-label i {
	cursor: default;
	display: inline-block;
	margin-left: 7px;
	margin-top:4px;
}

.select-pure__selected-label img {
	cursor: default;
	display: inline-block;
	height: 18px;
	margin-left: 7px;
	width: 14px;
}

.select-pure__selected-label i:hover {
	color: #e4e4e4;
}

.select-pure__autocomplete {
	background: #f9f9f8;
	border-bottom: 1px solid #e4e4e4;
	border-left: none;
	border-right: none;
	border-top: none;
	box-sizing: border-box;
	font-size: 16px;
	outline: none;
	padding: 10px;
	width: 100%;
}

.select-pure__placeholder--hidden {
	display: none;
}

.select-pure__autocomplete {
	background: #fff!important;
    margin-bottom: 0px!important;
    line-height: 18px!important;
    height: 40px!important;
    padding-top: 5px!important;
}


.pageA4 {
	width:595px;
	height:842px;
	border:1px solid #ddd;
	float:left;
	transform-origin:top left;
	display:table-cell;
	background:#FFF;
}

.pageWithBG {
	background-image:url("../offer3.jpg");
	background-size:auto;
}


#offerWrapper .dashed {
	padding:10px;
	border:1px dashed #fff;
}

.draggable {
	cursor:default;
}

#offerHeader_Header {
	font-size:18px;
	font-weight:400;
}



@media only screen and (max-width:1900px) {

	.login-inputs-wrapper {
		max-width:70%!important;
	}

	.loginErrorMessage {
		width:calc(70% - 20px)!important;
	}

	.logoutMessage {
		width:calc(70% - 20px)!important;
	}

}

@media only screen and (max-width:1300px) {
	.spaceContainer {
		width: calc((100vw / 13) + .4em);
		height: calc((100vw / 13) + .4em);
	}

	.padding-40 {
		padding:0!important;
	}

	.loginlogo {
		position: relative!important;
		left: 0!important;
		top: 20px!important ;
	}

	.loginPanelWrapper {
		width:90%!important;
	}

	.login-language {
		left: calc(100% - 100px)!important;
	}

	.login-table {
		position: relative;
    	top: 25px;
	}

	.table, .table-row, .table-cell {
		display:table;
		width:100%!important;
		margin-bottom:10px;
	}

	.login-inputs-wrapper {
		max-width:90%!important;
		margin-top:80px!important;
	}

	.mobile-hide {
		display:none;
	}

	.mobile-100-height {
		height:100%;
	}

	.loginErrorMessage {
		width:calc(90% - 20px)!important;
	}

	.logoutMessage {
		width:calc(90% - 20px)!important;
	}

	input[type="text"], input[type="password"], input[type="number"], input[type="color"], input[type="file"], input[type="date"], input[type="time"], select, .custom-combobox-input {
		width:calc(100% - 30px);
	}

	.cellAnswerMobile {
		display:table-cell!important;
		width:50%!important;
	}

	.submitAnswerButton {
		left:calc(100% - 70px - 5vw);
	}

	.attachmentButton {
		left:-30px;
	}

	.divTextarea {
		width: calc(100% - 100px - 5vw);
		position: relative;
		left: 30px;
	}
	
}

@media only screen and (max-width:1200px) {
	.spaceContainer {
		width: calc((100vw / 14) + .4em);
		height: calc((100vw / 14) + .4em);
	}
}

@media only screen and (max-width:900px) {
	.spaceContainer {
		width: calc((100vw / 15) + .4em);
		height: calc((100vw / 15) + .4em);
	}
}

@media only screen and (max-width: 768px) {
	
	.body {
		overflow:hidden;
	}
	
	.doNotDisplayMobile {
		display:none!important;
	}
	
	#statusMessage {
		bottom:10px;
		width:calc(100% - 60px)!important;
		left:10px;
		height:15px;
	}
	
	.deleteButton {
		width:auto!important;
		margin-left:10px;
	}
	
	.leftPanel {
		position: absolute;
		top: 0;
		left: 10;		
		overflow: scroll; /*Disable scrollbars. Set to "scroll" to enable*/
		width:240px;
		margin-right:20px;
		z-index:11000;
	}

	.rightPanel {
		position: fixed;
		top: 0; 
		left:0px;
		right: 0;
		bottom: 0;
		width:calc(100% - 20px);
		overflow:hidden!important;
		overflow-y: scroll!important; 
		padding-bottom:0px; 
		padding-left:10px;
		padding-right:10px;
		padding-top:80px;
		z-index:11001;
		-webkit-box-shadow: 0 0 5px #161616;
		box-shadow: 0 0 5px #161616;
		background:#f4f4f8;
	}

	.topNameContainer {
		font-size: 18px!important;
   		 left: 37px;
	}
	
	.nachrichtMessage {
		margin-left:50px;
		width: calc(80% - 20px);
	}

	.nachrichtMessageAnswer { 
		margin-left: 10px;
		width: calc(80% - 20px);
	}
	
	.menuButton {
		width:30px;
		height:16px;
		position:fixed;
		top:10px;
		left:10px;
		z-index:22222299;
		padding-bottom:20px;
		margin-bottom:40px;
		cursor:default;
		display:none;
	}

	.bigContenteditable {
		font-size: 20px!important;
    	padding-top: 10px!important;
    	padding-left: 1px!important;
	}

	.menuButton span {
		display: block;
		width: 20px;
		height: 20px;
		cursor: default;
		border-radius: 0px;
		margin: 15% auto;
		-webkit-transition: all .7s ease, -webkit-transform .7s ease;
			  transition: all .7s ease, transform .7s ease;
		background: -webkit-linear-gradient(top, transparent 0%, transparent 20%, #2E313C 20%, #2E313C 25%, transparent 25%, transparent 48%, #2E313C 51%, #2E313C 55%, transparent 47%, transparent 76%, #2E313C 76%, #2E313C 80%, transparent 81%), -webkit-linear-gradient(transparent, transparent);
		background: linear-gradient(to bottom, transparent 0%, transparent 20%, #2E313C 20%, #2E313C 25%, transparent 25%, transparent 48%, #2E313C 51%, #2E313C 55%, transparent 47%, transparent 76%, #2E313C 76%, #2E313C 80%, transparent 81%), linear-gradient(transparent, transparent);
	}
	
	.menuButton span:active, .menuButton span:hover {
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
			transform: scale(0.9);
	}
	
	.menuButton span.clicked {
		background: -webkit-linear-gradient(135deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%);
		background: linear-gradient(-45deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%), linear-gradient(45deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%);
		-webkit-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
				transform: rotate(180deg);
	}
	
	.menuButton span.clicked:active, .menuButton span.clicked:hover {
		-webkit-transform: scale(0.9) rotate(180deg);
			-ms-transform: scale(0.9) rotate(180deg);
				transform: scale(0.9) rotate(180deg);
	}
	
	.greyedOut {
		width:100%;
		height:100%;
		position:fixed;
		top:0;
		left:0;
		filter:blur(3px);
	}
	
	.table, .table-row, .table-cell {
		display:table;
		width:100%!important;
		margin-bottom:10px;
	}
	
	.bgGrey {
		width:calc(100% - 20px)!important;
	}
	
	.standardButton {
		width:100%;
	}
	
	.standardInput {
		width:calc(100% - 30px)!important;
	}

	.searchFieldSpan {
		float:left; 
		right: 0;
		position: relative;
		top:15px;
		width:100%;
	}

	.h1SearchIcon {
		left:calc(100% - 30px);
		top:-40px;
	}
	
	.fileTable {
		border-spacing: 0px;
		border-collapse: separate;
	}
	
	.fileCell {
		width:calc(100% - 20px)!important;
	}
	
	.systemMessage {
		width:calc(100% - 20px);
	}
	
	.noLineBreak {
		width:75%!important;
		display:table-cell!important;
	}
	
	.systemNotificationWrapper {
		position:fixed;
		right:10px;
		left:10px;
		bottom:20px;
		display:block;
		width:auto;
		z-index:1000000;
		text-align:right;
	}

	.systemNotification {
		width:auto;
		line-height:20px;
		z-index:10000000;
		padding:20px;
		font-weight:400;
		color:#FFF;
		background:var(--main-color);
		border-radius:5px;
		-webkit-box-shadow: 0 0 5px #999;
		box-shadow: 0 0 5px #999;
		display:table;
		margin-top:10px;
		position:relative;
		margin-left:auto;
	}

	.systemNotificationDynamic {
		width:calc(100% - 20px);
		line-height:20px;
		font-weight:400;
	}
	
	.label {
		display:table;
	}
	
	input[type="text"], input[type="password"], input[type="number"], input[type="color"], input[type="file"], input[type="date"], input[type="time"], select, .custom-combobox-input {
		width:calc(100% - 30px);
	}
	
	.infoPanelRight {
		width:calc(90% - 30px);
	}
	
	.cellAnswerMobile {
		display:table-cell!important;
		width:50%!important;
	}

	.padding-40 {
		padding:0!important;
	}

	.loginlogo {
		position: relative!important;
		left: 0!important;
		top: 20px!important ;
	}

	.loginPanelWrapper {
		width:90%!important;
		top:4vh!important;
	}

	.login-language {
		left: calc(100% - 100px)!important;
	}

	.login-table {
		position: relative;
    	top: 25px;
	}

	.login-inputs-wrapper {
		max-width:80%;
	}

	.cv-table-row {
		display:table-row!important;
		word-break: break-all;
	}

	.cv_table_cell {
		display:table-cell!important;
	}

	.mobileRow {
		display:table-row;
	}

	.topSearchInput {
		display:none!important;
	}

	.flex-container {
		width:100%;
	}

	.flex-item {
		flex: 1 0 calc(100% - 40px)!important;
		height: 150px!important;
		max-width:100%!important;
		margin:0!important;
		margin-bottom:20px!important;
	}

	.alignRight {
		text-align: left!important;
	}

	.submitAnswerButton {
		left:calc(100% - 83px - 5vw);
	}

	.attachmentButton {
		left:-17px;
	}

	.divTextarea {
		width: calc(100% - 100px - 5vw);
		position: relative;
		left: 30px;
	}

	.left {
		left:-70px;
	}

	.navigation {
		left:10px;
	}
}



.flex-container {
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

.flex-item {
    flex: 1 0 calc(11% - 20px);
    height: 150px;
	max-width:150px;
    border-radius: 8px;
    display: grid;
    align-items: center;
    margin: 10px;
    color: #4d4d4d;
    padding: 10px;
	text-align: center;
}

.space {
	border:3px solid #f6f6f9;
	background:#f6f6f9;
}

.space:hover {
	transition:all .2s;
	background:var(--main-color)!important;
	color:#fff;
	cursor:default;
}

.spaceSpan {
	overflow: hidden;
	text-overflow: ellipsis;
}

.sortable-placeholder {
    border:3px dashed var(--main-color);
}




.login-body {
	background:#b3b3b3;
	letter-spacing: 0;
}

.login-loading {
	width: 100%;
    height: 100%;
    background: #fbfbff;
    position: fixed;
    top: 0;
    left:0;
    backdrop-filter: blur(5px);
    display: none;
    vertical-align: middle;
    line-height: 100%;
    text-align: center;
    color: var(--main-color);
    font-size: 10px;
    z-index: 999999999999;
}

.login-loading-icon {
	margin: 0px auto;
    position: absolute;
    width: 20px;
    height: 20px;
    left: calc(50% - 10px);
    z-index: 2001;
    top: calc(50% - 10px);
}

.loginlogo {
    height: 120px;
    background-size: auto 120px;
    position: relative;
    top: -40px;
}

.login-legal {
	position:absolute;
	top:calc(100% - 50px);
	left:40px;
	font-size:12px;
	z-index:9999;
	pointer-events: all;
}

.login-language {
	position:absolute;
	top:calc(100% - 50px);
	left:calc(100% - 100px);
	font-size:12px;
	z-index:9999;
}

.login-image {
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left 50%;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.login-image-1 {
	background-image:url("../pictures/login-picture-5.jpg");
}

.loginPanelWrapper {
    width: 60vw;
	height:70vh;
    margin: 0px auto;
    position: relative;
    top: 15vh;
	background:#fff;
	border-radius:5px;
	box-shadow:0px 0px 10px rgb(119, 119, 119);
}



.loginPanel {
	background: #fff;
    border-radius: 10px;
    /*
	padding: 20px;
	border: 1px solid #e6e6e6;
	*/
}

.loginInput {
	/*width:70%!important;*/
    border-radius: 5px;
    padding: 10px!important;
	padding-top:15px!important;
	padding-bottom:15px!important;
    margin-bottom: 15px!important;
	border:1px solid #e6e6e6!important;
	transition:all ease .2s;
	line-height:30px;
	/*margin-bottom: -20px;
	padding-left:40px;*/
}

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color:#ccc;
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color:#ccc;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
	color:#ccc;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:#ccc;
}

textarea::placeholder {
	color: #ccc;  
}

.login-inputs-wrapper {
	max-width:40%; 
	margin:0 auto;
}

.loginButton {
	/*width:calc(70% + 20px);*/
	width:100%;
    border-radius: 5px;
    padding: 10px;
	padding-top:18px;
	padding-bottom:18px;
	background:var(--main-color);
	color:#fff;
	font-weight:18px;
	transition:all .2s;
	font-weight:400;
	border:none;
}

.loginButton:hover {
	background:#000;
	color:#fff;
	cursor:default;
}



.loginErrorMessage {
	width: calc(40% - 20px);
    background: var(--red);
    color: #fff;
    font-weight:400;
    padding: 10px;
	padding-top:15px;
	padding-bottom:15px;
    border-radius: 5px;
    position: relative;
    top: 10px;
    text-align: center;
	margin:0px auto;
}

.logoutMessage {
	width:calc(40% - 20px);
    background: #2fffb4;
	color:#000;
}

.padding-40 {
    padding: 40px;
}

.height-100 {
    height: 100vh;
    margin-bottom: 0px!important;
}

.row-container-helper {
	min-height:40px;
}


.radioLabel {
	display: inline-grid;
	cursor: pointer;
	font-weight: 500;
	position: relative;
	overflow: hidden;
	margin-bottom: 15px;
    margin-right: 15px;
    margin-top: 5px;
	/* Accessible outline */
	/* Remove comment to use */
	/*
	  &:focus-within {
		  outline: .125em solid $primary-color;
	  }
	*/
  }

 .radioLabel input {
	position: absolute;
	left: -9999px;
  }

.radioLabel input:checked + span {
	background-color: var(--main-color-light);
  }
.radioLabel input:checked + span:before {
	box-shadow: inset 0 0 0 0.4375em var(--main-color);
  }
  .radioLabel span {
	display: flex;
	align-items: center;
	padding: 0.375em 0.75em 0.375em 0.375em;
	border-radius: 99em;
	transition: 0.25s ease;
  }
  .radioLabel span:hover {
	background-color: var(--main-color)54;
  }
  .radioLabel span:before {
	display: flex;
	flex-shrink: 0;
	content: "";
	background-color: #fff;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	margin-right: 0.375em;
	transition: 0.25s ease;
	box-shadow: inset 0 0 0 0.125em var(--main-color);
  }

input[type=file]{
    display:none;
}

.fileLabel {
	padding: 10px;
    border-radius: 5px;
    background: var(--main-color);
    color: #fff;
    display: inline-block;
    margin-top: 10px;
	margin-bottom:10px;
}

.smallFileLabel {
	font-size:14px;
	padding:5px;
}

.chatFileLabel {
	background:transparent;
}

.showAttachmentNumber {
	padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--red);
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    position: absolute;
    top: 20px;
    left: 25px;
    font-size: 12px;
	display:none;
}

.statusBubble {
	color: #f6f6f9;
    background: var(--main-color);
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50px;
	margin-bottom:15px;
}

.statusBubbleWraper {
    display: table-cell;
	max-width:120px;
	padding: 20px;
}

.statusBubbleContainer {
    display: table-row;
}

.statusText {
    display: table-row;
	color:var(--main-color);;
}

.statusTop {
	min-height:30px;
	min-width:150px;
}

.statusBottom {
	min-height:50px;
	vertical-align: middle;
}

.flex {
	display:flex;
}

.flex_select_100 {
	width:100%!important;
}

.widget_small_select {
	border-width: 1px!important;
    border-color: var(--theme-color)!important;
    font-size: 1rem;
    height: 44px!important;
    line-height: 44px!important;
	color:var(--color)!important;
}

.flex-wrap {
	flex-wrap:wrap;
}

.align-content-flex-start {
	align-content:flex-start; 
}

.justify-content-center {
	justify-content: center;
}

.justify-content-flex-end {
	justify-content: flex-end;
}

.flex-item-dashboard-5 {
	flex:1 1 calc(5% - 50px);
}

.flex-item-dashboard-10 {
	flex:1 1 calc(10% - 50px);
}

.flex-item-dashboard-15 {
	flex:1 1 calc(15% - 50px);
}

.flex-item-dashboard-20 {
	flex:1 1 calc(20% - 50px);
}

.flex-item-dashboard-25 {
	flex:1 1 calc(25% - 50px);
}

.flex-item-dashboard-30 {
	flex:1 1 calc(30% - 50px);
}

.flex-item-dashboard-33 {
	flex:1 1 calc(33% - 50px);
}

.flex-item-dashboard-40 {
	flex:1 1 calc(40% - 50px);
}

.flex-item-dashboard-50 {
	flex:1 1 calc(50% - 50px);
}

.flex-item-dashboard-55 {
	flex:1 1 calc(55% - 50px);
}

.flex-item-dashboard-60 {
	flex:1 1 calc(60% - 50px);
}

.flex-item-dashboard-70 {
	flex:1 1 calc(70% - 50px);
}

.flex-item-dashboard-75 {
	flex:1 1 calc(50% - 50px);
}

.flex-item-dashboard-95 {
	flex:1 1 calc(95% - 50px);
}

.flex-item-dashboard-100 {
	flex:1 1 calc(100% - 50px);
}

.flex-item-dashboard-container {
	display:flex;
	align-items:flex-start;
	width: 100%;
    padding: 20px;
	gap:30px;
	overflow: auto;
}

.flex-inner-container {
	display:block;
	padding:20px;
	width:calc(100% - 40px);
}

.flex-gap-10 {
	display:flex;
	gap:10px;
	flex-wrap:wrap;	
    padding: 10px;
    border-radius: 8px;
}

.gap-10 {
	gap:10px;
}

.flex-50 {
	flex:1 1 50%;
}

.flex-33 {
	flex:1 1 33%;
}

.flex-grow {
	flex-grow:1;
	
}

.flex-animated {
	transition: flex-grow 500ms linear;
}

.flex-removed {
	flex-grow:0.00001;
}

.width-auto {
	width:auto!important;
}

.gap-2 {
	gap:2px;
}

.gap-4 {
	gap:4px;
	padding:4px;
}

.bg-bg {
	background: var(--bg);
}

.marginBottom10 {
	margin-bottom:10px;
}

.flex-grow-shrink-auto {
	flex:1 1 auto;
}

.flex-no-grow-shrink-auto {
	flex:0 1 auto!important;
}

.flex-item-dashboard-fixed {
	flex: 0 0 100px;
}

.flex-item-dashboard-column {
	flex-direction: column;
	display:flex;
	flex-grow:1;
	justify-content: space-evenly;
}

.small-selector-auto-width {
    display: flex;
    min-width: 100px;
    justify-content: center;
    flex: 0 1 auto;
    align-items: center;
}

.small-selector {
    width: auto;
    font-family: "Poppins";
    border: 1px solid var(--main-color);
    color: var(--color);
    transition: all ease 0.2s;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    display: flex;
    justify-content: space-evenly;
    cursor: default;
}

.small-selector-active, .big-selector-active, .selector-active {
    background: var(--main-color);
    color: #fff;
}

.is_child {
	text-indent: 10px;
}