:root{
    --primary-color-light:white;
    --secondary-color-light:rgb(209, 209, 209);
    --ternary-color-light:rgb(178, 178, 178);

    --bg-principal-dark:#52A5E0;
    --bg-hover-button-dark:#3698dd;
    --bg-title-dark:#EFF3F5;
    --bg-contenido-dark:#C8CDD0;
    --bg-claro-light:#A0A7AC;
    --bg-border-dark:#2A3B47;
    --bg-contenedor-dark:#212E36;
    --bg-body-dark:#192229;
    --bg-rd:rgb(238, 128, 128);
    --bg-hover-rd:rgb(239, 105, 105);
    --bg-gn:rgb(93, 182, 98);
    --bg-hover-gn:rgb(48, 183, 55);
    --bg-yw:rgb(238, 226, 142);
    --bg-hover-yw:rgb(238, 222, 103);

    --color-principal-dark:#52A5E0;
    --color-title-dark:#EFF3F5;
    --color-contenido-dark:#C8CDD0;
    --color-claro-light:#A0A7AC;
    --color-border-dark:#2A3B47;
    --color-contenedor-dark:#212E36;
    --color-body-dark:#192229;

    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.394);
}


body{
    background-color: var(--bg-body-dark);
}

*{
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.iframe{
    background-color: white;
}

.cardPrevRide{
    width: 90%;
    position: relative;
}

.cardPrevRide>button{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 2px;
    background-color: var(--bg-rd);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 90;
}

.cardPrevRide>button>img{
    width: 100%;
}

.cardPrevRide>button:hover{
    background-color: var(--bg-hover-rd);
}

.cardPrevRide__actions{
    left: 10px;
    top:10px;
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.cardPrevRide__actions>span,.cardPrevRide__actions>a{
    text-decoration: none;
    font-size: 14px;
    background-color: var(--bg-contenedor-dark);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    border-radius: 2px;
    box-shadow: var(--box-shadow);
    padding: 10px 10px;
    color: var(--color-title-dark);
    cursor: pointer;
}

.cardPrevRide__actions>span>img,.cardPrevRide__actions>a>img{
    width: 30px;
    height: 30px;
}