@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

*{
    font-family: 'Nunito', sans-serif;
}

@charset "UTF-8";:where(html) {
    --ease-1: cubic-bezier(.25, 0, .5, 1);
    --ease-2: cubic-bezier(.25, 0, .4, 1);
    --ease-3: cubic-bezier(.25, 0, .3, 1);
    --ease-4: cubic-bezier(.25, 0, .2, 1);
    --ease-5: cubic-bezier(.25, 0, .1, 1);
    --ease-in-1: cubic-bezier(.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(.5, 0, 1, 1);
    --ease-in-3: cubic-bezier(.7, 0, 1, 1);
    --ease-in-4: cubic-bezier(.9, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, .75, 1);
    --ease-out-2: cubic-bezier(0, 0, .5, 1);
    --ease-out-3: cubic-bezier(0, 0, .3, 1);
    --ease-out-4: cubic-bezier(0, 0, .1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
    --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
    --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
    --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
    --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
    --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
    --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
    --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
    --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
    --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
    --ease-elastic-in-1: cubic-bezier(.5, -.25, .75, 1);
    --ease-elastic-in-2: cubic-bezier(.5, -.5, .75, 1);
    --ease-elastic-in-3: cubic-bezier(.5, -.75, .75, 1);
    --ease-elastic-in-4: cubic-bezier(.5, -1, .75, 1);
    --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
    --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
    --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
    --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
    --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
    --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
    --ease-step-1: steps(2);
    --ease-step-2: steps(3);
    --ease-step-3: steps(4);
    --ease-step-4: steps(7);
    --ease-step-5: steps(10);
    --ease-elastic-1: var(--ease-elastic-out-1);
    --ease-elastic-2: var(--ease-elastic-out-2);
    --ease-elastic-3: var(--ease-elastic-out-3);
    --ease-elastic-4: var(--ease-elastic-out-4);
    --ease-elastic-5: var(--ease-elastic-out-5);
    --ease-squish-1: var(--elastic-in-out-1);
    --ease-squish-2: var(--elastic-in-out-2);
    --ease-squish-3: var(--elastic-in-out-3);
    --ease-squish-4: var(--elastic-in-out-4);
    --ease-squish-5: var(--elastic-in-out-5);
    --ease-spring-1: linear( 0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 );
    --ease-spring-2: linear( 0, .007, .029 2.2%, .118 4.7%, .625 14.4%, .826 19%, .902, .962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, .999 61.6%, .995 71.2%, 1 );
    --ease-spring-3: linear( 0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1 );
    --ease-spring-4: linear( 0, .009, .037 1.7%, .153 3.6%, .776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, .973, .955 39.2%, .953 41.1%, .957 43.3%, .998 53.3%, 1.009 59.1% 63.7%, .998 78.9%, 1 );
    --ease-spring-5: linear( 0, .01, .04 1.6%, .161 3.3%, .816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, .999 29.4%, .955 32.1%, .942, .935 34.9%, .933, .939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, .996 70.2%, 1.001 87.2%, 1 )
}

html {
    margin: 0;
    padding: 0
}

.theme-dark html {
    color: #dfdfdf;
    background: #000000
}

body {
    margin: 0;
    padding: 0;
    font-family: Nunito,sans-serif;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative
}

.theme-dark body {
    color: #dfdfdf;
    background: #000000
}

.full-height {
    min-height: 100vh
}

@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available
    }
}

select {
    margin: 5px 0;
    width: 100%;
    border: solid 1px;
    padding: 10px;
    font-family: Nunito,sans-serif;
    font-size: 1.4em;
    border-radius: 5px;
    color: #272727;
    border-color: #272727;
    background: #fdfdfd
}

textarea {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin: 5px 0;
    width: 100%;
    border: solid 1px;
    padding: 5px;
    font-family: Nunito,sans-serif;
    font-size: 1.4em;
    border-radius: 5px;
    color: #272727;
    border-color: #272727;
    background: #fdfdfd
}

h1 {
    margin: 0;
    padding: 0;
    font-size: 2em
}

.theme-dark h1 {
    color: #dfdfdf
}

h2 {
    margin: 0;
    padding: 0;
    font-size: 1.6em;
    font-weight: 700
}

.theme-dark h2 {
    color: #dfdfdf
}

h3 {
    margin: 0;
    padding: 0;
    font-size: 1.4em;
    font-weight: 700
}

.theme-dark h3 {
    color: #dfdfdf
}

.theme-dark a {
    color: #dfdfdf
}

p,li {
    font-size: 1.2em;
    margin: 0
}

ul {
    margin: 0
}

cite {
    font-style: normal
}

hr.gradient {
    border: 0;
    height: 1px;
    width: 50%;
    margin: 30px auto
}

.theme-dark hr.gradient {
    background: -ms-linear-gradient(to right,#202020,#a9a9a9,#202020);
    background-image: linear-gradient(to right,#202020,#a9a9a9,#202020)
}

.mt {
    margin-top: .5em
}

.mb {
    margin-bottom: .5em
}

#logo svg {
    max-width: 100%;
    height: auto
}

#logo svg {
    fill: #272727
}

.theme-dark #logo svg {
    fill: #dfdfdf
}

.footer-logo {
    height: 10pt
}

.footer-logo {
    fill: #272727
}

.theme-dark .footer-logo {
    fill: #dfdfdf
}

.menu-title {
    font-size: 1.5em
}

.menu-button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    display: block;
    margin: 10px 0;
    font-family: Nunito,sans-serif;
    text-decoration: none;
    font-weight: 400;
    font-size: 1.5em;
    padding: .5em 0;
    cursor: pointer;
    outline: none;
    border-radius: 15px;
    text-align: center;
    width: 100%;
    border: 0
}

.theme-dark .menu-button {
    color: #202020;
    background: #64b5f6
}

.menu-tab {
    margin: 10px 0;
    font-size: 1.5em;
    padding: .5em 0;
    cursor: pointer;
    border-radius: 15px;
    text-align: center;
    width: 100%;
    border: 0
}

.theme-dark .menu-tab {
    background: #64b5f6
}

.theme-dark .disabled {
    background: #323232;
    color: #dfdfdf
}

.theme-dark .enabled {
    background: #64b5f6;
    color: #202020
}

.field {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 5px;
    font-size: 1em;
    margin-bottom: 5px;
    border-radius: 5px;
    border: solid 1px;
    color: #272727;
    border-color: #272727;
    background: #fdfdfd
}

.form-line {
    position: relative
}

.form-input-btn {
    padding-right: 35px
}

.form-btn {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 32px;
    height: 44px;
    font-size: 2em;
    border-radius: 5px;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    color: #7d7d7d;
    z-index: 2
}

.form-checkbox-container {
    margin: .5rem 0
}

.form-button-container {
    margin: 1rem 0 0
}

.form-link {
    font-size: .8em;
    padding: 6px
}

.form-button {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    font-size: 1em;
    padding: 14px 16px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    transform: translateY(0);
    box-shadow: rgba(0,0,0,.3) 0 2px 2px;
    transition: transform .35s;
    margin: 0;
    line-height: 1.2;
    text-decoration: none
}

.form-button:hover {
    transform: translateY(-5px);
}

.bg-primary {
    background: #272727;
    color: #fdfdfd!important
}

.theme-dark .bg-primary {
    background: #dfdfdf;
    color: #202020!important
}

.my {
    margin-bottom: .5rem;
    margin-top: .5rem
}

.mx {
    margin-left: .5rem;
    margin-right: .5rem
}

.bg-accent {
    background: #1976d2;
    color: #fdfdfd!important
}

.theme-dark .bg-accent {
    background: #64b5f6;
    color: #202020!important
}

.hr-dotted {
    border: none;
    border-top: dotted 1px
}

.hr-dotted {
    border-color: #272727
}

.theme-dark .hr-dotted {
    border-color: #dfdfdf
}

.btn-sign {
    display: inline-block;
    cursor: pointer;
    margin-right: 5px
}

.btn-sign-icon {
    padding: 2px 4px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 8px;
    height: 36px;
    border: solid 4px;
    background: #fdfdfd
}

.btn-sign-icon {
    border-color: #1976d2
}

.theme-dark .btn-sign-icon {
    border-color: #64b5f6
}

#errors,.errors,.message {
    width: 100%;
    text-align: center;
    margin: 10px auto
}

.theme-dark #errors,.theme-dark #errors a,.theme-dark .errors,.theme-dark .errors a {
    color: #e57373
}

.errors {
    width: 100%;
    text-align: center;
    margin: 10px auto
}

.relative {
    position: relative
}

.form-control {
    position: relative;
    width: 100%;
    height: 3rem;
    margin-top: 1.5rem;
    margin-bottom: .5rem
}

.form-label {
    position: absolute;
    font-family: inherit;
    font-size: 1.2em;
    font-weight: 400;
    line-height: inherit;
    left: 5px;
    top: 10px;
    padding: 0 5px;
    transition: all .3s ease;
    z-index: 2;
    border-radius: 4px;
    color: #7d7d7d;
    background: #fdfdfd
}

.form-input {
    position: absolute;
    font-family: inherit;
    font-size: 1.2em;
    font-weight: 400;
    line-height: inherit;
    top: 0;
    left: 0;
    z-index: 1;
    resize: none;
    width: 100%;
    height: auto;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #272727;
    background: transparent;
    transition: all .2s ease-in-out;
    color: #272727;
    background: #fdfdfd
}

.form-input::-moz-placeholder {
    opacity: 0;
    visibility: hidden;
    color: transparent
}

.form-input::placeholder {
    opacity: 0;
    visibility: hidden;
    color: transparent
}

.form-input:focus {
    outline: none;
    border: 2px solid #1976d2
}

.form-input:focus~.form-label {
    top: -10px;
    left: 10px;
    z-index: 2;
    font-size: .9em;
    font-weight: 500;
    transition: all .2s ease-in-out;
    color: #1976d2;
    font-weight: 700
}

.form-input:not(:-moz-placeholder-shown).form-input:not(:focus)~.form-label {
    top: -10px;
    left: 10px;
    z-index: 2;
    font-size: .9em;
    font-weight: 500;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font-weight: 700;
    color: #272727
}

.form-input:not(:placeholder-shown).form-input:not(:focus)~.form-label {
    top: -10px;
    left: 10px;
    z-index: 2;
    font-size: .9em;
    font-weight: 500;
    transition: all .2s ease-in-out;
    font-weight: 700;
    color: #272727
}

.form-big .form-control {
    height: 3.3rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem
}

.form-big .form-label,.form-big .form-input {
    font-size: 1.4em
}

.form-big .form-btn {
    height: 49px;
    padding-top: 3px
}

.theme-dark .is-invalid {
    border: 2px solid #e57373;
    color: #e57373
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.flex-col-50 {
    width: 100%
}

@media screen and (min-width: 768px) {
    .flex-col-50 {
        width:calc(50% - 10px)
    }
}

section {
    margin: 20px 0
}

.form-home {
    margin: 10px 0;
    padding: 30px;
    border-radius: 8px;
    color: #272727;
    background: #dcdcdc
}

.form-home a,.form-home h2 {
    color: #272727
}

.form-home input[type=checkbox] {
    width: 18px;
    height: 18px;
    vertical-align: bottom
}

.form-home .bg-primary {
    background: #272727;
    color: #fdfdfd!important
}

.form-home .bg-accent {
    background: #1976d2;
    color: #fdfdfd!important
}

.form-home .btn-sign-icon {
    border-color: #1976d2
}

.argu-wrapper{
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    padding: 0 2rem;
    display: flex;
    flex-direction: row;
}

.argument-home {
    background-color: #2c303a;
    padding: 1.5rem 1.5rem 2rem;
    margin: 2rem 0;
    border-radius: 10px;
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 20px;
    flex-wrap: wrap
}

.argument-home h2{
    font-size: 28px;
}

.argument-home p{
    font-size: 17px;
}

.argument-home aside{
    margin-top: -60px;
    margin-bottom: 1.5rem;
    background-color: #131417;
    border-radius: 10px;
    width: 75px;
    height: 125px;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(6px 0 6px #000);
}

.argument-home aside {
    font-size: 50pt;
    margin-right: 20px;
    width: 100%;
    text-align: center
}

.argument-home aside {
    color: #1976d2
}

.theme-dark .argument-home aside {
    color: #64b5f6
}

@media screen and (min-width: 768px) {
    .argument-home aside {
        width:90pt
    }
}

.argument-home div {
    width: 100%
}

@media screen and (min-width: 768px) {
    .argument-home div {
        width:calc(100% - 90pt - 20px)
    }
}

.video-home {
    display: inline-block;
    padding: 10px;
    margin: 20px auto;
    border-radius: 10px;
    width: 600px;
    max-width: 100%
}

.theme-dark .video-home {
    background: #64b5f6
}

.video-home p {
    margin-top: 10px;
    text-align: center;
    font-weight: 700;
    font-style: italic
}

.theme-dark .video-home p {
    color: #202020
}

.video-home-container {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.video-home-container iframe {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.center-card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 130px);
    width: 100%
}

.center-card {
    display: block;
    border-radius: 10px;
    padding: 16px
}

@media screen and (min-width: 768px) {
    .center-card {
        width:500px
    }
}

.theme-dark .center-card {
    background: #202020;
    box-shadow: 0 2px 10px rgba(255,255,255,.14),0 5px 22px 4px rgba(255,255,255,.12),0 7px 8px -4px rgba(255,255,255,.2)
}

.locks-list {
    min-height: 42px
}

.alert {
    text-align: center
}

.controls {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    margin: 2px;
    border: solid 1px;
    border-radius: 5px;
    padding: 5px;
    height: 32px;
    min-width: 32px;
    text-align: center;
    cursor: pointer
}

.theme-dark .controls {
    border-color: #dfdfdf
}

.controls .fa {
    font-size: 20px;
    text-align: center;
    min-width: 20px;
    vertical-align: top
}

.controls .l {
    display: inline
}

.usertop {
    padding: 0 10px
}

#actualdir {
    display: inline-block;
    margin: 5px 4px 5px 0;
    padding: 5px 10px;
    line-height: 1em;
    border: solid 1px;
    height: 32px;
    width: calc(100% - 85px);
    border-radius: 5px
}

.theme-dark #actualdir {
    background: #202020;
    color: #dfdfdf;
    border-color: #dfdfdf
}

#icondir {
    display: inline-block;
    margin-right: 5px
}

.nav-locks {
    display: flex;
    gap: 4px;
    font-size: 1.2em
}

.list-locks {
    margin-bottom: 10px
}

.locks-list {
    padding: 5px 0;
    border-top: dotted 1px
}

.theme-dark .locks-list {
    border-color: #dfdfdf
}

.theme-dark .locks-list:hover {
    background: #323232
}

.locks-list:last-of-type {
    padding: 5px 0;
    border-bottom: dotted 1px
}

.theme-dark .locks-list:last-of-type {
    border-color: #dfdfdf
}

.locks-list .lock {
    width: 22px;
    height: 22px;
    vertical-align: middle
}

.locks-list label {
    display: inline-block;
    width: calc(100% - 260px);
    vertical-align: middle;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word
}

.locks-list-top {
    padding: 5px 0;
    font-size: 1.2em
}

.locks-list-top .lock {
    width: 22px;
    height: 22px;
    vertical-align: middle
}

.locks-list-top label {
    display: inline-block;
    width: calc(100% - 149px);
    font-size: 1.2em;
    font-weight: 700;
    vertical-align: middle;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word
}

.lock-controls {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px
}

#zonedir {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap
}

#zonedir .dir {
    display: block;
    width: 120px;
    max-width: 33%;
    text-align: center;
    cursor: pointer
}

#zonedir .dir .label {
    font-size: 1em;
    margin-top: -20px;
    overflow: hidden;
    padding: 10px;
    font-weight: 700
}

#zonedir .dir .numberlocks {
    font-size: .8em;
    margin-top: -20px;
    padding: 10px
}

#zonedir .dir .icon {
    position: relative;
    font-size: 60px
}

/* ------------- FAQ - HOMEPAGE ------------- */

  .speedyui-faq{
    background-color: #dcdcdc;
    padding: 30px;
    border-radius: 8px;
    color: #272727;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .speedyui-faq .accordion {
    background-color: transparent;
  }

  .speedyui-faq .accordion .accordion-item {
    background-color: transparent;
  }
  
  .speedyui-faq .accordion .accordion-button {
    transition: all .3s;
    background-color: #fff;
    color: #272727;
  }

  .speedyui-faq .accordion .accordion-button:hover {
    background-color: rgba(77, 166, 255, 0.8);
  }

  /* ---------------------------------------- */

.contact{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 18em;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.contact-div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 11.5rem 0;
}

.ccc{
    margin: 0 9.375em;
}

#bis{
    margin: 10px 0;
    border: none;
    border-radius: 8px;
    width: 100%;
    padding: 10px 0 10px 15px;
}

#submit-contact{
    margin-top: 30px;
    border: none;
    background-color: #2d88e4;
    border-radius: 20px;
    font-size: 15px;
    padding: 9px 30px;
    transition: border, background-color, color, .35s;
}

#submit-contact:hover{
    border: 2px solid #2d88e4;
    background-color: transparent;
    color: #fff;
}

.dir:hover div svg{
    transform: translateY(-7px);
    color: #2d88e4;
    transition: .35s;
}

.list-locks {
    padding: 0;
    list-style: none
}

input[type=checkbox].lock {
    position: relative;
    border: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin-right: 10px;
    cursor: pointer;
    outline: 0
}

input[type=checkbox].lock:checked:before {
    content: "";
    position: absolute;
    top: 0;
    left: 7px;
    display: table;
    width: 6px;
    height: 12px;
    border: 2px solid;
    border-top-width: 0;
    border-left-width: 0;
    transform: rotate(45deg)
}

.theme-light input[type=checkbox].lock:checked:before {
    border-color: #fdfdfd
}

.theme-dark input[type=checkbox].lock:checked:before {
    border-color: #202020
}

.theme-light input[type=checkbox].lock:checked:after {
    background: #1976d2
}

.theme-dark input[type=checkbox].lock:checked:after {
    background: #64b5f6
}

input[type=checkbox].lock:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -2px;
    border-radius: 2px;
    transition: .24s;
    border: 2px solid;
    margin-bottom: -6px
}

.theme-light input[type=checkbox].lock:after {
    border-color: #272727
}

.theme-dark input[type=checkbox].lock:after {
    border-color: #dfdfdf
}

#loading {
    display: none
}

.qrscan {
    width: 280px;
    height: 280px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    background: #dcdcdc;
    background-image: url(/build/assets/camera-b1bfddd2.png)
}

.buttonscan {
    display: block;
    width: 280px;
    text-align: center;
    font-size: 1.2em;
    cursor: pointer;
    padding: 10px
}

.theme-light .buttonscan {
    background: #7d7d7d;
    color: #fdfdfd
}

.theme-dark .buttonscan {
    background: #a9a9a9;
    color: #202020
}

.nextlock {
    display: table;
    text-align: center;
    margin: 20px auto;
    border: solid 1px;
    padding: 10px;
    border-radius: 10px
}

.theme-light .nextlock {
    border-color: #272727
}

.theme-dark .nextlock {
    border-color: #dfdfdf
}

img.qrcode,img.lck-preview {
    max-width: 240px;
    border-radius: 5px;
    background: #fdfdfd
}

#actions .itemaction,#types .itemtype {
    font-size: 1.5em;
    line-height: 1.5em;
    padding: .5em 0;
    cursor: pointer;
    border-radius: 15px;
    text-align: center;
    margin: 10px 0
}

#contentI #imagecontainer,#contentS #soundcontainer {
    position: relative;
    width: calc(100% - 30px);
    border-radius: 5px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin: 5px 30px 5px 0;
    height: 3rem;
    line-height: 1.5rem
}

.theme-light #contentI #imagecontainer,.theme-light #contentS #soundcontainer {
    background: #1976d2
}

.theme-dark #contentI #imagecontainer,.theme-dark #contentS #soundcontainer {
    background: #64b5f6
}

#contentI #nameimage,#contentS #namesound {
    text-align: center;
    border-top: solid 1px;
    margin: 3px
}

.theme-light #contentI #nameimage,.theme-light #contentS #namesound {
    border-top-color: #272727
}

.theme-dark #contentI #nameimage,.theme-dark #contentS #namesound {
    border-top-color: #dfdfdf
}

#contentI #imagelabel,#contentS #soundlabel {
    display: block;
    font-size: 1.4em;
    transition: all .4s;
    cursor: pointer;
    padding: 12px;
    text-align: center;
    overflow-x: hidden;
    word-break: break-word
}

.theme-light #contentI #imagelabel,.theme-light #contentS #soundlabel {
    color: #fdfdfd
}

.theme-dark #contentI #imagelabel,.theme-dark #contentS #soundlabel {
    color: #202020
}

#contentI #image,#contentS #sound {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

#contentI #outputimagecontainer,#contentS #outputsoundcontainer {
    width: 100%;
    text-align: center;
    margin: 3px
}

#contentI #outputimage {
    max-height: 100px;
    max-width: 150px
}

#contentS #outputsound {
    width: 100%
}

.title {
    margin: .5em auto;
    font-size: 1.4em;
    text-align: center
}

.subtitle {
    margin: .5em auto;
    font-size: 1em;
    font-style: italic;
    text-align: center
}

.pad {
    table-layout: fixed;
    width: 320px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse
}

.pad2 {
    table-layout: fixed;
    width: 210px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse
}

.pad table,.pad2 table {
    width: 100%
}

.pad table td {
    width: 33.33%
}

.pad2 table td {
    width: 50%
}

.pad label,.pad2 label {
    display: block;
    width: 100%
}

.restart {
    width: auto;
    height: 35px;
    line-height: .9em;
    font-size: 2em;
    border-radius: 10px;
    font-family: sans-serif;
    text-align: center;
    cursor: pointer;
    margin: 3px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.confirm {
    width: auto;
    height: 35px;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    margin: 3px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.theme-light .confirm {
    background: #388e3c;
    color: #fdfdfd
}

.theme-dark .confirm {
    background: #81c784;
    color: #202020
}

.confirm input {
    width: 100%;
    background: transparent;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 1em;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    display: block;
    border: 0;
    padding: 0
}

.theme-light .confirm input {
    color: #fdfdfd
}

.theme-dark .confirm input {
    color: #202020
}

.cancel {
    width: auto;
    height: 35px;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    margin: 3px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.theme-light .cancel {
    background: #d32f2f;
    color: #fdfdfd
}

.theme-dark .cancel {
    background: #e57373;
    color: #202020
}

.theme-light .delete {
    background: #dcdcdc
}

.theme-dark .delete {
    background: #323232
}

.topnav {
    overflow: hidden;
    margin-bottom: 20px;
    min-height: 80px;
    background: #272727;
    display: flex;
    justify-content: center;
    align-items: center;
}

.topnav a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 25px;
    text-decoration: none;
    color: #fff;
    transform: translateY(0);
    transition: color, transform, scale, .35s;
    font-size: 17px;
    scale: 1;
    border-radius: 20px;
}

#btn_create:hover{
    scale: 1.05;
    padding: 14px 45px;
}

#mlien:hover {
    color: #2d88e4;
    transform: translateY(-4px);
}

.topnav a.active {
    color: #fff;
    background: #1976d2
}

.topnav #topnavbuttons {
    position: absolute;
    top: 0;
    right: 0
}

.topnav .logoutbtn,.topnav .themebtn,.topnav .topnavbtn {
    float: left!important;
    font-size: 22px;
    padding: 11px 10px 9px;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background: #272727
}

.topnav.responsive a,.topnav.responsive .dropdown,.topnav.responsive .dropdown-content a {
    float: none;
    display: block;
    text-align: left
}

.topnav.responsive .dropbtn {
    width: 100%;
    text-align: left
}

.topnav.responsive .dropdown-content {
    position: initial
}

#logoo{
    width: 3em;
    height: auto;
}

.topnavLogo {
    padding: 18px!important;
    margin: 0;
    line-height: 0;
    background-image: url("logo.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.topnavLogo:hover {
    background-image: url("logo-hover.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.topnavLogo svg {
    height: 18px;
    fill: #fdfdfd
}

.svg-icon {
    fill: currentColor;
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,.2);
    z-index: 10;
    background: #fdfdfd
}

.dropdown-content a {
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    color: #272727
}

.dropdown-content a:hover {
    background-color: #bbb;
    color: #000
}

.dropdown {
    float: left;
    overflow: hidden
}

.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    padding: 14px 10px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    cursor: pointer;
    color: #fdfdfd
}

.dropdown:hover .dropbtn {
    background-color: #444;
    color: #fff
}

.dropdown:hover .dropdown-content {
    display: block
}

#myDropzone {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 6px dashed #2d88e4;
    width: 80%;
    margin: 20px 0;
    padding: 20px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    background: #66b6e43d;
}

#dropzone .btn {
    position: relative;
    overflow: hidden
}

#dropzone .btn input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    border: solid transparent;
    width: 100%;
    opacity: 0;
    cursor: pointer
}

.theme-light .button {
    background: #1976d2;
    color: #fdfdfd
}

.theme-dark .button {
    background: #64b5f6;
    color: #202020
}

#btnApiStart, .start {
    background: #2d88e4;
}

.theme-dark #btnApiStart,.theme-dark .start {
    background: #2d88e4;
    color: #fff;
    transition: transform .35s;
}

.start:hover {
    transform: translateY(-5px);
}

.theme-light #btnApiCancel,.theme-light .stop {
    background: #d32f2f
}

.theme-dark #btnApiCancel,.theme-dark .stop {
    background: #e57373
}

.theme-light #btnApiReset,.theme-light .clear {
    background: #7d7d7d
}

.theme-dark #btnApiReset,.theme-dark .clear {
    background: #a9a9a9
}

#files button {
    border-color: transparent
}

.progress {
    display: flex;
    height: 2em;
    overflow: hidden;
    font-size: .75rem;
    border-radius: .25rem;
}

.theme-dark .progress {
    background: #323232;
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 1em 0
    }

    to {
        background-position: 0 0
    }
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition: width .6s ease
}

.theme-light .progress-bar {
    background: #1976d2;
    color: #fdfdfd
}

.theme-dark .progress-bar {
    background: #64b5f6;
    color: #202020
}

.progress-bar-striped {
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem
}

.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite
}

.theme-light .bg-error,.theme-light .bg-danger {
    background: #d32f2f;
    color: #fdfdfd!important
}

.theme-dark .bg-error,.theme-dark .bg-danger {
    background: #e57373;
    color: #202020!important
}

.bg-warning {
    color: #272727
}

.theme-dark .bg-warning {
    background: #ff6748!important
}

.theme-dark .bg-success {
    color: #202020;
    background: #81c784!important
}

.theme-dark .text-error {
    color: #e57373
}

.theme-dark .text-warning {
    color: #ff6748
}

.theme-dark .text-success {
    color: #81c784
}

#question {
    font-size: 1.5em;
    border-radius: 15px;
    text-align: center
}

.body-faq{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#btn_contact_faq{
    background-color: #2d88e4;
    border-radius: 8px;
    padding: 10px 25px;
    transition: background-color, border, transform .35s;
}

#btn_contact_faq:hover{
    background-color: transparent;
    border: 2px solid #2d88e4;
    transform: translateY(-7px);
}

.faq {
    padding: 0
}

.faq li.q {
    padding: 10px;
    list-style: none;
    margin: 8px 0;
    cursor: pointer;
    position: relative;
    border-left: 5px solid;
    transform: translate(0px);
    color: #fff;
    transition: transform, color, .35s;
}

.faq li.q:hover{
    transform: translateX(5px);
    color: #559de6;
}

.theme-dark .faq li.q {
    border-left-color: #2d88e4;
    background: #323232;
    box-shadow: 0 0 2px #323232;
    border-radius: 8px;
}

.faq li.a {
    display: none;
    padding: 10px;
    list-style: none;
    position: relative;
    width: 60rem;
}

.faq li * {
    font-size: 1em
}

.account-list-oauth {
    padding: 0;
    list-style: none
}

.account-list-oauth li {
    list-style: none;
    text-indent: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 10px 0
}

.account-list-oauth li .account-icon {
    display: block;
    height: 24px;
    width: 24px
}

.account-list-oauth button {
    margin-top: 0
}

body.modal-open {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed
}

#hidepage {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
    background-color: rgba(0,0,0,.8);
    z-index: 90
}

.modal {
    display: none;
    position: fixed;
    z-index: 100;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    overflow: auto
}

.modal-container {
    position: relative;
    margin: auto;
    padding: 0;
    width: 80%;
    max-width: 600px;
    box-shadow: 0 4px 8px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.19);
    border-radius: 15px;
    border: solid 4px
}

.theme-light .modal-container {
    background: #1976d2;
    border-color: #1976d2
}

.theme-dark .modal-container {
    background: #64b5f6;
    border-color: #64b5f6
}

.modal-header {
    padding: 0 8px;
    border-radius: 8px 8px 0 0;
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.6em
}

.theme-light .modal-header {
    background: #1976d2;
    color: #fdfdfd
}

.theme-dark .modal-header {
    background: #64b5f6;
    color: #202020
}

.close {
    float: right;
    font-size: 35px;
    font-weight: 700;
    line-height: .9em
}

.theme-light .close {
    color: #fdfdfd
}

.theme-dark .close {
    color: #202020
}

.close:hover,.close:focus {
    text-decoration: none;
    cursor: pointer
}

.modal-body {
    border-radius: 0 0 10px 10px
}

.theme-light .modal-body {
    background: #fdfdfd
}

.theme-dark .modal-body {
    background: #202020
}

.modal-content {
    padding: 10px 10px 0
}

.modal-footer {
    padding: 5px;
    text-align: right
}

.modal-button {
    border-radius: 15px;
    font-family: sans-serif;
    font-weight: 900;
    text-align: center;
    margin: 3px;
    display: inline-block;
    font-size: 1em;
    padding: 5px 15px;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.theme-light .modal-red {
    background: #d32f2f;
    color: #fdfdfd
}

.theme-dark .modal-red {
    background: #e57373;
    color: #202020
}

.theme-light .modal-green {
    background: #388e3c;
    color: #fdfdfd
}

.theme-dark .modal-green {
    background: #81c784;
    color: #202020
}

.theme-light .modal-gray {
    background: #7d7d7d;
    color: #fdfdfd
}

.theme-dark .modal-gray {
    background: #a9a9a9;
    color: #202020
}

.hyperlink {
    text-decoration: underline;
    cursor: pointer
}

#report {
    display: none
}

#footer {
    bottom: 0;
    margin-top: 8em;
    font-size: .8em;
    width: 100%;
    height: 12em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #272727;
}

#footer h7{
    letter-spacing: 2px;    
}

.btn_footer{
    display: flex;
    width: 20em;
    justify-content: space-evenly;
    margin-bottom: 1.2em;
}

#btn_foo{
    display: flex;
    color: #fff;
    font-size: 15px;
    margin: 5px;
    background-color: #2d88e4;
    padding: 8px 15px;
    border-radius: 8px;
    justify-content: center;
    transform: translateY(0);
    transition: transform .35s;
}

#btn_foo:hover{
    border: 2px solid #2d88e4;
    background-color: transparent;
    transform: translateY(-5px);
}

#translate-flags {
    margin: 10px
}

.link {
    font-size: 1.5em;
    overflow-wrap: break-word
}

.button {
    text-decoration: none;
    margin: 4px 0;
    display: inline-block;
    padding: 4px;
    border-radius: 10px;
    position: relative;
    cursor: pointer
}

.button span {
    margin: auto 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer
}

#recaptcha {
    display: none
}

.sun-and-moon {
    fill: currentColor;
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em
}

.sun-and-moon>:is(.moon,.sun,.sun-beams) {
    transform-origin: center
}

.sun-and-moon>:is(.moon,.sun) {
    fill: #fdfdfd
}

.sun-and-moon>.sun-beams {
    stroke: #fdfdfd;
    stroke-width: 2px
}

.theme-dark .sun-and-moon>.sun {
    transform: scale(1.75)
}

.theme-dark .sun-and-moon>.sun-beams {
    opacity: 0
}

.theme-dark .sun-and-moon>.moon>circle {
    transform: translate(-7px)
}

@supports (cx: 1) {
    .theme-dark .sun-and-moon>.moon>circle {
        cx: 17;
        transform: translate(0)
    }
}

@media (prefers-reduced-motion: no-preference) {
    .sun-and-moon>.sun {
        transition: transform .5s var(--ease-elastic-3)
    }

    .sun-and-moon>.sun-beams {
        transition: transform .5s var(--ease-elastic-4),opacity .5s var(--ease-3)
    }

    .sun-and-moon .moon>circle {
        transition: transform .25s var(--ease-out-5)
    }

    @supports (cx: 1) {
        .sun-and-moon .moon>circle {
            transition: cx .25s var(--ease-out-5)
        }
    }

    .theme-dark .sun-and-moon>.sun {
        transition-timing-function: var(--ease-3);
        transition-duration: .25s;
        transform: scale(1.75)
    }

    .theme-dark .sun-and-moon>.sun-beams {
        transition-duration: .15s;
        transform: rotate(-25deg)
    }

    .theme-dark .sun-and-moon>.moon>circle {
        transition-duration: .5s;
        transition-delay: .25s
    }
}

#warning {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    padding: 5%;
    z-index: 1000;
    background: #fdfdfd
}

@media screen and (min-width: 320px) {
    #warning {
        display:none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }
}

#warning-message {
    margin: auto
}

#wrapper {
    display: none;
    margin: 0 auto;
    width: 90vw;
    position: relative;
}

@media screen and (min-width: 320px) {
    #wrapper {
        display:block
    }
}

#footer {
    padding: 1em 0
}

* {
    box-sizing: border-box
}

.lck-wrapper svg.preview {
    width: 200px;
    margin-right: calc(100% - 200px)
}

.lck-wrapperlock {
    text-align: center;
    touch-action: manipulation;
}

.lck-wrapperlock svg {
    background-color: #2d88e4;
    border-radius: 5px;
}

.lck-name {
    margin: .5em auto;
    font-size: 1.4em;
    text-align: center;
    font-weight: 700
}

.lck-underline {
    border-bottom: dotted 1px
}

.theme-dark .lck-underline {
    border-color: #dfdfdf
}

.lck-title {
    margin: .5em auto;
    font-size: 1.4em;
    text-align: center
}

.lck-subtitle {
    margin: .5em auto;
    font-size: 1em;
    font-style: italic;
    text-align: center
}

.lck-wrongcode {
    display: none;
    position: absolute;
    text-align: center;
    border-radius: 10px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: opacity .2s;
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.theme-dark .lck-wrongcode {
    background: #e57373;
    color: #202020
}

.lck-wrongcode .alert {
    position: absolute;
    top: calc(50% - 1em);
    width: 100%;
    font-size: 2em
}

.lck-code {
    text-align: center;
    margin: 1rem auto
}

.lck-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.lck-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr
}

.lck-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.lck-grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr
}

.lck-gap-4 {
    gap: 4px
}

.lck-gap-5 {
    gap: 5px
}

.lck-gap-6 {
    gap: 6px
}

.lck-gap-7 {
    gap: 7px
}

.lck-gap-8 {
    gap: 8px
}

.lck-touch {
    height: auto;
    border-radius: 15px;
    font-family: Nunito,sans-serif;
    text-align: center;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.lck-touch:hover {
    scale: 1.1;
}

.theme-dark .lck-touch {
    background: #64b5f6;
    color: #202020;
    fill: #202020;
}

.lck-restart {
    width: auto;
    height: 35px;
    line-height: .9em;
    font-size: 2em;
    border-radius: 10px;
    font-family: sans-serif;
    text-align: center;
    cursor: pointer;
    margin: 3px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.lck-confirm {
    width: auto;
    height: 35px;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    margin: 3px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.theme-dark .lck-confirm {
    background: #81c784;
    color: #202020
}

.lck-confirm input {
    width: 100%;
    background: transparent;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 1em;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    display: block;
    border: 0;
    padding: 0
}

.theme-dark .lck-confirm input {
    color: #202020
}

.lck-cancel {
    width: auto;
    height: 35px;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    margin: 3px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.theme-dark .lck-cancel {
    background: #e57373;
    color: #202020
}

.theme-dark .lck-delete {
    background: #323232
}

.lck-plus,.lck-minus {
    width: auto;
    height: 35px;
    line-height: .9em;
    font-size: 2em;
    border-radius: 10px;
    font-family: sans-serif;
    text-align: center;
    cursor: pointer;
    margin: 3px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.lck-preview {
    margin: 0;
    font-size: .5em;
    text-align: left!important
}

.lck-preview span,.lck-preview img {
    margin: 2px
}

.lck-mini {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    line-height: 46px;
    font-size: 36px;
    text-align: center
}

.lck-color-0 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: red;
    border: 3px solid #fff;
}

.lck-color-1 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: orange;
    border: 3px solid #fff;
}

.lck-color-2 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: yellow;
    border: 3px solid #fff;
}

.lck-color-3 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: green;
    border: 3px solid #fff;
}

.lck-color-4 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: blue;
    border: 3px solid #fff;
}

.lck-color-5 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: purple;
    border: 3px solid #fff;
}

.lck-color-6 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: pink;
    border: 3px solid #fff;
}

.lck-color-7 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: brown;
    border: 3px solid #fff;
}

.lck-color-8 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: #4B0082;
    border: 3px solid #fff;
}

.lck-color-9 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: black;
    border: 3px solid #fff;
}

.lck-color-10 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: white;
}

.lck-color-11 {
    display: inline-block;
    border-radius: 5px;
    width: 46px;
    height: 46px;
    margin: 3px;
    background-color: grey;
    border: 3px solid #fff;
}

.bb{
    border: 2px solid #fff;
}

.theme-dark .lck-mini {
    background: #dfdfdf;
    color: #202020;
    fill: #202020
}

.lck-preview .lck-mini {
    width: 23px;
    height: 23px;
    line-height: 23px;
    font-size: 18px
}

svg.lck-mini {
    padding: 2px
}

.lck-lock-container,.lck-lock-container-full {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    max-width: 100%
}

.lck-lock-container-full {
    width: 100%
}

.lck-margin-top {
    margin-top: .5rem
}

.lck-pad {
    table-layout: fixed;
    width: 320px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse
}

.lck-pad table,.lck-pad2 table {
    width: 100%
}

.lck-pad table td {
    width: 33.33%
}

.lck-pad2 table td {
    width: 50%
}

.lck-pad .lck-full-label,.lck-pad2 .lck-full-label {
    display: block;
    width: 100%;
    text-align: left
}

.lck-directions .lck-touch svg {
    width: 80%;
    height: auto;
    vertical-align: middle
}

.lck-numbers .lck-touch {
    font-size: 3em
}

.lck-colors .lck-touch {
    font-size: 1em;
    padding: 1em 0
}

.lck-codeentry {
    width: 100%;
    border: solid 1px;
    padding: 5px;
    font-family: Nunito,sans-serif;
    font-size: 1.4em;
    border-radius: 5px;
    margin: 3px 0;
    background: #fdfdfd;
    color: #1976d2;
    border-color: #272727
}

.lck-tor {
    width: 100%;
    text-align: center;
    margin: .5rem 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.lck-field-control {
    position: relative;
    width: 100%;
    height: 3.3rem;
    margin: 0 auto;
    margin-top: .75rem
}

.lck-field-label {
    position: absolute;
    font-family: inherit;
    font-size: 1.4em;
    font-weight: 400;
    line-height: inherit;
    left: 5px;
    top: 10px;
    padding: 0 5px;
    transition: all .3s ease;
    z-index: 2;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: #7d7d7d;
    background: #fdfdfd
}

.lck-field-input {
    position: absolute;
    font-family: inherit;
    font-size: 1.4em;
    font-weight: 400;
    line-height: inherit;
    top: 0;
    left: 0;
    z-index: 1;
    resize: none;
    width: 100%;
    height: auto;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #272727;
    background: transparent;
    transition: all .2s ease-in-out;
    color: #272727;
    background: #fdfdfd
}

.lck-field-input::-moz-placeholder {
    opacity: 0;
    visibility: hidden;
    color: transparent
}

.lck-field-input::placeholder {
    opacity: 0;
    visibility: hidden;
    color: transparent
}

.lck-field-input:focus {
    outline: none;
    border: 2px solid #1976d2
}

.lck-field-input:focus~.lck-field-label {
    top: -10px;
    left: 10px;
    z-index: 2;
    font-size: .9em;
    font-weight: 500;
    transition: all .2s ease-in-out;
    color: #1976d2;
    font-weight: 700
}

.lck-field-input:not(:-moz-placeholder-shown).lck-field-input:not(:focus)~.lck-field-label {
    top: -10px;
    left: 10px;
    z-index: 2;
    font-size: .9em;
    font-weight: 500;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font-weight: 700;
    color: #272727
}

.lck-field-input:not(:placeholder-shown).lck-field-input:not(:focus)~.lck-field-label {
    top: -10px;
    left: 10px;
    z-index: 2;
    font-size: .9em;
    font-weight: 500;
    transition: all .2s ease-in-out;
    font-weight: 700;
    color: #272727
}

.lck-schema {
    touch-action: none
}

svg.lck-svg g.lck-lines line {
    stroke-width: 2.5;
    opacity: 1;
    stroke-linecap: round
}

svg.lck-svg g.lck-dots circle {
    stroke: transparent;
    stroke-width: 13.5
}

svg.lck-svg g.lck-actives circle {
    opacity: 1;
    animation: lock-activate-dot .15s 0s ease 1;
    transform-origin: center
}

svg.lck-svg g.lck-arrows path {
    fill: none;
    stroke-width: 1;
    stroke-linecap: round
}

.lck-piano {
    display: block;
    width: 100%;
    height: 200px
}

.lck-piano-key {
    width: 14.2857142857%;
    height: 100%;
    display: inline-block;
    position: relative
}

.lck-piano-key .lck-white {
    height: 100%;
    position: relative;
    border: solid 1px;
    border-radius: 0 0 10px 10px;
    background: #fdfdfd;
    color: #272727;
    border-color: #272727
}

.lck-piano-key .lck-black {
    height: 60%;
    left: 100%;
    position: absolute;
    border: solid 1px;
    transform: translate(-50%);
    top: 0;
    width: 70%;
    z-index: 1;
    border-radius: 0 0 10px 10px;
    background: #272727;
    color: #fdfdfd;
    border-color: #272727
}

.lck-key .lck-label {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

.lck-key {
    cursor: pointer
}

.theme-dark .lck-key:active,.theme-dark .lck-key.active {
    background: #64b5f6
}

.lck-note {
    font-size: 36px
}

.lck-play,.lck-position,.lck-address {
    display: inline-block;
    padding: 10px;
    margin: .5rem 0;
    border-radius: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer
}

.theme-dark .lck-play,.theme-dark .lck-position,.theme-dark .lck-address {
    background: #dfdfdf;
    color: #202020
}

.lck-map-container {
    margin: 3px auto;
    width: 320px;
    max-width: 100%
}

.lck-map,.leaflet-container {
    width: 320px;
    max-width: 100%;
    height: 200px;
    z-index: 0;
    border: solid 1px;
    border-radius: 5px
}

.theme-dark .lck-map,.theme-dark .leaflet-container {
    border-color: #dfdfdf
}

.lck-onoff {
    position: relative;
    padding-bottom: 100%;
    display: inline-block;
    border: solid 1px;
    cursor: pointer;
}

.lck-onoff:hover {
    scale: 1.05;
    border: 2px solid #2d88e4!important;
    z-index: 2;
}

.lck-onoff div {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76%;
    height: 76%;
    top: 12%;
    left: 12%;
    margin: auto;
    border: solid 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.lck-onoff div span {
    display: block;
    font-size: 26px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.lck-onoff2 {
    position: relative;
    padding-bottom: 100%;
    display: inline-block;
    border: solid 1px;
    cursor: pointer
}

.lck-onoff2 div {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76%;
    height: 76%;
    top: 12%;
    left: 12%;
    margin: auto;
    border: solid 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.lck-onoff2 div span {
    display: block;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.theme-dark .lck-onoff,.theme-dark .lck-onoff div,.theme-dark .lck-onoff2,.theme-dark .lck-onoff2 div,.theme-dark .lck-on  {
    border-color: #fff;
}

.lck-on {
    border: solid 1px
}

.theme-dark .lck-on {
    background: #64b5f6;
    color: #202020
}

input[type=radio].lck-radio {
    width: 22px;
    height: 22px;
    vertical-align: bottom
}

input[type=checkbox].lck-chkbx {
    position: relative;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-right: 10px;
    cursor: pointer;
    outline: 0
}

input[type=checkbox].lck-chkbx:checked:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 7px;
    display: table;
    width: 6px;
    height: 12px;
    border: 2px solid;
    border-top-width: 0;
    border-left-width: 0;
    transform: rotate(45deg)
}

input[type=checkbox].lck-chkbx:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -2px;
    border-radius: 2px;
    transition: .24s;
    border: 2px solid;
    margin-bottom: -6px
}

.lck-isopen {
    display: none;
    position: relative
}

.lck-close {
    height: 24px;
    width: 24px
}

.lck-content {
    position: relative;
    overflow-wrap: break-word;
    padding: 10px 10px 20px;
    min-height: 5em;
    height: auto;
    overflow: hidden;
    width: 100%;
    font-size: 1.4em;
    border: 0;
    border-image-slice: 20 20 20 20 fill;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round stretch
}

.lck-content * {
    font-size: 1em
}

.lck-content:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    z-index: 1000
}

.lck-content div {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.lck-content #videoplayer {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.lck-content img {
    vertical-align: middle;
    border: 0;
    max-width: 100%;
    height: auto
}

.lck-content audio {
    width: 100%;
    margin-top: 20px
}

.lck-big {
    font-size: 1.2em;
    font-weight: 700
}

.lck-small {
    max-width: 200px
}

.lck-content {
    border-image-source: url(/build/assets/content-light-12b62a3e.png)
}

.lck-content:before {
    background-image: url(/build/assets/corner-light-9a2e6ff5.png)
}

.theme-dark .lck-content {
    border-image-source: url(/build/assets/content-dark-a76541ed.png)
}

.theme-dark .lck-content:before {
    background-image: url(/build/assets/corner-dark-ac2e4034.png)
}

.theme-dark svg.lck-svg g.lck-actives circle {
    fill: #64b5f6
}

.theme-dark svg.lck-svg g.lck-dots circle {
    fill: #dfdfdf
}

.theme-dark svg.lck-svg g.lck-lines line {
    stroke: #64b5f6
}

.theme-dark svg.lck-svg g.lck-arrows path {
    stroke: #202020
}

.theme-dark input[type=checkbox].lck-chkbx:checked:before {
    border-color: #202020
}

.theme-dark input[type=checkbox].lck-chkbx:after {
    border-color: #dfdfdf
}

.theme-dark input[type=checkbox].lck-chkbx:checked:after {
    background-color: #64b5f6
}

.lck-spinner {
    display: flex;
    margin: 3px auto;
    width: 100%;
    text-align: center;
    justify-content: center;
    place-items: center;
    gap: 3px
}

.lck-spinner>div {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both
}

.theme-dark .lck-spinner>div {
    background: #dfdfdf
}

.lck-spinner .lck-bounce1 {
    animation-delay: -.32s
}

.lck-spinner .lck-bounce2 {
    animation-delay: -.16s
}

@keyframes sk-bouncedelay {
    0%,80%,to {
        transform: scale(0)
    }

    40% {
        transform: scale(1)
    }
}

.theme-dark .lck-color-R {
    background: red;
    color: #fff;
    border: 2px solid #fff;
}

.theme-dark .lck-color-O {
    background: orange;
    color: #fff;
    border: 1px solid #fff;
}

.theme-dark .lck-color-J {
    background: rgb(226, 226, 19);
    color: #fff;
    border: 2px solid #fff;
}

.theme-dark .lck-color-P {
    background: purple;
    color: #fff;
    border: 2px solid #fff;
}

.theme-dark .lck-color-B {
    background: blue;
    color: #fff;
    border: 2px solid #fff;
}

.theme-dark .lck-color-V {
    background: green;
    color: #fff;
    border: 2px solid #fff;
}

.theme-dark .lck-color-N {
    background: black;
    color: #fff;
    border: 2px solid #fff;
}

.theme-dark .lck-color-G {
    background: grey;
    color: #fff;
    border: 2px solid #fff;
}

.theme-dark .lck-color-W {
    background: white;
    color: #000;
    border: 2px solid #000;
}

.theme-dark .lck-color-M {
    background: brown;
    color: #fff;
    border: 2px solid #fff;
}

.theme-dark .lck-color-K {
    background: pink;
    color: #fff;
    border: 2px solid #fff;
}

.theme-dark .lck-color-I {
    background: #4B0082;
    color: #fff;
    border: 2px solid #fff;
}