@charset "utf-8";
@import url(//fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700);

html, body { font-family: "Roboto"; font-size:12px; font-weight:300px; color:#000000; margin:0; padding:0; background-color:#f3f3f3; height:100% }
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
ul{ list-style:none; padding:0; margin:0;}
sb { font-weight:500; }
.fwhite{ color:#fff;}
a{ text-decoration:none;}
.clearfix{clear:both;}
.block{ display:inline !important;}
.fleft{ float:left;} .fright{ float:right;}
/* Header */
#header { border:none; background-color:#fff; width:100%; display:inline-block }
#logo { background-image:url(../images/yapay-logo-white.svg); background-color:#161616; height:70px; width:50px; background-size: auto 35px; background-repeat:no-repeat; background-position:center center; float:left; }
#topmenu { float:left; width:calc(100% - 50px); box-shadow: 0px 0px 5px 0px #e2e2e2; }
#menubar { float:left; background-image:url(../images/icons/menubar.svg); width:60px; height:70px; background-repeat:no-repeat; background-size:14px auto; background-position:center center;} 

.slidemenu{display:none; }

#loggedas { float:right; font-size:13px; padding:26px 0; padding-right:20px; background-image:url(../images/icons/down-arrow.svg); background-size: 9px auto; background-position:center right; background-repeat:no-repeat; margin:0 25px 0 0;  width:auto; text-align:right} 
#loggedas:hover { _cursor:pointer; cursor:pointer }

/* side Menu */
#sidemenu{background-color:#161616; width:50px; color:#cccccc; float:left; padding-top:15px; display:inline-block; height:calc(100vh - 85px); }
#sidemenu a.icon { background-size: auto 24px;  padding:15px 0 15px 50px; background-repeat:no-repeat;   background-position:center center; }
#sidemenu ul{ padding:0; margin:0;}
#sidemenu li {font-size:14px; line-height:50px; }
#sidemenu li a {color:#ccc; text-decoration:none; border:0; outline:0;}
#sidemenu li.active { color:#fff; background-color:#232323; _cursor:pointer; cursor:pointer; }
#sidemenu li:not(.active):hover {color:#ccc; background-color:#232323; _cursor:pointer; cursor:pointer; }
#sidemenu li:not(.active):hover a{ color:#fff; }
#sidemenu ul ul { background-color:#232323; list-style:none; display:none;}
#sidemenu ul ul li {font-size:13px; line-height:0;}
#sidemenu ul ul > li a{ padding:20px 0 20px 50px; width:calc(100% - 50px); display:inline-block;}
#sidemenu ul ul > li a:hover{ background-color:#111;}

#sidemenu span {background-image:url(../images/icons/next-1.svg); background-size: auto 10px; height:18px; padding:15px 0 15px 55px; background-repeat:no-repeat; font-size:14px; background-position:25px 22px; float:right; display: inline-block;
}
#sidemenu li.active span{transform: rotate(90deg);-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);-moz-transform: rotate(90deg);}


/* Container */
#container { float:left; padding:15px 25px;width:calc(100% - 100px); min-height:300px; }
.sticky {position: fixed; z-index: 9999;top: 0;left: 0;right: 0;width: 100%;}
#boxcontent{width:100%;  display:table;}
.boxcontentcol {display: table-cell;}

.section { clear:both;}
.sectiontitle{ font-size:20px; padding:10px 0; font-weight:400;}
.title {font-size:14px; padding:10px 0; font-weight:400; }
/*.section div:first-child{margin-left:0;}
.section div:last-child{margin-right:0;}*/


.section .col2,.section .col3,.section .col3,.section .col4 { float:left; }
.section t { font-size:12px; color:#666666 }
.section v { font-size:24px; }
.section sv { font-size:18px; }

.col1 { width:calc(100% - 30px); background-color:#FFFFFF; margin:0;  padding:15px; display:inline-block; min-height:490px; }
.col2 { width:calc((100% - 90px)/2); background-color:#FFFFFF; margin:15px; padding:15px; }
.col3 { width:calc((100% - 150px)/3); background-color:#FFFFFF; margin:15px; padding:15px; }
.col4 { width:calc((100% - 210px)/4); background-color:#FFFFFF; margin:15px;  padding:15px; }

.col5 { width:300px; background-color:#FFFFFF; margin:1px ;  padding:15px 0; text-align:center; }


.col1:first-child,.col2:first-child,.col3:first-child,.col4:first-child{margin-left:0;}
.col1:last-child,.col2:last-child,.col3:last-child,.col4:last-child{margin-right:0;}



.ic-edit{ width:50px; height:50px; float:right; margin-top:10px; _cursor:pointer; cursor:pointer;}
.form .col4 { padding:0 15px 15px 0 !important; margin-left:0;}

.fa-search{background-repeat:no-repeat; background-position: center center; background-image:url(../images/icons/search.svg);background-size: 16px auto; padding-right:10px;}
.fa-add{background-repeat:no-repeat; background-position: left+8px center; background-image:url(../images/icons/add.svg);background-size: 14px auto; padding-left:25px !important; }
.fa-edit{background-repeat:no-repeat; background-position: center center; background-image:url(../images/icons/edit-icon.svg);background-size: 32px auto; }
.fa-date{background-repeat:no-repeat; background-position: center right+5px; background-image:url(../images/icons/calendar.svg);background-size: 24px auto; }
.fa-folder{background-repeat:no-repeat; background-position: left+5px center; background-image:url(../images/icons/folder.svg);background-size: 20px auto; }
.fa-import{background-repeat:no-repeat; background-position: left+5px center; background-image:url(../images/icons/import.svg);background-size: 18px auto; }
.fa-export{background-repeat:no-repeat; background-position: left+5px center; background-image:url(../images/icons/export.svg);background-size: 18px auto; }
.fa-movearrow{background-repeat:no-repeat; background-position: left+5px center; background-image:url(../images/icons/move-arrow.svg);background-size: 18px auto; }
.fa-backarrow{background-repeat:no-repeat; background-position: center center; background-image:url(../images/icons/arrow-back.svg);background-size: 32px auto; }
.fa-save{background-repeat:no-repeat; background-position: center center; background-image:url(../images/icons/save.svg);background-size: 28px auto; }
.fa-approval{width:30px; height:30px; background-repeat:no-repeat; background-position: center center; background-image:url(../images/icons/approval.svg);background-size: 28px auto; float:left; padding:10px 15px 0 0;}
.fa-decline{display:block;width:30px; height:30px; background-repeat:no-repeat; background-position: center center; background-image:url(../images/icons/decline.svg);background-size: 28px auto; float:left;padding-top:10px; }
.fa-edit-ic{display:block;width:24px; height:24px;background-repeat:no-repeat; background-position: center center; background-image:url(../images/icons/edit-ic.svg);background-size: 18px auto; }
.fa-gear-ic{display:block;width:24px; height:24px;background-repeat:no-repeat; background-position: center center; background-image:url(../images/icons/settings-gear.svg);background-size: 18px auto; }

/* SlideNav Icons*/
.fa-network{background-repeat:no-repeat; background-position: center center; background-image:url(../images/icons/network.svg);background-size: 50px auto; }
.icon-mobile {background-image:url(../icons/mobile.svg);}
.icon-postpaid {background-image:url(../icons/postpaid.svg);}
.icon-dish {background-image:url(../icons/dth.svg);}
.icon-landline {background-image:url(../icons/landline.svg);}
.icon-electricity {background-image:url(../icons/electricity.svg);}
.icon-gas {background-image:url(../icons/gas.svg);}
.icon-insurance {background-image:url(../icons/insurance.svg);}
.icon-moneytrasnfer {background-image:url(../icons/moneytrasnfer.svg);}
.icon-billpay {background-image:url(../icons/billpay.svg);}
.icon-register {background-image:url(../icons/register.svg);}
.icon-complaint {background-image:url(../icons/complaint.svg);}
.icon-complaint-status {background-image:url(../icons/complaintTracking.svg);}
.icon-trans-status {background-image:url(../icons/trans-search.svg);}

/*profilemenu*/
.profilemenu{right:20px;display:none;z-index:40000;width:250px;position:absolute;top:55px;z-index:40000}
.profilemenu::after{content:'';position:absolute;top:-13px;right:2px;bottom:100%;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid #e9e9e9;clear:both}
.profilemenu ul{list-style:none;padding:0;margin:0}
.profilemenu ul li{display:block;zoom:1;padding:0;margin:0;width:100%;background-color:#e9e9e9}
.profilemenu ul li a{padding:7px 15px;font-size:13px;display:block;margin:-1px 0 0 0;position:relative;color:#666;outline:0}
.profilemenu ul li a:hover{color:#000}
.loggedas{padding:10px 15px;font-size:13px;color:#666;width:calc(100% - 30px);display:block;border-bottom:2px solid #ccc}
.lname {border-bottom:1px solid #CCCCCC;}
.sidenav{box-shadow: 0px 3px 5px 0px #e2e2e2; top:70px; background-color:#111;overflow-x: hidden;height: 100%;width:200px; color:#fff;position:fixed; right:-250px; display:block; z-index:99999;}

/* Badges */
.badge {border-radius: 0.25rem;line-height: 1;padding:3px 5px;font-weight: 600; font-size:11px; display:inline-block;}
.badge-inactive,.badge-pending {border: 1px solid #ff7474;background-color: #ff7474;color: #ffffff;}
.badge-inprogress {border: 1px solid #ffbc34;background-color: #ffbc34;color: #ffffff;}
.badge-success,.badge-active {border: 1px solid #08d26f;background-color: #08d26f;color: #ffffff;}
.badge-awaiting {border: 1px solid #857bff ;background-color: #857bff ;color: #ffffff;}
.badge-closed,.badge-completed {border: 1px solid #35b0ff;background-color: #35b0ff;color: #ffffff;}

/* Table */
sl{ color:#9F9F9F}
.table {display: table;width: 100%;border-collapse: separate;font-weight: 400;}
.table_row {display: table-row;}
.table_row:hover {background: #f4f4f4;}
.theader {display: table-row;}
.table_header {display: table-cell; color: #333;padding:10px;font-weight: 700;}
.table_small {display: table-cell;border-top: #ebebeb 1px solid;padding:5px 10px; vertical-align:top;}
.theader .amount,.table_small .amount{ text-align:right;}
.theader .date,.table_small .date{ width:75px;}
.theader .datetime,.table_small .datetime{ width:100px;}

.table_row > .table_small > .table_cell:nth-child(odd) {display: none;background: #f4f4f4;color: #333;}
.table_row > .table_small > .table_cell {color: #333;}
.table_small a {color: #333;}

.table_row:last-child > .table_small:last-child > .table_cell:last-child {border-bottom-right-radius: 5px;}
.table_row:last-child > .table_small:first-child > .table_cell:last-child {border-bottom-left-radius: 5px;}
.table_row:nth-child(2n+3) {background: #fff;}

.basic .table_header {background: #f3f3f3; border-bottom: 1px solid #f3f3f3; color:#333;}
.basic .table_row:hover {background: #f3f3f3;}

.blueTable .tablecell {border: 0px solid #AAAAAA;}
.blueTable .tablerow .tablecell {font-size: 12px;}
.blueTable .table_row:hover {background: transparent;}
.blueTable .table_header {background: #1C6EA4; border-bottom: 1px solid #f3f3f3; color:#fff;}
.blueTable .table_header .tablecell {font-size: 14px;color: #FFFFFF;border-left: 1px solid #D0E4F5;}
.blueTable .table_header .tablecell:first-child { border-left: none;}

.table_cell .has-float-label{ margin:0 !important;}
.commission_edit,.gateway_edit {display:none;}
.psave{display:none}

/* Pagebar */
.pagebar{ width:100%; display:inline-block;}
.pagetitle{ font-size:20px; padding:10px 0; font-weight:400; width:30%; float:left;}
.pagesubtitle{ font-size:16px; font-weight:400; color:#999;}
.logobox{ width:290px; height:100px; background-color:#fafafa; border:1px solid #ddd;background-image:url(../images/nologo.png); background-repeat:no-repeat; background-position: center center; background-size:100% auto;}
.fieldrow{clear:both; width:100%; margin:5px 0;}
.labelname{  font-size:11px; margin-bottom:10px; font-weight:400; color:#666}
.labelvalue{ font-size:14px; clear:both; font-weight:500; border-bottom:1px dotted #CCCCCC; margin-bottom:10px; padding-bottom:10px; color:#000000}


/*Custom Input File*/
.upload-btn-wrapper {position: relative;overflow: hidden;display: inline-block;}
.uploadbtn {border: 1px solid #ddd;color: #333;background-color: white;padding: 8px 20px;border-radius:3px;font-size: 14px;font-weight: 400;}
.upload-btn-wrapper input[type=file] {font-size: 100px;position: absolute;left: 0;top: 0;opacity: 0;}
.filename{ padding:5px 0 0 0; display:block; color:#777}

/* Search Box */
.searchbox{width:70%; text-align:right;float:left; display:block;}
.searchbox input#search{ max-width:100%;height: 40px;background: #fff;border: none;font-size: 12px;float: left;color: #333;padding: 0 0 0 15px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; border:1px solid #f1f3f5;}
.searchbox input#search::-webkit-input-placeholder {color: #65737e;}
.searchbox input#search:-moz-placeholder { /* Firefox 18- */ color: #65737e;}
.searchbox input#search::-moz-placeholder {  /* Firefox 19+ */color: #65737e;}
.searchbox input#search:-ms-input-placeholder { color: #65737e;}
.searchbox button.icon{-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-bottomright: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border: none;background: #fff;height: 42px;width: 50px;color: #4f5b66;opacity: 1;font-size: 11px;-webkit-transition: all .55s ease;-moz-transition: all .55s ease;-ms-transition: all .55s ease;-o-transition: all .55s ease;transition: all .55s ease;margin-left: -50px;outline: none; border:1px solid #f1f3f5;}
/*.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{ outline: none;opacity: 1;margin-left: -50px;}
*/
.searchbox:hover button.icon:hover{background: white;}
.searchbox button.icon i { width:20px; height:20px; display:block; float:left;}
.searchbox a.fa-import{padding-left:30px; }
.searchbox a.fa-export{padding:20px 15px; }
.searchbox a.fa-movearrow{padding:20px 15px; }

/* Popup */
.popupbox{width:100%; height:100vh; position:fixed; z-index:999; background:rgba(0,0,0,0.6);top:0; left:0;right:0; bottom:0; display:none;}
.popupboxcontent{ position:fixed;top: 0;z-index: 999; background-color:#fff; padding:0; left:0; right:0; bottom:0; margin:auto;}
.poptitle{ font-size:20px;}
.ic-closepop{outline:0; border:0; position:absolute; top:-38px; right:37%; cursor:pointer;z-index:9999;border-radius: 10px 10px 0 0; background-color:#25303b; color:#fff;}
/* background-repeat:no-repeat; background-position: center center; background-image:url(../icons/cancel-color.svg);background-size: 28px auto; width:40px; height:40px; background-color:transparent; */

/*Login Form*/
.loginbg{ width:100%; height:300px; background-color:#25303b;} /* 161616 2a363f 25303b*/
.logincontainer{ width:300px; height:260px; position:fixed; top:0;left:0;right:0;bottom:0;margin:auto;background-color:#FFFFFF; color:#000;}
.changepasscontainer{width:300px; height:280px; position:fixed; top:0;left:0;right:0;bottom:0;margin:auto;background-color:#FFFFFF; color:#000;}
.passwordchangecontainer{width:300px; height:280px; position:fixed; top:0;left:0;right:0;bottom:0;margin:auto;background-color:#FFFFFF; color:#000;}
.signupcontainer{ width:300px; height:360px; position:fixed; top:0;left:0;right:0;bottom:0;margin:auto;}
.forgotcontainer{ width:300px; height:180px; position:fixed; top:0;left:0;right:0;bottom:0;margin:auto;background-color:#FFFFFF; color:#000;}
.otpcontainer{ width:300px; height:140px; position:fixed; top:0;left:0;right:0;bottom:0;margin:auto; color:#000;}
.popupbox .logincontainer,.popupbox .signupcontainer,.popupbox .otpcontainer,.changepasscontainer,.passwordchangecontainer{ padding:20px;}

#loginlogo { width:100%; font-size:25px; text-align:center; font-weight:500; padding-bottom:20px; text-transform:capitalize}
.fgpass{color:#333; text-align:center;cursor:pointer; float:left; width:50%; margin:10px 0 }

/* Alert Box */
.card {position: relative;display: flex;flex-direction: column;min-width: 0; word-wrap: break-word;background-color: #fff;background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125);border-radius: 0.25rem;}
.card-inverse-primary {background: rgba(244, 244, 244, 1); border: 1px solid #c9c7c7; color: #333;}
.card-inverse-secondary {background: rgba(194, 198, 209, 0.2); border: 1px solid #b2b6c0; color: #93969f;}
.card-inverse-info {background: rgba(53, 176, 255, 0.2); border: 1px solid #31a2eb; color: #2886c2;}
.card .card-body {  padding: 15px 25px;}


/*Textbox*/
.formsubtitle { float:left; font-size:14px; padding-top:6px; font-weight:400; color:#000 }
.group {position: relative}
textarea {resize: none;}
input{background:none;font-size:14px;display:block;border:none;border-radius:0;border:1px solid #516273;padding:15px 10px 5px 10px;}
input[type='text'],input[type='number'],input[type='password']{width:calc(100% - 20px); }
input[type='submit']{ cursor:pointer}
.group input{color:#fff;}
input:focus,.group textarea:focus {border-color:#16a89f;}
.group input:focus ~ label { top: 3px; left:10px; font-size: 11px; color: #16a89f;}
.group input:focus ~ label, .group input:valid ~ label,.group textarea:focus ~ label,.group textarea:valid ~ label { top: 3px; left:10px; font-size: 11px; color: #16a89f;}
.group input[type="password"] {letter-spacing: 0.3em;}
.group label {color: #c6c6c6;font-size: 13px;font-weight: normal;position: absolute;pointer-events: none;top: 15px; left:10px;transition: 300ms ease all;}


.has-float-label {display: block;position: relative; margin:10px 0;}
.has-float-label label, .has-float-label > span {position: absolute;left: 10px;top: 3px;cursor: text;font-size: 75%;opacity: 1;transition: all .2s; font-size: 11px; color: grey;}
.has-float-label select {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.has-float-label input, .has-float-label select, .has-float-label textarea {font-size: 14px;margin-bottom: 2px;border:1px solid #ddd;padding:15px 10px 5px 10px;border-radius: 0; color:#222;border-radius: 3px;font-family: "Roboto", sans-serif; font-weight:400;}
.logincontainer .has-float-label input, .logincontainer .has-float-label select , .logincontainer .has-float-label textarea{font-size: 14px;margin-bottom: 2px;border:1px solid #DDDDDD;padding:15px 10px 5px 10px;border-radius: 0; color:#000;}
.changepasscontainer .has-float-label input, .changepasscontainer .has-float-label select , .changepasscontainer .has-float-label textarea{font-size: 14px;margin-bottom: 2px;border:1px solid #DDDDDD;padding:15px 10px 5px 10px;border-radius: 0; color:#000;}
.signupcontainer .has-float-label input, .signupcontainer .has-float-label select , .signupcontainer .has-float-label textarea{font-size: 14px;margin-bottom: 2px;border:1px solid #DDDDDD;padding:15px 10px 5px 10px;border-radius: 0; color:#000;}


.has-float-label input::-webkit-input-placeholder, .has-float-label select::-webkit-input-placeholder, .has-float-label textarea::-webkit-input-placeholder {opacity: 1;transition: all .2s;}
.has-float-label input:-ms-input-placeholder, .has-float-label select:-ms-input-placeholder, .has-float-label textarea:-ms-input-placeholder {opacity: 1;transition: all .2s;}
.has-float-label input::-ms-input-placeholder, .has-float-label select::-ms-input-placeholder, .has-float-label textarea::-ms-input-placeholder {opacity: 1;transition: all .2s;}
.has-float-label input::placeholder, .has-float-label select::placeholder, .has-float-label textarea::placeholder {opacity: 1;transition: all .2s;}
.has-float-label input:placeholder-shown:not(:focus)::-webkit-input-placeholder, .has-float-label select:placeholder-shown:not(:focus)::-webkit-input-placeholder, .has-float-label textarea:placeholder-shown:not(:focus)::-webkit-input-placeholder {opacity: 0;}
.has-float-label input:placeholder-shown:not(:focus):-ms-input-placeholder, .has-float-label select:placeholder-shown:not(:focus):-ms-input-placeholder , .has-float-label textarea:placeholder-shown:not(:focus):-ms-input-placeholder{opacity: 0;}
.has-float-label input:placeholder-shown:not(:focus)::-ms-input-placeholder, .has-float-label select:placeholder-shown:not(:focus)::-ms-input-placeholder, .has-float-label textarea:placeholder-shown:not(:focus)::-ms-input-placeholder {opacity: 0;}
.has-float-label input:placeholder-shown:not(:focus)::placeholder, .has-float-label select:placeholder-shown:not(:focus)::placeholder , .has-float-label textarea:placeholder-shown:not(:focus)::placeholder{opacity: 0;}
.has-float-label input:placeholder-shown:not(:focus) + *, .has-float-label select:placeholder-shown:not(:focus) + *, .has-float-label textarea:placeholder-shown:not(:focus) + * {opacity: .8;color: #555;font-size: 13px;left:10px; top:10px;}

.logincontainer .has-float-label input:placeholder-shown:not(:focus) + *, .logincontainer .has-float-label select:placeholder-shown:not(:focus) + * {opacity: .5;color: #000;font-size: 13px;left:10px; top:10px;}
.changepasscontainer .has-float-label input:placeholder-shown:not(:focus) + *, .changepasscontainer .has-float-label select:placeholder-shown:not(:focus) + * {opacity: .5;color: #000;font-size: 13px;left:10px; top:10px;}
.signupcontainer .has-float-label input:placeholder-shown:not(:focus) + *, .logincontainer .has-float-label select:placeholder-shown:not(:focus) + * {opacity: .5;color: #000;font-size: 13px;left:10px; top:10px;}
.has-float-label input:focus, .has-float-label select:focus, .has-float-label textarea:focus {outline: none;}

/* Checkbox Style + radio button  */
.i-checks {padding:5px 0 5px 20px;cursor: pointer; display:block;}
.i-checks input {opacity: 0;position: absolute;margin-left: -20px; padding:0;}
.i-checks input[type="text"] {opacity: 1;}

.i-checks input:checked + i {border-color: #23b7e5;}
.i-checks input:checked + i:before {left: 4px;top: 4px;width: 7px;height: 7px;background-color: #23b7e5;}
.i-checks input:checked + span .active {display: inherit;}
.i-checks input[type="radio"] + i, .i-checks input[type="radio"] + i:before {border-radius: 50%;}
.i-checks input[disabled] + i, fieldset[disabled] .i-checks input + i {border-color: #dee5e7;}
.i-checks input[disabled] + i:before, fieldset[disabled] .i-checks input + i:before {background-color: #dee5e7;}
.i-checks > i {width: 15px;height: 15px;line-height: 1;border: 1px solid #cfdadd;background-color: #fff;margin-left: -20px;margin-top: -2px;display: inline-block;vertical-align: middle;margin-right: 4px;position: relative;}
.i-checks > i:before {content: "";position: absolute;left: 10px;top: 10px;width: 0px;height: 0px;background-color: transparent;-webkit-transition: all 0.2s;transition: all 0.2s;}
.i-checks > span {margin-left: -20px;}
.i-checks > span .active {display: none;}


.switch {position: relative;display: block;vertical-align: top;width: 55px;height: 20px;padding: 3px;background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);border-radius: 18px;box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);cursor: pointer;}
.switch-input {position: absolute;top: 0;left: 0;opacity: 0;}
.switch-label {position: relative;display: block;height: inherit;font-size: 10px;text-transform: uppercase;background: #d0d0d0;border-radius: inherit;box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);}
.switch-label:before, .switch-label:after {position: absolute;top: 50%;margin-top: -.5em;line-height: 1;-webkit-transition: inherit;-moz-transition: inherit;-o-transition: inherit;transition: inherit;}
.switch-label:before {content: attr(data-off);right: 11px;color: #fff;text-shadow: 0 1px rgba(255, 255, 255, 0.5);}
.switch-label:after {content: attr(data-on);left: 11px;color: #FFFFFF;text-shadow: 0 1px rgba(0, 0, 0, 0.2);opacity: 0; }
.switch-input:checked ~ .switch-label {background: #009900;box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);}
.switch-input:checked ~ .switch-label:before {opacity: 0;}
.switch-input:checked ~ .switch-label:after {opacity: 1;}
.switch-handle {position: absolute;top: 4px;left: 4px;width: 18px;height: 18px;background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);border-radius: 100%;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);}
.switch-handle:before {content: "";position: absolute;top: 50%;left: 50%;margin: -6px 0 0 -6px;width: 12px;height: 12px;background: linear-gradient(to bottom, #eeeeee, #FFFFFF);background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);border-radius: 6px;box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);}
.switch-input:checked ~ .switch-handle {left: 38px;box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);}
/* Transition
========================== */
.switch-label, .switch-handle {transition: All 0.3s ease;-webkit-transition: All 0.3s ease;-moz-transition: All 0.3s ease;-o-transition: All 0.3s ease;}


/* Buttons */
.w20{ width:20%;} .w30{ width:30%;} .w40{ width:40%;} .w50{ width:50%;} .w60{ width:60%;}.w70{ width:70%;} .w80{ width:80%;} .w90{ width:90%;}.w100{ width:100% !important;} 
.wp20{ width:20px!important;} .wp30{ width:30px!important;} .wp50{ width:50px!important;} .wp70{ width:70px!important;;} .wp80{ width:80px!important;;} .wp90{ width:90px!important;;}.wp100{ width:100px!important;;} 
.wp120{ width:120px!important;}  .wp140{ width:140px!important;} 
.wp150{ width:150px!important;}  .wp180{ width:140px!important;} 
.wp200{ width:200px !important;}  .wp250{ width:250px !important;} .wp300{ width:300px !important;} 
.wpc150{  width:calc(100% - 150px);}  .wpc200{ width:calc(100% - 200px);} .wpc250{ width:calc(100% - 250px);} .wpc300{ width:calc(100% - 300px);}

.button{font-size:12px;display: inline-block;font-weight: 400;text-align: center;white-space: nowrap;vertical-align: middle;user-select: none;border: 1px solid transparent;border-top-color: transparent;border-right-color: transparent;border-bottom-color: transparent; border-left-color: transparent;padding:10px 20px; outline:0; cursor:pointer}
.button-icons{width: 60px; height: 60px;padding: 0; text-align: center; vertical-align: middle;}
.button-rounded{border-radius: 50px;}
.sidenav .button{margin:8px;}
.sidenav .button:nth-child(3n+1){margin-left:0;}
.sidenav .button:nth-child(3n){margin-right:0;}

.btn-master {color: #fff; background-color: #16a89f; border-color: #16a89f;}
.btn-primary{color: #fff; background-color: #6255ff; border-color: #5648ff;}
.btn-success {color: #fff; background-color: #08d26f; border-color: #08d26f;}
.btn-secondary{color: #212529;background-color: #c2c6d1; border-color: #c2c6d1;}
.btn-light {color: #212529; background-color: #f3f5f6; border-color: #f3f5f6;}
.btn-info{color: #fff; background-color: #35b0ff; border-color: #35b0ff;}
.btn-danger {color: #fff; background-color: #ff7474; border-color: #ff7474;}
.btn-warning {color: #212529;background-color: #ffbc34;border-color: #ffbc34;}
.btn-dark {color: #fff;background-color: #354168; border-color: #354168;}
.btn-link {font-weight: 400;color: #007bff;background-color: transparent;}
.btn-outline-primary{ color: #857bff;background-color: transparent; background-image: none;border-color: #857bff;}
.btn-outline-secondary {color: #c2c6d1;background-color: transparent; background-image: none; border-color: #c2c6d1;}
.btn-outline-success {color: #08d26f; background-color: transparent; background-image: none;border-color: #08d26f;}
.btn-outline-danger {color: #ff7474;background-color: transparent; background-image: none; border-color: #ff7474;}
.btn-outline-warning {color: #ffbc34; background-color: transparent;background-image: none; border-color: #ffbc34;}
.btn-outline-info {color: #35b0ff; background-color: transparent; background-image: none;  border-color: #35b0ff;}
.btn-outline-dark {color: #354168; background-color: transparent; background-image: none;  border-color: #354168;}
.btn-outline-light {color: #354168; background-color: transparent; background-image: none; border-color: #354168;}

.btn-info:hover{ background-color: #049af7; border-color: #049af7;}
.btn-outline-success:hover{background-color: #08d26f; color:#fff;}
.btn-outline-primary:hover{background-color: #857bff; color:#fff;}
.btn-outline-secondary:hover{background-color: #c2c6d1; color:#fff;}
.btn-outline-danger:hover{background-color: #ff7474; color:#fff;}
.btn-outline-warning:hover{background-color: #ffbc34; color:#fff;}
.btn-outline-info:hover{background-color: #35b0ff; color:#fff;}
.btn-outline-dark:hover{background-color: #354168; color:#fff;}

/*Notifications*/
.alert {position: relative; width:calc(100% - 30px); margin:5px 0; border: 1px solid transparent;border-top-color: transparent;border-right-color: transparent;        border-bottom-color: transparent;border-left-color: transparent;border-radius: 0.25rem;}
.alert-success {color: #fff; background-color: rgba(8, 210, 111, 0.8); border-color: #07c166;padding:10px 15px;}
.alert-info {color: #2886c2;background-color: rgba(53, 176, 255, 0.2);border-color: #31a2eb;padding:10px 15px;}
.alert-warning {color:#FF0000;border-color: #ebad30;padding:10px 15px; clear:both; text-align:center}/*background-color: rgba(255, 188, 52, 0.2);*/
.alert-danger {color: #c25858;background-color: rgba(255, 116, 116, 0.2);border-color: #eb6b6b;padding:10px 15px;}
.alert-primary {color: #655dc2;background-color: rgba(133, 123, 255, 0.2);border-color: #7a71eb;padding:10px 15px;}
.alert-secondary {color: #93969f;background-color: rgba(194, 198, 209, 0.2);border-color: #b2b6c0;padding:10px 15px;}

/* Status Notifications */
.success,.accepted {color: #fff; background-color: rgba(8, 210, 111, 0.8); border-color: #07c166; padding: 5px 0 5px 10px; font-size:11px; display:block;}
.info,.bounced {color: #000;background-color: rgba(53, 176, 255, 0.7);border-color: #31a2eb; padding: 5px 0 5px 10px; font-size:11px; display:block;}
.warning,.initiated,.pending {color: #000;border-color: #ebad30; background-color: rgba(255, 188, 52, 0.7);padding: 5px 0 5px 10px; font-size:11px; display:block;}
.danger,.failure,.dropped,.declined,.failed {color: #333;background-color: rgba(255, 116, 116,1);border-color: #eb6b6b;padding: 5px 0 5px 10px; font-size:11px; display:block;}
.primary,.unpaid {color: #000;background-color: rgba(133, 123, 255, 0.7);border-color: #7a71eb;padding: 5px 0 5px 10px; font-size:11px; display:block;}
.secondary {color: #000;background-color: rgba(194, 198, 209, 0.7);border-color: #b2b6c0;padding: 5px 0 5px 10px; font-size:11px; display:block;}


/*Pagination*/
ul.pagination {margin: 10px 0 5px 0; padding: 0;height: 100%;overflow: hidden;list-style-type: none;display: inline-block; float:right;}
ul.pagination li.details {padding: 7px 10px;font-size: 12px;color: #5b4189;}
ul.pagination li a {color: #5b4189; background: none;border: 1px solid #5b4189;border-radius: 3px;-moz-border-radius: 0px;-webkit-border-radius: 0px;display: block;text-decoration: none;padding: 7px 10px;font-size: 11px;padding: 6px 9px;}
ul.pagination li a:hover {color: #fff;text-decoration:none;}
ul.pagination li:first-child {margin-left: 0;}
ul.pagination li {padding-bottom: 1px; float: left;margin: 0 0 0 5px;padding: 0;}
ul.pagination li a.current, ul.pagination li a:hover {color: #FFF; border-color: #5b4189 ;background: #5b4189;}

/* Select Box*/
.selectbox {-webkit-appearance: none;-moz-appearance: none;appearance: none;height: 42px;padding: 10px 38px 10px 5px;background: #fff url("../images/icons/select-arrow.svg") no-repeat right 16px center; background-size: 10px;transition: border-color .1s ease-in-out,box-shadow .1s ease-in-out; border:1px solid #ddd; border-radius: 3px;color:#222;}
.selectbox:hover {border: 1px solid #999;}
.selectbox:focus { border: 1px solid #999; box-shadow: 0 3px 5px 0 rgba(0,0,0,.2); outline: none;}
.selectbox::-ms-expand {display:none;}


/* Progress Container */
.progresscontainer {position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 99999; border:0;background:rgba(0,0,0,0.7); display:none;}
.progress {width:400px; height:60px; top:0; left:0; bottom:0; right:0;position: fixed; margin:auto; font-size:12px; color:#fff; }
.barbox {width:400px; height:23px; border: 1px solid #000;  border-radius: 3px; }
.bar {   background-color: #ff8e14;   width:0%;   height:20px;   border: 1px solid #ddd;  border-radius: 3px;  }
.percent {   position:absolute;   display:inline-block;   top:3px;   left:48%; color:#B4F5B4; }

/* DropDown list */
ul.actionmenu{ background-color:#f1f1f1; display:inline-block; position: absolute;list-style: none; width: 100px; z-index: 99999;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);display: none; right:25px;}
ul.actionmenu li{display:inline-block; width:100%;color: #000;cursor: pointer; margin:0; text-align:center; float:left;}
ul.actionmenu li a{ color:#000;text-decoration: none; padding:10px 0;width:100%; display:block; }
ul.actionmenu li:hover a{ background-color: #000;color: #fff;}

 /* Mozilla Firefox 4 to 18 */
.has-float-label:-moz-placeholder {color:transparent; opacity:  0;}
/* Mozilla Firefox 19+ */
.has-float-label::-moz-placeholder {color:transparent;opacity:  0;}
/* Internet Explorer 10+ */
.has-float-label:-ms-input-placeholder {color:transparent;}

input:focus::-webkit-input-placeholder {color:#333;-webkit-transition: color 0.2s ease;transition: color 0.2s ease;}
/* Firefox 18- */
input:focus:-moz-placeholder {color: transparent;-webkit-transition: color 0.2s ease;transition: color 0.2s ease;}
/* Firefox 19+ */
input:focus::-moz-placeholder {color: transparent;-webkit-transition: color 0.2s ease;transition: color 0.2s ease;}
input:focus:-ms-input-placeholder {color: transparent;-webkit-transition: color 0.2s ease;transition: color 0.2s ease;}

/* For Firefox */
input[type='number'] {
    -moz-appearance:textfield;
}

/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {    -webkit-appearance: none;    margin: 0;}

/*Rechage Panel Input*/
.rcpanel .has-float-label input:placeholder-shown:not(:focus) + * {opacity: .8;color: #555;font-size: 13px;left:35px; top:15px;}
.rcpanel .has-float-label label, .rcpanel .has-float-label > span {position: absolute;left: 35px;top: 3px;cursor: text;font-size: 75%;opacity: 1;transition: all .2s; font-size: 11px; color: grey;}
.rcpanel .has-float-label input, .rcpanel .has-float-label select, .rcpanel .has-float-label textarea {font-size: 14px;margin-bottom: 2px;border:1px solid #ddd;padding:15px 10px 5px 35px;border-radius: 0; color:#222;border-radius: 3px;font-family: "Roboto", sans-serif; font-weight:400; width:calc(100% - 45px);}


[id^=tab_],[id^=complaintreq_],[id^=participation_]{display:none}
.currenttab{display:block}

#vertical_tab_content #tab_wallet{ display:block;}

.rcpanel .selectbox {padding: 10px 38px 10px 35px;}
.input_icon{background-repeat:no-repeat;width:30px;border-right:1px #ccc dotted;background-position:left center;height:24px;display:inline-block;position:absolute;background-position:center center;margin:10px 0 0 0;background-size:20px auto;}
.icon-cell{background-image:url(../icons/cell.svg); }
.icon-amount{background-image:url(../icons/rupee.svg);background-size:17px auto; }
.icon-operator{background-image:url(../icons/settings.svg)}
.icon-postpaid-black{background-image:url(../icons/postpaid-black.svg)}
.icon-dth-black{background-image:url(../icons/dth-black.svg)}
.icon-landline-black{background-image:url(../icons/landline-black.svg)}
.icon-std-black{background-image:url(../icons/std-black.svg)}
.icon-accountno{background-image:url(../icons/accountno.svg)}
.icon-cycleno{background-image:url(../icons/cycleno.svg)}
.icon-date{background-image:url(../icons/calendar.svg)}
.icon-gas-black{background-image:url(../icons/gas-black.svg)}
.icon-insurance-black{background-image:url(../icons/insurance-black.svg)}
.icon-creditcard-black{background-image:url(../icons/creditcard-black.svg)}
.icon-monitor{background-image:url(../icons/monitor.svg)}
.icon-wallet-money{background-image:url(../icons/wallet-money.svg)}
.icon-idcard{background-image:url(../icons/id-card.svg);background-size:17px auto; }


/*vertical tab nav */
#vertical_tab_nav{display: block;width: 100%;}
#vertical_tab_nav ul{display: block;float: left;margin: 0px;padding: 0px;list-style: none;overflow: hidden;width: 250px; background-color: #f7f7f7;}
#vertical_tab_nav li{border-bottom: 1px solid #e2e2e2;margin-bottom: 1px;text-align: left;padding: 0px;}
#vertical_tab_nav li:last-child{margin-bottom: 0px;border-bottom: 0px;}
#vertical_tab_nav li a{display: block;font-size: 14px;color: #666;text-decoration: none;padding: 20px;background-color: #f7f7f7; outline:0;
border-bottom: 2px solid #f7f7f7; border-right: 1px solid #e2e2e2;}
#vertical_tab_nav li a.icon { background-size: auto 28px;  padding:15px 0 15px 50px; background-repeat:no-repeat;   background-position:left+10px center; }

#vertical_tab_nav li a.selected{background-color: #fff;color: #333; border-bottom: 2px solid #ff7474; border-right: 1px solid #fff;}
#vertical_tab_content{display: block;float: left;background: #fff;background: #fff;width:calc(100% - 290px); padding: 0 20px;}
#vertical_tab_content div { width:300px;}
#vertical_tab_content .col4 { margin:0 15px 15px 0 !important; padding:15px 0 0 0 !important;}

/*RC Result */
.paymentinfo{width:100%;display:inline-block}
.paymentinfo .spanrow{width:calc(50% - 22px);padding:10px 0 0 10px;display:inline-block;float:left;border-left:2px solid #35b0ff;background-color:#fafafa}
.paymentinfo .spanrow:nth-of-type(odd){margin:5px 5px 0 0}
.paymentinfo .spanrow:nth-of-type(even){margin:5px 0 0 5px}
.paymentinfo .spanrow .spantitle{font-weight:500;font-size:18px;padding:10px 0;display:inline-block}
.paymentinfo .spanrow:hover{border-left:2px solid #9cc428;background-color:#fafafa}
.notifybar{width:80%;height:60px;padding:15px 0}
.notifyinfo{width:100%;font-size:12px;color:#555;display:block; margin:5px 0;}
.notifyinfo .success{font-size:16px;color:#fff;display:inline-block;height:35px;line-height:35px; padding:5px 10px 5px 10px !important;}
.notifyinfo .attention{font-size:16px;color:#f7a82d;display:inline-block;height:35px;line-height:35px}
.notifyinfo .success i,.notifyinfo .attention i{float:left;margin-top:7px}
.notifybold{font-size:16px;color:#666;font-weight:500;text-align:center}
.notifyinfo .reason{width:calc(100% - 22px);padding:10px 0 0 10px;display:inline-block;border:1px solid #fafafa;height:40px;line-height:40px}
.notifyinfo .reasontext{font-size:12px;color:#fd0000;text-align:center}
.notifyinfo .balance{width:calc(100% - 22px);padding:10px 0 0 10px;display:inline-block;border:1px solid #fafafa;height:40px;line-height:40px}
.notifyinfo .balance .rupee{font-size:18px;font-weight:500}
.alertbox{width:240px;padding:20px;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;height:60px;background-color:#fafafa}
.alertinfo{text-align:center;line-height:30px;font-size:14px;color:#9f9f9f}


.sendOTPWindow{display:inline-block;height:120px;margin-bottom:15px;font-family:"Roboto";font-size:22px;font-weight:bold;color:#000;font-weight:600;width:100%;background:url(../images/sms.png) no-repeat #f9f9f9;background-size:90px auto;background-position:190px 5px; background-color:transparent;}
.sendOTPWindow .txt{font-size:12px;font-weight:300;line-height:10px; color:#000;}
.sendOTPWindow .otpForm{margin-top:14px;width:100%}
.sendOTPWindow .mobileOTP{font-family:Roboto;font-weight:600;font-size:12px;border:#00aff0 1px solid;width:70px;float:left;padding:10px 0 10px 5px;color:#000;}
.sendOTPWindow input[type="button"]{background-color:#00aff0;color:#fff;font-family:Roboto;font-size:12px;border:0;font-weight:600;float:left;padding:0 15px;width:auto;height:37px;border-radius:0}
.sendOTPWindow .verified{color:#fff;font-size:14px;display:none;margin:20px 0 0 0}
.sendOTPWindow .invalidbox{display:block;height:25px;font-size:13px; color:#fff;}
.sendOTPWindow .invalidotp{width:100%;color:#f22;font-size:14px;padding-top:10px}
.mobileNumberText{color:#000000;}

/*BBPS Response */
.bbpsrescol{width:100%; display:inline-block; border-bottom:1px solid #f1f3f5;}
.bbpsleftcol,.bbpsrightcol{float:left; height:30px; line-height:30px; }
.bbpsleftcol{width:220px; background-color:#f1f3f5; padding:0 0 0 5px;}
.bbpsrightcol{width:auto; padding:0 0 0 20px;}
.bbpsvalue{float:left;margin:9px 5px 0 0;}

/* Receipt Page*/
.printfont{clear:both;padding:5px 0;}
.rpleftcol,.rprightcol{float:left; height:30px; line-height:30px; }
.rpleftcol{width:220px; padding:0;}
.rprightcol{width:auto; padding:0 0 0 20px;}
.rpleftcol:after {content: ':'; text-align: right;  float:right}
#printlogobox{width:150px; height:70px; float:left; background-color:#000000;}
#printlogo { background-image:url(../images/yapay-logo-white-b.svg); height:70px; width:100%; background-size: auto 35px; background-repeat:no-repeat; background-position:center center;}
#rppoweredby{width:50%; float:right; text-align:right;}

.bbpsbox{max-width:320px;background-color:#fff;max-height:100%;font-size:14px}
.bbpsbox div{margin:5px 0}
.bbpslabel{font-size:14px}

#bppstot{font-size:18px;font-weight:600}
.bbpslogo{float:right;display:block;background:url(../images/bbps.svg) no-repeat left center;background-size:auto 100%;height:27px;width:80px;margin:22px 15px 0 0}

#footer {font-size:11px; text-align:center; color:#666666; clear:both; padding:10px 0}

.fleft{ text-align:left}
.fright{ text-align:right}
.fcenter{ text-align:center;}
.existinguser{width:100%; color:#333; text-align:center;cursor:pointer;margin:10px 0 }