/* --------------   TYPEGRAPHY ---------------- */
body {
margin: 0;
font-family: 'Noto Sans KR';
font-weight: 300;
font-size: 12px;
color: #222222;
/* display: flex;
flex-direction: column; */
/* overflow: auto; */
overflow-x: hidden;

}

a {
text-decoration: none;
color: #222222;
}

#arrow_icon {
cursor: pointer;
}

#toggle {
overflow: hidden;
margin-top: -20px;
}

.on {
cursor: pointer;
position: absolute;
left: 10px;
top: 70px;
}

.off {
cursor: pointer;
position: absolute;
left: 190px;
top: 70px;
}

.on1 {
cursor: pointer;
position: absolute;
left: 190px;
top: 120px;
}

.off1 {
cursor: pointer;
position: absolute;
left: 190px;
top: 120px;
}

#b_margin {
margin-bottom: 100px
}


.h1 {
font-family: 'Noto Sans KR';
font-weight: 900;
font-size: 23px;
color: #222222;
}

.h2 {
font-family: 'Noto Sans KR';
font-weight: 700;
font-size: 20px;
line-height: 55px;
color: #222222;
}

.h3 {
font-family: 'Noto Sans KR';
font-weight: 500;
font-size: 18px;
line-height: 30px;
color: #222222;
}

.h4 {
font-family: 'Noto Sans KR';
font-weight: 300;
font-size: 15px;
color: #222222;
}

.h5 {
font-family: 'Noto Sans KR';
font-weight: 500;
font-size: 15px;
color: #222222;
}

.h6 {
padding-left: 5px;
font-family: 'Noto Sans KR';
font-size: 18px;
font-weight: 300;
line-height: 22px;
color: white;
}

.h7 {
font-family: 'Noto Sans KR';
font-size: 13px;
font-weight: 500;
/* line-height: 26px; */
color: #2196F3;
}

.h8 {
font-family: 'Noto Sans KR';
font-size: 13px;
font-weight: 500;
/* line-height: 26px; */
color: #222222;
}

.h9 {
font-family: 'Noto Sans KR';
font-weight: 300;
font-size: 12px;
line-height: 26px;
letter-spacing: 0.1px;
color: white;
}

.h10 {
font-family: 'Noto Sans KR';
font-weight: 700;
font-size: 1px;
line-height: 26px;
letter-spacing: 0.1px;
color: white;
}


.h11 {
font-family: 'Noto Sans KR';
font-weight: 300;
font-size: 12px;
line-height: 26px;
letter-spacing: 0.1px;
color: #222222;
;
}

.h12 {
font-family: 'Noto Sans KR';
font-weight: 300;
font-size: 10px;
color: #95969B;
}

.right_padding_5 {
padding-right: 5px;
}

.right_padding_100 {
padding-right: 100px;
}

/* ------------- 전체 layer  ------------------  */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 42px;
background-color: #515151;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
z-index: 1000;
}

/* 좌측 영역 */
#header_left ul,
#header_right ul {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}

#header_left li {
display: flex;
align-items: center;
margin-right: 8px;
}

#header_left img {
width: 22px;
height: auto;
}

/* 우측 영역 */
#header_right li {
display: flex;
align-items: center;
margin-left: 10px;
}

#header_right svg,
#header_right img {
display: block;
}

/* 텍스트 컬러 */
header .h6,
header .h9 {
color: #fff;
white-space: nowrap;
}

/* 기존 여백 클래스 보정 */
.right_padding_100 {
margin-right: 10px;
}

.right_padding_5 {
margin-right: 5px;
}

main {
margin-top: 40px;
/* height: 100vh; */
/* display : -webkit-flex; */
display: flex;
/* border: 1px solid black;       */
/* overflow: auto; */
}

footer {
margin: 0;
border: 0;
height: 50px;

}

/* ------------- header layer  ------------------  */
#header_left {
position: relative;
height: 42px;
top: 10px;
left: 10px;
}

#header_right {
position: absolute;
height: 42px;
top: 10px;
right: 30px;
}

/* ------------- header layer ul  ------------------  */
#header_left>ul {
overflow: hidden;
}

#header_left>ul>li {
float: left;
}

#header_right>ul {
overflow: hidden;
}

#header_right>ul>li {
float: left;
}


/* ------------- 좌측메뉴 시작 ------------------  */
#left_box {
width: 235px;
background-image: url(../images/left/left_bg.png);
background-repeat: repeat-y;
overflow: hidden;
/*height: 88vh;*/
}

#right_box {
-webkit-flex: 1;
flex: 1;
/* height: 100vh; */
overflow: auto;
/* border: 1px solid black; */
}

#left_time {
height: 60px;
display: flex;
}

#left_name {
height: 26px;
display: flex;
}

.bar_bg {
width: 100%;
height: 09px;
background-image: url(../images/left/left_line_bg.png);
background-repeat: repeat-x;
/* border: 1px solid black;  */
}


.time_view {
width: 235px;
}

.inbox_01 {
width: 235px;
padding: 15px 15px 5px 15px;
box-sizing: border-box;
}

.inbox_02 {
width: 235px;
padding: 5px 15px 20px 15px;
box-sizing: border-box;
}

.inbox_03 {
width: 235px;
padding: 30px 10px 0px 10px;
box-sizing: border-box;
}

.select_color {
background-color: #E3F2FD;
}

.left_gnu_01 {
/* height: 32px; */
display: flex;
}

.left_gnu_01_sub {
height: 32px;
display: flex;
}

.left_gnu_02 {
height: 32px;
display: flex;
}

.left_gnu_02_sub {
height: 32px;
display: flex;
}

.left_gnu_03 {
height: 25px;
}

.font_valign {
line-height: 32px;
}

.font_valign_1 {
padding-left: 50px;
width: 155px;
}

.font_valign_1:hover {
background-color: #E3F2FD;
}

.img_valign {
height: 32px;
line-height: 32px;
}

.img_valign img {
vertical-align: middle;
}

.gnu_bg_color {
background-color: #515151;
}

.width_50 {
width: 50px;
}

.width_35 {
width: 35px;
}

.out_line_view {
border: 1px solid black;
}

/* ------------- 좌측메뉴 끝  ------------------  */



/* ------------- 우측박스 시작 ------------------  */

/* ------------- 네비게이션 시작 ------------------  */
#nav_box {
display: flex;
}

#nav_title_box {
height: 106px;
width: 1100px;
padding: 30px 20px 0px 10px;
box-sizing: border-box;
}

#nav_logo {
width: 223px;
padding: 6px 15px 0px 15px;
box-sizing: border-box;
}

.nav_title {
height: 42px;
width: 100%;
padding-bottom: 5px;
display: flex;
}

.nav_title_icon {
width: 35px;
}

.nav_title_arrow_icon {
width: 44px;
padding: 0px 8px 0px 8px;
box-sizing: border-box;
}

.nav_title_sub {
padding: 8px 5px 0px 30px;
box-sizing: border-box;
display: flex;
}

.nav_snb_name_h {
height: 25px;
}

.txt_width_01 { 
padding: 0px 40px 0px 8px;
box-sizing: border-box;
}

.img_center {
text-align: center;
}


#content_box {
display: flex;
justify-content: space-between;
width: 1100px;
padding: 15px;
box-sizing: border-box;
}

#content_box_1 {
display: flex;
justify-content: space-between;
width: 1100px;
padding: 20px 15px 10px 15px;
box-sizing: border-box;
}



.right-area {
margin-left: auto;
/* 오른쪽 끝으로 이동 */
}


.input-area {
display: flex;
flex-wrap: wrap;
gap: 15px 20px;
width: 100%;
}

/* 한 줄 2개 */
.input-item.half {
flex: 1 1 calc(50% - 10px);
/* 컬럼 간격 감안 */
display: flex;
flex-direction: column;
}

.input-item {
width: calc(33.33% - 13.33px);
/* 컬럼 간격 20px 감안 */
display: flex;
flex-direction: column;
}

.input-item.full {
width: 100%;
}

.input-item label {
padding: 10px;
font-size: 13px;
color: #333;
font-weight: bold;
margin-bottom: 4px;
}

.input-item input {
border: 1px solid #ccc;
border-radius: 15px;
height: 34px;
padding: 5px 10px;
font-size: 14px;
}

.input-item textarea {
width: 100%;
height: 120px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
}

.input-select-wrap {
display: flex;
align-items: center;
/* 입력창, 라벨, 선택박스 세로 중앙 정렬 */
gap: 10px;
/* 요소 간 간격 */
width: 100%;
}

.input-select-wrap input {
flex: 1;
/* 입력창이 남은 공간 모두 사용 */
border: 1px solid #ccc;
border-radius: 5px;
height: 34px;
padding: 5px 10px;
font-size: 14px;
}

.input-select-wrap .info-label {
font-size: 14px;
color: #333;
white-space: nowrap;
/* 줄바꿈 방지 */
}

.input-select-wrap select {
width: 120px;
border: 1px solid #ccc;
border-radius: 5px;
height: 34px;
padding: 0 10px;
font-size: 14px;
background-color: #fff;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23888" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}

input-area label {
padding: 10px;
}


/* 상단메뉴 밑줄*/
.nav_snb_name_h a {
position: relative;
text-decoration: none;
color: inherit;
}

.nav_snb_name_h.active a::after {
content: "";
position: absolute;
left: 0;
bottom: -13px;
/* 글자 아래 3px */
width: 100%;
height: 2px;
/* 밑줄 두께 */
background-color: #009EFD;
/* 밑줄 색 */
}

/* 검색 창*/
#search_padding {
/* padding: 0px 30px 0px 10px;
box-sizing: border-box;   */
}

#search_box {
width: 300px;
height: 100%;
background-color: #4B8CC3;
padding: 15px 20px 20px 10px;
box-sizing: border-box;
}

#content_view {
display: flex;
height: 400px;
padding: 8px 5px 10px 10px;
box-sizing: border-box;
}

#footer_box {
text-align: right;
height: 25px;
padding: 15px 20px 50px 0px;
box-sizing: border-box;
}


/* ------------- 우측컨텐츠 끝  ------------------  */

#toggle_button {
display: none;
/* 기본 숨김 */
color: #fff;
}




/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {

#main {
align-items: flex-start;
}

/* 햄버거 버튼 */
#toggle_button {
display: block;
position: fixed;
top: 7px;
left: 10px;
font-size: 24px;
z-index: 1200;
cursor: pointer;
}

.txt_width_01 {  display: none; }

#tttle  { display: block !important }


/* 좌측 메뉴 */
#left_box {
position: fixed;
top: 42px;
left: -235px;
width: 235px;
height: calc(100% - 42px);
z-index: 1100;
overflow-y: auto;
transition: left 0.3s ease;
}

#left_box.mobile_open {
left: 0;
}

.nav_title_sub { padding: 8px 5px 10px 30px }

/* 우측 컨텐츠 */
#right_box {
margin-left: 0;
}

#nav_title_box { height: auto;  }

/* 상단 좌측 텍스트 */
#header_left {
position: fixed;
top: 0;
left: 0;
height: 42px;
display: flex;
justify-content: center;
/* 가로 중앙 */
align-items: center;
/* 세로 중앙 */
z-index: 1100;
}

.right_padding_5 {
display: none !important;
}

.right_padding_100 {
padding-right: 0px !important;
}

#header_left {
position: fixed;
top: 0;
left: 40px;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1100;
}

/* 상단 우측 버튼 */
#header_right {
display: flex;
position: fixed;
right: 10px;
top: 0;
height: 42px;
align-items: center;
z-index: 1100;
}

#right_box {
width: 100%;
}

.right-area {
margin-left: inherit;
}

/* ===== 상단 검색 영역 ===== */
#content_box {
display: flex;
/* 안전 */
width: 100% !important;
flex-direction: column;
align-items: stretch;
gap: 12px;
}

.search-box {
display: flex;
/* 안전 */
flex-direction: column;
align-items: stretch;
gap: 10px;
}

.search-icon {
display: none;
}

.search-box input,
.search-box .search-btn,
.search-box .search-select {
width: 100% !important;
height: 44px;
font-size: 14px;
min-width: 0;
/* ⭐ flex 문제 차단 */
}

/* 버튼 flex 고정폭 제거 */
.search-box .search-btn {
flex: 0 0 auto;
}

.view-mode {
display: flex;
/* 명시 */
width: 100%;
}

.view-mode .list-view,
.view-mode .grid-view {
width: 50%;
height: 44px;
font-size: 14px;
}

.add-btn {
width: 100% !important;
height: 48px;
font-size: 15px;
}

/* ===== 하단 콘텐츠 영역 ===== */
#content_box_1 {
display: flex;
/* 안전 */
flex-direction: column;
width: 100%;
gap: 20px;
padding: 0 10px;
}

#content_box_1>div {
width: 100% !important;
}

/* ===== 명함 카드 ===== */
.small-box {
width: auto;
}

/* ===== 입력 폼 ===== */
.add-box {
width: 100% !important;
}

.add-box .input-area {
gap: 14px;
}

.add-box .input-item {
width: 100%;
}

textarea {
min-height: 120px;
}

.footer {
flex-direction: column;
/* 좌우에서 위아래로 변경 */
align-items: center;
/* 가운데 정렬 */
text-align: center;
}

.footer .right .h12 {
text-align: center;
}
.write-wrap { height: auto !important}
}

.list-view.check,
.grid-view.check {
background-color: #ccc !important;
color: #fff; /* 가독성 */
}

/* ================= 공통 박스 ================= */
.add-box1 {
display: flex;
flex-direction: column;
gap: 10px;
}

.add-box {
width: 270px;
height: auto;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
background: #fff;
box-sizing: border-box;
}

/* ================= 입력 영역 ================= */
.add-box .input-area {
display: flex;
flex-wrap: wrap;
padding-top: 20px;
gap: 20px;
}

.add-box .input-item {
width: calc(50% - 10px);
display: flex;
flex-direction: column;
}

.add-box .input-item.full {
width: 100%;
}

.add-box .input-item label {
font-size: 13px;
color: #333;
font-weight: bold;
margin-bottom: 4px;
}

.add-box .input-item input {
height: 34px;
padding: 5px 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
}

.add-box .input-item textarea {
width: 100%;
height: 120px;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
box-sizing: border-box;
}

/* ================= 얼굴 영역 ================= */
.add-box .face-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 10px;
text-align: center;
border-radius: 5px;
}

.add-box .face-icons {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}

.add-box .face-icons img {
width: 40px;
height: 40px;
object-fit: contain;
}

.add-box .face-image img {
width: 125px;
height: 125px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #ccc;
}

.add-box .face-name {
font-size: 14px;
font-weight: bold;
color: #333;
}

.add-box .face-info {
width: 100%;
margin-top: 6px;
padding-bottom: 6px;
font-size: 13px;
color: #666;
border-bottom: 1px solid #ccc;
text-align: center;
}

/* ================= 카드 ================= */
.small-box {
flex: 0 0 calc((100% - 20px) / 3);
height: 100px;
padding: 10px;
row-gap: 5px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.small-box .name {
font-size: 14px;
font-weight: bold;
}

.small-box .company {
font-size: 12px;
color: #555;
}

.small-box .phone {
font-size: 12px;
color: #888;
}

/* ================= 검색 영역 ================= */
.search-box {
display: flex;
align-items: flex-start;
gap: 10px;
position: relative;
}

.search-box input,
.search-box .search-select,
.search-box .search-btn,
.view-mode .list-view,
.view-mode .grid-view {
height: 36px;
box-sizing: border-box;
border-radius: 5px;
}

.search-icon {
position: absolute;
left: 12px;
top: 18px;
transform: translateY(-50%);
font-size: 16px;
color: #888;
pointer-events: none;
}

.search-box input {
width: 350px;
padding: 0 10px 0 35px;
font-size: 15px;
border: 1px solid #ccc;
}

/* 셀렉트 */
.search-select {
width: 100px;
padding: 0 30px 0 10px;
font-size: 14px;
cursor: pointer;
border: 1px solid #E5E5E5;
appearance: none;
background: url('data:image/svg+xml;utf8,<svg fill="%23888" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>')
   no-repeat right 10px center;
background-size: 12px;
}

/* 버튼 */
.search-box .search-btn,
.add-btn {
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}

.search-box .search-btn {
width: 88px;
}

/* ================= 뷰 모드 ================= */
.view-mode {
display: flex;
}

.view-mode .list-view,
.view-mode .grid-view {
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px;
font-size: 14px;
cursor: pointer;
border: 1px solid #ccc;
background-color: #fff;
}

/* 둥근 모서리 */
.view-mode .list-view {
border-radius: 5px 0 0 5px;
}

.view-mode .grid-view {
border-radius: 0 5px 5px 0;
border-left: none;
}

/* hover */
.view-mode .list-view:hover,
.view-mode .grid-view:hover {
background-color: #e0e0e0;
}

/* check 상태 */
.view-mode .list-view.check,
.view-mode .grid-view.check {
background-color: #ccc !important;
color: #fff;
}

/* ================= 추가 버튼 ================= */
.add-btn {
width: 270px;
height: 36px;
padding: 0 18px;
font-size: 14px;
border-radius: 5px;
white-space: nowrap;
}

.add-btn:hover {
opacity: 0.9;
}


.footer {
display: flex;
justify-content: space-between;
/* 좌우 끝 배치 */
align-items: center;
/* 세로 중앙 정렬 */
padding: 10px 20px;
flex-wrap: wrap;
/* 화면 좁아지면 요소 자동 줄바꿈 */
}

.footer .left {
display: flex;
flex-direction: column;
/* 위아래로 쌓기 */
align-items: center;
/* 가운데 정렬 */
margin-bottom: 10px;
/* 모바일 줄바꿈 시 간격 */
}

.footer .left .profile {
margin-top: 5px;
font-weight: bold;
}

.footer .right .h12 {
font-size: 12px;
color: #555;
text-align: right;
}

.delete-btn {
align-self: flex-end;
/* 우측으로 정렬 */
width: auto;
margin: 10px;
padding: 6px 12px;
background: #ff4d4d;
border: none;
border-radius: 6px;
color: white;
cursor: pointer;
font-size: 14px;
}

.right-btn {
align-self: flex-end;
/* 우측으로 정렬 */
width: auto;
margin: 10px;
padding: 6px 12px;
background: #2563EB;
border: none;
border-radius: 6px;
color: white;
cursor: pointer;
font-size: 14px;
}

.right-btn::before {
content: "+";
display: inline-flex;
/* allows centering */
justify-content: center;
align-items: center;
width: 20px;
/* circle width */
height: 20px;
/* circle height */
margin-right: 6px;
font-weight: bold;
font-size: 14px;
background-color: #fff;
/* circle background */
color: #007bff;
/* plus color */
border-radius: 50%;
/* makes it round */
border: 1px solid #007bff;
/* optional border */
}

.h150 {
height: 150px;
}

#calendar {
width: 1100px;
min-height: 600px;
background: #fff;
border-radius: 10px;
padding: 10px;
}

.task-editor {
width: 100%;
height: 150px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
}

.form-icons {
display: flex;
font-size: 20px;
color: #555;
cursor: pointer;
}

.form-icons i:hover {
color: #007bff;
}

.icon-btn {
padding: 0;
margin: 0;
border: none;
background: none;
line-height: 0;
/* 핵심 */
}

.icon-btn img {
display: block;
/* 핵심 */
}

/* ================= 입력 영역 ================= */
.input-area-1 {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 15px;
gap: 8px;
}

.input-area-1 label {
font-size: 13px;
color: #333;
font-weight: bold;
margin-bottom: -3px;
}

.input-area-1 input,
.input-area-1 textarea {
height: 34px;
padding: 5px 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

.input-area-1 textarea {
height: auto;
}

/* ================= 카드 레이아웃 ================= */
.add-box2 {
display: flex;
flex-wrap: wrap;
column-gap: 12px;
row-gap: 4px;
}

.small-box-1 {
flex: 0 0 calc((100% - 36px) / 3);
min-height: 70px;
padding: 8px;
background-color: #f8f8f8;
border: 1px solid #dcdcdc;
border-radius: 6px;
box-sizing: border-box;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 13px;
color: #444;
}

.input-item input[type="date"] {
   width: 100%;
   height: 44px;
   padding: 5px 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 14px;
   box-sizing: border-box;
}

/* placeholder 색상 조정 (크롬 기준) */
input[type="date"]::placeholder {
   color: #999;
}

.full-width-input {
   width: 100%;
   height: 34px;
   padding: 5px 10px;
   margin-bottom: 10px;
   /* 도로명과 상세주소 간격 */
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 14px;
   box-sizing: border-box;
}

.address-row {
   display: flex;
   gap: 10px;
}

.address-row input {
   flex: 1;
   /* 상세주소 입력창이 남은 공간 사용 */
   height: 34px;
   padding: 5px 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 14px;
   box-sizing: border-box;
}

.address-btn {
   padding: 0 15px;
   width: 320px;
   height: 34px;
   background-color: #2563EB;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 14px;
   transition: background 0.3s;
}

.address-btn:hover {
   background-color: #1e4bb8;
}

.checkbox-wrap {
   display: flex;
   gap: 20px;
   /* 체크박스 간 간격 */
   align-items: center;
}

.checkbox-wrap label {
   display: flex;
   align-items: center;
   font-size: 14px;
   cursor: pointer;
}

.checkbox-wrap input[type="checkbox"] {
   margin-right: 6px;
   width: 20px;
   height: 20px;
   accent-color: var(--Primary-primary-600, #2563EB);
   /* 체크 색상 */

}

.input-select-wrap {
   display: flex;
   align-items: center;
   gap: 10px;
}

.toggle-btn {
   position: relative;
   width: 45px;
   /* 가로 줄임 */
   height: 22px;
   /* 세로 줄임 */
   background-color: #ccc;
   border-radius: 50px;
   /* 높이/2 */
   cursor: pointer;
   display: flex;
   align-items: center;
   padding: 2px;
   padding-right: 10px;
   transition: background 0.3s;
}

.toggle-btn .slider {
   width: 18px;
   /* 축소 */
   height: 18px;
   background-color: #fff;
   border-radius: 50%;
   position: absolute;
   left: 2px;
   transition: 0.3s;
}

.toggle-btn.active {
   background-color: #007bff;
}

.toggle-btn.active .slider {
   transform: translateX(32px);
}

.toggle-btn .status-text {
   position: absolute;
   width: 100%;
   text-align: center;
   font-size: 12px;
   font-weight: bold;
   color: #fff;
   pointer-events: none;
}

.add-box-1 {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 10px;
   padding: 20px;
}
.write-wrap {
   margin-left: auto;
   display: flex;
   align-items: center;
   height: 10px;
}
.sound_only {
   position: absolute;
   left: -9999px;
   top: 0;
   width: 1px;
   height: 1px;
   overflow: hidden;
}
.btn_cke_sc {
   display: none !important;
}    

.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}
.form-group label {
    font-size: 14px;
    margin-bottom: 6px;
    font-weight: bold;
}
.form-group input, .form-group textarea {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
}