/*--------------------------------------------------------------------- 
File Name: style.css 
---------------------------------------------------------------------*/
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-weight: normal;
}

/*--------------------------------------------------------------------- 
import Fonts 
---------------------------------------------------------------------*/
/*--------------------------------------------------------------------- 
basic 
---------------------------------------------------------------------*/
header {
     display: flex;
     justify-content: space-between;
}

body {
     color: #666666;
     font-size: 14px;
     font-family: Vazirmatn, sans-serif;
     line-height: 1.80857;
     font-weight: normal;
     background: url(../images/body_bg.jpg);
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
     height: 100vh;
     padding: 0;

}

a {
     text-decoration: none;
}

.text_align_center {
     text-align: center;
}

.text_align_left {
     text-align: left;
}

.text_align_right {
     text-align: right;
}

/*--------------------------------------------------------------------- 
header 
---------------------------------------------------------------------*/

header {
     background: #0f132d;
     width: 100%;
     height: fit-content;
     padding: 10px 10px 00px 10px;
}

.logo a {
     color: #fff;
     font-size: 25px;
     font-weight: bold;
}

.refresh {
     margin: 10px 15px;
     transform: rotate(45deg);
     transition: all 0.5s;
}

.refresh:hover {
     cursor: pointer;
     filter: invert(8%) sepia(6%) saturate(3980%) hue-rotate(182deg) brightness(95%) contrast(87%);
}

/** wallet **/

.wallet {
     padding: 0px 25px;
}

.wallet_box {
     background: #fff;
     margin-bottom: 30px;
     transition: ease-in all 0.5s;
     padding: 2px 0px;
     border-radius: 10px;
}

.wallet_box h3 {
     color: #343232;
     font-size: 20px;
     text-transform: uppercase;
     transition: ease-in all 0.5s;
     font-weight: bold;
     line-height: 22px;
     margin: 15px 0;
}

.wallet_box img {
     margin-top: 10px;
}

#wa_hover:hover.wallet_box {
     background: #face34;
     transition: ease-in all 0.5s;
}
.nobitex img{
     filter: invert();
}
#wa_hover:hover i img {
     
     /* filter: invert(); */
     transition: ease-in all 0.5s;
}

#wa_hover:hover.wallet_box h3 {
     color: #fff;
     transition: ease-in all 0.5s;
}

#wa_hover:hover.wallet_box p {
     color: #fff;
     transition: ease-in all 0.5s;
}


/** end wallet **/

/* lists */
.container {
     width: 100%;
     display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
     gap: 10px;
     padding: 0 10px;
 }
 
.lists {
     width: 50%;
     border: 2px silver solid;
     border-radius: 10px;
     padding: 0px 20px;
     margin: 15px auto;
     background: white;
     height: fit-content;
}

.lists h3{
     text-align: center;
     font-weight: bold;
}
 
.coin {
     width: 100%;
     display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	
}

.name, .price {
     font-weight: bold;
     color: #333333;
     align-self: center;
     width: 50%;
     font-family: 'Alata';
}

.price {
     text-align: right;
}
/* end lists */

.btn {
     display: inline-block;
     border-radius: 10px;
     width: calc(100% - 20px);
     background: lightblue;
     padding: 10px 10px; 
     margin: 0px 10px 10px 10px;
     font-family: Vazirmatn;
     cursor: pointer;
     color: #0f132d;
     font-weight: bold;
     text-align: center;
}

.exchange {
     width: 100%;
}

.exchange p {
     color: white;
     font-weight: bold;
     font-size: large;
     text-align: center;
     margin-bottom: 0px;
}

.wrapper {
     background: white;
     margin: 0 10px;
     border-radius: 10px;
     padding: 0 10px 10px 10px;
     color: black;
     justify-content: center;
     justify-items: center;

}

.wrapper h2 {
     padding-top: 10px;
     padding-right: 10px;
     margin-bottom: 0px;
}
input {
     display: block;
     width: 90%;
     border-top-color: #d23a3a00;
     border-right-color: #d23a3a00;
     border-left-color: #d23a3a00;
     margin: 10px auto;
     padding: 10px 5px;
     font-weight: bold;
}

.input:focus {
     border: thin solid yellow;
}

.btn-primary {
     width: 95%;
     margin-top: 15px;
     background: lightblue;
     border-radius: 10px;
     border-bottom-color: #d23a3a00;
     cursor: pointer;
     font-family: Vazirmatn;
}

.message {
     text-align: center;
     background: white;
     padding: 15px 15px !important;
     width: 90%;
     margin: 0 auto;
     border-radius: 10px;
     font-weight: bold;
     padding: 15px 0;
     box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.59);
}

p {
     font-weight: bold;
}

.message h3 {
    font-weight: bold;
    color: black;
}