/**** Custom Recruiter Styles ****/

.view-container {
    position: relative;
    margin-bottom: 0; /* Set this to match the height of your footer */
}
/* TODO remove this if it isn't used */
/*span.fa.fa-camera {
  margin-top: 15px;
  margin-left: 3px;
}*/

.search-highlight {
    background: #FFF !important;
}

/* Overrides */

.brand-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-breadcrumb {
    display: none;
}

#erec_main_container[esar-layout] recruiter-header #layout-header-container {
    border-bottom: 1px solid #ccc;
    grid-template-columns: 1fr 1fr 1fr;
}

#erec_main_container.side-nav-layout #erec_wrapper {
    overflow: hidden;
}

#layout-header-container > div:has(#layout-header-logo) {
    grid-column: 2 / 3;
    text-align: center;
}

#erec_main_container[esar-layout] recruiter-header #layout-header-container ul#hdr_nav_links {
    justify-content: end;
}

div#landing_page {
    overflow: hidden;
}
.user-settings_edit-profile {
    display: none;
}
#erec_main_container.side-nav-layout .container {
    max-width: unset !important;
}

/*  Custom Header Section  */
recruiter-header #hdr_nav_links li > a {
    font-weight: 500;
    font-size: 1rem;
    border-radius: 50px;
    padding: 0.5rem 1rem;
}

recruiter-header #hdr_nav_links li > a.nyc-login {
    color: var(--main-text-lt) !important;
    background-color: var(--primary-color-muted);
}


#custom-header-content li > a:hover {
    text-decoration: none;
}

#custom-header-content li:first-child > a:hover {
    color: var(--primary-color-muted);
    text-decoration: underline;
}

#custom-header-content li:nth-child(2):hover {
    background-color: var(--primary-color-muted) !important;
}

.login-new-vol-link {
    display: none;
}

#page_volunteer_login #volunteer_login_container {
    margin-top: 3rem;
}
#page_volunteer_login #volunteer_login_container .login-page-title {
    margin-top: 3rem;
    max-width: 600px;
}

div#landing_page h1,
div#landing_page h2 {
    margin: 0;
    text-align: center;
}

body.route_volunteer_home div#erec_wrapper {
    display: flex;
    flex-direction: column;
}

body.route_volunteer_home div#erec_wrapper div.view-container,
body.route_volunteer_home div#erec_wrapper div.view-frame,
body.route_volunteer_home div#erec_wrapper div#landing_page {
    display: flex;
    flex-direction: column;
    flex: 1
}

div#landing_page div[password]:has(input.form-control) {
    background-color: #fff;
}

div#landing_page .btn-primary.alt {
    background-color: #2f8e2f;
}
div#landing_page .btn-primary.alt:hover {
    background-color: #1d791d;
}

div#landing_page .btn-link.back {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem;
    font-size: 1.25rem;
    text-decoration: none;
}

div#landing_page {
    background: linear-gradient(90deg, rgba(5, 74, 116, 1) 13%, rgba(51, 185, 194, 1) 100%);
    position: relative;
}

div#landing_page h1 {
    font-size: 2.5rem;
    font-weight: 500;
    max-width: 700px;
}

div#landing_page h2 {
    font-size: 1.75rem;
}
div#landing_page p {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
div#landing_page p span {
    font-size: 1.125rem;
}

div#landing_page div#landing-page-section > * {
    width: 100%;
    /*background: linear-gradient(180deg, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0.5) 100%);*/
    /*background: linear-gradient(180deg, rgba(255, 255, 255, 1) 22%, rgb(217 230 235 / 91%) 100%);*/
    background: linear-gradient(180deg, rgb(255 255 255) 22%, rgb(255 255 255 / 69%) 100%);
    border-radius: 12px;
    padding: 2rem;
}

div#landing_page div#landing-page-section > div {
    max-width: 550px;
    padding: 2rem;
}

div#landing_page div#landing-page-section > h1 {
    background: linear-gradient(180deg, rgb(255 255 255) 22%, rgb(255 255 255 / 90%) 100%);
}

div#landing_page div#landing_page-credential-buttons{
    width: 100%;
}

div#landing_page svg {
    position: absolute;
    width: clamp(800px, 100%, 2000px);
    bottom: 0;
    transform: translateY(65%);
    z-index: 0;
}

div#landing_page form.login-form {
    width: 100%;
    max-width: 550px;
    margin: 0;
}

div#landing_page form.login-form input#login_username,
div#landing_page form.login-form input#password {
    width: 100%;
    height: auto;
    font-size: 1.25rem;
    padding: 0.5rem;
    line-height: 1;
}


/* Read Only Fields: Update Profile Form */
#page_view_profile div.read-only p.no-value {
    visibility: hidden;
}
#page_view_profile div.read-only p.read-only_value {
    color: #5f5f5f;
    font-weight: 400;
}
#page_view_profile div.read-only p.read-only_label {
    color: #262626;
    font-weight: 500;
    margin-bottom: 2px;
}
#page_view_profile fieldset {
    margin-bottom: 2rem;
}
#page_view_profile .mt10 {
    /*margin-top: 20px !important;*/
}
#page_view_profile .read-only-fields.top-box .formElems-container.col-xs-12 {
    width: 98%;
}
#page_view_profile .read-only-fields:not(.read-only_label) {
    font-size: 1.1rem;
}
#page_view_profile .read-only-fields .read-only_label {
    font-size: 1rem;
    margin: 0;
}

.read-only_value > div > .ml-8 {
    margin-left: 1rem;
}

#page_view_profile dynamic-form form {
    margin: 0 1.5rem;
}

#page_view_profile .read-only-fields > .formElems-container.col-sm-6 {
    flex: 1;
    border: 1px solid;
    float: none;
}

#page_view_profile .formElems-container > .form-group.fl {
    float: none;
    padding: 0;
    margin: 0;
}
#page_view_profile div.info-container,
#page_view_profile div.info-container > div.formElems-container {
    /*margin-bottom: 1.5rem;*/
    max-width: 800px;
    /*padding: 1rem;*/
}
#page_view_profile div.info-container > div.formElems-container {
    margin-bottom: 1.5rem;
}
#page_view_profile legend {
    font-size: 1.75rem;
    font-weight: 500;
}
#page_view_profile .alert.alert-info {
    margin-bottom: 1rem;
    border: none;
    font-weight: 400;
    font-size: 1.125rem;
    padding: 0;
}
#page_view_profile .alert.alert-info.sub-header {
    font-weight: 500;
    font-size: 1.5rem;
    margin-bottom: 0;
}
#page_view_profile .hidden-block,
.mrc-form .hidden-block {
    visibility: hidden;
}
#page_view_profile .read-only-fields.template-row > div {
    padding: 0.25rem 0;
    margin: 0;
    min-width: 35%;
    width: 50%;
}

#page_view_profile div.form-group.read-only {
    margin: 0;
}
#page_view_profile div.form-group .row.personal-profile div.formElems-container {
    margin-top: 2rem !important;
}
#page_view_profile div.form-group.read-only > div,
#page_view_profile div.reference-group .read-only-fields.clinical-license {
    display: grid;
    margin: 0;
    grid-template-columns: 1fr 1fr;
}

#page_view_profile div.form-group.read-only > div[ng-if*="=== 'VOL_LANGUAGE'"] {
    grid-template-columns: minmax(200px, 275px) 1fr;
}

#page_view_profile div.form-group.read-only > div[ng-if*="=== 'VOL_LANGUAGE'"] {
    display: inline-grid;
}

#page_view_profile div.form-group.read-only > div[ng-if*="=== 'VOL_LANGUAGE'"] .read-only_value strong {
    font-weight: 400;
}
#page_view_profile .btn-primary:not(#field_selection .btn-primary)  {
    letter-spacing: .2px;
    padding: 0.5rem 1.5rem;
}
#page_view_profile .row:after {
    display: none;
}
#page_view_profile .row:before {
    display: none;
}

#page_view_profile input[type="radio"]:disabled{
    -webkit-appearance: none;
}

#page_view_profile input[type="radio"]:disabled{
    border: 1px solid #000000;
    border-radius: 8px;
    height: 16px;
    width: 16px;
    vertical-align: unset;
    margin:0
}

#page_view_profile input[type="radio"]:disabled:checked {
    padding:2px;
    background: #4f4f4f;
    border: 4px double #ffffff;
}

#page_view_profile input[type="radio"]:disabled:not(:checked) {
    border-color: #aaa
}

#page_view_profile .read-only_value > div > .ml-8 > strong {
    flex: 1
}

#page_view_profile .dynamic-form,
#page_view_profile .indicates-required-field {
    display: none;
}

label:has(> input[type="radio"]:disabled):last-child {
    /*display:none;*/
}

/* MRC Profile Form */
.mrc-form {
    padding: 0 1rem;
}
.mrc-form .column-headers {
    margin-bottom: 1.2rem;
}
.mrc-form .column-headers .formElems-container {
    font-size: 1.125rem;
}
.mrc-form .read-only_label,
.mrc-form label {
    color: #181818 !important;
    font-size: 15px;
    font-weight: 600;
}
.mrc-form .form-group.read-only {
    font-size: 1rem;
}
.mrc-form .form-group.read-only  > div {
    display: flex;
    justify-content: space-between;
}
.mrc-form div.read-only p.read-only_value {
    font-weight: 400;
}
.mrc-form div.submit-btn {
    width: 250px;
    margin: 0 auto;
    padding-top: 0 !important;
}
.mrc-form .mrc-empty-fields {
    color: #6f6f6f;
    font-size: 1rem;
    padding-top: 1rem;
}
.mrc-form .mrc-current-fields {
    font-size: 1.05rem;
    line-height: 1.3;
}
.mrc-form .mrc-current-fields h3 {
    font-size: 1rem;
    font-weight: 400;
    padding-bottom: 0.3rem;
    color: #6f6f6f;
}
.mrc-form .dropdown-options {
    font-size: 1.05rem;
    line-height: 1.3;
}
esar-side-nav ul#side_nav_links {
    display: flex;
    flex-direction: column;
}
esar-side-nav li:not(esar-side-nav li:has(div.drop-down-nav.side-nav)) {
    max-width: 150px;
    padding: 0;
}
.enroll-button,
esar-side-nav ul#side_nav_links li {
    text-decoration: none;
    background-color: var(--primary-color-muted);
    color: #FFF;
    border-radius: var(--border-radius-btn);
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: 0.35px;
    margin: 0.25rem 0;
}
esar-side-nav ul#side_nav_links li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 1rem 2rem 1rem 0.5rem;
}
.enroll-button {
    padding: 0.5rem 1rem;
}
.enroll-button:hover,
esar-side-nav ul#side_nav_links li.active,
esar-side-nav ul#side_nav_links li:hover {
    color: #fff;
    background-color: var(--accent-color-muted);
}

.mrc-form .form-control {
    height: 26px;
    padding: 0 6px;
}
.mrc-form .formElems-container.col-sm-4.offset-sm-4:first-child {
    padding: 0.25rem 1rem;
    width: 40%;
}
.mrc-form .formElems-container.col-sm-4.offset-sm-4:last-child {
    height: 40px !important;
    padding: 0.25rem 1rem;
    width: 55%;
}
.mrc-form .reference-group.address-fields {
    position: relative;
    margin-top: -5.5rem !important;
    top: -4.05rem;
}
.mrc-form .formElems-container.col-sm-4.offset-sm-4:last-child div.form-group {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    margin-bottom: 0;
}

/*  Formatting Styles  */
.nav-icon {
    margin-right: 0.5rem
}


/* vol_menu */
.welcome-header{
    font-size: 2em;
    font-weight: bold;
    line-height: 1.2em;
    margin: 0 0 10px;
}

.heading-h3{
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.2em;
    margin-top: 20px;
    margin-bottom: 10px;
}

.p-header {
    font-weight: bold;
    margin: 8px 0;
}

.left-dash {
    min-height: 1000px;
    /*position: absolute;*/
    overflow: hidden;
}

.dashboard-container {
    box-shadow: 0px 0px 3px 0px #00000033;
    border: 1px solid #e1e1e1;
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 2rem
}
.dashboard-container .btn {
    font-size: 15px;
}

/*SLIDE IN AND OUT ON THE LEFT*/
.slide-out-left {
    width: 100%;
    padding: 0 1rem;
    top: 0;
    opacity: 1;
    position: absolute;
    animation: slide-out-left 1s linear forwards;
}


/*.slide-in-left {*/
/*    padding: 0 1rem;*/
/*    !*width: 100%;*!*/
/*    !*top: 0;*!*/
/*    opacity: 1;*/
/*    !*position: absolute;*!*/
/*    !*animation: slide-in-left 1s linear forwards;*!*/
/*    visibility: visible;*/
/*    transform: translateX(0);*/
/*    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s; !* No delay for visibility when active *!*/
/*}*/

.slide-in-left {
    padding: 0 1rem;
    width: 100%;
    top: 0;
    opacity: 0;
    position: absolute;
    animation: slide-in-left 1s linear forwards;
}


@keyframes slide-out-left {
    0% {left: 0; opacity: 1;}
    25% {left: -25%; opacity: 0;}
    50% {left: -50%; opacity: 0;}
    75% {left: -75%; opacity: 0;}
    100% {left: -100%; opacity: 0;}
}
@keyframes slide-in-left {
    0% {left: -100%; opacity: 0;}
    25% {left: -75%; opacity: 0;}
    50% {left: -50%; opacity: 0;}
    75% {left: -25%; opacity: 0;}
    100% {left: 0; opacity: 1;}
}


/*SLIDE IN AND OUT ON THE RIGHT*/
.slide-in-right {
    width: 100%;
    padding: 0 1rem;
    top: 0;
    opacity: 1;
    position: absolute;
    animation: slide-in-right 1s linear forwards;
}
.slide-out-right {
    padding: 0 1rem;
    width: 100%;
    top: 0;
    opacity: 0;
    position: absolute;
    animation: slide-out-right 1s linear forwards;
}



@keyframes slide-in-right {
    0% {left: 0; opacity: 1;}
    25% {left: 25%; opacity: 0;}
    50% {left: 50%; opacity: 0;}
    75% {left: 75%; opacity: 0;}
    100% {left: 100%; opacity: 0;}
}
@keyframes slide-out-right {
    0% {left: 100%; opacity: 0;}
    25% {left: 75%; opacity: 0;}
    50% {left: 50%; opacity: 0;}
    75% {left: 25%; opacity: 0;}
    100% {left: 0; opacity: 1;}
}


.dashboard-container-with-back-nav {
    display: flex;
    box-shadow: 0px 0px 3px 0px #00000033;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    min-height: 200px;
}

.main-content-container {
    padding: 1rem;
    text-align: left;
}

.view-all-roles {
    background: #e6e6e6;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 5px 0 0 5px;
    box-shadow: -1px 1px 2px 0 #00000033;
    text-align: left;
    margin-left:-1px;
    /*width: 75px;*/
}

a.view-all-roles {
    text-decoration: none;
}

.view-all-roles:hover {
    background: #d1d1d1;
    box-shadow: -1px 1px 2px 0 #00000033 inset;
}

.view-all-roles button {
    font-size: 14px;
}

.quick-links-container {
    /*border: 1px solid #333333;*/
    /*padding: 1rem;*/
}

.quick-links-option-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quick-links-option a {
    display: block;
    padding: 0.5rem;
    background: #f6f6f6;
    box-shadow: 0 0 5px 0 #00000033;
    border-radius: 5px;
    border: 1px solid #b1b1b1;
    /*}*/

    /*.quick-links-option a {*/
    text-decoration: none;
}
.quick-links-option a:hover {
    background: #ffffff;
}
.quick-links-option a.disabled {
    background: #e1e1e1;
    cursor: not-allowed;
}
.quick-links-option a.disabled h3 {
    color: #525252;
}


/*.roles-container {*/
/*    !*border: 1px solid #333333;*!*/
/*    !*padding: 1rem;*!*/
/*    margin-top: 2rem;*/
/*}*/

.container-header, .role-specific-header {
    margin-bottom: 1rem;
    border-bottom: 1px solid #00000033;
    text-align: left;
}

.role-specific-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: start;
    flex-direction: column;
    /*column-gap: 3rem;*/
}

.bubble-tag {
    display: inline;
    background: #00000011;
    padding: 0px 8px;
    margin-left: -4px;
    border-radius: 4px;
}

.options-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.options-container .attach-div {
    margin-left: 1.5rem;
}

.show-roster {
    margin: 1rem 0;
}

a.option {
    text-decoration: none;
}

.options-container .option {
    color: #f1f1f1;
    padding: 0.25rem 0.5rem;
    background: var(--primary-color-muted);
    box-shadow: 0px 4px 3px -2px #00000033;
    border-radius: 5px;
    border: 1px solid #b1b1b1;
    display:flex;
    flex-direction: column;
    align-items: start;
}

.options-container .option p {
    color: #fff;
    width: 100%;
    padding: 0 0.25rem;
    font-size: 0.9em;
}

.options-container .option p.option-header {
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 4px;
}


.options-container .option:hover {
    background: #4f86b2;
    /*color: #333333;*/
}

.document-container {
    margin-top: 1rem;
}

.document-container .options-container {
    /*    display: flex*/
    /*;*/
    /*    flex-direction: column;*/
    /*    !* background: #f1f1f1; *!*/
    /*    gap: 0px;*/
    /*    box-shadow: 0 2px 3px 0px #00000033;*/
    /*    padding: 1px 4px;*/
    /*    border-radius: 2px;*/
}

/*.document-container .options-container a {*/
/*    display: inline-block;*/
/*    background: #FFF;*/
/*    padding: 5px;*/
/*    border-bottom: 1px solid #00000033;*/
/*}*/


.ics {
    background: #333333;
    color: #fff;
}
.ics h2 {
    color: #FFF;
}
.ics h3 {
    color: #FFF;
}
.ics h4 {
    color: #FFF;
}
.ics p {
    color: #FFF;
}

.ics .container-header, .role-specific-header {
    border-bottom: 1px solid #FFFFFF33;
}

.ics .options-container .option {
    border: 1px solid #333333;
}

.options-container .not-compliant {
    background: #b62231;
}
.options-container .not-compliant:hover {
    background: #d64b59;
}

.options-container .is-pending {
    background: #f2c809;
}

.options-container .option.is-pending p {
    color: #333;
    font-weight: bold;
}


.options-container .is-pending:hover {
    background: #eed960;
}

.non-compliant-step {
    padding: 1rem;
    border-top: 1px solid #00000033;
    background: #ffc9c9;
}

/* Schedule View */
#page_volunteer_menu .upcoming-schedule-no-records-msg {
    display: none;
}

/* WORKFLOW STYLES */

#action_workflow_container {
    margin-top: 2rem;
}

#action_workflow_container .list-item-inner {
    flex-wrap: wrap;
}

#action_workflow .e-content {
    /*padding: 0 1rem;*/
}

#action_workflow .workflow-header {
    display: none;
}
#action_workflow #tabList_workflow .e-tab-header.e-control.e-toolbar.e-lib.e-keyboard,
#action_workflow .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .tab-list-title {
    display: none;
}

#tabList_workflow .list-item.item-enabled:has(.expired) {
    background: #ffb9b9 !important;
}

#tabList_workflow .list-item.compliance-status-1.item-enabled {
    background: #ffb9b9 !important;
}

#tabList_workflow .list-item.compliance-status-1.item-enabled .item-action-area button {
    background: #b62231 !important;
}

#tabList_workflow .list-item.compliance-status-1.item-enabled .item-icon.icon-small.icon-number {
    background: #b62231 !important;
}

#training-content {
    display: flex;
    justify-content: center;
    padding: 3rem 0;

}

.under-construction {
    width: 250px;
    height: 250px;
    border-radius: 1rem;
    background: #f2c809;
    rotate: -45deg;
}

.under-construction-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 1.5rem);
    width: calc(100% - 1.5rem);
    border-radius: 1rem;
    border: 0.75rem solid #333;
    padding: 0.75rem;
    margin: 0.75rem;
    box-sizing: border-box;
}

.under-construction-content h3 {
    display: flex;
    flex-direction: column;
    rotate: 45deg;
    text-align: center;
    gap: 1rem;
    margin-top: -1rem;
    margin-right: -1rem;
}

.under-construction-content h3 i {
    font-size: 32px;
}

/***** DOCUMENTS *****/
#page_documents .heading-h1 {
    padding: .5rem;
    margin: 1.5rem 0;
    background: var(--primary-color-muted);
    color: #fff;
    box-shadow: 0 2px 3px -1px #00000033;
}

#page_documents .document-group {
    margin: 0 1rem;
}

/**** Responder Guide ****/

.grid-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap: 1rem;
    margin: 1rem;
    padding: 1rem;
    background: var(--accent-color-muted);
    border-radius: var(--border-radius);
}

.grid-card {
    box-shadow: 0px 0px 8px 2px #00000033;
    padding: 0.5rem;
    width: clamp(100px, 16vw, 250px);
    height: clamp(150px, 16vw, 250px);
    background: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* font-size: 20px; */
    border-radius: var(--border-radius);
    text-align: center;
}

.grid-card div i {
    font-size: clamp(28px, 5vw, 75px);
}

/**** FAQ ****/

#recruiter-faq .list-item.item-enabled {
}

.faq-section-header.faq-flex {
    gap: 1rem;
}

#recruiter-faq .faq-show-more {
    border-radius: 8px;
    background: var(--primary-color-muted);
    color: var(--main-text-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0.75rem;
}

#recruiter-faq .faq-section-header {
    padding: 0.5rem 1rem;
    margin: 0.125rem 0.25rem;
    box-shadow: 0px 1px 3px 0px #00000033;
    /*background: #f1f1f1;*/

}


/**** ORG Details ****/

#page_organization_details\/\:orgId .affButton2[ng-click="affiliationAction('delete')"] {
    display: none;
}

.org-details-description h4.about-volunteering {
    display: none;
}

#re-enroll-btn {
    padding: 1rem 2rem;
    width: 100%;
    font-size: 1.15rem;
}

/**** Footer ****/

footer {
    background-color: var(--background-drk);
    clear: both;
}

footer .copyright p {
    color: var(--main-text-lt);
    font-size: 10px;
}

footer .footer-links a:hover {
    color: #999;
}

footer .footer-links a {
    color: var(--main-text-lt);
    text-decoration: none;
    display: block;
    font-weight: bold;
    margin-right: 2.12766%;
    padding: 5px 0;
}

footer .copyright a {
    color: var(--main-text-lt);
    text-decoration: none;
}

footer .copyright a:hover {
    text-decoration: underline;
}

footer .copyright p {
    clear: both;
    margin-bottom: 0 !important;
}

.samaritan-footer {
    background: var(--background-drk);
}

.samaritan-footer a {
    color: #FFF;
}

/* Breadcrumb Styles */

.breadcrumb > li > a {
    color: #24557F !important;
}

.breadcrumb > .active {
    color: #525252 !important;
}


/*    Transitions and Animations    */

.swap-animation.ng-enter {
    display: none;
    animation: fade-in 300ms ease-in forwards;
}

.swap-animation.ng-leave {
    animation: fade-out 300ms ease-out forwards;
}

/*.swap-animation.ng-enter-active {*/
/*    opacity: 1;*/
/*}*/
/*.swap-animation.ng-leave-active {*/
/*    transform: translateX(-500px);*/
/*}*/

@keyframes fade-in {
    0% {
        display: block;
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        display: none;
        opacity: 0;
    }
}