/* Button.css */
.tpl-button {
display: inline-block;
position:relative;
padding: 4px 10px;
width:100%;
height:40px;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
line-height:1;
text-decoration:none;
}
/*
.tpl-button p{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
*/
.tpl-button-center > a, .tpl-button-left > a, .tpl-button-right > a{
height:40px;
width:100%;
color:white;
}
/* Choose where to align the button (left, right, center) */
.tpl-button-left{
display: flex;
justify-content: flex-start;
}
.tpl-button-center{
display: flex;
justify-content: center;
}
.tpl-button-right{
display: flex;
justify-content: flex-end;
}
.tpl-button-left,.tpl-button-right,.tpl-button-center{
align-items:center;
}
/*available colors*/
.tpl-button-red {
background-color:#b50014; /* taken from Citizen.css : --color-red-3*/
color:#fff;
}
.tpl-button-red:hover{
background-color:#c33242; /* --color-red-light-3 from Citizen.css */
}
.tpl-button-blue {
background-color: #143fbf;
color:#fff;
}
.tpl-button-green {
background-color: #52CF44;
color:#333;
}
.tpl-button-yellow {
background-color: #FFDA1F;
color:#333;
}
.tpl-button:hover{ /*colors other than red, which we use for Citizen, are automatically recalculated on a filter value*/
filter:brightness(110%) saturate(100%);
}
@media screen and (max-width:768px){
.tpl-button{
width:75%!important;
}
.tpl-button-left,.tpl-button-center,.tpl-button-right{
display: flex;
justify-content: center;
}
}