/**/ .draw-form-panel { padding-top: 0px; padding-bottom: 30px; background-color: #efefef; } .draw-form-panel .mbr-overlay { background-color: #ffffff; opacity: 0.4; } .draw-form-panel .mbr-iconfont { position: absolute; right: 1.2rem; color: #4554c1; top: 50%; transform: translateY(-50%); font-size: 1.2rem; } .draw-form-panel .form-control, .draw-form-panel .field-input { background-color: #ffffff; border: 1px solid #767676; transition: 0.4s; box-shadow: none; outline: none; } .draw-form-panel .form-control input::-webkit-input-placeholder, .draw-form-panel .field-input input::-webkit-input-placeholder, .draw-form-panel .form-control textarea::-webkit-input-placeholder, .draw-form-panel .field-input textarea::-webkit-input-placeholder { color: #bbbbbb !important; } .draw-form-panel .form-control input:-moz-placeholder, .draw-form-panel .field-input input:-moz-placeholder, .draw-form-panel .form-control textarea:-moz-placeholder, .draw-form-panel .field-input textarea:-moz-placeholder { color: #bbbbbb !important; } .draw-form-panel .form-control input::placeholder, .draw-form-panel .field-input input::placeholder, .draw-form-panel .form-control textarea:placeholder, .draw-form-panel .field-input textarea:placeholder { color: red !important; opacity: 1; } .draw-form-panel .form-control:hover, .draw-form-panel .field-input:hover, .draw-form-panel .form-control:focus, .draw-form-panel .field-input:focus { background-color: #ffffff; border-color: #767676; color: #000000; box-shadow: none; outline: none; } .draw-form-panel .form-control:hover input::-webkit-input-placeholder, .draw-form-panel .field-input:hover input::-webkit-input-placeholder, .draw-form-panel .form-control:focus input::-webkit-input-placeholder, .draw-form-panel .field-input:focus input::-webkit-input-placeholder, .draw-form-panel .form-control:hover textarea::-webkit-input-placeholder, .draw-form-panel .field-input:hover textarea::-webkit-input-placeholder, .draw-form-panel .form-control:focus textarea::-webkit-input-placeholder, .draw-form-panel .field-input:focus textarea::-webkit-input-placeholder, .draw-form-panel .form-control:hover input::placeholder, .draw-form-panel .field-input:hover input::placeholder, .draw-form-panel .form-control:focus input::placeholder, .draw-form-panel .field-input:focus input::placeholder { color: #000000; } .draw-form-panel .form-control:hover input:-moz-placeholder, .draw-form-panel .field-input:hover input:-moz-placeholder, .draw-form-panel .form-control:focus input:-moz-placeholder, .draw-form-panel .field-input:focus input:-moz-placeholder, .draw-form-panel .form-control:hover textarea:-moz-placeholder, .draw-form-panel .field-input:hover textarea:-moz-placeholder, .draw-form-panel .form-control:focus textarea:-moz-placeholder, .draw-form-panel .field-input:focus textarea:-moz-placeholder, .draw-form-panel .form-control:hover input::placeholder, .draw-form-panel .field-input:hover input::placeholder, .draw-form-panel .form-control:focus input::placeholder, .draw-form-panel .field-input:focus input::placeholder { color: #000000; } .draw-form-panel .jq-number__spin:hover, .draw-form-panel .jq-number__spin:focus { background-color: #ffffff; border-color: #767676; color: #000000; box-shadow: none; outline: none; } .draw-form-panel .jq-number__spin { background-color: #ffffff; border-color: #767676; color: #767676; transition: 0.4s; box-shadow: none; outline: none; } .draw-form-panel .jq-selectbox li, .draw-form-panel .jq-selectbox li { background-color: #ffffff; color: #000000; } .draw-form-panel .jq-selectbox li:hover, .draw-form-panel .jq-selectbox li.selected { background-color: #ffffff; color: #000000; } .draw-form-panel .jq-selectbox:hover .jq-selectbox__trigger-arrow, .draw-form-panel .jq-number__spin.minus:hover:after, .draw-form-panel .jq-number__spin.plus:hover:after { border-top-color: #ffffff; border-bottom-color: #ffffff; } .draw-form-panel .jq-selectbox .jq-selectbox__trigger-arrow, .draw-form-panel .jq-number__spin.minus:after, .draw-form-panel .jq-number__spin.plus:after { border-top-color: #ffffff; border-bottom-color: #ffffff; } .draw-form-panel input::-webkit-clear-button { display: none; } .draw-form-panel input::-webkit-inner-spin-button { display: none; } .draw-form-panel input::-webkit-outer-spin-button { display: none; } .draw-form-panel input::-webkit-calendar-picker-indicator { display: none; } .draw-form-panel small { font-size: 1.2rem; display: block; margin-top: 0px; float: right; } .draw-form-panel .sp88 { position: relative; display: inline; margin: 0; padding: 0; margin-right: -10px; margin-left: 26px; } .draw-form-panel ol li { display: inline; } .draw-form-panel .form-group { margin-top: 5px; padding-left: 1rem; padding-right: 1rem; } .draw-form-panel .btn { min-height: 12px; border-radius: 50px; } .draw-form-panel button .small { line-height: 1rem !important; } .draw-form-panel label { margin-bottom: 0.1rem; } .draw-form-panel .margin_top { margin-top: 65px; } .draw-form-panel :-ms-input-placeholder { color: #999; } .draw-form-panel ::-ms-input-placeholder { color: #bbbbbb !important; } @media screen and (max-width: 780px) { .draw-form-panel .mbr-iconfont { font-size: 24px; } .draw-form-panel .btn { padding: 6px 12px; } } @media screen and (min-width: 781px) { .draw-form-panel .mbr-iconfont { font-size: 30px; } } .draw-form-panel .placeholder1, .draw-form-panel .placeholder2 { pointer-events: none; user-select: none; position: absolute; font-size: 1rem; padding: 0.5rem; border-radius: 4px; } .draw-form-panel .hidden { display: none; } /**/ .innerContent { display: flex; flex-wrap: wrap; /**/ align-content: center; justify-content: center; align-items: center; /**/ position: relative; /**/ min-height: 100%; /**/ box-sizing: border-box; /**/ gap: 30px; /**/ } .popContent { font-size: 3rem; line-height: 1.5; word-break: break-all; white-space: normal; /**/ } .popContent_height { height: 300px !important; } .popTitle { font-size: 3rem; line-height: 1.5; font-weight: 400; word-break: break-word; white-space: normal; } .popTitleAmount { font-size: 2rem; line-height: 1.5; font-weight: 400; word-break: break-word; white-space: normal; } .sp88_textarea { background: #FFF !important; color: #555 !important; height: 300px; font-weight: 400 !important; line-height: 2rem !important; font-size: 1.2rem !important; padding: .5rem !important; border-radius: 4px; /**/ } @media (max-width: 767px) { .popContent { font-size: 1.4rem; } } @media (max-width: 767px) { .popTitle { font-size: 1.8rem; } } @media (max-width: 767px) { .popTitleAmount { font-size: 1.4rem; } } /**/ .draw-panel { display: block; width: 100%; box-sizing: border-box; background-color: var(--panel_bg_color) !important; color: var(--panel_txt_color) !important; border: 1px solid #dddddd !important; border-radius: 4px; box-shadow: rgba(0, 0, 0, .07) 0 1px 1px 0, rgba(0, 0, 0, .07) 0 1px 3px 0, rgba(0, 0, 0, .03) 0 0 0 1px; transition: border-color .25s ease; outline: 0; } .draw-panel:hover, .draw-panel:focus { border-color: var(--icon_color) !important; } .draw-panel--scroll { overflow: auto; padding: .5rem !important; } .draw-panel--editor { display: flex; flex-direction: column; position: relative; overflow: hidden !important; padding: 0 !important; } .draw-panel__header { flex: 0 0 auto; padding: .5rem .5rem 0; } .draw-panel__body { flex: 1 1 auto; width: 100%; min-height: 0; overflow: auto; position: relative; box-sizing: border-box; } .draw-panel__body--sources { padding: .5rem .5rem 55px; } .draw-panel__body--social { padding: 0 .5rem 55px; } .draw-panel__footer { position: absolute; bottom: 10px; left: 50%; z-index: 2; transform: translateX(-50%); } /**/ #prize_view,#prize_form,#prize_area, #lists_view,#lists_text_editor,#lists_sources_manager,#lists_social_editor, #winners { overflow: auto; height: calc(100vh - 550px); min-height: 375px !important; } #lists_text_editor { position: relative; display: flex; flex-direction: column; overflow: hidden !important; } #lists_text_source_title, #lists_text_source_label_wrap { flex: 0 0 auto; } .lists-source-label-wrap { position: relative; } .lists-source-label-wrap > i { position: absolute; top: 50%; left: 12px; z-index: 1; transform: translateY(-50%); pointer-events: none; } #lists_text_source_label { padding-left: 2.25rem !important; } #lists_text_editor #lists_area { flex: 1 1 auto; height: auto; min-height: 0 !important; padding-bottom: 50px; } /**/ #div_prize_count, #div_winners_count, .container_list_count{ min-height: 24px; } /**/ @media screen and (max-width: 767px) { #div_winners_count { margin-top: 10px; margin-bottom: 40px; } } /**/ #prize_table th { text-align: center; border-top-color: var(--gray); } #prize_table td { vertical-align: middle; border: 0; padding: 2px; } #prize_table th:nth-child(3) { text-align: center; } #prize_table td:nth-child(3) { text-align: center; padding: 0; } #prize_table input[type="text"], #prize_table input[type="number"] { height: 40px !important; } /**/ .terms-container { display: flex; /**/ justify-content: left; /**/ align-items: flex-start; /**/ text-align: left; /**/ max-width: 100%; /**/ margin: 0 auto; /**/ } /**/ .terms-container input[type="checkbox"] { margin-right: 5px; /**/ flex-shrink: 0; /**/ margin-top: 3px; /**/ } #prize_table tbody tr.prz_row td { vertical-align: middle; } #prize_table .prize-drag-col { width: 35px; padding-left: 0rem; padding-right: 0rem; text-align: center; } .prize-drag-handle { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; color: #999; cursor: grab; touch-action: none; user-select: none; } .prize-drag-handle:active, body.prize-sorting .prize-drag-handle { cursor: grabbing; } .prize-drag-handle.is-disabled { opacity: 0.2; cursor: default; pointer-events: none; } .prize-sortable-ghost td { background: #f1f3f5; opacity: 0.45; } .prize-sortable-chosen td { background: var(--sp88blue); opacity: 1; } .prize-sortable-drag td { background: #fff; } body.prize-sorting { user-select: none; } .prize-sortable-fallback { opacity: 0 !important; } #testModeAlert { position: fixed; top: 0; /**/ left: 0; right: 0; background-color: rgba(255, 0, 0, 0.8); color: white; text-align: center; padding: 10px; font-size: 18px; font-weight: bold; z-index: 99999; /**/ pointer-events: none; /**/ } /**/ /**/ .winners-item, .winner-random-slot { --winner-avatar-size: 1.5em; --winner-avatar-image-ratio: 88%; --winner-avatar-text-size: 0.5em; --winner-avatar-text-size-multiple: 0.4em; } .winner-avatar-wrap { position: relative; display: inline-flex; width: 1em; height: 1em; margin: 0 0.2em 0 0; align-items: center; justify-content: center; vertical-align: -0.12em; flex: 0 0 1em; font-size: var(--winner-avatar-size); line-height: 1; } .winner-avatar-main { display: inline-flex; width: var(--winner-avatar-image-ratio) !important; height: var(--winner-avatar-image-ratio) !important; min-width: 0; min-height: 0; max-width: none; max-height: none; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: var(--winner-avatar-text-size); font-weight: bold; line-height: 1; object-fit: cover; object-position: center; overflow: hidden; box-sizing: border-box; flex: 0 0 var(--winner-avatar-image-ratio); } .winner-avatar-text { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; text-align: center; } .winner-avatar-text.is-multiple { font-size: var(--winner-avatar-text-size-multiple); letter-spacing: -0.04em; } #swal2-html-container .winners-item, #swal2-html-container .winner-random-slot { --winner-avatar-size: 1.4em; } /**/ .entry-avatar-wrap { --entry-avatar-size: clamp(28px, 1.6em, 40px); position: relative; display: inline-flex; width: 1em; height: 1em; margin: 0 0.1em 0 0; align-items: center; justify-content: center; vertical-align: middle; flex: 0 0 1em; font-size: var(--entry-avatar-size); line-height: 1; } .entry-avatar-main { display: inline-flex; width: 87.5%; height: 87.5%; min-width: 0; min-height: 0; max-width: none; max-height: none; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 40%; font-weight: bold; line-height: 1; white-space: nowrap; object-fit: cover; object-position: center; overflow: hidden; box-sizing: border-box; flex: 0 0 87.5%; } .entry-avatar-source { position: absolute; right: -6.25%; bottom: -3.125%; display: inline-flex; width: 43.75%; height: 43.75%; align-items: center; justify-content: center; border: 0.0625em solid #fff; border-radius: 50%; color: #fff; font-size: inherit; line-height: 1; text-decoration: none; box-sizing: border-box; overflow: hidden; } .entry-avatar-source > span { display: block; font-size: 31.25%; line-height: 1; } .entry-avatar-source > span::before { display: block; } .entry-avatar-source.is-standalone { position: relative; right: auto; bottom: auto; width: 0.8em; height: 0.8em; margin: 0 0.25em 0 0; border-width: 0.08em; vertical-align: middle; flex: 0 0 0.8em; } .entry-avatar-source.is-standalone > span { font-size: 0.58em; } .lists-view-row { display: flex; align-items: center; } #lists_view.is-draw-scroll-only { cursor: default !important; touch-action: pan-y; } .entry-row-content { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; } .entry-row-content.is-ineligible { color: #999; opacity: 0.55; } .entry-winner-trophies { display: inline-flex; max-width: 40%; min-width: 0; margin-left: 0.35rem; align-items: center; gap: 0.05rem; line-height: 1; overflow: hidden; flex: 0 0 auto; } .entry-winner-marker { display: inline-block; cursor: inherit; line-height: 1; flex: 0 0 auto; } .entry-winner-trophy { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 0.9em; } .entry-winner-overflow { margin-left: 0.1rem; font-size: 0.75em; font-weight: 600; } /**/ #btn_stop_draw { order: 0; } #btn_draw { order: 1; } .draw-prize-option[role="button"] { cursor: pointer; } .draw-prize-option[aria-disabled="true"] { cursor: default; opacity: .5; } .draw-prize-option[aria-current="true"] .draw-prize-name { color: var(--sp88blue); font-weight: bold; } .draw-prize-option:focus-visible { outline: 2px solid var(--sp88blue); outline-offset: 2px; } .flow-random .winner-random-name, .draw-flow-placeholder .winner-random-name { font: inherit; } .draw-prize-quantity { color: #000; font-weight: normal; } .draw-flow-popup .swal2-actions { gap: 20px; } .draw-flow-popup .swal2-actions .btn { margin: 0; } .flow-random .winner-avatar-wrap, .draw-flow-placeholder .winner-avatar-wrap { display: none !important; } .winners-item.flow-random, .winners-item.draw-flow-placeholder { border-color: transparent !important; background-color: transparent !important; box-shadow: none !important; } .draw-flow-popup { display: flex !important; flex-direction: column; } .draw-flow-popup .swal2-title, .draw-flow-popup .swal2-actions { flex: 0 0 auto; } .draw-flow-popup .swal2-html-container { flex: 1 1 0; min-height: 0; overflow: auto; } .draw-flow-popup #popContent { height: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; } /**/ .btn_draw { background-color: var(--draw_color) !important; color: var(--draw_txt_color) !important; transition: background-color 0.3s ease, color 0.3s ease; } .btn_draw:hover, .btn_draw:focus { background: var(--draw_color_hover) !important; } .btn_stop { background-color: var(--stop_color) !important; color: var(--stop_txt_color) !important; transition: background-color 0.3s ease, color 0.3s ease; } .btn_stop:hover, .btn_stop:focus { background: var(--stop_color_hover) !important; } .btn_next { background: var(--sp88blue) !important; border-color: var(--sp88blue) !important; color: #fff !important; } .btn_next:hover { filter: brightness(.9); } /**/ .btn_fs { display: inline-flex; align-items: center; justify-content: center; width: 30px; /**/ height: 30px; /**/ margin: 5px; border: 1px solid var(--icon_color); /**/ border-radius: 6px; /**/ background-color: transparent; /**/ color: var(--icon_color); /**/ font-size: 17px; /**/ /**/ cursor: pointer; transition: all 0.3s ease; /**/ } .btn_fs:hover, .btn_fs:focus { background-color: var(--icon_color); /**/ color: #fff; /**/ } .btn_fs:active { background-color: var(--icon_color); /**/ filter: brightness(0.8); /**/ } .btn_fs.active { background-color: var(--icon_color); /**/ color: #fff; /**/ } .fs_mod { overflow: auto; height: calc(100vh - var(--top_height)) !important; min-height: 230px; } /**/ .winners-item, .winners-item a { color: var(--panel_txt_color) !important; } .winners-wrap.is-vertical{ display: flex; flex-direction: column; align-items: flex-start; } .winners-wrap.is-horizontal{ display: flex; flex-direction: row; flex-wrap: wrap; /**/ align-items: center; } .winners-item, .winners-item a { display: inline-flex !important; align-items: center !important; width: auto !important; } .winners-prize{ word-break: keep-all !important; } .winners-item{ word-break: break-all !important; } /**/ .container_list_count small { display: inline; width: auto !important; width: 170px; padding: 6px 12px; } @media screen and (max-width: 767px) { .container_list_count { float: none !important; text-align: center; width: 100%; margin-top: 10px; } } @media screen and (max-width: 767px) { .container_list_count small { float: none !important; } } /**/ #dr_ti, #prize_view,#prize_form,#prize_area, #lists_view,#lists_sources_manager,#lists_social_editor,#lists_text_source_title, #winners { background-color: var(--panel_bg_color) !important; color: var(--panel_txt_color) !important; } #prize_table thead .my_txt_color, #prize_table thead.my_txt_color { color: #555555 !important; } .btn_prz_form_del, .btn_remove_item { -webkit-appearance: none; /**/ appearance: none; /**/ padding: 9px; /**/ box-sizing: border-box; /**/ /**/ } ul.advanced > li { font-size: 1.1rem; } @media screen and (max-width: 767px) { #txt_winners { font-size: 1.4rem; } } .div_top_content { padding: 20px; position: relative; display: flex; align-items: center; justify-content: center; } .text-section { text-align: center; /**/ /**/ } .button-group { position: absolute; right: 10px; /**/ top: 100%; /**/ transform: translateY(-50%); /**/ display: flex; gap: 0px; /**/ } #closeIcon { position: fixed; top: 10px; right: 10px; width: 50px; height: 50px; cursor: pointer; z-index: 1000; } #closeIcon img { width: 100%; height: 100%; } .entries-actions { display: flex; flex-wrap: nowrap; gap: 4px; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .entries-actions::-webkit-scrollbar { display: none; } .entries-actions > .btn-action { flex: 0 0 auto; } .btn-action .btn-short { display: none !important; } @media (max-width: 1499.98px) { .btn-action .btn-full { display: none !important; } } @media (max-width: 1499.98px) { .btn-action .btn-short { display: inline !important; } } /**/ @media (max-width: 767px) { #project_banner { width: 100vw; /**/ /**/ object-fit: cover; /**/ overflow: hidden; /**/ } } /**/ #formAdv [data-draw-settings-presets] [data-draw-preset] { background-color: #ffffff; } /**/ #formAdv [data-draw-settings-presets] [data-draw-preset] small { width: 100%; text-align: left; line-height: 1.5; } /**/ #formAdv #draw-settings-details[hidden] { display: none !important; } /**/ @media (max-width: 575.98px) { #formAdv [data-draw-settings-presets] [data-draw-preset] > i { width: 1.4rem; flex-shrink: 0; text-align: center; } #formAdv [data-draw-settings-presets] [data-draw-preset="custom"] > span { padding: 0; } #formAdv [data-draw-settings-presets] [data-draw-preset]:not([data-draw-preset="custom"]) { display: grid !important; grid-template-columns: 1.4rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1rem; text-align: left; } #formAdv [data-draw-settings-presets] [data-draw-preset]:not([data-draw-preset="custom"]) > i { grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: center; margin-bottom: 0 !important; } #formAdv [data-draw-settings-presets] [data-draw-preset]:not([data-draw-preset="custom"]) > span { grid-column: 2; grid-row: 1; justify-content: flex-start !important; } #formAdv [data-draw-settings-presets] [data-draw-preset]:not([data-draw-preset="custom"]) > small { grid-column: 2; grid-row: 2; margin-top: .25rem !important; } } /**/ #formAdv #draw-settings-details input[type="radio"], #formAdv #draw-settings-details input[type="checkbox"] { align-self: flex-start; flex-shrink: 0; position: relative; top: 13px; transform: translateY(-50%); } /**/ #formAdv #draw-settings-details .align-items-center > .info { align-self: flex-start; flex-shrink: 0; }