@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@400;700&display=swap');

@media (min-width: 992px) {
   .min-height-vh {
        min-height: calc(100vh - 75px);
    }
    .max-height-vh {
      max-height: calc(100vh - 130px);
    }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes glow {
  0% {
    box-shadow: inset 0 0 3px #dd4747;
  }
  50% {
    box-shadow: inset 0 0 5px #dd4747;
  }
  100% {
    box-shadow: inset 0 0 3px #dd4747;
  }
}

@keyframes pulse-border-success {
  0% {
      box-shadow: inset 0 0 0 0 rgba(0, 180, 111, 0.7);
  }
  50% {
      box-shadow: inset 0 0 5px 2px rgba(0, 180, 111, 0.7);
  }
  100% {
      box-shadow: inset 0 0 0 0 rgba(0, 180, 111, 0.7);
  }
}

@keyframes pulse-border-error {
  0% {
      box-shadow: inset 0 0 0 0 rgba(180, 0, 9, 0.7);
  }
  50% {
      box-shadow: inset 0 0 5px 2px rgba(180, 0, 9, 0.7);
  }
  100% {
      box-shadow: inset 0 0 0 0 rgba(180, 0, 9, 0.7);
  }
}

@media (max-width: 998px) {
    .quick-link-leftbar {
        display: none;
    }
    .quick-link-leftbar.collapsed {
      display: none;
    }
    .rightbar{
    	display: none;
    }
    .toggle-nav{
      display: none;
    }
    .content-area {
      margin: 0 !important;
    }
    .content-area.fill {
      margin: 0 !important;
    }
}

@media screen and (max-width: 576px) {
  .form-placeholder-sm::-webkit-input-placeholder {
      color: transparent;
  }
  .form-placeholder-sm:-moz-placeholder {
     color: transparent;
  }
  .form-placeholder-sm::-moz-placeholder {
     color: transparent;
  }
 .form-placeholder-sm :-ms-input-placeholder {
     color: transparent;
  }
}

@media (max-width: 576px) { /* Apply only for small screens */
    .pe-6 {
        padding-right: 1.5rem !important; /* Change to pe-4 equivalent */
    }
}

html, body {
    font-family: 'Roboto', sans-serif;
    color: rgb(80, 79, 79);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
h1 {
  font-size: 2rem !important;
}
h2 {
    font-size: 1.5rem; /* Adjust as needed */
    font-weight: bold;
    margin-bottom: 0.8rem;
}
h4 {
    font-size: 1.2rem; /* Adjust as needed */
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 0.6rem;
}

h6 {
    font-size: 1rem; /* Adjust as needed */
    font-weight: normal;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.h7{
  font-size: 0.9rem !important;
}

.h8{
  font-size: 0.8rem !important;
}
.h9{
  font-size: 0.7rem !important;
}
.mt-6 {
  margin-top: 4rem !important;
}

.devbeaver-logo {
  min-height: 2.5rem;
  height: 2.5rem;
  width: auto;
}

textarea {
    overflow-y: auto;
    scrollbar-width: none;
}

textarea::-webkit-scrollbar {
    display: none;
}

.btn-custom-coral {
  background-color: #ff6f61;
  border-color: #ff6f61;
  color: white;
}
.btn-custom-coral:hover {
  background-color: #ff4a3d;
  border-color: #ff4a3d;
}

.btn-custom-mint {
  background-color: #3eb489; /* Mint */
  border-color: #3eb489;
  color: white;
}
.btn-custom-mint:hover {
  background-color: #2d9a78;
  border-color: #2d9a78;
}

.btn-custom-lavender {
  background-color: #967bb6; /* Lavender */
  border-color: #967bb6;
  color: white;
}
.btn-custom-lavender-outline {
  background-color: transparent; /* Lavender */
  border-color: #967bb6;
  color: #967bb6;
}
.btn-custom-lavender:hover, .btn-custom-lavender-outline:hover,
.btn-custom-lavender:focus, .btn-custom-lavender-outline:focus {
  background-color: #7b5f9e;
  border-color: #7b5f9e;
  color: white;
}

.btn-custom-sky {
  background-color: #87ceeb; /* Sky Blue */
  border-color: #87ceeb;
  color: white;
}
.btn-custom-sky:hover {
  background-color: #63b8e7;
  border-color: #63b8e7;
}

.btn-custom-peach {
  background-color: #ffdab9; /* Peach */
  border-color: #ffdab9;
  color: #333;
}
.btn-custom-peach:hover {
  background-color: #ffc08d;
  border-color: #ffc08d;
}

.btn-custom-teal {
  background-color: #20c997; /* Teal */
  border-color: #20c997;
  color: white;
}
.btn-custom-teal:hover {
  background-color: #1aa179;
  border-color: #1aa179;
}

.btn-custom-maroon {
  background-color: #800000; /* Maroon */
  border-color: #800000;
  color: white;
}
.btn-custom-maroon:hover {
  background-color: #660000;
  border-color: #660000;
}

.btn-custom-gold {
  background-color: #ffd700; /* Gold */
  border-color: #ffd700;
  color: #333;
}
.btn-custom-gold:hover {
  background-color: #e6b800;
  border-color: #e6b800;
}

.btn-custom-indigo {
  background-color: #4b0082; /* Indigo */
  border-color: #4b0082;
  color: white;
}
.btn-custom-indigo:hover {
  background-color: #3a0066;
  border-color: #3a0066;
}

.btn-custom-salmon {
  background-color: #fa8072; /* Salmon */
  border-color: #fa8072;
  color: white;
}
.btn-custom-salmon:hover {
  background-color: #f96a5a;
  border-color: #f96a5a;
  color: white;
}

.btn-custom-olive {
  background-color: #808000; /* Olive */
  border-color: #808000;
  color: white;
}
.btn-custom-olive:hover {
  background-color: #666600;
  border-color: #666600;
}

.btn-custom-rose {
  background-color: #ff007f; /* Rose */
  border-color: #ff007f;
  color: white;
}
.btn-custom-rose:hover {
  background-color: #e60073;
  border-color: #e60073;
}

.btn-custom-slate {
  background-color: #708090; /* Slate */
  border-color: #708090;
  color: white;
}
.btn-custom-slate:hover {
  background-color: #5a6773;
  border-color: #5a6773;
}

.btn-custom-cyan {
  background-color: #00ffff; /* Cyan */
  border-color: #00ffff;
  color: #333;
}
.btn-custom-cyan:hover {
  background-color: #00cccc;
  border-color: #00cccc;
}

.btn-custom-rust {
  background-color: #b7410e; /* Rust */
  border-color: #b7410e;
  color: white;
}
.btn-custom-rust:hover {
  background-color: #9a360c;
  border-color: #9a360c;
}

.btn-custom-periwinkle {
  background-color: #ccccff; /* Periwinkle */
  border-color: #ccccff;
  color: #333;
}
.btn-custom-periwinkle:hover {
  background-color: #b3b3ff;
  border-color: #b3b3ff;
}

.btn-custom-brick {
  background-color: #8b0000; /* Brick */
  border-color: #8b0000;
  color: white;
}
.btn-custom-brick:hover {
  background-color: #700000;
  border-color: #700000;
}

.btn-custom-lime {
  background-color: #32cd32; /* Lime */
  border-color: #32cd32;
  color: white;
}
.btn-custom-lime:hover {
  background-color: #28a428;
  border-color: #28a428;
}

.btn-custom-plum {
  background-color: #df9bdf; /* Plum */
  border-color: #df9bdf;
  color: #fff;
}
.btn-custom-plum:hover {
  background-color: #cc80cc;
  border-color: #cc80cc;
}

.btn-custom-navy {
  background-color: #000080; /* Navy */
  border-color: #000080;
  color: white;
}
.btn-custom-navy:hover {
  background-color: #000066;
  border-color: #000066;
}

.btn-custom-apricot {
  background-color: #fbceb1; /* Apricot */
  border-color: #fbceb1;
  color: #333;
}
.btn-custom-apricot:hover {
  background-color: #f9b48e;
  border-color: #f9b48e;
}

.btn-cobalt-blue {
  background-color: #346add;
  border-color: #346add;
  color: white;
}

.btn-cobalt-blue:hover {
  background-color: #2a5bc7;
  border-color: #2a5bc7;
  color: white;
}

.btn-cobalt-blue:focus {
  box-shadow: 0 0 0 0.25rem rgba(52, 106, 221, 0.5);
}

.btn-custom-emerald {
  background-color: #50c878; /* Emerald */
  border-color: #50c878;
  color: white;
}
.btn-custom-emerald:hover {
  background-color: #40a060;
  border-color: #40a060;
}

/* Custom background colors with padding and border-radius */
.bg-custom-musted-steel-blue {
  background-color: #6f89c4; /* Balanced between #967bb6 and #2a5bc7 */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-steel-blue {
  background-color:  var(--bs-steel-blue) !important;
  color: white;
}

.bg-custom-1 {
  background-color: #2c3e50; /* Dark blue-gray */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-2 {
  background-color: #3498db; /* Bright blue */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-3 {
  background-color: #1abc9c; /* Turquoise */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-purple {
  background-color: #9b59b6; /* Purple */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-5 {
  background-color: rgba(52,73,94,0.8); /* Blue-gray */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-6 {
  background-color: #f39c12; /* Amber */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-7 {
  background-color: #e74c3c; /* Red */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-dark-teal {
  background-color: #16a085; /* Dark teal */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-9 {
  background-color: #f1c40f; /* Yellow */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-10 {
  background-color: #2ecc71; /* Soft green */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-light-grey {
  background-color: #95a5a6; /* Light gray */
  color: black;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-greyish-blue {
  background-color: #ecf0f1; /* Light grayish blue */
  color: black;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-soft-grey {
  background-color: #7f8c8d; /* Soft gray */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-14 {
  background-color: #d35400; /* Orange */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-orange-yellow {
  background-color: #e67e22; /* Orange-yellow */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-medium-blue {
  background-color: #2980b9; /* Medium blue */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-17 {
  background-color: #c0392b; /* Crimson */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-light-golden {
  background-color: #f4d03f; /* Light golden */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-gray-blue {
  background-color: #34495e; /* Dark grayish blue */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}

.bg-custom-dark-purple {
  background-color: #8e44ad; /* Dark purple */
  color: white;
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;
}


.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.flipped-image {
    transform: scaleX(-1);
}
.logo-prefix{
    color: #0B1C38;
    font-weight: 700;
}
.logo-suffix{
    color: #d86213;
    font-weight: 600;
    font-size: 1.25rem;
}
.navbar-brand {
    padding: 0px 12px;
}
.navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    background-color: white;
    z-index: 10;
}

.sticky-navbar {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.navbar-nav{
    padding: 0px 25px;
}
.nav-item {
    padding: 0px 8px;
    border-radius: 5px;
    color: rgb(80, 79, 79);
}
.dropdown-item{
    font-size: 0.9rem;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}
.dropdown-item:hover {
    background-color: rgba(230, 238, 240, 0.7);
}

#footer {
    margin-top: auto;
    padding: 5px 0;
    font-size: 0.8rem;
}

.toggle-nav{
  position: fixed;
  padding: 5px;
  top:5.2rem;
  left: 210px;
  border-right: 1px solid rgba(219, 219, 219, 1);
  cursor: pointer;
  border-radius: 8px;
  box-shadow: -0.4rem 0 0.05rem 0.05rem rgba(219, 219, 219, 0.5);
  transition: box-shadow 0.5s ease, border 0.5s ease, left 0.5s ease;
  z-index: 2;
}

.toggle-nav.collapsed {
  border-right: none;
  left: 15px;
  border-left: 1px solid rgba(219, 219, 219, 1);
  box-shadow: 0.4rem 0 0.05rem 0.05rem rgba(219, 219, 219, 1);
}

.ql-menu-label {
  overflow: hidden;
  opacity: 1;
  transition: opacity 1s ease, width 0.8s ease;
}

.ql-menu-label.hidden {
  opacity: 0;
  width: 0;
}

.quick-link-leftbar {
    position: fixed;
    margin-top: 4rem;
    width: 250px;
    transition: width 0.6s ease;
    background: linear-gradient(to right, #eef2f3, white);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.quick-link-leftbar a {
    display: flex;
    font-size: 0.8rem;
    align-items: center;
    padding: 5px;
    color: rgb(80, 79, 79);
    text-decoration: none;
    text-wrap: nowrap;
    transition: all 0.3s ease;
}

.quick-link-leftbar a:hover {
    color: #0d6efd;
    transform: translateX(3px);
}

.quick-link-leftbar.collapsed {
  width: 55px;
}

.quick-link i {
  margin-right: 0.5rem;
  width: 1.2em;
}

.rightbar {
  min-width: 50px;
  background: linear-gradient(to left, #eef2f3, white);
}

.content-area {
  margin-left: 260px;
  margin-right: 50px;
  transition: margin 0.6s ease;
}

.content-area.fill {
  margin-left: 55px !important;
}

:root {
  /* Blues */
  --bs-blue: #346add;
  --bs-blue-rgb: 52, 106, 221;
  --bs-sky-blue: #87CEEB;
  --bs-sky-blue-rgb: 135, 206, 235;
  --bs-powder-blue: #B0E0E6;
  --bs-powder-blue-rgb: 176, 224, 230;
  --bs-misty-blue: #A7C7E7;
  --bs-misty-blue-rgb: 167, 199, 231;

  --bs-dodger-blue: #1E90FF;
  --bs-dodger-blue-rgb: 30, 144, 255;
  
  --bs-steel-blue: #4682B4;
  --bs-steel-blue-rgb: 70, 130, 180;
  
  --bs-light-steel-blue: #B0C4DE;
  --bs-light-steel-blue-rgb: 176, 196, 222;
  
  --bs-light-sky-blue: #87CEFA;
  --bs-light-sky-blue-rgb: 135, 206, 250;
  
  --bs-deep-sky-blue: #00BFFF;
  --bs-deep-sky-blue-rgb: 0, 191, 255;
  
  --bs-midnight-blue: #191970;
  --bs-midnight-blue-rgb: 25, 25, 112;
  
  --bs-royal-blue: #4169E1;
  --bs-royal-blue-rgb: 65, 105, 225;
  
  --bs-cornflower-blue: #6495ED;
  --bs-cornflower-blue-rgb: 100, 149, 237;
  
  --bs-light-blue: #ADD8E6;
  --bs-light-blue-rgb: 173, 216, 230;

  /* Oranges */
  --bs-dark-orange:rgb(206, 119, 5);
  --bs-orange: #ff9e1e;
  --bs-orange-rgb: 255, 158, 30;
  --bs-peach: #FFDAB9;
  --bs-peach-rgb: 255, 218, 185;
  --bs-melon: #FFB07C;
  --bs-melon-rgb: 255, 176, 124;
  --bs-apricot: #FDCB9E;
  --bs-apricot-rgb: 253, 203, 158;

  /* Purples & Lavenders */
  --bs-purple: #735bfd;
  --bs-purple-rgb: 115, 91, 253;
  --bs-lavender: #9465ad;
  --bs-lavender-rgb: 148, 101, 173;
  --bs-soft-lavender: #E6E6FA;
  --bs-soft-lavender-rgb: 230, 230, 250;
  --bs-thistle: #D8BFD8;
  --bs-thistle-rgb: 216, 191, 216;
  --bs-mauve: #C49DC4;
  --bs-mauve-rgb: 196, 157, 196;

  /* Greens */
  --bs-mint: #98FF98;
  --bs-mint-rgb: 152, 255, 152;
  --bs-tea-green: #D0F0C0;
  --bs-tea-green-rgb: 208, 240, 192;
  --bs-pastel-green: #77DD77;
  --bs-pastel-green-rgb: 119, 221, 119;
  --bs-honeydew: #F0FFF0;
  --bs-honeydew-rgb: 240, 255, 240;

  /* Yellows */
  --bs-light-gold: #FAE8B0;
  --bs-light-gold-rgb: 250, 232, 176;
  --bs-buttercream: #FFF4C1;
  --bs-buttercream-rgb: 255, 244, 193;
  --bs-lemon-chiffon: #FFFACD;
  --bs-lemon-chiffon-rgb: 255, 250, 205;

  /* Pinks */
  --bs-rose: #FFC0CB;
  --bs-rose-rgb: 255, 192, 203;
  --bs-blush: #F4A8C5;
  --bs-blush-rgb: 244, 168, 197;
  --bs-ballet-pink: #F7CAC9;
  --bs-ballet-pink-rgb: 247, 202, 201;
  --bs-light-coral: #F08080;
  --bs-light-coral-rgb: 240, 128, 128;

  /* Grays */
  --bs-ash-gray: #B2BEB5;
  --bs-ash-gray-rgb: 178, 190, 181;
  --bs-light-slate-gray: #778899;
  --bs-light-slate-gray-rgb: 119, 136, 153;
  --bs-silver-mist: #C4C4C4;
  --bs-silver-mist-rgb: 196, 196, 196;

  /* Reds */
  --bs-soft-red: #FF6F61;
  --bs-soft-red-rgb: 255, 111, 97;
  --bs-light-red: #FFA07A;
  --bs-light-red-rgb: 255, 160, 122;
  --bs-rose-red: #E63946;
  --bs-rose-red-rgb: 230, 57, 70;
  --bs-dusty-rose: #DCAE96;
  --bs-dusty-rose-rgb: 220, 174, 150;
  --bs-blush-red: #E37777;
  --bs-blush-red-rgb: 227, 119, 119;

  /* Maroon Shades */
  --bs-classic-maroon: #800000;
  --bs-classic-maroon-rgb: 128, 0, 0;
  --bs-deep-maroon: #6D071A;
  --bs-deep-maroon-rgb: 109, 7, 26;
  --bs-wine-maroon: #722F37;
  --bs-wine-maroon-rgb: 114, 47, 55;
  --bs-velvet-maroon: #9B2335;
  --bs-velvet-maroon-rgb: 155, 35, 53;
  --bs-crimson-maroon: #A52A2A;
  --bs-crimson-maroon-rgb: 165, 42, 42;

  /* Browns */
  --bs-soft-brown: #C4A484;
  --bs-soft-brown-rgb: 196, 164, 132;
  --bs-warm-brown: #A67B5B;
  --bs-warm-brown-rgb: 166, 123, 91;
  --bs-coffee-brown: #6F4E37;
  --bs-coffee-brown-rgb: 111, 78, 55;
  --bs-mocha-brown: #9D7651;
  --bs-mocha-brown-rgb: 157, 118, 81;
  --bs-caramel-brown: #D5B895;
  --bs-caramel-brown-rgb: 213, 184, 149;
  --bs-hazelnut-brown: #AE7F4B;
  --bs-hazelnut-brown-rgb: 174, 127, 75;
  --bs-pecan-brown: #734F36;
  --bs-pecan-brown-rgb: 115, 79, 54;

  /* Greens */
  --bs-forest-green: #228B22;
  --bs-forest-green-rgb: 34, 139, 34;
  
  --bs-sea-green: #2E8B57;
  --bs-sea-green-rgb: 46, 139, 87;
  
  --bs-lime-green: #32CD32;
  --bs-lime-green-rgb: 50, 205, 50;
  
  --bs-spring-green: #00FF7F;
  --bs-spring-green-rgb: 0, 255, 127;
  
  --bs-pale-green: #98FB98;
  --bs-pale-green-rgb: 152, 251, 152;
  
  --bs-dark-green: #006400;
  --bs-dark-green-rgb: 0, 100, 0;
  
  --bs-medium-sea-green: #3CB371;
  --bs-medium-sea-green-rgb: 60, 179, 113;
  
  --bs-light-green: #90EE90;
  --bs-light-green-rgb: 144, 238, 144;
  
  --bs-mint-green: #98FF98;
  --bs-mint-green-rgb: 152, 255, 152;

  --bs-olive: #808000;
  --bs-olive-rgb: 128, 128, 0;
  
  --bs-dark-olive-green: #556B2F;
  --bs-dark-olive-green-rgb: 85, 107, 47;
  
  --bs-olive-drab: #6B8E23;
  --bs-olive-drab-rgb: 107, 142, 35;
  
  --bs-sage-green: #B2AC88;
  --bs-sage-green-rgb: 178, 172, 136;
  
  --bs-moss-green: #8A9A5B;
  --bs-moss-green-rgb: 138, 154, 91;
  
  --bs-camouflage-green: #78866B;
  --bs-camouflage-green-rgb: 120, 134, 107;
  
  --bs-avocado-green: #56806F;
  --bs-avocado-green-rgb: 86, 128, 111;
}


.text-blue {
    color: var(--bs-blue) !important;
}

.text-steel-blue {
  color: var(--bs-steel-blue) !important;
}

.text-avocado-green {
  color: var(--bs-avocado-green) !important;
}

.text-purple {
    color: var(--bs-purple) !important;
}

.text-lavender {
  color: var(--bs-lavender) !important;
}

.text-orange {
    color: var(--bs-orange) !important;
}

.text-dark-orange {
  color: var(--bs-dark-orange) !important;
}

.text-light-red {
  color: var(--bs-light-red) !important;
}

.text-classic-maroon {
  color: var(--bs-classic-maroon) !important;
}

.text-soft-red {
  color: var(--bs-soft-red) !important;
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.copied {
  background-color: #4b0082;
  color: white;
}

.error{
  position: absolute;
  padding: 4px;
  background-color: rgba(255, 254, 214, 0.8);
  border-radius: 2px;
  color: #8b0000;
  font-size: 0.8rem;
}

.error-msg{
  min-height: 1.9rem;  
  font-size: 0.9rem;
  color: var(--bs-crimson-maroon);
}

.error-msg-highlight{
  padding: 4px;
  border-radius: 2px;
  background-color: rgba(255, 254, 214, 0.8);
}

.error_field {
  border: 0px solid #8b0000;
  animation: glow 1.5s infinite;
}

.pulse-effect-success {
  animation: pulse-border-success 0.5s ease-out;
}

.pulse-effect-error {
  animation-name: pulse-border-error;
  animation-duration: 0.3s;
  animation-timing-function: ease-in;
  animation-iteration-count: 2;
}

.fs-12px {
	font-size: 12px;
}

.fs-1-25 {
	font-size: 1.25rem;
}

.fs-13px {
	font-size: 13px;
}

.fs-1-2 {
	font-size: 5rem;
}

.pe-6 {
	padding-right: 70px;
}

.action-btn-icon {
  position: absolute;
  top: 1px;
  right: 1px;
  background-color: rgba(252, 252, 252, 0.2); /* Semi-transparent background */
  border: none;
  padding: 5px;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
  z-index: 2;
  font-size: 0.9rem;
}

.action-btn-bar {
  position: absolute;
  top: 1px;
  right: 1px;
  border: none;
  padding: 2px;
  cursor: pointer;
  z-index: 5;
  font-size: 0.9rem;
}

.action-btn-bar button i + span {
  margin-left: 4px;
}

.bar-icon{
	margin-top: 3px;
  padding: 3px;
	border: black 1px dotted;
	background-color: rgba(248, 248, 248, 0); /* Semi-transparent background */
	transition: transform 0.2s, background 0.2s;
}

.bar-icon:hover {
  transform: scale(1.1,1.1);
  background-color: rgba(233, 233, 233, 0.2);
}

/* Hover Effect */
.action-btn-icon:hover {
  background-color: rgba(233, 233, 233, 0.6);
}

.pulse-effect-orange {
  animation: pulse-border-orange 0.5s ease-out;
}

.pulse-effect-blue {
  animation: pulse-border-blue 0.5s ease-out;
}

.pulse-effect-purple {
  animation: pulse-border-purple 0.5s ease-out;
}

.pulse-effect-secondary {
  animation: pulse-border-secondary 0.5s ease-out;
}

.pulse-effect-lavender {
  animation: pulse-border-lavender 0.5s ease-out;
}


@keyframes pulse-border-secondary {
  0% {
      box-shadow: inset 0 0 0 0 rgba(var(--bs-secondary-rgb), 0.7);
  }
  50% {
      box-shadow: inset 0 0 5px 2px rgba(var(--bs-secondary-rgb), 0.7);
  }
  100% {
      box-shadow: inset 0 0 0 0 rgba(var(--bs-secondary-rgb), 0.7);
  }
}

@keyframes pulse-border-orange {
  0% {
      box-shadow: inset 0 0 0 0 rgba(var(--bs-orange-rgb), 0.7);
  }
  50% {
      box-shadow: inset 0 0 5px 2px rgba(var(--bs-orange-rgb), 0.7);
  }
  100% {
      box-shadow: inset 0 0 0 0 rgba(var(--bs-orange-rgb), 0.7);
  }
}

@keyframes pulse-border-blue {
  0% {
      box-shadow: inset 0 0 0 0 rgba(var(--bs-blue-rgb), 0.7);
  }
  50% {
      box-shadow: inset 0 0 5px 2px rgba(var(--bs-blue-rgb), 0.7);
  }
  100% {
      box-shadow: inset 0 0 0 0 rgba(var(--bs-blue-rgb), 0.7);
  }
}

@keyframes pulse-border-purple {
  0% {
      box-shadow: inset 0 0 0 0 rgba(var(--bs-purple-rgb), 0.7);
  }
  50% {
      box-shadow: inset 0 0 5px 2px rgba(var(--bs-purple-rgb), 0.7);
  }
  100% {
      box-shadow: inset 0 0 0 0 rgba(var(--bs-purple-rgb), 0.7);
  }
}

@keyframes pulse-border-lavender {
  0% {
      box-shadow: inset 0 0 0 0 rgba(var(--bs-lavender-rgb), 0.7);
  }
  50% {
      box-shadow: inset 0 0 5px 2px rgba(var(--bs-lavender-rgb), 0.7);
  }
  100% {
      box-shadow: inset 0 0 0 0 rgba(var(--bs-lavender-rgb), 0.7);
  }
}

/** Line Height **/
.lh-15{
  line-height: 1.5rem;
}
.lh-18{
  line-height: 1.8rem;
}
.lh-20{
  line-height: 2rem;
}


.jwt-section {
  margin-bottom: 1.5rem;
}
.json-container {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  line-height: 25px;
  background-color: #fdfdfd;
  min-height: 100px;
  max-height: 400px;
  overflow-y: auto;
  font-family: monospace;
  white-space: pre-wrap;
  position: relative;
}
.json-key {
  color: #A31515;
}
.json-string {
  color: #5551A5;
}
.json-number {
  color: #098658;
}
.json-boolean {
  color: #5551A5;
  font-weight: 600;
}
.json-null {
  color: #6c757d;
  font-weight: 600;
}
.jwt-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}
.json-viewer-container {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  background-color: #f8f9fa;
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;
}
.signature-status {
  margin-top: 8px;
  font-size: 0.9rem;
}
.valid-signature {
  color: #28a745;
}
.invalid-signature {
  color: #dc3545;
}
.secret-input-container {
  margin-bottom: 12px;
}
.copy-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  background: rgba(255,255,255,0.8);
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  z-index: 4;
}
.copy-btn:hover {
  background: rgba(255,255,255,0.9);
}

.error-banner{
  padding: 1rem;
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
  color: #842029;
}

.ls-0 { letter-spacing: 0.05em !important; }
.ls-1 { letter-spacing: 0.1em !important; }
.ls-2 { letter-spacing: 0.15em !important; }
.ls-3 { letter-spacing: 0.25em !important; }
.ls-4 { letter-spacing: 0.5em !important; }
.ls-n1 { letter-spacing: -0.1em !important; }
.ls-n2 { letter-spacing: -0.15em !important; }

#id_formattedJsonContainer {
  white-space: pre-wrap;
  min-height: 500px;
  overflow-x: auto;
  max-width: 100%;
}

.bg-greyish-blue {
  background-color: #ecf0f1;
}

.responsive-grid {
  display: block;
  background-color: #dee2e6;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  overflow: hidden;
}

/* Dynamically set column counts for headers and rows */
.grid-header,
.grid-row-wrapper {
  display: grid;
  gap: 1px;
}

.grid-4 .grid-header,
.grid-4 .grid-row-wrapper {
  grid-template-columns: repeat(4, 1fr);
}

.grid-3 .grid-header,
.grid-3 .grid-row-wrapper {
  grid-template-columns: repeat(3, 1fr);
}

.grid-2 .grid-header,
.grid-2 .grid-row-wrapper {
  grid-template-columns: repeat(2, 1fr);
}

/* Header cell style */
.grid-header > div {
  padding: 0.75rem;
  background-color: #f8f9fa;
  font-weight: bold;
  text-align: left;
  border-right: 1px solid #dee2e6;
}

.grid-header > div:last-child {
  border-right: none;
  /* avoids double border on last column */
}

.grid-header {
  border-bottom: 1px solid #dee2e6;
}

/* Cell style */
.grid-cell {
  background-color: white;
  padding: 0.75rem;
  border-bottom: 1px solid #dee2e6;
}

/* Responsive Mode */
@media (max-width: 768px) {
  .grid-header {
    display: none !important;
  }

  .grid-row-wrapper {
    display: block;
    padding: 0.75rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
  }

  .grid-row-wrapper:nth-of-type(odd) {
    background-color: #f4f7fa;
  }

  .grid-row-wrapper:nth-of-type(even) {
    background-color: #e8edf1;
  }

  .grid-cell {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    border-bottom: none;
  }

  .grid-cell::before {
    content: attr(data-label);
    font-weight: bold;
    color: #6c757d;
    margin-bottom: 0.25rem;
  }
}

.wrap-all {
  white-space: pre-wrap; 
  word-break: break-all; 
  overflow-wrap: break-word;
}

.preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.preview-item {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  background: white;
  border-radius: 4px;
}

.preview-image {
  max-width: 200px;
  max-height: 150px;
}

.data-text {
  font-size: 0.8rem;
  word-break: break-all;
  margin-top: 5px;
  color: #666;
}

.hint-sidebar {
  width:220px;
  hyphens: auto;
  text-align: justify;
  word-spacing: -0.5px;
  background-color: transparent;
  text-wrap: wrap;
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
  background-color: #098658;
}

.simplebar-track.simplebar-vertical {
  top: 0;
  width: 8px;
}
.page-links-chip{
  font-size: 0.8rem;
  transition: background-color 0.2s ease-in;
}
.page-links-chip:hover {
  background-color: rgba(63, 177, 107, 0.2) ;
}
.cursor-pointer{
  cursor: pointer;
}
.result-container {
  margin-top: 2rem;
  overflow: hidden;
}

.result-tabs {
  display: flex;
  border-bottom: 1px solid #dee2e6;
}

.result-tab {
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  background: #f8f9fa;
  border: none;
  border-right: 1px solid #dee2e6;
  font-weight: 500;
}

.result-tab.active {
  background: #fff;
  border-bottom: 3px solid #0d6efd;
  color: #0d6efd;
}

.result-content {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
}

.result-pane {
  display: none;
}

.result-pane.active {
  display: block;
}

.checksum-value {
  font-family: monospace;
  font-size: 1.25rem;
  padding: 1rem;
  background: #f8f9fa;
  word-break: break-all;
}

.checksum-details {
  margin-top: 1.5rem;
}

.detail-item {
  display: flex;
  margin-bottom: 0.75rem;
}

.detail-label {
  font-weight: 500;
  min-width: 150px;
}

.validation-result {
  padding: 1rem;
  border-radius: 0.25rem;
  margin-bottom: 1.5rem;
}

.validation-success {
  background-color: #d1e7dd;
  color: #0f5132;
  border-left: 4px solid #198754;
}

.validation-error {
  background-color: #f8d7da;
  color: #842029;
  border-left: 4px solid #dc3545;
}

.checksum-box {
  background: #f8f9fa;
}