body.modal-open {
    overflow-y: hidden;
}

/* login ----------------------------------------------------------*/
.login_page {
    width: 100%;
    background-color: white;
    padding-top: 12%;
    padding-bottom: 40px;
    border-radius: 20px;
}
.login_blk {
    width: 400px;
    margin: auto;
}
.login_img {
    text-align: center;
    margin-bottom: 35px;
}
.login_img img{
    
}
.login_fp {
    text-align: center;
    padding-top: 5px;
}
.login_fp:hover{
    text-decoration:underline;
    cursor:pointer;
}
.login_btn {
    margin-top: 20px;
}
.login_btn button {
    width: 100%;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.5px;
}
@media only screen and (min-width: 300px) and (max-width: 499px) {
    .login_blk {
        width: 280px;
    }
}

/* login popup ---------------------------------------------------*/
.login_modal_popup {
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10000000 !important;
    position: fixed;
    opacity: 1 !important;
    top: 0;
}
.login_modal_popup .modal-content {
	background-color: transparent !important;
    border: none;
}
.login_modal_popup .modal-dialog {
    position: relative !important;
    top: 50% !important;
    transform: translateY(-80%) !important;
}

/* Popup Message  -----------------------------------------------*/
.msg_popup {
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10000000 !important;
    position: fixed;
    opacity: 1 !important;
    top: 0;
}
.msg_popup .modal-content {
    background-color: transparent !important;
    border: none;
}
.msg_popup .modal-dialog {
    position: relative !important;
    top: 50% !important;
    transform: translateY(-80%) !important;
}
.msg_popup_blk {
    padding: 5px 0px 30px 0px;
    background-color: white;
    border-radius: 20px;
}
.msg_popup_close {
    width: 100%
}
.msg_popup_close_x {
    width: 100%;
    text-align: right;
}
.msg_popup_x {
    float: right;
    text-align: center;
    font-family: sans-serif;
    padding: 6.5px 20px 4px 20px;
    color: #373737;
    font-size: 22px;
}
.msg_popup_x:hover {
    color: #0D6EFD;
    cursor: pointer;
}
.msg_popup_txt {
    text-align: center;
    font-size: 20px;
    padding: 60px 20px 25px 20px;
}
.msg_popup_btn {
    width: 100%;
    text-align: center;
    margin-top: 40px;
}
.msg_popup_btn button{
    width:120px;
    margin-right:15px;
}

/* main page (headers - sidebar - page view -------------------*/
.main_container {
    width: 100%;
    min-height: 100vh;
}
.main_headers {
    width: 100%;
    height: 66px;
}
.main_sidebar_pageview {
    width: 100%;
    min-height: 100%;
}
.main_sidebar {
    display: inline-block !important;
    vertical-align: top !important;
    width: 280px;
    min-height: calc(99vh - 62px);
}
.main_pageview {
    display: inline-block !important;
    vertical-align: top !important;
    width: calc(99.7% - 280px);
    min-height: calc(99vh - 62px);
}
.main-100 {
    width: 100% !important;
}
@media only screen and (min-width: 800px) and (max-width: 999px) {
    
}
@media only screen and (min-width: 1000px) and (max-width: 1499px) {
    .main_pageview {
        width: calc(99.5% - 280px);
    }
}

/* header -----------------------------------------------------*/
.header_blk {
    width: 100%;
    padding: 15px 0px 15px 0px;
    background-color: white;
    position: fixed;
    box-shadow: 0px 1px 4px #c5c5c5;
}
.header_sub_blk {
    width: 1300px;
    margin: auto;
}
.header_comp {
    width: 39%;
    display: inline-block;
    vertical-align: top;
}
.header_comp_img {
    
}
.header_comp_img:hover{
    cursor:pointer;
}
.header_comp_img img{
    width: 20px;
}
.header_right {
    width: 60%;
    display: inline-block;
    vertical-align: top;
}
.header_list {
    width: 100%;
    text-align: right;
    margin-top: 22px;
}
.header_item {
    font-weight: 500;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 25px 6px 25px;
}
.hea_item_active {
    color: #0D6EFD;
}
.hea_item_active:hover{
    color: #0D6EFD;
    text-decoration:none!important;
}
.header_item:hover {
    cursor: pointer;
    text-decoration: underline;
}

/* sidebar --------------------------------------------------*/
.sidebar_main {
    width: 280px !important;
    border-spacing: 0px !important;
    border-collapse: collapse;
}
.sidebar_blk {
    position: fixed;
    background-color: white;
    border-right: 1px solid #cfcfcf;
    width: 280px !important;
    height: 100vh;
    z-index: 500;
}
.sidebar_list{
    width: 100%;
    height: 300px;
    padding: 0px 25px 20px 25px;
}
.sidebar_accordion{

}
.sidebar_accordion_item {
    background-color: transparent !important;
    border-color: transparent !important;
}
.sidebar_accordion_header{

}
.sidebar_accordion_btn {
    color: black!important;
    background-color: transparent !important;
}
.sidebar_accordion_btn:hover{
    background-color:#f1f1f1!important;
    cursor:pointer;
}
.sidebar_accordion_btn:focus{
    box-shadow: none !important;
}
.sidebar_accordion_list{

}
.sidebar_accordion_body {
    padding: 0px 20px !important;
}
.sidebar_accordion_page {
    color: black;
    padding: 5px 0px 5px 10px;
}
.sidebar_accordion_page:hover{
    background-color:#f1f1f1;
    cursor:pointer;
}
.sidebar_item {
    color: black;
    padding: 15px 20px 15px 20px;
}
.sidebar_item_active {
    font-weight:500;
}
.sidebar_item:hover{
    background-color:#f1f1f1;
    cursor:pointer;
}

/* header bcs ---------------------------------------------*/
.bcs_header {
    width: 100%;
    height: 67px;
    background-color: white;
    border-bottom: 1px solid #cfcfcf;
    position: fixed;
    top: 0px;
    z-index: 499;
}
.bcs_header_logo {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding: 9.5px 0px 0px 40px;
}
.bcs_header_logo img{
    width: 175px;
}
.bcs_header_right {
    width: 49%;
    display: inline-block;
    vertical-align: top;
    text-align: right;
}
.bcs_header_drop button {
    min-width: 160px;
    height: 66px;
    border-color: transparent;
    background-color: transparent;
    text-align: center;
}
.bcs_header_drop button:hover{
    cursor: pointer;
    background-color: #f1f1f1;
}
.bcs_header_drop .dropdown-menu {
    background-color: white;
    margin-top: -2px !important;
    border-radius: 0px;
    padding: 0px;
    border-top: none;
}
.bcs_header_drop_i {
    display: inline-block;
    vertical-align: top;
    font-size: 23px;
}
.bcs_header_drop_btn{

}
.bcs_header_drop_n {
    display: inline-block;
    vertical-align: top;
    padding-top: 5px;
    font-size: 17px;
}
.bcs_header_item {
    padding: 10px 20px 10px 20px;
    text-align: center;
}
.bcs_header_item:hover{
    cursor: pointer;
    background-color: #f1f1f1;
}

/* Page ---------------------------------------------------*/
.page_view {
    
}
.page_blk {
    padding: 10px 12px 40px 12px;
}
.page_view.ng-enter {
    transition: all 0.5s ease-in;
    opacity: 0;
}
.page_view.ng-enter-active {
    transition: all 0.5s ease-in;
    opacity: 1;
}
.page_view.ng-leave {
    transition: all 0.1s ease-out;
    opacity: 1;
}
.page_view.ng-leave-active {
    transition: all 0.1s ease-out;
    opacity: 0;
}
.page_header {
    padding-bottom: 10px;
}
.page_header_ttl {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    font-size: 30px;
    font-weight: 700;
    color: #474747;
    text-transform: uppercase;
}
.page_header_btn {
    width: 49%;
    display: inline-block;
    vertical-align: top;
    padding-top: 10px;
    text-align: right;
}
.page_header_btn button{
    min-width:120px;
    margin-left:8px;
}
.page_title {
    font-size: 30px;
    font-weight: 700;
    color: #474747;
    text-transform: uppercase;
}
.page_sub_title {
    font-size: 30px;
    font-weight: 400;
    color: #474747;
}

/* form detail new edit ---------------------------------*/
.form_det {
    
}
.form_det_info {
    width: 900px;
    display: inline-block;
    vertical-align: top;
}
.form_det_div {
    width: 425px;
    display: inline-block;
    vertical-align: top;
    margin: 0px 20px 15px 0px;
}
.form_det_div_full {
    width: 874px;
    display: inline-block;
    vertical-align: top;
    margin: 0px 0px 30px 0px;
}
.form_det_logo {
    width: 300px;
    display: inline-block;
    vertical-align: top;
}
.form_det_img {
    text-align: left;
}
.form_det_img img {
    width: 150px;
    height: 150px;
    border-radius: 20px;
}
.form_det_img_area {
    text-align: left;
}
.form_det_img_area img {
    width: 100%;
    height: 100%;
}
.form_det_table {
    margin-top: 25px;
}
.form_det_sub_ttl {
    font-size: 22px;
    color: #3f3f3f;
    font-weight: 700;
    padding: 5px 10px 0px 0px;
}
.form_det_files {
    margin: 25px 0px;
}
.form_ttl {
    height: 24px;
    font-weight: 500;
}
.form_txt {
    height: 24px;
}
.form_val_msg{
    font-size: 17px;
    color: red;
}
.form_div_line{
    border-bottom: 1px solid #d5d5d5;
    margin-right: 60px;
}
.form_det_btns {
    margin-top: 20px;
}
.form_det_btns button{
    min-width: 120px;
    margin-right: 8px;
}
.form_search_list {
    display: inline-block;
    vertical-align: top;
    width: 427px;
    padding-top: 5px;
    margin: 0px 20px 30px 0px;
}
.form_search_list_inp {
    display: inline-block;
    vertical-align: top;
    width: 380px;
}
.form_search_list_btn {
    display: inline-block;
    vertical-align: top;
}
.form_popup_gen_exp {
    min-height: 200px;
    background-color: white;
    margin: auto !important;
    border-radius: 20px;
    padding: 25px 0px 30px 25px;
}
.form_modal {
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10000000 !important;
    position: fixed;
    opacity: 1 !important;
    top: 0;
    --bs-modal-width: 2000px !important;
}
.form_modal .modal-content {
	background-color: transparent !important;
    border: none;
}
.form_modal .modal-dialog {
    position: relative !important;
    top: 50% !important;
    transform: translateY(-55%) !important;
}
.form_det_top_tbl_blk {
    margin-top: 40px;
}
.form_det_top_tbl_div {
    width: 100%;
    display: inline-flex;
    border-bottom: 1px solid #b5b5b5;
    padding-bottom: 10px;
    padding-right: 20px;
}
.form_det_top_tbl_ttl {
    width: 50%;
    font-size: 22px;
    color: black;
    font-weight: 500;
    padding: 5px 10px 0px 0px;
}
.form_det_top_tbl_btn {
    width: 50%;
    text-align: right;
}
.form_det_top_tbl_btn button{
    min-width:100px;
    margin-left:10px;
}

/* type header directive ------*/
.type_headed_list {
    width: 380px;
    padding: 7px;
}
.type_headed_list span{
    padding-left: 13px;
}
.dropdown-menu .active {
    background-color: #e5e5e5;
    cursor: pointer;
}

/* table filters --------------*/
.table_filters {
}
.table_fil_search_by {
    display: inline-block;
    vertical-align: top;
    padding-right: 10px;
}
.table_fil_search_by select{
    width: 200px;
}
.table_fil_dates {
    display: inline-block;
    vertical-align: top;
    padding-top: 24px;
}
.table_fil_dates_flex{
    display:inline-flex;
}
.table_fil_dates_flex input {
    width: 200px;
}
.table_fil_dates_flex span{
    padding: 6px 10px 0px 10px;
}
.table_fil_numbers {
    display: inline-block;
    vertical-align: top;
    padding-top: 24px;
}
.table_fil_numbers_flex {
    display: inline-flex;
}
.table_fil_numbers_flex input {
    width: 200px;
}
.table_fil_numbers_flex span{
    padding: 6px 10px 0px 10px;
}
.table_fil_input {
    display: inline-block;
    vertical-align: top;
    padding-top: 24px;
}
.table_fil_input input{
    width: 300px;
}
.table_fil_select {
    display: inline-block;
    vertical-align: top;
    padding-top: 24px;
}
.table_fil_select select{
    width: 300px;
}
.table_fil_btn {
    display: inline-block;
    vertical-align: top;
    padding-top: 24px;
    padding-left: 10px;
}

/* table ----------------------*/
.table_page{

}
.table_blk {
    width: 100%;
    padding-top: 10px;
}
.table_footer{

}
.table_ft_numbers {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    text-align: right;
}
.table_ft_num_txt{

}
.table_ft_num_txt span{
    font-weight: 700;
}
.table_w10{
    width:10%;
}
.table_w40 {
    width: 40%;
}
.table_blk table thead tr th {
    color: #1a1a1a;
    font-weight: 500;
}
.pagination_blk {
    width: 49%;
    display: inline-block;
    vertical-align: top;
}
.pagination_blk .pagination{
    
}
.pagination_blk .pagination .pagination-prev{
    border: 1px solid #d9d9d9;
    border-right: none;
    border-radius: 5px 0px 0px 5px;
}
.pagination_blk .pagination .pagination-page{
    border: 1px solid #d9d9d9;
}
.pagination_blk .pagination .pagination-next{
    border: 1px solid #d9d9d9;
    border-left: none;
    border-radius: 0px 5px 5px 0px;
}
.pagination_blk .pagination li {
    padding: 3px 0px 3px 0px;
}
.pagination_blk .pagination li a{
    color: #454545;
    text-decoration: none;
    padding: 5px 12px 5px 12px;
}
.pagination_blk .pagination li a:hover{
    cursor: pointer;
    background-color: #e9e9e9;
}

/* image upload directive --------------*/
.img_up_blk {
}
.img_up_drop {

}
.img_up_div {
    display: inline-block;
    vertical-align: top;
}
.img_up_item {
    position: relative;
}
.img_up_item img {
    width: 150px;
    height: 150px;
}
.img_up_item_btn {
    position: absolute;
    top: 5px;
    right: 5px;
    border: 0px !important;
    background-color: white !important;
    border-radius: 20px;
}
.img_up_item_i {
    color: #0D6EFD;
    font-size: 20px;
    padding-left: 1px;
    border: 0px;
}
.img_up_item_i:hover{
    color: #dc3545;
    cursor:pointer;
}
.prog_bar {
    margin-top: 8px;
}
.img_up_btn {
    margin-top:8px;
}
.img_up_btn button{
    width:150px;
}

/* file upload directive ---------------*/
.file_up_blk {
    width: 100%;
    min-height: 14vh;
}
.file_up_item {
    min-width: 100px;
    height: 130px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    font-size: 50px !important;
    margin-right: 15px;
}
.file_up_icon {
    width: 85px !important;
    margin: auto;
    color: #555555;
}
.file_up_item img {
    width: 85px!important;
}
.file_up_name {
    font-size: 14px!important;
}
.file_up_icons {
    width: 100%;
    font-size: 20px!important;
}
.file_up_icons i{
    width: 100%;
    font-size: 21px !important;
    color: #323232;
}
.file_up_icons i:hover{
    cursor:pointer;
    color:blue;
}

/* multiple files upload directive -----*/
.mul_up_files_blk{

}
.mul_up_files_drop {
    margin-top: 10px;
}
.mul_up_files_div {
    display: inline-block;
    vertical-align: top;
    margin-right: 15px;
}
.mul_up_files_item {
    position: relative;
}
.mul_up_files_item img{
    width: 120px;
    height: 120px;
    border-radius: 15px;
}
.mul_up_files_btn_x {
    position: absolute;
    top: 1px;
    right: 1px;
    border: 0px !important;
    background-color: white;
    border-radius: 20px;
}
.mul_up_files_btn_x:hover{
    cursor:pointer;
}
.mul_up_files_x {
    color: #0D6EFD;
    font-size: 20px;
    border: 0px;
}
.mul_up_files_x:hover{
    color:#dc3545;
}
.mul_up_file_icon {
    width: 118px;
    height: 118px;
    text-align: center;
    font-size: 75px;
    border: 1px solid #8b8b8b;
    border-radius: 15px;
    color: #595959;
}
.mul_up_file_name {
    width: 118px;
    text-align: center;
}
.mul_up_files_btn {
    margin-top: 5px;
    margin-bottom: 20px;
}
.mul_up_files_btn button{
    width: 120px;
}

/* Icons configuration ------- */
.c7_table_icon.bi-currency-dollar {
    float: left !important;
    margin-top: 7px;
}
.c7_table_icon {
    margin-right: 10px !important;
    font-size: 70% !important;
}
.c7_table_align_r {
    text-align: right !important;
}
.c7_table_align_l {
    text-align: left !important;
}
.c7_table_align_c {
    text-align: center !important;
}

/* Loading */
.c7_loader {
    opacity: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95) !important;
    z-index: 600;
    position: fixed;
    top: 0px;
    left: 0px;
}
.c7_loader.ng-hide {
    opacity: 0;
}
.c7_loader.ng-hide-add,
.c7_loader.ng-hide-remove {
        transition: all linear 0.1s !important;
    }
.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;
    background: transparent;
    border: 3px solid rgba(0,0,0,0);
    border-radius: 50%;
    text-align: center;
    line-height: 150px;
    font-family: sans-serif;
    font-size: 20px;
    color: white;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 10px white;
    box-shadow: 0 0 20px transparent;
}
.ring:before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid white;
    border-right: 3px solid white;
    border-radius: 50%;
    animation: animateC 2s linear infinite;
}
.ringSpan {
    display: block;
    position: absolute;
    top: calc(50% - 2px);
    left: 50%;
    width: 50%;
    height: 4px;
    background: transparent;
    transform-origin: left;
    animation: animate 2s linear infinite;
}
.ringSpan:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    top: -6px;
    right: -8px;
    box-shadow: 0 0 20px white;
}
@keyframes animateC {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
@keyframes animate {
    0% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(405deg);
    }
}

/* ORGANIZAR DAQUI PRA BAIXO */

/* Form validation ------------*/
.spanValidationErrorContainer {
    min-height: 24px;
}
.spanValidationErrorContainer span {
    font-size: 13px;
    color: red;
}
form.ng-dirty input.ng-invalid {
    color: red !important;
}
form.ng-submitted input.ng-invalid {
    border-color: red;
}
form.ng-submitted input.ng-valid {
    border-color: green;
}
form.ng-submitted textarea.ng-invalid {
    border-color: red;
}
form.ng-submitted textarea.ng-valid {
    border-color: green;
}
.validation {
    transition: border-color linear 0.25s;
    transition: opacity linear 0.25s;
}
.validation-not-valid {
    border-color: red !important;
}
.validation-message {
    color: red !important;
    opacity: 1;
}
.validation-message-hide {
    opacity: 0 !important;
    color: red !important;
}