/* endpoint manager */

.ep-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.ep-modal[aria-hidden="false"] { display: block; }
.ep-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.ep-modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(1100px, 95vw); height: min(720px, 90vh);
  background: #fff; border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
}
.ep-modal__header, .ep-modal__footer { padding: 12px 16px; border-bottom: 1px solid #eee; }
.ep-modal__footer { border-bottom: 0; border-top: 1px solid #eee; }
.ep-modal__header { display:flex; justify-content: space-between; align-items:center; }
.ep-x {
    font-size: 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.ep-modal__toolbar { padding: 10px 16px; display:flex; gap:10px; border-bottom:1px solid #eee; }
.ep-modal__toolbar input { flex: 1; padding: 8px 10px; }

.ep-modal__body { padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; overflow: hidden; flex: 1; }
.ep-list { overflow: auto; border: 1px solid #eee; border-radius: 8px; padding: 8px; }
.ep-item { padding: 8px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.ep-item:hover { background: #f6f6f6; }
.ep-item.active { border-color: #999; background: #f2f2f2; }
.ep-item .k { font-weight: 700; font-size: 14px; }
.ep-item .u { font-size: 12px; opacity: .75; margin-top: 4px; word-break: break-all; }

.ep-form { overflow: auto; border: 1px solid #eee; border-radius: 8px; padding: 12px; }
.ep-form label { display:block; margin: 15px 0 0 0; font-size: 12px; }
.ep-form input { width:100%; padding: 8px 10px; margin-top: 6px; }
.ep-grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ep-form__actions { display:flex; justify-content: space-between; margin-top: 12px; }
  .ep-grid3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }
  @media (max-width: 900px) { .ep-grid3 { grid-template-columns: 1fr; } }
button.info { background:#03a9f4; color:#fff; border:0; padding: 5px 20px; border-radius: 25px; }

button.primary { background:#111; color:#fff; border:0; padding: 5px 20px; border-radius: 25px; }
button.danger { background:#c62828; color:#fff; border:0; padding: 5px 20px; border-radius: 25px; }
button#manage_endpoints_btn, button#manage_scenes_btn {
    background: #9d9d9d;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 10px;
    color: #FFF;
    box-shadow: 0px 1px 3px 2px #ccc;
    -moz-box-shadow: 0px 1px 3px 2px #ccc;
    -webkit-box-shadow: 0px 1px 3px 2px #ccc;
    -khtml-box-shadow: 0px 1px 3px 2px #ccc;
    cursor: pointer;
}
select#sc_multiSceneRender, select#sc_forceTransparency {
    width: 100%;
    height: 35px;
    border: 1px solid #ccc;
    margin-top: 5px;
}
.ep-modal button {
	cursor: pointer;
}
.ep-modal input {
    border: 1px solid #ccc;
}
.ep-modal__header h2 {
    margin: 0;
    font-size: 20px;
}
.ep-form h3 {
	font-size: 16px;
	margin: 5px 0 10px 0;
}
.adv-render-wrapper {
	display: none;
}
.adv-render-wrapper.active {
	display: flex;
}

.modal[aria-hidden="true"] { display:none; }
.modal[aria-hidden="false"] { display:block; position:fixed; inset:0; z-index:9999; }

.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.modal-panel {
  position:relative;
  width:min(520px, calc(100% - 24px));
  margin:8vh auto 0;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal-header { padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.08); display:flex; justify-content:space-between; align-items:center; }
.modal-body { padding:16px; }
.modal-footer { padding:12px 16px; border-top:1px solid rgba(0,0,0,.08); }
.modal-x { border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; }
.btn { padding:8px 12px; border-radius:8px; border:1px solid rgba(0,0,0,.15); background:#fff; cursor:pointer; }
.btn.primary { background:#111; color:#fff; border-color:#111; }
.btn.small { padding:8px 10px; }

/* Button 1 */


.knobs, .slayer
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.button
{
    position: relative;
    top: 50%;
    width: 65px;
    height: 27px;
    margin: -20px auto 0 auto;
}

.button.r, .button.r .slayer
{
    border-radius: 3px;
}

.button.b2
{
    border-radius: 2px;
}

.checkbox
{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}
ul.option-list.render .old {
	display: none;
}
.knobs
{
    z-index: 2;
}

.slayer
{
    width: 100%;
    background-color: #fcebeb;
    transition: 0.3s ease all;
    z-index: 1;
}
.cdn .slayer, .bundle .slayer {
	background-color: #e96d3e1f;
}
.cdn #button-1 .checkbox:checked ~ .slayer, .bundle #button-1 .checkbox:checked ~ .slayer {
	background-color: #58385d45;
}
.render {
	margin: 10px 0 20px;
}
.render .button {
	margin: -35px auto 0 auto;
}
.render #button-1 .knobs:before {
	content: 'Old';
	background-color: #e96d3e;
}	
.render #button-1 .checkbox:checked + .knobs:before
{
    content: 'New';
	background-color: #58385D;
}

.render .addto-button #button-1 .knobs:before  {
	content: 'NO';
    background-color: #f44336;
}
.render .addto-button #button-1 .checkbox:checked + .knobs:before  {
	content: 'YES';
    background-color: #3BB143;
}
.button-wrapper-create ul.option-list.options {
    padding: 0;
}
.button-wrapper-create ul.option-list.options li label {
	top: -15px;
}
.cdn #button-1 .knobs:before {
	content: 'CDN';
	background-color: #e96d3e;
}
.cdn #button-1 .checkbox:checked + .knobs:before
{
    content: 'CDN1';
	background-color: #58385D;
}
.bundle #button-1 .knobs:before {
	content: 'PRO';
	background-color: #e96d3e;
}
.bundle #button-1 .checkbox:checked + .knobs:before
{
    content: 'DEV';
	background-color: #58385D;
}

.prod-dev-wrapper ul.option-list li #date {
    position: absolute;
    font-size: 11px;
    white-space: nowrap;
    top: 13px;
    padding-left: 10px;
}
#button-1 .knobs:before
{
    content: 'NO';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    color: #fff;
    font-size: 7px;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
    padding: 0;
    background-color: #f44336;
    border-radius: 3px;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-1 .checkbox:checked + .knobs:before
{
    content: 'YES';
    left: 41px;
    background-color: #3BB143;
}

#button-1 .checkbox:checked ~ .slayer
{
    background-color: #3bb1431c;
}

#button-1 .knobs, #button-1 .knobs:before, #button-1 .slayer
{
    transition: 0.3s ease all;
}
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  background: #ebf7fc;
  outline: none;
  border: none !important;
  padding: 5px 5px !important;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border-radius: 50px;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #03A9F4;
  cursor: pointer;
  border-radius: 100%;
  border: none;
}

.slider::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  background: #03A9F4;
  cursor: pointer;
  border-radius: 100%;
  border: none;
}