/* card-glass */
.card-glass {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background-color: rgb(34 46 64 / 11%);
  box-shadow: 0px 0px 50px rgb(0 0 0 / 20%);
  border-color: transparent;
}

.card-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(51 70 96 / 65%),
    transparent
  );
}

.card-glass::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 1px;
  height: 96%;
  background: linear-gradient(
    180deg,
    rgb(51 70 96 / 78%),
    transparent,
    rgb(51 70 96 / 32%)
  );
}

/* navbar-glass */
.navbar-glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.11);
    box-shadow: 0px 0px 50px rgb(0 0 0 / 39%);
}

.navbar-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 255 255 / 56%),
    transparent
  );
}

.navbar-glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 47%),
    transparent,
    rgb(255 255 255 / 14%)
  );
}

/* navbar-glass-dark */
.navbar-glass-dark {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-color: rgb(34 46 64 / 11%);
    box-shadow: 0px 0px 50px rgb(0 0 0 / 39%);
}

.navbar-glass-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(51 70 96 / 65%),
    transparent
  );
}

.navbar-glass-dark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgb(51 70 96 / 78%),
    transparent,
    rgb(51 70 96 / 32%)
  );
}

/* jumbotron-glass */
.jumbotron-glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-color: rgb(34 46 64 / 11%);
    box-shadow: 0px 0px 50px rgb(0 0 0 / 39%);
}

.jumbotron-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(51 70 96 / 65%),
    transparent
  );
}

.jumbotron-glass::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 1px;
  height: 96%;
  background: linear-gradient(
    180deg,
    rgb(51 70 96 / 78%),
    transparent,
    rgb(51 70 96 / 32%)
  );
}

/* btn-glass */
.btn-glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-color: rgb(34 46 64 / 11%);
    box-shadow: 0px 0px 50px rgb(0 0 0 / 39%);
}

.btn-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(51 70 96 / 65%),
    transparent
  );
}

.btn-glass::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 0;
  width: 1px;
  height: 94%;
  background: linear-gradient(
    180deg,
    rgb(51 70 96 / 78%),
    transparent,
    rgb(51 70 96 / 32%)
  );
}

.btn-glass:hover {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(49 58 72 / 69%);
    box-shadow: 0px 0px 50px rgb(0 0 0 / 25%);
}

.btn-glass:active {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(73 86 105 / 57%) !important;
    background-color: rgb(73 86 105 / 57%) !important;
    box-shadow: 0px 0px 50px rgb(0 0 0 / 25%);
    border-color: transparent !important;
    z-index: 0 !important;
}

.btn-glass:focus {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(73 86 105 / 57%) !important;
    box-shadow: 0px 0px 50px rgb(0 0 0 / 25%);
    border-color: transparent !important;
    z-index: 0 !important;
}

/* btn-primary-glass */
.btn-primary-glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(0 126 255 / 11%);
    box-shadow: 0px 0px 50px rgb(0 56 111 / 39%);
}

.btn-primary-glass:hover {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(0 126 255 / 33%);
    box-shadow: 0px 0px 50px rgb(0 67 133 / 73%);
}

.btn-primary-glass:active {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(34 143 255 / 54%) !important;
    box-shadow: 0px 0px 50px rgb(0 103 205 / 81%);
    border-color: transparent !important;
    z-index: 0 !important;
}

.btn-primary-glass:focus {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(17 135 255 / 44%) !important;
    box-shadow: 0px 0px 50px rgb(0 103 205 / 81%);
    border-color: transparent !important;
    z-index: 0 !important;
}

.btn-primary-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(48 103 141 / 58%), transparent);
}

.btn-primary-glass::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 0;
  width: 1px;
  height: 94%;
  background: linear-gradient(180deg, rgb(48 103 141 / 93%), transparent, rgb(48 103 141 / 32%));
}

/* btn-success-glass */
.btn-success-glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(0 255 88 / 11%);
    box-shadow: 0px 0px 50px rgb(0 111 40 / 39%);
}

.btn-success-glass:hover {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(0 201 69 / 33%);
    box-shadow: 0px 0px 50px rgb(0 164 59 / 49%);
}

.btn-success-glass:active {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(0 198 69 / 54%) !important;
    box-shadow: 0px 0px 50px rgb(0 221 112 / 55%);
    border-color: transparent !important;
    z-index: 0 !important;
}

.btn-success-glass:focus {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(0 198 69 / 54%) !important;
    box-shadow: 0px 0px 50px rgb(0 221 112 / 55%);
    border-color: transparent !important;
    z-index: 0 !important;
}

.btn-success-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(48 141 80 / 58%), transparent);
}

.btn-success-glass::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 0;
  width: 1px;
  height: 94%;
  background: linear-gradient(180deg, rgb(48 141 80 / 93%), transparent, rgb(48 141 80 / 32%));
}

/* btn-warning-glass */
.btn-warning-glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(255 199 0 / 11%);
    box-shadow: 0px 0px 50px rgb(111 83 0 / 39%);
}

.btn-warning-glass:hover {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(201 151 0 / 33%);
    box-shadow: 0px 0px 50px rgb(164 116 0 / 49%);
}

.btn-warning-glass:active {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(198 153 0 / 54%) !important;
    box-shadow: 0px 0px 50px rgb(221 159 0 / 55%);
    border-color: transparent !important;
    z-index: 0 !important;
}

.btn-warning-glass:focus {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(198 153 0 / 54%) !important;
    box-shadow: 0px 0px 50px rgb(221 159 0 / 55%);
    border-color: transparent !important;
    z-index: 0 !important;
}

.btn-warning-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(141 119 48 / 58%), transparent);
}

.btn-warning-glass::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 0;
  width: 1px;
  height: 94%;
  background: linear-gradient(180deg, rgb(141 118 48 / 93%), transparent, rgb(141 117 48 / 32%));
}

/* btn-danger-glass */
.btn-danger-glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(255 0 0 / 11%);
    box-shadow: 0px 0px 50px rgb(111 0 0 / 39%);
}

.btn-danger-glass:hover {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(201 0 0 / 33%);
    box-shadow: 0px 0px 50px rgb(164 0 0 / 49%);
}

.btn-danger-glass:active {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(198 0 0 / 54%) !important;
    box-shadow: 0px 0px 50px rgb(221 0 0 / 55%);
    border-color: transparent !important;
    z-index: 0 !important;
}

.btn-danger-glass:focus {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgb(198 0 0 / 54%) !important;
    box-shadow: 0px 0px 50px rgb(221 0 0 / 55%);
    border-color: transparent !important;
    z-index: 0 !important;
}

.btn-danger-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(141 48 48 / 58%), transparent);
}

.btn-danger-glass::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 0;
  width: 1px;
  height: 94%;
  background: linear-gradient(180deg, rgb(141 48 48 / 93%), transparent, rgb(141 48 48 / 32%));
}