:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;
  
  --white: #ffffff;
  --smoke: whitesmoke;
  --soft: wheat;
  --gray-100: #f5f6f7;
  --gray-200: #eceff1;
  --gray-300: #e0e0e0;
  --gray-400: #cfd8dc;
  --gray-500: #b0bec5;
  --gray-600: #90a4ae;
  --gray-700: #607d8b;
  --gray-800: #455a64;
  --gray-900: #263238;
  --dark: #333333;
  --black: #000000;

  --blue: steelblue;
  --blue-dark: #145ca8;
  --light-blue: #9fd9f4;
  --blue-hover: #64b5f6;
  --blue-deep: #0d47a1;

  --green: #82B366;
  --green-dark: #234b1e;
  --light-green: #cfe9c8;
  --green-hover: #1e421a;
  --green-deep: #0b3d0b;

  --red: #e09a9a;
  --red-dark: #6f1414;
  --light-red: #f8d7da;
  --red-hover: #d32f2f;
  --red-deep: #b71c1c;

  --yellow: #f0d38d;
  --yellow-dark: #856404;
  --light-yellow: #fff3cd;
  --yellow-hover: #d6a300;
  --yellow-deep: #b58900;

  --muted: #666666;
  --muted-strong: #222222;

  --shadow-light: 0 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 2px 5px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 5px 20px rgba(0, 0, 0, 0.3);
  --overlay: rgba(0, 0, 0, 0.5);

  --font-family-base: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-family-console: "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", "Courier New", monospace;
  --font-size-xs: .8125rem;
  --font-size-sm: .875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --line-height-base: 1.5;

  --radius-1: 4px;
  --radius-2: 8px;      
  --radius-3: 12px;
  --radius-4: 20px;

  --shadow-1: 0 1px 4px rgba(0,0,0,.08);
  --shadow-2: 0 2px 8px rgba(0,0,0,.12);
  --shadow-3: 0 6px 20px rgba(0,0,0,.18);

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family-base);
}

.m-0  { margin: var(--space-0) !important; }
.m-1  { margin: var(--space-1) !important; }
.m-2  { margin: var(--space-2) !important; }
.m-3  { margin: var(--space-3) !important; }
.m-4  { margin: var(--space-4) !important; }
.m-5  { margin: var(--space-5) !important; }
.m-auto { margin: auto !important; }

.mt-0 { margin-top: var(--space-0) !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-auto { margin-top: auto !important; }

.mb-0 { margin-bottom: var(--space-0) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-auto { margin-bottom: auto !important; }

.ms-0 { margin-left: var(--space-0) !important; }
.ms-1 { margin-left: var(--space-1) !important; }
.ms-2 { margin-left: var(--space-2) !important; }
.ms-3 { margin-left: var(--space-3) !important; }
.ms-4 { margin-left: var(--space-4) !important; }
.ms-5 { margin-left: var(--space-5) !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: var(--space-0) !important; }
.me-1 { margin-right: var(--space-1) !important; }
.me-2 { margin-right: var(--space-2) !important; }
.me-3 { margin-right: var(--space-3) !important; }
.me-4 { margin-right: var(--space-4) !important; }
.me-5 { margin-right: var(--space-5) !important; }
.me-auto { margin-right: auto !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

.p-0  { padding: var(--space-0) !important; }
.p-1  { padding: var(--space-1) !important; }
.p-2  { padding: var(--space-2) !important; }
.p-3  { padding: var(--space-3) !important; }
.p-4  { padding: var(--space-4) !important; }
.p-5  { padding: var(--space-5) !important; }
.p-auto { padding: auto !important; }

.pt-0 { padding-top: var(--space-0) !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pt-auto { padding-top: auto !important; }

.pb-0 { padding-bottom: var(--space-0) !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.pb-auto { padding-bottom: auto !important; }

.ps-0 { padding-left: var(--space-0) !important; }
.ps-1 { padding-left: var(--space-1) !important; }
.ps-2 { padding-left: var(--space-2) !important; }
.ps-3 { padding-left: var(--space-3) !important; }
.ps-4 { padding-left: var(--space-4) !important; }
.ps-5 { padding-left: var(--space-5) !important; }
.ps-auto { padding-left: auto !important; }

.pe-0 { padding-right: var(--space-0) !important; }
.pe-1 { padding-right: var(--space-1) !important; }
.pe-2 { padding-right: var(--space-2) !important; }
.pe-3 { padding-right: var(--space-3) !important; }
.pe-4 { padding-right: var(--space-4) !important; }
.pe-5 { padding-right: var(--space-5) !important; }
.pe-auto { padding-right: auto !important; }

.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}
.d-block{display:block!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}
.d-grid{display:grid!important}.d-inline-grid{display:inline-grid!important}
.d-fullscreen{position: absolute!important;top:0!important;left:0!important;height: 100vh!important;width: 100vw!important;z-index: 9999!important}

.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}
.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}
.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}
.flex-row-wrap{flex-direction:row!important;flex-wrap:wrap!important}
.flex-row-nowrap{flex-direction:row!important;flex-wrap:nowrap!important}
.flex-column-wrap{flex-direction:column!important;flex-wrap:wrap!important}
.flex-column-nowrap{flex-direction:column!important;flex-wrap:nowrap!important}

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

.justify-start{justify-content:flex-start!important}.justify-center{justify-content:center!important}
.justify-end{justify-content:flex-end!important}.justify-between{justify-content:space-between!important}
.justify-around{justify-content:space-around!important}

.align-start{align-items:flex-start!important}.align-center{align-items:center!important}.align-end{align-items:flex-end!important}
.align-baseline{align-items:baseline!important}.align-stretch{align-items:stretch!important}

.position-static{position:static!important}.position-relative{position:relative!important}
.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:sticky!important}
.top-0{top:0!important}.bottom-0{bottom:0!important}.start-0{left:0!important}.end-0{right:0!important}
.top-50{top:50%!important;transform:translateY(-50%)!important}
.left-50{left:50%!important;transform:translateX(-50%)!important}.left-0{left: 0!important}
.right-0{right: 0!important}.right-50{right:50%!important;transform:translateX(50%)!important}
.bottom-50{bottom:50%!important;transform:translateY(50%)!important}.bottom-100{bottom:100%!important}
.center-xy{top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important}
.top{top:var(--space-3)!important}.end{right:var(--space-3)!important}.start{left:var(--space-3)!important}.bottom{bottom:var(--space-3)!important}
.z-0{z-index:0!important}.z-1{z-index:1!important}.z-10{z-index:10!important}.z-100{z-index:100!important}.z-max{z-index:9999!important}

.bg-white{background-color:var(--white)!important}
.bg-black{background-color:var(--black)!important}
.bg-dark{background-color:var(--dark)!important}
.bg-gray{background-color:var(--gray-400)!important}
.bg-light-gray{background-color:var(--gray-300)!important}
.bg-blue{background-color:var(--blue)!important}
.bg-green{background-color:var(--green)!important}
.bg-red{background-color:var(--red)!important}
.bg-yellow{background-color:var(--light-yellow)!important}
.bg-light-blue{background-color:var(--light-blue)!important}

.text-center{text-align:center!important}.text-left{text-align:left!important}
.text-right{text-align:right!important}.text-justify{text-align:justify!important}

.text-black{color:var(--black)!important}.text-white{color:var(--white)!important}
.text-dark{color:var(--dark)!important}.text-gray{color:var(--gray-400)!important}
.text-light-gray{color:var(--gray-300)!important}.text-blue{color:var(--blue)!important}
.text-green{color:var(--green)!important}.text-red{color:var(--red)!important}
.text-deep-red{color:var(--red-deep)!important}.text-yellow{color:var(--yellow-dark)!important}
.text-light-yellow{color:var(--light-yellow)!important}.text-light-blue{color:var(--light-blue)!important}
.text-muted{color:var(--muted)!important}.text-muted-strong{color:var(--muted-strong)!important}

.font-400{font-weight:400!important}.font-500{font-weight:500!important}.font-600{font-weight:600!important}
.font-700{font-weight:700!important}.font-800{font-weight:800!important}.font-900{font-weight:900!important}
.font-large{font-size:1.2rem!important}.font-medium{font-size:1rem!important}.font-small{font-size:.9rem!important}

.text-select-none{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}

.gap-0{gap:0!important}.gap-1{gap:.5rem!important}.gap-2{gap:1rem!important}.gap-3{gap:1.5rem!important}

.h-100{height:100vh!important}.h-75{height:75vh!important}.h-50{height:50vh!important}.h-25{height:25vh!important}
.h-per-100{height:100%!important}.h-per-75{height:75%!important}.h-per-50{height:50%!important}.h-per-25{height:25%!important}

.w-100{width:100vw!important}.w-75{width:75vw!important}.w-50{width:50vw!important}.w-25{width:25vw!important}
.w-per-100{width:100%!important}.w-per-75{width:75%!important}.w-per-50{width:50%!important}.w-per-25{width:25%!important}

.min-h-0{min-height:0!important}.min-h-100{min-height:100vh!important}
.min-w-0{min-width:0!important}.min-w-100{min-width:100vw!important}
.max-h-0{max-height:0!important}.max-h-100{max-height:100vh!important}
.max-w-0{max-width:0!important}.max-w-100{max-width:100vw!important}

.text-align-left{text-align:left!important}.text-align-center{text-align:center!important}
.text-align-right{text-align:right!important}.text-align-justify{text-align:justify!important}

.overflow-hidden{overflow:hidden!important}.overflow-auto{overflow:auto!important}.overflow-visible{overflow:visible!important}

.border-solid{border-style:solid!important}.border-dashed{border-style:dashed!important}
.border-dotted{border-style:dotted!important}.border-none{border-style:none!important}

.border-top{border-top:1px solid!important}.border-bottom{border-bottom:1px solid!important}
.border-start{border-left:1px solid!important}.border-end{border-right:1px solid!important}
.border-all{border:1px solid!important}

.border-0{border-width:0!important}.border-1{border-width:1px!important}.border-2{border-width:2px!important}
.border-3{border-width:3px!important}.border-4{border-width:4px!important}.border-5{border-width:5px!important}

.border-white{border-color:var(--white)!important}.border-black{border-color:var(--black)!important}
.border-dark{border-color:var(--dark)!important}.border-gray{border-color:var(--gray-400)!important}
.border-light-gray{border-color:var(--gray-300)!important}
.border-blue{border-color:var(--blue)!important}.border-green{border-color:var(--green)!important}
.border-red{border-color:var(--red)!important}.border-yellow{border-color:var(--yellow-dark)!important}
.border-light-blue{border-color:var(--light-blue)!important}

.rounded-0{border-radius:0!important}.rounded-1{border-radius:var(--radius-1)!important}
.rounded-2{border-radius:var(--radius-2)!important}.rounded-3{border-radius:var(--radius-3)!important}
.rounded-4{border-radius:var(--radius-4)!important}.rounded-circle{border-radius:50%!important}

.lh-tight{line-height:1.2!important}.lh-normal{line-height:var(--line-height-base)!important}.lh-loose{line-height:1.8!important}
.cursor-pointer{cursor:pointer!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-default{cursor:default!important}

.content {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--white);
}
img.img-bg{position:absolute;width:100%;height:100%;object-fit:fill;top:0;left:0;z-index:0}
h2.title-floating{
  margin-top:9vh;z-index:1;color:var(--white);font-size:1.8rem;width:80%;line-height:1.4
}

.container{
  width:100%;
  margin-left:auto;margin-right:auto;
  padding-left:1rem;padding-right:1rem;box-sizing:border-box;
}
@media (min-width: 576px){.container{max-width:var(--container-sm)}}
@media (min-width: 768px){.container{max-width:var(--container-md)}}
@media (min-width: 992px){.container{max-width:var(--container-lg)}}
@media (min-width:1200px){.container{max-width:var(--container-xl)}}

.row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;box-sizing:border-box}
[class^="col"]{padding-left:.5rem;padding-right:.5rem;box-sizing:border-box;flex:1 0 0%}
.col{flex:1 1 0}
.col-1{flex:0 0 8.333%;max-width:8.333%}.col-2{flex:0 0 16.666%;max-width:16.666%}
.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.333%;max-width:33.333%}
.col-5{flex:0 0 41.666%;max-width:41.666%}.col-6{flex:0 0 50%;max-width:50%}
.col-7{flex:0 0 58.333%;max-width:58.333%}.col-8{flex:0 0 66.666%;max-width:66.666%}
.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.333%;max-width:83.333%}
.col-11{flex:0 0 91.666%;max-width:91.666%}.col-12{flex:0 0 100%;max-width:100%}
@media (min-width:768px){
  .col-md-1{flex:0 0 8.333%;max-width:8.333%}
  .col-md-2{flex:0 0 16.666%;max-width:16.666%}
  .col-md-3{flex:0 0 25%;max-width:25%}
  .col-md-4{flex:0 0 33.333%;max-width:33.333%}
  .col-md-5{flex:0 0 41.666%;max-width:41.666%}
  .col-md-6{flex:0 0 50%;max-width:50%}
  .col-md-7{flex:0 0 58.333%;max-width:58.333%}
  .col-md-8{flex:0 0 66.666%;max-width:66.666%}
  .col-md-9{flex:0 0 75%;max-width:75%}
  .col-md-10{flex:0 0 83.333%;max-width:83.333%}
  .col-md-11{flex:0 0 91.666%;max-width:91.666%}
  .col-md-12{flex:0 0 100%;max-width:100%}
}

nav{
  display:flex;justify-content:space-between;align-items:center;
  background-color:var(--white);border-bottom:1px solid var(--gray-300);
  padding:.6rem 1.2rem;position:sticky;top:0;z-index:100;
}
nav ul{list-style:none;display:flex;gap:1.5rem}
nav ul li{cursor:pointer;color:var(--dark);font-weight:500;transition:color var(--transition-base),transform var(--transition-base)}
nav ul li:hover{color:var(--blue-dark);transform:translateY(-2px)}
nav button{
  background-color:var(--red-deep);color:var(--white);border:none;padding:.5rem 1rem;border-radius:6px;
  cursor:pointer;font-size:.9rem;font-weight:500;transition:background-color var(--transition-base),transform var(--transition-base)
}
nav button:hover{background-color:var(--red-hover);transform:scale(1.05)}

.nav-header {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;}
.nav-toggle {display: none;background: none;border: none;font-size: 1.8rem;cursor: pointer; color: var(--dark);}
.nav-toggle:hover {color: var(--blue-dark);background-color:var(--white);transform:scale(1.05)}
.nav-menu {list-style: none;width: 100%;display: flex;gap: 1.5rem;transition: max-height var(--transition-base);}

.alert{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-width:280px;max-width:450px;padding:12px 16px;border-radius:8px;
  font-size:15px;box-shadow:var(--shadow-1);opacity:1;transform:translateY(0);
  transition:all .35s ease;z-index:9999;position:fixed
}
.alert.hidden{opacity:0;pointer-events:none;transform:translateY(-10px)}
.alert.success{background-color:var(--light-green);border:1px solid var(--green);color:var(--green-dark)}
.alert.danger{background-color:var(--light-red);border:1px solid var(--red);color:var(--red-dark)}
.alert.warning{background-color:var(--light-yellow);border:1px solid var(--yellow);color:var(--yellow-dark)}
.alert.info{background-color:var(--gray-100);border:1px solid var(--gray-400);color:var(--dark)}
.alert .title{font-weight:600;flex-grow:1}
.alert .message{flex-grow:2;color:inherit}
.alert button{border:none;background:transparent;font-size:18px;font-weight:bold;color:inherit;cursor:pointer;transition:transform .2s}
.alert button:hover{transform:scale(1.2)}

.modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background-color:var(--overlay);z-index:999;transition:opacity .25s ease,visibility .25s ease}
.modal.hidden{opacity:0;visibility:hidden;pointer-events:none}
.modal-content{
  background-color:var(--white);border-radius:8px;width:90%;max-width:640px;padding:1.5rem;
  box-shadow:var(--shadow-3);position:relative;animation:modalFadeIn .3s ease
}
.modal-content .title{margin:0;font-size:1.3rem;font-weight:600;color:var(--dark)}
.modal-content button.close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.2rem;font-weight:bold;color:var(--dark);cursor:pointer;transition:color .2s}
.modal-content button.close:hover{color:var(--red-dark)}
.modal-body{margin-top:1rem;font-size:.95rem;color:var(--dark)}
@keyframes modalFadeIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}

form.card-form{
  display:flex;flex-direction:column;gap:1rem;padding:2rem 3rem;width:340px;border-radius:10px;
  box-shadow:0 0 15px var(--shadow-1);background:var(--white)
}
form.card-form h3{text-align:center;color:var(--dark);margin-bottom:1rem}
form.card-form button{
  background-color:var(--blue-dark);color:var(--white);border:none;padding:.8rem;border-radius:6px;font-size:1rem;cursor:pointer;
  transition:background-color var(--transition-base)
}
form.card-form button:hover{background-color:var(--blue-dark)}

.input{
  width:100%;padding:.8rem .6rem;font-size:1rem;border:1px solid var(--gray-400);border-radius:4px;background:none;outline:none;
  transition:border-color var(--transition-base),box-shadow var(--transition-base)
}
textarea.input {resize:vertical;overflow-y:auto;-webkit-overflow-scrolling:touch;width:100%;height: 60vh!important;}

.label-float{position:relative;margin:1.5rem 0;}
.label-float input,.label-float textarea,.label-float select{
  width:100%;padding:.8rem .6rem;font-size:1rem;border:1px solid var(--gray-400);border-radius:4px;background:none;outline:none;
  transition:border-color var(--transition-base),box-shadow var(--transition-base)
}
.label-float label{
  position:absolute;top:20px;left:.6rem;transform:translateY(-50%);color:var(--muted);pointer-events:none;transition:.2s ease all;
  background-color:var(--white);padding:0 .25rem
}
.label-float input:focus,.label-float textarea:focus,.label-float select:focus{
  border-color:var(--blue-dark);box-shadow:0 0 0 2px rgba(25,118,210,.1)
}
.label-float input:focus~label,
.label-float input:not(:placeholder-shown)~label,
.label-float textarea:focus~label,
.label-float textarea:not(:placeholder-shown)~label,
.label-float select:focus~label,
.label-float select:not([value=""])~label{
  top:-.6rem;left:.5rem;font-size:.8rem;color:var(--blue-dark);background-color:transparent
}
.label-float select{
  background-color:var(--white);appearance:none;
  background-image:url(../../resources/img/arrow.svg);background-repeat:no-repeat;background-position:right .8rem center;background-size:1rem
}
.label-float select option[disabled]{color:var(--muted)}
.with-focused textarea{
  flex: 1;
  min-height: 50px;
  max-height: fit-content;
  resize: none;
  overflow-y: auto;
  transition: min-height .25s ease;
}

.with-focused{display: flex;flex-direction: column;height: auto;flex: 1;min-height: 0;}
.with-focused textarea:focus {min-height: 100%;}
.with-focused:has(textarea:focus) {min-height: 70%;}
.with-focused textarea:focus-within { height: 100%;}
.with-focused:has(textarea:focus-within) { height: 70%;}

.chex-box{display:flex;align-items:center;gap:.4rem;margin:.8rem 0;font-size:.9rem;color:var(--dark)}
.chex-box input[type="checkbox"]{
  width:24px;height:24px;cursor:pointer;accent-color:var(--blue-dark);
  border:1px solid var(--gray-400);border-radius:3px;transition:all var(--transition-base)
}
.chex-box label{font-weight:900;cursor:pointer}
.chex-box input[type="checkbox"]:hover{box-shadow:0 0 0 2px var(--light-blue)}
.chex-box input[type="checkbox"]:checked{background-color:var(--blue);border-color:var(--blue)}
.ce-input,.ce-textarea{width:100%;border:0;background:transparent;padding:0;outline:none;font:inherit;resize:vertical;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ce-input:focus,.ce-textarea:focus{outline:2px solid var(--blue-dark)}

.input-group{display:flex;align-items:center;width:100%}
.input-group .label-float{flex:1;margin:0}
.input-group .label-float input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.input-group .btn{
  padding:.8rem .6rem;border:1px solid var(--gray-400);min-width:48px;height:46px;border-top-left-radius:0;border-bottom-left-radius:0;
  background-color:var(--gray-300);color:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:none
}
.input-group .btn:hover{transform:translateY(0)!important;box-shadow:0 4px 10px var(--shadow-2)}
.input-group .btn i{width:20px;height:20px;display:inline-block;background:url(../../resources/img/copy.svg) center/contain no-repeat}

.btn{
  display:inline-block;min-width:140px;padding:.6rem 1.2rem;border:none;border-radius:5px;text-align:center;font-weight:500;font-size:.95rem;cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,.12);transition:transform .15s ease,box-shadow .15s ease
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px var(--shadow-2)}

.btn-blue{border:1px solid var(--blue);background-color:var(--light-blue);color:#0f3d54}
.btn-green{border:1px solid var(--green);background-color:var(--light-green);color:var(--green-dark)}
.btn-red{border:1px solid var(--red);background-color:var(--light-red);color:var(--red-dark)}
.btn-yellow{border:1px solid var(--yellow);background-color:var(--light-yellow);color:var(--yellow-dark)}
.btn-sm{min-width:fit-content;padding:.4rem .9rem;font-size:.85rem}
.btn-lg{min-width:180px;padding:.8rem 1.4rem;font-size:1rem}

.card{
  background-color:var(--white);border:1px solid var(--gray-400);border-radius:8px;padding:1rem;
  box-shadow:var(--shadow-1);display:flex;flex-direction:column;align-items:self-start;gap:.6rem;
  transition:transform var(--transition-base),box-shadow var(--transition-base)
}
.card-hover:hover{transform:translateY(-4px);box-shadow:0 3px 10px var(--shadow-2)}
.card h3{font-size:1.1rem;font-weight:600;text-align:center;margin-bottom:.2rem}
.card-content{flex:1;display:flex;flex-direction:row;justify-content:space-around;align-items:center;flex-wrap:nowrap;width:100%}
.card-content i{
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-weight:600;color:var(--dark)
}

[class^="icon-"] {min-width: 24px;min-height: 24px;display: inline-block;}

i.icon-admin{background:url(../../resources/img/admin.svg) center/contain no-repeat}
i.icon-arrow{background:url(../../resources/img/arrow.svg)center/contain no-repeat}
i.icon-bash{background:url(../../resources/img/bash.svg) center/contain no-repeat}
i.icon-certificate{background:url(../../resources/img/certificate.svg) center/contain no-repeat}
i.icon-copy{background:url(../../resources/img/copy.svg) center/contain no-repeat}
i.icon-database{background:url(../../resources/img/database.svg) center/contain no-repeat}
i.icon-download{background:url(../../resources/img/download.svg) center/contain no-repeat}
i.icon-edit{background:url(../../resources/img/edit.svg) center/contain no-repeat}
i.icon-exitscreen{background: url(../../resources/img/exitscreen.svg) center/contain no-repeat;}
i.icon-file{background:url(../../resources/img/file.svg) center/contain no-repeat}
i.icon-firewall{background:url(../../resources/img/firewall.svg) center/contain no-repeat}
i.icon-folder{background:url(../../resources/img/folder.svg) center/contain no-repeat}
i.icon-fullscreen{background: url(../../resources/img/fullscreen.svg) center/contain no-repeat;}
i.icon-inf{background:url(../../resources/img/inf.svg) center/contain no-repeat}
i.icon-java{background:url(../../resources/img/java.svg) center/contain no-repeat}
i.icon-logs{background:url(../../resources/img/logs.svg) center/contain no-repeat}
i.icon-nginx{background:url(../../resources/img/nginx.svg) center/contain no-repeat}
i.icon-nodejs{background:url(../../resources/img/nodejs.svg) center/contain no-repeat}
i.icon-php{background:url(../../resources/img/php.svg) center/contain no-repeat}
i.icon-play{background:url(../../resources/img/play.svg) center/contain no-repeat}
i.icon-plus{background:url(../../resources/img/plus.svg) center/contain no-repeat}
i.icon-python{background:url(../../resources/img/python.svg) center/contain no-repeat}
i.icon-reload{background:url(../../resources/img/reload.svg) center/contain no-repeat}
i.icon-save{background:url(../../resources/img/save.svg) center/contain no-repeat}
i.icon-stop{background:url(../../resources/img/stop.svg) center/contain no-repeat}
i.icon-trash{background:url(../../resources/img/trash.svg) center/contain no-repeat}
i.icon-user{background:url(../../resources/img/user.svg) center/contain no-repeat}

.table{width:100%;border-collapse:collapse;border-spacing:0;font-size:.95rem;color:var(--dark);background-color:var(--white)}
.table th,.table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--gray-300)}
.table th{background-color:var(--gray-100);font-weight:600}
.table tr:last-child td{border-bottom:none}
.table-striped tbody tr:nth-child(odd){background-color:var(--gray-100)}
.table-hover tbody tr{transition:background-color var(--transition-base)}
.table-hover tbody tr:hover{background-color:var(--light-blue)}
.table caption{caption-side:bottom;padding:.75rem;font-size:.9rem;color:var(--muted)}
.caption-top caption{caption-side:top}
.table-blue th{background-color:var(--light-blue);color:var(--blue-dark)}
.table-green th{background-color:var(--light-green);color:var(--green-dark)}
.table-red th{background-color:var(--light-red);color:var(--red-dark)}
.table-yellow th{background-color:var(--light-yellow);color:var(--yellow-dark)}
.table-bordered th,.table-bordered td{border:1px solid var(--gray-300)}
.table-rounded{border-radius:8px;overflow:hidden}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;box-shadow:var(--shadow-1)}

.list-table{display:table;width:100%;border-collapse:collapse;background:var(--white);font-size:.95rem;color:var(--dark);border:1px solid var(--gray-300)}
.list-table>li{display:table-row;border-bottom:1px solid var(--gray-300)}
.list-table>li:last-child{border-bottom:none}
.list-table .cell{display:table-cell;padding:.75rem 1rem;vertical-align:middle;border-bottom:1px solid var(--gray-300)}
.list-table>li:last-child .cell{border-bottom:none}
.list-table.table-striped>li:nth-child(odd){background:var(--gray-100)}
.list-table.table-hover>li{transition:background-color var(--transition-base)}
.list-table.table-hover>li:hover{background:var(--light-blue)}
.list-table .col-1{width:120px}.list-table .col-2{width:200px}.list-table .col-end{text-align:right}
.list-table.table-rounded{border-radius:8px;overflow:hidden;box-shadow:var(--shadow-1)}

.list-bullets{list-style:disc outside;padding-left:1.2rem;color:var(--dark)}
.list-bullets li{margin:.35rem 0}
.list-bullets li::marker{font-size:.9em;color:var(--blue)}

.list-diamonds{list-style:none;padding-left:0}
.list-diamonds li{position:relative;padding-left:1.2rem;margin:.35rem 0}
.list-diamonds li::before{content:"◆";position:absolute;left:0;top:.15em;font-size:.8rem;line-height:1;color:var(--green)}

.list-enum{list-style:none;counter-reset:step;padding-left:0}
.list-enum li{counter-increment:step;display:flex;align-items:flex-start;gap:.6rem;margin:.45rem 0}
.list-enum li::before{content:counter(step);display:inline-flex;align-items:center;justify-content:end;min-width:40px;font-family: var(--font-family-console);}
.list-enum.list-enum-compact li{margin:.25rem 0}
.list-enum.list-enum-compact li::before{min-width:1.3rem;height:1.3rem;font-size:.78rem;}

ul.files-root{list-style:none;padding-left:0;margin:0;font-family:monospace;display:block}
ul.files-root li{padding:4px 0 4px 20px;position:relative;cursor:default}
ul.files-root li::before{
  content:"";position:absolute;left:0;top:12px;transform:translateY(-50%);width:16px;height:16px;background-position:center;background-repeat:no-repeat;background-size:contain;opacity:.9
}
li.directory::before{background:url(../../resources/img/folder.svg)}
li.file::before{background:url(../../resources/img/file.svg)}
ul.files-root ul{margin-left:16px;border-left:1px dashed var(--gray-400);padding-left:8px;display:block}
li.file:hover{background:var(--gray-100)}
li.inactive{display:none}

.dropdown {position: relative;display: inline-block;}
.dropdown-toggle {background-color: var(--gray-400);color: var(--black);border: none;padding: .6rem 1rem;border-radius: var(--radius-2);cursor: pointer;transition: background-color var(--transition-base);}
.dropdown-toggle:hover {background-color: var(--blue-hover);}
.dropdown-menu {position: absolute;top: 110%;min-width: 160px;background-color: var(--white);border: 1px solid var(--gray-300);border-radius: var(--radius-2);box-shadow: var(--shadow-2);padding: .4rem 0;display: none;z-index: 1000;}
.dropdown-menu li {list-style: none;padding: .6rem 1rem;color: var(--dark);cursor: pointer;transition: background-color var(--transition-base), color var(--transition-base);}
.dropdown-menu li:hover {background-color: var(--light-blue);color: var(--blue-hover);}
.dropdown.active .dropdown-menu {display: block;}

.json-pretty{white-space:pre-wrap;word-break:break-word}
pre, code {
  font-family: var(--font-family-console), monospace !important;
}

.spinner { position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;height: 100vh;width: 100vw;background-color: var(--gray-200);z-index: 9999;}
.spin {width: 48px;height: 48px;border: 5px solid var(--gray-300);border-top-color: var(--blue);border-radius: 50%;animation: spin 0.9s linear infinite;box-shadow: var(--shadow-light);}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width:900px){
  nav{flex-direction:column;align-items:stretch;gap:.5rem}
  nav ul{justify-content:center;flex-wrap:wrap;gap:.8rem}
  nav button{align-self:flex-end;margin-right:.5rem}
  .d-flex-m-column{display:flex!important;flex-direction:column!important}
  .justify-m-space-evenly{justify-content:space-evenly!important;flex-wrap: wrap;}
  .lg-content-m-100 {width: 100%;}
  .m-auto{margin:0}
  
  .nav-toggle {display: block;}
  .nav-menu {flex-direction: column;overflow: hidden;max-height: 0;padding: 0;background-color: var(--white);}
  .nav-menu.active {max-height: 350px;overflow-y: auto;}
  .nav-menu li {padding: .8rem 1rem;}
}
@media (max-width:600px){
  .modal-content{width:95%;padding:1rem}
  .lg-content-sm-100 {width: 100%;}
  .table { display: block!important; }
  .d-sm-none{display: none!important;}
  .d-sm-block{display: block!important;}
}

.bg-toggle {
    position: absolute;
    top: 16px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

.bg-toggle img {
    display: block;
    width: 40px;
    height: 40px;
}

.bg-toggle-sun {
    left: 16px;
}

.bg-toggle-moon {
    right: calc(50% + 16px);
}

@media (max-width:900px) {
    .bg-toggle-moon {
        right: 16px;
    }
}