/* Body Styles */
#tableThuTuc table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    width: 100%;
}

    #tableThuTuc table th,
    #tableThuTuc table td {
        border: 1px solid #ccc;
        padding: 10px;
        font-size: 13px;
    }

    #tableThuTuc table tfoot td {
        padding: 5px;
        font-size: 12px;
    }

    #tableThuTuc table td label {
        color: #333;
    }

    #tableThuTuc table th {
        /*background-color: #f3f3f3;*/
    }

#tableThuTuc .pagination {
    display: inline-block;
    padding-left: 0;
    margin: 1px 0 !important;
    border-radius: 4px;
}

@media only screen and (max-width: 768px) {
    #leftMenu {
        display: none
    }

    .control-label {
        padding-top: 7px;
        margin-bottom: 5px;
        text-align: left;
    }
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
        width:100% !important;
    }
    /* Table full chiều rộng màn hình, cách đều trái phải 10px */
    #tableThuTuc table {
        margin: 0 10px !important;
        width: auto !important;
    }

        /* Cho <thead> thoát khỏi vùng hiển thị (ẩn các <th>) */
        #tableThuTuc table thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        #tableThuTuc table tr:nth-child(odd) {
            background: #f8f9fa;
            padding: 10px 0px;
        }

        #tableThuTuc table td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;            
        }

            /* Chèn dữ liệu <th> vào trước từng mục của <td> */
            #tableThuTuc table td:before {
                position: absolute;
                top: 0;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }

            #tableThuTuc table td:nth-of-type(1):before {
                content: "STT";
            }

            #tableThuTuc table td:nth-of-type(2):before {
                content: "Mã thủ tục";
            }

            #tableThuTuc table td:nth-of-type(3):before {
                content: "Thủ tục";
            }

            #tableThuTuc table td:nth-of-type(4):before {
                content: "Lĩnh vực";
            }

            #tableThuTuc table td:nth-of-type(5):before {
                content: "Mức độ";
            }

            #tableThuTuc table td:nth-of-type(6):before {
                content: "Hướng dẫn";
            }

}

/* Sidebar Styles */
#body-row {
    margin-left: 0;
    margin-right: 0;
}

#sidebar-container {
    min-height: 100vh;
    background-color: #333;
    padding: 0;
}

/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
    width: 230px;
}

.sidebar-collapsed {
    width: 60px;
}

/* Menu item*/
#sidebar-container .list-group a {
    height: 50px;
    color: white;
}

/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 30px;
}

.sidebar-submenu {
    font-size: 0.9rem;
}

/* Separators */
.sidebar-separator-title {
    background-color: #333;
    height: 35px;
}

.sidebar-separator {
    background-color: #333;
    height: 25px;
}

.logo-separator {
    background-color: #333;
    height: 60px;
}

/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
    content: " \f0d7";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
    content: " \f0da";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
    float: right;
    padding-right: 8px;
}
/* Style the search field */
.form-inline {
    display: flex;
    margin-bottom: 15px;
}

    .form-inline input[type=text], select, textarea {
        height: 2.65rem;
        font-size: 14px;
        border: 1px solid #ddd;
        float: left;
        width: 80%;
        /*background: #f1f1f1;*/
    }

    /* Style the submit button */
    .form-inline button {
        float: left;
        width: 20%;
        height: 2.6rem;
        padding: 1px;
        background: #337ab7;
        margin-left: 15px;
        color: white;
        font-size: 14px;
        border: 1px solid grey;
        border-left: none; /* Prevent double borders */
        cursor: pointer;
    }
/* Style the search field */
.form-body input[type=text], select, textarea {
    height: 2.65rem;
    font-size: 14px;
    border: 1px solid #ddd;
    float: left;
    width: 100%;
    /*background: #f1f1f1;*/
}


.form-body button:hover, .form-inline button:hover {
    background: #0b7dda;
}

/* Clear floats */
.form-body::after {
    content: "";
    clear: both;
    display: table;
}
/* Pagination links */
table.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

    /* Style the active/current link */
    table.pagination a.active {
        background-color: dodgerblue;
        color: white;
    }

    /* Add a grey background color on mouse-over */
    table.pagination a:hover:not(.active) {
        background-color: #ddd;
    }

#ChiTietThuTuc ul, ol {
    margin-bottom: 1px;
    margin-left: 1px;
}

    #ChiTietThuTuc ul > li > a, p {
        margin-bottom: 1px;
        margin-left: 1px;
        font-size: 14px;
        font-weight: 400;
    }

.nav-blue {
    overflow: hidden;
    contain: content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #e7ecf7;
}

    .nav-blue .nav-tabs {
        border-bottom: 1px solid #e7ecf7;
        height: 39px;
    }

        .nav-blue .nav-tabs > li.active > a, .nav-blue .nav-tabs > li.active > a:focus, .nav-blue .nav-tabs > li.active > a:hover {
            color: #555;
            cursor: default;
            font-size: 14px;
            background: #0a72ba;
            color: #fff;
            border: 1px solid #ddd;
            border-bottom-color: transparent;
        }

.tab_p5 {
    padding: 5px;
}