/*
  Einige Konstanten für
  [1] Color Background
  [2] Color List Item Background
  [3] Color List Item Highlight
  [4] Color List Item Foreground (Font)
*/

:root {
  --cl-bg: #fff;        /* 1 */
  --cl-li-bg: #eee;     /* 2 */
  --cl-li-hl: #d4d4d4;  /* 3 */
  --cl-li-fg: #900;     /* 4 */
}


.cs-aqua {
  --cl-bg: #b3f8ff;        /* 1 */
  --cl-li-bg: #91c9d0;     /* 2 */
  --cl-li-hl: #a2e0e7;  /* 3 */
  --cl-li-fg: #900;     /* 4 */
}


#content .dl ul,
.dl ul {
  /* Entfernen des paddings um UL, --> linksausrichten des Layouts. */
  padding: 0px;
  margin:  0px;
}

/*
 Entfernt die durch das UB Design vorgegebenen Style-Regeln die allgemein nicht benötigt werden.
  [1] Entfernen der quadratischen Bilder als Aufzaehlelement von ul li
  [2] Entfernen des paddings um durchgängigen Rahmen über border zu erstellen.
*/
#content .dl ul li,
.dl ul li {
  background-image: initial;  /* 1 */
  padding: 0px;               /* 2 */
  margin:  0px;
}






/*
  Formular Layout
*/

#content .dl .digi-form,
.dl .digi-form {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

  #content .dl .digi-form input[type=submit],
  #content .dl .digi-form input[type=button],
  #content .dl .digi-form input[type=text],
  #content .dl .digi-form select,
  #content .dl .digi-form option,
  #content .dl .digi-form label
  .dl .digi-form input[type=submit],
  .dl .digi-form input[type=button],
  .dl .digi-form input[type=text],
  .dl .digi-form select,
  .dl .digi-form option,
  .dl .digi-form label
  {

    font-size: 14px;

    margin-left: 5px;
    /*
    width: 150px;
     */
  }

  #content .dl .digi-form select,
  #content .dl .digi-form option,
  #content .dl .digi-form input[type=submit],
  #content .dl .digi-form label ,
  .dl .digi-form select,
  .dl .digi-form option,
  .dl .digi-form input[type=submit],
  .dl .digi-form label
  {
    display: inline-block;
    text-align: right;

    /* width: 166px; */
  }





/*
  Paginierung
*/

#content .dl .pagination,
.dl .pagination {
  display: inline-block;
  list-style-type: none;
  alignment: center;
  background: initial;
}
  #content .dl .dl-pag-btn.prefix,
  .dl .dl-pag-btn.prefix{
    border: none;
    cursor: default;
    background-color: transparent;
  }
  #content .dl .dl-pag-btn.prefix:hover:not(.active),
  .dl .dl-pag-btn.prefix:hover:not(.active) {
    background-color: transparent;
  }

#content .dl .dl-pag-btn,
.dl .dl-pag-btn {
  color: black;
  float: left;
  text-decoration: none;
  font-size: 14px;
  margin: 2px;
  padding: 2px;
  cursor: pointer;
  border: 1px solid var(--cl-li-bg);
}
  #content .dl .dl-pag-btn:hover:not(.active),
  .dl .dl-pag-btn:hover:not(.active) {
    background-color: var(--cl-li-hl);
  }


#content .dl .dl-pag-empty,
.dl .dl-pag-empty {
  color: red;
  cursor: not-allowed;
}


#content .dl .dl-pag-btn.selected,
.dl .dl-pag-btn.selected {
  background-color: var(--cl-li-bg);
  border: 1px solid var(--cl-li-hl);
}





/*
  Liste
*/
#content .dl .dl-list,
.dl .dl-list {
  margin-left: 0px;
}

#content .dl .dl-entry,
.dl .dl-entry {
  padding-left: 0px;
  margin-bottom: 2px;
  overflow: auto;
  background: var(--cl-li-bg);
}

#content .dl .dl-entry:hover,
.dl .dl-entry:hover {
  background: var(--cl-li-hl);
}

#content .dl .dl-entry-link,
.dl .dl-entry-link {
  color: var(--cl-li-fg);
  text-decoration: none;
}

#content .dl .dl-icon,
.dl .dl-icon {
  float: right;
  margin-right: 5px;
  border-bottom-style: none;
  border-left-style: none;
  border-right-style: none;
  border-top-style: none;
}

#content .dl .dl-img,
.dl .dl-img {
  /*allign*/
  float: left;
  object-fit: cover;
  /*geometry*/
  height: 75px;
  width: 50px;
  margin-right: 5px;
  padding: 5px;
  border-right: 2px;
  border-right-color: var(--cl-bg);
  border-right-style: solid;
}





/*
  Loading Spinner
*/
#content .dl .loader,
.dl .loader {
  border: 8px solid var(--cl-li-bg);
  border-radius: 50%;
  border-top: 8px solid var(--cl-li-fg);
  width: 40px;
  height: 40px;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}