/*! normalize.css v2.1.0 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
 /*   font-family: sans-serif; *//* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */ /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*!
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */
 
 

/* Reusable column setup */
.col {
    border:0px solid rgba(0,0,0,0);
    float:left;
    box-sizing:border-box;
    background-clip:padding-box !important;
}



    /* 1. 12 Column Grid 0px - Infinity 
    ----------------------------------------------------------------------------- 
    
    Span 1:    7.41666666667%
    Span 2:    15.8333333333%
    Span 3:    24.25%
    Span 4:    32.6666666667%
    Span 5:    41.0833333333%
    Span 6:    49.5%
    Span 7:    57.9166666667%
    Span 8:    66.3333333333%
    Span 9:    74.75%
    Span 10:    83.1666666667%
    Span 11:    91.5833333333%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 600px) {
        
        .col {
            margin-left:1%;
            padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        */
        
        .span_1 {
            width:7.41666666667%;
        }
        .span_2 {
            width:15.8333333333%;
        }
        .span_3 {
            width:24.25%;
        }
        .span_4 {
            width:32.6666666667%;
        }
        .span_5 {
            width:41.0833333333%;
        }
        .span_6 {
            width:49.5%;
        }
        .span_7 {
            width:57.9166666667%;
        }
        .span_8 {
            width:66.3333333333%;
        }
        .span_9 {
            width:74.75%;
        }
        .span_10 {
            width:83.1666666667%;
        }
        .span_11 {
            width:91.5833333333%;
        }
        .span_12 {
            margin-left:0;
            width:100%;
        }
    }



/* Font */
@font-face {
    font-family: 'regencielight';
    src: url('fonts/regencielight-webfont.eot');
    src: url('fonts/regencielight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/regencielight-webfont.woff') format('woff'),
         url('fonts/regencielight-webfont.ttf') format('truetype'),
         url('fonts/regencielight-webfont.svg#regencielight') format('svg');
    font-weight: normal;
    font-style: normal;

}



/****************************************
*           Global 
*****************************************/
/* My Green: #9CC763; */
html {
	/*background: #9CC763;*/
	/*background: #F2F6FA;*/
	/*background: rgba(156,199,99,0.1);*/
	background: rgb(243,243,243);
	background: #E4E4E4;
	background: #EDEDED;
	/*background: hsla(0, 0%, 95%, 1);*/
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #666;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	height: 100%;
  	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
} 

#initialLoadingScreen {
	position: absolute;
	z-index: 1999;
	width: 100%;
	height: 100%;
	background: #9CC763;
	color: white;
	text-align: center;
	padding-top: 200px;
}

.col-2{
	display: inline-block;
	width: 47%;
	margin: 1%;
}

.col-2 .box{
	width: 100%;
	margin: 5px;
}

body{
	height: calc(100% - 32px);
}

#pageWrapper, #dataNgView{
	/*height: calc(100% - 32px);*/
	height: 100%;
}



h1 {
	font-weight: 200;
	margin-bottom: 25px;
}

h2 {
	font-size: 28px;
	font-weight: 300;
	margin: 15px 0 5px 0;
}

h3, h4 {
	font-weight: 400;
	margin: 5px 0;
}



p {
	margin: 0;
}

a {
   outline: 0;
}

.fullWidth{
	width: 100%;
}

/*.superModal:before{
	content:'';
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: -1;
}*/
.superModal{
	position: fixed;
	top: 10%;
	left: 50%;
	min-width: 50%;
	min-height: 50%;
	text-align: center;
	vertical-align: middle;
	background: white;
	display: block;
	z-index: 2000;
	transform: translateX(-50%) ;
	/*outline: 9999px solid rgba(0,0,0,0.5);*/
	
}
.superOverlay{
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1900;
}

.superModalContainer{
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	outline: 9999px solid rgba(0,0,0,0.5);
	visibility: visible;
	transition: all 0.3s;
	transform: scale(1);
	opacity: 1;
	z-index: 2000;
}

.superModalContainer.hide{
	transform: scale(0.7);
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s;
	
}

.superModal ul{
	padding: 0;
}

#newTaskBtn,
.newItemButton{
	position: fixed;
	bottom: 10px;
	right: 10px;
	background: #9CC763;
	/*background: #4285f4;*/
	color: white;
	font-size: 30px;
	border: none;
	border-radius: 50%;
	z-index: 19;
	padding: 15px;
	cursor: pointer;
	box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
}

#newTaskBtn:hover,
.newItemButton:hover{
	box-shadow: 0 0 6px rgba(0,0,0,.16), 0 6px 12px rgba(0,0,0,.32);
}

.circleButton{
	background: #9CC763;
	display: inline-block;
	/*background: #4285f4;*/
	color: white;
	font-size: 30px;
	border: none;
	border-radius: 50%;
	padding: 15px;
	cursor: pointer;
	box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
}

.circleButton:hover{
	box-shadow: 0 0 6px rgba(0,0,0,.16), 0 6px 12px rgba(0,0,0,.32);
}

[class^="tick-"], [class*=" tick-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'FarmCloudIcons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tick-doubleUntick:before{
	content: "\e876";
}

.tick-doubleUntick:after{
	content: "\e876";
	margin-left: 0.5px;
}

.tick-oneTickOneUntick{

}

.tick-doubleTicked{

}


/****************************************
************ Header
*****************************************/
.small-logo{
	margin-top: 6px;
	text-decoration: none;
	border: none;
}

#agcloud{
	text-decoration: none;
	border: none;
	top: -3px;
	font-size: 18px;
}

ul {
	margin: 0;
}

ul li {
	display: inline-block;
	list-style-type: none;

}

li a {
	text-decoration: none;
}

#hamburger {
	display: none;
}

.topbar {
	background: #9CC763;
	padding: 5px 0 5px 150px;
	color: white;
	height: 30px;
	position: fixed;
	width: calc(100% - 100px);
	z-index: 3000;
	-webkit-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
}

.topbar img {
	display: inline;
	height: 25px;
}

.topbar span {
	display: inline;
	vertical-align: top;
	font-size: 16px;
	position: relative;
	top: 5px;
	font-weight: 400;
}

.topbar #logoutCordova,
.topbar #slideButton{
	font-size: 24px;
	cursor: pointer;
	display: inline-block;
	position: absolute;
	left: 0px;
}

.top-right {
	position: absolute;
	right: 0;
	top: -1px;
	display: inline-block;
}

.top-left {
	position: absolute;
	display: inline;
	top: -1px;
	left: 75px;
}

.wrapper {
	margin-left: 100px;
	padding-top: 40px;
	/*height: 100%;*/
	height: calc(100% - 22px);
}


.topbar a {
	color: white;
	font-size: 20px;
}

.top-right li {
	margin-right: 30px;
}

#newNotifications{
	display: none;
	z-index: 999;
}

#invitesIcon{
	display: none
}

#invites .invitation{
	text-align: center;
}

.appContentWithSideBar{
	display: inline-block;
	width: calc(85% - 10px);
	height: 100%;
}

.appSideBar{
	display: inline-block;
	width: 10%;
	vertical-align: top;
	text-align: center;
	font-size: 18px;
	margin-left: 30px;
}

.appSideBarTitle{
	font-weight: 400;
}

.sideIcon{
	font-size: 60px;
	padding: 5px;
}

.sideButton{
	margin: 10px;
	cursor: pointer;
}


/* Nav / Sidebar */
nav {
	background: #666666;
	position: fixed;
	width: 100px;
	height: 100%;
	display: inline-block;
	left: 0;
	top: 0;
	z-index: 9998;
	-webkit-box-shadow: 10px 0px 20px -10px rgba(102,102,102,1);
	-moz-box-shadow: 10px 0px 20px -10px rgba(102,102,102,1);
	box-shadow: 10px 0px 20px -10px rgba(102,102,102,1);
}

nav ul{
	padding: 10px 0 0 0;
	text-align: center;
}

#logoutUL{
	bottom: 0;
	text-align: center;
	position: fixed;
}


nav li a, #logout {
	font-weight: 500;
	color: #999999;
	font-size: 16px;
	padding-top: 20px;
	display: inline-block;
	position: relative;
}

nav li a:hover, #logout:hover{
	outline: 0;
	color: #9CC763;
}

.on {
	color: white;
}

nav li {
	text-align: center;
	display:block;
	/*margin-left: 10px;*/
}

#homeicon {
	font-size: 50px;
	position: relative;
	margin-left: 0px;
}

#appsicon {
	font-size: 50px;
	position: relative;
	left:0;
	margin-left: 0px;
	margin-bottom: 50px;
}

#farmicon {
	font-size: 50px;
	margin-bottom: -20px;
	padding-bottom: -20px;
	margin-left: 0px;
}

#farmword {
	margin-top: -0px;
}

#guideicon {
	font-size: 50px;
	margin-left: 0px;
	margin-top: 200px;
}


#logouticon {
	font-size: 50px;
	margin-left: 0px;
	position: relative;
}

#logout {
	cursor: pointer;
	display: inline-block;	
	text-align: center;
	left: 50%;
	/*transform: translate(-50%, 0);*/
}

#logoutBurger{
	/*width: 48%;*/
	cursor: pointer;
}

#burgerBottom {
	position: absolute;
	bottom: 20px;
	width: 100%;
}

.icon-notifications_Notifications:before, #invitesDiv:before{
	font-size: 24px;
	position: relative;
	top: 9px;
	cursor: pointer;
}
#invitesDiv {
	display: inline;
}

 #burgerUserIcon {
	width: 27px;
	height: 27px;
	border-radius: 50%;
	position: relative;
	/*cursor: pointer;*/
	display: inline-block;
	text-align: center;
	color: white;
	margin: auto;
	line-height: 27px;
}

#userImage {
	padding: 3px;
	width: 22px;
	height: 22px;
	line-height: 18px;
	border-radius: 50%;
	position: relative;
	top: 2px;
	cursor: pointer;
	display: inline-block;
	text-align: center;
}

.userImage div {
	top: -10px;
	margin-top: 2px;
	font-size: 18px;
}

/*.userImageMenu {
	display: none;
}*/

#userImage a {
	color: #666;
}

#userImage span {
	top: 2px;
	font-size: 18px;
}

#headerDropdown {
	width: 300px;

}

#headerDropdown li {
	padding: 20px 0;
	width: 300px;
	margin-left: -40px;
}

#notifications li, #invites li {
	border-bottom: 1px solid #999;
	width: 100%;
	padding: 10px;
	font-size: 14px;
	font-weight: 300;
	text-align: left;
	font-family: 'Roboto', sans-serif;
}



#notifications span, #invites span {
	font-size: 14px;
}

#notifications, #invites {
	width: 340px;
	margin-left: -200px;
	text-align: top;
	position: absolute;
	top: 4px;
}

#invites {
	margin-left: -150px;
}

#notifications li, #invites li  {
	width: 300px;
	padding: 20px 20px;
	
}

#invitesIcon{
	-webkit-transition: color 1s ease-in;
	        transition: color 1s ease-in;
}

.inviteFlash {
	color: red;
	-webkit-transition: color 2s ease-in;
	        transition: color 2s ease-in;
}


.invites:hover, .invitation:hover {
	background: white;
	cursor: default;
}

#farmName {
	margin-top:  -5px;
	padding: 0px 10px 10px 10px;
	border-radius: 5px;
}

#farmName span{
	display: inline-block;
	min-width: 50px;

}

#notifications .notificationIconDiv span {
	font-size: 50px;
	top: 0;
}

.notificationIconDiv{
	display: inline-block;
	width: 22%;
	vertical-align: top;
}

.notificationTitle{
	font-weight: 500;
}

.notificationText{
	top: 0;
	display: inline-block;
	width: 77%;
	overflow: none;
}

/* notification page */
#allNotifications {
	max-width: 1000px;
	text-align: center;
	margin: auto;
}

#allNotifications li{
	display: inline-block;
	width: 100%;
}
#allNotifications hr{
	margin: 5px;
}

.notiFullIconDiv{
	display: inline-block;
	max-width: 100px;
	font-size: 50px;
}

.notiFullText{
	display: inline-block;
	width: calc(99% - 100px);
}

#seeAllNotifications span{
	display: inline-block;
	width: 100%;
	text-align: center;
	font-weight: 500;
}

.agoSpan {
	float: right;
	padding-right: 10px;
	font-size: 12px;
}

.unread {
	background: #DEFFB3;
}

.fullNotiUnread{
	color: #9CC763;
}

#notificationsIcon{
	text-align: left;
}

#newNotifications, #newInvitations {
	position: absolute;
	padding: 3px;
	font-family: 'Roboto', sans-serif;
	top: 2px;
	background: red;
	width: 10px;
	height: 10px;
	line-height: 10px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	vertical-align: bottom;
	cursor: pointer;
	margin-left: -10px;
}

#newInvitations {
	margin-left: 15px;
}

#pageTitle {
	display: none;

	text-align: center;
	font-size: 18px;
	width: 90vw;
	left: 0;
	margin-top: 5px;
}

.profileContainer {
	width: 94%;
	margin: 1.5%;
	text-align: center;
}


.btn.btn-flat {
	font-size: 16px;
	padding: 3px;
	border-radius: 2px;
}

tbody {
	margin: 20px;
}

/*.btn-sm {
	background: white;
	border: 1px solid #E6E6E6;
	border-radius: 5px;
	color: #999;
}

.btn-sm:hover{
	background: #999;
	color: white;
}*/

.btn-sm:disabled {
	color: #E6E6E6;	
}

/* Home Page */

#homeWrapper{
	overflow-y: hidden; 
}

#homeWrapper #noFarmCover{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background: white;
	z-index: 1;
	text-align: center;
	max-width: 100%;
	padding-top: 10%;
}

#frontRainGraphs #noLocation{
	display: none;
}

#frontRainGraphs #noLocation h1{
	font-size: 120px;
}

#homeWrapper #noFarmCover #noFarmIcon{
	font-size: 100px;
}

.homeTitle{
	font-weight: 300;
	font-size: 30px;
}

.homeCol{
	width: 24.5%;
	vertical-align: top;
}

#notificationsGenerator{
	display: none;
}

.homeBox{
	margin-bottom: 10px;
}

#downloadsMenu ul h1{
	margin: 5px;
}

#downloadApps li{
	display: inline-block;
	padding: 0;
	text-align: center;
	max-width: 200px;
}

#downloadApps li:hover{
	background: #EEE;
}

#downloadApps li img{
	max-width: 90%;
	max-height: 90%;
}

#downloadApps, #downloadApps ul{
	padding: 0;
}

#downloadApps .downloadAppContainer{
	display: none;
	margin: 15px;
}

#developmentAPKs li{
	margin: 5px;
}

#developmentAPKs h1{
	font-size: 60px;
}

#downloadsMenu {
	border-radius: 10px;
	padding: 20px;
}

#latestBuildUrl{
	margin: 10px;
}

#downloadMenuContainer{
	display: none;
}

#downloadsOverlay{
	display: block;
}

#homeNotes{
	max-height: 500px;
	overflow: auto;
	text-align: center;
	position: relative;
	margin-bottom: 10px;
}

#homeNotes h1{
	margin-bottom: 0;
}

#homeNotes ul{
	padding-left: 0;
}

#weatherFront{
	position: relative;
}

.homeIcon{
	display: inline-block;
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 30px;
	/*box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.25);*/
	cursor: pointer;
	/*color: white;
	background: #9CC763;*/
	border-radius: 50%;
	padding: 9px;
}

.homeIcon:hover{
	color: #9CC763;
	background: white;
}

.homeIconRight{
	right: 0px;
	left: auto;
}

#homeNotes #noteDates .noteHeader{
	font-weight: 900;
}

#homeNotes #noteDates li{
		display: block;

}

#homeNotes #noteDates li li{

	display: inline-block;
	padding: 5px;
	border-radius: 2px;
	margin-bottom: 5px;
	margin-top: 4px;
	text-align: left;
}

#homeNotes #noteDates li li span{
	
}

#homeNotes .noteBubble{
	display: inline-block;
	font-weight: 300;
	background: hsla(0, 0%, 95%, 1);
	box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
}

#homeNotes .noteTitle{
	text-align: center;
	margin-bottom: 3px;
}

#homeNotes .noteBubble span{

}
#homeNotes .noteBubble .noteTitle{
	font-weight: 500;
}

.homeBox{
	position: relative;
}

#homeLocations h1{
	display: block;
	margin-bottom: 0;
}

#homeLocations ul{
	margin: 1.5%;
	width: 28%;
	height: 100%;
	padding: 0;
	display: inline-block;
	vertical-align: top;
	/*background: hsla(0, 0%, 95%, 1);*/
}

#homeLocations .locHeader{
	width: 100%;
	margin-bottom: 5px;
}

#homeLocations .icon{
	font-size: 50px;
}

#homeLocations .locHeader{
	font-weight: 400;
}

#homeLocations .person{
	padding: 5px;
	margin-top: 5px;
	font-weight: 400;
	width: calc(100% - 10px);
	border-radius: 2px;
}

#homeLocations .person span{
	
	
}


.nothingYet{
	margin-top: 10px;
	color: #999;
	display: none;
}

#weatherFront.fullScreen{
	position: fixed;
	height: calc(100% - 40px);
	width: calc(100% - 110px);
	top: 40px;
	left: 100px;
	z-index: 999;
}

#weatherFront iframe{
	height: 50vh;
	margin: 0;
}

#weatherFront.fullScreen iframe{
	height: calc(100% - 110px);
	width: calc(100% - 20px);
}

.weatherTile{
	display: inline-block;
	margin: 5px 10px;
}

#frontRainGraphs .noRain span{
	font-size: 80px;
}

#frontRainGraphs .noRain{
	font-weight: 400;
	margin-top: 20px;
	margin-bottom: 30px;
}

#frontRainGraphs .title{
	display: block;
}
/***** Weather *************/

#weatherFront h1{
	margin-bottom: 0;
}


/********* Timesheet Home Page **********/
#timesheetsFront .myLabels,
#timesheetOverflow .myLabels{
	position: absolute;
	font-size: 12px;
	color: #999;
}

#timesheetsFront #title,
#timesheetOverflow #title{
	position: absolute;
	font-weight: 500;
	left: 50%;
	transform: translate(-50%, 0);
}
#timesheetsFront #summary,
#timesheetOverflow #summary{
	position: absolute;
	font-weight: 400;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: 5%;
}
#timesheetsFront #topTime,
#timesheetOverflow #topTime{
	top: 22%;
	left: 50%;
	transform: translate(-50%, 0);
}

#timesheetsFront #bottomLeftTime,
#timesheetOverflow #bottomLeftTime{
	left: 9%;
	bottom: 21%;
}

#timesheetsFront #bottomRightTime,
#timesheetOverflow #bottomRightTime{
	right: 9%;
	bottom: 21%;
}

.topRight{
	position: absolute;
	display: inline-block;
	right: 10px;
	top: 10px;
	cursor: pointer;
}

/* Milk Production */
#homeMilk .loadingPlaceholder span{
	font-weight: 400;
}

#homeMilk .loadingPlaceholder .rotatingGear{
	margin-top: 50px;
}

#homeMilk #noMilkConnection h1,
#homeMilk #connectedNoData h1{
	margin-top: 25px;
	font-size: 100px;
}

#homeMilk #milkData table{
	width: 100%;
}

#homeMilk #milkData table td,
#homeMilk #milkData table tr{
	padding: 5px;
}

#homeMilk #milkData table td:not(:first-child){
	border-left: solid 1px #CCC;
}

/* Farm Notifications */
#farmNotifications{
	display: none;
	margin-bottom:  25px;
}

#farmNotifications ul {
	
	text-align: left;
}

#farmNotifications li{
	cursor: pointer;
}

/* Chat */

#chatBox {
	margin-bottom:  25px;
}

#chatBox hr{
	color: #999;
	/*box-shadow: 0 4px 7px 0px #CCC;*/
	margin: 0;
}

#viewChatDiv {
	height: 500px;
	width: 100%;
	text-align: left;
	overflow-y: scroll;
}

#chatToSend{
	margin-bottom: 0;
	width: calc(100% -12px);
	resize: none;
	min-height: 40px;
	text-align: left;
	padding: 2px;
	border: solid 1px #999;
}

#sendChat{
	width: 100%;
	margin: 0;
}

#sendChatDiv table{
	margin-top: 5px;
	width: 100%;
}




#main { 
	vertical-align: top
}

/* First time app use menus */

.menuUL{
	padding: 0;
}

.menuUL li{
	border: solid 1px #999;
	padding: 20px;
	width: calc(100% - 40px);
	margin-top: 10px;
	border-radius: 5px;
	cursor: pointer;
}

.menuUL li:hover{
	background-color: #E6E6E6;
}

.menuOL li{
	text-align: left;
}

.menuOL {
	display: inline-block;
}

.buttonList{
	padding: 0;
	margin-top: 20px;
}

.buttonList li{
	/*background: #9CC763;
	color: white;*/
	border: solid #999 1px;
	padding: 10px;
	border-radius: 2px;
	cursor: pointer;
}

.buttonList li:hover{
	background: #E6E6E6;
}

.buttonList li span{
	font-size: 50px;
}



/**********************************/
/*******   Tool Tips    ***********/
/**********************************/
/*standard = right*/
.tooltips {
  position: relative;
  display: inline;
}
.tooltips span {
  position: absolute;
  color: #FFFFFF;
  background: #9CC763;
  line-height: 30px;
  text-align: center;
  border-radius: 6px;
  opacity: 1;
  display: none;
}
.tooltips span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -8px;
  width: 0; height: 0;
  border-right: 8px solid #9CC763;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* left */
.tooltipLeft {
  position: absolute;
  display: inline-block;
}
.tooltipLeft span {
  position: fixed;
  color: #FFFFFF;
  background: #9CC763;
  line-height: 30px;
  text-align: center;
  border-radius: 6px;
  opacity: 1;
  z-index: 999;
}
.tooltipLeft span:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -8px;
  width: 0; height: 0;
  border-left: 8px solid #9CC763;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}


#noMatch span {
	top: 15px;
	right: -475px;
	width: 250px;
	font-size: 14px;
	background: #CF000F;
}

#noMatch span:after{
	border-right: 8px solid#CF000F;
}

#match span {
	top: 15px;
	right: -475px;
	width: 250px;
	font-size: 14px;
}



/**********************************/
/******* Hamburger Menu ***********/
/**********************************/

#burgerMenu {
	display: none;
	position: fixed;
	height: 100%;
	background: white;
	right: 0;
	z-index: 10;
	min-width: 200px;
	max-width: 400px;
	width: 90%;
	color: #666;
	-webkit-box-shadow: -5px 0px 5px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: -5px 0px 5px 0px rgba(0,0,0,0.25);
	box-shadow: -5px 0px 5px 0px rgba(0,0,0,0.25);
}

#burgerMenu li #homeicon, #burgerMenu li #guideicon,
#burgerMenu li #farmicon, #burgerMenu li #appsicon,
#burgerMenu li #logouticon{
	font-size: 30px;
	line-height: 30px
}

#burgerNav .burgerMainIcon span,
#burgerBottom .burgerMainIcon span{
	margin-right: 20px;
}

#burgerMenu ul {
	padding: 0;
}

#burgerMenu .on {
	/*background: #CCC;*/
	color: #999;
}

#burgerMenu .on a{
	color: #9CC763;
}

#burgerMenu li.burgerMainIcon {
	padding: 10px 20px;
}

#closeBurgerMenu{
	position: absolute;
	left: 0;
	top: 10px;
}

#burgerMenu .icon-notifications_Notifications:before{
	top: 0;
}

#burgerMenu li{
	padding: 10px 0;
	text-align: center;
	display: inline-block;
}


#burgerMenu li a:hover{
	color: #9CC763;
}

#burgerMenu li a {
	color: #666;
	font-size: 16px;
}

#burgerMenu .burgerMainIcon .mainBurgerIconText{
	margin-top: 5px;
	display: inline-block;
	padding-bottom: 5px;
	vertical-align: top;
}

#burgerMenu #closeBurgerMenu{
	font-size: 24px;
	padding: 0;
	cursor: pointer;
}

#burgerMenu #burgerInvitesIcon, #burgerMenu #burgerNotificationsIcon,
#burgerMenu #closeBurgerMenu {
	width: 15%;
}

/*#burgerMenu #burgerUserName {
	width: 65%;
	text-align: right;
	padding-right: 5px;
	font-size: 18px;
	vertical-align: top;
	position: absolute;
	right: 10px;
}*/

#burgerMenu #burgerUserName span:nth-child(2){
	margin-left: 5px;
	margin-bottom: 5px;
	display: inline-block;
}

#burgerMenu #logout {
	cursor: pointer;
	width: 48%;
	display: inline-block;
}

#burgerDropdown {
	width: 95%;
	margin: 0;
	left: 2.5%;
	top: 50px;
}

#burgerDropdown li {
	width: 90%;
}

#burgerMenu #notifications, #burgerMenu #invites {
	top: 15px;
	right: 2.5%;
	width: 95%;
}

#burgerMenu #notifications li, #burgerMenu #invites li {
	width: 100%;
}


#burgerMenu .farmName {
	text-align: left;
	padding-left: 20px;
	font-size: 16px;
	width: calc(100% - 20px);
	border-bottom: 1px solid white;
}

#burgerMenu #burgerUserName #burgerUserIcon{
	margin-right: 18px;
}

#burgerMenu #farmName span:nth-child(2){
	display: inline-block;
	margin-top: 3px;
	vertical-align: top;
}

#burgerMenu #burgerFarmNameLine {
	/*border-top: 1px solid #CCC;*/
	margin-top: 5px;
	padding-top: 15px;
}

#burgeruserIcon {
	margin-right: 5px;
}

#burgerMenu .icon-people_people {
	font-size: 25px;
	/*padding-right: 5px;*/
}

#iconsUL {
	/*border-bottom: 1px solid #CCC;*/
	text-align: right;
}

#burgerMenu hr{
	margin-left: 10px;
	margin-right: 10px;
}



/*******************/
/* Mobile App Menu */
/*******************/

#mobileAppMenu{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	color: white;
	background-color: #9CC763;
}

#mobileAppMenuHeader:nth-child(2){
	right: 0;
}

#mobileAppMenuButton{
	display: none;
	width: 50px;
	height: 50px;
	right: 0;
	bottom: 0;
	color: white;
	background: skyblue;
	text-align: center;
	vertical-align: bottom;
	position: absolute;
	padding: 5px;
	border-radius: 50%;
	font-size: 30px;
	cursor: pointer;
}

#mobileAppMenuButton div{
	display: inline-block;
	margin-top: 5px;
}

/****************************************
******
************ Content Rules
************************************
*********** Global CSS
******
*****************************************/

.box {
	background-color: white;
	border-radius: 2px;
	padding: 10px;
	display: inline-block;
	vertical-align: top;
	/*box-shadow: 0 4px 16px 0 rgba(60,55,75,.16);*/
	box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
}


.outerBox {
	vertical-align: top;
	margin: 1%;
	height: 98%;
}

.outerBoxSideBar {
	vertical-align: top;
	margin: 1%;
	height: 98%;
	display: inline-block;
	width: calc(98% - 100px);
	margin-left: 110px;
}

.st-pusher .outerBoxSideBar{
	margin-left: 0;
	width: 100%;
}

.fullWidth {
	width: 98%;
}

.container {
	padding-top: 10px;
	display: inline-block;
	text-align: center;
}

.container .box {
	width: 90%;
}

.greyBox{
	background: rgb(243, 243, 243);
	background: #E4E4E4;
	background: #EDEDED;;
}

.fullContainer{
	padding-top: 10px;
	display: inline-block;
	text-align: center;
	width: 100%;
}

.modal{
	top: 100px;
	display: none;
	background-color: white;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	z-index: 1000;
	position: absolute;
	left: calc(50% + 50px);
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
}


input[type="submit"] {
	border: 0;
}

input[type="submit"], input[type="button"], .button {
	background-color: #9CC763;
	color: white;
    border: 0px;
    box-shadow: none;
    font-size: 17px;
    font-weight: 500;
    border-radius: 2px;
    padding: 0px 32px;
    margin: 0px 5px 0 5px;
    cursor: pointer;
    height: calc(3em + 0px);
    vertical-align: bottom;

}

.button span{
	display: inline-block;
	margin-top: 1em;/*need to perfect*/
}

input[type="submit"], input[type="button"], .button a {
	text-decoration: none;
	color: white;
}



.inlineButton, .inlineButton {
	background-color: #9CC763;
	padding: 4px;
	border-radius: 3px;
	display: inline-block;
	color: white;
	cursor: pointer;
	margin: 5px;
	
}

button:hover, input[type="button"]:hover{
	background: #9ABF69;
}

.link {
	font-weight: 500;
	color: #9CC763;
	cursor: pointer;
}

.menu {
	display: block;
	position: fixed;
	top: 50px;
	width: 500px;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
	box-shadow: 5px 5px 20px black;
	text-align: center;
	background: white;
	z-index: 20;
	max-height: calc(100% - 80px);
	overflow-y: auto;
	overflow-x: hidden; 
}

.smallMenu {
	width: 30vw;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
}

.mediumMenu {
	width: 50vw;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
}

.largeMenu {
	width: 70vw;
	left: 50%;
	overflow: auto;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
}

.XLMenu {
	width: 90vw;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
}

.smallMenu input, .smallMenu div, .smallMenu textarea {
	width: 95%;
}

.x{
	display: inline-block;
	position: absolute;
	top: 5px;
	right: 5px;
}

.menuItem{
	width: 100%;
}

.menuContainer {
	display: inline-block;
}


textarea {
	border-color: #CCC;
	border-radius: 5px;
	padding: 5px;
}

.menuX {
	position: absolute;
	top: 5px;
	right: 10px;
	font-size: 24px;
	font-weight: 500;
	cursor: pointer;
}

.rightIcons li {
	display: inline-block;
	font-size: 65px;
	margin: 10px;
	cursor: pointer;
	text-align: center;
}

.rightIcons li span {
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	display: inline-block;
}

.rightIcons li:hover {
	color: #9CC763;
}

.rightIcons li:before {
	margin-bottom: 5px;
	display: inline-block;
}

.selected {
	color: #9CC763;
}

.rightBox {
	font-family: 'Roboto', sans-serif;
	text-align: center;
	position: relative;
	vertical-align: top;
	display: inline-block;
}

.info span{
	font-size: 85px;
	text-align: center;
	display: inline-block;
	/*margin-bottom: 15px; - messes with sweet alert*/
}

.info p {
	font-family: 'Roboto', sans-serif;
}

.spacedList li{
	display: inline-block;
	margin-top: 10px;
	font-weight: 500;
}


.appLeftSideBar{
	height: 100vh;
	top: 0;
	position: fixed;
	display: inline-block;
	width: 100px;
	background: white;
	overflow-y: hidden;
	-webkit-box-shadow: 10px 0px 20px -10px rgba(102,102,102,1);
	-moz-box-shadow: 10px 0px 20px -10px rgba(102,102,102,1);
	box-shadow: 10px 0px 20px -10px rgba(102,102,102,1);
}
.appLeftSideBar ul{
	padding-left: 0;
	padding-top: 40px;
}

.appLeftSideBar li{
	width: 80px;
	margin: 15px 10px;
	text-align: center;
	cursor: pointer;
}

.appLeftSideBar li:hover,
.appLeftSideBar li.selected{
	color: rgb(156, 199, 99);
}

.appSideBarIcon{
	font-size:50px;
}



.dropdownMenu {
	position: absolute;
	display: inline-block;
	width: 200px;
	background: white;
	color: #666666;
	margin-left: -150px;
	margin-top: 35px;
	box-shadow: 5px 5px 20px black;
	border-radius: 5px;
	padding: 0;
	z-index: 20;
}

.dropdownMenu li {
	position: relative;
	display: inline-block;
	width: 200px;
	border-bottom: 1px #CCC solid;
	padding: 10px 0;
	cursor: pointer;
	z-index: 30;
}

.dropdownMenu li:last-child{
	border-bottom: none;
}

.dropdownMenu li:hover {
	background: #EFFFD9; 
}



.invisibleOverlay {
	display: inline-block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 15;
}

.visibleOverlay {
	background: hsla(0,0%,0%,0.5);
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9;
}

.visibleOverlayNonClick {
	background: hsla(0,0%,0%,0.5);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.fullScreenMenuOverlay{
	position: fixed;
	width: calc(100% - 100px);
	height: calc(100% - 40px);
	top: 40px;
	left: 100px;
	background: white;
}

#burgerMenu .visibleOverlay {
	z-index: -100;
}

#burgerMenu {
	z-index: 99999999;
}

.selector {
	cursor: pointer;

}

.menu input, .menu .input{
	text-align: center;
}

.menuSave {
	 position: relative;
	 margin-top: 50px;
}

.bigButton {
	padding: 20px;
	border-radius: 10px;
	font-size: 20px;
	border: 2px solid #9CC763;
	background: white;
	color: #9CC763;
	margin: 10px;
}

.bigButton:hover {
	background: #9CC763;
	color: white;
}

.newsFeed {
	text-align: left;
	white-space: pre-wrap;
}

.newsFeed li{
	border-top: 1px solid #CCC;
	display: inline-block;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
}

.newsFeedAppTag {
	background: #E6E6E6;
	display: inline-block;
	padding: 0 5px;
}


.textInput {
	display: inline-block;
}

.appTitle {
	font-size: 24px;
	display: inline-block;
}

.menuTitle {
	font-size: 24px;
	display: inline-block;
	padding: 10px;
}

.iconButton {
	display: inline-block;
	cursor: pointer;
	font-size: 18px;
	padding: 5px;
	margin-left: 5px;
	border: 1px solid #999;
	border-radius: 5px;
	color: #666;
}

.iconButton:hover{
	background: #999;
	color: white;
}

.iconButton span {
	font-family: roboto;
	font-weight: 300;
}

.squareButton {
	width: 80px;
	height: 70px;
	color: white;
	text-align: center;
	padding-top: 10px;
	border-radius: 50%;
	background: #9CC763;
	/*border: solid 2px #9CC763;*/
	margin: 2px;
	color: white;
	display: inline-block;
	cursor: pointer;

}

.squareButton:hover {
	background: #9ABF69;
}


.hoverInfo{
	display: inline-block;
	background: white;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	text-align: center;
	font-size: 20px;
	line-height: 20px;
	font-weight: 500;
	vertical-align: middle;
	color: #CCC;
	cursor: pointer;
	margin-top: -10px;
}

.hoverInfoGreen{
	color: #9CC763;
}

.hoverInfo:hover .hoverInfoBox{
	display: inline-block;
}

.hoverInfoBox {
	position: absolute;
	display: none;
	background: #9CC763;
	z-index: 99999999;
	max-width: 400px;
	margin-left: 15px;
	font-size: 16px;
	font-weight: 300;
	padding: 10px;
	border-radius: 5px;
	color: white;
}


.noFarmMessage{
	padding-top: 50px;
	text-align: center;
}

.noFarmMessage .bigIcon::before{
	font-size: 100px;
}

.inlineColorPicker li{
	border-radius: 50%;
	padding: 5px;
	width: 17px;
	height: 17px;
	cursor: pointer;
}

.inlineColorPicker li span{
	visibility: hidden;
}

.inlineColorPicker li.selected span{
	visibility: visible;
}



/* Date Picker */

.dtp-close a{
	text-decoration: none;
}








/*.appTopBar {
	border-bottom: #CCC 1px solid;
	margin-bottom: 0px;
}*/

/****************************************
************ Specific Content
*****************************************/

/********* Dashboard *********/

#dashtemp {
	position: absolute;
	vertical-align: middle;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/********* Apps *********/

.bronze:before,
.silver:before,
.gold:before,
.platinum:before{
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	
	line-height: 30px;
	margin-top: 10px;
	margin-left: -15px; 
	position: absolute;
}


.bronze:before{
	background: #cd7f32;
}

.silver:before{
	background: #c0c0c0;
}

.gold:before{
	background: #FFD700;
}

.platinum:before{
	background: white;
}
.appsContainer li{
	width: 150px;
	height: 150px;
	text-align: center;
	padding: 20px;
	margin: 20px;
	vertical-align: top;
}

.appsContainer{
	padding: 0px;
	text-align: center;
}


#noFarmAppsPage{
	text-align: center;
	padding: 50px;
}

#noFarmAppsPage h1{
	width: 100%;
	font-size: 70px;
}

.icon-icons_LeavePlanner:before {
	height: 100px;
}

.appIcon {
	font-size: 100px;
}

.appBox span{
	/*color: white;*/
	font-size: 18px;
	
	display: inline-block;
}

.appBox .appName{
	font-weight: 400;
	transition: 1s;
	color: #757575;
}

.appBox:hover .appName{
	color: #9CC763;
	transition: 1s;
}

.appBox span:last-child{
	
}

.appIcon span{
	font-size: 90px;
	color: #9CC763;
    background: white;
    padding: 35px;
    border-radius: 50%;
    transition: 1s;
    
    box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.25);
}

.appBox {
	display: none;
	cursor: pointer;
	text-decoration: none;
	color: #999;
}

.appBox .appIcon:hover span {
	background: #9CC763;
    color: white;
    cursor: pointer;
    transition: 1s;
} 

.appBox a {
	font-size: 20px;
	color: #999;
	display: inline-block;
}

.appBox span{
	/*padding: 10px 0px;
	margin-top: 15px;*/

}

.appName{
	display: inline-block;
	margin-top: 5px;
	padding-top: 5px;
	margin-bottom: -10px;
}

.notReady .appIcon span{
	background: #CCC;
	color: white;
}


	

/******** Angular *************/

.ng-invalid.ng-dirty {
	border-color: #FA787E;
}


/******** Welcome Page **********/
#sign {
	font-size: 120px;
	margin: 0px 20px 0px 0; 
	vertical-align: bottom;

}

#content {
	text-align: center;
	display: inline-block;
}

#content li {
	text-align: left;
	font-weight: 400;
}

#signDiv {
	display: inline-block;
	vertical-align: top;
	margin-top: 10px;
}

#welcomeMessage h1 {
	font-size: 60px;
	font-weight: 100;
}

#welcomeMessage button {
	margin-top: 30px;
	font-size: 24px;
}

.profileContainer h1 {
	display: block;
}

.innerContainer{
	display: inline-block;
}

.profileTitle {
	text-align: center;
}

.profileTitle h3{
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 10px;
}

.profileInput{
	width: 100%;
}

.profileSelect{
	padding: 10px;
	margin: 1px;
}

.innerContainer tr{
	padding: 10px;
}

.innerContainer table {
	text-align: left;
	vertical-align: middle;
}

.innerContainer input[type=text],
.innerContainer input[type=password]{
	right: 0;
	margin: 1px;

}

hr {
	color: #CCC;
	border: 1px solid #dfdfdf;
	margin: 15px 0;
}

#powerSavingSwitchContainer{
	margin: 10px 0 5px 0px; 
}

.negative, input[type=button].negative {
	background: #CF000F;
	color: white;
	border: none;
}

.negativeText{
	color: #CF000F;
}

.negativeOutline {
	border: solid 2px #CF000F;
	color: #CF000F;
}

.negativeOutline:hover{
	background: #CF000F;
	color: white;
}

.negative:hover, input[type=button].negative:hover  {
	background: #B5000D;
	color: white;
}

.negativeText:hover{
	color: #B5000D;
}

.cancel, input[type="button"].cancel{
	background: #bfbfbf;
	color: white;
	border: none;
}

.cancel:hover, input[type="button"].cancel:hover{
	background: #acacac;
}

.hidden{
	display: none;
}

/* Side Nav */
#navMenu{
	/*width: 100%;
	padding: 20px;
	padding-left: 30px;*/
	height: 100%;
	background: white;
}

#navMenu ul{
	padding-left: 15px;
}

#navMenu #mainUL{
	height: calc(100% - 110px);
	overflow-y: auto;
}

#navMenu ul li{
	display: block;
	margin-top: 15px;
	vertical-align: middle;
}

#navMenu ul li.clickable{
	/*font-weight: 400;*/
	cursor: pointer;
}
#navMenu li span{
	font-size: 30px;
	margin-right: 10px;
	vertical-align: middle;
	display: inline-block;
}

#navMenu #topHamburger{
	background: #E6E6E6;
}

#navMenu #hamburgerBottom{
	position: fixed;
	bottom: 0;
	padding-bottom: 15px;
	background: white;
}

#navMenu #hamburgerBottom hr{
	margin-top: -2px;
}

#navMenu hr{
	width: 230px;
}

.st-container,
.st-pusher,
.st-content {
	height: 100%;
}

.st-content {
	overflow-y: scroll;
	background: #f3efe0;
}

.st-content,
.st-content-inner {
	position: relative;
}

.st-container {
	position: relative;
	overflow: hidden;
	margin-top: -32px;
}

.st-container .outerBox,
.st-container .outerBoxSideBar{
	margin-top: 50px;
}

.st-pusher {
	position: relative;
	left: 0;
	z-index: 99;
	height: 100%;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.st-pusher::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	background: rgba(0,0,0,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
	transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.st-menu-open .st-pusher::after {
	width: 100%;
	height: 100%;
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.st-menu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	visibility: hidden;
	width: 270px;
	height: 100%;
	background: #48a770;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.st-menu::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	content: '';
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.st-menu-open .st-menu::after {
	width: 0;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
	transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.st-container {
	-webkit-perspective: 1500px;
	perspective: 1500px;
	-webkit-perspective-origin: 0% 50%;
	perspective-origin: 0% 50%;
}

 .st-pusher {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.st-menu-open .st-pusher {
	-webkit-transform: translate3d(270px, 0, 0);
	transform: translate3d(270px, 0, 0);
}

.st-menu {
	-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
	transform: translate3d(-100%, 0, 0) rotateY(-90deg);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.st-menu-open .st-effect-7.st-menu {
	visibility: visible;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
	transform: translate3d(-100%, 0, 0) rotateY(0deg);
}

.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  /*top: 50%;*/
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: white;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.35s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -6px; }
  .hamburger-inner::after {
    bottom: -6px; }

    .hamburger--arrowturn.is-active .hamburger-inner {
  transform: rotate(-180deg); }
  .hamburger--arrowturn.is-active .hamburger-inner::before {
    transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
  .hamburger--arrowturn.is-active .hamburger-inner::after {
    transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }

    /*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
}

/******************************************
*******************************************
************ Colours + Colour Picker ******
*******************************************
*******************************************/

.colour {
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

#colourBox {
	position: absolute;
	display: inline-block;
	width: 160px;
	height: 160px;
	border: 1px white solid; 
	background: white;
	z-index: 20;
	border-radius: 5px;
	box-shadow: 5px 5px 20px black;
}

.colourP {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 5px;
	border-radius: 50%;
	cursor: pointer;
}

.currentColour {
	box-shadow: inset 0px 0px 0px 3px #666;
}

#changeColour:after {
	margin-left: 30px;

}

.white {
	color: #9CC763;
	background: white;
}

.blue {
	color: white;
	background: #4183D7;
}

.blueText {
	color: #4183D7;
	border-color: #4183D7;
}

.blueTrans{
	color: white;
	background: rgba(65,131,215,0.3);
}

.blueTrans.selected,
.blueTrans:hover{
	color: white;
	background: rgba(65,131,215,1);
}

.red {
	color: white;
	background: #CF000F;
}

.redText {
	color: #CF000F;
	border-color: #CF000F;
}

.redTrans{
	color: white;
	background: rgba(207,0,15,0.3);
}

.redTrans.selected,
.redTrans:hover{
	color: white;
	background: rgba(207,0,15,1);
}

.green {
	color: white;
	background: #26A65B;
}

.greenText {
	color: #26A65B;
	border-color: #26A65B;
}

.greenTrans{
	color: white;
	background: rgba(38,166,91,0.3);
}

.greenTrans.selected,
.greenTrans:hover{
	color: white;
	background: rgba(38,166,91,1);
}

.yellow {
	color: white;
	background: #F4D03F;
}

.yellowText {
	color: #F4D03F;
	border-color: #F4D03F;
}

.yellowTrans{
	color: white;
	background: rgba(244,208,63, 0.3);
}

.yellowTrans.selected,
.yellowTrans:hover{
	color: white;
	background: rgba(244,208,63, 1);
}

.pink {
	color: white;
	background: #F62459;
}

.pinkText {
	color: #F62459;
	border-color: #F62459;
}

.pinkTrans{
	color: white;
	background: rgba(246,36,89, 0.3);
}

.pinkTrans.selected,
.pinkTrans:hover{
	color: white;
	background: rgba(246,36,89, 1);
}

.purple {
	color: white;
	background: #8E44AD;
}

.purpleText {
	color: #8E44AD;
	border-color: #8E44AD;
}

.purpleTrans{
	color: white;
	background: rgba(142,68,173, 0.3);
}

.purpleTrans.selected,
.purpleTrans:hover{
	color: white;
	background: rgba(142,68,173, 1);
}

.orange {
	color: white;
	background: #F89406;
}

.orangeText {
	color: #F89406;
	border-color: #F89406;
}

.orangeTrans{
	color: white;
	background: rgba(248,148,6, 0.3);
}

.orangeTrans.selected,
.orangeTrans:hover{
	color: white;
	background: rgba(248,148,6, 1);
}

.brown {
	color: white;
	background: #96281B;
}

.brownText {
	color: #96281B;
	border-color: #96281B;
}

.brownTrans{
	color: white;
	background: rgba(150,40,27, 0.3);
}

.brownTrans.selected,
.brownTrans:hover{
	color: white;
	background: rgba(150,40,27, 1);
}

.lightBlue {
	color: white;
	background: #6BB9F0;
}

.lightBlueText {
	color: #6BB9F0;
	border-color: #6BB9F0;
}

.lightBlueTrans{
	color: white;
	background: rgba(107,185,240, 0.3);
}

.lightBlueTrans.selected,
.lightBlueTrans:hover{
	color: white;
	background: rgba(107,185,240, 1);
}

.grey{
	background: #CCC;
	color: white;
}

.greyText {
	color: #CCC;
}

/* adaptive placeholders */
input[type="text"], input[type="password"], input[type="number"], input[type="date"], .inputNoType{
  box-sizing: border-box;
  
  height: calc(3em + 2px);
  margin: 0 0 1em;
  padding: 1em;
  border: 1px solid #cccccc;
  
  border-radius: 2px;
  background: #fff;
  resize: none;
  outline: none;
}
input[type="text"][required]:focus {
  border-color: #00bafa;
}
input[type="text"][required]:focus + label[placeholder]:before {
  color: #00bafa;
}
input[type="text"][required]:focus + label[placeholder]:before,
input[type="text"][required]:valid + label[placeholder]:before {
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);
          transform: translate(0, -1.5em) scale(0.9, 0.9);
}
input[type="text"][required]:invalid + label[placeholder][alt]:before {
  content: attr(alt);
}
input[type="text"][required] + label[placeholder] {
  display: block;
  pointer-events: none;
  line-height: 1em;
  margin-top: calc(-3em - 2px);
  margin-bottom: calc((3em - 1em) + 2px);
}
input[type="text"][required] + label[placeholder]:before {
  content: attr(placeholder);
  display: inline-block;
  margin: 0 calc(1em + 2px);
  padding: 0 2px;
  color: #898989;
  white-space: nowrap;
  -webkit-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: center;
}

/**************************
/**** Pace loading bar ******/
/***************************/
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #ffffff;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #ffffff, 0 0 5px #ffffff;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

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



/****************************/
/***** loading spinnner *****/
/****************************/
/* NEW */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.rotatingGear {
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
}


/* OLD */
.loadingScreen{
	z-index: 9999999;
	position: absolute;
	width: calc(100% - 100px);
	height: 100%;/*98vh;*/
	top: 0;
	background: #9CC763;
	text-align: center;
}

.st-pusher .loadingScreen{
	width: 100%;
}

.loadingScreen h1 {
	color: white;
}

.loadingContainer{
	margin-top: 20%;
}

.loader2,
.loader2:before,
.loader2:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader2:before,
.loader2:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader2:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader2 {
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader2:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #ffffff;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em #ffffff;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #ffffff;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em #ffffff;
    height: 5em;
  }
}


/*.loaderBG {
	width: 5em;
	height: 5em;
	background: white;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2.5em 0 0 -2.5em;
	border-radius: 50%;
	display: none;
}

.loaderBGShowing{
	width: 5em;
	height: 5em;
	background: #9CC763;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2.5em 0 0 -2.5em;
	border-radius: 50%;
}


.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}
.loader:before,
.loader:after {
  position: absolute;
  content: '';
}
.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: white;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}
.loader {
  font-size: 11px;
  text-indent: -99999em;
  margin: -5em 0 0 -5em;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em #9CC763;
}
.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: white;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}*/

/***********************
 On / Off switch
 **********************/
.onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid white; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -webkit-transition: margin 0.3s ease-in 0s;
            transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 16px;
    background-color: #9CC763; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 16px;
    background-color: #CCC; color: white;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 56px;
    border: 2px solid white; border-radius: 20px;
    -webkit-transition: all 0.3s ease-in 0s;
            transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}



/************************************/
/********** Media Queries ***********/
/************************************/

@media screen and (max-width: 1650px){


	.homeCol{
		width: 33%;
	}
}

/* Tablet Landscape (light blue) */ 
@media screen and (max-width: 1200px){
	/*remove after testing */
	body {
		/*background: lightblue;*/
	}
	.homeCol{
		width: 49.5%;
	}

	.appIcon span{
		font-size: 50px;
		padding: 25px;
	}

	.appsContainer li {
		height: 125px;
		width: 125px;
		margin: 0px;
	}

	/*.dayCol {
		margin: 0 0.25%;
	}*/

	/* Side Bar */
	/* make side bar smaller, smaller icons with no words (add tool tips)*/
}

/* Tablet Portrait (lime) */
@media screen and (max-width: 1000px){
	/*remove after testing */
	body {
		/*background: lime;*/
	}

	/* Top Bar */
	.top-right li {
		margin-right: 20px;
	}

	.top-right{
		right: 150px;
	}

	/* Website */




	.appBox span{
		
		
	}

	.appBox .appName{

	}



	.appContentWithSideBar{
		width: calc(84% - 10px);
	}
		
}


/* Mini Tablet (orange) */
@media screen and (max-width: 800px){
	/*remove after testing */
	body {
		/*background: orange;*/
	}

	/* Top Bar */
	#userName {
		display: none;
	}

	#spacer {
		margin-left: 40px;
	}

	#hamburger {
		position: fixed;
		display: inline-block;
		top: -6px;
		right: -8px;
		margin-left: 100px;
		cursor: pointer;
	}

	#hamburger span {
		font-size: 42px;
	}

	.topbar{
		width: 100%;
	}

	/* Hamburger */

	.top-left ul {
		padding: 3px 0 0 5px;
	}




	/* Side Bar */
	nav {
		display: none;
	}

	.loadingScreen{
		width: 100%;
	}

	.wrapper {
		margin-left: 0;
	}

	.top-left{
		left: 0;
	}

	/* Website*/
	.outerBox {
		margin-left: 4px;
		margin-right: 10px;
	}

	.wrapper {
		margin-top: 5px;
	}

	.fullScreenMenuOverlay{
		width: 100%;
		left: 0;
	}


}

@media screen and (max-width: 700px){
	.appContentWithSideBar{
		width: 99%;
		margin-top: 100px;
	}

	.outerBoxSideBar{
		width: 100%;
		margin: 0;
	}

	.homeCol{
		width: 100%;
	}

	.homeMain{
		
	}

	.appSideBar{
		position: absolute;
		top: 0;
		left: 0;
		width: 99%;
		height: 70px;
		margin-left: 0;
	}

	.appLeftSideBar{
		height: 80px;
		width: 100%;
		text-align: center;
		box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
		position: relative;
		z-index: 2;

	}

	.appLeftSideBar ul{
		padding: 0;
	}

	.appLeftSideBar li{
		margin-left: 2px;
		margin-right: 2px;
		width: 50px;
		font-weight: 400;
	}

	.appLeftSideBar .appSideBarIcon{
		font-size: 30px;
	}

	.appLeftSideBar .appSideBarTitle{
		font-size: 12px;
	}

	.appSideBar .sideButton{
		display: inline-block;
	}

	.sideButton{
		margin: 0px 10px;
		cursor: pointer;
		font-size: 16px;
	}

	.sideIcon{
		font-size: 40px;
		padding: 5px;
	}

	.superModal{
		min-width: 80%;
		top: 130px;
	}
}

/* Phablet (yellow) */
@media screen and (max-width: 600px){
	/*remove after testing */
	body {
		/*background: yellow;*/
	}

	/* Top Bar */
	#farmName {
		display: none;
	}

	/* Website */
	.appsContainer li {
		height: 100px;
		width: 100px;
		margin: 0px;
	}

	.appBox span{
		font-size: 14px;
	}

	.appIcon span{
		font-size: 40px;
		padding: 20px;
	}



	.appIcon {
		font-size: 80px;

	}

	.outerBox {
		margin-left: 4px;
		margin-right: 0px; /* was 15px - unsure why.  Changed to 0 for notepad cordova. */
	}

	.largeMenu{
		width: 95%;
	}



}


/* Phones (blue) */
@media screen and (max-width: 400px){
	/*remove after testing */
	body {
		/*background: royalblue;*/
	}

	/* nav */
	#agcloud {
		display: none;
	}
	
	#burgerMenu {
		width: 95%;
	}

	#right #invitesIcon, #right #notificationsIcon, #right #userImage {
		display: none;
	}

	#pageTitle {
		display: inline-block;
	}

	.appTitle {
		display: none;
	}

	.superModal{
		min-width: 95%;
		top: 130px;
	}

	/* Website */
	/*#mobileAppMenuButton{
		display: inline-block;
	}*/

	.appsContainer li {
		height: 90px;
		width: 90px;
		margin: 2px 0;
		padding: 10px 0 0 0;
	}

	.appsContainer {
		padding: 5px;
		width: 100%;
		margin: auto;
		text-align: center;
	}

	.appBox span{
		font-size: 12px;
		margin-top: 2px;
	}

	.appsContainer .appBox{
		margin: 10px;
	}

	.appsContainer br{
		line-height: 1px;
	}

	.appIcon span{
		font-size: 40px;
		padding: 15px;
	}

	.appLeftSideBar li{
		margin: 15px 0;
	}

	.outerBox {
		margin-left: 2px;
		margin-right: 15px;
	}

	.menu, .smallMenu, .mediumMenu, .largeMenu {
		/*top: 25px;*/
	}


	#manageFarmPage tr > *:nth-child(2) {
   	/* display: none;*/
	}

	#manageFarmPage tr td:last-child .editBtn{
		padding: 5px;
		height: auto;
	}
}

/* Small Phones (pink) */
@media screen and (max-width: 300px){
	/*remove after testing */
	/*body {
		background: pink;
	}*/

	.appSideBar{
		height: 60px;
	}

	.appContentWithSideBar{
		margin-top: 90px;
	}

	.sideButton{
		margin: 0px 5px;
		cursor: pointer;
		font-size: 14px;
	}

	.sideIcon{
		font-size: 30px;
		padding: 4px;
	}

	#pageWrapper #main{
		width: 100%;
	}
}


@media screen and (max-height: 640px){
	nav li span:not(#farmword){
		font-size: 30px;
	}
}



@media screen and (max-height: 400px){
	.menu{
		max-height: calc(100% - 71px);
	}
}


/* Main Div's */

#mainFarmPage {
	display: none;
}

#mainFarmPage input[type="button"]{
	margin-top: 10px;
}

.colWidth {
	margin-right: 15px;
} 

#noFarm {
	display: none;
}

#noFarmBox{
	margin-bottom: 15px; 
}

#noFarmForm, #newFarmForm{
	display: inline-block;
	max-width: 510px;
}

#noFarmForm input, #newFarmForm input{
	width: 300px;
	
}

#mainDiv {
	width: calc(75% - 30px);
	margin-right: 5px;
}

#farmPageIcons{
	width: calc(25% - 20px);
}

/* Secondary Div's */

.center{
	text-align: center;
}


#addMemberPage {
	display: none;
	text-align: center;
}

#newFarmPage {
	display: none;
	text-align: center;
}

#switchFarmPage,
#leaveFarmPage,
#premiumPlanPage {
	display: none;
}



#farmSettingsPage {
	display: none;
	text-align: center;
}

#farmSettingsPage table{
	margin: auto;
}

#farmSettingsPage h3{
	margin-bottom: 10px;
}

#farmPageIcons ul {
	padding: 0;
	text-align: center;
}



/* Content */

#newFarmName, #newFarmBtn, #joinFarmN, #joinFarmB{
	margin: 10px 2px;
}

#editUserTable td{
	padding: 10px;
}

#editUserTable #access .accessDiv{
	border: solid #CCC 1px;
	display: inline-block;
	padding: 10px;
	border-radius: 5px;
	cursor: pointer;
	width: 200px;
	text-align: center;
	position: relative;
}

#editUserTable #access .accessDiv span{
	float: right;
}

#access .dropdownMenu{
	text-align: center;
	margin-left: -220px;
	margin-top: 43px;
	width: 220px;
}

#editUserTable td:first-child{
	text-align: right;
}

#editUserTable td:last-child{
	text-align: left;
}

#changeColour{
	width: 200px;
	border-radius: 5px;
	padding: 10px;
}

#changeColour span{
	float: right;
}



#editUserTable #colourBox{
	margin-left: -165px;
	margin-top: 45px;
}

#manageFarmTable{
	width: 100%;
	max-width: 700px;
	text-align: center;
}

#mainFarmPage table{
	margin: auto;
}

/*#mainFarmPage #editUserTable{
	margin-bottom: 120px;
}*/

.editCol {
	display: inline-block;
}

#mainFarmPage h2{
	margin: 20px 0 5px 0;
}

#mainFarmPage input[type=text]{
	margin-top: 5px;
	margin-bottom: 0px;
}

#mainFarmPage label::before{
	margin-top: calc(1.25em + 1px);
}

#mainFarmPage p {
	margin-bottom: 10px;
}

#leaveFarmPage p{
 	padding: 20px;
 	max-width: 90%;
}

#leaveFarmPage, #switchFarmPage {
	text-align: center;
}

#switchFarmPage p {
	margin: 0 0 25px 0;
}

#addMemberPage h1, #newFarmPage h1{
	margin-bottom: 0px;
}

#farmPageIcons span {
	margin-top: 5px;
	top: -25px;
	vertical-align: top;
}

#farmPageIcons li{
	margin: 0 10px;
	width: 100px;
}

#farmPageIcons span {
	font-size: 17px;
}

#farmSettingsButton span{
	font-size: 16px;
}

#changeMapLocationContainer{
	display: none;
	position: absolute;
	top: 5%;
	left: calc(5% + 100px);
	z-index: 99999999999;
	width: calc(90% - 100px);
	height: 90%;
	border-radius: 10px;
}

#mapLocation {
	width: 100%;
	height: 100%;
}

#mapLocationButtons{
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%, 0);
}

#setRadiusButtons{
	position: absolute;
	top: 20px;
	left: 20px;
	background: #9CC763;
	color: white;
	text-align: center;
	border-radius: 5px;
}

#setRadiusButtons tr:first-child,
#setRadiusButtons tr:last-child{
	cursor: pointer;
}

#setRadiusButtons tr:first-child td:hover{
	border-radius: 5px 5px 0 0;
}

#setRadiusButtons tr:last-child td:hover{
	border-radius: 0 0 5px 5px;
}

#setRadiusButtons tr:first-child:hover,
#setRadiusButtons tr:last-child:hover{
	background: white;
	color: #9CC763;
}

#tilePicker2{
	position: absolute;
	top: 42px;
	left: 150px;	
}

#tilePicker2 input{
	margin: 0;
	border-radius: 0;
	border: 2px solid #9CC763;
}

#tilePicker2 input.selected, #tilePicker input:focus{
	background: white;
	color: #9CC763;
}

#advancedMapOptionsContainer{
	display: inline-block;
	text-align: left;
}

#mainFarmPage .menuSave{
	margin-top: 20px;
	margin-bottom: 20px;
}

#pickFarmJoinRequest li{
	width: 100%;
	cursor: pointer;
	transition: all 0.5s;
}
#pickFarmJoinRequest li div:hover{

}
#pickFarmJoinRequest p{
	padding: 0 10%;
}

#pickFarmJoinRequest h3{
	font-weight: 400;
}

/* Access levels */
#changeAccessLevels{
	display: none;
}

#changeAccessLevels table{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

#changeAccessLevels table th{
	padding: 2px;
}

#changeAccessLevels table tr td:first-child{
	text-align: right;
}

#changeAccessLevels table tr td{
	padding: 2px 0;
}

.titleRow{
	background: #E6E6E6;
}

.accessDisabled{
	background: #CCC;
}

.noAccessMessage{
	display: none;
	position: absolute;
	color: white;
	background: #9CC763;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	line-height: 40px;
}

.accessDisabled:hover .noAccessMessage{
	display: inline-block;
}

/* Pricing Page */
#premiumPlanPage{
	text-align: center;
}

#premiumPlanPage #changePlanSelect{
	margin-bottom: 10px;
}

#pricingPlanTableContainer{
	display: none;
	text-align: center;
}

#pricingPlanTableContainer table{
	margin: auto;
}

#pricingPlanTableContainer td{
	padding: 5px;
}
#pricingPlanTableContainer td:first-child{
	padding: 5px 10px;
}

#pricingPlanTableContainer #planNames{
	font-weight: 700;
}

/* Stripe */
#payForPlanContainer{
	display: none;
}

#payForPlan{
	margin-top: 50px;
	padding: 50px;
}

#cardPic{
	margin: 0;
	font-size: 100px;
}

#payIntro{
	margin-bottom: 30px;
}

.invoices, .upcomingPayments{
	display:none;
}


/*********************************
**** Media Queries ***************
**********************************/

/* Phablet (yellow) */
@media screen and (max-width: 600px){

	#mainDiv {
		width: calc(100% - 20px);
		margin: 0;
		margin-top: 80px;
	}

	#mainFarmPage {
		width: calc(100% - 10px);
		margin: 5px;
	}

	#mainFarmPage h1, #noFarm h1{
		font-size: 30px;
		font-weight: 300;
	}

	#mainFarmPage h2, #noFarm h2{
		font-size: 24px;
		font-weight: 300;
	}

	#farmPageIcons {
		padding: 10px 0;
		position: absolute;
		font-size: 20px;
		width: calc(100% - 10px);
		right: 5px;
		top: 50px;
		border-radius: 2px;
		text-align: center;
		left: 5px;
		/*left: 50%;
		transform: translate(-50%, 0);*/
	}

	#farmPageIcons ul {
		padding: 0;
		text-align: center;
	}

	.rightIcons {
		padding: 0;
	}

	#farmPageIcons li {
		font-size: 30px;
		margin: 5px 10px;
		width: auto;
	}

	#farmPageIcons .selected{
		/*background: #9CC763;*/
		color: #9CC763;
		/*padding: 5px 10px;*/
		margin: 0px;
		border-radius: 5px;
	}

	#farmPageIcons span {
		display: none;
	}

}

/* Phones (blue) */
@media screen and (max-width: 420px){
	/*remove after testing 
	body {
		background: royalblue;
	}*/

	#farmPageIcons {
		width: 98%;
		left: 1%;
	}
	#editUserTable #access .accessDiv,
	#changeColour,
	#editUserTable input[type="text"]
	{
		width: 150px;
	}


	#farmPageIcons li {
		margin: 5px;
	}

	#noFarmForm input, #newFarmForm input{
	width: 100%;
	max-width: 300px;
	
}

}
/* Guide CSS */

#guideHeader {
	margin: 1%;
	width: 100%;
	text-align: center;
}

#guideHeader div{
	padding: 10px 100px;
}

#guideHeader h1{
	margin: 0;
}

#guideHeader span {
	font-size: 40px;
}


/* Guide Boxes */
#guideBoxContainer {
	padding: 20px;
	text-align: center;
}


.guideOuter {
	text-align: center;
	padding: 30px;
	margin: 10px;
	width: 230px;
}

.guideBoxTitle{
	font-size: 20px;
	display: inline-block;
	margin-bottom: 10px;
	margin-top: 5px;
}

/*.guideContainer p{
	font-size: 14px;
	font-family: arial;
	font-weight: 300;
}*/

.guideButton {
	display: inline-block;
	border: 1px solid #999;
	border-radius: 5px;
	padding: 5px;
	width: 100px;
	cursor: pointer;
}

.guideButton:hover{
	color: #666;
	border-color: #666;
	font-weight: 500;
	padding: 4px;
	border-width: 2px;
}


a.guideButton{
	text-decoration: none;
	color: #666;
}

.guideBoxIcon {
	font-size: 100px;
}

.guideHidden{
	display: none;
}

/* each guide */

.guideContainer{
	color: #212121;
}


.guideContainer i {

}

.guideContainer b{
	font-weight: 400;
}

.guideContainer h1{
	margin-bottom: 0px;
}

.guideContainer h2{
	margin-top: 25px;
	display: block;
	border-bottom: 1px solid #ebebeb;
    font: 300 24px/32px Roboto,sans-serif;
    letter-spacing: -.01em;
    margin: 40px 0 20px;
    padding-bottom: 3px;

}

.guideContainer h3{
	font: 400 18px/32px Roboto,sans-serif;
	margin-top: 10px;
	margin-bottom: 0;
}

.guideContainer p{
	text-align: justify;
	text-justify: inter-word;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
}

.guideContainer .indent{
	margin-left: 25px;
}

.guideContainer ol{
	list-style-position: decimal outside;
	margin: 0 0 10px 0;
	font-weight: 400;
}

.guideContainer ul {
	margin-top: 10px;
}

.guideContainer li{
	margin-top: 10px;
}

.guideContainer{
	width: 90%;
	margin: 0 5%;
}

.guideInnerContainer{
	padding: 10px 50px;
	max-width: 600px;
	margin: auto;

}

.guideHeader{
	text-align: center;
}

.guideTextButton{
	display: inline-block;
	font-weight: 500;
	cursor: pointer;
	margin: 5px 0;
	color: #9CC763;
}

.guideTextButton:hover{
	color: #87bb44;
}

.guideContainer ul{
	padding-left: 20px;
}

.guideContainer ul li{
	display: list-item;
	list-style-position: outside;
	list-style-type: disc;
}

/* hidden parts*/

#setUpFarmGuide, #connectToFarmGuide, #invitationsGuide, 
#joinRequestsGuide, #accessGuide, #colorGuide, #titleGuide,
#exampleGuide, #setLocationGuide, #shapeTipsGuide, 
#editTipsGuide {
	display: none;
}

@media screen and (max-width: 400px){
	.guideContainer{
		width: calc(100% - 10px);
		padding: 0;
	}

	.guideOuter{
		margin: 5px;
		padding: 10px;
	}

	#guideHeader div{
		padding: 10px 20px;
	}

	.guideInnerContainer{
		padding: 10px;
	}

	.guideContainer{
		width: 100%;
		margin: 0;
	}

	.guideContainer h2{
		text-align: center;
		display: block;
	}
}
@font-face {
  font-family: 'FarmCloudIcons';
  src:  url('fonts/FarmCloudIcons.eot?8v9ac3');
  src:  url('fonts/FarmCloudIcons.eot?8v9ac3#iefix') format('embedded-opentype'),
    url('fonts/FarmCloudIcons.ttf?8v9ac3') format('truetype'),
    url('fonts/FarmCloudIcons.woff?8v9ac3') format('woff'),
    url('fonts/FarmCloudIcons.svg?8v9ac3#FarmCloudIcons') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'FarmCloudIcons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow:after{
	content: "\e610";
}

/* Paste from here */
.icon-calving2:before {
  content: "\e930";
}
.icon-calving:before {
  content: "\e92f";
}
.icon-cow-silhouette:before {
  content: "\e922";
}
.icon-tempLogo:before {
  content: "\e651";
}
.icon-clock104:before {
  content: "\e64f";
}
.icon-palmtree1:before {
  content: "\e64e";
}
.icon-mapViewer:before {
  content: "\e63e";
}
.icon-mapEditor2:before {
  content: "\e63f";
}
.icon-mapEditor:before {
  content: "\e640";
}
.icon-compass114:before {
  content: "\e62e";
}
.icon-map49:before {
  content: "\e626";
}
.icon-pencils19:before {
  content: "\e649";
}
.icon-double-arrow:before {
  content: "\e642";
}
.icon-tractor6:before {
  content: "\e641";
}
.icon-text123:before {
  content: "\e63c";
}
.icon-text120:before {
  content: "\e63d";
}
.icon-irregular10:before {
  content: "\e61f";
}
.icon-tick_Tick:before {
  content: "\e60e";
}
.icon-tick2_Tick2:before {
  content: "\e60f";
}
.icon-arrow_Arrow:before {
  content: "\e610";
}
.icon-arrow2_Arrow2:before {
  content: "\e611";
}
.icon-notifications_Notifications:before {
  content: "\e60d";
}
.icon-icons_LeavePlanner:before {
  content: "\e60a";
}
.icon-icons_SwitchFarm:before {
  content: "\e60b";
}
.icon-icons_ToDo:before {
  content: "\e60c";
}
.icon-i_info:before {
  content: "\e609";
}
.icon-house_house:before {
  content: "\e600";
}
.icon-logout_logout:before {
  content: "\e601";
}
.icon-people_people:before {
  content: "\e602";
}
.icon-sign-01:before {
  content: "\e603";
}
.icon-apps_apps:before {
  content: "\e604";
}
.icon-farm_Add:before {
  content: "\e605";
}
.icon-farm_LeaveFarm:before {
  content: "\e606";
}
.icon-farm_Manage:before {
  content: "\e607";
}
.icon-farm_NewFarm:before {
  content: "\e608";
}
.icon-flow-branch:before {
  content: "\e92d";
}
.icon-flow-line:before {
  content: "\e92e";
}
.icon-flow-parallel:before {
  content: "\e92b";
}
.icon-area-graph:before {
  content: "\e931";
}
.icon-hair-cross:before {
  content: "\e92a";
}
.icon-water:before {
  content: "\e923";
}
.icon-ruler:before {
  content: "\e90a";
}
.icon-compass2:before {
  content: "\e628";
}
.icon-location2:before {
  content: "\e629";
}
.icon-target:before {
  content: "\e62a";
}
.icon-share:before {
  content: "\e61e";
}
.icon-printer:before {
  content: "\e62d";
}
.icon-rocket:before {
  content: "\e650";
}
.icon-list:before {
  content: "\e61a";
}
.icon-document:before {
  content: "\e634";
}
.icon-landscape:before {
  content: "\e635";
}
.icon-arrow-up2:before {
  content: "\e62f";
}
.icon-arrow-left2:before {
  content: "\e64c";
}
.icon-arrow-down:before {
  content: "\e618";
}
.icon-arrow-up:before {
  content: "\e619";
}
.icon-uniE64D:before {
  content: "\e64d";
}
.icon-menu:before {
  content: "\e622";
}
.icon-hand-pointer-o:before {
  content: "\e924";
}
.icon-calendar:before {
  content: "\e925";
}
.icon-calendar2:before {
  content: "\e926";
}
.icon-calendar3:before {
  content: "\e927";
}
.icon-lab:before {
  content: "\e929";
}
.icon-layout:before {
  content: "\e934";
}
.icon-rotate:before {
  content: "\e928";
}
.icon-milk-bottle:before {
  content: "\e933";
}
.icon-notebook-text:before {
  content: "\e912";
}
.icon-satellite:before {
  content: "\e90d";
}
.icon-add:before {
  content: "\e145";
}
.icon-airport_shuttle:before {
  content: "\eb3c";
}
.icon-alarm_on:before {
  content: "\e858";
}
.icon-mode_edit:before {
  content: "\e254";
}
.icon-dashboard2:before {
  content: "\e872";
}
.icon-date_range:before {
  content: "\e932";
}
.icon-done:before {
  content: "\e876";
}
.icon-done_all:before {
  content: "\e877";
}
.icon-games:before {
  content: "\e021";
}
.icon-message:before {
  content: "\e0c9";
}
.icon-rotate_right:before {
  content: "\e41a";
}
.icon-timeline:before {
  content: "\e92c";
}
.icon-trending_flat:before {
  content: "\e8e4";
}
.icon-trending_up:before {
  content: "\e8e5";
}
.icon-view_week:before {
  content: "\e8f3";
}
.icon-location_on:before {
  content: "\e0c8";
}
.icon-stay_primary_landscape:before {
  content: "\e0d5";
}
.icon-stay_primary_portrait:before {
  content: "\e0d6";
}
.icon-clear:before {
  content: "\e14c";
}
.icon-person_pin_circle:before {
  content: "\e56a";
}
.icon-apps:before {
  content: "\e5c3";
}
.icon-check:before {
  content: "\e5ca";
}
.icon-chevron_left:before {
  content: "\e5cb";
}
.icon-chevron_right:before {
  content: "\e5cc";
}
.icon-close:before {
  content: "\e5cd";
}
.icon-people:before {
  content: "\e7fb";
}
.icon-person:before {
  content: "\e7fd";
}
.icon-person_add:before {
  content: "\e7fe";
}
.icon-check_box:before {
  content: "\e834";
}
.icon-check_box_outline_blank:before {
  content: "\e835";
}
.icon-radio_button_unchecked:before {
  content: "\e836";
}
.icon-radio_button_checked:before {
  content: "\e837";
}
.icon-dashboard:before {
  content: "\e871";
}
.icon-help:before {
  content: "\e887";
}
.icon-home:before {
  content: "\e88a";
}
.icon-help_outline:before {
  content: "\e8fd";
}
.icon-sun:before {
  content: "\e913";
}
.icon-wind:before {
  content: "\e914";
}
.icon-cloudy:before {
  content: "\e915";
}
.icon-weather:before {
  content: "\e916";
}
.icon-cloud:before {
  content: "\e917";
}
.icon-lightning:before {
  content: "\e918";
}
.icon-rainy:before {
  content: "\e919";
}
.icon-rainy2:before {
  content: "\e91a";
}
.icon-windy:before {
  content: "\e91b";
}
.icon-windy2:before {
  content: "\e91c";
}
.icon-snowy:before {
  content: "\e91d";
}
.icon-weather2:before {
  content: "\e91e";
}
.icon-lightning2:before {
  content: "\e91f";
}
.icon-lightning3:before {
  content: "\e920";
}
.icon-rainy3:before {
  content: "\e921";
}
.icon-search:before {
  content: "\f02e";
}
.icon-star:before {
  content: "\f02a";
}
.icon-pacman:before {
  content: "\e910";
}
.icon-coin-dollar:before {
  content: "\e908";
}
.icon-binoculars:before {
  content: "\e907";
}
.icon-bug:before {
  content: "\e904";
}
.icon-stats-bars2:before {
  content: "\e900";
}
.icon-spoon-knife:before {
  content: "\e911";
}
.icon-cloud-download:before {
  content: "\e90b";
}
.icon-download3:before {
  content: "\e90c";
}
.icon-plus:before {
  content: "\e905";
}
.icon-minus:before {
  content: "\e906";
}
.icon-checkmark:before {
  content: "\e902";
}
.icon-checkmark2:before {
  content: "\e903";
}
.icon-enter:before {
  content: "\e90e";
}
.icon-exit:before {
  content: "\e90f";
}
.icon-chrome:before {
  content: "\e909";
}
.icon-soil:before {
  content: "\e901";
}
.icon-pencil:before {
  content: "\e614";
}
.icon-play:before {
  content: "\e643";
}
.icon-book:before {
  content: "\e64a";
}
.icon-file:before {
  content: "\e630";
}
.icon-file2:before {
  content: "\e631";
}
.icon-cart:before {
  content: "\e62b";
}
.icon-pushpin:before {
  content: "\e61c";
}
.icon-location:before {
  content: "\e61d";
}
.icon-compass:before {
  content: "\e627";
}
.icon-map:before {
  content: "\e61b";
}
.icon-clock:before {
  content: "\e64b";
}
.icon-print:before {
  content: "\e62c";
}
.icon-disk:before {
  content: "\e620";
}
.icon-undo:before {
  content: "\e623";
}
.icon-redo:before {
  content: "\e624";
}
.icon-zoomin:before {
  content: "\e636";
}
.icon-zoomout:before {
  content: "\e637";
}
.icon-expand:before {
  content: "\e638";
}
.icon-contract:before {
  content: "\e639";
}
.icon-expand2:before {
  content: "\e63a";
}
.icon-contract2:before {
  content: "\e63b";
}
.icon-cog:before {
  content: "\e625";
}
.icon-remove:before {
  content: "\e615";
}
.icon-eye:before {
  content: "\e616";
}
.icon-eye-blocked:before {
  content: "\e617";
}
.icon-contrast:before {
  content: "\e632";
}
.icon-smiley:before {
  content: "\e652";
}
.icon-smiley2:before {
  content: "\e653";
}
.icon-sad:before {
  content: "\e654";
}
.icon-sad2:before {
  content: "\e655";
}
.icon-blocked:before {
  content: "\e621";
}
.icon-play2:before {
  content: "\e644";
}
.icon-pause:before {
  content: "\e645";
}
.icon-play3:before {
  content: "\e646";
}
.icon-pause2:before {
  content: "\e647";
}
.icon-stop:before {
  content: "\e648";
}
.icon-loop:before {
  content: "\e633";
}
.icon-arrow-right:before {
  content: "\e612";
}
.icon-arrow-left:before {
  content: "\e613";
}
.icon-android:before {
  content: "\e800";
}
.icon-credit-card:before {
  content: "\e93f";
}
.icon-lock:before {
  content: "\e98f";
}
.icon-unlocked:before {
  content: "\e990";
}
.icon-target2:before {
  content: "\e9b3";
}


.toast-title {
  font-weight: bold;
}
.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}
.toast-message a,
.toast-message label {
  color: #ffffff;
}
.toast-message a:hover {
  color: #cccccc;
  text-decoration: none;
}
.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  -webkit-text-shadow: 0 1px 0 #ffffff;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}
/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}
.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-left {
  top: 12px;
  left: 12px;
}
.toast-top-right {
  top: 12px;
  right: 12px;
}
.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}
.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}
#toast-container {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  /*overrides*/
}
#toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#toast-container > div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  -moz-box-shadow: 0 0 12px #999999;
  -webkit-box-shadow: 0 0 12px #999999;
  box-shadow: 0 0 12px #999999;
  color: #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
#toast-container > :hover {
  -moz-box-shadow: 0 0 12px #000000;
  -webkit-box-shadow: 0 0 12px #000000;
  box-shadow: 0 0 12px #000000;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
  cursor: pointer;
}
#toast-container > .toast-info {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-success {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
#toast-container > .toast-warning {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}
.toast {
  background-color: #030303;
}
.toast-success {
  /*background-color: #51a351;*/
  background-color: #85b842;
}
.toast-error {
  background-color: #bd362f;
}
.toast-info {
  background-color: #2f96b4;
}
.toast-warning {
  background-color: #f89406;
}
.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}
/*Responsive Design*/
@media all and (max-width: 240px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container > div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}

.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(156, 199, 99, 0.4);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{position:absolute;background-color:#eee;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;}.ol-rotate{top:.5em;right:.5em;-webkit-transition:opacity .25s linear,visibility 0s linear;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;-webkit-transition:opacity .25s linear,visibility 0s linear .25s;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;line-height:.4em;background-color:#9CC763;border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:#9ABF69}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;width:24px;height:200px}.ol-zoomslider-thumb{position:absolute;background:#7b98bc;background:rgba(0,60,136,.5);border-radius:2px;cursor:pointer;height:10px;width:22px;margin:3px}.ol-touch .ol-zoomslider{top:5.5em;width:2.052em}.ol-touch .ol-zoomslider-thumb{width:1.8em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}

.dtp { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 99000; font-size: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.dtp > .dtp-content { background: #fff; max-width: 300px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); max-height: 520px; position: relative; left: 50%; }
.dtp > .dtp-content > .dtp-date-view > header.dtp-header { background: #689F38; color: #fff; text-align: center; padding: 0.3em; }
/*Comment*/
.dtp div.dtp-date, .dtp div.dtp-time { background: #8BC34A; text-align: center; color: #fff; padding: 10px; }
.dtp div.dtp-date > div { padding: 0; margin: 0; }
.dtp div.dtp-actual-month { font-size: 1.5em; }
.dtp div.dtp-actual-num { font-size: 3em; line-height: 0.9; }
.dtp div.dtp-actual-maxtime { font-size: 3em; line-height: 0.9; }
.dtp div.dtp-actual-year { font-size: 1.5em; color: #DCEDC8; }
.dtp div.dtp-picker { padding: 1em; text-align: center; }

.dtp div.dtp-picker-month, .dtp div.dtp-actual-time { font-weight: 500; text-align: center; }
.dtp div.dtp-picker-month { padding-bottom:20px!important; text-transform: uppercase!important; }

.dtp .dtp-close { position: absolute; top: 0.5em; right: 1em; }
.dtp .dtp-close > a { color: #fff; }
.dtp .dtp-close > a > i { font-size: 1em; }

.dtp table.dtp-picker-days { margin: 0; min-height: 251px;}
.dtp table.dtp-picker-days, .dtp table.dtp-picker-days tr, .dtp table.dtp-picker-days tr > td { border: none; }
.dtp table.dtp-picker-days tr > td {  font-weight: 700; font-size: 0.8em; text-align: center; padding: 0.5em 0.3em; }
.dtp table.dtp-picker-days tr > td > span.dtp-select-day { color: #BDBDBD!important; }
.dtp table.dtp-picker-days tr > td > a, .dtp .dtp-picker-time > a { color: #212121; text-decoration: none; padding: 0.4em 0.5em 0.5em 0.6em; border-radius: 50%!important; }
.dtp table.dtp-picker-days tr > td > a.selected{ background: #8BC34A; color: #fff; }
.dtp table.dtp-picker-days tr > th { color: #757575; text-align: center; font-weight: 700; padding: 0.4em 0.3em; }

.dtp .p10 > a { color: white; text-decoration: none; }
.dtp .p10 { width: 10%; display: inline-block; }
.dtp .p20 { width: 20%; display: inline-block; }
.dtp .p60 { width: 60%; display: inline-block; }
.dtp .p80 { width: 80%; display: inline-block; margin-left: 28px}

.dtp a.dtp-meridien-am, .dtp a.dtp-meridien-pm { position: relative; top: 10px; color: #212121; font-weight: 500; padding: 0.7em 0.5em; border-radius: 50%!important;text-decoration: none; background: #eee; font-size:1em; }
.dtp .dtp-actual-meridien a.selected { background: #689F38; color: #fff; }

.dtp .dtp-picker-time > .dtp-select-hour { cursor: pointer; }
.dtp .dtp-picker-time > .dtp-select-minute { cursor: pointer; }

.dtp .dtp-buttons { padding: 0 1em 1em 1em; text-align: right;}
.dtp .dtp-buttons button {margin-right: 9px; padding: 10px; border-radius: 5px}
.dtp .dtp-btn-cancel {left: 0;}

.dtp.hidden, .dtp .hidden { display: none; }
.dtp .invisible { visibility: hidden; }

.dtp .left { float: left; }
.dtp .right { float: right; }
.dtp .clearfix { clear: both; }

.dtp .center { text-align: center; }

/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
.tooltipster-default {
	border-radius: 5px; 
	border: 2px solid #9CC763;
	background: #9CC763;
	color: white;
}

/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 16px;
	padding: 8px 10px;
	overflow: hidden;
}

/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
	/* border-color: ... !important; */
}


/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
	cursor: help;
	margin-left: 4px;
}








/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
	padding: 0;
	font-size: 0;
	line-height: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9999999;
	pointer-events: none;
	width: auto;
	overflow: visible;
}
.tooltipster-base .tooltipster-content {
	overflow: hidden;
}


/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
	display: block;
	text-align: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.tooltipster-arrow span, .tooltipster-arrow-border {
	display: block;
	width: 0; 
	height: 0;
	position: absolute;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
	border-left: 8px solid transparent !important;
	border-right: 8px solid transparent !important;
	border-top: 8px solid;
	bottom: -7px;
}
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
	border-left: 9px solid transparent !important;
	border-right: 9px solid transparent !important;
	border-top: 9px solid;
	bottom: -7px;
}

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
	border-left: 8px solid transparent !important;
	border-right: 8px solid transparent !important;
	border-bottom: 8px solid;
	top: -7px;
}
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
	border-left: 9px solid transparent !important;
	border-right: 9px solid transparent !important;
	border-bottom: 9px solid;
	top: -7px;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
	left: 0;
	right: 0;
	margin: 0 auto;
}
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
	left: 6px;
}
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
	left: 5px;
}
.tooltipster-arrow-top-right span,  .tooltipster-arrow-bottom-right span {
	right: 6px;
}
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
	right: 5px;
}
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
	border-top: 8px solid transparent !important;
	border-bottom: 8px solid transparent !important; 
	border-left: 8px solid;
	top: 50%;
	margin-top: -7px;
	right: -7px;
}
.tooltipster-arrow-left .tooltipster-arrow-border {
	border-top: 9px solid transparent !important;
	border-bottom: 9px solid transparent !important; 
	border-left: 9px solid;
	margin-top: -8px;
}
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
	border-top: 8px solid transparent !important;
	border-bottom: 8px solid transparent !important; 
	border-right: 8px solid;
	top: 50%;
	margin-top: -7px;
	left: -7px;
}
.tooltipster-arrow-right .tooltipster-arrow-border {
	border-top: 9px solid transparent !important;
	border-bottom: 9px solid transparent !important; 
	border-right: 9px solid;
	margin-top: -8px;
}


/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */

.tooltipster-fade {
	opacity: 0;
	-webkit-transition-property: opacity;
	transition-property: opacity;
}
.tooltipster-fade-show {
	opacity: 1;
}

.tooltipster-grow {
	-webkit-transform: scale(0,0);
	transform: scale(0,0);
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
	-webkit-backface-visibility: hidden;
}
.tooltipster-grow-show {
	-webkit-transform: scale(1,1);
	transform: scale(1,1);
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-swing {
	opacity: 0;
	-webkit-transform: rotateZ(4deg);
	transform: rotateZ(4deg);
	-webkit-transition-property: -webkit-transform, opacity;
	transition-property: transform;
}
.tooltipster-swing-show {
	opacity: 1;
	-webkit-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
	transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}

.tooltipster-fall {
	top: 0;
	-webkit-transition-property: top;
	transition-property: top;
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
}
.tooltipster-fall-show {
}
.tooltipster-fall.tooltipster-dying {
	-webkit-transition-property: all;
	transition-property: all;
	top: 0px !important;
	opacity: 0;
}

.tooltipster-slide {
	left: -40px;
	-webkit-transition-property: left;
	transition-property: left;
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-slide.tooltipster-slide-show {
}
.tooltipster-slide.tooltipster-dying {
	-webkit-transition-property: all;
	transition-property: all;
	left: 0px !important;
	opacity: 0;
}


/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
	opacity: 0.5;
	-webkit-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
}

.my-tooltipster-theme {
	border-radius: 5px; 
	border: 1px solid #cccccc;
	background: #ededed;
	color: #666666;
}
.my-tooltipster-theme .tooltipster-content {
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 16px;
	padding: 8px 10px;
}
/*! jQuery UI - v1.11.4 - 2016-04-25
* http://jqueryui.com
* Includes: core.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&fwDefault=normal&cornerRadius=3px&bgColorHeader=e9e9e9&bgTextureHeader=flat&borderColorHeader=dddddd&fcHeader=333333&iconColorHeader=444444&bgColorContent=ffffff&bgTextureContent=flat&borderColorContent=dddddd&fcContent=333333&iconColorContent=444444&bgColorDefault=f6f6f6&bgTextureDefault=flat&borderColorDefault=c5c5c5&fcDefault=454545&iconColorDefault=777777&bgColorHover=ededed&bgTextureHover=flat&borderColorHover=cccccc&fcHover=2b2b2b&iconColorHover=555555&bgColorActive=007fff&bgTextureActive=flat&borderColorActive=003eff&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fffa90&bgTextureHighlight=flat&borderColorHighlight=dad55e&fcHighlight=777620&iconColorHighlight=777620&bgColorError=fddfdf&bgTextureError=flat&borderColorError=f1a899&fcError=5f3f3f&iconColorError=cc0000&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=666666&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=5px&offsetTopShadow=0px&offsetLeftShadow=0px&cornerRadiusShadow=8px
* Copyright jQuery Foundation and other contributors; Licensed MIT */

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-widget{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #ddd;background:#fff;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #ddd;background:#e9e9e9;color:#333;font-weight:bold}.ui-widget-header a{color:#333}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #c5c5c5;background:#f6f6f6;font-weight:normal;color:#454545}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#454545;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #ccc;background:#ededed;font-weight:normal;color:#2b2b2b}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{color:#2b2b2b;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #003eff;background:#007fff;font-weight:normal;color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #dad55e;background:#fffa90;color:#777620}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#777620}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #f1a899;background:#fddfdf;color:#5f3f3f}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#5f3f3f}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#5f3f3f}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("images/ui-icons_444444_256x240.png")}.ui-widget-header .ui-icon{background-image:url("images/ui-icons_444444_256x240.png")}.ui-state-default .ui-icon{background-image:url("images/ui-icons_777777_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url("images/ui-icons_555555_256x240.png")}.ui-state-active .ui-icon{background-image:url("images/ui-icons_ffffff_256x240.png")}.ui-state-highlight .ui-icon{background-image:url("images/ui-icons_777620_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("images/ui-icons_cc0000_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:3px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:3px}.ui-widget-overlay{background:#aaa;opacity:.3;filter:Alpha(Opacity=30)}.ui-widget-shadow{margin:0 0 0 0;padding:5px;background:#666;opacity:.3;filter:Alpha(Opacity=30);border-radius:8px}
body.stop-scrolling {
  height: 100%;
  overflow: hidden; }

.sweet-overlay {
  background-color: black;
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  /* IE8 */
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  z-index: 10000; }

.sweet-alert {
  background-color: white;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 478px;
  padding: 17px;
  border-radius: 5px;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -256px;
  margin-top: -200px;
  overflow: hidden;
  display: none;
  z-index: 99999; }
  @media all and (max-width: 540px) {
    .sweet-alert {
      width: auto;
      margin-left: 0;
      margin-right: 0;
      left: 15px;
      right: 15px; } }
  .sweet-alert h2 {
    color: #575757;
    font-size: 30px;
    text-align: center;
    font-weight: 600;
    text-transform: none;
    position: relative;
    margin: 25px 0;
    padding: 0;
    line-height: 40px;
    display: block; }
  .sweet-alert p {
    color: #797979;
    font-size: 16px;
    text-align: center;
    font-weight: 300;
    position: relative;
    text-align: inherit;
    float: none;
    margin: 0;
    padding: 0;
    line-height: normal; }
  .sweet-alert fieldset {
    border: none;
    position: relative; }
  .sweet-alert .sa-error-container {
    background-color: #f1f1f1;
    margin-left: -17px;
    margin-right: -17px;
    overflow: hidden;
    padding: 0 10px;
    max-height: 0;
    webkit-transition: padding 0.15s, max-height 0.15s;
    transition: padding 0.15s, max-height 0.15s; }
    .sweet-alert .sa-error-container.show {
      padding: 10px 0;
      max-height: 100px;
      webkit-transition: padding 0.2s, max-height 0.2s;
      transition: padding 0.25s, max-height 0.25s; }
    .sweet-alert .sa-error-container .icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #ea7d7d;
      color: white;
      line-height: 24px;
      text-align: center;
      margin-right: 3px; }
    .sweet-alert .sa-error-container p {
      display: inline-block; }
  .sweet-alert .sa-input-error {
    position: absolute;
    top: 29px;
    right: 26px;
    width: 20px;
    height: 20px;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: all 0.1s;
    transition: all 0.1s; }
    .sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after {
      content: "";
      width: 20px;
      height: 6px;
      background-color: #f06e57;
      border-radius: 3px;
      position: absolute;
      top: 50%;
      margin-top: -4px;
      left: 50%;
      margin-left: -9px; }
    .sweet-alert .sa-input-error::before {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg); }
    .sweet-alert .sa-input-error::after {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); }
    .sweet-alert .sa-input-error.show {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); }
  .sweet-alert input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #d7d7d7;
    height: 43px;
    margin-top: 10px;
    margin-bottom: 17px;
    font-size: 18px;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
    padding: 0 12px;
    display: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s; }
    .sweet-alert input:focus {
      outline: none;
      box-shadow: 0px 0px 3px #c4e6f5;
      border: 1px solid #b4dbed; }
      .sweet-alert input:focus::-moz-placeholder {
        transition: opacity 0.3s 0.03s ease;
        opacity: 0.5; }
      .sweet-alert input:focus:-ms-input-placeholder {
        transition: opacity 0.3s 0.03s ease;
        opacity: 0.5; }
      .sweet-alert input:focus::-webkit-input-placeholder {
        transition: opacity 0.3s 0.03s ease;
        opacity: 0.5; }
    .sweet-alert input::-moz-placeholder {
      color: #bdbdbd; }
    .sweet-alert input::-ms-clear {
      display: none; }
    .sweet-alert input:-ms-input-placeholder {
      color: #bdbdbd; }
    .sweet-alert input::-webkit-input-placeholder {
      color: #bdbdbd; }
  .sweet-alert.show-input input {
    display: block; }
  .sweet-alert .sa-confirm-button-container {
    display: inline-block;
    position: relative; }
  .sweet-alert .la-ball-fall {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -27px;
    margin-top: 4px;
    opacity: 0;
    visibility: hidden; }
  .sweet-alert button {
    background-color: #8CD4F5;
    color: white;
    border: none;
    box-shadow: none;
    font-size: 17px;
    font-weight: 500;
    -webkit-border-radius: 4px;
    border-radius: 5px;
    padding: 10px 32px;
    margin: 26px 5px 0 5px;
    cursor: pointer; }
    .sweet-alert button:focus {
      outline: none;
      box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
    .sweet-alert button:hover {
      background-color: #7ecff4; }
    .sweet-alert button:active {
      background-color: #5dc2f1; }
    .sweet-alert button.cancel {
      background-color: #C1C1C1; }
      .sweet-alert button.cancel:hover {
        background-color: #b9b9b9; }
      .sweet-alert button.cancel:active {
        background-color: #a8a8a8; }
      .sweet-alert button.cancel:focus {
        box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; }
    .sweet-alert button[disabled] {
      opacity: .6;
      cursor: default; }
    .sweet-alert button.confirm[disabled] {
      color: transparent; }
      .sweet-alert button.confirm[disabled] ~ .la-ball-fall {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s; }
    .sweet-alert button::-moz-focus-inner {
      border: 0; }
  .sweet-alert[data-has-cancel-button=false] button {
    box-shadow: none !important; }
  .sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
    padding-bottom: 40px; }
  .sweet-alert .sa-icon {
    width: 80px;
    height: 80px;
    border: 4px solid gray;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    border-radius: 50%;
    margin: 20px auto;
    padding: 0;
    position: relative;
    box-sizing: content-box; }
    .sweet-alert .sa-icon.sa-error {
      border-color: #F27474; }
      .sweet-alert .sa-icon.sa-error .sa-x-mark {
        position: relative;
        display: block; }
      .sweet-alert .sa-icon.sa-error .sa-line {
        position: absolute;
        height: 5px;
        width: 47px;
        background-color: #F27474;
        display: block;
        top: 37px;
        border-radius: 2px; }
        .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          left: 17px; }
        .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
          right: 16px; }
    .sweet-alert .sa-icon.sa-warning {
      border-color: #F8BB86; }
      .sweet-alert .sa-icon.sa-warning .sa-body {
        position: absolute;
        width: 5px;
        height: 47px;
        left: 50%;
        top: 10px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        margin-left: -2px;
        background-color: #F8BB86; }
      .sweet-alert .sa-icon.sa-warning .sa-dot {
        position: absolute;
        width: 7px;
        height: 7px;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        margin-left: -3px;
        left: 50%;
        bottom: 10px;
        background-color: #F8BB86; }
    .sweet-alert .sa-icon.sa-info {
      border-color: #C9DAE1; }
      .sweet-alert .sa-icon.sa-info::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 29px;
        left: 50%;
        bottom: 17px;
        border-radius: 2px;
        margin-left: -2px;
        background-color: #C9DAE1; }
      .sweet-alert .sa-icon.sa-info::after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-left: -3px;
        top: 19px;
        background-color: #C9DAE1;
        left: 50%; }
    .sweet-alert .sa-icon.sa-success {
      border-color: #A5DC86; }
      .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after {
        content: '';
        -webkit-border-radius: 40px;
        border-radius: 40px;
        border-radius: 50%;
        position: absolute;
        width: 60px;
        height: 120px;
        background: white;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg); }
      .sweet-alert .sa-icon.sa-success::before {
        -webkit-border-radius: 120px 0 0 120px;
        border-radius: 120px 0 0 120px;
        top: -7px;
        left: -33px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 60px 60px;
        transform-origin: 60px 60px; }
      .sweet-alert .sa-icon.sa-success::after {
        -webkit-border-radius: 0 120px 120px 0;
        border-radius: 0 120px 120px 0;
        top: -11px;
        left: 30px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0px 60px;
        transform-origin: 0px 60px; }
      .sweet-alert .sa-icon.sa-success .sa-placeholder {
        width: 80px;
        height: 80px;
        border: 4px solid rgba(165, 220, 134, 0.2);
        -webkit-border-radius: 40px;
        border-radius: 40px;
        border-radius: 50%;
        box-sizing: content-box;
        position: absolute;
        left: -4px;
        top: -4px;
        z-index: 2; }
      .sweet-alert .sa-icon.sa-success .sa-fix {
        width: 5px;
        height: 90px;
        background-color: white;
        position: absolute;
        left: 28px;
        top: 8px;
        z-index: 1;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg); }
      .sweet-alert .sa-icon.sa-success .sa-line {
        height: 5px;
        background-color: #A5DC86;
        display: block;
        border-radius: 2px;
        position: absolute;
        z-index: 2; }
        .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
          width: 25px;
          left: 14px;
          top: 46px;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg); }
        .sweet-alert .sa-icon.sa-success .sa-line.sa-long {
          width: 47px;
          right: 8px;
          top: 38px;
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg); }
    .sweet-alert .sa-icon.sa-custom {
      background-size: contain;
      border-radius: 0;
      border: none;
      background-position: center center;
      background-repeat: no-repeat; }

/*
 * Animations
 */
@-webkit-keyframes showSweetAlert {
  0% {
    transform: scale(0.7);
    -webkit-transform: scale(0.7); }
  45% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05); }
  80% {
    transform: scale(0.95);
    -webkit-transform: scale(0.95); }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1); } }

@keyframes showSweetAlert {
  0% {
    transform: scale(0.7);
    -webkit-transform: scale(0.7); }
  45% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05); }
  80% {
    transform: scale(0.95);
    -webkit-transform: scale(0.95); }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1); } }

@-webkit-keyframes hideSweetAlert {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1); }
  100% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5); } }

@keyframes hideSweetAlert {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1); }
  100% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5); } }

@-webkit-keyframes slideFromTop {
  0% {
    top: 0%; }
  100% {
    top: 50%; } }

@keyframes slideFromTop {
  0% {
    top: 0%; }
  100% {
    top: 50%; } }

@-webkit-keyframes slideToTop {
  0% {
    top: 50%; }
  100% {
    top: 0%; } }

@keyframes slideToTop {
  0% {
    top: 50%; }
  100% {
    top: 0%; } }

@-webkit-keyframes slideFromBottom {
  0% {
    top: 70%; }
  100% {
    top: 50%; } }

@keyframes slideFromBottom {
  0% {
    top: 70%; }
  100% {
    top: 50%; } }

@-webkit-keyframes slideToBottom {
  0% {
    top: 50%; }
  100% {
    top: 70%; } }

@keyframes slideToBottom {
  0% {
    top: 50%; }
  100% {
    top: 70%; } }

.showSweetAlert[data-animation=pop] {
  -webkit-animation: showSweetAlert 0.3s;
  animation: showSweetAlert 0.3s; }

.showSweetAlert[data-animation=none] {
  -webkit-animation: none;
  animation: none; }

.showSweetAlert[data-animation=slide-from-top] {
  -webkit-animation: slideFromTop 0.3s;
  animation: slideFromTop 0.3s; }

.showSweetAlert[data-animation=slide-from-bottom] {
  -webkit-animation: slideFromBottom 0.3s;
  animation: slideFromBottom 0.3s; }

.hideSweetAlert[data-animation=pop] {
  -webkit-animation: hideSweetAlert 0.2s;
  animation: hideSweetAlert 0.2s; }

.hideSweetAlert[data-animation=none] {
  -webkit-animation: none;
  animation: none; }

.hideSweetAlert[data-animation=slide-from-top] {
  -webkit-animation: slideToTop 0.4s;
  animation: slideToTop 0.4s; }

.hideSweetAlert[data-animation=slide-from-bottom] {
  -webkit-animation: slideToBottom 0.3s;
  animation: slideToBottom 0.3s; }

@-webkit-keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px; }
  54% {
    width: 0;
    left: 1px;
    top: 19px; }
  70% {
    width: 50px;
    left: -8px;
    top: 37px; }
  84% {
    width: 17px;
    left: 21px;
    top: 48px; }
  100% {
    width: 25px;
    left: 14px;
    top: 45px; } }

@keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px; }
  54% {
    width: 0;
    left: 1px;
    top: 19px; }
  70% {
    width: 50px;
    left: -8px;
    top: 37px; }
  84% {
    width: 17px;
    left: 21px;
    top: 48px; }
  100% {
    width: 25px;
    left: 14px;
    top: 45px; } }

@-webkit-keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px; }
  65% {
    width: 0;
    right: 46px;
    top: 54px; }
  84% {
    width: 55px;
    right: 0px;
    top: 35px; }
  100% {
    width: 47px;
    right: 8px;
    top: 38px; } }

@keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px; }
  65% {
    width: 0;
    right: 46px;
    top: 54px; }
  84% {
    width: 55px;
    right: 0px;
    top: 35px; }
  100% {
    width: 47px;
    right: 8px;
    top: 38px; } }

@-webkit-keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  5% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  12% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); }
  100% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); } }

@keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  5% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
  12% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); }
  100% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg); } }

.animateSuccessTip {
  -webkit-animation: animateSuccessTip 0.75s;
  animation: animateSuccessTip 0.75s; }

.animateSuccessLong {
  -webkit-animation: animateSuccessLong 0.75s;
  animation: animateSuccessLong 0.75s; }

.sa-icon.sa-success.animate::after {
  -webkit-animation: rotatePlaceholder 4.25s ease-in;
  animation: rotatePlaceholder 4.25s ease-in; }

@-webkit-keyframes animateErrorIcon {
  0% {
    transform: rotateX(100deg);
    -webkit-transform: rotateX(100deg);
    opacity: 0; }
  100% {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1; } }

@keyframes animateErrorIcon {
  0% {
    transform: rotateX(100deg);
    -webkit-transform: rotateX(100deg);
    opacity: 0; }
  100% {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1; } }

.animateErrorIcon {
  -webkit-animation: animateErrorIcon 0.5s;
  animation: animateErrorIcon 0.5s; }

@-webkit-keyframes animateXMark {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  50% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  80% {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    margin-top: -6px; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    margin-top: 0;
    opacity: 1; } }

@keyframes animateXMark {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  50% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0; }
  80% {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    margin-top: -6px; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    margin-top: 0;
    opacity: 1; } }

.animateXMark {
  -webkit-animation: animateXMark 0.5s;
  animation: animateXMark 0.5s; }

@-webkit-keyframes pulseWarning {
  0% {
    border-color: #F8D486; }
  100% {
    border-color: #F8BB86; } }

@keyframes pulseWarning {
  0% {
    border-color: #F8D486; }
  100% {
    border-color: #F8BB86; } }

.pulseWarning {
  -webkit-animation: pulseWarning 0.75s infinite alternate;
  animation: pulseWarning 0.75s infinite alternate; }

@-webkit-keyframes pulseWarningIns {
  0% {
    background-color: #F8D486; }
  100% {
    background-color: #F8BB86; } }

@keyframes pulseWarningIns {
  0% {
    background-color: #F8D486; }
  100% {
    background-color: #F8BB86; } }

.pulseWarningIns {
  -webkit-animation: pulseWarningIns 0.75s infinite alternate;
  animation: pulseWarningIns 0.75s infinite alternate; }

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

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

/* Internet Explorer 9 has some special quirks that are fixed here */
/* The icons are not animated. */
/* This file is automatically merged into sweet-alert.min.js through Gulp */
/* Error icon */
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
  -ms-transform: rotate(45deg) \9; }

.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
  -ms-transform: rotate(-45deg) \9; }

/* Success icon */
.sweet-alert .sa-icon.sa-success {
  border-color: transparent\9; }

.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
  -ms-transform: rotate(45deg) \9; }

.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
  -ms-transform: rotate(-45deg) \9; }

/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */
.la-ball-fall,
.la-ball-fall > div {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.la-ball-fall {
  display: block;
  font-size: 0;
  color: #fff; }

.la-ball-fall.la-dark {
  color: #333; }

.la-ball-fall > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor; }

.la-ball-fall {
  width: 54px;
  height: 18px; }

.la-ball-fall > div {
  width: 10px;
  height: 10px;
  margin: 4px;
  border-radius: 100%;
  opacity: 0;
  -webkit-animation: ball-fall 1s ease-in-out infinite;
  -moz-animation: ball-fall 1s ease-in-out infinite;
  -o-animation: ball-fall 1s ease-in-out infinite;
  animation: ball-fall 1s ease-in-out infinite; }

.la-ball-fall > div:nth-child(1) {
  -webkit-animation-delay: -200ms;
  -moz-animation-delay: -200ms;
  -o-animation-delay: -200ms;
  animation-delay: -200ms; }

.la-ball-fall > div:nth-child(2) {
  -webkit-animation-delay: -100ms;
  -moz-animation-delay: -100ms;
  -o-animation-delay: -100ms;
  animation-delay: -100ms; }

.la-ball-fall > div:nth-child(3) {
  -webkit-animation-delay: 0ms;
  -moz-animation-delay: 0ms;
  -o-animation-delay: 0ms;
  animation-delay: 0ms; }

.la-ball-fall.la-sm {
  width: 26px;
  height: 8px; }

.la-ball-fall.la-sm > div {
  width: 4px;
  height: 4px;
  margin: 2px; }

.la-ball-fall.la-2x {
  width: 108px;
  height: 36px; }

.la-ball-fall.la-2x > div {
  width: 20px;
  height: 20px;
  margin: 8px; }

.la-ball-fall.la-3x {
  width: 162px;
  height: 54px; }

.la-ball-fall.la-3x > div {
  width: 30px;
  height: 30px;
  margin: 12px; }

/*
 * Animation
 */
@-webkit-keyframes ball-fall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-145%);
    transform: translateY(-145%); }
  10% {
    opacity: .5; }
  20% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  80% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  90% {
    opacity: .5; }
  100% {
    opacity: 0;
    -webkit-transform: translateY(145%);
    transform: translateY(145%); } }

@-moz-keyframes ball-fall {
  0% {
    opacity: 0;
    -moz-transform: translateY(-145%);
    transform: translateY(-145%); }
  10% {
    opacity: .5; }
  20% {
    opacity: 1;
    -moz-transform: translateY(0);
    transform: translateY(0); }
  80% {
    opacity: 1;
    -moz-transform: translateY(0);
    transform: translateY(0); }
  90% {
    opacity: .5; }
  100% {
    opacity: 0;
    -moz-transform: translateY(145%);
    transform: translateY(145%); } }

@-o-keyframes ball-fall {
  0% {
    opacity: 0;
    -o-transform: translateY(-145%);
    transform: translateY(-145%); }
  10% {
    opacity: .5; }
  20% {
    opacity: 1;
    -o-transform: translateY(0);
    transform: translateY(0); }
  80% {
    opacity: 1;
    -o-transform: translateY(0);
    transform: translateY(0); }
  90% {
    opacity: .5; }
  100% {
    opacity: 0;
    -o-transform: translateY(145%);
    transform: translateY(145%); } }

@keyframes ball-fall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-145%);
    -moz-transform: translateY(-145%);
    -o-transform: translateY(-145%);
    transform: translateY(-145%); }
  10% {
    opacity: .5; }
  20% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  80% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  90% {
    opacity: .5; }
  100% {
    opacity: 0;
    -webkit-transform: translateY(145%);
    -moz-transform: translateY(145%);
    -o-transform: translateY(145%);
    transform: translateY(145%); } }



.bugsSideBar{
	position: fixed;
	display: inline-block;
	right: 0;
	width: 200px;
	background: white;
	
}

.bugsSideBar table, .bugsSideBar td{
	
}
.bugsSideBar table{
	width: 100%;
	background-color: white;
}


.bugsSideBar td {
	padding: 10px 0px 10px 10px;
}

.bugsSideBar tr{
	border: solid white 1px;
	cursor: pointer;
}

.bugsSideBar tr:hover{
	background: #ccc;
}

.bugsSideBar td:first-child{
	text-align: center;
}

.bugsLeftBox{
	width: calc(100% - 250px);
	margin-left: 10px;
	text-align: center;
}

.bugsLeftBox h1, .bugsLeftBox h2{
	display: block;
	margin-bottom: 0;
	margin-top: 10px;
}
.bugsLeftBox ul{
	/*text-align: left;*/
	padding: 0;
}

.bugsLeftBox li{
	display: inline-block;
	margin: 3px 0;
	width: 90%;
	padding-left: 10%;
	text-align: left;
}

.bugsLeftBox li span{
	margin-right: 10px;
}

.bugsSideBar .selected{
	background: #9CC763;
	color: white;
}

.bugButton{
	/*width: calc(100% - 12px);*/
	margin: 5px;
	border: solid 1px #666;
	border-radius: 5px;
	padding: 10px;
	text-align: center;
	cursor: pointer;
}

.bugButton:hover{
	background: #CCC;
	color: white;
	border-color: white;
}

.bugButton span{
	left: 0;
	display: inline-block;
	margin-right: 5px;
}

#bugsSuggestions{
	width: 75%;
	max-width: 1000px;
}

#bugsSuggestions textarea{
	width: 100%;
	height: 100px;
	max-width: 1000px;
}

#bugsSuggestions #cancelBugFeature{
	background-color: #CCC;
}
@font-face {
    font-family: 'regencielight';
    src: url('fonts/regencielight-webfont.eot');
    src: url('fonts/regencielight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/regencielight-webfont.woff') format('woff'),
         url('fonts/regencielight-webfont.ttf') format('truetype'),
         url('fonts/regencielight-webfont.svg#regencielight') format('svg');
    font-weight: normal;
    font-style: normal;
}

#frontWrapper {
	background: #9CC763;
	font-family: 'Roboto';
	text-align: center;
	font-size: 24px;
	color: #999999;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 99999999;
  left: 0;
  top: 0;
}

.sweet-overlay{
  z-index: 9999999999;
}

.sweet-alert{
  z-index: 99999999999;
}

h1{
	font-size: 46px;
}

.frontbox {
	background: white;
	padding: 20px;
	border-radius: 2px;
	margin: 10px;
	/*width: 50px;
	display: none;*/

}

.frontbox-focus {
	display: inline-block;
	position: absolute;
	top: 50px;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
	width: 600px;
	height: 550px;
	box-shadow: 5px 5px 20px black;
	-webkit-transition: width 0.5s ease-in;
	        transition: width 0.5s ease-in;
	-webkit-transition: height 0.5s ease-in;
	        transition: height 0.5s ease-in;
}

.frontOverlay{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background:#9CC763;
  display: none;
  position: fixed;
}

#rememberMeLabel{
  margin-bottom: 10px;
  display: inline-block;
}

#loginPasswordInputContainer{
  margin-bottom: 30px;
}

.login{
  height: 425px;
}

button, .button {
	padding: 10px;
	border-radius: 10px;
	background: #9CC763;
	border-style: none;
	color: white;
	cursor: pointer;
	font-size: 24px;
}

#forgotPasswordButton{
  font-size: 18px;
  font-weight: 500;
  color: #9CC763;
  margin-top: 20px;
  cursor: pointer;
  display: inline-block;
}

#forgotPasswordDiv{
  display: none;
}

#frontWrapper #forgotPasswordEmail{
  font-size: 17px;
  height: 3em;
  width: 250px;
  margin-bottom: 0;
}

#frontWrapper table {
  margin: 10px auto 0 auto;
}

#frontWrapper hr{
  margin-top: 20px;
  margin-bottom: 0;
}

.big-logo {
	padding-top: 5%;
  width: 400px;
}

.agcloud-big {
	font-size: 72px;
	font-family: "regencielight";
	font-weight: 300;
	color: white;
}

.big-button {
	padding: 10px 5px;
	border-radius: 5px;
	border: white solid 2px;
	background-color: #9CC763;
	margin: 30px 20px;
	display: inline-block;
	color: white;
	font-size: 30px;
	font-weight: 300;
	cursor: pointer;
  width: 150px;
}

.expanded-button {
	display: inline-block;
	position: absolute;
	top: 50px;
	left: 30%;
	right: 30%;
	width: 40%;
	height: 80%;
}

.big-button:hover {
	background: white;
	color: #9CC763;
}


.login, .register {
	display: none;
}


.btn-container {
	display: inline-block;
}

.x {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
	font-size: 24px;
}

.input {
	width: 80%;
	height: 40px;
	font-size: 20px;
	margin: 10px;
	border-radius: 5px;
}

label {
	font-size: 20px;
	display: inline;
}

#loginButton {
	width: 50%;
}

#frontWrapper input{
  text-align: center;
}




.errorBox {
	font-size: 16px;
	background: #CF000F;
	padding: 10px;
	border-radius: 5px;
	margin: 10px;
	display: inline-block;
	color: white;
}

.inputContainer {
	margin-bottom: 50px;
}

/* loading spinnner */

.loaderBG {
	width: 5em;
	height: 5em;
	background: white;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2.5em 0 0 -2.5em;
	border-radius: 50%;
	display: none;
}




.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}
.loader:before,
.loader:after {
  position: absolute;
  content: '';
}
.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: white;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}
.loader {
  font-size: 11px;
  text-indent: -99999em;
  margin: -5em 0 0 -5em;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em #9CC763;
}
.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: white;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* adaptive placeholders */
#frontWrapper input[type="text"], #frontWrapper input[type="password"],
#frontWrapper input[type="email"]{
  box-sizing: border-box;
  width: 100%;
  height: calc(3em + 2px);
  margin: 0 0 1em;
  padding: 1em;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background: #fff;
  resize: none;
  outline: none;
}
input[type="text"][required]:focus {
  border-color: #00bafa;
}
input[type="text"][required]:focus + label[placeholder]:before {
  color: #00bafa;
}
input[type="text"][required]:focus + label[placeholder]:before,
input[type="text"][required]:valid + label[placeholder]:before {
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);
          transform: translate(0, -1.5em) scale(0.9, 0.9);
}
input[type="text"][required]:invalid + label[placeholder][alt]:before {
  content: attr(alt);
}
input[type="text"][required] + label[placeholder] {
  display: block;
  pointer-events: none;
  line-height: 1em;
  margin-top: calc(-3em - 2px);
  margin-bottom: calc((3em - 1em) + 2px);
}
input[type="text"][required] + label[placeholder]:before {
  content: attr(placeholder);
  display: inline-block;
  margin: 0 calc(1em + 2px);
  padding: 0 2px;
  color: #898989;
  white-space: nowrap;
  -webkit-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: center;
}

/*also for password */
input[type="password"][required]:focus {
  border-color: #00bafa;
}
input[type="password"][required]:focus + label[placeholder]:before {
  color: #00bafa;
}
input[type="password"][required]:focus + label[placeholder]:before,
input[type="password"][required]:valid + label[placeholder]:before {
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);
          transform: translate(0, -1.5em) scale(0.9, 0.9);
}
input[type="password"][required]:invalid + label[placeholder][alt]:before {
  content: attr(alt);
}
input[type="password"][required] + label[placeholder] {
  display: block;
  pointer-events: none;
  line-height: 1em;
  margin-top: calc(-3em - 2px);
  margin-bottom: calc((3em - 1em) + 2px);
}
input[type="password"][required] + label[placeholder]:before {
  content: attr(placeholder);
  display: inline-block;
  margin: 0 calc(1em + 2px);
  padding: 0 2px;
  color: #898989;
  white-space: nowrap;
  -webkit-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: center;
}
/* and for email... */
input[type="email"][required]:focus {
  border-color: #00bafa;
}
input[type="email"][required]:focus + label[placeholder]:before {
  color: #00bafa;
}
input[type="email"][required]:focus + label[placeholder]:before,
input[type="email"][required]:valid + label[placeholder]:before {
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);
          transform: translate(0, -1.5em) scale(0.9, 0.9);
}
input[type="email"][required]:invalid + label[placeholder][alt]:before {
  content: attr(alt);
}
input[type="email"][required] + label[placeholder] {
  display: block;
  pointer-events: none;
  line-height: 1em;
  margin-top: calc(-3em - 2px);
  margin-bottom: calc((3em - 1em) + 2px);
}
input[type="email"][required] + label[placeholder]:before {
  content: attr(placeholder);
  display: inline-block;
  margin: 0 calc(1em + 2px);
  padding: 0 2px;
  color: #898989;
  white-space: nowrap;
  -webkit-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Media queries */

/* Phablet (yellow) */
@media screen and (max-width: 600px){
  /*remove after testing 
  body {
    background: yellow;
  }*/

    /* Front Page */
    .frontbox-focus{
      display: block;
      margin: auto;
      width: 80%;
      top: 5px;
    }

}

/* Phones (blue) */
@media screen and (max-width: 500px){
  /*remove after testing 
  body {
    background: royalblue;
  }*/

  .big-logo{
    width: 200px;
    color: white;
  }

  .agcloud-big{
    font-size: 50px;
  }

  .big-button{
    font-size: 24px;
    width: 100px;
    margin: 15px 10px;
  }
}
/* Leave Planner */

/*h1, h2, h3, h4 {
	display: inline-block;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
}*/

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

.date {
	width: 88%;
	height: 100px;
	margin: 1px;
	background: #E6E6E6;
	text-align: left;
	cursor: pointer;
}

.blank {
	background: white;
	cursor: default;
}

.current {
	background: #CCC;
	/*box-shadow: inset 0px 0px 50px #E6E6E6;*/
}

.lpcheckbox {
	
	border-radius: 2px;
	padding: 3px;
}

.lpw {
	background: #B0C1FB;
}

.lpnw {
	background: red;
}



#monthName {
	display: inline-block;
}

/* full day */
#day1 {
	background: #D7FBB0;
}

/* half */


/* Menus */



#addLeaveX {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 30px;
	cursor: pointer;
}

#backdrop {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.hidden {
	display: none;
}
/* RE ADD BUT BE MORE SPECIFIC
input {
	margin: 3px;
}
*/

/* Day Columns */

.dayCol {
	width: 13.5%;
	/*border: black solid 1px;*/
	display: inline-block;
	position: relative;
	top: 0;
}

.nameSquare {
	width: 100px;
	height: 100px;
	color: white;
	display: inline-block;
	margin: 5px;
	cursor: pointer;
	border-radius: 6px;
}

.bar {
	width: 90%;
	height: 10px;
	background: white;
	margin-left: 5%;
	margin-top: 40px;
}

.awayStatus {
	display: inline-block;
	margin-top: 10px;
	color: white;
}

.away span{
	display: inline-block;
	
	color: #9CC763;
}

.away .awayStatus:before{
	content: "Away";
}

.working .awayStatus:before{
	content: "Working";
}


.away div{
	background: #9CC763;
}

.calUserImage {
	margin: 2px;
}

#monthName {
	width: 150px;
	text-align: center;
}

#monthContainer {
	display: inline-block;
	margin: 0 25% 0 25%;
}

.monthName {
	font-size: 24px;
}

.arrow {
	margin-right: 5px;
	margin-left: 5px;
	cursor: pointer;
	display: inline-block;
	border: 1px solid #999;
	border-radius: 50%;
	padding: 3px;
	font-size: 21px;
}

.arrow:hover {
	background: #999;
	color: white;
}



/* Tablet Landscape (light blue) */ 
@media screen and (max-width: 1200px){
	/*remove after testing */





	.date {
		width: 86%;
	}

}

/* Tablet Portrait (lime) */
@media screen and (max-width: 1000px){
	/*remove after testing */


	.date{
		width: 82%;
	}

}

/* Mini Tablet (orange) */
@media screen and (max-width: 800px){
	/*remove after testing */


	.date{
		width: 79%;
	}
}


/* Phablet (yellow) */
@media screen and (max-width: 600px){
	/*remove after testing */


	.date{
		width: 75%;
	}
}


/* Phones (blue) */
@media screen and (max-width: 400px){
	/*remove after testing */

}
/* Map Editor */
.wrapper {
	margin-top: 0px;
}


#map {
	width: 100%;
	height: 100%;
	position: relative;
}

#mapContainer {
	width: 100%;
	height: calc(100vh - 40px);
}


.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}



/* Tool Bar */
#toolBar, #rotation {
	display: inline-block;
	top: 100px;
	right: 7px;
	width: 50px;

	position: absolute;
	z-index: 25;
}

#toolBar ul {
	padding: 0;
}

#toolBar li, #rotation li {
	position: relative;
	display: inline-block;
	width: 28px;
	height: 28px;
	padding: 10px;
	margin: 3px;
	cursor: pointer;
	background: rgba(255,255,255,0.85);
	border-radius: 2px;
	color: #666;
	box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
}

#toolBar li:hover, #toolBar .extraOptions li:hover, 
#rotation li:hover,  {
	background: #ccc;
}

#toolBar .inner{
		/*position: relative;*/
		height: calc(100vh - 150px);
		overflow-y: auto;
		overflow-x: hidden;
	}

.toolIcon {
	font-size: 30px;
}

#testButton{
	position: absolute;
	z-index: 999;
	left: 10px;
	bottom: 10px;
}

/*
#done {
	position: absolute;
	margin-top: 10px;
	background: white;
	padding: 10px;
	cursor: pointer;
}
*/
.extraOptions, .editSelect, .printOptions{
	display: none;
}

.extraOptions ul, .editSelect ul {
	position: absolute;
	right: 80px;
	width: 100px;
	margin-top: -54px;
}

.extraContainer{
	position: absolute;
}

.printOptions ul{
	position: absolute;
	/*left: 80px;*/
	margin-left: 150px;
	width: 100px;
	margin-top: 25px;
}

.editSelect ul {
	margin-top: -50px;
	margin-right: -15px;
}

#toolBar .extraOptions li, .printOptions ul li  {
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	line-height: 28px;
}

.printOptions ul li{
	display: inline-block;
	border: solid 1px white;
	padding: 5px;
	border-radius: 5px;
	width: 50px;
	margin: 2px;
	cursor: pointer;
	color: white;
	background: #9CC763
}

.printOptions li:hover{
	background: white;
	border-color: #9CC763;
	color: #9CC763;
}

/*
input[type=checkbox].showHideLayers{
	display: none;
}

input[type=checkbox].showHideLayers + label{
	display: inline-block;
	color: #CCC;
	padding: 2px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
input[type=checkbox]:checked.showHideLayers + label{
	display: inline-block;
	color: #9CC763;
}
*/
#lisSatellite + label{
	color: white;
}


#toolBar .editSelect li {
	margin: 0;
	height: default;
	padding: 0 5px;
	width: 100%;
	border-radius: 0;
	text-align: center;
	vertical-align: middle;
}

#toolBar #polylineEditor ul, #toolBar #polygonEditor ul{
	width: 140px;
}

#toolBar #polylineEditor li, #toolBar #polygonEditor li {
	font-size: 14px;
}

#toolBar{
	
}

#toolBar ul{

}



#toolBar .inner .innerInner{
	position: absolute;
	width: auto;
}


.leaflet-control-layers {
	background: white;
	border: 0px;
}

.editable {
	background: black;
}

#testThings {
	background: lightblue;
}

#menuContainer {
	background: white;
	z-index: 2500;
	display: inline-block;
	position: fixed;
	left: 100px;
	top: 40px;
}
#shapeTable {
	cursor:;
}

#shapeTable td, #shapeTable th{
	padding: 3px 5px;
}

#showArea {
	position: absolute;
	display: none;
	top: 50px;
	left: 200px;
	background: white;
	z-index: 25;
	padding: 10px;
	border-radius: 10px;
}

.nameSpan{
	padding-right: 5px;
	cursor: pointer;
}

#a4Container.portrait {
	margin-left: calc(50% + 100px);
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
}



#shapeTable .icon-pencil{
	float: right;
	visibility: hidden;
	cursor: pointer;
}

#shapeTable tr:hover .icon-pencil {
	visibility: visible;
}

#saveName, #cancelName {
	cursor: pointer;
	padding: 0 10px 10px 10px;
}

#shapeTable input{
	margin: 0;
	padding: 5px;
	height: 25px;
}

.dragHandle, .deleteShape span {
	visibility: hidden;
	padding: 0;
}

#shapeTable tr.shapeSelected{
	color: white;
}

#shapeTable tr:hover .dragHandle{
	visibility: visible;
	cursor: grab;
	cursor: -webkit-grab;
}

#shapeTable tr:hover .deleteShape span{
	visibility: visible;
	float: right;
	cursor: pointer;
}



.dragClass {
	background: royalblue;
	color: white;
	cursor: grabbing;
	cursor: -webkit-grabbing;
	-webkit-transform: scale3d(10px,10px,10px);
	        transform: scale3d(10px,10px,10px);
}

#shapeTable tr td:first-child{
	padding-left: 5px;
}

#iconBar li{
	display: inline-block;
	cursor: pointer;
	font-size: 25px;
	padding: 5px 15px;
}

#iconBar ul {
	margin: 0;
	padding: 0 0 0 10px;
}

#addGroup{
	visibility: hidden;
}

#addGroupInput {
	padding: 0 5px;
	display: none;
}

#addGroupButton, #cancelGroupButton {
	cursor: pointer;
	padding: 0px 10px 3px 15px;

}

.groupName {
	font-weight: 500;
	background: #999;
	color: white;
}

.colorDot{
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	margin-right: 5px;
	border: solid 1px white;
}

.ol-scale-line{
	right: 5px;
	left: auto;
}

.ol-scale-line.hidden{
	display: none;
}

.ol-attribution{
	left: 5px;
	right: auto;
}

.ol-attribution.hidden{
	display: none;
}

.ol-zoom{
	right: 8px;
	width: 45px;
	top: 3px;
}

.ol-control button {
	width: 45px;
}

.ol-control{
	background: none;
}

#layerControl {
	padding-left: 10px;
}

#layerControl li{
	display: inline-block;
}

#layerControl input {
	margin-right: 3px;
}

#infoBox h2 {
	display: inline-block;
	text-align: center;
	font-weight: 300;
	border-top: 2px solid #999;
	width: 100%;
	margin: 0;
	font-size: 20px;
}

#menuDisplay {
	float: right;
}

#menuContainer {
	height: calc(100% - 40px);
}

#infoBox {
	height: calc(100% - 80px);
	overflow-y: auto;
	box-shadow: 10px 0px 20px -10px rgba(102,102,102,1);
}


.labelContainer {
	/*width: 50px;
	height: 50px;*/
	/*background-color: transparent;*/
	background-color: white;
	color: black;
	border-radius: 5px;
	padding: 5px;
	text-align: center;
}

.labelContainer.label-2, .labelContainer.label-3,
.labelContainer.label-4, .labelContainer.label-5{
	background: none;
	padding: none;
}

#markerTypeLayerControl {
	display: none;
}

#customColorPicker div{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-block;
}

#markerOptions #customColorPicker div,
.markerEditMenu #customColorPicker div{
	width: 30px;
	height: 30px;
	border-width: 4px;
	border-style: solid;
}

#layerControl .cd{
	width: 17px;
	height: 17px;
	/*border-radius: 50%;*/
	display: inline-block;
	/*border: 3px solid;*/
	cursor: pointer;
	margin-right: 7px;
	line-height: 11px;
}

#layerControl #Custom li span{
	line-height: 18px;
	vertical-align: top;
}

.treeArrow:before{
	margin: 0px 5px 0px 5px;
	cursor: pointer;
}

#layerControl #Markers ul{
	display: none;
}

#layerControl #Custom ul{
	display: none;
}

#layerControl #Custom ul li{
	padding-top: 2px;
	height: 15px;
}

#customColorPicker .selected{
	box-shadow: 0px 0px 0px 2px #666 inset;
}

#markerOptions #customColorPicker .selected,
#layerControl .markerEditMenu #customColorPicker .selected{
	box-shadow: 0px 0px 0px 0px #666 inset;
	background-color: white;
}

#customColorPicker #navy, #layerControl .navy{
	background-color: rgb(14,47,84);
	border-color: rgb(14,47,84);
}

#customColorPicker #teal, #layerControl .teal{
	background-color: rgb(55,253,255);
	border-color: rgb(55,253,255);
}

#customColorPicker #pink, #layerControl .pink{
	background-color: rgb(232,23,266);
	border-color: rgb(232,23,266);
}
#customColorPicker #redred, #layerControl .redred{
	background-color: rgb(255,38,31);
	border-color: rgb(255,38,31);
}

#customColorPicker #darkPurple, #layerControl .darkPurple{
	background-color: rgb(106,25,255);
	border-color: rgb(106,25,255);
}

#customColorPicker #yellow, #layerControl .yellow{
	background-color: rgb(255,229,14);
	border-color: rgb(255,229,14);
}

#customColorPicker #orange, #layerControl .orange{
	background-color: rgb(255,177,2);
	border-color: rgb(255,177,2);
}

#layerControl #Custom .cd:not(.off):before{
	/*background-color: #CCC;*/
	font-family: 'FarmCloudIcons' !important;
	content: "\e5ca";
	color: white;
	margin-left: 1px;
	margin-top: 3px;
	position: absolute;
}

#layerControl #Custom .cd.off:before{
	content:"";
	background: white;
	width: 13px;
	height: 13px;
	display: inline-block;
	margin-left:  2px;
	margin-top: 2px;
}
/*
#layerControl .label input ~ .colorDot .icon-check:before{
	display: none;
	position: absolute;
	color: white;
	border-radius: 50%;
	background: white;
	margin-left: 2.5px;
	margin-top: 1px;
	font-size: 14px;
}

#layerControl .label input ~ .colorDot .icon-check:after{
	content:'';
	width: 13px;
	height: 13px;
	background: white;
	display: inline-block;
	position: absolute;
	margin-left: 3px;
	margin-top: 2px;
}

#layerControl .label input:checked ~ .colorDot .icon-check:before{
	display: inline-block;
	background: rgba(0,0,0,0);
}

#layerControl .label input:checked ~ .colorDot .icon-check:after{
	display: none;
}*/

#map #crosshair{
	display: none;
	position: absolute;
	z-index: 9999;
	bottom: calc(50% - 50px);
	left: calc(50% - 50px);
	color: black;
	text-align: center;
	  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
    width: 100px;
    height: 100px;
    vertical-align: middle;
    text-align: center;
}

#map #crosshair .big{
	font-size: 100px;
}

#map #crosshair .small{
	margin-right: 10px;
	padding: 10px;
	background: rgba(255,255,255,0.7);
	cursor: pointer;

}

#map #crosshair #smallButtonContainer{
	display: inline-block;
	position: absolute;
	margin-top: 10px;
	margin-left: -64px;
}

#map #crosshair .small.disabled{
	background: rgba(255,255,255,0.3);
}

/* Tutorial */

#startTutorialLocationSet{
	top: 45px;
	right: 75px;
	background: rgba(156, 199, 99, 0.8);
	position: absolute;
	color: white;
	padding: 5px;
	border-radius: 5px;
	cursor: pointer;
	display: none;
}

.mapMessageTop{
	position: absolute;
	display: inline-block;
	top: 50px;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
	background: #9CC763;
	color: white;
	padding: 10px;
	border-radius: 5px;
}

#endStep5{
	border: solid 1px white;
	padding: 5px;
	border-radius: 5px;
	cursor: pointer;
}

#endStep5:hover{
	cursor: pointer;
}

.paddockLabel {
	background: white;
	border: none;
	left: -35px;
	top: 20px;
}

.paddockLabel:before {
	display: none;
}

#Labels {
	margin-right: 10px;
}


#rotation {
	display: none;
	position: absolute;
	right: 50px;
	width: 200px;
	top: 40px;
	font-size: 25px;
}

#toolBar .greyed{
	color: #CCC;
}

#toolBar .greened{
	color: #9CC763;
}

#toolBar .greyed:hover{
	background: white;
	cursor: default;
}

#mapContainer {
	left: 100px;
	
	background: white;
	
}

#map{
	background: white;
}

.A4 {
	background: white;
	display: inline-block;
	
}
/*
#mapContainer{
	width: 100%;
	height: 100%;
	right: 0;
}
*/
#a4Container {
	height: 100%;
	width: 100%;
	text-align: right;
}

#a4Container.portrait {
	width: 175mm;
	height: 257mm;
	/*width: 210mm;
	height: 297mm;*/
	right: 50px;
	top: 50px;
	padding: 25mm 20mm;
	/*margin-left: 150px;*/
}

#a4Container.landscape {
	width: 257mm;
	height: 175mm;
	/*width: 1754px;
	height: 1240px;*/
	right: 50px;
	top: 50px;
	padding: 20mm 25mm;
	margin-left: 150px;
}

#mapContainer.mapPrinterContainer{
	background: inherit;
}

#printerTools{
	padding: 0;
	width: 100%;
}

#printerTools td {
	border-radius: 5px;
	padding: 5px;
	font-size: 40px;
	display: inline-block;
	padding: 5px 20px;
	margin: 5px 2px;
	cursor: pointer;
}

#printerTools td:hover{
	
}

.printHeader {
	width: 100%;
	margin: 5px 0;
}

#labelTextSelect{
	font-size:  18px;
}

#blackWhiteColored {
	color: #9CC763;
}

#printerTools .selected {
	background: #9CC763;
	color: white;
}

#blackWhite.selected{
	background: #999;
}

#setLocationButton, #setBoundaryButton{
	display: none;
	width: 50%;
	position: absolute;
	bottom: 10px;
	z-index: 999999;
	margin-left: 25%;
}

#polygonOverlay{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10;
}

.extraOptions {
	z-index: 999;
}

#toolBar .following {
	background: #9CC763;
}

#compass {
	position: absolute;
	bottom: 20px;
	right: 15px;
	z-index: 100;
	font-size: 60px;
	margin: -5px;
	color: 666;
}

#compass div{
	background: white;
	border-radius: 50%;
	margin: -5px;
	/* hide for now */
	display: none;
}

.leaflet-marker-pane .90deg {
	-webkit-transform: rotate(90deg);
	        transform: rotate(90deg);
}

.mapBorder {
	border: 1px dashed #999;
}

#showAreaWrapper {
	position: absolute;
	z-index: 500;
	right: 200px;
	top: 50px;
	background: white;
	border-radius: 5px;
}


#showAreaTable td {
	padding: 7px;
}

#popup{
	display: none;
	position: absolute;
	display: inline-block;
	background: rgba(255,255,255,1);
	min-width: 100px;
	text-align: center;
	min-height: 50px;
	bottom: 0;
	left: -50px;
	border-radius: 2px;
	z-index: 1000;
	margin-bottom: 15px;
	margin-left: 0px;
	box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.40);
}

#popup:before{
	content:"";
	position: absolute;
	display: inline-block;
	width: 20px;
	background: rgba(255,255,255,1);
	height: 20px;
	bottom: -10px;
	
	left: 40px;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
	z-index: -1;
}

#popup .shapeTitle{
	font-weight: 500;
}

/*ol3 bug fix */
.ol-dragbox {
  border-color: red;
  border-width: 3px;
  background-color: rgba(255,255,255,0.4);
}


/*
.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
}
.tooltip-measure {
  opacity: 1;
  font-weight: bold;
}
.tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}
.tooltip-static:before {
  border-top-color: #ffcc33;
}
*/
/* Tractor Tracker */
#menuTable span{
	font-size: 40px;
}

#menuTable {
	text-align: center;
	width: 100%;
}

#menuTable td {
	cursor: pointer;
	padding-top: 5px;
}

#menuTable td:hover{
	background: #9CC763;
	color: white;
}

/*.modal {
	padding: 50px;
	display: none;
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translate(-20%, 0);
	z-index: 10000;
}*/

#manageJobsModal td, #addImplementModal td{
	padding: 3px;
}

#selectImplementWidth{
	margin-bottom: 5px;
}

#newJobModal table{
	margin-bottom: 10px;
}

.modal{
	text-align: center;
}

/*input[type="button"].cancel{
	background-color: #999;
}*/

#recording{
	display: none;
	width: 150px;
	height: 100px;
	background: #4183D7;
	color: white;
	position: absolute;
	bottom: 5px;
	right: 5px;
	text-align: center;
	padding-top: 25px;
	cursor: pointer;
	border-radius: 10px;
}

#recording span:first-child{
	font-size: 50px;
}

#recording span:last-child{
	font-size: 25px;
}



#startJobsModal table tr td:first-child{
	padding-right: 15px;
}

#startJobsModal table{
	margin: 5px 0 10px 0;
}

#tilePicker{
	display: none;
	position: fixed;
	top: 50px;
	left: 110px;	
}

#tilePicker2 {
	display: none;
	position: absolute;
	top: 10px;
	left: 10px;	
}

#tilePicker2 input, #tilePicker input{
	margin: 0;
	border-radius: 0;
	border: 2px solid #9CC763;
}

#tilePicker input.selected, #tilePicker input:focus{
	background: white;
	color: #9CC763;
}

#noFarmAppsPage{
	display: none;
}

#setRadiusButtons2{
	display: none;
	position: absolute;
	top: 50px;
	right: 75px;
	background: #9CC763;
	color: white;
	text-align: center;
}

#setRadiusButtons2 tr:first-child,
#setRadiusButtons2 tr:last-child{
	cursor: pointer;
}

#setRadiusButtons2 tr:first-child:hover,
#setRadiusButtons2 tr:last-child:hover{
	color: #9CC763;
	background: white;
}



#changeLocationHelp,
#changeBoundaryHelp{
	background-color: #9CC763;
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-40%, 0);
	        transform: translate(-40%, 0);
	color: white;
	top: 30px;
	padding: 5px;
	border-radius: 5px;
}

#changeBoundaryHelp{
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
}

#markerOptionsContainer{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2501;
}

#markerOptions {
	position: absolute;
	top: 50px;
	left: calc(50% + 50px);
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
	padding: 30px;
	text-align: center;
	width: 75%;
	max-width: 900px;
}

#markerOptions input[type="button"]{
	width: 190px;
	margin-bottom: 5px;
}

#markerOptions input[type="text"]{
	width: 250px;
}

#markerOptions ul{
	padding: 0;
	margin-bottom: 20px;
}

#markerOptions ul li{
	display: inline-block;
	text-align: center;
	vertical-align: top;
}

#markerOptions li:hover{
	background: #ccc;
}

.markerCircle{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: inline-block;
	border: solid 6px;
}

#markerOptions li{
	cursor: pointer;
	padding: 5px;
	width: 120px;
}

#markerOptions #standard .markerCircle{
	border-color: #999;
}

#markerOptions #waterTrough .markerCircle{
	border-color: blue;
}

#markerOptions table{
	margin: auto;
}

#markerOptions #customColorPicker div{
	cursor: pointer;
}

#newMarkerType{
	display:none;
}

#layerControl td:first-child{
	vertical-align: top;
	padding-top: 5px;
}

#layerControl,
#layerControl #Markers li{
	position: relative;
}

#layerControl .markerEdit{
	margin-left: -25px;
	position: absolute;
	cursor: pointer;
}

#layerControl .markerEdit:hover{
	color: #9CC763;
}

#layerControl .markerEditMenu{
	position: fixed;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
	top: 10%;
	background: white;
	z-index: 9999999;
	padding: 50px;
	text-align: center;
}

#markerOverlay{
	display: block;
	z-index: 999999;
}

.markerEditMenu table{
	display: inline-block;
	vertical-align: bottom;
	padding: 0;
}

.markerEditMenu td:first-child h3{
	margin-top: 10px;
}



.markerEditMenu #customColorPicker div{
	cursor: pointer;
}

#menuContainer.cordova{
	/*font-size: 21px;*/
	background: rgba(255,255,255,0.7);
	/*color: black;*/
	height: auto;
	position: relative;
	left: -15px;
	width: calc(100% + 15px);
	top: 0;
}

#navMenu #layerControl li span{
	font-size: 16px;
}

#layerControl input[type=checkbox]{
	position: absolute;
	opacity: 0;

}

#layerControl .label .colorDot{
	width: 17px;
	height: 17px;
	line-height: 17px;
	vertical-align: middle;
	border-radius: 0;
	cursor: pointer;
}

#layerControl .label .colorDot span{
	display: inline;
}

#layerControl .label input ~ .colorDot .icon-check:before{
	display: none;
	position: absolute;
	color: white;
	border-radius: 50%;
	background: white;
	margin-left: 2.5px;
	margin-top: 1px;
	font-size: 14px;
}

#layerControl .label input ~ .colorDot .icon-check:after{
	content:'';
	width: 13px;
	height: 13px;
	background: white;
	display: inline-block;
	position: absolute;
	margin-left: 3px;
	margin-top: 2px;
}

#layerControl .label input:checked ~ .colorDot .icon-check:before{
	display: inline-block;
	background: rgba(0,0,0,0);
}

#layerControl .label input:checked ~ .colorDot .icon-check:after{
	display: none;
}
#menuContainer.cordova #layerControl li span{
	margin-right: 0;
}
#menuContainer.cordova #layerControl li{
	display: inline-block;
	margin-top: 0;
	margin-left: 30px;
}

#menuContainer.cordova #layerControl td{
	padding-top: 0;
	padding-bottom: 0;
}
#menuContainer.cordova #layerControl td:first-child{
	padding-top: 5px;
}
#menuContainer.cordova .colorDot{
	/*border-color: rgba(255,255,255,0);*/
}

#menuContainer.cordova #infoBox h2{
	font-size: 24px;
	margin-top: -40px;
	margin-bottom: 10px;
}

#menuContainer.cordova #infoBox{
	overflow-y: auto;
	box-shadow: none;
}

#menuContainer.cordova tr{
	border-top: 1px solid #999;
	
}

#menuContainer.cordova td{
	padding-top: 10px;
	padding-bottom: 10px;
}

#menuContainer.cordova .markerEdit{
	display: none;
}

#menuContainer.cordova ul{
	padding: 0;
}

#loadingShapesMessage{
	display: none;
	position: absolute;
	text-align: center;
	background: rgba(255,255,255,0.7);
	padding: 15px 30px;
	color: black;
	border-radius: 25px;
	z-index: 99999;
	bottom: 75px;
	left: 50%;
	font-size: 14px;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);

}


/************************************/
/********** Media Queries ***********/
/************************************/
/* Test Div */
#testDiv {
	z-index: 500;
	width: 25px;
	height: 25px;
	right: 200px;
	top: 50px;
	position: absolute;
	display: inline-block;
}

/* Map Printer */

/* Printing */
@media print{
	/*@media screen and (min-width: 1200px){*/
	.topbar, nav, #menuContainer{
		display: none
	}

	*{-webkit-transition:none!important;transition:none!important}

	#a4Container #map{
		top: 0;
		right: 0;
		margin: 0;
		border: none;

	}

	body, .wrapper, #a4Container, #mapContainer, #map{
		overflow: hidden;
		margin: 0;
		padding: 0;
		left: 0;
	}

	#a4Container.portrait, #a4Container.landscape {
		padding: 0;
		top: 0;
		right: 0;
		margin: 0;
		transform: none;
		-webkit-transform: none;
	}
}

/* Tablet Landscape (light blue) */ 
@media screen and (max-width: 1200px){
	/*remove after testing */
	#testDiv {
		background: lightblue;
	}
}

/* Tablet Portrait (lime) */
@media screen and (max-width: 1000px){
	/*remove after testing */
	#testDiv {
		background: lime;
	}

}


/* Mini Tablet (orange) */
@media screen and (max-width: 800px){
	/*remove after testing */
	#testDiv {
		background: orange;
	}

	#menuContainer {
		left: 0;
	}

	#markerOptions{
		left: 50%;
	}
}


/* Phablet (yellow) */
@media screen and (max-width: 600px){
	/*remove after testing */
	#testDiv {
		background: yellow;
	}

	.modal{
		top: 40px;
		padding: 20px;
		left: 50%;
		-webkit-transform: translate(-50%, 0);
		        transform: translate(-50%, 0);
	}

	#markerOptions h1{
		font-size: 40px;
	}

	#markerOptions li{
		width: 100px;
	}

	#markerOptions h3{
		font-size: 16px;
	}

	#markerOptions .markerCircle{
		width: 40px;
		height: 40px;
	}




}


/* Phones (blue) */
@media screen and (max-width: 400px){
	/*remove after testing */
	#testDiv {
		background: blue;
	}

	#markerOptions table tr td:first-child{
		display: none;
	}

	#polygonEditor.extraOptions ul,
	#polylineEditor.extraOptions ul{
		right: 5px;
	}

	#polygonEditor.extraOptions li,
	#polylineEditor.extraOptions li {
		width: 50%;
	}

	#toolBar #customColorPicker{
		height: 48px;
		margin-bottom: 37px;
	}

}


/* Height */
@media screen and (max-height: 500px){
	
}

@media screen and (max-height: 400px){
	#toolBar li{
		line-height: 20px;
		height: 20px;
	}

	#toolBar .extraOptions li{
		line-height: 20px;
	}

	#toolBar .extraOptions ul{
		margin-top: 0px;
		top: 0;
	}

	#toolBar #customColorPicker{
		height: 48px;
		margin-bottom: 3px;
	}
}
/******* Pasture Planner *****/
#pasturePlannerOuterBox{
	position: relative;
}

#viewPastureReadings #pastureTable td, 
#viewPastureReadings #pastureTable th{
	padding: 0 10px;
	text-align: center;
}

#pastureMap{
	height: 100%;
	width: 100%;
	text-align: center;
}

#pastureMapContainer{
	width: 100%;
	height: 100%;
}

.ol-control button{
	width: 45px;
}



#pastureInput{
	text-align: center;
	margin-bottom: 10px;
}

#pastureInput input,
#pastureInput select{
	width:90%;
	text-align: center;
}

#pastureInput select{
	padding: 10px 0px 10px 5px;
}

#pastureGraphs{
	width: 100%;
	height: 100%;
}
#pastureGraphs #graphContainer{
	width: 100%;
	height: 90%;
}

.highcharts-container{
	width:100%; 
	height:100%;
	margin: 0;
}




#pastureGraphs, #inputPastureReadings{
	display: none;
}

#paddockHover{
	position: absolute;
	background: white;
	left: 50%;
	border-radius: 0 0 5px 5px;
	padding: 0 5px;
	z-index: 999;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
}

/*Recording Method Select */
#recordingPasturePlateMeterScreen p{
	display: inline-block;
	max-width: 600px;
}


/* Paddocks */
.pdkBox{
	width: 250px;
	height: 250px;
	text-align: center;
}


#locatorWrapper{
	position: relative;
	height: 100%;
	width: 100%;
}

#locatorMap {
	width: 100%;
	height: calc(100vh - 40px);
	background: white;
}

#locatorSideBar{
	position: absolute;
	left: 0px;
	top: 0px;
	background: white;
	z-index: 100;
}

#locatorUL{
	padding: 0;
	cursor: pointer;
}

#locatorUL td:first-child{
	padding: 5px 0px 5px 10px;
}

#locatorUL td:last-child{
	padding: 5px 10px 5px 0px;
}

#locatorMap .ol-attribution{
	right: 5px;
	left: auto;
}

#findPeople{
	position: absolute;
	left: 20px;
	bottom: 0px;
	background: white;
	font-size: 35px;
	border-radius: 50%;
	padding: 10px;
	color: #9CC763;
	height: 35px;
	width: 35px;
	cursor: pointer;
	box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
}

#findPeopleText{
	color: #999;
	font-size: 24px;
}

/*Find People Rotation*/
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotatey(0deg);
  }
  to { 
    -webkit-transform: rotatey(360deg);
  }
}
.rotating{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         1.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
}
#timesheetOverflow{
	/*min-width: calc(100% - 125px);*/
	background: hsla(0, 0%, 95%, 1);
	background: #E4E4E4;
	background: #EDEDED;
	/*margin-right: 90px;*/
	/*width: calc(100% - 20px);*/
}

#timesheetOverflow canvas{
	z-index: 10;
}

#timesheetOverflow .chartContainer{
	position: relative;
	margin: 10px;
	width: 250px;
}

#timesheetOverflow .chartContainer .editWork{
	cursor: pointer;
	position: absolute;
	left: 10px;
	top: 10px;
}

#timesheetOverflow #diaryMobileDatepicker{
	display: inline-block;
	background: inherit;
	margin-bottom: -10px;
	margin-top: 15px;
}

#timesheetOverflow #diaryMobileDatepicker #dayViewPicker{
	display: inline-block;
}

.timelineContainer{
	/*height: 720px;*/
	display: inline-block;
	/*white-space: nowrap;*/
	vertical-align: middle;
	text-align: center;
	width: 100%;
}




.timesheetModal {
	padding: 50px;
	position: fixed;
	top: 2.5%;
	z-index: 10000;
	display: none;
	max-height: calc(96% - 100px);
}

.timelineContainer ul {
	border-right: 1px solid #999;
	/*display: inline-block;*/
	display: none;
	padding: 0 5px 0 0;
	text-align: right;
	vertical-align: middle;
}

.timelineContainer li {
	display: inline-block;
	height: 30px;
	vertical-align: bottom;
}
.timelineContainer li span{
	display: inline-block;
	vertical-align: middle;
	margin-top: 5px;
}

.timelineContainer li:first-child{
	margin-top: 15px;
}

.timelineContainer li:last-child{
	margin-bottom: 15px;
}

.userContainer{
	width: 100px;
	/*display: inline-block;*/
	display: none;
	vertical-align: top;
	margin-left: 5px;
	cursor: pointer;
}

.userContainer div{
	width: 100%;
}

.userContainer .empty{
	height: 720px;
	background: #E6E6E6;
}

#dayView {
	display: inline-block;
	width: 100%;
}

#weekView {
	display: none;
}



#timelineHeaderContainer {
	/*white-space: nowrap;*/
	display: inline-block;
	width: 100%;
}

.timelineHeaders .short{
	display: none;
}

.userContainer .notWorking{
	background: #E6E6E6;
}

 .userContainer .working{
	background: #9CC763;
}


.timelineHeaders{
	margin-left: 200px;
	/*white-space: nowrap;*/
}

.timelineHeaders ul{
	padding-left: 0;
	margin-top: 3px;
	display: none;
}

.timelineHeaders li{
	width: 100px;
	display: inline-block;
	margin-left: 5px;
	border-radius: 10px 10px 0 0;
	text-align: center;
}

.timelineHeaders .selected{
	border: solid 1px;
	background: white;
	border-radius: 5px 5px 0 0;
	font-weight: 400;
	width: 98px;
}

#timesheetAddEventLocking{
	margin-top: 10px;
	font-weight: 400;
	font-size: 18px;
}

#timesheetAddEventLocking p{
	font-weight: 300;
	font-size: 14px;
}

#timesheetAddEventList td{
	cursor: pointer;
}

@media screen and (min-width: 490px){
	#timesheetAddEventList th:not(:last-child) , 
	#timesheetAddEventList td:not(:last-child) {
		/*min-width: 100px;*/
		padding: 0 15px;
	}
}

/*#timesheetAddEventList td:last-child{
	visibility: hidden;
}*/

#timesheetAddEventList tr td:last-child .icon-remove:hover {
	visibility: visible;
	color: red;
}

#timesheetAddEventList tr td:last-child .save,
#timesheetAddEventList tr td:last-child #cancel{
	font-weight: 500;
	margin: 2px;
	display: inline-block;
}

#timesheetAddEventList tr td:last-child .save:hover,
#timesheetAddEventList tr td:last-child #cancel:hover{
	color: #9CC763;


}

input[type="text"].editTimeTextInput {
	margin: 0.5em 0;
	width: 90%;
	height: 80%;
	text-align: center;
	padding: 0;
}

#addEventTable{
	margin: auto;
}

#addEventTable #startTime, 
#addEventTable #endTime,
#addEventTable #description{
	margin-left: 3px;
	margin-right: 3px;
}

#addEventTable #startTime, 
#addEventTable #endTime{
	width: 100px;
}

.timeValidator{
	cursor: pointer;
	position: absolute;
	margin-left: -103px;
	margin-top: 50px;
	background: #EEE;
	color: black;
	padding: 5px;
	border-radius: 1px;
	width: 90px;
}

#timesheetAddEvent{
	text-align: center;
}

#timesheetAddEvent #innerAddEvent{
	overflow: auto;
}

#addEventsDayView, #EventsTable {
	display: inline-block;
}

#EventsTable{
	max-width: 100%;
}

#doneUserEventsContainer{
	margin-top: 25px;
}

#timesheetHeader ul {
	/*display: inline-block;*/
	display: none;
	vertical-align: 4px;
}

#timesheetHeader li{
	border: solid 1px #9CC763;
	padding: 4px 7px;
	color: white;
	background: #9CC763;
	cursor: pointer;
}

#timesheetHeader .selected{
	background: white;
	color: #9CC763;
}

#timesheetHeader select{
	padding: 3px;
	margin-top: 4px;
	vertical-align: 4px;
}

#timesheetHeader option{
	background: inherit;
	border: solid 1px;
}

#timesheetHeader {
	min-width: 200px;
}

#userSelectWeekView {
	display: none;
	margin-left: 25px;
}

#signWeek{
	padding: 5px 15px;
	height: initial;
	display: none;
	float: right;
	/*background: initial;
	color: #9CC763;*/
}

#timesheetOuterBox{
	height: calc(100% - 10px);
}

#cordovaHeader #timesheetOuterBox{
	height: calc(100% - 50px);
}

#cordovaHeader #showSideSelect{
	display: none;
}

#cordovaHeader #sideSelect{
	display: none;
}

#summaryView {
	display: none;
}

#settingsView{
	display: none;
}

#payView {
	display: none;
	text-align: center;
	width: 100%;
}


#payViewButton{
	display: none;
}

#settingsView table{
	margin: 0 auto 10px;
}

#settingsView td{
	padding: 10px 5px;
}

#settingsView td:nth-child(2){
	text-align: left;
	padding-left: 10px;
}

#settingsView td:first-child{
	text-align: right;
	padding-right: 10px;
}

#changeHomeLocationContainer{
	display: none;
	position: fixed;
	top: 5%;
	/*left: calc(5% + 100px);*/
	z-index: 99999999999;
	width: calc(90% - 100px);
	height: 90%;
	border-radius: 10px;
	padding: 10px;
}

#homeLocation {
	width: 100%;
	height: 100%;
}

#homeLocationButtons {
	position: absolute;
	bottom: 20px;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
}

#setRadiusButtons{
	position: absolute;
	top: 20px;
	left: 20px;
	background: #9CC763;
	color: white;
	text-align: center;
	border-radius: 5px;
}

#setRadiusButtons tr:first-child,
#setRadiusButtons tr:last-child{
	cursor: pointer;
}

#setRadiusButtons tr:first-child td:hover{
	border-radius: 5px 5px 0 0;
}

#setRadiusButtons tr:last-child td:hover{
	border-radius: 0 0 5px 5px;
}

#setRadiusButtons tr:first-child:hover,
#setRadiusButtons tr:last-child:hover{
	background: white;
	color: #9CC763;
}

#noEventsToday{
	display: none;
}

#summaryView th{
	padding: 0 10px;
}
#summaryView {
	text-align: center;
	width: 100%;
}

#summaryView table {
	margin: auto;
}



#recordWork, #timesheetOuterBox #mapView{
	display: none;
	width: 100%;
}

#recordWork{
	margin: 10px;
	padding: 10px 0;
	width: calc(100% - 20px);
}

#recordWork table{
	margin:  0 auto;
}

#recordWork table td{
	padding: 5px;
}

#recordWork select{
	width: 100%;
	padding: 10px 0;
}

#manRecordHeading{
	text-align: center;
}

#startStopRecordingWorkButton{
	display: inline-block;
	background: #9CC763;
	color: white;
	border-radius: 2px;
	padding: 10px;
	font-size: 24px;
	cursor: pointer;

}

#startStopRecordingWorkButton.recordingWork{
	background: #CF000F;
}

#startStopRecordingWorkButton .icon{
	font-size: 30px;
}

#startStopRecordingWorkButton .text{
	vertical-align: middle;
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	display: inline-block;
	margin-top: -12px;
}

#startStopRecordingWorkContainer{
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.manualRecordingHidden{
	text-align: center;
	display: none;
}

#manualRecText{
	margin: 0;
}

#addOption{
	display: none;
	padding-top: 0;
}

#addOption label{
	font-size: 16px;
}

#noDescriptionSpan {
	font-size: 18px;
}

.smallScreenOnly{
	display: none;
}

.bigScreenOnly{
	display: inline-block;
}

#timesheetOuterBox #addEventButton,
#timesheetOuterBox #cancelEventsButton{
	margin-bottom: 10px;
	width: 150px;
}

#summaryTableContainer{

	padding: 10px;

}

/* Week Date Picker */
 #timesheetOverflow #diaryMobileDatePicker #weekViewPicker{
 	display: none;
 }

#weekViewPicker .sideArrow{
 	font-size: 30px;
 }

 #weekViewPicker #middleCell{
 	width: 200px;
 }


/*Side bar tabs*/
#sideSelect{
	padding: 0px 0px 0px 0px;
	margin-top: -20px;
	display: inline-block;
	text-align: center;
	position: fixed;
	right: 0px;
	height: 100%;
	overflow-y: auto;
	border: solid 3px #9CC763;
	z-index: 9990;
	/*border-radius: 5px 0 0px 5px;*/
	background-color: #9CC763;
}
#sideSelect ul {
	padding: 0;
	/*border: solid white 1px;*/
}

#sideSelect li{
	border: solid 1px white;
	padding: 20px 5px;
	display: inline-block;
	width: calc(100% - 12px);
	background: #9CC763;
	color: white;
	cursor: pointer;
}

#sideSelect li.selected{
	background: white;
	color: #9CC763;
}

#sideSelect li span{
	font-size: 40px;
}

#showSideSelect {
	display: none;
	color: #9CC763;
	background: white;
	padding: 15px;
	border-radius: 50%;
	position: fixed;
	right: 10px;
	bottom: 10px;
	font-size: 30px;
	z-index: 9990;
	cursor: pointer;
	box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
}

#timesheetOverlay{
	z-index: 9999;
}

#summary{
	cursor: pointer;
}

/* Map View Tab */
#mapViewButton{
	display: none;
}

#timesheetOuterBox #mapView #mapSide,
#timesheetOuterBox #mapView {
	height: 100%;
}

#timesheetOuterBox #mapView{
	margin-top: -25px;
	position: relative;
}

#timePop{
	/*display: none;*/
	position: absolute;
	z-index: 99999999999999999;
	color: white;
	cursor: default;
	bottom: 0;
	transform: translate(-50%);
	border-radius: 5px;
	padding: 5px;
}

#mapTimeLines{
	position: absolute;
	z-index: 100;
	background: rgba(255, 255, 255, 0.3);
	height: 480px;
	padding: 0 5px 0 5px;
}

.mapTimeline {
	width: 10px;
	position: relative;
	display: inline-block;
	border-radius: 10px;
	height: 480px;
	margin: 2px;
}
.timeBar{
	border-radius: 10px;
	width: 10px;
	border: solid 1px;
	position: absolute;
}

#mapView #lineStyle{
	position: absolute;
	display: inline-block;
	z-index: 200;
	right: 50px;
	margin-top: 10px;
	width: 100px;

}

#mapView .circleButtonContainer{
	height: 20px;
	width: 20px;
	text-align: center;
	background: rgba(255, 255, 255, 0.3);
	padding: 10px;
	margin-bottom: 3px;
	position: relative;
	cursor: pointer;
	display: inline-block;
	top: 0;
	vertical-align: top;
}

#mapView .circleButtonContainer.selected,
#mapView .circleButtonContainer:hover,
#mapView #peopleSelect #allPeople.selected,
#mapView #peopleSelect #allPeople:hover {
	background: rgba(255, 255, 255, 0.8);
}

#mapView ul{
	padding-left: 0;
}

#mapView #smallCircles{
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #9CC763;
	display: inline-block;
	margin-top: 4px;
}

#mapView #bigCircles{
	width: 30px;
	height: 10px;
	border-radius: 50%;
	background: #9CC763;
	font-size: 8px;
	display: inline-block;
	color: white;
	position: absolute;
	left: 5px;
	top: 5px;
	padding: 10px 0 10px 0;
}

#mapView #peopleSelect{
	display: inline-block;
	position: absolute;
	right: 20px;
	/*margin-top: 75px;*/
	bottom: 75px;
	z-index: 200;
}

#mapView #peopleSelect li{
	width: 100%;
	height: 25px;
	color: #999;
	padding: 10px;
	cursor: pointer;
	text-align: center;
}

#mapView #peopleSelect li.selected,
#mapView #peopleSelect li:hover{
	font-weight: 500;
	color: white;
}

#mapView #peopleSelect li span{
	/*width: 14px;
	height: 14px;
	padding: 6px;
	border-radius: 50%;
	display: inline-block;
	top: 2px;
	font-weight: 500;*/
	font-size: 20px;
}

#mapView #peopleSelect #allPeople{
	font-size: 30px;
	color: black;
	background: rgba(255, 255, 255, 0.3);
}

#mapView #datePicker{
	display: inline-block;
	position: absolute;
	right: 170px;
	z-index: 200;
	background: rgba(255, 255, 255, 0.8);
	margin-top: 10px;
	text-align: center;
	width: 170px;
}

#mapView #datePicker table{
	width: 100%;
}

#mapView #datePicker td{
	padding: 0 5px;
}

#mapView .datePickerSelect td{
	cursor: pointer;
}

#mapView .datePickerSelect td:hover{
	color: black;
	background-color: rgba(255, 255, 255, 0.9);
}

#mapView #noWorkMessage{
	margin-top: 230px;
	display: inline-block;
	color: black;
}


/* Pay/Wages Tab */
#noPayInfo span{
	font-weight: 400;
}

.wagePersonContainer{
	margin: 10px;
}
.wagePersonContainer .dayTable td{
	border: solid 1px #CCC;
	width: 100px;
	padding: 10px;
	cursor: pointer;
}

.wagePersonContainer .tdContent h1{
	font-size: 50px;
	height: 50px;
	margin: 0;
	padding: 10px;
}
.payInfoTable{
	display: inline-block;
	width: 300px;
}
.payInfoTable td{
	width: 150px;
}

.payInfoTable td:first-child{
	text-align: right;
	padding-right: 10px;
	font-weight: 400;
}

.payInfoTable td:last-child{
	text-align: left;
}



#payData .smaller:before{
	font-size: 30px;
	line-height: 60px;

}

#payData #payRate .noPayRate{
	font-weight: 400;
	cursor: pointer;
	color: #9CC763;
}

#addPayRate h1{
	font-size: 60px;
}

#addPayRate select,
#addPayRate input[type="number"]{
	width: 250px;
}

#addPayRate select{
	padding: 10px;
}

#payRateValues{
	display: inline-block;
}

.changePayRatePencil{
	cursor: pointer;
}

#payPeriodPicker{
	display: inline-block;
}

#payPeriodPicker td{
	padding: 10px;
}
#payPeriodPicker .arrowPPP{
	cursor: pointer;
}

.wagePersonContainer .small{
	display: none;
}

.wagePersonContainer .big{
	display: inline-block;
}

/*
#addWagesWrapper input{
	width: 250px;
}

#addWagesWrapper select{
	text-align: center;
}

#wagesTitle{
	margin: -10px 0 5px 0;
}

#setUpWagesButton{
	margin: 15px 0;
}

#selectAddUserWages{
	width: 250px;
	padding: 13px;
	text-indent: 15px;
	margin-bottom: 16px;
	text-align: center;
}

#payCycleSelect{
	padding: 13px;
}

#hourlyRate{
	text-indent: 15px;
}

#addWagesWrapper #payCycleNumber{
	width: 90px;
} 

#payCycles{
	width: 100%;
	padding: 0;
}

#payCycles .userPayCycle{
	display: inline-block;
	width: 100%;
	border: solid 1px;
	margin: 2px;
}

#payCycles .userPayCycle h3{
	color: #666;
}

#payCycles .wageUser{

}

#payCycles .wageGraph{
	width: 99%;
	height: 200px;
}

#payCycles .editPayCycle{
	margin: 10px 0;
}
*/
#dateSideBarContainer{
	/*display: inline-block;*/
	display: none;
}


/* Timesheet Tutorial */

#timesheetTutorialContainer .visibleOverlay,
#timesheetTutorialContainer .menu{
	z-index: 9999;
}



#autoTimesheetSettingsLoaded{
	display: none;
}

#timesheetTutorialContainer .menu{
	padding: 5%;
}

#timesheetTutorialContainer .tsSetting,
#timesheetTutorialContainer ol{
	width: 80%;
	text-align: left;
	margin: auto;
}

#autoTimesheetSettingsLoaded .tsSetting h2{
	margin-left: 10px;
}

#autoTimesheetSettingsLoaded #summaryOfSettings,
#timesheetTutorialContainer #autoScreenTwo{
	width: 80%;
	margin: auto;
}








/*******************************/
/*      Media Queries          */
/*******************************/

/* Tablet Landscape (light blue) */ 
@media screen and (max-width: 1200px){

}

/* Tablet Portrait (lime) */
@media screen and (max-width: 1100px){
	.userContainer{
		width: 25px;
	}

	.timelineHeaders li{
		width: 25px;
		border-radius: 2px 2px 0 0;
	}

	.timelineHeaders .selected{
		width: 23px;
	}

	.timelineHeaders .long{
		display: none;
	}

	.timelineHeaders .short{
		display: inline-block;
	}

}


/* Mini Tablet (orange) */
@media screen and (max-width: 900px){
	.dayTable{
		display: inline-block;
	}

	.chartContainer{
		max-width: 250px;
	}
	.wagePersonContainer .small{
		display: inline-block;
	}

	.wagePersonContainer .big{
		display: none;
	}

	.wagePersonContainer .dayTable td{
		width: initial;
		font-size: 14px;
		padding-top: 5px;
		padding-left: 5px;
		padding-right: 5px;
		padding-bottom: 5px;

	}

	.wagePersonContainer .tdContent span{
		display: none;
	}

	.wagePersonContainer .tdContent h1{
		font-size: 24px;
		padding: 0;
	}

	#payData .wagePersonContainer .tdContent .smaller:before{
		font-size: 18px;
		line-height:20px;
	}

	.wagePersonContainer .tdContent h1{
		height: initial;
	}
}


/* Phablet (yellow) */
@media screen and (max-width: 600px){
	/*remove after testing */
	.timesheetModal{
		top: 10px;
	}

	#timesheetOuterBox{
		margin-left: 0;
		margin-right: 0;
	}
	#timesheetOuterBox .box{
	
	}

	#timesheetOuterBox .appTitle{
		display: none;
	}

	#timesheetOuterBox #viewButtons{
		padding: 0;
		/*white-space: nowrap;*/
	}

	#timesheetOuterBox #mapView{
		height: calc(100% - 115px);
		position: fixed;
		left: 0;
		top: 145px;
	}

	#timesheetOuterBox .smallScreenOnly{
		display: table-cell;
	}	

	#timesheetOuterBox .bigScreenOnly{
		display: none;
	}

	#sideSelect{
		display: none;
	}

	#showSideSelect{
		display: inline-block;
	}

	#timesheetOverflow{
		margin-right: 0px;
		min-width: 100%;
	}

	.graphTitle{
		display: none;
	}

	.timelineHeaders {
		margin-left: 54px;
	}

	/*#payView{
		margin-top: -75px;
	}*/

	/*#timelineHeaderContainer{
		margin-top: 90px;
	}*/

}

@media screen and (max-width: 490px){

	.wagePersonContainer .dayTable td{
		width: initial;
		font-size: 12px;
		padding: 2px;
	}

	.wagePersonContainer .tdContent span{
		display: none;
	}

	.wagePersonContainer .tdContent h1{
		font-size: 24px;
		padding: 0;
	}

	#EventsTable{
		font-size: 14px;

	}

	#timesheetAddEventList td:not(:last-child),
	#timesheetAddEventList td{
		min-width: 0;
		padding: 0 5px;
	}

	#payData .wagePersonContainer .tdContent h1.smaller{
		font-size: 24px;
	}

	#mapTimeLines{
		display: none;
	}

	#mapView #lineStyle {
		right: 0px;
	}

	#mapView #datePicker{
		right: 110px;
	}

	#mapView .ol-zoom{
		display: none;
	}

	/*.timelineContainer{
		position: relative;
	}
	.chartContainer{
		width: 100% !important;
		max-width: 100%;
	}*/
}

/* Phones (blue) */
@media screen and (max-width: 400px){

	.wagePersonContainer{
		margin: 0;
	}



	.timelineContainer li{
		font-size: 12px;
	}

	#timesheetOverflow{
		padding: 2px;
	}

	#summaryViewButton{
		display: none;
	}
	
	#timesheetOverflow .chartContainer {
		margin: 2px;
	}

	/*.timelineContainer{
		width: 34px;
	}*/

	.timelineHeaders{
		margin-left: 44px;
	}

}


@media screen and (max-height: 540px){
	#timesheetAddEvent{
		height: 70vh;
		overflow-y: auto;
	}
}
#dateSideBar {
	text-align: center;
}

#dateSideBar ul,
#dateSideBar td {
	padding: 0;
}

#dateSideBar table {
	vertical-align: top;
}

#dateSideBar li {
	border: solid 1px white;
}

#dateSideBar li span{
	margin: 0 10px;
}

#dateSideBar #diaryMonths li,
#dateSideBar #diaryDays li{
	display: inline-block;
	width: 100%;
} 

#dateSideBar #diaryMonths li {
	padding: 17.5px 0px;
}

#dateSideBar td {
	border: solid 1px white;
	background: #9CC763;
	color: white;
}

#dateSideBar li{
	cursor: pointer;
}

#dateSideBar li:hover{
	color: #9CC763;
	background: white;
}

#dateSideBar td{
	vertical-align: top;
}

#dateSideBar .selected {
	background: white;
	color: #9CC763;
}

#yearTable{
	width: 100%;
}

#diaryYear{
	padding: 0 15px;
}

#yearTable td:first-child,
#yearTable td:last-child{
	padding: 5px 0;
	cursor: pointer;
}

#yearTable td:first-child:hover,
#yearTable td:last-child:hover{
	color: #9CC763;
	background: white;
}

#yearTable td{
	vertical-align: middle;
}


/* 
//////////////////
  end of side bar 
//////////////////
*/


#diaryMain, #dateSideBar {
	display: inline-block;
	vertical-align: top;
}

#diaryMain{
	width: calc(100% - 150px);
	text-align: center;
}

#diaryCurrentDate {
	display: inline-block;
	margin: auto;
}

#diaryContentContainer{
	margin: 20px 0;
	text-align: left;
	padding-left: 5%;
	min-height: 100px;
}

#diaryMain textarea{
	width: 90%;
	margin: 5px 0;
	min-height: 50px;
}

#diaryContent tr:first-child td:first-child span{
	margin-right: 10px;
}

#diaryContent td{
	padding: 3px 0;
}

#diaryCurrentDateMobile{
	display: none;
}

#diaryMobileDatepicker {
	display: none;
	font-size: 24px;
	text-align: center;
	width: 100%;
	/*position: fixed;
	margin-top: 10px;*/
	background: white;
}

#diaryMobileDatepicker td{
	padding: 0 10px;
}

#diaryMobileDatepicker table {
	display: none;
}

#mobileDatePickerBuffer, #innerMobileDateBuffer {
	/*height: 100px;*/
	display: none;
}

#diaryMobileDatepicker tr:first-child,
#diaryMobileDatepicker tr:last-child{
	cursor: pointer;
}

#diaryMobileDatepicker tr:first-child td:hover,
#diaryMobileDatepicker tr:last-child td:hover{
	color: #9CC763;
}

#diaryMobileDatepicker td:nth-child(2){
	width: 120px;
}

/* Entry Select */
#entrySelect{
	display: none;
}

#entrySelect ul{
	padding: 0;
}

#entrySelect .menu{
	padding: 20px;
}

#entrySelect li{
	width: 100px;
	height: 100px;
	text-align: center;
	background: rgb(242,242,242);
	padding: 10px;
	box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
	cursor: pointer;
	margin: 5px;
	transition: 0.5s;
}

#entrySelect li:hover{
	background: white;
	transition: 0.5s;
}

#entrySelect .icon{
	font-size: 60px;
}

@media screen and (max-width: 600px){
	#dateSideBar {
		display: none;
	}

	#diaryMain{
		width: 100%;
	}

	#diaryMobileDatepicker{
		display: block;
	}

	#diaryCurrentDate {
		display: none;
	}



	#mobileDatePickerBuffer, #innerMobileDateBuffer{
		display: inline-block;
	}

	#diaryMobileDatepicker table {
		/*display: inline-block;*/ /*Breaking timesheet, make more specific if needed*/
	}
}
/* General */
#herdManagerContainer{
	position: relative;
}

.herdSection{
	display: none;
}

#herds.herdSection{
	display: block;
}

#herdManagerContainer #loadingScreen{
	display: block;
	color: white;
	text-align: center;
	margin-top: 100px;
}

#herdMain #loadingScreen{
	background: #c5e1a5;
	padding: 50px;
}



/* Map */
#herdMap {
	width: 100%;
	height: 100%;
	position: relative;
}

#herdMapSection{
	height: 100%;
}

#herdMap #datePicker{
	display: inline-block;
	position: absolute;
	right: 100px;
	z-index: 200;
	background: rgba(255, 255, 255, 0.8);
	margin-top: 10px;
	text-align: center;
	width: 170px;
}

#herdMap #datePicker table{
	width: 100%;
}

#herdMap #datePicker td{
	padding: 0 5px;
}

#herdMap .datePickerSelect td{
	cursor: pointer;
}

#herdMap .datePickerSelect td:hover{
	color: black;
	background-color: rgba(255, 255, 255, 0.9);
}

#herdsOnMap{
	display: inline-block;
	background: rgba(255, 255, 255, 0.8);
	position: absolute;
	z-index: 200;
}

#herdsOnMap ul{
	padding: 0;
	text-align: center;
}

#herdsOnMap li{
	padding: 10px;
	text-align: center;
	display: block;
	cursor: pointer;
	margin: 0;
}

#herdsOnMap li.selected,
#herdsOnMap li:hover{
	font-weight: 500;
	background-color: rgba(255, 255, 255, 0.9);
}

#herdManagerContainer #mapButtons{
	top: 80px;
	right: 10px;
	position: absolute;
	z-index: 200;
	display: none;
}

#herdManagerContainer #mapButtons .mapButton{
	background: rgba(255, 255, 255, 0.8);
	padding: 10px;
	font-size: 25px;
	cursor: pointer;
}

#herdManagerContainer #mapButtons .mapButton:hover,
#herdManagerContainer #mapButtons .mapButton.selected{
	background-color: rgba(255, 255, 255, 1);
	color: #9CC763;
}

/*#currentDateHerdInfo is for maps, specifically the herd info for the selected date*/
#herdManagerContainer #currentDateHerdInfo{
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 200;
	cursor: pointer;
	
}

#currentDateHerdInfo .herdMapInfoContent,
#currentDateHerdInfo td{
	margin: 5px;
	padding: 5px;
	background: rgba(255, 255, 255, 0.8);
	position: relative;
}

#currentDateHerdInfo #fullDay{
	display: none;
}

.herdMapInfoIconContainer{
	display: inline-block;
	height: 100%;
}

.herdMapInfoButton{
	right: 0;
	border-radius: 50%;
	display: inline-block;
	margin-left: 5px;
	cursor: pointer;
}

.herdMapInfoIcon{
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	background-color: #9CC763;
	color: white;
	border: solid 2px #9CC763;
}

#currentDateHerdInfo tr:nth-child(2) .herdMapInfoIcon{
	border-style: dashed;
	border-color: white;
}

.herdMapInfoIcon.selected{
	background: white;
	color: #9CC763;
}

#currentDateHerdInfo tr:nth-child(2) .herdMapInfoIcon.selected{
	border-style: dashed;
	border-color: #9CC763;
}

#currentDateHerdInfo tr.selected{
	background-color: white;
	color: #666;
}

/* Herds */



.herd{
	display: inline-block;
	background: white;
	padding: 20px;
	margin: 20px;
	border-radius: 5px;
	cursor: pointer;
	text-align: center;
	width: 110px;
	height: 110px;
	box-shadow: 0 0 1px 0 rgba(61,119,180,.12), 0 0.25rem 12px 0 rgba(91,139,199,.24);
}


#herds .herdIcon{
	font-size: 70px;
	margin-bottom: 10px;
}

#herds .herd h3{
	margin-top: 10px;
}

#herdMenuContainer{
	display: none;
}

#herdColorPicker{
	padding: 0;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 20px;
}

#herdColorPicker li{
	width: 50px;
	height: 50px;
	line-height: 55px;
	border-radius: 50%;
	font-size: 30px;
	cursor: pointer;
}

.options{
	padding-left: 0;
	
}

.options li{
	width: calc(50% - 24px);
	border: solid 2px #CCC;
	padding: 10px;
	cursor: pointer;
}

.options li.selected{
	border: solid 2px #9CC763;
	color: #9CC763;
	font-weight: 500;
}

#moveFrequency{
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 10px;
}

#saveHerdChanges{
	display: none;
}


#herdManagerContainer #infoBox{

	background: #9CC763;
	color: white;
	padding: 10px;
	border-radius: 2px;
}

/*Herd Colors*/
.lightBlueHerd{
	color: #6BB9F0;
}

.lightBlueHerdBG{
	background: #6BB9F0;
	color: #6BB9F0;
}

.blueHerd{
	color: #3498DB;
}

.blueHerdBG{
	background: #3498DB;
	color: #3498DB;
}

.darkBlueHerd{
	color: #2C3E50;
}

.darkBlueHerdBG{
	color: #2C3E50;
	background: #2C3E50;
}

.yellowHerd{
	color: #F7CA18;
}

.yellowHerdBG{
	color: #F7CA18;
	background: #F7CA18;
}

.orangeHerd{
	color: #E87E04;
}

.orangeHerdBG{
	color: #E87E04;
	background: #E87E04;
}

.brownHerd{
	color: #96281B;
}

.brownHerdBG{
	color: #96281B;
	background: #96281B;
}

.redHerd{
	color: #CF000F;
}

.redHerdBG{
	color: #CF000F;
	background: #CF000F;
}

.pinkHerd{
	color: #DB0A5B;
}

.pinkHerdBG{
	color: #DB0A5B;
	background: #DB0A5B;
}

.purpleHerd{
	color: #8E44AD;
}

.purpleHerdBG{
	color: #8E44AD;
	background: #8E44AD;
}

.greyHerd{
	color: #CCC;
}

#herdColorPicker li.selected{
	color: white;
}
#weather #weekFull{
	width: 100%;
	text-align: center;
}

#weather #weekFull .day{
	display: block;
	margin-bottom: 10px;
	overflow-x: auto;
	box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}

#weather #weekFull .hourRain{
	width: 10px;
	margin-left: 5px;
	margin-right: 5px;
	background: blue;
	display: inline-block;
	bottom: 0;
	border-radius: 1px;
}

#weather .noFarmMessage{
	width: 98%;
}

#weather #weekFull .small{
	display: none;
	/*change this to media query */
}

#weather table{
	display: inline-block;
}

#weather table td{
	vertical-align: bottom;
	padding: 0 5px;
}

.weatherIcon{
	font-size: 50px;
}

.noRain{
	color: #CCC;
}

@media screen and (max-width: 1250px){
	#weather table{
		font-size: 14px;
	}	
}

@media screen and (max-width: 1150px){
	#weather table{
		font-size: 12px;
	}	

	#weather table td{
		padding: 0 2px;
	}
}

@media screen and (max-width: 870px){
	#weather table{
		font-size: 10px;
	}	
}
#calvingContainer{
	height: 100%;
	margin-left: 110px;
	display: table;
}

#calvingSideBar{
	position: fixed;
}

#calvingContainer #progress{
	margin-top: 10px;
}

#newCalvingMenuContainer,
#calvedMenuContainer{
	display: none;
}

.st-pusher #calvingSideBar,
.st-pusher #calvingContainer{
	margin-top: 40px;
}

#drafting, #matchUp, #calvedMain{
	display: none;
}

#calvingContainer ul{
	padding: 0;
}

.noCalvings{
	text-align: center;
	width: 100%;
	margin-top: 100px;
	display: inline-block;
}

#calvingContainer .cowProg{
	width: 90%;
	margin: 5px 3%;
	text-align: center;
	cursor: pointer;
}

#calvingContainer table{
	width: 100%;
}

#calvingContainer .cowProg .cowNum{
	float: left;
	font-weight: 500;
	width: 10%;
	font-size: 20px;
}

#calvingContainer .cowProg .timeSince{
	float: right;
	width: 30%;
	font-size: 14px;
}

#calvingContainer .topLine{
	margin-bottom: 10px;
}

#calvignContainer .topLine:after{
  content: "";
  display: table;
  clear: both;
}

#calvingContainer .topLine div{
	display: inline-block;
}

#calvingContainer .line{
	display: inline-block;
	height: 0px;
	width: 18%;
	margin-left: -10px;
	margin-right: -10px;
	line-height: 20px;
	margin-bottom: 6px;
}

#calvingContainer .dot{
	display: inline-block;
	width: 0px;
	height: 0px;
	border-radius: 50%;
}

#calvingContainer #progressPicker{
	width: 250px;
	text-align: center;
	margin: auto;
}

#calvingContainer #progressPicker li{
	color: white;
	padding: 5px;
	margin: 2px;
	width: 95%;
	border-radius: 2px;
	cursor: pointer;
	font-weight: 400;
}

#calvingContainer #newCalvingMenu #calfDetails{
	display: none;
	margin-top: 20px;
}

#calvingContainer #newCalvingMenu input{
	width: 250px;
}

#calvingContainer #newCalvingMenu input[type="button"]{
	width: 123px;
	margin-right: 4px;
	margin-left: 0;
	margin-top: 25px
}

#calvingContainer #newCalvingMenu #comments{
	width: 258px;
	display: inline-block;
	margin-top: 10px;
}

#calvingContainer #newCalvingMenu #comments textarea{
	width: 100%;
	padding: 0;
}

#calvingContainer .bottomLine .dot,
#calvingContainer .bottomLine .line,
#calvingContainer #progressPicker li{
	background-color: #6294e9;
}

#calvingContainer .warn .bottomLine .dot,
#calvingContainer .warn .bottomLine .line,
#calvingContainer #progressPicker li.warn{
	background-color: #ff9900;
}

#calvingContainer .trouble .bottomLine .dot,
#calvingContainer .trouble .bottomLine .line,
#calvingContainer #progressPicker li.trouble{
	background-color: #cc0000;
}

#calvingContainer .finished .bottomLine .dot,
#calvingContainer .finished .bottomLine .line,
#calvingContainer #progressPicker li.finished{
	background-color: #9CC763;
}

#calvingContainer .bottomLine .line.full{
	height: 16px;
	margin-bottom: 0;
	border-radius: 8px;
}

/************/
/*  Calved  */
/************/

#calvedMenuContainer #calvedTopBar li{
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
}

#calvedMenuContainer #calvedTopBar li.selected{
	color: #9CC763;
}

#calvedMenuContainer #calvedTopBar span{
	font-size: 40px;
	display: inline-block;
	margin-bottom: 5px;
}

#calvedMenuContainer #search{
	display: none;
}

#calvingContainer .inlineColorPicker{
	margin-bottom: 10px;
	margin-top: 5px;
}

.groupCircle{
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-bottom: 2px;
	margin-right: 5px;
}


/************/
/* Drafting */
/************/

#calvingContainer #drafting{
	height: 100%;
	
}

#calvingContainer #drafting h2{
	display: block;
	text-align: center;
	margin: 10px auto;
	border-bottom: 1px solid #666;
}

#calvingContainer .pen{
	/*background: rgb(230, 230, 230);*/
	padding: 20px;
	
	text-align: center;
	/*box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);*/
}

#notDrafted .pen{
	min-height: 200px;
}

#calvingContainer .pen li{
	min-width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	vertical-align: middle;
	font-weight: 500;
	font-size: 24px;
	color: black;
	background: white;
	border-radius: 2px;
	cursor: pointer;
	margin: 10px;
	box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
}

#calvingContainer #drafted .pen li{
	background: #ccc;
}



#calvingContainer #draftMenuContainer{
	display: none;
}

#calvingContainer #draftMenu p{
	font-weight: 400;
	margin-bottom: 5px;
}

#calvingContainer p.smallPrint{
	font-size: 12px;
}

#calvingContainer #draftMenu #timeSince{
	display: block;
}

#calvingContainer #draftMenu{
	padding-top: 30px;
	padding-bottom: 30px;
}

#calvingContainer #draftMenu hr{
	margin-top: 30px;
	margin-bottom: 30px;
}

#showingFrom{
	text-align: center;
	font-size: 14px;
	width: 100%;
	display: inline-block;
}

#addCalvingButtonFixed{
	position: fixed;
	bottom: 0;
	left: 50%;
	display: none;
	-webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 999;
}


#calvingContainer .pen li.brown,
#calvingContainer #drafted .pen li.brown {
	color: white;
	background: #96281B;
}

#calvingContainer .pen li.blue,
#calvingContainer #drafted .pen li.blue {
	color: white;
	background: #4183D7;
}

#calvingContainer .pen li.purple,
#calvingContainer #drafted .pen li.purple {
	color: white;
	background: #8E44AD;
}

#calvingContainer .pen li.pink,
#calvingContainer #drafted .pen li.pink {
	color: white;
	background: #F62459;
}
/***************/
/*  Match Up   */
/***************/

#calvingContainer .soon{
	display: inline-block;
	width: 100%;
	text-align: center;
	margin-top: 50px;
}

@media screen and (max-width: 800px){
	#calvingContainer .cowProg .cowNum{
		width: 25%;
		text-align: left;
	}
}
@media screen and (max-width: 700px){
	#calvingSideBar{
		position: relative;
	}

	#calvingContainer{
		margin-left: 1%;
		height: calc(100% - 100px);
	}

	.st-pusher #calvingContainer{
		margin-top: 0px;
	}
}

@media screen and (max-width: 600px){
	#calvingContainer .cowProg .cowNum{
		text-align: center;
	}
	#calvingContainer .cowProg .cowNum, #calvingContainer .cowProg .timeSince{
		float: none;
		width: 100%;
	}
}

@media screen and (max-width: 400px){
	#calvingContainer{
		margin: 0;
		width: 100%;
		height: calc(100% - 86px);
		background: rgb(233, 233, 233);
	}

	#calvingContainer .cowProg{
		width: calc(100% - 20px);
		margin: 0;

	}

	#calvingContainer #progress{
		margin-top: 5px;
	}

	/*#calvingContainer .line{
		height: 2px;
		width: 15%;
		margin-left: -5px;
		margin-right: -5px;
		line-height: 10px;
		margin-bottom: 4px;
	}

	#calvingContainer .dot{
		width: 10px;
		height: 10px;
	}

	#calvingContainer .bottomLine .line.full{
		height: 10px;
		margin-bottom: 0;
	}*/

	#calvingContainer .cowStatus{
		font-size: 14px;
		font-weight: 400px;
	}

	#calvingContainer .timeSince{
		font-size: 14px;
	}

	#drafting .pen{
		padding-left: 0;
		padding-right: 0;
	}
}

/* height */
@media screen and (max-height: 400px){
	#addCalvingButtonFixed{
		display: inline-block;
	}

	#addCalvingButton{
		display: none;
	}

	#calvedMenuContainer .menu{
		padding-bottom: 500px;
	}

	#calvedMenuContainer #cancel{
		display: none;
	}

	#calvedMenuContainer #when{
		margin-bottom: 100px;
	}
}
#notepadContainer{
	height: 100%;
	background: #EEE;
}

#notepadContainer #currentDateDisplay{
	color: white;
	text-align: center;
	font-size: 24px;
	width: 100%;
	margin-bottom: 5px;
}

#notepadContainer #currentDateDisplay span{
	display: inline-block;
}

#notepadContainer #currentDateDisplay #nextDay{
	visibility: hidden;
}

#notepadContainer #currentDateDisplay span:nth-child(2){
	width: 70%;
}

#notepadContainer #currentDateDisplay span:first-child,
#notepadContainer #currentDateDisplay span:last-child{
	width: 10%;
	cursor: pointer;
}

#notepadContainer ul {
	padding: 0;
	text-align: center;
	overflow: auto;
	/*height: calc(100% - 170px);*/
	margin-bottom: 170px;
	background: #EEE;
}

#notepadContainer li {
	padding: 10px;
	display: inline-block;
	vertical-align: top;
	/*box-shadow: 0 4px 16px 0 rgba(60,55,75,.16);
	background-color: white;
	border-radius: 5px;*/
	margin: 7px;
	color: #666;
}

#notepadContainer .dateLine{
	width: calc(100% - 34px);
}

#notepadContainer .dateLine ul{
	margin: 0;
}

#notepadContainer .dateSpan{
	
	border-bottom: 1px solid;
	width: 90%;
	display: inline-block;
	font-weight: 500;
	text-align: center;
}

#notepadContainer li span{
	font-weight: 700;
}

#notepadContainer li p,
#notepadContainer li div{
	text-align: left;
}

#notepadContainer hr{
	margin: 5px 0;
}



/* New Notes */

#notepadContainer #newNote {
	bottom: 0;
	padding-bottom: 10px;
	position: fixed;
	width: calc(100% - 100px);
	text-align: center;
	background: #9CC763;
	-webkit-box-shadow: 0px -10px 20px -10px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -10px 20px -10px rgba(0,0,0,0.75);
box-shadow: 0px -10px 20px -10px rgba(0,0,0,0.75);
	/*box-shadow: 0 -4px 0px 4px #edeff0, 0 2px 4px 0 rgba(0,0,0,0.2);*/
}


#notepadContainer #newNote #newNoteText{
	background: white;
	margin: 10px 5px 5px 5px;
	padding: 10px;
	text-align: left;
	border-radius: 5px;
	min-height: 50px;
	max-height: calc(100vh - 130px);
	overflow: auto;

}

.st-container #notepadContainer #newNote{
	width: 100%;
	left: 0;
}

#notepadContainer #newNote #addNewNote{
	background: white;
	color: #9CC763;
	margin: 0px;
	box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.25);
}

#notepadContainer .cow{
	display: inline-block;
	/*font-weight: 700;*/
	border-radius: 5px;
	padding: 0 5px;
	cursor: pointer;
}

#notepadBody {
	height: calc(100vh - 170px);
}

#notepadBody .strikeout{
	/*text-decoration: line-through;*/
	position: relative;
}

#notepadBody .strikeout:before{
	content: "";
	position: absolute;
	color: white;
	left: 0;
	right: 0;
	border-bottom: 2px solid white;
	margin-top: 10px;
}

/* new note pop up */

#notepadContainer #newNotePopUp textarea{
	width: calc(100% - 20px);
	min-height: calc(90vh - 120px);
	margin-bottom: 10px;
}

#notepadContainer #newNotePopUp input{
	/*margin-bottom: 5px;*/
}



@media screen and (max-width: 800px){
	#notepadContainer #newNote{
		width: 100%;
	}
}

@media screen and (max-height: 300px){
	#notepadContainer #newNotePopUp textarea{
		/*min-height: calc(95vh - 100px);*/
	}
	#newNotePopUp #createNote{
		/*display: none;*/
	}
}
#todoBox{
	max-width: 1600px;
}

.subHeader {
	font-size: 20px;
	text-align: center;
}

#noIncompleteTasks,
#noCompletedTasks{
	text-align: center;
	margin-bottom: 50px;
}

.taskContainer span, .checkbox {
 display: inline-block;
 /*padding: 5px 30px;*/
}

.squareButton span{
	padding: 5px;
}

#todoBox h3{
	margin-bottom: 0;
}

#taskHeadContainer{
	width: 100%;
	position: relative;
}

#todoBox{
	position: relative;
	background: hsla(0, 0%, 95%, 1);
}

#todoBox .expand h3{
	font-size: 18px;
	font-weight: 400;
}

#taskAppTitleContainer{
	display: inline-block;
}

#newTasksContainer, #completedTasksContainer{
	padding: 0;
	
}
#newTasksContainer{
	/*margin-bottom: 30px;*/
}

.taskIcon{
	font-size: 70px;
}

#completedTasksContainer .taskContainer{
	background: rgba(238, 238, 238, 0.82);
}

#editMenuContainer{
	display: none;
}



.taskContainer, #tasksContainer {
	/*border: 1px solid #CCC;*/
	margin: 10px 5px;
	border-radius: 2px;
	padding: 5px 0;
	min-height: 43px;
	line-height: 43px;
	vertical-align: middle;
	display: block;
	box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
	background: white;
}

.c5{
	line-height: normal;
}

.taskContainer:hover{

}

.noTasks {
	padding: 10px;
}

.taskHeaders span {
	display: inline-block;
	/*padding: 5px 35px 5px 30px;*/
	font-size: 16px;
	font-weight: 400;
}



.taskHeaders{
	display: none;
}



.dashedHR{
	border: 0;
	border-bottom: 1px dashed #CCC;
}
/*
.taskToday{
	background: rgba(156, 199, 99, 0.2);
	border-color: rgba(156, 199, 99, 1);

}

.taskPassed {
	background: rgba(207, 0, 15, 0.1);
	border-color: rgba(207, 0, 15, 0.3);
}
*/
/* coloring just the date*/
.taskPassed .c4 span{
	color: rgba(207, 0, 15, 1);
	/*background: rgba(207, 0, 15, 0.1);
	border-radius: 5px;
	padding: 5px;*/
}
.taskToday .c4 span{
	color: rgba(156, 199, 99, 1);
	/*background: rgba(156, 199, 99, 0.2);
	border-radius: 5px;
	padding: 5px;*/
}

.taskFuture {
	/*border-color:  black;*/
}

#newTaskMenu, #editMenu {
	z-index: 100;
}


/*This one is repeated in the todo.css, 
any updates will need to be repeated there*/
.squareButton span{
	padding: 5px;
	font-family: roboto;
}

.squareButton:before{
	font-size: 40px;
	top: 5px;
}

.comments {
	background: #E6E6E6;
	border-radius: 10px;
	padding: 5px;
}


.inlineNames {
	display: inline-block;
	color: white;
	border-radius: 3px;
	padding: 5px 10px;
	margin: 2px 2px;
}

.greenIcon {
	color: rgba(156, 199, 99, 1);
	font-size: 20px;
}

.redIcon {
	color: #CF000F;
	font-size: 20px;
}






.accordArrow {
	font-size: 20px;
	cursor: pointer;
	position: relative;
	float: right;
	padding: 5px;
	margin: 5px 15px 0 15px;
}


.floatRight {
	right: 27px;
	margin-top: -46px;
	position: absolute;
}


.c1 {
	width: 2%;
	padding: 5px 30px;
}

.c2 {
	width: 10%;
	padding: 5px 30px;
}

.c3 {
	width: 11%;
	padding: 5px 30px;
}

.c4 {
	width: 16%;
	display: inline-block;
	padding: 5px 30px;
}

.c5 {
	width: 240px;
	display: inline-block;
	padding: 5px 30px;
}

.c6 {
	width: calc(48% - 240px);
	display: inline-block;
	padding: 5px 30px;
}



table {
	border-spacing: 15px;
}


.datePickerWrapper ul {
	float: right;
	position: absolute;
	padding: 0;
	border: solid 1px #999;
	background: #F5F5F5;
	border-radius: 5px;
	color: #999;
}

/*.datePickerWrapper button{
	background: #CCC;
}*/

.datePickerWrapper th button, 
.datePickerWrapper .dropdown-menu li:last-child button {
	background: white;
	color: #999;
}

.datePickerWrapper th button:hover, 
.datePickerWrapper .dropdown-menu li:last-child button:hover{
	background: #999;
	color: white;
}

.divTextInput {
  margin-left: 2.3%;
  margin-bottom: 10px;
  box-sizing: border-box;
  min-height: calc(3em + 2px);
  padding: 1em;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background: #fff;
  resize: none;
  outline: none;
}

.inputButton{
	background: white;
	border: 1px solid #CCC;
	border-radius: 2px;
	/*min-height: calc(2em + 2px);*/
	height: 100%;

	position: relative;
	font-size: 24px;
	color: #999;
}


#done {
	width: 50%;
}

#dateButton {
	margin-right: calc(2.5%);
	margin-bottom: 1em;

}


#userpicker2{
	background: white;
	z-index: 10;
	border: 1px solid #CCC;
	position: absolute;
	width: 250px;
	padding: 5px 12px 5px 3px;
	cursor: pointer;
	text-align: center;
	margin-top: -10px;
}

#userpicker2 div {
	margin: 1px auto;
}

#repeater{
	margin-top: -1em;
}

/*#repeater{
	position: absolute;
	background: white;
	border: 1px solid #CCC;
}*/

#repeater{
	width: 100%;
}

#repeater span{
	display: inline-block;
	font-size: 18px;
	margin: 5px 0;
}

#repeatDone {
	margin-bottom: 5px;
}

#repeater input[type="number"], #newTaskMenu #taskRepeatNumber{
	width: 49.5%;
	padding: 0;
	height: 43px;
	margin-top: 18px;
	margin-right: 1%;
}

#repeater select{
	padding: 10px;
	border: #CCC solid 1px;
	border-radius: 5px;
	margin-top: 18px;
	width: 49.5%;
	right: 0;
}

#editMenu table {
	margin: auto;
	vertical-align:middle;
}

#editMenu table td div,
#editMenu table td input[type="text"] {
	
}

#editMenu table td:nth-child(2){
	padding: 0;
}

#editMenu table td:nth-child(2) div {

}

#editMenu table td {
	padding: 0;
}

#editMenu input[type='text'], #newTaskMenu input[type='text'],
#editMenu textarea, #newTaskMenu textarea{
	width: 100%;
}

#pickUsers {
	width: 100%;
	min-height: calc(3em + 2px);
	padding: 10px;
	margin-left: 0;
	vertical-align: bottom;
}

#pickUsers .inlineNames{
	vertical-align: middle;
}

.textInput {
	width: 100%;
}


.userBar {
	position: relative;
	display: inline-block;
	color: white;
	width: 100%;
	border-radius: 5px;
	margin: 2px 0;
	padding: 5px;
}

.userbar[type="checkbox"] {
	float: left;
}

.left {
	left: 5px;
	position: absolute;
}

.userBar input[type=checkbox] {

}

#repeatOverlay{
	display: inline-block;
}
#userPickerOverlay2, #userpicker2,
.left{
	display: none;
}
#userPickerOverlay2, #repeatOverlay, #totalOverlay{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#totalOverlay{
	background: rgba(0,0,0,0.3);
}

.picker__footer button{
	color: black;
}

.expand {
	-webkit-transition:all ease 0.1s;
  	transition:all ease 0.1s;
  	min-height: 125px;
}

.accordIcon {
	margin-top: 5px;
	cursor: pointer;
	position: relative;
	padding: 5px 5px;
	display: inline-block;
}

.descriptionBox {
	display: inline-block;
	width: 50%;
	margin-left: 10px;
	margin-top: 10px;

	
}

.descriptionBox p {
	width: 100%;
	padding: 5px;
	min-height: 100px;
}

.buttonContainer {
	display: inline-block;
	margin: auto;
	/*float: right;
	margin-top: 70px;
	margin-right: 10px;*/
}

.expand{
	text-align: center;
	width: 100%;
	display: none;
}

.fullUsers {
	display: none;
}

.expandDate {
	display: inline-block;
}

.fullUsers, .expandDate, .descriptionBox {
	margin: 5px;
}

.taskContainer .smallDate {
	display: none;
}

.taskContainer .userDot {
	width: 14px;
	height: 14px;
	border-radius: 14px;
	margin: 1px;
	display: none;
	line-height: 50px;
	vertical-align: middle;
}

.c5 {
	text-align: center;
}



/* -------- Animations ------------*/

.taskContainer.ng-enter{
  -webkit-animation:1.5s animation2;
  animation:1.5s animation2;
}

.taskContainer.ng-leave{
  -webkit-animation:1.5s my_animation;
  animation:1.5s my_animation;
}

@keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@keyframes animation2 {
  from { opacity:0; }
  to { opacity:1; }
}

/*
  Unfortunately each browser vendor requires
  its own definition of keyframe animation code...
*/
@-webkit-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-webkit-keyframes animation2 {
  from { opacity:0; }
  to { opacity:1; }
}


/*----------- Media Queries--------------*/
/*.c1 {width: 2%;
	padding: 5px 30px;}
.c2 {width: 10%;
	padding: 5px 30px;}
.c3 {width: 11%;
	padding: 5px 30px;}
.c4 {width: 16%;
	display: inline-block;
	padding: 5px 30px;}
.c5 {width: 23%;
	display: inline-block;
	padding: 5px 30px;}
.c6 {width: 25%;
	display: inline-block;
	padding: 5px 30px;}*/

/* Tablet Landscape (light blue) */
@media screen and (max-width: 1200px){

	.c1, .taskHeaders .c4, .c4, 
	.taskHeaders .c5, .c5, .taskHeaders .c6, .c6 {
		padding: 5px 10px;
	}

	.taskHeaders .c1 {
		padding: 5px 40px 5px 10px;
	}

	.taskContainer .smallDate {
		display: inline-block;
	}

	.taskContainer .bigDate {
		display: none;
	}



}

/* Tablet Portrait (lime) */
@media screen and (max-width: 1000px){
	.floatRight {
		right: 15px;
	}

	.taskContainer, #tasksContainer {
		min-height: 30px;
		line-height: 30px;
	}

	.taskContainer .c5 .inlineNames {
		display: none;
	}

	.taskHeaders .c6, .c6 {
		width: 30%;
	}

	.c5 {
		width: 10%;
	}

	.taskHeaders .c5 {
		display: none;
	}

	.taskHeaders .c1 {
		width: 12%;
	}

	.taskContainer .userDot {
		display: inline-block;
	}

	.fullUsers {
		display: inline-block;
	}

	.floatRight{
		margin-top: -39px;
	}

}

/* Mini Tablet (orange) */
@media screen and (max-width: 800px){





	



	.floatRight {
		right: 10px;
	}
}

/* Phablet (yellow) */
@media screen and (max-width: 650px){
	.taskHeaders .c4,.taskContainer .c4{
		display: none;
	}

	.taskHeaders .c6,.c6 {
		width: 50%;
	}

	.taskHeaders span{
		display: none;
	}

	.floatRight {
		right: 5px;
	}

	/*.expandDate {
		display: inline-block;
	}*/

	.subHeader{
		margin: 10px;
	}

	.taskContainer, #tasksContainer{
		margin: 1px;
	}

	.taskHeaders {
		display: none;
	}

	.taskToday{
		/*color: rgba(156, 199, 99, 1);*/
		background: rgba(156, 199, 99, 0.5);
		/*border: 1px solid rgba(156, 199, 99, 1);*/
	}

	.taskPassed{
		/*color: rgba(207, 0, 15, 1);*/
		background: rgba(207, 0, 15, 0.1);
		/*border: solid 1px rgba(207, 0, 15, 1);*/
	}

	

}

/* Phones (blue) */
@media screen and (max-width: 400px){
	.taskContainer {
	}

	.descriptionBox{
		width: 90%;
		margin-left: 3%;
		margin-right: 7%;

	}

	#taskApp{
		margin-right: 0;
	}

	#todoBox{
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	.accordIcon {
		display: none;
	}

	.taskContainer .userDot {
		width: 10px;
		height: 10px;
		border-radius: 10px;
		margin: 0.5px;
	}

	.floatRight {
		right: 0px;
	}



	#newTaskBtn span{
		display: none;
		z-index: 99;
	}

	#tasksFirstBreak{
		display: none;
	}
	#taskAppTitleContainer{
		display: none;
	}

}

@media screen and (min-width: 1700px){
	.taskHeaders .c6,.c6 {
		width: 43%;
	}
}

#saveAs{
	z-index: 3000;
}

#saveAs .superModal{
	padding: 20px;
}

#saveAs input[type="text"],
#saveAs select{
	width: 80%;
}

#saveAs select{
	padding: 10px;
	margin: 10px 0;
}

#saveAs #saveMapButton{
	margin-bottom: 10px;
}
#grazingOuterBox #listView{
	text-align: center;
}
#grazingOuterBox #listView .day td,
#grazingOuterBox #listView .day th{
	padding: 20px 0px;
	
}

#grazingOuterBox #listView .day td:first-child,
#grazingOuterBox #listView .day th:first-child,
#grazingOuterBox #listView .day tr{
	border: solid 1px #E6E6E6;
}

#grazingOuterBox #listView .day table{
	padding: 0;
	width: 100%;
	text-align: center;
	display: table;
	color: #444;
}


#grazingOuterBox #listView .day th{
	color: #858585;
	font-weight: 400;
}

#grazingOuterBox #listView .day{
	margin-bottom: 20px;
}

#grazingOuterBox #listView .day td:first-child{
	
}

#grazingOuterBox #listView .day .paddocks{
	min-width: 100px;
}

#grazingOuterBox #listView .past{
	background: #EFEFEF;
}

.grazing .superModal{
	padding: 20px;
	overflow-y: auto;
	max-height: calc(100% - 100px);
}

.grazing .tiny{
	width: 50px;
	padding: 5px;
	height: initial;
}

.grazing #paddockContainer{
	/*background: hsla(57, 76%, 58%, 0.1);*/
}

.grazing #paddockContainerPM{
	/*background: hsla(201, 89%, 17%, 0.1);*/
}

.grazing #paddockContainer table,
.grazing #paddockContainerPM table{
	width: 100%;
	margin-bottom: 20px;
}

.grazing .paddock input{
	margin: 0;
	height: 25px;
	padding: 5px;
}

.grazing #supplementInputDiv table{
	margin: auto;
}
.grazing #supplementInputDiv input[type=number],
#supplements #defaultContainer input[type=number]{
	margin: 0;
	height: 35px;
	padding: 10px;
}

.grazing select{
	min-width:  100px;
}

.grazing #datePicker{
	font-size: 25px;
	margin-left: 5px;
	margin-top: 2px;
	cursor: pointer;

}

.grazing #dateInput{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	border: 0px;
}

.grazing .pm{
	padding: 5px;
	border-radius: 0;
	color: white;
	background: #0d47a1;
}

.grazing .day tr{
	cursor: pointer;
}

.grazing .addPaddock,
.grazing .addSupplement,
#supplements .addDefSup,
#herdInclusion .herdRotateDelete{
	color: #666;
	background: white;
}

.grazing .addPaddock:hover,
.grazing .addSupplement:hover,
#supplements .addDefSup:hover,
#herdInclusion .herdRotateDelete:hover{
	background: white;
	color: black;
}

#herdInclusion .herdRotateDelete{
	height: initial;
}

.grazing select{
	padding: 2px;
}

#grazingMenuTopBar{
	position: absolute;
	top: 5px;
	left: 10px;
}

#grazingMenuTopBar select{
	margin-top: -5px;
	border: none;
	-webkit-appearance: none; 
  	-moz-appearance: none;
   	appearance: none;
}

#grazingMenuTopBar #herd{
	margin-left: 25px;
}

#grazingMenuContainer #date{
	margin-top: 20px;
}

.grazing #repeatInput{
	width: 50px;
	height: 25px;
	padding: 10px;
}

.grazing .repeatContainer{
	display: inline-block;
	margin-bottom: -4px;
}

.grazing .mapPdkSelect{
	cursor: pointer;
}

#pdkSelectPopup{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2001;
}

#pdkMapSelect{
	width: 100%;
	height: 100%;
	background: white;
}

#cancelMapPopup{
	bottom: 50px;
	right: 20px;
	position: fixed;
}

#gMap{
	height: 100%;
	position: fixed;
	top: 40px;
	right: 0;
	width: 40%;
}

.full #gMap{
	width: 100%;
}

#days{
	z-index: 9;
	background: #EDEDED;
}

#grazingMap, #days{
	display: inline-block;
	position: relative;
}

#grazingMap.full,
#days.full{
	width: 100%;
	display: block;
}

#grazingMap.half,
#days.half{
	display: inline-block;
	width: 50%;
}

#grazingMap.none,
#days.none{
	display: none;
}

#grazingSideBar{
	z-index: 10;
}

#hybridDateDisplay{
	position: fixed;
	display: none;
	top: 50px;
	right: 100px;
	padding: 20px;
	background: white;
}

#grazingMap.half #hybridDateDisplay{
	display: inline-block;
}


/*#grazingOuterBox #listView .day.currentDay table{
	background: #dcedc8;
}
#grazingOuterBox #listView .day.currentDay table tr,
#grazingOuterBox #listView .day.currentDay table td:first-child{
	border-color: white;
}*/
#grazingOuterBox #listView .day.currentDay table{
	/*box-shadow: 0 -1px 0 #9CC763, 0 0 2px rgba(156, 199, 99,.12), 0 2px 4px rgba(156, 199, 99,.24)*/
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

#grazingOuterBox #listView .day.currentDay h2{
	/*color: #9CC763;*/
	font-weight: 500;
}

.day h2{
	cursor: pointer;
}

/*Date Picker */
#gMapDatePicker{
	display: inline-block;
	position: absolute;
	right: 170px;
	z-index: 200;
	background: rgba(255, 255, 255, 0.8);
	margin-top: 10px;
	text-align: center;
	width: 170px;
}

#gMapDatePicker table{
	width: 100%;
}

#gMapDatePicker td{
	padding: 0 5px;
}

#gMapDatePicker .datePickerSelect td{
	cursor: pointer;
}

#gMapDatePicker .datePickerSelect td:hover{
	color: black;
	background-color: rgba(255, 255, 255, 0.9);
}

#dateJump{
	left: 210px;
	right: initial;
}

#jumpMenu{
	padding-top: 100px;
}

#jumpInputsContainer{
	width: 300px;
	margin: auto;

}
#jumpInputsContainer select,
#jumpInputsContainer input{
	width: 100%;
	margin: 10px;
	padding: 10px;
	text-align: center;
	text-align-last:center;
}

#comments{
	width: 500px;
}

.commentIcon{
	display: inline-block;
	margin-left: 10px;
}

.commentIcon.hidden{
	display: none;
}

#grazingRotation,
#supplements{
	display: none;
}

#supplements .col-2{
	vertical-align: top;
}

.feedContainer{
	width: 47%;
	text-align: center;

}

.feedContainer table{
	width: calc(100% - 40px);
	margin: 0px;
}

.feedContainer ul{
	padding: 0;
	display: inline-block;
}

.feedContainer li{
	display: block;
	text-align: left;
}

.feedContainer .noData{
	background: #CCC;
	padding: 100px;

}

.feedContainer .recent .icon-minus{
	color: #f44336;
}

.feedContainer .recent .icon-plus{
	color: #558b2f;
}

.feedContainer .controls input{
	margin: 2px 0;
}

.feedContainer .controls input[type=text],
.feedContainer .controls input[type=number]{
	width: 227px;
}

.feedContainer .dateManualSup{
	text-align: center;
}

.bale{
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;
	margin: 1px;
}

.silageBales .bale{
	background-color: #80deea;
}

.hayBales .bale{
	background-color: #fdd835;
}

.hiddenHerd{
	color: white;
	display: none;
	padding: 5px;
	border-radius: 2px;
	margin: 1px;
	cursor: pointer;
}

#days table .onDemand{
	
}

#gMap #paddockData,
#pdkMapSelect #paddockDataCursor{
	display: inline-block;
	background-color: white;
	position: absolute;
	z-index: 10000000000;
	border-radius: 2px;
	margin-top: 10px;
}



#gMap.pdkPick{
	z-index: 9999;
	background: white;
	position: fixed;
	width: 90%;
}

#grazingRotation #excludedPaddocks{
	height: 500px;
}

#grazingRotation #excludedPaddocksContainer h2{
	display: block;
	margin: auto;
	text-align: center;
}

#rMap{
	height: 100%;
	width: 100%;
}

#jumpToToday{
	display: inline-block;
	font-size: 18px;
	height: initial;
	border-radius: 2px;
	padding-right: 50px;
	padding-left: 50px;
}


#grazingRotation #herdInclusion{
	text-align: center;
}

#grazingRotation #herdInclusion table{
	text-align: center;
	width: 100%;
}


/*colors*/
.lightBlueH .pm{background: #6BB9F0;}
.blueH .pm{background: #3498DB;}
.darkBlueH .pm{background: #2C3E50;}
.yellowH .pm{background: #F7CA18;}
.orangeH .pm{background: #E87E04;}
.brownH .pm{background: #96281B;}
.redH .pm{background: #CF000F;}
.pinkH .pm{background: #DB0A5B;}
.purpleH .pm{background: #8E44AD;}



@media screen and (max-width: 900px){
	#hybridViewButton{
		display: none;
	}
}

@media screen and (max-width: 800px){
	#dateJump{
		left: 110px;
	}
}

@media screen and (max-width: 700px){
	#grazingSideBar{
		position: fixed;
		top: 40px;
		z-index: 10;
	}

	#grazingOuterBox{
		margin-top: 90px;
	}

	#dateJump{
		left: 10px;
	}

	#gMap #paddockData{
		margin-top: 90px;

	}

	#gMapDatePicker{
		bottom: 50px;
		left: 10px;
	}
}

@media screen and (max-width: 500px){
	.grazing .day{
		font-size: 14px;
	}
}

@media screen and (max-width: 400px){
	.grazing .day{
		font-size: 12px;
	}
}

@media screen and (max-height:1000px){
	.grazing .superModal{
		top: 50px;
	}
}

@media screen and (max-height:950px){
	.grazing .superModal{
		height: calc(100% - 100px);
	}
}
#milkAppOptions{
	width: calc(100% - 20px);
}
#milkAppOptions ul{
	display: inline-block;
	padding: 0;
}

#milkAppOptions div{
	display: inline-block;
}

#milkAppOptions li {
	padding: 5px;
	background-color: #E6E6E6;
}

#milkAppOptions #compare{
	min-width: 50%;
}

#milkAppOptions .selectedMilk{
	background-color: white;
	border-bottom: #9CC763 2px solid;
}

/*Colors*/
#milkAppOptions .yellowMilk.compare{
	background-color: #fdd835;
}
#tractorMenu{
	background: hsla(0, 0%, 95%, 1);
	z-index: 1;
}

#tractorMenu ul{
	padding: 10px;
	text-align: center;
	
}

#tractorMenu li{
 padding: 30px;
 margin: 3px;
 line-height: 20px;
 cursor: pointer;
 box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
 background: white;
 border-radius: 2px;
}
#tractorMenu li span{
	font-size: 50px;
	display: inline-block;
	padding-bottom: 10px;
}

.tractorMenu{
	text-align: center;
	margin: auto;
	padding-top: 20px;
	z-index: 2;
}

#tractorContainer table{
	display: inline-block;
}

#tractorContainer{
	text-align: center;
}

#tractorContainer .main{
	width: 100%;
	text-align: center;

}

#tractorContainer .main #manageJobsMenu #jobListTable{
	width: 100%;
	display: table;
}

#tractorContainer .main #manageJobsMenu #jobListTable tr:not(:first-child){
	
	cursor: pointer;
	height: 40px;

}

#tractorContainer .main #manageJobsMenu #jobListTable tr:not(:first-child):hover{
	background: #e1eed0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

#tractorContainer .main #manageJobsMenu #jobListTable tr.selected{
	background: #ebf3df;
	font-weight: 400;
	color: #666;
	height: 150px;
	vertical-align: top;

	box-shadow: 0 1px 3px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.24);
}

#tractorContainer .main #manageJobsMenu #jobListTable td{
	padding-top: 5px;
	padding-bottom: 5px;
}

#tractorContainer .main #manageJobsMenu #jobListTable #trButtons{
	position: absolute;
	display: inline-block;
	margin-top: -100px;
}

#tractorContainer .main #manageJobsMenu #jobListTable #trButtons .btnContainer{
	/*border: solid 1px #999;*/
	background: white;
	border-radius: 2px;
	display: inline-block;
	width: 70px;
	padding: 15px;
	margin-right: 20px;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}

#tractorContainer .main #manageJobsMenu #jobListTable #trButtons .btnContainer:hover{
	background: rgb(243, 243, 243);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

#tractorContainer .main #manageJobsMenu #jobListTable #trButtons .icon{
	font-size: 40px;
}

#tractorContainer .main #manageJobsMenu #jobListTable #trButtons .inlineButton{
	display: inline-block;
	background: #9CC763;
	color: white;
	border-radius: 2px;
	padding: 5px;
	font-weight: 400px;
}

#tractorContainer #mapContainer{
	position: relative;
	left: 0;
}

#tractorContainer #mapBack{
	background: white;
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	padding: 10px;
	z-index: 200;
	line-height: 25px;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}

#tractorContainer #mapBack:hover{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

#tractorContainer #mapBack #backIcon{
	font-size: 35px;
	display: inline-block;
}

#tractorContainer #mapBack #backText{
	display: inline-block;
	margin-top: -10px;
	line-height: 35px;
}

#backToMenu{
	background: #CCC;
	display: inline-block;
	border-radius: 2px;
}

.infoBar{
	display: none;
	position: absolute;
	top: 40px;
	left: 0;
	padding: 5px;
	cursor: pointer;
}

#currentJobInfo span{
	margin: 0 5px;
}

#stopJob {
	display: inline-block;
	/*border: solid 1px #999;
	background: #9CC763;*/
	background: #CF000F;
	color: white;
	border-radius: 5px;
	padding: 5px;
	cursor: pointer;
}

#editMachineContainer{
	display: inline-block;
}
#selectImplementWidth{
	width: 100%;
	padding: 10px;
}

/* Bigger Screens */
@media screen and (min-width: 350px){
	#tractorMenu li{
		padding: 50px;
	}


@media screen and (min-width: 600px){
	#tractorMenu ul{
		padding: 50px;
	}
}

@media screen and (min-width: 800px){
	.infoBar.noCordova{
		left: 100px;
	}
}