body, div, h1, h2, h3, h4, h5, h6 {
	font-family: Basier circle,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji" !important;
    /*font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Noto Sans KR' !important;*/
	font-weight: 500 !important;
}

body, div, h1, h2, h3, h4, h5, h6 {
	font-family: Basier circle,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji" !important;
    /*font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Noto Sans KR' !important;*/
	font-weight: 500 !important;
}

.text-secondary{
	color:#333 !important;
}

.modal-dialog {
    max-width: 500px;
}

.modal-content {
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-header {
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.btn-close:focus {
    box-shadow: none;
}


/* Primary 컬러 변경 */
.btn-primary, .bg-primary{
	background-color: #33d1f2 !important;
	color: #fff !important;
}
.text-primary {
	/*background-color: #33d1f2 !important;*/
	color: #47d6f3 !important;
}

.text-secondary {
	color: rgb(60 69 79) !important;
}

.mw-sm-xs{
	width:16rem !important;
}

/* Custom Common CSS */
.invalid-tooltip{
	position: relative !important;
}

.bg-very-light{
    background-color: #ebebeb; /* 매우 밝은 회색 */
}

.tiny {
	font-size: 0.625rem; /* 더 작은 폰트 크기를 정의 */
}

.smaller {
	font-size: 0.75rem; /* 폰트 크기를 0.875rem에서 0.75rem으로 줄임 */
}

a {
    color: inherit; /* 부모 요소로부터 글씨 색상을 상속받습니다. */
    text-decoration: none; /* 밑줄 제거 */
}
*:focus{
	outline:none;
}

a:hover {
    color: inherit; /* 마우스 오버나 포커스 시에도 색상을 상속받습니다. */
    text-decoration: none; /* 마우스 오버나 포커스 시 밑줄 제거 */
	background-color: #33d1f2 !important; /* 배경 컬러 변경 */
	color:#FFF !important;
}

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

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

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

.btn-very-sm {
	padding: 0.1rem 0.4rem;
	font-size: 0.5rem;
	border-radius: 0.2rem;
	margin:0.2rem;
}

.btn-very-sm:hover {
	color: inherit; /* 마우스 오버나 포커스 시에도 색상을 상속받습니다. */
	text-decoration: none; /* 마우스 오버나 포커스 시 밑줄 제거 */
	background-color: #33d1f2 !important; /* 배경 컬러 변경 */
	color:#FFF !important;
}

.btn-very-sm:click{
	outline:none;
}


.bootstrap-tagsinput .tag {
    padding: 6px;
    border-radius: 2px;
}
.label {
    border-radius: 4px;
    font-size: 75%;
    padding: 4px 7px;
    margin-right: 5px;
    font-weight: 400;
    color: #fff;
}

.nav-1{
    border-right: 1px solid #d1d7dd;
}

/* 아이콘 또는 다른 요소에 primary 컬러 적용 */
.icon-primary {
	color: #33d1f2 !important;
}

/* 모든 버튼에 적용되는 스타일 */
.btn {
    outline: none; /* 클릭 시 생기는 외곽선 제거 */
    border: none; /* 버튼의 경계선 제거 */
    transition: background-color 0.3s ease; /* 배경색 변경에 대한 전환 효과 */
}

.cursor-pointer{
	cursor:pointer;
}

.btn:focus{
    outline: none; /* 완전히 제거 */
    /* 또는 더 세련된 포커스 스타일로 대체 */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Bootstrap의 기본 포커스 스타일과 유사한 효과 */
}

/* 버튼에 마우스를 올렸을 때의 스타일 */
.btn:hover {
    background-color: #33d1f2; /* 롤오버 시 배경색 변경, 색상은 예시이며 원하는 색으로 변경 가능 */
	color:#FFF !important;
}


.navbar-menu button{
	font-size:0.875rem;
}

.ms-lg-80 {
    margin-left: 17rem !important;
    transition: margin-left 0.35s ease, margin-right 0.35s ease !important;
}

.nav-2, .nav-3 {
    /*opacity: 0;
    visibility: hidden;*/
    transition: opacity 1s ease, visibility 1s;
}

.nav-2.visible {
    opacity: 1;
    visibility: visible;
}

.nav-3.visible {
    opacity: 1;
    visibility: visible;
}

.ms-lg-nav-2-visible {
    margin-left: 32rem !important;
}

.ms-lg-nav-3-visible {
    margin-right: 16rem !important;
}

.nav-3 .flex-column {
    height: 33.33%; /* 전체 높이의 1/3 */
    overflow-y: auto; /* 내용이 늘어날 경우 스크롤 */
}

.nav-3 .widget-btn i{
	font-size:0.6rem;
}

.nav-3 .user-highlight {
    font-size: 0.95rem; /* 기본 폰트 크기보다 약간 작게 */
    font-weight: bold; /* 텍스트를 두껍게 하여 강조 */
}

.nav-3 .user-item:hover {
    background-color: #f8f9fa; /* 롤오버 시 배경색 변경 */
    cursor: pointer; /* 마우스 포인터를 손가락 모양으로 변경하여 클릭 가능함을 나타냄 */
    transition: background-color 0.3s ease; /* 배경색 변경에 대한 전환 효과 */
    border-radius: 0.5rem; /* 모서리를 둥글게 */
}

.nav-3 .status-dot {
    font-size: 0.5rem; /* 또는 원하는 크기로 조정 */
	vertical-align:middle;
}

.nav-link.folded svg{
	transform: rotate(180deg);
}

.flex-column.folded{
	display:none;
}

.file-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 0.25rem; /* 라운드 효과 */
    transition: background-color 0.2s ease-in-out; /* 부드러운 배경색 전환 */
	font-size:0.875rem;
}

.file-item:hover {
    background-color: #33d1f2 !important; /* Bootstrap의 primary 색상 */
    color: white; /* 텍스트 색상을 흰색으로 변경 */
}

.file-name {
    margin-left: 0.5rem; /* 아이콘과 파일명 사이의 간격 */
}

.msg-item {
	display: flex;
	cursor: pointer;
	border-radius: 0.25rem; /* 라운드 효과 */
	transition: background-color 0.2s ease-in-out; /* 부드러운 배경색 전환 */
}

.msg-item:hover {
	background-color: #33d1f2 !important; /* Bootstrap의 primary 색상 */
	color: white; /* 텍스트 색상을 흰색으로 변경 */
}

.fa-file-excel {
    color: #217346; /* 엑셀 아이콘 색상 - Microsoft Excel의 테마 색상 */
}

.fa-file-word {
    color: #2B579A; /* 워드 아이콘 색상 - Microsoft Word의 테마 색상 */
}

.widget-box-prompts button{
	font-size:0.75rem;
}

.hidden-sub {
  overflow: hidden; /* 내부 요소가 밖으로 나오지 않도록 함 */
  height: 0; /* 높이를 0으로 설정하여 보이지 않도록 함 */
}

.nav-pills{
	width:100%;
}


.btn_modal_team_modify:hover i {
	color: white; /* 흰색으로 변경 */
}


/*********** right - chatwork ***********/
.makechat_right{
	float:left;
	width:20%;
	padding-top:6px;
	background:#000;
}

.makechat_right_widget{
	width:100%;
}

.makechat_right_widget.widget1{
}

.makechat_right_widget.widget2{
}

.widget_header{
	width:100%;
	height:28px;
	line-height:28px;
	padding-left:10px;
	padding-right:10px;
}

.widget_header_title{
	width:50%;
	height:28px;
	line-height:28px;
	float:left;
	color:#FFF;
}

.widget_header_btn{
	width:80px;
	font-size:13px;
	height:24px;
	line-height:24px;
	float:right;
	border-radius:5px;
	text-align:center;
	color:#FFF;
	background:#343541;
	margin-top:2px;
	cursor:pointer;
}

.widget_header_btn:hover{
	background:#33d1f2;
}

.widget_header_btn span{
	margin-left:3px;
}

.widget_content{
	padding:10px;
	width:100%;
	box-sizing: border-box;
}

.widget_box{
	width:100%;
	background:#333;
	border-radius:5px;
	padding:14px;
	box-sizing: border-box;
	overflow-y:scroll;
}

.item_friend-profile-image img{
	height:30px;
	width:30px;
	float:left;
	box-shadow:none;
}

.item_friend_info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start; /* 자식 요소들을 왼쪽 정렬합니다 */
	height: 30px;
	width: 150px;
	padding-left: 10px;
	color: #FFF;
}

.item_friend_username {
	font-size: 14px;
	color: #FFF;
	margin: 0; /* 기본 마진 제거 */
	height:15px;
	line-height:15px;
}

.item_friend_usertitle {
	font-size: 14px;
	color: #AAA;
	margin: 0; /* 기본 마진 제거 */
	height:15px;
	line-height:15px;
}

.item_friend_right{
	height:30px;
	width:50px;
	float:right;
	text-align:right;
	color:#FFF;
}

.item_friend_right i{
	color:#FFF;
}

.item_friend{
	height:50px;
	line-height:50px;
	width:100%;
	padding:10px;
	box-sizing: border-box;
	cursor:pointer;
}

.widget_members .item_friend:hover{
	background:#222;
	border-radius:5px;
}

.item_friend:not(:first-child) {
	margin-top:20px;
}


/* modal : common */
.my-modal{
	background:#FFF;
	border-radius: 6px;
    box-shadow: 0 0 0 1px var(--saf-0),0 4px 12px 0 #0000001f;
	border:1px #CCC solid;
	position:fixed;
	z-index: 100000;
	box-sizing: border-box;
	padding-top:20px;
	padding-bottom:20px;
	user-select: none;
}
.my-modal button{
	font-size:0.75rem;
}
.my-modal input,textarea{
	user-select: auto;
}

.my-modal.center {
    position: fixed; /* fixed를 사용하여 화면에 고정 */
    top: 50%; /* 상단에서 50% 위치로 이동 */
    left: 50%; /* 좌측에서 50% 위치로 이동 */
    width: 100%;
    min-height: 250px;
    transform: translate(-50%, -50%); /* 현재 위치에서 -50% 만큼 이동하여 화면 중앙에 정확하게 위치 */
	background:#FFF;
	padding-top:10px;
}

.modal-overlay {
    position: fixed;       /* 화면 전체에 고정 */
    top: 0;                /* 상단부터 시작 */
    left: 0;               /* 좌측부터 시작 */
    width: 100%;           /* 화면 전체 폭 */
    height: 100%;          /* 화면 전체 높이 */
    background: rgba(0, 0, 0, 0.5);   /* 검정색 투명도 50% */
    z-index: 10000;         /* 다른 요소보다 앞에 오도록 z-index 설정 */
	display:none;
}

.my-modal .close-modal-btn {
    position: absolute; /* 모달 내부의 상단 오른쪽에 위치시키기 위해 */
    top: 15;
    right: 20px;
    background: none; /* 기본 배경 제거 */
    border: none; /* 기본 테두리 제거 */
    color: #999; /* 아이콘 색상 설정 */
    cursor: pointer; /* 마우스를 올렸을 때 손가락 모양으로 변경 */
}

.my-modal .close-modal-btn i{
	color:#000;
}

.my-modal .title{
	width:100%;
	color:#333;
	margin-bottom:16px;
	font-weight: bold;
	height:34px;
	line-height:34px;
}

.my-modal .title h5{
	height:34px;
	line-height:34px;
}

.my-modal .close-modal-btn:focus {
    outline: none; /* 포커스 시 기본 테두리 제거 */
}

.my-modal .form-row {
	height:36px;
	line-height:36px;
}


.form-row-msg{
	color:red;
	display:none;
}

.my-modal .form-row.title {
	margin-top:10px;
}

.my-modal .form-row.desc{
	font-size: .8rem;
	margin-top:5px;
	height:26px;
	line-height:20px;
}

.my-modal.center{
    position: fixed; /* fixed를 사용하여 화면에 고정 */
    top: 50%; /* 상단에서 50% 위치로 이동 */
    left: 50%; /* 좌측에서 50% 위치로 이동 */
    max-width: 700px;
    width: 100%;
    min-height: 250px;
    transform: translate(-50%, -50%); /* 현재 위치에서 -50% 만큼 이동하여 화면 중앙에 정확하게 위치 */
	background:#FFF;
	padding-top:10px;
}

/*바로 아래에 있는 요소만 적용*/
.my-modal > div,
.my-modal > h4,
.my-modal > h5,
.my-modal > h6 {
	width:100%;
	padding-left:20px !important;
	padding-right:20px !important;
}


/* modal : Create Team */
.modal-workspace-team-create-userlist{
	overflow-y:scroll;
	height: 320px;
}

.modal-workspace-team-create-userlist div{
	padding:0;
}

.modal-workspace-team-create-userlist .item_friend{
	height:50px;
	line-height:50px;
	width:100%;
	box-sizing: border-box;
	cursor:pointer;
	padding:0;
	padding:10px;
}

.modal-workspace-team-create-userlist .item_friend:hover{
	background:#EFEFEF;
	border-radius:5px;
}

.modal-workspace-team-create-userlist .item_friend:not(:first-child) {
	margin-top:10px;
}

.modal-workspace-team-create-userlist .item_friend-profile-image{
	padding:0;
}

.modal-workspace-team-create-userlist .item_friend-profile-image img{
	height:30px;
	width:30px;
	float:left;
	box-shadow:none;
}

.modal-workspace-team-create-userlist .item_friend_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* 자식 요소들을 왼쪽 정렬합니다 */
    height: 30px;
    width: 350px;
    padding-left: 10px;
    color: #FFF;
	float:left;
}

.modal-workspace-team-create-userlist .item_friend_name {
    font-size: 14px;
    color: #000;
    margin: 0; /* 기본 마진 제거 */
	height:15px;
	line-height:15px;
}

.modal-workspace-team-create-userlist .item_friend_email {
    font-size: 14px;
    color: #666;
    margin: 0; /* 기본 마진 제거 */
	height:15px;
	line-height:15px;
}

.modal-workspace-team-create-userlist .item_friend_right{
	height:30px;
    line-height: 30px;
	width:30px;
	float:right;
	text-align:right;
	color:#FFF;
	padding:0;
}

.modal-workspace-team-create-userlist .item_friend_right i{
	color:#FFF;
	width:30px;
	height:30px;
    line-height: 30px;
	border-radius:50%;
	background-color:#999;
	padding: 0;
    text-align: center;
}

.modal-workspace-team-create-userlist .item_friend.joined i{
	background-color:#33d1f2;
}


/* modal : invite */

.my-modal-invite {
    position: fixed; /* fixed를 사용하여 화면에 고정 */
    top: 50%; /* 상단에서 50% 위치로 이동 */
    left: 50%; /* 좌측에서 50% 위치로 이동 */
    max-width: 700px;
    width: 100%;
    min-height: 250px;
    transform: translate(-50%, -50%); /* 현재 위치에서 -50% 만큼 이동하여 화면 중앙에 정확하게 위치 */
	background:#FFF;
	padding-top:10px;
}

.my-modal-invite.complete{
	display:none;
}

.my-modal-invite.complete .my-modal-invite-title{
    height: 250px;
    line-height: 250px;
	text-align:center;
}

.my-modal-invite-title{
	width:100%;
	color:#333;
	margin-bottom:16px;
	font-weight: bold;
	height:34px;
	line-height:34px;
}

.my-modal-invite-message{
	width:100%;
	margin-bottom:8px;
	height:34px;
	line-height:34px;
}

.my-modal-invite-title.msg{
	height: 250px !important;
    line-height: 24px !important;
    font-size: 18px;
    text-align: center !important;
    padding-top: 100px;
}


.my-modal-invite-text{
	width:100%;
	max-height:400px;
}

.my-modal-invite-text .bootstrap-tagsinput{
	padding:8px;
	border:#CCC 1px solid;
	min-height:80px;
}

.my-modal-invite-text .bootstrap-tagsinput .label-info{
	background:#33d1f2;
}

.my-modal-invite-text input{
	border:0;
	padding:0;
	width:100%;
}

.my-modal-invite-button{
	margin-top:10px;
}

.my-modal-invite-button a{
	margin-top:10px;
	font-size: 14px !important;
}

.my-modal-invite-button button{
	width:100px !important;
}


/* modal : workspace-rename */
.my-modal-workspace-rename {
    position: fixed; /* fixed를 사용하여 화면에 고정 */
    top: 50%; /* 상단에서 50% 위치로 이동 */
    left: 50%; /* 좌측에서 50% 위치로 이동 */
    max-width: 700px;
    width: 100%;
    min-height: 250px;
    transform: translate(-50%, -50%); /* 현재 위치에서 -50% 만큼 이동하여 화면 중앙에 정확하게 위치 */
	background:#FFF;
	padding-top:10px;
}

.my-modal-workspace-rename div{
	width:100%;
	padding-left:20px;
	padding-right:20px;
}

.my-modal-workspace-rename-title{
	width:100%;
	color:#333;
	margin-bottom:16px;
	font-weight: bold;
	height:34px;
	line-height:34px;
}

.my-modal-workspace-rename-content{
	width:90%;
	max-height:400px;
	margin:0 auto;
}

.my-modal-workspace-rename-content input{
	margin-top:20px;
	width:100%;
}

.my-modal-workspace-rename-content .invalid-tooltip,valid-tooltip{
	position:relative;
}


.my-modal-workspace-rename-button{
	margin-top:10px;
	width:100%;
	text-align:center;
}

.my-modal-workspace-rename-button a{
	margin-top:10px;
	font-size: 14px !important;
}

.my-modal-workspace-rename-button button{
	width:150px !important;
	margin:0 auto;
}

/* modal : user */

.my-modal-user{
	top:64px;
	left:30px;
	max-width:300px;
	width:100%;
	min-height:80px;
	display:none;
	/*max-height:200px;*/
	overflow-y:visible;
}

.my-modal-user div{
	width:100%;
	padding-left:20px;
	padding-right:20px;
}

.my-modal-user-me{
	font-size:0.875rem;
	font-weight:bold;
}
.my-modal-user-me img{
	width:30px;
	height:30px;
	margin-right:4px;
	border-radius: 50% !important;
}

.my-modal-user-line{
	width:100%;
	border-bottom:1px #CCC solid;
	margin-top:10px;
	margin-bottom:10px;
}

.my-modal-user-line-title{
	width:100%;
	border-bottom:1px #CCC solid;
	border-top:1px #CCC solid;
	color:#333;
	margin-top:16px;
	margin-bottom:16px;
	font-size:0.875rem;
	font-weight: bold;
	height:34px;
	line-height:34px;
}



.my-modal-user-current{
	font-size:14px;
	font-weight:bold;
}

.my-modal-user-url{
	font-size:12px;
	color:#666;
}

.my-modal-user-menu{
	font-size:14px;
	height:30px;
	line-height:30px;
	cursor:pointer;
}

.my-modal-user-menu:hover {
    background-color: #DDD;
}


/* modal : user-profile */


code[class*=language-], pre[class*=language-] {
    -webkit-font-smoothing: auto;
    color: #5a5a5a;
    font-family: Bitstream Vera Sans Mono,Menlo,Consolas,Monaco,Courier,monospace,serif;
    font-size: .75em;
    line-height: 1.5em;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    text-shadow: none;

    word-wrap: normal;
    direction: ltr;
    font-size: .8125rem;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    text-align: left;
    white-space: pre;
    word-break: normal;
    word-spacing: normal;
}


/* Toast Styles */
.toast {
    background-color: #333;
    color: white;
}

.toast.success {
    background-color: #198754;
}

.toast.error {
    background-color: #dc3545;
}

.toast.warning {
    background-color: #ffc107;
    color: #333;
}

.toast.info {
    background-color: #0dcaf0;
}

.toast-icon {
    font-size: 1.2rem;
}

.toast.success .toast-icon:before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.toast.error .toast-icon:before {
    content: '\f071';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.toast.warning .toast-icon:before {
    content: '\f06a';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.toast.info .toast-icon:before {
    content: '\f05a';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}