/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */

input,
.StripeElement {
  height: 40px;
  padding: 10px 12px;

  color: #32325d;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 4px;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

input:focus,
.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}
#card-errors{border-color: #fa755a; color: #fa755a;}
.card-button {
    border: none;
    border-radius: 4px;
    outline: none;
    text-decoration: none;
    color: #fff;
    background: #32325d;
    white-space: nowrap;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-decoration: none;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
    float: left;
    margin-left: 12px;
    margin-top: 28px;
}
.card-button:hover{cursor: pointer;background: #333333; }
body{background-color:#f5f5f5; font: 400 13.3333px Arial; margin: 0px; font-family: 'Open Sans', sans-serif;}
.wrapper{
    width: 100%;
    max-width: 600px;
    margin: auto;
}
.zuenter{width: 90%; margin-bottom: 8px;}
.zuenter2{width: 95%; margin-bottom: 8px;}

.col1{ width: 49%; margin-right: 1%; float: left;}
.col2{ width: 49%; margin-left: 1%; float: left;}
.zesthint{padding:0 8px 10px;}
.zdivide{display:inline-block; width:100%; padding-top:20px; margin-bottom:20px; border-bottom:1px solid #f6921e;}

#zestheader{height: 42px; background-color:#32325d; color:#FFFFFF; float: left; width: 100%;}
.zesthcontainer{ margin:auto; max-width: 1245px;}
#zestlogo{float: left;}
#va{float: left; line-height: 40px;padding-left: 5%; font-weight: bold;}

#va a{background-color: #FF0000; color: #FFFFFF; padding: 5px;}
#va a:hover{background-color: #000000;}
#zesthlinks{float:right; padding-right: 5%;}
a.announce{color:#FFFFFF; margin-right:30px; line-height: 40px; font-size: 20px;}
a.logout{color:#FFFFFF; line-height: 40px; font-size: 20px;}
#container{max-width:1245px; margin: auto;}
#nav{float:left;  width: 25%; background: linear-gradient(90deg, rgba(247,247,250,1) 0%, rgba(239,239,242,1) 100%); min-height: 500px; padding-top:40px;}
#main{float:left; width: 75%; padding: 5%; box-sizing: border-box;}

.navheader{font-size:30px; font-weight: 600; padding: 5% 20% 5% 10%;box-sizing: border-box;}
#nav a{display:block; color:#32325d; width: 100%; padding: 7% 10%; font-size:20px; text-decoration: none;border-left:5px solid #f7f7fa; box-sizing: border-box;}
#nav a:hover{background-color:#f8f8f8; border-left:5px solid #F6921E;}
#nav a.active{ background-color:#32325d; color:#FFFFFF; border-left:5px solid #F6921E; font-weight: 600;}
#nav a i{margin-right: 20px;}
#welcome{float:left; padding: 2%; background-color:#FFFFFF; width:100%; position: relative; box-sizing: border-box;}

.greetingtitle{font-size: 24px;font-weight: 600; color: #32325d; margin-top: 10px;}
a.logoutbutton{position: absolute; right:4%; top:30%;  padding: 10px 20px; border:1px solid #dddddd; border-radius: 3px; text-decoration:none;}
a.logoutbutton:hover{background-color:#32325d; color:#FFFFFF;}
#maincontent{float:left; padding: 5%; background-color:#FFFFFF; width:100%; position: relative; margin-top: 20px; min-height: 500px; box-sizing: border-box;}


.minfo{float: left; width: 100%;  padding:10px 0px; border-bottom: 1px solid #dddddd; margin-bottom:1px; font-size:14px;}
.minfolabel{float:left; font-weight: 600; width: 30%;}
.minfoval{float:left; width: 70%; text-align: right;}
.minfo .pos{color:green; font-weight: bold;}
.minfo .neg{color: red; font-weight: bold;}

.tranitem{float:left; padding:1%; width: 14%;}

.tranitem.trandate{width: 58%}
.tranitem.tranamount{width: 13%}
.tranitem.trantype{width: 13%}
.tranitem.tranlink{width: 8%}
.tranitem.tranlink a{border: 1px solid #dddddd; padding: 10px 20px; border-radius: 3px; background-color:#eeeeee; color:#32325d;}
.tranitem.tranlink a:hover{background-color:#32325d;color:#FFFFFF;}

.addupdateprofile input{width:100%; border:1px solid #F6921E; 
    padding: 0px 12px;
}


.secret-icon {
    float: right;
    margin-left: -25px;
    margin-top: -30px;
    position: relative;
    z-index: 2;
    color: #999;
    font-size: 18px!important;
}
.secret-icon:hover{cursor:pointer;}

input[type="text"]:disabled {
  background: #eeeeee;
}
input[type="text"]:read-only {
  background: #eeeeee;
}

a.dboard{
	width: 46%;
    float: left;
    background-color: #f5f5f5;
    color: #32325d;
    padding: 3%;
    box-sizing: border-box;
    margin: 2%;
    border-radius: 10px;
    min-height: 150px;
	border: 1px solid #dddddd;
	text-decoration: none;
}
a.dboard h3{margin-top:0px; text-transform: uppercase; border-bottom:1px solid #F6921E;}

a.dboard:hover{background-color: #32325d; color:#FFFFFF;}