﻿body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}


/* custom colors */
body {
    background-color: #333333; /*#4b4a4a*/
    color: white;
}
/* custom colors for links */
a {
    color: #4da178;
}
a:hover, a:focus {
    color: #50ca8f;
}
a:active {
    color: #458063;
}

/* custom thumbnails and captions inside */
.thumbnail {
    position: relative;
    /*margin-bottom: 10px;*/
    /*margin-right: 1px;*/
    border: 3px solid #333333;
    /*border-radius: 8px;*/
}
/*.thumbnail:hover {
    background-color:#428bca;
    font-weight:bold;
}*/
/*.thumbnail img {
    background-image: url('/static/img/Empty.png');
    background-repeat:no-repeat;
}*/
.thumbnail .caption {
    position: absolute;
    /*top: 30%;*/
    bottom: 25%;
    left: 0;
    width: 100%;
    font-size:75px;
    /*color: #428bca;*/
}
.thumbnail .caption-extra {
    height:40px; 
    overflow:hidden;
}

.thumbnail:hover, .thumbnail:hover a, .caption-extra:hover {
    color: #FFFFFF;
    text-decoration:none;
}
/*.thumbnail .caption:hover {
    color: #f34b79;
}*/

/* custom video player alignment-respan*/
/*#dialog-content video {
    width:auto;
}*/

/*custom dialog box (overlay, opacity, titlebar, etc)  */
.myDialogClass.ui-dialog {
    background-color: #ffffff;
    z-index: 3000;
    position: absolute;
}
/*.myDialogClass.ui-dialog .row{
    margin:0;
}*/
.myDialogClass.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    margin: -25px 20px 0 0;
    right: 0;
}
.myDialogClass .ui-dialog-title {
    display: none;
}
.ui-widget-overlay.custom-overlay {
    background-color: black;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.9; /*0.7*/
    z-index: 2000 !important;
}

/* custom top navigation bar*/
#myNavBar a img {
    margin-right:-10px; /*-32px*/
}
/*#myNavBar ul li a:hover {
    background-color: #428bca;
    padding-bottom: 21px;
}*/

/* custom fileupload 'Browse' button*/
.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
    bottom:0; /*test*/
    width:100%; /*test*/
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}

/*-------------------------*/
/*custom button for the client: colors can be edit to match the client preferences*/
.btn-custom {
  color: #ffffff;
  background-color: #4da178;  /*#428bca;*/
  border-color: #458063; /*#357ebd;*/
}

.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  color: #ffffff;
  background-color: #458063; /*#3276b1; dark blue */
  border-color: #458063; /*#285e8e; darker blue*/
}

.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  background-image: none;
}

.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
  background-color: #222222;
  border-color: #333333;
  opacity:1;
}

/*custom color for the client: can be edit to match the client preferences*/
.custom-color {
    background-color: #222222;
  border-color: #333333;
}
#myNavBar ul li a.custom-color:hover {
    background-color: #4da178; /*blau #428bca;*/  /*rosa #e2017b;*/ /*violet #89477b;*/
    /*padding-bottom: 21px;*/
}
.thumbnail.custom-color {
    background-color:white;
}
.thumbnail.custom-color:hover {
    background-color: #4da178; /*#428bca;*/
    font-weight:bold;
}
.thumbnail.custom-color .caption {
    /*color: #4da178;*/ /*#428bca;*/
    color: #fff;
    left: 0;
    font-size: 30px;
    background: rgba(77,161,120,.75);
    width: 40%;
    left: 30%;
    padding: 0;
    bottom: 44%;
}
/*-------------------------*/


/* voting stars */
.stars {
  background: url("/static/img/stars.png") repeat-x 0 0;
  width: 180px;
  margin: 0;
}
 
.stars input[type="radio"] {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}
/*.stars input[type="radio"].star-6:checked ~ span {
  width: 100%;
}
.stars input[type="radio"].star-5:checked ~ span {
  width: 84%;
}
.stars input[type="radio"].star-4:checked ~ span {
  width: 67%;
}
.stars input[type="radio"].star-3:checked ~ span {
  width: 50%;
}
.stars input[type="radio"].star-2:checked ~ span {
  width: 34%;
}
.stars input[type="radio"].star-1:checked ~ span {
  width: 17%;
}*/
.stars label {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0!important;
  padding: 0!important;
  text-indent: -999em;
  float: left;
  position: relative;
  z-index: 10;
  background: transparent!important;
  cursor: pointer;
}
.stars label:hover ~ span {
  background-position: 0 -30px; /*blue star*/
}
.stars label.star-6:hover ~ span {
  width: 100% !important;
}
.stars label.star-5:hover ~ span {
  width: 84% !important;
}
.stars label.star-4:hover ~ span {
  width: 67% !important;
}
.stars label.star-3:hover ~ span {
  width: 50% !important;
}
.stars label.star-2:hover ~ span {
  width: 34% !important;
}
.stars label.star-1:hover ~ span {
  width: 17% !important;
}
.stars span {
  display: block;
  width: 0;
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  background: url("/static/img/stars.png") repeat-x 0 -60px;
  -webkit-transition: -webkit-width 0.5s;
  -moz-transition: -moz-width 0.5s;
  -ms-transition: -ms-width 0.5s;
  -o-transition: -o-width 0.5s;
  transition: width 0.5s;
}


#btn-results-csv-download, #btn-results-to-next-phase {
    height:150px;
    line-height:120px;
}

.warn-green {
    color:#ABD902;
}

#table-users tbody tr:hover, #table-results tbody tr:hover {
    background-color: #d8d8d8;
}

#new-distribution-msg {
    text-align:justify; 
    visibility:hidden; 
    padding:8px; 
    background-color:gray; 
    border-radius:7px;
}

/*.img-responsive {
    max-height: 136px;
}

@media screen (max-width:768px){
    .img-responsive {
        max-height: initial;
    }
}*/

div.opendialogContent {
    display: table;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
    max-width: 60%;
    min-width: 50%;
    color: black;
}
    div.opendialogContent h1, div.opendialogContent h2, div.opendialogContent h3, div.opendialogContent h4, div.opendialogContent h5, div.opendialogContent h6 {
        font-weight: 600;
    }
