canvas {
    cursor: default;
    outline: none;
}

body {
    /*background-color: #000000;*/
    background-color: black;

    /*
    background-image: url('bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    */
}

h1 {
    text-align: center;
    color: #eeeeee;
}

a {
    text-align: center;
    color: #bbbbff;
}


/* this is the style for HTMLGDXButtonDialog */

/* Background Overlay */
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="background"],
 [id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="background"]{
         z-index: 1000000 !important;
         position: absolute !important;
         inset: 0px !important;
         background-color: rgb(0, 0, 0) !important;
         opacity: 0.8 !important;
}


/* Popup Container */
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@']{
         background-color: rgba(255, 255, 255, 0) !important; /* Semi-transparent background */
         border: 0em !important;
         border-radius: 0em !important; /* Rounded corners */
         text-align: center !important; /* Center-align content */
         font-family: Arial, sans-serif !important;
         top: 25em !important;
}

/* Popup Message */
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="title"],
 [id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="title"]{
  font-size: 24px !important; /* Larger font for title */
    margin-bottom: 10px !important;
    color: white;
}

[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="message"]
{
   font-size: 16px !important; /* Message text size */
   color: white !important; /* Gray color */
   margin-bottom: 20px !important;

   padding-left: 20em !important; /* adjusting width of the message for break-line*/
   padding-right: 20em !important;

}

[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="message"]{
   font-size: 16px !important; /* Message text size */
   color: white !important; /* Gray color */
   margin-bottom: 20px !important;

}
/* Button Styles */
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="button1"],
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="button2"],
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="button3"] {
         font-size: 14px !important; /* Button text size */
            margin: 5px 4px !important; /* Space between buttons */
            padding: 10px 20px !important; /* Padding inside buttons */
            background-color: #7f8c99 !important; /* Button background color */
            color: white ; /* Button text color */
            border: none !important; /* Remove border */
            border-radius: 2px !important; /* Rounded buttons */
            cursor: pointer !important; /* Hand cursor on hover */
            width:120px;
            /*box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1) !important; /* Button shadow */
}

/* Button Hover Effect */
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="button1"]:hover,
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="button2"]:hover,
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="button3"]:hover {
    background-color: white !important;
    color: #000000;

}

/* Button Active Effect */
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="button1"]:active,
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="button2"]:active,
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXButtonDialog@'][id$="button3"]:active {
    background-color: white !important; /* Even darker blue when clicked */
    box-shadow: none !important; /* Remove shadow on click */

}

/*This is the style for ProgressDialog*/


[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXProgressDialog@']{
    position: absolute !important; /* Positions the popup at the center */
    padding: 0em !important; /* Space inside the popup */
    font-family: Arial, sans-serif !important;
    border: 0em !important;
    text-align: center !important;
}

[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXProgressDialog@'][id$="title"]{
    color: white !important;
    font-size:35px !important;
    transform: translate(-50%, -50%) !important;
    margin-left: 50%;
    margin-top: 360px;

}
/* Style for the message container */
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXProgressDialog@'][id$="message"]{
    margin-top: 420px;
    color: white;
    margin-left: 50% !important;
    transform: translateX(-50%) !important; /* Centering horizontally */
    display: flex !important; /* Use flexbox for alignment */
    align-items: center !important; /* Vertically align the loader and text */
    gap: 10px !important; /* Add space between the loader and the text */
    position: absolute !important; /* Fixed positioning */

}

/* Loader Circle using ::before */
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXProgressDialog@'][id$="message"]::before{
    content: ''; /* Required for pseudo-elements */
    width: 40px; /* Diameter of the circle */
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.6); /* Light border */
    border-top-color: rgba(255, 255, 255, 1); /* Highlighted border for animation */
    border-radius: 50%; /* Make it a circle */
    animation: spinClockwise 1s linear infinite; /* Rotating animation */
}


/* Spinning animation */
@keyframes spinClockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}











[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@']{
         background-color: rgba(255, 255, 255, 0) !important; /* Semi-transparent background */
         border: 0em !important;
         border-radius: 0em !important; /* Rounded corners */
         font-family: Arial, sans-serif !important;
         top: 38% !important;
         left: 33% !important;
}



[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="title"]{
    font-size: 24px !important; /* Larger font for title */
    margin-bottom: 10px !important;
    color: #00FFFF;

}
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="message"]{
    font-size: 14px !important;
    margin-top: 22px ;
    color: white ;
    top: 60% !important;
}

[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="input"]{
    outline: none !important;
    border: none !important;
    border-bottom: 2px solid #ccc !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    width: 40% !important;
    background: none !important;
    margin-top: 22px !important;
    padding: 4px;
    padding-left: 6px;
    color: white ;

}

[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="-input"]:focus {
    outline: none;
    border-color: transparent;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
}


[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="-cancel"],
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="-confirm"]{
    padding: 10px 20px !important;
    background-color: #7f8c99 !important;
    color: white ;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    width:25% !important;
    max-width: 170px !important;
    margin: 0px 2px !important;
}

[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="-cancel"]:hover,
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="-confirm"]:hover{
    background-color: white !important;
    color: #000000;
}
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="-cancel"]:active,
[id^='de.tomgrill.gdxdialogs.html.dialogs.HTMLGDXTextPrompt@'][id$="-confirm"]:active{
    background-color: white !important;
}
.superdev {

    color: white;
    text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
    font-size: 50pt;
    display: block;
    position: relative;
    text-decoration: none;
    background-color: rgb(83,87,93);
    box-shadow: 0px 3px 0px 0px rgb(34,34,34),
                0px 7px 10px 0px rgb(17,17,17),
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
                inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
    width: 70px;
    height: 70px;
    border: 0;
    border-radius: 35px;
    text-align: center;
    line-height: 68px;
}

.superdev:active {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
                0px 3px 7px 0px rgb(17,17,17),
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
                inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
    top: 3px;
    color: #fff;
    text-shadow: 0px 0px 3px rgb(250,250,250);
}

.superdev:hover {
    background-color: rgb(100,100,100);
}