@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --old-silver: #848482;
    --royal-blue: #4169E1;
    --background-color: #f5f7fa;
    --default-border-radius: 8px;
}

html, body {
    font-family: "Roboto", sans-serif;
    color: #333333;
}

h1:focus {
    outline: none;
}

h3 {
    color: #333333;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #333333;
    background-color: #c0c0c0;
    border-color: #5e5e5e;
}

.custom-button {
    background-color: transparent;
    border: 1px solid lightgrey;
    border-radius: var(--default-border-radius);
    padding: 5px 10px;
    color: #333333;
}
    .custom-button img {
        width: 32px;
        height: 32px;
    }
    .custom-button:focus {
        outline: none; /* Æ÷Ä¿½º½Ã À±°û¼±À» Á¦°ÅÇÕ´Ï´Ù. */
    }

    .custom-button:active {
        transform: scale(0.88); /* Ŭ¸¯½Ã ¹öÆ° Å©±â¸¦ ¾à°£ ÁÙÀÔ´Ï´Ù. */
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35); /* Ŭ¸¯½Ã À½¿µ(±×¸²ÀÚ)¸¦ Ãß°¡ÇÕ´Ï´Ù. */
    }
    .custom-button img.dogecoin-icon {
        width: 24px; /* DOGE coin À̹ÌÁö Å©±â */
        height: 24px; /* DOGE coin À̹ÌÁö Å©±â */
        margin-right: 2px; /* À̹ÌÁö¿Í ÅؽºÆ® »çÀÌÀÇ °£°Ý */
    }

    .custom-button span {
        font-size: 14px; /* ÅؽºÆ® Å©±â */
    }

.btn-primary:hover {
    background-color: #4a4a4a; /* ¿¬ÇÑ Â÷ÄÝ»ö */
    color: white; /* ÅؽºÆ® »ö»ó */
    border: 2px solid #c0c0c0; /* Å׵θ® Àº»ö */
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.close-button {
    background-color: transparent;
    border: none;
    color: grey;
    cursor: pointer;
}

.apply-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: var(--default-border-radius);
    padding: 5px 10px;
    cursor: pointer;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.title-text {
    font-size:30px;
    padding-bottom:5px;
    background: linear-gradient(to right, #232323, #505050);
    -webkit-background-clip: text;
    color: transparent;
}

.table-wrapper {
    max-height:80vh;
    border-radius: var(--default-border-radius);
    overflow: hidden; /* µÕ±Ù ¸ð¼­¸®¸¦ ³Ñ´Â ³»¿ë ¼û±â±â */
    border: 1px solid #ccc; /* Å׵θ® */
    overflow-x: auto;
    overflow-y: auto; /* ¼¼·Î ½ºÅ©·Ñ È°¼ºÈ­ */
    scrollbar-width: none; /* Firefox¿¡¼­ ½ºÅ©·Ñ¹Ù ¼û±â±â */
    -ms-overflow-style: none; /* IE¿¡¼­ ½ºÅ©·Ñ¹Ù ¼û±â±â */
    position: relative;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1); /* ÀÚ¿¬½º·¯¿î ±×¸²ÀÚ */
    flex:1;
}

.table {
    border-collapse: collapse; /* ¼¿ °£ °æ°è¸¦ ÇÕħ */
    width: 100%;
    background-color: #ffffff;
}

    .table thead {
        position: sticky; /* Çì´õ °íÁ¤ */
        top: 0; /* ÃÖ»ó´Ü¿¡ °íÁ¤ */
        z-index: 2; /* ´Ù¸¥ ¿ä¼Ò À§·Î ¼³Á¤ */
        color: #ffffff; /* Çì´õ ±ÛÀÚ »ö */
        font-weight: 250; /* Çì´õ ±Û²Ã µÎ²² */
    }

    /* ±âº» Å×ÀÌºí ¼¿ ½ºÅ¸ÀÏ */
    .table th,
    .table td {
        padding: 12px 15px; /* ¼¿ ³»ºÎ ¿©¹é */
        text-align: right; /* ÅؽºÆ® ¿À¸¥ÂÊ Á¤·Ä */
        background-color: #f9f9f9; /* ¼¿ ¹è°æ»ö */
        z-index: 1;
        border: 1px solid rgba(192, 192, 192, 0.2); /* ¾ãÀº Å׵θ® */
        vertical-align: middle; /* ¼¿ ÅؽºÆ® ¼öÁ÷ Áß¾Ó Á¤·Ä */
    }

    /* Çì´õ ½ºÅ¸ÀÏ */
    .table th {
        text-align: center; /* Çì´õ ÅؽºÆ® °¡¿îµ¥ Á¤·Ä */
        background-color: var(--old-silver);
        font-size: 14px; /* Çì´õ ±ÛÀÚ Å©±â */
        border: none; /* Çì´õ ¼¿ Å׵θ® Á¦°Å */
    }

    /* Çà ½ºÅ¸ÀÏ */
    .table tr:nth-child(odd) {
        background-color: #f5f5f5; /* Ȧ¼ö Çà ¹è°æ»ö */
    }

    .table tr:nth-child(even) {
        background-color: #ffffff; /* ¦¼ö Çà ¹è°æ»ö */
    }

    .table tr:hover {
        background-color: #f0f0f0; /* Çà ¸¶¿ì½º È£¹ö ½Ã »ö º¯È­ */
    }

    .table td:active {
        background-color: #dcdcdc; /* Ŭ¸¯ ½Ã ¹è°æ»ö ¾îµÎ¿î ȸ»öÀ¸·Î º¯°æ */
    }


/* Footer ½ºÅ¸ÀÏ */
.footer {
    position: fixed;
    bottom: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    background-color: rgba(192, 192, 192, 0.75);
    border-radius: var(--default-border-radius);
    padding: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.footer-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ticker-input {
    font-size: 16px;
    border: 1px solid lightgrey;
    border-radius: var(--default-border-radius);
    width: 100px;
    color: #333333;
}

.ticker-text {
    font-size: 16px;
    color: #333333;
}

.footer-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 10px;
    background-color: transparent;
    border: 1px solid lightgrey;
    border-radius: var(--default-border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .footer-button:hover {
        background-color: #c0c0c0;
    }

.currency-value {
    font-size: 16px;
    color: #333333;
}

.ticker-select {
    font-size: 16px;
    border: 1px solid lightgrey;
    border-radius: var(--default-border-radius);
    background-color: #ffffff;
    color: #333333;
}

.sort-icon {
    cursor: pointer;
    font-size: 16px;
    margin-left: 5px;
}

.footer-scroll-button {
    margin-left: 10px;
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #333333;
}

    .footer-scroll-button:hover {
        color: #0071c1;
    }


/* °øÅë ½ºÅ¸ÀÏ */
.form-element {
    font-size: 16px; /* °øÅë ±ÛÀÚ Å©±â */
    height: 30px; /* °øÅë ³ôÀÌ */
    padding: 5px 10px; /* ³»ºÎ ¿©¹é */
    border: 1px solid lightgrey; /* Å׵θ® */
    border-radius: var(--default-border-radius);
    background-color: #ffffff; /* ¹è°æ»ö */
    color: #333333; /* ±ÛÀÚ»ö */
    font-family: "Roboto", sans-serif; /* ÆùÆ® */
    box-sizing: border-box; /* Å©±â °è»ê Æ÷ÇÔ */
    outline: none; /* Æ÷Ä¿½º ½Ã ±âº» ¾Æ¿ô¶óÀÎ Á¦°Å */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* ºÎµå·¯¿î Àüȯ */
}

    .form-element:focus {
        border-color: #0071c1; /* Æ÷Ä¿½º ½Ã Å׵θ® »ö»ó */
        box-shadow: 0 0 5px rgba(0, 113, 193, 0.3); /* Æ÷Ä¿½º ½Ã ±×¸²ÀÚ È¿°ú */
    }

/* select ¿ä¼Ò Ä¿½ºÅ͸¶ÀÌ¡ */
.ticker-select {
    appearance: none; /* ºê¶ó¿ìÀú ±âº» È­»ìÇ¥ Á¦°Å */
    -webkit-appearance: none; /* »çÆĸ® Áö¿ø */
    -moz-appearance: none; /* ÆÄÀ̾îÆø½º Áö¿ø */
    background: #f0f0f0 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><polygon points="0,0 12,0 6,12" fill="%23a0a0a0"/></svg>') no-repeat right 10px center; /* Àº»ö È­»ìÇ¥ Ãß°¡ */
    padding-right: 25px; /* È­»ìÇ¥ °ø°£ È®º¸ */
    display: flex;
    align-items: center; /* ÅؽºÆ® ¼¼·Î °¡¿îµ¥ Á¤·Ä */
}

    /* IE Áö¿øÀ» À§ÇÑ Ãß°¡ */
    .ticker-select::-ms-expand {
        display: none; /* IE¿¡¼­ ±âº» È­»ìÇ¥ ¼û±â±â */
    }

.worldmap {
    width: 100%;
    height: 480px;
    margin-bottom: 20px;
    border-radius: var(--default-border-radius);
}

/* ¹ÝÀÀÇü µðÀÚÀÎ */
@media (max-width: 768px) {

    .table th,
    .table td {
        font-size: 12px; /* Smaller font size for mobile */
    }

    .desktop-only {
        display: none;
    }

    .footer {
        display: flex;
        flex-direction: row; /* ¿ä¼Ò¸¦ ÇÑ ÇàÀ¸·Î Á¤·Ä */
        justify-content: space-between; /* ¿ä¼Ò °£ °£°Ý ¹èÄ¡ */
        align-items: center; /* ¼öÁ÷ Áß¾Ó Á¤·Ä */
        gap: 5px; /* ¿ä¼Ò °£°Ý */
        overflow-x: auto; /* °¡·Î ½ºÅ©·Ñ È°¼ºÈ­ */
        padding: 5px;
    }

    .footer-section {
        display: flex;
        flex-direction: row; /* ÀÚ½Ä ¿ä¼Ò¸¦ ÇÑ Çà¿¡ ¹èÄ¡ */
        align-items: center; /* ¼öÁ÷ Áß¾Ó Á¤·Ä */
        gap: 10px; /* ³»ºÎ ¿ä¼Ò °£°Ý */
    }

    .footer-button,
    .footer-scroll-button {
        margin: 0; /* ¹öÆ° °£ ¿©¹é Á¦°Å */
    }

    .ticker-input,
    .ticker-select {
        flex: 0 0 auto; /* Å©±â¸¦ °íÁ¤ÇÏ¿© ´Ã¾î³ªÁö ¾Êµµ·Ï ¼³Á¤ */
    }
    .ticker-input{
        width:60px;
    }

    .worldmap {
        height: 220px;
    }
    /* Àüü ÆäÀÌÁö ½ºÅ©·Ñ¹Ù ½ºÅ¸Àϸµ */
    html {
        /* Firefox Áö¿ø */
        scrollbar-width: thin; /* ¾ãÁö¸¸ ºÎµå·¯¿î µÎ²² */
        scrollbar-color: #a0a0a0 #f5f5f5; /* ºÎµå·¯¿î ȸ»ö°ú ¹àÀº ¹è°æ */
    }

        /* Webkit ±â¹Ý ºê¶ó¿ìÀú (Chrome, Safari, Edge) Áö¿ø */
        html::-webkit-scrollbar {
            width: 12px; /* Á¶±Ý ´õ µÎÅùÇÑ ³Êºñ·Î µ¿±Ûµ¿±ÛÇÔ °­Á¶ */
            height: 12px; /* °¡·Î ½ºÅ©·Ñµµ µ¿ÀÏÇÏ°Ô */
        }

        html::-webkit-scrollbar-track {
            background: #f5f5f5; /* ¾ÆÁÖ ¹à°í ºÎµå·¯¿î ¹è°æ */
            border-radius: var(--default-border-radius);
            box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1); /* »ì¦ µé¾î°£ ´À³¦ */
        }

        html::-webkit-scrollbar-thumb {
            background: #a0a0a0; /* ºÎµå·¯¿î Áß°£ ȸ»ö */
            border-radius: var(--default-border-radius);
            border: 3px solid #f5f5f5; /* µÎ²¨¿î ¿©¹éÀ¸·Î µ¿±Ûµ¿±ÛÇÔ °­Á¶ */
        }

            html::-webkit-scrollbar-thumb:hover {
                background: #ff69b4; /* È£¹ö ½Ã ÇÎÅ©ºûÀ¸·Î ±Í¿©¿ò Ãß°¡ */
            }

}

.fancy-title {
    position: relative;
    padding-left: 20px;
    font-size: 1.5rem; /* Slightly larger for emphasis */
    font-weight: 450; /* Bold but not overly heavy */
    margin-bottom: 1rem;
    transition: color 0.3s ease; /* Smooth hover effect */
}

    .fancy-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-45%);
        width: 6px; /* Thickness of the silver bar */
        height: 60%; /* Covers most of the title height */
        background-color: var(--old-silver); /* Silver color */
        border-radius: var(--default-border-radius); /* Rounded edges */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }


/* ù ¹ø° ¿­°ú µÎ ¹ø° ¿­ °íÁ¤ */
.table th:first-child,
.table td:first-child {
    position: sticky;
    left: 0px;
    z-index: 1; /* ´Ù¸¥ ¿ä¼Òº¸´Ù À§¿¡ ¹èÄ¡ */
    text-align: center;
}

/* µÎ ¹ø° ¿­ °íÁ¤ */
.table th:nth-child(2),
.table td:nth-child(2) {
    position: sticky;
    left: 60px;
    z-index: 1;
}

/* ±¤°í ÄÁÅ×ÀÌ³Ê ½ºÅ¸ÀÏ */
.ad-container {
    display: flex;
    justify-content: center; /* ¼öÆò Áß¾Ó Á¤·Ä */
    margin-top: 5px; /* »ó´Ü ¸¶Áø 5px */
    width: 100%; /* Àüü ³Êºñ »ç¿ë */
}