:root {
        --main-bg-color: #0275d8;
        /*--main-bg-color: #0275d8;*/
    }

    .bg-main {
        background: var(--main-bg-color) !important;
    }

    body { background:eee6e7 !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */

    h3 {
        margin: 0.4em 0 0.5em 0;
        font-weight: normal;
        position: relative;
        text-shadow: 0 -1px rgba(0,0,0,0.6);
        font-size: 28px;
        /*line-height: 1.3em;*/
        background: var(--main-bg-color);
        /*border: 1px solid #fff;*/
        padding: 2px 18px;
        color: white;
        border-radius: 0 10px 0 10px;
        box-shadow: inset 0 2 5px rgba(53,86,129, 0.5);
    }

       .ucard {
         /* Add shadows to create the "card" effect */
         box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
         transition: 0.3s;
         position:relative;
       }

      /* On mouse-over, add a deeper shadow */
      .ucard:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
      }

       .ucard-check {
         position: absolute;
         color: lightgreen;
         font-weight: bold;
         font-size: 60px;
         top: 155px;
         right: 8px;
         opacity: 0; /* start from 0, animate to 1 */
       }

       /* Add some padding inside the card container */
       .ucard-container {
         padding: 10px 16px;
       }

       /* */
       .ucard-title {
           min-height: 3em;
           max-height: 3em;
           font-weight: bold;
       }
       /* */
       .ucard-date {
           min-height: 3em;
           font-style: italic;
           font-size: 14px;
           color: #777777;
           /*text-align:center;*/
       }
       /* */
       .ucard-text {
           min-height: 10em;
           max-height: 10em;
           font-size: 14px;
           text-align: left;/*justify;*/
       }

        .form-label {
          display:block; text-align:right; vertical-align: middle;
        }
        .form-div {
          margin: 0px 0px 4px 0px;
        }


/* spacing */
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    width: 100%;
}

.styled-table thead tr th {
    background-color:  var(--main-bg-color);
    color: #ffffff;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}


/* Cookie stuff */
.cookie-container {
    background: var(--main-bg-color);
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  color: #f0f0f0;
  padding: 0 32px;
  box-shadow: 0 -2px 16px #2ac2ef;

  transition: 400ms;
}

.cookie-container.active {
  bottom: 0;
}

.cookie-container a {
  color: #eeeeee;
  text-decoration: underline;
}

.cookie-btn {
  background: #ffffff;
  border: 0;
  color: #000000;
  padding: 12px 48px;
  font-size: 18px;
  margin-bottom: 16px;
  border-radius: 8px;
  cursor: pointer;
}

.ucomment_header {
border-radius: 5px;
background: var(--main-bg-color);
color: white;
padding: 0.1em 0.5em;
}

.ucomment_content {

}

.ucomment {
    /*border: 1px solid silver;
    border-radius:  5px;
    border-color: #dddddd;*/
    padding: 0em 0em 1em 0em;
}

.contain300x300 {
  width:300px;
  height:300px;
  object-fit: contain;
}

.mb-5 {
  margin-bottom: 5px;
}

.colcenter {
  display: block;
  margin: 0 auto;
}

.upload_canvas_small {
  width_:200px;
  height_:200px;
}

.upload_canvas_full {
  display:none;
}

.itemimage {
  min-width:300px;
  width:100%;
  height:100%; 
  object-fit: contain; 
}