/* -------------------------------------------------------- */
/* ETM CSS                                                  */
/* etmCore.css                                              */
/*                                                          */
/* -------------------------------------------------------- */

html, body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* background-color: #16495f; */
    /* NEW UI */
    background-color: #becdd7;

    color: #EFEFEF;
    width:100%; height: 100%;
    scrollbar-base-color:#E6EBF2;
    margin: 0;
    padding: 0;
}

/** avoid outline border on focus */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.cswBasicContainer {
    width:100%;
    height:100%;
}
.cswTextEdit {
    width:100%;
    height:100%;
    box-sizing: border-box;
    padding:0;
    resize: none;
}
.browsers {
    overflow: hidden;
    display: inline;
}

.browser-type {
    width: 150px;
    text-align: center;
    display: inline-block;
}

.browser-type a {
    text-decoration: none;
    color: #EFEFEF;
}

.cswModalBkg {
    border-width: 2px;
    border-style: solid;
    /* border-color: #5757b7; */
    /* NEW UI */
    border-color: #879baa;
    overflow: hidden;
}

.cswBorder {
    outline-width: 4px;
    outline-style: solid;
    /* outline-color: #5757b7; */
    /* NEW UI */
    outline-color: #879baa;

    overflow: hidden;
}

.cswNoBorder {
    overflow: hidden;
}

.cswTitle {
    position: relative;
    /* background-color: #5757b7; */
    /* NEW UI */
    background-color: #879baa;
    width: 100%;
    height: 24px;
}

.cswTitle:hover {
    cursor: move;
}

.cswTitleActive {
    position: relative;
    background-color: #9db3c2;
    width: 100%;
    height: 24px;
}

.cswTitleActive:hover {
    cursor: move;
}

.cswNoTitle {
    display:  none;
}

.cswTitleNoMovable{
    position: relative;
    background-color: #879baa;

    height: 24px;
}

.cswTitleNoMovable:hover{
    cursor: auto;
}

.cswTitleNoMovableActive{
    position: relative;
    background-color: #9db3c2;

    height: 24px;
}

.cswTitleNoMovableActive:hover{
    cursor: auto;
}

.cswTitleTextContainer {
    padding: 0px;

    /* color: silver; */
    /* NEW UI */
    color: white;

    font-size: 16px;

    overflow: hidden;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cswIcon {
}

.cswIcon:hover {
    cursor: auto;
}

/* -------------------------------------------------------- Dialogs */
.dlgEtm {
    border: 1px solid;
    border-radius: 6px;
    border-color: silver;
    font-family: sans-serif;

    /* A centered div above the overlay with a box shadow. */
    z-index:10000;
    position: absolute;
    width: 50%; /* Default */

    /* Center the dialog */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);

    background-color: #EEEEEE;
    box-shadow: 4px 4px 10px #000;

    background-clip: padding-box;
}

.dlgEtmTitle {
    color: whitesmoke;
    padding: 10px;
    border-bottom: 1px solid;
    /* background-color: #5151B1;*/
    /* NEW UI */
    background-color: #879baa;

    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    font-weight: bold;
}

.dlgEtmTxt {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    color: black;
}

.dlgEtmTxtError {
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    color: red;
}

.dlgEtmBtns {
    padding: 10px;
}

.dlgEtmTimeStatus{
    padding-top: 10px;
    color: black;
    float: left;
}

.dlgEtmBtn {
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid;
    border-radius: 4px;
    border-color: gray;
    background-color: white;

    /*position: absolute;*/
    float: right;
}

.dlgEtmBtn:hover {
    border-color: darkgrey;
    background-color: silver;
}

.dlgEtmOverlay {
    position:absolute;
    z-index:9999;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /* background-color: #16495f; ??????*/
    /* NEW UI */
    background-color: #becdd7;

    opacity: 1.0;
}

.dlgEtmCloseBtnX {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
}

.dlgEtmCloseBtnX:hover {
    cursor: pointer;
    opacity: .5;
}

/* Animation in Dlg */
.dlgEtmAnimReconnect {
    width: 10px;
    height: 1px;
    background: transparent;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: dlgEtmAnimReconnect;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: dlgEtmAnimReconnect;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes dlgEtmAnimReconnect {
    0%   {background:transparent; left:0; top:0;}
    100% {background:red; left:0; top:0;  width: 100%;}
}

/* Standard syntax */
@keyframes dlgEtmAnimReconnect {
    0%   {background:transparent; left:0; top:0;}
    100% {background:red; left:0; top:0; width: 100%;}
}

/* -------------------------------------------------------- */
/* RESIZE ITEMS                                             */
/* -------------------------------------------------------- */
.resizeItem{
    position: absolute;
    background-color: red;
    display: block;
    width: 4px;
    height: 4px;

    opacity: 0;
}

.resizeItemL {
    top:    0;
    left: 0;
    height: 100%;
    background-color: greenyellow;
    cursor: e-resize;
}

.resizeItemR {
    top:    0;
    right: 0;
    height: 100%;
    background-color: darkolivegreen;
    cursor: e-resize;
}

.resizeItemB {
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: darkolivegreen;
    cursor: n-resize;
}

.resizeItemT {
    top: 0;
    left: 0;
    width: 100%;;
    background-color: darkolivegreen;
    cursor: n-resize;
}

.resizeItemTL {
    top: 0;
    left:0;
    background-color: yellow;
    cursor: se-resize;
}

.resizeItemTR {
    top: 0;
    right: 0;
    background-color: orange;
    cursor: ne-resize;
}

.resizeItemBL {
    bottom: 0;
    left: 0;
    background-color: blueviolet;
    cursor: ne-resize;
}

.resizeItemBR {
    bottom: 0;
    right: 0;
    background-color: white;
    cursor: se-resize;
}

.resizeRect{
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255,255,255,0.5);
}

/* -------------------------------------------------------- */
/* Animation LOG                                            */
/* -------------------------------------------------------- */
.etmState{
    padding: 20px;
    z-index: 1000;
    position: fixed;
    width: 100%;
    height: 30px;
    top: 0;

    display: block;
    color: white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;

    background-color: rgba(255,255,255,0.3);

    -webkit-animation: etmState 1s ease 0s 1;
    animation: etmState 1s ease 0s 1;
}

@-webkit-keyframes etmState {
    0%   {top:-30px;}
    100% {top:0;}
}

@keyframes etmState {
    0%   {top:-30px;}
    100% {top:0;}
}

.etmStateNormal{
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 20px;

    width: 200px;
    height: 50px;

    color: silver;
    text-align: center;
}

.etmStateNormalIcon{
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 50px;

    width: 195px;
    height: 195px;

    background-image: url('img/iconLoadAnim_1.png');
    background-position: center;
    background-repeat: no-repeat;

    color: silver;
    text-align: center;

    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}

.etmStateNormalIcon2{
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 50px;

    width: 195px;
    height: 195px;

    background-image: url('img/iconLoadAnim_2.png');
    background-position: center;
    background-repeat: no-repeat;

    color: silver;
    text-align: center;

    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }



.etmStateNormalIcon3{
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 50px;

    width: 195px;
    height: 195px;

    background-image: url('img/iconLoadAnim_3.png');
    background-position: center;
    background-repeat: no-repeat;

    color: silver;
    text-align: center;

    -webkit-animation:spin2 1s linear infinite;
    -moz-animation:spin2 1s linear infinite;
    animation:spin2 1s linear infinite;
}

@-moz-keyframes spin2 { 100% { -moz-transform: scale(3,3); opacity: 0;} }
@-webkit-keyframes spin2 { 100% { -webkit-transform: scale(3,3);  opacity: 0;} }
@keyframes spin2 { 100% { -webkit-transform: scale(3,3); transform:scale(3,3);  opacity: 0;} }


.etmStateDisconnectIcon{
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 50px;

    width: 195px;
    height: 195px;

    /* background-image: url('img/iconStopAnim_1.png'); */
    background-image: url('img/iconStopAnim_2.png');
    background-position: center;
    background-repeat: no-repeat;

    color: silver;
    text-align: center;

    -webkit-animation:xopa 2s linear infinite;
    -moz-animation:xopa 2s linear infinite;
    animation:xopa 2s linear infinite;
}

@-moz-keyframes opa { 100% { -moz-transform: scale(1.2,1.2); opacity: 0;} }
@-webkit-keyframes opa { 100% { -webkit-transform: scale(1.2,1.2);  opacity: 0;} }
@keyframes opa { 100% { -webkit-transform: scale(1.2,1.2); transform:scale(1.3,1.3);  opacity: 0;} }

.etmStateDlg{
     /*position: relative;*/
     top: 20px;
     margin: auto auto;

     background-color: #ebebeb;

     width: 500px;
     height: 300px;

    /* border-color: black; */
    /* border-width: 1px;*/
    /* NEW UI */
    border-color: #879baa;

    border-bottom-width: 1px;
    border-top-width: 4px;
    border-left-width: 4px;
    border-right-width: 4px;

    border-style: solid;
}

.etmStateDlgFooter{
    position: relative;
    margin: auto;

    background-color: white;

    width: 500px;
    height: 50px;
    display: block;

    /* border-color: black; */
    /* border-width: 1px;*/
    /* NEW UI */
    border-color: #879baa;

    border-bottom-width: 4px;
    border-top-width: 1px;
    border-left-width: 4px;
    border-right-width: 4px;

    border-style: solid;
}


.etmStateError{
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 20px;

    width: 200px;
    height: 50px;

    color: white;
}

.etmStateWarn{
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 20px;

    width: 200px;
    height: 50px;

    color: white;
}

.cswBtnClose {
    position: absolute;
    top: 3px;
    right: 2px;
    display: block;
    width: 14px;
    height: 14px;
    background-image: url('closeIcon.png');
    background-size: 14px 14px;
}

.cswBtnClose:hover {
opacity: 0.6;
cursor: pointer;
}

/* In FAT UI disabled Close Btn is unvisible */
.cswBtnCloseNo {
    position: absolute;
    top: 3px;
    right: 2px;
    display: none;
    width: 14px;
    height: 14px;
    background-image: url('closeIcon.png');
    background-size: 14px 14px;
    opacity: 0.2;
}


.cswBtnMax {
    position: absolute;
    top: 2px;
    right: 24px;
    display: block;
    width: 14px;
    height: 14px;
    background-image: url('maximizeIcon.png');
    background-size: 14px 14px;
}

.cswBtnMax:hover {
    opacity: 0.6;
    cursor: pointer;
}

/* In FAT UI disabled Max Btn is unvisible in child panel */
.cswBtnMaxNo {
    position: absolute;
    top: 2px;
    right: 24px;
    display: none;
    width: 14px;
    height: 14px;
    background-image: url('maximizeIcon.png');
    background-size: 14px 14px;
    opacity: 0.1;
}

.cswBtnMaxBack {
    position: absolute;
    top: 2px;
    right: 24px;
    display: block;
    width: 14px;
    height: 14px;
    background-image: url('restoreIcon.png');
    background-size: 14px 14px;
}

.cswBtnMaxBack:hover {
    opacity: 0.6;
    cursor: pointer;
}
.notifyjs-etm-base {
    background-color: #becdd7;
    border: 2px solid #879BAA;
    margin: 10px;
}

.notifyjs-etm-clipboardError {
    background-color: #F2998A;
}

a[data-notify-text] {
    color: darkslategrey;
}

.notifyjs-corner {
    z-index: 2147483647 !important;
}
/* ------------------------------------------------------------------- */
/* VERSION  114016 15:08:55.93*/
/* ------------------------------------------------------------------- */

*:focus {
    outline: none;
}

.native-input-container {

    display: flex;
    height:100%;
}

.native-input-right {
    height:100%;
    width: 80px;
}

.native-input-button {
    height: 100%;
    width: 100%;
}
.native-input-left {
    height:100%;
    flex: 1;
}