body {
    -webkit-touch-callout: none !important;
}


html {
        height: 100%;
        width: 100%;
}


button {
    cursor: pointer;
}
button[disabled="disabled"],
button.disabled,
button.unactived {
    cursor: default;
    opacity: .25;
}
button:focus {
    outline: 0;
}

.unactived,
.btn-black.unactived {
    opacity: .5
}

.tab-menu button:hover a {
    color: #000;
}

.one-em {
    width: 1em;
    height: 0;
    position: absolute;
    font-size: 1em;
    z-index: 0;
}

/* ::-webkit-scrollbar {
    width: 15px;   
}
::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.198);
} 
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
} 

::-webkit-scrollbar-button {
    background-color: rgba(0, 0, 0, 0.671);
}

::-webkit-scrollbar-corner {
    background-color: black;
} */
.no-opacity {
    opacity: 0;
}
/* Cover App*/

.cover-app.visible {
    display: flex;
    opacity: 1;
    bottom: 0;
    height: 100%;
}

.cover-app {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: #fff;
    background: radial-gradient(ellipse at center, #fff 0, #e0eff9 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .75s ease;
    height: 0;
}

.cover-app .logo-ssp-imago {
    height: 2em;
    width: 2em;
}

.cover-app .logo-ssp-full.big {
    width: auto;
    opacity: 1;
}

.cover-app .logo-ssp-full {
    height: 8em;
    width: 8em;
    opacity: 1;
    background: url(../img/svg/ssp_imagotype_interior.svg) center center  no-repeat;
    background-size: 100% 100%;
    animation: logoEfect 2s alternate linear;
}


.cover-app .logo-ssp-full .circle-ext {
    height: 100%;
    width: 100%;    
    background: url(../img/svg/ssp_imagotype_border.svg) center center  no-repeat;
    background-size: 100% 100%;
    transform-origin: 50% 50%;
    animation: load8 1.5s infinite linear;
    
}

.cover-app .logo-ssp-full object,
.cover-app .logo-ssp-full svg {
    height: 100%;
    width: auto;
}

/* .cover-app .logo-ssp-full #metal-border {
    transform-origin: 50% 50%;
    animation: load8 1.5s infinite linear;
} */


/* Logo effect animation */

@keyframes logoEfect {
    from {
        opacity: 0;
    }
}

@keyframes blinkEfect {
    0% {
        border: 1px solid #5cdeff;
    }
    50% {
        border: 1px solid #ffd000;
    }
    100% {
        border: 1px solid #5cdeff;
    }
}




/* Loader */
.box-loader {
    width: 1.5em;
    height: 1.9em;
    margin-right: 1em;
    margin-left: .15em;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
}
.loader.visible {
    display: block;
    opacity: 0;
}
.loader.search-loader.visible {
    opacity: 1;
    margin: 0 0 0 0;
    width: 1.25em;
    height: 1.25em;
}
.loader.icons.visible {
    display: inline-block;
    opacity: 1;
    margin: -.5em 0 0 1em;
}

.loader,
.sub-menu-closed .loader.icons.visible {
    width: 1.5em;
    height: 1.5em;
    display: none;
    position: absolute;
    text-indent: -9999em;
    border-top: .3em solid rgba(158, 158, 158, .2);
    border-right: .3em solid rgba(158, 158, 158, .2);
    border-bottom: .3em solid rgba(158, 158, 158, .2);
    border-left: .3em solid #fff;
    transform: translateZ(0);
    animation: load8 .6s infinite linear;
}

.loader.options {
    display: block;
    position: relative;
}

.loader,
.loader:after {
    border-radius: 50%;
}

@keyframes load8 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.border-box {
    box-sizing: border-box
}


/* #screensView ******************************************************************* */

.screensView {
    height: calc(100% - 216px - 3em);    
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center
}

.viewer .screensView {
    width: 40em;
    /* height: 40em; */
    margin: auto;
    background: rgba(0, 0, 0, .3);
    border: solid 1px #FFF;
    display: block;
}

.viewer .main_wrapper,
.screensView .content3d {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    
}

.viewer .viewer_wrapper,
.viewer .viewer_wrapper img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    z-index: 0;
}

.viewer .screensView {    
    width: 434px;
}
.viewer.fullscreen .screensView {    
    width: 100%;
}
.viewer .color {    
    width: 434px;
    height: 254px;
}

.viewer.fullscreen .line-up-player {
    font-size: 3em;
}

.sspviewer_container {
    width: 434px;
    height: 254px;
    z-index: 499;
    position: absolute;
    margin-top: 0px;
    overflow: hidden;
}
.viewer.fullscreen,
.viewer.fullscreen .wrapper,
.viewer.fullscreen .mainContainer,
.viewer.fullscreen .mainContainer .grid_12,
.viewer.fullscreen .progressions,
.viewer.fullscreen .progression-box,
.viewer.fullscreen .flash_wrapper,
.viewer.fullscreen .flash,
.viewer.fullscreen .color,
.fullscreen .sspviewer_container {
    overflow: visible;
}

.viewer.fullscreen,
.viewer.fullscreen .wrapper {
    width: 100%;
    height: 100%;
}

.sspviewer_container canvas,
.screensView .sspviewer_container canvas {
    position: absolute;
    outline: none;
}
.viewer div.progressions div.flash img,
.sspviewer_container canvas,
.screensView .sspviewer_container canvas {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    /* width: calc( 100% - 4px);
    height: calc( 100% - 4px); */
    width: 100%;
    height: 100%;
    border: solid 2px transparent;
    box-sizing: border-box;
}

.viewer div.progressions div.flash .cover-box img {
    width: auto;
    box-shadow: 0 0 10px #000000af;
}

/* .sspviewer_container .scribble-border-box {
    border: solid 2px transparent;
    position: absolute;
    z-index: 498;
    touch-action: none;
    width: 434px;
    height: 254px;
    box-sizing: border-box;
} */

.sspviewer_container.selected .draw-canvas-extra {
    border: solid 3px #ffe600;    
}

.viewer.fullscreen .sspviewer_container.selected .draw-canvas-extra {
    border: solid 6px #ffe600;    
}

/* .fullscreen .sspviewer_container .scribble-border-box {
    width: 100%;
    height: 100%;
} */


.sspviewer_container canvas,
.sspviewer_container canvas.draw-canvas {   

    box-sizing: border-box;
}
.sspviewer_container canvas.draw-canvas {   
    width: 434px;
    /* margin: 2px 0 0 2px; */
    margin: 0 0 0 0;
    /*height: 210px;
     border: solid 2px #ffe600; */
    height: 254px;
    position: absolute;
    z-index: 499;
    touch-action: none;
}
.sspviewer_container canvas.draw-canvas:hover {   
    cursor: url(../img/svg/cursor-pencil.svg) 0 24,auto;    
}

.sspviewer_container.selected canvas.canvas-3d {
    border: solid 3px #5cdeff;   
}

.viewer.fullscreen .sspviewer_container.selected canvas.canvas-3d {
    border: solid 5px #5cdeff;   
}
.sspviewer_container.selected canvas.draw-canvas {
    /* border: solid 2px #ffe15c;    */
}

.viewer .progressions *.active,
.viewer .screensView.active {
    box-shadow: 0 0 20px #a9a9ff;
}

.content3d,
.screensView .content3d canvas {
    margin: 0;
    padding: 0;
}

.screensView .content3d canvas.fadeIn,
.sspviewer_container canvas.fadeIn {
    animation: border-fade-in 1s ease;
}



@keyframes border-fade-in {
    0% {
        outline: 4px solid rgba(92, 222, 255, 1);
    }
    100% {
        outline: 0px solid rgba(92, 222, 255, 0);
    }
}

[class*="screen-full-"] {
    width: 100%;
    height: 100%
}


/* Buttons 3d area */

.buttons3dView {
    width: 100%;
    padding: .25em;
    text-align: right;
    z-index: 10;
    height: 48px;
    overflow: hidden;
}
.box-3dbuttons {
    opacity: 1;
    transition: opacity .5s ease;
}
.box-3dbuttons.no-opacity {
    opacity: 0;    
}

.box-3dbuttons button.display-none,
.display-none {
    display: none;
    visibility: hidden;
    opacity: 0
}
.visibility-hidden,
.visibility-hiden {
    visibility: hidden;
    opacity: 0
}

.btn-black,
.btn-add-tab,
.btn-3d-pitch,
[class*="btn-scroll"] {
    cursor: pointer;
    color: #FFF;
    border: 1px solid #6e797c;
    opacity: 1;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.flash_wrapper,
.flash_wrapper * {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

.btn-3d-pitch {
    width: 2.65em;
    height: 2.65em;
    margin-right: .5em;
    margin-bottom: .5em;
    font-size: 1em;
    padding: 0
}

.fullscreen .btn-3d-pitch.btn-preset {
    font-size: 1.5em;
   
}
/*

.buttons3dView .btn-3d-pitch {
    margin: 0 .25em 0 .25em;
    box-sizing: unset;
}
*/
.out-box-3dbutton {
    display: inline-block;
}


.btn-black:hover,
.btn-black.pre-select,
.btn-black.actived,
.tab-bar-box .tab-bar-ul li.tab-item:hover .tab-btn-bg,
.btn-add-tab:hover,
.btn-3d-pitch:hover,
[class*="btn-scroll"]:hover,
.btn-3d-pitch.locked {
    color: #5cdeff;
    border: 1px solid #5cdeff;
}


.btn-black.actived use {    
    fill: #5cdeff;
}


.btn-black.actived:hover use {
    
    fill: #abeeff;
}

.btn-black.btn-3d-pitch.locked:hover {
    border: 1px solid rgba(92, 222, 255, .6)
}
.btn-3d-pitch.locked {
    animation: blinkEfect 1.5s infinite linear;
}
.btn-3d-pitch.btn-remove:hover,
.btn-black.btn-delete:hover {
    border: 1px solid #ff3f3f;
    color: #ff3f3f
}

.btn-3d-pitch.btn-remove:hover use,
.btn-black.btn-delete:hover use {
    fill: #ff3f3f
}

.btn-3d-pitch.btn-remove:active,
.btn-black.btn-delete:active {
    border: 1px solid #FFF;
    /* background: none */
}

.btn-3d-pitch.btn-remove:active use,
.btn-black.btn-delete:active use {
    fill: #fff
}

[class*="btn-scroll"]:active,
.btn-black.active,
.btn-black:active,
.btn-black.selected:active,
.wysihtml5-command-active:active,
.tab-bar-box .tab-bar-ul li.tab-item:active .tab-btn-bg,
.tab-bar-box .tab-bar-ul li.tab-item.active .tab-btn-bg {
    color: #002d38;
    border: 1px solid #002b36
}

.wysihtml5-command-active,
.btn-black.selected,
.btn-black.selected:hover,
.tab-bar-box .tab-bar-ul li.tab-item.selected .tab-btn-bg {
    color: #fff;
    border: 1px solid #6e797c;
    cursor: auto
}
.btn-black.selected.reclickable:hover {
    cursor: pointer;
    border: 1px solid rgba(92, 222, 255, 0.849)
}
.box-3dbuttons-top-lines {
    text-align: right
}

.box-3dbuttons-top-lines.forced-height {
    height: 3em
}
/* .box-3dbuttons-top-lines.forced-height.nule {
    height: 0
} */
.box-single-button,
.box-multimedia-btn,
.in-blk-mid,
.box-3dbuttons-bottom-line-into,
.box-3dbuttons-group,
.box-3dbuttons .separator-vertical,
.text-btn,
.secondary .header-logo,
.item-svg,
.btn-icon span,
.dialog .video-player-box {
    display: inline-block;
    vertical-align: middle
}
.viewer.fullscreen > * > * > * > *.box-single-button,
.box-single-button {
    width: auto;
    height: auto;
}
.box-multimedia-btn.display-none {
    display: none;
}
.box-3dbuttons-bottom-line,
.box-3dbuttons-bottom-line-into {
    white-space: nowrap;
    /* width: 100%; */
}
.box-3dbuttons-bottom-line-into {    
    /* width: calc(100% - 2.5em); */
    
}
.box-multimedia-btn {
   
    /* background: #FF5500AA;  width: 2.5em;*/
    width: auto;
}

.box-3dbuttons .separator-vertical {
    height: 1.75em;
    margin: 3px .9em 3px 6px;
    
    border-left: solid 1px rgba(0, 0, 0, .2);
    border-right: solid 1px rgba(255, 255, 255, .2);
    
}
.box-3dbuttons.no-selected-3d-obj .separator-vertical {
    display: none;
}
.box-3dbuttons.no-selected-3d-obj .separator-vertical.show {
    display: inline-block;
}

.logo-imagotype,
.logo-ssp-imagotype {
    width: 2.5em;
    height: 2.5em;
    display: block;
    text-indent: -9999px;
    background: url(../img/svg/ssp_imagotype_interior.svg) no-repeat center center;
    background-size: 2.5em 2.5em;
}

.logo-imagotype-border {
    height: 100%;
    width: 100%;    
    background: url(../img/svg/ssp_imagotype_border.svg) center center  no-repeat;
    background-size: 2.5em 2.5em;
    
}

use,
button use,
.item-svg svg,
.item-svg use,
.logo-ssp-imagotype object,
.logo-ssp-imagotype img {
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

/* .item-svg, .item-svg svg, .item-svg svg use {
    height: 2em;
    width: 2em;
} */
.item-svg {
    height: 2em;
    width: 2em;
}
.btn-black.btn-3d-pitch.locked use {
    fill: #5cdeff;
}
.btn-black.btn-3d-pitch.locked:hover use {
    fill: rgba(92, 222, 255, .6);
}

button svg * {
    pointer-events: none;
}


.viewer .buttons3dView {
    /* margin-top: -10em;
    height: 10em; */
    height: 100%;
    overflow: hidden;
    
}

.viewer .box-3dbuttons-bottom-line {
    padding-top: .25em;
    margin-top: 4em;
    transition: all .25s ease;
    background: rgba(255, 255, 255, .15);
    background: linear-gradient(to bottom, rgba(255, 255, 255, .25) 0, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
}
.viewer .box-anicontrols-animation {    
    background: rgba(255, 255, 255, .15);
    background: linear-gradient(to bottom, rgba(255, 255, 255, .25) 0, rgba(255, 255, 255, 0) 100%);    
}


.viewer.fullscreen  .box-3dbuttons-bottom-line,
.viewer .box-3dbuttons-bottom-line.fixed,
.viewer .sspviewer_container:hover .box-3dbuttons-bottom-line {
    margin-top:  .3em;
    opacity: 1;
}
.viewer.fullscreen .box-3dbuttons-bottom-line.fixed,
.viewer.fullscreen .sspviewer_container:hover .box-3dbuttons-bottom-line, 
.viewer.fullscreen  .box-3dbuttons-bottom-line {
    margin-top:  .05em;
   
}
.viewer .box-anicontrols-animation.fixed,
.viewer .sspviewer_container:hover .box-anicontrols-animation {
    margin-top:  .3em;
}

.viewer.fullscreen .box-anicontrols-animation,
.viewer.fullscreen .box-anicontrols-animation.fixed,
.viewer.fullscreen .sspviewer_container:hover .box-anicontrols-animation {
    margin-top:  5px;
}
.viewer .out-buttons3d-box {
    width: 100%;
    height: 2.75em;    
    position: absolute;
    z-index: 500;    
    box-sizing: border-box;
}
.viewer .btn-3d-pitch,
.viewer .out-buttons3d-box .btn-3d-pitch {
    /* font-size: .625em; */
    font-size: .8em;
    /* margin-right: .3em;
    margin-bottom: .1em; */
    box-sizing: border-box;
}
/* .fullscreen .out-buttons3d-box .btn-3d-pitch {
    font-size: 2.75em;
} */

body.fullscreen {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    /* height: 100%; */
}

.viewer.fullscreen div.progressions div.flash,
.viewer.fullscreen #mainContainer,
.viewer.fullscreen #mainContainer .grid_12,
.viewer.fullscreen .progressions, 
.viewer.fullscreen .main_wrapper,
.viewer.fullscreen .flash_wrapper,
.viewer.fullscreen > * > *,
.viewer.fullscreen > * > * > *,
.viewer.fullscreen > * > * > * > * 
{
    height: 100%;
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow: hidden;
}
.viewer.fullscreen > * > * {
    overflow: visible;
}
.viewer.fullscreen .viewer div.progressions div.flash img,
.viewer.fullscreen .wrapper .header,
.viewer.fullscreen #session_title,
.viewer.fullscreen #title,
.viewer.fullscreen p.print_p,
.viewer.fullscreen .club_banner,
.viewer.fullscreen .profile_summary,
.viewer.fullscreen .session_options,
.viewer.fullscreen .footer,
.viewer.fullscreen .progression-box,
.viewer.fullscreen .progression-box .flash,
.viewer.fullscreen .sspviewer_container,
.viewer.fullscreen .tran_image_color {
    display: none;
}
.viewer.fullscreen div.progressions div.flash,
.viewer.fullscreen div.flash_wrapper,
.viewer.fullscreen div.progressions div.flash_wrapper,
.viewer.fullscreen .wrapper,
.viewer.fullscreen .progressions,
.viewer.fullscreen .progression-box.selected .flash,
.viewer.fullscreen .progression-box.selected,
.viewer.fullscreen .sspviewer_container.selected,
.viewer.fullscreen .sspviewer_container.selected canvas {
    display: block;
    position: absolute;    
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; 
    width: auto;
    margin: 0;
}
.viewer.fullscreen div.progressions div.flash,
.viewer.fullscreen .color { 
    border: none;  
    left: 0;
    top: 0;    
    height: 100%;
    width: 100%;
}
.viewer.fullscreen .sspviewer_container.selected .draw-canvas {   
    left: 0;
    top: 0;
    /* width: calc( 100% - 6px);
    height: calc( 100% - 4.5em - 4px); */
    margin: 0 0 0 0;    
}

.viewer .out-buttons3d-box {   
    margin-top: 214px;
}
.viewer.fullscreen .out-buttons3d-box {   
    z-index: 500;  
    font-size: 1.75em;
    margin-top: auto;
    bottom: 5px;
}



.box-floating-control {
    position: absolute;
    z-index: 1000002;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity .25s ease;
}
.box-floating-control.bg {
    z-index: 1000;
}

.box-floating-control.bg path {
    fill: rgba(255, 255, 255, .85);
}

.box-floating-control.floating-box-adaptable {
    background-size: 100% 100%;
    /* min-width: 5em;
    min-height: 5em; */
}

.box-floating-control.floating-box-rotation {
    background: url(../img/svg/dialog-box-rotate.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 15em;
    height: 15em;
    padding-bottom: 2em;
    margin-bottom: 2em;
    overflow: visible;
}

.box-floating-control.floating-box-vertical-thin {
    width: 6em;
    height: 28em;
}
.box-floating-control.floating-box-scribbleboard {
    width: 3.79em;
    height: 18.3em;
}
.viewer.fullscreen .box-floating-control.floating-box-scribbleboard {
    width: 7.75em;
    height: 43.9em;
}
.moreOptions-board-box,
.scribble-board-box {       
    margin-top: .6em;
    margin-left: .5em;
    width: 3.85em;
    height: 18.5em;
    box-sizing: border-box;
}
.moreOptions-board-box {  
    /* min-height: 7em;      */
    min-height: 9.25em;
    /* min-height: 11.6em; */
    height: auto;
    /* display: inline-table; */
}
.viewer.fullscreen .scribble-board-box {       
    width: 3.25em;
    height: 18.35em;    
}
.viewer.fullscreen .moreOptions-board-box {       
    width: 3.1em;
    /* min-height: 5.8em; */
    min-height: 8.1em;
    /* min-height: 10.35em; 
    font-size: 2.5em;*/
    font-size: 1.7em;
}
.moreOptions-board-box button,
.scribble-board-box button {
    display: block;
    width: 2.65em;
    height: 2.65em;
    font-size: .8em;    
    margin: .2em 0 0 0;
    padding: 0 0 0 0;
    box-sizing: border-box;
}
/* .moreOptions-board-box button {
    margin: .1em 0 0 .3em;
} */
/* .moreOptions-board-box button:first-child {
    margin-top: 0;
} */

.moreOptions-board-box button.display-none,
.scribble-board-box button.display-none {
    display: none;
}

.scribble-board-box button .item-svg {
    width: 1.7em;
    height: 1.7em;
}
.scribbleboard-free-draw.btn-black.actived use,
.scribbleboard-free-draw use {
    fill: #ffd000;
}

.btn-black.scribble-tool.actived use {
    stroke: #FFFFFF;
    stroke-width:3px;
}

#btn-3d-CONTROL_OPEN_SCRIBBLE_BOARD_MENU_CLICK.btn-black.scribble-tool.actived use,
#btn-2d-CONTROL_ANIM_OPEN_SCRIBBLE_BOARD_MENU_CLICK.btn-black.scribble-tool.actived use,
#btn-scribble-CONTROL_SCRIBBLE_BOARD_DRAW_OFF_CLICK.btn-black.scribble-tool.actived use {
    stroke: none;
}
.content-box {
    width: 100%;
    height: auto;
    opacity: auto;
    background: auto;
    border: auto;
    padding: .35em;
    padding-bottom: 1.25em;
}
.fullscreen .content-box {
    padding: .1em;
    padding-bottom: 0;
    margin-top: -.35em;
}

.content-box.opened {
    height: 100%;
    opacity: 1;
}

.content-box.opened.minifade {
    height: 0;
    width: 0;
    opacity: 0;
}

/* .viewer.fullscreen .content-box {
    padding: 0 0 0 0;
} */

.box-camera-lines {
    border: 2px solid #FFF;
    height: calc(100% - 4px);
    width: calc(100% - 4px);
    background: url(../img/svg/bg-line.svg) repeat-y center center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-camera-position-control {
    background: #000;
    width: 170px;
    height: 128px;
    padding: .25em;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .45);
}

.box-camera-into {
    background: #95af30;
    background: radial-gradient(ellipse at center, #95af30 0, #658a00 100%);
    padding: 0 0 0 0;
    height: calc(100% - 10px);
    width: calc(100% - 10px);
    border: 5px solid #000;
}

.box-penta-column {
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.box-penta-column.odd {
    justify-content: center;
}

.box-penta-column button {
    width: 2.25em;
    height: 2.25em;
    padding: 0;
    background: none;
}

.btn-out-checkbox.selected .btn-checkbox>.into-checkbox,
.btn-out-radio.selected .btn-radio>.into-radio,
.grArea1-btn.selected>.grArea1-btn-radio>.into-radio {
    background-color: #00b7ff;
}
button.btn-out-checkbox,
.menuleft-item-screen button.btn-out-checkbox,
.menuleft-item-screen button.btn-out-checkbox:hover,
button.btn-out-radio,
.menuleft-item-screen button.btn-out-radio,
.menuleft-item-screen button.btn-out-radio:hover {
    cursor: pointer;
    display: inline-block;
    margin: 0;
    border: none;
    outline: none;
    background: none;
}
button.btn-out-checkbox,
button.btn-out-checkbox:hover,
.menuleft-item-screen button.btn-out-checkbox,
.menuleft-item-screen button.btn-out-checkbox:hover .menuleft-item-screen button.btn-out-radio,
.menuleft-item-screen button.btn-out-radio:hover {
    margin-bottom: 0;
}

.btn-checkbox,
.btn-radio,
.grArea1-btn>.grArea1-btn-radio {
    width: 1.5em;
    height: 1.5em;
    border-radius: .25em;
    border: .1em solid #000;
    background-color: #FFF;
    display: inline-block;
    vertical-align: text-bottom;
}

.btn-radio {
    width: 1.5em;
    height: 1.5em;
    border-radius: .75em;
    text-align: center;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .75);
}

.btn-checkbox {
    border-radius: .2em;
}

.btn-checkbox>.into-checkbox,
.btn-radio>.into-radio,
.grArea1-btn>.grArea1-btn-radio>.into-radio {
    width: calc(1.5em - .67em);
    height: calc(1.5em - .65em);
    border-radius: .25em;
    border: .35em solid #e7e7e7;
    background-color: #e7e7e7;
}

.btn-radio>.into-radio {
    width: calc(100% - .5em);
    height: calc(100% - .5em);
    margin: .25em;
    border-radius: 1.75em;
    border: none;
}

.btn-checkbox>.into-checkbox {
    border-radius: .2em;
}


.box-floating-control.show,
.box-tooltip.show {
    opacity: 1;
    left: auto;
    top: auto;
}
.multimedia-menu-box {
    margin: .5em 0 0 .5em;
    width: 2.35em;
    min-height: 2.35em;
    box-sizing: border-box;    
}
.viewer.fullscreen .multimedia-menu-box {
    margin: .4em 0 0 .4em;
}
.multimedia-menu-box button {
    display: block;
    
    width: 2.65em;
    height: 2.65em;
    padding: 0 0 0 0;
    box-sizing: border-box;
}
.viewer.fullscreen .multimedia-menu-box button {
    height: 2.65em;
    width: 2.65em;
}
.multimedia-menu-box button use {
    width: 85%;
}
/* .viewer.fullscreen .multimedia-menu-box button use {
    width: 5em;
} */
.btn-3d-pitch.aligned-to-left {
    position: absolute;
    margin-left: -40em;
}


.cover-box,
.cover-box.dialog-default {
    position: absolute;
    z-index: 550;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(59, 85, 97, .86);
    background: linear-gradient(to bottom, rgba(59, 85, 97, .5) 0, rgba(2, 22, 31, .75) 100%);
}

.viewer .cover-box {
    z-index: 450;
    bottom: auto;
}

.cover-box .box-into-content {
    width: 100%;
    height: 100%;
}

.cover-box img {
    border: #fff solid .1em;
    max-height: calc(100% - 1em);
    width: auto;
}

.shadow-med-soft-2,
.cover-box img {
    box-shadow: 2px 2px 20px rgba(0, 0, 0, .35);
}


.cover-box .box-content img {
    height: 100%;
    width: auto;
}


.cover-box.opened {
    opacity: 1;
}

.cover-box.opened img {
    transform: scale(1);
}

[class*="btn-close"] {
    border: #fff solid .2em;
    background-color: transparent;
    border-radius: .25em;
}

[class*="btn-close"]:hover {
    border: #68dcff solid .2em;
}

.btn-close-cover-box {
    position: absolute;
    top: 2em;
    right: 2em;
    margin: 0;
    padding: 0;
    border: #fff solid .2em;
    background-color: transparent;
    border-radius: .25em;
}
.viewer .btn-close-cover-box {
    top: .5em;
    right: .5em;
    font-size: .625em;    
}
.viewer.fullscreen .btn-close-cover-box {
    font-size: 1em;    
}
/* 
.viewer.fullscreen .multimedia-menu-box .item-svg {
    font-size: 1.75em;    
} */

.flex-center-content {
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center
}
.video-player-box {
    height: 30em;
    width: calc(30em * (16 / 9));
}

.viewer .video-player-box {
    height: 15em;
    width: calc(15em * (16 / 9));
}
.viewer.fullscreen .video-player-box {
    height: 40em;
    width: calc(40em * (16 / 9));
}
.video-player-box iframe {
    width: 100%;
    height: 100%;
}

.video-player-box h4 {
    color: #FFF;
    font-size: 1.2em;
}

.rotating-pitch-mark {
    transform: rotate(0deg);
    background: url(../img/svg/rotating-pitch-mark.svg);
    background-size: cover;
    position: absolute;
    /*left: 5em;
     bottom: 1em; */
    width: 3em;
    height: 3em;
    /* animation: load8 5.5s linear; */
    opacity: 0;
    transition: opacity .75s ease;
}
.rotating-pitch-mark.show {
    opacity: 1;
    width: 3em;
    height: 3em;
}
.rotating-pitch-mark.minified {
    opacity:0;
    width: 0;
    height: 0;
}

@keyframes logo3DRotating {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.logo-3d-loading {
    width: 4em;
    height: 4em;
    text-align: center;
    opacity: 1;
    transition: opacity .75s ease;
    position: absolute;
    margin-left: 0em;
    margin-top: .5em;
    z-index: 999;
    background: url(../img/svg/logo3d_loading.svg) center center  no-repeat;
    background-size: 100% auto;
}
.logo-3d-loading.remove {
    opacity: 0;
}
.logo-3d-loading .logo-imagotype {
    background: url(../img/svg/ssp_imagotype_minimized.svg) center center  no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* .logo-3d-loading .logo-3d-out {
    background: url(../img/svg/ssp_imagotype_interior.svg) center center  no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
}
.logo-3d-loading .logo-3d-in {
    height: 100%;
    width: 100%;    
    background: url(../img/svg/ssp_imagotype_border.svg) center center  no-repeat;
    background-size: 100% 100%;
    transform-origin: 50% 50%;
} */

.logo-doublefaced {
  width: 2em;
  height: 2em;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  display: inline-block;
  /* position: absolute;
  transform: rotateY(0deg); */
  animation: logo3DRotating 1.5s infinite linear;
}

.logo-doublefaced.is-flipped {
  transform: rotateY(180deg);
}

.logo_face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.face-front {
  /* background: red; */
}

.face-back {
  /* background: blue; */
  transform: rotateY(180deg);
}

.logo-3d-text {
    color: #FFFFFF;
    font-size: 2em;
    text-align: center;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, .75);
    display: inline-block;
    margin-left: -.1em;
    margin-top: -.1em;
    
}




/* Lineup box */

.screen-lineup-screen {
    height: 100%;
    width: 100%;
}

.screen-lineup-screen>.gr-box-into {
    height: 100%;
    display: flex;
    justify-content: center;
    margin: 1em;
}

.viewer .screen-lineup-screen>.gr-box-into {
    margin: .25em;
}

.screen-lineup-screen>.gr-box-into .box-team {
    height: 100%;
    width: calc(50% - .5em);
    background: rgba(0, 0, 0, .6);
    border-radius: .25em;
    margin-right: 1em;
}

.screen-lineup-screen>.gr-box-into .box-team:last-child {
    margin-right: 0;
}

.screen-lineup-screen>.gr-box-into .box-team .box-title {
    height: 2.25em;
}

.screen-lineup-screen>.gr-box-into .box-team h5 {
    text-align: center;
    font-size: 1.5em;
    margin: .5em 0 0 0;
    color: #FFF;
}

.screen-lineup-screen>.gr-box-into .box-team .box-scroll {
    height: calc(100% - 3em);
}

.screen-lineup-screen>.gr-box-into .box-team .box-scroll button {
    cursor: default;
}

.screen-lineup-screen .team-player-item {    
    min-width: 20em;
}
.screen-lineup-screen .team-player-item button.btn-drag-player {
    width: 100%;
}
.screen-lineup-screen .team-player-item>.gr-box-into {
    margin: .4em .5em 0 .6em;
    width: calc(100% - 1.5em);
}

.screen-lineup-screen .team-player-item .box-model-img {
    background: none;
}

.screen-lineup-screen .team-player-item .box-model-img>img {
    height: 2em;
    width: auto;
    transform: scale(2);
    border: none;
}

.screen-lineup-screen .team-player-item .gr-box-into:hover {
    background: rgba(255, 255, 255, .15);
}
.viewer .gr-number {
    width: 1.5em;
    border: 1px solid rgba(255, 255, 255, .81);
    margin-top: .25em;
    margin-left: .25em;
    margin-right: .25em;
    text-align: right;
    /* background: #006b86;
    color: #FFF; */
}
.viewer .gr-data {
    margin-top: .25em;
    margin-left: .25em;
    margin-right: .25em;    
}
.viewer .team-player-number {
    display: block;
    font-size: 1em;
    padding: 0 .25em 0 .25em;
    width: calc( 100% - .5em);
    height: 1.25em;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .75);
}
.viewer .team-player-number span {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    display: block;
    height: 100%;
    text-align: right;
}
.viewer .team-player-number span:empty::after {
    display: block;
    height: 100%;
}
.viewer .team-player-playername {
    font-size: .9em;
    white-space: nowrap;
    color: #FFF;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, .75);
}

/* others shared */

iframe#svg-iframe {
    display: none;
}

.flex-row-nowrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start
}




/* TEXT EDITOR */

.text-editor,
.text-editor form {
    width: 100%;
    height: 100%;
}

.text-editor .controls-box {
    width: 4em;
}
.text-editor.full-width-tools .controls-box {
    width: calc( 100% - .5em);    
    height: 3em;
    padding: .25em;
}
.text-editor.full-width-tools {    
    height: 14em;
}
.text-editor.full-width-tools .text-editor-show {    
    height: 145px;
    width:407px;
    position: absolute;
    /* z-index: 2000; */
}
.text-editor.full-width-tools.overall-desc .text-editor-show  {
    height: 110px;
    width:761px
}
.text-editor.full-width-tools .text-editor-show.default_self_evaluation  {
    height: 118px;
    width:881px
}
.text-editor .box-out-progress {
    padding: .35em;
    padding-left: 0;
    background: #00000011;
    width: calc( 100% - .75em);
}

.text-editor.full-width-tools .box-out-progress {
    /* width: calc( 100% - 20em);     */
    width: 10em;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    height: calc( 100% - .4em);
    margin: .25em .25em 0 .25em;
}

.text-editor .box-progress {
    height: 1.75em;
    background: transparent;
    
}
.text-editor.full-width-tools .box-progress {
    /* height: calc( 100% - 1px); */
    height: 100%;
    background: transparent;
    /* border-bottom: solid 1px #002341; */
}

.left-label {
    margin-top: 1em;
}

.left-label,
.left-value {
    color: #FFF;
    padding: .25em;
    font-weight: bold;
}

.text-editor.full-width-tools .left-value {
    padding: .5em 0 0 .5em;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, .75);
}

.grTextEditor .text-editor .controls-box {
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: all .25s ease;
}

.grTextEditor.focused .text-editor .controls-box {
    width: 4em;
    opacity: 1;
}

.text-editor .controls-box button {
    margin: 0 .5em .5em 0;
    padding: .25em;
    font-size: 1em;
    cursor: pointer;
    height: 2.65em;
    width: 2.65em;
    vertical-align: middle;
}


.text-editor.full-width-tools .controls-box button {
    margin: 0 .25em 0 .15em;
}

.text-editor .controls-box button:hover {
    border: .1em solid #396c8a;
    color: #2c2c2c;
    background-color: #6ad5ff;
}

.text-editor .controls-box button.only-dev {
    border: .1em solid #FFF;
    color: #FFF;
    background-color: #8ca6b3;
}

.grTextEditor .text-editor .textarea-box {
    width: 100%;
}

.text-editor p {
    margin-top: 8px;
    margin-bottom: 10px;
}

.text-editor iframe {
    background-color: #FFF;
}

.text-editor .textarea-box iframe {
    width: calc(100% - .75em);
    height: calc(100% - .75em);
}

.text-editor .textarea-box textarea {
    width: calc(100% - .5em);
    height: calc(100% - 1em);
}

.content-box textarea {
    width: calc(100% - 1em);
    height: calc(100% - 1em);
}

.content-box input,
.content-box textarea {
    margin-top: .25em;
    margin-right: .75em;
}

.content-box input {
    padding-top: .15em;
    padding-bottom: .15em;
}


.text-editor-show ul {
	margin-left: 0;
	padding-left: 0;
    margin-bottom: 15px;
    margin-top: 8px;
}

.text-editor-show ul li {
	margin-bottom: 8px;
}

.text-editor-show ul > li {
	margin-left: 20px;
	padding-left: 0px;
	/* font-size:12px;	 */
	background: none;
	list-style-type: disc;
	color: #000;
}

.text-editor-show ul > li  ul > li {
	list-style-type: circle;
}

.text-editor-show ul > li  ul > li  ul > li  {
	list-style-type: square;
}
.text-editor-show .tx-parent-out {
    background: #ff9d0034;
}

.text-editor-show .tx-out {
    background: #ff000034;
}
.text-editor-show {
    font-size: 1.2em;
    height: calc(100% - .5em);
    color: #000;
    padding: .5em;
    border: .05em solid #223541;
    border-radius: .25em;
    background: #FFF;
    overflow-y: auto;
}

.text-editor-show.focused {
    outline: 0;
    border: .1em solid #009fcf;
}

.text-editor-show p {
    font-size: 1em;
}
canvas.test,
img.test {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
}

#BuilderView .grScreens-area-ul,
#PrintView .grScreens-area-ul {
    width: 100%;
    list-style-type: none;
    padding: .5em;
    padding-top: .5em;
    padding-right: 2em;
    margin-top: 0;
    text-align: center;
}
#BuilderView .grScreens-area-ul {
    padding-bottom: 1.5em;
    text-align: left;
}

#PrintView .grScreens-area-ul {
    box-sizing: border-box;
    display: flex;;
    flex-flow: wrap;
    justify-content: center;
}
#BuilderView .grScreens-area-ul li, 
#PrintView .grScreens-area-ul li {
    margin: .4em;
    display: inline-block;
    vertical-align: middle;
    
}
#BuilderView .grScreens-area-ul button,
#PrintView .grScreens-area-ul button {
    padding: .65em;
    background-color: #fff;
    color: #000;
    border: .2em solid #999;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    /* transition: opacity .25s ease; */
    opacity: 1;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .35);
}
#BuilderView .grScreens-area-ul button {   
    width: 14.15em;
}
.theme-bg-img #BuilderView button label {
    color: #000;
}
#BuilderView .grScreens-area-ul button.selected, 
#PrintView .grScreens-area-ul button.selected {
    opacity: 1;
    border: .2em solid #37c6ff;
}
#BuilderView .grScreens-area-ul li .box,
#PrintView .grScreens-area-ul li .box {
    width: 12em;
    height: calc(12em / (16 / 9));
}
#BuilderView .grScreens-area-ul li img,
#PrintView .grScreens-area-ul li img {
    width: 100%;
    height: calc(12em / (16 / 9));
    height: auto;
}
#BuilderView .grScreens-area-ul li img.hide-mask,
#PrintView .grScreens-area-ul li img.hide-mask {
    height: 0;
}
.screen-item .grArea1-btn-radio {
    width: 1.5em;
    height: 1.5em;
    border-radius: .25em;
    border: .1em solid #000;
    background-color: #FFF;
    vertical-align: text-bottom;
    margin-top: .5em;
}

.screen-item .grArea1-btn-radio>.into-radio {
    width: calc(1.5em - .7em);
    height: calc(1.5em - .7em);
    border-radius: .25em;
    border: .35em solid #fff;
    background-color: #fff;
}

.screen-item button.selected>.grArea1-btn-radio>.into-radio {
    background-color: #bfd400;
}

.screen-item .screen-print-label {
    margin-top: .5em;
}


.cover-block-box {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 100%;
    transition: all 0.35s ease-in-out; 
    background:rgba(0, 0, 0,.5);
    opacity: 0;
    height: 0;
    z-index: 1000001;
    
}
.cover-block-box.darken {
    background:rgba(0, 0, 0,.75);
}
.cover-block-box.no-transition {
    transition: none;
}
.cover-block-box.visible {
    bottom: auto;
    height: 100%;
    opacity: 1;
}

.interactive-point-observer {
    background: rgb(158, 0, 206);    
    width: 1em;
    height: 1em;    
    border-radius: .25em;
    position: absolute;
    z-index: 88888888888;
}
.interactive-pointtomove-observer {
    background: rgb(122, 228, 0);    
    width: 2em;
    height: 2em;    
    border-radius: .25em;
    position: absolute;
}
.posXtomove {
    background: rgb(206, 175, 0);    
    width: 2em;
    height: 2em;
    border-radius: 1em;
}

/* PRESETS STYLES */


.box-floating-control .pitches-presets-menu {
    width: 305px;
    height: auto;
    padding: 3px 3px 3px 3px ;
 }




 /* .box-floating-control .pitches-presets-menu .box-presets-list {
    white-space: nowrap;
 } */


 .box-floating-control .btn-preset.display-none,
 .box-floating-control .pitches-presets-menu .btn-preset {
    display: inline-block;
    visibility: visible;
 }
 .box-floating-control .pitches-presets-menu .box-menu-section {
    margin: 0 0 0 0;
    width: 310px;
    /* padding: 0 0 0 0; */
 }

 
 .viewer .box-floating-control .pitches-presets-menu {
    width: 185px;
    box-sizing: border-box;
    margin-top: 4px;
    margin-left: 4px;
 }
 
 .viewer .box-floating-control .pitches-presets-menu .box-menu-section  {
    width: 185px;
    box-sizing: border-box;
 }
 .viewer .box-floating-control.vertical-box .pitches-presets-menu,
 .viewer .box-floating-control.vertical-box .pitches-presets-menu .box-menu-section  {
    width: 105px;
 }
 
 /* Fullscreen */
  
 .viewer.fullscreen .box-floating-control .pitches-presets-menu {
    width: 20.5em;
    margin-top: 1.3em;
    margin-left: 1em;
 }
 
 .viewer.fullscreen .box-floating-control .pitches-presets-menu .box-menu-section,
 .viewer.fullscreen .box-floating-control.vertical-box .pitches-presets-menu,
 .viewer.fullscreen .box-floating-control.vertical-box .pitches-presets-menu .box-menu-section  {
    width: 20.5em;
 }
 


 
 .viewer .box-floating-control .pitches-presets-menu .box-menu-section .item-svg  {
    width: 100%;
    height: 100%;
 }

 
 .box-floating-control.pitch-options-menu .content-box {
    margin-left: 29px;
    margin-top: 8px;
 }


 
 .viewer .box-floating-control.pitch-options-menu .content-box {
    padding: 0 0 0 0;
    margin-top: 12px;
    margin-left: 12px;
 }
  
 .viewer .box-floating-control.pitch-options-menu.vertical-box .content-box {
    margin-left: 13px;
    margin-top: 13px;
    padding: 0 0 0 0;
 }

 .box-edit-fixed button.btn-black {
    padding: .5em .5em .5em .5em;
    margin-top: .25em;
    margin-left: 1em;
 }

 .box-floating-control.pitch-options-menu .box-menu-items,
 .box-floating-control.pitch-options-menu .box-menu-items .box-options-into,
 .box-floating-control.pitch-options-menu .scroll-box-content > *,
 .box-pitchFloorTypeIds-into {
    width: 4.25em;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
 }
.box-menu-items .out-item-box,
 .box-floating-control.pitch-options-menu .scroll-box-content > * > *,
 .kit-pitchFloorTypeId-type {
    width: 4.25em;
    height: 4.25em;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    display: inline-block;
 }

 .viewer .box-menu-items .out-item-box {
    width: 3em;
    height: 3em;
 }

 .box-menu-items .out-item-box *,
 .box-menu-items .out-item-box .item-svg,
 .box-floating-control.pitch-options-menu .scroll-box-content > * > * *,
 .box-floating-control.pitch-options-menu .scroll-box-content > * .item-svg,
 .kit-pitchFloorTypeId-type *,
 .kit-pitchFloorTypeId-type .item-svg {
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
 }
 .box-menu-items .out-item-box button {
    background-image: linear-gradient(to bottom, #5a6870 0, #101111 100%);
 }
 .pitch-options-menu .box-scroll {
    width: 4.25em;
    margin-left: 2.25em;
    margin-top: 0.5em;
 }

 .box-floating-control.pitch-options-menu .gr-box-into {
    width: calc( 100% - 0.3em);
    height: calc( 100% - 0.3em);
    margin: .15em;
 }

 .box-floating-control.pitch-options-menu .gr-box-into .btn-pitchDepthId-type .item-svg {
    width: calc( 100% - 0.3em);
    height: calc( 100% - 0.3em);
    margin: .15em;
 }
 .box-floating-control.pitch-options-menu .item-svg,
 .box-floating-control.pitch-options-menu .gr-box-into .btn-pitchDepthId-type .item-svg {
    background-image: none;
 }

 .box-menu-items .out-item-box button {
    border: solid 0.025em #FFFFFF;
 }
 .box-menu-items .out-item-box button.selected,
 .box-menu-items .out-item-box button:hover {
    border: solid 2px #20f4ff;
 }

 
/* item-line-graph */

.item-line-graph {
    width: 8em;
    height: 3.25em;
    border: solid 1px transparent;
    /* display: flex;
    justify-content: center;
    align-items: center;*/ 
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 0 0 0 0;
    padding: .5em .1em .5em .1em;
    white-space: nowrap;   
}

.lines-key-box .item-line-graph {
    display: flex;
    justify-content: center;
    align-items: center;
}


.item-line-graph.arrow-none .line-arrow-start,
.item-line-graph.arrow-none .line-arrow-end {
    display: none;
}

/* .item-line-graph.arrow-toEnd .line-section,
.item-line-graph.arrow-toIni .line-section {
    width: calc(100% - 1em);
} */

.item-line-graph.arrow-Both.is-line-type-simple .line-section {
    width: calc(100% - 3em);
}
.item-line-graph.arrow-toIni.is-line-type-curved > *  {
    margin-top: .2em;
}
.item-line-graph.arrow-toEnd.is-line-type-curved > *,
.item-line-graph.arrow-Both.is-line-type-curved > * {
    margin-top: .3em;
}


.item-line-graph.arrow-toEnd .line-arrow-start {
    display: none;
}

.item-line-graph.arrow-toIni .line-arrow-end {
    display: none;
}


[class*="line-arrow-"],
.line-arrow-start,
.line-arrow-end {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}



.rotate-arrow-custom-ini {
    transform-origin: 89% 50%;
    transform: rotate(297deg);
}

.rotate-arrow-custom-end {
    transform-origin: 15% 50%;
    transform: rotate(300deg);
}


/* Straight ini */

.arrow-thickness-0 .straight-arrow {
    transform-origin: 50% 50%;
    transform: scale(1.8);
}

.arrow-thickness-1 .straight-arrow {
    transform-origin: 50% 50%;
    transform: scale(1.5);
}

.arrow-thickness-2 .straight-arrow {
    transform-origin: 50% 50%;
    transform: scale(1.3);
}

/* Custom ini */

.arrow-thickness-0 .rotate-arrow-custom-ini {
    transform-origin: 105% 25%;
    transform: rotate(297deg) scale(1.5);
}

.arrow-thickness-1 .rotate-arrow-custom-ini {
    transform-origin: 95% 15%;
    transform: rotate(297deg) scale(1.25);
}

.arrow-thickness-2 .rotate-arrow-custom-ini {
    transform-origin: 110% 25%;
    transform: rotate(297deg) scale(1);
}

/* Custom end */

.arrow-thickness-0 .rotate-arrow-custom-end {
    transform-origin: 5% 75%;
    transform: rotate(300deg) scale(1.5);
}
.arrow-thickness-1 .rotate-arrow-custom-end {
    transform-origin: 2% 80%;
    transform: rotate(300deg) scale(1.25);
}
.arrow-thickness-2 .rotate-arrow-custom-end {
    transform-origin: -10% 80%;
    transform: rotate(300deg) scale(1);
}


.rotate-arrow-curved-ini {
    transform-origin: 150% 49%;
    transform: rotate(65deg);
}


.rotate-arrow-curved-end {
    transform-origin: -40% 41%;
    transform: rotate(-83deg);
}

/* curved ini */

.arrow-thickness-0 .rotate-arrow-curved-ini {
    transform-origin: 120% 80%;
    transform: rotate(65deg) scale(1.5);
}

.arrow-thickness-1 .rotate-arrow-curved-ini {
    transform-origin: 132% 70%;
    transform: rotate(65deg) scale(1.25);
}

.arrow-thickness-2 .rotate-arrow-curved-ini {
    transform-origin: 140% 55%;
    transform: rotate(65deg) scale(1);
}

/* curved end */
.arrow-thickness-0 .rotate-arrow-curved-end {
    transform-origin: -20% 50%;
    transform: rotate(-83deg) scale(1.5);
}
.arrow-thickness-1 .rotate-arrow-curved-end {
    transform-origin: -30% 40%;
    transform: rotate(-83deg) scale(1.25);
}
.arrow-thickness-2 .rotate-arrow-curved-end {
    transform-origin: -30% 40%;
    transform: rotate(-83deg) scale(1);
}


.line-section {
    width: calc(100% - 2em);
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.line-section .line-body {
    width: 100%;
    height: 0;
    margin-top: 1.125em;
    border: 1px #7a9c00;
    border-style: dashed;
    margin-left: -.05em;
}

/* line Thickness */
.line-thickness-0 .line-section line,
.line-thickness-0 .line-section path {
    stroke-width: 7;
}
.line-thickness-1 .line-section line,
.line-thickness-1 .line-section path {
    stroke-width: 5;
}
.line-thickness-2 .line-section line,
.line-thickness-2 .line-section path {
    stroke-width: 3;
}



/* line Thickness is-line-type-wavy or line-style-3*/
.line-thickness-0.line-style-3 .line-section line,
.line-thickness-0.line-style-3 .line-section path,
.line-thickness-0.is-line-type-wavy .line-section line,
.line-thickness-0.is-line-type-wavy .line-section path {
    stroke-width: 4;
}
.line-thickness-1.line-style-3 .line-section line,
.line-thickness-1.line-style-3 .line-section path,
.line-thickness-1.is-line-type-wavy .line-section line,
.line-thickness-1.is-line-type-wavy .line-section path {
    stroke-width: 3;
}
.line-thickness-2.line-style-3 .line-section line,
.line-thickness-2.line-style-3 .line-section path,
.line-thickness-2.is-line-type-wavy .line-section line,
.line-thickness-2.is-line-type-wavy .line-section path {
    stroke-width: 2;
}

/* Line Styles */

.line-style-0 .line-section line,
.line-style-0 .line-section path {
    stroke-dasharray: none;
}

.line-style-1 .line-section line,
.line-style-1 .line-section path {
    stroke-dasharray: 10, 5
}

.line-style-2 .line-section line,
.line-style-2 .line-section path {
    stroke-dasharray: 5, 5
}


.line-style-4 .line-section line,
.line-style-4 .line-section path {
    stroke-dasharray: 0, 20;
    stroke-linecap: round;
    stroke-dashoffset: 10;
}


.line-thickness-0.line-style-4 .line-section line,
.line-thickness-0.line-style-4 .line-section path {
    stroke-dasharray: 0, 20;
    stroke-linecap: round;
    stroke-dashoffset: 10;
    stroke-width: 10;
}

.line-thickness-1.line-style-4 .line-section line,
.line-thickness-1.line-style-4 .line-section path {
    stroke-dasharray: 0, 17;
    stroke-linecap: round;
    stroke-dashoffset: 10;
    stroke-width: 8;
}
.line-thickness-2.line-style-4 .line-section line,
.line-thickness-2.line-style-4 .line-section path {
    stroke-dasharray: 0, 13;
    stroke-linecap: round;
    stroke-dashoffset: 10;
    stroke-width: 6;
}

.line-section .line-body.line-style-solid {
    border-style: solid;
}

.line-section .line-body.line-style-dashed {
    border-style: dashed;
}

.item-line-graph.arrow-none .line-section {
    width: calc(100% - 1em);
}

.item-line-graph.is-line-type-simple.arrow-toIni .line-arrow-start {
    margin-left: .25em;}

.item-line-graph.is-line-type-simple.arrow-toEnd .line-section {
    margin-left: 0;
}

.item-line-graph.line-type-is-shaded-area .line-section {
    margin-left: -.125em;
}
/* 
.item-line-graph.arrow-toEnd .line-section {
    margin-left: .5em;
} */

.item-line-graph.is-line-type-curved .line-section {
    width: calc(100% - 1.5em);
}

.item-line-graph.is-line-type-curved.arrow-none .line-section {
    margin-left: -.25em;
}
.item-line-graph.is-line-type-curved.arrow-Both .line-arrow-start {
    margin-left: -.25em;
}
.item-line-graph.is-line-type-curved.arrow-toIni .line-arrow-start {
    margin-left: -.75em;
}
.item-line-graph.is-line-type-curved.arrow-toEnd .line-section {
    margin-left: .5em;
}

.item-line-graph.arrow-toEnd.is-line-type-custom .line-section,
.item-line-graph.arrow-toIni.is-line-type-custom .line-section {
    width: calc(100% - 1.5em);
}


.item-line-graph.arrow-toIni.is-line-type-custom .line-arrow-start {
    margin-left: -.5em;
}
.item-line-graph.arrow-toEnd.is-line-type-custom .line-section {
    margin-left: .5em;
}

.item-line-graph .item-svg,
.item-line-graph .item-svg svg,
.item-line-graph .item-svg svg use {
    height: 100%;
    width: 100%;
}

.connecting-lines .connecting-line-show.item-line-graph {
    width: 13em;
    height: 12em;
}

.connecting-lines .box-line-properties {
    margin-top: 2em;
    margin-bottom: 1em;
}


@media (max-width: 600px) {
    .viewer.fullscreen .scribble-board-box {
        width: 3.725em;
        height: 19.15em;
        margin-left: .75em;
        margin-top: .75em;
    }

}

@media (max-height: 600px) {
    .viewer.fullscreen .scribble-board-box {
        width: 3.725em;
        height: 19.15em;
        margin-left: .75em;
        margin-top: .75em;
    }

}
.shadow-med-soft-1,
.header,
.mini-thumb img,
.box-controls button,
.box-floating-control .box-controls button,
.cover-box .box-controls button,
.screensView .content3d,
.btn-black,
.btn-add-tab,
.btn-3d-pitch,
[class*="btn-scroll"],
.video-item-box img,
.image-item-box img {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .35)
}

.btn-black,
.btn-black:disabled:hover,
.btn-black:disabled:active,
.btn-add-tab,
.btn-3d-pitch,
[class*="btn-scroll"],
.box-slider .box-slider-bar .handle-slider-end,
.box-slider .box-slider-bar .handle-slider-bar,
.bottomView,
.bottomScreensView,
.box-group-keyframes button,
.tab-bar-box .tab-bar-ul li.tab-item .tab-btn-bg,
.lines-item-resume .btn-edit {
    background: #1b2027;
    background: linear-gradient(to bottom, #45494f 0, #000c17 100%);
}

.btn-black:hover,
.btn-black.pre-select,
.tab-bar-box .tab-bar-ul li.tab-item:hover .tab-btn-bg,
.btn-add-tab:hover,
.btn-3d-pitch:hover,
[class*="btn-scroll"]:hover,
.btn-3d-pitch.locked,
.box-slider.focused .box-slider-bar .handle-slider-end,
.box-slider .box-slider-bar .handle-slider-end:hover,
.box-slider.focused .box-slider-bar .handle-slider-bar,
.box-slider .box-slider-bar .handle-slider-bar:hover,
.menuleft-item-screen button:hover,
ul.menuleft-btns li:hover button {
    background: #487580;
    background: linear-gradient(to bottom, #487580 0, #1e1f24 100%);
}

[class*="btn-scroll"]:active,
.btn-black.active,
.btn-black:active,
.btn-black.selected:active,
.wysihtml5-command-active:active,
.tab-bar-box .tab-bar-ul li.tab-item:active .tab-btn-bg,
.tab-bar-box .tab-bar-ul li.tab-item.active .tab-btn-bg,
.btn-addimage:active,
.btn-addvideo:active,
.btn-apply:active,
.btn-delete:active,
.menuleft-item-screen button.btn-line-control:active,
.tab-bar-box .tab-bar-ul li.tab-item.selected.dragging .tab-btn-bg {
    background: #93cede;
    background: linear-gradient(to bottom, #93cede 0, #37accc 100%);
}

.wysihtml5-command-active,
.btn-black.selected,
.btn-black.selected:hover,
.tab-bar-box .tab-bar-ul li.tab-item.selected .tab-btn-bg,
.box-slider .box-slider-bar .handle-slider-end:active,
.box-slider .box-slider-bar .handle-slider-bar:active {
    background: #007194;
    background: linear-gradient(to bottom, #007194 0, #002d4f 100%);
}
/* .box-anim-control-full-animation .box-slider .box-slider-bar,
.box-anim-control-full-animation .box-slider .box-slider-bar {
    border: none;
} */
.box-anim-control-full-animation .box-slider .box-slider-bar .handle-slider-bar {
    background: linear-gradient(to bottom, #007194aa 0, #002d4fee 100%);
    width: 1.75em;
    display: inline-block;
}
.menuleft-item-screen button:active,
.menuleft-item-screen button.active,
.menuleft-item-screen button.active:hover,
ul.menuleft-btns li.active button,
ul.menuleft-btns li .btn-icon:active,
button.btn-icon:active,
button.btn-black:active,
button.btn-black.btn-icon:active,
.middle-bar-area button.btn-icon:active,
button.btn-3d-pitch:active {
    color: #002d38;
    border: 1px solid #002b36;
    background: #93cede;
    background: linear-gradient(to bottom, #93cede 0, #37accc 100%)
}


svg path,
svg use {
    fill-rule: evenodd
}

use {
    fill: #FFF;
}

.sprite-hidden {
    overflow: hidden;
    width: 0;
    height: 0;
}

.box-slider .box-bg-extra {
    width: 100%;
    height: 100%;    
    box-shadow: inset 1px 1px 6px rgba(0, 0, 0, .5);
}
#box-anim-control-object .box-slider .box-range-result .slider-box-label span,
.box-slider.horizontal-slider .slider-box-label span {
    padding: .125em 0 0 0;
    margin: 0 0 0 0;
    display: block;
    text-align: center;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, .65);
    color: #FFF;
}


.box-slider.horizontal-slider .slider-box-label {
    width: auto;   
    margin-left: .5em;
    height: auto;
    display: inline-block;
    vertical-align: top;
}
.box-anim-control-full-animation .box-slider.horizontal-slider .into-handle-slider-bar {
    font-size: .75em;
    white-space: nowrap;
    padding: .3em 0 0 0;
}
.viewer .box-anim-control-full-animation .box-slider.horizontal-slider .into-handle-slider-bar {
    font-size: .95em;
    padding: .5em 0 0 0;
}
.viewer.fullscreen .box-anim-control-full-animation .box-slider.horizontal-slider .into-handle-slider-bar {
    font-size: .7em;
    white-space: nowrap;
    padding: .85em 0 0 0;
    vertical-align: middle;
}
.box-slider.horizontal-slider .into-handle-slider-bar.slider-box-label {
    margin: 0 0 0 0;
    height: 100%;
    text-shadow: 1px 1px 3px rgba(0, 0, 0,.99), 1px 1px 3px rgba(0, 0, 0,.99);
    vertical-align: middle;
}
.box-slider.horizontal-slider .into-handle-slider-bar .slider-box-label {
    font-size: .75em;
    margin-left: 0;
    user-select: none;
}
.box-slider.horizontal-slider .into-handle-slider-bar .slider-box-label span {
    white-space: nowrap;
    padding: 0 0 0 0;
    user-select: none;
}
.box-slider.horizontal-slider .handle-slider-bar,
.box-slider.horizontal-slider .handle-slider-bar * {
    user-select: none !important;
    touch-action: none;
}
.box-slider.horizontal-slider.with-label-end .slider-box-content {
    width: calc(100% - 4.5em);
    display: inline-block;
}
.box-anim-control .box-slider.horizontal-slider.with-label-end .slider-box-content,
.box-anim-control .box-slider.horizontal-slider.with-icon-ini.with-label-end .slider-box-content {
    width: calc(100% - 3.5em);
}


.box-slider .box-slider-bar {
    min-width: 1em;
    min-height: 22px;
    transition: opacity .25s ease;
    opacity: 1;    
}


.box-slider.horizontal-slider.transitionable .handle-slider-bar {
    transition: margin-left .125s ease-out;
}


.no-transitions svg use {
    filter: none;
}
.no-transitions,
.no-transitions *,
.no-transitions .color-picker-area,
.no-transitions .tab-menu,
.no-transitions .cover-app,
.no-transitions .box-slider .box-slider-bar,
.no-transitions .box-slider.horizontal-slider.transitionable .handle-slider-bar,
.no-transitions .box-slider.vertical-slider.transitionable .handle-slider-bar,
.no-transitions .box-slider.horizontal-slider.transitionable .handle-slider-end,
.no-transitions .box-slider.vertical-slider.transitionable .handle-slider-end,
.no-transitions .box-slider.horizontal-slider.transitionable .slider-scale-text.slider-scale-mark,
.no-transitions .box-slider.vertical-slider.transitionable .slider-scale-text.slider-scale-mark,
.no-transitions .box-slider .box-slider-scale,
.no-transitions [class*="btn-scroll"],
.no-transitions .box-scroll .box-scroll-bar,
.no-transitions .box-scroll.vertical-scroll.transitionable .scroll-box-content,
.no-transitions .box-scroll.vertical-scroll.transitionable .handle-scroll-bar,
.no-transitions .box-scroll.horizontal-scroll.transitionable .scroll-box-content,
.no-transitions .box-scroll.horizontal-scroll.transitionable .handle-scroll-bar,
.no-transitions .tab-bar-box .tab-bar-ul li.tab-item .tab-btn-bg,
.no-transitions .into-tabs-wrapped,
.no-transitions .controls-skills,
.no-transitions .grTextEditor .text-editor .controls-box,
.no-transitions .naviblocks>div.tomove,
.no-transitions .tomove,
.no-transitions .menuleft-screens>.menuleft-item-screen.tomove,
.no-transitions .menuleft-screens>.menuleft-item-screen .itemcontent .box-screen,
.no-transitions .menuleft-screens>.menuleft-item-screen .itemcontent .box-content,
.no-transitions .middleView,
.no-transitions .contentBottom .text-editor .textarea-box,
.no-transitions .contentBottom .text-editor .controls-box,
.no-transitions .menuView,
.no-transitions .settingsView .grScreens-area-ul>li,
.no-transitions .settingsView .settings-general .grTextEditor,
.no-transitions .settingsView .settings-area .settings-item-screen,
.no-transitions .videolist-btns img.mark1,
.no-transitions .videolist-btns>li .btn_video,
.no-transitions .helpView .video-player-area .videoHelp-item-screen,
.no-transitions #PrintView .grScreens-area-ul button,
.no-transitions #PrintView .areasGroup .grArea3 button,
.no-transitions .header-btns button,
.no-transitions #EditorScreen,
.no-transitions .header-screen-title,
.no-transitions .secondary .header-screen-title,
.no-transitions .secondary .header-logo,
.no-transitions button.btn_back,
.no-transitions input.input-with-button.video,
.no-transitions .over-scale,
.no-transitions .over-helper,
.no-transitions .cover-box,
.no-transitions .cover-box.dialog-default,
.no-transitions .cover-box .box-controls button,
.no-transitions #appNavigator section {
    transition: none;
}

.into-handle-slider-bar {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    justify-content: center;
    align-items: center;
    
}

.box-slider .box-slider-bar .handle-slider-end,
.box-slider .box-slider-bar .handle-slider-bar {
    padding: 0;
    margin: 0;
    margin-left: 0;
    margin-top: 0px;
    width: 1em;
    height: 1em;
    color: #FFF;
    border-radius: .25em;
    border: 1px solid #6e797c;
    box-sizing: border-box;
}



.box-slider.focused .box-slider-bar .handle-slider-end,
.box-slider .box-slider-bar .handle-slider-end:hover,
.box-slider.focused .box-slider-bar .handle-slider-bar,
.box-slider .box-slider-bar .handle-slider-bar:hover {
    border: 1px solid #5cdeff;
}

.box-slider .box-slider-bar .handle-slider-end:active,
.box-slider .box-slider-bar .handle-slider-bar:active {
    color: #FFF;
    border: 1px solid #6e797c;
}
.box-slider .box-slider-bar .handle-slider-bar {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .35);
}

.box-slider .outbox-slider-bar {
    border: 1px solid #696969;
    border-radius: .35em;
    overflow: hidden;
}
.shadow-inset-min-1 {
    box-shadow: inset 1px 1px 6px rgba(0, 0, 0, .5);
}

.box-slider .box-slider-scale .slider-scale-text {
    color: rgba(255, 255, 255, .4);
    border-left: 1px solid rgba(255, 255, 255, .3)
}

.box-slider .box-slider-scale .slider-scale-text.slider-scale-mark {
    border-left: 1px solid #FFF
}

.box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label {
    color: rgba(255, 255, 255, .4)
}

.box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label:hover {
    color: #fff
}

.box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label:active {
    color: #60cdff
}


.box-floating-control .box-slider,
.box-floating-control .box-slider .slider-scale-text {
    color: #000
}

.box-floating-control .box-slider .box-slider-scale .slider-scale-text {
    color: rgba(0, 0, 0, .4);
    border-left: 1px solid rgba(0, 0, 0, .3)
}

.box-floating-control .box-slider .box-slider-scale .slider-scale-text.slider-scale-mark {
    border-left: 1px solid #000
}

.box-floating-control .box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label {
    color: rgba(0, 0, 0, .4)
}

.box-floating-control .box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label:hover {
    color: #000
}

.box-floating-control.dark-bg .box-slider,
.box-floating-control.dark-bg .box-slider .slider-scale-text {
    color: #FFF
}

.box-floating-control.dark-bg .box-slider .box-slider-scale .slider-scale-text {
    color: rgba(255, 255, 255, .4);
    border-left: 1px solid rgba(255, 255, 255, .3)
}

.box-floating-control.dark-bg .box-slider .box-slider-scale .slider-scale-text.slider-scale-mark {
    border-left: 1px solid #FFF
}

.box-floating-control.dark-bg .box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label {
    color: rgba(255, 255, 255, .4)
}

.box-floating-control.dark-bg .box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label:hover {
    color: #FFF
}



.box-slider .box-slider-bar {
    background: none;
    /* border: 1px solid rgba(0, 0, 0, .5); */
    background: rgba(255, 255, 255, .15);
    background: linear-gradient(to bottom, rgba(255, 255, 255, .15) 0, rgba(255, 255, 255, .46) 100%)
}

.box-slider:hover .box-slider-bar {
    background: none;
    /* border: 1px solid rgba(0, 0, 0, .75); */
    background: linear-gradient(to bottom, rgba(255, 255, 255, .24) 0, rgba(255, 255, 255, .73) 100%)
}

.box-slider.focused .box-slider-bar {
    background: none;
    /* border: 1px solid rgba(0, 0, 0, .75); */
    background: rgba(204, 241, 255, .32);
    background: linear-gradient(to bottom, rgba(204, 241, 255, .62) 0, rgba(145, 226, 255, 0.842) 100%);
}
.box-slider:hover .box-slider-bar.active,
.box-slider.focused .box-slider-bar.active {
    background: none;
    background: rgba(204, 241, 255, .67);
    background: linear-gradient(to bottom, rgba(204, 241, 255, .67) 0, rgba(0, 187, 255, .71) 100%)
}

svg text {
    filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.7));
  }

svg text.white-shadow {
    filter: drop-shadow(1px 1px 3px rgb(255 255 255 / 1))
            drop-shadow(1px 1px 2px rgb(255 255 255 / 1));
}
svg text.yellow-green {
    fill: #d9ff00; 
    font-weight:bold;
    font-size: 1em;
    letter-spacing: 1px;
    filter: none;  
}
svg text.white {
    fill: #FFFFFF; 
    font-weight:bold;
    font-size: 1em;
    letter-spacing: 1px;
    filter: none;  
}
.f-w {
    width: 100%
}

.f-h {
    height: 100%
}

.f-wh,
.fullview {
    height: 100%;
    width: 100%;
}

.border-box {
    box-sizing: border-box
}

.btn-text-dragable,
.no-selectable {
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none
}
:disabled,
.disabled {
    opacity: .5
}

.crosshair,
.crosshair .lines-item-resume button,
.crosshair .lines-item-resume.selected {
    cursor: crosshair
}

.crosshair .lines-item-resume button.btn-edit {
    cursor: pointer
}

.not-allowed {
    cursor: url(../img/svg/forbidden.svg), auto
}

.forbidden,
.forbidden:hover {
    cursor: url(../img/svg/forbidden.svg), auto
}

.icon-not-alowed {
    width: 3em;
    height: 3em;
    background: url(../img/svg/forbidden.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 499
}

.centered {
    text-align: center
}



[draggable] {
    -khtml-user-select: none;
    user-select: none;
    -khtml-user-drag: element;
    -webkit-user-drag: element
}

.separator-vertical {
    border-left: solid 1px rgba(0, 0, 0, .25);
    border-right: solid 1px rgba(255, 255, 255, .5);
    width: 0;
    height: 5em;
    margin: .25em
}

.separator-horizontal {
    border-top: solid 1px rgba(0, 0, 0, .25);
    border-bottom: solid 1px rgba(255, 255, 255, .5);
    width: calc(100% - .75em);
    height: 0;
    margin: .25em;
    margin-right: .5em
}

.separator-horizontal.display-none {
    display: none;
    visibility: hidden;
    opacity: 0
}

.separator-bg-black {
    border-left: solid .051em rgba(0, 0, 0, .5);
    border-right: solid .051em rgba(255, 255, 255, .25);
    width: 0;
    height: 2em;
    margin: .25em
}

.flex-container {
    display: flex
}

.flex-direction-column {
    flex-direction: column
}

.justify-content-flex-start {
    justify-content: flex-start
}

.justify-content-center {
    -webkit-justify-content: center;
    justify-content: center
}

.align-items-center {
    align-items: center
}

.align-items-stretch {
    align-items: stretch
}

.flex-row-nowrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start
}

.flex-center-content {
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center
}

.inline-block {
    display: inline-block
}

.top-radius-5 {
    border-top-left-radius: .5em;
    border-top-right-radius: .5em
}

.left-radius-5 {
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em
}

.hide-mask {
    overflow: hidden;
    height: 0
}



/* Transitions */

.tran-opacity-025 {
    transition: opacity .25s ease
}

.tran-margin-left-05 {
    /* transition: transform .5s ease; */
    transition: margin .5s ease
}

.tran-width-025 {
    transition: width .25s ease
}

.over-scale {
    transition: transform .25s ease;
    transform: scale(1)
}

.over-scale:hover {
    transform: scale(1.25)
}


/* generic and forms */

.visibility-hidden {
    visibility: hidden
}

div[dir=rtl] {
    text-align: right
}

.mainApp p,
.mainApp .style-p {
    font-size: 1.2em;
    margin: .2em 0
}

.mainApp p.title {
    font-weight: bolder
}

.mainApp textarea,
.mainApp input,
.mainApp select {
    border: .1em solid #6d6d6d;
    background: #fff;
    overflow: auto;
    border-radius: .25em;
    font-size: 1.25em;
    font-family: sans-serif;
    width: 100%;
}
.mainApp input[type="radio"] {
    width: 1em;
    height: 1em;
}
.row-radio {
    color: #FFF;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: center;
    margin-top: .5em;
}
.row-radio label {
    margin-left: .5em;
    padding-top: .25em;
}
.mainApp textarea {
    padding: .5em;
    resize: none
}

.mainApp select,
.mainApp input {
    height: 2em;
    padding: .2em;
    padding-top: .2em;
    padding-bottom: .2em;
    box-sizing: border-box
}

/* .mainApp select {
    width: 100%
} */

.mainApp textarea:focus,
.mainApp input:focus,
.mainApp select:focus {
    outline: 0;
    border: .1em solid #009fcf
}

.mainApp select option {
    font-size: 1.1em;
    height: 20px;
    overflow: hidden;
}

.mainApp select option:hover,
.mainApp select option.selected {
    color: #fafdff;
    background: #00507e
}

.mainApp select.space-right,
.mainApp input.space-right {
    width: calc( 100% - .75em);    
}

.error-required,
textarea.error,
input.error,
p.error {
    outline: 0;
    color: #af0000;
    border: .1em solid #af0000
}

p.floating {
    position: absolute;
    width: 25em;
    height: 1.5em;
    margin-top: -2em
}

textarea.needed:empty {
    outline: 0;
    color: #af0000;
    border: .1em solid #af0000
}


.mainApp select.space-right,
.mainApp input.space-right {
    width: calc( 100% - .75em);    
}

.text-btn {
    text-align: left;
    color: #fff;
    margin-left: .25em;
}

.dialog .text-btn {
    display: inline-block;
    vertical-align: middle;
    margin: 0 .5em 0 0;
}

.dialog .btn-delete {
    width: auto;
    height: auto;
}
/** Animation */

.tab-animation-box {
    height: 0;
    padding: 0;
    overflow: hidden;
    /* background: rgba(0, 0, 0, .25); */
    margin: 0;
}

.tab-animation-box.actived {
    height: auto;
    margin: .1em;
    padding: .1em;
}

.viewer .tab-animation-box.actived {
    /* margin: 222px 0 0 0; */
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
.viewer .tab-animation-box.actived .box-animation-tools {
    margin-top: 222px;
}
.viewer .tab-animation-box .box-ini-animation {
    width: 434px;
    height: 222px;
	/* background: #00000033; */
	z-index: 3000;
    position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-ini-animation-play {
    height: 80px;
    width: 80px;
    background: #FFFFFF66;
    background: linear-gradient(to bottom, #FFFFFFAA 0, #00000066 100%);
    border-radius: 50%; 
    cursor: pointer;   
}
.box-ini-animation-play:hover {
    background: #00f7ffaa;
    background: linear-gradient(to bottom, #00f7ffaa 0, #76faff66 100%);   
}
.box-ini-animation-play .into-box {
    height: 90%;
    width: 90%;
    margin: 5%;
    background: #FFFFFF66;
    background: linear-gradient(to bottom, #FFFFFFAA 0, #FFFFFF66 100%);
    border-radius: 50%;  
}
.box-ini-animation-play .item-svg  {
    height: 60%;
    width: 60%;
    margin: 20%;   
}
.box-ini-animation-play .item-svg use {
    fill: #00000099;
}
.box-ini-animation-play:hover .item-svg use {
    fill: #000000da;
}
.viewer .tab-animation-box .box-slider {
    /* visibility: hidden; */
    visibility: visible;
}

.viewer .tab-animation-box.anima-started .box-ini-animation {
    display: none;
}
.tab-animation-box.anima-started .box-slider {
    visibility: visible;
    /* display: block; */
}
.tab-animation-box [class*="box-group-"],
.tab-animation-box .box-anim {
    color: #FFF;
    border: solid 1px rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .3);
    height: 100%;
}

.tab-animation-box .box-anicontrols-keyframes,
.tab-animation-box .box-group-controls {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}

.tab-animation-box button {
    margin: .15em 0 .15em .15em;
    height: 2.5em;
    width: 2.5em;
    padding: 0 0 0 0;
}
.viewer .tab-animation-box button {
    /* height: calc( 2.5em - .125em - .4em);     */
    height: 2.65em;
    width: 2.65em;
    font-size: .8em;    
    box-sizing: border-box;
}
.viewer .tab-animation-box button.free-draw-menu-btn {
    height: 2.65em;
    width: 2.65em;
    font-size: .8em;    
    box-sizing: border-box;
        
}

.viewer.fullscreen .scribble-board-box button,
.viewer.fullscreen .tab-animation-box button.free-draw-menu-btn,
.viewer.fullscreen .tab-animation-box button {
    height: calc( 2.5em - .125em );    
    width: calc( 2.5em - .125em );
    font-size: .95em;
}
/* .viewer.fullscreen .tab-animation-box button.free-draw-menu-btn {
    height: 2.5em;
    width: 2.5em;
    margin-left: .7em;    
} */
.viewer .tab-animation-box [class*="box-group-"],
.viewer .tab-animation-box .box-anim {
    border: none;
    background: none;
}
.tab-animation-box button.btn-scroll {    
    width: 1.5em;
}
.tab-animation-box .box-group-buttons {
    display: inline-block;
    vertical-align: middle;
    width: 9em;
}
.viewer.fullscreen .tab-animation-box .box-group-buttons {
    width: 10.2em;
}

.tab-animation-box .box-group-keyframes {
    display: inline-block;
    width: calc(100% - 3.5em);
    /* width: 100%; */
    height: 3em;
    vertical-align: middle;
}
.tab-animation-box button.btn-settings-animation .item-svg {
    display: inline-block;
    vertical-align: top;
    width: 1.25em;
    height: 1.25em;
}
.tab-animation-box button.btn-settings-animation .item-svg:last-child {
    vertical-align: bottom;
    width: 1.2em;
    height: 1.2em;
}
.box-contescroll-keyframes,
.ul-keyframes,
.tab-animation-box .box-keyframes {
    white-space: nowrap;
    padding: 0 0 0 0 ;
    margin: 0 0 0 0;
    height: 100%;
}
.tab-animation-box button.btn-scroll .item-svg {
    width: 1em;
    height: 1em;
}

.ul-keyframes {
    list-style-type: none;
    display: inline-block;
    vertical-align: middle;
    /* margin-right: 1em; */
}

.tab-animation-box .box-keyframes .btn-out-keyframe {
    display: inline-block;
    border: none;
    /* padding: 1em .5em 1em .5em;*/
    transition: width .25s ease; 
}
.tab-animation-box .box-keyframes .btn-out-keyframe:hover {
    border: none;
}
.tab-animation-box .box-group-keyframes .btn-out-keyframe {
    width: 3em;
    height: calc( 100% - .05em);
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
}
.box-group-keyframes button.btn-delete {
    height: 1.5em;
    width: 1.5em;
    border-radius: .25em .25em .25em .25em;
}
.tab-animation-box .box-group-keyframes .btn-out-keyframe.selected {
    width: 5.5em;
}

.tab-animation-box .box-group-keyframes .btn-out-keyframe div.number {
    margin: 0 .5em 0 .5em;
    display: block;
}

.tab-animation-box button.btn-add-tab {
    width: 2em;
    padding-left: .5em;
}

.tab-animation-box .box-group-keyframes .btn-out-keyframe:first-child {
    margin-left: .5em;
}

.tab-animation-box .box-anicontrols-keyframes {
    /* width: calc(30% - .5em); */
    width: 100%;
}

.tab-animation-box .box-group-controls {
    /* width: calc(70% - .5em); */
    width: 100%;
}

.tab-animation-box button.btn-black.ani-control,
.tab-animation-box .box-group-buttons>button.btn-black.ani-control {
    margin: .2em 0 .2em .2em;
    padding: .125em 0 0 0;
}
.tab-animation-box button.btn-black.ani-control:last-child {
    margin: .2em .2em .2em .2em;    
}


.tab-animation-box .box-group-controls [class*="box-control-"] {
    width: calc(50% - 1.3em);
    margin: 0 1em 0 .1em;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}


.tab-animation-box .box-group-controls .box-control-full-anima {
    width: 100%;
}

.tab-animation-box .box-group-controls [class*="box-control-"]>* {
    display: inline-block;
    vertical-align: middle;
}

.tab-animation-box [class*="box-control-"] label {
    font-size: 1em;
    padding: .25em;
}

.tab-animation-box [class*="box-control-"] .labels {
    font-size: 1em;
    padding: .35em .25em .25em .25em;
    margin: 0 .5em 0 .5em;
    width: 5.5em;
}

.tab-animation-box [class*="box-control-"] .labels .label-title {
    font-weight: bold;
    font-size: 1.05em;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, .75);
}

.tab-animation-box [class*="box-control-"] .labels .label-control {
    font-size: .88em;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, .75);
}

.tab-animation-box [class*="box-control-"] .box-anim-control {
    width: calc(100% - 12em);
    height: calc(100% - .2em);
    padding-top: .35em;
}

.tab-animation-box [class*="box-control-"] .box-anim-control#box-anim-control-object {
    width: calc(100% - 15em);
    margin-right: .5em;
}
.tab-animation-box [class*="box-control-"] .box-anim-control.full {
    width: 100%;
    height: 100%;
    /* margin-top: -100%; */
}
.tab-animation-box .box-control-full-anima {
    white-space: normal;
}
.tab-animation-box .box-control-full-anima > * {
    display: block;

}
.tab-animation-box .box-group-controls .box-control-full-anima>* {
    display: block;
    z-index: 10;
}
.tab-animation-box .box-control-full-anima > svg {
    
    height: 2.5em;
    z-index: 0;
}

.tab-animation-box [class*="box-control-"] .box-anim-info {
    width: 2.5em;
    height: 100%;
    text-align: right;
}

.tab-animation-box [class*="box-control-"] .box-anim-info .mini-roundbox {
    padding: .05em .5em .05em .5em;
    margin: .2em .2em .2em .2em;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.35em;
    border: solid 1px rgba(255, 255, 255, .3);
    background: #003879;
    display: inline-block;
    border-radius: 1em;
}

.tab-bar-box .tab-bar-ul li.tab-item.selected .tab-btn-bg.animation,
.tab-bar-box .tab-bar-ul li.tab-item.set-piece-tab.selected .tab-btn-bg.animation,
.selected .tab-btn-bg.animation,
.btn-black.animation.selected,
.btn-black.animation.selected:hover {
    color: #FFF;
    border: 1px solid #6e797c;
    background: #756ec0;
    background: linear-gradient(to bottom, #756ec0 0, #493666 100%);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .45);
}

.tab-bar-box .tab-bar-ul li.tab-item .tab-btn-bg.animation .into-tab-bg {   
    background: url(../img/svg/animate-bg4.svg) center center;
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.tab-bar-box .tab-bar-ul li.tab-item.selected .tab-btn-bg.animation .into-tab-bg {   
    background: url(../img/svg/animate-bg4.svg) center center;
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.btn-black.animation:hover {    
    border: 1px solid #5cdeff;
    color: #5cdeff;  
    background-color: #46566e;
}


.tab-animation-box {
    opacity: 0;
    transition: opacity .25s ease;
}

.tab-animation-box.show {
    opacity: 1;
}



.btn-black.animation {
    color: #FFF;
    border: none;
    background: #6B6D7D;
    background: linear-gradient(to bottom, #6B6D7D 0, #292B42 100%);
    /*background: linear-gradient(to bottom, #8570cc 0, #463361 100%);
     background: url(../img/svg/animate-bg3.svg);
    background-repeat: repeat-x;
    background-size: auto 100%; */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .45);
    text-align: center;
}
/* .tab-bar-box .tab-bar-ul li.tab-item .tab-btn-bg.animation {
    background: url(../img/svg/animate-bg4.svg);
    background-repeat: repeat-x;
    background-size: auto 100%;
}
.tab-bar-box .tab-bar-ul li.tab-item.selected .tab-btn-bg.animation {
    background: url(../img/svg/animate-bg5.svg);
    background-repeat: repeat-x;
    background-size: auto 100%;
} */

.btn-black.animation .into-btn-keyframe {
    border: 1px solid #282a2a;
    background: url(../img/svg/animate-bg.svg) center center;
    background-repeat: repeat-x;
    background-size: auto 100%;
    width: calc( 100% - 2px);
    height: calc( 100% - 2px);
    overflow: hidden;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .7em;
}
.btn-black.animation .into-btn-keyframe:hover {
    border: 1px solid #60dfff;
}
.btn-black.animation .second-keyframe-bg {
    width: 100%;
    height: 100%;    
}
.btn-black.animation .second-keyframe-bg.seamless-loop {
    background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><svg version="1.1" id="svg1" width="192" height="192" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs1" /><path style="fill:%23f2f2f2;stroke-width:4.24816" d="M 83.437621,178.15361 6.8365681,129.71594 83.437621,76.061823 v 28.038327 h 48.927799 c 13.48545,0 20.73827,-12.001718 20.68627,-24.16471 l -0.4139,-65.744393 32.38949,-0.344661 0.13615,66.275011 c -0.18583,39.699433 -17.2981,69.949663 -53.01799,69.949663 H 83.437621 Z" id="path-connect-to-start" /></svg>');
    background-repeat: no-repeat;
    background-size: auto 35%;
    background-position: 80% 70%;
}
.btn-black.animation.selected .second-keyframe-bg.seamless-loop {
    background-size: auto 35%;
    background-position: 35% 70%;
}

.btn-black.animation.selected,
.btn-black.animation.selected:hover {
    color: #FFF;
    border: none;
    background: #756ec0;
    background: linear-gradient(to bottom, #756ec0 0, #493666 100%);
    /* background: url(../img/svg/animate-bg2.svg);
    background-repeat: repeat-x;
    background-size: auto 100%; */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .45);
}
.btn-black.animation.selected .into-btn-keyframe,
.btn-black.animation.selected .into-btn-keyframe:hover  {
    border: 1px solid #ffffff;
}
.btn-black.animation .box-submenu {
    margin: 0 0 0 .25em;
    width: auto;
    cursor: pointer;
}
.btn-black.animation .box-submenu .btn-submenu-tab {
    width: 1.5em;
}
.btn-black.animation .box-submenu,
.btn-black.animation .box-delete {
    display: none;
    /* border: 1px solid #ffffff; */
}
.btn-black.animation.selected .box-submenu,
.btn-black.animation.selected .box-delete {
    display: block;
}
.btn-black.animation.selected .box-submenu.display-none,
.btn-black.animation.selected .box-delete.display-none {
    display: none;
}
.box-group-keyframes button.btn-black.btn-delete use:hover {
    fill: #B00;
}


.tab-menu.keyframes-submenu {
    background: rgba(0, 0, 0, .75);
    border: solid .05em rgba(255, 255, 255, .5);
}
.tab-menu button.display-none {
    display: none;
}
.tab-menu.keyframes-submenu button:not(button.display-none):last-of-type {
    margin-bottom: .125em;
}

.viewer .box-animation-tools {
	width: calc( 100% - 10px);
    /* width: 100%; */
    height: 2.75em;    
    position: absolute;
    z-index: 500;  
    box-sizing: border-box;
    bottom: 5px; 
    left: 5px;
}

.viewer .box-animation-tools .box-slider .box-slider-bar {
    background: url(../img/svg/bg-slider-line.svg);
    background-size: 5px 100%;
}

.box-anim-control-full-animation  {
    display: inline-block;
    width: calc( 100% - 10em);
    /* width: auto;
    min-width: 246px; */
    height: 60%;
    vertical-align: middle;
    margin-left: .5em;
}

.box-extra-buttons-animation {
    display: inline-block;
    text-align: right;
    width: 16%;
    height: 90%;
    vertical-align: middle;
    margin: 0 0 0 0;
}
.viewer.fullscreen .box-extra-buttons-animation {
    width: auto;
    
}
/* .fullscreen .box-anim-control-full-animation  {
    width: calc( 100% - 20% - 15em);    
}
.viewer.fullscreen .box-anim-control-full-animation  {
    width: calc( 100% - 17em);    
    width: calc( 100% - 20% - 15em); 
} */
.viewer .over-box-anim-control-full-animation  {
    height: 85%; 
    min-height: 1.5em;
    margin-top: 0; 
    /* min-width: 246px; */
    display: inline-block;
    vertical-align: middle;
}
.viewer .box-anim-control-full-animation  {
    display: block;
    height: 100%; 
    width: auto;
    margin-left: .5em;
    margin-right: .5em;
    box-sizing: border-box;
}
.box-anim-control-full-animation .slider-box-content,
.box-anim-control-full-animation .box-slider.horizontal-slider,
.box-anim-control-full-animation .box-slider.horizontal-slider .slider-box-view {
    height: 100%;
}
.box-anim-control-full-animation .outbox-slider-bar {
    height: calc( 100% - 2px);
}
.box-anicontrols-animation {
    height: 3.25em;    
    transition: margin-top 0.25s ease;
    /* background: rgba(0, 0, 0, .3); */
}
.viewer .box-anicontrols-animation {
    height: 2.5em;
    white-space: nowrap;
    margin-top: 3em;
}
.viewer.fullscreen .box-anicontrols-animation {
    height: 2.7em;
}
.box-anim-control-full-animation .box-bg-extra,
.box-anim-control-full-animation .handle-slider-bar {
	height: 100%;
    min-height: 2.65em;
    min-width: 2.65em;
}
.tab-animation-box button .item-svg {
    width: 100%;
    height: 100%;
}

/* Create and download video */

.create-and-download-video-box {
    /* font-size: .8em; */
    border: #FFF solid 1px;
    background: #FFFFFF66;
    background: linear-gradient(to bottom, #FFFFFFDD 0, #AAAAAAFF 100%);
    background-image: url(../img/svg/video-download-bg7.svg);
    background-size: 100% auto;
    background-position: center 0;
    width: 640px;
    height: auto;
    background-repeat: repeat-y;
    
}

.create-and-download-video-box.animated {
    animation: bgVideoMoving 50s infinite linear;
}
@keyframes bgVideoMoving {
    0% {
        background-position: center 0;
    }
    100% {
        background-position: center 7000px;
    }
}
.create-and-download-video-box h3  {
    background: #000;
    background: linear-gradient(to bottom, #2e2e2eff 0, #000000ff 100%);
    color: #FFF;
    margin: 0 0 0 0;
    font-size: 1.25em;
    padding: .5em;
    text-align: left;
}
.viewer .create-and-download-video-box h3 span  {
    font-size: 1.1em;
}
.create-and-download-video-box h3 span {
    margin-left: .5em;
    width: calc( 100% - 4.05em);
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}
.create-and-download-video-box .mainbox {
    padding: 1em 3em 1em 3em;
}
.create-and-download-video-box .box-select {
    margin: .75em 2em;
    text-align: left;
    margin-top: 1.5em;
}
.box-video-slider {
    width: calc( 100% - 12em );
    display: inline-block;
}
.mainApp .create-and-download-video-box  input[type="radio"] {
    font-size: 1.5em;
    margin: 0 .25em 0 0;
    padding: 0 0 0 0;
    display: inline-block;
    vertical-align: middle;
}
.mainApp .video-settings-box select {
    font-size: 1.5em;
    border-radius: .25em;
    padding: .25em .5em;
    display: inline-block;
    width: auto;
    margin-top: .25em;
}

.video-settings-box label {
    font-size: 1em;
    font-weight: bold;
    vertical-align: top;
    display: inline-block;
    
}
.video-settings-box .box-select:first-child > label {    
    vertical-align: middle;    
}

.box-radio-option.inline {
    display: block;
    font-size: 1.3em;
    margin-bottom: 0.75em;
    /* margin-right: 1em;
    display: inline-block;
    vertical-align: middle; */
}
.box-radio-option.inline label {
    vertical-align: middle;
}
.video-settings-box .box-inputs-format label {
    font-weight: normal;
}
.video-settings-box label.label-create-video-settings {
    width: 11em;
}
.box-inputs-format {
    display: inline-block;
    vertical-align: middle;
}
.create-and-download-video-box .box-buttons {
    text-align: center;
    margin-top: 1.5em;
}
.create-and-download-video-box button {
    font-size: 1.25em;
    padding: 0.5em 1em;
    margin: .5em;
    border-radius: 5px;
}
.create-and-download-video-box h3 button {
    font-size: .7em;
    padding: 0 0 0 0;
    margin: 0;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    background: #000;
    border: solid 1px #FFF;
}
.create-and-download-video-box h3 button:hover {
    border: solid 1px #F50;
}
.create-and-download-video-box .quality-slider {
    display: inline-block;
    width: 90%;
    vertical-align: middle;
}
.create-and-download-video-box .quality-value {
    vertical-align: middle;
}

.create-and-download-video-box .recording-progress-message {
    color: black;
    font-size: 1.25em;
}
.create-and-download-video-box progress[value] {
    width: 100%;
    height: 15px;
    background-color: #BBB;
    color: #F50;
    margin-top: 1em;
}

progress[value]::-webkit-progress-value {
    background-image:
         -webkit-linear-gradient(-45deg, 
                                 transparent 33%, rgba(0, 0, 0, .1) 33%, 
                                 rgba(0,0, 0, .1) 66%, transparent 66%),
         -webkit-linear-gradient(top, 
                                 rgba(255, 255, 255, .25), 
                                 rgba(0, 0, 0, .25)),
         -webkit-linear-gradient(left, rgb(255, 183, 0), rgb(165, 202, 0));
  
      border-radius: 3px; 
      background-size: 35px 20px, 100% 100%, 100% 100%;
      height: 15px;
  }

/* .create-and-download-video-box figure {
    max-width: 64rem;
    width: 100%;
    max-height: 30.875rem;
    height: 100%;
    margin: 1.25rem auto;
    padding: 1.051%;
    background-color: #666;
  } */

  .create-and-download-video-box video {
    width: 100%;
  } 

  .padding-top-30 {
    padding-top: 30px;
  }



.video-settings-box .box-inputs-format .box-best-for {
    display: inline-block;    
    vertical-align: middle;
}
.video-settings-box .box-inputs-format label.label-best-for {
    font-size: .7em;
    display: inline-block;
    vertical-align: middle;
    color: #777777;
}

.video-settings-box .box-inputs-format .text-label {
    display: inline-block;
    vertical-align: middle;
    width: 4em;
}
.best-for-icon {
    display: inline-block;
    vertical-align: middle;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    width: 1.5em;
    height: 1.5em;
    box-sizing: border-box;
    margin-left: .25em;
    /* background-color: #AAA; */
    border-radius: 10%;
}


.box-menu-anisettings .box-slider .box-slider-bar,
.box-animation-tools .box-slider .box-slider-bar {
    background: url(../img/svg/bg-slider-line.svg);
    background-size: 5px 100%;
}



.create-and-download-video-box  .box-slider .box-slider-bar {
    background: none;
    background-size: 5px 100%;
    background-color: #ede9f2;
}
/* .create-and-download-video-box #box-fps-slider  .box-slider .box-slider-bar {
    background: url(../img/svg/bg-slider-line3.svg?i=1);
    background-size: 5px 100%;
    background-color: #ede9f2;
} */
.create-and-download-video-box  .box-slider .box-slider-scale {
    opacity: 1;
}


.icon-youtube {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='192' height='192' viewBox='0 0 192 192' version='1.1' id='svg1471' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1468'%3E%3Cpattern id='EMFhbasepattern' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-1' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-4' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-3' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3C/defs%3E%3Crect style='fill:%23777777;fill-opacity:1;stroke-width:2.00281' id='rect6800' width='164.40945' height='164.40945' x='13.795277' y='13.795269' ry='51.393177' /%3E%3Cg id='logo-youtube-8' style='fill:%23ffffff' transform='matrix(3.1713197,0,0,3.1713197,16.717008,-764.06197)'%3E%3Cpath style='fill:%23ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583' d='m 20.789198,264.99494 c 0,3.80956 0,7.62929 0,11.43885 3.65676,-1.89459 7.31353,-3.79937 10.97029,-5.70415 0,-0.0102 0,-0.0204 0,-0.0306 -3.65676,-1.90478 -7.31353,-3.80956 -10.97029,-5.70415 z m 14.96319,-7.94505 c 3.14746,0.47874 5.04205,-0.19354 7.14036,1.43622 1.56864,1.2325 1.79273,3.29007 2.18998,5.74489 0.32595,2.027 0.27502,4.30866 0.27502,6.62087 0,4.95039 0.25465,10.89899 -2.58723,13.04823 -2.11868,1.58901 -11.67312,1.54827 -15.36044,1.54827 -1.80292,0 -3.61602,0 -5.41894,0 -4.62442,0 -12.4676198,0.25465 -14.9937398,-1.75199 -1.49734,-1.18157 -1.70106,-3.27988 -2.07794,-5.62265 -0.32595,-2.02701 -0.27502,-4.30867 -0.27502,-6.62088 0,-4.21699 -0.20372,-9.0757 1.43622,-11.7648 1.50753,-2.54649 4.2475498,-2.63816 7.3950198,-2.63816 7.48668,0 14.69835,-0.24446 22.27671,0 z' id='path4088' /%3E%3C/g%3E%3C/svg%3E%0A");
}

.icon-facebook {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='192' height='192' viewBox='0 0 192 192' version='1.1' id='svg1471' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1468'%3E%3Cpattern id='EMFhbasepattern' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3C/defs%3E%3Cg id='layer1'%3E%3Cg id='logo-youtube' transform='matrix(3.84,0,0,3.84,3.1853424e-7,-945.40809)'%3E%3Crect style='fill:%23777777;fill-opacity:1;stroke-width:0.521564' id='rect6800' width='42.81496' height='42.81496' x='3.5925198' y='249.79254' ry='13.38364' /%3E%3Cpath style='fill:%23ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.248784' d='m 33.455135,278.05349 0.995137,-6.46837 h -6.21959 v -4.22932 c 0,-1.74149 0.829282,-3.48298 3.648829,-3.48298 h 2.819548 v -5.47323 c 0,0 -2.57076,-0.49757 -5.058599,-0.49757 -5.0586,0 -8.458644,3.15126 -8.458644,8.70743 v 4.97567 h -5.63909 v 6.46837 h 5.63909 v 14.63168 h 7.048866 v -14.63168 z' id='path4527' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.icon-instagram {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='192' height='192' viewBox='0 0 192 192' version='1.1' id='svg1471' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1468'%3E%3Cpattern id='EMFhbasepattern' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-1' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3C/defs%3E%3Cg id='layer1'%3E%3Cg id='logo-youtube' transform='matrix(3.84,0,0,3.84,3.1853424e-7,-945.40809)'%3E%3Crect style='fill:%23777777;fill-opacity:1;stroke-width:0.521564' id='rect6800' width='42.81496' height='42.81496' x='3.5925198' y='249.79254' ry='13.38364' /%3E%3Cg id='g6845'%3E%3Cpath style='fill:%23ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.260417' d='m 25,259.04725 c 3.90625,0 4.427083,0.0868 5.989583,0.0868 1.388888,0.0868 2.170138,0.34722 2.690972,0.52083 0.694445,0.26042 1.215278,0.60764 1.736112,1.12847 0.520833,0.52084 0.78125,1.04167 1.128471,1.73611 0.173612,0.52084 0.434029,1.30209 0.434029,2.69098 0.0868,1.5625 0.0868,1.99652 0.0868,5.98958 0,3.90625 0,4.42708 -0.0868,5.90278 0,1.47569 -0.260417,2.25694 -0.434029,2.77778 -0.347221,0.69444 -0.607638,1.21527 -1.128471,1.7361 -0.520834,0.52084 -1.041667,0.78125 -1.736112,1.04167 -0.520834,0.26042 -1.302084,0.43403 -2.690972,0.52083 -1.5625,0.0868 -2.083333,0.0868 -5.989583,0.0868 -3.90625,0 -4.427083,0 -5.989583,-0.0868 -1.388889,-0.0868 -2.170139,-0.26041 -2.690973,-0.52083 -0.694444,-0.26042 -1.215277,-0.52083 -1.736111,-1.04167 -0.520833,-0.52083 -0.78125,-1.04166 -1.128472,-1.7361 -0.173611,-0.52084 -0.434028,-1.30209 -0.434028,-2.77778 -0.08681,-1.4757 -0.08681,-1.99653 -0.08681,-5.90278 0,-3.99306 0,-4.42708 0.08681,-5.98958 0,-1.38889 0.260417,-2.17014 0.434028,-2.69098 0.347222,-0.69444 0.607639,-1.21527 1.128472,-1.73611 0.520834,-0.52083 1.041667,-0.86805 1.736111,-1.12847 0.520834,-0.17361 1.302084,-0.43403 2.690973,-0.52083 1.5625,0 2.083333,-0.0868 5.989583,-0.0868 m 0,-2.60417 c -3.993056,0 -4.513889,0 -6.076389,0.0868 -1.5625,0.0868 -2.690972,0.34722 -3.559028,0.69444 -1.041666,0.34723 -1.822916,0.86806 -2.604166,1.64931 -0.868056,0.86806 -1.388889,1.64931 -1.736111,2.60417 -0.347222,0.95486 -0.607639,2.08333 -0.694444,3.64583 -0.08681,1.5625 -0.08681,2.08333 -0.08681,6.07639 0,3.99306 0,4.51389 0.08681,6.07639 0.08681,1.5625 0.347222,2.60417 0.694444,3.55902 0.347222,0.95487 0.868055,1.82292 1.736111,2.60417 0.78125,0.86806 1.5625,1.38889 2.604166,1.73611 0.868056,0.34722 1.996528,0.60764 3.559028,0.69445 1.5625,0.0868 2.083333,0.0868 6.076389,0.0868 3.993055,0 4.513888,0 6.076388,-0.0868 1.5625,-0.0868 2.690974,-0.34723 3.559029,-0.69445 1.041666,-0.34722 1.822916,-0.86805 2.604166,-1.73611 0.868055,-0.78125 1.388888,-1.6493 1.736112,-2.60417 0.347222,-0.95485 0.607638,-1.99652 0.694443,-3.55902 0.08681,-1.5625 0.08681,-2.08333 0.08681,-6.07639 0,-3.99306 0,-4.51389 -0.08681,-6.07639 -0.0868,-1.5625 -0.347221,-2.69097 -0.694443,-3.64583 -0.347224,-0.95486 -0.868057,-1.73611 -1.736112,-2.60417 -0.78125,-0.78125 -1.5625,-1.30208 -2.604166,-1.64931 -0.868055,-0.34722 -1.996529,-0.60763 -3.559029,-0.69444 -1.5625,-0.0868 -2.083333,-0.0868 -6.076388,-0.0868 z' id='path6819' /%3E%3Cpath style='fill:%23ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.260417' d='m 25,263.56114 c -4.166667,0 -7.552083,3.47222 -7.552083,7.63889 0,4.16666 3.385416,7.55208 7.552083,7.55208 4.166667,0 7.552083,-3.38542 7.552083,-7.55208 0,-4.16667 -3.385416,-7.63889 -7.552083,-7.63889 z m 0,12.5 c -2.690972,0 -4.947917,-2.17014 -4.947917,-4.86111 0,-2.77778 2.256945,-4.94792 4.947917,-4.94792 2.690971,0 4.947917,2.17014 4.947917,4.94792 0,2.69097 -2.256946,4.86111 -4.947917,4.86111 z' id='path6821' /%3E%3Cpath style='fill:%23ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.260417' d='m 34.635417,263.30072 c 0,0.95486 -0.78125,1.73611 -1.736112,1.73611 -1.041667,0 -1.822917,-0.78125 -1.822917,-1.73611 0,-0.95486 0.78125,-1.73611 1.822917,-1.73611 0.954862,0 1.736112,0.78125 1.736112,1.73611 z' id='path6823' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.icon-tiktok {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='192' height='192' viewBox='0 0 192 192' version='1.1' id='svg1471' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1468'%3E%3Cpattern id='EMFhbasepattern' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-1' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-4' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3C/defs%3E%3Cg id='layer1'%3E%3Cg id='logo-youtube' transform='matrix(3.84,0,0,3.84,3.1853424e-7,-945.40809)'%3E%3Crect style='fill:%23777777;fill-opacity:1;stroke-width:0.521564' id='rect6800' width='42.81496' height='42.81496' x='3.5925198' y='249.79254' ry='13.38364' /%3E%3Cg id='g6882'%3E%3Cpath style='fill:%23ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.260417' d='m 38.183601,263.48025 c 0,-0.17361 0,-0.17361 -0.173612,-0.17361 -0.347221,0 -0.694445,0 -1.041666,-0.0868 -1.215279,-0.17361 -5.208334,-2.25694 -5.902779,-5.64236 0,-0.0868 -0.08681,-0.95486 -0.08681,-1.30208 0,-0.17361 0,-0.17361 -0.173612,-0.17361 -0.0868,0 -0.0868,0 -0.0868,0 -1.5625,0 -3.125,0 -4.6875,0 -0.347223,0 -0.260417,-0.0868 -0.260417,0.26041 0,6.77084 0,13.54167 0,20.2257 0,0.26042 0,0.52083 -0.08681,0.78125 -0.260416,1.30208 -0.868055,2.34375 -1.996527,3.03819 -1.041667,0.60764 -2.083334,0.78125 -3.211806,0.52083 -0.347222,-0.0868 -0.694444,-0.1736 -1.041667,-0.34722 0,0 0,0 -0.08681,0 -0.08681,-0.17361 -0.260417,-0.17361 -0.347222,-0.26041 -1.388889,-1.04167 -2.083334,-2.43056 -1.909723,-4.16667 0.173611,-1.73611 1.215278,-2.95139 2.864584,-3.55903 0.520833,-0.17361 1.041666,-0.26041 1.5625,-0.26041 0.347222,0.0868 0.694444,0.0868 1.041666,0.17361 0.08681,0.0868 0.173611,0 0.173611,-0.0868 0,-0.0868 0,-0.0868 0,-0.17361 0,-1.21528 -0.0868,-3.81944 -0.0868,-3.81944 0,-0.34723 0,-0.69445 0.0868,-1.04167 0,-0.0868 -0.0868,-0.17361 -0.173611,-0.17361 -0.607639,-0.0868 -1.215277,-0.0868 -1.909722,0 -0.868055,0 -1.736111,0.26041 -2.517361,0.52083 -1.302083,0.43403 -2.430556,1.21528 -3.472222,2.17014 -0.868056,0.86806 -1.475695,1.82292 -1.996528,2.86458 -0.434028,1.04167 -0.78125,2.17014 -0.78125,3.29862 -0.08681,0.52083 -0.08681,0.95485 0,1.47569 0.08681,0.69444 0.173611,1.38889 0.347222,1.99653 0.607639,1.90972 1.736111,3.47222 3.298611,4.6875 0.08681,0.0868 0.260417,0.26041 0.434028,0.34722 0,0 0,0 0,0 0.08681,0.0868 0.173611,0.0868 0.260417,0.17361 0.260416,0.17361 0.520833,0.34722 0.78125,0.52083 1.736111,0.86806 3.559028,1.21528 5.46875,0.95487 2.517361,-0.34723 4.600694,-1.3889 6.249999,-3.29862 1.475695,-1.82291 2.256945,-3.90625 2.256945,-6.25 0,-3.38541 0,-6.77083 0,-10.06944 0,-0.0868 0,-0.26042 0.08681,-0.26042 0.08681,0 0.08681,0.0868 0.173612,0.0868 1.302083,0.86805 2.604167,1.47569 4.079862,1.73611 0.868055,0.26042 1.736109,0.34722 2.604167,0.34722 0.260416,0 0.260416,0 0.260416,-0.26042 0,-1.21527 0,-4.51388 0,-4.7743 z' id='path6868' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
.icon-linkedin {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='192' height='192' viewBox='0 0 192 192' version='1.1' id='svg1471' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1468'%3E%3Cpattern id='EMFhbasepattern' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-1' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-4' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-3' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3C/defs%3E%3Cg id='layer1'%3E%3Cg id='logo-youtube' transform='matrix(3.84,0,0,3.84,3.1853424e-7,-945.40809)'%3E%3Crect style='fill:%23777777;fill-opacity:1;stroke-width:0.521564' id='rect6800' width='42.81496' height='42.81496' x='3.5925198' y='249.79254' ry='13.38364' /%3E%3Cg id='g6945'%3E%3Cpath style='fill:%23fefefe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.260417' d='m 26.475694,269.07329 c 0.347222,-0.43403 0.694444,-0.86806 1.041666,-1.21528 1.215279,-1.21528 2.690972,-1.73611 4.340279,-1.73611 0.954859,0 1.822917,0.0868 2.690971,0.34722 2.083334,0.60764 3.298612,1.99653 3.819446,3.99306 0.434026,1.47569 0.520833,2.95139 0.520833,4.51388 0,3.21181 0,6.51042 0,9.72223 0,0.26042 -0.08681,0.34722 -0.434029,0.34722 -1.649304,0 -3.298612,0 -4.947916,0 -0.347222,0 -0.347222,-0.0868 -0.347222,-0.34722 0,-3.0382 0,-6.1632 0,-9.20139 0,-0.78125 -0.08681,-1.5625 -0.260416,-2.34375 -0.434029,-1.38889 -1.388891,-2.08333 -2.864584,-1.99653 -1.996528,0.0868 -3.038195,1.12847 -3.298612,3.125 0,0.43403 -0.0868,0.95486 -0.0868,1.38889 0,3.0382 0,5.98958 0,9.02778 0,0.26042 0,0.34722 -0.347223,0.34722 -1.649305,0 -3.385416,0 -5.034722,0 -0.260416,0 -0.347222,0 -0.347222,-0.34722 0,-5.90278 0,-11.80556 0,-17.79514 0,-0.26042 0.08681,-0.34722 0.347222,-0.34722 1.649306,0 3.211806,0 4.774306,0 0.347222,0 0.434028,0.0868 0.434028,0.43402 -0.08681,0.69445 0,1.38889 0,2.08334 z' id='path6919' /%3E%3Cpath style='fill:%23fefefe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.260417' d='m 17.274305,275.84412 c 0,2.95139 0,5.90278 0,8.85417 0,0.26042 -0.08681,0.34722 -0.347223,0.34722 -1.736111,0 -3.385416,0 -5.034722,0 -0.260416,0 -0.347222,0 -0.347222,-0.34722 0,-5.90278 0,-11.80556 0,-17.79514 0,-0.26042 0.08681,-0.34722 0.347222,-0.34722 1.649306,0 3.385417,0 5.034722,0 0.347223,0 0.347223,0.17361 0.347223,0.43402 0,2.95139 0,5.90278 0,8.85417 z' id='path6921' /%3E%3Cpath style='fill:%23fefefe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.260417' d='m 17.795138,260.65315 c 0,1.90972 -1.5625,3.38542 -3.385417,3.38542 -1.822916,0 -3.298611,-1.4757 -3.298611,-3.29862 0,-1.82291 1.475695,-3.38541 3.298611,-3.38541 1.822917,0 3.385417,1.5625 3.385417,3.29861 z' id='path6923' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
.icon-twitter {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='192' height='192' viewBox='0 0 192 192' version='1.1' id='svg1471' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1468'%3E%3Cpattern id='EMFhbasepattern' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-1' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-4' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-3' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-43' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3C/defs%3E%3Cg id='layer1'%3E%3Cg id='logo-youtube' transform='matrix(3.84,0,0,3.84,3.1853424e-7,-945.40809)'%3E%3Crect style='fill:%23777777;fill-opacity:1;stroke-width:0.521564' id='rect6800' width='42.81496' height='42.81496' x='3.5925198' y='249.79254' ry='13.38364' /%3E%3Cg id='g7023' transform='translate(-35.128776,8.0675434)'%3E%3Cpath style='fill:%23ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.260417' d='m 54.529818,275.45886 c 11.458335,0 17.708335,-9.4618 17.708335,-17.70833 0,-0.26042 0,-0.52084 0,-0.78125 1.215276,-0.86806 2.256942,-1.99653 3.038192,-3.21181 -1.128471,0.52083 -2.256942,0.78125 -3.559026,0.95486 1.302084,-0.78125 2.256943,-1.99653 2.777776,-3.38541 -1.215276,0.69444 -2.604166,1.21527 -3.993054,1.47569 -1.128472,-1.21528 -2.777779,-1.99653 -4.513888,-1.99653 -3.472224,0 -6.250001,2.77778 -6.250001,6.25 0,0.52084 0.0868,0.95486 0.173611,1.38889 -5.208334,-0.26042 -9.722222,-2.69097 -12.847222,-6.51042 -0.520834,0.95487 -0.868056,1.99653 -0.868056,3.125 0,2.17014 1.128472,4.07987 2.777778,5.20834 -0.954861,0 -1.909722,-0.26042 -2.777778,-0.78125 0,0 0,0.0868 0,0.0868 0,3.0382 2.170139,5.55556 4.947917,6.07639 -0.520834,0.17361 -1.041667,0.26042 -1.5625,0.26042 -0.434028,0 -0.868056,-0.0868 -1.215278,-0.0868 0.78125,2.43056 3.125,4.25347 5.815972,4.25347 -2.170139,1.73612 -4.774305,2.69098 -7.725694,2.69098 -0.520834,0 -1.041667,0 -1.475695,-0.0868 2.777778,1.73611 5.989584,2.77778 9.548611,2.77778 z' id='path7013' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
.icon-office {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='192' height='192' viewBox='0 0 192 192' version='1.1' id='svg1471' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1468'%3E%3Cpattern id='EMFhbasepattern' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-1' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-4' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-3' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-43' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-6' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-9' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3C/defs%3E%3Cg id='layer1'%3E%3Cg id='logo-youtube' transform='matrix(3.84,0,0,3.84,3.1853424e-7,-945.40809)'%3E%3Crect style='fill:%23777777;fill-opacity:1;stroke-width:0.521564' id='rect6800' width='42.81496' height='42.81496' x='3.5925198' y='249.79254' ry='13.38364' /%3E%3Cg id='g7190' transform='matrix(0.90357141,0,0,0.90357141,2.4107146,26.151434)'%3E%3Cpath style='fill:%23ffffff;fill-opacity:1;stroke-width:0.414019' d='m 39.80404,256.89242 v 28.91641 l -10.391834,3.16273 -18.725381,-6.82748 18.624979,2.3093 v -25.10105 l -12.500323,2.86152 v 16.9683 c 0,0 -6.325465,2.86153 -6.526274,2.86153 -0.200807,0 0,-21.4363 0,-21.4363 l 19.327809,-7.1789 z' id='path7183' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
.icon-tumblr {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='192' height='192' viewBox='0 0 192 192' version='1.1' id='svg1471' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1468'%3E%3Cpattern id='EMFhbasepattern' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-1' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-4' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-3' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-43' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-6' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-9' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3C/defs%3E%3Cg id='layer1'%3E%3Cg id='logo-youtube' transform='matrix(3.84,0,0,3.84,3.1853424e-7,-945.40809)'%3E%3Crect style='fill:%23777777;fill-opacity:1;stroke-width:0.521564' id='rect6800' width='42.81496' height='42.81496' x='3.5925198' y='249.79254' ry='13.38364' /%3E%3Cg id='g7096' transform='translate(-34.585517,3.1229934)'%3E%3Cpath style='fill:%23ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.260417' d='m 67.962253,282.87738 c -4.947917,0 -4.947917,0 -4.947917,0 -4.427083,0 -7.8125,-2.34375 -7.8125,-7.8125 0,-8.76736 0,-8.76736 0,-8.76736 -3.993055,0 -3.993055,0 -3.993055,0 0,-4.77431 0,-4.77431 0,-4.77431 4.427083,-1.12847 6.25,-4.94791 6.510416,-8.24653 4.600695,0 4.600695,0 4.600695,0 0,7.55209 0,7.55209 0,7.55209 5.381944,0 5.381944,0 5.381944,0 0,5.46875 0,5.46875 0,5.46875 -5.381944,0 -5.381944,0 -5.381944,0 0,7.63889 0,7.63889 0,7.63889 0,2.25694 1.128472,3.125 3.038194,3.125 2.604167,0 2.604167,0 2.604167,0 z' id='path7086' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
.icon-whatsapp {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='192' height='192' viewBox='0 0 192 192' version='1.1' id='svg1471' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1468'%3E%3Cpattern id='EMFhbasepattern' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-1' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-4' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-3' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-43' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3Cpattern id='EMFhbasepattern-6' patternUnits='userSpaceOnUse' width='6' height='6' x='0' y='0' /%3E%3C/defs%3E%3Cg id='layer1'%3E%3Cg id='logo-youtube' transform='matrix(3.84,0,0,3.84,3.1853424e-7,-945.40809)'%3E%3Crect style='fill:%23777777;fill-opacity:1;stroke-width:0.521564' id='rect6800' width='42.81496' height='42.81496' x='3.5925198' y='249.79254' ry='13.38364' /%3E%3Cg id='g7061'%3E%3Cpath style='fill:%23ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.260417' d='m 35.590276,260.52293 c -2.864583,-2.77777 -6.597221,-4.34027 -10.590277,-4.34027 -8.159722,0 -14.843749,6.68402 -14.843749,14.84375 0,2.60416 0.694444,5.20833 1.996527,7.46527 -2.083333,7.7257 -2.083333,7.7257 -2.083333,7.7257 7.8125,-2.08333 7.8125,-2.08333 7.8125,-2.08333 2.170139,1.12847 4.6875,1.82291 7.118055,1.82291 0,0 0,0 0,0 0,0 0,0 0,0 8.246527,0 14.930556,-6.68403 14.930556,-14.93055 0,-3.90625 -1.5625,-7.63889 -4.340279,-10.50348 z M 24.999999,283.4396 c 0,0 0,0 0,0 -2.170139,0 -4.340277,-0.60764 -6.25,-1.73611 -0.434027,-0.26042 -0.434027,-0.26042 -0.434027,-0.26042 -4.6875,1.21528 -4.6875,1.21528 -4.6875,1.21528 1.215277,-4.6007 1.215277,-4.6007 1.215277,-4.6007 -0.260416,-0.43402 -0.260416,-0.43402 -0.260416,-0.43402 -1.215278,-1.99653 -1.909723,-4.25347 -1.909723,-6.59722 0,-6.77084 5.555556,-12.32639 12.326389,-12.32639 3.298611,0 6.423611,1.30208 8.767361,3.64583 2.34375,2.34375 3.645833,5.38194 3.645833,8.68056 0,6.85764 -5.555555,12.41319 -12.413194,12.41319 z m 6.770835,-9.2882 c -0.347224,-0.17361 -2.170141,-1.04166 -2.517362,-1.21527 -0.347222,-0.0868 -0.607638,-0.17361 -0.78125,0.17361 -0.260417,0.43403 -0.954862,1.21528 -1.215279,1.47569 -0.173609,0.26042 -0.434027,0.26042 -0.781249,0.0868 -0.434028,-0.17361 -1.5625,-0.60764 -3.038195,-1.82292 -1.041666,-0.95486 -1.822916,-2.17014 -1.996527,-2.60416 -0.260417,-0.34723 -0.08681,-0.52084 0.0868,-0.69445 0.173611,-0.17361 0.434028,-0.43403 0.607639,-0.69444 0.173611,-0.17361 0.260417,-0.34723 0.347222,-0.60764 0.173611,-0.26042 0.08681,-0.43403 0,-0.69445 -0.0868,-0.17361 -0.868055,-1.99652 -1.128472,-2.69097 -0.347222,-0.78125 -0.607639,-0.69444 -0.868056,-0.69444 -0.260416,0 -0.434027,0 -0.694444,0 -0.260417,0 -0.694444,0.0868 -1.041667,0.52083 -0.347222,0.34722 -1.302083,1.21528 -1.302083,3.03819 0,1.82292 1.388889,3.64584 1.5625,3.81945 0.173611,0.26042 2.604167,4.07986 6.336806,5.64236 0.868055,0.34722 1.5625,0.60764 2.083333,0.78125 0.954862,0.26042 1.736112,0.26042 2.34375,0.17361 0.78125,-0.0868 2.256945,-0.95486 2.517362,-1.82291 0.347221,-0.86806 0.347221,-1.5625 0.260417,-1.73612 -0.08681,-0.17361 -0.347224,-0.26041 -0.78125,-0.43403 z' id='path7047' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
.range-keyframe-visibility .outbox-slider-bar,
.icon-flag-keyframe-visibility,
.box-slider .box-slider-bar .handle-slider-end.icon-flag-keyframe-visibility {
    background-color: #242c34;
    background-repeat: no-repeat;
    background-size: auto 110%;
    background-position: right center;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><svg width="192" height="192" viewBox="0 0 50 50" version="1.1" id="svg1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs1"><style type="text/css" id="style1"><![CDATA[ .flag-out-stroke {stroke:%23999999;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.9256} .flag-stick-stroke {stroke:%23B3B3B3;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.9256} .flag-out-fill {fill:none} .flag-darken-squares {fill:black} .flag-stick-fill {fill:%23CCCCCC} .flag-lighted-squares {fill:%23E6E6E6} ]]></style></defs><g id="layer1"><g id="Capa_x0020_1" transform="matrix(0.02871553,0,0,0.02871553,2.8844485,2.1342553)" style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"><metadata id="CorelCorpID_0Corel-Layer" /><path class="flag-darken-squares" d="m 100.43833,245.65698 c 121.16278,-46.36464 242.32556,-72.45875 363.63767,-78.76763 0,60.35119 0,120.67748 0,180.89179 0,60.10231 0,120.44105 0,180.54337 -121.31211,8.16296 -242.47489,35.11568 -363.63767,81.10701 0,-60.58761 0,-121.17522 0,-181.77528 0,-60.58761 0,-121.28721 0,-181.99926 z m 0,727.42465 c 121.16278,-45.63048 242.32556,-73.57867 363.63767,-83.45885 0,60.33874 0,120.55302 0,180.77982 0,60.0774 0,120.4286 0,180.5185 -121.31211,11.6347 -242.47489,40.5659 -363.63767,85.6986 0,-60.4631 0,-121.1876 0,-181.6632 0,-60.5752 0,-121.2748 0,-181.87487 z m 727.15089,-0.112 c 121.16278,42.64407 242.32558,61.57067 363.63768,60.96097 0,61.0729 0,122.1582 0,183.0071 0,60.9485 0,122.0214 0,182.8579 -121.3121,1.991 -242.4749,-17.309 -363.63768,-63.3003 0,-60.4632 0,-121.1877 0,-181.6384 0,-60.5876 0,-121.1752 0,-181.88727 z m 0,-727.31265 c 121.16278,35.97428 242.32558,54.27874 363.63768,56.36925 0,61.0978 0,122.29514 0,183.14407 0,60.94847 0,122.04627 0,182.87031 -121.3121,-0.74661 -242.4749,-19.28749 -363.63768,-58.60909 0,-60.58761 0,-121.17522 0,-181.77528 0,-60.58761 0,-121.28721 0,-181.99926 z m 363.63768,422.38363 c 60.5129,-4.81565 121.4614,-12.28178 181.825,-23.50585 60.6499,-11.27385 121.337,-24.47645 181.9869,-35.10324 0,60.71205 0,121.3121 0,181.88727 0,60.60006 0,121.17522 0,181.76284 -60.6499,10.76366 -121.3619,23.61784 -181.9869,35.24007 -60.3885,11.6099 -121.3121,19.9097 -181.825,25.6089 0,-60.84897 0,-121.93433 0,-182.8828 0,-60.83648 0,-121.93428 0,-183.00719 z M 464.076,528.32451 c 121.17522,10.50235 242.338,37.70393 363.6501,81.10701 0,60.71205 0,121.3121 0,181.88727 0,60.60006 0,121.17522 0,181.76284 C 706.414,926.09481 585.25122,898.64435 464.076,889.62278 c 0,-60.07742 0,-120.42861 0,-180.53092 0,-60.22675 0,-120.44106 0,-180.76735 z" id="flag-black-squares" style="stroke-width:1.24435" /><path class="flag-lighted-squares" d="m 100.43833,609.43152 c 121.16278,-45.99133 242.32556,-72.94405 363.63767,-81.10701 0,60.32629 0,120.5406 0,180.76735 0,60.10231 0,120.4535 0,180.53092 -121.31211,9.88018 -242.47489,37.82837 -363.63767,83.45885 0,-60.58762 0,-121.16278 0,-181.76284 0,-60.57517 0,-121.17522 0,-181.88727 z M 464.076,889.62278 c 121.17522,9.02157 242.338,36.47203 363.6501,83.45885 0,60.60007 0,121.29967 0,181.87487 0,60.4756 0,121.2001 0,181.6632 -121.3121,-50.4585 -242.47488,-78.1454 -363.6501,-85.6986 0,-60.0899 0,-120.4411 0,-180.5185 0,-60.2268 0,-120.44108 0,-180.77982 z m 0,-722.73343 c 121.17522,11.87114 242.338,38.94829 363.6501,78.76763 0,60.71205 0,121.41165 0,181.99926 0,60.60006 0,121.18767 0,181.77528 C 706.414,566.02844 585.25122,538.82686 464.076,528.32451 c 0,-60.10232 0,-120.44106 0,-180.54337 0,-60.21431 0,-120.5406 0,-180.89179 z m 727.1509,867.04125 c 60.5129,-5.6992 121.4365,-13.999 181.825,-25.6089 60.625,-11.62223 121.337,-24.47641 181.9869,-35.24007 0,60.60007 0,121.29967 0,181.87487 0,60.4756 0,121.2001 0,181.6632 -60.6499,10.8757 -121.3868,23.481 -181.9869,35.489 -60.4009,11.9707 -121.3121,21.1416 -181.825,27.6869 0,-60.8365 0,-121.9094 0,-182.8579 0,-60.8489 0,-121.9342 0,-183.0071 z m 0,-731.90437 c 60.5129,-3.9446 121.4739,-10.63923 181.825,-21.50244 60.6748,-10.91299 121.337,-24.35201 181.9869,-34.86681 0,60.71205 0,121.41165 0,181.99926 0,60.60006 0,121.18767 0,181.77528 -60.6499,10.62679 -121.337,23.82939 -181.9869,35.10324 -60.3636,11.22407 -121.3121,18.6902 -181.825,23.50585 0,-60.82404 0,-121.92184 0,-182.87031 0,-60.84893 0,-122.04627 0,-183.14407 z M 827.58922,609.43152 c 121.16278,39.3216 242.32558,57.86248 363.63768,58.60909 0,61.07291 0,122.17071 0,183.00719 0,60.94847 0,122.03383 0,182.8828 -121.3121,0.6097 -242.4749,-18.3169 -363.63768,-60.96097 0,-60.47562 0,-121.18766 0,-181.77527 0,-60.45074 0,-121.16278 0,-181.76284 z" id="flag-grey-squares" style="stroke-width:1.24435" /><path class="flag-stick-fill flag-stick-stroke" d="m 41.978568,194.77533 h 0.01244 c 32.141672,0 58.447322,25.21062 58.447322,56.02083 V 1425.1929 c 0,30.8226 -26.30565,56.0333 -58.447322,56.0333 h -0.01244 c -32.154115,0 -58.447322,-25.2107 -58.447322,-56.0333 V 250.79616 c 0,-30.81021 26.293207,-56.02083 58.447322,-56.02083 z" id="flag-stick" /><path class="flag-out-fill flag-out-stroke" d="m 100.43833,245.64454 c 242.32556,-103.72938 481.01761,-89.10821 727.13845,0 238.94092,86.51995 484.97462,58.70863 727.46202,0 0,181.87482 0,363.89897 0,545.64936 0,181.76284 0,363.6501 0,545.2761 -244.7397,74.9474 -489.865,86.4577 -727.46202,-0.1369 -247.88783,-90.3277 -484.81289,-114.9784 -727.13845,0.1369 0,-181.626 0,-363.51326 0,-545.2761 0,-181.75039 0,-363.77454 0,-545.64936 z" id="flag-border" /></g></g></svg>');

}
.box-slider .box-slider-bar .handle-slider-end.icon-flag-keyframe-visibility,
.handle-slider-end.icon-flag-keyframe-visibility,
.handle-slider-end .icon-flag-keyframe-visibility {
    background-position: center center;
}
.handle-slider-end .icon-flag-keyframe-visibility {
    height: 100%;
}

.range-keyframe-visibility .box-range-result div {
    display: none;
}

.box-slider .box-slider-bar .handle-slider-end.icon-flag-keyframe-visibility,
.handle-slider-end .icon-flag-keyframe-visibility {
    border-color: #86bf00;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><svg width="192" height="192" viewBox="0 0 50 50" version="1.1" id="svg1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs1"><style type="text/css" id="style1"><![CDATA[ .flag-out-stroke {stroke:%23999999;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.9256} .flag-stick-stroke {stroke:%23B3B3B3;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.9256} .flag-out-fill {fill:none} .flag-darken-squares {fill:black} .flag-stick-fill {fill:%235cdeff} .flag-lighted-squares {fill:%235cdeff} ]]></style></defs><g id="layer1"><g id="Capa_x0020_1" transform="matrix(0.02871553,0,0,0.02871553,2.8844485,2.1342553)" style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"><metadata id="CorelCorpID_0Corel-Layer" /><path class="flag-darken-squares" d="m 100.43833,245.65698 c 121.16278,-46.36464 242.32556,-72.45875 363.63767,-78.76763 0,60.35119 0,120.67748 0,180.89179 0,60.10231 0,120.44105 0,180.54337 -121.31211,8.16296 -242.47489,35.11568 -363.63767,81.10701 0,-60.58761 0,-121.17522 0,-181.77528 0,-60.58761 0,-121.28721 0,-181.99926 z m 0,727.42465 c 121.16278,-45.63048 242.32556,-73.57867 363.63767,-83.45885 0,60.33874 0,120.55302 0,180.77982 0,60.0774 0,120.4286 0,180.5185 -121.31211,11.6347 -242.47489,40.5659 -363.63767,85.6986 0,-60.4631 0,-121.1876 0,-181.6632 0,-60.5752 0,-121.2748 0,-181.87487 z m 727.15089,-0.112 c 121.16278,42.64407 242.32558,61.57067 363.63768,60.96097 0,61.0729 0,122.1582 0,183.0071 0,60.9485 0,122.0214 0,182.8579 -121.3121,1.991 -242.4749,-17.309 -363.63768,-63.3003 0,-60.4632 0,-121.1877 0,-181.6384 0,-60.5876 0,-121.1752 0,-181.88727 z m 0,-727.31265 c 121.16278,35.97428 242.32558,54.27874 363.63768,56.36925 0,61.0978 0,122.29514 0,183.14407 0,60.94847 0,122.04627 0,182.87031 -121.3121,-0.74661 -242.4749,-19.28749 -363.63768,-58.60909 0,-60.58761 0,-121.17522 0,-181.77528 0,-60.58761 0,-121.28721 0,-181.99926 z m 363.63768,422.38363 c 60.5129,-4.81565 121.4614,-12.28178 181.825,-23.50585 60.6499,-11.27385 121.337,-24.47645 181.9869,-35.10324 0,60.71205 0,121.3121 0,181.88727 0,60.60006 0,121.17522 0,181.76284 -60.6499,10.76366 -121.3619,23.61784 -181.9869,35.24007 -60.3885,11.6099 -121.3121,19.9097 -181.825,25.6089 0,-60.84897 0,-121.93433 0,-182.8828 0,-60.83648 0,-121.93428 0,-183.00719 z M 464.076,528.32451 c 121.17522,10.50235 242.338,37.70393 363.6501,81.10701 0,60.71205 0,121.3121 0,181.88727 0,60.60006 0,121.17522 0,181.76284 C 706.414,926.09481 585.25122,898.64435 464.076,889.62278 c 0,-60.07742 0,-120.42861 0,-180.53092 0,-60.22675 0,-120.44106 0,-180.76735 z" id="flag-black-squares" style="stroke-width:1.24435" /><path class="flag-lighted-squares" d="m 100.43833,609.43152 c 121.16278,-45.99133 242.32556,-72.94405 363.63767,-81.10701 0,60.32629 0,120.5406 0,180.76735 0,60.10231 0,120.4535 0,180.53092 -121.31211,9.88018 -242.47489,37.82837 -363.63767,83.45885 0,-60.58762 0,-121.16278 0,-181.76284 0,-60.57517 0,-121.17522 0,-181.88727 z M 464.076,889.62278 c 121.17522,9.02157 242.338,36.47203 363.6501,83.45885 0,60.60007 0,121.29967 0,181.87487 0,60.4756 0,121.2001 0,181.6632 -121.3121,-50.4585 -242.47488,-78.1454 -363.6501,-85.6986 0,-60.0899 0,-120.4411 0,-180.5185 0,-60.2268 0,-120.44108 0,-180.77982 z m 0,-722.73343 c 121.17522,11.87114 242.338,38.94829 363.6501,78.76763 0,60.71205 0,121.41165 0,181.99926 0,60.60006 0,121.18767 0,181.77528 C 706.414,566.02844 585.25122,538.82686 464.076,528.32451 c 0,-60.10232 0,-120.44106 0,-180.54337 0,-60.21431 0,-120.5406 0,-180.89179 z m 727.1509,867.04125 c 60.5129,-5.6992 121.4365,-13.999 181.825,-25.6089 60.625,-11.62223 121.337,-24.47641 181.9869,-35.24007 0,60.60007 0,121.29967 0,181.87487 0,60.4756 0,121.2001 0,181.6632 -60.6499,10.8757 -121.3868,23.481 -181.9869,35.489 -60.4009,11.9707 -121.3121,21.1416 -181.825,27.6869 0,-60.8365 0,-121.9094 0,-182.8579 0,-60.8489 0,-121.9342 0,-183.0071 z m 0,-731.90437 c 60.5129,-3.9446 121.4739,-10.63923 181.825,-21.50244 60.6748,-10.91299 121.337,-24.35201 181.9869,-34.86681 0,60.71205 0,121.41165 0,181.99926 0,60.60006 0,121.18767 0,181.77528 -60.6499,10.62679 -121.337,23.82939 -181.9869,35.10324 -60.3636,11.22407 -121.3121,18.6902 -181.825,23.50585 0,-60.82404 0,-121.92184 0,-182.87031 0,-60.84893 0,-122.04627 0,-183.14407 z M 827.58922,609.43152 c 121.16278,39.3216 242.32558,57.86248 363.63768,58.60909 0,61.07291 0,122.17071 0,183.00719 0,60.94847 0,122.03383 0,182.8828 -121.3121,0.6097 -242.4749,-18.3169 -363.63768,-60.96097 0,-60.47562 0,-121.18766 0,-181.77527 0,-60.45074 0,-121.16278 0,-181.76284 z" id="flag-grey-squares" style="stroke-width:1.24435" /><path class="flag-stick-fill flag-stick-stroke" d="m 41.978568,194.77533 h 0.01244 c 32.141672,0 58.447322,25.21062 58.447322,56.02083 V 1425.1929 c 0,30.8226 -26.30565,56.0333 -58.447322,56.0333 h -0.01244 c -32.154115,0 -58.447322,-25.2107 -58.447322,-56.0333 V 250.79616 c 0,-30.81021 26.293207,-56.02083 58.447322,-56.02083 z" id="flag-stick" /><path class="flag-out-fill flag-out-stroke" d="m 100.43833,245.64454 c 242.32556,-103.72938 481.01761,-89.10821 727.13845,0 238.94092,86.51995 484.97462,58.70863 727.46202,0 0,181.87482 0,363.89897 0,545.64936 0,181.76284 0,363.6501 0,545.2761 -244.7397,74.9474 -489.865,86.4577 -727.46202,-0.1369 -247.88783,-90.3277 -484.81289,-114.9784 -727.13845,0.1369 0,-181.626 0,-363.51326 0,-545.2761 0,-181.75039 0,-363.77454 0,-545.64936 z" id="flag-border" /></g></g></svg>');
} 

.printing .content-to-print, 
.printing .box-to-print {
	display: none;
	width: 100%;
	height: auto;
}
.printing .content-to-print {
	height: 100%;
}


.printing .box-img-print {
	display: none;	
}


@media print {
	html,body {background: transparent;height:auto;width:auto;margin:0;padding:0;}
	body.printing {
		height:100%;
		overflow-x: hidden;
		overflow-y: auto;
		position: relative;
	}
	.printing .break-before {
		break-before: page;		
	}
	.printing .break-after {
		break-after: page;
	}	
	.printing .page-break-before {
		page-break-before: always;	
	}
	.printing .page-break-after {
		page-break-after:always;	
	}


	.printing .zero-height-margins {
		height: 0;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
	}


	/*
	THIS COMENTED BLOCK IS ADDED DINAMICALY TO THE TEMPLATE, ONLY WHE PRINT SINGLE DRILLS

	@page {
		size: auto;   
		size: landscape;
		max-height:100%;
		max-width:100%;		
        margin: 0mm;  
		}
		*/
				
	.printing .cover-block-box,
	.printing .customConfirmBox,
	.printing .wrapper,
	.printing .mainApp {
		display: none;	
	}

	.printing .box-img-print {
		display: block;	
		width: 260mm;
		height: 170mm;
		margin: 0 auto 0 auto;	
		break-inside: avoid;
		/*overflow: hidden;
		 border: solid 1px #000;
		background: #ABCDEF; */
	}
	.printing .box-wrapper-img {
		width: 244mm;
		height: calc( 244mm / 1.77777);
		display: block;
		margin: 0 auto 0 auto;
		/*overflow: hidden;
		 background: rgb(255, 0, 0); */
	}
	.printing img.img-print {
		width: 244mm;
		height: auto;
		display: block;
		/* margin-top: -2mm;
		margin-left: -2mm; */
	}
	.printing .print-title-session,
	.printing .print-title-drill,
	.printing .box-img-print h3,
	.printing .box-img-print h4 {
		text-align: center;
		font-weight: bold;
		display: inline-block;
		width: 100%;
	}
	.printing .print-title-session,
	.printing .box-img-print h3 {
		font-size: 2em;
		margin-bottom: 0;
		margin-top: 1em;
		/* background: rgb(207, 193, 0);	 */
	}
	.printing .print-title-drill,
	.printing .box-img-print h4 {
		font-size: 1.75em;
		margin-top: .5em;
		margin-bottom: 1em;
		/* background: rgb(241, 164, 255);	 */
	}

	html.printing,body.printing {background: transparent;height:auto;width:auto;margin:0;padding:0;}

	
	@page :footer {color: #fff; display: none; }
    @page :header {color: #fff; display: none;}
}.color-button
{
	width:2.5em;
	height:2.5em;
	border:none;
	padding:0
}

.color-selector-content
{
	height:100%
}

.customizer-box
{
	height:100%;
	overflow-x:hidden;
	overflow-y:auto
}

.color-row
{
	display:-webkit-flex
}

.color-column
{
	display:-webkit-flex
}

.color-list canvas,canvas.color-canvas
{
	width:100%;
	height:100%;
	cursor:pointer
}

.reference-point
{
	position:absolute;
	z-index:99999999;
	top:0;
	left:0;
	width:.5em;
	height:.5em;
	border:#000 solid 1px
}

.style-usedby-box h5
{
	background:#999;
	color:#333;
	padding:.25em;
	font-size:1em;
	margin-bottom:.5em
}

.color-list
{
	width:400px;
	height:300px
}

.color-settings-box
{
	width:30em;
	display:inline-block;
	vertical-align:top;
	border:#aaa 1px solid;
	border-radius:.25em;
	margin:.5em;
	padding:.5em
}

.color-picker-area
{
	width:0;
	display:inline-block;
	vertical-align:top;
	overflow:hidden;
	transition:width .25s ease
}

.color-picker-area.showing
{
	width:35em
}

.color-picker-area .color-live-picker
{
	width:100%
}

.box-floating-control .color-live-picker
{
	width:calc(100% - .5em);
	height:calc(100% - 10.5em)
}

.box-floating-control.floating-box-horizontal-minimal .color-live-picker
{
	width:calc(100% - 1em);
	height:calc(100% - 6.5em)
}

.box-floating-control.floating-box-adaptable .color-live-picker
{
	width: 15em;
	height: auto;
	margin-top: .7em;
	margin-left: .7em;
}


.box-floating-control.floating-box-adaptable .color-live-picker .color-list
{
	width: 15em;
	height: 12em;
}



.box-floating-control.floating-box-adaptable .color-live-picker .box-sub-controls
{
	height: auto;
	width: calc( 100% - 0.15em);
}


.maximized .color-picker-area.showing
{
	width:400px
}

.minimized .color-picker-area.showing
{
	width:20em
}

.saturation-slider-box
{
	margin-top:1em
}

.color-picker-area .box-controls
{
	margin:.5em
}

.colors-number
{
	padding-left:.5em
}

.color-control-box
{
	padding:.5em;
	display:inline-block;
	vertical-align:middle
}

.color-control-box label
{
	padding-right:.5em;
	vertical-align:middle
}

.color-control-box input
{
	width:6em;
	vertical-align:middle;
	height:1.7em;
	padding-left:.25em
}

.color-control-box input.form-field-number-short
{
	width:4em
}

.color-control-box input.Selection,input.Selection,.color-settings-box input.Selection
{
	width:6em
}

.color-show-box
{
	width:3em;
	height:3em;
	margin-right:1em;
	display:inline-block;
	vertical-align:middle;
	box-shadow:2px 2px 10px rgba(0,0,0,.35)
}

.box-saturation
{
	width:20em
}
.box-saturation:focus
{
	outline: none;
}
.box-color-picker
{
	margin-top:3em;
	width:100%;
	height:30em
}

.box-color-picker .color-live-picker,.box-color-picker .color-list
{
	width:100%;
	height:100%
}

.box-icon {
    background: none;
    border: none;
    width: 1.85em;
    height: 1.85em;
    display: inline-block;
    vertical-align: middle;
}

.color-control-box .box-icon {
    background: none;
    border: none;
    width: 2.5em;
    height: 2.5em;
    margin-right: 0;
}




/* SSPSLIDER CLASSES */


.box-slider.horizontal-slider {
    width: 100%;
    height: auto;
}

.box-slider.vertical-slider {
    width: auto;
    height: 100%;
}

.box-slider.horizontal-slider .slider-box-view {
    width: 100%;
    height: auto;
}

.box-slider.vertical-slider .slider-box-view {
    width: auto;
    height: 100%;
}

.box-slider .slider-box-icon {
    width: 3em;
    height: 2em;
    display: inline-block;
    vertical-align: top;
    margin-right: .25em;
}

.box-slider.horizontal-slider.with-icon-ini .slider-box-content {
    width: calc(100% - 5em);
    display: inline-block;
}

.box-slider.horizontal-slider.with-icon-ini.with-label-end .slider-box-content {
    width: calc(100% - 6.75em);
    display: inline-block;
}



.box-slider.vertical-slider .slider-box-content {
    height: calc(100% - 3em);
    display: inline-block;
}

.box-slider .box-slider-scale {
    border-radius: .25em;
    opacity: 0;
    transition: opacity .25s ease;
    box-sizing: border-box;
}

.box-slider.vertical-slider .box-slider-scale {
    width: 3em;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.box-floating-control .box-slider .box-slider-scale,
.box-slider:hover .box-slider-scale,
.box-slider.focused .box-slider-scale {
    opacity: 1;
}

.box-slider-scale-into {
    width: 100%;
    height: 100%;
    white-space: nowrap;
}

.box-slider .box-slider-scale .slider-scale-text {
    display: inline-block;
    font-size: .85em;
    border-left: 1px dotted rgba(0, 0, 0, .25);
    padding-top: .75em;
    padding-bottom: 0;
    padding-left: .175em;
    color: rgba(0, 0, 0, .6);
    width: 0;
    box-sizing: border-box;
}

.box-slider .box-slider-scale .slider-scale-text.mini-mark {
    border-left: 1px solid rgba(0, 0, 0, .15);
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    min-height: .75em;
    vertical-align: top;
}

.box-slider.vertical-slider .box-slider-scale .slider-scale-text.mini-mark {
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, .15);
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    min-width: .75em;
    display: block;
}

.box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label {
    padding: 0;
    margin: 0;
    margin-top: .85em;
    margin-left: .125em;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    background: none;
    color: rgba(0, 0, 0, .6);
}

.box-slider.vertical-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label {
    padding: 0;
    margin: 0;
    margin-top: .125em;
    margin-left: .85em;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    background: none;
    color: rgba(0, 0, 0, .6);
}

.box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label:hover {
    color: #000;
}

.box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label:active {
    color: rgba(0, 89, 131, .705);
}

.box-slider .box-slider-scale .slider-scale-text.slider-scale-mark {
    border-left: 1px solid #003c8a;
    padding-top: 0;
    padding-left: 0;
    height: 1.25em;
    position: absolute;
}

.box-slider:hover .box-slider-scale .slider-scale-text.slider-scale-mark,
.box-slider.focused .box-slider-scale .slider-scale-text.slider-scale-mark {
    border-left: 1px solid #003c8a;
}

.box-slider.vertical-slider .slider-scale-text.slider-scale-mark {
    border-top: 1px solid #003c8a;
    border-left: none;
    width: 1.25em;
}



.dark-bg .box-slider .box-slider-scale .slider-scale-text {
   border-left: 1px dotted rgba(255,255,255, .25);
   color: rgba(255,255,255, .8);
}

.dark-bg .box-slider .box-slider-scale .slider-scale-text.mini-mark {
    border-left: 1px solid rgba(255,255,255, .25);
}

.dark-bg .box-slider.vertical-slider .box-slider-scale .slider-scale-text.mini-mark {
    border-top: 1px solid rgba(255,255,255, .25);
}

.dark-bg .box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label {
    color: rgba(255,255,255, .7);
}

.dark-bg .box-slider.vertical-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label {
    color: rgba(255,255,255, .7);
}

.dark-bg .box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label:hover {
    color: #FFF;
}

.dark-bg .box-slider .box-slider-scale .slider-scale-text.mini-mark .slider-scale-label:active {
    color: rgba(0, 136, 200, 0.705);
}

.dark-bg .box-slider .box-slider-scale .slider-scale-text.slider-scale-mark {
    border-left: 1px solid #00d3fe;
}


.dark-bg .box-slider.vertical-slider .box-slider-scale .slider-scale-text.slider-scale-mark {
    border-left: none;
}

.dark-bg .box-slider:hover .box-slider-scale .slider-scale-text.slider-scale-mark,
.dark-bg .box-slider.focused .box-slider-scale .slider-scale-text.slider-scale-mark {
    border-left: 1px solid #00d3fe;
}

.dark-bg .box-slider.vertical-slider .slider-scale-text.slider-scale-mark {
    border-top: 1px solid #00d3fe;
}

.box-floating-control.dark-bg .box-slider.vertical-slider .box-slider-scale .slider-scale-text.slider-scale-mark {
    border-left: none;
    border-top: 1px solid #FFF;
}

.box-floating-control.dark-bg .box-slider.vertical-slider .box-slider-scale .slider-scale-text {
    border-left: none;
}



.box-slider.horizontal-slider.transitionable .slider-scale-text.slider-scale-mark {
    transition: margin-left .125s ease-out;
}

.box-slider.vertical-slider.transitionable .slider-scale-text.slider-scale-mark {
    transition: margin-top .125s ease-out;
}

.box-slider.vertical-slider .slider-box-label {
    width: 3em;
    height: auto;
    display: inline-block;
}

.box-slider .slider-box-label span {
    display: inline-block;
    padding-top: .2em;
}

.box-slider.horizontal-slider .box-range-result.filled {
    background: rgba(146, 122, 253, .4);
    height: 100%;
    text-align: center;
    overflow: hidden;
}

.box-slider.horizontal-slider .box-range-result .slider-box-label {
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    justify-content: center;
    align-items: center;
}

.box-slider.horizontal-slider .box-handler-end,
.box-slider.horizontal-slider .box-range-result,
.box-slider.horizontal-slider .handle-slider-end,
.box-slider.horizontal-slider .handle-slider-bar {
    display: inline-block;
    vertical-align: middle;
}


.box-slider.vertical-slider.transitionable .handle-slider-end,
.box-slider.vertical-slider.transitionable .handle-slider-bar {
    transition: margin-top .125s ease-out;
}


.box-slider.vertical-slider .outbox-slider-bar {
    width: 3em;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}


#box-anim-control-object .box-slider .slider-box-label span {
    padding-top: 0;
    margin-top: -.1em;
}

#box-anim-control-object .box-slider .slider-box-label span:first-child {
    padding-top: .0em;
}

/* Dialog boxes styles */


.cover-box.dialog-floating {
    top: 8em;
    left: auto;
    right: 5em;
    width: 70em;
    height: 50em;
    bottom: auto;
}

.cover-box.dialog-floating.maximized {
    top: 3.75em;
    left: 0;
    width: 100%;
    height: calc(100% - 3.75em);
    bottom: auto;
}

.cover-box.dialog-floating.minimized {
    top: auto;
    left: 0;
    bottom: 0;
    width: 33em;
    height: 18em;
}

.cover-box.resizable {
    resize: both;
    overflow: hidden;
}

.cover-box.dialog-floating .screen.dialog {
    width: 100%;
    height: 100%;
    min-width: auto;
    max-width: auto;
    min-height: auto;
    max-height: auto;
}


.cover-box h3 {
    font-size: 2em;
    color: #FFF;
    margin: 1em;
    text-align: center;
    height: 2em;
}



.cover-box .box-message {
    height: 100%;
    width: 100%;
}

.cover-box .box-message .box-content {
    height: calc(100% - 4em);
    width: 100%;
}



.cover-box .box-controls {
    text-align: center;
}

.box-sub-controls {
    height: 5em;
}

.box-controls button,
.box-floating-control .box-controls button,
.cover-box .box-controls button,
.box-controls button:disabled:active,
.box-floating-control .box-controls button:disabled:active,
.cover-box .box-controls button:disabled:active {
    font-size: 1.1em;
    height: 2.75em;
    font-weight: 700;
    color: #001d29;
    margin-right: 1em;
    padding: 0.5em;
    padding-top: 0;
    padding-bottom: 0.25em;
    text-align: center;
    border: #000 solid .15em;
    background-color: #fff;
    border-radius: 4px;
}

.cover-box .box-controls button.delete {
    font-size: 1.25em;
    color: #700;
    border: #ff6767 solid .2em;
}

.cover-box .box-controls button:hover {
    background-color: #68dcff;
}




	/* The switch - the box around the slider */
	.switch {
		position: relative;
		display: inline-block;
		width: 50px;
		height:24px;
		/* margin-left: 150px; */
		vertical-align: middle;
	}
	
	  /* Hide default HTML checkbox */
	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}
	
	/* The slider */
	.switch .slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ccc;
		-webkit-transition: .2s;
		transition: .2s;
        box-shadow: inset 1px 1px 6px rgba(0,0,0,.5);        
		border: solid 1px rgba(255,255,255,.5);
	}
	
	.switch .slider:before {
		position: absolute;
		content: "";
		height: 20px;
		width: 20px;
		left: 2px;
		bottom: 1px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
		box-shadow: 1px 1px 6px rgba(0, 0, 0, .5);
	}
	
	.switch input:checked + .slider {
		background-color: #87b100;
        box-shadow: inset 1px 1px 6px rgba(0,0,0,.5);
	}
	
	.switch input:focus + .slider {
		box-shadow: 0 0 1px #87b100;
        box-shadow: inset 1px 1px 6px rgba(0,0,0,.5);
	}
	
	.switch input:checked + .slider:before {
		-webkit-transform: translateX(26px);
		-ms-transform: translateX(26px);
		transform: translateX(26px);
	}
	
	  /* Rounded sliders */
	.switch .slider.round {
		border-radius: 24px;
	}
	
	.switch .slider.round:before {
		border-radius: 50%;
	}