body {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #858585;
	-webkit-font-smoothing: antialiased;
}
@font-face {
	font-family: star;
	src: url(../fonts/star.eot);
	src: url(../fonts/stard41d.eot?#iefix) format('embedded-opentype'), url(../fonts/star.woff) format('woff'), url(../fonts/star.ttf) format('truetype'), url(../fonts/star.svg#star) format('svg');
	font-weight: 400;
	font-style: normal;
}

h3, p{
    font-family: sans-serif;
    font-family: 'Open Sans', sans-serif;
}

section .wrapper {
  padding: 2rem;
}

.transaction-section{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.transaction-wrapper{
    width:100%;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    box-shadow: 0px 0px 10px 1px #bc722a;
    padding:1rem;
    border-radius: .3rem;
}

.transaction-box{
    width:100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
    
}

.box-section{
    border-radius:.1rem;
    height:100%;
}


.transaction-section{
    overflow: auto;
}

.transaction-span{
    overflow:auto;
}


.transaction-span{
    margin-bottom:.5rem;
}

.transaction-span h3{
    color:red;
    font-weight:400;
    font-size:.9rem;
}

.trans-box{
    width:20rem;
}

.wider-span{
    width:180rem;
}

.trans-box h3{
    color:#222;
    background-color:#ededed;
    border-radius:0rem;
    border-right:2px solid #fff;
    padding:.5rem;
    font-size:1.2rem;
    width:100%;
}

.trans-box p{
    color:#666;
    font-size:1rem;
    padding:.5rem;
}

.deposit-span{
    width:264rem;
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:flex-start;
    overflow:auto;
    margin-bottom:2rem;
    background-color:#fff;
}

@media screen and (min-width:600px){
    .transaction-section .wrapper{
      max-width:100%;
      padding:0;
  }
}