Develop Reference

Select 2 Multi Select remove option from the dropdown after selected the option

I am using Jquery Select2 to have Multiselect with Checkbox. I want to remove the selected Item from the dropdown. I am using the below code. It is removing the item. But I am getting the gap between the Input and drop down after selecting the Item.
My codes are,
Javascript,
$('.js-select2'): {
closeOnSelect: false,
placeholder: "Placeholder",
allowHtml: true,
tags: true,
allowClear: true,
minimumResultsForSearch: -1,
}
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
CSS,
.select2-container {
min-width: 100%;
}
.select2-results__option {
padding-right: 20px;
vertical-align: middle;
}
.select2-results__option:before {
content: "";
display: inline-block;
position: relative;
height: 20px;
width: 20px;
border: 2px solid #e9e9e9;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
}
.select2-container--default .select2-selection--multiple {
background-color: #FFFFFF;
border: 1px solid #CBD5DD;
border-radius: 2px;
cursor: text;
height: auto !important;
margin: 0;
min-height: 30px;
overflow: hidden;
padding: 2px;
position: relative;
width: 100%;
}
.select2-results__option[aria-selected=true] {
display: none;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
color: #fff;
}
.select2-container--default .select2-selection--multiple {
margin-bottom: 10px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-radius: 4px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.select2-container--default .select2-selection--multiple {
border-width: 1px;
}
.select2-container--open .select2-dropdown--below {
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.select2-selection .select2-selection--multiple:after {
content: 'hhghgh';
}
/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
display: none;
}
.select-icon .placeholder {
display: none;
}
.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before {
display: none !important;
/* content: "" !important; */
}
.select-icon .select2-search--dropdown {
display: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
position: relative;
margin: 3px 0 3px 5px;
padding: 3px 3px 3px 5px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #e4e4e4;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-clip: padding-box;
box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
color: #333;
line-height: 13px;
cursor: default;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
list-style: none;
width: auto !important;
}
.select2-remove-right {
float: right;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
float: right;
margin-left: 5px;
}
ul.select2-choices {
padding-right: 30px !important;
}
ul.select2-choices:after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.select2-container--default .select2-search--inline .select2-search__field{
width:initial!important;
}
.select2-dropdown {
border-radius: 0px;
background-color: white;
border: 1px solid #DDD;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051;
}
/* line 43, ../scss/_dropdown.scss */
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--open .select2-dropdown {
left: 0;
}
.select2-search--dropdown {
display: block;
padding: 7px;
}
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%;
box-sizing: border-box;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
display: none;
}

Try this
https://stackoverflow.com/a/56195248/4208247
OR THIS
https://select2.org/selections#clearable-selections
Clearable selections
When set to true, causes a clear button ("x" icon) to appear on the select box when a value is selected. Clicking the clear button will clear the selected value, effectively resetting the select box back to its placeholder value.
$('select').select2({
placeholder: 'This is my placeholder',
allowClear: true
});

Display Tooltip after a Click instead when Hover

I have a Clipboard Tooltip button script that display tooltip when hover with the cursor on it.
In the Clipboard page under Copy text from attribute example, it display tooltip after a click to copy, while hover do nothing.
And that exactly what i want to achive. Cuz i only success display tooltip when hover.
I have tried to play with the Clipboard page main.css and primer.css and didnt got it to work as i want (display tooltip after clicking)
Also looked at the tooltip creator documentation but even there it has only hover tooltips.
Here is the HTML code:
<div id="example-text" class="example">
<div class="table">
<div class="table-row">
<div class="table-cell">ebay</div>
<div class="table-cell">amazon</div>
</div>
<div class="table-row"><p></p></div>
<div class="table-row">
<div class="table-cell"><button class="btn" data-clipboard-text="ebay">ebay-link</button></div>
<div class="table-cell"><button aria-label="copied!" class="btn tooltipped tooltipped-e border p-2 mb-2 mr-2 left" data-clipboard-text="amazon">amazon-link</button></div>
</div>
</div>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
</script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
And here is the CSS:
#example-text {width: 500px;}
.table
{
display:table;
text-align: center;
}
.table-row
{
display:table-row;
width: 400px;
}
.table-cell
{
display:table-cell;
width: 200px;
color: black;
font-family: arial;
font-size: 14px;
}
.btn[disabled] .clippy {
opacity: .3;
}
.example {
position: relative;
margin: 15px 0 0;
padding: 39px 19px 14px;
background-color: #fff;
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
z-index: 2;
}
.example p {
color: #666;
}
.example:after {
content: "copy the link";
position: absolute;
top: 0;
right: 0;
padding: 2px 8px;
font-size: 14px;
font-weight: bold;
background-color: #f5f5f5;
color: #9da0a4;
border-radius: 4px 0 4px 0;
}
.example+.snippet {
background: #f8f8f8;
border-radius: 4px;
border: 1px solid #ddd;
clear: both;
top: -20px;
padding: 20px 0 0;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
.form-control.focus,
.form-control:focus,
input[type="text"].focus,
input[type="text"]:focus,
input[type="password"].focus,
input[type="password"]:focus,
input[type="email"].focus,
input[type="email"]:focus,
input[type="number"].focus,
input[type="number"]:focus,
input[type="tel"].focus,
input[type="tel"]:focus,
input[type="url"].focus,
input[type="url"]:focus,
select.focus,
select:focus,
textarea.focus,
textarea:focus {
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
select:not([multiple]) {
height: 34px;
vertical-align: middle
}
input.input-contrast,
.input-contrast {
background-color: #fafafa
}
input.input-contrast:focus,
.input-contrast:focus {
background-color: #fff
}
::-webkit-input-placeholder {
color: #aaa
}
::-moz-placeholder {
color: #aaa
}
:-ms-input-placeholder {
color: #aaa
}
::placeholder {
color: #aaa
}
input.input-mini {
min-height: 26px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px
}
input.input-large {
padding: 6px 10px;
font-size: 16px
}
.input-block {
display: block;
width: 100%
}
.input-monospace {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
}
.select {
display: inline-block;
max-width: 100%;
padding: 7px 24px 7px 8px;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
background-size: 8px 10px;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 8px \9;
background-image: none \9
}
.select:focus {
outline: none;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
.select::-ms-expand {
opacity: 0
}
.select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px
}
.select-sm:not([multiple]) {
height: 26px;
min-height: 26px
}
.clearfix:before {
display: table;
content: ""
}
.clearfix:after {
display: table;
clear: both;
content: ""
}
.btn {
position: relative;
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: bold;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none
}
.btn i {
font-style: normal;
font-weight: 500;
opacity: 0.6
}
.btn .octicon {
vertical-align: text-top
}
.btn .counter {
text-shadow: none;
background-color: #e5e5e5
}
.btn:focus {
text-decoration: none;
border-color: #51a7e8;
outline: none;
box-shadow: 0 0 5px rgba(81, 167, 232, 0.5)
}
.btn:focus:hover,
.btn.selected:focus {
border-color: #51a7e8
}
.btn:hover,
.btn:active,
.btn.zeroclipboard-is-hover,
.btn.zeroclipboard-is-active {
text-decoration: none;
background-color: #ddd;
background-image: linear-gradient(#eee, #ddd);
border-color: #ccc
}
.btn:active,
.btn.selected,
.btn.zeroclipboard-is-active {
background-color: #dcdcdc;
background-image: none;
border-color: #b5b5b5;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15)
}
.btn.selected:hover {
background-color: #cfcfcf
}
.btn:disabled,
.btn:disabled:hover,
.btn.disabled,
.btn.disabled:hover {
color: rgba(102, 102, 102, 0.5);
cursor: default;
background-color: rgba(229, 229, 229, 0.5);
background-image: none;
border-color: rgba(197, 197, 197, 0.5);
box-shadow: none
}
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border-color: #5ca941
}
.btn-primary .counter {
color: #60b044;
background-color: #fff
}
.btn-primary:hover {
color: #fff;
background-color: #569e3d;
background-image: linear-gradient(#79d858, #569e3d);
border-color: #4a993e
}
.btn-primary:active,
.btn-primary.selected {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
background-color: #569e3d;
background-image: none;
border-color: #418737
}
.btn-primary.selected:hover {
background-color: #4c8b36
}
.btn-primary:disabled,
.btn-primary:disabled:hover,
.btn-primary.disabled,
.btn-primary.disabled:hover {
color: #fefefe;
background-color: #add39f;
background-image: linear-gradient(#c3ecb4, #add39f);
border-color: #b9dcac #b9dcac #a7c89b
}
.btn-danger {
color: #900
}
.btn-danger:hover {
color: #fff;
background-color: #b33630;
background-image: linear-gradient(#dc5f59, #b33630);
border-color: #cd504a
}
.btn-danger:active,
.btn-danger.selected {
color: #fff;
background-color: #b33630;
background-image: none;
border-color: #9f312c
}
.btn-danger.selected:hover {
background-color: #9f302b
}
.btn-danger:disabled,
.btn-danger:disabled:hover,
.btn-danger.disabled,
.btn-danger.disabled:hover {
color: #cb7f7f;
background-color: #efefef;
background-image: linear-gradient(#fefefe, #efefef);
border-color: #e1e1e1
}
.btn-danger:hover .counter,
.btn-danger:active .counter,
.btn-danger.selected .counter {
color: #b33630;
background-color: #fff
}
.btn-outline {
color: #4078c0;
background-color: #fff;
background-image: none;
border: 1px solid #e5e5e5
}
.btn-outline .counter {
background-color: #eee
}
.btn-outline:hover,
.btn-outline:active,
.btn-outline.selected,
.btn-outline.zeroclipboard-is-hover,
.btn-outline.zeroclipboard-is-active {
color: #fff;
background-color: #4078c0;
background-image: none;
border-color: #4078c0
}
.btn-outline:hover .counter,
.btn-outline:active .counter,
.btn-outline.selected .counter,
.btn-outline.zeroclipboard-is-hover .counter,
.btn-outline.zeroclipboard-is-active .counter {
color: #4078c0;
background-color: #fff
}
.btn-outline.selected:hover {
background-color: #396cad
}
.btn-outline:disabled,
.btn-outline:disabled:hover,
.btn-outline.disabled,
.btn-outline.disabled:hover {
color: #767676;
background-color: #fff;
background-image: none;
border-color: #e5e5e5
}
.btn-with-count {
float: left;
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btn-sm {
padding: 2px 10px
}
.tooltipped {
position: relative
}
.tooltipped:after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0, 0, 0, 0.8);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased;
}
.tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0, 0, 0, 0.8);
pointer-events: none;
content: "";
border: 5px solid transparent
}
.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
display: inline-block;
text-decoration: none
}
.tooltipped-multiline:hover:after,
.tooltipped-multiline:active:after,
.tooltipped-multiline:focus:after {
display: table-cell
}
.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 5px
}
.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-se:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-sw:after {
margin-right: -15px
}
.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
right: 50%;
bottom: 100%;
margin-bottom: 5px
}
.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-ne:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-nw:after {
margin-right: -15px
}
.tooltipped-s:after,
.tooltipped-n:after {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%)
}
.tooltipped-w:after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-w:before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-e:after {
bottom: 50%;
left: 100%;
margin-left: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-e:before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-multiline:after {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 250px;
word-break: break-word;
word-wrap: normal;
white-space: pre-line;
border-collapse: separate
}
.tooltipped-multiline.tooltipped-s:after,
.tooltipped-multiline.tooltipped-n:after {
right: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.tooltipped-multiline.tooltipped-w:after,
.tooltipped-multiline.tooltipped-e:after {
right: 100%
}
#media screen and (min-width: 0\0) {
.tooltipped-multiline:after {
width: 250px
}
}
.tooltipped-sticky:before,
.tooltipped-sticky:after {
display: inline-block
}
.tooltipped-sticky.tooltipped-multiline:after {
display: table-cell
}
.fullscreen-overlay-enabled.dark-theme .tooltipped:after {
color: #000;
background: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before {
border-bottom-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before {
border-top-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before {
border-right-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before {
border-left-color: rgba(255, 255, 255, 0.8)
}
EDIT: Getting closer:
This is the related code:
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<pre class="snippet">
<button class="btn" data-clipboard-snippet="">
<img class="clippy" width="13" src="./index_files/clippy.svg" alt="Copy to clipboard">
</button>
<code class="html hljs xml">
<span class="hljs-comment"><!-- Trigger --></span>
<span class="hljs-tag"><<span class="hljs-title">button</span>
<span class="hljs-attribute">class</span>=<span class="hljs-value">"btn"</span>
<span class="hljs-attribute">data-clipboard-text</span>=<span class="hljs-value">"Just because you can doesn't mean you should — clipboard.js"</span>></span>
Copy to clipboard
<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
</code>
</pre>
Tried and still without success- Wonder what exactly triger that.
How do i get tooltip After i click (like in the clipboardpage)?
Here's a live one:

Got it. It was hiding in the demoes.js file.
And especially that line:
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
This is the corrected code:
<script src="https://clipboardjs.com/assets/scripts/demos.js"></script>
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
Now it is working.
Here's the result: HERE

Customize toggle button in Bootstrap using only CSS?

I have a demo that uses the toggle dropdown button of bootstrap. I've customized the bootstrap.css but not boostrap.js. Can I use toggle without boostrap.js?
Demo
Here is the snippet:
$(document).ready(function() {
$('#firstvalue').addClass('user-click');
$('#usr').val("(" + $("#firstTag").text() + ")");
$('#demolist li a').on('click', function() {
$('.user-click').removeClass('user-click');
$(this).find('.user-check').addClass('user-click');
$('#usr').val("(" + $(this).text() + ")");
});
});
.user-check {
cursor: pointer;
display: block;
height: 16px;
margin: 0px 0px 0px 0px;
outline: 0 none;
padding: 8px 5px 0px 0px;
position: relative;
top: 1px;
width: 16px;
z-index: 1;
float: left;
}
.user-click:before {
bottom: 10px;
content: "\2713";
display: block;
position: relative;
right: 0px;
transform: rotate(15deg);
transition: all 1s ease-out 0s;
width: 14px;
font-size: 15px;
color: #444444;
}
.btnAlpha-inverse {
color: #fff;
height: 20px;
width: 20px;
background-color: #444444;
border-color: #444444;
/*set the color you want here*/
}
.btnAlpha-inverse:hover,
.btnAlpha-inverse:focus,
.btnAlpha-inverse:active,
.btnAlpha-inverse.active,
.btnAlpha-inverse.disabled,
.btnAlpha-inverse[disabled] {
color: #ffffff;
background-color: #444444;
*background-color: #444444;
}
.btnAlpha-small {
padding: 2px 10px;
font-size: 11.9px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #444444;
white-space: nowrap;
font-weight: bold;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-submenu:hover>a,
.dropdown-submenu:focus>a {
text-decoration: none;
color: #444444;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #f5f5f5, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f5f5f5);
background-image: -o-linear-gradient(top, #f5f5f5, #f5f5f5);
/* background-image: linear-gradient(to bottom, #0088cc, #0077b3); */
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.btnAlpha-groupAlpha-lg>.btnAlpha,
.btnAlpha-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px
}
.btnAlpha-groupAlpha-sm>.btnAlpha,
.btnAlpha-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btnAlpha-groupAlpha-xs>.btnAlpha,
.btnAlpha-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btnAlpha-block {
display: block;
width: 100%
}
.btnAlpha-groupAlpha-vertical>.btnAlpha,
.btnAlpha-groupAlpha>.btnAlpha {
position: relative;
float: left
}
.btnAlpha-groupAlpha-vertical>.btnAlpha.active,
.btnAlpha-groupAlpha-vertical>.btnAlpha:active,
.btnAlpha-groupAlpha-vertical>.btnAlpha:focus,
.btnAlpha-groupAlpha-vertical>.btnAlpha:hover,
.btnAlpha-groupAlpha>.btnAlpha.active,
.btnAlpha-groupAlpha>.btnAlpha:active,
.btnAlpha-groupAlpha>.btnAlpha:focus,
.btnAlpha-groupAlpha>.btnAlpha:hover {
z-index: 2
}
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha,
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha .btnAlpha-groupAlpha+.btnAlpha,
.btnAlpha-groupAlpha .btnAlpha-groupAlpha+.btnAlpha-groupAlpha {
margin-left: -1px
}
.btnAlpha-toolbar {
margin-left: -5px
}
.btnAlpha-toolbar .btnAlpha,
.btnAlpha-toolbar .btnAlpha-groupAlpha,
.btnAlpha-toolbar .input-group {
float: left
}
.btnAlpha-toolbar>.btnAlpha,
.btnAlpha-toolbar>.btnAlpha-groupAlpha,
.btnAlpha-toolbar>.input-group {
margin-left: 5px
}
.btnAlpha-groupAlpha>.btnAlpha:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha:first-child {
margin-left: 0
}
.btnAlpha-groupAlpha>.btnAlpha:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha:last-child:not(:first-child),
.btnAlpha-groupAlpha>.dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha {
float: left
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:not(:first-child):not(:last-child)>.btnAlpha {
border-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:first-child:not(:last-child)>.btnAlpha:last-child,
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:first-child:not(:last-child)>.dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:last-child:not(:first-child)>.btnAlpha:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha .dropdown-toggle:active,
.btnAlpha-groupAlpha.open .dropdown-toggle {
outline: 0
}
.btnAlpha-groupAlpha>.btnAlpha+.dropdown-toggle {
padding-right: 8px;
padding-left: 8px
}
.btnAlpha-groupAlpha>.btnAlpha-lg+.dropdown-toggle {
padding-right: 12px;
padding-left: 12px
}
.btnAlpha-groupAlpha.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.btnAlpha-groupAlpha.open .dropdown-toggle.btnAlpha-link {
-webkit-box-shadow: none;
box-shadow: none
}
.btnAlpha .caret {
margin-left: 0
}
.btnAlpha-lg .caret {
border-width: 5px 5px 0;
border-bottom-width: 0
}
.dropup .btnAlpha-lg .caret {
border-width: 0 5px 5px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha>.btnAlpha {
display: block;
float: none;
width: 100%;
max-width: 100%
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha>.btnAlpha {
float: none
}
.btnAlpha-groupAlpha-vertical>.btnAlpha+.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha+.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha+.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha+.btnAlpha-groupAlpha {
margin-top: -1px;
margin-left: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:not(:first-child):not(:last-child) {
border-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:not(:first-child):not(:last-child)>.btnAlpha {
border-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:first-child:not(:last-child)>.btnAlpha:last-child,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:first-child:not(:last-child)>.dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:last-child:not(:first-child)>.btnAlpha:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0
}
.btnAlpha-groupAlpha-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate
}
.btnAlpha-groupAlpha-justified>.btnAlpha,
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha {
display: table-cell;
float: none;
width: 1%
}
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha .btnAlpha {
width: 100%
}
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha .dropdown-menu {
left: auto
}
[data-toggle=buttons]>.btnAlpha input[type=checkbox],
[data-toggle=buttons]>.btnAlpha input[type=radio],
[data-toggle=buttons]>.btnAlpha-groupAlpha>.btnAlpha input[type=checkbox],
[data-toggle=buttons]>.btnAlpha-groupAlpha>.btnAlpha input[type=radio] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none
}
.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical {
position: relative;
display: inline-block;
vertical-align: middle
}
.btnAlpha-groupAlpha>.btnAlpha,
.input-group-btnAlpha:first-child>.dropdown-toggle,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha:not(:last-child)>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.input-group-addon:first-child {
border-right: 0
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btnAlpha:first-child>.btnAlpha-groupAlpha:not(:first-child)>.btnAlpha,
.input-group-btnAlpha:first-child>.btnAlpha:not(:first-child),
.input-group-btnAlpha:last-child>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha>.btnAlpha,
.input-group-btnAlpha:last-child>.dropdown-toggle {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.input-group-addon:last-child {
border-left: 0
}
.input-group-btnAlpha {
position: relative;
font-size: 0;
white-space: nowrap
}
.input-group-btnAlpha>.btnAlpha {
position: relative
}
.input-group-btnAlpha>.btnAlpha+.btnAlpha {
margin-left: -1px
}
.input-group-btnAlpha>.btnAlpha:active,
.input-group-btnAlpha>.btnAlpha:focus,
.input-group-btnAlpha>.btnAlpha:hover {
z-index: 2
}
.input-group-btnAlpha:first-child>.btnAlpha,
.input-group-btnAlpha:first-child>.btnAlpha-groupAlpha {
margin-right: -1px
}
.input-group-btnAlpha:last-child>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha {
z-index: 2;
margin-left: -1px
}
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha {
margin-left: -1px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:after,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:before,
.btnAlpha-toolbar:after,
.btnAlpha-toolbar:before,
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.modal-footer:after,
.modal-footer:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
display: table;
content: " "
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:after,
.btnAlpha-toolbar:after,
.clearfix:after,
.container-fluid:after,
.container:after,
.dl-horizontal dd:after,
.form-horizontal .form-group:after,
.modal-footer:after,
.nav:after,
.navbar-collapse:after,
.navbar-header:after,
.navbar:after,
.pager:after,
.panel-body:after,
.row:after {
clear: both
}
.btnAlpha-groupAlpha-xs>.btnAlpha .badge,
.btnAlpha-xs .badge {
top: 0;
padding: 1px 5px
}
a.badge:focus,
a.badge:hover {
color: #fff;
text-decoration: none;
cursor: pointer
}
.open>.dropdown-menu {
display: block;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #444444;
white-space: nowrap;
font-weight: bold;
}
.ul {
margin-top: 0;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
}
.list-unstyled {
padding-left: 0;
list-style: none
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none
}
.list-inline>li {
display: inline-block;
padding-right: 5px;
padding-left: 5px
}
<div class="dropdown btnAlpha-groupAlpha">
<button class="btnAlpha btnAlpha-small btnAlpha-inverse dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
V
</button>
<ul class="dropdown-menu" id="demolist">
<li class="dropdown-header">Search in:</li>
<li>
<a href="#" id="firstTag">
<div class="user-check" id="firstvalue"></div>Korean</a>
</li>
<li>
<a href="#">
<div class="user-check"></div>Chinese</a>
</li>
<li>
<a href="#">
<div class="user-check"></div>Japanese</a>
</li>
</ul>
<input type="text" class="form-control" id="usr">
</div>

Highslide control button

I wanted to ask for help with Highslide Gallery. First I had problems with control bar, but I finished it and now I was left with last problem. In my control bar when you move mouse on "Pause" it's inactive and works as "Next" and starting from it every button is like "Next" works as "Move" in other words it's like hyperlinks moved one position to the left.
It would work if only every button starting with "Next" moved 30px to the right, but no matter what I try it doesn't work.
/* Ajax */
.highslide-container div {
font-family: Verdana, Helvetica;
font-size: 10pt;
top:85%;
}
.highslide {
outline: none;
text-decoration: none;
}
.highslide img {
border: 2px solid silver;
}
.highslide:hover img {
border-color: gray;
}
.highslide-active-anchor img, .highslide-active-anchor:hover img {
border-color: black;
}
.highslide-image {
border-width: 2px;
border-style: solid;
border-color: white;
background: gray;
}
.highslide-wrapper, .rounded-white {
background: white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border-top: none;
font-size: 1em;
padding: 5px;
background: white;
}
.highslide-heading {
display: none;
font-weight: bold;
margin-bottom: 0.4em;
}
.highslide-dimming {
position: absolute;
background: black;
}
.highslide-loading {
display: block;
color: black;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border: 1px solid white;
background-color: white;
padding-left: 22px;
background-image: url(../javascript/images/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
/*background: url(javascript/images/controlbar-white.gif)*/
/* Controls. See http://www.google.com/search?q=css+sprites */
.highslide-controls {
border-radius: 5px;
width: 210px;
height: 36px;
background: url(javascript/images/controlbar-white.gif) 0px -90px no-repeat;
margin: 0px 0px 0px 0px;
}
.highslide-controls ul {
border-radius: 5px;
width: 210px;
position: relative;
left: 0px;
height: 30px;
list-style: none;
margin: 0;
padding: 0;
background: url(javascript/images/controlbar-white.gif) 0px -30px no-repeat;
}
.highslide-controls li {
height: 30px;
width: 30px;
float: left;
padding: 0px 0;
margin:0;
list-style: none;
}
.highslide-controls a {
background-image: url(javascript/images/controlbar-white.gif) 0px -90px no-repeat;
display: block;
float: left;
outline: none;
}
.highslide-controls a.disabled {
cursor: default;
}
.highslide-controls a.disabled span {
cursor: default;
}
.highslide-controls a span {
/* hide the text for these graphic buttons */
display: none;
cursor: pointer;
}
/* The CSS sprites for the controlbar */
.highslide-controls .highslide-previous a {
background-position: 0 0;
}
.highslide-controls .highslide-previous a:hover {
background-position: 0px -30px;
}
.highslide-controls .highslide-previous a.disabled {
background-position: 0 -60px !important;
}
.highslide-controls .highslide-play a {
background-position: -30px 0;
}
.highslide-controls .highslide-play a:hover {
background-position: -30px -30px;
}
.highslide-controls .highslide-play a.disabled {
background-position: -30px -60px !important;
}
.highslide-controls .highslide-pause a {
background-position: -60px 0;
}
.highslide-controls .highslide-pause a:hover {
background-position: -60px -30px;
}
.highslide-controls .highslide-pause a.disabled{
background-position: -60px -60px !important;
}
.highslide-controls .highslide-next a {
background-position: -90px 0;
}
.highslide-controls .highslide-next a:hover {
background-position: -90px -30px;
}
.highslide-controls .highslide-next a.disabled {
background-position: -90px -60px !important;
}
.highslide-controls .highslide-move a {
background-position: -120px 0;
}
.highslide-controls .highslide-move a:hover {
background-position: -120px -30px;
}
.highslide-controls .highslide-full-expand a {
background-position: -150px 0;
}
.highslide-controls .highslide-full-expand a:hover {
background-position: -150px -30px;
}
.highslide-controls .highslide-full-expand a.disabled {
background-position: -150px -30px !important;
}
.highslide-controls .highslide-close a {
background-position: -180px 0;
}
.highslide-controls .highslide-close a:hover {
background-position: -180px -30px;
}
I didn't change anything in Java Script file, only worked with this part of CSS file.
Firefox for line with "Pause" button:
<li style="display: none;" class="highslide-pause"><span>Zatrzymaj</span></li>
When working buttons:
<li class="highslide-next"><span>Następne</span></li>
Sorry for problem and thanks for any help with it.
Sorry, mistake was on my side. I should only change line:
this.btn.pause.style.display = 'none';
and it started displaying "Pause" like it should but only for first open photo :/
After changing all 'none' to ' ' for "Pause" in java script it works.

CSS positioning works with chrome but not other browsers?

The items on my website are positioned correctly when viewed in Google Chrome, as they should be left to the store box and stay inside the dark gray container. But in IE/Mozilla/Other browsers, it drops the items far down.
body {
font-family: Arial, "Free Sans";
margin: 0;
padding: 0;
}
#main {
background: #0099cc;
margin-top: 0;
padding: 2px 0 4px 0;
text-align: center;
}
#main a {
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: bold;
font-family: Arial;
}
#main a:hover {
text-decoration: underline;
}
#item_container {
width: 200px;
margin-left:10px;
margin-top: -360px;
height:400px;
margin-bottom: 10px;
}
.item {
background: #fff;
float: left;
padding: 5px;
margin: 5px;
cursor: move;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
z-index: 5;
}
.title, .price {
display: block;
text-align: center;
font-size: 14px;
letter-spacing: -1px;
font-weight: bold;
cursor: move;
}
.title {
color: #333;
}
.price {
color: #0099cc;
margin-top: 5px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
.icart, .icart label {
cursor: e-resize;
}
.divrm {
text-align: right;
}
.remove {
text-decoration: none;
cursor: pointer;
font-weight: bold;
font-size: 20px;
position: relative;
top: -7px;
}
.remove:hover {
color: #999;
}
.clear {
clear: both;
}
#cart_container {
margin-top:0px;
margin-left:260px;
width: 565px;
}
#cart_title span {
border: 8px solid #666;
border-bottom-width: 0;
background: #333;
display: block;
float: left;
color: #fff;
font-size: 11px;
font-weight: bold;
padding: 5px 10px;
-webkit-border-radius: .5em .5em 0 0;
-moz-border-radius: .5em .5em 0 0;
border-radius: .5em .5em 0 0;
}
#cart_toolbar {
overflow: hidden;
border: 8px solid #666;
height: 290px;
z-index: -2;
width: 565px;
-webkit-border-radius: 0 .5em 0 0;
-moz-border-radius: 0 .5em 0 0;
border-radius: 0 .5em 0 0;
background: #ffffff;
}
#cart_items {
height: 100%;
width: 100%;
position: relative;
padding: 0 0 0 2px;
z-index: 0;
cursor: e-resize;
border-width: 0 2px;
}
.back {
background: #e9e9e9;
}
#navigate {
width: 545px;
margin: 0 auto;
border: 8px solid #666;
border-top-width: 0;
-webkit-border-radius: 0 0 .5em .5em;
-moz-border-radius: 0 0 .5em .5em;
border-radius: 0 0 .5em .5em;
padding: 10px;
font-size: 14px;
background: #333;
font-weight: bold;
}
#nav_left {
float: left;
}
#nav_left a {
padding: 4px 8px;
background: #fff;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
text-decoration: none;
color:#0099cc;
}
#nav_left a:hover {
background: #666;
color: #fff;
}
#nav_right {
float: right;
}
.sptext {
background: #ffffff;
padding: 4px 8px;
margin-left: 8px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
color: #666;
}
.count {
color: #0099cc;
}
.drop-active {
background: #ffff99;
}
.drop-hover {
background: #ffff66;
}

Add float:left to #item_container.
#item_container {
float:left;
width: 200px;
margin-left:10px;
margin-top: -360px;
height:400px;
margin-bottom: 10px;
}