/* Google Font Import - "Poppins" */
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,center,dl,dt,dd,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,ol,ul,li{font-family:"Poppins",sans-serif}
html, body{ background-color:var(--body-color);}
body{transition:var(--ease5s)}::selection{background-color:var(--primary-color); color:var(--text-color);}
/* ===== dbsidebar ===== */
.dbsidebar .icon,.dbsidebar li{align-items:center;display:flex}
.dbsidebar .icon,.dbsidebar header .image{border-radius:6px;min-width:60px}
.dbdbhome .text,.dbsidebar li.search-box input,body.dark .dbhome .text,body.dark .dbsidebar header .toggle,body.dark .dbsidebar li a:hover .icon,body.dark .dbsidebar li a:hover .text{color:var(--text-color)}
.dbsidebar{position:fixed;top:0;left:0;height:100%;width:250px;padding:10px 14px; background:var(--dbsidebar-color); transition:var(--ease5s);z-index:100}
.dbsidebar.closedbmenu{width:88px}
.mode .sun-moon i.sun,.dbsidebar.closedbmenu .text,body.dark .mode .sun-moon i.moon{opacity:0}
.dbsidebar header{position:relative}
.dbsidebar header .image-text{display:flex;align-items:center}
.dbsidebar header .logo-text{display:flex;flex-direction:column}
header .image-text .name{margin-top:2px;font-size:18px;font-weight:600}
header .image-text .profession{font-size:16px;margin-top:-2px;display:block}
.dbsidebar header .image{display:flex;align-items:center;justify-content:center}
.dbsidebar header .image img{width:40px; border-radius:6px; border:1px solid}
.dbsidebar header .toggle{position:absolute;top:50%;right:-25px;transform:translateY(-50%) rotate(180deg);height:25px;width:25px; background-color:var(--primary-color);color:var(--dbsidebar-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;transition:var(--ease5s)}
.dbsidebar .menu-bar .mode,.dbsidebar li.search-box,.dbsidebar li.search-box input{background-color:var(--primary-color-light); transition:var(--ease5s)}
.dbsidebar.closedbmenu .toggle{transform:translateY(-50%) rotate(0)}
.dbsidebar .menu{margin-top:40px}
/* ===== Search & Search Results ===== */
.dbsidebar li.search-box{border-radius:6px;cursor:pointer}
.dbsidebar li.search-box input{height:100%;width:100%;outline:0;border:none;border-radius:6px;font-size:17px;font-weight:500}
.dbsidebar #searchresults{width:89%; background-color:var(--primary-color-light); z-index:10; position:absolute; padding:0px 10% 0px 10%; transition:var(--ease3s)}
.dbsidebar #searchresults li a, .dbsidebar #searchresults li a:hover{background:none !important; font-size:17px; font-weight:400; color:var(--text-color);}
.dbsidebar #searchresults li a:hover{font-weight:900;}
/* ===== Navigation Styles ===== */
.dbsidebar li, .dbsidebar ul ul li{height:50px;list-style:none;margin-top:5px}
.dbsidebar li a, .dbsidebar ul ul li a{list-style:none;background-color:transparent;display:flex;align-items:center;height:100%;width:100%;border-radius:6px;text-decoration:none;transition:var(--ease3s)}
.dbsidebar li a:hover .icon, .dbsidebar li a:hover .text, .dbsidebar li.active .text, .dbsidebar li.active .icon{color:var(--dbsidebar-color)}
.dbsidebar li a:hover, .dbsidebar li.active, .dbsidebar li.dbactivelink{background-color:var(--primary-color); border-radius:6px; cursor:pointer}
.dbsidebar .icon{height:100%;justify-content:center;font-size:20px}
.dbsidebar .icon, .dbsidebar .text{color:var(--text-color); transition:var(--ease3s)}
.dbsidebar .text{font-size:17px;font-weight:500;white-space:nowrap;opacity:1}
/* ===== Sub Navigation Styles ===== */
.dbsidebar ul ul .text{font-size:14px;}
.dbsidebar ul ul li a:hover, .dbsidebar li.dbactivelink{background-color:var(--primary-color-light); border-radius:6px; cursor:pointer}
.dbsidebar ul ul li a:hover .icon, .dbsidebar ul ul li a:hover .text, .dbactivelink{color:var(--text-color)}
.dbsidebar ul ul{height:100%;}
.dbsidebar ul ul li{height:34px;}
.dbsidebar ul ul li a{width:100%;}
.dbsidebar .menu-bar{height:calc(100% - 55px);display:flex;flex-direction:column;justify-content:space-between;overflow-y:scroll}
.menu-bar::-webkit-scrollbar{display:none}
.dbsidebar .menu-bar .mode{border-radius:6px;position:relative}
.menu-bar .mode .sun-moon{height:50px;width:60px}
.mode .sun-moon i{position:absolute}
body.dark .mode .sun-moon i.sun{opacity:1}
.menu-bar .bottom-content .toggle-switch{position:absolute;right:0;height:100%;min-width:60px;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer}
.toggle-switch .switch{position:relative;height:22px;width:40px;border-radius:25px;background-color:var(--toggle-color);transition:var(--ease5s)}
.switch::before{content:'';position:absolute;height:15px;width:15px;border-radius:50%;top:50%;left:5px; transform:translateY(-50%);background-color:var(--dbsidebar-color);transition:var(--ease4s)}
body.dark .switch::before{left:20px}
.dbhome{position:absolute;top:0; left:250px; height:100vh; width:calc(100% - 250px);background-color:var(--body-color);transition:var(--ease5s)}
.dbhome .text{font-size:30px; font-weight:500; padding:12px 60px}
#subnavdiv{background-color:var(----subnav-color); transition:var(--ease5s); height:0px;}
#subnavdiv{width:95%; margin-left:3%; overflow-y:scroll; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--toggle-color)}
#subnavdiv::-webkit-scrollbar{width:5px}
#subnavdiv::-webkit-scrollbar-track{background:var(--toggle-color)}
#subnavdiv::-webkit-scrollbar-thumb{height:15px; background-color:var(--text-color); border-radius:2px; border:0px solid var(--toggle-color)}
.open{margin-top:5px; padding:5px 0px 0px 0px;}
/**********************************************************************************/
.displayflex{display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center; flex-basis:auto; align-self:auto; flex-shrink:1; width:100%;}
.floatcenter{position:relative; margin:0px auto; float:center; width:98%;}
.works-row, .innerrowright{float:left; width:100%; padding:5px 0 5px 0px;}
.works-rowleft, .works-rowright, .innerrowright, .innerrowright-left, .innerrowright-right{display:inline-block; min-height:44px; text-align:left; color:var(--text-color);}
.whitedivwrapper-left, .whitedivwrapper-right{float:left; width:100%; padding:40px 60px 40px 60px; background:var(--dbsidebar-color);transition:var(--ease5s);}
.whitedivwrapper-left, .whitedivwrapper-right{width:100%; border:1px solid #e0e0e0;}
.whitedivwrapper-left, .whitedivwrapper-right, .whitedivwrapper-panel{width:49.5%;}
.whitedivwrapper-right{float:right;}
.subscriber{display:none; float:left; width:145px; height:165px; border:1px solid #111; margin:4px; padding:10px; text-align:center; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background:var(--dbsidebar-color);transition:var(--ease5s);}
.smalllogo{height:50px; width:100%; line-height: 60px; }
.smalllogo img{max-height:100%; max-width:100%; vertical-align: middle; }
.companylogo{text-align:center;}
.companylogodiv{width:60%; float:center;}
.companylogodiv img{width:20%; float:center;}
.works-rowleft, .works-rowright, .searchfield-rowleft, .works-rowleft p, .works-rowleft span{width:30%; line-height:50px; font-size:.8vw; font-weight:600;}
#searchstring:focus, #searchstring:active{box-shadow:none;}
.works-rowleft img, .searchfield-rowleft img{ vertical-align: middle; margin:0px 2px 2px 0px; cursor:pointer;}
.works-rowright, .searchfield-rowright{width:69%;}
.innerrowright{font-size:12px; padding:0px;}
.innerrowright-left{width:70%;}
.innerrowright-right{width:30%; text-align: right;}
.searchfield-rowleftdates{width:25%;}
.searchfield-rowrightdates{width:57%;}
.textarea{height:70px;}
/* ===== Alignment Styles ===== */
.floatleft{float:left;}
.floatright{float:right;}
/* ===== Spacing Styles ===== */
.clear, .clearsmall, .clearmedium, .clearlarge, .clearxlarge, .cleartiny{clear:both; width:100%;}
.clear{height:1px;}
.cleartiny{height:10px;}
.clearsmall{height:20px;}
.clearmedium{height:40px;}
.clearlarge{height:60px;}
.clearxlarge{height:110px;}
/* ===== Width  Styles ===== */
.width45vw{width:45vw}
.width48vw{width:48vw}
.width50vw{width:50vw}
.width60vw{width:60vw}
.width70vw{width:70vw}
.width80vw{width:80vw}
.width85vw{width:85vw}
.width90vw{width:90vw}
.width70pc{width:70%;}
.fullwidth{width:100% !important;}
.fullheight{height:100%}
/* ===== Padding Styles ===== */
.padding40{padding:40px;}
.paddingpercent2{padding:2%;}
/* ===== General Styles ===== */
.rounded{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
.rounded10{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
.fullyrounded{-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
.roundedleftside{-moz-border-radius:10px 0px 0px 10px; -webkit-border-radius:10px 0px 0px 10px; border-radius:10px 0px 0px 10px;}
.roundedrightside{-moz-border-radius:0px 10px 10px 0px; -webkit-border-radius:0px 10px 10px 0px; border-radius:0px 10px 10px 0px;}
.shadow{box-shadow: 0px 10px 20px -5px rgba(1, 6, 18, 0.35);}
.show{visibility:visible; height:initial; width:initial;}
.hide{display:none; visibility:hidden; }
.cursor{cursor:pointer}
/* ===== Display Styles ===== */
.mobileview{display:none; visibility:hidden; visibility:collapse; height:0px; width:0px;}
.desktopview{visibility:visible; height:initial; width:initial;}
.displayblock{display:block;}
.displayinlineblock{display:inline-block;}
.positionabsolute{position:absolute;}
/* ===== Background Styles ===== */
.primarycolorbg{background-color:var(--primary-color);}
.primarycolorlightbg{background-color:var(--primary-color-light);}
.whitebg{background-color:#fff;}
.blackbg{background-color:#111;}
.greybg{background-color:#ccc;}
.redbg{background-color:var(--generic-red);}
.greenbg{background-color:var(--generic-green);}
/* ===== Border Styles ===== */
.blackborder{border:1px solid #111;}
.greyborder{border:1px solid #ccc;}
.lightgreyborder{border:1px solid #f7f7f7;}
.whiteborder{border:1px solid #fff;}
/* ===== Popup Styles ===== */
.notify{display:none; position:fixed; top:30%; right:1%; left:1%; background: #fff; padding: 20px; max-width: 400px; margin: 0 auto;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 20px; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 20px 4px; z-index:9999;}
.notify h1 {margin-bottom:5px; padding:.1em 0; color: #444; text-align: center; letter-spacing:-0.05em; position: relative; overflow: hidden; white-space: nowrap;}
.notify h1:before, .notify h1:after {content: ""; position: relative; display: inline-block; width:50%; height:1px; vertical-align: middle; background: #f0f0f0; overflow:hidden;}
.notify h1:before{left: -.5em; margin: 0 0 0 -50%;}
.notify h1:after {left: .5em; margin: 0 -50% 0 0;}
.notify h1 > span{display: inline-block; vertical-align: middle; white-space: normal;}
.notify p{font-size:14px; text-align:center;}
.errorbox h1 { color: #6f423b; }
.errorbox h1:before, .errorbox h1:after { background: #d6b8b7; }
.notify .alerticon{text-align:center; margin-bottom: 20px;}
.alerticon{display:block;}
.popupbox, #companyselector{position:fixed; top:25%; right:35%; left:35%;  float:center; z-index:1200; background:#fff; border:1px solid #666; display:none; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 50px;}
#infodiv{width:90%; padding:15px 5% 15px 5%; display:none;}
#infodiv img, #infodiv p{vertical-align: middle; display:inline;}
/* ===== Platform Users ===== */
.userscontainer{display:block; float:center; margin:0px auto; width:500px; padding:25px; border:1px solid #ccc;}
.userleft, .userright{display:inline-block; width:49%;}
.userleft{text-align:left;}
.userright{text-align:right;}
.userright img{float:right; display:inline; margin-left:15px; cursor:pointer;}
.usereven, .userodd{padding:20px;}
.usereven{background:#e0e0e0;}
.userodd{background:#f1f1f1;}
.userdiv{height:100px;}
.userdiv img{height:100%; padding:5px;  aspect-ratio:calc(1/1);}
/* ===== Cookie Styles ===== */
#cookiediv, #footer{width:96%; padding:20px 2% 20px 2%; position:fixed; z-index:999}
#cookiediv{height:100%; opacity:0.9; width:100%; padding:0px; top:0px; background-color:rgba(0, 0, 0, 1.0); }
#footer{background-color:#000;}
#innercookiediv{width:240px; margin:0px auto; float:center; border:1px solid #666; padding:20px; margin-top:12%;}
#cookiediv-left, #cookiediv-right{float:left; width:90%;}
#cookiediv-right{float:right; width:10%; text-align: center;}
#cookieformattingdiv{display:none;}
#verticaldiv-img{position:absolute; top:35%; left:45%; width:150px; display:none; z-index:999999;}
#verticaldiv-img img{width:100%;}
/* ===== Login Page Styles ===== */
#loginwrapperdiv{width:45vw; height:50vh; border:1px solid #999;}
#loginleft, #loginright, #innerloginright{position:relative; float:left; width:100%; height:100%; width:50%; flex-wrap:wrap; flex-direction:column; overflow: hidden;}
#innerloginright{float:unset; float:center; margin:0px auto; width:70%;}
.loginpagelogo{width:30%;}
#passwordviewer{position:absolute; width:16px; height:16px; margin:-30px 0% 0% 90%; z-index:10;}
.buttonanimation{position: relative; display:inline-block; overflow: hidden;}
.buttonanimation span { position: absolute; display: block;}
.buttonanimation span:nth-child(1){ top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--primary-color)); animation: btn-anim1 1s linear infinite; }
@keyframes btn-anim1 { 0% { left: -100%; } 50%,100% { left: 100%; } }
.buttonanimation span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, var(--primary-color)); animation: btn-anim2 1s linear infinite; animation-delay: .25s }
@keyframes btn-anim2 { 0% { top: -100%; } 50%,100% { top: 100%; } }
.buttonanimation span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, var(--primary-color)); animation: btn-anim3 1s linear infinite; animation-delay: .5s }
@keyframes btn-anim3 { 0% { right: -100%; } 50%,100% { right: 100%; } }
.buttonanimation span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, var(--primary-color)); animation: btn-anim4 1s linear infinite; animation-delay: .75s }
@keyframes btn-anim4 { 0% { bottom: -100%; } 50%,100% { bottom: 100%; }}
/* ===== Transitions ===== */
.delay1s{transition-delay:var(--delay1s);}
.delay2s{transition-delay:var(--delay2s);}
.delay3s{transition-delay:var(--delay3s);}
.delay4s{transition-delay:var(--delay4s);}
.transition1{transition:var(--transition1); -webkit-transition:var(--transition1); -moz-transition:var(--transition1); -o-transition:var(--transition1);}
.translatexshow{transform:var(--translatexshow); -webkit-transform:var(--translatexshow); -moz-transform:var(--translatexshow); -o-transform:var(--translatexshow);}
.translatexhideleft{transform:var(--translatexhideleft); -webkit-transform:var(--translatexhideleft); -moz-transform:var(--translatexhideleft); -o-transform:var(--translatexhideleft);}
.translatexhideright{transform:var(--translatexhideright); -webkit-transform:var(--translatexhideright); -moz-transform:var(--translatexhideright); -o-transform:var(--translatexhideright);}
.preload{transition:all 0s linear; -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; }