.AdminPane {
    display:flex;
    flex-direction: column;
    padding:40px;
    box-sizing: border-box;
    min-height:700px;
}
.AdminPane > .content-wrap {
    display:flex;
    flex-direction:column;
}
.AdminPane > .content-wrap > .top-wrap {
    padding:0 20px;
    box-sizing: border-box;
    display:flex;
    justify-content: space-between;
    flex-direction: row;
    align-items:center;
}
.AdminArticleList {
    display:flex;
    flex-flow:row wrap;
    padding:10px;
    box-sizing: border-box;
}
.AdminArticleItem {
    display:flex;
    flex-direction: column;
    width:300px;
    height:300px;
    box-sizing: border-box;
    background:#1a0307;
    margin:10px;
    position:relative;
}
.Overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    background:rgba(0,0,0,.68);
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
}
.AdminArticleItem > .title {
    padding:30px;
    box-sizing:border-box;
    text-align:center;
    font-family:Heading;
    font-size:18px;
    color:rgb(231, 207, 167);
}
.AdminArticleItem > .Image {
    width:100%;
    height:300px;
}

.AdminArticleList .create-item {
    display:flex;
    flex-direction: column;
    width:300px;
    height:300px;
    box-sizing: border-box;
    background:#1a0307;
    margin:10px;
    align-items:center;
    justify-content:center;
    padding:20px;
    text-align:center;
    font-family:Heading;
    font-size:24px;
    color:rgb(231, 207, 167);
    cursor:pointer;
}
.ImageFile {
    display:flex;
    flex-direction:column;
}
.ImageFile > label {
    margin-bottom:10px;
    font-weight: 600;
}
.ImageFile > .image-wrap {
    position:relative;
    width:100%;
    height:400px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.ImageFile > .image-wrap > input[type='file'] {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    opacity:0;
    cursor:pointer;
}
.ImageFile > .image-wrap > .Image {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    background:#000 no-repeat center / 100%;
}
.ImageFile > .image-wrap > .browse {
    background:#fff;
    color:#000;
    border-radius:4px;
    padding:16px;
    font-size:22px;
    box-sizing:border-box;
    z-index:3;
    pointer-events:none;
    box-shadow:0 0 40px #00000060;
}

.Confirm {
    display:flex;
    flex-flow:column;
    align-items: center;
    justify-content:center;
    position:fixed;
    z-index:50;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.78);
}
.Confirm > .title {
    font-size:30px;
    margin-bottom:20px;
    font-family:Heading;
    color:rgb(231, 207, 167);
}
.Confirm > .button-wrap {
    margin-top:10px;
}
.Confirm > .button-wrap > button {
    margin:10px;
    min-width:80px;
}
.ImageFile > .Confirm > .Image {
    width:400px;
    height:250px;
}


.AdminArticleEditor {
    display:flex;
    flex-direction: column;
    align-items:flex-start;
    width:100%;
    align-items:center;
}
.AdminArticleEditor > .AdminPane {
    width:100%;
    padding:40px 60px;
}
.text-link {
    cursor:pointer;
    border-bottom:solid 1px #FC3A3A;
}
.AdminArticleEditor > .AdminPane > .content-wrap > .top-wrap > .text-link {
    margin-bottom:20px;
    align-self:flex-start;
    border-bottom:solid 1px #FC3A3A;
}
.AdminArticleEditor .Input[data-field-id='title'] > input {
    font-family:Heading;
    font-size:26px;
    color:rgb(231, 207, 167)
}
.AdminArticleEditor > .AdminPane > .content-wrap > .top-wrap {
    padding:0;
}
.Editor {
    width:100%;
    min-height:400px;
    transition:opacity 150ms ease-out;
    opacity:0;
}
.Editor > label {
    margin-bottom:10px;
}
.AdminArticleEditor .ImageFile > .image-wrap {
    width:100%;
    height:400px;
    background:#333;
    margin-bottom:30px
}
.Pin {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    box-sizing:border-box;
}
.Pin > .Wrap {
    position:relative;
    width:500px;
    height:300px;
}
.Pin > .Wrap > .Schema {
    position:absolute;
    box-sizing:border-box;
    padding:40px;
    flex:none;
    transform-origin:center;
    transition:transform 350ms ease-out, opacity 350ms ease-out;
}
.Pin > .Wrap > .Schema:not([data-visible='true']) {
    transform:scale(0.9)!important;
    opacity:0!important;
    pointer-events:none;
}