/*********** Table of Contents ***********
    1.0: Default Colors
    2.0: Animations
    3.0: HR Stylings
*****************************************/

/**********************************************/
/********** 1.0: Default Colors ***************/
/**********************************************/

/*.darkMode .apa-manual-nav #index .topicref a,
.darkMode #main-content .full-article .article-body a u,
.darkMode #main-content .full-article .article-body a u strong,
.darkMode #main-content .full-article .article-body a strong,
.darkMode #main-content .full-article .article-body a span {
    color: lightgray;
}*/
.darkMode a,
.darkMode #main-content a > p,
.darkMode #main-content a > span,
.darkMode .apa-info-card a,
.darkMode .full-article .edit-icon {
    color: lightgray;
}


.darkMode .commiittee-manual a {
    color: #007bff;
}

.darkMode hr {
    border-top: 1px solid rgba(255,255,255,.2);
}

/***** gradient background *****/
.darkMode #main-content {
    background: linear-gradient(#131313, #0b0b0b);
}

/***** Tan text *****/
.darkMode .contact-card,
.darkMode #main-content p,
.darkMode #main-content strong,
.darkMode #main-content h1,
.darkMode #main-content h2,
.darkMode #main-content h3,
.darkMode #main-content h4,
.darkMode #main-content h5,
.darkMode #main-content h6,
.darkMode #main-content h7,
.darkMode #main-content h8,
.darkMode #apa-accordion .card-header,
.darkMode #main-content #Search-Engine .search-field input,
.darkMode #main-content .modal-body,
.darkMode #main-content #setting-modal .tab button,
.darkMode .information-block .left,
.darkMode #main-content .information-block-title,
.darkMode #main-content .template-footer-upper .information-block-title,
.darkMode #main-content .template-footer-lower .information-block-title,
.darkMode #apa-accordion .card-body,
.darkMode .apa-info-card,
.darkMode #pageText,
.darkMode .apa-video .video-title,
.darkMode ol li,
.darkMode .conbody .p,
.darkMode ul,
.darkMode td,
.darkMode .committeeBanner .contact-section,
.darkMode .domicileBanner .contact-section,
.darkMode #profile-modal .label,
.darkMode #Settings label,
.darkMode .hot-items,
.darkMode .main-view #Debriefs a,
.darkMode .main-public-banner .subparagraph,
.darkMode .main-public-banner .subparagraph b {
    color: tan;
}

.darkMode #main-content .text-body {
    color: tan !important;
}
.darkMode #main-content .text-light {
    color: gainsboro !important;
}
.darkMode #main-content h1.text-black-50,
.darkMode #main-content h2.text-black-50,
.darkMode #main-content h3.text-black-50,
.darkMode #main-content h4.text-black-50 {
    color: tan !important;
}

/***** Faint White text *****/
.darkMode #main-content .text-black-50 {
    color: #ffffff7d !important;
}
/*.darkMode #sidenav-modal #expanded-view .hidden {
    color: #ffffff26 !important;
}*/
/*.darkMode #expanded-view #Contacts-expanded-view-reciever {
    border-top: 1px solid gainsboro;
}*/

/***** White text *****/
.darkMode .sub-article .article-title,
.darkMode .article-block .parent,
.darkMode .contact-card a,
.darkMode .contact-card .contact-phone i,
.darkMode .contact-card .contact-email i,
.darkMode .contact-card .contact-location i,
.darkMode .contact-card .contact-fax i,
.darkMode .contact-card .contact-hours i,
.darkMode .committeeBanner .main-banner-content h5,
.darkMode .information-block .truncate-body,
.darkMode .publicBanner b,
.darkMode .search-engine-banner b,
.darkMode .publicBanner .slidedown,
.darkMode #main-content p .subtitle,
.darkMode h5 .banner-subtitle,
.darkMode .cmte-manuals-content .cmte-content .table,
.darkMode .truncate-body .entry,
.darkMode article h1,
.darkMode #apa-about .profile-name,
.darkMode nav .menu-button,
.darkMode .template-button:hover,
.darkMode .committeeBanner .contact-section a,
.darkMode .domicileBanner .contact-section a,
.darkMode #apa-accordion .card-header .material-icons,
.darkMode #Settings b,
.darkMode .header-list,
.darkMode #Help label,
.darkMode .main-view .content-row select,
.darkMode #EmailAddress,
.darkMode #CustomerNote,
.darkMode .article-categories span,
/*.darkMode #sidenav-modal #expanded-view a,*/
.darkMode .category-management .create-edit-form label,
.darkMode .information-block-title,
.darkMode #main-content .template-footer-upper span,
.darkMode #main-content .template-footer-upper p,
.darkMode #main-content .template-footer-lower span,
.darkMode #main-content .template-footer-lower p {
    color: gainsboro;
}

/* FOR USER-GENERATED CONTENT/TEXT/ARTICLES/EMAILS WE USE INVERTS TO ACCOUNT FOR VARIOUS STYLES/COLORS THEY MAY HAVE EMBEDDED IN THEIR CONTENT */
.darkMode #main-content .full-article .article-body p,
.darkMode #main-content .full-article .article-body span,
.darkMode #main-content .full-article .article-body strong,
.darkMode #main-content .apa-election-emails p,
.darkMode #main-content .apa-election-emails span,
.darkMode #main-content .apa-election-emails strong {
    color: black;
}
.darkMode #main-content .full-article .article-body,
.darkMode #main-content .apa-election-emails {
    -webkit-filter: invert(100%);
}
    .darkMode #main-content .full-article .article-body h1,
    .darkMode #main-content .full-article .article-body h1 strong,
    .darkMode #main-content .full-article .article-body h2,
    .darkMode #main-content .full-article .article-body h2 strong,
    .darkMode #main-content .full-article .article-body h3,
    .darkMode #main-content .full-article .article-body h3 strong,
    .darkMode #main-content .full-article .article-body h4,
    .darkMode #main-content .full-article .article-body h4 strong,
    .darkMode #main-content .apa-election-emails h1,
    .darkMode #main-content .apa-election-emails h1 strong,
    .darkMode #main-content .apa-election-emails h2,
    .darkMode #main-content .apa-election-emails h2 strong,
    .darkMode #main-content .apa-election-emails h3,
    .darkMode #main-content .apa-election-emails h3 strong,
    .darkMode #main-content .apa-election-emails h4,
    .darkMode #main-content .apa-election-emails h4 strong {
        -webkit-filter: invert(100%);
    }
    .darkMode #main-content .full-article .article-body img,
    .darkMode #main-content .apa-election-emails img {
        -webkit-filter: invert(100%);
    }
    .darkMode #main-content .full-article .article-body a img,
    .darkMode #main-content .apa-election-emails a img {
        -webkit-filter: invert(0%);
    }
    .darkMode #main-content .full-article .article-body ul,
    .darkMode #main-content .apa-election-emails ul {
        -webkit-filter: invert(100%);
    }
        .darkMode #main-content .full-article .article-body ul a,
        .darkMode #main-content .full-article .article-body ul a span,
        .darkMode #main-content .apa-election-emails ul a,
        .darkMode #main-content .apa-election-emails ul a span {
            -webkit-filter: invert(0%);
        }
    .darkMode #main-content .full-article .article-body a,
    .darkMode #main-content .apa-election-emails a {
        -webkit-filter: invert(100%);
        color: lightgray;
    }
        .darkMode #main-content .full-article .article-body a u,
        .darkMode #main-content .full-article .article-body a u strong,
        .darkMode #main-content .full-article .article-body a strong,
        .darkMode #main-content .full-article .article-body a span,
        .darkMode #main-content .apa-election-emails a u,
        .darkMode #main-content .apa-election-emails a u strong,
        .darkMode #main-content .apa-election-emails a strong,
        .darkMode #main-content .apa-election-emails a span {
            color: lightgray;
        }
.darkMode .article-categories span {
    background: #ffffff1a;
}
/***** Black Background *****/
.darkMode .White, .darkMode #search-results, .darkMode .main-view #Dashboard .id-row, .darkMode #Debriefs .list-group-item, .darkMode .col-container, .darkMode #main-content #Search-Engine ul .add-icons, .darkMode #main-content #Search-Engine .search-field input {
    background-color: #111111;
}
/***** Faint Black Background *****/
.darkMode #main-content #setting-modal .modal-content,
.darkMode #apa-accordion .card-header,
.darkMode #main-content #Multi-Services .card,
.darkMode #main-content #apa-services .card,
.darkMode #main-content #Latest-Media-component,
.video-card .content, .darkMode .event-badge,
.darkMode .apa-service-item .card,
.darkMode .generictab-bar,
.darkMode #apa-accordion .panel,
.darkMode .item {
    background-color: #1f1f1fed !important;
}

.darkMode .events-header {
    background-color: #1f1f1fed
}

.darkMode .apa-recent-videos .apa-video .video-card,
.darkMode .apa-recent-videos .apa-video .video-details,
.darkMode .apa-recent-videos .apa-video .video-title,
.darkMode .category-management .create-edit-form,
.darkMode .contact-card {
    background-color: transparent;
}

.darkMode .templateTab-bar a:hover,
.darkMode .templateTab-bar .active,
.darkMode #Search-Engine .search-field {
    background: #ffffff40;
}
.darkMode .tiles .col-container,
.darkMode .list-group-item {
    background: #ffffff1a;
}
.darkMode .tiles .col-container {
    border: 1px solid #ffffff3b;
}
.darkMode .list-group-item {
    border: 1px solid rgba(0,0,0,.725);
}
/***** Faint White Border *****/
.darkMode #main-content #setting-modal .tab, .darkMode #main-content #setting-modal .settingscontent {
    border: 1px solid #424242;
}

.darkMode .search-engine-banner .image-overlay,
.darkMode .domicileBanner .image-overlay {
    /*background-image: linear-gradient(227deg, #000000e8, #000000c7, #000000f7, #000000);*/
    /*background-image: linear-gradient(227deg, #000000e8, #222020c7, #1e1c1cf7, #000000);*/
    background-image: linear-gradient(227deg, #000000e8, #333333a7, #111111c3, #000000);
}
.darkMode .publicBanner .image-overlay {
    background-image: linear-gradient(227deg, #000000e8, #333333a7, #111111c3, #000000);
    /*background: rgba(0,0,0, 0.9);*/
}
.darkMode .publicBanner.empty-banner {
    /*background-image: linear-gradient(227deg, #000000e8, #000000f2, #000000f7, #000000);*/
}
.darkMode .full-article,
.darkMode .commiittee-manual {
    background-image: linear-gradient(227deg, #000000e8, #333333a7, #111111c3, #000000);
}
.darkMode .containing-area {
    background-image: linear-gradient(135deg, #4a4a4a, #000000cf);
}
.darkMode .left-bar,
.darkMode .main-view .content-row select,
.darkMode #EmailAddress,
.darkMode #CustomerNote,
.darkMode .main-view .articles-by-page-article-container {
    background-color: #000000ba;
}
.darkMode #profile-modal .modal-dialog {
    background-color: #1b1b1bed;
}
.darkMode .main-view .banner-container {
    border-color: #0000003b;
}
.darkMode .left-bar .navigations button:hover,
.darkMode .left-bar .navigations .active {
    background: #272727bd;
}
.darkMode .box-shadow {
    box-shadow: 0px 2px 2px #000000 !important;
}
.darkMode #main-content .modal-content:hover {
    box-shadow: 0px 0px 12px 2px #0000004a;
}

.darkMode input[type=text],
.darkMode input[type=number],
.darkMode input[type=date],
.darkMode input[type=tel],
.darkMode textarea,
.darkMode select {
    background-color: gainsboro;
}
    .darkMode input[type=text]:disabled,
    .darkMode input[type=number]:disabled,
    .darkMode input[type=date]:disabled,
    .darkMode input[type=tel]:disabled,
    .darkMode textarea:disabled,
    .darkMode select:disabled {
        background-color: gray;
    }

.darkMode .document-manager .content-area .entity-row:hover {
    background-color: #444444;
}
.darkMode #search-text {
    background-color: #444444;
    color: white;
}

/* Fixes for !important spamming shenanigans */
.darkMode .single-article-container h4,
.darkMode .single-article-container .article-block div {
    color: tan !important;
}

/****************************/
/******* 3.0 - Froala *******/
/****************************/
.darkMode .fr-toolbar {
    background-color: gray;
    border-color: gray;
}

    .darkMode .fr-toolbar .fr-newline {
        background: gray;
    }

.darkMode .fr-box.fr-basic .fr-wrapper {
    border-color: gray;
    -webkit-filter: invert(100%);
}

.darkMode #main-content .fr-box.fr-basic .fr-wrapper p,
.darkMode #main-content .fr-box.fr-basic .fr-wrapper span,
.darkMode #main-content .fr-box.fr-basic .fr-wrapper strong {
    color: black !important;
}

.darkMode .fr-box.fr-basic .fr-wrapper img {
    -webkit-filter: invert(100%);
}

.darkMode .fr-box.fr-basic .fr-wrapper a {
    -webkit-filter: invert(100%);
    color: lightgray !important;
}
    .darkMode #main-content .fr-box.fr-basic .fr-wrapper a u,
    .darkMode #main-content .fr-box.fr-basic .fr-wrapper a u strong,
    .darkMode #main-content .fr-box.fr-basic .fr-wrapper a strong,
    .darkMode #main-content .fr-box.fr-basic .fr-wrapper a span {
        color: lightgray !important;
    }
.darkMode .fr-box.fr-basic .fr-wrapper ul {
    -webkit-filter: invert(100%);
}

.darkMode .second-toolbar {
    background: gray;
    border-color: gray;
}

    .darkMode .second-toolbar .fr-counter {
        color: black;
    }

.darkMode input[type="file" i] {
    color:tan;
}
/***** Colors *****/
.Primary-Color {
    background-color: var(--background-primary-color);
}

.Secondary-Color {
    background-color: var(--background-secondary-color);
}

.Black, .darkMode .bg-white{
    background-color: black !important;
}

.White, .darkMode .Black{
    background-color: white;
}
/* .darkMode .social-media img, .darkMode #Socials img, .darkMode .publicBanner .right-container img {
    filter: invert(1);
} */
.Accent-Color {
    background-color: var(--background-primary-accent-color) !important;
}

.secondary-accent-color {
    background-color: var(--button-accent-color);
}

.Black-25 {
    background-color: var(--background-black-25-color);
}

.Black-50 {
    background-color: var(--background-black-50-color);
}
.Black-75 {
    background-color: var(--background-black-75-color);
}

.Danger {
    background-color: var(--background-danger-color);
}
.Warning {
    background-color: var(--background-warning-color);
}
.Info {
    background-color: var(--background-info-color);
}
.Success {
    background-color: var(--background-success-color);
}
.light-danger {
    background-color: var(--background-light-danger-color);
}
.APA-Blue {
    background-color: var(--background-APA-blue);
}

.accent-text {
    color: var(--button-accent-color) !important;
}

.darkMode #main-content .Secondary-Color {
    background-color: #ffffff08;
}

.selection-color {
    background-color: var(--selection-color);
}

.text-accent-color {
    color: var(--background-primary-accent-color) !important;
}

.text-default-color {
    color: var(--header-color);
}
.box-shadow {
    /*box-shadow: 0px 2px 2px #0000006b !important;*/
    box-shadow: 0px 1px 1px #0000006b !important;
}

/******************************************/
/********** 2.0: Animations ***************/
/******************************************/

/******* Animation effect  ********/
.animationItem.Animation1 {
    animation: anim1;
}
/**Spin in Left **/
@keyframes anim1 {
    0% {
        opacity: 0;
        transform: translateX(-30rem) rotate(-45deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.animationItem.Animation2 {
    animation: anim2;
}
/** Spin in Right **/
@keyframes anim2 {
    0% {
        opacity: 0;
        transform: translateX(30rem) rotate(45deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
/** Fade In Zoom**/
.animationItem.Animation3 {
    animation: anim3;
}
.animationItem.Animation3-1 {
    animation: anim3-1;
}

@keyframes anim3 {
    0% {
        opacity: 0;
        transform: scale(1.2);
        transition: opacity 1.5s ease, transform 1.5s ease;
    }

    100% {
        opacity: 1;
        transform: none;
        transition: opacity 1.5s ease, transform 1.5s ease;
    }
}
@keyframes anim3-1 {
    0% {
        opacity: 0;
        transform: scale(1.2);
        transition: opacity 1.5s ease, transform 1.5s ease;
    }

    100% {
        opacity: 3 !important;
        transform: none;
        transition: opacity 1.5s ease, transform 1.5s ease;
    }
}
/** Fade In **/
.animationItem.Animation4, .tools-AnimationItem {
    animation: anim4;
}

@keyframes anim4 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/**Fade In down **/
.animationItem.Animation5 {
    animation: anim5;
}
@keyframes anim5 {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/** Fade in Slide in Left **/
.animationItem.Animation6 {
    animation: anim6;
}

@keyframes anim6 {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/**Bounce in Left **/
.animationItem.Animation7 {
    animation: anim7;
}

@keyframes anim7 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(200px);
    }

    60% {
        -webkit-transform: translateX(-20px);
    }

    80% {
        -webkit-transform: translateX(5px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

/**Fade In Up **/
.animationItem.Animation8 {
    animation: anim8;
}

@keyframes anim8 {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/** Bounce In**/
.animationItem.Animation9 {
    animation: anim9;
}

@keyframes anim9 {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/** Move Up **/
.animationItem.Animation10 {
    animation: anim10;
}

@keyframes anim10 {
    0% {
        opacity: 1;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animationItem.Animation11 {
    animation: anim11;
}

/**Bounce in Right **/
@keyframes anim11 {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }
    60% {
        transform: translateX(20px);
    }
    80% {
        transform: translateX(-5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/** Fade in Slide in Right **/
.animationItem.Animation12 {
    animation: anim12;
}

@keyframes anim12 {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/** Move Down **/
.animationItem.Animation13 {
    animation: anim13;
}

@keyframes anim13 {
    0% {
        opacity: 1;
        transform: translateY(-40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/** Slide in Right **/
.animationItem.Animation14 {
    animation: anim14;
}

@keyframes anim14 {
    0% {
        transform: translateX(40px);
    }

    100% {
        transform: translateX(0);
    }
}

/** Slide in Left **/
.animationItem.Animation15 {
    animation: anim15;
}

@keyframes anim15 {
    0% {
        transform: translateX(-40px);
    }

    100% {
        transform: translateX(0);
    }
}

/*******************************************/
/********** 3.0: HR Stylings ***************/
/*******************************************/

hr.Style1 {
    border-top: 1px solid white;
}

hr.Style2 {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f000, white, #f0f0f000);
    background-image: -moz-linear-gradient(left, #f0f0f0, white, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, white, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, white, #f0f0f0);
}
hr.Style2, hr.sidenav-hr:hover {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f000, white, #f0f0f000);
    background-image: -moz-linear-gradient(left, #f0f0f0, white, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, white, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, white, #f0f0f0);
}
hr.sidenav-hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f000, #7c7c7c, #f0f0f000);
    background-image: -moz-linear-gradient(left, #f0f0f0, #7c7c7c, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #7c7c7c, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #7c7c7c, #f0f0f0);
}

hr.Style3 {
    border-top: 1px dashed white;
}

hr.Style4 {
    border-top: 1px dotted white;
}

hr.Style5 {
    background-color: #fff;
    border-top: 2px dashed white;
}


hr.Style6 {
    background-color: #fff;
    border-top: 2px dotted white;
}

hr.Style7 {
    border-top: 1px solid white;
    border-bottom: 1px solid #fff;
}


hr.Style8 {
    border-top: 1px solid white;
    border-bottom: 1px solid #fff;
}

    hr.Style8:after {
        content: '';
        display: block;
        margin-top: 2px;
        border-top: 1px solid white;
        border-bottom: 1px solid #fff;
    }

hr.Style9 {
    border-top: 1px dashed white;
    border-bottom: 1px dashed #fff;
}

hr.Style10 {
    border-top: 1px dotted white;
    border-bottom: 1px dotted #fff;
}

hr.Style11 {
    border-top: 1px dashed white;
}

    hr.Style11:after {
        content: '\002702';
        display: inline-block;
        position: relative;
        top: -12px;
        left: 40px;
        padding: 0 3px;
        background: #f0f0f0;
        color: white;
        font-size: var(--font-size-title);
    }


hr.Style12 {
    height: 30px;
    border-style: solid;
    border-color: white;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

    hr.Style12:before {
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: white;
        border-width: 0 0 1px 0;
        border-radius: 20px;
    }

hr.Style13 {
    height: 10px;
    border: 0;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


hr.Style14 {
    border-top: 3px double white;
}


hr.Style15 {
    border-top: 4px double white;
    text-align: center;
}

    hr.Style15:after {
        content: '\002665';
        display: inline-block;
        position: relative;
        top: -15px;
        padding: 0 10px;
        background: #f0f0f0;
        color: white;
        font-size: 18px;
    }

/*********** Accent Color *************/
.hr-Accent-Color .Style1 {
    border-top: 1px solid var(--background-primary-accent-color);
}


.hr-Accent-Color .Style2 {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f000, var(--background-primary-accent-color), #f0f0f000);
    background-image: -moz-linear-gradient(left, #f0f0f0, var(--background-primary-accent-color), #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, var(--background-primary-accent-color), #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, var(--background-primary-accent-color), #f0f0f0);
}

.hr-Accent-Color .Style3 {
    border-top: 1px dashed var(--background-primary-accent-color);
}

.hr-Accent-Color .Style4 {
    border-top: 1px dotted var(--background-primary-accent-color);
}

.hr-Accent-Color .Style5 {
    background-color: #fff;
    border-top: 2px dashed var(--background-primary-accent-color);
}


.hr-Accent-Color .Style6 {
    background-color: #fff;
    border-top: 2px dotted var(--background-primary-accent-color);
}

.hr-Accent-Color .Style7 {
    border-top: 1px solid var(--background-primary-accent-color);
    border-bottom: 1px solid #fff;
}


.hr-Accent-Color .Style8 {
    border-top: 1px solid var(--background-primary-accent-color);
    border-bottom: 1px solid #fff;
}

    .hr-Accent-Color .Style8:after {
        content: '';
        display: block;
        margin-top: 2px;
        border-top: 1px solid var(--background-primary-accent-color);
        border-bottom: 1px solid #fff;
    }

.hr-Accent-Color .Style9 {
    border-top: 1px dashed var(--background-primary-accent-color);
    border-bottom: 1px dashed #fff;
}

.hr-Accent-Color .Style10 {
    border-top: 1px dotted var(--background-primary-accent-color);
    border-bottom: 1px dotted #fff;
}

.hr-Accent-Color .Style11 {
    border-top: 1px dashed var(--background-primary-accent-color);
}

    .hr-Accent-Color .Style11:after {
        content: '\002702';
        display: inline-block;
        position: relative;
        top: -12px;
        left: 40px;
        padding: 0 3px;
        background: #f0f0f0;
        color: var(--background-primary-accent-color);
        font-size: var(--font-size-title);
    }


.hr-Accent-Color .Style12 {
    height: 30px;
    border-style: solid;
    border-color: var(--background-primary-accent-color);
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

    .hr-Accent-Color .Style12:before {
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: var(--background-primary-accent-color);
        border-width: 0 0 1px 0;
        border-radius: 20px;
    }

.hr-Accent-Color .Style13 {
    height: 10px;
    border: 0;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


.hr-Accent-Color .Style14 {
    border-top: 3px double var(--background-primary-accent-color);
}


.hr-Accent-Color .Style15 {
    border-top: 4px double var(--background-primary-accent-color);
    text-align: center;
}

    .hr-Accent-Color .Style15:after {
        content: '\002665';
        display: inline-block;
        position: relative;
        top: -15px;
        padding: 0 10px;
        background: #f0f0f0;
        color: var(--background-primary-accent-color);
        font-size: var(--font-size-title);
    }

/**************** Black Color ****************/
.hr-Black hr.Style1 {
    border-top: 1px solid Black;
}


.hr-Black hr.Style2 {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f000, Black, #f0f0f000);
    background-image: -moz-linear-gradient(left, #f0f0f0, Black, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, Black, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, Black, #f0f0f0);
}

.hr-Black hr.Style3 {
    border-top: 1px dashed Black;
}

.hr-Black hr.Style4 {
    border-top: 1px dotted Black;
}

.hr-Black hr.Style5 {
    background-color: #fff;
    border-top: 2px dashed Black;
}


.hr-Black hr.Style6 {
    background-color: #fff;
    border-top: 2px dotted Black;
}

.hr-Black hr.Style7 {
    border-top: 1px solid Black;
    border-bottom: 1px solid #fff;
}


.hr-Black hr.Style8 {
    border-top: 1px solid Black;
    border-bottom: 1px solid #fff;
}

    .hr-Black hr.Style8:after {
        content: '';
        display: block;
        margin-top: 2px;
        border-top: 1px solid Black;
        border-bottom: 1px solid #fff;
    }

.hr-Black hr.Style9 {
    border-top: 1px dashed Black;
    border-bottom: 1px dashed #fff;
}

.hr-Black hr.Style10 {
    border-top: 1px dotted Black;
    border-bottom: 1px dotted #fff;
}

.hr-Black hr.Style11 {
    border-top: 1px dashed Black;
}

    .hr-Black hr.Style11:after {
        content: '\002702';
        display: inline-block;
        position: relative;
        top: -12px;
        left: 40px;
        padding: 0 3px;
        background: #f0f0f0;
        color: Black;
        font-size: var(--font-size-title);
    }


.hr-Black hr.Style12 {
    height: 30px;
    border-style: solid;
    border-color: Black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

    .hr-Black hr.Style12:before {
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: Black;
        border-width: 0 0 1px 0;
        border-radius: 20px;
    }

.hr-Black hr.Style13 {
    height: 10px;
    border: 0;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


.hr-Black hr.Style14 {
    border-top: 3px double Black;
}


.hr-Black hr.Style15 {
    border-top: 4px double Black;
    text-align: center;
}

    .hr-Black hr.Style15:after {
        content: '\002665';
        display: inline-block;
        position: relative;
        top: -15px;
        padding: 0 10px;
        background: #f0f0f0;
        color: Black;
        font-size: var(--font-size-title);
    }

/**************** White Color ****************/

.hr-White hr.Style1 {
    border-top: 1px solid White;
}


.hr-White hr.Style2 {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f000, White, #f0f0f000);
    background-image: -moz-linear-gradient(left, #f0f0f0, White, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, White, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, White, #f0f0f0);
}

.hr-White hr.Style3 {
    border-top: 1px dashed White;
}

.hr-White hr.Style4 {
    border-top: 1px dotted White;
}

.hr-White hr.Style5 {
    background-color: #fff;
    border-top: 2px dashed White;
}


.hr-White hr.Style6 {
    background-color: #fff;
    border-top: 2px dotted White;
}

.hr-White hr.Style7 {
    border-top: 1px solid White;
    border-bottom: 1px solid #fff;
}


.hr-White hr.Style8 {
    border-top: 1px solid White;
    border-bottom: 1px solid #fff;
}

    .hr-White hr.Style8:after {
        content: '';
        display: block;
        margin-top: 2px;
        border-top: 1px solid White;
        border-bottom: 1px solid #fff;
    }

.hr-White hr.Style9 {
    border-top: 1px dashed White;
    border-bottom: 1px dashed #fff;
}

.hr-White hr.Style10 {
    border-top: 1px dotted White;
    border-bottom: 1px dotted #fff;
}

.hr-White hr.Style11 {
    border-top: 1px dashed White;
}

    .hr-White hr.Style11:after {
        content: '\002702';
        display: inline-block;
        position: relative;
        top: -12px;
        left: 40px;
        padding: 0 3px;
        background: #f0f0f0;
        color: White;
        font-size: var(--font-size-title);
    }


.hr-White hr.Style12 {
    height: 30px;
    border-style: solid;
    border-color: White;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

    .hr-White hr.Style12:before {
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: White;
        border-width: 0 0 1px 0;
        border-radius: 20px;
    }

.hr-White hr.Style13 {
    height: 10px;
    border: 0;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


.hr-White hr.Style14 {
    border-top: 3px double White;
}


.hr-White hr.Style15 {
    border-top: 4px double White;
    text-align: center;
}

    .hr-White hr.Style15:after {
        content: '\002665';
        display: inline-block;
        position: relative;
        top: -15px;
        padding: 0 10px;
        background: #f0f0f0;
        color: White;
        font-size: var(--font-size-title);
    }

/**************** Primary Color ****************/

.hr-Primary-Color hr.Style1 {
    border-top: 1px solid var(--background-primary-color);
}
.hr-Primary-Color hr.Style2 {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f000, var(--background-primary-color), #f0f0f000);
    background-image: -moz-linear-gradient(left, #f0f0f0, var(--background-primary-color), #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, var(--background-primary-color), #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, var(--background-primary-color), #f0f0f0);
}

.hr-Primary-Color hr.Style3 {
    border-top: 1px dashed var(--background-primary-color);
}

.hr-Primary-Color hr.Style4 {
    border-top: 1px dotted var(--background-primary-color);
}

.hr-Primary-Color hr.Style5 {
    background-color: #fff;
    border-top: 2px dashed var(--background-primary-color);
}


.hr-Primary-Color hr.Style6 {
    background-color: #fff;
    border-top: 2px dotted var(--background-primary-color);
}

.hr-Primary-Color hr.Style7 {
    border-top: 1px solid var(--background-primary-color);
    border-bottom: 1px solid #fff;
}


.hr-Primary-Color hr.Style8 {
    border-top: 1px solid var(--background-primary-color);
    border-bottom: 1px solid #fff;
}

    .hr-Primary-Color hr.Style8:after {
        content: '';
        display: block;
        margin-top: 2px;
        border-top: 1px solid var(--background-primary-color);
        border-bottom: 1px solid #fff;
    }

.hr-Primary-Color hr.Style9 {
    border-top: 1px dashed var(--background-primary-color);
    border-bottom: 1px dashed #fff;
}

.hr-Primary-Color hr.Style10 {
    border-top: 1px dotted var(--background-primary-color);
    border-bottom: 1px dotted #fff;
}

.hr-Primary-Color hr.Style11 {
    border-top: 1px dashed var(--background-primary-color);
}

    .hr-Primary-Color hr.Style11:after {
        content: '\002702';
        display: inline-block;
        position: relative;
        top: -12px;
        left: 40px;
        padding: 0 3px;
        background: #f0f0f0;
        color: var(--background-primary-color);
        font-size: var(--font-size-title);
    }


.hr-Primary-Color hr.Style12 {
    height: 30px;
    border-style: solid;
    border-color: var(--background-primary-color);
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

    .hr-Primary-Color hr.Style12:before {
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: var(--background-primary-color);
        border-width: 0 0 1px 0;
        border-radius: 20px;
    }

.hr-Primary-Color hr.Style13 {
    height: 10px;
    border: 0;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


.hr-Primary-Color hr.Style14 {
    border-top: 3px double var(--background-primary-color);
}


.hr-Primary-Color hr.Style15 {
    border-top: 4px double var(--background-primary-color);
    text-align: center;
}

    .hr-Primary-Color hr.Style15:after {
        content: '\002665';
        display: inline-block;
        position: relative;
        top: -15px;
        padding: 0 10px;
        background: #f0f0f0;
        color: var(--background-primary-color);
        font-size: var(--font-size-title);
    }

/**************** Secondary Color ****************/

.hr-Secondary-Color hr.Style1 {
    border-top: 1px solid var(--background-secondary-color);
}

.hr-Secondary-Color hr.Style2 {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f000, var(--background-secondary-color), #f0f0f000);
    background-image: -moz-linear-gradient(left, #f0f0f0, var(--background-secondary-color), #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, var(--background-secondary-color), #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, var(--background-secondary-color), #f0f0f0);
}

.hr-Secondary-Color hr.Style3 {
    border-top: 1px dashed var(--background-secondary-color);
}

.hr-Secondary-Color hr.Style4 {
    border-top: 1px dotted var(--background-secondary-color);
}

.hr-Secondary-Color hr.Style5 {
    background-color: #fff;
    border-top: 2px dashed var(--background-secondary-color);
}


.hr-Secondary-Color hr.Style6 {
    background-color: #fff;
    border-top: 2px dotted var(--background-secondary-color);
}

.hr-Secondary-Color hr.Style7 {
    border-top: 1px solid var(--background-secondary-color);
    border-bottom: 1px solid #fff;
}


.hr-Secondary-Color hr.Style8 {
    border-top: 1px solid var(--background-secondary-color);
    border-bottom: 1px solid #fff;
}

.hr-Secondary-Color hr.Style8:after {
    content: '';
    display: block;
    margin-top: 2px;
    border-top: 1px solid var(--background-secondary-color);
    border-bottom: 1px solid #fff;
}

.hr-Secondary-Color hr.Style9 {
    border-top: 1px dashed var(--background-secondary-color);
    border-bottom: 1px dashed #fff;
}

.hr-Secondary-Color hr.Style10 {
    border-top: 1px dotted var(--background-secondary-color);
    border-bottom: 1px dotted #fff;
}

.hr-Secondary-Color hr.Style11 {
    border-top: 1px dashed var(--background-secondary-color);
}

    .hr-Secondary-Color hr.Style11:after {
        content: '\002702';
        display: inline-block;
        position: relative;
        top: -12px;
        left: 40px;
        padding: 0 3px;
        background: #f0f0f0;
        color: var(--background-secondary-color);
        font-size: var(--font-size-title);
    }


.hr-Secondary-Color hr.Style12 {
    height: 30px;
    border-style: solid;
    border-color: var(--background-secondary-color);
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

.hr-Secondary-Color hr.Style12:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: var(--background-secondary-color);
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

.hr-Secondary-Color hr.Style13 {
    height: 10px;
    border: 0;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


.hr-Secondary-Color hr.Style14 {
    border-top: 3px double var(--background-secondary-color);
}


.hr-Secondary-Color hr.Style15 {
    border-top: 4px double var(--background-secondary-color);
    text-align: center;
}

    .hr-Secondary-Color hr.Style15:after {
        content: '\002665';
        display: inline-block;
        position: relative;
        top: -15px;
        padding: 0 10px;
        background: #f0f0f0;
        color: var(--background-secondary-color);
        font-size: var(--font-size-title);
    }




@media (min-width: 768px) {
    .w-md-100 {
        width: auto !important;
    }
}