/* ================================================================================================
 *
 * DES Custom CSS
 * @author Ben Weltman
 * @version 1.1 
 * @date 24/07/2015
 *
 * 
 * Contents: 
 *
 * 1. Fonts, Icons & Generics
 * 2. Labels & Buttons
 * 3. Data Tables
 * 4. Loading Gifs
 * 5. Notes / Text Area
 * 6. Responses
 * 7. Scroll To Top Button  
 * 8. Home - Calendar
 * 9. Location Legend (Home - Calendar)
 * 10. Location Colours 
 * 11. Workshop Colours
 * 12. Expert Status Colors
 * 13. Book Workshop 
 * 14. Waiting List Priority
 * 15. Skin Centres (Profiles)
 * 16. Students (Profiles)
 * 17. Modals 
 * 18. Accordion Customisation
 * 19. Print Mods
 * 20. Validation
 * 21. Form Mods
 * 22. Misc. Page / View Specific
 * --  Media Queries
 *
 * ================================================================================================ */


/* 1. Fonts & Icons 
=================================================================================================== */

/* Override default Font Size & Color from Neon Theme & Neon Forms */
body, p {
    font-size: 13px;
    color: rgba(0,0,0,0.75);
}

a {
    color: rgba(0,0,0,0.85);
    text-decoration: none;
}

    a:hover {
        color: rgba(0,0,0,0.5);
        -webkit-transition: all ease-in-out .3s;
           -moz-transition: all ease-in-out .3s;
             -o-transition: all ease-in-out .3s;
                transition: all ease-in-out .3s;
    }

/* New icon only menu for table actions (modal calls) */

.action-icon-menu ul {
    list-style: none;
    margin: 0;
}

.action-icon-menu li {
    display: inline-block;
    padding: 4px;
}

.action-icon-menu-item {
    position: relative;
    right: 40px;
    vertical-align: middle;
}

/* Classes for menu icons and labels/ buttons for statuses */

.mid-icon {
    font-size: 16px !important;
}

.mid-font {
    font-size: 16px !important;
}

.bigger-icon {
    font-size: 20px !important;
}

.bigger-font {
    font-size: 18px !important;
}

/* Font Awesome Icons are slightly larger */
.bigger-icon-fa {
    font-size: 18px !important;
}


/* Fix alignment issues with Font Awesome & Entypo Icons */

.fa-icon-aligner {
    position: relative;
    right: 24px;
}

.fa-icon-aligner2 {
    position: relative;
    top: 2px;
}

.fa-icon-align-nav {
    position: relative;
    left: 4px;
}

/* Identifier icon - for students */

.identifier-icon {
    color: rgba(218,43,43,1) !important;
    font-size: 18px;
    vertical-align: central;
    cursor: pointer;
}

    .identifier-icon:hover {
        color: rgba(218,43,43,0.5) !important;
    }

.identifier-icon-alt {
    color: rgba(255,255,255,1) !important;
    font-size: 24px;
    vertical-align: central;
    cursor: pointer;
}

    .identifier-icon-alt:hover {
        color: rgba(255,255,255,0.5) !important;
    }

/* Attention icon - for skin centres */

.attention-icon {
    color: rgba(250,216,57,1) !important;
    font-size: 18px;
    vertical-align: central;
    cursor: pointer;
}

    .attention-icon:hover {
        color: rgba(250,216,57,0.5) !important;
    }

.attention-icon-alt {
    color: rgba(204,36,36,1) !important;
    font-size: 18px;
    vertical-align: central;
    cursor: pointer;
}

    .attention-icon-alt:hover {
        color: rgba(204,36,36,0.5) !important;
    }



/* 2. Labels & Buttons
=================================================================================================== */

.link-label {
    display: block;
    width: 100%;
    max-width: 125px;
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
    cursor: pointer;
    -webkit-transition: all ease-out 0.25s;
    -moz-transition: all ease-out 0.25s;
    -o-transition: all ease-out 0.25s;
    transition: all ease-out 0.25s;
}

    .link-label:hover {
        background: rgba(48,54,65,1);
    }

.link-label-cancel {
    display: block;
    width: 100%;
    max-width: 125px;
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    background-color: #000;
    padding: 6px;
    font-size: 12px;
    cursor: pointer;
    -webkit-transition: all ease-in 0.3s;
    -moz-transition: all ease-in 0.3s;
    -o-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}

    .link-label-cancel:hover {
        background: rgba(154,27,27,1);
    }

.plain-label {
    display: block;
    width: 100%;
    max-width: 125px;
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
}

.qual-label {
    text-transform: capitalize;
    font-size: 12px;
}

.file-upload {
    height: 36px;
}

/* Green label for linking students & booking workshop */
.label-green {
    background: rgba(0,98,49,1);
}

/* Orange label for unlinking students */
.label-orange {
    background: rgba(255,144,0,1);
}

/* Yellow label for Waiting (Join Waiting List) */
.label-yellow {
    background: rgba(250,216,57,1);
}

/* Grey label for Inactive students (for use in Booking / Waiting & Linking) */
.label-grey {
    background: rgba(122,122,122,1);
}

/* Status Labels */

.label-active {
    background-color: #0664e1;
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
}

.label-accepted {
    background-color: #188b52;
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
}

.label-cancelled {
    background-color: #CC2424;
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
}

    .label-cancelled-charged {
        background-color: #470c0c;
        margin: auto !important; /* Overrides label margins from neon & bootstrap */
        padding: 6px;
        font-size: 12px;
    }

    .label-cancelled-refunded {
        background-color: #681212;
        margin: auto !important; /* Overrides label margins from neon & bootstrap */
        padding: 6px;
        font-size: 12px;
    }

.label-rejected {
    background-color: #4d0e0e; /* Dark red */
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
}

.label-moved {
    background-color: #687f7b;  /* Grey-green */
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
}

.label-waitinglist {
    background-color: #fad839; /* Yellow - same as yellow label */
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
}

.label-provisional {
    background-color: #68787f;
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
}

.label-offered {
    background-color: #18528b; /* Dark Royal Blue */
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
}

.label-expired {
    background-color: #5d1111; /* Dark red */
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
}

.label-deleted {
    background-color: #320909; /* Very dark reddish-brown */
    margin: auto !important; /* Overrides label margins from neon & bootstrap */
    padding: 6px;
    font-size: 12px;
}

.label-count {
    font-size: 18px;
    background-color: rgba(48,54,65,1);
}

/* Verify Button (Add Student - Skin Centre) */

.verify-btn {
    background: rgba(255,165,0,0.7);
    font-size: 12px;
    color: #FFF;
    padding: 8px;
    cursor: pointer;
}

    .verify-btn:hover {
        text-decoration: none;
        background: rgba(255,165,0,1);
        -webkit-transition: all ease-out 0.3s;
        -moz-transition: all ease-out 0.3s;
        -o-transition: all ease-out 0.3s;
        transition: all ease-out 0.3s;
    }

.search-btn {
    background: rgba( 	0, 204, 132,0.7);
    font-size: 12px;
    color: #FFF;
    padding: 8px;
    cursor: pointer;
}

    .search-btn:hover {
        text-decoration: none;
        background: rgba( 	0, 204, 132,1);
        -webkit-transition: all ease-out 0.3s;
        -moz-transition: all ease-out 0.3s;
        -o-transition: all ease-out 0.3s;
        transition: all ease-out 0.3s;
    }

.verify-text {
    margin-left: 12px;
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    color: rgba(0,0,0,1);
    letter-spacing: 0.75px;
}

.verify-btn-edit {
    display: block;
    float: left;
    background: rgba(0,166,81,1);
    font-size: 12px;
    color: #FFF;
    cursor: pointer;
    padding: 8px;
}

    .verify-btn-edit:hover {
        text-decoration: none;
        background: rgba(0,166,81,0.8);
        -webkit-transition: all ease-out 0.3s;
        -moz-transition: all ease-out 0.3s;
        -o-transition: all ease-out 0.3s;
        transition: all ease-out 0.3s;
    }

.verify-result-wrapper {
    display: block;
    float: left;
    position: relative;
    padding: 4px;
}

.save-btn-container {
    display: block;
}

.save-btn {
    font-size: 14px;
}

/* 3. Data Tables
=================================================================================================== */

.skincentreTC1 {
    width: 15%;
}

.tab-container {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
}


/* 4. Loading Gifs
=================================================================================================== */

.progressBarLoad {
    display: none;
    text-align: center;
    position: relative;
}

.photo-loader, .qualification-loader {
    float: right;
    position: relative;
    top: -40px;
    right: -40px;
}

/* Float loading gif and align to right of button */

.verify-load {
    position: relative;
    float: right;
    margin-right: 30%;
}

.verify-load-edit {
    position: relative;
    float: left;
    margin-left: 30px;
    top: 6px;
}

/* Add views loading gif position fix */

.add-loader {
    position: relative;
    top: 0;
}

/* Profile views loading gif position fix */

.profile-update-loader {
    position: absolute;
    margin: 0 auto;
}

/* 5. Notes / Text Area
=================================================================================================== */

.multi-line {
    width: 100%;
    max-width: 400px;
    height: 100px;
    max-height: 1000px;
    min-width: 100px;
    min-height: 100px;
}

/* 6. Responses
=================================================================================================== */

.null-text-response {
    padding: 6px;
    margin: 6px;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
}

.result-response {
    font-size: 14px;
    color: #900;
}

/* Customised Loading display */

.update-notice {
    color: #900;
    z-index: 4;
    position: relative;
    top: 6px;
}

.update-notice-wi {
    color: #900;
    z-index: 4;
    position: relative;
    top: 6px;
}


/* 7. Scroll To Top Button
=================================================================================================== */

.scrollup {
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  opacity: 0.3;
  z-index: 99999999;
  position: fixed;
  bottom: 50px;
  right: 100px;
  display: none;
  background: url("/Content/Images/icon_top.png") no-repeat;
}

    .scrollup:hover {
        opacity: 0.8;
        -webkit-transition: all ease-in 0.3s;
        -moz-transition: all ease-in 0.3s;
        -o-transition: all ease-in 0.3s;
        transition: all ease-in 0.3s;
        border: none !important;
        outline: none;
    }

    .scrollup:checked, .scrollup:visited, .scrollup:active, .scrollup:focus {
        border: none !important;
        outline: none;
    }


/* 8. Home - Calendar
=================================================================================================== */

/* Full calendar top panel customisation - dropdown lists etc */

.home-panel {
    position: relative;
    float: left;
    padding: 10px 4px 10px 4px;
    right: 2%;
    margin-left: 12px;
}

.calendar-selector {
    position: relative;
    top: 0px;
    margin-right: 12px !important;
    font-size: 14px;
    color: #000;
}

/* Float loading gif in the calendar to prevent jumps (Home) */
.home-calendar-load {
    float: right;
    padding-left: 12px;
    top: 4px;
}

.calendar-title {
    position: relative;
    top: 4px;
    margin-right: 1.3%;
}

.home-help-icon {
    color: rgba(0,0,0,0.8);
    font-size: 18px;
}

.today-btn-container {
    position: relative;
    top: 51px;
    right: 102px;
}

    .today-btn {
        float: right;
        color: #000;
        background: #FFF;
        border-color: #ccc;
    }


/* Customisations to Full Calendar Events (FC) */

.fc-event {
    padding: 12px !important; /* Override default padding */
}

.fc-event-time {
    font-size: 14px;
    font-weight: bold;
}

.fc-event-title {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
}

    .fc-event-title {
        padding-top: 12px !important;
    }

.book-count {
    padding: 6px 0 6px 0;
}

.wait-count {
    padding: 6px 0 6px 0;
}

/* Past Workshops - creates visual aid to show which workshop events are 'old' (by date) */

.past {
    position: absolute;
}

.past:before {
    float: right;
    color: rgba(255,255,255,0.3);
    font-family: 'FontAwesome';
    font-weight: normal;
    font-size: 26px;   
    content: '\f046';
    z-index: -1;
}

.past-dark:before {
    color: rgba(0, 0, 0, 0.1) !important;
}

.fc-past {
    background: rgba(245,245,246,0.8) none repeat scroll 0% 0% !important
}

    .fc-past > div > .fc-day-number {        
        color: rgba(0,0,0,1) !important;
    }


/* 9. Location legend - tool tip 
=================================================================================================== */

.loc-legend-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    margin-right: 10px;
    width: 4%;
    top: 5px;
}

    ul.loc-legend-list {
        list-style: none;
        position: relative;
        left: -14px;
    }

        .loc-legend-list > li {
            display: block;
            padding: 4px;
        }

        .loc-legend-list > li > img {
            vertical-align: text-top;
        }

        .loc-legend-list > li > span {
            margin-left: 6px;
            font-size: 13px;
        }

.wrapper {
    z-index: 9999;
    color: #FFF;
    cursor: pointer;
    margin-left: 4px;
    padding: 6px;
    position: relative;
    width: 40px;
    -webkit-transform: translateZ(0); /* webkit flicker fix */
    -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
    z-index: 9999;
    background: #303641;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 3px;
    bottom: 125px; /* Change this value (-/+) to move list up and down */
    color: #FFF;
    font-size: 12px;
    display: inline-block;
    left: -78px;
    margin-bottom: 15px;
    opacity: 0;
    padding: 20px;
    pointer-events: none;
    position: absolute;
    width: 200px;
    -webkit-transform: translateX(-850px);
       -moz-transform: translateX(-850px);
        -ms-transform: translateX(-850px);
         -o-transform: translateX(-850px);
            transform: translateX(-850px);
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
       -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */

.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 20px;
  position: absolute;
  width: 100%;
  z-index: 9999;
}  

/* CSS Triangle for tooltip 'up arrow' */

.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-bottom: solid #303641 10px;
  bottom: 154px; /* Change this value (-/+) to move triangle up / down */
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
  z-index: 9999;
  /* background-color: #900; Hide/ show - helps editing */
}
  
.wrapper:hover .tooltip {
    z-index: 9999;
    opacity: 1;
    pointer-events: inherit;
    -webkit-transform: translateY(310px);
       -moz-transform: translateY(310px);
        -ms-transform: translateY(310px);
         -o-transform: translateY(310px);
            transform: translateY(310px);
}


/* 10. Location Colours
=================================================================================================== */

.berlin-loc-square {    
    background-color: #e6b900 !important; /* Overrides Neon Theme CSS properties */
    height: 15px;
    width: 25px;
    display: inline-block;
    vertical-align: text-bottom;
    border-radius: 1px;
}

.berlin-color {
    background-color: #e6b900 !important; /* Overrides Neon Theme CSS properties */
    color: #FFF;
}

    .berlin-color:hover {
        background-color: #cda400 !important;
        -webkit-transition: all ease-out .3s;
           -moz-transition: all ease-out .3s;
             -o-transition: all ease-out .3s;
                transition: all ease-out .3s;
    }

    .berlin-text {
        color: #e6b900;
    }

.dusseldorf-loc-square {    
    background-color: #dd0000 !important; /* Overrides Neon Theme CSS properties */
    height: 15px;
    width: 25px;
    display: inline-block;
    vertical-align: text-bottom;
    border-radius: 1px;
}

.dusseldorf-color {
    background-color: #dd0000 !important; /* Overrides Neon Theme CSS properties */
    color: #FFF;
}

    .dusseldorf-color:hover {
        background-color: #aa0000 !important;
        -webkit-transition: all ease-out .3s;
           -moz-transition: all ease-out .3s;
             -o-transition: all ease-out .3s;
                transition: all ease-out .3s;
    }

    .dusseldorf-text {
        color: #dd0000;
    }

.munchen-loc-square {    
    background-color: #78b2ff !important; /* Overrides Neon Theme CSS properties */
    height: 15px;
    width: 25px;
    display: inline-block;
    vertical-align: text-bottom;
    border-radius: 1px;
}

.munchen-color {
    background-color: #78b2ff !important; /* Overrides Neon Theme CSS properties */
    color: #FFF;
}

    .munchen-color:hover {
        background-color: #4595ff !important;
        -webkit-transition: all ease-out .3s;
           -moz-transition: all ease-out .3s;
             -o-transition: all ease-out .3s;
                transition: all ease-out .3s;
    }

    .munchen-text {
        color: #78b2ff;
    }


.offsite-loc-square {    
    background-color: #00c671 !important; /* Overrides Neon Theme CSS properties */
    height: 15px;
    width: 25px;
    display: inline-block;
    vertical-align: text-bottom;
    border-radius: 1px;
}

.offsite-color {
    background-color: #00c671 !important; /* Overrides Neon Theme CSS properties */
    color: #FFF;
}

    .offsite-color:hover {
        background-color: #009354 !important;
        -webkit-transition: all ease-out .3s;
           -moz-transition: all ease-out .3s;
             -o-transition: all ease-out .3s;
                transition: all ease-out .3s;
    }

    .offsite-text {
        color: #00c671;
    }

.stuttgart-loc-square {
    background-color: #9c4be7 !important; /* Overrides Neon Theme CSS properties */
    height: 15px;
    width: 25px;
    display: inline-block;
    vertical-align: text-bottom;
    border-radius: 1px;
}

.stuttgart-color {
    background-color: #9c4be7 !important; /* Overrides Neon Theme CSS properties */
    color: #FFF;
}

    .stuttgart-color:hover {
        background-color: #831fe0 !important;
        -webkit-transition: all ease-out .3s;
           -moz-transition: all ease-out .3s;
             -o-transition: all ease-out .3s;
                transition: all ease-out .3s;
    }

.hamburg-loc-square {
    background-color: #ff8533 !important; /* Overrides Neon Theme CSS properties */
    height: 15px;
    width: 25px;
    display: inline-block;
    vertical-align: text-bottom;
    border-radius: 1px;
}

.hamburg-color {
    background-color: #ff8533 !important; /* Overrides Neon Theme CSS properties */
    color: #FFF;
}

    .hamburg-color:hover {
        background-color: #ff6600 !important;
        -webkit-transition: all ease-out .3s;
        -moz-transition: all ease-out .3s;
        -o-transition: all ease-out .3s;
        transition: all ease-out .3s;
    }

.college-loc-square {
    background-color: #fa8072 !important; /* Overrides Neon Theme CSS properties */
    height: 15px;
    width: 25px;
    display: inline-block;
    vertical-align: text-bottom;
    border-radius: 1px;
}

.college-color {
    background-color: #fa8072 !important; /* Overrides Neon Theme CSS properties */
    color: #FFF;
}

.college-color:hover {
    background-color: #fe5542 !important;
    -webkit-transition: all ease-out .3s;
    -moz-transition: all ease-out .3s;
    -o-transition: all ease-out .3s;
    transition: all ease-out .3s;
}

.inhouse-loc-square {
    background-color: #7fffd4 !important; /* Overrides Neon Theme CSS properties */
    height: 15px;
    width: 25px;
    display: inline-block;
    vertical-align: text-bottom;
    border-radius: 1px;
}

.inhouse-color {
    background-color: #7fffd4 !important; /* Overrides Neon Theme CSS properties */
    color: #333333 !important;
}

.inhouse-color:hover {
    background-color: #66e0c2 !important;
    -webkit-transition: all ease-out .3s;
    -moz-transition: all ease-out .3s;
    -o-transition: all ease-out .3s;
    transition: all ease-out .3s;
}

.frankfurt-loc-square {
    background-color: #fc03e3 !important; /* Overrides Neon Theme CSS properties */
    height: 15px;
    width: 25px;
    display: inline-block;
    vertical-align: text-bottom;
    border-radius: 1px;
}

.frankfurt-color {
    background-color: #fc03e3 !important; /* Overrides Neon Theme CSS properties */
    color: #FFF;
}

.frankfurt-color:hover {
    background-color: #c30bb1 !important;
    -webkit-transition: all ease-out .3s;
    -moz-transition: all ease-out .3s;
    -o-transition: all ease-out .3s;
     transition: all ease-out .3s;
}
/* 11. Workshop Colours
=================================================================================================== */

.dermalogica-ltgrey-color {
    background-color: rgba(102,109,112,1);
}

.dermalogica-dkgrey-color {
    background-color: rgba(68,79,81,1);
}

.agesmart-color {
    background-color: rgba(127,40,79,1);
}

.powerbright-color {
    background-color: rgba(49,132,155,1);
}

.shave-color {
    background-color: rgba(163,38,56,1);
}

.daylightdefense-color {
    background-color: rgba(252,163,17,1);
}

.cleanstart-color {
    background-color: rgba(49,132,155,1);
}

.ultracalming-color {
    background-color: rgba(158,145,198,1);
}

.medibac-color {
    background-color: rgba(193,191,10,1);
}

.thermalbody-color {
    background-color: rgba(38,84,124,1);
}

.biosurfacepeel-color {
    background-color: rgba(204,0,0,1);
}

.coversheertint-color {
    background-color: rgba(156,93,137,1);
}

.skinperfectprimer-color {
    background-color: rgba(139,29,92,1);
}

.facemapping-color {
    background-color: rgba(86,146,206,1);
}

/* 12. Expert Status Colors
=================================================================================================== */


.aspire-skills-accordion-panel {
    background-color: #FED966;
}

.aspire-employability-accordion-panel {
    background-color: #F4B184;
}

.aspire-excellence-accordion-panel {
    background-color: #E75347;
}

.certified-color, .certified-accordion-panel {
    background-color: rgba(40,109,168,1);
}

.specialist-color, .specialist-accordion-panel {
    background-color: rgba(120,155,71,1);
}

.expert-color, .expert-accordion-panel {
    background-color: rgba(50,141,222,1);
    filter: grayscale(100%);
}

.expert-renew-color, .expert-renew-accordion-panel {
    background-color: rgba(235,93,64,1);
}

.medical-expert-color, .medical-expert-accordion-panel {
    background-color: rgba(235,93,64,1);
}

.panel-title {
    color: #FFF !important;
}

.accordion-panel:hover {
    background: rgba(48,54,65,0.8);
    -webkit-transition: all ease-out .4s;
    -moz-transition: all ease-out .4s;
    -o-transition: all ease-out .4s;
    transition: all ease-out .4s;
}

    .accordion-panel:hover > .panel-title {
        color: #FFF !important;
        -webkit-transition: all ease-out .4s;
        -moz-transition: all ease-out .4s;
        -o-transition: all ease-out .4s;
        transition: all ease-out .4s;
    }

.exprog-workshop-name {
    text-transform: capitalize;
}

.completed-workshop-name {
    text-transform: capitalize;
    color: green;
}

.exprog-thumb {
    position: relative;
    top: -2px;
}

.exprog-thumb-alt {
    position: relative;
    top: 4px;
}

.existing {
    filter: grayscale(100%);
}

/* 13. Book Workshop & Join Waiting List
=================================================================================================== */

.studentBook {
    display: block;
    width: 90%;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
}

.book-success {
    font-size: 14px;
    color: rgba(0,98,49,1);
}

.studentWait {
    display: block;
    width: 90%;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
}

.book-progress {
    text-decoration: none;
    color: rgba(0,0,0,1);
    font-size: 12px;
}

.booking-title {
    font-size: 20px;
}

    .booking-title > span:first-child {
        color: #000;
    }

    .booking-title > span:nth-child(2n) {
        color: #881717;
    }

/* Check In & Attendance */

.checkin-text {
    text-decoration: none;
    font-size: 12px;
    color: rgba(0,98,49,1);
}

.checkout-text {
    text-decoration: none;
    font-size: 12px;
    color: rgba(137,0,0,1);
}

.attendanceLink {
    display: block;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
}

.wi-notes-container {
    display: block;
    position: relative;
}

.booked-by-text {
    text-transform: capitalize;
}

.status-filter-container {
    display: inline-block;
    position: relative;
    float: right;
    top: 55px;
    margin-right: 320px;
    z-index: 10000;
}

.status-filter {
    height: 0;
}

.filter-text {
    display: inline-block;
    position: relative;
    top: 6px;
    float: left;
    left: -38px;
    height: 0;
}

/* Book more workshop */
.student-status-capitalize {
    text-transform: capitalize;
}

.attendance-button,
.confirmation-button {
    display: block;
    width: 100%;
    max-width: 125px;
    margin: 8px 0px 8px 0px !important; /* Overrides label margins from neon & bootstrap */
    background-color: #000;
    padding: 6px;
    font-size: 12px;
    cursor: pointer;
    -webkit-transition: all ease-in 0.3s;
    -moz-transition: all ease-in 0.3s;
    -o-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
}

    .attendance-button:hover,
    .confirmation-button:hover {
        background: rgb(153, 153, 153);
    }


/* Fix Booking list table column widths - shown inside Book Workshop */

#booked_students_list > thead > tr > th:nth-child(1n) {
    width: 12% !important;
}

#booked_students_list > thead > tr > th:nth-child(2n) {
    width: 22% !important;
}

#booked_students_list > thead > tr > th:nth-child(3n) {
    width: 12% !important;
}

#booked_students_list > thead > tr > th:nth-child(4n) {
    width: 10% !important;
}

#booked_students_list > thead > tr > th:nth-child(5n) {
    width: 12% !important;
}

#booked_students_list > thead > tr > th:nth-child(6n) {
    width: 6% !important;
}

#booked_students_list > thead > tr > th:nth-child(7n) {
    width: 12% !important;
}

#booked_students_list > thead > tr > th:nth-child(10n) {
    width: 12% !important;
}


/* Fix Booking list table column widths - shown inside PrintClassSignInSheet */
#booked_students_listv2 > thead > tr > th:nth-child(1n) {
    width: 6% !important;
}

#booked_students_listv2 > thead > tr > th:nth-child(2n) {
    width: 6% !important;
}

#booked_students_listv2 > thead > tr > th:nth-child(3n) {
    width: 18% !important;
}

#booked_students_listv2 > thead > tr > th:nth-child(4n) {
    width: 9% !important;
}

#booked_students_listv2 > thead > tr > th:nth-child(5n) {
    width: 11% !important;
}

#booked_students_listv2 > thead > tr > th:nth-child(6n) {
    width: 10% !important;
}

#booked_students_listv2 > thead > tr > th:nth-child(7n) {
    width: 10% !important;
}

#booked_students_listv2 > thead > tr > th:nth-child(8n) {
    width: 6% !important;
}

#booked_students_listv2 > thead > tr > th:nth-child(9n) {
    width: 12% !important;
}

#booked_students_listv2 > thead > tr > th:nth-child(10n) {
    width: 12% !important;
}

/* Fix Waiting list table column widths - shown inside Book Workshop */
#waiting_students_list > thead > tr > th:nth-child(1n) {
    width: 5% !important;
} 

#waiting_students_list > thead > tr > th:nth-child(2n) {
    width: 22% !important;
} 

#waiting_students_list > thead > tr > th:nth-child(3n) {
    width: 16% !important;
} 

#waiting_students_list > thead > tr > th:nth-child(4n) {
    width: 16% !important;
} 

#waiting_students_list > thead > tr > th:nth-child(5n) {
    width: 16% !important;
} 

#waiting_students_list > thead > tr > th:nth-child(6n) {
    width: 16% !important;
} 

#waiting_students_list > thead > tr > th:nth-child(7n) {
    width: 16% !important;
}

/* 14. Waiting List Priority - Table sorting (drag n drop) 
=================================================================================================== */

.waitinglist-priority > tbody > tr:hover {
    cursor: move;
}

    table tr.sorting-row td {
        background-color: #8b8;
    }

#wlprioritychangeresponse {
    display: block;
    margin-left: 6px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: bold;
    color: #8b8;
}

.wl-loading-display {
    position: relative;
    display: inline-block;
    padding: 4px;
}

/* 15. Skin Centres (Profiles)
=================================================================================================== */

/* Associated Students - Customised classes */

.tile-link-students {
    background: rgba(33,137,225,1);
    font-size: 50px;
    height: 60px;
    line-height: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    border-radius: 5px;
    overflow: hidden;
    color: rgba(0,0,0,0.2);
}

.linked-students-icon, .link-students-icon {
    text-align: center;
    position: relative;
    top: 6px;
}

.skincentre-book-text {
    color: #FFF !important;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.75px;
}

.yes {
    color: #0053a0;
}

.no {
    color: #900;
}

.studentLink {
    display: block;
    width: 90%;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
}

.studentUnlink {
    display: block;
    width: 90%;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
}

.unlink-text {
    text-decoration: none;
    font-size: 12px;
    color: rgba(255,144,0,1);
}

    .unlink-text:hover {
        color: rgba(255,144,0,0.8);
        cursor: default;
    }

.link-text {
    text-decoration: none;
    font-size: 12px;
    color: rgba(0,98,49,1);
}

    .link-text:hover {
        color: rgba(0,98,49,0.8);
        cursor: default;
    }

.link-progress {
    text-decoration: none;
    color: rgba(0,0,0,1);
    font-size: 12px;
}

/* Skin Centre Profile mods */

.nav-name {
    color: #760000;
    font-size: 14px;
    font-weight: bold;
    margin-left: 4px;
}

.div-mngr-name {
    color: #007676;
    font-size: 14px;
    font-weight: bold;
    margin-left: 4px;
}

.rep-name {
    color: #003b76;
    font-size: 14px;
    font-weight: bold;
    margin-left: 4px;
}

.skincentre-status {
    color: rgba(0,0,0,1); /* Black for standard */
    font-size: 20px;
    font-weight: normal;    
    line-height: 20px;
}

.skincentre-status-active {
    color: rgba(0,129,0,1); /* Dark green for active */
    font-size: 20px;
    font-weight: normal;
    line-height: 20px;
    margin-top: 20px;
}

.skincentre-status-inactive {
    color: rgba(137,0,0,1); /* Dark red for inactive */
    font-size: 20px;
    font-weight: normal;
    line-height: 20px;
    margin-top: 20px;
}


/* 16. Students (Profiles)
=================================================================================================== */

.student-post-label{
    color: #b97430;
    font-size: 16px;
    vertical-align: middle;
    text-decoration: none;
}

    .student-post-label:hover {
        color: #007676;
        -webkit-transition: all ease-out .3s;
           -moz-transition: all ease-out .3s;
             -o-transition: all ease-out .3s;
                transition: all ease-out .3s;
    }

.profile-table > tr:nth-of-type(odd) {
    background: rgba(0,0,0,0.025);
}

.profile-info-text {
    text-transform: capitalize;
}

.status-text {
    color: #760000;
    font-size: 14px;
    font-weight: bold;
}

.profile-text {
    color: #007676;
    font-size: 14px;
    font-weight: bold;
}

.qual-text {
    color: #003b76;
    font-size: 14px;
    font-weight: bold;
}

.qualstatus-text {
    color: #760000;
    font-size: 14px;
    font-weight: bold;
}

.skincentre-text {
    color: #007676;
    font-size: 14px;
    font-weight: bold;
}

.no-skin-centre-header {
    font-size: 18px;
    color: rgba(137,0,0,1);
}

.no-skin-centre-text {
    font-size: 12px;
    color: rgba(137,0,0,1);
}

.thumbnail {
    margin-bottom: 0;
}

    .thumbnail > img {
        border-radius: 3px;
    }

.student-photo {
    border-radius: 3px;
}

.profile-header {
    position: relative;
    top: -12px;
}

.profile-name {
    font-size: 26px !important;
    color: #000;
}

.skin-centre-link {
    color: rgba(0,129,0,1);
}

    .skin-centre-link:hover {
        color: rgba(0,129,0,0.6);
        -webkit-transition: all ease-in-out .3s;
           -moz-transition: all ease-in-out .3s;
             -o-transition: all ease-in-out .3s;
                transition: all ease-in-out .3s;
    }

.skin-centre-link-alt {
    color: rgba(48,54,65,0.5);
}

    .skin-centre-link-alt:hover {
        color: rgba(48,54,65,1);
        -webkit-transition: all ease-in-out .3s;
           -moz-transition: all ease-in-out .3s;
             -o-transition: all ease-in-out .3s;
                transition: all ease-in-out .3s;
    }

.skin-centre-link-blocked {
    color: rgba(137,0,0,1); /* Dark red for inactive */
}

    .skin-centre-link-blocked:hover {
        color: rgba(137,0,0,0.8);
        -webkit-transition: all ease-in-out .3s;
           -moz-transition: all ease-in-out .3s;
             -o-transition: all ease-in-out .3s;
                transition: all ease-in-out .3s;
    }

.workshop-instance-link {
    color: rgba(48,54,65,0.5);
}

    .workshop-instance-link:hover {
        color: rgba(48,54,65,1);
        -webkit-transition: all ease-in-out .3s;
           -moz-transition: all ease-in-out .3s;
             -o-transition: all ease-in-out .3s;
                transition: all ease-in-out .3s;
    }

.email-link {
    color: rgba(48,54,65,1);
}

    .email-link:hover {
        color: rgba(48,54,65,0.5);
        -webkit-transition: all ease-out .3s;
           -moz-transition: all ease-out .3s;
             -o-transition: all ease-out .3s;
                transition: all ease-out .3s;
    }

.code-name-container {
    float: right;
    display: inline;
    position: relative;
    top: -26px;
    right: -50px;
    height: 0;
}

.vip-info {
    color: #005976;
    font-size: 15px;
    font-weight: bold;
    text-transform: capitalize;
}

h3 {
    font-size: 20px;
    font-weight: normal;
    text-transform: capitalize;
    color: rgba(0,0,0,0.8);
}

h4 {
    font-size: 18px;
    font-weight: normal;
    text-transform: capitalize;
    color: rgba(0,0,0,0.8);
}

h5 {
    font-size: 16px;
    font-weight: normal;
    text-transform: capitalize;
    color: rgba(0,0,0,0.8);
}

.student-status {
    color: rgba(0,0,0,1); /* Black for standard */
    font-size: 20px;
    font-weight: normal;    
    line-height: 20px;
}

.student-status-active, .skincentre-status-active {
    color: rgba(0,129,0,1); /* Dark green for active */
    font-size: 20px;
    font-weight: normal;
    line-height: 20px;
}

.student-status-inactive, .skincentre-status-inactive {
    color: rgba(137,0,0,1); /* Dark red for inactive */
    font-size: 20px;
    font-weight: normal;
    line-height: 20px;
}

.workshop-highlight > td {
    background: rgba(48,54,65,0.8);
    color: #FFF;
}

    tr.workshop-highlight:hover {
        background: rgba(48,54,65,0.5);
        color: #FFF;
    }

.identifier-container {
    display: block;
    width: 100%;
    padding: 4px 4px 8px 4px;
    margin: 0;
    background: #da2b2b;
    border-radius: 3px;
}

    .identifier-container > h5.identifier {
        color: #fff !important;
    }

.panel {
    margin-bottom: 0 !important; /* Overrides default panel margin bottom */
}

.registered-online {
    margin-left: 4px;
    cursor: pointer;
    vertical-align: central;
}

#booking-list-profile > thead > tr > th:nth-child(1n) {
    width: 20% !important;
} 

#booking-list-profile > thead > tr > th:nth-child(2n) {
    width: 15% !important;
} 

#booking-list-profile > thead > tr > th:nth-child(3n) {
    width: 10% !important;
} 

#booking-list-profile > thead > tr > th:nth-child(4n) {
    width: 15% !important;
} 

#booking-list-profile > thead > tr > th:nth-child(5n) {
    width: 10% !important;
} 

#booking-list-profile > thead > tr > th:nth-child(6n) {
    width: 15% !important;
} 

#booking-list-profile > thead > tr > th:nth-child(7n) {
    width: 10% !important;
}

#booking-list-profile > thead > tr > th:nth-child(8n) {
    width: 5% !important;
}


.studentMerge {
    display: block;
    width: 90%;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
}

.country-prefix-container {
    float: left;
    display: inline;
    position: relative;
    top: 6px;
    right: 32px;
    height: 0;    
}

.country-prefix {
    font-size: 13px;
    color: rgba(0,0,0,0.3);
}

/* 17. Modals
=================================================================================================== */

/* Override defaults for modals */
.modal-content {
    z-index: 1;
}

.modal-body {
    height: auto; 
    min-height: 400px;
    max-height: 600px;
    z-index: 2;
}

.modal-footer {
    z-index: 3;
}

/* Fix row class on Modals - width & margin to prevent horizontal scrolling */
.modal-row {
    margin: auto;
    width: 100%;
}

/* Fix titles on modals */

.modal-title-container {
    position: relative;
    right: 12px;
    bottom: 10px;
    padding: 4px;
    margin-bottom: 14px;
}

.modal-title {
    text-align: left;
}

.center {
    text-align: center;
}

/* Book Workshop Modal */

.better-th > th {
    background: rgba(245,245,246,0.8) repeat !important; /* Overrides Neon Forms default th style */
    color: rgba(0,0,0,0.8) !important; /* Overrides Neon Forms default th style */
    font-weight: bold !important;
}

.panel-title {
    font-size: 16px !important;
    font-weight: bold !important;
}

/* Cancel & Update Waiting List Status modals */

.cancel-titles-container {
    display: block;
    margin: 0 auto;
    padding: 2px;
    text-align: left;
    width: 98%;
}

.cancel-titles-container > h4 {
    margin-left: 26%;
    color: #CC2424;
}

.cancel-titles-container > h4:first-of-type > span {
    color: #000;
    text-transform: none !important;
}

.cancel-titles-container > h4:nth-of-type(2n) > span {
    color: #000;
    text-transform: none !important;
}

.cancel-titles-container > h4:nth-of-type(3n) > span {
    color: #000;
}

.cancel-titles-container > h4:nth-of-type(4n) > span {
    color: #000;
}

.cancel-titles-container > h4:nth-of-type(5n) > span {
    color: #000;
}

/* Cancel modal status warnings */

.status-warning-container {
    display: block;
    margin: 0 auto;
    padding: 2px;
    text-align: left;
    width: 98%;    
}

.status-warning-container > h4 {
    margin-left: 26%;
    color: #CC2424;
    text-transform: none !important;
}

.status-warning-container > h4:first-of-type > span {
    color: #000;
    text-transform: none !important;
}


/* Charges Update Modal Icon */

.update-icon {
    font-size: 18px;
    color: rgba(48,54,65,1);
    text-decoration: none;
}

.update-icon:hover {
    color: rgba(48,54,65,0.5);
}

/* Charges Update Modal */

.update-titles-container {
    display: block;
    margin: 0 auto;
    padding: 2px;
    text-align: left;
    width: 98%;
    overflow: hidden;
}

.update-titles-container > h4 {
    margin-left: 26%;
}

.update-titles-container > h4:first-of-type {
    color: #188b52;
}

.update-titles-container > h4 > span {
    text-transform: lowercase !important;
    color: #000;
}

.update-titles-container > h4:nth-of-type(3n) {
    color: #188b52;
}

/* Merge Modal */

.merge-titles-container {
    display: block;
    margin: 0 auto;
    padding: 2px;
    text-align: left;
    width: 60%;
    overflow: hidden;
}

.merge-titles-container > h4 {
    width: auto;
    text-transform: none !important;
}

.merge-titles-container > h4 > span {
    color: #000;
}

.merge-titles-container > h4:nth-of-type(2n) {
    color: #CC2424;
}

/* Booking & Waiting History Modal mods */

.count-stats-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .count-stats-list > li {
        display: inline-block;
        margin-left: 0;
        margin-right: 8px;
        margin-top: 4px;
        padding: 2px;
        font-size: 14px;
        font-weight: bold;
    }

.num {
    display: inline-block;
}

.active-text {
    color: #005a9c;
}

.active-count {
    display: inline-block;
    width: 30px;
    height: 22px;
    background-color: #005a9c;
    color: #FFF;
    border-radius: 3px;
    text-align: center;
}

.accepted-text {
    color: #188b52;
}

.accepted-count {
    display: inline-block;
    width: 30px;
    height: 22px;
    background-color: #188b52;
    color: #FFF;
    border-radius: 3px;
    text-align: center;
}

.attended-text {
    color: #188b52;
}

.attended-count {
    display: inline-block;
    width: 30px;
    height: 22px;
    background-color: #188b52;
    color: #FFF;
    border-radius: 3px;
    text-align: center;
}

.moved-text {
    color: #9be106;
}

.moved-count {
    display: inline-block;
    width: 30px;
    height: 22px;
    background-color: #9be106;
    color: #FFF;
    border-radius: 3px;
    text-align: center;
}

.offered-text {
    color: #ff9000;
}

.offered-count {
    display: inline-block;
    width: 30px;
    height: 22px;
    background-color: #ff9000;
    color: #FFF;
    border-radius: 3px;
    text-align: center;
}

.rejected-text {
    color: #da2b2b;
}

.rejected-count {
    display: inline-block;
    width: 30px;
    height: 22px;
    background-color: #da2b2b;
    color: #FFF;
    border-radius: 3px;
    text-align: center;
}

.cancelled-text {
    color: #8b1818;
}

.cancelled-count {
    display: inline-block;
    width: 30px;
    height: 22px;
    background-color: #8b1818;
    color: #FFF;
    border-radius: 3px;
    text-align: center;
}

.bookhist-tile {
    padding: 30px;
}

/* Skin Centre Profile Modal */

.profile-env > header .profile-info-sections {
    margin-top: 0;
}

.profile-env section.profile-info-tabs {
    margin-top: 0;
    margin-bottom: 0;
}

.skincentre-name {
    text-transform: capitalize;
    font-size: 26px;
}

/* 18. Accordion Customisation
=================================================================================================== */

.accordion-panel {
    background: rgba(48,54,65,1);
    border-radius: 3px;
}

.accordion-panel > .panel-title {
    color: #FFF !important;
}

    .accordion-panel:hover {
        background: rgba(48,54,65,0.8);
        -webkit-transition: all ease-out .4s;
           -moz-transition: all ease-out .4s;
             -o-transition: all ease-out .4s;
                transition: all ease-out .4s;
    }

    .accordion-panel:hover > .panel-title {
        color: #FFF !important;
        -webkit-transition: all ease-out .4s;
           -moz-transition: all ease-out .4s;
             -o-transition: all ease-out .4s;
                transition: all ease-out .4s;
    }

/* 19. Print Mods 
=================================================================================================== */

.print-button-container {
    float: right;
    position: relative;
    top: -80px;
}

.print-button-container-postage {
    position: relative;
}

.print-button-container-history {
    position: relative;
}

/* Print Labels */

.print-button-container-labels {
    float: right;
    position: relative;
    top: 0px;
}

.print-line {
    display: none;
}

.print-label-number, .print-cert-number {
    font-size: 18px;
    font-weight: bold;
}

.student-label-name {
    font-weight: 300;
    font-size: 40px;
}

.workshop-label-name {
    font-weight: 100;
    font-size: 15px;
}

/* Print Student Postage Labels */

.label-container {
    display: block;
    padding: 0;
}

.print-address-details {
    display: block;
    padding: 6px;
    margin: 0;
    width: 260px;
    height: 100px;
    text-align: left;
}

.print-address-details > span {
    font-size: 14px;
    color: #000;
}

/* Print Certificates */

.print-button-container-certs {
    float: right;
}

.print-button-container-certs-old {
    float: left;
}

.student-cert-name {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 300;
}

.workshop-cert-name {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 100;
}

.date-cert {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 100;
}


/* 20. Validation
=================================================================================================== */

.field-validation-error > span {
    color: red;
    font-size: 12px;
    font-weight: normal;
}

/* Result Messages */

.result-message {
    position: relative;
    top: -4px;
    color: #900;
}

.pwreset-result-message {
    color: rgba(255,255,255,1);
}

/* Login validation error message */

.validation-summary-errors > ul {
    text-align: center;
    color: #FFF;
    padding: 0;
    margin-bottom: 20px;
}

/* 21. Form Mods
=================================================================================================== */

.form-group, .form-groups-bordered > .form-group {
    border: none !important;
}

input[type="file"] {
    min-height: 46px;
}

.fileinput, .fileinput-new {
    margin: 0 !important;
}

.staff-initials {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-label { 
    text-align: left !important; /* Overrides default form label alignment */
}

select {
    text-transform: capitalize;
}

.login-form > .login-content > .form-horizontal > .form-group {
    padding-top: 0;
    padding-bottom: 0;
}

.cancel-radbuttons {
    vertical-align: sub;
}

.cancel-radbuttons + span {
    margin-left: 12px;
}

/* Status labels for cancel booking & update charge modals (pop-ups) */

.cancelled-status-label { color: #000; }
.charged-status-label { color: #900; }
.chargecompleted-status-label { color: #000; }
.waived-status-label { color: #900;}
.refund-status-label { color: #900; }
.refundcompleted-status-label { color: #000}

.cancel-status-line:last-of-type, modal-status-line:last-of-type {
    display: none;
}

#bookingslist > input {

}

#bookingslist > label {
    font-size: 14px;
    padding: 10px 20px 10px 20px;
}

    #bookingslist > label:hover {
        background: rgba(0,0,0,0.1);
        border-radius: 2px;
    }

/* 22. Misc. Page / View Specific
=================================================================================================== */

.country-alert {
    font-size: 14px;
    cursor: pointer;
}

.user-management-menu {
    z-index: 10000;
}

/* Notes */
.note-present {
    color: rgba(158,29,29,1) !important;
}

.no-note {
    color: rgba(0,0,0,0.5) !important;
}

/* Generic help icon (site wide) */
.help-icon {
    position: relative;
    top: 2px;
    cursor: pointer;
    vertical-align: middle;
}

    .help-icon:hover {
        opacity: 0.7;
    }

/* Password reset */
.forgotpassword-text {
    color: rgba(255,255,255,1);
    text-align: left;
    margin-top: 8px;
    margin-left: 10px;
}

/* Student profile */
.student-cancel-link {
    color: rgba(0,0,0,0.5);
}

    .student-cancel-link:hover {
        color: rgba(0,0,0,1);
    }

/* Calendar - Home */
.fc-header-title {
    font-size: 18px !important; /* Override Neon Theme CSS */
}
.excelButton{
    margin-bottom: 10px;
    color:#ffffff;
    background-color:#303641;
    border-color: #303641;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.42857143;
    border-radius: 3px;
}

/* Email certificates */
.wysihtml5-sandbox {
    height: 200px !important;
    resize: vertical;
}

/* -- Media Queries
=================================================================================================== */

/* Full width - widescreen monitors - 16:10 or 16:9 min. - 1920 x 1080 */
@media screen and (max-width: 1920px) {
    .profile-update-loader {
        left: -20px;
    }

    .update-notice {
        left: -60px;
    }
}

/* Education dept. widescreen monitors - low res - 1680 x 1050 */
@media screen and (max-width: 1680px) {
    .profile-update-loader {
        left: -10px;
    }

    .update-notice {
        left: -50px;
    }
}

/* Education dept. widescreen monitors - low res alt - 1440 x 900 */
@media screen and (max-width: 1440px) {
    .profile-update-loader {
        left: -5px;
    }
    .update-notice {
        left: -40px;
    }
}

/* Education dept. small monitors low res - 1280 x 1024 / 1280 x 800 */
@media screen and (max-width: 1280px) {
    .profile-update-loader {
        left: 0px;
    }

    .update-notice {
        left: -10px;
    }
    
    .loc-legend-wrapper {
        margin-right: 8px;
    }
    
    .calendar-selector {
        font-weight: normal;
        font-size: 12px;
    }

    .calendar-title {
        top: 8px;
    }

    .calendar-title > h4 {
        font-size: 14px !important;
    }

    .fc-event {
        padding: 6px !important; /* Override default padding */
    }

    .past:before {
        color: rgba(255,255,255,0.3);
        font-size: 20px;   
    }

    .past-dark:before {
        color: rgba(0, 0, 0, 0.1) !important;
    }

    .fc-event-time {
        font-size: 12px;
    }

    .fc-event-title {
        font-size: 12px;
    }
}

/* Education dept. small monitors low res - 1024 x 768 */
@media screen and (max-width: 1024px) {

    .profile-update-loader {
        left: 10px;
    }

    .update-notice {
        left: 0px;
    }
    
    .loc-legend-wrapper {
        margin-right: 2px;
    }
    
    .calendar-selector {
        font-weight: normal;
        font-size: 12px;
    }

    .calendar-title {
        top: 0px;
    }

    .calendar-title > h4 {
        font-size: 12px !important;
    }

    .fc-event {
        padding: 2px !important; /* Override default padding */
    }

    .past:before {
        color: rgba(255,255,255,0.3);
        font-size: 16px;   
    }

    .past-dark:before {
        color: rgba(0, 0, 0, 0.1) !important;
    }

    .fc-event-time {
        font-size: 11px;
    }

    .fc-event-title {
        font-size: 11px;
    }

    .update-titles-container > h4, .cancel-titles-container > h4 {
        margin-left: 6%;
    }

}

/* Specific postage button fix for low res monitors (desktop) */
@media screen and (max-width: 1000px) {

    .print-button-container-postage {
        top: 0px;
        margin-bottom: 6px;
    }

    .profile-update-loader {
        left: 10px;
    }

    .update-notice {
        left: 0px;
    }

}