/* ************************************** -
  This is the main stylesheet for an AME based website.
************************************* */


/* -------Standard elements  ---------- */

html {}

body {
   color: white;
   background-color: black;
   font-family: Arial, Verdana, Helvetica, sans-serif;
   font-size: 16px;
   font-style: normal;
   line-height: 1.2;
   xletter-spacing: 0.03px;
}

body.AMEbody {
   background: white;
   color: black;
}

table {
   width: 100%;
}

td {}

img {}

a {
   color: white;
   text-decoration: none;
   text-decoration: underline;
}

a:hover {
   background-color: rgba(255, 255, 255, 0.4);
}

.BlackOnWhite a,
.BlackOnWhite body {
   color: black;
}

h1 {}

h2 {}

h3 {
   padding-left: 10px;
}

h3.ui-accordion-header {
   padding-left: 30px;
}

h4 {}

h5 {
   font-size: 12px;
   list-style-type: Circle;
}

blink {
   behavior: url(blink.htc);
}

strong {}

input,
select {
   padding-left: 5px;
   border-radius: 4px;
}

.TransHistoryButton,
input[type="Submit"],
input[type="Button"],
.ActionLinks a ,
.LoginCancelBut {
   background: #777;
   background-image: -webkit-linear-gradient(top, #777, #A3A3A3);
   background-image: -moz-linear-gradient(top, #777, #A3A3A3);
   background-image: -ms-linear-gradient(top, #777, #A3A3A3);
   background-image: -o-linear-gradient(top, #777, #A3A3A3);
   background-image: linear-gradient(to bottom, #777, #A3A3A3);
   -webkit-border-radius: 10;
   -moz-border-radius: 10;
   border-radius: 7px;
   text-shadow: 1px 1px 3px #666666;
   color: #ffffff;
   font-size: 12px;
   font-weight: bold;
   padding: 3px 10px 3px 10px;
   text-decoration: none;
}
.LoginCancelBut {
   color: black !important;
}

input[type="Submit"]:hover,
input[type="Button"]:hover,
.ActionLinks a:hover {
   background: #A0885E;
   background-image: -webkit-linear-gradient(top, #A0885E, #E8B566);
   background-image: -moz-linear-gradient(top, #A0885E, #E8B566);
   background-image: -ms-linear-gradient(top, #A0885E, #E8B566);
   background-image: -o-linear-gradient(top, #A0885E, #E8B566);
   background-image: linear-gradient(to bottom, #A0885E, #E8B566);
   text-decoration: none;
}


/* ---------Ad hoc classes  ----------- */

.Warning {
   padding-left: 18px;
   font-size: 1.2em;
   font-weight: bold;
   color: red;
}

.Error,
.error {
   width: 75%;
   padding: 20px;
   font-size: 0.875em;
   background-color: #E2E2E2;
   color: red;
}

.AdobeReader {
   font-size: 0.625em;
   text-align: center;
   color: #A9A9A9;
}

.noWrap {
   white-space: nowrap;
}

.clear {
   clear: both;
}

.TextRight {
   text-align: right;
}

.TextLeft {
   text-align: left;
}

.TextCenter {
   text-align: center;
}

@function black($opacity) {
   @return rgba(black, $opacity)
}

@function white($opacity) {
   @return rgba(white, $opacity)
}

.half-black {
   background: black(0.5);
}
.w-100 {
	width:100%;
   clear: both;
   margin-top: 10px;
   border-top: 1px Solid #eee ;
   float:left;
}

/* ---------------Container ------------ */

#PgContainer {
	background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;

}
	
}

.container {}


/* ---------------col2 ------------ */

#col2o {
   background-color: rgba(255, 255, 255, 0.8);
   color: black;
}

@media (min-width: 768px) {
   #col2o {
      min-height: 600px;
   }
}

#col2o a {
   color: black;
}


/* --------Content  ------------- */

#divContent {}

#divContentEnd {
   clear: both;
}


/* --------Left Mast  --------- */

.LeftMast {
   background-color: black;
}

#divLeftMast {}


/* --------Right Mast ---------- */

#divRightMast {
   position: absolute;
   right: -200px;
   top: 0;
}

#divRightMast a {
   color: white;
}


/* ---------Header  ---------- */

#divHeader {
   text-align: center;
}

#divHeaderLogo {}

.HeadLogo {
   height: 130px;
   margin-top: 5px;
}

@media (max-width: 765px) {
   #divHeader {
      float: left;
   }
   #divHeaderLogo {}
   .HeadLogo {
      height: 90px;
   }
}

#divHeaderTaglineIntro {
   color: #F2DDBA;
   font-size: 14px;
   font-weight: bold;
   padding-top: 5px;
   padding-bottom: 5px;
}

#divHeaderTagline {
   color: #A0885E;
   font-size: 16px;
   font-weight: bold;
   padding-top: 5px;
}

#divHeaderImage2 {
   display: None;
}

.HeaderImage2 {
   height: 90px;
}

#HeaderPrint {
   display: none;
}
/* ---------------divLang ------------------ */
div#divLang {
   text-align: right;
   padding-right: 12px;
}
#divLang .form-control  {
   display: inline-block;
   width: 60px; 
}
/* ---------------divMenu ------------------ */

#divMenu,
#WorkBenchMenu {
   padding-top: 12px;
   margin-bottom: 10px;
}

#divMenu ul.navbar-nav {
   position: relative;
   z-index: 20;
   border-radius: 5px;
   background-color: black;
}

#divMenu .navbar-nav>li.VerticalMenu>a {
   padding: 2px;
   padding-left: 5px;
   padding-right: 10px;
}

#divMenu .navbar-nav>li.VerticalMenu>a:hover {
   background-color: #999;
   border-radius: 4px;
}

#divMenu.navbar-inverse {
   background-color: black;
}

#divMenu.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
   color: #EAEAEA;
}

#divMenu.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
   background-color: #999;
   border-radius: 4px;
}

.dropdown-menu>li>a {
   padding-top: 1px;
   padding-bottom: 2px;
}

nav.VerticalMenu .navbar-nav .open .dropdown-menu {
   background-color: black;
   border: 2px none;
   box-shadow: none;
   z-index: 20;
}

#WorkBenchMenu .navbar-nav>li.VerticalMenu>a {
   padding: 2px;
   padding-left: 5px;
   padding-right: 10px;
}

@media (max-width: 765px) {
   .navbar-inverse {
      background-color: transparent;
   }
   #divMenu.navbar-inverse {
      background-color: transparent;
   }
}


/* ---------------Login ------------------ */

#divLogin {
   margin-top: 30px;
   text-align: right;
}

#divLogin a {
   font-size: 10px;
   color: #E2E2E2;
   text-decoration: underline;
}

#divLogin form {
   text-align: right;
}

@media (max-width: 765px) {
   #divLogin {
      position: relative;
      z-index: 10;
      float: left;
   }
}

.LoginError {
   color: red;
   font-size: 10px;
}

.EditControls80 {
   border: 0px solid #000000;
   font-size: 12px;
   width: 100%;
   max-width: 170px;
   display: block;
   margin-bottom: 3px;
   background-color: #999;
}

.ButtonControls {}

input:active.ButtonControls {}

#divLogin .ButtonControls {
   xdisplay: block;
   clear: left;
   margin-top: 3px;
   margin-bottom: 3px;
}

div#LoginCheck {
   margin-top: 20px;
}

#LoginCheck .EditControls80 {
   background-color: white;
}

#LoginMember .EditControls80 {
   display: block;
   margin-top: 5px;
   margin-left: auto;
   margin-right: auto;
   background-color: white;
}


/* ---------------PWord change------------------ */

#ChgPword {
   margin: 20px 0px 30px 0px;
   text-align: right;
   width: 400px;
}


/* ---------------Contact block ----------- */

#divContacts {
   color: #909090;
   font-size: 12px;
   text-align: center;
   padding: 5px;
}

#divContacts a {
   margin-left: 5px;
}

#ContactsPrint {
   display: none;
}


/* ---------------footer --------------- */

#divFooter {
   background: #000000;
   color: #E2E2E2;
   font-size: 12px;
   text-align: left;
   padding-top: 10px;
   padding-bottom: 15px;
   clear: left;
}

#divFooter a {
   font-size: 12px;
   font-weight: bold;
   color: #909090;
   display: block;
}

.footer {
   margin-left: 40px;
   margin-right: 40px;
}

#FooterPrint {
   display: none;
}


/* ---------------design -------------- */

#divDesign {
   background-color: transparent;
   font-size: 9px;
   padding: 5px;
   text-align: center;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: -1;
}

#divDesign a {
   color: #909090;
   color: #545454;
}

#divDesign a:hover {
   color: #E2E2E2;
   font-size: 14px;
}


/* ---------------Article-------------- */

#Article {}

.ArticleMainDiv {}

#Archive {}


/* ---------------- breadcrumb ---------- */

.breadcrumb {
   font-size: 70%;
   line-height: 0.8;
   text-align: right;
   background-color: transparent;
   color: #999;
   margin-bottom: 0px;
   padding-bottom: 0px;
}

.breadcrumb>li+li:before {
   content: "\00BB";
   color: black;
}

.breadcrumb>.active {
   color: black;
}

#col2o .breadcrumb a {
   color: #999;
}

.ArticleHEADER {
   padding-bottom: 5px;
   padding-left: 10px;
   padding-right: 12px;
   text-align: right;
   font-size: 10px;
   font-style: italic;
   font-variant: small-caps;
   display: none;
}

.ArticleAUTHOR {
   margin-bottom: 5px;
   text-align: left;
   font-size: 12px;
}

.ArticleTAGLINE {
   margin-bottom: 15px;
   font-size: 22px;
   color: #F38634;
}

.ArticleIMGlarge {
   font-size: 12px;
   margin-left: 7px;
   margin-top: 20px;
}


/* --------Article Section1 ---------- */

.DivArticleSection1 {}

.ArticleIMG1 {
   float: right;
   max-width: 50%;
   margin-left: 20px;
   font-size: 12px;
   margin-bottom: 20px;
   margin-top: 5px;
   font-size: 0.75em;
}

@media (max-width: 480px) {
   .ArticleIMG1 {
      max-width: 100%;
   }
}

.ArticleIMG1 img {
   max-width: 100%;
   display: block;
   clear: right;
}

.ArticleBODY {}


/* ----------Article Section2 ----------- */

.DivArticleSection2 {
   page-break-inside: avoid;
}

.ArticleIMG2 {
   float: left;
   max-width: 100%;
   margin-bottom: 20px;
   margin-right: 20px;
   font-size: 0.75em;
}

.ArticleIMG2 img {
   max-width: 100%;
   display: block;
}

.ArticleNOTES {}

.ArticleATTACH {
   font-size: 16px;
   text-align: left;
}

.ArticleATTACHbody {
   font-size: 10px;
   text-align: left;
}


/* ---------------ArticleImageLeft ----------- */

#ArticleImageLeft {}

#ArticleImageLeft .ArticleTAGLINE {}

#ArticleImageLeft .ArticleIMG1 {
   float: left;
   margin-right: 20px;
   margin-left: 0px;
}

#ArticleImageLeft .DivArticleSection2 {}

#ArticleImageLeft .ArticleIMG2 {
   float: right;
   margin-left: 20px;
   margin-right: 0px;
   text-align: right;
}

#ArticleImageLeft .ArticleIMG2 img {}


/* ---------------Article2columns ----------- */

#Article2columns {}

#Article2columns .DivArticleSection1 {
   float: left;
   width: 47%;
}

#Article2columns .ArticleIMG1 {
   float: none;
   margin-left: 0px;
}

#Article2columns .ArticleIMG1 img {}

#Article2columns .ArticleBODY {}

#Article2columns .DivArticleSection2 {
   xborder: 1px Solid black;
   float: right;
   width: 47%;
}

#Article2columns .ArticleIMG2 {
   float: right;
   margin-left: 20px;
   margin-right: 0px;
   margin-top: 5px;
   text-align: right;
}

#Article2columns .ArticleIMG2 img {
   clear: right;
   width: 350px;
   float: right;
}

#Article2columns .ArticleNOTES {}


/* ---------------Child------------------ */

.DivChildSection {
   padding-bottom: 20px;
   width: 100%;
   float: left;
   page-break-inside: avoid;
}

.ChildBox {
   clear: both;
   padding-bottom: 5px;
}

.ChildThumbnail {
   float: right;
   max-width: 50%;
   margin-left: 10px;
   margin-right: 20px;
   margin-top: 4px;
   text-align: center;
}

.ChildThumbnail img {
   max-width: 100%;
   height: 100px;
   margin-bottom: 10px;
}

.ChildHeadline {
   padding-left: 10px;
   list-style-image: url(images/office_xp_arrow.png);
   list-style-position: inside;
   display: list-item;
}

.ChildHeadline A {
   font-size: 14px;
   font-weight: bold;
   text-decoration: none;
}

.ChildTAGLINE {
   font-size: 16px;
   padding-top: 10px;
   padding-left: 30px;
   text-align: Left;
   color: #909090;
}

.ChildTAGLINE a {
   color: #909090;
}

.ChildAbstract {
   max-width: 80%;
   padding-left: 35px;
   font-size: 0.875em;
}


/* ---------------Article3colChild ----------- */

#Article3colChild {}

#Article3colChild .ArticleBODY {}

#Article3colChild .DivArticleSection2 {
   clear: both;
}

#Article3colChild .DivChildSection {
   width: 745px;
}

#Article3colChild #Child0 {
   float: left;
   margin-right: 10px;
}

#Article3colChild #Child1 {
   float: left;
   margin-right: 10px;
}

#Article3colChild .ChildBox {
   width: 230px;
   float: left;
}


/* ---------------Mugshots ------------------ */

#Mugshots {
   background-color: #909090;
   display: block;
   float: right;
   margin-left: 20px;
   position: relative;
   text-align: right;
   top: 0px;
   width: 137px;
}

#Mugshots .ChildBox {
   background-color: #FFFFFF;
   border: 1px solid #808080;
   margin: 10px;
   padding: 3px;
   text-align: center;
}

#Mugshots .ChildThumbnail {
   margin-left: 5px;
   margin-top: 4px;
   text-align: center;
   width: 100px;
}

#Mugshots .ChildHeadline {
   border: 1px dotted #808080;
   font-size: 14px;
   padding-left: 0px;
   text-decoration: none;
   text-transform: uppercase;
}

#Mugshots .ChildHeadline A {
   text-decoration: none;
}

#Mugshots .ChildTAGLINE {
   font-size: 10px;
   padding-left: 0px;
   text-align: center;
}

#Mugshots .ChildAbstract {
   font-size: 10px;
   padding-left: 0px;
   text-align: justify;
}


/* ---------------Film strip ------------ */

#divFilmStrip {
   width: 100%;
   clear: both;
   margin-left: 0px;
   text-align: center;
   background-color: transparent;
}

.FilmStripImg {
   display: block;
   float: left;
   margin: 0px;
   padding: 0px;
   width: 100%;
   xheight: 111px;
   border: 0px solid black;
}


/* ---------------Sitemap ------------------ */

#Sitemap {
   font-size: 9px;
   margin-left: 40px;
}

.Sitemap a {
   font-size: 9px;
}


/* ---------------rotator ------------------ */

#Borge {}

#Borge:before {
   content: "Borge ";
   color: #E2E2E2;
   font-size: 12px;
}

@media (min-width: 768px) {
   #Borge {
      position: fixed;
      bottom: 50px;
      z-index: -1;
      width: 190px;
   }
}

#divRotator {}

.RotatorCONTENT {
   color: #E2E2E2;
   font-size: 9px;
   text-align: center;
   display: none;
}

.RotatorCONTENT A {
   color: #909090;
   font-size: 9px;
   text-decoration: none;
}

.RotatorCONTENT A:hover {
   color: #909090;
   text-decoration: underline;
}

.RotatorHEADER {
   color: #E2E2E2;
   font-size: 11px;
   font-weight: bold;
   text-align: center;
   margin: 0px;
   display: none;
}

.RotatorIMG {
   color: #006600;
   font-size: 11px;
   margin-top: 2px;
   text-decoration: none;
}

.RotatorIMG img {
   width: 100%;
   border-radius: 10px;
}

#Borge .RotatorIMG img {
   max-width: 300px;
}

.RotatorDIV {
   font-size: 11px;
   text-align: center;
   xborder: 1px solid white;
   border-radius: 15px;
   padding: 3px;
   margin: 0px;
   width: 100%;
   height: auto;
}


/* ---------------rotator ------------------ */

#divBanner {
   clear: left
}

#divBanner img {
   display: block;
   clear: left;
   max-width: 745px;
}

.BannerTagline {
   border: 1px solid white;
   border-radius: 5px;
   padding: 3px;
   margin: 10px;
   font-style: italic;
   max-width: 720px;
}

.BannerCaption {
   font-size: 12px;
   font-weight: bold;
   margin-bottom: 15px;
   max-width: 720px;
}


/* ------------application ------------- */

.AppDiv {
   margin-bottom: 30px;
}

.AppMainWide {
   page: landscape;
}

.AppLinks {
   text-align: right;
   margin-left: 0;
}
button.AppLinks {
   text-align: right;
   margin-left: 20px;
}

.AppHeader {
   margin-top: 15px;
   margin-bottom: 0px;
   padding-left: 10px;
   padding-bottom: 5px;
   font-size: 18px;
   font-weight: bold;
}

.RecordSubHead {
   padding-left: 10px;
   text-align: left;
   font-size: 14px;
   font-weight: bold;
}


/* Style the H3 that are used to open and close the accordion panel */

h3.RecordSubHead,
h3.SMSmsgSend {
   margin: 0px;
   margin-right: 4%;
   margin-bottom: 1px;
   padding: 4px;
   padding-top: 7px;
   padding-left: 15px;
   width: 95%;
   background-color: #BFBFBF;
   color: #444;
   cursor: pointer;
   text-align: left;
   border-bottom: 2px solid #ccc;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   outline: none;
   transition: 0.4s;
   float: left;
}

h3.SMSmsgSend {
   background-color: #EFEFEF;
   width: 100%;
}


/* Add a background color to the H3 if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

H3.RecordSubHead.active,
H3.RecordSubHead:hover,
H3.SMSmsgSend.active,
H3.SMSmsgSend:hover {
   background-color: #ddd;
}

div.TypeCount {
   float: right;
   width: 5%;
   text-align: right;
   padding: 4px;
   font-size: 10px;
   xbackground-color: #BFBFBF;
}


/* Style the accordion panel. Note: hidden by default */

div.panel {
   padding: 10px 18px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   background-color: white;
   display: none;
}


/* The "show" class is added to the accordion panel when the user clicks on one of the H3s. This will show the panel content */

div.panel.show {
   display: block;
}

H3.RecordSubHead:before {
   content: '\02214';
   /* Unicode character for "plus" sign (+) */
   font-size: 13px;
   color: #777;
   margin-right: 5px;
}

H3.RecordSubHead.active:before {
   content: "\02212";
   /* Unicode character for "minus" sign (-) */
}

.ContentText {
   text-align: left;
   padding-left: 10px;
   Padding-Top: 10px;
   Padding-right: 10px;
}

.RecordDisplay {
   font-size: 14px;
}

.RecordDisplay td {
   font-size: 12px;
   padding-left: 20px;
}

.boldText {
   float: left;
   font-weight: bold;
   padding-left: 10px;
}

.Feed {
   font-weight: bold;
   font-size: 12px;
   color: #F38634;
   padding: 5px ;
   text-align: center;
   margin-top: 0px;
}
.Feedback {
   font-weight: bold;
   font-size: 12px;
   color: #F38634;
   padding: 0px 0px 5px 20px;
   text-align: center;
   margin-top: 20px;
}

.FeedbackSession {
	width: 100%;
}
.FeedUp {
   font-weight: bold;
   font-size: 12px;
   color: #F38634;
   padding: 0px 0px 0px 50px;
   text-align: Center;
}

.FeedbackError {
   font-weight: bold;
   font-size: 12px;
   color: white;
   background-color: red;
   padding: 3px 0px 5px 20px;
   text-align: center;
   margin-top: 10px;
   margin-bottom: -32px;
}
.FeedbackAlert {
  font-weight: bold;
  font-size: 1.4em;
  color: black;
  padding: 0px 0px 5px 20px;
  text-align: center;
  margin-top: 20px;
}
.debugMsg {
   font-size: 0.8em;
   font-style: italic;
   background-color: white;
   opacity: 0.4; 
   color: black; 
   padding: 3px ;
   margin: 5px;
   border-radius: 8px;
}
div.lidNoDisplay{
   display:block;
}

/* --------Certification----------- */
#CertificationList {

}
.CertificationLink {
   padding-left: 25px;
}

fieldset.ExamInfo {
   margin-top: 20px;
   margin-bottom: 30px;
   padding: 15px;
   border: 1px solid black;
   border-radius: 10px;
   -webkit-border-radius: 10px;
}
fieldset.ExamSelect, 
div.ExamSelect {
   margin-top: 20px;
   margin-bottom: 30px;
   padding: 15px;
   box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
   -webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
   xcolor: #666;
   background: #E2E2E2;
   border-radius: 10px;
   -webkit-border-radius: 10px;
}
.ExamSelect legend{
   background: #F2F2F2;
   border-radius: 5px;
   -webkit-border-radius: 5px;
  width: fit-content;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 1px;
}   
fieldset.AppFieldset {
   margin-top: 20px;
   margin-bottom: 30px;
   padding: 15px;
   box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
   -webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
   border: 1px solid black;
   border-radius: 10px;
   -webkit-border-radius: 10px;
}
.AppFieldset legend{
   background: #F2F2F2;
   border-radius: 5px;
   -webkit-border-radius: 5px;
  width: fit-content;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 1px;
}   
/* -----------Reports----------- */

.Report {}

table.Report {
   margin-top: 5px;
}

table.Report>tbody>tr>th {
   font-size: 0.625em;
   /* font-variant:small-caps; */
   padding-left: 5px;
   padding-right: 5px;
   padding-bottom: 1px;
   text-align: Right;
   background-color: #f4f4f4;
   border-top: 0px;
   font-style: italic;
}

table.Report>tbody>tr>th:last-of-type {
   border-top-right-radius: 10px;
}

table.Report>tbody>tr>td {
   font-size: 0.75em;
   padding-left: 5px;
   padding-right: 5px;
   padding-bottom: 1px;
   text-align: right;
}

.ReportHeader {
   padding-left: 10px;
   margin-top: 5px;
   font-weight: bold;
   filter: alpha(opacity=75);
   opacity: .65;
}

.ReportFooter {
   padding-left: 20px;
   padding-right: 10px;
}

#ReportsMaster {
   margin-left: 20px;
}

#ReportDiv {
   float: Left;
   margin-left: 0px;
   margin-right: 20px;
   margin-bottom: 20px;
   padding-bottom: 5px;
   padding-right: 10px;
   background-color: white;
}

#ReportDiv .Feedback {
   float:right;
}
#Report1 {
   float: Left;
}

#Report2 {
   float: Left;
}

#Report3 {}

#Report4 {}

.LinkButton {
   padding-left: 0px;
   padding-right: 0px;
}

input[type="Submit"].LinkButton,
input[type="Button"].LinkButton {
   border-radius: 0px;
   padding: 0px 0px 0px 0px;
}

.page-break-before {
   clear: both;
   page-break-before: always;
   color: white;
}


/* ------------Print link ------------- */

#PrintButDiv {
   text-align: Right;
   padding-right: 20px;
   color: #909090;
}

#PrintButDiv a {
   color: #909090;
}

#PrintButDivTop {
   text-align: Right;
   padding-right: 15px;
   color: #909090;
   float: left;
   width: 30px;
}


/* ------------Data tables ------------- */

table.datatable {
   background-color: white;
   margin-left: 0px;
   clear: left;
}

table.datatable thead {
   background-color: #A9A9A9;
   color: white;
   font-weight: bold;
   font-size: 11px;
}

table.datatable tbody td {
   /* border-left: dotted 1px black; */
   border-bottom: dotted 1px black;
   padding: 0px 3px 0px 2px;
   font-size: 13px;
   color: #A9A9A9;
}

table.datatable a {
   color: black;
}

table.datatable tbody td.HeadColumn {
   color: black;
   border: 0px;
   background: #8c906d;
}

table.datatable tbody td.HeadColumnTotal {
   color: black;
   border: 0px;
   background: #8c906d;
   font-weight: bold;
}

table.datatable tbody td.HeadColumn2 {
   color: black;
   border: 0px;
   border-top: 1px solid black;
   background: #D1D6CB;
   padding-bottom: 10px;
}

table.datatable tbody td.HeadColumn2Total,
.dtSubTotalRow {
   color: black;
   border: 0px;
   border-top: 1px solid black;
   background: #D1D6CB;
   font-weight: bold;
   padding-bottom: 10px;
}

table.datatable tbody tr.SubTotalRow td {}

table.datatable tbody tr.dt1stRow td {
   padding-top: 10px;
}

table.DisplayTable {}

.TotalRow {
   font-weight: bold;
}

table.datatable tbody .TableGroupGap td {
   background: lightgrey;
   border: 0px;
}

table.datatable tbody .TableGroupHead td {
   font-weight: bold;
   color: black;
}

#DivData {
   Float: Left;
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 5px;
   padding-bottom: 5px;
   padding-right: 10px;
}

#DivData table.DisplayTable {}


/* --------- Attachments -------- */
#Attachments {
float: left;
width: 100%;
}
#AttachmentUpload {
   clear: left;
}

.ActivityAttachment {
   text-align: right;
}

.AttachmentBody {
   font-size: 10px;
   text-align: left;
}

#ActivityDocs .AttachmentBody {
   text-align: left;
}

.ActivityAttachmentList {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
}

.ActivityAttachmentList a {
   float: left;
   margin-right: 10px;
}

.AttachBut {
	float: right;
}
#AttachmentUpload {
	margin-top: 20px;
}
.ActivityRec1 {
   background-color: rgba(255, 255, 255, 0.5);
}

#Activities table.RecordDisplay {}

#ActivityDocs {
   clear: left;
   padding-left: 10px;
   padding-right: 10px;
   margin-right: 10px;
   float: left;
}

.AttachmentList {
   padding: 0px;
}

#DocsDel {
   clear: both;
}

#DocsDel .Error {
   margin-bottom: 2px;
   margin-left: 40px;
   padding: 20px;
   background-color: #E2E2E2;
   color: red;
   border-radius: 15px;
}

.Attachments4Member {
	
}

/* --------------- Forms  ---------------- */

.form-control {
   height: 25px;
}

#Attachment.form-control {
   height: 42px;
}
select.form-control {
   padding-top: 2px;
   padding-bottom: 2px;
}

.FieldLabel {
   font-size: 9px;
   text-align: right;
   padding-left: 12px;
   vertical-align: top;
}

#ActivityDocs .FieldLabel {
   padding-left: 0px;
}

#AttendedList .FieldLabel {
   padding-left: 0px;
}

.FieldSmall {
   font-size: 0.8em;
}
.FieldItalic {
   font-style: italic;
}
.FieldInfoBox {
   font-style: italic;
   font-size: 0.8em;
  color: black;
  background-color: rgba(255, 255, 255);
  opacity: 0.8;
  padding: 15px;
  margin-left: 30px; 
  margin-right: 30px; 
  margin-bottom: 20px; 
  display: inline-block;
  border-radius: 10px;
  box-shadow: 8px 8px 5px rgba(0, 0, 0,0.4);

}
.FieldExtra {
   font-style: italic;
   font-size: 0.8em;
  xcolor: black;
  xbackground-color: rgba(255, 255, 255);
  opacity: 0.8;
  padding: 5px;
  margin-left: 60px; 

}
.FieldInfo {
   font-size: 12px;
   text-align: center;
   padding-bottom: 12px;
   padding-top: 12px;
}

.FieldData,
.FieldInputRight {
   padding-left: 8px;
}
.roundbox .FieldData {
   padding-left: 30px;
}
.FieldDataRight,
.FieldRight {
   text-align: right;
   padding-right: 10px;
}
.FieldInputRight input {
   text-align: right;
   padding-right: 10px;
}

.FieldDataSmall {
   padding-left: 8px;
   font-size: 8px;
}
.FieldDataSmallLabel {
   text-align: right;
   font-size: 8px;
}
.FieldDataHighLight {
   padding-left: 8px;
   background-color: yellow;
}

.FieldDataStrong {
   padding-left: 8px;
   font-weight: bold;
}

.FieldDataNotes {
   padding-left: 2px;
   font-size: 8px;
   color: black;
}

.FieldDataInvoice {
   text-align: right;
}
.FieldDataNoChange,
.FieldDataVerified input {
font-style: italic;
background-color: darkgrey;
}

.FieldBox {
   padding: 5px;
   background-color: #ddd;
   border-radius: 10px;
}
.RequiredFlag {
   color: Red;
}

.AlertText {
   font-weight: bold;
   background-color: #ddd;
   border-radius: 5px;
}

.ActionLinks {
   text-align: right;
   font-size: 14px;
   color: white;
   padding-right: 10px;
}

.ActionLinks a {
   display: inline-block;
   color: white;
}

#col2o .ActionLinks a {
   color: white;
}

div.ActionLinks {
   float: right;
   margin-top: 5px;
}

.ActionLinksBottom input[type="Submit"],
.ActionLinksBottom input[type="Button"]  {
   display: block; 
}

div.ActionLinksBottom {
   float: none; 
}
.AddMemberForm {
   text-align: right;
   font-size: 14px;
   xcolor: white;
   padding-right: 10px;
   margin-bottom: 5px;
   clear: both;
}

.SearchForm {
   text-align: center;
   font-size: 12px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 7px;
   padding: 15px;
   box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
   -webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
   color: #666;
   background: #E2E2E2;
   border-radius: 10px;
   -webkit-border-radius: 10px;
}

.TopVariableForm {
   text-align: center;
   margin-top: 7px;
   margin-bottom: 20px;
   font-size: 0.7em;
}

.TopVariableForm div {
   float: left;
   padding-right: 20px;
}

.TopVariableForm .BranchFilter {
   padding: 0px;
   padding-bottom: 10px;
}

div.SearchForm div.form-group {
   width: auto;
   display: inline-block;
   margin-left: 3px;
}

div.SearchForm div.form-group>label {
   float: left;
   margin-top: 5px;
   margin-left: 7px;
   margin-right: 3px;
}

div.SearchForm div.form-group>table {
   width: auto;
   display: inline-block;
   float: left;
   margin-left: 3px;
}

.calendarDateInput {
   margin-bottom: 5px;
}


/* --------------- Modules  ---------------- */

#MemberRecord {
   clear: right;
}

#RecordUpdateRequest {
   margin-bottom: 10px;
   padding-bottom: 10px;
}

#RecordUpdateRequest textarea {
   width: 90%;
}

#BottomButton {
   padding: 10px;
   float: left;
}

#AccountDetails {
   padding: 5px;
   border-bottom: 2px solid #A3A3A3;
   border-radius: 5px;
   background-color: #F7F7F7;
}

#MemberInfo {
   padding: 10px;
}

#People_info {
   margin-top: 10px;
   padding: 0px;
   padding-left: 2px;
}

#familyinfo {
   margin-bottom: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid white;
}

#familyinfo a {
   font-weight: normal;
   color: #A0885E;
}

#AttendedList {
   clear:left;
}

#MemberAppl {}

.NewButton {
   font-size: 8px;
   width: 30px;
   height: 20px;
}
.close {
   background: white;
   color: black;
}
.IDdocClose,
.close a {
   color: black;
}

/* --------------- Filter  ---------------- */

.BranchFilter {
   float: right;
   text-align: right;
   padding: 10px;
   font-size: 10px;
}

#BranchFilterSelect {
   float: right;
}

.InFocusFilter {
   float: right;
   text-align: right;
   padding: 10px;
   font-size: 10px;
}

.InFocusFilter input {
   float: right;
   margin-top: 0px;
   width: 20px;
}

.InFocusFilter label {
   margin-top: 6px;
}


/* --------------- BranchDetails  ---------------- */

#BranchDetails {}

#BranchDetails .form-group {
   width: 100%;
   text-align: right;
   clear: both;
}

#BranchDetails .form-group label {
   text-align: left;
   float: left
}

#BranchDetails fieldset {
   width: 100%;
   text-align: right;
   margin-top: 20px;
}

#BranchDetails fieldset legend {
   width: auto;
   float: left font-weight: normal;
   font-size: 0.75em;
}

#BranchDetails .col-sm-4>iframe:nth-child(9),
.BranchMap {
   width: 600px;
   height: 450px;
}

@media (max-width: 765px) {
   #BranchDetails .col-sm-4>iframe:nth-child(9),
   .BranchMap {
      width: 100%;
   }
}


/* --------------- invoices  ---------------- */

#InvBody {
   max-width: 100%;
   padding: 20px;
   background: #f0f0f0;
   margin-top: 10px;
   margin-right: 10px;
}

#divOrganisationName {
   float: right;
   padding: 10px;
   font-size: 1.5em;
   font-weight: bold;
}

#Apply #divOrganisationName {
   float: none;
}

.AddressInfo {
   padding-top: 20px;
   padding-left: 40px;
}

.InvoiceDocName {
   padding-left: 80px;
   padding-top: 30px;
   font-size: 10px;
   float: right;
}

.InvoiceDocNo {
   font-size: 14px;
   font-weight: bold;
}

.DocName {
   width: 95%;
   margin-left: 20px;
   margin-bottom: 5px;
   padding: 10px;
   padding-left: 20px;
   color: #F38634;
   background-color: #F7F7F7;
   border-radius: 10px;
   font-size: 1.875em;
}

.DocName select {
   margin-top: 0px;
   margin-left: 10px;
   font-size: 0.6em;
}

#InvBody .FieldLabel {
   padding-right: 5px;
}

#InvBody .FieldData {
   text-align: left;
   padding-left: 29px;
}

#InvBody .FieldDataRight {
   padding-right: 29px;
}

#InvBody td:nth-of-type(2) {
   padding-left: 10px;
   text-align: left;
}

#InvBody .FieldDataRight>input:nth-child(2) {
   padding-right: 5px;
   text-align: right;
}

#InvBody textarea {
   width: 95%;
}

#TranDocs {
   max-width: 100%;
}


/* ---------------Certificate  ---------------- */

#CertWindow {
   width: 100%;
}
.print-container {
        max-width: 210mm; /* A4 width */
        margin: 0 auto;
}

.certAF{

}
.certEN {
   padding-top: 5px;
   font-style: italic;
}
.cert_top1 {
   font-weight: bold;
   font-size: 18px;
   text-transform: uppercase;
   font-family: Serif;
   text-align: center;
}

.cert_top2 {
   font-weight: bold;
   font-size: 18pt;
   text-transform: uppercase;
   text-align: center;
   border-top: solid 3px black;
   border-bottom: solid 3px black;
   font-style: normal;
}
#divCertChasa {
   float: left;
   margin-Left: 80px;
   margin-top: 10px;
   width: 120px;
}

#divCertLogo {
   float: left;
   margin-Left: 20px;
   margin-top: 10px;
}

#divCertDedicated {
   float: left;
   margin-Left: 20px;
   margin-top: 10px;
}

.cert_header{

}
.cert_header img {
   width: 100%  !important;
}
.cert_text {
   padding-bottom: 0.25cm;
   padding-top: 0.25cm;
}
.cert_text_auth {
   font-size: 0.8em;
   text-align: justify;
   padding-bottom: 0.25cm;
   padding-top: 0.25cm;
}

.cert_name {
   font-size: 12pt;
   text-transform: capitalize;
   padding-top: 0.25cm;
   padding-bottom: 0.25cm;
   letter-spacing: 1pt;
   font-weight: bold;
}
.nopadding {
   padding: 0 !important;
}
.cert_sig {
   text-align: left;
}
.cert_sig img{
   width: 150px;
   border-bottom: solid 1px black;
   float:right;
   margin-left: 30px;
   margin-right: 30px;
}
.signedDate {
   font-size: 0.8em;
   text-align: right;
   clear: both;
}
.voorsitterSignature {
}

.cert_sig_heading {
   font-weight: bold;
}
.cert_sig_name {
   padding-left: 40px;
}
.commissionerOathsSignature {
float:right;
margin-left: 30px;
margin-right: 30px;
}
.commissionerOathsSignature img {
   width: 150px;
   border-bottom: solid 1px black;
}

.cert_footer {
}

.cert_footer img {
   width: 100%  !important;
}

.cert_disclaimer {
   font-size: 8pt;
}

#CertDiv1,
#CertDiv2 {
/*   padding-top: 20px;*/
   font-size: 10pt;
   font-family: Sans-Serif;
   text-align: center;
}

#CertDiv2 {
  background-image: url("images/CertBackground.png");
  background-repeat: no-repeat;
  background-position: 0px 150px ;
}

#CertDiv1 table {
   text-align: center;
   max-width: 15cm;
}

#CertDiv2 table {
   text-align: center;
   max-width: 19cm;
}

#CertDiv1 img {
   width: 120px;
   height: 120px;
   display: block;
   clear: both;
}
#CertDiv2 img {
   width: 120px;
   height: 120px;
   clear: both;
}

#certFrame {
   display: inline-block;
   padding: 30px;
   border-radius: 35px 35px 35px 35px;
   -moz-border-radius: 35px 35px 35px 35px;
   -webkit-border-radius: 35px 35px 35px 35px;
   border-width: 12px;
   border-style: solid;
   border-color: #DFDFDF;
   -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
   box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
/* ---------------membership Card ---------------- */

#MCardDiv {
   width: 816px;
}
#MCardDiv1 {
   padding: 5px;
   font-size: 8pt;
   font-family: Sans-Serif;
   text-align: center;
   border: 1px dotted lightgray;
   border-bottom: 0px;
   width: 60mm;
   height: 44mm;
}

#MCardDiv3 {
   padding: 5px;
   font-size: 8pt;
   font-family: Sans-Serif;
   border: 1px dotted lightgray;
   border-top: 1px solid gray;
   width: 60mm;
   height: 44mm;
   overflow: hidden;
}

#MCardDiv3 table {
   width: 100%;
}

.MCard_top1 {
   font-weight: bold;
   font-size: 12px;
   text-transform: uppercase;
   font-family: Serif;
   text-align: center;
}

.MCard_top3 {
   font-size: 18px;
}

#MCardDiv1 img {
   Width: 55px;
   height: 52px;
}

#divMCardChasa {
   float: left;
   margin-Left: 15px;
   width: 55px;
}

#divMCardLogo {
   float: left;
   margin-Left: 15px;
}

#divMCardDedicated {
   float: left;
   margin-Left: 15px;
}

.MCardDediImg {}

.MCard_name {
   font-weight: bold;
   font-size: 11pt;
   text-transform: capitalize;
   font-family: Sans-Serif;
   letter-spacing: 1pt;
   line-height: 90%;
}

.MCard_text {}

.MCard_top2 {
   xfont-weight: bold;
   font-size: 10px;
   xtext-transform: capitalize;
   xfont-family: 'Palatino Linotype ', Fantasy, Cursive;
   text-align: center;
   padding-bottom: 2px;
}

#MCardDiv3 H4 {
   margin-top: 5px;
   margin-bottom: 0px;
   width: 100%;
}

#MCardDiv3 table {
   margin-left: 5px;
   line-height: 90%;
}

.MCard_text {
   font-size: 90%;
   white-space: nowrap;
}

#MCardDiv3 .MCard_text {
   font-size: 90%;
   white-space: nowrap;
}

.MCard_Kwalifikasie {
   width: 90%;
   height: 1px;
   font-size: 80%;
   white-space: nowrap;
}

.MCardOverlay {
   display: block;
   width: 40px;
   text-align: center;
   font-weight: bold;
   position: absolute;
   z-index: 4;
   top: 47px;
   left: 210px;
}

.MCard_textRight {
   text-align: center;
}

.MCard {
   float: left;
}


/* ---------------Address labels ---------------- */

.AddressData {
   padding: 10px;
   height: 3.7cm;
   width: 7cm;
}

.AddressDataTiny {
   font-size: 7pt;
}

#CommunicationMsg {}

#ConfirmSendBut {
   margin-left: 20px;
   margin-top: 15px;
}


/* ---------------SMS send------------- */

#SMSData {
   Float: Left;
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 5px;
   padding-bottom: 5px;
   padding-right: 10px;
   background-color: white;
   background-color: transparent;
}

#SMSData h3 {
   font-size: auto;
   font-variant: Normal;
}

#SMSData a {
   text-decoration: none;
}

#divSndSMS {
   xbackground-color: #8C906D;
   margin-top: 25px;
   margin-bottom: 10px;
   min-width: 300px;
   text-align: center;
}

#divSndSMS table.DisplayTable {
   width: 650px;
   margin-left: 0px;
}

#divSndSMS table.DisplayTable td.FieldData {
   text-align: left;
}

#divSndSMS .ArticleMainDiv {
   margin-left: 50px;
   margin-right: 50px;
}

#SMSaccount {
   font-size: 9pt;
   Float: right;
   margin-bottom: 10px;
}

.SMSmsgSent {
   font-size: 7pt;
   xpadding-left: 20px;
   color: gray;
}

.SMSmsgReply {
   font-size: 9pt;
   padding-left: 20px;
}

.SMSmsgReply a {
   color: gray;
}

.SMSmsgDate {
   font-size: 8pt;
   color: gray;
}

.SMSmsgSmall {
   font-size: 8pt;
   color: black;
}

.SMSmsgSend {
   font-size: 10pt;
   xpadding-left: 20px;
   font-weight: normal;
}

.SMSmsgTo,
#SMSmsgTo {
   font-size: 8pt;
   padding-left: 30px;
}

#SMSmsgTo td:first-of-type {
   padding-top: 10px;
}

#SMSmsgTo.ui-helper-reset {
   font-size: 8pt;
}

#SMSmsgTo.ui-helper-reset a {
   padding-left: 6px;
   padding-right: 6px;
   text-decoration: underline;
}

.colend {
   padding-left: 12px;
   border-right: 1px solid;
}

.SMSmsgTo td {
   padding-right: 10px;
}

.divDocInset {
   margin-left: 180px;
   color: #909090;
}

.divDocInset th {
   padding-left: 20px;
   font-size: 9pt;
}

.divDocInset td {
   text-align: right;
}

#SMStext {
   padding-left: 40px;
}
#SMStext .divDocInset {
   margin-right: 40%;
}
#SMStext .divDocInset th {
   text-align: right;
}

#SMScreditRequest {
   color: blue;
   padding-left: 50px;
   margin-bottom: 10px;
   text-align: left;
}

.SMStak {
   width: 100px;
   float: left;
   clear: left;
   font-size: 12px;
}

.minitext {
   font-size: 10px;
   color: Black;
}

.minitext input {
   font-size: 10px;
   color: Black;
   text-align: right;
   border: 0;
   background-color: transparent;
}

.minitext input [type="Button"] {
   border-bottom: double gray;
   border-right: double gray;
   background-color: lightgray;
   float: right;
}

.disable {
   background-color: #CF110C;
   color: #fff;
   font-weight: bold;
   padding: 5px;
}


/* ------------ statement ---------- */

#Statement {}

.BankDetails {}

#divBalanceMessage {
   float: left;
   font-weight: bold;
}

fieldset.OfficeBearer>legend:nth-child(1)>span {
   display: block;
}

#OfficeBearers_list .row {
   border-bottom: 1px solid #A0885E;
   margin-bottom: 20px;
}

@media (max-width: 765px) {
   #OfficeBearers_list .row {
      border-bottom: 0px solid #A0885E;
      margin-bottom: 0px;
   }
   #OfficeBearers_list .col-sm-4 {
      border-bottom: 1px solid #A0885E;
      margin-bottom: 20px;
   }
}


/* ---------------- Ledgerinfo ------------ */
#Ledgerinfo th:nth-of-type(4) {
    min-width: 50px;
}

.TransHistory {
   display: none;
}

.TransHistoryButton {
   float: right;
   position: relative;
   z-index: 20;
   top: -27px;
   right: 10px;
}


/* ---------------- Auction ----------------- */

div.topEntry,
div.auctionForm {
   border: 1px solid black;
   border-radius: 15px;
   padding-top: 30px;
   padding-bottom: 30px;
   box-shadow: 5px 10px 18px #888888;
   margin-bottom: 30px;
}

div.topEntry {
   padding-left: 30px;
}

.auctionForm .form-control {
   max-width: 40%;
}

.auctionForm label {
   width: 35%;
   float: left;
   margin-right: 20px;
}

.topEntry span {
   font-weight: bold;
   font-size: 1.2em;
}

#EMember .panel {
	color:black;
}
#EMember .AppHeader {
   font-size: 2.8em;
}
#EMember H3 {
   font-weight: bold;
   font-size: 1.8em;
   margin-bottom: 10px;
}

#EMember p {
	color:black;
}
/* ---------------- PayFast ----------------- */

#PayFastWindow {
min-height: 110vh;
width: 100%;
}

/* ---------------- MTypeTable ----------------- */

div.MTypeTable {
text-align: center;
background-color: white;
font-size: .875rem;
line-height: 1.375rem;

border-radius: 15px;
}
.MTypeTable .HeadRow .AppHeader {
  font-weight: bold;
  font-size: 1.2em; 
  width: 100%;
  display: inline-block;
}
.MTypeTable p {
  margin: 0;
}
.MTypeTable .row {
  border-bottom: 1px solid #ccc; /* Adjust color as needed */
}
.MTypeTable .row:last-child {
  border-bottom: none; /* Remove border from last column */
}
.MTypeTable .col-sm-2:first-child {
  /* Keep existing styles like font-style: italic */
}

.MTypeTable .col-sm-2:not(:first-child) {
  
}
.MTypeTable .col-sm-2 {
}

.MTypeTable .col-sm-2:last-child {
  border-right: none; /* Remove border from last column */
}

.ApplyBut {
  background-color: #0070f6; /* Blue color */
  color: white;
  margin: 5px;
  padding: 5px 10px; /* Adjust padding as needed */
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Dispersed shadow */
  transition: all 0.2s ease-in-out; /* Smooth hover effect */
  font-weight: bold;
}

.ApplyBut:hover {
  transform: scale(1.05); /* Slightly expand on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adjust shadow on hover */
}

input[type="button"].ApplyPay{
   font-size: 1.5em;
}

.ApplyPay span{
   font-size: 0.8em;
   color: blue;
}
.MTypeTable .FieldSmall {
line-height: 1.05rem;
}

/* ---------------- END ----------------- */