@import "https://fonts.googleapis.com/css?family=Handlee|Poppins";

html  {

     /* Page background color */
    background-color: #333;
}

.view {
    /* background image filter color */
    background-color: rgba(51, 51, 51, 0.6);
}

body {

    /* Background image */
    background-image: url('/Skins/Barber/background.jpg');

    /* Main font */
    font-family: 'Poppins', sans-serif;
}

/* Page Title font and color */
.view .content .pageTitle {
    font-family: 'Handlee';
    font-size: 26px;
    color: #fff;
}

.btn:not(.btn-link),
.swal2-container button {
    /* button color */
    background-color: rgba(255, 255, 255, 0.9)!important; /* Need important because swal2 sets color on element */
    color: #333!important; /* Need important because swal2 sets color on element */
}

/* When not on mobile, the background is white so the button must be dark */
.view.classSchedulePage .content .scheduleContent .schedule button {
    color: #fff !important; /* Need important because swal2 sets color on element */
    background-color: #333 !important; /* Need important because swal2 sets color on element */
}

.view .content .list-item-clicked,
.view .content .list-item:hover {
    
    /* button color */
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #333 !important;
}

.view .content .list-item .selection i {

    /* button color */
    color: rgba(255, 255, 255, 0.8); 
}

.view .content .list-item:hover .selection i {
    color: rgba(0, 0, 0, 0.8); 
}


/* Color of navigation boxes and list items */
.view .navigation,
.view .navigation.bottom,
.view .content .list-item,
.view.classSchedulePage .content .scheduleContent,
.view .content .calendarBox,
.view .content .form {
    
    background-color: rgba(51, 51, 51, 0.85);
    color: #fff;

    /* button color */
    border-color: #999;
}

/* When not on mobile, the background is white so the text must be dark */
.view.classSchedulePage .content .scheduleContent .schedule {
    color: #999;
}

/* Navigation Sub Menu */
.view .navigation .navMenu {
    color: #ccc;
}

/* 
    hr line seperator color
*/
.view .content .form hr {

    /* button color */
    border-top: 1px solid #999;
}