/* BTN */

.button-group{
  display:flex;
  gap:25px;
	position: relative;
	
	&.button-group-column{
		flex-direction:column;
		width:400px;
		gap:20px;
	}
	
	&.button-group-15{
		gap:15px !important;
	}
}

.single-episodio.button-group{
  display:flex;
  gap:25px;
  position: fixed !important;
  bottom:110px;
  left:20px;
  z-index: 9999999999999999999999999999999999999999999999999999;
}

.button{
	color: #000;
	text-decoration: none;
	font-family: var(--sg-font);
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	display: inline-flex;
	padding: 5px 40px 5px 20px;
	align-items: center;
	gap: 10px;
	border-radius: 3px;
	background: #FFF;
	border:0px;
	
	&.button-gray{
		background: var(--sg-button-gray);
		color: #FFF;
	}
	
	&.button-purple{
		background: var(--sg-purple);
		color: #FFF;
	}
	
	&:before{
		height:32px;
		width:32px;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	
	&.button-play:before{
		content: url("images/play_arrow.svg");
	}
	
	&.button-play-black:before{
		content: url("images/play_arrow_black.svg");
	}
	
	&.button-movie:before{
		content: url("images/movie.svg");
	}
	
	&.button-plus:before{
		content: url("images/add_box.svg");
	}
	
	&.button-close:before{
		content: url("images/close_small.svg");
	}
	
	&.button-episodio:before{
		content: url("images/auto_awesome_motion.svg");
	}
	
	&.button-back:before{
		content: url("images/back-icon.svg");
		/*! background-color: red; */
	}
	
	&.button-download:before{
		content: url("images/download.svg");
	}
	
	&.button-edit:before{
		content: url("images/edit.svg");
	}
	
	&.button-cronicas:before{
		content: url("images/icon-cronicas.svg");
	}
	
	&.button-ideias:before{
		content: url("images/icon-theater_comedy.svg");
	}
	
	&.button-next:before{
		content: url("images/keyboard_tab.svg");
	}
	
	&.button-movie-info:before{
		content: url("images/movie_info.svg");
	}
	
	&.button-undo:before{
		content: url("images/undo.svg");
	}
	
	&.button-info:before{
		content: url("images/icon-info.svg");
	}
	
	&.button-login:before{
		content: url("images/login.svg");
	}
	
	&.button-account:before{
		content: url("images/account_circle.svg");
	}
	
	&.button-hand:before{
		content: url("images/touch_app.svg");
	}
	
	&.button-back-black:before{
		content: url("images/back-icon-black.svg");
	}

	&.button-drafts:before{
		content: url("images/drafts.svg");
	}
	
	&.button-account-circle:before{
		content: url("images/account_circle.svg");
	}
	
	&.button-keyboard-keys:before{
		content: url("images/keyboard_keys.svg");
	}
	
	&.button-key_vertical:before{
		content: url("images/key_vertical.svg");
	}
}

.button-share-group{
	width: 380px;
	height: 50px;
	flex-shrink: 0;
	border-radius: 100px;
	background: #333;
	box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.50);
	display:flex;
	gap:10px;
	justify-content:center;
	align-items:center;
	position:absolute;
	left: 60px;
	top:0px;
	visibility: hidden;
	opacity: o;buttons
	transition: all 0.3s ease;
	z-index: 9999999999999999999999999;
	
   & a{
      display:flex;
      justify-content: center;
      align-items: center;
      border-radius:40px;
      top:0px;
      left:0px;
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      transition:all 0.3s ease;
     
      &:hover{
        background-color: rgba(255,255,255,0.2) !important;
      }
    }
  
  & img{
    width:22px;
    height:22px;
  }
  
	&.visible{
		visibility: visible;
		opacity:1;
	}
		
}

.button-like-group{
	width: 160px;
	height: 50px;
	flex-shrink: 0;
	border-radius: 100px;
	background: #333;
	box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.50);
	display:flex;
	gap:10px;
	justify-content:center;
	align-items:center;
  position:absolute;
	left: 105px;
  top:-5px;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s ease;
	
	&.visible{
		visibility: visible;
		opacity:1;
	}
	
  & .button-round{
    border:0px !important;
    transition: all 0.3s ease;
    
    &:hover{
      border:0;
      cursor:pointer;
    	background-color: rgba(255,255,255,0.2) !important;
    }
  }
		
}

.button-round{
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border:3px solid rgba(255,255,255,0.5);
	border-radius:100px;
	position: relative;
	transition:border 0.3s ease;
	
	&:hover{
		border:3px solid rgba(255,255,255,1);
		cursor:pointer;
	}
  
	
	&:after{
		position:absolute;
		top:-3px;
		left:-3px;
    content: url("images/add_box_white.svg");
		display: block;
		width: 42px;
		height: 42px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	&.button-add:after{
		content: url("images/add_box_white.svg");
	}

	&.button-bookmark:after{
		content: url("images/bookmark_white.svg");
	}

	&.button-bookmark_ok:after{
		content: url("images/bookmark_added.svg");
	}

	&.button-check:after{
		content: url("images/check.svg");
	}

	&.button-download:after{
		content: url("images/download_white.svg");
	}

	&.button-audio-off:after{
		content: url("images/icon-audio-off.svg");
	}

	&.button-audio-on:after{
		content: url("images/icon-audio-on.svg");
	}

	&.button-info:after{
		content: url("images/icon-info-white.svg");
	}

	&.button-share:after{
		content: url("images/ios_share.svg");
	}

	&.button-alert:after{
		content: url("images/notifications.svg");
	}

	&.button-alert-ok:after{
		content: url("images/notifications_active.svg");
	}

	&.button-play:after{
		content: url("images/play_arrow_white.svg");
	}
	
	&.button-play-black:after{
		content: url("images/play_arrow_black.svg");
	}

	&.button-trask:after{
		content: url("images/remove-icon.svg");
	}

	&.button-like:after{
		content: url("images/thumb_up.svg");
	}

	&.button-indice:after{
		content: url("images/unfold-index-icon.svg");
	}
	
	&.button-thumb:after{
		content: url("images/thumb_down.svg");
	}
	
	&.button-love:after{
		content: url("images/volunteer_activism.svg");
	}
	
	&.button-back-black:after{
		content: url("images/back-icon-black.svg");
	}

}

.tooltip-inner {
	background-color: var(--sg-text-white) !important;
	color: var(--sg-black) !important;
	border-radius:var(--sg-border-radius) !important;
	text-align: center;
	font-family: var(--sg-font);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.bs-tooltip-bottom .arrow::before, 
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
	border-bottom-color: white !important;
}

.bs-tooltip-auto .tooltip-arrow::before, 
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
	border-top-color: white !important;
}