body {
   background-color: #fff;
    color: #4b4b4b; /* Dark grey */
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    margin: 0px;
}
strong {
    color: #000000; /* Black for specific character */
}

a:link, 
a:visited, 
a:active, 
a:focus 
 {
    color: #3582ca;
    text-decoration: none; /* Optional: Remove underline */
}
a:hover
{
    color: rgb(130, 23, 90);
    text-decoration: none; /* Optional: Remove underline */
}

.overskrift {
    background-color: #7cbbf7;
    color: #ffffff;
    padding: 10px;
    font-size: 16px;
}

.rightlight {
    background-color: #F5F5F5;
    text-align: left;
}
.right {
    background-color: #e4e4e4;
    text-align: left;
    color: #234567;
}

.rightdark {
    background-color: #c3c3c3;
    text-align: left;
}
.rightweak {
    background-color: #f5f5f5;
    text-align: left;
    
}
.leftlight {
    background-color: #F5F5F5;
    text-align: right;
}
.left {
    background-color: #e4e4e4;
    text-align: right;
    
}
.leftdark {
    background-color: #d3d3d3;
    text-align: right;
}

.fixed
{
    background-color: #119361;
    color: #fefefe;
    padding: 10px;
    font-size: 16px;
}
.worry {
    text-align: left;
    border:2px solid #aacdee;
}
.worryleft {
    text-align: right;
    border:2px solid #aacdee;
}
.strange {
    text-align: left;
    border:2px solid #c6e14e;
}
.strangeleft {
    text-align: right;
    border:2px solid #c6e14e;
}

.deleted {
     background-color: #f5f7f9;
    text-align: left;
    color: #7cbbf7; 
    text-decoration: line-through;
    text-decoration-color: #3582ca; /* Changes the color of the strike-through line */
    text-decoration-style: solid; /* Changes the style of the line to wavy (options: solid, double, dotted, dashed, wavy) */
    text-decoration-thickness: 1px; /* Changes the thickness of the line */

}
.deletedleft {
     background-color: #f5f5f5;
    text-align: right;
    color: #7cbbf7; 
    text-decoration: line-through;
    text-decoration-color:#3582ca; /* Changes the color of the strike-through line */
    text-decoration-style: solid; /* Changes the style of the line to wavy (options: solid, double, dotted, dashed, wavy) */
    text-decoration-thickness: 1px; /* Changes the thickness of the line */

}
.validated{ 
    background-color: #ffffff;   
    text-align: left;
    border:2px solid #ececec;
}
.validatedleft{

    background-color: #ffffff;  
    text-align: right;
    border:2px solid #f5f7f9;
}
.alert
{
    text-align: left;    
    border:2px solid #e87a04;
}
.alertleft
{
    text-align: right;    
    border:2px solid #e87a04;
}
.softalert
{
    text-align: left;    
    border:2px solid #ebc23e;
}
.softalertleft
{
    text-align: right;    
    border:2px solid #ebc23e;
}
table {
   margin: 0px;
    padding: 0px;
   border: 0px; 
}

tr {
    margin: 0px;
    padding: 0px;
}
td {
    margin: 5px;
    padding: 5px;
    border: 1px solid transparent;
}
td.mouseover {
    border: 2px solid rgb(130, 23, 90);
}

input[type='text']#replace {
    width: 10px; /* Only 10px wide */
    padding: 2px;
    margin-right: 5px;
}
label,
input[type='submit'] {
    margin: 5px 0;
    display: inline-block;
}

.small {
    background-color: #feffff;
    color:#6a7279;
    font-size: 11px; /* Text size */
}

.submit-button {
        background-color: #3170be; /* Green background */
        color: white; /* White text */
        padding: 4px 8px; /* Padding */
        border: none; /* Remove borders */
        border-radius: 5px; /* Rounded corners */
        cursor: pointer; /* Pointer cursor on hover */
        font-size: 14px; /* Font size */
    }
.csv_file {
    display: inline-block;
    background-color: #feffff;
    color: black; /* White text */
    padding: 10px 20px; /* Top and bottom padding, left and right padding */
    border: solid; /* No border */
    border-width: 2px;
    border-color: #2d7bc4;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 14px; /* Text size */
}

.csv_file:hover {
    background-color: #eef2f6; /* Darker red on hover */
}

.csv_file:focus, .csv_file:active {
    outline: none; /* Removes default outline */
    border-color: #1a53ff; /* Adds a custom focus or active state border color */
    box-shadow: 0 0 0 2px rgba(26, 83, 255, 0.5); /* Adds a glow effect for visibility */
}


button {
    background-color:#ffffff;
    color: rgb(0, 0, 0); 
    padding: 10px 20px; /* Top and bottom padding, left and right padding */
    border: solid; /* No border */
    border-width: 2px;
    border-color: #4b4b4b;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 14px; /* Text size */
}
input[type="submit"], button[type="submit"] {
  background-color: #feffff;
    color: black; /* White text */
    padding: 10px 20px; /* Top and bottom padding, left and right padding */
    border: solid; /* No border */
    border-width: 2px;
    border-color: #2d7bc4;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 14px; /* Text size */
    


    
}


.styled-button:hover {
    background-color:#eef2f6;; /* Darker green background on hover */
}

.styled-button-redo{
border-color:#119361;
}
.styled-button-redo:hover {
    background-color: #eef2f6; /* Darker red on hover */
}
.styled-button-numbers{
border-color:#e87a04;
}

.styled-button-numbers:hover {
    background-color: #eef2f6; /* Darker red on hover */
}

.styled-button-letters{
border-color:#c6e14e;
}

.styled-button-letters:hover {
    background-color: #eef2f6; /* Darker red on hover */
}
.styled-button-validated{
border-color:#119361;
    
}

.styled-button-validated:hover {
    background-color: #eef2f6; /* Darker red on hover */
}
.styled-button-reload{
border-color: #8a8a8a;
    
}

.styled-button-reload:hover {
    background-color: #eef2f6; /* Darker red on hover */
}


select#encodingSelect {
    background-color: #feffff;  /* Light blue background, similar to .csv_file */
    color: black;               /* Text color */
    padding: 10px 20px;         /* Padding similar to button */
    border: 2px solid #3982e9;  /* Solid border with color similar to .csv_file */
    border-radius: 5px;         /* Rounded corners */
    cursor: pointer;            /* Pointer cursor on hover */
    font-size: 14px;            /* Font size similar to other elements */
    width: 100%;                /* Optional: makes the select box full width of its container */
    box-sizing: border-box;     /* Ensures padding and border are included in width */
    -webkit-appearance: none;   /* Removes default styling by the browser */
    -moz-appearance: none;      /* Removes default styling by the browser */
    appearance: none;           /* Removes default styling by the browser */
    position: relative;         /* For positioning the dropdown icon */
}

/* Custom arrow for the select element */
select#encodingSelect {
    background-image: linear-gradient(45deg, transparent 50%, black 50%), 
                      linear-gradient(135deg, black 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Focus and Hover styles for select element */
select#encodingSelect:hover, select#encodingSelect:focus {
    background-color: #eef2f6;  /* Darker blue on hover */
    border-color: #3982e9;      /* Focus or active state border color */
    outline: none;
    
}
/* trashcan and checkmark */
   .fake-link {
        cursor: pointer;
        color: #0000EE; /* Typical link color */
        text-decoration: underline;
    }
    .fake-link:hover {
        color: #551A8B; /* Darker blue on hover */
    }