/*
Bootstrap 5 uses CSS variables. You can use app-related variables in this file. The standard Bootstrap values are used as a fallback 
Check our Docs for more information: https://go.2sxc.org/app-theme
*/

:root {
  --bs-primary-fallback-app-news: #0060AC;
  --bs-body-color-fallback-app-news: #222;
  --bs-link-color-fallback-app-news: #0060AC;
  --bs-dark-rgb-fallback-app-news: 33, 37, 41;
  --bs-gutter-x-fallback-app-news: 30px;
  --bs-body-font-size-fallback-ap-news: 1rem;
}

.app-news5-details-link {
  /* Box model & Layout */
  border: 1px solid #ccc;
  border-radius: 10px;
  padding-bottom: 30px;
  overflow: hidden;
  /* Misc */
  cursor: pointer;
  text-decoration: none !important;
}

.app-news5-details-link:hover {
  /* Visual styling */
  box-shadow: 2px 2px 4px #ccc;
  /* Transitions */
  transition: all 0.5s ease;
}

.app-news5-details-link .app-news5-text {
  /* Box model */
  padding: 20px;
  position: relative;
}

span.app-news5-categories {

  padding: 5px;
  position: absolute;
  box-shadow: 2px 2px 4px #ccc;
  /* Transitions */
  transition: all 0.5s ease;
  /* Visual styling */
  background: #fed03d;
  color: #000 !important;
      top: -35px;
}

.app-news5.app-news5-list .app-news5-details-link .app-news5-text .app-news5-categories a {
  /* Typography */
  color: black;
  text-decoration: none;
  text-transform: none !important;
}

.app-news5.app-news5-list .app-news5-details-link:hover .app-news5-text h2,
.app-news5.app-news5-list .app-news5-details-link:hover .app-news5-text h3 {
  /* Visual styling */
  color: black !important;
}

.app-news5.app-news5-list .app-news5-details-link:hover .app-news5-img span {
  /* Visual styling */
  background: transparent !important;
}