@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bs-font-sans-serif: "Montserrat", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
    "Liberation Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}

[x-cloak] {display:none !important}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #212121;
    -webkit-box-shadow: 0 1px 3px #ffffff inset, 0 0 0 1000px #fafafa inset;
}

.goverlay {
    background-color: rgba(0, 0, 0, 0.75);
}

.btn {
    --bs-btn-font-family: var(--bs-font-sans-serif);
}
.form-switch .form-check-input:checked {
    border-color: #0dcaf0;
    background-color: #0dcaf0;
}

.text-truncate-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.bg-primary-gradient {
    background-image: linear-gradient(135deg, #18a7a7, #6a7bd0, #e12ad7);
}
.clip-ellipse-bottom {
  clip-path: ellipse(58% 100% at 50% 0%);
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.btn-gradient,
.btn-gradient-dark {
    position: relative;
    border: 2px solid transparent;
    animation: rotate 3s linear infinite;
    background: linear-gradient(#fff, #fff) padding-box,
        conic-gradient(from var(--angle), #18a7a7, #6a7bd0, #e12ad7, #18a7a7) border-box;
}
.btn.btn-gradient:active {
    border-color: transparent;
}
.btn-gradient {
    background: linear-gradient(#fff, #fff) padding-box,
        conic-gradient(from var(--angle), #18a7a7, #6a7bd0, #e12ad7, #18a7a7) border-box;
}
.btn-gradient-dark {
    --bs-btn-color: #fafafa;
    --bs-btn-hover-color: #fafafa;
    --bs-btn-active-color: #fafafa;
    --bs-btn-disabled-color: #c4c4c4;
    background: linear-gradient(#212121, #212121) padding-box,
        conic-gradient(from var(--angle), #18a7a7, #6a7bd0, #e12ad7, #18a7a7) border-box;
}
@keyframes rotate {
  to { --angle: 360deg; }
}



#menu-offcanvas,
#user-offcanvas {
    --bs-offcanvas-width: 300px;
}

#menu-offcanvas .list-group,
#user-offcanvas .list-group {
    --bs-list-group-active-bg: #33b0ba;
    --bs-list-group-active-border-color: #1e868f;
}

.site-main::before {
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 125px;
    position: absolute;
    display: inline-block;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgb(255, 255, 255) 100%),
    linear-gradient(to right, #cfe9e8, #e7cfe6);
}

.border-gradient,
.border-gradient-primary {
    position: relative;
}
.border-gradient::before,
.border-gradient-primary::before {
    content: "";
    z-index: -1;
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
    background-size: 300% 300%;
    top: calc(-1 * var(--border-width, 2px));
    left: calc(-1 * var(--border-width, 2px));
    width: calc(100% + var(--border-width, 2px) * 2);
    height: calc(100% + var(--border-width, 2px) * 2);
    animation: aniBorderGradient 6s linear infinite;
}
.border-gradient::before {
    background-image: linear-gradient(60deg, #18a7a7, #6a7bd0, #18b9b5, #6a7bd0);
}
.border-gradient-primary::before {
    background-image: linear-gradient(60deg, #18a7a7, #6a7bd0, #e12ad7);
}

@keyframes aniBorderGradient {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

.px-2\.5 {padding-left:0.75rem;padding-right:0.75rem;}
.top-0 {top:0}
.left-0 {left:0}
.right-0 {right:0}
.bottom-0 {bottom:0}
.cursor-pointer {cursor:pointer}
.font-weight-semibold {font-weight:600}
.rounded-3 {border-radius:0.5rem !important}
.shadow-md {box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px}







/* ui-segmented start */
.ui-segmented {
  --index: 0;
  --bg: #eee;
  --text: #333;
  --active-text: #fff;
  --active: linear-gradient(45deg, #18b9b5, #6f6adf);

  padding: 4px;
  position: relative;
  background: var(--bg);
  border-radius: 999px;
}

.ui-segmented input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.ui-segmented-track {
  display: flex;
  position: relative;
}

.ui-segmented-track label {
    flex: 1;
    z-index: 2;
    display: block;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
    text-align: center;
    color: var(--text);
    transition: color 0.25s;
}

.ui-segmented-thumb {
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    position: absolute;
    border-radius: 999px;
    background: var(--active);
    transition: transform 0.3s ease;
    width: calc(100% / var(--count));
    transform: translateX(calc(var(--index) * 100%));
}

.ui-segmented-track label.active {
    color: var(--active-text);
}
/* ui-segmented end */