@media only screen /* iPhone X */ and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3), only screen /* iPhone 8 */ and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2), only screen /* iPhone 8 Plus */ and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : 3), only screen /* iPhone 7 */ and (min-device-width : 375px) and (max-device-width : 667px), only screen /* iPhone 7 Plus */ and (min-device-width : 414px) and (max-device-width : 736px), only screen /* iPhone 6 */ and (min-device-width : 375px) and (max-device-width : 667px), only screen /* iPhone 6 Plus */ and (min-device-width : 414px) and (max-device-width : 736px), only screen /* iPhone 5 & 5S */ and (min-device-width : 320px) and (max-device-width : 568px), only screen /* iPad */ and (min-device-width : 768px) and (max-device-width : 1024px), only screen /* iPad 3 and 4 */ and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2), only screen /* iPad 1 and 2 */ and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1), only screen /* iPad Mini */ and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) { html,body { -webkit-overflow-scrolling : touch !important; overflow: auto !important; height: 100% !important; } .img-d { display: none; } .dmodal-content::before { background: transparent !important; } } body.iosBugFixCaret { position: fixed; width: 100%; } /* The Modal (background) */ .dmodal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999999999999; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.5); /* Black w/ opacity */ /*padding-top: 3.5%;*/ } /* Modal Content/Box */ .dmodal-content { background-color: #FFF; /*margin: 15% auto; !* 15% from the top and centered *!*/ padding: 20px 35px; /*border: 1px solid #888;*/ /*width: 100%; !* Could be more or less, depending on screen size *!*/ /*border: 2px solid #232323;*/ /*border-radius: 5px;*/ max-width: 60.6rem; width: 80%; margin: 0 auto; right: 0; top: 3.2em !important; /*background-image: url("https://www.banglalink.net/sites/all/themes/banglalink/images/soooosh2.svg"), url("https://www.banglalink.net/sites/all/themes/banglalink/images/sakib.png"); background-position: center bottom, right bottom;*/ background-image: url(https://easy.com.bd/banglalink/logo_4g_bg.svg); background-position: center center; background-repeat: no-repeat; background-size: 130% 100%; border-radius: 0 37px; height: 530px !important; } .dmodal-content::before { position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 55px; background: #f89921; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background: -moz-linear-gradient(left, #f89921 0%, #ef423f 100%); background: -webkit-linear-gradient(left, #f89921 0%,#ef423f 100%); background: linear-gradient(to right, #f89921 0%,#ef423f 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f89921', endColorstr='#ef423f',GradientType=1 ); display: block; margin-top: 37px; } /* The Close Button */ .dclose { color: #fff; float: left; font-size: 20px; font-weight: bold; background: #cacacd; padding: 4px; border-radius: 50%; line-height: 12px; text-shadow: 0 1px 2px #a1a1a2; box-shadow: 0px 1px 0px 1px #aaa inset; -moz-box-shadow: 0px 1px 0px 1px #aaa inset; -webkit-box-shadow: 0px 1px 0px 1px #aaa inset; } .dclose:hover, .dclose:focus { color: black; text-decoration: none; cursor: pointer; } /* Modal Header */ .dmodal-header { border-radius: 5px 5px 0px 0px; padding: 15px 16px 15px; border-bottom: 1px solid #d3d3d4; /*background-color: #5cb85c;*/ color: #828282; background: #f5f5f7; /* Old browsers */ background: -moz-linear-gradient(top, #f5f5f7 0%, #e9e9e9 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f5f5f7 0%,#e9e9e9 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f5f5f7 0%,#e9e9e9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f7', endColorstr='#e9e9e9',GradientType=0 ); /* IE6-9 */ } .dmodal-header h2 { color: #010101; padding: 5px 20%; text-align: center; font-size: 20px; margin-bottom: 5px; margin-top: 30px; } .dmodal-header h2 span { font-size: 14px; display: block; color: #828282; } /* Modal Body */ .dmodal-body { padding: 0px 0px; /*overflow: hidden;*/ position: relative; } .dmodal-body .mynewclassclose { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; margin: 0; opacity: 1; position: absolute; right: -15px; top: -15px; z-index: 999; cursor: pointer; } .mynewpopupclose { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; margin: 0; opacity: 1; position: absolute; right:-15px; top: -15px; z-index: 999; cursor: pointer; } .dleft { float: left; width: 300px; min-height: 260px; background: url("img/bg.jpg") center 100% ; -webkit-box-shadow: 5px 0px 5px 0px #ccc; -moz-box-shadow: 5px 0px 5px 0px #ccc; box-shadow: 5px 0px 5px 0px #ccc; overflow: hidden; -webkit-border-radius:10px 0px 0px 10px; -moz-border-radius:10px 0px 0px 10px; border-radius:10px 0px 0px 10px; } .dlefthright img { width:90px; } .dright{ float: right; padding-top: 10px; min-height: 260px; width: 150px; } .dright p { margin-top: 3px; margin-bottom: 5px; } .dcenter{ float: left; min-height: 150px; background: #FFF ; -webkit-box-shadow: 0 0 2px 1px #aaa; -moz-box-shadow: 0 0 2px 1px #aaa; box-shadow: 0 0 2px 1px #aaa; overflow: hidden; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; width:100%; } .dleftheader { display: block; background: #F16B2B; max-height: 40px; overflow: hidden; -webkit-border-radius:10px 0px 0px 0px; -moz-border-radius:10px 0px 0px 0px; border-radius:10px 0px 0px 0px; padding: 10px 15px; color: #FFF; } .dcenterheader { display: block; background: #F16B2B; max-height: 50px; overflow: hidden; -webkit-border-radius:5px 0px 0px 0px; -moz-border-radius:5px 0px 0px 0px; border-radius:5px 0px 0px 0px; padding: 20px 15px; color: #FFF; } .dlefthleft { float: left; width: 45%; } .dcenterh { float: left; width: 100%; } .dcenterh h3 { font-size: 15px; line-height:15px; padding-top: 0px; margin: 0px; } .dlefthleft h3 { font-size: 20px; line-height:36px; padding-top: 5px; margin-top: 0; } .dlefthright { float: right; width:45%; text-align: right; } .dtabconbox { /*margin-top: 5px;*/ padding: 10px 15px; color: #fff; } #popupmsg { color: #333; font-size: 20px; font-weight: bold; line-height: 35px; margin-top: 15px; text-align: center; text-shadow: 0 1px 2px #aaa; -moz-text-show: 0 1px 2px #aaa; -webkit-text-shadow: 0 1px 2px #aaa; -o-text-shadow: 0 1px 2px #aaa; } .dtabconbox a { display: inline-block; margin-bottom: 10px; margin-right: 15px; text-align: center; width: 75px; text-decoration: none; position: relative; } .dtabconbox a img { max-width: 65px; } .dtabconbox a span { color: #fff; margin-top: 2px; display: block; font-weight: bold; } .dbuttonSub{ background-color: rgb(242, 111, 33) !important; padding: 14px 15px; } .dbuttonSub:hover { background: #00bfa5 !important; } .dbutton { } .dbutton { -moz-box-shadow: -3px 3px 13px -7px #276873; -webkit-box-shadow: -3px 3px 13px -7px #276873; box-shadow: -3px 3px 13px -7px #276873; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99)); background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%); background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0); background-color:#599bb3; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:14px; font-weight:bold; padding:9px 16px; text-decoration:none; text-shadow:0px 2px 0px #3d768a; margin-top: 5px; } .dbutton:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3)); background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%); background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%); background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%); background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%); background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0); background-color:#408c99; } .dbutton:active { position:relative; top:1px; } .dtabs { width: 160px; list-style: outside none none; padding-left: 0; } .dtabs a { padding:15px 10px; font-size: 14px; line-height: 14px; font-weight: normal; display:block; text-decoration:none; text-align: right; } .dtabs a:active, .dtabs a:focus{ outline:0; } .dtabs a.active { color:#fff; background: #4f4f4f; background: -moz-linear-gradient(top, #4f4f4f 0%, #454545 50%, #3d3d3d 100%); background: -webkit-linear-gradient(top, #4f4f4f 0%,#454545 50%,#3d3d3d 100%); background: linear-gradient(to bottom, #4f4f4f 0%,#454545 50%,#3d3d3d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#3d3d3d',GradientType=0 ); border-top: 1px solid #3d3d3d; border-bottom: 1px solid #363636; } /* Modal Footer */ .dmodal-footer { padding: 2px 16px; background-color: #5cb85c; color: white; border-radius: 0px 0px 10px 10px; } /* Modal Content */ #ssl_popup .dmodal-content{ max-width: 420px !important; font-family:'Raleway',sans-serif; } .dmodal-content { position: relative; background-color: #FFF; /*margin: auto auto auto 70%;*/ /*margin: auto;*/ /*text-align: left;*/ /*padding: 0px;*/ /*border: 1px solid #888;*/ /*max-width: 640px;*/ /*width: 100%;*/ /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);*/ /*-webkit-animation-name: animatetop;*/ /*-webkit-animation-duration: 0.4s;*/ /*animation-name: animatetop;*/ /*animation-duration: 0.4s;*/ /*-webkit-border-radius: 15px;*/ /*-moz-border-radius: 15px;*/ /*border-radius:15px;*/ } .dmodal-left { float: left; width: 50%; } .dmodal-left img { border-top-left-radius: 15px; border-bottom-left-radius: 15px ; margin-bottom: 0px; vertical-align: middle; } .dmodal-right { float: right; width: 50%; } .dpay_panel p { color: #444; font-size: 14px; margin-bottom: 2px; } .dpay_panel div { margin-bottom: 5px; } @media screen and (max-width: 480px){ .dmodal-left { display: none; } .dmodal-right { width:100%; } .dmodal-content { width:90%; } } /* Add Animation */ /*@-webkit-keyframes animatetop {*/ /*from {top: -300px; opacity: 0}*/ /*to {top: 0; opacity: 1}*/ /*}*/ /*@keyframes animatetop {*/ /*from {top: -300px; opacity: 0}*/ /*to {top: 0; opacity: 1}*/ /*}*/ /* .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }*/ .sinput { display: block; margin: 20px auto; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; padding: 10px 20px; min-width: 237px; border: 1px solid #b7b7b7; -webkit-border-radius: 3px; border-radius: 3px; font: normal 16px/normal "Arial"; color: #757575; -o-text-overflow: clip; text-overflow: clip; background: rgba(252,252,252,1); -webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.2) inset; box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.2) inset; text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ; -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); } .sinput:focus { border: 1px solid #5fa9de; -webkit-box-shadow: 0 0 5px 2px #5fa9de ; box-shadow: 0 0 5px 2px #5fa9de ; } .pay_options{ margin-top: 20px; padding-left: 7px; padding-right: 7px; } .pay_options > h3 { border-bottom: 1px solid #666; color: #666; margin: 10px -7px; text-align: left; } .pay_options a { margin-bottom: 0px; margin-right: 5px; display: inline-block; } .dmodal-header > h3 { display: inline-block; margin-left: 40px; } .dmodal-header > .dimage::after { background: rgba(0, 0, 0, 0) url("https://b.stripecdn.com/checkout/v3/images/icon-border-Uz9anqiDNVCgXMysAAWGQ.png") no-repeat scroll 0 0 / 100% 100%; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } .dmodal-header > .dimage { height: 75px; left: 50%; margin-left: -38px; position: absolute; top: -30px; width: 76px; } /*.modal-header > .image img { max-width: 100%; border-radius: 50%; }*/ .dmodal-header >.dimage > img { background: #fff none repeat scroll 0 0; border-radius: 32px; display: block; height: 64px; margin: 4px 6px 0; width: 64px; } .highlighted { /*border:2px solid #b404ae;*/ background-image: url('img/tick.png'); } #dtcards span { border: medium none; bottom: -4px; color: #0f0; display: none; height: 30px; /*left: -15px;*/ position: absolute; right: -8px; text-indent: -9999px; width: 30px; } #dtcards span.highlighted { display:inline; } .form-top { font-family: "Roboto",sans-serif; padding: 0 25px 15px 25px; background: #FFF; color: #FFF; font-size: 14px; line-height: 20px; text-align: justify; text-align: left; border-top-left-radius: 5px; border-top-right-radius: 5px; } .form-top-left { float: left; padding-top: 25px; } .form-top-left h3 { color: #3d4247; font-size: 24px; font-weight: bold; letter-spacing: 3px; line-height: 24px; /*margin-top: 0;*/ /*color: #FFF;*/ /*font-size: 22px;*/ /*font-weight: 300;*/ /*line-height: 30px;*/ /*margin-bottom: 10px;*/ } .form-top p { /*margin-bottom: 20px;*/ } .form-top-right { float: left; width: 25%; padding-top: 10px; font-size: 66px; color: #ddd; line-height: 100px; text-align: right; } .form-bottom { padding: 15px 40px 30px 15px; background: #FFF; color: #FFF; text-align: left; } .form-bottom form textarea { height: 100px; } .form-bottom form .input-error { border-color: #0078c1; } #ssl_modal .mynewclassclose { margin: 0; opacity: 1; position: absolute; right: -15px; top: -15px; z-index: 999; } .dproceedpay { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .dproceedpay:hover{ -webkit-transition: background ease 0.5s; -moz-transition: background ease 0.5s ; -ms-transition: background ease 0.5s ; -o-transition: background ease 0.5s ; transition: background ease 0.5s ; border: 2px solid #F95E5E !important; } /*.dmodal button.close {*/ /*background: #cfde00 url("http://www.grameenphone.com/sites/all/themes/gpc_myob/images/modal-colse.png") no-repeat scroll center center;*/ /*border: 0 none;*/ /*color: #fff;*/ /*cursor: pointer;*/ /*font-weight: normal;*/ /*height: 28px;*/ /*line-height: 1;*/ /*opacity: 1;*/ /*overflow: hidden;*/ /*padding: 0;*/ /*position: absolute;*/ /*right: -24px;*/ /*text-align: center;*/ /*text-indent: -9999px;*/ /*top: -13px;*/ /*vertical-align: middle;*/ /*width: 28px;*/ /*border-radius: 0px;*/ /*border: none;*/ /*}*/ /* Style the buttons that are used to open and close the accordion panel */ a.daccordion { background-color: #FAFAFA; color: #000; cursor: pointer; padding: 10px 15px; font-size: 16px; font-family: "Roboto",sans-serif; font-weight: normal; text-align: left; border: none; outline: none; transition: 0.4s; display: block; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden; margin-top: 8px; text-decoration: none; } a.daccordion:after { font-family: FontAwesome; content: '\f078'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #fff; float: right; margin-left: 5px; } a.daccordion.active:after { font-family: FontAwesome; content: "\f077"; /* Unicode character for "minus" sign (-) */ } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ a.daccordion.active, a.daccordion:hover { background-color: #EDEDED; } a.daccordion.active { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } /* Style the accordion panel. Note: hidden by default */ div.daccpanel { padding: 15px; background-color: white; display: none; max-height: 0; transition: 0.6s ease-in-out !important; opacity: 0; border: 1px solid #ddd; border-top: 0px; -webkit-box-shadow: 0px 0px 1px 0px #ddd; -moz-box-shadow: 0px 0px 1px 0px #ddd; box-shadow: 0px 0px 1px 0px #ddd; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .daccpanel { text-align: center; } .daccpanel > a { display: inline-block; margin-bottom: 15px; margin-right: 15px; } /* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ div.daccpanel.show { display: block !important; opacity: 1; max-height: 500px; } .footer_dmodal{ overflow: hidden; padding: 0 25px; } .footer_dmodal a { font-family: "Roboto",sans-serif; text-decoration: none; color: #b94a48; font-size: 14px; } .dclearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .dclearfix { display: inline-block; } /* start commented backslash hack \*/ * html .dclearfix { height: 1%; } .dclearfix { display: block; } /* close commented backslash hack */ .form-style-9{ } .form-style-9 ul{ padding:0; margin:0; list-style:none; font-family: "Roboto",sans-serif; } .form-style-9 ul li{ display: block; /*margin-bottom: 10px;*/ min-height: 35px; } .form-style-9 ul li .field-style{ background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #555; display: block; font-size: 14px; height: 30px; line-height: 1.2; padding: 0px 10px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width:100%; margin-bottom: 10px; /*box-sizing: border-box;*/ /*-webkit-box-sizing: border-box;*/ /*-moz-box-sizing: border-box;*/ /*padding: 8px;*/ /*outline: none;*/ /*height: 35px;*/ /*border: 1px solid #B0CFE0;*/ -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; }.form-style-9 ul li .field-style:focus{ box-shadow: 0 0 5px #B0CFE0; border:1px solid #B0CFE0; } .form-style-9 ul li .field-split{ width: 49%; } .form-style-9 ul li .field-full{ width: 100%; } .form-style-9 ul li input.align-left{ float:left; } .form-style-9 ul li input.align-right{ float:right; } .form-style-9 ul li textarea{ width: 100%; height: 100px; } .form-style-9 ul li label { color: #444; font-weight: bold; font-size: 14px; margin: 5px 0px 2px; display: block; } .form-style-9 ul li span { color: #F00; } .form-style-9 ul li input[type="button"], .form-style-9 ul li input[type="submit"] { /*-moz-box-shadow: inset 0px 1px 0px 0px #3985B1;*/ /*-webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;*/ /*box-shadow: inset 0px 1px 0px 0px #3985B1;*/ /*background-color: #216288;*/ border: 2px solid #FFF; padding: 8px; /*display: inline-block;*/ /*cursor: pointer;*/ /*color: #FFFFFF;*/ /*padding: 8px 18px;*/ /*text-decoration: none;*/ /*font-family: "Roboto", sans-serif;*/ /*font-size: 14px !important;*/ /*line-height: 14px;*/ /*min-height: 35px !important;*/ /*width: 90%;*/ } /*.form-style-9 ul li input[type="button"]:hover,*/ /*.form-style-9 ul li input[type="submit"]:hover {*/ /*background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);*/ /*background-color: #28739E;*/ /*}*/ .hvr-pop { backface-visibility: hidden; box-shadow: 0 0 1px rgba(0, 0, 0, 0); display: inline-block; transform: translateZ(0px); vertical-align: middle; margin-right: 5px; } .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { animation-duration: 0.3s; animation-iteration-count: 1; animation-name: hvr-pop; animation-timing-function: linear; } @keyframes hvr-pop { 50% { transform: scale(1.2); } } .dmodal .dclose-reveal-modal, dialog .dclose-reveal-modal { height: 69px !important; padding: 20px !important; top: 18px !important; z-index: 2147483647; } .dmodal .dclose-reveal-modal, dialog .dclose-reveal-modal { right: 3.375rem; } .dmodal .dclose-reveal-modal, dialog .dclose-reveal-modal { color: #aaaaaa; cursor: pointer; font-size: 2.5rem; font-weight: bold; line-height: 1; position: absolute; right: 1.375rem; top: 0.625rem; } .dmodal-content .ldr { left: 45%; position: fixed; top: 40%; width: 10%; display: none; z-index: 9999; } @media screen and (min-width: 100px) and (max-width: 500px) { .dmodal-content{ background: #fff !important; background-image: none; border-radius: 0px; padding: 40px 10px; top: 4em !important; } .dmodal .dclose-reveal-modal, dialog .dclose-reveal-modal { top:-14px; } } .dctabs { position: relative; min-height: 200px; /* This part sucks */ clear: both; margin: 25px 0; padding-left: 62px; max-width: 450px; } .dctab { float: left; } .dctab label { background: #01BDA3; padding: 4px 10px; border: 1px solid #ddd; margin-left: -1px; position: relative; left: 1px; margin-right: 0px !important; /*font-weight: bold;*/ font-size: 15px; color: #fff; } .dctab [type=radio] { display: none; } .dccontent { position: absolute; top: 35px; left: 50px; background: white; right: 0; bottom: 0; padding: 20px; /*border: 1px solid #ccc;*/ } .dccontent a { margin-bottom: 5px; } [type=radio]:checked ~ label { background: white; /*border-bottom: 1px solid white;*/ z-index: 2; color: #222; } [type=radio]:checked ~ label ~ .dccontent { z-index: 1; } .dinput_form { /*max-width: 340px;*/ margin-top: 1%; margin-left: 25px; padding-left: 62px; width: 51%; } .dinput_form .input-error { color: red; margin-bottom: 13px; margin-top: -20px; display: none; } .recharge_form .bindText { position: relative; } .recharge_form .frontText { border-right: 1px solid #cccccc; left: 12px; margin-top: 7px; padding-right: 4px; position: absolute; } .recharge_form .inputCollapse { padding-left: 3.5em !important; } .recharge .inputCollapse { padding-top: 1px !important; } .recharge_form .input-error { color: red; margin-bottom: 13px; } .dnotice_box { border: 1px solid #666; color: #f80000; margin-bottom: 10px; width: 400px; padding: 3px 10px; } .dbuttonSub, .dback { transition: none; } .dback { clear: both; display: block; margin-top: 10px; margin-left: 70px; background-color: #00BDA3; } .fieldset-title { border-bottom: 1px dotted #d8d8d8; font-size: 20px; margin-bottom: 20px; padding: 0; font-weight: bold; } #progressbar { counter-reset: step; overflow: hidden; padding: 50px 20px 30px; } #progressbar li { color: white; float: left; font-size: 9px; list-style-type: none; position: relative; text-transform: uppercase; width: 17%; } #progressbar li.first::before, #progressbar li.first::after { background: #ff6d00 none repeat scroll 0 0; box-shadow: 2px 1px 4px -1px rgba(0, 0, 0, 0.4); color: #ffffff; font-weight: bold; } #progressbar li::before { background: #e0e0e0 none repeat scroll 0 0; border-radius: 49px; box-shadow: 2px 1px 4px -1px rgba(0, 0, 0, 0.4); color: #ffffff; content: counter(step, decimal); counter-increment: step; display: block; font-size: 19px; font-weight: bold; line-height: 30px; margin: -6px auto 3px; width: 30px; text-align: center; } #progressbar li::after { background: #e0e0e0 none repeat scroll 0 0; content: ""; height: 2px; left: -48%; position: absolute; top: 9px; width: 90%; z-index: 999999; text-align: center; } #progressbar li:first-child::after { content: none; } #progressbar li.active::before, #progressbar li.active::after { background: #ffd600 none repeat scroll 0 0; box-shadow: 2px 1px 4px -1px rgba(0, 0, 0, 0.4); color: #019589 !important; font-weight: bold; } .item-list { width: 100%; } .dinput_form input { border-radius: 5px !important; width: 70%; display: inline-block; /*background: transparent;*/ background: rgba(255,255,255,.8); } .dinput_form input:hover, .dinput_form input:focus { background-color: transparent; } .dinput_form label { width:28%; display: inline-block; color: #000; } .dinput_form .bindText { width: 70%; display: inline-block; } .dinput_form .bindText input { width:100% !important; } .dinput_form button { float: right; clear: both; } @media screen and (min-width: 100px) and (max-width: 700px){ .dinput_form label { width: 90% !important; } .dinput_form .bindText { width: 90% !important; } .dinput_form { width: 90% !important; padding-left: 10px !important; } .dinput_form input { width: 90% !important; } .dmodal { background-color: rgba(255,255,255,0.6) !important; } .dmodal-content { background: #fff !important; border-radius: 0 37px; } }