body		{font-size:0.8em; margin:10px; background-color:#ffffff}

body    {
    margin: 0;
    font-family: verdana, sans-serif;
    font-size:1em;
    background-color:#ffffff;
    color: #000000;
}


img			{border:none}

td		{font-family:verdana; font-size:11px; color:666666}
h5		{font-family:verdana; font-size:15px}
h4		{font-family:verdana; font-size:20px}
h3		{font-family:verdana; font-size:25px}
h2		{font-family:verdana; font-size:30px; color:666666}
h1		{font-family:verdana; font-size:35px}
hr		{color:ff9600}
p		{font-family:verdana; font-size:11px; color:666666; line-height:1.3}

td.graphics		{font-family:verdana; font-size:11px; color:ffffff}
h5.graphics		{font-family:verdana; font-size:15px}
h4.graphics		{font-family:verdana; font-size:20px}
h3.graphics		{font-family:verdana; font-size:25px}
h2.graphics		{font-family:verdana; font-size:30px; color:ffffff}
h1.graphics		{font-family:verdana; font-size:35px}
hr.graphics		{color:cccccc}
p.graphics		{font-family:verdana; font-size:11px; color:ffffff; line-height:1.3}

a:link      {text-decoration:none; color:#771100;}
a:visited   {text-decoration:none; color:#771100;}
a:hover		{text-decoration:none; color:#ff1100;}
a:active    {text-decoration:none; color:#ff1100;}


a:link.text		{color:ff9600; text-decoration:none; font-weight:bold}
a:active.text		{color:ff0000; text-decoration:none; font-weight:bold}
a:visited.text		{color:ff9600; text-decoration:none; font-weight:bold}
a:hover.text		{color:ff0000; text-decoration:none; font-weight:bold}

a:link.menu		{color:ff9600; text-decoration:none; font-weight:bold}
a:active.menu		{color:ff0000; text-decoration:none; font-weight:bold}
a:visited.menu		{color:ff9600; text-decoration:none; font-weight:bold}
a:hover.menu		{color:ff0000; text-decoration:none; font-weight:bold}

.bigfont		{font-family:verdana; font-size:30px; color:#cc6900}
.tablecolors 		{background-color:#666666}
.tablecolors_text	{background-color:#ffffff}	
.framecolors 		{background-color:#ff9600}
.light				{background-color:#eeeeee}

/* login login login login login login login login login login login login login login login login login login login login */

.login  {
    color:#771100;}

.border_login {border: 2px solid #771100;}

.panel  {                                   /* bruges også i voucher */
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    margin: 20px auto;
}

.login_panel {                              /* bruges også i voucher */
    width: 300px;
    max-width: 90%;
}

.main {                                     /* bruges også i voucher */
    width: 90%;
    max-width: 800px;
}

.button_login {                        /* bruges i search.php, search_id.php, create_password.php, login.php */
    font-size: 20px;
    font-weight: bold;
    background-color: #771100;
    color: #ffffff;
    padding: 15px;
    width: 100%;
    border-radius: 4px;
    border: 2px solid #330100;
    cursor: pointer;
    box-shadow: 0 4px #330100;
}

.button_login:hover {                 /* bruges i search.php, search_id.php, create_password.php, login.php */
    background-color: #771100;
    box-shadow: none;
    transform: translateY(4px);
}

.button_login:active {                /* bruges i search.php, search_id.php, create_password.php, login.php */
    background-color: #771100;
    box-shadow: none;
    transform: translateY(4px);
}

/* Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu */

a.menu:link, a.menu:visited, a.menu:hover, a.menu:active {font-size: 16px;}


/* Finance Finance Finance Finance Finance Finance Finance Finance Finance Finance Finance Finance Finance Finance Finance */

a.draft:link   {
	color:#0000ff;
	font-weight:bold
}

a.draft:visited   	{
	color:#0000ff;
    font-weight:bold;
}

a.draft:hover   {
	color:#ff1100;
	font-weight:bold;
}

a.draft:active   {
	color:#0000ff;
	font-weight:bold;
}

a.delete:link   	{color:#dddddd;}
a.delete:visited	{color:#dddddd;}
a.delete:hover      {color:#ffffff;}
a.delete:active     {color:#ffffff;}

.matched    {color: #999999;}

.draft	{
    color:#0000ff;
    font-weight:bold;
}

/* Voucher Voucher Voucher Voucher Voucher Voucher Voucher Voucher Voucher Voucher Voucher Voucher Voucher Voucher Voucher */

.voucher    {color: #4b0082;}

.border_voucher {border: 2px solid #4b0082;} /*4b0082*/

.h4_voucher {                           /* bruges i search.php, search_id.php, create_password.php, login.php, show_voucher.php */
    margin-top: 0px;
    margin-bottom: 20px;
    display: block;
}

.h4_alert {                             /* bruges i search.php, search_id.php, create_password.php, login.php */
    color: #E63946;
    margin-top: 0px;
    margin-bottom: 20px;
    display: block;
}   

.p_voucher {                            /* bruges i search.php, search_id.php, create_password.php, login.php */
    text-align: center;                 /* Centreret kun for denne klasse */
    margin-bottom: 20px;
    display: block;
}

.p_alert {                              /* bruges i search.php, search_id.php, create_password.php, login.php */
	color: #E63946;  
    text-align: center;
    margin-bottom: 20px;
    display: block;
}

.label_voucher {                        /* bruges i search.php, search_id.php, create_password.php, login.php */
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    display: block;
    width: 100%;
    min-height: 25px;
    margin-bottom: 10px;
    visibility: visible;
    opacity: 1;
}

.input_voucher {                        /* bruges i search.php, search_id.php, create_password.php, login.php */
    font-size: 20px;                    /* Vigtigt: Min. 16px for at undgå auto-zoom på iPhone */
    padding: 12px;
    width: 100%;
    border-radius: 4px;
    box-sizing: border-box;             /* Holder input indenfor boksen */
    margin-bottom: 20px;
    outline: none;
}

.button_voucher {                        /* bruges i search.php, search_id.php, create_password.php, login.php */
    font-size: 20px;
    font-weight: bold;
    background-color: #4b0082;
    color: #ffffff;
    padding: 15px;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px #2e004d;
}

.button_voucher:hover {                 /* bruges i search.php, search_id.php, create_password.php, login.php */
    background-color: #6a0dad;
    box-shadow: none;
    transform: translateY(4px);
}

.button_voucher:active {                /* bruges i search.php, search_id.php, create_password.php, login.php */
    background-color: #6a0dad;
    box-shadow: none;
    transform: translateY(4px);
}

.logout {
    background-color: #E63946;
    box-shadow: 0 4px #b02a33;
}

.logout:hover {
    background-color: #ff5f6d;
    box-shadow: none;
    transform: translateY(4px);
}

.logout:active {
    background-color: #ff5f6d;
    box-shadow: none;
    transform: translateY(4px);
}

.h5_voucher {                           /* bruges i show_voucher.php */
    color: #4b0082;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    display: block;
} 

.green-card {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    background-color: #00b300;
    padding: 20px;
    border-radius: 8px;
    margin-top: 0px;
}
            
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.list {                             /* bruges i show_voucher.php */
    display: flex;
    flex-direction: column;
    gap: 10px;
 /*   font-size: 14px;*/
}

.voucher-row {                              /* bruges i show_voucher.php */
    border: 2px solid #4b0082;
    padding: 10px;
    margin-bottom: 0px;
    border-radius: 8px;
    display: flex;                          /* Flex-egenskaberne der gør, at de indre div'er (top/bund) kan styles */
    flex-direction: column;
    gap: 8px;                               /*Afstand mellem dato-linjen og beløbs-linjen */
}

.row-top, .row-bottom {
    display: flex;
    justify-content: space-between; /* Skubber indholdet ud til siderne */
    align-items: center;
}

.date { color: #888; font-size: 0.8rem; }       /* bruges i show_voucher.php */ 
.text {font-weight: bold;}                      /* bruges i show_voucher.php */
.saldo {font-weight: bold;}                     /* bruges i show_voucher.php */
.deposit {font-weight: bold; color: green; }    /* bruges i show_voucher.php */
.withdrawal {font-weight: bold; color: red; }   /* bruges i show_voucher.php */