body {
    background: #EEE;
    color: #222;

    --color-false: #b31515;
    --color-true: #10801a;
}


html, body { padding: 0; margin: 0; height: 100%; }
a { text-decoration: none; color:inherit; }
h1 { padding: 0; margin: 0 0 20px 0; font-size: 20px;  }

.icon { display: inline-block; cursor: pointer; width: 16px; height: 16px; background-position: center center; background-size: contain; background-repeat: no-repeat; }
.icon.gear { background-image:url('/assets/images/gear.svg'); }
.icon.plus { background-image:url('/assets/images/plus.svg'); }
.icon.search { background-image:url('/assets/images/search.svg'); }


.empty { opacity: 0.6; font-style: italic; font-size: 90%; }

input, textarea { display: block; width: 100%; resize:none; padding: 8px; box-sizing: border-box; border:1px solid #EEE; border-radius: 4px; }
textarea { min-height:100px; }


header { display: block; padding: 10px 20px; color: #444; border-bottom: 1px solid #BBB; background: #FFF; }
.main { display: flex; width: 100%; min-height: 100%; align-items: stretch; }
.main > div:first-child { width: 200px; padding: 20px; border-right: 1px solid #BBB; }
.main > div:last-child { flex:1; padding: 20px; }
.main .menu a {padding-left: 10px; display: block; margin-bottom: 15px; font-size: 18px; }
.main .menu .title { margin-top: 20px; font-weight: bold; padding-left: 0px; }
.main .menu .title:first-child { margin-top: 0; }


.breadcrumb { list-style: none; padding: 0 0 20px 0; margin: 0; }
.breadcrumb li { margin-right: 5px; display: inline-block; }
.breadcrumb li:after { content:'>'; padding-left: 10px; font-size: 70%; margin-right: 5px; display: inline-block; }
.breadcrumb li:last-child:after { display: none; }

.projectsdiv { display: flex; width: 100%; align-items: stretch; gap: 30px; flex-wrap: wrap; }
.projectsdiv > * { display: block; padding: 60px; border:2px solid transparent; background:#FFF; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); position: relative; min-width: 80px; text-align: center; }
.projectsdiv .title { display: block; position: absolute; padding: 15px; text-align: center; left: 0; right: 0; bottom: 0; font-size: 14px; }
.projectsdiv .amount { position: absolute; right:15px; bottom: 15px; padding:3px 5px; font-size: 12px; color: #FFF; font-weight: bold; background: blue; border-radius: 2px; min-width: 16px; text-align: center; }
.projectsdiv .icon { position: absolute; left:15px; bottom: 15px; z-index: 5; }
.projectsdiv .img { position:absolute; top: 20px; left: 20px; right: 20px; bottom: 55px; background-position: center center; background-size: contain; background-repeat: no-repeat; }
.projectsdiv > .newproject { border-style: dashed; }
.projectsdiv > .newproject img { display: block; width: 40px; margin: auto; }


.collectiondata .cell { background:#FFF; margin-bottom: 30px; }
.collectiondata .head { padding:10px; border-bottom: 1px solid #EEE; display: flex; align-items: center; }
.collectiondata .head > * { flex: 1; text-align: left; }
.collectiondata .head > *:last-child { text-align: right; }
.collectiondata .head:last-child { border:none; }
.collectiondata .head .name { font-weight: bold; }
.collectiondata .head .type { font-size: 90%; padding: 2px 5px; background-color: #EEE; border-radius: 2px; margin-left:10px; }
.collectiondata .head .type a { color: #0f85b4; }
.collectiondata .head .required { float: right; font-size: 90%; color:var(--color-false); }
.collectiondata .body { padding: 10px; }

.collectionentriestbl { background: #FFF; border: 0; border-collapse: collapse; width: 100%; }
.collectionentriestbl td, .collectionentriestbl th { padding: 10px 14px; border-bottom: 1px solid #CCC; text-align: left; }
.collectionentriestbl th { border-bottom-width: 3px; font-weight: bold; }
.collectionentriestbl tr:last-child td { border-bottom: none; }
.collectionentriestbl .action { width:30px; text-align: right; }

.collectionentry { background:#FFF; padding:30px; }
.collectionentry .cell { padding: 5px 15px; margin-bottom: 30px; display: flex; width: 100%; flex-direction: column; gap:10px; border-left: 2px solid #CCC; }
.collectionentry .cell > *:first-child { font-weight: bold; }
.collectionentry .cell > *:last-child { flex:1; }
.collectionentry .cell:last-child { margin:0; }
.collectionentry input, .collectionentry textarea { border:none; border-bottom: 1px solid #CCC; border-radius: 0; }


.checkbox { display: block; margin-top: 2px; }
.checkbox input { display: none; }
.checkbox label { cursor: pointer; position: relative; display: inline-block; width: 100%; max-width: 70px; height: 14px; border-radius: 10px; background: #EEE; }
.checkbox .handle { position: absolute; display: inline-block; left:0; top:50%; transform:translate(-50%,-50%); transition: all 300ms; width: 20px; height: 20px; border-radius: 50%; background:var(--color-false); box-shadow: 0 0 5px rgba(0,0,0,0.2); }
.checkbox input:checked + label .handle { left:100%; background:var(--color-true); }

.linkitemrow { display: block; }
.linkitemrow .btn { user-select: none; margin-right: 10px; padding: 2px 5px 6px 5px; background: #d8f2ff; border-radius: 4px; cursor: pointer; }
.linkitemrow .btn > * { vertical-align: middle; display: inline-block; margin-right: 5px; }

.searchfield { display: block; position: relative; }
.searchfield .icon { position: absolute; left:10px; top: 50%; transform: translate(0, -50%); }
.searchfield input { text-indent: 30px; }
.searchfield:after { content: ''; position: absolute; top: 50%; right: 10px; width:8px; height:8px; margin-top: -6px; transform: rotateZ(45deg); border-right:2px solid #222;border-bottom:2px solid #222; }

.imageupload { display: flex; gap: 30px; width: 100%; user-select: none; align-items: center; }
.imageupload input { display: none; }
.imageupload > *:first-child { width: 160px; max-width: 160px; }
.imageupload > *:last-child { flex: 1; }
.imageupload .container { cursor: pointer; display: block; width: 100%; text-align: center; padding: 40px; box-sizing: border-box; border:1px dashed #AAA; }
.imageupload button { cursor: pointer; display: block; width: 120px; text-align: center; background: #EEE; padding: 8px 10px; border:none; border-radius: 4px; margin-bottom: 20px; }
.imageupload button:last-child { margin:0; }

.pagecontent { display: block; margin-bottom: 20px; }
.pagecontent .header { display: flex; gap: 5px; margin-bottom: 5px; align-items: center; width: 100%; box-sizing: border-box;  }
.pagecontent .header > *:first-child { flex: 1; }
.pagecontent .header > *:last-child { width: 20px; text-align: right; padding-right: 5px; }
.pagecontent .content { cursor: pointer; background: #EEE; border-radius: 4px; display: flex; gap:10px; padding: 5px; width: 100%; box-sizing: border-box; }
.pagecontent .content > * { box-sizing: border-box; padding: 10px; min-height: 200px; flex: 1; background: #FFF; border-radius: 4px; position: relative; }
.pagecontent .content .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pagecontent .content textarea { border:none; box-sizing: border-box; outline: none; min-height: 0; }

.prop { display: inline-block; }
.prop.date { font-size: 80%; color: #444; border:1px solid #91BBCF; border-radius:2px; padding: 5px; width: 100%; text-align: center; box-sizing: border-box; }
.prop.status { width: 12px; height: 12px; border-radius: 50%; background:var(--color-false); }
.prop.status.active { background: var(--color-true); }