@charset "utf-8";
@font-face {font-family: 'Pretendard'; font-weight: 45 920; font-style: normal; font-display: swap; src: local('Pretendard Variable'), url('../fonts/PretendardVariable.woff2') format('woff2-variations')}

/* Common Layout */
body{font-family:'Pretendard',sans-serif; font-size:1rem;}
h1{padding-top:10px;font-weight:700;}
header {--bs-bg-opacity: 1; background-color:#272b35}
header .container {max-width: 900px; }
header .nav li {font-weight:500}
footer {color: #606161}
footer a {color: #606161; font-weight:bold; text-decoration: none;}
.bd-callout h6 span{background-color: #e2e2e2 !important;}
.logo {width:300px;}
.container-fluid { max-width: 900px; margin-bottom: 30px; }
.bd-callout {padding: 1.25rem;margin-top: 1.25rem;margin-bottom: 1.25rem;border: 1px solid #e9ecef;border-left-width: .25rem; border-radius: .25rem;}
.bd-callout-info {border-left-color: #5bc0de;}
.bd-callout-success {border-left-color: #28a745;}
.bd-callout-danger {border-left-color: #d9534f;}
.bd-callout-warning {border-left-color: #f0ad4e;}
.bd-callout-primary {border-left-color: #272b35;}
.bd-callout-default {border-left-color: #6c757d;}
.title { margin-top:20px; }
.title > div { display: flex;}
.title a { display: flex; color: #000; text-decoration: none; }
.title img { width:50px; height:50px; }
.title h1 { font-weight:300; font-size:2em; margin: 0 0 0 12px;}
.title h1 span { font-weight:700;}
.card-header{padding: .8rem 1rem;}
.card i {margin-right:5px;}
.form-check{margin-top:3px;}
.form-check-label{cursor:pointer;}
.nav-link {color:#0789b1}
.copy-btn {display: block; position: absolute; bottom: 10px; right: 10px; border: solid 1px #d6d8db; padding: 4px 8px 2px; border-radius: 5px;}
.utterances {max-width:none}

/* Card */
.section#myip .card-header {border-bottom: 0;}
.section#slash .select-row {display:flex;}
.section#slash .select-row div {margin-right:7px;}
.pathHotkey > i { margin-right:6px;}
.pathHotkey > span { margin-bottom:8px; }
.unicodeDs,.pathDs {font-size:.8em;}
@media all and (min-width:768px) {
    .section#slash .select-row div {margin-right:15px;}
    .pathHotkey > br { display:none;}
    .pathHotkey > span { margin-right:10px; }
}
.accordion-button {padding: .6rem 1.25rem;}
.btn-default {color: #333; background-color: #fff; border-color: #ccc;}
.btn-character-sm {min-width: 35px !important; font-size: 18px; margin: 2px; padding: 4px 4px;}
.btn-default:hover {color: #333; background-color: #e6e6e6; border-color: #adadad;}
.btn-character-sm:hover {border: 0px solid white;}
#converter label {padding-left:4px; padding-right:0}
#crypto label {padding-left:4px; padding-right:0}
#crypto .input-group-text {padding: .375rem .75rem}