[v-cloak] {
  display: none;
}
.fade-enter-active {
    transition: opacity 1.2s
}
.fade-enter, .fade-leave {
    opacity: 0
}

.content-main { margin-top: 50px !important; padding: 15px !important; }
.content-sidebar { position: fixed; top: 44px; left: 5px; }
.with-sidebar { margin-left: 220px !important; }
.content-main article, sub-main article { width:100%; }
.sub-sidebar { position: fixed; top: 65px; left: 15px; }

.with-tasks { margin-right: 280px !important; padding-right:5px !important;}
.tasks { position: fixed; top: 70px; right: 5px; width:280px; padding:0 !important; }

.ui.search>.results {
    width: 100%;
}

.ui.menu .item img.logo {
    margin-right: 1.5em;
}
.main.container {
    margin-top: 7em;
}
.wireframe {
    margin-top: 2em;
}
.ui.content.segment {
    padding: 5em 1em;
    border: none !important;
}

.text-content {
    white-space:pre-line;
}
.exclude {
    text-decoration:line-through;
}

a { cursor: pointer; }
i.s-link { cursor: pointer; }
.readonly { opacity: .7 !important; background: #ddd !important; }
.display-none { display: none !important; }
.hide { display: none; }

.result.active {
    background: #b5cc1852 !important;
}

form label.required:after {
    color: red;
    content: " *";
    font-weight: bold;
}

.dropzone {
    color: #555;
    background-color: #eee;
    border: dashed 1px #555;
    width: 100%;
    padding: 40px;
    margin-top: 10px;
    text-align: center;
}

.calendar-day.to-day {
    background-color: beige !important;
}

.align-right {
    text-align: right !important;
}

/* margin */
.ma0 { margin: 0 !important; }
.mt0 { margin-top: 0 !important; }
.ml0 { margin-left: 0 !important; }
.mr0 { margin-right: 0 !important; }
.mb0 { margin-bottom: 0 !important; }

.ma5 { margin: 5px !important; }
.mt5 { margin-top: 5px !important; }
.ml5 { margin-left: 5px !important; }
.mr5 { margin-right: 5px !important; }
.mb5 { margin-bottom: 5px !important; }

.ma10 { margin: 10px !important; }
.mt10 { margin-top: 10px !important; }
.ml10 { margin-left: 10px !important; }
.mr10 { margin-right: 10px !important; }
.mb10 { margin-bottom: 10px !important; }

.ma15 { margin: 15px !important; }
.mt15 { margin-top: 15px !important; }
.ml15 { margin-left: 15px !important; }
.mr15 { margin-right: 15px !important; }
.mb15 { margin-bottom: 15px !important; }

.ma20 { margin: 20px !important; }
.mt20 { margin-top: 20px !important; }
.ml20 { margin-left: 20px !important; }
.mr20 { margin-right: 20px !important; }
.mb20 { margin-bottom: 20px !important; }

.ma30 { margin: 30px !important; }
.mt30 { margin-top: 30px !important; }
.ml30 { margin-left: 30px !important; }
.mr30 { margin-right: 30px !important; }
.mb30 { margin-bottom: 30px !important; }

/* padding */
.pa0 { padding: 0 !important; }
.pt0 { padding-top: 0 !important; }
.pl0 { padding-left: 0 !important; }
.pr0 { padding-right: 0 !important; }
.pb0 { padding-bottom: 0 !important; }

.pa5 { padding: 5px !important; }
.pt5 { padding-top: 5px !important; }
.pl5 { padding-left: 5px !important; }
.pr5 { padding-right: 5px !important; }
.pb5 { padding-bottom: 5px !important; }

.pa10 { padding: 10px !important; }
.pt10 { padding-top: 10px !important; }
.pl10 { padding-left: 10px !important; }
.pr10 { padding-right: 10px !important; }
.pb10 { padding-bottom: 10px !important; }

.pa15 { padding: 15px !important; }
.pt15 { padding-top: 15px !important; }
.pl15 { padding-left: 15px !important; }
.pr15 { padding-right: 15px !important; }
.pb15 { padding-bottom: 15px !important; }

.pa20 { padding: 20px !important; }
.pt20 { padding-top: 20px !important; }
.pl20 { padding-left: 20px !important; }
.pr20 { padding-right: 20px !important; }
.pb20 { padding-bottom: 20px !important; }

.pa30 { padding: 30px !important; }
.pt30 { padding-top: 30px !important; }
.pl30 { padding-left: 30px !important; }
.pr30 { padding-right: 30px !important; }
.pb30 { padding-bottom: 30px !important; }