:root{
    --primary-color: #3E60D5;
    --seconder-color: #4564D1;
    --white:#FFF;
    --first-scale-gray-color: #495057;
    --second-scale-gray-color: #939A9F;
    --third-scale-gray-color: #B7BEC4;
    --fourth-scale-gray-color: #5F6368;
    --border-color:#E2E2E2;
    --bs-table-striped-bg: red !important;
    --border-table: #DEE2E6;
    --font-secondary: 14px;
    --modal-header-background: #F15776;
    --btn-cancel:#F2F2F7;
    --btn-cancel-hover:#dcdcdf;
    --btn-excluir-hover:#e24363;
}

.background-primary-color{
    background-color: var(--primary-color);
}

body{
    background-color: #F5F7FA;
    font-family: "Roboto", sans-serif;
}

.container-card-header{
    background-color: #FFFFFF!important;
}


.full-width-container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.btn-primary .material-icons {
    font-size: 24px;
}

.user-menu {
    display: flex;
    align-items: center;
}

.user-menu .material-icons {
    font-size: 24px;
    margin-right: 5px;
}

.user-menu .dropdown-menu {
    left: auto;
    right: 0;
}

.navbar {
    background-color: #4564D1;
}

.nav-link {
    display: flex;
    align-items: center;
}

.nav-link .material-icons {
    margin-right: 5px;
}

.nav-link.active, .nav-link:hover {
    color: #FFFFFF !important;
}

.nav-link:hover{
    color: #FFFFFF !important;
}

.nav-link.home {
    color: #C6D5E3 !important;
}

.nav-link.projetos {
    color: #FFFFFF !important;
}

.nav-link.configuracoes {
    color: #C6D5E3 !important;
}

.navbar-brand{
    color: #FFFFFF !important;
}

.nav-link-tabs{
    color: var(--first-scale-gray-color);
    font-size: 20px !important;
    border: none!important;
}


.nav-link-tabs.active, .nav-link-tabs:hover {
    background: transparent!important;
    color: var(--seconder-color) !important;
    border-bottom: 3px solid var(--seconder-color) !important;
    
}

/* SPACING CUSTOM */
    .w-3{width: 3%;}
    .w-4{width: 4%;}
    .w-5{width: 5%;}
    .w-10{width: 10%;}
    .w-8{width: 8%;}
    .w-21{width: 21%;}
    .w-15{width: 15%;}
    .w-67{width: 67%;}
    .ms-4{margin-right: 4rem !important;}
/* END SPACING CUSTOM */

/* COLOR CUSTOM */
   .color-primary{color: var(--primary-color);}
   .color-white{color: var(--white);}
   .color-first-scale-gray{color: var(--first-scale-gray-color);}
   .color-second-scale-gray{color: var(--second-scale-gray-color);}
   .color-third-scale-gray{color: var(--third-scale-gray-color);}
   .color-fourth-scale-gray{color: var(--fourth-scale-gray-color);}
    /* Buttons */
   .btn-secondary{background: var(--seconder-color);}
    /* Borders */
   .border-bottom{border-bottom: 1px solid var(--border-color);}
   /* Modal */
   .bg-modal-header-error{background-color: var(--modal-header-background);}
   .bg-modal-header-error h5{color: var(--white);}
   .bg-modal-header-error p{color: var(--white)!important;}
   .btn-cancel{background-color: var(--btn-cancel)!important;}
   .btn-cancel:hover{background-color: var(--btn-cancel-hover)!important;}
   .btn-excluir{background-color: var(--modal-header-background)!important;}
   .btn-excluir:hover{background-color: var(--btn-excluir-hover)!important;}
   .btn-excluir{color: var(--white)!important;}


 /* END COLOR CUSTOM */

 /* EVENTS */
 .cursor-pointer{cursor:pointer}
 /* END EVENTS */

 /* HEADER */
 .profile-header{
    position: absolute!important;
    inset: 0px 0px auto auto!important;
    margin: 0px!important;
    left: -6rem !important;
    top: -2.2rem !important;
    transform: translate3d(-62px, 65.4px, 0px)!important;
 }
 .profile-link {
    position: absolute;
    right: 3rem;
    bottom: -25px;
  }
 /* END HEADER */

/* LOGIN */

    .bg-body{
        position: relative;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .bg-body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../images/background.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.4;
        z-index: -1;
    }


    .login-container {
        max-width: 500px;
        margin: 30px auto;
        border: 1px solid #ddd;
        padding-bottom: 3rem;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-color: #FFF;  
    }

    .login-brand h2{
        font-weight: 700;
        font-size: 26px;
    }

    .login-container h3{
        font-weight: 500;
        font-size: 1rem;
        color: var(--first-scale-gray-color);
    }

    .login-container p{
        font-weight: 400;
        font-size: 14px;
        color: var(--second-scale-gray-color);
    }

    .login-container span{
        font-weight: 500;
        font-size: 14px;
        color: var(--first-scale-gray-color);
    }

    .alert-error{
        max-width: 500px;
    }
/* END LOGIN */


/* FORMS */
    form label{
    font-weight: 500!important;
    font-size: 14px!important; 
    color: var(--first-scale-gray-color)!important;
    }

    form input::placeholder{
    font-weight: 400!important;
    font-size: 1rem!important; 
    color: var(--third-scale-gray-color)!important;
    }
/* END FORMS */

/* TITLES */
    h2{
      font-size: 20px;
      font-weight: 500;
    }
    h5, h5.card-title{color: var(--first-scale-gray-color);}
    h6{color: var(--first-scale-gray-color);}
    p{color: var(--first-scale-gray-color);}
    
    .label{font-size: var(--font-secondary);}
    .text-justify{text-align: justify;}
    
/* END TITLES */


/* TABLE */

/* PROJECTS */
#projectsTable.table-striped {
    --bs-table-striped-bg: #F8F9FA !important; /* Vermelho com 20% de opacidade */
    --bs-table-striped-color: var(--first-scale-gray-color) !important; /* Cor do texto dentro das linhas listradas */
    vertical-align: middle !important;
}

#projectsTable {
    --bs-table-bg: var(--white) !important; /* Cor de fundo para as linhas normais */
    --bs-table-color: var(--first-scale-gray-color) !important;
    --bs-table-border-color: var(--border-table) !important;
}
/* END PROJECTS */

/* DETAILS */
#testPlansTable.table-striped {
    --bs-table-striped-bg: #F8F9FA !important; /* Vermelho com 20% de opacidade */
    --bs-table-striped-color: var(--first-scale-gray-color) !important; /* Cor do texto dentro das linhas listradas */
    vertical-align: middle !important;
}

#testPlansTable {
    --bs-table-bg: var(--white) !important; /* Cor de fundo para as linhas normais */
    --bs-table-color: var(--first-scale-gray-color) !important;
    --bs-table-border-color: var(--border-table) !important;
}
/* END DETAILS */

/* TEST CASES */
#testCasesTable.table-striped {
    --bs-table-striped-bg: #F8F9FA !important; /* Vermelho com 20% de opacidade */
    --bs-table-striped-color: var(--first-scale-gray-color) !important; /* Cor do texto dentro das linhas listradas */
    vertical-align: middle !important;
}

#testCasesTable {
    --bs-table-bg: var(--white) !important; /* Cor de fundo para as linhas normais */
    --bs-table-color: var(--first-scale-gray-color) !important;
    --bs-table-border-color: var(--border-table) !important;
}
/* END TEST CASES */

/* TEST RUN */
#testRunsTable.table-striped {
    --bs-table-striped-bg: #F8F9FA !important; /* Vermelho com 20% de opacidade */
    --bs-table-striped-color: var(--first-scale-gray-color) !important; /* Cor do texto dentro das linhas listradas */
    vertical-align: middle !important;
}

#testRunsTable {
    --bs-table-bg: var(--white) !important; /* Cor de fundo para as linhas normais */
    --bs-table-color: var(--first-scale-gray-color) !important;
    --bs-table-border-color: var(--border-table) !important;
}
/* END TEST RUN */





/* DOCUMENTS */
#documentsTable.table-striped {
    --bs-table-striped-bg: #F8F9FA !important; /* Vermelho com 20% de opacidade */
    --bs-table-striped-color: var(--first-scale-gray-color) !important; /* Cor do texto dentro das linhas listradas */
    vertical-align: middle !important;
}

#documentsTable {
    --bs-table-bg: var(--white) !important; /* Cor de fundo para as linhas normais */
    --bs-table-color: var(--first-scale-gray-color) !important;
    --bs-table-border-color: var(--border-table) !important;
}
/* END DOCUMENTS */

table.dataTable.no-footer {
    border-bottom: 1px solid var(--border-table)!important;
}

table.dataTable tbody th, table.dataTable tbody td {
    padding: 18px 9px!important;
    font-size: 14px!important;
    font-weight: 400!important;
}

    /* ARROW TABLE HEADER */
        table.dataTable>thead .sorting:before, table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_desc:before, table.dataTable>thead .sorting_asc_disabled:before, table.dataTable>thead .sorting_desc_disabled:before {
            right: 1em;
            content: ""!important;
        }
        table.dataTable>thead .sorting:after, table.dataTable>thead .sorting_asc:after, table.dataTable>thead .sorting_desc:after, table.dataTable>thead .sorting_asc_disabled:after, table.dataTable>thead .sorting_desc_disabled:after {
            right: .5em;
            content: ""!important;
        }


        table.dataTable thead th, table.dataTable thead td {
            padding: 10px 18px;
            border-bottom: 1px solid var(--border-table)!important;
        }
        
    /* ENDARROW TABLE HEADER */

    /* ACTION BTN TABLE */
    .btn-action-table{
        background: transparent;
        border: none;
        color: var(--color-first-scale-gray);
    }

    .active>.page-link, .page-link.active {
        z-index: 3;
        color: var(--bs-pagination-active-color)!important;
        background-color: var(--primary-color)!important;
        border-color: var(--primary-color)!important;
        border-radius: 20px!important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        color: white !important;
        border: none!important;
        background-color: transparent !important;;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111))!important;
        background: -webkit-linear-gradient(top, #585858 0%, #ffffff00 100%)!important;
        background: -moz-linear-gradient(top, #585858 0%, #111 100%)!important;
        background: -ms-linear-gradient(top, #585858 0%, #111 100%)!important;
        background: -o-linear-gradient(top, #585858 0%, #111 100%)!important;
        background: linear-gradient(to bottom, #58585800 0%, #ffffff00 100%)!important;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        align-items: center!important;
    }
    
    /* END ACTION BTN TABLE */

    div.dataTables_wrapper div.dataTables_paginate {
        margin: 0;
        white-space: nowrap;
        text-align: right;
        padding-top: 5rem!important;
    }

    div.dataTables_wrapper div.dataTables_info {
        padding-top: 6rem!important;
    }

    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
        color: var(--color-first-scale-gray)!important;
        margin-bottom: 2rem!important;
    }

/* END TABLE */

/* CARD */
.card-header{
    background: transparent !important;
}
/* END CARD */

/* MODAL */
.modal-header{align-items:self-start!important;}
/* END MODAL */

/* CUSTOM */
.break-word{word-break: break-all;}
.th-width-custom{width: 195.219px!important;}
/* END CUSTOM */


@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1434px!important;
    }
}

.btn-outline-light.bg-white {
    background-color: #ffffff;
    color: #495057;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 6px 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background 0.3s ease;
}

.btn-outline-light.bg-white:hover {
    background-color: #f8f9fa;
    color: #495057;
    text-decoration: none;
}

.btn-outline-light.bg-white .material-icons {
    font-size: 20px;
    margin-right: 6px;
}


.card {
    background-color: #FFFFFF;
    border-radius: 4px;
    box-shadow: 1px 2px 9.3px rgba(0, 0, 0, 0.1);
    border: 1px solid #F1F1F1;
    transition: box-shadow 0.2s ease;
  }
  
  .card:hover {
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.12);
  }
  
  .card-header {
    border-bottom: 1px solid #E9E9EF !important;
}

.custom-breadcrumb {
    --bs-breadcrumb-divider: '>';
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #495057;
    padding: 0;
    margin: 0;
}

.custom-breadcrumb .breadcrumb {
    margin-bottom: 0;
    background-color: transparent;
    padding: 0;
}

.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider);
    color: #9e9e9e;
    padding-left: 3px;     /* espaço antes do > */
    padding-right: 9px;   /* espaço depois do > (aqui está o +4) */
    font-weight: 400;
    font-size: 14px;
}

.custom-breadcrumb .breadcrumb-item a {
    color: #495057;
    text-decoration: none;
    font-weight: 400;
}

.custom-breadcrumb .breadcrumb-item.active {
    font-weight: 500;
    color: #495057;
}