/* ==========================================================================
   Generelle regler for hårde tacs
   ==========================================================================*/

/*body, input, button, select, textarea    {  det går ikke lige nu (vinter -26) at sætte button med den bsckground */

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

input, button, select, textarea {             /* Ny klasse */
    font-family: verdana, sans-serif;
}

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;}
            
td		{
	font-size:12px;             /* med den her ved jeg ikke lige. Tror der skal laves en klasse til bogholderiet inden vi sletter den */
	line-height:1.3;
}

td.small		{font-size:10px}


h1, h2, h3, h4, h5, hr { text-align: center;}

h5  {font-size: 20px;}
h4  {font-size: 24px;}
h3  {font-size: 28px;}
h2  {font-size: 32px;}
h1  {font-size:36px;}
hr  {color:#000000;}
p   {font-size:12px;}

.gray			{background-color:#dddddd;}
.light		    {background-color:#eeeeee;}
.dark			{background-color:#ffffff;}
.yellow			{background-color:#ffff00;}
.green			{background-color:#00ff00;}
.blue			{background-color:#0000ff;}
.red			{background-color:#ff0000;}

/* 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 */