html {
    background-color: #151515;
}

body {
    color: #ffffff;
    margin: 0px;
    font-family: arial;
}

.LoginDialog, .LoginWithNameDialog {
    position: relative;
    width: 650px;
    height: 342px;
    margin-top: 15px;
    left: calc(50vw - 325px);
    color: white;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255 , 255, 0.15) 100%);
    border: 1px solid #5e5e5e;
    border-radius: 5px;
    text-align: left;
}

.LoginWithNameDialog {
    height: 417px;
}

#LoginLogo {
    width: 648px;
    height: 62px;
    margin-top: 210px;
    margin-left: calc(50vw - 325px);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%), url("images/Logo.svg") no-repeat;
    background-size: 158px 62px;
    border: solid 1px rgba(59, 59, 59, 0.6);
    border-radius: 5px;
    background-position: center;
}

#LoginWithNameMessage, #LoginMessage {
    margin-left: 51px;
    margin-top: 20px;
    font-size: 21px;
}

#ErrorMessage, #ErrorMessageOldUsernameOrPassword, #ErrorMessageUsername, #ErrorMessageNewUsername, #ErrorMessagePassword, #ErrorMessageNewPassword, #ErrorMessageH323Login {
    height: 30px;
    color: #ff7e79;
    font-size: 21px;
}

#ErrorMessageNewUsername {
    height: 60px;
}

#ErrorMessageUsername, #ErrorMessagePassword {
    height: 25px;
    font-size: 14px;
    line-height: 20px;
}

#LoginPassword, #LoginUsername, #LoginWithNamePassword, #LoginWithNamePasswordConfirm {
    background: transparent;
}

.LoginButton {
    width: 551px;
    height: 65px;
    margin-left: 48px;
    margin-top: 10px;
    background: #0599ff;
    border-radius: 5px;
    color: white;
    line-height: 65px;
    font-size: 19px;
    text-align: center;
}

#LoginOrangeLine {
    width: 398px;
    height: 10px;
    background: url("images/login_bar.png");
}

#UsernamePasswordRuleHint {
	width: 600px;
	margin-left: calc(50% - 300px);
	text-align: left;
	white-space: pre-wrap;
}

#MainTitle {
    position: relative;
    width: calc(100vw - 304px);
    height: 80px;
    line-height: 80px;
    background: #3e3e3e;
    display: flex;
    justify-content: center;
    font-size: 21.5px;
}

#ShowPreviewButton {
    width: 50px;
    height: 50px;
    margin-top: 15px;
    margin-right: 10px; 
    background: url(images/Light_Live_up.svg) no-repeat;
    display: none;
}

#LogoutButton {
    position: absolute;
    top: 22px;
    right: 79px;
    width: 31px;
    height: 36px;
    background: url("images/icon_Logout.svg") no-repeat #3e3e3e;
}

#LogoutButton:hover {
    background: url("images/icon_Logout.svg") no-repeat #3e3e3e;
}

#LogoutButton:active {
    background: url("images/icon_Logout_pressed.svg") no-repeat #3e3e3e;
}

#MainFrame {
    float: left;
    width: calc(100vw - 304px);
    height: calc(100vh - 80px);
    overflow-y: auto;
    background-color: #696969;
}

#MainMenu {
    width: 304px;
    height: /*100vh*/calc(100vh - 142px);
    background: #4c4c4c;
    /*background: url(images/logo.png) no-repeat, #4c4c4c;
    background-position: center calc(100vh - 142px);
    box-shadow: 3px 0 8px 0 rgba(0, 0, 0, 0.7);*/
    /*box-shadow: 0 0 2pt 2pt #3a3a3a;*/
    float: left;
    overflow: auto;
    overflow-X: hidden;
}

#MainMenuLogo {
    width: 304px;
    height: 142px;
    margin-top: calc(100vh - 142px);
    background: url(images/logo.png) no-repeat, #4c4c4c;
}

.MainMenuButton {
    color: #ffffff;
    background: #4d4d4d;
    width: 304px;
    height: 90px;
    line-height: 90px;
    padding-left: 86px;
    cursor: default;
    /*font-weight: bold;*/
    font-size: 21px;
    text-shadow: 0.05em 0.05em #333
}

#MenuPTZControl {
    background: url("images/PTZ_up.svg") 30px 22px / 46px 46px no-repeat;
}

#MenuPTZControl:hover {
    color: #ffffff !important;
    background: url("images/PTZ_up.svg") 30px 22px / 46px 46px no-repeat, linear-gradient(to bottom, #3BA3E9 0%, #1881C9 33%, #0968A8 66%, #1B7BBB 100%) !important;
}

#MenuSetting {
    background: url("images/Setting_up.svg") 30px 22px / 46px 46px no-repeat;
}

#MenuSetting:hover {
    color: #ffffff !important;
    background: url("images/Setting_up.svg") 30px 22px / 46px 46px no-repeat, linear-gradient(to bottom, #3BA3E9 0%, #1881C9 33%, #0968A8 66%, #1B7BBB 100%) !important;
}

#MenuVideoFormat {
    background: url("images/Video_format_up.svg") 30px 22px / 46px 46px no-repeat;
}

#MenuVideoFormat:hover {
    color: #ffffff !important;
    background: url("images/Video_format_up.svg") 30px 22px / 46px 46px no-repeat, linear-gradient(to bottom, #3BA3E9 0%, #1881C9 33%, #0968A8 66%, #1B7BBB 100%) !important;
}

#MenuNetwork {
    background: url("images/Network_up.svg") 30px 22px / 46px 46px no-repeat;
}

#MenuNetwork:hover {
    color: #ffffff !important;
    background: url("images/Network_up.svg") 30px 22px / 46px 46px no-repeat, linear-gradient(to bottom, #3BA3E9 0%, #1881C9 33%, #0968A8 66%, #1B7BBB 100%) !important;
}

#MenuSystem {
    background: url("images/System_up.svg") 30px 22px / 46px 46px no-repeat;
}

#MenuSystem:hover {
    color: #ffffff !important;
    background: url("images/System_up.svg") 30px 22px / 46px 46px no-repeat, linear-gradient(to bottom, #3BA3E9 0%, #1881C9 33%, #0968A8 66%, #1B7BBB 100%) !important;
}

#MenuAudio {
    background: url("images/Audio_up.svg") 30px 22px / 46px 46px no-repeat;
}

#MenuAudio:hover {
    color: #ffffff !important;
    background: url("images/Audio_up.svg") 30px 22px / 46px 46px no-repeat, linear-gradient(to bottom, #3BA3E9 0%, #1881C9 33%, #0968A8 66%, #1B7BBB 100%) !important;
}

#MenuAVerVideoRoomGeneral {
    background: url("images/Audio_up.svg") 30px 11px / 46px 46px no-repeat;
}

#MenuAVerVideoRoomGeneral:hover {
    color: #ffffff !important;
    background: url("images/Audio_up.svg") 30px 11px / 46px 46px no-repeat, linear-gradient(to bottom, #3BA3E9 0%, #1881C9 33%, #0968A8 66%, #1B7BBB 100%) !important;
}

#MenuH323 {
    background: url("images/Audio_up.svg") 30px 11px / 46px 46px no-repeat;
}

#MenuH323:hover {
    color: #ffffff !important;
    background: url("images/Audio_up.svg") 30px 11px / 46px 46px no-repeat, linear-gradient(to bottom, #3BA3E9 0%, #1881C9 33%, #0968A8 66%, #1B7BBB 100%) !important;
}

#MenuSIP {
    background: url("images/Audio_up.svg") 30px 11px / 46px 46px no-repeat;
}

#MenuSIP:hover {
    color: #ffffff !important;
    background: url("images/Audio_up.svg") 30px 11px / 46px 46px no-repeat, linear-gradient(to bottom, #3BA3E9 0%, #1881C9 33%, #0968A8 66%, #1B7BBB 100%) !important;
}

#MenuFirewall {
    background: url("images/Audio_up.svg") 30px 11px / 46px 46px no-repeat;
}

#MenuFirewall:hover {
    color: #ffffff !important;
    background: url("images/Audio_up.svg") 30px 11px / 46px 46px no-repeat, linear-gradient(to bottom, #3BA3E9 0%, #1881C9 33%, #0968A8 66%, #1B7BBB 100%) !important;
}

#iframeMain {
    position: absolute;
    border: none;
    width: calc(100vw - 304px);
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.PTZPreviewPageTitlebar {
    position: absolute;
    width: 464px;
    height: 70px;
    top: 2px;
    left: 2px;
    background: #4c4c4c;
    border: 2px solid #5e5e5e;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    box-shadow: 0 0 0pt 2pt #3a3a3a;
    display: flex;
}

.PTZPreviewPageInfo {
    position: absolute;
    width: 928px;
    height: 120px;
    top: 46px;
    left: 2px;
    background: #313131;
    border: 2px solid #444444;
    border-radius: 35px;
    box-shadow: 0 0 0pt 2pt #292929;
    display: flex;
}

.PTZPreviewPageBody {
    position: absolute;
    width: 464px;
    height: 508px;
    top: 46px;
    left: 2px;
    background: #313131;
    border: 2px solid #444444;
    border-radius: 35px;
    box-shadow: 0 0 0pt 2pt #292929;
}

#PTZLensName {
    display: flex;
}

#SettingStreamCanvas, #SettingDrawCanvas, #SettingTextCanvas {
    position: absolute;
    left: 9px;
    top: 42px;
    width: 442px;
    height: 248px;
    /*border-radius: 35px*/;
}

#SettingStreamCanvasStream2, #SettingDrawCanvasStream2 {
    position: absolute;
    left: 468px;
    top: 42px;
    width: 442px;
    height: 248px;
    /*background: white;*/
    /*border-radius: 35px*/;
}

#PTZPreviewPageCameraName {
    width: 280px;
    height: 46px;
    margin-left: 89px;
    line-height: 42px;
    font-size: 20px;
}

#PTZSettingPageFullScreenButton {
    width: 30px;
    height: 30px;
    margin-top: 6px;
    background: url("images/Full_screen_up.svg");
    border: 0;
}

#PTZSettingPageFullScreenButton:hover {
    background: url("images/Full_screen_on.svg");
}

#PTZSettingPageFullScreenButton:active {
    background: url("images/Full_screen_dw.svg");
}

#PTZSettingPageExitFullScreenButton {
    position: absolute;
    width: 100px;
    height: 84px;
    top: 80px;
    left: calc(100vw - 96px);
    background: url("images/Restore.svg");
    border: 0;
    z-index: 9999;
}

#PTZSettingPageCloseButton {
    width: 30px;
    height: 30px;
    margin-top: 6px;
    margin-left: 10px;
    background: url("images/Close_up.svg");
    background-size: 100% 100%;
    border: 0;
}

#PTZSettingPageCloseButton:hover {
    background: url("images/Close_on.svg");
}

#PTZSettingPageCloseButton:active {
    background: url("images/Close_dw.svg");
}

#PTZPreviewPageIP, #PTZPreviewPagePeopleCounting, #PTZPreviewPagePeopleCountingTime, #PTZPreviewPageLens1Name, #PTZPreviewPageLens2Name {
    width: 148px;
    height: 50px;
    /*margin-left: 10px;*/
    color: #b2b2b2;
    line-height: 46px;
    font-size: 20px;
}

#PTZPreviewPageIPIcon {
    width: 34px;
    height: 34px;
    margin-top: 5px;
    margin-left: 0px;
    background: url("images/IP.svg");
}

#PTZPreviewPagePeopleCounting {
    width: 40px;
}

#PTZPreviewPagePeopleCountingIcon {
    width: 34px;
    height: 34px;
    margin-top: 5px;
    margin-left: 13px;
    background: url("images/People_up.svg");
}

#PTZPreviewPagePeopleCountingTime {
    width: 120px;
}

#PTZPreviewPagePeopleCountingTimeIcon {
    width: 34px;
    height: 34px;
    margin-top: 5px;
    background: url("images/Time.svg");
}

#PTZPreviewPageLens1Name,  #PTZPreviewPageLens2Name{
    margin-left: 14px;
    line-height: 40px;
    text-align: left;
}

#PTZPreviewPageLens1Icon {
    width: 30px;
    height: 30px;
    margin-left: 160px;
    margin-top: 5px;
    background: url("images/live2.svg");
}

#PTZPreviewPageLens2Icon {
    width: 30px;
    height: 30px;
    margin-left: 280px;
    margin-top: 5px;
    background: url("images/live2.svg");
}

/*PTZ Control*/
#PTZControl {
    position: relative;
    min-height: 656px;
}

#PTZConrolTitleBar {
    position: absolute;
    width: 100%;
    height: 24px;
    background-color: #454545;
}

#CurrentPreset {
    position: absolute;
    top: 0px;
    left: 431px;
    width: 230px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    background-color: rgba(0, 0, 0, 0.5);
}

#ShowPresetControl {
    background: url("images/bt_preset_open_normal.png");
    width: 200px;
    height: 24px;
}

#ShowPresetControl:hover {
    background: url("images/bt_preset_open_hover.png");
}

#HidePresetControl {
    background: url("images/bt_preset_close_normal.png");
    width: 200px;
    height: 24px;
}

#HidePresetControl:hover {
    background: url("images/bt_preset_close_hover.png");
}

#PresetButtons {
    background-color: transparent/*rgba(0, 0, 0, 0.5)*/;
    position: absolute;
    top: 30px;
    left: 0px;
    width: /*314*/480px;
    height: calc(100vh - 30px);
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 99;
}

#Ver2PresetButtons {
    background-color: transparent;
    position: absolute;
    top: 30px;
    left: 25px;/*115px;*/
    width: 468px;/*364px;*/
    height: calc(100vh - 30px);
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 99;
}

#Ver2PresetOperations {
    height: 55px;
    margin-left: 15px;
    display: flex;
    position: relative;
}

#PresetLoad {
    left: 130px;
}

#Ver2PresetLoad {
    left: 99px;
}

#Ver2PresetClear {
    left: 198px;
    /*display: none*/;
}

#AddPreset, #DeletePreset {
    position: absolute;
    left: 336px;
    width: 39px;
    height: 38px;
    background: url("images/preset_add_up.svg");
    /*display: none;*/
}

#DeletePreset {
    left: 385px;
    background: url("images/preset_del_up.svg");
}

#AddPreset:hover {
    background: url("images/preset_add_on.svg");
}

#AddPreset:active {
    background: url("images/preset_add_dw.svg");
}

#DeletePreset:hover {
    background: url("images/preset_del_on.svg");
}

#DeletePreset:active {
    background: url("images/preset_del_dw.svg");
}

#PresetPage {
    margin-left: 20px;
    /*display: none;*/
}

.PresetButton {
    position: relative;
    width: 250px;
    height: 168px;
    margin-left: /*50*/216px;
    margin-bottom: 16px;
    background: url("images/bg_ptz_preset_up.svg")/*#313131*/;
    /*border: solid 1px #292929;*/
    border-radius: 20px;
    text-align: center;
    /*box-shadow: 0 0 10px 0 rgba(19, 6, 12, 0.3);*/
    cursor: default;
}

.Ver2PresetButton {
    width: /*256px;*/206px;
    height: /*66px;*/136px;
    margin-left: 0px;
    margin-right: 16px;
    margin-top: 6px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: url("images/bg_ptz_preset_normal.svg") 0px 0px / 100% 100%;
}

.PresetPageButton {
    width: 25px;
    height: 25px;
    margin-left: 17px;
    margin-top: 2px;
    color: #ffffff;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
}

#PresetPageBack {
    width: 30px;
    height: 30px;
    background: url("images/preset_previous_page_up.svg");
    cursor: pointer;
}

#PresetPageBack:hover {
    background: url("images/preset_previous_page_on.svg");
}

#PresetPageBack:active {
    background: url("images/preset_previous_page_dw.svg");
}

#PresetPageNext {
    width: 30px;
    height: 30px;
    margin-left: 17px;
    background: url("images/preset_next_page_up.svg");
    cursor: pointer;
}

#PresetPageNext:hover {
    background: url("images/preset_next_page_on.svg");
}

#PresetPageNext:active {
    background: url("images/preset_next_page_dw.svg");
}

#ConfirmSetPreset {
    position: absolute;
    left: 300px;
    top: 170px;
    width: 362px;
    height: 138px;
    visibility: hidden;
    z-index: 100;
}

#Arrow {
    width: 12px;
    height: 138px;
    background: url("images/arrow_preset_area.svg") 0px 59px no-repeat;
}

#ContentForeground {
    position: absolute;
    top: 5px;
    left: 14px;
    width: 340px;
    height: 128px;
    border-radius: 16px;
    background: #000000;
    z-index: 2;
}

#ContentBackground {
    position: absolute;
    top: 0px;
    left: 9px;
    width: 350px;
    height: 138px;
    border: 1px solid #004B7D;
    border-radius: 16px;
    background: #000000;
    z-index: 1;
}

#ContentTitle {
    width: 340px;
    height: 30px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: #000000;
    text-align: center;
    line-height: 27px;
    font-size: 18px;
}

#SetPresetNo {
    left: 36px;
    top: 47px;
}

#SetPresetYes {
    left: 166px;
    top: 47px;
}

#AskAgain {
    position: absolute;
    left: 20px;
    top: 90px;
    display: flex;
    justify-content: center;
}

#TextAskAgain {
    margin-left: 10px;
    line-height: 30px;
    color: #b2b2b2;
    font-size: 14px;
}

#SetPresetCompleted {
    position: absolute;
    left: 300px;
    top: 170px;
    width: 142px;
    height: 48px;
    visibility: hidden;
    z-index: 100;
}

#SetPresetCompletedArrow {
    width: 12px;
    height: 38px;
    background: url("images/arrow_preset_area.svg") 0px 14px no-repeat;
}

#SetPresetCompletedForeground {
    position: absolute;
    top: 5px;
    left: 14px;
    width: 120px;
    height: 38px;
    border-radius: 5px;
    background: #000000;
    text-align: center;
    line-height: 38px;
    z-index: 2;
}

#SetPresetCompletedBackground {
    position: absolute;
    top: 0px;
    left: 9px;
    width: 130px;
    height: 48px;
    border: 1px solid #004B7D;
    border-radius: 5px;
    background: #000000;
    z-index: 1;
}

#SavePresetOffHint {
    position: absolute;
    left: 328px;
    top: 55px;
    width: 294px;
    height: 60px;
    visibility: hidden;
    z-index: 1000;
}

#SavePresetOffHintArrow {
    position: absolute;
    top: 46px;
    left: 52px;
    width: 20px;
    height: 12px;
    background: url("images/arrow_preset_area2.svg") 0px 0px no-repeat;
}

#SavePresetOffHintForeground {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 284px;
    height: 38px;
    border-radius: 24px;
    background: #4c4c4c;
    text-align: center;
    line-height: 38px;
    z-index: 2;
}

#SavePresetOffHintBackground {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 294px;
    height: 48px;
    border-radius: 24px;
    background: linear-gradient(to bottom, #78d6ff 5%, #15b0f6 50%, #009ce2 50%, #006cb8 100%);
    z-index: 1;
}

.PresetTitle {
    width: 242px;
    height: 30px;
    line-height: 30px;
    display: flex;
}

.PresetNumber {
    width: 20px;
    height: 20px;
    margin-left: 15px;
    margin-top: 9px;
    line-height: 21px;
    background: #1e1e1e;
    border-radius: 50%;
    font-size: 15.5px;
}

.Ver2PresetNumber {
    width: 24px;
    height: 24px;
    margin-left: 9px;
    margin-top: 9px;
    line-height: 25px;
    font-size: 15.5px;
}

.PresetImage {
    width: 220px;
    height: 120px;
    margin-left: 13px;
    line-height: 120px;
    background: #4c4c4c;
    border-radius: 5px;
    border: solid 2px #3f3f3f;
    text-align: center;
}

.Ver2PresetImage {
    width: 160px;
    height: 90px;
    margin-left: 20px;
    line-height: 90px;
    background: #4c4c4c;
    border-radius: 5px;
    border: solid 2px #3f3f3f;
    text-align: center;
    /*display: none;*/
}

#PTZStreamCanvas {
    position: absolute;
    top: 30px;
    left: /*314*/480px;
    width: 848px;
    height: 480px;
    border: 2px solid #454545;
    box-shadow: 0 0 2pt 2pt rgba(0, 0, 0, 0.2);
}

#PTZDrawCanvas, #PTZTextCanvas {
    position: absolute;
    top: 30px;
    left: /*314*/480px;
    width: 848px;
    height: 480px;
}

#Preset1 {
    margin-top: 10px;
}

#PTZMovePanel {
    background-color: transparent;
    position: relative;
    top: 789px;
    left: 0px;
    width: 166px;
    height: 165px;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.PTZPreset, .Ver2PTZPreset {
    position: absolute;
    width: 120px;
    height: 38px;
    text-align: center;
    line-height: 30px;
    cursor: context-menu;
}

.Ver2PTZPreset {
    width: 90px;
    height: 34px;
    line-height: 30px;
}

.SavePreset {
    position: absolute;
    /*background: url("images/bt_set_preset_normal.png");*/
    left: 55px;
    top: 108px;
    width: 140px;
    height: 29px;
    text-align: center;
    line-height: 30px;
    display: none;
    cursor: context-menu;
}
/*
.SavePreset:hover {
    background: url("images/bt_set_preset_hover.png");
}

.SavePreset:active {
    background: url("images/bt_set_preset_pressed.png");
}*/
#PanTileZoomPanel, #PanTileZoomPanelBackground, #Ver2PTZPanel, #Ver2PTZPanelBackground {
    position: absolute;
    background: url("images/Arrow_all_up.svg");
    background-size: 100% 100%;
    top: 547px;
    left: /*881*/750px;
    width: 166px;
    height: 165px;
}

#Ver2PTZPanel, #Ver2PTZPanelBackground {
    background: url("images/ptz_all_up.svg");
}

#Ver2PreviewPagePTPanel, #Ver2PreviewPagePTPanelBackground {
    position: absolute;
    background: url("images/ptz_all_up.svg");
    background-size: 100% 100%;
    top: 0px;
    left: 0px;
    width: 141px;
    height: 140px;
}

#PresentationModeSetting {
    width: 330px;
    height: 50px;
    margin-left: 65px;
    margin-top: 240px;
    background: #313131;
    border-bottom-left-radius: 19px;
	border-bottom-right-radius: 19px;
    box-shadow: 0 0 10px 0 rgba(19, 6, 12, 0.69);
}

.PresentationModeButtons {
    width: 150px;
    height: 38px;
    margin-top: 6px;
    border-radius: 19px;
    border: solid 2px #6b6b6b;
    background-color: #3f3f3f;
    color: #ffffff;
    font-size: 18px;
}

.PresentationModeButtons:disabled {
    border: solid 2px #5b5b5b;
    background-color: #303030;
    color: #aaaaaa;
}

#PresentationModePreview {
    margin-right: 20px;
}

#PreviewPagePanTileZoomPanel, #Ver2PreviewPagePTZPanel {
    /*position: relative;
    margin-left: 122px;
    margin-top: 16px;*/
    position: absolute;
    right: 148px;
    bottom: 12px;
    width: 209px;
    height: 140px;
}

#TwoStreamNote {
    position: absolute;
    right: 10px;
    bottom: 12px;
    width: 430px;
    height: 140px;
    white-space: pre-line;
    text-align: left;
    color: #b2b2b2;
}

#PreviewPagePanTilePanel, #PreviewPagePanTilePanelBackground {
    position: absolute;
    background: url("images/PreviewPage_Arrow_all_up.svg");
    background-size: 100% 100%;
    top: /*298px*/0px;
    left: /*120px*/0px;
    width: 141px;
    height: 140px;
}

#PTZUp {
    position: absolute;
    top: 0px;
    left: 80px;
    width: 76px;
    height: 56px;
    background: url(images/arrow_up_up.svg) 30px 20px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
}

#PTZUp:hover {
    background: url(images/arrow_up_on.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PTZUp:active {
    background: url(images/arrow_up_dw.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZUp {
    position: absolute;
    top: 0px;
    left: 61px;
    width: 61px;
    height: 46px;
    background: url(images/arrow_up_up.svg) 21px 14px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
}

#PreviewPagePTZUp:hover {
    background: url(images/arrow_up_on.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZUp:active {
    background: url(images/arrow_up_dw.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PTZDown {
    position: absolute;
    top: 120px;
    left: 80px;
    width: 76px;
    height: 56px;
    background: url(images/arrow_down_up.svg) 30px 20px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
}

#PTZDown:hover {
    background: url(images/arrow_down_on.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PTZDown:active {
    background: url(images/arrow_down_dw.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZDown {
    position: absolute;
    top: 92px;
    left: 61px;
    width: 61px;
    height: 46px;
    background: url(images/arrow_down_up.svg) 21px 14px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
}

#PreviewPagePTZDown:hover {
    background: url(images/arrow_down_on.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZDown:active {
    background: url(images/arrow_down_dw.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PTZLeft {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 76px;
    height: 56px;
    background: url(images/arrow_left_up.svg) 30px 20px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
}

#PTZLeft:hover {
    background: url(images/arrow_left_on.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PTZLeft:active {
    background: url(images/arrow_left_dw.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZLeft {
    position: absolute;
    top: 46px;
    left: 0px;
    width: 61px;
    height: 46px;
    background: url(images/arrow_left_up.svg) 21px 14px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
}

#PreviewPagePTZLeft:hover {
    background: url(images/arrow_left_on.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZLeft:active {
    background: url(images/arrow_left_dw.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PTZRight {
    position: absolute;
    top: 60px;
    left: 160px;
    width: 76px;
    height: 56px;
    background: url(images/arrow_right_up.svg) 30px 20px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
}

#PTZRight:hover {
    background: url(images/arrow_right_on.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PTZRight:active {
    background: url(images/arrow_right_dw.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZRight {
    position: absolute;
    top: 46px;
    left: 122px;
    width: 61px;
    height: 46px;
    background: url(images/arrow_right_up.svg) 21px 14px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
}

#PreviewPagePTZRight:hover {
    background: url(images/arrow_right_on.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZRight:active {
    background: url(images/arrow_right_dw.svg) 21px 14px / 16px 15px no-repeat, #454545;
}


#PTZUpLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 76px;
    height: 56px;
    background: url(images/arrow_lu_up.svg) 30px 20px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 8px 0 0 0;
}

#PTZUpLeft:hover {
    background: url(images/arrow_lu_on.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PTZUpLeft:active {
    background: url(images/arrow_lu_dw.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZUpLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 61px;
    height: 46px;
    background: url(images/arrow_lu_up.svg) 21px 14px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 8px 0 0 0;
}

#PreviewPagePTZUpLeft:hover {
    background: url(images/arrow_lu_on.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZUpLeft:active {
    background: url(images/arrow_lu_dw.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PTZUpRight {
    position: absolute;
    top: 0px;
    left: 160px;
    width: 76px;
    height: 56px;
    background: url(images/arrow_ru_up.svg) 30px 20px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 0 8px 0 0;
}

#PTZUpRight:hover {
    background: url(images/arrow_ru_on.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PTZUpRight:active {
    background: url(images/arrow_ru_dw.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZUpRight {
    position: absolute;
    top: 0px;
    left: 122px;
    width: 61px;
    height: 46px;
    background: url(images/arrow_ru_up.svg) 21px 14px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 0 8px 0 0;
}

#PreviewPagePTZUpRight:hover {
    background: url(images/arrow_ru_on.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZUpRight:active {
    background: url(images/arrow_ru_dw.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PTZDownLeft {
    position: absolute;
    top: 120px;
    left: 0px;
    width: 76px;
    height: 56px;
    background: url(images/arrow_ld_up.svg) 30px 20px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 0 0 0 8px;
}

#PTZDownLeft:hover {
    background: url(images/arrow_ld_on.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PTZDownLeft:active {
    background: url(images/arrow_ld_dw.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZDownLeft {
    position: absolute;
    top: 92px;
    left: 0px;
    width: 61px;
    height: 46px;
    background: url(images/arrow_ld_up.svg) 21px 14px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 0 0 0 8px;
}

#PreviewPagePTZDownLeft:hover {
    background: url(images/arrow_ld_on.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZDownLeft:active {
    background: url(images/arrow_ld_dw.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PTZDownRight {
    position: absolute;
    top: 120px;
    left: 160px;
    width: 76px;
    height: 56px;
    background: url(images/arrow_rd_up.svg) 30px 20px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 0 0 8px 0;
}

#PTZDownRight:hover {
    background: url(images/arrow_rd_on.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PTZDownRight:active {
    background: url(images/arrow_rd_dw.svg) 30px 20px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZDownRight {
    position: absolute;
    top: 92px;
    left: 122px;
    width: 61px;
    height: 46px;
    background: url(images/arrow_rd_up.svg) 21px 14px / 16px 15px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 0 0 8px 0;
}

#PreviewPagePTZDownRight:hover {
    background: url(images/arrow_rd_on.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PreviewPagePTZDownRight:active {
    background: url(images/arrow_rd_dw.svg) 21px 14px / 16px 15px no-repeat, #454545;
}

#PTZGoCenterPos {
    position: absolute;
    top: 60px;
    left: 80px;
    width: 76px;
    height: 56px;
    background: url(images/home_up.svg) 22px 16px / 31px 24px no-repeat, #454545;
    border: solid 2px #767676;
}

#PTZGoCenterPos:hover {
    background: url(images/home_on.svg) 22px 16px / 31px 24px no-repeat, #454545;
}

#PTZGoCenterPos:active {
    background: url(images/home_dw.svg) 22px 16px / 31px 24px no-repeat, #454545;
}

#PreviewPagePTZGoCenterPos {
    position: absolute;
    top: 46px;
    left: 61px;
    width: 61px;
    height: 46px;
    background: url(images/home_up.svg) 13px 9px / 31px 24px no-repeat, #454545;
    border: solid 2px #767676;
}

#PreviewPagePTZGoCenterPos:hover {
    background: url(images/home_on.svg) 13px 9px / 31px 24px no-repeat, #454545;
}

#PreviewPagePTZGoCenterPos:active {
    background: url(images/home_dw.svg) 13px 9px / 31px 24px no-repeat, #454545;
}

#PTZSmartFrame {
    position: absolute;
    top: 96px;
    left: 320px;
    width: 76px;
    height: 79px;
    background: url(images/manual_frame_up.svg) 17px 24px / 42px 30px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 8px;
}

#PTZSmartFrame:hover {
    background: url(images/manual_frame_on.svg) 17px 24px / 42px 30px no-repeat, #454545;
}

#PTZSmartFrame:active {
    background: url(images/manual_frame_dw.svg) 17px 24px / 42px 30px no-repeat, #454545;
}

#PTZOneShotFocus {
    position: absolute;
    top: /*53*/0px;
    left: 320px;
    width: 76px;
    height: 79px;
    background: url(images/one_shot_focus_up.svg) 17px 24px / 42px 30px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 8px;
}

#PTZOneShotFocus:hover {
    background: url(images/one_shot_focus_on.svg) 17px 24px / 42px 30px no-repeat, #454545;
}

#PTZOneShotFocus:active {
    background: url(images/one_shot_focus_dw.svg) 17px 24px / 42px 30px no-repeat, #454545;
}

#PTZZoomIn {
    position: absolute;
    top: 0px;
    left: 249px;
    width: 58px;
    height: 79px;
    background: url("images/Zoom_in_up.svg") 16px 24px / 28px 28px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 8px;
}

#PTZZoomIn:hover {
    background: url("images/Zoom_in_on.svg") 16px 24px / 28px 28px no-repeat, #454545;
}

#PTZZoomIn:active {
    background: url("images/Zoom_in_dw.svg") 16px 24px / 28px 28px no-repeat, #454545;
}

#PreviewPagePTZZoomIn {
    position: absolute;
    top: 0px;
    left: 198px;
    width: 46px;
    height: 63px;
    background: url("images/Zoom_in_up.svg") 8px 16px / 28px 28px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 8px;
}

#PreviewPagePTZZoomIn:hover {
    background: url("images/Zoom_in_on.svg") 8px 16px / 28px 28px no-repeat, #454545;
}

#PreviewPagePTZZoomIn:active {
    background: url("images/Zoom_in_dw.svg") 8px 16px / 28px 28px no-repeat, #454545;
}

#PTZZoomOut {
    position: absolute;
    top: 96px;
    left: 249px;
    width: 58px;
    height: 79px;
    background: url("images/Zoom_out_up.svg") 16px 24px / 28px 28px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 8px;
}

#PTZZoomOut:hover {
    background: url("images/Zoom_out_on.svg") 16px 24px / 28px 28px no-repeat, #454545;
}

#PTZZoomOut:active {
    background: url("images/Zoom_out_dw.svg") 16px 24px / 28px 28px no-repeat, #454545;
}

#PreviewPagePTZZoomOut {
    position: absolute;
    top: 75px;
    left: 198px;
    width: 46px;
    height: 63px;
    background: url("images/Zoom_out_up.svg") 8px 16px / 28px 28px no-repeat, #454545;
    border: solid 2px #767676;
    border-radius: 8px;
}

#PreviewPagePTZZoomOut:active {
    background: url("images/Zoom_out_dw.svg") 8px 16px / 28px 28px no-repeat, #454545;
}

#PreviewPagePTZZoomOut:hover {
    background: url("images/Zoom_out_on.svg") 8px 16px / 28px 28px no-repeat, #454545;
}

#Snapshot, #RecordVideo {
    position: absolute;
    width: 400px;
    height: 70px;
    top: 714px;
    left: 1163px;
    border-radius: 32px;
    box-shadow: 0px -3px 8px 0 rgba(0, 0, 0, 0.4);
    border: solid 2px #3a3a3a;
    background-color: #454545;
    display: flex;
}

#RecordVideo {
    top: 800px;
}

#SnapshotIcon, #RecordVideoIcon {
    width: 46px;
    height: 46px;
    margin-left: 7px;
    margin-top: 12px;
    background: url("images/icon_photo_normal.png");
}

#SnapshotIcon:active {
    background: url("images/icon_photo_pressed.png");
}

#SnapshotStatus, #RecordVideoStatus {
    width: 260px;
    height: 70px;
    line-height: 70px;
    padding-left: 14px;
    font-size: 18px;
}

#SnapshotImage, #RecordVideoImage {
    position: absolute;
    top: -2px;
    left: 208px;
    width: 120px;
    height: 70px;
    line-height: 70px;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(19, 6, 12, 0.3);
    border: solid 2px #292929;
    background-color: #313131;
    text-align: center;
    font-size: 18px;
}

#SnapshotFolder, #RecordVideoFolder {
    width: 70px;
    height: 70px;
}
/*Setting*/
#Setting {
    /*overflow-y: auto;*/
}

#GestureControlExplanation {
    width: 24px;
    height: 24px;
    margin-left: 10px;
    background: url("images/Help_up.svg");
}

#GestureControlExplanation:hover {
    background: url("images/Help_on.svg");
}

#GestureControlExplanation:active {
    background: url("images/Help_dw.svg");
}

#GestureControlExplanationClosed, #AllowCollectDataExplanationClosed {
     width: 34px;
     height: 34px; 
     background: url("images/Close_up.svg");
}

#GestureControlExplanationClosed:hover, #AllowCollectDataExplanationClosed:hover {
     background: url("images/Close_on.svg");
}

#GestureControlExplanationClosed:active, #AllowCollectDataExplanationClosed:active {
     background: url("images/Close_dw.svg");
}

.BetaIcon {
    width: 70px;
    height: 24px;
    margin-left: 15px;
    background: #d28200;
    border-radius: 12px;
    line-height: 24px;
    text-align: center;
    font-size: 18px;
}

.ExplanationIconSize {
    width: 120px;
    height: 68px;
    margin-left: 20px;
}

.VideoServiceProviderIconSize {
    width: 120px;
    height: 82px;
    margin-left: 20px;
}

#VideoServiceProviderAVerBYODIcon {
    margin-left: 33px;
}

.SwitchIconSize {
    width: 42px;
    height: 42px;
    margin-left: 136px;
    background: url("images/layout_switch_up.svg");
    visibility: hidden;
}

.SwitchIconSize:hover {
    background: url("images/layout_switch_on.svg");
}

.SwitchIconSize:active {
    background: url("images/layout_switch_dw.svg");
}

#FramingSizeTightIcon {
    background: url("images/framing_size_tight.svg");
}

#FramingSizeMediumIcon {
    background: url("images/framing_size_medium.svg");
}

#FramingSizeLooseIcon {
    background: url("images/framing_size_loose.svg");
}

#HDMIScreenLayoutLens1Icon, #USBIPScreenLayoutLens1Icon {
    background: url("images/hdmi_layout_lens1.svg");
}

#HDMIScreenLayoutLens2Icon, #USBIPScreenLayoutLens2Icon {
    background: url("images/hdmi_layout_lens2.svg");
}

#HDMIScreenLayoutPIP1Icon, #USBIPScreenLayoutPIP1Icon {
    background: url("images/hdmi_layout_pip1_1.svg");
}

#HDMIScreenLayoutPIP2Icon, #USBIPScreenLayoutPIP2Icon { 
    background: url("images/hdmi_layout_pip2_1.svg");
}

#HDMIScreenLayoutPIP3Icon, #USBIPScreenLayoutPIP3Icon {
    background: url("images/hdmi_layout_pip3_1.svg");
}

#VideoServiceProviderZoomRoomsIcon {
    background: url("images/icon_zoom_rooms.svg");
}

#VideoServiceProviderAVerBYODIcon {
    margin-left: 33px;
    background: url("images/icon_aver_byod.svg");
}

#VideoServiceProviderAVerRoomIcon {
    margin-left: 20px;
    background: url("images/icon_aver_zoom.svg") 0px 0px / 100% 100%;
}
/*Video Format*/
#H264Profile {
    padding-top: 18px;
}

#BitRate {    
    /*height: 200px;*/
}

#ChangeRTSPPassword {
    /*height: 190px;*/
}

#RTSPURLInfo {
    width: 506px;
    height: 50px;
    margin-left: 58px;
    margin-top: 10px;
    margin-bottom: 35px;
    line-height: 50px;
    background: #4c4c4c;
    border: 1px solid #767676;
    border-radius: 3px;
    text-align: center;
    font-size: 18px;
}

#RTMPURL {
    padding-top: 5px;
    /*height: 110px;*/
}

#RTMPServerURL, #RTMPStreamKey {
    width: 508px;
    height: 50px;
    margin-left: 58px;
    margin-bottom: 29px;
}

#RTMPServerURLTextDisabled, #RTMPStreamKeyDisabled {
    background-color: #303030 !important;
    color: #505050 !important;
    border-color: #464646 !important;
}
/*Network*/
#Network {
}

#HostnameEdit {
    width: 293px;
    height: 50px;
    margin-left: 0px;
    padding-left: 15px;
    color: #ffffff;
    border: none;
    background-color: transparent;
    text-align: center;
    font-size: 18px;
}

#LinkNameEdit:focus {
    outline: none;
}

#StaticIP, #LocalLan, #Wifi {
    height: 225px;
    margin-left: 58px;
}

#Wifi {
	height: 150px;
}

#DHCP {
    padding-top: 18px;
    padding-bottom: 8px;
}

#StaticIPConfirm {
    margin-top: 32px;
}
/*System*/
#Language {
    padding-top: 18px;
}

#NTPServer, #TimeZone {
    /*width: 398px;*/
    /*height: 52px;*/
}

#NTPSettingResult, #TimeZoneSelect, #SchedulePeriodSelect {
    width: 330px;
    height: 52px;
}

#NTPUpdateProgress {
    line-height: 55px;
}

#ManualTimeSetting, #ScheduleTimeSetting, #SchedulePeriod {
    margin-left: 58px;
    margin-bottom: 31px;
}

#TimeSettingEdit, #IPAddressEdit, #GatewayEdit, #NetMaskEdit, #DNSEdit, #NTPServerEdit, #ScheduleTimeEdit,
#WifiIPAddressEdit, #WifiGatewayEdit, #WifiNetMaskEdit, #WifiDNSEdit, #RTPPortUDPEdit, #H245PortTCPEdit, #PublicIPEdit {
    width: 272px;
    padding-left: 21px;
    line-height: 55px;
    font-size: 18px;
    text-align: left;
}

#TimeSettingEdit, #NTPServerEdit {
    padding-left: 17px;
}

#NTPSettingMessage {
    color: ff7e79;
}

#NTPServerEdit {
    width: 289px;
}

#TimeSettingEditButton, #IPAddressEditButton, #GatewayEditButton, #NetMaskEditButton, #DNSEditButton, #NTPServerEditButton,
#HostnameEditButton, #ScheduleTimeEditButton {
    width: 22px;
    height: 22px;
    margin-top: 14px;
}

#RTPPortUDPEditButton, #H245PortTCPEditButton, #PublicIPEditButton {
	margin-top: 10px;
}

#InfoModelName, #InfoFirmwareVersion, #InfoSerialNumber, #InfoIPAddr, #InfoMACAddr, #InfoTime {
    /*width: 296px;
    height: 60px;*/
}

#AllowCollectDataExplanation {
    width: 24px;
    height: 24px;
    margin-left: 10px;
    background: url("images/Help_up.svg");
}

#AllowCollectDataExplanation:hover {
    background: url("images/Help_on.svg");
}

#AllowCollectDataExplanation:active {
    background: url("images/Help_dw.svg");
}

#UploadCertKeyName, #UploadCertPemName {
    word-wrap:break-word;
}

#Monitor1HDMI, #Monitor1TypeC, #Monitor1VB370A, #Monitor2HDMI, #Monitor2TypeC {
    width: 30px;
    height: 30px;
}
/*Audio*/
#NoiseSuppression {
    padding-top: 18px;
}

#NoiseSuppressionValue {
    width: 280px;
}
/*AVerVideoRoomGeneral*/
#DualStreamBandwidthSliderbar {
	width: 200px;
}
/*H323 & SIP*/
#H323LoginStatusIcon, #SIPLoginStatusIcon {
	width: 33px;
	height: 30px;
	margin-left: 60px;
	margin-bottom: 22px;
	background: gray;
}

#H323LoginInfo, #SIPLoginInfo{
	height: 130px;
}

#H323LoginProcess1Back, #H323LoginProcess2Back, #SIPLoginProcess1Back, #SIPLoginProcess2Back, #SIPLoginProcess3Back {
	width: 42px;
	height: 42px;
	margin-left: 50px;
	margin-top: 40px;
	background: url("images/back_up.svg");
}

#H323LoginProcess1Back:hover, #H323LoginProcess2Back:hover, #SIPLoginProcess1Back:hover, #SIPLoginProcess2Back:hover, #SIPLoginProcess3Back:hover {
	background: url("images/back_on.svg");
}

#H323LoginProcess1Back:active, #H323LoginProcess2Back:active, #SIPLoginProcess1Back:active, #SIPLoginProcess2Back:active, #SIPLoginProcess3Back:active {
	background: url("images/back_dw.svg");
}

#H323Authentication .BlockBackground {
	margin-left: calc(50% - 176px);
	margin-top: 0px;
	margin-bottom: 0px;
}

#SIPTransportProtocol .BlockBackground {
	margin-left: calc(50% - 263px);
	margin-top: 0px; 
	margin-bottom: 0px;
}

#H323SkipButton {
	margin-right: 0px;
}
/*Firewall*/
#RTPPortUDPEdit, #H245PortTCPEdit, #PublicIPEdit {
    width: 272px;
    padding-left: 21px;
    line-height: 55px;
    font-size: 18px;
    text-align: left;
}

#RTPPortUDP, #H245PortTCP, #NATandFirewall {
	margin-bottom: 30px;
}

#RTPPortUDP {
	margin-top: 38px;
}

#RTPPortUDPEditDIV, #H245PortTCPEditDIV, #PublicIPEditDIV {
	margin-left: 60px;
}

#RTPPortUDPEdit, #H245PortTCPEdit, #PublicIPEdit {
	width: 292px;
	padding-left: 30px;
}

.PortSettingLine {
	width: 40px;
	height:2px;
	margin-left:5px;
	margin-top:25px;
	margin-right:5px;
	background:#4c4c4c;
}
/*Dialog*/
.Dialog {
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: center;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 9999;
}
/*Height 134px*/
.DialogSize1 {
    width: 600px;
    height: 134px;
}
/*Height 142px*/
.DialogSize2 {
    width: 600px;
    height: 142px;
}
/*Height 149px*/
.DialogSize3 {
    width: 600px;
    height: 149px;    
}
/*Height 161px*/
.DialogSize4 {
    width: 600px;
    height: 161px;    
}
/*Height 181px*/
.DialogSize5 {
    width: 600px;
    height: 181px;    
}
/*Height 201px*/
.DialogSize6 {
    width: 600px;
    height: 201px;   
}
/*Height 228px*/
.DialogSize7 {
    width: 600px;
    height: 228px;    
} 
/*Height 260px*/
.DialogSize8 {
    width: 600px;
    height: 260px;    
}
/*Height 300px*/
.DialogSize9 {
    width: 600px;
    height: 300px;    
} 

.DialogBackground, .LoginBackground {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    font-size: 16px;
    z-index: 9998;
    overflow-y: auto;
}

.DialogBackground {
    min-width: 1600px;
}

.LoginBackground {
    background: url("images/background.svg");
    background-repeat: no-repeat;
    background-size: cover;
}

.MessageFormat {
    white-space: pre-wrap;
    line-height: 30px;
}
/*Message 0 Line*/
.MessageBlockSize0 {
    height: 0px;
}
/*Message 1 Line*/
.MessageBlockSize1 {
    height: 20px;
}
/*Message 2 Lines*/
.MessageBlockSize2 {
    height: 70px;
}
/*Message 3 Lines*/
.MessageBlockSize3 {
    height: 100px;
}
/*Message 4 Lines*/
.MessageBlockSize4 {
    height: 130px;
}

/*Message 1 Line and Progressbar*/
.MessageBlockSize5 {
    height: 40px;
}

.MessageBlockColorGray {
    color: #969696;
}

.MessageBlockColorRed {
    color: #ff7e79;
}

.CustomProgressBar, .MessageCustomProgressBar {
    position: relative;
    width: 1483px;
    height: 50px;
    line-height: 50px;
    /*margin-left: 60px;*/
    top: 18px;
    color: white;
    background-color: #767676;
    /*border: 3px solid #222222;*/
    border-radius: 5px;
    display: flex;
    text-align: center;
}

.MessageCustomProgressBar {
    top: 100px;
    left: calc(calc(100vw - 1233px) / 2);
    width: 1233px;
}

.CustomProgressBarDivideLine {
    /*position: absolute;*/
    /*left: 159px;*/
    margin-top: 3px;
    width: 1px;
    height: 44px;
    border-left: 1px solid #ffffff;
}

#CustomProgressBarTask {
    /*position: absolute;*/
    width: 160px;
    height: 50px;
    background: #464646;
    color: #ececec;
    text-align: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 21px;
}

.MessageCustomProgressBar #CustomProgressBarTask {
    width: 240px;
}

#CustomProgressBarTaskHint {
    /*position: absolute;*/
    /*left: 178px;*/
    white-space: pre-wrap;
    margin-left: 20px;
    font-size: 16px;
    line-height: 24px;
}

#CustomProgressBarProgressPart {
    position: absolute;
    width: 1483px;
    height: 50px;
    background: -webkit-linear-gradient(left, #767676 0%, #767676 100%);
    background: -moz-linear-gradient(left, #767676 0%, #767676 100%);
    background: -ms-linear-gradient(left, #767676 0%, #767676 100%);
    background: linear-gradient(left, #767676 0%, #767676 100%);
    border-radius: 5px;
    text-align: left;
    display: flex;
}

.MessageCustomProgressBar #CustomProgressBarProgressPart {
    width: 1233px;
}

#CustomProgressBarLeftButton, #CustomProgressBarMiddleButton, #CustomProgressBarRightButton, #EditPWCustomProgressBarMiddleButton, #EditPWCustomProgressBarRightButton {
    position: absolute;
    width: 164px;
    height: 42px;
    line-height: 42px;
    margin-top: 4px;
    border: none;
    border-radius: 20px;
    font-size: 21px;
}

#CustomProgressBarLeftButton {
    right: 341px;
}

#CustomProgressBarMiddleButton, #EditPWCustomProgressBarMiddleButton {
    right: 172px;
}

#CustomProgressBarRightButton, #EditPWCustomProgressBarRightButton {
    right: 3px;
}

#CustomProgressBarLeftButton:disabled, #CustomProgressBarMiddleButton:disabled, #CustomProgressBarRightButton:disabled,
#EditPWCustomProgressBarMiddleButton:disabled, #EditPWCustomProgressBarRightButton:disabled {
    background-color: white;
    color: orange;
}

.DialogContent {
    position: relative;
    top: 120px;
    left: calc(calc(100vw - 1133px) / 2);
    width: 1133px;
    text-align: center;
    white-space: pre-wrap;
}

.DialogContentWhitespaceNormal {
    white-space: normal;
}

.DialogContentWidth1600 {
    position: relative;
    top: 120px;
    left: calc(calc(100vw - 1600px) / 2);
    width: 1600px;
    text-align: center;
    white-space: pre-wrap;
}

.donate-now-blue {
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;
	text-align: center;
	font-size: 14px;
}

.donate-now-blue li {
	float: left;
    margin: 0 5 0 0;
    width: 80px;
    height: 30px;
    position: relative;
}

.donate-now-blue label, .donate-now-blue input {
    position: absolute;
    padding-top: 5px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	background: url("images/BT_254_dw.svg");
    color:#646464;
}

.donate-now-blue input[type="radio"] {
    opacity: 0.011;
    z-index: 100;
}

.donate-now-blue input[type="radio"]:checked + label {
    background: #5e5e5e;
	color: #ffffff;
}

.donate-now-blue input[type="radio"]:disabled + label {
    background: #303030;
    color: #505050;
    border-color: #464646;
}

.donate-now-blue input[type="radio"]:active + label {
    background: #0074f2;
    color: #d9d9d9;
}

.donate-now-blue input[type="radio"]:active:disabled + label {
    background: #303030;
    color: #505050;
    border-color: #464646;
}

.donate-now-blue input[type="radio"]:checked:disabled + label {
    background: #303030;
	color: #505050;
    border-color: #464646;
}

.donate-now-blue input[type="radio"]:checked:hover + label {
    color: #ffffff;
    background: #00d0ff;
}

.donate-now-blue label {
    border-left: 1px solid #5e5e5e;
    border-top: 1px solid #5e5e5e;
    border-bottom: 1px solid #5e5e5e;
    cursor: pointer;
    z-index: 90;
}

.donate-now-blue label:hover {
    color: #ffffff;
    background: #00d0ff;
}

.BlockGroupName {
    padding-left: 58px;
    padding-top: 0px;
    padding-bottom: 30px;
    background-color: #151515;
    color: #ffffff;
    /*border-left: 1px solid #0ab1fc;*/
    font-size: 21px;
}

.Line {
    position: relative;
    top: -13px;
    height: 1px;
    border-bottom: 1px solid #ffffff;
    opacity: 0.3;
}

.DashedLine {
    position: relative;
    height: 1px;
    top: 13px;
    border-bottom: 2px dashed #ffffff;
    opacity: 0.3;
}

.BlockGroupNameDisabled {
    color: #505050;
}

.BlockName {
    margin-bottom: 12px;
    margin-left: 58px;
    font-size: 18px;
}

.SubBlockName {
    width: 332px;
    height: 20px;
    margin-right: 10px;
    margin-bottom: 15px;
    padding-top: -1px;
    font-size: 18px;
}

.BlockHeight62 {
    height: 62px;
}

.BlockHeight120 {
    height: 120px;
}

.SettingBlock {
    width: 710px;
    height: 62px;
}

.BlockBackground {
    height: 44px;
    display: flex;
    margin-left: 58px;
    margin-bottom: 23px;
    padding-left: 6px;
    padding-top: 6px;
    background: #000000;
    border-radius: 5px;
}

.BlockBackground:hover {
    /*padding-left: 26px !important;
    background-color: #005aaf;
    color: #ffffff;
    border-left: 5px solid #f0af16;*/
}

.BlockBackgroundDisabled {
    padding-left: 30px !important;
    background-color: #303030 !important;
    color: #505050 !important;
    /*border-left: 1px solid #0ab1fc !important;*/
}

.BlockBackgroundDisabled:hover {
    padding-left: 30px !important;
}

.BlockBackgroundWidth172 {
    width: 166px;
}

.BlockBackgroundWidth526 {
    width: 526px;
}

.BlockBackgroundWidth526x200 {
    width: 526px;
    height: 132px;
}

.BlockBackgroundWidth346 {
    width: 346px;
}

.BlockBackgroundWidth558x146 {
    width: 552px;
    height: 146px;
}

.BlockBackgroundWidth690 {
    width: 690px;
}

.BlockBackgroundWidth698 {
    width: 698px;
}

.BlockBackgroundWidth706 {
    width: 706px;
}

.BlockBackgroundWidth1426 {
    width: 1426px;
}

.BlockBackgroundWidth1500 {
    width: 1500px;
}

.BlockBackgroundWidth1048 {
    width: 1048px;
}

.BlockBackgroundWidth1238 {
    width: 1238px;
}

.BlockBackgroundWidth1312 {
    width: 1306px;
}

.BlockBackgroundWidth1432 {
    width: 1426px;
}

.BlockBackgroundWidth870 {
    width: 870px;
}

.BlockBackgroundWidth518 {
    width: 518px;
}

.BlockBackgroundWidth886 {
    width: 886px;
}

.BlockBackgroundWidth886x200 {
    width: 886px;
    height: 132px;
}

.BlockBackgroundWidth832 {
    width: 832px;
}

.BlockBackgroundWidth926 {
    width: 926px;
}

.BlockBackgroundWidth738 {
    width: 738px;
}

.BlockBackgroundWidth338 {
    width: 338px;
}

.SubBlockBackground {
    width: 332px;
    height: 50px;
    margin-right: 15px;
    margin-bottom: 30px;
    line-height: 50px;
    color: #ffffff;
    background: #4c4c4c;
    border-radius: 3px;
    font-size: 18px;
    text-align: center;
}

.SubBlockBackgroundDisabled {
    color: #505050;
    background-color: #303030 !important;
    border-color: #464646 !important;
}

.SubBlockBackground:hover {
    background-color: #00a0ff;
}

.ContentInCenter {
    text-align: center;
}

.EditTextWidth80 {
    width: 80px;
}

.EditTextWidth140 {
    width: 140px;
}

.EditTextWidth300 {
    width: 300px;
}

.EditTextWidth350 {
    width: 350px;
}

.EditTextWidth400 {
    width: 500px;
}

.EditTextWidth551 {
    width: 551px;
}

.RTMPURLEditText {
    width: 506px;
}

.EditText, .CustomSelect {
    background-color: #4c4c4c;
    color: #ffffff;
    height: 50px;
    border: 1px solid #767676;
    border-radius: 3px;
    text-align: center;
    font-size: 18px;
}

.EditText:hover, .CustomSelect:hover {
    background-color: #3f3f3f;
    border-color: #ffffff;
}

.EditText:focus, .CustomSelect:focus {
    background-color: #303030;
    border-color: #ffffff;
}

.EditTextWithButton {
    width: 330px;
    display: flex;
}

.EditTextDisabled {
    background: #5b5b5b !important;
    color: #a5a5a5 !important;
    border-color: #767676 !important;
}

.EditTextFirewallPort {
	width: 332px;
	line-height: 55px;
}

.EditTextSIPH323Info {
	width: 332px;
	line-height: 55px;
	margin-right: 15px;
}

.SingleButton {
    background: #232323;
    color: #646464;
    width: 249px;
	height: 30px;
	border: 1px solid #5e5e5e;
    border-radius: 3px;
	box-shadow: none;
    font-size: 14px;
}

.SingleButton:hover {
    background: #00a0ff;
    color: #ffffff;
}

.SingleButton:active {
    background: #0074f2;
    color: #ffffff;
}

.SingleButton:disabled {
    background: #303030;
    color: #505050;
    border-color: #464646;
}

.SingleButtonStateRed {
    background: #ff0000;
    color: #ffffff;
    width: 249px;
	height: 30px;
	border: 1px solid #5e5e5e;
    border-radius: 3px;
	box-shadow: none;
    font-size: 14px;
}

.SingleButtonStateRed:disabled {
    background: #aa0000;
    color: #aaaaaa;
}

.RoundedBorder {
    border-radius: 5px 5px 5px 5px;
    border-right: 1px solid #5e5e5e;
}

.rightRoundedBorder {
    border-radius: 0px 5px 5px 0px;
    border-right: 1px solid #5e5e5e;
}

.leftRoundedBorder {
    border-radius: 5px 0px 0px 5px;
}

li.ButtonWithWidth260 {
     width: 260px;
}

li.ButtonWithWidth140 {
     width: 140px;
} 

li.ButtonWithWidth62 {
     width: 62px;
} 

.RenderBlueLeftBorder {
    border-left: 1px solid #0ab1fc;
}

.ProgressBarBackground {
    width: 470px;
    height: 30px;
    background-color: #3f3f3f;
    border: 1px solid #ffffff;
    border-radius: 3px;
}

.ProgressBar {
    width: 0%;
    height: 28px;
    padding-top: 4px;
    color: #ffffff;
    background-color: #1d4b7e;
    border-radius: 3px;
}

::-webkit-scrollbar {
    width: 15px;
}

#PresetButtons::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar-button {    
    background-size: 100%;
    height: 15px;
    width: 15px;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-button:start:decrement {
    background: url("images/scroll_up.png");
}

::-webkit-scrollbar-button:end:increment {
    background: url("images/scroll_dw.png");
}

::-webkit-scrollbar-button:start:decrement:hover {
    background: url("images/scroll_up_hover.png");
}

::-webkit-scrollbar-button:end:increment:hover {
    background: url("images/scroll_dw_hover.png");
}

::-webkit-scrollbar-track {
    background: #767676; 
}

::-webkit-scrollbar-thumb:hover {
    background: #cdcdcd; 
}

::-webkit-scrollbar-thumb {
    border-left: 2px solid #767676;
    border-right: 2px solid #767676;
    background: #cdcdcd; 
}

.StylishRadioButton, .CustomProgreebarStylishRadioButton {
    position: relative;
    height: 38px;
    line-height: 36px;
    margin-bottom: 31px;
    margin-right: 20px;
    border-radius: 25px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    z-index: 90;
    cursor: default;
}

.StylishRadioButtonWidth74 {
    width: 74px;
}

.StylishRadioButtonWidth80 {
    width: 70px;
    height: 28px;
    margin-right: 10px;
    margin-bottom: 17px;
}

.StylishRadioButtonWidth160 {
    width: 160px;
}

.StylishRadioButtonWidth180 {
    width: 180px;
}

.StylishRadioButtonWidth160withIcon {
    width: 160px;
    margin-bottom: 15px;
}

.StylishRadioButtonWidth220 {
    width: 220px;
}

.StylishRadioButtonWidth332 {
    width: 332px;
}

.StylishRadioButtonWidth186 {
    width: 186px;
    margin-bottom: 15px;
    display: flex;
}

.StylishRadioButtonWidth390 {
    width: 390px;
}

.StylishRadioButtonWidth500 {
    width: 500px;
}

.StylishRadioButtonRightmost {
    margin-right: 6px;
}

.SingleStylishRadioButton {
    margin-left: 58px;
}

.CustomProgreebarStylishRadioButton {
    width: 164px;
    height: 42px;
    margin-right: 0px;
}

.ButtonFrontSide, .SingleButtonFrontSide, .ButtonFrontSideRed, .SavePresetButtonFrontSide, .SingleButtonFrontSideBlue {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    line-height: 39px;
    background: #5c5c5c;
    border-radius: 5px;
    font-size: 18px;
}

.ButtonFrontSideLineHeight {
    line-height: 26px;
}

.ButtonFrontSideLineHeight {
    line-height: 26px;
}

.DropdownButtonSelect {
    position: relative;
    width: 76%;
    height: 38px;
    line-height: 36px;
    color: #ffffff;
    border-radius: 25px 0 0 25px;
    font-size: 14px;
    text-align: center;
    z-index: 90;
}

.DropdownButtonDrop {
    position: relative;
    width: 24%;
    height: 38px;
    margin-left: 1%;
    line-height: 36px;
    color: #ffffff;
    border-radius: 0 25px 25px 0;
    font-size: 14px;
    text-align: center;
    z-index: 90;
}

.ButtonFrontSideLineHeight30px {
    line-height: 30px;
}

.SingleButtonFrontSide, .SavePresetButtonFrontSide {
    background: #464646;
    text-shadow: black 1px 1px 2px;
}

.SingleButtonFrontSideBlue {
    background: linear-gradient(to bottom, #47a9ea 5%, #47a9ea 48%, #0087e1 49%, #0087e1 100%);
}

.SavePresetButtonFrontSide {
    line-height: 25px;
    font-size: 14px;
}

.ButtonBackSide, .SingleButtonBackSide, .ButtonBackSideRed, .SingleButtonBackSideBlue {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #5c5c5c;
    border-radius: 5px;
}

.SingleButtonBackSide {
    background: linear-gradient(to top, #919191 0%, #313131 100%);
}

.SingleButtonBackSideBlue {
    background: linear-gradient(to top, #81b1d1 0%, #054570 100%);
}

.ButtonBackSideRed,  .ButtonFrontSideRed {
    background: red;
}

.ButtonMask {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.0);
    border-radius: 5px;
}

.ButtonLeftRound {
    left: 2px;
    width: calc(100% - 2px);
    border-radius: 5px 0 0 5px;
}

.ButtonRightRound {
   left: 0px;
    width: calc(100% - 2px);
    border-radius: 0 5px 5px 0;
}

.ButtonFrontSide.ButtonRightRound {
    background: url(images/Edit_up.svg) no-repeat, #5c5c5c;
}

.ButtonMask:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.ButtonFrontSideDisabled {
    pointer-events: none;
    opacity: 0.4;
    z-index: 100;
}

.Action {
    width: 164px;
    height: 42px;
    padding-bottom: 5px;
    color: white;
    background: url(images/BT_orange_up.svg) no-repeat;
    font-size: 21px;
    border: none;
    text-shadow: black 1px 1px 2px;
}

.Action:hover {
    background: url(images/BT_orange_on.svg) no-repeat;
}

.Action:active {
    background: url(images/BT_orange_dw.svg) no-repeat;
}

.NameEdit:focus {
    outline: none;
}

.EditByClickButton {
    height: 100%;
    color: #ffffff;
    background: transparent;
    border:none;
    text-align: center;
}

.EditButton, .EditButtonHostname {
    float: right;
    width: 30px;
    height: 30px;
    border: none;
    background: url(images/Edit_up.svg) no-repeat;
    background-size: 100% 100%;
}

.EditButtonPresetName {
    width: 14px;
    height: 14px;
    margin-top: 13px;
}

.EditButton:hover, .EditButtonHostname:hover {
    background: url(images/Edit_on.svg) no-repeat;
    background-size: 100% 100%;
}

.EditButton:active, .EditButtonHostname:active {
    background: url(images/Edit_dw.svg) no-repeat;
    background-size: 100% 100%;
}

.EditButton:disabled, .EditButtonHostname:disabled {
    background: url(images/Edit_un.svg) no-repeat;
    background-size: 100% 100%;
}

.EditPresetName {
    width: 185px;
}

.Ver2EditPresetName {
    width: 130px;
    height: 19px;
    margin-top: 10px;
}

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

button:focus {
    outline: 0;
}
input:focus {
    outline: 0;
}

input[type=range] {
    -webkit-appearance: none;
    width: 346px;
    height: 6px;
    background: #737373;
    box-shadow: 0px 2px 0 0 rgba(19, 6, 12, 0.42);
    transition: background 450ms ease-in;
}

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

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background-color: #0e0e0e;
    margin-top: -1px;
    border: solid 3px #b1b1b1;
}

input[type=range]:disabled::-webkit-slider-thumb {
    background-color: #737373;
    border: solid 3px #737373;
}

select{
    background: url(images/Arrow2_List_up.svg) no-repeat;
    -webkit-appearance: none;
    background-position: 280px 8px;
}

input[type=checkbox] {
    border: none;
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type=checkbox]:focus{
    outline:0;
}

input[type=checkbox] {
    display: inline-block;
    padding: 0 0 0 0px;
    background: url(images/keep_ip_un.svg) no-repeat;
    height: 40px;
    width: 40px;;
}

input[type=checkbox].SmallCheckbox {
    display: inline-block;
    padding: 0 0 0 0px;
    background: url(images/radio_button2_on.svg) no-repeat;
    height: 23px;
    width: 23px;
}

input[type=checkbox]:checked {
    background: url(images/keep_ip_up.svg) no-repeat;
    height: 40px;
    width: 40px;
    display: inline-block;
}

input[type=checkbox]:checked.SmallCheckbox {
    background: url(images/radio_button1_on.svg) no-repeat;
    height: 23px;
    width: 23px;
    display: inline-block;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.0) inset;
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: white !important;
}