/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:ms;
}


/*============================================================================================*/
/*============================================================================================*/
/*============================================================================================*/
/*============================================================================================*/
/*============================================================================================*/
/*============================================================================================*/
/*============================================================================================*/
/*============================================================================================*/
/*============================================================================================*/



/* - - - - - - - - - - FROM HERE THIS IS ALL ME - - - - - - - - - - */
/*Name strip with StyleMonitor in it at the top of the page*/
.ns{
  position: absolute;
  top: 0.2%;
  height: 6.5%;
  left: 0.5%;
  width: 94%;
  /* padding-left:10%; */
  border-radius: 0% 0% 0% 0%;/*top left - tr - br - bl*/
  /* background-image:linear-gradient(to left, #f8f0e5, #990000); */
  padding-right: 5%;
  background-image:linear-gradient(to right, #f8f0e5, #2ea677);
  /* background-image:linear-gradient(to right, #f8f0e5, #990000); */
  color: antiquewhite;
  /* font-family: Times */
  font-family: Candara, Calibri, Verdana;
  font-size: 250%;
  /* text-align: right; */
  text-align: right;
  text-indent: 5%;
}

/*Login strip with the login buttons in it*/
.ls{
  position: absolute;
  top: 7%;
  left: 0.5%;
  width: 95%;
  height: 3.5%;
  padding-left: 1%;
  padding-right: 3%;
  border-radius: 15px 0px 10px 0px;
  background-color: #ded4d4;
  color: antiquewhite;
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  text-align: right;
  line-height: 3.5%;
}

/*Log In input boxes*/
.LIin{
  position: relative;
  float:left;
  width: 10%;
  height: 80%;
  margin: 3px 3px 2px 3px;
  background-color:antiquewhite;
  text-indent: 5%;
  cursor:pointer;
}


/*Log In buttons within the login strip*/
.LIbtn{
  position: relative;
  float:left;
  width: 7%;
  height: 80%;
  border-radius: 15px;
  margin: 3px 3px 2px 3px;
  background-color:#7fed98;
  cursor:pointer;
}

/*Log In buttons within the login strip*/
.FLIbtn{
  position: relative;
  float:left;
  width: 7%;
  height: 80%;
  border-radius: 15px;
  margin: 3px 3px 2px 3px;
  background-color:#ed7f7f;
  cursor:pointer;
}

/*Log Out button in the login strip*/
.LObtn{
  width: 7%;
  height: 80%;
  margin: 3px 3px 2px 3px;
  background-color: crimson;
}

/*Middle section with all the other things in it*/
.ms{
  position: absolute;
  top: 11%;
  height: 3%;
  left: 12.7%;
  width: 68.7%;
  border-radius: 15px 0px 0px 0px;
}

/*Middle section data container*/
.msdc{
  position: fixed;
  top: 14.1%;
  height: 78.7%;
  left: 12.7%;
  width: 68.7%;
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  text-align: center;
}

/*Middle section wrapper*/
.msw{
  position: absolute;
  z-index: 0;
  top: .5%;
  left: .5%;
  width: 99%;
  height: 99%;
  background-color: #f2910f;
  color: #000;
}

/*Middle section header labels*/
.mswhl{
  display: inline-block;
  width: 15%;
  height: 80%;
  padding-top: 0.5%;
  border-radius: 15px 15px 0px 0px;
  color: black;
  background-color: #c7c7c7;
  font-size: 90%;
  text-decoration: none;
  text-align: center;
}

/*Middle section header labels HOVER*/
.mswhl:hover{
  background-color: #f1f1f1;
  border-bottom:medium solid #f1f1f1;
}

/*Middle section header labels ACTIVE*/
.mswhl:active{
  color:black;
}

/*Middle section NEW header labels half width*/
.mswhNEWtab{
  display: inline-block;
  width: 7.5%;
  height: 80%;
  padding-top: 0.5%;
  border-radius: 15px 15px 0px 0px;
  background-color: #c7c7c7;
  color: black;
  font-size: 90%;
  text-decoration: none;
  text-align: center;
}

/*Middle section header labels half width*/
.mswhlNEW{
  display: inline-block;
  width: 5%;
  height: 80%;
  padding-top: 0.5%;
  border-radius: 15px 15px 0px 0px;
  background-color: #c7c7c7;
  color: black;
  font-size: 90%;
  text-decoration: none;
  text-align: center;
}

/*Middle section header labels half width*/
.mswhl2{
  display: inline-block;
  width: 7%;
  height: 85%;
  padding-top: 0.5%;
  border-radius: 15px 15px 0px 0px;
  background-color: #c7c7c7;
  color: black;
  font-size: 90%;
  text-decoration: none;
  text-align: center;
}

/*Middle section header labels half HOVER*/
.mswhl2:hover{
  background-color: #f1f1f1;
  border-bottom:medium solid #f1f1f1;
}

/*Middle section sub-section label*/
.msssl{
  background-image:linear-gradient(to right, #f8f0e5, #990000);
  height:2%;
  padding-top: 1.5%;
  line-height: 3%;
  font-family:Candara, Calibri, Verdana;
  font-size:15pt;
  text-align: center;
  color: black;
}

/*Middle section sub-section label - direction reversed*/
.mssslr{
  background-image:linear-gradient(to left, #f1f1f1, #bfbdbd);
  height:2%;
  padding-top: 1.5%;
  line-height: 3%;
  font-family:Candara, Calibri, Verdana;
  font-size:15pt;
  text-indent:2%;
  text-align: left;
  color: black;
}

/*Middle section sub-section label - direction reversed*/
.mssslrb{
  background-image:linear-gradient(to left, #f1f1f1, #bfbdbd);
  height:2%;
  background-color: antiquewhite;
  border-radius: 6px;
  border-style: groove;
  border-width: medium;
  border-color: silver;
  /* padding-top: 1.5%; */
  /* line-height: 3%; */
  font-family:Candara, Calibri, Verdana;
  font-size:15pt;
  text-align: center;
  /* color: black; */
}

/*Middle section sub-section label - direction reversed*/
.mssslrr{
  background-image:linear-gradient(to right, #f1f1f1, #bfbdbd);
  height:2%;
  padding-top: 1.5%;
  line-height: 3%;
  font-family:Candara, Calibri, Verdana;
  font-size:15pt;
  padding-right: 2%;
  /* text-indent:2%; */
  text-align: right;
  color: black;
}

/*Middle section sub-section label ASSOCIATES*/
.msssla{
  background-image:linear-gradient(to right, #84f2ea, #f1f1f1);
  height:2%;
  padding-top: 1.5%;
  line-height: 3%;
  font-family:Candara, Calibri, Verdana;
  font-size:15pt;
  text-align: center;
  color: black;
}

/*Middle section sub-section label PARTNERS*/
.mssslp{
  background-image:linear-gradient(to right, #f1f1f1, #76028b);
  height:2%;
  padding-top: 1.5%;
  line-height: 3%;
  font-family:Candara, Calibri, Verdana;
  font-size:15pt;
  text-align: center;
  color: black;
}


/*Middle section sub-section label SALES*/
.msssll{
  background-image:linear-gradient(to right, #f1f1f1, #f7cc6c);
  height:2%;
  padding-top: 1.5%;
  line-height: 3%;
  font-family:Candara, Calibri, Verdana;
  font-size:15pt;
  text-align: center;
  color: black;
}

/*Middle section sub-section label PURCHASES*/
.mssslu{
  background-image:linear-gradient(to right, #f1f1f1, #bbbbff);
  height:2%;
  padding-top: 1.5%;
  line-height: 3%;
  font-family:Candara, Calibri, Verdana;
  font-size:15pt;
  text-align: center;
  color: black;
}


/*Middle section 2 column 1 - width/height to be adjusted as needed and class renamed*/
.ms2cs{
  position: absolute;
  top: auto;/*to be adjusted for the text above*/
  left:26%;
  width: 48%;
  /*height: 50%;/*to be adjusted for the space needed*/
  background-color: darkolivegreen;
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  text-align: right;
}

/*Middle section 2 columns 1 - width/height to be adjusted as needed and class renamed*/
.ms2cl{
  position: absolute;
  top: auto;/*to be adjusted for the text above*/
  left: 1%;
  display: inline-block;
  width: 48%;
  /*height: 50%;/*to be adjusted for the space needed*/
  background-color: darkolivegreen;
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  text-align: right;
}

/*Middle section 2 columns 2 - width/height to be adjusted as needed and class renamed*/
.ms2cr{
  position: absolute;
  top: auto;/*to be adjusted for the text above*/
  left: 50%;
  display: inline-block;
  width: 48%;
  /*height: 50%;/*to be adjusted for the space needed*/
  background-color: darkolivegreen;
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  text-align: left;
}

/*Middle section input boxes*/
.msin{
  position: relative;
  width: 40%;
  height: 100%;
  margin: 3px 3px 2px 3px;
  /* background-color: antiquewhite; */
  background-color: pink;
  cursor:pointer;
}

/*Middle section join drop down input boxes*/
.sel_dropdown{
  position: relative;
  width: 40%;
  height: 80%;
  margin: 3px 3px 2px 3px;
  background-color: antiquewhite;
  cursor:pointer;
}

/*Middle section join drop down input boxes*/
.sel_drop{
  position: relative;
  width: 40%;
  height: 80%;
  margin: 3px 3px 2px 3px;
  /* border: none; */
  background-color: #f4f4f4;
  cursor:pointer;
}


/*Middle section submit boxes*/
.mssbtn{
  position: relative;
  width: 16%;
  height: 80%;
  border-radius: 10px;
  margin: 3px 3px 2px 3px;
  background-color:#7fed98;
  cursor:pointer;
}


/*Middle section thank you*/
.msty{
  position: absolute;
  bottom: 1%;
  width: 100%;
  height: 10%;
  padding-bottom: 1%;
  background-color: #6c6c4d;
  color: black;
}

/*Input button data where data is brought from the db and edited before being re-stored*/
.INbtn{
  position: relative;
  display: inline-block;
  width: 40%;
  height: 80%;
  margin: 3px 3px 2px 3px;
  background-color:#e5e571;/*5dbe73*/
  text-align: right;
  cursor:pointer;
}
/*Input button data where data is brought from the db and edited before being re-stored*/
.input_data{
  position: relative;
  display: inline-block;
  width: 40%;
  height: 10%;
  margin: 3px 3px 2px 3px;
/*  background-color:red; */
  background-color:#80b988;
  text-align: right;
  cursor:pointer;
}

/*Input button specific to yd_register.php*/
.INbtn1{
  position: relative;
  height: 7%;
  margin: 3px 3px 2px 3px;
  background-color:#a5d3f5;/*5dbe73*/
  text-align: right;
  cursor:pointer;
}

/*Input button specific to yd_register.php*/
.INbtn2{
  position: relative;
  height: 50%;
  margin: 3px 3px 2px 3px;
  background-color:#a5d3f5;/*5dbe73*/
  text-align: right;
  cursor:pointer;
}

/*READONLY button specific to order input - L_re.php*/
.RObtn{
  position: relative;
/*  display: inline-block;*/
  width: 55%;
  height: 80%;
/*  margin: 3px 3px 2px 3px;*/
  background-color:#a5d3f5;/*5dbe73*/
/*  text-align: right;*/
}

/*Left hand side bar within the main section*/
.lhsb{
  position:absolute;
  top: 10.7%;
  left: 0.5%;
  width: 12%;
  height: 82.5%;
  border-radius: 0px 15px 0px 0px;
  background-color: antiquewhite;/*38260e*/
  color: black;/* aliceblue */
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  text-align: left;
}

/*Left hand side bar wrapper*/
.lhsbw{
  position:absolute;
  top: 5%;
  left: 0.8%;
  width: 98%;
  height: 94.5%;
  background-color: antiquewhite;/*f0b769*/
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  text-align: center;
}

/*Left content label*/
.lcl{
  display: block;
  background-color: #d9d4c1;/*ddcb90*/
  color: black;
  width:100%;
  /* width:110%; */
  height: 3.5%;
  margin: 2% 5% 0% 5%;
  padding-top: 2%;
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  border-radius: 15px 0px 0px 15px;
  text-decoration: none;
  text-align: center;
  font-weight: 200;
}

/*Left content label demo*/
.lcld{
  background-color: #d9d4c1;/*ddcb90*/
  color: #292514;
  width:15%;
  height: 3.5%;
  margin: 2% 5% 0% 5%;
  /* padding-top: 2%; */
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  border-radius: 15px 0px 0px 15px;
  text-decoration: none;
  text-align: center;
  font-weight: 200;
}

/*Left content label HOVER*/
.lcl:hover{
  background-color: #f1f1f1;
}

.lcl:active{
  color: white;
}

/*Right hand side bar within the main section*/
.rhsb{
  position:absolute;
  top: 10.7%;
  right: 0.5%;
  width: 18%;
  height: 82.5%;
  border-radius: 15px 0px 0px 0px;
  background-color: antiquewhite;/*38260e*/
}

/*Right hand sidw bar wrapper*/
.rhsbw{
  position:absolute;
  top: 0.5%;
  right: 5%;
  width: 93%;
  height: 99%;
  background-color: antiquewhite;/*f0b769*/
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  text-align: center;
  /* vertical-align: middle; */
}

/*Footer strip along the bottom with the company name in it*/
.fs{
  position: absolute;
  bottom: 3.5%;
  left: 0.5%;
  width: 97%;
  height: 3%;
  padding-left: 2%;
  background-image:linear-gradient(to right, #f8f0e5, #2ea677);
  /* background-image:linear-gradient(to right, #f8f0e5, #990000); */
  color: #000;
  font-family:Candara, Calibri, Verdana;
  font-size: 125%;
  text-align: left;
}

/*Form input join SM*/
.fijSM{
  position: absolute;
  top: 30%;
  left: 1%;
  width: 98%;
  height: 40%;
  padding-top: 1%;
  background-color: darkseagreen;
  text-align: left;
}

/*Form input join SM registy button*/
.fijBTN{
  position: absolute;
  bottom: 2%;
  left: 3%;
  width: 20%;
  height: 15%;
  background-color: #5dbe73;
  color: black;
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  text-align: centre;
}

/*Associate company join SM*/
.acjSM{
  position: absolute;
  top: 30%;
  left: 1%;
  width: 98%;
  height: 50%;
  padding-top: 1%;
  background-color: #a7e6c4;/*darkseagreen*/
  text-align: center;
}

/*Associate company input join SM registy button*/
.acjBTN{
  position: absolute;
  bottom: 2%;
  right: 3%;
  width: 20%;
  height: 15%;
  background-color: #5dbe73;
  color: black;
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  text-align: centre;
}

/*Enter Button on forms*/
.entbtn{
  position: absolute;
  border: none;
  border-radius: 1em ;
  background-color: #76f481;
  color: black;
  font-family:Candara, Calibri, Verdana;
  font-size: 80%;
  text-align: center;
}

.hreflink:hover{
  background-color: #dedede;
  border-bottom:medium solid #f1f1f1;
}

/*Your details register*/
.ydr{
  position: absolute;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  padding-top: 1%;
  /* border-radius: 5px; */
  /* border: medium ridge silver; */
  /* background-color: #a7e6c4;/*darkseagreen*/ */
  font-size: 100%;
  font-weight: bold;
  text-align: center;
}

.err{
  color: RED;
  font-weight: 300;
}

/*PayPal positioning*/
.pp{
  position: absolute;
  bottom:15%;
  background-color: #f4f4f4;
}

/*Table for registered suppliers*/
.trs {
  position: absolute;
  height:4.5%;
  width:100%;
  font-size: 70%;
  font-weight: normal;
}

.trs th{
  background-color: #d6dede;
}

.trs tr:nth-child(odd){
  background-color: #dce5ef;
}

/*Table for registered suppliers*/
.table {
  position: absolute;
  height:4%;
  width:100%;
  font-weight: normal;
  /* top:12%; */
  /* left:0.5%; */
  /* background-color: #f1f1f1; */
}

.table th{
  background-color: #d6dede
}

.table tr:nth-child(odd){
  background-color: #dce5ef;
}

/*Table for registered suppliers*/
.trs2 {
  position: absolute;
  top:60%;
  left:1%;
  height:8%;
  width:98%;
  background-color: #f1f1f1;
}

.trs2 th{
  background-color: #d6dede
}

.trs2 tr:nth-child(odd){
  background-color: #dce5ef;
}

/*Table for Company Summary*/
.tas {
  position: absolute;
  top:12%;
  left:1%;
  width:98%;
  background-color: #f1f1f1;
}

.tas th{
  background-color: #d6dede
}

/* .tcs tr:nth-child(odd){
  background-color: #dce5ef;
} */

/*Table for registered suppliers*/
.tcs {
  position: absolute;
  top:60%;
  left:1%;
  height:8%;
  width:98%;
  background-color: #f1f1f1;
}

.tcs th{
  background-color: #d6dede;
}

.tcs tr:nth-child(odd){
  background-color: #dce5ef;
}

/*Basic Container for yd_summary*/
.conYD{
  height: 15%;
  border-width: 2px 2px 2px 1px;
  border-bottom-style:double;
  border-color: black;
  background-color: #acf7d7;
}

/*Side bar tab to indicate which section you are in*/
.sbtab{
  position:absolute;
  left:12.2%;
  width:.5%;
  height:3.55%;
  background-color: black;
  border-radius: 0px 5px 5px 0px;
  z-index: 1;
}

/*Top line tab to indicate which section you are in*/
.tltab{
  position:absolute;
  top:13.5%;
  width:10.32%;
  height:.5%;
  background-color: black;
  z-index: 1;
}

.sum{
  position:absolute;
  top:37%;
  width:5%;
  text-align:center;
}

/* hovering text with help */
.help{
  position: absolute;
  bottom: 5%;
  height:4%;
  left: 5%;
  width: 15%;
  border-radius: 15px;
  border: 2px ridge black;
  background-color: #ffc557;
  font-family: Candara, Calibri, Verdana;
  font-size: 90%;
  text-align: center;
}

.help .helptext{
  visibility: hidden;
  width: 200%;
  background-color: #f1f1f1;
  text-align: center;
}

.help:hover .helptext{
  position: absolute;
  visibility: visible;
  color:RED;
  z-index: 1;
  top: 100%;
  left: 5%;
}

.probtn{
  position:absolute;
  top:25%;
  height:4%;
  width:12%;
  border-radius:10px;
}

.probtn:hover{
  background-color: yellow;
}

.cpsty{
  /* height: 20px; */
  top: 0.5%;
  height: 3%;
  background-color: #b3ddf4;
  font-weight: bold;
  text-align:center;
}

.pcount{
  position:absolute;
  bottom:5%;
  left:10%;
}

.pprevtab{
  position:relative;
  top: 22%;
  height: 20%;
  left: 0%;
  width: 100%;
  /* border-width: thick; */
  /* border-style: ridge; */
  /* border-radius: 10px; */
  /* border-color: silver; */
  /* background-color: #f5f4c6; */
  z-index: 1;
}

.ppaddtab{
  position:relative;
  top: 17%;
  left: 14.5%;
  height: 50%;
  width: 70%;
  border-width: thick;
  border-style: ridge;
  border-radius: 10px;
  border-color: silver;
  background-color: #c4f7ce;
  z-index: 1;
}

.pptabbtn{
  position: absolute;
  bottom:2%;
  left:40%;
  height:5%;
  width:20%;
  border-radius: 1em;
  background-color: #f87786;
}

/* clear form, submit button*/
.sub_btn{
  position: relative;
  height: 100%;
  width: 15%;
  background-color: darksalmon;
  border-radius: 5px;
}

/* clear form, submit button*/
.sub_btn:hover{
  background-color: antiquewhite;
}

.tblsect{
  position:absolute;
  top:20%;
  left:20%;
  height:60%;
  width:60%;
  border-style: ridge;
  border-width: thick;
  border-radius: 10px;
  border-color: silver;
  background-color:#d5f4de;
}

.test{
  position:relative;
  text-align: center;
  top: 88%;
  background-color:#d5f4de;
  z-index:1;
}

.regdiv{
  position: absolute;
  top: 30%;
  left: 20%;
  height: 40%;
  width: 60%;
  border-style: groove;
  border-width: medium;
  border-radius: 10px;
  border-color: silver;
  background-color: #b9efad;
  text-align: center;
}

.formbtn{
  position: absolute;
  top: 94%;
  height: 4%;
  width: 100%;
  text-align: center;
  /* background-color: white; */
}

.vct{
  vertical-align: middle;
}

/* for INFORMATION forms */
.notes{
  position:absolute; top:0%;
  /* left:0.5%; */
  height:100%;
  width:100%;
  /* border: medium ridge silver; */
  /* border-radius: 10px; */
  /* background-color:#f4e3ae; */
}

.notesHD{
  height:3%;
  /* border-radius: 8px 8px 0px 0px; */
  background-color:#d4c50d;
  font-size:20px;
}

/* for ORDER forms */
.orders{
  position:absolute; top:3%;
  /* left:5%; */
  width:100%;
  height:90%;
  /* border: medium ridge silver; */
  /* border-radius: 10px; */
  /* background-color:#b9efad; */
}

.warning{
  position:absolute;
  top:30%;
  left:30%;
  width:40%;
  height:30%;
  background-color:pink;
  border: medium solid red;
  border-radius:10px;
}

.edit_user{
  position:absolute;
  height:10%;
  left:30%;
  width:40%;
  background-color:#ddd491;
  font-size:130%;
  text-indent: 2%;
}

.email{
  position:absolute;
  top: 3%;
  height:90%;
  left:0%;
  width:100%;
  background-color:#red;
  font-size:100%;
  text-indent: 2%;
}

.emailm{
  position:absolute;
  top: 0%;
  height:100%;
  left:0%;
  width:100%;
  background-color:#red;
  font-size:100%;
  text-indent: 2%;
}

.hreflink{
  /* font-weight: bold; */
  color:blue;
  text-decoration: none;
}

.select{
  color:blue;
  text-decoration: none;
}

.select:hover{
  color:blue;
  font-weight: bold;
  background-color: #d0d0d0;
  text-decoration: none;
}


.oridata{
  text-align: right;
  text-indent: 2%;
  background-color: antiquewhite;
  border: thin solid black;
  border-radius: 10em 0em 0em 10em;
}

.oridatar{
  text-align: left;
  text-indent: 2%;
  background-color: antiquewhite;
  border: thin solid black;
  border-radius: 0em 10em 10em 0em;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* table select item hover */
.tabsel:hover{
  background-color: red;
}

.span.h1:hover + div{
  display: block;
}

.OIID:hover{
  font-size: 150%;
}

.overlay{
  position: absolute;
  top:0%;
  height: 100%;
  left:0%;
  width:100%;
  background-blend-mode: overlay;
  z-index:1;
  backdrop-filter: blur(1.05px);
}

.overlay2{
  position: absolute;
  top:0%;
  height: 100%;
  left:0%;
  width:100%;
  background-blend-mode: overlay;
  z-index:1;
  backdrop-filter: blur(0px);
}

.report{
  position: absolute;
  top:45%;
  height: 20%;
  left:30%;
  width:60%;
  background-color: white;
  border-radius: 10px;
  border: solid ridge black;
  z-index:1;
  backdrop-filter: blur(1.05px);
  /* backdrop-filter: blur(1.1px); */
}

.CheckToDo{
  position: absolute;
  top:35%;
  height:10%;
  left:30%;
  width:40%;
  background-color:red;
  border: 2px ridge grey;
  border-radius: 10px;
  z-index: 1;
  /* background-blend-mode:
  ; */
}

.newAdd{
  position: absolute;
  bottom: 0%;
  height: 20%;
  right: 0%;
  width: 40%;
  font-size: 100%;
  background-color: #f1f1f1;
  border:1px ridge grey;
  border-radius: 10px 10px 10px 10px;
  z-index:2;
}

.newTitle{
  position: absolute;
  top: 25%;
  height: 5%;
  left: 2%;
  width: 95.5%;
  font-size: 150%;
  background-color: #f1f1f1;
  border-left:1px ridge grey;
  border-top:1px ridge grey;
  border-right:1px ridge grey;
  /* border-bottom: 1px solid black; */
  border-radius: 10px 10px 0px 0px;
  z-index:2;
}

.newTitleTS{
  position: absolute;
  top: 8.5%;
  height: 10%;
  left: 0%;
  width: 100%;
  font-size: 100%;
  background-color: #f1f1f1;
  border:1px ridge black;
  border-radius: 10px 10px 10px 10px;
}

.newTitleMS{
  position: absolute;
  top: 19%;
  height: 74.75%;
  left: 0%;
  width: 100%;
  font-size: 150%;
  /* background-color: pink; */
  background-color: #f1f1f1;
  border:1px ridge black;
  border-radius: 10px 10px 10px 10px;
  /* z-index:2;trs */
}

.newTitle0{
  background-color: #f1f1f1;
  border-left:1px ridge grey;
  border-top:1px ridge grey;
  border-right:1px ridge grey;
  border-radius: 10px 10px 0px 0px;
  z-index:0;
}

.newSection{
  position:absolute;
  top:30%;
  height:30%;
  left:2%;
  width:95.5%;
  background-color: #f1f1f1;
  font-size: 140%;
  border-left:1px ridge grey;
  border-bottom:1px ridge grey;
  border-right:1px ridge grey;
  border-radius: 0px 0px 10px 10px;
  z-index:2;
}

.newFull{
  position:absolute;
  top:30%;
  height:30%;
  left:2%;
  width:95.5%;
  background-color: #f1f1f1;
  font-size: 150%;
  border:1px ridge grey;
  border-radius: 10px 10px 10px 10px;
  z-index:1;
}

/*Left content label*/
.newSelect{
  display: block;
  width:40%;
  margin: 0.5% 0% 0% 0%;
  font-family:Candara, Calibri, Verdana;
  font-size: 100%;
  background-color: #d9d4c1;
  text-decoration: none;
  text-align: center;
  border-radius: 15px;
}

/*Left content label HOVER*/
.newSelect:hover{
  background-color: #f1f1f1;
}

/*New label content*/
.newMiddleLabel{
  font-family:Candara, Calibri, Verdana;
  /* background-color: #d9d4c1; */
  text-decoration: none;
  text-align: center;
  border: thin solid black;
  border-radius: 15px;
}

/*New label content HOVER*/
.newMiddleLabel:hover{
  background-color: #dedede;
}

.WIPSam{
  height: 49%;
  width:3.8%;
  border: thin solid black;
  background-color: white;
}

.SMmain_upper{
  position:absolute; top:8.5%;
  height:85%;
  left:0%;
  width:100%;
}

.pageCount{
  position:absolute;
  bottom:0%;
  height:6%;
  left:0%;
  width:50%;
  border-radius: 0px 0px 0px 10px;
  z-index:1;
}

.gotoPageSelect{
  position:absolute;
  bottom:0%;
  height:6%;
  left:0%;
  width:50%;
  border-radius: 0px 0px 0px 10px;
  z-index:1;
}

.gotoPageNumber{
  position:absolute;
  bottom:0%;
  height:6%;
  left:0%;
  width:50%;
  border-radius: 0px 0px 0px 10px;
  z-index:1;
}

.hoverhelp {
  position: relative;
  border-bottom: 1px dotted black;
}

.hoverhelp:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  /* width: 600px; */
  background-color: #dedede;
  color: black;
  font-size: 70%;
  text-align: left;
  border-radius: 5px;
  padding: 5px;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 3;
  left: 0;
  top: 110%;
}

.hoverhelp:hover:before {
  opacity: 1;
  visibility: visible;
}

.edtbox{
  position:absolute;
  top:74.9%;
  height:19%;
  left:50.5%;
  width:49.5%;
}