@charset "UTF-8";
/* 웹폰트로 변경 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('/css/cursor/cursor.css');

:root {
    /* 기존에 있었던 것들 시작 */
    --main-blue: #0073CF;
    --main-green: #3cb371;
    --main-black: #323D4C;
    --main-gray: #4c5d75;
    --main-light-gray1: #898989;
    --main-light-gray: #fcfcfc;
    --main-line-gray: #d3d3d3;
    --main-light-line: #e6e6e6;
    --main-red: #ea5050;
    --main-black-red: #da5353;
    --main-background: #f0f0f0;

    --status-normal: #3cb371;
    --status-warning: #ffea00;
    --status-disconnected: #eb1919;
    --status-unconfirmed: #8d8d8d;

    --color-table-head: #E5EDF5;
    --color-table-line1: #A2C4E5;
    --color-table-line2: #e4eef8;
    --color-white: white;
    --color-btn-blue: rgba(22, 32, 118, 0.6);
    --color-btn-borderblue: #6490d3;
    --color-btn-bordergray: #E0E0E0;
    --color-main-blue: #0E52BA;
    --color-main-red: #EA3049;
    --color-main-black: #272A41;
    --color-main-blue-hover: #0c3d87;
    --color-line-gray: #CBD2DD;
    --color-font-black: #222222;

    --btn-permit: #0073CF;
    --btn-dark-permit: #005393;
    --btn-green: #3cb371;
    --btn-cancel: #ea5050;
    --btn-dark-cancel: #9b3535;
    --btn-line: rgb(118, 118, 118);
    --btn-faceid: rgba(26, 31, 54, 1);
    --btn-divide-p: rgb(73, 79, 102);
    --btn-divide-span: rgb(131, 140, 154);
    --modal-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --view-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    --marker-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    --component-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    --edit-popup-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    --line-light-gray: #e6e6e6;
    --line-normal-gray: #a7a7a7;
    --box-shadow-dim: rgba(0,0,0,0.4) 0 0 0 999999px;
    --window-min-width: 1487px;
    /* 기존에 있었던 것들 끝 */

    /* Primary */
    --main-color-1: #1A1F36;      /* Main_#1 */
    --main-color-2: #384366;      /* Main_#2 */
    --main-color-3: #455379;      /* Main_#3 */
    --main-color-4: #89B4FF;      /* Main_#4 */
    --main-color-5:  #E4EAFD;     /* Main_#5 */

    /* Gray Scale_Gray */
    --color-gray-1: #1E1E1E;      /* 매우 어두운 회색 */
    --color-gray-2: #333333;      /* 어두운 회색 */
    --color-gray-3: #505050;      /* 중간 어두운 회색 */
    --color-gray-4: #606060;      /* 조금 더 밝은 중간 회색 */
    --color-grey-5: #808080;      /* 회색 */
    --color-grey-6: #AAAAAA;      /* 밝은 회색 */
    --color-grey-7: #D3D3D3;      /* 연한 회색 */
    --color-grey-8: #EBEBEB;      /* 매우 연한 회색 */

    /* Gray Scale_BlueGray  */
    --color-blueGray-1: #858C97;  /* 회색 톤 */
    --color-blueGray-2: #9A9FA8;  /* 회색에서 조금 더 밝은 톤 */
    --color-blueGray-3: #A8ADC2;  /* 밝은 회색/파란빛 회색 */
    --color-blueGray-4: #CED0DA;  /* 더 밝은 회색/파란빛 회색 */
    --color-blueGray-5: #D1D6E9;  /* 매우 연한 파란빛 회색 */

    /* 기본 */
    --black-color: #000000;       /* Black */
    --white-color: #FFFFFF;       /* White */
    --text-color: #222222;        /* Text */
    --text-body-color: #666666;   /* Text_body */
    --text-sub-color: #999999;    /* Text_sub */
    --disabled-color: #A5A5A5;    /* Disabled */
    --disabled-bg-color: #E9E9E9; /* Disabled_bg */

    --hover-color: #F4F7FF;

    /* System */
    --error: #E03131;
    --disconnect: #FF7300;
    --warning: #FFC800;
    --unconfirmed: #A0A0A0;
    --normal: #00B69B;
}



@keyframes popup_slide_down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes left_slide {
    0% {
        right: -400px;
    }

    100% {
        right: 0;
    }
}

@keyframes right_slide {
    100% {
        right: -538px;
    }
}

@keyframes reduceWidth {
    0% {
        width: 264px;
    }

    100% {
        width: 0px;
    }
}

@keyframes increaseWidth {
    0% {
        width: 0;
    }

    100% {
        width: 264px;
    }
}

@keyframes reduceDroneToolWidth {
    0% {
        width: 220px;
    }

    100% {
        width: 0px;
    }
}

@keyframes increaseDroneToolWidth {
    0% {
        width: 0;
    }

    100% {
        width: 220px;
    }
}

/* 전체 스크롤바 스타일 */
::-webkit-scrollbar {
    width: 12px; /* 스크롤바의 너비 */
}

/* 스크롤바의 트랙 스타일 */
::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 트랙 색상 */
}

/* 스크롤바의 썸브 스타일 */
::-webkit-scrollbar-thumb {
    background-color: #888; /* 썸브 색상 */
    border-radius: 6px; /* 썸브 모서리 둥글기 */
}

/* 스크롤바의 썸브에 호버 효과 */
::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 호버 시 썸브 색상 */
}

/* 기본 Form 스타일 정의 */
/* 공통 - DropDown 시작 */
.common_dropdown {
    position: relative;
    display: inline-block;
}

.common_dropdown select {
    color: var(--text-color);
    min-width: 110px;
    height: 38px;
    border-radius: 6px;
    border: 1px solid #A8ADC2;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 400;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1), 0px 1px 4px rgba(12, 12, 13, 0.05);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6" fill="none"><path d="M1 1L6 5L11 1" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 6px;
}

.common_dropdown select:disabled {
    background-color: #E9E9E9;
    border: 1px solid #D3D3D3;
    color: #999999;
    box-shadow:none;
    opacity: 1;
}

.common_dropdown select:focus {
    border-color: #89B4FF;
    outline: none;
    box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1), 0px 1px 4px rgba(12, 12, 13, 0.05);
}
/* 공통 - DropBox 끝 */

/* 공통 input field */
.common_field {
    position: relative;
    display: inline-block;
}
/* 공통 input 시작 */
.common_field input {
    width: 247px;
    height: 38px;
    padding: 0 40px 0 22px; /* 오른쪽에 아이콘 공간 확보 */
    font-size: 13px;
    font-weight: 400;
    border: 1px solid #A8ADC2;
    border-radius: 6px;
    box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1), 0px 1px 4px rgba(12, 12, 13, 0.05);
}

.common_field input:disabled {
    background-color: #E9E9E9;
    border: 1px solid #D3D3D3;
    color: #999999;
    box-shadow: none;
}

.common_field input:focus {
    border: 1px solid #89B4FF;
    outline: none;
    box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1), 0px 1px 4px rgba(12, 12, 13, 0.05);
}

.common_field input::placeholder {
    color: #999999;
}
/* 공통 input 끝 */

.common_field .search_icon {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
}

/* Date Picker 스타일 시작 */
.common_date_picker {
    position: relative;
    display: inline-block;
}

.common_date_picker input {
    width: 156px;
    height: 38px;
    padding: 0 40px 0 10px; /* 오른쪽에 아이콘 공간 확보 */
    font-size: 13px;
    font-weight: 400;
    border: 1px solid #A8ADC2;
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.common_date_picker input:disabled {
    background-color: #f0f0f0;
    color: #b0b0b0;
}

.common_date_picker input:focus {
    border: 1px solid #89B4FF;
    outline: none;
    box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1), 0px 1px 4px rgba(12, 12, 13, 0.05);
}

.common_date_picker .calendar_icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
}
/*  Date Picker 스타일 시작 끝 */


/* date_separator 스타일 시작 */
.date_separator {
    display: inline-block;
    width: 42px;
    text-align: center;
    font-size: 10px;
    line-height: 24px; /* 높이를 맞추어 수직 가운데 정렬 */
    color: #D9D9D9;
}
/* date_separator 스타일 끝 */

/* 기본 Button 스타일 정의 시작 */
/* 공통 버튼 - 기본 속성 정의 시작 */
.common_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    border-radius: 6px;
    font-size: 13px;
    padding: 0 22px;
    font-weight: 500;
    color: #222222;
    border: 1px solid #A8ADC2;
    box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1), 0px 1px 4px rgba(12, 12, 13, 0.05);
    outline: none;
    gap: 2.5px;
}

.common_btn span {
    display: flex;
    align-items: center;
    line-height: 1;
}

/*.common_btn:hover:not(:disabled) {*/
/*    border-color: #a0a0a0;*/
/*}*/

.common_btn:disabled {
    cursor: not-allowed;
    border-color: #D3D3D3;
}

.common_btn.btn_text {
    background-color: #fff;
    color: #000;
}

/*.common_btn.btn_text:hover:not(:disabled) {*/
/*    background-color: #f0f0f0;*/
/*}*/

.common_btn.btn_text:disabled {
    background-color: var(--disabled-bg-color);
    color: var(--disabled-color);
    border: 1px solid var(--color-grey-7);
    box-shadow: none;

}
/* 공통 버튼 - 기본 속성 정의 끝 */

/* 공통 버튼 - btn_solid1 속성정의 시작 */
.common_btn.btn_solid1 {
    background-color: #89B4FF;
    color: #fff;
    border-color: #89B4FF;
}

/*.common_btn.btn_solid1:hover:not(:disabled) {*/
/*    background-color: #6fa0e6;*/
/*    border-color: #6fa0e6;*/
/*}*/

.common_btn.btn_solid1:disabled {
    background-color: #a0c4ff;
    color: #fff;
    border-color: #a0c4ff;
}
/* 공통 버튼 - btn_solid1 속성정의 끝 */

/* 공통 버튼 - btn_solid2 속성정의 시작 */
.common_btn.btn_solid2 {
    background-color: #384366;
    color: #fff;
    border-color: #384366;
}

/*.common_btn.btn_solid2:hover:not(:disabled) {*/
/*    background-color: #2c344d;*/
/*    border-color: #2c344d;*/
/*}*/

.common_btn.btn_solid2:disabled {
    background-color: #6c7a91;
    color: #fff;
    border-color: #6c7a91;
}
/* 공통 버튼 - btn_solid2 속성정의 끝 */

/* 공통 버튼 - btn_solid3 속성정의 시작 */
.common_btn.btn_solid3 {
    background-color: var(--main-color-1);
    color: #fff;
    border-color: var(--main-color-1);
}

.common_btn.btn_solid3:disabled {
    background-color: #5a5d75;
    color: #fff;
    border-color: #5a5d75;
}
/* 공통 버튼 - btn_solid3 속성정의 끝 */

/* icon svg 정의 */
.common_btn .icon svg {
    /*width: 24px;*/
    /*height: 24px;*/
}

.common_btn .icon svg path,
.common_btn .icon svg circle,
.common_btn .icon svg line,
.common_btn .icon svg polyline,
.common_btn .icon svg polygon,
.common_btn.btn_icon_only svg path,
.common_btn.btn_icon_only svg circle,
.common_btn.btn_icon_only svg line,
.common_btn.btn_icon_only svg polyline,
.common_btn.btn_icon_only svg polygon {
    stroke: currentColor;
    fill: none;
}

.common_btn.btn_icon_left {
    padding-left: 20px;
}

.common_btn.btn_icon_right {
    padding-right: 20px;
}

/* 아이콘과 텍스트 버튼 (왼쪽 아이콘) */
.common_btn.btn_icon_left .icon {
    margin-right: 3.5px;
}

.common_btn.btn_icon_right .icon {
    margin-left: 3.5px;
}

/* 아이콘만 있는 버튼 */
.common_btn.btn_icon_only {
    width: 44px;
    padding: 0;
}

.common_btn.btn_icon_only svg {
    width: 24px;
    height: 24px;
}

.common_btn.btn_icon_only:disabled {
    cursor: not-allowed;
    background: #E9E9E9;
    border: 1px solid #D3D3D3;
    color: #A5A5A5;
    box-shadow: none;
}

/* Popup Button 스타일 시작 */
.common_popup_btn {
    width: 100px;
    height: 38px;
    border-radius: 6px;
    font-size: 13px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #dcdcdc;
    color: #000;
    box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1), 0px 1px 4px rgba(12, 12, 13, 0.05);
}

.common_popup_btn_default {
    background-color: var(--main-color-1);
    color: white;
    border-color: var(--main-color-1);
    outline: none;
}

.common_popup_btn_default:disabled {
    background-color: var(--disabled-color);
    color: #fff;
    border-color: var(--disabled-color);
}

.common_popup_btn_cancel {
    background-color: #fff;
    color: var(--text-color);
    outline: none;
    border: none;
}

.common_popup_btn_cancel:disabled {
    color: var(--disabled-color);
    box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1), 0px 1px 4px rgba(12, 12, 13, 0.05);
}

/* Popup Button 스타일 끝 */
/* 기본 Button 스타일 정의 끝 */


/* 토글 스위치 스타일 시작 */
.common_toggle_switch {
    display: flex;
    align-items: center;
}

.common_toggle_switch.align_center {
    justify-content: center;
}

.common_toggle_switch .toggle_checkbox {
    display: none;
}

/* 한국어 - 사용 미사용일 때 해당 kor 클래스를 toggle-label에 붙임 */
.common_toggle_switch .toggle_label.kor {
    width: 87px;
}

.common_toggle_switch .toggle_label {
    width: 77px;
    height: 35px;
    background-color: #E9E9E9;
    border-radius: 70px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    padding: 0 5px;
    overflow: hidden; /* 내용이 넘칠 경우 숨김 */
}

.common_toggle_switch .toggle_label .toggle_text {
    font-size: 12px;
    font-weight: 700;
    color: #A5A5A5;
    transition: all 0.3s;
    position: absolute;
    width: 100%;
    text-align: center;
}

.common_toggle_switch .toggle_label .toggle_circle {
    width: 25px;
    height: 25px;
    background-color: #fff;
    border-radius: 70px;
    position: absolute;
    transition: all 0.3s;
}

/* Toggle Disabled 시작 */
/* Disabled 상태의 토글 레이블 */
.common_toggle_switch .toggle_checkbox:disabled + .toggle_label {
    background-color: #b0b0b0; /* 비활성화된 회색 */
    cursor: not-allowed; /* 비활성화된 상태를 나타내는 커서 */
    opacity: 0.6; /* 약간 투명하게 */
}

/* Disabled 상태의 토글 텍스트 */
.common_toggle_switch .toggle_checkbox:disabled + .toggle_label .toggle_text {
    color: #7a7a7a; /* 텍스트 색상을 더 어둡게 */
}

/* Disabled 상태의 토글 원 */
.common_toggle_switch .toggle_checkbox:disabled + .toggle_label .toggle_circle {
    background-color: #d3d3d3; /* 더 연한 회색 */
}
/* Toggle Disabled 끝 */


/* OFF 상태 */
.common_toggle_switch .toggle_checkbox + .toggle_label .toggle_text {
    left: 20px; /* 텍스트를 오른쪽에 위치 */
}
.common_toggle_switch .toggle_checkbox + .toggle_label .toggle_circle {
    left: 5px;
}

/* ON 상태 */
.common_toggle_switch .toggle_checkbox:checked + .toggle_label {
    background-color: #2f3b69;
}
.common_toggle_switch .toggle_checkbox:checked + .toggle_label .toggle_text {
    color: #fff;
    left: -20px; /* 텍스트를 왼쪽에 위치 */
}
.common_toggle_switch .toggle_checkbox:checked + .toggle_label .toggle_circle {
    left: calc(100% - 30px);
}
/* 토글 스위치 스타일 끝 */


/* 기본 테이블 스타일 정의 시작 */
.common_table {
    font-size: 14px;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    table-layout: fixed;
    border-bottom: 2px solid #E4EAFD;
}

.common_table th, .common_table td {
    text-align: left;
    padding: 6px 22px;
    height: 53px;
    border-top: 1px solid #E4EAFD;
    border-bottom: 1px solid #E4EAFD;
}

.common_table th {
    border-top: none;
    background-color: #E4EAFD;
    color: var(--text-color);
    font-weight: 700;
    font-size: 14px;
}

/* 헤더에 border-radius 추가 */
.common_table th:first-child {
    border-top-left-radius: 6px;
}

.common_table th:last-child {
    border-top-right-radius: 6px;

}

.common_table td {
    background-color: var(--white-color);
    font-size: 13px;
}

/* No Data 스타일 */
.common_table .no_data {
    padding: 25px 0;
    align-items: center;
    color: #999;
    text-align: center;
}

.common_table .no_data img {
    margin-bottom: 16px;
    border-radius: 50%;
    display: inline-block;
}

/* Hover 테이블 스타일 */
.common_table tbody tr:hover td {
    background: var(--hover-color);
}
/* 기본 테이블 스타일 정의 끝 */


/* vpn 연결 state 스타일 정의 시작  */
.common_state {
    height: 35px;
    padding: 7px 15px;
    cursor: default;
    pointer-events: none;  /* 클릭을 비활성화 */
    border-radius: 100px;
    display: flex;
    font-weight: 500;
    align-items: center;
    background-color: transparent;
    position: relative;
    border: 1px solid #A8ADC2;
    white-space: nowrap;
}

.common_state.disconnected,
.common_state.normal,
.common_state.warning,
.common_state.unconfirmed,
.common_state.error{
    gap: 10px;
}

.common_state.clock {
    border: 1px solid #ddd;
    background: white;
    gap: 5px;
}

.common_state.running,
.common_state.stop {
    gap: 5px;
}

.common_state.disconnected,
.common_state.stop,
.common_state.offline {
    background-color: rgba(255, 205, 205, 0.2);
    border: 1px solid #FFCDCD;
}

.common_state.normal,
.common_state.running,
.common_state.online {
    background-color: rgba(204, 240, 235, 0.2);
    border: 1px solid #CCF0EB;
}

.common_state.warning {
    background-color: #FDF1C333;
    border: 1px solid #FDF1C3;
}

.common_state.error {
    background-color: #FDDDC233;
    border: 1px solid #FDDDC2;
}

.common_state.unconfirmed {
    background-color: #FAFAFA;
    border: 1px solid #E6E6E6;
}

.common_state::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center;
}

/* 기본 ::after 설정 */
.common_state::after {
    content: attr(data-text);
}

.common_state.disconnected::after {
    content: '끊김';
}
.common_state.unconfirmed::after {
    content: '확인불가';
}
.common_state.normal::after {
    content: '정상';
}
.common_state.warning::after {
    content: '경고';
}

.common_state.error::after {
    content: '에러';
}
.common_state.disconnected::before {
    background-image: url('/images/icons/ico_state_disconnect.svg');
}

.common_state.normal::before {
    background-image: url('/images/icons/ico_state_normal.svg');
}
.common_state.unconfirmed::before {
    background-image: url('/images/icons/ico_state_unconfirmed.svg');
}
.common_state.warning::before {
    background-image: url('/images/icons/ico_state_warn.svg');
}

.common_state.error::before {
    background-image: url('/images/icons/ico_state_error.svg');
}
.common_state.clock::before {
    width: 30px; /* 아이콘의 너비 */
    height: 30px; /* 아이콘의 높이 */
    background-image: url('/images/icons/ico_state_clock.svg');
}
.icon_unconfirmed {
    width: 30px; /* 아이콘의 너비 */
    height: 30px; /* 아이콘의 높이 */
    background-image: url('/images/icons/ico_state_unconfirmed.svg');
    background-repeat: no-repeat;
    background-position: center;
}
.icon_normal {
    width: 30px; /* 아이콘의 너비 */
    height: 30px; /* 아이콘의 높이 */
    background-image: url('/images/icons/ico_state_normal.svg');
    background-repeat: no-repeat;
    background-position: center;
}
.icon_disconnected {
    width: 30px; /* 아이콘의 너비 */
    height: 30px; /* 아이콘의 높이 */
    background-image: url('/images/icons/ico_state_disconnect.svg');
    background-repeat: no-repeat;
    background-position: center;
}
.icon_warning {
    width: 30px; /* 아이콘의 너비 */
    height: 30px; /* 아이콘의 높이 */
    background-image: url('/images/icons/ico_state_warn.svg');
    background-repeat: no-repeat;
    background-position: center;
}
.common_state.running::before {
    content: '●';
    color:  #00B69B;
    margin-bottom: 2px;
}
.common_state.stop::before {
    content: '●';
    color:  #E03131;
    margin-bottom: 2px;
}
.common_state.running::after {
    content: 'Connect';
}
.common_state.stop::after {
    content: 'Disconnect';
}
.common_state.online::before {
    content: '●';
    color:  #00B69B;
    margin-bottom: 2px;
}
.common_state.offline::before {
    content: '●';
    color:  #E03131;
    margin-bottom: 2px;
}
.common_state.online::after {
    content: ' Online';
}
.common_state.offline::after {
    content: ' Offline';
}

.state_info_wrapper {
    display: flex;
    justify-content:flex-start;
}
.state_info_wrapper button{
    margin-right: 15px;
}
/* vpn 연결 state 스타일 정의 끝  */


/* layout 시작 */
.content_wrapper {
    padding: 30px 30px 15px 30px;
    border-radius: 20px;
    background: #F9F9F9;
    box-shadow: 0px 4px 14px rgba(218, 218, 218, 0.69);
}

.common_table th.center_align,
.common_table td.center_align,
.vpn_table th.center_align,
.vpn_table td.center_align{
    text-align: center;
}

/* vpn 테이블 스타일 시작 */
.vpn_table {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
    background-color: #FFFFFF;
    margin-bottom: 14px;
    border-bottom: 2px solid #E4EAFD;
    table-layout: fixed;
}

.vpn_table th {
    text-align: left;
    padding: 12px 16px;
    white-space: nowrap;
}

.vpn_table td {
    padding: 7px 16px;
    border-bottom: 1px solid #E4EAFD;
    font-size: 13px;
}

.vpn_table td:has(.common_state){
    padding: 7px 11px;
}

.vpn_table th {
    height: 53px;
    font-weight: 700;
}

/* 헤더에 border-radius 추가 */
.vpn_table .main_header tr th:nth-child(1){
    border-top-left-radius: 8px;
    border-right: 1px solid #CBD6F8;
    border-bottom: 1px solid #CBD6F8;
    background: #E4EAFD;

}

/* 헤더에 border-radius 추가 */
.vpn_table .main_header tr th:nth-child(2){
    background: #E4EAFD;
    border-right: 1px solid #CBD6F8;
    border-bottom: 1px solid #CBD6F8;
}

/* 헤더에 border-radius 추가 */
.vpn_table .main_header tr th:nth-child(3){
    background: #E4EAFD  ;
    border-right: 1px solid #CBD6F8;
    border-bottom: 1px solid #CBD6F8;
}

.vpn_table .main_header tr th:last-child{
    border-top-right-radius: 8px;
    background: #E4EAFD;
    border-bottom: 1px solid #CBD6F8;
}

.vpn_table .main_header tr th{
    font-size: 16px;
}

.vpn_table .sub_header tr th {
    background: #E4EAFD;
}
.vpn_table .sub_header tr th:nth-child(1){
    border-right: 1px solid #CBD6F8;
}

.vpn_table .sub_header tr th:nth-child(6){
    border-right: 1px solid #CBD6F8;
}

.vpn_table .sub_header tr th:nth-child(11){
    border-right: 1px solid #CBD6F8;
}

/* No Data 스타일 */
.vpn_table .no_data {
    padding: 42.5px 0;
    align-items: center;
    color: #999;
    text-align: center;
    height: 159px;
}

.vpn_table .no_data img {
    margin-bottom: 16px;
    border-radius: 50%;
    display: inline-block;
}

/* Hover 테이블 스타일 */
.vpn_table tbody tr:hover td {
    background: #F8F9FA;
}

/* vpn 테이블 스타일 끝 */

/* width, Margin Custom Style 시작 */
.column_70  { width: 70px; }
.column_80  { width: 80px; }
.column_90  { width: 90px; }
.column_100 { width: 100px; }
.column_110 { width: 110px; }
.column_120 { width: 120px; }
.column_125 { width: 125px; }
.column_130 { width: 130px; }
.column_150 { width: 150px; }
.column_170 { width: 170px; }
.column_192 { width: 192px; }
.column_200 { width: 200px; }
.column_269 { width: 269px; }
.column_313 { width: 313px; }
.ml_30 { margin-left: 30px; }
.mr_30 { margin-right: 30px; }
/* width, Margin Custom Style 끝 */


/* font Custom Style 시작 */
.text_main_blue {
    color: var(--main-blue);
}

.text_main_red {
    color : var(--main-red);
}

.text_bold {
    font-weight: 700;
}
/* font Custom Style 끝 */