/* -- Global -- */

/* -- Basic UX -- */

body div {  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


.selectable {  
  -webkit-user-select: all !important;  /* Chrome 49+ */
  -moz-user-select: all !important;     /* Firefox 43+ */
  -ms-user-select: all !important;      /* No support yet */
  user-select: all !important;          /* Likely future */   
}


.clickable  { cursor: pointer }
.clearfix   { clear:both !important; height: 0px !important; width:100% !important }
.nowrap     { white-space: nowrap }
.overflow   { overflow: hidden }
.clickable  { cursor: pointer }

.center     { text-align: center }
.right      { text-align: right }
.left       { text-align: left }

.float-l    { float: left }
.float-r    { float: right }

[draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -khtml-user-drag: element; -webkit-user-drag: element; user-select: none; }
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }


/* text */
.bold       { font-weight: bold }
.italic     { font-style: italic }
.underlined { text-decoration: underline }
.stroked    { text-decoration: line-through }
.circle     { display: inline-block; vertical-align: middle; border-radius: 50%;width: 18px !important;height: 18px !important;padding:2px; box-sizing: border-box; border: 1px solid #1d86ee; text-align: center; font-size: 10px !important; cursor: pointer; line-height: 100% !important }
.link       { cursor: pointer }
.link:hover { text-decoration: underline}

/* hidden content */
.hidden     { display: none }

/* pre-loader */
.preloader { width: auto; padding: 20px auto; text-align: center; }


/* configuration toolbox */
.cfg-container { width: 49%; box-sizing: border-box; margin-bottom: 25px; color: #47535e }
.cfg-container.full { width: 100% }
.cfg-container * { box-sizing: border-box }
.cfg-container:nth-child(odd){ float: left }
.cfg-container:nth-child(even){ float: right }
.cfg-container label { margin: none !important; padding: 0 !important; text-transform: uppercase; }
.cfg-container label span.expert { font-size: 9px; display: inline-block; float: right; text-transform: uppercase; color:#000; background: #f0f1f7;  padding: 1px 12px; border-radius: 24px }
.cfg-container label span.additional-fee { font-size: 9px; display: inline-block; float: right;  color:#000; background: #ffc400;  padding: 1px 12px; border-radius: 24px; }

.cfg-container .cfg { background: #fff; /*border: 1px solid #dde3e8;*/  box-shadow: 0 8px 10px rgba(226, 227, 232, 0.7); transition:all .2s ease;
	                  border-radius: 5px; overflow: hidden }
	                  /* box-shadow: 0 1px 1px rgba(102,119,136,.02),0 3px 15px rgba(102,119,136,.3);*/
.cfg-container .cfg:hover { /*border-color:#b1c3d1;*/ box-shadow: 0 7px 10px #b1c3d1; }	                  
.cfg-container .cfg div.setter { background:rgba(255, 255, 255, 0.5); padding: 15px; box-sizing: border-box }
.cfg-container .cfg div.setter table { width: 100%}
.cfg-container .cfg div.setter table {}
.cfg-container .cfg div.setter input[type=text], .cfg-container .cfg div.setter input[type=number] { padding: 3px 8px; height: auto; }
.cfg-container .cfg div.notice { background:#f8fbfe; border-top:3px solid #fff; color: #8b91a3; padding: 15px; box-sizing: border-box }
.cfg-container .cfg div.notice code { font-family: monospace; font-size: 14px; color: #3f5469 }
.cfg-container .cfg div.notice.active { background: #f1f9ff; color: #0a87f8; border-top:3px solid rgba(11, 137, 248, 0.3) }
.cfg-container .cfg div.notice.error { background: #fff3f3; color: #f80b0b; border-top:3px solid rgba(248, 11, 11, 0.3) }
.setter table th { text-align: left; color: #47535e}
.setter table td { color: #47535e }
.cfg-container .cfg p { padding: 5px 0; line-height: 140%; }
.cfg-container .cfg p.fix-height { height: 50px; overflow: hidden; text-overflow: ellipsis }



/* context menu */
.env-context-menu { overflow: hidden; width: auto; min-width: 160px; min-height: 25px; position: fixed; left:0px; top:0px; background:#e4e4e4; color: #3b535b; display: none; z-index: 99999; cursor: pointer; font-size: 12px; font-weight: 500; border-radius: 3px; 
	box-shadow:inset 0 1px 0 rgba(224, 224, 224, 0.6), 0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 0px rgba(0, 0, 0, 0.3); 
}
.env-context-menu span.ctx-item { display: block; padding: 6px 16px 6px 3px; cursor: pointer; overflow: hidden; white-space: nowrap }
.env-context-menu span.ctx-item:not(.disabled):hover { background: #2567f3; color:#fff}
.env-context-menu span.ctx-item.disabled { opacity: .5; cursor:not-allowed}
.env-context-menu span.ctx-item span { width: 30px; text-align: center; display: inline-block }
.env-context-menu hr { border: none; margin: 3px 0; height: 0; border-top:1px solid silver }
.env-context-menu.small { font-size: 11px; line-height: 24px; min-width: 100px;  }
.env-context-menu.small span.ctx-item { padding: 0px 26px 0px 3px; }


/* chart/bars */
.percent-bar { border-radius: 8px; height: 8px; min-width: 0px; float: left; position: relative }
.percent-bar.max { width: 100%; border:0px solid #0c74eb; background: #ececec; overflow: hidden; min-width: 100px; margin: 15px 0 3px 0 }
.percent-bar.in-tab { width: 50%; float: right; border:0px solid #0c74eb; background: #ececec; overflow: hidden; min-width: 100px; margin: 10px 0 3px 0 }
.percent-bar.inner { position: absolute; left: 0; top:0 }
.percent-bar.c-blue { background: #3d8df5; border-radius: 0}
.c-blue { color:#79b3ff }
.percent-bar.c-dark-blue { background:#fff; border-radius: 0}
.c-dark-blue { color:#fff}
.percent-bar.c-light { background: #8899cd }/*#052480*/
.c-light{ color:#8899cd }


/* console */
main.full-width { background: #000 }
table.console { width: 100%; background: #000; box-sizing: border-box; overflow: hidden; min-width: 550px; margin: none !important }
table.console td { font-size: 12px; font-family: monospace; font-weight: 300; padding: 2px 5px; color: #d6d6d6; border:none !important; cursor: pointer  }
table.console tr:hover td { background: rgba(255, 255, 255, 0.2); color: #fff1a2 }
table.console tr.type3 td, table.detail tr.type3 td { background: red; color: #fff }
table.console tr.type2 td { color:#ffea00 }
table.console tr.type_subscribed td { color:#00e6ff }
table.console tr.type_debug td { color:#848484 }
table.detail tr.type2 td { background:#f0c400 }



/* test-win */
.preview { width: 100%; max-width: none !important; height: 100%  }
.preview main { height: 100%; padding: 0px; margin: 0px; background:#fff; overflow: hidden; border-top:1px solid #ececec }
.preview main iframe { width: 100%; height: 100%; border:none; background: #fff; text-align: center}


span.shared { position: absolute; right: -42px; background: rgba(0,0,0,.2); border-radius: 20px; display: inline-block; font-size: 12px; line-height: 16px; margin-right: 5px; font-weight: 100; padding: 1px 8px }