@charset "utf-8";
@import url('color-set.css');

/* @ reset */
/* default style definition */
/* body {margin:0;padding:0;font-size:1rem;line-height:1.42;font-family:'Noto Sans KR',"맑은 고딕","malgun gothic","돋움",dotum,"Arial",sans-serif;font-weight:400;color:var(--black);overflow:hidden;overflow-y:auto;;} */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .0rem;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: 0px;
    margin-bottom: 0px;
}

form {
    width: 100%;
    margin: 0;
    padding: 0;
}

hr {
    display: none;
}

/* p, div, th, td, select, input {color:var(--text);} */
/* a:link, a:visited, a:active, a:hover {color:var(--text);text-decoration:none;} */
/* a {color:var(--text_dark);text-decoration:none;} */
a:focus,
a:hover,
a:visited {
    /* color:var(--text_dark); */
    text-decoration: none;
}

a img,
input.type-image {
    border: 0 none;
}

input.type-text,
textarea {
    border: 1px solid var(--form_border);
    background-color: var(--form_bg);
    padding: 1px;
}

textarea {
    width: 100%;
    vertical-align: middle;
    text-align: left;
}

input,
select,
textarea,
button {
    vertical-align: middle;
}

/* select {height:25px;line-height:25px;padding:0 30px 0 10px;border-radius:2px;font-family:Dotum, '돋움', sans-serif;border:1px solid #cbcdce;} */
button {
    font-family: 'NanumSquareNeo', 'Noto Sans KR', "맑은 고딕", "malgun gothic", "돋움", dotum, "Arial", sans-serif;
}

span.button,
img.button,
a.button {
    cursor: pointer;
    vertical-align: middle;
}

form select,
form input {
    vertical-align: middle;
}

input:disabled,
select:disabled {
    background: var(--form_bg);
}

input[readonly],
textarea[readonly] {
    background: var(--form_bg);
}

/* img {vertical-align:top;} */
strong {
    font-weight: 500;
}

th {
    text-align: center;
    font-weight: normal;
}

input#txtGameDate {
    visibility: hidden;
    width: 0;
    height: 0;
    text-indent: -999px;
}

input[type="radio"] {
    width: 13px;
    height: 13px;
}

ol,
ul,
p {
    margin-top: 0;
    margin-bottom: 0px;
}

/* dl, dt, dd, ol, ul, li {font-weight:normal;} */
/* ::-webkit-input-placeholder{color:#999;}
:-ms-input-placeholder{color:#999;}
::-ms-input-placeholder{color:#999;}
:-moz-placeholder{color:#999;}
::-moz-placeholder{color:#999;} */
*,
*:focus,
*:hover {
    outline: none;
}

button,
button:focus {
    border: none;
    outline: none;
}

/* hidden */
.hidden-obj {
    overflow: hidden;
    visibility: hidden;
    text-indent: -9999px;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
}

.hidden {
    overflow: hidden;
    visibility: hidden;
    text-indent: -9999px;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
}

/* .hide{display:block;height:0;text-indent:100%;white-space:nowrap;overflow:hidden;} */
.op100 {
    opacity: 1 !important;
}

/* overflow */
.ofl-a {
    overflow: auto;
}

.ofl-y {
    overflow-y: auto;
}

.ofl-x {
    overflow-x: auto;
}

/* @ font */
.fb {
    font-weight: bold;
}

.f12 {
    font-size: 12px !important;
}

.f13 {
    font-size: 13px !important;
}

.f14 {
    font-size: 14px !important;
}

.f15 {
    font-size: 15px !important;
}

.f16 {
    font-size: 16px !important;
}

.f17 {
    font-size: 17px !important;
}

.text-11 {
    font-size: 11px !important;
}

.text-12 {
    font-size: 12px !important;
}

.text-13 {
    font-size: 13px !important;
}

.text-14 {
    font-size: 14px !important;
}

.text-15 {
    font-size: 15px !important;
}

.text-16 {
    font-size: 16px !important;
}

.text-17 {
    font-size: 17px !important;
}

.text-18 {
    font-size: 18px !important;
}

.text-19 {
    font-size: 19px !important;
}

.text-20 {
    font-size: 20px !important;
}

.text-21 {
    font-size: 21px !important;
}

.text-22 {
    font-size: 22px !important;
}

.text-23 {
    font-size: 23px !important;
}

.text-24 {
    font-size: 24px !important;
}

.text-25 {
    font-size: 25px !important;
}

.text-26 {
    font-size: 26px !important;
}

.text-27 {
    font-size: 27px !important;
}

.text-28 {
    font-size: 28px !important;
}

.text-29 {
    font-size: 29px !important;
}

.text-30 {
    font-size: 30px !important;
}

.b100 {
    font-weight: 100 !important;
}

.b200 {
    font-weight: 200 !important;
}

.b300 {
    font-weight: 300 !important;
}

.b400 {
    font-weight: 400 !important;
}

.b500 {
    font-weight: 500 !important;
}

.b600 {
    font-weight: 600 !important;
}

.no-wrap,
.no-wrap * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ng {
    font-family: "ng";
}

.bold {
    font-weight: 500;
}

.normal {
    font-weight: normal;
}

.small,
small {
    font-size: 80%;
    font-weight: 400;
}

.text-bold,
.font-weight-bold {
    font-weight: 600 !important;
}

.text-ul {
    text-decoration: underline;
}

.lh-10 {
    line-height: 10px !important;
}

.lh-11 {
    line-height: 11px !important;
}

.lh-12 {
    line-height: 12px !important;
}

.lh-13 {
    line-height: 13px !important;
}

.lh-14 {
    line-height: 14px !important;
}

.lh-15 {
    line-height: 15px !important;
}

.lh-16 {
    line-height: 16px !important;
}

.lh-17 {
    line-height: 17px !important;
}

.lh-20 {
    line-height: 20px !important;
}

.lh-24 {
    line-height: 24px !important;
}

.lh-25 {
    line-height: 25px !important;
}

.lh-30 {
    line-height: 30px !important;
}

.lh-34 {
    line-height: 34px !important;
}

.lh-35 {
    line-height: 35px !important;
}

/* align */
.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-center img {
    max-width: 100%;
}

/* color */
.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.text-normal {
    color: #333333 !important;
}

.text-red {
    color: #d41324 !important;
}

.text-blue {
    color: var(--blue) !important;
}

.text-mint {
    color: #28e3d1 !important;
}

.text-navy {
    color: #1d3069 !important;
}

.text-orange {
    color: #FF6700 !important;
}

.text-yellow {
    color: #fff669 !important;
}

.text-green {
    color: green !important;
}

.text-white {
    color: #ffffff !important;
}

.text-brick {
    color: #9c8581 !important;
}

.text-black {
    color: var(--black)000 !important;
}

.text-dark {
    color: #111111 !important;
}

.text-grey {
    color: #888888 !important;
}

.text-grey1 {
    color: #222222 !important;
}

.text-grey2 {
    color: #555555 !important;
}

.text-grey3 {
    color: #aaaaaa !important;
}

.text-gray-500 {
    color: #b7b9cc !important;
}

.text-gold {
    color: #ca8814 !important;
}

.text-bg {
    background: #dfbaff;
}

.text-cancel {
    color: #888888 !important;
}

.text-warning {
    color: #d41324 !important;
}

.text-info {
    color: #888888;
}

/* background */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--yellow) !important;
}

a.bg-secondary:focus,
a.bg-secondary:hover,
button.bg-secondary:focus,
button.bg-secondary:hover {
    background-color: #2e53c0 !important;
}

.bg-warning {
    background-color: #d41324 !important;
}

.bg-white {
    background-color: #fff !important;
}

.bg-yellow {
    background-color: var(--yellow) !important;
}

.bg-grey,
.bg-gray {
    background-color: #f4f4f4 !important;
}

.bg-pink {
    background-color: #f6efe5;
}

/* border */
.brd {
    border: 1px solid #d9d8d8;
}

.brd-r {
    border-radius: 8px;
}

.brd-top {
    border-top: 1px solid #d9d8d8;
}

.brd-left {
    border-top: 1px solid #d9d8d8;
}

.brd-right {
    border-top: 1px solid #d9d8d8;
}

.brd-bottom {
    border-bottom: 1px solid #d9d8d8;
}

.brd-n {
    border: none !important;
}

/* 말풍선(툴팁) */
.tooltip-handler {
    position: relative;
    display: block;
}

.tooltip-handler .tooltip-type {
    visibility: hidden;
    position: absolute;
    top: -9999px;
    display: block;
    padding: 5px 5px;
    background-color: var(--white);
    border: 1px solid #ddd;
    opacity: 0;
    -webkti-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.tooltip-handler:hover .tooltip-type {
    visibility: visible;
    top: 70%;
    left: auto;
    margin-top: 5px;
    opacity: 1;
    z-index: 999;
}

/* .tooltip-handler .tooltip-type:before {content:'';position:absolute;top:100%;left:50%;margin-left:-8px;border-width:8px;border-style:solid;border-color:#fff transparent transparent transparent;z-index:10;} */
/* .tooltip-handler .tooltip-type:after {content:'';position:absolute;top:100%;left:50%;margin-left:-10px;border-width:10px;border-style:solid;border-color:#6494df transparent transparent transparent;z-index:9;}*/

/* 스크롤바 custom*/
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    height: 17%;
    background-color: #a5a5a5;
    /* border-radius:10px;*/
    ;
}

/* 스크롤바 막대 설정*/
.custom-scrollbar::-webkit-scrollbar-track {
    background-color: #d2d2d1;
}

/* 스크롤바 뒷 배경 설정*/
.custom-scrollbar {
    scrollbar-width: 4px;
    scrollbar-base-color: #d2d2d1;
    scrollbar-3dlight-color: #a5a5a5;
    scrollbar-highlight-color: #d2d2d1;
    scrollbar-face-color: #a5a5a5;
    scrollbar-track-color: #d2d2d1;
    /*scrollbar-arrow-color:#d2d2d1;*/
    scrollbar-shadow-color: #a5a5a5;
}

/* 스크롤바 커스텀 */
/* 가로 */
.mCSB_container {
    overflow: inherit;
}

.mCSB_horizontal.mCSB_inside>.mCSB_container {
    margin-bottom: 0;
}

.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail {
    margin: 0;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
    background-color: #d2d2d1;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #a5a5a5;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
    height: 4px;
}

.mCSB_scrollTools .mCSB_draggerRail {
    border-radius: 0;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    border-radius: 0;
}

.mCSB_inside>.mCSB_container {
    margin-right: 4px;
}

/* 세로 */
.mCSB_scrollTools {
    width: 4px;
}

/* .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px;} */
/* .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{width:4px;} */

/* @ layout */
.section-left,
.float-left {
    float: left !important;
}

.section-right,
.float-right {
    float: right !important;
}

.row {
    overflow: hidden;
    position: relative;
    clear: both;
    width: 100%;
    margin: 0;
}

/* position */
.ps-rel {
    position: relative;
}

.ps-abs {
    position: absolute;
}

/* display */
.dp-none {
    display: none;
}

.dp-i {
    display: inline !important;
}

.dp-b {
    display: block;
}

.dp-ib {
    display: inline-block !important;
}

.dp-if {
    display: inline-flex;
}

.dp-flex {
    display: flex;
    width: 100%;
}

.dp-flex-res {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.dp-flex-res>div {
    padding: 0 0.75rem;
}

.dp-flex-res .row-left {
    width: 50%;
    padding-left: 0;
}

.dp-flex-res .row-right {
    width: 50%;
    padding-right: 0;
}

.flex-layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

.flex-layout>* {
    flex: 1;
    padding-right: 1rem;
}

.flex-layout>*:last-child {
    padding-right: 0;
}

@media (max-width:420px) {

    /* .dp-flex-res{flex-flow:column;} */
    /* .dp-flex-res > div{width:100%;padding:0;} */
    .flex-layout {
        flex-direction: column;
    }

    .flex-layout>* {
        width: 100%;
        padding-right: 0;
    }

    .flex-layout>*:last-child {
        padding-bottom: 0;
    }
}

.dp-flex-c {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.dp-flex.align-left {
    justify-content: flex-start;
}

.dp-flex.align-middle {
    justify-content: center;
}

.dp-flex.align-right {
    justify-content: flex-end;
}

.dp-flex.space-around {
    justify-content: space-around;
}

.dp-flex.space-between {
    justify-content: space-between;
}

.dp-flex.v-align-top {
    align-items: flex-start;
}

.dp-flex.v-align-middle {
    align-items: center;
}

.dp-flex.v-align-bottom {
    align-items: flex-end;
}

.dp-tb {
    display: table;
}

.dp-tb>* {
    display: table-cell;
    vertical-align: top;
}

.v-align-top {
    vertical-align: top !important;
}

.v-align-middle {
    vertical-align: middle !important;
}

.v-align-bottom {
    vertical-align: bottom !important;
}

.wd-a {
    width: auto;
}

.w1p {
    width: 1% !important;
}

.w2p {
    width: 2% !important;
}

.w3p {
    width: 3% !important;
}

.w4p {
    width: 4% !important;
}

.w5p {
    width: 5% !important;
}

.w6p {
    width: 6% !important;
}

.w7p {
    width: 7% !important;
}

.w8p {
    width: 8% !important;
}

.w9p {
    width: 9% !important;
}

.w10p {
    width: 10% !important;
}

.w15p {
    width: 15% !important;
}

.w20p {
    width: 20% !important;
}

.w24p {
    width: 24% !important;
}

.w25p {
    width: 25% !important;
}

.w30p {
    width: 30% !important;
}

.w32p {
    width: 32% !important;
}

.w33p {
    width: 33% !important;
}

.w35p {
    width: 35% !important;
}

.w40p {
    width: 40% !important;
}

.w45p {
    width: 45% !important;
}

.w48p {
    width: 48% !important;
}

.w50p {
    width: 50% !important;
}

.w55p {
    width: 55% !important;
}

.w60p {
    width: 60% !important;
}

.w65p {
    width: 65% !important;
}

.w70p {
    width: 70% !important;
}

.w75p {
    width: 75% !important;
}

.w80p {
    width: 80% !important;
}

.w85p {
    width: 85% !important;
}

.w90p {
    width: 90% !important;
}

.w95p {
    width: 95% !important;
}

.w100p {
    width: 100% !important;
}

.w5px {
    width: 5px !important;
}

.w10px {
    width: 10px !important;
}

.w15px {
    width: 15px !important;
}

.w20px {
    width: 20px !important;
}

.w25px {
    width: 25px !important;
}

.w30px {
    width: 30px !important;
}

.w35px {
    width: 35px !important;
}

.w40px {
    width: 40px !important;
}

.w45px {
    width: 45px !important;
}

.w50px {
    width: 50px !important;
}

.w55px {
    width: 55px !important;
}

.w60px {
    width: 60px !important;
}

.w65px {
    width: 65px !important;
}

.w70px {
    width: 70px !important;
}

.w75px {
    width: 75px !important;
}

.w80px {
    width: 80px !important;
}

.w85px {
    width: 85px !important;
}

.w90px {
    width: 90px !important;
}

.w95px {
    width: 95px !important;
}

.w100px {
    width: 100px !important;
}

.w105px {
    width: 105px !important;
}

.w110px {
    width: 110px !important;
}

.w115px {
    width: 115px !important;
}

.w120px {
    width: 120px !important;
}

.w125px {
    width: 125px !important;
}

.w130px {
    width: 130px !important;
}

.w135px {
    width: 135px !important;
}

.w140px {
    width: 140px !important;
}

.w145px {
    width: 145px !important;
}

.w150px {
    width: 150px !important;
}

.w155px {
    width: 155px !important;
}

.w160px {
    width: 160px !important;
}

.w165px {
    width: 165px !important;
}

.w170px {
    width: 170px !important;
}

.w175px {
    width: 175px !important;
}

.w180px {
    width: 180px !important;
}

.w185px {
    width: 185px !important;
}

.w190px {
    width: 190px !important;
}

.w195px {
    width: 195px !important;
}

.w200px {
    width: 200px !important;
}

.w210px {
    width: 210px !important;
}

.w220px {
    width: 220px !important;
}

.w230px {
    width: 230px !important;
}

.w240px {
    width: 240px !important;
}

.w250px {
    width: 250px !important;
}

.w300px {
    width: 300px !important;
}

.w350px {
    width: 350px !important;
}

.w400px {
    width: 400px !important;
}

.w450px {
    width: 450px !important;
}

.w500px {
    width: 100%;
    max-width: 500px;
}

.w600px {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.w700px {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.w800px {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.w900px {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.w1000px {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.hg-a {
    height: auto;
}

.h5 {
    height: 5px !important;
}

.h10 {
    height: 10px !important;
}

.h15 {
    height: 15px !important;
}

.h20 {
    height: 20px !important;
}

.h25 {
    height: 25px !important;
}

.h30 {
    height: 30px !important;
}

.h35 {
    height: 35px !important;
}

.h40 {
    height: 40px !important;
}

.h45 {
    height: 45px !important;
}

.h50 {
    height: 50px !important;
}

.h55 {
    height: 55px !important;
}

.h60 {
    height: 60px !important;
}

.h65 {
    height: 65px !important;
}

.h70 {
    height: 70px !important;
}

.h75 {
    height: 75px !important;
}

.h80 {
    height: 80px !important;
}

.h85 {
    height: 85px !important;
}

.h90 {
    height: 90px !important;
}

.h95 {
    height: 95px !important;
}

.h100 {
    height: 100px !important;
}

.h150 {
    height: 150px !important;
}

.h200 {
    height: 200px !important;
}

.h250 {
    height: 250px !important;
}

.h300 {
    height: 300px !important;
}

.h350 {
    height: 350px !important;
}

.h400 {
    height: 400px !important;
}

.h450 {
    height: 450px !important;
}

.h500 {
    height: 500px !important;
}

/* margin, padding */
.mg0 {
    margin: 0 !important;
}

.mg5 {
    margin: 5px !important;
}

.mg10 {
    margin: 10px !important;
}

.mg15 {
    margin: 15px !important;
}

.mg20 {
    margin: 20px !important;
}

.mg25 {
    margin: 25px !important;
}

.mg30 {
    margin: 30px !important;
}

.mg35 {
    margin: 35px !important;
}

.mg40 {
    margin: 40px !important;
}

.mg45 {
    margin: 45px !important;
}

.mg50 {
    margin: 50px !important;
}

.mt0 {
    margin-top: 0 !important;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt25 {
    margin-top: 25px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt35 {
    margin-top: 35px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mt45 {
    margin-top: 45px !important;
}

.mt50 {
    margin-top: 50px !important;
}

.mt55 {
    margin-top: 55px !important;
}

.mt60 {
    margin-top: 60px !important;
}

.mt65 {
    margin-top: 65px !important;
}

.mt70 {
    margin-top: 70px !important;
}

.mt75 {
    margin-top: 75px !important;
}

.mt80 {
    margin-top: 80px !important;
}

.mt85 {
    margin-top: 85px !important;
}

.mt90 {
    margin-top: 90px !important;
}

.mtm20 {
    margin-top: -20px !important;
}

.mb0 {
    margin-bottom: 0px !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb15 {
    margin-bottom: 15px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb25 {
    margin-bottom: 25px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb35 {
    margin-bottom: 35px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb45 {
    margin-bottom: 45px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mb60 {
    margin-bottom: 60px !important;
}

.ml0 {
    margin-left: 0 !important;
}

.ml5 {
    margin-left: 5px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.ml15 {
    margin-left: 15px !important;
}

.ml20 {
    margin-left: 20px !important;
}

.ml25 {
    margin-left: 25px !important;
}

.ml30 {
    margin-left: 30px !important;
}

.ml35 {
    margin-left: 35px !important;
}

.ml40 {
    margin-left: 40px !important;
}

.ml45 {
    margin-left: 45px !important;
}

.ml50 {
    margin-left: 50px !important;
}

.ml60 {
    margin-left: 60px !important;
}

.mr0 {
    margin-right: 0px !important;
}

.mr5 {
    margin-right: 5px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mr15 {
    margin-right: 15px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mr25 {
    margin-right: 25px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.mr35 {
    margin-right: 35px !important;
}

.mr40 {
    margin-right: 40px !important;
}

.mr45 {
    margin-right: 45px !important;
}

.mr50 {
    margin-right: 50px !important;
}

.mr60 {
    margin-right: 60px !important;
}

.pd0 {
    padding: 0px !important;
}

.pd5 {
    padding: 5px !important;
}

.pd10 {
    padding: 10px !important;
}

.pd15 {
    padding: 15px !important;
}

.pd20 {
    padding: 20px !important;
}

.pd25 {
    padding: 25px !important;
}

.pd30 {
    padding: 30px !important;
}

.pd35 {
    padding: 35px !important;
}

.pd40 {
    padding: 40px !important;
}

.pd45 {
    padding: 45px !important;
}

.pd50 {
    padding: 50px !important;
}

.pt0 {
    padding-top: 0 !important;
}

.pt5 {
    padding-top: 5px !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pt15 {
    padding-top: 15px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt25 {
    padding-top: 25px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt35 {
    padding-top: 35px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pt45 {
    padding-top: 45px !important;
}

.pt50 {
    padding-top: 50px !important;
}

.pt55 {
    padding-top: 55px !important;
}

.pt60 {
    padding-top: 60px !important;
}

.pt65 {
    padding-top: 65px !important;
}

.pt70 {
    padding-top: 70px !important;
}

.pt75 {
    padding-top: 75px !important;
}

.pt80 {
    padding-top: 80px !important;
}

.pt85 {
    padding-top: 85px !important;
}

.pt90 {
    padding-top: 90px !important;
}

.pt95 {
    padding-top: 95px !important;
}

.pt100 {
    padding-top: 100px !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.pb5 {
    padding-bottom: 5px !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pb15 {
    padding-bottom: 15px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb25 {
    padding-bottom: 25px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb35 {
    padding-bottom: 35px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pb45 {
    padding-bottom: 45px !important;
}

.pb50 {
    padding-bottom: 50px !important;
}

.pb55 {
    padding-bottom: 55px !important;
}

.pb60 {
    padding-bottom: 60px !important;
}

.pb65 {
    padding-bottom: 65px !important;
}

.pb70 {
    padding-bottom: 70px !important;
}

.pb75 {
    padding-bottom: 75px !important;
}

.pb80 {
    padding-bottom: 80px !important;
}

.pb85 {
    padding-bottom: 85px !important;
}

.pb90 {
    padding-bottom: 90px !important;
}

.pb95 {
    padding-bottom: 95px !important;
}

.pb100 {
    padding-bottom: 100px !important;
}

.pl0 {
    padding-left: 0 !important;
}

.pl5 {
    padding-left: 5px !important;
}

.pl10 {
    padding-left: 10px !important;
}

.pl15 {
    padding-left: 15px !important;
}

.pl20 {
    padding-left: 20px !important;
}

.pl25 {
    padding-left: 25px !important;
}

.pl30 {
    padding-left: 30px !important;
}

.pl35 {
    padding-left: 35px !important;
}

.pl40 {
    padding-left: 40px !important;
}

.pl45 {
    padding-left: 45px !important;
}

.pl50 {
    padding-left: 50px !important;
}

.pl55 {
    padding-left: 55px !important;
}

.pl60 {
    padding-left: 60px !important;
}

.pl65 {
    padding-left: 65px !important;
}

.pl70 {
    padding-left: 70px !important;
}

.pl75 {
    padding-left: 75px !important;
}

.pl80 {
    padding-left: 80px !important;
}

.pl85 {
    padding-left: 85px !important;
}

.pl90 {
    padding-left: 90px !important;
}

.pl95 {
    padding-left: 95px !important;
}

.pl100 {
    padding-left: 100px !important;
}

.pr0 {
    padding-right: 0 !important;
}

.pr5 {
    padding-right: 5px !important;
}

.pr10 {
    padding-right: 10px !important;
}

.pr15 {
    padding-right: 15px !important;
}

.pr20 {
    padding-right: 20px !important;
}

.pr25 {
    padding-right: 25px !important;
}

.pr30 {
    padding-right: 30px !important;
}

.pr35 {
    padding-right: 35px !important;
}

.pr40 {
    padding-right: 40px !important;
}

.pr45 {
    padding-right: 45px !important;
}

.pr50 {
    padding-right: 50px !important;
}

.pr55 {
    padding-right: 55px !important;
}

.pr60 {
    padding-right: 60px !important;
}

.pr65 {
    padding-right: 65px !important;
}

.pr70 {
    padding-right: 70px !important;
}

.pr75 {
    padding-right: 75px !important;
}

.pr80 {
    padding-right: 80px !important;
}

.pr85 {
    padding-right: 85px !important;
}

.pr90 {
    padding-right: 90px !important;
}

.pr95 {
    padding-right: 95px !important;
}

.pr100 {
    padding-right: 100px !important;
}

/* media query */
@media (min-width:1025px) {
    html {
        font-size: 16px;
    }

    ;
}

@media (max-width:1024px) {
    html {
        font-size: 15px;
    }

    ;
}

@media (max-width:768px) {
    html {
        font-size: 15px;
    }

    ;
}

@media (max-width:420px) {
    html {
        font-size: 15px;
    }

    ;
}

/* Modern Layout Utilities (Added for Design System) */
.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.d-grid {
    display: grid !important;
}

.d-block {
    display: block !important;
}

.d-none {
    display: none !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.justify-center {
    justify-content: center !important;
}

.align-center {
    align-items: center !important;
}

.text-center {
    text-align: center !important;
}

.flex-1 {
    flex: 1 1 0% !important;
}

.flex-auto {
    flex: 0 0 auto !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.gap-10 {
    gap: 10px !important;
}

.gap-15 {
    gap: 15px !important;
}

.gap-20 {
    gap: 20px !important;
}

.gap-30 {
    gap: 30px !important;
}

.gap-40 {
    gap: 40px !important;
}

.gap-50 {
    gap: 50px !important;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.radius-4 {
    border-radius: 4px !important;
}

.radius-8 {
    border-radius: 8px !important;
}

.radius-10 {
    border-radius: 10px !important;
}

.radius-20 {
    border-radius: 20px !important;
}

.radius-30 {
    border-radius: 30px !important;
}

.radius-50 {
    border-radius: 50% !important;
}

.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow-hover {
    transition: 0.3s;
}

.shadow-hover:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-5px);
}

.overflow-hidden {
    overflow: hidden !important;
}

.object-cover {
    object-fit: cover !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 900 !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-15 {
    font-size: 15px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-24 {
    font-size: 24px !important;
}

.font-28 {
    font-size: 28px !important;
}

.font-32 {
    font-size: 32px !important;
}

.font-40 {
    font-size: 40px !important;
}

.font-60 {
    font-size: 60px !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.text-white-80 {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ==========================================================================
   SHOP PAGE OVERRIDES & ENHANCEMENTS (Phase 11)
   ========================================================================== */

/* --- Cart Page Buttons (btn_cart_del) --- */
#sod_bsk .btn_cart_del {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
    padding: 15px 0;
    border-top: 1px solid #eee;
}

#sod_bsk .btn_cart_del button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#sod_bsk .btn_cart_del button:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* Cart / Order Page Action Buttons */
#sod_bsk_act {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 30px 0;
    margin-top: 20px;
    border-top: 2px solid #333;
}

#sod_bsk_act .btn01,
#sod_bsk_act a.btn01 {
    display: inline-block;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: 2px solid #333;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s;
}

#sod_bsk_act .btn01:hover {
    background: #f5f5f5;
}

#sod_bsk_act .btn_submit {
    display: inline-block;
    padding: 15px 50px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #00baa4;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

#sod_bsk_act .btn_submit:hover {
    background: #009688;
}

/* --- Cart / Order Total Section (#sod_bsk_tot) --- */
#sod_bsk_tot {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin: 25px 0;
}

#sod_bsk_tot ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    flex-wrap: wrap;
}

#sod_bsk_tot ul li {
    font-size: 15px;
    color: #555;
}

#sod_bsk_tot ul li strong {
    color: #333;
    font-weight: 700;
}

#sod_bsk_tot ul li.sod_bsk_cnt {
    font-size: 18px;
}

#sod_bsk_tot ul li.sod_bsk_cnt strong {
    color: #e91e63;
    font-size: 24px;
}

/* --- Table Layout Improvements --- */
#sod_bsk .tbl_head03 table,
#sod_frm .tbl_head03 table {
    width: 100%;
    border-collapse: collapse;
}

#sod_bsk .tbl_head03 thead th {
    background: #f5f5f5;
    padding: 15px 10px;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #333;
}

#sod_bsk .tbl_head03 tbody td {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    text-align: center;
    vertical-align: middle;
}

#sod_bsk .tbl_head03 tbody td.td_prd {
    text-align: left;
}

#sod_bsk .tbl_head03 tbody td .sod_img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}

#sod_bsk .tbl_head03 tbody td .sod_name {
    display: inline-block;
    vertical-align: middle;
}

#sod_bsk .tbl_head03 tbody td .sod_name .prd_name {
    font-weight: 600;
    color: #333;
}

/* --- Empty Table State --- */
#sod_bsk .empty_table,
#sod_frm .empty_table {
    padding: 60px 20px !important;
    text-align: center;
    color: #888;
    font-size: 16px;
}

/* --- Order Form Page Styles (#sod_frm) --- */
#sod_frm {
    padding-top: 30px;
}

#sod_frm h2 {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#sod_frm .tbl_frm01 th {
    background: none;
    text-align: left;
    padding: 15px 10px;
    font-weight: 600;
    color: #333;
    width: 130px;
    vertical-align: top;
}

#sod_frm .tbl_frm01 td {
    padding: 12px 10px;
}

#sod_frm .frm_input {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 15px;
    transition: border-color 0.2s;
}

#sod_frm .frm_input:focus {
    border-color: #333;
}

/* Order Form: Payment Buttons */
.pay_method_item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

.pay_method_item input[type="radio"] {
    display: none;
}

.pay_method_item .pay_label,
.pay_method_item label.lb_icon {
    display: inline-block;
    padding: 12px 25px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    color: #555;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.pay_method_item input[type="radio"]:checked+.pay_label,
.pay_method_item input[type="radio"]:checked+label.lb_icon {
    border-color: #333;
    background: #333;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Product No Content */
.nocontent {
    padding: 80px 20px;
    text-align: center;
    font-size: 18px;
    color: #888;
    background: #f9f9f9;
    border-radius: 8px;
}

/* Product List Grid */
.product-grid-custom {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .product-grid-custom {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .product-grid-custom {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #sod_bsk_act {
        flex-direction: column;
        gap: 10px;
    }

    #sod_bsk_tot ul {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .product-grid-custom {
        grid-template-columns: 1fr !important;
    }
}

/* Product Card Hover */
.product_card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.product_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.product_card .prod_img {
    position: relative;
    overflow: hidden;
}

.product_card .prod_img img {
    width: 100%;
    height: auto;
    transition: transform 0.4s;
}

.product_card:hover .prod_img img {
    transform: scale(1.05);
}

.product_card .prod_txt {
    padding: 15px;
}

.product_card .prod_name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product_card .prod_price .price_val.highlight {
    color: #e91e63;
    font-weight: 700;
    font-size: 18px;
}

/* media query */
@media (min-width:1025px) {
    html {
        font-size: 16px;
    }

    ;
}

@media (max-width:1024px) {
    html {
        font-size: 15px;
    }

    ;
}

@media (max-width:768px) {
    html {
        font-size: 14px;
    }

    ;
}

@media (max-width:420px) {
    html {
        font-size: 14px;
    }

    ;
}