@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/**
* Captana and Tailwind colors
* https://tailwindcss.com/docs/customizing-colors
*/
:root {
  --captana-primary-color: #046cdc;
  --captana-primary-color-2: #50a3fb;
  --captana-primary-darken: #034c9a;
  --captana-color-accent: #2de6c4;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --green-500: #22c55e;
  --yellow-500: #eab308;
  --orange-500: #f97316;
  --red-600: #dc2626;

}

/*
* Body
*/
body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  background: -moz-linear-gradient(0deg, #eaecf1 0%, #f5f6f9 100%);
  background: -webkit-linear-gradient(0deg, #eaecf1 0%, #f5f6f9 100%);
  background: linear-gradient(0deg, #eaecf1 0%, #f5f6f9 100%);
}

/*
* Main content (all but sidebar)
*/
.main-content {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

@media (min-width: 769px) {
  .main-content {
    padding-left: 105px;
  }
}

.page-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--captana-primary-color);
}

@media (min-width: 769px) {
  .h-md-100 {
    height: 100% !important;
  }
}

/**
* Text
*/
.text-sm {
  font-size: 0.875rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-captana-primary {
  color: var(--captana-primary-color);
}

.text-captana-primary-2 {
  color: var(--captana-primary-color-2);
}

.text-captana-accent {
  color: var(--captana-color-accent)
}

.text-slate-600 {
  color: var(--slate-600);
}

.text-slate-500 {
  color: var(--slate-500);
}

.text-slate-400 {
  color: var(--slate-400);
}

.text-green-500 {
  color: var(--green-500);
}

.text-yellow-500 {
  color: var(--yellow-500);
}

.text-orange-500 {
  color: var(--orange-500);
}

.text-red-600 {
  color: var(--red-600);
}

/**
* Background
*/
.bg-captana {
  background-color: var(--captana-primary-color);
}

.bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-captana-2 {
  background-color: var(--captana-primary-color-2);
}

.bg-green-500 {
  background-color: var(--green-500);
}

.bg-yellow-500 {
  background-color: var(--yellow-500);
}

.bg-orange-500 {
  background-color: var(--orange-500);
}

.bg-red-600 {
  background-color: var(--red-600);
}

/**
* Button
*/
/* override Bootstrap button style  */
.btn-primary {
  background-color: var(--captana-primary-color) !important;
  border-color: var(--captana-primary-color) !important;
}

.btn-primary:hover {
  background-color: var(--captana-primary-darken) !important;
  border-color: var(--captana-primary-darken) !important;
}

.btn-outline-primary {
  color: var(--captana-primary-color) !important;
  border-color: var(--captana-primary-color) !important;
}

.btn-outline-primary:hover {
  color: #fff !important;
  background-color: var(--captana-primary-darken) !important;
  border-color: var(--captana-primary-darken) !important;
}

/**
* Card
*/
/* override Bootstrap card style  */
.card {
  border: 0;
}

/**
* Select2 override
*/
.select2 {
  width: 100% !important;
}

.select2-container {
  margin: 0.25rem !important;
}

.select2-container .select2-selection--single {
  padding: 0.125rem !important;
  height: auto !important;
  min-height: 32px !important;
}

/** 
* Pagination 
*/
.page-link {
  color: var(--captana-primary-color);
}

.active>.page-link,
.page-link.active {
  background-color: var(--captana-primary-color);
  border-color: var(--captana-primary-color);
  color: #fff;
}

/**
* Select language
*/
.select-langage {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/**
* Table
*/
table tbody {
  font-size: 0.875rem;
  font-weight: 300;
}

/** override Bootstrap table style **/
.table>*>*>th {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-600);
}

.table>*>*>td {
  color: var(--slate-700);
}

/**
* DataTable override
*/
/* Fix alignement bug on sort column */
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: left !important;
}

/**
* Form
*/
/** override Bootstrap form style **/
.form-label {
  margin-bottom: 0;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--slate-500);
}

/**
* Circle
*/
.circle {
  border-radius: 50%;
  display: inline-block;
}

.circle.circle-md {
  width: 24px;
  height: 24px;
}

hr {
  border-top: var(--slate-400) solid 1px;
}

.swal2-cancel {
  margin-right : 20px;
}
.swal2-confirm {
  margin-right : 0px !important;
}



/* Maintenance modal operation buttons */
.maint-ops .maint-op { position:relative; padding:.35rem .65rem .35rem .55rem; border-radius:.55rem; min-width:190px; max-width:240px; text-align:left; }
.maint-ops .maint-op .op-icon-wrapper { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#f1f3f5; font-size:.85rem; flex-shrink:0; }
.maint-ops .maint-op[data-op=reboot] .op-icon-wrapper { background:#fdecea; color:#c62828; }
.maint-ops .maint-op[data-op=synchronize] .op-icon-wrapper { background:#e6f6ec; color:#1b5e20; }
.maint-ops .maint-op[data-op=CV_logs] .op-icon-wrapper { background:#e3f2fd; color:#0d47a1; }
.maint-ops .maint-op[data-op=GUI_logs] .op-icon-wrapper { background:#eceff1; color:#455a64; }
.maint-ops .maint-op .op-label { font-size:.75rem; font-weight:600; }
.maint-ops .maint-op .op-sub { font-size:.6rem; line-height:1.05; }
.maint-ops .maint-op:disabled { opacity:.6; }
.maint-ops .maint-op .spinner-border { position:absolute; right:.55rem; top:50%; margin-top:-.5em; }
@media (max-width: 640px){
    .maint-ops .maint-op{ min-width:150px; }
    .maint-ops .maint-op .op-sub{ display:none; }
}

/* Single sweep animated border (traces the outline) */
@property --sweep-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.loading-border { position:relative; }
.loading-border:after { 
    content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none;
    --accent: var(--spinner-accent, #0d6efd);
    background:
        conic-gradient(from var(--sweep-angle), var(--accent) 0deg 55deg, transparent 55deg 360deg) border-box;
    /* Mask to keep only the ring (border area) */
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation: maintBorderSweep 1.1s linear infinite;
    filter: drop-shadow(0 0 1px rgba(0,0,0,.15));
}
@keyframes maintBorderSweep { to { --sweep-angle: 360deg; } }
/* Accent color variants */
[data-op=reboot].loading-border:after { --spinner-accent:#c62828; }
[data-op=synchronize].loading-border:after { --spinner-accent:#1b5e20; }
[data-op=CV_logs].loading-border:after { --spinner-accent:#0d47a1; }
[data-op=GUI_logs].loading-border:after { --spinner-accent:#455a64; }
[data-op=CV_logs_search].loading-border:after { --spinner-accent:#0d47a1; }