.tdd-panel * {		
box-sizing: border-box;
}
.tdd-panel {
background: #ffffff;
width: 100%;
padding: 0;				
box-sizing: border-box;
overflow: hidden;
font-size: 0.95rem;
line-height: 0.8rem;
} .tdd-sidebar.thin .tdd-half {
width: 25% !important;
}
.tdd-sidebar.thin .tdd-panel {
display: flex;
}
.tdd-sidebar.thin.page-container {
min-height: 132.6px;
}
.tdd-sidebar.thin .innerPanel {
display: flex;
justify-content: center;
align-items: center;
gap: 3%;
}
.home .tdd-sidebar.thin .innerPanel, .home .tdd-sidebar.thin .tdd-tiles {
width: 50% !important;
}
.home .tdd-sidebar.thin .innerPanel {
width: 75%;
}
.prescription-countdown {
width: 20%;
}
.prescription-countdown .innerPanel {
width: 100%;
padding-bottom: 23px;
flex-direction: column;
}
.ec-button img {
display: block;
height: 100%;
object-fit: cover;
}
body:not(.home) .tdd-sidebar .tdd-tiles {
width: 80%;
}
.tdd-sidebar.thin .tdd-tiles {
flex-wrap: nowrap;
} 
.tdd-sidebar.thin .tilting-card-wrapper, .tilting-card-content {
max-height: none !important;
height: 100% !important;
}
.ec-first {
display: initial;
}
.ec-alt {
display: none;
}
.tdd-half {
width: 50%;
float: left;
}
.tdd-half:nth-child(even) {
clear: both;
}
.tdd-panel br {
clear: both;
display: none;
}
.tdd-panel .innerPanel {
width: 100%;
background-color: #1e5494;
background-size: auto 100%;
color: #ffffff;
text-align: center;
box-sizing: border-box !important;
line-height: 1.1em;
}
.tdd-panel .innerPanel img {
padding: 3px;
}
.tdd-panel .pink { background-color: #ca7a9b; }
.tdd-panel .blue { background-color: #7fbdba; }
.tdd-panel .green { background-color: #9790c4; }
.tdd-panel .magenta { background-color: #84bd86; }
.tdd-panel .innerText {
text-align: center;
font-size: 0.9em;
width: 100%;
}
.tdd-panel .timepanel {
margin: 10px auto 0;
background: url(//www.theguildhallsurgery.co.uk/tdd/scripts/images/pa-time.gif) no-repeat;
width: 222px;
height: 43px;
}
.tdd-panel .timepanel div {
float: left;
text-align: center;
color: #666666;
height: 36px;
margin-top: 3px;
line-height: 36px;
font-size: 1.2em;
}
.tdd-panel .timepanel .day { width: 69px; margin-left: 4px; }
.tdd-panel .timepanel .date { width: 37px; margin-left: 2px; }
.tdd-panel .timepanel .month { width: 65px; margin-left: 2px; }
.tdd-panel .timepanel .ampm { width: 37px; margin-left: 2px; }
.tdd-panel .tdd-button {		  
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-image: linear-gradient(45deg, #007fd5, #6cc4fd)!important;	
background-size: 100% 100%;
color: #fff!important;
padding: 8px 17px;
display: inline-block;
margin: 3px 0px;
transition: 250ms;
}
.tdd-panel .tdd-button:hover {
filter: brightness(0.85);
transform: translateY(3px);
text-decoration: none;
}
.tdd-noborder {
padding: 0px;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
background: transparent;
border: none;
}
#sidebar > div > div > * {
display: block;
margin-bottom: 20px !important;
}
.tdd-tiles {
display: flex;
flex-wrap: wrap;
} .tilting-card-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
position: relative;
max-height: 150px;
cursor: pointer;
}
.tilting-card-wrapper:hover {
z-index: 100;
text-decoration: none !important;
}
.tilting-card-content {
--perspective: 500px;
--rotateX: 0;
--rotateY: 0;
--angle: 20deg;
grid-column: 1 / -1;
grid-row: 1 / -1;
display: grid;
place-content: center;
text-align: center;
box-shadow: var(--shadow);
aspect-ratio: 1 / 1;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 250ms ease;
background-image: linear-gradient(225deg, #015fb8 40%, #5b99d5);
color: #fff !important;
padding: 5px;
user-select: none;
color: var(--color-white);
text-decoration: none;
width: 100%;
font-size: 14px;
}
.thin .tilting-card-content {
max-height: 120px;
}
.tilting-card-content img {
margin-bottom: 13px;
}
.tilting-card-content > * {
margin: auto;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
z-index: 2;
}
.mouse-position-tracker:nth-child(1):hover ~ .tilting-card-content {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.mouse-position-tracker:nth-child(2):hover ~ .tilting-card-content {
--rotateX: var(--angle);
}
.mouse-position-tracker:nth-child(3):hover ~ .tilting-card-content {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.mouse-position-tracker:nth-child(4):hover ~ .tilting-card-content {
--rotateY: calc(var(--angle) * -1);
}
.mouse-position-tracker:nth-child(6):hover ~ .tilting-card-content {
--rotateY: var(--angle);
}
.mouse-position-tracker:nth-child(7):hover ~ .tilting-card-content {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.mouse-position-tracker:nth-child(8):hover ~ .tilting-card-content {
--rotateX: calc(var(--angle) * -1);
}
.mouse-position-tracker:nth-child(9):hover ~ .tilting-card-content {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
} .mouse-position-tracker:nth-of-type(3n -2) {
grid-column: 1 / 2;
} .mouse-position-tracker:nth-of-type(3n -1) {
grid-column: 2 / 3;
} .mouse-position-tracker:nth-of-type(3n) {
grid-column: 3 / 4;
} .mouse-position-tracker:nth-child(n + 1):nth-child(-n + 3) {
grid-row: 1 / 2;
} .mouse-position-tracker:nth-child(n + 4):nth-child(-n + 6) {
grid-row: 2 / 3;
} .mouse-position-tracker:nth-child(n + 7):nth-child(-n + 9) {
grid-row: 3 / 4;
}
.home .tdd-panel .innerPanel {
width: 50%;
}
.tdd-panel .innerPanel .innerText {
font-size: 0.85em;
padding: 0 8px;
line-height: 1.5;
}
.tdd-panel .innerPanel .timepanel {
margin-top: 6px;
width: 100%;
display: flex;
background-color: #1e5494;
gap: 3px;
padding: 3px;
height: fit-content;
background-image: none;
}
.tdd-panel .innerPanel .timepanel .date, .tdd-panel .innerPanel .timepanel .ampm {
width: 20%;
margin: 0;
}
.tdd-panel .innerPanel .timepanel .day, .tdd-panel .innerPanel .timepanel .month {
width: 30%;
margin: 0;
}
.tdd-panel .innerPanel .timepanel > div {
background-color: #ffffff;
font-size: 1em;
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
}
.tdd-panel .innerPanel .tdd-button-white {
color: #ffffff !important;
background-color: #c32d5a;
font-size: 0.85em;
padding: 3px;
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.prescription-countdown .innerPanel .innerText {
line-height: 1.2 !important;
}
.prescription-countdown .innerPanel .timepanel {
margin-top: 0;
}
.prescription-countdown .innerPanel .timepanel > div {
font-size: 0.9em;
font-weight: 500;
height: 30px;
line-height: 30px;
}
@media only screen and (max-width: 1200px) {
#sidebar, .left-items {
width: 100% !important;
}
.tdd-half {
width: 25% !important;
}
.tdd-panel {
display: flex;
}
.innerPanel {
width: 40% !important;
}
.home .tdd-tiles {
flex-wrap: nowrap;
width: 100% !important;
}
.tilting-card-wrapper, .tilting-card-content {
max-height: none;
height: 100%;
}
.ec-first {
display: none;
}
.ec-alt {
display: initial;
}
.tdd-externals {
display: flex !important;
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
height: 405px;
box-sizing: initial;
}
.tdd-externals > a {
width: calc(99% - 240px) !important;
}
.tdd-externals > div {
width: fit-content !important;
margin: 0 0 0 1% !important;
}
.tdd-externals > a, .tdd-externals > a img {
height: 100%;
}
.home .tdd-sidebar .tdd-flex .innerPanel {
width: 66.666% !important;
}
.tdd-sidebar .tdd-flex .tilting-card-wrapper {
width: 33.333% !important;
}
.tdd-panel .innerPanel .innerText {
line-height: 1.2;
}
.tdd-panel .innerPanel img {
width: 65%
}
.prescription-countdown {
width: 100%;
}
}
@media only screen and (max-width: 900px) {
.tdd-panel {
display: block;
}
.innerPanel {
display: flex;
justify-content: center;
align-items: center;
gap: 3%;
}
.home .tdd-tiles {
flex-wrap: wrap;
}
.innerPanel, .tdd-tiles {
width: 100% !important;
}
.tdd-controls > * {
display: block;
}
.tilting-card-wrapper, 
.tilting-card-content, .ec-button {
max-height: 140px;
}
.ec-button img {
width: 100%;
}
.ec-first {
display: initial;
}
.ec-alt {
display: none;
}
.tdd-externals {
justify-content: center;
}
.tdd-externals > a, .tdd-externals > a img {
width: auto !important;
}
}
@media only screen and (max-width: 600px) {
.tdd-tiles {
flex-wrap: wrap;
}
.tdd-tiles > a.tdd-half {
width: 33.333% !important;
}
.innerPanel {
flex-direction: column;
}
}
@media only screen and (max-width: 500px) {
.tdd-externals {
flex-direction: column !important;
height: fit-content;
align-items: center;
}
.tdd-panel .timepanel {
width: 222px !important;
}
.tdd-externals > a, .tdd-externals > a img {
height: auto;
}
.tdd-externals > div {
margin-top: 20px !important;
}
.ec-first {
display: initial;
}
.ec-alt {
display: none;
}
}