/**
 * Colours:
 * Azure #41c3d9, Olive Green #b8cf00, Gray #929497
 */
html {
   font: normal normal normal 1em/1.6 "PT Sans", "Helvetica", "Arial", sans-serif;
   color: #3d3d3d;
   margin: 0;
   padding: 0;
   background: #f9f6e6;
}

@media screen and (max-width: 30em) {
   html {
      font-size: 0.875em;
   }
}

@media screen and (min-width: 85em) and (min-height: 40em) {
   html {
      font-size: 1.125em;
   }
}

@media screen and (min-width: 95em) and (min-height: 50em) {
   html {
      font-size: 1.2em;
   }
}

body {
   margin: 0;
   padding: 0;
}

.page {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 63em;
    margin: 0 auto;
    padding: 0 1.5em;
}

@media screen and (min-width: 1px) {
   .page {
      width: 100%;
      max-width: 63em;
   }
}

@media screen and (max-width: 43.125em) {
   .page {
      padding: 0;
   }
}


h1,
h2,
h3,
h4,
h5,
h6 {
   line-height: 1.2;
}

p,
ol,
ul {
   margin: 0.8em 0 0;
}

   p.center {
       text-align: center;
   }

li {
    margin-top: 0.4em;
}

   p:first-child,
   li:first-child {
      margin-top: 0;
   }
   
ul {
   list-style: square;
   padding: 0 0 0 1.6em;
}

a {
   color: #38abc0;
   text-decoration: none;
}

   a.header-link {
       color: #3d3d3d;
       text-decoration: none;
   }
   
   a.header-link:hover {
       text-decoration: none;
   }

   a:hover {
       color: #3192a7;
       text-decoration: underline;
   }
   
   a:focus {
      outline-color: #3192a7;
   }

   a img {
      display: block;
   }
   
blockquote {
   font-size: 1em;
   font-style: italic;
   border-left: 3px solid #ddd;
   margin: 0.8em 0 0;
   padding: 0.65em 1.25em;
}

   blockquote:first-child {
      margin-top: 0;
   }

table {
   margin: 1em 0 2em 0;
   width: 100%;
   border: 1px solid #ddd;
   border-collapse: collapse;
}

   table th,td {
      border: 1px solid #ddd;
      margin: 0;
      padding: 0.4em;
      vertical-align: top;
   }

   table th {
       background-color: #b8cf00;
       color: #ffffff;
   }

   table th.left,td.left {
       text-align: left;
   }

   table th.center,td.center {
       text-align: center;
   }

   table th.middle,td.middle {
       vertical-align: middle;
   }

   table ul {
       padding-left: 1.1em;
   }

.no-borders, .no-borders th, .no-borders td {
    border-style: none;
}


code {
    background-color: #f8f8f8;
    border: 1px dotted #b6b6b6;
    box-sizing: border-box;
    padding-left: 1px;
    padding-right: 1px;
}

pre {
   border-top: 1px dotted #b6b6b6;
   border-bottom: 1px dotted #b6b6b6;
   padding: 0.5em;
   background-color: #f8f8f8;
   font-size: 0.9em;
    overflow-x: auto;
}
    pre code {
        border: none;
    }

hr {
   border: none;
   border-top: 1px solid #ddd;
   margin: 1.25em 0 1.5em;
}

/**
 * Header
 */

.header {
    margin: 0 auto 1.8em auto;
    padding: 1.8em 0.5em 0 0.5em;
    text-align: center;
}

    .header h1 {
        display: inline;
        margin: 0 -1.5em 0 0; /* adjust to center with search box on the right */
        padding: 0;
    }

    .header h1 img {
        display: inline;
        width: 435px;
        margin: 0 auto;
    }

    #global-search {
        display: inline;
        float: right;
        margin: 0.3em 0 0 1em;
        padding: 0;
    }

    #global-search-query {
        margin: 0;
        width: 2.6em;
        height: 2.6em;
        padding: 0;
        border: none !important;
        outline: none !important;
        border-radius: 0.6em;
        background-color: transparent;
        background-image: url("../img/magnifying-glass-128x128.png");
        background-position: right center;
        background-size: 2em;
        background-repeat: no-repeat;
        color: #3d3d3d;
        text-indent: 5em; /* hide entered text if any */
        cursor: pointer;
        transition: all .5s;
        font-size: 1em;
    }

    #global-search-query:focus {
        width: 20em;
        background-color: white;
        background-position: 98% center;
        text-indent: 0.6em;
        cursor: text;
    }

    @media screen and (max-width: 48em) {
       .header h1 {
           margin-right: 0px; /* compensate hidden search */
       }
       .header h1 img {
          width: 380px;
       }
    }

    @media screen and (max-width: 42em) {
       .header h1 {
           margin-right: 0px; /* compensate hidden search */
       }
       .header h1 img {
           width: 360px;
       }
    }

    @media screen and (max-width: 36em) {
       .header h1 {
           margin-right: 0px; /* compensate hidden search */
       }
       .header h1 img {
           width: 340px;
       }
    }

    @media screen and (max-width: 30em) {
       .header h1 {
           margin-right: 0px; /* compensate hidden search */
       }
       .header h1 img {
           width: 100%;
       }
    }

    @media screen and (max-width: 60em) {
        #global-search {
            display: none;
        }
    }


/**
 * Connect2id branding colours and elements
 */
.box {
    display: block;
    border: 0.3em solid #cdcdcd;
    border-radius: 0.8em;
    background-color: #ffffff;
    padding: 1em;
    text-align: center;
}

    .box:hover {
        border-color: #b8cf00;
        background-color: #efefef;
    }

    .box h2 {
        color: #38abc0;
        font-weight: normal;
    }

    .box p {
        color: #888888;
        font-size: 1.1em;
    }

    a.box, .box a:hover {
        color: #b8cf00;
        text-decoration: none;
    }


/**
 * Torso
 */
.torso {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   background-color: #ffffff;
   -webkit-box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.15);
   box-shadow: 0 0.1em 1em rgba(0, 0, 0, 0.30);
   border-top-left-radius: 0.5em;
   border-top-right-radius: 0.5em;
}


/* reused styles */

.sorry {
   font-style: italic;
}

.figure {
   margin: 0.8em 0 1.2em;
}

   .figure:first-child {
      margin-top: 0;
   }

   .figure p {
      font-size: 0.875em;
      text-align: center;
      color: #737373;
      margin-top: 0.5em;
      font-style: italic;
   }


/* nav */

.nav {
   background-color: #41c3d9;
   text-align: center;
   border-top-left-radius: 0.5em;
   border-top-right-radius: 0.5em;
}

   .small-screen {
      display: none;
   }
   
   .small-screen-nav {
      background-color: #929497;
      text-align: center;
      display: none;
   }
   
      .small-screen-nav h3 {
         margin: 0;
         font-size: 0.875em;
         letter-spacing: 4px;
         text-transform: uppercase;
         color: #ffffff;
         line-height: 1.6;
         padding: 0.5em 0;
      }
      
      .small-screen-nav a {
         display: block;
         border-top: 1px solid #ddd;
         background-color: #929497;
         color: #fff;
         padding: 0.5em 0;
      }
      
      .small-screen-nav a:hover {
         background-color: #929497;
          text-decoration: none;
      }

   .nav a {
      display: inline-block;
      padding: 0.5em 1em;
      text-decoration: none;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      position: relative;
      transition: all .4s;
   }
   
   .nav a:hover {
      background-color: #b8cf00;
   }
   
   .nav a.on {
      background-color: #b8cf00;
   }
   
      .nav a.on:after {
         content: '';
         width: 0;
         height: 0;
         display: block;
         position: absolute;
         border-top: 8px solid #b8cf00;
         border-left: 8px solid transparent;
         border-right: 8px solid transparent;
         bottom: -8px;
         left: 50%;
         margin-left: -8px;
      }
   
      .nav a.on:hover {
         background-color: #b8cf00;
      }
      
         .nav a.on:hover:after {
            border-top-color: #b8cf00;
         }
         
@media screen and (max-width: 43.125em) {
   .nav .large-screen {
      display: none;
   }
   
   .nav .small-screen {
      display: inline-block;
   }
   
   .small-screen-nav {
      display: block;
   }

   .nav {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
   }
}
   
.sub-nav {
    margin-top: 1.8em;
}
   
   .sub-nav ul {
      list-style: disc;
      padding: 0;
      font-size: 1.125em;
      line-height: 1.3;
   }
   
   .sub-nav ul ul {
      padding: 0 0 0 1.5em;
      font-size: 0.83333em;
      margin: 0.4em 0 0;
      list-style: circle;
   }
   
   .sub-nav li {
      margin: 0;
   }
   
      .sub-nav li:first-child {
         margin-top: 0;
      }
   
   .sub-nav .on {
      color: #000000;
   }

   .sub-nav li a.on {
       background-color: #b8cf00;
       color: #ffffff;
   }

   .sub-nav li a.on:hover {
       text-decoration: none;
   }

@media screen and (max-width: 46em) {
   .sub-nav {
      margin: 0 -2em 1.5em;
   }
}

.breadcrumbs {
   font-size: 0.9375em;
}

   .breadcrumbs span {
      margin: 0 0.25em;
      color: #c3bea9;
   }
   
   .breadcrumbs a {
      margin-bottom: 0.3125em;
      display: inline-block;
   }


ol.tree > li {
   font-size: 1.125em;
}
   
ol.tree li {
   line-height: 1.25em;
   margin: 0.425em 0;
}

ol.tree ol {
   margin: 0 0 1.2em;
   padding: 0 0 0 2em;
   font-size: 0.83333em;
}

   ol.tree ol li {
      font-style: italic;
   }
   
   ol.tree ol li a {
      font-style: normal;
   }

ol.roman {
   list-style-type: upper-roman;
}

ol.roman ol {
   list-style-type: lower-roman;
}


.main {
   padding: 1.5em 1.5em 4.5em;
}

.main.zeropad {
    padding: 0;
}

@media screen and (max-width: 46em) {
   
   .columns {
      width: 100% !important;
      float: none;
      margin: 1.5em 0 0;
   }
   
      .columns:first-child {
         margin-top: 0;
      }
}

/* Error messages for XHR calls */
.error {
    display: none;
    margin: 2em 0 0 0;
    position: relative;
    border-radius: 0.5em;
    padding: 1em 1em 1em 6em;
    background-color: #FFC4E0;
    min-height: 2em;
}

.error:before {
    content: 'Error!';
    display: block;
    position: absolute;
    top: 0.6em;
    left: 0.6em;
    font-size: 1.2em;
    font-weight: bold;
}


/* pagination */
.pagination {
   border-top: 1px solid #ddd;
   margin-top: 1.5em;
   padding-top: 1em;
   *zoom: 1;
}

   .pagination:before,
   .pagination:after {
      content: " ";
      display: table;
   }

   .pagination:after {
      clear: both;
   }

   .pagination a {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 45%;
      position: relative;
      line-height: 1.4;
   }
   
      .pagination a:before,
      .pagination a:after {
         display: block;
         position: absolute;
         top: 0;
      }

   .pagination .older {
      float: left;
      padding-left: 0.85em;
   }
   
      .pagination .older:before {
         content: "«";
         left: 0;
         -webkit-transition: left 0.24s ease;
         -moz-transition: left 0.24s ease;
         transition: left 0.24s ease;
      }
      
      .pagination .older:hover:before {
         left: -0.25em;
      }
   
   .pagination .newer {
      float: right;
      text-align: right;
      padding-right: 0.85em;
   }

      .pagination .newer:after {
         content: "»";
         right: 0;
         -webkit-transition: right 0.24s ease;
         -moz-transition: right 0.24s ease;
         transition: right 0.24s ease;
      }

      .pagination .newer:hover:after {
         right: -0.25em;
      }
      
   .pagination small {
      font-size: 0.875em;
   }


/* article */
.article {
    margin: 2em 0 0;
}

   .article:first-child {
      margin-top: 0;
   }
   
   .article h1 {
      margin: 0.2em 0 1em;
      font-size: 2.5em;
      font-weight: normal;
   }
   
   .article h2 {
      font-size: 1.5em;
      font-weight: bold;
      margin: 1.5em 0 0;
   }
   
   .article .article-metadata {
      margin-top: -1em;
      color: #a49b8c;
      font-size: 0.875em;
   }
   
   .article h3 {
       margin-top: 2em;
      line-height: 1.3;
      font-weight: bold;
      font-style: italic;
   }
   
      .article h3 em {
         font-style: normal;
      }
   
   .article h1 a {
      text-decoration: none;
   }

   .article img {
      display: block;
      width: 100%;
      margin: 0.8em 0 0;
   }
   
   .article p img:first-child {
      margin-top: 0;
   }

   .article img.center {
       margin: 0.8em auto auto;
   }
   
@media screen and (max-width: 30em) {
   .article h1 {
      font-size: 1.65em;
   }
   
   .article h2 {
      font-size: 1.5em;
   }
}
   
   
/* sidebar */
.sidebar {
   margin-top: 1.6em;
}
   
   
/* side block */
.side-block {
   margin: 2em 0 0;
}

   .side-block:first-child {
      margin-top: 0;
   }
   
   .side-block:last-child {
      margin-bottom: 0;
   }
   
   .side-block h2 {
      font-size: 1.4em;
      font-weight: normal;
      margin: 0 0 0.35em;
      padding-bottom: 0.3em;
      border-bottom: 1px dotted #ccc;
   }
   
   .side-block h2 a {
      text-decoration: none;
       color: #3d3d3d;
   }
   
   .side-block ul {
       margin-top: 0.4em;
       list-style: none;
       padding: 0;
   }

   .side-block li {
       line-height: 185%;
   }

   .side-block li a {
       padding: 0.15em 0.15em 0.15em 0.15em;
   }

   .side-block li a:hover {
       text-decoration: none;
   }


@media screen and (max-width: 46em) {
   .side-block {
      margin: 0 0 1.5em 4%;
      width: 48% !important;
      float: left;
   }
   
   .side-block.odd {
      margin-left: 0;
   }
}

@media screen and (max-width: 32em) {
   .side-block {
      margin: 0 0 1.5em;
      width: 100% !important;
      float: none;
   }
}

   
   
/* calendar */
.calendar ul {
   list-style: none;
   padding: 0;
}

   .calendar li {
      margin: 0.75em 0 0;
   }
   
      .calendar li:first-child {
         margin-top: 0;
      }
   
   .calendar small {
      color: #503c33;
      font-size: 0.875em;
      font-style: italic;
   }
   
   .calendar h3 {
      font-weight: normal;
      margin: 0.125em 0 0;
      font-size: 1.2em;
   }
   
   
/* big-calendar */
.big-calendar {
}

   .big-calendar .divider {
      font-size: 0.9125em;
      overflow: hidden;
      width: 100%;
      margin-top: 1.5em;
      margin-bottom: -0.75em;
   }
   
      .big-calendar .divider span {
         display: inline-block;
         position: relative;
         padding: 0 0.65em;
         color: #b7b29d;
         font-size: 1.125em;
         margin-left: 4.35em;
      }
   
      .big-calendar .divider span:before,
      .big-calendar .divider span:after {
         content: '';
         position: absolute;
         display: block;
         height: 0;
         width: 800px;
         border-top: 3px double #cbc9c0;
         top: 50%;
         margin-top: -1px;
      }
      
      .big-calendar .divider span:before {
         left: -800px;
      }
      
      .big-calendar .divider span:after {
         right: -800px;
      }
   
   .big-calendar .date-blob {
      width: 3.2em;
      float: left;
      text-align: center;
      box-shadow: 0 0 0.6em rgba(0, 0, 0, 0.15);
      position: relative;
       margin-right: 1em;
   }
   
      .big-calendar .date-blob strong {
         text-transform: uppercase;
         font-weight: bold;
         letter-spacing: 1px;
         padding: 0.1em 0 0;
         font-size: 0.6em;
         background-color: #b8cf00;
         color: #fff;
         display: block;
      }
      
      .big-calendar .date-blob span {
         display: block;
         font-size: 1.1em;
         line-height: 1;
         background-color: #fff;
         padding: 0.125em 0 0.35em;
      }
      
   .big-calendar .event {
      margin-top: 2em;
   }
   
      .big-calendar .event:first-child {
         margin-top: 0;
      }
      
   .big-calendar .event h3 {
      font-size: 1em;
      margin: auto 0;
      font-style: normal;
       font-weight: normal;
   }
   
   @media screen and (max-width: 30em) {
      .big-calendar .date-blob {
         font-size: 0.825em;
      }
      
      .big-calendar .date-blob strong {
         letter-spacing: 0;
      }
   }


/* map */
.map {
   height: 20em;
   width: 100%;
   border: 1px solid #ccc;
}

.big-map .map {
   height: 24em;
}

   .map h2 {
      margin: 0;
      font-size: 1.4em;
   }

   .map h3 {
      margin: 0;
      font-style: normal;
      font-size: 1.125em;
   }
   
   .map p {
      margin: 0.4em 0 0;
   }

@media screen and (max-width: 46em) {
   .map {
      height: 20em;
   }
}


/* taxonomy results */

.taxonomy-results {
   border-top: 1px solid #ddd;
   padding-top: 1.5em;
}

   .taxonomy-results h1 {
      font-size: 1.9em;
   }

/* gallery */
.masonry .item {
   width: 286px;
   margin-bottom: 15px;
   overflow: hidden;
}
.masonry .item img {
   display: block;
   width: auto !important; /*override the width below*/
   width: 100%;
   max-width: 100%;
}

.masonry .item .caption {
   width: 100%;
   position: absolute;
   bottom: -5px;
   background: rgba(0,0,0,.3);
   padding: 25px 0;
   color: #fff;
   text-align: center;
   font-size: 21px;
   opacity: 0;
   -webkit-transition: ease-in-out all .2s;
}

.masonry .item:hover .caption {
   opacity: 1;
   bottom: 0;
}


/**
 * Home page
 */
.homepage {
    padding: 1.5em;
}

.homepage.splash {
    background: url("../img/splash.png") no-repeat bottom right;
    background-size: contain;
    margin: 0.5em 0.2em;
}

    .homepage.splash .text-message {
        width: 60%;
        text-align: center;
    }

    .homepage.splash .text-message h1 {
        margin: 0 0 1em 0;
        font-size: 3em;
        font-weight: normal;
    }

    .homepage.splash .text-message p {
        font-size: 1.2em;
    }

    .homepage.splash .product-link a {
        font-size: 1.3em;
        color: #b8cf00;
    }

    @media screen and (max-width: 95em) {
        .homepage.splash {
            background: url("../img/splash.png") no-repeat center right;
            background-size: auto 90%;
        }
    }

    @media screen and (max-width: 60em) {
        .homepage.splash {
            background: none;
        }

        .homepage.splash .text-message {
            width: 100%;
        }
    }

.homepage h2 {
    font-weight: bold;
    font-size: 1.1em;
    /*    color: #16b2cd; */
}

.homepage.solutions {
    text-align: center;
    border-top: 1px dashed #bebebe;
    border-bottom: 1px solid #bebebe;
    background-color: rgb(244, 255, 245);
}

.homepage.solutions .row {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

.homepage.solutions .row:first-child {
    padding-top: 0;
}

.homepage.solutions h2 {
    margin-top: 0.5em;
}

.homepage.solutions .icon {
    margin-top: 0.5em;
    font-family: 'Flaticon';
    font-size: 2.5em;
    color: #616161;
}

.homepage .proceed {
    margin-left: 0.5em;
    margin-bottom: 1.2em;
}

    .homepage .proceed .icon {
        margin-right: 0.5em;
        font-family: 'Flaticon';
        font-size: 1.6em;
        color: #616161;
    }

.homepage.c2id-aas {
    background-image: url("../img/power-fight.png");
    background-repeat: no-repeat;
    background-position: bottom right 2em;
    background-size: contain;
    background-origin: padding-box;
    background-color: #dcefff;
    padding-top: 1.5em;
    padding-bottom: 5em;
    border-bottom: 1px solid #bebebe;
}

    .homepage.c2id-aas h2 {
        display: inline;
        font-size: 2.2em;
        font-weight: normal;
        background-color: white;
        padding: 0.1em;
    }

    .homepage.c2id-aas ul {
        margin-top: 1.4em;
    }

    .homepage.c2id-aas ul li {
        font-weight: normal;
        font-size: 1em;
    }

/* https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe */
.homepage.cards {
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-gap: 1rem;
}

    @media (min-width: 200px) {
        .homepage.cards { grid-template-columns: repeat(2, 1fr); }
    }

    @media (min-width: 400px) {
        .homepage.cards { grid-template-columns: repeat(4, 1fr); }
    }

    @media (min-width: 800px) {
        .homepage.cards { grid-template-columns: repeat(8, 1fr); }
    }

.homepage.cards .card {
    margin-top: 1em;
}
.homepage.cards .card p {
    margin-top: 0.25em;
}

.homepage.insight-slide-container {

}
    .homepage.insight-slide {
        display: none;
        background-size: cover;
        padding-top: 1.5em;
        padding-bottom: 5em;
        border-bottom: 1px solid #bebebe;
    }

    #insight-oidc-federation {
        background-image: url("../img/oidc-federation-network.jpg");
    }

    #insight-oauth21 {
        background-image: url("../img/oauth21-tile.png");
    }

    #insight-ekyc {
        background-image: url("/assets/blog/2019/crowd.jpg");
    }

    .homepage.insight-slide h2 {
        display: inline;
        font-size: 2.4em;
        font-weight: normal;
        background-color: white;
        padding: 0 0.1em;
    }

    .homepage.insight-slide h2 a {
        color: #b8cf00;
    }

    .homepage.insight-slide h2 a:hover {
        text-decoration: underline;
    }

    .homepage.insight-slide h3 {
        font-weight: normal;
    }

    .insight-slide span.white-bg {
        display: inline;
        line-height: 150%;
        background-color: white;
        padding: 0.1em;
    }

    .homepage.insight-slide a:hover {
        text-decoration: none;
    }

    .insight-slide-nav {
        display: block;
        position: relative;
        z-index: 1;
        margin-top: -2em;
        text-align: center;
    }

    .slide-dot {
        cursor: pointer;
        height: 1em;
        width: 1em;
        margin: 0 2px;
        background-color: #bbb;
        border: 0.15em solid #ffffff;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .active, .slide-dot:hover {
        background-color: #b8cf00;
    }

    .slide-fade {
        animation-name: slide-fade;
        animation-duration: 1.5s;
    }

    @keyframes slide-fade {
        from {opacity: .4}
        to {opacity: 1}
    }


.homepage.customers {
    border-bottom: 1px solid #bebebe;
    text-align: center;
}
    .homepage.customers h3 {
        margin: 0.4em auto 1.5em auto;
    }

    .homepage.customers img {
        height: 2.2em;
    }

/*
 * Solutions, products or contact items matrix
 */
.matrix {
    margin: 0.5em 0;
}

    .matrix .row {
        margin-bottom: 1.5em;
    }

    .matrix h1 {
        margin-top: 0;
        font-size: 2.5em;
        font-weight: normal;
    }

    .matrix h2 {
        margin-top: 0.2em;
        font-size: 1.8em;
    }

    .matrix h3 {
        margin-top: 2em;
        color: #888;
        font-size: 1.2em;
        font-weight: normal;
    }

    @media screen and (max-width: 56em) {

        .matrix .row {
            margin-bottom: 0.75em;
        }

        .matrix .column {
            width: 100% !important;
            margin-left: 0 !important;
            margin-bottom: 1.5em;
        }
    }



/**
 * Responsive about page
 */
@media screen and (max-width: 56em) {

    .row.about .row {
        margin-bottom: 0.75em;
    }

    .row.about .column {
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 1.5em;
    }
}


.about .icon {
    margin: 0.5em 0 0 0;
    text-align: center;
    font-family: 'Flaticon';
    font-size: 2.2em;
    color: #616161;
}

.about h3 {
    margin-top: 0.5em;
    text-align: center;
    font-style: normal;
    font-size: 1.1em;
}


/**
 * Connect2id server main page.
 */
.slogan-hi {
    display: inline;
    font-size: 1.1em;
    color: white;
    padding: 0.2em;
    background-color: #b8cf00;
}


/**
 * Connect2id server quick start guide.
 */
.server-quick-start {
    border: none;
}

.server-quick-start td {
    border-left: none;
    border-right: none;
}

/**
 * Configuration and web API reference tables
 */
table.spec {
   margin-top: 2em;
   width: 100%;
}

   table.spec.compact {
       font-size: 0.8em;
   }

   table.spec th {
      text-align: left;
   }

   table.spec td {
       padding-bottom: 1em;
   }

   table.spec ul {
       padding-left: 1.1em;
   }

/**
 * Search results page
 */
#search-page-form {
    margin-bottom: 1.5em;
    width: 100%;
}

    #search-page-form input {
        width: 100%;
        height: 2.6em;
        padding: 0.2em;
        border: 0.2em solid #dfe2e6;
        outline: none;
        border-radius: 0.6em;
        background-color: #ffffff;
        background-image: url("../img/magnifying-glass-128x128.png");
        background-position: 99% center;
        background-size: 2em;
        background-repeat: no-repeat;
        text-indent: 0.6em;
    }


#search-message {
    margin-top: 1.5em;
}

#search-result {

}
    #search-result h3 {
        margin-bottom: 0em;
        font-style: normal;
    }
    #search-result h3 a {
        color: #3d3d3d;
    }
    #search-result h3 a:hover {
        text-decoration: none;
    }
    #search-result p {
        margin-top: 0.1em;
    }

/**
 * Footer
 */
.footer {
   font-size: 0.8em;
   line-height: 140%;
   background-color: #929497;
   padding: 1.5em 1.5em 3em;
   color: #ffffff;
   margin-bottom: 0;
   text-align: left;
}

    .footer .row {
        width: 100%;
    }

    .footer .c2id-logo {
        margin-top: 0.4em;
        margin-bottom: -0.4em;
        height: 1.5em;
    }

    .footer h4 {
        margin: 0 0 1em;
        line-height: 2.2em;
    }

    .footer ul {
        margin-top: 0;
        padding-left: 1em;
        list-style-type: disc;
    }

    .footer ul li {
        line-height: 160%;
    }
   
   .footer a {
      color: #ffffff;
   }
   
      .footer a:hover {
         color: #ffffff;
      }

   @media screen and (max-width: 43.125em) {
       .footer .large-screen {
           display: none;
       }

       .footer .small-screen {
           display: inline-block;
       }

       .footer .c2id-logo {
           margin-top: 1.5em;
           margin-bottom: -1em;
       }
   }
      
/**
 * Gallery
 */
.gallery {
   border-top: 1px solid #ddd;
   margin-top: 1.5em;
   padding-top: 1.75em;
}

   .gallery img {
      display: block;
      width: 100%;
      margin: 0;
   }
   
   .gallery .row {
      margin-top: 1.5em;
   }
   
      .gallery .row:first-child {
         margin-top: 0;
      }
      
@media screen and (max-width: 400px) {
   .gallery .column {
      float: none;
      width: 100%;
      margin: 1.5em 0 0 !important;
   }
   
   .gallery {
      padding-top: 0.25em;
   }
   
   .gallery .row {
      margin-top: 0;
   }
}


/**
 * Json2Ldap online demo
 */
#json2ldap-demo-people {
    width: 100%;
}

#json2ldap-demo-people-paging {
    height: 2em;
    padding: 0;
    vertical-align: middle;
}

#json2ldap-demo-people-paging a {
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 2px;
    font-size: 0.9em;
}

#json2ldap-demo-people-paging-prev {
    float: left;
}

#json2ldap-demo-people-paging-next {
    float: right;
}

#json2ldap-demo-people-list {
    width: 30%;
    margin: 0;
    padding: 0;
}

#json2ldap-demo-people-list ul {
    margin: 0;
    border: none;
    padding: 0;
}

#json2ldap-demo-people-list ul li {
    display: block;
    cursor: pointer;
    margin: 0;
    border: none;
    padding: 0.2em;
}

#json2ldap-demo-people-list ul li:hover {
    background-color: #ff803b;
    color: #ffffff;
}

#json2ldap-demo-people-list ul li.selected {
    background-color: #ff5900;
    color: #ffffff;
}

#json2ldap-demo-people-details {
}

#json2ldap-demo-people-details table {
    width: 100%;
    margin: 0;
    border: none;
}

#json2ldap-demo-people-details-col-1 {
    width: 35%
}

#json2ldap-demo-people-details-col-2 {
    width: 65%;
}

#json2ldap-demo-people-details table th {
    background: none;
    border: none;
    color: #3d3d3d;
}

#json2ldap-demo-people-details table td {
    border: none;
    padding: 0.2em;
}

#json2ldap-demo-people-details table td:first-child {
    color: #aaa;
}

#json2ldap-demo-people-details-cn {
    margin: 0.2em 0 0.5em 0;
    padding: 0;
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
}

#json2ldap-demo-people-details-description {
    margin: 0.5em 0;
    padding-bottom: 1em;
    text-align: left;
    font-weight: normal;
    border-bottom: 1px solid #dddddd;
}

#json2ldap-demo-people-details-photo {
    float: right;
    margin-top: 0.2em;
    padding: 0.2em;
    width: 4em;
    height: 4em;
    border: 1px solid #dddddd;
    border-radius: 0.4em;
    background-color: #ffffff;
}



#json2ldap-demo-groups {
    width: 100%;
    min-height: 10em;
}

#json2ldap-demo-groups-col-1 {
    width: 50%;
}

#json2ldap-demo-groups-col-2 {
    width: 50%;
}

#json2ldap-demo-groups td {
    padding: 0.5em;
}

#json2ldap-demo-groups-list {
    vertical-align: middle;
    text-align: center;
}

#json2ldap-demo-groups-select {
    width: 8em;
}

#json2ldap-demo-groups-description {
    font-weight: bold;
    text-align: left;
    border-bottom: 1px solid #dddddd;
}

#json2ldap-demo-auth {
    width: 100%;
}

#json2ldap-demo-auth-col-1 {
    width: 50%;
}

#json2ldap-demo-auth-col-2 {
    width: 50%;
}

#json2ldap-demo-auth-credentials {
    border: none;
}

#json2ldap-demo-auth-credentials td {
    border: none;
}

#json2ldap-demo-auth-uid {
    width: 9em;
}

#json2ldap-demo-auth-password {
    width: 9em;
}

#json2ldap-demo-auth-submit {
    width: 9em;
}

#json2ldap-demo-auth-result {
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
}

#json2ldap-demo-auth-success {
    display: none;
    color: #25ADC4;
}

#json2ldap-demo-auth-failure {
    display: none;
    color: #ff3300;
}


/**
 * Disqus comments
 */
#disqus_thread {
    margin-top: 1em;
}