.picture-button {
    position: fixed;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.5);
    background-size: 192px 48px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNOTEgMTNoLTZ2NmgtMnYtNmgtNnYtMmg2VjVoMnY2aDZ6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNzIgMGgyNHYyNEg3MnoiLz48cGF0aCBkPSJNNjcgNi40MUw2NS41OSA1IDYwIDEwLjU5IDU0LjQxIDUgNTMgNi40MSA1OC41OSAxMiA1MyAxNy41OSA1NC40MSAxOSA2MCAxMy40MSA2NS41OSAxOSA2NyAxNy41OSA2MS40MSAxMnoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik00OCAwaDI0djI0SDQ4eiIvPjxwYXRoIGQ9Ik0zNC4wMiAxOGw2LTYtNi02LTEuNDEgMS40MUwzNy4xOSAxMmwtNC41OCA0LjU5eiIgZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTI0IDBoMjR2MjRIMjR6Ii8+PHBhdGggZD0iTTEzLjk4IDE4bC02LTYgNi02IDEuNDEgMS40MUwxMC44MSAxMmw0LjU4IDQuNTl6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNMCAwaDI0djI0SDB6Ii8+PC9nPjwvc3ZnPg==");
}

#picture[istouch="true"] > .picture-button {
    transform: scale(1.2);
    position: fixed;
}

.mouse-inactive > .picture-button {
    opacity: 0.1;
}

.button-hidden {
    display: none;
}


.picture-button:hover {
    opacity: 1;
    transform: scale(1.2);
}
#prevButton {
    left: 12px;
    top: 50%;
    margin: -24px 0;
}

#nextButton {
    background-position-x: -48px;
    right: 12px;
    top: 50%;
    margin: -24px 0;
}

#delButton {
    background-position-x: -96px;
    top: 12px;
    left: 50%;
    margin: 0 -24px;
}
#addButton {
    background-position-x: -144px;
    bottom: 12px;
    left: 50%;
    margin: 0 -24px;
}
#image {
    position: fixed;
    transform-origin: 0 0;
}

#imageCover {
    position: fixed;
    pointer-events: none;
    transform-origin: 0 0;
}
    
#picture {
    background-color: #E0E0E0;
}

#initial {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: calc(100% - 48px);
    z-index: 4;
    font-family: 'Trebuchet MS', sans-serif;
}

.initial-dialog-background {
    display: flex;
    cursor: pointer;
}

.initial-dialog-message {
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: #454966;
}

.initial-dialog-body {
    background: #e2e8f7;
    border: 2px solid #454966;
    border-radius: 15px;
    width: 400px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.initial-dialog-header-sign {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background-color: white;
    border-radius: 50%;
    border: 2px solid #454966;
    width: 60px;
    height: 60px;
    position: relative;
    top: -40px;

    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23333333;%7D%0A%3C/style%3E%3Cg id='XMLID_2_'%3E%3Cpath id='XMLID_8_' class='st0' d='M256,42.5l-156.8,156l35.4,34.7l96.9-96.9v240.2h49.6V137.1l97.7,96.9l34.7-34.7L256,42.5z M0,423v46.5h512V423H0z'/%3E%3C/g%3E%3C/svg%3E%0A");
    
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}

.initial-dialog-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
}

@media (max-width: 400px) {
    .initial-dialog-body {
 	width: 94%;
	margin-left: auto;
	margin-right: auto;
    }

    .initial-dialog-background {
 	width: 100%;
    }
}

#croquet_dock {
    z-index: 6;
}

.addIcon {
    background-color: #454966;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 64 (93537) - https://sketch.com --%3E%3Ctitle%3Eicon/material/add%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='icon/material/add' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='ic-baseline-add'%3E%3Cg id='Icon' fill='%23F8F8F8'%3E%3Cpolygon id='Icon-Path' points='19 13 13 13 13 19 11 19 11 13 5 13 5 11 11 11 11 5 13 5 13 11 19 11'%3E%3C/polygon%3E%3C/g%3E%3Crect id='ViewBox' fill-rule='nonzero' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}