root {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #3a4f54;
    background-color: #dfecf1;
}

/* application font-size */
body .ui-widget {
    font-size: 0.9rem;
}

.ui-widget, .ui-widget .ui-widget {
    font-family: Arial, Helvetica, sans-serif;
}

.ui-inputfield, .ui-outputlabel {
    font-family: Arial, sans-serif;
    font-size: 10px;
}

/* input style */
body .ui-inputfield {
    height: 21px;
    /*text-transform: uppercase;*/
}

.ui-cell-editor-input .ui-inputtextarea {
    vertical-align: top;
    height: auto;
    word-wrap: anywhere;
}

.ui-cell-editor-output {
    height: auto;
    word-wrap: anywhere;
}

table {
    empty-cells: show;
}

/* tabel head style */
body .ui-datatable thead th {
    padding: .5rem .5rem;
}

body .ui-datatable thead th {
    padding: .5rem .5rem;
}

form.jsfcrud_list_form th, td th {
    font-size: x-small;
    color: #4e6a71;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-color: #b2d5d6;
    border-bottom-color: #b2d5d6;
    border-left-color: #90b4bd;
    border-right-color: #90b4bd;
    letter-spacing: 3px;
    text-align: left;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: #b2d5d6;
}

td {
    vertical-align: middle;
    padding-bottom: 8px;
    font-size: small;
}

form.jsfcrud_list_form td, td td {
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-color: #b2d5d6;
    border-bottom-color: #b2d5d6;
    border-left-color: #b2d5d6;
    border-right-color: #b2d5d6;
    vertical-align: baseline;
    padding-bottom: 0px;
}

tr.jsfcrud_odd_row {
    background-color: #fefeff;
    color: #4e6a71;
}


tr.jsfcrud_even_row {
    background-color: #eff5fa;
    color: #4e6a71;
}

.container {
    max-width: 99%;
    margin: 0% auto;
    display: flex;
}

.col-1 {
    flex-basis: 8.333%;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3
}

.col-2 {
    flex-basis: 16.666%;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3
}

.col-2-5 {
    flex-basis: 12.5%;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3
}

.col-3 {
    flex-basis: 25%;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3
}

.col-4 {
    flex-basis: 33.333%;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3
}

.col-5 {
    flex-basis: 41.666%;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3
}

.col-6 {
    flex-basis: 50%;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3
}

.col-6-66 {
    flex-basis: 66%;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3
}

.col-7 {
    flex-basis: 100%;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3
}

.col-12 {
    flex-basis: 100%;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3
}

.border-top {
}

.col-wb-1 {
    flex-basis: 8.333%;
}

.col-wb-2 {
    flex-basis: 16.666%;
}

.col-wb-2-5 {
    flex-basis: 12.5%;
}

.col-wb-3 {
    flex-basis: 25%;
}

.col-wb-4 {
    flex-basis: 33.333%;
}

.col-wb-5 {
    flex-basis: 41.666%;
}

.col-wb-6 {
    flex-basis: 50%;
}

.col-wb-7 {
    flex-basis: 58.333%;
}

.col-wb-8 {
    flex-basis: 66.666%;
}

.col-wb-12 {
    flex-basis: 100%;
}


/* breadcrumb home icon style */
body .ui-breadcrumb .ui-breadcrumb-items li:first-child a.ui-icon-home {
    color: #3b5dbc !important;
}

/* breadcrumb item text style */
body .ui-breadcrumb .ui-breadcrumb-items li .ui-menuitem-link .ui-menuitem-text {
    color: #3b5dbc;
}

/* breadcrumb size */
.ui-breadcrumb .ui-breadcrumb-items {
    font-size: 0.9rem;
}


/* action toolbar buttons style */
.toolbar-btns {
    margin-right: 35px !important;
    margin-top: -10px !important;
}

/*action toolbar fixed position*/
.action-toolbar {
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
}


/* =========== Panel style =========== */
body .ui-panel .ui-panel-titlebar {
    padding: 0.1rem 0rem 0.2rem 0.5rem;
    border: none;
    background-color: white;
}

body .ui-panel .ui-panel-content {
    border: none;
    padding: 0.5rem;
}

/* =========== End =================== */


/* global tab view menu style */
body .ui-tabs .ui-tabs-nav li.ui-tabs-header {
    padding: 0.5rem;
}

/* global button style */
body .ui-button.ui-button-icon-only {
    height: 25px;
    width: 35px;
}

/* element tip card */
.card-elem {
    border-radius: 15px;
    padding: 20px;
    box-shadow: rgb(99 99 99 / 20%) 0 2px 8px 0;
    border: 0.5px solid lightgrey;
    margin-right: auto;
    margin-left: auto;
    width: max-content;
    /*overflow-x:auto;*/
    background-color: white;
}

/* end */
.window {
    border-radius: 15px;
    padding: 20px;
    box-shadow: rgb(99 99 99 / 20%) 0 2px 8px 0;
    border: 0.5px solid lightgrey;
    margin-right: auto;
    margin-left: auto;
    width: max-content;
    /*overflow-x:auto;*/
    background-color: white;
}


/* global select one menu style */
body .ui-selectonemenu .ui-selectonemenu-label {
    min-height: 0;
}

/* guarantee tab */
.guarantee-action-btns {
    margin: 1% 1% !important;
}

.trash-btn {
    background-color: red !important;
    border: 1px solid red !important;
}


body .ui-selectonemenu {
    height: 21px !important;
}

.ui-selectonemenu .ui-selectonemenu-label {
    display: inline-block !important;
    font-size: small;
}

body .ui-autocomplete .ui-autocomplete-dropdown {
    height: 21px;
}

.select-min-width {
    width: 200px !important;
}

.select-med-width {
    width: 250px !important;
}

.select-big-width {
    width: 300px !important;
}

.long-limited-select-input {
    width: 600px !important;
    max-width: 600px !important;
    overflow: hidden !important;
}

.ui-selectonemenu {
    width: 100% !important;
}

.ui-selectonemenu-label {
    width: 100% !important;
    text-overflow: ellipsis;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.width-max-space {
    width: 100%
}

.no-padding {
    padding: 0;
}

.no-margin {
    margin: 0;
}

.no-shadow {
    box-shadow: none;
}

.show-border-bx {
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3
}

.select-desc {
    font-size: 12px;
    width: 100%;
    display: block;
    color: #000;
    background: #eee;
    padding: 10px;
    margin-bottom: 10px;
}

/* Carousel style */
.message-item .message-item-content {
    border: 1px solid var(--surface-d);
    border-radius: 3px;
    margin: .3rem;
    text-align: center;
    padding: 2rem 0;
}

td {
    word-wrap: break-word
}

.table-red-outline {
    border: 1px solid red;
    background-color: red !important;
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-selectonemenu-row > td {
    padding: 0.5rem 1rem !important;
}

input.flow-field, label.flow-label, div.flow-line {
    margin: 5px;
}

span.flow-field {
    padding-top: 5px;
}

div.flow-panel {
    margin-top: 5px;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3;
}

div.flow-panel-40 {
    width: 40%;
}

div.no-border {
    margin-top: 5px;
    border-style: none;
}

div.large {
    width: 6000px;
}

div.scroll {
    overflow: scroll;
}

div.no-wrap {
    white-space: nowrap;
}

div.highlighted {
    background-color: #feffd3;
    border-style: solid;
    border-width: thin;
    border-color: #8d8d8da3;
}

body .ui-datatable thead th .ui-column-title {
    font-weight: 400;
    vertical-align: middle;
}

window {
    padding: 20px;
    background-color: #eaeaea;

    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 3%;
    border: 4px solid #e1e1e1;
}

.ui-helper-clearfix::before,
.ui-helper-clearfix::after {
    content: none !important;
    display: initial !important;
    clear: none !important;
}