/* 
 * File: member_inc/styles_global.css
 * Created 08/21/21 
 * 11/03/21 Added .txt-white
 * 04/14/22 New sticky footer
 * 08/04/23 Added .pt-20
 */

/* ROOT COLORS FONT */

:root {
  --blue: #4380ce;
  --blueicb: #2d67b2;
  --brightltblue: #D0DFF4;
  --lightblue: #b1c4dd;
  --lightestblue: #eef4fb;
  --greenicb: #62b32e;
  --purpleicb: #7a4aaa;
  --lightpurple: #debcff;
  --redbart: #e31f1c;
  --lightred: #eda1a0;
  --orange: #ff9300;
  --yellow: #ffd000;
  --darkyellow: #ffc300;
  --black: #000;
  --darkgray: #555;
  --gray: #999;
  --lightgray: #bbb;
  --lightergray: #ddd;
  --verylightgray: #f5f5f5;
  --white: #fff;
  
  --ffam: Calibri, Arial, Candara, Segoe, "Segoe UI", Optima, sans-serif;
  --boxshad: 0 1px 6px 0 var(--lightgray);
}

/*RESETS*/
h1,h2,h3,h4,h5,h6,img,ul,li,ol,input,lable,textarea,button,p,font,testarea,span {border:none;outline:none;margin:0;padding:0;}
.container { padding: 0px; }
.row.nomarg { margin: 0px; }
.row { margin: 0px; }

/* TEXT */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ffam);
    color: var(--black);
    font-weight: 700;
    line-height: 1.3em;
    text-align: left;
}

h1, h2, h3 {margin: 20px 0px 10px;}
h4, h5, h6 {margin: 10px 0px;}
h1 {font-size:36px;}
h2 {font-size:30px;}
h3 {font-size:24px;}
h4 {font-size:18px;}
h5 {font-size:14px;}
h6 {font-size:12px;}

p {
    font-family: var(--ffam);
    font-size: 16px;
    font-weight: normal;
    line-height: 1.3; 
    color: var(--black);
}

body {font-family:var(--ffam)!important; font-size: 16px;}

.center, .ac {text-align:center;}
.text-small {font-size: 14px; }
.text-smaller { font-size: 12px; }
.text-smallest { font-size: 10px; }
.text-normal {font-size: 16px;}

.text-rollover {
   font-size:14px; 
   color: var(--darkgray); 
   margin:0px; 
}

.txt-white {
   color: var(--white);
}


/* UTILITY CLASSES */
.dnd {
  display: none;
}

.clr, .clear {
    clear: both;
}

.inline-block {
    display: inline-block !important;
}

a.plain-link {
   text-decoration: none;
}
a.plain-link:hover {
   color: initial;
}
a.uline {
   text-decoration: underline;
}

.fleft {float:left}

.mb-0 {margin-bottom: 0px !important;}
.mt-0 {margin-top: 0px !important;}
.ml-0 {margin-left: 0px !important;}
.mr-0 {margin-right: 0px !important;}

.mt-10 {margin-top: 10px !important;}
.mt-20 {margin-top: 20px !important;}
.mt-25 {margin-top: 25px !important;}
.mb-50 {margin-bottom: 50px !important;}
.mb-40 {margin-bottom: 40px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-15 {margin-bottom: 15px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mr-20 {margin-right: 20px !important;}
.mr-15 {margin-right: 20px !important;}
.mr-10 {margin-right: 10px !important;}
.ml-30 {margin-left: 30px !important;}
.ml-20 {margin-left: 20px !important;}
.ml-15 {margin-left: 15px !important;}
.ml-10 {margin-left: 10px !important;}

.ma {margin:auto;}


ul.mt-ml li{    
    margin-top: 10px;
    margin-left: 40px;
}

.px-0 {
   padding-left: 0px !important;
   padding-right: 0px !important;
}

.pl-10 {padding-left: 10px;}
.pr-10 {padding-right: 10px;}
.pt-20 {padding-top:20px;}

.narrow-page {
   width: 100%;
   max-width: 800px;
   margin: auto;
}

.txtarea-styles {
    background-color: var(--white); 
    border: 1px solid var(--lightergray);
    border-radius: 5px!important;
    box-shadow: inset 0px 0px 5px 0px var(--lightblue);
    color: var(--darkgray);
    font-size: 16px; 
    font-weight: normal!important;
    padding: 5px;
}

/* COLOR UTILS */

.font-red {color:var(--redbart)!important}
.font-yellow {color: var(--yellow);  /*for header star*/}
.font-blue { color: var(--blue);}
.font-green { color: var(--greenicb);}
.font-lightblue { color: var(--lightblue);}
.font-gray {color: var(--gray);}
.font-black { color: var(--black);}
.font-purple { color: var(--purpleicb);}
.font-orange { color: var(--orange);}


/* BUTTONS */

.btn {border-radius:90px!important;}

.btn-blue {
     background-color: var(--blue);
     color: var(--white);     
     border: 1px solid var(--blue); }

.btn-blue:hover, .btn-blue:active {
     background-color: var(--blueicb);
     border: 1px solid var(--blueicb);
     color: var(--white);
}

.btn-blueoutline:hover, .btn-blueoutline:active, .btn-blueoutline:focus {
    color: var(--blue)!important;
    background: var(--lightestblue)!important;
    border: 1px solid var(--blue); }
}


.btn-primary.btn-blue.active, .btn-primary.btn-blue:focus {
     background-color: var(--blue);
     border: 1px solid var(--blue);
}

.btn-yellow {
     background-color: var(--yellow);
     border: 1px solid var(--yellow);
     font-size: 14px!important; 
     font-weight: 700;
     line-height: 1.2;
     padding-left: 12px;
     padding-right:12px;
     letter-spacing: 0.02em;
}

.btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus {
     background-color: var(--darkyellow);
     border: 1px solid var(--darkyellow);
}

.btn-primary.btn-yellow.active, .btn-primary.btn-yellow:active, .btn-primary.btn-yellow:focus {
     background-color: var(--darkyellow);
     border: 1px solid var(--darkyellow);
}

.btn-blueoutline {
     color: var(--blue);
     border: 1px solid var(--blue); }

.btn-white {
     color: var(--darkgray);}

.btn-gray {
     background-color: var(--verylightgray);}
.btn-gray:hover {
    background-color: var(--lightergray)!important;
}

.btn-xs {
     padding: 2px 8px; }

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {outline: none;}
.btn.btn-blue:focus, .btn.btn-blue:active:focus, .btn.btn-blue.active:focus, .btn.btn-blue.focus, .btn.btn-blue:active.focus, .btn.btn-blue.active.focus {color: var(--white);}
.btn.dnd {display:none}
.btn .fas.fa-arrow-right {margin-left: 8px;}
button.edit_button {margin-top:15px;}

/* DIVS */

.basic-div {
   background-color: var(--white);
   border-radius: 20px;
   box-shadow: 0 1px 6px 0 var(--lightgray);
   padding: 0px 30px 5px 30px;
   width:auto;   /*often - but not always -> width: 1100px;*/
}

.adhoc {
   border-radius: 10px;
   margin: 10px auto; /*auto for pages with message but no container*/
   padding: 10px 20px;
   width: 1100px;
}

/*.adhoc*/.message1 {
   background-color: var(--verylightgray);
   border: .5px solid var(--lightgray);
   border-bottom:6px solid var(--lightgray);
   box-shadow: 0 1px 5px 0 var(--lightblue);
}

/*.adhoc*/.message2 {
   background-color: var(--lightestblue);
   border: .5px solid var(--lightblue);
   border-bottom:6px solid var(--lightblue);
   box-shadow: 0 1px 10px 0 var(--white);
}

/*.adhoc*/.message3 {
   background-color: var(--white);
   border: .5px solid var(--lightgray);
   border-bottom:6px solid var(--lightgray);
   box-shadow: var(--boxshad);
}

/*.adhoc*/.message4 {
   background-color: var(--blue);
   border-bottom:6px solid var(--blueicb);
}

/*.adhoc*/.message5 {
    background: var(--lightestblue);
    box-shadow: 0 1px 5px var(--lightblue);
    border: 1px solid var(--lightergray);
}

.adhoc.message2.spmarg {margin:30px auto}

/*idletimeout div*/
#idletimeout { background:#ff9306; border:3px solid red; color:#fff; font-family:arial, sans-serif; text-align:center; font-size:16px; padding:10px; position:relative; top:0px; left:0; right:0; z-index:100000; display:none; }
#idletimeout a { color:#fff; text-decoration:underline; }
#idletimeout span { font-weight:bold }

/*js data*/
#mu {display:none;}

@media (max-width: 1200px) {
    /*.adhoc*/ .message1, .message2, .message3, .message4 {
        width: auto;
    }

}

/* HEADER */

/*main nav*/
.navbar.mb-0, .navbar .container {
    max-width: 1100px;
    margin: 0 auto;
}  /*removed  margin:auto; 8/2021 - gives tall top margin on blank content page */

/*For BS override to prevent side movement*/
.container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
    margin-right: 0!important;
    margin-left: 0!important;
}
@media (max-width: 768px){
    .right-header {
        margin-left: 0!important;        
    }
}
/*body {border:1px solid} to diag*/
/*End BS override to prevent side movement*/

.icb-nav {
  border-radius: 0px;
  min-height:0px;
  background-color: var(--black);
  border: 0;
}

.icb-nav>.container {
   width:100%;
}

.icb-nav .navbar-nav>li>a {
   background-color: var(--black);
   color: var(--white);
   font-family: calibri;
   border: none;
   outline: none;
   cursor: pointer;
   padding:0 20px;
   transition: 0.3s;
   font-size: 16px;
   height: 30px;
   line-height: 30px;
}
.icb-nav .navbar-nav>li>a:hover, .icb-nav .navbar-nav>li>a:focus {
   background-color: var(--lightgray);
}
.icb-nav .navbar-nav>.active>a {
   border: 1px solid var(--lightergray);
   border-bottom: 1px solid var(--lightergray);
}
.icb-nav .navbar-nav>.active>a, .icb-nav .navbar-nav>.active>a:hover, .icb-nav .navbar-nav>.active>a:focus {
   background-color: var(--white);
   color: var(--black);
}
.navbar-brand {
  height:auto;
  padding:5px 15px;
}
.navbar-brand img {
  height:57px;

/*center logo on donate page*/}
.navbar-brand.donate {
    float:none;
}
.navbar-brand.donate img {
    margin:auto;
}

.navbar-toggle {
  padding: 2px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.icon-navbar {
   margin-right:4em;
}
.icon-navbar li {
   background-color: var(--white);
    border-radius: 60px;
    border: 1px solid #fff;
    padding: 9px;
    width: 43px;
    height: 43px;
    margin: 0 auto !important;
    display: block !important;
}
#header-profile {
   float: left;
}
#header-profile>img {
   width:45px;
   border-radius: 90px;
   float:left;
   margin: 0 10px;
}
#header-profile>div {
   float:left;
}
#header-profile #profile-links {
   margin: 5px 10px;
}
#header-profile #profile-links a {
   display: block;
}
.right-header {
   margin-top: 12px;
   margin-bottom:0px;
}

.right-header .icon-div a {
    color: var(--black);
}

/*Allow centering of bottom line in mobile - also see media query */
#header-profile #profile-links {
    text-align: left;
}
.nav-centered {
    display: table;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .icb-nav .navbar-nav > li > a {
        padding: 0 15px!important;
    }
}

@media (min-width: 768px) {
    .right-header { /*icons on top line over 768*/
        float: right;
    }

   .icb-nav .navbar-nav {
      float:none;
      margin: 0 auto;
      display: table;
      table-layout: fixed;
   }
}

@media (max-width: 767px) {
   .right-header {
      float: none; /*icons on second line under 768*/
      margin: auto!important; /*Center second line in mobile */
      /*width: 420px;  DO NOT USE HERE!!!*/
     }

   .right-header>.icon-wrapper:first-child {
      position: absolute;
      top:10px;
      right: 10px;
   }

}

/* HEADER PARTNER LOGOS */

.partnerlogo {
   height: 57px !important;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}
.partnerlogo.accenture {
   width: 100px;
   background-image: url(../../standard/images/member/subsite-logo/accenture-logo.png);
}
.partnerlogo.adobe {
   width: 123px;
   background-image: url(../../standard/images/member/subsite-logo/adobe-logo.png);
   margin-top: .3em;
}
.partnerlogo.att {
   width: 100px;
   background-image: url(../../standard/images/member/subsite-logo//att-logo.png);
   margin-top: .3em;
}
.partnerlogo.vmp {
   width: 60px;
   background-image: url(../../standard/images/member/subsite-logo/vmp-logo.png);
   margin-top: .3em;
}
.partnerlogo.salesforce {
   width: 65px;
   background-image: url(../../standard/images/member/subsite-logo/salesforce-logo.png);
   margin-top: .3em;
}

.partnerlogo.jpmchase {
   width: 300px;
   background-image: url(../../standard/images/member/subsite-logo/jpmchase-logo.png);
   margin-top: .3em;
}

@media (max-width: 768px) {
   .partnerlogo.jpmchase {
       width: 133px;
       margin-top: 0;
    }
}

/*FOOTER*/

/*#main_footer a.btn {position: relative;bottom: .4em;}*/
#main_footer a.btn {
position: relative;
bottom: .6em;
margin-left: 15px;
padding: 0px 10px;
}
#main_footer a {color: var(--gray);padding: 0 .2em; line-height: 30px;}
#main_footer a i {font-size: 30px;color: var(--gray);}
#main_footer a i:hover {color: var(--darkgray);}
#main_footer {color: var(--gray); padding:10px 0px; border-top: 1px solid var(--verylightgray); line-height:30px; /*display:none;*/}

#footer {
   border-top: 1px solid var(--lightergray);
   padding-top:1em;
   padding-bottom: 1em;
   color: var(--gray);
}
#footer>.row {
   height:30px;
   line-height:30px;
}
#footer a {
   color: var(--gray);
   padding:0 .35em;
}
#footer a i {
   font-size: 30px;
   color: var(--gray);
}
#footer a i:hover {
   color: var(--darkgray);
}

/*BS sticky footer*/
/* This version adds padding due to line js svg's*/
/*
html {position: relative; min-height: 100%;}
body {margin-bottom: 60px;}
#main_footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; 
}
*/

/*BS sticky footer*/
.content_st {min-height: calc(100vh - 80px);}
#main_footer{height: 60px;}
/*
body, html { 
    margin: 0!important;
}
*/




/* NAV TABS AND ACCORDIONS */

.nav-tabs {
   border: 0;
}
.nav-tabs>li>a {
   margin-right: 30px;
   margin-bottom: 0px;
   font-weight: 700;
   color: var(--lightgray);
   /*letter-spacing: 0.05em;
   text-transform: uppercase;*/
   border: 0;
   padding: 0px;
}
.nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
   border: 0;
   background:none;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
   color: var(--blue);
   border: 0;
   border-bottom: 3px solid var(--blue);
}
.tablist-container {
   border-bottom: .5px solid var(--lightergray);
}

a#netmap_tab {
    margin-left: 30px;
}

/*Tab styles*/
.nav.nav-tabs {background: var(--white)!important; max-width: 1100px; border-bottom: .5px solid var(--lightergray); margin-left: 0!important;} /*was width 1100*/
.nav-tabs>li>a {color: var(--darkgray); font-weight:bold; padding-bottom: 3px;} /*removed text-transform: uppercase;*/
.nav-tabs > li.active > a:hover {color: white; background-color: var(--blue); border-bottom: 3px solid var(--blue);} 
.nav-tabs > li.active > a { background-color: white!important}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {color: var(--blue);}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {color: var(--blue); border: 0; border-bottom: 3px solid var(--blue);} /*Jim*/
.tab-content {max-width:1100px; margin: auto;}


/*DIAGS*/
div.sgi_diag {position:absolute; top:300px; left:10px}
div.wthit {position:absolute; top:10px; right:10px; font-weight:bold; color:blueviolet;}
#curriccontentcell p.local_diag_info {text-align:center!important;font-size:10px!important;} /*local only*/
#jsdiag {display:none; width: 800px; word-wrap:break-word; border:1px solid; padding:3px;} /*for testing only*/
.local_diag {position:absolute; top:5px; left:10px; padding:1px; border:1px solid lightgray;}
.local_map_diag {position:absolute; top:2px; left:50%; padding:1px; border:1px solid lightgray;}
.local_diag.yb {position:absolute; top:35px; left:10px; padding:1px; border:1px solid lightgray;}
.local_answer_id {color:white; font-size:10px;}
.local_email_diag_msg {position:absolute; top:0; left:250px; font-size:16px;}

@media (max-width: 768px) {
    .local_diag {display:none; top: 74px;left: 158px;
    }
}

/*troubleshooting*/
/*
p.test { border: 1px solid red; height: 30px; width: 200px; }
#sizebar { width: 320px; height: 10px; background-color: red; display: none; }
.re {border:1px solid red!important;}
.bl {border:1px solid blue!important;}
.gr {border:1px solid green!important;}
.ye {border:1px solid #FF0!important;}
.bb {border:1px solid #000!important;}
[class*="col-sm-"]  {border:1px solid red;}
.col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5  {border:1px solid red;}
.col-md-3 {border:1px solid green;}
.col-sm-4 {border:1px solid blue;}
.col-xs-12  {border:1px solid red;}
.col-sm-12  {border:1px solid blue;}
.col-md-12  {border:1px solid red;}
@media (max-width: 768px) {[class*="col-xs-"]  {border:1px solid red;}}
@media (min-width: 768px) and (max-width: 992px) {[class*="col-sm-"]  {border:1px solid blue ;}}
@media (min-width: 992px) and (max-width: 1200px)  {[class*="col-md-"]  {border:1px solid green;}}
@media (min-width: 1200px) {[class*="col-lg-"] {border:1px solid orange;}}
*/