.nav-side-menu {
  overflow: auto;
  background-color: #2e353d;
  position: fixed;
  top: 65px;
  height: 100%;
  align-items: stretch;
}

#sidebar {
    color: #fff;
    transition: all 0.3s;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #39539E;
}

#sidebar ul li a {
    color: #fff;
    padding: 10px;
    font-size: 1.4em;
    display: block;
}

/* 마우스 올라간 항목 색 */
#sidebar ul li a:hover {
    color: #000;
    background: #fff;
}

/* 선택한 항목 색 */
#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #39539E;
}

#sidebar img {
  filter: invert(100%);
  padding: 0 10px 5px 0;
}

#sidebar ul li a:hover > img {
  filter: invert(0%);
  padding: 0 10px 5px 0;
}

#sidebar ul li.active a:hover > img {
  filter: invert(100%);
  padding: 0 10px 5px 0;
}

body {background-color:#fff;}

h3 {
  font-weight:bold;
  font-size:36px;
  letter-spacing:-1px;
  margin-bottom:0.4rem;
  display:flex;
  justify-content:center;
  align-items:center;
}
h3 > span {font-weight:normal; font-size:30px; padding-left:2px;}
.text-muted > span:nth-of-type(2) {
  width:1px;
  height:10px;
  background-color: #dbdfea;
  display: inline-block;
  margin: 0 10px;
}

.context {
  font-size:34px;
  font-weight:bold;
  line-height:1;
  padding-top:10px;
  word-break:break-all;
}

#userForm {max-height:calc(100vh - 146px); overflow:auto;}
#info-name {font-size:28px;}
h3#info-name > span {font-size:24px;}
.tx {font-size:20px;}
.tx > p {font-size:15px;}
.tx > div {display:flex; align-items:center; justify-content:center;}
.tx > div > a {transition:opacity 0.15s ease !important;}
.tx > div > a:hover {opacity:0.5;}
.tx > div > a + a {margin-left:3px;}
.tx > div > a:last-of-type {
  width:133px;
  height:40px;
  background-color:#c0c4d0;
  border-radius:5px;
  margin-left:4px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tx > div > a:last-of-type > div {text-align:left;}
.tx > div > a:last-of-type > div > span {
  line-height:1;
  display:block;
  font-size:18px;
}
.tx > div > a:last-of-type > div > span:first-of-type {
  font-size:8px;
  padding:2px 0;
}
[class*=conts-] {
  /* margin-bottom:32vh;
  margin-top:8vh; */
  display:none;
}
.swal2-animate-success-icon .swal2-success-line-tip{
    -webkit-animation:swal2-animate-success-line-tip .75s;
    animation:swal2-animate-success-line-tip .75s
}
.swal2-animate-success-icon .swal2-success-line-long{
    -webkit-animation:swal2-animate-success-line-long .75s;
    animation:swal2-animate-success-line-long .75s
}
.swal2-animate-success-icon .swal2-success-circular-line-right{
    -webkit-animation:swal2-rotate-success-circular-line 4.25s ease-in;
    animation:swal2-rotate-success-circular-line 4.25s ease-in
}

.login.login-4 .login-form.userPage {max-width:100%;}

.assigning {
  width : 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  color: #dbdfea;
  animation: animloader 1s linear infinite alternate;
  margin:1.25em auto 1.875em;
}

.conts-assigning .context {
  font-size: 45px;
  line-height: 1.2;
  letter-spacing: -3px;
  padding-top: 15px;
}
.idPw {
  font-size:18px;
  padding-top:12px;
  display:flex;
  justify-content:center;
  font-weight:normal;
  align-items:center;
}
.idPw > div > span:first-of-type {
  font-size:15px;
}
.idPw > div:nth-of-type(2) {
  width:1px;
  height:12px;
  background-color:#3F4254;
  margin:0 14px;
}
.portList {display:flex; justify-content:center;}
.portList ul {list-style:none; text-align:left; padding:0; margin-top:4rem; margin-bottom:7rem;}
.portList ul li [class*=col-] {max-width:370px; padding:15px 24px;}
.portList ul li .type {
  font-size:13px;
  padding-bottom:2px;
  font-weight:normal;
}
.portList ul li .info {
  font-size:20px;
  padding-bottom:8px;
}

.portList ul li .discription {
  font-size:14px;
  line-height:21px;
  letter-spacing:-0.5px;
  font-weight:normal;
}
#info-hold-msg {margin-bottom:100px;}
@keyframes animloader {
  0% { box-shadow: -38px -12px ,  -14px 0,  14px 0, 38px 0 }
  33% { box-shadow: -38px 0px, -14px -12px,  14px 0, 38px 0 }
  66% { box-shadow: -38px 0px , -14px 0, 14px -12px, 38px 0 }
  100% { box-shadow: -38px 0 , -14px 0, 14px 0 , 38px -12px }
}
.modal-body {max-height:calc(100vh - 200px); overflow:auto;}
.modal-footer button {padding:0.4rem 1.25rem;}
.font-weight-bold {font-weight:bold !important;}
.modal .modal-header .modal-title {font-weight:bold; color:#3F4254; font-size:18px;}
.modal .modal-header {padding:1.35rem 1.75rem 1.05rem 1.75rem;}
.text-danger {padding-left:3px;}
.modal-dialog {top:50%; transform:translate(-50%, -50%) !important; left:50%; margin:0;}
.formWrap {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12.5px;
  margin-right: -12.5px;
}
.fv-plugins-message-container, .fv-plugins-message-container .fv-help-block {text-align:left !important;}


/* admin */
body.admin {background-color:#EEF0F8;}
body.admin .header, body.admin .header-mobile {background-color:#fff;}
body.admin .header a {z-index:100;}
body.admin .header a img {max-height:39px; margin-top:10px;}
body.admin .header-mobile a img {max-height:29px; margin-bottom:2px;}
body.admin .content {margin-top:65px;}
body.admin .container {max-width:100%; display:flex; margin:0; padding:0 12.5px;}
body.admin h3 {display:block;}
body.admin .header.header-fixed {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 97;
    box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.08);
}
body.admin .adminUser > span {
  display:block;
  text-align:right;
  line-height:1;
  color:#181C32;
}
body.admin .adminUser > span:first-of-type {
  color:#3F4254;
  font-size: 12px;
  margin-bottom: 2px;
  margin-top: 2px;
}
body.admin .card.card-custom > .card-header .card-title .card-label {font-size:18px; font-weight:bold;}



.card.card-custom > .card-header {min-height:100%; padding-top:0 !important; padding-bottom:0 !important;}
.card.card-custom > .card-header .card-title {width:100%; margin-right:0; justify-content:space-between; cursor:pointer;}
.card.card-custom > .card-header .card-title h3 {transition: color 0.15s ease;}
.card.card-custom > .card-header .card-title:hover h3 {color:#3699FF;}
.card.card-custom > .card-header .card-title:hover .card-toolbar > a:not(.btn-text):not(:disabled):not(.disabled)
{background-color: #3699FF; border-color: transparent;}
.card.card-custom > .card-header .card-title:hover .card-toolbar > a > i {color:#fff;}
.btn.btn-light-primary:focus:not(.btn-text), .btn.btn-light-primary.focus:not(.btn-text)
{background-color: #E1F0FF;border-color: transparent;}
.btn.btn-light-primary:focus:not(.btn-text) > i, .btn.btn-light-primary.focus:not(.btn-text) > i {color:#3699FF;}

body.admin .container.row > .col-8 table tbody td > a {line-height:24px;}
.dataTables_wrapper .dataTable thead th {font-weight:bold; word-break:keep-all;}
.dataTables_wrapper .dataTable th {padding:0.5rem 1rem;}
.dataTables_wrapper .dataTable tbody td {padding:0.3rem 1rem; height:35px;}
.dataTables_wrapper > div:first-of-type .custom-select-sm, .dataTables_wrapper > div:first-of-type label > input {
  height:calc(1.35em + 1rem) !important;
  padding-top:0.3rem !important;
  padding-bottom:0.3rem !important;
}
.dataTables_wrapper > div:first-of-type .custom-select-sm {margin-left:5px;}
.dataTables_wrapper > div:first-of-type label > input {margin-left:10px; max-width:50%;}
.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {top:26px; padding-left:10px;}
.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before {top:24px;}
.dataTables_wrapper table.dataTable.collapsed > tbody > tr[role="row"] > td:first-child {padding-left:35px !important;}
div.dataTables_wrapper div.dataTables_filter label {text-align:right; display:block;}
div.dataTables_wrapper div.dataTables_filter {text-align:right !important;}

.card-toolbar button {display:flex; align-items:center; padding:0.5rem 1rem; margin-right:10px;}
.card-toolbar button i {font-size:14px !important;}


@media (max-width: 384px) {
  body.admin .container.row > .col-8 table tbody td {position:relative;}
  body.admin .container.row > .col-8 table .dtr-details li:last-of-type > span:first-of-type {display:none;}
  body.admin .container.row > .col-8 table .dtr-details li:last-of-type > span:last-of-type {position:absolute; right:10px; bottom:1px;}
  body.admin .container.row table .dtr-details li > span:last-of-type {max-width:40vw; }
}

@media (max-width: 430px) {
  body.admin .dataTables_wrapper > div.row:first-of-type > div.col-md-6 {width:100%; flex:0 0 100%; max-width:100%;}
  body.admin .dataTables_wrapper > div.row:first-of-type > div.col-md-6 > div {text-align:left !important;}
  body.admin .dataTables_wrapper > div.row:first-of-type > div.col-md-6:first-of-type > div {padding-bottom:10px;}
  div.dataTables_wrapper div.dataTables_filter label {text-align:left;}
}

@media (max-width: 500px) {
  .card.card-custom > .card-header, .card.card-custom > .card-body {padding-right:14px; padding-left:14px;}
  .modal .col-6 {width:100%; flex:0 0 100%; max-width:100%;}
  #info-hold-msg {font-size:30px;}
  .card-label {font-size:14px !important;}
  .idPw {font-size:14px !important;}
  .idPw > div > span:first-of-type {font-size:12px !important;}
  .context {font-size:26px !important;}
  h3 {font-size:24px !important;}
  h3 > span {font-size:22px !important;}
  .tx {font-size:16px !important;}
}

@media (max-width: 725px) {
  .col-4 {width:100%; max-width:100%; flex:0 0 100%;}
  .row {justify-content:center;}
}

@media (max-width: 575px) {
  .modal-dialog {width:calc(100vw - 40px);}
}

@media (max-width: 991.98px) {
  body.admin .header a img {max-height:29px; margin-top:9px;}
  body.admin .adminUser > span:first-of-type {
    margin:3px 0 2px 0;
  }
  .dataTables_wrapper .dataTable tbody td {padding:0.5rem 1rem;}
  .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {top:28px;}
  .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before {top:27px;}
}

@media (max-width: 1715px) {
  .dataTables_wrapper > div.row:first-of-type > div.col-md-6:first-of-type {width:30%; flex:0 0 30%; max-width:30%;}
  .dataTables_wrapper > div.row:first-of-type > div.col-md-6:last-of-type {width:70%; flex:0 0 70%; max-width:70%;}
}

@media (max-width: 1489px) {
  body.admin .container.row > .col-8 {width:58.33333%; flex:0 0 58.33333%; max-width:58.33333%;}
  body.admin .container.row > .col-4 {width:41.66667%; flex:0 0 41.66667%; max-width:41.66667%}
}

@media (max-width: 1200px) {
  a.upDown {display:flex; display:-webkit-box; display:-ms-flexbox;}
  body.admin .container.row {display:block;}
  body.admin .container.row  > [class*=col-] {max-width:100%; flex:0 0 100%; width:100%;}
  body.admin .container.row  > [class*=col-] + [class*=col-] {margin-top:25px;}
}

.topbar-item > .btn.btn-icon.btn-lg {padding-right:0 !important;}

.label {font-weight:bold;}

/* 내정보수정, 로그아웃 Button */
.userBtnGroup > button > span + span {padding-left:2px;}
.userBtnGroup > button:first-of-type {padding-left:0.9rem !important;}
.userBtnGroup > button:last-of-type {margin-right:0 !important; padding-right:0.75rem !important;}
.userBtnGroup > button:last-of-type .svg-icon svg {width:1.4rem !important; height:1.4rem !important;}
.userBtnGroup > button:last-of-type:hover .svg-icon svg g [fill] {fill:#fff !important;}

@media (max-width: 450px) {
  body.admin .userBtnGroup > button > span:last-of-type {display:none;}
}
@media (max-width: 350px) {
  body.admin .adminUser {display:none;}
}