/*------------------------------BODY------------------------------*/

.h2, h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #000;
    /*Gives all h2 elements inside the body a general font-size of 2 rem, a font weight of 600 and a color of black*/
}

.h3, h3 {
    font-size: 1.3rem;
    color: #fff;
    /*Gives all h3 elements inside the body a general font-size of 1.3 rem and a color of white*/
}

/*------------------------------JUMBROTRON------------------------------*/

.height50p {
    height: 50vh;
    /*Gives the jumbotron a height of 50 percent of the user screen*/
}

.contentBox h1 {
    font-size: 4.5rem;
    /*Gives the content inside contentBox which is customer support in this case a general font-size of 4.5 rem so as in order
    to stand out from the crowd*/
}

/*------------------------------CALENDAR------------------------------*/

#calendar_table {
    background-color: rgb(231, 231, 231);
    font-size: 0.9em;
    /*Ensures the font-size is 0.9em*/
    width: 100%;
    /*So that it uses 100% of the width provided to it and maximise the usage*/
    box-shadow: rgb(51, 51, 51) 0px 0px 1px, rgb(51, 51, 51) 0px 0px 5px, rgb(51, 51, 51) 0px 0px 10px, rgb(51, 51, 51) 0px 0px 20px;
    /*Gives a shadow of a nice and smooth color for a shadowy background!*/
}

#calendar_table caption {
    caption-side: top;
    text-align: center;
    padding-bottom: 20px;
    font-size: 1.6em;
    letter-spacing: 0.3em;
    /**/
}

.calendar_weekdays {
    /*The function of this is so as to give a "separator" before heading into the calendar table*/
    background-color: white;
    /*Sets the background color of as to white*/
    width: 14.28%;
    /*backup incase of calendar_dates span fail to provide the padding*/
    font-size: 1em;
    border-bottom: 3px solid gray;
    /*Grey bottom*/
}

.calendar_dates {
    text-align: left;
    vertical-align: top;
    font-size: 0.8em;
    /*gives the font-size of items inside calendar_dates a font-size of 0.8em!*/
    padding: 3px;
    height: 60px;
    border: 1px dotted gray;
    background-color: white;
    /*This is more of creating a box for the calendar, so all the borders are listed in here*/
}

td.calendar_dates {
    padding: 0px 14px;
    /*Elements inside has a minimum width of 50px, so as to ensure everything is not too cram*/
}

.dates span {
    height: 50px;
    font-size: 16px;
    /*Makes the size of the fonts of a size of 16px*/
    letter-spacing: -1px;
    /*Gives the size of the fonts, the height, and the spacing a value so as in to order to give it style and aesthetics purposes*/
    border: 1px solid #e6e4e4;
    padding-right: 4px;
    font-weight: 700;
    /*Helps to give a font-weight of 700*/
}

input:focus, select:focus, textarea:focus {
    background-color: rgb(220, 255, 220);
}

input#firstName:focus:valid, input#lastName:focus:valid, input#username:focus:valid, input#email:focus:valid, input#zip:focus:valid, input#address:focus:valid, input#date:focus:valid {
    background: rgb(220, 255, 220) url(../Pictures/5.Help/validation-valid.png) bottom right/contain no-repeat;
    
    /*display a green X image in the input box background */
    /*for the pseudo class such as input#name:focus:valid, style for valid data values in the selected fields that have the focus*/
}

input#firstName:focus:invalid, input#lastName:focus:invalid, input#username:focus:invalid, input#email:focus:invalid, input#zip:focus:invalid, input#address:focus:invalid, input#date:focus:invalid {
    background: rgb(225, 232, 233) url(../Pictures/5.Help/validation-invalid.png) bottom right/contain no-repeat;
    /*display a red X image in the input box background */
    /*for the pseudo class such as input#name:focus:valid, style for valid data values in the selected fields that have the focus*/
}

/*------------------------------RESPONSIVITY------------------------------*/

@media (max-width:992px) {
    td.calendar_dates {
        padding: 0px 16px;
        /*This is to so as to when the screen size gets too small, this will scale tgt with the page, making it slightly more responsive*/
    }
    #calendar {
        display: none;
    }
    a {
        color: #007bff;
        /*Blue is generally a very cool and calming color, so users feel relaxed even when searching for help(irony?)*/
        text-decoration: none;
        /*To avoid any underlines*/
        background-color: transparent;
        /*This gives the background color for the anchor tag a color of its background which is white!*/
        /*This is mainly for the anchor tag found in the Popular support topic*/
    }
    a.nav-link {
        background-color: #000;
        color: #007bff;
        /*Blue is generally a very cool and calming color, so users feel relaxed even when searching for help(irony?)*/
        display: block;
        padding: .5rem 1rem;
        background: transparent;
        /*This gives the background color for the anchor tag a color of its background which is white!*/
    }
    a.nav-link {
        color: #0056b3;
        /*This gives the color of the popular support topic a deeper color shade of blue when hovered, telling users its a link*/
        text-decoration: none;
    }
    .nav-link {
        display: block;
        padding: .5rem 1rem;
    }
}

@media (max-width:1024px) {
    td.calendar_dates {
        padding: 0px 10px;
    }
}