/* Modification des class de base de bootstrap */
body {
  cursor : default;
  padding : 0px;
  margin : 0px;
  background-color : #fff;
}

video {
    margin-bottom : 10px;
}

.dropdown-menu {
    max-height: 400px;
    overflow: hidden;
    overflow-y: auto;
}

.apps4internet {
    font-family: 'Chewy', cursive;
    font-size : 50px;
    position : absolute;
    top : -150px;
    left : 50%;
    margin-left : -250px;
}

.apps4internet-small {
    margin-top : -200px;
    font-family: 'Chewy', cursive;
    font-size : 35px;
}

#extractors {
  margin-top : 20px;
  overflow: auto;
}

.clearFooter {
  clear:both;
  height : 40px;
}

.helperSelect {
  font-size:25px;
  vertical-align:middle;
  cursor : pointer;
}

/* Authentification */
#formAuthContent {
    position : absolute;
    top : 40%;

}

.form-signin {
  padding : 30px;
  background-color: #fff;
  border-radius:5px;
  box-shadow: 0px 0px 20px #777;
}

h2.form-signin-heading {
    z-index : 10000;
    text-align : center;
    font-size : 80px;
    color : #fff;
    text-shadow: 0px 0px 20px #777;
    -webkit-animation: getTextShadow 3s;
    -moz-animation: getTextShadow 3s;
    -o-animation: getTextShadow 3s;
    -ms-animation: getTextShadow 3s;
    animation: getTextShadow 3s;
    padding-bottom : 20px;
}

.form-signin input {
  position : relative;
  -webkit-animation: showInput 1s ease-in backwards;
  -moz-animation: showInput 1s ease-in backwards;
  -o-animation: showInput 1s ease-in backwards;
  -ms-animation: showInput 1s ease-in backwards;
  animation: showInput 1s ease-in backwards;
}
.form-signin button {
  -webkit-animation: showButton 1s ease-in backwards;
  -moz-animation: showButton 1s ease-in backwards;
  -o-animation: showButton 1s ease-in backwards;
  -ms-animation: showButton 1s ease-in backwards;
  animation: showButton 1s ease-in backwards;
}


.light {
    -webkit-animation: light 5s ease-in backwards;
}

.mediumIcon {
  font-size:18px;
  cursor : pointer;
}

/* Tableaux */
table.table {
  padding : 20px;
  -webkit-box-shadow: 0px 0px 2px rgba(50, 50, 50, 0.70);
  -moz-box-shadow:    0px 0px 2px rgba(50, 50, 50, 0.70);
  box-shadow:         0px 0px 2px rgba(50, 50, 50, 0.70);
}

table.table td {padding : 10px;}
table.table thead>tr>th{background-color:#ebebeb;border-bottom:2px solid #f0f0f0;}
td.actions {width : 150px;text-align: right;}
td.actions span{margin : 0px 2px 0px 2px;cursor : pointer;font-size:16px;}
td.editItem {width : 30px;}
td.editItem span{cursor : pointer;font-size:16px;}
td.sharedItem {width : 30px;}
td.username {width : 300px;}
td.password {width : 150px;}
td.amount, td.number, th.amount, th.number {text-align:right;}

table.table-amount thead>tr>th {
  background-color:#232323;
  color : #fff;
  font-size : 16px;
  font-weight : normal;
}

table.table-amount tfoot>tr>th {
  background-color:#232323;
  color : #fff;
  font-size : 16px;
  font-weight : normal;
}

table.table-amount tfoot>tr.success>th,
table.table-amount tfoot>tr.danger>th {
  color : #000;
  font-size : 13px;
}

/* Liste (nav) */
.user_list,
.seyes-list{
  margin : 2px;
  padding : 2px;
  background-color : #f5f5f5;
  cursor : pointer;
  color : #333;
  line-height : 40px;
  border : 1px solid #ebebeb;
  border-radius: 5px;
}

.user_list:hover,
.seyes-list:hover {
  background-color : #eee;
  color : #428bca;
  border : 1px solid #ccc;
}

.user_list i.glyphicon,
.seyes-list i.glyphicon{
  font-size : 20px;
  color : #3276b1;
  line-height : 30px;
}

.user_list .div-badge,
.seyes-list .div-badge{
  float:left;
  text-align:center;
}

.user_list .badge,
.seyes-list .badge{
  margin-left : 5px;
  margin-right : 15px;
}

/* Service Dashboard */
a.linkLogo {
  color : #999999;
  text-decoration: none;
}

div.links {
  margin-top : 90px;
}

div.notes {
  margin-top : 90px;
  margin-bottom : 50px;
  padding : 10px;
  text-align : center;
  background-color: #fff;
  border-radius : 5px;
  -webkit-box-shadow: 0px 0px 25px rgba(50, 50, 50, 0.70);
  -moz-box-shadow:    0px 0px 25px rgba(50, 50, 50, 0.70);
  box-shadow:         0px 0px 25px rgba(50, 50, 50, 0.70);
}

div.notes textarea{
  width : 100%;
  height : 150px;
  border : 1px solid #ccc;
  border-radius : 3px;
  padding : 10px;
  color : #464646;
  margin-bottom : 10px;
}

div#lastFastNotes {
  margin-top : 45px;
  height : 220px;
  max-height : 220px;
  overflow : auto;
}

.fastnote {
  text-align : left;
  padding : 5px;
  font-size : 13px;
  color : #428bca;
  height : 40px;
  line-height : 30px;
  overflow: auto;
  overflow-y:hidden;
  overflow-x:hidden;
}

.fastnote:hover {
  background-color : #ebebeb;
  border-radius : 10px;
  color : #2a6496;
  cursor : pointer;
}

.fastnoteDelete {
    margin-top : 5px;
    margin-right : 5px;
}

#addFastLink,
.fast-link {
  float : left;
  height:88px;
  margin:0px 15px 30px 15px;
  width:88px;
  background-color: #efefef;
  border:2px solid #e0e0e0;
  border-radius:5px;
  -webkit-box-shadow: 0px 0px 25px rgba(50, 50, 50, 0.70);
  -moz-box-shadow:    0px 0px 25px rgba(50, 50, 50, 0.70);
  box-shadow:         0px 0px 25px rgba(50, 50, 50, 0.70);
}

#addFastLink {
  border : 4px dotted green;
  opacity: 0.5;
  width:88px;
  cursor : pointer;
  font-size : 45px;
  line-height: 88px;
  padding-left : 20px;
  vertical-align: middle;
}

#btnModalFastLink {
  color : #65BE4A;
  font-weight: bold;
}

.links div.social {background-color : #049FDF;}
.links div.multimedia {background-color : #E33D3F;}
.links div.manager {background-color : #65BE4A;}
.links div.download {background-color : #FFBB2A;}

.links div.other {
  background:linear-gradient(135deg, #62BB47 0%, #62BB47 16.5%, #FCB827 16.5%, #FCB827 33.5%, #F78320 33.5%, #F78320 50%, #E03A3E 50%, #E03A3E 66.5%, #963D97 66.5%, #963D97 83%, #019CDC 83%, #019CDC 100%);
}

.links a, .links a:hover {
  text-decoration: none;
}

.fast-link-inline {
  background:#fff;
  border-radius:2px;
  height:80px;
  margin:auto;
  position:relative;
  text-align:center;
  top:-18px;
  width:80px;
  opacity: 0.5;
}
.fast-link-inline:hover {opacity: 0.7;}

.fast-link h2 {
  color:#777;
  font-size : 18px;
  margin-bottom : 3px;
  padding-bottom : 0px;
  line-height : 40px;
}
.fast-link span {
  color:#777;
  margin : 0px;
  padding : 0px;
  font-size : 12px;
}

.fast-link div.deleteFastLink {
  position:absolute;
  z-index : 10000;
  margin-top : -10px;
  margin-left : 75px;
}

.fast-link div.deleteFastLink span{
  font-size : 25px;
  color : #000;
  cursor : pointer;
}

#sItemNote, #sEditItemNote {
  height : 300px;
}

/* Service Passwords */
#categoriesContainer {width : 225px;}
#categoriesContainer > a {text-decoration:none;color :#2a6496;}
#categoriesContainer i.glyphicon{color:#ccc;}
.editDbclick {color : #2a6496;}

#categories {
    margin-top : 80px;
    max-width : 250px;
    max-height : calc(100% - 160px);
}

#journal_categories_group {
    max-height: calc(100% - 560px);
    overflow: auto;
}

#items {
  margin-top:90px;
}

#items h4{
  padding : 0px;
  margin : 2px 10px 2px 2px;
  font-size : 20px;
}

.removeUserShare {
  font-size : 20px;
  cursor: pointer;
}

.share_username {
  font-weight: bold;
}

.ui-autocomplete {
    z-index : 10000;
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 100px;
  }

/* Service Users */
#resumeUsers {
  margin-top : 90px;
  margin-bottom : 50px;
  background-color: #fff;
}

#detailUsers {
  margin-top : 90px;
  margin-bottom : 50px;
  padding : 20px;
  background-color: #fff;
  border-radius : 5px;
  -webkit-box-shadow: 0px 0px 25px rgba(50, 50, 50, 0.70);
  -moz-box-shadow:    0px 0px 25px rgba(50, 50, 50, 0.70);
  box-shadow:         0px 0px 25px rgba(50, 50, 50, 0.70);
}

.contentUsers {
  max-height: 500px;
  overflow: auto;
}

ul.service{
  list-style-type : none;
}

li.service{
  list-style-type : none;
  display : inline;
  padding : 5px;
  margin : 5px;
  opacity : 0.6;
  cursor : pointer;
  border : 1px solid #eee;
  -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.70);
  -moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.70);
  box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.70);
}

li.service:hover {
  background-color : #ddddee;
  border : 1px solid #ccccee;
}

li.serviceEnable {
  border : 1px solid #bbffbb;
  background-color : #ccffcc;
  opacity : 1;
}

li.service span.glyphicon{
  font-size : 14px;
  color : #333;
  margin-right: 10px;
}

.user_list_active {
  background-color : #428bca;
  color : #fff;
}

.user_list_active:hover {
  background-color : #428bca;
  color : #fff;
  border : 1px solid #ccc;
}

.user_list_active i.glyphicon{
  color : #fff;
}

.user_disabled {
  color : #aaa;
  background-color : #ffdddd;
}

.type_manager i.glyphicon{
  color : #ed9c28;
}

.type_admin i.glyphicon{
  color : #d43f3a;
}

.type_root i.glyphicon{
  color : #47a447;
}

.user_disabled i.glyphicon{
  color : #aaa;
}

.user_profile {
  font-size : 90px;
}

.input-group[class*=col-] {
  padding-left : 15px;
}

.link {
    cursor : pointer;
}

/* Service Journals */
#search_bar {
  margin-top : 50px;
  padding-top : 15px;
  padding-bottom : 10px;
  border : none;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:    0px 2px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow:         0px 2px 5px 0px rgba(0, 0, 0, 0.5);
}

#full_amount {
    padding-top : 20px;
    padding-bottom : 0px;
    font-weight : bold;
    font-size : 16px;
    margin-bottom : 15px;
    cursor : default;
    background : none;
    border : none;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:    0px 2px 5px 0px rgba(0, 0, 0, 0.5);
    box-shadow:         0px 2px 5px 0px rgba(0, 0, 0, 0.5);
}


#resume_amount {
  font-weight : bold;
  font-size : 16px;
  cursor : default;
  background : none;
  border : none;
}

#resume_amount div.amount {
    padding : 10px;
    margin : 5px 0px 10px 0px;
    cursor : pointer;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:    0px 2px 5px 0px rgba(0, 0, 0, 0.5);
    box-shadow:         0px 2px 5px 0px rgba(0, 0, 0, 0.5);
}

#resume_amount div.amount:hover {
    background-color : #f0f0f0;
}

#moreAmount {
  font-size : 12px;
  font-weight : normal;
  padding-bottom:5px;
}

#moreAmount .credit{
  color : #46aa46;
}

#moreAmount .debit{
  color : #aa4646;
}

#moreAmount .separed-amount{
  border-bottom : 1px dotted #ddd;
  margin : 0px 0px 3px 0px;
}

.contentJournals {
  max-height: 500px;
  overflow: auto;
}

.journal_list {
  margin-bottom : 5px;
  font-size : 15px;
}

.categories_total {
  font-size : 12px;
  font-weight: bold;
  line-height: 20px;
  color : #aaa;
}

.categories_total_amount {
  font-size : 12px;
  font-weight: bold;
  text-align: right;
  line-height: 20px;
  color : #aaa;
}

.journal_list_total {
  margin-top : 20px;
  margin-bottom : 25px;
  font-weight : bold;
  font-size : 16px;
  cursor : default;
  background : none;
  border : none;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:    0px 2px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow:         0px 2px 5px 0px rgba(0, 0, 0, 0.5);
}

.journal_list_active {
  background-color : #428bca;
  color : #fff;
}

.journal_list_active:hover {
  background-color : #428bca;
  color : #fff;
  border : 1px solid #ccc;
}

.journal_list_active i.glyphicon{
  color : #fff;
}

.journal_list_active > div {
  color : #fff;
}

.editGroup {cursor : pointer;color : #2a6496;}
.editGroup:hover {text-decoration: underline;}

.table>thead>tr>td.success, .table>tbody>tr>td.success, .table>tfoot>tr>td.success, .table>thead>tr>th.success, .table>tbody>tr>th.success, .table>tfoot>tr>th.success, .table>thead>tr.success>td, .table>tbody>tr.success>td, .table>tfoot>tr.success>td, .table>thead>tr.success>th, .table>tbody>tr.success>th, .table>tfoot>tr.success>th {
  background-color:#cfe0a8;
  border-color : #fff;
}

.table>thead>tr>td.danger, .table>tbody>tr>td.danger, .table>tfoot>tr>td.danger, .table>thead>tr>th.danger, .table>tbody>tr>th.danger, .table>tfoot>tr>th.danger, .table>thead>tr.danger>td, .table>tbody>tr.danger>td, .table>tfoot>tr.danger>td, .table>thead>tr.danger>th, .table>tbody>tr.danger>th, .table>tfoot>tr.danger>th {
  background-color:#e2bebe;
  border-color : #fff;
}

#showParamsGroupForm {
  font-size:80%;
  cursor : pointer;
  margin-right : 5px;
}

#showUpdateGroupForm {
  font-size:80%;
  cursor : pointer;
  margin-left : 5px;
}

.removeGroupUser {
  font-size : 20px;
  color : #ee6666;
  cursor : pointer;
}

tr.item {
  cursor : pointer;
}

#documents_facturations,
#resume_facturations {
    margin-top : 20px;
}

div.item {
    padding : 10px;
    background-color : #ebebeb;
    border : 1px solid #ccc;
    border-radius : 5px;
    margin : 3px 0px 3px 0px;
}

div.item > .amount {
    font-weight : bold;
    text-align : right;
}

div.strong {
    font-weight : bold;
    font-size : 105%;
    background-color : #ccc;
    border : 1px solid #aaa;
}

.ui-state-highlight {
    height:40px;
    padding : 10px;
    margin : 3px 0px 3px 0px;
    opacity : 0.5;
    border : 3px dotted #dd4646;
}

.amount_ttc {
    font-weight : bold;
    font-size : 105%;
}

.editAddon {
    margin-right : 10px;
}

#videos_links {
  overflow: auto;
}

.videos_links {
  list-style-type : none;
  margin : 0px;
  padding : 0px;
}

.videos_links li{
  border : 1px solid #ddd;
  border-radius : 5px;
  padding : 10px;
  margin-bottom : 15px;
  min-height : 135px;
}

.videos_links li.empty{
    background-color : #fff;
    border : 0px;
    padding : 10px;
    margin-bottom : 10px;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
}

.videos_links li .name {
  font-weight : bold;
  font-size : 14px;
  padding : 5px;
  margin-bottom : 5px;
}

.video_info {
  cursor : pointer;
}

.videos {
  clear : both;
  margin-bottom : 5px;
}

.videos img {
  float : left;
  width : 130px;
  height : 115px;
  margin-right : 10px;
  border-radius : 3px;
}

.videos .description {
  font-weight : normal;
  font-size : 11px;
  padding : 5px;
  height : 40px;
}

.tocify {
    padding : 0px;
}

.tocify li {
    cursor : pointer;
}

.tocify .active {
    background-color : #428bca;
}

.tocify .active a {
    color : white;
}

.tocify .active :hover {
    background-color : #2a6496;
}

.tocify .active:hover a {
    color : white;
}

.shake{
  animation: shake linear 1s;
  animation-iteration-count: 1000;
  transform-origin: ;
  -webkit-animation: shake linear 1s;
  -webkit-animation-iteration-count: 1000;
  -webkit-transform-origin: ;
  -moz-animation: shake linear 1s;
  -moz-animation-iteration-count: 1000;
  -moz-transform-origin: ;
  -o-animation: shake linear 1s;
  -o-animation-iteration-count: 1000;
  -o-transform-origin: ;
  -ms-animation: shake linear 1s;
  -ms-animation-iteration-count: 1000;
  -ms-transform-origin: ;
}

.bounceInRight{
  animation: bounceInRight ease 1.5s;
  animation-iteration-count: 1;
  transform-origin: ;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: bounceInRight ease 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: bounceInRight ease 1.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: bounceInRight ease 1.5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: bounceInRight ease 1.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

.bounceInLeft{
  animation: bounceInLeft ease 1.5s;
  animation-iteration-count: 1;
  transform-origin: ;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: bounceInLeft ease 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: bounceInLeft ease 1.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: bounceInLeft ease 1.5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: bounceInLeft ease 1.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

.closeInTopCurtain{
  animation: closeInTopCurtain linear 0.3s;
  animation-iteration-count: 1;
  transform-origin: ;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: closeInTopCurtain linear 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: closeInTopCurtain linear 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: closeInTopCurtain linear 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: closeInTopCurtain linear 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

.closeInBottomCurtain{
  animation: closeInBottomCurtain linear 0.3s;
  animation-iteration-count: 1;
  transform-origin: ;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: closeInBottomCurtain linear 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: closeInBottomCurtain linear 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: closeInBottomCurtain linear 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: closeInBottomCurtain linear 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

.hideElement {
  animation: hideElement ease 0.5s;
  animation-iteration-count: 1;
  transform-origin: ;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: hideElement ease 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: hideElement ease 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: hideElement ease 0.5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: hideElement ease 0.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

.showElement{
  animation: showElement ease 0.5s;
  animation-iteration-count: 1;
  transform-origin: ;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: showElement ease 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: showElement ease 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: showElement ease 0.5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: showElement ease 0.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

.multiselect-container>li>a>label>input[type="checkbox"] {
    margin-left : -10px;
    float : none;
}



/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #5a5a5a;
}



/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  margin-left : 0px;
  margin-right : 0px;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
  background-color : inherit;
  width : 100%;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;

}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}



/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}



/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

.modalcontent {
    max-height: 370px;
    overflow-y: auto;
    overflow-x: hidden;
}
.person{
    cursor : pointer;
    border : 1px solid #aaa;
    padding : 10px;
    background-color : #f0f0f0;
    border-radius : 10px;
    box-shadow: 0px 0px 20px #777;
}