@import url('/css/anim.css') screen;

html,body{width:100%;height:100%;margin:0;padding:0;display:flex;align-items:center;justify-content:center;}

body.wait{cursor:wait;z-index:1;position:relative;align-items:flex-start;flex-direction:row}
body::before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;background:rgba(0,0,0,0);z-index:-10;transition:background linear 750ms;}

body.wait:not(.modalOpen)::before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;z-index:10;}
body.wait:not(.modalOpen)::after{content:"LOADING";position:absolute;z-index:20;color:white;background:#1dabd8;padding:3px 10px;border:2px solid #69e5ff;border-top:0;}

svg#dinomLogo{display:block;width:110px;height:110px;border:4px solid white;border-radius:50%;background:#2aacd6;box-shadow:0 4px 20px 0px #47a7c3;box-sizing:initial;}
svg#dinomLogo path{stroke:#fff;stroke-linecap:round;fill:none;stroke-width:5px;transition:all 750ms linear;}

div.DinomLogo{width:110px;height:110px;position:relative;}
div.DinomLogo svg#dinomLogo{width:110px;height:110px;position:relative;background:#eaf2f7;border-radius:50%;border:4px solid white;box-shadow:0 4px 20px 0px #47a7c3;
	/*transition:all 750ms linear;*/
}

div.DinomLogo div.loader{width:110px;height:110px;display:block;background:transparent;border:4px solid #2aacd6;
	border-top:4px solid white;
	border-radius:50%;position:absolute;top:0;left:0;z-index:1;box-sizing:initial;opacity:1;
	/*transition:all 750ms linear;*/
}

div.DinomLogo svg#dinomLogo path{stroke:#2aacd6;}


.errorBox, td.errorBox input{background:#6f1d1d!important;box-shadow:inset 0 0 4px 2px #da2f2f!important;color:white!important;}
.errorBox::before,.errorBox::after,.errorBox *::before,.errorBox *::after{color:white!important;}
.errorBox input::placeholder{color:white!important;font-style:italic;}
.errorBox input::-webkit-input-placeholder{color:white!important;font-style:italic;}
.errorBox input::-moz-placeholder{color:white!important;font-style:italic;}
.errorBox input:-ms-input-placeholder{color:white!important;font-style:italic;}
.errorBox input:-moz-placeholder{color:white!important;font-style:italic;}
.errorBox i{color:white!important;}

.actionInProgress{cursor:wait!important;}

.disabled{cursor:not-allowed!important;}

.orangeWarning,.orangeError{display:block;font-family:'Arsenal';font-size:22px;color:orange;text-shadow:0 1px 1px black;text-align:center;}
.orangeWarning::before,.orangeWarning::after,.orangeError::before,.orangeError::after{content:"!!!";letter-spacing:3px;margin-right:5px;font-size:16px;}
.orangeWarning::after,.orangeError::after{margin-right:0;margin-left:5px;}

.orangeError{text-align:left;}
.orangeError::before{content:"";margin-right:0;}
.orangeError::after{content:"!!";}

.resizable{position:relative;}
.resizable div.resizeHandler{background:transparent;position:absolute;margin:0!important;padding:0!important;font-size:0!important;border:none!important;transition:background 100ms linear!important;z-index:10000!important;}
.resizableH div.resizeHandler{width:6px!important;height:100%!important;}
.resizableV div.resizeHandler{width:100%!important;height:6px!important;}
.resizableH div.resizeHandler,body.resizedH{cursor:col-resize;}
.resizableV div.resizeHandler,body.resizedV{cursor:row-resize;}
.resizable div.resizeHandler:hover{background:-moz-linear-gradient(left,rgba(41,171,214,0) 0%,rgba(41,171,214,1) 50%,rgba(41,171,214,0) 100%);background:-webkit-linear-gradient(left,rgba(41,171,214,0) 0%,rgba(41,171,214,1) 50%,rgba(41,171,214,0) 100%);background:linear-gradient(to right,rgba(41,171,214,0) 0%,rgba(41,171,214,1) 50%,rgba(41,171,214,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0029abd6',endColorstr='#0029abd6',GradientType=1);}
.resizableH div.resizePosLeft{top:0;left:-3px;}
.resizableH div.resizePosRight{top:0;left:auto;right:-3px;}
.resizableV div.resizePosTop{top:-3px;left:0;}
.resizableV div.resizePosBottom{top:auto;left:0;bottom:-3px;}
.beingResized{position:relative;}
.beingResized::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(41,171,214,0.75);z-index:9000;}
.beingResized,.beingResized *{transition:none;}

.alignLeft{text-align:left!important;align-items:flex-start!important;}
.alignRight{text-align:right!important;align-items:flex-end!important;}
.alignCenter{text-align:center!important;align-items:center!important;}

.noAnim{transition:none!important;}


/* Modal */
	div.modalWindow{position:fixed;left:0;top:0;width:100%;height:100%;z-index:999999;background:rgba(38,27,68,0.9);display:flex;flex-direction:column;justify-content:center;align-items:center;}
	div.modalWindow div.modalWindowContainer{width:auto;max-height:calc(100% - 60px);min-width:500px;max-width:calc(100% - 60px);box-sizing:border-box;padding:15px;border:1px solid #2e87bf;background:rgba(19,75,105,0.9);display:flex;flex-direction:column;color:#fff;position:relative;box-shadow:0 3px 10px 0 #0b273a;}
	div.modalWindow div.modalTitle{width:100%;font-size:26px;font-family:"Arsenal","Roboto";border-bottom:2px solid #33ceff;text-indent:10px;padding-bottom:10px;margin:0 30px 20px 0;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;}
	div.modalWindow div.modalTitle>*{text-indent:0;}
	div.modalWindow div.modalTitle b{padding:0 5px;}
	div.modalWindow div.modalTitle i.material-icons,div.modalWindow div.modalTitle i[class^="icon-"]{font-size:34px;color:#69e5ff;}
	div.modalWindow div.modalTitle i[class^="icon-"]{display:inline-flex;}
	div.modalWindow div.modalTitle span.topRightModal{position:absolute;right:20px;top:15px;}
	div.modalWindow form{height:100%;max-height:calc(100% - 65px);}
	div.modalWindow div.modalContent{box-sizing:border-box;font-size:18px;font-family:'Roboto';font-weight:300;overflow:auto;height:100%;max-height:calc(100% - 74px);}
	div.modalWindow div.modalContent upper{text-decoration:none;text-transform:uppercase;}
	div.modalWindow div.modalContent note{display:block;margin-top:20px;padding:10px 0;border-top:2px solid #103146;font-size:16px;text-align:center;border-bottom:2px solid #103146;color:#fffe00;font-style:italic;text-shadow:0 1px 1px black;}
	div.modalWindow div.modalContent>div:not(:last-of-type){margin-bottom:20px;}

	div.modalWindow div.modalContent div.messageBox{display:none;margin:20px 0 0 0;padding:10px;background:#0e334b;box-shadow:inset 0px 1px 5px black;color:#8de2a9;}

	div.modalWindow div.modalButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:10px 0;margin-top:20px;}
	div.modalWindow div.modalButtons button.modalButton{margin-left:10px;box-shadow:0 11px 5px -6px #0f344a;position:relative;top:0;transition:all 50ms linear;text-shadow:none;padding:8px 20px;text-transform:initial;display:flex;flex-direction:row;align-items:center;justify-content:center;height:45px;}
	div.modalWindow div.modalButtons button.modalButton i{font-size:22px;margin-right:5px;margin-left:-10px;}
	div.modalWindow input{height:40px;width:100%;padding:0 5px;box-sizing:border-box;line-height:36px;font-size:18px;border:2px solid #2d88c1;background:#051a27;color:white;transition:all 200ms linear;}

	/* Autofill */
	div.modalWindow input:-webkit-autofill,
	div.modalWindow input:-webkit-autofill:hover,
	div.modalWindow input:-webkit-autofill:focus,
	div.modalWindow input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #051a27 inset!important;}
	div.modalWindow input:-webkit-autofill{-webkit-text-fill-color:white!important;}

	/* Autofill, `invalid` */
	div.modalWindow label.invalid input:-webkit-autofill,
	div.modalWindow label.invalid input:-webkit-autofill:hover,
	div.modalWindow label.invalid input:-webkit-autofill:focus,
	div.modalWindow label.invalid input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #420303 inset!important;}

	div.modalWindow input:focus,div.modalWindow input:active,div.modalWindow textarea:focus,div.modalWindow textarea:active{border-color:#33ceff;}

	div.modalWindow input::placeholder{color:#136498;font-style:italic;}
	div.modalWindow input::-webkit-input-placeholder{color:#136498;font-style:italic;}
	div.modalWindow input::-moz-placeholder{color:#136498;font-style:italic;}
	div.modalWindow input:-ms-input-placeholder{color:#136498;font-style:italic;}
	div.modalWindow input:-moz-placeholder{color:#136498;font-style:italic;}

	div.modalWindow label.invalid input::placeholder{color:#a86643;}
	div.modalWindow label.invalid input::-webkit-input-placeholder{color:#a86643;}
	div.modalWindow label.invalid input::-moz-placeholder{color:#a86643;}
	div.modalWindow label.invalid input:-ms-input-placeholder{color:#a86643;}
	div.modalWindow label.invalid input:-moz-placeholder{color:#a86643;}

	div.modalWindow select{width:100%;height:40px;line-height:36px;font-size:18px;font-family:'Roboto';border:2px solid #2d88c1;background:#051a27;color:white;border-radius:0;cursor:pointer;-webkit-appearance:none;padding:0 40px 0 10px;}
	div.modalWindow label.invalid select{border:2px solid #840c0c;background:#420303;color:#a86643;}
	div.modalWindow label.ddMenu::after{content:"settings_ethernet";font-family:'Material Icons';transform:rotate(90deg);position:absolute;bottom:0;width:40px;height:40px;display:flex;justify-content:center;align-items:center;right:0;cursor:pointer;opacity:0.6;transition:all 200ms linear;}
	div.modalWindow label.ddMenu:hover::after{opacity:1;}


	div.modalWindow textarea{width:100%;padding:2px 5px;box-sizing:border-box;border:2px solid #2d88c1;background:#051a27;color:white;transition:border-color 200ms linear;font-family:'Roboto';font-size:18px;font-weight:300;min-height:100px;}


div.modalWindow label{position:relative;line-height:32px;font-size:18px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;}
div.modalWindow label i{position:absolute;right:5px;bottom:9px;color:#1acc1a;width:22px;height:22px;font-size:22px;transition:all 200ms linear;opacity:0;}
div.modalWindow label i.icon-close-round{color:#d01313;}
div.modalWindow label.valid i.icon-check-round-full,div.modalWindow label.invalid i.icon-close-round{opacity:1;}
div.modalWindow label.valid input{border:2px solid #0d920d;background:#13440e;}
div.modalWindow label.invalid input{border:2px solid #840c0c;background:#420303;}
/*********/

.hidden{display:none!important;}