/*----------------------------------------------------------------------------------|  www.vdm.io  |----/
				Infinity Coders 
/-------------------------------------------------------------------------------------------------------/

	@version		1.0.2
	@build			17th May, 2021
	@created		26th April, 2021
	@package		IBank
	@subpackage		iuser.css
	@author			Priv8 Joker <http://www.icoders.com>	
	@copyright		Copyright (C) 2021. All Rights Reserved
	@license		GNU/GPL Version 2 or later - http://www.gnu.org/licenses/gpl-2.0.html
  ____  _____  _____  __  __  __      __       ___  _____  __  __  ____  _____  _  _  ____  _  _  ____ 
 (_  _)(  _  )(  _  )(  \/  )(  )    /__\     / __)(  _  )(  \/  )(  _ \(  _  )( \( )( ___)( \( )(_  _)
.-_)(   )(_)(  )(_)(  )    (  )(__  /(__)\   ( (__  )(_)(  )    (  )___/ )(_)(  )  (  )__)  )  (   )(  
\____) (_____)(_____)(_/\/\_)(____)(__)(__)   \___)(_____)(_/\/\_)(__)  (_____)(_)\_)(____)(_)\_) (__) 

/------------------------------------------------------------------------------------------------------*/

/* CSS Document */

.main-board{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    margin: 10px;
    width: 80%;
    border: 1px solid aqua;
    border-radius: 5px;
}
.refer_id_main{
    /*border: 1px solid darkseagreen;*/
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    /*min-height: 250px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.input-reflrg {
    width: 350px;
}
/*button*/
/*#refbtn_ctrl, #start-ap, .btn{
    background: #164873;
    color: aliceblue;
    border-radius: 5px;
    padding: 3px 12px;
}*/
/*.btn-check{
    background: #164873;
    color: aliceblue;
    float: right;
    border-radius: 5px;
    padding: 3px 12px;
}*/

.btn:hover{
    color: #fff;
}

.error-refcode{
    background: #bb2d2d;
    color: white;
    text-align: center;
    margin: 12px;
}

.start_main, .idcard-main{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border: 1px solid aliceblue;
    padding: 25px;
    border-radius: 5px;
    align-items: center;
    background: white;
    width: 100%;
}
#titupload{
    font-size: x-large;
    margin: 10px;
}
.appli-name{
    display: inline-flex;
    font-size: 1.5em;
    flex-basis: 100%;
    align-items: baseline;
    padding: 10px;
    width: 100%;
    margin: 20px;
}
#appname-dsg{
    display: flex;
    flex-basis: 60%;
    text-transform: uppercase;
    text-indent: 1.5rem;
    flex-wrap: wrap;
    
}
#applabel-dsg{
    flex-basis: 60%;
}

@media only screen and (max-width: 415px){
    .appli-name{
        display: inline-block;
    }
    .refer_id_main, #refer_id{
        width: 100%;
        
    }
}

.stepactive{
    background: #3d3db0;
    display: block;
    height: 100%;
    color: aliceblue;
    text-align: center;
    padding-right: 12px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

#errno{
    color:red;
    padding: 10px;
    text-align: center;
}

.frm1{
/*    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;*/
    width: 100%;
    align-content: center;
    justify-content: center;
}

.app_start{
    background: #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    margin: 10px;
    /*width: 100%;*/
    /*border: 1px solid darkcyan;*/
border-radius: 5px;
}
.control-label, .control{
    padding: 10px;
/*    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;*/
}
#flabel{
    margin-right: 25px;
}
#blabel{
    display: flex;
  margin-left: 5px;
  float: left;
  padding: 5px;
}
#contselet{
    float: right;
    width: 285px;
}
.ref_title{
    /*font-size: large;*/
    color: #4a5bb7;
    font-size: 1.5em;
}
.app-notice{
    display: flex;
    font-size: medium;
    width: 100%;
    justify-content: right;
    padding: 10px;
}
#app-noflt{
    padding: 10px;
    background: #fdfcfc;;
    border: 1px aliceblue solid;
    border-radius: 3px;
    overflow: hidden;
    text-align: right;
    width: 100%;
}
#a-time{
    padding: 10px;
    color: #bb2d2d;
}
#a-email{
    padding: 10px;
    color: #003bb3;
}
.prela{
    position: relative;
    display: flex;
}
.input-phone{
    padding: 5px;
}
#dialcode{
    /*position: absolute;*/
    background: #dee3e7;
    padding: 4px 8px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
#fullname{
    background: transparent;
    border: none;
}
.btn-right{
    padding: 2px;
    margin: 10px;
}

.titupload{
    font-size: large;
    color: #333333;
}
.step-note{
    cursor: default;
    opacity: 1;
    background: #f5f7fa;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    padding: 0;
    height: 30px;
    margin: 0 0 8px;
    justify-content: center;
    padding: 3px 32px 0 5px;
}
.section-one, .section-two, .section-three{
    font-family:  sans-serif;
    text-align: center;
    margin: 10px;
    width: 100%;
    border: 1px solid darkgray;
    border-radius: 5px;
    padding: 15px;
}
.doctype{
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 calc(16.66667% + 1px);
    margin-bottom: 30px;
    background: #fdfeff;
    flex-flow: wrap;
    border-radius: 3px;
    text-align: center;
}
#typeupload{
    width: 100%;
}
.upload-info{
    background: #fdfeff;
    display: flex;
    padding: 20px;
    border-radius: 5px;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-basis: 30%;
    align-content: center;
}
#idesc, #desc-upload{
    /*padding: 5px;*/
    justify-content: center;
    display: flex;
    flex-direction: column;
    width: 100px;
}
#imgpt{
    width: 102px;
    height: 100px;
}
.idtype{
    display: inline-block;
    cursor: pointer;
    text-align: center;
    padding: 10px;
}
.main-title{
    display: flex;
    font-weight: 600;
}
.section-one{
    /*background: lightblue;*/
}
#title{
    font-size: large;
}
#img-align{
    display: flex;
    padding: 15px;
}

.dropzone-main {
  border: 2px dashed #dee3e7;
  border-radius: 3px;
  padding: 15px;
  margin-top: 20px;
  width: 100%;
  height: auto;
  text-align: center;
  background: #f0f2f4;
  cursor: pointer;
  transition: background 300ms ease,border 300ms ease;
}

.dropzone-main .dropzone-img {
  background-image: url(../images/img-upload.svg),none;
  background-position: 0 0;
  margin-top: -85px;
  width: 86px;
  height: 78px;
  position: relative;
  top: 88px;
  left: 50%;
  margin-left: -43px;
  transition: all .15s ease;
  animation: move 1s linear infinite;
  height: 200px;
  background-repeat: no-repeat;
}
.dropzone-main .dropzone-img2 {
  background-image: url(../../../../media/com_bank/images/up_slf.svg),none;
  background-position: 0 0;
  margin-top: -85px;
  width: 86px;
  height: 78px;
  position: relative;
  top: 88px;
  left: 50%;
  margin-left: -43px;
  transition: all .15s ease;
  animation: move 1s linear infinite;
  height: 200px;
  background-repeat: no-repeat;
}
.dropzone-main {
  text-align: center;
  cursor: pointer;
}
#start-proceed{
    background: red;
}

#gender{
    justify-content:  space-around;
}
.reftitle{
    font-weight: 700;
}
.reftitle{
    text-align: center;
    font-size: large;
    color: #003399;
    font-style: italic;
    width: 350px;
}
#Reference-lbl{
    font-weight: bold;
}

.cpayment{
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    padding: 5px 10px;
}
.card-error{
    padding: 5px 25px 26px 18px;
    text-align: center;
    margin: 6px auto;
    border-radius: 5px;
    position: absolute;
    background: url("../../../../media/com_bank/images/check_list.png") no-repeat;
    top: 2px;
    right: 0;
    background-position: -2px -805px;
}
.xcard-error{
    padding: 5px 25px 26px 18px;
    text-align: center;
    margin: 6px auto;
    border-radius: 5px;
    position: absolute;
    background: url("../../../../media/com_bank/images/check_list.png") no-repeat;
    top: 2px;
    right: 0;
    background-position: -2px -805px;
}
.crypto-box{
    margin: 10px;
    padding: 10px;
}
.crypto-info, .crypto-payment, .cardpay-pay{
    position: relative;
}
.cpaytab{
    background:#fbfbf8;
    padding: 10px;
    border: 1px #a5adb9 solid;
    border-radius: 5px;
    margin: 20px 0 0 0;
}
.cpsamt{
    padding: 5px;
    font-style: italic;
}
.spinna{
    padding: 5px;
    text-align: center;
    font-size: small;
    font-style: italic;
}
.btcamt{
    font-size: medium;
    display: flex;
    justify-content: space-evenly;
}
.btcontainer{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px;
    padding: 10px;
}
.paytime, .paytime1, .paytime2{
    display: flex;
    justify-content: end;
}
#timepc{
    font-weight: 500;
    margin-right: 5px;
}
#timerem, #timerem1, #timerem2{
    font-weight: 600;
    color: red;
    margin-left: 5px;
}
#payname,#paynetwork{
    font-weight: 700;
}
#btclogo{
    margin-left: 40px;
}
#copyButton2, #copyButton1{
    padding: 5px;
    cursor: pointer;
}
.icon-copy{
    height: 30px !important;
    width: 30px !important;
    font-size: x-large;
    position: relative;
    top: 10px;
}
.btcaddr{
    position: relative;
    display: flex;
}
#copymsg1, #copymsg2{
    z-index: 512;
    position: absolute;
    border: 1px solid bisque;
    background: lightgoldenrodyellow;
    left: 105px;
    padding: 5px;
    border-radius: 5px;
}
.accinfo{
    width: 700px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-flow: wrap;
    max-width: fit-content;
}
.basedrop{
/*    display: flex;
  align-items: baseline;*/
padding: 10px;
}
.paymode{
    display: inline-flex;
    flex-direction: column;
  width: -moz-available;
  margin: 20px;
}
.ccontainer{
    padding: 10px;
  margin: 10px;
  display: flex;
  flex-flow: column;
}
.buttonspc{
    padding: 10px 0 10px 0;
}
.paymaster{
/*    display: inline-flex;
  justify-content: space-evenly;*/
}
#psefa{
    display: flex;
  width: 100%;
  flex-direction: column;
}
.bankdept, .sefadept{
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: aliceblue;
  font-weight: 700;
}
#sefasup, #sefasup{
    text-transform: capitalize;
}

.paymentctrl{
    display: flex;
    flex-direction: column;
    max-width: max-content;
}

.paytm{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mainapp{
    display: flex;
  flex-direction: column;
  max-width: max-content;
}
#siteForm{
    display: flex;
  flex-direction: column;
  align-items: center;
}

.changepay{
    /*display: inline-flex;*/
}
.btn:hover{
    color: #fff;
}
#ppams{
    color: cadetblue;
    font-style: italic;
}
#payproc{
    position: absolute;
  left: 500px;
  top: 50%;
  transform: translate(25px,100%);
  font-weight: 700;
}
#commpay,#commpaybtc{
    font-weight: 700;
    color: #5c78cc;
    text-align: center;
}
#commmont,#commmontbtc{
    color: #1d681d;
    text-align: center;
}
.loaddot{
    width: 180px;
    aspect-ratio: 8/5;
    background: 
        conic-gradient(red 50%, blue 0) no-repeat,
        conic-gradient(green 50%, purple 0) no-repeat;
    background-size: 200% 50%;
    animation:  back 4s infinite linear;
}
@keyframes back{
    0%,
    100% { background-position: 0% 0%, 0% 100%;}
    25% { background-position: 100% 0%, 0% 100%;}
    50% { background-position: 100% 0%, 100% 100%;}
    75% { background-position: 0% 0%, 100% 100%;}
}