/* Spinning loading Icon*/
.loader-container {
    background: #ffffffaa;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    top: 0;
    z-index: 69;
}

.loader {
    --loader-color: #000000aa;
    --loader-size: 40px;
    --loader-speed: 1.5s;
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.loader:after {
    animation: loader-animation var(--loader-speed) linear infinite;
    color: var(--loader-color);
    font-family: "Material Icons";
    font-size: var(--loader-size);
    content: "\e863";
    height: var(--loader-size);
    width: var(--loader-size);
}

@keyframes loader-animation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./properties4.woff2") format("woff2"), url("./properties5.woff") format("woff");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}
/* roboto-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./properties.woff2) format('woff2'), url(./properties3.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* roboto-cyrillic-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./properties2.woff2) format('woff2'), url(./properties.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* roboto-greek-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAXMABIAAAAACeAAAAVwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGiYbIBw2BmAANAhUCYM8EQwKg2iDSgsQABIUATYCJAMcBCAFgnQHIAyCSRt8CAieB2WbnmbLuYAwwpK8+iIe4P3r89wHDZaakNWCmB8R66SEWr+ILhpijnTqf6QAyyF8GVAOAPOWtmNg6llFXANTaQXCgXMubThOj6JRPCJsEWW3o1/4wX411uruvta/9FF8Zz50qenu3hVxmf4QIi1dRSzhkcR0SqA1QoiwzI2uAUbffgtBpA0YCssEQRChiaaAgMpAFvDsmKQshIEEer1l/u1J0Sbi8P6OJsQc3VHd6N0nlHe1MAhFbvPNcXJVWKNNekPqCYVx/lj8nqMi5BY4Pd6hectSY5E2Lll8SMf/HJXfEKEOfCtEMjEFBEHtpSkbjBK4aB1MIEjT/t9z/+W3j8FgVyeNWdDn7wh7b19l7pQoyFW8FXcx+P9D4NE2ErMMk4kskmVMCiwyG5ZhhyC7qZ19JoMatwj00/I0GG/uexT/v7K+Ysx9JXVwiRoC1yHR9VGAy9QQcXVQbqOGmOvEACWZm5EnyicLnfULjlggc0ldeRXQEqImnlS9kL8XAZndegKyuixM77OP24/Mzw9QQ7Kfha4v9OEOadjJ0qBYxN896pRbZI6ly/PS82Bs9iiYPpuaWJZEw83lXbg5G5JRslr2VFWPDtfbPBryeqZk5eKg/CqRD2Oz8tcvgJMiFi4RC6PWb9fnkzx74cWAeELYJFCSObI1tnxBfqwo2lPppazn26eGKDWU3KLMvOioppPNX6y4euc5FBq4y6Emd99OYa6zfpnpUhjE4Y/qoWtWQ4tIHr845ZA6bDc+AOSaR/sb6c9Otrh6uj3cUdDVKESNWgCK/GzxKQiLFKJeTz+QgzZKTIUcA2Nz9h2ppBhtbSQxfsjAtk4xoD1oes5gXYPe8UWmx+HjwQeNPfi2Wv/952vDpV/80Njw3WfWXv5IL3662ucz8dd9se78QkPd6ihDH61ZfS/s/KK0fjE+sgih+YDL5pz1vnH249tjfOAcLqZOTdvY/3jL1Hy3vqvcu358ODj2/etmVHfcdW+1t2X6R08H6p3BTzz87uDo6/H/vD/2scffaEf/ThphsXX6jLtDvp7cx6bvFUbnpWbFBWgOekJEip6LgFz63wtE+H/fXrpM++P7m8wAgZk/NJnacWXJLOW1rWO16C5ouY7SRE5T8x0iJ7MpntZyQJtPS2tuKXZpKqNf728OLK1FiJj72rq99z4Ho7G9hTQm0sqlhiEBKlWXfTDq1zbQcaP1HosN1zo/TqWGAGGywdQJhaSfHo9wDdfhs78cJKBZ5glRluQQEG030P7t9IdL+03+rRhRIHjxxwF7IsRHYeWXv0f991G5d9GJAKUIBPIT/jUpF/wa9f/Ccm9YiMnjjap8MPxDeomeuKM1ffn/fWHktrCSBT3iY20i0fZ0BBSOAgtJiYMAUDBoOigYaTtuMB4PJjiY2lFfMDPaqZe2rfYTKVcYVUK+QIPiwY175iFi5Yq4Em50vIyNq4cbYFLL2Fyqwbe4aq5Kx+XgZMhZco180ZCv3b5iqtyXD9VCUsquRpcNT74CH3LW95hzWKkvV3KxoHLNhF5fxylXMNkCLk6rio/XJGRzZWquGi/JysTM3sUM+4wfckMBveM4zKV1U1VT4QMTqQI/IFSPuDBgopvEnkF6u7kQ4gJdWIvWjkeivDg/OWNxRqSXxIolJclBKluW+uwutDVlWXtxjIc9y9fPPiBAxIqR2jR/O1ZmRftILVjVU5bo4zjbmDxi6XLWfHj/+sMns5ZFfyP9jLWD9pU5CFi/MC+Fo8Vo/+XhjzuFH9jQ3a32p2/nQ0fiTr60oFFwFV18KrXSKp2m/+AsuvlQKqXRIVOncITG9B6cRRdfSqt0RP8hVHTzrZOuHdwJDHdwJwA=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAATgAA4AAAAABVwAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABRAAAAB8AAAAmAEYABkdQT1MAAAFkAAAAIAAAACBEcExrR1NVQgAAAYQAAAA2AAAANpMNggRPUy8yAAABvAAAAE0AAABgk1Pg+GNtYXAAAAIMAAAAKQAAADQAER+gZ2FzcAAAAjgAAAAMAAAADAAIABNnbHlmAAACRAAAARQAAAEUnMv0r2hlYWQAAANYAAAANgAAADb8atJ6aGhlYQAAA5AAAAAfAAAAJAq6BadobXR4AAADsAAAABwAAAAcE+3/e2xvY2EAAAPMAAAAEAAAABAA0AE9bWF4cAAAA9wAAAAgAAAAIAI3AwluYW1lAAAD/AAAAM0AAAF0GlU5EHBvc3QAAATMAAAAEwAAACD/bQBkeNpjYGRgYuBjgAAxII8NiEGQCcjnAWEgmwEABhIATQAAAQAAAAoAEgAUAAFERkxUAAwAAAAAAAQAAAAA//8AAAABAAAACgAkACYABERGTFQAHmN5cmwAImdyZWsAImxhdG4AIgAAAAAACAAAAAAAAAAA//8AAAAAeNpjYGZpY5zAwMrAwDqL1ZiBgVEeQjNfZEhjYmBgAGIocGBABe7+/u4MDvK+8r5sDP8YGNLYZzExKDAwzgfJsVixbmBQAEJmAPBXCrcAAAB42mNgYGACYmYgFgGSjGCahUEBSLMAIZAv7/v/P4R8sBMszwAAVmAGzQAAAAABAAIACAAC//8ADwAFAGQAAAMoBbAAAwAGAAkADAAPAAAhIREhAxEBAREBAyEBNQEhAyj9PALENv7u/roBDOQCA/7+AQL9/QWw+qQFB/19Anf7EQJ4/V4CXogCXgAAAgB2/+wFCQXEABEAHwAAARQCBCMiJAInNTQSJDMyBBIVJxACIyICBxUUEjMyEjcFCZD++LCs/vaTApIBC6yvAQuQv9C7ttED07m6zAMCqdb+waipATnOadIBQqup/r/VAgEDARX+6/Zr+/7hAQ/9AAIAbwRwAskF1gAFAA0AAAETMxUDIwEzFRYXByY1AZF0xN9Z/t6oA1BJsgSUAUIV/sMBUlt7VTtfu////jL/7AVPBdYAJgAERgAABwAF/cMAAAABAAAAAiMS6JlwgF8PPPUAGQgAAAAAAMTwES4AAAAA1QFS9Pob/dUJMAhzAAAACQACAAAAAAAAeNpjYGRgYM/5x8PAwOn5S/qfF6cBUAQVsAMAb4UEbwADjABkAAAAAAAAAAAB+wAABYAAdgMgAG8Fxv4yAAAAKQApACkAKQBhAH4AigABAAAABwCPABYAVAAFAAEAAAAAAA4AAAIAAiQABgABeNpdjgNyAwAURF/tXqAcdVQbgzo2hrFtXSYHyemyMeabu8A2SdZYWd8BgjDOV9gnOM5XOSQ7ztfm+utz+QYXtMf5Jsd0x/khXnr8UKJMhyoZUqSpc849t9xJzjFQkqTIk1BlokiMa2Vf5CXnuKdXtWGVoCar0pSPc61OiaisLtOUFA3yRKjiH+7VyFCiOMS85o4HXviYMnhZuL9a+iBUSZl3biStoVxrUpbFNE2oKlElpWmejHoJitRIyG6wYuKHP+x45K+G+Ld9LnwzhgAAAHjaY2BmAIP/WQwpDFgAACofAdEA) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* roboto-greek-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./properties6.woff2) format('woff2'), url(./properties7.woff) format('woff');
  unicode-range: U+0370-03FF;
}

/* roboto-vietnamese-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./properties3.woff2) format('woff2'), url(./properties2.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* roboto-latin-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./properties5.woff2) format('woff2'), url(./properties4.woff) format('woff');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* roboto-latin-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./properties7.woff2) format('woff2'), url(./properties6.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}* {
	box-sizing: border-box;
	font-family: "Roboto", Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

:root {
    --main-blue: #047fb2;
    --main-blue-two-thirds: #047fb2aa;
    --secondary-blue : #3d5568;
    --main-gray: #282e34;
    --main-gray-two-thirds: #282e34aa;
    --secondary-gray: #2d2d32;
    --secondary-gray-two-thirds: #2d2d32aa;
    --tertiary-gray: #727272;
    --tertiary-gray-two-thirds: #727272aa;

    --background-color-dark-gray: #181818;
    --background-color-dark: #191f26;
    --background-color-light: #efefef;

    --border-color-gray: #5a5a5a;
    --border-color-light: #d9d9d9;
    --border-color-dark: #3d3d3d;

    --error-red: #c70000;
    --error-red-light: #ff0000;

    --main-green: #04b265;
}

button {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
}

#root {
	padding: 8px;
}

.properties-box-container {
	position: relative;
	min-width: 280px;
}

.properties-box {
	background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 4px;
	color: #3d3d3d;
	display: flex;
	flex-direction: column;
	position: relative;
}

.properties-box-top {
	padding: 4px 8px;
}

.properties-box-middle {
	background: linear-gradient(to top, #e0eaf2 90%, #ffffff);
	display: flex;
	flex-direction: column;
	padding: 12px 12px 0;
}

.properties-box-bottom {
	background-color: #e0eaf2;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 0 12px 12px;
	position: relative;
}

.properties-box-bottom button.add {
	align-self: flex-end;
	background-color: var(--main-blue);
	border: 1px transparent;
	border-radius: 100%;
	box-shadow: 0px 2px 2px -1px #00000033;
	color: #ffffff;
	height: 32px;
	font-size: 0;
	transition: box-shadow .25s ease-in-out;
	width: 32px;
}

.properties-box-bottom button.add:active {
	box-shadow: inset 0 0 3px 2px #666666ab;
}

.properties-box-bottom button.add:before {
	font-family: "Material Icons";
	content: "\e729";
	font-size: 20px;
}


/*** Properties Card ***/
.properties-card {
	background-color: #ffffff;
	border-radius: 8px;
	margin-bottom: 8px;
	position: relative;
}

.properties-card h4 {
	padding: 8px 12px 0;
}

.properties-card .card-info {
	display: flex;
	flex-direction: column;
	font-size: 0.9rem;
	padding: 0px 12px 8px;
}

.properties-card button.edit {
	border: 1px transparent;
	color: #3d3d3d;
	font-size: 0;
	position: absolute;
	top: 8px;
	right: 8px;
}

.properties-card button.edit:before {
	font-family: "Material Icons";
	content: "\e3c9";
	font-size: 18px;
}

.properties-notes {
	font-size: 0.9rem;
}
.properties-notes-header {
	color: var(--main-blue);
	cursor: pointer;
	display: flex;
	font-weight: 500;
	padding: 4px 12px 4px;
}
.properties-notes-header:after {
	align-self: center;
	content: "\e5cf";
	font-family: "Material Icons";
	margin-left: auto;
}
.expanded .properties-notes-header:after {
	content: "\e5ce";
}

/*** Properties box - accordion for notes ***/
.properties-notes-body {
	padding: 4px;
	visibility: collapse;
}

.properties-notes-body > div {
	height: 0px;
	transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.expanded .properties-notes-body {
	padding: 8px 12px;
	transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 200ms;
	visibility: visible;
}

/*** Properties Form ***/
.properties-box-edit-container {
	background: linear-gradient(to top, #e0eaf2 90%, #ffffff);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
	z-index: 99;
}

.properties-box-edit {
	background-color: #ffffff;
	border-radius: 8px;
	margin: 12px;
	padding: 12px;
}

.properties-box-edit h2 {
	margin-bottom: 8px;
}

.properties-box-edit label {
	color: #b0b0b0;
	display: block;
	font-size: 0;
    line-height: 12px;
	margin-bottom: 8px;
	position: relative;
}

.properties-box-edit label:before {
	content: attr(data-label);
	font-size: 1rem;
	transform: translate(0, 22px);
	position: absolute;
	transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), font-size 200ms cubic-bezier(0, 0, 0.2, 1);
}
.properties-box-edit label[data-required]:before {
	content: attr(data-label)"*";
}

.properties-box-edit label.focused:before,
.properties-box-edit label.valued:before {
	color: blue;
	font-size: 0.7rem;
	transform: translate(0,0);
}

.properties-box-edit label.valued:before {
	color: inherit;
}

.properties-box-edit input[type=text] {
	border: solid #000000;
	border-width: 0 0 1px 0;
	display: block;
	height: 32px;
	font-size: 1rem;
	width: 100%;
}

.properties-box-edit div[contentEditable] {
	border: solid #000000;
    border-width: 0 0 1px 0;
	color: #000000;
	cursor: text;
    display: block;
    font-size: 1rem;
	line-height: 1.1;
    min-height: 32px;
	outline: 0;
	padding-top: 8px;
	position: relative;
    width: 100%;
	word-break: break-word;
	z-index: 1;
}

.properties-box-edit input[type=text]:focus {
	outline: 0;
	border-color: blue;
	border-bottom-width: 2px;
}

.properties-box-edit label.error-required {
	color: #c70000;
}
.properties-box-edit label.error-required input[type=text] {
	border-color: #c70000;
}

.properties-box-edit-container .button-row {
	display: flex;
	column-gap: 8px;
    justify-content: flex-end;
	padding: 4px 12px 12px;
}

.properties-box-edit-container button {
	align-self: flex-end;
    background-color: var(--main-blue);
    border: 1px solid transparent;
    border-radius: 4px;
	box-shadow: 0px 2px 2px -1px #00000033;
    color: #ffffff;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 2;
	padding: 0px 12px;
    transition: box-shadow .25s ease-in-out;
	text-transform: uppercase;
}

.properties-box-edit-container button:hover {
	box-shadow: 0px 4px 7px -1px #00000033;
}

.properties-box-edit-container button:active {
	box-shadow: inset 0px 2px 8px -1px #00000033;
}

.properties-box-edit-container button.cancel-btn {
	background-color: #ffffff;
	border-color: var(--main-blue);
	color: var(--main-blue);
}
.properties-box-edit-container button.delete-btn {
	align-self: center;
	background: transparent;
	box-shadow: none;
	color: var(--main-blue);
	font-size: 0.75rem;
	line-height: normal;
	margin: 0 auto 0 12px;
	padding: 0;
	text-align: left;
	text-transform: none;
}