/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles:opinionated defaults
   ========================================================================== */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

html, 
button, 
input, 
select, 
textarea{color:#222; outline:none}
html{overflow:-moz-scrollbars-vertical; margin:0; padding:0}
*{font-family: 'Open Sans', sans-serif;}
body{margin:0px; padding:0px; background:#fff;}
body, td, th, input, textarea, select, a{font-size:12px}
form{padding:0; margin:0; display:inline}
input, textarea, select{margin:3px 0px}
a, a:visited{color:; text-decoration:none; cursor:pointer; outline:none}
a:hover{text-decoration:none; color:}
a img{border:none}
p{margin-top:0px}

/*
 * Remove text-shadow in selection highlight:h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection{background:#b3d4fc;  text-shadow:none}
::selection{background:#b3d4fc;  text-shadow:none}

/*
 * A better looking default horizontal rule
 */
hr{display:block;  height:1px;  border:0;  border-top:1px solid #ccc;  margin:1em 0;  padding:0}

/*
 * Remove the gap between images and the bottom of their containers:h5bp.com/i/440
 */
img{vertical-align:middle}

/*
 * Remove default fieldset styles.
 */
fieldset{border:0;  margin:0;  padding:0}

/*
 * Allow only vertical resizing of textareas.
 */
textarea{resize:vertical}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */
.chromeframe{margin:0.2em 0;  background:#ccc;  color:#000;  padding:0.2em 0}

/* ==========================================================================
   custom styles
   ========================================================================== */
 body{margin:3px 0}
 .wrapper{width:90%; margin:0 auto}
 .row{width:100%; float:left; color:#636363;}
 .dl-r-c-r1 b{font-size:12px!important}
 .dl-r-col-1{width:23.333333333%}
 .dl-r-col-1{width:23.333333333%}
 
.dl-r-c-r1 {
width: 96%;
height: 40px;
padding: 2%;
font-size: 14px;
}

 .dl-r-c-r2{width:100%; height:40px}
 .fl{float:left}
 .fr{float:right}
 .dl-r-c-r2 input {
width: 90.45%;
height: 20px;
padding: 1.000222%;
border: 1px solid #A8A6AF;
float: left;
border-radius: 4px;
padding-left: 19px;
}
 .c2-in {
width: 60.45%;
height: 20px;
padding: .00011111%;
border: 1px solid #A8A6AF;
float: left;
border-radius: 3px;
}

.c2-in.datepicker{
    width: 50%;
    color: #a3a3a3;
    font: inherit;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
    outline: 0;
    background: url(../images/calendar.svg) no-repeat scroll 3px 2px;
    background-size: 17px 16px;    
    padding-left: 25px;
}

.dl-r-col-2 {
width: 20%;
margin-left: 2.833333%;
}


.dl-r-col-3 {
width: 12%;
margin-left: 2.833333%;
}
.dl-r-col-4 {
float: left;
width: 33.33%;
}

.row span {

color: #55514C;
font-weight: bold;
}
 .dl-lab{width:20.008403361%; height:16px; padding:5px 0 0 0}
 .mrg-t-1{margin-top:5px!important}
 .hide{width:28px; height:30px; background-color:grey; margin-left:2px}
 .chk{float:left; margin:6px 7px 0 2px}
 .io-logo{width:20%; height:86px; float:right; padding:0 10px;text-align:right;}
 .io-logo img{max-width:100%}
 .grid-box{float:left; margin:0; min-height:20px; padding:3px 1%; width:98%}
 .bottom-cont{
  background-color: #DFDCD9;
border: 1px solid #aaaaaa/*{borderColorHeader}*/;
color: #000 !important;
float: left;
margin: 8px 0;
min-height: 20px;
padding: 7px 1%;
width: 98%;
border-radius: 4px;}
 .b-c-left{width:55%; float:left}
 .b-c-right{width:45%; float:left}
 .id-hold{width:36%; height:18px; float:left; border:solid 1px #808080; padding:4px 2px 2px 2px}
 .id-lab{width:50%; float:left}
 .id-r{width:50%; float:left;word-break: break-all;}
 strong{color:#555555!important}
 .id-lab2{width:18%; float:left}
 .id-r2{width:76%; float:left}
 .id-r4{width:100%; float:left}
 .time-stamp{width:10px; float:left; width:60%}
 .ts-lab{width:30%; height:18px; padding:2px; float:left; margin:2px 0 0 5px}
 .ts{width:30%; padding:2px; float:left; height:18px; margin:2px 0 0 5px}
 .bb-list{width:36.5%; float:left; padding:4px 2px 2px 2px}
 .bb-list2{width:100%; float:left; padding:4px 2px 2px 2px}
 .bb-list-rps{width:36.5%; /*height:18px; */float:left; padding:4px 2px 2px 2px}
 .mrg-b2{margin-bottom:3px!important}
 .id-r3{width:51%; float:left}
 .row textarea{width:98%; padding:1%; border:solid 1px grey;height:76px;}
 .t-left{width:78%; float:left}
 .cm{
    position: absolute;
    background: url(../images/error.svg) no-repeat scroll;
    background-size: cover;
    border-radius: 50% !important;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    margin: 4px 0 0 15px;
    padding: 0px 0px!important;
    width: 18px;
    height: 18px;
    border: none !important;}
/* .btn{  background-color:rgb(129, 126, 123);   -moz-border-radius:4px;  -webkit-border-radius:4px;  border-radius:4px;    display:inline-block;  color:#fff;  font-size:10px;  font-weight:normal;  padding:3px 25px;  text-decoration:none;
 border: 1px solid silver; }*/
 /*.btn:hover{  }
 .btn:active{ position:relative;  top:1px}*/ 
 .cm:hover {box-shadow: 0 0 1px 1px rgba(138, 59, 88, 0.4), 0 0 1px 5px rgba(138, 59, 88, 0.1), 0 0 1px 10px rgba(138, 59, 88, 0.1);}
 

.btn{
    cursor: pointer;
    border: 1px solid;
    margin: 0 5px;
    background-color: #fff;
    color: #4d5c6e;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius: 3px;
}
.btn:hover
{
    background-color:  #e1e1e1;
    color: #4d5c6e;   
}
.btn:active
{
    background-color:#e1e1e1;
   color: #4d5c6e;   
}

.btp1{float:right; margin-right:5%}

@media (min-width:800px) and (max-width:1024px){ .row span{font-size:12px}
 .dl-lab{width:24.008%}
 .bottom-cont{font-size:11px!important}
 .t-left{width:77%}
 .bb-list-rps{width:100%}
 .dl-r-col-4 {width: 100%}
}

@media (min-width:800px) and (max-width:3000px){ .row span{font-size:12px}
 .dl-lab{width:24.008%}
 .selectMainServer .dl-lab{width: 21.008%}
 .bottom-cont{font-size:11px!important}
 .t-left{width:77%}
 .io-logo-rsp{display:none}

}

@media (min-width:0px) and (max-width:800px){ .dl-r-col-1{width:100%; margin-bottom:15px!important}
 .dl-r-col-2{width:100%; margin-bottom:15px!important}
 .dl-r-col-3{width:100%; margin-left:3px!important}
 .io-logo{display:none}
 .b-c-left{width:100%}
 .b-c-right{width:100%; margin-top:20px; border-top:solid 1px #000; padding-top:20px}
 .t-left{width:100%}
 .io-logo-rsp{display:block; width:90%}
 .bottom-cont{font-size:11px!important}
 .bb-list-rps{width:77.5%}
 .row{margin-bottom:2px}

}

#full_text_search{
background: url(../images/search_magnifier_icon.png) left center no-repeat;
}
.row a{
color:#636363
}

.row_selected a{
	color:#fff;
}
.btnCreate
{
	font-size:10px;
}
.btnTableCreate
{
  font-size:10px;
  padding: 3px 10px;
}
table.display td {
  white-space: nowrap;
  text-align: left;
}
table.dataTable tbody tr.selected {
    color: white !important;
    background-color: #eeeeee !important;
}
#new_errors{
	bottom: 0;
    color: red;
    display: none;
    position: absolute;
	top:70px;
}

#logout_btn{
  background-color: #666666;
    background-image: url("../images/power_gr.png");
    background-position: 5% 50%;
    background-repeat: no-repeat;
    background-size: 18px auto;
    border: 1px solid #666666;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 -3px 5px #888888;
    color: #B7EB00;
    cursor: pointer;
    font-family: Tahoma;
    font-size: 14px;
    font-weight: bold;
    height: 20px;
    padding: 5px;
    position: fixed;
    right: -35px;
    text-align: center;
    top: 150px;
    vertical-align: bottom;
    width: 90px;
    transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg); 
      -moz-transform: rotate(-90deg); 
      -o-transform: rotate(-90deg); 
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#logout_btn:hover{
  background-color: #B7EB00;
  background-image: url('../images/power_g.png');
  background-repeat: no-repeat;
  color: #666666;
}
.selectFilter{
	width: 100%;
}

.statusRow{
  color: rgb(0, 0, 0);
  border-bottom: 1px solid rgb(170, 170, 170);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-color: #d3d3d3;
  height: 30px;
}

.statusRow.row_selected{
  background-color: #ffffff !important;
}

.chosen-container
{
    width: 100% !important;
}


#loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #B7EB00;
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}