:root {
        --color-palette-primary: #555555;
        --color-palette-secondary: #CCCCCC;
        --control-panel-background-color: #FFFFFF;
        --control-panel-text-color: #00000;
        --content-background-color: #CCCCCC;
        --content-background-text-color: #555555;
        --content-tile-background-color: #FFFFFF;
        --content-tile-text-color: #000000;
        --desisive-color: #1976D2;
    }


    header {
        background-color: var(--control-panel-background-color) !important;
    }

    input#sbox1,
    input#sbox1::placeholder
     {
        color: var(--control-panel-text-color) !important;
        background-color: var(--control-panel-background-color) !important;
    }

    
    input#sbox1:-webkit-autofill,
    input#sbox1:-webkit-autofill:hover,
    input#sbox1:-webkit-autofill:focus,
    input#sbox1:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px var(--control-panel-background-color) inset !important;
        -webkit-text-fill-color: var(--control-panel-text-color) !important;
    }

    .sidebar, .sidebar .container, .control-panel {
        background-color: var(--control-panel-background-color) !important;
        color: var(--control-panel-text-color) !important;
    }

    .sidebar .container {
        border-color: var(--control-panel-background-color) !important;
    }

    .sidebar-title,
    .color-palette-primary {
        color: var(--color-palette-primary) !important;
    }

    
    .acd-label:hover,
    p.sidebar-contents:hover,
    .acd-content p:hover,
    .ellipse-menu-content:hover,
    .hover-select:hover,
    .selected-item
    {
        background-color: var(--color-palette-secondary) !important;
    }

    .main-top,
    .control-panel-text
    {
        color: var(--control-panel-text-color) !important;
        fill: var(--control-panel-text-color) !important;
        stroke: var(--control-panel-text-color) !important;
    }

    .main-contents,
    .content-bg,
    .modal table thead tr,
    .modal table thead tr input[type="checkbox"]
    {
        background-color: var(--content-background-color) !important;
    }

    .main-detail,
    .main-detail input[type="text"],
    .main-detail input[type="date"],
    .main-detail input[type="time"],
    .main-detail input[type="email"],
    .main-detail input[type="number"],
    .main-detail input[type="password"],
    .main-detail input[type="checkbox"],
    .main-detail select,
    .main-detail textarea,
    .modal,
    .modal div,
    .modal input,
    .modal input::placeholder,
    .modal select,
    .modal textarea,
    .modal form,
    .content-tile-bg,
    .content-tile-bg input,
    .content-tile-bg textarea,
    .content-tile-bg select
    {
        background-color: var(--content-tile-background-color) !important;
        border-color: var(--content-tile-text-color) !important;
    }

    .main-detail input,
    .main-detail select,
    .main-detail textarea,
    .select-box select
    {
        border-color: var(--content-tile-text-color) !important;
    }




    
    .main-detail input[type="checkbox"],
    .modal input[type="checkbox"],
    .content-tile-bg input[type="checkbox"]
    {
        background-color: transparent !important;
    }
    
    .main-detail input[type="checkbox"]:checked,
    .modal input[type="checkbox"]:checked,
    .modal input[type="radio"]:checked
    {
        background-color: var(--desisive-color) !important;
    }

    .desisive-color-text {
        color: var(--desisive-color) !important;
    }

    
    :where(
        .main-detail :is(p, label, th, td, span, select, textarea, input),
        .content-tile-bg :is(p, label, select, input, textarea, tr, td),
        .modal :is(div, p, h2, label, input, textarea),
        .user-name,
        .pagination-info
    ):not(.unique-color) {
        color: var(--content-tile-text-color) !important;
    }

    
    .main-detail input[type="text"]::placeholder,
    .pagination-info,
    input#sbox1::placeholder
    {
        opacity: 0.8;
    }

    
    .main-detail thead tr{
        border-bottom: 0.5px solid var(--content-tile-text-color);
    }

    
    .btn-primary {
        background-color: var(--color-palette-primary) !important;
        fill: var(--color-palette-primary) !important;
    }

    
    .color-palette-primary,
    {
        color: var(--control-panel-text-color) !important;
        background-color: var(--color-palette-primary) !important;
        fill: var(--color-palette-primary) !important;
    }

    .breadcrumb a
    {
        color: var(--content-background-text-color) !important;
    }

    .content-tile-text:not(.color-palette-primary)
    {
        color: var(--content-background-text-color) !important;
    }

    
    .alert-danger {
        background-color: #f8d7da;
        color: #721c24 !important;
        border: 1px solid #f5c6cb;
    }

    
    .alert-warning {
        background-color: var(--desisive-color) !important;
        color: #FFFFFF !important;
        border: 1px solid #ffeeba;
    }

    
    .alert-warning-text {
        color: var(--desisive-color) !important;
    }

    
    .spinner {
        border-color: var(--color-palette-primary) !important;
    }