.panel-route {
    z-index: 6 !important;
    background: none !important;
    left: 60px;
}



.gjs-pn-panel .gjs-resizer-h {
    background-color: rgba(0, 0, 0, .2);
    border: none;
    opacity: 0;
    transition: opacity .25s
}

.gjs-pn-panel .gjs-resizer-h:hover {
    opacity: 1
}

.gjs-pn-panel .gjs-resizer-h-tc,
.gjs-pn-panel .gjs-resizer-h-bc {
    margin: 0 auto;
    width: 100%
}

.gjs-pn-panel .gjs-resizer-h-cr,
.gjs-pn-panel .gjs-resizer-h-cl {
    margin: auto 0;
    height: 100%
}




.gjs-pn-panel {
    display: inline-block;
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    padding: 0;
}

.gjs-pn-panel .icon-undo,
.gjs-pn-panel .icon-redo {
    font-size: 20px;
    height: 30px;
    width: 25px
}

.gjs-pn-commands {
    width: calc(100% - var(--gjs-left-width));
    left: 0;
    top: 0;
    box-shadow: 0 0 5px var(--gjs-main-dark-color)
}



.gjs-pn-views {
    top: 60px;
    right: 0;
    width: var(--gjs-left-width);
    display: grid;
    place-items: center;
}

.gjs-pn-views .gjs-pn-buttons {
    width: fit-content;
    background-color: var(--light-blue);
    display: grid;
    gap: 10px;
    grid-template-columns: auto auto auto;
    padding: 4px;
    border-radius: 16px;
}

.gjs-pn-views .gjs-pn-btn {
    border-radius: 16px;
}

.gjs-pn-views .gjs-pn-btn.gjs-pn-active {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    padding: 0 12px;
}


.gjs-pn-views .gjs-pn-btn.gjs-pn-active span {
    display: block;
}


.gjs-pn-views .gjs-pn-btn span {
    font-size: 12px;
    font-weight: lighter;
    display: none;
}



.gjs-pn-views-container {
    height: calc(100vh - 120px);
    top: 120px;
    right: 0;
    width: var(--gjs-left-width);
    overflow: auto;
}

.gjs-pn-buttons {
    display: flex;
    justify-content: space-between
}

.gjs-pn-btn {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    min-height: 35px;
    min-width: 35px;
    line-height: 21px;
    background-color: rgba(0, 153, 255, 0);
    font-size: 18px;
    padding: 4px;
    position: relative;
    cursor: pointer;
    color: #4857E0;
}

.gjs-pn-btn svg {
    min-height: 20px;
    min-width: 20px;
    fill: currentColor
}

.gjs-pn-btn * {
    cursor: pointer !important;
}

.gjs-pn-btn:hover {
    background-color: var(--blue);
    color: white;
}

.gjs-pn-btn.gjs-pn-active {
    background-color: var(--dark);
    color: white;
}



.gjs-pn-blocks {
    left: 0;
    top: 60px;
    width: 35px;
}

.gjs-pn-blocks>div {
    flex-direction: column;

}

.gjs-pn-blocks .gjs-pn-btn span {
    font-size: 12px;
    scale: 0;
    display: none;
    transition: .2s;
}

.gjs-pn-blocks .gjs-pn-btn {
    display: grid;
    gap: 12px;
    place-items: center;
    width: fit-content;
    left: 0;
    margin-left: 0;
    position: relative;
    z-index: 2 !important;
    transition: .2s;
}

.gjs-pn-blocks .gjs-pn-btn:hover {
    grid-template-columns: auto max-content;
    background-color: var(--blue);
    color: white;
    padding: 0 12px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 0 24px 24px 0;
}

.gjs-pn-blocks .gjs-pn-btn:hover span {
    font-size: 12px;
    display: block;
    scale: 1;
}


.gjs-pn-options {
    left: 0;
    bottom: 0;
    width: 35px;
    color: white;
}

.gjs-pn-options {
    z-index: 2;
}

.gjs-pn-options>div {
    flex-direction: column;

}

.gjs-pn-options .gjs-pn-btn span {
    font-size: 12px;
    scale: 0;
    display: none;
    transition: .2s;
}

.gjs-pn-options .gjs-pn-btn {
    display: grid;
    gap: 12px;
    place-items: center;
    width: fit-content;
    left: 0;
    margin-left: 0;
    position: relative;
    transition: .2s;
}

.gjs-pn-options .gjs-pn-btn:hover {
    grid-template-columns: auto max-content;
    background-color: var(--blue);
    color: white;
    padding: 0 12px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 0 24px 24px 0;
}

.gjs-pn-options .gjs-pn-btn:hover span {
    font-size: 12px;
    display: block;
    scale: 1;
}


.gjs-pn-actions {
    right: calc(var(--gjs-left-width));
    top: 0;
    height: 35px;
}

.gjs-pn-actions .gjs-pn-btn {
    display: grid;
    place-items: center;
    z-index: 2 !important;
}

.gjs-pn-actions .gjs-pn-btn svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
}



.gjs-pn-devices-c {
    width: 128px;
    z-index: 1 !important;
    left: calc(50% + 72px - var(--gjs-left-width));
}


.gjs-pn-devices-c .gjs-pn-buttons {
    width: 105px;
}

.gjs-pn-routes {
    top: 0;
    left: 35px;
}

.gjs-pn-routes .gjs-pn-btn {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: flex-start;
    gap: 10px;
    padding: 0 20px;
}

.gjs-pn-routes .gjs-pn-btn span {
    margin-top: 2px;
    padding: 4px;
    font-size: 14px;
}

.gjs-pn-routes .gjs-pn-btn.gjs-pn-active {
    position: fixed;
    left: 0;
    width: 440px;
}



/* .route-name {
    display: inline-block !important;
    cursor: default !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14.6px !important;
    font-weight: bold;
    padding: 6px 8px 0 8px !important;
    margin: 0;
    max-width: 160px;
    overflow: hidden;
    text-align: left !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 28px;
    min-height: none !important;
    padding-right: 10px !important;
    color: var(--blue) !important;
} 


.routes-button {
    cursor: pointer !important;
}

.routes-button * {
    cursor: pointer !important;
}
*/


/* ------------------------------------------- FRAME ------------------------------------------- */



.gjs-frame-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    margin: auto;
    border: 4px solid var(--dark);
}

.gjs-frame-wrapper--anim {
    transition: width .35s ease, height .35s ease
}

.gjs-frame-wrapper__top {
    transform: translateY(-100%) translateX(-50%);
    display: flex;
    padding: 5px 0;
    position: absolute;
    width: 100%;
    left: 50%;
    top: 0
}

.gjs-frame-wrapper__top-r {
    margin-left: auto
}

.gjs-frame-wrapper__left {
    position: absolute;
    left: 0;
    transform: translateX(-100%) translateY(-50%);
    height: 100%;
    top: 50%
}

.gjs-frame-wrapper__bottom {
    position: absolute;
    bottom: 0;
    transform: translateY(100%) translateX(-50%);
    width: 100%;
    left: 50%
}

.gjs-frame-wrapper__right {
    position: absolute;
    right: 0;
    transform: translateX(100%) translateY(-50%);
    height: 100%;
    top: 50%
}

.gjs-frame-wrapper__icon {
    width: 24px;
    cursor: pointer
}

.gjs-frame-wrapper__icon>svg {
    fill: currentColor
}



.gjs-frame {
    height: 100%;
    width: 100%;
    border: none;
    margin: auto;
    display: block;
    transition: width .35s ease, height .35s ease;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}



/* CANVAS */


.gjs-cv-canvas {
    box-sizing: border-box;
    width: calc(100% - var(--gjs-left-width) - 35px);
    height: calc(100% - 35px);
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    position: absolute;
    left: 35px;
    top: 35px;
}

.gjs-cv-canvas-bg {
    background: linear-gradient(60deg, var(--light-blue), #eeeeee);
}

.gjs-cv-canvas.gjs-cui {
    width: 100%;
    height: 100%;
    top: 0
}

.gjs-cv-canvas.gjs-is__grab .gjs-cv-canvas__frames,
.gjs-cv-canvas.gjs-is__grabbing .gjs-cv-canvas__frames {
    pointer-events: none
}

.gjs-cv-canvas__frames {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.gjs-cv-canvas__spots {
    position: absolute;
    pointer-events: none;
    z-index: 1
}

.gjs-cv-canvas .gjs-ghost {
    display: none;
    pointer-events: none;
    background-color: #5b5b5b;
    border: 2px dashed #ccc;
    position: absolute;
    z-index: 10;
    opacity: .55;
    filter: alpha(opacity=55)
}

.gjs-cv-canvas .gjs-highlighter,
.gjs-cv-canvas .gjs-highlighter-sel {
    position: absolute;
    outline: 1px solid var(--gjs-color-blue);
    outline-offset: -1px;
    pointer-events: none;
    width: 100%;
    height: 100%
}

.gjs-cv-canvas .gjs-highlighter-warning {
    outline: 3px solid var(--gjs-color-yellow)
}

.gjs-cv-canvas .gjs-highlighter-sel {
    outline: 2px solid var(--gjs-color-blue);
    outline-offset: -2px
}

.gjs-cv-canvas #gjs-tools,
.gjs-cv-canvas .gjs-tools {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    outline: none;
    z-index: 1
}

.gjs-cv-canvas * {
    box-sizing: border-box
}







.trt-header {
    font-weight: lighter;
    padding: 10px
}




/* BLOCKS */


.blocks-panel {
    display: block;
    box-sizing: border-box;
    position: fixed;
    width: 350px;
    height: calc(100vh - 35px);
    padding: 20px 0;
    left: -385px;
    top: 35px;
    background-color: white;
    z-index: 2;
    border: 2px solid var(--light-blue);
    overflow: auto;
}

/* .gjs-blocks-cs:nth-of-type(2) {
    display: none;
}
 */
.gjs-blocks-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start
}

.gjs-block-categories {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
}

.gjs-block-category {
    width: 100%;
    border-bottom: 2px solid var(--light-blue);
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

.gjs-block-category .gjs-caret-icon {
    margin-right: 5px
}

.gjs-block {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width: 45%;
    min-width: 45px;
    padding: 1em;
    box-sizing: border-box;
    min-height: 90px;
    cursor: all-scroll;
    font-size: 11px;
    font-weight: lighter;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--blue);
    border-radius: 3px;
    margin: 10px 2.5% 5px;
    box-shadow: 0 1px 0 0 rgba(0, 149, 255, 0.15);
    transition: all .2s ease 0s;
    transition-property: box-shadow, color
}

.gjs-block:hover {
    border: 1px solid var(--dark);
    outline: 1px solid var(--dark);
}

.gjs-block svg {
    fill: currentColor
}

.gjs-block__media {
    margin-bottom: 10px;
    pointer-events: none
}

.gjs-block-svg {
    width: 54px;
    fill: currentColor
}

.gjs-block-svg-path {
    fill: currentColor
}

.gjs-block.fa {
    font-size: 2em;
    line-height: 2em;
    padding: 11px
}

.gjs-block-label {
    line-height: normal;
    font-size: .65rem;
    font-weight: normal;
    font-family: Helvetica, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none
}

.gjs-block.gjs-bdrag {
    width: auto;
    padding: 0
}



/* MARGIN AND PADDING */

.margin-and-padding-input {
    position: relative;
    box-sizing: border-box;
    width: calc(var(--gjs-left-width) - 20px) !important;
    height: 200px;
    background: white;
    border-radius: 0px;
    padding: 2px;
    box-shadow: inset 59px 39px 0px #ddecff,
        inset -59px -39px 0px #ddecff,
        inset 60px 40px 0px var(--blue),
        inset -60px -40px 0px var(--blue),
        inset 120px 80px 0px var(--light-blue),
        inset -120px -80px 0px var(--light-blue);
}
.margin-and-padding-input > div {
    box-sizing: border-box;
    display: grid;
    place-items: center;
}

.margin-and-padding-input > div > p {
    margin: 0;
    padding-top: 10px;
    width: 60px;
    height: 30px;
    text-align: center;
    align-self: center;
}


/* .margin-and-padding-input > div:hover > .property-box {
    display: grid;
} */

.property-box {
    position: absolute;
    display: grid;
    padding: 20px;
    box-shadow: 0 0 20px -10px var(--blue);
    border-radius: 8px;
    background: radial-gradient(white, rgb(246, 250, 255));
    width: calc(var(--gjs-left-width) - 20px);
    /* height: 200px; */
    background-color: white;
    place-items: center;
    gap: 10px;
    box-sizing: border-box;
    z-index: 2;
}

.property-box .property-box-close-button {
    justify-self: right;
    border: none;
    border-radius: 24px;
    background-color: var(--light-blue);
    padding: 10px;
    height: 40px;
    width: 40px;
    aspect-ratio: 1;
}

.property-box .property-box-close-button:hover {
    background-color: var(--blue);
    color: white;
}

.margin-top .property-box {
    top: 40px;
}
.margin-right .property-box {
    top: 40px;
    right: 0;
}
.margin-bottom .property-box {
    top: 40px;
}
.margin-left .property-box {
    top: 40px;
    left: 0;
}

.padding-top .property-box {
    top: 40px;
}
.padding-right .property-box {
    top: 40px;
    right: -60px;
}
.padding-bottom .property-box {
    top: 40px;
}
.padding-left .property-box {
    top: 40px;
    left: -60px;
}

.property-box p {
    margin: 0;
    font-size: 18px;
    text-transform: capitalize;
    font-weight: bold;
}


.property-input-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
}

.property-buttons-wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
    gap: 4px;
    margin-top: 20px;
}

.property-buttons-wrapper button {
    width: 100%;
    height: 100%;
    background-color: var(--light-blue);
    border-radius: 4px;
    border: none;
}

.property-buttons-wrapper button:hover {
    background-color: var(--blue);
    color: white;
}

.margin-and-padding-input > div:hover > p{
    font-weight: bold;
    background-color: var(--blue);
    color: white;
}

.margin-and-padding-input select {
    display: grid;
    place-items: center;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    -webkit-appearance: none; 
    appearance: none;
    border: none;
    background-color: var(--blue);
    color: white;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    padding: 2px;
    margin: 2px;
    overflow: visible;
    text-align: center;
    font-size: 11px;
}

.margin-and-padding-input select:hover {
    background-color: var(--dark) !important;
    color: white;
}


.margin-and-padding-input input{
    box-sizing: border-box;
    background: var(--light-blue);
    font-size: 14px;
    height: fit-content;
    padding: 8px;
    border: none !important;
    border-radius: 8px;
    color: var(--blue);
}

.margin-and-padding-input input:hover {
    background-color: #ccdeff;
}

.margin-and-padding-input input:active {
    background-color: #ccdeff;
}

.margin-and-padding-input input:focus-visible {
    background-color: #ccdeff;
    border: none;
    outline: none;
}
.margin-and-padding-input select:focus-visible {
    background-color: var(--blue);
    color: white;
    border: none;
    outline: none;
}

.margin-and-padding-input input::placeholder {
    /* Modern browsers */
    color: var(--blue);
}
.margin-and-padding-input input:focus-visible::placeholder {
    /* Modern browsers */
    color: transparent;
}

.margin-and-padding-input input[type="number"] {
    -moz-appearance: textfield;
}

.margin-and-padding-input input::-webkit-outer-spin-button,
.margin-and-padding-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

:root {
    --margin-units-margin: -10px;
    --padding-units-margin: -14px;
    --units-size: 30px;
}

.margin-top {
    position: absolute;
    inset: 0 auto auto calc(50% - 30px);
}

.margin-top select {
    width: var(--units-size);
}

.margin-right {
    position: absolute;
    inset: calc(50% - 20px) 0 auto auto;
}

.margin-right select {
    margin-bottom: var(--margin-units-margin);
    height: var(--units-size);
}

.margin-bottom {
    position: absolute;
    inset: auto auto 0 calc(50% - 30px);
}

.margin-bottom select {
    width: var(--units-size);
}

.margin-left {
    position: absolute;
    inset: calc(50% - 20px) auto auto 0;
}

.margin-left select {
    margin-bottom: var(--margin-units-margin);
    height: var(--units-size);
}

.padding-top {
    position: absolute;
    inset: 40px auto auto calc(50% - 30px);
}

.padding-top select {
    margin-right: var(--padding-units-margin);
    width: var(--units-size);
}

.padding-right {
    position: absolute;
    inset: calc(50% - 20px) 60px auto auto;
}
.padding-right select {
    margin-bottom: var(--padding-units-margin);
    height: var(--units-size);
}

.padding-bottom {
    position: absolute;
    inset: auto auto 40px calc(50% - 30px);
}
.padding-bottom select {
    margin-right: var(--padding-units-margin);
    width: var(--units-size);
}

.padding-left {
    position: absolute;
    inset: calc(50% - 20px) auto auto 60px;
}
.padding-left select {
    margin-bottom: var(--padding-units-margin);
    height: var(--units-size);
}


.gjs-sm-margin-and-padding .gjs-sm-label {
    display: none;
}



.gjs-field input, select {
    font-family: Comfortaa;
}


.gjs-radio-item input:checked+.gjs-radio-item-label {
    border: 1px solid var(--dark);
    border-radius: 8px;
    background-color: var(--blue);
    background-image: radial-gradient(
        50% 115% at 50% -5%,
        rgba(255, 255, 255, 0.11) 0%,
        transparent 100%
    );
    box-shadow:
        inset 0 0px 10px 0px rgba(0, 0, 0, 0.14),
        inset 0px 5px 10px 0px rgba(0, 0, 0, 0.11),
        inset 0px 2px 5px 0px rgba(0, 0, 0, 0.4),
        inset 0px 3px 20px 0px rgba(255, 255, 255, 0.25);       

    color: white;
    transition: all 150ms ease-in-out;
}



.gjs-field-radio {
    color: var(--dark);
    background-color: var(--light-blue);
    padding: 2px;
}

.gjs-radio-item {
    box-sizing: border-box;
    flex: 1 1 auto;
    text-align: center;
    margin: 2px;
}

.gjs-radio-item:hover {
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 1);

}

.gjs-radio-item input {
    display: none
}


.gjs-radio-items {
    display: flex;
    border-radius: 4px;
}

.gjs-radio-item-label {
    border-radius: 10px;
    cursor: pointer;
    display: block;
    padding: var(--gjs-input-padding)
}


.gjs-field-integer {
    border-radius: 8px;
    background-color: var(--light-blue);
    color: var(--dark);    
    transition: all 150ms ease-in-out;
}

.gjs-field-integer input {
    padding-right: 40px;
    text-overflow: ellipsis;
}

.gjs-field-integer .gjs-input-unit {
    color: var(--dark);
    background: linear-gradient(to top, white, transparent);
}

.gjs-field-integer .gjs-input-unit:hover {
    background: linear-gradient(to top, var(--light-blue), transparent);
}
.gjs-field-integer input::placeholder {
    color: rgba(5, 0, 4, 0.6);
}

.gjs-field-integer .gjs-field-arrows * {
    border-bottom-color: var(--dark);
    border-top-color: var(--dark);
}



.gjs-select {
    padding: 0;
    width: 100%
}

.gjs-select {
    padding: 0 10px 0 4px;
    border: 1px solid var(--blue);
    border-radius: 8px;
    background-color: var(--light-blue);
    transition: all 150ms ease-in-out;
}

.gjs-select select {
    color: var(--blue);
    text-overflow: ellipsis;
    padding-right: 20px;
}

.gjs-select .gjs-sel-arrow *{
    border-top-color: var(--blue);
    border-bottom-color: var(--blue);
}


.gjs-select:-moz-focusring,
.gjs-select select:-moz-focusring {
    color: rgba(0, 0, 0, 0);
    text-shadow: 0 0 0 var(--gjs-secondary-light-color)
}

.gjs-select option {
    background-color: white;
    color: var(--blue);
    font-family: Comfortaa;
    font-style: italic;
}



/* CHECKBOX */
.gjs-field-checkbox {
    padding: 2px;
    width: 72px !important;
    height: 32px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--blue) !important
}

.gjs-field-checkbox input {
    display: none
}


.gjs-field-checkbox input:checked+.gjs-chk-icon {
    border-color: var(--dark);
    border-width: 0 2px 2px 0;
    border-style: solid;
}

.gjs-chk-icon {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    box-sizing: border-box;
    display: block;
    height: 21px;
    margin: 0 5px;
    width: 9px
}




.font-family-selector {
    box-sizing: border-box;
    position: static;
    width: 100%;
    padding: 10px;
    border-radius: 12px;
}

.font-family-selected {
    width: 100%;
    color: var(--dark);
    font-weight: bold;
}

.font-family-options-wrapper {
    position: absolute;
    padding: 10px 0 0 0;
    z-index: 20;
}

.font-family-options {
    display: none;
    height: 280px;
    overflow: auto;
    width: fit-content;
    border-radius: 12px;
    animation: textOptionsApareance .2s ease-in-out;
}

.family-option {
    padding: 10px 20px;
    background: radial-gradient(white, rgb(246, 250, 255));
    color: var(--dark);
}

.family-option:hover {
    background: var(--light-blue);
}
.family-option:active {
    background: var(--blue);
    color: white;
}

@keyframes textOptionsApareance {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}