@import "themes.css";   

@font-face {
    font-family: 'Roboto';
    src: 	url('../fonts/Roboto/Roboto-VariableFont_wdth\,wght.ttf')  format('truetype supports variations');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Italic-VariableFont_wdth\,wght.ttf')  format('truetype supports variations');
    font-weight: normal;
    font-style: italic;
}

@font-face {
	font-family: 'Yangala';
	src: url('/assets/fonts/yangala.eot');
	src: local('☺'), url('/assets/fonts/yangala.woff') format('woff'), url('/assets/fonts/yangala.ttf') format('truetype'), url('/assets/fonts/yangala.svg') format('svg');
	font-weight: normal;
    font-style: normal;
}

.cFloat-L {float:left;}
.cFloat-R {float:right;}
.cWidth10 {width:10%;}
.cWidth20 {width:20%;}
.cWidth25 {width:25%;}
.cWidth30 {width:30%;}
.cWidth33 {width:33%;}
.cWidth40 {width:40%;}
.cWidth50 {width:50%;}
.cWidth60 {width:60%;}
.cWidth66 {width:66%;}
.cWidth75 {width:75%;}
.cWidth80 {width:80%;}
.cWidth100 {width:100%;}
.cResetList, .cResetList>li{list-style:none;list-style-image:none;line-height:inherit;background:none;border:0;clear:none;height:auto;position:static;padding:0;margin:0;}
.italics {font-style: italic;}
::-webkit-scrollbar {width: 10px; height: 10px;}
::-webkit-scrollbar-track {background:transparent;}
::-webkit-scrollbar-thumb {background:var(--app-mod-bg);border-radius: 5px;}
.chat ::-webkit-scrollbar-thumb {background:var(--app-box-bg)}
::-webkit-scrollbar-thumb:hover {background:var(--app-hover);}
.waiting { cursor: wait; }

html,body, textarea {font-size:var(--app-fs);margin:0;overflow-x: hidden;font-family:"BlinkMacSystemFont", SANS-SERIF, "Roboto", "Segoe UI" }
footer {position: fixed;left: 0;bottom:0; width: 100%;height:30px;z-index: 10000;}
footer i {margin:10px;}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, .autocomplete {background: var(--app-input-bg);color: var(--app-color);height: 22px;text-indent:8px;margin:5px;-webkit-border-radius:15px;-moz-border-radius:15px;border:none;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}
input[type="checkbox"], .form-field input[type="checkbox"] {width:30px;}
input[type="file"], .form-field input[type="file"] {margin-top:5px;background: none;}
input[type="color"], .form-field input[type="color"] {width: 25px;height: 25px; margin: 2px 10px;appearance:none;-webkit-appearance: none;-moz-appearance: none}
input[type="color"]::-webkit-color-swatch-wrapper {	padding: 0;}
input[type="color"]::-webkit-color-swatch {	border: none;}
input[type="number"] {text-align: right;}
input[type="number"].small {width:55px;}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{background:var(--app-input-bg) !important; -webkit-background-clip: text;transition: background-color 0s 600000s, color 0s 600000s !important;}
textarea {background:var(--app-input-bg);color:var(--app-color);width:calc(100% - 130px);margin: 20px 10px 30px; padding: 8px 10px 0;border:none;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}
select {background:var(--app-input-bg);height:24px;width:150px;}
select.large {width:275px;}
select.multiple {height: 200px;}
select.small {width:55px;}
audio {width:250px;}
video {width:200px;}
audio::-webkit-media-controls-enclosure {background:var(--app-audio-bg);}

.app table {border-collapse: collapse;width: 100%;margin-bottom:20px;}
.app thead th {position: sticky;top:0;background: var(--app-box-bg);}
.app th, td {padding: 5px;text-align: left;}
.app th, .app td, .app tr {min-width: 50px;font-weight: normal;}
tr:hover, tr:nth-child(even):hover {background:var(--app-hover);}
tr:nth-child(even) {background: var(--app-tr);}
.result-table {width: calc(100% - 20px);height: calc(100vh - 450px);overflow: auto;margin: 10px;}
.result-table input[type="checkbox"] {margin-top:4px;}
.count {margin:5px;}
tr.invalid {background: #d55;}
.nodata {color:var(--app-color-dis)}
.nodata .svg-icon {fill:var(--app-color-dis)}

.btn {width:200px;background: var(--app-fg);color:var(--app-color-fg);text-align: center;border:none;margin:20px;padding:10px 15px;cursor:pointer;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
.btn:disabled, .btn.disabled {background: var(--app-btn-dis);}
.fa-close {margin:10px;cursor: pointer;}
.fa-paperclip {rotate: 40deg;margin-left:15px;}
.fa-undo.redo {-webkit-transform: scale(-1, 1);-moz-transform: scale(-1, 1);-o-transform: scale(-1, 1);transform: scale(-1, 1);}
.tools .icon.fa.fa-paperclip {margin-right:20px;}
.mobile, .fa.mobile {display: none;}

.login {background: var(--app-box-bg);min-height: 100vh;color:#fff; font-size:12px;position: relative;}
.pageNotFoundTitle {text-align: center;}
.pageNotFoundText {text-align: center;}
.pageNotFoundBtn {width:200px;margin-left: calc(50% - 100px);display: block;}

.cPortadaFondo {margin:0 20px 20px calc(50% - 96px);}
.cGuest-HeadIcon {height:120px;width:120px;background:-webkit-linear-gradient(left,#e6b118,#db5c1d);background: -o-linear-gradient(right,#e6b118,#db5c1d);background:-moz-linear-gradient(right,#e6b118,#db5c1d);background: linear-gradient(to right, #e6b118, #db5c1d) repeat scroll 0 0 rgba(0, 0, 0, 0);}
.cGuest-HeadIcon img {margin:17px 22px;width:75px;}
.cGuest-Story {font-size:20px;line-height:30px;margin:20px;}
.cGuest-Story li {line-height:45px;text-align:right;}
.cGuest-Head {font-size:50px;font-weight:normal;line-height:55px;margin:30px 0 0;width:calc(100% - 275px); text-align: center; color:#fff;}
.cGuest-Title {margin-top:30px;font-size:40px;text-align: center;}
.cGuest-sTitle {font-size:28px;margin: 40px 0 20px;}
.cGuest-sTitle1 {font-size:25px;margin-bottom:10px;}
.cGuest-sTitle2 {font-size:25px;margin-bottom:10px;color:#b8181e;}
.cGuest-box {font-size:20px;border-radius: 5px;border: 1px #ff6000 solid;width:calc(100% - 20px);margin:40px 20px 10px;padding: 20px 10px 10px; box-sizing: border-box;}
.cGuest-bTitlew {position: relative;margin-top: -20px;}
.cGuest-bTitle {position: absolute; left: calc(50% - 15px); top: -10px;font-size:15px !important;width:30px;height: 30px; text-align: center;border-radius: 50%;background: #fc2920;}
.cGuest-bTitle-border {position: absolute; left: -10px; width: calc(100% + 20px);height:10px;background: #fc2920;}
.cGuest-box1 {font-size:20px;border-radius: 5px;border: 1px #7e0702 solid;width:calc(50% - 20px);margin:20px 10px;padding: 50px 10px 10px; box-sizing: border-box;}
.cGuest-bTitlew1 {position: relative;margin-top: -50px;}
.cGuest-bTitle1 {position: absolute; left: calc(50% - 15px); top: 4px;font-size:25px;width:30px;height: 30px; text-align: center;border-radius: 50%;background: #7e0702;}
.cGuest-bTitle-border1 {position: absolute; left: -10px; width: calc(100% + 20px);height:40px;border-radius: 5px 5px 0 0;background: #7e0702;}
.cGuest-box2w {position: relative;}
.cGuest-box2 {position: relative; font-size:20px;background: #7e0702; width:calc(100% - 40px);margin:10px;padding: 20px 10px 10px; box-sizing: border-box;border-radius: 5px;}
.cGuest-box2w-col {position: absolute; right: 0; height: 100%; display: flex; flex-direction: column; justify-content: center;align-items: end;}
.cGuest-box2w-border {border-right: 1px solid #7e0702;}
.cGuest-box3 {font-size:20px;background: transparent; width:calc(50% - 20px);margin:10px;padding: 20px 10px 10px; box-sizing: border-box;}
.cGuest-box4 {position: relative; font-size:20px;border-radius: 5px;border: 1px #ff6000 solid;width:calc(33% - 20px);margin:10px;padding: 10px 10px 10px 20px; box-sizing: border-box;}
.cGuest-side-border {position: absolute; left: 0; top:0; width: 10px;height:100%;background: #ff6000;}
.line-r {position: absolute; width:30px;right: -30px; bottom: 50%; height:1px;border-top:1px solid #7e0702;}
.ball-r {position: absolute; width:10px;right: -35px; bottom: calc(50% - 4px); height:10px; border-radius: 50%; background: #ff6000;}
.line-l {position: absolute; width:30px;left: -30px; bottom: 50%; height:1px;border-top:1px solid #7e0702;}
.ball-l {position: absolute; width:10px;left: -35px; bottom: calc(50% - 4px); height:10px; border-radius: 50%; background: #ff6000;}
.title-icon {width: 40px; position: absolute; left: calc(50% - 20px); top: 2px;}
.cGuest-Action {margin-top: 50px;}
.cGuest-Action-Head {margin: 50px; display: flex; flex-direction: column;}
.cGuest-Buttons {width:100%;margin:40px 0 0;}
.cGuest-Buttons .cGuest-download {width:25%;display:none;}
.cGuest-Buttons .cGuest-download img {width:60px;}
.login-form {position: relative;margin:50px calc(50% - 370px);max-width:740px;background:transparent;}
.userdata {width:200px;height: 22px; margin:0 20px 20px;}
.userdata input {width:200px;padding:15px 10px;;box-sizing: border-box;}
.light .userdata input {background: #fff;}
.userdata-btn {margin:0 10px;}
.userdata-btn .btn {margin-top:4px;}
.forgot {font-size:14px;margin-left:35px;width: calc(100% - 200px);cursor:pointer;}
.loginFooter {height:3px;width:100%;position: fixed;bottom: 0;background: #b8181e;}
.menuItem {width:200px;text-align: center;}
.menuItem.selected {background: #ff0000;}
.ttac {margin-top: 30px;}

.app {background:var(--app-bg);color:var(--app-color);min-height: 100vh;}
.app-box {position:fixed;height:100vh;overflow:hidden; background:var(--app-box-bg);z-index:10000;}
.app-box-header {height:33px;border-radius:4px 4px 0 0;background:var(--app-fg);color:var(--app-color-fg);}
.app-box-header.modal-header {color:var(--app-color-fg);text-align: center;}
.app-box-header-title {margin: 6px 10px;font-size: 25px;}
.app-box-header-subtitle {margin: 6px 0;font-size: 25px;text-align: center;}
.app-box-header-subtitle-sec {text-indent: 10px;font-size: 20px;text-align: left;}
.app-box-header-icon {margin: 10px;}
.app-box-header-image {height:33px;float:left;background:#e0e0e5;}
.app-box-body {background: var(--app-mod-bg2);overflow-y: auto;z-index: 1000;}
.form-header {font-size:25px;text-align:center; margin: 0 0 30px;}
.form-header-btns {display: flex;justify-content: space-between;margin-bottom: 40px;}
.form-header-btns .form-btn {width: 150px;padding: 15px 0; box-sizing: border-box; height: auto;} 
.form-header-btns .form-btn .fa {margin-right: 4px;}  
.form-subheader  {font-size:30px;text-align:center; margin: -15px 0 30px;}
.form-section-header {font-size: 20px;border-bottom:1px solid var(--app-mod-bg);text-indent: 10px;margin-bottom: 20px;}
.form-section-header-indent {text-indent: 27px;}
.form-section-header .fa {font-size: 20px;}
.form-title {font-size: 25px;margin:20px 0;text-align:center;}
.form-subtitle {font-size: 20px;text-align:left; margin:20px 0;padding-left: calc(50% - 210px);}
.form-header-profiletype, .cResetList>li.form-header-profiletype {margin:30px calc(50% - 260px);}
.form-header-profiletype .form-btn, .cResetList>li.form-header-profiletype .form-btn {width:100px;}
.form-header-profilestype {display: flex;justify-content: center;}
.form-header-profilestype .form-btn, .cResetList>li.form-header-profilestype .form-btn {width:125px;}
.form-type {margin-top:30px;}
.form-type-header, .cResetList>li.form-type-header {margin:20px calc(50% - 210px);}
.form-type-header, .cResetList>li.form-type-sheader {display: flex;justify-content: center;}
.form-type-header .form-btn, .cResetList>li.form-type-header .form-btn, .form-bulk-type .form-btn {width:170px;}
.form-type-header .form-btn.subtype, .cResetList>li.form-type-sheader .form-btn.subtype {width:100px;}
.form-type-header .form-title {margin-bottom:50px;}
.form-bulk-type {width:420px;margin:20px calc(50% - 210px);}
.form-label {float:left;width:calc(48% - 10px);text-align:right;font-weight:normal;margin:8px 0 20px 0;}
.form-field {float:left;margin:0 0 20px 20px;min-height:40px;}
.form-field input {width:250px;background: var(--app-input-bg);color:var(--app-color)}
.form-field input.tiny {width:50px;}
.form-field input.narrow {width:175px;}
.form-field input.large {width:300px;}
.form-field input[type="checkbox"] {margin-top:9px}
.form-field .choice {text-indent: 20px;}
.form-field .choice .name {width: 125px;}
.form-field .choice > div {margin-top: 10px;}
.form-item {margin:0 5px 5px 60px;}
.form-icon {margin: 4px calc(50% - 5px);width: 10px;text-align: center;}
.form-text {text-align: center;margin-bottom: 4px;}
.form-btn {width:75px;height: 36px; background:var(--app-btn);color: #fff;text-align: center;border:none;margin:10px;padding:5px;cursor:pointer;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.form-btn.active {background: var(--app-fg);}
.form-btn.active .form-text, .controls .controls-option.selected {color: var(--app-color-fg);}
.form-check {margin-top:10px;}
.form-checkbox-label {margin:2px 5px;}
.analogAlms {margin-left: calc(50% + 40px);}
.form-col-header {font-size: 18px;margin: 20px 0;width:175px;}
.form-col-header.narrow {width: 60px;text-align: center;}
.form-col-header.wide {width: 50%;}
.form-bulktmpls {width:500px;margin:50px calc(50% - 230px) 0;}
.form-bulktmpls2 {margin-top:30px;}
.form-field-dialog {float:right;background: var(--app-btn);width: 50%; margin: 0 20px 10px; padding-top: 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.form-field-dialog .form-label {width:80px;}
.form-field-dialog .fa.icon {margin:5px 17px;}
.form-field-dialog .fa.icon.invalid {color:#aaa !important;}
.form-colorbox {width:50px;height: 25px; margin:10px 5px 0px;cursor: pointer; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.form-colorbox.gray {background:#dddde9;}
.dark .form-colorbox.gray {background:#323232;}
.form-colorbox.blue {background:#d0d0f5;}
.dark .form-colorbox.blue {background:#153045;}
.form-colorbox.green {background:#d0f5d0;}
.dark .form-colorbox.green {background:#003f2f;}
.app.fwhite .btn, .app.fwhite .form-btn.active .form-text {color:#555;}
.app.revLbl .nav .fa, .app.revLbl .form-btn.active .form-icon .fa, .app.revLbl #chat .headdate, .app.revLbl .infobar, .app.revLbl .controls .controls-option.selected, .app.revLbl .infobar .fa  {color:#333 !important;}
.app.revLbl .btn, .app.revLbl .form-btn.active .form-text, .app.revLbl #chat .chatbox.cFloat-R, .app.revLbl #chat .chatMsgText.cFloat-R .fa.fa.fa-chevron-down {color:#252525 !important;}
.app.revLbl .profileCmd .btn, .app.revLbl .monitor .btn {color:#fff !important;}
.form-colorbox.fred {background:#a22f27;}
.form-colorbox.fblue {background:#0045d0;}
.form-colorbox.fgreen {background:#50d550;}
.form-colorbox.fyellow {background:#ffe000;}
.form-colorbox.forange {background:#ff6000;}
.form-colorbox.fbrown {background:#a96030;}
.form-colorbox.fpurple {background:#a000a0;}
.form-colorbox.fwhite {background:#fff;}
.form-colorbox.fblack {background:#000;}
.form-colorbox.fsilver {background:#c0c0c0;}
.diagram {position: relative; background: var(--app-box-bg); height: calc(100% - 50px); overflow: auto;}

.fullScr, .fullScr.layout-box {position: fixed; left:5px;width:calc(100% - 10px);z-index: 100;}
.fullScr.profileModule {background: var(--app-box-bg); margin-top: 0; height: calc(100vh - 90px); border-radius: 5px; overflow: hidden;}

.date {font-style: italic;font-weight: 500;}
.showMoreLink {margin:0 20px;cursor: pointer;}
.showMoreLink .fa.icon {margin:0;}
.chart .showMoreLink {position: absolute; bottom: 0;right: 0;}
.forecastPopup {position: absolute; top: 90px; right: 10px; width: 120px; background: var(--app-box-bg); padding: 5px; box-sizing: border-box; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.forecastPopup .opt:hover {background: var(--app-hover);}
.profileModule .chartControls {position: absolute;top:50px;}
.profileModule .controls.statsControls {justify-content: start;}
.register {margin-top: 30px;}
.register .map {width:50%;margin-left:25%;}
.regmap {margin-bottom: 50px;}
.register .cFormList {min-height: calc(100vh - 250px);}
.profileModule.netw {background: var(--app-mod-bg);margin-bottom: 50px;}
.light.green .profileModule.netw{background: var(--app-mod-bg2);}

.icon.fa {margin:10px;font-size: 20px;}
.icon.fa.fa-dashboard {margin-top:9px;}
.icon.fa.fa-map-marker {margin-left:14px;}
.icon.fa.fa-calendar {margin-left:11px;}
.icon, .fa.icon {margin:5px 10px;}
.icon, .caret {cursor:pointer;font-size: 18px;margin:5px 0;}
.icon.large {font-size: 25px;}
.icon.active {color:var(--app-fg)}
.icon.fa.fa-expand, .icon.fa.fa.fa-compress {font-size: 14px;}
.icon svg {width: 25px; height: 25px; fill: var(--app-color); margin: 1px 5px 0;}
.icon-circle .icon.fa {margin-top:10px;}
.icon-circle .fa.fa-map-marker {margin-left:14px;}
.icon-circle {border-radius: 50%;width: 40px; height: 40px; margin:10px;}
.icon-circle.selected, .icon-circle:hover {background: var(--app-mod-bg);}

.Header {background: var(--app-mod-bg);margin-bottom: 30px;font-size: 15px;text-align: center;height: 28px;padding:5px 0;box-sizing: border-box;text-indent: 10px;}
.Header input[type="text"] {background: var(--app-input-bg); margin: 10px 0;width:90%}
.Header.cFloat-R {text-align: right;margin-right: 10px;}
.Header .cFloat-L.cWidth100 {text-align: center;}
.Header .onlyval {color:var(--app-footer);}
.Header .sval.val {color:var(--app-mod-val);}
.Header .fval {cursor: pointer;}
.Header .sval.off {color: #f00;}
.Header .sval.on {color: #00e500;}
.Header .sval.topic {cursor: pointer;}
.Header .sval.date {cursor: pointer;color:var(--app-mod-val);}
.Header .sHeader {display: flex; justify-content: center; align-items: end;}
.sheader {background: var(--app-mod-bg);}
.sheader input[type="checkbox"] {margin-top: 8px;}
.headerToolBox {position: absolute; background: var(--app-box-bg); -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.headerOptions {width:75px;display: flex;justify-content: space-between;padding-top: 3px;}
.headerOptions .icon.fa-close {font-size: 12px;}
.headerOptions .icon.fa.fa-ellipsis-v {margin:5px 20px 0 0;}

.bodyw {width:66%;}
.body {color:#f2d4ba;}
.previewBack {background:var(--app-box-bg);z-index:10000;position: fixed;top:0;left:0;width:100vw;height:100vh;}
.previewMedia {position: absolute;}
audio.previewMedia {position: fixed; width: 50%;top: calc(50% - 30px);;margin-left: 25%;}

.coverw {display: flex; justify-content: center;}
.coverw .cover{position: absolute;top:33px;max-height: calc(100% - 33px);max-width: 100%;}
.coverw .title{position: absolute;bottom: 20px;}
.coverw .description{position: absolute;bottom: 0;}

.gallery {position: absolute; left:25%; height:calc(100% - 54px);width:calc(75% - 15px); overflow-y: auto;padding:15px 0 0 15px;}
.gallery.noProfileModuleTree {width:100%;left:0;}
.gallery .treeArrow {position: absolute;top:5px;left:0;}
.profileModuleTree {position: absolute; height: calc(100% - 55px);overflow: hidden;border-right: 1px solid #f0f0f0;}

.files .headerText {margin: 9px 5px 0;}
.files .fa.icon.headerIcon {margin: 0  0 0 40px;}
.files .file:hover {background: var(--app-hover);}
.files .file.selected {background: var(--app-sel);}
.files .file {position: relative; width:200px;height:190px;margin: 10px 0 0 10px;overflow: hidden;cursor: pointer;--webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.files .file img {position: absolute;top:5px;left: 50%;transform: translateX(-50%);max-width: 100%; max-height: calc(100% - 50px);}
.files .file img.folder {top:50px;}
.files .file .title {position:absolute; bottom:20px; text-indent: 5px; text-align: center; font-weight: 500; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.files .file .description {position:absolute ; bottom:5px;text-indent: 5px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.files .file .title.folder, .files .file .description.folder {text-align: center;} 
.files .file .type {position: absolute; bottom: 63px;left: 60px; text-align: center; width: 80px; font-size: 30px;color: #fff; font-weight: bold;background: var(--app-btn);padding-bottom: 4px;}
.files .file .fileThumb {top:unset;bottom:50px; --webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.files .file .mediaThumb {position:absolute;}
.files .file video {top: 0;}
.files .file audio {bottom: 45px;left: 5px;width: 190px;}
.files .file img.url {top:unset;bottom: 40px;}

.cal .calHeader {height: 55px; margin-bottom: 0;background: var(--app-box-bg);}
.cal .calHeader .date {text-align: center; font-size: 15px; font-style: italic; font-weight: 500;margin-top: 3px;}
.cal .calHeader .icon.cFloat-R {text-align: right;}
.cal .calHeader .icon.fa.fa-ellipsis-v {margin-right: 15px;}
.cal .calHeader .mid {height: 55px;display: flex;justify-content: space-between;align-items: center;}
.cal .calHeader .mid .icon {margin: 0;}
.cal .calHeader .right {height: 55px;display: flex;justify-content: end;align-items: center;}
.cal .calHeader .selectCmpIcons {display: flex;}
.cal .container {position: absolute; height: calc(100% - 80px);}
.cal .btn {position: absolute; bottom: 0; right: 0;}
.calPopup.modal .btn {width:200px;}
.calPopup.modal input[type="checkbox"] {margin: 8px 0; width: 20px;}
.calPopup.modal .modal-body {margin-top: 30px;}
.colonSep {margin: 8px 5px;}
.calevents {display: flex; flex-direction: column;}
.calevents .event {width: calc(100% - 20px);margin: 5px 5px 0;padding:5px;box-sizing: border-box; background:var(--app-fg); color:#fff; --webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}

/* Gantt */
.gantt-container {line-height:unset;top:-8px;}
.gantt-container .grid-header {border: none; top:8px;background: var(--app-box-bg);height: calc(var(--gv-lower-header-height) + var(--gv-upper-header-height));}
.gantt-container .lower-text {color:var(--app-color);height: calc(var(--gv-lower-header-height) * .7);}
.gantt-container .lower-header {background: var(--app-mod-bg);}
.gantt-container .current-date-highlight {background: var(--app-fg);color: #fff;}
.app.revLbl .gantt-container .current-date-highlight {color: #252525;}
.gantt .bar-label {fill:#fff;}
.gantt .bar-wrapper .bar {outline: unset; fill:var(--app-fg);}
.gantt .grid-row {fill: var(--app-mod-bg2);}
.gantt-container .current-ball-highlight, .gantt-container .current-highlight {top: 72px !important;}
.gantt .bar-label.big {fill:#fff;}

.cOptions {background: var(--app-box-bg);height: 100vh;overflow: auto;}
.cOptions .cFormList {margin: 40px 50px;}
.cOptions .form-label {width: 120px;text-align: left;}
.cOptions .form-field {width:calc(100% - 160px);}
.cOptions .form-field .label {width: 70px; margin-top: 10px;}
.cOptions .form-field .unit {margin-top: 10px;}
.cOptions input[type="text"] {width: 100%;}
.cOptions input[type="checkbox"] {width: 15px;margin-top: 10px;}
.cOptions input[type="number"].small {margin: 7px 10px 0 0;}
.cOptions input[type="color"] {margin: 5px 10px 0;}
.cOptions select {width:100%;}
.cOptions .mat-mdc-slider {width: calc(100% - 210px);float:left;}
.cOptions .fa-lock {margin: 7px 0 0 10px;}
.cOptions .btn {margin-right: 0;}

.cropper.app-box-body {position: relative;}
.cropper.app-box-body > div {min-height: 100%;}
.cropper .cIcon {margin: 40px 0;display:flex;justify-content: center;}

.svg-icon {fill:#ff8700}
.svg-icon.on {fill:#00e500}
.svg-icon.off {fill:#f00}
.editor .header {background: var(--app-mod-bg);display: flex;justify-content: space-between;}
.editor .header-icons {display: flex;}
.editor .header-icons .icon-group {margin:0 20px;}
.editor .header .fa.icon {margin:10px;}
.editor .board {height: calc(100vh - 40px);overflow: auto;position: relative;}
.editor .rotate {rotate: 90deg;}
.editor .canvasWrapper {max-width:calc(100% - 20px); max-height:calc(100vh - 80px); margin: 10px 0 0 50px;background:#fff; overflow: hidden; --webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.editor .canvas-container {border: 1px solid #ccc;}
.editor .flipicon {margin: 5px;fill:var(--app-color);}
.editor .maintoolbox {background: var(--app-box-bg);height:calc(100vh - 40px);width:40px;display: flex;flex-direction: column;position: absolute;top: 40px;}
.editor .toolboxes {display: flex;justify-content: flex-end;margin-top: 5px;}
.editor .toolbox {width:60px;background: var(--app-box-bg); overflow-y: auto; margin:0 5px;display: flex; flex-wrap: wrap; align-content: space-between; --webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.editor .toolbox img, .editor .toolbox .svg-icon {width: 20px;height: 20px;cursor: pointer;}
.editor .toolbox img:hover, .editor .toolbox .svg-icon:hover {background: var(--app-hover);} 
.editor .toolbox .svg-icon path, .editor .toolbox .svg-icon rect {stroke: var(--app-color) !important;}
.editor .svgGallery {width:390px;height:600px;background: var(--app-box-bg); overflow-y: auto; margin: 0; --webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.editor .svgGallery .title {background: var(--app-mod-bg); padding: 4px 0; text-indent: 5px; margin-bottom: 2px;}
.editor .svgGallery .svg-icon {width:60px;height:60px;}
.editor .svgGallery .svg-icon:hover {background: var(--app-hover);} 

.flipicon {width:20px;}
.previewDoc {height:100vh;}
.navMedia {position: fixed;top:calc(50% - 10px);}
.navMedia.prev {left:10px}
.navMedia.next {right:10px}
.navMedia.close {top:10px;right:10px;}
.navMedia.fa.icon, .navMedia.fa.close {color: #fff;background: rgb(0, 0, 0, 0.5);padding: 10px 12px;--webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
.marker {position:absolute;display: flex; flex-direction: column; align-items: center;}
.marker img {width: 30px;height: 30px;}
.marker .body {min-width:50px;max-width: 200px; background:#000; color:#fff; overflow:hidden; box-shadow: var(--app-box-shadow);--webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.marker .name {width:100%;overflow:hidden;background: #fff; color:#000; text-overflow:ellipsis; white-space: nowrap; padding: 2px 5px; box-sizing: border-box;}
.marker .fa.fa-sort-desc {font-size: 20px; margin-top: -11px; color: #fff;}
.marker .signal {padding: 2px 5px; background-origin: border-box;display: flex; justify-content: end;}
.marker .signal.a .val {text-align: right;}
.marker .signal.a .unit {text-align: left; text-indent: 5px;}
.marker .signal.d {justify-content: center;}
.marker .signal.d .svg-icon {width: 50px;}
.marker .user {width:100px;}
.marker .img-circle {margin-left: calc(50% - 15px);}

.cFormList {float:left;width: calc(100% - 100px);margin: 50px;}
.label-validation {color:var(--app-validation) ;font-style:italic;text-align:left;white-space:nowrap;font-size:12px;margin-top: -3px;}
.ng-valid[required], .ng-valid.required, .form-field input.valid, .valid {border-left: 4px solid #42A948;}
.ng-invalid:not(form), .ng-invalid[required].error, .ng-valid.required.error, .form-field input.invalid, .invalid {border-left: 4px solid var(--app-validation);}
.form-btn-box {width:720px;margin:30px calc(50% - 360px);}
.bulk-btn-box {margin:30px 0;}
.avatar-wrap {width:200px;height:200px;border-radius:5px;background:#ccc;margin:0 calc(50% - 100px);overflow:hidden;}
.avatar-wrap label {display:inline-block;cursor:pointer;}
.img-profile {width:100%;height:100%;pointer-events:none;}
.avatar-regbtn {margin: 10px 0 40px calc(50% - 85px);}
.tools {font-size: 16px;}
.tools .icon.fa {margin-top: 8px;}
.modsNavBar .NavBar {display: flex;justify-content: center;width: calc(100% - 120px);}
.modsNavBar .icon.fa.fa-expand {margin-top:30px;}

.tools .text {margin: 8px;}
.tools input[type="checkbox"] {margin: 10px;width: 20px;}
.input-group input {padding: 4px; width:calc(100% - 55px);margin: 10px 0;}
.input-group .fa.icon {margin:14px;}
.map .autocomplete {width:calc(100% - 80px);margin: 10px 0;border: none;}
.map .autocomplete .widget-container {border:none !important;}
.map .input-group .icon {margin: 15px;font-size: 20px}
.cResetList>li.mat-field {margin:10px 0;}
.mat-field input[type="text"] {width:150px; text-align: center; font-weight: 500;text-indent: -5px;}
.img-circle {border-radius:50%;width:50px;background:var(--app-input-bg);margin:10px;cursor: pointer;}
.img-circle.small {width:30px;margin:5px;}
.img-circle.text {width:30px;height: 30px;font-size: 18px;font-weight: 500; margin:5px;}
.img-circle.text > div {margin: 5px 0; text-align: center; width: 30px;}
.img-circle.disabled {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.nav .img-circle.text {margin:5px 20px 0 0;}
table .fa.caret {font-size: 15px;margin: 0 10px;color:var(--app-color-dis)}
table .fa.caret.ena {color:var(--app-color)}
table .icon {width:20px;}
.form-field .large.icon {margin-top:4px;}
.netwIcon {margin:5px;width:25px;}
.postUrl input[type="text"]{width:calc(100% - 45px);margin:20px;color:var(--app-color)}

.nav {position: fixed;background: var(--app-fg);height:40px;top:0;left:0;}
.nav .img-circle.small {margin: 5px 20px;}
.infobar {position: fixed;background: var(--app-fg);color:#fff; height:40px;bottom:0;left:0;z-index: 1000;}
.infobar .serverstatus {background: #000;margin-left: 10px;}
.infobar .icon.fa {margin:10px;}
.infobar .txt {margin:13px;}
.infobar .msg {margin: 10px;font-size: 20px;}
.HeadBrand {background: var(--app-fg); cursor: pointer; color: var(--app-color-fg); font-size: 16px;} /*background:linear-gradient(to right, #e6b118, #db5c1d);background:-webkit-linear-gradient(left,#b8181e,#d0501f);background: -o-linear-gradient(right,#b8181e,#d0501f);background:-moz-linear-gradient(right,#b8181e,#d0501f);*/
.HeadBrand .svg-icon {display: block;}
.revLbl .HeadBrand, .revLbl .infobar {color:var(--app-color);}
.nav .HeadBrand {height:40px;background:#000;}
.nav .HeadBrand .svg-icon {width: 100px; height: 38px;fill:#000;}
.HeadLogo {height:120px;}
.headmenu {display: flex; justify-content: space-around;}
.sideImg {position: absolute; height: calc(100% - 138px); right:0;top:138px; overflow: hidden;}
.sideImg img {position: absolute; width:100%;min-height: 100%;}
.bttmLogo {width:100px;}
.langLogo {position: absolute; width:20px; margin-top: 10px; right: calc(33% + 10px); cursor:pointer;}
.langPopup {position: absolute;top: 180px; right: calc(33% + 30px);}
.navbar-brand {height:39px;}
.navbar-brand.txtlogo {background: var(--app-fg); padding: 1px; position: absolute;}
.treeContainer {top:45px;left:5px;width:calc(25% - 10px);}
.mainContainer {top:45px;left:25%;width:50%;}
.chatContainer {top:45px;right:5px;width:calc(25% - 10px);}
.layout-box {height:calc(100vh - 90px);background: var(--app-box-bg);position: fixed;overflow-y: auto;overflow-x:hidden;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.layout-box.top {z-index: 1000;}
.layout-box .tree {overflow-y: auto;overflow-x:auto;height: 100%;background: var(--app-box-bg);}
.layout-box.treeContainer {background: var(--app-mod-bg);}
.layout-box.treeContainer .tree {height: calc(100% - 60px);}
.layout-box.treeContainer .sheader {background: var(--app-mod-bg2);}
.layout-box .profileModuleTree .tree {margin: 0;}
.layout-box .profileModuleTree .footer {display: none;}
.main {position: relative;}
.arrow-left {margin: 8px 6px;}
.frontpageTabs {position: absolute;height: 35px;background: var(--app-bg);}
.tabw {display: flex; justify-content: center;}
.tab {cursor: pointer; -webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;}
.tab.active {background: var(--app-box-bg);}
.tab .title {margin: 5px;border-radius: 5px;min-width: 200px;}
.tab .title .icon {font-size:16px;}
.tab .title .text {margin-top:6px;}
.tab.cWidth33 {margin: 0 0.16%;}
.fileBox {position: absolute;height: 300px;width:calc(100% - 20px);top:-310px;left:10px;background: var(--app-box-bg);box-shadow: var(--app-box-shadow) ;overflow: hidden;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.fileBox img {max-width: 100%;max-height: 100%;position: absolute;left: 50%;transform: translateX(-50%)}
.timerange {position: relative;background: var(--app-mod-bg2);}
.timerange .Header {margin-bottom: 0;}
.timerangeBox {position: absolute;height: 170px;width:350px;top: -175px;left: calc(50% - 175px);background: var(--app-box-bg);box-shadow: var(--app-box-shadow) ;overflow: hidden;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.timerangeBox .modal-body {padding: 15px 30px; box-sizing: border-box;}
.timerangeBox .modal-body .small {font-style: italic;}
.timerangeBox .btn {margin-top: 0;}
.timerange .player {display: flex; justify-content: center; }
.timerange .mat-mdc-slider {width: 80%;margin:0;}
.timerange .icon-circle {margin: 4px 0 0 20px;}
.timerange .controls {padding:10px 10px 0; box-sizing: border-box;display: flex;justify-content: center;}
.timerange .controls .speed {position: absolute; top: 18px;}

.frontpage {overflow-y: auto;height: calc(100vh - 90px);background: var(--app-box-bg);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.search {margin-left:calc(25% - 90px);}
.search input {width:calc(100% - 40px);margin:5px;padding: 4px;}
.profilesTree {margin-top: 5px;}
.profilesTree .name, .profilesTree .description, .profilesTree .img-circle {cursor: pointer;}
.profilesTree .img-circle {width: 20px; height: 20px; margin: 3px 10px 0 5px;}
.profilesTree .img-circle.text > div {font-size: 10px; margin: 5px 2px; width: 17px;}
.treeProfile {margin-bottom:1px;overflow:hidden;}
.treeProfile .title {margin:5px;overflow:hidden;text-overflow:ellipsis;}
.treeProfile .subtitle {margin:10px;}
.treeProfile .caret {margin: 5px 2px 0 8px;}
.treeProfile .name {margin:5px 5px 5px 0;}
.treeProfile .noChild {height:10px;width:15px;}
.treeProfile .treeIcon, .treeProfile img, .treeProfile .svg-icon {width:20px; height:20px; margin:3px 5px 0;}
.treeProfile .treeIcon.circle {-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
.treeProfile .header {margin-left:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.treeProfile .img-circle + .header {margin-left:0;}
.treeProfile.selected {background: var(--app-mod-bg);}
.treeProfile:hover {background: var(--app-mod-bg2);}
.treeProfile.hide {display:none;}
#chat .fa.fa-comment {font-size: 40px; position: absolute; top: calc(50% - 20px); left: calc(50% - 20px);}
#chat .header {height: 32px;margin-bottom: 5px;}
#chat .header .topicSymbol, #chat .header .svg-icon {margin:5px 5px 0 12px;width:30px;height: 30px;}
#chat .header .img-circle.text {margin:4px 5px;}
#chat .header .name, .videoconf .title {font-size: 20px; margin: 7px 10px; width: 185px; overflow: hidden;}
#chat .headerOptions {width:100px;}
#chat .outer {background: var(--app-input-bg);overflow-y:auto;overflow-x:hidden;position:relative; height:calc(100vh - 177px);width:calc(100% - 10px);margin-left:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#chat .inner {position:relative;min-height:100%;}
#chat ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder {color: #d4d4d4;}
#chat .chatboard {min-height: calc(100% - 10px);margin:5px;display: flex;justify-content: flex-end;flex-direction: column;}
#chat .chatboard>div:last-child {margin-bottom: 10px;}
#chat .msg {display: flex;flex-direction: column; max-width: 75%; min-width: 100px; margin:10px 0;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#chat .msg.cFloat-R {margin-right: 15px;}
#chat .headrow {display: flex; justify-content: center;}
#chat .headdate {width:150px; text-align: center; background: var(--app-fg); color:#fff; border-radius: 10px; padding: 5px; box-sizing: border-box;}
#chat .msg.chatBotResponse {background: var(--app-mod-bg2);width:calc(100% - 30px);max-width:calc(100% - 30px);margin-left:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#chat .chatboard .msghandle {position: absolute;}
#chat .chatboard .msghandle.cFloat-L {color: var(--app-msg-guest) !important;top:-12px;left:-16px;}
#chat .chatboard .msghandle.cFloat-R {right: 0; margin:-2px 0 0 10px;top:-5px; right:-5px; color: var(--app-fg) !important;}
#chat .chatbox {position: relative; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#chat .msg.cFloat-L .chatbox {background: var(--app-msg-guest);}
#chat .msg.cFloat-R .chatbox {background: var(--app-fg);color: var(--app-color-fg);}
#chat .msg-body.image img, .news .newsfeed img {max-width:200px; max-height: 300px;min-width: 150px;width: auto;height: auto;display: block;}
#chat .msg-body img, #chat .msg-body video, .news .newsfeed img, .news .newsfeed video {overflow: hidden; margin-bottom: 2px; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#chat .msg-body audio {margin-bottom: 2px;}
#chat .msg-body.docs.cFloat-L { margin-left: 15px;}
#chat .msg-body.docs.cFloat-R { margin-right: 15px;}
#chat .chatMsgText {display: flex; flex-direction: column;}
#chat .chatMsgText .date {font-size: 10px;}
#chat .chattext {margin: 5px 7px 0;}
#chat .chattext.cFloat-L {text-align: left;}
#chat .chattext.cFloat-R {text-align: right;}
#chat .chatMsgTools {background: var(--app-btn-dis); -webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;}
#chat .msg.cFloat-L .chatMsgTools {background: var(--app-bg-dis2);}
#chat .msg.cFloat-R .chatMsgTools {background: var(--app-btn-dis);}
#chat .docs {position: relative;}
#chat .msg .type {position: absolute; bottom: 10px; text-align: center; width: 80px; font-size: 30px;color: #fff; font-weight: bold;background: var(--app-btn);padding-bottom: 4px;}
#chat .msg.cFloat-L .type {right: -6px;}
#chat .msg.cFloat-R .type {left: -6px;}
#chat .chatMsgTools .fa {margin: 3px 10px; font-size: 14px;}
#chat .chatMsgTextToolbar {position: relative; min-width: 90px;height: 12px;margin:3px 0;}
#chat .chatMsgTextToolbar .fa.fa-check {position: absolute; right: 5px;}
#chat .chatMsgText .date {position: absolute; }
#chat .chatMsgText.cFloat-L .date {right: 10px;}
#chat .chatMsgText.cFloat-R .date {right: 30px;}
#chat .chatMsgTextToolbar .fa.fa-chevron-down  {position: absolute; left: 5px;}
#chat .input-group {height:30px;}
#chat .input-group input {width:calc(100% - 100px);}
#chat .input-group .tools {width: 75px;margin: 8px 0 0 4px;}
#chat .input-group .img-circle {margin:8px 5px 0 10px;}
#chat .replyBox {width: calc(100% - 40px); position: absolute; bottom: 65px; background: var(--app-box-bg); left: 20px; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#chat .fileBox {bottom: 60px;}
#chat .headerToolBox {width: calc(100% - 60px); top: 45px;left: 30px;display: flex;justify-content: space-around;}
#chat audio::-webkit-media-controls-enclosure {background:#fff;}
.videoconf .toolboxw {position: fixed; z-index: 100000; bottom:50px;display: flex; justify-content: center;}
.videoconf .toolbox {background: var(--app-box-bg); width: 350px; height: 50px; box-shadow: var(--app-box-shadow); -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.videoconf .stoolbox {display: flex; justify-content: space-around; position: absolute; bottom: 55px;}
.videoconf .stoolbox .icon {margin-top:15px;}
.videoconf img {height: 40px; margin: 5px;}
.videoconf .phoneIcon {color: #fff; border-radius: 18px; margin: 10px;}
.videoconf .phoneIcon.answer {background: #0f0;}
.videoconf .phoneIcon.hangup {background: #f00;}
.videoconf .fa-phone {margin: 5px 8px;}
.videoconf .title {margin: 15px 5px;}
.videoconf .videoconfTools {display: flex; justify-content: end;}
.videoconf .currentVideo {position: fixed; z-index: 100000;top:0;}
.videoconf .videoMembers {position: fixed; z-index: 100000;top:100px;}

.emojiBox {position: fixed;left:calc(50% - 175px);bottom: 150px;width:365px;}
.emoji-mart {background: var(--app-box-bg) !important;border:none !important;box-shadow: var(--app-box-shadow)}
.emoji-mart-category-label span {color:var(--app-color);background: transparent !important;}
.emoji-mart-search input, .emoji-mart-search input::-webkit-search-decoration, .emoji-mart-search input::-webkit-search-cancel-button, .emoji-mart-search input::-webkit-search-results-button, .emoji-mart-search input::-webkit-search-results-decoration {background: var(--app-input-bg) !important;border:none !important;color:var(--app-color) !important}
.newsInputBox {padding: 10px 0; background: var(--app-mod-bg2);position: relative;}
.news {margin-top:30px;}
.news .tools {margin-top:20px;}
.news .fileBox {top: -320px;}
.news .posts {margin: 50px 0 20px;}
.news .post {margin-bottom: 10px;}
.news .newsfeed {min-height: 50px;width:calc(100% - 100px);margin: 10px;}
.news .newsfeed .message {margin-bottom: 15px;}
.news .newsfeed .media{margin-bottom: 15px;}
.news .newsfeed .media .type {position: absolute; bottom: 95px; text-align: center; width: 80px; font-size: 30px;color: #fff; font-weight: bold;background: var(--app-btn);padding-bottom: 4px;}
.news .newsfeed img.docs {min-width:70px;width:70px;margin-left: 5px;}
.news .newsfeed .icon {margin-right: 25px;}
.news .actor {margin: 0 0 7px;font-weight: 500;font-size: 15px;}
.news .date {font-size: 12px;color: var(--app-mod-val);margin: 3px 0 0 5px;}
.news .action {margin:5px 0;}
.recognitionIcon {background: #000;}
.recognitionIcon .fa.icon {margin-left: 5px; margin-top: 5px;font-size: 30px;}
.frontpage .news .posts {min-height: calc(100vh - 300px);}

.files .file .pdf, #chat .msg .pdf, .news .newsfeed .media .pdf {background: #4ef63b;}
.files .file .doc, #chat .msg .doc, .news .newsfeed .media .doc {background: #3b55a2;}
.files .file .xls, #chat .msg .xls, .news .newsfeed .media .xls {background: #188347;}
.files .file .ppt, #chat .msg .ppt, .news .newsfeed .media .ppt {background: #c14722;}

.fukkBackMask {position: fixed;top:0;left:0;width:100%;height: 100%;background: transparent;}
.modal .fukkBackMask {background:rgba(0,0,0,0.5);z-index:10000;}
.settings-nl {position:fixed;top: 100px;right:30px;background: var(--app-box-bg);color:var(--app-color);box-shadow: var(--app-box-shadow) ;width:425px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.settings-nl .form-header {margin:10px 0 5px;width: calc(100% - 30px);}
.settings-nl .form-subtitle {margin:20px;}
.settings-nl .form-item {margin:0;}
.settings {padding-bottom: 30px;}
.settingsw {padding: 0 60px;box-sizing: border-box;}
.settings .form-item-row {margin:5px 0;}
.settings .form-item input {margin:20px 20px 0;width:200px;}
.settings .form-subtitle {margin:20px 0 10px 40px;padding:0; width:50px;}
.settings .form-subtitle1 {margin:10px 0 0 170px;padding:0; font-size: 20px;}
.settings .themecolors {width: 40%;margin-left: 100px;}
.settings-icon.fa {color:#fff;cursor: pointer;font-size: 20px;margin-top: 25px;margin-right: 20px;}
.toolsCmpw {position: fixed;z-index: 1000;display: flex;justify-content: center; width: 100%; left: 0; bottom: 50px;}
.toolsCmp {bottom: 65px; overflow:hidden;background: var(--app-box-bg);color:var(--app-color);box-shadow: var(--app-box-shadow) ;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.toolsCmp.toolsCmp1 {bottom: 150px;}
.toolsCmp.toolsCmp2 {bottom: 195px;}
.toolsCmp .form-option {width:70px;padding: 10px 0;background: var(--app-box-bg);}
.toolsCmp .form-option:hover {background: var(--app-hover);}
.toolsCmp .form-option-text {text-align: center;cursor: pointer;}
.toolsCmp .form-option-icon.icon {margin: 10px 0 10px 25px;}
.toolsCmp .icon {margin: 10px 10px;}

.nav .settings-icon.fa {margin-top:10px;}
.profilePageHeaderText {margin: 5px 8px;font-weight: 500;color: var(--app-color-dis);}
.profileHeader {margin:20px 0;}
.profileAvatar {margin:0 20px 50px;width:100px;}
.profileValWrap.on .profileSymbol img, .profileModule .child .val .on {-webkit-filter: contrast(0) sepia(100%) hue-rotate(-25deg) saturate(2000%) brightness(100%);filter: contrast(0) sepia(100%) hue-rotate(-25deg) saturate(2000%) brightness(100%);opacity: 1;}
.profileValWrap.off .profileSymbol img, .profileModule .child .val .off {-webkit-filter: contrast(0) sepia(100%) hue-rotate(90deg) saturate(2000%) brightness(100%);filter: contrast(0) sepia(100%) hue-rotate(90deg) saturate(2000%) brightness(100%);opacity: 1;}
.profileValWrap.nodata .profileSymbol img, .profileModule .child .val .nodata {-webkit-filter: contrast(0) sepia(100%) hue-rotate(90deg) saturate(0%) brightness(100%);filter: contrast(0) sepia(100%) hue-rotate(90deg) saturate(0%) brightness(100%);opacity: 1;}
.profileSymbol {height: 50px;margin-right: 10px;}
.profileSymbol img {width: 50px;height: 50px;}
.profileSymbol.nodata img {-webkit-filter: contrast(0) sepia(100%) hue-rotate(90deg) saturate(0%) brightness(100%);filter: contrast(0) sepia(100%) hue-rotate(90deg) saturate(0%) brightness(100%);opacity: 1;}
.profileSymbol .svg-icon {width: 50px;height: 50px;}
.profileValWrap.off .svg-icon {fill:#f00;}
.profileValWrap.on .svg-icon {fill:#00e500;}
.profileValWrap {display: flex; justify-content: center;align-items: end;margin-bottom: 10px;}
.profileVal {text-align:center;}
.profileVal .val {font-size: 40px;width: 100%;}
.profileValWrap.off .profileVal .val, .profileModule .sval.off, .infobar .off {color: #f00;}
.profileValWrap.on .profileVal .val, .profileModule .sval.on, .infobar .on {color: #00e500;}
.profileValWrap.low .profileVal .val, .marker .signal.a.low {color: #00e500;}
.profileValWrap.med .profileVal .val, .marker .signal.a.med {color: #ffe000;}
.profileValWrap.high .profileVal .val, .marker .signal.a.high {color: #f00;}
.profileVal .unit {font-size: 20px;}
.profileName {text-align: center;font-size: 40px;}
.profileDesc {text-align: center;font-size: 20px;height: 24px;margin-bottom: 20px;}
.profileTools .icon.fa {margin: 15px 35px 5px 10px;}
.profileCmd {height: 75px;margin:20px 0;}
.profileCmd .btn, .monitor .btn {margin-left: calc(50% - 100px);background: #d00;color:#fff;}
.profileCmd .btn.disabled {background-color: #d66;}
.profileCmd .setpoint {margin:20px 0 20px 25%;padding: 4px;}
.profileCmd .fa.fa-chevron-right {margin:25px 20px;}

.profileDate.date {color: var(--app-mod-val);font-style: italic;font-weight: 500;text-align: center;}
.profileModule {aspect-ratio: 16 / 9;position: relative;margin:1px 0;background: var(--app-mod-bg2);}
.profileModule .tools {background: var(--app-mod-bg2);}
.profileModule .footer {position: absolute;bottom: 0;background: var(--app-mod-bg);}

.profileModule .children .tablew {position: absolute; left:calc(25% + 1px); height:calc(100% - 10px); overflow-y: auto;}
.profileModule .children .tablew.noProfileModuleTree {width:100%;left:0;}
.profileModule .children .tablew .treeArrow {position: absolute;top:5px;left:0;}
.profileModule .children .table {position: absolute; top: 30px; height: calc(100% - 85px); padding-top: 5px; background: var(--app-box-bg);overflow-y: scroll;}

.profileModule .btn {margin:7px 15px 0;}
.profileModule .controls {display: flex; flex-direction: row; justify-content: space-evenly;}
.profileModule .children .controls {background: var(--app-mod-bg);}
.profileModule .child {height: 30px;}
.profileModule .child.header {font-weight: 500;text-align: left;background-color: var(--app-mod-bg2);}
.profileModule .child.header .val, .profileModule .child.header .date {text-align: left;font-style: normal;text-indent: 0;font-size:var(--app-fs);}
.profileModule .child.header .fa.caret {margin: 0 5px;}
.profileModule .child input[type="checkbox"] {margin-top:8px;}
.profileModule .child>div {margin: 8px;}
.profileModule .child .name {width: 120px;cursor: pointer;}
.profileModule .child .val {width: 80px;font-size:var(--app-fs);text-align: right;}
.profileModule .child .description {width: 250px}
.profileModule .child .units {width:55px;text-align:right;}
.profileModule .child .date {width:120px;color:var(--app-mod-val);}
.profileModule .child img, .profileModule .child .svg-icon {max-width:25px;max-height: 25px;}
.profileModule .profileModule {position: absolute; aspect-ratio: unset; height: 100%; margin-bottom: 0; }
.profileModuleTabs {background: var(--app-box-bg);padding:5px 0 20px;display: flex; justify-content: space-evenly;}
.profileModuleTabs .tab {padding:0 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display: flex; justify-content: center;}
.profileModuleTabs .tab .form-icon {margin:4px 10px 4px 0;}
.profileModuleTabs .tab .form-text {margin-top:3px;margin-bottom: 0;font-weight: 500;}
.profileModuleTabs .tab.active {background: var(--app-mod-bg);}
.frontpage .profileModuleTabs .tab {margin-left: 5px; width: calc(100% - 10px);padding: 5px 0;}

.controls {margin: 0;}
.controls .btn {margin:15px 20px;}
.controls .controls-options {display: flex; flex-direction: row; justify-content: center;}
.controls .controls-options.cWidth50 {padding:0 40px;}
.controls .controls-option {width:100px;margin:5px;text-align: center;padding: 5px;cursor: pointer; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.controls .controls-option.selected, .profileModule .controls .controls-option.dis {background: var(--app-fg);}
.controls .controls-option.act {background: var(--app-fg);color:#fff;}
.controls .controls-option .form-icon {margin: 4px 10px;}
.controls .controls-option.status {margin-left: auto;}

.monitor {background: var(--app-mod-bg); height: calc(100% - 39px);}
.monitor .controls {margin:12px 20px 0;}
.monitor .btn.disabled {background: #d66;}
.monitor .board {position: absolute ; top:50px; left:10px; width: calc(100% - 20px);height: calc(100% - 95px); ;overflow-y: auto;background: var(--app-box-bg); -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.monitor .board .row.send {margin-bottom:5px;}
.monitor .board .row.recv {margin-bottom: 10px;}
.monitor .board .frame {text-indent:2px;}
.monitor .board .frame .header {font-weight: 500;width: 40px;}
.monitor .board .frame .blocks {width: calc(100% - 80px);}
.monitor .board .frame .block {width: 25px;margin-right:5px;}
.monitor .board .frame .block:nth-child(-n+4) {font-weight:100;}
.monitor .board .send .frame .block:nth-last-child(-n+4) {font-weight:500;}
.monitor .board .send .frame .block:nth-last-child(-n+2) {color:var(--app-mod-val);}
.monitor .board .results .header .label {font-weight: 500;}
.monitor .board .results .name {width: 100px;}
.monitor .board .results .address {width: 50px;text-align: right;}
.monitor .board .results .val {width: 80px;text-align: right;}
.monitor .board .results .date {width: 125px;color: var(--app-mod-val)}
.monitor .converter {margin: 0 10px 5px;}
.monitor .converter .label {margin: 8px 5px;}
.monitor .converter input[type="text"], .monitor .converter input[type="number"] {background: var(--app-box-bg);}

.query {margin:20px 0}
.cResetList>li.query {margin:5px 0}
.query-field {text-align: center;}
.query-field input[type="number"] {width:90%}
.query-field input[type="checkbox"]  {margin-left: calc(50% - 15px);margin-top:10px;}
.query select.query-field {margin:5px 0;text-align: left;}
.query .icon.large {margin-top:4px;}

/* Angular Material */
.mdc-text-field--filled {background: transparent;}
.custom-slider .text{width:150px;margin-top:15px;}
.custom-slider .val {margin:15px 0 0 30px;}
.mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {background: transparent !important;}
.mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {display:none !important}
.mat-mdc-form-field-infix {padding-top: 0 !important;}
.mat-mdc-input-element.mat-datepicker-input{ background: var(--app-input-bg) !important; color:var(--app-color) !important; width: 180px;border-left: 4px solid #a94442 !important;}
.mat-mdc-form-field.ng-invalid:not(form), .ng-invalid[required].error, .ng-valid.required.error {border:none !important}
.mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {padding: 0 !important;}
.mat-mdc-icon-button.mat-mdc-button-base {margin: -20px 10px 0 !important;}
.mat-calendar-table th, .mat-calendar-table tr, .mat-calendar-table td {border-bottom:none;}
.mat-calendar-table tr:nth-child(even), .mat-calendar-table tr:hover  {background:unset;}
.mdc-text-field--filled:not(.mdc-text-field--disabled) {background:transparent !important;}
.mdc-text-field--no-label .mat-mdc-form-field-infix {display: none;}
.mat-mdc-form-field {width: 0 !important;}
.mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__thumb, .mat-mdc-slider.mat-mdc-slider-with-animation .mdc-slider__track--active_fill {opacity:.5;}

/* OpenMaps */
#openmaps {height: 100%;width: 100%;margin: 0;}
#osm {position: absolute; height: calc(100% - 50px); width: 100%;margin: 0;}
.regmap #osm {height: 100%;}

/* Calendar */
.toastui-calendar-daygrid-cell+.toastui-calendar-daygrid-cell {border:none !important;}
.toastui-calendar-daygrid-cell:first-child, .toastui-calendar-daygrid-cell:last-child {color: var(--app-color-dis);}
.toastui-calendar-day-name-item.toastui-calendar-month {font-size: 15px;}
.toastui-calendar-month .toastui-calendar-day-names {padding: 0px !important}
.toastui-calendar-grid-cell-date .toastui-calendar-weekday-grid-date.toastui-calendar-weekday-grid-date-decorator {background: var(--app-fg) !important; color:#fff !important;}
.app.revLbl .toastui-calendar-grid-cell-date .toastui-calendar-weekday-grid-date.toastui-calendar-weekday-grid-date-decorator { color:#333 !important;}
.toastui-calendar-month .toastui-calendar-month-daygrid {height: calc(100% - 30px) !important;}
.toastui-calendar-panel-title .toastui-calendar-left-content {font-size: 14px !important;}
.toastui-calendar-day-view-day-names, .toastui-calendar-week-view-day-names {border: none !important;}
.toastui-calendar-layout .toastui-calendar-panel-resizer {border-top: 1px solid #ddd !important;border-bottom: 1px solid #ddd !important;}
.toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-gridline-half {border-bottom: 1px solid var(--app-diag) !important;}
.toastui-calendar-weekday-event-dot+.toastui-calendar-weekday-event-title {color: var(--app-color) !important;}

/* Plotly */
.plotlyw {display:flex;}

/* Modal */
.modal .modal-dialog {position: fixed; z-index: 10000;top:0;left:0;background:var(--app-box-bg);overflow:hidden;border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.modal .sm {width:300px;max-height: calc(100vh - 200px); margin:100px 0 0 calc(50% - 150px );}
.modal .md {width:500px;margin:100px 0 0 calc(50% - 250px );}
.modal-header {color:var(--app-color);}
.modal-header img {height:33px;float:left;background:#e0e0e5;}
.modal-header .close {margin:8px;color:#fff;opacity:1;text-shadow:none;}
.modal-title {margin: 3px 0 6px 10px;width: calc(100% - 60px);font-size:20px;}
.modal-body {float:left;width:100%;max-height: calc(100vh - 110px);overflow-y: auto;}
.modal-body .cFormList {margin:0;width:100%;}
.modal-body.form {background:#f5f5f5;}
.modal-body.form input, .modal-body.form select, .modal-body.form textarea {border:none;background:var(--app-input-bg);}
.modal-body img {margin:auto;}
.modal-body video {margin:10px 25% 25px;}
.modal-body audio {margin: 20px calc(50% - 150px) 30px;}
.modal-body .thumb {width:100px; margin:20px calc(50% - 50px);}
.modal-body .form-label {margin-bottom: 10px;width: calc(30% - 10px)}
.modal-body .form-field {margin-bottom:10px;}
.modal-body input[type="text"] {width: 120px;}
.modal-body input[type="text"].date {text-align: center;}
.modal-msg {width: calc(100% - 30px);margin: 15px 0;background:transparent;max-height:calc(100vh - 340px);text-align:center;}
.modal .btn {width:calc(100% - 30px);bottom:10px;margin:20px 15px 20px;}
.modal-footer {float:left;width:100%;}

.progress-bg {width: 225px;margin:20px 12.5%;background: var(--app-diag);}
.progress-bar {background: var(--app-fg);}
.progress-bg, .progress-bar {height: 15px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
/* Modal */

/* Dark */
.dark .fa, .dark .cGuest-Story {color:var(--app-color-fg) !important;}
.dark .form-field-dialog .fa.icon.invalid {color:#bbb !important;}
.dark .register {background: transparent;}
.dark .layout-box .tree, .dark .timerangeBox {background: var(--app-mod-bg2);}
.dark .app-box-body {background: var(--app-input-bg);}
.dark .files .profileModuleTree {box-shadow: unset;}
.dark .monitor .board, .dark .profileModule .table, .dark .profileModule, .dark .news, .dark .netw, .dark .layout-box.treeContainer .tree,
.dark .monitor .converter input[type="text"], .dark .monitor .converter input[type="number"] {background: var(--app-input-bg);}
.dark .layout-box.treeContainer {background: var(--app-box-bg);}
.dark .toolsCmp .form-option {width:70px;padding: 10px 0;background: var(--app-mod-bg2);}
.dark .toolsCmp .form-option:hover {background: var(--app-hover);}
.dark .toastui-calendar-month .toastui-calendar-month-daygrid {background: var(--app-input-bg) !important;}
.dark .timerange {background: var(--app-mod-bg2);}


@media screen and (max-width:1200px){
    .cGuest-Head {font-size:40px;}

    .mobile, .fa.mobile {display:block;}
    .mobile.arrow-left {font-size: 20px;}

    .search {margin-left: 10px; width: calc(100% - 200px);}
    .search input {width: calc(100% - 20px);}
    .treeContainer {top:40px;left:0;width:100%;}
    .mainContainer {top:40px;left:0;width:100%;}
    .chatContainer {top:40px;left:0;width:100%;}
    .headerOptions {width: 20px;justify-content: flex-end;}
    .layout-box {height: calc(100vh - 80px);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
    .profileTools .icon.fa {margin: 5px 0px 0px 30px;}
    .icon.fa.fa-expand, .icon.fa.fa.fa-compress {display: none;}
    .headerOptions .icon.fa-close {display: none;}
    .settings .headerOptions .icon.fa-close {display: block;}

    #chat .header .name {width: calc(100% - 200px);}
    #chat .outer {height:calc(100vh - 165px);}

    .profileName {margin-top: 20px;}
}

@media screen and (max-width:1000px){
    .cGuest-Head {margin:0;}
    .bodyw {width:100%;}
    .sideImg {display: none;}
    .langLogo {right: 10px;}

    .HeadBrand .navbar-brand {display: block;}
    .HeadBrand .svg-icon {display: none;}
    .search {margin-left: 10px; width: calc(100% - 130px);}
}

@media screen and (max-width:750px){
    .login-form, .cGuest-Action-Head {width:100%;margin:50px 0}
    .forgot {margin-left: 10%;}
    .userdata, .cGuest-Action {width: 80%;margin:50px 10% 20px;}
    .userdata input {width:100%; margin:0}
    .userdata-btn {margin:0;width:100%;}
    .userdata-btn .btn {margin:20px 10%;width:80%;}
}

@media screen and (max-width:700px){ 
    .HeadLogo {width: 100%; height: unset;}
    .cGuest-Head {width: 100%; margin: 20px 0;}
    .cGuest-box4 {width: calc(100% - 20px);}

}