/*
   Common styles of every page (the pages of the application and the public pages).
   The shell of the signed-in application is in app.css, the public pages (login, ...) are in login.css and every page
   adds its own file through the "Styles" section of the layout. ui.css (Componentator) is shared by all of them.
*/

/* Brand color, overrides the default --color of Componentator (used by its components) */
:root { --color: #A7AAF9; }

.fa,.fab,.fad,.fal,.far,.fas { -webkit-transform: none; }

html,body { margin: 0; padding: 0; overflow: hidden; }
body.custombody { background: #E0E0E0; }
/* ".ui-dark" alone loses to "body.custombody" on plain CSS specificity, it needs the same shape to win */
body.custombody.ui-dark { background: #1c1c1c; }

h3 { padding: 0; }
h3 i { margin-right: 8px; }

/* utilities */
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mb15 { margin-bottom: 15px; }
.ml5 { margin-left: 5px; }
.w100 { width: 100%; }
.bold { font-weight: bold !important; }
.semibold { font-weight: 500; }
.pre { white-space: pre-wrap; word-break: break-word; }

.lightgray { color: lightgray !important; }
.gray { color: gray; }
.green { color: #488a00 !important; }
.yellow { color: #EFDC05 !important; }
.red { color: #f51e1e !important; }
.dark-red { color: #791414 !important; }
.orange { color: #ff5400 !important; }
.color-primary { color: var(--color) !important; }
.color { color: var(--color); }

.bg-smoke { background-color: #F8F8F8; }
.bg-smoke hr, hr.bg-smoke { border-color: #E0E0E0; }
.ui-dark .bg-smoke { background-color: #282828; }
.ui-dark .bg-smoke hr, .ui-dark hr.bg-smoke { border-color: #353535; }

/* hint under a field or a text */
.field-hint { font-size: 11px; color: #888; margin: 0 0 10px; line-height: 1.4; }
.ui-dark .field-hint { color: #808080; }

.empty { padding: 35px 20px; text-align: center; color: gray; }
.ui-dark .empty { color: #808080; }

/* badges */
.badge { font-size: 11px; padding: 1px 6px 2px; border-radius: 2px; background-color: #848484; line-height: 12px; vertical-align: middle; margin-top: -2px; position: relative; display: inline-block; color: white; }
.badge i { margin-right: 5px; }
.badge-blue { background-color: #4CC1E9; }
.badge-red { background-color: #f51e1e; }
.badge-green { background-color: #8CC152; }
.badge-yellow { background-color: #EFDC05; color: #333; }
.badge-orange { background-color: #e9883f; }
.badge-gray { background-color: #606060; }
.badge-purple { background-color: #967ADC; }
.badge-small { font-size: 9px; padding: 1px 4px 1px; }

@media (max-width: 768px) {
	.mobile-m { margin-bottom: 20px; }
}

/* button inside a page or a form (the buttons of the toolbar and of the forms are styled by their components) */
.button { background: var(--color); border: 1px solid rgba(0,0,0,0.2); padding: 0 16px; color: white; height: 30px; font-weight: bold; border-radius: 3px; text-transform: uppercase; font-size: 12px; cursor: pointer; }
.button .fa, .button .far, .button .fas { margin-right: 6px; }
.button:hover { opacity: 0.7; }
.button:disabled { opacity: 1; color: gray; background: #dcdcdc; border-color: #dcdcdc; cursor: not-allowed; }
.button.button-danger { background: #f51e1e; }
.ui-dark .button:disabled { color: #666; background: #303030; border-color: #303030; }

.mr5 { margin-right: 5px; }
.ml20 { margin-left: 20px; }
.mr20 { margin-right: 20px; }

/* the area of the chosen files, the drop layer of the files covers it while files are dragged over it */
.filepicker { position: relative; padding-bottom: 4px; }

/* the binders of the pages are blocks (the content of a detail is arranged under each other), the ones inside a text are marked as inline */
ui-bind { display: block; }
ui-bind.inline { display: inline; }
.ui-dark .ui-dragdropelement-area { background-color: rgba(60,60,60,0.5) !important; border-color: #A0A0A0; }
.ui-dark .ui-dragdropelement-area span { color: #E0E0E0; }