/********************************************************
* Copyright (c) 2013 - 2020 TollPlus, Inc.

*

* All Rights Reserved.

*

* This source code is proprietary property of TollPlus, Inc., and is protected by exclusive licensing policy.

* The content of this file must not be modified, republished, copied or reproduced by anyone without explicit

* written permission by TollPlus, Inc.

*

* Any violations will be subject to penalties to the full extent of the law under the provisions of the license policy.

********************************************************/
/* ************************************************   
Project Name: TBOS V 2.0
Project URL: Internal 
Description: CSS for all Controls 
Author: Naga Mohan Rao Manam
Author Email: mmohan@tollplus.com
Date: 15th January 2014;
Version: 1.0 
************************************************ */


/*--------------------------------Start CreateAccountPage -------------------------------------------------*/
div#reg-content-block { background: none repeat scroll 0 0 #FFFFFF; overflow: auto; padding: 3px; }
.reg-perdetail-Title-suffix-ddl { width: 68px !important; float: left; clear: right; margin: 3px 3px 8px 4px; }
/* class for zip code text box field */
div.divZip { float: left; font-size: 11px; font-weight: normal; }
.contactzip1 { width: 89px !important; float: left; border: 1px solid #8C8C8C; margin-right: 5px !important; height: 19px; }
.contactzip2 { border: 1px solid #8C8C8C; float: left !important; width: 79px !important; height: 19px; }
/* class for alert image [not to display if no error] */
.alert { display: none; float: left; margin-top: 7px; }
.workphone { width: 95px !important; float: left; margin: 0px; height: 19px; }
.lblworkphone-ext { float: left !important; margin: 3px 0px 0 0 !important; width: 25px !important; height: 19px; }
.workphone-ext { float: left !important; margin-right: 2px !important; width: 50px !important; height: 19px; clear: right; }

li.agreeterms { font-weight: bold; display: block; float: left; margin: 10px 0px 8px 189px; }
li.agreeterms input[type="checkbox"] { float: left; }
li.agreeterms label { width: auto !important; margin: 3px 2px 0px 2px !important; }
li.agreeterms a { text-decoration: none; color: #9D4929; font-weight: normal; cursor: pointer; float: left; margin: 3px !important; }
.alertcontrol { border: 1px solid #FF6D6D; background-color: #FDEFEF; }
.removealertcontrol { border: 1px solid #8C8C8C; background-color: #FFF; }
.emailisprefer { float: left !important; margin: 4px 0 0 6px !important; text-align: left !important; width: auto !important; }
.suffix { width: 75px !important; height: 17px !important; }
.divCreateFirstStep div.Frameset ul li span { width: 165px; }
.divCreateFirstStep div.divCheckRightAlign { margin: 3px 3px 8px 225px; }
.divCreateFirstStep div.Frameset ul li span.spanMax { margin: 3px 15px 0 40px; width: 170px; }
.divCreateFirstStep li.agreeterms { margin: 3px 3px 3px 225px; }
.divCreateFirstStep div.Frameset div.buttons { margin-left: 229px; }
.reg-suffix-label { width: 12px !important; float: left; margin: 5px 3px 0 !important; margin-left: 4px !important; width: 31px !important; }
/*---------------------------End CreateAccountPage ---------------------------------------------------------------------*/

/* ------------------------- Start CreateAccount Steps   ---------------------------------------------- */
div.acc-stps-wraper { background: none repeat scroll 0 0 #A41C2B; padding: 2px; }
div.reg-steps { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #A41C2B; overflow: hidden; padding: 3px; }
div.reg-steps img { display: block; float: left; margin: 0 8px; }
div.reg-steps span { display: block; float: left; margin: 3px 15px 5px 0; font-size: 11px; font-weight: bold; text-transform: uppercase; }
/* ------------------------- End CreateAccount Steps   -------------------------------------------------- */

/*--------------Add Vehicle --------------------*/
#reg-veh-details{overflow:auto;padding:2px;}


/* -------------------- Start CreateAccountPayment.aspx & MakePayment\MakePayment.aspx-------------------- */
.ddlCreditCard { border: 1px solid #8C8C8C; float: left; height: 21px; margin-bottom: 7px; width: 130px; }
.ddlBankAccount { border: 1px solid #8C8C8C; height: 21px; width: 130px; }
div#payment-details-heading { overflow: auto; border-bottom: 1px dotted #FFD428; font-size: 12px; font-weight: bold; margin-top: 10px; padding-bottom: 5px; }
div#payment-details-heading span.PaymentWith { float: left; margin-left: 136px; }
div#payment-details-heading span.PaymentAmount { margin-left: 180px; float: left; }
div#existing-account-block { float: left; width: 280px; }
div#existing-account-block span { float: left; width: 122px; text-align: left; margin: 3px 10px 0px 10px; }
div.payment-amt-details-block { float: left; margin-left: 15px; text-align: right; }
div.payment-amt-details-block label { display: block; padding: 6px 0px; clear: both; }
div.payment-amt-details-block span { display: block; padding: 6px 3px 0 0; clear: both; }
div.payment-amt-details-block input[type="text"] { width: 80px; margin-left: 0px; }
div#paymentbynew-link-block { width: 170px; margin-left: 5px; float: right; display: block; }
div#paymentbynew-link-block a { color: #172E5A; text-decoration: none; }
div#paymentbynew-link-block img { margin: 3px 4px 0px 0px; }
div#payment-left-details-block { border-bottom: 1px dotted #FFD428; margin-top: 10px; overflow: auto; padding-bottom: 10px; }
div#acc-type { background: none repeat scroll 0 0 #FFFFDE; border: 1px solid #FFD428; margin: 10px 0; overflow: hidden; padding: 5px 15px; }
div#acc-type2 { margin: -5px 2px; padding: 5px 15px; }
div#acc-type3 { margin: -5px 2px; padding: 5px 15px; }
div#acc-type1 { margin:  -5px 2px; padding: 5px 15px; }
div#divWalletType {margin:0px 22px}
a.linkinfo { color: #003366; float: left !important; margin: 6px -5px 0 6px !important; }
.spanTagDepositValue { margin: 3px 0 0 28px !important; }
span.tagLabel { width: 128px; display: inline-block; margin-left: 5px; }
select.TagDelivery { float: none; margin-left: 5px; width: 135px; }
li.PaymentHeader { }
li.PaymentHeader span { width: 145px !important; }
/*select.TagDelivery{ margin-left: 20px;width: 145px;}*/
div.TagDetails { display: block; float: left; }
div.TagDetails span.header { width: 125px; font-weight: bold; margin: 5px; display: inline-block; }
div.TagDetails span.item { width: 125px; display: inline-block; margin-left: 5px; }
div.TagDetails span.itemfee { width: 100px; display: inline-block; margin-right: 15px; text-align: center; }
div.TagDetails ul li span { width: 125px; display: inline-block; margin-left: 5px; }
div.TagDetails ul li select { float: none; margin-left: 5px; width: 135px; }
div.TagDetails ul li span.itemfee { width: 100px; display: inline-block; margin: 0 15px 0 0; text-align: right; }
/*#Body_ReBill{ padding: 10px;}
#Body_ReBill label{font-weight: bold; font-size: 12px; padding: 4px 10px;text-align: right;width: 197px;}*/
.ReBill span.repleshAlign { font-weight: bold; float: left; padding-right: 10px; margin-top: 0px; font-size: 12px; }
.ReBill table tbody tr td input[type="radio"] { float: left; margin: 0 0 5px 10px; }
.ReBill table tr td label { font-size: 12px; padding: 0px 18px 0px 3px; }
.MakePaymentAc #reg-content-block { padding-top: 5px; }
.divCheckAlign { clear: both; margin: 0px 0px 10px 195px; }
.divCheckAlign label { margin-left: 5px; }
.divPaymentdetail { color: #A41C2B; font-weight: bold; text-align: center; }
.makeRequirefield {background-color: #FDEFEF; border: 1px solid #640E15; border: 1px solid; cursor:not-allowed;}
.requiredfiledalignment li {float:left;clear:both; }
/* ------------------------- End makepayment ---------------------- */

/* ---------------- start verify make payment ------------------ */
div#inner-content-block { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #EB7805; overflow: auto; margin-top: 5px; padding: 15px 10px; width: 936px; }
.reg-Payment-block { margin-top: 10px; }
.reg-Payment-block ul li { clear: both; padding-bottom: 23px; }
.reg-Payment-block ul li span.paymentdetails { font-size: 11px; font-weight: bold; width: 450px; text-align: right; float: left; margin: 7px 8px 0px 0px; }
.reg-Payment-block ul li span.verifyPayent, .reg-Payment-block ul li label.verifyPayent { font-size: 11px; font-weight: bold; width: 375px; text-align: right; float: left; margin: 7px 8px 0px 0px; }
/*Payment/VerifyMakePayment.aspx.*/
.reg-Payment-block ul li span { width: 300px; font-size: 11px; font-weight: normal; text-align: left; float: left; margin: 7px 8px 0px 0px; }
.reg-Payment-block ul li a { font-size: 11px; font-weight: normal; width: 450px; text-align: right; float: left; margin: 7px 8px 0px 0px; }
.verifybtns { clear: both; padding-left: 240px; }
#spnNote { clear: both; color: #9D4929; display: inline-block; margin-top: 10px; text-align: center; margin-left: 265px; }
.divNote{margin-top:10px;}
.divNote ul{margin:0;padding:0; padding-left:10px;}
.divNote ul li {list-style-type:disc;}
/* ---------------- End verify make payment ------------------ */

/* ---------------------> start Preview page <----------------- */
.display-ACinfo { float: left; overflow: hidden; margin: 5px 0px; width: 100%; }
.display-ACinfo span.Acinfo { margin: 3px 0px; width: 222px; float: left; clear: left; text-align: right; color: #2D2B2B; font-weight: bold; font-size: 11px; overflow: hidden; }
.display-ACinfo span { float: left; font-size: 11px; margin: 3px 5px; width: 200px; }
.update-link { color: #A41C2B; float: right; font-size: 12px; margin: 1px 1px 0 0; text-decoration: none; }
.display-ACinfo .phead span { font-size: 12px; float: none; }
.display-ACinfo .phead a { float: right; font-size: 12px; text-decoration: none; }
.display-ACinfo .phead a:hover { text-decoration: underline; }
div#previewleftcontent { float: left; overflow: hidden; width: 925px; }
.display-ACin span { float: left; font-size: 11px; margin: 3px 5px; }
.preview_customer { float: left;margin-top:10px;width:450px; }
.preview_customer .linkProofType { float: left !important; font-size: 11px !important; margin: 3px 5px !important; width: 345px !important; color: #004879; }
.divRetailerlink,.divPrintlink{font-weight: bold;
    margin-top: 10px;
    text-align: center;}
/* ---------------------> End Preview page <----------------- */


/*---Thank you page---*/
.divThanku { border: 1px solid #EB7805; color: #A41C2B; font-size: 13px; font-weight: bold; height: 150px; padding-top: 50px; margin-top: 50px; }
/*---Thank you page---*/

/* -----------------> Start Payment reciept Page  <------------------ */
#re-content { width: 800px; margin-left: auto; margin-right: auto; }
.paymentHeading { font-size: 18px; font-weight: bold; text-align: center; text-decoration: underline; }
.payment-lables { font-size: 12px; margin: 0 0 10px 5px; text-decoration: none; }
.payment-lables span { clear: left; display: block; line-height: 20px; }
.payment-lables { font-size: 12px; text-decoration: none; }
table.Gridtable-payment { border: 1px solid #000000; border-collapse: collapse; padding: 5px; width: 100%; }
table.Gridtable-payment { border-collapse: collapse; }
.Gridtable-payment tr { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #BFBDB8; font-size: 11px; }
.Gridtable-payment tr td { border: 1px solid #000000; padding: 5px; text-align: left; vertical-align: top; }
table.Gridtable-payment { border-collapse: collapse; }
.Gridtable-payment th { border: 1px solid #000000; font-size: 12px; font-weight: bold; padding: 4px; text-align: center; vertical-align: middle; }
table.Gridtable-payment { border-collapse: collapse; }
.divTotalAmount { color: #888888; font-size: 12px; font-weight: bold; margin-right: 2px; float: right; margin-top: 5px; }
.divTotalAmount span { text-align: right; margin-left: 3px; }
.Gridtable-payment tr td.Amount { border: 1px solid #000000; padding: 6px 0 0 2px; text-align: right !important; vertical-align: top; }
.Gridtable-payment tr td.Amount #lblTotalPaymentAmount { margin-right: 4px; }
.divPaymentFooter { margin: 30px auto 0; text-align: center; width: 500px; }
.divPaymentFooter label { clear: both; float: left; font-size: 15px; font-weight: bold; text-align: center; width: 100%; }
.divPaymentFooter span { margin: 10px 0 0 2px; font-size: 12px; line-height: 30px; }
.datePayment { text-align: left; width: 200px; }
div.paymentReceiptfooter { margin-left: auto; margin-right: auto; width: 800px; }
div.paymentReceiptfooter ul li { padding: 14px 0 0 44px; }
div.paymentReceiptfooter li { font-size: 12px; list-style: none outside none; }
div.paymentReceiptfooter a { margin-right: 120px; }

.PaymentReceipt { width: 350px; margin-top: 10px; }
.PaymentReceipt ul { margin: 0; padding: 0; }
.PaymentReceipt ul li { display: block; }
.PaymentReceipt ul li span:first-child { font-size: 11px; font-weight: bold; margin: 3px 5px 0px 10px; text-align: right; width: 130px; display: inline-block; vertical-align: top; }
.PaymentReceipt ul li span { font-size: 11px; font-weight: normal; margin: 3px 20px 0px 0px; text-align: left; width: 180px; display: inline-block; }
/* -----------------> End Payment reciept Page  <------------------ */

/*--------------------> Start Left Block Links <-------------------*/
.sublinks { z-index: 100; width: 151px; float: left; clear: both; }
.cscinactive { float: left; background: #A3C6E4; border: 1px solid #DA7C0C; position: relative; margin-bottom: 5px; text-align: left; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top,  #faa51a,  #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); text-decoration: none; color: #fff; font-size: 11px; font-weight: normal; width: 160px; display: block; padding: 10px 0 10px 10px; }
.cscactive { float: left; background: #fff; border-left: 1px solid #DA7C0C; border-top: 1px solid #DA7C0C; border-bottom: 1px solid #DA7C0C; border-right: 0px solid #DA7C0C; position: relative; margin-bottom: 5px; text-align: left; width: 167px; text-decoration: none; color: #000; font-size: 11px; font-weight: bold; padding: 10px 0 10px 10px; display: block; }
div#manage-con-block { float: right; width: 761px; border: 1px solid #DA7C0C; padding: 10px; overflow: auto; min-height: 420px; }
.subHeadding { color: #A41C2B; font-size: 14px; font-weight: bold; text-transform: capitalize; margin-bottom: 0; }
.ticket-num { font-size: 14px; font-weight: bold; padding: 0 0 5px; color: #A41C2B; }
h1.pageheadding { border-bottom: 1px solid #EEEEEE; color: #231F20; font-size: 18px; margin: 5px 5px 2px; padding-bottom: 5px; text-transform: capitalize; }
.done { background: none repeat scroll 0 0 #F1CC6E; border: 1px solid #FF6B09; color: #003E53; cursor: pointer; float: right; font-size: 12px; margin: 5px 12px; padding: 5px; text-decoration: none; text-transform: capitalize; }
h4.headding4 { color: #000000; font-weight: bold; font-size: 12px; margin-bottom: 10px; text-transform: capitalize; border-bottom: 1px solid #CCCCCC; padding: 0 0 5px; }
h2.headding2 { color: #A41C2B; font-weight: bold; font-size: 12px; padding-bottom: 10px; text-transform: capitalize; padding-top: 10px; }
#custinfoblock { background: none repeat scroll 0 0 #FFFFFF; height: 48px; margin: 8px 10px -15px 0px; padding: 0px 5px 10px; }
/*--------------------> End Left Block Links <-------------------*/
/*-------------------Start Popup block -----------------*/
.backgroundPopupdiv { display: none; position: fixed; _position: absolute; /* hack for internet explorer 6*/ height: 100%; width: 100%; top: 0; left: 0; z-index: 1; }
.panelpopup { display: none; position: fixed; _position: absolute; /* hack for internet explorer 6*/ height: auto; z-index: 2; padding: 12px; font-size: 12px; border-radius: 8px; }
.popupContactClosediv { font-size: 14px; line-height: 14px; right: -16px; top: -16px; position: absolute; font-weight: 700; display: block; height: 34px; width: 34px; cursor: pointer; }
/*-------------------Start Popup block -----------------*/

/* ---------------------> start InvoiceDetails <------------- */
.InvoiceHeaderDetails { border: 1px solid #6BAECA; width: 300px; float: right; background: #ebf1f6; /* Old browsers */ background: -moz-linear-gradient(top,  #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* IE10+ */ background: linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */ padding: 10px 4px 25px 6px; margin-right: 4px; margin-bottom: 10px; overflow: auto; min-height: 50px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; font-size: 11px; }
.InvoiceHeaderDetails table tr td a { color: #004879; cursor: pointer; display: block; font-size: 11px; margin-right: 5px; text-decoration: none; margin-top: 3px; height: 13px; }
.InvoiceHeaderDetails table tr td a:hover { color: #004879; cursor: pointer; display: block; font-size: 11px; margin-right: 5px; text-decoration: underline; margin-top: 3px; }
.InvoiceSummaryBox { border: 1px solid #6BAECA; width: 119px; float: left; background: #ebf1f6; /* Old browsers */ background: -moz-linear-gradient(top,  #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* IE10+ */ background: linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */ margin-bottom: 10px; overflow: auto; height: 50px; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding-top: 5px; font-size: 12px; }
.MathSymbol { font-size: 16px; font-weight: bold; width: 20px; float: left; margin-right: 4px; margin-bottom: 10px; margin-top: 10px; overflow: auto; height: 20px; vertical-align: middle; text-align: center; }
.dashboardHeading { background: none repeat scroll 0 0 #004469; clear: both; color: #FFFFFF; padding: 5px; font-size: 12px; font-weight: bold; }
table.Gridtable { border: 1px solid #91C4E1; border-collapse: collapse; width: 100%; }
.Gridtable tr { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #91C4E1; font-size: 11px; }
.Gridtable th { background: none repeat scroll 0 0 #EBF5FE; border: 1px solid #91C4E1; font-weight: bold; font-size: 10px; padding: 3px; text-align: left; vertical-align: middle; }
.Gridtable tr td { border: 1px solid #BFBDB8; padding: 5px 6px; vertical-align: middle; }
div.invformbox { font-size: 12px; background: none repeat scroll 0 0 #FFFFDE; border: 1px solid #FFD428; margin: 10px; overflow: auto; padding: 15px; }
div.invformbox input[type="text"] { border: 1px solid #8C8C8C; width: 100px; margin: 5px; }
/* ---------------------> End InvoiceDetails <------------- */

/*------------------------> start TicketID <--------------- */
.Detail { background: none repeat scroll 0 0 #E6F7FD; border: 1px solid #6BAECA; float: left; margin-top: 10px; }
.Heading { display: block; float: left; font-weight: bold; font-size: 12px; margin: 2px 0; padding: 4px; text-align: left; width: 122px; }
/*.data{background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #FFFFFF;display: block;margin: 2px 0 2px 0px;padding: 4px 0; text-align: left;}*/
/* -----------------------> End TicketID <------------------- */

/* -----------------------> Start of Account Summary Page <------------------- */
div.Acc-Sum_text-block { margin: 0 0 5px 0; background: #f8f5ec; border-bottom: 1px solid #dedac8; font-size: 12px; font-weight: normal; height: 60px; padding: 5px; }
div.activeInactiveTagBal { height: 34px;  }
div.Acc-Sum_txtBlock { float: left; text-align: left; line-height: 18px; font-size: 12px; font-weight: bold; margin: 7px 25px 0px -4px; }
div.Acc-Sum_AccNumber { width: 343px; overflow: hidden; font-size: 16px; font-weight: bold; color: #003366; margin: 15px 10px 0px 5px; float: left; }
.divWidthCompanyAcc div.Acc-Sum_AccNumber { width: 100%;}
div#Acc-Sum-prepaid-txtBlock { width: 100px; float: left; text-align: left; line-height: 18px; font-size: 12px; font-weight: bold; margin: 7px 25px 0px 168px; overflow: hidden; }
div#Acc-Sum-User-Details { overflow: hidden; padding: 10px; }
div#Acc-Sum-Left-Block { float: left; font-size: 11px; width: 330px; }
div#Acc-Sum-Left-Block img { float: left; margin-right: 10px; }
div#Acc-Sum-txtBlock-prepaid-sub { float: left; font-size: 11px; margin: 7px 0 0 184px; overflow: hidden; text-align: right; width: 115px; }
div.Acc-Sum-txtBlock-sub { float: left; font-size: 11px; margin: 7px 0 0 18px; overflow: hidden; text-align: right; width: 115px; }
div.Acc-Sum-txtBlock-sub span.subSpan { margin-top: 30px; display: block; }
.labels { float: right; height: 15px; padding: 5px 2px 2px; text-align: right; }
div#acc-details-block { float: left; margin: 0 0 0 0; overflow: hidden; width: 667px; /*background-color: #EEEEEE;*/ }
div#sum-contact-block { background: none repeat scroll 0 0 #F7ECDC; margin-bottom: 10px; overflow: hidden; padding: 5px 0 5px 10px; width: 657px; min-height: 73px; }
div.contactDetails {
    width:200px; 
    height:auto; 
    float:left;    
}
div.cuginfoDetails {
    width:200px; 
    height:auto; 
    float:left; 
    margin-left:25px;
}
div#contact-info-block { font-size: 11px; font-weight: bold; overflow: auto; }
.contactHead { display: block; float: left; font-weight: bold; line-height: 18px; text-align: left; text-transform: capitalize; width: 130px; }
.upperaddress { display: block; float: none; line-height: 18px; margin-top: 1px; text-align: left; text-transform: capitalize; }
.contactItem { display: block; float: left; line-height: 18px; margin-top: 1px; text-align: left; }
div#other-detailes-wraper { clear: both; margin-bottom: 10px; overflow: hidden; width: 667px; padding: 0 0 0 5px; }
div#Trans-det-block { float: left; font-size: 11px; overflow: auto; }
div#Trans-det-block span.lbltext { display: block; float: left; font-weight: bold; line-height: 18px; margin-right: 10px; text-align: left; text-transform: none; }
div#Trans-det-block span.valuetext { display: block; float: left; line-height: 18px; text-align: left; }
div#complaints-info-block { float: left; font-size: 11px; margin-left: 10px; overflow: auto; }
div#complaints-info-block span.lbltext { display: block; float: left; font-weight: bold; line-height: 18px; margin-right: 10px; text-align: left; text-transform: capitalize; }
div#complaints-info-block span.valuetext { display: block; float: left; line-height: 18px; text-align: left; }
h4.fl-headding4 { color: #A41C2B; float: left; font-size: 12px; font-weight: bold; margin-right: 10px; margin-top: 0px !important; text-transform: capitalize; border: 0 none; }
a.arrowlink:link { background: url("../Images/ico_arrow_links.gif") no-repeat scroll left center transparent; color: #0562C0; font-size: 12px; padding-left: 12px; text-decoration: underline; text-transform: capitalize; }
a.arrowlink:visited { background: url("../Images/ico_arrow_links.gif") no-repeat scroll left center transparent; color: #0562C0; font-size: 12px; padding-left: 12px; text-decoration: underline; text-transform: capitalize; }
a.arrowlink:hover { text-decoration: none; }
.headding4Vehicle { border: 0 none; color: #A41C2B; float: left; font-size: 12px; font-weight: bold; margin: 0 10px 0 0; text-decoration: none; text-transform: capitalize; }
div.acc-sum-right { float: right; width: 280px; }
div#sum-acc-manage-block { float: right; width: 280px; background-color: #FFF4EB; padding: 0 0 0 7px; min-height: 84px; }
div#sum-acc-manage-block h2.headding2 { color: #A41C2B; font-weight: bold; font-size: 12px; text-transform: capitalize; padding: 10px 0 0 !important; }

ul.manage-subnav { clear: both; margin: 5px 0; }
ul.manage-subnav li { display: block; }
ul.manage-subnav li a { background: url("../images/ico_bullet.gif") no-repeat scroll left center transparent; color: #004879; display: block; font-size: 11px; margin: 0 0 5px 5px; padding-left: 15px; text-decoration: none; }
div#customer-care { background: none repeat scroll 0 0 #EBEBEB; float: right; width: 278px; margin: 10px 0 0; padding: 5px; }
div#customer-care span.phone { background: url("../Images/ico_y_phone.gif") no-repeat scroll left center transparent; color: #0562C0; display: block; margin: 0 0 5px 5px; padding-left: 20px; }
div#customer-care a { background: url("../Images/ico_y_email.gif") no-repeat scroll left center transparent; color: #004879; font-size: 11px; margin: 0 0 5px 5px; padding-left: 23px; text-decoration: none; }
.AccountSummary-Activity-Grid-Header { color: #474747; font-size: 13px; font-weight: bold; padding: 5px 0; }
div.Tabel-wraper { padding: 5px 0; }
a.dashboardlinkbutton:link { color: #01688b; text-decoration: none; font-size: 11px; font-weight: normal; }
a.dashboardlinkbutton:visited { color: #01688b; text-decoration: none; font-size: 11px; font-weight: normal; }
a.dashboardlinkbutton:hover { color: #01688b; text-decoration: underline; font-size: 11px; font-weight: normal; }
a.dashboardlinkbutton:active { color: #01688b; font-size: 11px; font-weight: normal; }
.linkdiv { clear: both; width: 945px; text-align: right; }
div.Acc-Sum-lst-txtBlock { width: 93px; float: left; font-size: 12px; font-weight: bold; text-align: left; line-height: 18px; margin: 7px 0px 0px 0px; }
div.Acc-Sum_Balance { color: #003366; float: left; font-size: 12px; font-weight: bold; margin: 0 3px 0 10px; }
#divAcctBalance div.Acc-Sum_Balance {
    margin: 0 30px 0 10px;
}
#divOWBalance div.Acc-Sum_Balance {
    margin: 0 22px 0 10px;
}
    div.Acc-Sum_Balance span { font-weight:normal;
    } 
div.Acc-Sum_Balance .lblBalance { float: none; padding: 5px 25px 0 0; font-weight: normal; }
div.Acc-Sum-lst-txtBlock-sub { width: 95px; float: right; margin: 7px 0px 0px 0px; }
div.Acc-Sum-lst-txtBlock-sub span { border: 1px solid #ccc; height: 15px; float: right; padding: 2px; text-align: right; }
/*For Displayig button in  TextBoxes div*/
div.Acc-Sum-lst-txtBlock-sub input[type="submit"] { background: none repeat scroll 0 0 #F1CC6E; border: 1px solid #FF6B09; color: #003E53; display: block; float: left; margin: 15px 3px 0px 12px; font-size: 12px; font-weight: normal; text-transform: capitalize; height: 25px; }
div#Acc-Sum-lst-prepaid-txtBlock { width: 93px; float: right; text-align: left; font-size: 12px; font-weight: bold; line-height: 18px; margin: 7px -7px 0px 0px; }
div.Sum_links-block { border-bottom: 1px solid #dedac8; padding: 5px; font-size: 12px; font-weight: normal; text-align: right; overflow: auto; margin-bottom: 10px; clear: both; }
/*For Displaying href tags in Hyper Links div*/
div.Sum_links-block a { display: block; float: right; margin-left: 15px; text-decoration: underline; color: #0562c0; text-transform: capitalize; }
/*For Displaying href tags in Hyper Links div when hover*/
div.Sum_links-block a:hover { text-decoration: none; }
div#info-wraper { overflow: auto; }
divtr { height: 10px; }
.myModalPopupbackGrnd { background-color: #000000; filter: alpha(opacity=50); opacity: 0.7; }
.myModalPopup { min-width: 400px; min-height: 100px; background: white; padding: 10px; border: 1px solid #A7E5FB; }
.myModalPopup span.popupHeading { font-weight: bold; font-size: 12px; }
.divSpecialAlert { background-color: #FFFFDE; width: 947px; border: 1px solid #FFD428; padding: 5px; margin-bottom: 5px; }
.divRevenueCategory { background: none repeat scroll 0 0 #FFF4EB; border: 1px solid #BAE0AF; float: left; font-size: 12px; padding: 5px; }
#divPopupBorder { background: #FFFFFF; border: 1px solid #A7E5FB; margin-bottom: 10px; overflow: auto; padding: 10px 10px 10px 10px; }
/* -----------------------> End of Account Summary Page <------------------- */

/* -----------------------> Start Contact Information Page <------------------- */
.caption { font-size: 12px; font-weight: bold; color: #BA6704; }
div.InformationBlock { padding: 10px 0px; margin-top: 10px; clear: both; }
div.Address { float: left; width: 425px; }
div.Address ul li { margin-top: 5px; overflow: hidden; }
div.InformationBlock label { font-size: 12px; font-weight: bold; display: block; float: left; text-align: left; margin-right: 2px; }
.contact-info { font-size: 11px; font-weight: normal; text-align: left; margin-right: 2px; }
.hdndata { display: none; }
div.Contact { float: left; min-width: 200px; }
div.Contact ul li { margin-top: 6px; overflow: auto; }
div.Contact ul li span { font-size: 11px; font-weight: bold; }
div.Contact ul li span.Normalspan { font-size: 11px; font-weight: normal; }
div.EmailBlock { border-top: 1px dotted; border-bottom: 1px dotted; padding: 5px 0px; overflow: auto; clear: left; margin: 10px 0; }
.EmailBlock ul li { float: left; clear: both; }
.EmailBlock ul li label { font-size: 12px; font-weight: bold; float: left; text-align: left; }
.EmailBlock ul li span { float: left; }
div#EmailSubBlock { width: 100%; float: left; }
div.EmailBlock label { float: left; }
div#EmailSubBlock ul li { margin: 3px; }
div.AccHolderBlock { border-bottom: 1px dotted #4F4F4F; clear: left; margin-bottom: 10px; overflow: auto; padding-bottom: 10px; }
div.delete { margin: 7px 0 0 5px; float: left; }
/* -----------------------> End Contact Information Page <------------------- */

/* -----------------------> Start  Security Settings Page <------------------- */
.update-block { margin: 10px 0px; float: left; width: 500px; min-height: 100px; overflow: hidden; }
.pin { width: 150px; float: left; text-align: right; margin-top: 5px; }
.PinValue { text-align: right; position: absolute; }
.hdnPinValue { text-align: right; position: relative; top: -3px; }
.hrfShow { position: absolute; }
.hrfHide { text-align: left; position: relative; }
.divChange { float: left; overflow: auto; margin: 4px 0 0 17px; position: relative; }
.divCancel { float: left; overflow: hidden; margin-left: 5px; text-align: left; }
.divCancel a { margin-top: 5px; }
.divCancel a:hover { margin-top: 5px; }
.divChange img { margin-left: 12px; }
.divheading { width: 40px; float: left; overflow: auto; margin-left: 5px; margin-top: 8px; }
.divShowHide { float: left; overflow: auto; margin: 7px 30px; }
/* -----------------------> End  Security Settings Page <------------------- */

/*------------------------> Start Add Vehicle Page <---------------*/
.notevehicle { color: #9D4929; margin-left: 141px !important; text-align: left !important; width: 473px !important; }
.noborder { border: 0px !important; }
.divheight { min-height: 361px; }
/*------------------------> End Add Vehicle Page <---------------*/

/*------------------------> Start Add addRefreshblocksContainer  <---------------*/
div.addRefreshblocksContainer { margin: 5px 0px 0px 0px; }
div.addRefreshblocksContainer input[type="Image"] { cursor: pointer; float: left; margin: 0 5px 2px 0; }
div.addRefreshblocksContainer span { color: #8D8D8D; font-size: 11px; font-weight: bold; margin: 1px 0px 0px 0px; float: left; }
/*------------------------> Start Add addRefreshblocksContainer  <---------------*/


/* -----------------------> Start Document<------------------- */
.LnkAdd { color: #004879; cursor: pointer; display: block; font-size: 11px; margin: 5px 0px 0px 60px; text-decoration: none; float: left; background: none; border: none; }
.LnkAdd:hover { text-decoration: underline; }
/* ----------------------->  End Document<------------------- */

/*----Start Alerts and communication Page-----*/
#divAlertBlock table { border-collapse: collapse; border-spacing: 0; }
#divAlertBlock table td { width: 110px; display: inline-block; vertical-align: middle; padding: 2px; }
#divAlertBlock table td.alerttype { width: 170px; display: inline-block; }
#divAlertBlock table td.tdSMS span { margin-left: 10px; }
#divAlertBlock table td.tdEmail span { margin-left: 7px; }


#divConfigAlerts table { border-collapse: collapse; border-spacing: 0; }
#divConfigAlerts table td { width: 110px; display: inline-block; vertical-align: middle; padding: 2px; }
#divConfigAlerts table td.alerttype { width: 170px; display: inline-block; }
#divConfigAlerts table td.tdSMS span { margin-left: 10px; }
#divConfigAlerts table td.tdEmail { width: 90px; }
#divConfigAlerts table td.tdEmail span { margin-left: 7px; }



div.alert-inner { border: 10px solid grey; min-height: 50px; overflow: auto; padding: 10px; }
.normalfont { display: block; line-height: 26px; }
div#status { float: left; width: 80px; }
.hdndata { display: none; }
.imginvisible { display: none; margin-top: 10px; }

/*----End Alerts and communication Page-----*/

/*----Start Special Alerts and Account Summary Page-----*/
.specialalertblock { background: #FFFFDE; border: 1px solid #FFD428; margin-bottom: 5px; overflow: hidden; }
.morqueeblock { float: left; width: 920px; }
.imgcloseallblock { float: right; }
div.specialalertlast { font-size: 11px; font-weight: normal; margin: 0px 0px 0px 15px; }
div.specialalert { font-size: 11px; font-weight: normal; margin: 0px 0px 13px 15px; }
.splalertimgclose { margin-left: 10px; width: 8px; cursor: pointer; }
.splalertimgcloseall { width: 16px; cursor: pointer; float: right; }
/*----End Special Alerts and Account Summary Page-----*/





span.oneTime { margin-left: 0px !important; }
.oneTimeButton { margin-left: 155px !important; }

/*================================*Start UserControls*=================================================/*

/*----------------------------- start MakePaymentRightContent.ascx------------------------------------- */
h2.right-block-subheadings { border-bottom: 1px dotted #000000; color: #0C315D; margin-bottom: 10px; font-size: 13px; font-weight: bold; }
/*-----------------------------  End MakePaymentRightContent.ascx  ------------------------------------ */

/* -----------------------> Start Paging User Control <------------------- */
.PagerRowStyle { overflow: auto; margin: 10px 0px; clear: both; }
.nav-left { margin-bottom: 10px; float: left; }
.ArrowBtn { color: #474747; font-size: 12px; font-weight: bold; text-decoration: none; }
.nav-right { margin-bottom: 10px; width: 330px; font-size: 12px; font-weight: bold; float: right; }
.Previous { float: left; color: #8B0000; font-size: 12px; font-weight: bold; margin-left: 12px; text-decoration: none; }
.Previous:hover { color: #ca3a44; }
.Previous-dis { color: #999999; font-size: 12px; font-weight: bold; padding-left: 12px; text-decoration: none; }
.Next { color: #8B0000; font-size: 12px; font-weight: bold; margin-right: 12px; text-decoration: none; }
.Next-dis { color: #999999; font-size: 12px; font-weight: bold; padding-right: 12px; }
.Next:hover { color: #ca3a44; }
.current-page { background-color: #FEF1F1; border: 1px solid #F2A2A2; color: #8B0000; padding: 0px 2px; display: inline-block; font-size: 12px; font-weight: normal; }
.currentPageNumber { margin: 0px 5px 0px 10px; font-size: 12px; font-weight: normal; display: inline-block; }
.PagerList { text-align: center; color: #000; padding: 0px 2px; border: 1px solid #D4D4D4; text-decoration: none; font-size: 12px; font-weight: normal; display: inline-block; }
.PagerList:hover { color: #8b0000; border: 1px solid #f2a2a2; background-color: #FEEEDF; }
.txtPagenumber { border: 1px solid #D4D4D4; width: 25px; margin-left: 5px; }
.lblBold { font-size: 11px; font-weight: bold; margin-left: 30px; display: block; float: left; }
/* -----------------------> End Paging User Control <------------------- */

/* -----------------------> Start  Trip Details Page <------------------- */
div.divView { border: 1px solid #8E8E8E; margin-top: 10px; }
div.divView img { margin: 0 0 10px 10px; }
h1.tabstripheadding { background: url(../Images/toll_intweb_tabstripheadding_bg.png ) repeat-x left bottom; font-size: 16px; font-weight: bold; color: #6a6a6a; margin: 0px; padding: 10px; }
#divViewTrips { width: 50px; height: 50px; border: 1px solid #ccc; }
div.CloseButton { float: right; margin-right: 10px; margin-top: -30px; }
div.searchBox { border-top: 1px solid #8e8e8e; background: #f7f7f7; margin: 0px 5px 10px 5px; padding: 10px; float: left; overflow: auto; }
/* -----------------------> End Trip Details Page <------------------- */

/*------------------------> Start Attachment UserControl Page <---------------*/
div.Messagebox { background: url("../images/ext_web_ico_y_alert.png") no-repeat scroll 15px center #FFFFDE; border: 1px solid #CCCCCC; font-size: 11px; margin: 5px; padding: 15px 15px 15px 75px; }
div.Messagebox ul { list-style-position: inside; list-style-type: disc; margin-left: 40px; }
ol, ul { list-style: none outside none; }
div#pnlfileupload { width: 550px; }
div.errorblock { background: #fff3f3; border: 1px solid #ff8082; }
div.errorblock span { background: #FFF3F3 url(../images/ico_error.png) no-repeat left; padding: 8px 0 8px 70px; color: #d7043b; font-weight: bold; display: block; line-height: 18px; }
div.errorblock .errorClose { float: right; background: url(../Images/ico_close.png) no-repeat left; width: 16px; height: 16px; }
div.errorblock .errorClose:hover { cursor: pointer; }
/*------------------------> End Attachment UserControl Page <---------------*/

/* -----------------------> Start EStatement User control<------------------- */
#divMain { background: #FFFFFF; border: 1px solid #A7E5FB; margin-bottom: 10px; overflow: auto; padding: 10px 10px 10px 10px; }
.btnCommonCls { color: #003E53; font: 13px Verdana,Arial,Helvetica,sans-serif; background: none repeat scroll 0 0 #F1CC6E; border: 1px solid #FF6B09; height: 30px; padding: 0px 10px 0px 10px; margin-right: 10px; }
#divTextGoGreen { font: 18px Verdana,Arial,Helvetica,sans-serif; padding: 5px 0px 0px 5px; }
#divImage { padding: 30px 0px 30px 350px; }
#divbtnEDelivery { padding: 30px 0px 30px 225px; }
#p1 { padding: 8px 0px 8px 180px; font: 15px Verdana,Arial,Helvetica,sans-serif; }
.li1 { margin-left: 235px; padding: 5px 0 5px 10px; font: 13px Verdana,Arial,Helvetica,sans-serif; list-style: circle; }
/* -----------------------> End EStatement User control<------------------- 

/*------------------------------------Start ManageSubGroups-----------------------------------------------------*/
.divDepartment { float: left; height: 300px; margin: 15px 0px 15px 5px; padding: 10px; }
.lblHeadSubGroups { margin: 20px 20px 10px 0px; font-size: 12px; font-weight: bold; }
.divListViewAlign { display: block; float: left; /* margin-left: 50px;*/ }
.divSubGpbtn { float: left; width: 40px; height: 200px; /*background-color:Red; */ margin-top: 80px; margin-left: 10px; }
.buttonMoveAssign { margin-top: 0px; margin-bottom: 15px; width: 30px; }
.divList { width: 230px; height: 270px !important; margin-top: 3px; margin-bottom: 3px; /*background-color:pink; */ }
.divList > option { padding: 5px; }
.divManageUserAlign { }
/*------------------------------------Start ManagePages------------------------------------------------------------*/

/*================================*End UserControls*=================================================*/

.spanDocuments { width: 300px !important; font-weight: bold; }

div.modalpopupsPM { width: 600px; }
div.modalpopupsPM { background-color: #FFF; border: 1px solid #E08005; }
div.popupHeading .popupbtnClose {
    top: -16px;
    right: -13px;
    position: absolute;
}
div.popupHeading {
    font-size: 18px;
    margin: 0;
    position: relative;
    padding: 10px;
    height: 20px;
    background-color:orange;
    color:white;
}

.modalBackground { background-color: #000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   /* IE 8 Compatibility */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);/* IE 7 Compatibility */opacity: 0.5;/* Everyone else */}

.liFrameCheckAlign { clear: both; margin-left: 190px; }

.divThankuAccountNo {padding-top: 10px;text-align: center;}



/* ------------------------------------------------ Start AccountSummaryInformation<------------------------------------ */
.divAccordin  .ui-accordion, .divAccordin .ui-accordion-content { padding:0px !important; }
.divAccordin .gridView{margin:0px !important;}
.divAccordin .ui-state-active,.divAccordin .ui-widget-content .ui-state-active,.divAccordin .ui-widget-header .ui-state-active{border:1px solid #9F6875 !important;}
.divAccordin .ui-widget-content{border:none !important;}
.divAccordin .ui-accordion .ui-accordion-content{overflow:visible;}
/* ------------------------------------------------ End AccountSummaryInformation<------------------------------------ */
/* ---------------------------------------- Start Manage Vehicle ------------------------------------------------------------*/
.divHeadClose { cursor: pointer; float: right; margin: 0; }
.divHeadClose > input { float: left; margin: 0 0 0 1px; width: 18px; }
.divHeadClose > label { cursor: pointer; float: left; margin: 2px 3px 0 0; }
/* ---------------------------------------- End Manage Vehicle ------------------------------------------------------------*/
.rbtnColor {
    color: white; font-weight: bold;
}
.divPaymentModes {     
    margin: -5px; 
    padding: 5px;
}

.mleft {
    margin-left: 93px;
}
.mtop {
    float: left; 
    margin-top: 5px;
}
.left {
    float: left;
}
.convienceFee {
    background-color: #d7d7d7; 
    border: 1px solid #999
}
div#Body_divCIB {
    margin:  -4px 69px 7px 2px; padding: 5px 15px;
}
div#acc-type4 { margin:  -13px 69px auto 2px; padding: 5px 15px; }
div#acc-type5 { margin: -13px 69px auto 2px; padding: 5px 15px; }
div#acc-type6 { margin:  -5px 2px; padding: 5px 15px; }
div#acc-type7 { margin:  -5px 2px; padding: 5px 15px; }
div#acc-type8 { margin:  -5px 2px; padding: 5px 15px; }
.txtMBTransfer {
   border: 1px solid #999;
   font-size: 12px;
   font-weight: normal;
   height: 19px !important;
   float: left;
   margin: 0px 0px -7px 4px !important;
   width:100px;
}

div.divAlignRdobtn { float: left; }
div.divAlignRdobtn > table { float: left !important; margin: 5px 3px 8px 0px !important; }
div.divAlignRdobtn table tbody tr { float: left; }
div.divAlignRdobtn table tbody tr td input[type="radio"] { float: left; margin: 3px 1px 0 5px; }
div.divAlignRdobtn table tbody tr td label { float: left; font-size: 11px; margin: 4px 10px 0 0 !important; }
div.divAlignRdobtn input[type="radio"] { float: left; margin: 7px 2px 10px 15px; }
div.divAlignRdobtn input[type="checkbox"] { float: left; margin: 7px 2px 10px 15px; }
div.divAlignRdobtn label { font-size: 11px; margin: 7px 0px 10px 0px; float: left; }
div.divAlignRdobtn img { margin: 9px 2px 0 5px !important; }

div.Frameset div label { float: left; margin: 6px 0 0 !important; width: auto !important; padding: 0px; }




/*Login ModelPopup CSS for declaration*/ 

div.modalpopupsPM1 { width: 600px; }
div.modalpopupsPM1 { background-color: #e1e1e1; border: 1px solid #E08005; }
div.popupHeading .popupbtnClose1 {
    top: -16px;
    right: -13px;
    position: absolute;
}
div.popupHeading1 {
    font-size: 18px;
    margin: 0;
    position: relative;
    padding: 10px;
    height: 20px;
    background-color:#e1630f;
    color:white;
}

.modalBackground1 { background-color: #000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   /* IE 8 Compatibility */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);/* IE 7 Compatibility */opacity: 0.5;/* Everyone else */}

.button-11{
	  border-radius: 25px;
	  background-color: #a41c2b;
	  color:#fff;
	  padding: 5px 20px;
	  font-size:15px;
	  border: none;
	  box-shadow: 0 2px 5px 0 rgba(113, 113, 113, 0.24);
	
	  }
	 @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
     #Body_pnlDeclarationPopup{
        left:0 !important;
          
      }
     }
.attachmentLi {
    margin-left: -35px ;
    list-style-position: outside;
}


/* The Modal (background) */
.modalDoc {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 0px; /* Location of the box */
    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.4); /* Black w/ opacity */
}

.modal-contents {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Popup css start */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: #fff;
    padding: 20px;
    max-width: 50%;
    width: 100%;
    border-radius: 5px;
}

    .popup-content img {
        width: 100%;
        height: auto;
    }

    .popup-content iframe {
        width: 100%;
        height: 325px;
    }

.button-container {
    text-align: center;
    margin-top: 20px;
}

.filepreviewcontainer {
    width: 100%;
    max-height: 400px;
    overflow: auto;
}

#filePreviewContent {
    width: 100%;
}
/* The Modal Popup css start */