/*
	The Team Management Custom CSS is for guides that display outside the context of a knowledge base.
	This affects:
		1.	A guide loaded in a widget with the Content Type set to ""Article", "Guide" or "Guided tour". For an example,
			see the "PROD - How to Launch Glide Health Help - Banner" widget.
		2.	The guide editor preview pane and when previewing an unpublished guide in a new window.
*/

/* ONTADA PRODUCTS */
  /* CONTENT FEEDBACK */
    /* Align Right 
      [class*="ContentRating__Canvas"] {
        align-items: flex-end;
      }
    */

  /* TIPS AND WARNINGS */
  .content-text aside.tip {
    border-color: #1E394E !important;
		border-left-width: 16px !important;
    background-color: #F2F6FA !important;
  }
	.content-text aside.tip:before {
    content: url(https://stonly.com/resources/icons/tip.svg);
    filter: brightness(0) invert(1);
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
	}
	
  .content-text aside.warning {
    border-color: #FF5B42 !important;
		border-left-width: 16px !important;
    background-color: #F9E6CF !important;
  }
	.content-text aside.warning:before {
    content: url(https://stonly.com/resources/icons/warning.svg);
    filter: brightness(0) invert(1);
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
	}

	*, *:before, *:after {
			box-sizing: inherit;
	}


	/* NEXT STEPS */
		/* In-Line */
			a[data-step-connection-id] {
				transition: background-color 0.2s, color 0.2s !important;
				background-color: rgba(0, 124, 193, 0.06) !important;
				color: rgb(0, 124, 193) !important;
			}
			a[data-step-connection-id]:hover {
				transition: background-color 0.2s, color 0.2s !important;
				background-color: rgb(0, 124, 193) !important;
				color: rgb(255, 255, 255) !important;
			}

		/* Tiles */
			/* Tile Default State */
				a.tile {
					background-color: #FFFFFF;
					border: 1px solid #007CC1;
					color:#007CC1;
				}
				/* Tile Image */
					a.tile img, a.tile svg {
						-webkit-filter: sepia(1) hue-rotate(165deg) saturate(300%);
						filter: sepia(1) hue-rotate(165deg) saturate(300%);
					}

			/* Tile Hover State */
				a.tile:hover {
					border: 1px solid #00669E;
					color: #00669E;
					background-color: #F6F2FA;
				}
				/* Tile Image */
					a.tile:hover img, a.tile:hover svg, img[alt="external link"] {
						-webkit-filter: sepia(1) hue-rotate(165deg) saturate(300%) brightness(82%);
						filter: sepia(1) hue-rotate(165deg) saturate(300%) brightness(82%);
					}

		/* Buttons */
			/* Buttons Default State */
				.button-wrap button, [class*="Button__Canvas"] button {
					background: #ffffff;
					border: 1px solid #007CC1;
					border-radius: 6px;
					color: #007CC1;
				}

			/* Buttons Hover State */
				.button-wrap button:hover, [class*="Button__Canvas"] button:hover {
					background: #007CC1;
					border: 1px solid #007CC1;
					color: #ffffff;
				}

			/* Back Button Default State */
				.button-wrap .back-button, [class*="Button__Canvas"] .back-button {
					padding: 0px 7px;
					background: #ffffff;
					border: 1px solid #627386;
					border-radius: 6px;
					fill: #627386;
				}

			/* Back Button Hover State */
				.button-wrap .back-button:hover, [class*="Button__Canvas"] .back-button:hover {
					background: #1E394E;
					border: 1px solid #1E394E;
					color: #ffffff;
				}

			/* Back Button Hover State Arrow Color */
				.button-wrap .back-button:hover svg path, [class*="Button__Canvas"] .back-button:hover svg path {
					fill: #ffffff;
				}

		/* Drop-downs */
			/* Drop-down Default State */
				.ston-dropdown-trigger {
					outline: 1px solid #007CC1;
				}
				.ston-dropdown-trigger > span {
					color: #007CC1;
				}

			/* Drop-down Hover State */
				.ston-dropdown-trigger:hover {
					outline: 2px solid #00669E;
				}
				.ston-dropdown-trigger:hover > span {
					color: #00669E;
				}

  /* MEDIA */
		/* Previous and Next Arrow Image Default Pulse Effect */
			[class*="IllustrationImage__StyledPrevGalleryButton"], [class*="IllustrationImage__StyledNextGalleryButton"] {
				box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
				transform: scale(1) !important;
				animation: pulse 2s infinite !important;
				background-color: rgb(0, 124, 193) !important;
			}
			@keyframes pulse {
				0% {
					transform: scale(0.95);
					box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
				}

				70% {
					transform: scale(1);
					box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
				}

				100% {
					transform: scale(0.95);
					box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
				}
			}
		
		/* Previous and Next Arrow Image Hover Pulse Effect */
			[class*="IllustrationImage__StyledPrevGalleryButton"]:hover, [class*="IllustrationImage__StyledNextGalleryButton"]:hover {
				box-shadow: 0 0 0 0 rgba(255, 0, 0, 1) !important;
			}

	/* CHANGE TABLE CONTENT */
		/* Content Width is 100% */
      [class*="Steps-styles__ContentWrap"] {
        width: 100%;
        padding-right:0;
        padding-left:0;
      }

		/* Table Width is 100% */
			[class*="Steps-styles__ContentWrap"] table {
				 width: 100% !important;
			}
		
		/* Table Column Width is 50 pixels */
			[class*="Steps-styles__ContentWrap"] table td {
				 min-width: 50px !important;
				 max-width: 50px !important;
			}
		
		/* Table Column Header Colors */
			[class*="Steps-styles__ContentWrap"] table th {
				background-color: #1D577B !important;
				color: white !important;
			}

  /* HIDE SPECIFIC NEXT STEP TILES */ 
		[mode="widget"][data-step-id="4916658"] [class~="stepNextTile-23458346"] /* Practice Preferences Key */,
		[mode="widget"][data-step-id="4916866"] [class~="stepNextTile-24165196"] /* Note Macros Key */ {
			display: none !important;
		}