:root {
    --background-100: #F5F5F5;

    --border-100: rgba(61, 61, 61, 0.12);
    --border-200: #3D3D3D;
    --button-100: rgba(61, 61, 61, 0.45);
    --button-101: #3EADFF;
    --button-102: rgba(37, 211, 102, 0.30);
    --button-103: rgba(37, 211, 102, 0.75);
    --caret-100: rgba(61, 61, 61, 0.65);
    --text-100: #3D3D3D;
    --text-101: rgba(61, 61, 61, 0.45);
    --text-102: rgba(61, 61, 61, 0.65);

    /* --text-103: #ffffff; */

    --black-100: #3D3D3D;
    --orange-100: #3EADFF;
    --white-100: white;
}

.greenmode {
    --background-100: #002329;

    --border-100: rgba(255, 255, 255, 0.12);
    --border-200: rgba(255, 255, 255, 0.87);
    --button-100: rgba(255, 255, 255, 0.12);
    --button-101: #3EADFF;
    --button-102: rgba(37, 211, 102, 0.30);
    --button-103: rgba(37, 211, 102, 0.75);
    --caret-100: rgba(255, 255, 255, 0.60);
    --text-100: rgba(255, 255, 255, 0.87);
    --text-101: rgba(255, 255, 255, 0.38);
    --text-102: rgba(255, 255, 255, 0.60);

    --orange-100: #3EADFF;
    --white-100: white;
}

@font-face {
    font-family: CenturyGothic-Regular;
    src: url('../../../../common/font/CenturyGothicRegular.woff') format("woff");
}

@font-face {
    font-family: CenturyGothic-SemiBold;
    src: url('../../../../common/font/CenturyGothicSemiBold.otf') format("opentype");
}

@font-face {
    font-family: CenturyGothic-Bold;
    src: url('../../../../common/font/CenturyGothicBold.otf') format("opentype");
    font-weight: bold;
}

@font-face {
    font-family: CenturyGothic-ExtraBold;
    src: url('../../../../common/font/CenturyGothicExtraBold.otf') format("opentype");
    font-weight: bold;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes slideup {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0%); }
}

@keyframes slideleft {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0%); }
}

@keyframes slideright {
    from { right: 0; }
    to { right: -100%; }
}

@keyframes scale {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes fly {
    0% {
        transform: translateY(0%);
    }
    25% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(10px);
    }
    75% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0%);
    }
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-25px);}
	60% {transform: translateY(-10px);}
}

* {
    box-sizing: border-box;
    font-family: CenturyGothic-Regular;
}

body, html {
    height: 100%;
    margin: 0;
    background-color: var(--background-100);
}

/* button:active {
    transform: scale(0.9);
} */

.font-020 {
    font-size: 0.2rem;
}

.font-023 {
    font-size: 0.23rem;
}

.font-025 {
    font-size: 0.25rem;
}

.font-027 {
    font-size: 0.27rem;
}

.font-030 {
    font-size: 0.3rem;
}

.font-035 {
    font-size: 0.35rem;
}

.font-037 {
    font-size: 0.37rem;
}

.font-040 {
    font-size: 0.4rem;
}

.font-045 {
    font-size: 0.45rem;
}

.font-050 {
    font-size: 0.5rem;
}

.overflow-hidden {
    overflow: hidden;
}

[v-cloak] {
    display: none;
}

.visible_hidden {
    visibility: hidden;
    pointer-events: none;
}


input {
    caret-color: var(--caret-100);
}

/* --------------------------------- common --------------------------------- */
.dropdown-icon {
    max-width: 0.15rem;
}

.clear-icon {
    display: none;
    max-width: 0.65rem;
    padding: 0.2rem;
    position: absolute;
    right: 0;
    top: 0.1rem;
}

.clear-icon.show_clear {
    display: block;
}

.select-icon {
    max-width: 0.3rem;
    margin-right: 0.15rem;
    margin-top: 0.05rem;
}

.input-container {
    margin-bottom: 0.3rem;
}

.input-container > .input-title {
    font-family: CenturyGothic-SemiBold;
}

.input-field {
    padding: 0.23rem;
    border: 0.75px solid var(--border-100);
    border-radius: 0.2rem;
    position: relative;
}

.input-field > input {
    background: transparent;
    border: none;
    color: var(--text-100);
    font-family: CenturyGothic-Regular;
    width: 100%;
}

.input-field:has(> input:focus) {
    border: 0.75px solid #3EADFF!important;
}

.container .input-field:focus-within {
    border: 0.75px solid #3EADFF!important;
}

input::selection {
    background: transparent;
}

/* --------------------------------- header-container --------------------------------- */
.header-container {
    background-color: var(--white-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
}

.header-container.fixed {
    position: fixed;
}

.header-container.absolute {
    /* position: absolute;
    bottom: 100vh; */
}

.header-container > .header-icon {
    max-width: 30%;
}

.language-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.language-field > span {
    margin-right: 0.2rem;
}

/* ----------------------- content-container ----------------------- */
.content-container {
    padding: 1.7rem 0.3rem 0.5rem;
}

.no-search-img {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.3rem;
}

.countrylist-container > .alphabet_hidden {
    justify-content: center;
}