/*
* GLOBAL CSS
* ATOM EXTENSION https://persiangfx.com/
* CHANGED: 30.11.19
*/


/* montserrat-regular - latin */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v14-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url('../fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg');
    /* Legacy iOS */
}


/* montserrat-600 - latin */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/montserrat-v14-latin-600.eot');
    /* IE9 Compat Modes */
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url('../fonts/montserrat-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/montserrat-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/montserrat-v14-latin-600.woff') format('woff'), /* Modern Browsers */
    url('../fonts/montserrat-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/montserrat-v14-latin-600.svg#Montserrat') format('svg');
    /* Legacy iOS */
}


/* montserrat-800 - latin */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/montserrat-v14-latin-800.eot');
    /* IE9 Compat Modes */
    src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url('../fonts/montserrat-v14-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/montserrat-v14-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/montserrat-v14-latin-800.woff') format('woff'), /* Modern Browsers */
    url('../fonts/montserrat-v14-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/montserrat-v14-latin-800.svg#Montserrat') format('svg');
    /* Legacy iOS */
}


/* GLOBALLY */

* {
    font-family: 'Montserrat', Tahoma;
    font-weight: 400;
    font-size: 11px;
    padding: 0;
    margin: 0;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

h1 {
    font-size: 19px;
    text-align: center;
}

h2 {
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    line-height: 32px;
    color: #FFDF36;
}

.blurredMode {
    filter: blur(5px)!important;
    -webkit-filter: blur(5px)!important;
}

.blurredMode_packManager {
    filter: blur(12px)!important;
    -webkit-filter: blur(12px)!important;
}

.blurredMode_activationService {
    filter: blur(12px) grayscale(100%)!important;
    -webkit-filter: blur(12px) grayscale(100%)!important;
}

.blurredMode_confirmPopup {
    filter: blur(12px)!important;
    -webkit-filter: blur(12px)!important;
}

#wrapper {
    height: 100%;
}

.splitBothResizer {
    z-index: 2;
    float: left;
    position: relative;
    left: 0;
    cursor: col-resize;
    width: 8px;
    background-color: #333333;
    background-image: url("../img/special/split_resizer.svg");
    background-size: 4px 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.23);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.23);
    /* prevent browser's built-in drag from interfering */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Menu and Items inside (right and left)  */

#container {
    /* width:100%; */
    height: 100%;
    /* display: inline-flex; */
}


/* Main Content with blocks*/

#content {
    height: 100%;
    /* float:right; */
    /* display:block; */
    /* border:1px solid brown; */
}


/* Content Block to show */

#content .coBlock {
    /*     height:300px;
    position:absolute; */
    display: none;
    /* border:1px solid blue; */
}

#content .coBlock strong {
    display: block;
    font-weight: 600;
    color: #ddd;
    font-size: 12px;
    /* text-align: center; */
    cursor: default;
    margin: 12px;
}

#content .coBlock strong:before {
    content: '\00BB';
    opacity: 0.5;
    padding: 5px;
    user-select: none;
}

#content .coBlock.current {
    display: block;
}


/* SPECIAL CLASSES */

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}

.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

[draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: element;
    -webkit-user-drag: element;
}


/* temp for test */

.hostBorder div.image {
    display: block;
    width: 100%;
    height: 50px;
    padding: 10px;
    margin: 10px;
}

ul.changeHeader li {
    padding: 5px;
    background: white;
    color: black;
    margin: 5px;
    cursor: pointer;
}


/* FLOATS */

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.b1 {
    border: 1px solid red;
}

.b2 {
    border: 2px solid green;
}

.b3 {
    border: 1px solid blue;
}


/* Keyframe Animations */


/* Spin for Logo */

@keyframes spin_revert {
    100% {
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes spin_revert {
    100% {
        transform: rotate(-360deg);
    }
}

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

@-webkit-keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}


/* Shake for Notify Icon */

@-webkit-keyframes shake {
    10%,
    90% {
        transform: translate3d(0, 0, 0);
    }
    20%,
    80% {
        transform: translate3d(0, 0, 0);
    }
    30%,
    50%,
    70% {
        transform: translate3d(0, -2px, 0);
    }
    40%,
    60% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(0, 0, 0);
    }
    20%,
    80% {
        transform: translate3d(0, 0, 0);
    }
    30%,
    50%,
    70% {
        transform: translate3d(0, -2px, 0);
    }
    40%,
    60% {
        transform: translate3d(0, 0, 0);
    }
}


/* Drag And Drop Rolling */

@-webkit-keyframes dnd_roll {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }
    50% {
        opacity: 0.4;
        transform: translateY(-10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes dnd_roll {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }
    50% {
        opacity: 0.4;
        transform: translateY(-10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


/* Opacity Blinks */

@-webkit-keyframes opacity_blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}

@keyframes opacity_blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}


/* Market Callouts Rolls */


/* Drag And Drop Rolling */

@-webkit-keyframes market_callouts_roll {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(-3%);
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes market_callouts_roll {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(-3%);
    }
    100% {
        transform: translateX(0px);
    }
}


/* SCROLLBAR */

[scrollbar] {
    overflow-y: auto;
    overflow-x: auto;
    /* height: 100%; */
}

[scrollbar-type='x'] {
    overflow-y: hidden;
    overflow-x: auto;
}

[scrollbar-type='y'] {
    overflow-y: auto;
    overflow-x: hidden;
}

[scrollbar]::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

[scrollbar]::-webkit-scrollbar-track {
    background: #111;
    border-radius: 10px;
}

[scrollbar]::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #4D4D4D;
}

[scrollbar]::-webkit-scrollbar-thumb:hover {
    background: #6E6E6E;
}


/* INPUTS COLLECTION */


/* TEXT INPUT */

input[type="text"].search {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 2px solid rgb(58, 58, 58);
    box-shadow: 4px 4px 14px rgb(56, 56, 56);
    padding: 5px;
    margin: 5px;
    outline: none;
    border-radius: 15px;
    background: url('../img/icons/tools/search_white.svg') no-repeat 7px 6px #777;
    background-size: 13px 13px;
    padding-left: 23px;
    color: white;
    /* transition: 0.2s ease width, background-color, color; */
    transition: width 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    width: 125px;
    font-size: 11px;
}

input[type="text"].search::placeholder {
    color: rgb(216, 216, 216);
}

input[type="text"].search:focus::placeholder {
    color: rgb(117, 117, 117);
}

input[type="text"].search:focus {
    border: 2px solid rgb(192, 192, 192);
    color: black;
    width: 150px;
    background: url('../img/icons/tools/search_black.svg') no-repeat 7px 6px #ececec;
    background-size: 13px 13px;
}


/* RANGE SLIDER */

input[type="range"] {
    -webkit-appearance: none;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 8px;
    background: transparent;
    outline: none;
}

input[type="range"].audio_sliding {
    width: 75px;
}

input[type="range"].audio_sliding::-webkit-slider-thumb {
    height: 13px;
    width: 13px;
    border-radius: 50%;
    background: #ccc;
    -webkit-appearance: none;
    margin-top: -4.5px;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    transition: 0.2s;
    background: #444;
}

input[type="range"]::-webkit-slider-thumb {
    height: 13px;
    width: 15px;
    border-radius: 25px;
    background: #ccc;
    -webkit-appearance: none;
    margin-top: -4.5px;
}

input[type="range"]:hover::-webkit-slider-thumb {
    background: rgb(230, 230, 230);
}

input[type="range"]:focus::-webkit-slider-runnable-track {
    background: #777;
}


/* other styles */


/* style for change preview item */

input[type="range"].style_sliding {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 0;
    width: 110px;
    transition: 0.2s ease;
}

input[type="range"].style_sliding.resSmall {
    width: 40px;
}

input[type="range"].style_sliding.resSmall::-webkit-slider-thumb {
    width: 12px;
}

input[type="range"].style_sliding::-webkit-slider-thumb {
    height: 3px;
    width: 25px;
    /* border-radius: 0px; */
    background: #ccc;
    /* cursor: pointer; */
    -webkit-appearance: none;
    margin-top: -4.5px;
}


/* style for customize sliders */

input[type="range"].style_customize_slider {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 0;
    width: 100%;
}

input[type="range"].style_customize_slider:hover::-webkit-slider-runnable-track {
    background: rgb(128, 128, 128);
}

input[type="range"].style_customize_slider::-webkit-slider-thumb {
    height: 6px;
    width: 22px;
    border-radius: 0;
    /* border-radius: 0px; */
    background: #ccc;
    /* cursor: pointer; */
    -webkit-appearance: none;
    margin-top: -1px;
}


/* GLOBAL MENU TREES */

#menu {
    /* min-width: 5px; */
    /* width:25%; */
    float: left;
    height: 100%;
    background: #222222;
    border-right: 1px solid #2c2c2c;
    /* border:1px solid chartreuse; */
}

#menu ul {
    font-size: 11px;
    list-style-type: none;
}

#menu ul li {
    border-bottom: 1px solid #282828;
    background: #222;
    transition: ease 0.2s;
    padding: 12px;
    color: #999;
    /* min-width:115px; */
    white-space: nowrap;
}

#menu ul li:hover {
    background: #191919;
    color: #ddd;
    cursor: pointer;
}

#menu ul li div.title {
    padding: 12px;
    margin-left: -12px;
    font-weight: 600;
}

#menu ul li.current {
    background: #191919;
    border-right: 2px solid #FFE032;
    color: #ddd;
}


/* icons for tree li */

#menu ul li .icon {
    width: 13px;
    height: 13px;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    opacity: 0.6;
}

#menu ul li .icon.folder {
    background: url('../img/icons/menu/directory.svg') no-repeat;
    background-size: contain;
}


/* Special Icons for item groups */

#menu ul li .icon.AE {
    background: url('../img/icons/menu/item_ae.svg') no-repeat;
    background-size: contain;
}

#menu ul li .icon.PR {
    background: url('../img/icons/menu/item_pr.svg') no-repeat;
    background-size: contain;
}

#menu ul li .icon.SFX {
    background: url('../img/icons/menu/item_sfx.svg') no-repeat;
    background-size: contain;
}

#menu ul li .icon.FOOTAGE {
    background: url('../img/icons/menu/item_footage.svg') no-repeat;
    background-size: contain;
}

#menu ul li .icon.PRESETS {
    background: url('../img/icons/menu/item_presets.svg') no-repeat;
    background-size: contain;
}


/* items counter for groups */

#menu ul li sup {
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 1px;
    background: #353535;
    color: #A6A6A6;
    border-radius: 25px;
    padding: 4px 6px;
    margin: 7px;
    transition: ease 0.2s;
}


/* folder settings */

#menu ul li.folder.active sup {
    background: #FFE032;
    color: black;
}

#menu ul li.folder.active ul li sup {
    background: #353535;
    color: #A6A6A6;
}

#menu ul li.folder.active ul li.folder.active sup {
    background: #FFE032;
    color: black;
}


/* add border bottom for group three level */

#menu ul li.folder.active div.title {
    border-bottom: 1px solid #333;
    color: #ddd;
}


/* disable double border bottom for group three level when not active */

#menu ul li.folder.active ul li.folder div.title {
    border-bottom: none;
    color: #A6A6A6;
}

#menu ul li.folder.active ul li.folder.active div.title {
    border-bottom: none;
    color: #ddd;
}


/* folder active/last active */

#menu ul li.folder.active {
    border-left: 2px solid #FFE032;
    background: #333;
    font-weight: bold;
}

#menu ul li.folder.last-active {
    background: #292929;
    border-left: 2px solid #f9f9f9;
}

#menu ul li.folder.last-active:hover {
    border-left: 2px solid #FFE032;
}


/* reset margins to clear borders from inside li ul */

#menu ul li.folder {
    padding: 0;
    margin: 0;
    padding-left: 12px;
}


/* get demo package info */

#menu ul li.used_demo {
    background: #FFE032;
    color: #111;
    font-weight: 600;
}

#menu ul li.used_demo:hover {
    background: #111;
    color: #ddd;
    cursor: pointer;
}


/* Popup Content */


/* #popupContent{
    
} */

#popupContent .poBlock {
    height: 100%;
    width: 100%;
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    z-index: 60;
    /* Upper than packagerManager */
    background: #121212;
    opacity: 0.92;
}

#popupContent .poBlock.current {
    display: block;
}


/* top buttons panel */

#popupContent .poBlock .top {
    border-bottom: 2px groove #222;
    padding: 15px;
}

#popupContent .poBlock .top .btn {
    font-size: 13px;
    font-weight: 600;
    transition: 0.2s ease;
    /* display:inline-block; */
    padding: 4px;
    float: left;
}

#popupContent .poBlock .top .btn.right {
    font-size: 13px;
    font-weight: 600;
    transition: 0.2s ease;
    float: right;
    padding: 4px;
}

#popupContent .poBlock .top .btn.right:hover {
    cursor: pointer;
    margin-right: -2px;
    text-decoration: underline;
}

#popupContent .poBlock .top .btn:hover {
    cursor: pointer;
    margin-left: -2px;
    text-decoration: underline;
}


/* Stylized buttons */

#popupContent .poBlock .top .fbtn {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: 0.2s ease;
    float: right;
    padding: 4px;
    opacity: 0.6;
}

#popupContent .poBlock .top .fbtn.disabled {
    opacity: 0.3;
}

#popupContent .poBlock .top .fbtn:hover {
    cursor: pointer;
    opacity: 1;
}


/* body content */

#popupContent .poBlock .pbody {
    height: 100%;
}

#popupContent .poBlock .pbody.padding {
    padding: 15px;
}


/* preload Popup content (market/video tutorials) */

#popupContent .poBlock .preloadInfoBlock {
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 25%;
    width: 100%;
}

#popupContent .poBlock .preloadInfoBlock h1 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: default;
    line-height: 22px;
}

#popupContent .poBlock .preloadInfoBlock h2 {
    -webkit-animation: opacity_blink 1.5s ease-in-out infinite;
    animation: opacity_blink 1.5s ease-in-out infinite;
    opacity: 0.7;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    cursor: default;
    line-height: 22px;
}

#popupContent .poBlock .preloadInfoBlock .ci {
    width: 64px;
    height: 64px;
    display: block;
    margin: 7px auto;
}

#popupContent .poBlock .preloadInfoBlock .ci.loader {
    background: url('../img/icons/popup/informers/atom_animation_loading.gif') no-repeat;
    background-size: contain;
}

#popupContent .poBlock .preloadInfoBlock .ci.warning {
    background: url('../img/icons/popup/informers/warning.svg') no-repeat;
    background-size: contain;
}

#popupContent .poBlock .preloadInfoBlock .ci.blocked {
    background: url('../img/icons/popup/informers/eye_block.svg') no-repeat;
    background-size: contain;
}

#popupContent .poBlock .preloadInfoBlock .ci.timeout {
    background: url('../img/icons/popup/informers/timeout.svg') no-repeat;
    background-size: contain;
}

#popupContent .poBlock .preloadInfoBlock .ci.bug {
    background: url('../img/icons/popup/informers/bug.svg') no-repeat;
    background-size: contain;
}


/* Spoiler Global Container */


/* variants of engine tools (hidden all, will be show at start from pack type) */

.spoilerContainer {
    display: none;
}


/* .spoilerContainer.selected{display:block;} */


/* Tables */

.table {
    display: table;
}

.row {
    display: table-row;
}

.col {
    display: table-column;
}

.cell {
    display: table-cell;
}


/* Special Tooltips */

[special-tooltip] {
    position: relative;
    display: inline-block;
}

[special-tooltip] .tooltip-content {
    /* font-weight: 500; */
    font-size: 11px;
    visibility: hidden;
    min-width: 110px;
    max-width: 200px;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    padding-left: 10px;
    padding-right: 10px;
    /* left: 100%; */
    margin-left: -10px;
}

[special-tooltip] .tooltip-content strong {
    font-weight: 700;
    color: #FFDF36;
}

[special-tooltip] .tooltip-content strong.g {
    color: rgb(79, 205, 255);
}

[special-tooltip] .tooltip-content strong.critical {
    color: rgb(255, 17, 97);
}

[special-tooltip] .tooltip-content sup {
    color: rgb(79, 205, 255);
    font-weight: 600;
}

[special-tooltip] .tooltip-content sup.critical {
    color: rgb(255, 17, 97);
}

[special-tooltip] .tooltip-content sup.waiting {
    color: #FFDD00;
    -webkit-animation: opacity_blink 1.5s ease-in-out infinite;
    animation: opacity_blink 1.5s ease-in-out infinite;
}

[special-tooltip] .tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 15%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

[special-tooltip]:hover .tooltip-content {
    visibility: visible;
}


/* Tooltips */

[tooltip] {
    /*  margin:20px 60px;*/
    position: relative;
    display: inline-block;
    font-weight: 600;
    font-size: 11px;
}

[tooltip]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
    z-index: 6;
    opacity: 0;
}

[tooltip-position='left']::before {
    left: 0%;
    top: 50%;
    margin-left: -13px;
    transform: translatey(-50%) rotate(-90deg)
}

[tooltip-position='top']::before {
    left: 50%;
}

[tooltip-position='bottom']::before {
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}

[tooltip-position='right']::before {
    left: 100%;
    top: 50%;
    transform: translatey(-50%) rotate(90deg)
}

[tooltip-type='footer']::after {
    margin-left: 35px;
    text-align: left;
    min-width: 80px;
    left: 50%;
    /* font-size:8px; */
}

[tooltip-type='customizerRange']::after {
    margin-top: 12px;
    min-width: 40px;
    font-size: 10px;
    font-weight: 600;
}

[tooltip-type='customizerRange']::before {
    top: 20%;
}

[tooltip-type='customizer']::after {
    /*     margin-left:35px;
    text-align: left;
    
    left:50%; */
    min-width: 80px;
    font-size: 10px;
    font-weight: 600;
    /* font-size:8px; */
}

[tooltip-type='items']::before {
    top: 100%;
    transform: translateX(-50%) translatey(4px) rotate(-180deg)
}

[tooltip-type='items']::after {
    top: 100%!important;
    transform: translateX(-85%) translateY(8px)!important;
    min-width: 85px;
    font-size: 10px;
}

[tooltip-type='tools']::after {
    margin-left: 30px;
    text-align: left;
    left: 50%;
}

[tooltip-type='toolsBtn']::after {
    margin-left: 30px;
    text-align: left;
    left: 50%;
}

[tooltip-type='def_font']::after {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0;
}

[tooltip-type='pack_manager']::after {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    width: 80px;
}

[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%) translateY(-100%);
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    color: #fff;
    /* min-width: 80px; */
    border-radius: 5px;
    pointer-events: none;
    padding: 5px 8px;
    z-index: 6;
    opacity: 0;
}

[tooltip-position='left']::after {
    left: 0%;
    top: 50%;
    margin-left: -8px;
    transform: translateX(-100%) translateY(-50%);
}

[tooltip-position='top']::after {
    left: 50%;
}

[tooltip-position='bottom']::after {
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%) translateY(0%);
}

[tooltip-position='right']::after {
    left: 100%;
    top: 50%;
    margin-left: 8px;
    transform: translateX(0%) translateY(-50%);
}

[tooltip-talign='left']::after {
    text-align: left;
}

[tooltip-talign='right']::after {
    text-align: right;
}

[tooltip-talign='center']::after {
    text-align: center;
}

[tooltip]:hover::after,
[tooltip]:hover::before {
    opacity: 1;
}


/* System Messages (alert and etc) */

.systemMessage {
    position: fixed;
    background: #111111;
    z-index: 200;
    opacity: 0.9;
    transition: 0.3s ease-in-out;
    width: 100%;
    height: 115px;
    border-bottom: 1px dashed #757575;
    /* top:0; */
    top: -130px;
    cursor: default;
}

.systemMessage .content {
    text-align: center;
    min-width: 220px;
    padding: 20px;
}

.systemMessage .content h1 {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 22px;
    letter-spacing: 0.5px;
    display: inline-block;
    margin: 5px;
}

.systemMessage .content h1.success {
    color: #FFDD00;
}

.systemMessage .content h1.error {
    color: #FF1F4C;
}

.systemMessage .content h1.info {
    color: #00C8FF;
}

.systemMessage .content h1.notify {
    color: #00FFA9;
}

.systemMessage .content p {
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
}

.systemMessage .content strong {
    /* color:#FFDD00; */
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px dotted white;
}

.systemMessage .content code {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #242424;
    background: #cecece;
    border: 1px dotted #424242;
    padding: 2px;
    cursor: text;
    -webkit-user-select: all;
    user-select: all;
}

.systemMessage .content a {
    font-size: 12px;
    text-decoration: underline;
    transition: 0.1s ease;
}

.systemMessage .content a:hover {
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}


/* Close text/counting to close */

.systemMessage .content small {
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 600;
    opacity: 0.4;
    transition: 0.1s ease;
}

.systemMessage .content small:hover {
    opacity: 0.8;
    cursor: pointer;
}


/* Counting circle/numbers */

.systemMessage .content small .nums {
    /* display:block; */
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
}

.systemMessage .content small .nums .circle {
    position: relative;
    border: 2px solid white;
    border-radius: 100%;
    padding: 8px;
    top: -15px;
}

.systemMessage .i {
    width: 21px;
    height: 21px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 4px;
    /* margin:10px auto; */
}

.systemMessage .i.success {
    background: url('../img/icons/message/success.svg') no-repeat;
    background-size: contain;
}

.systemMessage .i.error {
    background: url('../img/icons/message/error.svg') no-repeat;
    background-size: contain;
}

.systemMessage .i.info {
    background: url('../img/icons/message/info.svg') no-repeat;
    background-size: contain;
}

.systemMessage .i.notify {
    background: url('../img/icons/message/notify.svg') no-repeat;
    background-size: contain;
}


/* Drag and Drop installation place */

.dragAndDropInstallation {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #111111;
    z-index: 1000;
    border: 2px dashed white;
    /* border-radius: 2px; */
    /* margin:3px; */
    opacity: 0.8;
    transition: 0.2s ease;
    display: none;
}

.dragAndDropInstallation .place {
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 25%;
    width: 100%;
}


/* Center vertically, part 1 */


/* .dragAndDropInstallation:before { 
    content: '';
    display: inline-block;
    height: 100%;

    vertical-align: middle;
} */


/* is status */

.dragAndDropInstallation.is-active {
    display: block;
}

.dragAndDropInstallation.is-active:hover {
    opacity: 0.95;
    border: 2px dashed white;
}

.dragAndDropInstallation.is-dragover {
    display: block;
    opacity: 0.95;
    border: 2px dashed white;
}

.dragAndDropInstallation.is-active:hover .atomBoxLogo,
.dragAndDropInstallation.is-dragover .atomBoxLogo {
    -webkit-animation: dnd_roll 1.2s ease-in-out infinite;
    animation: dnd_roll 1.2s ease-in-out infinite;
}

.dragAndDropInstallation .place .atomBoxLogo {
    background: url('../img/atom_upload_pack.svg') no-repeat;
    background-size: contain;
    width: 170px;
    height: 145px;
    margin: 10px auto;
}

.dragAndDropInstallation .place input {
    display: none;
}

.dragAndDropInstallation .place p {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: default;
    line-height: 22px;
}

.dragAndDropInstallation .place p:nth-of-type(2) {
    font-size: 13px;
    font-weight: 500;
}

.dragAndDropInstallation .place label {
    font-size: 13px;
    font-weight: 500;
    /* text-decoration: underline; */
    border-bottom: 1px dotted white;
}

.dragAndDropInstallation .place label:hover {
    border-bottom: 1px dotted transparent;
    cursor: pointer;
}

.dragAndDropInstallation .place p:nth-of-type(3) {
    font-size: 12px;
    font-weight: 600;
}


/* TEST MODE WINDOW */


/* Drag and Drop installation place */

.testModeWindow {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #111111;
    z-index: 60;
    border: 3px double #FFDD00;
    opacity: 0.8;
    transition: 0.2s ease;
    display: none;
}

.testModeWindow .place {
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 20%;
    width: 100%;
}

.testModeWindow .place .atomDevLogo {
    background: url('../img/atom_test_mode_active.svg') no-repeat;
    background-size: contain;
    width: 170px;
    height: 145px;
    margin: 10px auto;
    -webkit-animation: dnd_roll 2.2s ease-in-out infinite;
    animation: dnd_roll 2.2s ease-in-out infinite;
}

.testModeWindow .place a {
    padding: 4px 8px;
    background: white;
    color: black;
    transition: 0.2s ease;
    font-weight: 600;
}

.testModeWindow .place a:hover {
    cursor: pointer;
    background: black;
    color: white;
}

.testModeWindow .place p.very-small {
    font-size: 9px;
    opacity: 0.5;
}

.testModeWindow .place p.exit-mode {
    width: 70%;
    margin: 10px auto;
    font-size: 10px;
    font-weight: 600;
    color: rgb(167, 167, 167);
}

.testModeWindow .place p.exit-mode a {
    padding: 0;
    background: none;
    color: rgb(167, 167, 167);
    text-decoration: underline;
}

.testModeWindow .place p.exit-mode a:hover {
    text-decoration: none;
    color: white;
}

.testModeWindow .place p {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: default;
    line-height: 22px;
}

.testModeWindow .place p.cy {
    color: #FFDD00;
}

.testModeWindow .place p:nth-of-type(2) {
    font-size: 13px;
    font-weight: 500;
}

.testModeWindow .place label {
    font-size: 13px;
    font-weight: 500;
    /* text-decoration: underline; */
    border-bottom: 1px dotted white;
}

.testModeWindow .place label:hover {
    border-bottom: 1px dotted transparent;
    cursor: pointer;
}

.testModeWindow .place p:nth-of-type(3) {
    font-size: 12px;
    font-weight: 600;
}


/* ATOM BROKEN PACKAGE / ANY INFO */

.outsideWrapper {
    position: relative;
    top: 10%;
    /* border:1px solid red; */
}

.bsPackageSector {
    width: 300px;
    margin: 0 auto;
    display: none;
}

.bsPackageSector .place {
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.bsPackageSector .place .atomBrokenLogo {
    background: url('../img/atom_broken_pack.svg') no-repeat;
    background-size: contain;
    width: 180px;
    height: 155px;
    margin: 10px auto;
    -webkit-animation: dnd_roll 2.2s ease-in-out infinite;
    animation: dnd_roll 2.2s ease-in-out infinite;
}

.bsPackageSector .place p {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: default;
    line-height: 22px;
}

.bsPackageSector .place p:nth-of-type(2) {
    font-size: 13px;
    font-weight: 500;
}

.bsPackageSector .place p:nth-of-type(3) {
    font-size: 12px;
    font-weight: 600;
}


/*      GLOBAL ICONS     */

.gi {
    /* display:inline-block; */
    /* vertical-align: middle; */
    margin: 2px;
}

.gi.max {
    width: 64px;
    height: 64px;
}

.gi.min {
    width: 18px;
    height: 18px;
}

.gi.max.AE {
    background: url('../img/icons/softwares/ae.png') no-repeat;
}

.gi.max.PR {
    background: url('../img/icons/softwares/pr.png') no-repeat;
}

.gi.max.AI {
    background: url('../img/icons/softwares/ai.png') no-repeat;
}

.gi.max.PS {
    background: url('../img/icons/softwares/ps.png') no-repeat;
}

.gi.max.PLUGIN {
    background: url('../img/icons/softwares/plugin.png') no-repeat;
}

.gi.max.MIX {
    background: url('../img/icons/softwares/mix.png') no-repeat;
}

.gi.min.AE {
    background: url('../img/icons/softwares/ae_18px.png') no-repeat;
}

.gi.min.PR {
    background: url('../img/icons/softwares/pr_18px.png') no-repeat;
}

.gi.min.AI {
    background: url('../img/icons/softwares/ai_18px.png') no-repeat;
}

.gi.min.PS {
    background: url('../img/icons/softwares/ps_18px.png') no-repeat;
}

.gi.min.PLUGIN {
    background: url('../img/icons/softwares/plugin_18px.png') no-repeat;
}

.gi.min.MIX {
    background: url('../img/icons/softwares/mix_18px.png') no-repeat;
}


/* Special sizes for Retina displays */

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    .gi.min.AE {
        background: url('../img/icons/softwares/ae_32px.png') no-repeat;
        background-size: contain;
    }
    .gi.min.PR {
        background: url('../img/icons/softwares/pr_32px.png') no-repeat;
        background-size: contain;
    }
    .gi.min.AI {
        background: url('../img/icons/softwares/ai_32px.png') no-repeat;
        background-size: contain;
    }
    .gi.min.PS {
        background: url('../img/icons/softwares/ps_32px.png') no-repeat;
        background-size: contain;
    }
    .gi.min.PLUGIN {
        background: url('../img/icons/softwares/plugin_32px.png') no-repeat;
        background-size: contain;
    }
    .gi.min.MIX {
        background: url('../img/icons/softwares/mix_32px.png') no-repeat;
        background-size: contain;
    }
}


/* CHECKBOXES/RADIO */


/* 
CHECKBOX:

<label class="labelBox">Enable Mix Mode
    <input type="checkbox" name="checkbox-text-animation-mix-mode">
    <span class="checkmark"></span>
</label>

RADIO:

<label class="labelBox">One
    <input type="radio" checked="checked" name="radio">
    <span class="checkmark radio"></span>
</label>

*/


/* The container */

label.labelBox {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    margin-right: 3px;
    cursor: pointer;
    line-height: 24px;
    font-size: 11px;
    font-weight: 600;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label.labelBox small {
    opacity: 0.6;
}


/* Hide the browser's default checkbox */

label.labelBox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

label.labelBox span.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #141414;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    transition: ease 0.2s;
    /* border:1px solid transparent; */
    border: 1px solid rgb(46, 46, 46);
}


/* On mouse-over, add a grey background color */

label.labelBox:hover input~span.checkmark {
    background-color: #010101;
    border: 1px solid #2196F3;
}


/* When the checkbox is checked, add a blue background */

label.labelBox input:checked~span.checkmark {
    background-color: #2196F3;
    border: 1px solid #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */

span.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

label.labelBox input:checked~span.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

label.labelBox span.checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* RADIO BUTTONS */

label.labelBox span.checkmark.radio {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #141414;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    transition: ease 0.2s;
    border-radius: 50%;
}


/* Style the indicator (dot/circle) */

label.labelBox span.checkmark.radio:after {
    top: 5px;
    left: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: white;
}


/* Settings Input Styles */

label.labelBox.labelSetting span.checkmark {
    border: 2px solid #FFDF36;
    background: transparent;
}

label.labelBox.labelSetting input:checked~span.checkmark {
    /* border:1px solid red; */
    border: 2px solid transparent;
    background-color: rgb(255, 235, 54);
}

label.labelBox.labelSetting:hover input~span.checkmark {
    background-color: #FFDF36;
    border: 2px solid rgb(221, 186, 13)!important;
}

label.labelBox.labelSetting span.checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* Style the indicator (dot/circle) */

label.labelBox.labelSetting span.checkmark.radio:after {
    top: 5px;
    left: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: black;
}


/* Show hide content - like a spoilers */

.hideContent {
    display: none;
}

.hideContent.selected {
    display: block;
}