/* Donate pages: hwm_donate_page_new.php, hwm_donate_short.php of the apps, hwm_donate_success.php, hwm_donate_fail.php;
   incl/top.php links this file for STYLES_FOR_NEW_DONATE_PAGE.
   Every rule sits under .hwm_donate and every class starts with hwm_donate_, so the page styles stay inside the page.
   The selectors also outweigh the game styles of the same elements whatever order the files load in. */

.hwm_donate {box-sizing:border-box;width:100%;max-width:1000px;margin:1.5em auto;padding:0 10px;color:#592c08;font-size:13px;line-height:1.4;text-align:left;}
.hwm_donate * {box-sizing:border-box;}
.hwm_donate img {border:0;}
.hwm_donate .hwm_donate_panel {display:block;min-width:0;margin:0;padding:22px 14px 14px;}

/* Notices: the payment limit error and the result of an exchange */
.hwm_donate .hwm_donate_notice {margin:0 0 12px;padding:8px 12px;border:1px solid #d3a493;border-radius:4px;background:#fbefe9;color:#963c28;font-weight:bold;text-align:center;}
.hwm_donate .hwm_donate_notice_ok {border-color:#b7cf98;background:#eef4e2;color:#2f6b2a;}
.hwm_donate .hwm_donate_notice font {color:inherit;}

/* Sections of the page */
.hwm_donate .hwm_donate_section {margin:0 0 12px;border:1px solid #d6c7af;border-radius:4px;background:#fbf9f3;overflow:hidden;}
.hwm_donate .hwm_donate_section:last-child {margin-bottom:0;}
.hwm_donate .hwm_donate_head {padding:7px 12px;border-bottom:1px solid #e3d8c0;background:#efe7d6;color:#806242;font-size:14px;font-weight:bold;text-align:center;}
.hwm_donate .hwm_donate_body {padding:12px 14px;}

/* Resource amounts with their icon */
.hwm_donate .hwm_donate_res {display:inline-block;white-space:nowrap;}
.hwm_donate .hwm_donate_res_icon {display:inline-block;width:20px;height:20px;margin:0 3px 0 0;vertical-align:-5px;}
.hwm_donate .hwm_donate_rate b {color:#592c08;}
.hwm_donate .hwm_donate_rate_sign {color:#a08a6a;}
.hwm_donate .hwm_donate_price {white-space:nowrap;}

/* Exchange of the player's diamonds for gold */
.hwm_donate .hwm_donate_exchange {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin:0;}
.hwm_donate .hwm_donate_have {margin:4px 10px 4px 0;font-size:14px;}
.hwm_donate .hwm_donate_exchange input[type=submit] {width:auto;margin:4px 0 4px 8px;padding:0 16px;font-size:13px;}

/* Text fields */
.hwm_donate .hwm_donate_input {display:inline-block;width:80px;height:28px;margin:0;padding:2px 6px;border:1px solid #b5a28b;border-radius:3px;background:#fff;color:#592c08;font:inherit;font-weight:bold;text-align:center;}
.hwm_donate .hwm_donate_input:focus {border-color:#91671f;outline:none;box-shadow:0 0 0 2px #ffe4b3;}
.hwm_donate .hwm_donate_input:disabled {background:#efe9dc;color:#9a8a74;}

/* Why to help with the premium image shop under the text; the gift chest bonus opens the purchase section */
.hwm_donate .hwm_donate_chest {display:flex;align-items:center;justify-content:center;margin:0 0 12px;padding:10px 14px;border:1px solid #e6d09c;border-radius:6px;background:#fff8e6;background:radial-gradient(ellipse at center,#fff0c8,#fffaf0 75%);overflow:hidden;}
.hwm_donate .hwm_donate_chest_pic {position:relative;display:block;flex:0 0 auto;width:72px;height:72px;margin:0 14px 0 0;line-height:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
.hwm_donate .hwm_donate_chest_pic .arts_info, .hwm_donate .hwm_donate_chest_pic img {display:block;width:72px;height:72px;}
.hwm_donate .hwm_donate_chest_text {flex:0 1 auto;min-width:0;font-size:14px;}
.hwm_donate .hwm_donate_shop {margin:10px 0 0;padding:10px 0 0;border-top:1px dashed #d6c7af;text-align:center;}
.hwm_donate .hwm_donate_shop input[type=submit] {width:auto;padding:0 16px;font-size:13px;}

/* The chest draws the eye with a short burst every 7 s for about a minute: the warm glow flares, a glint runs over the
   chest and three sparks twinkle, then it rests. The hover lifts it and replays the glint; motion only without
   prefers-reduced-motion. The glint is a white copy of the picture under a moving gradient mask, so it stays inside
   the silhouette; without masks the copy is hidden. */
.hwm_donate .hwm_donate_chest_glow {position:absolute;left:-12px;top:-12px;width:96px;height:96px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,204,84,.8),rgba(255,214,110,.35) 60%,rgba(255,214,110,0));opacity:.55;pointer-events:none;-webkit-transition:opacity .25s,-webkit-transform .25s;transition:opacity .25s,transform .25s;}
.hwm_donate .hwm_donate_chest_art {position:relative;-webkit-transition:-webkit-transform .25s;transition:transform .25s;}
.hwm_donate .hwm_donate_chest_pic .hwm_donate_chest_shine {display:none;position:absolute;left:0;top:0;pointer-events:none;}
.hwm_donate .hwm_donate_chest_spark {position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;opacity:0;pointer-events:none;background:radial-gradient(circle,#fff 0,#fff 14%,rgba(255,226,120,.9) 26%,rgba(255,190,40,0) 58%);-webkit-filter:drop-shadow(0 0 1px rgba(176,108,0,.9));filter:drop-shadow(0 0 1px rgba(176,108,0,.9));}
.hwm_donate .hwm_donate_chest_spark:before, .hwm_donate .hwm_donate_chest_spark:after {content:"";position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;border-radius:1px;background:linear-gradient(90deg,rgba(255,196,48,0),#ffe9a0 35%,#fff 50%,#ffe9a0 65%,rgba(255,196,48,0));}
.hwm_donate .hwm_donate_chest_spark:after {-webkit-transform:rotate(90deg);transform:rotate(90deg);}
.hwm_donate .hwm_donate_chest_spark1 {left:61px;top:15px;width:24px;height:24px;margin:-12px 0 0 -12px;}
.hwm_donate .hwm_donate_chest_spark2 {left:9px;top:30px;}
.hwm_donate .hwm_donate_chest_spark3 {left:52px;top:60px;}
.hwm_donate .hwm_donate_chest_pic:hover .hwm_donate_chest_glow, .hwm_donate .hwm_donate_chest_pic:focus .hwm_donate_chest_glow {opacity:1;-webkit-transform:scale(1.12);transform:scale(1.12);}
.hwm_donate .hwm_donate_chest_pic:hover .hwm_donate_chest_art, .hwm_donate .hwm_donate_chest_pic:focus .hwm_donate_chest_art {-webkit-transform:translateY(-3px) scale(1.06);transform:translateY(-3px) scale(1.06);}
@supports (-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000)) {
   .hwm_donate .hwm_donate_chest_pic .hwm_donate_chest_shine {display:block;opacity:.75;-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1);-webkit-mask-image:linear-gradient(110deg,transparent 44%,#000 50%,transparent 56%);mask-image:linear-gradient(110deg,transparent 44%,#000 50%,transparent 56%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;}
}
@media (prefers-reduced-motion:no-preference) {
   .hwm_donate .hwm_donate_chest_glow {animation:hwm_donate_chest_glow 7s ease-in-out 1s 8;}
   .hwm_donate .hwm_donate_chest_pic .hwm_donate_chest_shine {animation:hwm_donate_chest_shine 7s ease-in-out 1s 8;}
   .hwm_donate .hwm_donate_chest_spark {animation:hwm_donate_chest_spark 7s ease-in-out 1.5s 8;}
   .hwm_donate .hwm_donate_chest_spark2 {animation-delay:2s;}
   .hwm_donate .hwm_donate_chest_spark3 {animation-delay:2.6s;}
   .hwm_donate .hwm_donate_chest_pic:hover .hwm_donate_chest_glow, .hwm_donate .hwm_donate_chest_pic:focus .hwm_donate_chest_glow {animation:none;}
   .hwm_donate .hwm_donate_chest_pic:hover .hwm_donate_chest_shine, .hwm_donate .hwm_donate_chest_pic:focus .hwm_donate_chest_shine {animation:hwm_donate_chest_shine_hover 2.4s ease-in-out infinite;}
   .hwm_donate .hwm_donate_chest_pic:hover .hwm_donate_chest_spark, .hwm_donate .hwm_donate_chest_pic:focus .hwm_donate_chest_spark {animation:hwm_donate_chest_spark_hover 2.4s ease-in-out .4s infinite;}
   .hwm_donate .hwm_donate_chest_pic:hover .hwm_donate_chest_spark2, .hwm_donate .hwm_donate_chest_pic:focus .hwm_donate_chest_spark2 {animation-delay:.8s;}
   .hwm_donate .hwm_donate_chest_pic:hover .hwm_donate_chest_spark3, .hwm_donate .hwm_donate_chest_pic:focus .hwm_donate_chest_spark3 {animation-delay:1.2s;}
}
@keyframes hwm_donate_chest_glow {0%, 30%, 100% {opacity:.55;transform:scale(1);} 9% {opacity:1;transform:scale(1.1);}}
@keyframes hwm_donate_chest_shine {0% {-webkit-mask-position:100% 0;mask-position:100% 0;} 18%, 100% {-webkit-mask-position:0 0;mask-position:0 0;}}
@keyframes hwm_donate_chest_shine_hover {0% {-webkit-mask-position:100% 0;mask-position:100% 0;} 45%, 100% {-webkit-mask-position:0 0;mask-position:0 0;}}
@keyframes hwm_donate_chest_spark {0% {opacity:0;transform:scale(0) rotate(0);} 5% {opacity:1;transform:scale(1) rotate(45deg);} 11%, 100% {opacity:0;transform:scale(0) rotate(90deg);}}
@keyframes hwm_donate_chest_spark_hover {0% {opacity:0;transform:scale(0) rotate(0);} 15% {opacity:1;transform:scale(1) rotate(45deg);} 32%, 100% {opacity:0;transform:scale(0) rotate(90deg);}}

/* The chest hint sits in the game hint box (.hwm_hint_css of css/hwm_top_basic.css), which the hint script adds to
   body outside .hwm_donate */
.hwm_hint_css .hwm_donate_hint {width:22em;max-width:calc(100vw - 4em);padding:.35em 0 .15em;line-height:1.45;text-align:left;}
.hwm_hint_css .hwm_donate_hint_title {margin:0 0 .4em;padding:0 0 .35em;border-bottom:1px solid rgba(89,44,8,.3);font-size:1.12em;font-weight:bold;}

/* Gift set for new players: the picture and the artifacts in four columns */
.hwm_donate .hwm_donate_lowlevel_title {color:#e0402b;}
.hwm_donate .hwm_donate_lowlevel_body {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
.hwm_donate .hwm_donate_lowlevel_pic {display:block;max-width:100%;height:auto;margin:0 20px 0 0;border-radius:4px;box-shadow:0 1px 4px rgba(89,44,8,.35);}
.hwm_donate .hwm_donate_lowlevel_set {display:flex;flex-wrap:wrap;width:216px;}
.hwm_donate .hwm_donate_lowlevel_art {width:50px;height:50px;margin:2px;}

/* Quick choice of the diamond amount: the button that matches the field is gold */
.hwm_donate .hwm_donate_quick {display:flex;flex-wrap:wrap;justify-content:center;margin:0 0 8px;}
.hwm_donate .hwm_donate_quick_btn {display:inline-flex;align-items:center;justify-content:center;min-width:60px;height:30px;margin:3px;padding:0 11px 0 8px;border:1px solid #c9b597;border-radius:15px;background:#fff;color:#592c08;font:bold 13px/1 Verdana,Arial,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-transition:background-color .15s,border-color .15s;transition:background-color .15s,border-color .15s;}
.hwm_donate .hwm_donate_quick_btn:hover {border-color:#a78750;background:#f3ede1;}
.hwm_donate .hwm_donate_quick_on, .hwm_donate .hwm_donate_quick_on:hover {border-color:#a78750;background:#dab761;box-shadow:inset 0 0 0 1px #fce6b0;color:#4a2506;}
.hwm_donate .hwm_donate_quick_icon {display:block;width:16px;height:16px;margin:0 4px 0 0;}
.hwm_donate .hwm_donate_quick_btn:focus {outline:2px solid #b68a46;outline-offset:2px;}
.hwm_donate .hwm_donate_quick_btn:focus:not(:focus-visible) {outline:none;}
.hwm_donate .hwm_donate_quick_btn:disabled, .hwm_donate .hwm_donate_quick_btn:disabled:hover {border-color:#ddd2bd;background:#f3eee4;color:#b3a28a;box-shadow:none;cursor:default;}
.hwm_donate .hwm_donate_quick_btn:disabled .hwm_donate_quick_icon {opacity:.45;-webkit-filter:grayscale(100%);filter:grayscale(100%);}
/* The exchange buttons take their own row above the field */
.hwm_donate .hwm_donate_exchange_quick {width:100%;margin:0 0 6px;}

/* Purchase: the amount of diamonds and of rubles */
.hwm_donate .hwm_donate_amount {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin:0 0 10px;}
.hwm_donate .hwm_donate_field {display:inline-flex;align-items:center;margin:4px 12px;font-size:14px;}
.hwm_donate .hwm_donate_field_label {margin:0 8px 0 0;}
.hwm_donate .hwm_donate_input_group {display:inline-flex;align-items:stretch;}
.hwm_donate .hwm_donate_input_group .hwm_donate_input {border-radius:3px 0 0 3px;}
.hwm_donate .hwm_donate_field_unit {display:flex;align-items:center;justify-content:center;min-width:34px;margin:0;padding:0 8px;border:1px solid #b5a28b;border-left:0;border-radius:0 3px 3px 0;background:#efe7d6;color:#806242;font-size:12px;font-weight:bold;}
.hwm_donate .hwm_donate_field_unit .hwm_donate_quick_icon {margin:0;}

/* Payment methods (the .pay-sys tiles of i/donate_page.css); the top border has the colour of the method */
.hwm_donate .hwm_donate_methods {display:flex;flex-wrap:wrap;justify-content:center;margin:0 -5px;}
.hwm_donate .hwm_donate_method_cell {width:200px;margin:5px;}
.hwm_donate .hwm_donate_method_form {display:block;margin:0;}
.hwm_donate .hwm_donate_method {display:flex;flex-direction:column;align-items:center;justify-content:center;height:112px;padding:10px 8px 8px;border:1px solid #d6c7af;border-top:4px solid #8f7f56;border-radius:4px;background:#fff;box-shadow:0 1px 2px rgba(89,44,8,.15);color:#592c08;text-align:center;cursor:pointer;-webkit-transition:box-shadow .15s,-webkit-transform .15s;transition:box-shadow .15s,transform .15s;}
.hwm_donate .hwm_donate_method:hover {border-right-color:#a78750;border-bottom-color:#a78750;border-left-color:#a78750;box-shadow:0 4px 10px rgba(89,44,8,.25);-webkit-transform:translateY(-2px);transform:translateY(-2px);}
.hwm_donate .hwm_donate_method_logo {display:block;width:auto;max-width:100%;height:48px;margin:0 0 8px;object-fit:contain;}
.hwm_donate .hwm_donate_method_name {display:block;max-width:100%;font-size:13px;font-weight:bold;line-height:1.25;word-wrap:break-word;overflow-wrap:break-word;}

/* Reminders at the bottom */
.hwm_donate .hwm_donate_notes {color:#806242;font-size:12px;}
.hwm_donate .hwm_donate_notes li {margin:2px 0 2px 1.6em;}

@media (max-width:700px) {
   .hwm_donate {margin-top:1.2em;padding:0 6px;}
   .hwm_donate .hwm_donate_panel {padding:22px 8px 8px;}
   .hwm_donate .hwm_donate_body {padding:10px;}
   .hwm_donate .hwm_donate_method_cell {width:calc(50% - 10px);}
   .hwm_donate .hwm_donate_method_name {font-size:12px;}
   .hwm_donate .hwm_donate_quick_btn {width:calc(33.333% - 6px);}
   .hwm_donate .hwm_donate_exchange_quick .hwm_donate_quick_btn {width:calc(20% - 6px);min-width:0;padding:0 4px;}
   /* The amount fields wrap into two equal columns over the payment tiles: the caption above, the field below */
   .hwm_donate .hwm_donate_amount {flex-wrap:nowrap;align-items:flex-end;margin:0 -5px 10px;}
   .hwm_donate .hwm_donate_field {flex-wrap:wrap;width:calc(50% - 10px);margin:0 5px;}
   .hwm_donate .hwm_donate_field_label {width:100%;margin:0 0 4px;color:#806242;font-size:12px;text-align:center;}
   .hwm_donate .hwm_donate_input_group {display:flex;width:100%;}
   .hwm_donate .hwm_donate_input_group .hwm_donate_input {flex:1 1 auto;width:auto;min-width:0;}
   .hwm_donate .hwm_donate_chest {padding:8px 10px;}
   /* The gift set on phones: the picture (500x300 file) across the screen, under it the set in two rows of five
      without the empty cells of the four-column layout */
   .hwm_donate .hwm_donate_lowlevel_body {flex-direction:column;}
   .hwm_donate .hwm_donate_lowlevel_pic {width:100%;max-width:340px;margin:0 0 10px;}
   .hwm_donate .hwm_donate_lowlevel_set {width:270px;}
   .hwm_donate .hwm_donate_lowlevel_art:empty {display:none;}
}
@media (max-width:700px), (pointer:coarse) {
   .hwm_donate .hwm_donate_input {height:36px;}
   .hwm_donate .hwm_donate_quick_btn {min-width:64px;height:36px;border-radius:18px;}
   .hwm_donate .hwm_donate_panel input[type=submit] {line-height:34px;}
}

/* Result of a payment (hwm_donate_success.php, hwm_donate_fail.php): the diamond in a soft halo with a round mark
   (a green tick or a red "!"), the text and the button; the card pops in once, unless motion is reduced. The mark is one
   SVG picture with the circle and its sign drawn around the same centre, so no font or box model moves the sign off it */
.hwm_donate .hwm_donate_result {display:flex;flex-direction:column;align-items:center;padding:22px 16px 18px;text-align:center;}
.hwm_donate .hwm_donate_result_icon {position:relative;display:flex;align-items:center;justify-content:center;width:84px;height:84px;margin:0 0 12px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,110,.75),rgba(255,214,110,0));}
.hwm_donate .hwm_donate_result_icon img {display:block;width:48px;height:48px;}
.hwm_donate .hwm_donate_result_icon:after {content:"";position:absolute;right:8px;bottom:8px;width:24px;height:24px;background-repeat:no-repeat;background-position:center;background-size:24px 24px;-webkit-filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));}
.hwm_donate .hwm_donate_result_ok:after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%234b9a3c' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M7 12.05l3.3 3.3L17 8.65' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.hwm_donate .hwm_donate_result_fail {background:radial-gradient(closest-side,rgba(205,190,168,.7),rgba(205,190,168,0));}
.hwm_donate .hwm_donate_result_fail img {opacity:.55;-webkit-filter:grayscale(100%);filter:grayscale(100%);}
.hwm_donate .hwm_donate_result_fail:after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23d0452e' stroke='%23fff' stroke-width='2'/%3E%3Crect x='10.7' y='5.4' width='2.6' height='8' rx='1.3' fill='%23fff'/%3E%3Ccircle cx='12' cy='17.1' r='1.55' fill='%23fff'/%3E%3C/svg%3E");}
.hwm_donate .hwm_donate_result_text {max-width:520px;margin:0 0 16px;font-size:15px;line-height:1.5;}
.hwm_donate .hwm_donate_result_form input[type=submit] {width:auto;min-width:160px;padding:0 20px;font-size:14px;}
@media (prefers-reduced-motion:no-preference) {
   .hwm_donate .hwm_donate_result_icon {animation:hwm_donate_result_in .45s ease-out both;}
}
@keyframes hwm_donate_result_in {0% {opacity:0;transform:scale(.6);} 70% {opacity:1;transform:scale(1.06);} 100% {opacity:1;transform:scale(1);}}

/* Store of the mobile apps (hwm_donate_short.php): a card per App Store pack in one format; the pile of diamonds
   grows with the pack and the price sits on the gold buy button. Five in a row on wide screens. */
.hwm_donate .hwm_donate_packs {display:flex;flex-wrap:wrap;justify-content:center;padding:8px 9px;}
.hwm_donate .hwm_donate_pack {display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:calc(20% - 10px);margin:5px;padding:12px 10px 10px;border:1px solid #d6c7af;border-radius:8px;background:#fffdf8;background:linear-gradient(#fffdf8,#f2e8d2);box-shadow:0 1px 3px rgba(89,44,8,.15);}
.hwm_donate .hwm_donate_pack_pile {display:flex;justify-content:center;align-items:flex-end;height:50px;}
.hwm_donate .hwm_donate_pack_gem {display:block;width:34px;height:34px;margin:0 -7px;-webkit-filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));}
.hwm_donate .hwm_donate_pack_gem:nth-child(2n) {margin-bottom:12px;}
.hwm_donate .hwm_donate_pack_count {margin:6px 0 10px;color:#592c08;font:bold 24px/1 Verdana,Arial,sans-serif;}
.hwm_donate .hwm_donate_pack input.hwm_donate_pack_buy {width:100%;height:38px;margin:0;padding:0 6px;font-size:15px;line-height:36px;}
@media (max-width:700px) {
   .hwm_donate .hwm_donate_packs {padding:6px 3px;}
   .hwm_donate .hwm_donate_pack {width:calc(50% - 10px);}
   /* An odd last pack takes the whole row and lies on its side */
   .hwm_donate .hwm_donate_pack:last-child:nth-child(odd) {width:calc(100% - 10px);flex-direction:row;justify-content:space-between;padding:10px 12px;}
   .hwm_donate .hwm_donate_pack:last-child:nth-child(odd) .hwm_donate_pack_count {margin:0 10px;}
   .hwm_donate .hwm_donate_pack:last-child:nth-child(odd) input.hwm_donate_pack_buy {width:42%;}
}

/* Waiting for an iPhone payment: the dark layer over the whole screen and the window with the loading picture
   (css/loading.gif). incl/bottom.php prints them after the phone frame, so without top:0 the layer starts below the screen */
.hwm_donate_overlay {position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6);z-index:998;}
.hwm_donate_modal {position:fixed;left:50%;top:50%;width:200px;height:120px;margin:auto;border:0;border-radius:5px;overflow-x:hidden;background:#f5f3ea url(loading.gif) no-repeat center;line-height:40px;text-align:center;z-index:999;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}