@charset "utf-8";
/* CSS Document */

/*Imported Styles
----------------------------------------*/
  @import url("elements.css");
  @import url("custom.css");
  @import url("drop.css");
  
/*font size percentage (%) listings in pixel transformation
---------------------------------------------------------------*/

/*----------

 250% = 30px
 200% = 24px
 150% = 18px
 133.33% = 16px
 116.67% = 14px
 75.00% = 12px
 
----------*/

/*Reset paddings and margins for all HTML elements 
---------------------------------------------------------------*/

* { margin:0; padding:0; }
 
/* Reset font size for all elements to standard (16 Pixel) 
----------------------------------------------------------------*/
html * { font-size:100.01%;}

/*This style should affect opera browsers, fix required
--------------------------------------------------------------------*/
  
/* Standard font size 12px 
--------------------------------------------------------------------------*/
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:75.00%;
    color:#444;
	background-color:#E4E4E4;/*background-color:#3E8DE8;*/
  }
  
/* Elements formatting 
-------------------------------------------------------------------------------- */

  p { line-height:1.5em; margin:0 0 1em 0; }
  blockquote, cite, q { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}
  blockquote { margin:0 0 1em 1.6em; color:#666; }
  strong,b { font-weight:bold; }
  em,i { font-style:italic; }
  big { font-size:116.667%; }
  small { font-size:91.667%; }
  pre { line-height:1.5em; margin:0 0 1em 0; }
  pre, code, kbd, tt, samp, var { font-size:100%; }
  pre, code { color:#800; }
  kbd, samp, var, tt { color:#666; font-weight:bold; }
  var, dfn { font-style:italic; }
  acronym, abbr { border-bottom:1px #aaa dotted; font-variant:small-caps; letter-spacing:.07em; cursor:help;}
 .nowrap { white-space: pre; }
 .clearfix{ clear:both;}
 .left{ float:left;}
 .right{ float:right;}
  
/*--- Headings
------------------------------------------------------------------------*/

  h1,h2,h3,h4,h5,h6 { font-family:"Times New Roman", Times, serif; font-weight:normal; color:#222; margin:0 0 0.25em 0;}
  h1 { font-size:250%; }                       /* 30px */
  h2 { font-size:200%; }                       /* 24px */
  h3 { font-size:150%; }                       /* 18px */
  h4 { font-size:133.33%; }                    /* 16px */
  h5 { font-size:116.67%; }                    /* 14px */
  h6 { font-size:116.67%; }                    /* 14px */

  /* Lists
  -------------------------------------------------------------------------------- */

  ul, ol, dl { line-height:1.5em;}
  ul { list-style-type:none; }
  ul ul { list-style-type:none; margin-bottom:0; }
  ol { list-style-type:decimal; }
  ol ol { list-style-type:lower-latin; margin-bottom:0; }
  li {line-height:1.5em; }
  dt { font-weight:bold; }
  dd { margin:0 0 1em 0.8em; }
  sub, sup { font-size:91.6667%; line-height:0; }
  hr {color:#fff; background:transparent; margin:0 0 0.5em 0; padding:0 0 0.5em 0; border:0; border-bottom:1px #eee solid;}

  /* Links 
  ----------------------------------------------------------------------------------------- */

  a { background:transparent; text-decoration:none; outline: none; }
  a:visited  {}
  a:hover, a:active {text-decoration: none; outline: 0 none; }

  /* Constrast for tab focus - change with great care */
  
  a:focus { text-decoration:underline; color:#000; background: #fff; outline: 3px #f93 solid; }
  
/* No Firefox focus on links 
---------------------------------------------------------------------------------------------*/
:-moz-any-link:focus { outline:none; }


/*No Borders on image links
--------------------------------------------------------------------------------------------*/
img a, a img{border:none;}

/*Content Containers
--------------------------------------------------------------------------------------------*/

.fullContainer{width:100%;}
.mainContainer1{width:100%; margin:0 auto; background-color:#fff;}
.mainContainer2{width:90%; margin:0 auto;}
.mainContainer3{width:90%; margin:0 auto;}

/*Content Inner Sections 
--------------------------------------------------------------------------------------------------*/

.innerContainer1{ width:830px; padding:10px 0; margin:0 auto;}
.innerContainer2{ width:880px; padding:10px 0; margin:0 auto;}
.innerContainer3{ width:940px; padding:10px 0; margin:0 auto;}


/*Columns
---------------------------------------------------------------------------------------------------*/

.column1{ width:180px;}/*menu data left*/

@media screen and (min-width: 100px) and (max-width: 1000px) {
.column2{ width:60%;} /*added margins to seperate kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk*/
}

@media screen and (min-width: 1001px) and (max-width: 2800px) {
.column2{ width:78%;
} /*added margins to seperate kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk*/
}


.column3{ width:200px;}

/* Main Content Sections
----------------------------------------------------------------------------------------------------*/

.header{ width:100%; height:112px; background:url(../images/wrapbg.png) repeat-x;}
.mainbody{ width:100%;}
.footer{ padding:10px 0; background-color:#1768C1; text-align:center; color:#FFFFFF!important;}

.logo{
width:225px;

}

.title{
width:500px;
}

.mainNav{
height:34px;
width:100%;
border-bottom:1px solid #0099CC;
background-color:#3DA9D8;/**/
background-image:url(../images/nav.jpg);
background-position:bottom;
background-repeat:repeat-x;
float: left;
}

.snav{
width: 100px;
padding-top: 5px;
}

.navs{
height:30px;
/*background-image: url(../images/snav.png);
background-position:top;
background-repeat:no-repeat;
background:#46A3E8;*/
}
/*Secondary styles
-----------------------------------------------------------------*/ 

.indentxt{text-indent:10px;}
.engrave{ text-shadow: 0 1px 0 #fff;}
.fragile { color:#0099FF;}


#commentsm{float:right; margin-right:200px;

background:#06F none repeat scroll 0 0;
border: 2px solid #fff;
border-top-left-radius: 2em;
bottom: 0;
color: #fff !important;
cursor: pointer;
padding: 10px;
position: fixed;
right: 0;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 600px;
  background-color:#1A87C8;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: -115px;
  right: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
/*end main*/
.tooltip2 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip2 .tooltiptext2 {
  visibility: hidden;
  width: 600px;
  background-color:#1A87C8;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: -300px;
  right: 90%; height:300px; overflow:scroll;
}

.tooltip2 .tooltiptext2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip2:hover .tooltiptext2 {
  visibility: visible;
}

/* The Modal (background) */
#myBtn{
/*background:#093;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px; float:right; top:100px;
cursor: pointer; position:static;
text-transform:uppercase;*/

background:#F30 none repeat scroll 0 0;
border: 2px solid #fff;
border-top-left-radius: 2em;
bottom: 0;
color: #fff !important;
cursor: pointer;
padding: 10px;
position: fixed;
right: 0;
	
	}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}


/*WATCHLIST*/
.cfx-watch {
  display: inline-block;
  padding:0;
}

.cfx-watch .cfx-watch-label {
	display: inline-block;
	line-height: 24px;
	margin: 0 20px 0;
	vertical-align: middle;
	-webkit-transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
	transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}
.cfx-watch .cfx-watch-switch {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.26);
  -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
          transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  cursor: pointer;
}
.cfx-watch .cfx-watch-switch::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 18px;
  height: 18px;
  background: #fafafa;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  border-radius: 50%;
  -webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
          transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.cfx-watch .cfx-watch-switch:active::before {
  box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1);
}
.cfx-watch.active .cfx-watch-switch{
  background:#74A9F1;
}
.cfx-watch.active .cfx-watch-switch::before {
  left: 16px;
  background: #1A73E8;
}
.cfx-watch.active .cfx-watch-switch:active::before {
  box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(115,167,238,0.2);
}

.cfx-watch{ background:none!important; }
.cfx-watch.active .cfx-watch-label{ color: #1A73E8!important; font-weight:bold; }
.cfx-watch a .cfx-watch-label{ color:#F00!important; font-weight:bold; }

.m-status-green {
    background-color: #34bfa3;
    border-color: #34bfa3;
    color: #ffffff;
}.m-status-red {
    background-color: #F00;
    border-color: #F00;
    color: #ffffff;
}

#addusers{padding:5px; margin-bottom:10px; width:200px; text-align:center; float:right;}

.success2{
    padding: 15px;
    position: relative;
    display: block;
    margin: 5px 0;
    border-radius: 3px;
    color: #336633;font-weight:bold;
    background-color: #EBFCDA!important;
    font-size:12px!important;
}

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #E6F2F9;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #68C2E4;
  color: white;
}

a.button4{
display:inline-block;
padding:0.8em 1.4em;
margin:0 0.1em 0.1em 0;
border:0.16em solid rgba(255,255,255,0);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-weight:300;
color:#FFFFFF;
text-align:center;
transition: all 0.2s;

}
a.button4:hover{
border-color: rgba(255,255,255,1);color:#FFFFFF;
}
@media all and (max-width:30em){
a.button4{
display:block;
margin:0.2em auto;
}
}