/* ------------------------------ */
/* ------------------------------ */
/* CAMPAIGNS */
.Campaigns {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 0px;
   width: 100%;
   min-height: 200px;
   padding: 0px;
   overflow: visible;
   background-color: var(--background-secondary);
   box-shadow: 0px 0px 5px 1px var(--border-color);
   border-radius: 25px;
}

.Campaigns .info {
   display: block;
   width: 100%;
   min-height: 125px;
   padding: 50px;
   border-bottom: 1px solid var(--border-color);
   color: var(--text-primary);
   font-size: var(--font-medium);
   font-weight: var(--font-bold);
   line-height: 1.25;
   text-align: left;
}

.Campaigns .image {
   display: block;
   width: 100%;
   min-height: min-content;
   padding: 20px;
   background-color: var(--background-primary);
   border-bottom: 1px solid var(--border-color);
   border-radius: 0px;
}

.Campaigns .banner {
   display: flex;
   flex-direction: column;
   gap: 5px;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 50px;
   border-bottom: 1px solid var(--border-color);
}

.Campaigns .banner-title {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   color: var(--text-primary);
   font-size: var(--font-large);
   font-weight: var(--font-bold);
   line-height: 1.5;
   text-align: center;
}

.Campaigns .banner-description {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   color: var(--text-primary);
   font-size: var(--font-small);
   font-weight: var(--font-regular);
   line-height: 1.5;
   text-align: center;
}

.Campaigns .options {
   display: flex;
   flex-direction: row;
   gap: 20px;
   width: 100%;
   height: 110px;
   padding: 20px;
   border-bottom: 1px solid var(--border-color);
}

.Campaigns .option {
   position: relative;
   display: block;
   width: 100%;
   height: 70px;
   padding: 20px;
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: 5px;
   color: var(--text-primary);
   font-size: var(--font-medium);
   font-weight: var(--font-bold);
   line-height: 1;
   text-align: left;
}

.Campaigns .option.x,
.Campaigns .option:hover {
   cursor: pointer;
   background-color: var(--background-primary);
}

.Campaigns .option.arrow::after {
   content: var(--entity-link);
   position: absolute;
   top: calc(20px - 2px);
   right: 20px;
   font-size: var(--font-medium);
}

.Campaigns .details {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 20px;
   width: 100%;
   height: auto;
   padding: 20px;
   overflow: auto;
   border-bottom: 1px solid var(--border-color);
}

.Campaigns .detail {
   display: flex;
   flex-direction: column;
   gap: 5px;
   width: 100%;
   height: 160px;
   padding: 30px;
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: 25px;
   color: var(--text-primary);
}

.Campaigns .detail-value {
   display: block;
   width: 100%;
   height: 50px;
   font-size: var(--font-medium);
   font-weight: var(--font-bold);
   line-height: 1;
   text-align: right;
}

.Campaigns .detail-name {
   display: block;
   width: 100%;
   height: 25px;
   font-size: var(--font-small);
   font-weight: var(--font-regular);
   line-height: 1;
   text-align: left;
   text-transform: capitalize;
}

.Campaigns .detail-type {
   display: block;
   width: 100%;
   height: 25px;
   font-size: var(--font-x-small);
   font-weight: var(--font-regular);
   line-height: 1;
   text-align: left;
   text-transform: capitalize;
}