/* The side navigation menu */
.sidebar{
    width:280px;

    display:flex;
    flex-direction:column;
    gap:20px;

    flex-shrink:0;

    background:rgba(49,7,155,.45);

    border-radius:16px;

    padding:20px;
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

/* Active/current link */
.sidebar a.active {
  background-color: #8c03e8af;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #2e006ebd;
  color: white;
}

.C-Container {
    display:flex;
    gap:20px;

    padding:20px;

    background:linear-gradient(to top,
    rgba(110,144,198,0.5),
    transparent),
    url("Images/AeroPeek.png");

    background-size:cover;

    border-radius:16px;
}

.MainContent{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.Banner{

    height:190px;

    padding:25px;

    border-radius:16px;

    background:rgba(255,255,255,.25);

    backdrop-filter:blur(8px);

    box-shadow:
    inset 0 1px rgba(255,255,255,.7),
    inset 0 0 18px rgba(255,255,255,.18),
    0 10px 30px rgba(0,0,0,.18);

    border-top:1px solid rgba(255,255,255,.7);
    border-left:1px solid rgba(255,255,255,.4);
    border-right:1px solid rgba(255,255,255,.15);
    border-bottom:1px solid rgba(0,0,0,.12);

}

.Content{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.ServiceList{
    flex:2;
    height:550px;

    overflow-y:auto;

    padding:15px;

    background:rgba(255,255,255,.18);

    border-radius:16px;

    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:
    inset 0 1px rgba(255,255,255,.7),
    inset 0 0 18px rgba(255,255,255,.18),
    0 10px 30px rgba(0,0,0,.18);
}

.ServiceInfo{

    width:380px;

    min-height:550px;

    border-radius:16px;

    background:rgba(255,255,255,.25);

    backdrop-filter:blur(8px);

    box-shadow:
    inset 0 1px rgba(255,255,255,.7),
    inset 0 0 18px rgba(255,255,255,.18),
    0 10px 30px rgba(0,0,0,.18);

}

.serviceButton{

    display:flex;
    align-items:center;

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(5px);

    cursor:pointer;

    transition:.2s;

    text-align:left;

    box-shadow:
    inset 0 1px rgba(255,255,255,.7),
    inset 0 0 18px rgba(255,255,255,.18),
    0 10px 30px rgba(0,0,0,.18);

    border-top:1px solid rgba(255,255,255,.7);
    border-left:1px solid rgba(255,255,255,.4);
    border-right:1px solid rgba(255,255,255,.15);
    border-bottom:1px solid rgba(0,0,0,.12);
}

.serviceButton:hover{

    background:rgba(255,255,255,.75);

    transform:translateX(4px);

    box-shadow:
    inset 0 1px rgba(255,255,255,.7),
    inset 0 0 18px rgba(255,255,255,.18),
    0 10px 30px rgba(0,0,0,.18);

}

.serviceButton.active{

    background:linear-gradient(
        to right,
        rgba(208,255,205,.95),
        rgba(245,255,244,.95)
    );

    border:1px solid #7fd65e;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.6),
        inset 0 0 18px rgba(127,214,94,.4)
        0 10px 10px rgba(89, 213, 44, 0.4);

}

.price{

background:
linear-gradient(
    to bottom,
    #f4ffe8,
    #d8f9be 45%,
    #b7ea95
);

border:1px solid #9fd67b;

    padding:6px 12px;

    border-radius:8px;

    font-weight:bold;

    min-width:75px;

    text-align:center;

    margin-right:18px;

    box-shadow:
    inset 0 1px rgba(255,255,255,.7),
    inset 0 0 18px rgba(255,255,255,.18),
    0 10px 30px rgba(0,0,0,.18); 
    
    border-top:1px solid rgba(255,255,255,.7);
    border-left:1px solid rgba(255,255,255,.4);
    border-right:1px solid rgba(255,255,255,.15);
    border-bottom:1px solid rgba(0,0,0,.12);

}

.name{

    flex:1;

    font-size:18px;

}

.arrow{

width:36px;

height:36px;

border-radius:50%;

background:
linear-gradient(
to bottom,
white,
#dce5f2
);

box-shadow:
inset 0 1px white,
0 2px 6px rgba(0,0,0,.25);

display:flex;

justify-content:center;

align-items:center;

font-size:18px;

}

#selectServiceButton {
    font-size:18px;

    font-weight:bold;

    border-radius:12px;

    color: white;

    background: linear-gradient(to bottom,
    #ffdfc5 0%,
    #bf641f 55%,
    #9a5200 55%,
    #7a5528 100%
    );

    transition:
    opacity .2s ease,
    transform .2s ease;

}

#selectServiceButton:hover{
    font-size:18px;

    font-weight:bold;

    border-radius:12px;

    color: white;

    background: linear-gradient(to bottom,
    #c8b09c 0%,
    #874716 55%,
    #492700 55%,
    #2e200f 100%
    );

    opacity: 1;

    -webkit-box-shadow:0px 0px 55px 10px rgba(255,160,76,0.9);
    -moz-box-shadow: 0px 0px 55px 10px rgba(255,160,76,0.9);
    box-shadow: 0px 0px 55px 10px rgba(255,160,76,0.9);
}

.edition{

    width:100%;

    padding:12px;

    margin-bottom:18px;

    border:none;
    border-radius:14px;

    cursor:pointer;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.55),
            rgba(255,255,255,.18)
        );

    backdrop-filter:blur(8px);

    box-shadow:
        inset 0 1px rgba(255,255,255,.7),
        0 3px 12px rgba(0,0,0,.2);

    transition: ease-in-out .25s;

}

.edition:hover{

    transform:translateY(-4px);

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.75),
            rgba(255,255,255,.3)
        );

}

.activeEdition{

    background:
        linear-gradient(
            to bottom,
            rgba(200,255,230,.9),
            rgba(170,220,255,.4)
        );

    border:1px solid rgba(255,255,255,.9);

    box-shadow:
        inset 0 1px rgba(255,255,255,.8),
        0 0 18px rgba(120,220,255,.55);

}

.edition span{

    display:block;

    text-align:center;

    font-size:18px;

    font-weight:bold;

    color:white;

    text-shadow:
        0 1px 2px rgba(0,0,0,.5);

}

.edition img{

    width:100%;

    display:block;

    margin-bottom:10px;

    transition:
        transform .25s ease-in-out,
        filter .25s ease-in-out;

}

.activeEdition img{
    transform:scale(1.05);
    filter:drop-shadow(0 0 10px rgba(255,255,255,.7));
}

.edition:hover img{
    transform:scale(1.03);
}

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(47, 41, 78); 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(transparent, rgba(44, 210, 111, 0.574)); 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(rgba(60, 255, 0, 0.525), transparent);
  border-radius: 10px;
}