@font-face {
   font-family: 'Font Awesome 6 Free';
   src: url(/fileadmin/static/fonts/fa-solid-900.woff2) format("truetype");
 }

 #context_switcher {
   display: none;
 }

 #context_switcher label {
   margin-left: 5px;
 }


 /* Style the container to center the content */
 /* #search_container {
   width: 90%;
   max-width: 800px;
   background-color: #fff;
   padding: 30px;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
 } */

 /* Style the header */
 h1 {
   text-align: center;
   font-size: 2em;
   margin-bottom: 20px;
 }

 h2 {
   color: #2d3748;
   font-size: 1.5em;
   margin-bottom: 15px;
 }

 .introduction {
   font-size: 1em;
   color: #666;
   margin-bottom: 20px;
 }

 /* Style the form elements */
 #search_container form {
   display: flex;
   flex-direction: column;
 }

 #counter {
   margin-top: 0px;
   margin-bottom: 20px;
   text-align: right;
   font-size: 0.9em;
   color: #666;
 }

 #counter span {
   font-weight: bold;
 }

 #search_container textarea {
   resize: vertical;
   padding: 15px;
   font-size: 1.2em;
   margin-bottom: 10px;
   border: 1px solid #ccc;
   border-radius: 6px;
 }

 #submit {
   padding: 12px;
   font-size: 1.1em;
   background-color: #007BFF;
   color: #fff;
   border: none;
   border-radius: 6px;
   cursor: pointer;
 }

 #submit:hover {
   background-color: #0056b3;
 }

 .rating {
   display: flex;
   direction: row;
   font-size: 1.5em;
   justify-content: center;
   visibility: hidden;
 }

 .rating button {
   background: none;
   border: none;
   cursor: pointer;
   color: gray;
   transition: color 0.3s;
 }

 .rating button.gold {
   color: gold;
 }

 #error {
   color: red;
   font-weight: bold;
 }


 /* Style the response area */
 #response {
   margin-top: 30px;
   font-size: 1.2em;
   color: #2d3748;
   width: 100%;
   line-height: 1.5em;
 }

 /* spinner */

 .outer {
   overflow: auto;
 }

 #spinner {
   display: none;
   margin: 10px auto;
   max-width: 84px;
 }


 .lds-spinner,
 .lds-spinner div,
 .lds-spinner div:after {
   box-sizing: border-box;
 }

 .lds-spinner {
   color: currentColor;
   display: inline-block;
   position: relative;
   width: 80px;
   height: 80px;
 }

 .lds-spinner div {
   transform-origin: 40px 40px;
   animation: lds-spinner 3.3s linear infinite;
 }

 .lds-spinner div:after {
   content: " ";
   display: block;
   position: absolute;
   top: 3.2px;
   left: 36.8px;
   width: 6.4px;
   height: 17.6px;
   border-radius: 20%;
   background: currentColor;
 }

 .lds-spinner div:nth-child(1) {
   transform: rotate(0deg);
   animation-delay: -3.3s;
 }

 .lds-spinner div:nth-child(2) {
   transform: rotate(30deg);
   animation-delay: -3s;
 }

 .lds-spinner div:nth-child(3) {
   transform: rotate(60deg);
   animation-delay: -2.7s;
 }

 .lds-spinner div:nth-child(4) {
   transform: rotate(90deg);
   animation-delay: -2.4s;
 }

 .lds-spinner div:nth-child(5) {
   transform: rotate(120deg);
   animation-delay: -2.1s;
 }

 .lds-spinner div:nth-child(6) {
   transform: rotate(150deg);
   animation-delay: -1.8s;
 }

 .lds-spinner div:nth-child(7) {
   transform: rotate(180deg);
   animation-delay: -1.5s;
 }

 .lds-spinner div:nth-child(8) {
   transform: rotate(210deg);
   animation-delay: -1.2s;
 }

 .lds-spinner div:nth-child(9) {
   transform: rotate(240deg);
   animation-delay: -0.6s;
 }

 .lds-spinner div:nth-child(10) {
   transform: rotate(270deg);
   animation-delay: -0.3s;
 }

 .lds-spinner div:nth-child(11) {
   transform: rotate(300deg);
   animation-delay: -0.1s;
 }

 .lds-spinner div:nth-child(12) {
   transform: rotate(330deg);
   animation-delay: 0s;
 }

 @keyframes lds-spinner {
   0% {
     opacity: 1;
   }

   100% {
     opacity: 0;
   }
 }

 .links ol {
   list-style-position: inside;
   padding-left: 0;
 }

 .links ol li {
   padding: 15px;
   margin-bottom: 20px;
   border: 1px solid #ddd;
   border-radius: 5px;
   background-color: #f9f9f9;
 }

 .links ol li .domain {
   display: block;
   font-weight: bold;
   font-size: 1.1em;
   color: #333;
   margin-bottom: 10px;
 }

 .links ol li .file {
   font-size: 1em;
   margin-top: 5px;
 }

 .links ol li .file a {
   color: #0066cc;
   text-decoration: none;
 }

 .links ol li .file a:hover {
   text-decoration: underline;
 }

 .links ol li .file .page {
   color: #555;
   margin-left: 10px;
   font-style: italic;
 }


 #search_container .feedback-button {
   display: inline-block;
   padding: 12px 24px;
   background-color: #007BFF;
   /* Blue background */
   color: white;
   /* White text */
   text-align: center;
   text-decoration: none;
   border-radius: 8px;
   /* Rounded corners */
   font-size: 16px;
   /* Font size */
   font-family: Arial, sans-serif;
   /* Font family */
   transition: background-color 0.3s ease;
   /* Smooth transition for hover effect */
 }

 .feedback-button:hover {
   background-color: #0056b3;
   /* Darker blue on hover */
 }


 fieldset {
   border: none;
   margin-bottom: 10px;
   /* color: #666; */
 }

 strong a:link {
   text-decoration: none;
 }

 #sources {
   font-family: Arial, sans-serif;
   color: #333;
 }

 .domain_section {
   margin-bottom: 20px;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   background-color: #f9f9f9;
 }

 .domain_section h3 {
   font-size: 1.2em;
   margin: 0;
   padding: 0;
 }

 .domain_section h3 a {
   text-decoration: none;
   color: #0073e6;
   transition: color 0.3s;
 }

 .domain_section h3 a:hover {
   color: #005bb5;
 }

 #search_container ul {
   list-style-type: none;
   padding: 10px 0;
   margin: 0;
 }

 #search_container ul li {
   margin-bottom: 10px;
   line-height: 1.5;
   position: relative;
   padding-left: 25px;
 }

 #search_container ul li a {
   text-decoration: none;
   color: #333;
   border-bottom: 1px #aaa;
   transition: color 0.3s, border-bottom-color 0.3s;
   position: relative;
 }

 #search_container ul li a:hover {
   color: #0073e6;
   border-bottom-color: #0073e6;
 }

 #search_container ul li a::after {
   content: '';
   display: none;
   position: absolute;
   left: 0;
   top: 100%;
   width: max-content;
   background: #fff;
   color: #333;
   border: 1px solid #ccc;
   padding: 5px;
   font-size: 0.85em;
   z-index: 10;
   white-space: nowrap;
 }

 /* ul li a:hover::after {
   content: attr(title);
   display: block;
 } */

 #response ul li a:before {
   content: "\f0c1 \00a0";
   font-family: 'Font Awesome 6 Free';
   font-size: 20px;
 }

 #response a[href$=".pdf"]:before {
   content: "\F1C1 \00a0";
   font-family: 'Font Awesome 6 Free';
   font-size: 20px;
 }

 /* Styles for the info sign */
 #search_container span.info_sign {
   color: darkgrey;
   font-family: "Font Awesome 6 Free";
 }

 #search_container span.info_sign:hover {
   color: #0073e6;
   cursor: pointer;
 }

 #search_container span.info_sign:before {
   content: "\f05a";
   /* FontAwesome info-circle icon code */
   font-size: 20px;
   margin-left: 10px;
 }


 #response li.book_review a::before {
   content: "\f02d";
   font-family: 'Font Awesome 6 Free';
   font-weight: 900;
   margin-right: 6px;
   color: #5a7a6a;
 }


 /* Styles for the context box */
 .context_box {
   display: none;
   position: absolute;
   left: 100%;
   top: 0;
   width: 300px;
   background: #fff;
   color: #333;
   border: 1px solid #ccc;
   padding: 10px;
   font-size: 0.9em;
   z-index: 10;
   white-space: normal;
   word-wrap: break-word;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

 #alternatives {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 20px;
   background-color: transparent;
   border: none;
 }

 #alternatives .grid-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
   gap: 15px;
   width: 100%;
 }

 #alternatives .grid-item {
   padding: 15px;
   background-color: #f8f9fa;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   text-align: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s, box-shadow 0.2s;
 }

 #alternatives .grid-item a {
   text-decoration: none;
   /* color: #0061c9; */
   font-size: 18px;
   font-weight: 500;
 }

 #alternatives .grid-item a:hover {
   text-decoration: underline;
   /* color: #0056b3; */
 }

 #alternatives .grid-item:hover {
   transform: translateY(-3px);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
 }

 /* 
 @media (min-width: 768px) {
   #alternatives .grid-container {
     width: 66.6%;
   }
 } */