@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');
* {box-sizing:border-box;}
.lexendFont {font-family: "Lexend", sans-serif;}
body {background: #fff; margin:0;}
ul {list-style:none;}
select, input, textarea, button {outline: none !important;}
textarea {overflow: hidden; resize: vertical;}
a {text-decoration:none; cursor: pointer;}
.scroll::-webkit-scrollbar {width: 0; height: 0;}
.scroll::-webkit-scrollbar-track {background: #e5e5e5;}
.scroll::-webkit-scrollbar-thumb {background: #333;}
.scroll::-webkit-scrollbar-thumb:hover {background: #333;}
.dbLeft:hover {width:380px;}
.dbLeft:hover .dbMenu li a .text {display: block;}
.dbLeft:hover .dbMenu > li {overflow: visible;}
.dbLogo .over {display: none;}
.dbLeft:hover .dbLogo .over {display: block;}
.dbLeft:hover .dbLogo .front {display: none;}
.dbMenu > li {width: 100%; overflow: hidden;}
.dbMenu > li > a {height: 50px; padding: 0 30px; color: #fff; font-size: 20px; width: 380px;}
.dbMenu > li > a:hover {background: #fff; color: var(--primarColor);}
.dbMenu > li > a.active {background: #fff; color: var(--primarColor);}
.dbMenu li a .text {display: none; white-space: nowrap;}
.dbMenu li a .icon img.over {display: none;}
.dbMenu li a:hover .icon img.over {display: block;}
.dbMenu li a:hover .icon img.front {display: none;}
.dbMenu li a.active .icon img.over {display: block;}
.dbMenu li a.active .icon img.front {display: none;}
.dbMenu li.user a {padding: 0 26px; font-size: 16px;}
.dbMenu li.user a .text span {font-size: 14px; font-weight: 200;}
.calendar .group li {width: 14.28%;}
.calendar .group li.status-green span {display: block; background: #84A66D;}
.calendar .group li.status-blue span {display: block; background: #3D89BC;}
.calendar .group li.status-orange span {display: block; background: #DB7960;}
.calendar .group li.status-yellow span {display: block; background: #FDC185;}
.calendar .group li.today {color: #fff;}
.calendar .group li.today:before {content: ''; width: 24px; height: 24px; background: #003B71; position: absolute; left: 50%; top: 10px; z-index: -1; margin-left: -12px;}

.navTab:before, .navTab:after {content: ''; width: 30px; height: 30px; background: #B1C9E8; position: absolute; top: 0; }
.navTab:before {left: 4px; transform: skew(160deg, 0deg);}
.navTab:after {right: 4px; transform: skew(-160deg, 0deg);}
.navTab.active:before, .navTab.active:after {background:#003B71;}

.dbRight .left.sinlge {max-width: 1400px;}


#db_htm_details_flyout { position: fixed; right: -1200px; top: 70px; width: 980px; height: 600px; overflow-y:scroll;
                               background: #ffffff; opacity: 0; transition: opacity 0.3s linear 0s, right 0.3s linear 0s;
                               cursor: default; border:solid 3px #ccc; border-radius:5px; z-index:999999; padding:20px; }

#ticket_stats_box { float:left; width:960px; padding:10px; margin:10px 0 20px 0px; }

#process_msg { float:right;width:380px;text-align:right;margin:30px 0 0 0;display:none; }
#footer_content { float:left; width:952px; height:40px; text-align:left; padding:20px 20px 0 20px; margin:20px 0 0 0px; background-color:#EFE8E2; border:solid 4px #45707B; border-radius:10px; }

/* #manage_dvm_hr_certs_content_new { width:1055px; float:left; cursor: default; background-color:#ffffff;border:solid 1px #ccc; border-radius:5px; min-height:740px;padding:20px; } */

.ticket_status_tooltip { position:relative;}
.ticket_status_tooltip:hover .ticket_status_tooltip_text { visibility: visible; }

.role_out {background-color:#bbbbbb;}
.fill_dvm {background-color:#ffc000;}
.fill_aca {background-color:#bf8f00; color:white;}
.fill_grm {background-color:#b4c6e7;}
.fill_tech {background-color:#92d050; color:white;}
.fill_css {background-color:#b188d0; color:white;}       
.fill_mgr {background-color:#00b0f0;}         
.fill_hos {background-color:#6ca400;}

@media(max-width:767px) {
    .dbLeft:hover {width:100%;}
    .dbLogo {height: auto !important; margin: 0 !important;}
    .dbLogo .front {display: none;}
    .dbLogo .over {display: block; width: 130px;}    
    .showMobMenu i {width: 32px; height: 3px; border: none; padding: 0; display: block; border-radius: 6px; background: #fff; margin-bottom: 7px; transition: ease-in-out .4s;}
    .showMobMenu.active {margin-top: -3px;}
    .showMobMenu.active i:nth-child(3) {display: none;}
    .showMobMenu.active i:nth-child(1) {transform: rotate(45deg); background: #fff;}
    .showMobMenu.active i:nth-child(2) {transform: rotate(-45deg); margin: -10px auto 0 auto; background: #fff;}    
    .dbMenuBox.active {left: 0;}
    .dbMenu > li {overflow: visible;}
    .dbMenu > li > a {padding: 0 20px; font-size: 17px; width: 100%;}
    .dbMenu li a .text {display: block; white-space: nowrap;}
    .dbMenu li.user a {padding: 0 16px;}
}