#archives{

    padding: 2.5rem 0;

}

#archives .archive-item {

    background-color: #F5F5F5;

    padding: 1.875rem 0rem 1rem 1.875rem;

    margin-bottom: 1.875rem;

    position: relative;

}



#archives .archive-item .flex.flexCol {

    height: 100%;

    position: relative;

    padding: 0 0 0 0.625rem

}



#archives .archive-item .flex.flexCol:not(:last-of-type)::after {

    content: '';

    width: 0.0625rem;

    height: 100%;

    position: absolute;

    background-color: #D9D8D8;

    right: 1.3125rem;

    top: -0.625rem;

}



#archives .archive-item .archive-year {

    font-family: Inter;

    font-weight: bold;

    font-size: 2rem;

    line-height: 2.8125rem;

    text-align: left;

    color: #25262b;

    position: relative;

    top: -0.9375rem;

}



#archives .archive-item .archive-month {

    font-family: "Open Sans";

    font-weight: bold;

    text-decoration: underline;

    font-size: 0.75rem;

    letter-spacing: 0.05em;

    line-height: 1.125rem;

    text-align: left;

    text-transform: uppercase;

    color: #808080;

    margin-bottom: 2.5rem;

}



#archives .archive-item .archive-month-disabled {

    font-family: "Open Sans";

    font-weight: regular;

    text-decoration: none;

    font-size: 0.75rem;

    letter-spacing: 0.05em;

    line-height: 1.125rem;

    text-align: left;

    text-transform: uppercase;

    opacity: 0.5;

    color: #808080;

}



#archives .archive-item .archive-month:hover {

    color: #002ab4;

}

@media (max-width: 47.9375rem){

    #archives .archive-item .archive-month{

        margin-bottom: 0.9375rem;

    }

    #archives{

        padding: 1.25rem 0;

    }

    #archives .archive-item .archive-year{

        top: 0;

        margin-bottom: 1.25rem;

        display: block;

    }

    #archives .archive-item .flex.flexCol{

        padding: 0;

    }

    #archives .archive-item{

        padding: 1.25rem;

    }

    .page-template-archives .sidebar{

        margin-top: 0 !important;

    }

}