@-ms-viewport{width:device-width;} 
@media screen and (min-width:180px) and (max-width:615px) {
  #comments-form textarea,#comments-form .grippie{max-width:98%!important;width:98%!important}
  form#user_mgr_form label,form#user_mgr_form input,form#user_mgr_form select{margin-bottom:5px}
}
@media screen and (min-width:180px) and (max-width:700px) {
  #searchmenu .ui-multiselect{display:none}
  #mod_search_searchword{width:95%}
#login_topmenu ul {margin: 0;}

.login_headerleft >a > span {display: block;margin-left: 85px;padding-top: 10px;}
.login_headerright{padding-top:0px}
#login_topmenu {margin-top: -32px;}
.homepage.guest_user #contentareainner .article_content {padding: 10px 15px;}
#row4 .panel {width: calc(100% - 30px);margin:20px 15px;float: none;}
#row4 {padding: 10px 0;}
}
@media screen and (min-width:700px) {
.colcontentCollapse{display:block!important}
}
@media screen and (min-width:616px) {
  #overlayformobile{display:none!important}
}
@media screen and (min-width:180px) and (max-width:767px){
  #sbox-window{border: 0!important;position: fixed;left: 2%!important;top: 2%!important;width: 96%!important;height: 96%!important;}
  div#sbox-content iframe {width: 100%!important; height: 100%!important;}
}

@media screen and (min-width:180px) and (max-width:590px){
  #searchmenu_outer{top:30px}
}
/*****for left show hide panels in downloads and config page********/
@media screen and (min-width:769px)  {
    #hp_uvwdocs,#sp_uvwdocs,#contentareainner #sp_adminsettings_panel,#contentareainner #hp_adminsettings_panel{display: none!important;}
    #col_adminsettings_panel{margin-left: 0!important;display:block!important;}
    div#adminsettings{margin-left: 250px!important;}
}
/**************for masonary************/
/**************************************/
@media screen and (max-width: 899px){
  div#masonry-container .item .item-inner{margin:10px}
.login_headerright {
    float: right;
    padding-top: 0px;
}
#topmenu #cssmenu #menu-button {
    padding: 10px;
}
  #jsMenu .jsMenuLft {
    display: none;
}
}
@media screen and (max-width: 700px){
  div#masonry-container .item{width:250px}
}
@media screen and (max-width: 450px){
  div#masonry-container .item{width:98%}
}
/**************************************************************************/
/*************************************New Style***********************************************/
/************************************************************************************************/
/******************material style************/
/**for all moblie layouts and small screens***/
@media screen and (max-width: 1024px) {
.sidebar-toggle-box{display:none}
}
@media (min-width: 1024px) {
  .u-vmenu > ul > li > a.showinmobile{display:none}
}

@media (max-width: 839px) {

  td.kcol-mid.kcol-ktopicicon {display: none;}
  #wrapper #Kunena table tr td{padding:10px}
  #wrapper #community-wrap .formtable td, #wrapper #community-wrap .admintable td, .add_folder table.adminformlist td{padding:10px 5px;word-wrap: break-word;}
  
}

@media screen and (max-width: 700px){
  h1{font-size:20px;line-height:22px;margin-bottom:20px;font-weight:400}
  h2{font-size:18px;line-height:20px;margin-bottom:15px;font-weight:400}
  h3{font-size:16px;line-height:18px;margin-bottom:20px;font-weight:500}
  h4{font-size:15px;line-height:16px;margin-bottom:15px;font-weight:400}
  h5{font-size:14px;line-height:15px;margin-bottom:15px;font-style:normal}
  h6{font-size:13px;line-height:15px;margin-bottom:15px;font-style:normal}
  h2.componentheading {margin: 5px 0 15px;}
  div,p{font-size:12px}
  /***treat below as h3***/
  #wrapper #community-wrap h2.app-box-title, .greymoduleheading,#wrapper #community-wrap .groups_extrainfo .cModule h3, #wrapper #community-wrap .events_extrainfo .cModule h3, #wrapper .group-main .cModule h3{font-size:16px;font-weight:500}

  #wrapper #community-wrap .newsfeed-content .cDetailList .avatarWrap {width: 90px;}
  #wrapper #community-wrap .newsfeed-content .cDetailList .avatarWrap.singlephotoWrap{width: 100%;}
  #wrapper #community-wrap #cFilterBar .filterOption, #wrapper .cFilterBar .filterOption{padding:0 5px}
  div#community-event-info .event_sidebar{position:relative}
  #wrapper #community-event-info .event-summary {margin-right: 0;}
  #wrapper #community-wrap div#user-info-button,#wrapper #community-wrap .profile_fields{float:left;width:100%;margin:0 0 10px 0;height:auto}
  /*#wrapper #community-wrap div#user-info-button > div{width:90px;float:left;    margin: 0 10px 10px 0;}
  #wrapper #community-wrap div#user-info-button .text{margin:0;text-align:center}
  #wrapper #community-wrap div#user-info-button .number{float: none;}
  #wrapper #community-wrap div#user-info-button .number:after{top: auto;right: 50%;bottom: -10px;content: "\f0d7";}*/
  #wrapper #community-wrap #cFilterBar .filterGroup#cFilterType_Filter {float: left;width: 100%;}
  #wrapper #community-wrap #showNearByEventsForm > * {margin-bottom: 5px;}

  .kcol-ktopicicon,.kcol-category-icon,.kcol-kcattopics,.kcol-kcatreplies,.kcol-ktopicreplies,.kcol-ktopicviews,.klist-actions .klist-actions-info-all,.kcol-ktopiclastpost{display: none;}
  #wrapper #Kunena div.message_avtar{float:none;}
  #wrapper #Kunena div.kpost-avatar {float: none;width: 75px;background: transparent;}
  #wrapper #Kunena div.message_content_outer{float: left;width: 100%;margin-left: 0;margin-right: 0;margin-top: -15px;}
  #wrapper #Kunena div.kmsgbody{width: 100%;padding: 0;margin:0}
  
  th.pollvotes.rightalign, td.pollvotes.rightalign {display: none;}
  .maintitledetails .noofvotes{display:inline-block}
  table#options_table,#cpmainwrapper table.jaaji.newpoll{width:98%;}
  #cpmainwrapper table.jaaji.newpoll td {float: left;width: 90%;min-width:90%;box-sizing: border-box;display: block;padding:10px 5%;border-left: 0;border-right: 0;}
  #cpmainwrapper table.jaaji.newpoll tr td:first-child{border:0}
  #cpmainwrapper table.jaaji.newpoll select,#cpmainwrapper table.jaaji.newpoll .forminput, #cpmainwrapper .forminput{max-width:90%}
  
  .mdl-layout__header-row #searchmenu{top:50px;left:0;background:#4AA9E9;width:100%;border-radius:0;position:absolute;padding:5px 10px;box-shadow:1px 0 3px rgba(0,0,0,.15);box-sizing:border-box}
  .addext_toolbar,.tools_icon{display:none}
  #areainner{padding:0}
  .mdl-tabs__tab{padding:0 10px}
#login_topmenu {margin-top: 5px;}
#login_header_inner{height: 90px}
  /****temporary fixes****/
  #cFeatured.cPhotos,#cFeatured.cVids,h3.cFeaturedcVids,h3.cFeaturedcPhotos{display:none}
  #wrapper #community-wrap .formtable td, #wrapper #community-wrap .admintable td{padding:5px 10px}
  #community-wrap .profile_main .infoGroup#count_1{width: 100%;margin:0;}
.width33 {
    width: 100%;
    float: left;
}
}
@media screen and (max-width: 600px){
  #wrapper #community-wrap div.profile_right{width:100%;float:none}
  #wrapper #community-wrap div.profile_left,#community-wrap .profile_fieldsinfo{margin-left:0}
  #wrapper #community-wrap #profile-edit .inputbox.validate-custom-date{width:45px;}
  #wrapper #community-wrap #profile-edit select.validate-custom-date{width:90px;}
  #community-wrap .infoGroup{width:50%;margin:0 0 10px 0}
  #wrapper #community-wrap .formtable{border:0}
  #wrapper #community-wrap .formtable td{float:left;width:100%;display:block;box-sizing: border-box;border:0;    min-width: 100%;padding:10px}
  #wrapper #community-wrap .formtable td.key {width: 25%;border-top: 1px solid #ddd;}
  .add_folder table.adminformlist td:first-child{width:27%;}
  #adminsettings table.table_blue{table-layout:fixed}
  #adminsettings form .filter>span{display:block;float:none!important;width:100%;margin:5px 0}
  #adminsettings form .filter>span a{float:none;display:inline-block;margin:5px 5px 0 0;}
  #adminsettings form .filter label{display:block;margin:5px 0}
  #adminsettings form#user_mgr_form,#adminsettings form#tags_mgr_form{overflow-x:scroll;}
  #adminsettings table#user_groups_tbl,#adminsettings form#tags_mgr_form table#tags_mgr_tbl{table-layout:auto;}

  #cWindow .cWindowForm td{float:left;width:100%}
  
  #uvwD #mainarea .download_actions.buttons>a{margin-bottom:5px}
  #uvwD #mainarea .docicon,#uvwD #mainarea .docfolder,#uvwD #mainarea .docsize,#uvwD #mainarea .docaction,.download_actions.buttons>a span,.detailpage .filtersubmenu a>span{display: none;}
  #uvwD #mainarea .download_actions.buttons>a.doc_delete{display:none}
  .download_actions.buttons>a:before,.detailpage .filtersubmenu a i{margin:0}
  #wrapper .detailpage .filtersubmenu a{border:0}
  .folder_title a{word-break: break-all;}
  
  .nav-links>div>div.floatr {margin-top: 10px;float: left;clear: both;}
  form.workflowform input[type="file"]{width: 100%}
  #login_topmenu {margin-top: 5px;}
  .guest_user.page_com_users div#contentareainner{width:90%}
  #apply_leave_form table.table_blue td:first-child {display: none;}
  #apply_leave_form table.table_blue td {width: 100%;display: block;margin-bottom: 7px;}
  #row4 .panel h3.widget-h {font-size: 18px;padding-bottom: 10px;margin-bottom: 0;}
  #cs_banner .swiper-button-next,#cs_banner .swiper-button-prev {background-size: 50px;width: 21px;background-color: rgba(255, 255, 255, 0.58);height: 25px;}
}
@media screen and (max-width: 499px){
  #community-wrap .cTabsBar ul li a,#wrapper .ui-tabs .ui-tabs-nav li a{padding:5px}
  #wrapper #community-wrap .group-left,#wrapper #community-wrap .event-left {float: none;width: 100%;}
  #wrapper #community-wrap .group-top .group-main,#wrapper #community-wrap .event-top .event-main{margin-left:0;}
  #wrapper #community-wrap #community-group-info, #wrapper #community-wrap #community-event-info{margin-left:0;margin-top: 10px;}
  #wrapper #community-wrap .group-avatar,#wrapper #community-wrap .event-avatar,#wrapper #community-wrap .profile-avatar{float:none;width:100%;text-align:center}
  /****temporary fixes****/
  form#newalbum td.key {width: 80px!important;}
  #wrapper #community-wrap .videorow div#cFilterBar,#wrapper #community-groups-wrap div#cFilterBar{    margin-right: 110px;    float: none;    width: auto;    padding-top: 0;}
  iframe.youtube-player {    width: 100% !important;    height: auto !important;}
  table#options_table .forminput{max-width:150px} /*for add poll form*/
#wrapper #community-wrap .groups_extrainfo, #wrapper #community-wrap .events_extrainfo,#wrapper #community-wrap .groups_extrainfo .cModule, #wrapper #community-wrap .events_extrainfo .cModule{margin-right:0;width: 100%;}
table.fc-header tr {width: 100%;display: block;}
td.fc-header-left {float: left;display: block;margin-top: 30px;}
td.fc-header-center {display: block;width: 100%;float: none;margin-bottom: 20px;}
td.fc-header-right {float: right;display: block;width: 50%;margin-top: -25px;}
}
@media screen and (max-width: 499px){
  #center2 .moduletable.mod_todo > .module_body,#center2 .moduletable.mod_minical .module_body{margin-right:0}
  .mdl-menu.twocolmenu{min-width:initial}
  .mdl-menu.twocolmenu li{width:100%}  
}
/***********HRMS template specific css***********/
@media screen and (min-width:900px) {
  #leftmenu{-webkit-transform: translateX(0px);-ms-transform: translateX(0px);transform: translateX(0px); }
}
/********for min height my profile dropdown*******/
@media (max-height:450px)  {
  #signin_menu{width: 96%;padding: 1%;margin-left: 1%;}
  #signin_menu ul.menu li{width: 45%;    float: left;}
}
/***************popup responsive sbox etc - forced full width*************/
@media screen and (min-width:180px) and (max-width:768px) {
  #sbox-overlay{max-width:100%}
  div#sbox-content iframe {width: 100%!important; height: 100%!important;}
  #sbox-window{border: 0!important;position: fixed;left: 2%!important;top: 2%!important;width: 96%!important;height: 96%!important;}
  .fc-sun.ui-widget-content.fc-first > div {height: auto!important;}
  .login_headerleft >a img { max-height: 77px; margin-bottom: 5px; margin-top: 5px;}
}

@media screen and (max-width: 899px){
  div#mobnav-btn{display:block}
  #jsMenu .jsMenuBar{display:none;position: absolute;top:40px;left: 0;width: 100%;}
  #jsMenu .jsMenuBar ul li {display: block;width: 100%;}
  #jsMenu .jsMenuBar li:hover ul {display: none!important;}
  #jsMenu .jsMenuBar li ul{position: static!important;display: none!important;width: 90%;margin-left: 5%;}
  #jsMenu .jsMenuBar li.xpopdrop ul {display: block!important;}
  .mob_arrow{position:absolute;top:8px;right:10px;cursor:pointer;-webkit-transition:-webkit-transform .2s ease,opacity .2s ease;transition:transform .2s ease,opacity .2s ease;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);width:30px;height:20px;background:url(../images/menuarrow.png) 50% 50% no-repeat}
  .xpopdrop .mob_arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
  
  #headerleft{width: 150px;padding: 0 10px 0 40px;}
  #leftmenu{width:200px;}
  #leftmenu > div{width:100%}
  #logo{text-align:left}
  #wrapper{margin: 0;padding: 10px;}
  #contentarea.full >div{margin:0}
  .sidebar-toggle-box{display:block;}
  span.accordion-btn-wrap i.ukicon {padding: 15px 10px;}
  .helpmobile{display:inline;} 
  #rightsidebar{display:none}
  #wrapper #rightcolumn >div {    margin-right: 0;}
  #area #rightcolumn .moduletable {margin-right:0;}
  #searchmenu_outer{margin: 0;padding:0;width: 100%;position: absolute;top:45px;left: 0;}
  #searchmenu div.search {    margin: 0 ;}
  #searchmenu{margin:0;border:0}
/*  #jsMenu .jsMenuRgt .search_icon {display: block;}*/
  #jsMenu .jsMenuIcon>div, #jsMenu .jsMenuRgt .addext_toolbar_div{    padding: 5px 7px;}
  #jsMenu .jsMenuIcon div{margin:0}
  .user_avatar img{    width: 40px; height: 40px;}
  #jsMenu .jsMenuBar li:hover ul{padding-top:0}
}
@media screen and (min-width:180px) and (max-width:768px){
  #footer{display:none}
  #wrapper #community-wrap .activitystrm{max-height: 500px;overflow-y: auto;margin: 15px 0 0;}
  #community-wrap div#recent-activities{margin-bottom:0}
  .panel.moduletable{width: 100%}
  .panel_body{margin-right: 10px}
  #contentarea.lrboth,#contentarea.lonly,#contentarea.ronly {width: 100%;}
  #contentarea.lonly >div, #contentarea.ronly >div{margin-right:0}
  #colleft,#rightcolumn {width: 100%;margin-top: 20px;}
  #contentarea, #contentarea > div,#contentarea.full >div {margin-right: 0;}
  #homeslider .itemimage {float: left;width: 100%;border: 0;text-align: center;}
  #homeslider .titlecontent {margin-left:0;}
  body #community-wrap .process-form ~ .position-top{margin-top: 0}
  #topmenu {width: 145px;}
  .loggedin_user #language_mod{margin:0;}
  #hr_logout .user_name{display: none;}
}
@media screen and (min-width:180px) and (max-width:590px){
  div#mobnav-btn{padding:5px}
  #header{padding:0}
  #header_inner {height: 85px;display: block;}
  #headerleft{width:100%;padding:0;display: block;height: 50px;}
  .sidebar-toggle-box i {line-height: 45px;}
  #cssmenu #menu-button{padding: 10px;}
  #headerright{margin:0}
  #logo{text-align:center;padding: 5px 0;}
  #loginmenu{float:left;width:100%}
  #topmainmenu{float:left;margin:0;width: 100%;}
  #topmenu {margin: 0;}
  #jsMenu .jsMenuBar{top:30px}
  #jsMenu .jsMenuRgt{margin-top: 3px;}
/*  #headerright_inner{background: rgba(255,255,255,0.1);}*/
  .rightnav{margin-top: -50px;}
  .loggedin_user .rightnav{margin: 0}
  .user_avatar img.cAvatar{width: 30px;height: 30px;}
  #welcome_outer{    margin: -10px -10px 10px -10px;padding: 10px;}
  .welcometext{font-size:18px;margin:0}
  #searchmenu_outer{top:40px}
  #leftmenu{top: 80px;}
  #newextnsndiv.appenabled,#newextnsndiv .menutoparrow{}
  div.moduletable, div.module, div.module_menu {margin-bottom: 15px;}
  a.appbtn{margin-left: 10px;}
  a.button.visitingbtn{padding: 0 10px;}
}
@media screen and (min-width:180px) and (max-width:390px){

#login_topmenu li a{padding: 10px 5px;}
a.appbtn {width: 80px;margin-top: 5px;}
}