/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 10.03.2025, 11:08:43
    Author     : mrose
*/

:root{
    --primary: rgb(66,66,68);
    --box: rgb(46,46,47);
    --secondary: rgb(220,255,74);
    --help-btn:rgb(143,31,255);
    --prim-btn:rgb(50,83,255);
    
    --black: rgb(0,0,0);
    --white: rgb(255,255,255);
}

body{
    background: var(--primary);
}

#main-content-head{
    background: var(--primary);
    color: var(--white);
    text-shadow: 0px 0px 3px var(--box);
}

#logo{
    background: var(--secondary);
    color: var(--black);
}

#mobile-logo{
    background: var(--secondary);
    color: var(--black);
}

#header{
    background: var(--secondary);
    color: var(--black);
}

#header a{
    color: var(--black);
}

#header-burger{
    background: var(--secondary);
}

#header-icon-nav:hover{
    background: var(--black);
    color: var(--white);
}

#header-user{
    color: var(--black);
}

#header-user > .header-user-navigation li, .header-user-navigation-li{
    color: var(--white);
    background: var(--black);
}

#header-user > .header-user-navigation li:hover{
    background: var(--secondary);
    color: var(--black);
}

.header-user-navigation-hovered{
    background: var(--black);
    color: var(--white) !important;
}

#header-user > .header-user-navigation  a{
    color: #495057;
}

#nav-sidebar{
    background: var(--box);
}

#nav-sidebar > nav > ul > a > li{
    color: var(--white);
}

#nav-sidebar > nav > ul > a > .site-visited{
    background: var(--primary);
}

#nav-sidebar > nav > ul > a > li:hover{
    background: var(--secondary) !important;
}

#nav-sidebar > nav > ul > a > li:hover,
#nav-sidebar > nav > ul > a > li:hover > i{
    cursor: pointer;
    color: var(--black);
}

#nav-sidebar > nav > ul > a{
    color: #d9d9d9;
}

#nav-sidebar > nav > ul > a > li > i{
    color: #d9d9d9;
}

.ui-inputfield{
    color: var(--white) !important;
    background: var(--box) !important;
    border: 1px solid var(--primary) !important;
}

#main-content{
    background: var(--primary);
}

.ui-card{
    background: var(--box) !important;
}

body .ui-card {
    background: var(--box);
    color: var(--white);
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
}

.ui-datatable-reflow {
    background: var(--box) !important;
}

body .ui-paginator {
    background: var(--box);
    border: solid #e9ecef;
    border-width: 0;
    padding: 1rem;
}

body .ui-datatable thead th{
    background: var(--box);
    color: var(--white);
}

body .ui-datatable .ui-datatable-data>tr{
    background: var(--box);
    color: var(--white);
}

body .ui-datatable .ui-datatable-data>tr.ui-state-hover{
    background: var(--secondary) !important;
    color: var(--black) !important;   
}

body .ui-datatable .ui-datatable-data>tr>td {
    padding: 1rem 1rem;
    border: 1px solid rgba(255,255,255,.5);
    border-width: 0 0 1px 0;
}

body .ui-panelgrid .ui-panelgrid-cell{
    background: var(--box) !important;
    color: var(--white) !important;  
}

body .ui-datatable .ui-datatable-data>tr .ui-row-editor .ui-icon{
    color: var(--secondary);
}

body .ui-datatable .ui-datatable-header{
    background: var(--box);
    color: var(--whtie);
}

body .ui-breadcrumb{
    background: var(--box);
    border: none;
}

body .ui-breadcrumb .ui-breadcrumb-items li:last-child .ui-menuitem-link .ui-menuitem-text{
    color: var(--white);
}

body .ui-datatable .ui-datatable-footer{
    background: var(--box);
}

body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active{
    background: var(--primary);
    color: var(--white);
}

body .ui-paginator .ui-paginator-pages .ui-paginator-page:hover{
    background: var(--secondary)!important;
    color: var(--black);
}

body .ui-state-default .ui-sortable-column .ui-filter-column>th{
    background: var(--secondary) !important;
    color: var(--black) !important;
}

body .ui-paginator .ui-corner-all:hover{
    background: var(--secondary) !important;
    color: var(--black) !important;
}

body .ui-datatable thead th.ui-state-hover{
    background: var(--secondary) !important;
    color: var(--black) !important;
}

body .ui-paginator .ui-paginator-current, body .ui-paginator .ui-paginator-rpp-options{
    background: var(--primary);
    color: var(--white);
    border-radius: 5px;
    border: none;
}

body .ui-button:not(.rounded-button):not(.ui-button-help){
    background: var(--prim-btn) !important;
    border: none !important;
}

body .ui-button-help {
    background: var(--help-btn) !important;
    border: none !important;
}

body .ui-avatar {
    background: var(--black);
    color: var(--white);
}

.footer-box {
    color: var(--white) !important;
}

body .ui-divider-content {
    background: var(--box) !important; 
}

body .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    background: var(--box) !important;
    color: var(--white);
}

body .ui-tabs.ui-tabs-top>.ui-tabs-nav li.ui-tabs-header.ui-state-active {
    border-color: var(--secondary) !important;
}

body .ui-tabs.ui-tabs-top>.ui-tabs-nav li.ui-tabs-header {
    background: var(--box) !important;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active a {
    color: var(--secondary) !important;
}

body .ui-tabs .ui-tabs-nav {
    background: none;
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item{
    color: var(--white);
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight{
    background: var(--box) !important;
    color: var(--white);
}

body .ui-selectonemenu-panel{
    background: var(--primary) !important;
    color: var(--white);
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-hover{
    background: var(--secondary) !important;
    color: var(--black);
}

body .ui-datatable thead th.ui-state-active{
    background: var(--secondary) !important;
    color: var(--black);
}

body .ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container ui-draggable ui-resizable{
    background: var(--primary) !important;
}

body .ui-dialog .ui-dialog-titlebar{
    background: var(--primary) !important;
    color: var(--white);
}

body .ui-dialog .ui-dialog-footer{
    background: var(--primary) !important;
    color: var(--white);
}

body .ui-dialog .ui-dialog-content{
    background: var(--primary) !important;
    color: var(--white);
}

body .ui-selectcheckboxmenu-panel {
    background: var(--primary) !important;
    color: var(--white);
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header{
    background: var(--primary) !important;
    color: var(--white);
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items .ui-selectcheckboxmenu-item{
    color: var(--white);
}

body .ui-chkbox .ui-chkbox-box.ui-state-active{
    background: var(--secondary) !important;
    color: var(--black);
    border: none;
}

body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-token{
    background: var(--secondary) !important;
    color: var(--black);
}

body .ui-selectonemenu-panel .ui-selectonemenu-filter-container{
    background: var(--primary) !important;
    color: var(--white);
}

body .ui-datatable .ui-datatable-data>tr.ui-state-highlight{
    color: var(--white);
    background: var(--primary);
}

body .ui-password-panel{
    color: var(--white);
    background: var(--primary);
}

.ui-reflow-dropdown{
    background: var(--primary);
    color: var(--white);
}

body .ui-selectonemenu{
    background: var(--primary) !important;
    color: var(--white) !important;
    border-color: var(--box);
}
.ui-row-editor-pencil:hover, 
.ui-row-editor-check:hover, 
.ui-row-editor-close:hover {
    background: var(--secondary) !important;
}

.ui-row-editor-pencil:hover .ui-icon, 
.ui-row-editor-check:hover .ui-icon, 
.ui-row-editor-close:hover .ui-icon {
    color: var(--black) !important;
    background: transparent !important;
}

.label {
                                    font-size: 18px;
                                    display: block;
                                }

                                .input-field {
                                    font-size: 18px;
                                    padding: 8px;
                                    width: 100%;
                                    border: 1px solid #ccc;
                                    border-radius: 5px;
                                    box-sizing: border-box;
                                }

                                .input-field:focus {
                                    border-color: #4CAF50;
                                    outline: none;
                                    background-color: #f9f9f9;
                                }
                                
                                .calendar-field {
                                    margin-bottom: 8px;
                                }

                                p:tab {
                                    padding: 20px;
                                    background-color: #f4f4f4;
                                    border-radius: 8px;
                                }

                                p:tab .ui-tabs-nav {
                                    margin-bottom: 20px;
                                }

                                .button {
                                    font-size: 18px;
                                    padding: 10px 20px;
                                    margin-top: 15px;
                                    border: none;
                                    border-radius: 5px;
                                    background-color: #4CAF50;
                                    color: white;
                                    cursor: pointer;
                                }

                                .button:hover {
                                    background-color: #45a049;
                                }
                                
                                body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today > a,
                                body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today > span,
                                body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day > a,
                                body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day > span {
                                    background: none !important;
                                    color: inherit !important;
                                    font-weight: normal !important;
                                    border: none !important;
                                }

.help-box{
    cursor: pointer;
}

.help-box-text{
    background: white;
    color: #495057;
    border: 2px solid #495057;
}

.help-box > i{
    color: rgb(42,73,218);
}

table > thead > tr > td{
    background: var(--primary);
    color: #495057;
}

footer{
    border-top: 1px solid var(--box);
}

footer .footer-box{
    color: #495057;
}

@media only screen and (min-width: 901px){
    #nav-sidebar{

    }
}

@media only screen and (max-width: 900px) {
    #container{

    }
    
    #logo > span{
        
    }
    
    #logo > img{

    }
    
    #header{

    }
    
    #logo{

    }
    
    #header-burger{

    }
    
    #mobile-logo{

    }
    
    #nav-sidebar{

    }
}