/* LAST UPDATED: 07.08.2024 - SM */
/* As of 06.26.2024, this is a work in progress/will require jumping around as buttons are in multiple content types */

/* NOTE: .btn is a Bootstrap class. Only one override found so far. */

/* Mostly for forms, but these were grouped together from the directory page */
button,
select {
    text-transform: none;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
}

button,
input {
    overflow: visible;
}

[type="reset"],
[type="submit"],
button,
html [type="button"] {
    -webkit-appearance: button;
}

.btn {
    padding: 0;
}

.btn-link {
    background-color: transparent;
    color: var(--primary-color);
    font-size: 1.44em;
    font-weight: 700;
}

.btn-link.focus,
.btn-link:focus,
.btn-link:hover {
    border-color: transparent;
    box-shadow: none;
    text-decoration: none;
}

.button {
    background-color: var(--primary-accent);
    /* border-radius: 10px; */
    color: var(--primary-neutral-light);
    cursor: pointer;
    display: inline-block;
    line-height: 1.2;
    padding: 0.5em 0.75em;
    text-decoration: none;
    transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
}

.button:active,
.button:focus,
.button:hover {
    background-color: var(--primary-dark);
    color: var(--primary-neutral-light);
    text-decoration: underline;
}

.button-large,
.button--large {
    font-size: 1.125em;
    font-weight: 400;
    max-width: 14em;
    padding: 0.4em 1em;
    text-align: center;
}

.button--outline {
    border: 1px solid var(--primary-dark);
    font-size: 1.125em;
    font-weight: 600;
}

.button--outline:focus,
.button--outline:hover {
    background-color: var(--primary-dark);
    color: var(--primary-neutral-light);
}

/* Normally used for the "Load more" button on the news grid */
.button--outline--light {
    background-color: transparent;
    color: var(--primary-accent);
}

.button--outline--light:focus,
.button--outline--light:hover {
    box-shadow: 0 0 0 0.2em rgba(31, 127, 155, 0.25);
    outline: none;
}

.button-color-blue,
.button--color--blue {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-neutral-light);
}

.button-color-blue:active,
.button-color-blue:focus,
.button-color-blue:hover,
.button--color--blue:active,
.button--color--blue:focus,
.button--color--blue:hover {
    background-color: var(--primary-neutral-light);
    color: var(--primary-color);
}


.button-color-rust,
.button--color--rust {
    background: var(--primary-to-dark-gradient);
    color: var(--primary-neutral-light);
    border: 1px solid var(--primary-accent);
    clip-path: polygon(0 20px, 20px 0, 100% 0, 100% 100%, 0% 100%);
}

.button-color-rust:active,
.button-color-rust:focus,
.button-color-rust:hover,
.button--color--rust:active,
.button--color--rust:focus,
.button--color--rust:hover {
    background: var(--primary-accent-to-primary-color-gradient);
}

.button-outline-rust,
.button-outline--rust,
.button--outline--rust {
    background-color: var(--primary-neutral-light);
    border: 1px solid var(--primary-accent);
    color: var(--primary-accent);
}

.button-outline-rust:active,
.button-outline-rust:focus,
.button-outline-rust:hover,
.button-outline--rust:active,
.button-outline--rust:focus,
.button-outline--rust:hover,
.button--outline--rust:active,
.button--outline--rust:focus,
.button--outline--rust:hover {
    background-color: var(--primary-accent);
    color: var(--primary-neutral-light);
}

.button--color--beige {
    background: var(--primary-accent-to-primary-color-gradient);
    color: var(--primary-neutral-light);
    font-weight: bold;
    border-radius: 0;
}

.button--color--beige:focus,
.button--color--beige:hover {
    background: var(--primary-accent);
}

.button--color--dark-blue {
    background-color: var(--primary-dark);
    border: 1px solid var(--primary-dark);
    color: var(--primary-neutral-light);
}

.button--color--dark-blue:focus,
.button--color--dark-blue:hover {
    background-color: var(--primary-neutral-light);
    color: var(--primary-dark);
}

.button-menu {
    margin: 0 auto !important;
    /* Formerly 0 */
    width: 100% !important;
    /* Added 06.08.2022 */
}

.button-menu .button {
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-box;
    font-weight: 600;
    justify-content: center;
  	margin-bottom: 1em;
    max-width: 100%;
    width: 100%;
    /* Added 06.08.2022 */
}

.button-menu .button--large {
    font-size: 1em;
    padding: 0.6em 0.4em;
}

.cta-buttons {
  padding-left: 0;
}

.cta-buttons .button {
    background-color: var(--primary-accent);
    border: none;
    color: var(--primary-neutral-light);
    clip-path: polygon(0 20px, 20px 0, 100% 0, 100% 100%, 0% 100%);
    font-size: 1.08em; /* Had to shrink from 1.25em after converting landing page buttons to cta-buttons */
    font-weight: 600;
    margin: 5px 0;
    padding: 1em;
    text-align: center;
    transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
    width: 90%;
}

.cta-buttons .button:active,
.cta-buttons .button:focus,
.cta-buttons .button:hover {
    background: var(--primary-accent-to-primary-color-gradient);
    border: 3px solid var(--primary-accent-shade);
}

/*.cta-buttons div:nth-child(1) .button {
    background: var(--primary-color);
}

.cta-buttons div:nth-child(1) .button:active,
.cta-buttons div:nth-child(1) .button:focus,
.cta-buttons div:nth-child(1) .button:hover {
    background: var(--primary-color-shade);
}

.cta-buttons div:nth-child(2) .button {
    background: var(--primary-accent);
}

.cta-buttons div:nth-child(2) .button:active,
.cta-buttons div:nth-child(2) .button:focus,
.cta-buttons div:nth-child(2) .button:hover {
    background: var(--primary-accent-shade);
}

.cta-buttons div:nth-child(3) .button {
    background: var(--secondary-accent);
}

.cta-buttons div:nth-child(3) .button:active,
.cta-buttons div:nth-child(3) .button:focus,
.cta-buttons div:nth-child(3) .button:hover {
    background: var(--secondary-accent-shade);
}

.cta-buttons div:nth-child(4) .button {
    background: var(--primary-dark);
}

.cta-buttons div:nth-child(4) .button:active,
.cta-buttons div:nth-child(4) .button:focus,
.cta-buttons div:nth-chlid(4) .button:hover {
    background: var(--primary-dark-shade);
} */

.general-content-btn {
    margin: 15px 0;
}

/* For the "MD/MPH or "MD/MBA" section on the Doctor of Medicine page */
.btn-1,
.btn-2 {
    margin: 15px 0;
}

.btn-search,
.btn-search:focus,
.btn-search:hover {
    background: url(/media/evms_public/evms_branding/images/icons/misc/svgs/search-icon.svg) no-repeat center;
    background-size: contain !important;
    border: none;
    box-shadow: none !important;
    width: 33px;
    height: 33px;
}

.btn-search:focus {
    box-shadow: 0 0 0 0.2rem rgba(31, 127, 155, 0.25);
    outline: none;
}

/* For the "Browse the directory" button */
.directory-search__button {
    font-size: 1.125em;
    padding: 0.5em;
    text-align: center;
    width: 100%;
}

/* For the search icon button */
.button-directory-search {
    background: url(/media/evms_public/evms_branding/images/icons/misc/svgs/search-icon-gray.svg) no-repeat center;
    height: 3em;
    margin: 0 0 0 1em;
    padding: 0;
    position: absolute;
    width: 3em;
    right: 0;
    top: 0;
}

.button-directory-search:active,
.button-directory-search:focus,
.button-directory-search:hover,
.button-directory-search:active .icon--search,
.button-directory-search:focus .icon--search,
.button-directory-search:hover .icon--search {
    border: none;
    outline: 0;
}

/* .close is a Bootstrap button class and it's used for modals (videos, FormStack forms) */
/* Only override found so far */
.close {
    color: var(--primary-neutral-light);
    font-size: 2.5em;
    font-weight: 700;
    opacity: 1;
    position: absolute;
    right: -55px;
    top: -10px;
    z-index: 999;
}

/* Only on Library page */
.quick-link-buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

/* Only on the calendar page */
.overlay_content--calendar .close_button {
    right: 1%;
    top: 12px;
}

div.close_button {
    background: url("https://www.evms.edu/media/evms_public/content/style_assets/images/responsiveimages/modalCloseBtn.png") no-repeat top right;
    background-size: contain;
    cursor: pointer;
    float: right;
    height: 21px;
    margin: 7px 8px;
    text-indent: -9000em;
    width: 21px;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}









/***** MEDIA QUERIES *****/
/* 06.28.2024 - The new buttons flash a bit on and off hover */
@media screen and (prefers-reduced-motion: reduce) {
  .button {
    transition: none !important;
    -webkit-transition: none !important;
  }
}

@media screen and (orientation: portrait) {
  .cta-buttons {
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }
}




@media screen and (max-width: 575px) {
    .directory-search__button {
        width: 85% !important;
    }
}


@media screen and (min-width: 600px) {
    .button-menu {
        column-gap: 1em;
        display: flex;
        flex-wrap: wrap;
    }

    .button-menu .button {
        flex: auto;
        -ms-flex: auto;
        -webkit-box-flex: 1;
        width: 48%;
    }
  
  	
}

@media screen and (max-width: 760px) {
    .button-menu .button--large {
        margin-bottom: 1em;
    }
  
    .cta-buttons .button {
      margin: 0.75em;
      width: 80%;
    }
}


@media screen and (min-width: 768px) {
    .cta-buttons .button {
        margin: 0 auto;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	/* For the directory search button on /education */
  .button-directory-search {
    height: 50%;
  }
}


@media screen and (min-width: 800px) {
    .directory-search__button {
        margin: 0 1em;
        padding: 0.8em;
    }
}

@media screen and (max-width: 992px) {
    .directory-search__button {
        width: 85%;
    }
  
    	  
  	.close {
      right: 0;
      top: 0;
    }
}


@media screen and (min-width: 1000px) {
    .directory-search__button {
        width: 25%;
        /* Formerly 25% */
    }

    .button-menu {
        flex-flow: row nowrap;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        width: 24%;
    }

    .button-menu .button--large {
        font-size: 1.15em;
    }

    /* Remove .last-button class from about_us, this is sufficiently handling the last button in the row. */
    .button-menu .button:last-child {
        margin-right: 0;
        text-align: center;
    }
}