@charset "utf-8";
/* CSS Document */

/*
  PENDING:
  1) Fixed header and navigation
  2) refer normalise.css for more improvements

*/

/***************************************** test html template*/
.template-comments { /* comments (red text with yellow background) MJP has made in the html test template */
  background-color: yellow;
  color: red;
}

.template-html-code {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  background-color: #EEEEEE;
}

.template-header {
  background-color: lightblue;
}

.template-footer {
  background-color: lightgrey;
}

/***************************************** @font-face START*/
@font-face {
  font-family: 'DroidSans';
  src: url('../fonts/DroidSans-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DroidSans';
  src: url('../fonts/DroidSans-Bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'DroidSerif';
  src: url('../fonts/DroidSerif-Regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DroidSerif';
  src: url('../fonts/DroidSerif-Bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'DroidSerif';
  src: url('../fonts/DroidSerif-Italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'DroidSerif';
  src: url('../fonts/DroidSerif-BoldItalic-webfont.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'ConsolasRegular';
  src: url('../fonts/consolas-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DroidSans';
  src: url('../fonts/DroidSans-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/***************************************** @font-face END*/

/***************************************** MJP GLOBAL CSS RESETS START */
* {
  margin: 0;
  padding:0;
  border:0; /* COMMENT THIS LATER AFTER ALL STYLES HAVE BEEN FIXED */
  outline:0;
  box-sizing: border-box; /* So 100% means 100% */
  font: 10px/1.5 "DroidSans", Helvetica, Arial, sans-serif; /* DroidSans SegoeUISans LiberationSans RobotoSans */
  /*  We use 'font' shorthand instead of 'font-size' so that we can get the first parameter as font-size + line-height.
    Use px for the base font-size instead of percentages, because the user can change the default font-size.
    This way, we can use 'rem(root em) based sizing on fonts, without being concerned about the default font-size set by the user.
    By using 10px as the base font-size, we can set font-size = 1.2rem for 12px and 1.8rem for 18px, etc.
  Also, by using the 'font' shorthand, we can make the line-height relative to the font-size. Default line-height is set at 1.5 times the font-size. */

  color: #333333; /* text color */
  vertical-align:baseline;
  background:transparent;
}

/***************************************** new defaults*/
/***************************************** default font-size for all elements*/
a, abbr, address, area, article, aside, audio, b,
base, bdi, bdo, blockquote, body, br, button,
canvas, caption, cite, code, col, colgroup, command,
datalist, dd, del, details, dfn, dir, div, dl, dt, em,
embed, fieldset, figcaption, figure, footer, form,
h1, h2, h3, h4, h5, h6,
head, header, hgroup, hr, i, iframe, img, input,
ins, kbd, keygen, label, legend, li, link, map, mark,
menu, meta, meter, nav, noscript, object, ol, optgroup,
option, output, p, param, pre, progress, q, rp, rt, ruby,
s, samp, section, select, small, source, span,
strong, style, sub, summary, sup, table, tbody, td,
textarea, tfoot, th, thead, time, title, tr, track, u, ul,
var, video, wbr
{
  font-size: 1.8rem;
}

/***************************************** default font-size, line-height, margin-top, margin-bottom for inline text elements*/
a, abbr, b, bdi, bdo, cite, code, dfn, em,i, kbd,
mark, q, s, samp, span, strong, time, u, var, wbr
{
  font-size: inherit;
  line-height: inherit;
  margin-top: inherit;
  margin-bottom: inherit;
}

/***************************************** overriding display attribute */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, img {
  display: block; /* MJP CAUTION: DO NOT DELETE THIS. */
}

audio, canvas, progress, meter, video{ /* MJP CAUTION: DO NOT DELETE THIS. */
	display:inline-block;
}

/**
  * Prevent modern browsers from displaying `audio` without controls.
  * Remove excess height in iOS 5 devices.
*/

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
  * Address `[hidden]` styling not present in IE 8/9/10.
  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/

[hidden], template {
  display: none;
}
/***************************************** default font-family classes */
.DroidSerifFont {
  font-family: "DroidSerif";
}

.rupee-font {
  font-family: "rupee";
}

/***************************************** default text-color classes */
.blue-text {
  color: #0E6899;
}

.black-text {
  color: #000000;
}

.red-text {
  color: #FF0000;
}

/***************************************** default heading classes <h1>..<hn> tags  */
h1 {
  font-size: 3.6rem;
  line-height: 1.25;
  margin-top: calc(3.6rem * 1.25 * 0.75);
  margin-bottom: calc(3.6rem * 1.25 * 0.75);
}

h2 {
  font-size: 3.0rem;
  line-height: 1.25;
  margin-top: calc(3.0rem * 1.25 * 0.75);
  margin-bottom: calc(3.0rem * 1.25 * 0.75);
}

h3 {
  font-size: 2.4rem;
  line-height: 1.35;
  margin-top: calc(2.4rem * 1.35 * 0.75);
  margin-bottom: calc(2.4rem * 1.35 * 0.75);
}

h4 {
  font-size: 2.1rem;
  line-height: 1.35;
  margin-top: calc(2.1rem * 1.35 * 0.75);
  margin-bottom: calc(2.1rem * 1.35 * 0.75);
}

/***************************************** default paragraph classes <p> tags */
p {
  font-size: 1.8rem;
  line-height: 1.5;
  margin-top: calc(1.8rem * 1.5 * 0.75);
  margin-bottom: calc(1.8rem * 1.5 * 0.75);
}

.p-18 {
  font-size: 1.8rem;
  line-height: 1.5;
  margin-top: calc(1.8rem * 1.5 * 0.75);
  margin-bottom: calc(1.8rem * 1.5 * 0.75);
}

.p-16 {
  font-size: 1.6rem;
  line-height: 1.5;
  margin-top: calc(1.6rem * 1.5 * 0.75);
  margin-bottom: calc(1.6rem * 1.5 * 0.75);
}

.p-14 {
  font-size: 1.4rem;
  line-height: 1.75;
  margin-top: calc(1.4rem * 1.75 * 0.75);
  margin-bottom: calc(1.4rem * 1.75 * 0.75);
}

.p-12 {
  font-size: 1.2rem;
  line-height: 1.75;
  margin-top: calc(1.2rem * 1.75 * 0.75);
  margin-bottom: calc(1.2rem * 1.75 * 0.75);
}

/***************************************** default list classes <dl>, <dt>, <dd>, <ul>, <ol> and list item <li> tags */
dd {
  margin-left: 4rem;    /*default margin-left for <dd> element */
}

ul {
  list-style: disc outside;
  margin-left: 2rem;
}

ol {
  list-style: decimal outside;
  margin-left: 2rem;
}

li{
  font-size: inherit;
}

ul, ol, .ul-18, .ol-18 {
  font-size: 1.8rem;
  line-height: 1.5;
}

.ul-16, .ol-16 {
  font-size: 1.6rem;
  line-height: 1.5;
}

.ul-14, .ol-14 {
  font-size: 1.4rem;
  line-height: 1.75;
}

.ul-12, .ol-12 {
  font-size: 1.2rem;
  line-height: 1.75;
}

/***************************************** default blockquote class <blockquote> tag */
blockquote {
  margin: 2.4rem 1rem 0.5rem 0;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-family: "DroidSerif";
  font-size: 6.4rem;
  line-height: 0.16rem;
  margin-right: 0.4rem;
  vertical-align: -2.7rem;
}

blockquote:after {
  color: #ccc;
  content: close-quote;
  font-family: "DroidSerif";
  font-size: 6.4rem;
  line-height: 0.16rem;
  margin-right: 0.4rem;
  vertical-align: -3rem;
}

blockquote p { /* the paragraph within the quote is displayed inline so that the text appears alongside the quote */
  display: inline;
}

/***************************************** default horizontal rule class (<hr>) tag */
hr { border: 0;
  height: 0.2rem;
  background-image:
  linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
  margin: 2rem 0;
}

/***************************************** default inline text classes */
a {
  font: inherit;
  text-decoration: none;
  color: #4472B9;
}

abbr {
  cursor: help;
  border-bottom: 0.2rem dotted;
}

cite, del, ins, s, q, span, time {/*default*/}

b, strong, .bold-text {
  font-weight: bold;
}

dfn, em, i, var, .italic-text {
  font-style: italic;
}

mark{
	background:#FFFF00; /* highlight color = yellow */
	color:#000000; /* text color = black */
}

u, .underlined-text {
  text-decoration: underline;
}

.justify-text {
  text-align: justify;
}

small{
	font-size:80%;
}

sub, sup{
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline;
}

sup{
	top:-0.8rem;
}

sub{
	bottom:-0.4rem;
}

/***************************************** default syntax classes */
kbd, code, samp{
  font-family: "ConsolasRegular";
}

/***************************************** default table classes */
table{
	border-collapse:collapse;
	border-spacing:0;
}

table, td, th {
  border: 0.1rem solid black;
}

td,th{
	padding:0;
}

tfoot{ /* seems, the default firefox text-align = right for <tfoot> */
  text-align:left;
}

/***************************************** url link class */
.url-link:hover {
  border-bottom: 0.2rem solid;
}

/***************************************** default grid classes */
.row-grid{
  display: flex;
  flex-flow: row wrap;
  /* border:0.1rem solid red; */ /* DEBUG */
  justify-content: flex-start;
  padding: 1.0rem; /* override padding, where required */
}

.column-grid{
  display: flex;
  flex-direction: column;
  /* border:0.1rem solid blue; */ /* DEBUG */
  justify-content: flex-start;
  padding: 0.5rem; /* override padding, where required */
}

.flex-05 {flex: 1 0 5%;}
.flex-10 {flex: 1 0 10%;}
.flex-15 {flex: 1 0 15%;}
.flex-20 {flex: 1 0 20%;}
.flex-25 {flex: 1 0 25%;}
.flex-30 {flex: 1 0 30%;}
.flex-35 {flex: 1 0 35%;}
.flex-40 {flex: 1 0 40%;}
.flex-45 {flex: 1 0 45%;}
.flex-50 {flex: 1 0 50%;}
.flex-55 {flex: 1 0 55%;}
.flex-60 {flex: 1 0 60%;}
.flex-65 {flex: 1 0 65%;}
.flex-70 {flex: 1 0 70%;}
.flex-75 {flex: 1 0 75%;}
.flex-80 {flex: 1 0 80%;}
.flex-85 {flex: 1 0 85%;}
.flex-90 {flex: 1 0 90%;}
.flex-95 {flex: 1 0 95%;}
.flex-100 {flex: 1 0 100%;}

/* 1/3th calculation - 1/3, 2/3 */
/* (3/3 = 100%[flex-100] */
.flex-33 {flex: 1 0 33.3333%;}
.flex-66 {flex: 1 0 66.6666%;}

/* 1/6th calculation - 1/6, 5/6 */
/* (2/6 = 33.3333%[flex-33] */
/* (3/6 = 50%[flex-50] */
/* (4/6 = 66.6666%[flex-66] */
/* (6/6 = 100%[flex-100] */
.flex-1-6 {flex: 1 0 16.6666%;}
.flex-5-6 {flex: 1 0 83.3333%;}

/* 1/8th calculation - 1/8, 3/8, 5/8, 7/8 */
/* (2/8 = 25%[flex-25] */
/* (4/8 = 50%[flex-50] */
/* (6/8 = 75%[flex-75] */
/* (8/8 = 100%[flex-100] */
.flex-1-8 {flex: 1 0 12.5%;}
.flex-3-8 {flex: 1 0 37.5%;}
.flex-5-8 {flex: 1 0 62.5%;}
.flex-7-8 {flex: 1 0 87.5%;}

[class*="flex"] { /* set the min-width of all flex items to 0 (to overcome a firefox bug, where the input boxes overflow their flex limits)*/
  min-width:0;
}

/***************************************** default label class for stacked inputs */
.stacked-label-align-right {
  text-align:right;
}

/* Medium screens for flexible grids*/
@media all and (max-width: 800px) {
  .row-grid {
    /* On small screens, we use column direction instead of row */
    flex-direction: column;
  }

  .stacked-label-align-right {
    text-align:left;
  }
}

/***************************************** default form classes */
/***************************************** default form common classes */

/* wrap all form widgets and their labels in these classes to get a consistent appearance */
form, .form-18 {      /* default form wrapper */
  font-size: 1.8rem;
}

.form-16 {
  font-size: 1.6rem;
}

.form-14 {
  font-size: 1.4rem;
}

.form-12 {
  font-size: 1.2rem;
}

form, .form-18, .form-16, .form-14, .form-12 {
  line-height: normal; /* since lines are not so long, readability is not a problem. so, we can let the browser handle the line-height. */
}

/* disabled state */
button:disabled, .buttons:disabled, input:disabled, textarea:disabled, select:disabled {
	opacity:0.4;
}

button:disabled:hover, .buttons:disabled:hover, input:disabled:hover, textarea:disabled:hover, select:disabled:hover {
	cursor:not-allowed;
}

/***************************************** default button classes */
/* buttons - active(normal) state */
button, .buttons, input[type="button"], input[type="reset"], input[type="submit"], input[type="file"] {
  padding: 0.5rem 1.5rem;
  color:#FFFFFF;
	background-color:#334757;
	border: 0.1rem solid #334757;
	text-decoration:none;
  text-align: center;
	border-radius:0.2rem;
  cursor: pointer;
}

/* buttons - hover state */
button:hover, .buttons:hover {
  /* background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)) */
  background-color: #1A232D;
  color: #FFFFFF;
  text-decoration: none;
}

/***************************************** default text input classes */
/* text input - normal state */
input[type=text], input[type=password], input[type=email], input[type=url], input[type=date], input[type=month],
input[type=time], input[type=datetime], input[type=datetime-local], input[type=week], input[type=number],
input[type=search], input[type=tel], input[type=color], select, textarea {
  padding: 0.5rem;
	border:0.1rem solid #ccc;
	box-shadow:inset 0 0.1rem 0.3rem #ddd;
	border-radius:0.4rem;
}

input:not([type]){
	padding:0.8rem 1rem;
	border:0.1rem solid #ccc;
	box-shadow:inset 0 0.1rem 0.3rem #ddd;
	border-radius:0.4rem;
}

/* text input - focussed state */
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=url]:focus,
input[type=date]:focus, input[type=month]:focus, input[type=time]:focus, input[type=datetime]:focus,
input[type=datetime-local]:focus, input[type=week]:focus, input[type=number]:focus, input[type=search]:focus,
input[type=tel]:focus, input[type=color]:focus, select:focus, textarea:focus {
	border-color:#129FEA;
}

input:not([type]):focus{
	border-color:#129FEA;
}

/* text input - disabled state */
input[type=text][disabled], input[type=password][disabled], input[type=email][disabled], input[type=url][disabled],
input[type=date][disabled], input[type=month][disabled], input[type=time][disabled], input[type=datetime][disabled],
input[type=datetime-local][disabled], input[type=week][disabled], input[type=number][disabled], input[type=search][disabled],
input[type=tel][disabled], input[type=color][disabled], select[disabled], textarea[disabled] {
	cursor:not-allowed;
	background-color:#eaeded;
	color:#cad2d3;
}

input:not([type])[disabled]{
	cursor:not-allowed;
	background-color:#eaeded;
	color:#cad2d3;
}

/* text input - read-only state */
input[readonly], select[readonly], textarea[readonly]{
	background-color:#eee;
	color:#777;
	border-color:#ccc;
}

label {
  white-space:nowrap;
  padding:0.5rem;
}

.align-right {
  text-align:right;
}

.horizontal-padding {
  padding-right: 2rem;
}

textarea:focus:invalid, input:focus:invalid, select:focus :invalid { /* required fields are highlighted red with text being red until a valid entry is provided */
  color:#b94a48;
	border-color:#e9322d;
}

textarea{
	overflow:auto;
}

fieldset{
	border: 0.1rem solid silver;
	margin: 0 0.2rem;
	padding: 0.50rem 1rem;
}

/**************************************************************** MJP GLOBAL RESETS END*/

/**************************************************************** MJP GLOBAL STYLES START */
/**************************************************************** body box */
body {
  background-color: #E0E0E0;
}

.body-box-90pct { /* this is an invisible body box which occupies 90% of the viewport's width */
  background-color: #FAFAFA;
  width: 90%;
  margin: 2rem auto;
}

/**************************************************************** container for page-wide content */
.content-box { /* this is an invisible box to which occupies a maximum of 1200px width within the body box*/
  max-width: 120rem; /* used max-width instead of width to make the content inside the content-box flexible */
  margin: auto;
  padding: 2rem;
}

/**************************************************************** box glow border */
.glow-border {
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
/*  border-style: solid;
  box-shadow: 0 0 0.5rem #D4D4D4;
  border-radius: 0.5rem;*/
}

/**************************************************************** General - Can be reused START*/
/**************************************************************** Image with Caption over it */
.image-under-caption, .clickable-image, .clickable-video {
  margin: 0; /* TO BE MOVED TO GLOBAL RESETS */
  border: 3px solid white;
  box-shadow: 0px 0px 8px rgba(0,0,0,.3);
  position: relative;
}

.clickable-image-no-border, .clickable-video-no-border {
    margin: 0; /* TO BE MOVED TO GLOBAL RESETS */
    position: relative;
}

.clickable-image, .clickable-video, .clickable-image-no-border, .clickable-video-no-border {
	cursor: pointer;
}

.clickable-image:hover, .clickable-video:hover, .clickable-image-no-border:hover, .clickable-video-no-border:hover {
	opacity: 0.7;
}

.caption-over-image {
  position: absolute;
  font-size: 1.8rem;
  text-align: center;
  bottom: 0; /* This will position the caption aligned with the bottom of the image */
  padding: 1rem;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.5);
}

/**************************************************************** object margin */
.top-1_0-rem {
  margin-top: 1.0rem;
}

.top-1_5-rem {
  margin-top: 1.5rem;
}

.top-2_0-rem {
  margin-top: 2.0rem;
}

.no-bottom-margin {
  margin-bottom: 0;
}

.no-top-margin {
  margin-top: 0;
}

/**************************************************************** page submenu start */
.submenu-box { /* this is an invisible box to which occupies a maximum of 1200px width within the body box*/
  width: 90%;
  margin: 1rem auto;
}

.body-box-90pct-first { /* this is an invisible body box which occupies 90% of the viewport's width */
  background-color: #FAFAFA;
  width: 90%;
  margin: 1rem auto;
}

nav[role="submenu"] {
    display: flex;
    flex-flow: row wrap; /* shorthand for flex-direction: row; + flex-wrap: wrap; */
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    }

nav[role="submenu"] a {
	background-color: #12B4AB;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: auto;
    border-left: 0.1rem solid rgba(255,255,255,0.3);
    border-right: 0.1rem solid rgba(0,0,0,0.1);
    border-top: 0.1rem solid rgba(255,255,255,0.3);
    border-bottom: 0.1rem solid rgba(0,0,0,0.1);

    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 15rem;
    }

nav[role="submenu"] a:hover, .active {
    background-color: #0C7873;
    color: white;
    text-decoration: none;
    }

.submenu-item-header-box {
    padding: 0 10px;
    /*border-radius: 0.5rem 0.5rem 0 0;*/
    border-radius: 2px;
    background-color: #B6BECB;
}

.left-text {
	color: white;
	font-size: 2.0rem;
	float: left;
}

.right-text {
    color: white;
	float: right;
}

.url-top {
	color: white;
	font-size: 2.0rem;
}

.url-top:hover {
    color: black;
	border-bottom: 0.2rem solid;
}
/**************************************************************** page submenu end */

/**************************************************************** lightbox start */
/* The Lightbox (background) */
.lightbox {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	/*padding-top: 50px;*/ /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /*100% of viewport width (vw)*/
	height: 100%; /*100% of viewport height (vh)*/
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    text-align: center; /* used to center a DIV Element in IE (and surprisingly even in FireFox and Chrome) */
}

/* Lightbox Content (Image/Video/Embedded Video) */
/* pseudo element to force vertical centering of child element */
.lightbox::before{
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

/* Lightbox Content (Image/Video/Embedded Video) */
/* Centered child element can be any width and height */
.centered-child{
	display: inline-block;
	vertical-align: middle;
	width: 70%; /* can be any width */
}

/* Lightbox Content (Video) */
.lightbox-video {
    margin: auto;
    max-width: 70vw;
}

/* Lightbox Content (Image) */
.lightbox-image {
    margin: auto;
    max-width: 80vw;
    max-height: 80vh; /* lightbox-image height has to be constrained to account for oversized images */
}

/* Video container to maintain 16:9 aspect ratio for videos */
/* The width of the Youtube iframe always fills the entire width of its container, while its height changes accordingly based on a 16:9 ratio. This ratio is produced by setting the bottom padding of the parent container to 56.25% (9 divided by 16); you can change this to a different ratio, such as 75% (for 4:3 ratio instead).*/
.video-wrapper{
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
}

/* Make IFRAME responsive */
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Caption of Lightbox Image/Video/Embedded Video (Image Text) - Same Width as the Image */
.caption {
    color: #fff;
	font-size: 3.6rem;
	font-weight: bold;
}

/* Add Animation - Zoom in the Lightbox */
.lightbox-image, .lightbox-video, .caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Lightbox Button */
.close-image, .close-video {
    position: absolute;
    top: 0;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close-image:hover, .close-image:focus, .close-video:hover, .close-video:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/**************************************************************** lightbox end */

/**************************************************************** General - Can be reused END*/

/**************************************************************** MJP GLOBAL STYLES END */

/***************************************************************** PAGE STYLES START *****************************************************************/
/**************************************************************** styles for pages with card-box-container flex box start*/
.card-box-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.card-box-35 {
  flex: 1 1 35rem;
  margin: 2rem;
  padding: 2rem;
  max-width: 35rem; /* to constrain the width of the card so that all cards are of equal width on different screen sizes*/
  /* border: 1px solid blue; */ /*REMOVE THIS WHEN DONE */
}

.card-box-35 * {
  width: 100%;
}
/**************************************************************** styles for pages with card-box-container flex box end*/

/* styles for unordered list (ul) for management.php and students_parents.php start*/
.bullet-list {
  list-style: disc outside;
  margin-left: 4rem;
}
/* styles for unordered list (ul) for management.php and students_parents.php end*/
/***************************************************************** PAGE STYLES END *****************************************************************/