/*
 * @Author: aniom
 * @Date:   2020-04-15 04:10:54
 * @Last Modified by:   aniom
 * @Last Modified time: 2020-05-22 22:46:18
 */
/*
* UI ATOM CSS
* ATOM EXTENSION https://aniom.net/
* CHANGED: 30.11.19
*/


/*    AUDIO CONTAINER   */
canvas#audioBody{

  /*position: absolute;*/
  position: fixed;
  /* left: 10px; */
  /* bottom: 38px;from footer height */

  z-index: 0;
  /* background:red; */
  top:0;
  left:0;
  width:100%;
  height:75px;
  display:none;

  background:rgba(0, 0, 0, 0.4);
  /* width:100%; */
  /* transform: rotateZ(90deg); */


  /*background: #888;*/
  /*background: #555;*/
}


/* PROGRESS BAR */

/* Full Black fill for preloader */
.preStartFill{
  height:100%;
  width:100%;
  position: fixed;
  top:0;
  left:0;
  z-index:199;
  background:#121212;
}

#progressBar{
  height:100%;
  width:100%;
  position: fixed;
  display:none;
  top:0;
  left:0;
  z-index:200;
  background:#121212;
  opacity:0.9;
}



#progressBar .place{
  position: relative;
  top:40%;
  height:100%;
  margin:0 auto;
  width:70%;
}

#progressBar .place .title{
  text-align:center;
  padding:5px;
  cursor: default;
}

#progressBar .place .title span{
  text-transform: uppercase;
  font-weight: 600;
  font-size:11px;
}

.progress {
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -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);
}

/* Stripes */

.progress-bar span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  -webkit-animation: move 2s linear infinite;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

.progress-bar span {
  display: block;
  height: 100%;
  position: relative;
  overflow: hidden;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

.progress-bar {
  height: 10px;
  border-radius: 4px;
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));

  transition: 0.2s linear;
/*   -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color; */
  transition-property: background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

.progress-bar.low {
  width: 5%;
  background-color: #f63a0f;
}

.progress-bar.normal {
  width: 25%;
  background-color: #f27011;
}

.progress-bar.high {
  width: 50%;
  background-color: #f2b01e;
}

.progress-bar.higest {
  width: 75%;
  background-color: #f2d31b;
}

.progress-bar.top {
  width: 100%;
  background-color: #86e01e;
}

/* END PROGRESS BAR */


/* Audio rewrite to show info */
.audioBoardInfo{
  z-index:1;
  display:none;
}

.audioSeekerByWidth{
  height:2px;
  width:23px;
  background: rgb(72, 212, 255);
  transition:0.1s ease;
  position: fixed;
  top:22px;
  left:80px;
  z-index:1;
}

.insteadPackDetailsBlock{
  background:rgb(72, 212, 255);
  color:#111111;
  padding:3px 6px;
  font-weight: 600;
  transition:ease 0.2s;
  box-shadow: 2px 2px 18px rgba(50, 50, 50, 0.4);
  position: fixed;
  top:26px;
  left:80px;
  z-index:1;

}

/* Info on header */

.infoPlaceboard{
  display:none;
  z-index:10;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:75px;
  background:rgba(0, 0, 0, 0.6);
}

.infoPlaceboard .bodyPlace{
  font-size:12px;
  -webkit-animation: dnd_roll 2.0s ease-in-out infinite;
  animation: dnd_roll 2.0s ease-in-out infinite;
  text-align:center;
  position: relative;
  top:20%;
  font-size:12px;
  font-weight: 500;
  text-transform: uppercase;
}

.infoPlaceboard h1{
  cursor:help;
  margin:10px;
  font-size:17px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Global Header */
/* Will replaced custom_header_name.png to use for header of current package */
#header{

    height: 75px;
    position: relative;
    background:url('../img/headers/header_atomx.png') no-repeat left center #b71b65;
}

/* Will wrap #header to set grey overlay */
.corruptedPackGreyFHeader{
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

/* Atom Logo and Animations */
#header .atomLogo{
    position: absolute;
    top:10px;
    left:10px;
    z-index:1;
}

#header .atomLogo .logo{
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    transition: 0.4s ease;
}

#header .atomLogo .logo .logoIcon{
  background:url('../img/headers/atomx_logo.png') no-repeat;
  background-size:contain;
  width:52px;
  height:52px;
}

#header .atomLogo .logo:hover{
    cursor:pointer;
    transform: scale(0.92);
    -webkit-filter: grayscale(50%); 
    filter: grayscale(50%); 
}


#header .atomLogo .border{
    position: absolute;
    top:-11px;
    left:-10px;
    background:url('../img/headers/atom_logo_border_retina.png') no-repeat;
    background-size:contain;
    width:72.5px;
    height:75px;
}

#header .atomLogo .glow{

    position: absolute;
    left:-4px;
    top:-4px;
    width: 40px;
    height: 40px;
    padding:10px;
    border-radius: 50%;
    box-shadow:
        0px 0px 12px 3px rgba(49,151,255,0.55), 
        6px 6px 11px 3px rgba(44,240,255,0.58), 
        -6px -6px 12px 3px rgba(87,92,255,0.58),
        inset -4px 4px 13px 3px rgba(87,92,255,0.58);
    -webkit-animation: spin 4.2s linear infinite;
    animation: spin 4.2s linear infinite;
    transition: 0.4s ease;
}


#header .atomLogo .logo:hover .glow{
  top:11px;
  left:11px;
  width: 10px;
  height: 10px;

}

/* Package Details Header */

#header .packDetails{
  float:left;
  margin-top:15px;
  margin-left:75px;
  width:100%;
}

#header .packDetails strong{
  font-weight: 600;
}

#header .packDetails .packName{
  font-size:13px;
  font-weight: 600;
  margin:4px;
  display:block;
  cursor:help;
  color:white;
  text-shadow: 2px 2px 3px rgba(50, 50, 50, 0.6);
  max-width:200px;
  line-height: 14px;

}

#header .packDetails .packAuthor{
  background:#FFE032;
  color:#111111;
  padding:3px 6px;
  font-weight: 500;
  display:inline-block;

  margin-left:5px;
  transition:ease 0.2s;
  box-shadow: 2px 2px 18px rgba(50, 50, 50, 0.4);

}

#header .packDetails .togglePackInfo{
  background:#111111;
  color:white;
  padding:3px 6px;
  font-weight: 500;
  display:inline-block;
  margin-left:5px;
  transition:ease 0.2s;
  box-shadow: 2px 2px 18px rgba(50, 50, 50, 0.4);
}




#header .packDetails .packAuthor:hover{
  background:#111111;
  color:white;
  cursor:pointer;
}

/* Right Menu Header */

#header .headMenu{
  float:right;
  position: absolute;
  right:0;
}



#header .headMenu .notifyCounter{
  position: absolute;
  top:12px;
  right:10px;
  z-index: 2;
  cursor: default;
}

#header .headMenu .notifyCounter span{
  background:#FFE032;
  color:black;
  font-size:9px;
  font-weight: 600;
  border-radius: 25px;
  padding:3px 6px;
  min-width:5px;
  text-align:center;
  display:block;
  -webkit-box-shadow: -2px 2px 20px 0px rgba(50, 50, 50, 0.4);
  -moz-box-shadow:    -2px 2px 20px 0px rgba(50, 50, 50, 0.4);
  box-shadow:         -2px 2px 20px 0px rgba(50, 50, 50, 0.4);
}


#header .headMenu .notifyCounter{
  -webkit-animation: shake 2s cubic-bezier(.36,.07,.19,.97) both;
   animation: shake 2s cubic-bezier(.36,.07,.19,.97) both;
}

#header .headMenu .notifyCounter.constantlyShake{
  -webkit-animation: shake 2.6s linear infinite;
   animation: shake 2.6s linear infinite;
}




#header .headMenu .shoppingCart{
  z-index:1;
  position: relative;
  top:14px;
  right:10px;
  border:2px solid rgba(226, 226, 226, 0.5);
  padding:8px 9px;
  border-radius:50%;
  transition:ease 0.2s;
  opacity:0.8;

/*   -webkit-box-shadow: 12px 8px 20px 0px rgba(50, 50, 50, 0.4);
  -moz-box-shadow:    12px 8px 20px 0px rgba(50, 50, 50, 0.4);
  box-shadow:         12px 8px 20px 5px rgba(50, 50, 50, 0.4); */
  -webkit-box-shadow: 12px 5px 25px 5px rgba(50, 50, 50, 0.4);
  -moz-box-shadow:    12px 5px 25px 5px rgba(50, 50, 50, 0.4);
  box-shadow:         12px 5px 25px 5px rgba(50, 50, 50, 0.4);
}

#header .headMenu .shoppingCart:hover{
  border:2px solid transparent;
  opacity:1;
  cursor:pointer;
  -webkit-box-shadow: -4px -5px 30px 2px rgba(50, 50, 50, 0.4);
  -moz-box-shadow:    -4px -5px 30px 2px rgba(50, 50, 50, 0.4);
  box-shadow:         -4px -5px 30px 2px rgba(50, 50, 50, 0.4);
}

#header .headMenu .shoppingCart.active{
  border:2px solid rgb(255, 224, 50);
}

#header .headMenu .shoppingCart .marketIcon{
  width:26px;
  height:28px;
  display:block;
  background-repeat: no-repeat;
    background-image: url('../img/headers/shopping_cart.svg');
    background-size: contain;
  transition:0.15s ease;
}


#header .headMenu .calloutsMarket {
  font-size:11px;
  font-weight: 600;
  background-color: #fff;
  color:black;
  cursor: default;
  position: absolute;
  right:65px;

  top:0;
  width:165px;
  padding: 15px;
  margin:12px;

  z-index: 60;
  border-radius: 10px;
  box-shadow: 0 0 27px #b4b4b4;
  
  /* right:-300px; */
  display:none;

  -webkit-animation: market_callouts_roll 1.2s ease-in-out infinite;
  animation: market_callouts_roll 1.2s ease-in-out infinite;

}


#header .headMenu .calloutsMarket:after {
  content: "";
	position: absolute;
	width: 0;
	height: 0;
	right: -24px;
	top: 20px;
  border: 8px solid transparent;
  border-left: 16px solid #fff;

}



/* Shop Icon Half Size Layout */
#header .headMenu.resLayoutShop{
  top:40px;
  left:56px;
  right:auto;

}

#header .headMenu.resLayoutShop .shoppingCart{
  top:0;
  padding:0;
  margin:0;

  padding:4px 5px;
}

#header .headMenu.resLayoutShop .shoppingCart .marketIcon{
  width:15px;
  height:17px;
  background-size:contain;
}


#header .headMenu.resLayoutShop .notifyCounter{
  top:0;

  right:8px;
}
#header .headMenu.resLayoutShop .notifyCounter span{
  font-size:8px;
}

/* TOOLS */

#tools{
  border-top:1px solid #303030;
  border-bottom:1px solid #303030;
  background:#333;
  /* width: 100%; */
  /* margin: 0 auto; */
}

#tools .gIcon{
  width:21px;
  height:23px;
  display:block;
  background-repeat: no-repeat;
  transition:0.15s ease;
}

/* AE - ICONS */
#tools .gIcon.customizer{background-image:url('../img/icons/tools/customize.svg');}
#tools .gIcon.toolbar{background-image:url('../img/icons/tools/toolbar.svg');}
#tools .gIcon.videotuts{background-image:url('../img/icons/tools/play_media.svg');}
#tools .gIcon.favorites{background-image:url('../img/icons/tools/star_favorite.svg');}

#tools ul.global{
  list-style-type: none;
  min-width:170px;

}

li.notifyGlow{
  -webkit-box-shadow: inset 0px 0px 8px 0px white;
  -moz-box-shadow: inset 0px 0px 8px 0px white;
  box-shadow: inset 0px 0px 6px 0px whitesmoke;
  -webkit-animation: opacity_blink 1.5s ease-in-out infinite;
  animation: opacity_blink 1.5s ease-in-out infinite;
}


#tools ul.global li{
  border-top:2px solid transparent;
  float:left;
  padding:8px 10px;
  transition: ease 0.2s;
  background:#333;
}

#tools ul.global li:hover{
  border-top:2px solid white;

  cursor:pointer;
  background:#171717;
}

#tools ul.global li:active{
  border-top:2px solid #ccc;
  cursor:pointer;
  background:#222;
}

#tools ul.global li:active img{
  opacity:0.8;
}

#tools ul.global li.current{
  border-top:2px solid white;

  cursor:pointer;
  background:#222;
}


#tools input.search{
  position: absolute;
  right:0;
}

#tools input.search::-webkit-input-placeholder{
  color:#c2c2c2;
}

#tools input.search.resLayoutRes{
  right:0;
  width:0;
}

#tools input.search.resLayoutRes:focus{
  width:150px;
}

#tools .toolSpoilerContainer{
  background:#222222;
  display:none;
}

/* variants of engine tools (hidden all, will be show at start from pack type) */
#tools .toolSpoilerContainer div{
  padding:5px;
  display:none;
}
#tools .toolSpoilerContainer div.showEngineTools{display:block;}


#tools .toolSpoilerContainer ul.btns label.labelBox{
  display: inline-block;
  top: -10px;
  position: relative;
}

/* #tools .toolSpoilerContainer ul.btns label.labelBox span.checkmark {
  position: absolute;
  top: -5px;
  left: 0;
  height: 20px;
  width: 20px;


} */


/* buttons inside Tools Container */

#tools .toolSpoilerContainer .separator{
  margin:0;
  margin-top:2px;
  margin-bottom:6px;
  padding:0;
  border: none;
  border-left: 1px solid rgb(63, 63, 63);
  height: 18px;
  display: inline-block;

}


#tools .toolSpoilerContainer ul.btns li{
  margin:1px;
  display: inline-block;
  padding: 3px 4px;
  background: rgb(51, 51, 51);
  border:2px solid #3d3d3d;
  box-shadow: 0 0 14px rgba(83, 83, 83, 0.2);
  border-radius: 2px;
  transition:0.15s ease;

}

#tools .toolSpoilerContainer ul.btns li:hover{
  border:2px solid #33c0e4;
  background: #27D4FF;
  cursor: pointer;
}

#tools .toolSpoilerContainer ul.btns li:hover .icon{
  -webkit-animation: shake 1.7s ease-in-out infinite;
  animation: shake 1.7s ease-in-out infinite;
}

#tools .toolSpoilerContainer .icon{
  width:8px;
  height:8px;
  display:block;
  transition:0.15s ease;
  background-size:contain;
  background-repeat: no-repeat;
}

/* AE - ICONS */
#tools .toolSpoilerContainer .icon.timingReverse{background-image:url('../img/icons/tools/toolbars/ae/timing_reverse.svg');}
#tools .toolSpoilerContainer .icon.timingInOut{background-image:url('../img/icons/tools/toolbars/ae/timing_in_out.svg');}
#tools .toolSpoilerContainer .icon.timingSimple{background-image:url('../img/icons/tools/toolbars/ae/timing_simple.svg');}
#tools .toolSpoilerContainer .icon.timingLoopAA{background-image:url('../img/icons/tools/toolbars/ae/timing_loop_aa.svg');}
#tools .toolSpoilerContainer .icon.trash{background-image:url('../img/icons/tools/toolbars/ae/trash.svg');}

/* PR - ICONS */
#tools .toolSpoilerContainer .icon.closeSourceMonitors{background-image:url('../img/icons/tools/toolbars/pr/close_sources_monitor.svg');}
#tools .toolSpoilerContainer .icon.consolidateDups{background-image:url('../img/icons/tools/toolbars/pr/consolidate_duplicates.svg');}
#tools .toolSpoilerContainer .icon.nestDuplicator{background-image:url('../img/icons/tools/toolbars/pr/nest_duplicator.svg');}
#tools .toolSpoilerContainer .icon.resize{background-image:url('../img/icons/tools/toolbars/pr/resize.svg');}

#tools .toolSpoilerContainer ul.btns li:active{
  border:2px solid rgb(33, 211, 255);
  background: rgb(72, 218, 255);
  cursor: pointer;
}

/* MARKET POBLOCK */

/* .atomMarket .pbody{

} */
.atomMarket .pbody.bg{
  background:url('../img/bg/lowpoly_warm.jpg') no-repeat;
  background-size: cover;
}




.atomMarket .pbody .customizeElement li{
  padding:0;
  margin:4px;
  /* text-transform: uppercase; */
  border-bottom:none;
}

.atomMarket .pbody .customizeElement .btn{
  background: rgba(255,255,255,1);
  color:black;
  text-shadow: none;
}

.atomMarket .pbody .customizeElement .btn.selected,
.atomMarket .pbody .customizeElement .btn:hover{
  background: rgb(32, 32, 32);
  color:white;
}

.atomMarket .pbody .customizeElement .btn.selected strong,
.atomMarket .pbody .customizeElement .btn:hover strong{
  background: rgba(255,255,255,1);
  color:black;

}


.atomMarket .pbody .customizeElement .btn strong{
  background: rgb(32, 32, 32);
  color:rgba(255,255,255,1);
  font-weight: 600;
  font-size:9px;
  padding:3px 6px;
  border-radius: 50%;
  margin-left:5px;
}


/* ITEM BLOCK IN MARKET LAYOUT */

.atomMarket .webIcon{
  background:url('../img/icons/popup/network.svg') no-repeat;
  background-size:contain;
  width:18px;
  height: 18px;
  float:right;
  margin-top:-4px;
  margin-left:5px;
  transition:0.15s ease;
}
.atomMarket .fbtn.market_site:hover .webIcon{transform: rotate(20deg);}

.atomMarket .turnOffNotify{
  background:url('../img/icons/popup/turn_off.svg') no-repeat;
  background-size:contain;
  width:18px;
  height: 18px;
  float:right;
  margin-top:-4px;
  margin-left:5px;
  transition:0.15s ease;
}

.atomMarket .fbtn.notify_off:hover .turnOffNotify{transform: rotate(-20deg);}

.atomMarket .turnOffNotifyOk{
  background:url('../img/icons/popup/done_mini.svg') no-repeat;
  background-size:contain;
  width:14px;
  height: 14px;
  float:right;
  margin-top:0px;

  margin-left:5px;

  transition:0.15s ease;
}

.atomMarket .loadMoreButton{
  margin:0 auto;
  text-align:center;
  background:  whitesmoke;
  color:rgb(32, 32, 32);
  
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  border:0;
  outline:0;
  padding:8px 12px;
  width:35%;
  margin-top:30px;
  margin-bottom:30px;
  border:2px solid transparent;
  text-transform: uppercase;
  font-weight: 600;
  font-size:11px;
  transition:0.3s ease;
  cursor: pointer;
}

.atomMarket .loadMoreButton:hover{
  background: rgb(32, 32, 32);
  color:white;
  width:40%;
}

.atomMarket .pbody .vt_body{

  margin: 0 auto;
  width:310px;
  transition:0.3s ease-in-out;
}

.atomMarket .pbody .mitem{

  /* float:left; */
  vertical-align: top;
  display:inline-block;
  margin:8px;
/*   background: rgba(0, 0, 0, 0.25);
  -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); */

  background: rgb(32, 32, 32);
  color:rgb(238, 238, 238);
  /* border-radius: 6px; */

  padding:5px;
  margin-bottom:4px;
  width:280px;
  position: relative;

  -webkit-box-shadow: 0px 0px 20px -4px rgba(0,0,0,0.7);
  -moz-box-shadow: 0px 0px 20px -4px rgba(0,0,0,0.7);
  box-shadow: 0px 0px 20px -4px rgba(0,0,0,0.7);
  border-bottom:2px solid royalblue;

}





/* badge new item */
.atomMarket .pbody .mitem .badgeNew{
  background:url('../img/icons/popup/market/badge_new_item.svg') no-repeat;
  background-size:contain;
  width:54px;
  height:54px;
  position: absolute;
  top:-12px;
  right:-16px;
  z-index:15;
}



.atomMarket .pbody .mitem .label{
  position: absolute;
  background:royalblue;
  padding:6px 12px;
  font-size:13px;
  font-weight: 600;
  left:0;
  top:0;
  z-index: 10;
  cursor: default;
}


.atomMarket .pbody .mitem .labelVersion{
  position: absolute;
  background:#FFDF36;
  color:black;
  padding:0px 10px;
  font-size:11px;
  font-weight: 600;
  left:0;
  top:28px;
  z-index: 10;
  cursor: default;
}

.atomMarket .pbody .mitem.featured{
  border-bottom:2px solid #FFDD00;
  -webkit-box-shadow: 0px 19px 35px -20px rgba(255, 115, 0, 0.7);
  box-shadow: 0px 19px 35px -20px rgba(255, 115, 0, 0.7);
}



.atomMarket .pbody .mitem.featured .labelInstalledNotify{
  background:#FFDD00;
  color:black;
}


.atomMarket .pbody .mitem.updating{
  border-bottom:2px solid rgba(1, 255, 115, 1);
  -webkit-box-shadow: 0px 19px 35px -20px rgba(0, 167, 69, 0.7);
  box-shadow: 0px 19px 35px -20px rgba(0, 167, 69, 0.7);
}

.atomMarket .pbody .mitem.updating .labelInstalledNotify{
  background:rgba(1, 255, 115, 1);
  color:black;
}

.atomMarket .pbody .mitem .labelInstalledNotify{
  position: absolute;
  background:royalblue;
  color:white;
  padding:0px 10px;
  font-size:8px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  right:0;
  bottom:0;
  z-index: 10;
  cursor: default;
}

.atomMarket .pbody .mitem .label sub{
  padding-left:2px;
  text-decoration: line-through;
  opacity:0.6;
}

.atomMarket .pbody .mitem .label sup{
  padding-left:2px;
  text-decoration: line-through;
  opacity:0.6;
}

.atomMarket .pbody .mitem .label .saleIcon{
  height:16px;
  width:16px;
  background:url('../img/icons/popup/market/flash.svg') no-repeat;
  background-size:contain;
  display:inline-block;
  vertical-align: middle;
  margin-top:-2px;
  margin-right:1px;
  margin-left:-7px;
  -webkit-animation: shake 2s ease-in-out infinite;
  animation: shake 2s ease-in-out infinite;
}


.atomMarket .pbody .mitem .icon{
  height:16px;
  width:16px;
  display:inline-block;
  vertical-align: middle;
  margin-left:5px;
}

.atomMarket .pbody .mitem .btn.free .icon{background:url('../img/icons/popup/market/freebie.svg') no-repeat;background-size:contain;}
.atomMarket .pbody .mitem .btn.update .icon{background:url('../img/icons/popup/market/update.svg') no-repeat;background-size:contain;}
.atomMarket .pbody .mitem .btn.buy .icon{background:url('../img/icons/popup/market/shopping_cart.svg') no-repeat;background-size:contain;}
.atomMarket .pbody .mitem .btn.try_free .icon{background:url('../img/icons/popup/market/download.svg') no-repeat;background-size:contain;}
.atomMarket .pbody .mitem .btn.link .icon{background:url('../img/icons/popup/market/link.svg') no-repeat;background-size:contain;filter: invert(1);-webkit-filter: invert(1); }



.atomMarket .pbody .mitem .btn{
  padding-top:4px;
  padding-bottom:4px;
  text-align:left;
  width:80px;
  transition:0.2s ease;
}

/* BTN FREE */
.atomMarket .pbody .mitem .btn.free{
  background-color:#F02951; 
  /*  */
  color:white;
  /* width:60px; */
}

.atomMarket .pbody .mitem .btn.free:hover{
  background-color:rgb(255, 57, 96); 
  color:white;
}

/* BTN UPDATE */
.atomMarket .pbody .mitem .btn.update{
  background-color:rgb(11, 167, 19); 

  color:white;
  /* width:60px; */
}

.atomMarket .pbody .mitem .btn.update:hover{
  background-color:rgb(17, 189, 26); 
  color:white;
}

/* BTN BUY */
.atomMarket .pbody .mitem .btn.buy{
  background-color:royalblue; 
  color:white;
  /* width:60px; */
}

.atomMarket .pbody .mitem .btn.buy:hover{
  background-color:rgb(90, 144, 245);
  color:white;
}

/* BTN TRY FREE */

.atomMarket .pbody .mitem .btn.try_free{
  background-color:rgb(54, 54, 54);
  color:white;
}

.atomMarket .pbody .mitem .btn.try_free:hover{
  background-color:rgb(77, 80, 83);
  color:white;
}

/* BTN LINK */
.atomMarket .pbody .mitem .btn.link{
  background-color:rgb(241, 241, 241);
  color:#272727;
}

.atomMarket .pbody .mitem .btn.link:hover .icon{filter:invert(0);-webkit-filter: invert(0);}
.atomMarket .pbody .mitem .btn.link:hover{
  background-color:#272727;
  color:#F1F1F1;
}

/* CONTENT */

.atomMarket .pbody .mitem .content{
  padding:3px;
}

.atomMarket .pbody .mitem .title{
  cursor: default;
  font-size:13px;
  font-weight: 600;
  float:left;
  max-width:230px;
}


.atomMarket .pbody .mitem .author{
  cursor: default;
}


.atomMarket .pbody .mitem .author strong{
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.atomMarket .pbody .mitem .author strong:hover{
  text-decoration: none;
}


/* .atomMarket .pbody .over-video img{
  filter: brightness(40%);
} */

.atomMarket .pbody .mitem.hovered .over-video img{
  filter: brightness(40%);
  -webkit-filter: brightness(40%);
}

.atomMarket .pbody .mitem.hovered .over-video .play_button{
  opacity:0.6;
}

.atomMarket .pbody .mitem.hovered .over-video .play_button:hover{
  opacity:1;
}

/* 
.atomMarket .pbody .mitem:hover img{
  filter: brightness(100%);
} */

.atomMarket .over-video{
  position: absolute;
  z-index: 5;
}

.atomMarket .pbody .mitem .videoBlock{
  width:280px;
  height:160px;
}

/* 
.atomMarket .over-video .play_button:hover{
  opacity:1;
} */

.atomMarket .over-video .play_button{
  cursor:pointer;
  transition:0.2s ease;
  /* opacity:0.6; */
  background:url('../img/overlays/play_circle.png') no-repeat;
  background-size: contain;
  width:80px;
  height:80px;
  /* display:block; */
  position: absolute;
  left:35%;
  top:25%;
  opacity:0;
  z-index: 7;
}

.atomMarket .pbody .mitem .hiddenContent{
  border-top:1px dotted rgb(63, 63, 63);
  display:none;
  margin-top:8px;
  margin-bottom:5px;
  position: absolute;
  background:white;
  left:0px;
  padding:5px;
  z-index:25;

  background: rgb(46, 46, 46);
  color:rgb(218, 218, 218);

  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;

  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.7);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.7);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.7);
  width:280px;
}

.atomMarket .pbody .mitem .hiddenContent p{
  font-size:9px;
  /* text-transform: uppercase; */
  letter-spacing: 0.5px;
  color:rgb(194, 194, 194);
  padding:3px;
  cursor: default;
}
.atomMarket .pbody .mitem .hiddenContent p i{
  font-weight: 600;
  font-size:10px;
  font-style:normal;
  color:white;
}

.atomMarket .pbody .mitem .hiddenContent p strong{
  font-weight: 600;
  font-size:10px;
  text-decoration: underline;
  transition:0.12s ease;
}
.atomMarket .pbody .mitem .hiddenContent p strong:hover{
  text-decoration: none;
  cursor: pointer;
  color:white;
}




.atomMarket .pbody .mitem .compatibles{

  font-size:13px;
  font-weight: 600;
  vertical-align:top;
  float:right;
  width:40px;

}

.atomMarket .pbody .mitem .compatibles .gi
{
  cursor: help;
  margin:0px;
  /* margin-bottom:2px;
  margin-left:2px; */
  /* float:right; */
  display:block;
  
}

.atomMarket .pbody .mitem .compatibles div[tooltip]{
  float:right;
  margin-left:2px;
}

.atomMarket .pbody .mitem .compatibles .gi.f{
  filter: opacity(50%) grayscale(100%);
  -webkit-filter: opacity(50%) grayscale(100%);
  transition:0.15s ease;
  cursor: pointer;
}
.atomMarket .pbody .mitem .compatibles .gi.f:hover{
  filter: opacity(100%) grayscale(0%);
  -webkit-filter: opacity(100%) grayscale(0%);
}



/* ATOM SETTGINS POBLOCK */
.atomSettings .pbody{
  padding:20px;
  cursor: default;
}
.atomSettings .pbody .setting_block{
  padding-top:15px;
}

.atomSettings .pbody h2 i{
  margin:10px;
  opacity:0.6;
}

.atomSettings .pbody .btn{
  padding:10px;
  display:inline-block;
  text-transform: uppercase;
  font-weight: 600;
  font-size:10px;
  letter-spacing: 1px;
  border:1px solid #FFDF36;
  color:white;
  cursor:pointer;
  transition:0.2s ease;
}

.atomSettings .pbody .btn:hover{
  background:#FFDF36;
  color:black;
}



/* VIDEO TUTORIALS POBLOCK */


/* bchead inside pbody */
.videoTutorials .pbody .bchead{
  padding:20px;
  cursor: default;
}

.videoTutorials .pbody .bchead .link{
  /* text-decoration: underline; */
  border-bottom:1px solid white;
  display:inline-block;
}

.videoTutorials .pbody .bchead .link:hover{
  border-bottom:1px dotted #777;
  cursor: pointer;
}

.videoTutorials .pbody .tutGroup{
  background:#222;
  padding:15px;
  font-size:13px;
  transition:0.2s ease;
  border-bottom:1px solid #333;
}

.videoTutorials .pbody .tutGroup .expand_btn{
  background:url('../img/icons/popup/arrow_right.svg') no-repeat;
  background-size:contain;
  width:20px;
  height: 21px;
  float:right;
  margin-top:-2px;
  transition:0.2s ease;
}

.videoTutorials .pbody .tutGroup.selected .expand_btn{
  transform: rotateZ(90deg);
  margin-right:5px;
}

.videoTutorials .pbody .tutGroup:hover .expand_btn{
  margin-right:5px;
}


.videoTutorials .pbody .tutGroup:hover
{
  cursor: default;
  background:#333;
  border-left:2px solid white;
}

.videoTutorials .pbody .tutGroup:active,
.videoTutorials .pbody .tutGroup.selected
{
  cursor: default;
  background:#111;
  border-left:2px solid white;
}

.videoTutorials .pbody .tutGroup sup{
  font-size:8px;
  font-weight: 600;
  text-transform: uppercase;
  padding:2px 4px;
  background:black;
  margin:3px;
  letter-spacing: 1px;
  display:inline-block;
}
.videoTutorials .pbody .tutGroup sup.red{background:rgb(255, 10, 43);}
.videoTutorials .pbody .tutGroup sup.blue{background:rgb(10, 88, 255);}
.videoTutorials .pbody .tutGroup sup.green{background:rgb(108, 255, 10);color:black;}
.videoTutorials .pbody .tutGroup sup.yellow{background:rgb(255, 239, 10);color:black;}

/* icons tut group */
.videoTutorials .pbody .tutGroup .i{
  width:15px;
  height:15px;
  display:inline-block;
  margin-right:5px;
}

.videoTutorials .pbody .tutGroup .i.video{background:url('../img/icons/popup/vtuts/video_camera.svg') no-repeat;background-size:contain;}
.videoTutorials .pbody .tutGroup .i.bind_pack{background:url('../img/icons/popup/vtuts/sun_star.svg') no-repeat;background-size:contain;}

.videoTutorials .pbody .tutItems{
  padding:15px;
}

.videoTutorials .pbody .tutItems ul{
  list-style-type: none;
  text-align: center;
}
.videoTutorials .pbody .tutItems li{
  border:2px solid rgb(37, 37, 37);
  margin:4px;
  display:inline-block;
  /* width:360px;
  height:240px; */
  background:rgb(39, 38, 38);
  transition:0.2s ease;
  position: relative;
}


.videoTutorials .pbody .tutItems li:hover{
  border:2px solid rgb(65, 65, 65);
}




.videoTutorials .pbody .tutItems li:hover .over-video .play_button{
  opacity:1;
}

.videoTutorials .pbody .tutItems li:hover .over-video .play_button:hover{
  transform:scale(1.2);
}

.videoTutorials .pbody .tutItems li:hover img{
  opacity:0.6;
}

.videoTutorials .pbody .tutItems li{
  overflow: hidden;
}

.videoTutorials .pbody .tutItems li img{
  position: relative;
  bottom:20px;
/* 
  top:-5.5rem;
  left:-4rem;
  transform:scale(0.89); */
}

/* 
.atomMarket .pbody .mitem:hover img{
  filter: brightness(100%);
} */

.videoTutorials .over-video{
  position: absolute;
  z-index: 5;
}

.videoTutorials .over-video .play_button{
  cursor:pointer;
  transition:0.2s ease;
  /* opacity:0.6; */
  background:url('../img/overlays/play_circle.png') no-repeat;
  background-size: contain;
  width:80px;
  height:80px;
  /* display:block; */
  position: absolute;
  left:36%;
  top:28%;
  opacity:0;
  z-index: 7;

}


/* First start carousel */
.firstStartCarousel{
  width:300px;
  margin:0 auto;
  top:10%;
  position: relative;
}

.firstStartCarousel ul{
  list-style: none outside none;
  padding-left: 0;
  margin-bottom:0;
}
/* .firstStartCarousel li {
  display: block;
  float: left;
  margin-right: 6px;
  cursor:pointer;
} */
.firstStartCarousel img {
  display: block;
  height: auto;
  max-width: 100%;
}


/* No package - get started screen */

.getStarted{

  position:relative;
  top:15%;
  width:300px;
  margin:0 auto;
  text-align:left;

}

.getStarted p a{
  text-decoration: underline;
  cursor: pointer;
  transition:0.2s;
  
}
.getStarted p a:hover{
  text-decoration: none;
  color:rgb(238, 238, 238);
}

.getStarted p.last{
  cursor: default;
  text-align:center;
  margin:4px;
  color:rgb(134, 134, 134);
}

.getStarted h1{
  opacity:0.5;
  font-size:19px;
  cursor: default;
}

.getStarted ul.linkList{
  padding-top:10px;
  list-style: none;

}

.getStarted ul.linkList li{
  border:1px solid rgb(128, 128, 128);
  /* padding:5px 20px; */
  cursor: pointer;
  transition:0.2s ease;
  margin:2px;
  background:#505050;
  display:inline-block;
  min-width:260px;
  width:295px;

}

.getStarted ul.linkList li:hover{
  background:#e2e2e2;
  color:#0c0c0c;
}

.getStarted ul.linkList li:hover .iconBlock .i{
  /* background:#303030; */
  -webkit-animation: dnd_roll 0.7s ease-in-out;
  animation: dnd_roll 0.7s ease-in-out;
}



.getStarted ul.linkList li .iconBlock{
  transition:0.2s ease;
  float:left;
  background:whitesmoke;
}

.getStarted ul.linkList li .iconBlock .i{
  width:56px;
  height:56px;
  margin:7px;
  display:block;
}
.getStarted ul.linkList li .iconBlock .i.browsePack{background:url('../img/icons/other/get_started/install_first_package.png') no-repeat;background-size:contain;}
.getStarted ul.linkList li .iconBlock .i.videoTuts{background:url('../img/icons/other/get_started/filmreel.png') no-repeat;background-size:contain;}
.getStarted ul.linkList li .iconBlock .i.market{background:url('../img/icons/other/get_started/download_in_market.png') no-repeat;background-size:contain;}

.getStarted ul.linkList li .dataBlock{
  display:inline-block;
  font-size:14px;

  margin:12px;


}

.getStarted ul.linkList li .dataBlock p{
  opacity:0.5;
}


/* INSTALLATION CODE VERIFY  */
.userBigTip{
  position: fixed;
  z-index:100; /* MAX OF CURRENT OTHER Z INDEXIES */
  background:rgba(27, 27, 27, 0.904);
  height:100%;
  width:100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display:none;
  opacity:1;
}


.userBigTip .contentWidth{
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.userBigTip .contentMiddle {
  display: table-cell;
  vertical-align: middle;
}

.userBigTip .content {
  margin:0 auto;
  width: 100%;
  background:#303030;
  /* padding:12px; */
  padding-top: 10px;
  padding-bottom:10px;
  -webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.4);

}

.userBigTip .content h1{
  font-size:17px;
  font-weight: 600;
  text-align: center;
  color:rgb(233, 233, 233);
  cursor: default;
  line-height: 32px;
}

.userBigTip .content h2{
  font-size:12px;
  font-weight: 600;
  text-align: center;
  color:rgb(175, 175, 175);
  line-height: 22px;
  cursor: default;

}


.userBigTip .content h3{
  font-size:14px;
  font-weight: 600;
  text-align: center;
  color:rgb(107, 107, 107);
  line-height: 22px;
  cursor: default;

}

.userBigTip .content strong{
  background:rgba(131, 131, 131, 0.479);
  color:white;
  padding:3px;
  font-size:12px;
  font-weight: 600;
  border-radius: 6px;
}


.tipIcon{
  width:270px;
  height: 160px;
  margin:0 auto;
  display:block;
}

.tipIcon.activeComp{
  background-image: url("../img/tips/selectActiveCompAE.gif");
  background-repeat: no-repeat;
  background-size:contain;
}


.tipIcon.noAccessPr_mac{
  background-image: url("../img/tips/changeAccessPr.png");
  background-repeat: no-repeat;
  /* background-size:contain; */
  /* width:551px; */
  width:430px;
  /* background-position: center center; */
  height: 175px;
}

.tipIcon.noAccessPr_win{
  background-image: url("../img/tips/noAccessPr_win.png");
  background-repeat: no-repeat;
}


.userBigTip .content .buttons{
  /* margin:10px auto; */
  text-align:center;
  padding:8px;
} 
.userBigTip .content .buttons.nonwide .btn{
  width:70px;
}


.userBigTip .content .buttons .btn{
  cursor:pointer;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -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);
  border:0;
  outline:0;
  padding:6px 8px;
  color:white;
  width:192px;
  margin:1px;
  transition:0.2s ease;
  text-transform: uppercase;
  font-size:10px;
  letter-spacing: 1px;
  font-weight: 600;
  /* border:2px solid #2196F3; */
  border:2px solid #00D125;
  display:inline-block;

}

.userBigTip .content .buttons .btn:hover{background:rgb(12, 161, 19);}


.userBigTip .content .buttons .btn.ok{
  border:2px solid #2196F3;
}

.userBigTip .content .buttons .btn.ok:hover{background:#2196F3;}


.userBigTip .content .buttons .btn:active{
  opacity:0.8;
}


/* INSTALLATION CODE VERIFY  */
.confirmMessage{
  position: fixed;
  z-index:100; /* MAX OF CURRENT OTHER Z INDEXIES */
  background:rgba(17, 17, 17, 0.9);
  height:100%;
  width:100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display:none;
  opacity:0.92;
}


.confirmMessage .contentWidth{
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.confirmMessage .contentMiddle {
  display: table-cell;
  vertical-align: middle;
}

.confirmMessage .content {
  margin:0 auto;
  width: 100%;
  background:rgb(0, 0, 0);
  padding:2px;
}

.confirmMessage .content sup{
  padding:2px;
  text-transform: uppercase;
  font-size:9.5px;
  font-weight: 600;
  color: #FFDD00;
}

.confirmMessage .content sub{
  font-size:9.5px;
  opacity:0.5;
  line-height: 10px;
  display:block;
}


.confirmMessage .content .table{
  margin:0 auto;
  text-align:left;
  padding:10px;
}

.confirmMessage .content .row{
  line-height: 30px;
}

.confirmMessage .content label{
  font-size:12px;
  min-width:170px;
}

.confirmMessage .content p{
  font-size:11px;
  /* font-weight: 100; */
  width:260px;

  margin:5px auto;
  padding:10px;
  /* border:1px solid red; */
}




.confirmMessage .content h1{
  padding:10px;
  cursor: default;
}

.confirmMessage .content p.first{
  font-size:11px;
  font-weight: 500;
  text-align:center;
  margin-top:-5px;
  cursor: default;
}

.confirmMessage .content p.last{
  border-top:1px solid rgb(27, 27, 27);
  font-size:11px;
  font-weight: 500;
  text-align:center;

}
.confirmMessage .content p.last label.labelBox{
  font-size:10px;
  margin:0px;
  opacity:0.5;
  transition:0.2s ease;
}

.confirmMessage .content p.last label.labelBox:hover{
  opacity:1;
}

.confirmMessage .content p.last label.labelBox.labelSetting span.checkmark{
  width:11px;
  height:11px;
  top:3px;
  left:28px;
  border:2px solid white;

  box-shadow:none;
}

.confirmMessage .content p.last label.labelBox.labelSetting input:checked ~ span.checkmark{
  background:white;
}


.confirmMessage .content p.last label.labelBox.labelSetting:hover input ~ span.checkmark{
  background:white;
  border:2px solid white!important;

}

.confirmMessage .content p.last label.labelBox.labelSetting span.checkmark:after{
  width:4px;
  height:7px;
  left:2px;
  top:0px;
  background:white;
}



.confirmMessage .content .buttons{
  /* margin:10px auto; */
  text-align:center;
  padding:5px;
} 
.confirmMessage .content .buttons.nonwide .btn{
  width:100px;
}


.confirmMessage .content .buttons .btn{
  cursor:pointer;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -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);
  border:0;
  outline:0;
  padding:6px 8px;
  color:white;
  width:192px;
  margin:1px;
  transition:0.2s ease;
  text-transform: uppercase;
  font-size:10px;
  letter-spacing: 1px;
  font-weight: 600;
  /* border:2px solid #2196F3; */
  border:2px solid #00D125;
  display:inline-block;

}

.confirmMessage .content .buttons .btn:hover{background:rgb(12, 161, 19);}


.confirmMessage .content .buttons .btn.delete{
  border:2px solid #2196F3;
}

.confirmMessage .content .buttons .btn.delete:hover{background:#2196F3;}

.confirmMessage .content .buttons .btn.cancel{
  border:2px solid #b4001e;
}

.confirmMessage .content .buttons .btn.cancel:hover{background:#b4001e;}



.confirmMessage .content .buttons .btn:active{
  opacity:0.8;
}




/* INSTALLATION CODE VERIFY  */
.verifyInstallationPack{
  position: fixed;
  z-index:100; /* MAX OF CURRENT OTHER Z INDEXIES */
  background:rgba(17, 17, 17, 0.9);
  height:100%;
  width:100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display:none;
  opacity:0.92;

}


/* design part inside width container */
.verifyInstallationPack .contentWidth{
  height:100%;
  width:275px;
  margin:0 auto;
  background:rgb(0, 0, 0);
  position: relative;

}

.verifyInstallationPack .contentWidth:before { /* Center vertically, part 1 */
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}


.verifyInstallationPack .content {
  display: inline-block;
  vertical-align: middle;
  width:270px;
  text-align:center;
  cursor: default;
}


.verifyInstallationPack .content p{
  font-size:11px;
  /* font-weight: 100; */
  width:210px;

  margin:10px auto;
  /* border:1px solid red; */
}


.verifyInstallationPack .content p.last{
  border-top:1px solid rgb(27, 27, 27);
  font-size:11px;
  font-weight: 500;
  /* width:200px; */

}


.verifyInstallationPack .content .hlink{
  opacity:0.4;
  transition:0.2s ease;
}

.verifyInstallationPack .content .hlink:hover{
  opacity: 1;
  cursor: pointer;
}

.verifyInstallationPack .content h1{
  margin:10px;
}

.verifyInstallationPack .content .msg{
  font-weight: 600;
  font-size:12px;
  color:rgb(255, 21, 13);
  display:none;
  position: absolute;
  margin:-15px auto;

  width:100%;
}


.verifyInstallationPack .content .msg.waiting{
  color: #FFDD00;
  -webkit-animation: infinite opacity_blink 1.4s;
  animation: infinite opacity_blink 1.4s;
}


.verifyInstallationPack input{
  margin-top:4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -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);
  border:0;
  outline:0;
  padding:8px 12px;
  color:white;
  width:180px;

  transition:0.2s ease;
  border:2px solid rgba(90, 90, 90, 1);

}

.verifyInstallationPack input:focus,
.verifyInstallationPack input:hover:focus
{
  border:2px solid #2196F3;
}

.verifyInstallationPack input:hover{
  border:2px solid #2196F3;
}



.verifyInstallationPack .content .buttons{
  /* width:350px; */
  /* margin:0 auto; */
  /* border:1px solid red; */
  margin-top:5px;
}

.verifyInstallationPack .content .buttons .btn{
  cursor:pointer;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -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);
  border:0;
  outline:0;
  padding:6px 8px;
  color:white;
  width:82px;
  margin:1px;
  transition:0.12s ease;
  text-transform: uppercase;
  font-size:10px;
  letter-spacing: 1px;
  font-weight: 600;
  /* border:2px solid #2196F3; */
  border:2px solid #2196F3;
  display:inline-block;
}

.verifyInstallationPack .content .buttons .btn:hover{
  background:#2196F3;
}

.verifyInstallationPack .content .buttons .btn:active{
  opacity:0.8;
}


.verifyInstallationPack .content .buttons .btn.cancel{
  border:2px solid rgb(180, 0, 30);
}


.verifyInstallationPack .content .buttons .btn.cancel:hover{
  background:rgb(180, 0, 30);
}




/* PACKAGE MANAGER */
/* popup show container */
.packageManager{
  position: fixed;
  z-index:50;
  background:rgba(17, 17, 17, 0.5);
  height:100%;
  width:100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display:none;
  opacity:0.92;
/* 
  text-align:center;
  margin:0 auto; */
}


/* design part inside width container */
.packageManager .contentWidth{
  height:100%;
  width:365px;
  margin:0 auto;
  background:rgb(46, 46, 46); 
  position: relative;

}

.packageManager .contentWidth:before { /* Center vertically, part 1 */
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;

}
.packageManager .content {
  display: inline-block;
  vertical-align: middle; /* Center vertically, part 2 */

  width:360px;

}

.packageManager .close {
  position: absolute;
  top:0;
  /* right:0; */
  left:0;
  

  margin:10px;

  width: 32px;
  height: 32px;
  opacity: 0.6;
  cursor: pointer;
  transition: 0.35s;
}
 .packageManager .close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.packageManager .close:before, .packageManager .close:after {
  position: absolute;
  left: 15px;

  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #fff;
}

.packageManager .close:before {
  transform: rotate(45deg);
}

.packageManager .close:after {
  transform: rotate(-45deg);
}


/* content container */
/* .packageManager .content{
  position: relative;
  top:50%;
  transform: translateY(-50%);



} */

.packageManager div.statusLine{
  border-left:2px solid white;
  height:33px;
  margin:9px -5px;
  /* position: absolute; */
  float:left;
}

.packageManager div.titleHeading{
  margin-bottom:12px;
  font-size:12px;
  font-weight: 600;
  text-transform: uppercase;
  /* display: table; */
  letter-spacing: 0.5px;
  text-align:center;
  cursor:default;
}

.packageManager div.titleHeading p{
  font-size:8.5px;
  opacity:0.4;
}

.packageManager div.titleHeading a{
  font-size:8.5px;
  text-decoration: underline;
}

.packageManager div.titleHeading a:hover,
.packageManager div.titleFooter a:hover
{
  text-decoration: none;
  cursor: pointer;
}

.packageManager div.titleFooter{
  cursor:default;
  margin-top:12px;
  font-size:11px;
  text-align:center;
  letter-spacing: 0.2px;
  opacity:0.5;
}

.packageManager div.titleFooter a{
  font-size:11px;
  text-decoration: underline;
}

.packageManager .btn_install{
  /* position: absolute;
  bottom:10%; */
	/* position: absolute; */

  /* bottom:0; */
  margin:0 auto;
  text-align:center;

  font-size:11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


.packageManager h3 p{
  font-size:10px;
  opacity:0.6;
}

.packageManager .no_packages{
  text-align:center;
  cursor: default;
}

.packageManager .no_packages a{
  border-bottom:1px dotted white;
  cursor: pointer;
}

.packageManager .no_packages a:hover{
  border-bottom:1px solid white;
}

.packageManager .no_packages p{
  opacity:0.6;
}

.packageManager .no_packages .boxLogo{
  background:url('../img/atom_no_packs.svg') no-repeat;
  background-size:contain;
  width:80px;
  height:80px;
  margin:10px auto;
  -webkit-animation: dnd_roll 2.6s ease-in-out infinite;
  animation: dnd_roll 2.6s ease-in-out infinite;
}

.packageManager .no_packages .boxLogo.testModeActive{
  background:url('../img/atom_test_mode_active.svg') no-repeat;
  background-size:contain;
  width:80px;
  height:80px;
  margin:10px auto;
  -webkit-animation: dnd_roll 2.6s ease-in-out infinite;
  animation: dnd_roll 2.6s ease-in-out infinite;
}

.packageManager .no_packages h4.ye{
  color: #FFDD00;
}

.packageManager .no_packages h4{
  font-size:12px;
  font-weight: 600;
  opacity:1;
}

.packageManager .ulContent{
  padding-top:18px;
  padding-bottom:18px;
  /* min-height: 320px;; */
  /* height: 100%; */

  max-height:300px;
  -webkit-box-shadow: 0px 0px 36px -4px rgba(0,0,0,0.55);
  -moz-box-shadow: 0px 0px 36px -4px rgba(0,0,0,0.55);
  box-shadow: 0px 0px 36px -4px rgba(0,0,0,0.55);
}




.packageManager .splitTopLine{
  border-top:1px solid #4b4b4b;
  width:80%;
  margin:0 auto;
}


.packageManager li{
  /* display:none; */
  margin:5px auto;
  content: "";
  display: table;
  clear: both; 
}
/* current pack stylish */
.packageManager li.currentPack .packDetails{
  background:#f0f0f0;
  color:black;

}

.packageManager li.currentPack:hover .packDetails{
  color:white;
  /* background:rgb(95, 95, 95); */
}

.packageManager li.currentPack .packDetails .author{
  color:rgb(63, 63, 63);
}

.packageManager li.currentPack:hover .packDetails .author{

  color:#999;
}


.packageManager li:hover .packDetails{
  background:rgba(32, 32, 32, 0.4);
  cursor:default;
  width:240px;
}
.packageManager li:hover .managerButtons{
  display:block;
  margin-left:4px;

}






/* Pack Details [packageManager] */
.packageManager .packDetails{
  color:white;
  float:left;
  width:220px;
  padding:11px;
  border-radius: 5px;
  background:rgba(32, 32, 32, 0.9); 
  border:1px solid #333;
  transition:0.2s ease;

}


/* icons_sector (right) */
.packageManager .icons_sector{
  vertical-align:top;
  float:right;
  width:40px;
}


.packageManager .icons_sector .gi{
  cursor:help;
  margin:0px;
  margin-bottom:2px;
  margin-left:2px;
  float:right;
  display:block;
}


/* info sector (left) */
.packageManager .info_sector{
  float:left;
  width:170px;
  /* border:1px solid red; */
}

.packageManager .info_sector .name{
  font-size:12px;
  font-weight: 600;
}

.packageManager .info_sector .author{
  font-size:10px;
  color:#999;
}

.packageManager .info_sector .author strong{
  font-weight: 600;
  text-decoration: underline;
}

.packageManager .info_sector .author strong:hover{
  color:white;
  text-decoration: none;
  cursor: pointer;
}


/* Manage Buttons (right) packDetails */
.packageManager .managerButtons{
  float:right;
  display:none;
  margin-left:-70px;
  /* padding:5px; */
  margin-top:6px;
  /* height:41px; */
  /* background:rgba(32, 32, 32, 0.9); */
  /* border:1px solid #333; */
  border-radius: 5px;
}

/* .packageManager .managerButtons:hover{
  background:rgba(32, 32, 32, 0.4); 
} */

.packageManager .managerButtons .btn{
  margin-left:2px;
  padding:7px;
  /* background:rgba(32, 32, 32, 0.9);  */
  transition:0.2s ease;
  cursor: pointer;
  opacity:0.6;
}

.packageManager .managerButtons .btn:hover{
  opacity:1;
}

.packageManager .managerButtons .btn.apply{
  height:37px;
  width:42px;
  padding:0;
}

.packageManager .managerButtons .btn.small_btns{
  height:17px;
  width:18px;
  padding:0;
  margin-bottom:3px;
}

.packageManager .managerButtons .i{
  width:30px;
  height:16px;
}
.packageManager .managerButtons .i.apply_pack{
  height:40px;
  width:40px;
  background:url('../img/icons/other/apply_package.svg') no-repeat;
  background-size:contain;
}
.packageManager .managerButtons .i.remove_pack{
  width:18px;
  height:18px;
  background:url('../img/icons/other/remove_package.svg') no-repeat;
  background-size:contain;
}
.packageManager .managerButtons .i.similar_pack{
  width:18px;
  height:18px;
  background:url('../img/icons/other/similar_package.svg') no-repeat;
  background-size:contain;
}





/* ELEMENTS (PREVIEW ITEM) */

.element{
  margin:0px;
  /* border:1px solid blue; */
  /* display:inline-block; */
  float:left;
  position: relative;
  border:1px solid #2e2e2e;
}

.element.pinBorder{
  border:1px solid #FFE032;
  transition:0.3s ease;
}

.element.pinBorder .pinFavoriteInside{
  background:url('../img/icons/item/favorite_pin.svg') no-repeat;
  background-size: contain;
  width:30px;
  height: 32px; 
  position: absolute;
  top:-3px;
  left:3px;
}
.element:hover .pinFavoriteInside{
  /* visibility: hidden; */
  /* top:-20px; */
  /* height: 20px; */
  background-position-y:-22px;
  transition:0.3s ease;
}

.element.not_found{
  cursor:no-drop;
  pointer-events: none;
}

/* Resolutions for previews (aspect ratio and width) */
/* Default */
.element[res="DEFAULT"] img,
.element[res="DEFAULT"] .body
{
  width:240px;
}
.element[res="DEFAULT"] .body .title{
  width:150px;
}

/* Vertical Aspect Ratio 2:1 */
.element[res="VERTICAL"] img,
.element[res="VERTICAL"] .body
{
  width:135px;
}
.element[res="VERTICAL"] .body .title{
  width:50px;
  font-size:8px;
}

/* Box Max aspect ratio 1:1 full */
.element[res="BOX_MAX"] img,
.element[res="BOX_MAX"] .body
{
  width:240px;
}
.element[res="BOX_MAX"] .body .title{
  width:150px;
}

/* Box Min aspect ratio 1:1 half */
.element[res="BOX_MIN"] img,
.element[res="BOX_MIN"] .body
{
  width:135px;
}
.element[res="BOX_MIN"] .body .title{
  width:50px;
  font-size:8px;
}

/* Element Image Tag */
.element img{
  display:block;
  width:240px;
  transition:0.2s ease;
}


.element .overlay_TP{
  width:100%;
  height:100%;
  position: absolute;
  display:none;
  z-index: 2;
  cursor:pointer;
  -webkit-animation: infinite 2s shake;
  animation: infinite 2s shake;
}

.element .overlay_TP .inside{
  position: relative;

  background:rgba(0, 0, 0, 0.8);

  top:15%;
  height:70%;
  font-size:12px;
  color:white;
  text-align: center;
  margin-left:10px;
  margin-right:10px;
  text-transform: uppercase;
}


.element .overlay_TP .inside h1{

  font-size:25px;
  font-weight: 600;
}

.element .overlay_TP .inside p{
  height:30%;
}

.element .body{
  
  width:240px;
  position: absolute;
  display:none;
  top:0;
  box-shadow: inset 0px 55px 45px -45px rgba(0,0,0,0.50);
}

/* Control buttons for element to apply/edit */
.element .applyControls{
  position: absolute;
  /* left:0; */
  right: 0;
  bottom:-8px;
  left:10px;
  opacity:0;
  transition: 0.2s ease;
  text-align: center;
  z-index:2;

}

.element:hover .applyControls{
  opacity:1;
  left:0;
}

.element .applyControls:hover{
  opacity:1;
}

/* button icons */
.element .applyControls .button .icon{
  width:15px;
  height:15px;
  display:inline-block;
  vertical-align: middle;
  margin-right:3px;
  margin-left:3px;
  margin-top:-1px;
}

/* create icon */
.element .applyControls .button .icon.create{background:url('../img/icons/item/create_item_unfill.svg') no-repeat;background-size:contain;}
.element .applyControls .button:hover .icon.create{background:url('../img/icons/item/create_item_fill.svg') no-repeat;background-size:contain;}

/* add icon */
.element .applyControls .button .icon.add{background:url('../img/icons/item/add_item_unfill.svg') no-repeat;background-size:contain;}
.element .applyControls .button:hover .icon.add{background:url('../img/icons/item/add_item_fill.svg') no-repeat;background-size:contain;}

/* add icon */
.element .applyControls .button .icon.removeTp{background:url('../img/icons/item/remove_customizer_tp_unfill.svg') no-repeat;background-size:contain;}
.element .applyControls .button:hover .icon.removeTp{
  /* filter:invert(100%);
  -webkit-filter: invert(100%); */
  background:url('../img/icons/item/remove_customizer_tp_fill.svg') no-repeat;background-size:contain;
}

/* presets icons in/out/both */

.element .applyControls .button .icon.presetIn{background:url('../img/icons/item/presets_in.svg') no-repeat;background-size:contain;}
.element .applyControls .button:hover .icon.presetIn{
  filter:invert(100%);
  -webkit-filter: invert(100%);
}

.element .applyControls .button .icon.presetOut{background:url('../img/icons/item/presets_out.svg') no-repeat;background-size:contain;}
.element .applyControls .button:hover .icon.presetOut{
  filter:invert(100%);
  -webkit-filter: invert(100%);
}

.element .applyControls .button .icon.presetInOut{background:url('../img/icons/item/presets_in_out.svg') no-repeat;background-size:contain;}
.element .applyControls .button:hover .icon.presetInOut{
  filter:invert(100%);
  -webkit-filter: invert(100%);
}



/* button style in controls */
.element .applyControls .button{
  font-size:9px;
  /* letter-spacing: 0.5px; */
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  border-radius: 2px;
  padding: 6px 8px;
  box-shadow: 0px 5px 3px 0px rgba(0,0,0,0.10);
  background-color: #FFE032; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFE032), to(#E8CC2D));
  background-image: -webkit-linear-gradient(top, #FFE032, #E8CC2D);
  background-image: -moz-linear-gradient(top, #FFE032, #E8CC2D);
  background-image: -ms-linear-gradient(top, #FFE032, #E8CC2D);
  background-image: -o-linear-gradient(top, #FFE032, #E8CC2D);
  background-image: linear-gradient(to bottom, #FFE032, #E8CC2D);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFE032, endColorstr=#E8CC2D);
  color: black;
  border: 1px solid #BEA725; 
  transition-duration: 0.15s;
}

.element .applyControls .button:hover{
  border: 1px solid #3F494F;
  color:white;
  cursor: pointer;
  background-color: #3F494F; background-image: -webkit-gradient(linear, left top, left bottom, from(#3F494F), to(#0e0e0e));
  background-image: -webkit-linear-gradient(top, #3F494F, #0e0e0e);
  background-image: -moz-linear-gradient(top, #3F494F, #0e0e0e);
  background-image: -ms-linear-gradient(top, #3F494F, #0e0e0e);
  background-image: -o-linear-gradient(top, #3F494F, #0e0e0e);
  background-image: linear-gradient(to bottom, #3F494F, #0e0e0e);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3F494F, endColorstr=#0e0e0e);
}

/* more one button - left */
.element .applyControls .button:first-child {
  margin-right: -4px;
}
/* one button */
.element .applyControls .button:only-child {
  margin-left:0;
  margin-right:0;
}
/* more one button - right */
.element .applyControls .button:last-child {
  margin-left: -4px;
}



/* left side for title */
.element .body .title{

  cursor: default;
  float:left;
  vertical-align: middle;
  color:white;
  font-size:10px;
  padding:10px;
  transition: 0.2s ease;
  text-shadow: 1px 1px 4px rgba(150, 150, 150, 1);
  width:150px;
}
/* right side for buttons */
.element .body .usage{
  float:right;
  right:0;
  margin:0 auto;
  position: absolute;
  vertical-align: middle;
  width:50px;
  padding:6px;
}
/* any buttons style */
.element .body .usage .btn{
  margin:2px;
  width:18px;
  height:20px;
  display:inline-block;
  cursor: pointer;
  
}
/* for info buttons */
.element .body .usage .btn.info_message{cursor: help;}
.element .body .usage .btn.favorite{float:right;}

/* favorite btn */
.element .body .usage .btn.favorite
{
  background:url('../img/icons/item/star_default.svg') no-repeat;
  background-size:contain;
}



.element .body .usage .btn.favorite.active:hover{
  background:url('../img/icons/item/star_remove.svg') no-repeat;
  background-size:contain;
}

.element .body .usage .btn.favorite.active, 
.element .body .usage .btn.favorite:hover
{
  background:url('../img/icons/item/star_active.svg') no-repeat;
  background-size:contain;
}
/* item options icons */
.element .body .usage .btn.threeD{background:url('../img/icons/item/item_options/threeD.svg') no-repeat;background-size:contain;}
.element .body .usage .btn.puzzlePart{background:url('../img/icons/item/item_options/puzzlePart.svg') no-repeat;background-size:contain;}
.element .body .usage .btn.diamondPick{background:url('../img/icons/item/item_options/diamondPick.svg') no-repeat;background-size:contain;}
.element .body .usage .btn.plugIn{background:url('../img/icons/item/item_options/plugIn.svg') no-repeat;background-size:contain;}
.element .body .usage .btn.pen{background:url('../img/icons/item/item_options/pen.svg') no-repeat;background-size:contain;}
.element .body .usage .btn.pen2{background:url('../img/icons/item/item_options/pen2.svg') no-repeat;background-size:contain;}
.element .body .usage .btn.winnerCup{background:url('../img/icons/item/item_options/winnerCup.svg') no-repeat;background-size:contain;}
.element .body .usage .btn.arrow{background:url('../img/icons/item/item_options/arrow.svg') no-repeat;background-size:contain;}
.element .body .usage .btn.info{background:url('../img/icons/item/item_options/info.svg') no-repeat;background-size:contain;}




/* FOOTER */

#footer{

  background:#222;
  border-top:1px solid #333;
  height: 38px;

  width: 100%;
  z-index: 2;
  position: absolute;
  bottom:0;
}

/* SPECIAL DEBUG BUTTONS */
#footer .debugButtons{

  background:rgba(24, 24, 24, 0.9);
  position: absolute;
  -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);
  z-index:20;
  bottom:35px;

  transition:ease 0.2s;
  display:none;
  /* display:block!important; */
  min-height: 35px;
  width:100%;
  text-align:center;
  cursor: default;
}
#footer .debugButtons .border{
  padding:5px;
  margin-bottom:10px;
}

#footer .debugButtons .console{
  padding:5px;
}

#footer .debugButtons .dnd{
  float:left;
  padding:4px;
  border:1px dotted rgb(122, 122, 122);
}

#footer .debugButtons div[data-btn][disabled]{
  opacity:0.4;
  pointer-events: none;
}

#footer .debugButtons div[data-btn]{
  font-weight: 600;
  font-size:12px;
  float:left;
  padding:3px 5px;
  margin:2px;
  color:rgb(32, 32, 32);
  background: rgb(22, 255, 243);
  border-radius: 2px;
  -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:0.2s ease;
}

#footer .debugButtons div[data-btn]:hover{
  color:white;
  background: rgba(0, 0, 0, 0.25);
  cursor:pointer;
}

#footer .debugButtons div[data-btn='hide']{
  background:rgba(235, 235, 235, 0.767);
  color:rgb(26, 26, 26);
  float:right;
}


#footer .debugButtons input[name="devTerminal"]{
  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: 2px;
  outline: none;
  border-radius: 4px;
  background: #777;
  background-size: 13px 13px;
  color: white;
  /* transition: 0.2s ease width, background-color, color; */
  width:100%;
  font-size: 11px;
}

#footer .debugButtons input[name="devTerminal"]::placeholder {
  color: rgb(216, 216, 216);
}

#footer .debugButtons input[name="devTerminal"]:focus::placeholder {
  color: rgb(117, 117, 117);
}

#footer .debugButtons input[name="devTerminal"].result {
  -webkit-animation: opacity_blink 1.6s linear infinite;
  animation: opacity_blink 1.6s linear infinite;
  background: rgba(0, 134, 40, 0.575);
  color: white;
  border: 2px solid rgb(33, 238, 77);
}

/* TEST MODE BUTTONS */
#footer .testMode{

  background:rgba(24, 24, 24, 0.9);
  position: absolute;
  -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);
  z-index:20;
  bottom:48px;
  right:8px;
  padding:8px 8px;
  transition:ease 0.2s;
  display:none;
  /* display:block!important; */

  width:115px;
  text-align:center;
  cursor: default;
}


#footer .testMode p{
  -webkit-animation: opacity_blink 1.6s linear infinite;
  animation: opacity_blink 1.6s linear infinite;
  color:red;
  cursor: pointer;
  font-size:14px;
  font-weight: 600;
  border:1px solid red;
  /* display:none; */
}

#footer .testMode .testButtons{
  display:none;

}

#footer .testMode .testButtons .cbtn{
  font-weight: 600;
  float:left;
  padding:3px 5px;
  margin-left:1px;
  margin-right:1px;
  color:white;
  cursor:pointer;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  -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:0.2s ease;
}

#footer .testMode .testButtons .cbtn:hover{
  color:black;
  background: rgba(255, 251, 12, 0.979);
}

#footer .testMode .testButtons .cbtn.disable:hover{
  color:white;
  background: rgba(255, 20, 12, 0.979);
}

#footer ul{
  margin:8px;
  list-style-type: none;
}

#footer ul li{
  float:left;
  transition:ease 0.2s;
  margin:4px;
  
}

#footer ul li:hover{
  opacity:1;
  cursor:pointer;
  background:#222;
}

#footer li.info_footer_text,
#footer li.info_footer_text:hover{
  cursor: default;
  opacity: 0.7;
  /* display:none; */
}

#footer li.info_footer_text span.ye_attention{
  font-size:10px;
  font-weight: 600;
  color:#FFE032;
}

#footer li.info_footer_text span.faded{
  opacity:0.5;
}

#footer .notifyUpdating{
  position: absolute;
  top:-5px;
  left:-5px;
  border-radius: 25px;
  background:#FFDF36;
  color:black;
  padding:0px 5px;
  z-index:10;
  cursor: pointer;
  font-weight: 600;
}

#footer .notifyUpdating.normal{background:#FFDF36;color:black;}
#footer .notifyUpdating.critical{background:red;color:white;}


#footer .icon{
  width:15px;
  height: 15px;
  display:block;
  opacity:0.4;
  transition:ease 0.2s;
}


#footer ul li:hover .icon{
  opacity:1;
}

#footer .icon span{
  width:15px;
  height: 15px;
  display:block;
}

/* default */
#footer .icon.previewAutoPlay{background:url('../img/icons/footer/preview_play.svg');background-size:contain;}
#footer .icon.audioVolume{background:url('../img/icons/footer/sound_on.svg');background-size:contain;}
#footer .icon.previewLess{background:url('../img/icons/footer/p_less.svg');background-size:contain;}
#footer .icon.previewMore{background:url('../img/icons/footer/p_more.svg');background-size:contain;}

#footer .icon.updateNotify{background:url('../img/icons/footer/atom.svg');background-size:contain;}

#footer .icon.autoFitPreview{background:url('../img/icons/footer/auto_fit_preview_off.svg');background-size:contain;}

/* is active */
#footer .icon.previewAutoPlay.active{background:url('../img/icons/footer/preview_pause.svg');background-size:contain;}
#footer .icon.audioVolume.active{background:url('../img/icons/footer/sound_off.svg');background-size:contain;}
#footer .icon.autoFitPreview.active{background:url('../img/icons/footer/auto_fit_preview_on.svg');background-size:contain;}


/* FOOTER ASSETS */

/* audio input range container */
#footer .audioVolumeRangeContainer{
  display:none;
  position: relative;
/*   top:3px;
  left:72px; */
  top:-25px;
  left:15px;
  z-index: 10;
  background:#222222;
  width:100px;
}

/* preview range input */
#footer .previewRangeInput{
  margin-top:-2px;
}









/*CUSTOMIZER TAB SPOILERS*/

ul.tabs-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top:1px solid rgb(66, 66, 66);
}

ul.tabs-nav li {
  background: #333;
  color: #8b9098;

  font-size: 11px;
  font-weight: 600;

  min-height:35px;


  line-height: 32px;

  float: left;
  text-align: center;
  text-transform: uppercase;

  -webkit-box-shadow: 0px 9px 16px 0px rgba(0,0,0,0.20);
  -moz-box-shadow: 0px 9px 16px 0px rgba(0,0,0,0.20);
  box-shadow: 0px 9px 16px 0px rgba(0,0,0,0.20);
  width:50%;
  white-space: nowrap; 
  transition:0.2s ease;
}

ul.tabs-nav li.tab-active,
ul.tabs-nav li.tab-active:hover{
  background: hsl(0, 100%, 100%);
  border-bottom-color: hsla(0, 0%, 0%, 0);
  color: black;
  cursor: default;
}

ul.tabs-nav li:hover{
  color:#ddd;
  background: #222;
  cursor: pointer;
}

.tabs-stage {
  border-top: 0;
  clear: both;
}
/* First div element - hide content */
.tabs-stage > div{
  display:none;
}


.tabs-stage small{

  font-size:9px;
  font-weight: 600;
  opacity:0.5;
  width:100%;

  cursor: default;
}

.tabs-stage .btnOpenCustomizer{
  text-transform: uppercase;
  text-align:center;
  border:2px solid white;
  font-size:9px;
  font-weight: 600;
  /* width:60%; */
  /* min-width:60%; */
  width:180px;

  padding:4px;
  margin:0 auto;
  opacity:0.3;
  transition:0.2s ease;
  letter-spacing: 0.5px;
  margin-bottom:10px;
  margin-top:10px;
}

.tabs-stage .btnOpenCustomizer:hover{
  cursor: pointer;
  opacity:1;
  background:#FFE032;
  color:black;
  border:2px solid #FFE032;
}

/* Text Editor */
ul.customizeElement.textEditor{
  padding-top:7px;
  /* text-align:center; */
}

ul.customizeElement.textEditor .btnEditTextOrigin{

  background:url('../img/icons/composer_customizer/editTextOrigin.svg') no-repeat;
  background-size: contain;
  width:20px;
  height:20px;
  opacity:0.4;
  transition:0.2s ease;
  /* display:inline-block; */
  margin:5px;
  padding-bottom:4px;
  vertical-align: bottom;
  white-space: nowrap; 

}

ul.customizeElement.textEditor .btnEditTextOrigin:hover{
  opacity:1;
  cursor: pointer;
}

ul.customizeElement.textEditor li{
  padding-bottom:4px;
  padding-top:4px;
  border:0;
  display: table;

}
ul.customizeElement.textEditor li .tableCell{
  display: table-cell;
  width: 100%;
  padding-left:25px;

}

ul.customizeElement.textEditor li textarea{
  border:0;
  outline:0;
  background: url('../img/icons/composer_customizer/font.svg') no-repeat 8px 7px rgba(0, 0, 0, 0.25);
  background-size:16px 16px;
  border-radius: 6px;
  -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);
  resize: vertical;
  padding:8px 12px;
  color:white;
  min-height:15px;
  height: 15px;
  max-height: 100px;
  width:100%;

  margin-left:-25px;
  padding-left:30px;
  border:2px solid transparent;

  transition:0.2s ease;

}

ul.customizeElement.textEditor li textarea:focus,
ul.customizeElement.textEditor li textarea:hover:focus
{
  border:2px solid #2196F3;
}

ul.customizeElement.textEditor li textarea:hover{
  border:2px solid rgba(90, 90, 90, 1);
}


/* Default */
ul.customizeElement li{
  padding:10px;
  /* border:1px solid red; */
  border-bottom:1px dotted #333;
  display:block;
}

ul.customizeElement li .title{
  /* display:inline-block; */
  /* text-align:center; */
  /* text-transform: uppercase; */
  padding:5px;
  font-weight: 600;
  cursor: default;

}

ul.customizeElement .icon{
  display:inline-block;
  padding-top:-4px;
  padding-right:5px;
  width:16px;
  height:16px;
  opacity:0.6;
}

ul.customizeElement .icon.color{background:url('../img/icons/composer_customizer/color.svg') no-repeat;background-size:contain;}
ul.customizeElement .icon.control{background:url('../img/icons/composer_customizer/control.svg') no-repeat;background-size:contain;}
ul.customizeElement .icon.point3d{background:url('../img/icons/composer_customizer/point3d.svg') no-repeat;background-size:contain;}
ul.customizeElement .icon.point{background:url('../img/icons/composer_customizer/point.svg') no-repeat;background-size:contain;}
ul.customizeElement .icon.slider{background:url('../img/icons/composer_customizer/slider.svg') no-repeat;background-size:contain;}
ul.customizeElement .icon.angle{background:url('../img/icons/composer_customizer/angle.svg') no-repeat;background-size:contain;}
ul.customizeElement .icon.shuffle{background:url('../img/icons/composer_customizer/shuffle.svg') no-repeat;background-size:contain;height:18px;}
/* ul.customizeElement .icon.font{background:url('../img/icons/composer_customizer/font.svg') no-repeat;background-size:contain;} */

/* Customizer Block */

ul.customizeElement li .block{
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -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);
  padding:5px;
  margin-bottom:4px;

}

/* Small for sliders */
ul.customizeElement small{
  position: relative;
  bottom:-10px;

}




/* ul.customizeElement li .block.colors div{
  margin-bottom:2px;
}*/


ul.customizeElement li .block.colors div{
  /* width:50%; */
  float:left;
}

/* Multisliders for positions customizer */
/* XY - two sliders */
ul.customizeElement li .block .multiSlidersXY input[type="range"]{
  float:left;
  width:49%;
  margin-right:1%;
}
/* XYZ - three sliders */
ul.customizeElement li .block .multiSlidersXYZ input[type="range"]{
  float:left;
  width:32.3%;
  margin-right:1%;
}

/* special button (used for text presets customizer) */
ul.customizeElement li .block .btn{
  text-shadow: 0 -1px 2px rgba(0,0,0,.2);
  box-shadow:
   0 1px rgba(255,255,255,.2) inset,
   0 3px 5px rgba(0,1,6,.2),
   0 0 1px 1px rgba(0,1,6,.2);
  margin:0;
  padding:0;
  border:0;
  outline: none;
  float:left;
  text-align:center;
  vertical-align: middle;
  width:100%;
  padding-top:7px;
  padding-bottom:7px;
  cursor:pointer;
  transition:0.2s ease;
  font-weight: 600;
}

ul.customizeElement li .block .btn sup{
  font-weight: 500;
}


ul.customizeElement li .block .btn:hover{
  background:rgb(102, 65, 238);
}


ul.customizeElement li .block .btn:first-child{border-radius: 6px 0 0 6px;}
ul.customizeElement li .block .btn:last-child{border-radius: 0 6px 6px 0;}
ul.customizeElement li .block .btn:only-child{border-radius: 6px;}


ul.customizeElement li .block.colors input[type="text"]{
  
  text-shadow: 0 -1px 2px rgba(0,0,0,.2);
  box-shadow:
   0 1px rgba(255,255,255,.2) inset,
   0 3px 5px rgba(0,1,6,.2),
   0 0 1px 1px rgba(0,1,6,.2);
  margin:0;
  padding:0;
  border:0;
  outline: none;

  /* display: block; */
  /* min-width:35px; */
  width:100%;
  
  height:25px;
  font-size: 0;
  cursor:pointer;
  transition:0.2s ease;
  /* border-radius: 50%; */
  /* border-radius: 6px; */
  /* line-height: 0; */
}
ul.customizeElement li .block.colors input[type="text"]:hover{
  opacity:0.8;
}

ul.customizeElement li .block.colors div:first-child input {border-radius: 6px 0 0 6px;}
ul.customizeElement li .block.colors div:last-child input {border-radius: 0 6px 6px 0;}
ul.customizeElement li .block.colors div:only-child input {border-radius: 6px;}









/* Console Panel Message */
.console_panel{
  z-index: 10000;
  position: absolute;
  top:0;left:0;
  display:none;
  width:100%;
}
.console_panel textarea{
  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: 9px;

  background: rgb(185, 185, 185);
  width:100%;
  color: rgb(17, 17, 17);

  font-size: 11px;
}

.console_panel textarea:focus{
  color:white;
  background: #585858;
}

.console_panel textarea.result.green {
  background: rgba(0, 134, 40, 1);
  color: white;
  border: 2px solid rgb(33, 238, 77);
}
.console_panel textarea.result.red {
  background: rgb(163, 0, 0);
  color: white;
  border: 2px solid rgb(238, 33, 33);
}