Files
elink-test-master/src/main/resources/static/css/custom.css
T
2023-08-22 13:57:18 +09:00

1650 lines
31 KiB
CSS

/* 이 파일은 커스텀 파일입니다*/
body {
font-family: 'NotoSansKR', sans-serif !important;
/*font-family: 'Nanum Gothic', sans-serif !important;*/
/*font-family: 'NanumBarunGothic', sans-serif !important;*/
font-weight: bold;
}
a {
color: #000 !important;
text-decoration: none !important;
}
h1 {
font-weight: bold;
}
.mt70 {
margin-top: 70px;
}
ul li {
list-style: none;
}
.logo {
display: block;
position: relative;
float: left;
width: 215px;
height: 30px;
text-indent: -99999px;
}
.hr_bt {
display: block;
position: relative;
width: calc(100% - 30px);
/*margin: 30px auto 60px;*/
padding: 0;
border-top: 1px solid #222;
}
.hr_bt_s {
display: block;
position: relative;
width: calc(100% - 240px);
margin: 0 auto 20px;
padding: 0;
border-top: 1px solid #ccc;
}
a.btn.btn-primary {
color: #fff !important;
text-decoration: none !important;
}
.btn-primary {
background-color: #39077A;
border-color: #39077A;
}
.list-group-item.active {
background-color: #39077A !important;
border-color: #39077A !important;
}
.list-group-item.active > a {
color : #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
background-color: #39077A;
}
.btn-primary:disabled {
background-color: #766d81;
border-color: #766d81;
}
.info_img {
display: block;
position: relative;
left: -5%;
padding: 70px 0;
}
/*공지사항*/
.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
background-color: #f8f9fa;
}
/*FAQ*/
.panel-title > a {
font-size: 20px;
font-weight: 400;
}
.panel-group {
border-top: 1px solid #222;
border-bottom: 2px solid #222;
}
.panel,
.panel-group .panel,
.panel-heading {
border-radius: 0px; /*background: url(/developer/img/faq_arrow.png)no-repeat 1060px;*/
}
/*.panel-heading.on {background: url(./developer/img/faq_arrow_on.png)no-repeat 1060px;}*/
.panel-default {
border: none;
}
.panel-default > .panel-heading {
padding: 25px 0 25px 30px;
border-top: 1px solid #222;
background-color: #fff;
}
.panel-default > .panel-heading:last-child {
border-bottom: 1px solid #222;
}
.panel-default > .panel-heading + .panel-collapse .panel-body {
padding: 20px 30px 40px 30px;
font-size: 16px;
}
.panel-group .panel + .panel {
margin-top: 0;
}
.collapse.in {
background-color: #f8f9fa;
}
.panel-default .panel-title a:focus, .panel-default_s .panel-title a:focus {
color: #7456cf;
font-weight: 600;
}
.f-g-l fieldset {
display: block;
float: left;
clear: both;
width: 440px;
}
.signup .idsave {
margin: 10px 0 0 95px;
}
.b-example-divider {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.btn-toggle {
display: inline-flex;
align-items: center;
width: 100%;
padding: 20px; /*margin: 10px 0 5px 0;*/
height: 30px;
background-color: /*transparent*/ #fff8eb;
border-radius: 4px;
border: 0;
font-weight: 500;
font-size: 16px;
color: #222;
}
.btn-toggle:hover,
.btn-toggle:focus {
color: rgba(0, 0, 0, .85);
background-color: #fff8eb;
}
/* 화면 스크롤 해도 nav_bar를 상단에 고정 */
.fixed_top {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background-color: #fff;
animation: appear 0.5s ease-in-out;
}
.dropdown-menu {
min-width: 7rem !important;
}
.fixed_menu {
position: fixed;
top: 50px;
z-index: 999;
background-color: #fff;
display: block;
}
.btn-toggle[aria-expanded="true"] {
width: 100%;
color: #fff;
font-size: 16px;
font-weight: 500;
background-color: #fd9b00;
}
.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
}
.btn-toggle-nav a {
display: inline-flex;
width: 100%;
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: 1.25rem;
text-decoration: none;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: #222;
}
.scrollarea {
overflow-y: auto;
}
.admin_content {
display: block;
position: relative;
margin: 0 auto;
}
.has-error .form-control {
border-color: #dc312d;
}
.explan.error {
color: #dc312d;
}
/*테스트 등록*/
.testregister_wrap {
width: 100%;
padding: 0;
border-radius: 10px;
border: 1px solid #ddd;
margin: 20px 0 40px 0;
}
.testregister_top {
padding: 40px 60px 40px 60px;
}
.testregister_left, .testregister_right {
display: inline-block;
width: 49.8%;
padding: 40px 60px 60px 60px;
vertical-align: top;
}
.testregister_left {
border-right: 1px solid #e6e6e6;
}
.testregister_wrap h3 {
display: block;
float: left;
margin-top: 10px;
font-weight: 600;
margin-bottom: 20px;
}
.jg-regist {
display: block;
position: relative;
float: left;
width: 100%;
}
.jg-regist table tr {
height: 40px;
font-size: 14px;
border-bottom: 1px solid #ddd;
}
.jsgrid-table {
position: relative;
margin-left: 15px;
}
.jsgrid-table tbody tr td, .jsgrid-cell {
width: 150px;
}
.testregister_wrap h3 span {
display: inline-block;
position: relative;
width: 26px;
height: 26px;
margin-right: 10px;
top: -2px;
background-color: #222;
border-radius: 50%;
text-align: center;
color: #fff;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
}
.testregister_wrap hr {
display: block;
width: 100%;
margin: 0;
border-color: #ddd;
}
.testregister_result {
width: 100%;
border: 1px solid #ddd;
border-radius: 6px;
padding: 10px 0 10px 20px;
line-height: 1.7;
list-style: none;
}
.testregister_select_tit {
float: left;
width: 100%;
border: 1px solid #ddd;
border-radius: 6px;
padding: 15px 0 15px 20px;
line-height: 1.7;
list-style: none;
}
.testregister_select_tit li {
text-align: center;
}
.testregister_select {
float: left;
width: 100%;
border: 1px solid #ddd;
border-radius: 6px;
padding: 10px 20px;
background-color: #fafafa;
line-height: 1.7;
list-style: none;
}
.testregister_select li {
display: inline-block;
width: 100%;
height: 46px;
line-height: 2.8;
text-indent: 20px;
}
.testregister_select li:first-child {
border-bottom: 1px solid #ddd;
}
.testregister_select li:hover {
display: inline-block;
width: 100%;
background-color: #f1f1f1;
}
.testregister_result a, .testregister_select a {
color: #222;
}
.testregister_left .pagination {
margin-top: 15px;
}
.testregister_left .pagination ul li a,
.testregister_left .pagination ul li.on a,
.testregister_left .pagination ul li:hover a {
border-radius: 4px;
}
.testregister_detail {
padding: 40px 60px 40px 60px;
}
.testregister_detail label {
font-size: 20px;
}
.board_content {
padding: 10px;
line-height: 1.5;
text-indent: 0;
}
.content_area {
display: grid;
grid-template-rows:auto auto;
grid-template-areas:"search" "list";
}
.search_area {
grid-area: search;
}
.list_area {
grid-area: list
}
/*기타 css*/
.CodeMirror {
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
overflow: auto !important;
}
.pt-navbar {
padding: .75rem 0;
background-color: #7952b3
}
.pt-navbar .navbar-toggler {
padding: 0;
border: 0
}
.pt-navbar .navbar-nav .nav-link {
padding-right: .25rem;
padding-left: .25rem;
color: rgba(255, 255, 255, 0.85)
}
.pt-navbar .navbar-nav .nav-link:hover, .pt-navbar .navbar-nav .nav-link:focus {
color: #fff
}
.pt-navbar .navbar-nav .nav-link.active {
font-weight: 600;
color: #fff
}
.pt-navbar .navbar-nav-svg {
width: 1rem;
height: 1rem
}
.pt-search {
position: relative
}
.pt-search::after {
position: absolute;
top: .4rem;
right: .4rem;
display: flex;
align-items: center;
justify-content: center;
height: 1.5rem;
padding-right: .25rem;
padding-left: .25rem;
font-size: .75rem;
color: #6c757d;
content: "Ctrl + /";
border: 1px solid #dee2e6;
border-radius: .125rem
}
@media (max-width: 767.98px) {
.pt-search {
width: 100%
}
}
.pt-sidebar-toggle {
color: #6c757d
}
.pt-sidebar-toggle:hover, .pt-sidebar-toggle:focus {
color: #7952b3
}
.pt-sidebar-toggle:focus {
box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
}
.pt-sidebar-toggle .bi-collapse {
display: none
}
.pt-sidebar-toggle:not(.collapsed) .bi-expand {
display: none
}
.pt-sidebar-toggle:not(.collapsed) .bi-collapse {
display: inline-block
}
.pt-masthead {
padding: 3rem 0;
background: linear-gradient(165deg, #f7f5fb 50%, #fff 50%)
}
.pt-masthead h1 {
font-size: calc(1.525rem + 3.3vw);
line-height: 1
}
@media (min-width: 1200px) {
.container-main {
display: block;
position: relative;
min-width: 1170px;
background-color : #D4ECF1;
}
.pt-masthead h1 {
font-size: 4rem
}
}
.pt-masthead p:not(.lead) {
color: #495057
}
.pt-masthead .btn {
padding: .8rem 2rem;
font-weight: 600
}
.pt-masthead .lead {
font-size: calc(1.275rem + .3vw);
font-weight: 400;
color: #495057
}
@media (min-width: 1200px) {
.pt-masthead .lead {
font-size: 1.5rem
}
}
@media (min-width: 768px) {
.mw-md-75 {
max-width: 75%
}
}
.masthead-followup-icon {
padding: .75rem;
background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.01));
border-radius: .75rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)
}
.masthead-followup-svg {
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.125))
}
@media (min-width: 768px) {
:root {
scroll-padding-top: 4rem
}
}
.pt-content > h2:not(:first-child) {
margin-top: 3rem
}
.pt-content > h3 {
margin-top: 2rem
}
.pt-content > ul li, .pt-content > ol li {
margin-bottom: .25rem
}
.pt-content > ul li > p ~ ul, .pt-content > ol li > p ~ ul {
margin-top: -.5rem;
margin-bottom: 1rem
}
.pt-content > .table {
max-width: 100%;
margin-bottom: 1.5rem;
font-size: .875rem
}
@media (max-width: 991.98px) {
.logo_only {
display: none;
}
.pt-content > .table {
display: block;
overflow-x: auto
}
.pt-content > .table.table-bordered {
border: 0
}
}
.pt-content > .table th:first-child, .pt-content > .table td:first-child {
padding-left: 0
}
.pt-content > .table th:not(:last-child), .pt-content > .table td:not(:last-child) {
padding-right: 1.5rem
}
.pt-content > .table td:first-child > code {
white-space: nowrap
}
.pt-title {
font-size: calc(1.425rem + 2.1vw)
}
@media (min-width: 1200px) {
.pt-title {
font-size: 3rem
}
}
@media (max-width: 849px){
.hide {
display: none !important;
}
}
@media (min-width: 850px){
.main_menu {
display: none !important;
}
}
.pt-lead {
font-size: calc(1.275rem + .3vw);
font-weight: 300
}
@media (min-width: 1200px) {
.pt-lead {
font-size: 1.5rem
}
}
.pt-text-purple-bright {
color: #7952b3
}
.pt-bg-purple-bright {
background-color: #7952b3
}
@media (max-width: 767.98px) {
.pt-sidebar {
margin: 0 -.75rem 1rem
}
}
.pt-links {
overflow: auto;
font-weight: 600
}
@media (min-width: 768px) {
.pt-links {
position: -webkit-sticky;
position: sticky;
top: 5rem;
display: block !important;
height: calc(100vh - 7rem);
padding-left: .25rem;
margin-left: -.25rem;
overflow-y: auto
}
}
@media (max-width: 767.98px) {
.pt-links > ul {
padding: 1.5rem .75rem;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef
}
}
.pt-links a {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: 1.25rem;
color: rgba(0, 0, 0, 1);
text-decoration: none
}
.pt-links a:hover, .pt-links a:focus {
color: rgba(0, 0, 0, 1);
background-color: rgba(121, 82, 179, 0.1)
}
.pt-links .btn {
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, 1);
background-color: transparent;
border: 0
}
.pt-links .btn:hover, .pt-links .btn:focus {
color: rgba(0, 0, 0, 0.85);
background-color: rgba(121, 82, 179, 0.1)
}
.pt-links .btn:focus {
box-shadow: 0 0 0 1px rgba(121, 82, 179, 0.7)
}
.pt-links .btn::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform 0.35s ease;
transform-origin: .5em 50%
}
@media (prefers-reduced-motion: reduce) {
.pt-links .btn::before {
transition: none
}
}
.pt-links .btn[aria-expanded="true"] {
color: rgba(0, 0, 0, 0.85)
}
.pt-links .btn[aria-expanded="true"]::before {
transform: rotate(90deg)
}
.pt-links .active {
font-weight: 600;
color: rgba(0, 0, 0, 0.85)
}
@media (min-width: 768px) {
.pt-layout {
display: grid;
gap: 1.5rem;
grid-template-areas:"sidebar main";
grid-template-columns:1fr 3fr
}
}
@media (min-width: 992px) {
.pt-layout {
grid-template-columns:1fr 5fr
}
}
.pt-sidebar {
grid-area: sidebar;
/*width: 180px;*/
background-color: #f0f0f0;
}
.pt-main {
grid-area: main
}
@media (min-width: 768px) {
.pt-main {
}
}
@media (min-width: 992px) {
.pt-main {
padding-top: 1rem;
}
}
.pt-intro {
grid-area: intro
}
.pt-toc {
grid-area: toc
}
.pt-content {
grid-area: content;
min-width: 1px
}
@media (min-width: 992px) {
.pt-toc {
position: -webkit-sticky;
position: sticky;
top: 5rem;
right: 0;
z-index: 2;
height: calc(100vh - 7rem);
overflow-y: auto
}
}
.pt-toc nav {
font-size: .875rem
}
.pt-toc nav ul {
padding-left: 0;
list-style: none
}
.pt-toc nav ul ul {
padding-left: 1rem;
margin-top: .25rem
}
.pt-toc nav li {
margin-bottom: .25rem
}
.pt-toc nav a {
color: inherit
}
.pt-toc nav a:not(:hover) {
text-decoration: none
}
.pt-toc nav a code {
font: inherit
}
.pt-footer a {
color: #495057;
text-decoration: none
}
.pt-footer a:hover, .pt-footer a:focus {
color: #0d6efd;
text-decoration: underline
}
.pt-highlight {
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid rgba(86, 61, 124, 0.15)
}
.tooltip-demo a {
white-space: nowrap
}
.highlight {
padding: 1rem;
margin-bottom: 1rem;
background-color: #f8f9fa
}
@media (min-width: 576px) {
.highlight {
padding: 1rem 1.5rem
}
}
.highlight pre {
padding: 0;
margin-top: .65rem;
margin-bottom: .65rem;
white-space: pre;
background-color: transparent;
border: 0
}
.highlight pre code {
font-size: inherit;
color: #212529;
word-wrap: normal
}
.pt-content .highlight {
margin-right: -.75rem;
margin-left: -.75rem
}
@media (min-width: 576px) {
.pt-content .highlight {
margin-right: 0;
margin-left: 0
}
}
.btn-pt-primary {
font-weight: 600;
color: #fff;
background-color: #7952b3;
border-color: #7952b3;
}
.nav-pills .nav-link.active {
font-weight: 600 !important;
color: #fff !important;
background-color: #39077A !important;
border-color: #39077A !important;
}
.btn-pt-primary:hover, .btn-pt-primary:active {
color: #fff;
background-color: #61428f;
border-color: #61428f
}
.btn-pt-primary:focus {
box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
}
.btn-pt-download {
font-weight: 600;
color: #ffe484;
border-color: #ffe484
}
.btn-pt-download:hover, .btn-pt-download:active {
color: #2a2730;
background-color: #ffe484;
border-color: #ffe484
}
.btn-pt-download:focus {
box-shadow: 0 0 0 3px rgba(255, 228, 132, 0.25)
}
.btn-pt-light {
color: #6c757d;
border-color: #dee2e6
}
.show > .btn-pt-light, .btn-pt-light:hover, .btn-pt-light:active {
color: #7952b3;
background-color: #fff;
border-color: #7952b3
}
.btn-pt-light:focus {
box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
}
.pt-callout {
padding: 1.25rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
border: 1px solid #e9ecef;
border-left-width: .25rem;
border-radius: .25rem
}
.pt-callout h4 {
margin-bottom: .25rem
}
.pt-callout p:last-child {
margin-bottom: 0
}
.pt-callout code {
border-radius: .25rem
}
.pt-callout + .pt-callout {
margin-top: -.25rem
}
.pt-callout-info {
border-left-color: #5bc0de
}
.pt-callout-warning {
border-left-color: #f0ad4e
}
.pt-callout-danger {
border-left-color: #d9534f
}
.pt-brand-logos {
color: #7952b3
}
.pt-brand-logos .inverse {
color: #fff;
background-color: #7952b3
}
.pt-brand-item + .pt-brand-item {
border-top: 1px solid #fff
}
@media (min-width: 768px) {
.pt-brand-item + .pt-brand-item {
border-top: 0;
border-left: 1px solid #fff
}
}
.color-swatches {
margin: 0 -5px
}
.color-swatches .pt-purple {
background-color: #563d7c
}
.color-swatches .pt-purple-light {
background-color: #cbbde2
}
.color-swatches .pt-purple-lighter {
background-color: #e5e1ea
}
.color-swatches .pt-gray {
background-color: #f9f9f9
}
.color-swatch {
width: 4rem;
height: 4rem
}
@media (min-width: 768px) {
.color-swatch {
width: 6rem;
height: 6rem
}
}
.swatch-blue {
color: #fff;
background-color: #0d6efd
}
.swatch-blue::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "4.50" "\a" "4.50" "\a" "4.66";
background-color: #0d6efd;
background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-indigo {
color: #fff;
background-color: #6610f2
}
.swatch-indigo::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "7.18" "\a" "7.18" "\a" "2.92";
background-color: #6610f2;
background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-purple {
color: #fff;
background-color: #6f42c1
}
.swatch-purple::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "6.51" "\a" "6.51" "\a" "3.22";
background-color: #6f42c1;
background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-pink {
color: #fff;
background-color: #d63384
}
.swatch-pink::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "4.50" "\a" "4.50" "\a" "4.66";
background-color: #d63384;
background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-red {
color: #fff;
background-color: #dc3545
}
.swatch-red::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "4.52" "\a" "4.52" "\a" "4.63";
background-color: #dc3545;
background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-orange {
color: #000;
background-color: #fd7e14
}
.swatch-orange::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "8.17" "\a" "2.57" "\a" "8.17";
background-color: #fd7e14;
background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-yellow {
color: #000;
background-color: #ffc107
}
.swatch-yellow::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "12.8" "\a" "1.63" "\a" "12.8";
background-color: #ffc107;
background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-green {
color: #fff;
background-color: #198754
}
.swatch-green::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "4.53" "\a" "4.53" "\a" "4.63";
background-color: #198754;
background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-teal {
color: #000;
background-color: #20c997
}
.swatch-teal::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "9.86" "\a" "2.12" "\a" "9.86";
background-color: #20c997;
background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-cyan {
color: #000;
background-color: #0dcaf0
}
.swatch-cyan::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "10.7" "\a" "1.95" "\a" "10.7";
background-color: #0dcaf0;
background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-white {
color: #000;
background-color: #fff
}
.swatch-white::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "21" "\a" "1" "\a" "21";
background-color: #fff;
background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-gray {
color: #fff;
background-color: #6c757d
}
.swatch-gray::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "4.68" "\a" "4.68" "\a" "4.47";
background-color: #6c757d;
background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-gray-dark {
color: #fff;
background-color: #343a40
}
.swatch-gray-dark::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "11.5" "\a" "11.5" "\a" "1.82";
background-color: #343a40;
background-image: linear-gradient(to bottom, transparent 0.25rem, #fff 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.swatch-gray-500 {
color: #000;
background-color: #adb5bd
}
.swatch-gray-500::after {
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content: "10.1" "\a" "2.07" "\a" "10.1";
background-color: #adb5bd;
background-image: linear-gradient(to bottom, transparent 0.25rem, #000 0.25rem 0.75rem, transparent 0.75rem 1.25rem, #fff 1.25rem 1.75rem, transparent 1.75rem 2.25rem, #000 2.25rem 2.75rem, transparent 2.75rem);
background-repeat: no-repeat;
background-size: .5rem 100%
}
.pt-clipboard {
position: relative;
display: none;
float: right
}
.pt-clipboard + .highlight {
margin-top: 0
}
@media (min-width: 768px) {
.pt-clipboard {
display: block
}
}
.btn-clipboard {
position: absolute;
top: .65rem;
right: .65rem;
z-index: 10;
display: block;
padding: .25rem .5rem;
font-size: .65em;
color: #0d6efd;
background-color: #fff;
border: 1px solid;
border-radius: .25rem
}
.btn-clipboard:hover, .btn-clipboard:focus {
color: #fff;
background-color: #0d6efd
}
.pt-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.pt-placeholder-img-lg {
font-size: calc(1.475rem + 2.7vw)
}
@media (min-width: 1200px) {
.pt-placeholder-img-lg {
font-size: 3.5rem
}
}
.pt-table {
table-layout: fixed;
width: 100%;
white-space: nowrap;
background-color: #fff;
border-top: 1px solid #7f7677;
}
.pt-table thead tr th {
background-color: #f6f6f6;
letter-spacing: 0;
}
.pt-table tbody tr td {
letter-spacing: 0;
}
.pt-table thead tr th,
.pt-table tbody tr td {
border-bottom: 1px solid #cbcfd2;
letter-spacing: 0;
}
.pt-table tbody tr:hover {
background-color: #fafafa;
cursor: pointer;
}
.pt-table tbody tr:last-child td {
border-bottom: 1px solid #7e7e7e;
}
.pt-table th, .pt-table td {
padding: 9px 0;
}
ul.api_tab > li > a > .active {
color: #ffffff !important;
font-weight: bold;
}
footer {
display: block;
position: relative;
margin-top: 20px;
}
.scroll_top {
display: block;
position: absolute;
right: 15px;
width: 34px;
height: 34px;
background: #666 url(/developer/img/footer_top_arrow.png) no-repeat center 3px;
}
footer div.foot_info {
display: block;
position: relative;
width: 100%;
border-top: 1px solid #666;
padding: 30px 0 50px 30px;
margin: 32px 0 0 0;
}
footer div.foot_info span {
font-size: .8rem;
letter-spacing: .2px;
}
@media(max-width: 1459px){
.header{
max-width: 100% !important;
}
}
@media(min-width: 1460px){
.header{
max-width: 1460px !important;
}
}
.cut-sides {
overflow: hidden;
}
@media(max-width: 1919px){
.figure_img {
width: 100%;
display: block;
margin: 0 auto;
object-fit: cover;
object-position: center;
}
}
@media(min-width: 1920px){
.figure_img {
width: 1900px;
display: block;
margin: 0 auto;
object-fit: contain;
object-position: center;
}
}
.api_banner {
display: block;
width: 220px;
height: 50px;
background: url(/developer/img/api_mainban.png);
}
.api_banner a {
display: block;
width: 220px;
height: 50px;
}
@media (min-width: 576px) {
.rounded-nav {
border-radius: 50rem !important;
}
}
@media (min-width: 576px) {
.rounded-nav .nav-link {
border-radius: 50rem !important;
}
}
.api_info {
display: block;
position: relative;
letter-spacing: .3px; /* margin-bottom: 70px; */
}
.api_info h2 {
font-size: 1.4rem;
font-weight: 500;
line-height: 2;
}
.api_info p {
font-size: 1.1rem;
font-weight: 400;
margin-bottom: 30px;
color: #646464;
letter-spacing: 0px;
}
.api_info ul li {
padding-top: 15px;
}
.api_info ul h3 {
font-size: 1.2rem;
font-weight: 500;
line-height: 2;
letter-spacing: 0px;
}
.api_info ul span {
font-size: 1rem;
font-weight: 300;
color: #646464;
letter-spacing: -0.05px;
}
.api_info ul .api_info_a {
display: block;
position: relative;
padding-left: 150px;
height: 120px;
background: url(/developer/img/api_info_a.png) no-repeat;
}
.api_info ul .api_info_b {
display: block;
position: relative;
padding-left: 150px;
height: 120px;
background: url(/developer/img/api_info_b.png) no-repeat;
}
.api_info ul .api_info_c {
display: block;
position: relative;
padding-left: 150px;
height: 120px;
background: url(/developer/img/api_info_c.png) no-repeat;
}
.api_info ul .api_info_d {
display: block;
position: relative;
padding-left: 150px;
height: 120px;
background: url(/developer/img/api_info_d.png) no-repeat;
}
.CodeMirror {
margin-bottom: 0.1rem !important;
}
.CodeMirror-fullscreen {
position: fixed !important;
top: 0; left: 0; right: 0; bottom: 0;
height: auto !important;
z-index: 1000;
}
.form-select option[value="POST"] {
background-color: #49cc90 !important;
}
.post {
background-color: #e5bc8d;
}
.note-editor.note-frame.fullscreen {
background-color: white;
}
.page-item.draft .page-link {
background-color: lightblue;
}
.page-item.archived .page-link {
background-color: lightgrey;
}
.dev {
background-color : #f74140 !important;
color : white !important;
}
.prod {
background-color : #49cc90 !important;
color : white !important;
}
.current {
color : #39077A !important;
}
.reset-button {
/* Reset button styles */
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 0;
font: inherit;
outline: inherit;
/* Style the icon */
display: inline-block;
margin-right: 5px; /* Adjust this value as per your requirement */
}