/* for history */

.historycontent {
    display: flex;
    width: 100%;
} 
 
.timeicon{
     display: block;
    z-index: 9;
    height: 44px;
    width: 44px;
    border-radius: 50px;
    margin: -9px 0px 0 -5px;
}

.historyText{
        background: #005da3;
    font-size: 18px;
    cursor: pointer;
    padding: 10px 25px;
    color: #fff;
}

.historyblock {
    padding:0 10px;
}

.timeclss  {
    display: flex;
    color: #000;
    padding: 1px 7px 2px 10px;
    min-width: 190px;
    border-radius: 50px 0 0 50px;
    margin-top: 1px;
    font-weight: bold;
}

.rightconent {
    border-left: 1px solid #ccc !important;
    margin-left: -25px;
    padding-left: 40px;
	padding-bottom: 50px;
}

.timeblock {
    display: flex;
    align-items: flex-start;
}

.nametag {
    display: flex;
    align-items: center;
}

.nametag h3{
   font-size:16px;
	margin: 0px;
}

.statustag {
     display: flex;
    padding: 0px 10px;
    background: #ccc;
    border-radius: 50px;
    margin: 0 0 0 15px;
    font-size: 13px;

}

.commenttag {
    margin: 20px 0 !important;
}

.shownotificationbtn{
    margin: 20px 0 0 0;
    display: block;
    color:var(--bluebgcolor);
    font-weight: bold;
    text-decoration: underline;
}

.codeblock{
	    background: #f2f2f2;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.historyblock .historycontent:last-child .rightconent{
	border-left:none;
}

.updatehistory .timeicon{
	    background: #fff url(/hrs/cf/files/2fcf0d5b-8af0-4de7-9013-5f106f8f0dc2) !important;
}

.deletehistory .timeicon{
	    background: #fff url(/hrs/cf/files/74eaf2c6-a147-4aac-bf8c-fee74eacd67d) !important;
}

.createhistory .timeicon{
	    background: #fff url(/hrs/cf/files/01de8f3a-5a9c-44d8-a7d0-6b95ce85d227) !important;
}

.otherhistory .timeicon{
	    background: #fff url(/hrs/cf/files/049a0d4e-25b5-4f2e-8629-bfaec36fca96) !important;
}

.viewhistory .timeicon{
	    background: #fff url(/hrs/cf/files/0dd16fff-55ee-4a77-b158-d4f714d2810e) !important;
}

.updatehistory .timeclss{
    background: #ef931a61;
    color: #000;
    font-weight: bold;
	border:1px solid #ef931a;
}

.updatehistory .statustag{
	background: #ef931a61;
	border:1px solid #ef931a;
}

.deletehistory .timeclss{
 background: #d2210640;
    color: #000;
    font-weight: bold;
    border: 1px solid #d22106;
}

.deletehistory .statustag{
	background: #d2210640;
	border:1px solid #d22106;
}

.createhistory .timeclss{
      background: #81b00152;
    color: #000;
    font-weight: bold;
    border: 1px solid #81b001;
}

.createhistory .statustag{
	background: #81b00152;
	border:1px solid #81b001;
}

.otherhistory .timeclss{
background: #9901b042;
    color: #000;
    font-weight: bold;
    border: 1px solid #9901b0;
}

.viewhistory .timeclss{
       background: #005da347;
    color: #000;
    font-weight: bold;
    border: 1px solid #005da3;
}

.viewhistory .statustag{
	background: #005da347;
	border:1px solid #005da3;
}

.otherhistory .statustag{
	background: #e5bdeb;
	border:1px solid #9901b0;
}

.historyblock:nth-of-type(odd) {
  background: #eff6f9;
}

.historyblock:hover{
    background: #e7e8eb
}


.shownotificationbtn img{
    content: url("/hrs/cf/files/d88adfb6-a876-468a-82f3-c580eed12854");
}
    

.shownotificationbtn:hover{
    text-decoration: underline !important;
}

.plus-minus-toggle::after {
    content: '▲';
}

.shownotificationbtn::after {
    content: '▲';
}
  
.collapsed::after {
    content: '▼' !important;
}
 


.category_info{
        cursor:pointer;
        float:right;
    }
.category_info img{
    height:20px;
}

.category_info img:hover { 
    border-radius: 5px;
    background: lightgray;
    filter: invert();
}
.ui-tooltip {
    white-space: pre-line;
    border-radius: 5px;
    margin: 20px;
    box-shadow: 0 0 7px black;
}
.commentmainblock{
    margin-bottom:25px;
}
.commentsection{
        display: table;
    width: 100%;
    margin-bottom: 30px;
}

.commentsection textarea{
    min-height:150px;
}

.commentsection .btn{
    float:right;
    margin-top:10px;
}

.commentsblcok{
    margin-bottom:5px;
    border:1px solid #ccc;
    background:#fff;
    border-radius:3px;
    padding:5px;
}

.commentsblcok {
    margin-bottom: 5px;
    border: 1px solid #ccc;
    background: #fff;
    padding: 15px 10px;
    border-radius: 5px;
    transition: ease 0.5s;
}

.commentsblcok:hover{
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
    background:#f1f1f1;
}

.commentscls {
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
    margin-bottom: 10px;
}

.commentby {
    margin-right: 25px;
}

.commentby .fa{
    margin-right:5px;
}

.flexbox {
    display: flex;
     font-style: italic;
     color: #666;
}

.timenddatecls {
    color: #666;
        display: block;
    font-style: italic;
    margin-right:15px;
}

.timenddatecls .fa{
    margin-right:5px;
}   
<!-- end of history -->


<!-- color -->
 
.balloon{
	width: 35px;
	display: block;
}

.balloonParent{
	position: fixed;
	display: block;
	cursor: pointer;
	opacity: .75;
    z-index: 100 !important;
}

.dgreen{
	background-color: #1b5e20;
	border: 1px solid #ccc;
    padding: 3px;
    border-radius: 3px;
    width: 100%;
    color: white;
}

#homeDiv{
    display:flex;
}

.removbtncls{

}

.removbtncls .fa{
    cursor:pointer;
}

.formbtnblock{
    display:flex;
    justify-content: right;
}

.assesmentform {
    border: 1px solid #ccc;
    padding: 15px;
    position: relative;
    border-radius: 5px;
    margin-top: 30px;
    padding-top: 35px;
}

.attributetble{
   font-size: 14px;
    width:100%;
    margin: 0px auto;

}

th.headertext {
    text-align: center;
}

th.css_attr {
    background: #ffff !important;
}

.teccomment{
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    padding-bottom:10px;
}

input:disabled::-webkit-input-placeholder { /* WebKit browsers */
    color:    #a4a4a4;
}
input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #a4a4a4;
}
input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:      #a4a4a4;
}
input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:      #a4a4a4;
}

.teccomment label{
    margin-bottom:5px;
}

.skilltable tr:nth-child(7) td {
    border-bottom: 2px solid #000;
}

.skilltable tr:nth-child(7) th {
    border-bottom: 2px solid #000;
}

.attributetble.skilltable{
 width:97%;
}

.attributetble td{
    border-left:0px;
    border-top:0px;
}

.resumelink{

}

.showselectblock {
    display: flex;
}

.showselectblock label{
       margin: 0px 5px 0 0;
}

 .selectblock{
    display: flex;
    margin-right: 10px;
    align-items: center;
}

.resumelink .fa{
    display:inline-block;
    margin-right:5px;
}

.resumelink:hover{
 text-decoration:none !Important;
}

 
 

.ratingskilss{
        display: flex;
    justify-content: right;
    margin-top: 5px;
    margin-bottom: 3px;
    font-weight: bold;
    background: #005da312;
    padding: 5px;
    padding-right: 15px;
    align-items: center;
}

.attributetble th{
           background: #f2f2f2;
    border: 1px solid #ccc;
    padding: 10px;
        border-top: 0;
}

.assesmentform h3{
        position: absolute;
    background: #005da3;
    font-size: 16px;
    color: #fff;
    padding: 10px;
    top: -20px;
    border-radius: 5px;
}

.btn {
    cursor: pointer;
}

.cancelbtns{
    margin-top:15px;
}

.no-of-files-counter{
    .no-of-files-counter 
    border-radius: 50%;
    width: 30px !important;
    height: 30px !important;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    font-weight: bold;
    display: inline-block;
    line-height: 27px !important;
    text-align: center;
    font-size: 13px;

}

.formbtnblock .custom-grp-btn{
    margin-left:10px;
}

.custom-grp-btn{
     
}

#log-history-popup{
    height:84% !important;
}

.schedulerclss{
    height:450px !important;
    top:80px !important;
}

<!-- Response Editor-->

/*toggle btn css*/
    
    .toggle {
  display: block;
  text-align: center;
  user-select: none;
}

.toggle--checkbox {
  display: none;
}

.toggle--btn {
  display: block;
  margin: 0 auto;
  font-size: 1.4em;
  transition: all 350ms ease-in;
}
.toggle--btn:hover {
  cursor: pointer;
}

.toggle--btn, .toggle--btn:before, .toggle--btn:after,
.toggle--checkbox,
.toggle--checkbox:before,
.toggle--checkbox:after {
  transition: all 250ms ease-in;
}
.toggle--btn:before, .toggle--btn:after,
.toggle--checkbox:before,
.toggle--checkbox:after {
  content: "";
  display: block;
}

.toggle--like .toggle--btn {
  position: relative;
      height: 15px;
    width: 80px;
    border-radius: 70px;
    border: 3px solid #AD1000;
  background-color: #e25d5d;
}

.toggle--like .toggle--btn:before {
  position: absolute;
    top: -10px;
    left: 0px;
  border-radius: 50%;
}

.toggle--like {
  position: relative;
}
.toggle--like .toggle--btn:before {
  content: '';
  background-image: url("https://apps.trigyn.com/hrs/cf/files/9bed82f5-c452-46d6-95d2-da83c69e7b71");
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  background-position: center;
}

.toggle--like .toggle--checkbox:checked + .toggle--btn {
  background-color: #0cbb32;
  border: 3px solid #03801e;
}
.toggle--like .toggle--checkbox:checked + .toggle--btn:before {
  transform: translate(46px, 0);
  background-image: url("https://apps.trigyn.com/hrs/cf/files/59b5d1ca-ffb8-49c7-9969-3811aaa3ffda");
}

label.indeterminate_label {
  background-color: #979494;
    border: 3px solid #686362;
    height: 15px;
    width: 80px;
    border-radius: 70px;
    margin: 0 auto;
    /*transition: all 250ms ease-in;*/
    cursor: pointer;
    /*margin-bottom: 0;*/
}

.indeterminate_input{
  display: none;
  transition: all 250ms ease-in;
}

label.indeterminate_label:before {
    content: '';
    background-image: url("https://apps.trigyn.com/hrs/cf/files/cf90130f-8135-4f8e-9d76-a3cfd3a62bb7");
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 30px;
    width: 30px;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/*toggle btn css end*/

/*noraml css*/
.form_bg{
  background-color: #fff;
  padding-top: 2rem;
  padding-bottom: 3rem;
  padding-left: 3rem;
  padding-right: 3rem;
}

 

.form_header_bg{
  background-color: #778393;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #fff;
  padding-left: 3rem;
  padding-right: 2rem;
  font-size: 13px;
  /* height: 60; */
    background: rgb(119,13,13);
background: linear-gradient(90deg, rgba(119,13,13,1) 0%, rgba(170,40,40,1) 60%, rgba(219,121,121,1) 100%);
}

 

.form_header_bg p{
  margin-bottom: 0;
}

 

.body_bg{
  background-image: url("https://apps.trigyn.com/hrs/cf/files/73ed3dd5-e738-42aa-a5b9-d16ae1cc99d8");
    width: 100%;
    background-size: contain;
    <!-- height: 100%; -->
    background-position: center;
}
}

 

.form_info_details{
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
  padding-bottom: 1rem;
}

 

.form_quest sup{
  color: red;
  font-size: 20px;
  top: 0;
  font-weight: 700;
}

 

.form_fields_details{
  margin-top: 2rem;
  display: flex;
  align-items: center;
  padding-left: 5px;
  transition: all 0.3s ease-in;
  justify-content: space-between;
}

 

.form_quest{
  font-weight: 700;
  font-size: 14px;
  width: 60%;
  display: inline-block;
  padding-right: 10px;
  margin-bottom: 0;
}

.form_ans{
  width: 10%;
  display: inline-block;
  text-align: center;
}

th.css_skills {
    background: #005da32b;
    /* border: 1px solid #005da34d; */
}

.response_list_btn{
    padding: 6px 8px;
    background-color: #fff;
    border: 2px solid #fff;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    <!-- position: absolute; -->
    <!-- right: 40px; -->
    transition: all 0.2s ease-in;
}

.response_list_btn:hover{
    color: #fff;
    background-color: #005da3;
    border: 2px solid #fff;
    text-decoration: none;
}

.response_submit_btn{
    text-align: right;
}

.response_submit_btn button{
    padding: 6px 20px;
    background-color: #005da3;
    border: 2px solid #005da3;
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    margin-top: 30px;
    transition: all 0.2s ease-in;
}

.response_submit_btn button:hover{
    background-color: transparent;
    border: 2px solid #005da3;
    color: #005da3;
}

.form_textarea{
    width: 40% !important;
}

.form_bg:nth-last-child() .form_fields_details {
  display: block;
}

.form_fields_details:hover {
    background-color: rgb(0 0 0 / 10%);
    box-shadow: 0px 0px 4px #beb9b9;
}

.textarea_label{
    width: 60% !important;
}

            .img_text_wrapper{
                display: flex;
                align-items: center;
            }

            .img_text_wrapper h1{
                margin-top: 0;
            }
            .img_text_wrapper .trigyn_logo{
                height: 150px;
                margin-right: 30px;
            }
            .authorised_text{
                background-color: #fff; 
                padding-left: 2rem;
                padding-top: 1rem;
                text-align: center;
            }

            .authorised_text img{
                height: 180px;
            }

            .authorised_text p{
                text-align: center;
                font-size: 18px; 
                color: #333; 
                text-transform: uppercase; 
                font-weight: 700;
                margin-bottom: 0;
                padding-top: 1rem;
            }

<!-- Response List-->
    .ui-tabs-vertical { }
    .ui-tabs-vertical .ui-tabs-nav { 
          display: block;
             float: left;
    }

    .customhorizanttab.ui-tabs-vertical .ui-tabs-nav {
        width:186px;
    }
    .ui-tabs-vertical .ui-tabs-nav li { 
        <!-- clear: left;  -->
        <!-- width: 100%;  -->
        border-width: 1px !important; 
        /*margin: 0 0px 0px 0; */
        transition: all 0.3s ease-in-out;
        border-radius: 5px 5px 0px 0px;
         
    }

    .customhorizanttab.ui-tabs-vertical .ui-tabs-nav li { 
            border-radius: 5px 0px 0px 5px;
                margin-bottom:5px !important;
                border-bottom: 1px solid #ccc;
    }



    .ui-tabs-vertical .ui-tabs-nav li a { 
        display:block; 
    }
    .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
        border: 1px solid #005da3;
        background: #005da3;    
        /* margin-bottom: 5px; */
        padding-bottom: 0;
    }
    .ui-tabs-vertical .ui-tabs-panel { 
        
        /* float: left; */
        
        overflow: hidden;
    }
    #tabs{
        display: block;
        justify-content: right;
        width: 100%;
    }
    #mainTab{
        <!-- display: flex;
        justify-content: right;
        width: 100%; -->
    }
    .table-striped tbody tr:nth-of-type(odd){
        background-color: transparent;
    }
    table.pq-grid-header-table{
        width: 100%;
    }
    table.pq-grid-table{
        width: 100%;
    }
    table.pq-td-border-right>tbody>tr>.pq-grid-cell{
        text-align: left;
    }
    .table{
        border: 1px solid #dee2e6;
    }
    .rowgroup_bg{
        background-color: #eee;
    }

    .table td, .table th{
        border: 1px solid #dee2e6;
        padding: 7px 6px !important;
        font-size: 13px;
    }

    .table td label, .table th label{
        margin-bottom: 0;
        font-size: 13px;
    }
    .topband .title-cls-name{
        font-size: 20px;
        margin: 0;
        color: #0277bd;
    }
    .rowgroup_bg2{
        background-color: #0277bd;
        color: #fff;
        font-size: 12px !important;
    }
    .month_bg{
        background-color: #0277bd;
        color: #fff;
        font-weight: 700;
    }

    .red_bg{
        background-color: #f3bfbf;
    }
    .green_bg{
        background-color: #bbdfbb;
    }
    .orange_bg{
        background-color: #f3deb7;
    }
    .feedback_main_wrapper{
            background: #fcfcfc;
    padding: 10px 10px 20px;
    margin-bottom: 10px;
    position: relative;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    box-shadow: -2px -2px 5px 0px rgb(0 0 0 / 2%);
        }

        .emp_time_date{
    position: absolute;
    color: #646262;
    font-size: 13px;
    font-weight: normal;
    margin-left: 24px;
    top: 10px;
    right: 10px;
}

        .emp_feedback_wrapper{
        display: flex;
        align-items: center;
        }

        .emp_icon{
    padding-right: 7px;
    text-align: center;
    display: block;
    float: left;
}

        .emp_icon i{
            font-size: 20px !important;
                color: #005da3 !important;
        }

        .emp_feedback{
        position: relative;
        width:98%;
        }

        .emp_feedback span{
    font-size: 14px;
    font-weight: 600;
     margin-top: 0px;
    float: left;
    padding:5px 0;
    color:#005da3;
 }
    .emp_feedback span a{
         color:#005da3 !important;
    }
        .emp_feedback span a:hover {
            color:#005da3;
        }

        .emp_feedback .surevyblock{
          margin-bottom: 2px;
    position: relative;
    margin-left: 25px;
    margin-top: 0;
    float: none;
    width:100%;
    display: flex;
    border: 1px solid #ccc;
        }

 .surverytype {
    display: flex;
    background: #7c7c7c;
    padding: 5px !important;
    color: #fff !important;
    margin: 0px !important;
    align-items: center;
    margin-right: 10px !important;
}

.surv_detil {
    display: flex;
    flex-direction: column;
    width: 100%;
}

span.surveycoment {
    width: 98%;
    padding-bottom:0px;
}

.time {
    font-style: italic;
}

        .emp_feedback p br{
            
        }

        .emp_feedback p label{
        width: 100%;
        padding-top: 10px;
        }
<!-- Anonymous and Authenticated home-->
    .annony_text{
        text-align: center;
        background-color: #596676;
        color: #fff;
        text-transform: uppercase;
        padding: 2rem 0;
        font-family: 'holidaytimesjfregular' !important;
    }

    .dropdown_label{
        width: 60%;
    }

    .dropdown_select_wrapper{
        width: 40%;
    }

    .dropdown_select_wrapper select{
        width: 100%;
        height: 30px;
        <!-- border: none; -->
        <!-- border-bottom: 1px solid; -->
    }

    .double_para_wrapper:nth-last-child(1) p{
        margin-top: 15px;
    }
    
.asteriskmark {
	color: #ff0000;
	margin-right: 2px;
}

.form_mid_heading{
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    margin: 30px 0 0;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.5;
    background-color: #d97676;
    padding: 10px;
}

.text_noborder{
    border: none;
}

.emp_details_wrapper{
        display: flex;
    margin-bottom: 20px;
}

.empnamecls  i.fa.fa-user-circle  {
    font-size: 50px !important;
    display: block;
    text-align: center;
    margin: 20px 0 10px;
}

.label_head{
    font-weight: 700;
}

.desc_text{
    font-weight: 300;
    font-size: 12px;
}

.responstime{
    display: table;
    text-align: right;
    width: 100%;
}

.inerresponse{
        border: 1px solid #ccc;
    float: right;
    padding: 5px;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    background: #f2f2f2;
}

.empnamecls{
    background: linear-gradient(0deg, rgba(0,93,163,1) 0%, rgba(0,131,230,1) 63%);
        padding: 20px 0;
    margin-right: 10px;
    margin-bottom: 0;
    width: 230px;
    color: #fff;
}

#responder-history .emp_basicinfo_wrapper{
    display: flex;
    background-color: #ffffff;
    width: 100%;
    padding: 0;
    border: 1px solid #ccc;
    flex-wrap: wrap;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom:0px;
}


.emp_basicinfo_wrapper{
    display: flex;
    background-color: #ffffff;
    width: 100%;
    padding: 0;
    border: 1px solid #ccc;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.empdetailbox{
    flex: 1;
}

.flexblock{
    display:flex;
        margin-left: 0px;
}

.flexblock .label_head{
    flex:1;
    font-size: 13px
}

.flexblock .label_head span:first-child{
font-weight: normal;
display:block;
margin-top:10px;

}

.flexblock .label_head span:last-child{
   font-size: 14px;
}

.empcode{
   font-weight: bold;
    display: block;
    text-align: center;
       margin: 10px 0 0;
}

.empcode span{
    font-weight: normal;
}

 

.ui-widget-overlay {
    background: #000;
    opacity: 0.5;
}

.emp_icon_2{
    display: flex;
    text-align: left;
    background-color: #a22424;
    color: #fff;
    align-items: center;
    padding: 10px;
}

.emp_icon_2 i{
    font-size: 40px !important; 
    color: #fff;
    padding-right: 10px;
}

.feedback_main_wrapper_res_time{
    margin-bottom: 25px;
    position:relative;
}

.res_time_date{
   position: relative;
    color: #646262;
    font-size: 13px;
    display: block;
    text-align: center;
}

.res_time_date span{
    font-weight:normal;
}


    .welcometext{
        font-size:25px;
        margin:0px;
        text-align:center;
    }

    .cardbtn{
    display: inline-flex;
    height: 230px;
    width: 230px;
    border: 1px solid;
    text-align: center;
    background: #fff;
    font-size: 18px;
    align-items: center;
    position:relative;
    justify-content: center;
    margin: 32px;
        border-radius: 0;
            transition: 0.5s;
             color:#005da3;
                 flex-direction: column;
                     transition: ease 0.5s;
}

      .cardbtn a{
               font-size: 18px;
    font-weight: normal;
    color:#005da3;
      }

           .cardbtn .fa{
     display: flex;
    font-size: 48px !important;
    color: #005da3;
    margin: 0 0 20px;
           }

    .cardbtn span{
      z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 70px;
        transition: ease 0.5s;
    color: #005da3;
    }

     .cardbtn:hover span{  background: #005da3;color:#fff;}

          .cardbtn:hover .fa{color:#005da3;}

  .cardbtn:hover{
      background:#fff;
      color:#fff;
          border: 1px solid #005da3;
      }

      .cardbtn:hover:after{
       opacity:1;
      }


      .boldcls{
          font-weight:bold;
      }


    .extracls .label_head{width:350px;}

    .questioncls{
             font-size: 16px;
    margin: 10px 0 20px;
    color: #005da3;
    display: flex;
    border: 1px solid #eee;
    }

    .qs{
           background: #f4f4f4;
    color: #005da3 !important;
    }

    .questioncls span{
            color: #000;
    padding: 10px;
    }


    .emailfields {
    margin-bottom: 10px;
    border: 1px solid #f4f2f2;
    padding: 9px 10px 12px 15px;
    border-radius: 4px;
    background: #fcfcfc;
}
      .emailfields legend {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0px;
    padding: 2px 15px;
    background: #fff;
    width: auto;
    border-radius: 3px;
    border: 1px solid #f4f4f4;
    margin-left: -6px;
}

      .emailmaincontent{
    background: #f4f4f4;
    padding: 20px;
    border-radius: 5px;
}

.emailmaincontent legend{
    display:none;
}
     .emailfields span{
           font-size:14px;
            
        }

    @media screen and (max-width:1400px) {

       .customnav li .nav-link{
               padding: 8px 6px !important;
       }
    }
 
     @media screen and (max-width: 992px) {
        small, .small {
             font-size: 14px;
            }

        .navbar-brand{
                    width: auto;
                padding-left: 0px !important;
        }
        .col-6, col-12{
            flex: 0 0 100%;
              max-width: 100%;
              padding:0px;
        }
        .main-container{
            padding:0px !important;
        }
         .searchmidlle{
             width:100% !important;
         }

         .row{
                 margin: 0px;
                width: 100%;
         }
         .emp_basicinfo_wrapper{
                 font-size: 28px;
          }

         .inerresponse{
             font-size: 28px;
         }

         .inerresponse i{
             font-size: 28px !important;
         }

         .first_impression_test p{
             font-size: 28px;
         }

         .desc_text{
             font-size: 28px;
         }

         .form_quest{
             font-size: 28px;
         }

         .emp_feedback_wrapper{
              font-size: 20px;
         }

         .emp_feedback span{
             font-size: 28px;
         }

         .emp_time_date{
             font-size: 18px;
         }

         .emp_icon i{
                font-size: 28px !important;
                color: #005da3 !important;
                margin-top: 5px;
            }

            .ui-dialog{
                width: 98% !important;
                left: 10px !important;
            }

            .flexblock .label_head{
                 font-size: 28px;
            }

            .flexblock .label_head span:last-child{
                 font-size: 28px;
            }

            .emp_basicinfo_mobilescren{
                padding: 0px;
            }

            .questioncls{
                font-size: 28px;
            }

            .ui-dialog .ui-dialog-titlebar{
                 font-size: 28px;
            }
            .customfieldbox textarea{
                  float: right;
                        font-size: 28px;
                        padding: 5px;
            }

            .emp_icon_2{
                    align-items: inherit;
            }

            .ui-tabs-vertical .ui-tabs-nav li{
                font-size:26px;
            }

            .table td, .table th{      
                    font-size: 26px !important;
                }

            .table td label, .table th label{
                 font-size: 26px;
            }

            .topband .title-cls-name{
                 font-size:18px;
            }
            
            .customfieldbox{
                display:block;
                width: 100% !important;
            }

            .customfieldbox .textarea_label{
                width:100% !important;
            }
            .customfieldbox textarea{
                     float: none;
                width: 100% !important;
                margin-top: 5px;
                height: 160px !important;
             }

             .respondblock > div:last-child{
                 display:block;
             }

             .extracls .label_head{
                 width:auto;
             }

             #responseBody{
                 display:table;
             }
    }

    
    .customfieldbox{
        width:50%;
    }

    .customfieldbox textarea{
        float: right;
    width: 100% !important;
    }

    .anlysisblock{
     }

    .bigtitlecls{
             color: #005da3;
    margin-bottom: 30px;
    display: block;
    font-size: 22px;
    }

    .anlysistable{
        border:1px solid #000;
    }

    .tableblock{
        margin-top: 30px;
    }

    .smalltitlecls{
        color: #005da3;
    font-size: 20px;
    }

    .anlysistable{
        width: 100%;
    }

    .anlysistable th{
            background: #f2f2f2;
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 10px;
    }

    .anlysistable td{
        
    }

    .darkbgcls{
        background: #59595a;
     color: #fff;
    }


    .inputactionbtn{
          position: absolute;
            top: 29px;            
            right: 0px;
            padding: 11.4px 11px;
            border: 1px solid #ccc;
            border-radius: 0 3px 3px 0;
                background: #f2f2f2;
    }

     .inputactionbtn:hover{
        background: #f7f7f7;
     }

    .inputactionbtn_right{          
            right: 33px;
             border-radius:0;
         
    }

     .inputactionbtn fa{
        
    }

    .deparlist{
            list-style: none;
    display: flex;
    align-items: center;
    padding: 0px;
    flex-wrap: wrap;

    }

    .deparlist li{
     margin:0px 10px 10px 0px;
    }

    .deptlistname{
              border: 1px solid #ccc;
    border-radius: 3px;
    background: #fcfcfc;
    padding-left: 10px;
    color:#666;
    }

     .deptlistname button{
             border: none;
    background: #f2f2f2;
    padding: 10px;
    margin-left: 10px;
    color:#666;
     }

       .deptlistname button:hover{
        background: #f7f7f7;
     }

   .deptlistname .fa{
        
    }

    .titlenamecls{
       color: #0277bd;
    font-size: 17px;
    margin-top: 25px;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    }

     .titlenamecls:after{
             content: "";
    position: absolute;
    border-bottom: 5px solid #0277bd;
    left: 0px;
    right: 0px;
    bottom: -9px;
     }
     
    .searchmidlle  {
        display: block;
        width: 50%;
        margin: 20px auto 10px;
        text-align: center;
        background: #005da3;
        padding: 10px 19px 2px;
        border-radius: 7px;
        color: #fff;
    }

     .searchmidlle  .rich-autocomplete {
         height:59px !important;
     }

     .searchmidlle .search-cover .rich-autocomplete input{
             padding-left: 50px !important;
     }

     .searchmidlle .search-cover .fa-search {
    position: absolute;
    top: 25px;
    left: 27px;
    }

    .searchmidlle .rich-autocomplete .rich-autocomplete-list{
         text-align: left;
    }

    .readonlylist {
    list-style: none;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    margin:20px auto 0;
}

    .readonlylist li {
    flex: 50%;
    padding: 0 15px;
    margin: 0 0 15px;
        position: relative;
}

    .readonlylist li span{
    display: flex;
    color: #666;
}

    .readonlylist span:first-child{
    font-weight: bold;
        margin: 0 0 3px;
    color: #474646;
}

.readonlylist span:last-child{
        border: 1px solid #ccc;
    padding: 5px;
    min-height: 33px;
        background: #f2f2f2;
    border-radius: 3px;
}

.hodcoment{
        width:100%;
 }

.hodcoment label{
        width: 100%;
    font-weight: bold;
}

.commentbtns .btn {
    margin-right:10px;
}

.hodcoment textarea{
  width: 100%;
    border: 1px solid #ccc;
    min-height: 60px;
    border-radius: 3px;
    padding: 5px;
    margin: 0 0 5px;
}

.commnetssection{
     width: 96%;
    background: #fcfcfc;
    padding: 10px 10px 20px;
    margin-bottom: 10px;
    position: relative;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    box-shadow: -2px -2px 5px 0px rgb(0 0 0 / 2%);
    margin:0px auto 15px;
    display:table;
}

.commnetssection span:first-child{
    font-weight: bold;
    color: #005da3;
}

.comdatetime{
    float:right;
}

.commnetssection p{
    margin: 6px 0;
}

.colsection{
       width: 46%;
    float: left;
    margin: 0 15px 30px;
}

.ui-widget{
    font-family: 'Roboto', sans-serif !important;
}

.btn.btnreject{
    background: #fff !important;
    color: #dc0303;
    border: 1px solid #dc0303;
}

.btn.btnreject:hover{
     background: #dc0303 !important;
     color:#fff;
}

.selecttext{
        float: right;
    font-style: italic;
    color: #005da3;
}

.statusblock{

}

.statusblock label{
 display:block;
 font-weight:bold;
}

.statusblock select{    
    margin-bottom: 10px;
}

.externallinkbtn{
    position: absolute;
    right: 15px;
    padding: 8px !important;
    min-height: auto !important;
    background: #e4dede !important;
    top: 24px;
    border-radius: 0 3px 3px 0 !important;
    cursor: pointer;
}

.textareaheight{
    height:120px !important;
}

.chartcoverblock{
    display:table;
}
.cola-3 {
    width:49.4%;
    float: left;
    border: 1px solid #ccc;
    margin: 10px 15px 10px 0;
    padding: 10px;
}

.cola-3.r-m-0{
 margin-right:0px !important;
}

.centercls{
    text-align:center;
    font-size: 16px;
}

.detailsblock{
       margin-bottom: 40px;
    background: #fafafa63;
    padding: 20px !important;
    box-shadow: -2px -2px 5px 0px rgb(0 0 0 / 2%);
    border-radius: 5px;
    border: 1px solid #cccccc42;
    margin-top: 60px;

}

.detailsblock table{
    background:#fff;
}

.detailsblock h4:hover{
        background: #f2f2f2;
}

.detailsblock h4{
 margin-bottom: 0px;
    font-size: 16px;
    margin-top: -5px;
    background: #fff;
    padding:8px 20px 8px 35px;
    border-radius: 5px;
    color: #0277bd;
    border: 1px solid #e9ecef;
    position:relative;
    
}

.jointopblock{
       display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    margin-top: -35px;
}

.btn-min-size {
    min-width: 75px;
    text-align: center;
}

.btn-min-size .fa{
    margin-right:5px;
}

.popuptop{
    top:30% !important;
    position:fixed !important;
}

.useraction{
    margin-bottom:8px;
    display:flex;
}

.hraction{
 }

  .btn-secondary{
         background: #fff !important;
    color: #005da3 ;
    border: 1px solid #005da3 ;
     
 }

 .btn-secondary:hover{
         background: #005da3 !important;
    color: #fff !important;
    border: 1px solid #005da3 !important;
     
 }

 .navbar{
     display:block !important;
  }
  	
.pq-fill-handle.ui-draggable.ui-draggable-handle{	
	display:none !important;	
}	
.pq-grid-cell:focus{	
outline: none !important;	
}	
.fileuploadblock{	
}	
.pg-form-dropzone .dropzone{	
    min-height:auto !important;	
}	
.fileuploadblock .cm-dropzone-wrap{	
    padding-top:0px;	
}

.pq-grid-header-table>tbody>tr>.pq-grid-col{
    border-color:#ccc !important;
}

.empdetilsclsblock {
    display: flex;
    flex-wrap: wrap;
    max-height: 370px;
    overflow-y: auto;
}
 
 .empdetilscls{
    width: 25%;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.empdetilscls label:first-child {
    font-weight: bold;
    margin: 0;
}

.empdetilscls label {
    margin: 0px;
}

.greenbtn{
    background: #fff !important;
    border: 2px solid #1faa00 !important;
    padding: 2px !important;
    color: #1faa00 !important;

}

.redbtn{
    background: #fff !important;
    color: #dd2c00 !important;
    border: 2px solid #dd2c00;
    padding: 2px 4px !important;
}


 


span.grid_action_icons.redbtn:hover{
    background: #dd2c00 !important;
    color: #fff !important;
}


 

span.grid_action_icons.redbtn:hover .fa{
    background: #dd2c00 !important;
    color: #fff !important;
}

.uploaddocbtn label{
    margin:0px;
}


.uploaddocbtn{
    display: flex;
    align-items: center;
    background: #f4f4f4;
    padding: 10px;
    margin: 0 0 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    position:relative;
}

.uploaddocbtn .fa{
    color: #e86305;
}

.uploaddocbtn .fa.fa-thumbs-o-up{
    color: #2a980a !important;
}



.updoctbtn{
    margin-left: 10px;
}

.docstatus{
    
}

.flexblox {
    display: flex;
    flex: 100%;
    flex-direction: row;
    margin: 0 18px;
    font-size: 13px;
    justify-content: space-between;
}

.docattachment {
    display: flex;
    align-items: center;
}

.filenamesize{
    min-width:240px;
}

.filenameelpis{ 
  width: 225px;
}
 

.brektext{
    width:220px;
}

@media screen and (-webkit-min-device-pixel-ratio:0)  {
    .filenameelpis{ 
    width: 245px;
    }
}

.rating {
   position: relative;
   width: 180px;
   background: transparent;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: .3em;
   padding: 5px;
   overflow: hidden;
   border-radius: 20px;
   box-shadow: 0 0 2px #b3acac;
}

.rating__result {
   position: absolute;
   top: 0;
   left: 0;
   transform: translateY(-10px) translateX(-5px);
   z-index: -9;
   font: 3em Arial, Helvetica, sans-serif;
   color: #ebebeb8e;
   pointer-events: none;
}

.rating__star{
   font-size: 1.3em;
   cursor: pointer;
   color: #dabd18b2;
   transition: filter linear .3s;
}


.rating__star:hover {
   filter: drop-shadow(1px 1px 4px gold);
}    


.numberunselect {
    background: #e5d15e;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
        display: inline-block;
    margin: 0 0 0 3px;
}


.numbercls {
    background: #fff;
    height: 30px;
    border:1px solid #e5d15e;
    width: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
        display: inline-block;
    margin: 0 0 0 3px;
}

.texareablock{
    width: 500px;
}

.likedislikcls{
        display: flex;
    justify-content: space-between;
        margin-bottom: 2px;
}

.uplodbtnfile{
        margin: 28px 0 0 0;
}

.uplodbtnfile .fa{
    margin: 0 5px 0 0;
}


/*******Add horzintal-navbar Class in #mySidenav ******/

.horzintal-navbar{
     display: flex;
    width: 80% !important;
    position: fixed !important;
    top: -4px !important;
    left: 120px !important;
       overflow-x: inherit !important;
    height: inherit !important;
    z-index: 1050 !important;
   
}

.nav-link.show .fa-caret-down, .morelinknav.show .fa-caret-down{
     transform: rotate(180deg);
}

.horzintal-navbar.bg-dark{
    background-color: transparent !important; 
}

.sticky-top{
    position:fixed !important;
    width:100%;
}

.hideclsnav{
    display:none;
    opacity:0;
}

 

.customnav li .nav-link{
    opacity:1 !important;
}

.horzintal-navbar-list.flex-column {
    flex-direction: row !important;
    margin: 15px 0 0;
    display: flex;
    width: 100%;      
    flex-wrap: nowrap !important;
    max-height:45px;
    
}

.master-arrow-down{
    margin-left:10px;
}

.morelinksblock{
  background: #005da3 !important;
    padding: 0px;
    width: 240px;
    top: 5px !important;
    border: none !important;
    border-radius: 0px !important;
     
}

.morebtnblock{
    position:relative;
    max-height:45px;
 }

.morelinknav {
     background: none;
    border: none;
    color: #fff !important;
    padding: 10px !important;
    font-size: 14px !important;
    margin-top: 13px;
    margin-left: 5px;
    cursor: pointer;
    line-height: inherit;
    height: 39px;
}

.morelinknav:hover{
  background: #014578;
  }

.sidebar .nav-link:hover{
    opacity:1 !important;
    display:block !important;
}

.horzintal-navbar .nav-inside{
 padding:0px !important;   
}
.searchblock{
    display:none;
}


/*** To hide Hamburger ***/
.horzintal-navbar-hamburger .hamburger{
    display:none;
}

.customnav li {
    position: relative;
    display: flex;
    flex-direction: column;
}

.subcategory li{
 padding-left:0px !important;
}

.subcategory > span{
    display:none;
}

.subcategory .nav-item{
    padding-left:0px;
}
.subcategory .nav-link{
    padding:7px 20px;
}

.subcategory .nav-link:hover{
    color:#fff !important;
    background: #014578;
}
.customnav li .nav-link:hover{
    background: #014578;
}

.masterlinksdiv{
    display: block;
    top: 44px;
    left: 0px;
    right: inherit;
    width: 250px;
}

.masterlinksdiv .subcategory li{
    padding-left:0px !Important;
}

.horzintal-navbar-list .fa-caret-down, .morearowcls{
    margin-top: 5px;
    float: right;
    margin-left: 10px;
 
}

.customnav .nav-item a:after{
    display:none !important;
}

.uparow{
        transform: rotate(180deg);
    margin-top: 4px;
}

.moreuparow{
        transform: rotate(180deg);
    margin-top: 4px;
}

.horzintal-navbar-list li:nth-child(n+9){
    display:none;
    border:1px solid red;
}

.bgblue{
background:#0277bd;
color:#fff;
}

#main{
    margin-top:50px;
}

.addressformfields{

}

.addressformfields .form-control{
        margin: 0 0 5px;
}

input[type="file"]{
    border:1px solid #ccc;
    padding:5px;
        border-radius: 5px;
}

.surevyblock{

}

.surevyblock span{
        color: #000;
    font-weight: normal;
    margin: 0 5px;
}

.surverytype{

}

.ui-dialog-titlebar-close{
        border: none;
    background: url(../cf/files/9fe2edd6-fe17-48eb-b051-c9289fcba6f0);
    background-size: 100%;
    filter: invert(1);
 }
 
 .topshowbtn{
         display: flex;
    float: right;
    align-items: center;
 }

 .topshowbtn select{
     margin-left:5px;
 }

 .disable-bg-cls{
      background: #e4e4e4 !important;
    color: #666 !important;
 }

 .ui-slider-horizontal .ui-slider-handle{
         cursor: pointer !important;
 }

 .formlink .fa{
     margin-right:5px;
 }

 .teamchaticon:hover img{
       filter: brightness(0) invert(1);
         -webkit-filter: brightness(0) invert(1);
 }

 .no-of-files-counter {
     	 margin-left: 10px;
    margin-right: 7px;
 }

 .stickytablecls{
     width: 100%;
         max-width: 1140px;
    overflow-x: auto;
  }

 .stickytablecls .attributetble {
    font-size: 14px;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0px auto;
    border-top:1px solid #ccc;
}

.fixedcolomdiv{
    width:150px;
}

.divcontentcls{
     width:180px;
}

th.fixedcolum {
     position: sticky;
    left: 0px;
    width:150px;
    top: auto;
}

.candidatphoto{
    border:1px solid #ccc;
}
 

.onboradtick img{
        height: 16px;
        padding:0 2px;
}

 

 


.redtick:hover{
 }

.redtick{
    color: #d30c0c;
}

.ongridmsg{
    margin-bottom:10px;
    border:1px solid #ccc;
    display:flex;
    align-items:center;
    border-radius: 5px;
}
.ongridmsg span{
    padding: 10px;   
    margin-right: 15px;
     display:flex;
     border-radius: 5px 0 0 5px;
    align-items:center;
}

.ongridmsg span.sucessfuly{
background: #61b50b;
color: #fff;
}

.ongridmsg span.rejected{
background: #b50b37;
color: #fff;
}

.ongridmsg span i{
        margin-right: 7px;
}

 
 #divIsApplicable label{
     font-weight:bold;
 }
 

.linkurlcls{
    border:none;
}

.candidateformbtn{
    text-align: right;
    margin-bottom: 30px;
}

.candidateformbtn .form-control {
    width:auto;
}

#btnUpdateJoineeStatus{
    margin-right:5px;
}

.viewresumebtncls{
    display:flex;
    justify-content: end;
    margin-bottom: 10px;
}

#divLinkForm{
    margin-right:10px;
}

.tutorialmoduleblock {
    display: flex;
    padding: 0px;
    margin: 0px;
    list-style: none;
    width: 100%;
        flex-direction: column;
}

.tutorialmoduleblock li {
    border: 1px solid #ded6d6;
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
}

.tutorialmoduleblock img  {
    height: 100%;
    width: 100%;
    border: 1px solid #ccc;
}

.tutorialmoduleblock li a{
    font-size: 18px;
    margin: 0 0 6px 0;
}

.contenttutorial{
        margin-top: 10px;
}



.imgthumb{
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #ccc;
}

.DynarchCalendar-prevYear div {
    background-image: url(/hrs/webjars/1.0/JSCal2/css/img/nav-left-x2.gif) !important;
}

.DynarchCalendar-dayNames{
    background: #0000003d !important;
}
.customcheckbx{
        visibility: block;
    }
@-moz-document url-prefix() {
    .customcheckbx{
        visibility: block !important !important;
    }
} 
@supports (-moz-appearance:none) {
    .customcheckbx{
        visibility: block !important !important;
    }
}
.customcheckbx:before{
    border: 1px solid #2a980a;
    width: 21px;
    height: 23px;
    content: "";
    border-radius: 3px;
    visibility: visible;
    font-family: FontAwesome;
    font-size: 13px;
    display: flex;
    align-items: center;
    margin: -5px 0 0px 3px;
    justify-content: center;
    background: #fff;
    color: #fff;
}

.customcheckbx:checked[disabled]:before{
    border: 1px solid #2a980a;
    content: "\f00c";
    width: 19px;
    height: 19px;
    border-radius: 3px;
    visibility: visible;
    font-family: FontAwesome;
    font-size: 13px;
    display: flex;
    align-items: center;
    margin: -3px 0 0px -3px;
    justify-content: center;
    background: #2a980a;
    opacity:0.4;
    color: #fff;
}

.customcheckbx:[disabled]:before{
opacity:0.4;
}

.customcheckbx:checked:before{
    border: 1px solid #2a980a;
    content: "\f00c";
    width: 19px;
    height: 19px;
    border-radius: 3px;
    visibility: visible;
    font-family: FontAwesome;
    font-size: 13px;
    display: flex;
    align-items: center;
    margin: -3px 0 0px -3px;
    justify-content: center;
    background: #2a980a;
    opacity:1;
    color: #fff;
}

.useraction input[type="checkbox"]:disabled {
    opacity: 0.5; !important;
    cursor: no-drop !important;

}

.detailsblock h4:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 8px;
   border-color: transparent transparent  var(--bluebgcolor) transparent;
    left: 9px;
    top: 14px;
        transition: ease 0.5s;
}

.detailsblock.hiddenContent h4:after{
        transform: rotate(180deg);
}

.detailsblock .grid_action_icons .fa{
    border-radius: 4px;
    background: #f2f2f2;
    display: inline-block;
    padding: 5px;
    margin: 0 3px;
    cursor: pointer;
}

.detailsblock .grid_action_icons .fa:hover {
    background: var(--bluebgcolor);
    color: #fff !important;
}