:root,:root.light{
                --color-dialog:#F0F0F0F0;
                --text-color:#000000;
                --text-color-disabled:#00000080;
                --btn-color:#FFFFFF;
                --btn-bcolor:#C0C0C0;
                --btn-color-hover:#CFCFCF;
                --btn-color-pressed:#AFAFAF;
                --btn-txtcolor:#000000;
                --input-color:#FFFFFF;
                --input-bcolor:#808080;
                --input-txtcolor:#000000;
                --input-colord:#808080;
                --input-bcolord:#505050;
                --input-txtcolord:#C0C0C0;
                --bg:#FFFFFF;
                --dimmer:#FFFFFFA0;
                --primary-color:#507505A0;
                --item_color:#A0A0A0F0;
                --scroll-track:#505050;
                --scroll-thumb:#808080;
                --scroll-thumb-hover:#507505;
                --bg-color:#FFFFFF30;
            }
            :root.dark {
                --color-dialog:#303030F0;
                --text-color:#cFcFcF;
                --text-color-disabled:#cfcfcf80;
                --btn-color:#505050;
                --btn-color-hover:#707070;
                --btn-color-pressed:#303030;
                --btn-bcolor:#404040;
                --btn-txtcolor:#cFcFcF;
                --input-color:#303030;
                --input-bcolor:#404040;
                --input-txtcolor:#cFcFcF;
                --input-colord:#505050;
                --input-bcolord:#404040;
                --input-txtcolord:#7F7F7F;
                --bg:#202020;
                --dimmer:#202020A0;
                --primary-color:#507505A0;
                --item_color:#303030F0;
                --scroll-track:#404040;
                --scroll-thumb:#505050;
                --scroll-thumb-hover:#507505;
                --bg-color:#00000030;
            }
            @media (prefers-color-scheme: light) {
                :root {
                    --color-dialog:#F0F0F0F0;
                    --text-color:#000000;
                    --btn-color:#FFFFFF;
                    --btn-bcolor:#C0C0C0;
                    --btn-color-hover:#CFCFCF;
                    --btn-color-pressed:#AFAFAF;
                    --btn-txtcolor:#000000;
                    --input-color:#FFFFFF;
                    --input-bcolor:#808080;
                    --input-txtcolor:#000000;
                    --input-colord:#808080;
                    --input-bcolord:#505050;
                    --input-txtcolord:#C0C0C0;
                    --bg:#FFFFFF;
                    --dimmer:#FFFFFFA0;
                    --primary-color:#507505A0;
                    --item_color:#A0A0A0F0;
                    --scroll-track:#505050;
                    --scroll-thumb:#808080;
                    --scroll-thumb-hover:#507505;
                    --bg-color:#FFFFFF30;
                }
            }
            @media (prefers-color-scheme: dark) {
                :root {
                    --color-dialog:#303030F0;
                    --text-color:#cFcFcF;
                    --btn-color:#505050;
                    --btn-color-hover:#707070;
                    --btn-color-pressed:#303030;
                    --btn-bcolor:#404040;
                    --btn-txtcolor:#cFcFcF;
                    --input-color:#303030;
                    --input-bcolor:#404040;
                    --input-txtcolor:#cFcFcF;
                    --input-colord:#505050;
                    --input-bcolord:#404040;
                    --input-txtcolord:#7F7F7F;
                    --bg:#202020;
                    --dimmer:#202020A0;
                    --primary-color:#507505A0;
                    --item_color:#303030F0;
                    --scroll-track:#303030;
                    --scroll-thumb:#505050;
                    --scroll-thumb-hover:#507505;
                    --bg-color:#00000030;
                }
            }

            html {margin: 0px; height: 100%; width: 100%;font-family: Tahoma, Arial, Helvetica, sans-serif;color:var(--text-color);cursor:default;-webkit-user-select: none;-ms-user-select: none;user-select: none;}
            body {margin: 0px; min-height: 100%; width: 100%; overflow: hidden; background-color:var(--bg); background-repeat: no-repeat;background-attachment: fixed; background-position: center; background-size: cover; transition:background-image 1s ease-in-out;}
            #overlay_progress{position:fixed; display:none; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background-color:var(--dimmer); z-index:9; -webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px); color:var(--text-color);}
            #div_msgbox{position:fixed; display:none; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background-color:var(--dimmer); z-index:10; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);}

            .noeffect {
                -webkit-transition: 0.0001s linear !important; 
                -moz-transition: 0.0001s linear !important; 
                -o-transition: 0.0001s linear !important; 
                transition: 0.0001s linear !important; 
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		box-shadow: none !important;
            }

            ::-webkit-scrollbar {
                width: 10px;
            }

            ::-webkit-scrollbar-track {
                background: var(--scroll-track); 
            }
 
            ::-webkit-scrollbar-thumb {
                background: var(--scroll-thumb); 
            }

            ::-webkit-scrollbar-thumb:hover {
                background: var(--scroll-thumb-hover);
            }
            
            .btn_toggle {
                width:0px;
                margin-left:0px;
                margin-right:0px;
                visibility:hidden;
                margin-top:15px;
                margin-bottom:15px;
		cursor:pointer;   
            }
            .btn_toggle_label{
                padding: 10px;
                border: 1px solid var(--btn-bcolor);
                border-radius: 15px;
                background-color:var(--item_color);
                color:var(--btn-txtcolor);
                transition:background 0.1s ease-in-out;
            }
            .btn_toggle_label:hover{
                background-color:#FFFFFF30;
            }
            .btn_toggle:checked+label,
            .Checked+label {
                background-color:#FFFFFF80;
            }
            .table_row_item{
                margin-top: 5px;
                margin-bottom: 5px;
                padding: 5px;
                border: 1px solid var(--btn-bcolor);
                border-radius: 15px;
                background-color:var(--item_color);
                font-size: 30px;
                cursor:pointer;
                width: 100%;
                table-layout: fixed;
            }

            .table_row_item:hover{
                background-color:#FFFFFF30;
                transition:background 0.1s ease-in-out;
            }

            .table_row_desccell{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .table_row_othercell{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            @media screen and (max-width: 500px) {
                .table_row_othercell{
                    display:none;
                }
            }
            .style_button{
                text-decoration: none;
                border: 1px solid var(--btn-bcolor);
                border-radius: 5px;
                background-color:var(--btn-color);
                color:var(--btn-txtcolor);
                transition:background 0.1s ease-in-out;
		cursor:pointer;
            }
            .style_button:hover{
                background-color:var(--btn-color-hover);
            }
            .style_button:active{
                background-color:var(--btn-color-pressed);
            }

            button{
                text-decoration: none;
                border: 1px solid var(--btn-bcolor);
                border-radius: 5px;
                background-color:var(--btn-color);
                color:var(--btn-txtcolor);
                transition:background 0.1s ease-in-out;
		cursor:pointer;
            }
            input[type=button]{
                text-decoration: none;
                border: 1px solid var(--btn-bcolor);
                border-radius: 5px;
                background-color:var(--btn-color);
                color:var(--btn-txtcolor);
                transition:background 0.1s ease-in-out;
		cursor:pointer;
            }
            button:hover{
                background-color:var(--btn-color-hover);
            }
            button:active{
                background-color:var(--btn-color-pressed);
            }
            
            input[type=button]:hover{
                background-color:var(--btn-color-hover);
            }
            input[type=button]:active{
                background-color:var(--btn-color-pressed);
            }
            input,input[type=text],input[type='password']{
                font-size: 20px;
                padding-top:5px;
                padding-bottom:5px;
                border: 1px solid var(--input-bcolor);
                border-radius: 5px;
                background-color:var(--input-color);
                color:var(--input-txtcolor);
                transition:background 0.1s ease-in-out;
            }
            input:disabled,input[type=text]:disabled,input[type='password']:disabled{
                border: 1px solid var(--input-bcolord);
                background-color:var(--input-colord);
                color:var(--input-txtcolord);
                transition:background 0.1s ease-in-out;
            }
            div.div_top_border{
                background-color:var(--primary-color);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                width: 100%;
                height: 50px;
                box-shadow: 0px 0px 15px 5px #00000080;
                z-index:7;
                transition:background 0.1s ease-in-out;
            }

            div.div_menu{
                background-color:var(--primary-color);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                width: 300px;
                left: -300px;
                top: 50px;
                height: 100%;
                box-shadow: 0px 0px 15px 5px #00000000;
                z-index:6;
                overflow-y:auto;
                position:fixed;
                transition:left 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
            }

            div.div_design_menu{
                background-color:var(--primary-color);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                width: 200px;
                right: 0px;
                top: 50px;
		padding: 5px;
                box-shadow: 15px 15px 15px 15px #00000000;
                z-index:-1;
		opacity: 0;
                position:absolute;
                transition:opacity 0.1s ease-in-out, box-shadow 0.5s ease-in-out;
            }

            .profile_img_circle{
                background-color:var(--primary-color);
                border: 1px solid var(--text-color);
                border-radius: 50%;
                width: 100px;
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

        

            .menu_button{
                padding:12px 5px;
                width:auto;
                display:flex;
                cursor:pointer;
                font-size: 18px;
                color: #FFFFFF;
                transition: background-color 0.1s ease-in-out;
            }
            .menu_button:hover{
                background-color: #FFFFFF30;
                transition: background-color 0.1s ease-in-out;
            }

            .menu_icon{
                width:30px;
                padding:0px 0px;
                font-size:18px;
                text-align:center;
            }


            .menu_icon2{
                font-size:20px;
                height:100%;
                position:relative;
                display:flex;
                align-items:center;
		padding-right:10px;
            }

            .btn_fa_icon{
                color:var(--text-color);
                font-size:32px;
                border:none;
                background-color:#00000000;
            }
            .btn_fa_icon:hover{
                background:#FFFFFF30;
                transition: background-color 0.1s ease-in-out;
            }
            .btn_fa_icon:disabled{
                color:grey;
            }

            div.div_profile{
                
            }

            a{
                color:#507505A0;
            }