:root {
    --ux-theme--input-disabled-foreground:#888;
}



html, body{
    width: 100%;
    _height: 100%;
    margin:auto;
}

body{
    background: #fafafa!important;
    display: flex;
    flex-direction: column;
    font-size: 1rem!important;

    font-family: 'Work Sans', sans-serif;;
}

pre {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
 }

.action {
    cursor: pointer;
}

block .content, action-block .content{
    padding: 0.6rem 0.6rem 0.6rem .6rem;
    border: 1px solid #dFe8eC;
    border-radius: 4px;
    _border-left: 1px solid #CFD8DC;
    background-color: rgba(255,255,255,.8);
    _height: 100%;
}

block .content > .label, action-block .content  > .top{
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    margin-bottom: 4px;
}

block .content > .label label, action-block .content > .label label{
    margin: 0px;
    padding-bottom: 6px;
}

block > .label, action-block > .label{
    font-weight: bold;
}

block, action-block{
    width: 100%;
    margin-bottom: 6px;
}

.menu{
    background-color: #003D68;
    color: #fcfcfc;
}

.painel-menu a, .painel-menu .menu ux-list-item,  .painel-menu .submenu ux-list-item{
   cursor: pointer;
}

.painel-menu .submenu ux-list-item{
    padding: 4px;
    border-bottom: 2px solid #003D68;
    _border-top: 1px solid #003D68;
    border-radius: 0px;
    background-color: #ECEFF1;
}

.painel-menu .submenu ux-list-item:hover{
    _background-color: white;
    _color: white;
    border-bottom: 2px solid #f7931d;;
    _border-top: 1px solid #f7931d;
    background-color: #fcfcfc;
}

.painel-menu{
    background-color: #ECEFF1;
    _flex: 2;
}

.painel-conteudo{
    flex: 8;
}


.bold{
    font-weight: bold;
}

.flex{
   display:flex;
}

.flex-wrap{
    flex-wrap: wrap;
}

.cols{
    display:flex;
    flex-direction: row!important;
    margin-bottom: 8px;
    flex-wrap: wrap;
 }

 .rows{
    display:flex;
    flex-direction: column!important
 }

.vertical-center{
    align-items: center;
}

.flex.spaced{
    justify-content: space-between;
}

.titulo {
    font-size: 1.4rem;
    font-weight:bold;
    color: #333;
    padding: .4rem;
    margin: 0px;
}


.greenlight{
    background-color: #8f8;
}

.redlight{
    background-color: #f99;
}

.text-red{
    color: red!important;
} 

.text-blue{
    color: blue!important;
} 

.text-black{
    color: black!important;
} 



.text-bold{
    font-weight: bold;
}

.destaque{
    color: var(--ux-design--accent);
}

.search{
    border-radius: 4px;
    margin-right: 2px;
    margin-left: 2px;
}

.search input{
    padding: 8px!important;
    font-size: 1.2rem;
    height: 40px;
}

select.search{
    background: white;
    border: 1px #ccc solid;
    border-radius: 4px;
    padding: 8px!important;
    font-size: 1rem;
    height: 40px;
}

.xcontainer >.painel-menu{
    color: #333;
    background-color: #0857c3;
    _padding: .5rem;
    _flex:2;
    _min-width: 200px;
}


.xcontainer >.painel-menu .titulo-menu{
    padding-top: 1rem;
    justify-content: center;
    display: flex;
    border-bottom: 1px solid rgba(220,220,220);
    font-weight: bold;
 }
 

.conteudo{
    padding: .4rem!important;
    display: flex;
    flex-direction: column;
}


.pagination .item{
    padding: .4rem;
    cursor: pointer;
}

.pagination .item.selecionado{
   background-color: var(--ux-design--primary);
   color:var(--ux-design--primary-foreground);
   border-radius: 4px;
   font-weight:bold;
}

.xcontainer{
    width: 100%;
    display:flex;
}

.simple-overlay , .fixed-overlay{
    background-color: rgba(255,255,255,.7);
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    top: 0;
    left: 0;
}

.simple-overlay{
    position: absolute;
}

.fixed-overlay{
    position: fixed;
}
 


.ux-dialog-button.confirm button{
    background-color: var(--ux-design--accent);
    color: var(--ux-design--accent-foreground);
}

.ux-dialog-button.cancel button{
    background-color: var(--ux-design--primary);
    color:var(--ux-design--primary-foreground);
}

.ux-dialog-button.red button{
    background-color: #EF5350;
    color: var(--ux-design--accent-foreground);
}

.ux-dialog-button.green button{
    background-color: #43A047;
    color:var(--ux-design--primary-foreground);
}



ux-dialog-header.alert{
    background-color: var(--ux-design--primary);
     color:var(--ux-design--primary-foreground);
}

.dialog-close{
    color:var(--ux-design--primary-foreground);
} 


ux-button>button.icon{
    padding: 0 3px!important;
}

ux-button.primary , ux-button.primary > button {
    background-color: var(--ux-design--accent)!important;
    color: var(--ux-design--accent-foreground)!important;
}

ux-button.secondary, ux-button.secondary > button {
    background-color: var(--ux-design--primary)!important;
    color: var(--ux-design--primary-foreground)!important;
}


ux-button.t3th, ux-button.t3th > button {
    background-color: #666!important;
    color: white!important;
}

ux-list{
    display: flex!important;
    flex-wrap: wrap;
}

ux-list-item{
    width: 100%;
    padding: 8px 0px;
    border-radius: 4px;
}

ux-list-item.active, ux-list-item.active a{
    background-color: #407Da8;
    _color: var(--ux-design--primary-foreground);
}


ux-list-item.activated, ux-list-item.activated a{
    background-color: #205D88; 
    _color: var(--ux-design--primary-foreground);
}


form-item label{
    margin-bottom: unset!important;
    font-weight: bold;
    font-size: .9rem;
    color: #37474F!important;
}

form-item{
    margin-top: 4px!important;
    font-size: 1rem;
}

form-item.inline ux-field{
    margin-top: unset!important;
}

.resize textarea{
    resize: both;
}

.center ux-field{
    display: flex;
}


.datagrid{
    width: 100%;
}

.datagrid th{
    font-weight:bold;
    background-color: var(--dark);
    color: var(--ux-design--app-background);
}



.datagrid td{
    font-weight:100;
    color: #333;
}

.datagrid .odd td{
    background-color: #f4f6f5;
}


#notification {
  max-width: 100vw;
}

#notification .alert{
    right: 0;
    bottom: 0;
    min-width: 500px;
    max-width: 100vh;
}

#notification .alert-success .close, #notification .alert-info .close{
    display:none;
}


#notification .alert-warning {
    color: #444;
    background-color: #FFD54F;
    border-color: #444;
}

#notification .alert-danger {
    color: white;
    background-color: #ff3333;
    border-color: white;
}

#notification .alert-info {
    color: white;
    background-color: #0c5460;
    border-color: #bee5eb;
}

#notification .alert-success {
    color: white;
    background-color: #006700;
    border-color: #c3e6cb;
}

ux-dialog-overlay.active {
    background-color: rgba(255,255,255,.8);
}


.alert-success .icon:before {
    font-family: FontAwesome;
    content: "\f00c";
    font-size: 140%;
    padding-right: 5px;
}

.alert-info .icon:before {
    font-family: FontAwesome;
    content: "\f129";
    font-size: 140%;
    padding-right: 5px;
}

.alert-danger .icon:before{
    font-family: FontAwesome;
    content: "\f00d";
    font-size: 140%;
    padding-right: 5px;
}

.alert-warning .icon:before {
    font-family: FontAwesome;
    content: "\f071";
    font-size: 140%;
    padding-right: 5px;
}




@media (max-width: 500px) {
  body{
    min-width: unset;
    max-width: unset;
    width: 100vw;
  }
}

fieldset{
    border-left: 5px solid rgba(200,200,200,0.4)!important;
    border-bottom: 2px solid rgba(200,200,200,0.2)!important;
    padding:2px!important;
}

fieldset legend{
    font-size: 1rem;
    font-weight: bold;
    padding:1rem 0 0 2px;
    margin-bottom:0px!important;
}


ux-form ux-field{
    margin-top: 6px;
}

label{
    margin-bottom: 0.2rem;
}

ux-form.inline ux-field{
    flex-direction: row;
    flex-wrap: wrap;
}

.form-row{
    margin: 0px!important;
}

ux-form.inline .form-row{
    flex-wrap: unset;
}

ux-form.inline form-input, ux-form.inline form-item{
    flex:1;
}

ux-form.inline ux-field label{
    min-width: 10rem;
    text-align: right;
    padding-right: 0.4rem;
    padding-top: 6px ;
}

/* ux-field{
    padding-left: 2px;
    padding-right: 2px;
} */

ux-input.tx-xs, .tx-xs input, input.tx-xs, select.tx-xs {
    flex:2;
    max-width:100px;
}

ux-input.tx-sm, .tx-sm input, input.tx-sm, select.tx-sm {
    flex:3;
    max-width:200px;
}

ux-input.tx-md, .tx-md input, input.tx-md, select.tx-md {
    flex:6;
    max-width: 500px;
}

ux-input.tx-lg, .tx-lg input, input.tx-lg, select.tx-lg {
    flex:8;
    max-width:800px;
}

ux-input.tx-full, .tx-full input, input.tx-full, textarea.tx-full{
    flex:12!important;
    width: 100%;
}

ux-field select, select.input, form-item select.input{
    _box-sizing: border-box;
    _padding: 6px 0 4px 0;
    /* margin-bottom: 4px; */
    _border: 0;
    _outline: none;
    _padding-left: 0;
    _padding-right: 0;
    transition: border-color 250ms ease;
    width: 100%;
    height: 34px;
}


ux-form.inline ux-field ux-checkbox label{
    text-align: left;
}

ux-form.inline ux-input-info{
    /*background-color: var(--ux-design--primary);*/
    width: 100%;
    flex-wrap:wrap;
    margin-left: 8rem;
}

ux-form .form-row>* {
    margin-left: unset!important;
    margin-right: unset!important;
}

ux-form.inline ux-input, ux-form.inline ux-textarea{
    width:unset;
    /* flex:1; */
}

form-group{
    display: flex;
    justify-content: space-between;
}

ux-form.inline form-group{
    display: flex;
    flex:1;
}

ux-form {
    flex-direction: row!important;
    flex-wrap: wrap;
}

data-grid .icon-only i{
    font-size: 1.6rem;
}

ux-textarea > textarea, ux-input > input, ux-textarea form-input> textarea, ux-input form-input > input,
ux-field > textarea, ux-field > input, ux-field form-input> textarea, ux-field form-input > input{
    border: 1px solid var(--ux-swatch--blue-grey-p100) !important;
    border-radius: 4px;
    padding: 4px!important;
    color: #333;
}


.field>textarea{
  width: 100%;
  border: 1px solid #bbb;
    border-radius: 4px;
}


form-item select{
    color: #333;
    flex: unset!important;
}

ux-input-info{
    font-size: 0.7rem;
}

ux-radio>.radio {
    border: 2px solid var(--ux-swatch--blue-grey-p100)!important;
}

.has-error input, .has-error textarea {
    background-color: #FFF8E1
}

.has-error > label{
   color: var(--ux-theme--input-info-error)
}

.maxscreen{
    max-width: 1200px;
}

.timeline{
    display: flex;
    flex-direction: column;
    align-items: center;
    _background-color: #fafafa;
    padding: 10px;
}

.timeline-row{
    display: flex;
    width: 100%;
}

.timeline-left{
    flex: 1;
    text-align: right
}
.timeline-right {
    flex: 1;
}

.timeline-date{
    background-color: #eeffcc;
    padding: 15px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-line{
    min-height: 16px;
    width: 2px;
    background-color: #ddd;
    flex: 1;
}

.timeline-content{
    background-color: #fafafa;
    padding : 4px;
    flex: 1;
    min-height: 50px;
}

.timeline-box{
    border: 1px solid #eee;
    padding: 15px;
    font-size: 1rem;
    font-weight: bold;
    background-color: #dde7f2;
}


.comandos-bottom{
    width:100%;
    padding: .4rem;

    margin-top: .6rem!important;
    margin-bottom: .6rem;

    background-color: #fcfcfc;

    border-radius: 4px;
    /* border-top: 1px solid var(--ux-design--accent); */
}

.comandos-bottom ux-button{
    margin-left: .2rem!important;
    margin-right: .2rem!important;
}

.comandos-top{
    margin-top: .6rem;
    padding-top: .6rem;
}

.comandos-filtro{
    display: flex;
}

.comandos-filtro >* {
    margin-left: 4px;
}


.comandos-filtro button:hover, .comandos-filtro .search input:hover {
    box-shadow: var(--ux-design--elevation2dp)!important;
}

.comandos-filtro button{
    background-color: #fff!important;
    color: var(--ux-design--primary)!important;
    border: 1px solid #ddd;
    border-radius: 4px!important;
    box-shadow: unset!important;
    font-size: .8rem!important;
    height: 30px!important;
    line-height:1!important;
    padding: 0px;
}

.comandos-filtro .search input {
    padding: 8px!important;
    font-size: 1rem;
    height: 30px;
    box-shadow: unset!important;
}

.flex-center{
    display:flex;
    justify-content: center;
}

.flex-middle{
    display: flex;
    align-items: center;
}

.image-editor-actions{
    display: flex;
}

.image-editor-action{
    border : 1px solid #eee;
    margin: 1px;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px;
    min-width: 35px;
    background-color: #fafafa;
    text-align: center;
}

.image-editor-action.selected{
    background-color: #f7931d40
}

.flex-1{flex:1;}
.flex-2{flex:2;}
.flex-3{flex:3;}
.flex-4{flex:4;}
.flex-5{flex:5;}
.flex-6{flex:6;}
.flex-7{flex:7;}
.flex-8{flex:8;}
.flex-9{flex:9;}
.flex-10{flex:10;}
.flex-11{flex:11;}
.flex-12{flex:12;}

.xcol-1{flex:1 12 7%;}
.xcol-2{flex:2 12 15%;}
.xcol-3{flex:3 12 23%;}
.xcol-4{flex:4 12 31%;}
.xcol-5{flex:5 12 39%;}
.xcol-6{flex:6 12 47%;}
.xcol-7{flex:7 12 56%;}
.xcol-8{flex:8 12 64%;}
.xcol-9{flex:9 12 72%;}
.xcol-10{flex:10 12 81%;}
.xcol-11{flex:11 12 89%;}
.xcol-12{flex:12 12 98%;}

.xcol-10x1{flex:1 10 9%;}
.xcol-10x2{flex:2 10 19%;}
.xcol-10x3{flex:3 10 29%;}
.xcol-10x4{flex:4 10 39%;}
.xcol-10x5{flex:5 10 49%;}
.xcol-10x6{flex:6 10 59%;}
.xcol-10x7{flex:7 10 69%;}
.xcol-10x8{flex:8 10 79%;}
.xcol-10x9{flex:9 10 89%;}
.xcol-10x10{flex:10 10 100%;}
 


.rows > * {margin-bottom: 6px;}


.rows>:last-child {
    margin-bottom: 0px;
}

.cols > * {
    margin-right: 4px;
    _margin-left: 4px;
    margin-bottom: 6px;
}

.cols :first-child {
    margin-left: 0px!important;
}

.cols :last-child {
    margin-right: 0px;
}

.c-1{width: 8.333333333%}
.c-2{width:16.666666666%}
.c-3{width:25%}
.c-4{width:33.333333333%}
.c-5{width:41.666666666%}
.c-6{width:50%}
.c-7{width:58.333333333%}
.c-8{width:66.666666666%}
.c-9{width:75%}
.c-12{width:100%}

.p-10{width: 10%;}
.p-15{width: 15%;}
.p-20{width: 20%;}
.p-25{width: 25%;}
.p-30{width: 30%;}
.p-33{width: 33.333333%;}
.p-40{width: 40%;}
.p-50{width: 50%;}
.p-60{width: 60%;}
.p-66{width: 66.666666%;}
.p-70{width: 70%;}
.p-75{width: 75%;}
.p-80{width: 80%;}
.p-90{width: 90%;}
.p-100{width: 100%;}

.order-0{order: 0}
.order-1{order: 1}
.order-2{order: 2}
.order-3{order: 3}
.order-4{order: 4}
.order-5{order: 5}
.order-6{order: 6}
.order-7{order: 7}
.order-8{order: 8}
.order-9{order: 9}
.order-10{order: 10}

.wide{width: 100%}

.pad4-r, .pad4 {padding-right: 4px}
.pad4-l, .pad4 {padding-left: 4px}



@media screen and (max-width: 544px){
  .hidden-xs-down {display:initial}
  .hidden-sm-down {display:none!important}
  .hidden-md-down {display:none!important}
  .hidden-lg-down {display:none!important}
  .hidden-xl-down {display:none!important}
  .hidden-xs-up {display:none!important}
  .hidden-sm-up {display:initial}
  .hidden-md-up {display:initial}
  .hidden-lg-up {display:initial}
  .hidden-xl-up {display:initial}

  .order-xs-1{order:1}
  .order-xs-2{order:2}
  .order-xs-3{order:3}
  .order-xs-4{order:4}
  .order-xs-5{order:5}

  .xcol-1{flex:1 12 46%;}
  .xcol-2{flex:2 12 46%;}
  .xcol-3{flex:3 12 46%;}
  .xcol-4{flex:4 12 46%;}
  .xcol-5{flex:5 12 98%;}
  .xcol-6{flex:6 12 98%;}
  .xcol-7{flex:7 12 98%;}
  .xcol-8{flex:8 12 98%;}
  .xcol-9{flex:9 12 98%;}
  .xcol-10{flex:10 12 98%;}
  .xcol-11{flex:11 12 98%;}
  .xcol-12{flex:12 12 98%;}


  .xcol-10x1{flex:1 10 46%;}
  .xcol-10x2{flex:2 10 46%;}
  .xcol-10x3{flex:3 10 98%;}
  .xcol-10x4{flex:4 10 40%;}
  .xcol-10x5{flex:5 10 98%;}
  .xcol-10x6{flex:6 10 98%;}
  .xcol-10x7{flex:7 10 98%;}
  .xcol-10x8{flex:8 10 98%;}
  .xcol-10x9{flex:9 10 98%;}
  .xcol-10x10{flex:10 10 98%;}
}



@media screen and (min-width: 545px) and (max-width: 768px){
  .hidden-xs-down {display:initial}
  .hidden-sm-down {display:initial}
  .hidden-md-down {display:none!important}
  .hidden-lg-down {display:none!important}
  .hidden-xl-down {display:none!important}
  .hidden-xs-up {display:none!important}
  .hidden-sm-up {display:none!important}
  .hidden-md-up {display:initial}
  .hidden-lg-up {display:initial}
  .hidden-xl-up {display:initial}

  .order-sm-1{order:1}
  .order-sm-2{order:2}
  .order-sm-3{order:3}
  .order-sm-4{order:4}
  .order-sm-5{order:5}

  .xcol-1{flex:1 12 14%;}
  .xcol-2{flex:2 12 30%;}
  .xcol-3{flex:3 12 46%;}
  .xcol-4{flex:4 12 46%;}
  .xcol-5{flex:5 12 46%;}
  .xcol-6{flex:6 12 98%;}
  .xcol-7{flex:7 12 98%;}
  .xcol-8{flex:8 12 98%;}
  .xcol-9{flex:9 12 98%;}
  .xcol-10{flex:10 12 98%;}
  .xcol-11{flex:11 12 98%;}
  .xcol-12{flex:12 12 98%;}


  .xcol-10x1{flex:1 10 19%;}
  .xcol-10x2{flex:2 10 19%;}
  .xcol-10x3{flex:3 10 46%;}
  .xcol-10x4{flex:4 10 46%;}
  .xcol-10x5{flex:5 10 46%;}
  .xcol-10x6{flex:6 10 98%;}
  .xcol-10x7{flex:7 10 98%;}
  .xcol-10x8{flex:8 10 98%;}
  .xcol-10x9{flex:9 10 98%;}
  .xcol-10x10{flex:10 10 98%;}

}

@media screen and (min-width: 767px) and (max-width: 992px){
  .hidden-xs-down {display:initial}
  .hidden-sm-down {display:initial}
  .hidden-md-down {display:initial}
  .hidden-lg-down {display:none!important}
  .hidden-xl-down {display:none!important}
  .hidden-xs-up {display:none!important}
  .hidden-sm-up {display:none!important}
  .hidden-md-up {display:none!important}
  .hidden-lg-up {display:initial}
  .hidden-xl-up {display:initial}

  .order-md-1{order:1}
  .order-md-2{order:2}
  .order-md-3{order:3}
  .order-md-4{order:4}
  .order-md-5{order:5}
}


@media screen and (min-width: 993px) and (max-width: 1200px){
  .hidden-xs-down {display:initial}
  .hidden-sm-down {display:initial}
  .hidden-md-down {display:initial}
  .hidden-lg-down {display:initial}
  .hidden-xl-down {display:none!important}
  .hidden-xs-up {display:none!important}
  .hidden-sm-up {display:none!important}
  .hidden-md-up {display:none!important}
  .hidden-lg-up {display:none!important}
  .hidden-xl-up {display:initial}

  .order-lg-1{order:1}
  .order-lg-2{order:2}
  .order-lg-3{order:3}
  .order-lg-4{order:4}
  .order-lg-5{order:5}
}


@media screen and (min-width: 1201px) {
  .hidden-xs-down {display:initial}
  .hidden-sm-down {display:initial}
  .hidden-md-down {display:initial}
  .hidden-lg-down {display:initial}
  .hidden-xl-down {display:initial}
  .hidden-xs-up {display:none!important}
  .hidden-sm-up {display:none!important}
  .hidden-md-up {display:none!important}
  .hidden-lg-up {display:none!important}
  .hidden-xl-up {display:none!important}

  .order-xl-1{order:1}
  .order-xl-2{order:2}
  .order-xl-3{order:3}
  .order-xl-4{order:4}
  .order-xl-5{order:5}
}




.animated{
    animation: fadeIn 0.8s;
    transition: all 1s cubic-bezier(0.42, 0, 1, 1);
}

.slide{
    top: 0px; 
    position: relative;
    opacity: 1;
}

.slide-down{
    position: relative;
    padding-top: 400px;
    opacity: 0;
    order:200
}


.slide-left{
    position: relative;
    padding-left: 400px;
    opacity: 0;
    order:200
}

image-file-picker .card-img-overlay {
    padding: 4px;
}

image-file-picker .card {
    max-width: 250px
}

image-file-picker .card-text {
    background-color: rgba(255,255,255,.6)
}

image-file-picker  .card.principal{
    border: 2px solid red
}

.modal-full{
    width: 100vw;
    max-width: 1100px;
}

.hidden{
    display: none;
}


@keyframes fadeIn{
    0% {  opacity: 0}
    100% { opacity: 1; }
}

@keyframes slideIn {
    0% { transform: translate(30%, 0); opacity: 0}
    100% { transform: none; opacity: 1; }
}

@keyframes slideOut {
    0% { transform: none; opacity: 1}
    100% {transform: translate(0, 30%); opacity: 0 }
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto{
    padding-left: 0px!important;
    padding-right: 0px!important;
}

form-item .input {
    flex:1;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #bbb;
    font-size: 1.0rem;
    padding-left: 4px;
    padding-right: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 34px;
}

form-date-time .input{
    flex:1;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #bbb;
    font-size: 1.0rem;
    height: 34px;
}

form-item .cols{
    margin-bottom: 0px!important;
}

form-item{
    margin-bottom: 4px;
}



.disabled input,ux-input > input[disabled],ux-field select[disabled] {
    background-color: #f5f5f5!important;
    color: var(--ux-theme--input-disabled-foreground)!important;
}

.disabled .fa {
    color: #888!important;
}




tabs, .tab-content{
    width:100%;
}

tabs{
  padding-top: 4px;
  padding-bottom: 4px;
}
 
.tabs{
    height: 36px;
}

.tab-item {
    font-weight: bold;
    padding: 8px;
    background-color: white;
    _border-right: 2px solid #999;
    margin-right: 6px;
    border-bottom: 3px solid #eee;
    cursor: pointer;
}

.tab-item:first-child{
    _border-left: 2px solid #999;
}

.tab-item.selected{
    border-bottom: 3px solid #003D68;
    background-color: white;
}

.tab-item.disabled{
    color: #999;
}


 


.autocomplete{
    position: absolute;
    background-color: rgba(255,255,255,.8);
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    min-width: 260px;
    z-index: 1004;
    top: 54px;
}

.autocomplete .item{
   list-style-type: none;
   padding: 2px;
   cursor: pointer;
}

.autocomplete .item.selected{
    background-color: #003D68;
    color: white;
}

.autocomplete .item:hover {
    background-color: #333;
    color: white;
}


.local-lote-item{
    padding: 4px;
    border-radius: 5px;
    min-width: 46px;
    text-align:center;
    border: 1px solid #666;
    margin-right: 6px;
    cursor: pointer;
}

.local-lote-item.preselecionado{
    background-color:  #aaa;
    color: white;
}

.local-lote-item.selecionado{
    background-color:  #FFD54F;
    color: #333;
}

.local-lote-item.iniciogrupo{
    background-color:  #D54FFF;
    color: #333;
}


.table th, .table td{
    vertical-align: middle;
}

.ctable .fa {
    font-size: 120%;
}

.ctable{
    width: 100%;
}

.ctable th, .ctable td {
    padding: 0.25rem;
    vertical-align: top;
    border-top: 1px solid #eef2f6;
}


.ctable th  {
    background-color:  #0857c3;
    color: white;
    vertical-align: middle;
}

tr.tr-hover:hover td{
    background-color: #d9e9eb;
}
 



.sub-ctable .fa {
    font-size: 100%;
}

.sub-ctable{
    width: 100%;
    font-size: 0.85rem;
    border-bottom: 2px solid #909090;
}

.sub-ctable th, .sub-ctable td {
    padding: 0.25rem;
    vertical-align: top;
    border-top: 1px solid #eef2f6;
}

.sub-ctable td.group {
  border-top: none;
  padding: 0.25rem;
  padding-right: 0;
}

.sub-ctable th  {
  background-color: #e0e0e0;
  color: #222;
  vertical-align: middle;
}


form-flat.disabled .checked {
  background-color: #94c4E3;
}

form-flat.disabled .unchecked{
    background-color: #c4c4E3;
}


form-flat .checked {
    background-color: #007BC4;
    padding: 1px 15px;
    border-radius: 4px;
    color: white;
    cursor: pointer;

    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

form-flat .unchecked{
    background-color: #9AC5E3;
    padding: 1px 15px;
    border-radius: 4px;
    color: white;
    cursor: pointer;

    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flat{
    border-radius: 2px;
}

.flat-checked {
    background-color: #003D68;
    color: var(--ux-design--app-background);
    border: 1px solid #003D68;

    padding: 4px;
}
.flat-checked label{
    color: var(--ux-design--app-background)!important;
    font-weight: bold;
}

.flat-unchecked {
    background-color: #eee;
    border: 1px solid #888;
    padding: 4px;
}


.flat > div {
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;

}

.flat > :first-child{
    border-left: 2px solid #333;
    border-top-left-radius:8px;
    border-bottom-left-radius: 8px;
    padding-left: 12px;
}

.flat > :last-child{
    border-right: 2px solid #333;
    border-top-right-radius:8px;
    border-bottom-right-radius: 8px;
    padding-right: 12px;
}

.btn-steps{
    padding-top: 10px;
    margin-top: 10px;
}

.btn-steps .btn{
    /* border: 1px solid #e1edf3; */
    color: white;
    background-color: #003d68;
    padding: 2px;
    border-radius: 4px;
}



.progress-bar{
    background-color: #ddd!important;
    display: flex;
    flex-direction: row!important;
    flex:1;
    height: 30px!important;
    white-space: nowrap;
}

.progress-bar .done{
    background-color: #43A047;
    /* width: 48%; */
    height: 30px;
    _flex: 1;
}

.progress-bar .remain{
    _background-color: #ef5350;
    background-color: #F36F21;
    /* width: 50%; */
    height: 30px;
    _flex: 2;
}



/*** custom checkboxes ***/

form-checkbox input[type=checkbox] { display:none; } /* to hide the checkbox itself */
form-checkbox input[type=checkbox] + label:before {
  font-family: FontAwesome;
  font-size: 1.4rem;
  display: inline-block;
}

form-checkbox input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
form-checkbox input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

form-checkbox input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */
form-checkbox input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */

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


.text-bold{
  font-weight: bold;
}

.text-upper{
  text-transform: uppercase
}
.text-capitalize{
  text-transform: capitalize
}

.text-center{
  text-align: center
}

#notification .alert{
  right: 0;
  bottom: 0;
  min-width: 500px;
  max-width: 100vh;

  min-height: 40px;
  border-radius: 2px;
  padding: 4px 2px 4px 4px;
  font-size: 1rem;
}

#notification .alert-success .close, #notification .alert-info .close{
  display:none;
}


#notification .alert-warning {
  color: #444;
  background-color: #FFD54F;
  border-color: #444;
}

#notification .alert-danger {
  color: white;
  background-color: #ff3333;
  border-color: white;
}

#notification .alert-info {
  color: white;
  background-color: #0c5460;
  border-color: #bee5eb;
}

#notification .alert-success {
  color: white;
  background-color: #006700;
  border-color: #c3e6cb;
}

ux-dialog-overlay.active {
  background-color: rgba(255,255,255,.8);
}


.alert-success .icon:before {
  font-family: FontAwesome;
  content: "\f00c";
  font-size: 140%;
  padding-right: 5px;
}

.alert-info .icon:before {
  font-family: FontAwesome;
  content: "\f129";
  font-size: 140%;
  padding-right: 5px;
}

.alert-danger .icon:before{
  font-family: FontAwesome;
  content: "\f00d";
  font-size: 140%;
  padding-right: 5px;
}

.alert-warning .icon:before {
  font-family: FontAwesome;
  content: "\f071";
  font-size: 140%;
  padding-right: 5px;
}


buttons{
  background-color: #fafafa;
}

.button, buttons button{
  margin: 1px;
  background-color: white;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #aaa;
  padding: 6px 10px;
  cursor: pointer;
}

.button.primary, buttons button.primary{
  background-color:  #0857c3;
  color: white;
  border: 1px solid white;
}

.button.secondary, buttons button.secondary{
  background-color: #5294F0; 
  color: white;
  border: 1px solid white;
}

buttons .space {
  width: 10px;
}

.link{
  color: #0000ee;
  text-decoration: underline;
  cursor: pointer;
}

@media print {
  .noprint{
    display: none;
  }
}