/* roboto-latin-100-italic*/
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 100;
  src:
    local('Roboto Thin Italic'),
    local('Roboto-ThinItalic'), 
    url(/static/media/roboto-latin-100-italic.f8b1df51.woff2) format('woff2'), 
    url(/static/media/roboto-latin-100-italic.f9e8e590.woff) format('woff'), 
    url(/static/media/roboto-latin-100-italic.a90b3053.ttf) format('truetype');
}
/* roboto-latin-100-normal*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 100;
  src:
    local('Roboto Thin'),
    local('Roboto-Thin'), 
    url(/static/media/roboto-latin-100-normal.7370c367.woff2) format('woff2'), 
    url(/static/media/roboto-latin-100-normal.5cb7edfc.woff) format('woff'), 
    url(/static/media/roboto-latin-100-normal.ff1e90ce.ttf) format('truetype');
}
/* roboto-latin-300-italic*/
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 300;
  src:
    local('Roboto Light Italic'),
    local('Roboto-LightItalic'), 
    url(/static/media/roboto-latin-300-italic.14286f3b.woff2) format('woff2'), 
    url(/static/media/roboto-latin-300-italic.4df32891.woff) format('woff'), 
    url(/static/media/roboto-latin-300-italic.51c5bffe.ttf) format('truetype');
}
/* roboto-latin-300-normal*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src:
    local('Roboto Light'),
    local('Roboto-Light'), 
    url(/static/media/roboto-latin-300-normal.ef7c6637.woff2) format('woff2'), 
    url(/static/media/roboto-latin-300-normal.b00849e0.woff) format('woff'), 
    url(/static/media/roboto-latin-300-normal.806854d4.ttf) format('truetype');
}
/* roboto-latin-400-italic*/
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src:
    local('Roboto Italic'),
    local('Roboto-Italic'), 
    url(/static/media/roboto-latin-400-italic.51521a2a.woff2) format('woff2'), 
    url(/static/media/roboto-latin-400-italic.fe65b833.woff) format('woff'), 
    url(/static/media/roboto-latin-400-italic.d4ad1feb.ttf) format('truetype');
}
/* roboto-latin-400-normal*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src:
    local('Roboto'),
    local('Roboto-Regular'), 
    url(/static/media/roboto-latin-400-normal.479970ff.woff2) format('woff2'), 
    url(/static/media/roboto-latin-400-normal.60fa3c06.woff) format('woff'), 
    url(/static/media/roboto-latin-400-normal.329ae1c3.ttf) format('truetype');
}
/* roboto-latin-500-italic*/
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src:
    local('Roboto Medium Italic'),
    local('Roboto-MediumItalic'), 
    url(/static/media/roboto-latin-500-italic.db4a2a23.woff2) format('woff2'), 
    url(/static/media/roboto-latin-500-italic.288ad9c6.woff) format('woff'), 
    url(/static/media/roboto-latin-500-italic.0a36c77f.ttf) format('truetype');
}
/* roboto-latin-500-normal*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src:
    local('Roboto Medium'),
    local('Roboto-Medium'), 
    url(/static/media/roboto-latin-500-normal.020c97dc.woff2) format('woff2'), 
    url(/static/media/roboto-latin-500-normal.87284894.woff) format('woff'), 
    url(/static/media/roboto-latin-500-normal.8c608256.ttf) format('truetype');
}
/* roboto-latin-700-italic*/
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src:
    local('Roboto Bold Italic'),
    local('Roboto-BoldItalic'), 
    url(/static/media/roboto-latin-700-italic.da0e7178.woff2) format('woff2'), 
    url(/static/media/roboto-latin-700-italic.81f57861.woff) format('woff'), 
    url(/static/media/roboto-latin-700-italic.4c13d18a.ttf) format('truetype');
}
/* roboto-latin-700-normal*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src:
    local('Roboto Bold'),
    local('Roboto-Bold'), 
    url(/static/media/roboto-latin-700-normal.2735a3a6.woff2) format('woff2'), 
    url(/static/media/roboto-latin-700-normal.adcde98f.woff) format('woff'), 
    url(/static/media/roboto-latin-700-normal.96559ffb.ttf) format('truetype');
}
/* roboto-latin-900-italic*/
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 900;
  src:
    local('Roboto Black Italic'),
    local('Roboto-BlackItalic'), 
    url(/static/media/roboto-latin-900-italic.ebf6d164.woff2) format('woff2'), 
    url(/static/media/roboto-latin-900-italic.28f91510.woff) format('woff'), 
    url(/static/media/roboto-latin-900-italic.a3f8594c.ttf) format('truetype');
}
/* roboto-latin-900-normal*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src:
    local('Roboto Black'),
    local('Roboto-Black'), 
    url(/static/media/roboto-latin-900-normal.9b3766ef.woff2) format('woff2'), 
    url(/static/media/roboto-latin-900-normal.bb1e4dc6.woff) format('woff'), 
    url(/static/media/roboto-latin-900-normal.22acb397.ttf) format('truetype');
}

.rpn-notification-holder {
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: 100000;
}

.rpn-notification-holder.top-left {
    left: 10px;
}

.rpn-notification-holder.top-middle {
    left: 50%;
    transform: translateX(-50%);
}

.rpn-notification-holder.top-right {
    right: 30px;
}

.rpn-notification-holder.bottom-left {
    left: 10px;
    bottom: 10px;
}

.rpn-notification-holder.bottom-middle {
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}

.rpn-notification-holder.bottom-right {
    right: 30px;
    bottom: 10px;
}

.rpn-notification-card {
    display: flex;
    flex-direction: column;
    width: 250px;
    margin-top: 15px; /* Safari, Chrome and Opera > 12.1 */ /* Firefox < 16 */ /* Internet Explorer */ /* Opera < 12.1 */
    animation: fadein 0.2s;
}

.rpn-notification-card-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    font-weight: bold;
    font-size: 11px;
    background-color: rgb(51, 51, 51);
    color: white;
    border-radius: 5px 5px 0 0;

}

.rpn-notification-card-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 10px 15px 10px;
    flex-wrap: wrap;
    background-color: rgb(59, 59, 59);
    color: white;
    border-radius: 0 0 5px 5px;
    justify-content: center;
    box-shadow: 0 5px 0px 0px rgb(0, 0, 0);
}

.rpn-notification-card-bottom span {
    padding: 3px 0;
}

.rpn-notification-card-bottom .subtitle {
    font-weight: bold;
    font-size: 12px;
}

.rpn-notification-card-bottom .message {
    font-size: 14px;
}

.rpn-notification-card-close {
    font-size: 10px;
    cursor: pointer;
    height: 100%;
}

.rpn-notification-card-top.light {
    background-color: rgb(240, 240, 240);
    color: black;
}

.rpn-notification-card-bottom.light {
    background-color: rgb(245, 245, 245);
    color: black;
    box-shadow: 0 5px 0px 0px rgb(218, 217, 217);
}

.rpn-notification-card-top.darkblue {
    background-color: #2d3542;
    color: white;
}

.rpn-notification-card-bottom.darkblue {
    background-color: #394357;
    color: white;
    box-shadow: 0 5px 0px 0px #1f2b42;

}

.rpn-notification-card-top.red {
    background-color: rgb(187, 37, 37);
    color: white;
}

.rpn-notification-card-bottom.red {
    background-color: #D32F2F;
    color: white;
    box-shadow: 0 5px 0px 0px rgb(145, 1, 1);
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */

/* Safari, Chrome and Opera > 12.1 */

/* Internet Explorer */

/* Opera < 12.1 */