html { font-size:16px; }

/*
1.25rem     20px
1.2rem      19.2px
1.125rem    18px

1rem        16px

0.95rem     15.2px

0.9rem      14.4px  -> main

0.875rem    14px
0.85rem     13.6px
0.8rem      12.8px
0.75rem     12px

0.5rem      8px
0.25rem     4px
*/

/*
<576px      col-        auto
>= 576      col-sm-     540px
>= 768      col-md-     720px
>= 992      col-lg-     960px
>= 1200     col-xl-     1140px
*/

/*
@media (min-width: 992px)   // 화면의 최소 너비를 기준으로 적용, 즉, 화면이 992px 이상일 때 스타일 적용, 화면이 더 넓어질 때, 큰   화면에 맞는 스타일 적용, 주로 모바일 우선
@media (max-width: 992px)   // 화면의 최대 너비를 기준으로 적용, 즉, 화면이 992px 이하일 때 스타일 적용, 화면이 더 좁아질 때, 작은 화면에 맞는 스타일 적용, 주로 데스크탑 우선

<div class="offset-4 order-1">
    offset : 열을 오를쪽으로 밀기
    order : 열의 순서 변경    
    
맥북 해상도: 1280*800, 1440*990, 1680*1050
모바일,탭 해상도:
    갤럭시 S8      : 360*740
    갤럭시 S20     : 412*915
    갤럭시탭 S4    : 712*1338
    
    이이폰14 프로  : 430*932  
    아이패드 미니  : 768*1024
    아이패드 에어  : 820*1180
    아이패드 프로  : 1024*1366
    
    서피스 프로 7  : 912*1368
    
*/

@media (min-width: 1440px)  { /* col-xxl    1440px 이상 일 경우 */
}
@media (min-width: 1200px) 	{ /* col-xl     1200px 이상 일 경우 */
}
@media (min-width: 992px) 	{ /* col-lg      992px 이상 일 경우 */
}
@media (min-width: 768px) 	{ /* col-md      768px 이상 일 경우 */
}
@media (min-width: 576px) 	{ /* col-sm      576px 이상 일 경우 */
}
                              /* col-       모든 화면 크기에서 적용 */

/* redefine element */
* { margin:0; padding:0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; outline:none; -webkit-font-smoothing: antialiased; }
a, a:hover, a:active, a:focus { color:inherit; text-decoration:none; }
li { list-style:none; }

body, button, input, optgroup, select, textarea, label, table {
	font-size: 0.9rem;
	font-weight: 400;
	color: #212529;
	line-height: 1.5;
	font-family: "Noto Sans KR", "Roboto", "sans-serif";
}

@media (max-width: 991px) 	{ 
	body, button, input, optgroup, select, textarea, label, table {
		font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Noto Sans KR", "sans-serif";
	}
}

.form-control   { font-size:0.9rem; }
.btn            { font-size:0.9rem; }

:root {
    --sidebar-width: 14rem;
    --navbar-height: 3.5rem;
}

/*******************************************************************************************************************************************************/
.wrapper                            { position:relative; top:0; /*height:100vh;*/ }

.main-container                     { position:relative; float:right; width:calc(100% - var(--sidebar-width)); }
.main-container .navbar             { position:fixed; top:0; z-index:105; 
                                      height:var(--navbar-height); width:calc(100% - var(--sidebar-width));  
                                      background:rgb(149,212,230); padding-left:2rem; border-bottom:1px solid #dae1e6; }
.main-container.full-mode           { float:none; width:100%; }
.main-container.full-mode .navbar   { width:100%; }
    
    .navbar > .title            { font-size:1.25rem; flex-grow:1; font-weight:500; }
    .navbar > .title.title-added      { display:flex; justify-content:space-between; align-items:center; }
        .history-back           { display:none; }   
        .navbar-toggler         { display:none; }
        .navbar-closer          { display:none; }
    .content                    { margin-top:var(--navbar-height); padding:2rem; /*min-height:100vh; background:#ecf0f580;*/ }
    .content-body               { width:100%; }
.body-disable-layer             { z-index:2; width:0; height:0; display:none; }

.sidebar                        { z-index:105; position:fixed; top:0; bottom:0;left:0; width:var(--sidebar-width); height:100%; display:block; background:#fcfcfc; }
.sidebar > .header              { display:flex; align-items:center; justify-content:space-between; padding:1rem; height:var(--navbar-height); }
.sidebar > .account             { padding:0.5rem 1rem; height:8rem; font-size:0.85rem; background:rgba(39,53,63); }
.sidebar > .account > div       { line-height:1.8; }
.sidebar > .menus               { font-size:0.9rem; padding-left:1rem; padding-top:0.5rem; padding-bottom:2rem; 
                                  height:calc(100vh - var(--navbar-height) - 9rem); overflow:auto; 
                                  /*box-shadow:inset 0 0 0.5rem rgba(0,0,0,.30);*/ }
.sidebar > .menus > div         { line-height:1.4rem; }
.sidebar > .menus > div.divide  { margin-top:0.25rem; color:#555; margin-left:-0.5rem; }
.sidebar > .menus > div > a > i { margin-right:0.25rem; font-size:1.1rem; }


@media (max-width: 1199px)  { 
.main-container                 { position:relative; float:right; width:100%;}
.main-container .navbar         { height:var(--navbar-height); background:rgb(149,212,230); position:fixed; left:0; right:0; top:0; padding-left:1rem; width:100vw; }

    .navbar > .title            { text-align:center; }
    .navbar > .title.title-added      { display:block; }
    .navbar > .title > .added-area   { display:none; }
    .navbar.sub-page > .history-back        { display:block; }  
        .navbar-toggler     { display:block; }
        .navbar-closer      { display:block; }
    .content                { padding:1rem; margin-top:var(--navbar-height); }
.body-disable-layer         { position:absolute; width:100%; height:100%; top:0; bottom:0; background:rgba(0,0,0,.35); display:none; }

.sidebar                    { position:fixed; top:0; bottom:0; left:auto; right:0; width:var(--sidebar-width); height:100%; 
                              transform:translateX(var(--sidebar-width)); transition:all .33s cubic-bezier(.685,.0473,.346,1); box-shadow:none; }
.sidebar.opened             { position:fixed; top:0; bottom:0; left:calc(100vw - var(--sidebar-width)); right:auto; width:var(--sidebar-width); height:100%; 
                              transform:translateX(var(--sidebar-width)); transition:all .33s cubic-bezier(.685,.0473,.346,1); box-shadow:none; }
.nav-open .sidebar          { transform:translateX(0px); box-shadow:0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2); }
}


@media (max-width: 575px) 	{ 
	.items > div[class*="col"]	{ padding-left:0.5rem; padding-right:0.5rem; }
}

.this-text-primary		{ color:#212529; }
.this-text-secondary 	{ color:#6c757d; }
.this-text-sm			{ font-size:14px; }
.this-text-sm-secondary { color:#6c757d; font-size:0.85rem; }

.this-border-box		{ border:1px solid #dae1e6; }
.this-border-bottom		{ border-bottom:1px solid #dae1e6; }
.this-border-top		{ border-top:1px solid #dae1e6; }

.icon-inline > * 		{ vertical-align:middle; }

/* pagination */
.pagination-wrap	{ text-align:center; padding:2rem 0px; }

.pagination {
  display: inline-block;
}

.pagination a {
  color: #6c757d;
  float: left;
  padding: 0.5rem;
  text-decoration: none;
  border: 1px solid #dae1e6;
  border-right: 0px;
}

.pagination a.active {
  background-color: #32a4a8;
  color: white;
  border: 1px solid #32a4a8;
}

.pagination a:hover:not(.active) {background-color: #dae1e6;}

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: 1px solid #dae1e6;
}

/*******************************************************************************************************************************************************/
/* common style */
.nick-img-wrap	{ width:56px; height:56px; border:1px solid #dae1e6; border-radius:50%; background:#f7f9fa; }


img									{ width:100%; max-width:100%; max-height:100%; }

.bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second {
	font-size:14px; font-family:"Roboto", "Noto Sans KR", "sans-serif";
}
.bootstrap-datetimepicker-widget table th		{ border:0px; font-size:14px; font-family:"Roboto", "Noto Sans KR", "sans-serif"; }
.bootstrap-datetimepicker-widget table td		{ border:0px; font-size:14px; font-family:"Roboto", "Noto Sans KR", "sans-serif"; }
.bootstrap-datetimepicker-widget table td.cw	{ font-size:14px; font-family:"Roboto", "Noto Sans KR", "sans-serif"; }

/*******************************************************************************************************************************************************/

.card                           { margin:0 0 2rem 0; 
                                  /* box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important; */ 
                                  box-shadow:0 0.1px 0.25rem rgba(0,0,0,.10)!important
                                }
    .card-header                { font-weight:500;  }
    .card-header:first-child    { border-top-left-radius:0.5rem; border-top-right-radius:0.5rem; }
    .card-body                  { padding:1.25rem; border-bottom-left-radius:0.5rem; border-bottom-right-radius:0.5rem; }

.content.default .card > div        { padding:2rem; }

@media (max-width: 575px)   { 
	.card                          { margin:0 0 1rem 0; }
	    .card-body                 { padding:1rem; }
	    
	.content.default .card > div   { padding:1rem; }
}

.card.one-item                      { border-top:4px solid #17a2b8; }

table.list                          { width:100%; font-size:0.9rem; }
table.list thead                    { background:#e6f0f7; }
table.list th                       { padding:0.6rem 0.5rem; border:1px solid #dae1e6; font-weight:500; text-align:center; }
table.list td                       { padding:0.6rem 0.5rem; border:1px solid #dae1e6; }
table.list th.left                  { text-align:left; }
table.list td.left                  { text-align:left; }
table.list th.right                 { text-align:right; }
table.list td.right                 { text-align:right; }
table.list th.center                { text-align:center; }
table.list td.center                { text-align:center; }
table.list tr:nth-child(even)       { background:#f7f9fa; }
table.list tbody tr:nth-child(odd)  { background:#ffffff; }
table.list th.price                 { text-align:right; }
table.list td.price                 { text-align:right; }

table.list.one tr:first-child       { border-top:1px solid #dae1e6;}
table.list.one td                   { border:none; border-bottom:1px solid #dae1e6;}

div.user_button {
    font-size: 0.85rem;
    border : 1px solid lightgray;
    border-radius: 0.25rem;
    padding:0.25rem 0.5rem;
    margin-right:0.5rem; 
    cursor: pointer;
}

/*******************************************************************************************************************************************************/
/* 풀 모드에서 메뉴 영역 */

.added-area > div   { display:flex; align-items:center; font-size:0.9rem; font-weight:400; margin-right:1rem; color:#41419b; }

.shortcut-area {
    margin-bottom:0; 
    padding:0 1rem; 
    cursor:pointer;
}
.shortcut-menus {
    display:none;
    font-size: 0.9rem;
    background: #fafafa;
    padding: 0.5rem 0;
    border: 1px solid darkgray;
    line-height: 1.8;
    font-weight: 400;
    position: absolute;
    right: 1rem;
}
.shortcut-menu {
    padding:0 1rem;
    line-height:2.2;
    color: #41419b;
}
.shortcut-menu.divide {
    border-top:1px solid lightgray;
}

/*******************************************************************************************************************************************************/
/* 라운딩 현황 */

.rounding .announce-area                         { display:flex; padding-bottom:1rem; margin-top:-1.5rem; }
@media (max-width: 575px) {
    .rounding .announce-area                     { padding-bottom:1rem; margin-top:0rem; }   
}

.rounding .announce-area .announce-label    { white-space:nowrap; padding-right:0.25rem; }
.rounding .announce > div > span            { margin-right:2rem; }

.rounding .announce.scroll-container        { overflow:hidden; white-space:nowrap; }
.rounding .announce > div.scroll-content    { display:inline-block; white-space:nowrap; will-change:transform; visibility:hidden; }

@keyframes scroll-normal {
    from { margin-left:100%; }
    to { transform: translateX(-100%); }
} 

@keyframes scroll-alternate {
    from { margin-left: 5%; }
    to { transform: translate(-105%); margin-left: 100%;}
} 

.rounding .top-area                   { margin-bottom:1rem; }
.rounding .top-area .announce-title   { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.rounding .top-area .card.one-item    { margin:0; padding:1rem; border-top:4px solid #6c757d; }
.rounding .top-area .left             { align-self:end; }
@media (max-width: 575px) { 
    .rounding .top-area               { flex-direction:column-reverse; }
    .rounding .top-area .right        { margin-bottom:1rem; }
}

.rounding .tab-type                 { display:flex; border-bottom:1px solid #17a2b8; font-size:1rem; }
.rounding .tab-type > div           { cursor:pointer; width:8rem; text-align:center; padding-top:0.4rem; padding-bottom:0.3rem; color:#6c757d; }
.rounding .tab-type > div.active    { color:white; background:#ff5815; border-top-left-radius:0.4rem; border-top-right-radius:0.4rem; }

.game-status					    { width:70px; height:70px; line-height:64px; border-radius:50%; font-size:1.2rem; font-weight:600; text-align:center; }
.game-status.off				    { border:3px solid rgba(200,200,200, 1);  background:rgba(230,230,230, 1); }
.game-status.wait				    { border:3px solid rgba(220,220,0, 1); }
.game-status.practice			    { border:3px solid rgba(0,255,0, 1); }
.game-status.game				    { border:3px solid rgba(255,0,0, 1); }
.game-status.end				    { border:3px solid rgba(0,0,255, 1); }

.academy-status                    { width:70px; height:70px; line-height:64px; border-radius:50%; font-size:1.2rem; font-weight:600; text-align:center; }
.academy-status.off                { border:3px solid rgba(200,200,200, 1);  background:rgba(230,230,230, 1); }
.academy-status.wait               { border:3px solid rgba(220,220,0, 1); }
.academy-status.ready              { border:3px solid rgba(132,149,239, 1); }
.academy-status.practice           { border:3px solid rgba(0,255,0, 1); }
.academy-status.end                { border:3px solid rgba(0,0,255, 1); }

.rounding .card.room                { border: none;}

.rounding .card-header              { display:flex; align-items:center; justify-content:space-between; }
.rounding .card-header > .room-name { font-size:1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rounding .card-header > .room-no   { white-space: nowrap; }

.rounding .card-body                { padding:0; border:1px solid #007bff7a; }
.rounding .card-body > div          { padding:1rem; border-bottom:1px solid #dae1e6; }
.rounding .card-body > div.message  { padding:1rem; border-bottom:none; }
.rounding .card-body table.list.menu     { font-size:0.85rem; }
.rounding .card-body table.list.menu th  { padding:0.4rem 0.2rem; font-weight:400; }
.rounding .card-body table.list.menu td  { padding:0.4rem 0.2rem; }

.rounding .rounding-list                                      { padding:1.5rem; }
.rounding .rounding-list > table                              { width:100%; background:white; font-size:0.9rem; }
.rounding .rounding-list > table thead                        { background:#17a2b8; color:white; }
.rounding .rounding-list > table th                           { text-align:center; border-bottom:1px solid #dae1e6; padding:0.5rem; font-weight:400; font-size:0.85rem; }
.rounding .rounding-list > table td                           { text-align:center; border-bottom:1px solid #dae1e6; padding:0.5rem; font-weight:400; }
.rounding .rounding-list > table tr:nth-child(even)           { background:#f7f9fa; }

.rounding .rounding-list > table th.room_name                 { width:180px; white-space:nowrap; }
.rounding .rounding-list > table th.room_status               { width:60px; white-space:nowrap; }
.rounding .rounding-list > table th.player_count              { width:60px; white-space:nowrap; }
.rounding .rounding-list > table th.mode                      { width:300px; white-space:nowrap; }
.rounding .rounding-list > table th.progress_hole             { width:80px; white-space:nowrap; }
.rounding .rounding-list > table th.will_date                 { width:170px;  white-space:nowrap; }
.rounding .rounding-list > table th.sale                      { width:100px; white-space:nowrap; }
.rounding .rounding-list > table th.payment                   { width:100px; white-space:nowrap; }

.rounding .rounding-list > table td.room_name                 { white-space:nowrap; }
.rounding .rounding-list > table td.room_name div.room-name   { white-space:nowrap; max-width:164px; overflow:hidden; text-overflow: ellipsis; }
.rounding .rounding-list > table td.room_status               { white-space:nowrap; }
.rounding .rounding-list > table td.player_count              { white-space:nowrap; }
.rounding .rounding-list > table td.mode                      { white-space:nowrap; font-size:0.8rem; }
.rounding .rounding-list > table td.mode > div                { max-width:300px; overflow:hidden; text-overflow:ellipsis; }
.rounding .rounding-list > table td.progress_hole             { white-space:nowrap; }
.rounding .rounding-list > table td.will_date                 { white-space:nowrap; }
.rounding .rounding-list > table td.sale                      { white-space:nowrap; }
.rounding .rounding-list > table td.payment                   { white-space:nowrap; }

.rounding .rounding-list > table td.settings > div > div      { white-space:nowrap; margin:0rem 0.2rem; }
.rounding .rounding-list > table td.settings > div > div:first-child  { margin-left:0.5rem; }

/*******************************************************************************************************************************************************/
/* 매장 정보 관리 */
.store .item > div > div		{ line-height:2; }
.store .item .col.fixed			{ flex:0 0 90px; padding-right:0px; color:#6c757d; }
.store .item.photo .title		{ display:flex; justify-content:flex-end; margin-top:8px; margin-bottom:4px; }
.store .item.photo .title i		{ cursor:pointer; }

/*
.marker-wrap	{ display:flex; align-items:center; background:rgba(255,255,255,1.0); padding:2px 12px 2px 0px; border-radius:15px; border:1px solid red; }
.marker-icon	{ font-size:28px; color:blue; }
.marker-text	{ font-size:14px; font-weight:600; }
*/
/*******************************************************************************************************************************************************/
/* 스크린 룸 관리 */
.screen .item					{ }
.screen .item > div				{ padding:16px; }
.screen .item > div > div		{ padding:4px 0; }
.screen .item .col.fixed		{ flex:0 0 40%; padding-right:0px; color:#6c757d; }


@media (max-width: 575px) 	{ 
	.reactive-padding	{ padding: 2rem 1rem; }
}
@media (min-width: 576px) 	{ 
	.reactive-padding	{ padding: 3rem; }
}

/*******************************************************************************************************************************************************/
/* 대회 관리 */
.contest .status.ing			{ color:red; }
.contest .status.will			{ color:blue; }
.contest .status.end			{ color:gray; }

/*******************************************************************************************************************************************************/
/* 예약 관리 */
.reserve .item					{ }
.reserve .item > div			{ padding:16px; }
.reserve .status.reserve		{ color:blue; }
.reserve .status.cancel			{ color:gray; }
.reserve .status.ok			{ color:#212529; }
.reserve .status.break			{ color:red; }

/*******************************************************************************************************************************************************/
/* 회원 관리 */
.member .item					{ }
.member .item > div				{ padding:16px; }

/*******************************************************************************************************************************************************/
/* 매출 내역 */
.sales-hist .item					{ }
.sales-hist .item > div				{ padding:16px; }

/*******************************************************************************************************************************************************/
/* 매출 통계 */
.sales-stats .item					{ }
.sales-stats .item > div				{ padding:16px; }