* {
    color: #1b1b1b;
}
/*** Standard Element Styles***/
body {
    background: #eef2ff;
}

a {
    text-decoration: none;
}

nav li a {
    color: azure;
}
nav ul {
    list-style:none;
}
header *, footer * {
    color: azure;
}
option, optgroup {
    color: #1b1b1b;
}

input, textarea, select {
    background: #f7f7f7;
    color: #1b1b1b;
    border: thin solid #808080;
    border-radius: 5px;
}

    input:focus, textarea:focus, select:focus {
        border: thin solid #1b1b1b;
        outline: none;
    }

label {
    color: #1b1b1b;
}
footer label {
    color: azure;
}
table thead {
    background: #1c126b;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.04)), url(../images/assets/ThemeImages/hexagonpattern.png);
    color: azure;
}

/*** Buttons ***/

button, a.button {
    padding: 0.5em;
    border: thin solid;
    border-radius: 5px;
    margin: 5px;
    font-size: 12pt;
    background: #f0f2ff;
    border-color: #18229c;
    color: #18229c;
}
    button i, a.button i {
        color: #1400a3;
    }
    button:hover, a.button:hover {
        border-color: #1b1b1b;
        background: #d5ddff;
        color: #1b1b1b;
    }

    button.danger, a.button.danger {
        border-color: #a30f0f;
        color: #a30f0f;
    }

        button.danger:hover, a.button.danger:hover {
            border-color: #450b0b;
            background: #ffa2a2;
            color: #450b0b;
        }


    button[type=reset], a.button.secondary, button.secondary {
        background: #f9f8f0;
        border-color: #c3bb22;
        color: #c3bb22;
    }

        button[type=reset]:hover, a.button.secondary:hover, button.secondary:hover {
            background: #ededd5;
        }

/*    button[type=submit], a.button.primary, button.primary {
        background: #f0f2ff;
        border-color: #18229c;
        color: #18229c;
    }*/

    button.disabled, a.button.disabled {
        background: rgb(120 117 123);
        font-style: italic;
        color: #1b1b1b;
    }

        button.disabled:hover, a.button.disabled:hover {
            border: thin solid #808080;
        }

/*        button[type=submit]:hover, a.button.primary:hover, button.primary:hover {
            background: #d5ddff;
        }*/

    button.iconButton {
        border: none;
        background: none;
        color: #1b1b1b;
        cursor: pointer;
    }

        button.iconButton.enabled {
            color: #0024ff;
            text-shadow: 1px 1px 1px #5ed3ff80, 0 0 20px white;
        }

        button.iconButton:hover {
            color: #808080;
            background:none;
            border:none;
            text-shadow: 1px 1px 1px #ffffff80, 0 0 20px white;
        }
    button.textButton {
        background: none;
        border: none;
        display: block;
        font-size: inherit;
        padding: 0;
        margin: 0;
    }
        .formDark label {
            color:azure;
        }

/*** Header styles***/
header, footer, .contentHeader, .modal header, .modal footer, .heroBox, article header, article footer {
    background: #1c126b;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.04)), url('../images/assets/ThemeImages/hexagonpattern.png');
    color: azure;
}
    .heroBox * {
        color: azure;
    }

.error {
    color:red;
}
main nav ul a {
    color: #808080;
}

span.userReactionsMessage {
    
}

.pageHeader h1 {
    color: #FFFFFF;
}
.contentWrapper {
    /*background: #FAFAFA;*/
}

.contentWrapper header.pageHeader {
    border-radius: 10px;
}

    .contentWrapper header.pageHeader .options,
    .contentWrapper footer.pageFooter{
        background: #f7f7f7;
        color: #1b1b1b;
        box-shadow: 0px 0px 5px #d1d1d1;
        border-radius: 0 0 10px 10px;
    }
    .contentWrapper header.pageHeader .options p {
        color: #1b1b1b;
    }

        .contentWrapper header.pageHeader .options a {
            color: #1b1b1b;
        }

        .contentWrapper header.pageHeader .options a :not(.a.button) {
            color: #333;
            text-decoration: underline;
            font-weight: 600;
        }

    .contentWrapper footer.pageFooter {
        /*background: #FAFAFA;*/
        border-radius: 10px;
        font-size: 0.8em;
    }
.flexHorizontalReverse {
    display:flex;
    flex-direction:row-reverse;
}
article header {
    border-radius: 10px 10px 0 0;
    font-size:0.8em;
    padding: 5px;
}
article footer {
    border-radius: 0 0 10px 10px;
}
.heroBox {
    border-radius: 10px;
}
.tabLink {
    background: #1c126b;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.04)), url(../images/assets/ThemeImages/hexagonpattern.png);
    padding: 0.5em;
    display: block;
}

    .tabLink, .tabLink * {
        color: azure;
    }
.contentBody, .modal article, .userCard, .characterCard, .roleplayCard {
    background: #f7f7f7; /*#1e1e1e #4a1254*/
    color: #1b1b1b;
    box-shadow: 0px 0px 5px #d1d1d1;
}

.roleplayCardContainer .roleplayCardBg {
    background: #f7f7f7; /*#1e1e1e #4a1254*/
    box-shadow: 0px 0px 5px #d1d1d1;
}

/*** Profiles ***/
.profileWrapper {
    background: #eef2ff;
}

.profileHeader .userBanner {
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) );
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.profileHeader .userStats {
    background: rgba(28, 18, 107, 1);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .04)), url(../../images/assets/ThemeImages/hexagonpattern.png);
    color: azure;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}

.profileHeader .userStatHeader {
    color: azure;
}

.profileHeader .userStatValue {
    color: azure;
}

.profileHeader .userAvatar .userInfo h2 {
    background: rgb(255, 255, 255, .69);
}

.profileHeader .userAvatar .userInfo .usergroup {
    background: rgb(255, 255, 255, .69);
}

.controlButton {
    color: azure;
}

    .controlButton i {
        color: azure;
    }

.profileType {
    color: #000;
    background-color: rgb(255, 255, 255, .69);
}

.profileNav {
    background: rgba(28, 18, 107, 1);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.04)), url(../../images/assets/ThemeImages/hexagonpattern.png);
    color: azure;
}

    .profileNav li, .profileNav li a {
        color: azure;
    }

        .profileNav li:hover {
            background: rgba(255, 255, 255, 0.4);
            color: rgba(255, 255, 255, 1);
        }

        .profileNav li:active, .profileNav li.active {
            background: rgba(255, 255, 255, 0.8);
            color: rgb(0, 0, 0, 1);
            font-weight: bold;
        }
        .profileNav li.active a {
            color: rgb(0, 0, 0, 1);
            font-weight: bold;
        }
.profileContent {
    background: rgba(255, 255, 255, 1);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}

.featureLeaveOfAbsenceDesktop {
    background-color: rgb(250, 199, 70, 1);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}

.sidebarItemHeader {
    background: rgba(28, 18, 107, 1);
    color: azure;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}

    .sidebarItemHeader h4 {
        color: azure;
    }

.sidebarItemContent {
    background: rgba(255, 255, 255, 1);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}

.featureLeaveOfAbsence {
    background-color: rgb(250, 199, 70, 1);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}

@media screen and (min-width: 1200px) {
    .profileHeader .userAvatar .userInfo { /*Moved to desktop only */
        background: rgb(255, 255, 255, .69);
    }

    .featureLeaveOfAbsenceDesktop {
        background-color: rgb(250, 199, 70, 1);
        box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
    }
}

/*** Account Settings ***/

.flexbox-container {
    /*        border: 3px solid #FF0000;*/
}

.flexbox-row-header {
    /*        border: 3px solid #0000FF;*/
    border-top: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    border-bottom: 0px solid #e8e8e8;
    border-left: 2px solid #e8e8e8;
}

.flexbox-item {
    border: 2px solid #e8e8e8;
    box-shadow: rgba(0,0,0,0.5) 2px 2px;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19) !important;
}

.tabs a {
    border-top: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    border-bottom: 0px solid #e8e8e8;
    border-left: 2px solid #e8e8e8;
}

.tabSet .contents {
    border: 2px solid #e8e8e8;
}

/*** Recent Devices ***/

.recentDeviceWrap {
    border: 2px solid #8b8b8b44;
    box-shadow: 1px 1px 7px #00000020;
}

.recentDeviceMachineWrap {
    border-bottom: 2px solid #f0f0f0;
}

.disclaimer {
    background: #ffdede;
    border: 1px solid #ff5454;
}

@media screen and (min-width: 920px) {

    .recentDeviceMachineWrap {
        border-bottom: 2px solid #f0f0f0;
    }
}


/*** Roleplay Dashboard ***/

    .userCard img, .characterCard img {
        border: none;
    }
        .userCard header {
            background: none;
            
        }
        .userCard header * {
            color: #1b1b1b;
        }
    .userCard.hasImageBg .body, .characterCard.hasImageBg .body {
        background: #ffffff79;
        border-radius: 5px;
    }

    .userCard img {
        border: #909090 solid 5px;
    }

        .userCard img.online {
            border: #1db50c solid 5px;
        }

        .userCard img.busy {
            border: #a42727 solid 5px;
        }

        .userCard img.away {
            border: #c3bb22 solid 5px;
        }

    .userCard .body, .characterCard .body, .roleplayCard header .controls * {
        text-shadow: 1px 1px 1px #00000080, 0 0 20px white;
    }


    .pagination a, .pagination span {
        color: #1b1b1b;
    }
        .pagination span.active {
            font-weight:bold;
        }


/** Roleplay Management **/

.roleplayManagementHeader .roleplayIcon .roleplayInfo h2 {
    background: rgb(255, 255, 255, .69);
}

.roleplayManagementHeader .roleplayIcon .roleplayInfo .roleplayName {
    background: rgb(255, 255, 255, .69);
}

/** Roleplay dashboard **/
.roleplayDashboard .contentWrapper {
    background: #FAFAFA;
}

@media screen and (min-width: 920px) {

    .roleplayDashboard .contentWrapper h2 {
        background: #1c126b;
        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.04)), url(../images/assets/ThemeImages/hexagonpattern.png);
        color: azure;
    }

    .roleplayDashboard .contentWrapper {
        box-shadow: 1px 2px 4px rgb(0 0 0 / 40%);
    }

    .roleplayDashboard .comment {
        box-shadow: 1px 2px 4px rgb(0 0 0 / 40%);
    }

    .roleplayDashboard .characterList > header, .roleplayDashboard .comments > header {
        box-shadow: 1px 2px 4px rgb(0 0 0 / 40%);
    }

}
.roleplayCardBg {
    border-radius: 10px;
}

    .roleplayCard header,
    .roleplayCardBg header {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

        .roleplayCard article .stats, .roleplayCard header h3,
        .roleplayCardBg article .stats, .roleplayCardBg header h3 {
            background: #dfe4ff7a;
        }

        .roleplayCard header h3,
        .roleplayCardBg header h3 {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

    .roleplayCard article .stats,
    .roleplayCardBg article .stats {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .roleplayCard header .controls *,
    .roleplayCardBg header .controls * {
        color: azure;
    }

    .roleplayCard header,
    .roleplayCardBg header {
        background: #1c126b;
        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.04)), url('../images/assets/ThemeImages/hexagonpattern.png');
    }

    /*** Comments ***/

        .comment h3, .comment .reactionsContainer {
            font-size: 0.8em;
        }

        .comment footer {
            display: flex;
            flex-direction: row-reverse;
        }

    .comments .comment header, .comments .comment footer {
        border-radius: 0;
    }

    .comments .pagination a, .comments .pagination span {
        color: azure;
    }

    .comment .contents, article .contents {
        background: #f7f7f7;
    }

    .comments .pagination a, .comments .pagination span {
        color: #1b1b1b;
    }

    .comments textarea {
        border: none;
        border-radius: 0;
    }

    .modalFrame {
        background: rgba(43, 43, 43, 0.54);
    }

    .modal {
        background: #642e2e;
        border-radius: 10px;
    }

        .modal article {
            flex: 1;
        }

        .modal header {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .modal footer {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .modal header * {
            color: azure;
        }
    /*** Side navigation ***/
    .sideNav {
        background: #1c126b;
        color: azure;
    }

    .sideNavClose i, .sideNavOpen i {
        color: azure;
    }
    /***Posts ***/

    .postsContainer {
    }

    .post header, .post footer, .post-alt header, .post-alt footer {
        background: #1c126b;
        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.04)), url('../images/assets/ThemeImages/hexagonpattern.png');
    }

    .post header, .post-alt header {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .post footer, .post-alt footer {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        flex-direction: row-reverse;
    }

        .post header *, .post footer, .post footer *, .post .reaction .count, .post-alt header *, .post-alt footer * {
            color: azure;
        }

    .post article, .post-alt section {
        background: #f7f7f7;
    }

    .post aside, .post-alt aside {
        background: #eef2ff;
    }

    /****** User Status ******/
    .userStatus *, .userStatus button.textButton {
        color: azure;
    }

    .userStatus {
    }

        .userStatus .userAvatar {
            background: #1c126b;
            border: 5px solid #1c126b;
            border-top-left-radius: 30px;
        }

        .userStatus .username {
            background: #1c126b;
            text-align: right;
        }

        .userStatus .bubble {
        }

        .userStatus .bubbles {
            background: #1c126b;
            border-top-left-radius: 30px;
            padding-left: 1em;
            transition: 2s;
        }

    .userStatusInfo .bubble-container:hover .bubblePopup {
        background: #dfe4ff7a;
        box-shadow: 0px 0px 3px white;
        color: #1b1b1b;
        text-shadow: 1px 1px 1px #00000080, 0 0 20px white;
        border-radius: 5px;
        font-size: small;
        min-width: 120px;
    }

        .userStatusInfo .bubble-container:hover .bubblePopup .notification {
            color: #1b1b1b;
            text-shadow: 1px 1px 1px #00000080, 0 0 20px white;
            overflow: hidden;
            padding-bottom: 0.5em;
        }

    .userStatus nav ul li {
        padding: 0.5em 1em;
    }

    .userStatus nav {
        background: #1c126b;
        border-top-left-radius: 30px;
        transition: 1s;
    }

        .userStatus nav.hide {
        }

        .userStatus nav.show {
        }

    @keyframes pulse {
        0% {
            /*transform: scale(0.95);*/
            box-shadow: 0px 0px 1px 2px rgba(180, 0, 0, 0.7);
        }

        70% {
            /*transform: scale(1);*/
            box-shadow: 0px 0px 2px 4px rgba(180, 0, 0, 1);
        }

        100% {
            /* transform: scale(0.95);*/
            box-shadow: 0px 0px 1px 2px rgba(180, 0, 0, 1);
        }
    }

    .userStatus .new {
        box-shadow: 0px 0px 2px 4px rgba(180, 0, 0, 1);
        /*transform: scale(1);*/
        animation: pulse 3s infinite;
    }

    .userStatus .bubble-container a:hover i {
        color: #808080;
    }
    /******* Reactions ********/

    .reactionsContainer .reactionPopup {
        border: thin solid #1c126b;
        border-radius: 30px;
        background: #f7f7f7;
        color: #808080;
    }

        .reactionsContainer .reactionPopup * {
            color: #808080;
        }

    @media screen and (min-width: 600px) {
        .userStatus {
            background: none;
            opacity: 0.7;
            transition: 1s;
        }

        .tabLink {
            background: none;
            padding: 0;
        }

            .tabLink, .tabLink * {
                color: #1b1b1b;
            }

        .userStatus:hover {
            opacity: 1;
        }

        .userStatus .userAvatar {
            background: none;
            border: none;
        }

        .userStatus .username {
            text-align: center;
            border-top-left-radius: 10px;
        }

        .userStatus .bubble-container {
            background: #dfe4ff7a;
            border-bottom-left-radius: 20px;
            border-top-left-radius: 20px;
            border-bottom-right-radius: 20px;
            border-top-right-radius: 20px;
            box-shadow: 0px 0px 3px white;
            transition: 0.4s;
        }

        .userStatus .bubbles {
            background: none;
        }

        .userStatus .bubble {
            background: #1c126b;
        }

        .userStatus .bubble-text {
            color: #1b1b1b;
            text-shadow: 1px 1px 1px #00000080, 0 0 20px white;
            padding-right: 1em;
            padding-left: 0.5em;
        }

        .userStatus nav {
            background: #1c126b;
            color: azure;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 30px;
            text-wrap: none;
        }

            .userStatus nav ul li:hover {
                color: aliceblue;
            }
        /***Roleplay dashboard ***/
        .roleplayDashboard .grid > li {
            filter: drop-shadow(1px 1px 2px #aaa);
        }
    }