/* CSS Reboot - A minimal reset for consistent styling across browsers */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* Set base styles for HTML5 elements */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/* Body defaults */ body { line-height: 1; font-family: Arial, sans-serif; color: #333; background-color: #fff; }
/* List styles */ ol, ul { list-style: none; }
/* Table styles */ table { border-collapse: collapse; border-spacing: 0; }
/* Anchor tag reset */ a { text-decoration: none; color: inherit; }
/* Image reset */ img { max-width: 100%; height: auto; display: block; }


body, html { width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; font-family: Arial, sans-serif; }
span{vertical-align: middle;}

.d-inlineblock { display: inline-block; vertical-align: middle; }
.d-none { display: none !important; }

.bar-space{ width: 1px; margin: 0px 10px; display: inline-block;}
.bar-space.border{ border-left: 1px solid rgba(255,255,255,0.3); height: 20px;}


/* stop text wraping in btn*/

.btn { white-space: nowrap; user-select: none; display: inline-block; vertical-align: middle; padding: 10px; border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; margin-left: 5px; }
.btn:hover { background-color: rgba(255,255,255,0.4); cursor: pointer;}
.btn span { font-size: 16px; white-space: nowrap; }
.btn .text { display: none; }

.btn-primary { background-color: #662d91; color: #fff; border: none; }
.btn-primary:hover { background-color: #592383; }
.btn-light { background-color: #f0f0f0; color: #333; border: none; }
.btn-light:hover { background-color: #e0e0e0; }
.btn-danger { background-color: #e20d0d; color: #fff; border: none; }
.btn-danger:hover { background-color: #c70b0b; }



.btn-transparent {  background-color:transparent; border: none;}

.btn-icon { display: inline-block; user-select: none; vertical-align: middle; padding:8px; display: inline-block; border: 1px solid rgba(255,255,255,0.2); border-radius:5px; margin-left: 5px;}
.btn-icon span{ font-size: 20px; }
.btn-icon:hover { background-color: rgba(255,255,255,0.4); cursor: pointer; }

.btn-object{ user-select: none; width:50px; height:40px; border-radius:8px; margin-bottom: 8px; font-size:24px;  justify-items: center; color:#777; background-color: #fafafa; padding: 6px; }
.btn-object .icon{ display: block; font-size: 24px; text-align: center; }
.btn-object .text{ display: block; font-size: 10px; margin-top: 4px; text-align: center; }

.btn-object:hover{ background-color: #eeeeee; }

/*Layout*/
.app{ width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box;  }

.topbar{ height:54px; background-color:#662d91; color:#fff; display:flex; align-items:center; box-sizing: border-box;  padding: 0px; }
.leftarea{ flex: 1; display: flex; align-items: center; padding: 0 15px; box-sizing: border-box; }
.centerarea { flex: 1; display: flex; align-items: center; padding: 0 15px; box-sizing: border-box; justify-content: center; }
.rightarea { flex: 1; display: flex; align-items: center; padding: 0 15px; box-sizing: border-box;  justify-content: flex-end; }
.logo { margin-left: 10px; width:160px; height:40px; display:flex; justify-content:center; align-items:center; color:#662d91; font-weight:bold; font-size:18px; background-image: url(/assets/logo/vedlogical-logo-white.png); background-size: contain; background-repeat: no-repeat; background-position: center; }  
.projectarea { margin-left: 30px; padding-left: 20px;  }
.projectname { font-size: 16px;  }

.footer{ height:5px; background-color:#662d91; color:#fff; display:flex; align-items:center; box-sizing: border-box;  font-size:12px;  }
.footer .leftarea{ justify-content:flex-start; }
.footer .centerarea{ justify-content:center; }
.footer .rightarea{ justify-content:flex-end; }


.canvas-area{ height: 100%; width: 100%; background-color:#fafafa; position: relative; overflow: hidden; }



.canvas-container{  width: 100%; height: 100%;  overflow: scroll;     }
.canvas-wrap { position: relative;  box-sizing: border-box;  width: 1000%;  height: 1000%;  background-color: #e6e2e2;  }

.canvas-page-wrapper{  position: absolute; top:50%; left:50%; padding:20px; overflow: hidden; transform: translateX(-50%) translateY(-50%);  background-color: #ffffff; height: max-content; width: max-content;    box-sizing: border-box;} 

.canvas-page{ background-color: #ffffff; height: max-content; width: max-content;    box-sizing: border-box;} 
.canvas-page .canvas-header{ position: absolute; top:0px; left:0px;height:100px; width:100%; padding: 20px 22px 0px 20px; background-color: #ffffff; box-sizing: border-box; display: none;}
.canvas-page .canvas-header .wrap{ height: 100%; width: 100%; border: 1px solid #000; border-bottom: 0px;}
.canvas-page .canvas-footer{ position: absolute; bottom:0px; left:0px; height:40px; width:100%; box-sizing: border-box; padding: 0px 22px 20px 20px; display: none;}
.canvas-page .canvas-footer .wrap{ height: 100%; width: 100%; border: 1px solid #000; border-top: 0px; }

.container-center{ position: absolute; width:20px; height:20px; border: 1px solid #333; top:50%; left:50%;  margin-top: -11px; margin-left: -11px; border-radius: 50%; pointer-events: none;  }  

.canvas-page-wrapper.print{  padding:100px 20px 40px 20px;  }
.canvas-page-wrapper.print .canvas-header{ display: block;}
.canvas-page-wrapper.print .canvas-footer{ display: block;}
.canvas-page-wrapper.print  .container-center{  margin-top: 19px;}

.canvas-grid-label{ padding: 30px; background-color: #ffffff; border: 1px solid #000; position: relative; overflow: hidden; height: max-content; width: max-content;    box-sizing: border-box;}
.canvas-grid{ padding: 30px; background-color: #ffffff; border: 1px solid #000; position: relative; overflow: hidden; height: max-content; width: max-content;    box-sizing: border-box;}


.canvas-grid-label .angular-grid-label { position: absolute; top:0px; left:0px; height:100%; width:100%; }
.canvas-grid-label .angular-grid-label .label{ position: absolute;  height:23px; width:50px; transform: translateX(-50%); background-color: #333; font-size: 9px; padding-top: 2px; color: #ccc; text-align: center; border-radius:5px ; pointer-events: none; }
.canvas-grid-label .angular-grid-label .label.top{ top:2px;}


.canvas{ background-color: #fff; box-sizing: border-box;} 

.canvas-center{ position: absolute; width:18px; height:18px; background-color: rgba(0, 0, 0, 0.7); top:50%; left:50%; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none;  }  

/* .plot-grid-x{ position: absolute; background-color: rgb(167, 145, 145); height: 20px; width: 100% ; transform: translateY(-22px) translateX(0px) ; }
.plot-grid-y{ position: absolute; background-color: rgb(141, 121, 121); height:100%; width: 20px; transform: translateX(-22px) translateY(0px); } */

.objectbar{ position: absolute; width:80px;  top:60px; left:10px; background-color:rgba(255, 255, 255, .9); border:1px solid #e6e6ec; box-shadow: 0 4px 12px 0 rgba(20,19,37,.07); border-radius:12px ; display:flex; flex-direction:column; align-items:center; box-sizing: border-box; padding-top:8px; }
.propertybar{  position: absolute; width:250px; top:60px; left:100px; background-color:rgba(255, 255, 255, .9);  box-shadow: 0 4px 12px 0 rgba(20,19,37,.07); border-radius:12px ; display:flex; flex-direction:column; align-items:center; box-sizing: border-box;  }    



.form-wrapper{ padding: 15px; display: none; }
.form-wrapper.active{display: block;}
.form-wrapper .btn-close-form{ position: absolute; top:10px; right:10px; font-size:20px; cursor: pointer; color:#777; }
.form-wrapper .btn-close-form:hover{ color:#333; }
.form-header{ margin-bottom: 15px; }
.form-header .title{ font-size:18px; font-weight:bold;  }
.form-header .desc{ font-size:12px; font-weight:lighter; margin-top: 3px;  }
.form-actions{ margin-top: 10px;  }

.form-alert{ font-size: 12px; margin-bottom: 8px; text-align: center; border-left: #777 3px solid; padding: 8px;}
.form-alert:empty { display: none; }

.form-alert.error{ color: #e20d0d; border-color: #e20d0d; background-color: #faf0f0; }
.form-alert.success{ color: #09e22d; border-color: #09e22d; background-color: #effcf1; }
.form-alert.info{ color: #662d91; border-color: #592383; background-color: #eff7fc; }


.input-group{ padding-bottom: 8px;  }
.input-group label{ font-size:12px; margin-bottom:3px; display: inline-block; }
.input-group label:first-child{ display:block; }
.input-group input[type="text"], .input-group input[type="number"], .input-group select{ padding:5px 8px; font-size:14px; border:1px solid #ccc; border-radius:5px; width: 100%; box-sizing: border-box; }
.input-group input[type="text"]:focus, .input-group input[type="number"]:focus, .input-group select:focus{ outline:none; border-color:#662d91; box-shadow: 0 0 5px rgba(9,134,226,0.5); }

.input-group input[type="file"]{  border:1px solid #ccc; border-radius:5px; width: 100%; box-sizing: border-box;  padding: 5px; }
.input-group .input-desc{ font-size:10px; color:#777; margin-top:5px; }


.input-group input[type="checkbox"]{ width: 20px; height: 20px;  vertical-align: middle; margin-top: -1px; }
.input-group input[type="checkbox"]+label { line-height: 20px; vertical-align: middle;}

.input-group-two   .input-group{  display: inline-block; width: 50%; margin-right:-3px; }
.input-group-three .input-group{  display: inline-block; width: 33%; margin-right:-3px; }

.input-group-label{ font-size:14px; font-weight:bold; margin-top:8px; margin-bottom: 8px; display: block; border-bottom: 1px solid #f5f5f5; line-height: 2px; text-shadow: 0px 2px 2px white;; }

.input-btn-group{ text-align: right; }
.input-btn-group .btn{ display: inline-block;}

/* Scrollbar Styling */
/*  
.canvas-container::-webkit-scrollbar { width: 12px; height: 12px; }
.canvas-container::-webkit-scrollbar-track { background: #f1f1f1; }
.canvas-container::-webkit-scrollbar-thumb { background: #888; border-radius: 6px; }
.canvas-container::-webkit-scrollbar-thumb:hover { background: #555; }   
*/



/* Responsive Adjustments */




.plot{ background-color: rgb(221, 250, 221); position: relative; user-select: none; }

.building{ background-color: rgba(236, 236, 236, 0.9); position: relative; user-select: none;}
.building.selected{ outline: 1px dashed #662d91; cursor: move; }
.building.selected > .resize-handle{ width: 10px; height: 10px; background-color: #662d91; position: absolute; right: -5px; bottom: -5px; cursor: se-resize; border-radius: 2px; } 
.building.selected > .resize-handle:hover{ background-color: #592383;  }

.building .info-label{ position: absolute; text-align: center; top:50%; left: 50%; margin-top: -10px; transform: translateX(-50%); font-size: 10px; white-space: nowrap; }
.building .rooms{ position: absolute; height: 100%; width: 100%;}

.room{ background-color: rgba(255, 255, 255, 1); position:absolute; user-select: none; border:0px solid #333; box-sizing: content-box;  }
.room.selected{ outline: 1px dashed #662d91; cursor: move; background-color: rgb(207, 238, 250); }
.room.selected > .resize-handle{ width: 10px; height: 10px; background-color: #662d91; position: absolute; right: -5px; bottom: -5px; cursor: se-resize; border-radius: 2px; } 
.room.selected > .resize-handle:hover{ background-color: #662d91;  }


.for-add, .for-edit{ display: none !important; }

.form-add  .for-add{display: inline-block !important;}
.form-add  .for-add{display: inline-block !important;}
.form-edit .for-edit{display: inline-block !important;}

.opening{ position: absolute; background-color: rgb(241, 239, 239);  box-sizing: border-box; z-index:999; }
.opening.selected{ outline: 1px dashed #662d91; cursor: pointer; }


.angular-grid { position: absolute; top: 50%; left: 50%; height: 5px; width: 5px; margin-top: -2px; margin-left: -2px; background-color: rgb(255, 38, 0); border-radius: 10px; user-select: none; pointer-events: none; }
.angular-grid .line{ position: absolute;  pointer-events: none; left: 50%; top: 50%; margin-left: -1px;   transform-origin: 50% 100%; margin-top: -200vw; height: 200vw; width: 1px; border-left: 1px dashed rgba(0, 0, 0, 0.5); }

.angular-grid .line.direction-line{ border-left: 1px solid rgba(0, 0, 0, 0.1);   }
.angular-grid .line.zone-line{ border-left: 1px dashed rgba(0, 0, 0, 0.5); }


.angular-grid .line.direction-line.blue{ border-color: blue; }
.angular-grid .line.direction-line.green{ border-color: green; }
.angular-grid .line.direction-line.red{ border-color: red; }
.angular-grid .line.direction-line.yellow{ border-color: yellow; }
.angular-grid .line.direction-line.gray{ border-color: gray; }



.angular-grid-label{ user-select: none;  pointer-events: none;}


.canvas-grid-label .ref-grid{ position: absolute; top:50%; left:50%; height:1px; width:1px; user-select: none;  pointer-events: none; }

.canvas-grid-label .ref-grid .line-v{ position: absolute;  pointer-events: none; left: 50%; top: 50%; margin-left: -1px;  margin-top: -100vw; height: 200vw; width: 1px; border-left: 1px dashed rgba(0, 0, 0, 0.2); }
.canvas-grid-label .ref-grid .line-v.main{ border-left: 1px dashed rgba(0, 0, 0, 0.2); }
.canvas-grid-label .ref-grid .line-v.sub{ border-left: 1px dotted rgba(0, 0, 0, 0.1); }

.canvas-grid-label .ref-grid .line-h{ position: absolute;  pointer-events: none; left: 50%; top: 50%; margin-left: -100vw;  margin-top: -1px; height: 1px; width: 200vw; border-top: 1px dashed rgba(0, 0, 0, 0.2); }
.canvas-grid-label .ref-grid .line-h.main{ border-top: 1px dashed rgba(0, 0, 0, 0.2); }
.canvas-grid-label .ref-grid .line-h.sub{ border-top: 1px dotted rgba(0, 0, 0, 0.1); }



.toast-area{ position: absolute; top: 20px; right: 20px; width: 300px; z-index: 1000;  }
.toast{  border-left:3px solid #222; background-color: rgba(235, 235, 235, 0.8);  padding:10px 15px; border-radius:0px 5px 5px 0px; margin-bottom:10px; box-shadow: 0 4px 12px 0 rgba(20,19,37,.07); font-size:14px; opacity: 0; 
    transform: translateY(-20px); animation: toast-show 0.5s forwards, toast-hide 0.5s 2.5s forwards; }

.toast.information{ border-color: #662d91; color: #662d91; }
.toast.success{ border-color: #09e22d; color: #09e22d; }
.toast.error{ border-color: #e20d0d; color: #e20d0d; }

@keyframes toast-show { to { opacity: 1; transform: translateY(0); } }
@keyframes toast-hide { to { opacity: 0; transform: translateY(-20px); } }



.toolbar{ display: none; position: absolute; bottom: 20px; right:20px; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 12px 0 rgba(20,19,37,.07); 
    border-radius:50% ;  height: 150px; width: 150px; overflow: hidden;  }

.toolbar .outerbtn{ transform: rotate(0deg); transform-origin: right bottom; user-select: none; height: 50%; width: 50%; position: absolute; top: 0%; left: 0%;  background-color: #ffffff; padding: 30px 0px 0px 30px; box-sizing: border-box;  }
.toolbar .outerbtn span{transform: rotate(45deg); font-size: 30px;}
.toolbar .outerbtn:hover { background-color: #f7f7f7;}


.toolbar .outerbtn.left{ transform: rotate(-45deg); }
.toolbar .outerbtn.top{ transform: rotate(45deg); }
.toolbar .outerbtn.right{ transform: rotate(135deg); }
.toolbar .outerbtn.bottom{ transform: rotate(225deg); }


.toolbar .center{ height: 60px; width: 60px; position: absolute; top: 45px; left: 45px; font-size: 30px; background-color: rgb(241, 241, 241); border-radius: 50%; box-sizing: border-box; padding: 10px; }
.toolbar .center span{ font-size: 40px;}



.modalarea{ height: 100%; width: 100%;  position: fixed; top: 0px; left:0px; user-select: none; pointer-events: none;}
.modalwrapper{height: 100%; width: 100%;  position: fixed; top: 0px; left:0px; background-color: rgba(0, 0, 0, 0.5);}
.modalcon{ height: 90%; width: 90%; position: absolute; top:5%; left: 5%; background-color: white;  border-radius: 10px;}
.modalcon .modalclose{ height: 30px; width:30px; position: absolute; top:-15px; right:-15px; background-color: white;  line-height: 30px; text-align: center; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); border-radius: 15px;}
.modal{height: 100%; width: 100%; }