/*
1. PAGE STRUCTURE
	a. skeleton including page furniture - body, header, footer, generic layout
2. GENERAL STYLES
    a. backgrounds
	b. navigation
	c. links 
	d. buttons
	e. headings
	f. text styles
    g. images
	h. other elements, tags
3. LAYOUT
    a. columns
	b. tables
	c. grids
    d. panels
    e. boxes
    f. modals
4. HELPER STYLES
	a. notifications and errors 
5. PAGE SPECIFIC OVERRIDES

    Finastra colours:

    Purple: #694ed6;
    Pink: #cb42ab;

*/


@media only screen and (min-width: 320px) {
}
@media only screen and (min-width: 480px) {
}
/* Bootstrap col */
@media only screen and (max-width: 576px) {
}
/* Bootstrap col-sm */
@media only screen and (min-width: 576px) {
}
/* Bootstrap col-md */
@media only screen and (min-width: 768px) {
}
/* Bootstrap col-lg */
@media only screen and (min-width: 992px) {
}
/* Bootstrap col-xl */
@media only screen and (min-width: 1200px) {
}
@media (min-width: 1590px) {
}

/* 1. PAGE STRUCTURE ---------------------------------------------------------------------------------------------------------------*/

/* a. skeleton including page furniture - body, header, footer, generic layout ************************************************************/

/* latest solution for iOS fixed background that covers viewport is to set it in body and html tags (div with .bodyBackground class didn't work in Wagamama 2017 */
body {
    background-color: #fff;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    font-family: Conv_Roboto-Regular, Arial, sans-serif;
    color: #5a5c5d;
    font-size: 16px;
}
#wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}
#master-login .section-full-height {
    padding: 10vh 0 40vh;
}
.login-status {
    padding: 5px 0;
    font-size: .8rem;
    color: #694ed6;
    z-index: 1000;
}
    .login-status a {
        color: #694ed6;
    }

/* header ************************************************************************************************************************/

header {
    background-color: #fff;
    border-bottom: 1px solid #414141;
}
.navbar {
    margin-bottom: 10px;
}
.navbar-collapse {
    /*padding-top: 55px;*/
}
/*.navbar-brand, .reconnect-logo-w-shade, .navbar-toggler {
    margin-bottom: 20px;
}*/
@media only screen and (min-width: 576px) {
    .navbar-toggler {
        /*margin-right: 100px;  push toggle on to next line at smaller screen sizes */
    }
}
@media only screen and (min-width: 768px) {
    .navbar-brand {
        margin-bottom: 0;
    }
    .navbar-brand {
        margin-right: 1rem;
    }
}
@media only screen and (min-width: 1200px) {
    .navbar-toggler {
        margin-right: 0;
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 768px) {
    #master-login header, #master-errors header {
/*        height: 250px;
*/    }
}
@media only screen and (min-width: 992px) {
    #master-login header, #master-errors header {
/*        height: 300px;
*/    }
}
@media only screen and (min-width: 1200px) {
    #master-login header, #master-errors header {
/*        height: 350px;
*/    }
}
@media (min-width: 1590px) {
    #master-login header, #master-errors header {
/*        height: 450px;
*/    }
}


/* footer ************************************************************************************************************************/

footer {
    font-size: 12px;
}
    footer .flex-list ul li a {
        /*color: #fff !important;*/
    }

footer {
    border-top: 1px solid #414141;
    background-color: #694ed6;
    color: #fffcfc;
    padding: 17px 0;
    min-height: 332px;
}

    footer a {
        color: #fffcfc;
        text-decoration: underline;
    }

/* 2. GENERAL STYLES ----------------------------------------------------------------------------------------------------------------*/

/* headings *****************************************************************************************************************************/

.purple {
    color: #694ed6;
}


/* backgrounds *****************************************************************************************************************************/

.bg-primary { /* primary background colour across site (INCLUDING ERROR PAGES) - overrides Bootstrap class */
    background-color: #ffffff !important;
}
footer .bg-primary {
    background-color: #694ed6 !important;
}

/* navigation ************************************************************************************************************************/

.radTabStripScheduleDays .rtsLevel {
    text-align: center;
}

.radTabStripScheduleDays .rtsUL {
    display: inline-block !important;
    float: none !important;
}

.radTabStripScheduleDays li.rtsLI a {
    width: 80px;
    padding: 12px 0;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background-color: #694ed6;
}

    .radTabStripScheduleDays li.rtsLI a:hover {
        background-color: #8a8d8f;
    }

    .radTabStripScheduleDays li.rtsLI a.selected {
        background-color: #8a8d8f;
    }

/* list items ************************************************************************************************************************/

li {
    text-align: left;
}

@media only screen and (max-width: 767px) {
    .nav-pills li {
        margin-right: auto!important;
        margin-left: auto!important;
        float: none;
    }
}

    @media only screen and (min-width: 768px) {
        .nav-pills li {
            margin-right: 15px;
        }
    }

.nav-pills .btn {
    min-width: 0 !important; 
}

    .flex-list {
    margin: 0;
}

@media only screen and (max-width: 575px) {
    .flex-list ul {
        display: block !important;
    }

    .flex-list ul li {
        border: none !important;
    }
}

@media only screen and (min-width: 576px) {
    .flex-list {
        display: flex;
        margin: 0 -40px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    .flex-list {
        /*margin: 0 -25px;*/
        margin: 0 -40px;
    }
}

.flex-list ul {
    display: flex;
    flex-grow: 1;
    width: 100%;
    padding: 0;
    list-style-type: none;
}

    .flex-list ul li {
        flex-grow: 1;
        text-align: center;
        box-sizing: border-box;
        flex-wrap: nowrap;
        border-left: 1px solid #066C3A;
    }

.flex-list ul > li:first-child {
    border: none;
}

footer .flex-list ul li {
    flex-grow: 0;
    padding: 0 20px;
}
@media only screen and (min-width: 576px) {
    footer .flex-list ul > li:first-child {
        padding-left: 40px;
    }
}
@media only screen and (max-width: 575px) {
    footer .flex-list.footer-legal ul {
        display: flex !important;
    }
    footer .flex-list.footer-legal ul > li:first-child {
    padding-left: 0;
    }    
}

/* links *****************************************************************************************************************************/

a, a:not([href]):not([class]), a:not([href]):not([class]):hover { /* applying class stops Bootstrap a:not([href]):not([class]) from applying, ie when there's no href */
    text-decoration: none;
    color: #694ed6;
    cursor: pointer;
}

footer a {
    color: #fffcfc;
}

/* buttons ****************************************************************************************************************************/

@media only screen and (max-width: 767px) {
    .btn-group { /* apply btn-group-vertical properties at lower resolutions */
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
    }
}


/* headings ***************************************************************************************************************************/



/* text styles ************************************************************************************************************************/



/* tooltip and information icon ************************************************************************************************************************/

.tool-tip i {
    color: #333;
}
.tool-tip {
    display: inline;
    position: relative;
}

/*    .tool-tip:hover::after {
        transform: scale(0);
        transition: transform ease-out 150ms, bottom ease-out 150ms;
    }
    .tool-tip::after {
        transform: scale(1);
        bottom: 200%;
    }*/

    .tool-tip:hover:after {
        border-radius: 5px;
        bottom: 26px;
        content: attr(tooltip);
        left: 20%;
        padding: 5px 15px;
        position: absolute;
        z-index: 98;
        width: auto;
        text-align: left;
        background: #333;
        background: rgba(0,0,0,.85);
        color: #fff;
    }

    .tool-tip:hover:before {
        border: solid;
        border-color: #333 transparent;
        border-width: 6px 6px 0 6px;
        bottom: 20px;
        content: "";
        left: 50%;
        position: absolute;
        z-index: 99;
    }
@media only screen and (min-width: 768px) {
    .tool-tip:hover:after {
        width: 500px;
    }
}

/* images *****************************************************************************************************************************/

.centre-vertical {
    display: flex;
    align-items: center; /* center vertically */
}

/* modals *****************************************************************************************************************************/

.modal-content {
    border: none;
    border-radius: 4px;
}
    .modal-content a {
        color: #00c1de;
    }

        .modal-content a:hover {
            /*color: #fff;*/
        }

.modal-header .close {
    margin-left: 1rem;
    color: #fff;
    text-shadow: none;
    opacity: 1;
}

.modal-header {
        border-bottom: none;
    }

    .modal-body {
        padding: 0 2rem;
    }

    .modal-footer {
        border: none;
        text-align: center;
    }

.modal-footer {
    justify-content: center;
    border-top: none;
    /*color: #fff;*/
}
    .modal-footer a {
        /*color: #fff;*/
    }
    .modal-footer a:hover {
        /*color: #fff;*/
    }

    @media (prefers-reduced-motion: reduce) {
        .fade {
            transition: opacity .15s linear;
        }
    }
    /*.fade {
    transition: opacity .15s linear;
}*/

/* other elements, tags ***************************************************************************************************************/


/* 3. LAYOUT -------------------------------------------------------------------------------------------------------------------------*/

/* columns ****************************************************************************************************************************/

/* tables *****************************************************************************************************************************/

/* grids ******************************************************************************************************************************/

/* panels *****************************************************************************************************************************/


/* boxes and cards etc ******************************************************************************************************************************/


/* 4. HELPER STYLES ------------------------------------------------------------------------------------------------------------------*/

/* a. notifications and errors ********************************************************************************************************/

/* Bootstrap override */
.alert-danger {
    color: #cb42ab;
    background-color: #faecf7;
    border-color: #eab3dd;
}

.alert-danger-2 {
    color: #e40046;
    background-color: #fce6ed;
    border-color: #f499b5;
}

/* 5. PAGE SPECIFIC OVERRIDES --------------------------------------------------------------------------------------------------------*/

/* RadWindowManager ******************************************************************************************************************************/

.RadWindow {
    width: 90% !important;
    background-color: #fff;
}

    .RadWindow .rwTitleBar {
        font-size: .9rem;
        padding: 5px;
        text-align: center;
    }

@media only screen and (min-width: 768px) {
    .RadWindow {
        width: 70% !important;
    }

        .RadWindow .rwTitleBar {
            font-size: 1.5rem;
        }
}

@media only screen and (min-width: 992px) {
    .RadWindow {
        width: 50% !important;
    }
}

@media only screen and (min-width: 1200px) {
    .RadWindow {
        width: 40% !important;
    }
}

/* FAQ page accordion ******************************************************************************************************************************/

.accordion, .accordion .accordion-item, .accordion-button, .accordion-button:not(.collapsed) {
    background-color: transparent;
}
.accordion-faq.accordion {
    border-bottom: solid 1px #97999b;
}
.accordion-button {
    color: inherit;
    padding: .5rem 1.25rem;
    border-top: solid 1px #97999b;
    font-size: 18px;
}
    .accordion-button:not(.collapsed) {
        color: #066C3A;
        box-shadow: none;
    }
    .accordion-button:focus {
        border-color: #97999b;
        box-shadow: none;
    }
    .accordion-button::after {
        background-image: url('../../Images/deloitte/icons/triangle-grey-200.gif');
        width: 20px;
        height: 20px;
    }
    .accordion-button:not(.collapsed)::after {
        background-image: url('../../Images/deloitte/icons/triangle-green-200.gif');
        /*margin-bottom: 20px;*/
    }
.accordion-body {
    padding-top: 0;
}