@font-face {
    font-family: 'RalewayItalic';
    src: url('./Raleway/Raleway-Italic-VariableFont_wght.ttf');
    font-family: 'RalewayVariable';
    src: url('./Raleway/Raleway-VariableFont_wght.ttf');
}

* {
    font-family: 'RalewayVariable';
}

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    /*  font-family: Roboto; */
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 20px;
    color: #000000;
}

b{
    font-weight: bold;
}

.modifypwd input[type='password'],
.sign input#uname,
.sign input#password {
    color: #000000 !important;
    text-align-last: left;
}
.modifypwd input::-webkit-input-placeholder,
.sign input::-webkit-input-placeholder {
    color: #9999a6 !important;
    background: #FFFFFF !important;
}

html {
    height: 100%;
}

body {
    background-color: #000000;
}

 nav[role='navigation'].active {
    margin-bottom: 50px;
    min-width: 250px;
}

.nav_link {
    display: block;
    color: #000000;
    display: -webkit-box;
    display: flex !important;
    -webkit-box-align: center;
    align-items: center;
    line-height: 45px;
    border-radius: 5px;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    /* white-space: nowrap; */
    border-radius: 5px;
    padding: 3px 0px 3px 5px; 
    /* padding-left: 5px;
    padding-top: 2px;*/
    min-height: 40px;
    justify-content: flex-start;
}

.nav_link:hover,
.nav_link:active,
.nav_link:focus,
.nav_active {
    text-decoration: none;
    /* color: #000000;
    background-color: #D5EBF8 !important; */
}

.nav-items ul{
    display: none;
}

.nav-items>.nav_link:focus,
.nav-items>.nav_link:active{
    background-color:unset !important;
}

.nav-items-show{
    display: block;
}

.active .nav_subitem{
    justify-content: end;
    /*padding-left: 12px;*/
}

.nav-items .nav_link div.nav_sub_name span{
    width: 170px;
}

.glyphicon-menu-down:before,
.glyphicon-menu-up:before{
    font-size: 22px;
}

.nav_sub_name,
.nav_name {
    display: flex;
    align-items: start;
    flex-direction: column;
    padding: 2px 0px 0px 7px;
}
.nav_sub_name span,
.nav_name span {
    text-align: left;
    /* color: #3A525E; */
    font-weight: bold;
    align-items: center;
    white-space: nowrap;
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
}

.nav_name small {
    text-align: left;
    font-size: 70%;
    /* color: #3A525E; */
    font-family: Arial;
    text-align: left;
    font-size: 70%;
    /* color: #3A525E; */
    font-family: Arial;
    overflow-wrap: break-word;
    width: 200px;
}

.preview-icon {
    width: 36px;
    height: 30px;
    display: flex;
    background: url(./his_images/videocam_black_24dp.svg) no-repeat center;
    flex-direction: column;
    justify-content: center;
}

.audiovideo-icon {
    width: 24px;
    height: 30px;
    display: flex;
    background: url(./his_images/video_settings_black_24dp.svg) no-repeat center;
    flex-direction: column;
    justify-content: center;
}

.system-icon {
    width: 24px;
    height: 30px;
    display: flex;
    background: url(./his_images/settings_black_24dp.svg) no-repeat center;
    flex-direction: column;
    justify-content: center;
}

.network-icon {
    width: 24px;
    height: 30px;
    display: flex;
    background: url(./his_images/settings_ethernet_black_24dp.svg) no-repeat center;
    flex-direction: column;
    justify-content: center;
}

.ndi-icon {
    width: 24px;
    height: 30px;
    display: flex;
    background: url(./his_images/video_camera_front_black_24dp.svg) no-repeat center;
    flex-direction: column;
    justify-content: center;
}

.devinfo-icon {
    width: 24px;
    height: 30px;
    display: flex;
    background: url(./his_images/info_black_24dp.svg) no-repeat center;
    flex-direction: column;
    justify-content: center;
}

.profile-icon {
    width: 24px;
    height: 30px;
    display: flex;
    background: url(./his_images/input_black_24dp.svg) no-repeat center;
    flex-direction: column;
    justify-content: center;
}

.locale-icon {
    width: 24px;
    height: 30px;
    display: flex;
    background: url(./his_images/language_black_24dp.svg) no-repeat center;
    flex-direction: column;
    justify-content: center;
    margin-left: 20px;
}

.cancel-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url(./his_images/cancel_black_24dp.svg) no-repeat center;
}

.apply-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url(./his_images/task_alt_black_24dp.svg) no-repeat center;
}

.default-icon,
.refresh-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url(./his_images/settings_backup_restore_black_24dp.svg) no-repeat center;
}

.undo-icon,
.restart-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url(./his_images/restart_alt_black_24dp.svg) no-repeat center;
}

.download-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url(./his_images/file_download_black_24dp.svg) no-repeat center;
}

.home-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url(./his_images/home_black_24dp.svg) no-repeat center;
}

.save-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url(./his_images/save_black_24dp.svg) no-repeat center;
}

.remove-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url(./his_images/cancel_black_24dp.svg) no-repeat center;
}

.arrowup-icon {
    width: 24px;
    height: 24px;
    border: 2px solid #000;
    border-radius: 20px;
    display: inline-block;
    background: url(./his_images/arrow_drop_up_black_24dp.svg) no-repeat center;
}

.arrowdown-icon {
    width: 24px;
    height: 24px;
    border: 2px solid #000;
    border-radius: 20px;
    display: inline-block;
    background: url(./his_images/arrow_drop_down_black_24dp.svg) no-repeat center;
}

.info-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url(./his_images/info_black_24dp.svg) no-repeat center;
}

.icon {
    cursor: pointer;
    border-radius: 20px;
}

.icon:focus,
.icon:hover {
    background-color: #e6e6e6;
}

.icon:active {
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 5%);
    outline: 0;
}

button.btn_arrowdown {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #000;
    border-bottom: unset;
    background-color: unset;
    outline: unset;
}

button.btn_arrowdown:focus,
button.btn_arrowdown:hover,
button.btn_arrowdown:visited {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #494a4b;
    border-bottom: unset;
    background-color: unset;
    outline: unset;
}

button.btn_arrowdown:active {
    position: relative;
    top: 1px;
    box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    outline: 0;
}

button.btn_arrowup {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #000;
    border-top: unset;
    background-color: unset;
    outline: unset;
}

button.btn_arrowup:hover,
button.btn_arrowup:focus,
button.btn_arrowup:visited {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #494a4b;
    border-top: unset;
    background-color: unset;
    outline: unset;
    box-shadow: inset 0 4px 00 rgba(0, 0, 0, 0.2);
}

button.btn_arrowup:active {
    position: relative;
    top: -1px;
    box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    outline: 0;
}

button.btn_navdown {
    width: 0 !important;
    height: 0 !important;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #000;
    border-bottom: unset;
    background-color: unset;
    outline: unset;
}

button.btn_navdown:focus,
button.btn_navdown:hover,
button.btn_navdown:visited {
    outline: unset;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #494a4b;
    background-color: unset;
    border-bottom: unset;
    box-shadow: inset 0 4px 00 rgba(0, 0, 0, 0.2);
}

button.btn_navdown:active {
    position: relative;
    top: 1px;
    box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    outline: 0;
}

button.btn_navup {
    width: 0 !important;
    height: 0 !important;
    border-left: 30px solid transparent !important;
    border-right: 30px solid transparent !important;
    border-bottom: 30px solid #000;
    border-top: unset;
    background-color: unset;
    outline: unset;
}

button.btn_navup:hover,
button.btn_navup:visited,
button.btn_navup:focus {
    border-left: 30px solid transparent !important;
    border-right: 30px solid transparent !important;
    border-bottom: 30px solid #494a4b !important;
    border-top: unset;
    background-color: unset;
    outline: unset;
}

button.btn_navup:active {
    position: relative;
    top: -1px;
    box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    outline: 0;
}

button.btn_navleft {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid #000;
    border-bottom: 30px solid transparent;
    border-left: unset;
    background-color: unset;
    outline: unset;
}


/* button.btn_navleft, */

button.btn_navleft:focus,
button.btn_navleft:hover,
button.btn_navleft:visited {
    border-top: 30px solid transparent;
    border-right: 30px solid #494a4b;
    border-bottom: 30px solid transparent;
    border-left: unset;
    background-color: unset;
    outline: unset;
}

button.btn_navleft:active {
    position: relative;
    left: -1px;
    box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    outline: 0;
}

button.btn_navright {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-left: 30px solid #000;
    border-bottom: 30px solid transparent;
    border-right: unset;
    background-color: unset;
    outline: unset;
}

button.btn_navright:visited,
button.btn_navright:focus,
button.btn_navright:hover {
    border-top: 30px solid transparent;
    border-left: 30px solid #494a4b;
    border-bottom: 30px solid transparent;
    border-right: unset;
    background-color: unset;
    outline: unset;
}

button.btn_navright:active {
    position: relative;
    left: 1px;
    box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    outline: 0;
}

.iconsize {
    font-size: 30px;
}

pageheader,
pagelocale {
    color: #ffffff;
    display: block;
}

.device_div {
    height: 20px;
    text-align: left;
    line-height: 20px;
}

.active .device_div {
    display: flex;
    justify-content: space-between;
}

.device_span {
    opacity: 0;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.active .device_span {
    opacity: 1;
}

.title_div {
    display: none;
    opacity: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.header_name {
    display: none;
    min-height: 100px;
    align-items: center;
    white-space: nowrap;
    opacity: 0;
}

.active .header_name,
.active .title_div {
    opacity: 1;
    display: block;
}

.header_name span {
    font-weight: bold;
    width: 120px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.header_name div#logo {
    /* background: url(./images/logo.png) no-repeat center center; */
    /* background: url(./images/logo.png) no-repeat center center; */
    width: 100%;
    min-height: 100px;
    /* width: 120px; */
    /* background-size: cover; */
    background-image: url(./images/logo.png);
    background-repeat: no-repeat;
    /* background-size: 100% 100%; */
    background-size: contain;
    background-position: center;
}

.powerby_name {
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-direction: row;
    justify-content: center;
}

.locale_name {
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-direction: column;
    justify-content: center;
}

.powerby {
    width: 130px;
    height: 43px;
    background-image: url(./images/PTZOptics_powerby.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    /* background-size: 100% 100%; */
    background-size: contain;
    background-position: center;
    margin-left: 5px;
}

.sign_center {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

.sign_box{
    width: 600px;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sign_powerby {
    /* position: fixed;
    right: 100px;
    bottom: 100px;
    width: 477px; */
    height: 50px;
    background-image: url(./images/PTZOptics_powerby.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    /* background-size: 100% 100%; */
    background-size: contain;
    background-position: center;
    /* margin-left: 5px; */
}

.powerby_name span {
    font-size: 10px;
}

.locale_name span {
    font-size: 15px;
}

.form-horizontal {
    padding: 20px 0px 30px 50px;
}

.form-horizontal .form-actions {
    padding-left: transparent;
    padding-left: unset;
    padding: transparent;
    padding: unset;
    background-color: transparent;
    border-top: transparent;
}

.form_hr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 6px;
    width: 50%;
    margin-top: 0px;
}

.mbottom0 {
    margin-bottom: 0px !important;
}

.mbottom10 {
    margin-bottom: 10px;
}

.mtop0 {
    margin-top: 0px !important;
}

.mtop5 {
    margin-top: 5px !important;
}

.mtop15 {
    margin-top: 15px !important;
}

.mtop20 {
    margin-top: 20px !important;
}

.mtop50 {
    margin-top: 50px !important;
}

.mtop200 {
    margin-top: 200px !important;
}

.mtop300 {
    margin-top: 300px !important;
}

.pad200px {
    padding: 0px 216px !important;
}

@media screen and (max-width: 700px) {
    .pad200px {
        padding: 0px 0px !important;
    }

    .mtop300 {
        margin-top: 0px !important;
    }
}

.mleft0 {
    margin-left: 0px !important;
}

.mleft10 {
    margin-left: 10px !important;
}

.mleft30 {
    margin-left: 30px !important;
}

.mleft50 {
    margin-left: 50px !important;
}

.mleft152 {
    margin-left: 150px !important;
}

.mleft340 {
    margin-left: 340px;
}

.mleft370 {
    margin-left: 370px;
}

.mleft400 {
    margin-left: 405px;
}

.mleft410 {
    margin-left: 410px !important;
}

.mright90 {
    margin-right: 90px !important;
}

.pleft0 {
    padding-left: 0px;
}

.ptop100 {
    padding-top: 100px;
}

.ptop130 {
    padding-top: 130px;
}

.aligncenter {
    text-align: center;
}

.aligncenter label {
    color: #ffffff;
    cursor: auto;
}

.aligncenter label+label {
    margin-bottom: 20px
}

.aligncenter a {
    color: #ffffff;
    cursor: pointer;

}

hr {
    border-bottom: 3px solid #000;
    width: 100%;
}

div.legend {
    padding: 0;
    margin-bottom: 20px;
}

legend {
    font-family: Arial;
    font-weight: bold;
    font-size: 22px;
    border-bottom: unset;
    color: unset;
    margin-bottom: 10px;
}

legend+.control-group {
    margin-top: 10px;
}

.input-append select {
    font-size: 16px;
}

textarea,
select,
/* .input-append select, */
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
.uneditable-input {
    font-family: Arial;
    /* background: #F7F7F7; */
    background: #3D3F40;
    font-size: 16px;
    line-height: 23px;
    text-align: center;
    text-align-last: center;
}

select option {
    font-family: Arial;
    /* background: #F7F7F7; */
    font-size: 16px;
    line-height: 23px;
    text-align: left;
}

select.gray,
select option.gray {
    color: #605e5e !important;
}

label,
button,
textarea {
    line-height: 23px;
    font-size: 18px;
    font-family: Arial;
}

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    /*  color: #000; */
    /* videre/grey/1 */
    /*  background: #F7F7F7; */
    /* videre/blue */
    /* border: 2px solid #000; */
    border: 2px solid #7E7E7E;
    border-radius: 5px;
    box-shadow: unset;
}

input[type="checkbox"]:focus,
input[type="checkbox"]:active,
input[type="checkbox"]:visited,
input[type="checkbox"] {
    position: relative;
    width: 24px;
    height: 24px;
    -webkit-appearance: none;
    /* border-radius: 4px;
    background: #FFFFFF;
    border: 1px solid #CFCFCF; */
    background-image: url(./his_images/check_box_outline_blank_white_24dp.svg);
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
    margin-left: 190px;
    outline: 0;
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0px;
    width: 99%;
    height: 100%;
    background-image: url(./his_images/check_box_white_24dp.svg);
    background-repeat: no-repeat;
    background-position: center;
    outline: 0;
}

.form-horizontal .control-group {
    margin-bottom: 10px;
}

.control-group.error .control-label,
.control-group.error .help-block,
.control-group.error .help-inline {
    color: #b94a48 !important;
}

.form-horizontal .control-label,
label.control-label {
    cursor: default;
    text-align: left;
    width: 290px;
    margin-bottom: 10px;
}

.help-line {
    /* display: inline-block;
    *display: inline; */
    /* display: none; */
    padding-left: 5px;
    vertical-align: middle;
    *zoom: 1;
    font-size: 16px;
    font-family: Arial;
}

.control-group.error .help-line {
    color: #b94a48 !important;
    display: inline-block;
    *display: inline;
}

.inline_flex {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.vflex {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.hflex {
    display: flex;
    /* flex: 1; */
    justify-content: center;
    align-items: baseline;
    flex-wrap: nowrap;
    flex-direction: row;
}

.flexstart {
    align-items: start;
}

.flexcenter {
    align-items: center;
}

.flexbaseline {
    align-items: baseline;
}

.flexend {
    align-items: end;
}

.flexwrap {
    /*  flex-wrap: wrap; */
}

.flexsparound {
    justify-content: space-around;
}

.flexjuststart {
    justify-content: flex-start;
}

.flexjustend {
    justify-content: flex-end;
}

input[disabled],
input[disabled]:focus,
select[disabled],
textarea[disabled],
input[readonly],
input[readonly]:focus,
select[readonly],
textarea[readonly] {
    cursor: not-allowed;
    /*  background: rgba(31, 69, 230, 0.1); */
    /* videre/grey/3 */
    border: 2px solid #7E7E7E;
    /* box-sizing: border-box;
    height: 31px; */
}

.onepushbtn,
button.btn-normal {
    min-width: 130px;
    height: 40px;
    /* background-color: #C4C4C4; */
    color: #000;
    border: unset;
    box-shadow: unset;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: unset;
    text-shadow: none;
    border-color: #000;
    border-width: 1px;
    border-style: solid;
}

button.btn-normal:visited,
button.btn-normal:hover,
button.btn-normal:focus,
button.btn-normal:active {
    outline: unset;
}

button.btn-wrap {
    word-break: break-word;
    width: 100px;
}

.width100 {
    width: 100px;
}

.width220 {
    width: 220px;
}

.width150 {
    width: 150px !important;
}

.width455 {
    width: 520px;
}

.width400 {
    width: 400px;
}

.width100percent {
    width: 100%;
}

button.btn+button.btn {
    margin-left: 275px;
}

button.btn_ir {
    height: 50px;
    min-width: 105px;
    /* background: transparent; */
    color: #000;
    border: unset;
    box-shadow: unset;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: unset;
    border: 2px solid #000000;
}

button.btn_ir:hover,
button.btn_ir:active,
button.btn_ir:visited,
button.btn_ir:focus {
    outline: unset;
    background-color: #94CDEB;
}

button.btn_ir+button.btn_ir {
    margin-left: 25px;
}

button.btn>span {
    margin-left: 5px;
    text-shadow: none;
}

.div_ctrl+.div_ctrl {
    margin-left: 23px;
}

button.btn_ctrl_icon+button.btn_ctrl_icon,
button.btn_ctrl+.div_ctrl,
button.btn_ctrl+button.btn_ctrl {
    margin-left: unset;
    margin-top: 20px;
}

button.btn_label {
    cursor: default;
    height: 50px;
    min-width: 100px;
    width: 100px;
    background: transparent;
    color: #000;
    border: 3px solid #000;
    box-shadow: unset;
    font-weight: bold;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    outline: unset;
    text-shadow: none;
}

button.btn_ctrl,
button.btn_label {
    height: 50px;
    min-width: 100px;
    width: 100px;
    /* background: transparent; */
    color: #000;
    border: 3px solid #000;
    box-shadow: unset;
    font-weight: bold;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    outline: unset;
    text-shadow: none;
}

button.btn_label:visited,
button.btn_label:active,
button.btn_label:hover,
button.btn_label:focus,
button.btn_label {
    background: transparent;
}

button.btn_ctrl,
button.btn_label,
button.btn_label:focus-visible,
button.btn_ctrl:focus-visible,
button.btn_ctrl:visited,
button.btn_ctrl:active {
    height: 50px;
    min-width: 100px;
    width: 100px;
    /* background: transparent; */
    color: #000;
    border: 3px solid #000;
    box-shadow: unset;
    font-weight: bold;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    outline: unset;
    text-shadow: none;
}

button.btn_ctrl:hover,
button.btn_ctrl:focus {
    outline: unset;
    border: 2px solid rgb(39, 38, 38);
}

button.btn_label:hover,
button.btn_label:focus {
    border: 3px solid #000;
}

button.btn_ctrl>span {
    font-weight: bolder;
}

button.btn_ctrl_icon {
    background: transparent;
    /* border-bottom: unset;
    border-left: unset;
    border-right: unset;
    border-top: unset; */
    padding: unset;
}

button.btn_ctrl_icon+button.btn_ctrl_icon {
    margin-top: 10px;
}

button.btn-wrap+button.btn-wrap {
    margin-top: unset;
}


button.btn_nav:focus-visible,
button.btn_nav:active,
button.btn_nav {
    height: 50px;
    width: 50px;
    min-width: 50px !important;
    background: transparent;
    color: #000;
    border: 3px solid #000;
    box-shadow: unset;
    font-weight: bold;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px !important;
    outline: unset;
}

button.btn_nav:hover,
button.btn_nav:focus {
    outline: unset;
    /*   border: 3px solid #494a4b; */
    border: unset;
}

button.btn_nav:visited,
button.btn_nav:active {
    box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    outline: 0;
    border: 3px solid #494a4b;
}

button.btn_nav+button.btn_nav {
    margin-top: 5px;
    margin-left: unset;
}

.div_nav+.div_nav {
    margin-left: 15px;
}

.upload-fw-drag .el-upload {
    display: block;
}

.el-upload {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: 0;
}

.upload-fw-drag .el-upload-dragger {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    width: 350px;
    height: 225px;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    background: transparent;
}

.el-upload-dragger {
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 360px;
    height: 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.el-upload--picture-card,
.el-upload-dragger {
    -webkit-box-sizing: border-box;
    cursor: pointer;
}

.el-upload-dragger:hover {
    border-color: #ca2c32;
}

.upload-fw-drag .el-upload-dragger .el-upload__text {
    font-size: 35px;
    color: #6e6e6e;
}

.el-upload__input {
    display: none !important;
}

button.el-upload_btn {
    background-color: transparent;
    border: 2px solid #000;
    color: #D6D6D6;
    width: 535px;
    outline: unset;
    text-shadow: none;
    height: 32px;
    border-radius: 5px;
    font-weight: 100;
    cursor: pointer;
}

.el-upload_btn:hover,
.el-upload_btn:focus,
.el-upload_btn:visited,
.el-upload_btn:active,
.el-upload_btn:focus-visible,
.el-upload_btn {
    background: transparent;
    border: 2px solid #000;
    color: #D6D6D6;
    outline: unset;
    text-shadow: none;
}

input[type="range"] {
    /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
    -webkit-appearance: none;
    /*去除默认样式*/
    /* margin-top: 10px; */
    background-color: #ebeff4;
    border-radius: 10px;
    -webkit-appearance: none;
    height: 100%;
    padding: 0;
    border: none;
    /*input的长度为80%，margin-left的长度为10%*/
    /* background: -webkit-linear-gradient(#1F45E6, #1F45E6) no-repeat; */
    background: -webkit-linear-gradient(gray, gray) no-repeat;
    background-size: 0% 100%;
}

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

input[type=range]+span {
    /* margin: 0 64px; */
    color: #383838;
    margin: 0px 4px 0px 20px;
    width: 23px;
    color: #383838;
    width: 50px;
}

span.range {
    font-weight: 300;
    /* font-size: 20px; */
    font-size: 15px;
    line-height: 23px;
    color: #383838;
    margin-left: 8px;
}

span.rangemin {
    min-width: 50px;
    text-align: center;
}


/**圆圈*/

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /*去除默认样式*/
    cursor: pointer;
    top: 0;
    height: 20px;
    width: 20px;
    transform: translateY(0px);
    /*background: none repeat scroll 0 0 #5891f5;*/
    border-radius: 15px;
    /* border: 5px solid #1F45E6; */
    border: 5px solid gray;
    /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/
    -webkit-appearance: none;
    height: 25px;
    width: 25px;
    margin-top: -8px;
    /*使滑块超出轨道部分的偏移量相等*/
    /*  background: #1F45E6; */
    background: gray;
    border-radius: 50%;
    /*外观设置为圆形*/
    /* border: solid 0.125em #1F45E6; */
    border: solid 0.125em gray;
    /*设置边框*/
    /*  box-shadow: 0 .125em .125em #3b4547; */
    /*添加底部阴影*/
}


/**轨道*/

input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 5px;
    /*将轨道设为圆角的*/
    /* box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; */
    background: rgba(31, 69, 230, 0.1);
    /*轨道内置阴影效果*/
}

input[type=range]::-ms-track {
    height: 25px;
    border-radius: 10px;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
    border-color: transparent;
    /*去除原有边框*/
    color: transparent;
    /*去除轨道内的竖线*/
}

input[type=range]::-ms-thumb {
    border: solid 0.125em rgba(205, 224, 230, 0.5);
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background: #ffffff;
    margin-top: -5px;
    box-shadow: 0 .125em .125em #3b4547;
}

input[type=range]::-ms-fill-lower {
    /*进度条已填充的部分*/
    height: 22px;
    border-radius: 10px;
    background: linear-gradient(to right, #059CFA, white 100%, white);
}

input[type=range]::-ms-fill-upper {
    /*进度条未填充的部分*/
    height: 22px;
    border-radius: 10px;
    background: #ffffff;
}

input[type=range]:focus::-ms-fill-lower {
    background: linear-gradient(to right, #059CFA, white 100%, white);
}

input[type=range]:focus::-ms-fill-upper {
    background: #ffffff;
}

.fontbold {
    font-weight: bold;
}

::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
    background-color: #fff;
}

::-webkit-scrollbar {
    width: 0px;
    height: 8px;
    background-color: #fff;
}

::-webkit-scrollbar-thumb {
    background-color: grey;
}

.panel-body-noheader {
    scrollbar-color: transparent transparent;
}


/***easyui**********/

a:hover.l-btn {
    background: #e6e6e6
}

a.l-btn {
    background: #C4C4C4;
    min-width: 120px;
    height: 38px;
    line-height: 45px;
}

a.l-btn span.l-btn-left {
    background-image: unset;
}

.window {
    background: #000;
    border-color: #000
}

.progressbar-value .progressbar-text,
.panel-title {
    color: #fff;
}

.progressbar-value .progressbar-text {
    background-color: grey;
}

.panel-tool a:hover {
    background-color: #000;
}

.progressbar,
.window,
.window .window-body,
.panel-header,
.panel-body {
    border-color: #000;
}

.messager-body {
    border-radius: 5px;
}

.messager-question {
    background: unset;
    width: unset;
    height: unset;
    margin: unset;
}

.dialog-toolbar,
.dialog-button {
    background: unset;
}

.dialog-button {
    text-align: center;
    border-top: unset;
}

a.l-btn .l-btn-focus {
    outline: unset;
}

.messager-button {
    padding-top: unset;
    margin-top: 10px;
}

i.hisicon-info {
    cursor: pointer;
}

form.sign {
    background: transparent;
    border-radius: 10px;
    padding: 46px;
    width: 423px !important;
    min-width: 423px !important;
}

div#modify{
    border-radius: 10px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(119 119 121 / 50%);
}
form.modifypwd{
    background: transparent;
    padding: 0px !important;
    width: auto !important;
    border-radius: 10px;
    text-align: center;
}
form.modifypwd .control-group{
    margin-top: 0px;  
}
form.sign .control-group {
    margin-top: 20px;
}

form.modifypwd .control-group .control-label,
form.sign .control-group .control-label {
    color: #000000;
    font-size: 20px;
    line-height: 23px;
    width: 100%;
}

form.modifypwd  .control-group legend{
    color: #ffffff;
    font-size: 30px;
}

form.modifypwd  .control-group legend.control-label,
form.sign .control-group legend.control-label {
    color: #1F45E6;
    font-weight: bold;
    font-size: 40px;
    line-height: 47px;
    width: 100%;
    text-align: center;
    padding-bottom: 50px;
}

form.modifypwd .control-group .controls input:focus,
form.modifypwd .control-group .controls input,
form.sign .control-group .controls input:focus,
form.sign .control-group .controls input {
    padding: 12px;
    background: #FFFFFF !important;
    border-radius: 0 5px 5px 0;
    outline: unset;
    border-left: 0px;
    border: unset;
    text-align: left;
}
form.modifypwd .control-group .controls .add-on ,
form.sign .control-group .controls .add-on {
    padding: 12px 10px;
    border: unset;
    background: #ffffff;
    text-shadow: unset;
    border-radius: 5px 0 0 5px;
}
form.modifypwd .control-group .controls label.font16,
form.sign .control-group .controls label.font16 {
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    margin-top: 25px;
}
form.modifypwd .control-group .controls button.btn_login,
form.sign .control-group .controls button.btn_login {
    width: 500px;
    padding: 12px;
    font-size: 25px;
    background-color: #49D4FB;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    font-weight: bold;
}
form.modifypwd .control-group .controls button.btn_login:focus,
form.sign .control-group .controls button.btn_login:focus {
    outline: unset;
}

.body {
    background: #1E2446;
    background-image: url(./images/login_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /**fixme 图像会被拉伸*/
    height: 100%;
    overflow: hidden;
    background-position-y: center;
    /*   position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%; */
}

.munset {
    margin: unset !important;
    margin-left: unset !important;
}

ol li {
    list-style-type: auto;
    padding: 5px 0;
}

.presetinput {
    /* width: 200px !important;
    height: 35px !important;
    line-height: 35px !important;
    font-size: 25px !important;
    border-radius: 15px !important;
    border: 3px solid #000 !important; */
    width: 90px !important;
    height: 30px !important;
    line-height: 35px !important;
    font-size: 25px !important;
    border-radius: 15px !important;
    border: 0px solid #000 !important;
    left: 10px;
    top: 4px;
    position: absolute;
}

.presetselect {
    width: 130px !important;
    height: 45px !important;
    line-height: 35px !important;
    font-size: 25px !important;
    border-radius: 10px !important;
}

.presetwrap {
    position: relative;
}

.tabs-wrap {
    display: block;
    width: auto !important;
}

.tabs-panels .panel .panel-body {
    width: auto !important;
}

.tabs-scroller-right,
.tabs-scroller-left {
    border-width: 0px;
    background: transparent !important;
}

ul.tabs {
    padding-left: 15px;
    height: 31px;
    border-color: #000;
}

.tabs li a.tabs-inner,
.tabs li.tabs-selected a.tabs-inner {
    background: unset !important;
    min-width: 60px;
}

.tabs li a.tabs-inner {
    font-size: 14px;
    white-space: nowrap;
    word-break: keep-all;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    border-bottom: 0px;
    border-color: #000;
}

.tabs li.tabs-selected a.tabs-inner {
    border-bottom: 1px solid #6A92B9;
    font-weight: bold;
    font-size: 19px;
    border-color: #000;
}

.tabs-header,
.tabs-tool {
    background: inherit !important;
}

.tabs-tool {
    border-width: 0px;
    right: 5px !important;
    top: 5px !important;
    height: 22px !important;
    width: 30px;
}

.tabs-tool a {
    background: transparent !important;
    border-width: 0px !important;
}

.tabs-tool a:hover {
    padding: 0px 0px 0px 0px;
}

.tabs li.tabs-selected a.tabs-inner span.tabs-title {
    font-weight: bold;
}

.slider {
    position: relative;
    left: 120px;
}

.slider-tip {
    margin-left: -4px !important;
}

.hr {
    width: 530px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    margin: 2px 0px 5px 0;
}

.headquarter-panel>.panel {
    min-height: 340px;
}

input[type="color"] {
    width: 24px;
    height: 24px;
    padding: 0px;
    margin-left: 190px;
}

button.btn_transparent:focus,
button.btn_transparent:active,
button.btn_transparent:hover,
button.btn_transparent {
    background: transparent !important;
    background-color: transparent !important;
    border: 0px;
}

button.btn_preset:hover,
button.btn_preset:active,
button.btn_preset:focus,
button.btn_preset {
    height: 60px;
    min-width: 110px;
}

.popover-title {
    display: none;
}

span .popover {
    max-width: 240px;
    background-color: #d5ebf8 !important;
}

.popover {
    max-width: 450px;
    border: 1px solid #000 !important;
    background-color: transparent;
}

.popover-content {
    padding-bottom: 10px !important;
}

.popover-content ul {
    margin: 0px;
}

.popover-content ul li {
    font-size: 15px;
    padding-top: 2px;
    padding-bottom: 2px
}

input {
    width: 230px;
}

select {
    width: 246px;
}

@font-face {
    font-family: 'boxicons';
    font-weight: normal;
    font-style: normal;
    src: url('./fonts/boxicons.eot');
    src: url('./fonts/boxicons.eot') format('embedded-opentype'), url('./fonts/boxicons.woff2') format('woff2'), url('./fonts/boxicons.woff') format('woff'), url('./fonts/boxicons.ttf') format('truetype'), url('https://insha.netlify.app/fonts/boxicons.svg?') format('svg')
}

.bx {
    font-family: 'boxicons' !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    display: inline-block;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 35px;
    cursor: pointer;
    position: relative;
    top: -8px;
}

.bx-menu-alt-right:before {
    content: "\eac3";
}

.active .bx-menu:before {
    content: "\eac3";
    transition: all 500ms;
}

.bx-menu:before {
    content: "\eac1";
    transition: all 500ms;
}

.bx-refresh:before {
    content: "\eb37";
    top: -3px;
    position: relative;
    font-size: 25px;
}

nav[role='navigation'],
div[region='center'],
div[region='west'] {
    transition: all 500ms;
}

div[region='west'] {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
}


/* div[region='center'],
nav[role='navigation'] {
    transition: width 500ms;
} */


/* 全屏按钮 */

video::-webkit-media-controls-fullscreen-button {
    /* display: none; */
}


/* //播放按钮 */

video::-webkit-media-controls-play-button {
    /* */
    display: none;
}


/* //进度条 */

video::-webkit-media-controls-timeline {
    /*  */
    display: none;
}


/* //观看的当前时间 */

video::-webkit-media-controls-current-time-display {
    /* display: none; */
}


/* //剩余时间 */

video::-webkit-media-controls-time-remaining-display {
    /* display: none; */
}


/* //音量按钮 */

video::-webkit-media-controls-mute-button {
    /* display: none; */
}

video::-webkit-media-controls-toggle-closed-captions-button {
    /*  display: none; */
}


/* //音量的控制条 */

video::-webkit-media-controls-volume-slider {
    /* display: none; */
}


/* //所有控件 */

video::-webkit-media-controls-enclosure {
    /*  display: none; */
}

video::-webkit-media-controls-overlay-enclosure {
    /*  display: none; */
}

video::-internal-media-controls-loading-panel,
video::-webkit-media-controls-loading-panel {
    display: none;
    opacity: 0;
    visibility: hidden;
    width: 0px;
    height: 0px;
    border: 2px crimson solid;
}

video::-internal-media-controls-overlay-cast-button {
    display: block;
}

video::-webkit-media-controls-mute-button {
    /*  display: none; */
}

.control-group .controls .add-on {
    color: #000000 !important;
    font-size: 16px;
    border-width: 2px;
    border-color: #000;
}

nav ul li hr.nav_bottom {
    border-bottom: 1.5px solid #000;
    border-top: 0px;
    width: 90%;
    margin: 0px 0px 0px 2px;
}

nav.active ul li hr.nav_bottom {
    border-bottom: 1.5px solid #000;
    border-top: 0px;
    width: 90%;
    margin: 0px 0px 0px 10px;
}

nav ul li:last-child hr.nav_bottom {
    /* border-bottom: 0px; */
}

nav[role='profile'] ul li a.nav_link div.nav_name span,
nav[role='profile'] ul li a.nav_link div.nav_name small {
    align-items: center;
    white-space: nowrap;
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
}

pre {
    outline: 1px solid #ccc;
    padding: 5px;
    margin: 5px;
    background-color: #ffffff;
    color: #000 !important;
}

pre .string {
    color: green !important;
}

pre .number {
    color: darkorange !important;
}

pre .boolean {
    color: blue !important;
}

pre .null {
    color: magenta !important;
}

pre .key {
    color: red !important;
}

input[disabled],
input[disabled]:focus,
select[disabled],
select[disabled],
textarea[disabled],
input[disabled],
input[readonly],
input[readonly]:focus,
select[readonly],
textarea[readonly] {
    opacity: 1;
}


/*******************/

a.l-btn,
button.btn-normal,
button.onepushbtn,
button.btn-normal {
    background-color: #3D3F40;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
}

button.btn_ir,
button.btn_label:focus-visible,
button.btn_label:visited,
button.btn_label:active,
button.btn_label:hover,
button.btn_label:focus,
button.btn_label,
button.btn_ctrl:focus-visible,
button.btn_ctrl:visited,
button.btn_ctrl:active,
button.btn_ctrl {
    background-color: #3D3F40;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
}

input,
input[type='text'],
input[type='password'],
option,
select {
    /*  background: #000;
    border: 2px solid #000; */
    border-width: 2px;
    border-color: #7E7E7E;
    border-style: solid;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
    /* color: #595a5b; */
    background-color: #595a5b;
}

.el-upload_btn:hover,
.el-upload_btn:focus,
.el-upload_btn:active {
    background-color: transparent;
}

.headquarter-panel>.panel {
    border-color: #000;
    border-width: 0 2px 2px 2px;
    border-radius: 0 0px 8px 8px;
    border-style: solid;
}

.headquarter-tabs {
    border-width: 0 0 2px 0;
}

.headquarter-tabs li>a.tabs-inner {
    /* border-bottom: 1px solid #595a5b; */
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    border-left: 2px solid #000;
}

.slider-inner {
    border-color: #3D3F40;
    background: #3D3F40;
}

button.nav_reboot {
    width: 150px;
    height: 40px;
    background: transparent;
    border: 2px solid red;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 20px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button.nav_reboot i.hisicon::before {
    color: red !important;
    font-size: 30px;
}

button.nav_reboot span {
    font-size: 20px;
    font-weight: bold;
}


div.standby-private{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    justify-content: center;
}

button.nav_standby,
button.nav_private-mode{
    width: 75px;
    height: 40px;
    background: transparent;
    font-size: 20px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button.nav_private-mode{
    border: 2px solid #af76c7;
}

button.nav_standby{
    border: 2px solid #ce7a24 ;
}

input#srtstreamid::-webkit-input-placeholder{
    color:#939598 !important;
}

.pretrackinput {
    position: relative;
    width: 140px;
    border-width: 0px !important;
    height: 17px !important;
    right: 170px;
}

.cred{
    color: red;
}

.ctips{
    font-size: 14px;
}

cbold{
    color: #000000;
    font-weight: bold;  
}

cheader{
    font-weight: normal;    
}

ctitle{
    font-weight: bolder;
    font-size: 25px;  
}

.cropper-container{
    /* border: 1px solid red; */
    position: relative;
    bottom: 0px;
    width: 720px;
    height: 420px;
}

.cropper-crop-box{
    width: 100%;
    height: 100%;
}