body {font-size: 20px; font-family: sans-serif;}
.playerOutsideDiv {}
.playerOutsideDiv:focus { outline: none; }
.playerInsideDiv { }
.videoTagOfPlayer {width: 100%; height: 100%; border: 0px; margin: 0px; padding: 0px; position: absolute;}
.videoTagOfPlayer:focus {outline: none;}


.overVideoDiv {display: block; overflow: hidden; background-color: transparent; width: 100%; height: 100%; z-index: 2; position: absolute; border: 0px solid #dd5588;  color: #ffffff;  font-size: 44px; box-sizing: border-box;}
.pauseImgOverVideo {width: 30px; height: 30px; border: 0px solid red;  display: none; position: absolute; top: 0px; left: 0px; }
.rewindImgOverVideo {width: 30px; height: 30px; border: 0px solid red;  display: none; position: absolute; top: 0px; left: 0px; }
.playImgOverVideo {width: 30px; height: 30px; border: 0px solid red;  display: none; position: absolute; top: 0px; left: 0px; }
.volumeUpImgOverVideo {width: 60px; height: 30px; border: 0px solid red;  display: none; position: absolute; top: 0px; left: 0px; }
.volumeDownImgOverVideo {width: 60px; height: 30px; border: 0px solid red;  display: none; position: absolute; top: 0px; left: 0px; }
.muteImgOverVideo {width: 30px; height: 30px; border: 0px solid red;  display: none; position: absolute; top: 0px; left: 0px; }
.ffImgOverVideo {width: 30px; height: 30px; border: 0px solid red;  display: none; position: absolute; top: 0px; left: 0px; }
.rewindOrFFAmount {width: 150px; height: 40px; line-height: 40px;border: 1px solid #d8d8d8; border-radius: 6px; display: none; position: absolute; top: 0px; left: 0px; background-color: #101010; color: #f2f2f2; overflow: hidden; font-size: 30px; text-align: center;}

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

.seekRange {-webkit-appearance: none; width: 100%; height: 15px; background-color: transparent; margin: 0px; padding: 0px 5px 0px 5px; box-sizing: border-box;}
.seekRange::-webkit-slider-runnable-track { height: 7px; cursor: pointer; background-color: #141414; border-radius: 4px; border: 1px solid #858585;}
.seekRange::-moz-range-track { height: 5px; cursor: pointer; background-color: #141414; border-radius: 4px; border: 1px solid #858585; }
.seekRange::-webkit-slider-thumb { -webkit-appearance: none; border: 2px solid #000000; height: 18px; width: 11px; border-radius: 4px; background: #f4f4f4; cursor: pointer;  margin-top: -7px; }
.seekRange::-moz-range-thumb {border: 2px solid #000000; height: 16px; width: 7px; border-radius: 4px; background: #f4f4f4; cursor: pointer; margin-top: -7px; }

.volumeRange {-webkit-appearance: none; width: 60px; height: 15px; background-color: transparent; margin: 4px 0px 0px 0px; padding: 0px 2px 0px 2px; box-sizing: border-box; float: left;}
.volumeRange::-webkit-slider-runnable-track { height: 7px; cursor: pointer; background-color: #141414; border-radius: 4px; border: 1px solid #858585;}
.volumeRange::-moz-range-track { height: 5px; cursor: pointer; background-color: #141414; border-radius: 4px; border: 1px solid #858585; }
.volumeRange::-webkit-slider-thumb { -webkit-appearance: none; border: 2px solid #000000; height: 18px; width: 11px; border-radius: 4px; background: #f4f4f4; cursor: pointer;  margin-top: -7px; }
.volumeRange::-moz-range-thumb {border: 2px solid #000000; height: 16px; width: 7px; border-radius: 4px; background: #f4f4f4; cursor: pointer; margin-top: -7px; }

.unselectable { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.timeAboveSeekRangeHint {display: none; position: absolute; z-index: 5; top: 0px; left: 0px; border: 1px solid black; width: 55px; height: 18px; line-height: 18px; overflow: hidden; background-color: #f7f7f7; font-size: 14px; text-align: center; padding: 1px;}

          .bottomInterface {display: block; position: absolute; z-index: 2; bottom: 0px; left: 0px; border: 0px solid black; width: 100%; height: 53px; overflow: hidden; background-color: rgba(50,50,50,0.5); font-size: 15px; box-sizing: border-box; transition: bottom 0.1s linear 0s; padding: 0px 0px 0px 0px;}
.promoBottomInterface {display: block; position: absolute; z-index: 7; bottom: 0px; left: 0px; border: 0px solid black; width: 100%; height: 35px; overflow: hidden; background-color: rgba(50,50,50,0.5); font-size: 15px; box-sizing: border-box; transition: bottom 0.1s linear 0s; padding: 6px 0px 0px 0px;}
.seekGroupInBottom, .promoSeekGroupInBottom {display: block; position: relative; border: 0px solid #aabbaa; width: 100%; height: 24px; padding: 3px 0px 0px 0px; margin: 0px; box-sizing: border-box; overflow: hidden; background-color: transparent;}
.controlsGroupInBottom, .promoControlsGroupInBottom {display: block; position: relative; border: 0px solid #bbbb00; width: 100%; height: 29px; padding: 0px; margin: 0px; box-sizing: border-box; background-color: transparent; overflow: hidden; white-space: nowrap; font-size: 1px;}


.controlsLeftPart, .promoControlsLeftPart {width: 45%; height: 29px; border: 0px solid #f7f7d0; display: inline-block; overflow: hidden; box-sizing: content-box; margin: 0px; padding: 0px; font-size: 10px;}
.controlsMiddlePart, .promoControlsMiddlePart {width: 10%; height: 29px; border: 0px solid #f7f7d0; display: inline-block; overflow: hidden; box-sizing: content-box; margin: 0px; padding: 0px;}
.controlsRightPart, .promoControlsRightPart {width: 45%; height: 29px; border: 0px solid #f7f7d0;  display: inline-block; overflow: hidden; box-sizing: content-box; margin: 0px; padding: 0px 0px 0px 0px;}

 
 
          .pauseOrPlay {width: 24px; height: 24px; border: 0px solid green; margin: 0 auto; display: block; }
.promoPauseOrPlay {width: 24px; height: 24px; border: 0px solid green; margin: 0 auto; display: none; }
.fullScreenButton {width: 24px; height: 24px; display: block; border: 0px solid green; margin: 0px 5px 0px 0px; float: right; overflow: hidden;}

.settingsButtonDiv {width: 24px; height: 24px; display: block; position: relative; border: 0px solid #dd55aa; border-radius: 0px 0px 0px 10px; margin: 0px 7px 0px 0px; float: right; overflow: hidden; }
.settingsButtonImg {width: 24px; height: 24px; display: block; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }

.promoVideoOverBlock {width: 100%; height: 100%; position: absolute; display: none; border: 0px solid #d80000; box-sizing: border-box; margin: 0px; z-index: 5; background-color: #000000; cursor: default; overflow: hidden;}
.promoOverVideoDiv {display: block; overflow: hidden; background-color: transparent; width: 100%; height: 100%; z-index: 2; top: 0px; left: 0px; position: absolute; border: 0px solid #dd5588;  color: #ffffff;  font-size: 44px; box-sizing: border-box;}
.promoVideoTag {width: 100%; height: 100%; box-sizing: border-box;}
.promoVideoLinkBlock {max-width: 50%; position: absolute; top: 5px; left: 5px; display: inline-block; border: 0px solid #d80000; border-radius: 3px; box-sizing: border-box; margin: 0px; z-index: 4; background-color: rgba(0,0,0,0.5); overflow: hidden; color: #ffffff; padding: 4px; text-decoration: none; font-size: 20px;}
.promoSkipButton {width: 120px; height: 20px; line-height: 20px; display: none; border: 0px solid #dd55aa; float: right; overflow: hidden;  box-sizing: border-box; color: #ffffff; font-size: 20px;}
.promoSkipCountdown {width: 40px; height: 20px; line-height: 20px; display: none; border: 0px solid #dd55aa; float: right; overflow: hidden;  box-sizing: border-box; color: #ffffff; font-size: 20px; text-align: left;}

.settingsWindow {width: 220px; height: 160px; display: none; position: absolute; border: 1px solid #858585; top: 0; right: 0; left: 0; bottom: 0; margin: auto; z-index: 4; background-color: #343434; font-size: 16px; color: #ffffff; cursor: default; overflow-x: hidden; overflow-y: auto; white-space: nowrap; }
.settingsMenuItem {width: auto; height: 25px; line-height: 25px; padding: 2px 2px 2px 2px; display: block; position: relative; border: 0px solid transparent;}
.settingsMenuItem:hover {background-color: #101010;}
.settingsMenuSelectedItem {background-color: #505050;}


.messageWindow {width: 70%; min-height: 20px; max-height: 60px; display: none; position: absolute; border: 1px solid #a6a6a6; top: 0px; bottom: 0px; right: 0px; left: 0px; margin: 0 auto; z-index: 3; background-color: #ffffff; font-size: 16px; overflow: hidden; color: #000000;  }
.messageOfferPart {width: auto; height: 100%; display: block; border: 0px solid #229988; box-sizing: border-box; overflow: hidden;}
.messageCloseButtonPart {width: 22px; height: 100%; display: block; border: 0px solid #ff0000; box-sizing: border-box; float: right; overflow: hidden; position: relative; background-color: transparent; text-align: center;}
.messageCloseImg {width: 16px; display: block; margin: 2px 0px 0px 4px; }


.closeSettingsItem {color: #d9953d; margin: 0px 0px 5px 0px;}
.settingsSpeedSelectWindow {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: inherit; display: none;}
.settingsQualitySelectWindow {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: inherit; display: none;}

.timeAndDuration {width: 160px; height: 24px; display: block; border: 0px solid #deaaaa; margin: 0px 0px 0px 0px; padding: 0px 10px 0px 0px; float: right; font-size: 20px; line-height: 24px; text-align: right; overflow: hidden;}

.volumeGroup, .promoVolumeGroup {display: block; overflow: hidden; width: 135px; height: 24px; border: 0px solid #dd7777; float: left;}
.volumePicButton, .promoVolumePicButton {width: 24px; height: 24px; border: 0px solid green; margin: 0px 4px 0px 4px; float: left;  display: block; }
.volumeNumericValue{width: 40px; height: 24px; line-height: 24px; border: 0px solid red; margin: 0px 0px 0px 0px; float: left; font-size: 20px; overflow: hidden;}


@media screen and (max-width: 540px)
{
.bottomInterface {height: 49px;}
.controlsGroupInBottom { height: 25px;}
.controlsLeftPart {height: 25px;}
.controlsMiddlePart {height: 25px;}
.controlsRightPart {height: 25px;}
.fullScreenButton {width: 20px; height: 20px;}
.pauseOrPlay {width: 20px; height: 20px;}
.timeAndDuration {width: 120px; height: 20px; line-height: 20px; font-size: 16px; padding: 0px 5px 0px 0px;  }
.volumePicButton {width: 20px; height: 20px;}
.volumeNumericValue{height: 20px; line-height: 20px; font-size: 16px;}
.volumeRange {margin: 2px 0px 0px 0px; }
}

@media screen and (max-width: 365px)
{
.timeAndDuration {width: 90px; height: 20px; padding: 0px 4px 0px 0px;  font-size: 14px; line-height: 20px;}
.volumeNumericValue{height: 20px; line-height: 20px; font-size: 14px;}
}