@charset "utf-8";

.t1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.t2 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.t3 {
  align-self: center;
  font-size: xx-large;
  font-weight: 200;
  font-family: "Dosis", sans-serif;
  /*font-family: 'Sniglet', cursive;
    /*font-family: 'Holtwood One SC', serif;
    /*font-family: 'Corben', cursive;
    /*font-family: 'Unlock', cursive;
    /*font-family: 'Fontdiner Swanky', cursive;*/
  background-color: #ffffff;
  color: #00b249;

  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

  width: 80%;
  height: 300px;
  text-align: center;
  padding-top: 10%;
}
.container-fluid {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}
.black-container {
  background-color: #000000;
}

.headerDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.logoDiv {
  width: 20%;
  height: auto;
}
.logo {
  width: 100%;
}

.faviconDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 0%;
  margin-left: auto;
}

.faviconDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}

.tel {
  font-size: x-large;
  font-weight: 400;
  margin-right: 10px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*----------------------------------------------------------- favicons -------------------------------------------------------------*/
.fa {
  margin-left: 5px;
  margin-right: 5px;
  padding: 15px;

  font-size: 30px;
  width: 15px;
  height: 15px;
  text-align: center;
  text-decoration: none;
  border-radius: 70px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  flex-direction: column;
  justify-content: center;
}
.fa:hover {
  opacity: 0.7;
}
/* -----------------------Facebook---------------------- */
.fa-facebook {
  background: #ad0404;
  color: #ffffff;
}
/* -----------------------Twitter----------------------- */
.fa-twitter {
  background: #ad0404;
  color: white;
}
/*------------------------Instagram----------------------*/
.fa-instagram {
  background: #ad0404;
  color: white;
}
.fa-envelope {
  background: #ad0404;
  color: white;
}

/*------------------------------------------------------------Navigation Menu -------------------------------------------------------*/

nav {
  /* the following lines are creating an unwanted padding effect in the nav menu 
    /*
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    */
  background-color: #000000;
  padding-top: 0px;
  padding-bottom: 0px;
}
nav ul {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  padding: 0px 0px;
}

nav ul li {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-left: 90px;
  padding-right: 90px;
  border-style: solid;
}

nav ul li a {
  color: #ffffff;
  text-align: center;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
nav ul li:hover {
  background-color: #ffffff;
}
nav ul li:hover a {
  color: #111111;
}

nav ul li a:hover {
  color: #111111;
}
nav a {
  flex-grow: 1;
}

a {
  text-decoration: none;
}

.active {
  background-color: #ffffff;
  color: #000000;
}

/*----------------------------------------------------------Banner--------------------------------------------------------------*/

.bannerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bannerDiv1 {
  align-self: center;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.banner {
  align-self: center;
  width: 100vw;
  max-height: 50em;
}
.bannerPageDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  margin-bottom: 300px;
}
.bannerPageDiv1 {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bannerTitleDiv {
  display: flex;
  justify-content: center;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.bannerTitle {
  align-self: center;
  font-size: large;
  font-weight: 600;
}
.bannerImgDiv {
  width: 200px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bannerImgDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 200px;
  max-height: 150px;
}
.bannerImg {
  align-self: center;

  max-height: 150px;
  max-width: 200px;
}
.bannerTable {
}
.bannerTD {
  width: 220px;
  height: auto;
}
.bannerTableTitle {
  border-style: solid;
  border-width: medium;
  border-color: #575757;
}
bannerTableContents {
  border-style: solid;
  border-width: medium;
  border-color: #777777;
}
.centreText {
  text-align: center;
}
.boldText {
  font-size: medium;
  font-weight: 800;
}
.bannerAddDeleteDiv {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.bannerAddImgDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 55px;
}
.bannerAddImgDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 40px;
}
.bannerAddImg {
  align-self: center;
  width: 100%;
}
.bannerDeleteImgDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-right: 55px;
}
.bannerDeleteImgDiv1 {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bannerDeleteForm {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: auto;
  margin-bottom: auto;
}
.bannerDeleteImg {
  align-self: center;
  width: 100%;
}
.bannerPageDeleteBtn {
  align-self: center;
  width: 100px;
  height: 40px;
  background-image: url(https://mkingapparel.co.uk/public/staff/images/delete.png);
}
.bannerPageUploadDiv {
  display: none;
  flex-direction: column;
  justify-content: center;

  border-style: solid;
  border-width: thin;
  border-color: #000000;
}
.bannerPageUploadDiv1 {
  align-self: center;
  flex-direction: row;
  justify-content: center;
  align-content: center;
}

/*----------------------------------------------------------About-Mking title--------------------------------------------------*/

.aboutDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 30%;
  margin-left: 1%;
  margin-right: auto;
}
.about {
  display: inline-block;
  flex-direction: column;
  justify-content: center;
  padding-top: 4px;
  margin-right: 20px;
}
.about_logoDiv {
  display: inline-block;
  width: 35%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about_logo {
  width: 100%;
  flex-direction: column;
  justify-content: center;
}

/*----------------------------------------------------------About Mking Text --------------------------------------------------*/

.aboutTextDiv {
  margin-left: 1%;
  margin-right: 1%;
  width: 98%;
}
.aboutText {
  font-size: large;
  text-align: justify;
}
.aboutTextDiv2 {
  margin-left: 1%;
  margin-right: auto;
  width: 29%;
  float: left;
}

/*----------------------------------------------------------4Bros -----------------------------------------------------------*/

.BrosDiv {
  width: 50%;
  margin-left: 45%;
  margin-right: 5%;
  margin-top: -12%;
}
.BrosImg {
  width: 100%;
}

/*----------------------------------------------------------Stack Heavy Stay Silent -----------------------------------------*/

.shssDiv {
  width: 40%;
  margin-left: 1%;
  float: left;
  margin-top: -5%;
}
.shssImg {
  width: 100%;
}

/*----------------------------------------------------------black ---------------------- -----------------------------------------*/

.black-container {
  background-color: #000000;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  padding-left: 0%;
}

.kingDiv {
  width: 20%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3%;
  margin-top: 2%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.king {
  color: #ffffff;
  flex-direction: row;
  justify-content: center;
}

.smallPic {
  width: 100%;
  height: auto;
  flex-grow: 1;
  border-radius: 100px;
  border-style: solid;
  border-color: #ffffff;
  border-width: thick;
}

#smallPicDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 5%;
  margin-right: 5%;
}

#smallPicDiv ul {
  list-style: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  align-items: center;

  margin-left: -3%;
}

#smallPicDiv ul li {
  flex-grow: 1;
  padding-left: 5%;
  padding-right: 5%;
  width: 25%;
}

#smallPicTextDiv ul {
  list-style: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  align-items: center;

  margin-left: 0%;
  margin-right: 0%;
}
#smallPicTextDiv ul li {
  padding-left: 4%;
  padding-right: 3%;
  width: 25%;
}
.whiteText {
  color: #ffffff;
  text-align: center;
}

/*----------------------------------------------------------Contact Us -----------------------------------------------------------*/

.contact {
  margin-top: 5px;
  margin-bottom: 5px;
  border-style: solid;
  border-width: thin;
  height: 30px;
}
.contactDiv {
  width: 25%;
  margin-left: 0%;
  margin-bottom: 250px;
  float: left;
}
.contactTitleDiv {
  margin-top: 5%;
}
.contactTitle {
  color: red;
  width: 100%;
}
#msg {
  border-style: solid;
  border-width: thin;
  border-color: #000000;
  height: 200px;
}
#submit {
  background-color: forestgreen;
  color: #ffffff;
  width: 100px;
  height: 25px;
  border-radius: 50px;
  font-size: large;
}

.mapDiv {
  width: 70%;
  height: 350px;
  margin-left: 30%;
  margin-right: 0%;
  border-style: solid;
}

.map {
  width: 100%;
  height: 350px;
}

/*---------------------------------------------------------- NEWS PAGE -----------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/

.newsTitle {
}
.newsTitleDiv {
  margin-left: 3%;
}

/*----------------------------------------------------------Latest Updates---------------------------------------------------------*/
.updatesDiv {
  width: 60%;
  margin-left: 3%;
  border-style: solid;
  border-color: #777777;
  float: left;
}
.updateDiv {
  width: 100%;
  border-style: solid;
  border-color: #ffffff;
}
.updateImageDiv {
  border-style: solid;
  border-color: #777777;
  height: 130px;
}
.updateCommentDiv {
  border-style: solid;
  border-color: #777777;
  height: 80px;
}
.updateProfileDiv {
  border-style: solid;
  border-color: #777777;
  height: 40px;
  background-color: #c8c8c8;
}

/*----------------------------------------------------------Facebook Feed---------------------------------------------------------*/

.fbDiv {
  margin-top: 2%;
  margin-right: 3%;
  margin-left: 72%;
  width: 25%;

  display: flex;
  flex-direction: row;
  justify-content: center;
}
.fbFeedDiv {
  align-self: center;
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fb-page {
  align-self: center;
  width: 90%;
  height: 500px;
}

.newsPageLikeDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 2%;
}
.newsPageLikeDiv1 {
  align-self: flex-start;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.fb-like {
  align-self: center;
}

/*----------------------------------------------------------Small Logo---------------------------------------------------------*/
.smallLogoDiv {
  width: 25%;
  margin-left: 72%;
  margin-right: 3%;
  margin-top: 3%;
  margin-bottom: 7%;

  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  flex-direction: column;
  align-items: center;
}
.smallLogo {
  width: 70%;
}

/*----------------------------------------------------------log in---------------------------------------------------------*/

.loginForm {
  margin-left: 20px;
}
.loginBtn {
  margin-top: 2%;
  margin-left: 5px;
  width: 10%;
  min-width: 55px;
  color: #ffffff;
  background-color: #999999;
}
.loginUsr {
  width: 50%;
  min-width: 100px;
}
.loginPwd {
  width: 50%;
  min-width: 100px;
}

/*----------------------------------------------------------Footer---------------------------------------------------------*/

.footerDiv {
  margin-top: 20%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

/*----------------------------------------------------------copyright---------------------------------------------------------*/

.copyright {
  align-self: center;
  font-size: large;
}

/*------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------STAFF PAGES---------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------*/

.staffHomeTitleDIv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 25%;
  margin-top: 10%;
  margin-left: 37.5%;
  margin-right: 24.5;
}
.staffHomeTitle {
  align-self: center;
  text-align: center;
}

.staffHomeUsernameDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  float: right;
  width: 12%;
  margin-right: 1%;
}
.staffHomeUsernameDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  float: right;
  width: 12%;
  margin-right: 1%;
  margin-top: -1.4%;
}
.staffHomeUsername {
  align-self: center;
  font-size: x-large;
  font-weight: 900;
  color: #ad0404;
}
.staffHomeName {
  align-self: flex-end;
  margin-right: 3%;
  margin-top: -1%;
  font-size: large;
  font-weight: 600;
}

/*----------------------------------------------------------STAFF SERVICES----------------------------------------------------*/
/*-----------------------------------------------------------Staff Index Page----------------------------------------------------*/
.staffHomeServicesDiv {
  border-style: solid;
  border-color: #777277;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 4%;
  width: 100%;
}
.staffHomeServicesDiv ul {
  align-self: center;
  list-style: none;
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.staffHomeServicesDiv ul li {
  align-self: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: center; /* center or space-between*/
  width: 50%;
}
.servicesAddDiv {
  align-self: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  height: 40px;
  background-color: #777777;
  border-radius: 50px;
  margin-top: 0.5%;
  margin-right: 0.5%;
  border-style: solid;
  border-width: medium;
  border-color: #646464;
}
.servicesAdd {
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  align-self: center;
  font-weight: 600;
  letter-spacing: 3;
  word-spacing: 5;
}
.servicesEditDiv {
  align-self: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  height: 40px;
  background-color: #ad0404;
  border-radius: 50px;
  margin-top: 0.5%;
  margin-left: 0.5%;
  border-style: solid;
  border-width: medium;
  border-color: #880104;
}
.servicesEdit {
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  align-self: center;
  font-weight: 600;
  letter-spacing: 3;
  word-spacing: 5;
}
.rowDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  align-self: center;
}

/*----------------------------------------------------------STAFF Icons ---------------------- -----------------------------------------*/

.staffHomeIconDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  width: 80%;
  height: 30px;
  justify-content: space-between;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 17%;
}
.staffHomeAddDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  width: 10%;
}
#addStaffForm {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
.staffHomeAddDiv a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
.addImgDiv {
  width: 30%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
.addImgDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-self: center;
}
.addImg {
  width: 70%;
  align-self: center;
}
.addStaffLabelDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  margin-left: 1%;
}
.addStaffLabelDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-self: center;
}
.addStaffLabel {
  font-size: large;
  font-weight: 800;
  align-self: center;
  color: #000000;
}
.staffHomeEditDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
.staffHomeEditDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
}
#editStaffForm {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  width: 100%;
}
.editImgDiv {
  width: 30%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
}
.editImgDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  width: 75%;
}
#editImgBtn {
  width: 30px;
  height: 30px;
  align-self: center;
  /*background: url(../staff/images/edit.png) no-repeat;*/
}
.editStaffLabelDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
}
.editStaffLabelDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-self: center;
}
.editStaffLabel {
  font-size: large;
  font-weight: 800;
  align-self: center;
  color: #000000;
  width: 120px;
}
.editStaffInputDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
}
.editStaffInputDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-self: center;
}
#editStaffInput {
  align-self: center;
  margin-left: -10%;
  margin-right: 10%;
}
.staffHomeDeleteDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
.staffHomeDeleteDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
}
.deleteStaffForm {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.deleteImgDiv {
  width: 30%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
.deleteImgDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  width: 75%;
}
#deleteImg {
  width: 30px;
  align-self: center;
}
#deleteImgBtn {
  width: 30px;
  height: 30px;
  align-self: center;
}
.deleteStaffLabelDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
.deleteStaffLabelDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-self: center;
}
.deleteStaffLabel {
  font-size: large;
  font-weight: 800;
  align-self: center;
  color: #000000;
  width: 120px;
}
.deleteStaffInputDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 3%;
  margin-right: 2%;
}
.deleteStaffInputDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-self: center;
}
#deleteStaffInput {
  align-self: center;
}

/*----------------------------------------------------------STAFF TABLE ---------------------- -----------------------------------------*/

.staffTableDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  width: 100%;
}
#staffTable {
  align-self: center;
  border: 2px solid black;
  border-collapse: collapse;
  display: table;
  min-height: 50px;
}
#staffTable tr {
}
#staffTable tr td {
  border-top: 1px solid black;
  width: 10%;
}
#staffTable tr td p {
  text-align: center;
  height: 2px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.staffTableField {
  font-size: medium;
  font-weight: 600;
}

/*----------------------------------------------------------STAFF Add New Member ---------------------- -----------------------------------------*/

.addStaffDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.addStaffDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  align-self: center;
}
.addStaffForm {
  align-self: center;
}
.addStaffTitle {
  font-size: x-large;
  font-weight: 800;
  align-self: center;
}
.addStaffTitleDiv2 {
  margin-left: 3%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  align-self: center;
}
.addStaffTitleDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

#addStaffMemberTable {
  margin-top: 5%;
  margin-left: 3%;
}
#addStaffMemberTable tr td {
  width: 150px;
}
.addStaffGenderDiv {
  width: 55.4%;
  margin-bottom: 1%;
  margin-left: 3%;
}
.clearanceLevelDiv {
  margin-left: 3%;
}
.clearanceLevelLabel {
  margin-right: 5%;
  margin-bottom: 25%;
}
.addStaffBtn {
  color: #000000;
  background-color: #00c62f;
  font-size: medium;
  font-weight: 600;
  height: 30px;
  border-radius: 50px;
  border-style: solid;
  border-color: #494c4a;
  margin-left: 50px;
  margin-top: 20px;
}

/**------------------------------------------*/

/*----------------------------------------------------------STAFF Edit Existing Member ---------------------- -----------------------------------------*/

.editStaffDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.editStaffDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  align-self: center;
}
.editStaffDiv3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-self: center;
}
.editStaffForm {
  align-self: center;
}
.editStaffMemberForm {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.editStaffTitle {
  font-size: x-large;
  font-weight: 800;
  align-self: center;
}
.editStaffTitleDiv2 {
  margin-left: 3%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  align-self: center;
}
.editStaffTitleDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
#edit_idTable {
  margin-top: 5%;
  margin-left: 3%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#edit_idTable tr td {
  width: 135px;
}
#editStaffMemberTable {
  margin-left: 3%;
}
#editStaffMemberTable tr td {
  width: 150px;
}
.editdStaffGenderDiv {
  width: 55.4%;
  margin-bottom: 1%;
  margin-left: 3%;
}
.editClearanceLevelDiv {
  margin-left: 3%;
}
.editClearanceLevelLabel {
  margin-right: 5%;
  margin-bottom: 25%;
}
.editStaffBtn {
  color: #000000;
  background-color: #00c62f;
  font-size: medium;
  font-weight: 600;
  height: 30px;
  border-radius: 50px;
  border-style: solid;
  border-color: #494c4a;
  margin-left: 50px;
  margin-top: 20px;
}

.editStaffIdRefreshDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  margin-bottom: 10px;
}
.editStaffIdDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
#edit_id_input {
  align-self: center;
}
.editStaffRefreshDiv {
  margin-left: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
#refresh {
  background-color: #00c62f;
  border-radius: 50px;
  border-style: solid;
  border-color: #494c4a;
  height: 30px;
  align-self: center;
}

/**------------------------------------------*/

/*----------------------------------------------------------STAFF Delete Existing Member ---------------------- -----------------------------------------*/

.deleteStaffDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.deleteStaffDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  align-self: center;
}
.deleteStaffDiv3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-self: center;
}
.deleteStaffForm {
  align-self: center;
}
.deleteStaffMemberForm {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.deleteStaffTitle {
  font-size: x-large;
  font-weight: 800;
  align-self: center;
}
.deleteStaffTitleDiv2 {
  margin-left: 3%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  align-self: center;
}
.deleteStaffTitleDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
/*
#edit_idTable {
    margin-top: 5%;
    margin-left: 3%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
#edit_idTable tr td {
    width: 135px;
}
#editStaffMemberTable {
    margin-left: 3%;
}
#editStaffMemberTable tr td {
    width: 150px;
}
*/
#delete_idTable {
  margin-top: 5%;
  margin-left: 3%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#delete_idTable tr td {
  width: 135px;
}
#deleteStaffMemberTable {
  margin-left: 3%;
}
#deleteStaffMemberTable tr td {
  width: 150px;
}
.deleteStaffGenderDiv {
  width: 55.4%;
  margin-bottom: 1%;
  margin-left: 3%;
}
.deleteClearanceLevelDiv {
  margin-left: 3%;
}
.deleteClearanceLevelLabel {
  margin-right: 5%;
  margin-bottom: 25%;
}
.deleteStaffBtn {
  color: #000000;
  background-color: #00c62f;
  font-size: medium;
  font-weight: 600;
  height: 30px;
  border-radius: 50px;
  border-style: solid;
  border-color: #494c4a;
  margin-left: 50px;
  margin-top: 20px;
}

.deleteStaffIdRefreshDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex: 1 1 auto;
  margin-bottom: 10px;
}
.deleteStaffIdDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
#delete_id_input {
  align-self: center;
}
.deleteStaffRefreshDiv {
  margin-left: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
/*
#refresh {
    background-color: #00c62f;
    border-radius: 50px;
    border-style: solid;
    border-color: #494c4a;
    height: 30px;
    align-self: center;
}
*/

/**-----------------------------------------------PROFILE------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------- -----------------------------------------*/
/*------------------------------------------------------------------------------------------------PROFILE------ -----------------------------------------*/
/*---------------------------------------------------------- Profile ------------------------------------------ -----------------------------------------*/

.profilePicDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.profilePicDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: flex-end;
  margin-right: 5%;
  flex-direction: column;
  width: 90%;
}
.profilePicDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
}
.profilePic {
  width: 100%;
  align-self: center;
  border-style: solid;
  border-radius: 49%;
  border-color: #000000;
}
.profileUsernameLabel {
  align-self: flex-start;
  margin-right: 4%;
}
.profileUsername {
  align-self: flex-end;
}

/*---------------------------------------------------------- Profile Page------------------------------------------ -----------------------------------------*/
.profilePageTitleDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.profilePageTitleDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
}
.profilePageTitle {
  font-weight: 900;
  font-size: xx-large;
}
.profilePageSuccessMsgDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profilePageSuccessMsgDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.profilePageSuccessMsg {
  align-self: center;
  font-size: large;
  font-weight: 400;
}
.profilePageDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 85%;
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: thin;
  border-color: #000000;
  padding-top: 2%;
  padding-bottom: 2%;
}
.profilePagePicDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 55%;
}
.profilePageTableDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  padding-left: 50px;
  padding-top: 3%;
}
.profilePageTableDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.profilePagePicDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  width: 100%;
}
.profilePagePicDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: flex-end;
  flex-direction: column;
  justify-content: center;
  width: 50%;
}
.profilePagePic {
  width: 100%;
  align-self: center;
  border-style: solid;
  border-radius: 10%;
  border-color: #000000;
}
.profilePageChangePic {
  align-self: center;
  text-decoration: none;
  color: #000000;
  font-weight: 600;
  font-size: large;
  padding-top: 2%;
  padding-bottom: 2%;
}
.largeText {
  font-weight: 800;
  font-size: large;
  padding-bottom: 10px;
}
.tableEditLinkDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100px;
  flex-direction: row;
  margin-top: 2px;
  margin-left: 50px;
}
.tableEditLinkDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: space-around;
  height: 100px;
}
.tableEditLinkDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
}
.tableEditLink {
  align-self: center;
  text-decoration: none;
  color: #ffffff;
  font-size: large;
  background-color: #ad0404;
  height: 25px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;

  border-radius: 20px;
  border-style: solid;
  border-width: thin;
}
.profilePagePasswordChangeLink {
  background-color: #a40404;
  color: #ffffff;
  font-size: large;
  font-weight: 400;
  padding: 0px 30px;
  height: 25px;

  border-radius: 20px;
  border-style: solid;
  border-width: thin;
}
.profilePageAddDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  width: 400px;
  margin-top: -3%;
  margin-left: 2%;

  border-style: solid;
  border-width: thin;
  border-color: #000000;
}
.profilePageAddDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
}
.profilePageAddDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: center;
}

.passwordChangeTitleDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.passwordChangeTitleDiv1 {
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: center;
}
.passwordChangeTitle {
  align-self: center;
  font-size: xx-large;
  font-weight: 600;
}
.passwordChangePageDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.passwordChangePageDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.passwordChangeLabel {
  display: inline-flex;
  margin-right: 10px;
}
.passwordChangePasswordField {
  display: inline-flex;
}
.passwordChangeSubmitBtn {
  display: inline-flex;
}
.passwordChangePageDiv2 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/*---------------------------------------------------------- ------------------------------------------------------ -----------------------------------------*/
/*---------------------------------------------------------- Gallery Page------------------------------------------ -----------------------------------------*/
/*---------------------------------------------------------- ------------------------------------------------------ -----------------------------------------*/

.galleryPageDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  clear: both;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-top-style: solid;
  border-top-width: thin;
  border-top-color: #000000;
  border-bottom-style: solid;
  border-bottom-color: #000000;
  border-bottom-width: thin;
  padding-bottom: 5px;
}
.galleryPageDiv1 {
  align-self: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.galleryPageDiv2 {
  align-self: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.galleryPageDiv3 {
  align-self: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.galleryPageDiv4 {
  width: auto;
  height: auto;
  display: block;
  align-self: center;

  padding-top: 15px;
  padding-bottom: 15px;
}
.galleryImageDiv {
  border-style: solid;
  border-width: 2px;
  border-color: #000000;
  float: left;
  width: 215px;
  max-height: 160px;
  align-self: center;

  margin: 4px 4px 4px 4px;
}
.galleryImageDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  flex-direction: column;
}
.galleryImageDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
  height: 160px;
}
.galleryImageDiv3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
}
.galleryImage {
  width: 100%;
  max-height: 160px;
  align-self: center;
}

.galleryPageVideoDiv {
  width: 800px;
  float: left;
  margin-left: 20%;
  margin-right: auto;
  margin-bottom: 15px;
  padding-bottom: 5px;
  padding-top: 5px;
  border-bottom-style: solid;
  border-bottom-color: #000000;
  border-bottom-width: thin;
  border-top-style: solid;
  border-top-color: #000000;
  border-top-width: thin;
}
.galleryVidDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 30px;
}
.galleryVidDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 500px;
}
.galleryPageVid {
  align-self: center;
  width: 100%;
}

.galleryPageVidDiv {
  width: 800px;
  float: left;
  margin-left: 20%;
  margin-right: auto;
}
/*---------------------------------------------------------- Gallery Video------------------------------------------ -----------------------------------------*/

.videoPageDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.videoPageDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
}
.videoPageDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
}
.videoPageDiv3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
}
.videoPageVideo {
  width: 800px;
  height: 250px;
  margin-left: auto;
  margin-right: auto;
}

/*---------------------------------------------------------- Gallery Image Icons------------------------------------------ ----------------------------------------*/
.galleryIconDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  clear: both;
  margin-right: 5%;
}
.galleryAddDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  clear: both;
  margin-right: 20px;
}
.galleryAddDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
}
.galleryAddDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  width: 30px;
}
.galleryAddImg {
  align-self: center;
  width: 100%;
  cursor: pointer;
}
.galleryAddLabelDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  width: 95px;
}
.galleryAddLabel {
  align-self: center;
  width: 100%;
  font-weight: 600;
}

.galleryDeleteDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  clear: both;
}
.galleryDeleteDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
}
.galleryDeleteDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  width: 30px;
}
.galleryDeleteImg {
  align-self: center;
  width: 100%;
}
.galleryDeleteLabelDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  width: 110px;
}
.galleryDeleteLabel {
  align-self: center;
  width: 100%;
  font-weight: 600;
}

/*---------------------------------------------------------- Gallery Uploads in these divs------------------------------------------ ----------------------------------------*/

.galleryAddImagesDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 10px;
  width: 80%;
  margin-left: 15%;
  margin-right: 5%;
}
.galleryAddImagesDiv1 {
  width: 100%;
  border-style: solid;
  border-width: thin;
  border-color: #000000;
  margin-right: 10%;
  padding-left: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.galleryAddImagesDiv2 {
  width: 70%;
}

/*---------------------------------------------------------- Gallery Messages ($result and $error------------------------------------------ ----------------------------------------*/

.galleryMessageDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.galleryMessageDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
}
.galleryMessageDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: center;
}

.galleryAddImgtest {
  width: 5%;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
}

/*---------------------------------------------------------- Gallery Image DELETE------------------------------------------ ----------------------------------------*/

.imageCheckbox {
  position: absolute;
  display: block;
}
input[type="checkbox"] {
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
}
#imageCheckBoxDiv {
  position: absolute;
}
.galleryDeleteImagesBtnDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 10px;
  margin-top: 10px;
}
.galleryDeleteImagesBtnDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 20%;
  align-self: flex-end;
  flex-direction: row;
}
.galleryDeleteImagesBtnDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
}
.galleryDeleteImagesBtnDiv3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
}
#galleryDeleteImagesBtn {
  width: 100%;
  height: 30px;
  border-radius: 50px;
  border-style: solid;
  border-color: #000000;
  border-width: thin;
}

.deletedDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.deletedDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
}
.deletedDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: center;
}

/*-------------------------------------------------------------------------------------------------------------- ----------------------------------------*/
/*---------------------------------------------------------- NEWS PAGE ----------------------------------------- ----------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------- ----------------------------------------*/
.newsPageDiv {
  margin-top: 30px;
  float: left;
  margin-left: 0%;
  width: 60%;
  margin-bottom: 2%;
  height: 1000px;
  overflow-y: scroll;
}
.newsPageFeedDiv {
  width: 100%;
  margin-left: 0%;
  margin-bottom: 20px;
}
.newsPageImageDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  flex-direction: column;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: 350px;
  justify-content: center;

  background-color: #555555;
}
.newsPageImageDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
  width: 95%;
  height: 300px;
  background-color: #555555;
  justify-content: center;
}
.newsPageImageDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  width: 95%;
  height: 300px;
  background-color: #555555;
}
.newsPageImageDiv3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: center;
  width: 95%;
  height: 300px;
  background-color: #555555;
}
.newsPageImage {
  max-width: 100%;
  max-height: 300px;
  align-self: center;
  border-style: solid;
  border-width: medium;
  border-color: #ffffff;
}

/*-------------------------------------------NEWS TITLE------------------------------------*/
.newsPageTitleDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: 40px;
  background-color: #7d7d7d;
}
.newsPageTitleDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: center;
}
.newsPageTitle {
  align-self: center;
  width: 100%;
  height: 20px;
  color: #ffffff;
  font-size: large;
  font-weight: 600;
}

/*-------------------------------------------NEWS MESSAGE------------------------------------*/
.newsPageMsgDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  background-color: #555555;
}
.newsPageMsgDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: center;
  width: 95%;
  background-color: #555555;
}
.newsPageMsgDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  background-color: #555555;
}
.newsPageMsgDiv3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  background-color: #555555;
}
.newsPageMsg {
  align-self: center;
  width: 100%;
  color: #ffffff;
  font-size: medium;
  font-weight: 400;
}
/*-------------------------------------------NEWS INSERT new update------------------------------------*/

.newsPageInsertDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 5%;
}
.newsPageInsertDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: flex-start;
  flex-direction: column;
  justify-content: center;
}
.newsPageInsertDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: flex-start;
  flex-direction: row;
  justify-content: center;
}
.newsPageInsertDiv3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: center;
}
/*-------------------------------------------NEWS Profile Bit------------------------------------*/

.newsPageProfileDiv {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.newsPageProfileDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: flex-start;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  background-color: #434343;
  margin-right: 20px;
}

.newsPageProfileImgDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 35px;
  height: 35px;
  margin-left: 20px;
  flex-direction: column;
  justify-content: center;
  background-color: #555555;
}
.newsPageProfileImgDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: center;
  background-color: #555555;
}
.newsPageProfileImgDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  background-color: #555555;
}
.newsPageProfileImg {
  width: 100%;
  align-self: center;
}

.newsPageProfileNameDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 4px;
  background-color: #434343;
}
.newsPageProfileNameDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: flex-start;
  background-color: #434343;
}
.newsPageProfileName {
  align-self: center;
  color: #ffffff;
  font-size: small;
  font-weight: 200;
}
.newsPageTimeDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-self: flex-end;
  float: right;
  margin-right: 0%;
  margin-left: auto;
  margin-right: 10px;
}
.newsPageTimeDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.newsPageTime {
  color: #ffffff;
  font-size: small;
  font-weight: 200;
}
/*-------------------------------------------NEWS PAGE logo------------------------------------*/

.newsPageLogoDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 25%;
  margin-left: 71.5%;
  margin-top: 5%;
}
.newsPageLogoDiv1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: center;
}
.newsPageLogoDiv2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: center;
}
.newsPageLogo {
  align-self: center;
  width: 100%;
}
/*------------------------------------------------------------------------News Page Insert---------------------------------------------------------------*/
.newsPageInsertImageDiv {
  cursor: pointer;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#newsPageInsertImageTitle {
  padding: 5px 20px;
  background-color: #ad0404;
  color: whitesmoke;
  font-size: large;
  font-weight: 600;
  cursor: pointer;
  border-radius: 50px;
  border-style: solid;
  border-width: thin;
  border-color: #000000;
  align-self: center;
}
.newsPageInsertImageTitleDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 5%;
  margin-top: 50px;
}
.newsPageInsertImageDiv1 {
  display: none;
}
.newsPageInsertImageDiv2 {
  width: 200%;
  border-bottom-style: solid;
  border-top-style: solid;
  margin-bottom: 20px;
}
.newsPageTextArea {
  width: 300%;
  margin-top: 5px;
}
.news_upload_btn {
  margin-top: 5px;
  font-size: medium;
  font-weight: 600;
  background-color: #ad0404;
  color: #ffffff;
  padding: 5px 20px;
  border-radius: 50px;
  border-style: solid;
  border-width: thin;
  border-color: #000000;
}
.newsCheckbox {
  position: absolute;
  display: block;
  margin-left: -30px;
}
#newsCheckBoxDiv {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.newsDeleteBtnDiv {
  float: left;
  clear: left;
  width: 60%;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;

  margin-bottom: 100px;
}
.newsDeleteBtn {
  width: 150px;
  height: 40px;
  font-weight: 400;
  font-size: large;
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------REVIEWS & ANIMATIONS----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------*/

.reviewTitleDiv {
  margin-top: 3%;
}

.mainReviewDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  margin-top: 5%;
  margin-bottom: 10%;
  width: 100%;
  position: relative;
}
.bubbleDiv {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#spchBubble {
  width: 20%;
}
.speechBubbleDiv {
  width: 20%;
  border-style: solid;
  border-color: #777777;
}
.buttonDiv {
  flex-direction: row;
  align-self: center;
  z-index: 9999;
}
.leftArrow {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50px;
  border-style: dotted;
  z-index: 9997;
}
.rightArrow {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50px;
  border-style: dotted;
  z-index: 9996;
}

.reviewByDiv {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 100px;
}
.reviewFaceDiv {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 100px;
}
.reviewFaceImg {
  align-self: center;
  width: 100%;
}

.bigText {
  font-weight: 600;
  font-size: x-large;
  transition: font-weight 0.2 ease, font-size 0.2 ease;
}
.bigTextChange {
  font-weight: 200;
  font-size: medium;
  transition: all 0.2 ease;
}
.bigTextChange2 {
  font-weight: 200;
  font-size: medium;
  transition: all 0.2 ease;
}

#animatedDiv {
}
.animatedDiv {
  position: relative;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: -10%;
}
.animatedDivLeft {
  position: absolute;
  width: 18%;
  left: 14%;
  transition: left;
}
.animatedDivLeftChange {
  left: -20%;
  transition: left 0.2s ease;
}
.animatedDivLeftChange2 {
  left: 40.5%;
  transition: left 0.2s ease;
}
.animatedDivCentre {
  position: absolute;
  width: 18%;
  left: 40.5%;
  transition: left;
}
.animatedDivCentreChange {
  left: 14%;
  transition: left 0.2s ease;
}
.animatedDivCentreChange2 {
  left: 67.5%;
  transition: left 0.2s ease;
}
.animatedDivRight {
  position: absolute;
  width: 18%;
  left: 67.5%;
  transition: left;
}
.animatedDivRightChange {
  left: 40.5%;
  transition: left 0.2s ease;
}
.animatedDivRightChange2 {
  left: 101%;
  transition: left 0.2s ease;
}
.rightArrow:hover {
  background-color: #ad0404;
}
.leftArrow:hover {
  background-color: #ad0404;
}
.reviewsBlackStrip {
  width: 6%;
  height: 200px;
  position: absolute;
  left: 33.5%;
  margin-top: -2%;
  background-color: #000000;
  z-index: 9999;
}
.reviewsBlackStrip2 {
  width: 6%;
  height: 200px;
  position: absolute;
  left: 60.2%;
  margin-top: -2%;
  background-color: #000000;
  z-index: 9998;
}
.reviewsBlackStrip3 {
  width: 12.5%;
  height: 200px;
  position: absolute;
  left: 0%;
  margin-top: -2%;
  background-color: #000000;
  z-index: 9995;
}
.reviewsBlackStrip4 {
  width: 13%;
  height: 200px;
  position: absolute;
  left: 87%;
  margin-top: -2%;
  background-color: #000000;
  z-index: 9994;
}

/*--------------------------------------------------------Reviews Page----------------------------------------------------------*/

.reviewsPageDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.reviewsPageDiv1 {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.reviewsPageIconsDiv {
  align-self: flex-end;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.reviewsPageAddDiv {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.reviewsPageAddDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.reviewsPageAdd {
  align-self: center;
  width: 100%;
}
.reviewsPageTableTitles {
  text-align: center;
  font-weight: 600;
  font-size: large;
}
.reviewsPageTableContents {
  text-align: center;
}
.reviewsPageDeleteDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
}
.reviewsPageDeleteDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.reviewsPageDelete {
  align-self: center;
}

/*-------------------------------------------------------------Add Review Page------------------------------------------------------------*/
.addReviewPageDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.addReviewPageDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.addReviewPageTable {
  align-self: center;
}
.addReviewTableTitle {
  width: 300px;
}
.addReviewTableLabel {
  text-align: center;
}
.addReviewTableData {
  width: 500px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.addReviewTableText {
  width: 500px;
}
.addReviewTableSubmit {
  align-self: center;
}

/*-------SHOP------------------------------------------------------------------------------------------------------------------------------------SHOP---*/
/*---------------------------------------------------------------------------------------------SHOP-----------------------------------------------------*/
/*-------------------------------------------------------------------------SHOP----------------------------------------------------------------*/
/*-------------------------------------------SHOP-------------------------------------------------------------------------------------------*/
/*SHOP------------------------------------------------------------------------------------------------------------------------------SHOP-----------------*/
/*-------*/

.shopSectionDiv {
  width: 30%;
}
.shopDiv {
  width: 500px;

  display: block;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;

  margin-bottom: 20px;
}
.shopDivToolTip {
  position: relative;
  display: inline-block;
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}
.shopDiv:hover .shopDivToolTip {
  visibility: visible;
}
.shopSectionDiv1 {
  /*margin-top: -15%;*/
  padding-left: 15%;
  /*padding-bottom: 5%;*/
  /*z-index: 99998;*/
}
.shopSectionImg {
  width: 100%;
  height: 100px;
  /*z-index: 99999;*/
  border-style: solid;
  border-width: thin;
}
.shopItemsDivClass {
  width: 100%;
  display: none; /*------------------------------------display:none*/
}
.shopItemsDivClass1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: inherit;
}
.shopItemsDivClass2 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: inherit;
  overflow: hidden;
}

.shopItemsDivClass2 ul {
  list-style: none;
  width: inherit;
  display: flex;
  justify-content: flex-start;
  overflow-y: hidden;
  overflow-x: auto;

  background-color: #999999;
  border-style: solid;
  border-width: thin;
  border-color: #777777;
}

.shopItemsDivClass2 ul li {
  align-self: center;
  display: inline-block;
  border-style: solid;
  border-width: medium;
  border-color: #f9f9f9;
  color: #ffffff;
  box-shadow: 0px 0px 15px;
  min-width: 200px;
  height: 175px;
  margin: 10px 0px;
  margin-left: 15px;
  margin-right: 15px;
  padding: 0px 4px;

  background-color: #000000;
}

.shopSectionTitle {
  font-size: large;
  font-weight: 400;
  width: 50%;
  margin-left: 15%;
  /*margin-top: -10%;*/
  cursor: pointer;
}
.shopSectionDescription {
  font-size: small;
  font-weight: 200;
  /*margin-top: -10px;*/
  width: 50%;
  cursor: pointer;
  margin-left: 15%;
}

/* -------------------------------------------------------- */
.shopPageDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
.shopPageDiv1 {
  align-self: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.shopPageMsgDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.shopPageMsgDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  width: 500px;
  justify-content: flex-start;
}
.shopPageMsg {
  align-self: center;
  font-size: large;
  font-weight: 600;
}
.shopItemImgDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.shopItemImgDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 175px;
}
.shopItemImgDiv2 {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.shopItemImg {
  align-self: center;
  width: 100%;
  max-width: 200px;
  max-height: 175px;
}
.shopItemPriceDiv {
  position: absolute;
  top: 100px;
  left: 115px;
}
.shopItemPrice {
  align-self: center;
  font-weight: 600;
  font-size: xx-large;
  color: #ffffff;
  background-color: #979797;
  opacity: 0.8;
  border-radius: 15px;
  padding-left: 5px;
  padding-right: 5px;
}

/*---------------------------------------------------------- ITEM PAGE -----------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/
.itemPageDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.itemPageDiv1 {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.itemTopDiv {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.itemBottomDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
  margin-left: 5%;
}
.itemImgDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 35%;
  margin-left: 5%;
  max-height: 400px;
  border-style: solid;
  border-width: medium;
  border-color: #555555;
}
.itemImgDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.itemImg {
  align-self: baseline;
  max-height: 400px;
  width: 100%;
}
.itemDetailsDiv {
  width: 15%;
  margin-left: 5%;
  margin-top: 50px;
  max-height: 300px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.itemDetailsDiv1 {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.itemNameDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0px 20px;
}
.itemName {
  align-self: center;
  font-size: xx-large;
  font-weight: 800;
}
.itemSerialDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 5px 20px;
}
.itemSerial {
  display: flex;
  flex-direction: row;
  align-self: center;
  font-size: small;
  font-weight: 400;
}
.itemPriceDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 5px 20px;
}
.itemPrice {
  align-self: center;
  font-size: xx-large;
  font-weight: 900;
  color: #ffffff;
  background-color: #000000;
  opacity: 0.7;
  border-radius: 20px;
  padding: 10px 10px;
}
.itemQtyDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 5px 20px;
}
.itemQty {
  align-self: center;
  font-size: large;
  color: darkred;
  font-weight: 600;
}
.itemDescDiv {
  margin-top: 2%;
}
.itemDescDiv1 {
  height: 100px;
  overflow-y: scroll;
}
.itemDesc {
  font-size: large;
  font-weight: 400;
}

.itemPurchaseBtnDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 15%;
  margin-left: 1%;
  margin-right: 4%;
}
.itemPurchaseBtnDiv1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  height: 150px;
  border-style: dashed;
  border-radius: 80px;
  background-color: darkgreen;
  border-style: solid;
  border-width: thin;
  border-color: #000000;
  cursor: pointer;
}
.itemPurchaseBtn {
  display: flex;
  justify-content: center;
  font-weight: 800;
  font-size: x-large;
  color: #ffffff;
  width: 150px;
  padding: 5px 5px;
}
.itemSoldOutBtnDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 15%;
  margin-left: 1%;
  margin-right: 4%;
}
.itemSoldOutBtnDiv1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  height: 150px;
  border-style: dashed;
  border-radius: 80px;
  background-color: darkred;
  border-style: solid;
  border-width: thin;
  border-color: #000000;
}
.itemSoldOutBtn {
  display: flex;
  justify-content: center;
  font-weight: 800;
  font-size: x-large;
  color: #ffffff;
  width: 150px;
  padding: 5px 5px;
}
.itemToShopLinkDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
}
.itemToShopLink {
  align-self: center;
  text-align: center;
  font-size: large;
  font-weight: 600;
}

/*----------------------------------------------------MINI BAR SHOPPING CART DETAILS MINI BAR---------------------------------------------*/

.miniBarDiv {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

  border-radius: 8px;

  padding-right: 20px;
  margin-bottom: 16px;
}
.miniBarCartDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50px;
  margin-left: 15px;
  margin-right: 1%;
  align-items: center;
  padding: 10px 5px 5px 0;
  border-radius: 8px;
  box-shadow: 4px 4px 8px #111111;
}
.miniBarCartDiv a {
  display: flex;
}
.miniBarCartDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
}
.miniBarCart {
  width: 100%;
  align-self: center;
}
.miniBarCartSize {
  color: #000000;
  font-size: medium;
  font-weight: 600;
  background-color: #f9f9f9;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;

  display: flex;
  justify-content: center;
  margin: 0;
  padding: 2px 4px;
  position: absolute;
  left: 55%;
  top: 20%;
  transform: translate(-50%, -50%);
}
.miniBarCartSize1 {
  color: #000000;
  font-size: medium;
  font-weight: 600;
  width: fit-content;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  padding: 2px 4px;
  margin: 0;
  position: absolute;
  left: 55%;
  top: 20%;
  transform: translate(-50%, -50%);
}
.miniBarCheckoutLinkDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.miniBarCheckoutLinkDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 5px 5px;
  margin-left: 15px;
  margin-right: 15px;
  background-color: #c1c1c1;
  border-color: #505050;
  border-style: solid;
  border-width: thin;
  border-radius: 5px;
  height: 30px;
}
.miniBarCheckoutLink {
  align-self: center;
  color: #202020;
  font-size: large;
  font-weight: 600;
}

/*--------------------------------------------------------------CART----------------------------------------------------------------*/
.cartConsoleDiv {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.cartDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-left: 5%;
  margin-top: 5%;
  width: 50%;
}
@media screen and (max-width: 470px) {
  .cartDiv {
    flex-direction: column;
  }
}
.cartListDiv {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.cartListDiv1 {
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: center;
}
.cartListTotalDiv {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.cartListTotalDiv1 {
  display: flex;
  align-self: center;
  flex-direction: row;
  justify-content: center;
}
.cartList {
}
.cartDeleteImgDiv {
  width: 30px;
  display: flex;
  margin-left: 10px;
}
.cartDeleteImgDiv1 {
}
.cartDeleteImg {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.cartDeleteTblImgDiv {
  width: 20px;
  height: 20px;
  display: flex;
  margin-left: 10px;
}
.cartTable {
  align-self: flex-start;
  width: 100%;
  /*border-collapse: separate;*/
  border-spacing: 25px;
  border-style: solid;
  border-width: medium;
  border-color: #575757;
}
.cartTable tr td {
  text-align: right;
}
.cartQty {
  font-size: large;
  font-weight: 600;
  display: inline;
}
.cartTotalTable {
  margin-left: 10px;
  align-self: center;
  /*border-collapse: separate;*/
  border-spacing: 25px;
  border-style: solid;
  border-width: medium;
  border-color: #575757;
}
.cartTotalTable tr td {
  text-align: right;
}
.cartTotalTableData {
  font-size: large;
  font-weight: 600;
  white-space: nowrap;
}
.cartTotalDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 0%;
  width: 20%;
  margin-top: 5%;
}
.cartTotalDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #f7f7f7;
  border-style: outset; /*--------------------border--------------------------------*/
  border-color: #515151;
}
.cartTotalDiv2 {
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: center;
}
.cartTotalDiv3 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 25px;
  /*
    background-color: #f7f7f7;
    border-style: outset;
    border-color: #515151;
    */
}
.cartTotalToPayTable {
  align-self: center;
  display: flex;
  padding: 10px 10px;
}
.cartTotalToPayTable > tr {
}
.cartTotalToPayTable tr td {
  font-size: large;
  font-weight: 600;
  width: 100px;
  height: 40px;
  text-align: center;
}
.tinyText {
  align-self: center;
  font-size: small;
  font-weight: 100;
  padding: 2px 5px;
}
.deliveryAddressDiv {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 20%;
  margin-left: 0%;
  margin-top: 5%;
}
.deliveryAddressDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.deliveryAddressTable {
  align-self: flex-start;
}
.deliveryAddressTableData {
  font-size: large;
  font-weight: 800;
  padding: 10px 5px;
}
.deliveryAddressTitle {
  align-self: center;
  display: flex;
  justify-content: center;
  font-size: x-large;
  font-weight: 900;
}
.customPaypalBtn {
  align-self: center;
  background-color: #ffc439; /*paypal gold*/
  width: 242px;
  height: 50px;
  color: #003087;
  font-size: medium;
  font-weight: 800;
  text-align: center;
  border-style: solid;
  border-width: medium;
  border-color: #ffffff;
  border-radius: 10px;
  margin-top: 40px;
}
.paypal {
  display: flex;
  justify-content: center;
}
/*--------------------------------------------------------------INVENTORY----------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------*/

.inventoryTitleDiv {
  clear: right;
}
.inventoryTitleDiv1 {
}
.inventoryTitle {
  font-size: x-large;
  font-weight: 900;
  text-align: center;
}
.inventoryDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 300px;
}
.inventoryDiv1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
.inventoryCategoryDiv {
  width: 500px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  border-style: solid;
  border-color: #505050;
  border-width: thin;

  margin-bottom: 20px;
}
.inventoryCategoryDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: -1;
}
.inventoryCategory {
  align-self: center;
  width: 75px;
  text-align: center;
}
.inventoryCategoryCheckbox {
  align-self: center;
  margin-bottom: 40px;
}
.inventoryItemDivClass {
  display: none;
}
.inventoryItemDivClass ul {
  list-style: none;
}
.inventoryItemDivClass1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inventoryItemDivClass2 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 200%;
  margin-left: -50%;

  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #505050;
  margin-bottom: 30px;
  padding-bottom: 10px;
}
.inventoryItemDiv {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.inventoryItemDiv1 {
}
.inventoryItemImageDiv {
  display: flex;
  height: 100px;
  flex-direction: column;
  justify-content: center;
}
.inventoryItemImageDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100px;
}
.inventoryImage {
  align-self: center;
  width: auto;
  height: 100%;
  max-width: 100%;
}
.inventoryItemDiv1 ul li {
}
.inventoryItemDescription {
  overflow-y: scroll;
  margin-left: 15px;

  border-style: solid;
  border-color: #595959;
}
.inventoryItemDescription1 {
  width: 150px;
  height: 50px;
}
.inventoryItemDescriptionP {
}
.inventoryItemTable {
  margin-left: 25px;
}
.inventoryItemTable tr td {
  width: 100px;
}
.inventoryItemEditBtnDiv {
  margin-left: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inventoryItemEditBtnDiv1 {
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: center;
}
.inventoryItemEditBtn {
  width: 100%;
  align-self: center;
}
/*----------------------------------------------DELETE CATEGORY-------------------------------------------------------*/
.deleteInventoryDeleteBtnDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.deleteInventoryDeleteBtnDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.deleteInventoryDeleteBtn {
  align-self: center;
  width: 300px;
  color: #ffffff;
  font-size: large;
  font-weight: 600;
  background-color: #660000;
  padding: 7px 10px;
  border-radius: 30px;
  margin-bottom: 300px;
}
/*----------------------------------------------INVENTORY ITEM--------------------------------------------------------*/

.inventItemImageDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  width: 100%;
}
.inventItemImageDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 200px;
}
.inventItemImage {
  width: auto;
  height: 100%;
  max-width: 100%;
}
.inventItemUpdateImageBtnDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-top: 5px;
}
.inventItemUpdateImageBtnDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-radius: 75px;
  min-width: 175px;
  height: 25px;
  background-color: #ad0404;
  border-style: solid;
  border-width: thin;
  border-color: #505050;
}
.inventItemUpdateImageBtn {
  align-self: center;
  font-size: large;
  font-weight: 900;
  color: #f9f9f9;
}
.inventItemTableDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 25px;
}
.inventItemTableDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.inventItemTable {
  align-self: center;
}
.inventItemDesc {
  height: 200px;
  width: 200px;
}
.inventItemTextArea {
  height: 200px;
  width: 173px;
}
.BoldXLarge {
  font-size: x-large;
  font-weight: 900;
}
.BoldLarge {
  font-size: large;
  font-weight: 800;
}
.inventItemUpdateBtnDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-top: 25px;
}
.inventItemUpdateBtnDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-radius: 75px;
  min-width: 175px;
  height: 75px;
}
.inventItemUpdateBtn {
  align-self: center;
  background-color: #ad0404;
  border-color: #ad0404;
  color: aliceblue;
  font-size: large;
  border-style: solid;
  padding: 10px 15px;
  border-radius: 50px;
}
#inventItemUploadImageDiv {
  display: none;
}
.inventUploadDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inventUploadDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.inventUploadDiv2 {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  border-style: solid;
  border-width: thin;
  border-color: #505050;

  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
.inventItemDeleteBtnDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 500px;
  margin-bottom: 100px;
}
.inventItemDeleteBtnDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.inventItemDeleteBtn {
  align-self: center;
  width: 250px;
  height: 100px;
  background-color: #aa0000;
  color: #ffffff;
  font-size: large;
  font-weight: 600;
  border-radius: 50px;
  border-style: solid;
  border-color: #6f0000;
  border-width: thick;
}
.itemInventDeleteBtnDirectionDiv {
  display: flex;
  justify-content: center;
  align-items: center;
}
.inventoryAddImgDiv {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 30%;

  border-style: dashed;
  border-color: rebeccapurple;
}
.inventoryAddImgDiv1 {
  align-self: center;
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 20px;
}
.inventoryAddImg {
  align-self: center;
  width: 100%;
  height: 50px;
}
.inventoryAddP {
  font-size: medium;
  font-weight: 600;
  text-decoration: none;
  color: #000000;
}
.inventoryDeleteImgDiv {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 25px;
  width: 30%;

  border-style: dashed;
  border-color: red;
}
.inventoryDeleteImgDiv1 {
  align-self: center;
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 20px;
}
.inventoryDeleteImg {
  align-self: center;
  width: 100%;
  height: 50px;
}
.inventoryDeleteP {
  font-size: medium;
  font-weight: 600;
  text-decoration: none;
  color: #000000;
}

.addCategoryDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.addCategoryDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.addCategoryTable {
  align-self: center;
  border-spacing: 6px;
}
.addCategoryTD {
  font-size: large;
  font-weight: 600;
}
.addCategorySubmit {
  font-size: large;
  font-weight: 800;
  height: 50px;
  width: 250px;
  background-color: #700000;
  border-radius: 50px;
  color: #ffffff;
}
.addCategorySubmitDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.inventoryItemAddImgDiv {
  /*width is tied with .inventoryCategoryDiv*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 30px;
  margin-bottom: 20px;
  width: 500px;
}
.inventoryItemAddImgDiv1 {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30px;
}
.inventoryItemAddImg {
  align-self: center;
  width: 100%;
}
.inventoryItemAddImgP {
  width: 200px;
  align-self: center;
  margin-left: 10px;
}

#inventItemAddImageDiv {
  display: none;
}
.addNewInventItemDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.addNewInventItemDiv1 {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.inventAddItemTextArea {
  height: 100px;
  width: 175px;
}

.inventItemAddImageBtnDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 25px;
  background-color: #660000;
  width: 250px;
  height: 75px;
  padding: 5px 10px;
  border-radius: 60px;
  cursor: pointer;
}
.inventItemAddImageBtnDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.inventItemAddImageBtn {
  align-self: center;
  color: #ffffff;
  font-size: large;
  font-weight: 400;
}
.inventAddDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;

  border-style: solid;
  border-width: thin;
  border-color: #595959;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 25px;
}
.inventAddDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.inventAddDiv2 {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.inventItemAddBtnDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  cursor: pointer;
}
.inventItemAddBtnDiv1 {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inventItemAddBtnP {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.inventItemAddBtn {
  align-self: center;
  font-size: medium;
  font-weight: 600;
  background-color: #660000;
  color: #ffffff;
  width: 200px;
  height: 50px;
  border-radius: 25px;
}

.inventAddItemImageDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 300px;
}
.inventAddItemImageDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 300px;
}
.inventAddItemImage {
  align-self: center;
  width: 100%;
}

/*-------------------------------------------------------------SHOP BY TABS-----------------------------------------------------------*/

.tabDiv {
  align-self: center;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tabDiv button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tabDiv button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tabDiv button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 8px;
}
.tabcontent a {
  display: inline-flex;
  height: fit-content;
}

.tabBtn {
  font-size: large;
  font-weight: 600;
  padding-left: 20px;
  padding-right: 20px;
}
.tabsDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.tabsDiv1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
.tabsCategoryDiv {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #000000;
  border-radius: 8px;
}
.tabsCategoryDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
.tabsItmDiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 96%;
  background-color: #000000;
  border-radius: 35px;
}
.tabsItemDiv {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;

  width: 300px;
  height: 300px;
  margin: 4px 2px;

  border-radius: 8px;

  border-style: solid;
  border-color: #171717;

  background-color: #ffffff;

  position: relative;
}
.tabsItemDiv1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tabsItemImg {
  align-self: center;
  width: 100%;
  max-height: 90%;
  border-radius: 4px;
}
.tabsItemNameDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tabsItemNameP {
  align-self: flex-start;
  font-size: xx-large;
  font-weight: 600;
  margin-bottom: -10px;
  color: #2f2f2f;
  position: absolute;
  left: 25px;
  top: 225px;
}
.tabsItemPriceP {
  align-self: flex-end;
  text-align: right;
  font-size: x-large;
  font-weight: 600;

  margin-right: 3px;
  color: #ffffff;
  background-color: #575757;
  border-radius: 8px;
  border-style: solid;
  border-color: #ffffff;
  border-width: thin;
  padding: 5px 10px;

  position: absolute;
  left: 190px;
  top: 200px;
}
.tabsWelcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #000000;
  border-radius: 8px;
}
.tabsWelcomeH {
  text-align: center;
  color: #ffffff;
}
.tabsWelcomeP {
  align-self: center;
  padding: 30px 30px;
  font-weight: 600;
  font-size: x-large;
  text-align: center;
  color: #ffffff;
}
.tabsWelcomeImgDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tabsWelcomeImgDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 200px;
}
.tabsWelcomeImg {
  align-self: center;
  width: 100%;
}

/*---------------------------------------------tabs Animation----------------------------------------*/
.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*---------------------------------------------------------------ORDERS--------------------------------------------------------------*/

.numOfOrdersSpan {
  padding: 2px 7px;
  color: #ffffff;
  background-color: #000000;
  font-weight: 600;
  font-size: large;
  border-radius: 25px;
}

.orderTitleDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.orderTitleDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.orderTitleP {
  align-self: center;
  font-size: xx-large;
  font-weight: 900;
  text-align: center;
}
.orderTableDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.orderTableDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.orderTable {
  align-self: center;
  border-style: solid;
  border-color: #000000;
  border-width: thin;
  padding: 10px 10px;
}
.orderTableFirstRow {
  border-bottom-style: solid;
  border-bottom-color: #575757;
  border-bottom-width: thin;
}
.orderTable tr td {
  text-align: center;
  width: 200px;
  height: 50px;
}

.pending {
  width: 100%;
  background-color: #660000;
  color: #ffffff;
  font-weight: 400;
  font-size: medium;
  padding: 10px 20px;
}
.dispatched {
  background-color: #228b22;
  color: #ffffff;
  font-weight: 400;
  font-size: medium;
  padding: 10px 20px;
}
.orderDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.orderImageDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 300px;
}
.orderImageDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 400px;
}
.orderImage {
  align-self: center;
  width: 100%;
}
.orderDetailsDiv {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.orderDetailsDiv1 {
  display: flex;
  flex-direction: row;
}
.orderDetailsDiv11 {
  width: 200px;
}
.orderDetailsDiv12 {
  width: 350px;
}
.orderDetailsDiv11 ul {
  list-style: none;
}
.orderDetailsDiv12 ul {
  list-style: none;
}
.orderDetailsDiv11 ul li {
  margin-bottom: 20px;
  font-size: large;
  font-weight: 600;
}
.orderDetailsDiv12 ul li {
  margin-bottom: 20px;
  font-size: large;
  font-weight: 600;
}

.orderDetailsDispatchDiv {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.orderDetailsDispatchDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.orderDetailsDispatchPp {
  padding: 25px 40px;
  background-color: #660000; /*red would be #660000, green would be #228B22  */
  color: #ffffff;
  font-size: x-large;
  font-weight: 600;
  border-radius: 50px;
}
.orderDetailsDispatchPd {
  padding: 25px 40px;
  background-color: #228b22; /*red would be #660000, green would be #228B22  */
  color: #ffffff;
  font-size: x-large;
  font-weight: 600;
  border-radius: 50px;
}

/*--------------------------------------------------------------------PREFERENCES------------------------------------------------------------*/

.preferencesDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.preferencesDiv1 {
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.preferencesTable {
  align-self: center;
  width: 400px;

  border-style: solid;
  border-color: #505050;
  border-width: medium;
}
.deliveryEditImg {
  width: 25px;
  border-style: solid;
  border-color: #000000;
  border-width: thin;
  border-radius: 50px;
}