html {
  box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.user-detail{font-size:14px;}
.container:after, .row:after {content:"";clear:both;display:block;}
 .container {
    max-width: 1200px;
    height:auto;
    margin:auto;
    width:100%;
    padding:0!important;
}  
 .clearboth{clear:both;}
a {
    font-size: 14px;
    text-decoration: none;
    color: #0072ce;
}
a:hover {
    text-decoration: underline;
}
p{margin:5px 0;}
input[type=text], select, textarea{   
    width:auto;
    height:30px;
    border-radius:5px;
    border:1px solid #fff;
    font-size:14px;
    padding-left:8px;
    border: solid 1px #e1e1e1;
}
input[type=file] {border:0;}

/*-------------------font---------------*/
.tx_red14 { 
	font-size: 14px;
	font-weight: normal;
	color: #ff6767;
	
	}
.tx_red16 { 
	font-size: 16px;
	font-weight: normal;
	color: #ff6767;
	
	}
.tx_green16 { 
	font-size: 16px;
	font-weight: normal;
	color: #32bc02;
}
.tx_gray14 { 
	font-size: 14px;
	font-weight: normal;
	color: #c0c0c0;

}
.tx_black14 { 
	font-size: 14px;
	font-weight: normal;
	color: #2c2c2c;
}

.tx_black16 { 
	font-size: 16px;
	font-weight: normal;
	color: #2c2c2c;
}

.tx_black18 { 
	font-size: 18px;
	font-weight: normal;
	color: #2c2c2c;
}

.tx_white14 { 
	font-size: 14px;
	font-weight: normal;
	color: #fff;
}

.tx_white16 { 
	font-size: 16px;
	font-weight: normal;
	color: #fff;
}

.tx_white18 { 
	font-size: 18px;
	font-weight: normal;
	color: #fff;
}

.tx_white22 { 
	font-size: 22px;
	font-weight: normal;
	color: #fff;
}

.tx_ToppicPortol { 
	font-size: 30px;
	font-weight: normal;
	color: #fff;
}

.tx_ToppicBlue22 { 
	font-size: 22px;
	font-weight: normal;
	color: #0072ce;
}
.tx_blue14 {
	font-size: 14px;
	font-weight: normal;
	color: #0072ce;line-height: 18px;
}

.tx_blue16 {
	font-size: 16px;
	font-weight: normal;
	color: #0072ce;line-height: 18px;
}

.breadcrumb a{font-weight:bold;color:#000}
.breadcrumb span{color:#0071CD}
ul.breadcrumb {list-style: none;padding:2px 0;margin-bottom:0;background-color:#fff; }
ul.breadcrumb li {/*display: inline;*/ float:left}
ul.breadcrumb li span {padding:0 2px 0 5px;}

.header-top {height:70px;width:100%;}
.logo {float:left;}
.logo:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 70px;
}
.logo img {vertical-align: middle;display: inline-block;}
.center {text-align:center;}
.text-right{text-align:right;}
.text-left{text-align:left;}
.user-profile {/*width:320px;*/float:right;/*padding-top:5px;*/}
.img-user {/*float:left;margin-right:12px*/     width: 70px;    display: inline-block;    text-align: center;    height: 65px;    overflow: hidden;float:left}
.img-user img{border-radius:5%;}
.user-detail {/*float:left;*/padding-right:20px;display:inline-block;vertical-align: super;padding-top:5px;}
    .user-detail p {  margin:0;line-height:20px; clear:both }
    .user-detail .user-email {float:left;padding-right:10px;}
    .user-menu img.infoBtn {margin-top:-5px;}
	ul.infoMenu{list-style:none; padding:0; margin:0; float:left; display:block;}
	ul.infoMenu > li{padding:0; margin:0; float:left; display:block; width:100%;}
	ul.infoMenu > li > a{display:block; font-size:12px; height:35px;float:left; width:100%;color: #000}
    ul.infoMenu > li > a:hover{display:block; font-size:12px; height:35px;float:left; width:100%;color: #0072ce}
    
	ul.infoMenu > li > a > span{display:block;float:left;}
	ul.infoMenu > li > a > span > span{display:block;float:left;padding-top:8px;}
	ul.infoMenu > li > a > span > img{display:block;float:left;padding:5px;}

    .bubble_wrapper{height:auto; position:relative;z-index:1; /*left:calc(100% - 170px);*/ top:65px; display:block; padding-top:20px; overflow:hidden;    float: right;
    right: 5px;}
    .box-bububble{  max-width: 1200px;   position: absolute;  width:100%;    height: 0px;}
    .info_bubble.show_bubble{margin-top:0px; opacity:1;}

    .user-menu {
    position: relative;
    z-index: 5;
}

.info_bubble {
margin-top:-250px;
opacity:0;
position: relative;
width: 150px;
height: auto;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #dadada solid 1px;
float:left;
transition: all 0.5s;

}

.info_bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 15px;
border-color: #fff transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 65px;
}

.info_bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 15px;
border-color: #dadada transparent;
display: block;
width: 0;
z-index: 0;
top: -16px;
left: 65px;
}

.page-title {background-image: url(../../images/Portal_bgMenu_02.jpg);}
.page-title p {margin:0px;padding:5px 0;font-size: 30px;font-weight: normal;color: #fff;}

footer {border-top:1px solid #dadada;padding:2px 0px;line-height:25px;margin-top: 10px;}

.top-filter-wrapper {background-color:rgb(142, 210, 240);border-bottom:1px solid #6dafcf;border-top:1px solid #6dafcf;height:auto;width:100%;padding:2.5px 10px ;overflow:hidden;}

.Fo-Header {
    font-size: 22px;
    font-weight: bold;
    color: #0071CD;
    padding: 35px 0 20px;
}

button.btn-default{
    background-color:#0072CE;
    border:none;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    font-size:18px;
    padding:10px 25px;
    display: inline-block;
    border-radius:4px;
}
.top-filter-wrapper .input {display:inline-block;}
.filter {/*margin-top:2px*/}

.box-leave{ background-color: #EDF1F2;}
.box-leave-detail-1 {background-color: #EDF1F2;padding:5px 10px;}
.box-leave-detail-2 {padding:2px 0px;}
.box-leave-detail-1:after, .box-leave-detail-2:after{clear: both; content: ""; display: table;}
.leftside:after, .rightside:after{clear: both;content: "";display: table;}
.toperson {padding:7px 10px;    background-image: url(../../images/line02.jpg);background-repeat: repeat-x;background-position: bottom; }
.quota-header {padding:7px 10px;    background-image: url(../../images/line01.jpg);background-repeat: repeat-x;background-position: bottom;
 background-color: rgb(142, 210, 240);    font-size: 18px; font-weight: normal;  color: #fff;    text-shadow: 1px 1px #7f7f7f;}
.leftside, .rightside {width:50%;height:auto;padding-right:0px;box-sizing:border-box;}
.leftside{padding-right:10px;float:left;}
.rightside{padding-left:10px;float:left;padding-right:10px;}
.topic {padding:5px 0px;background-image: url(../../images/menu_lineBreak.gif);background-repeat: repeat-x;background-position: bottom;display:block;width: 100%;margin-bottom:2.5px; }
.inline{/*display:inline-block;*/float:left;}
.pull-left { float: left!important;}
.pull-right{float:right!important;}
/*.input-form {padding:2px 0;}*/
.input-label{line-height:normal !important;}
/*.input-text{line-height:normal!important;padding-top:7px;}*/
.input-form:after{content:"";clear:both; display:block;}
.input-label label{
    display:block;
    line-height:normal;
    padding-top:6px!important;
    font-size:14px;
}
.box-row .input-label label{
    display:block;
    line-height:normal;
    padding-top:0px !important;
    font-size:14px;
}
.label-right {
text-align:right;
}

.no-pad-button {padding-bottom:0px;}
.no-pad-top{padding-top:0!important;}
.no-pad-right{padding-right:0!important;}
.no-pad-left{padding-left:0!important;}
.no-pad{padding:0!important;}

.no-margin-button {margin-bottom:0px!important;}
.no-margin-top{margin-top:0!important;}
.no-margin-left {margin-left:0px!important;}
.no-margin-right{margin-right:0!important;}
.no-margin{margin:0;}

.no-border-top {border-top:0;}
.no-border-right {border-right:0!important;}
.no-border-left {border-left:0!important;}

.padd-10{padding:10px!important}
.fill-white {
    background-color: #fff;
    border-radius: 5px;
    border: solid 1px #e1e1e1;
    padding: 2px 8px;
    font-size: 14px;
    color: #2c2c2c;
}
.fill-white-2{background-color: #fff;padding: 5px 10px;}
.fill-grey {background-color: #edf1f2;}
.fill-blue {
    background-color: #8ed2f0;
    font-size: 14px;
    color: #2c2c2c;
    border-bottom:1px solid #6dafcf;
    border-top:1px solid #6dafcf;
    width:100%;
    padding:2px 10px;
    overflow:hidden;
}
.fill-blue .input-label,.fill-blue .input-text {float:left;}

.btn-default {
    background-color:#0072ce;
    height: 30px;
    border-radius: 5px;
    border: none;
    padding: 5px  20px;
    font-family: Tahoma, sans-serif;
    color: #FFFFFF;
    font-size: 14px;
    display: inline-block;
        line-height: normal;
}
.btn-green{background: #6aca25!important;}
.btn-red{background: #ff6767!important;border: solid 1px #db422d;}
.btn-a{margin:5px 0;}
.confirm{margin:5px 0;}
input[type=button]{ 
     background:#0072ce;
    height: 30px;
    border-radius: 5px;
    border: none;
    padding: 0px  30px;
    font-family: Tahoma, sans-serif;
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
    margin:1px;
    -webkit-appearance: none!important;
    /*background: #0072ce;*/
}
button, html input[type=button], input[type=reset], input[type=submit]{    -webkit-appearance: none!important;
    background: #0072ce; background-color: #0072ce; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
   button, html input[type=button], input[type=reset], input[type=submit] { background-color:#0072ce }
}
.btn-sm {    padding: 5px 20px!important;width:auto!important}
input[type="image"]{height:auto;padding:0;border:0;}

.box-leave-detail-2 .leftside {border-right:1px solid #c8cccd;/*min-height:100px;*/}
.box-leave-detail-2 .rightside {    padding-left: 10px;padding-right:0px;}

/*#MainContent_LbLeaveDetail p {margin:0 0 15px 0;}
#MainContent_PnlLeaveDetail .fill-white{padding:25px 15px}*/

.table th,.table tr td {height:22px;border-color: #e1e1e1;}
.table {border:1px solid #e1e1e1}

/*.GoLeaveCalendar table tr td{text-align:center}
.GoLeaveCalendar .ob_gRC{padding-left:0;}
.GoLeaveCalendar .ob_gCH{padding-left: 19px;}*/
.center .ob_gC{text-align:center}

.popup{/*background-color:#edf1f2;*/max-width:960px;padding:30px;width:100%;}
.popup-detail .title{padding-bottom:10px;border-bottom:1px solid #dadada}
.popup-table {padding:20px 0 0;}

.table-scroll { 
    overflow-x: auto;
}

.table-scroll2 { 
    overflow-x: auto;
}

.table-scroll .RadGrid_Bootstrap {
    min-width: 1120px;
}

.table-scroll2 .RadGrid_Bootstrap {
    min-width: 520px;
}

/*small-device*/
.userprofile-responsive{display:none}
#user_dropdown{display:none;}
.menu-icon{display:none}

.DataNotFound{width:600px;margin:auto;}
.no-border{border:0;}
.trtopic{/*text-align:center;*/font-weight:bold}
.trtopic.blue{background-color:#0072ce;color:#fff}
.trtopic.grey{background-color:#EDF1F2;}

.trtopic.blue td{color:#fff}
.text-normal{font-weight:normal}
    
 .inline-left{float:left;}

 .box-color{width:25px;height:25px;border: 1px solid #dadada;display:block;float:left;margin-right:10px;    margin-top:2.5px;}
  .box-color.day{background-color:#fff;}
 .box-color.holiday{background-color:#ff6767;}
 .box-color.holiday2{background-color:#CCCCFF}
.box-color.template {    background-color: #fdfaa0;}
 .color-detail {overflow: hidden;padding:0 10px 2px;}
 .calculateday{padding:0 10px 2px;overflow:hidden;}
  .color-detail .input-form{width:50%;float:left;}
    .color-detail .input-label{width:100%}
    

    .result-box{border:1px solid #dadada;border-radius: 5px;background-color: #edf1f2;}
   .resulttitle{border-radius: 5px 5px 0 0;font-size: 18px;color: #ffffff;}
    .fill-green {background-color: #6aca25;border: solid 1px #6aca25;}
    .fill-red{    background-color: #ff6767;  border: solid 1px #ff6767;   }
    .resultcontent{padding:10px}

    .config-list .topic{background-color:#0071cd;color:#fff;padding:15px 10px;font-size:16px;}
    .config-list .config{margin-bottom:10px;}
    .config-list .glyphicon{right:15px!important;}
     .config-table tr td{padding:5px 10px;font-size:14px;border-bottom: 1px solid #ddd;}
     /*.config-table tr td span{margin-left:10px;}*/
     .config-table tr td input{margin-right:10px;}
     .config-table tr td:first-child{width:75%}
    .config-table tr:nth-child(even) td {background: #FFF}
    .config-table tr:nth-child(odd) td {background: #EDF1F2}
    .config-table.no-bg tr td{background-color:transparent;}
    .config-table input, .config-table select{margin-right: 10px;}
    
  
    .workdaylist .ob_gRC {padding-left:0;}
    .templateminitable tr{border-bottom:1px solid #ddd;height:32px;}
    .templateminitable tr:last-child{border-bottom:0;}
    .templateminitable tr td{border-left:1px solid #ddd;text-align:center;}
    .templateminitable tr td:first-child{border-left:0;    /*background-color: #edf1f2;*/}
    .font-normal{font-weight:normal;}
    .dark-grey td{background-color: #dddddd!important;}

      /*.workdayadd-table tr td:first-child{background-color:#edf1f2}*/
      /*.workdayadd-table tr td input{width:52px;}*/
      .workdayadd-table tr td{padding:2px 5px!important}
      .date-range tr td{padding:5px 0;}

       .date-range table {background-color: #fff;}
       
       .font-14 .ob_gC,  .font-14 td.ob_gCH{font-size:14px!important;}

       .table-center .ob_gMCont{margin:auto;}

       .high-td .ob_gR, .high-td .ob_gRA{padding:3px 0px; height:36px}
       .high-td-60{padding:5px 0px; height:50px}
       /*.setuptextbox.hieght-td-55 tr td{height:55px;}*/
       .center .ob_gRCW{text-align:center;}

       .calendarDatePickerButtonDefault{vertical-align:middle!important;}

       /*.btn-width-150 input{width:150px;}*/

       .height-35 .input-label, .height-35 .input-text, .height-35 .input-label label{    line-height: 30px;    min-height: 30px;}

       input[type="radio" i] {margin: 3px 3px 0px 0px;}

       .Dummy{border:1px solid #0072ce;padding:50px;text-align:center}
       .Dummy h1{color:red;}
       .old{margin-top:50px;    opacity: .7; display:none!important}

       img#_MainContent_cldStartWorkDateButton {margin-right: 15px;}


      .monday{background-color:#fffc95}
      .tuesday{background-color:#ffd1e6}
      .wednesday{background-color:#c0faaf}
      .thursday{background-color:#ffd0a6}
      .friday{background-color:#a6f6ff}
      .saturday{background-color:#eed9ff}
      .sunday{background-color:#ffa8a8}

      tr.txt-white td{color:#fff}
      input:read-only{/*background-color:#edf1f2*/}

      .table tr td{padding:2px 9px;}

      .userhomeday{/*width:35px;*/ display: inline-block; /*text-align:right;*/}

      #TblReportData tr, #TblLeaveOfTeam tr{height:30px;}
      #TblReportData tr td:first-child{padding-left:3px;}
      #TblReportData tr.trtopic, #TblLeaveOfTeam tr.trtopic{font-weight:normal}


      br {
   display: block;
   margin: 5px 0;
   content: " ";
}

      @-moz-document url-prefix() {
      br {
       margin: 2.5px 0;
    }
}

      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
           br {
       margin: 0;
       line-height:5px;
    }
}

.has-feedback {
    position: relative;
    display: inline;
}
.has-feedback input {
    padding-right: 42.5px;
}

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 14px;
    height: 20px;
    line-height: 30px;
    text-align: center;
    pointer-events: none;
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 23px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-remove:before { content: "\e014";}

div[id*="PnlLeaveDetail"] p{margin:1px 0;}

.table-report table{width:1200px;}

 .table-select-date{background-color: #fff;    }

/*.table-scroll::-webkit-scrollbar {height: 8px;}
.table-scroll::-webkit-scrollbar-track {background-color:#fff;border-radius: 5px;}
.table-scroll::-webkit-scrollbar-thumb {border-radius: 5px;background-color:#337ab7;}

.table-scroll2::-webkit-scrollbar {height: 8px;}
.table-scroll2::-webkit-scrollbar-track {background-color:#fff;border-radius: 5px;}
.table-scroll2::-webkit-scrollbar-thumb {border-radius: 5px;background-color:#337ab7;}*/

.calendartype{width:560px;}
.input-group.date .clearIcon {display:none!important;}

.txtsearch {        width: 300px!important;    }
  
.input-form {padding: 2.5px 0;}     

.year-box{width:100%}

.lineheight-normal, .respon-labelspan{line-height:normal!important}

.CancelReason .input-text, .TxtCancelReason{width:100%!important}
.TxtCancelReason{height:60px;}


.detail-leave-box .input-label {width:130px;}
.calendartype .input-text{width:calc(100% - 110px)!important}
.calendartype .input-text select{width:100%}
/*.detail-leave-box .input-text {width:calc(100% - 120px)!important;}*/

.holidaytxt{width:260px!important;}

.plansetuptxt{width:auto;padding-right:30px;}

.LstTimeRange {    width: 260px;}

 
.ApproverViewAdd .input-label,
.OpeartorViewAdd .input-label,
.UserViewAdd .input-label {width:110px;}

.UserViewAdd .filter .input-label ,
.ApproverViewAdd .filter .input-label,
.OpeartorViewAdd .filter .input-label,
.Deleget-View-Add .filter .input-label{width:auto;}
/*.ApproverView .input-label{width:80px!important}*/

.UserViewAdd .TxtDescription, 
.OpeartorViewAdd .TxtDescription,
.ApproverViewAdd .TxtDescription
{width:100%!important;}

.TxtDescription{width:300px;min-height:40px}
.caseexpress .input-label{width:90px!important;}
.caseexpress .input-text{width:calc(100% - 110px);}
.caseexpress .width-auto .input-label{width:auto!important;}
 .caseexpress 
.info-userhome{padding-left:20px;padding-right:20px;}
.info-userhome .topic{padding:5px 10px 5px 0;}

.Deleget-View-Add .input-label{width:130px;}

.image-cropper {
    /*display: block;
    float: left;
    border-radius: 5%;
    object-fit: cover;
    width: 55px !important;
    height: 60px !important;*/
    object-fit: cover;
    height: auto!important;
    width: 55px!important;
    position: relative;
    overflow: hidden;
    border-radius: 5%;
    margin: 5px 12px 0 0;
}
    .home-for-mobile{display:none}
    .home-for-mobile-2{display:block}

    .icon-quick-menu{display:block;}

    .icon-quick-menu img{margin-top:-3px;width:27px}

    .Ap-DelegateOut-View-Add .input-label{/*width:190px;*/}

    /*.selectdate table{    background-color: #fff;}*/

    .label-width-170 .input-label {width:170px!important}
    .label-width-170 .input-text {width:calc(100% - 190px)!important;}

   .width-auto{width:auto!important}

   .absend-table .input-label, .absend-table .input-text{width:auto!important}

   .width-full, .width-full > * {width:100%!important;}
   .new-feature{padding:30px 0; border-top:3px solid red;/*margin:30px 0;*/border-bottom:3px solid red;overflow:hidden}

   .config-table-2 .input-label{width:280px;}
   .config-table-2 .topic{background-color:#0071cd;color:#fff;padding:7px 10px;font-size:18px;}
   .config-table-2 input[type="text"], .config-table-2 select{/*margin-right:10px;*/width:100px!important;}
   .config-table-2 .input-text span{padding-left:10px;}




   /*-----------------------terelik-----------------------------------*/
   th.rgHeader {
    background-color: #0071cd!important;
    color: #fff!important;
    height: 22px!important;
    }
     th.rgHeader a{
        color: #fff!important;
        font-weight:bold;
    }
     .rcbReadOnly .add-clear-span .glyphicon{display:none!important}
    .rcbSlide .RadComboBoxDropDown_Bootstrap{margin-top:0}

    .IconNote{margin-top:10px;}
     .IconNote .input-text{width:calc(100% - 110px)!important;}
     .IconNote .input-label label{    padding-top: 3px!important;}
     .IconNote ul{width:100%;}
    .IconNote ul li{width:25%;    float: left;}
.IconNote ul li span{ position: relative; padding-left:5px;}


     /*-----------------------------------------------*/
     .clickname-approver, .clickname-owner, .clickname-detail{/*background-color:#fff;padding:5px;border:1px solid #ddd;width:260px;display:block;line-height:normal;padding:5px;height:30px;    border-radius: 4px;*/ padding: 0 10px; background-color: rgb(220, 237, 245);min-width:350px;border: 0!important}
      .clickname-approver .input-label, .clickname-owner .input-label, .clickname-detail .input-label{width:130px;border-right:1px solid #ddd}
      .clickname-owner .input-form, .clickname-approver .input-form{    padding: 1px 0;    border-bottom: 1px solid #ddd;}
      .hidemorename-owner, .hidemorename-approver, .hidemorename-detail{
          display:none;
        /*height:0px;
       -webkit-transition:height, 0.5s linear;
        -moz-transition: height, 0.5s linear;
        -ms-transition: height, 0.5s linear;
        -o-transition: height, 0.5s linear;
        transition: height, 0.5s linear;
        overflow:hidden;*/
     }
     .displaymorename{
     display:block 
     /*height:200px;
     -webkit-transition:height, 0.5s linear;
    -moz-transition: height, 0.5s linear;
    -ms-transition: height, 0.5s linear;
    -o-transition: height, 0.5s linear;
    transition: height, 0.5s linear; 
    background-color:#DADADA;
    padding:10px;*/
     }
     .down-icon{    background: #dcedf5 url(../../images/arrow_down.png) no-repeat 95% 50%;    background-size: 10px;}
     .up-icon{    background: #dcedf5 url(../../images/arrow_up.png) no-repeat 95% 50%;    background-size: 10px;}
     .WelcomeTextNews{/*padding: 10px 15px;background-color: #edf1f2;    border: solid 1px #e1e1e1;*/}
     
     .WelcomeTextNews .topic{background-image:none;background-color:#8ed2f0;padding:10px;margin:0;color:#000}

/*--------------------------------datepicker--------------------------------*/
     .has-success .input-group-addon {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #3c763d;
}
     .has-warning .input-group-addon {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #8a6d3b;
}
     .has-error .input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}
       .form-inline .input-group .input-group-addon,
  .form-inline .input-group .input-group-btn,
  .form-inline .input-group .form-control {
    width: auto;
  }
     .input-group-addon {
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        color: #555;
        text-align: center;
        background-color: #eee;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
     .input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: inline-block;
  float:left;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.input-group-addon,
.input-group-btn {
  width: auto;
  white-space: nowrap;
  vertical-align: middle;
}
.input-group-addon {
  padding: 4px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.input-group-addon.input-sm {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
}
.input-group-addon.input-lg {
  padding: 10px 16px;
  font-size: 18px;
  border-radius: 6px;
}
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
  margin-top: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-addon:first-child {
  border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group-addon:last-child {
  border-left: 0;
}
.input-group.date input[type=text]{width:150px;} 

.input-group.date .input-group-addon{height:30px;border-color: #e1e1e1;}

.clearIcon{right: 5px!important;top: -1px!important;}

.MsgMessage{text-align:center}


/*---------------------------Tab--------------------------*/

.tabs-menu {

    clear: both;
    width:100%;
    border-bottom:5px solid #0072ce;
	display:block;
}

.tabs-menu li {
    /*height: 30px;
    line-height: 30px;*/
    float: left;
    margin-right: 10px;
    background-color: #8ED2F0;
    border-top-left-radius:3px;
    border-top-right-radius:3px;   
}
.tabs-menu li:hover{background-color: #0072CE;}

.tabs-menu li:hover a{color:#fff;}

.tabs-menu li.active {
    position: relative;
    background-color: #0072CE;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    color:#fff;
    z-index: 5;
}

.tabs-menu li a {
    /*text-transform: uppercase;*/
    color: #000;
    text-decoration: none; 
    font-size:16px;
    font-weight:bold;
    padding:5px 10px;
    display: inline-block;
}

.tabs-menu .active a {
    color: #fff;
}

.tab {
    border: 1px solid #d4d4d1;
    background-color: #fff;
	clear:both;
    margin-bottom: 20px;
    width: auto;
}

.tab-content.active {
    display: block;
    padding:10px;
}



.tab-content {
    
    display: none;
}
/*
#tab-1 { display: block; }*/

.nav-tabs-dropdown, .selectedtab{
    display:none
}

.selectedtab{
    background-color:#0072ce;
    color:#fff;
    padding:8px;
    font-weight:bold;
    font-size:16px;
    border:1px solid #fff;
}

.selectedtab:hover{text-decoration:none;}

.titleMonthYear{padding:10px 0;line-height: 30px;}

.input-group.date {    display: block;}
.btn-block{width:auto;}

.line-height-30{    line-height: 30px;}

.adminaddopeartor .input-label{width:110px}

ul.HeadMenu .dropdown{position:inherit!important}

@media screen and (min-width: 769px) {
  #nav-tabs-wrapper {
    display: block!important;
  }
}
@media screen and (max-width: 768px) {
    .nav-tabs-dropdown, .selectedtab {display: block;}
	.tabs-menu{height:auto;display: none;}
	.tabs-menu, .tabs-menu li{width:100%;border-radius:0;}
    .tabs-menu li.current {            border-radius: 0;        }
    .tabs-menu li{ margin-top: -1px;}
    #tabs-container{padding:0px;}
    .tab{margin-top:5px;}
    .tabs-menu{border-bottom:none}
    .selectedtab{
        background-image: url(../../images/icon_down.png);    
        background-repeat:no-repeat;
        background-position: right 10px center;
        background-size: 20px;
    }
    .selectedtab.open{
        background-image: url(../../images/icon_up.png);    
        background-repeat:no-repeat;
        background-position: right 10px center;
        background-size: 20px;
    }
    
.tabs-menu li {
    background-color: white;
    color:black;
    border: 1px solid #d4d4d1;
}
.tabs-menu li:hover{background-color: #fff;border: 1px solid #d4d4d1;}

.tabs-menu li:hover a{color:#0072ce;}

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
        border-top-left-radius:3px;
    border-top-right-radius:3px;
    color:#0072ce;
    z-index: 5;
        border: 1px solid #d4d4d1;
}

.tabs-menu li a {
    /*text-transform: uppercase;*/
    color:black;
    text-decoration: none; 
    font-size:16px;
    font-weight:bold;
        display: block;
}

.tabs-menu .current a {
    color: #0072ce;
}

}

  
/*======================Mobile Vertical===========================*/
@media screen and (min-width: 320px) and (max-width: 425px) {
    .container, body{max-width: 320px;width:100%;}
    /*.row{padding:0 10px;}*/
     .header-top{height:77px;}
    .logo { float: none; text-align: center;}
    .logo:before{height:77px;}
    .user-profile{display:none;}
    .page-title{padding:0 10px;}
    .page-title p{font-size:18px;}
    .page-title img{height:12px;}
    .Fo-Header{font-size: 18px!important;padding:10px!important;}
    ul.breadcrumb{padding:0 10px;}
    .calendartype .input-text{width:100% !important}
   
    /*.dropdown-responsive {padding:5px;height:50px;background-color: #EDF1F2;border-bottom: 1px solid #DADADA;} 
    ul.HeadMenu li a{border:none!important;border-bottom:1px solid #DADADA!important;text-align:left!important;padding:0 10px!important}
    .menu-responsive{width:50px;border-right: 1px solid #DADADA;height:40px;float:left;display:block}
     ul.HeadMenu>li{width:100%;float:none;}
     ul.HeadMenu{height:auto!important}
    #menu_dropdown{height: 0px;transition: all 0.7s;overflow-x: hidden;width: 320px;position: relative;background-color:#fff;margin-left:-5px;display:block;top:5px;}
    #menu_dropdown.showmenu{height: 260px;transition: all 0.7s;z-index: 5;width: 320px; background-color: #edf1f2;}
    .menu-icon{display:block}*/
    
    .IconNote .input-text{width:100%!important;}
    .IconNote ul li{width:100%;}

     .userprofile-responsive{width:260px;float:left;font-size:12px;display:block}
    .img-user{margin: 0 5px;}
    .img-user img{width:29px;}
    .user-menu img{width:19px;}
    .user-detail {padding-right:0;}
    .last-sign, .user-menu{float:left;}
    .user-menu{margin-left:3px;}
   #user_dropdown {height: 0px;transition: all 0.7s;overflow-x: hidden;width: 320px;position: relative;background-color:#fff;margin-left:-5px;display:block;top:5px;}
   #user_dropdown.showmenu{height: 230px;transition: all 0.7s;z-index: 5;width: 320px;}
   ul.infoMenu > li {border-bottom: 1px solid #edf1f2;}
   ul.HeadMenu li:hover{background-color:#edf1f2!important;}

    .breadcrumb {display:none;}
   .leftside, .rightside {width: 100%!important;float:none!important;clear:both!important;}
   .rightside{margin-top:2px;padding:0px 10px !important;}
   .leftside {padding:0px 10px !important;border:0!important;}
    .leftside.highlight, .rightside.highlight, .highlight{padding:0px 0px !important;}
    .highlight .box-leave-detail-1{padding:0 10px 10px;}
    /*.topic{padding:10px;}*/
   .input-form{width:100%;padding:1px 0;}
   /*.input-label, .input-text {float: none!important;width:100%!important;text-align:left!important;padding:1px 0!important;line-height:normal!important;min-height:32px!important}*/
   .input-form select, .input-form input[type="text"], .input-form textarea,input[type="date"]{width:100%!important;max-width:300px;clear:both;}
   .input-label label{line-height:normal;padding-top:5px!important}
   .input-button{text-align:center!important;width:100%}
   /*.fromdate{margin-top:-20px}*/
   .input-form{margin-left:0px !important;}
    .input-form input.txtStartWorkDate, 
    .input-form input.txtEndWorkDate,
    .input-form .respon-input-date input[type="text"] {width:85%!important;margin-bottom: 5px;}

   .timesearch .input-label, .timesearch .input-label label {height:22px;line-height:20px;    min-height: 0;}
   .fix-top-menu{position: fixed; z-index: 600;top: 0;width: 100%;max-width:320px;background-color:white}

   form#form1, form.form1 { margin-top: 160px;}

   .dropdown:hover .dropdown-content {display: none!important;}

   .respon-btnProblem{margin-top:2px!important; margin-left:-30px; margin-bottom:2px;}
    .respon-input{margin-top:2px;}
   .respon-btn {margin-right:2px!important;}
   .respon-span{padding:2px 0;display:block}

  .fill-blue, .toperson{padding:5px 10px!important}
  .toperson .tx_ToppicBlue22{font-size:20px}
  .box-leave-detail-1{padding:0!important;padding-bottom:2px!important;}
  .box-leave-detail-2{padding:2px 0}

  .address-office .input-label, .address-office .input-text{float:none!important;display:inline-block!important}
  .address-office .input-label{width:80px!important;}
  .address-office .input-text{width:190px!important;}
  .headoffice .input-label, .headoffice .input-text{float:none!important;display:inline-block!important;width:100%!important}

.top-filter-wrapper, .top-filter-wrapper.fo-filter{    padding: 2px 10px!important;}
    .status-search > span{width:50%!important;display:block;float:left}
    .status-search span span{width:auto!important;}

  .DataNotFound{width:100%;margin:auto;}

  #MainContent_pnlDetail{max-width:300px;}

  /*.box-color{margin-top:-7px;}*/

  .calculateday .input-label, .calculateday .input-text{float:left!important ;line-height: 25px!important;min-height: 25px!important;}
   .calculateday .input-label{width:300px!important;}
  .calculateday .input-label label{line-height: 25px!important;}
   /*.calculateday .input-text{width:100px!important;}*/
  .calculateday .input-form input{width:70px!important;}

  .copyzone{padding:0 10px;}

  .config-table{width:700px;}
  .config-table tr td:first-child{width:auto;}
  .config-table tr td:last-child{width:170px;}
   .config.general .config-table tr td:last-child{width:250px;}

    .jobdays .rightside{margin-top:0!important;}

    footer {margin-top: 10px;}

    .popup-detail{padding:15px!important;}
    .popup-table table{width:400px!important;}

    .color-detail .input-form.fullwidth{width:100%;float:left;}
    .respon-pad{padding:2px 10px!important;}

    input[type="button"]{width:100%;margin:2px 0;}
    .btn-month{width: 8.33333333% !important;margin:0!important}
    .btn-black{width:auto!important}

    .btn-a{width:100%;    text-align: center;}

    .searchtxt, .txtsearch{margin-top:3px;}

    .btn-sm{width:auto!important}

    .move-btn{width:100%!important;}
    .config-table-2 span{padding:5px 0;display:inline-block}
    .config-table-2 .input-text span{padding-left:0!important}

    .copy-holiday{margin-top:5px;}
     .clickname-approver, .clickname-owner, .clickname-detail{width:100%!important;    min-width: initial;}
     .sussion .leftside, .sussion .rightside{background-color: #edf1f2;}

     .clickname-approver .input-label, .clickname-owner .input-label , .clickname-detail .input-label{border-right: 0;}

     .input-form input[type="text"].searchdate{width:85%!important}

     #divCalendar{margin-bottom:45px;}
     #divCalendar .confirm{    max-width: 300px;    position: absolute; margin-top:-10px;}

     .titleMonthYear{padding:10px 0;position:absolute;max-width:300px;}
   .calendarMonth {padding-top: 50px;}
    .titleMonthYear select{width: auto!important;} 

    .RadGrid_Bootstrap .rgPagerCell .rgAdvPart {margin-left: 0px;}

    

}
/*======================Mobile To Tablet===========================*/
@media screen and (min-width: 320px) and (max-width: 768px) {
    .header-top{height:77px;}
    .logo { float: none; /*text-align: center;*/}
    .logo:before{height:77px;}
    .user-profile{display:none;}
    .page-title{padding:0 10px;}
    .page-title p{font-size:18px;}
    .page-title img{height:12px;}
    .Fo-Header{font-size: 18px!important;padding:10px!important;}
    ul.breadcrumb{padding:0 10px;}
   
    .dropdown-responsive {padding:5px;height:50px;background-color: #EDF1F2;border-bottom: 1px solid #DADADA;} 
    ul.HeadMenu li a{border:none!important;border-bottom:1px solid #DADADA!important;text-align:left!important;padding:10px!important;height:40px;}

    ul.HeadMenu li img{margin-top: -7px!important;}
    .menu-responsive{width:50px;border-right: 1px solid #DADADA;height:40px;float:left;display:block}
     ul.HeadMenu>li{width:100%;float:none;min-height:40px!important;height:auto!important}
     ul.HeadMenu{height:auto!important}
    #menu_dropdown{height: 0px;transition: all 0.7s;overflow-x: hidden;width: 100%;position: relative;background-color:#fff;margin-left:0px;display:block;top:5px;}
    #menu_dropdown.showmenu{height: 300px;transition: all 0.7s;z-index: 1000;width:calc(100% + 10px); background-color: #edf1f2;margin:0 -5px}
    .menu-icon{display:block}

    .dropdown-responsive ul.infoMenu{width:100%;}
    .dropdown-responsive ul.infoMenu > li{    background-color: #ff7200;    padding: 10px 10px;}
    .dropdown-responsive ul.infoMenu > li:hover{    background-color: #fff;}
    .home-for-mobile{display:block}
   .home-for-mobile-2{display:none}
   .icon-quick-menu{display:none;}
    .dropdown-responsive ul.infoMenu > li > a {   
    font-size: 16px;
    height: auto;
    float: none;
    width: 100%;
    color: #fff;
    font-weight:bold;
}
     .dropdown-responsive ul.infoMenu > li:hover > a{color:#ff7200}
    .dropdown-responsive ul.infoMenu > li > a > span > span{padding-top:0;}

     .userprofile-responsive{width:260px;float:left;font-size:12px;display:block; position:relative;}

     .user-detail {font-size: 12px;}

    .img-user {
        margin: 5px;
        width: auto;
        float: left;
        height: auto;
        margin-left:2px;
    }
    
    .img-user img{width:29px;}
    .user-menu img{width:19px;}
    .user-detail {padding-right:0;    display: inline-block;padding-top:0; position:absolute; right:0px; }
    .last-sign, .user-menu{float:left;}
    .user-menu{margin-left:3px;}
   #user_dropdown {height: 0px;transition: all 0.7s;overflow-x: hidden;width: 100%;position: relative;background-color:#fff;margin-left:0px;display:block;top:5px;}
   #user_dropdown.showmenu{height: 230px;transition: all 0.7s;z-index: 1000;width:calc(100% + 10px); background-color: #fff;margin:0 -5px}
   ul.infoMenu > li {border-bottom: 1px solid #edf1f2;}
   ul.HeadMenu li:hover{background-color:#fff;}

    .breadcrumb {display:none;}

      .display{display:block !important;}
    .respon-none{display: none!important;}

    .menu-bar{display:block;}

    .menu-bar span {
        padding-left:10px;
    }  

    .sub-menu {
        max-height: 0;
        transition: max-height 0.7s ease-out;
        width: calc(100% + 15px); 
        overflow: hidden;  
        z-index: 1000; 
        position: relative; 
        margin: 0px -10px
    }
    .sub-menu.showmenu {
        max-height: 800px;
        transition: max-height 0.7s ease-in;
        width: calc(100% + 15px); 
        z-index: 2000; 
        position: relative; 
        margin: 0px -10px
    }

    .show-sub-menu .menu-bar { 
        width: 100%;
        background-color: #FFF; 
        border: 1px solid #e1e1e1;
        font-size: 16px; 
        padding: 10px 20px; 
    }
    .show-sub-menu .menu-bar:hover {
        background-color: #0072ce !important; 
        color: #FFF !important;
    } 
    
}

/*======================Mobile Horizontal===========================*/
@media screen and (min-width: 426px) and (max-width: 568px) {

    .container, body {max-width: 100%; }
    /*.page-title p { font-size: 18px;}
    .userprofile-responsive { width: 100%;  font-size: 12px; display: block;}*/
    .user-profile { display: none;}
    .user-leave-list .inline .input-label{width:70px!important;text-align:left!important}
    .calendartype{width:260px;}
   
    .input-form input[type="text"]{width:auto;}
    .input-form{/*margin:2px 0;*/width:100%}

    .input-label{width:90px}
    .setupteam .input-label{width:auto!important}
    .CheckEmployeeTeam .input-label{width:auto}
    .copy-holiday .input-label{width:auto}
    .width-auto{width:auto}
    /*.input-text, .inline .input-text{width: calc(100% - 115px)!important;}*/
    .summer-detail .input-text,.summer-detail .inline .input-text{width:auto!important;}

    .report-ReportListApprovers .input-form.inline-left{width:auto}

    /*.input-text{width:auto!important}*/
    .inline .input-text{padding:0!important;margin-right:10px!important}

   .setupteam-filter .inline .input-text, 
   .inline .input-text.choose-year,
   .genquota-filter .inline .input-text, .genquota-filter  .input-form.inline,
    .managelist-filter .inline .input-text, /*.fromdate .input-form,*/
   .PlanSetup-filter .inline .input-text,
   .leavetouser-filer .input-form,
    .input-form.verti-width-auto, .input-text.verti-width-auto{width:auto!important}

    .managelist-filter .searchform .input-text{width: calc(100% - 90px)!important;}
    .searchform .input-text{width: calc(100% - 115px)!important;}
    .input-form input.LbYear{width:60px!important;}
    .input-form input.LbMonth{width:120px!important;}
    .input-form input.LbEmp {width: 300px !important;}
    /*.input-text select, .input-text input[type="text"]{width:100%!important;padding-left:0!important;padding-right:0!important;}*/

    /*.approver-descleave .input-text,.approver-descleave .input-text input[type=text]{width:100%!important}*/
    .approver-reason .input-text{width:100%!important}
    .CancelReason .input-text, .TxtCancelReason{width:100%!important}
    .TxtCancelReason{width:100%!important}
    /*.TxtDescription{width:100%!important;}*/
    .caseexpress .input-label,.caseexpress .input-text{/*width:90px;*/  float:none;display:block;width:100%}
  
    .descleave .leftside {    width: 100%;padding-right:0;}

    /*.box-color{float:none;}*/
    .calculateday .input-form input[type="text"]{width:70px!important}
    /*.calculateday .input-label{width:100%!important;}*/

    .respon-btn{margin:2px;}

    .status-search{width:100%!important;}
    .status-search > span{width:50%!important;display:block;float:left}
    .status-search span span{width:auto!important;}

    .selectform{width:110px;}
    .searchtxt{width: calc(100% - 120px ) !important;}
    .searchtxt-2{width: calc(100% - 80px ) !important;}
    /*.leftside,.rightside{width:100%;}*/
    .leftside,.rightside{width:100%!important;padding-left:0!important;padding-right:0!important;}
    .table-delegate table{width:568px;}
    .move-btn{width:100%!important;}
    .copy-holiday{margin-top:5px;}


    .approveraddleave .inline .input-text{width: calc(100% - 60px)!important;}
    .approver-descleave{}
    .txtsearch {width: calc(100% - 120px)!important;}

    .calendarform{width: calc(100% - 120px)!important;}
    .btn-block{ width: 100%!important;text-align:center}
    .btn-block input[type="button"]{width:48.4%;margin:0 0.5% 2px;}
     .btn-block, .input-button ,.input-text.input-button, .input-form.input-button{ width: 100%!important;text-align:center}

     .calculateday{margin-top:5px}

     .operatorquotalist .input-label{width:150px!important;}

     .IconNote ul li{width:100%;}


} 
/*======================Tablet===========================*/
@media screen and (min-width: 569px) and (max-width: 768px) {

    .user-leave-list .inline .input-label{width:70px!important;text-align:left!important}
    /*.input-form{margin:2px 0;}*/
    .input-text{width:auto!important}
    .approver-descleave .input-text,.approver-descleave .input-text input[type=text]{width:100%!important}
    .approver-reason .input-text{width:100%!important}
    /*.TxtDescription{width:100%!important;height:50px}*/
   .caseexpress .input-text{ float:left;display:block;    width: 100%!important;}
   .descleave .leftside {    width: 100%;padding-right:0;}
    .calculateday .input-form input[type="text"]{width:70px!important}
    .respon-btn{margin:2px;}
    .status-search{width:100%!important;}
    .status-search > span{width:33.33%!important;display:block;float:left}
    .status-search span span{width:auto!important;}

    .txtsearch { width: 300px!important;}

    .approver-list-btn{clear:both;}

    .width-full, .width-full > * {width:100%!important;}

    .copy-holiday .input-text, .copy-holiday .input-form{width:100%!important;}
    .copy-holiday  .input-text select{width:100%!important;}

     .IconNote ul li{width:50%;}

    
}
/*======================Tablet To Notebook===========================*/
@media screen and (min-width: 769px) and (max-width: 1023px) {
    /*.input-form {margin: 2px 0;}*/
    input[type="button"]{margin-bottom:2px}
    .IconNote ul li{width:33.33%;}
}
/*======================Tablet To Notebook2===========================*/
@media screen and (min-width: 569px) and (max-width: 1100px) {
    .btn-black{padding:5px 30%!important;}
}

.row{    margin-right: 0;    margin-left: 0;}
label {
    font-weight: normal;
    margin-bottom:0;
}


@media screen and (min-width: 426px) and (max-width: 1200px) {
    .box-leave-detail-2 {padding:0 10px;}
}

.rgMasterTable thead .rgHeader{text-align: center!important;}