/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */


/* almennt fyrir alla skái */  
body {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: black;
  max-width: 500px;
  margin: 0 auto; /* Center the content horizontally */
}

#container {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: white;
  background-color: black;
  margin-top: 25vh;
}


/* titill á síðum */
.title-text {
  color: #D09E59; /* Color is #D09E59 */
  margin-top: 50px; /* Space on top is 10px */  
}

.header-login-index {
	position: absolute; 
	top: 0; 
	width: 500px; 
	text-align:right;
	padding-right: 10px;
	color: white; 
    box-shadow: 0 0 5px #D09E59;
 } 
	
 /* Set the default font color for the anchor element to yellow */
.header-login-index a {
    color: #D09E59;
    text-decoration: none; /* Remove default underline for links */
 }
/* Change the font color to orange on hover */
.header-login-index a:hover {
    color: white;
 }		
      
/* endar almennt fyrir alla skái */
   
/*                                                              */      
/*                        Desktop                               */
/*                                                              */
@media (min-width: 1024px) {
body {
    background-color: black;
}
.header-login-t_group {
   	background-color: yellow;
    display: flex;
    width: 500px;
    box-shadow: 0 0 5px #D09E59;
       }  

    /*velkomin username i header*/
.welcome-container {
    display: flex;          /* Flexbox to align items */
    align-items: center;    /* Center items vertically */
	background-color: red;
	
}
.welcome-text { 	  
    color: #D09E59;
    text-align:center;
	background-color: blue;
}

    /* END  velkomin username i header*/

      img {               /* mynd fyrir flokka */
        max-width: 500px;
      }
    }
	
/*                                                              */      
/*                        Tablet                                */
/*                                                              */
    @media (min-width: 768px) and (max-width: 1023px) {
      body {
        background-color: black;
        align-items: center;
        justify-content: flex-end;
        height: 100vh;
      }
      
      img {
        max-width: 300px;
      }
    }
/*                                                              */      
/*                        Mobile                                */
/*                                                              */
@media (max-width: 767px) {
   body {
    padding: 0;
    margin: 0;
   }
	  

.welcome-container {				   
    display: flex;          /* Flexbox to align items */
    align-items: center;    /* Center items vertically */
    width:99%
}
.welcome-text {
    top:3px;
	text-align:center;
	    color: #D09E59;
    }
	
      header {
        background-color: black;
        color: white;
      }

      

      img {
        max-width: 350px;
        margin-top: 0;
      }

      #container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 100vh;
      }
    	.header-login-index {
		position: absolute; 
		top: 0; 
		width: 95%; 
		text-align:right;
		padding-right: 10px;
		color: white; 
        box-shadow: 0 0 5px #D09E59;
		 } 
         
       .header-login-t_group {
	   background-color: white;
       display: flex;
       width: 95%; 
       box-shadow: 0 0 5px #D09E59;

       }  

    } /* mobile phone endar */


		 /* style fyrir index.php endar   */
    /**************** country_part.php ***************/
    .custom-checkbox {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
      border: 2px solid black;
      outline: none;
      cursor: pointer;
    }

    .custom-checkbox:checked {
      background-color: green;
    }
    
      /* Add the button style */
  button {
    background-color: orange;
    color: black;
	font-size: 20px;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 20px;
    box-shadow: 0 5px 10px rgba(255, 255, 255, 0.5);
	width: 80%;
    height: 80px;
  }

  /* Add the hover effect with white background color */
  button:hover {
    background-color: white;
	color: black;
  }
  
      /* Styles for the textbox */
    .textbox-container {
      width: 92%;
      background-color: darkgray;

      border-radius: 15px;
      box-shadow: 0 5px 10px rgba(255, 255, 255, 0.5);
      padding-left: 15px;
    }

    /* Style for the text inside the textbox */
    .textbox-text {
      color: black;
      font-size: 20px;
      font-weight: bold;
    }
   /********** END country_part.php ********** */
   /*******************************************/
   /********** begin login.php ********** *****/
 
	.logo-login {
 	    position: absolute; /* or fixed, depending on the desired behavior */
        top: 12%;
    }
    .logo-login img {
      width: 100px;
    }
     
   @media (max-width: 768px) {
    .logo-login img {
        width: 80px; /* or any size that fits your mobile design */
       }
    } 
   
   .form-container {
  width: 80%;
  background: darkgray;
  border-radius: 15px;
  box-shadow: 0 0 10px white;
  padding: 20px;
  margin: calc(25vh - 50px) auto;
 /*margin-top:20px;
 margin-bottom:5px;*/
}

input[type="text"],
input[type="email"],
input[type="password"] {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 15px;
  height: 25px;
  font-weight: bold;
  color: black;
  background-color: white;
  border-radius: 15px;
  padding-left: 20px;
  width: 90%;
  border: 1px solid darkgray  !important;
}

.loginButton {
  height: 30px;
  width: 50%;
  border: none;
  border-radius: 15px;
  font-size: 15px;
  font-weight: bold;
  color: #36454F;
  background-color: orange;
  box-shadow: 0 4px 10px white;
  cursor: pointer;
  margin-top: 20px;
  margin-righttop: 30px;
}

.loginButton:hover {
  background-color: green;
}

button.register,
button.forgotten,
button.password {
  background-color: orange;
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-weight: bold;
}

.form-row a {
  color: white;
  text-decoration: none; /* Removes the underline from links */
}
.form-row a:hover {
  color: green;
}
   /********** end login.php ********** */




   /********** footer.php ********** */