@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&display=swap');
@import url('mpn-icons.css');

:root{
    --bs-dark-rgb: 9,29,58;
    --blue-mpn: #297CCE;
    --medium-blue: #1C3B68;
    --bg-blue: rgb(9,29,58);
    --dark-blue: #041121;
    --yellow: #F7B531;
    --green: #C2DD26;
    --light_blue: #BBD1E6;
    --bs-body-color: #BBD1E6;
    --teal: #00a69c;
    --red: #f73331;
}

html,
body{
    background-color: rgb(var(--bs-dark-rgb));
}

/* Tipo */
body{
    font-family: 'Roboto', sans-serif;
}

h1,h2,h3,p{
    color: var(--light_blue);
}

/* General */
#main_container{
    min-height: calc(100vh - 76px);
    max-width: 540px;
}

.vertical-center-container{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.vertical-center-container>*{
    margin: auto;
}

.back-btn{
    display: flex;
    text-decoration: none;
    height: 100%;
}

.back-btn>span{
    margin: auto;
    transform: rotate(0.25turn);
    color: var(--blue-mpn);
}

.danger-link{
    color: var(--red);
}

.danger-link:hover{
    color: var(--red);
    filter: brightness(2);
}

/* Navbar */
.navbar-brand{
    font-size: 33px;
    color: var(--blue-mpn) !important;
    padding-top: 6px;
}

.logo-solo{
    font-size: 100px;
    color: var(--blue-mpn) !important;
    padding-top: 20px;
    width: 100%;
}

#main-search{
    background-color: var(--medium-blue);
    border: 0;
    border-radius: 8px;
    font-weight: 300;
    color: var(--blue-mpn);
}

#main-search::placeholder{
    color: var(--blue-mpn);
}

.navbar-toggler{
    border: 0;
}

.navbar-dark .navbar-toggler{
    color: var(--blue-mpn);
}

.nav-link{
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--light_blue) !important;
    text-align: center;
}

/* Footer */

footer{
    font-size: 0.5rem;
}

.mpn-logo-footer{
    opacity: 50%;
}

/* Task List */
div.float-btn{
    position: fixed;
    bottom: 8vh;
    right: 4vw;
}

.new-task-btn{
    display: flex;
    width: 60px;
    height: 60px;
    background-color: var(--blue-mpn);
    color: white;
    font-size: 0;
    text-decoration: none;
    border-radius: 50%;
    margin: auto;
}

.new-task-btn::before{
    content: "\e904";
    margin: auto;
    font-size: 1rem;
}

div.results-count{
    font-size: 0.5rem;
}

/* Task */
.task-container,
.interval-container{
    background-image: linear-gradient(90deg, #1F3B65 0%, #112C52 100%);
    box-shadow: 0 0 10px 0 rgba(3,16,35,0.50);
    border-radius: 36px;
    padding: 0.5rem;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.parent-task{
    background-image: none;
    box-shadow: none;
    background-color: var(--dark-blue);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Task buttons */
.task-btn{
    display: block;
    height: 50px;
    width: 50px;
    border: 0;
    border-radius: 50%;
    font-size: 0;
    border: 2px solid #fff;
    background-color: transparent;
}

.task-btn::before{
    font-size: 1rem;
}

.btn-PS,
.btn-NW{
    border-color: var(--yellow);  
    color: var(--yellow); 
}
.btn-PS::before{
    content: "\e902";
}

.btn-PR{
    border-color: var(--green);
    color: var(--green);
}
.btn-PR::before{
    content: "\e903";
}

.btn-NW::before{
    content: "\e902";
}

.task-icon>span{
    font-size: 0;
}

.task-ico-FN::before{
    content: "\e907";
    font-size: 1.5rem;
    color: var(--teal);
}

.task-ico-AR::before{
    content: "\e908";
    font-size: 1.5rem;
    color: var(--red);
}

.task-ico-PR::before{
    content: "\e90a";
    font-size: 1.5rem;
    color: var(--blue-mpn);
}

.task-ico-NW::before{
    content: "\e90b";
    font-size: 1.5rem;
    color: var(--blue-mpn);
}

.task-ico-PS::before{
    content: "\e909";
    font-size: 1.5rem;
    color: var(--blue-mpn);
}

.btn-subtask{
    background-color: transparent;
    height: 50px;
    width: 50px;
    border: 0;
    border-radius: 50%;
    color: var(--blue-mpn);
    transform: rotate(-0.5turn);
    transition: transform 0.3s ease;
}

.btn-subtask[aria-expanded="false"]{
    transform: rotate(0);
    transition: transform 0.3s ease;
}

.btn-subtask::before{
    content: "\e901";
}

a.task-link{
    text-decoration: none;
    font-weight: 400;
}

.btn-subtask-small{
    height: 25px;
}

.task-container p{
    margin-top: 0;
    margin-bottom: 0;
}

p.task-main{
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 500;
}

p.task-secondary{
    font-size: 0.9rem;
    font-weight: 300;
}

.task-timer{
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--green);
}

/* Task view */

div.title-row{
    margin-bottom: 1rem;
}

div.title-row h1{
    font-size: 1.5rem;
    margin-bottom: 0;
    font-weight: 500;
}

p.label{
    font-weight: 300;
    color: var(--blue-mpn);
}

p.prop{
    font-weight: 300;
}

/* Btn override */
.btn{
    font-weight: 300;
    font-size: 1rem;
    text-transform: uppercase;
}

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

.btn-success{
    background-color: var(--teal);
    color: var(--dark-blue);
}

.btn-danger{
    background-color: var(--red);
    color: var(--dark-blue);
}

.btn-outline-danger{
    border-color: var(--red);
    color: var(--red);
}

.btn-close{
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23BBD1E6'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

/* forms */
.form-control,
.form-control-lg,
.form-select{
    background-color: var(--bg-blue);
    border: solid 1px var(--blue-mpn);
    color: var(--light_blue);
}

.form-control:focus,
.form-select:focus{
    background-color: var(--medium-blue);
    color: var(--light_blue);
}
.form-select{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23BBD1E6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-floating label{
    color: var(--blue-mpn);
}

/* Modals */
.modal-content{
    background-color: var(--bg-blue);
}

.modal-header,
.modal-footer{
    border-color: var(--blue-mpn);
}

/* intervals */

/* report */
.table-container{
    padding: 1rem;
    border-radius: 18px;
    background-color: var(--dark-blue);
}

/* tables */
.tabulator,
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col,
.tabulator-row,
.tabulator-row.tabulator-row-even,
.tabulator .tabulator-footer{
    background-color: var(--dark-blue);
}

.tabulator-row.tabulator-selectable:hover{
    background-color: var(--medium-blue);
}

.tabulator-row,
.tabulator-row.tabulator-row-even{
    border: 0;
    border-bottom: 1px solid var(--medium-blue);
}

.tabulator-row .tabulator-cell,
.tabulator .tabulator-header .tabulator-col{
    border: 0;
}

.tabulator .tabulator-tableholder .tabulator-table{
    color: var(--light_blue);
}

.tabulator .tabulator-header{
    color: var(--blue-mpn);
    border-bottom: solid 2px var(--blue-mpn);
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover{
    background-color: var(--medium-blue);
}

.tabulator .tabulator-footer{
    border-top: 0;
}

.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{
    background-color: var(--dark-blue) !important;
    border: 0;
}

.tabulator .tabulator-footer .tabulator-calcs-holder{
    border-top: solid 3px var(--blue-mpn) !important;
    color: var(--green);
    font-size: 1.2rem;
    font-weight: 700;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{
    border-top: solid 1px var(--blue-mpn) !important;
    color: var(--green);
}



.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
    border-top: none;
    border-bottom: 6px solid var(--blue-mpn);
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=asc] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
    border-top: none;
    border-bottom: 6px solid var(--yellow);
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=desc] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
    border-bottom: none;
    border-top: 6px solid var(--yellow);
    color: var(--yellow);
}

.tabulator-row.tabulator-group{
    background-color: var(--medium-blue);
    border: 0;
}

.tabulator-row.tabulator-group span{
    color: var(--blue-mpn);
}

.tabulator-row.tabulator-group:hover{
    background-color: var(--blue-mpn);
    color: var(--dark-blue);
}

.tabulator-row.tabulator-group:hover span{
    color: var(--dark-blue);
}

.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow{
    border-top: 6px solid var(--teal);
}

.tabulator-row.tabulator-group .tabulator-arrow{
    border-left: 6px solid var(--teal);
}