/*
 * Software by John Liddiard (aka JohntheFish)
 * www.c5magic.co.uk
 *
 * This package contains software copyright and proprietary to John Liddiard
 *
 */
.ccm-page .show-when-loading {
    display: none;
    z-index: 1000;
}

.ccm-page .form-reform-spinner {
    position: relative;
}

.ccm-page .form-reform-spinner.overlay-window {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
}

.ccm-page .form-reform-spinner.show-in-block {
    margin-left: auto;
    margin-right: auto;
}

/*
 * Colours and position come from edit dialogue. Here are just defaults
 */
.ccm-page .form-reform-spinner .form-reform-spinner-adjust {
    position: absolute;
    margin: auto;
    color: #2d7ac0;
    background-color: rgba(240, 240, 240, 0.6);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.ccm-page .form-reform-spinner.overlay-window .form-reform-spinner-adjust {
    width: 100vw;
    height: 100vh;
}

.ccm-page .form-reform-spinner .form-reform-spinner-position {
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.ccm-page .form-reform-spinner .spinner-page-pre-loader {
    position: absolute;
    background: inherit;
    z-index: 1100;
    overflow: hidden;
    width: 100%;
    height: 100%;

}

.ccm-page .form-reform-spinner .spinner-page-pre-loader .page-pre-loader__effect {
    margin-left: -20px;
}

.ccm-page .form-reform-spinner.show-in-block .spinner-page-pre-loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: none;
}

.ccm-page .form-reform-spinner.overlay-form-elements .spinner-page-pre-loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


/*
 * John Liddiard (aka JohntheFish) www.c5magic.co.uk
 * This package contains software copyright and proprietary to John Liddiard
 *
 */

/*
 * This no-tabs template is intended for use with the Magic Tabs Jump block to add
 * buttons to navigate between tabs or with autoplay.
 *
 * With this template, you can set up 'tab sets' with transitions to play a slide show
 * and not actually have any tab controls showing. The controls are still there, just not
 * visible on the page.
 *
 * Another use would be to set up an alternate navigation elsewhere in the page, and use that
 * to 'click' the relevant invisible tab control, This is effectively what the auto-play and jump
 * blocks do.
 */

.ccm-page .jl_magic_tabs_form_reform_no_tabs {
    height: 0;
    overflow: hidden;
    opacity: 0;
}




/*
Magic Tabs by John Liddiard (aka JohntheFish)
www.jlunderwater.co.uk
This software is licensed under the terms described in the concrete5.org marketplace.
Please find the add-on there for the latest license copy.

Create a tabbed interface simply by inserting magic tabs blocks into the page
*/

/*
 * Icons, hide while loading
 */
h1.jl_magic_tabs_has_icon > i[class*='fa-'],
h2.jl_magic_tabs_has_icon > i[class*='fa-'],
h3.jl_magic_tabs_has_icon > i[class*='fa-'],
h4.jl_magic_tabs_has_icon > i[class*='fa-'],
h5.jl_magic_tabs_has_icon > i[class*='fa-'],
h6.jl_magic_tabs_has_icon > i[class*='fa-'] {
    display: none;
}

h1.jl_magic_tabs_has_icon > i[class^='fa'].jl_magic_tabs_icon_tab,
h2.jl_magic_tabs_has_icon > i[class*='fa-'].jl_magic_tabs_icon_tab,
h3.jl_magic_tabs_has_icon > i[class*='fa-'].jl_magic_tabs_icon_tab,
h4.jl_magic_tabs_has_icon > i[class*='fa-'].jl_magic_tabs_icon_tab,
h5.jl_magic_tabs_has_icon > i[class*='fa-'].jl_magic_tabs_icon_tab,
h6.jl_magic_tabs_has_icon > i[class*='fa-'].jl_magic_tabs_icon_tab{
    display: inline-block;
}


/*
 * Icon states, tabs
 */

/*
 * Inactive tab
 */

.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_tab {
    display: inline-block;
}

.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_tab_active,
.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_tab_hover {
    display: none;
}

/*
 * Inactive tab, hover
 */

.jl_magic_tabs_controls .jl_magic_tabs_has_icon:hover .jl_magic_tabs_icon_tab {
    display: none;
}

.jl_magic_tabs_controls .jl_magic_tabs_has_icon:hover .jl_magic_tabs_icon_tab_hover {
    display: inline-block;
}


/*
 * Active tab
 */

.jl_magic_tabs_controls .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_tab,
.jl_magic_tabs_controls .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_tab_hover {
    display: none;
}

.jl_magic_tabs_controls .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_tab_active {
    display: inline-block;
}


/*
 * Icon states, accordions
 */

/*
 * Inactive accordion
 */

.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_accordion {
    display: inline-block;
}

.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_accordion_active,
.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_accordion_active_hover,
.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_accordion_hover {
    display: none;
}

/*
 * Inactive accordion, hover
 */

.jl_magic_tabs_controls .jl_magic_tabs_has_icon:hover .jl_magic_tabs_icon_accordion {
    display: none;
}

.jl_magic_tabs_controls .jl_magic_tabs_has_icon:hover .jl_magic_tabs_icon_accordion_hover {
    display: inline-block;
}


/*
 * Active accordion
 */

.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_accordion,
.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_accordion_active_hover,
.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_accordion_hover {
    display: none;
}

.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_accordion_active {
    display: inline-block;
}

/*
 * Active accordion, hover
 */
.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active:hover .jl_magic_tabs_icon_accordion_active {
    display: none;
}

.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active:hover .jl_magic_tabs_icon_accordion_active_hover {
    display: inline-block;
}

/*
 * right positioning of icon
 */

.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_accordion_icon_push_right i[class*='fa-']{
    float: right;
}

.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_accordion_icon_push_right a:after,
.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_no_accordion_default a:after {
    content: none !important;
}

/*
 * Some additions to font awesome
 (note, some missing equivalents for old MS)
 */

.fa-mt-rotate-22 {
    -webkit-transform: rotate(22deg);
    -ms-transform: rotate(22deg);
    transform: rotate(22deg)
}

.fa-mt-rotate-45 {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.fa-mt-rotate-135 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg)
}

.fa-mt-rotate-225 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg)
}

.fa-mt-rotate-315 {
    -webkit-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    transform: rotate(315deg)
}

.fa-mt-rotate-338 {
    -webkit-transform: rotate(338deg);
    -ms-transform: rotate(338deg);
    transform: rotate(338deg)
}