html,
body {
    margin: 0;
    padding: 0;
    background-color: #074185;
    font-family: 'Open Sans', sans-serif;
}

body {
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
}

#img-content {
    position: relative;
    overflow: hidden;
}

.left {
    flex: 1;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.right {
    flex: 0 0 340px;
    max-height: 100%;
    overflow: auto;
    padding: 20px 0;
}

.card {
    margin-top: 20px;
    padding: 0;
    background-color: white;
    max-width: 320px;
}

.card-title {
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.card-title-left {
    font-weight: 700;
    font-size: 13px;
}

.card-title-right {
    font-size: 13px;
}

.card-content {
    text-align: center;
}

.card img {
    max-width: 100%;
}

.img-content-left {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
}

.img-content-left img {
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
    height: 100px;
}

.webcam-img {
    width: 100%;
}

#temp {
    display: inline-block;
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    font-weight: 600;
}

#infos {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-size: 16px;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    color: white;
    line-height: 1.1;
}

.bg-minus-50 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-49 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-48 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-47 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-46 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-45 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-44 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-43 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-42 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-41 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-40 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-39 {
    background-color: #ff77ed;
    color: #FFFFFF;
}

.bg-minus-38 {
    background-color: #df45da;
    color: #FFFFFF;
}

.bg-minus-37 {
    background-color: #df45da;
    color: #FFFFFF;
}

.bg-minus-36 {
    background-color: #df45da;
    color: #FFFFFF;
}

.bg-minus-35 {
    background-color: #c647d1;
    color: #FFFFFF;
}

.bg-minus-34 {
    background-color: #c647d1;
    color: #FFFFFF;
}

.bg-minus-33 {
    background-color: #c647d1;
    color: #FFFFFF;
}

.bg-minus-32 {
    background-color: #a344c6;
    color: #FFFFFF;
}

.bg-minus-31 {
    background-color: #a344c6;
    color: #FFFFFF;
}

.bg-minus-30 {
    background-color: #a344c6;
    color: #FFFFFF;
}

.bg-minus-29 {
    background-color: #7740ba;
    color: #FFFFFF;
}

.bg-minus-28 {
    background-color: #7740ba;
    color: #FFFFFF;
}

.bg-minus-27 {
    background-color: #7740ba;
    color: #FFFFFF;
}

.bg-minus-26 {
    background-color: #5c44c2;
    color: #FFFFFF;
}

.bg-minus-25 {
    background-color: #5c44c2;
    color: #FFFFFF;
}

.bg-minus-24 {
    background-color: #5c44c2;
    color: #FFFFFF;
}

.bg-minus-23 {
    background-color: #4444c2;
    color: #FFFFFF;
}

.bg-minus-22 {
    background-color: #4444c2;
    color: #FFFFFF;
}

.bg-minus-21 {
    background-color: #4444c2;
    color: #FFFFFF;
}

.bg-minus-20 {
    background-color: #5162de;
    color: #FFFFFF;
}

.bg-minus-19 {
    background-color: #5162de;
    color: #FFFFFF;
}

.bg-minus-18 {
    background-color: #5162de;
    color: #FFFFFF;
}

.bg-minus-17 {
    background-color: #507de1;
    color: #FFFFFF;
}

.bg-minus-16 {
    background-color: #507de1;
    color: #FFFFFF;
}

.bg-minus-15 {
    background-color: #507de1;
    color: #FFFFFF;
}

.bg-minus-14 {
    background-color: #5190de;
    color: #FFFFFF;
}

.bg-minus-13 {
    background-color: #5190de;
    color: #FFFFFF;
}

.bg-minus-12 {
    background-color: #5190de;
    color: #FFFFFF;
}

.bg-minus-11 {
    background-color: #54a4ff;
    color: #FFFFFF;
}

.bg-minus-10 {
    background-color: #54a4ff;
    color: #FFFFFF;
}

.bg-minus-9 {
    background-color: #54a4ff;
    color: #FFFFFF;
}

.bg-minus-8 {
    background-color: #77c9fd;
    color: #FFFFFF;
}

.bg-minus-7 {
    background-color: #77c9fd;
    color: #FFFFFF;
}

.bg-minus-6 {
    background-color: #77c9fd;
    color: #FFFFFF;
}

.bg-minus-5 {
    background-color: #94e4fe;
    color: #000000;
}

.bg-minus-4 {
    background-color: #94e4fe;
    color: #000000;
}

.bg-minus-3 {
    background-color: #94e4fe;
    color: #000000;
}

.bg-minus-2 {
    background-color: #aafffe;
    color: #000000;
}

.bg-minus-1 {
    background-color: #aafffe;
    color: #000000;
}

.bg-minus-0 {
    background-color: #aafffe;
    color: #000000;
}

.bg-plus-0 {
    background-color: #aafffe;
    color: #000000;
}

.bg-plus-1 {
    background-color: #aaffaa;
    color: #000000;
}

.bg-plus-2 {
    background-color: #aaffaa;
    color: #000000;
}

.bg-plus-3 {
    background-color: #aaffaa;
    color: #000000;
}

.bg-plus-4 {
    background-color: #c3ff5d;
    color: #000000;
}

.bg-plus-5 {
    background-color: #c3ff5d;
    color: #000000;
}

.bg-plus-6 {
    background-color: #c3ff5d;
    color: #000000;
}

.bg-plus-7 {
    background-color: #defc4e;
    color: #000000;
}

.bg-plus-8 {
    background-color: #defc4e;
    color: #000000;
}

.bg-plus-9 {
    background-color: #defc4e;
    color: #000000;
}

.bg-plus-10 {
    background-color: #fff83b;
    color: #000000;
}

.bg-plus-11 {
    background-color: #fff83b;
    color: #000000;
}

.bg-plus-12 {
    background-color: #fff83b;
    color: #000000;
}

.bg-plus-13 {
    background-color: #ffdc36;
    color: #000000;
}

.bg-plus-14 {
    background-color: #ffdc36;
    color: #000000;
}

.bg-plus-15 {
    background-color: #ffdc36;
    color: #000000;
}

.bg-plus-16 {
    background-color: #ffcd30;
    color: #000000;
}

.bg-plus-17 {
    background-color: #ffcd30;
    color: #000000;
}

.bg-plus-18 {
    background-color: #ffcd30;
    color: #000000;
}

.bg-plus-19 {
    background-color: #ffb230;
    color: #000000;
}

.bg-plus-20 {
    background-color: #ffb230;
    color: #000000;
}

.bg-plus-21 {
    background-color: #ffb230;
    color: #000000;
}

.bg-plus-22 {
    background-color: #ff9b25;
    color: #000000;
}

.bg-plus-23 {
    background-color: #ff9b25;
    color: #000000;
}

.bg-plus-24 {
    background-color: #ff9b25;
    color: #000000;
}

.bg-plus-25 {
    background-color: #ff781e;
    color: #000000;
}

.bg-plus-26 {
    background-color: #ff781e;
    color: #000000;
}

.bg-plus-27 {
    background-color: #ff781e;
    color: #000000;
}

.bg-plus-28 {
    background-color: #ff5c0c;
    color: #FFFFFF;
}

.bg-plus-29 {
    background-color: #ff5c0c;
    color: #FFFFFF;
}

.bg-plus-30 {
    background-color: #ff5c0c;
    color: #FFFFFF;
}

.bg-plus-31 {
    background-color: #ff2110;
    color: #FFFFFF;
}

.bg-plus-32 {
    background-color: #ff2110;
    color: #FFFFFF;
}

.bg-plus-33 {
    background-color: #ff2110;
    color: #FFFFFF;
}

.bg-plus-34 {
    background-color: #da0f0f;
    color: #FFFFFF;
}

.bg-plus-35 {
    background-color: #da0f0f;
    color: #FFFFFF;
}

.bg-plus-36 {
    background-color: #da0f0f;
    color: #FFFFFF;
}

.bg-plus-37 {
    background-color: #b30d0d;
    color: #FFFFFF;
}

.bg-plus-38 {
    background-color: #b30d0d;
    color: #FFFFFF;
}

.bg-plus-39 {
    background-color: #b30d0d;
    color: #FFFFFF;
}

.bg-plus-40 {
    background-color: #8b0a0a;
    color: #FFFFFF;
}

.bg-plus-41 {
    background-color: #8b0a0a;
    color: #FFFFFF;
}

.bg-plus-42 {
    background-color: #8b0a0a;
    color: #FFFFFF;
}

.bg-plus-43 {
    background-color: #610f0f;
    color: #FFFFFF;
}

.bg-plus-44 {
    background-color: #610f0f;
    color: #FFFFFF;
}

.bg-plus-45 {
    background-color: #610f0f;
    color: #FFFFFF;
}

.bg-plus-46 {
    background-color: #400b0b;
    color: #FFFFFF;
}

.bg-plus-47 {
    background-color: #400b0b;
    color: #FFFFFF;
}

.bg-plus-48 {
    background-color: #400b0b;
    color: #FFFFFF;
}

.bg-plus-49 {
    background-color: #222222;
    color: #FFFFFF;
}

.bg-plus-50 {
    background-color: #222222;
    color: #FFFFFF;
}