@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Tajawal');

:root {
    --en-font: 'Roboto', sans-serif;
    --ar-font: 'Tajawal', sans-serif;
    --chart-font: 'Roboto', 'Tajawal', sans-serif;
    
    --font-base-en: 18pt;
    --font-base-ar: 16pt;

    --tiny-spacing: 10px;
    --small-spacing: 20px;
    --large-spacing: 30px;
    --huge-spacing: 40px;
    --grid-spacing: 15px;

    --primary-font-color: #e6af2e;
    --alt-font-color: #6e5eff;
    --quantity-color: black;
    
    --gauage-unfilled-color: #e0e2db;
    --gauage-filled-color: #e6af2e;
    --gauage-cutout-perc: 85;
    --gauage-reading-size: 3rem;
    --gauage-units-size: 2rem;

    --opacity: 0.85;

    --chart-font-color: #e0e2db;
    --chart-gridlines-color: rgba(255,255,255,0.5);
    --chart-series-color: #e6af2e;
    --month-chart-font-size: 52;

}

html {
    box-sizing: border-box;
    height: 100%;
    font-size: var(--font-base);
}

*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

i {
    font-style: normal;
}

ul {
    list-style: none;
}

body {
    height: 100%; 
    
}

.wrapper {
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
}
.preview {
    width: 1920px;
    height: 1080px;
    top: 50%;
    left: 50%;
    transform:  translate(-50%, -50%) scale(0.5);
    
}

.en {
    font-family: var(--en-font);
    direction: ltr;
    --align-left: left;
    --align-right: right;
    --transform-center: translate(-50%, -50%);

    --tiny-font: calc(var(--font-base-en) * 1);
    --small-font: calc(var(--font-base-en) * 1.5);
    --large-font: calc(var(--font-base-en) * 2);
    --huge-font: calc(var(--font-base-en) * 2.5);
    
}
.ar {
    font-family: var(--ar-font);
    direction: rtl;
    --align-left: right;
    --align-right: left;
    --transform-center: translate(50%, -50%);
    --tiny-font: calc(var(--font-base-ar) * 1);
    --small-font: calc(var(--font-base-ar) * 1.5);
    --large-font: calc(var(--font-base-ar) * 2);
    --huge-font: calc(var(--font-base-ar) * 2.5);
}

.l-stack {
    display: flex;
}

.l-stack--vertical {
    flex-direction: column;
}

/*
    Helpers
*/
.h-full-height {
    height: 100%;
}

.h-full-width {
    width: 100%;
}
.h-text-align-center {
    text-align: center;
}

.h-anchor-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.h-anchor-bottom-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.h-large-margin-top {
    margin-top: var(--large-spacing);
}

.h-small-margin-top {
    margin-top: var(--small-spacing);
}

.h-small-margin-top-bottom {
    margin-top: var(--small-spacing);
    margin-bottom: var(--small-spacing);
}

.h-large-margin-bottom {
    margin-bottom: var(--large-spacing);
}

.h-grid-sep-top {
    margin-top: var(--grid-spacing);
}

.h-grid-sep-bottom {
    margin-bottom: var(--grid-spacing);
}

.en .h-grid-sep-right {
    margin-right: var(--grid-spacing);
}

.ar .h-grid-sep-right {
    margin-left: var(--grid-spacing);
}

.h-grid-sep-left-right {
    margin-left: var(--grid-spacing);
    margin-right: var(--grid-spacing);
}

.h-grid-sep-top-bottom {
    margin-top: var(--grid-spacing);
    margin-bottom: var(--grid-spacing);
}

.h-tiny-font {
    font-size: var(--tiny-font);
}

.h-small-font {
    font-size: var(--small-font);
}

.h-large-font {
    font-size: var(--large-font);
}

.h-huge-font {
    font-size: var(--huge-font);
}

.h-middle-align-block {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
/* 
    Components
*/

.c-card {
    color: var(--primary-font-color);
    background: rgba(0,0,0,var(--opacity));
    position: relative;
    padding: var(--tiny-spacing);
    opacity: 0;
    transition: opacity 1.0s;
}

.c-card.visible, .c-card.always-visible {
    opacity: 1;
}
.c-card--centered-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.c-card--no-bg {
    background: transparent;
}

.c-card--sponser {
    background: rgba(255,255,255,0.7);
}

.c-card__image {
    max-width: 100%;
    max-height: 100%;
}

.c-card--special {
    background: rgba(110, 94, 255, 0.7);
    color: white;
}
.c-header {
    display: flex;
    color: var(--primary-font-color);
    justify-content: space-between;
}

.c-title {
    font-size: var(--huge-font);
    font-weight: bold;
}

.c-subtitle {
    font-size: var(--large-font);
    font-weight: bold;
}

.c-subsubtitle {
    font-size: var(--small-font);
    font-weight: bold;
}

.c-weather__icon {
    font-size: var(--huge-font);
}

.c-weather__temp {
    font-size: var(--huge-font);
}

.c-weather__condition {
    font-size: var(--small-font);
}

.c-datetime {
    text-align: center;
}

.c-datetime__time {
    font-size: var(--huge-font);

}

.c-datetime__date {
    font-size: var(--small-font);
}

.c-charts {
    display: flex;
    flex: 1;
}

.c-gauge__wrapper {

    position: relative;
}

.c-gauge__reading {
    font-size: var(--gauage-reading-size);
    vertical-align: middle;
}

.c-gauage__units {
    font-size: var(--gauage-units-size);
    vertical-align: middle;
}

.c-quants {
    display: flex;
}

.c-equiv {
    text-align: center;
}
.c-equiv__verb {
    font-size: var(--large-font);
    font-weight: bold;
}
.ar .c-equiv__verb {
    margin-top: var(--tiny-spacing);
}
.c-equiv__quantity {
    font-size: var(--huge-font);
    font-weight: bold;
    color: white;
    font-family: 'roboto';
}

.c-equiv__equal {
    color: var(--primary-font-color);
}
.c-equiv__quantity--small {
    font-size: var(--small-font);
}

.c-equiv__units {
    font-size: var(--small-font);
}

.c-equiv__units--tiny {
    font-size: var(--tiny-font);
}

.c-equiv__extra {
    font-size: var(--tiny-font);
}

.c-card__img {
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.c-days-table {
}

.c-days-table  td.cell {
    width: 30px;
    height: 30px;
    position: relative;
}

.c-days-table td.cell > div {
    border-radius: 50%;
    width: 100%;
    height: 100%;
}
.c-days-table td.date {
    text-align: var(--align-right);
    font-size: var(--tiny-font);
    padding-left: var(--tiny-spacing);
    padding-right: var(--tiny-spacing);
    font-weight: bold;
}

.c-colorbar {
    height: 30px;
    position: relative;
    border-radius: 15px;
    background: linear-gradient(90deg, hsla(42, 0%, 54%, 0.7), hsla(42, 100%, 54%, 0.8));
}

.ar .c-colorbar {
    background: linear-gradient(270deg, hsla(42, 0%, 54%, 0.7), hsla(42, 100%, 54%, 0.8));
}
.c-colorbar > div {
    position: absolute;
    top: 50%;
    transform: var(--transform-center);
    font-size: var(--tiny-font);
    color: black;
    font-weight: bold;

}