.pagination .page-item .page-link,
.btn,
.btn-group,
.btn-close,
.close,
.modal-body,
.modal-dialog,
.modal-content,
.modal-header,
.modal-footer,
.card {
    border-radius: 0;
}

#predefinedThemes, #colorCustomizations {
    transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
    overflow: hidden;
}

.pagination {
    overflow-x: auto;
    white-space: nowrap;
}

.blur-effect {
    filter: blur(2px);
    pointer-events: none;
}

.banano-link {
    color: #AED711;
    text-decoration: underline;
    font-weight: bold;
    position: relative;
}

.banano-link::after {
    content: "\f35d";
    /* Font Awesome external link icon code */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: relative;
    top: -2px;
    left: 6px;
    font-size: 0.8em;
}

.banano-link:hover {
    background-image: linear-gradient(90deg, #AED711, #AED711);
}

@font-face {
    font-family: 'Open Sans';
    src: url(../../assets/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2?h=272d5ea61a58920954324efe386fcd2d) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
    font-family: 'Open Sans';
    src: url(../../assets/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2?h=272d5ea61a58920954324efe386fcd2d) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: 'Open Sans';
    src: url(../../assets/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVIGxA.woff2?h=272d5ea61a58920954324efe386fcd2d) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: 'Open Sans';
    src: url(../../assets/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVIGxA.woff2?h=272d5ea61a58920954324efe386fcd2d) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0370-03FF
}

@font-face {
    font-family: 'Open Sans';
    src: url(../../assets/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVIGxA.woff2?h=272d5ea61a58920954324efe386fcd2d) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F
}

@font-face {
    font-family: 'Open Sans';
    src: url(../../assets/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVIGxA.woff2?h=272d5ea61a58920954324efe386fcd2d) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: 'Open Sans';
    src: url(../../assets/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2?h=272d5ea61a58920954324efe386fcd2d) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Open Sans';
    src: url(../../assets/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2?h=272d5ea61a58920954324efe386fcd2d) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Roboto;
    src: url(../../assets/fonts/KFOmCnqEu92Fr1Mu72xKOzY.woff2?h=a1ad8334c72d786a32aad2fad4a6cdfb) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
    font-family: Roboto;
    src: url(../../assets/fonts/KFOmCnqEu92Fr1Mu5mxKOzY.woff2?h=a1ad8334c72d786a32aad2fad4a6cdfb) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: Roboto;
    src: url(../../assets/fonts/KFOmCnqEu92Fr1Mu7mxKOzY.woff2?h=a1ad8334c72d786a32aad2fad4a6cdfb) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: Roboto;
    src: url(../../assets/fonts/KFOmCnqEu92Fr1Mu4WxKOzY.woff2?h=a1ad8334c72d786a32aad2fad4a6cdfb) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0370-03FF
}

@font-face {
    font-family: Roboto;
    src: url(../../assets/fonts/KFOmCnqEu92Fr1Mu7WxKOzY.woff2?h=a1ad8334c72d786a32aad2fad4a6cdfb) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: Roboto;
    src: url(../../assets/fonts/KFOmCnqEu92Fr1Mu7GxKOzY.woff2?h=a1ad8334c72d786a32aad2fad4a6cdfb) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Roboto;
    src: url(../../assets/fonts/KFOmCnqEu92Fr1Mu4mxK.woff2?h=a1ad8334c72d786a32aad2fad4a6cdfb) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

.fit-cover {
    object-fit: cover
}

.card2 {
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
    border: none;
    -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 7px rgba(0, 0, 0, .05)
}

.card2:hover {
    transform: scale(1.04);
    border: none
}

.card2>a:active,
.card2>a:hover {
    color: inherit;
    background: #fff;
    text-decoration: none
}

.card2>a:active .card-footer .vfi,
.card2>a:active .card-icon-top,
.card2>a:active .card-tags,
.card2>a:hover .card-footer .vfi,
.card2>a:hover .card-icon-top,
.card2>a:hover .card-tags,
a {
    color: inherit
}

.card2>a:active .card-title,
.card2>a:hover .card-title {
    color: #097d6c
}

a:active,
a:link,
a:visited {
    text-decoration: none
}

a:hover {
    color: inherit;
    text-decoration: none
}

.lighten:hover {
    opacity: .75
}

.lighten:active {
    opacity: .5
}

.input-wrapper {
    position: relative;
}

.form-group {
    position: relative;
}

.skill-text {
    font-size: 1.5em;
}

.char-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    background-color: black;
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 0.36;
}

.greenland a {
    color: greenyellow;
    text-decoration: underline;
}

.greenland p {
    font-size: 22px;
}

.info-container span {
    border-radius: 0px;
    margin: 0 0 5px 3px;
}

.form-control {
    border-radius: 0;
    background: var(--bs-dark);
    color: var(--bs-white)
}

.form-check-input[type="checkbox"] {
    box-shadow: none !important;
}

.form-select {
    background-color: green;
    padding-top: 0;
    padding-bottom: 0;
    height: 38px;
    box-shadow: none;
    line-height: 38px;
    color: var(--bs-white);
    background-clip: padding-box;
    border-radius: 0;
    appearance: none; /* Removes default system styling */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"); /* Custom arrow */
    background-repeat: no-repeat, repeat;
    background-position: right 0.75rem center, 0 0; /* Arrow position */
    background-size: 8px 10px; /* Arrow size */
    border: none;
}

.form-check-input[type="checkbox"] {
    box-shadow: none !important;
}

.form-control:focus {
    color: var(--bs-white);
    background-color: var(--bs-dark);
    box-shadow: 0 0 0 .1rem white;
    border-color: #80bdff;
    outline: 0;
}

.form-control:read-only {
    background-color: green;
    border-color: green;
    box-shadow: none;
}

.form-control:read-only::placeholder {
    color: var(--bs-gray-300)
}

.cards {
    border-radius: 0
}

.bg-light {
    background-color: #eee !important;
    border-radius: 3px;
    color: var(--bs-dark);
}

.bg-dark {
    background-color: #2b2b28 !important;
    color: #e8d6d1
}

.lightswitch-enlarge {
    width: 48px !important;
    height: 24px !important
}

.bs-icon {
    --bs-icon-size: .75rem;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: var(--bs-icon-size);
    width: calc(var(--bs-icon-size) * 2);
    height: calc(var(--bs-icon-size) * 2);
    color: var(--bs-primary)
}

.bs-icon-xs {
    --bs-icon-size: 1rem;
    width: calc(var(--bs-icon-size) * 1.5);
    height: calc(var(--bs-icon-size) * 1.5)
}

.bs-icon-sm {
    --bs-icon-size: 1rem
}

.bs-icon-md {
    --bs-icon-size: 1.5rem
}

.bs-icon-lg {
    --bs-icon-size: 2rem
}

.bs-icon-xl {
    --bs-icon-size: 2.5rem
}

.bs-icon.bs-icon-primary {
    color: var(--bs-white);
    background: var(--bs-primary)
}

.bs-icon.bs-icon-primary-light {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .2)
}

.bs-icon.bs-icon-semi-white {
    color: var(--bs-primary);
    background: rgba(255, 255, 255, .5)
}

.bs-icon.bs-icon-rounded {
    border-radius: .5rem
}

.bs-icon.bs-icon-circle {
    border-radius: 50%
}

.search-form {
    margin: 40px 5px;
    font: 12px sans-serif;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, .08)
}

.search-form div.input-group-addon {
    background: #fff;
    color: #80a3bd;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    border: 1px solid #b6c3cd;
    border-right: 0
}

.search-form .input-group input {
    background-color: #fff;
    box-shadow: none;
    color: #4e565c;
    outline: 0;
    border: 1px solid #b6c3cd;
    border-right: 0;
    border-left: 0
}

.search-form div.input-group-btn button {
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    background: #6caee0;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, .08);
    color: #fff;
    border-color: #6caee0;
    outline: 0;
    opacity: .9
}

.search-form div.input-group-btn button:hover {
    opacity: 1
}

.search-form div.input-group-btn button:focus:active {
    background-color: #6caee0;
    color: #fff;
    outline: 0
}

#preview {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px;
    /* Add some padding for better visuals */
    box-sizing: border-box;
    /* To include the padding in the element's total width and height */
    z-index: 999;
}

.color-box {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.color-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin-right: 2px;
    cursor: pointer;
}

.color-palette {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.color-palette input[type="radio"] {
    display: none;
}

.color-palette input[type="radio"]:checked+.color-box {
    border: 3px solid #fff;
    box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.5);
}