:root {
    --main-color: #2250AC;
    --second-color: #2250AC;
    --third-color: #ECF3FF;
    --fourth-color: #D4E3FD;
}

h4 {
    font-size: initial;
}

p,
a,
span,
label {
    font-size: inherit;
    font-weight: normal;
}

.w-100 {
    width: 100%;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mr-10 {
    margin-right: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

a.link-style {
    color: var(--main-color);
    font-weight: bold;
    text-decoration: none;
}

a.link-style:hover {
    color: var(--main-color);
    filter: brightness(80%);
    text-decoration:none;
}

.text-danger {
    color: #f34747;
}

.text-grey {
    color: #ccc;
}

.middle {
    vertical-align: middle;
}

.form-control {
    height: 32px;
    border: 1px solid #000;
}

button.close {
    color: #000;
    opacity: .2;
}

.modal-lg {
    max-width: 700px;
}

.modal .modal-header {
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
    padding: 28px 28px 15px;
    border-bottom: none;
}

.modal .modal-body {
    padding: 15px 28px;
}

.modal .modal-footer {
    border-top: none;
    padding: 15px 28px;
}

.modal .modal-title {
    color: var(--main-color);
    font-size: 18px;
    font-weight: bold;
    padding: 0 0 0 12px;
}

#privacy-terms .modal-body {
    height: calc(100vh - 210px);
}

.privacy-content {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    width: 100%;
    min-height: 120px;
    height: 100%;
    overflow-y: auto;
    padding: 15px;
}

.primary-btn {
    background: var(--main-color);
    border: 1px solid var(--main-color);
    color: #fff;
    padding: 8px;
    transition: all 0.2s;
}

.primary-btn:hover,
.primary-btn:focus {
    background-color: var(--main-color);
    filter: brightness(80%);
    color: #fff;
}

.cancel-btn {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #000;
    padding: 8px;
    transition: all 0.2s;
}

.cancel-btn:hover,
.cancel-btn:focus {
    color: #000;
    background-color: #e2e2e2;
}

.cursor-disabled {
    cursor: not-allowed;
}

.disabled-btn {
    background: #ccc;
    border: 1px solid #ccc;
    color: #666;
    padding: 8px;
    pointer-events: none;
}

.openid-btn {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #000;
    padding: 8px;
    transition: all 0.2s;
}

.openid-btn:hover,
.openid-btn:focus {
    background-color: var(--third-color);
}

.field-icon {
    float: right;
    margin-left: -25px;
    margin-top: -30px;
    position: relative;
    z-index: 2;
    padding-right: 10px;
    font-size: 19px;
    cursor: pointer;
    color: #4a4a4a;
}

svg.svg path {
    fill: var(--main-color);
}

.xmas-bg-2021 {
    background: url(../images/theme/store_pc_bg.jpg);
    background-position: top;
    background-size: 2075px;
    background-repeat: no-repeat;
    min-height: 1245px;
}

@media screen and (max-width: 1200px) {
	.personal-main.xmas-bg-2021 {
    	background-size: 2600px;
    }
}

@media screen and (max-width: 899px) {
	.xmas-bg-2021 {
    	background: url(../images/theme/store_m_top.png), url(../images/theme/store_m_bottom.png), linear-gradient(to top, #ffffff, #D4E3FD);
        background-position: center top, center bottom;
        background-size: contain !important;
        background-repeat: no-repeat;
    }
}