:root {
    scroll-behavior: smooth;
    --darkgrey: #4e4e4c;
    --darkorange: #f15f24;
    --lightorange: #f8d69e;
    --midorange: #f58529;
    --white: #ffffff;
    --offwhite: #f5f5f5;
    --darktext: #212529;
    --bgblack: #221f1f;
    --bs-border-width: 1px;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  
  background-color:var(--offwhite)
}

footer{
    padding-bottom:2em;
}

hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    opacity: 0.25;
    border-top: none;
    height: 1px;
}

    hr.vertical {
        position: absolute;
        background-color: transparent;
        height: 100%;
        right: 0;
        top: 0;
        width: 1px;
    }

        hr.vertical.light {
            background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff, hsla(0, 0%, 100%, 0));
        }

        hr.vertical.dark {
            background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4), transparent);
        }

        hr.vertical.gray-light {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
        }

    hr.horizontal {
        background-color: transparent;
    }

        hr.horizontal.light {
            background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff, hsla(0, 0%, 100%, 0));
        }

        hr.horizontal.dark {
            background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4), transparent);
        }

        hr.horizontal.gray-light {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
        }

/*Shrinking for mobile*/
@media (max-width: 767.98px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }

    hr.horizontal {
        background-color: transparent;
    }

        hr.horizontal:not(.dark) {
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
        }

        hr.horizontal.vertical {
            transform: rotate(90deg);
        }

        hr.horizontal.dark {
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
        }
}

.main-section {
    padding-top: 65px;
    display:flex;
    gap:10px;
}

.sidemenu-pane {
    width: 250px;
    min-width: 250px;
    max-width:250px;
    min-height: calc(100vh - 120px);
    background: #ffffff;
    padding-top:30px;
    position:relative;
}

    .sidemenu-pane > div {
        position:absolute;
        left:0;
        right:0;
    }

    .side-panel {
        height: calc(100% - 80px);
        width: 30%;
        z-index: 9999;
        border-radius: 6px;
        box-shadow: -3px 0px 4px 0px #eaeaea;
    }

.content-pane{
    padding:20px 10px;
}
.side {
    position: fixed;
    top: 60px;
}

    .side.right {
        right: -35%;
        display:none;
    }

        .side.right.show-side {
            right: 0px !important;
            display: inline-block !important;
            transition: right 2s;
        }

    .side > .card {
        height: 100%;
        background-color: #fff;
    }

        .side > .card > .card-header{
            background-color:#fff;
            border-bottom:none;
        }

        .side > .card > .card-header .btn-close {
            font-size: 0.8em;
            position: absolute;
            top: 1em;
            right: 1em;
        }

    .side > .card form .field-area{
        max-height:70vh;
        overflow-y:auto;
        overflow-x:hidden;
    }

li.list-group-item.active {
    border: none;
    border-left: 4px solid var(--darkorange);
    border-bottom: 1px #efefef solid;
    border-top: 1px #efefef solid;
    background-color: #fff;
    color:#000
}

li.list-group-item{
    border-color:var(--offwhite)
}
    li.list-group-item > a {
        text-decoration: none;
        color: var(--darkgrey);
    }

   

.btn.btn-primary {
    background: var(--bgblack);
    border-color: var(--bgblack)
}

.footer-menu a{
    text-decoration:none;
    color:#333;
}

.footer-menu > div:hover a{
    color:#f15f24;
}

.card.active{
    border-left:3px solid var(--darkorange) !important
}

.btn.btn-primary:hover{
    color:var(--midorange)
}