/* box */
.box {background-color: white; border-radius: 6px; box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); color: #4a4a4a; display: flex; margin: 0.25rem; padding: 1.25rem;}
a.box:hover, a.box:focus {box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px #485fc7;}
a.box:active {box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #485fc7;}

/* button */
.button, .label{margin: 0px 8px; padding: 7px 16px; border-radius: 5px; display: inline-flex; flex-direction: row; text-decoration: none; font-size: 16px;}

.button.has-horizontal, .label.has-horizontal{flex-direction: row;}
.button.has-vertical, .label.has-vertical{flex-direction: column;}

.button.is-small, .label.is-small{padding: 5px 12px; font-size: 12px;}
.button.is-normal, .label.is-normal{padding: 7px 16px; font-size: 16px;}
.button.is-medium, .label.is-medium{padding: 9px 20px; font-size: 20px;}
.button.is-large, .label.is-large{padding: 11px 24px; font-size: 24px;}

.button.is-black.is-ouline:hover, .label.is-black.is-ouline:hover{background-color: #0a0a0a; border: 1px solid transparent; color: #ffffff;}
.button.is-danger.is-ouline:hover, .label.is-danger.is-ouline:hover{background-color: #ff385f; border: 1px solid transparent; color: #ffffff;}
.button.is-dark.is-ouline:hover, .label.is-dark.is-ouline:hover{background-color: #353535; border: 1px solid transparent; color: #f4f4f4;}
.button.is-info.is-ouline:hover, .label.is-info.is-ouline:hover{background-color: #209bee; border: 1px solid transparent; color: #ffffff;}
.button.is-link.is-ouline:hover, .label.is-link.is-ouline:hover{background-color: #3273dc; border: 1px solid transparent; color: #ffffff;}
.button.is-light.is-ouline:hover, .label.is-light.is-ouline:hover{background-color: #f4f4f4; border: 1px solid transparent; color: #353535;}
.button.is-primary.is-ouline:hover, .label.is-primary.is-ouline:hover{background-color: #00d1b1; border: 1px solid transparent; color: #ffffff;}
.button.is-success.is-ouline:hover, .label.is-success.is-ouline:hover{background-color: #47c674; border: 1px solid transparent; color: #ffffff;}
.button.is-warning.is-ouline:hover, .label.is-warning.is-ouline:hover{background-color: #ffdd56; border: 1px solid transparent; color: #000000;}
.button.is-white.is-ouline:hover, .label.is-white.is-ouline:hover{background-color: #ffffff; border: 1px solid transparent; color: #0a0a0a}

.button.is-black.is-ouline, .button.is-black:hover, .label.is-black.is-ouline, .label.is-black:hover{background-color: transparent; border: 1px solid #0a0a0a; color: #0a0a0a;}
.button.is-danger.is-ouline, .button.is-danger:hover, .label.is-danger.is-ouline, .label.is-danger:hover{background-color: transparent; border: 1px solid #ff385f; color: #ff385f;}
.button.is-dark.is-ouline, .button.is-dark:hover, .label.is-dark.is-ouline, .label.is-dark:hover{background-color: transparent; border: 1px solid #353535; color: #353535;}
.button.is-info.is-ouline, .button.is-info:hover, .label.is-info.is-ouline, .label.is-info:hover{background-color: transparent; border: 1px solid #209bee; color: #209bee;}
.button.is-link.is-ouline, .button.is-link:hover, .label.is-link.is-ouline, .label.is-link:hover{background-color: transparent; border: 1px solid #3273dc; color: #3273dc;}
.button.is-light.is-ouline, .button.is-light:hover, .label.is-light.is-ouline, .label.is-light:hover{background-color: transparent; border: 1px solid #f4f4f4; color: #f4f4f4;}
.button.is-primary.is-ouline, .button.is-primary:hover, .label.is-primary.is-ouline, .label.is-primary:hover{background-color: transparent; border: 1px solid #00d1b1; color: #00d1b1;}
.button.is-success.is-ouline, .button.is-success:hover, .label.is-success.is-ouline, .label.is-success:hover{background-color: transparent; border: 1px solid #47c674; color: #47c674;}
.button.is-warning.is-ouline, .button.is-warning:hover, .label.is-warning.is-ouline, .label.is-warning:hover{background-color: transparent; border: 1px solid #ffdd56; color: #ffdd56;}
.button.is-white.is-ouline, .button.is-white:hover, .label.is-white.is-ouline, .label.is-white:hover{background-color: transparent; border: 1px solid #ffffff; color: #ffffff}

.button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after{-webkit-animation: spinAround 500ms infinite linear; animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 9999px; border-right-color: transparent; border-top-color: transparent; content: ""; display: block; height: 1em; position: relative; width: 1em;}

@-webkit-keyframes spinAround {from {    transform: rotate(0deg); }
    to {    transform: rotate(359deg); }}

@keyframes spinAround {from {    transform: rotate(0deg); }
    to {    transform: rotate(359deg); }}

/* content */
.content{width: 100%; position: relative; display: block;}
.content.is-small{}
.content.is-medium{}
.content.is-large{}

/* title */
.title{margin: 0px; padding: 0px; color: #363636;}
.subtitle{margin: 0px; padding: 0px; color: #4a4a4a;}

.title.is-1, .subtitle.is-1{font-size: 28px;}
.title.is-2, .subtitle.is-2{font-size: 26px;}
.title.is-3, .subtitle.is-3{font-size: 24px;}
.title.is-4, .subtitle.is-4{font-size: 22px;}
.title.is-5, .subtitle.is-5{font-size: 20px;}
.title.is-6, .subtitle.is-6{font-size: 18px;}

/* image */
.image{width:100%; height:200px; margin: 0px; padding: 0px; position: relative; display: flex; justify-content: center; align-content: center;}
.image.is-16x16{height:16px; width:16px}
.image.is-24x24{height:24px; width:24px}
.image.is-32x32{height:32px; width:32px}
.image.is-48x48{height:48px; width:48px}
.image.is-64x64{height:64px; width:64px}
.image.is-96x96{height:96px; width:96px}
.image.is-128x128{height:128px; width:128px}
.image img{max-width: 100%; max-height: 100%; right: 0; left: 0; top: 0; bottom: 0; margin: auto; padding: 0px; position: relative; display: flex;}

/* delete */
.delete, .modal-close {-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-appearance: none; -webkit-appearance: none; background-color: rgba(10, 10, 10, 0.2); border: none; border-radius: 9999px; cursor: pointer; pointer-events: auto; display: inline-block; flex-grow: 0; flex-shrink: 0; font-size: 0; height: 20px; max-height: 20px; max-width: 20px; min-height: 20px; min-width: 20px; outline: none; position: relative; vertical-align: top; width: 20px;}
.delete::before, .modal-close::before, .delete::after, .modal-close::after {background-color: white; content: ""; display: block; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transform-origin: center center;}
.delete::before, .modal-close::before {height: 2px; width: 50%;}
.delete::after, .modal-close::after {height: 50%; width: 2px;}
.delete:hover, .modal-close:hover, .delete:focus, .modal-close:focus {background-color: rgba(10, 10, 10, 0.3);}
.delete:active, .modal-close:active {background-color: rgba(10, 10, 10, 0.4);}
.is-small.delete, .is-small.modal-close {height: 16px; max-height: 16px; max-width: 16px; min-height: 16px; min-width: 16px; width: 16px;}
.is-medium.delete, .is-medium.modal-close {height: 24px; max-height: 24px; max-width: 24px; min-height: 24px; min-width: 24px; width: 24px;}
.is-large.delete, .is-large.modal-close {height: 32px; max-height: 32px; max-width: 32px; min-height: 32px; min-width: 32px; width: 32px;}

/* tag */
.tag{border-radius: 5px;}
.tag .tag-left, .tag .tag-right{padding: 5px;}
.tag:first-child{border-radius: 5px 0px 0px 5px;}
.tag:last-child{border-radius: 0px 5px 5px 0px;}

/* puzzle */
.puzzle-element.media{height:200px; width: 100%; margin:0px; padding: 0px; position: relative; display: flex;}
.puzzle-element img{max-width: 100%; max-height: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: 0px; position: relative; display: flex;}
.puzzle-element.media .action-area, .puzzle-element.media .didascalia{position: absolute; display: flex; margin: 0px;}
.puzzle-element.media .control-checkbox, .puzzle-element.media .button{display: none;}
.puzzle-element.media:hover .control-checkbox, .puzzle-element.media .checkbox:checked ~ .control-checkbox, .puzzle-element.media .checkbox:checked ~ .button{display: flex;}
.puzzle-element.media .action-area{top: 0px; right: 0px;  width: 100%; height: 100px;}
.puzzle-element.media .didascalia{bottom: 0px; left: 0px; width: 100%; background-color: rgba(0, 0, 0, 0.9); flex-direction: column; align-self: stretch; align-items: stretch}
.puzzle-element.media .didascalia input{margin: 5px; color: white;}