.anchor,
body,
html {
    height: 100%
}
.anchor,
.search-placeholder {
    top: 0;
    -webkit-transition: opacity .3s ease-in-out 0s
}
#search-results,
svg {
    overflow: hidden
}
.button-secondary,
.content h1,
.highlights h2,
.sub-nav>h2,
.sub-nav>h2>a {
    -webkit-backface-visibility: hidden
}
#wrapper:after,
#wrapper:before,
.wrapper:after,
.wrapper:before {
    content: " "
}
#footer,
#wrapper:after,
.wrapper:after,
ol>li:after {
    clear: both
}
.footer-cell li,
.meta li,
.sub-nav ul,
ol {
    list-style: none
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 100%
}

footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}
b,
strong {
    font-weight: 700
}
img {
    color: transparent;
    font-size: 0;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic
}
li {
    display: list-item
}

.js-topic1 ul {
    padding-left: 1em
}

body.dev-mode.enterprise .not-enterprise,
body:not(.enterprise) .enterprise-only {
    display: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
caption,
td,
th {
    font-weight: 400;
    vertical-align: top;
    text-align: left
}
body {
    font: 13px/1.4em "Helvetica Neue", arial, freesans, clean, sans-serif;
    background-color: #fff;
    color: #393939
}
p {
    margin: 1em 0
}
h1 {
    font-size: 20px;
    padding: .5em 0;
    margin: 2em 0 1em;
    font-weight: 400
}


.content h1 {
    font-weight: 300;
    font-size: 36px;
    margin: 0 0 .5em;
    position: relative;
    line-height: 30px
}
.anchor {
    position: absolute;
    left: -32px;
    opacity: 0;
    padding: 0 5px 0 10px;
    width: 20px;
    font: normal normal 16px/20px octicons;
    -webkit-font-smoothing: antialiased;
    color: #333;
    -moz-transition: opacity .3s ease-in-out 0s;
    transition: opacity .3s ease-in-out 0s
}
#header,
h2,
h3,
h4 {
    position: relative
}
h2 span.step,
h6 {
    color: #666
}
h1 .anchor {
    line-height: 55px
}
.anchor:hover,
.content h1:hover .anchor,
.content h2:hover .anchor,
.content h3:hover .anchor,
.content h4:hover .anchor {
    opacity: 1;
    text-decoration: none
}
h2 {
    font-size: 22px;
    color: #333;
    margin: 2em auto 1em;
    font-weight: 300
}
#header .nav,
dt {
    font-weight: 700
}

#header,
.sub-nav,
.wrapper {
    max-width: 980px
}
.wrapper-col {
    max-width: 470px
}


.sidebar-shell h2 {
    margin: 1.2em 0 1em
}

#header-wrapper,
dd+dd {
    margin-bottom: 0
}
h3 {
    font-size: 14px;
    color: #333;
    margin: 1.5em 0 .5em
}
h5,
h6 {
    font-size: 13px
}
h4 {
    margin: 1em 0
}
a {
    color: #4183C4;
    text-decoration: none
}
a:active,
a:hover {
    text-decoration: underline
}



blockquote {
    margin: 0 -5px;
    padding: 0 20px
}
dd {
    padding-left: 1em;
    margin-bottom: 1em
}
a img {
    border: 0
}
.button,
.button-secondary {
    background-color: #297fc7;
    color: #fff;
    font-size: 16px;
    padding: 15px;
    border-radius: 5px
}
.button:hover {
    text-decoration: none;
    background-color: #3088d0
}
.button-secondary {
    background-color: #738797;
    font-size: 15px;
    padding: 12px
}
.button-secondary:hover {
    text-decoration: none;
    background-color: #7e909e
}


#header-wrapper {
    clear: both;
    height: 61px;
    
}
#header {
    margin: 0 auto
}

#header .logo {
    float: left;
    margin-top: 20px;
    display: inline-block;
    width: 186px;
    height: 27px;
    text-decoration: none;
    font-size:40px;
    color:#37608A;

}

#header .nav {
    float: right;
    margin-top: 20px;
    text-shadow: #fff 1px 1px 0;
    font-size: 14px
}
#header .nav li {
    display: inline-block;
    margin: 0;
    list-style-type: none;
    line-height: 1.4em
}
#header .nav a {
    color: #515151;
    outline: 0;
    text-decoration: none;
    padding: 20px 11px 19px;
    -webkit-transition: color .2s ease-in-out 0s;
    -moz-transition: color .2s ease-in-out 0s;
    transition: color .2s ease-in-out 0s
}
.api #header .nav-api,
.blog #header .nav-blog,
.developers #header .nav-developers,
.overview #header .nav-overview {
    color: #333;
}
#header .nav a:hover {
    color: #327fc7
}
#header .nav #search-container {
    position: relative;
    margin-left: 5px;
    text-shadow: none
}
#searchfield {
    border: 1px solid #ddd;
    line-height: 20px;
    height: 21px;
    padding: 2px 5px 2px 20px;
    display: inline-block;
    margin-top: -4px;
    width: 51px;
    border-radius: 3px;
    
    -webkit-transition: width .3s ease-in-out 0s;
    -moz-transition: width .3s ease-in-out 0s;
    transition: width .3s ease-in-out 0s
}
#searchfield::-ms-clear {
    height: 0;
    width: 0
}
#search-container.active #searchfield,
#searchfield:focus {
    width: 120px
}
#search-container.active .search-placeholder,
#searchfield:focus+.search-placeholder {
    opacity: 0
}
.search-placeholder {
    position: absolute;
    cursor: text;
    left: 22px;
    font-weight: 400;
    font-size: 12px;
    pointer-events: none;
    color: #aaa;
    line-height: 20px;
    -moz-appearance-transition: opacity .3s ease-in-out 0s;
    transition: opacity .3s ease-in-out 0s
}
.cancel-search {
    position: absolute;
    right: 4px;
    top: 2px;
    width: 14px;
    height: 14px;
    display: none
}
#search-container.active .cancel-search {
    display: block
}
#search-results {
    position: absolute;
    top: 30px;
    right: 0;
    width: 260px;
    background-color: #fff;
    border-radius: 4px;
    min-height: 40px;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    visibility: hidden;
    opacity: 0
}
#search-container.active #searchfield:focus~#search-results,
#search-results:active,
#search-results:focus,
#search-results:hover {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .3s ease-in-out 0s;
    -moz-transition: opacity .3s ease-in-out 0s;
    transition: opacity .3s ease-in-out 0s
}
#search-results li {
    display: block;
    width: 100%;
    border-bottom: 1px solid #f2f2f2
}
#header #search-results .result a {
    display: block;
    text-shadow: none;
    padding: 10px
}
#search-results .placeholder {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    padding: 20px 0
}
#search-results em {
    font-weight: 700
}
#search-results .result em {
    display: block;
    font-weight: 400;
    font-style: normal;
    line-height: 1em
}
.result small {
    font-size: 12px;
    color: #5c5c5c;
    line-height: 1em
}
.result.selected,
.result:hover {
    background-color: #297fc7!important
}
.result.selected em,
.result.selected small,
.result:hover em,
.result:hover small {
    color: #fff!important
}
#header #search-results li:last-child {
    border-bottom: none
}
.sub-nav {
    margin: 0 auto;
    position: relative;
    border-bottom: 1px solid #d8d8d8
}
.sub-nav>h2,
.sub-nav>h2>a {
    color: #333;
    font-weight: 400;
    font-size: 22px;
    margin: 50px 0 10px;
    text-decoration: none
}
.sub-nav>h2>a {
    z-index: 10;
    position: relative
}
.sub-nav ul {
    position: absolute;
    right: 0;
    bottom: 8px;
    width: 100%;
    text-align: right
}
.sub-nav li {
    display: inline-block
}
.sub-nav li a {
    color: #767676;
    font-size: 14px;
    margin-left: 16px;
    padding: 4px 2px 8px
}
.sub-nav li a:hover {
    text-decoration: none;
    color: #327fc7
}
.sub-nav li:last-child a {
    padding-right: 0
}
.sub-nav li .active {
    color: #222;
    border-bottom: 2px solid #d8d8d8
}
.full-width-divider,
.library-list .feature {
    border-bottom: 1px solid #ddd;
    overflow: hidden
}
.wrapper {
    margin: 0 auto
}
.wrapper-col {
    margin: 0 auto
}
.wrapper.blog {
    display: table
}
.feature {
    position: relative;
   
}
.feature h1 {
    font-weight: 300;
    font-size: 42px;
    line-height: 1.2em;
    -webkit-backface-visibility: hidden;
    padding: 80px 0 0;
    margin: 0;
    text-align: left
}

.feature .intro {
    
    font-size: 1.4em;
    line-height: 1.4em;
    max-width: 410px
}
.feature .button,
.highlights .button-secondary {
    display: inline-block
}
.feature .library-links {
    line-height: 40px;
    margin-top: 25px
}
.feature .library-links li {
    padding: 0;
    font-size: 22px
}
.feature .library-links span {
    width: 60px;
    text-align: right;
    padding-right: 10px;
    display: inline-block
}
.feature+.full-width-divider {
    margin-top: -1px
}
.full-width-divider {
    width: 100%;
    background: #f2f2f2;
    border-top: 1px solid #ddd;
    z-index: 1;
    position: relative
}
.highlight-module {
    list-style-type: none;
    display: table-cell;
    padding: 40px 14px 30px;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5em
}
.highlight-module:first-child {
    padding-left: 0;
    padding-right: 14px
}
.highlight-module:last-child {
    padding-left: 14px;
    padding-right: 0
}

.highlights h2 {
    margin: 25px 0 15px;
    font-size: 30px;
    line-height: 1.2
}
.full-width-divider+#footer {
    margin-top: -1px
}
.sidebar-shell {
    position: relative;
    float: right;
    margin: 20px 0 0;
    width: 290px
}
.sidebar-module {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
    font-size: 12px;
    border: 1px solid #ddd
}
.sidebar-module ul {
    margin: 0
}
.sidebar-module.notice {
    background: #fafafb;
    border: 1px solid #CACACA;
    border-radius: 4px;
    line-height: 1.5em
}
.notice>p {
    padding: 12px;
    margin: 0
}
.sidebar-module li {
    list-style-type: none
}

.sidebar-module ul li:last-child h3 {
    border-bottom: none
}
.sidebar-module ul li:last-child ul li:first-child {
    border-top: 1px solid #eee
}
.sidebar-title {
    text-align: center;
    

}

#footer .wrapper,
.api-status,
.lower_footer {
    border-top: 1px solid #ddd
}

.sidebar-module ul h3 {
    margin: 0;
    color: #666;
    border-bottom: 1px solid #eee;
    font-size: 14px
}

.sidebar-module h3 a {
    padding: 8px 10px;
    color: #555;
    text-decoration: none;
    display: block
}
.sidebar-module h3 a:hover {
    text-decoration: none;
    color: #327fc7;
    background-color: #fdfdfd
}
.sidebar-module ul ul li {
    border-bottom: 1px solid #eee;
    font-weight: 700;
    color: #666;
    background-color: #f9f9f9
}
.sidebar-module ul li:last-child ul li:last-child {
    border-bottom: none
}
.sidebar-module .disable>a {
    color: #333;
    border-left: 2px solid #d8d8d8;
    padding-left: 29px
}
.sidebar-module ul ul li a {
    padding: 6px 0 6px 31px;
    display: block;
    text-decoration: none;
    font-weight: 400
}
.sidebar-module ul ul li a:hover {
    background-color: #f2f2f2;
    color: #327fc7
}
#footer {
    position: relative;
    bottom: 0;
    font-size: 12px;
    color: #636363;
    margin: 0 auto;
    max-width: 980px
}
#footer a:hover {
    text-decoration: underline
}
#footer .mega-octicon {
    color: #ccc;
    font-size: 24px
}
#footer .mega-octicon:hover {
    color: #bbb;
    text-decoration: none
}
.lower_footer {
    padding: 30px 0
}
.footer-cell {
    display: table-cell;
    text-align: center;
    width: 10%;
    vertical-align: middle
}
.footer-cell:first-child {
    text-align: left;
    padding-left: 0
}
.footer-cell:last-child {
    text-align: right;
    padding-right: 0
}
.footer-cell:last-child li {
    margin: 0 0 0 20px;
    padding-right: 0
}
.footer-cell li {
    display: inline;
    margin-right: 9px
}
#footer .wrapper {
    text-align: center;
    padding: 20px 0
}
.dev-program.feature {
    min-height: 430px;
   
    background: #3A5A7A;
    position: relative
   
}

.dev-program.feature .intro {
    color: #ffffff;
     background: #3A5A7A;
    line-height: 1.3em;
    max-width: 510px
    
}

.content,
ol,
ol>li {
    position: relative
}
.dev-program.feature .wrapper {
    position: relative;
    z-index: 1
}
.dev-program.feature .wrapper-col {
    position: relative;
    z-index: 1
}
.dev-program.feature h1 {
    color: #eee
}

.dev-program-callout h2 {
    margin: 0
}
.dev-program-callout p {
    font-size: 16px;
    margin: 10px 0 0
}
#wrapper {
    padding: 20px 0;
    height: auto;
    max-width: 980px;
    margin: 0 auto
}

#wrapper:after,
#wrapper:before {
    display: table
}
#wrapper-col:after,
#wrapper-col:before {
    display: table
}
.content {
    width: 630px;
    float: left;
    color: #393939;
    z-index: 2;
    font-size: 14px;
    line-height: 1.5em
}

.content dt {
    color: #666
}
.content ol {
    margin-left: 1em
}
.content ul {
    margin: 1em;
    list-style-type: disc
}
.content ul ul {
    margin: 1em;
    list-style-type: circle
}
.content dd ul {
    margin-top: 0
}
.content li {
    margin: .5em 0
}
.content img {
    max-width: 100%;
    margin: 12px 0
}
ol {
    counter-reset: li;
    padding-bottom: 10px
}
ol>li {
    padding: 0px 0 5px 20px;
    margin-bottom: 5px
}
ol>li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    top: 0;
    left: 0;

    color: #999;
 
    font-weight: 700;
   
    text-align: right;
  
}
ol>li>p:first-child {
    margin-top: 0
}
ol>li:after {
    content: ".";
    display: block;
    visibility: hidden;
    line-height: 0;
    height: 0
}
.content ol>li img {
    max-width: 100px;
    margin: 0 0 0 10px;
    float: right;
    border: 1px solid #ddd;
    cursor: pointer
}
.content ol>li img.expanded {
    max-width: 400px
}
.content .full-image {
    position: absolute;
    top: 5px;
    right: -20px;
    z-index: 100
}
.content .full-image img {
    position: absolute;
    top: 0;
    right: 20px;
    margin: 0;
    max-width: 600px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .2)
}
.content .full-image:hover .octicon,
.full-image:hover .mini-icon {
    color: #666
}
.content .full-image .octicon,
.full-image .octicon-remove-close {
    position: absolute;
    top: 0;
    right: 0;
    color: #999;
    cursor: pointer
}
.command-line,
.sidebar-module h3 {
    position: relative
}
.content .description {
    margin-left: 20px
}
.content .sectionbody .dlist dt,
.content .verseblock-content,
.content dl code,
.content p>tt,
.content ul code,
p code {
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    padding: 0 3px;
    display: inline-block
}
.content .sectionbody .dlist dt {
    margin-top: 10px
}
.content .verseblock-content {
    padding: 3px
}
.content .intro {
    color: #868686
}
.article-content ul {
    margin: 1.5em
}

.meta li {
    color: #999;
    padding-right: 20px;
    display: inline
}


.content table {
    width: 100%;
    overflow: auto;
    display: block;
    margin: 15px 0
}
.content thead {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

.content table th {
    border: 1px solid #ddd;
    padding: 6px 13px;
    text-align: center
}
.content tbody {
    vertical-align: middle;
    border-color: inherit
}
.content table tr {
    border-top: 1px solid #ccc;
    background-color: #fff;
    vertical-align: inherit
}
.content table td {
    border: 1px solid #ddd;
    padding: 6px 13px
}
code {
    white-space: nowrap;
    font: 12px Consolas, 'Liberation Mono', Courier, monospace
}
pre code {
    white-space: pre
}
pre {
    border: 1px solid #cacaca;
    font: 12px/1.4em Consolas, 'Liberation Mono', Courier, monospace;
    padding: 10px;
    overflow: auto;
    border-radius: 3px;
    background-color: #fafafb;
    color: #393939;
    margin: 2em 0
}
ul+pre {
    margin-top: 1em
}
pre span.comment {
    color: #aaa
}
.highlight-headers {
    margin-bottom: 0;
    border-radius: 3px;
    border-bottom: 1px solid #CACACA;
    background-color: #f4f4f4
}
.highlight-headers+pre {
    border-radius: 0 0 3px 3px;
    margin-top: 0;
    border-top-color: #ddd
}
.highlight-headers+pre.highlight {
    margin-top: -2px
}
.command-line {
    background-color: #444;
    color: #fff;
    border-radius: 3px;
    border: none
}
.command-line em {
    color: #f9fe64
}
.command-line span.comment {
    color: #ccc
}
.command-line span.output {
    color: #63E463
}

.sidebar-module a+a {
    padding-left: 27px
}
.sidebar-module .arrow-btn {
    background-image: url(/assets/images/expand-arrows.png);
    background-repeat: no-repeat;
    background-position: -3px -3px;
    width: 13px;
    height: 100%;
    padding: 0 4px;
    text-decoration: none;
    position: absolute;
    left: 0;
    top: 0;
    background-color: transparent
}

.alert,
.warning {
    position: relative
}
.arrow-btn.expanded {
    background-position: -41px -3px
}
.arrow-btn.collapsed:hover {
    background-position: -3px -43px;
    background-color: transparent
}
.arrow-btn.expanded:hover {
    background-position: -41px -43px;
    background-color: transparent
}
.alert {
    padding: 0 15px;
    color: #264c72;
    border: 1px solid #97c1da;
    border-radius: 3px;
    background-color: #d8ebf8
}
.warning {
    padding: 0 15px;
    color: #613A00;
    border: 1px solid #dca874;
    border-radius: 3px;
    background-color: #ffe3c8
}
.program-info-column {
    float: left;
    position: relative;
    margin: 20px 0 60px;
    padding-left: 5%;
    width: 415px
}
.program-info-column-left {
   
    position: relative;
  
    background: #3A5A7A;

}

.program-info-column-left h1{
  max-width: 80%;

}

.program-info-column-right {
    float: right;
    position: relative;
    margin: -330px 0 0px;
    padding-left: 60%;
    width: 40%;


}

.program-info-column:first-child {
    margin-right: 50px
}
.program-info-column h2 {
    margin-bottom: 0;
    font-size: 18px
}
.program-info-column p {
    margin-top: 5px;
    font-size: 16px;
    line-height: 1.5;
    color: #666
}
.program-info-column .mega-octicon {
    position: absolute;
    left: 0;
    top: 32px;
    color: #333
}
.program-info-column ul {
    margin-left: 15px
}



.note {
  padding: 5px;
   font-size: 80%;
  background-color: #DAE691;
 -moz-border-radius: 6px; 
 border-radius: 6px; /* standards-compliant: (IE) */ 
}

.thumbnail.hover {
   min-height: :400px;
}

/* Login and signup form */

.cd-user-modal-container {
  
  
  margin: 5em 0em 4em 0em;
  cursor: auto;
  border-radius: 0.5em;
  border-color: #000000;
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
  transform: translateY(-30px);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.cd-user-modal-container .cd-switcher{
     margin: 0em 2em 0em 0em;
}

.cd-user-modal-container .cd-switcher:after {
  content: "";
  display: table;
  clear: both;
}
.cd-user-modal-container .cd-switcher li {
  width: 20%;
  float: left;
  list-style: none;
  text-align: center;

}

.cd-user-modal-container .cd-switcher li.primary {
  width: 80%;
  float: left;
  list-style: none;

}

.cd-user-modal-container .cd-switcher li:first-child a {
  border-radius: 1em 0 0 0;
  margin-left: 15%;

}
.cd-user-modal-container .cd-switcher li:last-child a {
  border-radius: 0 1em 0 0;
  padding-right: 4%;
}

.cd-user-modal-container .cd-switcher li:first-child a.selected {
  text-indent: -2%;

}
.cd-user-modal-container .cd-switcher li:last-child a.selected {
   text-indent: -23%;
}



.cd-user-modal-container .cd-switcher a {
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #d2d8d8;
  color: #809191;
  font-size: 1em;
  text-decoration: none;

}
.cd-user-modal-container .cd-switcher a.selected {
  background: #FFF;
  color: #505260;
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
}

.cd-form {
  padding: 1.4em;
}
.cd-form .fieldset {
  position: relative;
  margin: 1.4em 0;
}
.cd-form .fieldset:first-child {
  margin-top: 0;
}
.cd-form .fieldset:last-child {
  margin-bottom: 0;
}
.cd-form label {
  font-size: 14px;
  font-size: 0.875rem;
}
.cd-form label.image-replace {
  /* replace text with an icon */
  display: inline-block;
  position: absolute;
  left: 15px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  text-shadow: none;
  background-repeat: no-repeat;
  background-position: 50% 0;
}
.cd-form label.cd-username {
  background-image: url("/assets/images/cd-icon-username.svg");
}
.cd-form label.cd-email {
  background-image: url("/assets/images/cd-icon-email.svg");
}
.cd-form label.cd-password {
  background-image: url("/assets/images/cd-icon-password.svg");
}
.cd-form input {
  margin: 0;
  padding: 0;
  border-radius: 0.25em;
}
.cd-form input.full-width {
  width: 100%;
}

#cd-logout {   
  display:none;
}

#cd-logout.is-visible {   
  display:block;
}

.cd-form input.has-padding {
  padding: 12px 15px 12px 40px;
  max-width: 90%;
}
.cd-form input.has-border {
  border: 1px solid #d2d8d8;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.cd-form input.has-border:focus {
  border-color: #343642;
  box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
  outline: none;
}
.cd-form input.has-error {
  border: 1px solid #d76666;
}

.cd-form .pw-field {
  /* space left for the HIDE button */
  padding-right: 65px;
}


.cd-form input[type=submit] {
  padding: 16px 0;
  cursor: pointer;
  background: #2f889a;
  color: #FFF;
  font-weight: bold;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

.cd-form .hide-password {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 6px 15px;
  border-left: 1px solid #d2d8d8;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 14px;
  font-size: 0.875rem;
  color: #343642;
}
.cd-form .cd-error-message {
  display: inline-block;
  position: absolute;
  left: -5px;
  bottom: -35px;
  background: rgba(215, 102, 102, 0.9);
  padding: .8em;
  z-index: 2;
 // color: #FFF;
  font-size: 13px;
  font-size: 0.8125rem;
  border-radius: 0.25em;
  /* prevent click and touch events */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0, visibility 0 0.2s;
  -moz-transition: opacity 0.2s 0, visibility 0 0.2s;
  transition: opacity 0.2s 0, visibility 0 0.2s;
}
.cd-form .cd-error-message::after {
  /* triangle */
  content: '';
  position: absolute;
  left: 22px;
  bottom: 100%;
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(215, 102, 102, 0.9);
}
.cd-form .cd-error-message.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s 0, visibility 0 0;
  -moz-transition: opacity 0.2s 0, visibility 0 0;
  transition: opacity 0.2s 0, visibility 0 0;
}



.cd-form-message {
  
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}


.cd-form-bottom-message {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -30px;
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
}

#forgotten-password {
 
  padding-left: 100px;
  margin-right: 30px;
}

#signup-verify {
 
  padding-left: 40px;
  margin-right: 30px;
}



.cd-form-top-message {
  position: absolute;
  width: 100%;
  color: rgba(215, 102, 102, 0.9);
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
  display:none;
  
}

.cd-form-error-message {
  
  width: 100%;
  color: rgba(215, 102, 102, 0.9);
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
  display:none;
  
}

#tokenUpgrade {
  min-height: 80px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
  text-align: center;
  color: rgba(215, 102, 102, 0.9);
  display:none;
  
}

#tokenUpgrade.is-visible {
  display:block;
  
}

.cd-form-bottom-message a {
  text-decoration: underline;
}

#s3-content{
    min-height: 200px;
}

#cd-login, #cd-signup, #cd-reset-password, #cd-verify-code, #cd-verify-password, #s3-content ,#s3-buckets,.spinner, .info-spinner,#cd-resend-code,#cd-verify-signup, .field-ign{
  display: none;
}

#cd-login.is-selected, #cd-signup.is-selected, #cd-verify-password.is-selected, #cd-reset-password.is-selected, #cd-verify-code.is-selected ,
#s3-content.is-visible,#s3-buckets.is-visible,.spinner.is-visible , .info-spinner.is-visible,.cd-form-top-message.is-visible,.cd-form-error-message.is-visible,
#cd-resend-code.is-selected,#cd-verify-signup.is-selected{
  display: block;
}

a {
   outline: 0;
}


.infospinner {
    margin-top: 20px;
}

.spinner {
   margin-left: 250px;
   margin-top: -20px
    
}


.highlighted{
    color: #4183C4;
}

.caption{
    font-size:10px;
}


.sublink {
    color: black;
}

.centered{
    margin-top:20px;
    text-align: center;
    margin-bottom:10px;
}


.pricingtable {
  width: 30%;
  padding-bottom: 10px;
  background: #fff;
  margin: 5px;
  float: left;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
     -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

.clear{
    clear:left;
}
.pricingtable-full {
  width: 80%;
  padding-bottom: 10px;
  background: #fff;
  margin-left: 8%;
  clear:left;
  height:240px;

  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
     -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

.top {
height: 50px;
float:left;
width:100%;
margin-bottom: 10px;
  background: #37608A;
  -webkit-border-radius: 10px 10px 0 0;
     -moz-border-radius: 10px 10px 0 0;
          border-radius: 10px 10px 0 0;
}
 
.top h2 {
  color: #fff;
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
  font: 300 26px/44px;
}

.pricingtable-left {
    float:left;
    width:50%;
    border-right: solid 1px  #BCBEC0;
    margin-right: 10px;

}

.pricingtable-right {
    padding-top:40px;

}

.pricingtable ul,
.pricingtable-full ul{
  list-style-type: none;
  font:  18px;
  margin: 10px 0 0 15px;
}



.pricingtable ul strong {
  font-weight: bold;
}



.pricingtable hr ,
.pricingtable-full hr{
  border: 0;
  background-color: #BCBEC0;
  color: #BCBEC0;
  height: 1px;
  width: 90%;
  margin: 20px 0 0 10px;

}

.pricingtable h1,
.pricingtable-full h1 {
  text-align: center;
  font: bold 18px/1 Helvetica, Verdana, sans-serif;
  margin: 10px 0 -20px 0;
}



.pricingtable p,
.pricingtable-full p {
  text-align: center;
  font: 500 16px/1 Helvetica, Verdana, sans-serif;
  color: #BCBEC0;
}



.pricingtable a,
.pricingtable-full a
 {
  display: inline-block;
  height: 40px;
  width: 150px;
  color: #fff;
  margin: 5px 20px 0 20px;
 
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font: 500 16px/40px Helvetica, Verdana, sans-serif;
  
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  
  /*Gradient*/
  background: #3088d0; /* Old browsers */

}
.pricingtable-full a{
    margin-left:50px;
}

.pricingtable a:hover ,
.pricingtable-full a:hover{
  background: #b2e560; /* Old browsers */
  background: -moz-linear-gradient(top,  #b2e560 0%, #96c23d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e560), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* IE10+ */
  background: linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e560', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */

}