@font-face {
    font-family: whorehause;
    src: url(/layout/LibreBaskerville-Regular.ttf);
}

@font-face {
    font-family: whorehause-bold;
    src: url(/layout/LibreBaskerville-Bold.ttf);
}

@font-face {
    font-family: whorehause-italic;
    src: url(/layout/LibreBaskerville-Italic.ttf);
}

body {
    background-image:url(/layout/img/textureDark.png);
    background-repeat:repeat;
    margin-bottom:30px;
}

a {
    color: #354E79;
}

.logodiv{
    width:1100px;
    height:auto;
    margin: 0 auto;
    text-align:center;
    z-index:2;
}

.logodiv img{
    max-width: 100% !important;
    height:auto;
    width:auto;
}

.sidebysideimgs {
    margin-left:auto;
    margin-right:auto;
    display:inline-block;
    height:auto;
    width:auto;
}

.contentdiv{
    z-index:1;
    width:900px;
    height:auto;
    margin: 0 auto;
    margin-top: -83px;
    padding-top:40px;
    padding-left:15px;
    padding-right:15px;
    color:#3A3248;
    font-family: whorehause, 'Times New Roman', Times, serif !important;
    background-image:url(/layout/img/contentBg.png);
    background-repeat:repeat-y;
    background-size:100% 100%;
    border: 30px solid rgba(0,0,0,0);
    border-style: solid;
    border-image: url(/layout/img/border.png) 40% repeat;
    font-size:15px;
}

.contentdiv h1 {
    text-align:center;
}
.contentdiv h2 {
    text-align:center;
}
.contentdiv h3 {
    text-align:center;
}

.contentdiv h5 {
    text-align:center;
}

.contentdiv p {
    font-size: 14px;
}

.contentdiv strong{
    color:#5976A9;
}

.contentdiv em{
    color:#5976A9;
}

.contentdiv a{
    color:#65AAE3
}

.contentdiv hr.dashed{
    border-top: 2px dashed #3A3248;
}

.contentdiv hr.dotted{
    border-top: 2px dotted #3A3248;
}

.contentdiv hr.solid{
    border-top: 2px solid #3A3248;
}

.contentdiv hr.rounded{
    border-top: 1px solid #3A3248;
    border-radius:5px;
}

.contentdiv hr.gradient{
    border: 10px solid;
    border-image-slice:1;
    border-width:0.5px;
    border-image-source: linear-gradient(to right, #3A324810, #3A324820, #3A324810, #3A324820, #3A324810);
    border-radius:5px;
}

.contentdiv pre{
    border: 1px solid #3A3248;
    padding:3px;
    color: #3A3248;
    background-color:white;
    white-space:pre-wrap !important;
    word-wrap:break-word;
    display:block;
    width:240px;
    font-size:11px;
}

.contentgrid{
    display:grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    padding-top:30px;
    text-align:left;
}

.contentgrid p {
    font-size: 13.5px;
}

.contentgriditem {
    border: 10px solid;
    border-image-slice:1;
    border-width:0.5px;
    border-image-source: linear-gradient(to right, #3A324810, #3A324820, #3A324810, #3A324820, #3A324810);
    border-radius:5px;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    padding:20px;
}

.contentgridspan {
    grid-column-start: 1;
    grid-column-end: 3;
    width:auto;
}

.networkgrid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align:center !important;
    align-items: center !important;
    grid-gap:5px;
}

.networkgrid img{
    padding-top:15px;
}

.networkgriditem{
    border: 10px solid;
    border-image-slice:1;
    border-width:0.5px;
    border-image-source: linear-gradient(to right, #3A3248,);
    border-radius:5px;
    padding-top:auto;
    padding-bottom:auto;
    padding-left:8px;
    padding-right:8px;
    background-color: #fde6e6;
    height:100% !important;
    align-items: center;
}

.networkgridsmallpx{
    font-size:10px !important;
    line-height:0px;
    padding-bottom:10px;
}

.networkgridzenya {
    background-color: #F6F3BD;
}

.networkgridzenya p {
    color: #312d09;
}

.networkgridzenya em {
    color: #af3b18
}   

.networkgridzenya strong {
    color: #af3b18;
}

.networkgridaoba {
    background-color: #d7f8ff;
}

.networkgridaoba p {
    color: #143b42;
}

.networkgridtowa{
    background-color: #3f3d3a;
}

.networkgridtowa p {
    color: #ffecc6;
}

.networkgridtowa em {
    color: #ffc4d6
}   

.networkgridtowa strong {
    color: #fcbfd1;
}

.networkgridryo {
    background-color: #fff1db;
}

.networkgridryo p {
    color: #624F37;
}

.networkgridryo em {
    color: #5C3E2E
}   

.networkgridryo strong {
    color: #5C3E2E
}

.networkgridsaya {
    background-color: #A6E0B5;
}

.networkgridsaya p {
    color: #4D0B0B;
}

.networkgridsaya strong {
    color: #B80707
}

.networkgridsaya em {
    color: #B80707
}







.networkgridhuacheng {
    background-color: #F4F4F2;
}

.networkgridhuacheng p {
    color: #960F0C;
}

.networkgridhuacheng strong {
    color: #360100
}

.networkgridhuacheng em {
    color: #360100
}




.pendingcount {
    font-size: 12px !important;
    text-align: center;
}

.pseperator {
    font-size: 17px !important;
    font-family: whorehause-bold, 'Times New Roman', Times, serif !important;
    text-align:center !important;
    margin:-5px;
    margin-top:20px;
}

.bodyheaderimg{
    height:45px;
    width:auto;
    float:none !important;
}

.version {
    width: 660px;
    margin-top:-25px !important;
    margin-bottom:-10px !important;
    margin:0 auto;
    text-align:right !important;
    font-family:whorehause-bold !important;
    padding-right:25px;
    opacity:70%;
    z-index:3;
    color:#5976A9;
}

.version p {
    font-size: 11px !important;
}

.footer {
    position:sticky;
    top: 100vh;
    text-align:center;
    margin-top:20px;
}

.footer p{
    font-size:10px;
    padding-left:10px;
    padding-right:10px;
}

.footerimg{
    float:left;
    height:70px;
    width:auto;
    margin-top:-10px;
    padding-right:15px;
}

.mobilelogodivbg {
    display:none;
}

@media screen and (max-width: 1116px) {
    body {
        margin-bottom:0px !important;
    }
    .logodiv{
        width:auto !important;
    }
    .contentdiv {
        width:auto !important;
        padding-top:50px !important;
        margin-top:0px;
        border: 30px solid transparent;
        border-style: solid;
        border-image: url(/layout/img/border.png) 40% repeat;
    }
    .contentgrid{
        display:grid;
        grid-template-rows: auto !important;
        grid-template-columns: none !important;
        padding-top:30px;

    }
    .networkgrid{
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: repeat(1fr) !important;
    }
    .contentgriditem {
        border-bottom: 10px solid;
        border-left-width: 0px !important;
        border-right-width: 0px !important;
        border-image-slice:1;
        border-width:0.5px;
        border-image-source: linear-gradient(to right, #3A324810, #3A324820, #3A324810, #3A324820, #3A324810);
        border-radius:5px;
        padding-top:15px;
        padding-bottom:15px;
        margin-left:-20px !important;
        margin-right:-20px !important;
    }
    
    .contentgridspan {
        grid-column-start: 1;
        grid-column-end: 1;
        width:auto;
    }
    .mobilelogogradient{
        display:block;
        height:100px;
        width:auto;
        margin-left:15px;
        margin-right:15px;
        margin-top: -200px;
        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0),  #FFF3F1) !important;
        background-repeat:repeat-y;
        background-size:100% 100%;
    }
    .version {
        width: auto;
        margin-top:-10px !important;
        margin-bottom:-10px !important;
        margin:0 auto;
        text-align:right !important;
        font-family:whorehause-bold !important;
        padding-right:8vw !important;
        opacity:70%;
        z-index:3;
        color:#5976A9;
        position:relative
    }
    .version p {
        font-size: 1.5vw !important;
    }
    .footerimg{
        float:none;
        height:40px;
        width:auto;
        margin-top:-10px;
        padding-right:0px !important;
    }
    .networkgriditem{
        height:93% !important;
    }
}