:root {
  --youtube-red: #FE0900;
}

@keyframes slideOpen{
  from { width: 100px;}
  to { width: 500px; }
}

.custom_hidden{
  display:none;
}

.custom_color_white{
  color: white !important;
}

.custom_color_black{
  color: black !important;
}

.custom_color_red{
  color: red !important;
}

.custom_color_blue{
  color: blue !important;
}

.custom_color_green{
  color: green !important;
}

.custom_color_yellow{
  color: yellow !important;
}

.custom_color_aqua{
  color: aqua !important;
}

.custom_color_beige{
  color: beige !important;
}

.custom_color_cyan{
  color: cyan !important;
}

.custom_color_lime{
  color: lime !important;
}

.custom_color_magenta{
  color: magenta !important;
}

.custom_color_orange{
  color: orange !important;
}

.custom_color_purple{
  color: purple !important;
}

.custom_font_bold{
  font-weight: bold !important;
}

.custom_font_normal{
  font-weight: normal !important;
}

.custom_fontsize_large{
  font-size: 20pt !important;
}

.custom_fontsize_big{
  font-size: 15pt !important;
}

.custom_fontsize_medium{
  font-size: 11pt !important;
}

.custom_fontsize_small{
  font-size: 8pt !important;
}

.custom_border_red{
  border: solid 2px red !important;
}

.custom_border_black{
  border: solid 2px black !important;
}

.custom_border_white{
  border: solid 2px white !important;
}

.custom_border_green{
  border: solid 2px green !important;
}

.custom_border_blue{
  border: solid 2px blue !important;
}

.custom_border_yellow{
  border: solid 2px yellow !important;
}

.custom_border_aqua{
  border: solid 2px aqua !important;
}

.custom_border_beige{
  border: solid 2px beige !important;
}

.custom_border_cyan{
  border: solid 2px cyan !important;
}

.custom_border_lime{
  border: solid 2px lime !important;
}

.custom_border_magenta{
  border: solid 2px magenta !important;
}

.custom_border_orange{
  border: solid 2px orange !important;
}

.custom_border_purple{
  border: solid 2px purple !important;
}

.custom_padding_big{
  padding: 3%;
  margin: 3%;
}

.custom_padding_medium{
  padding: 2%;
  margin: 2%;
}

.custom_padding_small{
  padding: 1%;
  margin: 1%;
}

.custom_margin_begin_tiny{
  margin-left: 0.3em;
}

.custom_margin_end_tiny{
  margin-right: 0.3em;
}

.custom_margin_top_tiny{
  margin-top: 0.3em;
}

.custom_margin_bottom_tiny{
  margin-bottom: 0.3em;
}

/* Move Element */
.customMoveToLeft5px{
  transform: translate(-5px);
}
.customMoveToLeft10px{
  transform: translate(-10px);
}
.customMoveToLeft15px{
  transform: translate(-15px);
}
.customMoveToLeft20px{
  transform: translate(-20px);
}
.customMoveToLeft25px{
  transform: translate(-25px);
}
.customMoveToLeft1rem{
  transform: translate(-1rem);
}
.customMoveToLeft2rem{
  transform: translate(-2rem);
}
.customMoveToLeft3rem{
  transform: translate(-3rem);
}
.customMoveToLeft4rem{
  transform: translate(-4rem);
}
.customMoveToLeft5rem{
  transform: translate(-5rem);
}

.customMoveToRight5px{
  transform: translate(5px);
}
.customMoveToRight10px{
  transform: translate(10px);
}
.customMoveToRight15px{
  transform: translate(15px);
}
.customMoveToRight20px{
  transform: translate(20px);
}
.customMoveToRight25px{
  transform: translate(25px);
}
.customMoveToRight1rem{
  transform: translate(1rem);
}
.customMoveToRight2rem{
  transform: translate(2rem);
}
.customMoveToRight3rem{
  transform: translate(3rem);
}
.customMoveToRight4rem{
  transform: translate(4rem);
}
.customMoveToRight5rem{
  transform: translate(5rem);
}

.customMoveUpwards5px{
  transform: translate(0,-5px);
}
.customMoveUpwards10px{
  transform: translate(0,-10px);
}
.customMoveUpwards15px{
  transform: translate(0,-15px);
}
.customMoveUpwards20px{
  transform: translate(0,-20px);
}
.customMoveUpwards25px{
  transform: translate(0,-25px);
}
.customMoveToUpwards1rem{
  transform: translate(0,-1rem);
}
.customMoveToUpwards2rem{
  transform: translate(0,-2rem);
}
.customMoveToUpwards3rem{
  transform: translate(0,-3rem);
}
.customMoveToUpwards4rem{
  transform: translate(0,-4rem);
}
.customMoveToUpwards5rem{
  transform: translate(0,-5rem);
}
.customMoveToUpwards6rem{
  transform: translate(0,-6rem);
}
.customMoveToUpwards7rem{
  transform: translate(0,-7rem);
}
.customMoveToUpwards8rem{
  transform: translate(0,-8rem);
}
.customMoveToUpwards9rem{
  transform: translate(0,-9rem);
}
.customMoveToUpwards10rem{
  transform: translate(0,-10rem);
}

.customMoveDownwards5px{
  transform: translate(0,5px);
}
.customMoveDownwards10px{
  transform: translate(0,10px);
}
.customMoveDownwards15px{
  transform: translate(0,15px);
}
.customMoveDownwards20px{
  transform: translate(0,20px);
}
.customMoveDownwards25px{
  transform: translate(0,25px);
}
.customMoveToDownwards1rem{
  transform: translate(0,1rem);
}
.customMoveToDownwards2rem{
  transform: translate(0,2rem);
}
.customMoveToDownwards3rem{
  transform: translate(0,3rem);
}
.customMoveToDownwards4rem{
  transform: translate(0,4rem);
}
.customMoveToDownwards5rem{
  transform: translate(0,5rem);
}
.customMoveToDownwards6rem{
  transform: translate(0,6rem);
}
.customMoveToDownwards7rem{
  transform: translate(0,7rem);
}
.customMoveToDownwards8rem{
  transform: translate(0,8rem);
}
.customMoveToDownwards9rem{
  transform: translate(0,9rem);
}
.customMoveToDownwards10rem{
  transform: translate(0,10rem);
}

.rotate90deg{
  transform: rotate(90deg);
}
.rotate180deg{
  transform: rotate(180deg);
}
.rotate270deg{
  transform: rotate(270deg);
}

.customMoveToLeft5px,.customMoveToLeft10px,.customMoveToLeft15px,.customMoveToLeft20px,.customMoveToLeft25px,
.customMoveToRight5px,.customMoveToRight10px,.customMoveToRight15px,.customMoveToRight20px,.customMoveToRight25px,
.customMoveUpwards5px,.customMoveUpwards10px,.customMoveUpwards15px,.customMoveUpwards20px,.customMoveUpwards25px,
.customMoveDownwards5px,.customMoveDownwards10px,.customMoveDownwards15px,.customMoveDownwards20px,.customMoveDownwards25px{
  z-index: 10;
  position: relative;
}

/* Background */
.customBackgroundSoSaffron {
  background-color: #fdd782 !important;
}
.customBackgroundPinkPirouette {
  background-color: #ffd8d1 !important;
}
.customBackgroundBlushingBride {
  background-color: #f3b631 !important;
}
.customBackgroundSoftSky {
  background-color: #cee8e5 !important;
}
.customBackgroundPoolParty {
  background-color: #a9ddc7 !important;
}
.customBackgroundMintMacaron {
  background-color: #a4c8a5 !important;
}
.customBackgroundPowderPink {
  background-color: #fcdbd5 !important;
}
.customBackgroundLemonLimeTwist {
  background-color: #e3e350 !important;
}
.customBackgroundCucumberCrush {
  background-color: #56ae35 !important;
}
.customBackgroundPeekabooPeach {
  background-color: #f9aa6b !important;
}
.customBackgroundLightGray {
  background-color: #d3d3d3 !important;
}
.customBackgroundSilver {
  background-color: #c3c7c7 !important;
}
.customBackgroundGraphite {
  background-color: #594d58 !important;
}
.customBackgroundPastel {
  background-color: #cccdc6 !important;
}
.customBackgroundFrench {
  background-color: #bfbdc1 !important;
}
.customBackgroundCharcoal {
  background-color: #36454f !important;
}
.customBackgroundIce {
  background-color: #bec3c6 !important;
}
.customBackgroundOslo {
  background-color: #878d91 !important;
}

/* Button bigger*/
.sapUiSizeCompact .customButtonBigger.sapMBtn .sapMBtnInner{
	height: 2rem !important;
	font-size: 1.0rem !important;
  padding-left: 0.2rem !important;
	padding-right: 0.5rem !important;
}
.sapUiSizeCompact .customButtonBigger.sapMBtn .sapMBtnInner .sapMBtnContent{
	line-height: 1.9rem !important; 
}
.customButtonBigger.sapMBtn .sapMBtnIcon{
	line-height: 1.9rem !important; 
	max-height: 1.9rem !important; 
	font-size: 1.0rem !important;
	padding-right: 0.8rem !important;
  padding-left: 0.4625rem;
}

/* Button big*/
.sapUiSizeCompact .customButtonBig.sapMBtn .sapMBtnInner{
	height: 3rem !important;
	font-size: 1.3rem !important;
  padding-left: 0.7rem !important;
	padding-right: 0.5rem !important;
}
.sapUiSizeCompact .customButtonBig.sapMBtn .sapMBtnInner .sapMBtnContent{
	line-height: 2.9rem !important; 
}
.customButtonBig.sapMBtn .sapMBtnIcon{
	line-height: 2.8rem !important; 
	max-height: 2.8rem !important; 
	font-size: 1.3rem !important;
	padding-right: 0.8rem !important;
}

/* Button white */
.customButtonTextWhite.sapMBtn .sapMBtnInner{
	color: #ffffff !important;
}
.customButtonBgWhite.sapMBtn .sapMBtnInner{
	background-color: #ffffff !important;
}
.customButtonIconWhite.sapMBtn .sapMBtnIcon{
	color: #ffffff !important;
}
.customButtonBorderWhite.sapMBtn .sapMBtnInner {
	border-color: #ffffff !important;
}

/* Button red */
.customButtonTextRed.sapMBtn .sapMBtnInner{
	color: #ff0000 !important;
}
.customButtonBgRed.sapMBtn .sapMBtnInner{
	background-color: #ff0000 !important;
}
.customButtonIconRed.sapMBtn .sapMBtnIcon{
	color: #ff0000 !important;
}
.customButtonBorderRed.sapMBtn .sapMBtnInner {
	border-color: #ff0000 !important;
}

/* Button black */
.customButtonTextBlack.sapMBtn .sapMBtnInner{
	color: #000000 !important;
}
.customButtonBgBlack.sapMBtn .sapMBtnInner{
	background-color: #000000 !important;
}
.customButtonIconBlack.sapMBtn .sapMBtnIcon{
	color: #000000 !important;
}
.customButtonBorderBlack.sapMBtn .sapMBtnInner {
	border-color: #000000 !important;
}

/* Button blue */
.customButtonTextBlue.sapMBtn .sapMBtnInner{
	color: #0000ff !important;
}
.customButtonBgBlue.sapMBtn .sapMBtnInner{
	background-color: #0000ff !important;
}
.customButtonIconBlue.sapMBtn .sapMBtnIcon{
	color: #0000ff !important;
}
.customButtonBorderBlue.sapMBtn .sapMBtnInner {
	border-color: #0000ff !important;
}

/* Button green */
.customButtonTextGreen.sapMBtn .sapMBtnInner{
	color: #00ff00 !important;
}
.customButtonBgGreen.sapMBtn .sapMBtnInner{
	background-color: #00ff00 !important;
}
.customButtonIconGreen.sapMBtn .sapMBtnIcon{
	color: #00ff00 !important;
}
.customButtonBorderGreen.sapMBtn .sapMBtnInner {
	border-color: #00ff00 !important;
}

/* Button SoftSky */
.customButtonTextSoftSky.sapMBtn .sapMBtnInner{
	color: #cee8e5 !important;
}
.customButtonBgSoftSky.sapMBtn .sapMBtnInner{
	background-color: #cee8e5 !important;
}
.customButtonIconSoftSky.sapMBtn .sapMBtnIcon{
	color: #cee8e5 !important;
}
.customButtonBorderSoftSky.sapMBtn .sapMBtnInner {
	border-color: #cee8e5 !important;
}

/* Button Graphite */
.customButtonTextGraphite.sapMBtn .sapMBtnInner{
	color: #594d58 !important;
}
.customButtonBgGraphite.sapMBtn .sapMBtnInner{
	background-color: #594d58 !important;
}
.customButtonIconGraphite.sapMBtn .sapMBtnIcon{
	color: #594d58 !important;
}
.customButtonBorderGraphite.sapMBtn .sapMBtnInner {
	border-color: #594d58 !important;
}

/* Button CucumberCrush */
.customButtonTextCucumberCrush.sapMBtn .sapMBtnInner{
	color: #56ae35 !important;
}
.customButtonBgCucumberCrush.sapMBtn .sapMBtnInner{
	background-color: #56ae35 !important;
}
.customButtonIconCucumberCrush.sapMBtn .sapMBtnIcon{
	color: #56ae35 !important;
}
.customButtonBorderCucumberCrush.sapMBtn .sapMBtnInner {
	border-color: #56ae35 !important;
}

/* Button PoolParty */
.customButtonTextPoolParty.sapMBtn .sapMBtnInner{
	color: #a9ddc7 !important;
}
.customButtonBgPoolParty.sapMBtn .sapMBtnInner{
	background-color: #a9ddc7 !important;
}
.customButtonIconPoolParty.sapMBtn .sapMBtnIcon{
	color: #a9ddc7 !important;
}
.customButtonBorderPoolParty.sapMBtn .sapMBtnInner {
	border-color: #a9ddc7 !important;
}

/* Button MintMacaron */
.customButtonTextMintMacaron.sapMBtn .sapMBtnInner{
	color: #a4c8a5 !important;
}
.customButtonBgMintMacaron.sapMBtn .sapMBtnInner{
	background-color: #a4c8a5 !important;
}
.customButtonIconMintMacaron.sapMBtn .sapMBtnIcon{
	color: #a4c8a5 !important;
}
.customButtonBorderMintMacaron.sapMBtn .sapMBtnInner {
	border-color: #a4c8a5 !important;
}

/* Button PowderPink */
.customButtonTextPowderPink.sapMBtn .sapMBtnInner{
	color: #fcdbd5 !important;
}
.customButtonBgPowderPink.sapMBtn .sapMBtnInner{
	background-color: #fcdbd5 !important;
}
.customButtonIconPowderPink.sapMBtn .sapMBtnIcon{
	color: #fcdbd5 !important;
}
.customButtonBorderPowderPink.sapMBtn .sapMBtnInner {
	border-color: #fcdbd5 !important;
}

/* BlockLayout */
.customBlockLayoutPadding0_3rem.sapUiBlockLayout .sapUiBlockLayoutRow .sapUiBlockLayoutCell .sapUiBlockCellContent{
	padding: 0.3rem 2rem !important;
}

.customBlockLayoutPadding0_5rem.sapUiBlockLayout .sapUiBlockLayoutRow .sapUiBlockLayoutCell .sapUiBlockCellContent{
	padding: 0.5rem 2rem !important;
}

.customBlockLayoutPadding0_7rem.sapUiBlockLayout .sapUiBlockLayoutRow .sapUiBlockLayoutCell .sapUiBlockCellContent{
	padding: 0.7rem 2rem !important;
}

/* Bar */
.customBarForceSetElementsMiddle.sapMIBar.sapMBarTitleAlignAuto .sapMBarMiddle  .sapMBarPH{
  justify-content: center !important;
  left: 0 !important;
  right: 0 !important;
}

/* SlideTile */
.customSlideTileWidthFull.sapMST.OneByOne{
  width: 100%;
}
.customSlideTileWidthFull.sapMST.OneByOne .sapMSTWrapper{
  width: 100%;
}

.customSlideTileHeight15rem.sapMST.OneByOne{
  height: 15rem;
}

.customSlideTileHeight20rem.sapMST.OneByOne{
  height: 20rem;
}

.customSlideTileHeight25rem.sapMST.OneByOne{
  height: 25rem;
}

.customSlideTileHeight30rem.sapMST.OneByOne{
  height: 30rem;
}

.customSlideTileSetTileHeaderPadding.sapMST.sapMSTIndicatorVisible .sapMGT .sapMGTHdrContent {
  padding-top: 1rem !important;
  padding-left: 1rem !important;
}

/* GenericTile */
.customTileNoHeader.sapMGT .sapMGTHdrContent {
  height: 0 !important;
}

.customTileVideoBackground.sapMGT,
.customTileVideoBackground.sapMGT .sapMGTContent,
.customTileVideoBackground.sapMGT .llwork_video_container{
  height: 11rem !important;
}

.customTileVideoBackgroundHeight15rem.sapMGT,
.customTileVideoBackgroundHeight15rem.sapMGT .sapMGTContent,
.customTileVideoBackgroundHeight15rem.sapMGT .llwork_video_container{
  height: 15rem !important;
}

.customTileVideoBackgroundHeight20rem.sapMGT,
.customTileVideoBackgroundHeight20rem.sapMGT .sapMGTContent,
.customTileVideoBackgroundHeight20rem.sapMGT .llwork_video_container{
  height: 20rem !important;
}

.customTileVideoBackgroundHeight25rem.sapMGT,
.customTileVideoBackgroundHeight25rem.sapMGT .sapMGTContent,
.customTileVideoBackgroundHeight25rem.sapMGT .llwork_video_container{
  height: 25rem !important;
}

.customTileVideoBackgroundHeight30rem.sapMGT,
.customTileVideoBackgroundHeight30rem.sapMGT .sapMGTContent,
.customTileVideoBackgroundHeight30rem.sapMGT .llwork_video_container{
  height: 30rem !important;
}

.customTileVideoBackground.sapMGT,
.customTileVideoBackgroundHeight20rem.sapMGT,
.customTileVideoBackgroundHeight25rem.sapMGT,
.customTileVideoBackgroundHeight30rem.sapMGT{
  position: relative !important;
  overflow: hidden !important;
}
.customTileVideoBackground.sapMGT .sapMGTHdrContent,
.customTileVideoBackgroundHeight20rem.sapMGT .sapMGTHdrContent,
.customTileVideoBackgroundHeight25rem.sapMGT .sapMGTHdrContent,
.customTileVideoBackgroundHeight30rem.sapMGT .sapMGTHdrContent{
  display: none;  
}
.customTileVideoBackground.sapMGT .sapMTileCntContent,
.customTileVideoBackgroundHeight20rem.sapMGT .sapMTileCntContent,
.customTileVideoBackgroundHeight25rem.sapMGT .sapMTileCntContent,
.customTileVideoBackgroundHeight30rem.sapMGT .sapMTileCntContent{
  margin: 0;
	padding: 0;
}
.customTileVideoBackground.sapMGT .llwork_video,
.customTileVideoBackgroundHeight20rem.sapMGT .llwork_video,
.customTileVideoBackgroundHeight25rem.sapMGT .llwork_video,
.customTileVideoBackgroundHeight30rem.sapMGT .llwork_video{
  position: relative;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: 0;
}

.exampleCustomFullBgTile_01.sapMGT,
.exampleCustomFullBgTile_02.sapMGT,
.exampleCustomFullBgTile_03.sapMGT,
.exampleCustomFullBgTile_04.sapMGT,
.exampleCustomFullBgTile_05.sapMGT
 {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-rating !important;
}
.exampleCustomFullBgTile_01.sapMGT {
    background-image: url("https://llwork.de/images/llwork/employee_female_1.jpg") !important;
}
.exampleCustomFullBgTile_02.sapMGT {
    background-image: url("https://llwork.de/images/llwork/employee_finger_to_diagram.jpg") !important;
}
.exampleCustomFullBgTile_03.sapMGT {
    background-image: url("https://llwork.de/images/llwork/developer_male_1.jpg") !important;
}
.exampleCustomFullBgTile_04.sapMGT {
    background-image: url("https://llwork.de/images/llwork/employee_male_1.jpg") !important;
}
.exampleCustomFullBgTile_05.sapMGT {
    background-image: url("https://llwork.de/images/llwork/employees_happy_1.jpg") !important;
}

.customTileFontColorWhite .sapMGTHdrTxt>.sapMText,
.customTileFontColorWhite .sapMGTSubHdrTxt>.sapMText {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
.customTileFontColorWhite .sapMGTHdrTxt>.sapMText{
    font-weight: bold;
    font-size: 1.1rem;
}

.customTileFontColorBlack .sapMGTHdrTxt>.sapMText,
.customTileFontColorBlack .sapMGTSubHdrTxt>.sapMText {
    color: #000000 !important;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
}
.customTileFontColorBlack .sapMGTHdrTxt>.sapMText{
    font-weight: bold;
    font-size: 1.1rem;
}

.customTileFontColorBlue .sapMGTHdrTxt>.sapMText,
.customTileFontColorBlue .sapMGTSubHdrTxt>.sapMText {
    color: #0000ff !important;
    text-shadow: 1px 1px 3px rgba(255, 255, 0, 0.8);
}
.customTileFontColorBlue .sapMGTHdrTxt>.sapMText{
    font-weight: bold;
    font-size: 1.1rem;
}

.customTileFontColorRed .sapMGTHdrTxt>.sapMText,
.customTileFontColorRed .sapMGTSubHdrTxt>.sapMText {
    color: #ff0000 !important;
    text-shadow: 1px 1px 3px rgba(0, 255, 255, 0.8);
}
.customTileFontColorRed .sapMGTHdrTxt>.sapMText{
    font-weight: bold;
    font-size: 1.1rem;
}

.customTileFontColorGreen .sapMGTHdrTxt>.sapMText,
.customTileFontColorGreen .sapMGTSubHdrTxt>.sapMText {
    color: #00ff00 !important;
    text-shadow: 1px 1px 3px rgba(255, 0, 255, 0.8);
}
.customTileFontColorGreen .sapMGTHdrTxt>.sapMText{
    font-weight: bold;
    font-size: 1.1rem;
}

.customTileHeight15rem.sapMGT{
  /* std 11rem */
  height: 15rem !important;
}
.customTileHeight15rem.sapMGT>.sapMGTContent{
  height: 10rem !important;
}
.customTileHeight15rem.sapMGT.customTileNoHeader>.sapMGTContent{
  height: 11rem !important;
}

.customTileHeight20rem.sapMGT{
  /* std 11rem */
  height: 20rem !important;
}
.customTileHeight20rem.sapMGT>.sapMGTContent{
  height: 15rem !important;
}
.customTileHeight20rem.sapMGT.customTileNoHeader>.sapMGTContent{
  height: 16rem !important;
}

.customTileHeight25rem.sapMGT{
  /* std 11rem */
  height: 25rem !important;
}
.customTileHeight25rem.sapMGT>.sapMGTContent{
  height: 20rem !important;
}
.customTileHeight25rem.sapMGT.customTileNoHeader>.sapMGTContent{
  height: 21rem !important;
}

.customTileHeight30rem.sapMGT{
  /* std 11rem */
  height: 30rem !important;
}
.customTileHeight30rem.sapMGT>.sapMGTContent{
  height: 25rem !important;
}
.customTileHeight30rem.sapMGT.customTileNoHeader>.sapMGTContent{
  height: 26rem !important;
}

div.sapMTabContainer.noCloseButtons > .sapMTabStrip > .sapMTSTabsContainer > .sapMTSTabs > .sapMTabStripItem > .sapMTSItemCloseBtnCnt {
  visibility: hidden;
}

div.sapMTabContainer.noCloseButtons > .sapMTabStripContainer > .sapMTabStrip > .sapMTSTabsContainer > .sapMTSTabs > .sapMTabStripItem > .sapMTSItemCloseBtnCnt {
  visibility: hidden;
}

.sapMInputBaseDisabled .sapMInputBaseInner::placeholder{
  opacity: 100;
}

.sapMInputBaseReadonly .sapMInputBaseInner::placeholder{
  opacity: 100;
}

.llworkAppStyle.sapMApp{
  background: none !important;
}
.llworkShellStyle .sapMShellContent.sapMShellGlobalInnerBackground{
  background: none !important;
}

.llwork_video {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.llwork_video_container{
  border-radius: 4px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.llwork_icons{
  width: 28px;
  height: 28px;
}

.llwork_playback_icons{
  width: 28px;
  height: 28px;
  fill: #fff;
  stroke: #fff;
  cursor: pointer;
}

.llwork_video{
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.llwork_playback_animation{
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 80px;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.llwork_video_controls.hide {
  opacity: 0;
  pointer-events: none;
}

.llwork_video_controls{
  right: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  bottom: 0;
  transition: all 0.2s ease;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
}

.llwork_video_progress{
  position: relative;
  height: 8.4px;
  margin-bottom: 10px;
}

.llwork_seek{
  position: absolute;
  top: 0;
  width: 100%;
  cursor: pointer;
  margin: 0;
}

.llwork_seek:hover+.llwork_seek_tooltip {
  display: block;
}

.llwork_seek_tooltip{
  display: none;
  position: absolute;
  top: -50px;
  margin-left: -20px;
  font-size: 12px;
  padding: 3px;
  content: attr(data-title);
  font-weight: bold;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}

.llwork_bottom_controls{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.llwork_left_controls{
  display: flex;
  align-items: center;
  color: #fff;
}

.llwork_volume{
  background: #fff !important;
}

.llwork_volume_controls{
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.llwork_volume_controls input {
  width: 100px;
  opacity: 1;
  transition: all 0.4s ease;
}

.llwork_volume_controls:hover input, .llwork_volume_controls input:focus {
  width: 100px;
  opacity: 1;
}

.llwork_fullscreen_button{
  margin-right: 0;
}

.llwork_progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 2px;
  width: 100%;
  height: 8.4px;
  pointer-events: none;
  position: absolute;
  top: 0;
}

.llwork_progress::-webkit-progress-bar {
  background-color: #474545;
  border-radius: 2px;
}

.llwork_progress::-webkit-progress-value {
  background: var(--youtube-red);
  border-radius: 2px;
}

.llwork_progress::-moz-progress-bar {
  border: 1px solid var(--youtube-red);
  background: var(--youtube-red);
}

.llwork_button {
  cursor: pointer;
  position: relative;
  margin-right: 7px;
  font-size: 12px;
  padding: 3px;
  border: none;
  outline: none;
  background-color: transparent;
}

.llwork_button * {
  pointer-events: none;
}

.llwork_button::before {
  content: attr(data-title);
  position: absolute;
  display: none;
  right: 0;
  top: -50px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: bold;
  padding: 4px 6px;
  word-break: keep-all;
  white-space: pre;
}

.llwork_button:hover::before {
  display: inline-block;
}

.llwork_input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 8.4px;
  background: transparent;
  cursor: pointer;
}

.llwork_input[type=range]:focus {
  outline: none;
}

.llwork_input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  cursor: pointer;
  border-radius: 1.3px;
  -webkit-appearance: none;
  transition: all 0.4s ease;
}

.llwork_input[type=range]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 16px;
  background: var(--youtube-red);
  cursor: pointer;
  -webkit-appearance: none;
  margin-left: -1px;
}

.llwork_input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

.llwork_input[type=range].volume {
  height: 5px;
  background-color: #fff;
}

.llwork_input[type=range].volume::-webkit-slider-runnable-track {
  background-color: transparent;
}

.llwork_input[type=range].volume::-webkit-slider-thumb {
  margin-left: 0;
  height: 14px;
  width: 14px;
  background: #fff;
}

.llwork_input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 1.3px;
}

.llwork_input[type=range]::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border-radius: 50px;
  border: 1px solid var(--youtube-red);
  background: var(--youtube-red);
  cursor: pointer;
  margin-top: 5px;
}

.llwork_input[type=range]:focus::-moz-range-track {
  outline: none;
}

.llwork_input[type=range].volume::-moz-range-thumb {
  border: 1px solid #fff;
  background: #fff;
}