/* ---------- FONTS ---------- */
/* Google font imports */
@import url('https://fonts.googleapis.com/css2?family=Dangrek&family=Open+Sans:wght@600&family=Playfair+Display:wght@600&family=Roboto&display=swap');

.dangrek-regular {
  font-family: "Dangrek", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.open-sans {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.playfair-display {
  font-family: "Playfair Display", "Times New Roman", Times, serif;
  font-weight: 600;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Sticky Footer */
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* Back button */
.back-button {
    font-size: 1.5rem;
    margin-left: 2rem;
    float: left;
    color: #333A3F;
    margin-top: 1rem;
}

/* Make textareas not resizable */
textarea {
    resize: none !important;
}

/* Code excerpt from Fred Genkin https://codepen.io/FredGenkin/pen/eaXYGV */
:root {
    --star-size: 60px;
    --star-color: #fff;
    --star-background: #fc0;
}

.Stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: var(--star-size);
    font-family: Times;
    line-height: 1;
}

.Stars::before {
    content: '★★★★★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Hidden labels so they are still accessibile to screenreaders */
.hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

/* ----------- Materialize changes ---------- */
/* Check boxes in select element */
[type="checkbox"]:checked+span:not(.lever):before {
    border-right: 2px solid #D02847;
    border-bottom: 2px solid #D02847;
}


/* ---------- base.html ---------- */
main {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1003%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(255%2c 243%2c 211%2c 1)'%3e%3c/rect%3e%3cpath d='M420 46.67C386.32 48.98 400.29 92.77 383.76 140C359.46 209.43 327.15 224.2 338.33 280C345.27 314.62 381.7 320.83 420 320.83C446.25 320.83 446.93 303.47 467.42 280C516.93 223.27 514.42 220.72 560 160.42C567.33 150.72 573.24 149.36 573.24 140C573.24 133.1 567.64 132.56 560 127.9C491.02 85.89 474.44 42.93 420 46.67' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M840 104.31C822.65 104.31 817.25 120.51 817.25 140C817.25 177.92 816.38 219.13 840 219.13C875.65 219.13 935.79 171.5 935.79 140C935.79 114.09 881.92 104.31 840 104.31' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M946.4 0C980.17 22.51 964.35 93.33 980 93.33C995.39 93.33 975.81 21.78 1008.47 0C1045.81 -24.89 1064.24 0 1120 0C1173.93 0 1207.11 -30.4 1227.87 0C1254.92 39.6 1206.44 72.68 1215.61 140C1222.5 190.57 1227.92 235.79 1260 235.79C1303.65 235.79 1357.65 196.6 1367.06 140C1377.25 78.7 1289.21 42.48 1299.2 0C1305.68 -27.52 1349.6 0 1400 0C1468.11 0 1528.5 -30.86 1536.22 0C1546 39.14 1433.85 85.9 1435 140C1435.74 174.99 1512.53 141.56 1540 178.18C1565.03 211.56 1540 229.09 1540 280C1540 350 1540 350 1540 420C1540 490 1574.19 524.19 1540 560C1507.37 594.19 1467.8 567.68 1406.36 560C1397.8 558.93 1402.61 542.5 1400 542.5C1397.49 542.5 1404.26 558.98 1396.11 560C1334.26 567.73 1328.05 560 1260 560C1190 560 1190 560 1120 560C1050 560 1050 560 980 560C917.14 560 893.1 587.72 854.29 560C823.1 537.72 846.2 460 840 460C833.83 460 860.14 538.15 829.55 560C790.14 588.15 764.78 560 700 560C630 560 630 560 560 560C556.5 560 556.37 560.92 553 560C486.37 541.92 481.29 522 420 522C396.82 522 407.47 553.64 384.05 560C337.47 572.64 332.02 560 280 560C230 560 214.27 583.56 180 560C144.27 535.44 175.69 468.07 140 463.75C85.69 457.18 40.1 550.75 0 538.22C-29.9 528.88 0 479.11 0 420C0 350 0 350 0 280C0 210 0 210 0 140C0 70 -35 35 0 0C35 -35 70 0 140 0C210 0 210 0 280 0C350 0 350 0 420 0C490 0 490 0 560 0C630 0 630 0 700 0C770 0 770 0 840 0C893.2 0 910.17 -24.15 946.4 0' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M560 404.78C554.27 404.78 547.5 410.52 547.5 420C547.5 476.47 554.54 536.67 560 536.67C565.45 536.67 569.33 477.22 569.33 420C569.33 411.27 565.19 404.78 560 404.78' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M980 371.88C929.67 371.88 861.54 400.5 861.54 420C861.54 438.56 925.2 448 980 448C996.85 448 1004.84 435.56 1004.84 420C1004.84 397.5 1001.32 371.88 980 371.88' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M38.18 0C80.71 56.2 107.09 70.46 105.95 140C104.8 210.46 44.32 206.72 33.6 280C23.84 346.72 75.95 361.17 65 420C59.15 451.39 21.27 460.44 0 460.44C-11.23 460.44 0 440.22 0 420C0 350 0 350 0 280C0 210 0 210 0 140C0 70 -15 55 0 0C4.09 -15 27.74 -13.8 38.18 0' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M166.81 140C144.59 80.88 151.77 41.98 185.71 0C208.36 -28.02 232.86 0 280 0C329.15 0 365.63 -28.34 378.3 0C396.92 41.66 368.72 73.32 342.59 140C319.57 198.74 319.16 250.83 280 250.83C231.27 250.83 191.73 206.29 166.81 140' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M560 84.69C506.87 40.79 451.11 23.66 451.11 0C451.11 -18.68 505.56 0 560 0C630 0 630 0 700 0C770 0 770 0 840 0C858.2 0 876.4 -7.43 876.4 0C876.4 10.41 855.01 15.26 840 35.69C803.56 85.26 799.99 84.53 773.5 140C741.65 206.69 718.66 211.72 723.33 280C728.24 351.72 778.46 346.37 792.65 420C805.45 486.37 807.22 514.81 777.31 560C760.89 584.81 738.65 560 700 560C657.54 560 630.94 586.43 615.08 560C588.94 516.43 631.6 485.52 616 420C604.06 369.87 589.41 373.4 560 328.7C543.35 303.4 523.87 304.16 523.87 280C523.87 256.48 543.25 257.59 560 233.33C591.58 187.59 620.54 182.78 620.54 140C620.54 108.46 591.58 110.79 560 84.69' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1033.2 140C1051.11 70.16 1035.93 51.4 1067.8 0C1079.33 -18.6 1093.9 0 1120 0C1145.24 0 1163.48 -18.55 1170.49 0C1189.94 51.45 1161.2 71.77 1172.93 140C1185.27 211.77 1187.69 214.84 1218.64 280C1231.23 306.5 1239.32 323.33 1260 323.33C1280.68 323.33 1279.71 300.68 1301.36 280C1349.71 233.8 1342.29 204.59 1400 189.58C1461.61 173.56 1491.2 186.43 1540 217.95C1561.2 231.64 1540 248.98 1540 280C1540 350 1540 350 1540 420C1540 458.89 1547.34 497.78 1540 497.78C1532.12 497.78 1538.15 446.38 1509.57 420C1468.15 381.77 1450.56 368.57 1400 368.57C1368.96 368.57 1363.29 387.99 1346.38 420C1312.73 483.7 1333.08 504.58 1298.89 560C1289.89 574.58 1279.45 560 1260 560C1190 560 1190 560 1120 560C1050 560 1050 560 980 560C952.86 560 925.71 570.34 925.71 560C925.71 546.16 954.75 537.71 980 511.64C1022.54 467.71 1057.75 471.22 1061.29 420C1065.75 355.4 1003.25 352.25 996 280C989.2 212.25 1015.21 210.16 1033.2 140' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1400 55C1382.71 55 1369.2 18.47 1369.2 0C1369.2 -9.03 1384.6 0 1400 0C1420.81 0 1441.62 -10.35 1441.62 0C1441.62 17.15 1418.92 55 1400 55' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M342.55 420C342.55 394.47 382.32 369.44 420 369.44C453.55 369.44 485 394.5 485 420C485 445.78 453.59 472 420 472C382.36 472 342.55 445.75 342.55 420' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M225.45 560C225.45 533.47 252.35 477.65 280 477.65C308 477.65 336.76 533.73 336.76 560C336.76 574.91 308.38 560 280 560C252.73 560 225.45 574.65 225.45 560' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M0 120.91C3.05 120.91 11.35 130.45 11.35 140C11.35 149.55 3.05 159.09 0 159.09C-2.62 159.09 0 149.55 0 140C0 130.45 -2.62 120.91 0 120.91' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M241.28 140C233.03 75.75 240.48 60.23 257.14 0C259.84 -9.77 268.57 0 280 0C291.91 0 302.27 -10.18 303.83 0C312.98 59.82 310.5 72.14 301.41 140C298.58 161.1 293.39 177.92 280 177.92C263.33 177.92 244.46 164.71 241.28 140' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M560 41.48C531.73 41.48 506.67 11.59 506.67 0C506.67 -9.15 533.34 0 560 0C597.34 0 634.67 -9.67 634.67 0C634.67 11.07 595.73 41.48 560 41.48' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M667.84 140C667.84 108.77 684.4 77.37 700 77.37C715.36 77.37 729.75 108.76 729.75 140C729.75 170.59 715.35 201.03 700 201.03C684.4 201.03 667.84 170.6 667.84 140' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1103.2 140C1108.04 92.92 1113.21 46.67 1120 46.67C1126.73 46.67 1126.41 93.22 1130.24 140C1135.96 209.89 1110.23 220.7 1139.09 280C1175.11 354.03 1199.74 343.15 1260 406.67C1266.15 413.15 1271.91 412.3 1271.91 420C1271.91 433.7 1273.96 448.4 1260 449.47C1198.01 454.23 1185.6 445.26 1120 431.67C1114.47 430.53 1118.67 425.87 1117.74 420C1106.67 350.04 1099.65 350.37 1096 280C1092.38 210.37 1096.04 209.59 1103.2 140' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1380.91 280C1380.91 271.3 1387.59 264.24 1400 262.5C1467.13 253.1 1479.6 250.18 1540 257.73C1549.6 258.93 1540 268.87 1540 280C1540 308.83 1559.84 335.22 1540 337.65C1489.84 343.79 1467.64 321.65 1400 297.14C1388.09 292.83 1380.91 288.62 1380.91 280' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M417.02 420C417.02 419.02 418.55 418.06 420 418.06C421.29 418.06 422.5 419.02 422.5 420C422.5 420.99 421.29 422 420 422C418.55 422 417.02 420.99 417.02 420' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M662.67 420C667.52 383.57 680.62 353.33 700 353.33C719.88 353.33 736.7 383.07 741.18 420C749.24 486.41 742.55 500.57 725.07 560C721.96 570.57 712.54 560 700 560C686.23 560 675.52 571.48 672.46 560C656.86 501.48 653.75 486.91 662.67 420' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M270.91 560C270.91 555.58 275.39 546.27 280 546.27C284.67 546.27 289.46 555.62 289.46 560C289.46 562.49 284.73 560 280 560C275.46 560 270.91 562.44 270.91 560' stroke='rgba(255%2c 228%2c 184%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1003'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
}

/* Navigation bar */
.nav-wrapper {
    background-color: #FFF3D3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

nav .brand-logo {
    color: #D02847;
    max-height: 64px !important;
    overflow: hidden;
}

h1 {
    text-decoration: none;
    font-size: 2.1rem;
    line-height: 64px;
    font-weight: 400;
    margin: 0;
    display: inline-block;
}

.site-logo {
    height: 100%;
    max-height: 3rem;
    margin-top: 10px;
}

nav ul a{
    color: #333A3F;
    font-size: 1.2rem;
}

.sidenav li>a {
    color: #D02847;
}

/* Burger menu */
.fa-bars {
    color: #D02847;
    font-size: 2rem;
}

#mobile-demo a {
    color: #D02847;
}

#mobile-demo {
    background-color: #FFF3D3;
}

/* Footer */
.page-footer {
    background-color: #FFF3D3;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.footer-logo {
    color: #D02847;
    font-size: 2em;
}

#developer {
    text-align: center;
    color: #333A3F;
}

#developer span {
    font-weight: bolder;
}

#contact-links {
    display: flex;
    justify-content: space-around;
    margin-bottom: 0;
}

#contact-links li{
    display: inline;
}

.contact-link i{
    font-size: 2rem;
    color: #333A3F;
}

.contact-link i:hover{
    color:#D02847;
    transition-duration: 0.5s;
}

main {
    margin: 0;
    top: 0;
    padding: 0; 
}

/* ---------- home.html ---------- */
#hero-image{
    background: url(/static/img/home_hero_image.webp) no-repeat center/cover;
    overflow: hidden;
    height: max(480px, 70vh);
    width: 100%;
    justify-content: center;
    
}

.hero-text  {
    color: #f5f5f5;
    text-shadow: 2px 2px 4px;
    text-shadow: 
        -2px -2px 4px rgba(0, 0, 0, 0.7),  
        2px -2px 4px rgba(0, 0, 0, 0.7),
        -2px  2px 4px rgba(0, 0, 0, 0.7),
        2px  2px 4px rgba(0, 0, 0, 0.7);
    display: block;
    font-size: 4.5rem;
}

.hero-button {
    background-color: #f5f5f5;
    color: #333A3F;
    margin-left: 20px;
    margin-right: 20px;
}

.hero-button:hover, .hero-button:focus {
    background-color: #D02847;
    color: #FFF3D3;
}

#homepage-message {
    color: #D02847;
    text-shadow: -1px -1px 0 #333A3F, 1px -1px 0 #333A3F, -1px 1px 0 #333A3F, 1px 1px 0 #333A3F;
    text-align: center;
    font-size: 2.5rem;
    max-width: 90%;
    margin: 0 auto;
}

/* ---------- signup.html ---------- */
/* Signup title */
#signup-title {
    text-align: center;
    margin-top: 10px;
}

#signup-title img{
    height: 100px;
}

/* Error display */
.signup-error {
    color: #D02847;
    margin-bottom: 15px;
    text-align: center;
    max-width: max(30%, 250px);
    margin: 0 auto;
    font-weight: bolder;
}

/* Signup form */
#signup-form {
    max-width: min(400px, 85%);
    margin: 0 auto;
}

#signup-form i {
    color: #333A3F;
    font-size: 1.5rem;
    padding: 0 10px 0 5px;
}

#signup-form label {
    color: #333A3F;
    font-size: 1.5rem;
}

#signup-form input {
    margin-bottom: 20px;
}

#signup-form #password {
    margin-bottom: 0 !important;
}

#signup-form span {
    color: #333A3F;
    margin-bottom: 20px;
}

.confirm-password {
    margin-top: 20px;
}

#signup-button {
    font-size: 1.5rem;
    background-color: #D02847;
    color: #FFF3D3;
    cursor: pointer;
}

/* Success message */
.toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    max-width: 80%;
    text-align: center;
    color:white;
    background-color: green;
}

/* ---------- login.html ---------- */
/* Login title */
#login-title {
    text-align: center;
}

#login-title img {
    height: 100px;
}

/*Login form */
#login-form {
    max-width: min(300px, 85%);
    margin: 0 auto;
}

#login-form label {
    color: #333A3F;
    font-size: 1.5rem;
}

#login-form input {
    margin-bottom: 20px;
}

#login-button {
    font-size: 1.5rem;
    background-color: #D02847;
    color: #FFF3D3;
    cursor: pointer;
}

#login-form p {
    text-align: center;
}

#login-form p a {
    text-transform: none;
    font-size: 1.1rem;
    background-color: #D02847;
    color: #FFF3D3;
    box-shadow: none;
    border: 2pt solid black;
}

.form-error-messages {
    font-size: 0.8rem;
    font-weight: bolder;
    color: #D02847;
    margin-bottom: 10px;
}

/* ---------- profile.html ---------- */
/* Page content */
.profile-content {
    width: min(1200px, 80%);
    height: auto;
    margin-top: 20px;
}

/* Flag display */
.country-flag {
    height: 45px;
    width: 60px;
    float: right;
}

/* Verified parent display */
.parent-check {
    margin-top: 10px;
    float: right;
}

.parent-check span {
    color:#333A3F;
}

.parent-check i {
    color: #008000;
    font-size: 1.5rem;
    padding: 0;
}

/* Profile picture */
.profile-picture {
    overflow: hidden;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-picture img {
    height: auto;
    width: 100%;
    border-radius: 50%;
}

/* Profile name */
.profile-name {
    text-align: center;
}

/* Profile about me */
.profile-about-me {
    color: #333A3F;
    max-height: 300px;
    overflow: auto;
}

.profile-about-me span{
    font-weight: bolder;
    font-size: 1.5rem;
}

/* Edit and delete buttons */
.profile-buttons-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;
}

.profile-buttons {
    font-size: 1.1rem;
    background-color: #f5f5f5;
    color: #333A3F;
}

.profile-buttons:hover, .profile-buttons:focus {
    background-color: #D02847;
    color: #FFF3D3;
    font-size: 1.2rem;
}

/* Reviews */
.toy-reviewed {
    font-size: 1.3rem;
    height: 4rem;
    height: auto;
}

.toy-reviewed p a {
    color: blue;
}

.profile-review-content {
    max-height: 200px;
    overflow: auto;
}

.profile-review-content,
.review-content-box p {
    overflow-x: hidden !important;
}

/* ---------- edit_profile.html ---------- */
/* Edit profile title */
#edit-profile-title {
    text-align: center;
    color:#333A3F;
}

/* Edit profile form */
#edit-profile-form {
    max-width: min(600px, 85%);
    margin: 0 auto; 
}

#edit-profile-form label {
    color: #333A3F;
    font-size: 1rem;
}

.edit-profile-input {
    margin-top: 20px;
}

.edit-profile-input textarea {
    height: 200px;
    overflow: auto; 
    background-color: #FFF3D3;
}

.edit-profile-input .switch {
    text-align: center;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.switch label input[type=checkbox]:checked+.lever:after {
    background-color: #D02847;
}

.switch label input[type=checkbox]:checked+.lever {
    background-color: #F6D36A;
}

.edit-profile-buttons {
    display: flex;
    justify-content: space-around;
}

.edit-profile-button {
    font-size: 1.5rem;
    background-color: #D02847;
    color: #FFF3D3;
    cursor: pointer;
    margin-bottom: 50px;  
    border: 1px solid black;
    padding: 5px;  
    border-radius: 5px;
}

/* ---------- change_password.html ---------- */
/* Change password title */
#change-password-title {
    text-align: center;
}

/* Helper text */
.change-password-helper-text-container {
    max-width: min(600px, 85%);
    margin: 0 auto;
    text-align: center;
}

.change-password-helper-text {
    color: #333A3F;
}

/* Change password form */
#password-form {
    max-width: min(600px, 85%);
    margin: 0 auto; 
}

#password-form label {
    color: #333A3F;
    font-size: 1rem;
}

#change-password-button {
    font-size: 1.5rem;
    background-color: #D02847;
    color: #FFF3D3;
    cursor: pointer;
    margin-bottom: 50px;    
}

.password-errors {
    margin-bottom: 5px;
}

/* ---------- toys.html ---------- */
/* Page title */
#toys-title {
    text-align: center;
    margin: 10px;
}

#toys-title img {
    height: 100px;
    margin-top: 10px;
}

/*Page layout */
#toys-page {
    width: 95%;
    max-width: 2000px;
}

/* Toy cards */
.toys-card {
    background-color: rgba(255, 243, 223, 0.6);
    height: 400px;
}

.toy-description {
    height: 150px !important;
    overflow: auto;
}

.card-image {
    margin-top:10px;
}

.toy-image-link {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.toys-image {
    width: auto !important;
    max-height: 200px;
}

.toys-toy-title {
    color: #333A3F;
    max-width: 80%;
}

.toys-toy-title h2 a {
    text-decoration: none;
    color:#D02847;
}

.individual-toys-star-rating {
    font-size: 1.5rem;
    z-index: 1;
    padding: 5px 10px;
    border-radius: 10px;
    border: 2px solid #333A3F;
    background-color: #D02847;
    position: absolute;
    z-index: 2;
    right: 2px;
    top: 5px;
    cursor: default;
}

.no-reviews {
    font-size: 1rem;
    position: absolute;
    z-index: 2;
    padding: 5px 10px;
    border: 2px solid #333A3F;
    border-radius: 10px;
    color: #333A3F;
    background-color: #FFF3D3;
    right: 2px;
    top: 2px;
    cursor: default;
}

.toys-buttons-div{
    display: flex;
    justify-content: space-evenly;
}

.toys-buttons {
    background-color: #f5f5f5;
    color: #333A3F;
}

.toys-buttons:hover, .toys-buttons:focus {
    background-color: #D02847;
    color: #FFF3D3;
}

.card-reveal {
    background-color: #D02847 !important;
}

.close-toy {
    top:0;
    color: #f5f5f5;
}

.card-title {
    margin-top: 10px;
}

.toys-toy-title {
    max-height: 75px;
    height: 75px;
    overflow-y: auto;
}

.toys-card-title a {
    max-width: 80%;
    display: inline-block;
}

.card-title .row .s2 {
    margin-top: 10px;
}

.card-action {
    bottom: 0;
}

.toys-toy-title-reveal {
    color: #f5f5f5;
}

.toy-reveal-description {
    color: #f5f5f5;
}

.add-toy-button {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 15%;
}

.add-toy-button i{
    color: #D02847;
}

.add-toy-button p{
    margin: 0 auto;
    color: #f5f5f5;
}

.back-to-top-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 243, 223, 0.6);
    height: 400px;
    margin-top: 7.5px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
    text-align: center;
}

.back-to-top-container a {
    color: #f5f5f5;
    border: 1pt solid #333A3F;
    padding: 10px 20px;
    border-radius: 20px;
    background-color: #333A3F;
}

/* ---------- add_toy.html ---------- */
/* Add toy title */
#add-toy-title {
    text-align: center;
}

#add-toy-title img {
    height: 100px;
}

/* Add toy form */
#add-toy-form {
    max-width: min(600px, 85%);
    margin: 0 auto; 
}

#add-toy-form label {
    color: #333A3F;
    font-size: 1rem;
}

.add-toy-input {
    margin-top: 20px;
}

.add-toy-input #description {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    overflow: auto;
    height: 200px;
}

.add-toy-input textarea {
    background-color: #FFF3D3;
}

.select-wrapper>ul>li>span {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    color:#D02847;
    background-color: #FFF3D3;
}

.select-wrapper>ul>li>span:hover {
    color:#333A3F;
    font-weight: bolder;
    background-color: #FFF3D3;
}

#add-toy-button {
    font-size: 1.5rem;
    background-color: #D02847;
    color: #FFF3D3;
    cursor: pointer;
    margin-bottom: 50px;    
}

.form-required {
    color: #D02847;
}

/* ---------- edit_toy.html ---------- */
/* Edit toy title */
#edit-toy-title {
    display: flex;
    justify-content: center;
    text-align: center;
}

#edit-toy-title img {
    height:50px;
}

#edit-toy-title span {
    color: #333A3F;
    padding-left: 15px;
}

/* Edit toy form */
#edit-toy-form {
    max-width: min(600px, 85%);
    margin: 0 auto; 
}

#edit-toy-form label {
    color: #333A3F;
    font-size: 1rem;
}

.edit-toy-input {
    margin-top: 20px;
}

.edit-toy-input #description {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    overflow: auto;
    height: 200px;
    background-color: #FFF3D3;
}

#edit-toy-button {
    font-size: 1.5rem;
    background-color: #D02847;
    color: #FFF3D3;
    cursor: pointer;
    margin-bottom: 50px;    
}

/* ---------- individual_toy.html ---------- */
/* Individual toy title */
#individual-toy-title {
    text-align: center;
    color:#333A3F;
}

/* Toy content */
.toy-row {
    margin: 0 auto;
    max-width: 800px;
}

.toy-image {
    max-height: 70vh !important;
    width: auto !important;
    max-width: 85%;
    margin: 0 auto;
}

.toy-information-display .card-image {
    background-color: rgba(255, 243, 211, 0.55);
    padding: 10px;
}

.individual-toy-star-rating {
    font-size: 2rem;
    position: relative;
    z-index: 1;
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid #333A3F;
    background-color: #D02847;
}

.review-strength {
    text-align: center;
    margin: 0;
    color:#333A3F;
    font-size: 1rem;
    font-weight: bolder;
    position: relative;
    z-index: 1;
    text-shadow: 
        -2px -2px 4px #F5F5F5,  
        2px -2px 4px #F5F5F5,
        -2px  2px 4px #F5F5F5,
        2px  2px 4px #F5F5F5;
}

.individual-toy-no-reviews {
    font-size: 1rem;
    position: relative;
    z-index: 2;
    padding: 5px 10px;
    border: 2px solid #333A3F;
    border-radius: 10px;
    color: #333A3F;
    background-color: #FFF3D3;
}

/* Toy table information */
.individual-toy-information {
    background-color: #D02847;
    border-color: #333A3F;
}

.toy-col-1 {
    color:#f5f5f5;
    width: 30%;
    font-weight: bolder;
}

.toy-col-2 {
    color:#f5f5f5;
}

.toy-col-1, .toy-col-2 {
    border-top: 2pt solid #FFF3D3;
    border-bottom: 2pt solid #FFF3D3;
}

/* Toy buttons */
.individual-toy-buttons-div{
    display: flex;
    justify-content: space-evenly;
    margin-top: 25px;
}

.individual-toy-buttons {
    background-color: #f5f5f5;
    color: #333A3F;
}

.individual-toy-buttons:hover, .individual-toy-buttons:focus {
    background-color: #FFF3D3;
    font-size: 1.1rem;
}

/* Individual toy reviews */
.show-reviews{
    margin: 0 auto;
    max-width: min(800px, 85%);
    position: relative;
}

#toy-review-title {
    text-align: center;
    color: #D02847;
    font-size: 4rem;
}

.review-row {
    border: 1pt solid #F6D36A;
    box-shadow: 5px 5px #F6D36A;
    background-color: #FFF3D3;
}

.review-author {
    font-size: 1.3rem;
    height: 4rem;
}

.review-author p a{
    color: blue;
}

.review-rating {
    text-align: right;
    height: 4rem;
}

.review-rating-stars {
    font-size: 1.5rem;
    margin: auto 0;
    margin-top: 1rem;
    padding: 5px 10px;
    border-radius: 10px;
    border: 2px solid #333A3F;
    background-color: #D02847;
    margin-left: -100px !important;
}

.review-name-divider {
    border-top: 1px solid #F6D36A;
}

.review-content-box {
    overflow: auto;
    max-height: 300px;
}

.carousel {
    height: 250px;
}

.carousel-divider {
    border: 2px solid #D02847;
    border-radius: 1px;
    width: 50%;
}

.also-liked-title {
    margin-bottom: 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
}

.carousel-toy {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.carousel-item {
    height: 225px !important;
    width: 225px !important;
    text-align: center;
}

.carousel-name-container {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: relative;
    max-height: 200px;
    overflow: auto;
}

.liked-toy-link {
    display: block;
    color: #FFF3D3;
    font-size: 1.5rem;
    max-height: 225px;
    overflow-y: auto;
}

.review-divider {
    margin-bottom: 14px;
    border: 2px dashed #D02847;
    width: 100%;
}

/* Toy review buttons */
.review-buttons {
    margin-bottom: 10px;
    text-align: center;
}

.review-toy-buttons-div{
    display: flex;
    justify-content: space-evenly;
    margin-top: 25px;
}

.review-toy-buttons {
    background-color: #f5f5f5;
    color: #333A3F;
}

.review-toy-buttons:hover, .review-toy-buttons:focus {
    background-color: #D02847;
    color: #FFF3D3;
    font-size: 1.1rem;
}

/* ---------- add_review.html ---------- */
/* Add review title */
#add-review-title {
    display: flex;
    justify-content: center;
    text-align: center;
}

#add-review-title img {
    height:50px;
}

#add-review-title span {
    color: #333A3F;
    padding-left: 15px;
}

/* Add review form */
#add-review-form {
    max-width: min(600px, 85%);
    margin: 0 auto; 
}

#add-review-form label {
    color: #333A3F;
    font-size: 1rem;
}

.add-review-input {
    margin-top: 20px;
}

.add-review-input textarea {
    background-color: #FFF3D3;
    height: 200px;
}

.submit-failure {
    font-size: 0.8rem;
    font-weight: bolder;
    color: #D02847;
    margin-bottom: 10px;
}

#add-review-button {
    font-size: 1.5rem;
    background-color: #D02847;
    color: #FFF3D3;
    cursor: pointer;
    margin-bottom: 50px;    
}

/* ---------- edit_review.html ---------- */
/* Edit review title */
#edit-review-title {
    text-align: center;
    margin: 10px;
}

#edit-review-title img {
    height: 50px;
    margin-top: 10px;
}

/* Edit review form */
#edit-review-form {
    max-width: min(600px, 85%);
    margin: 0 auto; 
}

#edit-review-form label {
    color: #333A3F;
    font-size: 1rem;
}

.edit-review-input {
    margin-top: 20px;
}

.edit-review-input textarea {
    background-color: #FFF3D3;
    height: 200px;
}

#edit-review-button {
    font-size: 1.5rem;
    background-color: #D02847;
    color: #FFF3D3;
    cursor: pointer;
    margin-bottom: 50px;    
}

/* ---------- Delete confirmations ---------- */
/* Modal message title */
.confirm-message {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #D02847;
}

.modal-text {
    text-align: center;
    font-size: 1.5rem;
    color: #333A3F;
}

/* Modal buttons */
.confirm-delete-yes,
.confirm-delete-no {
    text-align: center;
    width: 100%;
    height: 100%;
    border: 1px solid black;
    position: absolute;
    border-radius: 10px;
    color: #FFF3D3;
    background-color: #D02847;
    font-weight: bold;
    padding-top: 5px !important;
}

.confirm-delete-yes:hover, .confirm-delete-yes:focus {
    font-size: 1.4rem;
    background-color: #333A3F;
    color: #f5f5f5;
}

.confirm-delete-no:hover, .confirm-delete-no:focus {
    font-size: 1.4rem;
    background-color: #f5f5f5;
    color: #333A3F;
}

/* Modal styling */
.delete-modal {
    background-color: #FFF3D3;
    border: 1px solid #D02847;
    box-shadow: 5px 5px #D02847;
}

.modal-footer {
    background-color: #FFF3D3 !important;
    border-top: 1px solid #F6D36A;
}

.confirm-delete-button-container {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;
    padding: 0;
}

.modal-overlay {
    background-color: #FFF3D3;
    opacity: 0.7 !important;
}

/* ---------- Search and sort ---------- */
/* Search row in toys */
.search-row {
    width: 95%;
    max-width: 2000px;
}

#search-label {
    color : black !important;
}

/* Toys search bar */
.toys-search {
    margin-top: 20px !important;
}

.toy-search-text {
    display: inline !important;
    width: 70% !important;
    max-width: 500px !important;
}

.toy-search-button {
    display: inline !important;  
    width:25% !important;
    max-width: 90px;
    font-size: 1rem;
    background-color: #D02847;
    color: #FFF3D3;
    cursor: pointer;
    border-radius: 5px;
}

.search-form input {
    background-color: #fff !important;
    border-radius: 5px !important;
    padding-left:20px !important;
}

.toy-search-button:hover, .toy-search-button:focus {
    background-color: #D02847;
    color: #FFF3D3;
    font-weight: bolder;
}

/* Sort forms */
.sort-form-toys {
    width: 50%;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.sort-form-toy,
.sort-form-profile {
    margin-bottom: 15px;
}

.sort-form-toys label,
.sort-form-toy label,
.sort-form-profile label {
    color: #333A3F;
}

/* ---------- 403.html, 404.html, 500.html ---------- */
/* Error title */
.title-error .fa-ban,
.title-error .fa-question,
.title-error .fa-server {
    font-size: 8rem;
    color: #D02847;
}

.title-error{
    text-align: center;
}

/* Error message */
.message-error{
    text-align: center;
}

/* Redirect button */
.redirect-button {
    font-size: 1.5rem;
    background-color: #D02847;
    color: #FFF3D3;
    cursor: pointer;
    border-radius: 5px;
}

.redirect-button:hover, .redirect-button:focus {
    font-size: 1.7rem;
    background-color: #D02847;
    color: #FFF3D3;
}

/*---------- MEDIA QUERIES ---------- */
/* Smallest screens */
@media screen and (max-width: 401px) {
    /* Header logo size */
    .site-logo{
        height:20px;
    }

    /* Reduce Homepage button sizes */
    .hero-button {
        font-size: smaller;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Reduce homepage message size */
    #homepage-message {
        font-size: 1.5rem;
    }

    /* Toy search button size */
    .toy-search-button {
        font-size: 1rem;
        padding: 0;
    }

    /* Carousel sizes */
    .carousel-item {
        height: 150px !important;
        width: 150px !important;
        text-align: center;
    }

    .liked-toy-link {
        max-height: 150px !important;
    }
}

/* Small screens */
@media screen and (max-width: 650px) {
    /* Reduce homepage message size */
    #homepage-message {
        font-size: 1.5rem;
    }

    /* Reduce page title sizes */
    #toys-title img {
        height: 70px;
    }

    #edit-toy-title span img,
    #add-review-title span img {
        height: 40px;
    }

    #edit-toy-title span,
    #add-review-title span {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 420px) {
    /* Make them smaller */
    .individual-toy-buttons {
        font-size: 0.9rem;
        margin: 0;
        padding-left: 3px;
        padding-right: 3px;
    }

    /* Edit profile buttons */
    .edit-profile-button {
        width: 45%;
        font-size: 1rem;
        text-align: center;
    }

    /* Change password title */
    #change-password-title {
        font-size: 2rem;
    }
}

/* Materialize cut-off */
@media screen and (max-width: 600px) {
    /* Toy sort layout */
    .toy-sort-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    /* Confirm delete modals */
    .confirm-message {
        margin: 5px auto;
    }

    .modal-text {
        font-size: 1rem;
    }

    .modal-content {
        padding-bottom: 5px !important;
    }

    .confirm-delete-no,
    .confirm-delete-yes {
        width: auto !important;
    }

    /*Review ratings*/
    .review-rating {
        text-align: center;
    }

    .review-rating-stars {
        margin: 0 !important;
        float: none;
        text-align: center;
    }
}


/* Medium screens */
@media screen and (max-width: 900px) {
    /* Reduce page title sizes */
    #signup-title img,
    #login-title img,
    #add-toy-title img {
        height: 70px;
    }

    /* Toy search button placement */
    .search-form {
        text-align: center;
    }
}

/* Reviews buttons */
@media screen and (max-width: 322px) {
    .review-buttons a {
        margin-top: 10px;
    }
}