#reservations {
    display: flex;
    flex-direction: column;
}

#reservations > .reservation {
    width: 100%;

    display: flex;
    flex-direction: row;
    margin-bottom: 80px;
}

#reservations .thumb {
    width: 180px;
}
#reservations .descr {
    padding-left: 32px;
    flex: 1;

    display:flex;
    flex-direction: column;
}


#reservations .thumb img {
    width: 180px;
    height: 261px;
    border: 1px solid #aaaaaa;
}


#reservations .descr > div {

    display: flex;
    flex-direction: row;
    margin: 2px;
}

#reservations .descr > div > div:first-child {
    width: 180px;
}

#reservations .descr .resvid {
    font-weight: bold;
}

#reservations .actions {
    padding-top: 24px;
}

#reservations .actions .action {
    flex-basis: 88px;
    height: 88px;
    margin: 0 32px 0 0;

    border: 1px solid #aaaaaa;
    text-align: center;

    padding: 8px;
    border-radius: 8px;

    display:flex;
    flex-direction: column;
    justify-content: center;

    background-color: #ffffff;
    color: #666699;
    transition: 0.5s;
    cursor: pointer;
    text-decoration: none;
}

#reservations .actions .action:hover {
    background-color: #666699;
    color: #ffffff;
    transition: 0.5s;
}

#reservations .actions .action-button {
    font-size: 40px;
}

#reservations .actions .action-caption {
    font-size: 12px;
}

/**/

.post-coode {
    padding: 8px 24px;
}

.post-coode h1 {
    margin: 0 0 24px 0;
    font-family: sans-serif;
    font-size: 40px;
    padding-bottom: 8px;
    border-bottom: 1px solid #aaaaaa;
}

.post-coode h2 {
    margin: 0 0 8px 0;
}

.post-coode .coode-info {
    flex: 1;
    display: flex;
    flex-direction: row;
    margin-bottom: 64px;
    margin-top: 32px;
}


.post-coode .coode-info .coode-post-info {
    padding-left: 32px;
}

.post-coode .coode-info .coode-post-info .coode-comment {
    margin: 8px 0;
    width: 540px;
    height: 200px;
    resize: none;
}

.post-coode .coode-image {
    width: 330px;
    height: 480px;
    text-align: center;
}

.post-coode .rotation {
    font-size: 16px;
}

.post-coode .post-coode-warning {
    font-size:14px;
}
.post-coode .post-coode-warning .post-coode-reason {
    font-size: 16px;
    font-weight: bold;
}
.post-coode .coode-comment-textlength {
    text-align:right;
}

.post-coode .post-coode-warning i {
    color: red;
}

.post-coode .post-coode-item {
    margin:0 16px 0 0 ;
    display: flex;
    flex-direction: row;
    width: 400px;
    height: 180px;
}
.post-coode .post-coode-itemimg {
    width:110px;
    height:110px;
    border: 1px solid #aaaaaa;
    position:relative;
}
.post-coode .post-coode-itemimg img {
    width:100%; height:100%;
}

.post-coode .post-coode-item.unregistered {
    opacity: 0.3;
    transition: 0.5s;
}
.post-coode .post-coode-item:not(.unregistered) {
    transition: 0.5s;
}

.post-coode a.post {
    width: 88px;
    height: 88px;
    margin: 0 32px 0 0;

    border: 1px solid #aaaaaa;
    text-align: center;

    padding: 8px;
    border-radius: 8px;

    display:flex;
    flex-direction: column;
    justify-content: center;

    background-color: #ffffff;
    color: #666699;
    transition: 0.5s;
    cursor: pointer;
    text-decoration: none;
}
.post-coode a.post > div:first-child {
    font-size: 32px;
}
.post-coode a.post.disabled {
    cursor: default;
    opacity: 0.3;
}

.post-coode .post-coode-form {
    display: flex;
    flex-direction: row;
}

.post-coode .post-coode-form .info {
    padding-left: 32px;
    display: flex;
    align-items: center;
}

.sample-images a {
    margin-right: 16px;
}
.sample-images img {
    width: 330px;
    height: 480px;
    border: 1px solid #aaaaaa;
}