Others

HTML

              
                  <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>

&copy; 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="1"/>
      <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/ -->

CSS

              
                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;}

JS

              
                // 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();
  }
});
 

// 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

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions