﻿.tutorial-popover {    
    height:auto;
    position:absolute;
    z-index:3000;
}

.tutorial-popover.pipeline {
    top: 0;
    left: 150px;
}

.tutorial-popover.pipeline .popover {   
    width: 300px; 
}

.tutorial-popover .popover {
    height: auto;
    width: 300px;
    font-size: 12px;
}

.tutorial-popover .popover-inner {
    height: auto;
    width:100%;
}

.tutorial-popover .popover-content {
    height: auto;
    width:100%;
}

.tutorial-popover .tutorial-content {
    display:inline-block;
    width:80%;
}

.tutorial-popover .title {
    color: #62cc34;
    font-weight: bold;
    font-size:14px;
}

.tutorial-popover .text {
   margin-top:5px;
}

.tutorial-popover .action {
   margin-top:10px;
   color: #459921;
   font-weight: bold;
   cursor: pointer;
}

.tutorial-popover .icon-container {
    width:40px;
    display:inline-block;
    vertical-align:top;
}

.tutorial-popover .icon i {
    color: #459921;
    font-size: 18px;
    margin:6px;
}

.tutorial-popover .icon {

    border-radius: 50% 50%;
    background-color: #bee3af;
    border: 1px solid #bee3af;
    width: 32px;
    height: 32px;
    animation: grow 1.5s 1.5s infinite;     
}



@keyframes grow {
  0%  { transform: scale(.8); }
  49% { transform: scale(1); }
  50%  { transform: scale(1); } 
  100% { transform: scale(.8); }
}

.tutorial-popover .dismiss-icon {
    border-radius: 50% 50%;
    width:24px;
    height:24px;
    position: absolute;
    top:5px;
    right:10px;
    background-color: #fafafa;
    cursor: pointer;   
    padding: 4px 8px;
}

.tutorial-popover .dismiss-icon i {
    color: #666666;
}


.tutorial-popover .dismiss-icon:hover {
    background-color: #f2f2f2;
}