#ppAuthentication,#showUpdateProject,#showUpdateRole11, #showForgotPwd, #showDefaultProject, #dvShowLoginRoles , #showUpdateSubProcess, #showDefaultSubProcess,#showUpdateSkill,#showUpdateSkillMapping,#PassUpdate,
#showUpdateScript,#showDefaultScript,#showUpdateQueue,#showUpdateQueueMapping,#showUpdateRole,#showUpdateRoleTicket,#MailshowUpdateRole,#showMailHistory, #showChangePassword, #showUpdateProject, #showEmployee,#showSessionExpire, #showReportMaster, #showReportMasterDetail, #showReportUI, #showReportUIDetail, #showUpdateRole1,#showReplyComments,#ShowMsg,#ShowMsgDOC,#ShowMsgAudio,#ShowMsgTwitter,#ShowMsgAudioTwitter,#dvTicketDetails,#dvShowEmailDetails
{ display: block; position: fixed; width: 100%; top: 0; left: 0; height: 100%; z-index: 500; overflow: hidden; -moz-box-shadow: -18px 0 30px -12px #000; -webkit-box-shadow: -18px 0 30px -12px #000; box-shadow: -18px 0 30px -12px #000; background: rgba(18,19,18,0.97); background: rgb(18, 19, 18)\9; filter:alpha(opacity=97)\9; }
#showUsers{ display: block; position: fixed; width: 100%; top: 0; left: 0; height: 100%; z-index: 500; overflow: hidden; -moz-box-shadow: -18px 0 30px -12px #000; -webkit-box-shadow: -18px 0 30px -12px #000; box-shadow: -18px 0 30px -12px #000; background: rgba(18,19,18,0.97); background: rgb(18, 19, 18)\9; filter:alpha(opacity=97)\9; }

.popup1 { width: 850px; height: 500px; overflow: hidden; background: #e8e8e8; margin: 4% auto; }
.popup1 .popbox1 { width: 850px; background: #fff; float: left; }
.popup1 .popbox1 .pophead { width: 100%; background: #324567; padding: 15px; float: left; }
.popup1 .popbox1 .pophead h2 { width: auto; font-size: 15px; font-weight: 600; color: #fff; float: left; margin: 0; padding: 0; }
.popup1 .popbox1 .pophead .close { float: right; margin: 6px 0; }
.popup1 .popbox1 .pophead .close a { color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; line-height: 1px; }
.popup1 .popbox1 .pophead .close a:hover { opacity: .5; filter:alpha(opacity=50); /* For IE8 and earlier */}
.popup1 .popbox1 .contentBox { width: 820px; height: 420px; margin: 15px; float: left; }

.popup2 { width: 850px; height: auto; /*overflow: hidden;*/ background: #e8e8e8; margin: 5% auto;  }
.popup2 .popbox2 { width: 850px; background: #fff; float: left; }
.popup2 .popbox2 .pophead { width: 100%; background: #466bad; padding: 15px; float: left; position: relative; }
.popup2 .popbox2 .pophead h2 { width: auto; font-size: 15px; font-weight: 600; color: #fff; float: left; margin: 0; padding: 0; }
.popup2 .popbox2 .pophead .close { float: right; }
.popup2 .popbox2 .pophead .close a { color: #fff; font-size: 20px; font-weight: bold; text-decoration: none; line-height: 1px; }
.popup2 .popbox2 .pophead .close a:hover { opacity: .5; filter: alpha(opacity=50); /* For IE8 and earlier */}
.popup2 .popbox2 .contentBox { width: 820px; margin: 15px; float: left; } 


.popup3 { width: 850px; height: auto; /*overflow: hidden;*/ background: #e8e8e8; margin: 5% auto; }
.popup3 .popbox3 { width: 850px; background: #fff; float: left; }
.popup3 .popbox3 .pophead { width: 100%; background: #324567; padding: 15px; float: left; }
.popup3 .popbox3 .pophead h2 { width: auto; font-size: 15px; font-weight: 600; color: #fff; float: left; margin: 0; padding: 0; }
.popup3 .popbox3 .pophead .close { float: right; }
.popup3 .popbox3 .pophead .close a { color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; line-height: 1px; }
.popup3 .popbox3 .pophead .close a:hover { opacity: .5; filter:alpha(opacity=50); /* For IE8 and earlier */}
.popup3 .popbox3 .contentBox { width: 820px; margin: 15px; float: left; } 

.popup4 { width: 850px; height: auto; /*overflow: hidden;*/ background: #e8e8e8; margin: 10% auto;}
.popup4 .popbox4 { width: 850px; background: #fff; float: left; }
.popup4 .popbox4 .pophead { width: 100%; background: darkgreen; padding: 15px; float: left; }
.popup4 .popbox4 .pophead h2 { width: auto; font-size: 15px; font-weight: 600; color: #fff; float: left; margin: 0; padding: 0; }
.popup4 .popbox4 .pophead .close { float: right; font-size: 14px; font-weight: bold; }
.popup4 .popbox4 .pophead .close a { color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; line-height: 1px; }
.popup4 .popbox4 .pophead .close a:hover { opacity: .5; filter: alpha(opacity=50); /* For IE8 and earlier */}
.popup4 .popbox4 .contentBox { width: 820px; margin: 15px; float: left; } 

.popup5 { width: 400px; height: auto; /*overflow: hidden;*/ background: #e8e8e8; margin: 10% auto; }
.popup5 .popbox5 { width: 400px; background: #fff; float: left; }
.popup5 .popbox5 .pophead { width: 100%; background: #324567; padding: 15px; float: left; }
.popup5 .popbox5 .pophead h2 { width: auto; font-size: 15px; font-weight: 600; color: #fff; float: left; margin: 0; padding: 0; }
.popup5 .popbox5 .pophead .close { float: right; }
.popup5 .popbox5 .pophead .close a { color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; line-height: 1px; line-height: 22px; }
.popup5 .popbox5 .pophead .close a:hover { opacity: .5; filter:alpha(opacity=50); /* For IE8 and earlier */}
.popup5 .popbox5 .contentBox { margin: 15px; float: left; } 

.popup6 { width: 850px; height: auto; /*overflow: hidden;*/ background: #e8e8e8; margin: 1.5% auto; }
.popup6 .popbox6 { width: 850px; background: #fff; float: left; }
.popup6 .popbox6 .pophead { width: 100%; background: #324567; padding: 15px; float: left; }
.popup6 .popbox6 .pophead h2 { width: auto; font-size: 15px; font-weight: normal; color: #fff; float: left; margin: 0; padding: 0; }
.popup6 .popbox6 .pophead .close { float: right; }
.popup6 .popbox6 .pophead .close a { color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; line-height: 1px; }
.popup6 .popbox6 .pophead .close a:hover { opacity: .5; filter:alpha(opacity=50); /* For IE8 and earlier */}
.popup6 .popbox6 .contentBox { width: 820px; margin: 15px; float: left; } 

.popup7 { width: 661px; height: auto; /*overflow: hidden;*/ background: #e8e8e8; margin: 5% auto; }
.popup7 .popbox7 { width: 661px; background: #fff; float: left; }
.popup7 .popbox7 .pophead { width: 100%; background: #324567; padding: 15px; float: left; }
.popup7 .popbox7 .pophead h2 { width: auto; font-size: 15px; font-weight: 600; color: #fff; float: left; margin: 0; padding: 0; }
.popup7 .popbox7 .pophead .close { float: right; }
.popup7 .popbox7 .pophead .close a { color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; line-height: 1px; }
.popup7 .popbox7 .pophead .close a:hover { opacity: .5; filter:alpha(opacity=50); /* For IE8 and earlier */}
.popup7 .popbox7 .contentBox { width: 631px; margin: 15px; float: left; } 

.popup8 { width: 950px; height: auto; /*overflow: hidden;*/ background: #e8e8e8; margin: 5% auto;  }
.popup8 .popbox8 { width: 950px; background: #fff; float: left; }
.popup8 .popbox8 .pophead { width: 100%; background: #324567; padding: 15px; float: left; }
.popup8 .popbox8 .pophead h2 { width: auto; font-size: 15px; font-weight: 600; color: #fff; float: left; margin: 0; padding: 0; }
.popup8 .popbox8 .pophead .close { float: right; }
.popup8 .popbox8 .pophead .close a { color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; line-height: 1px; }
.popup8 .popbox8 .pophead .close a:hover { opacity: .5; filter:alpha(opacity=50); /* For IE8 and earlier */}
.popup8 .popbox8 .contentBox { width: 920px; margin: 15px; float: left; } 

.popup9 { width: 1000px; height: auto; /*overflow: hidden;*/ background: #e8e8e8; margin: 5% auto;  }
.popup9 .popbox9 { width: 1000px; background: #fff; float: left; }
.popup9 .popbox9 .pophead { width: 100%; background: #324567; padding: 15px; float: left; }
.popup9 .popbox9 .pophead h2 { width: auto; font-size: 15px; font-weight: 600; color: #fff; float: left; margin: 0; padding: 0; }
.popup9 .popbox9 .pophead .close { float: right; }
.popup9 .popbox9 .pophead .close a { color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; line-height: 1px; }
.popup9 .popbox9 .pophead .close a:hover { opacity: .5; filter:alpha(opacity=50); /* For IE8 and earlier */}
.popup9 .popbox9 .contentBox { width: 970px; margin: 15px; float: left; } 

.gird8 {  }
.gird8 th { font-size: 11px; font-weight: 600; color: #4e4e4e; padding: 5px; text-align: left; background: #f3f3f3; }
.gird8 td { font-size: 11px; font-weight: normal; color: #383838; padding: 5px; background: #fff; }
.gird8 td a { color: #424242; text-decoration: underline; }
.gird8 td a:hover { text-decoration: none; }

.gird9 {  }
.gird9 th { font-size: 11px; font-weight: 600; color: #4e4e4e; padding: 5px; text-align: left; background: #f3f3f3; white-space: nowrap; }
.gird9 th.darkbox { color: #fff; background: #005695; padding-top: 8px; padding-bottom: 8px; }
.gird9 th.paddleft { padding-left: 26px; }
.gird9 th i,.gird9 th b  { font-size: 15px; line-height: 14px; }
.gird9 td { font-size: 11px; font-weight: normal; color: #383838; padding: 5px; background: #fff; }
.gird9 td i { font-size: 15px; line-height: 14px; }
.gird9 td a { color: #424242; text-decoration: underline; }
.gird9 td a:hover { text-decoration: none; }

.gird10 { border: 1px solid #dedede; }
.gird10 th { font-size: 11px; font-weight: 600; color: #4e4e4e; padding: 5px; text-align: left; background: #f3f3f3; white-space: nowrap; border-color: #dedede; }
.gird10 td { font-size: 11px; font-weight: normal; color: #383838; padding: 5px; border-color: #dedede; }
.gird10 td i { font-size: 15px; line-height: 14px; }
.gird10 td a { color: #424242; text-decoration: underline; }
.gird10 td a:hover { text-decoration: none; }

.overflowBox9 { width: 98%; min-height: auto; overflow-x: auto; overflow-y: auto; background: #d7d7d7; position: relative; z-index: 0; margin: 0 1% 10px 1%; }
.overflowBox12 { width: 98%; min-height: auto; overflow-x: auto; overflow-y: auto; position: relative; z-index: 0; margin: 0 1% 10px 1%; }

@media all and (-ms-high-contrast:none){
     *::-ms-backdrop, .popup5 { width: 600px; height: auto; /*overflow: hidden;*/ background: #e8e8e8; margin: 10% auto; }
             .popup5 .popbox5 { width: 600px; background: #e8e8e8; float: left; }
}

.gird1 { }
.gird1 th { background: #585858; font-size: 12px; font-weight: 600; color: #fff; padding: 8px 5px; text-align: center; }
.gird1 th.lightorange { background: #3b5e89; }
.gird1 td { font-family: arial; font-size: 12px; font-weight: normal; color: #424242; padding: 5px 10px; background: #fff; }
.gird1 td input[type='text'] { height: 50px; border: 1px solid #dbdee0; float: left; }
.gird1 td button, .gird1 td button[type='button'], .gird1 td button[type='submit'] { font-size: 14px; background: none; border: 0; cursor: pointer; color: #515157; }
.gird1 td select {  height: 22px; border: 1px solid #dbdee0; float: left; padding: 2px; width:100%}
.gird1 td a { color: #424242; text-decoration: none;  }
.gird1 td a:hover { text-decoration: none; }

.gird1 tr:nth-child(odd) { background: #fff; }
.gird1 tr:nth-child(even) { background: #f5f5f5; }

.gird3 {  }
.gird3 th { background: #585858; font-size: 12px; font-weight: 600; color: #fff; padding: 2px 5px; text-align: center; }
.gird3 th.lightorange { background: #3b5e89; }
.gird3 td { font-size: 12px; font-weight: normal; color: #424242; padding: 5px 10px; background: #fff; }
.gird3 td input[type='text']{ height: 22px; border: 1px solid #dbdee0; float: left; }
.gird3 td button[type='button'], .gird3 td button[type='submit'] { font-size: 14px; color: #515157; }
.gird3 td select {  height: 22px; border: 1px solid #dbdee0; float: left; padding: 2px; width:100%}
.gird3 td textarea {  border: 1px solid #dbdee0; }
.gird3 td a { color: #424242; text-decoration: none;  }
.gird3 td a:hover { text-decoration: none; }
.gird3 td .ui-multiselect { width: 100%!important; }
.gird3 td .call_breakdown { font-size: 14px; color: #515157; background: none; border: none; cursor: pointer; }

.gird4 { table-layout: fixed;  }
.gird4 th { background: #585858; font-size: 12px; font-weight: 600; color: #fff; padding: 2px 5px; text-align: center; }
.gird4 th.lightorange { background: #3b5e89; }
.gird4 td { font-size: 11px; font-weight: normal; color: #424242; padding: 5px 10px; background: #fff; }
.gird4 td input[type='text']{ width: 100%; height: 22px; border: 1px solid #dbdee0; float: left; }
.gird4 td button[type='button'], .gird4 td button[type='submit'] { font-size: 14px; color: #515157; }
.gird4 td select {  height: 22px; border: 1px solid #dbdee0; float: left; padding: 2px; width:100%}
.gird4 td textarea {  border: 1px solid #dbdee0; }
.gird4 td a { color: #424242; text-decoration: none;  }
.gird4 td a:hover { text-decoration: none; }
.total-bg { background: #eeeeee!important; font-weight: 600!important; }

.gird7 {  }
.gird7 th { background: #585858; font-size: 12px; font-weight: 600; color: #fff; padding: 2px 5px; text-align: center; }
.gird7 th.lightorange { background: #3b5e89; }
.gird7 td { font-size: 12px; font-weight: normal; color: #424242; padding: 5px 10px; background: #fff; }
.gird7 td input[type='text']{ height: 22px; border: 1px solid #dbdee0; float: left; }
.gird7 td button[type='button'], .gird7 td button[type='submit'] { font-size: 14px; color: #515157; }
.gird7 td select {  height: 22px; border: 1px solid #dbdee0; float: left; padding: 2px; width:100%}
.gird7 td textarea {  border: 1px solid #dbdee0; }
.gird7 td a { color: #424242; text-decoration: none;  }
.gird7 td a:hover { text-decoration: none; }

.alter_color { background: #f4f4f4; }
.font_20 { font-size: 14px!important; color: #515157!important;  }
.gird2 {  }
.gird2 th { background: #585858; display: flex; font-size: 12px; font-weight: 600; color: #fff; padding: 2px 5px; text-align: center; }
.gird2 th.lightorange { background: #3b5e89; }
.gird2 td { font-size: 12px; font-weight: normal; color: #424242; padding: 5px 10px; background: #fff; }
.gird2 td input[type='text']{ height: 50px; border: 1px solid #dbdee0; float: left; }
.gird2 td button[type='button'], .gird3 td button[type='submit'] { font-size: 14px; color: #515157; }
.gird2 td select {  height: 22px; border: 1px solid #dbdee0; float: left; padding: 2px; width: 100%; }
.gird2 td textarea { width: 100%; height: 80px; border: 1px solid #dbdee0; resize: none; }
.gird2 td a { color: #424242; text-decoration: none; }
.gird2 td a:hover { text-decoration: none; }
.alter_color { background: #f4f4f4; }


.update_gird { font-size: 20px; color: #515157; background: none; border: none; vertical-align: middle; display: table-cell; cursor: pointer; }


@media (max-width: 480px) 
{
.popup4 { width: 95%!important; margin: 5% auto!important; }
.popup4 .popbox4 { width: 100%!important;}
.popup4 .popbox4 .contentBox { width: 94%!important; margin: 3%!important; max-height: 390px; overflow: auto; }  
}

@media (min-width: 480px) and (max-width: 800px) 
{
    
    
}


@media (min-width: 800px) and (max-width: 1100px) 
{
    
    
}