/* Class exists. Gives margin to Cool Tool Searchbox */
.search-box {
    margin-bottom: 2.5em;
}

/* _search.scss - Add this class in search-widget CSS. It give a bottom border to cool tools search results and margin bottom. */
.search-widget .results-list {
    border-bottom: 1px solid #ccc;
    margin-bottom: 2.5em;
}

/* New Classes. Gives border to Cool Tools AutoComplete dropdown */
.ui-autocomplete {
    border: 1px solid #ccc;
}

    .ui-autocomplete li:hover {
        background: #fff;
        border: 1px solid #036;
    }

    .ui-autocomplete li {
        border: 1px solid #fff;
    }

/* New Class.  Adds an active state in main menu. */
.main-nav .cm-menu > .active > a {
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

/*Existing CSS. Too much padding bottom inside Aggregator items. */
.page-aggregator.item-list .item {
    padding: 2em 0 0 0;
}

/* Overwrite Existing CSS. Adds border-bottom to alert box and removes bottom margin. */
.alert-widget {
    margin-bottom: 0;
    border-bottom: 1px solid #ccc;
}

/* New Class. Button for when application period is closed. Used on Enrollment pages */
.btn-period-closed,
.btn-period-closed .btn-primary {
    line-height: initial;
    cursor: default;
    background: #4374B8;
    border-color: #4374B8;
}

.rte-content.btn-period-closed {
    margin-bottom: 2.5rem;
    padding-left: 25px;
    padding-right: 25px;
}

@media (min-width: 768px) {
    .button-template .callout-list.full-width-callout {
        margin-bottom: 2.5rem;
    }
}

/*  Existing CSS.
    link-off icon is way too big in right column. The .aside-column class needs to be added to this CSS.
*/
.callout-list a .icon-link-off,
.aside-column .callout-list a .icon-link-off {
    width: 1em;
    display: inline-block;
    height: 1em;
    margin: -6px 0 0px .6em;
    vertical-align: middle;
    fill: #fff;
}

.fill-org {
    fill: #ff9933;
}

/* Overwrites Existing. Gets rid of excess spacing on top and bottom of a callout widget. */
@media (min-width: 48em) {
    .button-template .callout-list {
        margin-top: 0;
        margin-bottom: 2.5rem;
    }

    .callout-list > li {
        margin-bottom: 0;
    }
}

/* Overwrites Existing Class. */
.callout-list a {
    width: auto;
    min-width: 13.125rem;
}

/* Existing Class. Add margin-bottom to this class. Get rid of extra margin created by the description text in callout widget. */
.callout-list .callout-desc {
    margin-bottom: 0;
}

/* Existing Class. Add ".theme-01+.rte-content" to this Class in order to give top margin to elemets with class .rte-content that follows a callout widget */
/* See https://www.schools.nyc.gov/about-us/news/welcome-from-the-chancellor as an example.  */
@media (min-width: 30em) {
    .hero + .widget, .theme-01 + .widget, .theme-01 + .rte-content {
        margin-top: 2.5rem;
    }
}

/* Overwrites existing CSS Class. Makes margin-bottom 40px for documents widget. */
.documents.widget {
    margin: 0;
    margin-bottom: 2.5rem;
}

/* Overwrite Existing CSS. Callouts get 0 margin-top on righ-hand side.*/
@media (min-width: 48em) {
    .aside-column .callout-list {
        margin-top: 0;
    }
}

.documents .item-list .item a:focus svg,
.documents .item-list .item a:hover svg,
/* Add this so link-off icon is white when hovering over a navigation link. */
.section-nav a:hover svg {
    fill: #fff;
}

/* Class .widget has to be changed to .aside-comumn because it gives top margin to document widget. We want to give top margin to side column only. */
img + .flex-row .widget {
    margin-top: 0;
}

img + .flex-row .aside-column {
    margin-top: 2.5rem;
}

/* Existing Class. Just add "h3" to the "h1, h2 {}" class */
/*h1, h2,*/ h3 {
    margin-bottom: .5em;
}

/* Existing Class. Give h1 a little more margin (from .5 to .75em) to equal 40px. */
h1 {
    margin-bottom: .75em;
}

.tabs-widget .accordion h3 {
    margin-bottom: 0;
}

/* Existing Class. Reduces padding in main navigation tabs due to addition of "Multilingual Learners". */
@media (min-width: 81.25em) {
    .nav-bar .cm-menu > li > a {
        padding-left: .4em;
        padding-right: .4em;
    }
}

/* Existing Class. Eliminate bottom margin from job signature on Job Posting Pages.  */
.module-content .job-signature {
    margin-bottom: 0;
    margin-top: 15px;
}

/*Existing CSS class. Top margin is too much in accordions */
.accordion [data-toggle]:after {
    top: 1.55rem;
}

/* New Class. Gets rid of margin-top on jump-box only when there is no image above it. */
.rte-content + .flex-row .main-column .jump-box {
    margin-top: 0;
}

/* New Class. Show visually hidden H1 headers in the backend only */
.RadDockZone h1.visually-hidden {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    margin: auto !important;
}

    .RadDockZone h1.visually-hidden:after {
        content: "This H1 is intended for screen readers only and will be visually hidden in published state";
        font-size: 14px;
        display: inline-block;
        color: red;
        padding: 10px;
        background-color: #ffebee;
    }

/* New Class. Capitalizes letters of Google Translated Words in Main Navigation. */
.main-nav .cm-menu li font {
    text-transform: capitalize;
}

/* Existing Class. Image slider cuts off bottom only */
.hero .is-bg {
    background-position: 50% 0%;
}

/* Footer folow us to show as a block element after removing h3*/
.footer-top .social-widget .title {
    display: block;
}

/* Fix minor issues */
h4 {
    font-size: 1.15rem;
}

div.rte-content img {
    display: block
}

/*Accessible tables*/
.table-responsive {
    overflow-x: auto;
}

    .table-responsive tr:first-child th {
        background-color: #eee;
    }

.addthead {
    margin-bottom: 1.8em;
}

/*Responsive Vimeo embed*/
.embed-container {
    margin-bottom: 1.8em;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

    .embed-container iframe, .embed-container object, .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/*Responsive GoogleCalendar embed*/
.googleCalendar {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 75%;
}

    .googleCalendar iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/*Accordions*/
.accordionblock {
    padding-bottom: 2rem;
}

div.accordionblock h2 {
    margin: 0;
    line-height: normal;
    border-top: 0;
    display: block;
    position: relative;
    border-bottom: 1px solid #ccc;
    padding: .6em 30px .6em 0;
    color: #333;
    background: 0;
    transition: color .3s ease-in-out,background .3s ease-in-out,background-size .3s ease-in-out,background-position .3s ease-in-out,background-color .3s ease-in-out;
    cursor: pointer;
}

h2.arrowdown:after {
    top: 45%;
    content: " ";
    position: absolute;
    right: 0;
    vertical-align: middle;
    border: 7px solid transparent;
    border-top-color: #333;
    transform: scale(.98);
}

h2.arrowup:after {
    top: 45%;
    content: " ";
    position: absolute;
    right: 0;
    vertical-align: middle;
    border: 7px solid transparent;
    border-top-color: #333;
    transform: scale(.98) rotate(-180deg) translateY(5px);
}

div.accordionblock h2:hover {
    color: #4374b8;
}

.accordiontoggle {
    display: none;
    padding-top: 2rem;
}

.RadDockZone div.accordionblock, .RadDockZone div.accordiontoggle {
    display: block;
}

.accordionblock hr {
    margin-bottom: -0.6px;
}

.accordion [data-toggle] h2 {
    font-size: 1.875rem;
}

.accordion [data-toggle]:after {
    top: 45%;
}

/* Add alphanumeric outline if css class "alphanumeric" is found */
/*

First Level: Roman Numerals

Second Level: Upper Case Letters

Third Level: Arabic Numerals

Fourth Level: Lower Case Letters

Fifth Level: Lower Case Roman Numerals

*/

.alphanumeric > ol {
    list-style-type: upper-roman;
}

    .alphanumeric > ol > li > ol {
        list-style-type: upper-alpha;
    }

        .alphanumeric > ol > li > ol > li > ol {
            list-style-type: decimal;
        }

            .alphanumeric > ol > li > ol > li > ol > li > ol {
                list-style-type: lower-alpha;
            }

                .alphanumeric > ol > li > ol > li > ol > li > ol > li > ol {
                    list-style-type: lower-roman;
                }

/*IE fix for jumplink*/
.jump-box .content ol li {
    display: -ms-inline-flexbox
}

/*Make UL and OL same font size as other text*/
@media screen and (max-width: 48em) {
    main .rte-content ol, main .rte-content ul {
        font-size: 1.25em !important;
    }
}

/* Image Wrap */
span.cstFloatLeft > img {
    float: left;
    margin-right: 20px
}

div.rte-content ul {
    overflow: hidden;
}

/* Image Caption */
figure.cstImgCap {
    text-align: center;
    font-style: italic;
    font-size: 17.4px;
    margin-bottom: 1.8em
}