@import url(https://fonts.cdnfonts.com/css/gotham); .swal2-popup.swal2-toast{flex-direction:row;align-items:center;width:auto;padding:.625em;overflow-y:hidden;background:#fff;box-shadow:0 0 .625em #d9d9d9}.swal2-popup.swal2-toast .swal2-header{flex-direction:row}.swal2-popup.swal2-toast .swal2-title{flex-grow:1;justify-content:flex-start;margin:0 .6em;font-size:1em}.swal2-popup.swal2-toast .swal2-footer{margin:.5em 0 0;padding:.5em 0 0;font-size:.8em}.swal2-popup.swal2-toast .swal2-close{position:static;width:.8em;height:.8em;line-height:.8}.swal2-popup.swal2-toast .swal2-content{justify-content:flex-start;font-size:1em}.swal2-popup.swal2-toast .swal2-icon{width:2em;min-width:2em;height:2em;margin:0}.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content{display:flex;align-items:center;font-size:1.8em;font-weight:700}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content{font-size:.25em}}.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line]{top:.875em;width:1.375em}.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left]{left:.3125em}.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right]{right:.3125em}.swal2-popup.swal2-toast .swal2-actions{flex-basis:auto!important;width:auto;height:auto;margin:0 .3125em}.swal2-popup.swal2-toast .swal2-styled{margin:0 .3125em;padding:.3125em .625em;font-size:1em}.swal2-popup.swal2-toast .swal2-styled:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px rgba(50,100,150,.4)}.swal2-popup.swal2-toast .swal2-success{border-color:#a5dc86}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line]{position:absolute;width:1.6em;height:3em;transform:rotate(45deg);border-radius:50%}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left]{top:-.8em;left:-.5em;transform:rotate(-45deg);transform-origin:2em 2em;border-radius:4em 0 0 4em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right]{top:-.25em;left:.9375em;transform-origin:0 1.5em;border-radius:0 4em 4em 0}.swal2-popup.swal2-toast .swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-popup.swal2-toast .swal2-success .swal2-success-fix{top:0;left:.4375em;width:.4375em;height:2.6875em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line]{height:.3125em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip]{top:1.125em;left:.1875em;width:.75em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long]{top:.9375em;right:.1875em;width:1.375em}.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip{-webkit-animation:swal2-toast-animate-success-line-tip .75s;animation:swal2-toast-animate-success-line-tip .75s}.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long{-webkit-animation:swal2-toast-animate-success-line-long .75s;animation:swal2-toast-animate-success-line-long .75s}.swal2-popup.swal2-toast.swal2-show{-webkit-animation:swal2-toast-show .5s;animation:swal2-toast-show .5s}.swal2-popup.swal2-toast.swal2-hide{-webkit-animation:swal2-toast-hide .1s forwards;animation:swal2-toast-hide .1s forwards}.swal2-container{display:flex;position:fixed;z-index:1060;top:0;right:0;bottom:0;left:0;flex-direction:row;align-items:center;justify-content:center;padding:.625em;overflow-x:hidden;transition:background-color .1s;-webkit-overflow-scrolling:touch}.swal2-container.swal2-backdrop-show,.swal2-container.swal2-noanimation{background:rgba(0,0,0,.4)}.swal2-container.swal2-backdrop-hide{background:0 0!important}.swal2-container.swal2-top{align-items:flex-start}.swal2-container.swal2-top-left,.swal2-container.swal2-top-start{align-items:flex-start;justify-content:flex-start}.swal2-container.swal2-top-end,.swal2-container.swal2-top-right{align-items:flex-start;justify-content:flex-end}.swal2-container.swal2-center{align-items:center}.swal2-container.swal2-center-left,.swal2-container.swal2-center-start{align-items:center;justify-content:flex-start}.swal2-container.swal2-center-end,.swal2-container.swal2-center-right{align-items:center;justify-content:flex-end}.swal2-container.swal2-bottom{align-items:flex-end}.swal2-container.swal2-bottom-left,.swal2-container.swal2-bottom-start{align-items:flex-end;justify-content:flex-start}.swal2-container.swal2-bottom-end,.swal2-container.swal2-bottom-right{align-items:flex-end;justify-content:flex-end}.swal2-container.swal2-bottom-end>:first-child,.swal2-container.swal2-bottom-left>:first-child,.swal2-container.swal2-bottom-right>:first-child,.swal2-container.swal2-bottom-start>:first-child,.swal2-container.swal2-bottom>:first-child{margin-top:auto}.swal2-container.swal2-grow-fullscreen>.swal2-modal{display:flex!important;flex:1;align-self:stretch;justify-content:center}.swal2-container.swal2-grow-row>.swal2-modal{display:flex!important;flex:1;align-content:center;justify-content:center}.swal2-container.swal2-grow-column{flex:1;flex-direction:column}.swal2-container.swal2-grow-column.swal2-bottom,.swal2-container.swal2-grow-column.swal2-center,.swal2-container.swal2-grow-column.swal2-top{align-items:center}.swal2-container.swal2-grow-column.swal2-bottom-left,.swal2-container.swal2-grow-column.swal2-bottom-start,.swal2-container.swal2-grow-column.swal2-center-left,.swal2-container.swal2-grow-column.swal2-center-start,.swal2-container.swal2-grow-column.swal2-top-left,.swal2-container.swal2-grow-column.swal2-top-start{align-items:flex-start}.swal2-container.swal2-grow-column.swal2-bottom-end,.swal2-container.swal2-grow-column.swal2-bottom-right,.swal2-container.swal2-grow-column.swal2-center-end,.swal2-container.swal2-grow-column.swal2-center-right,.swal2-container.swal2-grow-column.swal2-top-end,.swal2-container.swal2-grow-column.swal2-top-right{align-items:flex-end}.swal2-container.swal2-grow-column>.swal2-modal{display:flex!important;flex:1;align-content:center;justify-content:center}.swal2-container.swal2-no-transition{transition:none!important}.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen)>.swal2-modal{margin:auto}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.swal2-container .swal2-modal{margin:0!important}}.swal2-popup{display:none;position:relative;box-sizing:border-box;flex-direction:column;justify-content:center;width:32em;max-width:100%;padding:1.25em;border:none;border-radius:.3125em;background:#fff;font-family:inherit;font-size:1rem}.swal2-popup:focus{outline:0}.swal2-popup.swal2-loading{overflow-y:hidden}.swal2-header{display:flex;flex-direction:column;align-items:center}.swal2-title{position:relative;max-width:100%;margin:0 0 .4em;padding:0;color:#595959;font-size:1.875em;font-weight:600;text-align:center;text-transform:none;word-wrap:break-word}.swal2-actions{display:flex;z-index:1;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;margin:1.25em auto 0}.swal2-actions:not(.swal2-loading) .swal2-styled[disabled]{opacity:.4}.swal2-actions:not(.swal2-loading) .swal2-styled:hover{background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))}.swal2-actions:not(.swal2-loading) .swal2-styled:active{background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2))}.swal2-actions.swal2-loading .swal2-styled.swal2-confirm{box-sizing:border-box;width:2.5em;height:2.5em;margin:.46875em;padding:0;-webkit-animation:swal2-rotate-loading 1.5s linear 0s infinite normal;animation:swal2-rotate-loading 1.5s linear 0s infinite normal;border:.25em solid transparent;border-radius:100%;border-color:transparent;background-color:transparent!important;color:transparent!important;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.swal2-actions.swal2-loading .swal2-styled.swal2-cancel{margin-right:30px;margin-left:30px}.swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after{content:"";display:inline-block;width:15px;height:15px;margin-left:5px;-webkit-animation:swal2-rotate-loading 1.5s linear 0s infinite normal;animation:swal2-rotate-loading 1.5s linear 0s infinite normal;border:3px solid #999;border-radius:50%;border-right-color:transparent;box-shadow:1px 1px 1px #fff}.swal2-styled{margin:.3125em;padding:.625em 2em;box-shadow:none;font-weight:500}.swal2-styled:not([disabled]){cursor:pointer}.swal2-styled.swal2-confirm{border:0;border-radius:.25em;background:initial;background-color:#3085d6;color:#fff;font-size:1.0625em}.swal2-styled.swal2-cancel{border:0;border-radius:.25em;background:initial;background-color:#aaa;color:#fff;font-size:1.0625em}.swal2-styled:focus{outline:0;box-shadow:0 0 0 1px #fff,0 0 0 3px rgba(50,100,150,.4)}.swal2-styled::-moz-focus-inner{border:0}.swal2-footer{justify-content:center;margin:1.25em 0 0;padding:1em 0 0;border-top:1px solid #eee;color:#545454;font-size:1em}.swal2-timer-progress-bar-container{position:absolute;right:0;bottom:0;left:0;height:.25em;overflow:hidden;border-bottom-right-radius:.3125em;border-bottom-left-radius:.3125em}.swal2-timer-progress-bar{width:100%;height:.25em;background:rgba(0,0,0,.2)}.swal2-image{max-width:100%;margin:1.25em auto}.swal2-close{position:absolute;z-index:2;top:0;right:0;align-items:center;justify-content:center;width:1.2em;height:1.2em;padding:0;overflow:hidden;transition:color .1s ease-out;border:none;border-radius:0;background:0 0;color:#ccc;font-family:serif;font-size:2.5em;line-height:1.2;cursor:pointer}.swal2-close:hover{transform:none;background:0 0;color:#f27474}.swal2-close::-moz-focus-inner{border:0}.swal2-content{z-index:1;justify-content:center;margin:0;padding:0;color:#545454;font-size:1.125em;font-weight:400;line-height:normal;text-align:center;word-wrap:break-word}.swal2-checkbox,.swal2-file,.swal2-input,.swal2-radio,.swal2-select,.swal2-textarea{margin:1em auto}.swal2-file,.swal2-input,.swal2-textarea{box-sizing:border-box;width:100%;transition:border-color .3s,box-shadow .3s;border:1px solid #d9d9d9;border-radius:.1875em;background:inherit;box-shadow:inset 0 1px 1px rgba(0,0,0,.06);color:inherit;font-size:1.125em}.swal2-file.swal2-inputerror,.swal2-input.swal2-inputerror,.swal2-textarea.swal2-inputerror{border-color:#f27474!important;box-shadow:0 0 2px #f27474!important}.swal2-file:focus,.swal2-input:focus,.swal2-textarea:focus{border:1px solid #b4dbed;outline:0;box-shadow:0 0 3px #c4e6f5}.swal2-file::-moz-placeholder,.swal2-input::-moz-placeholder,.swal2-textarea::-moz-placeholder{color:#ccc}.swal2-file:-ms-input-placeholder,.swal2-input:-ms-input-placeholder,.swal2-textarea:-ms-input-placeholder{color:#ccc}.swal2-file::-ms-input-placeholder,.swal2-input::-ms-input-placeholder,.swal2-textarea::-ms-input-placeholder{color:#ccc}.swal2-file::placeholder,.swal2-input::placeholder,.swal2-textarea::placeholder{color:#ccc}.swal2-range{margin:1em auto;background:#fff}.swal2-range input{width:80%}.swal2-range output{width:20%;color:inherit;font-weight:600;text-align:center}.swal2-range input,.swal2-range output{height:2.625em;padding:0;font-size:1.125em;line-height:2.625em}.swal2-input{height:2.625em;padding:0 .75em}.swal2-input[type=number]{max-width:10em}.swal2-file{background:inherit;font-size:1.125em}.swal2-textarea{height:6.75em;padding:.75em}.swal2-select{min-width:50%;max-width:100%;padding:.375em .625em;background:inherit;color:inherit;font-size:1.125em}.swal2-checkbox,.swal2-radio{align-items:center;justify-content:center;background:#fff;color:inherit}.swal2-checkbox label,.swal2-radio label{margin:0 .6em;font-size:1.125em}.swal2-checkbox input,.swal2-radio input{margin:0 .4em}.swal2-validation-message{display:none;align-items:center;justify-content:center;padding:.625em;overflow:hidden;background:#f0f0f0;color:#666;font-size:1em;font-weight:300}.swal2-validation-message::before{content:"!";display:inline-block;width:1.5em;min-width:1.5em;height:1.5em;margin:0 .625em;border-radius:50%;background-color:#f27474;color:#fff;font-weight:600;line-height:1.5em;text-align:center}.swal2-icon{position:relative;box-sizing:content-box;justify-content:center;width:5em;height:5em;margin:1.25em auto 1.875em;border:.25em solid transparent;border-radius:50%;font-family:inherit;line-height:5em;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.swal2-icon .swal2-icon-content{display:flex;align-items:center;font-size:3.75em}.swal2-icon.swal2-error{border-color:#f27474;color:#f27474}.swal2-icon.swal2-error .swal2-x-mark{position:relative;flex-grow:1}.swal2-icon.swal2-error [class^=swal2-x-mark-line]{display:block;position:absolute;top:2.3125em;width:2.9375em;height:.3125em;border-radius:.125em;background-color:#f27474}.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left]{left:1.0625em;transform:rotate(45deg)}.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right]{right:1em;transform:rotate(-45deg)}.swal2-icon.swal2-error.swal2-icon-show{-webkit-animation:swal2-animate-error-icon .5s;animation:swal2-animate-error-icon .5s}.swal2-icon.swal2-error.swal2-icon-show .swal2-x-mark{-webkit-animation:swal2-animate-error-x-mark .5s;animation:swal2-animate-error-x-mark .5s}.swal2-icon.swal2-warning{border-color:#facea8;color:#f8bb86}.swal2-icon.swal2-info{border-color:#9de0f6;color:#3fc3ee}.swal2-icon.swal2-question{border-color:#c9dae1;color:#87adbd}.swal2-icon.swal2-success{border-color:#a5dc86;color:#a5dc86}.swal2-icon.swal2-success [class^=swal2-success-circular-line]{position:absolute;width:3.75em;height:7.5em;transform:rotate(45deg);border-radius:50%}.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left]{top:-.4375em;left:-2.0635em;transform:rotate(-45deg);transform-origin:3.75em 3.75em;border-radius:7.5em 0 0 7.5em}.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right]{top:-.6875em;left:1.875em;transform:rotate(-45deg);transform-origin:0 3.75em;border-radius:0 7.5em 7.5em 0}.swal2-icon.swal2-success .swal2-success-ring{position:absolute;z-index:2;top:-.25em;left:-.25em;box-sizing:content-box;width:100%;height:100%;border:.25em solid rgba(165,220,134,.3);border-radius:50%}.swal2-icon.swal2-success .swal2-success-fix{position:absolute;z-index:1;top:.5em;left:1.625em;width:.4375em;height:5.625em;transform:rotate(-45deg)}.swal2-icon.swal2-success [class^=swal2-success-line]{display:block;position:absolute;z-index:2;height:.3125em;border-radius:.125em;background-color:#a5dc86}.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip]{top:2.875em;left:.8125em;width:1.5625em;transform:rotate(45deg)}.swal2-icon.swal2-success [class^=swal2-success-line][class$=long]{top:2.375em;right:.5em;width:2.9375em;transform:rotate(-45deg)}.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-tip{-webkit-animation:swal2-animate-success-line-tip .75s;animation:swal2-animate-success-line-tip .75s}.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long{-webkit-animation:swal2-animate-success-line-long .75s;animation:swal2-animate-success-line-long .75s}.swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right{-webkit-animation:swal2-rotate-success-circular-line 4.25s ease-in;animation:swal2-rotate-success-circular-line 4.25s ease-in}.swal2-progress-steps{align-items:center;margin:0 0 1.25em;padding:0;background:inherit;font-weight:600}.swal2-progress-steps li{display:inline-block;position:relative}.swal2-progress-steps .swal2-progress-step{z-index:20;width:2em;height:2em;border-radius:2em;background:#3085d6;color:#fff;line-height:2em;text-align:center}.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step{background:#3085d6}.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step{background:#add8e6;color:#fff}.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line{background:#add8e6}.swal2-progress-steps .swal2-progress-step-line{z-index:10;width:2.5em;height:.4em;margin:0 -1px;background:#3085d6}[class^=swal2]{-webkit-tap-highlight-color:transparent}.swal2-show{-webkit-animation:swal2-show .3s;animation:swal2-show .3s}.swal2-hide{-webkit-animation:swal2-hide .15s forwards;animation:swal2-hide .15s forwards}.swal2-noanimation{transition:none}.swal2-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.swal2-rtl .swal2-close{right:auto;left:0}.swal2-rtl .swal2-timer-progress-bar{right:0;left:auto}@supports (-ms-accelerator:true){.swal2-range input{width:100%!important}.swal2-range output{display:none}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.swal2-range input{width:100%!important}.swal2-range output{display:none}}@-moz-document url-prefix(){.swal2-close:focus{outline:2px solid rgba(50,100,150,.4)}}@-webkit-keyframes swal2-toast-show{0%{transform:translateY(-.625em) rotateZ(2deg)}33%{transform:translateY(0) rotateZ(-2deg)}66%{transform:translateY(.3125em) rotateZ(2deg)}100%{transform:translateY(0) rotateZ(0)}}@keyframes swal2-toast-show{0%{transform:translateY(-.625em) rotateZ(2deg)}33%{transform:translateY(0) rotateZ(-2deg)}66%{transform:translateY(.3125em) rotateZ(2deg)}100%{transform:translateY(0) rotateZ(0)}}@-webkit-keyframes swal2-toast-hide{100%{transform:rotateZ(1deg);opacity:0}}@keyframes swal2-toast-hide{100%{transform:rotateZ(1deg);opacity:0}}@-webkit-keyframes swal2-toast-animate-success-line-tip{0%{top:.5625em;left:.0625em;width:0}54%{top:.125em;left:.125em;width:0}70%{top:.625em;left:-.25em;width:1.625em}84%{top:1.0625em;left:.75em;width:.5em}100%{top:1.125em;left:.1875em;width:.75em}}@keyframes swal2-toast-animate-success-line-tip{0%{top:.5625em;left:.0625em;width:0}54%{top:.125em;left:.125em;width:0}70%{top:.625em;left:-.25em;width:1.625em}84%{top:1.0625em;left:.75em;width:.5em}100%{top:1.125em;left:.1875em;width:.75em}}@-webkit-keyframes swal2-toast-animate-success-line-long{0%{top:1.625em;right:1.375em;width:0}65%{top:1.25em;right:.9375em;width:0}84%{top:.9375em;right:0;width:1.125em}100%{top:.9375em;right:.1875em;width:1.375em}}@keyframes swal2-toast-animate-success-line-long{0%{top:1.625em;right:1.375em;width:0}65%{top:1.25em;right:.9375em;width:0}84%{top:.9375em;right:0;width:1.125em}100%{top:.9375em;right:.1875em;width:1.375em}}@-webkit-keyframes swal2-show{0%{transform:scale(.7)}45%{transform:scale(1.05)}80%{transform:scale(.95)}100%{transform:scale(1)}}@keyframes swal2-show{0%{transform:scale(.7)}45%{transform:scale(1.05)}80%{transform:scale(.95)}100%{transform:scale(1)}}@-webkit-keyframes swal2-hide{0%{transform:scale(1);opacity:1}100%{transform:scale(.5);opacity:0}}@keyframes swal2-hide{0%{transform:scale(1);opacity:1}100%{transform:scale(.5);opacity:0}}@-webkit-keyframes swal2-animate-success-line-tip{0%{top:1.1875em;left:.0625em;width:0}54%{top:1.0625em;left:.125em;width:0}70%{top:2.1875em;left:-.375em;width:3.125em}84%{top:3em;left:1.3125em;width:1.0625em}100%{top:2.8125em;left:.8125em;width:1.5625em}}@keyframes swal2-animate-success-line-tip{0%{top:1.1875em;left:.0625em;width:0}54%{top:1.0625em;left:.125em;width:0}70%{top:2.1875em;left:-.375em;width:3.125em}84%{top:3em;left:1.3125em;width:1.0625em}100%{top:2.8125em;left:.8125em;width:1.5625em}}@-webkit-keyframes swal2-animate-success-line-long{0%{top:3.375em;right:2.875em;width:0}65%{top:3.375em;right:2.875em;width:0}84%{top:2.1875em;right:0;width:3.4375em}100%{top:2.375em;right:.5em;width:2.9375em}}@keyframes swal2-animate-success-line-long{0%{top:3.375em;right:2.875em;width:0}65%{top:3.375em;right:2.875em;width:0}84%{top:2.1875em;right:0;width:3.4375em}100%{top:2.375em;right:.5em;width:2.9375em}}@-webkit-keyframes swal2-rotate-success-circular-line{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}@keyframes swal2-rotate-success-circular-line{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}@-webkit-keyframes swal2-animate-error-x-mark{0%{margin-top:1.625em;transform:scale(.4);opacity:0}50%{margin-top:1.625em;transform:scale(.4);opacity:0}80%{margin-top:-.375em;transform:scale(1.15)}100%{margin-top:0;transform:scale(1);opacity:1}}@keyframes swal2-animate-error-x-mark{0%{margin-top:1.625em;transform:scale(.4);opacity:0}50%{margin-top:1.625em;transform:scale(.4);opacity:0}80%{margin-top:-.375em;transform:scale(1.15)}100%{margin-top:0;transform:scale(1);opacity:1}}@-webkit-keyframes swal2-animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0);opacity:1}}@keyframes swal2-animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0);opacity:1}}@-webkit-keyframes swal2-rotate-loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes swal2-rotate-loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown){overflow:hidden}body.swal2-height-auto{height:auto!important}body.swal2-no-backdrop .swal2-container{top:auto;right:auto;bottom:auto;left:auto;max-width:calc(100% - .625em * 2);background-color:transparent!important}body.swal2-no-backdrop .swal2-container>.swal2-modal{box-shadow:0 0 10px rgba(0,0,0,.4)}body.swal2-no-backdrop .swal2-container.swal2-top{top:0;left:50%;transform:translateX(-50%)}body.swal2-no-backdrop .swal2-container.swal2-top-left,body.swal2-no-backdrop .swal2-container.swal2-top-start{top:0;left:0}body.swal2-no-backdrop .swal2-container.swal2-top-end,body.swal2-no-backdrop .swal2-container.swal2-top-right{top:0;right:0}body.swal2-no-backdrop .swal2-container.swal2-center{top:50%;left:50%;transform:translate(-50%,-50%)}body.swal2-no-backdrop .swal2-container.swal2-center-left,body.swal2-no-backdrop .swal2-container.swal2-center-start{top:50%;left:0;transform:translateY(-50%)}body.swal2-no-backdrop .swal2-container.swal2-center-end,body.swal2-no-backdrop .swal2-container.swal2-center-right{top:50%;right:0;transform:translateY(-50%)}body.swal2-no-backdrop .swal2-container.swal2-bottom{bottom:0;left:50%;transform:translateX(-50%)}body.swal2-no-backdrop .swal2-container.swal2-bottom-left,body.swal2-no-backdrop .swal2-container.swal2-bottom-start{bottom:0;left:0}body.swal2-no-backdrop .swal2-container.swal2-bottom-end,body.swal2-no-backdrop .swal2-container.swal2-bottom-right{right:0;bottom:0}@media print{body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown){overflow-y:scroll!important}body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown)>[aria-hidden=true]{display:none}body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container{position:static!important}}body.swal2-toast-shown .swal2-container{background-color:transparent}body.swal2-toast-shown .swal2-container.swal2-top{top:0;right:auto;bottom:auto;left:50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-top-end,body.swal2-toast-shown .swal2-container.swal2-top-right{top:0;right:0;bottom:auto;left:auto}body.swal2-toast-shown .swal2-container.swal2-top-left,body.swal2-toast-shown .swal2-container.swal2-top-start{top:0;right:auto;bottom:auto;left:0}body.swal2-toast-shown .swal2-container.swal2-center-left,body.swal2-toast-shown .swal2-container.swal2-center-start{top:50%;right:auto;bottom:auto;left:0;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-center{top:50%;right:auto;bottom:auto;left:50%;transform:translate(-50%,-50%)}body.swal2-toast-shown .swal2-container.swal2-center-end,body.swal2-toast-shown .swal2-container.swal2-center-right{top:50%;right:0;bottom:auto;left:auto;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-left,body.swal2-toast-shown .swal2-container.swal2-bottom-start{top:auto;right:auto;bottom:0;left:0}body.swal2-toast-shown .swal2-container.swal2-bottom{top:auto;right:auto;bottom:0;left:50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-end,body.swal2-toast-shown .swal2-container.swal2-bottom-right{top:auto;right:0;bottom:0;left:auto}body.swal2-toast-column .swal2-toast{flex-direction:column;align-items:stretch}body.swal2-toast-column .swal2-toast .swal2-actions{flex:1;align-self:stretch;height:2.2em;margin-top:.3125em}body.swal2-toast-column .swal2-toast .swal2-loading{justify-content:center}body.swal2-toast-column .swal2-toast .swal2-input{height:2em;margin:.3125em auto;font-size:1em}body.swal2-toast-column .swal2-toast .swal2-validation-message{font-size:1em} .container-box-ep { margin: 0px auto; background-color: #1E1E1E; color: #979797; width: 100%; min-height: 100vh; object-fit: contain; padding: 20px; margin-top: 70px; } .form-group-ep { margin-bottom: 13px; } .form-control-ep, .react-datepicker__input-container > input { display: block; width: 100%; padding: 0.375rem; padding-inline: 10px; font-size: 12px; font-weight: 400; line-height: 1.5; border: 1px solid #8F8F8F; color: #fff !important; position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; background: 0 0 !important; height: 38px !important; outline: none !important; border-radius: 0.25rem; } .form-control-ep-textarea { display: block; width: 100%; padding: 0.375rem; padding-inline: 10px; font-size: 12px; font-weight: 400; line-height: 1.5; border: 1px solid #8F8F8F; color: #fff !important; position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; background: 0 0 !important; height: 120px !important; outline: none !important; border-radius: 0.25rem; } .invalid-ep { border: 2px solid #F63F54 !important; } .form-feedback-ep { color: var(--hot-red-medium, #F63F54); font-family: Open Sans; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; margin-top: 4px; } .form-control-ep::placeholder, .react-datepicker__input-container > input::placeholder { font-size: 12px; } .form-control-ep:hover, .react-datepicker__input-container > input:hover { background: transparent; } .form-control-ep-textarea::placeholder { font-size: 12px; } .form-control-ep-textarea:hover { background: transparent; } .form-label-ep { color: #fff; font-size: 12px; font-weight: 700; } .country-flag-ep { width: 20px; margin-right: 5px; } .none-right-border-radius-ep { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .none-left-border-radius-ep { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .no-border-right-ep { border-right: none !important; } .no-border-left-ep { border-left: none !important; } .react-datepicker, .react-datepicker__header { background-color: #323232; border-color: #282828; } .react-datepicker .react-datepicker__day--selected, .react-datepicker__header .react-datepicker__day--selected { background-color: #0047ff; } .react-datepicker .form-date-ep, .react-datepicker__header .form-date-ep { display: block; width: 100%; padding: 0.375rem; padding-inline: 10px; font-size: 12px; font-weight: 400; line-height: 1.5; border: 1px solid #8F8F8F; color: #fff !important; position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; background: 0 0 !important; height: 38px !important; outline: none !important; border-radius: 0.25rem; } .date-picker-container-ep { position: relative; display: flex; align-items: center; } .calendar-icon-ep { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: #fff; cursor: pointer; } .form-control-ep > option, .react-datepicker__input-container > input > option { background-color: #171717; border-color: #171717; } .form-textarea-ep { padding: 0.375rem; padding-inline: 10px; display: block; width: 100%; font-size: 12px; font-weight: 400; line-height: 1.5; border: 1px solid #8F8F8F; color: #fff !important; position: relative; flex: 1 1 auto; margin-bottom: 0; background: 0 0 !important; height: 100px !important; outline: none !important; border-radius: 0.25rem; word-wrap: break-word; } .form-textarea-ep:focus { outline: none !important; } .form-textarea-ep::placeholder { font-size: 12px; } .react-datepicker__day, .react-datepicker__day-name, .react-datepicker__current-month, .react-datepicker__year-read-view--selected-year { color: #ffffff; } .react-datepicker__year-read-view--selected-year { margin: 5px; } .react-datepicker__day--selected { background-color: #DB2828; } .react-datepicker__input-container > input { width: 100%; border-bottom-width: 1px; } .react-datepicker__input-container > input:hover { background: transparent; } .profile-photo-container { text-align: center; margin-bottom: 3rem; } .profile-photo { border-radius: 100%; width: 100px; height: 100px; margin: 0 auto; margin-bottom: 10px; position: relative; } .edit-profile-photo { font-size: 12px; color: #05B5F5; } .edit-profile-photo:hover { cursor: pointer; } .append-input-ep { border: 1px solid #8F8F8F; border-radius: 0.25rem; } .append-input-ep .none-style { background: none; border: 0; color: #fff; font-size: 12px; } .dropdown-gender-ep { margin-top: 5px; padding: 5px; background-color: #f9f9f9; width: 100%; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; font-size: 12px; color: #fff; background-color: #323232; border-radius: 4px; } .dropdown-gender-ep .gender-option { cursor: pointer; padding: 5px; } .change-email { color: #05B5F5; font-weight: 600; cursor: pointer; } .btn-save-ep { width: 100%; margin-top: 30px; background-color: #0079FF !important; border: 1px solid transparent; border-radius: 8px; padding: 10px; font-size: 12px; color: #fff; font-weight: 600; } .btn-save-ep-disabled { width: 100%; margin-top: 30px; background-color: #8F8F8F !important; border: 1px solid transparent; border-radius: 8px; padding: 10px; font-size: 12px; color: #fff; font-weight: 600; } .nickname-alert-ep { display: flex; justify-content: space-between; gap: 8px; align-items: center; background-color: #FFD789; padding: 12px; font-size: 12px; color: #946200; margin-top: 5px; border-radius: 4px; } .modal-container-ep { background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; right: 0; transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); } .bottom-profile-modal-ep { background-color: #323232; color: #fff; position: fixed; bottom: 0; width: 100%; border-top-left-radius: 16px; border-top-right-radius: 16px; padding: 24px 0 12px 0; z-index: 99; } .header-modal-ep { display: flex; justify-content: space-between; align-items: center; padding-inline: 15px; font-size: 14px; font-weight: 700; color: #fff; } .header-modal-ep .close-icon-ep { font-size: 20px; } .body-modal-ep { padding: 8px 0 8px 0; margin-top: 10px; font-size: 12px; font-weight: 600; cursor: pointer; padding-inline: 15px; } .body-modal-ep .li-btn-ep { margin-bottom: 10px; padding: 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; font-size: 14px; letter-spacing: 0.5px; color: #D8D8D8; font-weight: 400; } .body-modal-ep .li-btn-ep .left-side-title-ep { display: flex; gap: 12px; align-items: center; } .container-box-cp { margin: 0px auto; background-color: #282828; color: #979797; width: 90%; height: 500px; object-fit: contain; border-radius: 30px; padding: 20px; margin-top: 70px; } .form-control-cp { background: transparent; border-color: #495057; color: #eee !important; } .form-control-cp:hover { background: transparent; } .invalid-border-color { border-color: #dc3545 !important; } .append-input { background: none; border: 0.5px solid #495057; border-left: none; color: #ffffff; } .inpt-form { background: transparent; } .inpt-form.right-none { border-right: none; } .right-border-radius { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .none-border-left { border-left: 0; } .none-border-right { border-right: 0; } .input-phone { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .checkmark-container { display: flex !important; align-items: center !important; justify-content: center !important; } .checkmark { width: 156px; height: 156px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #4E8D05; animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both !important; } .checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #4E8D05; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } .checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; } @keyframes stroke { 100% { stroke-dashoffset: 0; } } @keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } } @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 80px #4E8D05; } } .fas_fa-eye { background: url("https://api.iconify.design/fa-eye.svg?color=%237f8c8d") no-repeat center center; } .fas_fa-eye-slash { background: url("https://api.iconify.design/fa-eye-slash.svg?color=%23495057") no-repeat center center; } .container-box-c { margin: 0px auto; background-color: #282828; color: #979797; width: 90%; height: 500px; object-fit: contain; border-radius: 30px; padding: 20px; margin-top: 70px; } .form-control-c { border-radius: 0 !important; border-top: none !important; border-left: none !important; border-right: none !important; border-bottom-width: 1.5px !important; background: transparent !important; border-color: #495057 !important; color: #eee !important; } .form-control-c:hover { box-shadow: none !important; background: transparent; } .form-text-c { text-align: left; color: #eee !important; font-size: 12px; } .form-text-c ul { padding-left: 15px; } .form-label-c { color: #eee; } .addon-c, .addon-left-c { padding: 6px; border-color: #495057; background: transparent; color: #eee; } .addon-left-c { border-right-color: transparent; } .login-box { margin: 0px auto; background-color: #282828; color: #979797; width: 90%; height: 500px; object-fit: contain; border-radius: 30px; padding: 20px; } .form-control { display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.375rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 0.5px solid #495057; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .login-box > h3 { text-align: center; } Input { background-color: #282828 !important; color: #ffffff !important; } Input::placeholder { color: #a8a8a8 !important; } .btn-primary { background-color: #DB2828; border-color: #DB2828; width: 100%; } .form-text { text-align: center; } .form-text a { color: inherit; } .form-text p a { color: #DB2828; } .view-raw { padding-right: calc(1.5em + 0.75rem); background-repeat: no-repeat; background-position: center right calc(0.375em + 0.1875rem); background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); border: 0.5px solid #495057; } #password { border-right-color: transparent; } .block-btn { width: 100%; } .otp-input { text-align: center !important; width: 100% !important; margin-left: -5px; } .otp-input input { margin: 5px; border-radius: 0 !important; border-color: transparent !important; background-color: #282828 !important; font-family: 'Open Sans' !important; font-style: normal !important; font-weight: 500 !important; font-size: 24px !important; color: #8F8F8F !important; caret-color: #8F8F8F !important; } .otp-form { display: grid; grid-template-columns: repeat(6, 50px); justify-content: center; } .otp-input-2 { margin: 5px; border-radius: 0 !important; border-top: none; border-right: none; border-left: none; border-bottom: 3px solid #4A4A4A; background-color: #282828 !important; font-family: 'Open Sans' !important; font-style: normal !important; font-weight: 500 !important; font-size: 24px !important; color: #8F8F8F !important; caret-color: #8F8F8F !important; text-align: center; } .otp-input-2:focus { outline: none; } .otp-input-invalid-2 { border-bottom: 3px solid #F63F54 !important; } .otp-input-valid input { border-bottom: 3px solid #4A4A4A !important; } .otp-input-invalid input { border-bottom: 3px solid #F63F54 !important; } .loading-modal { margin: auto; max-width: 115px; padding: 15px 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.8); } .loading-wrapper { text-align: center; } .loading-text { margin-top: 12px; color: #D8D8D8; font-weight: 400; } .input-group { margin-top: 0 !important; } .container-box-ff { margin: 0px auto; background-color: #282828; color: #ffffff; width: 100%; height: 500px; object-fit: contain; border-radius: 30px; padding: 20px; margin-top: 70px; } .form-control-ff, .react-datepicker__input-container > input { border-radius: 0 !important; background: transparent; border-color: #495057; border-top: none !important; border-left: none !important; border-right: none !important; padding: 2px; color: #a8a8a8 !important; } .form-control-ff:hover, .react-datepicker__input-container > input:hover { background: transparent; } #notes ul { padding: 15px; color: #ffffff; font-size: 11px; } .react-datepicker, .react-datepicker__header { background-color: #282828; border-color: #282828; } .form-control-ff > option, .react-datepicker__input-container > input > option { background-color: #171717; border-color: #171717; } .react-datepicker__day, .react-datepicker__day-name, .react-datepicker__current-month, .react-datepicker__year-read-view--selected-year { color: #ffffff; } .react-datepicker__year-read-view--selected-year { margin: 5px; } .react-datepicker__day--selected { background-color: #DB2828; } .react-datepicker__input-container > input { width: 100%; border-bottom-width: 1px; } .react-datepicker__input-container > input:hover { background: transparent; } .none-border-radius { border-radius: 0 !important; } .rplus-border-bottom { border-right: 0 !important; border-top: 0 !important; } .text-input { height: 200px !important; } .button-container { position: fixed; bottom: 70px; left: 40px; right: 40px; } .max-char { margin-top: 13px; color: #fff; font-size: 11px; } .text-textarea { word-wrap: break-word; width: 90%; padding: 5px; } .text-textarea:focus { outline: none !important; } .cancel-icon { color: #fff; } .container-box-c { margin: 0px auto; background-color: #282828; color: #979797; width: 100% !important; height: 500px; object-fit: contain; border-radius: 30px; padding: 20px; margin-top: 70px; } .header-vo { color: #fff; font-size: 14px; font-weight: 600; } .otp-form-e { display: grid; grid-template-columns: repeat(6, 50px); justify-content: center; } .otp-input-2-e { margin: 5px; border-radius: 0 !important; border-top: none; border-right: none; border-left: none; border-bottom: 3px solid #4A4A4A; background-color: #282828 !important; font-family: 'Open Sans' !important; font-style: normal !important; font-weight: 500 !important; font-size: 24px !important; color: #8F8F8F !important; caret-color: #8F8F8F !important; text-align: center; } .otp-input-2-e:focus { outline: none; } .otp-input-invalid-2-e { border-bottom: 3px solid #F63F54 !important; } .otp-input-c { text-align: center !important; width: 100% !important; margin-left: -5px; } .otp-input-c input { margin: 5px; border-radius: 0 !important; border-color: transparent !important; background-color: #282828 !important; border-bottom-color: white !important; color: white !important; caret-color: white !important; } .loading-modal { margin: auto; max-width: 115px; padding: 15px 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.8); font-size: 12px; } .loading-wrapper { text-align: center; } .loading-text { margin-top: 12px; color: #D8D8D8; font-weight: 400; } .input-group { margin-top: 0 !important; } .action-element-vo { margin-top: 24px; } .modal-container { background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; right: 0; transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); } .title-modal { font-size: 16px; font-weight: 700; color: #FCFCFC; } .desc-create { font-weight: 400; font-size: 12px; letter-spacing: 0.1px; color: #8F8F8F; } .buttons-create { padding: 8px 0 8px 0; } .buttons-create .li-btn-create { margin-bottom: 10px; padding: 5px 0 5px 0; } .buttons-create .li-btn-create .title { display: flex; justify-content: space-between; font-size: 14px; color: #E9E9E9; font-weight: 400; } .body-modal-cb { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 16px; } .body-modal-cb .cancel-cb-button { background-color: #fff; border: none; border-radius: 8px; padding: 12px 24px; font-size: 12px; font-weight: 600; color: #646464; } .body-modal-cb .cancel-cb-button:focus { outline: none; } .body-modal-cb .continue-cb-button { background-color: #F63F54; border: none; border-radius: 8px; padding: 12px 24px; font-size: 12px; font-weight: 600; color: #fff; } .body-modal-cb .continue-cb-button:focus { outline: none; } .bottom-profile-popup { background-color: #323232; color: #fff; position: fixed; bottom: 0; width: 100%; border-top-left-radius: 16px; border-top-right-radius: 16px; padding: 24px; z-index: 99; } .ReactCrop { position: relative; display: inline-block; cursor: crosshair; overflow: hidden; max-width: 100%; } .ReactCrop:focus { outline: none; } .ReactCrop--disabled, .ReactCrop--locked { cursor: inherit; } .ReactCrop__image { display: block; max-width: 100%; touch-action: manipulation; } .ReactCrop__crop-selection { position: absolute; top: 0; left: 0; transform: translate3d(0, 0, 0); box-sizing: border-box; cursor: move; box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5); touch-action: manipulation; border: 1px solid; border-image-source: url("data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw=="); border-image-slice: 1; border-image-repeat: repeat; } .ReactCrop--disabled .ReactCrop__crop-selection { cursor: inherit; } .ReactCrop--circular-crop .ReactCrop__crop-selection { border-radius: 50%; box-shadow: 0px 0px 1px 1px white, 0 0 0 9999em rgba(0, 0, 0, 0.5); } .ReactCrop--invisible-crop .ReactCrop__crop-selection { display: none; } .ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after, .ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after { content: ''; display: block; position: absolute; background-color: rgba(255, 255, 255, 0.4); } .ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after { width: 1px; height: 100%; } .ReactCrop__rule-of-thirds-vt::before { left: 33.3333%; left: calc(100% / 3); } .ReactCrop__rule-of-thirds-vt::after { left: 66.6666%; left: calc(100% / 3 * 2); } .ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after { width: 100%; height: 1px; } .ReactCrop__rule-of-thirds-hz::before { top: 33.3333%; top: calc(100% / 3); } .ReactCrop__rule-of-thirds-hz::after { top: 66.6666%; top: calc(100% / 3 * 2); } .ReactCrop__drag-handle { position: absolute; } .ReactCrop__drag-handle::after { position: absolute; content: ''; display: block; width: 10px; height: 10px; background-color: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.7); box-sizing: border-box; outline: 1px solid transparent; } .ReactCrop .ord-nw { top: 0; left: 0; margin-top: -5px; margin-left: -5px; cursor: nw-resize; } .ReactCrop .ord-nw::after { top: 0; left: 0; } .ReactCrop .ord-n { top: 0; left: 50%; margin-top: -5px; margin-left: -5px; cursor: n-resize; } .ReactCrop .ord-n::after { top: 0; } .ReactCrop .ord-ne { top: 0; right: 0; margin-top: -5px; margin-right: -5px; cursor: ne-resize; } .ReactCrop .ord-ne::after { top: 0; right: 0; } .ReactCrop .ord-e { top: 50%; right: 0; margin-top: -5px; margin-right: -5px; cursor: e-resize; } .ReactCrop .ord-e::after { right: 0; } .ReactCrop .ord-se { bottom: 0; right: 0; margin-bottom: -5px; margin-right: -5px; cursor: se-resize; } .ReactCrop .ord-se::after { bottom: 0; right: 0; } .ReactCrop .ord-s { bottom: 0; left: 50%; margin-bottom: -5px; margin-left: -5px; cursor: s-resize; } .ReactCrop .ord-s::after { bottom: 0; } .ReactCrop .ord-sw { bottom: 0; left: 0; margin-bottom: -5px; margin-left: -5px; cursor: sw-resize; } .ReactCrop .ord-sw::after { bottom: 0; left: 0; } .ReactCrop .ord-w { top: 50%; left: 0; margin-top: -5px; margin-left: -5px; cursor: w-resize; } .ReactCrop .ord-w::after { left: 0; } .ReactCrop__disabled .ReactCrop__drag-handle { cursor: inherit; } .ReactCrop__drag-bar { position: absolute; } .ReactCrop__drag-bar.ord-n { top: 0; left: 0; width: 100%; height: 6px; margin-top: -3px; } .ReactCrop__drag-bar.ord-e { right: 0; top: 0; width: 6px; height: 100%; margin-right: -3px; } .ReactCrop__drag-bar.ord-s { bottom: 0; left: 0; width: 100%; height: 6px; margin-bottom: -3px; } .ReactCrop__drag-bar.ord-w { top: 0; left: 0; width: 6px; height: 100%; margin-left: -3px; } .ReactCrop--new-crop .ReactCrop__drag-bar, .ReactCrop--new-crop .ReactCrop__drag-handle, .ReactCrop--fixed-aspect .ReactCrop__drag-bar { display: none; } .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w { display: none; } @media (pointer: coarse) { .ReactCrop .ord-n, .ReactCrop .ord-e, .ReactCrop .ord-s, .ReactCrop .ord-w { display: none; } .ReactCrop__drag-handle { width: 24px; height: 24px; } } .container-box-crop { margin: 0px auto; background-color: #1E1E1E; color: #979797; width: 100%; min-height: 100vh; object-fit: contain; } .ReactCrop { width: 100%; position: fixed; top: 45%; transform: translateY(-50%); } .crop-image .ReactCrop__image { width: 100%; } .btn-container-crop { position: fixed; z-index: 100; bottom: 60px; left: 0; right: 0; background-color: #323232; color: #fff; font-size: 14px; font-weight: 600; padding: 16px; display: flex; justify-content: space-between; letter-spacing: 0.5px; } /* Styles for migrated profile-mobileview components */ .profile-mv-container { background-color: #000; min-height: 100vh; width: 100vw; color: #fff; } .bg-black { background-color: #000000 !important; } .bg-\[\#323232\] { background-color: #323232 !important; } .bg-\[\#1a1a1a\] { background-color: #1a1a1a !important; } .bg-\[\#0079FF\] { background-color: #0079FF !important; } .bg-\[\#F63F54\] { background-color: #F63F54 !important; } .bg-\[\#FFFFFF\] { background-color: #FFFFFF !important; } .text-white { color: #ffffff !important; } .text-\[\#8F8F8F\] { color: #8F8F8F !important; } .text-\[\#E9E9E9\] { color: #E9E9E9 !important; } .text-\[\#D8D8D8\] { color: #D8D8D8 !important; } .text-\[\#FCFCFC\] { color: #FCFCFC !important; } .text-\[\#646464\] { color: #646464 !important; } .text-\[\#F63F54\] { color: #F63F54 !important; } .text-\[\#FFFFFF\] { color: #FFFFFF !important; } .flex { display: flex !important; } .flex-col { flex-direction: column !important; } .flex-row { flex-direction: row !important; } .items-center { align-items: center !important; } .justify-center { justify-content: center !important; } .justify-between { justify-content: space-between !important; } .justify-start { justify-content: flex-start !important; } .grid { display: grid !important; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .gap-1 { gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; } .gap-3 { gap: 0.75rem !important; } .gap-4 { gap: 1rem !important; } .gap-x-2 { column-gap: 0.5rem !important; } .gap-x-3 { column-gap: 0.75rem !important; } .gap-x-4 { column-gap: 1rem !important; } .gap-x-\[7px\] { column-gap: 7px !important; } .gap-\[28px\] { gap: 28px !important; } .fixed { position: fixed !important; } .relative { position: relative !important; } .absolute { position: absolute !important; } .top-0 { top: 0 !important; } .right-0 { right: 0 !important; } .left-0 { left: 0 !important; } .bottom-0 { bottom: 0 !important; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .z-50 { z-index: 50 !important; } .z-\[999999\] { z-index: 999999 !important; } .w-full { width: 100% !important; } .w-screen { width: 100vw !important; } .min-h-screen { min-height: 100vh !important; } .h-screen { height: 100vh !important; } .w-3\/4 { width: 75% !important; } .w-11\/12 { width: 91.666667% !important; } .w-\[110px\] { width: 110px !important; } .h-\[110px\] { height: 110px !important; } .w-\[44\%\] { width: 44% !important; } .w-\[12\%\] { width: 12% !important; } .w-9 { width: 2.25rem !important; } .h-7 { height: 1.75rem !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } .px-12 { padding-left: 3rem !important; padding-right: 3rem !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-3\.5 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; } .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-14 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } .p-4 { padding: 1rem !important; } .p-6 { padding: 1.5rem !important; } .p-8 { padding: 2rem !important; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 0.75rem !important; } .mt-4 { margin-top: 1rem !important; } .mt-6 { margin-top: 1.5rem !important; } .mt-8 { margin-top: 2rem !important; } .mt-10 { margin-top: 2.5rem !important; } .mb-4 { margin-bottom: 1rem !important; } .mb-6 { margin-bottom: 1.5rem !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .rounded-md { border-radius: 0.375rem !important; } .rounded-lg { border-radius: 0.5rem !important; } .rounded-xl { border-radius: 0.75rem !important; } .rounded-2xl { border-radius: 1rem !important; } .rounded-3xl { border-radius: 1.5rem !important; } .rounded-full { border-radius: 9999px !important; } .rounded-t-3xl { border-top-left-radius: 1.5rem !important; border-top-right-radius: 1.5rem !important; } .border-2 { border-width: 2px !important; } .border-white { border-color: #ffffff !important; } .font-normal { font-weight: 400 !important; } .font-semibold { font-weight: 600 !important; } .font-bold { font-weight: 700 !important; } .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; } .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; } .text-base { font-size: 1rem !important; line-height: 1.5rem !important; } .text-center { text-align: center !important; } .cursor-pointer { cursor: pointer !important; } .overflow-hidden { overflow: hidden !important; } .visible { visibility: visible !important; display: block !important; } .hidden { visibility: hidden !important; display: none !important; } .aspect-\[9\/16\] { aspect-ratio: 9 / 16 !important; } .line-clamp-2 { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .content-center { align-content: center !important; } .gap-\[36px\], .gap-36px { gap: 36px !important; } .gap-\[28px\] { gap: 28px !important; } .gap-8 { gap: 2rem !important; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite !important; } .fas_fa-eye { background: url("https://api.iconify.design/fa-eye.svg?color=%237f8c8d") no-repeat center center; } .fas_fa-eye-slash { background: url("https://api.iconify.design/fa-eye-slash.svg?color=%23495057") no-repeat center center; } .container-box-c { margin: 0px auto; background-color: #1E1E1E; color: #979797; width: 100%; height: 100vh; object-fit: contain; border-radius: 30px; padding: 20px; padding-top: 80px; padding-bottom: 70px; } .border-only-bottom { border-top: none !important; border-left: none !important; border-right: none !important; } .form-control-cp { display: block; width: 100%; padding: 0.375rem 0.375rem; font-size: 1rem; font-weight: 400; line-height: 1.5; border: 0.5px solid #495057; color: #ffffff !important; position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; background: transparent !important; height: 38px !important; outline: none !important; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .form-control-cp::placeholder { font-size: 12px; } .form-control-cp:hover { background: transparent; } .is-invalid { border-color: #dc3545 !important; } .default-input-handling { width: 100%; margin-top: 0.25rem; font-size: 80%; color: #fff; } .addon-c, .addon-left-c, .addon-right-c { padding: 3px; border-width: 0.5px; border-color: #495057; } .addon-left-c { border-right-color: transparent; } .addon-right-c { border-left-color: transparent; } .addon-left-input-c { border-left-color: transparent !important; } .addon-right-input-c { border-right-color: transparent !important; } .view-raw-c { padding-right: calc(1.5em + 0.75rem); background-repeat: no-repeat !important; background-position: center right calc(0.375em + 0.1875rem) !important; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important; border: 0.5px solid #495057; border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .label-c { color: #fff; font-size: 14px; font-weight: 700; } .right-border-radius { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .none-border-left { border-left: 0 !important; } .none-border-right { border-right: 0 !important; } .warning-text { margin-top: 2rem; font-size: 12px; color: #fff; } .button-container { margin: 20px; position: fixed; z-index: 100; bottom: 60px; left: 0; right: 0; } .btn-change-password { background-color: #0079ff !important; width: 100%; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 400; padding: 10px; } .btn-change-password-disabled { background-color: #969696 !important; width: 100%; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 400; padding: 10px; } .grecaptcha-badge { margin-bottom: 9rem !important; } .container-box-c { margin: 0px auto; background-color: #282828; color: #979797; width: 100% !important; height: 500px; object-fit: contain; border-radius: 30px; padding: 20px; margin-top: 70px; } .otp-form-e { display: grid; grid-template-columns: repeat(6, 50px); justify-content: center; } .otp-input-2-e { margin: 5px; border-radius: 0 !important; border-top: none; border-right: none; border-left: none; border-bottom: 3px solid #4A4A4A; background-color: #282828 !important; font-family: 'Open Sans' !important; font-style: normal !important; font-weight: 500 !important; font-size: 24px !important; color: #8F8F8F !important; caret-color: #8F8F8F !important; text-align: center; } .otp-input-2-e:focus { outline: none; } .otp-input-invalid-2-e { border-bottom: 3px solid #F63F54 !important; } .otp-input-c { text-align: center !important; width: 100% !important; margin-left: -5px; } .otp-input-c input { margin: 5px; border-radius: 0 !important; border-color: transparent !important; background-color: #282828 !important; border-bottom-color: white !important; color: white !important; caret-color: white !important; } .loading-modal { margin: auto; max-width: 115px; padding: 15px 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.8); font-size: 12px; } .loading-wrapper { text-align: center; } .loading-text { margin-top: 12px; color: #D8D8D8; font-weight: 400; } .input-group { margin-top: 0 !important; } .fas_fa-eye { background: url("https://api.iconify.design/fa-eye.svg?color=%237f8c8d") no-repeat center center; } .fas_fa-eye-slash { background: url("https://api.iconify.design/fa-eye-slash.svg?color=%23495057") no-repeat center center; } .login-box { margin: 0px auto; background-color: #282828; color: #fff !important; width: 100%; height: auto; object-fit: contain; border-radius: 30px; padding: 20px; font-size: 12px; font-weight: 700; } .tab-pane { margin-top: 20px; } .form-control { display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.375rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 0.5px solid #495057 !important; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .login-box > h3 { text-align: center; } Input { background-color: #282828 !important; color: #ffffff !important; } Input::placeholder { color: #a8a8a8 !important; font-size: 12px; font-weight: 400; } .group-form { margin-bottom: 16px; } .form-text { text-align: center; } .form-text a { color: inherit; } .form-text p a { color: #DB2828; } .view-raw { padding-right: calc(1.5em + 0.75rem); background-repeat: no-repeat; background-position: center right calc(0.375em + 0.1875rem); background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); border: 0.5px solid #495057; } #password { border-right-color: transparent; } .btn-next-signup { width: 100%; margin-top: 10px; background-color: #0079FF !important; border: 1px solid transparent; border-radius: 4px; } .btn-next-signup-disabled { width: 100%; margin-top: 20px; background-color: #8F8F8F !important; border: 1px solid transparent; border-radius: 4px; } .block-btn { width: 100%; } .nav-signup-item .nav-item { margin-bottom: -1px; width: 50%; text-align: center; color: #fff !important; } .nav-signup-item a { color: #fff !important; } .frmInput1 { padding-top: 20px; } .inpt-form { background: transparent; height: 38px !important; } .inpt-form.left-none { border-left: none; } .register-input { display: block; width: 100%; padding: 0.375rem 0.375rem; font-size: 1rem; font-weight: 400; line-height: 1.5; border: 0.5px solid #495057 !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; color: #ffffff !important; position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; background: transparent; height: 38px !important; outline: none !important; } .register-input.left-none { border: 0.5px solid #495057; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .register-input.right-none { border: 0.5px solid #495057; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .nav-tabs .nav-item { margin-bottom: -1px; width: 50%; text-align: center; color: #495057 !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #fff; background-color: transparent; border-bottom: 3px solid #0079FF; } .nav-tabs .nav-link { border: 1px none transparent; } .addon, .addon-left, .addon-right { padding: 3px; border-width: 0.5px; border-color: #495057 !important; } .addon-left { border-right-color: transparent; } .addon-right { border-left-color: transparent; } .addon-left-input { border-left-color: transparent !important; } .addon-right-input { border-right-color: transparent !important; } .block-btn { width: 100%; } .append-input-phone { background: none; border: 0.5px solid #495057 !important; border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; color: #ffffff; font-size: 12px; gap: 5px; margin-left: 1px; } .error-handle { margin-top: 10px !important; } .form-focus { border: 1px solid #fff !important; } .valid-border-color { border-color: #495057 !important; } .invalid-border-color { border-color: #dc3545 !important; } .default-invalid-text { margin-top: 5px; font-weight: 400; color: #fff !important; } .default-invalid-text { margin-top: 5px; font-weight: 400; } .red-invalid-text { color: #F63F54 !important; margin-top: 5px; font-weight: 400; } .all-border-radius { border-radius: 0.25rem !important; } .right-border-radius { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .left-border-radius { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } .login-direct { margin: 20px; font-size: 12px; font-weight: 400; } .login-direct a { color: #05B5F5; font-weight: 700; } .horizontal-border { border: 1px solid #3A3A3A; margin-bottom: 20px; } .terms-conditions { margin-top: 20px; font-size: 12px; font-weight: 400; } .terms-conditions a { color: #05B5F5; font-weight: 700; } .dropdown-country { margin-top: 5px; background-color: #f9f9f9; width: 100%; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 1; color: #fff; background-color: #4A4A4A; border-radius: 4px; } .filter-country { background-color: #747474; color: #fff; height: 34px; border-radius: 8px; margin-bottom: 15px; } .filter-country .search-icon { margin: 5px; } .filter-country input { background-color: #747474 !important; color: #fff !important; height: 35px !important; border-left: none !important; font-size: 12px !important; } .text-white { font-weight: 700; } .country-not-found { text-align: center; margin-top: 15px; } .tab-content { margin-bottom: 0px !important; } .input-group { margin-top: 0 !important; } .country-item-info { margin-bottom: 15px; font-size: 12px; font-weight: 400; display: flex; justify-content: space-between; overflow-y: scroll; } .country-item-info .name { color: #8F8F8F; margin-inline: 10px; } .country-item-info .phone-code { color: #fff; } .country-item-info .arrow { font-size: 14px; } .country-list-info { max-height: 400px; overflow: scroll; } .nav-container { padding: 8px 16px !important; } .nav-signup-item .nav-item { margin-bottom: -1px; width: 50%; text-align: center; color: #fff important; } .frmInput1 { padding-top: 40px; } .inpt-form { background: transparent; } .nav-tabs .nav-item { margin-bottom: -1px; width: 50%; text-align: center; color: #fff !important; } .nav-home-container { color: #fff !important; } .nav-transparent { background: linear-gradient(rgba(0, 0, 0, 0.54) 0px, rgba(0, 0, 0, 0.03) 65%, rgba(27, 27, 28, 0) 69%, rgba(235, 233, 249, 0)) !important; box-shadow: none; } .back-arrow-transparent { background-color: rgba(0, 0, 0, 0.5); border-radius: 100%; width: 35px; height: 35px; padding-left: 5px; } .wrapper { margin-bottom: 30px; } .login-box { margin: 0px auto; background-color: #282828; color: #979797; width: 90%; height: auto; object-fit: contain; border-radius: 30px; padding: 20px; } .btn-primary { background-color: #DB2828; border-color: #DB2828; width: 100%; } .error-alert { width: 100%; background-color: #F63F54 !important; border-radius: 4px; margin-top: 25px; padding: 6px 10px; display: flex; gap: 10px; font-size: 12px; font-weight: 400; } .btn-save-interest { width: 100%; background-color: #0079FF !important; border: 1px solid transparent; border-radius: 8px; margin-top: 25px; margin-bottom: 50px; } .btn-save-interest-grey { width: 100%; background-color: #8F8F8F !important; border: 1px solid transparent; border-radius: 8px; margin-top: 25px; margin-bottom: 50px; } .interest { background-color: #323232; font-size: 12px; border-radius: 24px; color: #969696; padding: 12px 24px; margin: 5px; border: none !important; } .interest-selected { background-color: #0079FF; color: #fff; border: none !important; } .interest:focus { outline: none; } .interest-selected:focus { outline: none; } .btn-secondary:hover { box-shadow: none; } div.col-6 { padding-left: 5px !important; padding-right: 5px !important; } .alert-header { font-size: 10px !important; } .alert-content { font-size: 12px !important; } .swal2-content { font-size: 12px !important; } .vjs-big-play-button { z-index: 1; background: none !important; border: none !important; transform: scale(1.5); } .vjs-rplus-player { width: 100%; min-height: 180px; } .vjs-rplus-player video { width: 100%; } .rplus-title-bar { visibility: hidden; position: absolute; top: 0; text-align: center; width: 100%; padding: 20px; background: #020024; background: linear-gradient(180deg, #020024 0%, rgba(0, 0, 0, 0) 100%); transition: visibility .1s; } .rplus-play-toggle { position: absolute !important; height: 50px; width: 50px; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; transition: visibility .1s; } .rplus-button-mute { position: absolute !important; top: 31px; left: 10px; height: auto !important; width: 9em !important; padding: 5px !important; background: #282828 !important; font-size: 14px !important; border-radius: 5px !important; display: flex; justify-content: center; align-items: center; transition: visibility .1s; } .rplus-progress-control { width: 100% !important; z-index: 999 !important; top: -2px !important; } .rplus-progress-control .vjs-progress-holder { margin: 0 !important; background: #939393 !important; height: 4px !important; } .rplus-progress-control .vjs-progress-holder .vjs-load-progress { background: #fa262f !important; } .rplus-progress-control .vjs-progress-holder .vjs-play-progress { background: #fa262f !important; } .rplus-progress-control .vjs-progress-holder .vjs-play-progress::before { content: '' !important; } .rplus-progress-control .vjs-progress-holder .vjs-play-progress:hover::after { content: '' !important; } .vjs-fullscreen-control { order: 1; } .vjs-quality-selector { order: 1; } .vjs-control-bar { z-index: 999; bottom: 5px !important; } .vjs-fullscreen .rplus-progress-control { display: none !important; } .modal-container-login-error { background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; right: 0; transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); color: #D3D3D3; } .floating-login-error-modal { background-color: #282828; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 5px; padding: 30px !important; z-index: 99; text-align: center; padding: 24px; width: 303px; } .title-login-error-modal { font-weight: 600; font-size: 18px; } .desc-login-error-modal { margin-top: 5px; font-size: 12px; font-weight: 400; } .close-login-error-modal-button { margin-top: 20px; background-color: #EA5247; color: #D3D3D3; border: none; border-radius: 5px; font-size: 12px; font-weight: 600; width: 160px; height: 32px; } .fas_fa-eye { background: url("https://api.iconify.design/fa-eye.svg?color=%237f8c8d") no-repeat center center; } .fas_fa-eye-slash { background: url("https://api.iconify.design/fa-eye-slash.svg?color=%23495057") no-repeat center center; } .login-box { margin: 0px auto; background-color: #282828; color: #fff !important; width: 100%; height: auto; object-fit: contain; border-radius: 30px; padding: 20px; font-size: 12px; font-weight: 700; } .form-control { display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.375rem; font-size: 12px; font-weight: 400; line-height: 1.5; color: #8F8F8F; background-color: #fff; background-clip: padding-box; border: 0.5px solid #495057 !important; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .login-box > h3 { text-align: center; } .group-form { margin-bottom: 16px; } .input-group { margin-top: 10px; } .forgot-password { font-weight: 400; } .forgot-password a { font-weight: 700; } .register-direct { margin: 20px; font-size: 12px; font-weight: 400; } .register-direct a { color: #05B5F5; font-weight: 700; } .horizontal-border { border: 1px solid #3A3A3A; margin-bottom: 20px; } .terms-conditions { margin-top: 20px; font-size: 12px; font-weight: 400; } .terms-conditions a { color: #05B5F5; font-weight: 700; } Input { background-color: #282828 !important; color: #ffffff !important; } Input::placeholder { color: #8F8F8F !important; font-size: 12px; font-weight: 400; } .btn-primary { background-color: #DB2828; border-color: #DB2828; width: 100%; } .btn-next-signin { width: 100%; margin-top: 20px; background-color: #0079FF !important; border: 1px solid transparent; border-radius: 4px; } .btn-next-signin-disabled { width: 100%; margin-top: 20px; background-color: #8F8F8F !important; border: 1px solid transparent; border-radius: 4px; } .form-text { text-align: center; } .form-text a { color: inherit; } .form-text p a { color: #DB2828; } .view-raw { padding-right: calc(1.5em + 0.75rem); background-repeat: no-repeat; background-position: center right calc(0.375em + 0.1875rem); background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); border: 0.5px solid #495057; } #password { border-right-color: transparent; } .block-btn { width: 100%; } .invalid-border-color { border-color: #F63F54 !important; } .default-invalid-text { margin-top: 5px; font-weight: 400; color: #D8D8D8; } .red-invalid-text { color: #F63F54; margin-top: 5px; font-weight: 400; } .append-input { background: none; border: 0.5px solid #495057 !important; border-left: none; color: #ffffff; } .inpt-form { background: transparent; height: 38px !important; } .inpt-form.right-none { border-right: none; } .inpt-form:focus { border: 1px solid #8F8F8F; } .right-border-radius { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .none-border-left { border-left: 0; } .none-border-right { border-right: 0; } .input-phone { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .input-group { margin-top: 0 !important; } .bar-container { height: 4px; background-color: #545454; } .bar-container .bar-progress { background-color: #29BAEC; height: 100%; max-width: 100%; } .list-menu-container { border: none; margin-bottom: 27px; } .list-menu-container .ribbon { position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 100%; } .list-menu-container .cw-container { white-space: nowrap; display: block; scrollbar-width: none; overflow: auto; } .list-menu-container .cw-container .cw-item { width: 180px; display: inline-block; margin: 10px; } .list-menu-container .cw-container .cw-item .list-item-thumbnail { width: 100%; border-radius: 7px; } .list-menu-container .cw-container::-webkit-scrollbar { display: none; } .list-menu-container .profile-action p { margin-bottom: 1px; } .list-menu-container .profile-action .subtitle { font-size: 90%; color: #757575; } .list-menu-container .profile-action .sub-btn { margin-top: 5px; } .list-menu-container .profile-action .subtitle, .list-menu-container .profile-action .sub-btn { margin-left: 30px; } .list-menu-container .profile-action .btn-next { width: 65px; font-size: 10px; border-radius: 5px; } .list-menu-container .list-group-item { border: 0.2px solid #171717; border-left: none; border-right: none; line-height: 1.2; font-size: 12px; font-weight: 600; padding: 18px 15px; } .list-menu-container .list-group-item .rounded-profile-picture { width: 100%; height: 100%; border-radius: 100%; border: 1px solid white; } .list-menu-container .list-group-item .MuiSvgIcon-root { font-size: 1.3rem; margin-right: 10px; font-weight: 600; } .navbar-profile { border-radius: 0 !important; } .not-login { background-color: #1E1E1E; text-align: center; color: #fff; min-height: 100vh; position: relative; } .not-login .profile-navbar { background-color: #323232; font-size: 16px; font-weight: 400; line-height: 28px; padding: 12px; } .not-login .body-wrapper { width: 50%; position: absolute; top: 30%; transform: translateY(-50%); left: 50%; transform: translateX(-50%); } .not-login .user-icon { font-size: 60px; } .not-login .text-header { margin-top: 16px; font-size: 14px; font-weight: 700; } .not-login .text-desc { margin-top: 12px; color: #E9E9E9; font-size: 12px; font-weight: 400; } .not-login .login-button { margin-top: 16px; border: none; border-radius: 8px; background-color: #0079FF; padding: 8px 16px; color: #fff; font-size: 12px; font-weight: 600; width: 100%; } .not-login .login-button:focus { outline: none; } .settings-page { background-color: #050505; color: #FCFCFC; padding: 20px 16px 90px; } .settings-page.settings-page-not-logged { min-height: calc(100vh - 72px); display: flex; flex-direction: column; padding-top: 48px; } .settings-page .not-logged-card { background: #272727; border: 1px solid #313131; border-radius: 10px; padding: 14px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .settings-page .not-logged-copy { color: #EFEFEF; font-size: 13px; line-height: 20px; font-weight: 700; } .settings-page .not-logged-button { border: none; border-radius: 8px; background: #0A84FF; color: #fff; font-size: 12px; line-height: 18px; font-weight: 700; padding: 8px 16px; min-width: 78px; flex-shrink: 0; } .settings-page .not-logged-button:focus { outline: none; } .settings-page .not-logged-section { margin-top: 28px; } .settings-page .settings-version { margin-top: 28px; color: #6F6F6F; font-size: 12px; line-height: 18px; font-weight: 600; text-align: center; } .settings-page .settings-profile-header { margin-top: 18px; } .settings-page .settings-profile-header .profile-info { display: flex; align-items: center; } .settings-page .settings-profile-header .profile-image-wrapper { position: relative; width: 74px; height: 74px; flex-shrink: 0; } .settings-page .settings-profile-header .profile-image { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .settings-page .settings-profile-header .profile-edit { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background-color: #2D2D2D; border: 1px solid #4B4B4B; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; } .settings-page .settings-profile-header .profile-text { margin-left: 14px; min-width: 0; flex: 1; } .settings-page .settings-profile-header .profile-name { font-size: 16px; line-height: 1.5; font-weight: 700; color: #F5F5F5; letter-spacing: 0.64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-page .settings-profile-header .profile-handle { margin-top: 4px; font-size: 21px; color: #B5B5B5; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-page .premium-card { margin-top: 20px; border-radius: 10px; padding: 14px 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; height: 72px; overflow: hidden; } .settings-page .premium-card.premium { background: linear-gradient(90deg, #C98500 0%, #EAA300 100%); } .settings-page .premium-card.free { background: linear-gradient(90deg, #5B5B5B 0%, #3E3E42 55%, #2B2B2F 100%); } .settings-page .premium-card .premium-left { display: flex; align-items: flex-start; place-items: center; font-size: 12px; font-weight: 600; color: #F4F4F4; min-width: 0; } .settings-page .premium-card .premium-left .icon { margin-right: 8px; } .settings-page .premium-card .premium-left .premium-copy { min-width: 0; } .settings-page .premium-card .premium-left .premium-copy .title { font-size: 12px; font-weight: 600; line-height: 1; color: #F7F7F7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 150%; } .settings-page .premium-card .premium-left .premium-copy .subtitle { font-size: 12px; font-weight: 400; line-height: 1.25; color: #969696; white-space: normal; max-height: 30px; overflow: hidden; } .settings-page .premium-card .premium-badge { border-radius: 20px; background-color: #F5C23A; color: #2F2F2F; padding: 6px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; margin-left: 12px; flex-shrink: 0; } .settings-page .premium-card.premium .premium-copy .subtitle { color: rgba(255, 255, 255, 0.85); font-weight: 600; } .settings-page .premium-card.premium .premium-badge { background-color: #E4E4E4; color: #474747; } .settings-page .premium-card-skeleton { margin-top: 20px; border-radius: 10px; padding: 14px 12px; height: 72px; display: flex; align-items: center; justify-content: space-between; background: #2D2D2D; overflow: hidden; } .settings-page .premium-card-skeleton .skeleton-left { display: flex; align-items: center; min-width: 0; } .settings-page .premium-card-skeleton .skeleton-icon { width: 24px; height: 24px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; } .settings-page .premium-card-skeleton .skeleton-copy { min-width: 0; width: 140px; } .settings-page .premium-card-skeleton .skeleton-line { border-radius: 4px; } .settings-page .premium-card-skeleton .skeleton-line.title { width: 110px; height: 12px; } .settings-page .premium-card-skeleton .skeleton-line.subtitle { width: 140px; height: 10px; margin-top: 8px; } .settings-page .premium-card-skeleton .skeleton-badge { width: 86px; height: 28px; border-radius: 20px; margin-left: 12px; flex-shrink: 0; } .settings-page .shimmer-block { background: linear-gradient(90deg, #3A3A3A 25%, #555 50%, #3A3A3A 75%); background-size: 220% 100%; animation: settingsShimmer 1.2s linear infinite; } @keyframes settingsShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } } .section-container { margin-top: 16px; } .section-container .section-title { color: #7E7E7E; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .2px; margin-bottom: 6px; display: inline-block; } .section-container .section-list { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #181818; color: #FCFCFC; font-size: 13px; font-weight: 600; cursor: pointer; } .section-container .section-list .item-left { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; } .section-container .section-list .icon { font-size: 20px; color: #F2F2F2; flex-shrink: 0; } .section-container .section-list .arrow-right { font-size: 20px; color: #F2F2F2; } .section-container .section-list.no-border { border-bottom: none; } .kids-switch { width: 34px; height: 20px; border-radius: 20px; background-color: #5F5F5F; position: relative; transition: all .2s ease; } .kids-switch .dot { width: 16px; height: 16px; border-radius: 50%; background: #DADADA; position: absolute; left: 2px; top: 2px; transition: all .2s ease; } .kids-switch.active { background-color: #0B85C9; } .kids-switch.active .dot { left: 16px; background-color: #fff; } .continue-header { display: flex; align-items: center; font-size: 14px; font-weight: 700; margin-bottom: 8px; } .continue-header .icon { margin-right: 8px; font-size: 18px; } .continue-watch-container { display: block; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-right: -16px; } .continue-watch-container .continue-watch-item { width: 132px; display: inline-block; vertical-align: top; margin-right: 8px; cursor: pointer; } .continue-watch-container .continue-watch-item .thumb-wrapper { position: relative; } .continue-watch-container .continue-watch-item .list-item-thumbnail { width: 100%; height: 74px; border-radius: 4px 4px 0 0; object-fit: cover; display: block; } .continue-watch-container .continue-watch-item .duration-chip { position: absolute; right: 4px; bottom: 4px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 11px; font-weight: 600; border-radius: 2px; padding: 1px 4px; line-height: 1.2; } .continue-watch-container .continue-watch-item .cw-title { margin-top: 6px; font-size: 12px; line-height: 1.25; color: #fff; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 30px; } .continue-watch-container::-webkit-scrollbar { display: none; } .settings-version { margin-top: 18px; text-align: center; color: #7F7F7F; font-size: 13px; font-weight: 600; } .container-box-e { margin-top: 50px; padding-top: 5%; z-index: 9999; color: white; } .container-box-e .interest-swiper-container { overflow: auto; white-space: nowrap; display: block; scrollbar-width: none; } .container-box-e .interest-swiper-container .swiper-slide { height: 48px; width: 83px; margin: 3px; position: relative; text-align: center; background: #171717; display: inline-block; border-radius: 3px; } .container-box-e .interest-swiper-container .swiper-slide img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 3px; } .container-box-e .interest-swiper-container .swiper-slide .bg-black { background-color: black; opacity: 0.4; width: 100%; height: 100%; border-radius: 3px; } .container-box-e .interest-swiper-container .swiper-slide .slide-title { font-size: 8px; font-weight: 300; position: absolute; left: 50%; transform: translateX(-50%); margin-bottom: 0; bottom: 5px; border-bottom: 1px solid transparent; } .container-box-e .interest-swiper-container .swiper-slide .selected-slide-title { border-bottom: 1px solid white; } .container-box-e .interest-swiper-container::-webkit-scrollbar { display: none; } .container-box-e .content-search { background-color: #3a3a3a; padding: 10px; margin-left: 0 !important; margin-right: 0 !important; } .container-box-e .content-search .header-list .title { font-size: 12px; } .container-box-e .content-search .content-list .new-label { position: absolute; padding: 3px 10px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; background-color: #02bcff; font-size: 10px; } .container-box-e .content-search .content-list .row { margin-left: 3px; margin-right: 3px; } .container-box-e .content-search .content-list .row div[class*="col-"] { padding: 3px; } .container-box-e .content-search .content-list .row div[class*="col-"] .content-image { width: 100%; background-color: #171717; border-radius: 3px; } #library-revamp { display: flex; flex-direction: column; align-items: center; background-color: #FFF200; height: 100vh; padding-bottom: 60px; } #library-revamp .containerWrapper { display: flex; flex: 1; flex-direction: column; justify-content: space-between; margin: 32px 0; width: 100vw; } #library-revamp .containerWrapper .contentWrapper { display: flex; flex: 1; flex-direction: column; justify-content: space-evenly; } #library-revamp .containerWrapper .contentWrapper .contentTextWrapper { align-items: center; display: flex; flex-direction: row; justify-content: space-evenly; margin-bottom: 28px; width: 100%; } #library-revamp .containerWrapper .contentWrapper .contentTextWrapper .contentText { color: #0F0F0F; font-family: 'Gotham', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 18px; text-align: center; margin-bottom: 0; margin-block-end: 0; } #library-revamp .containerWrapper .contentWrapper .contentTextWrapper .contentTextBold { color: #0F0F0F; font-family: 'Gotham Black', sans-serif; font-size: 18px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; margin-bottom: 0; margin-block-end: 0; } #library-revamp .containerWrapper .contentWrapper .comingSoon { color: #0F0F0F; font-family: 'Gotham', sans-serif; font-size: 28px; font-style: normal; font-weight: 400; letter-spacing: -0.04em; line-height: 34px; padding: 0 16px; text-align: center; } #library-revamp button { background: #0F0F0F; border: none; border-radius: 9999px; font-family: 'Gotham Black', sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: 0.44px; line-height: 24px; color: #FFF200; outline: none; padding: 12px 16px; text-align: center; text-transform: uppercase; width: 100%; } body { background-color: #050505; color: #FCFCFC; } .container-box-account-settings { margin-top: 16px; margin-inline: 0; padding: 20px 16px 90px; } .container-box-account-settings .content-item { display: flex; gap: 12px; padding: 17px; align-items: center; color: #fff; border-bottom: 1px solid #272727; cursor: pointer; background-color: transparent; transition: background-color .12s ease; } .container-box-account-settings .content-item:hover { background-color: rgba(255, 255, 255, 0.02); } .container-box-account-settings .list-item-thumbnail { width: 104px; border-radius: 4px; background-color: #171717; } .container-box-account-settings .item-desc { display: flex; justify-content: space-between; width: 100%; gap: 10px; align-items: center; } .container-box-account-settings .item-title { font-size: 13px; font-weight: 600; line-height: 19.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; margin-bottom: 6px; } .container-box-account-settings .desc-title { margin-top: 6px; font-size: 12px; color: #8F8F8F; line-height: 1.25px; } .container-box-account-settings .content-item svg, .container-box-account-settings .content-item .icon { color: #ffffff; flex-shrink: 0; } .container-box-account-settings .delete-account .item-title { color: #ff5b5b; } .container-box-account-settings .item-subtitle { line-height: 150%; color: #8F8F8F; margin-bottom: 8px; } .container-box-account-settings .item-action-buttons { display: flex; gap: 15px; } .container-box-account-settings .item-action-buttons .action-icon { font-size: 1.2rem !important; } .container-box-account-settings .item-action-buttons .action-icon__playlist-check { color: #29BAEC; } .container-box-account-settings .success-bottom-alert { display: flex; justify-content: inherit; align-items: center; gap: 7px; margin: 20px; position: fixed; z-index: 100; bottom: 60px; left: 0; right: 0; border-radius: 8px; font-size: 12px; font-weight: 400; padding: 10px; border: 1px solid #323232; } .container-box-account-settings .success-bottom-alert .success-icon-as { background-color: #fff; border-radius: 50%; color: #00FF00; display: flex; justify-content: center; align-items: center; height: 20px; width: 20px; aspect-ratio: 1/1; } .container-box-account-settings .btn-change-password { background-color: #0079ff !important; width: 100%; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 400; padding: 10px; } .modal-container-sm { background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; right: 0; transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); } .floating-profile-modal-sm { background-color: #323232; color: #fff; position: fixed; top: 50%; transform: translateY(-50%); border-radius: 16px; padding: 16px; z-index: 99; text-align: center; margin-inline: 24px; transition: all ease-out 0.3s; } .title-modal-sm { font-weight: 700; color: #FCFCFC; } .logo-modal-sm { border-radius: 16px; padding: 15px; margin-inline: auto; margin-bottom: 12px; } .desc-modal-sm { margin-top: 12px; color: #D8D8D8; font-size: 12px; font-weight: 400; } .confirm-button-sm { margin-top: 24px; background-color: #0079FF; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; width: 100%; padding: 12px; } .container-box-cu { margin-top: 50px; padding: 20px; background-color: #1E1E1E; margin-inline: 0; min-height: 100vh; } .container-box-cu .description-cu { margin: 10px 0 20px 0; font-size: 16px; font-weight: 700; } .container-box-cu .append-input-phone-cu { background: none; border: 0.5px solid #495057 !important; border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; color: #ffffff; font-size: 12px; gap: 5px; margin-left: 1px; width: 100%; } .container-box-cu .form-control-cu { background: transparent !important; border: 0.5px solid #495057 !important; color: #a8a8a8 !important; padding: 0; border-radius: 0.25rem !important; padding: 0.375rem !important; } .container-box-cu .form-control-cu:hover { background: transparent; } .container-box-cu .form-control-cu::placeholder { font-size: 12px; } .container-box-cu .form-label-cu { color: #fff; font-size: 14px; font-weight: 700; } .container-box-cu .phone-number-note-cu { font-size: 12px; color: #a8a8a8; } .container-box-cu .btn-change-password-cu { background-color: #0079ff !important; width: 100%; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 400; padding: 10px; margin-top: 20px; } .container-box-cu .btn-change-password-cu-disabled { background-color: #969696 !important; width: 100%; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 400; padding: 10px; margin-top: 20px; } .modal-dialog { margin: auto; } .modal-dialog .modal-body-edited { padding: 0rem !important; padding-top: 40% !important; } .modal-header { border-bottom: none; } .modal-body { padding: 0rem; } .modal-content { height: 100vh; border-radius: 0; background-color: #282828; color: white; } .player-modal .modal-header button { color: white !important; font-weight: 0 !important; opacity: 1 !important; } .player-modal .player-modal-container .vjs-seek-button { position: absolute !important; display: none; bottom: 80px; transform: scale(2); } .player-modal .player-modal-container .vjs-seek-button:hover { display: block; } .modal-comingsoon { height: 100vh; bottom: 0; position: fixed; z-index: 1030; width: 100vw; } .modal-comingsoon > div { width: 100%; height: 100%; display: grid; grid-template-rows: auto 350px; background: #282828eb; } .modal-comingsoon > div > div:nth-child(2) { height: 350px; background: #282828; padding: 0 20px; border-radius: 20px 20px 0 0; box-shadow: 0 0 1rem 0.5rem #000000d1; } .modal-comingsoon > div > div:nth-child(2) .close-bar { padding: 20px; display: flex; justify-content: center; } .modal-comingsoon > div > div:nth-child(2) .close-bar > div { height: 3px; background: white; width: 80px; } .modal-comingsoon > div > div:nth-child(2) .img-comingsoon { background: linear-gradient(45deg, #181818, transparent); margin: 0 auto; display: block; border-radius: 10px; } .modal-comingsoon > div > div:nth-child(2) .desc-comingsoon > p, .modal-comingsoon > div > div:nth-child(2) .desc-comingsoon span { color: white; } .modal-comingsoon > div > div:nth-child(2) .desc-comingsoon > p:not(p:first-child), .modal-comingsoon > div > div:nth-child(2) .desc-comingsoon span:not(p:first-child) { font-size: 12px; margin: 0; } .modal-comingsoon > div > div:nth-child(2) .desc-comingsoon > p:first-child { font-size: 14px; font-weight: bold; margin: 10px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .modal-comingsoon > div > div:nth-child(2) .desc-comingsoon > div { display: flex; justify-content: space-between; align-items: center; } .modal-comingsoon > div > div:nth-child(2) .desc-comingsoon > div > span { text-align: right; color: #8F8F8F; } .btn-primary-interactive { color: #fff; background-color: #007bff; border-color: #007bff; } .country-list-modal-info { margin: 0; position: fixed; font-size: 12px; } .country-list-modal-info .modal-content { border: none; border-radius: 0; width: 100vw; height: 100%; background: #282828; color: #ffffff; } .country-list-modal-info .modal-content .navbar-header { background: #3a3a3a; display: flex; height: 46px; align-items: center; width: 100vw; z-index: 1; } .country-list-modal-info .modal-content .navbar-header .back-icon { width: 15%; padding: 10px; } .country-list-modal-info .modal-content .navbar-header .input-search { border: 0; background: none; border-radius: 0; padding: 0; background-color: #3a3a3a !important; } .country-list-modal-info .modal-content .navbar-header .flex-display { width: 100%; display: flex; align-items: center; } .country-list-modal-info .modal-content .navbar-header .flex-display .search-text { width: 85%; } .country-list-modal-info .modal-content .navbar-header .flex-display .search-action { width: 15%; text-align: center; } .country-list-modal-info .modal-content .body-list-info { height: 100vh; padding: 0; } .country-list-modal-info .modal-content .body-list-info .list-country-info { padding: 10px; width: 90%; height: 100%; scrollbar-width: none; -ms-overflow-style: none; overflow-y: scroll; overflow-x: hidden; overflow: -moz-scrollbars-none; } .country-list-modal-info .modal-content .body-list-info .list-country-info::-webkit-scrollbar { display: none; /* Chrome Safari */ width: 0; height: 0; } .country-list-modal-info .modal-content .body-list-info .list-country-info .country-item-info { display: flex; gap: 10px; padding: 10px 0; } .country-list-modal-info .modal-content .body-list-info .select-alphabet { position: fixed; right: 0; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 46px; margin: 0 10px; } .country-list-modal-info .modal-content .body-list-info .select-alphabet span { font-weight: bold; padding: 2px 0; } .modal-edit { transform: translate(0, 60%) !important; overflow-y: hidden; } .modal-geo { transform: translate(0, 80%) !important; overflow-y: hidden; } .modal-geo .modal-body-geo { padding: 10px 30px; font-size: 12px; text-align: center; } .modal-interactive { padding: 20px 20px; min-height: 60%; top: 17%; } .modal-interactive .modal-content { background-color: #282828; padding: 20px; height: 100%; border-radius: 20px; justify-content: center; align-items: center; } .modal-interactive .modal-body { display: flex; justify-content: center; align-items: center; padding-top: 1px; padding: 0 50px; } .modal-body-edit { padding: 0px; text-align: center; } .modal-body-edit .sheet-title { font-size: 18px; margin-bottom: 0; } .modal-body-edit .sheet-action-button-share { font-size: 35px; border: 1px solid #fff; border-radius: 100%; display: inline-block; width: 55px; height: 55px; margin: 10px; } .modal-body-edit .sheet-action-button-share :focus { outline: none; } .modal-body-edit .modal-content .close-icon-button { margin: 10px; font-size: 1rem !important; } .modal-container { background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; right: 0; transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); } .bottom-profile-modal { background-color: #323232; color: #fff; position: fixed; bottom: 0; width: 100%; border-top-left-radius: 16px; border-top-right-radius: 16px; padding: 24px 0 12px 0; z-index: 99; } .header-modal { display: flex; justify-content: space-between; padding-inline: 15px; } .header-modal .close-icon { font-size: 18px; } .title-modal { font-size: 16px; font-weight: 700; color: #FCFCFC; } .title-modal .join { font-size: 16px; } .title-modal .create { font-size: 14px; } .desc-create { font-weight: 400; font-size: 12px; letter-spacing: 0.1px; color: #8F8F8F; } .buttons-create { padding: 8px 0 8px 0; } .buttons-create .li-btn-create { margin-bottom: 10px; padding: 5px 0 5px 0; } .buttons-create .li-btn-create .title { display: flex; justify-content: space-between; font-size: 14px; color: #E9E9E9; font-weight: 400; } .body-modal { margin-top: 10px; font-size: 12px; font-weight: 600; cursor: pointer; padding-inline: 15px; } .body-modal .del-btn { padding: 10px 0 10px 0; } .body-modal .del-icon { font-size: 20px; margin-right: 5px; } .body-modal .check-icon { font-size: 17px; } .body-modal-del { margin-top: 10px; padding-inline: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 16px; } .body-modal-del .cancel-del-button { background-color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 600; color: #646464; } .body-modal-del .cancel-del-button:focus { outline: none; } .body-modal-del .continue-del-button { background-color: #F63F54; border: none; border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 600; color: #fff; } .body-modal-del .continue-del-button:focus { outline: none; } .logo-modal { width: 60px; border-radius: 16px; padding: 10px; background-color: #000; margin-inline: auto; margin-bottom: 24px; } .logo-modal img { width: 100%; } .desc-modal { margin-top: 12px; color: #D8D8D8; font-size: 12px; font-weight: 400; } .open-app-button { margin-top: 24px; background-color: #0079FF; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; width: 100%; padding: 12px; } .not-now-button { margin-top: 12px; background-color: transparent; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; width: 100%; padding: 12px; } .container-box-cont-watch { margin-top: 50px; background-color: #1E1E1E; margin-inline: 0; min-height: 100vh; } .container-box-cont-watch .header-list { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px; font-size: 12px; -webkit-box-pack: justify; -webkit-box-align: center; background-color: #282828; } .container-box-cont-watch .header-list .dropdown-toggle::before { display: inline-block; margin-right: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } .container-box-cont-watch .header-list .dropdown-toggle::after { display: inline-block; color: transparent; margin: 0; border: none; } .container-box-cont-watch .header-list .dropdown-toggle { background: transparent; font-size: 12px; } .container-box-cont-watch .header-subtitle { margin: 0; } .container-box-cont-watch .sort-list { background-color: #282828; padding: 10px 15px; position: fixed; z-index: 100; bottom: 60px; left: 0; right: 0; } .container-box-cont-watch .sort-list .sort-icon { font-size: 1.2rem !important; } .container-box-cont-watch .sort-list .sort-button { border: 1px solid #D8D8D8; color: #D8D8D8; font-size: 10px; border-radius: 8px; padding: 10px; display: flex; justify-content: center; align-items: center; gap: 10px; } .container-box-cont-watch .content-list { padding-inline: 11px; font-size: 13px; margin-bottom: 100px; } .container-box-cont-watch .content-list .content-list-item { margin-bottom: 5px; display: flex; align-items: center; gap: 12px; padding: 5px; } .container-box-cont-watch .content-list .list-item-thumbnail { width: 104px; border-radius: 4px 4px 0 0; background-color: #171717; } .container-box-cont-watch .content-list .item-title { font-size: 13px; font-weight: 400; line-height: 19.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; } .container-box-cont-watch .content-list .item-subtitle { line-height: 150%; color: #8F8F8F; margin-bottom: 8px; } .container-box-cont-watch .content-list .item-action-buttons { display: flex; gap: 15px; } .container-box-cont-watch .content-list .item-action-buttons .action-icon { font-size: 1.2rem !important; } .container-box-cont-watch .content-list .item-action-buttons .action-icon__playlist-check { color: #29BAEC; } .container-box-cont-watch .no-content { text-align: center; position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); } .container-box-cont-watch .no-content img { width: 100px; } .container-box-cont-watch .no-content .text { font-weight: 600; font-size: 13px; line-height: 150%; } .delete-account-page { background-color: #121212; min-height: 100vh; color: #ffffff; display: flex; flex-direction: column; } .delete-account-container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 100px 24px 60px 24px; max-width: 480px; margin: 0 auto; } .delete-account-container .avatar-wrapper { width: 120px; height: 120px; border-radius: 50%; background-color: #ffffff; display: flex; align-items: center; justify-content: center; margin-bottom: 36px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .delete-account-container .title { font-size: 20px; font-weight: 700; color: #ffffff; margin-bottom: 16px; line-height: 1.35; max-width: 300px; } .delete-account-container .description { font-size: 14px; font-weight: 400; color: #cccccc; line-height: 1.5; margin-bottom: 56px; max-width: 320px; } .delete-account-container .actions-wrapper { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; } .delete-account-container .actions-wrapper .btn-delete { background: transparent; border: none; color: #f63f54; font-size: 16px; font-weight: 600; cursor: pointer; outline: none; padding: 8px 24px; transition: opacity 0.2s ease; } .delete-account-container .actions-wrapper .btn-delete:hover, .delete-account-container .actions-wrapper .btn-delete:active { opacity: 0.8; } .delete-account-container .actions-wrapper .btn-cancel { background: transparent !important; border: none; color: #ffffff; font-size: 16px; font-weight: 600; cursor: pointer; outline: none; padding: 8px 24px; transition: opacity 0.2s ease; } .delete-account-container .actions-wrapper .btn-cancel:hover, .delete-account-container .actions-wrapper .btn-cancel:active { opacity: 0.8; } .otp-container { flex: 1; display: flex; flex-direction: column; padding: 88px 28px 40px 28px; max-width: 480px; margin: 0 auto; width: 100%; } .otp-container .otp-description { font-size: 15px; font-weight: 400; color: #e0e0e0; line-height: 1.65; margin-bottom: 44px; text-align: left; } .otp-container .otp-inputs-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 48px; width: 100%; } .otp-container .otp-inputs-wrapper .otp-box { flex: 1; max-width: 48px; height: 48px; background: transparent; border: none; border-bottom: 2px solid #555555; color: #ffffff; font-size: 22px; font-weight: 600; text-align: center; outline: none; transition: border-color 0.2s ease; } .otp-container .otp-inputs-wrapper .otp-box:focus, .otp-container .otp-inputs-wrapper .otp-box.active { border-bottom-color: #ffffff; } .otp-container .otp-timer-wrapper { font-size: 14px; color: #b0b0b0; text-align: left; } .otp-container .otp-timer-wrapper .timer-text { color: #00a2e8; font-weight: 500; margin-left: 6px; } .otp-container .otp-timer-wrapper .resend-btn { background: none; border: none; color: #00a2e8; font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; outline: none; } .otp-container .otp-timer-wrapper .resend-btn:hover { opacity: 0.85; } .otp-container .otp-timer-wrapper .resend-btn:disabled { color: #666666; cursor: not-allowed; text-decoration: none; } .container-box-eform { margin: 0px auto; background-color: #1E1E1E; width: 100%; min-height: 87vh; object-fit: contain; padding: 20px; margin-top: 70px; } .form-control-eform { display: block; width: 100%; padding: 0.375rem; padding-inline: 10px; font-size: 12px; font-weight: 400; line-height: 1.5; border: 1px solid #8F8F8F; color: #fff !important; position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; background: 0 0 !important; height: 38px !important; outline: none !important; border-radius: 0.25rem; } .form-control-eform::placeholder { font-size: 12px; } .form-control-eform:hover { background: transparent; } .available-eform { border: 2px solid #00BA88 !important; } .available-text-eform { color: #00BA88 !important; } .invalid-eform { border: 2px solid #F63F54 !important; } .invalid-text-eform { color: #F63F54 !important; } .form-label-eform { color: #fff; font-size: 12px; font-weight: 700; } .country-flag-eform { margin-inline: 5px; } .input-handler-eform { margin-top: 4px; font-size: 12px; color: #969696; } .append-input-eform { border: 1px solid #8F8F8F; border-radius: 0.25rem; } .append-input-eform .none-style { background: none; border: 0; color: #fff; font-size: 12px; } .none-right-border-radius-eform { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .none-left-border-radius-eform { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .no-border-right-eform { border-right: none !important; } .no-border-left-eform { border-left: none !important; } .button-wrapper-eform { background-color: #1E1E1E; position: fixed; left: 0; right: 0; bottom: 0; width: 100%; padding: 20px; z-index: 99; } .btn-save-eform { width: 100%; margin-top: 30px; background-color: #0079FF !important; border: 1px solid transparent; border-radius: 8px; padding: 10px; font-size: 12px; color: #fff; font-weight: 600; } .btn-save-eform-disabled { width: 100%; margin-top: 30px; background-color: #8F8F8F !important; border: 1px solid transparent; border-radius: 8px; padding: 10px; font-size: 12px; color: #fff; font-weight: 600; } .container-box-pp { margin-top: 50px; margin-bottom: 50px; height: calc(100vh - 100px); } .container-box-hist { margin-top: 50px; background-color: #1E1E1E; margin-inline: 0; min-height: 100vh; padding-bottom: 50px; } .container-box-hist .header-list { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px; font-size: 12px; -webkit-box-pack: justify; -webkit-box-align: center; background-color: #282828; } .container-box-hist .header-list .dropdown-toggle::before { display: inline-block; margin-right: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } .container-box-hist .header-list .dropdown-toggle::after { display: inline-block; color: transparent; margin: 0; border: none; } .container-box-hist .header-list .dropdown-toggle { background: transparent; font-size: 12px; } .container-box-hist .header-subtitle { margin: 0; } .container-box-hist .sort-list { background-color: #282828; padding: 10px 15px; position: fixed; z-index: 100; bottom: 60px; left: 0; right: 0; } .container-box-hist .sort-list .sort-icon { font-size: 1.2rem !important; } .container-box-hist .sort-list .sort-button { border: 1px solid #D8D8D8; color: #D8D8D8; font-size: 10px; border-radius: 8px; padding: 10px; display: flex; justify-content: center; align-items: center; gap: 10px; } .container-box-hist .content-list { padding-inline: 11px; font-size: 13px; margin-bottom: 100px; } .container-box-hist .content-list .content-list-item { margin-bottom: 5px; display: flex; align-items: center; gap: 12px; padding: 5px; } .container-box-hist .content-list .list-item-thumbnail { width: 104px; border-radius: 4px 4px 0 0; background-color: #171717; } .container-box-hist .content-list .item-title { font-size: 13px; font-weight: 400; line-height: 19.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; } .container-box-hist .content-list .item-subtitle { line-height: 150%; color: #8F8F8F; margin-bottom: 8px; } .container-box-hist .content-list .item-action-buttons { display: flex; gap: 15px; } .container-box-hist .content-list .item-action-buttons .action-icon { font-size: 1.2rem !important; } .container-box-hist .content-list .item-action-buttons .action-icon__playlist-check { color: #29BAEC; } .container-box-hist .no-content { text-align: center; position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); } .container-box-hist .no-content img { width: 100px; } .container-box-hist .no-content .text { font-weight: 600; font-size: 13px; line-height: 150%; } .related-box { color: #fff; padding: 20px; } .related-title { font-size: 14px; font-weight: 600; line-height: 19px; letter-spacing: 0.1px; } .related-subtitle { font-size: 9px; text-align: right; margin-top: -30px; } .related-slider { margin-right: -20px; margin-left: -15px; margin-bottom: 100px; overflow: auto; white-space: nowrap; display: block; scrollbar-width: none; padding: 8px; } .related-slider .related-slide { height: 100%; margin: 3px 6px; position: relative; text-align: center; background: #171717; display: inline-block; } .related-slider .related-slide img { width: 126px; border-radius: 8px; } .related-slider::-webkit-scrollbar { display: none; } .container-box-my-list { margin-top: 50px; background-color: #1E1E1E; margin-inline: 0; min-height: 100vh; } .container-box-my-list .header-list { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px; font-size: 12px; -webkit-box-pack: justify; -webkit-box-align: center; background-color: #282828; } .container-box-my-list .header-list .dropdown-toggle::before { display: inline-block; margin-right: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } .container-box-my-list .header-list .dropdown-toggle::after { display: inline-block; color: transparent; margin: 0; border: none; } .container-box-my-list .header-list .dropdown-toggle { background: transparent; font-size: 12px; } .container-box-my-list .header-subtitle { margin: 0; } .container-box-my-list .sort-list { background-color: #282828; padding: 10px 15px; position: fixed; z-index: 100; bottom: 60px; left: 0; right: 0; } .container-box-my-list .sort-list .sort-icon { font-size: 1.2rem !important; } .container-box-my-list .sort-list .sort-button { border: 1px solid #D8D8D8; color: #D8D8D8; font-size: 10px; border-radius: 8px; padding: 10px; display: flex; justify-content: center; align-items: center; gap: 10px; } .container-box-my-list .content-list { padding-inline: 11px; font-size: 13px; } .container-box-my-list .content-list .content-list-item { margin-bottom: 5px; display: flex; align-items: center; gap: 12px; padding: 5px; } .container-box-my-list .content-list .list-item-thumbnail { width: 104px; border-radius: 4px; background-color: #171717; } .container-box-my-list .content-list .item-desc { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; } .container-box-my-list .content-list .item-title { font-size: 13px; font-weight: 400; line-height: 19.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; } .container-box-my-list .content-list .total-content { font-size: 12px; color: #8F8F8F; } .container-box-my-list .content-list .item-subtitle { line-height: 150%; color: #8F8F8F; margin-bottom: 8px; } .container-box-my-list .content-list .item-action-buttons { display: flex; gap: 15px; } .container-box-my-list .content-list .item-action-buttons .action-icon { font-size: 1.2rem !important; } .container-box-my-list .content-list .item-action-buttons .action-icon__playlist-check { color: #29BAEC; } .container-box-my-list .no-content { text-align: center; position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); } .container-box-my-list .no-content img { width: 100px; } .container-box-my-list .no-content .text { font-weight: 600; font-size: 13px; line-height: 150%; } .container-box-qr { margin-top: 50px; } .main { min-height: 99vh; background-color: #000; color: #fff; } .profile-header { padding: 30px 16px 0 16px; } .profile-navigation { display: flex; justify-content: space-between; align-items: center; color: #fff; background-color: #000; font-size: 16px; font-weight: 600; line-height: 28px; padding: 12px; } .user-wrapper { display: flex; } .user-wrapper-visitor { display: flex; justify-content: space-between; } .user-header-visitor { display: flex; } .share-icon-visitor-wrapper { display: flex; transform: scaleX(-1); justify-content: center; align-items: center; } .share-icon-visitor { color: #fff; font-size: 30px !important; } .profile-pic { width: 68px; position: relative; } .profile-pic .rounded-profile-picture { position: absolute; width: 100%; height: 68px; border-radius: 100%; top: 50%; transform: translateY(-50%); } .profile-pic .creator-badge { position: absolute; display: flex; width: 100%; bottom: 0; margin-bottom: 3px; justify-content: space-between; background: linear-gradient(0deg, rgba(214, 33, 52, 0.4), rgba(214, 33, 52, 0.4)), #282828; border: 1px solid #D62134; border-radius: 8px; margin-inline: 2px; } .profile-pic .creator-badge span { font-size: 8px; font-style: italic; margin-left: 8px; margin-top: 2px; letter-spacing: 0.333333px; } .user-name { padding: 10px; } .name { font-size: 16px; font-weight: 700; line-height: 150%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; } .username { font-size: 12px; font-weight: 400; line-height: 150%; color: #8F8F8F; } .followers { margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 150%; color: #D8D8D8; letter-spacing: 0.4px; } .alt-avatar { font-size: 70px !important; } .user-bio { margin-top: 12px; font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: 0.4px; } .buttons-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 7px; margin-top: 12px; } .buttons-wrapper .user-button { background-color: transparent; border: 1.5px solid #fff; border-radius: 8px; padding: 8px; font-size: 12px; font-weight: 600; color: #fff; } .buttons-wrapper .user-button:focus { outline: none; } .follow-button { margin-top: 12px; width: 100%; background-color: #0079FF; border: none; border-radius: 8px; padding: 8px; font-size: 12px; font-weight: 600; color: #fff; } .following-button { margin-top: 12px; width: 100%; background-color: #8F8F8F; border: none; border-radius: 8px; padding: 8px; font-size: 12px; font-weight: 600; color: #fff; } .profile-body { margin-top: 16px; padding: 16px; } .profile-body .body-header-visitor { color: #FFF; font-family: Open Sans; font-size: 14px; font-style: normal; font-weight: 700; line-height: 20px; letter-spacing: 0.1px; } .profile-body .title-header { font-size: 14px; font-weight: 700; line-height: 20px; } .profile-body .contents-wrapper { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 16px; } .profile-body .contents-wrapper .content-card { position: relative; border-radius: 8px; margin-bottom: 16px; font-weight: 600; } .profile-body .contents-wrapper .content-card .content-thumb { width: 100%; aspect-ratio: 9 / 16; border-radius: 8px; } .profile-body .contents-wrapper .content-card .content-title { padding: 0; margin-top: 5px; margin-bottom: 20px; font-size: 12px; line-height: 16.34px; display: flex; justify-content: space-between; gap: 1px; } .profile-body .contents-wrapper .content-card .content-title span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .profile-body .contents-wrapper .content-card .content-title .more-over { font-size: 15px; } .profile-body .contents-wrapper .content-card .content-seen { position: absolute; bottom: 0; padding: 0; margin-top: 5px; font-size: 10px; line-height: 14px; } .profile-body .contents-wrapper .content-card .content-seen .vis-icon { font-size: 15px; margin-right: 5px; } .profile-body .no-content-wrapper { margin-top: 38px; text-align: center; } .profile-body .no-content-wrapper .no-content-desc { margin: auto; padding-top: 4px; font-size: 12px; font-weight: 400; line-height: 18px; color: #8F8F8F; width: 70%; } .profile-body .no-content-wrapper .join-button { margin-top: 16px; background-color: #0079FF; border: none; border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 600; color: #fff; } .profile-body .no-content-wrapper .join-button:focus { outline: none; } .not-login { background-color: black; text-align: center; color: #fff; min-height: 100vh; position: relative; } .not-login .profile-navbar { background-color: #323232; font-size: 16px; font-weight: 400; line-height: 28px; padding: 12px; } .not-login .body-wrapper { width: 50%; position: absolute; top: 30%; transform: translateY(-50%); left: 50%; transform: translateX(-50%); } .not-login .user-icon { font-size: 60px; } .not-login .text-header { margin-top: 16px; font-size: 14px; font-weight: 700; } .not-login .text-desc { margin-top: 12px; color: #E9E9E9; font-size: 12px; font-weight: 400; } .not-login .login-button { margin-top: 16px; border: none; border-radius: 8px; background-color: #0079FF; padding: 8px 16px; color: #fff; font-size: 12px; font-weight: 600; width: 100%; } .not-login .login-button:focus { outline: none; } .profile-drawer { background-color: #323232; position: fixed; bottom: 0; width: 100%; border-top-left-radius: 24px; border-top-right-radius: 24px; padding-inline: 50px; color: #FFF; } .profile-drawer .top-line { margin-top: 4px; border: 2px solid #fff; border-radius: 2px; width: 70px; } .profile-drawer .header-share-drawer { text-align: center; font-size: 14px; font-weight: 700; } .profile-drawer .body-share-drawer { padding: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .profile-drawer .body-share-drawer .icon-share-wrapper { border: 1px solid #fff; aspect-ratio: 1/1; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; } .profile-drawer .body-share-drawer .icon-share-wrapper .icon-share { font-size: 30px; } .login-drawer { background-color: #323232; position: fixed; bottom: 0; width: 100%; border-top-left-radius: 24px; border-top-right-radius: 24px; padding: 24px; color: #FFF; text-align: center; } .login-drawer .body-wrapper { width: 50%; position: absolute; top: 30%; transform: translateY(-50%); left: 50%; transform: translateX(-50%); } .login-drawer .user-icon { font-size: 60px; } .login-drawer .text-header { margin-top: 16px; font-size: 14px; font-weight: 700; } .login-drawer .text-desc { margin-top: 12px; color: #E9E9E9; font-size: 12px; font-weight: 400; } .login-drawer .login-button { margin-top: 16px; border: none; border-radius: 8px; background-color: #0079FF; padding: 8px 16px; color: #fff; font-size: 12px; font-weight: 600; width: 100%; } .login-drawer .login-button:focus { outline: none; } .unfollow-drawer { background-color: #323232; position: fixed; bottom: 0; width: 100%; border-top-left-radius: 24px; border-top-right-radius: 24px; padding: 24px; color: #FFF; } .unfollow-drawer .text-confirm { font-size: 16px; font-weight: 700; } .unfollow-drawer .confirm-button-wrapper { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 16px; font-size: 12px; font-weight: 600; } .unfollow-drawer .confirm-button-wrapper .confirm-button { background-color: #F63F54; border: none; border-radius: 8px; padding: 8px; color: #fff; } .unfollow-drawer .confirm-button-wrapper .cancel-button { background-color: #fff; border: none; border-radius: 8px; padding: 8px; color: #646464; } .not-login-profile-navbar { text-align: center; color: #fff; background-color: #323232; font-size: 16px; font-weight: 400; line-height: 28px; padding: 12px; } .not-login-section-profile { padding: 16px; margin-top: 8px; } .not-login-section-profile .top-section { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: #fff; padding: 16px; border-radius: 8px; background: #323232; } .not-login-section-profile .top-section button { border: none; border-radius: 8px; background-color: #0079FF; padding: 4px 12px; color: #fff; font-size: 12px; font-weight: 600; } .not-login-section-profile .section-title { color: #8F8F8F; font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.5px; } .not-login-section-profile .section-list { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-size: 13px; line-height: 150%; color: #FCFCFC; padding: 18px 0 18px 0; border-bottom: 1px solid #323232; display: flex; justify-content: space-between; cursor: pointer; } .not-login-section-profile .section-list .icon { font-size: 20px; margin-right: 13px; } .not-login-section-profile .section-list .arrow-right { font-size: 17px; } .not-login-section-profile .section-list:last-child { border-bottom: none; } .modal-container { background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; right: 0; transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); } .bottom-profile-modal { background-color: #323232; color: #fff; position: fixed; bottom: 0; width: 100%; border-top-left-radius: 16px; border-top-right-radius: 16px; padding: 24px 0 12px 0; z-index: 99; } .floating-profile-modal { background-color: #323232; color: #fff; position: fixed; top: 50%; transform: translateY(-50%); border-radius: 16px; padding: 16px; z-index: 99; text-align: center; margin-inline: 24px; transition: all ease-out 0.3s; } .header-modal { display: flex; justify-content: space-between; padding-inline: 15px; } .header-modal .close-icon { font-size: 18px; } .title-modal { font-weight: 700; color: #FCFCFC; } .title-modal .join { font-size: 16px; } .title-modal .create { font-size: 14px; } .desc-create { font-weight: 400; font-size: 12px; letter-spacing: 0.1px; color: #8F8F8F; } .body-modal { margin-top: 10px; font-size: 12px; font-weight: 600; cursor: pointer; padding-inline: 15px; } .body-modal .del-btn { padding: 10px 0 10px 0; } .body-modal .del-icon { font-size: 20px; margin-right: 5px; } .body-modal-del-content { margin-top: 10px; padding: 12px 24px; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 16px; } .body-modal-del-content .cancel-del-button { background-color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 600; color: #646464; } .body-modal-del-content .cancel-del-button:focus { outline: none; } .body-modal-del-content .continue-del-button { background-color: #F63F54; border: none; border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 600; color: #fff; } .body-modal-del-content .continue-del-button:focus { outline: none; } .logo-modal { width: 60px; border-radius: 16px; padding: 10px; background-color: #000; margin-inline: auto; margin-bottom: 24px; } .logo-modal img { width: 100%; } .desc-modal { margin-top: 12px; color: #D8D8D8; font-size: 12px; font-weight: 400; } .open-app-button { margin-top: 24px; background-color: #0079FF; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; width: 100%; padding: 12px; } .not-now-button { margin-top: 12px; background-color: transparent; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; width: 100%; padding: 12px; } .modal-disconnect-container { position: absolute; background-color: #2F2D2D; border-radius: 31px; left: 50%; transform: translate(-50%, -50%); z-index: 999999; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .modal-disconnect-title { color: white; font-weight: 600; font-size: "18px"; text-align: center; margin-bottom: 10px; } .modal-disconnect-device-name { font-size: 14px; color: #8F8F8F; font-weight: 400; text-align: center; margin-bottom: 15px; } .modal-disconnect-button-wrapper { display: flex; gap: 15px; width: 100%; justify-content: center; margin-bottom: 20px; } .modal-disconnect-button-back { padding: 10px 19px; background-color: #D8D8D8; border-radius: 10px; border: unset; } .modal-disconnect-button-disconnect { padding: 10px 19px; background-color: #0079FF; border-radius: 10px; border: unset; } .button-disconnect-back-text { color: #646464; font-size: 15px; font-weight: 600; } .button-disconnect-text { color: #FFFFFF; font-size: 15px; font-weight: 600; } .modal-error-disconnect-container { background-color: #F63F54; border-radius: 4px; left: 50%; transform: translate(-50%, -50%); z-index: 999999; } .modal-error-disconnect-text { padding: 12px 16px; color: #FFFFFF; text-align: center; font-weight: 400; font-size: 12px; } .error-list-device-container { position: absolute; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; } .error-list-device-wrapper { display: flex; align-items: center; justify-content: center; flex-direction: column; } .error-list-device-text { font-size: 12px; font-weight: 600; color: #FFFFFF; margin-bottom: 15px; margin-top: 15px; width: 100%; } .error-list-device-button { padding: 8px 16px; background-color: #0079FF; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .error-list-device-button-text { font-size: 12px; font-weight: 600; color: #FFFFFF; } .manage-device-container { position: relative; } .tab-list-wrapper { display: flex; width: 100%; justify-content: space-around; color: white; align-items: center; } .tab-section { width: 100%; display: flex; justify-content: center; height: 52px; align-items: center; } .tab-section-name { font-weight: 700; font-size: 14px; } .selected-devices-list-container { padding: 25px 12px 0px 12px; } .selected-devices-logged-text { font-weight: 600; font-size: 12px; color: #8F8F8F; margin-bottom: 20px; } .selected-devices-list-wrapper { width: 100%; } .device-section { color: #FFFFFF; display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #323232; } .device-name { font-weight: 600; font-size: 13px; } .device-button-disconnect { font-weight: 600; font-size: 13px; color: #FA262F; } .overlay-screen-disconnect { width: 100%; background-color: #191919; opacity: 0.65; /* Use a decimal value for opacity */ z-index: 999998; position: absolute; top: 0; } .manage-device-container { margin-top: 50px; margin-bottom: 50px; height: calc(100vh - 100px); } .manage-device-wrapper { height: 100%; } .iframe-container { width: 100%; border: none; height: 100%; }