<h2>Autocomplete Off</h2>
<input name="password" id="password" type="password" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />
<br /><br />
<input type="text" style="display:none;">
<input type="password" name="pswd" id="password" maxlength="16" size="20" >
<br><br>
<input type="text"/ class="clickHere">
<a href="#" id="button">Click</a>
reload
<br><br><br>
© 2014 - <script>document.write(new Date().getFullYear());</script>
<!-- Reorder or Swap Div -->
<!-- https://stackoverflow.com/questions/220273/how-can-i-reorder-my-divs-with-css -->
<div id="wrapper">
<div id="firstDiv">
Content to be below in this situation
</div>
<div id="secondDiv">
Content to be above in this situation
</div>
</div>
<br><br><br>
<form class="otp" autocomplete="off" novalidate>
<fieldset>
<input maxlength="1"/>
<input maxlength="1"/>
<input maxlength="4"/>
<input maxlength="1"/>
<input maxlength="1"/>
<input type="text" pattern="[0-9]*" inputmode="decimal"></input>
</fieldset>
</form>
<!--
<input type="file" capture="user" accept="image/"/>
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="image/*" capture="capture">
<input type="file" accept="image/*;capture=camera">
-->
<!-- Auto Complete Off -->
<!-- https://stackoverflow.com/questions/31612867/autocomplete-off-not-working-in-chrome -->
<!-- https://css-tricks.com/snippets/html/autocomplete-off/ -->
<!-- Remove .html extension from URL -->
<!-- https://stackoverflow.com/questions/5730092/how-to-remove-html-from-url -->
<!-- http://www.codingcage.com/2015/11/how-to-remove-php-html-extensions-with.html -->
<!-- Mailchimp Subscribe -->
<!-- https://medium.com/@luclemo/using-jquery-and-the-mailchimp-api-to-get-around-the-already-subscribed-error-bab3f593a1ce -->
<!-- Flexbox -->
<!-- http://altitudelabs.com/blog/flexbox-in-10-minutes/ -->
<!-- Dynamicaly Editable HTML Table Add Edit Delete Rows -->
<!-- https://stackfame.com/editable-html-table-using-javascript-jquery -->
<!-- http://talkerscode.com/webtricks/add-edit-and-delete-rows-from-table-dynamically-using-javascript.php -->
<!-- Wireframe Create -->
<!-- https://colorlib.com/wp/free-web-page-wireframe-kits/ -->
<!-- https://pixelbuddha.net/freebie/wyre-web-layout-flowcharts -->
<!-- http://handdrawngoods.com/store/jolly-ui-free-hand-drawn-ui-kit/ -->
<!-- https://drive.google.com/file/d/0B9ist9NQo0AmZFZaWGNrWGQ3QVU/view?usp=sharing -->
<!-- Number Input -->
<!-- https://jsfiddle.net/Behseini/ue8gj52t/ -->
<!-- Button enabled if at least one checkbox is checked -->
<!-- http://jsfiddle.net/chriscoyier/BPhZe/76/ -->
<!-- https://www.aspforums.net/Threads/418437/Enable-button-only-if-at-least-one-CheckBox-is-checked-using-jQuery/ -->
<!-- https://htmlcssphptutorial.wordpress.com/2015/08/19/enable-disable-submit-button-if-one-checkbox-is-checked/ -->
<!-- http://jsfiddle.net/Gagan_Gami/eKHFb/14/ -->
<!-- http://www.includehelp.com/code-snippets/javascript-select-unselect-check-unckecck-all-checkboxes.aspx -->
<!-- https://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery -->
<!-- https://tomelliott.com/javascript-ajax/javascript-function-check-uncheck-checkboxes -->
<!-- https://www.formget.com/checkuncheck-all-checkboxes-using-jquery/ -->
<!-- http://makitweb.com/how-to-check-and-uncheck-all-using-jquery-and-javascript/ -->
<!-- Select/ Unselect All Checkbox -->
<!-- https://codepen.io/dhavalt10/pen/boGBXY -->
<!-- HTML Resources -->
<!-- https://tympanus.net/codrops/2018/02/23/freebie-dropcast-website-template-html-sketch/?ref=ewebdesign.com -->
<!-- Loading Spinner -->
<!-- https://patrickdesjardins.com/blog/bootstrap-loading-spinner-with-css3 -->
<!-- https://stackoverflow.com/questions/1964839/how-can-i-create-a-please-wait-loading-animation-using-jquery -->
<!-- https://www.aspsnippets.com/Articles/Display-loading-progress-image-when-Page-Loads-or-does-PostBack-using-ASPNet.aspx -->
<!-- https://ruwandotnet.wordpress.com/2012/02/28/adding-ajax-loader-into-an-asp-net-mvc-application/ -->
<!-- https://www.c-sharpcorner.com/article/enable-ajax-loader-in-asp-net-mvc/ -->
<!-- Page Loader -->
<!-- https://ihatetomatoes.net/create-custom-preloading-screen/ -->
<!-- http://jsfiddle.net/MrPolywhirl/cbLsc81f/ -->
<!-- http://jsbin.com/huyusu/3/edit?html,css,js,output -->
<!-- https://ihatetomatoes.net/create-custom-preloading-screen/ -->
<!-- http://jsfiddle.net/uQTb2/1/ -->
<!-- https://forums.asp.net/t/1580185.aspx?Showing+Animation+During+a+Long+Page+Load+ -->
<!-- Easy Loader Animation -->
<!-- http://kremlianski.exxo.ru/easyloader/index.html -->
<!-- html button anchor display block -->
<!-- http://jsfiddle.net/XmnnY/16/ -->
<!-- Design Trends -->
<!-- https://ewebdesign.com/web-design-trends-2018/ -->
<!-- DataTable Checkbox -->
<!-- https://stackoverflow.com/questions/42570465/datatables-select-all-checkbox -->
<!-- Bootstrap Alart Auto Close -->
<!-- http://jsfiddle.net/mfX57/2149/ -->
<!-- Custom FIle UPload -->
<!-- https://tympanus.net/Tutorials/CustomFileInputs/ -->
<!-- https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ -->
<!-- Multiple Collapse -->
<!-- https://www.bootply.com/90JfjI2Q7n -->
<!-- Slick Carsoul Slider -->
<!-- https://jsfiddle.net/solodev/qszmrx2n/ -->
<!-- http://www.islamic-web.com/halal-haram/list-of-permitted-and-prohibited-animals/ -->
<!-- https://bootstrapious.com/p/bootstrap-recaptcha -->
<!-- http://vera.kkuistore.com/ -->
<!-- https://www.google.com/search?client=firefox-b-ab&ei=I3VEW-W9Adnz9QPexIL4Dg&q=echo+%24responseArray%5B%27message%27%5D+display+problem&oq=echo+%24responseArray%5B%27message%27%5D+display+problem&gs_l=psy-ab.3...22433.45713.0.45994.0.0.0.0.0.0.0.0..0.0....0...1c.1.64.psy-ab..0.0.0....0.kPJppEXd3ps -->
<!-- https://jsfiddle.net/ug6f918s/423/?utm_source=website&utm_medium=embed&utm_campaign=ug6f918s -->
<!-- https://www.jqueryscript.net/menu/Responsive-Multi-level-Dropdown-Toggle-Menu-Plugin-With-jQuery.html -->
<!-- Isotope Filtering -->
<!-- https://jsfiddle.net/LL39kwue/2/ -->
<!-- https://jsfiddle.net/8mj4nftv/2/ -->
<!-- https://crackingpatching.com/2017/12/wondershare-filmora-crack-incl-keygen.html -->
<!-- https://scotch.io/bar-talk/best-vs-code-themes-of-2017?utm_medium=email&utm_campaign=Newsletter%20issue%20211&utm_content=Newsletter%20issue%20211+CID_0c64749afe02cc6b5073a6a04bc09483&utm_source=eWebDesigncom%20Newsletter -->
<!-- https://docs.emmet.io/cheat-sheet/ -->
<!-- https://www.shopify.com/partners/blog/best-visual-studio-code-extensions-2017 -->
<!-- https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer -->
<!-- https://medium.freecodecamp.org/favorite-vs-code-extensions-2017-786ea235812f -->
<!-- https://scotch.io/bar-talk/best-vs-code-themes-of-2017?utm_medium=email&utm_campaign=Newsletter%20issue%20211&utm_content=Newsletter%20issue%20211+CID_0c64749afe02cc6b5073a6a04bc09483&utm_source=eWebDesigncom%20Newsletter -->
<!-- https://pixelbuddha.net/freebie/sienna-fashion-social-media-kit -->
<!-- Autowidth Input -->
<!-- https://stackoverflow.com/questions/30520858/dynamically-adjust-html-text-input-width-to-content -->
<!-- We have shared our existing App and Web Portal screenshot to you. Please check attachments.
we are looking best and enrich User Experience (UX) and Usability experience from you to develop our product.
Note that attachment can be helpful to understand structure your thinking, research, testing, or creativity. -->
<!-- http://vera.kkuistore.com/layouts/ -->
<!-- http://jsfiddle.net/TJ6Fz/ -->
<!-- https://axmed7bahjad.wordpress.com/ -->
<!-- Responsive Multilevel Menu -->
<!-- https://www.jqueryscript.net/menu/Responsive-Multi-level-Dropdown-Toggle-Menu-Plugin-With-jQuery.html -->
<!-- https://www.jqueryscript.net/menu/Mobile-Multi-Level-Menu-jQuery-cookcodesmenu.html -->
<!-- File Upload -->
<!-- http://jsfiddle.net/rohitazadwincere/6c1ak9t4/6/ -->
<!-- Active Menu Background -->
<!-- https://jsfiddle.net/ilyabogdanov/4fyxywee/ -->
<!-- https://tutorialzine.com/2013/04/50-amazing-jquery-plugins -->
<!-- Text Ellipsis Center -->
<!-- https://stackoverflow.com/questions/30953054/how-to-show-text-overflow-ellipsis-in-the-middle-of-the-text -->
<!-- https://stackoverflow.com/questions/42900585/text-overflow-ellipsis-the-dots-should-be-center-of-the-text -->
<!-- Refresh Particular Div -->
<!-- https://stackoverflow.com/questions/18490026/refresh-reload-the-content-in-div-using-jquery-ajax -->
<!-- https://stackoverflow.com/questions/17886578/refresh-part-of-page-div -->
<!-- Count Characters -->
<!-- https://stackoverflow.com/questions/5120736/count-characters-in-paragraph-using-jquery-not-for-input-textarea -->
<!-- https://colorlib.com/wp/free-admin-templates/ -->
<!-- Chart JS -->
<!-- https://jsfiddle.net/holp/68wf75r8/ -->
<!-- https://stackoverflow.com/questions/49422790/how-to-create-legend-position-in-pie-chart-js -->
<!-- Leave an Element when Mouse Hover JS -->
<!-- https://stackoverflow.com/questions/31267831/how-to-make-a-div-which-escapes-from-mouse-cursor-randomly -->
<!-- https://stackoverflow.com/questions/11929687/tricky-button-moving-away-when-mouseover-in-javascript -->
<!-- Responsive Font Size -->
<!-- https://stackoverflow.com/questions/15649244/responsive-font-size -->
<!-- Window Print Background Fix -->
<!-- https://www.outsystems.com/forums/discussion/28754/background-color-not-displayed-in-final-pdf/ -->
<!-- @media print
{
.class
{
background-color: #1a4567 !important;
-webkit-print-color-adjust: exact;
}
} -->
<!-- Seat Plan -->
<!-- https://w3layouts.com/bus-ticket-reservation-widget-flat-responsive-widget-template/ -->
<!-- https://w3layouts.com/movie-ticket-booking-widget-flat-responsive-widget-template/ -->
<!-- https://www.jqueryscript.net/chart-graph/Full-featured-Seating-Chart-Plugin-With-jQuery-Seat-Charts.html -->
<!-- https://www.behance.net/gallery/69579243/Finance-Mobile-App-UI-UX -->
<!-- https://dribbble.com/shots/5888618-swim-com-logo-exploration?utm_campaign=2019-01-28&utm_medium=email&utm_source=replay -->
<!-- https://dribbble.com/shots/4364439-Fashion-Shopping-App/attachments/993419 -->
<!-- https://www.dropbox.com/s/4pk4vfaudsz7lkc/AppScreenshotTemplate%201.0.zip -->
<!-- https://www.behance.net/gallery/54845999/Free-Download-New-Minimalistic-Phone-Mockups -->
<!-- https://www.dropbox.com/s/o7snm2czuoj2ta2/Flat%20Phone%20Mock%20Up.rar?dl=0 -->
<!-- https://dribbble.com/shots/6046704-Olimpiyuk-Logo -->
<!-- https://www.junction.nl/ -->
<!-- https://send.firefox.com/download/96045248a7dcde24/#4ihNXvHDaIob81BD-KBuZA -->
<!-- https://images-platform.99static.com/zH8vTAzt-Rk0ER1JvPoJBGNjPgY=/fit-in/900x675/99designs-contests-attachments/15/15057/attachment_15057172 -->
<!-- Get Radio BUtton Value -->
<!-- https://jsfiddle.net/tactics/bykf31e6/4/ -->
<!-- http://www.dotnetqueries.com/Article/105/bootstrap-datetimepicker-disable-past-dates -->
<!-- http://productivemission.com/wp-content/uploads/2017/08/1OMWR9P0.jpg -->
<!-- https://www.behance.net/gallery/72486017/E-Comm-Free-UI-Kit-for-Adobe-XD?scid=500186a2-a3f8-43d7-a36c-cf74b9d2a7aa&mv=social&mv2=owned_social -->
<!-- https://webdevtrick.com/css-masonry-image-grid/ -->
<!-- https://aiocollective.com/blog/images-height-and-position-problem-masonry-isotope/ -->
<!-- HTML JS Cart -->
<!-- https://www.smashingmagazine.com/2019/08/shopping-cart-html5-web-storage/?ref=ewebdesign.com -->
<!-- https://www.facebook.com/anamika.rahman.9216778 -->
<!-- https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css -->
<!-- https://codepen.io/sdras/pen/5ce254bb4f4d2bb240081b0eb6d6554d -->
<!-- https://www.youtube.com/watch?v=rkkX9vniQU8 -->
<!-- https://www.youtube.com/watch?v=TyRUo8I-kRs -->
<!-- https://medium.com/flatlogic/top-javascript-maps-api-and-libraries-162523cef967 -->
<!-- https://freefrontend.com/react-progress-bars/?ref=webdesignernews.com -->
<!-- https://stackoverflow.com/questions/14645806/get-all-attributes-of-an-element-using-jquery -->
<!-- Browser Back Button -->
<!-- https://stackoverflow.com/questions/37838430/detect-if-page-is-load-from-back-button -->
<!-- https://css-tricks.com/snippets/javascript/go-back-button/ -->
<!-- https://stackoverflow.com/questions/1014203/best-way-to-use-googles-hosted-jquery-but-fall-back-to-my-hosted-library-on-go -->
<!-- Better Form Inputs for Better Mobile User Experiences -->
<!-- https://css-tricks.com/better-form-inputs-for-better-mobile-user-experiences/?fbclid=IwAR0HUYm7YNS8KG_BKLSeoWc6TJVcC9lQd8YCG3BVeYpzaPgFNKV9ai53Ddg -->
<!-- https://twitter.com/addyosmani/status/1348902534363152385/photo/1 -->
<!-- https://css-tricks.com/form-validation-part-1-constraint-validation-html/ -->
<!-- https://css-tricks.com/better-form-inputs-for-better-mobile-user-experiences/ -->
<!-- https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/ -->
<!-- https://blog.alexdevero.com/javascript-switch-statement/?ref=webdesignernews.com -->
<!-- Job Purpose
Creates a successful user experience using the latest technology by studying user interests, developing visual product and testing prototypes.
Job Roles, Responsibilities & Authorities
1. Gather and evaluate user requirements, analyzing user goals and target audience and developing UI, UX concept for information structure by studying product/ service content
2. Develop UI mockups and prototypes by creating look and feel interface of the concept
3. Illustrate design ideas using storyboards, process flows and sitemaps
4. Design graphical user interface elements
5. Develop UI Mockup/ prototype to front end (using HTML, CSS, JavaScript and more)
6. Identify and troubleshoot UX
7. Creating visualizations of quality product
8. Creating branding and stationary related design -->
<!-- CDN Fallback -->
<!-- <script type="text/javascript" th:inline="text">
/*<![CDATA[*/
window.jQuery || document.write('<script src="[[@{/js/jquery-1.10.2.min.js}]]"><\/script>')
/*]]>*/
</script> -->
<!-- <script> window.jQuery || document.write('<script src="/Scripts/DataTables/jquery.dataTables-1.10.20.min.js">\x3C/script>')</script> -->
<!-- <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script> -->
<!-- https://gist.github.com/rogeriopradoj/7587405 -->
<!-- <script>window.jQuery.fn.dataTable || document.write('\x3Cscript src="/Scripts/DataTables/jquery.dataTables-1.10.20.min.js"\x3E\x3C/script\x3E')</script> -->
<!-- <script>window.jQuery.fn.fixedheader || document.write('\x3Cscript src="/Scripts/DataTables/dataTables.fixedHeader-3.1.6.min.js"\x3E\x3C/script\x3E')</script> -->
<!-- <script>window.jQuery.fn.fixedheader || document.write('\x3Cscript src="/Scripts/DataTables/dataTables.fixedHeader-3.1.6.min.js"\x3E\x3C/script\x3E')</script>
-->
<!-- <script>window.jQuery.fn.sweetalert2 || document.write('\x3Cscript src="/Scripts/sweetalert2-8.11.8.min.js"\x3E\x3C/script\x3E')</script> -->
<!-- Cache-Control -->
<!-- https://www.keycdn.com/support/cache-control -->
<!-- https://stackoverflow.com/questions/49547/how-do-we-control-web-page-caching-across-all-browsers -->
<!-- https://web.dev/http-cache/ -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control -->
<!-- <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch> -->
<!-- Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0 -->
<!-- <meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
</head> -->
<!-- Automatically Version CSS and JavaScript Files -->
<!-- https://muffinresearch.co.uk/automatic-asset-versioning-in-django-->
<!-- .htaccess -->
<!-- http://particletree.com/notebook/automatically-version-your-css-and-javascript-files/ -->
<!-- #Far Future Expires Header
<FilesMatch "\.(gif|png|jpg|js|css|swf)$">
ExpiresActive On
ExpiresDefault "access plus 10 years"
</FilesMatch> -->
<!-- #Rules for Versioned Static Files
RewriteRule ^(scripts|css)/(.+)\.(.+)\.(js|css)$ $1/$2.$4 [L] -->
<!-- #Rules for Versioned Static Files
RewriteRule ^(scripts|css|images)/(.+)\.(.+)\.(js|css|jpg|gif|png)$ $1/$2.$4 [L] -->
<!-- <link rel="stylesheet" href="/css/structure.1194900443.css" type="text/css" />
<script type="text/javascript" src="/scripts/prototype.1197993206.js"></script> -->
<!-- /scripts/prototype.js?v=1234 -->
<!-- <script type="text/javascript" src="myfile.js?1500"></script> -->
<!-- <script type="text/javascript" src="myfile.js?$$REVISION$$"></script> -->
<!-- For ASP.NET pages I am using the following -->
<!-- <script src="/Scripts/pages/common.js" type="text/javascript"></script>
<script src="/Scripts/pages/common.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script> -->
<!-- iPhone X / 8 / 8 Plus CSS media queries -->
<!-- https://gist.github.com/hoyangtsai/10a3d22f97d7b10288b46067c8906808 -->
<!-- https://stackoverflow.com/questions/46313640/iphone-x-8-8-plus-css-media-queries -->
<!-- https://codepen.io/marknotton/pen/NwpgBK -->
<!-- https://codepen.io/marknotton/pen/NwpgBK -->
<!-- Rotating an Image using Javascript -->
<!-- http://jsfiddle.net/verashn/6rRnd/5/ -->
<!-- http://jsfiddle.net/4t8nJ/427/ -->
<!-- https://jsfiddle.net/1464bgn2/ -->
<!-- https://usefulangle.com/post/300/javascript-image-rotate -->
<!-- Virtual/ On Screen Keyboard -->
<!-- https://chrome.google.com/webstore/detail/virtual-keyboard/pflmllfnnabikmfkkaddkoolinlfninn/
https://chrome.google.com/webstore/detail/virtual-keyboard/ojodoncimdcjibigapbjcgeicgeecanl/related?hl=en
http://virtualkeyboard.flowsoft7.com/
https://chrome.google.com/webstore/detail/keyboard/lmkdlclficoecjnoooplalmbofnmpckp/related?hl=en
https://www.howto-connect.com/top-4-virtual-keyboard-extension-for-google-chrome/
https://addons.mozilla.org/en-US/firefox/addon/fx-osk/
-->
<!-- https://ourcodeworld.com/articles/read/682/what-does-the-not-allowed-to-navigate-top-frame-to-data-url-javascript-exception-means-in-google-chrome -->
<!-- Creating a select box with a search option -->
<!-- https://stackoverflow.com/questions/18796221/creating-a-select-box-with-a-search-option -->
<!-- https://stackoverflow.com/questions/31133249/searchable-select-option -->
<!-- https://stackoverflow.com/questions/36831871/search-box-in-select -->
<!-- Android Screen Size -->
<!-- https://stackoverflow.com/questions/13487124/android-splash-screen-sizes-for-ldpi-mdpi-hdpi-xhdpi-displays-eg-1024x76 -->
<!-- https://medium.com/@micjamking/android-design-supporting-multiple-device-resolutions-for-native-apps-fe4ed1b817dd -->
<!-- https://github-com.translate.goog/Caldis/react-zmage?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=nui -->
<!-- https://drive.google.com/u/0/uc?id=1Z0UdfObMBTydQSRU88BC4IWDTc4bWIP4&export=download -->
<!-- https://getintopcl.com/getintopc-adobe-after-effects-cc-2018-portable-free-download/ -->
<!-- https://downloadbull.com/portable-adobe-after-effects-cc-2019-v16-0-free-download/
-->
<!-- https://downloadbull.com/portable-adobe-acrobat-pro-dc-2019-free-download/ -->
<!-- https://dribbble.com/shots/6713486-2-FREE-Touch-Gesture-Animations-interactions-for-after-effects -->
<!-- https://medium.com/bestfolios/8-brilliant-ux-designer-resumes-that-secured-job-offers-from-google-c9e534adafc2 -->
<!-- https://www.ipa4fun.com/ipa/497372/ -->
<!-- https://www.ipa4fun.com/ipa/441542/#download -->
<!-- https://downloadapk.online/en/iphone/microsoft-teams/download -->
<!-- https://www.fontspring.com/fonts/rui-abreu/gira-sans -->
<!-- Background Remover -->
<!-- https://online.hitpaw.com/photo-watermark-remover.html -->
<!-- https://express.adobe.com/tools/remove-background -->
<!-- https://www.remove.bg/ -->
html {
background: #eee;
margin: 5% 0 0 35%;
font-family: 'arial', sans-serif;
}
@-webkit-keyframes autofill {
to {
color: #fff;
background: transparent;
}
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
/*For Chrome*/
input:focus, select:focus, textarea:focus, button:focus {
outline:none;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: transparent !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-box-shadow: 0 0 0px 1000px #fff inset
}
/* Active Page */
/* .main-menu > li:hover > a {
color: #ED552C;
} */
/* OTP */
.otp fieldset, .otp input {
border: none;
float: left;
}
.otp input {
width: 40px;
padding: 5px;
margin-right: 20px;
border-bottom: 2px solid #999;
text-align: center;
font-size: 26px;
}
.wmg-container
background: transparent
&.open
background: transparent
.wmg-item
height: inherit !important
.wmg-thumbnail
line-height: inherit !important
background: transparent
.wmg-arrow
border-bottom-color: red
.wmg-close
right: 17px
top: 6px
@media #{$extra-small-device}
.wmg-container
.wmg-item
width: 100% !important
.portfolio-photo
img
max-width: 100% !important
max-height: inherit !important
.container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
/* ionic border input */
.item-ios {
background-color: transparent;
}
.list-ios .item-label-stacked.item-block .item-inner {
border-bottom: none;
border: 1px solid #d3dae2;
background: white;
margin-top: 40px;
border-radius: 5px;
padding-right: 0;
}
.list-ios .input-has-focus.item-block .item-inner, .tab-page .button-ios-primary.active {
border-bottom: none;
border: 1px solid var(--primary);
}
.label-ios[stacked] {
font-size: 1.2rem;
position: absolute;
margin-top: -20px;
}
.item-ios.item-label-stacked .text-input, .item-ios.item-label-floating .text-input,
.item-label-stacked ion-datetime, .item-label-floating ion-datetime {
margin: 10px;
padding: 4px 0;
width: calc(100% - 20px);
}
.item-ios.item-label-stacked [item-right], .item-ios.item-label-floating [item-right], .item-ios.item-label-stacked [item-end], .item-ios.item-label-floating [item-end] {
margin: -26px 16px 0 0;
margin: 0;
min-height: initial;
padding: 0;
top: 0;
right: 10px;
}
.list-ios .disabled-area .item-input.item-label-stacked.item-input-disabled ion-input,
.item-label-stacked ion-datetime, .item-label-floating ion-datetime {
background: #ebebee;
background: #e3e3e5;
}
.list-ios .disabled-area .item-label-stacked.item-block.item-input-disabled .item-inner {
background: #e3e3e5;
border: 1px solid #d3dae2;
}
.list-ios .item-label-stacked.item-block.item-datetime .item-inner {
background: #e3e3e5;
border: 1px solid #d3dae2;
}
ion-input[ng-reflect-readonly="true"] {
background: #fafafa;
/*opacity: .5;*/
}
/* ionic border input */
.item-ios {
background-color: transparent;
}
.list-ios .item-label-stacked.item-block .item-inner {
border-bottom: none;
border: 1px solid #d3dae2;
background: white;
margin-top: 40px;
border-radius: 5px;
padding-right: 0;
}
.list-ios .input-has-focus.item-block .item-inner, .tab-page .button-ios-primary.active {
border-bottom: none;
border: 1px solid var(--primary);
}
.label-ios[stacked] {
font-size: 1.2rem;
position: absolute;
margin-top: -20px;
}
.item-ios.item-label-stacked .text-input, .item-ios.item-label-floating .text-input,
.item-label-stacked ion-datetime, .item-label-floating ion-datetime {
margin: 10px;
padding: 4px 0;
width: calc(100% - 20px);
}
.item-ios.item-label-stacked [item-right], .item-ios.item-label-floating [item-right], .item-ios.item-label-stacked [item-end], .item-ios.item-label-floating [item-end] {
margin: -26px 16px 0 0;
margin: 0;
min-height: initial;
padding: 0;
top: 0;
right: 10px;
}
.list-ios .disabled-area .item-input.item-label-stacked.item-input-disabled ion-input,
.item-label-stacked ion-datetime, .item-label-floating ion-datetime {
background: #ebebee;
background: #e3e3e5;
}
.list-ios .disabled-area .item-label-stacked.item-block.item-input-disabled .item-inner {
background: #e3e3e5;
border: 1px solid #d3dae2;
}
.list-ios .item-label-stacked.item-block.item-datetime .item-inner {
background: #e3e3e5;
border: 1px solid #d3dae2;
}
ion-input[ng-reflect-readonly="true"] {
background: #fafafa;
}
.item-block {
display: contents;
overflow: inherit;
}
.input-wrapper {
overflow: inherit;
}
.item-inner {
overflow: inherit;
}
.label-ios {
margin: 0px 0 0px 0;
}
.item-block .item-inner {
border: 1px solid #CCCCCC !important;
border-radius: 5px;
margin-bottom: 25px;
padding: 0 10px;
background: #ffffff;
}
.input-has-focus.item-block .item-inner {
border: 1px solid #027639 !important;
}
.label-ios[floating] {
-webkit-transform: translate3d(0, 23px, 0);
transform: translate3d(0, 23px, 0);
width: fit-content !important;
max-width: inherit !important;
}
.item-input-has-focus .label-ios[floating],
.input-has-focus .label-ios[floating],
.item-input-has-value .label-ios[floating],
.input-has-value .label-ios[floating] {
-webkit-transform: translate3d(0, -9px, 0) scale(0.8);
transform: translate3d(0, -9px, 0) scale(0.8);
position: relative;
z-index: 5;
padding: 0 8px;
}
.item-input-has-focus .label-ios[floating]:after,
.input-has-focus .label-ios[floating]:after,
.item-input-has-value .label-ios[floating]:after,
.input-has-value .label-ios[floating]:after {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 1px;
background: white;
top: 10px;
left: 0;
opacity: 1;
}
.item-ios.item-label-stacked .text-input, .item-ios.item-label-floating .text-input {
position: relative;
top: -9px;
margin-top: 10px;
margin-bottom: 10px;
}
.item-ios.item-label-stacked [item-right], .item-ios.item-label-floating [item-right], .item-ios.item-label-stacked [item-end], .item-ios.item-label-floating [item-end] {
margin-top: -12px;
margin-right: 10px;
}
.scroll-content {
background: linear-gradient(0deg, #C7C5CE 15.64%, #F2F3F5 70.95%);
}
.scroll-content:after {
content: "" !important;
position: absolute !important;
z-index: -1 !important;
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
background-size: 33%;
mix-blend-mode: color-burn;
background: url("../icon/fp/bg_pattern.svg") repeat;
background-size: 33%;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
-webkit-box-shadow: none;
}
.lan-nav {
width: 100%;
display: inline-block;
}
.back-aero {
float: left;
top: 5px;
position: relative;
}
.back-aero img {
float: left;
width: 20px;
position: relative;
top: 2px;
margin-right: 10px;
}
.lan-switch {
float: right;
background: white;
border: 1px solid #d3dae2;
border-radius: 30px;
position: relative;
padding: 3px 10px;
display: inline-table;
}
.lan-switch input[type="checkbox"] {
width: 100%;
height: 100%;
z-index: 9;
position: absolute;
opacity: 0;
top: 0;
left: 0;
}
.lan-switch label {
display: block;
position: relative;
cursor: pointer;
}
.lan-switch label img {
height: 14px;
width: auto;
float: left;
}
.lan-switch label p {
float: left;
margin: 0 0 0 5px;
font-size: 11px;
}
.lan-switch label .bangla-lan {
display: block;
transition: 0.4s;
}
.lan-switch label .english-lan {
display: none;
transition: 0.4s;
}
.lan-switch :checked + label .bangla-lan {
display: none;
}
.lan-switch :checked + label .english-lan {
display: block;
}
.floating-border {
border: 1px solid #CCCCCC;
border-radius: 5px;
margin-bottom: 25px;
background: #ffffff;
padding: 0 0 10px 0;
float: left;
width: 100%;
}
.floating-text {
position: relative;
margin: 0;
font-size: 14px;
top: -8px;
left: 8px;
width: fit-content;
}
.floating-text:after {
content: "";
position: absolute;
z-index: 0;
width: 100%;
height: 1px;
background: white;
top: 7px;
left: 0;
opacity: 1;
}
.floating-text h6 {
font-size: 14px;
margin: 0;
position: relative;
z-index: 1;
padding: 0 8px;
}
.item.item-block.item-ios[no-lines] .item-inner {
border: none !important;
margin-bottom: 0px;
padding: 0 0px;
background: transparent;
}
.floating-border .item-block .item-inner {
border: none !important;
margin-bottom: 0px;
padding: 0 0px;
}
ion-label {
overflow: inherit;
}
.item.item-block.item-ios[no-lines] .error {
white-space: initial;
position: relative;
top: -22px;
}
.floating-border .item.item-block.item-ios[no-lines] .error {
top: 0px;
}
.single-otp::after {
content: ""; position: absolute; bottom: 0; left: 0; width: 100%; margin: auto; height: 2px; /*background-image: linear-gradient(to right, transparent 0%,transparent 50%, #000 50%, #000 100%);*/ background-image: linear-gradient(to right, #999 0%, #999 80%, transparent 80%, transparent 100%); background-size: 53px;}
// https://dribbble.com/shots/18492289-PT-logo-design-dribbble
// https://www.fontspring.com/fonts/typodermic/conthrax
// IMG to Background
// $('.image').each(function(){
// var $this = $(this),
// $imgHolder = $this.children('.background'),
// thisIMG = $imgHolder.children().attr('src'),
// thisURL = 'url('+thisIMG+')';
// $imgHolder.css('background-image', thisURL);
// });
// <div class="image">
// <div class="background">
// <img src="img/background.jpg" alt="">
// </div>
// </div>
// hambagrer menu
// $( '.hamburger-menu li a' ).on("click", function(){
// $('#hamburger').click();
// });
// Fource CLick
$( '.clickHere' ).on("click", function(){
$('#button').click();
});
$('#secondDiv').insertBefore('#firstDiv');
// OTP Input Auto Tab
$('.otp input').on('keyup change', function(){
$t = $(this);
if ($t.val().length > 0) {
$t.next().focus();
}
// if ($t === "Backspace" && $t.val().length < 0) {
// $t.previousElementSibling.focus();
// }
// if(event.keyCode == 8 && index > 1){
// $t.previousElementSibling.focus();
// }
if(event.key == 'Backspace'){
// if ($t.val()=="") {
if ($t.val().length === 0) {
$t.prev().focus();
}
}
});
// Images height and position problem – masonry, isotope
$(window).load(function(){
var $container = $('#container');
// initialize
$container.masonry({
itemSelector: '.item'
});
});
// SVG Preview
// https://code.google.com/archive/p/svg-explorer-extension/downloads
// https://github.com/tibold/svg-explorer-extension/releases
// JavaScript Prototyping
// https://quokkajs.com/
// // https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
// https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
// https://www.sitepoint.com/jquery-each-function-examples/
// https://www.w3schools.com/js/js_function_call.asp
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
// https://www.google.com/search?q=function+element+call+each+element+and+full+function&client=firefox-b-d&sxsrf=ALeKk00OOI_ZITwJ4vzGgLNQjU2B98hZzA%3A1623837672416&ei=6MvJYKj5GKOX4-EPlIiN0Ac&oq=function+element+call+each+element+and+full+function&gs_lcp=Cgdnd3Mtd2l6EAMyBwgjELADECcyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsAMyBwgAEEcQsANKBAhBGABQAFgAYNEbaAFwAngAgAGHA4gBhwOSAQMzLTGYAQCqAQdnd3Mtd2l6yAEJwAEB&sclient=gws-wiz&ved=0ahUKEwiojYzd8pvxAhWjyzgGHRREA3oQ4dUDCA0&uact=5
// jquery-lang-js
// https://github.com/Irrelon/jquery-lang-js
// https://codesandbox.io/s/i18n-example-ipfeu?from-embed=&file=/i18n/es.json
// https://codeburst.io/translating-your-website-in-pure-javascript-98b9fa4ce427
// https://www.jqueryscript.net/text/Cookie-i18n-Localization-Plugin-Lang.html
// livedevtools\android\sdk without usb cable ionic
// https://devdactic.com/angular-material-ionic-4/
if( isMobile.iOS() )
// Go to Home
$(".goToHome, .dismiss a").click(function(e){
e.preventDefault();
window.location = "./goToHome", "_blank";
});
$('#typeOfMembershipArea input[type="radio"], #typeOfMembershipArea select').change(function(){
$('.typeOfMembership').hide();
$('#' + $(this).val()).show();
});
$('#loanTenureArea select').change(function(){
$('.loanTenure').hide();
$('#' + $(this).val()).show();
});
$("#loanAmountArea input").keyup(function () {
var errmsgLoanAmount = document.getElementById("errmsg-loanAmount");
if($(this).val() == "")
errmsgLoanAmount.innerText = "Please enter amount";
else if($(this).val() < 10 || $(this).val() > 500000)
errmsgLoanAmount.innerText = "Please enter valid amount";
else (
errmsgLoanAmount.innerText = ""
)
});
$("#memberNoArea input").keyup(function () {
var errmsgmemberNo = document.getElementById("errmsg-memberNo");
if($(this).val() == "")
errmsgmemberNo.innerText = "Please enter Member's Number";
else (
errmsgmemberNo.innerText = ""
)
});
// $('#selectDivision select').change(function(){
// var errmsgSelectDivision = document.getElementById("errmsg-selectDivision");
// if($(this).val() == "")
// errmsgSelectDivision.innerText = "Please select an option";
// else (
// errmsgSelectDivision.innerText = ""
// )
// });
$('#selectDivisionArea select, #selectDistrictArea select, #selectUpazilaArea select, #selectUnionParishadArea select, #selectTypeOfMembershipArea select, #selectPrimarySamabayaSamitiArea select, #selectBhumiUnnayanBankArea select, #loanTenureArea select, #selectLoanTenureArea select, #shortTermloanPurposeArea select, #midTermloanPurposeArea select, #longTermloanPurposeArea select').change(function() {
var eachSelectorId = $(this).parents().eq(1).attr('id');
var eachSelectorIdEr = $(this).attr('id');
var eachSelectorErrmsgId = "errmsg-" + eachSelectorIdEr;
var errMsg = document.getElementById(eachSelectorErrmsgId);
// console.log(eachSelectorIdEr)
if ($(this).val() == "")
errMsg.innerText = "Please select an option";
else(
errMsg.innerText = ""
)
});
// validate: function (element) {
// if(element!=undefined || element !=null){
// console.log(element)
// }else{
// var errmsgLoanAmount = document.getElementById("errmsg-loanAmount");
// if (this.loanAmount == "") {
// errmsgLoanAmount.innerText = "Please enter amount";
// }else if($(this).val() < 10 || $(this).val() > 500000){
// errmsgLoanAmount.innerText = "Please enter valid amount";
// }
// else {
// errmsgLoanAmount.innerText = "";
// }
// var errmsgMemberNo = document.getElementById("errmsg-memberNo");
// if (this.memberNo == "") {
// errmsgMemberNo.innerText = "Please enter Member's Numbersss";
// }else {
// errmsgMemberNo.innerText = "";
// }
// var selectors = ["selectDivision","selectDistrict"];
// var selectosLength = selectors.length;
// for (var i = 0; i < selectosLength; i++) {
// var eachSelector = selectors[i]
// var eachSelectorErrmsgId = "errmsg-" + eachSelector;
// var errMsg = document.getElementById(eachSelectorErrmsgId);
// var eachSelectorId = document.getElementById(eachSelector);
// // console.log(eachSelectorId);
// // console.log(errMsg);
// // console.log(eachSelectorId);
// if (eachSelectorId.value == "") {
// errMsg.innerText = "Please select an option";
// }
// }
// }
// },
// android
// <?xml version="1.0" encoding="utf-8"?>
// <ScrollView
// xmlns:android="http://schemas.android.com/apk/res/android"
// xmlns:app="http://schemas.android.com/apk/res-auto"
// xmlns:tools="http://schemas.android.com/tools"
// android:layout_width="match_parent"
// android:layout_height="match_parent"
// tools:context=".MainActivity"
// android:background="@color/light_grey">
// <LinearLayout
// android:layout_width="match_parent"
// android:layout_height="wrap_content"
// android:orientation="vertical">
// <RelativeLayout
// android:layout_width="match_parent"
// android:layout_height="match_parent"
// android:background="@color/white"
// android:padding="15dp" >
// <ImageView
// android:layout_width="120dp"
// android:layout_height="40dp"
// android:layout_marginTop="5dp"
// android:src="@drawable/logo">
// </ImageView>
// <ImageView
// android:layout_width="25dp"
// android:layout_height="30dp"
// android:layout_toLeftOf="@+id/user_photo"
// android:layout_marginTop="15dp"
// android:layout_marginRight="10dp"
// android:src="@drawable/ic_bell"></ImageView>
// <com.google.android.material.imageview.ShapeableImageView
// android:id="@+id/user_photo"
// android:layout_width="50dp"
// android:layout_height="50dp"
// android:layout_alignParentRight="true"
// android:src="@drawable/user_photo"
// app:shapeAppearanceOverlay="@style/circular">
// </com.google.android.material.imageview.ShapeableImageView>
// </RelativeLayout>
// <LinearLayout
// android:layout_width="wrap_content"
// android:layout_height="wrap_content"
// android:layout_margin="15dp"
// android:orientation="vertical">
// <TextView
// android:layout_width="wrap_content"
// android:layout_height="wrap_content"
// android:text="@string/heading_services"
// style="@style/heading"/>
// <!-- <androidx.recyclerview.widget.RecyclerView-->
// <!-- android:layout_width="match_parent"-->
// <!-- android:layout_height="wrap_content"/>-->
// </LinearLayout>
// <GridLayout
// android:columnCount="3"
// android:rowCount="2"
// android:alignmentMode="alignMargins"
// android:columnOrderPreserved="false"
// android:layout_width="match_parent"
// android:layout_height="wrap_content"
// android:orientation="vertical">
// <androidx.cardview.widget.CardView
// style="@style/single_service_card_view">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service_img_box">
// <ImageView
// android:layout_gravity="center"
// style="@style/single_service_img"
// android:src="@drawable/ic_money_transfer" />
// </LinearLayout>
// <LinearLayout
// style="@style/single_service_txt_box">
// <TextView
// android:gravity="center"
// android:text="@string/service_fund_transfer"
// style="@style/single_service_txt"/>
// </LinearLayout>
// </LinearLayout>
// </androidx.cardview.widget.CardView>
// <androidx.cardview.widget.CardView
// style="@style/single_service_card_view">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service_img_box">
// <ImageView
// android:layout_gravity="center"
// style="@style/single_service_img"
// android:src="@drawable/ic_money_transfer" />
// </LinearLayout>
// <LinearLayout
// style="@style/single_service_txt_box">
// <TextView
// android:gravity="center"
// android:text="@string/service_fund_transfer"
// style="@style/single_service_txt"/>
// </LinearLayout>
// </LinearLayout>
// </androidx.cardview.widget.CardView>
// <androidx.cardview.widget.CardView
// style="@style/single_service_card_view">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service_img_box">
// <ImageView
// android:layout_gravity="center"
// style="@style/single_service_img"
// android:src="@drawable/ic_money_transfer" />
// </LinearLayout>
// <LinearLayout
// style="@style/single_service_txt_box">
// <TextView
// android:gravity="center"
// android:text="@string/service_fund_transfer"
// style="@style/single_service_txt"/>
// </LinearLayout>
// </LinearLayout>
// </androidx.cardview.widget.CardView>
// <androidx.cardview.widget.CardView
// style="@style/single_service_card_view">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service_img_box">
// <ImageView
// android:layout_gravity="center"
// style="@style/single_service_img"
// android:src="@drawable/ic_money_transfer" />
// </LinearLayout>
// <LinearLayout
// style="@style/single_service_txt_box">
// <TextView
// android:gravity="center"
// android:text="@string/service_fund_transfer"
// style="@style/single_service_txt"/>
// </LinearLayout>
// </LinearLayout>
// </androidx.cardview.widget.CardView>
// <androidx.cardview.widget.CardView
// style="@style/single_service_card_view">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service_img_box">
// <ImageView
// android:layout_gravity="center"
// style="@style/single_service_img"
// android:src="@drawable/ic_money_transfer" />
// </LinearLayout>
// <LinearLayout
// style="@style/single_service_txt_box">
// <TextView
// android:gravity="center"
// android:text="@string/service_fund_transfer"
// style="@style/single_service_txt"/>
// </LinearLayout>
// </LinearLayout>
// </androidx.cardview.widget.CardView>
// <androidx.cardview.widget.CardView
// style="@style/single_service_card_view">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service">
// <LinearLayout
// android:orientation="vertical"
// style="@style/single_service_img_box">
// <ImageView
// android:layout_gravity="center"
// style="@style/single_service_img"
// android:src="@drawable/ic_money_transfer" />
// </LinearLayout>
// <LinearLayout
// style="@style/single_service_txt_box">
// <TextView
// android:gravity="center"
// android:text="@string/service_fund_transfer"
// style="@style/single_service_txt"/>
// </LinearLayout>
// </LinearLayout>
// </androidx.cardview.widget.CardView>
// </GridLayout>
// </LinearLayout>
// </ScrollView>
// <style name="circular">
// <item name="cornerSize">50%</item>
// </style>
// <style name="heading">
// <item name="android:textSize">21sp</item>
// <item name="android:textColor">@color/red</item>
// <item name="android:textStyle">bold</item>
// </style>
// <style name="single_service_card_view">
// <item name="android:layout_width">wrap_content</item>
// <item name="android:layout_height">wrap_content</item>
// <item name="cardBackgroundColor">@color/transparent</item>
// <item name="cardElevation">0dp</item>
// <!-- <item name="android:layout_columnWeight">1</item>-->
// <!-- <item name="android:layout_rowWeight">1</item>-->
// </style>
// <style name="single_service">
// <item name="android:layout_width">match_parent</item>
// <item name="android:layout_height">match_parent</item>
// <item name="orientation">vertical</item>
// <item name="android:paddingLeft">15dp</item>
// <item name="android:paddingRight">15dp</item>
// </style>
// <style name="single_service_img_box">
// <item name="android:layout_width">match_parent</item>
// <item name="android:layout_height">match_parent</item>
// <item name="orientation">vertical</item>
// <item name="android:padding">20dp</item>
// <item name="android:background">@drawable/round_service_box</item>
// </style>
// <style name="single_service_img">
// <item name="layout_gravity">center</item>
// <item name="android:layout_width">60dp</item>
// <item name="android:layout_height">60dp</item>
// </style>
// <style name="single_service_txt_box">
// <item name="android:layout_width">match_parent</item>
// <item name="android:layout_height">wrap_content</item>
// </style>
// <style name="single_service_txt">
// <item name="android:layout_width">match_parent</item>
// <item name="android:layout_height">match_parent</item>
// <item name="android:textSize">12sp</item>
// <item name="android:paddingTop">5dp</item>
// <item name="android:paddingBottom">20dp</item>
// <item name="android:textColor">@color/black</item>
// </style>
// <?xml version="1.0" encoding="UTF-8"?>
// <shape xmlns:android="http://schemas.android.com/apk/res/android"
// android:shape="rectangle" >
// <solid android:color="#ffffffff" />
// <stroke
// android:width="2dp"
// android:color="#90a4ae" />
// <!-- <size-->
// <!-- android:height="50dp"-->
// <!-- android:width="50dp" />-->
// <padding
// android:bottom="2dp"
// android:left="2dp"
// android:right="2dp"
// android:top="2dp" />
// <corners android:radius="100dp" />
// </shape>
// https://www.youtube.com/watch?v=BO5iCL7U6Lc
// https://www.youtube.com/watch?v=LAhMZW8hSIg
// https://vestathemes.com/page/6/?s=Bridge
External CSS
This Pen doesn't use any external CSS resources.