/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

#sidebar-1 {
     border-top-right-radius: 15px;
     border-bottom-right-radius: 15px;
     width: 275px;
     position: fixed;
     top: 2vh;
     left: -315px;
     height: 96vh;
     z-index: 999;
     background: var(--blue);
     color: var(--white);
     transition: all 0.3s;
     overflow-y: scroll;
     box-shadow: var(--s-gray);
}

#sidebar-1.active {
     left: 0;
}

#sidebar-2 {
     border-top-left-radius: 15px;
     border-bottom-left-radius: 15px;
     width: 275px;
     position: fixed;
     top: 2vh;
     right: -315px;
     height: 96vh;
     z-index: 999;
     background: var(--green);
     color: var(--white);
     transition: all 0.3s;
     overflow-y: scroll;
     box-shadow: var(--s-gray);
}

#sidebar-2.active {
     right: 0;
}

#dismiss-1,
#dismiss-2 {
     width: 35px;
     height: 35px;
     line-height: 35px;
     text-align: center;
     position: absolute;
     top: 18px;
     right: 10px;
     cursor: pointer;
     font-size: 24px;
     -webkit-transition: all 0.3s;
     -o-transition: all 0.3s;
     transition: all 0.3s;
}

#dismiss-1:hover,
#dismiss-2:hover {
     color: var(--white);
}

.overlay {
     display: none;
     position: fixed;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.7);
     z-index: 998;
     opacity: 0;
     transition: all 0.5s ease-in-out;
}

.overlay.active {
     display: block;
     opacity: 1;
}

#sidebar-1 .sidebar-header,
#sidebar-2 .sidebar-header {
     padding: 10px 15px;
     background: var(--green);
}

#sidebar-1 ul.components,
#sidebar-2 ul.components {
     padding: 15px 15px;
     border-bottom: 1px solid var(--tr);
}

#sidebar-1 ul p,
#sidebar-2 ul p {
     color: #fff;
     padding: 5px 25px;
     font-size: 18px;
}

#sidebar-1 ul li a,
#sidebar-2 ul li a {
     padding: 5px 20px;
     display: block;
     color: var(--white);
     border-radius: 5px;
     margin-bottom: 5px;
     border: 0;
}

#sidebar-1 ul li a:hover {
     color: var(--blue);
}

#sidebar-2 ul li a:hover {
     color: var(--green);
}

#sidebar-1 ul li a:hover,
#sidebar-2 ul li a:hover {
     background: var(--white);
}

#sidebar-1 ul li .far,
#sidebar-1 ul li .fas,
#sidebar-2 ul li .far,
#sidebar-2 ul li .fas {
     width: 20px;
}

#sidebar-1 ul li.active>a,
a[aria-expanded="true"] {
     color: var(--blue);
     background: var(--white);
     border: 0;
}

#sidebar-2 ul li.active>a,
a[aria-expanded="true"] {
     color: var(--green);
     background: var(--white);
     border: 0;
}

#sidebar-1 ul li.top>a,
a[aria-expanded="true"] {
     color: var(--white);
     background: var(--green);
     border: 0;
}

#sidebar-2 ul li.top>a,
a[aria-expanded="true"] {
     color: var(--white);
     background: var(--blue);
     border: 0;
}

#sidebar-1 hr,
#sidebar-2 hr {
     margin: 10px 0;
     background-color: var(--tr);
}

a[data-toggle="collapse"] {
     position: relative;
}

.dropdown-toggle::after {
     display: block;
     position: absolute;
     top: 50%;
     right: 20px;
     transform: translateY(-50%);
}

#sidebar-1 ul ul a {
     font-size: 0.9em !important;
     padding-left: 20px !important;
     background: var(--green);
}

#sidebar-2 ul ul a {
     font-size: 0.9em !important;
     padding-left: 20px !important;
     background: var(--blue);
}

ul.CTAs {
     padding: 20px;
}

ul.CTAs a {
     text-align: center;
     font-size: 0.9em !important;
     display: block;
     border-radius: 5px;
     margin-bottom: 5px;
}

a.download {
     background: #fff;
     color: var(--blue);
}

a.article,
a.article:hover {
     background: var(--green) !important;
     color: var(--white) !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
     width: 100%;
     padding: 20px;
     min-height: 100vh;
     transition: all 0.3s;
     position: absolute;
     top: 0;
     right: 0;
}