/** **/
.ctn-control{
    position: relative;
    width:100%;
    height:auto;
    margin-top: 10px;
}

/** Etiquetas **/
.ctl-label{
    font-family:Questrial;
    font-size:15px;
    color:#000000;
    line-height:20px;
    text-align: left;
    margin-bottom:5px;
}
.ctl-label .step{
    position: relative;
    float:left;
    width:20px;
    height:20px;
    background: #97d729;
    font-family:Questrial;
    font-size:15px;
    color:#ffffff;
    text-align: center;
    line-height: 20px;
    border-radius:5px;
    margin-right:10px;
}
/** Input Text **/
.ctn-control input{
    width:100%;
    height:40px;
    background: #ffffff;
    border: 2px solid #97d729;
    border-radius:10px 0px;
    padding-left:15px;
    padding-right:15px;
    font-family:Questrial;
    font-size:15px;
    color:#000000;
    outline: none;
}
.ctn-control input:focus{
    background:rgba(151,215,41,0.10);
    border: 2px solid #97d729;
    box-shadow:0px 0px 0px 4px rgba(0,0,0,0.02);
}

.i-user{
    background: #ffffff url('../img/icon-min/user.png') no-repeat !important;
    background-position: calc(100% - 10px) center !important;
    background-size: 17px !important;
    padding-right:50px;
}
.i-user:focus{
    background: rgba(151,215,41,0.10) url('../img/icon-min/user.png') no-repeat !important;
    background-position: calc(100% - 10px) center !important;
    background-size: 17px !important;
}
.i-phone{
    background: #ffffff url('../img/icon-min/phone.png') no-repeat !important;
    background-position: calc(100% - 10px) center !important;
    background-size: 17px !important;
    padding-right:50px;
}
.i-phone:focus{
    background: rgba(151,215,41,0.10) url('../img/icon-min/phone.png') no-repeat !important;
    background-position: calc(100% - 10px) center !important;
    background-size: 17px !important;
}
.i-pass{
    background: #ffffff url('../img/icon-min/pass.png') no-repeat !important;
    background-position: calc(100% - 10px) center !important;
    background-size: 17px !important;
    padding-right:50px;
}
.i-pass:focus{
    background: rgba(151,215,41,0.10) url('../img/icon-min/pass.png') no-repeat !important;
    background-position: calc(100% - 10px) center !important;
    background-size: 17px !important;
}

/** SwitchButton **/

.ctl-swb{
    margin-top:5px;
    width:100%;
    height:40px;
    border-radius:10px 0px 10px 0px;    
    font-family:Lato;
    font-size:13px;
    color:#f7f7f7;
    outline: none;
}
.ctl-swb:hover{
    box-shadow:0px 0px 0px 4px rgba(0,0,0,0.02);
}

.ctl-swb .option{
    float:left;
    width:50%;
    height:40px;
    background: #fefefe url('../img/control/check.png') no-repeat;
    background-size: 16px;
    background-position: 10px center;
    color:#000000;
    cursor:pointer;
    text-align: center;
    border:1px solid #00a04b;
    /*box-shadow:0 0 1px rgba(0,0,0,0.5) inset;*/
}
.ctl-swb .option .icon{
    float:left;
    width:40px;
    height:40px;
    margin-right:5px;
}
.ctl-swb .option span{
    font-family:Lato;
    font-size:13px;
    line-height:40px;
}

.ctl-swb .option:hover{
    background: rgba(151,215,41,0.10) url('../img/control/check-hover.png') no-repeat;
    background-size: 16px;
    background-position: 10px center;
}
.ctl-swb .option:hover span{
    /*color:#000000;*/
}

.ctl-swb .option-sel{
    float:left;
    width:50%;
    height:40px;
    cursor:pointer;
    background: #00a04b url('../img/control/checked.png') no-repeat;
    background-size: 16px;
    background-position: 10px center;
    border:1px solid #00a04b;
    color:#ffffff;
}
.ctl-swb .option-sel:hover{
    background: #00a04b url('../img/control/checked.png') no-repeat;
    background-size: 16px;
    background-position: 10px center;
    color:#ffffff !important;
}

.ctl-swb .option-left{
    border-right: 0px;
    border-radius:10px 0px 0px 0px;
}
.ctl-swb .option-right{
    border-left: 0px;
    border-radius:0px 0px 10px 0px;
}

/** Switch **/
.ctl-switch{
    position:relative;
    margin-top:5px;
    width:100%;
    height:40px;
    border-radius:5px;
    background: rgba(151,215,41,0.10);
    border:2px solid #97d729;
    border-radius:10px 0px;
    padding-left:10px;
    padding-right:20px;
    font-family:Questrial;
    font-size:15px;
    outline: none;
    cursor:pointer;
}
.ctl-switch:hover{
    background: rgba(151,215,41,0.10);
    border:2px solid #97d729;
    box-shadow:0px 0px 0px 4px rgba(0,0,0,0.02);
    z-index:1;
}

.ctl-switch .switch-label{
    font-family:Questrial;
    font-size:15px;
    color:#000000;
    line-height:36px;
    padding-left:5px;
}
.ctl-switch .switch-btn{
    position:absolute;
    top:8px;
    right:10px;
    width:50px;
    height:20px;
    background:#00a04b;
    border-radius:10px;
}
.switch-btn .switch-off{
    float:left;
    width:20px;
    height:20px;
    background:#f7f7f7;
    border-radius:10px;
    border:2px solid #ffffff;
    box-shadow:0 0 4px rgba(0,0,0,0.2);
}
.switch-btn .switch-on{
    float:right;
    width:20px;
    height:20px;
    background:#97d729;
    border-radius:10px;
    border:2px solid #ffffff;
    box-shadow:0 0 4px rgba(0,0,0,0.2);
}

/** Buttons **/
.ctl-btn{
    width:100%;
    height:40px;
    background: #00a04b;
    border-radius:10px 0px;
    padding-left:15px;
    padding-right:15px;
    font-family:Questrial;
    font-size:15px;
    line-height:40px;
    color:#ffffff;
    text-align: center;
    cursor:pointer;
}
.ctl-btn:hover{
    background: #00a04b;
    color:#ffffff;
}

.ctl-btn-second{
    width:100%;
    height:40px;
    /*border: 2px solid #97d729;*/
    background: rgba(151, 215, 41, 0.10);
    border-radius:10px 0px;
    padding-left:15px;
    padding-right:15px;
    font-family:Questrial;
    font-size:15px;
    line-height:40px;
    color:#00a04b;
    text-align: center;
    cursor:pointer;
}
.ctl-btn-second:hover{
    background: #97d729;
    color:#ffffff;
}

/** Map **/
.ctn-control .ctl-map{
    width:100%;
    height:200px;
    background: #ffffff;
    border: 2px solid #97d729;
    border-radius:10px 0px;
    padding-left:15px;
    padding-right:15px;
    font-family:Questrial;
    font-size:15px;
    color:#000000;
    outline: none;
}
.ctn-control .ctl-map:focus{
    background:rgba(151,215,41,0.10);
    border: 2px solid #97d729;
    box-shadow:0px 0px 0px 4px rgba(0,0,0,0.02);
}

/** Code QR **/
.ctn-control .ctl-qr{
    margin:0 auto;
    width:140px;
    height:140px;
    background: #ffffff;
    border: 2px solid #97d729;
    border-radius:10px 0px;
    padding:15px;
    font-family:Questrial;
    font-size:15px;
    color:#000000;
    outline: none;
}
.ctn-control .ctl-qr:focus{
    background:rgba(151,215,41,0.10);
    border: 2px solid #97d729;
    box-shadow:0px 0px 0px 4px rgba(0,0,0,0.02);
}

.ctl-qr img{
    width:100%;
}

/** Cards **/
.card{
    position: relative;
    width:100%;
    height:auto;
    min-height:70px;
    padding:10px;
    background: #ffffff;
    border-bottom: 3px solid rgba(0,0,0,0.1);
    border-radius: 20px;
    box-shadow:0px 0px 5px rgba(0,0,0,0.1);
}
.card .card-pic{
    position: relative;
    float:left;
    width:50px;
    height:50px;
    margin-right:10px;
}
.card-pic-def{
    position: relative;
    float:left;
    width:50px;
    height:50px;
    background: url('../img/icon-min/pic.png') no-repeat center;
    background-size: 50px;
}
.card-pic-user{
    position: relative;
    float:left;
    width:50px;
    height:50px;
    background: url('../img/user-male.png') no-repeat center;
    background-size: 50px;
}
.card-pic-cart{
    position: relative;
    float:left;
    width:60px;
    height:50px;
    background: url('../img/cart.png') no-repeat;
    background-position: left center;
    background-size: 50px;
}

.card-pic img{
    margin:0px;
    width:50px;
}
.card .card-title{
    font-family: WarungKopi;
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    line-height: 20px;
    text-align: left;
    letter-spacing: 0.4px;
    margin-top:5px;
}
.card .card-title-def{
    position: absolute;
    top:15px;
    left:70px;
    width:150px;
    height:20px;
    background: rgba(151,215,41,0.10);
    border-radius:10px;
}
.card .card-subtitle{
    margin-top:5px;
    font-family:Roboto;
    font-size:14px;
    color:#707070;
    line-height:15px;
}
.card .card-subtitle-def{
    position: absolute;
    top:40px;
    left:70px;
    width:100px;
    height:15px;
    background: rgba(151,215,41,0.10);
    border-radius:7px;
}

.card-btn-sel{
    position:absolute;
    top:25px;
    right:20px;
    width:20px;
    height:20px;
    background:url('../img/icon-min/down-default.png') no-repeat center;
    background-size: 20px;
}
.card:hover .card-btn-sel{
    background:url('../img/icon-min/down.png') no-repeat center;
    background-size: 20px;
}