/*
	Responsive css 
*/

/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 1200px)
=====================================================================*/
@media only screen and (min-width : 0) and (max-width : 1200px) {
	.third_planinner .savefilter{
		float: none;
	}
	
	.container {
		width: 97% !important;
		max-width: 97% !important;
	}
}

/*====================================================================
@media only screen and (min-width : 1025px) and (max-width : 1199px)
=====================================================================*/
@media only screen and (min-width : 1025px) and (max-width : 1199px) {
	.container{
		width:1025px;
	}
	.form-group .chk-wrap label {
		margin: 0 15px 0 0; 
	}
	
	.spotaward img {
		width: 36px;
	}

	#header .plan_slider {
		margin-bottom:10px;
		max-height: 127px;
		min-height: auto;
		position: relative;
		margin: 0 auto;
		left: 0;
		right: 0;
		max-width: 450px;
		overflow:hidden;
	}
	
	.plan_slider a i {
	  bottom: -3px;
	}
	
	.plan_slider a {
	  margin-bottom: 10px;
	}
}

/*====================================================================
@media only screen and (min-width : 768px) and (max-width : 1024px)
=====================================================================*/
@media only screen and (min-width : 768px) and (max-width : 1024px) {
	.container{
		width:768px;
	}
	.content-wrap .our-mission{
		font-size: 25px;
	}
	.dept-goals .goal-list li,
	.login-wrap .title, .dept-goals .title{
		font-size: 20px;
		line-height: 26px;
	}
	.dept-goals .sub-txt{
		font-size: 19px;
		margin-bottom: 15px;
	}
	.login-wrap .period{
		font-size:14px;
	}
	.login-wrap .start-btn{
		font-size:18px;
	}
	.content-wrap .login-wrap{
		padding: 20px 25px;
	}
	.lform-wrap .fpass-link{
		font-size: 14px;
	}
	.rating .date{
		width: 55%;
	}
	.rating .rate{
		min-width: 18px;
	}
	.form-group .chk-wrap label {
		margin: 0px 10px 0 0;
	}
	
	#header .plan_slider {
		margin-bottom:10px;
		max-height: 127px;
		min-height: auto;
		position: relative;
		margin: 0 auto;
		left: 0;
		right: 0;
		max-width: 450px;
		overflow:hidden;
	}
	
	#header-menu ul li a {
		font-size: 14px;
		padding: 10px 8px 10px 8px;
	}
	
	.plan_slider a {
		display: inline-block;
		margin-bottom:10px;
	}
	
	div.editappraisal {
		position: unset;
		text-align:right;
	}
	
	.plan_slider a i {
	  bottom: -3px;
	}
	
	.viewsection h6{
		font-size: 20px;
	}
	
	.plan-header ul.ele-list {
		margin-left: 0;
		padding-left: 28px;
	}
}

/*====================================================================
@media only screen and (min-width : 768px) and (max-width : 981px)
=====================================================================*/
@media only screen and (min-width : 768px) and (max-width : 981px) {
	.have_question h6{
		font-size:17px;
	}
	
	.have_question a.fcell{
		font-size:15px;
	}
}

/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 995px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 995px) {
	.width55 {
		width:65.5% !important;
	}
	
	#ourHolder{
		text-align:center;
	}
}

/*====================================================================
@media only screen and (min-width : 862px) and (max-width : 886px)
=====================================================================*/
@media only screen and (min-width : 862px) and (max-width : 886px) {
	.main_section h4,
	.viewsection h6{
		font-size: 21px;
	}
}

/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 862px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 862px) {
	.awardlistul{
		text-align:center;
	}
	
	.main_section h4,
	.viewsection h6{
		font-size: 21px;
	}
}

/*====================================================================
@media only screen and (min-width : 500px) and (max-width : 767px)
=====================================================================*/
@media only screen and (min-width : 500px) and (max-width : 767px) {
	.container{
		max-width:95%;
	}
	.content-wrap .our-mission{
		font-size: 22px;
		line-height: 32px;
	}
	.login-wrap .start-btn,
	.dept-goals .goal-list li,
	.login-wrap .title, .dept-goals .title, .welcome .title{
		font-size: 18px;
	}
	.dept-goals .sub-txt{
		font-size: 17px;
		margin-bottom: 10px;
		line-height: 24px;
	}
	.login-wrap .period{
		font-size:14px;
	}
	.content-wrap .login-wrap{
		margin-top: 20px;
	}
	.form-group .chk-wrap label {
		margin: 0 13px 0 0;
	}
	.rating-tbl .goal_row .rt_cell{
		text-align:center;
		width: 100%;
	}
	.rlink-wrap  .rt-link{
		text-align: left;
		padding-left: 10px;
	}
	.nxt-wrap .plink{
		margin: 0;
		position: absolute;
		top: -25px;
		white-space: nowrap;
		left: 0;
		right: 15px;
		font-size: 14px;
	}
	.dept-goals .goal-list li{
		padding-left:28px;
	}
	.dept-goals .goal-list li::before{
		left:0;
		font-size:18px;
	}
	.rt-link .selected{
		right: 8px;
	}
	
	.rlink-wrap  .rt-link{
		text-align: left;
		padding-left: 10px;
	}
	
	.spot_popup img.simage,
	#header .spotaward{
		position: unset !important;
	}
	
	#header .plan_slider {
		margin-bottom:10px;
		max-height: 127px;
		min-height: auto;
		position: relative;
		margin: 0 auto;
		left: 0;
		right: 0;
		max-width: 450px;
		overflow:hidden;
	}
	
	#header-menu ul li a {
		font-size: 14px;
		padding: 10px 8px 10px 8px;
	}
	
	.plan_slider a {
		display: inline-block;
		margin-bottom:10px;
	}
	
	div.editappraisal {
		position: unset;
		text-align:right;
	}
	
	.rating .rt-wrap{
		border-bottom: 1px solid #000;
	}
	
	.bottom-section{
		border-bottom:0!important;
		border-top:0!important;
	}
	
	#header .emp_info{
		font-size: 16px;
	}
	
	.third_planinner .dleftsection {
		width: 100%;
	}
	
	.midsection,
	.yearsection{
		padding-top: 44px;
	}
	
	.plan_slider a i {
	  bottom: -3px;
	}
	
	div.spotlinks {
	  padding-top: 6px;
	  padding-bottom: 15px;
	  text-align: center;
	}
	
	.main_section h4,
	.viewsection h6{
		margin-bottom: 0;
	}
	
	.main_section h4,
	.viewsection h6{
		font-size: 17px;
	}
	
	.plan-ready .activebar img.checkmark {
	  margin: 0 auto;
	}
	
	.messagesection > div, .imgsection > div {
	  padding: 0 15px;
	}
	
	#header a.caward, .hslinks span {
      font-size: 13px !important;
    }
    
    .twosection div{
        text-align:center !important;
    }
	
	.section-title .note {
	  margin-bottom: 8px;
	}
	
	.help .have_question {
	  position: unset;
	}
	
	.spotlinks .spot-link {
	  text-align: center;
	}
}

/*====================================================================
@media only screen and (min-width : 500px) and (max-width : 575px)
=====================================================================*/
@media only screen and (min-width : 500px) and (max-width : 575px) {
	#header .emp_info{
		display:none;
	}
	
	.asection .hslinks{
		margin-right:0;
		margin-top: 14px;
		padding-right: 46px;
	}
	.asection .dropsection {
		bottom: 38px;
	}
	
	.rside .slinks {
	  float: none;
	  max-width: 168px;
	  margin: 0 auto;
	}
	
	.main_section h4,
	.viewsection h6{
		text-align: center !important;
	}
	
	.slick-slide.slick-current{
	    padding-right:0 !important;
	}
}
	
/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 580px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 580px) {
	.nxt-wrap .save_btn{
		margin-top:2px
	}
	
	.last_update{
		margin-bottom:2px
	}
	
	.rlink-wrap  .rt-link{
		text-align: left;
		padding-left: 5px;
		font-size:15px;
	}
	
	.r-tab-wrap .rlink-wrap li {
		width: 72px;
	}
	
	.rt-link .selected, .rt-link .unselected {
		line-height: 42px;
		right: 4px;
	}
	
	#header-menu ul li a {
		font-size: 14px;
		padding: 10px 8px 10px 8px;
	}
	
	#header .plan_slider {
		margin-bottom:10px;
		width:100%;
		max-height: 125px;
		min-height: auto;
		position: relative;
		margin: 0 auto;
		left: 0;
		right: 0;
		max-width: 450px;
		overflow:hidden;
	}
	
	.plan_slider a {
		display: inline-block;
		margin-bottom:10px;
	}
	
	#pmenu .row>div{
		width:50% !important;
	}
	
	.third_planinner .dleftsection {
		width: 100%;
	}
	
	.claim h4 {
	  font-size: 24px;
	  text-align: center;
	}
	
	.claim .card>label{
		text-align: center;
	}
	
	.main_section h4,
	.viewsection h6{
		font-size: 17px;
	}
	
	.twosection div{
        text-align:center !important;
    }
	
	.asection .hslinks{
		margin-right:0;
		margin-top: 14px;
		padding-right: 46px;
	}
	
	.help .have_question {
	  position: unset;
	}
}

/*====================================================================
@media only screen and (min-width : 576px) and (max-width : 642px)
=====================================================================*/
@media only screen and (min-width : 576px) and (max-width : 642px) {
	.claim_inner .claim_item {
		margin-right: 14px;
	}
}

/*====================================================================
@media only screen and (min-width : 576px) and (max-width : 627px)
=====================================================================*/
@media only screen and (min-width : 576px) and (max-width : 627px) {
	.team_plan .teamsection{
		width: 100%;
		margin-right: 0;
	}
	
	#header a.caward, .hslinks span {
		font-size: 13px !important;
	}
	
	.plan-ready .activebar img.checkmark {
	  margin: 0 auto;
	}
	
	.messagesection > div, .imgsection > div {
	  padding: 0 15px;
	}
	
	.claim_inner .claim_item {
	  display:block;
	  margin: 0 auto;
	  margin-bottom: 24px;
	}
	
	.claim_inner .claim_item:last-child {
	  margin-right: auto;
	}
}

/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 575px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 575px) {
	.team_plan .teamsection{
		width: 100%;
		margin-right: 0;
	}
	
	#header-menu{
		position:unset;
	}
	
	.third_planinner .savefilter, .third_planinner .select2-container {
		width: 100% !important;
	}
	
	.savefilter select {
		margin-left: 0;
		width: 160px;
		font-size:14px;
		height: 36px;
	}
	
	.rside .slinks {
	  float: none;
	  max-width: 168px;
	  margin: 0 auto;
	}
	
	div.spotlinks {
	  padding-top: 6px;
	  padding-bottom: 15px;
	  text-align: center;
	}
	
	.spotlinks .spot-link {
	  text-align: center;
	}
	
	.plan-header .plan-year{
		border-right:0;
		padding-right: 0;
	}
	
	.plan-header .htitle {
		width: 100%;
	}
	
	.plan-header .elementsection {
	  text-align: center;
	}
	
	.plan-header ul.ele-list li span {
	  display: none;
	}
	
	.plan-header ul.ele-list li {
	  width: 100%;
	}
	
	.plan-header .plan-year {
	  margin-left: 0;
	}
	
	div.editappraisal {
	  text-align: center !important;
	}
	
	.startplan button{
		margin-left: -8px;
	}
	
	.plan-ready .activebar img.checkmark {
	  margin: 0 auto;
	}
	
	.form-group .image-section{
		position: unset !important;
		text-align: left;
	}
	
	.asection .pmenu {
	  margin-top: 38px;
	}
	
	.plan-ready .activebar,
	.activebar {
	  padding-bottom: 8px;
	}
	
	.messagesection > div, .imgsection > div {
	  padding: 0 15px;
	}
	
	.content-wrap .review_wrap{
	  padding: 20px 14px;
	}
	
	.claim_inner .claim_item {
	  display:block;
	  margin: 0 auto;
	  margin-bottom: 24px;
	}
	
	.claim_inner .claim_item:last-child {
	  margin-right: auto;
	}
	
	.plans-wrap .welcome,
	.plans-wrap .welcome .title,
	.main_section h4,
	.viewsection h6{
		text-align:center !important;
	}
	
	.slick-slide.slick-current{
	    padding-right:0 !important;
	}
	
	h3.widget-title{
		font-size: 14px;
	}
	
	a.getstarted {
	  margin: auto;
	}
}

/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 499px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 499px) {
	.container{
		max-width:100%;
	}
	.content-wrap .our-mission{
		font-size: 20px;
		line-height: 30px;
		letter-spacing: 0.3px;
	}
	.login-wrap .start-btn,
	.dept-goals .goal-list li,
	.login-wrap .title, .dept-goals .title, .welcome .title{
		font-size: 15px;
	}
	.dept-goals .sub-txt{
		font-size: 17px;
		margin-bottom: 10px;
		line-height: 24px;
	}
	.login-wrap .period{
		font-size:14px;
	}
	.content-wrap .login-wrap{
		margin-top: 20px;
		padding:20px 30px;
	}
	.content-wrap .fp-wrap{
		padding:20px 30px;
	}
	.lform-wrap .fpass-link{
		font-size:15px;
	}
	.rating .date{
		width: 55%;
	}
	.rating .rate{
		min-width: 18px;
	}
	#footer{
		font-size:16px;
	}
	.form-group .chk-wrap label {
		margin: 0 10px 0 0;
	}
	.rating-tbl .goal_row .rt_cell{
		text-align:center;
	}
	.rt-link .selected{
		right: 8px;
	}
	.rating-wrap .title {
		font-size: 20px;
	}
	#header .emp_info{
		display:none;
	}
	.asection .hslinks{
		margin-right:0;
		margin-top: 14px;
	}
	.asection .dropsection {
		bottom: 38px;
	}
	.nxt-wrap .plink{
		margin: 0;
		position: absolute;
		top: -25px;
		white-space: nowrap;
		left: -50px;
		right: 15px;
		font-size: 14px;
	}
	.tinymce-mobile-fullscreen-maximized{
		height:100vh!important;
	}
	.tnc-wrap .tnc-label{
		position: relative;	
		padding-top: 30px;
	}
	.tnc-wrap .tnc-label .bootstrap-switch{
		z-index: -1;
		position: absolute;
		top: 0;
		right: 0;
	}
	.dept-goals .section-title {
	  font-size: 17px;
	}
	.dept-goals .goal-list li{
		padding-left:0;
	}
	.dept-goals .goal-list li::before{
		left:0;
		font-size:18px;
	}
	
	.rlink-wrap  .rt-link{
		text-align: left;
		padding-left: 10px;
		font-size:20px;
	}
	
	.rt-link .selected, .rt-link .unselected {
		line-height: 42px;
	}
	
	.spot_popup img.simage,
	#header .spotaward,
	.form-group .image-section{
		position: unset !important;
	}
	
	#header .plan_slider {
		margin-bottom:10px;
		max-height: 127px;
		min-height: auto;
		position: relative;
		margin: 0 auto;
		left: 0;
		right: 0;
		max-width: 450px;
		overflow:hidden;
	}
	
	#header-menu ul li a {
		font-size: 14px;
		padding: 10px 8px 10px 8px;
	}
	
	.spotaward a {
		display: inline-block;
		margin-bottom:10px;
	}
	
	div.editappraisal {
		position: unset;
		text-align:right;
	}
	
	.rating .rt-wrap{
		border-bottom: 1px solid #000;
	}
	
	.bottom-section{
		border-bottom:0!important;
		border-top:0!important;
	}
	
	.r-tab-wrap .rlink-wrap li {
		width: 100%;
	}
	
	.third_planinner .savefilter,
	.third_planinner .select2-container{
		width: 100% !important;
	}
	
	.savefilter select {
		margin-left: 0;
		width: 160px;
		font-size:14px;
		height: 36px;
	}
	
	button.bottompart {
		position: absolute;
		right: 34px;
	}
	
	.goalsection a.plan_comment {
		top: 50px !important;
		margin-top: 10px;
	}
	
	.goalsection a.ceocomment{
		margin-right: 0;
		top: 0 !important;
	}
	
	.goalsection {
		padding-top: 28px;
	}
	
	.midsection,
	.yearsection{
		padding-top: 44px;
	}
	
	#comment{
		width:100%;
	}
	
	.plan_slider a i {
	  bottom: -3px;
	}
	
	.spotlinks .spot-link,
	.main_section h4,
	.viewsection h6{
	  text-align: center !important;
	}
	
	.main_section h4{
		margin-bottom: 0;
	}
	
	.plan-ready .activebar img.checkmark {
	  margin: 0 auto;
	}
	
	#authenticated_form .link_wrap>div{
		width:100%;
		text-align: center !important;
	}
	
	#atitle h2 {
	  font-size: 20px;
	}
}	

/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 477px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 477px) {
	a.plan_comment {
		top: 50px !important;
	}
	
	a.ceocomment{
		margin-right: 0;
		top: 0 !important;
	}
	
	#atitle h2 {
	  font-size: 20px;
	}
	
	.rating_slide .ele_content{
		overflow:scroll;
	}
	
	h4.pagetitle{
	    font-size: 20px;
	}
}

/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 377px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 377px) {
	.plan-ready .plan_comment {
		top: 80px;
	}
}

/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 458px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 458px) {
	.midsection, .yearsection {
		padding-top: 44px;
	}
	
	.viewsection h6 {
	  font-size: 20px;
	}
}

/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 320px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 360px) {
	.section-title {
	  padding: 5px 6px 5px 5px;
	}
	
	.rt-link .selected, .rt-link .unselected {
		line-height: 42px;
		right: 2px;
		font-size: 16px;
	}
	
	#header .plan_slider {
		margin-bottom:10px;
		max-height: 127px;
		min-height: auto;
		position: relative;
		margin: 0 auto;
		left: 0;
		right: 0;
		max-width: 450px;
		overflow:hidden;
	}
	
	#header-menu ul li a {
		font-size: 14px;
		padding: 10px 8px 10px 8px;
	}
	
	.spotaward a {
		display: inline-block;
		margin-bottom:10px;
	}
	
	#header a.caward, .hslinks span {
		font-size: 13px !important;
	}
	
	#pmenu .row>div{
		width:50% !important;
	}
	
	#atitle h2 {
	  font-size: 15px;
	}
}
/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 436px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 436px){
	.container {
	  width: 99% !important;
	  max-width: 99%;
	}

	#header a.caward, .hslinks span {
	  font-size: 12px !important;
	}
	
	.rplan_slider  h6{
		font-size: 20px;
	}
	
	ul#report_navigation li a {
	  font-size: 15px;
	  line-height: 35px;
	}
	
	.plan_popup .popup .popup_cont{
		width: 92%;
		margin: 0 auto;
	}
	
	.plan_popup .buttonsection {
		width:100%;
		text-align:center
	}
	
	.plan_popup .popup .popup_cont .link-wrap{
		text-align:center
	}
	
	.plan_popup .m-r-30{
		margin-right:15px;
	}
	
	#atitle h2 {
	  font-size: 17px;
	}
	
	.dept-goals .section-title {
	  font-size: 14px;
	}
}

/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 338px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 338px){
	#header a.caward, .hslinks span {
	  font-size: 11px !important;
	}
	
	.claim h4 {
	  font-size: 19px;
	  text-align: center;
	}
	
	.claim .card>label{
		text-align: center;
	}
	
	.content-wrap .card{
	  padding: 15px 10px;
	}
	
	.content-wrap .card{
	  padding: 15px 10px;
	}
	
	.profile .card{
	  padding: 15px 15px !important;
	}
	
	#comment h4 {
      font-size: 20px;
    }
	
	.plan_readycomment {
		top: 50px !important;
	}
}

/*====================================================================
@media only screen and (min-width : 0px) and (max-width : 833px)
=====================================================================*/
@media only screen and (min-width : 0px) and (max-width : 833px){
	.welcome .video-wrap,
	.welcome .video-wrap a{
	  font-size: 14px;
	}
}

@media (max-width: 531px) {
    .plan-list table {
        width: 100%; /* Full width for the table */
        border-collapse: collapse; /* Collapse borders */
    }

    .plan-list tr {
        display: flex; /* Use flexbox for the row */
        flex-wrap: wrap; /* Allow wrapping */
    }

    .plan-list td,
	.plan-list th{
        flex: 1; /* Each cell takes equal space */
        padding: 10px; /* Padding for cells */
        box-sizing: border-box; /* Include padding in width calculations */
    }
	
	.plan-list td:nth-last-child(2) {
        flex: 80%; /* More width for the second-to-last column */
        order: 1; /* Move it to the end */
		text-align: left;
    }

    /* Style for the last column */
    .plan-list td:last-child {
        flex: 10%; /* Less width for the last column */
        order: 2; /* Keep it after the second-to-last column */
		text-align: left;
    }

    /* Style for other columns */
    .plan-list td:not(:nth-last-child(-n+2)),
    .plan-list th:not(:nth-last-child(-n+2)) {
        order: 0; /* Keep these cells before the last two */
        width: calc(100% / 3); /* Adjust based on the number of columns */
    }
	
	.plan-list thead th:nth-last-child(-n+2) {
        display: none; /* Hide last two header cells */
    }
	
	.content-wrap .content_area{
		padding-left:8px;
		padding-right:8px;
	}
}