/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

a {
  color: #0077cc;
  cursor:pointer;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

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

.border {
  border: 1px solid #e5e5e5;
}
.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

html {
  position: relative;
  min-height: 100%;
}

html, body {
  padding:0; margin:0;
  width:100%; height:100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}



/* layout */
/* sidebar의 크기를 180px로 하였음 
   --> 고치는 부분은 : 1) .layout.has-sidebar .layout-side  
                       2) .e-contextmenu-container.e-menu-container.e-menu-popup
*/
section {
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
.layout {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
}
.has-sidebar {
    flex-direction: row;
    display: flex;
    flex: 1;
}

.layout-footer.is-fixed, 
.layout-header.is-fixed, 
.layout-side.is-fixed-header {
    z-index: 24;
}
.layout.has-sidebar .layout-side {
	width:180px;
    min-height: calc(100vh);
}
.layout.has-sidebar .layout-side.is-fixed-header {
    top: 0;
    height: calc(100vh);
}
.layout-side.is-fixed-header.is-fixed-footer {
    height: calc(100vh - 90px);
	z-index: 26;
}

/* layout side */
.layout-banner {
    display: flex;
    align-items: center;
    padding: 0 .625rem;
    background-color: #000;
    height: 50px;
    font-size: 1.5rem;
}
.layout-banner .layout-logo {
    width: 44px;
    border-radius: var(--bs-border-radius);
}
.layout-title {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    flex: 1 1 auto;
    opacity: 1;
    transition: opacity .3s linear;
	color: #e9ecef;
	padding:0 8px;
}
.layout-user .layout-title {
    color: #3f4254;
}
.layout-banner span {
    padding-left: 1rem;
}
.layout-side .layout-user {
    border-bottom: 1px solid #ddd;
	margin: 0 2px;
    padding: 9px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.layout-side .layout-user .layout-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.layout-user-state {
    width: 8px;
    height: 8px;
    background-color: #28a745;
    border-radius: 50%;
    margin-left: 1rem;
}
.layout-menu {
    height: calc(100vh - 115px);
}


/* layout main */
.layout-right {
    display: flex;
    flex-flow: column;
    flex: 1;
	width: calc(100% - 214px);
}
.scroll {
    height: 100%;
    scrollbar-color: rgba(0,0,0,.3) rgba(0,0,0,0);
    scrollbar-width: thin;
    overflow: hidden;
}

/* header */
header {
    background-color: #4a3275;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 10%);
    font-size: 1rem;
    transition: transform .3s ease;
}
.layout-header {
    background-color: #333;
    height: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}
.layout-header {
    z-index: 35;
    position: sticky;
}
.layout-header.is-fixed {
    top: 0;
}
.layout-footer.is-fixed, .layout-header.is-fixed, .layout-side.is-fixed-header {
    z-index: 25;
}
.layout-header-bar {
    padding: 4px 12px;
    color: #fff;
    background-color: #1ab394;
    border-color: #1ab394;
    border-radius: var(--bs-border-radius);
}

.is-mobile {
    display:none;
}

@media (max-width: 767px) {
  /*
  .layout.has-sidebar .layout-side {
    width : 44px;
    overflow: hidden;
  }
  .layout-right {
    width : calc(100% - 44px);
  }
  */
  .layout.has-sidebar .layout-side {
    display:none;
  }
  .layout-right {
    width : 100%;
  }
  .layout-banner {
	  width: 180px;
	  background-color:#333;
  }
  .layout-title {
	  height: 34px;
  }
  .is-mobile {
    display:block;
  }
}


/* main */
#app {
	width: 100%;
	height: 100%;
}

.layout-main {
	padding: 1rem;
	position: relative;
	background-color:#eee;
	height: calc(100vh - 90px);
	border-left: 2px solid #eee;
	border-bottom: 2px solid #eee;
	overflow: auto;
	flex: 1;
}
.layout-main-content {
	background-color:#fff;
	padding:10px;
	display: inline-block;
	width: max-content;
}

/* footer */
.layout-footer {
    height: 40px;
    color: #fff;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}
.layout-footer.is-fixed {
    position: sticky;
    bottom: 0;
}
.has-sidebar .layout-side.is-fixed-header, .layout-footer.is-fixed {
    z-index: 20;
}
.layout-footer.is-fixed, .layout-header.is-fixed, .layout-side.is-fixed-header {
    z-index: 25;
}

/* grid */
.sf-grid.e-grid .e-gridcontent td.e-active { 
    background-color: #367FA9; 
    color : #fff;
}


/* margin */
.ma0 { margin:0; }
.ma1 { margin:4px; }
.ma2 { margin:8px; }
.ma3 { margin:15px; }
.mx0 { margin-left:0; margin-right:0; }
.mx1 { margin-left:4px; margin-right:4px; }
.mx2 { margin-left:8px; margin-right:8px; }
.mx3 { margin-left:15px; margin-right:15px; }
.my0 { margin-top:0; margin-bottom:0; }
.my1 { margin-top:4px; margin-bottom:4px; }
.my2 { margin-top:8px; margin-bottom:8px; }
.my3 { margin-top:15px; margin-bottom:15px; }
.ml0 { margin-left:0; }
.ml1 { margin-left:4px; }
.ml2 { margin-left:8px; }
.ml3 { margin-left:15px; }
.mr0 { margin-right:0; }
.mr1 { margin-right:4px; }
.mr2 { margin-right:8px; }
.mr3 { margin-right:15px; }
.mt0 { margin-top:0; }
.mt1 { margin-top:4px; }
.mt2 { margin-top:8px; }
.mt3 { margin-top:15px; }
.mb0 { margin-bottom:0; }
.mb1 { margin-bottom:4px; }
.mb2 { margin-bottom:8px; }
.mb3 { margin-bottom:15px; }

.mx-1 { margin-left:-4px; margin-right:-4px; }
.mx-2 { margin-left:-8px; margin-right:-8px; }
.mx-3 { margin-left:-15px; margin-right:-15px; }
.my-1 { margin-top:-4px; margin-bottom:-4px; }
.my-2 { margin-top:-8px; margin-bottom:-8px; }
.my-3 { margin-top:-15px; margin-bottom:-15px; }
.ml-1 { margin-left:-4px; }
.ml-2 { margin-left:-8px; }
.ml-3 { margin-left:-15px; }
.mr-1 { margin-right:-4px; }
.mr-2 { margin-right:-8px; }
.mr-3 { margin-right:-15px; }
.mt-1 { margin-top:-4px; }
.mt-2 { margin-top:-8px; }
.mt-3 { margin-top:-15px; }
.mb-1 { margin-bottom:-4px; }
.mb-2 { margin-bottom:-8px; }
.mb-3 { margin-bottom:-15px; }

/* padding */
.pa0 { padding:0; }
.pa1 { padding:4px; }
.pa2 { padding:8px; }
.pa3 { padding:15px; }
.px0 { padding-left:0; padding-right:0; }
.px1 { padding-left:4px; padding-right:4px; }
.px2 { padding-left:8px; padding-right:8px; }
.px3 { padding-left:15px; padding-right:15px; }
.py0 { padding-top:0; padding-bottom:0; }
.py1 { padding-top:4px; padding-bottom:4px; }
.py2 { padding-top:8px; padding-bottom:8px; }
.py3 { padding-top:15px; padding-bottom:15px; }
.pl0 { padding-left:0; }
.pl1 { padding-left:4px; }
.pl2 { padding-left:8px; }
.pl3 { padding-left:15px; }
.pr0 { padding-right:0; }
.pr1 { padding-right:4px; }
.pr2 { padding-right:8px; }
.pr3 { padding-right:15px; }
.pt0 { padding-top:0; }
.pt1 { padding-top:4px; }
.pt2 { padding-top:8px; }
.pt3 { padding-top:15px; }
.pb0 { padding-bottom:0; }
.pb1 { padding-bottom:4px; }
.pb2 { padding-bottom:8px; }
.pb3 { padding-bottom:15px; }

/* width */
.w20px { width:20px; }
.w40px { width:40px; }
.w60px { width:60px; }
.w80px { width:80px; }
.w100px { width:100px; }
.w120px { width:120px; }
.w140px { width:140px; }
.w160px { width:160px; }
.w180px { width:180px; }
.w200px { width:200px; }

.w10p { width:10%; }
.w20p { width:20%; }
.w25p { width:25%; }
.w30p { width:30%; }
.w33p { width:33.33%; }
.w40p { width:40%; }
.w50p { width:50%; }
.w60p { width:60%; }
.w70p { width:70%; }
.w80p { width:80%; }
.w90p { width:90%; }
.w100p { width:100%; }
.h100p { height:100%; }

/* display */
.d-block { display:block; }
.d-inline-block { display:inline-block; }
.d-flex { display:flex; }
.d-table { display:table; }
.d-row { display:table-row; }
.d-col { display:table-cell; }

/* position */
.p-relative { position:relative; }
.p-absolute { position:absolute; }
.p-sticky { position:sticky; z-index:1; }
.p-left { left:0; }
.p-right { right:0; }
.p-top { top:0; }
.p-bottom { bottom:0; }

/* float */
.f-left { float:left; }
.f-right { float:right; }

/* vertical-align */
.v-top { vertical-align:top; }
.v-middle { vertical-align:middle; }
.v-bottom { vertical-align:bottom; }

/* text-align */
.t-left { text-align:left; }
.t-right { text-align:right; }
.t-center { text-align:center; }

/* font */
.ft10 { font-size:10px; }
.ft12 { font-size:12px; }
.ft14 { font-size:14px; }
.ft16 { font-size:16px; }
.ft18 { font-size:18px; }
.ft20 { font-size:20px; }

/* clearfix */
.clearfix::after {
	content: " ";
	display: table;
	clear: both;
}

/* modal 
small크기 = 300
middle크기 = 600
large크기 = 900
*/


/* form */
.label-control {
	padding-top : 21px;
}

/* image */
.thumb-image {
	position:relative;
	border: 1px solid #ddd;
}
.thumb-image img {
	position:absolute;
	left:50%;
	top:50%;
	transform : translateX(-50%);
	transform : translateY(-50%);
	max-width: 100%;
	max-height: 100%;
}

/* table */
.e-rte-table td {
	vertical-align: top;
}

/* code */
problem pre,
.e-richtexteditor .e-rte-content .e-content pre {
	background-color: #eee;
    border: 1px solid #999;
    display: block;
    padding: 20px;
}