/*
-- ==============================================================================
-- Author:  Prakash.Shanmugam
-- Create Date: 29-04-2022
-- Description: Zoho Vault Product Tour

-- Dependency:
-- ********************
-- Type             Responsible By              Called By
-- Page             Prakash.Shanmugam           Database History

-- Modification History:
-- ********************
-- Date             Modified By                 Change Description
   27/04/2022		    Prakash.S					          Created styles for product tour
   06/07/2022		    Prakash.S					          Added variable(root) type css
-- ==============================================================================
*/
/*$Id$*/
:root {
  --tourBorderColorWhite:#ffffff;
  --tourBorderColorGray:#E5E5E5;
  --tourBgColorWhite:#ffffff;
  --tourShadowColorWhite:#ffffff;
  --tourTextColorWhite:#ffffff;
  --tourTextColorBlack:#000000;
  --tourTextColorBlackLight:#4b4b4b;
  --tourTextColorBlackLighter:#5e6468;
  --tourStrokeColorWhite:#ffffff;
  --tourStrokeColorBlack:#000000;
  --tourFillColorWhite:#ffffff;
  --tourFillColorBlack:#000000;
}
.tourbus-legs { display: none; }
.tourbus-leg {
  position: absolute;
  visibility: hidden;
  top: 0;
  border: 1px solid var(--tourBorderColorGray);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  background: var(--tourBgColorWhite);
}
.tourbus-leg-inner { padding: 20px; position: relative; zoom: 1; }
.tourbus-leg-inner:before,
.tourbus-leg-inner:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.tourbus-leg-inner:after { clear: both; }
.tourbus-leg h3 { margin-bottom: 10px; padding-top: 0; font-size: 20px; line-height: 30px; color: var(--tourTextColorBlack); }
.tourbus-leg h5 { margin-bottom: 10px; padding-top: 0; font-size: 16px; line-height: 25px; color: var(--tourTextColorBlackLight); }
.tourbus-leg-inner p { color: var(--tourTextColorBlackLight); }
.tourbus-arrow:before,
.tourbus-arrow:after {
  border: solid rgba(0, 0, 0, 0);
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
}
.tourbus-arrow:after { border-width: 14px; }
.tourbus-arrow:before { border-width: 16px; }
.tourbus-arrow-right:after { border-right-color: var(--tourBorderColorWhite); margin-top: -14px; top: 50%; }
.tourbus-arrow-left:after { border-left-color: var(--tourBorderColorWhite); margin-top: -14px; top: 50%; }
.tourbus-arrow-bottom:after { border-bottom-color: var(--tourBorderColorWhite); margin-left: -14px; left: 50%; }
.tourbus-arrow-top:after {
  border-top-color: var(--tourBorderColorWhite);
  margin-left: -14px;
  left: 50%;
}
.tourbus-arrow-right:before {
  border-right-color: var(--tourBorderColorGray);
  margin-top: -16px;
  top: 50%;
}
.tourbus-arrow-left:before {
  border-left-color: var(--tourBorderColorGray);
  margin-top: -16px;
  top: 50%;
}
.tourbus-arrow-bottom:before {
  border-bottom-color: var(--tourBorderColorGray);
  margin-left: -16px;
  left: 50%;
}
.tourbus-arrow-top:before {
  border-top-color: var(--tourBorderColorGray);
  margin-left: -16px;
  left: 50%;
}
.tourbus-arrow-right:after,
.tourbus-arrow-right:before { right: 100%; }
.tourbus-arrow-left:after,
.tourbus-arrow-left:before { left: 100%; }
.tourbus-arrow-bottom:after,
.tourbus-arrow-bottom:before { bottom: 100%; }
.tourbus-arrow-top:after,
.tourbus-arrow-top:before { top: 100%; }
.intro-tour-overlay {
  background: rgba(0, 0, 0, 0.82);
  opacity: 1;
  display: none;
  z-index: 9997;
  min-height: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.tour-skip {
  top: 15px;
  right: 20px;
  position: absolute;
  color: var(--tourTextColorBlackLighter);
  font-size: 12px;
  text-transform: uppercase;
}
.tourbus-next span { color: var(--tourTextColorWhite); }
.container .ten.columns { width: 840px; }
.tourbus-leg { box-shadow: 0 4px 8px 4px rgb(0 0 0 / 20%); border-radius: 5px; }
.intro-tour-highlight { 
  position: relative; 
  pointer-events: none;
  padding: 0px; 
  z-index: 9998;  
  animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; 
}
/*.intro-tour-highlight::after {
  content: "";
  background: #fff;
  position: absolute;
  left: -10px;
  top: -10px;
  right: -10px;
  bottom: -10px;
  margin: auto;
  z-index: -1;
}*/
.welcome-leg{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: none !important;
}
.tourbus-count-panel { display: flex; justify-content: flex-start; align-items: center; }
.tourbus-count-numbers { color: var(--tourTextColorBlackLighter); font-weight: bold; }
.tourbus-count-progress {
  width: 120px;
  height: 5px;
  background: var(--bg-gray-light);
  border-radius: 5px;
  position: relative;
  margin-left: 10px;
}
.tourbus-count-progress-inner {
  background: var(--primaryThemeColor);
  height: 5px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}
.tourbus-end {
  position: absolute;
  top: 100% !important;
  left: 100% !important;
  opacity: 0;
  transition: 0.5s ease-in;
}
.left-nav-intro-tour-highlight,
.right-nav-intro-tour-highlight { pointer-events: none; z-index: 9998 !important; }
.right-nav-intro-tour-highlight { background: transparent; border:none; }
.right-nav-intro-tour-highlight ul.right-side-bar-list li { opacity: 0.02; }
.left-nav-menu ul li.intro-tour-highlight { background: var(--tourBgColorWhite); }
.left-nav-menu ul li.intro-tour-highlight a { color: var(--tourTextColorBlack); }
.left-nav-menu ul li.intro-tour-highlight a .svg-line-color,
.intro-tour-highlight .left-nav-menu ul li a:hover .svg-line-color { stroke: var(--tourStrokeColorBlack); }
.left-nav-menu ul li.intro-tour-highlight a .svg-fill-color,
.intro-tour-highlight .left-nav-menu ul li a:hover .svg-fill-color { fill: var(--tourFillColorBlack); }
.intro-tour-highlight .left-nav-menu ul li a:hover { color: var(--tourTextColorBlack); }
.left-nav-menu ul li.intro-tour-highlight a.active-menu,
.left-nav-menu ul li.intro-tour-highlight a.active-menu:before { background: none !important;}

.tour-left-arrow { float: left; position: relative; padding-left: 15px; height: 1px; display: inline-flex; align-items: center; }
.tour-left-arrow:after { 
  content: "\e979"; 
  font-family: var(--font-vault); 
  position: absolute;
  left: -4px;
  font-size: 15px;
}
.tour-right-arrow { float: right; position: relative; padding-right: 15px; height: 1px; display: inline-flex; align-items: center; }
.tour-right-arrow:after { 
  content: "\e977"; 
  font-family: var(--font-vault); 
  position: absolute;
  right: -4px;
  font-size: 15px;
}

/*======== Tour Highlight ========*/
.settings-panel-column .intro-tour-highlight { 
  background:var(--tourBgColorWhite); 
  box-shadow: 0px 0px 0px 20px var(--tourShadowColorWhite); 
  border-radius: 2px; 
  padding:10px; 
}
.password-tree-list .intro-tour-highlight,
.audit-left-accordion-list .intro-tour-highlight,
.settings-left-accordion-list .intro-tour-highlight { 
  background: var(--tourBgColorWhite); 
  border-radius: 5px; 
  box-shadow: 0px 0px 0px 0px var(--tourShadowColorWhite); 
}
div.settings-left-accordion-list-header.intro-tour-highlight,
div.audit-left-accordion-list-header.intro-tour-highlight { 
  background: var(--tourBgColorWhite); 
  border-radius: 5px; 
  box-shadow: 0px 0px 0px 0px var(--tourShadowColorWhite); 
  padding: 10px 10px; 
}
lyte-tab-title.lyteTabActive.intro-tour-highlight {
  border:none;
  background: var(--tourBgColorWhite);
  border-radius: 5px;
  box-shadow: 0px 0px 0px 0px var(--tourShadowColorWhite);
}
button.export.intro-tour-highlight { margin-right: 5px; }
.vault-tabs-horizontal li.intro-tour-highlight,
.vault-tabs-horizontal li a.intro-tour-highlight,
ul.breadcrumbs li.intro-tour-highlight {
  box-shadow: 0px 0px 0px 10px var(--tourShadowColorWhite);
  border-radius: 1px;
  background: var(--tourBgColorWhite);
}
.vault-tabs-horizontal li.intro-tour-highlight,
.vault-tabs-horizontal li a.intro-tour-highlight { border: none !important; padding: 1px 7px 1px 7px !important; }
.vault-tabs-horizontal li.intro-tour-highlight a { border: none !important; padding: 0; }
.helpdesk-list.intro-tour-highlight aside { background: var(--tourBgColorWhite); }
img.intro-tour-highlight { box-shadow: 0px 0px 0px 13px var(--tourShadowColorWhite); }
.right-nav-intro-tour-highlight ul.right-side-bar-list li.intro-tour-highlight { 
    opacity:1 !important; 
    background: var(--tourBgColorWhite);
    box-shadow: 0px 0px 0px 9px var(--tourShadowColorWhite);
    border-radius: 1px; 
}
a.btn.intro-tour-highlight,
button.btn.intro-tour-highlight,
lyte-td.intro-tour-highlight { box-shadow: 0px 0px 0px 9px var(--tourShadowColorWhite); border-radius: 1px; }

/*** wcag works ***/
button.tourbus-prev, button.tourbus-next { display:inline-flex; align-items: center; }

/*======== Skin White ========*/
.skin-white .left-nav-menu ul li.intro-tour-highlight { background: var(--primaryThemeColor); }
.skin-white .left-nav-menu ul li.intro-tour-highlight a { color: var(--tourTextColorWhite); }
.skin-white .left-nav-menu ul li.intro-tour-highlight a .svg-line-color { stroke: var(--tourStrokeColorWhite) !important; }
.skin-white .left-nav-menu ul li.intro-tour-highlight a .svg-fill-color { fill: var(--tourFillColorWhite) !important; }

/*======== Animation ========*/
.scale-up-center { animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }
 @-webkit-keyframes scale-up-center {
  0% {
      transform: scale(0.5);
  }
  100% {
       transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
      transform: scale(0.5);
  }
  100% {
        transform: scale(1);
  }
}