@koalarx/ui/core/theme/koala.theme.css

Koala UI is a Design System developed in Angular whose objective is to facilitate and make your development faster and simpler, making this framework your greatest ally.

*::-webkit-scrollbar {background-clip: padding-box;border-radius: 8px;width: 8px;}
*::-webkit-scrollbar-track {background: transparent;}
body {margin: 0;}
pre {border-radius: 0;text-align: left !important;}
button,
[type='button'],
[type='reset'],
[type='submit'] {-webkit-appearance: none !important;}
a:hover,
a:active,
a:focus {text-decoration: none !important;}
button:focus {outline: none !important;}
.p-relative {position: relative !important;}
.d-none {display: none !important;}
.d-block {display: block !important;}
.d-inline {display: inline !important;}
.d-inline-block {display: inline-block !important;}
.align-center {margin: 0 auto;}
.text-left {text-align: left !important;}
.text-center {text-align: center !important;}
.text-right {text-align: right !important;}
.float-left {float: left !important;}
.float-none {float: inherit !important;}
.float-right {float: right !important;}
.w-100 {width: 100%;}
.w-99 {width: 99%;}
.w-98 {width: 98%;}
.w-97 {width: 97%;}
.w-96 {width: 96%;}
.w-95 {width: 95%;}
.w-50 {width: 50%;}
.w-40 {width: 40%;}
.w-5 {width: 5%;}
.mt-0 {margin-top: 0 !important;}
.mt-5 {margin-top: 5px !important;}
.mt-10 {margin-top: 10px !important;}
.mt-15 {margin-top: 15px !important;}
.mt-20 {margin-top: 20px !important;}
.mt-25 {margin-top: 25px !important;}
.mt-30 {margin-top: 30px !important;}
.mt-35 {margin-top: 35px !important;}
.mt-40 {margin-top: 40px !important;}
.mt-45 {margin-top: 45px !important;}
.mb-5 {margin-bottom: 5px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-15 {margin-bottom: 15px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-25 {margin-bottom: 25px !important;}
.mr-8 {margin-right: 8px !important;}
.padding-none {padding: 0 !important;}
.button-size-24 {font-size: 24px;height: 24px;line-height: 24px;width: 24px;}
.button-size-26 {font-size: 26px;height: 26px;line-height: 26px;width: 26px;}
.button-size-28 {font-size: 28px;height: 28px;line-height: 28px;width: 28px;}
.mat-raised-button {border-radius: 0 !important;box-shadow: none !important;}
.group-buttons {margin: 20px auto;}
.inline-buttons button {margin-right: 8px;}
.inline-buttons button:last-child {margin-right: 0;}
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover {-webkit-box-shadow: 0 0 0 1000px white inset !important;}
.line-checkbox .mat-checkbox {margin: 0 10px 0 0;}
.mat-form-field-suffix {margin: 0 10px;}
.mat-form-field-suffix .mat-spinner,
.mat-form-field-suffix .mat-spinner svg {height: 20px !important;width: 20px !important;}
.mat-progress-negative .mat-progress-bar-fill::after {background-color: #ffffff;}
.mat-progress-negative .mat-progress-bar-element {background-color: #929292;}
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {color: #f44336!important;}
.mat-option {height: auto !important;line-height: normal !important;padding: 10px 16px !important;white-space: normal !important;}
.mat-expansion-panel {border-radius: 10px!important;}
.mat-expansion-panel-body {padding: 0 24px 5px !important;}
@media (max-width: 900px) {.mat-expansion-panel-body pre {max-width: calc(100vw - 96px);}}
.text-obs {background: #eeeeee;border-radius: 5px;color: #212121;font-family: OpenSansLight, sans-serif;height: 150px;margin: 0 auto 10px;overflow-y: auto;padding: 10px;position: relative;width: calc(100% - 27px);}
.btn-green {background: #43a047;color: #ffffff;}
.fa-dropdown-list {margin-right: 20px;}
.link {color: #1565c0;font-family: 'Josefin Sans', sans-serif;font-weight: bold;text-decoration: none;}
.mat-chip.mat-primary {background: #1976d2;color: #ffffff;}
.mat-chip.mat-warn {background: #b71c1c;color: #ffffff;}
.mat-chip.mat-primary .mat-icon.mat-chip-remove,
.mat-chip.mat-warn .mat-icon.mat-chip-remove {color: rgba(255, 255, 255, .87) !important;}
.home-list-cards .list button .mat-badge-content {font-size: 12px;height: 27px;line-height: 27px;right: 20px !important;top: 9px;width: 27px;}
p {margin: 0 !important;}
.menu-container {background: #ffffff;}
.more-items-content .koala-icon-button mat-icon {top: -1px;}
.mat-action-row {padding-right: 24px !important;}
.mat-menu-panel {max-width: max-content !important;}
.notifications-content .mat-list-text {padding-bottom: 5px !important;}
.mat-tab-group .mat-tab-body-content {padding: 20px 0;}
.mat-drawer-content {overflow: initial!important;z-index: 2!important;}
.page-content {border-radius: 20px 0 0 0;box-shadow: -2px -2px 8px rgba(0,0,0,.3);z-index: 2!important;height: 100%;overflow: hidden;}
@media (max-width: 900px) {
  .page-content {border-radius: 0;}
}
mat-radio-group {box-sizing: border-box;margin-bottom: 15px;display: block;}
mat-radio-button {margin-right: 10px;}
mat-radio-button:last-child {margin-right: 0;}
koala-list .menu-list .menu,
koala-list .menu-list .menu li div,
koala-list .menu-list .menu li nav {display: flex;justify-content: flex-start;align-items: center;}
koala-list .menu-list .mat-icon-button {width: 36px;height: 36px;line-height: 36px;}
koala-list .list-filter .mat-form-field {padding-right: 5px;box-sizing: border-box;}
form fieldset {margin: 0 0 15px;padding-block-end: 0.625em;padding-block-start: 0.35em;padding-inline-end: 10px;padding-inline-start: 10px;}
form fieldset legend {border: none;font-family: JosefinSans, sans-serif;font-size: 11px;font-weight: bold;margin: 0;padding: 0 10px;width: auto;}
.mat-form-field-disabled .mat-form-field-outline {border-radius: 8px;background-color: rgba(200,200,200,.3);}
.mat-form-field-disabled .mat-form-field-outline-start,
.mat-form-field-disabled .mat-form-field-outline-end {border-color: #a8a8a8 !important;}
.mat-form-field-disabled .mat-form-field-outline-start {border-style: dashed!important;border-right-style: none!important;}
.mat-form-field-disabled .mat-form-field-outline-end {border-style: dashed!important;border-left-style: none!important;}
.mat-form-field-disabled .mat-form-field-outline-gap {border-bottom-color: #bababa !important;border-left-style: none!important;border-right-style: none!important;border-bottom-style: dashed!important;}
/****************************************
 ***************** GRID *****************
 ****************************************/
[class*='col-'] {box-sizing: border-box;display: inline-block;padding: 2.5px;position: relative;width: 100%;}
.col-md-1 {flex: 0 0 calc(((100% - 40px) * 1) / 12);max-width: calc(((100% - 40px) * 1) / 12);}
.col-md-2 {flex: 0 0 calc(((100% - 40px) * 2) / 12);max-width: calc(((100% - 40px) * 2) / 12);}
.col-md-3 {flex: 0 0 calc(((100% - 40px) * 3) / 12);max-width: calc(((100% - 40px) * 3) / 12);}
.col-md-4 {flex: 0 0 calc(((100% - 40px) * 4) / 12);max-width: calc(((100% - 40px) * 4) / 12);}
.col-md-5 {flex: 0 0 calc(((100% - 40px) * 5) / 12);max-width: calc(((100% - 40px) * 5) / 12);}
.col-md-6 {flex: 0 0 calc(((100% - 40px) * 6) / 12);max-width: calc(((100% - 40px) * 6) / 12);}
.col-md-7 {flex: 0 0 calc(((100% - 40px) * 7) / 12);max-width: calc(((100% - 40px) * 7) / 12);}
.col-md-8 {flex: 0 0 calc(((100% - 40px) * 8) / 12);max-width: calc(((100% - 40px) * 8) / 12);}
.col-md-9 {flex: 0 0 calc(((100% - 40px) * 9) / 12);max-width: calc(((100% - 40px) * 9) / 12);}
.col-md-10 {flex: 0 0 calc(((100% - 40px) * 10) / 12);max-width: calc(((100% - 40px) * 10) / 12);}
.col-md-11 {flex: 0 0 calc(((100% - 40px) * 11) / 12);max-width: calc(((100% - 40px) * 11) / 12);}
.col-md-12 {flex: 0 0 calc(100% - 40px);max-width: calc(100% - 40px);}
.col-1 {flex: 0 0 calc((100% * 1) / 12);max-width: calc((100% * 1) / 12);}
.col-2 {flex: 0 0 calc((100% * 2) / 12);max-width: calc((100% * 2) / 12);}
.col-3 {flex: 0 0 calc((100% * 3) / 12);max-width: calc((100% * 3) / 12);}
.col-4 {flex: 0 0 calc((100% * 4) / 12);max-width: calc((100% * 4) / 12);}
.col-5 {flex: 0 0 calc((100% * 5) / 12);max-width: calc((100% * 5) / 12);}
.col-6 {flex: 0 0 calc((100% * 6) / 12);max-width: calc((100% * 6) / 12);}
.col-7 {flex: 0 0 calc((100% * 7) / 12);max-width: calc((100% * 7) / 12);}
.col-8 {flex: 0 0 calc((100% * 8) / 12);max-width: calc((100% * 8) / 12);}
.col-9 {flex: 0 0 calc((100% * 9) / 12);max-width: calc((100% * 9) / 12);}
.col-10 {flex: 0 0 calc((100% * 10) / 12);max-width: calc((100% * 10) / 12);}
.col-11 {flex: 0 0 calc((100% * 11) / 12);max-width: calc((100% * 11) / 12);}
.col-12 {flex: 0 0 100%;max-width: 100%;}
/*****************************************
 ************** MENU USER ****************
 *****************************************/
.user-menu .mat-menu-content {padding-top: 0 !important;}
/*****************************************
 **************** DIALOG *****************
 *****************************************/
.koala-dialog {height: auto;max-width: 100% !important;width: 100%;}
.koala-dialog.auto {width: auto;}
.koala-dialog.small {width: 35%;}
.koala-dialog.normal {width: 50%;}
.koala-dialog.big {width: 75%;}
.koala-dialog .mat-dialog-container {overflow: hidden;padding: 0;}
.koala-dialog.auto .mat-dialog-container {overflow: hidden;padding: 0 30px;}
.koala-dialog .mat-dialog-title {height: 20px;margin: 0;padding: 10px 20px;z-index: 2}
.koala-dialog .mat-dialog-title h2 {display: inline-block;font-family: OpenSansLight, sans-serif;font-size: .7em;margin: 0;padding: 0 8px;position: relative;text-align: left;top: -5px;}
.koala-dialog .mat-dialog-title mat-icon {display: inline-block;font-size: 22px;height: 22px;line-height: 22px;position: relative;top: 1px;width: 22px;}
.koala-dialog .mat-dialog-content {margin: 0;padding: 20px;}
.koala-dialog.mobile .mat-dialog-content {height: 100%;}
.koala-dialog.auto .mat-dialog-content {margin: 0;padding: 0 20px;}
.koala-dialog .mat-dialog-actions {margin: 0;padding: 10px 20px 10px;}
/*****************************************
 ************** MENU LIST ****************
 *****************************************/
.list-container nav.menu-list ul.menu li button.koala-icon-button {height: 30px;line-height: 30px;width: 30px;}
.list-container nav.menu-list ul.menu li button.koala-icon-button mat-icon {font-size: 22px;height: 22px;line-height: 22px;vertical-align: middle;width: 22px;}
/*****************************************
 **************** BUTTON *****************
 *****************************************/
button.mat-raised-button.mat-primary.outline {background: transparent;border: 1px solid #1976d2;}
button.mat-raised-button.mat-warn.outline {background: transparent;border: 1px solid #b71c1c;}
button.mat-raised-button.mat-accent.outline {background: transparent;border: 1px solid #FBBB00;}
button.mat-button.mat-primary.outline:focus {border: 1px solid #1976d2;}
button.mat-button.mat-warn.outline:focus {border: 1px solid #b71c1c;}
button.mat-button.mat-accent.outline:focus {border: 1px solid #FBBB00;}
/*****************************************
 ************* SNACKBAR ******************
 *****************************************/
.mat-snack-bar-container.success {background: #43A047;color: #fff;}
.mat-snack-bar-container.warning {background: #FFB300;color: #212121;}
.mat-snack-bar-container.error {background: #D32F2F;color: #fff;}
.mat-snack-bar-container.warning .mat-button:not(.mat-warn),
.mat-snack-bar-container.warning .mat-icon-button:not(.mat-warn),
.mat-snack-bar-container.warning .mat-stroked-button:not(.mat-warn),
.mat-snack-bar-container.warning .mat-flat-button:not(.mat-warn) {color: #212121!important;}