.shadowing {
	/* Add shadows to create the "card" effect */
	box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
	transition: 0.3s;
	margin-top: 20px;
	padding-bottom: 20px;
	border: 1px solid rgb(245, 245, 245);
	padding-left: 40px;
	padding-right: 40px;
}

.shadownav { 
	box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
}

.login-root .h1 {
	  letter-spacing: -1px;
	  color: rgb(236, 43, 43);
}

.login-root {
	  background: #fff;
	  display: flex;
	  width: 100%;
	  min-height: 100vh;
	  overflow: hidden;
}

.loginbackground {
	  min-height: 692px;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  top: 0;
	  z-index: 0;
	  overflow: hidden;
}

.flex-flex {
	  display: flex;
}

.box-root {
	  box-sizing: border-box;
}

.flex-direction--column {
	  -ms-flex-direction: column;
	  flex-direction: column;
}

.padding-top--64 {
	padding-top: 64px;
}

.padding-top--24 {
	padding-top: 24px;
}

.padding-top--48 {
	padding-top: 48px;
}

.padding-bottom--24 {
	padding-bottom: 24px;
}

.padding-horizontal--48 {
	padding: 48px;
}

.padding-bottom--15 {
	padding-bottom: 15px;
}

.flex-justifyContent--center {
	-ms-flex-pack: center;
	justify-content: center;
}
  
.formbg {
	margin: 0px auto;
	width: 100%;
	max-width: 448px;
	background: white;
	border-radius: 4px;
	box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
}

.span {
	display: block;
	font-size: 20px;
	line-height: 28px;
	color: #1a1f36;
}

.label {
	margin-bottom: 10px;
}

.grid--50-50 {
	display: grid;
	grid-template-columns: 50% 50%;
	align-items: center;
}
  
.field input {
	font-size: 16px;
	line-height: 28px;
	padding: 8px 16px;
	width: 100%;
	min-height: 44px;
	border: unset;
	border-radius: 4px;
	outline-color: rgb(84 105 212 / 0.5);
	background-color: rgb(255, 255, 255);
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
				rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}
  
input[type="submit"] {
	background-color: rgb(236, 43, 43);
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, 
				rgb(236, 43, 43) 0px 0px 0px 1px, 
				rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: 0.2s;
}

input[type="submit"]:hover {
	color: rgb(236, 43, 43);
	background-color: white;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, 
				rgb(236, 43, 43) 0px 0px 0px 1px, 
				rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
				rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
	font-weight: 600;
	cursor: pointer;
	border: rgb(236, 43, 43);
}

/* General */

.plain {
	color: black;
}

.plain:hover {
	text-decoration: none;
	color: black;
}

/* Cards */
.card {
	/* Add shadows to create the "card" effect */
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
}
  
/* On mouse-over, add a deeper shadow */
.card:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
  
/* Add some padding inside the card container */
.container {
	padding: 2px 16px;
}




/* File-Tree */

ul#filefolder_tree,
#filefolder_tree ul {
	list-style-type: none;
}
ul#filefolder_tree{
	margin: 0;
	padding: 0;
}
#filefolder_tree .caret {
	cursor: pointer;
	user-select: none; 
}
 
#filefolder_tree .selected {
	background-color:rgb(0, 119, 255);
	color: white;
	border-radius: 4px;
	padding: 2px;
}

#filefolder_tree .caret::before {
	content: "\25B7";
	color: black;
	display: inline-block;
	margin-right: 6px;
}
#filefolder_tree .caret.has-child::before {
	content: "\25B6";
	color:black;
}
  
#filefolder_tree .caret-down::before {
	transform: rotate(90deg);
}

#filefolder_tree .nested {
	display: none;
}
  
#filefolder_tree .active {
	display: block;
}

.buttons .dropdown {
	cursor: pointer;
}


/* Objects */

.componentrow {
	display: table-row;
}

.form-check {
	padding-left: 0px;
}

#existing-attachments {
	padding-left: 0px;
}

.existing-attachments-li {
	background: var(--fieldset-bg);
	border: var(--border-width) var(--border-style) var(--border-color);
	border-radius: var(--border-radius);
	margin: 10px 0;
	padding: 10px 20px 15px;
}

legend.required::after,
label.required::after {
	content: ' *';
	color: red;
}