/* #region Template 1 */

.tpl-1 .title {
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    background-color: #148891;
    border-radius: 20px 0;
    padding: 5px;
    position: absolute;
    top: 10%;
    left: 5%;
}

.tpl-1 .title div {
    border: dashed 1px #ffffff;
    border-radius: 20px 0;
    padding: 10px 20px;
}

.tpl-1 .content {
    font-weight: bold;
    color: #ffffff;
    background-color: rgba(66, 186, 195, 0.8);
    border-radius: 0 20px;
    padding-left: 25px;
    padding-right: 25px;
    position: absolute;
    top: 25%;
    left: 5%;
    right: 22%;
}

.tpl-1 .content .pharmacy-item {
    border-bottom: solid 3px #ffffff;
    height: 125px;
    padding-top: 10px;
}

.tpl-1 .content .pharmacy-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.tpl-1 .content .date {
    width: 20%;
    vertical-align: top;
    display: inline-block;
}

.tpl-1 .content .pharmacy {
    width: 75%;
    vertical-align: top;
    display: inline-block;
}

.tpl-1 .content .pharmacy-name {
    color: #148891;
}

.tpl-1 .content .pharmacy-address {
    font-size: 0.7em;
}

.tpl-1 .distance {
    position: absolute;
    top: 25%;
    left: 80%;
    right: 5%;
}

.tpl-1 .distance-item {
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    background-color: #148891;
    border-radius: 20px 0;
    padding-top: 35px;
    padding-bottom: 35px;
    margin-bottom: 15px;
}

.tpl-1 .copyright {
    font-size: 0.35em;
    color: #253a7a;
    position: absolute;
    bottom: 35px;
    right: 35px;
    display: none;
}

@media (min-height: 800px) {
    .tpl-1 .content .pharmacy-item {
        height: 185px;
    }

    .tpl-1 .distance-item {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/* #endregion */

/* #region Template 2 */

.tpl-2 {
    font-family: GothamNarrow, Arial;
}

.tpl-2 .title {
    background: url(../Images/BonAirTitle.jpg) no-repeat;
    border-radius: 0;
    padding: 5px;
    position: absolute;
    top: 5%;
    left: 5%;
    right: 5%;
}

.tpl-2 .title div {
    border: none;
    padding: 15px 20px;
}

.tpl-2 .content {
    background-color: #253a7a;
    border-radius: 0;
}

.tpl-2 .content .pharmacy-item {
    border-width: 2px;
}

.tpl-2 .content .pharmacy-name {
    color: #00bbe8;
}

.tpl-2 .distance-item {
    background-color: #00bbe8;
    border-radius: 0;
}

.tpl-2 .copyright {
    display: block;
}

/* #endregion */

/* #region Template 3 */

.tpl-3 .title {
    background-color: #008cb5;
}

.tpl-3 .content {
    background-color: rgba(150, 188, 51, 0.8);
}

.tpl-3 .content .pharmacy-name {
    color: #008cb5;
}

.tpl-3 .distance-item {
    background-color: #008cb5;
}

/* #endregion */

/* #region Template 4 */

.tpl-4 .title {
    background-color: #b6c247;
}

.tpl-4 .content {
    background-color: rgba(0, 185, 176, 0.8);
}

.tpl-4 .content .pharmacy-name {
    color: #605035;
}

.tpl-4 .distance-item {
    background-color: #b6c247;
}

/* #endregion */

/* #region Template 5 */

.tpl-5 .title {
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    background-color: #148891;
    border-radius: 20px 0;
    padding: 5px;
    position: absolute;
    top: 3%;
    left: 7%;
	right: 7%;
}

.tpl-5 .title div {
    border: dashed 1px #ffffff;
    border-radius: 20px 0;
    padding: 10px 20px;
}

.tpl-5 .content {
	font-weight: bold;
	position: absolute;
    top: 15%;
    left: 7%;
    right: 7%;
}

.tpl-5 .content .pharmacy-item {
    height: 450px;
	position: relative;
}

.tpl-5 .content .date {
	font-size: 1.3em;
	color: #ffffff;
	background-color: #148891;
	border-radius: 20px 0;
	height: 125px;
	padding: 30px 25px;
	position: absolute;
    top: 0;
    left: 0;
    right: 74%;
}

.tpl-5 .content .pharmacy-name {
	font-size: 1.3em;
	text-align: center;
	line-height: 105px;
    color: #148891;
	background-color: rgba(66, 186, 195, 0.8);
	border-radius: 0 20px;
	height: 125px;
	padding: 5px 25px;
	position: absolute;
    top: 0;
    left: 28%;
    right: 0;
}

.tpl-5 .content .pharmacy-name span {
	line-height: normal;
	vertical-align: middle;
	display: inline-block;
}

.tpl-5 .content .pharmacy-address {
    font-size: 1em;
	text-align: center;
	color: #148891;
	background-color: rgba(66, 186, 195, 0.8);
	border-radius: 20px 0;
	padding: 20px;
	position: absolute;
    top: 32%;
    left: 0;
    right: 0;
}

.tpl-5 .distance {
	font-weight: bold;
    position: absolute;
    top: 16%;
    left: 7%;
    right: 7%;
	z-index: 10;
}

.tpl-5 .distance-item {
    height: 450px;
	position: relative;
}

.tpl-5 .distance-item .distance-km {
    font-size: 1.3em;
	text-align: center;
	color: #ffffff;
	background-color: rgba(66, 186, 195, 0.8);
	border-radius: 20px 0;
	padding: 20px;
	position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}

.tpl-5 .background-frame {
    border-width: 30px 50px 170px 50px;
}

.tpl-5 .copyright {
	display: none;
}

/* #endregion */

/* #region Portrait */

.portrait .title {
    font-size: 1.7em;
}

.portrait.tpl-1 .background-frame {
    display: none;
}

/* #endregion */

/* #region Lanscape LED */

.led.tpl-1 .title,
.led.tpl-1 .content,
.led.tpl-1 .distance-item {
    font-size: 0.6em;
}

.led.tpl-1 .content .pharmacy-item {
    height: 80px;
}

.led.tpl-1 .distance-item {
    padding-top: 20px;
    padding-bottom: 20px;
}

.led.tpl-1 .background-frame {
    display: none;
}

/* #endregion */

/* #region Portrait LED */

.portrait.led.tpl-1 .title,
.portrait.led.tpl-1 .content,
.portrait.led.tpl-1 .distance-item {
    font-size: 0.6em;
}

.portrait.led.tpl-1 .content .pharmacy-item {
    height: 135px;
}

.portrait.led.tpl-1 .content .date,
.portrait.led.tpl-1 .content .pharmacy {
    width: auto;
    display: block;
}

.portrait.led.tpl-1 .distance-item {
    padding-top: 35px;
    padding-bottom: 35px;
}

.portrait.led.tpl-1 .background-frame {
    display: none;
}

/* #endregion */

/* #region Preview */

.preview .tpl-1 .pharmacy-item {
    height: 95px;
}

.preview .tpl-1 .distance-item {
    padding-top: 25px;
    padding-bottom: 25px;
}

.preview .tpl-2 {
    font-size: 38px;
}

.preview .tpl-2 .distance-item {
    padding-top: 20px;
    padding-bottom: 20px;
}

.preview .tpl-5 .title {
	font-size: 1em;
}

.preview .tpl-5 .content .pharmacy-item,
.preview .tpl-5 .distance-item {
	height: 250px;
}

.preview .tpl-5 .content .date {
	font-size: 0.8em;
	height: 75px;
	padding: 25px 20px;
}

.preview .tpl-5 .content .pharmacy-name {
	font-size: 0.8em;
	line-height: 65px;
	height: 75px;
	padding: 5px 25px;
}

.preview .tpl-5 .content .pharmacy-address {
	font-size: 0.6em;
	padding: 15px;
}

.preview .tpl-5 .distance-item .distance-km {
	font-size: 0.8em;
	padding: 15px;
}

/* #endregion */