

/** oculta form cuando está en modo lista **/
.form.fb2 { min-height: 60vh; }
.view:not(.designer) .fb-form.cansearch:not(.form-mode):not(.form-mode-new) .form-edit, 
.view:not(.designer) .fb-form.cansearch:not(.list-mode) .form-list, 
.view:not(.designer) .fb-form.cansearch:not(.form-mode):not(.form-mode-new) .card-footer { 
       display: none;  
}

.fb-form.form-mode .form-edit, 
.fb-form.form-mode-new .form-edit, 
.fb-form.form-mode-new .card-footer, 
.fb-form.list-mode .form-list, 
.fb-form.form-mode .card-footer
{ 
    display: block; 
} 

.view:not(.designer) .fb-form.form-mode-new .form-new-btn, 
.view:not(.designer) .fb-form.form-mode-new .form-edit-btn,
.view:not(.designer) .fb-form.form-mode-new .form-delete-btn,
.view:not(.designer) .fb-form.list-mode .form-search-btn,
.view:not(.designer) .fb-form.list-mode .form-edit-btn,
.view:not(.designer) .fb-form.list-mode .form-delete-btn
{
  display: none;
}


.view.popup .fb-form > .card-header {
  --bg-opacity: 1;
  background-color: rgba(var(--dark-rgb), var(--bg-opacity)) !important;
  --text-opacity: 1;
  color: rgba(var(--light-rgb), var(--text-opacity)) !important;
}

.view.popup .fb-form .card-header h5 {
    color: white;   
    
}

.fb-form.form-readonly .edit-only { display: none; }


fieldset legend {
  font-size: medium;
    border-bottom: none;
    border-top: 1px solid #eee;
    padding-bottom: 2px !important;
    margin-bottom: 10px !important;
    padding-top: 9px !important;
}


.row fieldset:not(:last-child) {
   /** padding-right: 20px; **/
}

.row fieldset:first-child {
    padding-left: 0;   
}

.row fieldset legend {
    padding-top: 0;
}


.fb-form fieldset legend {
    font-size: medium;
    border-bottom: none;
    border-top: 0.063em solid #eee;
    padding-bottom: 0.125em !important;
    margin-bottom: 0.625em !important;
    padding-top: 0.563em !important;
    /* background-color: #26a69a7d; */
    padding: 0.188em 0.375em 1.250em 0.625em;
    /*padding-bottom: 0.625em !important;*/
    color: #000000ab;
    font-size: 16px;
    font-weight: 600;
    padding-left: 7px;
    
}

.fb-form .form-search-btn span,.fb-form .form-new-btn span,.fb-form .form-edit-btn span {
    /** display: none; **/
}

.fb-form .form-search-btn i,.fb-form .form-new-btn i,.fb-form .form-edit-btn i, .fb-form .form-delete-btn i  {
    margin-right: 0 !important;
}

.fb-form .form-search-btn span,.fb-form .form-new-btn span,.fb-form .form-edit-btn span, .fb-form .form-delete-btn span  {
    font-size: 14px;   
}

.fb-form .form-edit-btn span, .fb-form .form-delete-btn span  {
    display: none;
}

.fb-form .form-delete-btn i  {
    font-size: 19px;
}


.fb-form .card-header {
    background-color: var(--module-color);
    color: white;
}

.fb-form {
    padding-right: 0;
    padding-left: 0;
}


/*---- filas ----*/
.fb-form .row {
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
}

.fb-subform .row, .subform-table .row {
  margin-left: 5px;
  margin-right: 5px;
  padding-right: 0px;
  padding-left: 0px;
}

/**
  .col, .col30-xs-1, .col30-sm-1, .col30-md-1, .col30-lg-1, .col30-xs-2, .col30-sm-2, .col30-md-2, .col30-lg-2, .col30-xs-3, .col30-sm-3, .col30-md-3, .col30-lg-3, .col30-xs-4, .col30-sm-4, .col30-md-4, .col30-lg-4, .col30-xs-5, .col30-sm-5, .col30-md-5, .col30-lg-5, .col30-xs-6, .col30-sm-6, .col30-md-6, .col30-lg-6, .col30-xs-7, .col30-sm-7, .col30-md-7, .col30-lg-7, .col30-xs-8, .col30-sm-8, .col30-md-8, .col30-lg-8, .col30-xs-9, .col30-sm-9, .col30-md-9, .col30-lg-9, .col30-xs-10, .col30-sm-10, .col30-md-10, .col30-lg-10, .col30-xs-11, .col30-sm-11, .col30-md-11, .col30-lg-11, .col30-xs-12, .col30-sm-12, .col30-md-12, .col30-lg-12, .col30-xs-13, .col30-sm-13, .col30-md-13, .col30-lg-13, .col30-xs-14, .col30-sm-14, .col30-md-14, .col30-lg-14, .col30-xs-15, .col30-sm-15, .col30-md-15, .col30-lg-15, .col30-xs-16, .col30-sm-16, .col30-md-16, .col30-lg-16, .col30-xs-17, .col30-sm-17, .col30-md-17, .col30-lg-17, .col30-xs-18, .col30-sm-18, .col30-md-18, .col30-lg-18, .col30-xs-19, .col30-sm-19, .col30-md-19, .col30-lg-19, .col30-xs-20, .col30-sm-20, .col30-md-20, .col30-lg-20, .col30-xs-21, .col30-sm-21, .col30-md-21, .col30-lg-21, .col30-xs-22, .col30-sm-22, .col30-md-22, .col30-lg-22, .col30-xs-23, .col30-sm-23, .col30-md-23, .col30-lg-23, .col30-xs-24, .col30-sm-24, .col30-md-24, .col30-lg-24, .col30-xs-25, .col30-sm-25, .col30-md-25, .col30-lg-25, .col30-xs-26, .col30-sm-26, .col30-md-26, .col30-lg-26, .col30-xs-27, .col30-sm-27, .col30-md-27, .col30-lg-27, .col30-xs-28, .col30-sm-28, .col30-md-28, .col30-lg-28, .col30-xs-29, .col30-sm-29, .col30-md-29, .col30-lg-29, .col30-xs-30, .col30-sm-30, .col30-md-30, .col30-lg-30 {
    padding-left: 0px;
}
 .fb-form .row>* {
   
    padding-left: 0;
    
}
**/


/*------------ css para titulos  y subtitulos  ---------*/

.fb-form h5.panel-title {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}

.fb-form h5.panel-title .subtitle {
    font-size: 12px;
}

.fb-form .subtitle {
    display: block;
    float: left;
}
/*------------------------ End Titulos -----------------------------*/

/*------------ css para botones en formularios--------------*/
.form-search-btn, .form-new-btn,  .form-edit-btn {
       padding: 8px 15px;
}

.fb-form .subtitle .fb-button i {
    font-size: 16px;
    margin-right: 5px;
}

.fb-form .subtitle .fb-button button {
    border-color: black;
}


.fb-form .form-buttons {
   /* display: block;*/
    display:flex;
    float: right;
    margin-left: 10px;
}

button span.shortcut {
    font-size: 9px;
    margin: -6px 5px 4px -4px;
}

.btn-save i, .btn-cancel i {
    margin: 2px 0px 1px 3px !important;
}
.btn-save, .btn-cancel {
    padding: 9px 19px 10px 23px;
}

.fb-form .subtitle button {
        --btn-color: var(--body-color);
    --btn-bg: var(--gray-200);
    --btn-border-color: var(--gray-400);
    --btn-hover-color: var(--body-color);
    --btn-hover-bg: var(--gray-300);
    --btn-hover-border-color: var(--gray-500);
    --btn-focus-shadow-rgb: 207, 207, 209;
    --btn-active-color: var(--body-color);
    --btn-active-bg: var(--gray-400);
    --btn-active-border-color: var(--gray-600);
    --btn-active-shadow: inset 0 0 0 0 transparent;
    --btn-disabled-color: var(--body-color);
    --btn-disabled-bg: var(--gray-200);
    --btn-disabled-border-color: var(--gray-400);

}

/*---------------------- End botones-------------------------------*/



/*----------------- css pata tablas en form -----------------------*/
.form-list .fb.fb-table {
    margin-top: -20px;
}

.form-list > .fb-table > .sticky-table-container {
    height: calc(100vh - 256px);
}
.form-list .fb.fb-table td, .form-list .fb.fb-table th {
    font-size: 13px;
}


/*------------------- End Tablas ----------------------------------*/

.fb.fb-form > .card-body {
    overflow-x: auto;
}



/********* LABELS **********************************************/
/** estilo campos con labels dentro **/

.form-group label { 
    cursor: text; 
    font-size: 12px;
}


.form-group {
  position: relative !important;
 /* min-height: 60px;*/
}

.form-group.text-right-onreadonly > label {
    position: absolute;
    right: 10px;
    top: 5px;
    color: #737373;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
     z-index: 1;
    text-align: right;
    
    
}

.form-group:not(.text-right-onreadonly) > label {
    z-index: 1;
    position: absolute;
    left: 12px;
    top: -10px;
    color: #737373;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /** @added 18/03/24 **/
    left: 0;
    top: -5px;
    width: 100%;
    padding: 9px 14px 0px 8px;
    /*transform: matrix(0.85, 0, 0, 0.85, 2.04, -5.44);*/
    /*transform: matrix(1, 0, 0, 0.85, 0, -5.44);*/
    display: block;
    font-weight: 400;
    line-height: 22.001px;
    opacity: 0.7;
    overflow-wrap: break-word;
    text-align: start;
    text-overflow: ellipsis;
    text-size-adjust: 100%;
    text-wrap: nowrap;
    transform-origin: 0px 0px;
}

.fb-subformrow .form-group > label {
    padding: 6px 14px 0px 8px;
}

/** fin estilo campos con labels dentro **/

/** Estilo de campos unidos **/
.bond-with-prev {
   padding-left: 0 !important;
}

.bond-with-prev input {
    padding-left: 0 !important;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bond-with-prev .select2-selection {
    padding-left: 0 !important;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


.bonded-by-next {
   padding-right: 0 !important;
}

.bonded-by-next label {
    width: auto !important;
}

.bonded-by-next input {
    padding-right: 0 !important;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bonded-by-next .select2-selection {
    padding-right: 0 !important;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bonded-by-next .select2-selection--single .select2-selection__arrow:after {
  right: 4px;
}
/** Fin estilo campos unidos **/









/***** -------------------- FORM READONLY BEAHAVIOUR ------------- **/

.form-readonly.readonly .panel-footer {
  display: none;
}

.form-readonly.readonly .form-group {
    /**text-align: right; **/
    
}

.form-readonly:not(.readonly) .onlyreadonly {
  display: none;
}

.form-readonly.readonly .notreadonly {
  display: none;
}


.form.readonly .btn-save, .form.readonly .btn-cancel {
  display: none;
}

.form.readonly .stepy-finish {
  display: none;
}

.form-readonly.readonly .subform-add {
  display: none;
}

.list-mode .only-form-mode { display: none; }
.form-mode .only-list-mode { display: none; }




@media print {
	
    /* IMPRESION */
  fieldset legend {
    font-size: normal;
  }
}

.card-footer .buttons-nobuttons { display: none }



@media (max-width: 992px) {
    .fb-form .card-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #fff;
    }
    
    .view:not(.popup) .card-footer {
        position: relative;
        bottom: 0;
        background-color: #ffffff00;
        border: none;
    }
}

.form.no-actions .card-footer button {
    display: none;
}





