body.modal-open {
	overflow: hidden;
    /* position: fixed; */
    width: 100%;
    padding: 0 !important;
}
#main-container, #page-footer {
    overflow-x: inherit;
}
.modal {    overflow-y: auto;}
.cursor-p {cursor:pointer;}

.input-daterange input {text-align:left;}
.tooltip,
.tooltip-inner {text-align:left !important;}

button:focus {outline: none !important;}
#bbsList tr {
    cursor: pointer;
}
.d-inherit{  display: inherit;}
.border-primary-light { border: 1px solid #83bff0!important }
.border-primary-lighter { border: 1px solid #c8e2f8!important}
.bg-eee{ background-color: #eee !important;}
.transparent { background-color:transparent !important;}
.bg-eee .form-group{background: #f7f7f7;
    padding: 10px 0;
    box-shadow: 0px 2px 3px -1px #d2d2d2;
    margin: 20px 0px;
    border-radius: 4px;}
.text-darkorange{color:#ff8c00;}
.table thead th {white-space: nowrap;}
.popGT .table thead th{padding:10px 5px;}
 div.tagsinput {background-color:transparent;}

.form-material .form-control[disabled],
.form-material .form-control[readonly],
.form-material fieldset[disabled] .form-control { background-color:transparent !important;}

.list, ul, .pagination{  list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}


.modal.show .modal-dialog.modal-dialog-w100 {    height: 100%;
    position: relative;}
.modal.show .modal-dialog.modal-dialog-w100 .modal-content{     height: 100vh;
    position: fixed;-webkit-transform: translateZ(0);}

.btn-addTask { right: 20px;
    left: auto;
    bottom: 20px; }

.nav-tabs {border-top: 1px solid #e4e7ed;}
.nav-tabs-alt .nav-item {width: 50%;
    text-align: center;}

.user-add-list a { position: relative;
    margin-top: 10px;}
.user-add-list a > i{       position: absolute;
    left: 20px;
    top: 12px;
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;}


.scrumboard .scrumboard-item.scrumboard-item2{  padding: 10px 37px 5px 0px;
    color: inherit;
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
    margin-bottom: 0;}

.modalTaskDetail.modal {    overflow-x: unset;
    overflow-y: unset;}
.modalTaskDetail.modal .modal-content > .block { height: 100%;
    position: absolute;
    width: 100%;
    bottom: 50px;
    top: 0;
    overflow-y: auto;}
.modalTaskDetail.modal .block-header.bg-primary {height: 56.8px;}
.modalTaskDetail.modal .block-content.contentWrap {    bottom: 50px;
    position: fixed;
    top: 56.8px;
    overflow-y: auto;-webkit-transform: translateZ(0);}

.modalTaskDetail .modal-footer {      bottom: 0;
    height: 50px;
    position: fixed; -webkit-transform: translateZ(0);
    width: 100%;
    padding: 10px;
    z-index: 51;}
.modalTaskDetail .modal-footer .nav {    margin: 0 auto;
    width: 100%;}
.modalTaskDetail .modal-footer .nav li.nav-item {width: 14.28%;
    text-align: center;}
.modalTaskDetail .modal-footer .nav.column-8 li.nav-item {width: 12.5% !important;}
.modalTaskDetail .modal-footer .nav.column-9 li.nav-item {width: 11.111% !important;}
/* IE10 and IE11 hack*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.modal.show .modal-dialog.modal-dialog-w100 .modal-content {position:absolute}
	.modalTaskDetail.modal .modal-content > .block {position:absolute}
	.modalTaskDetail.modal .block-content.contentWrap {position:absolute}
	.modalTaskDetail .modal-footer{position:absolute}

    .commentList .modal-sm3 .block-content {position:absolute !important; width: 100% !important;}
    .commentModal .block-content .fixedWrap{position:absolute !important;  top:0 !important;}
	.commentModal .taskInfo{position:absolute !important}
	.commentModal .infoBtn{position:absolute !important; top:10px !important;}
	.commentModal .block-content .block-footer {position:absolute !important; bottom: 16px !important;}
	.btnWrap .emotBtn, .btnWrap .writeBtn {bottom:0px !important;}
    .commentList.commentModal .modal-content .modal-footer {position: absolute !important}
    .floating-button-wrap { position: absolute !important;}
    .commentList .block-content { position: absolute !important;}
    .commentList.commentModal .modal-content, .commentModal .modal-content {height:100% !important;}
    .commentList.commentModal .modal-content .block { bottom:0px !important}
}

.freezePage{
  overflow: hidden;
  height: 100%;
  position: relative;
}



.modal.modal-back{background: rgba(0, 0, 0, 0.5);}

.m-widget4
.m-widget4__item{display: inline-block;padding-bottom:1rem;width: 100%;position: relative;}
.m-widget4 .m-widget4__item .m-widget4__img{display: inline-block;vertical-align:middle;width: 10%;}
.m-widget4 .m-widget4__item .m-widget4__img.m-widget4__img--logo img{width:3.5rem;border-radius:50%}
.m-widget4 .m-widget4__item .m-widget4__img.m-widget4__img--pic img{width:4rem;border-radius:50%}
.m-widget4 .m-widget4__item .m-widget4__img.m-widget4__img--icon img{width: 100%;}
.m-widget4 .m-widget4__item .m-widget4__info  {display: inline-block;width: 70%; font-size:1rem;vertical-align:middle;}
.m-widget4 .m-widget4__item .m-widget4__info .m-widget4__text {font-size:0.7rem;font-weight:500;display: inline-block;width: 100%;}
.m-widget4 .m-widget4__item .m-widget4__info .m-widget4__title {font-size:1rem;font-weight:600}
.m-widget4 .m-widget4__item .m-widget4__info .m-widget4__sub {font-size:.85rem}
.m-widget4 .m-widget4__item .m-widget4__ext {display: inline-block;vertical-align:middle;}
.m-widget4 .m-widget4__item .m-widget4__ext .m-widget4__number {font-size:1.2rem;font-weight:600}
.m-widget4 .m-widget4__item .m-widget4__ext .m-widget4__icon>i {font-size:1.6rem}
.m-widget4 .m-widget4__item .m-widget4__ext .m-widget4__icon.m-widget4__icon--2x>i {font-size:2.2rem}
.m-widget4 .m-widget4__item .m-widget4__ext .m-widget4__icon:hover {text-decoration:none}

#forBtnTaskRegist {
	position: fixed;
    right: 28px;
    bottom: 95px;
    font-weight: bold;
    letter-spacing: -0.85px;
    display: none;
    -webkit-transform: translateZ(0);
}

.btn-addTask:hover > #forBtnTaskRegist{
	display:block;
}


@media screen and (min-width: 1200px) and (max-width: 1400px){
	.card-list-view .item{ width: 46px;
    height: 46px;
    font-size: 24px;
    line-height: 46px;}
}
@media screen and (min-width: 992px) and (max-width: 1120px){
	.card-list-view .item{ width: 46px;
    height: 46px;
    font-size: 24px;
    line-height: 46px;}
}

@media screen and (min-width: 768px){
    .content{    padding: 24px 24px 24px;}
	.searchWrap { width:480px;}
    .commentListModal.commentList .block-content { top: 103px !important}
    .commentList .block-content {    bottom:0px;
    position: fixed;
    top: 75px;
    overflow-y: auto;
    overflow-x:hidden;}
    .commentList .modal-sm3 .block-content { top: 75px !important;}
	.commentList .cmtActive .block-content {overflow-y: auto;}
    .commentList .cmtView .block-content {height: 575px; overflow-y: auto;}
    .commentModal .modal-sm3{width: 760px !important;
    max-width: 700px;}

    .cmtView, .cmtActive{ width: 50% !important;}
    .commentModal .block-content .fixedWrap{width: 50%;}
    .commentModal .swiper-button-next, .commentModal .swiper-button-prev { display: none;}
    .commentModal .modal-sm3 .block-content .overflow-y-auto {width:100% !important;}
    .commentList.commentModal .modal-content .modal-footer {    width: 50% !important;
    left: auto !important;
    right: 0 !important;}

}

@media screen and (max-width: 767px){
	.slick-slide img{    width: 100% !important;}
	.searchWrap { width: auto;}
	.commentList .modal-dialog { margin: 0 auto;}
	/*.commentList .block-header {position: fixed;
    width: 100%;
    top: 0;
    background: #fff;
    height: 50px;
    z-index: 1;}*/
    .commentListModal.commentList .block-content { top: 103px !important}
    .commentList .block-content {    overflow-x: hidden;
    bottom: 0;
    position: fixed;
    top: 75px;
    overflow-y: auto;
    padding: 0px;}
    .commentList .modal-sm3 .block-content { top: 75px !important;}

    .commentList .block-footer {    position: absolute;
    width: 100%;
    bottom: 0;
    overflow-y: auto;
    height: auto;
    background: #fff;
    -webkit-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);}

    .cmtView, .cmtActive{ width: 100%; max-width: 500px;}

    .commentModal .block-content .fixedWrap{width: 100%;}

}

@media screen and (max-width: 575px){
    .modal.show .modal-dialog.modal-dialog-w100 { margin: 0; }

    .commentModal .block-content .overflow-y-auto {width: 100% !important;}
    .commentModal .infoBtn{top: 10px !important;}
    .commentModal .modal-sm3{width: 100% !important;
        max-width: 500px;}
    .commentModal .modal-sm3{   height: 100%;
        border-radius: 0px !important;
        overflow: hidden !important;
        opacity: 1 !important;
    }
    .commentList .modal-content { height: 100vh;
        position: fixed}


}
@media screen and (min-width: 576px){
    .modal.show .modal-dialog.modal-dialog-w100 { margin-top: 0; }

    /*.commentModal .block-content .overflow-y-auto{width: 376px;}*/
    .replybox-emot.border .input_wrap textarea {font-size:17px;}
    .commentModal .modal-sm3{   min-height: 250px !important;
        max-height: 659px !important;
        height: calc(100% - 20px - 80px - 20px);
        box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16) !important;
        border-radius: 0px !important;
        overflow: hidden !important;
        opacity: 1 !important;
        }

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  select,
  textarea,
  input {
    font-size: 16px;
  }
}


/* EMOTICON */
.replybox-emot.border,
.replybox-emot.replyboxAdd {
    padding: 0px;
    background-color: #fff;
    position: relative;
    border: 1px solid #c8c8c8 !important;
    padding-bottom: 40px;
}
.messenger-ui {    padding-bottom:0px !important;}
.replybox-emot.border > div {border-bottom: 1px solid #f3f3f3;}
.thumb_append {
    float: left;
    position: relative;
    width: 70px;
    height: 70px;
    margin: 5px;
}
.thumb_append img {
    display: block;
    width: auto;
    height: 100%;
    padding-top: 5px;
    margin: 0 auto;
    vertical-align: top;
    border: 0 none;
}

.thumb_append #emotDel{position: absolute;
    top: 10px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
}
.thumb_append #emotDel i {
    color: #fff;
    font-size: 12px;
    position: absolute;
    top: 2px;
    right: 2.5px;}
.thumb_append + .input_wrap {
    padding-left: 0;
}
.input_wrap {
    overflow: hidden;
    padding: 10px 8px;
}
.replybox-emot.border.messenger-ui .input_wrap textarea{min-height: 56px;
    max-height: 200px;
    padding-right: 120px !important;
    padding-left: 29px !important;
    padding: 18px;
	height: auto;
	margin-bottom: 0 !important;
}
.replybox-emot.border .input_wrap textarea{     display: block;
    overflow: auto;
    width: 100%;
    height: 51px;
    resize: none;
    border: 0 none;
    font-size: 13px;
    line-height: 17px;
    color: #141414;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    outline: 0;
    min-height: 51px;
    margin-bottom: 19px;
    padding: 0 10px;
}

/* 메신저 ui 댓글 입력 버튼*/
.btnWrap{position: absolute;
    right: 5px;
    top: 15px;}
.btnWrap .emotBtn, .btnWrap .writeBtn {position: relative;
    background-color: transparent !important;
    outline: none !important;
    border: none !important;
    display: inline-block;
    vertical-align: top !important;
    float: none;
    bottom: unset;
    width: unset !important;}
.btnWrap .emotBtn i, .btnWrap .writeBtn i, .btnWrap .fileBtnWrap i{font-size: 24px;
    color: #999;}
.btnWrap .writeBtn:hover i,
.btnWrap .writeBtn:focus i,
.btnWrap .writeBtn:active i,
.btnWrap .writeBtn:visited i {color: #3f9ce8;}
.btnWrap .emotBtn:hover i,
.btnWrap .emotBtn:focus i,
.btnWrap .emotBtn:active i,
.btnWrap .emotBtn:visited i {color:#f7a434;}

.replybox-emot .btnWrap .writeBtnWrap,
.btnWrap .fileBtnWrap
{    overflow: hidden;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    position: relative;
    right: unset;
}
/* 메신저 ui 댓글 입력 버튼 END */


/* 일반 ui 댓글 입력 버튼 */
.emotBtn {float: right;
    position: relative;
    bottom: 42px;
    background: transparent;
    outline: none;
    border: none;}
.emotBtn i {font-size: 29px;
    color: #999;}
.emotBtn:hover i,
.emotBtn:focus i,
.emotBtn:active i,
.emotBtn:visited i {color:#f7a434;}

.replybox-emot .writeBtnWrap{    overflow: hidden;
    margin: 5px 10px;
    position: absolute;
    right: 0;
}
.replybox-emot .writeBtnWrap .writeBtn,
.replybox-emot .writeBtnWrap button{    width: 56px;
    border-radius: 1px;
    font-size: 13px;
    line-height: 29px;
    background-color: #eee;
    color: #4d4d4d;
    vertical-align: top;
    padding-top: 1px;
    overflow: hidden;
    outline: none;
    border: none;
    cursor: pointer;}
/* 일반 ui 댓글 입력 버튼 END */

#tabCommentInfo { position:relative; word-break: break-all;}
#emoticonKeyboard ul {    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;}
#emoticonKeyboard ul li {float:left;}
#emoticonKeyboard button{    border: 0 none;
    background-color: transparent;
    cursor: pointer;
    vertical-align: middle;}

#emoticonKeyboard {    position: absolute;
    overflow: hidden;
    z-index: 50;
    right: 0;
    border: 1px solid #4d4d4d;
    border-radius: 2px;
    background: #fff;
    width: 432px;}
.messenger-ui #emoticonKeyboard {right: -7px;
    width: 376px;
    bottom: 46px;}
#emoticonTabWrapper {position: relative;
    height: 46px;
    overflow: hidden;
    padding: 0 42px;}
#emoticonTabWrapper:after {display: block;
    clear: both;
    height: 0;
    content: '';
    zoom: 1;}
#emoticonTabWrapper a{
    position: absolute;
    width: 42px;
    height: 45px;
    top: 0;
    background-color: #fff;
    border-bottom: 1px solid #e1e1e1;}

#emoticonTabWrapper .rightBtn {left: 0;
    border-right: 1px solid #d8d8d8;}
#emoticonTabWrapper .leftBtn {right: 0;
    border-left: 1px solid #d8d8d8;}
#emoticonTabWrapper a i{    overflow: hidden;
    display: block;
    width: 15px;
    height: 18px;
    margin: 13px 10px;
    font-size: 18px;}
#emoticonTabWrapper .rightBtn i {margin: 13px 12px;}
#emoticonTabWrapper li{position: relative;
    width: 57.6px;
    float: left;
    clear: none;
    height: 45px;}
#emoticonTabWrapper li button, #emoticonTabWrapper li a{display: block;
    width: 100%;
    height: 45px;
    text-decoration: none;
    outline: 0;
    border: 0 none;
    background-color: transparent;
    cursor: pointer;
    vertical-align: middle;}
#emoticonTabWrapper li button img, #emoticonTabWrapper li a img { height: 40px;
    border: 0 none;
    width: auto !important;
    margin: 3px auto;
    display: block;}
#emoticonTabWrapper .emot_tab a.active{    background-color: #f2f2f2;
    height: 46px;
    border-right: 1px solid #d8d8d8;
    border-left: 1px solid #d8d8d8;}
#emoticonListWrapper {    position: relative;
    height: 288px;
    padding: 0;
    background-color: #f2f2f2;
    overflow-y: auto;}
#emoticonList{   padding: 17px 15px 1px;}
#emoticonListWrapper li{    float: left;
    margin: 0 9px 10px;
    text-align: center;
    clear: none;}
.messenger-ui #emoticonListWrapper li {    margin: 0 14px 10px;}
#emoticonListWrapper button{    display: block;
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    outline: 0 none;
    padding: 0;}
#emoticonListWrapper img{       width: 80px;
    height: 80px;
    text-align: center;
    vertical-align: top;}

@media screen and (max-width: 480px){
    #emoticonKeyboard{min-width: 280px !important;
    width: 100%;}
    #emoticonTabWrapper {height: 34px;
        padding: 0 33px;}
    #emoticonTabWrapper li {    width: 16.666% !important;}
    #emoticonTabWrapper #emoticonTab {    width: 100%;}
    #emoticonList {
    padding: 10px 0px 1px;
    }
    #emoticonListWrapper li{    margin: 0 0px 16px;
    width: 33.333%;}
    #emoticonTabWrapper li button img, #emoticonTabWrapper li a img{height: 30px;}
    #emoticonTabWrapper a{width: 34px;
    height: 34px;}
    #emoticonTabWrapper a i{font-size: 13px;}
    #emoticonTabWrapper .rightBtn i{margin: 13px 12px;}

}


.custom-file-input.height-0 {    position: relative;
    z-index: 2;
    width: 100%;
    height: 0;
    margin: 0;
    opacity: 0;
    display: flex;}

.category-list-name:focus,
.category-list-name:active { border-bottom: 1px solid; }
.dropdown-d-none .select2-search--dropdown { display: none; }

.profile-img-setting li.active img{    border: 4px solid #c5c5c5;}
.profile-img-section i {   position: absolute;
    right: 10px;
    bottom: 0;
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 23px;
    text-align: center;
    background-color: #000;
    border-radius: 50%;}

/*캘린더 목록뷰*/
.fc-list-item.bg-danger-light,
.fc-list-item.bg-info-light,
.fc-list-item.bg-warning-light,
.fc-list-item.bg-gray-light,
.fc-list-item.bg-success-light{ background-color: #fff !important}


.fc-list-item.bg-danger-light .fc-event-dot{background-color: #fae9e8 !important;}
.fc-list-item.bg-info-light .fc-event-dot{background-color: #e3f4fc !important}
.fc-list-item.bg-warning-light .fc-event-dot{background-color: #fcf7e6!important}
.fc-list-item.bg-gray-light .fc-event-dot{background-color: #e9ecef!important}
.fc-list-item.bg-success-light .fc-event-dot{background-color: #ebf5df!important}
/*캘린더 목록뷰 end*/


a.bg-danger-light:focus, a.bg-danger-light:hover{background-color: #fae9e8 !important;}
a.bg-danger-light:focus, a.bg-info-light:hover{background-color: #e3f4fc !important}
a.bg-danger-light:focus, a.bg-warning-light:hover{background-color: #fcf7e6!important}
a.bg-danger-light:focus, a.bg-gray-light:hover{background-color: #e9ecef!important}
a.bg-danger-light:focus, a.bg-success-light:hover{background-color: #ebf5df!important}


.opacity-5 {
  opacity: 0.5;
}
.opacity-7 {
  opacity: 0.7;
}
.opacity-9 {
    opacity: 0.9;
}
/*alert-circle*/

.alert-circle {
    margin-bottom: 10px;
    border-radius: 300px;
    animation: fadeInCircle .3s ease forwards, resizeCircle .3s .4s cubic-bezier(.25, .25, .4, 1.6) forwards;
    -webkit-animation: fadeInCircle .3s ease forwards, resizeCircle .3s .4s cubic-bezier(.25, .25, .4, 1.6) forwards;
    height: 60px;
    overflow: hidden;
    padding: 6px 55px 6px 6px;
    -webkit-transform: translateZ(0);
    position: relative;
    transition: all .2s linear 0s;
    -webkit-transition: all .2s linear 0s;
    text-shadow: none;
    font-size: 13px;
}

.alert-circle {
    float: right
}

.alert-circle>div>div.alert-thumbnail>div {
    border-radius: 50%;
    overflow: hidden;
    width: 48px;
    height: 48px
}

.alert-circle>div>div.alert-thumbnail>div>img {
    width: 100%;
    height: 100%
}
.alert-circle > div > div.alert-message { width: 78%;}
.alert-circle>div>div.alert-message>div {
    opacity: 0;
    height: 47px;
    padding-left: 9px;
    animation: fadeIn .3s .5s ease forwards;
    -webkit-animation: fadeIn .3s .5s ease forwards;
    /*overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    word-wrap: break-word;*/


}

.alert-circle>div>div.alert-message>div p:only-child {
    padding: 12px 0
}

.alert-circle .close {
    margin-top: -12px;
    position: absolute;
    right: 18px;
    top: 50%;
    opacity: .5;
    animation: fadeIn .3s .5s ease forwards;
    -webkit-animation: fadeIn .3s .5s ease forwards;
}

.alert-circle p {
    margin-bottom: 0;
    font-size: 13px;
}

.alert-circle>div {
    display: inline-block;
    height: 100%;
    position: relative;
    width: 100%;
}

.alert-circle>div>div {
    display: inline-block;
    vertical-align: middle
}

@keyframes fadeInCircle {
    0% {
        opacity: 0;
        width: 60px
    }

    100% {
        opacity: 1;
        width: 60px
    }
}

@-webkit-keyframes fadeInCircle {
    0% {
        opacity: 0;
        width: 60px
    }

    100% {
        opacity: 1;
        width: 60px
    }
}

@keyframes resizeCircle {
    0% {
        width: 60px
    }

    100% {
        width: 300px
    }
}

@-webkit-keyframes resizeCircle {
    0% {
        width: 60px
    }

    100% {
        width: 300px
    }
}


@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}


.bg-e7e7e7 {    background: #f7f7f7;}
.bg-purple-lighter {
    background-color: #f2ebff!important;
}
a.bg-purple-lighter:focus,
a.bg-purple-lighter:hover,

.bg-danger-dark {    background-color: #c00000!important;}

button.bg-purple-lighter:focus,
button.bg-purple-lighter:hover {
    background-color: #e8dcff!important;
}
.text-purple {color: #9c27b0!important;}
table.task-list-view tbody tr { cursor: pointer; }


.content-side-user {
    height: 164px !important;}

.tagcloud a {    word-break: keep-all;
    letter-spacing: -2.4px;
    margin: 2px;
    padding: 2px 3px;
    background-color: rgba(187, 187, 187, 0.1)!important;
    white-space: nowrap;
    display: inline-block;}
.tagcloud a:hover {
    background: #e4e4e4 !important;
}

.slick-slide{ outline:none;}
.slick-slide img { width:500px;
	margin:0 auto;}
.slick-slide b {color:#ff8c00;}

.word-break-keep{ word-break: keep-all;}


/*floating button*/
/* .btn-md{ min-width: 48px !important;
    height: 48px !important;} */
.floating-button-wrap{left: auto;
    right: 20px;
    bottom: 20px;}
.floating-button-wrap ul{right: 6px;
    bottom: 64px; }
.floating-button-wrap ul li{}
.floating-button-wrap ul li{  transition: all .3s;
	-webkit-transition:  all .3s;
    cursor: pointer;
    vertical-align: middle;}
.floating-button-wrap ul li{    opacity: 0;
    transform: scale(0.4) translateY(40px) translateX(0px);}

.floating-button-wrap.active ul li{   animation-duration: 0.16s;
  animation-name: slidein;
  animation-fill-mode: both;}
.floating-button-wrap.active ul li:nth-child(2){
  animation-name: slidein;
  animation-fill-mode: both;
  animation-delay: 0.08s;}
.floating-button-wrap.active ul li:nth-child(1){
  animation-name: slidein;
  animation-fill-mode: both;
  animation-delay: 0.16s;}

@keyframes slidein {
  from {
    opacity: 0;
    transform: scale(0.4) translateY(40px) translateX(0px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0px) translateX(0px);
  }
}


/*댓글 목록 modal*/
.commentModal .modal-sm2 {    min-height: 250px ;
    max-height: 659px !important;
    height: calc(100% - 20px - 80px - 20px);
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    width: 376px !important;}

.commentModal .block-header{height:75px;}
.commentModal .block-content .fixedWrap{top: 0px;bottom: 0;left: 0;right: 0;overflow-x:hidden;width:100%;}
.commentModal .block-content .overflow-y-auto{height: 100%;}
.commentModal .block-content .block-footer{bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 6px 6px;
    height: 100px;
    background: -webkit-gradient(linear, left bottom, left top, from(white), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(0deg, white, rgba(255, 255, 255, 0));
    -webkit-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);}
.commentModal .block-content .block-footer .newTaskList{ padding:14px; height:unset;}


.commentModal .media-body .task-info {    /*max-width: 280px;*/}
.commentModal .media-body .task-info h6{       max-width: 200px;}

.commentModal .messageWrap{    border-radius: 1.3em !important;
    padding: 6px 12px !important;
    font-size: 13px;}
.commentModal .infoBtn {right: 10px;
    top: 10px;
    z-index: 50;
    }
.commentModal .taskInfo{display:none;line-height: 2;width:100%;z-index:1;right:0;}
.commentModal .taskInfo > span{border-left: 2px solid; padding-left: 10px;}
.commentModal .taskInfo.show {display:block;}
.commentModal .taskInfo span{font-size: 11px !important;color: #777;}


.commentList.taskListModal .table td,
.commentList.taskListModal .table th{ padding: 10px;}
.commentList .table td,
.commentList .table th{ padding: 5px;}


#imgWrap img{ width:110px; height:110px;}/*코멘트 - 이모티콘 이미지 크기 설정*/


/*코멘트 리스트 모달*/
.commentList.commentModal .modal-content, .commentModal .modal-content{height: 100%;}

.commentList.commentModal .modal-content .modal-footer{left:0;
    bottom: 0;
    position: fixed;
    width: 100%;
    padding: 0;
    z-index: 50;}
.commentList.commentModal .modal-content .modal-footer.w-100 { width: 100% !important;}
.commentList.commentModal .list-group-chat .media-body { width: auto;}


/*comment popup*/
.commentList {}
.commentList .list-group-item {padding: 0.75rem 0.55rem;}
.commentList .list-group-chat .media-body #chatRoomUsers{overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}
.btn-commentInfo {
    padding: 0;
    background: transparent;
    font-size: 1.8rem;
    color: #999;
    outline: none !important;
}
.btn-commentInfo:focus{box-shadow:none !important;}

.bkg-whiteModal .modal-content{    padding: 0.2rem 1rem;}
.bkg-whiteModal .modal-header {border-bottom: 1px solid #ddd;
    background-color: #fff;}
.bkg-whiteModal .modal-header .close {color: #000;}
.bkg-whiteModal .modal-header .modal-title {    color: #888;}
.bkg-whiteModal .list-group-item.active{-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;}
.commentUserInfoView {position: fixed;
    -webkit-transform: translateZ(0);
    z-index: 3;
    max-width: 320px;
    padding: 1.2rem;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    min-width:18rem;}
.commentView .media-body, #chatMsgArea  .media-body{
	-webkit-box-flex: none;
      -ms-flex: none;
          flex: none;
}
.commentView .card{margin-bottom: 0.75rem;
    max-width: 94%;}
.commentView .card.bg-primary { max-width: 80%; }
.commentView .media{width: 100%;}
.commentView .media-body{width: 70%;}

#chatMessage {font-size: 0.825rem;}

#recentMsg {    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
.list-group-chat .media-body{width: 7rem;
    overflow: hidden;}
@media screen and (max-width:486px) {
	.commentList .media-body #chatRoomRegUserNm {width: 7rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;}
	.bkg-whiteModal .modal-content{padding:0;}
	#btnDeleteChatRoom { display:none;}
}
@media screen and (max-width:1199px) {
	.commentUserInfoView { right:0;}
}
/*comment popup END */

.list-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}
.list-group-flush:first-child .list-group-item:first-child {
    border-top: 0;
}
.commentList .list-group-item {
    padding: 0.75rem 0.55rem;
}

.list-group-flush .list-group-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}
.list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
.list-group-item {
    border: 1px solid #e9ecef;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
}


.list-group-item-action {
    width: 100%;
    color: #495057;
    text-align: inherit;
}


.commentUserInfoView {position: fixed;
   -webkit-transform: translateZ(0);
    z-index: 3;
    max-width: 320px;
    padding: 1.2rem;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    min-width:18rem;}

.commentMsgUserInfoView {position: fixed;
   -webkit-transform: translateZ(0);
    z-index: 3;
    max-width: 320px;
    padding: 1.2rem;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    min-width:18rem;}

.commentView .media-body,
#chatMsgArea  .media-body{
	-webkit-box-flex: none;
      -ms-flex: none;
          flex: none;
}
.commentView .card{margin-bottom: 0.75rem;
    max-width: 94%;}
.commentView .card.bg-primary { max-width: 80%; }
.commentView .media{width: 100%;}
.commentView .media-body{width: 70%;}

#chatMessage {font-size: 0.825rem;}

#recentMsg {    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
.list-group-chat .media-body{width: 7rem;
    overflow: hidden;}
.card-header {
    padding: 1.125rem 1.5rem;
}

.bg-orange-lighter { background-color: #ffe5c7!important;}
.bg-orange { background-color: #f78320!important;}
.text-orange {color: #f78320!important;}

.item {font-size: 24px;}

/* 코멘트 목록 */
.commentListModal.commentModal .block-header{ height: 55px;}
.commentListModal .nav-tabs-block{ background: transparent;}
.commentListModal .nav-link {    padding: 6px 16px;
    font-size: 13px;
    line-height: 20px;
    color: #9acbf3;
}
.commentListModal .nav-tabs-block .nav-item.show .nav-link,
.commentListModal .nav-tabs-block .nav-link.active {    color: #125a96;
    background-color: #9acbf3;
    border-color: #9acbf3;
    border-radius: 50px!important;
}
.commentListModal .nav-tabs-block .nav-link:focus,
.commentListModal .nav-tabs-block .nav-link:hover {
    color: #125a96;
    background-color: #9acbf3;
    border-color: #9acbf3;
    box-shadow: none;}

.commentListModal.commentModal .nav-item{ width: 33.333%}
/* 코멘트 목록 END */

@media screen and (max-width: 575px){
    .modal.show .modal-dialog.modal-dialog-w100 { margin: 0; }
    .commentModal .modal-sm2 {    min-height: 100% !important;
    max-height: 100% !important;
    height: 100%;
    overflow: hidden !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0;
    border-radius: 0px !important;}
    .commentModal .block-content .overflow-y-auto {width: 100% !important;}
    /*.commentModal .taskInfo{top: 75px !important;}*/

	.commentList.commentModal .modal-content .block {left: 0;
    right: 0;
    width: 100%;
    bottom: 57px;
    top: 0;
    overflow-y: auto;}
}
@media screen and (min-width: 576px){
    .modal.show .modal-dialog.modal-dialog-w100 { margin-top: 0; }
	.commentModal .modal-sm2 {    min-height: 250px;
    max-height: 659px !important;
    height: calc(100% - 20px - 80px - 20px);
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    width: 376px !important;}
    .commentList.commentModal .modal-content .block {left: 0;
    right: 0;
    width: 100%;
    bottom: 57px;
    top: 0;
    overflow-y: auto;}

    /*.commentModal .block-content .overflow-y-auto{width: 376px !important;}*/
}

/* 댓글회의 - 최근코멘트 영역 */
.commentList.commentModal .modal-sm3 .modal-content .block.left .block-content{ top: 0 !important;}
.commentList .modal-sm3 .block-sticky-options {top: 0;
    bottom: 0;
    z-index: 5500;
    background: #fff;}
@media screen and ( max-width:767px ) {
    #leftSlide {
        transition: all 0.3s ease;
        position: fixed;
        width: 92%;
        top: 0;
        height: 100%;
        z-index: 1001;
        max-width: 498px;
        min-width: 300px;
        margin-left: -92%;
        -webkit-transform: translateZ(0);
    }
    #leftSlide.open .block-content {padding: 30px;}

}

@media screen and ( min-width:768px ) {
    #leftSlide-toggle{ display: none;}
    #leftSlide-close { display: none;}

    .commentList.commentModal .modal-sm3 .modal-content .block{ width: 50%;
        left: auto;
        right: auto;}
    .commentList.commentModal .modal-sm3 .modal-content .block.left {left: 0;}
    .commentList.commentModal .modal-sm3 .modal-content .block.right {right: 0;}
    .commentList .modal-sm3 .block-content { width: 50%;}

}


/*#leftSlide a {
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
border-radius: 100px;
transition: all 0.2s ease;
}
#leftSlide a:hover {
background: rgb(50, 50, 50);
}*/
#leftSlide-toggle {
position: fixed;
    -webkit-transform: translateZ(0);
top: 20px;
left: 10px;
z-index: 1000;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: all 0.3s ease;
}
#leftSlide-toggle:hover {
cursor: pointer;
}
#leftSlide.open {    left: 0;
    width: 92%;
    display: block;
    max-width: 498px;
    min-width: 300px;
    margin-left: 0;
}
#leftSlide-toggle.open {
/*left: 92%;*/
}


.commentModal .modal-sm3 .block-content .overflow-y-auto.userDetailCmt {
    width: 270px !important;
    max-height: 270px;
    z-index: 100;}
/* 댓글회의 - 최근코멘트 영역 END */


.content-side-user {    height: auto;
    overflow: initial;}