
/*NAVBAR*/
  :root{
    --navbar-height:60px;
  }
  .navbar{
    padding-top : 0 !important;
    padding-bottom : 0 !important;
  }
/*NAVBAR BUTTON HIDE SHOW*/
  .nav-tabs-vertical >.nav-tabs, .nav-tabs-vertical > .nav-link{
      border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
      border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
      padding-left: var(--bs-nav-link-padding-y);
      padding-right: var(--bs-nav-link-padding-y);
  }

  .nav-tabs-vertical > button {
      text-align: left;
      font-size:85%;
  }
  .nav-tabs-vertical {
      border-bottom: 0px;
  }

  .btn-vsm, .btn-xs{
      --bs-btn-padding-y: 0.15rem;
      --bs-btn-padding-x: 0.25rem;
      --bs-btn-font-size: 0.750rem;
      --bs-btn-border-radius: 0.35rem; 
  }



/*FORM-FLOATING with SELECT2 && MULTI SELECT*/
  .form-floating  .select2-container--bootstrap-5{
      height: calc(3.5rem + calc(var(--bs-border-width) * 2));
      min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
      line-height: 1.25;
      background-color: var(--bs-body-bg);
      padding-top: 1.625rem;
      padding-bottom: 0.625rem;
  }

  .form-floating  .multiselect-dropdown{
      min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
      line-height: 1.25;
      background-color: var(--bs-body-bg);
      padding-top: 1.625rem;
      padding-bottom: 0.425rem;
  }


  .form-select-sm~.select2-container--bootstrap-5 .select2-selection {
      min-height: calc(1.5em + .5rem + 0px) !important;
      padding: .25rem .5rem;
      font-size: .875rem;
      border-radius: .2rem;
  }

  .form-floating .select2-container--bootstrap-5.select2-container--focus .select2-selection,
  .form-floating .select2-container--bootstrap-5.select2-container--open .select2-selection,
  .form-floating .multiselect-dropdown-search.form-control:focus {
      border-color: var(--bs-border-color) !important ;
      box-shadow: none !important;
  }

  .select2-container--bootstrap-5 .select2-dropdown{
    border-color: var(--bs-border-color) !important ;
  }


/*TABLE*/
  tr.border-bottom > td, table.table-bordered thead tr > th {
    box-shadow: 0px -1px 0px 0px rgba(222,226,230,0.75) inset;
  }

  table > thead > tr > th{
    text-align: center !important;
  }


  table > thead > tr > th > span{
    vertical-align: middle !important;
  }

/*FORM CONTROL*/
  .form-control-color{
      border-radius: 10px;
  }

  .form-control-xs{
      min-height: calc(1.3em + .3rem + calc(var(--bs-border-width)* 2)) !important;
      padding: .20rem .3rem;
      font-size: .750rem;
      border-radius: var(--bs-border-radius-sm);
  }

  .form-check-input:checked + label{
      font-weight: 700;
      text-decoration: underline;
  }

/*BACKGROUND*/
  .bg-gray-200{
    background-color:var(--bs-gray-200);
  }
  .bg-gray-300{
    background-color:var(--bs-gray-300);
  }
  .bg-gray-400{
    background-color:var(--bs-gray-400);
  }
  .bg-gray-500{
    background-color:var(--bs-gray-500);
  }
  .bg-gray-600{
    background-color:var(--bs-gray-600);
  }
  .bg-gray-700{
    background-color:var(--bs-gray-700);
  }
  .bg-gray-800{
    background-color:var(--bs-gray-800);
  }
  .bg-gray-900{
    background-color:var(--bs-gray-900);
  }

/*MODAL*/
  .modal-xl{
      --bs-modal-width:80%;
  }
  .modal-xxl{
    --bs-modal-width:93%;
  }

/*SWITCH*/
    /*SUCCESS*/
        .form-check-input-success:checked{
            background-color: var(--bs-green) !important;
            border-color: var(--bs-green) !important;
        }

        .form-check-input-success:focus {
            border-color: var(--bs-green) !important;
            outline: 0;
            box-shadow: 0 0 0 0.25rem  var(--bs-success-border-subtle) ! important;
        }

        .form-switch .form-check-input-success:focus {
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23418565'/%3e%3c/svg%3e");
        }
        .form-switch .form-check-input-success:checked {
            background-position: right center;
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
        }

    /*DARK*/
        .form-check-input-dark:checked{
            background-color: var(--bs-dark) !important;
            border-color: var(--bs-dark) !important;
        }

        .form-check-input-dark:focus {
            border-color: var(--bs-dark) !important;
            outline: 0;
            box-shadow: 0 0 0 0.25rem var(--bs-dark-bg-subtle) ! important;
        }
        .form-switch .form-check-input-dark:focus {
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e");
        }
        .form-switch .form-check-input-dark:checked {
            background-position: right center;
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
        }

    /*DANGER*/
        .form-check-input-danger:checked{
            background-color: var(--bs-red) !important;
            border-color: var(--bs-red) !important;
        }

        .form-check-input-danger:focus {
            border-color: var(--bs-red) !important;
            outline: 0;
            box-shadow: 0 0 0 0.25rem var(--bs-danger-border-subtle)  ! important;
        }
        .form-switch .form-check-input-danger:focus {
            --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23F1C8CC'/%3E%3C/svg%3E");
        }
        .form-switch .form-check-input-danger:checked {
            background-position: right center;
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
        }
        
    /*DANGER*/
    .form-check-input-danger:checked{
        background-color: var(--bs-red) !important;
        border-color: var(--bs-red) !important;
    }

    .form-check-input-danger:focus {
        border-color: var(--bs-red) !important;
        outline: 0;
        box-shadow: 0 0 0 0.25rem var(--bs-danger-border-subtle)  ! important;
    }
    .form-switch .form-check-input-danger:focus {
        --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23F1C8CC'/%3E%3C/svg%3E");
    }
    .form-switch .form-check-input-danger:checked {
        background-position: right center;
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }


/*HIDDEN INPUT */

    .hidden_input_file{
        display:none;
    }

    .hidden_input{
        border: 0px !important;
        border-radius:5px;
        background-color:inherit;
        color:inherit;
    }

    .hidden-input-date::-webkit-inner-spin-button, .hidden-input-date::-webkit-calendar-picker-indicator, .hidden-input-date-no-calendar::-webkit-calendar-picker-indicator {
        display: none !important;
        -webkit-appearance: none !important;
    }
    .hidden-input-date, .hidden-input-text, .hidden-select, .hidden-input-color{
        border: 0px !important;
        border-radius:5px;
        background-color:inherit;
        color:inherit;
    }
    .hidden-input-date:focus, .hidden-input-text:focus, .hidden-select:focus{
        outline: none !important;
        box-shadow: none;
        background-color:inherit;
        color:inherit;
    }
    .hidden-input-color:focus{
        background-color:inherit;
        border: none;
    }
    .hidden-input-color::-webkit-color-swatch {
        border: none;
        border-radius: 10px;
        padding: 0;
    }
    .hidden-input-color::-webkit-color-swatch-wrapper {
        border: none;
        border-radius: 10px;
        padding: 0;
    }

    @-moz-document url-prefix() {
        .hidden-input-color::-moz-color-swatch {
            border: none;
            border-radius: 10px;
            padding: 0;
        }
        .hidden-input-color::-moz-color-swatch-wrapper {
            border: none;
            border-radius: 10px;
            padding: 0;
        }
    }

    @media print {
    
        .container{
          max-width:100% !important;

        }

        .flex-print-column {
          -ms-flex-direction: column !important;
          flex-direction: column !important;
        }

        .col-print-1, .col-print-2, .col-print-3, .col-print-4, .col-print-5, .col-print-6, .col-print-7, .col-print-8, .col-print-9, .col-print-10, .col-print-11, .col-print-12 {
            float: left;
            flex: inherit !important;
        }

        .col-print-12 {
            width: 100%;
        }
        .col-print-11 {
            width: 91.66666667%;
        }
        .col-print-10 {
            width: 83.33333333%;
        }
        .col-print-9 {
            width: 75%;
        }
        .col-print-8 {
            width: 66.66666667%;
        }
        .col-print-7 {
            width: 58.33333333%;
        }
        .col-print-6 {
            width: 50%;
        }
        .col-print-5 {
            width: 41.66666667%;
        }
        .col-print-4 {
            width: 33.33333333%;
        }
        .col-print-3 {
            width: 25%;
        }
        .col-print-2 {
            width: 16.66666667%;
        }
        .col-print-1 {
            width: 8.33333333%;
        }
        .col-print{
            width: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 {
          float: left;
        }
        .col-sm-12 {
          width: 100%;
        }
        .col-sm-11 {
          width: 91.66666667%;
        }
        .col-sm-10 {
          width: 83.33333333%;
        }
        .col-sm-9 {
          width: 75%;
        }
        .col-sm-8 {
          width: 66.66666667%;
        }
        .col-sm-7 {
          width: 58.33333333%;
        }
        .col-sm-6 {
          width: 50%;
        }
        .col-sm-5 {
          width: 41.66666667%;
        }
        .col-sm-4 {
          width: 33.33333333%;
        }
        .col-sm-3 {
          width: 25%;
        }
        .col-sm-2 {
          width: 16.66666667%;
        }
        .col-sm-1 {
          width: 8.33333333%;
        }
        .col-sm-pull-12 {
          right: 100%;
        }
        .col-sm-pull-11 {
          right: 91.66666667%;
        }
        .col-sm-pull-10 {
          right: 83.33333333%;
        }
        .col-sm-pull-9 {
          right: 75%;
        }
        .col-sm-pull-8 {
          right: 66.66666667%;
        }
        .col-sm-pull-7 {
          right: 58.33333333%;
        }
        .col-sm-pull-6 {
          right: 50%;
        }
        .col-sm-pull-5 {
          right: 41.66666667%;
        }
        .col-sm-pull-4 {
          right: 33.33333333%;
        }
        .col-sm-pull-3 {
          right: 25%;
        }
        .col-sm-pull-2 {
          right: 16.66666667%;
        }
        .col-sm-pull-1 {
          right: 8.33333333%;
        }
        .col-sm-pull-0 {
          right: auto;
        }
        .col-sm-push-12 {
          left: 100%;
        }
        .col-sm-push-11 {
          left: 91.66666667%;
        }
        .col-sm-push-10 {
          left: 83.33333333%;
        }
        .col-sm-push-9 {
          left: 75%;
        }
        .col-sm-push-8 {
          left: 66.66666667%;
        }
        .col-sm-push-7 {
          left: 58.33333333%;
        }
        .col-sm-push-6 {
          left: 50%;
        }
        .col-sm-push-5 {
          left: 41.66666667%;
        }
        .col-sm-push-4 {
          left: 33.33333333%;
        }
        .col-sm-push-3 {
          left: 25%;
        }
        .col-sm-push-2 {
          left: 16.66666667%;
        }
        .col-sm-push-1 {
          left: 8.33333333%;
        }
        .col-sm-push-0 {
          left: auto;
        }
        .col-sm-offset-12 {
          margin-left: 100%;
        }
        .col-sm-offset-11 {
          margin-left: 91.66666667%;
        }
        .col-sm-offset-10 {
          margin-left: 83.33333333%;
        }
        .col-sm-offset-9 {
          margin-left: 75%;
        }
        .col-sm-offset-8 {
          margin-left: 66.66666667%;
        }
        .col-sm-offset-7 {
          margin-left: 58.33333333%;
        }
        .col-sm-offset-6 {
          margin-left: 50%;
        }
        .col-sm-offset-5 {
          margin-left: 41.66666667%;
        }
        .col-sm-offset-4 {
          margin-left: 33.33333333%;
        }
        .col-sm-offset-3 {
          margin-left: 25%;
        }
        .col-sm-offset-2 {
          margin-left: 16.66666667%;
        }
        .col-sm-offset-1 {
          margin-left: 8.33333333%;
        }
        .col-sm-offset-0 {
          margin-left: 0%;
        }
        .visible-xs {
          display: none !important;
        }
        .hidden-xs {
          display: block !important;
        }
        table.hidden-xs {
          display: table;
        }
        tr.hidden-xs {
          display: table-row !important;
        }
        th.hidden-xs,
        td.hidden-xs {
          display: table-cell !important;
        }
        .hidden-xs.hidden-print {
          display: none !important;
        }
        .hidden-sm {
          display: none !important;
        }
        .visible-sm {
          display: block !important;
        }
        table.visible-sm {
          display: table;
        }
        tr.visible-sm {
          display: table-row !important;
        }
        th.visible-sm,
        td.visible-sm {
          display: table-cell !important;
        }

        .flex-print-wrap {
          -ms-flex-wrap: wrap !important;
          flex-wrap: wrap !important;
        }

        .flex-print-nowrap {
          -ms-flex-wrap: nowrap !important;
          flex-wrap: nowrap !important;
        }
      }