/*
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;

*/

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

h1, h2, h3, h4, h5, h6 {
    font-family: Conv_FuturaEF-Medium, Arial, sans-serif;
}

h1, h2, h3, h4 {
    margin-bottom: 0;
    color: #444;
}

h1 {
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25em;
    margin-bottom: 1.5em;
}

h2 {
    font-size: 24px;
}

.meeting-information-page h3, .ad-hoc-meetings-page h3 { /* group admin style */
    color: #fff;
}

.heading {
    box-sizing: border-box;
    text-align: center;
    padding: 30px 50px;
    margin: 30px 0;
}

    .heading h1 {
        color: #fff;
        font-size: 32px;
        font-weight: 300;
        margin-bottom: 0
    }
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
    .heading h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 30px;
    }
}

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

.btn-alt.btn-complete {
    color: #56C271 !important;
    border-color: #56C271 !important;
}

    .btn-alt.btn-complete:hover {
        color: #fff !important;
        background-color: #56C271 !important;
    }

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

a.anchor-box {
    text-decoration: none;
    display: block;
    border-radius: 5px;
    -o-transition: all 520ms ease;
    transition: all 520ms ease;
    border-width: 2px;
    border-style: solid;
    padding: 20px;
    border-color: #e1e1e1;
    overflow: hidden;
    padding: 40px 100px;
    font-size: 22px;
}

    a.anchor-box:hover, a.anchor-box:focus {
        color: #cb42ab;
        background-color: #e1e1e1;
        text-decoration: none;
    }


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

strong {
    font-weight: 600;
}

.highlighted {
    color: #000;
    font-weight: bold;
    padding: 10px;
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.5);
}

.existing-booking p {
    font-size: 16px;
    margin-top: 10px;
}
.purple {
    color: #694ed6;
}

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

.gradient {
    background-color: #694ed6;
}
    .gradient h1, .gradient h2, .gradient h3 {
        color: #ffffff;
    }

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

.box {
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.65);
    box-sizing: border-box;
    padding: 20px 50px 50px 50px;
}

#login-page .box {
    padding: 10px 0 30px;
}

.personaldetails .box {
    padding: 10px 20px 30px;
}

.box-outline-coloured {
    border-width: 5px;
    border-style: solid;
    padding: 20px;
    border-color: #694ed6;
    overflow: hidden;
}

.box-outline {
    border-width: 1px;
    border-style: solid;
    padding: 20px;
    border-color: #e1e1e1;
    overflow: hidden;
}

.box p {
    font-size: 16px;
    margin-bottom: 20px;
}

h2.box {
    padding: 25px 50px;
}

.time-slots .box {
    padding: 25px 50px;
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
    .box {
        padding: 20px 40px 30px;
    }

        .box p {
            font-size: 22px;
        }
}

/* Repeater - Meeting Tool MeetingInformation ************************************************************************************************************************************/

.meeting-info-repeater .repeater-header {
    background-color: #787878;
    color: #fff;
    overflow: hidden;
    padding: 0 20px;
    margin: 20px 0;
}

    .meeting-info-repeater .repeater-header div {
    }

.meeting-info-repeater .repeater-items {
    padding: 0 20px;
}
    .meeting-info-repeater .repeater-items .btn {
        min-width: 185px;
        padding: 10px 40px 10px !important
    }

/*-----------------
Team and Team Choice pages
------------------*/

/*Holder*/
.RadListView.RadListViewFloated.RadListView_Default {
    background: transparent !important;
    padding: 0 !important;
}

/*Reset*/
.RadListView div.rlvI,
.RadListView div.rlvA,
.RadListView div.rlvISel,
.RadListView div.rlvSel,
.RadListView div.rlvIEmpty,
.RadListView div.rlvIEdit {
    border: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reset float and display */
.RadListView .rlvFloated .rlvI,
.RadListView .rlvFloated .rlvA,
.RadListView .rlvFloated .rlvISel,
.RadListView .rlvFloated .rlvSel,
.RadListView .rlvFloated .rlvIEmpty,
.RadListView .rlvFloated .rlvIEdit {
    float: none !important;
    display: inline-block !important;
}

/*Generic Holding Square style*/
.rlvA.teamTile.leaders, .rlvA.teamTile.experts, .rlvI.teamTile.leaders, .rlvI.teamTile.experts, .rlvSel.teamTile.leaders, .rlvSel.teamTile.experts {
    overflow: hidden !important;
    width: 100% !important;
    padding: 10px !important;
    margin: 0 0 15px 0 !important;
}

.no-scroll {
    overflow: none !important;
}

/* Tile colours */
.rlvA.teamTile, .rlvI.teamTile {
    background: rgb(255,255,255) !important;
    background: rgba(255,255,255,0.65) !important;
}

    .rlvA.teamTile.leaders, .rlvI.teamTile.leaders {
    }

    .rlvA.teamTile.experts, .rlvI.teamTile.experts {
    }

/*-----------------
Team page
-----------------*/

#team-page h2 {
    color: #444;
    text-align: center;
    font-size: 22px;
}

#team-page .RadListView, #team-page .RadListViewFloated, #team-page .RadListView_Default, #team-page .rlvFloated {
    background: transparent !important;
    padding: 0 !important;
}

#team-page .rlvAutoScroll {
}

#team-page .teamTile {
    /*border: 0 !important;*/
    /*height: auto;
	width: 90%;*/
    height: 500px;
}

    #team-page .teamTile h1 {
        font-size: 22px;
        line-height: 1.25em;
        margin: 0;
        padding: 0;
    }

    #team-page .teamTile h2 {
        font-size: 18px;
        line-height: 1.25em;
        margin: 0 0 1em 0;
        padding: 0;
    }

    #team-page .teamTile p {
        font-size: 14px;
        line-height: 1.25em;
        margin: 0 0 1em 0;
        padding: 0;
        text-align: left;
    }

#team-page img.meetingLeaderPhoto {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: 55px;
    border: 1px solid #694ed6;
    margin: 10px auto;
}

.rlvA.teamTile.leaders.scroll, .rlvA.teamTile.experts.scroll, .rlvI.teamTile.leaders.scroll, .rlvI.teamTile.experts.scroll, .rlvSel.teamTile.leaders.scroll, .rlvSel.teamTile.experts.scroll {
    overflow: scroll !important;
}

/*-----------------
Team Choice page
------------------*/

#team-choice-page .info-panel, #scheduler-page .info-panel {
    width: 60%;
    padding-left: 15px;
    float: left !important;
    min-height: 70px;
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    #team-choice-page .info-panel, #scheduler-page .info-panel {
        width: 70%;
    }
}

#team-choice-page .teamTile h1 {
    font-size: 18px;
    line-height: 1.25em;
    margin: 0;
    padding: 0;
}

#team-choice-page .teamTile h2 {
    font-size: 14px;
    line-height: 1.25em;
    margin: 0 0 1em 0;
    padding: 0;
    text-align: left;
}

#team-choice-page .teamTile img.meetingLeaderPhoto, #scheduler-page .teamTile img.meetingLeaderPhoto {
    float: right;
    margin: 0;
    /*width: 18%;*/
    /*height: auto;*/
    width: 100%;
    max-width: 96px;
    height: 96px;
    display: inline-block !important;
    border-radius: 50%;
    border: 1px solid #694ed6;
}

#scheduler-page .teamTile img.meetingLeaderPhoto {
    max-width: 70px;
    height: 70px;
}

#team-choice-page .warningMessage {
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.65);
}
/* set colour of selected team tile */
.rlvSel.teamTile {
    background-color: #cb42ab;
}

    .rlvSel.teamTile.experts {
    }

    .rlvSel.teamTile.leaders {
    }

/******* Time slots **********/

/* time slots */
#scheduler-page .rlvI.timeSlot,
#scheduler-page .rlvA.timeSlot,
#scheduler-page .rlvSel.timeSlot,
#scheduler-page .rlvISel.timeSlot {
    padding: 1em 1em !important;
}

/* time slot times */
#scheduler-page .timeSlotTimes {
    padding-left: 35px;
}

/******* Checkboxes (covers both scheduler and team choice pages  **********/

#scheduler-page .timeSlot input.rlvBSel, .rlvA.teamTile input.rlvBSel, .rlvI.teamTile input.rlvBSel, .rlvSel.teamTile input.rlvBSel {
    /*margin: 0px 0 10px 0 !important;*/
    margin: 0 !important;
    padding: 0 !important;
    /*width: 40px !important;*/
    width: 20px !important;
    height: 20px !important;
    float: left;
}

.rlvA.teamTile input.rlvBSel, .rlvI.teamTile input.rlvBSel, .rlvSel.teamTile input.rlvBSel, .timeSlot input.rlvBSel {
    /*margin: 0px 0 20px 0 !important;*/
    margin: 0 !important;
    /*width: 30px !important;*/
    width: 20px !important;
}

.rlvI.timeSlot input.rlvBSel, .rlvA.timeSlot input.rlvBSel, .rlvA.teamTile input.rlvBSel, .rlvI.teamTile input.rlvBSel {
    background: url('../../Images/Project-specific/icons/tickbox.png') no-repeat -2px -22px !important;
}
/*Selected*/
.timeSlot.timeSlotAlreadyBooked input.rlvBSel, .timeSlot.timeSlotUnavailable input.rlvBSel, .rlvISel.timeSlot input.rlvBSel, .rlvSel.teamTile input.rlvBSel {
    background: url('../../Images/Project-specific/icons/tickbox.png') no-repeat -2px -2px !important;
}

/*-----------------
scheduler-page
------------------*/

#scheduler-page .rlvI.teamTile, #scheduler-page .rlvA.teamTile {
    width: 100%;
    height: 90px;
    border: 0;
    padding: 1em !important;
    overflow: hidden;
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.65);
}
/* adminUserType class name set dynamically from database */
#scheduler-page .teamTile .ExecutiveTeam {
    /*background: rgb(255,255,255);
    background:rgba(255,255,255,0.65);*/
}

#scheduler-page .teamTile .Personnel {
    /*background: rgb(255,255,255);
    background:rgba(255,255,255,0.65);*/
}

#scheduler-page .teamTile h1 {
    font-size: 18px;
    line-height: 1.25em;
    margin: 0;
    padding: 0;
}

#scheduler-page .teamTile h2 {
    font-size: 14px;
    line-height: 1.25em;
    margin: 0 0 1em 0;
    padding: 0;
}

textarea.riTextBox {
    width: 260px !important;
    height: 100px !important;
}

#scheduler-page .time-slot-choice {
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.65);
    font-size: 18px;
    padding: 20px;
    margin-bottom: 20px;
    display: block;
}

/*-----------------
Scheduler
-----------------*/
#scheduler-page h2.title {
    font-size: 22px;
    text-align: center;
    border-top: 1px dotted #444;
    padding-top: 1em;
}

#scheduler-page .RadListView {
    border: 0;
    background: transparent !important;
    color: #444;
    font-size: 16px !important;
    /*padding: 0.25em 0.5em !important;*/
    margin: 0 !important;
}

#scheduler-page .dayHeader, .timeSlot {
    border: 0 !important;
    background-color: #fff;
    margin-bottom: 5px;
    padding: 2em 1em !important;
}

.dayHeader {
    background: #e1e1e1 !important;
    height: 6em;
    font-weight: bold;
    margin-bottom: 15px;
}

.time-slot-warning .warningMessage {
    font-size: 18px;
}

/* Scheduler key ************************************************************************************/

.key {
}

    .key p {
        font-size: 18px;
    }

.key-item, .key-colour, .key-text {
    display: inline-block;
}

.key-item {
    margin-right: 20px;
}

.key-colour {
    margin-right: 5px;
}

.key-selected, .key-available, .key-unavailable, .key-break, .key-booked {
    width: 20px;
    height: 20px;
    border: #444 solid 1px;
    margin-left: 15px;
}

.key-available, .timeSlotAvailable {
    background: #fff !important;
}

.key-unavailable, .timeSlotUnavailable {
    background: #ccc !important;
    color: #999 !important;
}

.key-break, .timeSlotBreak {
    background: #999 !important;
    color: #fff;
}

.key-booked, .timeSlotAlreadyBooked {
    background-color: #694ed6 !important;
    color: #fff;
}

.key-selected, .timeSlotSelected {
    background-color: #cb42ab !important;
}

.key-replaced, .timeSlotReplaced {
    background-color: #56C271 !important;
}

#availability-page .key-available, #availability-page .key-unavailable {
    display: inline-block;
    width: 30px;
    height: 20px;
    margin-right: 10px;
    border: #444 solid 1px;
}

#availability-page .key-available, #availability-page .timeSlotAvailable {
    background: #fff !important;
}

#availability-page .key-unavailable, #availability-page .timeSlotUnavailable {
    background: #694ed6 !important;
    color: #fff !important;
}

#availability-page .key-text {
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
}

/* Meeting types key ************************************************************************************/

.key-colour {
    width: 20px;
    height: 20px;
    border: #444 solid 1px;
}