@import url('commonMdStyle.css');

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.ttf');
}

:root {
  /* Color Variables */
  --color-primary: indianred;
  --color-secondary: rgb(231, 74, 74);
  --color-accent: lightpink;
  --color-text: indianred;
  --color-text-light: gray;
  --color-text-dark: darkred;
  --color-background: linear-gradient(120deg, #fce8d8, #f5dcc4);
  --color-border: lightgray;
  --color-button-signup: olivedrab;
  --color-button-login: lightskyblue;
  --color-button-logout: red;
  --color-button-hover: white;

  /* Post Colors */
  --post-color-header: rgb(143, 116, 80);
  --post-color-primary: rgb(143, 116, 80);
  --post-color-secondary: burlywood;

  /* Background Variables */
  --background-body: url('/images/setup/ahi-griha.gif') fixed 98% 99% no-repeat, var(--color-background);
  --background-hr: url('/images/setup/hr-1.png') center/contain no-repeat;
  --background-hr-1: url('/images/setup/hr-3a.png') center/contain no-repeat;
  --background-hr-2: url('/images/setup/hr-3b.png') center/contain no-repeat;
  --background-hr-3: url('/images/setup/hr-2b.png') center/contain no-repeat;
  --background-hr-4: url('/images/setup/hr-2c.png') center/contain no-repeat;

  /* Font Size Variables */
  --font-size-base: 1rem;
  --font-size-small: 0.85rem;
  --font-size-xsmall: 0.80rem;
  --font-size-medium: 1.2rem;
  --font-size-large: 1.5rem;
  --font-size-xlarge: 1.7rem;
}

* {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto';
}

body {
  background: var(--background-body);
  background-size: 15vh, auto;
  padding: 2.5vh;
}

body>header {
    display: flex;
    justify-content: center;
    align-items: center;
}

body>header img {
    width: 8vh;
    min-width: 50px;
    height: auto;
}

body>header h1 {
    color: rgb(231, 74, 74);
    text-shadow: 0 0 5px rgb(255 159 159);
    filter: blur(0.6px) brightness(1.2);
    font-size: 1.7rem;
    text-align: center;
    /* animation: flicker 2s linear infinite forwards; */
    animation-delay: 1s;
}

body>header h1:hover {
    text-shadow: 0 0 25px rgb(255, 220, 238);
}

nav {
    display: block;
    text-align: center;
    margin: 2.5vh auto;
    margin-bottom: 5vh;
}

nav a {
    background-color: white;
    box-shadow: 3px 3px indianred;
    border: 1px solid indianred;
    color: indianred;
    padding: .8vh;
    font-size: 1em;
    transition: box-shadow .3s;
    border-radius: .5vh;
}

nav a:active {
    box-shadow: none;
}

.container {
    max-width: 330px;
    margin: 0 auto;
}

.container h2 {
    padding-left: .3vh;
    color: #ff8c8c;
}

form {
  margin: 0 auto;
  background: white;
  /* border-radius: 8px; */
  padding: 20px;
  /* box-shadow: 3px 3px #aaa, 0 4px 8px rgba(0, 0, 0, 0.1); */
  font-family: inherit;
  margin-bottom: 2.5vh;
  border: 1px solid #ccc;
border-radius: .5vh;
}

form h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #444;
}

form label {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 5px;
}

form input[type="text"],
form textarea,
form select {
  width: calc(100% - 10px);
  padding: 10px;
  margin-bottom: 15px auto;
  border: 1px solid #ccc;
  /* border-radius: 4px; */
  font-size: 1.1em;
  border-radius: .3vh;
  font-family: inherit;
}

form textarea {
  height: 80px;
}

form input[type='file'] {
  margin-left: .5vh;
}

form button[type="submit"] {
  background: #ff8c8c;
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  /* border-radius: 4px; */
  cursor: pointer;
  display: block;
  margin: 0 auto;
  transition: background 0.3s;
  border-radius: .5vh;

}

form button[type="submit"]:hover {
  background: #ff6b6b;
}

form .form-group {
  display: flex;
  flex-direction: column;
}

form .form-group.inline {
  flex-direction: row;
  gap: 10px;
}

form .form-group.inline>* {
  flex: 1;
}

select {
  height: 40px;
}

.server_response_dialogue_box {
  border: 1px solid brown;
  margin-top: 2.5vh;
  font-size: 1em;
  color: brown;
  padding: .5vh;
  box-shadow: 3px 3px brown;
  background-color: white;
  overflow: hidden;
}

.server_response_dialogue_box img {
  width: 100%;
  max-height: 150px;
}

table {
    width: 80%;
    min-width: 330px;
    max-width: 330px;
    margin: 0 auto;
    border-collapse: collapse;
    background: white;
    border-radius: .5vh;
    border: 1px solid #ccc;
    box-shadow: 3px 3px #aaa, 0 4px 8px rgba(0, 0, 0, 0.1); 
    overflow: hidden;
    margin-bottom: 2.5vh;
  }

  thead {
    color: white;
  }

  thead th {
    text-align: left;
    font-size: 16px;
    background-color: #d9534f;
  }
  
  .profile-pic {
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: .5vh;
    margin: .5vh;
    border-radius: 50%;
    background-color: white;
    box-shadow: 1px 1px 3px gray;
    border-radius: .5vh;
  }

  tbody th {
    text-align: left;
    padding-left: 1em;
  }

  tbody tr {
    border-bottom: 1px solid #ddd;
  }

  tbody tr:nth-child(even) {
    background: #f9f9f9;
  }

  tbody tr:hover {
    background: #ffe6e6;
  }

  td {
    padding: 10px;
    font-size: 14px;
    color: #555;
  }

  td a {
    color: #ff6b6b;
    text-decoration: none;
    font-weight: bold;
  }

  td a:hover {
    text-decoration: underline;
    color: #d9534f;
  }

  caption {
    font-size: 1.5em;
    margin-bottom: 10px;
    /* text-align: left; */
    font-weight: bold;
    color: #444;
  }

  .no-data-header {
    text-align: center;
  }

  form fieldset {
    border: 1px solid #aaa;
    padding: 10px;
    margin-bottom: 10px;
  }

  form fieldset legend {
    color: #666;
  }

  fieldset input {
    margin-left: .5vh;
  }

  thead th {
    text-align: center;
  }

  .user-profile th {
    text-align: left;
  }

  /* .user-profile img {
    background-color: #222;
  } */

  .tag-icon, .sys-icon {
    max-width: 50px;
    max-height: 50px;
    padding: .3vh;
  }

  .tag-icon-container, .sys-icon-container {
    display: inline-block;
    margin: .3vh;
    text-align: center;
    border: 1px solid #ddd;
    padding: .3vh;
    font-size: .8em;
  }