/* card */
.card{margin: 20px 10px;; padding: 0px; flex-direction: column; box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);}
.card-image{margin: 0px; padding: 0px; position: relative;}
.card-content{padding: 10px; flex-direction: column;}
.card-content > .media{flex-direction: row; justify-content: space-between; align-items: center;}
.media > .media-left{}
.media > .media-content{margin: 0px 0px 0px 10px; flex-direction: column; flex-grow: 2; justify-content: center;}
.card-content > .content{margin: 10px 0px 0px 0px; display: flex; flex-direction: column;}

/* navbar */
.navbar{height: 50px; position: relative; list-style: none; font-size: 20px; z-index:100;}
.navbar-brand{position: relative;}
.navbar-menu{position: relative;flex-grow: 2; justify-content: space-between}
.navbar-menu .navbar-start{margin: 5px; padding: 0px; position: relative; display: flex; flex-grow: 2;}
.navbar-menu .navbar-end{position: relative;}
.navbar-item{margin: 0px 8px; padding: 7px 16px; position: relative;}
.navbar-link{position: relative; text-decoration: none; white-space: nowrap;}
.navbar-dropdown{margin: 0px; padding: 0px; position: absolute; display: none; font-size: 16px;}
.navbar-item:hover > .navbar-dropdown{background-color: white; display: flex; flex-direction: column;}
.navbar-dropdown .navbar-dropdown{top: 0px; left: 100%;}

/* menu */
.menu{position: relative; list-style: none; display: flex; flex-direction: column; margin: 0px;}
.menu-item{min-height: 40px; position: relative; display: flex; flex-direction: column; align-items: stretch; flex-grow: 1;}
.menu-link, .menu-label{min-height: 30px; padding: 5px 10px; border-bottom: 1px solid #f4f4f4; flex-direction: row; align-items: center; vertical-align: middle; font-weight: 600; color: #f4f4f4;}
.menu-label:hover{color: #636363;}
.menu-dropdown .menu-link {border-bottom: 1px solid #00d1b1; font-weight: normal; color: #353535;}
.menu-dropdown{height: 0px; flex-direction: column; max-height: 0px; margin: 0px; padding: 0px; position: relative; display: flex; overflow: hidden; transition: max-height 2s ease-out;}
.menu-item input{display: none;}
.menu-item input:checked ~ .menu-dropdown{height: auto; max-height: 500px; background-color: white; display: flex; flex-direction: column;}

/* page */
.page, .page div{display: block}

/* upload drop area */
.upload-drop-area{border: 4px dashed black; padding: 60px 20px; box-sizing: border-box; opacity: 0.5; text-align: center;}
.upload-drop-area:hover, .upload-drop-area.dragging, .upload-drop-area.uploading {opacity: 1;}
.upload-drop-area input {display: none; cursor: pointer;}
.upload-drop-area input:focus {outline: none;}

/* modal */
.modal-background{top: 0px; left: 0px; width: 100%; height: 100%; position: fixed; display: none; flex-direction: row; z-index: 100}
.modal-body{margin: 2% 5%; padding: 10px; width: 90%; height: 90%; position: relative; display: flex; flex-direction: column; background-color: white; box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); overflow-y: scroll;}
.close-modal{position: fixed; top: 6%; right: 6%}

/* breadcrumb */
.breadcrumb{justify-content: flex-start; padding: 0px 10px; white-space: nowrap;}
.breadcrumb, .breadcrumb ul, .breadcrumb li{display: flex; flex-direction: row;}
.breadcrumb.is-centered{justify-content: center}
.breadcrumb.is-right{justify-content: flex-end}
.breadcrumb ul, .breadcrumb li{margin: 0px; padding: 0px;}
.breadcrumb ul{list-style-type:none}
.breadcrumb ul li:not(:first-child) a{padding-left: 10px;}
.breadcrumb ul li:not(:last-child) a{padding-right: 10px;}
.breadcrumb li + li::before {color: #b5b5b5; content: "\0002f";}
.breadcrumb a {align-items: center; color: #485fc7; display: flex; justify-content: center;}
.breadcrumb a:hover {color: #363636;}
.breadcrumb li.is-active a {color: #363636; cursor: default; pointer-events: none;}

/* loader mask */
.loader-mask {display: inline-block; position: relative; width: 80px; height: 80px;}
.loader-mask div {box-sizing: border-box; display: block; position: absolute; width: 64px; height: 64px; margin: 8px; border: 8px solid #fff; border-radius: 50%; animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #fff transparent transparent transparent;}
.loader-mask div:nth-child(1) {animation-delay: -0.45s;}
.loader-mask div:nth-child(2) {animation-delay: -0.3s;}
.loader-mask div:nth-child(3) {animation-delay: -0.15s;}

@keyframes loading-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* pagination */
.pagination{justify-content: space-between}
.pagination, .pagination ul, .pagination li{display: flex; flex-direction: row; margin: 0px; padding: 0px;}
.pagination ul{list-style-type:none}
.pagination li + li {margin-left: 20px;}
.pagination .pagination-link, .pagination .pagination-ellipsis{padding: 7px 16px; }
.pagination .pagination-link{background-color: white; border: 1px solid #f4f4f4; border-radius: 5px; font-size: 16px; cursor: pointer;}
.pagination .pagination-link:hover{border: 1px solid #dbdbdb;}
.pagination .pagination-link.is-disabled, .pagination .pagination-link.is-current{cursor: default; pointer-events: none;}
.pagination .pagination-link.is-current{background-color: #209bee; border: 1px solid transparent; color: #ffffff;}
.pagination .pagination-ellipsis{align-items: flex-end;}
.pagination.is-small .pagination-link, .pagination.is-small .pagination-ellipsis{padding: 5px 12px; font-size: 12px;}
.pagination.is-normal .pagination-link, .pagination.is-normal .pagination-ellipsis{padding: 7px 16px; font-size: 16px;}
.pagination.is-medium .pagination-link, .pagination.is-medium .pagination-ellipsis{padding: 9px 20px; font-size: 20px;}
.pagination.is-large .pagination-link, .pagination.is-large .pagination-ellipsis{padding: 11px 24px; font-size: 24px;}
.pagination.is-rounded .pagination-link{border-radius: 50px;}
.pagination-list{}