html {
   height: 100vh;
}

body {
   height: auto;
   min-height: 100vh;
   padding-top: 25px;
   padding-bottom: 25px;
   background: var(--bg-bright, radial-gradient(83.78% 92.56% at 70.24% 87.57%, rgba(65, 15, 96, 0.24) 0%, rgba(0, 0, 0, 0.48) 43.48%, rgba(52, 19, 68, 0.48) 69.5%, rgba(106, 0, 156, 0.48) 100%), url(../img/bg1.webp) lightgray 50% / cover no-repeat);
}

nav.navbar {
   background: transparent;
   font-family: Mulish;
}

.navbar-brand a {
   font-size: 32px;
   font-style: normal;
   font-weight: 900;
   line-height: 48px;
   color: #FFF;
}

.navbar-brand a.navbar-item:hover,
.navbar-brand a.navbar-item:focus
 {
   --bg-size: 200%;
   --color-one: #C741F4;
   --color-two: #66F5FA;
   background: linear-gradient(90deg,
         var(--color-one),
         var(--color-two),
         var(--color-one)) 0 0 / var(--bg-size) 100%;
   color: transparent;
   background-clip: text;
   -webkit-background-clip: text;
   animation: move-bg 8s infinite linear;
}

#admin-nav .navbar-menu a {
   color: #B0B0B0;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
}

#admin-nav .navbar-start a:hover, #admin-nav .navbar-start a:active, #admin-nav .navbar-start a:focus {
   background: transparent;
   color: #FFF;
}

#header-container {
   padding-bottom: 17px;
   align-items: center;
   margin-top: 65px;
   margin-bottom: 60px;
}

.tagline-container h1.title.is-1 {
   color: #FFF;
   text-align: center;
   font-family: Mulish;
   font-size: 48px;
   font-style: normal;
   font-weight: 700;
   line-height: 58px;
   margin-top: 0;
   margin-bottom: 0;
}

.tagline-container h3.title.is-3 {
   color: #FFF;
   text-align: center;
   font-family: Mulish;
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 30px;
}

.tagline-container .has-text-blue {
   color: #66F5FA;
}

#search-filter-container {
   margin-top: 40px;
}

#search-filter-container ::placeholder,
.tags-input ::placeholder {
   color: #B0B0B0;
   opacity: 0.6;
   /* Firefox */
}

#search-filter-container ::-ms-input-placeholder,
::-ms-input-placeholder .tags-input {
   /* Edge 12 -18 */
   color: #B0B0B0;
}

#search-filter-container button {
   display: flex;
   height: 40px;
   padding: 8px 16px;
   justify-content: center;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
   border-radius: 25px;
}

#search-filter-container input {
   border-radius: 25px;
   background: rgba(0, 0, 0, 0.25);
   /* backdrop-filter: blur(0px); */
   color: #DBDBDB;
}

#search-filter-container input.input:active,
#search-filter-container input.input:focus {
   border: 1px solid #C741F4;
   /* box-shadow: 0 0 0 .125em rgba(72, 95, 199, .25); */
}

#search-filter-container .tags-input {
   background: rgba(0, 0, 0, 0.25);
   border-radius: 25px;
   border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
   color: #DBDBDB;
}

#search-filter-container .tags-input:has(.tag),
#new-tool-form .tags-input:has(.tag),
#edit-tool-form .tags-input:has(.tag),
#add-to-album-modal .tags-input:has(.tag)
{
   padding: 10px;
}

#search-filter-container .tags-input input,
#new-tool-form .tags-input input,
#edit-tool-form .tags-input input,
#add-to-album-modal .tags-input input
{
   background: transparent;
}

#keyword {
   /* min-width: 500px; */
}

#add-to-album-modal .modal-card-body:has(.tags-input):has(.tag:nth-child(2)) {
   height: 300px;
}

#filter-container {
   margin-top: -1.8em;
}

.button.is-blue {
   border-color: #00BABA;
   background: #00BABA;
   text-transform: uppercase;
}

.button.is-blue:hover {
   background: #33c8c8;
}

.button.is-violet {
   border-color: #C741F4B3;
   background: #C741F4B3;
   text-transform: uppercase;
}

.file-cta.is-blue {
   border-color: #00BABA;
   border-radius: 25px;
   /* background: #00BABA; */
   color: #000;
}

.file-label .file-name {
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
}

.button.is-blue.is-transparent {
   border-radius: 20px;
   border: 1px solid #00BABA;
   background: transparent;
   color: #FFF;

   font-family: Mulish;
   line-height: 21px;
   letter-spacing: 2.24px;
   text-transform: uppercase;
   font-style: normal;
   font-weight: 400;
}

.button.is-blue.is-transparent:hover, .button.is-blue.is-transparent:active {
   background-image: linear-gradient(to right, #2b5876, #C741F4B3);
   background-position: 100% 0;
   box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}

#load-more {
   margin: 50px auto 0 auto;
   font-size: 14px;
}

.img-container {
   height: 80px;
   width: auto;
}

.tool-child .card {
   border-radius: 12px;
   border: 0.5px solid rgba(219, 219, 219, 0.20);
   background: rgba(174, 174, 174, 0.24);
   color: #FFF;
   font-family: Mulish;
   cursor: pointer
}

.tool-child .card:hover {
   background: rgba(174, 174, 174, 0.3);
   box-shadow: rgba(255, 255, 255, 0.3) 0px 7px 29px 0px;
}

.tool-child .card .name {
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
   line-height: 24px;
}

.tool-child .card .details {
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 18px;
   margin-top: 4px;
}

.tool-child .card .tags {
   margin-top: 12px;
   min-height: 56px;
}

.tool-child .card .tag{
   border-radius: 30px;
}

.tool-child .card .tag.is-skeleton{
   background-color: var(--bulma-skeleton-background) !important;
}

.tool-child .card a.url-link{
   background: transparent;
   padding: 2px 10px;
   border-radius: 13px;
   border: 0.5px solid #EDEDED;
   margin-left: 7px;
   margin-top: -5px;
}

.tool-child .card a .material-symbols-outlined {
   color: #EDEDED;
   font-size: 14px;
}

.tool-child footer {
   border-top: 1px solid rgba(237, 237, 237, 0.20);
   font-size: 14px;
}

.tool-child footer .material-icons {
   font-size: 17px;
   margin-right: 0.3em;
}

.tool-child .card-footer-item:not(:last-child) {
   border-right: 1px solid rgba(237, 237, 237, 0.20);
}

.tool-child a.card-footer-item {
   color: #FFF;
   opacity: 0.48;
}

.tool-child a.card-footer-item:hover {
   background: linear-gradient(to right, #C741F4, #66F5FA);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   opacity: 1;
}

footer .content {
   color: #EDEDED;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 21px;
}

#banner {
   position: relative;
   height: 240px;
   border-radius: 16px;
   /* margin-bottom: 64px; */
   margin-top: 65px;

   background-image: linear-gradient(90deg, #2C0051 0%, rgba(54, 54, 54, 0.00) 20.5%, #350061 95.5%), url(../img/subfooter-bg.webp);
   background-color: #1B0031;
   ;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-blend-mode: multiply, normal, normal;
   backdrop-filter: blur(2px);
}

#banner .content {
   position: relative;
   height: inherit;
}

#banner .content .title{
   color: #FFF;
   font-size: 24px;
   font-style: normal;
   font-weight: 400;
   margin-bottom: 12px;
}

#banner .title a {
   background: linear-gradient(to right, #C741F4, #66F5FA);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   opacity: 1;
}

#banner .content .subtitle{
   color: #B5B5B5;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   margin-top: 0;
   margin-bottom: 12px;
}

#banner .social-media {
   gap: 10px;
}

#banner .social-media a{
   color: #FFF;
}

.tool-child .main {
   display: grid;
   grid-template-columns: 80px 1fr;
   column-gap: 20px;
}

.tool-child .main img {
   border-radius: 8px;
}

#add-to-album-modal .modal-card, #new-tool-modal .modal-card, #edit-tool-modal .modal-card, .modal-content .card {
   backdrop-filter: blur(2px);
   border-radius: 20px;
   background: linear-gradient(#1B1622, #1B1622) padding-box,
              linear-gradient(to right, #C741F4, #66F5FA ) border-box;
   border: 2px solid transparent;
}

.modal.is-active .modal-card-title, .modal.is-active label {
   color: #FFF;
}

.modal-card-head {
   box-shadow: none;
}

.modal.is-active label {
   font-family: Mulish;
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
   line-height: 21px;
}

.modal.is-active input,
.modal.is-active textarea {
   border-radius: 20px;
   /* border: 1px solid rgba(174, 174, 174, 0.24); */
   background: rgba(74, 74, 74, 0.80);
   color: #DBDBDB;
}

#edit-tool-form .tags-input.is-filter input,
#new-tool-form .tags-input.is-filter input {
   color: #EDEDED;
}

#edit-tool-form .tags-input:has(.tag) input,
#new-tool-form .tags-input:has(.tag) input,
#filter-container .tags-input:has(.tag) input {
   border: 1px solid rgba(174, 174, 174, 0.24)
}

.modal.is-active .tags-input {
   background: rgba(74, 74, 74, 0.80);
   border: 1px solid rgba(174, 174, 174, 0.24);
   border-radius: 20px;
}

.modal.is-active .tags-input.is-filter input {
   /* border: 1px solid rgba(174, 174, 174, 0.24); */
   background: rgba(74, 74, 74, 0.80);
}

.modal header, .modal section, .modal footer {
   background: #1B1622;
   border-bottom: 0;
   border-top: 0;
}

.modal header {
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
}

.modal header {
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
}

.modal header {
   text-align: center;
   font-size: 18px;
   font-style: normal;
   font-weight: 700;
   line-height: 27px;
}

#new-album-modal header{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tags-space {
   height: 24px;
}

@media (prefers-reduced-motion: no-preference) {
   .navbar-brand a:hover {
      animation: move-bg 5s linear infinite;
   }

   @keyframes move-bg {
      to {
         background-position: var(--bg-size) 0;
      }
   }
}

.tool-parent {
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(auto-fit, 385px);
   justify-content: center;
}

#view-tool-modal {
   font-family: Mulish;
}

#view-tool-modal .main {
   display: grid;
   grid-template-columns: 100px 1fr;
   column-gap: 20px;
}

#view-tool-modal .main .name {
   color: #FFF;
   font-size: 24px;
   font-style: normal;
   font-weight: 700;
   line-height: 28.8px;
}

#view-tool-modal .main img {
   width: 100px;
   height: 100px;
   border-radius: 8px;
}

#view-tool-modal a.url-link {
   background: transparent;
   padding: 2px 10px;
   border-radius: 13px;
   border: 0.5px solid #EDEDED;
   margin-top: 10px;

   color: #B0B0B0;
   font-size: 12px;
   font-weight: 400;
   line-height: 15px;
}

#view-tool-modal a .material-symbols-outlined {
   margin-left: 0.5em;
   color: #EDEDED;
   font-size: 14px;
}

#view-tool-modal .details {
   color: #FFF;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 16px;
   margin-top: 20px;
   margin-bottom: 20px;
}

#view-tool-modal .filters-container {
   border-top: 1px solid rgba(237, 237, 237, 0.3);
   padding-top: 20px;
   padding-bottom: 20px;
   color: #B0B0B0;
}

#view-tool-modal .filters-container .filters {
   display: grid;
   grid-template-columns: 100px 1fr;
   column-gap: 20px;
   margin-bottom: 10px;
}

#view-tool-modal .tool-tags {
   border-top: 1px solid rgba(237, 237, 237, 0.3);
   display: grid;
   grid-template-columns: 100px 1fr;
   column-gap: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
   color: #B0B0B0;
}

#view-tool-modal .socials {
   padding-top: 20px;
   border-top: 1px solid rgba(237, 237, 237, 0.3);
   color: #B0B0B0;
}

#view-tool-modal .social-media {
   gap: 10px;
}

#view-tool-modal .social-media a {
   color: #FFF;
}

#view-tool-modal footer {
   /* border-top: 1px solid rgba(237, 237, 237, 0.3); */
   background: linear-gradient(#1B1622, #1B1622) padding-box,
      linear-gradient(to right, #C741F4, #66F5FA) border-box;
   border-top: 1px solid transparent;
   backdrop-filter: blur(2px);
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;

}

#view-tool-modal footer a:hover {
   background: linear-gradient(to right, #C741F4, #66F5FA);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   opacity: 1;
}

#view-tool-modal .card-footer-item:not(:last-child) {
   border-right: 1px solid rgba(237, 237, 237, 0.3);
}

#view-tool-modal a.card-footer-item {
   color: #DBDBDB;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 21px;
}

.dropdown-content {
   background-color: #1f2229 !important;
}

#add-to-album-modal .modal-content,
#add-to-album-modal .modal-card,
#add-to-album-modal .modal-card-body {
   overflow: visible;
}

/* #add-to-album-modal .modal-content:has(.tag),
#add-to-album-modal .modal-card:has(.tag),
#add-to-album-modal .modal-card-body:has(.tag) {
   overflow: auto;
} */

a.dropdown-item:hover,
button.dropdown-item:hover {
   background-color: #f5f5f5;
   color: #0a0a0a;
}

a.dropdown-item {
   color: #B0B0B0;
}

a.dropdown-item:hover {
   background-color: #52525E !important;
   color: #B0B0B0 !important;
}

a.navbar-item.is-active {
   background-color: transparent;
   color: #FFF !important;
   font-weight: bold !important;
}

p.empty {
   text-align: center;
   font-weight: bolder;
   font-size: 1.1em;
}

.tags-input.is-filter::after {
   content: "expand_more";
   font-family: "Material Icons";
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
   pointer-events: none;
   color: #B0B0B0;
}

.tags-input.is-filter:has(.tag)::after {
   content: "";
}