acaresydney_ts/css/feedback_card.css

@CHARSET "UTF-8";
.blink_me {
	animation: blinker 0.3s linear infinite;
}

@keyframes blinker { 
	50% { opacity: 0; }
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d6f9ff+0,9ee8fa+100;Blue+3D */
background: rgb(214,249,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(214,249,255,1) 0%, rgba(158,232,250,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(214,249,255,1) 0%,rgba(158,232,250,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(214,249,255,1) 0%,rgba(158,232,250,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6f9ff', endColorstr='#9ee8fa',GradientType=0 ); /* IE6-9 */

}

/* Add some padding inside the card container */
.card .container {
  padding: 2px 0px;
  min-height:300px;
  position: relative;
}

.card .container.rated {
  background: url('../img/circle.png') no-repeat center;
  background-size: contain;
	
}

.card img{
	width:100%;
}

.card .ratecontainer{
	display : inline-block;
	position : relative;
	text-align: center;	
	width: 100%;
	position:absolute;
	bottom: 5px;
}
.container .ratecontainer{
	animation: blinker 0.8s linear infinite;
}
.container.rated .ratecontainer{
	animation: none;
}


.card .container p,
.card .container h1{
	margin-top:5px;
	margin-bottom:5px;
	margin-left:16px;
	margin-right:16px;
}
.card .container h1{
	font-weight:900;
	min-height:100px;
	max-height:100px;
}

.day_of_week{
   font-weight:900;
   font-size: 5em;
   text-align: center;
   background-color:dimgrey;
   color:white;
   text-shadow: 0 0 10px #0e0606;
}

.job_start,
.job_finish {
   display:inline-block;
   font-weight:900;
   width: 50%;
   font-size:3em;
   background-color:grey;
   color:white;
   margin:0px;
   padding:0px;
   text-align:center;
   box-shadow:0 0 2px black inset;
   text-shadow: 0 0 10px #0e0606;
}

.job_time{
   box-shadow:0 0 2px white inset;
}

.job_day_of_week{
	position: absolute;
    top: 1px;
    color: white;
    right: 20px;
    font-size: 1em;
    font-weight: bolder;
    border-left: 1px dotted white;
    border-bottom: 1px dotted white;
    padding: 0 10px 0 10px;
}



.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
	display: block;
}
.rate:not(:checked) > input {
    position:absolute;
    /* top:-9999px; */
	visibility:hidden;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size: 2.6em;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

.ult_modal-body{
	height:60vh;
	width:80vw;
}