@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* CUSTOM bootstrap CSS */

@import url("https://npmcdn.com/flatpickr/dist/themes/dark.css");
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  /* -webkit-flex-grow: 1; */
  /* flex-grow: 1; */
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 body{
  --default-status-color: #52565e;
  --blue-status-color: #0077c8;
  --purple-status-color: #52057f;
  --carmesi-status-color: #bf033b;
  --green-status-color: #008000;
  --teal-status-color: #4a8594;
  --dark-status-color: #000000;
  --amber-status-color: #ffc107;
  --cyan-status-color: #00c4cc;

 }

 .circle-status{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: 0.5;
 }
 .circle-status:hover{
  cursor: pointer;
  opacity: 1;
 }
 .circle-status.selected{
  opacity: 1;
 }
.bg-default-status-color{
  background-color: var(--default-status-color);
}
.bg-blue-status-color{
  background-color: var(--blue-status-color);
}
 .bg-purple-status-color{
  background-color: var(--purple-status-color);
 }
 .bg-carmesi-status-color{
  background-color: var(--carmesi-status-color);
 }
 .bg-green-status-color{
  background-color: var(--green-status-color);
 }
 .bg-teal-status-color{
  background-color: var(--teal-status-color);
 }
 .bg-dark-status-color{
  background-color:   var(--dark-status-color);
 }
 .bg-amber-status-color{
  background-color: var(--amber-status-color);
 }
 .default-status-color{
  color: var(--default-status-color);
 }
 .blue-status-color{
  color: var(--blue-status-color);
 }
 .purple-status-color{
  color: var(--purple-status-color);
 }
 .carmesi-status-color{
  color: var(--carmesi-status-color);
 }
 .green-status-color{
  color: var(--green-status-color);
 }
 .teal-status-color{
  color: var(--teal-status-color);
 }
 .dark-status-color{
  color: var(--dark-status-color);
 }
 .amber-status-color{
  color: var(--amber-status-color);
 }
 
 
 
 
 a{
  text-decoration: none !important;
 }
 


 .text-warning {
    color: #ffc107; /* Ámbar */
  }
  
  .text-orange {
    color: #fd7e14; /* Naranja */
  }
  
  .text-danger {
    color: #dc3545; /* Rojo */
  }


body{
  --unity: 4px;
}

.h-2{
  height: calc(var(--unity) * 2);
}
.h-4{
  height: calc(var(--unity) * 4)
}
.h-8{
  height: calc(var(--unity) * 8)
}
.h-10{
  height: calc(var(--unity) * 10)
}
.h-12{
  height: calc(var(--unity) * 12)
}
.h-16{
  height: calc(var(--unity) * 16)
}

/* Badge Outline Styles */
.badge-outline {
  background-color: transparent !important;
  border: 1px solid;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
}

.badge-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary);
}

.badge-outline-secondary {
  color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary);
}

.badge-outline-success {
  color: var(--bs-success) !important;
  border-color: var(--bs-success);
}

.badge-outline-danger {
  color: var(--bs-danger) !important;
  border-color: var(--bs-danger);
}

.badge-outline-warning {
  color: var(--bs-warning) !important;
  border-color: var(--bs-warning);
}

.badge-outline-info {
  color: var(--bs-info) !important;
  border-color: var(--bs-info);
}

.badge-outline-dark {
  color: var(--bs-dark) !important;
  border-color: var(--bs-dark);
}

/* Hover states */
.badge-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

.badge-outline-secondary:hover {
  background-color: var(--bs-secondary) !important;
  color: #fff !important;
}

.badge-outline-success:hover {
  background-color: var(--bs-success) !important;
  color: #fff !important;
}

.badge-outline-danger:hover {
  background-color: var(--bs-danger) !important;
  color: #fff !important;
}

.badge-outline-warning:hover {
  background-color: var(--bs-warning) !important;
  color: #fff !important;
}

.badge-outline-info:hover {
  background-color: var(--bs-info) !important;
  color: #fff !important;
}

.badge-outline-dark:hover {
  background-color: var(--bs-dark) !important;
  color: #fff !important;
}