{
    padding            : 20px;
    font-size          : 18px;
    line-height        : 1.4em;
    position           : relative;
    max-width          : 1000px;
    margin             : 0 auto;
    /* border          : solid 2px #628e93;
    border-radius      : 10px;
    background-color   : #dbeff6; */
}

.bg-green {
    background-color: #dbeff6;
}

button.ris-close-dialog {
    position          : absolute;
    top               : 0;
    right             : 0;
    width             : 30px;
    height            : 30px;
    padding           : 0;
    background        : transparent;
    z-index           : 999999;
    box-shadow        : none;
    border            : none;
    border-radius     : 0;
    -webkit-transition: all ease 0.3s;
    transition        : all ease 0.3s;
    cursor            : pointer;
    margin            : -30px -30px 0 0;
}

button.ris-close-dialog::before,
button.ris-close-dialog::after {
    position  : absolute;
    content   : '';
    display   : inline-block;
    width     : 16px;
    height    : 2px;
    outline   : 1px solid transparent;
    left      : 7px;
    background: #fff;
}

button.ris-close-dialog::before {
    transform: rotateZ(-45deg);
}

button.ris-close-dialog::after {
    transform: rotateZ(45deg);
}


button.ris-close-dialog:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

a {
    color          : rgb(0, 98, 255);
    text-decoration: none;
}

/* .align-m {
    display    : flex;
    align-items: center;
}

.align-c {
    display        : flex;
    justify-content: center;
} */

* {
    box-sizing: border-box;
}

.error {
    color: #dd0000;
}

h3 {
    font-size     : 20px;
    text-align    : center;
    padding-bottom: 0em;
    margin        : 0;
}

.flex {
    display: flex;
}

.flex.gap {
    gap: 10px;
}

.align-c {
    justify-content: center
}

.align-m {
    align-content: center;
    align-items  : center;
}

.spaced {
    justify-content: space-between;
}

.p-sm {
    padding: 20px;
}

.px-sm {
    padding-left : 20px;
    padding-right: 20px;
}

.pt-sm {
    padding-top: 20px;
}

label {
    font-size: 18px;
}

input[type=radio],
input[type=checkbox] {
    appearance        : none;
    -webkit-appearance: none;
    -moz-appearance   : none;
    box-shadow        : none;
    margin            : 0 5px 0 0;
    color             : #fff;
    cursor            : pointer;
    clear             : both;
    outline           : none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
    box-sizing        : border-box;
    width             : 24px;
    height            : 24px;
    vertical-align    : middle;
    box-shadow        : none;
    border            : 2px solid #399eaa;
    display           : inline-block;
    position          : relative;
}

input[type=radio] {
    background-color: #eee;
    border-radius   : 50%;
}

input[type=radio]:before {
    content         : '';
    display         : block;
    position        : absolute;
    top             : 3px;
    right           : 3px;
    bottom          : 3px;
    left            : 3px;
    border-radius   : 50%;
    background-color: #fff;
}

input[type=radio]:checked:before {
    background-color: #333;
}

button,
input[type=text],
select {
    display                : flex;
    height                 : 40px;
    align-items            : center;
    appearance             : none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing : antialiased;
    border-radius          : 4px;
    font-family            : -apple-system, "Helvetica Neue", sans-serif;
    font-weight            : normal;
    font-size              : 16px;
    box-shadow             : none;
    padding                : 0 10px;
}

button.inline {
    appearance      : none;
    cursor          : pointer;
    display         : inline-block;
    margin          : 0;
    outline         : none;
    background-image: none;
    background-color: transparent;
    border          : none;
    color           : rgb(0, 98, 255);
    text-decoration : none;
    box-shadow      : none;
    text-shadow     : none;
    height          : auto;
    font-size       : inherit;
    font-weight     : bold;
    flex-grow       : 0;
    flex-basis      : unset;
}

input[type=text],
select {
    flex-grow       : 2;
    flex-basis      : 200px;
    background-color: #fff;
    color           : #4a4a4a;
    border          : 2px solid rgba(0, 0, 0, 0.4);
}

button {
    /* text-transform     : uppercase; */
    /* letter-spacing     : 1px; */
    /* flex-grow       : 1; */
    flex-basis      : 200px;
    cursor          : pointer;
    background-color: #1b4a50;
    color           : #fff;
    border          : none;
    justify-content : center;
}

select {
    background-image   : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAMAAACJrC6lAAAAElBMVEUAAAD///+ampqcnJydnZ2dnZ2R/6zGAAAABXRSTlMAAAEBAa21bVEAAAA/SURBVHjalc9RCgAgCERBs/b+V04MsVgJXOhreEgyvnOWZ32GJoP4dizmdGh9G/O0Qhydv5q9Ny05+va/aQ3eBz0BWHmtb2cAAAAASUVORK5CYII=);
    background-repeat  : no-repeat;
    background-position: right center;
    background-size    : 23px 9px;
    cursor             : pointer;
    margin             : 0;
    outline            : none;
    padding            : 0 30px 0 10px;
}

.border-top {
    border-top: solid 2px #399eaa;
}

.border-left {
    border-left: solid 2px #399eaa;
}

/* details.options summary {
    margin: 0 0 .5rem 0;
}

details.options summary::after {
    content       : 'add filter';
    line-height   : 1em;
    padding       : 5px 10px;
    border        : solid 2px #399eaa;
    border-radius : 4px;
    min-width     : 160px;
    text-align    : center;
    text-transform: uppercase;
    font-size     : .75em;
    cursor        : pointer;
}

details[open].options summary::after {
    content: 'remove filter';
} */

#ris-progress {
    width           : 30%;
    height          : 3px;
    border-radius   : 0px;
    border          : none;
    position        : relative;
    overflow        : hidden;
    background-color: #37a6d2;
    margin          : 1rem auto;
    display         : none;
}

#ris-progress:after {
    display         : block;
    position        : absolute;
    content         : '';
    top             : 0px;
    left            : -30%;
    width           : 30%;
    height          : 100%;
    background-color: #ffffff;
    animation       : loading 1s linear infinite;
    z-index         : 99999;
}

ul.ris-cards {
    list-style: none;
    padding   : 0;
}

.ris-column {
    display       : flex;
    flex-direction: column;
}

.stretch-w {
    min-width: 0;
    display  : flex;
    width    : 100%;
}

.stretch-h {
    min-height    : 0;
    display       : flex;
    height        : 100%;
    flex-direction: column;
}

.scrollable {
    overflow-y: auto;
}

ul.ris-cards>li {
    margin          : 0 0 2rem 0;
    border          : solid 2px #618e93;
    text-align      : left;
    padding         : 2rem 2rem 4rem 2rem;
    position        : relative;
    border-radius   : 5px;
    background-color: #f3fcff;
}

.ris-title {
    font-size     : 1.5em;
    line-height   : 1.2em;
    font-weight   : bold;
    /* padding    : 0; */
    color         : #1b4a50;
}

.ris-title svg {
    height: 30px;
    width : 30px;
}

ul.ris-cards>li button.ris-compare {
    border       : none;
    border-radius: 5px 0 0 0;
    padding      : 0 20px;
    position     : absolute;
    bottom       : 0;
    right        : 0;
    font-size    : 14px;
    height       : 30px;
}

ul.ris-cards>li button.ris-compare[disabled] {
    opacity: .6;
    cursor : not-allowed;
}

@keyframes loading {
    from {
        left : -30%;
        width: 30%;
    }

    50% {
        width: 40%;
    }

    70% {
        width: 70%;
    }

    80% {
        left: 50%;
    }

    95% {
        left: 120%;
    }

    to {
        left: 100%;
    }
}


dialog {
    border          : none;
    /* border-radius: 0.5rem; */
    position        : fixed;
    height          : 90vh;
    width           : 80vw;
    max-width       : 1200px;
    overflow        : visible;
    padding         : 0;
}

dialog .dialog-content {
    position: absolute;
    left    : 10px;
    right   : 10px;
    top     : 10px;
    bottom  : 10px;
    overflow: auto;
    padding : 2rem;
}

dialog::backdrop {
    background: rgba(60, 60, 60, 0.9);
}

.sticky-bottom.fixed {
    position        : fixed;
    height          : auto;
    padding         : 20px;
    left            : 0;
    right           : 0;
    bottom          : 0;
    background-color: #dbeff6;
    border-top      : solid 2px #628e93;
}

hr {
    display: block;
    margin : .5em 0;
    height : 0;
    border : 1px solid #628e93;
}

details>summary {
    padding        : 0 0 0 1rem;
    border         : none;
    cursor         : pointer;
    list-style     : none;
    text-align     : right;
    margin-bottom  : 0px;
    transition     : margin 150ms ease-out;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-weight    : bold;
    color          : rgb(0, 98, 255);
    text-transform : uppercase;
}

/* details>summary:hover {
    border-bottom: solid 2px #555;
} */

details[open]>summary {
    margin-bottom: 10px;
}

details[open] summary~* {
    animation: sweep .5s ease-in-out;
}

details>summary::before {
    content: attr(data-open) '';
}

details[open]>summary::before {
    content: attr(data-close) '';
}

details+div.content {
    box-sizing: border-box;
    max-height: 0;
    overflow  : hidden;
    padding   : 0 10px;
    transition: max-height 400ms ease-out, border 0ms 400ms linear;
}

details[open]+div.content {
    max-height: 800px;
    transition: max-height 400ms ease-out, border 0ms linear;
}

ul.ris-columns {
    list-style     : none;
    display        : flex;
    flex-wrap      : wrap;
    width          : 100%;
    padding        : 0;
    margin         : 0;
    justify-content: center;
}

ul.ris-columns li {
    flex-grow : 1;
    flex-basis: 50%;
    width     : 50%;
}


ul.items {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

ul.items li {
    padding: 0 20px;
}

ul.items li div {
    border          : solid 1px #1b4a50;
    border-radius   : 3px;
    padding         : 5px 60px 5px 20px;
    cursor          : pointer;
    overflow        : hidden;
    position        : relative;
    background-color: #fff;
}

ul.items li div::after {
    content         : '×';
    display         : flex;
    position        : absolute;
    top             : 0;
    right           : 0;
    bottom          : 0;
    width           : 40px;
    background-color: #1b4a50;
    color           : #fff;
    justify-content : center;
    align-items     : center;
    line-height     : 1em;
}

*.hiding {
    display: none;
}