@charset "UTF-8";

.style1.nav-tabs[role="tablist"] {
    margin-top:00px;
}
.nav-tabs[role="tablist"] {
    margin-top:30px;
}

.multi-li{position: absolute;    top: 63px;}
.subtitle{display:flex; align-items: center; justify-content: space-between; }
.search-box dl{display:flex; align-items: center;  margin-bottom:5px;gap:10px;}
.search-box dl dt{text-align: right;}
.search-box dl label{width:42px;}
.search-box dl dd button{
    cursor: pointer;
    line-height: 1.3;
    background: #0775DB;
    color: #fff;
    padding: 5px 15px;
    text-decoration: none;
    border-radius: 4px;
    bordeR:0;
}
.download-box{display:flex; justify-content: flex-end; margin-bottom:10px;}
.download-box button{
    cursor: pointer;
    line-height: 1.3;
    background: #a1a1a1;
    color: #fff;
    padding: 5px 15px;
    text-decoration: none;
    border-radius: 4px;
    bordeR:0;
    font-size:14px;
}
button:hover{
    background: #012b53 !important;
}


.datagrid-header .datagrid-htable {
    table-layout: auto;
}
.datagrid-view2 .datagrid-body {
    overflow: auto;
}
.toolbar .l-btn-plain{border-width: 1px !important; }
.toolbar .l-btn-plain:hover{padding:1px !important;}
.datagrid-body td button{border-width: 1px; border-radius: 3px;}
.datagrid-body td button:hover{background-color: transparent !important; color:#0775DB; border-color: #0775DB;}

.t-flex{display:flex; align-items: center; justify-content: center; gap:10px;}


/*기관- 문진관리 및 레이아웃*/
#chartdiv {
    width: 100%;
    height: 300px;
    font-size:80%;
}
.tabs {
margin-top: 20px;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}

.step-tab ul{
    position: absolute;
    left: 10px;
    width:100px;
    display:flex; flex-direction: column; list-style-type: none; margin:0; padding:0; gap:5px; margin-top:10px; justify-content: flex-end; margin-top: 55px;}
.step-tab ul li{   
    cursor: pointer;
    line-height: 1.3;
    background: #a1a1a1;
    color: #fff;
    padding: 5px 15px;
    text-decoration: none;
    border-radius: 4px;
    bordeR: 0;
    font-size: 14px;
    height:40px;
    display: flex;
    align-items: center;

}
#content{background-color: #fff;  }
.col-11{
    padding-left:0;
}
    .step-tab ul li:hover,
    .step-tab ul li.on{background: #0775DB;}
    .sub-step{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10px;
        gap:5px;
        list-style-type: none;
        width:auto;
    }
    .sub-step li{
        cursor: pointer;
        line-height: 1.3;
        background: #a1a1a1;
        color: #fff;
        padding: 5px 15px;
        text-decoration: none;
        border-radius: 4px;
        bordeR: 0;
        font-size: 14px;
    }
    #content-display{border:1px solid #ddd; padding:10px; margin-top:10px; width:100%; min-height:430px; overflow-y: auto;    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);}
    .sub-step li:hover,
    .sub-step li.on{background: #0775DB;}
    .munjinq_a dl dt,
    .munjinq_a dl dd{
        display: flex;
        align-items: flex-start;
        gap:10px;
        margin-left: 0;
    }
    .munjinq_a dl dt::before{
        content: "질문";
        display: block;
        color:#0775DB;
        min-width:50px;
    }
    .munjinq_a dl dd::before{
        content: "답변";
        display: block;
        color:#0775DB;
        min-width:50px;
    }
    .munjinq_a dl.m_doc dt::before{
        content: "";
        display: block;
        color:#0775DB;
        min-width:0px;
    }
    .munjinq_a dl.m_doc dd::before{
        content: "";
        display: block;
        color:#0775DB;
        min-width:0px;
    }

    #content-display p{
        margin-bottom:0px;
    }

    .table-bordered>div,
    #content-display table>div{
        margin-top:10px;
    }
    .table-bordered,
    #content-display table{
        width:100%;
        border-collapse: collapse;
        bordeR:1px solid #ddd;
        margin-top: 10px;
    }
    #content-display table thead th,
    #content-display table tbody th{
        background:#d5d5d5;
        color:#000;
        padding:10px;
        text-align:center;
        font-size: 13px;
    }
    table thead th{
        border:1px solid #c1c1c1 !important; 
    }
    .table-bordered thead th,
    .table-bordered tbody th{
        background:#0775DB;
        color:#fff;
        padding:10px;
        text-align:center;
        font-size: 13px;
    }
    #content-display table tbody td,
    .table-bordered tbody td
   {
        border:1px solid #ddd;
        padding:10px;
        font-size: 13px;
        vertical-align: middle;
        text-align: center;
    }
 
    .table-bordered tbody td label,
    #content-display table tbody td label{
        display:inline-flex;
        align-items: center;
        margin-right:5px;
        gap: 10px;
    }
   table input[type="text"],
   dl input[type="text"]{
    height: 32px;
    font-size: 15px;
    border: 0;
    border-radius: 15px;
    outline: none;
    padding-left: 10px;
    padding-right:10px;
    background-color: rgb(233, 233, 233);
    text-align: center;
    max-width:100px;
    }
    .editable input[type="text"]{
        max-width: initial;
        width: auto;
        margin: 0 auto;
        display: block;
        height: calc(1.5em + .75rem + 2px);
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
    table input[type="text"].w100,
    dl input[type="text"].w100{
        max-width:100%;
        width:100%;
        text-align: left;
    }
    table input[type="text"]:focus ,
    dl input[type="text"]:focus { border: solid 2px #D2691E; }
    .btn-group{
        margin-top:20px;
        displaY:flex; 
        justify-content: flex-end;
        gap:10px;
        width:400px;
        margin-left: auto;
        flex-wrap: wrap;
    }
    .complete{
        color:#0083e1;
        font-weight: 700;
    }
    .btn-group button{
        cursor: pointer;
        line-height: 1.3;
        background: #0775DB;
        color: #fff;
        padding: 10px 15px;
        text-decoration: none;
        border-radius: 4px;
        bordeR:0;
        max-width: 100px;
    }
    .btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child){
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .info-text{
        font-size: 12px;

    }

    .check-flex{
        display: flex;
        align-items: center;
        width: 100%;
        height:120px;
    }
    .check-flex label{
        display:flex;
        align-items: center;
        flex-direction: initial;
        text-align: center;
        position: relative;
        width: 100%;
        height:120px;
    }

    .check-flex label span {
        display: block;
        border: 2px solid #e8ebed;
        position: absolute;
        width:100%;
        height:100%;
        top: 0;
        left: 0;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        color: #555;
        background-color: #fff;
        box-sizing: border-box;
    }

    .check-flex input[type="checkbox"] {
        display: none;
    }
    .check-flex input[type="checkbox"]:checked + span,
    .check-flex input[type="checkbox"]:focus + span {
        border: 2px solid #0775DB !important;
        color: #0775DB;
    }
 

    .checkbox-container {
        display: flex;
        flex-direction: column;
    }
    .checkbox-container dt{
        display: inline;
        font-size: 18px;
        padding: 5px;
        padding-bottom: 10px;
        font-weight: 600;
    }
    .checkbox-container dd{
        margin-left:0;
        width:100%;
        position: relative;
    }

    .checkbox-container label {
        position: relative;
        margin-bottom: 10px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 100%;
        height: 55px;
        box-sizing: content-box;
    }
    .checkbox-container label+label {
        margin-left: 10px;
    }
    .checkbox-container dd label+label{ margin-left: 0px;}
    .checkbox-container label span {
        display: block;
        border: 2px solid #e8ebed;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding: 15px;
        border-radius: 5px;
        cursor: pointer;
        color: #555;
        background-color: #fff;
        box-sizing: border-box;
    }
    .checkbox-container label:hover span { 
        border: 2px solid #0775DB !important;
        color: #0775DB;
    }
    .checkbox-container input[type="radio"] {
        display: none;
    }
    .checkbox-container input[type="radio"]:checked + span,
    .checkbox-container input[type="radio"]:focus + span {
        border: 2px solid #0775DB !important;
        color: #0775DB;
    }

    input[type=checkbox]{
        -webkit-appearance: none; 
        -moz-appearance: none; 
        appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #ccc; 
        border-radius: 2px;
        outline: none; 
        cursor: pointer;
    }
   input[type=radio]{
        -webkit-appearance: none; 
        -moz-appearance: none; 
        appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #ccc; 
        border-radius: 50%;
        outline: none; 
        cursor: pointer;
    }
    input[type='radio']:checked,
    input[type='checkbox']:checked {
        background-color: #0775DB; 
        border: 3px solid white; 
        box-shadow: 0 0 0 1.6px #0775DB;
      }
      label{
        display:flex;
        align-items: center; 
        gap:5px;
      }
    
      .nav-tabs .nav-link{
        color:#000;
      }
      .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
        border-color: #1b4772 #1b4772 #fff;
      }
      .nav-tabs{
        border-bottom: 1px solid #1b4772;
      }
#searchForm button{
    line-height: 1.2em;
    font-weight: 500;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s all;
    text-decoration: none !important;
    border-radius: 6px;
    border-width: 1px;
    background: #1E74FD !important;
    border-color: #1E74FD !important;
    color: #ffffff !important;
    height: 30px;
}

 

.paginator {
    /* 원하는 CSS 스타일을 여기에 추가 */
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.paginator a {
    color: #007bff;
    text-decoration: none;
    margin: 0 5px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
}

.paginator a:hover {
    background-color: #e9ecef;
}

.paginator a.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}


.modal-content{
    width:300px !important;
}


#popup-content p{
    margin-bottom:10px;
}

#popup-textarea2{
    padding:20px;
    border:1px solid #ddd;
    margin-bottom:30px;
}
.ans2:hover{background-color: transparent !important;}
.selected { background-color:#0083e1 !important; color:#fff !important;}
select { padding:3px; }

.sum-box{
    display:flex; 
    border:1px solid #1646ad;
    width: fit-content;
    padding:15px;
    border-radius: 10px;
    font-weight: 700;
    gap:15px;
}

.form-check.form-switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-check-input.switch-input {
    display: none;
}

.form-check-label {
    display: block;
    position: relative;
    width: 60px;  /* Width of the switch */
    height: 30px;  /* Height of the switch */
    background: #78b530;
    border-radius: 30px;  /* Half of the height to make it round */
    transition: background 0.4s;
    cursor: pointer;
}

.form-check-label::after {
    content: "";
    position: absolute;
    left: 2.5px;
    top: 50%;
    width: 25px;  /* Slightly smaller than the height */
    height: 25px;  /* Slightly smaller than the height */
    border-radius: 50%;
    background-color: #fff;
    transform: translateY(-50%);
    box-shadow: 1px 3px 4px rgba(0,0,0,0.1);
    transition: all 0.4s;
}

.form-check-label::before {
    content: "NO";
    font-size: 12px;  /* Adjusted font size */
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    left: 35px;  /* Adjusted for smaller switch */
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.4s;
}

.form-check-input:checked + .form-check-label {
    background: #e5151f ;
}

.form-check-input:checked + .form-check-label::after {
    left: calc(100% - 27.5px);  /* Adjusted for smaller switch */
}

.form-check-input:checked + .form-check-label::before {
    content: "YES";
    color: #fff;
    left: 7px;  /* Adjusted for smaller switch */
}